From f7afa103a522a3ca78785f36367eb9a319020d65 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 13 Mar 2026 13:43:29 +0800
Subject: [PATCH 001/108] feat: select snippets

---
 .../workflow/block-selector/hooks.ts          |   5 +
 .../workflow/block-selector/main.tsx          |  82 ++++--
 .../workflow/block-selector/snippets.tsx      | 247 ++++++++++++++++++
 .../workflow/block-selector/tabs.tsx          |   9 +
 .../workflow/block-selector/types.ts          |   1 +
 web/i18n/en-US/workflow.json                  |   4 +
 web/i18n/zh-Hans/workflow.json                |   4 +
 7 files changed, 329 insertions(+), 23 deletions(-)
 create mode 100644 web/app/components/workflow/block-selector/snippets.tsx

diff --git a/web/app/components/workflow/block-selector/hooks.ts b/web/app/components/workflow/block-selector/hooks.ts
index ad21df1cb8..3a05bc09cc 100644
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -71,6 +71,10 @@ export const useTabs = ({
       name: t('tabs.start', { ns: 'workflow' }),
       show: shouldShowStartTab,
       disabled: shouldDisableStartTab,
+    }, {
+      key: TabsEnum.Snippets,
+      name: t('tabs.snippets', { ns: 'workflow' }),
+      show: true,
     }]
 
     return tabConfigs.filter(tab => tab.show)
@@ -100,6 +104,7 @@ export const useTabs = ({
       preferredOrder.push(TabsEnum.Sources)
     if (!noStart)
       preferredOrder.push(TabsEnum.Start)
+    preferredOrder.push(TabsEnum.Snippets)
 
     for (const tabKey of preferredOrder) {
       const validKey = getValidTabKey(tabKey)
diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index 5229d273f3..aace98900c 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -15,6 +15,7 @@ import type {
 import {
   memo,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -32,6 +33,7 @@ import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import { BlockEnum, isTriggerNode } from '../types'
 import { useTabs } from './hooks'
+import Snippets from './snippets'
 import Tabs from './tabs'
 import { TabsEnum } from './types'
 
@@ -88,6 +90,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   const { t } = useTranslation()
   const nodes = useNodes()
   const [searchText, setSearchText] = useState('')
+  const [snippetsLoading, setSnippetsLoading] = useState(() => Boolean(openFromProps) && defaultActiveTab === TabsEnum.Snippets)
   const [tags, setTags] = useState<string[]>([])
   const [localOpen, setLocalOpen] = useState(false)
   // Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
@@ -119,28 +122,6 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   // Default rule: user input option is only available when no Start node nor Trigger node exists on canvas.
   const defaultAllowUserInputSelection = !hasUserInputNode && !hasTriggerNode
   const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
-  const open = openFromProps === undefined ? localOpen : openFromProps
-  const handleOpenChange = useCallback((newOpen: boolean) => {
-    setLocalOpen(newOpen)
-
-    if (!newOpen)
-      setSearchText('')
-
-    if (onOpenChange)
-      onOpenChange(newOpen)
-  }, [onOpenChange])
-  const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
-    if (disabled)
-      return
-    e.stopPropagation()
-    handleOpenChange(!open)
-  }, [handleOpenChange, open, disabled])
-
-  const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
-    handleOpenChange(false)
-    onSelect(type, pluginDefaultValue)
-  }, [handleOpenChange, onSelect])
-
   const {
     activeTab,
     setActiveTab,
@@ -154,10 +135,51 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     hasUserInputNode,
     forceEnableStartTab,
   })
+  const open = openFromProps === undefined ? localOpen : openFromProps
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    setLocalOpen(newOpen)
+
+    if (!newOpen) {
+      setSearchText('')
+      setSnippetsLoading(false)
+    }
+    else if (activeTab === TabsEnum.Snippets) {
+      setSnippetsLoading(true)
+    }
+
+    if (onOpenChange)
+      onOpenChange(newOpen)
+  }, [activeTab, onOpenChange])
+  const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
+    if (disabled)
+      return
+    e.stopPropagation()
+    handleOpenChange(!open)
+  }, [handleOpenChange, open, disabled])
+
+  const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
+    handleOpenChange(false)
+    onSelect(type, pluginDefaultValue)
+  }, [handleOpenChange, onSelect])
 
   const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
     setActiveTab(newActiveTab)
-  }, [setActiveTab])
+    if (open && newActiveTab === TabsEnum.Snippets)
+      setSnippetsLoading(true)
+  }, [open, setActiveTab])
+
+  useEffect(() => {
+    if (!snippetsLoading)
+      return
+
+    const timer = window.setTimeout(() => {
+      setSnippetsLoading(false)
+    }, 200)
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [snippetsLoading])
 
   const searchPlaceholder = useMemo(() => {
     if (activeTab === TabsEnum.Start)
@@ -171,6 +193,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
 
     if (activeTab === TabsEnum.Sources)
       return t('tabs.searchDataSource', { ns: 'workflow' })
+    if (activeTab === TabsEnum.Snippets)
+      return t('tabs.searchSnippets', { ns: 'workflow' })
     return ''
   }, [activeTab, t])
 
@@ -257,6 +281,17 @@ const NodeSelector: FC<NodeSelectorProps> = ({
                     inputClassName="grow"
                   />
                 )}
+                {activeTab === TabsEnum.Snippets && (
+                  <Input
+                    showLeftIcon
+                    showClearIcon
+                    autoFocus
+                    value={searchText}
+                    placeholder={searchPlaceholder}
+                    onChange={e => setSearchText(e.target.value)}
+                    onClear={() => setSearchText('')}
+                  />
+                )}
               </div>
             )}
             onSelect={handleSelect}
@@ -268,6 +303,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
             noTools={noTools}
             onTagsChange={setTags}
             forceShowStartContent={forceShowStartContent}
+            snippetsElem={<Snippets loading={snippetsLoading} searchText={searchText} />}
           />
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/workflow/block-selector/snippets.tsx b/web/app/components/workflow/block-selector/snippets.tsx
new file mode 100644
index 0000000000..dfbdbd3178
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets.tsx
@@ -0,0 +1,247 @@
+import type { ReactNode } from 'react'
+import {
+  memo,
+  useDeferredValue,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import {
+  SearchMenu,
+} from '@/app/components/base/icons/src/vender/line/others'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
+import { cn } from '@/utils/classnames'
+import BlockIcon from '../block-icon'
+import { BlockEnum } from '../types'
+
+type SnippetsProps = {
+  loading?: boolean
+  searchText: string
+}
+
+type StaticSnippet = {
+  id: string
+  badge: string
+  badgeClassName: string
+  title: string
+  description: string
+  author?: string
+  relatedBlocks?: BlockEnum[]
+}
+
+const STATIC_SNIPPETS: StaticSnippet[] = [
+  {
+    id: 'customer-review',
+    badge: 'CR',
+    title: 'Customer Review',
+    description: 'Customer Review Description',
+    author: 'Evan',
+    relatedBlocks: [
+      BlockEnum.LLM,
+      BlockEnum.Code,
+      BlockEnum.KnowledgeRetrieval,
+      BlockEnum.QuestionClassifier,
+      BlockEnum.IfElse,
+    ],
+    badgeClassName: 'bg-gradient-to-br from-orange-500 to-rose-500',
+  },
+] as const
+
+const LoadingSkeleton = () => {
+  return (
+    <div className="relative overflow-hidden">
+      <div className="p-1">
+        {['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4'].map((key, index) => (
+          <div
+            key={key}
+            className={cn(
+              'flex items-center gap-1 px-3 py-1 opacity-20',
+              index === 3 && 'opacity-10',
+            )}
+          >
+            <div className="my-1 h-6 w-6 shrink-0 rounded-lg border-[0.5px] border-effects-icon-border bg-text-quaternary" />
+            <div className="min-w-0 flex-1 px-1 py-1">
+              <div className="h-2 w-[200px] rounded-[2px] bg-text-quaternary" />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-components-panel-bg-transparent to-background-default-subtle" />
+    </div>
+  )
+}
+
+const SnippetBadge = ({
+  badge,
+  badgeClassName,
+}: Pick<StaticSnippet, 'badge' | 'badgeClassName'>) => {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        'flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-[9px] font-semibold uppercase text-white shadow-[0px_3px_10px_-2px_rgba(9,9,11,0.08),0px_2px_4px_-2px_rgba(9,9,11,0.06)]',
+        badgeClassName,
+      )}
+    >
+      {badge}
+    </div>
+  )
+}
+
+const SnippetDetailCard = ({
+  author,
+  description,
+  relatedBlocks = [],
+  title,
+  triggerBadge,
+}: {
+  author?: string
+  description?: string
+  relatedBlocks?: BlockEnum[]
+  title: string
+  triggerBadge: ReactNode
+}) => {
+  return (
+    <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          {triggerBadge}
+          <div className="text-text-primary system-md-medium">{title}</div>
+        </div>
+        {!!description && (
+          <div className="w-[200px] text-text-secondary system-xs-regular">
+            {description}
+          </div>
+        )}
+        {!!relatedBlocks.length && (
+          <div className="flex items-center gap-0.5 pt-1">
+            {relatedBlocks.map(block => (
+              <BlockIcon
+                key={block}
+                type={block}
+                size="sm"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {!!author && (
+        <div className="pt-3 text-text-tertiary system-xs-regular">
+          {author}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const Snippets = ({
+  loading = false,
+  searchText,
+}: SnippetsProps) => {
+  const { t } = useTranslation()
+  const deferredSearchText = useDeferredValue(searchText)
+  const [hoveredSnippetId, setHoveredSnippetId] = useState<string | null>(null)
+
+  const snippets = useMemo(() => {
+    return STATIC_SNIPPETS.map(item => ({
+      ...item,
+    }))
+  }, [])
+
+  const filteredSnippets = useMemo(() => {
+    const normalizedSearch = deferredSearchText.trim().toLowerCase()
+    if (!normalizedSearch)
+      return snippets
+
+    return snippets.filter(item => item.title.toLowerCase().includes(normalizedSearch))
+  }, [deferredSearchText, snippets])
+
+  if (loading)
+    return <LoadingSkeleton />
+
+  if (!filteredSnippets.length) {
+    return (
+      <div className="flex min-h-[480px] flex-col items-center justify-center gap-2 px-4">
+        <SearchMenu className="h-8 w-8 text-text-tertiary" />
+        <div className="text-text-secondary system-sm-regular">
+          {t('tabs.noSnippetsFound', { ns: 'workflow' })}
+        </div>
+        <Button
+          variant="secondary-accent"
+          size="small"
+          onClick={(e) => {
+            e.preventDefault()
+          }}
+        >
+          {t('tabs.createSnippet', { ns: 'workflow' })}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-h-[480px] max-w-[500px] overflow-y-auto p-1">
+      {filteredSnippets.map((item) => {
+        const badge = (
+          <SnippetBadge
+            badge={item.badge}
+            badgeClassName={item.badgeClassName}
+          />
+        )
+
+        const row = (
+          <div
+            className={cn(
+              'flex h-8 items-center gap-2 rounded-lg px-3',
+              hoveredSnippetId === item.id && 'bg-background-default-hover',
+            )}
+            onMouseEnter={() => setHoveredSnippetId(item.id)}
+            onMouseLeave={() => setHoveredSnippetId(current => current === item.id ? null : current)}
+          >
+            {badge}
+            <div className="min-w-0 text-text-secondary system-sm-medium">
+              {item.title}
+            </div>
+            {hoveredSnippetId === item.id && item.author && (
+              <div className="ml-auto text-text-tertiary system-xs-regular">
+                {item.author}
+              </div>
+            )}
+          </div>
+        )
+
+        if (!item.description)
+          return <div key={item.id}>{row}</div>
+
+        return (
+          <Tooltip key={item.id}>
+            <TooltipTrigger
+              delay={0}
+              render={row}
+            />
+            <TooltipContent
+              placement="left-start"
+              variant="plain"
+              popupClassName="!bg-transparent !p-0"
+            >
+              <SnippetDetailCard
+                author={item.author}
+                description={item.description}
+                relatedBlocks={item.relatedBlocks}
+                title={item.title}
+                triggerBadge={badge}
+              />
+            </TooltipContent>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+}
+
+export default memo(Snippets)
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index f1eeba7435..601fa44a54 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -40,6 +40,7 @@ export type TabsProps = {
   noTools?: boolean
   forceShowStartContent?: boolean // Force show Start content even when noBlocks=true
   allowStartNodeSelection?: boolean // Allow user input option even when trigger node already exists (e.g. change-node flow or when no Start node yet).
+  snippetsElem?: React.ReactNode
 }
 const Tabs: FC<TabsProps> = ({
   activeTab,
@@ -57,6 +58,7 @@ const Tabs: FC<TabsProps> = ({
   noTools,
   forceShowStartContent = false,
   allowStartNodeSelection = false,
+  snippetsElem,
 }) => {
   const { t } = useTranslation()
   const { data: buildInTools } = useAllBuiltInTools()
@@ -234,6 +236,13 @@ const Tabs: FC<TabsProps> = ({
           />
         )
       }
+      {
+        activeTab === TabsEnum.Snippets && snippetsElem && (
+          <div className="border-t border-divider-subtle">
+            {snippetsElem}
+          </div>
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index 39e7b033bd..108e1dec68 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -7,6 +7,7 @@ export enum TabsEnum {
   Blocks = 'blocks',
   Tools = 'tools',
   Sources = 'sources',
+  Snippets = 'snippets',
 }
 
 export enum ToolTypeEnum {
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 4d9f5adbac..f2d6398784 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -1090,6 +1090,7 @@
   "tabs.allTool": "All",
   "tabs.allTriggers": "All triggers",
   "tabs.blocks": "Nodes",
+  "tabs.createSnippet": "Create a snippet",
   "tabs.customTool": "Custom",
   "tabs.featuredTools": "Featured",
   "tabs.hideActions": "Hide tools",
@@ -1099,16 +1100,19 @@
   "tabs.noFeaturedTriggers": "Discover more triggers in Marketplace",
   "tabs.noPluginsFound": "No plugins were found",
   "tabs.noResult": "No match found",
+  "tabs.noSnippetsFound": "No snippets were found",
   "tabs.plugin": "Plugin",
   "tabs.pluginByAuthor": "By {{author}}",
   "tabs.question-understand": "Question Understand",
   "tabs.requestToCommunity": "Requests to the community",
   "tabs.searchBlock": "Search node",
   "tabs.searchDataSource": "Search Data Source",
+  "tabs.searchSnippets": "Search snippets...",
   "tabs.searchTool": "Search tool",
   "tabs.searchTrigger": "Search triggers...",
   "tabs.showLessFeatured": "Show less",
   "tabs.showMoreFeatured": "Show more",
+  "tabs.snippets": "Snippets",
   "tabs.sources": "Sources",
   "tabs.start": "Start",
   "tabs.startDisabledTip": "Trigger node and user input node are mutually exclusive.",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index acda7db2fc..82516f5f9f 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -1090,6 +1090,7 @@
   "tabs.allTool": "全部",
   "tabs.allTriggers": "全部触发器",
   "tabs.blocks": "节点",
+  "tabs.createSnippet": "创建 snippet",
   "tabs.customTool": "自定义",
   "tabs.featuredTools": "精选推荐",
   "tabs.hideActions": "收起工具",
@@ -1099,16 +1100,19 @@
   "tabs.noFeaturedTriggers": "前往插件市场查看更多触发器",
   "tabs.noPluginsFound": "未找到插件",
   "tabs.noResult": "未找到匹配项",
+  "tabs.noSnippetsFound": "未找到 snippets",
   "tabs.plugin": "插件",
   "tabs.pluginByAuthor": "来自 {{author}}",
   "tabs.question-understand": "问题理解",
   "tabs.requestToCommunity": "向社区反馈",
   "tabs.searchBlock": "搜索节点",
   "tabs.searchDataSource": "搜索数据源",
+  "tabs.searchSnippets": "搜索 snippets...",
   "tabs.searchTool": "搜索工具",
   "tabs.searchTrigger": "搜索触发器...",
   "tabs.showLessFeatured": "收起",
   "tabs.showMoreFeatured": "查看更多",
+  "tabs.snippets": "Snippets",
   "tabs.sources": "数据源",
   "tabs.start": "开始",
   "tabs.startDisabledTip": "触发节点与用户输入节点互斥。",

From c1011f4e5c2a8250c5cd68cdd3dd5ec45fa46024 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 13 Mar 2026 14:29:59 +0800
Subject: [PATCH 002/108] feat: add to snippet

---
 .../workflow/create-snippet-dialog.tsx        | 178 +++++++++++++++
 .../workflow/selection-contextmenu.tsx        | 216 +++++++++++-------
 web/i18n/en-US/workflow.json                  |  10 +
 web/i18n/zh-Hans/workflow.json                |  10 +
 4 files changed, 335 insertions(+), 79 deletions(-)
 create mode 100644 web/app/components/workflow/create-snippet-dialog.tsx

diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
new file mode 100644
index 0000000000..bb42b33d1f
--- /dev/null
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -0,0 +1,178 @@
+'use client'
+
+import type { FC } from 'react'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import { useKeyPress } from 'ahooks'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '@/app/components/base/app-icon'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import Toast from '@/app/components/base/toast'
+import { Dialog, DialogCloseButton, DialogContent, DialogPortal, DialogTitle } from '@/app/components/base/ui/dialog'
+import ShortcutsName from './shortcuts-name'
+
+export type CreateSnippetDialogPayload = {
+  name: string
+  description: string
+  icon: AppIconSelection
+  selectedNodeIds: string[]
+}
+
+type CreateSnippetDialogProps = {
+  isOpen: boolean
+  selectedNodeIds: string[]
+  onClose: () => void
+  onConfirm: (payload: CreateSnippetDialogPayload) => void
+}
+
+const defaultIcon: AppIconSelection = {
+  type: 'emoji',
+  icon: '🤖',
+  background: '#FFEAD5',
+}
+
+const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
+  isOpen,
+  selectedNodeIds,
+  onClose,
+  onConfirm,
+}) => {
+  const { t } = useTranslation()
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [icon, setIcon] = useState<AppIconSelection>(defaultIcon)
+  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
+
+  const resetForm = useCallback(() => {
+    setName('')
+    setDescription('')
+    setIcon(defaultIcon)
+    setShowAppIconPicker(false)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    resetForm()
+    onClose()
+  }, [onClose, resetForm])
+
+  const handleConfirm = useCallback(() => {
+    const trimmedName = name.trim()
+    const trimmedDescription = description.trim()
+
+    if (!trimmedName)
+      return
+
+    const payload = {
+      name: trimmedName,
+      description: trimmedDescription,
+      icon,
+      selectedNodeIds,
+    }
+
+    onConfirm(payload)
+    Toast.notify({
+      type: 'success',
+      message: t('snippet.createSuccess', { ns: 'workflow' }),
+    })
+    handleClose()
+  }, [description, handleClose, icon, name, onConfirm, selectedNodeIds, t])
+
+  useKeyPress(['meta.enter', 'ctrl.enter'], () => {
+    if (!isOpen)
+      return
+
+    handleConfirm()
+  })
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+        <DialogContent className="w-[520px] max-w-[520px] p-0">
+          <DialogCloseButton />
+
+          <div className="px-6 pb-3 pt-6">
+            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+              {t('snippet.createDialogTitle', { ns: 'workflow' })}
+            </DialogTitle>
+          </div>
+
+          <div className="space-y-4 px-6 py-2">
+            <div className="flex items-end gap-3">
+              <div className="flex-1 pb-0.5">
+                <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
+                  {t('snippet.nameLabel', { ns: 'workflow' })}
+                </div>
+                <Input
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  placeholder={t('snippet.namePlaceholder', { ns: 'workflow' }) || ''}
+                  autoFocus
+                />
+              </div>
+
+              <AppIcon
+                size="xxl"
+                className="shrink-0 cursor-pointer"
+                iconType={icon.type}
+                icon={icon.type === 'emoji' ? icon.icon : icon.fileId}
+                background={icon.type === 'emoji' ? icon.background : undefined}
+                imageUrl={icon.type === 'image' ? icon.url : undefined}
+                onClick={() => setShowAppIconPicker(true)}
+              />
+            </div>
+
+            <div>
+              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
+                {t('snippet.descriptionLabel', { ns: 'workflow' })}
+              </div>
+              <Textarea
+                className="resize-none"
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                placeholder={t('snippet.descriptionPlaceholder', { ns: 'workflow' }) || ''}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-5">
+            <Button onClick={handleClose}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button
+              variant="primary"
+              disabled={!name.trim()}
+              onClick={handleConfirm}
+            >
+              {t('snippet.confirm', { ns: 'workflow' })}
+              <ShortcutsName className="ml-1" keys={['ctrl', 'enter']} bgColor="white" />
+            </Button>
+          </div>
+        </DialogContent>
+
+        <DialogPortal>
+          <div className="pointer-events-none fixed left-1/2 top-1/2 z-[1002] flex -translate-x-1/2 translate-y-[170px] items-center gap-1 text-text-quaternary body-xs-regular">
+            <span>{t('snippet.shortcuts.press', { ns: 'workflow' })}</span>
+            <ShortcutsName keys={['ctrl', 'enter']} textColor="secondary" />
+            <span>{t('snippet.shortcuts.toConfirm', { ns: 'workflow' })}</span>
+          </div>
+        </DialogPortal>
+      </Dialog>
+
+      {showAppIconPicker && (
+        <AppIconPicker
+          className="z-[1100]"
+          onSelect={(selection) => {
+            setIcon(selection)
+            setShowAppIconPicker(false)
+          }}
+          onClose={() => setShowAppIconPicker(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default CreateSnippetDialog
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index d789d98fe0..e1df9e9746 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -6,7 +6,7 @@ import {
   RiAlignRight,
   RiAlignTop,
 } from '@remixicon/react'
-import { useClickAway } from 'ahooks'
+import { useClickAway, useKeyPress } from 'ahooks'
 import { produce } from 'immer'
 import {
   memo,
@@ -14,13 +14,17 @@ import {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
+import CreateSnippetDialog from './create-snippet-dialog'
 import { useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
 import { useWorkflowHistory, WorkflowHistoryEvent } from './hooks/use-workflow-history'
+import ShortcutsName from './shortcuts-name'
 import { useStore, useWorkflowStore } from './store'
+import { BlockEnum, TRIGGER_NODE_TYPES } from './types'
 
 enum AlignType {
   Left = 'left',
@@ -39,6 +43,8 @@ const SelectionContextmenu = () => {
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleSelectionContextmenuCancel } = useSelectionInteractions()
   const selectionMenu = useStore(s => s.selectionMenu)
+  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
+  const [selectedNodeIdsSnapshot, setSelectedNodeIdsSnapshot] = useState<string[]>([])
 
   // Access React Flow methods
   const store = useStoreApi()
@@ -67,7 +73,7 @@ const SelectionContextmenu = () => {
 
       const menuWidth = 240
 
-      const estimatedMenuHeight = 380
+      const estimatedMenuHeight = 420
 
       if (left + menuWidth > containerWidth)
         left = left - menuWidth
@@ -91,6 +97,32 @@ const SelectionContextmenu = () => {
       handleSelectionContextmenuCancel()
   }, [selectionMenu, selectedNodes.length, handleSelectionContextmenuCancel])
 
+  const isAddToSnippetDisabled = useMemo(() => {
+    return selectedNodes.some(node =>
+      node.data.type === BlockEnum.Start || TRIGGER_NODE_TYPES.includes(node.data.type as typeof TRIGGER_NODE_TYPES[number]))
+  }, [selectedNodes])
+
+  const handleOpenCreateSnippetDialog = useCallback(() => {
+    if (isAddToSnippetDisabled)
+      return
+
+    setSelectedNodeIdsSnapshot(selectedNodes.map(node => node.id))
+    setIsCreateSnippetDialogOpen(true)
+    handleSelectionContextmenuCancel()
+  }, [handleSelectionContextmenuCancel, isAddToSnippetDisabled, selectedNodes])
+
+  const handleCloseCreateSnippetDialog = useCallback(() => {
+    setIsCreateSnippetDialogOpen(false)
+    setSelectedNodeIdsSnapshot([])
+  }, [])
+
+  useKeyPress(['meta.g', 'ctrl.g'], () => {
+    if (!selectionMenu || isAddToSnippetDisabled)
+      return
+
+    handleOpenCreateSnippetDialog()
+  })
+
   // Handle align nodes logic
   const handleAlignNode = useCallback((currentNode: any, nodeToAlign: any, alignType: AlignType, minX: number, maxX: number, minY: number, maxY: number) => {
     const width = nodeToAlign.width
@@ -369,88 +401,114 @@ const SelectionContextmenu = () => {
     }
   }, [store, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel, handleAlignNode, handleDistributeNodes])
 
-  if (!selectionMenu)
+  if (!selectionMenu && !isCreateSnippetDialogOpen)
     return null
 
   return (
-    <div
-      className="absolute z-[9]"
-      style={{
-        left: menuPosition.left,
-        top: menuPosition.top,
-      }}
-      ref={ref}
-    >
-      <div ref={menuRef} className="w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl">
-        <div className="p-1">
-          <div className="system-xs-medium px-2 py-2 text-text-tertiary">
-            {t('operator.vertical', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.Top)}
-          >
-            <RiAlignTop className="h-4 w-4" />
-            {t('operator.alignTop', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.Middle)}
-          >
-            <RiAlignCenter className="h-4 w-4 rotate-90" />
-            {t('operator.alignMiddle', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.Bottom)}
-          >
-            <RiAlignBottom className="h-4 w-4" />
-            {t('operator.alignBottom', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.DistributeVertical)}
-          >
-            <RiAlignJustify className="h-4 w-4 rotate-90" />
-            {t('operator.distributeVertical', { ns: 'workflow' })}
+    <>
+      {selectionMenu && (
+        <div
+          className="absolute z-[9]"
+          style={{
+            left: menuPosition.left,
+            top: menuPosition.top,
+          }}
+          ref={ref}
+        >
+          <div ref={menuRef} className="w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl">
+            <div className="p-1">
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-30 data-[disabled=true]:hover:bg-transparent"
+                data-disabled={isAddToSnippetDisabled}
+                aria-disabled={isAddToSnippetDisabled}
+                onClick={handleOpenCreateSnippetDialog}
+              >
+                <span>{t('snippet.addToSnippet', { ns: 'workflow' })}</span>
+                {!isAddToSnippetDisabled && (
+                  <ShortcutsName className="ml-auto" keys={['ctrl', 'g']} textColor="secondary" />
+                )}
+              </div>
+            </div>
+            <div className="h-px bg-divider-regular"></div>
+            <div className="p-1">
+              <div className="system-xs-medium px-2 py-2 text-text-tertiary">
+                {t('operator.vertical', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.Top)}
+              >
+                <RiAlignTop className="h-4 w-4" />
+                {t('operator.alignTop', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.Middle)}
+              >
+                <RiAlignCenter className="h-4 w-4 rotate-90" />
+                {t('operator.alignMiddle', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.Bottom)}
+              >
+                <RiAlignBottom className="h-4 w-4" />
+                {t('operator.alignBottom', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.DistributeVertical)}
+              >
+                <RiAlignJustify className="h-4 w-4 rotate-90" />
+                {t('operator.distributeVertical', { ns: 'workflow' })}
+              </div>
+            </div>
+            <div className="h-px bg-divider-regular"></div>
+            <div className="p-1">
+              <div className="system-xs-medium px-2 py-2 text-text-tertiary">
+                {t('operator.horizontal', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.Left)}
+              >
+                <RiAlignLeft className="h-4 w-4" />
+                {t('operator.alignLeft', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.Center)}
+              >
+                <RiAlignCenter className="h-4 w-4" />
+                {t('operator.alignCenter', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.Right)}
+              >
+                <RiAlignRight className="h-4 w-4" />
+                {t('operator.alignRight', { ns: 'workflow' })}
+              </div>
+              <div
+                className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
+                onClick={() => handleAlignNodes(AlignType.DistributeHorizontal)}
+              >
+                <RiAlignJustify className="h-4 w-4" />
+                {t('operator.distributeHorizontal', { ns: 'workflow' })}
+              </div>
+            </div>
           </div>
         </div>
-        <div className="h-px bg-divider-regular"></div>
-        <div className="p-1">
-          <div className="system-xs-medium px-2 py-2 text-text-tertiary">
-            {t('operator.horizontal', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.Left)}
-          >
-            <RiAlignLeft className="h-4 w-4" />
-            {t('operator.alignLeft', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.Center)}
-          >
-            <RiAlignCenter className="h-4 w-4" />
-            {t('operator.alignCenter', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.Right)}
-          >
-            <RiAlignRight className="h-4 w-4" />
-            {t('operator.alignRight', { ns: 'workflow' })}
-          </div>
-          <div
-            className="flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
-            onClick={() => handleAlignNodes(AlignType.DistributeHorizontal)}
-          >
-            <RiAlignJustify className="h-4 w-4" />
-            {t('operator.distributeHorizontal', { ns: 'workflow' })}
-          </div>
-        </div>
-      </div>
-    </div>
+      )}
+      <CreateSnippetDialog
+        isOpen={isCreateSnippetDialogOpen}
+        selectedNodeIds={selectedNodeIdsSnapshot}
+        onClose={handleCloseCreateSnippetDialog}
+        onConfirm={(payload) => {
+          void payload
+        }}
+      />
+    </>
   )
 }
 
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index f2d6398784..21829260c5 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -1083,6 +1083,16 @@
   "singleRun.testRun": "Test Run",
   "singleRun.testRunIteration": "Test Run Iteration",
   "singleRun.testRunLoop": "Test Run Loop",
+  "snippet.addToSnippet": "Add to snippet",
+  "snippet.confirm": "Confirm",
+  "snippet.createDialogTitle": "Create Snippet",
+  "snippet.createSuccess": "Snippet created",
+  "snippet.descriptionLabel": "Description (Optional)",
+  "snippet.descriptionPlaceholder": "Briefly describe your snippet",
+  "snippet.nameLabel": "Snippet Name & Icon",
+  "snippet.namePlaceholder": "Snippet name",
+  "snippet.shortcuts.press": "Press",
+  "snippet.shortcuts.toConfirm": "to confirm",
   "tabs.-": "Default",
   "tabs.addAll": "Add all",
   "tabs.agent": "Agent Strategy",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index 82516f5f9f..8834aba49b 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -1083,6 +1083,16 @@
   "singleRun.testRun": "测试运行",
   "singleRun.testRunIteration": "测试运行迭代",
   "singleRun.testRunLoop": "测试运行循环",
+  "snippet.addToSnippet": "添加到 snippet",
+  "snippet.confirm": "确认",
+  "snippet.createDialogTitle": "创建 Snippet",
+  "snippet.createSuccess": "Snippet 已创建",
+  "snippet.descriptionLabel": "描述（可选）",
+  "snippet.descriptionPlaceholder": "简要描述你的 snippet",
+  "snippet.nameLabel": "Snippet 名称和图标",
+  "snippet.namePlaceholder": "Snippet 名称",
+  "snippet.shortcuts.press": "按下",
+  "snippet.shortcuts.toConfirm": "确认",
   "tabs.-": "默认",
   "tabs.addAll": "添加全部",
   "tabs.agent": "Agent 策略",

From a763aff58ba003339f52574127b9d4ea3dfa5891 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 13 Mar 2026 16:12:42 +0800
Subject: [PATCH 003/108] feat: snippets list

---
 web/app/(commonLayout)/role-route-guard.tsx   |   2 +-
 web/app/(commonLayout)/snippets/page.tsx      |   7 +
 .../components/apps/__tests__/list.spec.tsx   | 416 +++---------------
 .../components/apps/app-type-filter-shared.ts |  15 +
 web/app/components/apps/app-type-filter.tsx   |  71 +++
 web/app/components/apps/creators-filter.tsx   | 128 ++++++
 web/app/components/apps/index.tsx             |  16 +-
 web/app/components/apps/list.tsx              | 356 ++++++++++-----
 web/app/components/header/app-nav/index.tsx   |   2 +-
 web/app/components/header/header-wrapper.tsx  |   2 +-
 web/i18n/en-US/app.json                       |  14 +
 11 files changed, 570 insertions(+), 459 deletions(-)
 create mode 100644 web/app/(commonLayout)/snippets/page.tsx
 create mode 100644 web/app/components/apps/app-type-filter-shared.ts
 create mode 100644 web/app/components/apps/app-type-filter.tsx
 create mode 100644 web/app/components/apps/creators-filter.tsx

diff --git a/web/app/(commonLayout)/role-route-guard.tsx b/web/app/(commonLayout)/role-route-guard.tsx
index 1c42be9d15..9ca5b25caa 100644
--- a/web/app/(commonLayout)/role-route-guard.tsx
+++ b/web/app/(commonLayout)/role-route-guard.tsx
@@ -6,7 +6,7 @@ import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 
-const datasetOperatorRedirectRoutes = ['/apps', '/app', '/explore', '/tools'] as const
+const datasetOperatorRedirectRoutes = ['/apps', '/app', '/snippets', '/explore', '/tools'] as const
 
 const isPathUnderRoute = (pathname: string, route: string) => pathname === route || pathname.startsWith(`${route}/`)
 
diff --git a/web/app/(commonLayout)/snippets/page.tsx b/web/app/(commonLayout)/snippets/page.tsx
new file mode 100644
index 0000000000..660df108c5
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/page.tsx
@@ -0,0 +1,7 @@
+import Apps from '@/app/components/apps'
+
+const SnippetsPage = () => {
+  return <Apps pageType="snippets" />
+}
+
+export default SnippetsPage
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index 989bf6a788..51c3834791 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { renderWithNuqs } from '@/test/nuqs-testing'
@@ -6,19 +6,15 @@ import { AppModeEnum } from '@/types/app'
 
 import List from '../list'
 
-const mockReplace = vi.fn()
-const mockRouter = { replace: mockReplace }
-vi.mock('next/navigation', () => ({
-  useRouter: () => mockRouter,
-  useSearchParams: () => new URLSearchParams(''),
-}))
-
 const mockIsCurrentWorkspaceEditor = vi.fn(() => true)
 const mockIsCurrentWorkspaceDatasetOperator = vi.fn(() => false)
+const mockIsLoadingCurrentWorkspace = vi.fn(() => false)
+
 vi.mock('@/context/app-context', () => ({
   useAppContext: () => ({
     isCurrentWorkspaceEditor: mockIsCurrentWorkspaceEditor(),
     isCurrentWorkspaceDatasetOperator: mockIsCurrentWorkspaceDatasetOperator(),
+    isLoadingCurrentWorkspace: mockIsLoadingCurrentWorkspace(),
   }),
 }))
 
@@ -36,6 +32,7 @@ const mockQueryState = {
   keywords: '',
   isCreatedByMe: false,
 }
+
 vi.mock('../hooks/use-apps-query-state', () => ({
   default: () => ({
     query: mockQueryState,
@@ -45,6 +42,7 @@ vi.mock('../hooks/use-apps-query-state', () => ({
 
 let mockOnDSLFileDropped: ((file: File) => void) | null = null
 let mockDragging = false
+
 vi.mock('../hooks/use-dsl-drag-drop', () => ({
   useDSLDragDrop: ({ onDSLFileDropped }: { onDSLFileDropped: (file: File) => void }) => {
     mockOnDSLFileDropped = onDSLFileDropped
@@ -59,6 +57,7 @@ const mockServiceState = {
   error: null as Error | null,
   hasNextPage: false,
   isLoading: false,
+  isFetching: false,
   isFetchingNextPage: false,
 }
 
@@ -100,6 +99,7 @@ vi.mock('@/service/use-apps', () => ({
   useInfiniteAppList: () => ({
     data: defaultAppData,
     isLoading: mockServiceState.isLoading,
+    isFetching: mockServiceState.isFetching,
     isFetchingNextPage: mockServiceState.isFetchingNextPage,
     fetchNextPage: mockFetchNextPage,
     hasNextPage: mockServiceState.hasNextPage,
@@ -133,13 +133,21 @@ vi.mock('next/dynamic', () => ({
         return React.createElement('div', { 'data-testid': 'tag-management-modal' })
       }
     }
+
     if (fnString.includes('create-from-dsl-modal')) {
       return function MockCreateFromDSLModal({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) {
         if (!show)
           return null
-        return React.createElement('div', { 'data-testid': 'create-dsl-modal' }, React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'), React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-dsl-modal' }, 'Success'))
+
+        return React.createElement(
+          'div',
+          { 'data-testid': 'create-dsl-modal' },
+          React.createElement('button', { 'data-testid': 'close-dsl-modal', 'onClick': onClose }, 'Close'),
+          React.createElement('button', { 'data-testid': 'success-dsl-modal', 'onClick': onSuccess }, 'Success'),
+        )
       }
     }
+
     return () => null
   },
 }))
@@ -188,9 +196,8 @@ beforeAll(() => {
   } as unknown as typeof IntersectionObserver
 })
 
-// Render helper wrapping with shared nuqs testing helper.
-const renderList = (searchParams = '') => {
-  return renderWithNuqs(<List />, { searchParams })
+const renderList = (props: React.ComponentProps<typeof List> = {}, searchParams = '') => {
+  return renderWithNuqs(<List {...props} />, { searchParams })
 }
 
 describe('List', () => {
@@ -202,11 +209,13 @@ describe('List', () => {
     })
     mockIsCurrentWorkspaceEditor.mockReturnValue(true)
     mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
+    mockIsLoadingCurrentWorkspace.mockReturnValue(false)
     mockDragging = false
     mockOnDSLFileDropped = null
     mockServiceState.error = null
     mockServiceState.hasNextPage = false
     mockServiceState.isLoading = false
+    mockServiceState.isFetching = false
     mockServiceState.isFetchingNextPage = false
     mockQueryState.tagIDs = []
     mockQueryState.keywords = ''
@@ -215,372 +224,93 @@ describe('List', () => {
     localStorage.clear()
   })
 
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      renderList()
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-    })
-
-    it('should render tab slider with all app types', () => {
+  describe('Apps Mode', () => {
+    it('should render the apps route switch, dropdown filters, and app cards', () => {
       renderList()
 
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
-      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
-      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
-      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
-      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
-    })
-
-    it('should render search input', () => {
-      renderList()
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-    })
-
-    it('should render tag filter', () => {
-      renderList()
+      expect(screen.getByRole('link', { name: 'app.studio.apps' })).toHaveAttribute('href', '/apps')
+      expect(screen.getByRole('link', { name: 'workflow.tabs.snippets' })).toHaveAttribute('href', '/snippets')
+      expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.creators')).toBeInTheDocument()
       expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
-    })
-
-    it('should render created by me checkbox', () => {
-      renderList()
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
-    })
-
-    it('should render app cards when apps exist', () => {
-      renderList()
-
       expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
       expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
-    })
-
-    it('should render new app card for editors', () => {
-      renderList()
       expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
     })
 
-    it('should render footer when branding is disabled', () => {
-      renderList()
-      expect(screen.getByTestId('footer')).toBeInTheDocument()
-    })
-
-    it('should render drop DSL hint for editors', () => {
-      renderList()
-      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
-    })
-  })
-
-  describe('Tab Navigation', () => {
-    it('should update URL when workflow tab is clicked', async () => {
+    it('should update the category query when selecting an app type from the dropdown', async () => {
       const { onUrlUpdate } = renderList()
 
-      fireEvent.click(screen.getByText('app.types.workflow'))
+      fireEvent.click(screen.getByText('app.studio.filters.types'))
+      fireEvent.click(await screen.findByText('app.types.workflow'))
 
-      await vi.waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
       const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
       expect(lastCall.searchParams.get('category')).toBe(AppModeEnum.WORKFLOW)
     })
 
-    it('should update URL when all tab is clicked', async () => {
-      const { onUrlUpdate } = renderList('?category=workflow')
+    it('should keep the creators dropdown visual-only and not update app query state', async () => {
+      renderList()
 
-      fireEvent.click(screen.getByText('app.types.all'))
+      fireEvent.click(screen.getByText('app.studio.filters.creators'))
+      fireEvent.click(await screen.findByText('Evan'))
 
-      await vi.waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      // nuqs removes the default value ('all') from URL params
-      expect(lastCall.searchParams.has('category')).toBe(false)
+      expect(mockSetQuery).not.toHaveBeenCalled()
+      expect(screen.getByText('app.studio.filters.creators +1')).toBeInTheDocument()
+    })
+
+    it('should render and close the DSL import modal when a file is dropped', () => {
+      renderList()
+
+      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
+      act(() => {
+        if (mockOnDSLFileDropped)
+          mockOnDSLFileDropped(mockFile)
+      })
+
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
     })
   })
 
-  describe('Search Functionality', () => {
-    it('should render search input field', () => {
-      renderList()
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
+  describe('Snippets Mode', () => {
+    it('should render the snippets create card and fake snippet card', () => {
+      renderList({ pageType: 'snippets' })
+
+      expect(screen.getByText('app.createSnippet')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.fakeSnippet.name')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.fakeSnippet.description')).toBeInTheDocument()
+      expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('app-card-app-1')).not.toBeInTheDocument()
     })
 
-    it('should handle search input change', () => {
-      renderList()
+    it('should filter local snippets by the search input and show the snippet empty state', () => {
+      renderList({ pageType: 'snippets' })
 
       const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'test search' } })
+      fireEvent.change(input, { target: { value: 'missing snippet' } })
 
-      expect(mockSetQuery).toHaveBeenCalled()
+      expect(screen.queryByText('app.studio.fakeSnippet.name')).not.toBeInTheDocument()
+      expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
     })
 
-    it('should handle search clear button click', () => {
-      mockQueryState.keywords = 'existing search'
+    it('should not render app-only controls in snippets mode', () => {
+      renderList({ pageType: 'snippets' })
 
-      renderList()
-
-      const clearButton = document.querySelector('.group')
-      expect(clearButton).toBeInTheDocument()
-      if (clearButton)
-        fireEvent.click(clearButton)
-
-      expect(mockSetQuery).toHaveBeenCalled()
-    })
-  })
-
-  describe('Tag Filter', () => {
-    it('should render tag filter component', () => {
-      renderList()
-      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
-    })
-  })
-
-  describe('Created By Me Filter', () => {
-    it('should render checkbox with correct label', () => {
-      renderList()
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+      expect(screen.queryByText('app.studio.filters.types')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.tag.placeholder')).not.toBeInTheDocument()
+      expect(screen.queryByText('app.newApp.dropDSLToCreateApp')).not.toBeInTheDocument()
     })
 
-    it('should handle checkbox change', () => {
-      renderList()
+    it('should reserve the infinite-scroll anchor without fetching more pages', () => {
+      renderList({ pageType: 'snippets' })
 
-      const checkbox = screen.getByTestId('checkbox-undefined')
-      fireEvent.click(checkbox)
-
-      expect(mockSetQuery).toHaveBeenCalled()
-    })
-  })
-
-  describe('Non-Editor User', () => {
-    it('should not render new app card for non-editors', () => {
-      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
-
-      renderList()
-
-      expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
-    })
-
-    it('should not render drop DSL hint for non-editors', () => {
-      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
-
-      renderList()
-
-      expect(screen.queryByText(/drop dsl file to create app/i)).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Dataset Operator Behavior', () => {
-    it('should not trigger redirect at component level for dataset operators', () => {
-      mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(true)
-
-      renderList()
-
-      expect(mockReplace).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Local Storage Refresh', () => {
-    it('should call refetch when refresh key is set in localStorage', () => {
-      localStorage.setItem('needRefreshAppList', '1')
-
-      renderList()
-
-      expect(mockRefetch).toHaveBeenCalled()
-      expect(localStorage.getItem('needRefreshAppList')).toBeNull()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle multiple renders without issues', () => {
-      const { rerender } = renderWithNuqs(<List />)
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-
-      rerender(<List />)
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-    })
-
-    it('should render app cards correctly', () => {
-      renderList()
-
-      expect(screen.getByText('Test App 1')).toBeInTheDocument()
-      expect(screen.getByText('Test App 2')).toBeInTheDocument()
-    })
-
-    it('should render with all filter options visible', () => {
-      renderList()
-
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
-    })
-  })
-
-  describe('Dragging State', () => {
-    it('should show drop hint when DSL feature is enabled for editors', () => {
-      renderList()
-      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
-    })
-
-    it('should render dragging state overlay when dragging', () => {
-      mockDragging = true
-      const { container } = renderList()
-      expect(container).toBeInTheDocument()
-    })
-  })
-
-  describe('App Type Tabs', () => {
-    it('should render all app type tabs', () => {
-      renderList()
-
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
-      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
-      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
-      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
-      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
-    })
-
-    it('should update URL for each app type tab click', async () => {
-      const { onUrlUpdate } = renderList()
-
-      const appTypeTexts = [
-        { mode: AppModeEnum.WORKFLOW, text: 'app.types.workflow' },
-        { mode: AppModeEnum.ADVANCED_CHAT, text: 'app.types.advanced' },
-        { mode: AppModeEnum.CHAT, text: 'app.types.chatbot' },
-        { mode: AppModeEnum.AGENT_CHAT, text: 'app.types.agent' },
-        { mode: AppModeEnum.COMPLETION, text: 'app.types.completion' },
-      ]
-
-      for (const { mode, text } of appTypeTexts) {
-        onUrlUpdate.mockClear()
-        fireEvent.click(screen.getByText(text))
-        await vi.waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-        expect(lastCall.searchParams.get('category')).toBe(mode)
-      }
-    })
-  })
-
-  describe('App List Display', () => {
-    it('should display all app cards from data', () => {
-      renderList()
-
-      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
-      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
-    })
-
-    it('should display app names correctly', () => {
-      renderList()
-
-      expect(screen.getByText('Test App 1')).toBeInTheDocument()
-      expect(screen.getByText('Test App 2')).toBeInTheDocument()
-    })
-  })
-
-  describe('Footer Visibility', () => {
-    it('should render footer when branding is disabled', () => {
-      renderList()
-      expect(screen.getByTestId('footer')).toBeInTheDocument()
-    })
-  })
-
-  describe('DSL File Drop', () => {
-    it('should handle DSL file drop and show modal', () => {
-      renderList()
-
-      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
       act(() => {
-        if (mockOnDSLFileDropped)
-          mockOnDSLFileDropped(mockFile)
+        intersectionCallback?.([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)
       })
 
-      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
-    })
-
-    it('should close DSL modal when onClose is called', () => {
-      renderList()
-
-      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
-      act(() => {
-        if (mockOnDSLFileDropped)
-          mockOnDSLFileDropped(mockFile)
-      })
-
-      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('close-dsl-modal'))
-
-      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
-    })
-
-    it('should close DSL modal and refetch when onSuccess is called', () => {
-      renderList()
-
-      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
-      act(() => {
-        if (mockOnDSLFileDropped)
-          mockOnDSLFileDropped(mockFile)
-      })
-
-      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('success-dsl-modal'))
-
-      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
-      expect(mockRefetch).toHaveBeenCalled()
-    })
-  })
-
-  describe('Infinite Scroll', () => {
-    it('should call fetchNextPage when intersection observer triggers', () => {
-      mockServiceState.hasNextPage = true
-      renderList()
-
-      if (intersectionCallback) {
-        act(() => {
-          intersectionCallback!(
-            [{ isIntersecting: true } as IntersectionObserverEntry],
-            {} as IntersectionObserver,
-          )
-        })
-      }
-
-      expect(mockFetchNextPage).toHaveBeenCalled()
-    })
-
-    it('should not call fetchNextPage when not intersecting', () => {
-      mockServiceState.hasNextPage = true
-      renderList()
-
-      if (intersectionCallback) {
-        act(() => {
-          intersectionCallback!(
-            [{ isIntersecting: false } as IntersectionObserverEntry],
-            {} as IntersectionObserver,
-          )
-        })
-      }
-
       expect(mockFetchNextPage).not.toHaveBeenCalled()
     })
-
-    it('should not call fetchNextPage when loading', () => {
-      mockServiceState.hasNextPage = true
-      mockServiceState.isLoading = true
-      renderList()
-
-      if (intersectionCallback) {
-        act(() => {
-          intersectionCallback!(
-            [{ isIntersecting: true } as IntersectionObserverEntry],
-            {} as IntersectionObserver,
-          )
-        })
-      }
-
-      expect(mockFetchNextPage).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Error State', () => {
-    it('should handle error state in useEffect', () => {
-      mockServiceState.error = new Error('Test error')
-      const { container } = renderList()
-      expect(container).toBeInTheDocument()
-    })
   })
 })
diff --git a/web/app/components/apps/app-type-filter-shared.ts b/web/app/components/apps/app-type-filter-shared.ts
new file mode 100644
index 0000000000..2320833f16
--- /dev/null
+++ b/web/app/components/apps/app-type-filter-shared.ts
@@ -0,0 +1,15 @@
+import { parseAsStringLiteral } from 'nuqs'
+import { AppModes } from '@/types/app'
+
+export const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
+export type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
+
+const appListCategorySet = new Set<string>(APP_LIST_CATEGORY_VALUES)
+
+export const isAppListCategory = (value: string): value is AppListCategory => {
+  return appListCategorySet.has(value)
+}
+
+export const parseAsAppListCategory = parseAsStringLiteral(APP_LIST_CATEGORY_VALUES)
+  .withDefault('all')
+  .withOptions({ history: 'push' })
diff --git a/web/app/components/apps/app-type-filter.tsx b/web/app/components/apps/app-type-filter.tsx
new file mode 100644
index 0000000000..72c08e89b9
--- /dev/null
+++ b/web/app/components/apps/app-type-filter.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioItemIndicator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { AppModeEnum } from '@/types/app'
+import { cn } from '@/utils/classnames'
+import { isAppListCategory } from './app-type-filter-shared'
+
+const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
+
+type AppTypeFilterProps = {
+  activeTab: import('./app-type-filter-shared').AppListCategory
+  onChange: (value: import('./app-type-filter-shared').AppListCategory) => void
+}
+
+const AppTypeFilter = ({
+  activeTab,
+  onChange,
+}: AppTypeFilterProps) => {
+  const { t } = useTranslation()
+
+  const options = useMemo(() => ([
+    { value: 'all', text: t('types.all', { ns: 'app' }), iconClassName: 'i-ri-apps-2-line' },
+    { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), iconClassName: 'i-ri-exchange-2-line' },
+    { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), iconClassName: 'i-ri-message-3-line' },
+    { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), iconClassName: 'i-ri-message-3-line' },
+    { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), iconClassName: 'i-ri-robot-3-line' },
+    { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), iconClassName: 'i-ri-file-4-line' },
+  ]), [t])
+
+  const activeOption = options.find(option => option.value === activeTab)
+  const triggerLabel = activeTab === 'all' ? t('studio.filters.types', { ns: 'app' }) : activeOption?.text
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <button
+            type="button"
+            className={cn(chipClassName, activeTab !== 'all' && 'shadow-xs')}
+          />
+        )}
+      >
+        <span aria-hidden className={cn('h-4 w-4 shrink-0 text-text-tertiary', activeOption?.iconClassName ?? 'i-ri-apps-2-line')} />
+        <span>{triggerLabel}</span>
+        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent placement="bottom-start" popupClassName="w-[220px]">
+        <DropdownMenuRadioGroup value={activeTab} onValueChange={value => isAppListCategory(value) && onChange(value)}>
+          {options.map(option => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              <span aria-hidden className={cn('h-4 w-4 shrink-0 text-text-tertiary', option.iconClassName)} />
+              <span>{option.text}</span>
+              <DropdownMenuRadioItemIndicator />
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default AppTypeFilter
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
new file mode 100644
index 0000000000..1e2bed5f3a
--- /dev/null
+++ b/web/app/components/apps/creators-filter.tsx
@@ -0,0 +1,128 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuCheckboxItemIndicator,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { cn } from '@/utils/classnames'
+
+type CreatorOption = {
+  id: string
+  name: string
+  isYou?: boolean
+  avatarClassName: string
+}
+
+const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
+
+const creatorOptions: CreatorOption[] = [
+  { id: 'evan', name: 'Evan', isYou: true, avatarClassName: 'bg-gradient-to-br from-[#ff9b3f] to-[#ff4d00]' },
+  { id: 'jack', name: 'Jack', avatarClassName: 'bg-gradient-to-br from-[#fde68a] to-[#d6d3d1]' },
+  { id: 'gigi', name: 'Gigi', avatarClassName: 'bg-gradient-to-br from-[#f9a8d4] to-[#a78bfa]' },
+  { id: 'alice', name: 'Alice', avatarClassName: 'bg-gradient-to-br from-[#93c5fd] to-[#4f46e5]' },
+  { id: 'mandy', name: 'Mandy', avatarClassName: 'bg-gradient-to-br from-[#374151] to-[#111827]' },
+]
+
+const CreatorsFilter = () => {
+  const { t } = useTranslation()
+  const [selectedCreatorIds, setSelectedCreatorIds] = useState<string[]>([])
+  const [keywords, setKeywords] = useState('')
+
+  const filteredCreators = useMemo(() => {
+    const normalizedKeywords = keywords.trim().toLowerCase()
+    if (!normalizedKeywords)
+      return creatorOptions
+
+    return creatorOptions.filter(creator => creator.name.toLowerCase().includes(normalizedKeywords))
+  }, [keywords])
+
+  const selectedCount = selectedCreatorIds.length
+  const triggerLabel = selectedCount > 0
+    ? `${t('studio.filters.creators', { ns: 'app' })} +${selectedCount}`
+    : t('studio.filters.creators', { ns: 'app' })
+
+  const toggleCreator = useCallback((creatorId: string) => {
+    setSelectedCreatorIds((prev) => {
+      if (prev.includes(creatorId))
+        return prev.filter(id => id !== creatorId)
+      return [...prev, creatorId]
+    })
+  }, [])
+
+  const resetCreators = useCallback(() => {
+    setSelectedCreatorIds([])
+    setKeywords('')
+  }, [])
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <button
+            type="button"
+            className={cn(chipClassName, selectedCount > 0 && 'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs')}
+          />
+        )}
+      >
+        <span aria-hidden className="i-ri-user-shared-line h-4 w-4 shrink-0 text-text-tertiary" />
+        <span>{triggerLabel}</span>
+        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent placement="bottom-start" popupClassName="w-[280px] p-0">
+        <div className="flex items-center gap-2 p-2 pb-1">
+          <Input
+            showLeftIcon
+            showClearIcon
+            value={keywords}
+            onChange={e => setKeywords(e.target.value)}
+            onClear={() => setKeywords('')}
+            placeholder={t('studio.filters.searchCreators', { ns: 'app' })}
+          />
+          <button
+            type="button"
+            className="shrink-0 rounded-md px-2 py-1 text-xs font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+            onClick={resetCreators}
+          >
+            {t('studio.filters.reset', { ns: 'app' })}
+          </button>
+        </div>
+        <div className="px-1 pb-1">
+          <DropdownMenuCheckboxItem
+            checked={selectedCreatorIds.length === 0}
+            onCheckedChange={resetCreators}
+          >
+            <span aria-hidden className="i-ri-user-line h-4 w-4 shrink-0 text-text-tertiary" />
+            <span>{t('studio.filters.allCreators', { ns: 'app' })}</span>
+            <DropdownMenuCheckboxItemIndicator />
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          {filteredCreators.map(creator => (
+            <DropdownMenuCheckboxItem
+              key={creator.id}
+              checked={selectedCreatorIds.includes(creator.id)}
+              onCheckedChange={() => toggleCreator(creator.id)}
+            >
+              <span className={cn('h-5 w-5 shrink-0 rounded-full border border-white', creator.avatarClassName)} />
+              <span className="flex min-w-0 grow items-center justify-between gap-2">
+                <span className="truncate">{creator.name}</span>
+                {creator.isYou && (
+                  <span className="shrink-0 text-text-quaternary">{t('studio.filters.you', { ns: 'app' })}</span>
+                )}
+              </span>
+              <DropdownMenuCheckboxItemIndicator />
+            </DropdownMenuCheckboxItem>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default CreatorsFilter
diff --git a/web/app/components/apps/index.tsx b/web/app/components/apps/index.tsx
index dce9de190d..6ef3adc87b 100644
--- a/web/app/components/apps/index.tsx
+++ b/web/app/components/apps/index.tsx
@@ -14,10 +14,20 @@ import CreateAppModal from '../explore/create-app-modal'
 import TryApp from '../explore/try-app'
 import List from './list'
 
-const Apps = () => {
+export type StudioPageType = 'apps' | 'snippets'
+
+type AppsProps = {
+  pageType?: StudioPageType
+}
+
+const Apps = ({
+  pageType = 'apps',
+}: AppsProps) => {
   const { t } = useTranslation()
 
-  useDocumentTitle(t('menus.apps', { ns: 'common' }))
+  useDocumentTitle(pageType === 'apps'
+    ? t('menus.apps', { ns: 'common' })
+    : t('tabs.snippets', { ns: 'workflow' }))
   useEducationInit()
 
   const [currentTryAppParams, setCurrentTryAppParams] = useState<TryAppSelection | undefined>(undefined)
@@ -101,7 +111,7 @@ const Apps = () => {
     }}
     >
       <div className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
-        <List controlRefreshList={controlRefreshList} />
+        <List controlRefreshList={controlRefreshList} pageType={pageType} />
         {isShowTryAppPanel && (
           <TryApp
             appId={currentTryAppParams?.appId || ''}
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 6ae422f716..f5ea7ce36e 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -1,25 +1,28 @@
 'use client'
 
 import type { FC } from 'react'
+import type { StudioPageType } from '.'
+import type { App } from '@/types/app'
 import { useDebounceFn } from 'ahooks'
 import dynamic from 'next/dynamic'
-import { parseAsStringLiteral, useQueryState } from 'nuqs'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import Link from 'next/link'
+import { useQueryState } from 'nuqs'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import TabSliderNew from '@/app/components/base/tab-slider-new'
 import TagFilter from '@/app/components/base/tag-management/filter'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
-import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
 import { useInfiniteAppList } from '@/service/use-apps'
-import { AppModeEnum, AppModes } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import AppCard from './app-card'
 import { AppCardSkeleton } from './app-card-skeleton'
+import AppTypeFilter from './app-type-filter'
+import { parseAsAppListCategory } from './app-type-filter-shared'
+import CreatorsFilter from './creators-filter'
 import Empty from './empty'
 import Footer from './footer'
 import useAppsQueryState from './hooks/use-apps-query-state'
@@ -33,25 +36,113 @@ const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-fro
   ssr: false,
 })
 
-const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
-type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
-const appListCategorySet = new Set<string>(APP_LIST_CATEGORY_VALUES)
-
-const isAppListCategory = (value: string): value is AppListCategory => {
-  return appListCategorySet.has(value)
+type StudioSnippet = {
+  id: string
+  name: string
+  description: string
+  author: string
+  updatedAt: string
+  usage: string
+  icon: string
+  status?: string
 }
 
-const parseAsAppListCategory = parseAsStringLiteral(APP_LIST_CATEGORY_VALUES)
-  .withDefault('all')
-  .withOptions({ history: 'push' })
+const StudioRouteSwitch = ({ pageType, appsLabel, snippetsLabel }: { pageType: StudioPageType, appsLabel: string, snippetsLabel: string }) => {
+  return (
+    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
+      <Link
+        href="/apps"
+        className={cn(
+          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+          pageType === 'apps' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+          pageType !== 'apps' && 'font-medium',
+        )}
+      >
+        {appsLabel}
+      </Link>
+      <Link
+        href="/snippets"
+        className={cn(
+          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+          pageType === 'snippets' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+          pageType !== 'snippets' && 'font-medium',
+        )}
+      >
+        {snippetsLabel}
+      </Link>
+    </div>
+  )
+}
+
+const SnippetCreateCard = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
+      <div className="grow rounded-t-xl p-2">
+        <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('createSnippet', { ns: 'app' })}</div>
+        <div className="mb-1 flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
+          <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
+          {t('newApp.startFromBlank', { ns: 'app' })}
+        </div>
+        <div className="flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
+          <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
+          {t('importDSL', { ns: 'app' })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const SnippetCard = ({
+  snippet,
+}: {
+  snippet: StudioSnippet
+}) => {
+  return (
+    <article className="group relative col-span-1 inline-flex h-[160px] flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg">
+      {snippet.status && (
+        <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
+          {snippet.status}
+        </div>
+      )}
+      <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-divider-regular bg-components-icon-bg-indigo-solid text-xl text-white">
+          <span aria-hidden>{snippet.icon}</span>
+        </div>
+        <div className="w-0 grow py-[1px]">
+          <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
+            {snippet.name}
+          </div>
+        </div>
+      </div>
+      <div className="h-[58px] px-[14px] text-xs leading-normal text-text-tertiary">
+        <div className="line-clamp-2" title={snippet.description}>
+          {snippet.description}
+        </div>
+      </div>
+      <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
+        <span className="truncate">{snippet.author}</span>
+        <span>·</span>
+        <span className="truncate">{snippet.updatedAt}</span>
+        <span>·</span>
+        <span className="truncate">{snippet.usage}</span>
+      </div>
+    </article>
+  )
+}
 
 type Props = {
   controlRefreshList?: number
+  pageType?: StudioPageType
 }
+
 const List: FC<Props> = ({
   controlRefreshList = 0,
+  pageType = 'apps',
 }) => {
   const { t } = useTranslation()
+  const isAppsPage = pageType === 'apps'
   const { systemFeatures } = useGlobalPublicStore()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, isLoadingCurrentWorkspace } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@@ -61,18 +152,21 @@ const List: FC<Props> = ({
   )
 
   const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
-  const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe)
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
-  const [searchKeywords, setSearchKeywords] = useState(keywords)
-  const newAppCardRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const [appKeywords, setAppKeywords] = useState(keywords)
+  const [snippetKeywords, setSnippetKeywords] = useState('')
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [droppedDSLFile, setDroppedDSLFile] = useState<File | undefined>()
-  const setKeywords = useCallback((keywords: string) => {
-    setQuery(prev => ({ ...prev, keywords }))
+  const containerRef = useRef<HTMLDivElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const newAppCardRef = useRef<HTMLDivElement>(null)
+
+  const setKeywords = useCallback((nextKeywords: string) => {
+    setQuery(prev => ({ ...prev, keywords: nextKeywords }))
   }, [setQuery])
-  const setTagIDs = useCallback((tagIDs: string[]) => {
-    setQuery(prev => ({ ...prev, tagIDs }))
+
+  const setTagIDs = useCallback((nextTagIDs: string[]) => {
+    setQuery(prev => ({ ...prev, tagIDs: nextTagIDs }))
   }, [setQuery])
 
   const handleDSLFileDropped = useCallback((file: File) => {
@@ -83,15 +177,15 @@ const List: FC<Props> = ({
   const { dragging } = useDSLDragDrop({
     onDSLFileDropped: handleDSLFileDropped,
     containerRef,
-    enabled: isCurrentWorkspaceEditor,
+    enabled: isAppsPage && isCurrentWorkspaceEditor,
   })
 
   const appListQueryParams = {
     page: 1,
     limit: 30,
-    name: searchKeywords,
+    name: appKeywords,
     tag_ids: tagIDs,
-    is_created_by_me: isCreatedByMe,
+    is_created_by_me: queryIsCreatedByMe,
     ...(activeTab !== 'all' ? { mode: activeTab } : {}),
   }
 
@@ -104,48 +198,40 @@ const List: FC<Props> = ({
     hasNextPage,
     error,
     refetch,
-  } = useInfiniteAppList(appListQueryParams, { enabled: !isCurrentWorkspaceDatasetOperator })
+  } = useInfiniteAppList(appListQueryParams, {
+    enabled: isAppsPage && !isCurrentWorkspaceDatasetOperator,
+  })
 
   useEffect(() => {
-    if (controlRefreshList > 0) {
+    if (isAppsPage && controlRefreshList > 0)
       refetch()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlRefreshList])
-
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const options = [
-    { value: 'all', text: t('types.all', { ns: 'app' }), icon: <span className="i-ri-apps-2-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), icon: <span className="i-ri-exchange-2-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), icon: <span className="i-ri-message-3-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), icon: <span className="i-ri-message-3-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), icon: <span className="i-ri-robot-3-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), icon: <span className="i-ri-file-4-line mr-1 h-[14px] w-[14px]" /> },
-  ]
+  }, [controlRefreshList, isAppsPage, refetch])
 
   useEffect(() => {
+    if (!isAppsPage)
+      return
+
     if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       refetch()
     }
-  }, [refetch])
+  }, [isAppsPage, refetch])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
       return
-    const hasMore = hasNextPage ?? true
+
+    const hasMore = isAppsPage ? (hasNextPage ?? true) : false
     let observer: IntersectionObserver | undefined
 
     if (error) {
-      if (observer)
-        observer.disconnect()
+      observer?.disconnect()
       return
     }
 
     if (anchorRef.current && containerRef.current) {
-      // Calculate dynamic rootMargin: clamps to 100-200px range, using 20% of container height as the base value for better responsiveness
       const containerHeight = containerRef.current.clientHeight
-      const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200)) // Clamps to 100-200px range, using 20% of container height as the base value
+      const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200))
 
       observer = new IntersectionObserver((entries) => {
         if (entries[0].isIntersecting && !isLoading && !isFetchingNextPage && !error && hasMore)
@@ -153,110 +239,159 @@ const List: FC<Props> = ({
       }, {
         root: containerRef.current,
         rootMargin: `${dynamicMargin}px`,
-        threshold: 0.1, // Trigger when 10% of the anchor element is visible
+        threshold: 0.1,
       })
       observer.observe(anchorRef.current)
     }
+
     return () => observer?.disconnect()
-  }, [isLoading, isFetchingNextPage, fetchNextPage, error, hasNextPage, isCurrentWorkspaceDatasetOperator])
+  }, [error, fetchNextPage, hasNextPage, isAppsPage, isCurrentWorkspaceDatasetOperator, isFetchingNextPage, isLoading])
 
-  const { run: handleSearch } = useDebounceFn(() => {
-    setSearchKeywords(keywords)
+  const { run: handleAppSearch } = useDebounceFn((value: string) => {
+    setAppKeywords(value)
   }, { wait: 500 })
-  const handleKeywordsChange = (value: string) => {
-    setKeywords(value)
-    handleSearch()
-  }
 
-  const { run: handleTagsUpdate } = useDebounceFn(() => {
-    setTagIDs(tagFilterValue)
+  const handleKeywordsChange = useCallback((value: string) => {
+    if (isAppsPage) {
+      setKeywords(value)
+      handleAppSearch(value)
+      return
+    }
+
+    setSnippetKeywords(value)
+  }, [handleAppSearch, isAppsPage, setKeywords])
+
+  const { run: handleTagsUpdate } = useDebounceFn((value: string[]) => {
+    setTagIDs(value)
   }, { wait: 500 })
-  const handleTagsChange = (value: string[]) => {
+
+  const handleTagsChange = useCallback((value: string[]) => {
     setTagFilterValue(value)
-    handleTagsUpdate()
-  }
+    handleTagsUpdate(value)
+  }, [handleTagsUpdate])
 
-  const handleCreatedByMeChange = useCallback(() => {
-    const newValue = !isCreatedByMe
-    setIsCreatedByMe(newValue)
-    setQuery(prev => ({ ...prev, isCreatedByMe: newValue }))
-  }, [isCreatedByMe, setQuery])
+  const appItems = useMemo<App[]>(() => {
+    return (data?.pages ?? []).flatMap(({ data: apps }) => apps)
+  }, [data?.pages])
 
-  const pages = data?.pages ?? []
-  const hasAnyApp = (pages[0]?.total ?? 0) > 0
-  // Show skeleton during initial load or when refetching with no previous data
-  const showSkeleton = isLoading || (isFetching && pages.length === 0)
+  const snippetItems = useMemo<StudioSnippet[]>(() => ([
+    {
+      id: 'snippet-1',
+      name: t('studio.fakeSnippet.name', { ns: 'app' }),
+      description: t('studio.fakeSnippet.description', { ns: 'app' }),
+      author: t('studio.fakeSnippet.author', { ns: 'app' }),
+      updatedAt: t('studio.fakeSnippet.updatedAt', { ns: 'app' }),
+      usage: t('studio.fakeSnippet.usage', { ns: 'app' }),
+      icon: '🪄',
+      status: t('studio.fakeSnippet.status', { ns: 'app' }),
+    },
+  ]), [t])
+
+  const filteredSnippetItems = useMemo(() => {
+    const normalizedKeywords = snippetKeywords.trim().toLowerCase()
+    if (!normalizedKeywords)
+      return snippetItems
+
+    return snippetItems.filter(item =>
+      item.name.toLowerCase().includes(normalizedKeywords)
+      || item.description.toLowerCase().includes(normalizedKeywords),
+    )
+  }, [snippetItems, snippetKeywords])
+
+  const showSkeleton = isAppsPage && (isLoading || (isFetching && data?.pages?.length === 0))
+  const hasAnyApp = (data?.pages?.[0]?.total ?? 0) > 0
+  const hasAnySnippet = filteredSnippetItems.length > 0
+  const currentKeywords = isAppsPage ? keywords : snippetKeywords
 
   return (
     <>
       <div ref={containerRef} className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
         {dragging && (
-          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2">
-          </div>
+          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2" />
         )}
 
         <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-5 pt-7">
-          <TabSliderNew
-            value={activeTab}
-            onChange={(nextValue) => {
-              if (isAppListCategory(nextValue))
-                setActiveTab(nextValue)
-            }}
-            options={options}
-          />
-          <div className="flex items-center gap-2">
-            <CheckboxWithLabel
-              className="mr-2"
-              label={t('showMyCreatedAppsOnly', { ns: 'app' })}
-              isChecked={isCreatedByMe}
-              onChange={handleCreatedByMeChange}
+          <div className="flex flex-wrap items-center gap-2">
+            <StudioRouteSwitch
+              pageType={pageType}
+              appsLabel={t('studio.apps', { ns: 'app' })}
+              snippetsLabel={t('tabs.snippets', { ns: 'workflow' })}
             />
-            <TagFilter type="app" value={tagFilterValue} onChange={handleTagsChange} />
+            {isAppsPage && (
+              <AppTypeFilter
+                activeTab={activeTab}
+                onChange={(value) => {
+                  void setActiveTab(value)
+                }}
+              />
+            )}
+            <CreatorsFilter />
+            {isAppsPage && (
+              <TagFilter type="app" value={tagFilterValue} onChange={handleTagsChange} />
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
             <Input
               showLeftIcon
               showClearIcon
               wrapperClassName="w-[200px]"
-              value={keywords}
+              placeholder={isAppsPage ? undefined : t('tabs.searchSnippets', { ns: 'workflow' })}
+              value={currentKeywords}
               onChange={e => handleKeywordsChange(e.target.value)}
               onClear={() => handleKeywordsChange('')}
             />
           </div>
         </div>
+
         <div className={cn(
           'relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
-          !hasAnyApp && 'overflow-hidden',
+          isAppsPage && !hasAnyApp && 'overflow-hidden',
         )}
         >
           {(isCurrentWorkspaceEditor || isLoadingCurrentWorkspace) && (
-            <NewAppCard
-              ref={newAppCardRef}
-              isLoading={isLoadingCurrentWorkspace}
-              onSuccess={refetch}
-              selectedAppType={activeTab}
-              className={cn(!hasAnyApp && 'z-10')}
-            />
+            isAppsPage
+              ? (
+                  <NewAppCard
+                    ref={newAppCardRef}
+                    isLoading={isLoadingCurrentWorkspace}
+                    onSuccess={refetch}
+                    selectedAppType={activeTab}
+                    className={cn(!hasAnyApp && 'z-10')}
+                  />
+                )
+              : <SnippetCreateCard />
           )}
-          {(() => {
-            if (showSkeleton)
-              return <AppCardSkeleton count={6} />
 
-            if (hasAnyApp) {
-              return pages.flatMap(({ data: apps }) => apps).map(app => (
-                <AppCard key={app.id} app={app} onRefresh={refetch} />
-              ))
-            }
+          {showSkeleton && <AppCardSkeleton count={6} />}
 
-            // No apps - show empty state
-            return <Empty />
-          })()}
-          {isFetchingNextPage && (
+          {!showSkeleton && isAppsPage && hasAnyApp && appItems.map(app => (
+            <AppCard key={app.id} app={app} onRefresh={refetch} />
+          ))}
+
+          {!showSkeleton && !isAppsPage && hasAnySnippet && filteredSnippetItems.map(snippet => (
+            <SnippetCard key={snippet.id} snippet={snippet} />
+          ))}
+
+          {!showSkeleton && isAppsPage && !hasAnyApp && <Empty />}
+
+          {!showSkeleton && !isAppsPage && !hasAnySnippet && (
+            <div className="col-span-full flex min-h-[240px] items-center justify-center rounded-xl border border-dashed border-divider-regular bg-components-card-bg p-6 text-center text-sm text-text-tertiary">
+              {t('tabs.noSnippetsFound', { ns: 'workflow' })}
+            </div>
+          )}
+
+          {isAppsPage && isFetchingNextPage && (
             <AppCardSkeleton count={3} />
           )}
         </div>
 
-        {isCurrentWorkspaceEditor && (
+        {isAppsPage && isCurrentWorkspaceEditor && (
           <div
-            className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}
+            className={cn(
+              'flex items-center justify-center gap-2 py-4',
+              dragging ? 'text-text-accent' : 'text-text-quaternary',
+            )}
             role="region"
             aria-label={t('newApp.dropDSLToCreateApp', { ns: 'app' })}
           >
@@ -264,17 +399,18 @@ const List: FC<Props> = ({
             <span className="system-xs-regular">{t('newApp.dropDSLToCreateApp', { ns: 'app' })}</span>
           </div>
         )}
+
         {!systemFeatures.branding.enabled && (
           <Footer />
         )}
         <CheckModal />
         <div ref={anchorRef} className="h-0"> </div>
-        {showTagManagementModal && (
+        {isAppsPage && showTagManagementModal && (
           <TagManagementModal type="app" show={showTagManagementModal} />
         )}
       </div>
 
-      {showCreateFromDSLModal && (
+      {isAppsPage && showCreateFromDSLModal && (
         <CreateFromDSLModal
           show={showCreateFromDSLModal}
           onClose={() => {
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 737dd96bab..11a01d02ab 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -105,7 +105,7 @@ const AppNav = () => {
         icon={<RiRobot2Line className="h-4 w-4" />}
         activeIcon={<RiRobot2Fill className="h-4 w-4" />}
         text={t('menus.apps', { ns: 'common' })}
-        activeSegment={['apps', 'app']}
+        activeSegment={['apps', 'app', 'snippets']}
         link="/apps"
         curNav={appDetail}
         navigationItems={navItems}
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index 1b81c1152c..bf24da0107 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -14,7 +14,7 @@ const HeaderWrapper = ({
   children,
 }: HeaderWrapperProps) => {
   const pathname = usePathname()
-  const isBordered = ['/apps', '/datasets/create', '/tools'].includes(pathname)
+  const isBordered = ['/apps', '/snippets', '/datasets/create', '/tools'].includes(pathname)
   // Check if the current path is a workflow canvas & fullscreen
   const inWorkflowCanvas = pathname.endsWith('/workflow')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
diff --git a/web/i18n/en-US/app.json b/web/i18n/en-US/app.json
index e4109db4b6..afbd352ddf 100644
--- a/web/i18n/en-US/app.json
+++ b/web/i18n/en-US/app.json
@@ -35,6 +35,7 @@
   "communityIntro": "Discuss with team members, contributors and developers on different channels.",
   "createApp": "CREATE APP",
   "createFromConfigFile": "Create from DSL file",
+  "createSnippet": "CREATE SNIPPET",
   "deleteAppConfirmContent": "Deleting the app is irreversible. Users will no longer be able to access your app, and all prompt configurations and logs will be permanently deleted.",
   "deleteAppConfirmTitle": "Delete this app?",
   "dslUploader.browse": "Browse",
@@ -208,6 +209,19 @@
   "structOutput.required": "Required",
   "structOutput.structured": "Structured",
   "structOutput.structuredTip": "Structured Outputs is a feature that ensures the model will always generate responses that adhere to your supplied JSON Schema",
+  "studio.apps": "Apps",
+  "studio.fakeSnippet.author": "Evan",
+  "studio.fakeSnippet.description": "Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.",
+  "studio.fakeSnippet.name": "Tone Rewriter",
+  "studio.fakeSnippet.status": "Draft",
+  "studio.fakeSnippet.updatedAt": "Updated 2h ago",
+  "studio.fakeSnippet.usage": "Used 19 times",
+  "studio.filters.allCreators": "All creators",
+  "studio.filters.creators": "Creators",
+  "studio.filters.reset": "Reset",
+  "studio.filters.searchCreators": "Search creator...",
+  "studio.filters.types": "Types",
+  "studio.filters.you": "You",
   "switch": "Switch to Workflow Orchestrate",
   "switchLabel": "The app copy to be created",
   "switchStart": "Start switch",

From 7a722773c7ffa7e633a2cf51b9574a933229f10e Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 13 Mar 2026 17:45:04 +0800
Subject: [PATCH 004/108] feat: snippet canvas

---
 .../snippets/[snippetId]/page.tsx             |  11 +
 .../app-sidebar/__tests__/index.spec.tsx      |  15 ++
 web/app/components/app-sidebar/index.tsx      |  12 +-
 .../nav-link/__tests__/index.spec.tsx         |  16 ++
 .../components/app-sidebar/nav-link/index.tsx |  36 ++-
 .../app-sidebar/snippet-info/index.tsx        |  53 +++++
 .../components/apps/__tests__/list.spec.tsx   |   9 +-
 web/app/components/apps/list.tsx              |  86 +++----
 .../snippets/__tests__/index.spec.tsx         | 171 ++++++++++++++
 .../components/input-field-editor.tsx         |  54 +++++
 .../snippets/components/panel/index.tsx       | 119 ++++++++++
 .../snippets/components/publish-menu.tsx      |  29 +++
 .../snippets/components/snippet-children.tsx  | 106 +++++++++
 .../components/snippet-header/index.tsx       |  61 +++++
 .../snippets/components/snippet-main.tsx      | 193 ++++++++++++++++
 .../snippets/components/workflow-panel.tsx    | 111 +++++++++
 .../snippets/hooks/use-snippet-init.ts        |   5 +
 web/app/components/snippets/index.tsx         |  82 +++++++
 web/app/components/snippets/store/index.ts    |  44 ++++
 web/i18n-config/resources.ts                  |   3 +
 web/i18n/en-US/app.json                       |   7 -
 web/i18n/en-US/snippet.json                   |  16 ++
 web/i18n/zh-Hans/snippet.json                 |  16 ++
 web/models/snippet.ts                         |  50 ++++
 web/service/use-snippets.ts                   | 215 ++++++++++++++++++
 25 files changed, 1449 insertions(+), 71 deletions(-)
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/page.tsx
 create mode 100644 web/app/components/app-sidebar/snippet-info/index.tsx
 create mode 100644 web/app/components/snippets/__tests__/index.spec.tsx
 create mode 100644 web/app/components/snippets/components/input-field-editor.tsx
 create mode 100644 web/app/components/snippets/components/panel/index.tsx
 create mode 100644 web/app/components/snippets/components/publish-menu.tsx
 create mode 100644 web/app/components/snippets/components/snippet-children.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/index.tsx
 create mode 100644 web/app/components/snippets/components/snippet-main.tsx
 create mode 100644 web/app/components/snippets/components/workflow-panel.tsx
 create mode 100644 web/app/components/snippets/hooks/use-snippet-init.ts
 create mode 100644 web/app/components/snippets/index.tsx
 create mode 100644 web/app/components/snippets/store/index.ts
 create mode 100644 web/i18n/en-US/snippet.json
 create mode 100644 web/i18n/zh-Hans/snippet.json
 create mode 100644 web/models/snippet.ts
 create mode 100644 web/service/use-snippets.ts

diff --git a/web/app/(commonLayout)/snippets/[snippetId]/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
new file mode 100644
index 0000000000..0d37e83e2b
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
@@ -0,0 +1,11 @@
+import SnippetPage from '@/app/components/snippets'
+
+const Page = async (props: {
+  params: Promise<{ snippetId: string }>
+}) => {
+  const { params } = props
+
+  return <SnippetPage snippetId={(await params).snippetId} />
+}
+
+export default Page
diff --git a/web/app/components/app-sidebar/__tests__/index.spec.tsx b/web/app/components/app-sidebar/__tests__/index.spec.tsx
index 89db80e0f1..cf685b33a5 100644
--- a/web/app/components/app-sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/index.spec.tsx
@@ -165,6 +165,21 @@ describe('AppDetailNav', () => {
       )
       expect(screen.queryByTestId('extra-info')).not.toBeInTheDocument()
     })
+
+    it('should render custom header and navigation when provided', () => {
+      render(
+        <AppDetailNav
+          navigation={navigation}
+          renderHeader={mode => <div data-testid="custom-header" data-mode={mode} />}
+          renderNavigation={mode => <div data-testid="custom-navigation" data-mode={mode} />}
+        />,
+      )
+
+      expect(screen.getByTestId('custom-header')).toHaveAttribute('data-mode', 'expand')
+      expect(screen.getByTestId('custom-navigation')).toHaveAttribute('data-mode', 'expand')
+      expect(screen.queryByTestId('app-info')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('nav-link-Overview')).not.toBeInTheDocument()
+    })
   })
 
   describe('Workflow canvas mode', () => {
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index e24b005d01..ee046e4f30 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -27,12 +27,16 @@ export type IAppDetailNavProps = {
     disabled?: boolean
   }>
   extraInfo?: (modeState: string) => React.ReactNode
+  renderHeader?: (modeState: string) => React.ReactNode
+  renderNavigation?: (modeState: string) => React.ReactNode
 }
 
 const AppDetailNav = ({
   navigation,
   extraInfo,
   iconType = 'app',
+  renderHeader,
+  renderNavigation,
 }: IAppDetailNavProps) => {
   const { appSidebarExpand, setAppSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
@@ -104,10 +108,11 @@ const AppDetailNav = ({
           expand ? 'p-2' : 'p-1',
         )}
       >
-        {iconType === 'app' && (
+        {renderHeader?.(appSidebarExpand)}
+        {!renderHeader && iconType === 'app' && (
           <AppInfo expand={expand} />
         )}
-        {iconType !== 'app' && (
+        {!renderHeader && iconType !== 'app' && (
           <DatasetInfo expand={expand} />
         )}
       </div>
@@ -136,7 +141,8 @@ const AppDetailNav = ({
           expand ? 'px-3 py-2' : 'p-3',
         )}
       >
-        {navigation.map((item, index) => {
+        {renderNavigation?.(appSidebarExpand)}
+        {!renderNavigation && navigation.map((item, index) => {
           return (
             <NavLink
               key={index}
diff --git a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
index 04ca7bd0e4..af0cccf263 100644
--- a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
@@ -262,4 +262,20 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(iconWrapper).toHaveClass('-ml-1')
     })
   })
+
+  describe('Button Mode', () => {
+    it('should render as an interactive button when href is omitted', () => {
+      const onClick = vi.fn()
+
+      render(<NavLink {...mockProps} href={undefined} active={true} onClick={onClick} />)
+
+      const buttonElement = screen.getByText('Orchestrate').closest('button')
+      expect(buttonElement).not.toBeNull()
+      expect(buttonElement).toHaveClass('bg-components-menu-item-bg-active')
+      expect(buttonElement).toHaveClass('text-text-accent-light-mode-only')
+
+      buttonElement?.click()
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
 })
diff --git a/web/app/components/app-sidebar/nav-link/index.tsx b/web/app/components/app-sidebar/nav-link/index.tsx
index d69ed8590e..b9c0ee7345 100644
--- a/web/app/components/app-sidebar/nav-link/index.tsx
+++ b/web/app/components/app-sidebar/nav-link/index.tsx
@@ -14,13 +14,15 @@ export type NavIcon = React.ComponentType<
 
 export type NavLinkProps = {
   name: string
-  href: string
+  href?: string
   iconMap: {
     selected: NavIcon
     normal: NavIcon
   }
   mode?: string
   disabled?: boolean
+  active?: boolean
+  onClick?: () => void
 }
 
 const NavLink = ({
@@ -29,6 +31,8 @@ const NavLink = ({
   iconMap,
   mode = 'expand',
   disabled = false,
+  active,
+  onClick,
 }: NavLinkProps) => {
   const segment = useSelectedLayoutSegment()
   const formattedSegment = (() => {
@@ -39,8 +43,11 @@ const NavLink = ({
 
     return res
   })()
-  const isActive = href.toLowerCase().split('/')?.pop() === formattedSegment
+  const isActive = active ?? (href ? href.toLowerCase().split('/')?.pop() === formattedSegment : false)
   const NavIcon = isActive ? iconMap.selected : iconMap.normal
+  const linkClassName = cn(isActive
+    ? 'border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only system-sm-semibold'
+    : 'text-components-menu-item-text system-sm-medium hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover', 'flex h-8 items-center rounded-lg pl-3 pr-1')
 
   const renderIcon = () => (
     <div className={cn(mode !== 'expand' && '-ml-1')}>
@@ -70,13 +77,32 @@ const NavLink = ({
     )
   }
 
+  if (!href) {
+    return (
+      <button
+        key={name}
+        type="button"
+        className={linkClassName}
+        title={mode === 'collapse' ? name : ''}
+        onClick={onClick}
+      >
+        {renderIcon()}
+        <span
+          className={cn('overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out', mode === 'expand'
+            ? 'ml-2 max-w-none opacity-100'
+            : 'ml-0 max-w-0 opacity-0')}
+        >
+          {name}
+        </span>
+      </button>
+    )
+  }
+
   return (
     <Link
       key={name}
       href={href}
-      className={cn(isActive
-        ? 'border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only system-sm-semibold'
-        : 'text-components-menu-item-text system-sm-medium hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover', 'flex h-8 items-center rounded-lg pl-3 pr-1')}
+      className={linkClassName}
       title={mode === 'collapse' ? name : ''}
     >
       {renderIcon()}
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
new file mode 100644
index 0000000000..f0d0c59957
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/index.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import type { SnippetDetail } from '@/models/snippet'
+import * as React from 'react'
+import AppIcon from '@/app/components/base/app-icon'
+import Badge from '@/app/components/base/badge'
+import { cn } from '@/utils/classnames'
+
+type SnippetInfoProps = {
+  expand: boolean
+  snippet: SnippetDetail
+}
+
+const SnippetInfo = ({
+  expand,
+  snippet,
+}: SnippetInfoProps) => {
+  return (
+    <div className={cn('flex flex-col', expand ? '' : 'p-1')}>
+      <div className="flex flex-col gap-2 p-2">
+        <div className="flex items-start gap-3">
+          <div className={cn(!expand && 'ml-1')}>
+            <AppIcon
+              size={expand ? 'large' : 'small'}
+              iconType="emoji"
+              icon={snippet.icon}
+              background={snippet.iconBackground}
+            />
+          </div>
+          {expand && (
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-text-secondary system-md-semibold">
+                {snippet.name}
+              </div>
+              {snippet.status && (
+                <div className="pt-1">
+                  <Badge>{snippet.status}</Badge>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        {expand && snippet.description && (
+          <p className="line-clamp-3 text-text-tertiary system-xs-regular">
+            {snippet.description}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(SnippetInfo)
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index 51c3834791..9ded28cd9a 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -278,9 +278,10 @@ describe('List', () => {
     it('should render the snippets create card and fake snippet card', () => {
       renderList({ pageType: 'snippets' })
 
-      expect(screen.getByText('app.createSnippet')).toBeInTheDocument()
-      expect(screen.getByText('app.studio.fakeSnippet.name')).toBeInTheDocument()
-      expect(screen.getByText('app.studio.fakeSnippet.description')).toBeInTheDocument()
+      expect(screen.getByText('snippet.create')).toBeInTheDocument()
+      expect(screen.getByText('Tone Rewriter')).toBeInTheDocument()
+      expect(screen.getByText('Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.')).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: /Tone Rewriter/i })).toHaveAttribute('href', '/snippets/snippet-1')
       expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
       expect(screen.queryByTestId('app-card-app-1')).not.toBeInTheDocument()
     })
@@ -291,7 +292,7 @@ describe('List', () => {
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'missing snippet' } })
 
-      expect(screen.queryByText('app.studio.fakeSnippet.name')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tone Rewriter')).not.toBeInTheDocument()
       expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
     })
 
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index f5ea7ce36e..90dd84cb9e 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from 'react'
 import type { StudioPageType } from '.'
+import type { SnippetListItem } from '@/models/snippet'
 import type { App } from '@/types/app'
 import { useDebounceFn } from 'ahooks'
 import dynamic from 'next/dynamic'
@@ -17,6 +18,7 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
 import { useInfiniteAppList } from '@/service/use-apps'
+import { getSnippetListMock } from '@/service/use-snippets'
 import { cn } from '@/utils/classnames'
 import AppCard from './app-card'
 import { AppCardSkeleton } from './app-card-skeleton'
@@ -36,17 +38,6 @@ const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-fro
   ssr: false,
 })
 
-type StudioSnippet = {
-  id: string
-  name: string
-  description: string
-  author: string
-  updatedAt: string
-  usage: string
-  icon: string
-  status?: string
-}
-
 const StudioRouteSwitch = ({ pageType, appsLabel, snippetsLabel }: { pageType: StudioPageType, appsLabel: string, snippetsLabel: string }) => {
   return (
     <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
@@ -75,12 +66,12 @@ const StudioRouteSwitch = ({ pageType, appsLabel, snippetsLabel }: { pageType: S
 }
 
 const SnippetCreateCard = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslation('snippet')
 
   return (
     <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
       <div className="grow rounded-t-xl p-2">
-        <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('createSnippet', { ns: 'app' })}</div>
+        <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('create')}</div>
         <div className="mb-1 flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
           <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
           {t('newApp.startFromBlank', { ns: 'app' })}
@@ -97,38 +88,40 @@ const SnippetCreateCard = () => {
 const SnippetCard = ({
   snippet,
 }: {
-  snippet: StudioSnippet
+  snippet: SnippetListItem
 }) => {
   return (
-    <article className="group relative col-span-1 inline-flex h-[160px] flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg">
-      {snippet.status && (
-        <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
-          {snippet.status}
-        </div>
-      )}
-      <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-divider-regular bg-components-icon-bg-indigo-solid text-xl text-white">
-          <span aria-hidden>{snippet.icon}</span>
-        </div>
-        <div className="w-0 grow py-[1px]">
-          <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
-            {snippet.name}
+    <Link href={`/snippets/${snippet.id}`} className="group col-span-1">
+      <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
+        {snippet.status && (
+          <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
+            {snippet.status}
+          </div>
+        )}
+        <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-divider-regular text-xl text-white" style={{ background: snippet.iconBackground }}>
+            <span aria-hidden>{snippet.icon}</span>
+          </div>
+          <div className="w-0 grow py-[1px]">
+            <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
+              {snippet.name}
+            </div>
           </div>
         </div>
-      </div>
-      <div className="h-[58px] px-[14px] text-xs leading-normal text-text-tertiary">
-        <div className="line-clamp-2" title={snippet.description}>
-          {snippet.description}
+        <div className="h-[58px] px-[14px] text-xs leading-normal text-text-tertiary">
+          <div className="line-clamp-2" title={snippet.description}>
+            {snippet.description}
+          </div>
         </div>
-      </div>
-      <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
-        <span className="truncate">{snippet.author}</span>
-        <span>·</span>
-        <span className="truncate">{snippet.updatedAt}</span>
-        <span>·</span>
-        <span className="truncate">{snippet.usage}</span>
-      </div>
-    </article>
+        <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
+          <span className="truncate">{snippet.author}</span>
+          <span>·</span>
+          <span className="truncate">{snippet.updatedAt}</span>
+          <span>·</span>
+          <span className="truncate">{snippet.usage}</span>
+        </div>
+      </article>
+    </Link>
   )
 }
 
@@ -274,18 +267,7 @@ const List: FC<Props> = ({
     return (data?.pages ?? []).flatMap(({ data: apps }) => apps)
   }, [data?.pages])
 
-  const snippetItems = useMemo<StudioSnippet[]>(() => ([
-    {
-      id: 'snippet-1',
-      name: t('studio.fakeSnippet.name', { ns: 'app' }),
-      description: t('studio.fakeSnippet.description', { ns: 'app' }),
-      author: t('studio.fakeSnippet.author', { ns: 'app' }),
-      updatedAt: t('studio.fakeSnippet.updatedAt', { ns: 'app' }),
-      usage: t('studio.fakeSnippet.usage', { ns: 'app' }),
-      icon: '🪄',
-      status: t('studio.fakeSnippet.status', { ns: 'app' }),
-    },
-  ]), [t])
+  const snippetItems = useMemo(() => getSnippetListMock(), [])
 
   const filteredSnippetItems = useMemo(() => {
     const normalizedKeywords = snippetKeywords.trim().toLowerCase()
diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..5b9aa9daf6
--- /dev/null
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -0,0 +1,171 @@
+import type { SnippetDetailPayload } from '@/models/snippet'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import SnippetPage from '..'
+import { useSnippetDetailStore } from '../store'
+
+const mockUseSnippetDetail = vi.fn()
+
+vi.mock('@/service/use-snippets', () => ({
+  useSnippetDetail: (snippetId: string) => mockUseSnippetDetail(snippetId),
+}))
+
+vi.mock('@/service/use-common', () => ({
+  useFileUploadConfig: () => ({
+    data: undefined,
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: { mobile: 'mobile', desktop: 'desktop' },
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-default-context">{children}</div>
+  ),
+  WorkflowWithInnerContext: ({ children, viewport }: { children: React.ReactNode, viewport?: { zoom?: number } }) => (
+    <div data-testid="workflow-inner-context">
+      <span data-testid="workflow-viewport-zoom">{viewport?.zoom ?? 'none'}</span>
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (modeState: string) => React.ReactNode
+    renderNavigation?: (modeState: string) => React.ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      <div data-testid="app-sidebar-header">{renderHeader?.('expand')}</div>
+      <div data-testid="app-sidebar-navigation">{renderNavigation?.('expand')}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name, onClick }: { name: string, onClick?: () => void }) => (
+    <button type="button" onClick={onClick}>{name}</button>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/panel', () => ({
+  default: ({ components }: { components?: { left?: React.ReactNode, right?: React.ReactNode } }) => (
+    <div data-testid="workflow-panel">
+      <div data-testid="workflow-panel-left">{components?.left}</div>
+      <div data-testid="workflow-panel-right">{components?.right}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
+
+  return {
+    ...actual,
+    initialNodes: (nodes: unknown[]) => nodes,
+    initialEdges: (edges: unknown[]) => edges,
+  }
+})
+
+vi.mock('react-sortablejs', () => ({
+  ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+const mockSnippetDetail: SnippetDetailPayload = {
+  snippet: {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'A static snippet mock.',
+    author: 'Evan',
+    updatedAt: 'Updated 2h ago',
+    usage: 'Used 19 times',
+    icon: '🪄',
+    iconBackground: '#E0EAFF',
+    status: 'Draft',
+  },
+  graph: {
+    viewport: { x: 0, y: 0, zoom: 1 },
+    nodes: [],
+    edges: [],
+  },
+  inputFields: [
+    {
+      type: PipelineInputVarType.textInput,
+      label: 'Blog URL',
+      variable: 'blog_url',
+      required: true,
+      options: [],
+      placeholder: 'Paste a source article URL',
+      max_length: 256,
+    },
+  ],
+  uiMeta: {
+    inputFieldCount: 1,
+    checklistCount: 2,
+    autoSavedAt: 'Auto-saved · a few seconds ago',
+  },
+}
+
+describe('SnippetPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useSnippetDetailStore.getState().reset()
+    mockUseSnippetDetail.mockReturnValue({
+      data: mockSnippetDetail,
+      isLoading: false,
+    })
+  })
+
+  it('should render the snippet detail shell', () => {
+    render(<SnippetPage snippetId="snippet-1" />)
+
+    expect(screen.getByText('Tone Rewriter')).toBeInTheDocument()
+    expect(screen.getByText('A static snippet mock.')).toBeInTheDocument()
+    expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-default-context')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-inner-context')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-viewport-zoom').textContent).toBe('1')
+  })
+
+  it('should open the input field panel and editor', () => {
+    render(<SnippetPage snippetId="snippet-1" />)
+
+    fireEvent.click(screen.getAllByRole('button', { name: /snippet\.inputFieldButton/i })[0])
+    expect(screen.getAllByText('snippet.panelTitle').length).toBeGreaterThan(0)
+
+    fireEvent.click(screen.getAllByRole('button', { name: /datasetPipeline\.inputFieldPanel\.addInputField/i })[0])
+    expect(screen.getAllByText('datasetPipeline.inputFieldPanel.addInputField').length).toBeGreaterThan(1)
+  })
+
+  it('should toggle the publish menu', () => {
+    render(<SnippetPage snippetId="snippet-1" />)
+
+    fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
+    expect(screen.getByText('snippet.publishMenuCurrentDraft')).toBeInTheDocument()
+  })
+
+  it('should render a controlled not found state', () => {
+    mockUseSnippetDetail.mockReturnValue({
+      data: null,
+      isLoading: false,
+    })
+
+    render(<SnippetPage snippetId="missing-snippet" />)
+
+    expect(screen.getByText('snippet.notFoundTitle')).toBeInTheDocument()
+    expect(screen.getByText('snippet.notFoundDescription')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
new file mode 100644
index 0000000000..99362857e0
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import type { SnippetInputField } from '@/models/snippet'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import InputFieldForm from '@/app/components/rag-pipeline/components/panel/input-field/editor/form'
+import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
+
+type SnippetInputFieldEditorProps = {
+  field?: SnippetInputField | null
+  onClose: () => void
+  onSubmit: (field: SnippetInputField) => void
+}
+
+const SnippetInputFieldEditor = ({
+  field,
+  onClose,
+  onSubmit,
+}: SnippetInputFieldEditorProps) => {
+  const { t } = useTranslation()
+
+  const initialData = useMemo(() => {
+    return convertToInputFieldFormData(field || undefined)
+  }, [field])
+
+  const handleSubmit = useCallback((value: FormData) => {
+    onSubmit(convertFormDataToINputField(value))
+  }, [onSubmit])
+
+  return (
+    <div className="relative mr-1 flex h-fit max-h-full w-[min(400px,calc(100vw-24px))] flex-col overflow-y-auto rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
+      <div className="flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary system-xl-semibold">
+        {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
+      </div>
+      <button
+        type="button"
+        className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center"
+        onClick={onClose}
+      >
+        <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+      </button>
+      <InputFieldForm
+        initialData={initialData}
+        supportFile
+        onCancel={onClose}
+        onSubmit={handleSubmit}
+        isEditMode={!!field}
+      />
+    </div>
+  )
+}
+
+export default SnippetInputFieldEditor
diff --git a/web/app/components/snippets/components/panel/index.tsx b/web/app/components/snippets/components/panel/index.tsx
new file mode 100644
index 0000000000..c949a35f14
--- /dev/null
+++ b/web/app/components/snippets/components/panel/index.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import type { SortableItem } from '@/app/components/rag-pipeline/components/panel/input-field/field-list/types'
+import type { SnippetInputField } from '@/models/snippet'
+import { memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+import FieldListContainer from '@/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container'
+
+type SnippetInputFieldPanelProps = {
+  fields: SnippetInputField[]
+  onClose: () => void
+  onAdd: () => void
+  onEdit: (field: SnippetInputField) => void
+  onRemove: (index: number) => void
+  onPrimarySortChange: (fields: SnippetInputField[]) => void
+  onSecondarySortChange: (fields: SnippetInputField[]) => void
+}
+
+const toInputFields = (list: SortableItem[]) => {
+  return list.map((item) => {
+    const { id: _id, chosen: _chosen, selected: _selected, ...field } = item
+    return field
+  })
+}
+
+const SnippetInputFieldPanel = ({
+  fields,
+  onClose,
+  onAdd,
+  onEdit,
+  onRemove,
+  onPrimarySortChange,
+  onSecondarySortChange,
+}: SnippetInputFieldPanelProps) => {
+  const { t } = useTranslation('snippet')
+  const primaryFields = fields.slice(0, 2)
+  const secondaryFields = fields.slice(2)
+
+  const handlePrimaryRemove = useCallback((index: number) => {
+    onRemove(index)
+  }, [onRemove])
+
+  const handleSecondaryRemove = useCallback((index: number) => {
+    onRemove(index + primaryFields.length)
+  }, [onRemove, primaryFields.length])
+
+  const handlePrimaryEdit = useCallback((id: string) => {
+    const field = primaryFields.find(item => item.variable === id)
+    if (field)
+      onEdit(field)
+  }, [onEdit, primaryFields])
+
+  const handleSecondaryEdit = useCallback((id: string) => {
+    const field = secondaryFields.find(item => item.variable === id)
+    if (field)
+      onEdit(field)
+  }, [onEdit, secondaryFields])
+
+  return (
+    <div className="mr-1 flex h-full w-[min(400px,calc(100vw-24px))] flex-col rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
+      <div className="flex items-start justify-between gap-3 px-4 pb-2 pt-4">
+        <div className="min-w-0">
+          <div className="text-text-primary system-xl-semibold">
+            {t('panelTitle')}
+          </div>
+          <div className="pt-1 text-text-tertiary system-sm-regular">
+            {t('panelDescription')}
+          </div>
+        </div>
+        <button
+          type="button"
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover"
+          onClick={onClose}
+        >
+          <span aria-hidden className="i-ri-close-line h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="px-4 pb-2">
+        <Button variant="secondary" size="small" className="w-full justify-center gap-1" onClick={onAdd}>
+          <span aria-hidden className="i-ri-add-line h-4 w-4" />
+          {t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
+        </Button>
+      </div>
+
+      <div className="flex grow flex-col overflow-y-auto">
+        <div className="px-4 pb-1 pt-2 text-text-secondary system-xs-semibold-uppercase">
+          {t('panelPrimaryGroup')}
+        </div>
+        <FieldListContainer
+          className="flex flex-col gap-y-1 px-4 pb-2"
+          inputFields={primaryFields}
+          onListSortChange={list => onPrimarySortChange(toInputFields(list))}
+          onRemoveField={handlePrimaryRemove}
+          onEditField={handlePrimaryEdit}
+        />
+
+        <div className="px-4 py-2">
+          <Divider type="horizontal" className="bg-divider-subtle" />
+        </div>
+
+        <div className="px-4 pb-1 text-text-secondary system-xs-semibold-uppercase">
+          {t('panelSecondaryGroup')}
+        </div>
+        <FieldListContainer
+          className="flex flex-col gap-y-1 px-4 pb-4"
+          inputFields={secondaryFields}
+          onListSortChange={list => onSecondarySortChange(toInputFields(list))}
+          onRemoveField={handleSecondaryRemove}
+          onEditField={handleSecondaryEdit}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default memo(SnippetInputFieldPanel)
diff --git a/web/app/components/snippets/components/publish-menu.tsx b/web/app/components/snippets/components/publish-menu.tsx
new file mode 100644
index 0000000000..f5a57763df
--- /dev/null
+++ b/web/app/components/snippets/components/publish-menu.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import type { SnippetDetailUIModel } from '@/models/snippet'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+const PublishMenu = ({
+  uiMeta,
+}: {
+  uiMeta: SnippetDetailUIModel
+}) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <div className="w-80 rounded-2xl border border-components-panel-border bg-components-panel-bg p-4 shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]">
+      <div className="text-text-tertiary system-xs-semibold-uppercase">
+        {t('publishMenuCurrentDraft')}
+      </div>
+      <div className="pt-1 text-text-secondary system-sm-medium">
+        {uiMeta.autoSavedAt}
+      </div>
+      <Button variant="primary" size="small" className="mt-4 w-full justify-center">
+        {t('publishButton')}
+      </Button>
+    </div>
+  )
+}
+
+export default PublishMenu
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
new file mode 100644
index 0000000000..0bf08530a1
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import type { SnippetDetailUIModel, SnippetInputField } from '@/models/snippet'
+import SnippetInputFieldEditor from './input-field-editor'
+import SnippetInputFieldPanel from './panel'
+import PublishMenu from './publish-menu'
+import SnippetHeader from './snippet-header'
+import SnippetWorkflowPanel from './workflow-panel'
+
+type SnippetChildrenProps = {
+  fields: SnippetInputField[]
+  uiMeta: SnippetDetailUIModel
+  editingField: SnippetInputField | null
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  isPublishMenuOpen: boolean
+  onToggleInputPanel: () => void
+  onTogglePublishMenu: () => void
+  onCloseInputPanel: () => void
+  onOpenEditor: (field?: SnippetInputField | null) => void
+  onCloseEditor: () => void
+  onSubmitField: (field: SnippetInputField) => void
+  onRemoveField: (index: number) => void
+  onPrimarySortChange: (fields: SnippetInputField[]) => void
+  onSecondarySortChange: (fields: SnippetInputField[]) => void
+}
+
+const SnippetChildren = ({
+  fields,
+  uiMeta,
+  editingField,
+  isEditorOpen,
+  isInputPanelOpen,
+  isPublishMenuOpen,
+  onToggleInputPanel,
+  onTogglePublishMenu,
+  onCloseInputPanel,
+  onOpenEditor,
+  onCloseEditor,
+  onSubmitField,
+  onRemoveField,
+  onPrimarySortChange,
+  onSecondarySortChange,
+}: SnippetChildrenProps) => {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background-body to-transparent" />
+
+      <SnippetHeader
+        inputFieldCount={fields.length}
+        onToggleInputPanel={onToggleInputPanel}
+        onTogglePublishMenu={onTogglePublishMenu}
+      />
+
+      <SnippetWorkflowPanel
+        fields={fields}
+        editingField={editingField}
+        isEditorOpen={isEditorOpen}
+        isInputPanelOpen={isInputPanelOpen}
+        onCloseInputPanel={onCloseInputPanel}
+        onOpenEditor={onOpenEditor}
+        onCloseEditor={onCloseEditor}
+        onSubmitField={onSubmitField}
+        onRemoveField={onRemoveField}
+        onPrimarySortChange={onPrimarySortChange}
+        onSecondarySortChange={onSecondarySortChange}
+      />
+
+      {isPublishMenuOpen && (
+        <div className="absolute right-3 top-14 z-20">
+          <PublishMenu uiMeta={uiMeta} />
+        </div>
+      )}
+
+      {isInputPanelOpen && (
+        <div className="pointer-events-none absolute inset-y-3 right-3 z-30 flex justify-end">
+          <div className="pointer-events-auto h-full xl:hidden">
+            <SnippetInputFieldPanel
+              fields={fields}
+              onClose={onCloseInputPanel}
+              onAdd={() => onOpenEditor()}
+              onEdit={onOpenEditor}
+              onRemove={onRemoveField}
+              onPrimarySortChange={onPrimarySortChange}
+              onSecondarySortChange={onSecondarySortChange}
+            />
+          </div>
+        </div>
+      )}
+
+      {isEditorOpen && (
+        <div className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center bg-black/10 px-3 xl:hidden">
+          <div className="pointer-events-auto w-full max-w-md">
+            <SnippetInputFieldEditor
+              field={editingField}
+              onClose={onCloseEditor}
+              onSubmit={onSubmitField}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default SnippetChildren
diff --git a/web/app/components/snippets/components/snippet-header/index.tsx b/web/app/components/snippets/components/snippet-header/index.tsx
new file mode 100644
index 0000000000..aba4efadbd
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/index.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+type SnippetHeaderProps = {
+  inputFieldCount: number
+  onToggleInputPanel: () => void
+  onTogglePublishMenu: () => void
+}
+
+const SnippetHeader = ({
+  inputFieldCount,
+  onToggleInputPanel,
+  onTogglePublishMenu,
+}: SnippetHeaderProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <div className="absolute right-3 top-3 z-20 flex flex-wrap items-center justify-end gap-2">
+      <button
+        type="button"
+        className="flex items-center gap-2 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-text-secondary shadow-xs backdrop-blur"
+        onClick={onToggleInputPanel}
+      >
+        <span className="text-[13px] font-medium leading-4">{t('inputFieldButton')}</span>
+        <span className="rounded-md border border-divider-deep px-1.5 py-0.5 text-[10px] font-medium leading-3 text-text-tertiary">
+          {inputFieldCount}
+        </span>
+      </button>
+
+      <button
+        type="button"
+        className="flex items-center gap-2 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-text-accent shadow-xs backdrop-blur"
+      >
+        <span aria-hidden className="i-ri-play-mini-fill h-4 w-4" />
+        <span className="text-[13px] font-medium leading-4">{t('testRunButton')}</span>
+        <span className="rounded-md bg-state-accent-active px-1.5 py-0.5 text-[10px] font-semibold leading-3 text-text-accent">R</span>
+      </button>
+
+      <div className="relative">
+        <button
+          type="button"
+          className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]"
+          onClick={onTogglePublishMenu}
+        >
+          <span className="text-[13px] font-medium leading-4">{t('publishButton')}</span>
+          <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
+        </button>
+      </div>
+
+      <button
+        type="button"
+        className="flex h-9 w-9 items-center justify-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary shadow-xs"
+      >
+        <span aria-hidden className="i-ri-more-2-line h-4 w-4" />
+      </button>
+    </div>
+  )
+}
+
+export default SnippetHeader
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
new file mode 100644
index 0000000000..fd9bd14373
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -0,0 +1,193 @@
+'use client'
+
+import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
+import type { WorkflowProps } from '@/app/components/workflow'
+import type { SnippetDetailPayload, SnippetInputField } from '@/models/snippet'
+import {
+  RiFlaskFill,
+  RiFlaskLine,
+  RiGitBranchFill,
+  RiGitBranchLine,
+} from '@remixicon/react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import AppSideBar from '@/app/components/app-sidebar'
+import NavLink from '@/app/components/app-sidebar/nav-link'
+import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Toast from '@/app/components/base/toast'
+import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useSnippetDetailStore } from '../store'
+import SnippetChildren from './snippet-children'
+
+type SnippetMainProps = {
+  payload: SnippetDetailPayload
+  snippetId: string
+} & Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
+
+const ORCHESTRATE_ICONS: { normal: NavIcon, selected: NavIcon } = {
+  normal: RiGitBranchLine,
+  selected: RiGitBranchFill,
+}
+
+const EVALUATION_ICONS: { normal: NavIcon, selected: NavIcon } = {
+  normal: RiFlaskLine,
+  selected: RiFlaskFill,
+}
+
+const SnippetMain = ({
+  payload,
+  snippetId,
+  nodes,
+  edges,
+  viewport,
+}: SnippetMainProps) => {
+  const { t } = useTranslation('snippet')
+  const { graph, snippet, uiMeta } = payload
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const [fields, setFields] = useState<SnippetInputField[]>(payload.inputFields)
+  const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
+  const {
+    activeSection,
+    editingField,
+    isEditorOpen,
+    isInputPanelOpen,
+    isPublishMenuOpen,
+    closeEditor,
+    openEditor,
+    reset,
+    setActiveSection,
+    setInputPanelOpen,
+    toggleInputPanel,
+    togglePublishMenu,
+  } = useSnippetDetailStore(useShallow(state => ({
+    activeSection: state.activeSection,
+    editingField: state.editingField,
+    isEditorOpen: state.isEditorOpen,
+    isInputPanelOpen: state.isInputPanelOpen,
+    isPublishMenuOpen: state.isPublishMenuOpen,
+    closeEditor: state.closeEditor,
+    openEditor: state.openEditor,
+    reset: state.reset,
+    setActiveSection: state.setActiveSection,
+    setInputPanelOpen: state.setInputPanelOpen,
+    toggleInputPanel: state.toggleInputPanel,
+    togglePublishMenu: state.togglePublishMenu,
+  })))
+
+  useEffect(() => {
+    reset()
+  }, [reset, snippetId])
+
+  useEffect(() => {
+    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+    const mode = isMobile ? 'collapse' : 'expand'
+    setAppSidebarExpand(isMobile ? mode : localeMode)
+  }, [isMobile, setAppSidebarExpand])
+
+  const primaryFields = useMemo(() => fields.slice(0, 2), [fields])
+  const secondaryFields = useMemo(() => fields.slice(2), [fields])
+
+  const handlePrimarySortChange = (newFields: SnippetInputField[]) => {
+    setFields([...newFields, ...secondaryFields])
+  }
+
+  const handleSecondarySortChange = (newFields: SnippetInputField[]) => {
+    setFields([...primaryFields, ...newFields])
+  }
+
+  const handleRemoveField = (index: number) => {
+    setFields(current => current.filter((_, currentIndex) => currentIndex !== index))
+  }
+
+  const handleSubmitField = (field: SnippetInputField) => {
+    const originalVariable = editingField?.variable
+    const duplicated = fields.some(item => item.variable === field.variable && item.variable !== originalVariable)
+
+    if (duplicated) {
+      Toast.notify({
+        type: 'error',
+        message: t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }),
+      })
+      return
+    }
+
+    if (originalVariable)
+      setFields(current => current.map(item => item.variable === originalVariable ? field : item))
+    else
+      setFields(current => [...current, field])
+
+    closeEditor()
+  }
+
+  const handleToggleInputPanel = () => {
+    if (isInputPanelOpen)
+      closeEditor()
+    toggleInputPanel()
+  }
+
+  const handleCloseInputPanel = () => {
+    closeEditor()
+    setInputPanelOpen(false)
+  }
+
+  return (
+    <div className="relative flex h-full overflow-hidden bg-background-body">
+      <AppSideBar
+        navigation={[]}
+        renderHeader={mode => <SnippetInfo expand={mode === 'expand'} snippet={snippet} />}
+        renderNavigation={mode => (
+          <>
+            <NavLink
+              mode={mode}
+              name={t('sectionOrchestrate')}
+              iconMap={ORCHESTRATE_ICONS}
+              active={activeSection === 'orchestrate'}
+              onClick={() => setActiveSection('orchestrate')}
+            />
+            <NavLink
+              mode={mode}
+              name={t('sectionEvaluation')}
+              iconMap={EVALUATION_ICONS}
+              active={activeSection === 'evaluation'}
+              onClick={() => setActiveSection('evaluation')}
+            />
+          </>
+        )}
+      />
+
+      <div className="relative min-h-0 min-w-0 grow overflow-hidden">
+        <div className="absolute inset-0 min-h-0 min-w-0 overflow-hidden">
+          <WorkflowWithInnerContext
+            nodes={nodes}
+            edges={edges}
+            viewport={viewport ?? graph.viewport}
+          >
+            <SnippetChildren
+              fields={fields}
+              uiMeta={uiMeta}
+              editingField={editingField}
+              isEditorOpen={isEditorOpen}
+              isInputPanelOpen={isInputPanelOpen}
+              isPublishMenuOpen={isPublishMenuOpen}
+              onToggleInputPanel={handleToggleInputPanel}
+              onTogglePublishMenu={togglePublishMenu}
+              onCloseInputPanel={handleCloseInputPanel}
+              onOpenEditor={openEditor}
+              onCloseEditor={closeEditor}
+              onSubmitField={handleSubmitField}
+              onRemoveField={handleRemoveField}
+              onPrimarySortChange={handlePrimarySortChange}
+              onSecondarySortChange={handleSecondarySortChange}
+            />
+          </WorkflowWithInnerContext>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SnippetMain
diff --git a/web/app/components/snippets/components/workflow-panel.tsx b/web/app/components/snippets/components/workflow-panel.tsx
new file mode 100644
index 0000000000..e59ba6d2b6
--- /dev/null
+++ b/web/app/components/snippets/components/workflow-panel.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import type { PanelProps } from '@/app/components/workflow/panel'
+import type { SnippetInputField } from '@/models/snippet'
+import { memo, useMemo } from 'react'
+import Panel from '@/app/components/workflow/panel'
+import SnippetInputFieldEditor from './input-field-editor'
+import SnippetInputFieldPanel from './panel'
+
+type SnippetWorkflowPanelProps = {
+  fields: SnippetInputField[]
+  editingField: SnippetInputField | null
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  onCloseInputPanel: () => void
+  onOpenEditor: (field?: SnippetInputField | null) => void
+  onCloseEditor: () => void
+  onSubmitField: (field: SnippetInputField) => void
+  onRemoveField: (index: number) => void
+  onPrimarySortChange: (fields: SnippetInputField[]) => void
+  onSecondarySortChange: (fields: SnippetInputField[]) => void
+}
+
+const SnippetPanelOnLeft = ({
+  fields,
+  editingField,
+  isEditorOpen,
+  isInputPanelOpen,
+  onCloseInputPanel,
+  onOpenEditor,
+  onCloseEditor,
+  onSubmitField,
+  onRemoveField,
+  onPrimarySortChange,
+  onSecondarySortChange,
+}: SnippetWorkflowPanelProps) => {
+  return (
+    <div className="hidden xl:flex">
+      {isEditorOpen && (
+        <SnippetInputFieldEditor
+          field={editingField}
+          onClose={onCloseEditor}
+          onSubmit={onSubmitField}
+        />
+      )}
+      {isInputPanelOpen && (
+        <SnippetInputFieldPanel
+          fields={fields}
+          onClose={onCloseInputPanel}
+          onAdd={() => onOpenEditor()}
+          onEdit={onOpenEditor}
+          onRemove={onRemoveField}
+          onPrimarySortChange={onPrimarySortChange}
+          onSecondarySortChange={onSecondarySortChange}
+        />
+      )}
+    </div>
+  )
+}
+
+const SnippetWorkflowPanel = ({
+  fields,
+  editingField,
+  isEditorOpen,
+  isInputPanelOpen,
+  onCloseInputPanel,
+  onOpenEditor,
+  onCloseEditor,
+  onSubmitField,
+  onRemoveField,
+  onPrimarySortChange,
+  onSecondarySortChange,
+}: SnippetWorkflowPanelProps) => {
+  const panelProps: PanelProps = useMemo(() => {
+    return {
+      components: {
+        left: (
+          <SnippetPanelOnLeft
+            fields={fields}
+            editingField={editingField}
+            isEditorOpen={isEditorOpen}
+            isInputPanelOpen={isInputPanelOpen}
+            onCloseInputPanel={onCloseInputPanel}
+            onOpenEditor={onOpenEditor}
+            onCloseEditor={onCloseEditor}
+            onSubmitField={onSubmitField}
+            onRemoveField={onRemoveField}
+            onPrimarySortChange={onPrimarySortChange}
+            onSecondarySortChange={onSecondarySortChange}
+          />
+        ),
+      },
+    }
+  }, [
+    editingField,
+    fields,
+    isEditorOpen,
+    isInputPanelOpen,
+    onCloseEditor,
+    onCloseInputPanel,
+    onOpenEditor,
+    onPrimarySortChange,
+    onRemoveField,
+    onSecondarySortChange,
+    onSubmitField,
+  ])
+
+  return <Panel {...panelProps} />
+}
+
+export default memo(SnippetWorkflowPanel)
diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
new file mode 100644
index 0000000000..a5978603cd
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -0,0 +1,5 @@
+import { useSnippetDetail } from '@/service/use-snippets'
+
+export const useSnippetInit = (snippetId: string) => {
+  return useSnippetDetail(snippetId)
+}
diff --git a/web/app/components/snippets/index.tsx b/web/app/components/snippets/index.tsx
new file mode 100644
index 0000000000..690a8d6376
--- /dev/null
+++ b/web/app/components/snippets/index.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import WorkflowWithDefaultContext from '@/app/components/workflow'
+import { WorkflowContextProvider } from '@/app/components/workflow/context'
+import {
+  initialEdges,
+  initialNodes,
+} from '@/app/components/workflow/utils'
+import SnippetMain from './components/snippet-main'
+import { useSnippetInit } from './hooks/use-snippet-init'
+
+type SnippetPageProps = {
+  snippetId: string
+}
+
+const SnippetPage = ({
+  snippetId,
+}: SnippetPageProps) => {
+  const { t } = useTranslation('snippet')
+  const { data, isLoading } = useSnippetInit(snippetId)
+  const nodesData = useMemo(() => {
+    if (!data)
+      return []
+
+    return initialNodes(data.graph.nodes, data.graph.edges)
+  }, [data])
+  const edgesData = useMemo(() => {
+    if (!data)
+      return []
+
+    return initialEdges(data.graph.edges, data.graph.nodes)
+  }, [data])
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background-body">
+        <Loading />
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background-body px-6">
+        <div className="w-full max-w-md rounded-2xl border border-divider-subtle bg-components-card-bg p-8 text-center shadow-sm">
+          <div className="text-3xl font-semibold text-text-primary">404</div>
+          <div className="pt-3 text-text-primary system-md-semibold">{t('notFoundTitle')}</div>
+          <div className="pt-2 text-text-tertiary system-sm-regular">{t('notFoundDescription')}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <WorkflowWithDefaultContext
+      edges={edgesData}
+      nodes={nodesData}
+    >
+      <SnippetMain
+        key={snippetId}
+        snippetId={snippetId}
+        payload={data}
+        nodes={nodesData}
+        edges={edgesData}
+        viewport={data.graph.viewport}
+      />
+    </WorkflowWithDefaultContext>
+  )
+}
+
+const SnippetPageWrapper = (props: SnippetPageProps) => {
+  return (
+    <WorkflowContextProvider>
+      <SnippetPage {...props} />
+    </WorkflowContextProvider>
+  )
+}
+
+export default SnippetPageWrapper
diff --git a/web/app/components/snippets/store/index.ts b/web/app/components/snippets/store/index.ts
new file mode 100644
index 0000000000..c0c86d6aa2
--- /dev/null
+++ b/web/app/components/snippets/store/index.ts
@@ -0,0 +1,44 @@
+'use client'
+
+import type { SnippetInputField, SnippetSection } from '@/models/snippet'
+import { create } from 'zustand'
+
+type SnippetDetailUIState = {
+  activeSection: SnippetSection
+  isInputPanelOpen: boolean
+  isPublishMenuOpen: boolean
+  isPreviewMode: boolean
+  isEditorOpen: boolean
+  editingField: SnippetInputField | null
+  setActiveSection: (section: SnippetSection) => void
+  setInputPanelOpen: (value: boolean) => void
+  toggleInputPanel: () => void
+  setPublishMenuOpen: (value: boolean) => void
+  togglePublishMenu: () => void
+  setPreviewMode: (value: boolean) => void
+  openEditor: (field?: SnippetInputField | null) => void
+  closeEditor: () => void
+  reset: () => void
+}
+
+const initialState = {
+  activeSection: 'orchestrate' as SnippetSection,
+  isInputPanelOpen: false,
+  isPublishMenuOpen: false,
+  isPreviewMode: false,
+  editingField: null,
+  isEditorOpen: false,
+}
+
+export const useSnippetDetailStore = create<SnippetDetailUIState>(set => ({
+  ...initialState,
+  setActiveSection: activeSection => set({ activeSection }),
+  setInputPanelOpen: isInputPanelOpen => set({ isInputPanelOpen }),
+  toggleInputPanel: () => set(state => ({ isInputPanelOpen: !state.isInputPanelOpen, isPublishMenuOpen: false })),
+  setPublishMenuOpen: isPublishMenuOpen => set({ isPublishMenuOpen }),
+  togglePublishMenu: () => set(state => ({ isPublishMenuOpen: !state.isPublishMenuOpen })),
+  setPreviewMode: isPreviewMode => set({ isPreviewMode }),
+  openEditor: (editingField = null) => set({ editingField, isEditorOpen: true, isInputPanelOpen: true }),
+  closeEditor: () => set({ editingField: null, isEditorOpen: false }),
+  reset: () => set(initialState),
+}))
diff --git a/web/i18n-config/resources.ts b/web/i18n-config/resources.ts
index 857440a1ee..6cca6e97cb 100644
--- a/web/i18n-config/resources.ts
+++ b/web/i18n-config/resources.ts
@@ -25,6 +25,7 @@ import type plugin from '../i18n/en-US/plugin.json'
 import type register from '../i18n/en-US/register.json'
 import type runLog from '../i18n/en-US/run-log.json'
 import type share from '../i18n/en-US/share.json'
+import type snippet from '../i18n/en-US/snippet.json'
 import type time from '../i18n/en-US/time.json'
 import type tools from '../i18n/en-US/tools.json'
 import type workflow from '../i18n/en-US/workflow.json'
@@ -58,6 +59,7 @@ export type Resources = {
   register: typeof register
   runLog: typeof runLog
   share: typeof share
+  snippet: typeof snippet
   time: typeof time
   tools: typeof tools
   workflow: typeof workflow
@@ -91,6 +93,7 @@ export const namespaces = [
   'register',
   'runLog',
   'share',
+  'snippet',
   'time',
   'tools',
   'workflow',
diff --git a/web/i18n/en-US/app.json b/web/i18n/en-US/app.json
index afbd352ddf..370f994004 100644
--- a/web/i18n/en-US/app.json
+++ b/web/i18n/en-US/app.json
@@ -35,7 +35,6 @@
   "communityIntro": "Discuss with team members, contributors and developers on different channels.",
   "createApp": "CREATE APP",
   "createFromConfigFile": "Create from DSL file",
-  "createSnippet": "CREATE SNIPPET",
   "deleteAppConfirmContent": "Deleting the app is irreversible. Users will no longer be able to access your app, and all prompt configurations and logs will be permanently deleted.",
   "deleteAppConfirmTitle": "Delete this app?",
   "dslUploader.browse": "Browse",
@@ -210,12 +209,6 @@
   "structOutput.structured": "Structured",
   "structOutput.structuredTip": "Structured Outputs is a feature that ensures the model will always generate responses that adhere to your supplied JSON Schema",
   "studio.apps": "Apps",
-  "studio.fakeSnippet.author": "Evan",
-  "studio.fakeSnippet.description": "Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.",
-  "studio.fakeSnippet.name": "Tone Rewriter",
-  "studio.fakeSnippet.status": "Draft",
-  "studio.fakeSnippet.updatedAt": "Updated 2h ago",
-  "studio.fakeSnippet.usage": "Used 19 times",
   "studio.filters.allCreators": "All creators",
   "studio.filters.creators": "Creators",
   "studio.filters.reset": "Reset",
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
new file mode 100644
index 0000000000..9c273b27e3
--- /dev/null
+++ b/web/i18n/en-US/snippet.json
@@ -0,0 +1,16 @@
+{
+  "create": "CREATE SNIPPET",
+  "inputFieldButton": "Input Field",
+  "notFoundDescription": "The requested snippet mock was not found.",
+  "notFoundTitle": "Snippet not found",
+  "panelDescription": "Defines the input fields that allow the snippet to receive data from other nodes.",
+  "panelPrimaryGroup": "Core inputs",
+  "panelSecondaryGroup": "Optional inputs",
+  "panelTitle": "Input Field",
+  "publishButton": "Publish",
+  "publishMenuCurrentDraft": "Current draft unpublished",
+  "sectionEvaluation": "Evaluation",
+  "sectionOrchestrate": "Orchestrate",
+  "testRunButton": "Test run",
+  "variableInspect": "Variable Inspect"
+}
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
new file mode 100644
index 0000000000..d3f735c2e7
--- /dev/null
+++ b/web/i18n/zh-Hans/snippet.json
@@ -0,0 +1,16 @@
+{
+  "create": "创建 Snippet",
+  "inputFieldButton": "输入字段",
+  "notFoundDescription": "未找到对应的 snippet 静态数据。",
+  "notFoundTitle": "未找到 Snippet",
+  "panelDescription": "定义允许 snippet 从其他节点接收数据的输入字段。",
+  "panelPrimaryGroup": "核心输入",
+  "panelSecondaryGroup": "可选输入",
+  "panelTitle": "输入字段",
+  "publishButton": "发布",
+  "publishMenuCurrentDraft": "当前草稿未发布",
+  "sectionEvaluation": "评测",
+  "sectionOrchestrate": "编排",
+  "testRunButton": "测试运行",
+  "variableInspect": "变量查看"
+}
diff --git a/web/models/snippet.ts b/web/models/snippet.ts
new file mode 100644
index 0000000000..5471782ab0
--- /dev/null
+++ b/web/models/snippet.ts
@@ -0,0 +1,50 @@
+import type { Viewport } from 'reactflow'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import type { InputVar } from '@/models/pipeline'
+
+export type SnippetSection = 'orchestrate' | 'evaluation'
+
+export type SnippetListItem = {
+  id: string
+  name: string
+  description: string
+  author: string
+  updatedAt: string
+  usage: string
+  icon: string
+  iconBackground: string
+  status?: string
+}
+
+export type SnippetDetail = {
+  id: string
+  name: string
+  description: string
+  author: string
+  updatedAt: string
+  usage: string
+  icon: string
+  iconBackground: string
+  status?: string
+}
+
+export type SnippetCanvasData = {
+  nodes: Node[]
+  edges: Edge[]
+  viewport: Viewport
+}
+
+export type SnippetInputField = InputVar
+
+export type SnippetDetailUIModel = {
+  inputFieldCount: number
+  checklistCount: number
+  autoSavedAt: string
+}
+
+export type SnippetDetailPayload = {
+  snippet: SnippetDetail
+  graph: SnippetCanvasData
+  inputFields: SnippetInputField[]
+  uiMeta: SnippetDetailUIModel
+}
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
new file mode 100644
index 0000000000..222652e0e4
--- /dev/null
+++ b/web/service/use-snippets.ts
@@ -0,0 +1,215 @@
+import type { Node } from '@/app/components/workflow/types'
+import type { SnippetDetailPayload, SnippetInputField, SnippetListItem } from '@/models/snippet'
+import { useQuery } from '@tanstack/react-query'
+import codeDefault from '@/app/components/workflow/nodes/code/default'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import httpDefault from '@/app/components/workflow/nodes/http/default'
+import { Method } from '@/app/components/workflow/nodes/http/types'
+import llmDefault from '@/app/components/workflow/nodes/llm/default'
+import questionClassifierDefault from '@/app/components/workflow/nodes/question-classifier/default'
+import { BlockEnum, PromptRole } from '@/app/components/workflow/types'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { AppModeEnum } from '@/types/app'
+
+const NAME_SPACE = 'snippets'
+
+export const getSnippetListMock = (): SnippetListItem[] => ([
+  {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+    author: 'Evan',
+    updatedAt: 'Updated 2h ago',
+    usage: 'Used 19 times',
+    icon: '🪄',
+    iconBackground: '#E0EAFF',
+    status: 'Draft',
+  },
+])
+
+const getSnippetInputFieldsMock = (): SnippetInputField[] => ([
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Blog URL',
+    variable: 'blog_url',
+    required: true,
+    placeholder: 'Paste a source article URL',
+    options: [],
+    max_length: 256,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Target Platforms',
+    variable: 'platforms',
+    required: true,
+    placeholder: 'X, LinkedIn, Instagram',
+    options: [],
+    max_length: 128,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Tone',
+    variable: 'tone',
+    required: false,
+    placeholder: 'Concise and executive-ready',
+    options: [],
+    max_length: 48,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Max Length',
+    variable: 'max_length',
+    required: false,
+    placeholder: 'Set an ideal output length',
+    options: [],
+    max_length: 48,
+  },
+])
+
+const getSnippetGraphMock = (): SnippetDetailPayload['graph'] => ({
+  viewport: { x: 120, y: 30, zoom: 0.9 },
+  nodes: [
+    {
+      id: 'question-classifier',
+      position: { x: 280, y: 208 },
+      data: {
+        ...questionClassifierDefault.defaultValue,
+        title: 'Question Classifier',
+        desc: 'After-sales related questions',
+        type: BlockEnum.QuestionClassifier,
+        query_variable_selector: ['sys', 'query'],
+        model: {
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.2,
+          },
+        },
+        classes: [
+          {
+            id: '1',
+            name: 'HTTP Request',
+          },
+          {
+            id: '2',
+            name: 'LLM',
+          },
+          {
+            id: '3',
+            name: 'Code',
+          },
+        ],
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'http-request',
+      position: { x: 670, y: 72 },
+      data: {
+        ...httpDefault.defaultValue,
+        title: 'HTTP Request',
+        desc: 'POST https://api.example.com/content/rewrite',
+        type: BlockEnum.HttpRequest,
+        method: Method.post,
+        url: 'https://api.example.com/content/rewrite',
+        headers: 'Content-Type: application/json',
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'llm',
+      position: { x: 670, y: 248 },
+      data: {
+        ...llmDefault.defaultValue,
+        title: 'LLM',
+        desc: 'GPT-4o',
+        type: BlockEnum.LLM,
+        model: {
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.7,
+          },
+        },
+        prompt_template: [{
+          role: PromptRole.system,
+          text: 'Rewrite the content with the requested tone.',
+        }],
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'code',
+      position: { x: 670, y: 424 },
+      data: {
+        ...codeDefault.defaultValue,
+        title: 'Code',
+        desc: 'Python',
+        type: BlockEnum.Code,
+        code_language: CodeLanguage.python3,
+        code: 'def main(text: str) -> dict:\n    return {"content": text.strip()}',
+      } as unknown as Node['data'],
+    },
+  ],
+  edges: [
+    {
+      id: 'edge-question-http',
+      source: 'question-classifier',
+      sourceHandle: '1',
+      target: 'http-request',
+      targetHandle: 'target',
+    },
+    {
+      id: 'edge-question-llm',
+      source: 'question-classifier',
+      sourceHandle: '2',
+      target: 'llm',
+      targetHandle: 'target',
+    },
+    {
+      id: 'edge-question-code',
+      source: 'question-classifier',
+      sourceHandle: '3',
+      target: 'code',
+      targetHandle: 'target',
+    },
+  ],
+})
+
+const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
+  const snippet = getSnippetListMock().find(item => item.id === snippetId)
+  if (!snippet)
+    return null
+
+  const inputFields = getSnippetInputFieldsMock()
+
+  return {
+    snippet,
+    graph: getSnippetGraphMock(),
+    inputFields,
+    uiMeta: {
+      inputFieldCount: inputFields.length,
+      checklistCount: 2,
+      autoSavedAt: 'Auto-saved · a few seconds ago',
+    },
+  }
+}
+
+export const useSnippetDetail = (snippetId: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'detail', snippetId],
+    queryFn: async () => getSnippetDetailMock(snippetId),
+    enabled: !!snippetId,
+  })
+}
+
+export const publishSnippet = async (_snippetId: string) => {
+  return Promise.resolve()
+}
+
+export const runSnippet = async (_snippetId: string) => {
+  return Promise.resolve()
+}
+
+export const updateSnippetInputFields = async (_snippetId: string, _fields: SnippetInputField[]) => {
+  return Promise.resolve()
+}

From 887c7710e9d84a244397088fb2b1a11227734e01 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Mon, 16 Mar 2026 10:46:33 +0800
Subject: [PATCH 005/108] feat: evaluation

---
 .../[appId]/evaluation/page.tsx               |   11 +
 .../(appDetailLayout)/[appId]/layout-main.tsx |   77 +-
 .../[datasetId]/evaluation/page.tsx           |   11 +
 .../[datasetId]/layout-main.tsx               |   40 +-
 .../snippets/[snippetId]/evaluation/page.tsx  |   11 +
 .../snippets/[snippetId]/orchestrate/page.tsx |   11 +
 .../snippets/[snippetId]/page.spec.ts         |   21 +
 .../snippets/[snippetId]/page.tsx             |    6 +-
 web/app/components/apps/list.tsx              |    2 +-
 .../evaluation/__tests__/index.spec.tsx       |  112 ++
 .../evaluation/__tests__/store.spec.ts        |   96 ++
 web/app/components/evaluation/index.tsx       | 1017 +++++++++++++++++
 web/app/components/evaluation/mock.ts         |  184 +++
 web/app/components/evaluation/store.ts        |  635 ++++++++++
 web/app/components/evaluation/types.ts        |  117 ++
 .../snippets/components/snippet-main.tsx      |   69 +-
 web/app/components/snippets/index.tsx         |    4 +
 web/i18n-config/resources.ts                  |    3 +
 web/i18n/en-US/common.json                    |    2 +
 web/i18n/en-US/evaluation.json                |   73 ++
 web/i18n/zh-Hans/common.json                  |    2 +
 web/i18n/zh-Hans/evaluation.json              |   73 ++
 22 files changed, 2493 insertions(+), 84 deletions(-)
 create mode 100644 web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
 create mode 100644 web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts
 create mode 100644 web/app/components/evaluation/__tests__/index.spec.tsx
 create mode 100644 web/app/components/evaluation/__tests__/store.spec.ts
 create mode 100644 web/app/components/evaluation/index.tsx
 create mode 100644 web/app/components/evaluation/mock.ts
 create mode 100644 web/app/components/evaluation/store.ts
 create mode 100644 web/app/components/evaluation/types.ts
 create mode 100644 web/i18n/en-US/evaluation.json
 create mode 100644 web/i18n/zh-Hans/evaluation.json

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
new file mode 100644
index 0000000000..161f37108d
--- /dev/null
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
@@ -0,0 +1,11 @@
+import Evaluation from '@/app/components/evaluation'
+
+const Page = async (props: {
+  params: Promise<{ appId: string }>
+}) => {
+  const { appId } = await props.params
+
+  return <Evaluation resourceType="workflow" resourceId={appId} />
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index fd0bf2c8bd..0160553092 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -7,6 +7,8 @@ import {
   RiDashboard2Line,
   RiFileList3Fill,
   RiFileList3Line,
+  RiFlaskFill,
+  RiFlaskLine,
   RiTerminalBoxFill,
   RiTerminalBoxLine,
   RiTerminalWindowFill,
@@ -67,40 +69,47 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   }>>([])
 
   const getNavigationConfig = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: AppModeEnum) => {
-    const navConfig = [
-      ...(isCurrentWorkspaceEditor
-        ? [{
-            name: t('appMenus.promptEng', { ns: 'common' }),
-            href: `/app/${appId}/${(mode === AppModeEnum.WORKFLOW || mode === AppModeEnum.ADVANCED_CHAT) ? 'workflow' : 'configuration'}`,
-            icon: RiTerminalWindowLine,
-            selectedIcon: RiTerminalWindowFill,
-          }]
-        : []
-      ),
-      {
-        name: t('appMenus.apiAccess', { ns: 'common' }),
-        href: `/app/${appId}/develop`,
-        icon: RiTerminalBoxLine,
-        selectedIcon: RiTerminalBoxFill,
-      },
-      ...(isCurrentWorkspaceEditor
-        ? [{
-            name: mode !== AppModeEnum.WORKFLOW
-              ? t('appMenus.logAndAnn', { ns: 'common' })
-              : t('appMenus.logs', { ns: 'common' }),
-            href: `/app/${appId}/logs`,
-            icon: RiFileList3Line,
-            selectedIcon: RiFileList3Fill,
-          }]
-        : []
-      ),
-      {
-        name: t('appMenus.overview', { ns: 'common' }),
-        href: `/app/${appId}/overview`,
-        icon: RiDashboard2Line,
-        selectedIcon: RiDashboard2Fill,
-      },
-    ]
+    const navConfig = []
+
+    if (isCurrentWorkspaceEditor) {
+      navConfig.push({
+        name: t('appMenus.promptEng', { ns: 'common' }),
+        href: `/app/${appId}/${(mode === AppModeEnum.WORKFLOW || mode === AppModeEnum.ADVANCED_CHAT) ? 'workflow' : 'configuration'}`,
+        icon: RiTerminalWindowLine,
+        selectedIcon: RiTerminalWindowFill,
+      })
+      navConfig.push({
+        name: t('appMenus.evaluation', { ns: 'common' }),
+        href: `/app/${appId}/evaluation`,
+        icon: RiFlaskLine,
+        selectedIcon: RiFlaskFill,
+      })
+    }
+
+    navConfig.push({
+      name: t('appMenus.apiAccess', { ns: 'common' }),
+      href: `/app/${appId}/develop`,
+      icon: RiTerminalBoxLine,
+      selectedIcon: RiTerminalBoxFill,
+    })
+
+    if (isCurrentWorkspaceEditor) {
+      navConfig.push({
+        name: mode !== AppModeEnum.WORKFLOW
+          ? t('appMenus.logAndAnn', { ns: 'common' })
+          : t('appMenus.logs', { ns: 'common' }),
+        href: `/app/${appId}/logs`,
+        icon: RiFileList3Line,
+        selectedIcon: RiFileList3Fill,
+      })
+    }
+
+    navConfig.push({
+      name: t('appMenus.overview', { ns: 'common' }),
+      href: `/app/${appId}/overview`,
+      icon: RiDashboard2Line,
+      selectedIcon: RiDashboard2Fill,
+    })
     return navConfig
   }, [t])
 
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
new file mode 100644
index 0000000000..d502266d16
--- /dev/null
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
@@ -0,0 +1,11 @@
+import Evaluation from '@/app/components/evaluation'
+
+const Page = async (props: {
+  params: Promise<{ datasetId: string }>
+}) => {
+  const { datasetId } = await props.params
+
+  return <Evaluation resourceType="pipeline" resourceId={datasetId} />
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 4f3f724e62..495c57a4ce 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -6,6 +6,8 @@ import {
   RiEqualizer2Line,
   RiFileTextFill,
   RiFileTextLine,
+  RiFlaskFill,
+  RiFlaskLine,
   RiFocus2Fill,
   RiFocus2Line,
 } from '@remixicon/react'
@@ -86,20 +88,30 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     ]
 
     if (datasetRes?.provider !== 'external') {
-      baseNavigation.unshift({
-        name: t('datasetMenus.pipeline', { ns: 'common' }),
-        href: `/datasets/${datasetId}/pipeline`,
-        icon: PipelineLine as RemixiconComponentType,
-        selectedIcon: PipelineFill as RemixiconComponentType,
-        disabled: false,
-      })
-      baseNavigation.unshift({
-        name: t('datasetMenus.documents', { ns: 'common' }),
-        href: `/datasets/${datasetId}/documents`,
-        icon: RiFileTextLine,
-        selectedIcon: RiFileTextFill,
-        disabled: isButtonDisabledWithPipeline,
-      })
+      return [
+        {
+          name: t('datasetMenus.documents', { ns: 'common' }),
+          href: `/datasets/${datasetId}/documents`,
+          icon: RiFileTextLine,
+          selectedIcon: RiFileTextFill,
+          disabled: isButtonDisabledWithPipeline,
+        },
+        {
+          name: t('datasetMenus.pipeline', { ns: 'common' }),
+          href: `/datasets/${datasetId}/pipeline`,
+          icon: PipelineLine as RemixiconComponentType,
+          selectedIcon: PipelineFill as RemixiconComponentType,
+          disabled: false,
+        },
+        {
+          name: t('datasetMenus.evaluation', { ns: 'common' }),
+          href: `/datasets/${datasetId}/evaluation`,
+          icon: RiFlaskLine,
+          selectedIcon: RiFlaskFill,
+          disabled: false,
+        },
+        ...baseNavigation,
+      ]
     }
 
     return baseNavigation
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
new file mode 100644
index 0000000000..293945ad20
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
@@ -0,0 +1,11 @@
+import SnippetPage from '@/app/components/snippets'
+
+const Page = async (props: {
+  params: Promise<{ snippetId: string }>
+}) => {
+  const { snippetId } = await props.params
+
+  return <SnippetPage snippetId={snippetId} section="evaluation" />
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
new file mode 100644
index 0000000000..702dfcab54
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
@@ -0,0 +1,11 @@
+import SnippetPage from '@/app/components/snippets'
+
+const Page = async (props: {
+  params: Promise<{ snippetId: string }>
+}) => {
+  const { snippetId } = await props.params
+
+  return <SnippetPage snippetId={snippetId} section="orchestrate" />
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts b/web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts
new file mode 100644
index 0000000000..578c562848
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts
@@ -0,0 +1,21 @@
+import Page from './page'
+
+const mockRedirect = vi.fn()
+
+vi.mock('next/navigation', () => ({
+  redirect: (path: string) => mockRedirect(path),
+}))
+
+describe('snippet detail redirect page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should redirect legacy snippet detail routes to orchestrate', async () => {
+    await Page({
+      params: Promise.resolve({ snippetId: 'snippet-1' }),
+    })
+
+    expect(mockRedirect).toHaveBeenCalledWith('/snippets/snippet-1/orchestrate')
+  })
+})
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
index 0d37e83e2b..3b35e29360 100644
--- a/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
+++ b/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
@@ -1,11 +1,11 @@
-import SnippetPage from '@/app/components/snippets'
+import { redirect } from 'next/navigation'
 
 const Page = async (props: {
   params: Promise<{ snippetId: string }>
 }) => {
-  const { params } = props
+  const { snippetId } = await props.params
 
-  return <SnippetPage snippetId={(await params).snippetId} />
+  redirect(`/snippets/${snippetId}/orchestrate`)
 }
 
 export default Page
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 90dd84cb9e..465ad230ff 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -91,7 +91,7 @@ const SnippetCard = ({
   snippet: SnippetListItem
 }) => {
   return (
-    <Link href={`/snippets/${snippet.id}`} className="group col-span-1">
+    <Link href={`/snippets/${snippet.id}/orchestrate`} className="group col-span-1">
       <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
         {snippet.status && (
           <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..55edd6ceb2
--- /dev/null
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -0,0 +1,112 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import Evaluation from '..'
+import { getEvaluationMockConfig } from '../mock'
+import { useEvaluationStore } from '../store'
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelList: () => ({
+    data: [{
+      provider: 'openai',
+      models: [{ model: 'gpt-4o-mini' }],
+    }],
+  }),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  default: ({ defaultModel }: { defaultModel?: { provider: string, model: string } }) => (
+    <div data-testid="evaluation-model-selector">
+      {defaultModel ? `${defaultModel.provider}:${defaultModel.model}` : 'empty'}
+    </div>
+  ),
+}))
+
+describe('Evaluation', () => {
+  beforeEach(() => {
+    useEvaluationStore.setState({ resources: {} })
+  })
+
+  it('should search, add metrics, and create a batch history record', async () => {
+    vi.useFakeTimers()
+
+    render(<Evaluation resourceType="workflow" resourceId="app-1" />)
+
+    expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('openai:gpt-4o-mini')
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+    expect(screen.getByTestId('evaluation-metric-loading')).toBeInTheDocument()
+
+    await act(async () => {
+      vi.advanceTimersByTime(200)
+    })
+
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchPlaceholder'), {
+      target: { value: 'does-not-exist' },
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(200)
+    })
+
+    expect(screen.getByText('evaluation.metrics.noResults')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchPlaceholder'), {
+      target: { value: 'faith' },
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(200)
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /Faithfulness/i }))
+    expect(screen.getAllByText('Faithfulness').length).toBeGreaterThan(0)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.batch.run' }))
+    expect(screen.getByText('evaluation.batch.status.running')).toBeInTheDocument()
+
+    await act(async () => {
+      vi.advanceTimersByTime(1300)
+    })
+
+    expect(screen.getByText('evaluation.batch.status.success')).toBeInTheDocument()
+    expect(screen.getByText('Workflow evaluation batch')).toBeInTheDocument()
+
+    vi.useRealTimers()
+  })
+
+  it('should render time placeholders and hide the value row for empty operators', () => {
+    const resourceType = 'workflow'
+    const resourceId = 'app-2'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    const timeField = config.fieldOptions.find(field => field.type === 'time')!
+    let groupId = ''
+    let itemId = ''
+
+    act(() => {
+      store.ensureResource(resourceType, resourceId)
+      store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+
+      const group = useEvaluationStore.getState().resources['workflow:app-2'].conditions[0]
+      groupId = group.id
+      itemId = group.items[0].id
+
+      store.updateConditionField(resourceType, resourceId, groupId, itemId, timeField.id)
+      store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'before')
+    })
+
+    let rerender: ReturnType<typeof render>['rerender']
+    act(() => {
+      ({ rerender } = render(<Evaluation resourceType={resourceType} resourceId={resourceId} />))
+    })
+
+    expect(screen.getByText('evaluation.conditions.selectTime')).toBeInTheDocument()
+
+    act(() => {
+      store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'is_empty')
+      rerender(<Evaluation resourceType={resourceType} resourceId={resourceId} />)
+    })
+
+    expect(screen.queryByText('evaluation.conditions.selectTime')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
new file mode 100644
index 0000000000..d37952be61
--- /dev/null
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -0,0 +1,96 @@
+import { getEvaluationMockConfig } from '../mock'
+import {
+  getAllowedOperators,
+  isCustomMetricConfigured,
+  requiresConditionValue,
+  useEvaluationStore,
+} from '../store'
+
+describe('evaluation store', () => {
+  beforeEach(() => {
+    useEvaluationStore.setState({ resources: {} })
+  })
+
+  it('should configure a custom metric mapping to a valid state', () => {
+    const resourceType = 'workflow'
+    const resourceId = 'app-1'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    const initialMetric = useEvaluationStore.getState().resources['workflow:app-1'].metrics.find(metric => metric.kind === 'custom-workflow')
+    expect(initialMetric).toBeDefined()
+    expect(isCustomMetricConfigured(initialMetric!)).toBe(false)
+
+    store.setCustomMetricWorkflow(resourceType, resourceId, initialMetric!.id, config.workflowOptions[0].id)
+    store.updateCustomMetricMapping(resourceType, resourceId, initialMetric!.id, initialMetric!.customConfig!.mappings[0].id, {
+      sourceFieldId: config.fieldOptions[0].id,
+      targetVariableId: config.workflowOptions[0].targetVariables[0].id,
+    })
+
+    const configuredMetric = useEvaluationStore.getState().resources['workflow:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
+    expect(isCustomMetricConfigured(configuredMetric!)).toBe(true)
+  })
+
+  it('should add and remove builtin metrics', () => {
+    const resourceType = 'workflow'
+    const resourceId = 'app-2'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addBuiltinMetric(resourceType, resourceId, config.builtinMetrics[1].id)
+
+    const addedMetric = useEvaluationStore.getState().resources['workflow:app-2'].metrics.find(metric => metric.optionId === config.builtinMetrics[1].id)
+    expect(addedMetric).toBeDefined()
+
+    store.removeMetric(resourceType, resourceId, addedMetric!.id)
+
+    expect(useEvaluationStore.getState().resources['workflow:app-2'].metrics.some(metric => metric.id === addedMetric!.id)).toBe(false)
+  })
+
+  it('should update condition groups and adapt operators to field types', () => {
+    const resourceType = 'pipeline'
+    const resourceId = 'dataset-1'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+
+    const initialGroup = useEvaluationStore.getState().resources['pipeline:dataset-1'].conditions[0]
+    store.setConditionGroupOperator(resourceType, resourceId, initialGroup.id, 'or')
+    store.addConditionGroup(resourceType, resourceId)
+
+    const booleanField = config.fieldOptions.find(field => field.type === 'boolean')!
+    const currentItem = useEvaluationStore.getState().resources['pipeline:dataset-1'].conditions[0].items[0]
+    store.updateConditionField(resourceType, resourceId, initialGroup.id, currentItem.id, booleanField.id)
+
+    const updatedGroup = useEvaluationStore.getState().resources['pipeline:dataset-1'].conditions[0]
+    expect(updatedGroup.logicalOperator).toBe('or')
+    expect(updatedGroup.items[0].operator).toBe('is')
+    expect(getAllowedOperators(resourceType, booleanField.id)).toEqual(['is', 'is_not'])
+  })
+
+  it('should support time fields and clear values for empty operators', () => {
+    const resourceType = 'workflow'
+    const resourceId = 'app-3'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+
+    const timeField = config.fieldOptions.find(field => field.type === 'time')!
+    const item = useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].items[0]
+
+    store.updateConditionField(resourceType, resourceId, useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].id, item.id, timeField.id)
+    store.updateConditionOperator(resourceType, resourceId, useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].id, item.id, 'is_empty')
+
+    const updatedItem = useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].items[0]
+
+    expect(getAllowedOperators(resourceType, timeField.id)).toEqual(['is', 'before', 'after', 'is_empty', 'is_not_empty'])
+    expect(requiresConditionValue('is_empty')).toBe(false)
+    expect(updatedItem.value).toBeNull()
+  })
+})
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
new file mode 100644
index 0000000000..798e092eed
--- /dev/null
+++ b/web/app/components/evaluation/index.tsx
@@ -0,0 +1,1017 @@
+'use client'
+
+import type { TFunction } from 'i18next'
+import type { ChangeEvent, ReactNode } from 'react'
+import type {
+  ComparisonOperator,
+  CustomMetricMapping,
+  EvaluationFieldOption,
+  EvaluationMetric,
+  EvaluationResourceType,
+  JudgmentConditionGroup,
+} from './types'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+  RiCloseLine,
+  RiDeleteBinLine,
+  RiDownloadLine,
+  RiFileUploadLine,
+  RiFlaskLine,
+  RiLoader4Line,
+} from '@remixicon/react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
+import dayjs from '@/app/components/base/date-and-time-picker/utils/dayjs'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/app/components/base/ui/select'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from './mock'
+import {
+  getAllowedOperators,
+  isCustomMetricConfigured,
+  isEvaluationRunnable,
+  requiresConditionValue,
+  useEvaluationResource,
+  useEvaluationStore,
+} from './store'
+
+type EvaluationProps = {
+  resourceType: EvaluationResourceType
+  resourceId: string
+}
+
+const TAB_CLASS_NAME = 'flex-1 rounded-lg px-3 py-2 text-left system-sm-medium'
+
+const encodeModelSelection = (provider: string, model: string) => `${provider}::${model}`
+
+const decodeModelSelection = (judgeModelId: string | null) => {
+  if (!judgeModelId)
+    return undefined
+
+  const [provider, model] = judgeModelId.split('::')
+  if (!provider || !model)
+    return undefined
+
+  return { provider, model }
+}
+
+const compactOperatorLabels: Partial<Record<ComparisonOperator, string>> = {
+  is: '=',
+  is_not: '!=',
+  greater_than: '>',
+  less_than: '<',
+  greater_or_equal: '>=',
+  less_or_equal: '<=',
+}
+
+const groupFieldOptions = (fieldOptions: EvaluationFieldOption[]) => {
+  return Object.entries(fieldOptions.reduce<Record<string, EvaluationFieldOption[]>>((acc, field) => {
+    acc[field.group] = [...(acc[field.group] ?? []), field]
+    return acc
+  }, {}))
+}
+
+const getOperatorLabel = (
+  operator: ComparisonOperator,
+  fieldType: EvaluationFieldOption['type'] | undefined,
+  t: TFunction<'evaluation'>,
+) => {
+  if (fieldType === 'number' && compactOperatorLabels[operator])
+    return compactOperatorLabels[operator] as string
+
+  return t(`conditions.operators.${operator}` as const)
+}
+
+const getFieldTypeIconClassName = (fieldType: EvaluationFieldOption['type']) => {
+  if (fieldType === 'number')
+    return 'i-ri-hashtag'
+
+  if (fieldType === 'boolean')
+    return 'i-ri-checkbox-circle-line'
+
+  if (fieldType === 'enum')
+    return 'i-ri-list-check-2'
+
+  if (fieldType === 'time')
+    return 'i-ri-time-line'
+
+  return 'i-ri-text'
+}
+
+const ConditionFieldLabel = ({
+  field,
+  placeholder,
+}: {
+  field?: EvaluationFieldOption
+  placeholder: string
+}) => {
+  if (!field)
+    return <span className="px-1 text-components-input-text-placeholder system-sm-regular">{placeholder}</span>
+
+  return (
+    <div className="flex min-w-0 items-center gap-2 px-1">
+      <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-[5px] pr-1.5 shadow-xs">
+        <span className={cn(getFieldTypeIconClassName(field.type), 'h-3 w-3 shrink-0 text-text-secondary')} />
+        <span className="truncate text-text-secondary system-xs-medium">{field.label}</span>
+      </div>
+      <span className="shrink-0 text-text-tertiary system-xs-regular">{field.type}</span>
+    </div>
+  )
+}
+
+const SectionHeader = ({
+  title,
+  description,
+  action,
+}: {
+  title: string
+  description: string
+  action?: ReactNode
+}) => {
+  return (
+    <div className="flex flex-wrap items-start justify-between gap-3">
+      <div>
+        <div className="text-text-primary system-md-semibold">{title}</div>
+        <div className="mt-1 text-text-tertiary system-sm-regular">{description}</div>
+      </div>
+      {action}
+    </div>
+  )
+}
+
+const FieldValueInput = ({
+  field,
+  operator,
+  value,
+  onChange,
+}: {
+  field?: EvaluationFieldOption
+  operator: ComparisonOperator
+  value: string | number | boolean | null
+  onChange: (value: string | number | boolean | null) => void
+}) => {
+  const { t } = useTranslation('evaluation')
+
+  if (!field || !requiresConditionValue(operator))
+    return null
+
+  if (field.type === 'time') {
+    const selectedTime = typeof value === 'string' && value ? dayjs(value) : undefined
+
+    return (
+      <div className="px-2 py-1.5">
+        <DatePicker
+          value={selectedTime}
+          onChange={date => onChange(date ? date.toISOString() : null)}
+          onClear={() => onChange(null)}
+          placeholder={t('conditions.selectTime')}
+          triggerWrapClassName="w-full"
+          popupZIndexClassname="z-[1002]"
+          renderTrigger={({ handleClickTrigger }) => (
+            <button
+              type="button"
+              className="group flex w-full items-center gap-2 rounded-md px-1 py-1 text-left hover:bg-state-base-hover-alt"
+              onClick={handleClickTrigger}
+            >
+              <span className={cn(
+                'min-w-0 flex-1 truncate system-sm-regular',
+                selectedTime ? 'text-text-secondary' : 'text-components-input-text-placeholder',
+              )}
+              >
+                {selectedTime ? selectedTime.format('MMM D, YYYY h:mm A') : t('conditions.selectTime')}
+              </span>
+              <span className="i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary" />
+            </button>
+          )}
+        />
+      </div>
+    )
+  }
+
+  if (field.type === 'boolean') {
+    return (
+      <div className="px-2 py-1.5">
+        <Select value={value === null ? '' : String(value)} onValueChange={nextValue => onChange(nextValue === 'true')}>
+          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+            <SelectValue placeholder={t('conditions.selectValue')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">{t('conditions.boolean.true')}</SelectItem>
+            <SelectItem value="false">{t('conditions.boolean.false')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  if (field.type === 'enum') {
+    return (
+      <div className="px-2 py-1.5">
+        <Select value={typeof value === 'string' ? value : ''} onValueChange={nextValue => onChange(nextValue)}>
+          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+            <SelectValue placeholder={t('conditions.selectValue')} />
+          </SelectTrigger>
+          <SelectContent>
+            {(field.options ?? []).map(option => (
+              <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-2 py-1.5">
+      <Input
+        type={field.type === 'number' ? 'number' : 'text'}
+        value={value === null || typeof value === 'boolean' ? '' : value}
+        className="border-none bg-transparent shadow-none hover:border-none hover:bg-state-base-hover-alt focus:border-none focus:bg-state-base-hover-alt focus:shadow-none"
+        placeholder={t('conditions.valuePlaceholder')}
+        onChange={(e) => {
+          if (field.type === 'number') {
+            const nextValue = e.target.value
+            onChange(nextValue === '' ? null : Number(nextValue))
+            return
+          }
+
+          onChange(e.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+const ConditionFieldSelect = ({
+  field,
+  fieldOptions,
+  placeholder,
+  onChange,
+}: {
+  field?: EvaluationFieldOption
+  fieldOptions: EvaluationFieldOption[]
+  placeholder: string
+  onChange: (fieldId: string) => void
+}) => {
+  return (
+    <Select value={field?.id ?? ''} onValueChange={value => value && onChange(value)}>
+      <SelectTrigger className="h-auto bg-transparent px-1 py-1 hover:bg-transparent focus-visible:bg-transparent">
+        <ConditionFieldLabel field={field} placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent popupClassName="w-[320px]">
+        {groupFieldOptions(fieldOptions).map(([groupName, fields]) => (
+          <SelectGroup key={groupName}>
+            <SelectGroupLabel className="px-3 pb-1 pt-2 text-text-tertiary system-xs-medium-uppercase">{groupName}</SelectGroupLabel>
+            {fields.map(option => (
+              <SelectItem key={option.id} value={option.id}>
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className={cn(getFieldTypeIconClassName(option.type), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
+                  <span className="truncate">{option.label}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const ConditionOperatorSelect = ({
+  field,
+  operator,
+  operators,
+  onChange,
+}: {
+  field?: EvaluationFieldOption
+  operator: ComparisonOperator
+  operators: ComparisonOperator[]
+  onChange: (operator: ComparisonOperator) => void
+}) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
+      <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+        <span className="truncate text-text-secondary system-xs-medium">{getOperatorLabel(operator, field?.type, t)}</span>
+      </SelectTrigger>
+      <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
+        {operators.map(nextOperator => (
+          <SelectItem key={nextOperator} value={nextOperator}>
+            {getOperatorLabel(nextOperator, field?.type, t)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const JudgeModelSelector = ({
+  resourceId,
+  resourceType,
+}: EvaluationProps) => {
+  const { data: modelList } = useModelList(ModelTypeEnum.textGeneration)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setJudgeModel = useEvaluationStore(state => state.setJudgeModel)
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+
+  useEffect(() => {
+    if (resource.judgeModelId || !modelList.length)
+      return
+
+    const firstProvider = modelList[0]
+    const firstModel = firstProvider.models[0]
+    if (!firstProvider || !firstModel)
+      return
+
+    setJudgeModel(resourceType, resourceId, encodeModelSelection(firstProvider.provider, firstModel.model))
+  }, [modelList, resource.judgeModelId, resourceId, resourceType, setJudgeModel])
+
+  return (
+    <ModelSelector
+      defaultModel={selectedModel}
+      modelList={modelList}
+      onSelect={model => setJudgeModel(resourceType, resourceId, encodeModelSelection(model.provider, model.model))}
+      showDeprecatedWarnIcon
+      triggerClassName="h-11"
+    />
+  )
+}
+
+const MetricSelector = ({
+  resourceType,
+  resourceId,
+}: EvaluationProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const metricGroupLabels = {
+    quality: t('metrics.groups.quality'),
+    operations: t('metrics.groups.operations'),
+  }
+  const metrics = useEvaluationResource(resourceType, resourceId).metrics
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [showAll, setShowAll] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const loadingTimerRef = useRef<number | null>(null)
+
+  const triggerLoading = () => {
+    if (loadingTimerRef.current)
+      window.clearTimeout(loadingTimerRef.current)
+
+    setIsLoading(true)
+    loadingTimerRef.current = window.setTimeout(() => {
+      setIsLoading(false)
+    }, 180)
+  }
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+
+    if (nextOpen) {
+      triggerLoading()
+      return
+    }
+
+    if (loadingTimerRef.current)
+      window.clearTimeout(loadingTimerRef.current)
+    setIsLoading(false)
+  }
+
+  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value)
+    if (open)
+      triggerLoading()
+  }
+
+  useEffect(() => {
+    return () => {
+      if (loadingTimerRef.current)
+        window.clearTimeout(loadingTimerRef.current)
+    }
+  }, [])
+
+  const filteredGroups = useMemo(() => {
+    const filteredMetrics = config.builtinMetrics.filter((metric) => {
+      const keyword = query.trim().toLowerCase()
+      if (!keyword)
+        return true
+
+      return metric.label.toLowerCase().includes(keyword) || metric.description.toLowerCase().includes(keyword)
+    })
+
+    const grouped = filteredMetrics.reduce<Record<string, typeof filteredMetrics>>((acc, metric) => {
+      acc[metric.group] = [...(acc[metric.group] ?? []), metric]
+      return acc
+    }, {})
+
+    return Object.entries(grouped)
+  }, [config.builtinMetrics, query])
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger className="btn btn-medium btn-secondary inline-flex items-center">
+        <RiAddLine className="mr-1 h-4 w-4" />
+        {t('metrics.add')}
+      </PopoverTrigger>
+      <PopoverContent popupClassName="w-[360px] p-3">
+        <div className="space-y-3">
+          <Input
+            value={query}
+            showLeftIcon
+            placeholder={t('metrics.searchPlaceholder')}
+            onChange={handleQueryChange}
+          />
+          <div className="max-h-[320px] space-y-3 overflow-y-auto pr-1">
+            {isLoading && (
+              <div className="space-y-2" data-testid="evaluation-metric-loading">
+                {['metric-skeleton-1', 'metric-skeleton-2', 'metric-skeleton-3'].map(key => (
+                  <div key={key} className="h-14 animate-pulse rounded-xl bg-background-default-subtle" />
+                ))}
+              </div>
+            )}
+            {!isLoading && filteredGroups.length === 0 && (
+              <div className="rounded-xl border border-dashed border-divider-subtle px-4 py-8 text-center text-text-tertiary system-sm-regular">
+                {t('metrics.noResults')}
+              </div>
+            )}
+            {!isLoading && filteredGroups.map(([groupName, options]) => {
+              const shownOptions = showAll ? options : options.slice(0, 2)
+              return (
+                <div key={groupName}>
+                  <div className="mb-2 text-text-tertiary system-xs-medium-uppercase">{metricGroupLabels[groupName as keyof typeof metricGroupLabels] ?? groupName}</div>
+                  <div className="space-y-2">
+                    {shownOptions.map(option => (
+                      <button
+                        key={option.id}
+                        type="button"
+                        className="w-full rounded-xl border border-divider-subtle px-3 py-3 text-left hover:border-components-button-secondary-border hover:bg-state-base-hover-alt"
+                        onClick={() => {
+                          addBuiltinMetric(resourceType, resourceId, option.id)
+                          setOpen(false)
+                        }}
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div>
+                            <div className="text-text-primary system-sm-semibold">{option.label}</div>
+                            <div className="mt-1 text-text-tertiary system-xs-regular">{option.description}</div>
+                          </div>
+                          {metrics.some(metric => metric.optionId === option.id && metric.kind === 'builtin') && (
+                            <Badge className="badge-accent">{t('metrics.added')}</Badge>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          {filteredGroups.some(([, options]) => options.length > 2) && (
+            <button
+              type="button"
+              className="flex items-center text-text-accent system-sm-medium"
+              onClick={() => setShowAll(value => !value)}
+            >
+              {showAll ? t('metrics.showLess') : t('metrics.showMore')}
+              <RiArrowDownSLine className={cn('ml-1 h-4 w-4 transition-transform', showAll && 'rotate-180')} />
+            </button>
+          )}
+          <div className="border-t border-divider-subtle pt-3">
+            <Button
+              className="w-full justify-center"
+              variant="ghost-accent"
+              onClick={() => {
+                addCustomMetric(resourceType, resourceId)
+                setOpen(false)
+              }}
+            >
+              {t('metrics.addCustom')}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+const CustomMetricEditor = ({
+  resourceType,
+  resourceId,
+  metric,
+}: EvaluationProps & { metric: EvaluationMetric }) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
+  const addCustomMetricMapping = useEvaluationStore(state => state.addCustomMetricMapping)
+  const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
+  const removeCustomMetricMapping = useEvaluationStore(state => state.removeCustomMetricMapping)
+  const selectedWorkflow = config.workflowOptions.find(option => option.id === metric.customConfig?.workflowId)
+  const isConfigured = isCustomMetricConfigured(metric)
+
+  if (!metric.customConfig)
+    return null
+
+  return (
+    <div className="mt-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-text-primary system-sm-semibold">{t('metrics.custom.title')}</div>
+          <div className="mt-1 text-text-tertiary system-xs-regular">{t('metrics.custom.description')}</div>
+        </div>
+        {!isConfigured && <Badge className="badge-warning">{t('metrics.custom.warningBadge')}</Badge>}
+      </div>
+      <div className="mt-4 grid gap-4 xl:grid-cols-[220px_minmax(0,1fr)]">
+        <div>
+          <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.workflowLabel')}</div>
+          <Select value={metric.customConfig.workflowId ?? ''} onValueChange={value => value && setCustomMetricWorkflow(resourceType, resourceId, metric.id, value)}>
+            <SelectTrigger>
+              <SelectValue placeholder={t('metrics.custom.workflowPlaceholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {config.workflowOptions.map(option => (
+                <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedWorkflow && <div className="mt-2 text-text-tertiary system-xs-regular">{selectedWorkflow.description}</div>}
+        </div>
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <div className="text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.mappingTitle')}</div>
+            <Button size="small" variant="ghost" onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}>
+              <RiAddLine className="mr-1 h-4 w-4" />
+              {t('metrics.custom.addMapping')}
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {metric.customConfig.mappings.map(mapping => (
+              <MappingRow
+                key={mapping.id}
+                resourceType={resourceType}
+                mapping={mapping}
+                targetOptions={selectedWorkflow?.targetVariables ?? []}
+                onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
+                onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
+              />
+            ))}
+          </div>
+          {!isConfigured && (
+            <div className="mt-3 rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
+              {t('metrics.custom.mappingWarning')}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MappingRow({
+  resourceType,
+  mapping,
+  targetOptions,
+  onUpdate,
+  onRemove,
+}: {
+  resourceType: EvaluationResourceType
+  mapping: CustomMetricMapping
+  targetOptions: Array<{ id: string, label: string }>
+  onUpdate: (patch: { sourceFieldId?: string | null, targetVariableId?: string | null }) => void
+  onRemove: () => void
+}) {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+
+  return (
+    <div className="grid gap-2 rounded-xl border border-divider-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
+      <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
+        <SelectTrigger>
+          <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {groupFieldOptions(config.fieldOptions).map(([groupName, fields]) => (
+            <SelectGroup key={groupName}>
+              <SelectGroupLabel>{groupName}</SelectGroupLabel>
+              {fields.map(field => (
+                <SelectItem key={field.id} value={field.id}>{field.label}</SelectItem>
+              ))}
+            </SelectGroup>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="flex items-center justify-center text-text-quaternary">
+        <RiArrowDownSLine className="h-4 w-4 -rotate-90" />
+      </div>
+      <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
+        <SelectTrigger>
+          <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {targetOptions.map(option => (
+            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button variant="ghost" size="small" aria-label={t('metrics.remove')} onClick={onRemove}>
+        <RiDeleteBinLine className="h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+const ConditionGroup = ({
+  resourceType,
+  resourceId,
+  group,
+  index,
+}: EvaluationProps & { group: JudgmentConditionGroup, index: number }) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const logicalLabels = {
+    and: t('conditions.logical.and'),
+    or: t('conditions.logical.or'),
+  }
+  const removeConditionGroup = useEvaluationStore(state => state.removeConditionGroup)
+  const setConditionGroupOperator = useEvaluationStore(state => state.setConditionGroupOperator)
+  const addConditionItem = useEvaluationStore(state => state.addConditionItem)
+  const removeConditionItem = useEvaluationStore(state => state.removeConditionItem)
+  const updateConditionField = useEvaluationStore(state => state.updateConditionField)
+  const updateConditionOperator = useEvaluationStore(state => state.updateConditionOperator)
+  const updateConditionValue = useEvaluationStore(state => state.updateConditionValue)
+
+  return (
+    <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <Badge>{t('conditions.groupLabel', { index: index + 1 })}</Badge>
+          <div className="flex rounded-lg border border-divider-subtle bg-background-default-subtle p-1">
+            {(['and', 'or'] as const).map(operator => (
+              <button
+                key={operator}
+                type="button"
+                className={cn(
+                  'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
+                  group.logicalOperator === operator
+                    ? 'bg-components-card-bg text-text-primary shadow-xs'
+                    : 'text-text-tertiary',
+                )}
+                onClick={() => setConditionGroupOperator(resourceType, resourceId, group.id, operator)}
+              >
+                {logicalLabels[operator]}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="small" variant="ghost" onClick={() => addConditionItem(resourceType, resourceId, group.id)}>
+            <RiAddLine className="mr-1 h-4 w-4" />
+            {t('conditions.addCondition')}
+          </Button>
+          <Button
+            size="small"
+            variant="ghost"
+            aria-label={t('conditions.removeGroup')}
+            onClick={() => removeConditionGroup(resourceType, resourceId, group.id)}
+          >
+            <RiDeleteBinLine className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      <div className="space-y-3">
+        {group.items.map((item) => {
+          const field = config.fieldOptions.find(option => option.id === item.fieldId)
+          const allowedOperators = getAllowedOperators(resourceType, item.fieldId)
+          const showValue = !!field && requiresConditionValue(item.operator)
+
+          return (
+            <div key={item.id} className="flex items-start overflow-hidden rounded-lg">
+              <div className="min-w-0 flex-1 rounded-lg bg-components-input-bg-normal">
+                <div className="flex items-center gap-0 pr-1">
+                  <div className="min-w-0 flex-1 py-1">
+                    <ConditionFieldSelect
+                      field={field}
+                      fieldOptions={config.fieldOptions}
+                      placeholder={t('conditions.fieldPlaceholder')}
+                      onChange={value => updateConditionField(resourceType, resourceId, group.id, item.id, value)}
+                    />
+                  </div>
+                  <div className="h-3 w-px bg-divider-regular" />
+                  <ConditionOperatorSelect
+                    field={field}
+                    operator={item.operator}
+                    operators={allowedOperators}
+                    onChange={value => updateConditionOperator(resourceType, resourceId, group.id, item.id, value)}
+                  />
+                </div>
+                {showValue && (
+                  <div className="border-t border-divider-subtle">
+                    <FieldValueInput
+                      field={field}
+                      operator={item.operator}
+                      value={item.value}
+                      onChange={value => updateConditionValue(resourceType, resourceId, group.id, item.id, value)}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="pl-1 pt-1">
+                <Button
+                  size="small"
+                  variant="ghost"
+                  aria-label={t('conditions.removeCondition')}
+                  onClick={() => removeConditionItem(resourceType, resourceId, group.id, item.id)}
+                >
+                  <RiCloseLine className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const BatchTestPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const tabLabels = {
+    'input-fields': t('batch.tabs.input-fields'),
+    'history': t('batch.tabs.history'),
+  }
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const isRunnable = isEvaluationRunnable(resource)
+
+  const handleDownloadTemplate = () => {
+    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = config.templateFileName
+    link.click()
+  }
+
+  const handleRun = () => {
+    if (!isRunnable) {
+      Toast.notify({
+        type: 'warning',
+        message: t('batch.validation'),
+      })
+      return
+    }
+
+    runBatchTest(resourceType, resourceId)
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-components-card-bg">
+      <div className="border-b border-divider-subtle p-5">
+        <div className="flex items-center gap-2 text-text-primary system-md-semibold">
+          <RiFlaskLine className="h-5 w-5" />
+          {t('batch.title')}
+        </div>
+        <div className="mt-2 rounded-xl border border-divider-subtle bg-background-default-subtle p-3">
+          <div className="text-text-primary system-sm-semibold">{t('batch.noticeTitle')}</div>
+          <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
+        </div>
+        <div className="mt-4 flex rounded-xl border border-divider-subtle bg-background-default-subtle p-1">
+          {(['input-fields', 'history'] as const).map(tab => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                TAB_CLASS_NAME,
+                resource.activeBatchTab === tab ? 'bg-components-card-bg text-text-primary shadow-xs' : 'text-text-tertiary',
+              )}
+              onClick={() => setBatchTab(resourceType, resourceId, tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto p-5">
+        {resource.activeBatchTab === 'input-fields' && (
+          <div className="space-y-5">
+            <div>
+              <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('batch.requirementsTitle')}</div>
+              <div className="space-y-2">
+                {config.batchRequirements.map(requirement => (
+                  <div key={requirement} className="flex gap-2 text-text-tertiary system-sm-regular">
+                    <span className="mt-1 h-1.5 w-1.5 rounded-full bg-text-quaternary" />
+                    <span>{requirement}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="space-y-3">
+              <Button variant="secondary" className="w-full justify-center" onClick={handleDownloadTemplate}>
+                <RiDownloadLine className="mr-1 h-4 w-4" />
+                {t('batch.downloadTemplate')}
+              </Button>
+              <input
+                ref={fileInputRef}
+                hidden
+                type="file"
+                accept=".csv,.xlsx"
+                onChange={(event) => {
+                  const file = event.target.files?.[0]
+                  setUploadedFileName(resourceType, resourceId, file?.name ?? null)
+                }}
+              />
+              <button
+                type="button"
+                className="flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <RiFileUploadLine className="h-5 w-5 text-text-tertiary" />
+                <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
+                <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
+              </button>
+            </div>
+            {!isRunnable && (
+              <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
+                {t('batch.validation')}
+              </div>
+            )}
+            <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
+              {t('batch.run')}
+            </Button>
+          </div>
+        )}
+        {resource.activeBatchTab === 'history' && (
+          <div className="space-y-3">
+            {resource.batchRecords.length === 0 && (
+              <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary system-sm-regular">
+                {t('batch.emptyHistory')}
+              </div>
+            )}
+            {resource.batchRecords.map(record => (
+              <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-text-primary system-sm-semibold">{record.summary}</div>
+                    <div className="mt-1 text-text-tertiary system-xs-regular">{record.fileName}</div>
+                  </div>
+                  <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
+                    {record.status === 'running'
+                      ? (
+                          <span className="flex items-center gap-1">
+                            <RiLoader4Line className="h-3 w-3 animate-spin" />
+                            {statusLabels.running}
+                          </span>
+                        )
+                      : statusLabels[record.status]}
+                  </Badge>
+                </div>
+                <div className="mt-3 text-text-tertiary system-xs-regular">{record.startedAt}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const Evaluation = ({
+  resourceType,
+  resourceId,
+}: EvaluationProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const ensureResource = useEvaluationStore(state => state.ensureResource)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const addConditionGroup = useEvaluationStore(state => state.addConditionGroup)
+
+  useEffect(() => {
+    ensureResource(resourceType, resourceId)
+  }, [ensureResource, resourceId, resourceType])
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-body xl:flex-row">
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 xl:px-8">
+        <div className="mx-auto max-w-5xl space-y-6">
+          <SectionHeader title={t('title')} description={t('description')} />
+          <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
+            <SectionHeader title={t('judgeModel.title')} description={t('judgeModel.description')} />
+            <div className="mt-4 max-w-[360px]">
+              <JudgeModelSelector resourceType={resourceType} resourceId={resourceId} />
+            </div>
+          </section>
+
+          <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
+            <SectionHeader
+              title={t('metrics.title')}
+              description={t('metrics.description')}
+              action={<MetricSelector resourceType={resourceType} resourceId={resourceId} />}
+            />
+            <div className="mt-4 space-y-3">
+              {resource.metrics.map(metric => (
+                <div key={metric.id} className="rounded-2xl border border-divider-subtle p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <div className="text-text-primary system-sm-semibold">{metric.label}</div>
+                      <div className="mt-1 text-text-tertiary system-xs-regular">{metric.description}</div>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {metric.badges.map(badge => (
+                          <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <Button
+                      size="small"
+                      variant="ghost"
+                      aria-label={t('metrics.remove')}
+                      onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+                    >
+                      <RiDeleteBinLine className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  {metric.kind === 'custom-workflow' && (
+                    <CustomMetricEditor
+                      resourceType={resourceType}
+                      resourceId={resourceId}
+                      metric={metric}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
+            <SectionHeader
+              title={t('conditions.title')}
+              description={t('conditions.description')}
+              action={(
+                <Button variant="secondary" onClick={() => addConditionGroup(resourceType, resourceId)}>
+                  <RiAddLine className="mr-1 h-4 w-4" />
+                  {t('conditions.addGroup')}
+                </Button>
+              )}
+            />
+            <div className="mt-4 space-y-4">
+              {resource.conditions.length === 0 && (
+                <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center">
+                  <div className="text-text-primary system-sm-semibold">{t('conditions.emptyTitle')}</div>
+                  <div className="mt-1 text-text-tertiary system-sm-regular">{t('conditions.emptyDescription')}</div>
+                </div>
+              )}
+              {resource.conditions.map((group, index) => (
+                <ConditionGroup
+                  key={group.id}
+                  resourceType={resourceType}
+                  resourceId={resourceId}
+                  group={group}
+                  index={index}
+                />
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+
+      <div className="h-[420px] shrink-0 xl:h-auto xl:w-[360px]">
+        <BatchTestPanel resourceType={resourceType} resourceId={resourceId} />
+      </div>
+    </div>
+  )
+}
+
+export default Evaluation
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
new file mode 100644
index 0000000000..598e5ee675
--- /dev/null
+++ b/web/app/components/evaluation/mock.ts
@@ -0,0 +1,184 @@
+import type {
+  ComparisonOperator,
+  EvaluationFieldOption,
+  EvaluationMockConfig,
+  EvaluationResourceType,
+  MetricOption,
+} from './types'
+
+const judgeModels = [
+  {
+    id: 'gpt-4.1-mini',
+    label: 'GPT-4.1 mini',
+    provider: 'OpenAI',
+  },
+  {
+    id: 'claude-3-7-sonnet',
+    label: 'Claude 3.7 Sonnet',
+    provider: 'Anthropic',
+  },
+  {
+    id: 'gemini-2.0-flash',
+    label: 'Gemini 2.0 Flash',
+    provider: 'Google',
+  },
+]
+
+const builtinMetrics: MetricOption[] = [
+  {
+    id: 'answer-correctness',
+    label: 'Answer Correctness',
+    description: 'Compares the response with the expected answer and scores factual alignment.',
+    group: 'quality',
+    badges: ['LLM', 'Built-in'],
+  },
+  {
+    id: 'faithfulness',
+    label: 'Faithfulness',
+    description: 'Checks whether the answer stays grounded in the retrieved evidence.',
+    group: 'quality',
+    badges: ['LLM', 'Retrieval'],
+  },
+  {
+    id: 'relevance',
+    label: 'Relevance',
+    description: 'Evaluates how directly the answer addresses the original request.',
+    group: 'quality',
+    badges: ['LLM'],
+  },
+  {
+    id: 'latency',
+    label: 'Latency',
+    description: 'Captures runtime responsiveness for the full execution path.',
+    group: 'operations',
+    badges: ['System'],
+  },
+  {
+    id: 'token-usage',
+    label: 'Token Usage',
+    description: 'Tracks prompt and completion token consumption for the run.',
+    group: 'operations',
+    badges: ['System'],
+  },
+  {
+    id: 'tool-success-rate',
+    label: 'Tool Success Rate',
+    description: 'Measures whether each required tool invocation finishes without failure.',
+    group: 'operations',
+    badges: ['Workflow'],
+  },
+]
+
+const workflowOptions = [
+  {
+    id: 'workflow-precision-review',
+    label: 'Precision Review Workflow',
+    description: 'Custom evaluator for nuanced quality review.',
+    targetVariables: [
+      { id: 'query', label: 'query' },
+      { id: 'answer', label: 'answer' },
+      { id: 'reference', label: 'reference' },
+    ],
+  },
+  {
+    id: 'workflow-risk-review',
+    label: 'Risk Review Workflow',
+    description: 'Custom evaluator for policy and escalation checks.',
+    targetVariables: [
+      { id: 'input', label: 'input' },
+      { id: 'output', label: 'output' },
+    ],
+  },
+]
+
+const workflowFields: EvaluationFieldOption[] = [
+  { id: 'app.input.query', label: 'Query', group: 'App Input', type: 'string' },
+  { id: 'app.input.locale', label: 'Locale', group: 'App Input', type: 'enum', options: [{ value: 'en-US', label: 'en-US' }, { value: 'zh-Hans', label: 'zh-Hans' }] },
+  { id: 'app.output.answer', label: 'Answer', group: 'App Output', type: 'string' },
+  { id: 'app.output.score', label: 'Score', group: 'App Output', type: 'number' },
+  { id: 'app.output.published_at', label: 'Publication Date', group: 'App Output', type: 'time' },
+  { id: 'system.has_context', label: 'Has Context', group: 'System', type: 'boolean' },
+]
+
+const pipelineFields: EvaluationFieldOption[] = [
+  { id: 'dataset.input.document_id', label: 'Document ID', group: 'Dataset', type: 'string' },
+  { id: 'dataset.input.chunk_count', label: 'Chunk Count', group: 'Dataset', type: 'number' },
+  { id: 'dataset.input.updated_at', label: 'Updated At', group: 'Dataset', type: 'time' },
+  { id: 'retrieval.output.hit_rate', label: 'Hit Rate', group: 'Retrieval', type: 'number' },
+  { id: 'retrieval.output.source', label: 'Source', group: 'Retrieval', type: 'enum', options: [{ value: 'bm25', label: 'BM25' }, { value: 'hybrid', label: 'Hybrid' }] },
+  { id: 'pipeline.output.published', label: 'Published', group: 'Output', type: 'boolean' },
+]
+
+const snippetFields: EvaluationFieldOption[] = [
+  { id: 'snippet.input.blog_url', label: 'Blog URL', group: 'Snippet Input', type: 'string' },
+  { id: 'snippet.input.platforms', label: 'Platforms', group: 'Snippet Input', type: 'string' },
+  { id: 'snippet.output.content', label: 'Generated Content', group: 'Snippet Output', type: 'string' },
+  { id: 'snippet.output.length', label: 'Output Length', group: 'Snippet Output', type: 'number' },
+  { id: 'snippet.output.scheduled_at', label: 'Scheduled At', group: 'Snippet Output', type: 'time' },
+  { id: 'system.requires_review', label: 'Requires Review', group: 'System', type: 'boolean' },
+]
+
+export const getComparisonOperators = (fieldType: EvaluationFieldOption['type']): ComparisonOperator[] => {
+  if (fieldType === 'number')
+    return ['is', 'is_not', 'greater_than', 'less_than', 'greater_or_equal', 'less_or_equal', 'is_empty', 'is_not_empty']
+
+  if (fieldType === 'time')
+    return ['is', 'before', 'after', 'is_empty', 'is_not_empty']
+
+  if (fieldType === 'boolean' || fieldType === 'enum')
+    return ['is', 'is_not']
+
+  return ['contains', 'not_contains', 'is', 'is_not', 'is_empty', 'is_not_empty']
+}
+
+export const getDefaultOperator = (fieldType: EvaluationFieldOption['type']): ComparisonOperator => {
+  return getComparisonOperators(fieldType)[0]
+}
+
+export const getEvaluationMockConfig = (resourceType: EvaluationResourceType): EvaluationMockConfig => {
+  if (resourceType === 'pipeline') {
+    return {
+      judgeModels,
+      builtinMetrics,
+      workflowOptions,
+      fieldOptions: pipelineFields,
+      templateFileName: 'pipeline-evaluation-template.csv',
+      batchRequirements: [
+        'Include one row per retrieval scenario.',
+        'Provide the expected source or target chunk for each case.',
+        'Keep numeric metrics in plain number format.',
+      ],
+      historySummaryLabel: 'Pipeline evaluation batch',
+    }
+  }
+
+  if (resourceType === 'snippet') {
+    return {
+      judgeModels,
+      builtinMetrics,
+      workflowOptions,
+      fieldOptions: snippetFields,
+      templateFileName: 'snippet-evaluation-template.csv',
+      batchRequirements: [
+        'Include one row per snippet execution case.',
+        'Provide the expected final content or acceptance rule.',
+        'Keep optional fields empty when not used.',
+      ],
+      historySummaryLabel: 'Snippet evaluation batch',
+    }
+  }
+
+  return {
+    judgeModels,
+    builtinMetrics,
+    workflowOptions,
+    fieldOptions: workflowFields,
+    templateFileName: 'workflow-evaluation-template.csv',
+    batchRequirements: [
+      'Include one row per workflow test case.',
+      'Provide both user input and expected answer when available.',
+      'Keep boolean columns as true or false.',
+    ],
+    historySummaryLabel: 'Workflow evaluation batch',
+  }
+}
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
new file mode 100644
index 0000000000..59b2b6d907
--- /dev/null
+++ b/web/app/components/evaluation/store.ts
@@ -0,0 +1,635 @@
+import type {
+  BatchTestRecord,
+  ComparisonOperator,
+  EvaluationFieldOption,
+  EvaluationMetric,
+  EvaluationResourceState,
+  EvaluationResourceType,
+  JudgmentConditionGroup,
+} from './types'
+import { create } from 'zustand'
+import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
+
+type EvaluationStore = {
+  resources: Record<string, EvaluationResourceState>
+  ensureResource: (resourceType: EvaluationResourceType, resourceId: string) => void
+  setJudgeModel: (resourceType: EvaluationResourceType, resourceId: string, judgeModelId: string) => void
+  addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string) => void
+  addCustomMetric: (resourceType: EvaluationResourceType, resourceId: string) => void
+  removeMetric: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
+  setCustomMetricWorkflow: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, workflowId: string) => void
+  addCustomMetricMapping: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
+  updateCustomMetricMapping: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    mappingId: string,
+    patch: { sourceFieldId?: string | null, targetVariableId?: string | null },
+  ) => void
+  removeCustomMetricMapping: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, mappingId: string) => void
+  addConditionGroup: (resourceType: EvaluationResourceType, resourceId: string) => void
+  removeConditionGroup: (resourceType: EvaluationResourceType, resourceId: string, groupId: string) => void
+  setConditionGroupOperator: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, logicalOperator: 'and' | 'or') => void
+  addConditionItem: (resourceType: EvaluationResourceType, resourceId: string, groupId: string) => void
+  removeConditionItem: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, itemId: string) => void
+  updateConditionField: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, itemId: string, fieldId: string) => void
+  updateConditionOperator: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, itemId: string, operator: ComparisonOperator) => void
+  updateConditionValue: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    groupId: string,
+    itemId: string,
+    value: string | number | boolean | null,
+  ) => void
+  setBatchTab: (resourceType: EvaluationResourceType, resourceId: string, tab: EvaluationResourceState['activeBatchTab']) => void
+  setUploadedFileName: (resourceType: EvaluationResourceType, resourceId: string, uploadedFileName: string | null) => void
+  runBatchTest: (resourceType: EvaluationResourceType, resourceId: string) => void
+}
+
+const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
+const initialResourceCache: Record<string, EvaluationResourceState> = {}
+
+const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+
+export const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
+
+export const requiresConditionValue = (operator: ComparisonOperator) => !conditionOperatorsWithoutValue.includes(operator)
+
+const getConditionValue = (
+  field: EvaluationFieldOption | undefined,
+  operator: ComparisonOperator,
+  previousValue: string | number | boolean | null = null,
+) => {
+  if (!field || !requiresConditionValue(operator))
+    return null
+
+  if (field.type === 'boolean')
+    return typeof previousValue === 'boolean' ? previousValue : null
+
+  if (field.type === 'enum')
+    return typeof previousValue === 'string' ? previousValue : null
+
+  if (field.type === 'number')
+    return typeof previousValue === 'number' ? previousValue : null
+
+  return typeof previousValue === 'string' ? previousValue : null
+}
+
+const buildConditionItem = (resourceType: EvaluationResourceType) => {
+  const field = getEvaluationMockConfig(resourceType).fieldOptions[0]
+  const operator = field ? getDefaultOperator(field.type) : 'contains'
+
+  return {
+    id: createId('condition'),
+    fieldId: field?.id ?? null,
+    operator,
+    value: getConditionValue(field, operator),
+  }
+}
+
+const buildInitialState = (resourceType: EvaluationResourceType): EvaluationResourceState => {
+  const config = getEvaluationMockConfig(resourceType)
+  const defaultMetric = config.builtinMetrics[0]
+
+  return {
+    judgeModelId: null,
+    metrics: defaultMetric
+      ? [{
+          id: createId('metric'),
+          optionId: defaultMetric.id,
+          kind: 'builtin',
+          label: defaultMetric.label,
+          description: defaultMetric.description,
+          badges: defaultMetric.badges,
+        }]
+      : [],
+    conditions: [{
+      id: createId('group'),
+      logicalOperator: 'and',
+      items: [buildConditionItem(resourceType)],
+    }],
+    activeBatchTab: 'input-fields',
+    uploadedFileName: null,
+    batchRecords: [],
+  }
+}
+
+const withResourceState = (
+  resources: EvaluationStore['resources'],
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  const resourceKey = buildResourceKey(resourceType, resourceId)
+
+  return {
+    resourceKey,
+    resource: resources[resourceKey] ?? buildInitialState(resourceType),
+  }
+}
+
+const updateMetric = (
+  metrics: EvaluationMetric[],
+  metricId: string,
+  updater: (metric: EvaluationMetric) => EvaluationMetric,
+) => metrics.map(metric => metric.id === metricId ? updater(metric) : metric)
+
+const updateConditionGroup = (
+  groups: JudgmentConditionGroup[],
+  groupId: string,
+  updater: (group: JudgmentConditionGroup) => JudgmentConditionGroup,
+) => groups.map(group => group.id === groupId ? updater(group) : group)
+
+export const isCustomMetricConfigured = (metric: EvaluationMetric) => {
+  if (metric.kind !== 'custom-workflow')
+    return true
+
+  if (!metric.customConfig?.workflowId)
+    return false
+
+  return metric.customConfig.mappings.length > 0
+    && metric.customConfig.mappings.every(mapping => !!mapping.sourceFieldId && !!mapping.targetVariableId)
+}
+
+export const isEvaluationRunnable = (state: EvaluationResourceState) => {
+  return !!state.judgeModelId
+    && state.metrics.length > 0
+    && state.metrics.every(isCustomMetricConfigured)
+    && state.conditions.some(group => group.items.length > 0)
+}
+
+export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
+  resources: {},
+  ensureResource: (resourceType, resourceId) => {
+    const resourceKey = buildResourceKey(resourceType, resourceId)
+    if (get().resources[resourceKey])
+      return
+
+    set(state => ({
+      resources: {
+        ...state.resources,
+        [resourceKey]: buildInitialState(resourceType),
+      },
+    }))
+  },
+  setJudgeModel: (resourceType, resourceId, judgeModelId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            judgeModelId,
+          },
+        },
+      }
+    })
+  },
+  addBuiltinMetric: (resourceType, resourceId, optionId) => {
+    const option = getEvaluationMockConfig(resourceType).builtinMetrics.find(metric => metric.id === optionId)
+    if (!option)
+      return
+
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      if (resource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin'))
+        return state
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: [
+              ...resource.metrics,
+              {
+                id: createId('metric'),
+                optionId: option.id,
+                kind: 'builtin',
+                label: option.label,
+                description: option.description,
+                badges: option.badges,
+              },
+            ],
+          },
+        },
+      }
+    })
+  },
+  addCustomMetric: (resourceType, resourceId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: [
+              ...resource.metrics,
+              {
+                id: createId('metric'),
+                optionId: createId('custom'),
+                kind: 'custom-workflow',
+                label: 'Custom Evaluator',
+                description: 'Map workflow variables to your evaluation inputs.',
+                badges: ['Workflow'],
+                customConfig: {
+                  workflowId: null,
+                  mappings: [{
+                    id: createId('mapping'),
+                    sourceFieldId: null,
+                    targetVariableId: null,
+                  }],
+                },
+              },
+            ],
+          },
+        },
+      }
+    })
+  },
+  removeMetric: (resourceType, resourceId, metricId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: resource.metrics.filter(metric => metric.id !== metricId),
+          },
+        },
+      }
+    })
+  },
+  setCustomMetricWorkflow: (resourceType, resourceId, metricId, workflowId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: updateMetric(resource.metrics, metricId, metric => ({
+              ...metric,
+              customConfig: metric.customConfig
+                ? {
+                    ...metric.customConfig,
+                    workflowId,
+                    mappings: metric.customConfig.mappings.map(mapping => ({
+                      ...mapping,
+                      targetVariableId: null,
+                    })),
+                  }
+                : metric.customConfig,
+            })),
+          },
+        },
+      }
+    })
+  },
+  addCustomMetricMapping: (resourceType, resourceId, metricId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: updateMetric(resource.metrics, metricId, metric => ({
+              ...metric,
+              customConfig: metric.customConfig
+                ? {
+                    ...metric.customConfig,
+                    mappings: [
+                      ...metric.customConfig.mappings,
+                      {
+                        id: createId('mapping'),
+                        sourceFieldId: null,
+                        targetVariableId: null,
+                      },
+                    ],
+                  }
+                : metric.customConfig,
+            })),
+          },
+        },
+      }
+    })
+  },
+  updateCustomMetricMapping: (resourceType, resourceId, metricId, mappingId, patch) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: updateMetric(resource.metrics, metricId, metric => ({
+              ...metric,
+              customConfig: metric.customConfig
+                ? {
+                    ...metric.customConfig,
+                    mappings: metric.customConfig.mappings.map(mapping => mapping.id === mappingId ? { ...mapping, ...patch } : mapping),
+                  }
+                : metric.customConfig,
+            })),
+          },
+        },
+      }
+    })
+  },
+  removeCustomMetricMapping: (resourceType, resourceId, metricId, mappingId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            metrics: updateMetric(resource.metrics, metricId, metric => ({
+              ...metric,
+              customConfig: metric.customConfig
+                ? {
+                    ...metric.customConfig,
+                    mappings: metric.customConfig.mappings.filter(mapping => mapping.id !== mappingId),
+                  }
+                : metric.customConfig,
+            })),
+          },
+        },
+      }
+    })
+  },
+  addConditionGroup: (resourceType, resourceId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: [
+              ...resource.conditions,
+              {
+                id: createId('group'),
+                logicalOperator: 'and',
+                items: [buildConditionItem(resourceType)],
+              },
+            ],
+          },
+        },
+      }
+    })
+  },
+  removeConditionGroup: (resourceType, resourceId, groupId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: resource.conditions.filter(group => group.id !== groupId),
+          },
+        },
+      }
+    })
+  },
+  setConditionGroupOperator: (resourceType, resourceId, groupId, logicalOperator) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+              ...group,
+              logicalOperator,
+            })),
+          },
+        },
+      }
+    })
+  },
+  addConditionItem: (resourceType, resourceId, groupId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+              ...group,
+              items: [
+                ...group.items,
+                buildConditionItem(resourceType),
+              ],
+            })),
+          },
+        },
+      }
+    })
+  },
+  removeConditionItem: (resourceType, resourceId, groupId, itemId) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+              ...group,
+              items: group.items.filter(item => item.id !== itemId),
+            })),
+          },
+        },
+      }
+    })
+  },
+  updateConditionField: (resourceType, resourceId, groupId, itemId, fieldId) => {
+    const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
+
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+              ...group,
+              items: group.items.map((item) => {
+                if (item.id !== itemId)
+                  return item
+
+                return {
+                  ...item,
+                  fieldId,
+                  operator: field ? getDefaultOperator(field.type) : item.operator,
+                  value: getConditionValue(field, field ? getDefaultOperator(field.type) : item.operator),
+                }
+              }),
+            })),
+          },
+        },
+      }
+    })
+  },
+  updateConditionOperator: (resourceType, resourceId, groupId, itemId, operator) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+      const fieldOptions = getEvaluationMockConfig(resourceType).fieldOptions
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+              ...group,
+              items: group.items.map((item) => {
+                if (item.id !== itemId)
+                  return item
+
+                const field = fieldOptions.find(option => option.id === item.fieldId)
+
+                return {
+                  ...item,
+                  operator,
+                  value: getConditionValue(field, operator, item.value),
+                }
+              }),
+            })),
+          },
+        },
+      }
+    })
+  },
+  updateConditionValue: (resourceType, resourceId, groupId, itemId, value) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+              ...group,
+              items: group.items.map(item => item.id === itemId ? { ...item, value } : item),
+            })),
+          },
+        },
+      }
+    })
+  },
+  setBatchTab: (resourceType, resourceId, tab) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            activeBatchTab: tab,
+          },
+        },
+      }
+    })
+  },
+  setUploadedFileName: (resourceType, resourceId, uploadedFileName) => {
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            uploadedFileName,
+          },
+        },
+      }
+    })
+  },
+  runBatchTest: (resourceType, resourceId) => {
+    const config = getEvaluationMockConfig(resourceType)
+    const recordId = createId('batch')
+    const nextRecord: BatchTestRecord = {
+      id: recordId,
+      fileName: get().resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileName ?? config.templateFileName,
+      status: 'running',
+      startedAt: new Date().toLocaleTimeString(),
+      summary: config.historySummaryLabel,
+    }
+
+    set((state) => {
+      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+      return {
+        resources: {
+          ...state.resources,
+          [resourceKey]: {
+            ...resource,
+            activeBatchTab: 'history',
+            batchRecords: [nextRecord, ...resource.batchRecords],
+          },
+        },
+      }
+    })
+
+    window.setTimeout(() => {
+      set((state) => {
+        const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+
+        return {
+          resources: {
+            ...state.resources,
+            [resourceKey]: {
+              ...resource,
+              batchRecords: resource.batchRecords.map(record => record.id === recordId
+                ? {
+                    ...record,
+                    status: resource.metrics.length > 1 ? 'success' : 'failed',
+                  }
+                : record),
+            },
+          },
+        }
+      })
+    }, 1200)
+  },
+}))
+
+export const useEvaluationResource = (resourceType: EvaluationResourceType, resourceId: string) => {
+  const resourceKey = buildResourceKey(resourceType, resourceId)
+  return useEvaluationStore(state => state.resources[resourceKey] ?? (initialResourceCache[resourceKey] ??= buildInitialState(resourceType)))
+}
+
+export const getAllowedOperators = (resourceType: EvaluationResourceType, fieldId: string | null) => {
+  const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
+
+  if (!field)
+    return ['contains'] as ComparisonOperator[]
+
+  return getComparisonOperators(field.type)
+}
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
new file mode 100644
index 0000000000..9b9cfda31c
--- /dev/null
+++ b/web/app/components/evaluation/types.ts
@@ -0,0 +1,117 @@
+export type EvaluationResourceType = 'workflow' | 'pipeline' | 'snippet'
+
+export type MetricKind = 'builtin' | 'custom-workflow'
+
+export type BatchTestTab = 'input-fields' | 'history'
+
+export type FieldType = 'string' | 'number' | 'boolean' | 'enum' | 'time'
+
+export type ComparisonOperator
+  = | 'contains'
+    | 'not_contains'
+    | 'is'
+    | 'is_not'
+    | 'is_empty'
+    | 'is_not_empty'
+    | 'greater_than'
+    | 'less_than'
+    | 'greater_or_equal'
+    | 'less_or_equal'
+    | 'before'
+    | 'after'
+
+export type JudgeModelOption = {
+  id: string
+  label: string
+  provider: string
+}
+
+export type MetricOption = {
+  id: string
+  label: string
+  description: string
+  group: string
+  badges: string[]
+}
+
+export type EvaluationWorkflowOption = {
+  id: string
+  label: string
+  description: string
+  targetVariables: Array<{
+    id: string
+    label: string
+  }>
+}
+
+export type EvaluationFieldOption = {
+  id: string
+  label: string
+  group: string
+  type: FieldType
+  options?: Array<{
+    value: string
+    label: string
+  }>
+}
+
+export type CustomMetricMapping = {
+  id: string
+  sourceFieldId: string | null
+  targetVariableId: string | null
+}
+
+export type CustomMetricConfig = {
+  workflowId: string | null
+  mappings: CustomMetricMapping[]
+}
+
+export type EvaluationMetric = {
+  id: string
+  optionId: string
+  kind: MetricKind
+  label: string
+  description: string
+  badges: string[]
+  customConfig?: CustomMetricConfig
+}
+
+export type JudgmentConditionItem = {
+  id: string
+  fieldId: string | null
+  operator: ComparisonOperator
+  value: string | number | boolean | null
+}
+
+export type JudgmentConditionGroup = {
+  id: string
+  logicalOperator: 'and' | 'or'
+  items: JudgmentConditionItem[]
+}
+
+export type BatchTestRecord = {
+  id: string
+  fileName: string
+  status: 'running' | 'success' | 'failed'
+  startedAt: string
+  summary: string
+}
+
+export type EvaluationResourceState = {
+  judgeModelId: string | null
+  metrics: EvaluationMetric[]
+  conditions: JudgmentConditionGroup[]
+  activeBatchTab: BatchTestTab
+  uploadedFileName: string | null
+  batchRecords: BatchTestRecord[]
+}
+
+export type EvaluationMockConfig = {
+  judgeModels: JudgeModelOption[]
+  builtinMetrics: MetricOption[]
+  workflowOptions: EvaluationWorkflowOption[]
+  fieldOptions: EvaluationFieldOption[]
+  templateFileName: string
+  batchRequirements: string[]
+  historySummaryLabel: string
+}
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index fd9bd14373..d1f936a0c5 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -2,7 +2,7 @@
 
 import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
 import type { WorkflowProps } from '@/app/components/workflow'
-import type { SnippetDetailPayload, SnippetInputField } from '@/models/snippet'
+import type { SnippetDetailPayload, SnippetInputField, SnippetSection } from '@/models/snippet'
 import {
   RiFlaskFill,
   RiFlaskLine,
@@ -17,6 +17,7 @@ import NavLink from '@/app/components/app-sidebar/nav-link'
 import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Toast from '@/app/components/base/toast'
+import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useSnippetDetailStore } from '../store'
@@ -25,6 +26,7 @@ import SnippetChildren from './snippet-children'
 type SnippetMainProps = {
   payload: SnippetDetailPayload
   snippetId: string
+  section: SnippetSection
 } & Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
 
 const ORCHESTRATE_ICONS: { normal: NavIcon, selected: NavIcon } = {
@@ -40,6 +42,7 @@ const EVALUATION_ICONS: { normal: NavIcon, selected: NavIcon } = {
 const SnippetMain = ({
   payload,
   snippetId,
+  section,
   nodes,
   edges,
   viewport,
@@ -51,7 +54,6 @@ const SnippetMain = ({
   const [fields, setFields] = useState<SnippetInputField[]>(payload.inputFields)
   const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
   const {
-    activeSection,
     editingField,
     isEditorOpen,
     isInputPanelOpen,
@@ -59,12 +61,10 @@ const SnippetMain = ({
     closeEditor,
     openEditor,
     reset,
-    setActiveSection,
     setInputPanelOpen,
     toggleInputPanel,
     togglePublishMenu,
   } = useSnippetDetailStore(useShallow(state => ({
-    activeSection: state.activeSection,
     editingField: state.editingField,
     isEditorOpen: state.isEditorOpen,
     isInputPanelOpen: state.isInputPanelOpen,
@@ -72,7 +72,6 @@ const SnippetMain = ({
     closeEditor: state.closeEditor,
     openEditor: state.openEditor,
     reset: state.reset,
-    setActiveSection: state.setActiveSection,
     setInputPanelOpen: state.setInputPanelOpen,
     toggleInputPanel: state.toggleInputPanel,
     togglePublishMenu: state.togglePublishMenu,
@@ -145,15 +144,15 @@ const SnippetMain = ({
               mode={mode}
               name={t('sectionOrchestrate')}
               iconMap={ORCHESTRATE_ICONS}
-              active={activeSection === 'orchestrate'}
-              onClick={() => setActiveSection('orchestrate')}
+              href={`/snippets/${snippetId}/orchestrate`}
+              active={section === 'orchestrate'}
             />
             <NavLink
               mode={mode}
               name={t('sectionEvaluation')}
               iconMap={EVALUATION_ICONS}
-              active={activeSection === 'evaluation'}
-              onClick={() => setActiveSection('evaluation')}
+              href={`/snippets/${snippetId}/evaluation`}
+              active={section === 'evaluation'}
             />
           </>
         )}
@@ -161,29 +160,35 @@ const SnippetMain = ({
 
       <div className="relative min-h-0 min-w-0 grow overflow-hidden">
         <div className="absolute inset-0 min-h-0 min-w-0 overflow-hidden">
-          <WorkflowWithInnerContext
-            nodes={nodes}
-            edges={edges}
-            viewport={viewport ?? graph.viewport}
-          >
-            <SnippetChildren
-              fields={fields}
-              uiMeta={uiMeta}
-              editingField={editingField}
-              isEditorOpen={isEditorOpen}
-              isInputPanelOpen={isInputPanelOpen}
-              isPublishMenuOpen={isPublishMenuOpen}
-              onToggleInputPanel={handleToggleInputPanel}
-              onTogglePublishMenu={togglePublishMenu}
-              onCloseInputPanel={handleCloseInputPanel}
-              onOpenEditor={openEditor}
-              onCloseEditor={closeEditor}
-              onSubmitField={handleSubmitField}
-              onRemoveField={handleRemoveField}
-              onPrimarySortChange={handlePrimarySortChange}
-              onSecondarySortChange={handleSecondarySortChange}
-            />
-          </WorkflowWithInnerContext>
+          {section === 'evaluation'
+            ? (
+                <Evaluation resourceType="snippet" resourceId={snippetId} />
+              )
+            : (
+                <WorkflowWithInnerContext
+                  nodes={nodes}
+                  edges={edges}
+                  viewport={viewport ?? graph.viewport}
+                >
+                  <SnippetChildren
+                    fields={fields}
+                    uiMeta={uiMeta}
+                    editingField={editingField}
+                    isEditorOpen={isEditorOpen}
+                    isInputPanelOpen={isInputPanelOpen}
+                    isPublishMenuOpen={isPublishMenuOpen}
+                    onToggleInputPanel={handleToggleInputPanel}
+                    onTogglePublishMenu={togglePublishMenu}
+                    onCloseInputPanel={handleCloseInputPanel}
+                    onOpenEditor={openEditor}
+                    onCloseEditor={closeEditor}
+                    onSubmitField={handleSubmitField}
+                    onRemoveField={handleRemoveField}
+                    onPrimarySortChange={handlePrimarySortChange}
+                    onSecondarySortChange={handleSecondarySortChange}
+                  />
+                </WorkflowWithInnerContext>
+              )}
         </div>
       </div>
     </div>
diff --git a/web/app/components/snippets/index.tsx b/web/app/components/snippets/index.tsx
index 690a8d6376..63392a24b5 100644
--- a/web/app/components/snippets/index.tsx
+++ b/web/app/components/snippets/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import type { SnippetSection } from '@/models/snippet'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
@@ -14,10 +15,12 @@ import { useSnippetInit } from './hooks/use-snippet-init'
 
 type SnippetPageProps = {
   snippetId: string
+  section?: SnippetSection
 }
 
 const SnippetPage = ({
   snippetId,
+  section = 'orchestrate',
 }: SnippetPageProps) => {
   const { t } = useTranslation('snippet')
   const { data, isLoading } = useSnippetInit(snippetId)
@@ -62,6 +65,7 @@ const SnippetPage = ({
       <SnippetMain
         key={snippetId}
         snippetId={snippetId}
+        section={section}
         payload={data}
         nodes={nodesData}
         edges={edgesData}
diff --git a/web/i18n-config/resources.ts b/web/i18n-config/resources.ts
index 6cca6e97cb..3e537dc8d2 100644
--- a/web/i18n-config/resources.ts
+++ b/web/i18n-config/resources.ts
@@ -14,6 +14,7 @@ import type datasetPipeline from '../i18n/en-US/dataset-pipeline.json'
 import type datasetSettings from '../i18n/en-US/dataset-settings.json'
 import type dataset from '../i18n/en-US/dataset.json'
 import type education from '../i18n/en-US/education.json'
+import type evaluation from '../i18n/en-US/evaluation.json'
 import type explore from '../i18n/en-US/explore.json'
 import type layout from '../i18n/en-US/layout.json'
 import type login from '../i18n/en-US/login.json'
@@ -48,6 +49,7 @@ export type Resources = {
   datasetPipeline: typeof datasetPipeline
   datasetSettings: typeof datasetSettings
   education: typeof education
+  evaluation: typeof evaluation
   explore: typeof explore
   layout: typeof layout
   login: typeof login
@@ -82,6 +84,7 @@ export const namespaces = [
   'datasetPipeline',
   'datasetSettings',
   'education',
+  'evaluation',
   'explore',
   'layout',
   'login',
diff --git a/web/i18n/en-US/common.json b/web/i18n/en-US/common.json
index 9170472642..adc6900c33 100644
--- a/web/i18n/en-US/common.json
+++ b/web/i18n/en-US/common.json
@@ -93,6 +93,7 @@
   "apiBasedExtension.type": "Type",
   "appMenus.apiAccess": "API Access",
   "appMenus.apiAccessTip": "This knowledge base is accessible via the Service API",
+  "appMenus.evaluation": "Evaluation",
   "appMenus.logAndAnn": "Logs & Annotations",
   "appMenus.logs": "Logs",
   "appMenus.overview": "Monitoring",
@@ -149,6 +150,7 @@
   "dataSource.website.with": "With",
   "datasetMenus.documents": "Documents",
   "datasetMenus.emptyTip": "This Knowledge has not been integrated within any application. Please refer to the document for guidance.",
+  "datasetMenus.evaluation": "Evaluation",
   "datasetMenus.hitTesting": "Retrieval Testing",
   "datasetMenus.noRelatedApp": "No linked apps",
   "datasetMenus.pipeline": "Pipeline",
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
new file mode 100644
index 0000000000..1b0fb9dc10
--- /dev/null
+++ b/web/i18n/en-US/evaluation.json
@@ -0,0 +1,73 @@
+{
+  "batch.downloadTemplate": "Download Excel Template",
+  "batch.emptyHistory": "No test history yet.",
+  "batch.noticeDescription": "Download the template, upload your cases, then run a local mock batch test.",
+  "batch.noticeTitle": "Quick start",
+  "batch.requirementsTitle": "Data requirements",
+  "batch.run": "Run Test",
+  "batch.status.failed": "Failed",
+  "batch.status.running": "Running",
+  "batch.status.success": "Success",
+  "batch.tabs.history": "Test History",
+  "batch.tabs.input-fields": "Input Fields",
+  "batch.title": "Batch Test",
+  "batch.uploadHint": "Select a .csv or .xlsx file",
+  "batch.uploadTitle": "Upload test file",
+  "batch.validation": "Complete the judge model, metrics, and custom mappings before running a batch test.",
+  "conditions.addCondition": "Add Condition",
+  "conditions.addGroup": "Add Condition Group",
+  "conditions.boolean.false": "False",
+  "conditions.boolean.true": "True",
+  "conditions.description": "Define additional rules for when results should pass or fail.",
+  "conditions.emptyDescription": "Start with a condition group to define evaluation gates.",
+  "conditions.emptyTitle": "No conditions yet",
+  "conditions.fieldPlaceholder": "Select field",
+  "conditions.groupLabel": "Group {{index}}",
+  "conditions.logical.and": "AND",
+  "conditions.logical.or": "OR",
+  "conditions.operators.after": "After",
+  "conditions.operators.before": "Before",
+  "conditions.operators.contains": "Contains",
+  "conditions.operators.greater_or_equal": "Greater than or equal",
+  "conditions.operators.greater_than": "Greater than",
+  "conditions.operators.is": "Is",
+  "conditions.operators.is_empty": "Is empty",
+  "conditions.operators.is_not": "Is not",
+  "conditions.operators.is_not_empty": "Is not empty",
+  "conditions.operators.less_or_equal": "Less than or equal",
+  "conditions.operators.less_than": "Less than",
+  "conditions.operators.not_contains": "Does not contain",
+  "conditions.removeCondition": "Remove condition",
+  "conditions.removeGroup": "Remove condition group",
+  "conditions.selectFieldFirst": "Select a field first",
+  "conditions.selectTime": "Choose a time...",
+  "conditions.selectValue": "Choose a value",
+  "conditions.title": "Judgment Conditions",
+  "conditions.valuePlaceholder": "Enter a value",
+  "description": "Configure judge models, metrics, and batch tests for this resource.",
+  "judgeModel.description": "Choose the model used to score your evaluation results.",
+  "judgeModel.title": "Judge Model",
+  "metrics.add": "Add Metric",
+  "metrics.addCustom": "Add Custom Metrics",
+  "metrics.added": "Added",
+  "metrics.custom.addMapping": "Add Mapping",
+  "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
+  "metrics.custom.mappingTitle": "Variable Mapping",
+  "metrics.custom.mappingWarning": "Complete the workflow selection and each variable mapping to enable batch tests.",
+  "metrics.custom.sourcePlaceholder": "Source variable",
+  "metrics.custom.targetPlaceholder": "Target variable",
+  "metrics.custom.title": "Custom Evaluator",
+  "metrics.custom.warningBadge": "Needs setup",
+  "metrics.custom.workflowLabel": "Evaluation Workflow",
+  "metrics.custom.workflowPlaceholder": "Select a workflow",
+  "metrics.description": "Combine built-in metrics with custom evaluator workflows.",
+  "metrics.groups.operations": "Operations",
+  "metrics.groups.quality": "Quality",
+  "metrics.noResults": "No metrics match your search.",
+  "metrics.remove": "Remove metric",
+  "metrics.searchPlaceholder": "Search metrics",
+  "metrics.showLess": "Show less",
+  "metrics.showMore": "Show more",
+  "metrics.title": "Metrics",
+  "title": "Evaluation"
+}
diff --git a/web/i18n/zh-Hans/common.json b/web/i18n/zh-Hans/common.json
index 8e521c2f20..8161d84472 100644
--- a/web/i18n/zh-Hans/common.json
+++ b/web/i18n/zh-Hans/common.json
@@ -93,6 +93,7 @@
   "apiBasedExtension.type": "类型",
   "appMenus.apiAccess": "访问 API",
   "appMenus.apiAccessTip": "此知识库可通过服务 API 访问",
+  "appMenus.evaluation": "评测",
   "appMenus.logAndAnn": "日志与标注",
   "appMenus.logs": "日志",
   "appMenus.overview": "监测",
@@ -149,6 +150,7 @@
   "dataSource.website.with": "使用",
   "datasetMenus.documents": "文档",
   "datasetMenus.emptyTip": "此知识尚未集成到任何应用程序中。请参阅文档以获取指导。",
+  "datasetMenus.evaluation": "评测",
   "datasetMenus.hitTesting": "召回测试",
   "datasetMenus.noRelatedApp": "无关联应用",
   "datasetMenus.pipeline": "流水线",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
new file mode 100644
index 0000000000..d62c0417d1
--- /dev/null
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -0,0 +1,73 @@
+{
+  "batch.downloadTemplate": "下载 Excel 模板",
+  "batch.emptyHistory": "还没有测试历史。",
+  "batch.noticeDescription": "先下载模板，再上传测试集，然后运行本地模拟批量测试。",
+  "batch.noticeTitle": "快速开始",
+  "batch.requirementsTitle": "数据要求",
+  "batch.run": "运行测试",
+  "batch.status.failed": "失败",
+  "batch.status.running": "运行中",
+  "batch.status.success": "成功",
+  "batch.tabs.history": "测试历史",
+  "batch.tabs.input-fields": "输入字段",
+  "batch.title": "批量测试",
+  "batch.uploadHint": "选择 .csv 或 .xlsx 文件",
+  "batch.uploadTitle": "上传测试文件",
+  "batch.validation": "运行批量测试前，请先完成判定模型、指标和自定义映射配置。",
+  "conditions.addCondition": "添加条件",
+  "conditions.addGroup": "添加条件组",
+  "conditions.boolean.false": "否",
+  "conditions.boolean.true": "是",
+  "conditions.description": "定义额外规则，决定结果何时通过或失败。",
+  "conditions.emptyDescription": "从一个条件组开始，定义评测门槛。",
+  "conditions.emptyTitle": "还没有条件",
+  "conditions.fieldPlaceholder": "选择字段",
+  "conditions.groupLabel": "条件组 {{index}}",
+  "conditions.logical.and": "且",
+  "conditions.logical.or": "或",
+  "conditions.operators.after": "晚于",
+  "conditions.operators.before": "早于",
+  "conditions.operators.contains": "包含",
+  "conditions.operators.greater_or_equal": "大于等于",
+  "conditions.operators.greater_than": "大于",
+  "conditions.operators.is": "等于",
+  "conditions.operators.is_empty": "为空",
+  "conditions.operators.is_not": "不等于",
+  "conditions.operators.is_not_empty": "不为空",
+  "conditions.operators.less_or_equal": "小于等于",
+  "conditions.operators.less_than": "小于",
+  "conditions.operators.not_contains": "不包含",
+  "conditions.removeCondition": "删除条件",
+  "conditions.removeGroup": "删除条件组",
+  "conditions.selectFieldFirst": "请先选择字段",
+  "conditions.selectTime": "选择时间...",
+  "conditions.selectValue": "选择值",
+  "conditions.title": "判定条件",
+  "conditions.valuePlaceholder": "输入值",
+  "description": "为当前资源配置判定模型、评测指标和批量测试。",
+  "judgeModel.description": "选择用于打分和判定评测结果的模型。",
+  "judgeModel.title": "判定模型",
+  "metrics.add": "添加指标",
+  "metrics.addCustom": "添加自定义指标",
+  "metrics.added": "已添加",
+  "metrics.custom.addMapping": "添加映射",
+  "metrics.custom.description": "选择评测工作流并完成变量映射后即可运行测试。",
+  "metrics.custom.mappingTitle": "变量映射",
+  "metrics.custom.mappingWarning": "请先完成工作流选择和所有变量映射，再运行批量测试。",
+  "metrics.custom.sourcePlaceholder": "源变量",
+  "metrics.custom.targetPlaceholder": "目标变量",
+  "metrics.custom.title": "自定义评测器",
+  "metrics.custom.warningBadge": "待配置",
+  "metrics.custom.workflowLabel": "评测工作流",
+  "metrics.custom.workflowPlaceholder": "选择工作流",
+  "metrics.description": "组合内置指标和自定义评测工作流。",
+  "metrics.groups.operations": "运行",
+  "metrics.groups.quality": "质量",
+  "metrics.noResults": "没有匹配的指标。",
+  "metrics.remove": "删除指标",
+  "metrics.searchPlaceholder": "搜索指标",
+  "metrics.showLess": "收起",
+  "metrics.showMore": "展开更多",
+  "metrics.title": "指标",
+  "title": "评测"
+}

From 9f28575903d6346c7e58d37e86ceaad61024ea4d Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 20 Mar 2026 15:11:33 +0800
Subject: [PATCH 006/108] feat(web): add snippets api

---
 web/app/components/apps/list.tsx |   2 +-
 web/contract/console/snippets.ts | 342 ++++++++++++++++++++++++
 web/contract/router.ts           |  54 ++++
 web/service/use-snippets.mock.ts | 215 +++++++++++++++
 web/service/use-snippets.ts      | 442 +++++++++++++++++--------------
 web/types/snippet.ts             | 146 ++++++++++
 6 files changed, 1008 insertions(+), 193 deletions(-)
 create mode 100644 web/contract/console/snippets.ts
 create mode 100644 web/service/use-snippets.mock.ts
 create mode 100644 web/types/snippet.ts

diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 409b0e60cf..68f4999197 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -18,7 +18,7 @@ import { CheckModal } from '@/hooks/use-pay'
 import dynamic from '@/next/dynamic'
 import Link from '@/next/link'
 import { useInfiniteAppList } from '@/service/use-apps'
-import { getSnippetListMock } from '@/service/use-snippets'
+import { getSnippetListMock } from '@/service/use-snippets.mock'
 import { cn } from '@/utils/classnames'
 import AppCard from './app-card'
 import { AppCardSkeleton } from './app-card-skeleton'
diff --git a/web/contract/console/snippets.ts b/web/contract/console/snippets.ts
new file mode 100644
index 0000000000..82a5838436
--- /dev/null
+++ b/web/contract/console/snippets.ts
@@ -0,0 +1,342 @@
+import type {
+  CreateSnippetPayload,
+  IncrementSnippetUseCountResponse,
+  PublishSnippetWorkflowResponse,
+  Snippet,
+  SnippetDraftConfig,
+  SnippetDraftNodeRunPayload,
+  SnippetDraftRunPayload,
+  SnippetDraftSyncPayload,
+  SnippetDraftSyncResponse,
+  SnippetImportPayload,
+  SnippetIterationNodeRunPayload,
+  SnippetListResponse,
+  SnippetLoopNodeRunPayload,
+  SnippetWorkflow,
+  UpdateSnippetPayload,
+  WorkflowNodeExecution,
+  WorkflowNodeExecutionListResponse,
+  WorkflowRunDetail,
+  WorkflowRunPagination,
+} from '@/types/snippet'
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export const listCustomizedSnippetsContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets',
+    method: 'GET',
+  })
+  .input(type<{
+    query: {
+      page: number
+      limit: number
+      keyword?: string
+      is_published?: boolean
+    }
+  }>())
+  .output(type<SnippetListResponse>())
+
+export const createCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets',
+    method: 'POST',
+  })
+  .input(type<{
+    body: CreateSnippetPayload
+  }>())
+  .output(type<Snippet>())
+
+export const getCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<Snippet>())
+
+export const updateCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}',
+    method: 'PATCH',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    body: UpdateSnippetPayload
+  }>())
+  .output(type<Snippet>())
+
+export const deleteCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}',
+    method: 'DELETE',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const exportCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}/export',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    query: {
+      include_secret?: 'true' | 'false'
+    }
+  }>())
+  .output(type<string>())
+
+export const importCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/imports',
+    method: 'POST',
+  })
+  .input(type<{
+    body: SnippetImportPayload
+  }>())
+  .output(type<unknown>())
+
+export const confirmSnippetImportContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/imports/{importId}/confirm',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      importId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const checkSnippetDependenciesContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}/check-dependencies',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const incrementSnippetUseCountContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}/use-count/increment',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<IncrementSnippetUseCountResponse>())
+
+export const getSnippetDraftWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<SnippetWorkflow>())
+
+export const syncSnippetDraftWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    body: SnippetDraftSyncPayload
+  }>())
+  .output(type<SnippetDraftSyncResponse>())
+
+export const getSnippetDraftConfigContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/config',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<SnippetDraftConfig>())
+
+export const getSnippetPublishedWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/publish',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<SnippetWorkflow>())
+
+export const publishSnippetWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/publish',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<PublishSnippetWorkflowResponse>())
+
+export const getSnippetDefaultBlockConfigsContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/default-workflow-block-configs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const listSnippetWorkflowRunsContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    query: {
+      last_id?: string
+      limit?: number
+    }
+  }>())
+  .output(type<WorkflowRunPagination>())
+
+export const getSnippetWorkflowRunDetailContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs/{runId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      runId: string
+    }
+  }>())
+  .output(type<WorkflowRunDetail>())
+
+export const listSnippetWorkflowRunNodeExecutionsContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs/{runId}/node-executions',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      runId: string
+    }
+  }>())
+  .output(type<WorkflowNodeExecutionListResponse>())
+
+export const runSnippetDraftNodeContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/nodes/{nodeId}/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+    body: SnippetDraftNodeRunPayload
+  }>())
+  .output(type<WorkflowNodeExecution>())
+
+export const getSnippetDraftNodeLastRunContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/nodes/{nodeId}/last-run',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+  }>())
+  .output(type<WorkflowNodeExecution>())
+
+export const runSnippetDraftIterationNodeContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/iteration/nodes/{nodeId}/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+    body: SnippetIterationNodeRunPayload
+  }>())
+  .output(type<unknown>())
+
+export const runSnippetDraftLoopNodeContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/loop/nodes/{nodeId}/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+    body: SnippetLoopNodeRunPayload
+  }>())
+  .output(type<unknown>())
+
+export const runSnippetDraftWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    body: SnippetDraftRunPayload
+  }>())
+  .output(type<unknown>())
+
+export const stopSnippetWorkflowTaskContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs/tasks/{taskId}/stop',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      taskId: string
+    }
+  }>())
+  .output(type<unknown>())
diff --git a/web/contract/router.ts b/web/contract/router.ts
index d325cac660..57053dfc11 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -15,6 +15,33 @@ import {
 import { changePreferredProviderTypeContract, modelProvidersModelsContract } from './console/model-providers'
 import { notificationContract, notificationDismissContract } from './console/notification'
 import { pluginCheckInstalledContract, pluginLatestVersionsContract } from './console/plugins'
+import {
+  checkSnippetDependenciesContract,
+  confirmSnippetImportContract,
+  createCustomizedSnippetContract,
+  deleteCustomizedSnippetContract,
+  exportCustomizedSnippetContract,
+  getCustomizedSnippetContract,
+  getSnippetDefaultBlockConfigsContract,
+  getSnippetDraftConfigContract,
+  getSnippetDraftNodeLastRunContract,
+  getSnippetDraftWorkflowContract,
+  getSnippetPublishedWorkflowContract,
+  getSnippetWorkflowRunDetailContract,
+  importCustomizedSnippetContract,
+  incrementSnippetUseCountContract,
+  listCustomizedSnippetsContract,
+  listSnippetWorkflowRunNodeExecutionsContract,
+  listSnippetWorkflowRunsContract,
+  publishSnippetWorkflowContract,
+  runSnippetDraftIterationNodeContract,
+  runSnippetDraftLoopNodeContract,
+  runSnippetDraftNodeContract,
+  runSnippetDraftWorkflowContract,
+  stopSnippetWorkflowTaskContract,
+  syncSnippetDraftWorkflowContract,
+  updateCustomizedSnippetContract,
+} from './console/snippets'
 import { systemFeaturesContract } from './console/system'
 import {
   triggerOAuthConfigContract,
@@ -74,6 +101,33 @@ export const consoleRouterContract = {
     checkInstalled: pluginCheckInstalledContract,
     latestVersions: pluginLatestVersionsContract,
   },
+  snippets: {
+    list: listCustomizedSnippetsContract,
+    create: createCustomizedSnippetContract,
+    detail: getCustomizedSnippetContract,
+    update: updateCustomizedSnippetContract,
+    delete: deleteCustomizedSnippetContract,
+    export: exportCustomizedSnippetContract,
+    import: importCustomizedSnippetContract,
+    confirmImport: confirmSnippetImportContract,
+    checkDependencies: checkSnippetDependenciesContract,
+    incrementUseCount: incrementSnippetUseCountContract,
+    draftWorkflow: getSnippetDraftWorkflowContract,
+    syncDraftWorkflow: syncSnippetDraftWorkflowContract,
+    draftConfig: getSnippetDraftConfigContract,
+    publishedWorkflow: getSnippetPublishedWorkflowContract,
+    publishWorkflow: publishSnippetWorkflowContract,
+    defaultBlockConfigs: getSnippetDefaultBlockConfigsContract,
+    workflowRuns: listSnippetWorkflowRunsContract,
+    workflowRunDetail: getSnippetWorkflowRunDetailContract,
+    workflowRunNodeExecutions: listSnippetWorkflowRunNodeExecutionsContract,
+    runDraftNode: runSnippetDraftNodeContract,
+    lastDraftNodeRun: getSnippetDraftNodeLastRunContract,
+    runDraftIterationNode: runSnippetDraftIterationNodeContract,
+    runDraftLoopNode: runSnippetDraftLoopNodeContract,
+    runDraftWorkflow: runSnippetDraftWorkflowContract,
+    stopWorkflowTask: stopSnippetWorkflowTaskContract,
+  },
   billing: {
     invoices: invoicesContract,
     bindPartnerStack: bindPartnerStackContract,
diff --git a/web/service/use-snippets.mock.ts b/web/service/use-snippets.mock.ts
new file mode 100644
index 0000000000..222652e0e4
--- /dev/null
+++ b/web/service/use-snippets.mock.ts
@@ -0,0 +1,215 @@
+import type { Node } from '@/app/components/workflow/types'
+import type { SnippetDetailPayload, SnippetInputField, SnippetListItem } from '@/models/snippet'
+import { useQuery } from '@tanstack/react-query'
+import codeDefault from '@/app/components/workflow/nodes/code/default'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import httpDefault from '@/app/components/workflow/nodes/http/default'
+import { Method } from '@/app/components/workflow/nodes/http/types'
+import llmDefault from '@/app/components/workflow/nodes/llm/default'
+import questionClassifierDefault from '@/app/components/workflow/nodes/question-classifier/default'
+import { BlockEnum, PromptRole } from '@/app/components/workflow/types'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { AppModeEnum } from '@/types/app'
+
+const NAME_SPACE = 'snippets'
+
+export const getSnippetListMock = (): SnippetListItem[] => ([
+  {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+    author: 'Evan',
+    updatedAt: 'Updated 2h ago',
+    usage: 'Used 19 times',
+    icon: '🪄',
+    iconBackground: '#E0EAFF',
+    status: 'Draft',
+  },
+])
+
+const getSnippetInputFieldsMock = (): SnippetInputField[] => ([
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Blog URL',
+    variable: 'blog_url',
+    required: true,
+    placeholder: 'Paste a source article URL',
+    options: [],
+    max_length: 256,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Target Platforms',
+    variable: 'platforms',
+    required: true,
+    placeholder: 'X, LinkedIn, Instagram',
+    options: [],
+    max_length: 128,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Tone',
+    variable: 'tone',
+    required: false,
+    placeholder: 'Concise and executive-ready',
+    options: [],
+    max_length: 48,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Max Length',
+    variable: 'max_length',
+    required: false,
+    placeholder: 'Set an ideal output length',
+    options: [],
+    max_length: 48,
+  },
+])
+
+const getSnippetGraphMock = (): SnippetDetailPayload['graph'] => ({
+  viewport: { x: 120, y: 30, zoom: 0.9 },
+  nodes: [
+    {
+      id: 'question-classifier',
+      position: { x: 280, y: 208 },
+      data: {
+        ...questionClassifierDefault.defaultValue,
+        title: 'Question Classifier',
+        desc: 'After-sales related questions',
+        type: BlockEnum.QuestionClassifier,
+        query_variable_selector: ['sys', 'query'],
+        model: {
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.2,
+          },
+        },
+        classes: [
+          {
+            id: '1',
+            name: 'HTTP Request',
+          },
+          {
+            id: '2',
+            name: 'LLM',
+          },
+          {
+            id: '3',
+            name: 'Code',
+          },
+        ],
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'http-request',
+      position: { x: 670, y: 72 },
+      data: {
+        ...httpDefault.defaultValue,
+        title: 'HTTP Request',
+        desc: 'POST https://api.example.com/content/rewrite',
+        type: BlockEnum.HttpRequest,
+        method: Method.post,
+        url: 'https://api.example.com/content/rewrite',
+        headers: 'Content-Type: application/json',
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'llm',
+      position: { x: 670, y: 248 },
+      data: {
+        ...llmDefault.defaultValue,
+        title: 'LLM',
+        desc: 'GPT-4o',
+        type: BlockEnum.LLM,
+        model: {
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.7,
+          },
+        },
+        prompt_template: [{
+          role: PromptRole.system,
+          text: 'Rewrite the content with the requested tone.',
+        }],
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'code',
+      position: { x: 670, y: 424 },
+      data: {
+        ...codeDefault.defaultValue,
+        title: 'Code',
+        desc: 'Python',
+        type: BlockEnum.Code,
+        code_language: CodeLanguage.python3,
+        code: 'def main(text: str) -> dict:\n    return {"content": text.strip()}',
+      } as unknown as Node['data'],
+    },
+  ],
+  edges: [
+    {
+      id: 'edge-question-http',
+      source: 'question-classifier',
+      sourceHandle: '1',
+      target: 'http-request',
+      targetHandle: 'target',
+    },
+    {
+      id: 'edge-question-llm',
+      source: 'question-classifier',
+      sourceHandle: '2',
+      target: 'llm',
+      targetHandle: 'target',
+    },
+    {
+      id: 'edge-question-code',
+      source: 'question-classifier',
+      sourceHandle: '3',
+      target: 'code',
+      targetHandle: 'target',
+    },
+  ],
+})
+
+const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
+  const snippet = getSnippetListMock().find(item => item.id === snippetId)
+  if (!snippet)
+    return null
+
+  const inputFields = getSnippetInputFieldsMock()
+
+  return {
+    snippet,
+    graph: getSnippetGraphMock(),
+    inputFields,
+    uiMeta: {
+      inputFieldCount: inputFields.length,
+      checklistCount: 2,
+      autoSavedAt: 'Auto-saved · a few seconds ago',
+    },
+  }
+}
+
+export const useSnippetDetail = (snippetId: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'detail', snippetId],
+    queryFn: async () => getSnippetDetailMock(snippetId),
+    enabled: !!snippetId,
+  })
+}
+
+export const publishSnippet = async (_snippetId: string) => {
+  return Promise.resolve()
+}
+
+export const runSnippet = async (_snippetId: string) => {
+  return Promise.resolve()
+}
+
+export const updateSnippetInputFields = async (_snippetId: string, _fields: SnippetInputField[]) => {
+  return Promise.resolve()
+}
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 222652e0e4..6688fc801f 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -1,215 +1,273 @@
-import type { Node } from '@/app/components/workflow/types'
-import type { SnippetDetailPayload, SnippetInputField, SnippetListItem } from '@/models/snippet'
-import { useQuery } from '@tanstack/react-query'
-import codeDefault from '@/app/components/workflow/nodes/code/default'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import httpDefault from '@/app/components/workflow/nodes/http/default'
-import { Method } from '@/app/components/workflow/nodes/http/types'
-import llmDefault from '@/app/components/workflow/nodes/llm/default'
-import questionClassifierDefault from '@/app/components/workflow/nodes/question-classifier/default'
-import { BlockEnum, PromptRole } from '@/app/components/workflow/types'
-import { PipelineInputVarType } from '@/models/pipeline'
-import { AppModeEnum } from '@/types/app'
+import type {
+  SnippetCanvasData,
+  SnippetDetailPayload,
+  SnippetDetail as SnippetDetailUIModel,
+  SnippetInputField as SnippetInputFieldUIModel,
+  SnippetListItem as SnippetListItemUIModel,
+} from '@/models/snippet'
+import type {
+  CreateSnippetPayload,
+  Snippet as SnippetContract,
+  SnippetListResponse,
+  SnippetWorkflow,
+  UpdateSnippetPayload,
+} from '@/types/snippet'
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { consoleClient, consoleQuery } from '@/service/client'
 
-const NAME_SPACE = 'snippets'
+type SnippetListParams = {
+  page?: number
+  limit?: number
+  keyword?: string
+  is_published?: boolean
+}
 
-export const getSnippetListMock = (): SnippetListItem[] => ([
-  {
-    id: 'snippet-1',
-    name: 'Tone Rewriter',
-    description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
-    author: 'Evan',
-    updatedAt: 'Updated 2h ago',
-    usage: 'Used 19 times',
-    icon: '🪄',
-    iconBackground: '#E0EAFF',
-    status: 'Draft',
-  },
-])
+type SnippetSummary = Pick<SnippetContract, 'id' | 'name' | 'description' | 'use_count' | 'icon_info' | 'updated_at'>
 
-const getSnippetInputFieldsMock = (): SnippetInputField[] => ([
-  {
-    type: PipelineInputVarType.textInput,
-    label: 'Blog URL',
-    variable: 'blog_url',
-    required: true,
-    placeholder: 'Paste a source article URL',
-    options: [],
-    max_length: 256,
-  },
-  {
-    type: PipelineInputVarType.textInput,
-    label: 'Target Platforms',
-    variable: 'platforms',
-    required: true,
-    placeholder: 'X, LinkedIn, Instagram',
-    options: [],
-    max_length: 128,
-  },
-  {
-    type: PipelineInputVarType.textInput,
-    label: 'Tone',
-    variable: 'tone',
-    required: false,
-    placeholder: 'Concise and executive-ready',
-    options: [],
-    max_length: 48,
-  },
-  {
-    type: PipelineInputVarType.textInput,
-    label: 'Max Length',
-    variable: 'max_length',
-    required: false,
-    placeholder: 'Set an ideal output length',
-    options: [],
-    max_length: 48,
-  },
-])
+const DEFAULT_SNIPPET_LIST_PARAMS = {
+  page: 1,
+  limit: 30,
+} satisfies Required<Pick<SnippetListParams, 'page' | 'limit'>>
 
-const getSnippetGraphMock = (): SnippetDetailPayload['graph'] => ({
-  viewport: { x: 120, y: 30, zoom: 0.9 },
-  nodes: [
-    {
-      id: 'question-classifier',
-      position: { x: 280, y: 208 },
-      data: {
-        ...questionClassifierDefault.defaultValue,
-        title: 'Question Classifier',
-        desc: 'After-sales related questions',
-        type: BlockEnum.QuestionClassifier,
-        query_variable_selector: ['sys', 'query'],
-        model: {
-          provider: 'openai',
-          name: 'gpt-4o',
-          mode: AppModeEnum.CHAT,
-          completion_params: {
-            temperature: 0.2,
-          },
-        },
-        classes: [
-          {
-            id: '1',
-            name: 'HTTP Request',
-          },
-          {
-            id: '2',
-            name: 'LLM',
-          },
-          {
-            id: '3',
-            name: 'Code',
-          },
-        ],
-      } as unknown as Node['data'],
-    },
-    {
-      id: 'http-request',
-      position: { x: 670, y: 72 },
-      data: {
-        ...httpDefault.defaultValue,
-        title: 'HTTP Request',
-        desc: 'POST https://api.example.com/content/rewrite',
-        type: BlockEnum.HttpRequest,
-        method: Method.post,
-        url: 'https://api.example.com/content/rewrite',
-        headers: 'Content-Type: application/json',
-      } as unknown as Node['data'],
-    },
-    {
-      id: 'llm',
-      position: { x: 670, y: 248 },
-      data: {
-        ...llmDefault.defaultValue,
-        title: 'LLM',
-        desc: 'GPT-4o',
-        type: BlockEnum.LLM,
-        model: {
-          provider: 'openai',
-          name: 'gpt-4o',
-          mode: AppModeEnum.CHAT,
-          completion_params: {
-            temperature: 0.7,
-          },
-        },
-        prompt_template: [{
-          role: PromptRole.system,
-          text: 'Rewrite the content with the requested tone.',
-        }],
-      } as unknown as Node['data'],
-    },
-    {
-      id: 'code',
-      position: { x: 670, y: 424 },
-      data: {
-        ...codeDefault.defaultValue,
-        title: 'Code',
-        desc: 'Python',
-        type: BlockEnum.Code,
-        code_language: CodeLanguage.python3,
-        code: 'def main(text: str) -> dict:\n    return {"content": text.strip()}',
-      } as unknown as Node['data'],
-    },
-  ],
-  edges: [
-    {
-      id: 'edge-question-http',
-      source: 'question-classifier',
-      sourceHandle: '1',
-      target: 'http-request',
-      targetHandle: 'target',
-    },
-    {
-      id: 'edge-question-llm',
-      source: 'question-classifier',
-      sourceHandle: '2',
-      target: 'llm',
-      targetHandle: 'target',
-    },
-    {
-      id: 'edge-question-code',
-      source: 'question-classifier',
-      sourceHandle: '3',
-      target: 'code',
-      targetHandle: 'target',
-    },
-  ],
-})
+const DEFAULT_GRAPH: SnippetCanvasData = {
+  nodes: [],
+  edges: [],
+  viewport: { x: 0, y: 0, zoom: 1 },
+}
 
-const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
-  const snippet = getSnippetListMock().find(item => item.id === snippetId)
-  if (!snippet)
-    return null
+const toMilliseconds = (timestamp?: number) => {
+  if (!timestamp)
+    return undefined
 
-  const inputFields = getSnippetInputFieldsMock()
+  return timestamp > 1_000_000_000_000 ? timestamp : timestamp * 1000
+}
+
+const formatTimestamp = (timestamp?: number) => {
+  const milliseconds = toMilliseconds(timestamp)
+  if (!milliseconds)
+    return ''
+
+  return dayjs(milliseconds).format('YYYY-MM-DD HH:mm')
+}
+
+const getSnippetIcon = (iconInfo: SnippetContract['icon_info']) => {
+  return typeof iconInfo?.icon === 'string' ? iconInfo.icon : ''
+}
+
+const getSnippetIconBackground = (iconInfo: SnippetContract['icon_info']) => {
+  return typeof iconInfo?.icon_background === 'string' ? iconInfo.icon_background : ''
+}
+
+const toSnippetListItem = (snippet: SnippetSummary): SnippetListItemUIModel => {
+  return {
+    id: snippet.id,
+    name: snippet.name,
+    description: snippet.description,
+    author: '',
+    updatedAt: formatTimestamp(snippet.updated_at),
+    usage: String(snippet.use_count ?? 0),
+    icon: getSnippetIcon(snippet.icon_info),
+    iconBackground: getSnippetIconBackground(snippet.icon_info),
+    status: undefined,
+  }
+}
+
+const toSnippetDetail = (snippet: SnippetContract): SnippetDetailUIModel => {
+  return {
+    ...toSnippetListItem(snippet),
+  }
+}
+
+const toSnippetCanvasData = (workflow?: SnippetWorkflow): SnippetCanvasData => {
+  const graph = workflow?.graph
+
+  if (!graph || typeof graph !== 'object')
+    return DEFAULT_GRAPH
+
+  const graphRecord = graph as Record<string, unknown>
 
   return {
-    snippet,
-    graph: getSnippetGraphMock(),
+    nodes: Array.isArray(graphRecord.nodes) ? graphRecord.nodes as SnippetCanvasData['nodes'] : DEFAULT_GRAPH.nodes,
+    edges: Array.isArray(graphRecord.edges) ? graphRecord.edges as SnippetCanvasData['edges'] : DEFAULT_GRAPH.edges,
+    viewport: graphRecord.viewport && typeof graphRecord.viewport === 'object'
+      ? graphRecord.viewport as SnippetCanvasData['viewport']
+      : DEFAULT_GRAPH.viewport,
+  }
+}
+
+const toSnippetDetailPayload = (snippet: SnippetContract, workflow?: SnippetWorkflow): SnippetDetailPayload => {
+  const inputFields = Array.isArray(snippet.input_fields)
+    ? snippet.input_fields as SnippetInputFieldUIModel[]
+    : []
+
+  return {
+    snippet: toSnippetDetail(snippet),
+    graph: toSnippetCanvasData(workflow),
     inputFields,
     uiMeta: {
       inputFieldCount: inputFields.length,
-      checklistCount: 2,
-      autoSavedAt: 'Auto-saved · a few seconds ago',
+      checklistCount: 0,
+      autoSavedAt: formatTimestamp(workflow?.updated_at ?? snippet.updated_at),
     },
   }
 }
 
-export const useSnippetDetail = (snippetId: string) => {
-  return useQuery({
-    queryKey: [NAME_SPACE, 'detail', snippetId],
-    queryFn: async () => getSnippetDetailMock(snippetId),
-    enabled: !!snippetId,
+const normalizeSnippetListParams = (params: SnippetListParams) => {
+  return {
+    page: params.page ?? DEFAULT_SNIPPET_LIST_PARAMS.page,
+    limit: params.limit ?? DEFAULT_SNIPPET_LIST_PARAMS.limit,
+    ...(params.keyword ? { keyword: params.keyword } : {}),
+    ...(typeof params.is_published === 'boolean' ? { is_published: params.is_published } : {}),
+  }
+}
+
+const isNotFoundError = (error: unknown) => {
+  return !!error && typeof error === 'object' && 'status' in error && error.status === 404
+}
+
+export const useSnippetList = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
+  const query = normalizeSnippetListParams(params)
+
+  return useQuery(consoleQuery.snippets.list.queryOptions({
+    input: { query },
+    enabled: options?.enabled ?? true,
+  }))
+}
+
+export const useSnippetListItems = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
+  return useQuery<SnippetListItemUIModel[]>({
+    queryKey: [...consoleQuery.snippets.list.queryKey({ input: { query: normalizeSnippetListParams(params) } }), 'items'],
+    queryFn: async () => {
+      const response = await consoleClient.snippets.list({
+        query: normalizeSnippetListParams(params),
+      })
+
+      return response.data.map(toSnippetListItem)
+    },
+    enabled: options?.enabled ?? true,
   })
 }
 
-export const publishSnippet = async (_snippetId: string) => {
-  return Promise.resolve()
+export const useSnippetApiDetail = (snippetId: string) => {
+  return useQuery(consoleQuery.snippets.detail.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  }))
 }
 
-export const runSnippet = async (_snippetId: string) => {
-  return Promise.resolve()
+export const useSnippetDetail = (snippetId: string) => {
+  return useQuery<SnippetDetailPayload | null>({
+    queryKey: [...consoleQuery.snippets.detail.queryKey({
+      input: {
+        params: { snippetId },
+      },
+    }), 'payload'],
+    enabled: !!snippetId,
+    queryFn: async () => {
+      try {
+        const [snippet, workflow] = await Promise.all([
+          consoleClient.snippets.detail({
+            params: { snippetId },
+          }),
+          consoleClient.snippets.draftWorkflow({
+            params: { snippetId },
+          }).catch((error) => {
+            if (isNotFoundError(error))
+              return undefined
+
+            throw error
+          }),
+        ])
+
+        return toSnippetDetailPayload(snippet, workflow)
+      }
+      catch (error) {
+        if (isNotFoundError(error))
+          return null
+
+        throw error
+      }
+    },
+  })
 }
 
-export const updateSnippetInputFields = async (_snippetId: string, _fields: SnippetInputField[]) => {
-  return Promise.resolve()
+export const useCreateSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(consoleQuery.snippets.create.mutationOptions({
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.snippets.key(),
+      })
+    },
+  }))
+}
+
+export const useUpdateSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.update.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
+export const useDeleteSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.delete.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
+export const usePublishSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.publishWorkflow.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
+export const useIncrementSnippetUseCountMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.incrementUseCount.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
+export type {
+  CreateSnippetPayload,
+  SnippetListResponse,
+  UpdateSnippetPayload,
 }
diff --git a/web/types/snippet.ts b/web/types/snippet.ts
new file mode 100644
index 0000000000..76473ab23f
--- /dev/null
+++ b/web/types/snippet.ts
@@ -0,0 +1,146 @@
+export type SnippetType = 'node' | 'group'
+
+export type SnippetIconInfo = Record<string, unknown>
+
+export type SnippetInputField = Record<string, unknown>
+
+export type Snippet = {
+  id: string
+  name: string
+  description: string
+  type: SnippetType
+  is_published: boolean
+  version: string
+  use_count: number
+  icon_info: SnippetIconInfo
+  input_fields: SnippetInputField[]
+  created_at: number
+  updated_at: number
+}
+
+export type SnippetListItem = Omit<Snippet, 'version' | 'input_fields'>
+
+export type SnippetListResponse = {
+  data: SnippetListItem[]
+  page: number
+  limit: number
+  total: number
+  has_more: boolean
+}
+
+export type CreateSnippetPayload = {
+  name: string
+  description?: string
+  type?: SnippetType
+  icon_info?: SnippetIconInfo
+  input_fields?: SnippetInputField[]
+}
+
+export type UpdateSnippetPayload = {
+  name?: string
+  description?: string
+  icon_info?: SnippetIconInfo
+}
+
+export type SnippetImportPayload = {
+  mode?: string
+  yaml_content?: string
+  yaml_url?: string
+  snippet_id?: string
+  name?: string
+  description?: string
+}
+
+export type IncrementSnippetUseCountResponse = {
+  result: string
+  use_count: number
+}
+
+export type SnippetWorkflow = {
+  id: string
+  graph: Record<string, unknown>
+  features: Record<string, unknown>
+  hash: string
+  created_at: number
+  updated_at: number
+}
+
+export type SnippetDraftSyncPayload = {
+  graph?: Record<string, unknown>
+  hash?: string
+  environment_variables?: Record<string, unknown>[]
+  conversation_variables?: Record<string, unknown>[]
+  input_variables?: Record<string, unknown>[]
+}
+
+export type SnippetDraftSyncResponse = {
+  result: string
+  hash: string
+  updated_at: number
+}
+
+export type SnippetDraftConfig = {
+  parallel_depth_limit: number
+}
+
+export type PublishSnippetWorkflowResponse = {
+  result: string
+  created_at: number
+}
+
+export type WorkflowRunDetail = {
+  id: string
+  version: string
+  status: 'running' | 'succeeded' | 'failed' | 'stopped' | 'partial-succeeded'
+  elapsed_time: number
+  total_tokens: number
+  total_steps: number
+  created_at: number
+  finished_at: number
+  exceptions_count: number
+}
+
+export type WorkflowRunPagination = {
+  limit: number
+  has_more: boolean
+  data: WorkflowRunDetail[]
+}
+
+export type WorkflowNodeExecution = {
+  id: string
+  index: number
+  node_id: string
+  node_type: string
+  title: string
+  inputs: Record<string, unknown>
+  process_data: Record<string, unknown>
+  outputs: Record<string, unknown>
+  status: string
+  error: string
+  elapsed_time: number
+  created_at: number
+  finished_at: number
+}
+
+export type WorkflowNodeExecutionListResponse = {
+  data: WorkflowNodeExecution[]
+}
+
+export type SnippetDraftNodeRunPayload = {
+  inputs?: Record<string, unknown>
+  query?: string
+  files?: Record<string, unknown>[]
+}
+
+export type SnippetDraftRunPayload = {
+  inputs?: Record<string, unknown>
+  files?: Record<string, unknown>[]
+}
+
+export type SnippetIterationNodeRunPayload = {
+  inputs?: Record<string, unknown>
+}
+
+export type SnippetLoopNodeRunPayload = {
+  inputs?: Record<string, unknown>
+}

From 8e5cc4e0aa58a0e86cd5a2a99f0890e4862db17d Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 20 Mar 2026 15:23:03 +0800
Subject: [PATCH 007/108] feat(web): add evaluation api

---
 web/contract/console/evaluation.ts | 305 +++++++++++++++++++++++++++++
 web/contract/router.ts             |  48 +++++
 web/service/use-evaluation.ts      | 222 +++++++++++++++++++++
 web/types/evaluation.ts            | 126 ++++++++++++
 4 files changed, 701 insertions(+)
 create mode 100644 web/contract/console/evaluation.ts
 create mode 100644 web/service/use-evaluation.ts
 create mode 100644 web/types/evaluation.ts

diff --git a/web/contract/console/evaluation.ts b/web/contract/console/evaluation.ts
new file mode 100644
index 0000000000..ded068b80c
--- /dev/null
+++ b/web/contract/console/evaluation.ts
@@ -0,0 +1,305 @@
+import type {
+  EvaluationConfig,
+  EvaluationConfigData,
+  EvaluationFileInfo,
+  EvaluationLogsResponse,
+  EvaluationMetricsListResponse,
+  EvaluationMetricsMapResponse,
+  EvaluationNodeInfoRequest,
+  EvaluationNodeInfoResponse,
+  EvaluationRun,
+  EvaluationRunDetailResponse,
+  EvaluationRunRequest,
+  EvaluationTargetType,
+  EvaluationVersionDetailResponse,
+} from '@/types/evaluation'
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export const datasetEvaluationTemplateDownloadContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/template/download',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const datasetEvaluationConfigContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const saveDatasetEvaluationConfigContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation',
+    method: 'PUT',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+    body: EvaluationConfigData
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const startDatasetEvaluationRunContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+    body: EvaluationRunRequest
+  }>())
+  .output(type<EvaluationRun>())
+
+export const datasetEvaluationLogsContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/logs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationLogsResponse>())
+
+export const datasetEvaluationRunDetailContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/runs/{runId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+      runId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationRunDetailResponse>())
+
+export const cancelDatasetEvaluationRunContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/runs/{runId}/cancel',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+      runId: string
+    }
+  }>())
+  .output(type<EvaluationRun>())
+
+export const datasetEvaluationMetricsContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/metrics',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+  }>())
+  .output(type<EvaluationMetricsListResponse>())
+
+export const datasetEvaluationFileContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/files/{fileId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+      fileId: string
+    }
+  }>())
+  .output(type<EvaluationFileInfo>())
+
+export const evaluationTemplateDownloadContract = base
+  .route({
+    path: '/{targetType}/{targetId}/dataset-template/download',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const evaluationConfigContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const saveEvaluationConfigContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation',
+    method: 'PUT',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    body: EvaluationConfigData
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const evaluationLogsContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/logs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationLogsResponse>())
+
+export const startEvaluationRunContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    body: EvaluationRunRequest
+  }>())
+  .output(type<EvaluationRun>())
+
+export const evaluationRunDetailContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/runs/{runId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+      runId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationRunDetailResponse>())
+
+export const cancelEvaluationRunContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/runs/{runId}/cancel',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+      runId: string
+    }
+  }>())
+  .output(type<EvaluationRun>())
+
+export const evaluationMetricsContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/metrics',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+  }>())
+  .output(type<EvaluationMetricsMapResponse>())
+
+export const evaluationNodeInfoContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/node-info',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    body: EvaluationNodeInfoRequest
+  }>())
+  .output(type<EvaluationNodeInfoResponse>())
+
+export const availableEvaluationMetricsContract = base
+  .route({
+    path: '/evaluation/available-metrics',
+    method: 'GET',
+  })
+  .output(type<EvaluationMetricsListResponse>())
+
+export const evaluationFileContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/files/{fileId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+      fileId: string
+    }
+  }>())
+  .output(type<EvaluationFileInfo>())
+
+export const evaluationVersionDetailContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/version',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    query: {
+      version: string
+    }
+  }>())
+  .output(type<EvaluationVersionDetailResponse>())
diff --git a/web/contract/router.ts b/web/contract/router.ts
index 57053dfc11..de5869717a 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -1,6 +1,29 @@
 import type { InferContractRouterInputs } from '@orpc/contract'
 import { appDeleteContract } from './console/apps'
 import { bindPartnerStackContract, invoicesContract } from './console/billing'
+import {
+  availableEvaluationMetricsContract,
+  cancelDatasetEvaluationRunContract,
+  cancelEvaluationRunContract,
+  datasetEvaluationConfigContract,
+  datasetEvaluationFileContract,
+  datasetEvaluationLogsContract,
+  datasetEvaluationMetricsContract,
+  datasetEvaluationRunDetailContract,
+  datasetEvaluationTemplateDownloadContract,
+  evaluationConfigContract,
+  evaluationFileContract,
+  evaluationLogsContract,
+  evaluationMetricsContract,
+  evaluationNodeInfoContract,
+  evaluationRunDetailContract,
+  evaluationTemplateDownloadContract,
+  evaluationVersionDetailContract,
+  saveDatasetEvaluationConfigContract,
+  saveEvaluationConfigContract,
+  startDatasetEvaluationRunContract,
+  startEvaluationRunContract,
+} from './console/evaluation'
 import {
   exploreAppDetailContract,
   exploreAppsContract,
@@ -97,6 +120,31 @@ export const consoleRouterContract = {
     models: modelProvidersModelsContract,
     changePreferredProviderType: changePreferredProviderTypeContract,
   },
+  evaluation: {
+    templateDownload: evaluationTemplateDownloadContract,
+    config: evaluationConfigContract,
+    saveConfig: saveEvaluationConfigContract,
+    logs: evaluationLogsContract,
+    startRun: startEvaluationRunContract,
+    runDetail: evaluationRunDetailContract,
+    cancelRun: cancelEvaluationRunContract,
+    metrics: evaluationMetricsContract,
+    nodeInfo: evaluationNodeInfoContract,
+    availableMetrics: availableEvaluationMetricsContract,
+    file: evaluationFileContract,
+    versionDetail: evaluationVersionDetailContract,
+  },
+  datasetEvaluation: {
+    templateDownload: datasetEvaluationTemplateDownloadContract,
+    config: datasetEvaluationConfigContract,
+    saveConfig: saveDatasetEvaluationConfigContract,
+    startRun: startDatasetEvaluationRunContract,
+    logs: datasetEvaluationLogsContract,
+    runDetail: datasetEvaluationRunDetailContract,
+    cancelRun: cancelDatasetEvaluationRunContract,
+    metrics: datasetEvaluationMetricsContract,
+    file: datasetEvaluationFileContract,
+  },
   plugins: {
     checkInstalled: pluginCheckInstalledContract,
     latestVersions: pluginLatestVersionsContract,
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
new file mode 100644
index 0000000000..13b5086f49
--- /dev/null
+++ b/web/service/use-evaluation.ts
@@ -0,0 +1,222 @@
+import type {
+  EvaluationConfigData,
+  EvaluationNodeInfoRequest,
+  EvaluationTargetType,
+} from '@/types/evaluation'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { consoleQuery } from '@/service/client'
+
+export type EvaluationResourceType = 'workflow' | 'pipeline' | 'snippet'
+
+type EvaluationLogsParams = {
+  page?: number
+  page_size?: number
+}
+
+type EvaluationRunDetailParams = {
+  page?: number
+  page_size?: number
+}
+
+const toEvaluationTargetType = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>): EvaluationTargetType => {
+  return resourceType === 'snippet' ? 'snippets' : 'app'
+}
+
+const invalidateEvaluationQueries = async (
+  queryClient: ReturnType<typeof useQueryClient>,
+  resourceType: EvaluationResourceType,
+) => {
+  const queryKey = resourceType === 'pipeline'
+    ? consoleQuery.datasetEvaluation.key()
+    : consoleQuery.evaluation.key()
+
+  await queryClient.invalidateQueries({ queryKey })
+}
+
+export const useEvaluationConfig = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>, resourceId: string) => {
+  return useQuery(consoleQuery.evaluation.config.queryOptions({
+    input: {
+      params: {
+        targetType: toEvaluationTargetType(resourceType),
+        targetId: resourceId,
+      },
+    },
+    enabled: !!resourceId,
+  }))
+}
+
+export const useDatasetEvaluationConfig = (datasetId: string) => {
+  return useQuery(consoleQuery.datasetEvaluation.config.queryOptions({
+    input: {
+      params: { datasetId },
+    },
+    enabled: !!datasetId,
+  }))
+}
+
+export const useEvaluationLogs = (
+  resourceType: Exclude<EvaluationResourceType, 'pipeline'>,
+  resourceId: string,
+  params: EvaluationLogsParams = {},
+) => {
+  return useQuery(consoleQuery.evaluation.logs.queryOptions({
+    input: {
+      params: {
+        targetType: toEvaluationTargetType(resourceType),
+        targetId: resourceId,
+      },
+      query: params,
+    },
+    enabled: !!resourceId,
+  }))
+}
+
+export const useDatasetEvaluationLogs = (datasetId: string, params: EvaluationLogsParams = {}) => {
+  return useQuery(consoleQuery.datasetEvaluation.logs.queryOptions({
+    input: {
+      params: { datasetId },
+      query: params,
+    },
+    enabled: !!datasetId,
+  }))
+}
+
+export const useEvaluationMetrics = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>, resourceId: string) => {
+  return useQuery(consoleQuery.evaluation.metrics.queryOptions({
+    input: {
+      params: {
+        targetType: toEvaluationTargetType(resourceType),
+        targetId: resourceId,
+      },
+    },
+    enabled: !!resourceId,
+  }))
+}
+
+export const useDatasetEvaluationMetrics = (datasetId: string) => {
+  return useQuery(consoleQuery.datasetEvaluation.metrics.queryOptions({
+    input: {
+      params: { datasetId },
+    },
+    enabled: !!datasetId,
+  }))
+}
+
+export const useAvailableEvaluationMetrics = (enabled = true) => {
+  return useQuery(consoleQuery.evaluation.availableMetrics.queryOptions({
+    enabled,
+  }))
+}
+
+export const useEvaluationNodeInfoMutation = () => {
+  return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
+}
+
+export const useSaveEvaluationConfigMutation = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.evaluation.saveConfig.mutationOptions({
+      onSuccess: async () => {
+        await invalidateEvaluationQueries(queryClient, resourceType)
+      },
+    }),
+  })
+}
+
+export const useSaveDatasetEvaluationConfigMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.datasetEvaluation.saveConfig.mutationOptions({
+      onSuccess: async () => {
+        await invalidateEvaluationQueries(queryClient, 'pipeline')
+      },
+    }),
+  })
+}
+
+export const useStartEvaluationRunMutation = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.evaluation.startRun.mutationOptions({
+      onSuccess: async () => {
+        await invalidateEvaluationQueries(queryClient, resourceType)
+      },
+    }),
+  })
+}
+
+export const useStartDatasetEvaluationRunMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.datasetEvaluation.startRun.mutationOptions({
+      onSuccess: async () => {
+        await invalidateEvaluationQueries(queryClient, 'pipeline')
+      },
+    }),
+  })
+}
+
+export const useCancelEvaluationRunMutation = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.evaluation.cancelRun.mutationOptions({
+      onSuccess: async () => {
+        await invalidateEvaluationQueries(queryClient, resourceType)
+      },
+    }),
+  })
+}
+
+export const useCancelDatasetEvaluationRunMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.datasetEvaluation.cancelRun.mutationOptions({
+      onSuccess: async () => {
+        await invalidateEvaluationQueries(queryClient, 'pipeline')
+      },
+    }),
+  })
+}
+
+export const useEvaluationRunDetail = (
+  resourceType: Exclude<EvaluationResourceType, 'pipeline'>,
+  resourceId: string,
+  runId: string,
+  params: EvaluationRunDetailParams = {},
+) => {
+  return useQuery(consoleQuery.evaluation.runDetail.queryOptions({
+    input: {
+      params: {
+        targetType: toEvaluationTargetType(resourceType),
+        targetId: resourceId,
+        runId,
+      },
+      query: params,
+    },
+    enabled: !!resourceId && !!runId,
+  }))
+}
+
+export const useDatasetEvaluationRunDetail = (datasetId: string, runId: string, params: EvaluationRunDetailParams = {}) => {
+  return useQuery(consoleQuery.datasetEvaluation.runDetail.queryOptions({
+    input: {
+      params: {
+        datasetId,
+        runId,
+      },
+      query: params,
+    },
+    enabled: !!datasetId && !!runId,
+  }))
+}
+
+export type {
+  EvaluationConfigData,
+  EvaluationNodeInfoRequest,
+}
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
new file mode 100644
index 0000000000..4f4e097614
--- /dev/null
+++ b/web/types/evaluation.ts
@@ -0,0 +1,126 @@
+export type EvaluationTargetType = 'app' | 'snippets'
+
+export type EvaluationConfig = {
+  evaluation_model: string | null
+  evaluation_model_provider: string | null
+  metrics_config: Record<string, unknown> | null
+  judgement_conditions: Record<string, unknown> | null
+}
+
+export type NodeInfo = {
+  node_id: string
+  type: string
+  title: string
+}
+
+export type EvaluationDefaultMetric = {
+  metric?: string
+  node_info_list?: NodeInfo[]
+}
+
+export type EvaluationCustomizedMetric = {
+  evaluation_workflow_id?: string
+  input_fields?: Record<string, unknown>
+  output_fields?: Record<string, unknown>[]
+}
+
+export type EvaluationConfigData = {
+  evaluation_model?: string
+  evaluation_model_provider?: string
+  default_metrics?: EvaluationDefaultMetric[]
+  customized_metrics?: EvaluationCustomizedMetric | null
+  judgment_config?: Record<string, unknown> | null
+}
+
+export type EvaluationRunRequest = EvaluationConfigData & {
+  file_id: string
+}
+
+export type EvaluationRunStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
+
+export type EvaluationRun = {
+  id: string
+  tenant_id: string
+  target_type: string
+  target_id: string
+  evaluation_config_id: string
+  status: EvaluationRunStatus
+  dataset_file_id: string | null
+  result_file_id: string | null
+  total_items: number
+  completed_items: number
+  failed_items: number
+  progress: number
+  metrics_summary: Record<string, unknown>
+  error: string | null
+  created_by: string
+  started_at: number | null
+  completed_at: number | null
+  created_at: number
+}
+
+export type EvaluationRunMetric = {
+  name?: string
+  value?: unknown
+  details?: Record<string, unknown>
+}
+
+export type EvaluationRunItem = {
+  id: string
+  item_index: number
+  inputs: Record<string, unknown>
+  expected_output: string | null
+  actual_output: string | null
+  metrics: EvaluationRunMetric[]
+  judgment: Record<string, unknown>
+  metadata: Record<string, unknown>
+  error: string | null
+  overall_score: number | null
+}
+
+export type EvaluationLogsResponse = {
+  data: EvaluationRun[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export type EvaluationRunItemsPagination = {
+  data: EvaluationRunItem[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export type EvaluationRunDetailResponse = {
+  run: EvaluationRun
+  items: EvaluationRunItemsPagination
+}
+
+export type EvaluationMetricsMapResponse = {
+  metrics: Record<string, string[]>
+}
+
+export type EvaluationMetricsListResponse = {
+  metrics: string[]
+}
+
+export type EvaluationNodeInfoRequest = {
+  metrics?: string[]
+}
+
+export type EvaluationNodeInfoResponse = Record<string, NodeInfo[]>
+
+export type EvaluationFileInfo = {
+  id: string
+  name: string
+  size: number
+  extension: string
+  mime_type: string
+  created_at: number
+  download_url: string
+}
+
+export type EvaluationVersionDetailResponse = {
+  graph: Record<string, unknown>
+}

From 664eb601a2839d2ed911ae9c6b6a7f6abd47fbe2 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 20 Mar 2026 15:29:53 +0800
Subject: [PATCH 008/108] feat(web): add api of snippet worfklows

---
 web/service/use-snippet-workflows.ts | 185 +++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 web/service/use-snippet-workflows.ts

diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
new file mode 100644
index 0000000000..9659a1fd8e
--- /dev/null
+++ b/web/service/use-snippet-workflows.ts
@@ -0,0 +1,185 @@
+import type {
+  SnippetDraftNodeRunPayload,
+  SnippetDraftRunPayload,
+  SnippetDraftSyncPayload,
+  SnippetIterationNodeRunPayload,
+  SnippetLoopNodeRunPayload,
+} from '@/types/snippet'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { consoleQuery } from '@/service/client'
+
+type WorkflowRunsParams = {
+  last_id?: string
+  limit?: number
+}
+
+const invalidateSnippetWorkflowQueries = async (
+  queryClient: ReturnType<typeof useQueryClient>,
+  snippetId: string,
+) => {
+  await Promise.all([
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.draftWorkflow.queryKey({
+        input: {
+          params: { snippetId },
+        },
+      }),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.publishedWorkflow.queryKey({
+        input: {
+          params: { snippetId },
+        },
+      }),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.workflowRuns.key(),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.lastDraftNodeRun.key(),
+    }),
+  ])
+}
+
+export const useSnippetDraftWorkflow = (snippetId: string) => {
+  return useQuery(consoleQuery.snippets.draftWorkflow.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  }))
+}
+
+export const useSnippetDraftConfig = (snippetId: string) => {
+  return useQuery(consoleQuery.snippets.draftConfig.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  }))
+}
+
+export const useSnippetPublishedWorkflow = (snippetId: string) => {
+  return useQuery(consoleQuery.snippets.publishedWorkflow.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  }))
+}
+
+export const useSnippetDefaultBlockConfigs = (snippetId: string) => {
+  return useQuery(consoleQuery.snippets.defaultBlockConfigs.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  }))
+}
+
+export const useSnippetWorkflowRuns = (snippetId: string, params: WorkflowRunsParams = {}) => {
+  return useQuery(consoleQuery.snippets.workflowRuns.queryOptions({
+    input: {
+      params: { snippetId },
+      query: params,
+    },
+    enabled: !!snippetId,
+  }))
+}
+
+export const useSnippetWorkflowRunDetail = (snippetId: string, runId: string) => {
+  return useQuery(consoleQuery.snippets.workflowRunDetail.queryOptions({
+    input: {
+      params: {
+        snippetId,
+        runId,
+      },
+    },
+    enabled: !!snippetId && !!runId,
+  }))
+}
+
+export const useSnippetWorkflowRunNodeExecutions = (snippetId: string, runId: string) => {
+  return useQuery(consoleQuery.snippets.workflowRunNodeExecutions.queryOptions({
+    input: {
+      params: {
+        snippetId,
+        runId,
+      },
+    },
+    enabled: !!snippetId && !!runId,
+  }))
+}
+
+export const useSnippetDraftNodeLastRun = (snippetId: string, nodeId: string, enabled = true) => {
+  return useQuery(consoleQuery.snippets.lastDraftNodeRun.queryOptions({
+    input: {
+      params: {
+        snippetId,
+        nodeId,
+      },
+    },
+    enabled: !!snippetId && !!nodeId && enabled,
+    retry: 0,
+  }))
+}
+
+export const useSyncSnippetDraftWorkflowMutation = (snippetId: string) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.syncDraftWorkflow.mutationOptions({
+      onSuccess: async () => {
+        await invalidateSnippetWorkflowQueries(queryClient, snippetId)
+      },
+    }),
+  })
+}
+
+export const usePublishSnippetWorkflowMutation = (snippetId: string) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.publishWorkflow.mutationOptions({
+      onSuccess: async () => {
+        await invalidateSnippetWorkflowQueries(queryClient, snippetId)
+      },
+    }),
+  })
+}
+
+export const useRunSnippetDraftNodeMutation = () => {
+  return useMutation(consoleQuery.snippets.runDraftNode.mutationOptions())
+}
+
+export const useRunSnippetDraftIterationNodeMutation = () => {
+  return useMutation(consoleQuery.snippets.runDraftIterationNode.mutationOptions())
+}
+
+export const useRunSnippetDraftLoopNodeMutation = () => {
+  return useMutation(consoleQuery.snippets.runDraftLoopNode.mutationOptions())
+}
+
+export const useRunSnippetDraftWorkflowMutation = () => {
+  return useMutation(consoleQuery.snippets.runDraftWorkflow.mutationOptions())
+}
+
+export const useStopSnippetWorkflowTaskMutation = (snippetId: string) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.stopWorkflowTask.mutationOptions({
+      onSuccess: async () => {
+        await invalidateSnippetWorkflowQueries(queryClient, snippetId)
+      },
+    }),
+  })
+}
+
+export type {
+  SnippetDraftNodeRunPayload,
+  SnippetDraftRunPayload,
+  SnippetDraftSyncPayload,
+  SnippetIterationNodeRunPayload,
+  SnippetLoopNodeRunPayload,
+}

From a716d8789dd2245eb9713afb010e36c5ecd621fb Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 23 Mar 2026 10:45:15 +0800
Subject: [PATCH 009/108] refactor: extract snippet list components

---
 .../components/apps/__tests__/list.spec.tsx   |  2 +-
 web/app/components/apps/list.tsx              | 92 +------------------
 .../components/apps/studio-route-switch.tsx   | 44 +++++++++
 .../snippets/components/snippet-card.tsx      | 46 ++++++++++
 .../components/snippet-create-card.tsx        | 25 +++++
 5 files changed, 119 insertions(+), 90 deletions(-)
 create mode 100644 web/app/components/apps/studio-route-switch.tsx
 create mode 100644 web/app/components/snippets/components/snippet-card.tsx
 create mode 100644 web/app/components/snippets/components/snippet-create-card.tsx

diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index cd4be65ea0..b2f0125e90 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -288,7 +288,7 @@ describe('List', () => {
       expect(screen.getByText('snippet.create')).toBeInTheDocument()
       expect(screen.getByText('Tone Rewriter')).toBeInTheDocument()
       expect(screen.getByText('Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.')).toBeInTheDocument()
-      expect(screen.getByRole('link', { name: /Tone Rewriter/i })).toHaveAttribute('href', '/snippets/snippet-1')
+      expect(screen.getByRole('link', { name: /Tone Rewriter/i })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
       expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
       expect(screen.queryByTestId('app-card-app-1')).not.toBeInTheDocument()
     })
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 68f4999197..92d024c5d0 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -2,7 +2,6 @@
 
 import type { FC } from 'react'
 import type { StudioPageType } from '.'
-import type { SnippetListItem } from '@/models/snippet'
 import type { App } from '@/types/app'
 import { useDebounceFn } from 'ahooks'
 import { useQueryState } from 'nuqs'
@@ -16,10 +15,11 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
 import dynamic from '@/next/dynamic'
-import Link from '@/next/link'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { getSnippetListMock } from '@/service/use-snippets.mock'
 import { cn } from '@/utils/classnames'
+import SnippetCard from '../snippets/components/snippet-card'
+import SnippetCreateCard from '../snippets/components/snippet-create-card'
 import AppCard from './app-card'
 import { AppCardSkeleton } from './app-card-skeleton'
 import AppTypeFilter from './app-type-filter'
@@ -30,6 +30,7 @@ import Footer from './footer'
 import useAppsQueryState from './hooks/use-apps-query-state'
 import { useDSLDragDrop } from './hooks/use-dsl-drag-drop'
 import NewAppCard from './new-app-card'
+import StudioRouteSwitch from './studio-route-switch'
 
 const TagManagementModal = dynamic(() => import('@/app/components/base/tag-management'), {
   ssr: false,
@@ -38,93 +39,6 @@ const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-fro
   ssr: false,
 })
 
-const StudioRouteSwitch = ({ pageType, appsLabel, snippetsLabel }: { pageType: StudioPageType, appsLabel: string, snippetsLabel: string }) => {
-  return (
-    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
-      <Link
-        href="/apps"
-        className={cn(
-          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
-          pageType === 'apps' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
-          pageType !== 'apps' && 'font-medium',
-        )}
-      >
-        {appsLabel}
-      </Link>
-      <Link
-        href="/snippets"
-        className={cn(
-          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
-          pageType === 'snippets' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
-          pageType !== 'snippets' && 'font-medium',
-        )}
-      >
-        {snippetsLabel}
-      </Link>
-    </div>
-  )
-}
-
-const SnippetCreateCard = () => {
-  const { t } = useTranslation('snippet')
-
-  return (
-    <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
-      <div className="grow rounded-t-xl p-2">
-        <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('create')}</div>
-        <div className="mb-1 flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
-          <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
-          {t('newApp.startFromBlank', { ns: 'app' })}
-        </div>
-        <div className="flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
-          <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
-          {t('importDSL', { ns: 'app' })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const SnippetCard = ({
-  snippet,
-}: {
-  snippet: SnippetListItem
-}) => {
-  return (
-    <Link href={`/snippets/${snippet.id}/orchestrate`} className="group col-span-1">
-      <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
-        {snippet.status && (
-          <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
-            {snippet.status}
-          </div>
-        )}
-        <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-divider-regular text-xl text-white" style={{ background: snippet.iconBackground }}>
-            <span aria-hidden>{snippet.icon}</span>
-          </div>
-          <div className="w-0 grow py-[1px]">
-            <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
-              {snippet.name}
-            </div>
-          </div>
-        </div>
-        <div className="h-[58px] px-[14px] text-xs leading-normal text-text-tertiary">
-          <div className="line-clamp-2" title={snippet.description}>
-            {snippet.description}
-          </div>
-        </div>
-        <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
-          <span className="truncate">{snippet.author}</span>
-          <span>·</span>
-          <span className="truncate">{snippet.updatedAt}</span>
-          <span>·</span>
-          <span className="truncate">{snippet.usage}</span>
-        </div>
-      </article>
-    </Link>
-  )
-}
-
 type Props = {
   controlRefreshList?: number
   pageType?: StudioPageType
diff --git a/web/app/components/apps/studio-route-switch.tsx b/web/app/components/apps/studio-route-switch.tsx
new file mode 100644
index 0000000000..7aea1cebbd
--- /dev/null
+++ b/web/app/components/apps/studio-route-switch.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import type { StudioPageType } from '.'
+import Link from '@/next/link'
+import { cn } from '@/utils/classnames'
+
+type Props = {
+  pageType: StudioPageType
+  appsLabel: string
+  snippetsLabel: string
+}
+
+const StudioRouteSwitch = ({
+  pageType,
+  appsLabel,
+  snippetsLabel,
+}: Props) => {
+  return (
+    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
+      <Link
+        href="/apps"
+        className={cn(
+          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+          pageType === 'apps' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+          pageType !== 'apps' && 'font-medium',
+        )}
+      >
+        {appsLabel}
+      </Link>
+      <Link
+        href="/snippets"
+        className={cn(
+          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+          pageType === 'snippets' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+          pageType !== 'snippets' && 'font-medium',
+        )}
+      >
+        {snippetsLabel}
+      </Link>
+    </div>
+  )
+}
+
+export default StudioRouteSwitch
diff --git a/web/app/components/snippets/components/snippet-card.tsx b/web/app/components/snippets/components/snippet-card.tsx
new file mode 100644
index 0000000000..3b59c09e6c
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-card.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { SnippetListItem } from '@/models/snippet'
+import Link from '@/next/link'
+
+type Props = {
+  snippet: SnippetListItem
+}
+
+const SnippetCard = ({ snippet }: Props) => {
+  return (
+    <Link href={`/snippets/${snippet.id}/orchestrate`} className="group col-span-1">
+      <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
+        {snippet.status && (
+          <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
+            {snippet.status}
+          </div>
+        )}
+        <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-divider-regular text-xl text-white" style={{ background: snippet.iconBackground }}>
+            <span aria-hidden>{snippet.icon}</span>
+          </div>
+          <div className="w-0 grow py-[1px]">
+            <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
+              {snippet.name}
+            </div>
+          </div>
+        </div>
+        <div className="h-[58px] px-[14px] text-xs leading-normal text-text-tertiary">
+          <div className="line-clamp-2" title={snippet.description}>
+            {snippet.description}
+          </div>
+        </div>
+        <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
+          <span className="truncate">{snippet.author}</span>
+          <span>·</span>
+          <span className="truncate">{snippet.updatedAt}</span>
+          <span>·</span>
+          <span className="truncate">{snippet.usage}</span>
+        </div>
+      </article>
+    </Link>
+  )
+}
+
+export default SnippetCard
diff --git a/web/app/components/snippets/components/snippet-create-card.tsx b/web/app/components/snippets/components/snippet-create-card.tsx
new file mode 100644
index 0000000000..b0a88c3d17
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-create-card.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+const SnippetCreateCard = () => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
+      <div className="grow rounded-t-xl p-2">
+        <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('create')}</div>
+        <div className="mb-1 flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
+          <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
+          {t('newApp.startFromBlank', { ns: 'app' })}
+        </div>
+        <div className="flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
+          <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
+          {t('importDSL', { ns: 'app' })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SnippetCreateCard

From feef2dd1fae45ae52100cc8e7af9d1c55835337c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 23 Mar 2026 11:28:28 +0800
Subject: [PATCH 010/108] feat(web): add snippet creation dialog flow

---
 .../__tests__/snippet-create-card.spec.tsx    | 77 +++++++++++++++++
 .../components/snippet-create-card.tsx        | 84 ++++++++++++++++---
 .../workflow/create-snippet-dialog.tsx        | 20 +++--
 web/i18n/en-US/snippet.json                   |  3 +
 web/i18n/zh-Hans/snippet.json                 |  3 +
 5 files changed, 167 insertions(+), 20 deletions(-)
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx

diff --git a/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
new file mode 100644
index 0000000000..f727bf7666
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
@@ -0,0 +1,77 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import SnippetCreateCard from '../snippet-create-card'
+
+const { mockPush, mockMutate, mockToastSuccess } = vi.hoisted(() => ({
+  mockPush: vi.fn(),
+  mockMutate: vi.fn(),
+  mockToastSuccess: vi.fn(),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: mockToastSuccess,
+    error: vi.fn(),
+  },
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useCreateSnippetMutation: () => ({
+    mutate: mockMutate,
+    isPending: false,
+  }),
+}))
+
+describe('SnippetCreateCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Create From Blank', () => {
+    it('should open the create dialog and create a snippet from the modal', async () => {
+      mockMutate.mockImplementation((_payload, options?: { onSuccess?: (snippet: { id: string }) => void }) => {
+        options?.onSuccess?.({ id: 'snippet-123' })
+      })
+
+      render(<SnippetCreateCard />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'snippet.createFromBlank' }))
+      expect(screen.getByText('workflow.snippet.createDialogTitle')).toBeInTheDocument()
+
+      fireEvent.change(screen.getByPlaceholderText('workflow.snippet.namePlaceholder'), {
+        target: { value: 'My Snippet' },
+      })
+      fireEvent.change(screen.getByPlaceholderText('workflow.snippet.descriptionPlaceholder'), {
+        target: { value: 'Useful snippet description' },
+      })
+      fireEvent.click(screen.getByRole('button', { name: /workflow\.snippet\.confirm/i }))
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        body: {
+          name: 'My Snippet',
+          description: 'Useful snippet description',
+          icon_info: {
+            icon: '🤖',
+            icon_type: 'emoji',
+            icon_background: '#FFEAD5',
+            icon_url: undefined,
+          },
+        },
+      }, expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }))
+
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
+      })
+
+      expect(mockToastSuccess).toHaveBeenCalledWith('workflow.createSuccess')
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/snippet-create-card.tsx b/web/app/components/snippets/components/snippet-create-card.tsx
index b0a88c3d17..75b1f37f78 100644
--- a/web/app/components/snippets/components/snippet-create-card.tsx
+++ b/web/app/components/snippets/components/snippet-create-card.tsx
@@ -1,24 +1,86 @@
 'use client'
 
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
+import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
+import { useRouter } from '@/next/navigation'
+import { useCreateSnippetMutation } from '@/service/use-snippets'
 
 const SnippetCreateCard = () => {
   const { t } = useTranslation('snippet')
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+
+  const handleCreateFromBlank = () => {
+    setIsCreateDialogOpen(true)
+  }
+
+  const handleCreateSnippet = ({
+    name,
+    description,
+    icon,
+  }: {
+    name: string
+    description: string
+    icon: AppIconSelection
+  }) => {
+    createSnippetMutation.mutate({
+      body: {
+        name,
+        description: description || undefined,
+        icon_info: {
+          icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+          icon_type: icon.type,
+          icon_background: icon.type === 'emoji' ? icon.background : undefined,
+          icon_url: icon.type === 'image' ? icon.url : undefined,
+        },
+      },
+    }, {
+      onSuccess: (snippet) => {
+        toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+        setIsCreateDialogOpen(false)
+        push(`/snippets/${snippet.id}/orchestrate`)
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('createFailed'))
+      },
+    })
+  }
 
   return (
-    <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
-      <div className="grow rounded-t-xl p-2">
-        <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('create')}</div>
-        <div className="mb-1 flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
-          <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
-          {t('newApp.startFromBlank', { ns: 'app' })}
-        </div>
-        <div className="flex w-full items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary">
-          <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
-          {t('importDSL', { ns: 'app' })}
+    <>
+      <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
+        <div className="grow rounded-t-xl p-2">
+          <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('create')}</div>
+          <button
+            type="button"
+            className="mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={createSnippetMutation.isPending}
+            onClick={handleCreateFromBlank}
+          >
+            <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
+            {t('createFromBlank')}
+          </button>
+          <button type="button" className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary">
+            <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
+            {t('importDSL', { ns: 'app' })}
+          </button>
         </div>
       </div>
-    </div>
+
+      {isCreateDialogOpen && (
+        <CreateSnippetDialog
+          isOpen={isCreateDialogOpen}
+          selectedNodeIds={[]}
+          isSubmitting={createSnippetMutation.isPending}
+          onClose={() => setIsCreateDialogOpen(false)}
+          onConfirm={handleCreateSnippet}
+        />
+      )}
+    </>
   )
 }
 
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
index bb42b33d1f..8c72602668 100644
--- a/web/app/components/workflow/create-snippet-dialog.tsx
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -10,7 +10,6 @@ import AppIconPicker from '@/app/components/base/app-icon-picker'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import Toast from '@/app/components/base/toast'
 import { Dialog, DialogCloseButton, DialogContent, DialogPortal, DialogTitle } from '@/app/components/base/ui/dialog'
 import ShortcutsName from './shortcuts-name'
 
@@ -26,6 +25,7 @@ type CreateSnippetDialogProps = {
   selectedNodeIds: string[]
   onClose: () => void
   onConfirm: (payload: CreateSnippetDialogPayload) => void
+  isSubmitting?: boolean
 }
 
 const defaultIcon: AppIconSelection = {
@@ -39,6 +39,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
   selectedNodeIds,
   onClose,
   onConfirm,
+  isSubmitting = false,
 }) => {
   const { t } = useTranslation()
   const [name, setName] = useState('')
@@ -73,17 +74,15 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
     }
 
     onConfirm(payload)
-    Toast.notify({
-      type: 'success',
-      message: t('snippet.createSuccess', { ns: 'workflow' }),
-    })
-    handleClose()
-  }, [description, handleClose, icon, name, onConfirm, selectedNodeIds, t])
+  }, [description, icon, name, onConfirm, selectedNodeIds])
 
   useKeyPress(['meta.enter', 'ctrl.enter'], () => {
     if (!isOpen)
       return
 
+    if (isSubmitting)
+      return
+
     handleConfirm()
   })
 
@@ -109,6 +108,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
                   value={name}
                   onChange={e => setName(e.target.value)}
                   placeholder={t('snippet.namePlaceholder', { ns: 'workflow' }) || ''}
+                  disabled={isSubmitting}
                   autoFocus
                 />
               </div>
@@ -133,17 +133,19 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
                 value={description}
                 onChange={e => setDescription(e.target.value)}
                 placeholder={t('snippet.descriptionPlaceholder', { ns: 'workflow' }) || ''}
+                disabled={isSubmitting}
               />
             </div>
           </div>
 
           <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-5">
-            <Button onClick={handleClose}>
+            <Button disabled={isSubmitting} onClick={handleClose}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
             <Button
               variant="primary"
-              disabled={!name.trim()}
+              disabled={!name.trim() || isSubmitting}
+              loading={isSubmitting}
               onClick={handleConfirm}
             >
               {t('snippet.confirm', { ns: 'workflow' })}
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
index 9c273b27e3..c63190769f 100644
--- a/web/i18n/en-US/snippet.json
+++ b/web/i18n/en-US/snippet.json
@@ -1,5 +1,8 @@
 {
   "create": "CREATE SNIPPET",
+  "createFailed": "Failed to create snippet",
+  "createFromBlank": "Create from blank",
+  "defaultName": "Untitled Snippet",
   "inputFieldButton": "Input Field",
   "notFoundDescription": "The requested snippet mock was not found.",
   "notFoundTitle": "Snippet not found",
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
index d3f735c2e7..a7f2d2cc1c 100644
--- a/web/i18n/zh-Hans/snippet.json
+++ b/web/i18n/zh-Hans/snippet.json
@@ -1,5 +1,8 @@
 {
   "create": "创建 Snippet",
+  "createFailed": "创建 Snippet 失败",
+  "createFromBlank": "创建空白 Snippet",
+  "defaultName": "未命名 Snippet",
   "inputFieldButton": "输入字段",
   "notFoundDescription": "未找到对应的 snippet 静态数据。",
   "notFoundTitle": "未找到 Snippet",

From f782ac6b3cacd9806dc1cd857aa96ab551f0bc9f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 23 Mar 2026 14:55:36 +0800
Subject: [PATCH 011/108] feat(web): create snippets by DSL import

---
 .../__tests__/snippet-create-card.spec.tsx    |  44 ++-
 .../components/snippet-create-card.tsx        |  27 +-
 .../components/snippet-import-dsl-dialog.tsx  | 266 ++++++++++++++++++
 web/i18n/en-US/snippet.json                   |   2 +
 web/i18n/zh-Hans/snippet.json                 |   2 +
 web/service/use-snippets.ts                   |  42 +++
 web/types/snippet.ts                          |   9 +
 7 files changed, 383 insertions(+), 9 deletions(-)
 create mode 100644 web/app/components/snippets/components/snippet-import-dsl-dialog.tsx

diff --git a/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
index f727bf7666..d7d1b2991a 100644
--- a/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
@@ -1,10 +1,11 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import SnippetCreateCard from '../snippet-create-card'
 
-const { mockPush, mockMutate, mockToastSuccess } = vi.hoisted(() => ({
+const { mockPush, mockCreateMutate, mockToastSuccess, mockToastError } = vi.hoisted(() => ({
   mockPush: vi.fn(),
-  mockMutate: vi.fn(),
+  mockCreateMutate: vi.fn(),
   mockToastSuccess: vi.fn(),
+  mockToastError: vi.fn(),
 }))
 
 vi.mock('@/next/navigation', () => ({
@@ -16,17 +17,31 @@ vi.mock('@/next/navigation', () => ({
 vi.mock('@/app/components/base/ui/toast', () => ({
   toast: {
     success: mockToastSuccess,
-    error: vi.fn(),
+    error: mockToastError,
   },
 }))
 
 vi.mock('@/service/use-snippets', () => ({
   useCreateSnippetMutation: () => ({
-    mutate: mockMutate,
+    mutate: mockCreateMutate,
     isPending: false,
   }),
 }))
 
+vi.mock('../snippet-import-dsl-dialog', () => ({
+  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess?: (snippetId: string) => void }) => {
+    if (!show)
+      return null
+
+    return (
+      <div data-testid="snippet-import-dsl-dialog">
+        <button type="button" onClick={() => onSuccess?.('snippet-imported')}>Complete Import</button>
+        <button type="button" onClick={onClose}>Close Import</button>
+      </div>
+    )
+  },
+}))
+
 describe('SnippetCreateCard', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -34,7 +49,7 @@ describe('SnippetCreateCard', () => {
 
   describe('Create From Blank', () => {
     it('should open the create dialog and create a snippet from the modal', async () => {
-      mockMutate.mockImplementation((_payload, options?: { onSuccess?: (snippet: { id: string }) => void }) => {
+      mockCreateMutate.mockImplementation((_payload, options?: { onSuccess?: (snippet: { id: string }) => void }) => {
         options?.onSuccess?.({ id: 'snippet-123' })
       })
 
@@ -51,7 +66,7 @@ describe('SnippetCreateCard', () => {
       })
       fireEvent.click(screen.getByRole('button', { name: /workflow\.snippet\.confirm/i }))
 
-      expect(mockMutate).toHaveBeenCalledWith({
+      expect(mockCreateMutate).toHaveBeenCalledWith({
         body: {
           name: 'My Snippet',
           description: 'Useful snippet description',
@@ -71,7 +86,22 @@ describe('SnippetCreateCard', () => {
         expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
       })
 
-      expect(mockToastSuccess).toHaveBeenCalledWith('workflow.createSuccess')
+      expect(mockToastSuccess).toHaveBeenCalledWith('workflow.snippet.createSuccess')
+    })
+  })
+
+  describe('Import DSL', () => {
+    it('should open the import dialog and navigate when the import succeeds', async () => {
+      render(<SnippetCreateCard />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'app.importDSL' }))
+      expect(screen.getByTestId('snippet-import-dsl-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'Complete Import' }))
+
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-imported/orchestrate')
+      })
     })
   })
 })
diff --git a/web/app/components/snippets/components/snippet-create-card.tsx b/web/app/components/snippets/components/snippet-create-card.tsx
index 75b1f37f78..4ed5b32a35 100644
--- a/web/app/components/snippets/components/snippet-create-card.tsx
+++ b/web/app/components/snippets/components/snippet-create-card.tsx
@@ -6,18 +6,26 @@ import { useTranslation } from 'react-i18next'
 import { toast } from '@/app/components/base/ui/toast'
 import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
 import { useRouter } from '@/next/navigation'
-import { useCreateSnippetMutation } from '@/service/use-snippets'
+import {
+  useCreateSnippetMutation,
+} from '@/service/use-snippets'
+import SnippetImportDSLDialog from './snippet-import-dsl-dialog'
 
 const SnippetCreateCard = () => {
   const { t } = useTranslation('snippet')
   const { push } = useRouter()
   const createSnippetMutation = useCreateSnippetMutation()
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+  const [isImportDSLDialogOpen, setIsImportDSLDialogOpen] = useState(false)
 
   const handleCreateFromBlank = () => {
     setIsCreateDialogOpen(true)
   }
 
+  const handleImportDSL = () => {
+    setIsImportDSLDialogOpen(true)
+  }
+
   const handleCreateSnippet = ({
     name,
     description,
@@ -64,7 +72,11 @@ const SnippetCreateCard = () => {
             <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
             {t('createFromBlank')}
           </button>
-          <button type="button" className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary">
+          <button
+            type="button"
+            className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+            onClick={handleImportDSL}
+          >
             <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
             {t('importDSL', { ns: 'app' })}
           </button>
@@ -80,6 +92,17 @@ const SnippetCreateCard = () => {
           onConfirm={handleCreateSnippet}
         />
       )}
+
+      {isImportDSLDialogOpen && (
+        <SnippetImportDSLDialog
+          show={isImportDSLDialogOpen}
+          onClose={() => setIsImportDSLDialogOpen(false)}
+          onSuccess={(snippetId) => {
+            setIsImportDSLDialogOpen(false)
+            push(`/snippets/${snippetId}/orchestrate`)
+          }}
+        />
+      )}
     </>
   )
 }
diff --git a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
new file mode 100644
index 0000000000..b9c8dc88ad
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
@@ -0,0 +1,266 @@
+'use client'
+
+import { useDebounceFn, useKeyPress } from 'ahooks'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  DSLImportMode,
+  DSLImportStatus,
+} from '@/models/app'
+import {
+  useConfirmSnippetImportMutation,
+  useImportSnippetDSLMutation,
+} from '@/service/use-snippets'
+import { cn } from '@/utils/classnames'
+import ShortcutsName from '../../workflow/shortcuts-name'
+
+type SnippetImportDSLDialogProps = {
+  show: boolean
+  onClose: () => void
+  onSuccess?: (snippetId: string) => void
+}
+
+const SnippetImportDSLTab = {
+  FromFile: 'from-file',
+  FromURL: 'from-url',
+} as const
+
+type SnippetImportDSLTabValue = typeof SnippetImportDSLTab[keyof typeof SnippetImportDSLTab]
+
+const SnippetImportDSLDialog = ({
+  show,
+  onClose,
+  onSuccess,
+}: SnippetImportDSLDialogProps) => {
+  const { t } = useTranslation()
+  const importSnippetDSLMutation = useImportSnippetDSLMutation()
+  const confirmSnippetImportMutation = useConfirmSnippetImportMutation()
+  const [currentFile, setCurrentFile] = useState<File>()
+  const [fileContent, setFileContent] = useState<string>()
+  const [currentTab, setCurrentTab] = useState<SnippetImportDSLTabValue>(SnippetImportDSLTab.FromFile)
+  const [dslUrlValue, setDslUrlValue] = useState('')
+  const [showVersionMismatchDialog, setShowVersionMismatchDialog] = useState(false)
+  const [versions, setVersions] = useState<{ importedVersion: string, systemVersion: string }>()
+  const [importId, setImportId] = useState<string>()
+
+  const isImporting = importSnippetDSLMutation.isPending || confirmSnippetImportMutation.isPending
+
+  const readFile = (file: File) => {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const content = event.target?.result
+      setFileContent(content as string)
+    }
+    reader.readAsText(file)
+  }
+
+  const handleFile = (file?: File) => {
+    setCurrentFile(file)
+    if (file)
+      readFile(file)
+    if (!file)
+      setFileContent('')
+  }
+
+  const completeImport = (snippetId?: string, status: string = DSLImportStatus.COMPLETED) => {
+    if (!snippetId) {
+      toast.error(t('importFailed', { ns: 'snippet' }))
+      return
+    }
+
+    if (status === DSLImportStatus.COMPLETED_WITH_WARNINGS)
+      toast.warning(t('newApp.appCreateDSLWarning', { ns: 'app' }))
+    else
+      toast.success(t('importSuccess', { ns: 'snippet' }))
+
+    onSuccess?.(snippetId)
+  }
+
+  const handleImportResponse = (response: {
+    id: string
+    status: string
+    snippet_id?: string
+    imported_dsl_version?: string
+    current_dsl_version?: string
+  }) => {
+    if (response.status === DSLImportStatus.COMPLETED || response.status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
+      completeImport(response.snippet_id, response.status)
+      return
+    }
+
+    if (response.status === DSLImportStatus.PENDING) {
+      setVersions({
+        importedVersion: response.imported_dsl_version ?? '',
+        systemVersion: response.current_dsl_version ?? '',
+      })
+      setImportId(response.id)
+      setShowVersionMismatchDialog(true)
+      return
+    }
+
+    toast.error(t('importFailed', { ns: 'snippet' }))
+  }
+
+  const handleCreate = () => {
+    if (currentTab === SnippetImportDSLTab.FromFile && !currentFile)
+      return
+    if (currentTab === SnippetImportDSLTab.FromURL && !dslUrlValue)
+      return
+
+    importSnippetDSLMutation.mutate({
+      mode: currentTab === SnippetImportDSLTab.FromFile ? DSLImportMode.YAML_CONTENT : DSLImportMode.YAML_URL,
+      yamlContent: currentTab === SnippetImportDSLTab.FromFile ? fileContent || '' : undefined,
+      yamlUrl: currentTab === SnippetImportDSLTab.FromURL ? dslUrlValue : undefined,
+    }, {
+      onSuccess: handleImportResponse,
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('importFailed', { ns: 'snippet' }))
+      },
+    })
+  }
+
+  const { run: handleCreateSnippet } = useDebounceFn(handleCreate, { wait: 300 })
+
+  const handleConfirmImport = () => {
+    if (!importId)
+      return
+
+    confirmSnippetImportMutation.mutate({
+      importId,
+    }, {
+      onSuccess: (response) => {
+        setShowVersionMismatchDialog(false)
+        completeImport(response.snippet_id)
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('importFailed', { ns: 'snippet' }))
+      },
+    })
+  }
+
+  useKeyPress(['meta.enter', 'ctrl.enter'], () => {
+    if (!show || showVersionMismatchDialog || isImporting)
+      return
+
+    if ((currentTab === SnippetImportDSLTab.FromFile && currentFile) || (currentTab === SnippetImportDSLTab.FromURL && dslUrlValue))
+      handleCreateSnippet()
+  })
+
+  const buttonDisabled = useMemo(() => {
+    if (isImporting)
+      return true
+    if (currentTab === SnippetImportDSLTab.FromFile)
+      return !currentFile
+    return !dslUrlValue
+  }, [currentFile, currentTab, dslUrlValue, isImporting])
+
+  return (
+    <>
+      <Dialog open={show} onOpenChange={open => !open && onClose()}>
+        <DialogContent className="w-[520px] p-0">
+          <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6">
+            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+              {t('importFromDSL', { ns: 'app' })}
+            </DialogTitle>
+            <DialogCloseButton className="right-5 top-6 h-8 w-8" />
+          </div>
+
+          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
+            {[
+              { key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
+              { key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
+            ].map(tab => (
+              <button
+                key={tab.key}
+                type="button"
+                className={cn(
+                  'relative flex h-full cursor-pointer items-center',
+                  currentTab === tab.key && 'text-text-primary',
+                )}
+                onClick={() => setCurrentTab(tab.key)}
+              >
+                {tab.label}
+                {currentTab === tab.key && (
+                  <div className="absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600" />
+                )}
+              </button>
+            ))}
+          </div>
+
+          <div className="px-6 py-4">
+            {currentTab === SnippetImportDSLTab.FromFile && (
+              <Uploader
+                className="mt-0"
+                file={currentFile}
+                updateFile={handleFile}
+              />
+            )}
+            {currentTab === SnippetImportDSLTab.FromURL && (
+              <div>
+                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
+                <Input
+                  placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
+                  value={dslUrlValue}
+                  onChange={e => setDslUrlValue(e.target.value)}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end px-6 py-5">
+            <Button className="mr-2" disabled={isImporting} onClick={onClose}>
+              {t('newApp.Cancel', { ns: 'app' })}
+            </Button>
+            <Button
+              disabled={buttonDisabled}
+              variant="primary"
+              onClick={handleCreateSnippet}
+              className="gap-1"
+            >
+              <span>{t('newApp.Create', { ns: 'app' })}</span>
+              <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={showVersionMismatchDialog} onOpenChange={open => !open && setShowVersionMismatchDialog(false)}>
+        <DialogContent className="w-[480px]">
+          <div className="flex flex-col items-start gap-2 self-stretch pb-4">
+            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+              {t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
+            </DialogTitle>
+            <div className="flex grow flex-col text-text-secondary system-md-regular">
+              <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+              <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+              <br />
+              <div>
+                {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.importedVersion}</span>
+              </div>
+              <div>
+                {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.systemVersion}</span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-start justify-end gap-2 self-stretch pt-6">
+            <Button variant="secondary" disabled={isImporting} onClick={() => setShowVersionMismatchDialog(false)}>
+              {t('newApp.Cancel', { ns: 'app' })}
+            </Button>
+            <Button variant="primary" destructive disabled={isImporting} onClick={handleConfirmImport}>
+              {t('newApp.Confirm', { ns: 'app' })}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export default SnippetImportDSLDialog
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
index c63190769f..fa060c99c2 100644
--- a/web/i18n/en-US/snippet.json
+++ b/web/i18n/en-US/snippet.json
@@ -3,6 +3,8 @@
   "createFailed": "Failed to create snippet",
   "createFromBlank": "Create from blank",
   "defaultName": "Untitled Snippet",
+  "importFailed": "Failed to import snippet DSL",
+  "importSuccess": "Snippet imported",
   "inputFieldButton": "Input Field",
   "notFoundDescription": "The requested snippet mock was not found.",
   "notFoundTitle": "Snippet not found",
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
index a7f2d2cc1c..db01deb153 100644
--- a/web/i18n/zh-Hans/snippet.json
+++ b/web/i18n/zh-Hans/snippet.json
@@ -3,6 +3,8 @@
   "createFailed": "创建 Snippet 失败",
   "createFromBlank": "创建空白 Snippet",
   "defaultName": "未命名 Snippet",
+  "importFailed": "导入 Snippet DSL 失败",
+  "importSuccess": "Snippet 导入成功",
   "inputFieldButton": "输入字段",
   "notFoundDescription": "未找到对应的 snippet 静态数据。",
   "notFoundTitle": "未找到 Snippet",
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 6688fc801f..3acf45f1b0 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -8,6 +8,7 @@ import type {
 import type {
   CreateSnippetPayload,
   Snippet as SnippetContract,
+  SnippetDSLImportResponse,
   SnippetListResponse,
   SnippetWorkflow,
   UpdateSnippetPayload,
@@ -266,8 +267,49 @@ export const useIncrementSnippetUseCountMutation = () => {
   })
 }
 
+export const useImportSnippetDSLMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation<SnippetDSLImportResponse, Error, { mode: 'yaml-content' | 'yaml-url', yamlContent?: string, yamlUrl?: string }>({
+    mutationFn: ({ mode, yamlContent, yamlUrl }) => {
+      return consoleClient.snippets.import({
+        body: {
+          mode,
+          yaml_content: yamlContent,
+          yaml_url: yamlUrl,
+        },
+      }) as Promise<SnippetDSLImportResponse>
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.snippets.key(),
+      })
+    },
+  })
+}
+
+export const useConfirmSnippetImportMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation<SnippetDSLImportResponse, Error, { importId: string }>({
+    mutationFn: ({ importId }) => {
+      return consoleClient.snippets.confirmImport({
+        params: {
+          importId,
+        },
+      }) as Promise<SnippetDSLImportResponse>
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.snippets.key(),
+      })
+    },
+  })
+}
+
 export type {
   CreateSnippetPayload,
+  SnippetDSLImportResponse,
   SnippetListResponse,
   UpdateSnippetPayload,
 }
diff --git a/web/types/snippet.ts b/web/types/snippet.ts
index 76473ab23f..552555db9c 100644
--- a/web/types/snippet.ts
+++ b/web/types/snippet.ts
@@ -51,6 +51,15 @@ export type SnippetImportPayload = {
   description?: string
 }
 
+export type SnippetDSLImportResponse = {
+  id: string
+  status: string
+  snippet_id?: string
+  current_dsl_version?: string
+  imported_dsl_version?: string
+  error: string
+}
+
 export type IncrementSnippetUseCountResponse = {
   result: string
   use_count: number

From 36c3d6e48aeb71aa6c22615154e69da053b90f97 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 23 Mar 2026 16:37:05 +0800
Subject: [PATCH 012/108] feat(web): snippet list fetching & display

---
 .../components/apps/__tests__/list.spec.tsx   | 74 +++++++++++++++++--
 web/app/components/apps/list.tsx              | 74 +++++++++++++------
 .../snippets/components/snippet-card.tsx      | 27 ++++---
 web/service/use-snippets.ts                   | 24 ++++++
 web/types/snippet.ts                          | 10 ++-
 5 files changed, 167 insertions(+), 42 deletions(-)

diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index b2f0125e90..acc2abb1ff 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -59,6 +59,7 @@ vi.mock('../hooks/use-dsl-drag-drop', () => ({
 
 const mockRefetch = vi.fn()
 const mockFetchNextPage = vi.fn()
+const mockFetchSnippetNextPage = vi.fn()
 
 const mockServiceState = {
   error: null as Error | null,
@@ -119,6 +120,57 @@ vi.mock('@/service/use-apps', () => ({
   }),
 }))
 
+const mockSnippetServiceState = {
+  error: null as Error | null,
+  hasNextPage: false,
+  isLoading: false,
+  isFetching: false,
+  isFetchingNextPage: false,
+}
+
+const defaultSnippetData = {
+  pages: [{
+    data: [
+      {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+        author: '',
+        updatedAt: '2024-01-02 10:00',
+        usage: '19',
+        icon: '🪄',
+        iconBackground: '#E0EAFF',
+        status: undefined,
+      },
+    ],
+    total: 1,
+  }],
+}
+
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: () => ({
+    data: defaultSnippetData,
+    isLoading: mockSnippetServiceState.isLoading,
+    isFetching: mockSnippetServiceState.isFetching,
+    isFetchingNextPage: mockSnippetServiceState.isFetchingNextPage,
+    fetchNextPage: mockFetchSnippetNextPage,
+    hasNextPage: mockSnippetServiceState.hasNextPage,
+    error: mockSnippetServiceState.error,
+  }),
+  useCreateSnippetMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+  useImportSnippetDSLMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+  useConfirmSnippetImportMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+}))
+
 vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([{ id: 'tag-1', name: 'Test Tag', type: 'app' }]),
 }))
@@ -227,6 +279,11 @@ describe('List', () => {
     mockQueryState.tagIDs = []
     mockQueryState.keywords = ''
     mockQueryState.isCreatedByMe = false
+    mockSnippetServiceState.error = null
+    mockSnippetServiceState.hasNextPage = false
+    mockSnippetServiceState.isLoading = false
+    mockSnippetServiceState.isFetching = false
+    mockSnippetServiceState.isFetchingNextPage = false
     intersectionCallback = null
     localStorage.clear()
   })
@@ -282,7 +339,7 @@ describe('List', () => {
   })
 
   describe('Snippets Mode', () => {
-    it('should render the snippets create card and fake snippet card', () => {
+    it('should render the snippets create card and snippet card from the real query hook', () => {
       renderList({ pageType: 'snippets' })
 
       expect(screen.getByText('snippet.create')).toBeInTheDocument()
@@ -293,14 +350,15 @@ describe('List', () => {
       expect(screen.queryByTestId('app-card-app-1')).not.toBeInTheDocument()
     })
 
-    it('should filter local snippets by the search input and show the snippet empty state', () => {
+    it('should request the next snippet page when the infinite-scroll anchor intersects', () => {
+      mockSnippetServiceState.hasNextPage = true
       renderList({ pageType: 'snippets' })
 
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'missing snippet' } })
+      act(() => {
+        intersectionCallback?.([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)
+      })
 
-      expect(screen.queryByText('Tone Rewriter')).not.toBeInTheDocument()
-      expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
+      expect(mockFetchSnippetNextPage).toHaveBeenCalled()
     })
 
     it('should not render app-only controls in snippets mode', () => {
@@ -311,14 +369,14 @@ describe('List', () => {
       expect(screen.queryByText('app.newApp.dropDSLToCreateApp')).not.toBeInTheDocument()
     })
 
-    it('should reserve the infinite-scroll anchor without fetching more pages', () => {
+    it('should not fetch the next snippet page when no more data is available', () => {
       renderList({ pageType: 'snippets' })
 
       act(() => {
         intersectionCallback?.([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)
       })
 
-      expect(mockFetchNextPage).not.toHaveBeenCalled()
+      expect(mockFetchSnippetNextPage).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 92d024c5d0..736a7b4a3d 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -16,7 +16,7 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
 import dynamic from '@/next/dynamic'
 import { useInfiniteAppList } from '@/service/use-apps'
-import { getSnippetListMock } from '@/service/use-snippets.mock'
+import { useInfiniteSnippetList } from '@/service/use-snippets'
 import { cn } from '@/utils/classnames'
 import SnippetCard from '../snippets/components/snippet-card'
 import SnippetCreateCard from '../snippets/components/snippet-create-card'
@@ -61,6 +61,7 @@ const List: FC<Props> = ({
   const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
   const [appKeywords, setAppKeywords] = useState(keywords)
+  const [snippetKeywordsInput, setSnippetKeywordsInput] = useState('')
   const [snippetKeywords, setSnippetKeywords] = useState('')
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [droppedDSLFile, setDroppedDSLFile] = useState<File | undefined>()
@@ -109,6 +110,22 @@ const List: FC<Props> = ({
     enabled: isAppsPage && !isCurrentWorkspaceDatasetOperator,
   })
 
+  const {
+    data: snippetData,
+    isLoading: isSnippetListLoading,
+    isFetching: isSnippetListFetching,
+    isFetchingNextPage: isSnippetListFetchingNextPage,
+    fetchNextPage: fetchSnippetNextPage,
+    hasNextPage: hasSnippetNextPage,
+    error: snippetError,
+  } = useInfiniteSnippetList({
+    page: 1,
+    limit: 30,
+    keyword: snippetKeywords || undefined,
+  }, {
+    enabled: !isAppsPage,
+  })
+
   useEffect(() => {
     if (isAppsPage && controlRefreshList > 0)
       refetch()
@@ -128,10 +145,13 @@ const List: FC<Props> = ({
     if (isCurrentWorkspaceDatasetOperator)
       return
 
-    const hasMore = isAppsPage ? (hasNextPage ?? true) : false
+    const hasMore = isAppsPage ? (hasNextPage ?? true) : (hasSnippetNextPage ?? true)
+    const isPageLoading = isAppsPage ? isLoading : isSnippetListLoading
+    const isNextPageFetching = isAppsPage ? isFetchingNextPage : isSnippetListFetchingNextPage
+    const currentError = isAppsPage ? error : snippetError
     let observer: IntersectionObserver | undefined
 
-    if (error) {
+    if (currentError) {
       observer?.disconnect()
       return
     }
@@ -141,8 +161,12 @@ const List: FC<Props> = ({
       const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200))
 
       observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && !isLoading && !isFetchingNextPage && !error && hasMore)
-          fetchNextPage()
+        if (entries[0].isIntersecting && !isPageLoading && !isNextPageFetching && !currentError && hasMore) {
+          if (isAppsPage)
+            fetchNextPage()
+          else
+            fetchSnippetNextPage()
+        }
       }, {
         root: containerRef.current,
         rootMargin: `${dynamicMargin}px`,
@@ -152,12 +176,16 @@ const List: FC<Props> = ({
     }
 
     return () => observer?.disconnect()
-  }, [error, fetchNextPage, hasNextPage, isAppsPage, isCurrentWorkspaceDatasetOperator, isFetchingNextPage, isLoading])
+  }, [error, fetchNextPage, fetchSnippetNextPage, hasNextPage, hasSnippetNextPage, isAppsPage, isCurrentWorkspaceDatasetOperator, isFetchingNextPage, isLoading, isSnippetListFetchingNextPage, isSnippetListLoading, snippetError])
 
   const { run: handleAppSearch } = useDebounceFn((value: string) => {
     setAppKeywords(value)
   }, { wait: 500 })
 
+  const { run: handleSnippetSearch } = useDebounceFn((value: string) => {
+    setSnippetKeywords(value)
+  }, { wait: 500 })
+
   const handleKeywordsChange = useCallback((value: string) => {
     if (isAppsPage) {
       setKeywords(value)
@@ -165,8 +193,9 @@ const List: FC<Props> = ({
       return
     }
 
-    setSnippetKeywords(value)
-  }, [handleAppSearch, isAppsPage, setKeywords])
+    setSnippetKeywordsInput(value)
+    handleSnippetSearch(value)
+  }, [handleAppSearch, handleSnippetSearch, isAppsPage, setKeywords])
 
   const { run: handleTagsUpdate } = useDebounceFn((value: string[]) => {
     setTagIDs(value)
@@ -181,23 +210,16 @@ const List: FC<Props> = ({
     return (data?.pages ?? []).flatMap(({ data: apps }) => apps)
   }, [data?.pages])
 
-  const snippetItems = useMemo(() => getSnippetListMock(), [])
+  const snippetItems = useMemo(() => {
+    return (snippetData?.pages ?? []).flatMap(({ data }) => data)
+  }, [snippetData?.pages])
 
-  const filteredSnippetItems = useMemo(() => {
-    const normalizedKeywords = snippetKeywords.trim().toLowerCase()
-    if (!normalizedKeywords)
-      return snippetItems
-
-    return snippetItems.filter(item =>
-      item.name.toLowerCase().includes(normalizedKeywords)
-      || item.description.toLowerCase().includes(normalizedKeywords),
-    )
-  }, [snippetItems, snippetKeywords])
-
-  const showSkeleton = isAppsPage && (isLoading || (isFetching && data?.pages?.length === 0))
+  const showSkeleton = isAppsPage
+    ? (isLoading || (isFetching && data?.pages?.length === 0))
+    : (isSnippetListLoading || (isSnippetListFetching && snippetItems.length === 0))
   const hasAnyApp = (data?.pages?.[0]?.total ?? 0) > 0
-  const hasAnySnippet = filteredSnippetItems.length > 0
-  const currentKeywords = isAppsPage ? keywords : snippetKeywords
+  const hasAnySnippet = snippetItems.length > 0
+  const currentKeywords = isAppsPage ? keywords : snippetKeywordsInput
 
   return (
     <>
@@ -265,7 +287,7 @@ const List: FC<Props> = ({
             <AppCard key={app.id} app={app} onRefresh={refetch} />
           ))}
 
-          {!showSkeleton && !isAppsPage && hasAnySnippet && filteredSnippetItems.map(snippet => (
+          {!showSkeleton && !isAppsPage && hasAnySnippet && snippetItems.map(snippet => (
             <SnippetCard key={snippet.id} snippet={snippet} />
           ))}
 
@@ -280,6 +302,10 @@ const List: FC<Props> = ({
           {isAppsPage && isFetchingNextPage && (
             <AppCardSkeleton count={3} />
           )}
+
+          {!isAppsPage && isSnippetListFetchingNextPage && (
+            <AppCardSkeleton count={3} />
+          )}
         </div>
 
         {isAppsPage && isCurrentWorkspaceEditor && (
diff --git a/web/app/components/snippets/components/snippet-card.tsx b/web/app/components/snippets/components/snippet-card.tsx
index 3b59c09e6c..a55fc5ec05 100644
--- a/web/app/components/snippets/components/snippet-card.tsx
+++ b/web/app/components/snippets/components/snippet-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import type { SnippetListItem } from '@/models/snippet'
+import type { SnippetListItem } from '@/types/snippet'
+import AppIcon from '@/app/components/base/app-icon'
 import Link from '@/next/link'
 
 type Props = {
@@ -11,15 +12,19 @@ const SnippetCard = ({ snippet }: Props) => {
   return (
     <Link href={`/snippets/${snippet.id}/orchestrate`} className="group col-span-1">
       <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
-        {snippet.status && (
+        {!snippet.is_published && (
           <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
-            {snippet.status}
+            Draft
           </div>
         )}
         <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-divider-regular text-xl text-white" style={{ background: snippet.iconBackground }}>
-            <span aria-hidden>{snippet.icon}</span>
-          </div>
+          <AppIcon
+            size="large"
+            iconType={snippet.icon_info.icon_type}
+            icon={snippet.icon_info.icon}
+            background={snippet.icon_info.icon_background}
+            imageUrl={snippet.icon_info.icon_url}
+          />
           <div className="w-0 grow py-[1px]">
             <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
               {snippet.name}
@@ -34,9 +39,13 @@ const SnippetCard = ({ snippet }: Props) => {
         <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
           <span className="truncate">{snippet.author}</span>
           <span>·</span>
-          <span className="truncate">{snippet.updatedAt}</span>
-          <span>·</span>
-          <span className="truncate">{snippet.usage}</span>
+          <span className="truncate">{snippet.updated_at}</span>
+          {!snippet.is_published && (
+            <>
+              <span>·</span>
+              <span className="truncate">{snippet.use_count}</span>
+            </>
+          )}
         </div>
       </article>
     </Link>
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 3acf45f1b0..f8fc8537ef 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -14,6 +14,8 @@ import type {
   UpdateSnippetPayload,
 } from '@/types/snippet'
 import {
+  keepPreviousData,
+  useInfiniteQuery,
   useMutation,
   useQuery,
   useQueryClient,
@@ -131,6 +133,8 @@ const isNotFoundError = (error: unknown) => {
   return !!error && typeof error === 'object' && 'status' in error && error.status === 404
 }
 
+const snippetListKey = (params: SnippetListParams) => ['snippets', 'list', params]
+
 export const useSnippetList = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
   const query = normalizeSnippetListParams(params)
 
@@ -154,6 +158,26 @@ export const useSnippetListItems = (params: SnippetListParams = {}, options?: {
   })
 }
 
+export const useInfiniteSnippetList = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
+  const normalizedParams = normalizeSnippetListParams(params)
+
+  return useInfiniteQuery<SnippetListResponse>({
+    queryKey: snippetListKey(normalizedParams),
+    queryFn: ({ pageParam = normalizedParams.page }) => {
+      return consoleClient.snippets.list({
+        query: {
+          ...normalizedParams,
+          page: pageParam as number,
+        },
+      })
+    },
+    getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : undefined,
+    initialPageParam: normalizedParams.page,
+    placeholderData: keepPreviousData,
+    ...options,
+  })
+}
+
 export const useSnippetApiDetail = (snippetId: string) => {
   return useQuery(consoleQuery.snippets.detail.queryOptions({
     input: {
diff --git a/web/types/snippet.ts b/web/types/snippet.ts
index 552555db9c..f962b20ab5 100644
--- a/web/types/snippet.ts
+++ b/web/types/snippet.ts
@@ -1,6 +1,13 @@
+import type { AppIconType } from '@/types/app'
+
 export type SnippetType = 'node' | 'group'
 
-export type SnippetIconInfo = Record<string, unknown>
+export type SnippetIconInfo = {
+  icon_type: AppIconType | null
+  icon: string
+  icon_background?: string
+  icon_url?: string
+}
 
 export type SnippetInputField = Record<string, unknown>
 
@@ -16,6 +23,7 @@ export type Snippet = {
   input_fields: SnippetInputField[]
   created_at: number
   updated_at: number
+  author: string
 }
 
 export type SnippetListItem = Omit<Snippet, 'version' | 'input_fields'>

From 7e3027b5f7d29bb739f3b282d75d86c76fd72bb7 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 23 Mar 2026 17:02:00 +0800
Subject: [PATCH 013/108] feat(web): snippet card usage info

---
 web/app/components/snippets/components/snippet-card.tsx | 5 ++++-
 web/i18n/en-US/snippet.json                             | 1 +
 web/i18n/zh-Hans/snippet.json                           | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/app/components/snippets/components/snippet-card.tsx b/web/app/components/snippets/components/snippet-card.tsx
index a55fc5ec05..764dba66f4 100644
--- a/web/app/components/snippets/components/snippet-card.tsx
+++ b/web/app/components/snippets/components/snippet-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { SnippetListItem } from '@/types/snippet'
+import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Link from '@/next/link'
 
@@ -9,6 +10,8 @@ type Props = {
 }
 
 const SnippetCard = ({ snippet }: Props) => {
+  const { t } = useTranslation('snippet')
+
   return (
     <Link href={`/snippets/${snippet.id}/orchestrate`} className="group col-span-1">
       <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
@@ -43,7 +46,7 @@ const SnippetCard = ({ snippet }: Props) => {
           {!snippet.is_published && (
             <>
               <span>·</span>
-              <span className="truncate">{snippet.use_count}</span>
+              <span className="truncate">{t('usageCount', { count: snippet.use_count })}</span>
             </>
           )}
         </div>
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
index fa060c99c2..8ce20472eb 100644
--- a/web/i18n/en-US/snippet.json
+++ b/web/i18n/en-US/snippet.json
@@ -17,5 +17,6 @@
   "sectionEvaluation": "Evaluation",
   "sectionOrchestrate": "Orchestrate",
   "testRunButton": "Test run",
+  "usageCount": "Used {{count}} times",
   "variableInspect": "Variable Inspect"
 }
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
index db01deb153..eeb38faf44 100644
--- a/web/i18n/zh-Hans/snippet.json
+++ b/web/i18n/zh-Hans/snippet.json
@@ -17,5 +17,6 @@
   "sectionEvaluation": "评测",
   "sectionOrchestrate": "编排",
   "testRunButton": "测试运行",
+  "usageCount": "已使用 {{count}} 次",
   "variableInspect": "变量查看"
 }

From a5cff3274316fa1bf4a0370624564760bb7fe6f9 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 25 Mar 2026 21:29:06 +0800
Subject: [PATCH 014/108] feat(web): snippet info operations

---
 .../app-sidebar/snippet-info/dropdown.tsx     | 198 ++++++++++++++++++
 .../app-sidebar/snippet-info/index.tsx        |  38 ++--
 .../snippets/components/snippet-main.tsx      |  15 +-
 .../snippets/hooks/use-snippet-init.ts        |   3 +-
 .../workflow/create-snippet-dialog.tsx        |  22 +-
 .../workflow/selection-contextmenu.tsx        |  18 +-
 web/i18n/en-US/snippet.json                   |  13 ++
 web/i18n/zh-Hans/snippet.json                 |  13 ++
 web/service/use-snippets.ts                   |  11 +
 9 files changed, 290 insertions(+), 41 deletions(-)
 create mode 100644 web/app/components/app-sidebar/snippet-info/dropdown.tsx

diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
new file mode 100644
index 0000000000..52ab64d817
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -0,0 +1,198 @@
+'use client'
+
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { SnippetDetail } from '@/models/snippet'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { toast } from '@/app/components/base/ui/toast'
+import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
+import { useRouter } from '@/next/navigation'
+import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
+import { cn } from '@/utils/classnames'
+import { downloadBlob } from '@/utils/download'
+
+type SnippetInfoDropdownProps = {
+  snippet: SnippetDetail
+}
+
+const FALLBACK_ICON: AppIconSelection = {
+  type: 'emoji',
+  icon: '🤖',
+  background: '#FFEAD5',
+}
+
+const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
+  const { t } = useTranslation('snippet')
+  const { replace } = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false)
+  const updateSnippetMutation = useUpdateSnippetMutation()
+  const exportSnippetMutation = useExportSnippetMutation()
+  const deleteSnippetMutation = useDeleteSnippetMutation()
+
+  const initialValue = React.useMemo(() => ({
+    name: snippet.name,
+    description: snippet.description,
+    icon: snippet.icon
+      ? {
+          type: 'emoji' as const,
+          icon: snippet.icon,
+          background: snippet.iconBackground || FALLBACK_ICON.background,
+        }
+      : FALLBACK_ICON,
+  }), [snippet.description, snippet.icon, snippet.iconBackground, snippet.name])
+
+  const handleOpenEditDialog = React.useCallback(() => {
+    setOpen(false)
+    setIsEditDialogOpen(true)
+  }, [])
+
+  const handleExportSnippet = React.useCallback(async () => {
+    setOpen(false)
+    try {
+      const data = await exportSnippetMutation.mutateAsync({ snippetId: snippet.id })
+      const file = new Blob([data], { type: 'application/yaml' })
+      downloadBlob({ data: file, fileName: `${snippet.name}.yml` })
+    }
+    catch {
+      toast.error(t('exportFailed'))
+    }
+  }, [exportSnippetMutation, snippet.id, snippet.name, t])
+
+  const handleEditSnippet = React.useCallback(async ({ name, description, icon }: {
+    name: string
+    description: string
+    icon: AppIconSelection
+  }) => {
+    updateSnippetMutation.mutate({
+      params: { snippetId: snippet.id },
+      body: {
+        name,
+        description: description || undefined,
+        icon_info: {
+          icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+          icon_type: icon.type,
+          icon_background: icon.type === 'emoji' ? icon.background : undefined,
+          icon_url: icon.type === 'image' ? icon.url : undefined,
+        },
+      },
+    }, {
+      onSuccess: () => {
+        toast.success(t('editDone'))
+        setIsEditDialogOpen(false)
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('editFailed'))
+      },
+    })
+  }, [snippet.id, t, updateSnippetMutation])
+
+  const handleDeleteSnippet = React.useCallback(() => {
+    deleteSnippetMutation.mutate({
+      params: { snippetId: snippet.id },
+    }, {
+      onSuccess: () => {
+        toast.success(t('deleted'))
+        setIsDeleteDialogOpen(false)
+        replace('/snippets')
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('deleteFailed'))
+      },
+    })
+  }, [deleteSnippetMutation, replace, snippet.id, t])
+
+  return (
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger
+          className={cn('action-btn action-btn-m size-6 rounded-md text-text-tertiary', open && 'bg-state-base-hover text-text-secondary')}
+        >
+          <span aria-hidden className="i-ri-more-fill size-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={4}
+          popupClassName="w-[180px] p-1"
+        >
+          <DropdownMenuItem className="mx-0 gap-2" onClick={handleOpenEditDialog}>
+            <span aria-hidden className="i-ri-edit-line size-4 shrink-0 text-text-tertiary" />
+            <span className="grow">{t('menu.editInfo')}</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="mx-0 gap-2" onClick={handleExportSnippet}>
+            <span aria-hidden className="i-ri-download-2-line size-4 shrink-0 text-text-tertiary" />
+            <span className="grow">{t('menu.exportSnippet')}</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator className="!my-1 bg-divider-subtle" />
+          <DropdownMenuItem
+            className="mx-0 gap-2"
+            destructive
+            onClick={() => {
+              setOpen(false)
+              setIsDeleteDialogOpen(true)
+            }}
+          >
+            <span aria-hidden className="i-ri-delete-bin-line size-4 shrink-0" />
+            <span className="grow">{t('menu.deleteSnippet')}</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {isEditDialogOpen && (
+        <CreateSnippetDialog
+          isOpen={isEditDialogOpen}
+          selectedNodeIds={[]}
+          initialValue={initialValue}
+          title={t('editDialogTitle')}
+          confirmText={t('operation.save', { ns: 'common' })}
+          isSubmitting={updateSnippetMutation.isPending}
+          onClose={() => setIsEditDialogOpen(false)}
+          onConfirm={handleEditSnippet}
+        />
+      )}
+
+      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent className="w-[400px]">
+          <div className="space-y-2 p-6">
+            <AlertDialogTitle className="text-text-primary title-lg-semi-bold">
+              {t('deleteConfirmTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-text-tertiary system-sm-regular">
+              {t('deleteConfirmContent')}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions className="pt-0">
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              loading={deleteSnippetMutation.isPending}
+              onClick={handleDeleteSnippet}
+            >
+              {t('menu.deleteSnippet')}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+export default React.memo(SnippetInfoDropdown)
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
index f0d0c59957..e47f14fe9e 100644
--- a/web/app/components/app-sidebar/snippet-info/index.tsx
+++ b/web/app/components/app-sidebar/snippet-info/index.tsx
@@ -2,9 +2,10 @@
 
 import type { SnippetDetail } from '@/models/snippet'
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Badge from '@/app/components/base/badge'
 import { cn } from '@/utils/classnames'
+import SnippetInfoDropdown from './dropdown'
 
 type SnippetInfoProps = {
   expand: boolean
@@ -15,11 +16,13 @@ const SnippetInfo = ({
   expand,
   snippet,
 }: SnippetInfoProps) => {
+  const { t } = useTranslation('snippet')
+
   return (
-    <div className={cn('flex flex-col', expand ? '' : 'p-1')}>
-      <div className="flex flex-col gap-2 p-2">
-        <div className="flex items-start gap-3">
-          <div className={cn(!expand && 'ml-1')}>
+    <div className={cn('flex flex-col', expand ? 'px-2 pb-1 pt-2' : 'p-1')}>
+      <div className={cn('flex flex-col', expand ? 'gap-2 rounded-xl p-2' : '')}>
+        <div className={cn('flex', expand ? 'items-center justify-between' : 'items-start gap-3')}>
+          <div className={cn('shrink-0', !expand && 'ml-1')}>
             <AppIcon
               size={expand ? 'large' : 'small'}
               iconType="emoji"
@@ -27,21 +30,20 @@ const SnippetInfo = ({
               background={snippet.iconBackground}
             />
           </div>
-          {expand && (
-            <div className="min-w-0 flex-1">
-              <div className="truncate text-text-secondary system-md-semibold">
-                {snippet.name}
-              </div>
-              {snippet.status && (
-                <div className="pt-1">
-                  <Badge>{snippet.status}</Badge>
-                </div>
-              )}
-            </div>
-          )}
+          {expand && <SnippetInfoDropdown snippet={snippet} />}
         </div>
+        {expand && (
+          <div className="min-w-0">
+            <div className="truncate text-text-secondary system-md-semibold">
+              {snippet.name}
+            </div>
+            <div className="pt-1 text-text-tertiary system-2xs-medium-uppercase">
+              {t('typeLabel')}
+            </div>
+          </div>
+        )}
         {expand && snippet.description && (
-          <p className="line-clamp-3 text-text-tertiary system-xs-regular">
+          <p className="line-clamp-3 break-words text-text-tertiary system-xs-regular">
             {snippet.description}
           </p>
         )}
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index d1f936a0c5..b2ffdf71ea 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -6,8 +6,8 @@ import type { SnippetDetailPayload, SnippetInputField, SnippetSection } from '@/
 import {
   RiFlaskFill,
   RiFlaskLine,
-  RiGitBranchFill,
-  RiGitBranchLine,
+  RiTerminalWindowFill,
+  RiTerminalWindowLine,
 } from '@remixicon/react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +16,7 @@ import AppSideBar from '@/app/components/app-sidebar'
 import NavLink from '@/app/components/app-sidebar/nav-link'
 import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -30,8 +30,8 @@ type SnippetMainProps = {
 } & Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
 
 const ORCHESTRATE_ICONS: { normal: NavIcon, selected: NavIcon } = {
-  normal: RiGitBranchLine,
-  selected: RiGitBranchFill,
+  normal: RiTerminalWindowLine,
+  selected: RiTerminalWindowFill,
 }
 
 const EVALUATION_ICONS: { normal: NavIcon, selected: NavIcon } = {
@@ -107,10 +107,7 @@ const SnippetMain = ({
     const duplicated = fields.some(item => item.variable === field.variable && item.variable !== originalVariable)
 
     if (duplicated) {
-      Toast.notify({
-        type: 'error',
-        message: t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }),
-      })
+      toast.error(t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }))
       return
     }
 
diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
index a5978603cd..1468c65beb 100644
--- a/web/app/components/snippets/hooks/use-snippet-init.ts
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -1,4 +1,5 @@
-import { useSnippetDetail } from '@/service/use-snippets'
+// import { useSnippetDetail } from '@/service/use-snippets'
+import { useSnippetDetail } from '@/service/use-snippets.mock'
 
 export const useSnippetInit = (snippetId: string) => {
   return useSnippetDetail(snippetId)
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
index 8c72602668..2da326bc27 100644
--- a/web/app/components/workflow/create-snippet-dialog.tsx
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -20,12 +20,21 @@ export type CreateSnippetDialogPayload = {
   selectedNodeIds: string[]
 }
 
+export type CreateSnippetDialogInitialValue = {
+  name?: string
+  description?: string
+  icon?: AppIconSelection
+}
+
 type CreateSnippetDialogProps = {
   isOpen: boolean
   selectedNodeIds: string[]
   onClose: () => void
   onConfirm: (payload: CreateSnippetDialogPayload) => void
   isSubmitting?: boolean
+  title?: string
+  confirmText?: string
+  initialValue?: CreateSnippetDialogInitialValue
 }
 
 const defaultIcon: AppIconSelection = {
@@ -40,11 +49,14 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
   onClose,
   onConfirm,
   isSubmitting = false,
+  title,
+  confirmText,
+  initialValue,
 }) => {
   const { t } = useTranslation()
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [icon, setIcon] = useState<AppIconSelection>(defaultIcon)
+  const [name, setName] = useState(initialValue?.name ?? '')
+  const [description, setDescription] = useState(initialValue?.description ?? '')
+  const [icon, setIcon] = useState<AppIconSelection>(initialValue?.icon ?? defaultIcon)
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
 
   const resetForm = useCallback(() => {
@@ -94,7 +106,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
 
           <div className="px-6 pb-3 pt-6">
             <DialogTitle className="text-text-primary title-2xl-semi-bold">
-              {t('snippet.createDialogTitle', { ns: 'workflow' })}
+              {title || t('snippet.createDialogTitle', { ns: 'workflow' })}
             </DialogTitle>
           </div>
 
@@ -148,7 +160,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
               loading={isSubmitting}
               onClick={handleConfirm}
             >
-              {t('snippet.confirm', { ns: 'workflow' })}
+              {confirmText || t('snippet.confirm', { ns: 'workflow' })}
               <ShortcutsName className="ml-1" keys={['ctrl', 'enter']} bgColor="white" />
             </Button>
           </div>
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 4b8935c526..434f4bc4a5 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -439,14 +439,16 @@ const SelectionContextmenu = () => {
           ))}
         </ContextMenuContent>
       </ContextMenu>
-      <CreateSnippetDialog
-        isOpen={isCreateSnippetDialogOpen}
-        selectedNodeIds={selectedNodeIdsSnapshot}
-        onClose={handleCloseCreateSnippetDialog}
-        onConfirm={(payload) => {
-          void payload
-        }}
-      />
+      {isCreateSnippetDialogOpen && (
+        <CreateSnippetDialog
+          isOpen={isCreateSnippetDialogOpen}
+          selectedNodeIds={selectedNodeIdsSnapshot}
+          onClose={handleCloseCreateSnippetDialog}
+          onConfirm={(payload) => {
+            void payload
+          }}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
index 8ce20472eb..3bc86cfe43 100644
--- a/web/i18n/en-US/snippet.json
+++ b/web/i18n/en-US/snippet.json
@@ -3,9 +3,20 @@
   "createFailed": "Failed to create snippet",
   "createFromBlank": "Create from blank",
   "defaultName": "Untitled Snippet",
+  "deleteConfirmContent": "Deleting this snippet is irreversible. Its draft workflow and published content will no longer be available.",
+  "deleteConfirmTitle": "Delete Snippet?",
+  "deleteFailed": "Failed to delete snippet",
+  "deleted": "Snippet deleted",
+  "editDialogTitle": "Edit Snippet Info",
+  "editDone": "Snippet info updated",
+  "editFailed": "Failed to update snippet info",
+  "exportFailed": "Export snippet failed.",
   "importFailed": "Failed to import snippet DSL",
   "importSuccess": "Snippet imported",
   "inputFieldButton": "Input Field",
+  "menu.deleteSnippet": "Delete",
+  "menu.editInfo": "Edit Info",
+  "menu.exportSnippet": "Export Snippet",
   "notFoundDescription": "The requested snippet mock was not found.",
   "notFoundTitle": "Snippet not found",
   "panelDescription": "Defines the input fields that allow the snippet to receive data from other nodes.",
@@ -14,9 +25,11 @@
   "panelTitle": "Input Field",
   "publishButton": "Publish",
   "publishMenuCurrentDraft": "Current draft unpublished",
+  "save": "Save",
   "sectionEvaluation": "Evaluation",
   "sectionOrchestrate": "Orchestrate",
   "testRunButton": "Test run",
+  "typeLabel": "Snippet",
   "usageCount": "Used {{count}} times",
   "variableInspect": "Variable Inspect"
 }
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
index eeb38faf44..bb4514d622 100644
--- a/web/i18n/zh-Hans/snippet.json
+++ b/web/i18n/zh-Hans/snippet.json
@@ -3,9 +3,20 @@
   "createFailed": "创建 Snippet 失败",
   "createFromBlank": "创建空白 Snippet",
   "defaultName": "未命名 Snippet",
+  "deleteConfirmContent": "删除后不可恢复，草稿工作流和已发布内容都将无法继续使用。",
+  "deleteConfirmTitle": "删除 Snippet？",
+  "deleteFailed": "删除 Snippet 失败",
+  "deleted": "Snippet 已删除",
+  "editDialogTitle": "编辑 Snippet 信息",
+  "editDone": "Snippet 信息已更新",
+  "editFailed": "更新 Snippet 信息失败",
+  "exportFailed": "导出 Snippet 失败。",
   "importFailed": "导入 Snippet DSL 失败",
   "importSuccess": "Snippet 导入成功",
   "inputFieldButton": "输入字段",
+  "menu.deleteSnippet": "删除",
+  "menu.editInfo": "编辑信息",
+  "menu.exportSnippet": "导出 Snippet",
   "notFoundDescription": "未找到对应的 snippet 静态数据。",
   "notFoundTitle": "未找到 Snippet",
   "panelDescription": "定义允许 snippet 从其他节点接收数据的输入字段。",
@@ -14,9 +25,11 @@
   "panelTitle": "输入字段",
   "publishButton": "发布",
   "publishMenuCurrentDraft": "当前草稿未发布",
+  "save": "保存",
   "sectionEvaluation": "评测",
   "sectionOrchestrate": "编排",
   "testRunButton": "测试运行",
+  "typeLabel": "Snippet",
   "usageCount": "已使用 {{count}} 次",
   "variableInspect": "变量查看"
 }
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index f8fc8537ef..076510a5c9 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -263,6 +263,17 @@ export const useDeleteSnippetMutation = () => {
   })
 }
 
+export const useExportSnippetMutation = () => {
+  return useMutation<string, Error, { snippetId: string, include?: boolean }>({
+    mutationFn: ({ snippetId, include = false }) => {
+      return consoleClient.snippets.export({
+        params: { snippetId },
+        query: { include_secret: include ? 'true' : 'false' },
+      })
+    },
+  })
+}
+
 export const usePublishSnippetMutation = () => {
   const queryClient = useQueryClient()
 

From 26bc108bf1619002c3a55c5508c8d5a0add4ca1b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 25 Mar 2026 21:35:36 +0800
Subject: [PATCH 015/108] chore(web): tests for snippet info

---
 .../snippet-info/__tests__/dropdown.spec.tsx  | 281 ++++++++++++++++++
 .../snippet-info/__tests__/index.spec.tsx     |  62 ++++
 2 files changed, 343 insertions(+)
 create mode 100644 web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
 create mode 100644 web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx

diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
new file mode 100644
index 0000000000..9907cd895a
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
@@ -0,0 +1,281 @@
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { CreateSnippetDialogPayload } from '@/app/components/workflow/create-snippet-dialog'
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import SnippetInfoDropdown from '../dropdown'
+
+const mockReplace = vi.fn()
+const mockDownloadBlob = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockUpdateMutate = vi.fn()
+const mockExportMutateAsync = vi.fn()
+const mockDeleteMutate = vi.fn()
+let mockDropdownOpen = false
+let mockDropdownOnOpenChange: ((open: boolean) => void) | undefined
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    replace: mockReplace,
+  }),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadBlob: (args: { data: Blob, fileName: string }) => mockDownloadBlob(args),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+  DropdownMenu: ({
+    open,
+    onOpenChange,
+    children,
+  }: {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    children: React.ReactNode
+  }) => {
+    mockDropdownOpen = !!open
+    mockDropdownOnOpenChange = onOpenChange
+    return <div>{children}</div>
+  },
+  DropdownMenuTrigger: ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <button
+      type="button"
+      className={className}
+      onClick={() => mockDropdownOnOpenChange?.(!mockDropdownOpen)}
+    >
+      {children}
+    </button>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    mockDropdownOpen ? <div>{children}</div> : null
+  ),
+  DropdownMenuItem: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <button type="button" onClick={onClick}>
+      {children}
+    </button>
+  ),
+  DropdownMenuSeparator: () => <hr />,
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useUpdateSnippetMutation: () => ({
+    mutate: mockUpdateMutate,
+    isPending: false,
+  }),
+  useExportSnippetMutation: () => ({
+    mutateAsync: mockExportMutateAsync,
+    isPending: false,
+  }),
+  useDeleteSnippetMutation: () => ({
+    mutate: mockDeleteMutate,
+    isPending: false,
+  }),
+}))
+
+type MockCreateSnippetDialogProps = {
+  isOpen: boolean
+  title?: string
+  confirmText?: string
+  initialValue?: {
+    name?: string
+    description?: string
+    icon?: AppIconSelection
+  }
+  onClose: () => void
+  onConfirm: (payload: CreateSnippetDialogPayload) => void
+}
+
+vi.mock('@/app/components/workflow/create-snippet-dialog', () => ({
+  default: ({
+    isOpen,
+    title,
+    confirmText,
+    initialValue,
+    onClose,
+    onConfirm,
+  }: MockCreateSnippetDialogProps) => {
+    if (!isOpen)
+      return null
+
+    return (
+      <div data-testid="create-snippet-dialog">
+        <div>{title}</div>
+        <div>{confirmText}</div>
+        <div>{initialValue?.name}</div>
+        <div>{initialValue?.description}</div>
+        <button
+          type="button"
+          onClick={() => onConfirm({
+            name: 'Updated snippet',
+            description: 'Updated description',
+            icon: {
+              type: 'emoji',
+              icon: '✨',
+              background: '#FFFFFF',
+            },
+            selectedNodeIds: [],
+          })}
+        >
+          submit-edit
+        </button>
+        <button type="button" onClick={onClose}>close-edit</button>
+      </div>
+    )
+  },
+}))
+
+const mockSnippet: SnippetDetail = {
+  id: 'snippet-1',
+  name: 'Social Media Repurposer',
+  description: 'Turn one blog post into multiple social media variations.',
+  author: 'Dify',
+  updatedAt: '2026-03-25 10:00',
+  usage: '12',
+  icon: '🤖',
+  iconBackground: '#F0FDF9',
+  status: undefined,
+}
+
+describe('SnippetInfoDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockDropdownOpen = false
+    mockDropdownOnOpenChange = undefined
+  })
+
+  // Rendering coverage for the menu trigger itself.
+  describe('Rendering', () => {
+    it('should render the dropdown trigger button', () => {
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  // Edit flow should seed the dialog with current snippet info and submit updates.
+  describe('Edit Snippet', () => {
+    it('should open the edit dialog and submit snippet updates', async () => {
+      const user = userEvent.setup()
+      mockUpdateMutate.mockImplementation((_variables: unknown, options?: { onSuccess?: () => void }) => {
+        options?.onSuccess?.()
+      })
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.editInfo'))
+
+      expect(screen.getByTestId('create-snippet-dialog')).toBeInTheDocument()
+      expect(screen.getByText('snippet.editDialogTitle')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.save')).toBeInTheDocument()
+      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+      expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'submit-edit' }))
+
+      expect(mockUpdateMutate).toHaveBeenCalledWith({
+        params: { snippetId: mockSnippet.id },
+        body: {
+          name: 'Updated snippet',
+          description: 'Updated description',
+          icon_info: {
+            icon: '✨',
+            icon_type: 'emoji',
+            icon_background: '#FFFFFF',
+            icon_url: undefined,
+          },
+        },
+      }, expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }))
+      expect(mockToastSuccess).toHaveBeenCalledWith('snippet.editDone')
+    })
+  })
+
+  // Export should call the export hook and download the returned YAML blob.
+  describe('Export Snippet', () => {
+    it('should export and download the snippet yaml', async () => {
+      const user = userEvent.setup()
+      mockExportMutateAsync.mockResolvedValue('yaml: content')
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.exportSnippet'))
+
+      await waitFor(() => {
+        expect(mockExportMutateAsync).toHaveBeenCalledWith({ snippetId: mockSnippet.id })
+      })
+
+      expect(mockDownloadBlob).toHaveBeenCalledWith({
+        data: expect.any(Blob),
+        fileName: `${mockSnippet.name}.yml`,
+      })
+    })
+
+    it('should show an error toast when export fails', async () => {
+      const user = userEvent.setup()
+      mockExportMutateAsync.mockRejectedValue(new Error('export failed'))
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.exportSnippet'))
+
+      await waitFor(() => {
+        expect(mockToastError).toHaveBeenCalledWith('snippet.exportFailed')
+      })
+    })
+  })
+
+  // Delete should require confirmation and redirect after a successful mutation.
+  describe('Delete Snippet', () => {
+    it('should confirm deletion and redirect to the snippets list', async () => {
+      const user = userEvent.setup()
+      mockDeleteMutate.mockImplementation((_variables: unknown, options?: { onSuccess?: () => void }) => {
+        options?.onSuccess?.()
+      })
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.deleteSnippet'))
+
+      expect(screen.getByText('snippet.deleteConfirmTitle')).toBeInTheDocument()
+      expect(screen.getByText('snippet.deleteConfirmContent')).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'snippet.menu.deleteSnippet' }))
+
+      expect(mockDeleteMutate).toHaveBeenCalledWith({
+        params: { snippetId: mockSnippet.id },
+      }, expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }))
+      expect(mockToastSuccess).toHaveBeenCalledWith('snippet.deleted')
+      expect(mockReplace).toHaveBeenCalledWith('/snippets')
+    })
+  })
+})
diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..50754ffd23
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
@@ -0,0 +1,62 @@
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import SnippetInfo from '..'
+
+vi.mock('../dropdown', () => ({
+  default: () => <div data-testid="snippet-info-dropdown" />,
+}))
+
+const mockSnippet: SnippetDetail = {
+  id: 'snippet-1',
+  name: 'Social Media Repurposer',
+  description: 'Turn one blog post into multiple social media variations.',
+  author: 'Dify',
+  updatedAt: '2026-03-25 10:00',
+  usage: '12',
+  icon: '🤖',
+  iconBackground: '#F0FDF9',
+  status: undefined,
+}
+
+describe('SnippetInfo', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the collapsed and expanded sidebar header states.
+  describe('Rendering', () => {
+    it('should render the expanded snippet details and dropdown when expand is true', () => {
+      render(<SnippetInfo expand={true} snippet={mockSnippet} />)
+
+      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+      expect(screen.getByText('snippet.typeLabel')).toBeInTheDocument()
+      expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
+      expect(screen.getByTestId('snippet-info-dropdown')).toBeInTheDocument()
+    })
+
+    it('should hide the expanded-only content when expand is false', () => {
+      render(<SnippetInfo expand={false} snippet={mockSnippet} />)
+
+      expect(screen.queryByText(mockSnippet.name)).not.toBeInTheDocument()
+      expect(screen.queryByText('snippet.typeLabel')).not.toBeInTheDocument()
+      expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
+      expect(screen.queryByTestId('snippet-info-dropdown')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge cases around optional snippet fields should not break the header layout.
+  describe('Edge Cases', () => {
+    it('should omit the description block when the snippet has no description', () => {
+      render(
+        <SnippetInfo
+          expand={true}
+          snippet={{ ...mockSnippet, description: '' }}
+        />,
+      )
+
+      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+      expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
+    })
+  })
+})

From df3b960505a51aab8ae6bdb14b09f92d9e0e649c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 25 Mar 2026 22:02:50 +0800
Subject: [PATCH 016/108] fix(web): position of selection context menu in
 workflow graph

---
 .../__tests__/selection-contextmenu.spec.tsx  | 18 +++++++--
 .../workflow/selection-contextmenu.tsx        | 39 ++++++++++++-------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
index 247184349d..08f0f4ed3e 100644
--- a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
@@ -81,19 +81,31 @@ describe('SelectionContextmenu', () => {
     expect(screen.queryByText('operator.vertical')).not.toBeInTheDocument()
   })
 
-  it('should keep the menu inside the workflow container bounds', () => {
+  it('should still render the menu when the requested position exceeds workflow container bounds', () => {
     const nodes = [
       createNode({ id: 'n1', selected: true, width: 80, height: 40 }),
       createNode({ id: 'n2', selected: true, position: { x: 140, y: 0 }, width: 80, height: 40 }),
     ]
     const { store } = renderSelectionMenu({ nodes })
+    const container = document.querySelector('#workflow-container') as HTMLDivElement
+
+    vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+      x: 16,
+      y: 24,
+      left: 16,
+      top: 24,
+      right: 816,
+      bottom: 624,
+      width: 800,
+      height: 600,
+      toJSON: () => ({}),
+    })
 
     act(() => {
       store.setState({ selectionMenu: { left: 780, top: 590 } })
     })
 
-    const menu = screen.getByTestId('selection-contextmenu')
-    expect(menu).toHaveStyle({ left: '540px', top: '210px' })
+    expect(screen.getByTestId('selection-contextmenu-item-left')).toBeInTheDocument()
   })
 
   it('should close itself when only one node is selected', async () => {
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 434f4bc4a5..7f3d242eef 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -25,7 +25,6 @@ import {
   ContextMenuGroupLabel,
   ContextMenuItem,
   ContextMenuSeparator,
-  ContextMenuTrigger,
 } from '@/app/components/base/ui/context-menu'
 import CreateSnippetDialog from './create-snippet-dialog'
 import { useNodesReadOnly, useNodesSyncDraft } from './hooks'
@@ -295,6 +294,25 @@ const SelectionContextmenu = () => {
     return getMenuPosition(selectionMenu, container?.getBoundingClientRect())
   }, [selectionMenu])
 
+  const anchor = useMemo(() => {
+    if (!selectionMenu)
+      return null
+
+    const container = document.querySelector('#workflow-container')
+    const containerRect = container?.getBoundingClientRect()
+    if (!containerRect)
+      return null
+
+    return {
+      getBoundingClientRect: () => DOMRect.fromRect({
+        width: 0,
+        height: 0,
+        x: containerRect.left + menuPosition.left,
+        y: containerRect.top + menuPosition.top,
+      }),
+    }
+  }, [menuPosition.left, menuPosition.top, selectionMenu])
+
   useEffect(() => {
     if (selectionMenu && selectedNodes.length <= 1)
       handleSelectionContextmenuCancel()
@@ -382,18 +400,11 @@ const SelectionContextmenu = () => {
     }
   }, [store, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel])
 
-  if (!selectionMenu && !isCreateSnippetDialogOpen)
+  if ((!selectionMenu || !anchor) && !isCreateSnippetDialogOpen)
     return null
 
   return (
-    <div
-      className="absolute z-[9]"
-      data-testid="selection-contextmenu"
-      style={{
-        left: menuPosition.left,
-        top: menuPosition.top,
-      }}
-    >
+    <div data-testid="selection-contextmenu">
       <ContextMenu
         open
         onOpenChange={(open) => {
@@ -401,10 +412,10 @@ const SelectionContextmenu = () => {
             handleSelectionContextmenuCancel()
         }}
       >
-        <ContextMenuTrigger>
-          <span aria-hidden className="block size-px opacity-0" />
-        </ContextMenuTrigger>
-        <ContextMenuContent popupClassName="w-[240px]">
+        <ContextMenuContent
+          positionerProps={{ anchor }}
+          popupClassName="w-[240px]"
+        >
           {menuSections.map((section, sectionIndex) => (
             <ContextMenuGroup key={section.titleKey}>
               {sectionIndex > 0 && <ContextMenuSeparator />}

From 5e1f25204682866e4beb605095226d1af7776d13 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 25 Mar 2026 22:36:27 +0800
Subject: [PATCH 017/108] feat(web): selection context menu style update

---
 .../__tests__/selection-contextmenu.spec.tsx  |  44 +++++
 .../workflow/selection-contextmenu.tsx        | 175 +++++++++++-------
 2 files changed, 155 insertions(+), 64 deletions(-)

diff --git a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
index 08f0f4ed3e..9855c9e9eb 100644
--- a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
@@ -10,11 +10,19 @@ import { renderWorkflowFlowComponent } from './workflow-test-env'
 let latestNodes: Node[] = []
 let latestHistoryEvent: string | undefined
 const mockGetNodesReadOnly = vi.fn()
+const mockHandleNodesCopy = vi.fn()
+const mockHandleNodesDelete = vi.fn()
+const mockHandleNodesDuplicate = vi.fn()
 
 vi.mock('../hooks', async () => {
   const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
   return {
     ...actual,
+    useNodesInteractions: () => ({
+      handleNodesCopy: mockHandleNodesCopy,
+      handleNodesDelete: mockHandleNodesDelete,
+      handleNodesDuplicate: mockHandleNodesDuplicate,
+    }),
     useNodesReadOnly: () => ({
       getNodesReadOnly: mockGetNodesReadOnly,
     }),
@@ -73,6 +81,9 @@ describe('SelectionContextmenu', () => {
     latestHistoryEvent = undefined
     mockGetNodesReadOnly.mockReset()
     mockGetNodesReadOnly.mockReturnValue(false)
+    mockHandleNodesCopy.mockReset()
+    mockHandleNodesDelete.mockReset()
+    mockHandleNodesDuplicate.mockReset()
   })
 
   it('should not render when selectionMenu is absent', () => {
@@ -162,6 +173,39 @@ describe('SelectionContextmenu', () => {
     vi.useRealTimers()
   })
 
+  it('should render selection actions and delegate copy, duplicate, and delete', () => {
+    const nodes = [
+      createNode({ id: 'n1', selected: true, width: 40, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 80, y: 20 }, width: 40, height: 20 }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 120, top: 120 } })
+    })
+
+    expect(screen.getByTestId('selection-contextmenu-item-copy')).toHaveTextContent('workflow.common.copy')
+    expect(screen.getByTestId('selection-contextmenu-item-duplicate')).toHaveTextContent('workflow.common.duplicate')
+    expect(screen.getByTestId('selection-contextmenu-item-delete')).toHaveTextContent('common.operation.delete')
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-copy'))
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 120, top: 120 } })
+    })
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-duplicate'))
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 120, top: 120 } })
+    })
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-delete'))
+
+    expect(mockHandleNodesCopy).toHaveBeenCalledTimes(1)
+    expect(mockHandleNodesDuplicate).toHaveBeenCalledTimes(1)
+    expect(mockHandleNodesDelete).toHaveBeenCalledTimes(1)
+  })
+
   it('should distribute selected nodes horizontally', async () => {
     const nodes = [
       createNode({ id: 'n1', selected: true, position: { x: 0, y: 10 }, width: 20, height: 20 }),
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 7f3d242eef..435e25b49c 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -1,12 +1,13 @@
 import type { ComponentType } from 'react'
 import type { Node } from './types'
 import {
-  RiAlignBottom,
-  RiAlignCenter,
+  RiAlignItemBottomLine,
+  RiAlignItemHorizontalCenterLine,
+  RiAlignItemLeftLine,
+  RiAlignItemRightLine,
+  RiAlignItemTopLine,
+  RiAlignItemVerticalCenterLine,
   RiAlignJustify,
-  RiAlignLeft,
-  RiAlignRight,
-  RiAlignTop,
 } from '@remixicon/react'
 import { produce } from 'immer'
 import {
@@ -21,15 +22,15 @@ import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
 import {
   ContextMenu,
   ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuGroupLabel,
   ContextMenuItem,
   ContextMenuSeparator,
 } from '@/app/components/base/ui/context-menu'
+import { cn } from '@/utils/classnames'
 import CreateSnippetDialog from './create-snippet-dialog'
-import { useNodesReadOnly, useNodesSyncDraft } from './hooks'
+import { useNodesInteractions, useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
 import { useWorkflowHistory, WorkflowHistoryEvent } from './hooks/use-workflow-history'
+import ShortcutsName from './shortcuts-name'
 import { useStore, useWorkflowStore } from './store'
 import { BlockEnum, TRIGGER_NODE_TYPES } from './types'
 
@@ -60,48 +61,32 @@ type AlignBounds = {
   maxY: number
 }
 
-type MenuItem = {
+type AlignMenuItem = {
   alignType: AlignTypeValue
   icon: ComponentType<{ className?: string }>
   iconClassName?: string
   translationKey: string
 }
 
-type MenuSection = {
-  isolated?: boolean
-  titleKey: string
-  items: MenuItem[]
+type ActionMenuItem = {
+  action: 'copy' | 'createSnippet' | 'delete' | 'duplicate'
+  disabled?: boolean
+  shortcutKeys?: string[]
+  translationKey: string
 }
 
 const MENU_WIDTH = 240
-const MENU_HEIGHT = 380
+const MENU_HEIGHT = 240
 
-const menuSections: MenuSection[] = [
-  {
-    isolated: true,
-    titleKey: 'snippet.addToSnippet',
-    items: [
-      { alignType: AlignType.Top, icon: RiAlignTop, translationKey: 'snippet.addToSnippet' },
-    ],
-  },
-  {
-    titleKey: 'operator.vertical',
-    items: [
-      { alignType: AlignType.Top, icon: RiAlignTop, translationKey: 'operator.alignTop' },
-      { alignType: AlignType.Middle, icon: RiAlignCenter, iconClassName: 'rotate-90', translationKey: 'operator.alignMiddle' },
-      { alignType: AlignType.Bottom, icon: RiAlignBottom, translationKey: 'operator.alignBottom' },
-      { alignType: AlignType.DistributeVertical, icon: RiAlignJustify, iconClassName: 'rotate-90', translationKey: 'operator.distributeVertical' },
-    ],
-  },
-  {
-    titleKey: 'operator.horizontal',
-    items: [
-      { alignType: AlignType.Left, icon: RiAlignLeft, translationKey: 'operator.alignLeft' },
-      { alignType: AlignType.Center, icon: RiAlignCenter, translationKey: 'operator.alignCenter' },
-      { alignType: AlignType.Right, icon: RiAlignRight, translationKey: 'operator.alignRight' },
-      { alignType: AlignType.DistributeHorizontal, icon: RiAlignJustify, translationKey: 'operator.distributeHorizontal' },
-    ],
-  },
+const alignMenuItems: AlignMenuItem[] = [
+  { alignType: AlignType.Left, icon: RiAlignItemLeftLine, translationKey: 'operator.alignLeft' },
+  { alignType: AlignType.Center, icon: RiAlignItemHorizontalCenterLine, translationKey: 'operator.alignCenter' },
+  { alignType: AlignType.Right, icon: RiAlignItemRightLine, translationKey: 'operator.alignRight' },
+  { alignType: AlignType.Top, icon: RiAlignItemTopLine, translationKey: 'operator.alignTop' },
+  { alignType: AlignType.Middle, icon: RiAlignItemVerticalCenterLine, iconClassName: 'rotate-90', translationKey: 'operator.alignMiddle' },
+  { alignType: AlignType.Bottom, icon: RiAlignItemBottomLine, translationKey: 'operator.alignBottom' },
+  { alignType: AlignType.DistributeHorizontal, icon: RiAlignJustify, translationKey: 'operator.distributeHorizontal' },
+  { alignType: AlignType.DistributeVertical, icon: RiAlignJustify, iconClassName: 'rotate-90', translationKey: 'operator.distributeVertical' },
 ]
 
 const getMenuPosition = (
@@ -275,6 +260,7 @@ const distributeNodes = (
 const SelectionContextmenu = () => {
   const { t } = useTranslation()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const { handleNodesCopy, handleNodesDelete, handleNodesDuplicate } = useNodesInteractions()
   const { handleSelectionContextmenuCancel } = useSelectionInteractions()
   const selectionMenu = useStore(s => s.selectionMenu)
   const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
@@ -320,7 +306,10 @@ const SelectionContextmenu = () => {
 
   const isAddToSnippetDisabled = useMemo(() => {
     return selectedNodes.some(node =>
-      node.data.type === BlockEnum.Start || TRIGGER_NODE_TYPES.includes(node.data.type as typeof TRIGGER_NODE_TYPES[number]))
+      node.data.type === BlockEnum.Start
+      || node.data.type === BlockEnum.End
+      || node.data.type === BlockEnum.HumanInput
+      || TRIGGER_NODE_TYPES.includes(node.data.type as typeof TRIGGER_NODE_TYPES[number]))
   }, [selectedNodes])
 
   const handleOpenCreateSnippetDialog = useCallback(() => {
@@ -337,6 +326,55 @@ const SelectionContextmenu = () => {
     setSelectedNodeIdsSnapshot([])
   }, [])
 
+  const menuActions = useMemo<ActionMenuItem[]>(() => [
+    {
+      action: 'createSnippet',
+      disabled: isAddToSnippetDisabled,
+      translationKey: 'snippet.addToSnippet',
+    },
+    {
+      action: 'copy',
+      shortcutKeys: ['ctrl', 'c'],
+      translationKey: 'common.copy',
+    },
+    {
+      action: 'duplicate',
+      shortcutKeys: ['ctrl', 'd'],
+      translationKey: 'common.duplicate',
+    },
+    {
+      action: 'delete',
+      shortcutKeys: ['del'],
+      translationKey: 'operation.delete',
+    },
+  ], [isAddToSnippetDisabled])
+
+  const getActionLabel = useCallback((translationKey: string) => {
+    if (translationKey === 'operation.delete')
+      return t(translationKey, { ns: 'common', defaultValue: translationKey })
+
+    return t(translationKey, { ns: 'workflow', defaultValue: translationKey })
+  }, [t])
+
+  const handleMenuAction = useCallback((action: ActionMenuItem['action']) => {
+    switch (action) {
+      case 'createSnippet':
+        handleOpenCreateSnippetDialog()
+        return
+      case 'copy':
+        handleSelectionContextmenuCancel()
+        handleNodesCopy()
+        return
+      case 'duplicate':
+        handleSelectionContextmenuCancel()
+        handleNodesDuplicate()
+        return
+      case 'delete':
+        handleSelectionContextmenuCancel()
+        handleNodesDelete()
+    }
+  }, [handleNodesCopy, handleNodesDelete, handleNodesDuplicate, handleOpenCreateSnippetDialog, handleSelectionContextmenuCancel])
+
   const handleAlignNodes = useCallback((alignType: AlignTypeValue) => {
     if (getNodesReadOnly() || selectedNodes.length <= 1) {
       handleSelectionContextmenuCancel()
@@ -414,40 +452,49 @@ const SelectionContextmenu = () => {
       >
         <ContextMenuContent
           positionerProps={{ anchor }}
-          popupClassName="w-[240px]"
+          popupClassName="w-[240px] py-0"
         >
-          {menuSections.map((section, sectionIndex) => (
-            <ContextMenuGroup key={section.titleKey}>
-              {sectionIndex > 0 && <ContextMenuSeparator />}
-              {!section.isolated && (
-                <ContextMenuGroupLabel>
-                  {t(section.titleKey, { defaultValue: section.titleKey, ns: 'workflow' })}
-                </ContextMenuGroupLabel>
-              )}
-              {!section.isolated && section.items.map((item) => {
+          <div className="p-1">
+            {menuActions.map(item => (
+              <ContextMenuItem
+                key={item.action}
+                data-testid={`selection-contextmenu-item-${item.action}`}
+                disabled={item.disabled}
+                className={cn(
+                  'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] font-normal leading-5 text-text-secondary',
+                  item.action === 'delete' && 'data-[highlighted]:bg-state-destructive-hover data-[highlighted]:text-text-destructive',
+                )}
+                onClick={() => handleMenuAction(item.action)}
+              >
+                <span>{getActionLabel(item.translationKey)}</span>
+                {item.shortcutKeys && (
+                  <ShortcutsName
+                    keys={item.shortcutKeys}
+                    textColor="secondary"
+                  />
+                )}
+              </ContextMenuItem>
+            ))}
+          </div>
+          <ContextMenuSeparator className="my-0" />
+          <div className="p-1.5">
+            <div className="flex items-center">
+              {alignMenuItems.map((item) => {
                 const Icon = item.icon
                 return (
                   <ContextMenuItem
                     key={item.alignType}
+                    aria-label={t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
+                    className="mx-0 h-8 w-8 justify-center rounded-md px-0 text-text-tertiary data-[highlighted]:bg-state-base-hover data-[highlighted]:text-text-secondary"
                     data-testid={`selection-contextmenu-item-${item.alignType}`}
                     onClick={() => handleAlignNodes(item.alignType)}
                   >
-                    <Icon className={`h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
-                    {t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
+                    <Icon className={`h-[18px] w-[18px] ${item.iconClassName ?? ''}`.trim()} />
                   </ContextMenuItem>
                 )
               })}
-              {section.isolated && (
-                <ContextMenuItem
-                  key="create-snippet"
-                  data-testid="selection-contextmenu-item-create-snippet"
-                  onClick={handleOpenCreateSnippetDialog}
-                >
-                  {t(section.titleKey, { defaultValue: section.titleKey, ns: 'workflow' })}
-                </ContextMenuItem>
-              )}
-            </ContextMenuGroup>
-          ))}
+            </div>
+          </div>
         </ContextMenuContent>
       </ContextMenu>
       {isCreateSnippetDialogOpen && (

From 6318bf0a2a36b103a7589509a0b3f1278fdb5bb8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 25 Mar 2026 22:57:48 +0800
Subject: [PATCH 018/108] feat(web): create snippet from workflow

---
 .../snippet-info/__tests__/dropdown.spec.tsx  |   6 +-
 .../app-sidebar/snippet-info/dropdown.tsx     |   1 -
 .../components/snippet-create-card.tsx        |   1 -
 .../__tests__/selection-contextmenu.spec.tsx  | 106 +++++++++++++
 .../workflow/create-snippet-dialog.tsx        |  17 ++-
 .../workflow/selection-contextmenu.tsx        | 140 ++++++++++++++++--
 6 files changed, 254 insertions(+), 17 deletions(-)

diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
index 9907cd895a..4c24af692b 100644
--- a/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
@@ -135,7 +135,11 @@ vi.mock('@/app/components/workflow/create-snippet-dialog', () => ({
               icon: '✨',
               background: '#FFFFFF',
             },
-            selectedNodeIds: [],
+            graph: {
+              nodes: [],
+              edges: [],
+              viewport: { x: 0, y: 0, zoom: 1 },
+            },
           })}
         >
           submit-edit
diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
index 52ab64d817..4022c6f3ec 100644
--- a/web/app/components/app-sidebar/snippet-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -158,7 +158,6 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
       {isEditDialogOpen && (
         <CreateSnippetDialog
           isOpen={isEditDialogOpen}
-          selectedNodeIds={[]}
           initialValue={initialValue}
           title={t('editDialogTitle')}
           confirmText={t('operation.save', { ns: 'common' })}
diff --git a/web/app/components/snippets/components/snippet-create-card.tsx b/web/app/components/snippets/components/snippet-create-card.tsx
index 4ed5b32a35..9702c5a90e 100644
--- a/web/app/components/snippets/components/snippet-create-card.tsx
+++ b/web/app/components/snippets/components/snippet-create-card.tsx
@@ -86,7 +86,6 @@ const SnippetCreateCard = () => {
       {isCreateDialogOpen && (
         <CreateSnippetDialog
           isOpen={isCreateDialogOpen}
-          selectedNodeIds={[]}
           isSubmitting={createSnippetMutation.isPending}
           onClose={() => setIsCreateDialogOpen(false)}
           onConfirm={handleCreateSnippet}
diff --git a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
index 9855c9e9eb..c0a4624cf5 100644
--- a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
@@ -13,6 +13,39 @@ const mockGetNodesReadOnly = vi.fn()
 const mockHandleNodesCopy = vi.fn()
 const mockHandleNodesDelete = vi.fn()
 const mockHandleNodesDuplicate = vi.fn()
+const mockPush = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockCreateSnippetMutateAsync = vi.fn()
+const mockSyncDraftWorkflow = vi.fn()
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useCreateSnippetMutation: () => ({
+    mutateAsync: mockCreateSnippetMutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    snippets: {
+      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+    },
+  },
+}))
 
 vi.mock('../hooks', async () => {
   const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
@@ -84,6 +117,11 @@ describe('SelectionContextmenu', () => {
     mockHandleNodesCopy.mockReset()
     mockHandleNodesDelete.mockReset()
     mockHandleNodesDuplicate.mockReset()
+    mockPush.mockReset()
+    mockToastSuccess.mockReset()
+    mockToastError.mockReset()
+    mockCreateSnippetMutateAsync.mockReset()
+    mockSyncDraftWorkflow.mockReset()
   })
 
   it('should not render when selectionMenu is absent', () => {
@@ -206,6 +244,74 @@ describe('SelectionContextmenu', () => {
     expect(mockHandleNodesDelete).toHaveBeenCalledTimes(1)
   })
 
+  it('should create a snippet with the selected graph and redirect to the snippet detail page', async () => {
+    mockCreateSnippetMutateAsync.mockResolvedValue({ id: 'snippet-123' })
+    mockSyncDraftWorkflow.mockResolvedValue({ result: 'success' })
+
+    const nodes = [
+      createNode({ id: 'n1', selected: true, position: { x: 120, y: 60 }, width: 40, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 260, y: 120 }, width: 60, height: 30 }),
+      createNode({ id: 'n3', selected: false, position: { x: 500, y: 300 }, width: 40, height: 20 }),
+    ]
+    const edges = [
+      createEdge({ id: 'e1', source: 'n1', target: 'n2' }),
+      createEdge({ id: 'e2', source: 'n2', target: 'n3' }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes, edges })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 120, top: 120 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-createSnippet'))
+    fireEvent.change(screen.getByPlaceholderText('workflow.snippet.namePlaceholder'), {
+      target: { value: 'My snippet' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: /workflow\.snippet\.confirm/i }))
+
+    await waitFor(() => {
+      expect(mockCreateSnippetMutateAsync).toHaveBeenCalledWith({
+        body: expect.objectContaining({
+          name: 'My snippet',
+        }),
+      })
+    })
+
+    expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-123' },
+      body: {
+        graph: {
+          nodes: [
+            expect.objectContaining({
+              id: 'n1',
+              position: { x: 0, y: 0 },
+              selected: false,
+              data: expect.objectContaining({ selected: false }),
+            }),
+            expect.objectContaining({
+              id: 'n2',
+              position: { x: 140, y: 60 },
+              selected: false,
+              data: expect.objectContaining({ selected: false }),
+            }),
+          ],
+          edges: [
+            expect.objectContaining({
+              id: 'e1',
+              source: 'n1',
+              target: 'n2',
+              selected: false,
+            }),
+          ],
+          viewport: { x: 0, y: 0, zoom: 1 },
+        },
+      },
+    })
+    expect(mockToastSuccess).toHaveBeenCalledWith('workflow.snippet.createSuccess')
+    expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
+  })
+
   it('should distribute selected nodes horizontally', async () => {
     const nodes = [
       createNode({ id: 'n1', selected: true, position: { x: 0, y: 10 }, width: 20, height: 20 }),
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
index 2da326bc27..1c0e84a50d 100644
--- a/web/app/components/workflow/create-snippet-dialog.tsx
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from 'react'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { SnippetCanvasData } from '@/models/snippet'
 import { useKeyPress } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,7 +18,7 @@ export type CreateSnippetDialogPayload = {
   name: string
   description: string
   icon: AppIconSelection
-  selectedNodeIds: string[]
+  graph: SnippetCanvasData
 }
 
 export type CreateSnippetDialogInitialValue = {
@@ -28,7 +29,7 @@ export type CreateSnippetDialogInitialValue = {
 
 type CreateSnippetDialogProps = {
   isOpen: boolean
-  selectedNodeIds: string[]
+  selectedGraph?: SnippetCanvasData
   onClose: () => void
   onConfirm: (payload: CreateSnippetDialogPayload) => void
   isSubmitting?: boolean
@@ -43,9 +44,15 @@ const defaultIcon: AppIconSelection = {
   background: '#FFEAD5',
 }
 
+const defaultGraph: SnippetCanvasData = {
+  nodes: [],
+  edges: [],
+  viewport: { x: 0, y: 0, zoom: 1 },
+}
+
 const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
   isOpen,
-  selectedNodeIds,
+  selectedGraph,
   onClose,
   onConfirm,
   isSubmitting = false,
@@ -82,11 +89,11 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
       name: trimmedName,
       description: trimmedDescription,
       icon,
-      selectedNodeIds,
+      graph: selectedGraph ?? defaultGraph,
     }
 
     onConfirm(payload)
-  }, [description, icon, name, onConfirm, selectedNodeIds])
+  }, [description, icon, name, onConfirm, selectedGraph])
 
   useKeyPress(['meta.enter', 'ctrl.enter'], () => {
     if (!isOpen)
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 435e25b49c..35bc21b435 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -1,5 +1,7 @@
 import type { ComponentType } from 'react'
-import type { Node } from './types'
+import type { CreateSnippetDialogPayload } from './create-snippet-dialog'
+import type { Edge, Node } from './types'
+import type { SnippetCanvasData } from '@/models/snippet'
 import {
   RiAlignItemBottomLine,
   RiAlignItemHorizontalCenterLine,
@@ -25,6 +27,10 @@ import {
   ContextMenuItem,
   ContextMenuSeparator,
 } from '@/app/components/base/ui/context-menu'
+import { toast } from '@/app/components/base/ui/toast'
+import { useRouter } from '@/next/navigation'
+import { consoleClient } from '@/service/client'
+import { useCreateSnippetMutation } from '@/service/use-snippets'
 import { cn } from '@/utils/classnames'
 import CreateSnippetDialog from './create-snippet-dialog'
 import { useNodesInteractions, useNodesReadOnly, useNodesSyncDraft } from './hooks'
@@ -77,6 +83,7 @@ type ActionMenuItem = {
 
 const MENU_WIDTH = 240
 const MENU_HEIGHT = 240
+const DEFAULT_SNIPPET_VIEWPORT: SnippetCanvasData['viewport'] = { x: 0, y: 0, zoom: 1 }
 
 const alignMenuItems: AlignMenuItem[] = [
   { alignType: AlignType.Left, icon: RiAlignItemLeftLine, translationKey: 'operator.alignLeft' },
@@ -257,14 +264,88 @@ const distributeNodes = (
   })
 }
 
+const getSelectedSnippetGraph = (
+  nodes: Node[],
+  edges: Edge[],
+  selectedNodes: Node[],
+): SnippetCanvasData => {
+  const includedNodeIds = new Set(selectedNodes.map(node => node.id))
+
+  let shouldExpand = true
+  while (shouldExpand) {
+    shouldExpand = false
+
+    nodes.forEach((node) => {
+      if (!includedNodeIds.has(node.id))
+        return
+
+      if (node.parentId && !includedNodeIds.has(node.parentId)) {
+        includedNodeIds.add(node.parentId)
+        shouldExpand = true
+      }
+
+      node.data._children?.forEach((child) => {
+        if (!includedNodeIds.has(child.nodeId)) {
+          includedNodeIds.add(child.nodeId)
+          shouldExpand = true
+        }
+      })
+    })
+  }
+
+  const rootNodes = nodes.filter(node => includedNodeIds.has(node.id) && (!node.parentId || !includedNodeIds.has(node.parentId)))
+  const minRootX = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.x)) : 0
+  const minRootY = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.y)) : 0
+
+  return {
+    nodes: nodes
+      .filter(node => includedNodeIds.has(node.id))
+      .map((node) => {
+        const isRootNode = !node.parentId || !includedNodeIds.has(node.parentId)
+        const nextPosition = isRootNode
+          ? { x: node.position.x - minRootX, y: node.position.y - minRootY }
+          : node.position
+
+        return {
+          ...node,
+          position: nextPosition,
+          positionAbsolute: node.positionAbsolute
+            ? (isRootNode
+                ? {
+                    x: node.positionAbsolute.x - minRootX,
+                    y: node.positionAbsolute.y - minRootY,
+                  }
+                : node.positionAbsolute)
+            : undefined,
+          selected: false,
+          data: {
+            ...node.data,
+            selected: false,
+            _children: node.data._children?.filter(child => includedNodeIds.has(child.nodeId)),
+          },
+        }
+      }),
+    edges: edges
+      .filter(edge => includedNodeIds.has(edge.source) && includedNodeIds.has(edge.target))
+      .map(edge => ({
+        ...edge,
+        selected: false,
+      })),
+    viewport: DEFAULT_SNIPPET_VIEWPORT,
+  }
+}
+
 const SelectionContextmenu = () => {
   const { t } = useTranslation()
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleNodesCopy, handleNodesDelete, handleNodesDuplicate } = useNodesInteractions()
   const { handleSelectionContextmenuCancel } = useSelectionInteractions()
   const selectionMenu = useStore(s => s.selectionMenu)
   const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
-  const [selectedNodeIdsSnapshot, setSelectedNodeIdsSnapshot] = useState<string[]>([])
+  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
+  const [selectedGraphSnapshot, setSelectedGraphSnapshot] = useState<SnippetCanvasData | undefined>()
 
   // Access React Flow methods
   const store = useStoreApi()
@@ -316,16 +397,58 @@ const SelectionContextmenu = () => {
     if (isAddToSnippetDisabled)
       return
 
-    setSelectedNodeIdsSnapshot(selectedNodes.map(node => node.id))
+    const nodes = store.getState().getNodes()
+    const { edges } = store.getState()
+
+    setSelectedGraphSnapshot(getSelectedSnippetGraph(nodes, edges, selectedNodes))
     setIsCreateSnippetDialogOpen(true)
     handleSelectionContextmenuCancel()
-  }, [handleSelectionContextmenuCancel, isAddToSnippetDisabled, selectedNodes])
+  }, [handleSelectionContextmenuCancel, isAddToSnippetDisabled, selectedNodes, store])
 
   const handleCloseCreateSnippetDialog = useCallback(() => {
     setIsCreateSnippetDialogOpen(false)
-    setSelectedNodeIdsSnapshot([])
+    setSelectedGraphSnapshot(undefined)
   }, [])
 
+  const handleCreateSnippet = useCallback(async ({
+    name,
+    description,
+    icon,
+    graph,
+  }: CreateSnippetDialogPayload) => {
+    setIsCreatingSnippet(true)
+
+    try {
+      const snippet = await createSnippetMutation.mutateAsync({
+        body: {
+          name,
+          description: description || undefined,
+          icon_info: {
+            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+            icon_type: icon.type,
+            icon_background: icon.type === 'emoji' ? icon.background : undefined,
+            icon_url: icon.type === 'image' ? icon.url : undefined,
+          },
+        },
+      })
+
+      await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId: snippet.id },
+        body: { graph },
+      })
+
+      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+      handleCloseCreateSnippetDialog()
+      push(`/snippets/${snippet.id}/orchestrate`)
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+    finally {
+      setIsCreatingSnippet(false)
+    }
+  }, [createSnippetMutation, handleCloseCreateSnippetDialog, push, t])
+
   const menuActions = useMemo<ActionMenuItem[]>(() => [
     {
       action: 'createSnippet',
@@ -500,11 +623,10 @@ const SelectionContextmenu = () => {
       {isCreateSnippetDialogOpen && (
         <CreateSnippetDialog
           isOpen={isCreateSnippetDialogOpen}
-          selectedNodeIds={selectedNodeIdsSnapshot}
+          selectedGraph={selectedGraphSnapshot}
+          isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
           onClose={handleCloseCreateSnippetDialog}
-          onConfirm={(payload) => {
-            void payload
-          }}
+          onConfirm={handleCreateSnippet}
         />
       )}
     </div>

From f0ae8d6167fe3790872a4dda55725683e475ff6c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Mar 2026 16:28:56 +0800
Subject: [PATCH 019/108] fix(web): unused imports caused by merge

---
 .../components/workflow/selection-contextmenu.tsx    | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index aa631f5ff8..8286b7006e 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -1,15 +1,6 @@
 import type { CreateSnippetDialogPayload } from './create-snippet-dialog'
 import type { Edge, Node } from './types'
 import type { SnippetCanvasData } from '@/models/snippet'
-import {
-  RiAlignItemBottomLine,
-  RiAlignItemHorizontalCenterLine,
-  RiAlignItemLeftLine,
-  RiAlignItemRightLine,
-  RiAlignItemTopLine,
-  RiAlignItemVerticalCenterLine,
-  RiAlignJustify,
-} from '@remixicon/react'
 import { produce } from 'immer'
 import {
   memo,
@@ -73,8 +64,6 @@ type ActionMenuItem = {
   translationKey: string
 }
 
-const MENU_WIDTH = 240
-const MENU_HEIGHT = 240
 const DEFAULT_SNIPPET_VIEWPORT: SnippetCanvasData['viewport'] = { x: 0, y: 0, zoom: 1 }
 
 const alignMenuItems: AlignMenuItem[] = [
@@ -562,7 +551,6 @@ const SelectionContextmenu = () => {
           <div className="p-1.5">
             <div className="flex items-center">
               {alignMenuItems.map((item) => {
-                const Icon = item.icon
                 return (
                   <ContextMenuItem
                     key={item.alignType}

From 7de45584ce0a72b4fe9389ef7491585b9d60ef9f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Mar 2026 20:41:51 +0800
Subject: [PATCH 020/108] refactor: snippets list

---
 .../block-selector/snippet-detail-card.tsx    |  59 +++++
 .../block-selector/snippet-list-item.tsx      |  51 ++++
 .../workflow/block-selector/snippets.tsx      | 222 ++++++++----------
 3 files changed, 208 insertions(+), 124 deletions(-)
 create mode 100644 web/app/components/workflow/block-selector/snippet-detail-card.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippet-list-item.tsx

diff --git a/web/app/components/workflow/block-selector/snippet-detail-card.tsx b/web/app/components/workflow/block-selector/snippet-detail-card.tsx
new file mode 100644
index 0000000000..65f6ba3d9e
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippet-detail-card.tsx
@@ -0,0 +1,59 @@
+import type { FC } from 'react'
+import type { BlockEnum } from '../types'
+import type { Snippet as SnippetDetail } from '@/types/snippet'
+import AppIcon from '@/app/components/base/app-icon'
+import BlockIcon from '../block-icon'
+
+export type PublishedSnippetDetail = SnippetDetail & {
+  relatedBlocks?: BlockEnum[]
+}
+
+type SnippetDetailCardProps = {
+  snippet: PublishedSnippetDetail
+}
+
+const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
+  snippet,
+}) => {
+  const { author, description, icon_info, name, relatedBlocks = [] } = snippet
+
+  return (
+    <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <AppIcon
+            size="tiny"
+            iconType={icon_info.icon_type}
+            icon={icon_info.icon}
+            background={icon_info.icon_background}
+            imageUrl={icon_info.icon_url}
+          />
+          <div className="text-text-primary system-md-medium">{name}</div>
+        </div>
+        {!!description && (
+          <div className="w-[200px] text-text-secondary system-xs-regular">
+            {description}
+          </div>
+        )}
+        {!!relatedBlocks.length && (
+          <div className="flex items-center gap-0.5 pt-1">
+            {relatedBlocks.map(block => (
+              <BlockIcon
+                key={block}
+                type={block}
+                size="sm"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {!!author && (
+        <div className="pt-3 text-text-tertiary system-xs-regular">
+          {author}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SnippetDetailCard
diff --git a/web/app/components/workflow/block-selector/snippet-list-item.tsx b/web/app/components/workflow/block-selector/snippet-list-item.tsx
new file mode 100644
index 0000000000..ba76a84ae4
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippet-list-item.tsx
@@ -0,0 +1,51 @@
+import type {
+  ComponentPropsWithoutRef,
+  Ref,
+} from 'react'
+import type { PublishedSnippetDetail } from './snippet-detail-card'
+import AppIcon from '@/app/components/base/app-icon'
+import { cn } from '@/utils/classnames'
+
+type SnippetListItemProps = {
+  isHovered: boolean
+  ref?: Ref<HTMLDivElement>
+  snippet: PublishedSnippetDetail
+} & ComponentPropsWithoutRef<'div'>
+
+const SnippetListItem = ({
+  isHovered,
+  snippet,
+  className,
+  ref,
+  ...props
+}: SnippetListItemProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex h-8 items-center gap-2 rounded-lg px-3',
+        isHovered && 'bg-background-default-hover',
+        className,
+      )}
+      {...props}
+    >
+      <AppIcon
+        size="tiny"
+        iconType={snippet.icon_info.icon_type}
+        icon={snippet.icon_info.icon}
+        background={snippet.icon_info.icon_background}
+        imageUrl={snippet.icon_info.icon_url}
+      />
+      <div className="min-w-0 text-text-secondary system-sm-medium">
+        {snippet.name}
+      </div>
+      {isHovered && snippet.author && (
+        <div className="ml-auto text-text-tertiary system-xs-regular">
+          {snippet.author}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SnippetListItem
diff --git a/web/app/components/workflow/block-selector/snippets.tsx b/web/app/components/workflow/block-selector/snippets.tsx
index dfbdbd3178..37f571e587 100644
--- a/web/app/components/workflow/block-selector/snippets.tsx
+++ b/web/app/components/workflow/block-selector/snippets.tsx
@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react'
+import type { CreateSnippetDialogPayload } from '../create-snippet-dialog'
+import type { Snippet as SnippetDetail } from '@/types/snippet'
 import {
   memo,
   useDeferredValue,
@@ -7,40 +8,49 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import {
-  SearchMenu,
-} from '@/app/components/base/icons/src/vender/line/others'
+import { toast } from '@/app/components/base/ui/toast'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/app/components/base/ui/tooltip'
+import { useRouter } from '@/next/navigation'
+import { consoleClient } from '@/service/client'
+import { useCreateSnippetMutation } from '@/service/use-snippets'
 import { cn } from '@/utils/classnames'
-import BlockIcon from '../block-icon'
+import CreateSnippetDialog from '../create-snippet-dialog'
 import { BlockEnum } from '../types'
+import SnippetDetailCard from './snippet-detail-card'
+import SnippetListItem from './snippet-list-item'
 
 type SnippetsProps = {
   loading?: boolean
   searchText: string
 }
 
-type StaticSnippet = {
-  id: string
-  badge: string
-  badgeClassName: string
-  title: string
-  description: string
-  author?: string
+type StaticSnippet = SnippetDetail & {
   relatedBlocks?: BlockEnum[]
 }
 
 const STATIC_SNIPPETS: StaticSnippet[] = [
   {
     id: 'customer-review',
-    badge: 'CR',
-    title: 'Customer Review',
-    description: 'Customer Review Description',
+    name: 'Customer Review',
+    description: 'Collects customer review context, classifies request intent, and routes the workflow through the right generation branch.',
     author: 'Evan',
+    type: 'group',
+    is_published: true,
+    version: '1.0.0',
+    use_count: 128,
+    input_fields: [],
+    created_at: 1742889600,
+    updated_at: 1742976000,
+    icon_info: {
+      icon_type: 'emoji',
+      icon: '🧾',
+      icon_background: '#FFEAD5',
+      icon_url: '',
+    },
     relatedBlocks: [
       BlockEnum.LLM,
       BlockEnum.Code,
@@ -48,7 +58,6 @@ const STATIC_SNIPPETS: StaticSnippet[] = [
       BlockEnum.QuestionClassifier,
       BlockEnum.IfElse,
     ],
-    badgeClassName: 'bg-gradient-to-br from-orange-500 to-rose-500',
   },
 ] as const
 
@@ -76,76 +85,17 @@ const LoadingSkeleton = () => {
   )
 }
 
-const SnippetBadge = ({
-  badge,
-  badgeClassName,
-}: Pick<StaticSnippet, 'badge' | 'badgeClassName'>) => {
-  return (
-    <div
-      aria-hidden="true"
-      className={cn(
-        'flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-[9px] font-semibold uppercase text-white shadow-[0px_3px_10px_-2px_rgba(9,9,11,0.08),0px_2px_4px_-2px_rgba(9,9,11,0.06)]',
-        badgeClassName,
-      )}
-    >
-      {badge}
-    </div>
-  )
-}
-
-const SnippetDetailCard = ({
-  author,
-  description,
-  relatedBlocks = [],
-  title,
-  triggerBadge,
-}: {
-  author?: string
-  description?: string
-  relatedBlocks?: BlockEnum[]
-  title: string
-  triggerBadge: ReactNode
-}) => {
-  return (
-    <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
-      <div className="flex flex-col gap-2">
-        <div className="flex flex-col gap-2">
-          {triggerBadge}
-          <div className="text-text-primary system-md-medium">{title}</div>
-        </div>
-        {!!description && (
-          <div className="w-[200px] text-text-secondary system-xs-regular">
-            {description}
-          </div>
-        )}
-        {!!relatedBlocks.length && (
-          <div className="flex items-center gap-0.5 pt-1">
-            {relatedBlocks.map(block => (
-              <BlockIcon
-                key={block}
-                type={block}
-                size="sm"
-              />
-            ))}
-          </div>
-        )}
-      </div>
-      {!!author && (
-        <div className="pt-3 text-text-tertiary system-xs-regular">
-          {author}
-        </div>
-      )}
-    </div>
-  )
-}
-
 const Snippets = ({
   loading = false,
   searchText,
 }: SnippetsProps) => {
   const { t } = useTranslation()
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
   const deferredSearchText = useDeferredValue(searchText)
   const [hoveredSnippetId, setHoveredSnippetId] = useState<string | null>(null)
+  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
+  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
 
   const snippets = useMemo(() => {
     return STATIC_SNIPPETS.map(item => ({
@@ -153,12 +103,55 @@ const Snippets = ({
     }))
   }, [])
 
+  const handleCloseCreateSnippetDialog = () => {
+    setIsCreateSnippetDialogOpen(false)
+  }
+
+  const handleCreateSnippet = async ({
+    name,
+    description,
+    icon,
+    graph,
+  }: CreateSnippetDialogPayload) => {
+    setIsCreatingSnippet(true)
+
+    try {
+      const snippet = await createSnippetMutation.mutateAsync({
+        body: {
+          name,
+          description: description || undefined,
+          icon_info: {
+            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+            icon_type: icon.type,
+            icon_background: icon.type === 'emoji' ? icon.background : undefined,
+            icon_url: icon.type === 'image' ? icon.url : undefined,
+          },
+        },
+      })
+
+      await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId: snippet.id },
+        body: { graph },
+      })
+
+      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+      handleCloseCreateSnippetDialog()
+      push(`/snippets/${snippet.id}/orchestrate`)
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+    finally {
+      setIsCreatingSnippet(false)
+    }
+  }
+
   const filteredSnippets = useMemo(() => {
     const normalizedSearch = deferredSearchText.trim().toLowerCase()
     if (!normalizedSearch)
       return snippets
 
-    return snippets.filter(item => item.title.toLowerCase().includes(normalizedSearch))
+    return snippets.filter(item => item.name.toLowerCase().includes(normalizedSearch))
   }, [deferredSearchText, snippets])
 
   if (loading)
@@ -166,53 +159,40 @@ const Snippets = ({
 
   if (!filteredSnippets.length) {
     return (
-      <div className="flex min-h-[480px] flex-col items-center justify-center gap-2 px-4">
-        <SearchMenu className="h-8 w-8 text-text-tertiary" />
-        <div className="text-text-secondary system-sm-regular">
-          {t('tabs.noSnippetsFound', { ns: 'workflow' })}
+      <>
+        <div className="flex min-h-[480px] flex-col items-center justify-center gap-2 px-4">
+          <span className="i-custom-vender-line-others-search-menu h-8 w-8 text-text-tertiary" />
+          <div className="text-text-secondary system-sm-regular">
+            {t('tabs.noSnippetsFound', { ns: 'workflow' })}
+          </div>
+          <Button
+            variant="secondary-accent"
+            size="small"
+            onClick={() => setIsCreateSnippetDialogOpen(true)}
+          >
+            {t('tabs.createSnippet', { ns: 'workflow' })}
+          </Button>
         </div>
-        <Button
-          variant="secondary-accent"
-          size="small"
-          onClick={(e) => {
-            e.preventDefault()
-          }}
-        >
-          {t('tabs.createSnippet', { ns: 'workflow' })}
-        </Button>
-      </div>
+        <CreateSnippetDialog
+          isOpen={isCreateSnippetDialogOpen}
+          isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
+          onClose={handleCloseCreateSnippetDialog}
+          onConfirm={handleCreateSnippet}
+        />
+      </>
     )
   }
 
   return (
     <div className="max-h-[480px] max-w-[500px] overflow-y-auto p-1">
       {filteredSnippets.map((item) => {
-        const badge = (
-          <SnippetBadge
-            badge={item.badge}
-            badgeClassName={item.badgeClassName}
-          />
-        )
-
         const row = (
-          <div
-            className={cn(
-              'flex h-8 items-center gap-2 rounded-lg px-3',
-              hoveredSnippetId === item.id && 'bg-background-default-hover',
-            )}
+          <SnippetListItem
+            snippet={item}
+            isHovered={hoveredSnippetId === item.id}
             onMouseEnter={() => setHoveredSnippetId(item.id)}
             onMouseLeave={() => setHoveredSnippetId(current => current === item.id ? null : current)}
-          >
-            {badge}
-            <div className="min-w-0 text-text-secondary system-sm-medium">
-              {item.title}
-            </div>
-            {hoveredSnippetId === item.id && item.author && (
-              <div className="ml-auto text-text-tertiary system-xs-regular">
-                {item.author}
-              </div>
-            )}
-          </div>
+          />
         )
 
         if (!item.description)
@@ -229,13 +209,7 @@ const Snippets = ({
               variant="plain"
               popupClassName="!bg-transparent !p-0"
             >
-              <SnippetDetailCard
-                author={item.author}
-                description={item.description}
-                relatedBlocks={item.relatedBlocks}
-                title={item.title}
-                triggerBadge={badge}
-              />
+              <SnippetDetailCard snippet={item} />
             </TooltipContent>
           </Tooltip>
         )

From 6876c8041c808d81de5d100d27b0b2f05cad0256 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Mar 2026 20:58:42 +0800
Subject: [PATCH 021/108] feat(web): snippet list data fetching in block
 selector

---
 .../workflow/block-selector/snippets.tsx      | 221 -----------------
 .../block-selector/snippets/index.tsx         | 223 ++++++++++++++++++
 .../{ => snippets}/snippet-detail-card.tsx    |  23 +-
 .../snippets/snippet-empty-state.tsx          |  31 +++
 .../{ => snippets}/snippet-list-item.tsx      |   4 +-
 5 files changed, 260 insertions(+), 242 deletions(-)
 delete mode 100644 web/app/components/workflow/block-selector/snippets.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/index.tsx
 rename web/app/components/workflow/block-selector/{ => snippets}/snippet-detail-card.tsx (63%)
 create mode 100644 web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
 rename web/app/components/workflow/block-selector/{ => snippets}/snippet-list-item.tsx (91%)

diff --git a/web/app/components/workflow/block-selector/snippets.tsx b/web/app/components/workflow/block-selector/snippets.tsx
deleted file mode 100644
index 37f571e587..0000000000
--- a/web/app/components/workflow/block-selector/snippets.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import type { CreateSnippetDialogPayload } from '../create-snippet-dialog'
-import type { Snippet as SnippetDetail } from '@/types/snippet'
-import {
-  memo,
-  useDeferredValue,
-  useMemo,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import { toast } from '@/app/components/base/ui/toast'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
-import { useRouter } from '@/next/navigation'
-import { consoleClient } from '@/service/client'
-import { useCreateSnippetMutation } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
-import CreateSnippetDialog from '../create-snippet-dialog'
-import { BlockEnum } from '../types'
-import SnippetDetailCard from './snippet-detail-card'
-import SnippetListItem from './snippet-list-item'
-
-type SnippetsProps = {
-  loading?: boolean
-  searchText: string
-}
-
-type StaticSnippet = SnippetDetail & {
-  relatedBlocks?: BlockEnum[]
-}
-
-const STATIC_SNIPPETS: StaticSnippet[] = [
-  {
-    id: 'customer-review',
-    name: 'Customer Review',
-    description: 'Collects customer review context, classifies request intent, and routes the workflow through the right generation branch.',
-    author: 'Evan',
-    type: 'group',
-    is_published: true,
-    version: '1.0.0',
-    use_count: 128,
-    input_fields: [],
-    created_at: 1742889600,
-    updated_at: 1742976000,
-    icon_info: {
-      icon_type: 'emoji',
-      icon: '🧾',
-      icon_background: '#FFEAD5',
-      icon_url: '',
-    },
-    relatedBlocks: [
-      BlockEnum.LLM,
-      BlockEnum.Code,
-      BlockEnum.KnowledgeRetrieval,
-      BlockEnum.QuestionClassifier,
-      BlockEnum.IfElse,
-    ],
-  },
-] as const
-
-const LoadingSkeleton = () => {
-  return (
-    <div className="relative overflow-hidden">
-      <div className="p-1">
-        {['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4'].map((key, index) => (
-          <div
-            key={key}
-            className={cn(
-              'flex items-center gap-1 px-3 py-1 opacity-20',
-              index === 3 && 'opacity-10',
-            )}
-          >
-            <div className="my-1 h-6 w-6 shrink-0 rounded-lg border-[0.5px] border-effects-icon-border bg-text-quaternary" />
-            <div className="min-w-0 flex-1 px-1 py-1">
-              <div className="h-2 w-[200px] rounded-[2px] bg-text-quaternary" />
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-components-panel-bg-transparent to-background-default-subtle" />
-    </div>
-  )
-}
-
-const Snippets = ({
-  loading = false,
-  searchText,
-}: SnippetsProps) => {
-  const { t } = useTranslation()
-  const { push } = useRouter()
-  const createSnippetMutation = useCreateSnippetMutation()
-  const deferredSearchText = useDeferredValue(searchText)
-  const [hoveredSnippetId, setHoveredSnippetId] = useState<string | null>(null)
-  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
-  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
-
-  const snippets = useMemo(() => {
-    return STATIC_SNIPPETS.map(item => ({
-      ...item,
-    }))
-  }, [])
-
-  const handleCloseCreateSnippetDialog = () => {
-    setIsCreateSnippetDialogOpen(false)
-  }
-
-  const handleCreateSnippet = async ({
-    name,
-    description,
-    icon,
-    graph,
-  }: CreateSnippetDialogPayload) => {
-    setIsCreatingSnippet(true)
-
-    try {
-      const snippet = await createSnippetMutation.mutateAsync({
-        body: {
-          name,
-          description: description || undefined,
-          icon_info: {
-            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
-            icon_type: icon.type,
-            icon_background: icon.type === 'emoji' ? icon.background : undefined,
-            icon_url: icon.type === 'image' ? icon.url : undefined,
-          },
-        },
-      })
-
-      await consoleClient.snippets.syncDraftWorkflow({
-        params: { snippetId: snippet.id },
-        body: { graph },
-      })
-
-      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
-      handleCloseCreateSnippetDialog()
-      push(`/snippets/${snippet.id}/orchestrate`)
-    }
-    catch (error) {
-      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
-    }
-    finally {
-      setIsCreatingSnippet(false)
-    }
-  }
-
-  const filteredSnippets = useMemo(() => {
-    const normalizedSearch = deferredSearchText.trim().toLowerCase()
-    if (!normalizedSearch)
-      return snippets
-
-    return snippets.filter(item => item.name.toLowerCase().includes(normalizedSearch))
-  }, [deferredSearchText, snippets])
-
-  if (loading)
-    return <LoadingSkeleton />
-
-  if (!filteredSnippets.length) {
-    return (
-      <>
-        <div className="flex min-h-[480px] flex-col items-center justify-center gap-2 px-4">
-          <span className="i-custom-vender-line-others-search-menu h-8 w-8 text-text-tertiary" />
-          <div className="text-text-secondary system-sm-regular">
-            {t('tabs.noSnippetsFound', { ns: 'workflow' })}
-          </div>
-          <Button
-            variant="secondary-accent"
-            size="small"
-            onClick={() => setIsCreateSnippetDialogOpen(true)}
-          >
-            {t('tabs.createSnippet', { ns: 'workflow' })}
-          </Button>
-        </div>
-        <CreateSnippetDialog
-          isOpen={isCreateSnippetDialogOpen}
-          isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
-          onClose={handleCloseCreateSnippetDialog}
-          onConfirm={handleCreateSnippet}
-        />
-      </>
-    )
-  }
-
-  return (
-    <div className="max-h-[480px] max-w-[500px] overflow-y-auto p-1">
-      {filteredSnippets.map((item) => {
-        const row = (
-          <SnippetListItem
-            snippet={item}
-            isHovered={hoveredSnippetId === item.id}
-            onMouseEnter={() => setHoveredSnippetId(item.id)}
-            onMouseLeave={() => setHoveredSnippetId(current => current === item.id ? null : current)}
-          />
-        )
-
-        if (!item.description)
-          return <div key={item.id}>{row}</div>
-
-        return (
-          <Tooltip key={item.id}>
-            <TooltipTrigger
-              delay={0}
-              render={row}
-            />
-            <TooltipContent
-              placement="left-start"
-              variant="plain"
-              popupClassName="!bg-transparent !p-0"
-            >
-              <SnippetDetailCard snippet={item} />
-            </TooltipContent>
-          </Tooltip>
-        )
-      })}
-    </div>
-  )
-}
-
-export default memo(Snippets)
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
new file mode 100644
index 0000000000..50598eb304
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -0,0 +1,223 @@
+import type { CreateSnippetDialogPayload } from '../../create-snippet-dialog'
+import { useInfiniteScroll } from 'ahooks'
+import {
+  memo,
+  useDeferredValue,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@/app/components/base/ui/scroll-area'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
+import { useRouter } from '@/next/navigation'
+import { consoleClient } from '@/service/client'
+import {
+  useCreateSnippetMutation,
+  useInfiniteSnippetList,
+} from '@/service/use-snippets'
+import { cn } from '@/utils/classnames'
+import CreateSnippetDialog from '../../create-snippet-dialog'
+import SnippetDetailCard from './snippet-detail-card'
+import SnippetEmptyState from './snippet-empty-state'
+import SnippetListItem from './snippet-list-item'
+
+type SnippetsProps = {
+  loading?: boolean
+  searchText: string
+}
+
+const LoadingSkeleton = () => {
+  return (
+    <div className="relative overflow-hidden">
+      <div className="p-1">
+        {['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4'].map((key, index) => (
+          <div
+            key={key}
+            className={cn(
+              'flex items-center gap-1 px-3 py-1 opacity-20',
+              index === 3 && 'opacity-10',
+            )}
+          >
+            <div className="my-1 h-6 w-6 shrink-0 rounded-lg border-[0.5px] border-effects-icon-border bg-text-quaternary" />
+            <div className="min-w-0 flex-1 px-1 py-1">
+              <div className="h-2 w-[200px] rounded-[2px] bg-text-quaternary" />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-components-panel-bg-transparent to-background-default-subtle" />
+    </div>
+  )
+}
+
+const Snippets = ({
+  loading = false,
+  searchText,
+}: SnippetsProps) => {
+  const { t } = useTranslation()
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
+  const deferredSearchText = useDeferredValue(searchText)
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const [hoveredSnippetId, setHoveredSnippetId] = useState<string | null>(null)
+  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
+  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
+
+  const keyword = deferredSearchText.trim() || undefined
+
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteSnippetList({
+    page: 1,
+    limit: 30,
+    keyword,
+    is_published: true,
+  })
+
+  const snippets = useMemo(() => {
+    return (data?.pages ?? []).flatMap(({ data }) => data)
+  }, [data?.pages])
+
+  const isNoMore = hasNextPage === false
+
+  useInfiniteScroll(
+    async () => {
+      if (!hasNextPage || isFetchingNextPage)
+        return { list: [] }
+
+      await fetchNextPage()
+      return { list: [] }
+    },
+    {
+      target: viewportRef,
+      isNoMore: () => isNoMore,
+      reloadDeps: [isNoMore, isFetchingNextPage, keyword],
+    },
+  )
+
+  const handleCloseCreateSnippetDialog = () => {
+    setIsCreateSnippetDialogOpen(false)
+  }
+
+  const handleCreateSnippet = async ({
+    name,
+    description,
+    icon,
+    graph,
+  }: CreateSnippetDialogPayload) => {
+    setIsCreatingSnippet(true)
+
+    try {
+      const snippet = await createSnippetMutation.mutateAsync({
+        body: {
+          name,
+          description: description || undefined,
+          icon_info: {
+            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+            icon_type: icon.type,
+            icon_background: icon.type === 'emoji' ? icon.background : undefined,
+            icon_url: icon.type === 'image' ? icon.url : undefined,
+          },
+        },
+      })
+
+      await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId: snippet.id },
+        body: { graph },
+      })
+
+      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+      handleCloseCreateSnippetDialog()
+      push(`/snippets/${snippet.id}/orchestrate`)
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+    finally {
+      setIsCreatingSnippet(false)
+    }
+  }
+
+  if (loading || isLoading || (isFetching && snippets.length === 0))
+    return <LoadingSkeleton />
+
+  return (
+    <>
+      {!snippets.length
+        ? (
+            <SnippetEmptyState onCreate={() => setIsCreateSnippetDialogOpen(true)} />
+          )
+        : (
+            <ScrollAreaRoot className="relative max-h-[480px] max-w-[500px] overflow-hidden">
+              <ScrollAreaViewport ref={viewportRef}>
+                <ScrollAreaContent className="p-1">
+                  {snippets.map((item) => {
+                    const row = (
+                      <SnippetListItem
+                        snippet={item}
+                        isHovered={hoveredSnippetId === item.id}
+                        onMouseEnter={() => setHoveredSnippetId(item.id)}
+                        onMouseLeave={() => setHoveredSnippetId(current => current === item.id ? null : current)}
+                      />
+                    )
+
+                    if (!item.description)
+                      return <div key={item.id}>{row}</div>
+
+                    return (
+                      <Tooltip key={item.id}>
+                        <TooltipTrigger
+                          delay={0}
+                          render={row}
+                        />
+                        <TooltipContent
+                          placement="left-start"
+                          variant="plain"
+                          popupClassName="!bg-transparent !p-0"
+                        >
+                          <SnippetDetailCard snippet={item} />
+                        </TooltipContent>
+                      </Tooltip>
+                    )
+                  })}
+                  {isFetchingNextPage && (
+                    <div className="flex justify-center px-3 py-2">
+                      <Loading />
+                    </div>
+                  )}
+                </ScrollAreaContent>
+              </ScrollAreaViewport>
+              <ScrollAreaScrollbar orientation="vertical">
+                <ScrollAreaThumb />
+              </ScrollAreaScrollbar>
+            </ScrollAreaRoot>
+          )}
+      <CreateSnippetDialog
+        isOpen={isCreateSnippetDialogOpen}
+        isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
+        onClose={handleCloseCreateSnippetDialog}
+        onConfirm={handleCreateSnippet}
+      />
+    </>
+  )
+}
+
+export default memo(Snippets)
diff --git a/web/app/components/workflow/block-selector/snippet-detail-card.tsx b/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
similarity index 63%
rename from web/app/components/workflow/block-selector/snippet-detail-card.tsx
rename to web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
index 65f6ba3d9e..44a44ee4ad 100644
--- a/web/app/components/workflow/block-selector/snippet-detail-card.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
@@ -1,21 +1,17 @@
 import type { FC } from 'react'
-import type { BlockEnum } from '../types'
-import type { Snippet as SnippetDetail } from '@/types/snippet'
+import type { SnippetListItem } from '@/types/snippet'
 import AppIcon from '@/app/components/base/app-icon'
-import BlockIcon from '../block-icon'
 
-export type PublishedSnippetDetail = SnippetDetail & {
-  relatedBlocks?: BlockEnum[]
-}
+export type PublishedSnippetListItem = SnippetListItem
 
 type SnippetDetailCardProps = {
-  snippet: PublishedSnippetDetail
+  snippet: PublishedSnippetListItem
 }
 
 const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
   snippet,
 }) => {
-  const { author, description, icon_info, name, relatedBlocks = [] } = snippet
+  const { author, description, icon_info, name } = snippet
 
   return (
     <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
@@ -35,17 +31,6 @@ const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
             {description}
           </div>
         )}
-        {!!relatedBlocks.length && (
-          <div className="flex items-center gap-0.5 pt-1">
-            {relatedBlocks.map(block => (
-              <BlockIcon
-                key={block}
-                type={block}
-                size="sm"
-              />
-            ))}
-          </div>
-        )}
       </div>
       {!!author && (
         <div className="pt-3 text-text-tertiary system-xs-regular">
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
new file mode 100644
index 0000000000..f0c00115c8
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
@@ -0,0 +1,31 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type SnippetEmptyStateProps = {
+  onCreate: () => void
+}
+
+const SnippetEmptyState: FC<SnippetEmptyStateProps> = ({
+  onCreate,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex min-h-[480px] flex-col items-center justify-center gap-2 px-4">
+      <span className="i-custom-vender-line-others-search-menu h-8 w-8 text-text-tertiary" />
+      <div className="text-text-secondary system-sm-regular">
+        {t('tabs.noSnippetsFound', { ns: 'workflow' })}
+      </div>
+      <Button
+        variant="secondary-accent"
+        size="small"
+        onClick={onCreate}
+      >
+        {t('tabs.createSnippet', { ns: 'workflow' })}
+      </Button>
+    </div>
+  )
+}
+
+export default SnippetEmptyState
diff --git a/web/app/components/workflow/block-selector/snippet-list-item.tsx b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
similarity index 91%
rename from web/app/components/workflow/block-selector/snippet-list-item.tsx
rename to web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
index ba76a84ae4..0ddddbfc0b 100644
--- a/web/app/components/workflow/block-selector/snippet-list-item.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
@@ -2,14 +2,14 @@ import type {
   ComponentPropsWithoutRef,
   Ref,
 } from 'react'
-import type { PublishedSnippetDetail } from './snippet-detail-card'
+import type { PublishedSnippetListItem } from './snippet-detail-card'
 import AppIcon from '@/app/components/base/app-icon'
 import { cn } from '@/utils/classnames'
 
 type SnippetListItemProps = {
   isHovered: boolean
   ref?: Ref<HTMLDivElement>
-  snippet: PublishedSnippetDetail
+  snippet: PublishedSnippetListItem
 } & ComponentPropsWithoutRef<'div'>
 
 const SnippetListItem = ({

From 2cfe4b5b86752bb1e2e9701d8303dfd3684b4431 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Mar 2026 21:11:09 +0800
Subject: [PATCH 022/108] feat(web): snippet graph data fetching

---
 .../snippets/snippet-detail-card.tsx          | 48 +++++++++++++++++++
 web/service/use-snippet-workflows.ts          | 15 ------
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx b/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
index 44a44ee4ad..1a3545a96f 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
@@ -1,6 +1,10 @@
 import type { FC } from 'react'
 import type { SnippetListItem } from '@/types/snippet'
+import { useMemo } from 'react'
 import AppIcon from '@/app/components/base/app-icon'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import BlockIcon from '../../block-icon'
+import { BlockEnum } from '../../types'
 
 export type PublishedSnippetListItem = SnippetListItem
 
@@ -12,6 +16,39 @@ const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
   snippet,
 }) => {
   const { author, description, icon_info, name } = snippet
+  const { data: workflow } = useSnippetPublishedWorkflow(snippet.id)
+
+  const blockTypes = useMemo(() => {
+    const graph = workflow?.graph
+    if (!graph || typeof graph !== 'object')
+      return []
+
+    const graphRecord = graph as Record<string, unknown>
+    if (!Array.isArray(graphRecord.nodes))
+      return []
+
+    const availableBlockTypes = new Set(Object.values(BlockEnum))
+
+    return graphRecord.nodes.reduce<BlockEnum[]>((result, node) => {
+      if (!node || typeof node !== 'object')
+        return result
+
+      const nodeRecord = node as Record<string, unknown>
+      if (!nodeRecord.data || typeof nodeRecord.data !== 'object')
+        return result
+
+      const dataRecord = nodeRecord.data as Record<string, unknown>
+      const blockType = dataRecord.type
+      if (typeof blockType !== 'string' || !availableBlockTypes.has(blockType as BlockEnum))
+        return result
+
+      const normalizedBlockType = blockType as BlockEnum
+      if (!result.includes(normalizedBlockType))
+        result.push(normalizedBlockType)
+
+      return result
+    }, [])
+  }, [workflow?.graph])
 
   return (
     <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
@@ -31,6 +68,17 @@ const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
             {description}
           </div>
         )}
+        {!!blockTypes.length && (
+          <div className="flex items-center gap-0.5 pt-1">
+            {blockTypes.map(blockType => (
+              <BlockIcon
+                key={blockType}
+                type={blockType}
+                size="sm"
+              />
+            ))}
+          </div>
+        )}
       </div>
       {!!author && (
         <div className="pt-3 text-text-tertiary system-xs-regular">
diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
index 9659a1fd8e..765a3210ad 100644
--- a/web/service/use-snippet-workflows.ts
+++ b/web/service/use-snippet-workflows.ts
@@ -1,10 +1,3 @@
-import type {
-  SnippetDraftNodeRunPayload,
-  SnippetDraftRunPayload,
-  SnippetDraftSyncPayload,
-  SnippetIterationNodeRunPayload,
-  SnippetLoopNodeRunPayload,
-} from '@/types/snippet'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { consoleQuery } from '@/service/client'
 
@@ -175,11 +168,3 @@ export const useStopSnippetWorkflowTaskMutation = (snippetId: string) => {
     }),
   })
 }
-
-export type {
-  SnippetDraftNodeRunPayload,
-  SnippetDraftRunPayload,
-  SnippetDraftSyncPayload,
-  SnippetIterationNodeRunPayload,
-  SnippetLoopNodeRunPayload,
-}

From 22b382527f89574bbf85c3493fd62e366d76f518 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Mar 2026 21:26:29 +0800
Subject: [PATCH 023/108] feat(web): add snippet to workflow

---
 .../block-selector/snippets/index.tsx         |  72 ++-------
 .../snippets/snippet-list-item.tsx            |   2 +-
 .../snippets/use-create-snippet.ts            |  71 +++++++++
 .../snippets/use-insert-snippet.ts            | 143 ++++++++++++++++++
 4 files changed, 229 insertions(+), 59 deletions(-)
 create mode 100644 web/app/components/workflow/block-selector/snippets/use-create-snippet.ts
 create mode 100644 web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts

diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
index 50598eb304..bf63f3b30e 100644
--- a/web/app/components/workflow/block-selector/snippets/index.tsx
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -1,4 +1,3 @@
-import type { CreateSnippetDialogPayload } from '../../create-snippet-dialog'
 import { useInfiniteScroll } from 'ahooks'
 import {
   memo,
@@ -7,7 +6,6 @@ import {
   useRef,
   useState,
 } from 'react'
-import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import {
   ScrollAreaContent,
@@ -16,23 +14,19 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from '@/app/components/base/ui/scroll-area'
-import { toast } from '@/app/components/base/ui/toast'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/app/components/base/ui/tooltip'
-import { useRouter } from '@/next/navigation'
-import { consoleClient } from '@/service/client'
-import {
-  useCreateSnippetMutation,
-  useInfiniteSnippetList,
-} from '@/service/use-snippets'
+import { useInfiniteSnippetList } from '@/service/use-snippets'
 import { cn } from '@/utils/classnames'
 import CreateSnippetDialog from '../../create-snippet-dialog'
 import SnippetDetailCard from './snippet-detail-card'
 import SnippetEmptyState from './snippet-empty-state'
 import SnippetListItem from './snippet-list-item'
+import { useCreateSnippet } from './use-create-snippet'
+import { useInsertSnippet } from './use-insert-snippet'
 
 type SnippetsProps = {
   loading?: boolean
@@ -67,14 +61,18 @@ const Snippets = ({
   loading = false,
   searchText,
 }: SnippetsProps) => {
-  const { t } = useTranslation()
-  const { push } = useRouter()
-  const createSnippetMutation = useCreateSnippetMutation()
+  const {
+    createSnippetMutation,
+    handleCloseCreateSnippetDialog,
+    handleCreateSnippet,
+    handleOpenCreateSnippetDialog,
+    isCreateSnippetDialogOpen,
+    isCreatingSnippet,
+  } = useCreateSnippet()
+  const { handleInsertSnippet } = useInsertSnippet()
   const deferredSearchText = useDeferredValue(searchText)
   const viewportRef = useRef<HTMLDivElement>(null)
   const [hoveredSnippetId, setHoveredSnippetId] = useState<string | null>(null)
-  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
-  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
 
   const keyword = deferredSearchText.trim() || undefined
 
@@ -113,49 +111,6 @@ const Snippets = ({
     },
   )
 
-  const handleCloseCreateSnippetDialog = () => {
-    setIsCreateSnippetDialogOpen(false)
-  }
-
-  const handleCreateSnippet = async ({
-    name,
-    description,
-    icon,
-    graph,
-  }: CreateSnippetDialogPayload) => {
-    setIsCreatingSnippet(true)
-
-    try {
-      const snippet = await createSnippetMutation.mutateAsync({
-        body: {
-          name,
-          description: description || undefined,
-          icon_info: {
-            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
-            icon_type: icon.type,
-            icon_background: icon.type === 'emoji' ? icon.background : undefined,
-            icon_url: icon.type === 'image' ? icon.url : undefined,
-          },
-        },
-      })
-
-      await consoleClient.snippets.syncDraftWorkflow({
-        params: { snippetId: snippet.id },
-        body: { graph },
-      })
-
-      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
-      handleCloseCreateSnippetDialog()
-      push(`/snippets/${snippet.id}/orchestrate`)
-    }
-    catch (error) {
-      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
-    }
-    finally {
-      setIsCreatingSnippet(false)
-    }
-  }
-
   if (loading || isLoading || (isFetching && snippets.length === 0))
     return <LoadingSkeleton />
 
@@ -163,7 +118,7 @@ const Snippets = ({
     <>
       {!snippets.length
         ? (
-            <SnippetEmptyState onCreate={() => setIsCreateSnippetDialogOpen(true)} />
+            <SnippetEmptyState onCreate={handleOpenCreateSnippetDialog} />
           )
         : (
             <ScrollAreaRoot className="relative max-h-[480px] max-w-[500px] overflow-hidden">
@@ -174,6 +129,7 @@ const Snippets = ({
                       <SnippetListItem
                         snippet={item}
                         isHovered={hoveredSnippetId === item.id}
+                        onClick={() => handleInsertSnippet(item.id)}
                         onMouseEnter={() => setHoveredSnippetId(item.id)}
                         onMouseLeave={() => setHoveredSnippetId(current => current === item.id ? null : current)}
                       />
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
index 0ddddbfc0b..0681fde8c7 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
@@ -23,7 +23,7 @@ const SnippetListItem = ({
     <div
       ref={ref}
       className={cn(
-        'flex h-8 items-center gap-2 rounded-lg px-3',
+        'flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3',
         isHovered && 'bg-background-default-hover',
         className,
       )}
diff --git a/web/app/components/workflow/block-selector/snippets/use-create-snippet.ts b/web/app/components/workflow/block-selector/snippets/use-create-snippet.ts
new file mode 100644
index 0000000000..cfa2652921
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/use-create-snippet.ts
@@ -0,0 +1,71 @@
+import type { CreateSnippetDialogPayload } from '../../create-snippet-dialog'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
+import { useRouter } from '@/next/navigation'
+import { consoleClient } from '@/service/client'
+import { useCreateSnippetMutation } from '@/service/use-snippets'
+
+export const useCreateSnippet = () => {
+  const { t } = useTranslation()
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
+  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
+  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
+
+  const handleOpenCreateSnippetDialog = () => {
+    setIsCreateSnippetDialogOpen(true)
+  }
+
+  const handleCloseCreateSnippetDialog = () => {
+    setIsCreateSnippetDialogOpen(false)
+  }
+
+  const handleCreateSnippet = async ({
+    name,
+    description,
+    icon,
+    graph,
+  }: CreateSnippetDialogPayload) => {
+    setIsCreatingSnippet(true)
+
+    try {
+      const snippet = await createSnippetMutation.mutateAsync({
+        body: {
+          name,
+          description: description || undefined,
+          icon_info: {
+            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+            icon_type: icon.type,
+            icon_background: icon.type === 'emoji' ? icon.background : undefined,
+            icon_url: icon.type === 'image' ? icon.url : undefined,
+          },
+        },
+      })
+
+      await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId: snippet.id },
+        body: { graph },
+      })
+
+      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+      handleCloseCreateSnippetDialog()
+      push(`/snippets/${snippet.id}/orchestrate`)
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+    finally {
+      setIsCreatingSnippet(false)
+    }
+  }
+
+  return {
+    createSnippetMutation,
+    handleCloseCreateSnippetDialog,
+    handleCreateSnippet,
+    handleOpenCreateSnippetDialog,
+    isCreateSnippetDialogOpen,
+    isCreatingSnippet,
+  }
+}
diff --git a/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts b/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
new file mode 100644
index 0000000000..c143af9d6d
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
@@ -0,0 +1,143 @@
+import type { Edge, Node } from '../../types'
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useStoreApi } from 'reactflow'
+import { toast } from '@/app/components/base/ui/toast'
+import { consoleQuery } from '@/service/client'
+import { useNodesSyncDraft, useWorkflowHistory, WorkflowHistoryEvent } from '../../hooks'
+
+const getSnippetGraph = (graph: Record<string, unknown> | undefined) => {
+  if (!graph)
+    return { nodes: [] as Node[], edges: [] as Edge[] }
+
+  return {
+    nodes: Array.isArray(graph.nodes) ? graph.nodes as Node[] : [],
+    edges: Array.isArray(graph.edges) ? graph.edges as Edge[] : [],
+  }
+}
+
+const remapSnippetGraph = (currentNodes: Node[], snippetNodes: Node[], snippetEdges: Edge[]) => {
+  const existingIds = new Set(currentNodes.map(node => node.id))
+  const idMapping = new Map<string, string>()
+  const rootNodes = snippetNodes.filter(node => !node.parentId)
+  const minRootX = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.x)) : 0
+  const minRootY = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.y)) : 0
+  const currentMaxX = currentNodes.length
+    ? Math.max(...currentNodes.map((node) => {
+        const nodeX = node.positionAbsolute?.x ?? node.position.x
+        return nodeX + (node.width ?? 0)
+      }))
+    : 0
+  const currentMinY = currentNodes.length
+    ? Math.min(...currentNodes.map(node => node.positionAbsolute?.y ?? node.position.y))
+    : 0
+  const offsetX = (currentNodes.length ? currentMaxX + 80 : 80) - minRootX
+  const offsetY = (currentNodes.length ? currentMinY : 80) - minRootY
+
+  snippetNodes.forEach((node, index) => {
+    let nextId = `${node.id}-${Date.now()}-${index}`
+    while (existingIds.has(nextId))
+      nextId = `${nextId}-1`
+    existingIds.add(nextId)
+    idMapping.set(node.id, nextId)
+  })
+
+  const nodes = snippetNodes.map((node) => {
+    const nextParentId = node.parentId ? idMapping.get(node.parentId) : undefined
+    const isRootNode = !node.parentId
+
+    return {
+      ...node,
+      id: idMapping.get(node.id)!,
+      parentId: nextParentId,
+      position: isRootNode
+        ? {
+            x: node.position.x + offsetX,
+            y: node.position.y + offsetY,
+          }
+        : node.position,
+      positionAbsolute: node.positionAbsolute
+        ? (isRootNode
+            ? {
+                x: node.positionAbsolute.x + offsetX,
+                y: node.positionAbsolute.y + offsetY,
+              }
+            : node.positionAbsolute)
+        : undefined,
+      selected: true,
+      data: {
+        ...node.data,
+        selected: true,
+        _children: node.data._children?.map(child => ({
+          ...child,
+          nodeId: idMapping.get(child.nodeId) ?? child.nodeId,
+        })),
+      },
+    }
+  })
+
+  const edges = snippetEdges.map(edge => ({
+    ...edge,
+    id: `${idMapping.get(edge.source)}-${edge.sourceHandle}-${idMapping.get(edge.target)}-${edge.targetHandle}`,
+    source: idMapping.get(edge.source)!,
+    target: idMapping.get(edge.target)!,
+    selected: false,
+    data: edge.data
+      ? {
+          ...edge.data,
+          _connectedNodeIsSelected: true,
+        }
+      : edge.data,
+  }))
+
+  return { nodes, edges }
+}
+
+export const useInsertSnippet = () => {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const store = useStoreApi()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { saveStateToHistory } = useWorkflowHistory()
+
+  const handleInsertSnippet = useCallback(async (snippetId: string) => {
+    try {
+      const workflow = await queryClient.fetchQuery(consoleQuery.snippets.publishedWorkflow.queryOptions({
+        input: {
+          params: { snippetId },
+        },
+      }))
+      const { nodes: snippetNodes, edges: snippetEdges } = getSnippetGraph(workflow.graph)
+
+      if (!snippetNodes.length)
+        return
+
+      const { getNodes, setNodes, edges, setEdges } = store.getState()
+      const currentNodes = getNodes()
+      const remappedGraph = remapSnippetGraph(currentNodes, snippetNodes, snippetEdges)
+      const clearedNodes = currentNodes.map(node => ({
+        ...node,
+        selected: false,
+        data: {
+          ...node.data,
+          selected: false,
+        },
+      }))
+
+      setNodes([...clearedNodes, ...remappedGraph.nodes])
+      setEdges([...edges, ...remappedGraph.edges])
+      saveStateToHistory(WorkflowHistoryEvent.NodePaste, {
+        nodeId: remappedGraph.nodes[0]?.id,
+      })
+      handleSyncWorkflowDraft()
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+  }, [handleSyncWorkflowDraft, queryClient, saveStateToHistory, store, t])
+
+  return {
+    handleInsertSnippet,
+  }
+}

From 515036e75859617c164c7231b61798bf6699a0ed Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Mar 2026 21:38:22 +0800
Subject: [PATCH 024/108] test(web): add tests for snippets

---
 .../snippets/__tests__/index.spec.tsx         | 161 ++++++++++++++++++
 .../__tests__/snippet-detail-card.spec.tsx    |  64 +++++++
 .../__tests__/snippet-empty-state.spec.tsx    |  31 ++++
 .../__tests__/snippet-list-item.spec.tsx      |  85 +++++++++
 .../__tests__/use-create-snippet.spec.tsx     | 139 +++++++++++++++
 .../__tests__/use-insert-snippet.spec.tsx     | 130 ++++++++++++++
 6 files changed, 610 insertions(+)
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx

diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..d0d489c215
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
@@ -0,0 +1,161 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Snippets from '../index'
+
+const mockUseInfiniteSnippetList = vi.fn()
+const mockHandleInsertSnippet = vi.fn()
+const mockHandleCreateSnippet = vi.fn()
+const mockHandleOpenCreateSnippetDialog = vi.fn()
+const mockHandleCloseCreateSnippetDialog = vi.fn()
+
+vi.mock('ahooks', async () => {
+  const actual = await vi.importActual<typeof import('ahooks')>('ahooks')
+  return {
+    ...actual,
+    useInfiniteScroll: vi.fn(),
+  }
+})
+
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: (...args: unknown[]) => mockUseInfiniteSnippetList(...args),
+}))
+
+vi.mock('../use-insert-snippet', () => ({
+  useInsertSnippet: () => ({
+    handleInsertSnippet: mockHandleInsertSnippet,
+  }),
+}))
+
+vi.mock('../use-create-snippet', () => ({
+  useCreateSnippet: () => ({
+    createSnippetMutation: { isPending: false },
+    handleCloseCreateSnippetDialog: mockHandleCloseCreateSnippetDialog,
+    handleCreateSnippet: mockHandleCreateSnippet,
+    handleOpenCreateSnippetDialog: mockHandleOpenCreateSnippetDialog,
+    isCreateSnippetDialogOpen: false,
+    isCreatingSnippet: false,
+  }),
+}))
+
+vi.mock('../../../create-snippet-dialog', () => ({
+  default: ({ isOpen }: { isOpen: boolean }) => isOpen ? <div data-testid="create-snippet-dialog" /> : null,
+}))
+
+describe('Snippets', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseInfiniteSnippetList.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render loading skeleton when loading', () => {
+      const { container } = render(<Snippets loading searchText="" />)
+
+      expect(container.querySelectorAll('.bg-text-quaternary')).not.toHaveLength(0)
+    })
+
+    it('should render empty state when snippet list is empty', () => {
+      render(<Snippets searchText="" />)
+
+      expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
+    })
+
+    it('should render snippet rows from infinite list data', () => {
+      mockUseInfiniteSnippetList.mockReturnValue({
+        data: {
+          pages: [{
+            data: [{
+              id: 'snippet-1',
+              name: 'Customer Review',
+              description: 'Snippet description',
+              author: 'Evan',
+              type: 'group',
+              is_published: true,
+              version: '1.0.0',
+              use_count: 3,
+              icon_info: {
+                icon_type: 'emoji',
+                icon: '🧾',
+                icon_background: '#FFEAD5',
+                icon_url: '',
+              },
+              input_fields: [],
+              created_at: 1,
+              updated_at: 2,
+            }],
+          }],
+        },
+        isLoading: false,
+        isFetching: false,
+        isFetchingNextPage: false,
+        fetchNextPage: vi.fn(),
+        hasNextPage: false,
+      })
+
+      render(<Snippets searchText="customer" />)
+
+      expect(mockUseInfiniteSnippetList).toHaveBeenCalledWith({
+        page: 1,
+        limit: 30,
+        keyword: 'customer',
+        is_published: true,
+      })
+      expect(screen.getByText('Customer Review')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should delegate create action from empty state', () => {
+      render(<Snippets searchText="" />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'workflow.tabs.createSnippet' }))
+
+      expect(mockHandleOpenCreateSnippetDialog).toHaveBeenCalledTimes(1)
+    })
+
+    it('should delegate insert action when snippet item is clicked', () => {
+      mockUseInfiniteSnippetList.mockReturnValue({
+        data: {
+          pages: [{
+            data: [{
+              id: 'snippet-1',
+              name: 'Customer Review',
+              description: 'Snippet description',
+              author: 'Evan',
+              type: 'group',
+              is_published: true,
+              version: '1.0.0',
+              use_count: 3,
+              icon_info: {
+                icon_type: 'emoji',
+                icon: '🧾',
+                icon_background: '#FFEAD5',
+                icon_url: '',
+              },
+              input_fields: [],
+              created_at: 1,
+              updated_at: 2,
+            }],
+          }],
+        },
+        isLoading: false,
+        isFetching: false,
+        isFetchingNextPage: false,
+        fetchNextPage: vi.fn(),
+        hasNextPage: false,
+      })
+
+      render(<Snippets searchText="" />)
+
+      fireEvent.click(screen.getByText('Customer Review'))
+
+      expect(mockHandleInsertSnippet).toHaveBeenCalledWith('snippet-1')
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx
new file mode 100644
index 0000000000..ade2bd2d61
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx
@@ -0,0 +1,64 @@
+import type { PublishedSnippetListItem } from '../snippet-detail-card'
+import { render, screen } from '@testing-library/react'
+import SnippetDetailCard from '../snippet-detail-card'
+
+const mockUseSnippetPublishedWorkflow = vi.fn()
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetPublishedWorkflow: (...args: unknown[]) => mockUseSnippetPublishedWorkflow(...args),
+}))
+
+const createSnippet = (overrides: Partial<PublishedSnippetListItem> = {}): PublishedSnippetListItem => ({
+  id: 'snippet-1',
+  name: 'Customer Review',
+  description: 'Snippet description',
+  author: 'Evan',
+  type: 'group',
+  is_published: true,
+  use_count: 3,
+  icon_info: {
+    icon_type: 'emoji',
+    icon: '🧾',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  },
+  created_at: 1,
+  updated_at: 2,
+  ...overrides,
+})
+
+describe('SnippetDetailCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSnippetPublishedWorkflow.mockReturnValue({ data: undefined })
+  })
+
+  describe('Rendering', () => {
+    it('should render snippet summary information', () => {
+      render(<SnippetDetailCard snippet={createSnippet()} />)
+
+      expect(screen.getByText('Customer Review')).toBeInTheDocument()
+      expect(screen.getByText('Snippet description')).toBeInTheDocument()
+      expect(screen.getByText('Evan')).toBeInTheDocument()
+    })
+
+    it('should render unique block icons from published workflow graph', () => {
+      mockUseSnippetPublishedWorkflow.mockReturnValue({
+        data: {
+          graph: {
+            nodes: [
+              { data: { type: 'llm' } },
+              { data: { type: 'code' } },
+              { data: { type: 'llm' } },
+              { data: { type: 'unknown' } },
+            ],
+          },
+        },
+      })
+
+      const { container } = render(<SnippetDetailCard snippet={createSnippet()} />)
+
+      expect(container.querySelectorAll('[data-icon="Llm"], [data-icon="Code"]')).toHaveLength(2)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx
new file mode 100644
index 0000000000..1ab2f712bf
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx
@@ -0,0 +1,31 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import SnippetEmptyState from '../snippet-empty-state'
+
+describe('SnippetEmptyState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render empty state copy and create action', () => {
+      const handleCreate = vi.fn()
+
+      render(<SnippetEmptyState onCreate={handleCreate} />)
+
+      expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'workflow.tabs.createSnippet' })).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCreate when create button is clicked', () => {
+      const handleCreate = vi.fn()
+
+      render(<SnippetEmptyState onCreate={handleCreate} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'workflow.tabs.createSnippet' }))
+
+      expect(handleCreate).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx
new file mode 100644
index 0000000000..0a1292a68e
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx
@@ -0,0 +1,85 @@
+import type { PublishedSnippetListItem } from '../snippet-detail-card'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SnippetListItem from '../snippet-list-item'
+
+const createSnippet = (overrides: Partial<PublishedSnippetListItem> = {}): PublishedSnippetListItem => ({
+  id: 'snippet-1',
+  name: 'Customer Review',
+  description: 'Snippet description',
+  author: 'Evan',
+  type: 'group',
+  is_published: true,
+  use_count: 3,
+  icon_info: {
+    icon_type: 'emoji',
+    icon: '🧾',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  },
+  created_at: 1,
+  updated_at: 2,
+  ...overrides,
+})
+
+describe('SnippetListItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render snippet name', () => {
+      render(
+        <SnippetListItem
+          snippet={createSnippet()}
+          isHovered={false}
+          onMouseEnter={vi.fn()}
+          onMouseLeave={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('Customer Review')).toBeInTheDocument()
+      expect(screen.queryByText('Evan')).not.toBeInTheDocument()
+    })
+
+    it('should render author when hovered', () => {
+      render(
+        <SnippetListItem
+          snippet={createSnippet()}
+          isHovered
+          onMouseEnter={vi.fn()}
+          onMouseLeave={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('Evan')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should forward click and hover handlers', () => {
+      const handleClick = vi.fn()
+      const handleMouseEnter = vi.fn()
+      const handleMouseLeave = vi.fn()
+
+      render(
+        <SnippetListItem
+          snippet={createSnippet()}
+          isHovered={false}
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />,
+      )
+
+      const item = screen.getByText('Customer Review').closest('div')!
+
+      fireEvent.mouseEnter(item)
+      fireEvent.mouseLeave(item)
+      fireEvent.click(item)
+
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1)
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx
new file mode 100644
index 0000000000..5d70d9c5c9
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx
@@ -0,0 +1,139 @@
+import { act, renderHook } from '@testing-library/react'
+import { useCreateSnippet } from '../use-create-snippet'
+
+const mockPush = vi.fn()
+const mockMutateAsync = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockSyncDraftWorkflow = vi.fn()
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useCreateSnippetMutation: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    snippets: {
+      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+    },
+  },
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+describe('useCreateSnippet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('State', () => {
+    it('should open and close create snippet dialog', () => {
+      const { result } = renderHook(() => useCreateSnippet())
+
+      act(() => {
+        result.current.handleOpenCreateSnippetDialog()
+      })
+      expect(result.current.isCreateSnippetDialogOpen).toBe(true)
+
+      act(() => {
+        result.current.handleCloseCreateSnippetDialog()
+      })
+      expect(result.current.isCreateSnippetDialogOpen).toBe(false)
+    })
+  })
+
+  describe('Create Flow', () => {
+    it('should create snippet, sync draft workflow, and navigate on success', async () => {
+      mockMutateAsync.mockResolvedValue({ id: 'snippet-123' })
+      mockSyncDraftWorkflow.mockResolvedValue(undefined)
+
+      const { result } = renderHook(() => useCreateSnippet())
+
+      act(() => {
+        result.current.handleOpenCreateSnippetDialog()
+      })
+
+      await act(async () => {
+        await result.current.handleCreateSnippet({
+          name: 'My snippet',
+          description: 'desc',
+          icon: {
+            type: 'emoji',
+            icon: '🤖',
+            background: '#FFEAD5',
+          },
+          graph: {
+            nodes: [],
+            edges: [],
+            viewport: { x: 0, y: 0, zoom: 1 },
+          },
+        })
+      })
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        body: {
+          name: 'My snippet',
+          description: 'desc',
+          icon_info: {
+            icon: '🤖',
+            icon_type: 'emoji',
+            icon_background: '#FFEAD5',
+            icon_url: undefined,
+          },
+        },
+      })
+      expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+        params: { snippetId: 'snippet-123' },
+        body: {
+          graph: {
+            nodes: [],
+            edges: [],
+            viewport: { x: 0, y: 0, zoom: 1 },
+          },
+        },
+      })
+      expect(mockToastSuccess).toHaveBeenCalledWith('workflow.snippet.createSuccess')
+      expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
+      expect(result.current.isCreateSnippetDialogOpen).toBe(false)
+      expect(result.current.isCreatingSnippet).toBe(false)
+    })
+
+    it('should show error toast when create fails', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('create failed'))
+
+      const { result } = renderHook(() => useCreateSnippet())
+
+      await act(async () => {
+        await result.current.handleCreateSnippet({
+          name: 'My snippet',
+          description: '',
+          icon: {
+            type: 'emoji',
+            icon: '🤖',
+            background: '#FFEAD5',
+          },
+          graph: {
+            nodes: [],
+            edges: [],
+            viewport: { x: 0, y: 0, zoom: 1 },
+          },
+        })
+      })
+
+      expect(mockToastError).toHaveBeenCalledWith('create failed')
+      expect(result.current.isCreatingSnippet).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
new file mode 100644
index 0000000000..2f8864a411
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
@@ -0,0 +1,130 @@
+import { act, renderHook } from '@testing-library/react'
+import { useInsertSnippet } from '../use-insert-snippet'
+
+const mockFetchQuery = vi.fn()
+const mockHandleSyncWorkflowDraft = vi.fn()
+const mockSaveStateToHistory = vi.fn()
+const mockToastError = vi.fn()
+const mockGetNodes = vi.fn()
+const mockSetNodes = vi.fn()
+const mockSetEdges = vi.fn()
+
+vi.mock('@tanstack/react-query', () => ({
+  useQueryClient: () => ({
+    fetchQuery: mockFetchQuery,
+  }),
+}))
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => ({
+      getNodes: mockGetNodes,
+      setNodes: mockSetNodes,
+      edges: [{ id: 'existing-edge', source: 'old', target: 'old-2' }],
+      setEdges: mockSetEdges,
+    }),
+  }),
+}))
+
+vi.mock('../../../hooks', () => ({
+  useNodesSyncDraft: () => ({
+    handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft,
+  }),
+  useWorkflowHistory: () => ({
+    saveStateToHistory: mockSaveStateToHistory,
+  }),
+  WorkflowHistoryEvent: {
+    NodePaste: 'NodePaste',
+  },
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+describe('useInsertSnippet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetNodes.mockReturnValue([
+      {
+        id: 'existing-node',
+        position: { x: 0, y: 0 },
+        data: { selected: true },
+      },
+    ])
+  })
+
+  describe('Insert Flow', () => {
+    it('should append remapped snippet graph into current workflow graph', async () => {
+      mockFetchQuery.mockResolvedValue({
+        graph: {
+          nodes: [
+            {
+              id: 'snippet-node-1',
+              position: { x: 10, y: 20 },
+              data: { selected: false, _children: [{ nodeId: 'snippet-node-2', nodeType: 'code' }] },
+            },
+            {
+              id: 'snippet-node-2',
+              parentId: 'snippet-node-1',
+              position: { x: 30, y: 40 },
+              data: { selected: false },
+            },
+          ],
+          edges: [
+            {
+              id: 'edge-1',
+              source: 'snippet-node-1',
+              sourceHandle: 'source',
+              target: 'snippet-node-2',
+              targetHandle: 'target',
+              data: {},
+            },
+          ],
+        },
+      })
+
+      const { result } = renderHook(() => useInsertSnippet())
+
+      await act(async () => {
+        await result.current.handleInsertSnippet('snippet-1')
+      })
+
+      expect(mockFetchQuery).toHaveBeenCalledTimes(1)
+      expect(mockSetNodes).toHaveBeenCalledTimes(1)
+      expect(mockSetEdges).toHaveBeenCalledTimes(1)
+
+      const nextNodes = mockSetNodes.mock.calls[0][0]
+      expect(nextNodes[0].selected).toBe(false)
+      expect(nextNodes[0].data.selected).toBe(false)
+      expect(nextNodes).toHaveLength(3)
+      expect(nextNodes[1].id).not.toBe('snippet-node-1')
+      expect(nextNodes[2].parentId).toBe(nextNodes[1].id)
+      expect(nextNodes[1].data._children[0].nodeId).toBe(nextNodes[2].id)
+
+      const nextEdges = mockSetEdges.mock.calls[0][0]
+      expect(nextEdges).toHaveLength(2)
+      expect(nextEdges[1].source).toBe(nextNodes[1].id)
+      expect(nextEdges[1].target).toBe(nextNodes[2].id)
+
+      expect(mockSaveStateToHistory).toHaveBeenCalledWith('NodePaste', {
+        nodeId: nextNodes[1].id,
+      })
+      expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show error toast when fetching snippet workflow fails', async () => {
+      mockFetchQuery.mockRejectedValue(new Error('insert failed'))
+
+      const { result } = renderHook(() => useInsertSnippet())
+
+      await act(async () => {
+        await result.current.handleInsertSnippet('snippet-1')
+      })
+
+      expect(mockToastError).toHaveBeenCalledWith('insert failed')
+    })
+  })
+})

From 17d07a5a433aea0c5d432c6a4e266e822597ada0 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 27 Mar 2026 15:23:03 +0800
Subject: [PATCH 025/108] feat(web): init snippet graph

---
 .../snippets/__tests__/index.spec.tsx         |  42 ++++-
 .../hooks/__tests__/use-snippet-init.spec.ts  | 162 ++++++++++++++++++
 .../snippets/hooks/use-snippet-init.ts        |  75 +++++++-
 web/app/components/snippets/index.tsx         |  16 +-
 web/service/use-snippet-workflows.ts          |  67 +++++++-
 web/service/use-snippets.ts                   |  13 +-
 6 files changed, 329 insertions(+), 46 deletions(-)
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts

diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index 5b9aa9daf6..c16b98f3e7 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -4,12 +4,39 @@ import { PipelineInputVarType } from '@/models/pipeline'
 import SnippetPage from '..'
 import { useSnippetDetailStore } from '../store'
 
-const mockUseSnippetDetail = vi.fn()
+const mockUseSnippetInit = vi.fn()
 
-vi.mock('@/service/use-snippets', () => ({
-  useSnippetDetail: (snippetId: string) => mockUseSnippetDetail(snippetId),
+vi.mock('../hooks/use-snippet-init', () => ({
+  useSnippetInit: (snippetId: string) => mockUseSnippetInit(snippetId),
 }))
 
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+    push: vi.fn(),
+  }),
+}))
+
+vi.mock('@/service/use-snippets', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/use-snippets')>()
+
+  return {
+    ...actual,
+    useUpdateSnippetMutation: () => ({
+      mutate: vi.fn(),
+      isPending: false,
+    }),
+    useExportSnippetMutation: () => ({
+      mutateAsync: vi.fn(),
+      isPending: false,
+    }),
+    useDeleteSnippetMutation: () => ({
+      mutate: vi.fn(),
+      isPending: false,
+    }),
+  }
+})
+
 vi.mock('@/service/use-common', () => ({
   useFileUploadConfig: () => ({
     data: undefined,
@@ -122,7 +149,7 @@ describe('SnippetPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     useSnippetDetailStore.getState().reset()
-    mockUseSnippetDetail.mockReturnValue({
+    mockUseSnippetInit.mockReturnValue({
       data: mockSnippetDetail,
       isLoading: false,
     })
@@ -157,15 +184,14 @@ describe('SnippetPage', () => {
     expect(screen.getByText('snippet.publishMenuCurrentDraft')).toBeInTheDocument()
   })
 
-  it('should render a controlled not found state', () => {
-    mockUseSnippetDetail.mockReturnValue({
+  it('should render loading fallback when snippet data is unavailable', () => {
+    mockUseSnippetInit.mockReturnValue({
       data: null,
       isLoading: false,
     })
 
     render(<SnippetPage snippetId="missing-snippet" />)
 
-    expect(screen.getByText('snippet.notFoundTitle')).toBeInTheDocument()
-    expect(screen.getByText('snippet.notFoundDescription')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
new file mode 100644
index 0000000000..e53f1c13fe
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
@@ -0,0 +1,162 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useSnippetInit } from '../use-snippet-init'
+
+const mockWorkflowStoreSetState = vi.fn()
+const mockSetPublishedAt = vi.fn()
+const mockSetDraftUpdatedAt = vi.fn()
+const mockSetSyncWorkflowDraftHash = vi.fn()
+const mockUseSnippetApiDetail = vi.fn()
+const mockUseSnippetDraftWorkflow = vi.fn()
+const mockUseSnippetDefaultBlockConfigs = vi.fn()
+const mockUseSnippetPublishedWorkflow = vi.fn()
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    setState: mockWorkflowStoreSetState,
+    getState: () => ({
+      setDraftUpdatedAt: mockSetDraftUpdatedAt,
+      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+      setPublishedAt: mockSetPublishedAt,
+    }),
+  }),
+}))
+
+vi.mock('@/service/use-snippets', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/use-snippets')>()
+
+  return {
+    ...actual,
+    useSnippetApiDetail: (snippetId: string) => mockUseSnippetApiDetail(snippetId),
+  }
+})
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetDraftWorkflow: (snippetId: string, onSuccess?: (data: { updated_at: number, hash: string }) => void) => mockUseSnippetDraftWorkflow(snippetId, onSuccess),
+  useSnippetDefaultBlockConfigs: (snippetId: string, onSuccess?: (data: unknown) => void) => mockUseSnippetDefaultBlockConfigs(snippetId, onSuccess),
+  useSnippetPublishedWorkflow: (snippetId: string, onSuccess?: (data: { created_at: number }) => void) => mockUseSnippetPublishedWorkflow(snippetId, onSuccess),
+}))
+
+describe('useSnippetInit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    mockUseSnippetApiDetail.mockReturnValue({
+      data: {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'A static snippet mock.',
+        type: 'node',
+        is_published: false,
+        version: '1',
+        use_count: 0,
+        icon_info: {
+          icon_type: null,
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+        },
+        input_fields: [],
+        created_at: 1_712_300_000,
+        updated_at: 1_712_300_000,
+        author: 'Evan',
+      },
+      error: null,
+      isLoading: false,
+    })
+    mockUseSnippetDraftWorkflow.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    })
+    mockUseSnippetDefaultBlockConfigs.mockReturnValue({
+      data: undefined,
+    })
+    mockUseSnippetPublishedWorkflow.mockReturnValue({
+      data: undefined,
+    })
+  })
+
+  it('should return snippet detail query result', () => {
+    const { result } = renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockUseSnippetApiDetail).toHaveBeenCalledWith('snippet-1')
+    expect(result.current.data?.snippet.id).toBe('snippet-1')
+    expect(result.current.data?.graph.viewport).toEqual({ x: 0, y: 0, zoom: 1 })
+    expect(result.current.isLoading).toBe(false)
+  })
+
+  it('should sync draft metadata into workflow store', () => {
+    mockUseSnippetDraftWorkflow.mockImplementation((_snippetId: string, onSuccess?: (data: { updated_at: number, hash: string }) => void) => {
+      onSuccess?.({
+        updated_at: 1_712_345_678,
+        hash: 'draft-hash',
+      })
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockSetDraftUpdatedAt).toHaveBeenCalledWith(1_712_345_678)
+    expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('draft-hash')
+  })
+
+  it('should normalize array default block configs into workflow store state', () => {
+    mockUseSnippetDefaultBlockConfigs.mockImplementation((_snippetId: string, onSuccess?: (data: unknown) => void) => {
+      onSuccess?.([
+        { type: 'llm', config: { model: 'gpt-4.1' } },
+        { type: 'code', config: { language: 'python3' } },
+      ])
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({
+      nodesDefaultConfigs: {
+        llm: { model: 'gpt-4.1' },
+        code: { language: 'python3' },
+      },
+    })
+  })
+
+  it('should keep object default block configs as-is', () => {
+    mockUseSnippetDefaultBlockConfigs.mockImplementation((_snippetId: string, onSuccess?: (data: unknown) => void) => {
+      onSuccess?.({
+        llm: { model: 'gpt-4.1' },
+      })
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({
+      nodesDefaultConfigs: {
+        llm: { model: 'gpt-4.1' },
+      },
+    })
+  })
+
+  it('should sync published created_at into workflow store', () => {
+    mockUseSnippetPublishedWorkflow.mockImplementation((_snippetId: string, onSuccess?: (data: { created_at: number }) => void) => {
+      onSuccess?.({
+        created_at: 1_712_345_678,
+      })
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockSetPublishedAt).toHaveBeenCalledWith(1_712_345_678)
+  })
+
+  it('should stay loading while draft workflow is still fetching', () => {
+    mockUseSnippetDraftWorkflow.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    })
+
+    const { result } = renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(result.current.data).toBeUndefined()
+    expect(result.current.isLoading).toBe(true)
+  })
+})
diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
index 1468c65beb..c98e46c446 100644
--- a/web/app/components/snippets/hooks/use-snippet-init.ts
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -1,6 +1,75 @@
-// import { useSnippetDetail } from '@/service/use-snippets'
-import { useSnippetDetail } from '@/service/use-snippets.mock'
+import { useMemo } from 'react'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import {
+  useSnippetDefaultBlockConfigs,
+  useSnippetDraftWorkflow,
+  useSnippetPublishedWorkflow,
+} from '@/service/use-snippet-workflows'
+import {
+  buildSnippetDetailPayload,
+  useSnippetApiDetail,
+} from '@/service/use-snippets'
+
+const normalizeNodesDefaultConfigs = (nodesDefaultConfigs: unknown) => {
+  if (!nodesDefaultConfigs || typeof nodesDefaultConfigs !== 'object')
+    return {}
+
+  if (!Array.isArray(nodesDefaultConfigs))
+    return nodesDefaultConfigs as Record<string, unknown>
+
+  return nodesDefaultConfigs.reduce((acc, item) => {
+    if (
+      item
+      && typeof item === 'object'
+      && 'type' in item
+      && 'config' in item
+      && typeof item.type === 'string'
+    ) {
+      acc[item.type] = item.config
+    }
+
+    return acc
+  }, {} as Record<string, unknown>)
+}
+
+const isNotFoundError = (error: unknown) => {
+  return !!error && typeof error === 'object' && 'status' in error && error.status === 404
+}
 
 export const useSnippetInit = (snippetId: string) => {
-  return useSnippetDetail(snippetId)
+  const workflowStore = useWorkflowStore()
+  const snippetApiDetail = useSnippetApiDetail(snippetId)
+  const draftWorkflowQuery = useSnippetDraftWorkflow(snippetId, (draftWorkflow) => {
+    const {
+      setDraftUpdatedAt,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+
+    setDraftUpdatedAt(draftWorkflow.updated_at)
+    setSyncWorkflowDraftHash(draftWorkflow.hash)
+  })
+  useSnippetDefaultBlockConfigs(snippetId, (nodesDefaultConfigs) => {
+    workflowStore.setState({
+      nodesDefaultConfigs: normalizeNodesDefaultConfigs(nodesDefaultConfigs),
+    })
+  })
+  useSnippetPublishedWorkflow(snippetId, (publishedWorkflow) => {
+    workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
+  })
+
+  const data = useMemo(() => {
+    if (snippetApiDetail.data && !draftWorkflowQuery.isLoading)
+      return buildSnippetDetailPayload(snippetApiDetail.data, draftWorkflowQuery.data)
+
+    if (snippetApiDetail.error && isNotFoundError(snippetApiDetail.error))
+      return null
+
+    return undefined
+  }, [draftWorkflowQuery.data, draftWorkflowQuery.isLoading, snippetApiDetail.data, snippetApiDetail.error])
+
+  return {
+    ...snippetApiDetail,
+    data,
+    isLoading: snippetApiDetail.isLoading || draftWorkflowQuery.isLoading,
+  }
 }
diff --git a/web/app/components/snippets/index.tsx b/web/app/components/snippets/index.tsx
index 63392a24b5..706fdf7a27 100644
--- a/web/app/components/snippets/index.tsx
+++ b/web/app/components/snippets/index.tsx
@@ -2,7 +2,6 @@
 
 import type { SnippetSection } from '@/models/snippet'
 import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import WorkflowWithDefaultContext from '@/app/components/workflow'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
@@ -22,7 +21,6 @@ const SnippetPage = ({
   snippetId,
   section = 'orchestrate',
 }: SnippetPageProps) => {
-  const { t } = useTranslation('snippet')
   const { data, isLoading } = useSnippetInit(snippetId)
   const nodesData = useMemo(() => {
     if (!data)
@@ -37,7 +35,7 @@ const SnippetPage = ({
     return initialEdges(data.graph.edges, data.graph.nodes)
   }, [data])
 
-  if (isLoading) {
+  if (!data || isLoading) {
     return (
       <div className="flex h-full items-center justify-center bg-background-body">
         <Loading />
@@ -45,18 +43,6 @@ const SnippetPage = ({
     )
   }
 
-  if (!data) {
-    return (
-      <div className="flex h-full items-center justify-center bg-background-body px-6">
-        <div className="w-full max-w-md rounded-2xl border border-divider-subtle bg-components-card-bg p-8 text-center shadow-sm">
-          <div className="text-3xl font-semibold text-text-primary">404</div>
-          <div className="pt-3 text-text-primary system-md-semibold">{t('notFoundTitle')}</div>
-          <div className="pt-2 text-text-tertiary system-sm-regular">{t('notFoundDescription')}</div>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <WorkflowWithDefaultContext
       edges={edgesData}
diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
index 765a3210ad..86ddd8c010 100644
--- a/web/service/use-snippet-workflows.ts
+++ b/web/service/use-snippet-workflows.ts
@@ -1,3 +1,4 @@
+import type { SnippetWorkflow } from '@/types/snippet'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { consoleQuery } from '@/service/client'
 
@@ -6,6 +7,10 @@ type WorkflowRunsParams = {
   limit?: number
 }
 
+const isNotFoundError = (error: unknown) => {
+  return !!error && typeof error === 'object' && 'status' in error && error.status === 404
+}
+
 const invalidateSnippetWorkflowQueries = async (
   queryClient: ReturnType<typeof useQueryClient>,
   snippetId: string,
@@ -34,13 +39,33 @@ const invalidateSnippetWorkflowQueries = async (
   ])
 }
 
-export const useSnippetDraftWorkflow = (snippetId: string) => {
-  return useQuery(consoleQuery.snippets.draftWorkflow.queryOptions({
+export const useSnippetDraftWorkflow = (
+  snippetId: string,
+  onSuccess?: (draftWorkflow: SnippetWorkflow) => void,
+) => {
+  const queryOptions = consoleQuery.snippets.draftWorkflow.queryOptions({
     input: {
       params: { snippetId },
     },
     enabled: !!snippetId,
-  }))
+  })
+
+  return useQuery({
+    ...queryOptions,
+    queryFn: async (context) => {
+      try {
+        const draftWorkflow = await queryOptions.queryFn(context)
+        onSuccess?.(draftWorkflow)
+        return draftWorkflow
+      }
+      catch (error) {
+        if (isNotFoundError(error))
+          return undefined
+
+        throw error
+      }
+    },
+  })
 }
 
 export const useSnippetDraftConfig = (snippetId: string) => {
@@ -52,22 +77,46 @@ export const useSnippetDraftConfig = (snippetId: string) => {
   }))
 }
 
-export const useSnippetPublishedWorkflow = (snippetId: string) => {
-  return useQuery(consoleQuery.snippets.publishedWorkflow.queryOptions({
+export const useSnippetPublishedWorkflow = (
+  snippetId: string,
+  onSuccess?: (publishedWorkflow: SnippetWorkflow) => void,
+) => {
+  const queryOptions = consoleQuery.snippets.publishedWorkflow.queryOptions({
     input: {
       params: { snippetId },
     },
     enabled: !!snippetId,
-  }))
+  })
+
+  return useQuery({
+    ...queryOptions,
+    queryFn: async (context) => {
+      const publishedWorkflow = await queryOptions.queryFn(context)
+      onSuccess?.(publishedWorkflow)
+      return publishedWorkflow
+    },
+  })
 }
 
-export const useSnippetDefaultBlockConfigs = (snippetId: string) => {
-  return useQuery(consoleQuery.snippets.defaultBlockConfigs.queryOptions({
+export const useSnippetDefaultBlockConfigs = (
+  snippetId: string,
+  onSuccess?: (nodesDefaultConfigs: unknown) => void,
+) => {
+  const queryOptions = consoleQuery.snippets.defaultBlockConfigs.queryOptions({
     input: {
       params: { snippetId },
     },
     enabled: !!snippetId,
-  }))
+  })
+
+  return useQuery({
+    ...queryOptions,
+    queryFn: async (context) => {
+      const nodesDefaultConfigs = await queryOptions.queryFn(context)
+      onSuccess?.(nodesDefaultConfigs)
+      return nodesDefaultConfigs
+    },
+  })
 }
 
 export const useSnippetWorkflowRuns = (snippetId: string, params: WorkflowRunsParams = {}) => {
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 076510a5c9..6b5ddc780f 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -6,12 +6,10 @@ import type {
   SnippetListItem as SnippetListItemUIModel,
 } from '@/models/snippet'
 import type {
-  CreateSnippetPayload,
   Snippet as SnippetContract,
   SnippetDSLImportResponse,
   SnippetListResponse,
   SnippetWorkflow,
-  UpdateSnippetPayload,
 } from '@/types/snippet'
 import {
   keepPreviousData,
@@ -103,7 +101,7 @@ const toSnippetCanvasData = (workflow?: SnippetWorkflow): SnippetCanvasData => {
   }
 }
 
-const toSnippetDetailPayload = (snippet: SnippetContract, workflow?: SnippetWorkflow): SnippetDetailPayload => {
+export const buildSnippetDetailPayload = (snippet: SnippetContract, workflow?: SnippetWorkflow): SnippetDetailPayload => {
   const inputFields = Array.isArray(snippet.input_fields)
     ? snippet.input_fields as SnippetInputFieldUIModel[]
     : []
@@ -211,7 +209,7 @@ export const useSnippetDetail = (snippetId: string) => {
           }),
         ])
 
-        return toSnippetDetailPayload(snippet, workflow)
+        return buildSnippetDetailPayload(snippet, workflow)
       }
       catch (error) {
         if (isNotFoundError(error))
@@ -341,10 +339,3 @@ export const useConfirmSnippetImportMutation = () => {
     },
   })
 }
-
-export type {
-  CreateSnippetPayload,
-  SnippetDSLImportResponse,
-  SnippetListResponse,
-  UpdateSnippetPayload,
-}

From d01428b5bc7f199730f67af4ef6fa3a24dfcc0d3 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 27 Mar 2026 16:02:47 +0800
Subject: [PATCH 026/108] feat(web): snippet graph draft sync

---
 .../snippets/__tests__/index.spec.tsx         |  21 +++
 .../snippets/components/snippet-main.tsx      |  25 +++-
 .../snippets/hooks/use-configs-map.ts         |  24 ++++
 .../snippets/hooks/use-nodes-sync-draft.ts    | 125 ++++++++++++++++++
 .../hooks/use-snippet-refresh-draft.ts        |  41 ++++++
 web/service/utils.ts                          |   1 +
 web/types/common.ts                           |   1 +
 7 files changed, 237 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/snippets/hooks/use-configs-map.ts
 create mode 100644 web/app/components/snippets/hooks/use-nodes-sync-draft.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-refresh-draft.ts

diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index c16b98f3e7..65f2c8971c 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -10,6 +10,27 @@ vi.mock('../hooks/use-snippet-init', () => ({
   useSnippetInit: (snippetId: string) => mockUseSnippetInit(snippetId),
 }))
 
+vi.mock('../hooks/use-configs-map', () => ({
+  useConfigsMap: () => ({
+    flowId: 'snippet-1',
+    flowType: 'snippet',
+    fileSettings: {},
+  }),
+}))
+
+vi.mock('../hooks/use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: vi.fn(),
+    syncWorkflowDraftWhenPageClose: vi.fn(),
+  }),
+}))
+
+vi.mock('../hooks/use-snippet-refresh-draft', () => ({
+  useSnippetRefreshDraft: () => ({
+    handleRefreshWorkflowDraft: vi.fn(),
+  }),
+}))
+
 vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: vi.fn(),
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index b2ffdf71ea..85b8d9bf06 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -9,7 +9,11 @@ import {
   RiTerminalWindowFill,
   RiTerminalWindowLine,
 } from '@remixicon/react'
-import { useEffect, useMemo, useState } from 'react'
+import {
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import AppSideBar from '@/app/components/app-sidebar'
@@ -20,6 +24,9 @@ import { toast } from '@/app/components/base/ui/toast'
 import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useConfigsMap } from '../hooks/use-configs-map'
+import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
+import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
 import { useSnippetDetailStore } from '../store'
 import SnippetChildren from './snippet-children'
 
@@ -52,6 +59,12 @@ const SnippetMain = ({
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const [fields, setFields] = useState<SnippetInputField[]>(payload.inputFields)
+  const {
+    doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose,
+  } = useNodesSyncDraft(snippetId)
+  const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
+  const configsMap = useConfigsMap(snippetId)
   const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
   const {
     editingField,
@@ -130,6 +143,15 @@ const SnippetMain = ({
     setInputPanelOpen(false)
   }
 
+  const hooksStore = useMemo(() => {
+    return {
+      doSyncWorkflowDraft,
+      syncWorkflowDraftWhenPageClose,
+      handleRefreshWorkflowDraft,
+      configsMap,
+    }
+  }, [configsMap, doSyncWorkflowDraft, handleRefreshWorkflowDraft, syncWorkflowDraftWhenPageClose])
+
   return (
     <div className="relative flex h-full overflow-hidden bg-background-body">
       <AppSideBar
@@ -166,6 +188,7 @@ const SnippetMain = ({
                   nodes={nodes}
                   edges={edges}
                   viewport={viewport ?? graph.viewport}
+                  hooksStore={hooksStore}
                 >
                   <SnippetChildren
                     fields={fields}
diff --git a/web/app/components/snippets/hooks/use-configs-map.ts b/web/app/components/snippets/hooks/use-configs-map.ts
new file mode 100644
index 0000000000..7d5e2863a1
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-configs-map.ts
@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { useStore } from '@/app/components/workflow/store'
+import { Resolution, TransferMethod } from '@/types/app'
+import { FlowType } from '@/types/common'
+
+export const useConfigsMap = (snippetId: string) => {
+  const fileUploadConfig = useStore(s => s.fileUploadConfig)
+
+  return useMemo(() => {
+    return {
+      flowId: snippetId,
+      flowType: FlowType.snippet,
+      fileSettings: {
+        image: {
+          enabled: false,
+          detail: Resolution.high,
+          number_limits: 3,
+          transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+        },
+        fileUploadConfig,
+      },
+    }
+  }, [fileUploadConfig, snippetId])
+}
diff --git a/web/app/components/snippets/hooks/use-nodes-sync-draft.ts b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
new file mode 100644
index 0000000000..e216876979
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
@@ -0,0 +1,125 @@
+import type { SyncDraftCallback } from '@/app/components/workflow/hooks-store'
+import { produce } from 'immer'
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { useSerialAsyncCallback } from '@/app/components/workflow/hooks/use-serial-async-callback'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks/use-workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { API_PREFIX } from '@/config'
+import { consoleClient } from '@/service/client'
+import { postWithKeepalive } from '@/service/fetch'
+import { useSnippetRefreshDraft } from './use-snippet-refresh-draft'
+
+const isSyncConflictError = (error: unknown): error is { bodyUsed: boolean, json: () => Promise<{ code?: string }> } => {
+  return !!error
+    && typeof error === 'object'
+    && 'bodyUsed' in error
+    && 'json' in error
+    && typeof error.json === 'function'
+}
+
+export const useNodesSyncDraft = (snippetId: string) => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const { getNodesReadOnly } = useNodesReadOnly()
+  const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
+
+  const getPostParams = useCallback(() => {
+    const {
+      getNodes,
+      edges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes().filter(node => !node.data?._isTempNode)
+    const [x, y, zoom] = transform
+    const { syncWorkflowDraftHash } = workflowStore.getState()
+
+    if (!snippetId)
+      return null
+
+    const producedNodes = produce(nodes, (draft) => {
+      draft.forEach((node) => {
+        Object.keys(node.data).forEach((key) => {
+          if (key.startsWith('_'))
+            delete node.data[key]
+        })
+      })
+    })
+    const producedEdges = produce(edges.filter(edge => !edge.data?._isTemp), (draft) => {
+      draft.forEach((edge) => {
+        Object.keys(edge.data).forEach((key) => {
+          if (key.startsWith('_'))
+            delete edge.data[key]
+        })
+      })
+    })
+
+    return {
+      url: `/snippets/${snippetId}/workflows/draft`,
+      params: {
+        graph: {
+          nodes: producedNodes,
+          edges: producedEdges,
+          viewport: { x, y, zoom },
+        },
+        hash: syncWorkflowDraftHash,
+      },
+    }
+  }, [snippetId, store, workflowStore])
+
+  const syncWorkflowDraftWhenPageClose = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    const postParams = getPostParams()
+    if (postParams)
+      postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
+  }, [getNodesReadOnly, getPostParams])
+
+  const performSync = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: SyncDraftCallback,
+  ) => {
+    if (getNodesReadOnly())
+      return
+
+    const postParams = getPostParams()
+    if (!postParams)
+      return
+
+    const {
+      setDraftUpdatedAt,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+
+    try {
+      const response = await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId },
+        body: postParams.params,
+      })
+
+      setSyncWorkflowDraftHash(response.hash)
+      setDraftUpdatedAt(response.updated_at)
+      callback?.onSuccess?.()
+    }
+    catch (error: unknown) {
+      if (isSyncConflictError(error) && !error.bodyUsed) {
+        error.json().then((err) => {
+          if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
+            handleRefreshWorkflowDraft()
+        })
+      }
+      callback?.onError?.()
+    }
+    finally {
+      callback?.onSettled?.()
+    }
+  }, [getNodesReadOnly, getPostParams, handleRefreshWorkflowDraft, snippetId, workflowStore])
+
+  const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
+
+  return {
+    doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
new file mode 100644
index 0000000000..d37a338a37
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
@@ -0,0 +1,41 @@
+import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
+import { useCallback } from 'react'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { consoleClient } from '@/service/client'
+
+export const useSnippetRefreshDraft = (snippetId: string) => {
+  const workflowStore = useWorkflowStore()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+
+  const handleRefreshWorkflowDraft = useCallback(() => {
+    const {
+      setDraftUpdatedAt,
+      setIsSyncingWorkflowDraft,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+
+    if (!snippetId)
+      return
+
+    setIsSyncingWorkflowDraft(true)
+    consoleClient.snippets.draftWorkflow({
+      params: { snippetId },
+    }).then((response) => {
+      handleUpdateWorkflowCanvas({
+        ...response.graph,
+        nodes: response.graph?.nodes || [],
+        edges: response.graph?.edges || [],
+        viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
+      } as WorkflowDataUpdater)
+      setSyncWorkflowDraftHash(response.hash)
+      setDraftUpdatedAt(response.updated_at)
+    }).finally(() => {
+      setIsSyncingWorkflowDraft(false)
+    })
+  }, [handleUpdateWorkflowCanvas, snippetId, workflowStore])
+
+  return {
+    handleRefreshWorkflowDraft,
+  }
+}
diff --git a/web/service/utils.ts b/web/service/utils.ts
index 6d0c3ca88e..7691ea4e71 100644
--- a/web/service/utils.ts
+++ b/web/service/utils.ts
@@ -3,6 +3,7 @@ import { FlowType } from '@/types/common'
 export const flowPrefixMap = {
   [FlowType.appFlow]: 'apps',
   [FlowType.ragPipeline]: 'rag/pipelines',
+  [FlowType.snippet]: 'snippets',
 }
 
 export const getFlowPrefix = (type?: FlowType) => {
diff --git a/web/types/common.ts b/web/types/common.ts
index 19bc8acc8d..6c7cbebf20 100644
--- a/web/types/common.ts
+++ b/web/types/common.ts
@@ -1,4 +1,5 @@
 export enum FlowType {
   appFlow = 'appFlow',
   ragPipeline = 'ragPipeline',
+  snippet = 'snippet',
 }

From 559d326cbd614f7b898f46eda461c3eb82bd2799 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 27 Mar 2026 17:24:01 +0800
Subject: [PATCH 027/108] chore(web): mock data of snippet

---
 .../snippets/hooks/use-snippet-init.ts        | 11 +++++++++--
 web/service/use-snippets.mock.ts              | 19 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
index c98e46c446..bacd5d21e9 100644
--- a/web/app/components/snippets/hooks/use-snippet-init.ts
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -9,6 +9,7 @@ import {
   buildSnippetDetailPayload,
   useSnippetApiDetail,
 } from '@/service/use-snippets'
+import { getSnippetDetailMock } from '@/service/use-snippets.mock'
 
 const normalizeNodesDefaultConfigs = (nodesDefaultConfigs: unknown) => {
   if (!nodesDefaultConfigs || typeof nodesDefaultConfigs !== 'object')
@@ -57,19 +58,25 @@ export const useSnippetInit = (snippetId: string) => {
     workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
   })
 
+  const mockData = useMemo(() => getSnippetDetailMock(snippetId), [snippetId])
+  const shouldUseMockData = !snippetApiDetail.isLoading && !snippetApiDetail.data && !!mockData
+
   const data = useMemo(() => {
     if (snippetApiDetail.data && !draftWorkflowQuery.isLoading)
       return buildSnippetDetailPayload(snippetApiDetail.data, draftWorkflowQuery.data)
 
+    if (shouldUseMockData)
+      return mockData
+
     if (snippetApiDetail.error && isNotFoundError(snippetApiDetail.error))
       return null
 
     return undefined
-  }, [draftWorkflowQuery.data, draftWorkflowQuery.isLoading, snippetApiDetail.data, snippetApiDetail.error])
+  }, [draftWorkflowQuery.data, draftWorkflowQuery.isLoading, mockData, shouldUseMockData, snippetApiDetail.data, snippetApiDetail.error])
 
   return {
     ...snippetApiDetail,
     data,
-    isLoading: snippetApiDetail.isLoading || draftWorkflowQuery.isLoading,
+    isLoading: shouldUseMockData ? false : snippetApiDetail.isLoading || draftWorkflowQuery.isLoading,
   }
 }
diff --git a/web/service/use-snippets.mock.ts b/web/service/use-snippets.mock.ts
index 222652e0e4..60408340b2 100644
--- a/web/service/use-snippets.mock.ts
+++ b/web/service/use-snippets.mock.ts
@@ -27,6 +27,18 @@ export const getSnippetListMock = (): SnippetListItem[] => ([
   },
 ])
 
+const createSnippetMock = (snippetId: string): SnippetListItem => ({
+  id: snippetId,
+  name: 'Tone Rewriter',
+  description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+  author: 'Evan',
+  updatedAt: 'Updated 2h ago',
+  usage: 'Used 19 times',
+  icon: '🪄',
+  iconBackground: '#E0EAFF',
+  status: 'Draft',
+})
+
 const getSnippetInputFieldsMock = (): SnippetInputField[] => ([
   {
     type: PipelineInputVarType.textInput,
@@ -175,11 +187,12 @@ const getSnippetGraphMock = (): SnippetDetailPayload['graph'] => ({
   ],
 })
 
-const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
-  const snippet = getSnippetListMock().find(item => item.id === snippetId)
-  if (!snippet)
+export const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
+  if (!snippetId)
     return null
 
+  const snippet = getSnippetListMock().find(item => item.id === snippetId) ?? createSnippetMock(snippetId)
+
   const inputFields = getSnippetInputFieldsMock()
 
   return {

From c41ba7d6277632256069347ea62537b8646fbc03 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 15:02:34 +0800
Subject: [PATCH 028/108] feat(web): snippet header in graph

---
 .../snippets/__tests__/index.spec.tsx         | 15 ++++
 .../snippets/components/snippet-children.tsx  |  3 +
 .../snippet-header/__tests__/index.spec.tsx   | 73 ++++++++++++++++
 .../components/snippet-header/index.tsx       | 85 +++++++++----------
 .../snippet-header/input-field-button.tsx     | 31 +++++++
 .../components/snippet-header/publisher.tsx   | 27 ++++++
 .../components/snippet-header/run-mode.tsx    | 28 ++++++
 .../snippets/components/snippet-main.tsx      |  1 +
 .../header/__tests__/header-layouts.spec.tsx  | 14 +++
 .../workflow/header/header-in-normal.tsx      | 20 +++--
 10 files changed, 249 insertions(+), 48 deletions(-)
 create mode 100644 web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/input-field-button.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/publisher.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/run-mode.tsx

diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index 65f2c8971c..e0a2777f2a 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -1,3 +1,4 @@
+import type { HeaderProps } from '@/app/components/workflow/header'
 import type { SnippetDetailPayload } from '@/models/snippet'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { PipelineInputVarType } from '@/models/pipeline'
@@ -81,6 +82,20 @@ vi.mock('@/app/components/workflow', () => ({
   ),
 }))
 
+vi.mock('@/app/components/workflow/header', () => ({
+  default: (props: HeaderProps) => {
+    const CustomRunMode = props.normal?.runAndHistoryProps?.components?.RunMode
+
+    return (
+      <div data-testid="workflow-header">
+        {props.normal?.components?.left}
+        {CustomRunMode && <CustomRunMode text={props.normal?.runAndHistoryProps?.runButtonText} />}
+        {props.normal?.components?.middle}
+      </div>
+    )
+  },
+}))
+
 vi.mock('@/app/components/workflow/context', () => ({
   WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="workflow-context-provider">{children}</div>
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
index 0bf08530a1..1c3728290f 100644
--- a/web/app/components/snippets/components/snippet-children.tsx
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -8,6 +8,7 @@ import SnippetHeader from './snippet-header'
 import SnippetWorkflowPanel from './workflow-panel'
 
 type SnippetChildrenProps = {
+  snippetId: string
   fields: SnippetInputField[]
   uiMeta: SnippetDetailUIModel
   editingField: SnippetInputField | null
@@ -26,6 +27,7 @@ type SnippetChildrenProps = {
 }
 
 const SnippetChildren = ({
+  snippetId,
   fields,
   uiMeta,
   editingField,
@@ -47,6 +49,7 @@ const SnippetChildren = ({
       <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background-body to-transparent" />
 
       <SnippetHeader
+        snippetId={snippetId}
         inputFieldCount={fields.length}
         onToggleInputPanel={onToggleInputPanel}
         onTogglePublishMenu={onTogglePublishMenu}
diff --git a/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx b/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..57216574e4
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
@@ -0,0 +1,73 @@
+import type { HeaderProps } from '@/app/components/workflow/header'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SnippetHeader from '..'
+
+vi.mock('@/app/components/workflow/header', () => ({
+  default: (props: HeaderProps) => {
+    const CustomRunMode = props.normal?.runAndHistoryProps?.components?.RunMode
+
+    return (
+      <div
+        data-testid="workflow-header"
+        data-show-env={String(props.normal?.controls?.showEnvButton ?? true)}
+        data-show-global-variable={String(props.normal?.controls?.showGlobalVariableButton ?? true)}
+        data-history-url={props.normal?.runAndHistoryProps?.viewHistoryProps?.historyUrl ?? ''}
+      >
+        {props.normal?.components?.left}
+        {CustomRunMode && <CustomRunMode text={props.normal?.runAndHistoryProps?.runButtonText} />}
+        {props.normal?.components?.middle}
+      </div>
+    )
+  },
+}))
+
+describe('SnippetHeader', () => {
+  const mockToggleInputPanel = vi.fn()
+  const mockTogglePublishMenu = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Verifies the wrapper passes the expected workflow header configuration.
+  describe('Rendering', () => {
+    it('should configure workflow header slots and hide workflow-only controls', () => {
+      render(
+        <SnippetHeader
+          snippetId="snippet-1"
+          inputFieldCount={3}
+          onToggleInputPanel={mockToggleInputPanel}
+          onTogglePublishMenu={mockTogglePublishMenu}
+        />,
+      )
+
+      const header = screen.getByTestId('workflow-header')
+      expect(header).toHaveAttribute('data-show-env', 'false')
+      expect(header).toHaveAttribute('data-show-global-variable', 'false')
+      expect(header).toHaveAttribute('data-history-url', '/snippets/snippet-1/workflow-runs')
+      expect(screen.getByRole('button', { name: /snippet\.inputFieldButton/i })).toHaveTextContent('3')
+      expect(screen.getByRole('button', { name: /snippet\.publishButton/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /snippet\.testRunButton/i })).toBeInTheDocument()
+    })
+  })
+
+  // Verifies forwarded callbacks still drive the snippet-specific controls.
+  describe('User Interactions', () => {
+    it('should invoke the snippet callbacks when input and publish buttons are clicked', () => {
+      render(
+        <SnippetHeader
+          snippetId="snippet-1"
+          inputFieldCount={1}
+          onToggleInputPanel={mockToggleInputPanel}
+          onTogglePublishMenu={mockTogglePublishMenu}
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: /snippet\.inputFieldButton/i }))
+      fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
+
+      expect(mockToggleInputPanel).toHaveBeenCalledTimes(1)
+      expect(mockTogglePublishMenu).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/snippet-header/index.tsx b/web/app/components/snippets/components/snippet-header/index.tsx
index aba4efadbd..d25d9a5d17 100644
--- a/web/app/components/snippets/components/snippet-header/index.tsx
+++ b/web/app/components/snippets/components/snippet-header/index.tsx
@@ -1,61 +1,60 @@
 'use client'
 
-import { useTranslation } from 'react-i18next'
+import type { HeaderProps } from '@/app/components/workflow/header'
+import {
+  memo,
+  useMemo,
+} from 'react'
+import Header from '@/app/components/workflow/header'
+import InputFieldButton from './input-field-button'
+import Publisher from './publisher'
+import RunMode from './run-mode'
 
 type SnippetHeaderProps = {
+  snippetId: string
   inputFieldCount: number
   onToggleInputPanel: () => void
   onTogglePublishMenu: () => void
 }
 
 const SnippetHeader = ({
+  snippetId,
   inputFieldCount,
   onToggleInputPanel,
   onTogglePublishMenu,
 }: SnippetHeaderProps) => {
-  const { t } = useTranslation('snippet')
+  const viewHistoryProps = useMemo(() => {
+    return {
+      historyUrl: `/snippets/${snippetId}/workflow-runs`,
+    }
+  }, [snippetId])
 
-  return (
-    <div className="absolute right-3 top-3 z-20 flex flex-wrap items-center justify-end gap-2">
-      <button
-        type="button"
-        className="flex items-center gap-2 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-text-secondary shadow-xs backdrop-blur"
-        onClick={onToggleInputPanel}
-      >
-        <span className="text-[13px] font-medium leading-4">{t('inputFieldButton')}</span>
-        <span className="rounded-md border border-divider-deep px-1.5 py-0.5 text-[10px] font-medium leading-3 text-text-tertiary">
-          {inputFieldCount}
-        </span>
-      </button>
+  const headerProps: HeaderProps = useMemo(() => {
+    return {
+      normal: {
+        components: {
+          left: <InputFieldButton count={inputFieldCount} onClick={onToggleInputPanel} />,
+          middle: <Publisher onClick={onTogglePublishMenu} />,
+        },
+        controls: {
+          showEnvButton: false,
+          showGlobalVariableButton: false,
+        },
+        runAndHistoryProps: {
+          showRunButton: true,
+          viewHistoryProps,
+          components: {
+            RunMode,
+          },
+        },
+      },
+      viewHistory: {
+        viewHistoryProps,
+      },
+    }
+  }, [inputFieldCount, onToggleInputPanel, onTogglePublishMenu, viewHistoryProps])
 
-      <button
-        type="button"
-        className="flex items-center gap-2 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-text-accent shadow-xs backdrop-blur"
-      >
-        <span aria-hidden className="i-ri-play-mini-fill h-4 w-4" />
-        <span className="text-[13px] font-medium leading-4">{t('testRunButton')}</span>
-        <span className="rounded-md bg-state-accent-active px-1.5 py-0.5 text-[10px] font-semibold leading-3 text-text-accent">R</span>
-      </button>
-
-      <div className="relative">
-        <button
-          type="button"
-          className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]"
-          onClick={onTogglePublishMenu}
-        >
-          <span className="text-[13px] font-medium leading-4">{t('publishButton')}</span>
-          <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
-        </button>
-      </div>
-
-      <button
-        type="button"
-        className="flex h-9 w-9 items-center justify-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary shadow-xs"
-      >
-        <span aria-hidden className="i-ri-more-2-line h-4 w-4" />
-      </button>
-    </div>
-  )
+  return <Header {...headerProps} />
 }
 
-export default SnippetHeader
+export default memo(SnippetHeader)
diff --git a/web/app/components/snippets/components/snippet-header/input-field-button.tsx b/web/app/components/snippets/components/snippet-header/input-field-button.tsx
new file mode 100644
index 0000000000..1bcecf5668
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/input-field-button.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type InputFieldButtonProps = {
+  count: number
+  onClick: () => void
+}
+
+const InputFieldButton = ({
+  count,
+  onClick,
+}: InputFieldButtonProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-2 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-text-secondary shadow-xs backdrop-blur"
+      onClick={onClick}
+    >
+      <span className="text-[13px] font-medium leading-4">{t('inputFieldButton')}</span>
+      <span className="rounded-md border border-divider-deep px-1.5 py-0.5 text-[10px] font-medium leading-3 text-text-tertiary">
+        {count}
+      </span>
+    </button>
+  )
+}
+
+export default memo(InputFieldButton)
diff --git a/web/app/components/snippets/components/snippet-header/publisher.tsx b/web/app/components/snippets/components/snippet-header/publisher.tsx
new file mode 100644
index 0000000000..0d4cf02611
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/publisher.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type PublisherProps = {
+  onClick: () => void
+}
+
+const Publisher = ({
+  onClick,
+}: PublisherProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]"
+      onClick={onClick}
+    >
+      <span className="text-[13px] font-medium leading-4">{t('publishButton')}</span>
+      <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
+    </button>
+  )
+}
+
+export default memo(Publisher)
diff --git a/web/app/components/snippets/components/snippet-header/run-mode.tsx b/web/app/components/snippets/components/snippet-header/run-mode.tsx
new file mode 100644
index 0000000000..d18df6f23a
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/run-mode.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { RiPlayLargeLine } from '@remixicon/react'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type RunModeProps = {
+  text?: string
+}
+
+const RunMode = ({
+  text,
+}: RunModeProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <button
+      type="button"
+      className="flex h-7 items-center gap-1 rounded-md px-1.5 text-[13px] font-medium text-text-accent hover:bg-state-accent-hover"
+    >
+      <RiPlayLargeLine className="h-4 w-4" />
+      <span>{text ?? t('testRunButton')}</span>
+      <span className="rounded-md bg-state-accent-active px-1.5 py-0.5 text-[10px] font-semibold leading-3 text-text-accent">R</span>
+    </button>
+  )
+}
+
+export default React.memo(RunMode)
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index 85b8d9bf06..a5441b6df8 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -191,6 +191,7 @@ const SnippetMain = ({
                   hooksStore={hooksStore}
                 >
                   <SnippetChildren
+                    snippetId={snippetId}
                     fields={fields}
                     uiMeta={uiMeta}
                     editingField={editingField}
diff --git a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
index d092e769d6..d0f87f5dea 100644
--- a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
@@ -211,6 +211,20 @@ describe('Header layout components', () => {
       expect(store.getState().showChatVariablePanel).toBe(false)
       expect(store.getState().showGlobalVariablePanel).toBe(false)
     })
+
+    it('should hide env and global variable buttons when the controls are disabled', () => {
+      renderWorkflowComponent(
+        <HeaderInNormal
+          controls={{
+            showEnvButton: false,
+            showGlobalVariableButton: false,
+          }}
+        />,
+      )
+
+      expect(screen.queryByTestId('env-button')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('global-variable-button')).not.toBeInTheDocument()
+    })
   })
 
   describe('HeaderInRestoring', () => {
diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 52ffee4ed5..2b050e6a57 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -28,10 +28,15 @@ export type HeaderInNormalProps = {
     middle?: React.ReactNode
     chatVariableTrigger?: React.ReactNode
   }
+  controls?: {
+    showEnvButton?: boolean
+    showGlobalVariableButton?: boolean
+  }
   runAndHistoryProps?: RunAndHistoryProps
 }
 const HeaderInNormal = ({
   components,
+  controls,
   runAndHistoryProps,
 }: HeaderInNormalProps) => {
   const workflowStore = useWorkflowStore()
@@ -47,6 +52,9 @@ const HeaderInNormal = ({
   const selectedNode = nodes.find(node => node.data.selected)
   const { handleBackupDraft } = useWorkflowRun()
   const { closeAllInputFieldPanels } = useInputFieldPanel()
+  const showEnvButton = controls?.showEnvButton !== false
+  const showGlobalVariableButton = controls?.showGlobalVariableButton !== false
+  const showContextButtons = !!components?.chatVariableTrigger || showEnvButton || showGlobalVariableButton
 
   const onStartRestoring = useCallback(() => {
     workflowStore.setState({ isRestoring: true })
@@ -75,11 +83,13 @@ const HeaderInNormal = ({
         {components?.left}
         <Divider type="vertical" className="mx-auto h-3.5" />
         <RunAndHistory {...runAndHistoryProps} />
-        <div className="shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]">
-          {components?.chatVariableTrigger}
-          <EnvButton disabled={nodesReadOnly} />
-          <GlobalVariableButton disabled={nodesReadOnly} />
-        </div>
+        {showContextButtons && (
+          <div className="shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]">
+            {components?.chatVariableTrigger}
+            {showEnvButton && <EnvButton disabled={nodesReadOnly} />}
+            {showGlobalVariableButton && <GlobalVariableButton disabled={nodesReadOnly} />}
+          </div>
+        )}
         {components?.middle}
         <VersionHistoryButton onClick={onStartRestoring} />
       </div>

From dccf8e723a29af16c88218e2c46c40087147824c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 15:26:59 +0800
Subject: [PATCH 029/108] feat(web): snippet version panel

---
 .../__tests__/workflow-panel.spec.tsx         | 52 +++++++++++++++++++
 .../snippets/components/snippet-children.tsx  |  1 +
 .../snippets/components/workflow-panel.tsx    | 15 ++++++
 3 files changed, 68 insertions(+)
 create mode 100644 web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx

diff --git a/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
new file mode 100644
index 0000000000..e897216e6a
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
@@ -0,0 +1,52 @@
+import type { PanelProps } from '@/app/components/workflow/panel'
+import type { SnippetInputField } from '@/models/snippet'
+import { render, waitFor } from '@testing-library/react'
+import SnippetWorkflowPanel from '../workflow-panel'
+
+let capturedPanelProps: PanelProps | null = null
+
+vi.mock('@/app/components/workflow/panel', () => ({
+  default: (props: PanelProps) => {
+    capturedPanelProps = props
+    return <div data-testid="workflow-panel">{props.components?.left}</div>
+  },
+}))
+
+const defaultFields: SnippetInputField[] = []
+
+describe('SnippetWorkflowPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedPanelProps = null
+  })
+
+  // Verifies snippet panel wires version history support into the shared workflow panel.
+  describe('Rendering', () => {
+    it('should pass snippet version history panel props to the shared workflow panel', async () => {
+      render(
+        <SnippetWorkflowPanel
+          snippetId="snippet-1"
+          fields={defaultFields}
+          editingField={null}
+          isEditorOpen={false}
+          isInputPanelOpen={false}
+          onCloseInputPanel={vi.fn()}
+          onOpenEditor={vi.fn()}
+          onCloseEditor={vi.fn()}
+          onSubmitField={vi.fn()}
+          onRemoveField={vi.fn()}
+          onPrimarySortChange={vi.fn()}
+          onSecondarySortChange={vi.fn()}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(capturedPanelProps?.versionHistoryPanelProps?.getVersionListUrl).toBe('/snippets/snippet-1/workflows')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.deleteVersionUrl?.('version-1')).toBe('/snippets/snippet-1/workflows/version-1')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.restoreVersionUrl('version-1')).toBe('/snippets/snippet-1/workflows/version-1/restore')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.updateVersionUrl?.('version-1')).toBe('/snippets/snippet-1/workflows/version-1')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.latestVersionId).toBe('')
+      })
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
index 1c3728290f..b812e56a71 100644
--- a/web/app/components/snippets/components/snippet-children.tsx
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -56,6 +56,7 @@ const SnippetChildren = ({
       />
 
       <SnippetWorkflowPanel
+        snippetId={snippetId}
         fields={fields}
         editingField={editingField}
         isEditorOpen={isEditorOpen}
diff --git a/web/app/components/snippets/components/workflow-panel.tsx b/web/app/components/snippets/components/workflow-panel.tsx
index e59ba6d2b6..47769899b8 100644
--- a/web/app/components/snippets/components/workflow-panel.tsx
+++ b/web/app/components/snippets/components/workflow-panel.tsx
@@ -8,6 +8,7 @@ import SnippetInputFieldEditor from './input-field-editor'
 import SnippetInputFieldPanel from './panel'
 
 type SnippetWorkflowPanelProps = {
+  snippetId: string
   fields: SnippetInputField[]
   editingField: SnippetInputField | null
   isEditorOpen: boolean
@@ -59,6 +60,7 @@ const SnippetPanelOnLeft = ({
 }
 
 const SnippetWorkflowPanel = ({
+  snippetId,
   fields,
   editingField,
   isEditorOpen,
@@ -71,11 +73,22 @@ const SnippetWorkflowPanel = ({
   onPrimarySortChange,
   onSecondarySortChange,
 }: SnippetWorkflowPanelProps) => {
+  const versionHistoryPanelProps = useMemo(() => {
+    return {
+      getVersionListUrl: `/snippets/${snippetId}/workflows`,
+      deleteVersionUrl: (versionId: string) => `/snippets/${snippetId}/workflows/${versionId}`,
+      restoreVersionUrl: (versionId: string) => `/snippets/${snippetId}/workflows/${versionId}/restore`,
+      updateVersionUrl: (versionId: string) => `/snippets/${snippetId}/workflows/${versionId}`,
+      latestVersionId: '',
+    }
+  }, [snippetId])
+
   const panelProps: PanelProps = useMemo(() => {
     return {
       components: {
         left: (
           <SnippetPanelOnLeft
+            snippetId={snippetId}
             fields={fields}
             editingField={editingField}
             isEditorOpen={isEditorOpen}
@@ -90,6 +103,7 @@ const SnippetWorkflowPanel = ({
           />
         ),
       },
+      versionHistoryPanelProps,
     }
   }, [
     editingField,
@@ -103,6 +117,7 @@ const SnippetWorkflowPanel = ({
     onRemoveField,
     onSecondarySortChange,
     onSubmitField,
+    versionHistoryPanelProps,
   ])
 
   return <Panel {...panelProps} />

From e6e3229d177f3e82b10e1c2d3707785aa7891682 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 15:45:05 +0800
Subject: [PATCH 030/108] feat(web): input field button style

---
 .../base/icons/assets/vender/workflow/input-field.svg        | 3 +++
 .../components/snippet-header/input-field-button.tsx         | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/base/icons/assets/vender/workflow/input-field.svg

diff --git a/web/app/components/base/icons/assets/vender/workflow/input-field.svg b/web/app/components/base/icons/assets/vender/workflow/input-field.svg
new file mode 100644
index 0000000000..47ef58181e
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/workflow/input-field.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33317 3.33333H7.33317V12.6667H5.33317V14H10.6665V12.6667H8.6665V3.33333H10.6665V2H5.33317V3.33333ZM1.33317 4.66667C0.964984 4.66667 0.666504 4.96515 0.666504 5.33333V10.6667C0.666504 11.0349 0.964984 11.3333 1.33317 11.3333H5.33317V10H1.99984V6H5.33317V4.66667H1.33317ZM10.6665 6H13.9998V10H10.6665V11.3333H14.6665C15.0347 11.3333 15.3332 11.0349 15.3332 10.6667V5.33333C15.3332 4.96515 15.0347 4.66667 14.6665 4.66667H10.6665V6Z" fill="#354052"/>
+</svg>
diff --git a/web/app/components/snippets/components/snippet-header/input-field-button.tsx b/web/app/components/snippets/components/snippet-header/input-field-button.tsx
index 1bcecf5668..a30e5032c5 100644
--- a/web/app/components/snippets/components/snippet-header/input-field-button.tsx
+++ b/web/app/components/snippets/components/snippet-header/input-field-button.tsx
@@ -17,11 +17,12 @@ const InputFieldButton = ({
   return (
     <button
       type="button"
-      className="flex items-center gap-2 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-text-secondary shadow-xs backdrop-blur"
+      className="flex h-8 items-center gap-1 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 text-text-secondary shadow-xs backdrop-blur"
       onClick={onClick}
     >
+      <span aria-hidden className="i-custom-vender-workflow-input-field h-4 w-4 shrink-0" />
       <span className="text-[13px] font-medium leading-4">{t('inputFieldButton')}</span>
-      <span className="rounded-md border border-divider-deep px-1.5 py-0.5 text-[10px] font-medium leading-3 text-text-tertiary">
+      <span className="rounded-md border border-divider-deep px-1 py-0.5 text-[10px] font-medium leading-3 text-text-tertiary">
         {count}
       </span>
     </button>

From 1e76ef5ccb2589135442bdc849ebeaaa75a493bd Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 15:56:24 +0800
Subject: [PATCH 031/108] chore(web): ignore system vars & conversation vars in
 rag-pipeline and snippet

---
 .../__tests__/use-inspect-vars-crud.spec.ts   | 64 +++++++++++++++++++
 .../workflow/hooks/use-inspect-vars-crud.ts   |  7 +-
 2 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts

diff --git a/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts b/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts
new file mode 100644
index 0000000000..c1feaf06e3
--- /dev/null
+++ b/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts
@@ -0,0 +1,64 @@
+import { FlowType } from '@/types/common'
+import { renderWorkflowHook } from '../../__tests__/workflow-test-env'
+import useInspectVarsCrud from '../use-inspect-vars-crud'
+
+const mockUseConversationVarValues = vi.fn()
+const mockUseSysVarValues = vi.fn()
+
+vi.mock('@/service/use-workflow', () => ({
+  useConversationVarValues: (flowType?: FlowType, flowId?: string) => mockUseConversationVarValues(flowType, flowId),
+  useSysVarValues: (flowType?: FlowType, flowId?: string) => mockUseSysVarValues(flowType, flowId),
+}))
+
+describe('useInspectVarsCrud', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseConversationVarValues.mockReturnValue({ data: [] })
+    mockUseSysVarValues.mockReturnValue({ data: [] })
+  })
+
+  it('should pass flowId to conversation and system variable queries for app flows', () => {
+    renderWorkflowHook(() => useInspectVarsCrud(), {
+      hooksStoreProps: {
+        configsMap: {
+          flowId: 'app-1',
+          flowType: FlowType.appFlow,
+          fileSettings: {},
+        },
+      },
+    })
+
+    expect(mockUseConversationVarValues).toHaveBeenCalledWith(FlowType.appFlow, 'app-1')
+    expect(mockUseSysVarValues).toHaveBeenCalledWith(FlowType.appFlow, 'app-1')
+  })
+
+  it('should skip conversation and system variable queries for rag pipelines', () => {
+    renderWorkflowHook(() => useInspectVarsCrud(), {
+      hooksStoreProps: {
+        configsMap: {
+          flowId: 'pipeline-1',
+          flowType: FlowType.ragPipeline,
+          fileSettings: {},
+        },
+      },
+    })
+
+    expect(mockUseConversationVarValues).toHaveBeenCalledWith(FlowType.ragPipeline, '')
+    expect(mockUseSysVarValues).toHaveBeenCalledWith(FlowType.ragPipeline, '')
+  })
+
+  it('should skip conversation and system variable queries for snippets', () => {
+    renderWorkflowHook(() => useInspectVarsCrud(), {
+      hooksStoreProps: {
+        configsMap: {
+          flowId: 'snippet-1',
+          flowType: FlowType.snippet,
+          fileSettings: {},
+        },
+      },
+    })
+
+    expect(mockUseConversationVarValues).toHaveBeenCalledWith(FlowType.snippet, '')
+    expect(mockUseSysVarValues).toHaveBeenCalledWith(FlowType.snippet, '')
+  })
+})
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
index 2a97019383..1bca16aea6 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -12,9 +12,10 @@ const varsAppendStartNodeKeys = ['query', 'files']
 const useInspectVarsCrud = () => {
   const partOfNodesWithInspectVars = useStore(s => s.nodesWithInspectVars)
   const configsMap = useHooksStore(s => s.configsMap)
-  const isRagPipeline = configsMap?.flowType === FlowType.ragPipeline
-  const { data: conversationVars } = useConversationVarValues(configsMap?.flowType, !isRagPipeline ? configsMap?.flowId : '')
-  const { data: allSystemVars } = useSysVarValues(configsMap?.flowType, !isRagPipeline ? configsMap?.flowId : '')
+  const shouldSkipSharedVariableQueries = configsMap?.flowType === FlowType.ragPipeline || configsMap?.flowType === FlowType.snippet
+  const variableFlowId = shouldSkipSharedVariableQueries ? '' : configsMap?.flowId
+  const { data: conversationVars } = useConversationVarValues(configsMap?.flowType, variableFlowId)
+  const { data: allSystemVars } = useSysVarValues(configsMap?.flowType, variableFlowId)
   const { varsAppendStartNode, systemVars } = (() => {
     if (allSystemVars?.length === 0)
       return { varsAppendStartNode: [], systemVars: [] }

From 0f13aabea8223713fd268d75de67599f9a74aa69 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 16:31:38 +0800
Subject: [PATCH 032/108] feat(web): input fields in snippet

---
 .../snippets/__tests__/index.spec.tsx         |   1 +
 .../__tests__/snippet-main.spec.tsx           | 216 ++++++++++++++++++
 .../__tests__/workflow-panel.spec.tsx         |   3 +-
 .../snippets/components/panel/index.tsx       |  57 +----
 .../snippets/components/snippet-children.tsx  |  12 +-
 .../snippets/components/snippet-main.tsx      |  33 +--
 .../snippets/components/workflow-panel.tsx    |  19 +-
 .../hooks/__tests__/use-snippet-init.spec.ts  |  62 +++++
 .../snippets/hooks/use-nodes-sync-draft.ts    |  95 +++++---
 .../hooks/use-snippet-refresh-draft.ts        |   4 +-
 web/service/use-snippets.ts                   |   4 +-
 web/types/snippet.ts                          |   3 +-
 12 files changed, 395 insertions(+), 114 deletions(-)
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-main.spec.tsx

diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index e0a2777f2a..3c9a831035 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -22,6 +22,7 @@ vi.mock('../hooks/use-configs-map', () => ({
 vi.mock('../hooks/use-nodes-sync-draft', () => ({
   useNodesSyncDraft: () => ({
     doSyncWorkflowDraft: vi.fn(),
+    syncInputFieldsDraft: vi.fn(),
     syncWorkflowDraftWhenPageClose: vi.fn(),
   }),
 }))
diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
new file mode 100644
index 0000000000..7550d7d045
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -0,0 +1,216 @@
+import type { WorkflowProps } from '@/app/components/workflow'
+import type { SnippetDetailPayload, SnippetInputField, SnippetSection } from '@/models/snippet'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import SnippetMain from '../snippet-main'
+
+const mockSetAppSidebarExpand = vi.fn()
+const mockSyncInputFieldsDraft = vi.fn()
+const mockCloseEditor = vi.fn()
+const mockOpenEditor = vi.fn()
+const mockReset = vi.fn()
+const mockSetInputPanelOpen = vi.fn()
+const mockToggleInputPanel = vi.fn()
+const mockTogglePublishMenu = vi.fn()
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: { mobile: 'mobile', desktop: 'desktop' },
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/store', () => ({
+  useSnippetDetailStore: (selector: (state: {
+    editingField: SnippetInputField | null
+    isEditorOpen: boolean
+    isInputPanelOpen: boolean
+    isPublishMenuOpen: boolean
+    closeEditor: typeof mockCloseEditor
+    openEditor: typeof mockOpenEditor
+    reset: typeof mockReset
+    setInputPanelOpen: typeof mockSetInputPanelOpen
+    toggleInputPanel: typeof mockToggleInputPanel
+    togglePublishMenu: typeof mockTogglePublishMenu
+  }) => unknown) => selector({
+    editingField: null,
+    isEditorOpen: false,
+    isInputPanelOpen: true,
+    isPublishMenuOpen: false,
+    closeEditor: mockCloseEditor,
+    openEditor: mockOpenEditor,
+    reset: mockReset,
+    setInputPanelOpen: mockSetInputPanelOpen,
+    toggleInputPanel: mockToggleInputPanel,
+    togglePublishMenu: mockTogglePublishMenu,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-configs-map', () => ({
+  useConfigsMap: () => ({
+    flowId: 'snippet-1',
+    flowType: 'snippet',
+    fileSettings: {},
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: vi.fn(),
+    syncInputFieldsDraft: mockSyncInputFieldsDraft,
+    syncWorkflowDraftWhenPageClose: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-refresh-draft', () => ({
+  useSnippetRefreshDraft: () => ({
+    handleRefreshWorkflowDraft: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (modeState: string) => React.ReactNode
+    renderNavigation?: (modeState: string) => React.ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      <div>{renderHeader?.('expand')}</div>
+      <div>{renderNavigation?.('expand')}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name }: { name: string }) => <div>{name}</div>,
+}))
+
+vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
+  default: () => <div data-testid="snippet-info" />,
+}))
+
+vi.mock('@/app/components/evaluation', () => ({
+  default: () => <div data-testid="evaluation" />,
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+  WorkflowWithInnerContext: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-inner-context">{children}</div>
+  ),
+}))
+
+vi.mock('@/app/components/snippets/components/snippet-children', () => ({
+  default: ({
+    onRemoveField,
+    onSubmitField,
+  }: {
+    onRemoveField: (index: number) => void
+    onSubmitField: (field: SnippetInputField) => void
+  }) => (
+    <div>
+      <button type="button" onClick={() => onRemoveField(0)}>remove</button>
+      <button
+        type="button"
+        onClick={() => onSubmitField({
+          type: PipelineInputVarType.textInput,
+          label: 'New Field',
+          variable: 'new_field',
+          required: true,
+        })}
+      >
+        submit
+      </button>
+    </div>
+  ),
+}))
+
+const payload: SnippetDetailPayload = {
+  snippet: {
+    id: 'snippet-1',
+    name: 'Snippet',
+    description: 'desc',
+    author: '',
+    updatedAt: '2026-03-29 10:00',
+    usage: '0',
+    icon: '',
+    iconBackground: '',
+  },
+  graph: {
+    nodes: [],
+    edges: [],
+    viewport: { x: 0, y: 0, zoom: 1 },
+  },
+  inputFields: [
+    {
+      type: PipelineInputVarType.textInput,
+      label: 'Blog URL',
+      variable: 'blog_url',
+      required: true,
+    },
+  ],
+  uiMeta: {
+    inputFieldCount: 1,
+    checklistCount: 0,
+    autoSavedAt: '2026-03-29 10:00',
+  },
+}
+
+const renderSnippetMain = (section: SnippetSection = 'orchestrate') => {
+  return render(
+    <SnippetMain
+      payload={payload}
+      snippetId="snippet-1"
+      section={section}
+      nodes={[] as WorkflowProps['nodes']}
+      edges={[] as WorkflowProps['edges']}
+      viewport={{ x: 0, y: 0, zoom: 1 }}
+    />,
+  )
+}
+
+describe('SnippetMain', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSyncInputFieldsDraft.mockResolvedValue(undefined)
+  })
+
+  describe('Input Fields Sync', () => {
+    it('should sync draft input_fields when removing a field from the panel', async () => {
+      renderSnippetMain()
+
+      fireEvent.click(screen.getByRole('button', { name: 'remove' }))
+
+      await waitFor(() => {
+        expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([], {
+          onRefresh: expect.any(Function),
+        })
+      })
+    })
+
+    it('should sync draft input_fields when submitting a field from the editor', async () => {
+      renderSnippetMain()
+
+      fireEvent.click(screen.getByRole('button', { name: 'submit' }))
+
+      await waitFor(() => {
+        expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([
+          payload.inputFields[0],
+          {
+            type: PipelineInputVarType.textInput,
+            label: 'New Field',
+            variable: 'new_field',
+            required: true,
+          },
+        ], {
+          onRefresh: expect.any(Function),
+        })
+      })
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
index e897216e6a..7b81a98494 100644
--- a/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
@@ -35,8 +35,7 @@ describe('SnippetWorkflowPanel', () => {
           onCloseEditor={vi.fn()}
           onSubmitField={vi.fn()}
           onRemoveField={vi.fn()}
-          onPrimarySortChange={vi.fn()}
-          onSecondarySortChange={vi.fn()}
+          onSortChange={vi.fn()}
         />,
       )
 
diff --git a/web/app/components/snippets/components/panel/index.tsx b/web/app/components/snippets/components/panel/index.tsx
index c949a35f14..96de81d2ee 100644
--- a/web/app/components/snippets/components/panel/index.tsx
+++ b/web/app/components/snippets/components/panel/index.tsx
@@ -5,7 +5,6 @@ import type { SnippetInputField } from '@/models/snippet'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import Divider from '@/app/components/base/divider'
 import FieldListContainer from '@/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container'
 
 type SnippetInputFieldPanelProps = {
@@ -14,8 +13,7 @@ type SnippetInputFieldPanelProps = {
   onAdd: () => void
   onEdit: (field: SnippetInputField) => void
   onRemove: (index: number) => void
-  onPrimarySortChange: (fields: SnippetInputField[]) => void
-  onSecondarySortChange: (fields: SnippetInputField[]) => void
+  onSortChange: (fields: SnippetInputField[]) => void
 }
 
 const toInputFields = (list: SortableItem[]) => {
@@ -31,32 +29,19 @@ const SnippetInputFieldPanel = ({
   onAdd,
   onEdit,
   onRemove,
-  onPrimarySortChange,
-  onSecondarySortChange,
+  onSortChange,
 }: SnippetInputFieldPanelProps) => {
   const { t } = useTranslation('snippet')
-  const primaryFields = fields.slice(0, 2)
-  const secondaryFields = fields.slice(2)
 
-  const handlePrimaryRemove = useCallback((index: number) => {
+  const handleRemove = useCallback((index: number) => {
     onRemove(index)
   }, [onRemove])
 
-  const handleSecondaryRemove = useCallback((index: number) => {
-    onRemove(index + primaryFields.length)
-  }, [onRemove, primaryFields.length])
-
-  const handlePrimaryEdit = useCallback((id: string) => {
-    const field = primaryFields.find(item => item.variable === id)
+  const handleEdit = useCallback((id: string) => {
+    const field = fields.find(item => item.variable === id)
     if (field)
       onEdit(field)
-  }, [onEdit, primaryFields])
-
-  const handleSecondaryEdit = useCallback((id: string) => {
-    const field = secondaryFields.find(item => item.variable === id)
-    if (field)
-      onEdit(field)
-  }, [onEdit, secondaryFields])
+  }, [fields, onEdit])
 
   return (
     <div className="mr-1 flex h-full w-[min(400px,calc(100vw-24px))] flex-col rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
@@ -79,37 +64,19 @@ const SnippetInputFieldPanel = ({
       </div>
 
       <div className="px-4 pb-2">
-        <Button variant="secondary" size="small" className="w-full justify-center gap-1" onClick={onAdd}>
+        <Button variant="primary" size="medium" className="gap-0.5 px-3" onClick={onAdd}>
           <span aria-hidden className="i-ri-add-line h-4 w-4" />
           {t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
         </Button>
       </div>
 
       <div className="flex grow flex-col overflow-y-auto">
-        <div className="px-4 pb-1 pt-2 text-text-secondary system-xs-semibold-uppercase">
-          {t('panelPrimaryGroup')}
-        </div>
         <FieldListContainer
-          className="flex flex-col gap-y-1 px-4 pb-2"
-          inputFields={primaryFields}
-          onListSortChange={list => onPrimarySortChange(toInputFields(list))}
-          onRemoveField={handlePrimaryRemove}
-          onEditField={handlePrimaryEdit}
-        />
-
-        <div className="px-4 py-2">
-          <Divider type="horizontal" className="bg-divider-subtle" />
-        </div>
-
-        <div className="px-4 pb-1 text-text-secondary system-xs-semibold-uppercase">
-          {t('panelSecondaryGroup')}
-        </div>
-        <FieldListContainer
-          className="flex flex-col gap-y-1 px-4 pb-4"
-          inputFields={secondaryFields}
-          onListSortChange={list => onSecondarySortChange(toInputFields(list))}
-          onRemoveField={handleSecondaryRemove}
-          onEditField={handleSecondaryEdit}
+          className="flex flex-col gap-y-1 px-4 py-4"
+          inputFields={fields}
+          onListSortChange={list => onSortChange(toInputFields(list))}
+          onRemoveField={handleRemove}
+          onEditField={handleEdit}
         />
       </div>
     </div>
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
index b812e56a71..af5da29cb0 100644
--- a/web/app/components/snippets/components/snippet-children.tsx
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -22,8 +22,7 @@ type SnippetChildrenProps = {
   onCloseEditor: () => void
   onSubmitField: (field: SnippetInputField) => void
   onRemoveField: (index: number) => void
-  onPrimarySortChange: (fields: SnippetInputField[]) => void
-  onSecondarySortChange: (fields: SnippetInputField[]) => void
+  onSortChange: (fields: SnippetInputField[]) => void
 }
 
 const SnippetChildren = ({
@@ -41,8 +40,7 @@ const SnippetChildren = ({
   onCloseEditor,
   onSubmitField,
   onRemoveField,
-  onPrimarySortChange,
-  onSecondarySortChange,
+  onSortChange,
 }: SnippetChildrenProps) => {
   return (
     <>
@@ -66,8 +64,7 @@ const SnippetChildren = ({
         onCloseEditor={onCloseEditor}
         onSubmitField={onSubmitField}
         onRemoveField={onRemoveField}
-        onPrimarySortChange={onPrimarySortChange}
-        onSecondarySortChange={onSecondarySortChange}
+        onSortChange={onSortChange}
       />
 
       {isPublishMenuOpen && (
@@ -85,8 +82,7 @@ const SnippetChildren = ({
               onAdd={() => onOpenEditor()}
               onEdit={onOpenEditor}
               onRemove={onRemoveField}
-              onPrimarySortChange={onPrimarySortChange}
-              onSecondarySortChange={onSecondarySortChange}
+              onSortChange={onSortChange}
             />
           </div>
         </div>
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index a5441b6df8..770404acca 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -61,6 +61,7 @@ const SnippetMain = ({
   const [fields, setFields] = useState<SnippetInputField[]>(payload.inputFields)
   const {
     doSyncWorkflowDraft,
+    syncInputFieldsDraft,
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft(snippetId)
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
@@ -100,19 +101,16 @@ const SnippetMain = ({
     setAppSidebarExpand(isMobile ? mode : localeMode)
   }, [isMobile, setAppSidebarExpand])
 
-  const primaryFields = useMemo(() => fields.slice(0, 2), [fields])
-  const secondaryFields = useMemo(() => fields.slice(2), [fields])
-
-  const handlePrimarySortChange = (newFields: SnippetInputField[]) => {
-    setFields([...newFields, ...secondaryFields])
-  }
-
-  const handleSecondarySortChange = (newFields: SnippetInputField[]) => {
-    setFields([...primaryFields, ...newFields])
+  const handleSortChange = (newFields: SnippetInputField[]) => {
+    setFields(newFields)
   }
 
   const handleRemoveField = (index: number) => {
-    setFields(current => current.filter((_, currentIndex) => currentIndex !== index))
+    const nextFields = fields.filter((_, currentIndex) => currentIndex !== index)
+    setFields(nextFields)
+    void syncInputFieldsDraft(nextFields, {
+      onRefresh: setFields,
+    })
   }
 
   const handleSubmitField = (field: SnippetInputField) => {
@@ -124,10 +122,14 @@ const SnippetMain = ({
       return
     }
 
-    if (originalVariable)
-      setFields(current => current.map(item => item.variable === originalVariable ? field : item))
-    else
-      setFields(current => [...current, field])
+    const nextFields = originalVariable
+      ? fields.map(item => item.variable === originalVariable ? field : item)
+      : [...fields, field]
+
+    setFields(nextFields)
+    void syncInputFieldsDraft(nextFields, {
+      onRefresh: setFields,
+    })
 
     closeEditor()
   }
@@ -205,8 +207,7 @@ const SnippetMain = ({
                     onCloseEditor={closeEditor}
                     onSubmitField={handleSubmitField}
                     onRemoveField={handleRemoveField}
-                    onPrimarySortChange={handlePrimarySortChange}
-                    onSecondarySortChange={handleSecondarySortChange}
+                    onSortChange={handleSortChange}
                   />
                 </WorkflowWithInnerContext>
               )}
diff --git a/web/app/components/snippets/components/workflow-panel.tsx b/web/app/components/snippets/components/workflow-panel.tsx
index 47769899b8..80c41df8a0 100644
--- a/web/app/components/snippets/components/workflow-panel.tsx
+++ b/web/app/components/snippets/components/workflow-panel.tsx
@@ -18,8 +18,7 @@ type SnippetWorkflowPanelProps = {
   onCloseEditor: () => void
   onSubmitField: (field: SnippetInputField) => void
   onRemoveField: (index: number) => void
-  onPrimarySortChange: (fields: SnippetInputField[]) => void
-  onSecondarySortChange: (fields: SnippetInputField[]) => void
+  onSortChange: (fields: SnippetInputField[]) => void
 }
 
 const SnippetPanelOnLeft = ({
@@ -32,8 +31,7 @@ const SnippetPanelOnLeft = ({
   onCloseEditor,
   onSubmitField,
   onRemoveField,
-  onPrimarySortChange,
-  onSecondarySortChange,
+  onSortChange,
 }: SnippetWorkflowPanelProps) => {
   return (
     <div className="hidden xl:flex">
@@ -51,8 +49,7 @@ const SnippetPanelOnLeft = ({
           onAdd={() => onOpenEditor()}
           onEdit={onOpenEditor}
           onRemove={onRemoveField}
-          onPrimarySortChange={onPrimarySortChange}
-          onSecondarySortChange={onSecondarySortChange}
+          onSortChange={onSortChange}
         />
       )}
     </div>
@@ -70,8 +67,7 @@ const SnippetWorkflowPanel = ({
   onCloseEditor,
   onSubmitField,
   onRemoveField,
-  onPrimarySortChange,
-  onSecondarySortChange,
+  onSortChange,
 }: SnippetWorkflowPanelProps) => {
   const versionHistoryPanelProps = useMemo(() => {
     return {
@@ -98,8 +94,7 @@ const SnippetWorkflowPanel = ({
             onCloseEditor={onCloseEditor}
             onSubmitField={onSubmitField}
             onRemoveField={onRemoveField}
-            onPrimarySortChange={onPrimarySortChange}
-            onSecondarySortChange={onSecondarySortChange}
+            onSortChange={onSortChange}
           />
         ),
       },
@@ -113,10 +108,10 @@ const SnippetWorkflowPanel = ({
     onCloseEditor,
     onCloseInputPanel,
     onOpenEditor,
-    onPrimarySortChange,
     onRemoveField,
-    onSecondarySortChange,
+    onSortChange,
     onSubmitField,
+    snippetId,
     versionHistoryPanelProps,
   ])
 
diff --git a/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
index e53f1c13fe..beb019b6a4 100644
--- a/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
+++ b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
@@ -84,6 +84,68 @@ describe('useSnippetInit', () => {
     expect(result.current.isLoading).toBe(false)
   })
 
+  it('should use draft input_fields for snippet inputs', () => {
+    mockUseSnippetApiDetail.mockReturnValue({
+      data: {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'A static snippet mock.',
+        type: 'node',
+        is_published: false,
+        version: '1',
+        use_count: 0,
+        icon_info: {
+          icon_type: null,
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+        },
+        input_fields: [
+          {
+            label: 'Published field',
+            variable: 'published_field',
+            type: 'text-input',
+            required: true,
+          },
+        ],
+        created_at: 1_712_300_000,
+        updated_at: 1_712_300_000,
+        author: 'Evan',
+      },
+      error: null,
+      isLoading: false,
+    })
+    mockUseSnippetDraftWorkflow.mockReturnValue({
+      data: {
+        id: 'draft-1',
+        graph: {},
+        features: {},
+        input_fields: [
+          {
+            label: 'Draft field',
+            variable: 'draft_field',
+            type: 'text-input',
+            required: true,
+          },
+        ],
+        hash: 'draft-hash',
+        created_at: 1_712_300_000,
+        updated_at: 1_712_345_678,
+      },
+      isLoading: false,
+    })
+
+    const { result } = renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(result.current.data?.inputFields).toEqual([
+      {
+        label: 'Draft field',
+        variable: 'draft_field',
+        type: 'text-input',
+        required: true,
+      },
+    ])
+  })
+
   it('should sync draft metadata into workflow store', () => {
     mockUseSnippetDraftWorkflow.mockImplementation((_snippetId: string, onSuccess?: (data: { updated_at: number, hash: string }) => void) => {
       onSuccess?.({
diff --git a/web/app/components/snippets/hooks/use-nodes-sync-draft.ts b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
index e216876979..169f1e6e9a 100644
--- a/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
@@ -1,4 +1,6 @@
 import type { SyncDraftCallback } from '@/app/components/workflow/hooks-store'
+import type { SnippetInputField } from '@/models/snippet'
+import type { SnippetDraftSyncPayload, SnippetWorkflow } from '@/types/snippet'
 import { produce } from 'immer'
 import { useCallback } from 'react'
 import { useStoreApi } from 'reactflow'
@@ -18,13 +20,17 @@ const isSyncConflictError = (error: unknown): error is { bodyUsed: boolean, json
     && typeof error.json === 'function'
 }
 
+type SyncInputFieldsDraftCallback = SyncDraftCallback & {
+  onRefresh?: (inputFields: SnippetInputField[]) => void
+}
+
 export const useNodesSyncDraft = (snippetId: string) => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
 
-  const getPostParams = useCallback(() => {
+  const getGraphSyncPayload = useCallback(() => {
     const {
       getNodes,
       edges,
@@ -32,8 +38,6 @@ export const useNodesSyncDraft = (snippetId: string) => {
     } = store.getState()
     const nodes = getNodes().filter(node => !node.data?._isTempNode)
     const [x, y, zoom] = transform
-    const { syncWorkflowDraftHash } = workflowStore.getState()
-
     if (!snippetId)
       return null
 
@@ -55,47 +59,39 @@ export const useNodesSyncDraft = (snippetId: string) => {
     })
 
     return {
-      url: `/snippets/${snippetId}/workflows/draft`,
-      params: {
-        graph: {
-          nodes: producedNodes,
-          edges: producedEdges,
-          viewport: { x, y, zoom },
-        },
-        hash: syncWorkflowDraftHash,
+      graph: {
+        nodes: producedNodes,
+        edges: producedEdges,
+        viewport: { x, y, zoom },
       },
     }
-  }, [snippetId, store, workflowStore])
+  }, [snippetId, store])
 
-  const syncWorkflowDraftWhenPageClose = useCallback(() => {
-    if (getNodesReadOnly())
-      return
-
-    const postParams = getPostParams()
-    if (postParams)
-      postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
-  }, [getNodesReadOnly, getPostParams])
-
-  const performSync = useCallback(async (
+  const syncDraft = useCallback(async (
+    payload: Omit<SnippetDraftSyncPayload, 'hash'>,
     notRefreshWhenSyncError?: boolean,
     callback?: SyncDraftCallback,
+    onRefresh?: (draftWorkflow: SnippetWorkflow) => void,
   ) => {
     if (getNodesReadOnly())
       return
 
-    const postParams = getPostParams()
-    if (!postParams)
+    if (!snippetId)
       return
 
     const {
       setDraftUpdatedAt,
       setSyncWorkflowDraftHash,
+      syncWorkflowDraftHash,
     } = workflowStore.getState()
 
     try {
       const response = await consoleClient.snippets.syncDraftWorkflow({
         params: { snippetId },
-        body: postParams.params,
+        body: {
+          ...payload,
+          hash: syncWorkflowDraftHash || undefined,
+        },
       })
 
       setSyncWorkflowDraftHash(response.hash)
@@ -106,7 +102,7 @@ export const useNodesSyncDraft = (snippetId: string) => {
       if (isSyncConflictError(error) && !error.bodyUsed) {
         error.json().then((err) => {
           if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
-            handleRefreshWorkflowDraft()
+            handleRefreshWorkflowDraft(onRefresh)
         })
       }
       callback?.onError?.()
@@ -114,12 +110,57 @@ export const useNodesSyncDraft = (snippetId: string) => {
     finally {
       callback?.onSettled?.()
     }
-  }, [getNodesReadOnly, getPostParams, handleRefreshWorkflowDraft, snippetId, workflowStore])
+  }, [getNodesReadOnly, handleRefreshWorkflowDraft, snippetId, workflowStore])
+
+  const syncWorkflowDraftWhenPageClose = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    const graphPayload = getGraphSyncPayload()
+    if (!graphPayload)
+      return
+
+    const { syncWorkflowDraftHash } = workflowStore.getState()
+    postWithKeepalive(`${API_PREFIX}/snippets/${snippetId}/workflows/draft`, {
+      ...graphPayload,
+      hash: syncWorkflowDraftHash,
+    })
+  }, [getGraphSyncPayload, getNodesReadOnly, snippetId, workflowStore])
+
+  const performSync = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: SyncDraftCallback,
+  ) => {
+    const graphPayload = getGraphSyncPayload()
+    if (!graphPayload)
+      return
+
+    await syncDraft(graphPayload, notRefreshWhenSyncError, callback)
+  }, [getGraphSyncPayload, syncDraft])
+
+  const performInputFieldsSync = useCallback(async (
+    inputFields: SnippetInputField[],
+    callback?: SyncInputFieldsDraftCallback,
+  ) => {
+    await syncDraft(
+      { input_fields: inputFields },
+      false,
+      callback,
+      (draftWorkflow) => {
+        const refreshedInputFields = Array.isArray(draftWorkflow.input_fields)
+          ? draftWorkflow.input_fields as SnippetInputField[]
+          : []
+        callback?.onRefresh?.(refreshedInputFields)
+      },
+    )
+  }, [syncDraft])
 
   const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
+  const syncInputFieldsDraft = useSerialAsyncCallback(performInputFieldsSync)
 
   return {
     doSyncWorkflowDraft,
+    syncInputFieldsDraft,
     syncWorkflowDraftWhenPageClose,
   }
 }
diff --git a/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
index d37a338a37..270db76a00 100644
--- a/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
+++ b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
@@ -1,4 +1,5 @@
 import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
+import type { SnippetWorkflow } from '@/types/snippet'
 import { useCallback } from 'react'
 import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
 import { useWorkflowStore } from '@/app/components/workflow/store'
@@ -8,7 +9,7 @@ export const useSnippetRefreshDraft = (snippetId: string) => {
   const workflowStore = useWorkflowStore()
   const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
 
-  const handleRefreshWorkflowDraft = useCallback(() => {
+  const handleRefreshWorkflowDraft = useCallback((onSuccess?: (draftWorkflow: SnippetWorkflow) => void) => {
     const {
       setDraftUpdatedAt,
       setIsSyncingWorkflowDraft,
@@ -30,6 +31,7 @@ export const useSnippetRefreshDraft = (snippetId: string) => {
       } as WorkflowDataUpdater)
       setSyncWorkflowDraftHash(response.hash)
       setDraftUpdatedAt(response.updated_at)
+      onSuccess?.(response)
     }).finally(() => {
       setIsSyncingWorkflowDraft(false)
     })
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 6b5ddc780f..12df39b830 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -102,8 +102,8 @@ const toSnippetCanvasData = (workflow?: SnippetWorkflow): SnippetCanvasData => {
 }
 
 export const buildSnippetDetailPayload = (snippet: SnippetContract, workflow?: SnippetWorkflow): SnippetDetailPayload => {
-  const inputFields = Array.isArray(snippet.input_fields)
-    ? snippet.input_fields as SnippetInputFieldUIModel[]
+  const inputFields = Array.isArray(workflow?.input_fields)
+    ? workflow.input_fields as SnippetInputFieldUIModel[]
     : []
 
   return {
diff --git a/web/types/snippet.ts b/web/types/snippet.ts
index f962b20ab5..f0651c6ebf 100644
--- a/web/types/snippet.ts
+++ b/web/types/snippet.ts
@@ -77,6 +77,7 @@ export type SnippetWorkflow = {
   id: string
   graph: Record<string, unknown>
   features: Record<string, unknown>
+  input_fields?: SnippetInputField[]
   hash: string
   created_at: number
   updated_at: number
@@ -87,7 +88,7 @@ export type SnippetDraftSyncPayload = {
   hash?: string
   environment_variables?: Record<string, unknown>[]
   conversation_variables?: Record<string, unknown>[]
-  input_variables?: Record<string, unknown>[]
+  input_fields?: SnippetInputField[]
 }
 
 export type SnippetDraftSyncResponse = {

From a4ea33167d5c15444473b984a00176e9d079f1e1 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 17:01:32 +0800
Subject: [PATCH 033/108] feat(web): block selector in snippet

---
 .../snippets/components/snippet-main.tsx      | 26 +++++++++++++++++--
 .../workflow/block-selector/hooks.ts          | 10 +++++--
 .../workflow/block-selector/main.tsx          |  5 ++++
 .../workflow/block-selector/tabs.tsx          |  3 ++-
 web/eslint-suppressions.json                  | 20 ++++++++++++++
 web/i18n/en-US/workflow.json                  |  1 +
 web/i18n/zh-Hans/workflow.json                |  1 +
 7 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index 770404acca..795d644752 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -23,6 +23,8 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { toast } from '@/app/components/base/ui/toast'
 import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
+import { BlockEnum } from '@/app/components/workflow/types'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useConfigsMap } from '../hooks/use-configs-map'
 import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
@@ -66,6 +68,25 @@ const SnippetMain = ({
   } = useNodesSyncDraft(snippetId)
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
   const configsMap = useConfigsMap(snippetId)
+  const workflowAvailableNodesMetaData = useAvailableNodesMetaData()
+  const availableNodesMetaData = useMemo(() => {
+    const nodes = workflowAvailableNodesMetaData.nodes.filter(node =>
+      node.metaData.type !== BlockEnum.HumanInput && node.metaData.type !== BlockEnum.End)
+
+    if (!workflowAvailableNodesMetaData.nodesMap)
+      return { nodes }
+
+    const {
+      [BlockEnum.HumanInput]: _humanInput,
+      [BlockEnum.End]: _end,
+      ...nodesMap
+    } = workflowAvailableNodesMetaData.nodesMap
+
+    return {
+      nodes,
+      nodesMap,
+    }
+  }, [workflowAvailableNodesMetaData])
   const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
   const {
     editingField,
@@ -150,9 +171,10 @@ const SnippetMain = ({
       doSyncWorkflowDraft,
       syncWorkflowDraftWhenPageClose,
       handleRefreshWorkflowDraft,
+      availableNodesMetaData,
       configsMap,
     }
-  }, [configsMap, doSyncWorkflowDraft, handleRefreshWorkflowDraft, syncWorkflowDraftWhenPageClose])
+  }, [availableNodesMetaData, configsMap, doSyncWorkflowDraft, handleRefreshWorkflowDraft, syncWorkflowDraftWhenPageClose])
 
   return (
     <div className="relative flex h-full overflow-hidden bg-background-body">
@@ -190,7 +212,7 @@ const SnippetMain = ({
                   nodes={nodes}
                   edges={edges}
                   viewport={viewport ?? graph.viewport}
-                  hooksStore={hooksStore}
+                  hooksStore={hooksStore as any}
                 >
                   <SnippetChildren
                     snippetId={snippetId}
diff --git a/web/app/components/workflow/block-selector/hooks.ts b/web/app/components/workflow/block-selector/hooks.ts
index 3a05bc09cc..7447ccb16a 100644
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -40,6 +40,7 @@ export const useTabs = ({
   noStart = true,
   defaultActiveTab,
   hasUserInputNode = false,
+  disableStartTab = false,
   forceEnableStartTab = false, // When true, Start tab remains enabled even if trigger/user input nodes already exist.
 }: {
   noBlocks?: boolean
@@ -48,11 +49,15 @@ export const useTabs = ({
   noStart?: boolean
   defaultActiveTab?: TabsEnum
   hasUserInputNode?: boolean
+  disableStartTab?: boolean
   forceEnableStartTab?: boolean
 }) => {
   const { t } = useTranslation()
   const shouldShowStartTab = !noStart
-  const shouldDisableStartTab = !forceEnableStartTab && hasUserInputNode
+  const shouldDisableStartTab = disableStartTab || (!forceEnableStartTab && hasUserInputNode)
+  const startDisabledTip = disableStartTab
+    ? t('tabs.startNotSupportedTip', { ns: 'workflow' })
+    : t('tabs.startDisabledTip', { ns: 'workflow' })
   const tabs = useMemo(() => {
     const tabConfigs = [{
       key: TabsEnum.Blocks,
@@ -71,6 +76,7 @@ export const useTabs = ({
       name: t('tabs.start', { ns: 'workflow' }),
       show: shouldShowStartTab,
       disabled: shouldDisableStartTab,
+      disabledTip: shouldDisableStartTab ? startDisabledTip : undefined,
     }, {
       key: TabsEnum.Snippets,
       name: t('tabs.snippets', { ns: 'workflow' }),
@@ -78,7 +84,7 @@ export const useTabs = ({
     }]
 
     return tabConfigs.filter(tab => tab.show)
-  }, [t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab])
+  }, [t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab, startDisabledTip])
 
   const getValidTabKey = useCallback((targetKey?: TabsEnum) => {
     if (!targetKey)
diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index 9511d02e16..cf647d9d67 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -30,7 +30,9 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { FlowType } from '@/types/common'
 import { BlockEnum, isTriggerNode } from '../types'
 import { useTabs } from './hooks'
 import Snippets from './snippets'
@@ -89,6 +91,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
 }) => {
   const { t } = useTranslation()
   const nodes = useNodes()
+  const flowType = useHooksStore(s => s.configsMap?.flowType)
   const [searchText, setSearchText] = useState('')
   const [snippetsLoading, setSnippetsLoading] = useState(() => Boolean(openFromProps) && defaultActiveTab === TabsEnum.Snippets)
   const [tags, setTags] = useState<string[]>([])
@@ -122,6 +125,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   // Default rule: user input option is only available when no Start node nor Trigger node exists on canvas.
   const defaultAllowUserInputSelection = !hasUserInputNode && !hasTriggerNode
   const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
+  const disableStartTab = flowType === FlowType.snippet
   const {
     activeTab,
     setActiveTab,
@@ -133,6 +137,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     noStart: !showStartTab,
     defaultActiveTab,
     hasUserInputNode,
+    disableStartTab,
     forceEnableStartTab,
   })
   const open = openFromProps === undefined ? localOpen : openFromProps
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index b1ca318fd2..b0658d371c 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -34,6 +34,7 @@ export type TabsProps = {
     key: TabsEnum
     name: string
     disabled?: boolean
+    disabledTip?: string
   }>
   filterElem: React.ReactNode
   noBlocks?: boolean
@@ -225,7 +226,7 @@ const Tabs: FC<TabsProps> = ({
                   tab={tab}
                   activeTab={activeTab}
                   onActiveTabChange={onActiveTabChange}
-                  disabledTip={disabledTip}
+                  disabledTip={tab.disabledTip || disabledTip}
                 />
               ))
             }
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 98d2976f8e..d787164407 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -177,6 +177,11 @@
       "count": 2
     }
   },
+  "app/(commonLayout)/snippets/[snippetId]/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "app/(humanInputLayout)/form/[token]/form.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -4917,6 +4922,11 @@
       "count": 2
     }
   },
+  "app/components/evaluation/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "app/components/explore/banner/banner-item.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -6686,6 +6696,11 @@
       "count": 2
     }
   },
+  "app/components/snippets/components/snippet-main.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
   "app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -10487,6 +10502,11 @@
       "count": 7
     }
   },
+  "service/use-evaluation.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
   "service/use-flow.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 1
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index a6803329ff..586db51ad5 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -1148,6 +1148,7 @@
   "tabs.sources": "Sources",
   "tabs.start": "Start",
   "tabs.startDisabledTip": "Trigger node and user input node are mutually exclusive.",
+  "tabs.startNotSupportedTip": "The Start tab is not supported in snippets.",
   "tabs.tools": "Tools",
   "tabs.transform": "Transform",
   "tabs.usePlugin": "Select tool",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index e98af59a4c..ae8fd5305d 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -1148,6 +1148,7 @@
   "tabs.sources": "数据源",
   "tabs.start": "开始",
   "tabs.startDisabledTip": "触发节点与用户输入节点互斥。",
+  "tabs.startNotSupportedTip": "Snippet 暂不支持 Start 标签。",
   "tabs.tools": "工具",
   "tabs.transform": "转换",
   "tabs.usePlugin": "选择工具",

From 0ad268aa7d89fa321b3eb5f9c409d157a362e9d5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 17:29:37 +0800
Subject: [PATCH 034/108] feat(web): snippet publish

---
 .../snippets/__tests__/index.spec.tsx         | 20 +++++++++
 .../__tests__/publish-menu.spec.tsx           | 22 ++++++++++
 .../__tests__/snippet-main.spec.tsx           | 30 +++++++++++++
 .../snippets/components/publish-menu.tsx      | 35 +++++++++++----
 .../snippets/components/snippet-children.tsx  | 21 ++++-----
 .../snippet-header/__tests__/index.spec.tsx   | 26 ++++++++---
 .../components/snippet-header/index.tsx       | 25 +++++++++--
 .../components/snippet-header/publisher.tsx   | 44 ++++++++++++++-----
 .../snippets/components/snippet-main.tsx      | 36 +++++++++++++--
 web/i18n/en-US/snippet.json                   |  2 +
 web/i18n/zh-Hans/snippet.json                 |  2 +
 11 files changed, 223 insertions(+), 40 deletions(-)
 create mode 100644 web/app/components/snippets/components/__tests__/publish-menu.spec.tsx

diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index 3c9a831035..42fe83704a 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -6,6 +6,7 @@ import SnippetPage from '..'
 import { useSnippetDetailStore } from '../store'
 
 const mockUseSnippetInit = vi.fn()
+const mockPublishSnippetMutateAsync = vi.fn()
 
 vi.mock('../hooks/use-snippet-init', () => ({
   useSnippetInit: (snippetId: string) => mockUseSnippetInit(snippetId),
@@ -33,6 +34,13 @@ vi.mock('../hooks/use-snippet-refresh-draft', () => ({
   }),
 }))
 
+vi.mock('@/service/use-snippet-workflows', () => ({
+  usePublishSnippetWorkflowMutation: () => ({
+    mutateAsync: mockPublishSnippetMutateAsync,
+    isPending: false,
+  }),
+}))
+
 vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: vi.fn(),
@@ -186,6 +194,7 @@ describe('SnippetPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     useSnippetDetailStore.getState().reset()
+    mockPublishSnippetMutateAsync.mockResolvedValue(undefined)
     mockUseSnippetInit.mockReturnValue({
       data: mockSnippetDetail,
       isLoading: false,
@@ -221,6 +230,17 @@ describe('SnippetPage', () => {
     expect(screen.getByText('snippet.publishMenuCurrentDraft')).toBeInTheDocument()
   })
 
+  it('should publish the snippet when clicking publish in the menu', async () => {
+    render(<SnippetPage snippetId="snippet-1" />)
+
+    fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
+    fireEvent.click(screen.getAllByRole('button', { name: /snippet\.publishButton/i })[1])
+
+    expect(mockPublishSnippetMutateAsync).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-1' },
+    })
+  })
+
   it('should render loading fallback when snippet data is unavailable', () => {
     mockUseSnippetInit.mockReturnValue({
       data: null,
diff --git a/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx b/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
new file mode 100644
index 0000000000..5b5a61343d
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import PublishMenu from '../publish-menu'
+
+describe('PublishMenu', () => {
+  it('should render the draft summary and publish shortcut', () => {
+    const { container } = render(
+      <PublishMenu
+        uiMeta={{
+          inputFieldCount: 1,
+          checklistCount: 2,
+          autoSavedAt: 'Auto-saved · a few seconds ago',
+        }}
+        onPublish={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('snippet.publishMenuCurrentDraft')).toBeInTheDocument()
+    expect(screen.getByText('Auto-saved · a few seconds ago')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'snippet.publishButton' })).toBeInTheDocument()
+    expect(container.querySelectorAll('.system-kbd')).toHaveLength(3)
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
index 7550d7d045..ac6a45f4e4 100644
--- a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -10,8 +10,10 @@ const mockCloseEditor = vi.fn()
 const mockOpenEditor = vi.fn()
 const mockReset = vi.fn()
 const mockSetInputPanelOpen = vi.fn()
+const mockSetPublishMenuOpen = vi.fn()
 const mockToggleInputPanel = vi.fn()
 const mockTogglePublishMenu = vi.fn()
+const mockPublishSnippetMutateAsync = vi.fn()
 
 vi.mock('@/hooks/use-breakpoints', () => ({
   default: () => 'desktop',
@@ -34,6 +36,7 @@ vi.mock('@/app/components/snippets/store', () => ({
     openEditor: typeof mockOpenEditor
     reset: typeof mockReset
     setInputPanelOpen: typeof mockSetInputPanelOpen
+    setPublishMenuOpen: typeof mockSetPublishMenuOpen
     toggleInputPanel: typeof mockToggleInputPanel
     togglePublishMenu: typeof mockTogglePublishMenu
   }) => unknown) => selector({
@@ -45,11 +48,19 @@ vi.mock('@/app/components/snippets/store', () => ({
     openEditor: mockOpenEditor,
     reset: mockReset,
     setInputPanelOpen: mockSetInputPanelOpen,
+    setPublishMenuOpen: mockSetPublishMenuOpen,
     toggleInputPanel: mockToggleInputPanel,
     togglePublishMenu: mockTogglePublishMenu,
   }),
 }))
 
+vi.mock('@/service/use-snippet-workflows', () => ({
+  usePublishSnippetWorkflowMutation: () => ({
+    mutateAsync: mockPublishSnippetMutateAsync,
+    isPending: false,
+  }),
+}))
+
 vi.mock('@/app/components/snippets/hooks/use-configs-map', () => ({
   useConfigsMap: () => ({
     flowId: 'snippet-1',
@@ -108,13 +119,16 @@ vi.mock('@/app/components/workflow', () => ({
 vi.mock('@/app/components/snippets/components/snippet-children', () => ({
   default: ({
     onRemoveField,
+    onPublish,
     onSubmitField,
   }: {
     onRemoveField: (index: number) => void
+    onPublish: () => void
     onSubmitField: (field: SnippetInputField) => void
   }) => (
     <div>
       <button type="button" onClick={() => onRemoveField(0)}>remove</button>
+      <button type="button" onClick={onPublish}>publish</button>
       <button
         type="button"
         onClick={() => onSubmitField({
@@ -178,6 +192,7 @@ describe('SnippetMain', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockSyncInputFieldsDraft.mockResolvedValue(undefined)
+    mockPublishSnippetMutateAsync.mockResolvedValue(undefined)
   })
 
   describe('Input Fields Sync', () => {
@@ -213,4 +228,19 @@ describe('SnippetMain', () => {
       })
     })
   })
+
+  describe('Publish', () => {
+    it('should call the publish mutation and close the publish menu', async () => {
+      renderSnippetMain()
+
+      fireEvent.click(screen.getByRole('button', { name: 'publish' }))
+
+      await waitFor(() => {
+        expect(mockPublishSnippetMutateAsync).toHaveBeenCalledWith({
+          params: { snippetId: 'snippet-1' },
+        })
+      })
+      expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
+    })
+  })
 })
diff --git a/web/app/components/snippets/components/publish-menu.tsx b/web/app/components/snippets/components/publish-menu.tsx
index f5a57763df..7ef3d43c86 100644
--- a/web/app/components/snippets/components/publish-menu.tsx
+++ b/web/app/components/snippets/components/publish-menu.tsx
@@ -3,24 +3,43 @@
 import type { SnippetDetailUIModel } from '@/models/snippet'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 
 const PublishMenu = ({
   uiMeta,
+  onPublish,
+  isPublishing = false,
 }: {
   uiMeta: SnippetDetailUIModel
+  onPublish: () => void
+  isPublishing?: boolean
 }) => {
   const { t } = useTranslation('snippet')
 
   return (
-    <div className="w-80 rounded-2xl border border-components-panel-border bg-components-panel-bg p-4 shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]">
-      <div className="text-text-tertiary system-xs-semibold-uppercase">
-        {t('publishMenuCurrentDraft')}
+    <div className="flex flex-col gap-3 px-4 pb-4 pt-3">
+      <div className="flex flex-col">
+        <div className="min-h-6 text-text-tertiary system-xs-medium-uppercase">
+          {t('publishMenuCurrentDraft')}
+        </div>
+        <div className="text-text-secondary system-sm-medium">
+          {uiMeta.autoSavedAt}
+        </div>
       </div>
-      <div className="pt-1 text-text-secondary system-sm-medium">
-        {uiMeta.autoSavedAt}
-      </div>
-      <Button variant="primary" size="small" className="mt-4 w-full justify-center">
-        {t('publishButton')}
+      <Button
+        variant="primary"
+        loading={isPublishing}
+        disabled={isPublishing}
+        className="w-full justify-center gap-1.5"
+        onClick={onPublish}
+      >
+        <span>{t('publishButton')}</span>
+        <div aria-hidden="true">
+          <ShortcutsName
+            keys={['ctrl', 'shift', 'p']}
+            bgColor="white"
+          />
+        </div>
       </Button>
     </div>
   )
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
index af5da29cb0..1547f7fa6e 100644
--- a/web/app/components/snippets/components/snippet-children.tsx
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -3,7 +3,6 @@
 import type { SnippetDetailUIModel, SnippetInputField } from '@/models/snippet'
 import SnippetInputFieldEditor from './input-field-editor'
 import SnippetInputFieldPanel from './panel'
-import PublishMenu from './publish-menu'
 import SnippetHeader from './snippet-header'
 import SnippetWorkflowPanel from './workflow-panel'
 
@@ -15,9 +14,11 @@ type SnippetChildrenProps = {
   isEditorOpen: boolean
   isInputPanelOpen: boolean
   isPublishMenuOpen: boolean
+  isPublishing: boolean
   onToggleInputPanel: () => void
-  onTogglePublishMenu: () => void
+  onPublishMenuOpenChange: (open: boolean) => void
   onCloseInputPanel: () => void
+  onPublish: () => void
   onOpenEditor: (field?: SnippetInputField | null) => void
   onCloseEditor: () => void
   onSubmitField: (field: SnippetInputField) => void
@@ -33,9 +34,11 @@ const SnippetChildren = ({
   isEditorOpen,
   isInputPanelOpen,
   isPublishMenuOpen,
+  isPublishing,
   onToggleInputPanel,
-  onTogglePublishMenu,
+  onPublishMenuOpenChange,
   onCloseInputPanel,
+  onPublish,
   onOpenEditor,
   onCloseEditor,
   onSubmitField,
@@ -49,8 +52,12 @@ const SnippetChildren = ({
       <SnippetHeader
         snippetId={snippetId}
         inputFieldCount={fields.length}
+        uiMeta={uiMeta}
+        isPublishMenuOpen={isPublishMenuOpen}
+        isPublishing={isPublishing}
         onToggleInputPanel={onToggleInputPanel}
-        onTogglePublishMenu={onTogglePublishMenu}
+        onPublishMenuOpenChange={onPublishMenuOpenChange}
+        onPublish={onPublish}
       />
 
       <SnippetWorkflowPanel
@@ -67,12 +74,6 @@ const SnippetChildren = ({
         onSortChange={onSortChange}
       />
 
-      {isPublishMenuOpen && (
-        <div className="absolute right-3 top-14 z-20">
-          <PublishMenu uiMeta={uiMeta} />
-        </div>
-      )}
-
       {isInputPanelOpen && (
         <div className="pointer-events-none absolute inset-y-3 right-3 z-30 flex justify-end">
           <div className="pointer-events-auto h-full xl:hidden">
diff --git a/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx b/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
index 57216574e4..65975726ad 100644
--- a/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
@@ -1,4 +1,5 @@
 import type { HeaderProps } from '@/app/components/workflow/header'
+import type { SnippetDetailUIModel } from '@/models/snippet'
 import { fireEvent, render, screen } from '@testing-library/react'
 import SnippetHeader from '..'
 
@@ -23,7 +24,13 @@ vi.mock('@/app/components/workflow/header', () => ({
 
 describe('SnippetHeader', () => {
   const mockToggleInputPanel = vi.fn()
-  const mockTogglePublishMenu = vi.fn()
+  const mockPublishMenuOpenChange = vi.fn()
+  const mockPublish = vi.fn()
+  const uiMeta: SnippetDetailUIModel = {
+    inputFieldCount: 1,
+    checklistCount: 2,
+    autoSavedAt: 'Auto-saved · a few seconds ago',
+  }
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -36,8 +43,12 @@ describe('SnippetHeader', () => {
         <SnippetHeader
           snippetId="snippet-1"
           inputFieldCount={3}
+          uiMeta={uiMeta}
+          isPublishMenuOpen={false}
+          isPublishing={false}
           onToggleInputPanel={mockToggleInputPanel}
-          onTogglePublishMenu={mockTogglePublishMenu}
+          onPublishMenuOpenChange={mockPublishMenuOpenChange}
+          onPublish={mockPublish}
         />,
       )
 
@@ -53,13 +64,17 @@ describe('SnippetHeader', () => {
 
   // Verifies forwarded callbacks still drive the snippet-specific controls.
   describe('User Interactions', () => {
-    it('should invoke the snippet callbacks when input and publish buttons are clicked', () => {
+    it('should invoke the snippet callbacks when input and publish trigger are clicked', () => {
       render(
         <SnippetHeader
           snippetId="snippet-1"
           inputFieldCount={1}
+          uiMeta={uiMeta}
+          isPublishMenuOpen={false}
+          isPublishing={false}
           onToggleInputPanel={mockToggleInputPanel}
-          onTogglePublishMenu={mockTogglePublishMenu}
+          onPublishMenuOpenChange={mockPublishMenuOpenChange}
+          onPublish={mockPublish}
         />,
       )
 
@@ -67,7 +82,8 @@ describe('SnippetHeader', () => {
       fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
 
       expect(mockToggleInputPanel).toHaveBeenCalledTimes(1)
-      expect(mockTogglePublishMenu).toHaveBeenCalledTimes(1)
+      expect(mockPublishMenuOpenChange).toHaveBeenCalledTimes(1)
+      expect(mockPublishMenuOpenChange.mock.calls[0][0]).toBe(true)
     })
   })
 })
diff --git a/web/app/components/snippets/components/snippet-header/index.tsx b/web/app/components/snippets/components/snippet-header/index.tsx
index d25d9a5d17..d19a8e6967 100644
--- a/web/app/components/snippets/components/snippet-header/index.tsx
+++ b/web/app/components/snippets/components/snippet-header/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { HeaderProps } from '@/app/components/workflow/header'
+import type { SnippetDetailUIModel } from '@/models/snippet'
 import {
   memo,
   useMemo,
@@ -13,15 +14,23 @@ import RunMode from './run-mode'
 type SnippetHeaderProps = {
   snippetId: string
   inputFieldCount: number
+  uiMeta: SnippetDetailUIModel
+  isPublishMenuOpen: boolean
+  isPublishing: boolean
   onToggleInputPanel: () => void
-  onTogglePublishMenu: () => void
+  onPublishMenuOpenChange: (open: boolean) => void
+  onPublish: () => void
 }
 
 const SnippetHeader = ({
   snippetId,
   inputFieldCount,
+  uiMeta,
+  isPublishMenuOpen,
+  isPublishing,
   onToggleInputPanel,
-  onTogglePublishMenu,
+  onPublishMenuOpenChange,
+  onPublish,
 }: SnippetHeaderProps) => {
   const viewHistoryProps = useMemo(() => {
     return {
@@ -34,7 +43,15 @@ const SnippetHeader = ({
       normal: {
         components: {
           left: <InputFieldButton count={inputFieldCount} onClick={onToggleInputPanel} />,
-          middle: <Publisher onClick={onTogglePublishMenu} />,
+          middle: (
+            <Publisher
+              uiMeta={uiMeta}
+              open={isPublishMenuOpen}
+              isPublishing={isPublishing}
+              onOpenChange={onPublishMenuOpenChange}
+              onPublish={onPublish}
+            />
+          ),
         },
         controls: {
           showEnvButton: false,
@@ -52,7 +69,7 @@ const SnippetHeader = ({
         viewHistoryProps,
       },
     }
-  }, [inputFieldCount, onToggleInputPanel, onTogglePublishMenu, viewHistoryProps])
+  }, [inputFieldCount, isPublishMenuOpen, isPublishing, onPublish, onPublishMenuOpenChange, onToggleInputPanel, uiMeta, viewHistoryProps])
 
   return <Header {...headerProps} />
 }
diff --git a/web/app/components/snippets/components/snippet-header/publisher.tsx b/web/app/components/snippets/components/snippet-header/publisher.tsx
index 0d4cf02611..25b79485c6 100644
--- a/web/app/components/snippets/components/snippet-header/publisher.tsx
+++ b/web/app/components/snippets/components/snippet-header/publisher.tsx
@@ -1,26 +1,50 @@
 'use client'
 
+import type { SnippetDetailUIModel } from '@/models/snippet'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import PublishMenu from '../publish-menu'
 
 type PublisherProps = {
-  onClick: () => void
+  uiMeta: SnippetDetailUIModel
+  open: boolean
+  isPublishing: boolean
+  onOpenChange: (open: boolean) => void
+  onPublish: () => void
 }
 
 const Publisher = ({
-  onClick,
+  uiMeta,
+  open,
+  isPublishing,
+  onOpenChange,
+  onPublish,
 }: PublisherProps) => {
   const { t } = useTranslation('snippet')
 
   return (
-    <button
-      type="button"
-      className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]"
-      onClick={onClick}
-    >
-      <span className="text-[13px] font-medium leading-4">{t('publishButton')}</span>
-      <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
-    </button>
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]">
+        <span className="text-[13px] font-medium leading-4">{t('publishButton')}</span>
+        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={6}
+        popupClassName="w-80 !rounded-2xl !bg-components-panel-bg !p-0 !shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]"
+      >
+        <PublishMenu
+          uiMeta={uiMeta}
+          isPublishing={isPublishing}
+          onPublish={onPublish}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index 795d644752..b57fed1342 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -10,6 +10,10 @@ import {
   RiTerminalWindowLine,
 } from '@remixicon/react'
 import {
+  useKeyPress,
+} from 'ahooks'
+import {
+  useCallback,
   useEffect,
   useMemo,
   useState,
@@ -25,7 +29,9 @@ import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { usePublishSnippetWorkflowMutation } from '@/service/use-snippet-workflows'
 import { useConfigsMap } from '../hooks/use-configs-map'
 import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
 import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
@@ -61,6 +67,7 @@ const SnippetMain = ({
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const [fields, setFields] = useState<SnippetInputField[]>(payload.inputFields)
+  const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
   const {
     doSyncWorkflowDraft,
     syncInputFieldsDraft,
@@ -97,8 +104,8 @@ const SnippetMain = ({
     openEditor,
     reset,
     setInputPanelOpen,
+    setPublishMenuOpen,
     toggleInputPanel,
-    togglePublishMenu,
   } = useSnippetDetailStore(useShallow(state => ({
     editingField: state.editingField,
     isEditorOpen: state.isEditorOpen,
@@ -108,8 +115,8 @@ const SnippetMain = ({
     openEditor: state.openEditor,
     reset: state.reset,
     setInputPanelOpen: state.setInputPanelOpen,
+    setPublishMenuOpen: state.setPublishMenuOpen,
     toggleInputPanel: state.toggleInputPanel,
-    togglePublishMenu: state.togglePublishMenu,
   })))
 
   useEffect(() => {
@@ -166,6 +173,27 @@ const SnippetMain = ({
     setInputPanelOpen(false)
   }
 
+  const handlePublish = useCallback(async () => {
+    try {
+      await publishSnippetMutation.mutateAsync({
+        params: { snippetId },
+      })
+      setPublishMenuOpen(false)
+      toast.success(t('publishSuccess'))
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('publishFailed'))
+    }
+  }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t])
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
+    if (section !== 'orchestrate' || publishSnippetMutation.isPending)
+      return
+
+    e.preventDefault()
+    void handlePublish()
+  }, { exactMatch: true, useCapture: true })
+
   const hooksStore = useMemo(() => {
     return {
       doSyncWorkflowDraft,
@@ -222,9 +250,11 @@ const SnippetMain = ({
                     isEditorOpen={isEditorOpen}
                     isInputPanelOpen={isInputPanelOpen}
                     isPublishMenuOpen={isPublishMenuOpen}
+                    isPublishing={publishSnippetMutation.isPending}
                     onToggleInputPanel={handleToggleInputPanel}
-                    onTogglePublishMenu={togglePublishMenu}
+                    onPublishMenuOpenChange={setPublishMenuOpen}
                     onCloseInputPanel={handleCloseInputPanel}
+                    onPublish={handlePublish}
                     onOpenEditor={openEditor}
                     onCloseEditor={closeEditor}
                     onSubmitField={handleSubmitField}
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
index 3bc86cfe43..fda6980f69 100644
--- a/web/i18n/en-US/snippet.json
+++ b/web/i18n/en-US/snippet.json
@@ -24,7 +24,9 @@
   "panelSecondaryGroup": "Optional inputs",
   "panelTitle": "Input Field",
   "publishButton": "Publish",
+  "publishFailed": "Failed to publish snippet",
   "publishMenuCurrentDraft": "Current draft unpublished",
+  "publishSuccess": "Snippet published",
   "save": "Save",
   "sectionEvaluation": "Evaluation",
   "sectionOrchestrate": "Orchestrate",
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
index bb4514d622..b8ed686559 100644
--- a/web/i18n/zh-Hans/snippet.json
+++ b/web/i18n/zh-Hans/snippet.json
@@ -24,7 +24,9 @@
   "panelSecondaryGroup": "可选输入",
   "panelTitle": "输入字段",
   "publishButton": "发布",
+  "publishFailed": "发布 Snippet 失败",
   "publishMenuCurrentDraft": "当前草稿未发布",
+  "publishSuccess": "Snippet 已发布",
   "save": "保存",
   "sectionEvaluation": "评测",
   "sectionOrchestrate": "编排",

From 9636472db7b51e5e1465e7220425aed8aa590a52 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 17:50:30 +0800
Subject: [PATCH 035/108] refactor(web): snippet main

---
 .../use-snippet-input-field-actions.spec.ts   | 160 ++++++++++++++++++
 .../__tests__/use-snippet-publish.spec.ts     | 127 ++++++++++++++
 .../hooks/use-snippet-input-field-actions.ts  |  95 +++++++++++
 .../components/hooks/use-snippet-publish.ts   |  57 +++++++
 .../snippets/components/snippet-main.tsx      | 120 +++----------
 5 files changed, 463 insertions(+), 96 deletions(-)
 create mode 100644 web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
 create mode 100644 web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
 create mode 100644 web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
 create mode 100644 web/app/components/snippets/components/hooks/use-snippet-publish.ts

diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
new file mode 100644
index 0000000000..ae9819e464
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
@@ -0,0 +1,160 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { act, renderHook } from '@testing-library/react'
+import { toast } from '@/app/components/base/ui/toast'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetInputFieldActions } from '../use-snippet-input-field-actions'
+
+const mockSyncInputFieldsDraft = vi.fn()
+const mockCloseEditor = vi.fn()
+const mockOpenEditor = vi.fn()
+const mockSetInputPanelOpen = vi.fn()
+const mockToggleInputPanel = vi.fn()
+
+let snippetDetailStoreState: {
+  editingField: SnippetInputField | null
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  closeEditor: typeof mockCloseEditor
+  openEditor: typeof mockOpenEditor
+  setInputPanelOpen: typeof mockSetInputPanelOpen
+  toggleInputPanel: typeof mockToggleInputPanel
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}))
+
+vi.mock('../../../hooks/use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    syncInputFieldsDraft: mockSyncInputFieldsDraft,
+  }),
+}))
+
+vi.mock('../../../store', () => ({
+  useSnippetDetailStore: (selector: (state: typeof snippetDetailStoreState) => unknown) => selector(snippetDetailStoreState),
+}))
+
+const createField = (overrides: Partial<SnippetInputField> = {}): SnippetInputField => ({
+  type: PipelineInputVarType.textInput,
+  label: 'Blog URL',
+  variable: 'blog_url',
+  required: true,
+  ...overrides,
+})
+
+describe('useSnippetInputFieldActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    snippetDetailStoreState = {
+      editingField: null,
+      isEditorOpen: false,
+      isInputPanelOpen: true,
+      closeEditor: mockCloseEditor,
+      openEditor: mockOpenEditor,
+      setInputPanelOpen: mockSetInputPanelOpen,
+      toggleInputPanel: mockToggleInputPanel,
+    }
+    mockSyncInputFieldsDraft.mockResolvedValue(undefined)
+  })
+
+  describe('Field sync', () => {
+    it('should remove a field and sync the draft', () => {
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+        initialFields: [createField()],
+      }))
+
+      act(() => {
+        result.current.handleRemoveField(0)
+      })
+
+      expect(result.current.fields).toEqual([])
+      expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([], {
+        onRefresh: expect.any(Function),
+      })
+    })
+
+    it('should append a new field and close the editor after syncing', () => {
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+        initialFields: [createField()],
+      }))
+
+      act(() => {
+        result.current.handleSubmitField(createField({
+          label: 'Topic',
+          variable: 'topic',
+        }))
+      })
+
+      expect(result.current.fields).toEqual([
+        createField(),
+        createField({
+          label: 'Topic',
+          variable: 'topic',
+        }),
+      ])
+      expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([
+        createField(),
+        createField({
+          label: 'Topic',
+          variable: 'topic',
+        }),
+      ], {
+        onRefresh: expect.any(Function),
+      })
+      expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+    })
+
+    it('should reject duplicated variables without syncing', () => {
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+        initialFields: [createField()],
+      }))
+
+      act(() => {
+        result.current.handleSubmitField(createField({
+          label: 'Duplicated',
+          variable: 'blog_url',
+        }))
+      })
+
+      expect(toast.error).toHaveBeenCalledWith('datasetPipeline.inputFieldPanel.error.variableDuplicate')
+      expect(mockSyncInputFieldsDraft).not.toHaveBeenCalled()
+      expect(mockCloseEditor).not.toHaveBeenCalled()
+      expect(result.current.fields).toEqual([createField()])
+    })
+  })
+
+  describe('Panel actions', () => {
+    it('should close the editor before toggling the input panel when the panel is open', () => {
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+        initialFields: [createField()],
+      }))
+
+      act(() => {
+        result.current.handleToggleInputPanel()
+      })
+
+      expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+      expect(mockToggleInputPanel).toHaveBeenCalledTimes(1)
+    })
+
+    it('should close the input panel and clear the editor state', () => {
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+        initialFields: [createField()],
+      }))
+
+      act(() => {
+        result.current.handleCloseInputPanel()
+      })
+
+      expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+      expect(mockSetInputPanelOpen).toHaveBeenCalledWith(false)
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
new file mode 100644
index 0000000000..8ffe98182e
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
@@ -0,0 +1,127 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { toast } from '@/app/components/base/ui/toast'
+import { useSnippetPublish } from '../use-snippet-publish'
+
+const mockMutateAsync = vi.fn()
+const mockSetPublishMenuOpen = vi.fn()
+const mockUseKeyPress = vi.fn()
+
+let isPublishMenuOpen = false
+let isPending = false
+let shortcutHandler: ((event: KeyboardEvent) => void) | undefined
+
+vi.mock('ahooks', () => ({
+  useKeyPress: (...args: Parameters<typeof mockUseKeyPress>) => mockUseKeyPress(...args),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  usePublishSnippetWorkflowMutation: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending,
+  }),
+}))
+
+vi.mock('../../../store', () => ({
+  useSnippetDetailStore: (selector: (state: {
+    isPublishMenuOpen: boolean
+    setPublishMenuOpen: typeof mockSetPublishMenuOpen
+  }) => unknown) => selector({
+    isPublishMenuOpen,
+    setPublishMenuOpen: mockSetPublishMenuOpen,
+  }),
+}))
+
+describe('useSnippetPublish', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isPublishMenuOpen = false
+    isPending = false
+    shortcutHandler = undefined
+    mockMutateAsync.mockResolvedValue(undefined)
+    mockUseKeyPress.mockImplementation((_key, handler) => {
+      shortcutHandler = handler
+    })
+  })
+
+  describe('Publish action', () => {
+    it('should publish the snippet, close the menu, and show success feedback', async () => {
+      const { result } = renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+        section: 'orchestrate',
+      }))
+
+      await act(async () => {
+        await result.current.handlePublish()
+      })
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        params: { snippetId: 'snippet-1' },
+      })
+      expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
+      expect(toast.success).toHaveBeenCalledWith('snippet.publishSuccess')
+    })
+
+    it('should surface publish errors through toast feedback', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('publish failed'))
+
+      const { result } = renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+        section: 'orchestrate',
+      }))
+
+      await act(async () => {
+        await result.current.handlePublish()
+      })
+
+      expect(toast.error).toHaveBeenCalledWith('publish failed')
+      expect(mockSetPublishMenuOpen).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Keyboard shortcut', () => {
+    it('should trigger publish on ctrl+shift+p in the orchestrate section', async () => {
+      renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+        section: 'orchestrate',
+      }))
+
+      const event = new KeyboardEvent('keydown')
+      const preventDefault = vi.spyOn(event, 'preventDefault')
+
+      act(() => {
+        shortcutHandler?.(event)
+      })
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          params: { snippetId: 'snippet-1' },
+        })
+      })
+      expect(preventDefault).toHaveBeenCalledTimes(1)
+    })
+
+    it('should ignore the shortcut outside the orchestrate section', () => {
+      renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+        section: 'evaluation',
+      }))
+
+      const event = new KeyboardEvent('keydown')
+      const preventDefault = vi.spyOn(event, 'preventDefault')
+
+      act(() => {
+        shortcutHandler?.(event)
+      })
+
+      expect(mockMutateAsync).not.toHaveBeenCalled()
+      expect(preventDefault).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
new file mode 100644
index 0000000000..738c9cc646
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
@@ -0,0 +1,95 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { toast } from '@/app/components/base/ui/toast'
+import { useNodesSyncDraft } from '../../hooks/use-nodes-sync-draft'
+import { useSnippetDetailStore } from '../../store'
+
+type UseSnippetInputFieldActionsOptions = {
+  snippetId: string
+  initialFields: SnippetInputField[]
+}
+
+export const useSnippetInputFieldActions = ({
+  snippetId,
+  initialFields,
+}: UseSnippetInputFieldActionsOptions) => {
+  const { t } = useTranslation('snippet')
+  const [fields, setFields] = useState<SnippetInputField[]>(initialFields)
+  const { syncInputFieldsDraft } = useNodesSyncDraft(snippetId)
+  const {
+    editingField,
+    isEditorOpen,
+    isInputPanelOpen,
+    closeEditor,
+    openEditor,
+    setInputPanelOpen,
+    toggleInputPanel,
+  } = useSnippetDetailStore(useShallow(state => ({
+    editingField: state.editingField,
+    isEditorOpen: state.isEditorOpen,
+    isInputPanelOpen: state.isInputPanelOpen,
+    closeEditor: state.closeEditor,
+    openEditor: state.openEditor,
+    setInputPanelOpen: state.setInputPanelOpen,
+    toggleInputPanel: state.toggleInputPanel,
+  })))
+
+  const handleSortChange = useCallback((newFields: SnippetInputField[]) => {
+    setFields(newFields)
+  }, [])
+
+  const handleRemoveField = useCallback((index: number) => {
+    const nextFields = fields.filter((_, currentIndex) => currentIndex !== index)
+    setFields(nextFields)
+    void syncInputFieldsDraft(nextFields, {
+      onRefresh: setFields,
+    })
+  }, [fields, syncInputFieldsDraft])
+
+  const handleSubmitField = useCallback((field: SnippetInputField) => {
+    const originalVariable = editingField?.variable
+    const duplicated = fields.some(item => item.variable === field.variable && item.variable !== originalVariable)
+
+    if (duplicated) {
+      toast.error(t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }))
+      return
+    }
+
+    const nextFields = originalVariable
+      ? fields.map(item => item.variable === originalVariable ? field : item)
+      : [...fields, field]
+
+    setFields(nextFields)
+    void syncInputFieldsDraft(nextFields, {
+      onRefresh: setFields,
+    })
+    closeEditor()
+  }, [closeEditor, editingField?.variable, fields, syncInputFieldsDraft, t])
+
+  const handleToggleInputPanel = useCallback(() => {
+    if (isInputPanelOpen)
+      closeEditor()
+    toggleInputPanel()
+  }, [closeEditor, isInputPanelOpen, toggleInputPanel])
+
+  const handleCloseInputPanel = useCallback(() => {
+    closeEditor()
+    setInputPanelOpen(false)
+  }, [closeEditor, setInputPanelOpen])
+
+  return {
+    editingField,
+    fields,
+    isEditorOpen,
+    isInputPanelOpen,
+    openEditor,
+    closeEditor,
+    handleCloseInputPanel,
+    handleRemoveField,
+    handleSortChange,
+    handleSubmitField,
+    handleToggleInputPanel,
+  }
+}
diff --git a/web/app/components/snippets/components/hooks/use-snippet-publish.ts b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
new file mode 100644
index 0000000000..1dd0612e14
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
@@ -0,0 +1,57 @@
+import type { SnippetSection } from '@/models/snippet'
+import { useKeyPress } from 'ahooks'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { toast } from '@/app/components/base/ui/toast'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
+import { usePublishSnippetWorkflowMutation } from '@/service/use-snippet-workflows'
+import { useSnippetDetailStore } from '../../store'
+
+type UseSnippetPublishOptions = {
+  snippetId: string
+  section: SnippetSection
+}
+
+export const useSnippetPublish = ({
+  snippetId,
+  section,
+}: UseSnippetPublishOptions) => {
+  const { t } = useTranslation('snippet')
+  const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
+  const {
+    isPublishMenuOpen,
+    setPublishMenuOpen,
+  } = useSnippetDetailStore(useShallow(state => ({
+    isPublishMenuOpen: state.isPublishMenuOpen,
+    setPublishMenuOpen: state.setPublishMenuOpen,
+  })))
+
+  const handlePublish = useCallback(async () => {
+    try {
+      await publishSnippetMutation.mutateAsync({
+        params: { snippetId },
+      })
+      setPublishMenuOpen(false)
+      toast.success(t('publishSuccess'))
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('publishFailed'))
+    }
+  }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t])
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (event) => {
+    if (section !== 'orchestrate' || publishSnippetMutation.isPending)
+      return
+
+    event.preventDefault()
+    void handlePublish()
+  }, { exactMatch: true, useCapture: true })
+
+  return {
+    handlePublish,
+    isPublishMenuOpen,
+    isPublishing: publishSnippetMutation.isPending,
+    setPublishMenuOpen,
+  }
+}
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index b57fed1342..ed01d27c0b 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -2,7 +2,7 @@
 
 import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
 import type { WorkflowProps } from '@/app/components/workflow'
-import type { SnippetDetailPayload, SnippetInputField, SnippetSection } from '@/models/snippet'
+import type { SnippetDetailPayload, SnippetSection } from '@/models/snippet'
 import {
   RiFlaskFill,
   RiFlaskLine,
@@ -10,32 +10,25 @@ import {
   RiTerminalWindowLine,
 } from '@remixicon/react'
 import {
-  useKeyPress,
-} from 'ahooks'
-import {
-  useCallback,
   useEffect,
   useMemo,
-  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useShallow } from 'zustand/react/shallow'
 import AppSideBar from '@/app/components/app-sidebar'
 import NavLink from '@/app/components/app-sidebar/nav-link'
 import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { toast } from '@/app/components/base/ui/toast'
 import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { usePublishSnippetWorkflowMutation } from '@/service/use-snippet-workflows'
 import { useConfigsMap } from '../hooks/use-configs-map'
 import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
 import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
 import { useSnippetDetailStore } from '../store'
+import { useSnippetInputFieldActions } from './hooks/use-snippet-input-field-actions'
+import { useSnippetPublish } from './hooks/use-snippet-publish'
 import SnippetChildren from './snippet-children'
 
 type SnippetMainProps = {
@@ -66,11 +59,8 @@ const SnippetMain = ({
   const { graph, snippet, uiMeta } = payload
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-  const [fields, setFields] = useState<SnippetInputField[]>(payload.inputFields)
-  const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
   const {
     doSyncWorkflowDraft,
-    syncInputFieldsDraft,
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft(snippetId)
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
@@ -95,29 +85,32 @@ const SnippetMain = ({
     }
   }, [workflowAvailableNodesMetaData])
   const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
+  const reset = useSnippetDetailStore(state => state.reset)
   const {
     editingField,
+    fields,
     isEditorOpen,
     isInputPanelOpen,
-    isPublishMenuOpen,
-    closeEditor,
     openEditor,
-    reset,
-    setInputPanelOpen,
+    closeEditor,
+    handleCloseInputPanel,
+    handleRemoveField,
+    handleSortChange,
+    handleSubmitField,
+    handleToggleInputPanel,
+  } = useSnippetInputFieldActions({
+    snippetId,
+    initialFields: payload.inputFields,
+  })
+  const {
+    handlePublish,
+    isPublishMenuOpen,
+    isPublishing,
     setPublishMenuOpen,
-    toggleInputPanel,
-  } = useSnippetDetailStore(useShallow(state => ({
-    editingField: state.editingField,
-    isEditorOpen: state.isEditorOpen,
-    isInputPanelOpen: state.isInputPanelOpen,
-    isPublishMenuOpen: state.isPublishMenuOpen,
-    closeEditor: state.closeEditor,
-    openEditor: state.openEditor,
-    reset: state.reset,
-    setInputPanelOpen: state.setInputPanelOpen,
-    setPublishMenuOpen: state.setPublishMenuOpen,
-    toggleInputPanel: state.toggleInputPanel,
-  })))
+  } = useSnippetPublish({
+    snippetId,
+    section,
+  })
 
   useEffect(() => {
     reset()
@@ -129,71 +122,6 @@ const SnippetMain = ({
     setAppSidebarExpand(isMobile ? mode : localeMode)
   }, [isMobile, setAppSidebarExpand])
 
-  const handleSortChange = (newFields: SnippetInputField[]) => {
-    setFields(newFields)
-  }
-
-  const handleRemoveField = (index: number) => {
-    const nextFields = fields.filter((_, currentIndex) => currentIndex !== index)
-    setFields(nextFields)
-    void syncInputFieldsDraft(nextFields, {
-      onRefresh: setFields,
-    })
-  }
-
-  const handleSubmitField = (field: SnippetInputField) => {
-    const originalVariable = editingField?.variable
-    const duplicated = fields.some(item => item.variable === field.variable && item.variable !== originalVariable)
-
-    if (duplicated) {
-      toast.error(t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }))
-      return
-    }
-
-    const nextFields = originalVariable
-      ? fields.map(item => item.variable === originalVariable ? field : item)
-      : [...fields, field]
-
-    setFields(nextFields)
-    void syncInputFieldsDraft(nextFields, {
-      onRefresh: setFields,
-    })
-
-    closeEditor()
-  }
-
-  const handleToggleInputPanel = () => {
-    if (isInputPanelOpen)
-      closeEditor()
-    toggleInputPanel()
-  }
-
-  const handleCloseInputPanel = () => {
-    closeEditor()
-    setInputPanelOpen(false)
-  }
-
-  const handlePublish = useCallback(async () => {
-    try {
-      await publishSnippetMutation.mutateAsync({
-        params: { snippetId },
-      })
-      setPublishMenuOpen(false)
-      toast.success(t('publishSuccess'))
-    }
-    catch (error) {
-      toast.error(error instanceof Error ? error.message : t('publishFailed'))
-    }
-  }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t])
-
-  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
-    if (section !== 'orchestrate' || publishSnippetMutation.isPending)
-      return
-
-    e.preventDefault()
-    void handlePublish()
-  }, { exactMatch: true, useCapture: true })
-
   const hooksStore = useMemo(() => {
     return {
       doSyncWorkflowDraft,
@@ -250,7 +178,7 @@ const SnippetMain = ({
                     isEditorOpen={isEditorOpen}
                     isInputPanelOpen={isInputPanelOpen}
                     isPublishMenuOpen={isPublishMenuOpen}
-                    isPublishing={publishSnippetMutation.isPending}
+                    isPublishing={isPublishing}
                     onToggleInputPanel={handleToggleInputPanel}
                     onPublishMenuOpenChange={setPublishMenuOpen}
                     onCloseInputPanel={handleCloseInputPanel}

From 985c3db4fda7533416cf2162d4458778811afc8b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 18:02:27 +0800
Subject: [PATCH 036/108] feat(web): snippet input field panel layout

---
 .../snippets/__tests__/index.spec.tsx         |  7 ++
 .../__tests__/input-field-editor.spec.tsx     | 80 +++++++++++++++++++
 .../components/input-field-editor.tsx         | 17 +++-
 .../snippets/components/snippet-children.tsx  | 24 +++---
 4 files changed, 112 insertions(+), 16 deletions(-)
 create mode 100644 web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx

diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index 42fe83704a..041783b987 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -79,6 +79,13 @@ vi.mock('@/hooks/use-breakpoints', () => ({
   MediaType: { mobile: 'mobile', desktop: 'desktop' },
 }))
 
+vi.mock('@/app/components/rag-pipeline/components/panel/input-field/hooks', () => ({
+  useFloatingRight: () => ({
+    floatingRight: false,
+    floatingRightWidth: 400,
+  }),
+}))
+
 vi.mock('@/app/components/workflow', () => ({
   default: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="workflow-default-context">{children}</div>
diff --git a/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx b/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
new file mode 100644
index 0000000000..de46e23164
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
@@ -0,0 +1,80 @@
+import type { InputVar } from '@/models/pipeline'
+import { render, screen } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import SnippetInputFieldEditor from '../input-field-editor'
+
+const mockUseFloatingRight = vi.fn()
+
+vi.mock('@/app/components/rag-pipeline/components/panel/input-field/hooks', () => ({
+  useFloatingRight: (...args: unknown[]) => mockUseFloatingRight(...args),
+}))
+
+vi.mock('@/app/components/rag-pipeline/components/panel/input-field/editor/form', () => ({
+  default: ({ isEditMode }: { isEditMode: boolean }) => (
+    <div data-testid="snippet-input-field-form">{isEditMode ? 'edit' : 'create'}</div>
+  ),
+}))
+
+const createField = (overrides: Partial<InputVar> = {}): InputVar => ({
+  type: PipelineInputVarType.textInput,
+  label: 'Blog URL',
+  variable: 'blog_url',
+  required: true,
+  options: [],
+  placeholder: 'Paste a source article URL',
+  max_length: 256,
+  ...overrides,
+})
+
+describe('SnippetInputFieldEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseFloatingRight.mockReturnValue({
+      floatingRight: false,
+      floatingRightWidth: 400,
+    })
+  })
+
+  // Verifies the default desktop layout keeps the editor inline with the panel.
+  describe('Rendering', () => {
+    it('should render the add title without floating positioning by default', () => {
+      render(
+        <SnippetInputFieldEditor
+          onClose={vi.fn()}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      const title = screen.getByText('datasetPipeline.inputFieldPanel.addInputField')
+      const editor = title.parentElement
+
+      expect(title).toBeInTheDocument()
+      expect(editor).not.toHaveClass('absolute')
+      expect(editor).toHaveStyle({ width: 'min(400px, calc(100vw - 24px))' })
+      expect(mockUseFloatingRight).toHaveBeenCalledWith(400)
+    })
+
+    it('should float over the panel when there is not enough room', () => {
+      mockUseFloatingRight.mockReturnValue({
+        floatingRight: true,
+        floatingRightWidth: 320,
+      })
+
+      render(
+        <SnippetInputFieldEditor
+          field={createField()}
+          onClose={vi.fn()}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      const title = screen.getByText('datasetPipeline.inputFieldPanel.editInputField')
+      const editor = title.parentElement
+
+      expect(title).toBeInTheDocument()
+      expect(editor).toHaveClass('absolute', 'right-0', 'z-[100]')
+      expect(editor).toHaveStyle({ width: 'min(320px, calc(100vw - 24px))' })
+      expect(screen.getByTestId('snippet-input-field-form')).toHaveTextContent('edit')
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
index 99362857e0..dcc6b8b72c 100644
--- a/web/app/components/snippets/components/input-field-editor.tsx
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -2,10 +2,13 @@
 
 import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
 import type { SnippetInputField } from '@/models/snippet'
+import { RiCloseLine } from '@remixicon/react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import InputFieldForm from '@/app/components/rag-pipeline/components/panel/input-field/editor/form'
 import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
+import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
+import { cn } from '@/utils/classnames'
 
 type SnippetInputFieldEditorProps = {
   field?: SnippetInputField | null
@@ -19,6 +22,7 @@ const SnippetInputFieldEditor = ({
   onSubmit,
 }: SnippetInputFieldEditorProps) => {
   const { t } = useTranslation()
+  const { floatingRight, floatingRightWidth } = useFloatingRight(400)
 
   const initialData = useMemo(() => {
     return convertToInputFieldFormData(field || undefined)
@@ -29,7 +33,16 @@ const SnippetInputFieldEditor = ({
   }, [onSubmit])
 
   return (
-    <div className="relative mr-1 flex h-fit max-h-full w-[min(400px,calc(100vw-24px))] flex-col overflow-y-auto rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
+    <div
+      className={cn(
+        'relative mr-1 flex h-fit max-h-full flex-col overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9',
+        'transition-all duration-300 ease-in-out',
+        floatingRight && 'absolute right-0 z-[100]',
+      )}
+      style={{
+        width: `min(${floatingRightWidth}px, calc(100vw - 24px))`,
+      }}
+    >
       <div className="flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary system-xl-semibold">
         {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
       </div>
@@ -38,7 +51,7 @@ const SnippetInputFieldEditor = ({
         className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center"
         onClick={onClose}
       >
-        <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </button>
       <InputFieldForm
         initialData={initialData}
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
index 1547f7fa6e..d6fc591b00 100644
--- a/web/app/components/snippets/components/snippet-children.tsx
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -74,9 +74,16 @@ const SnippetChildren = ({
         onSortChange={onSortChange}
       />
 
-      {isInputPanelOpen && (
-        <div className="pointer-events-none absolute inset-y-3 right-3 z-30 flex justify-end">
-          <div className="pointer-events-auto h-full xl:hidden">
+      {(isInputPanelOpen || isEditorOpen) && (
+        <div className="pointer-events-none absolute bottom-1 right-1 top-14 z-30 flex justify-end">
+          <div className="pointer-events-auto flex h-full xl:hidden">
+            {isEditorOpen && (
+              <SnippetInputFieldEditor
+                field={editingField}
+                onClose={onCloseEditor}
+                onSubmit={onSubmitField}
+              />
+            )}
             <SnippetInputFieldPanel
               fields={fields}
               onClose={onCloseInputPanel}
@@ -89,17 +96,6 @@ const SnippetChildren = ({
         </div>
       )}
 
-      {isEditorOpen && (
-        <div className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center bg-black/10 px-3 xl:hidden">
-          <div className="pointer-events-auto w-full max-w-md">
-            <SnippetInputFieldEditor
-              field={editingField}
-              onClose={onCloseEditor}
-              onSubmit={onSubmitField}
-            />
-          </div>
-        </div>
-      )}
     </>
   )
 }

From a8cdf6964cd760dfc859ec55b6a8dfa35b277956 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 20:02:59 +0800
Subject: [PATCH 037/108] feat(web): test run button

---
 .../components/snippet-header/run-mode.tsx    | 68 ++++++++++++++++---
 1 file changed, 59 insertions(+), 9 deletions(-)

diff --git a/web/app/components/snippets/components/snippet-header/run-mode.tsx b/web/app/components/snippets/components/snippet-header/run-mode.tsx
index d18df6f23a..1ed61b39ea 100644
--- a/web/app/components/snippets/components/snippet-header/run-mode.tsx
+++ b/web/app/components/snippets/components/snippet-header/run-mode.tsx
@@ -1,8 +1,15 @@
 'use client'
 
-import { RiPlayLargeLine } from '@remixicon/react'
 import * as React from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useWorkflowRun, useWorkflowStartRun } from '@/app/components/workflow/hooks'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { useStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { cn } from '@/utils/classnames'
 
 type RunModeProps = {
   text?: string
@@ -12,16 +19,59 @@ const RunMode = ({
   text,
 }: RunModeProps) => {
   const { t } = useTranslation('snippet')
+  const { handleWorkflowStartRunInWorkflow } = useWorkflowStartRun()
+  const { handleStopRun } = useWorkflowRun()
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+
+  const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
+
+  const handleStop = useCallback(() => {
+    handleStopRun(workflowRunningData?.task_id || '')
+  }, [handleStopRun, workflowRunningData?.task_id])
+
+  const { eventEmitter } = useEventEmitterContextContext()
+  eventEmitter?.useSubscription((v) => {
+    if (typeof v !== 'string' && v.type === EVENT_WORKFLOW_STOP)
+      handleStop()
+  })
 
   return (
-    <button
-      type="button"
-      className="flex h-7 items-center gap-1 rounded-md px-1.5 text-[13px] font-medium text-text-accent hover:bg-state-accent-hover"
-    >
-      <RiPlayLargeLine className="h-4 w-4" />
-      <span>{text ?? t('testRunButton')}</span>
-      <span className="rounded-md bg-state-accent-active px-1.5 py-0.5 text-[10px] font-semibold leading-3 text-text-accent">R</span>
-    </button>
+    <div className="flex items-center gap-x-px">
+      <button
+        type="button"
+        className={cn(
+          'flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text system-xs-medium hover:bg-state-accent-hover',
+          isRunning && 'cursor-not-allowed rounded-l-md bg-state-accent-hover',
+        )}
+        onClick={handleWorkflowStartRunInWorkflow}
+        disabled={isRunning}
+      >
+        {isRunning
+          ? (
+              <>
+                <span aria-hidden className="i-ri-loader-2-line mr-1 size-4 animate-spin" />
+                {t('common.running', { ns: 'workflow' })}
+              </>
+            )
+          : (
+              <>
+                <span aria-hidden className="i-ri-play-large-line mr-1 size-4" />
+                {text ?? t('common.run', { ns: 'workflow' })}
+                <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
+              </>
+            )}
+      </button>
+
+      {isRunning && (
+        <button
+          type="button"
+          className="flex size-7 items-center justify-center rounded-r-md bg-state-accent-active"
+          onClick={handleStop}
+        >
+          <span aria-hidden className="i-ri-stop-circle-line size-4 text-text-accent" />
+        </button>
+      )}
+    </div>
   )
 }
 

From 2f88da4a6d9ad5ce5af0da3186cae6dcc4b8a7ea Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 20:23:24 +0800
Subject: [PATCH 038/108] feat(web): add variable inspect for snippet

---
 .../__tests__/snippet-main.spec.tsx           | 67 ++++++++++++-
 .../snippets/components/snippet-main.tsx      | 59 +++++++++++-
 .../__tests__/use-inspect-vars-crud.spec.ts   | 95 +++++++++++++++++++
 .../snippets/hooks/use-inspect-vars-crud.ts   | 13 +++
 4 files changed, 230 insertions(+), 4 deletions(-)
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts
 create mode 100644 web/app/components/snippets/hooks/use-inspect-vars-crud.ts

diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
index ac6a45f4e4..edcc4c1bc0 100644
--- a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -14,6 +14,24 @@ const mockSetPublishMenuOpen = vi.fn()
 const mockToggleInputPanel = vi.fn()
 const mockTogglePublishMenu = vi.fn()
 const mockPublishSnippetMutateAsync = vi.fn()
+const mockFetchInspectVars = vi.fn()
+const mockInspectVarsCrud = {
+  hasNodeInspectVars: vi.fn(),
+  hasSetInspectVar: vi.fn(),
+  fetchInspectVarValue: vi.fn(),
+  editInspectVarValue: vi.fn(),
+  renameInspectVarName: vi.fn(),
+  appendNodeInspectVars: vi.fn(),
+  deleteInspectVar: vi.fn(),
+  deleteNodeInspectorVars: vi.fn(),
+  deleteAllInspectorVars: vi.fn(),
+  isInspectVarEdited: vi.fn(),
+  resetToLastRunVar: vi.fn(),
+  invalidateSysVarValues: vi.fn(),
+  resetConversationVar: vi.fn(),
+  invalidateConversationVarValues: vi.fn(),
+}
+let capturedHooksStore: Record<string, unknown> | undefined
 
 vi.mock('@/hooks/use-breakpoints', () => ({
   default: () => 'desktop',
@@ -69,6 +87,16 @@ vi.mock('@/app/components/snippets/hooks/use-configs-map', () => ({
   }),
 }))
 
+vi.mock('@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars', () => ({
+  useSetWorkflowVarsWithValue: () => ({
+    fetchInspectVars: mockFetchInspectVars,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-inspect-vars-crud', () => ({
+  useInspectVarsCrud: () => mockInspectVarsCrud,
+}))
+
 vi.mock('@/app/components/snippets/hooks/use-nodes-sync-draft', () => ({
   useNodesSyncDraft: () => ({
     doSyncWorkflowDraft: vi.fn(),
@@ -111,9 +139,19 @@ vi.mock('@/app/components/evaluation', () => ({
 }))
 
 vi.mock('@/app/components/workflow', () => ({
-  WorkflowWithInnerContext: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="workflow-inner-context">{children}</div>
-  ),
+  WorkflowWithInnerContext: ({
+    children,
+    hooksStore,
+  }: {
+    children: React.ReactNode
+    hooksStore?: Record<string, unknown>
+  }) => {
+    capturedHooksStore = hooksStore
+
+    return (
+      <div data-testid="workflow-inner-context">{children}</div>
+    )
+  },
 }))
 
 vi.mock('@/app/components/snippets/components/snippet-children', () => ({
@@ -193,6 +231,7 @@ describe('SnippetMain', () => {
     vi.clearAllMocks()
     mockSyncInputFieldsDraft.mockResolvedValue(undefined)
     mockPublishSnippetMutateAsync.mockResolvedValue(undefined)
+    capturedHooksStore = undefined
   })
 
   describe('Input Fields Sync', () => {
@@ -243,4 +282,26 @@ describe('SnippetMain', () => {
       expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
     })
   })
+
+  describe('Inspect Vars', () => {
+    it('should pass inspect vars handlers to WorkflowWithInnerContext', () => {
+      renderSnippetMain()
+
+      expect(capturedHooksStore?.fetchInspectVars).toBe(mockFetchInspectVars)
+      expect(capturedHooksStore?.hasNodeInspectVars).toBe(mockInspectVarsCrud.hasNodeInspectVars)
+      expect(capturedHooksStore?.hasSetInspectVar).toBe(mockInspectVarsCrud.hasSetInspectVar)
+      expect(capturedHooksStore?.fetchInspectVarValue).toBe(mockInspectVarsCrud.fetchInspectVarValue)
+      expect(capturedHooksStore?.editInspectVarValue).toBe(mockInspectVarsCrud.editInspectVarValue)
+      expect(capturedHooksStore?.renameInspectVarName).toBe(mockInspectVarsCrud.renameInspectVarName)
+      expect(capturedHooksStore?.appendNodeInspectVars).toBe(mockInspectVarsCrud.appendNodeInspectVars)
+      expect(capturedHooksStore?.deleteInspectVar).toBe(mockInspectVarsCrud.deleteInspectVar)
+      expect(capturedHooksStore?.deleteNodeInspectorVars).toBe(mockInspectVarsCrud.deleteNodeInspectorVars)
+      expect(capturedHooksStore?.deleteAllInspectorVars).toBe(mockInspectVarsCrud.deleteAllInspectorVars)
+      expect(capturedHooksStore?.isInspectVarEdited).toBe(mockInspectVarsCrud.isInspectVarEdited)
+      expect(capturedHooksStore?.resetToLastRunVar).toBe(mockInspectVarsCrud.resetToLastRunVar)
+      expect(capturedHooksStore?.invalidateSysVarValues).toBe(mockInspectVarsCrud.invalidateSysVarValues)
+      expect(capturedHooksStore?.resetConversationVar).toBe(mockInspectVarsCrud.resetConversationVar)
+      expect(capturedHooksStore?.invalidateConversationVarValues).toBe(mockInspectVarsCrud.invalidateConversationVarValues)
+    })
+  })
 })
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index ed01d27c0b..b6f3eb1f9f 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -21,9 +21,11 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
 import { BlockEnum } from '@/app/components/workflow/types'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useConfigsMap } from '../hooks/use-configs-map'
+import { useInspectVarsCrud } from '../hooks/use-inspect-vars-crud'
 import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
 import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
 import { useSnippetDetailStore } from '../store'
@@ -65,6 +67,25 @@ const SnippetMain = ({
   } = useNodesSyncDraft(snippetId)
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
   const configsMap = useConfigsMap(snippetId)
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue({
+    ...configsMap,
+  })
+  const {
+    hasNodeInspectVars,
+    hasSetInspectVar,
+    fetchInspectVarValue,
+    editInspectVarValue,
+    renameInspectVarName,
+    appendNodeInspectVars,
+    deleteInspectVar,
+    deleteNodeInspectorVars,
+    deleteAllInspectorVars,
+    isInspectVarEdited,
+    resetToLastRunVar,
+    invalidateSysVarValues,
+    resetConversationVar,
+    invalidateConversationVarValues,
+  } = useInspectVarsCrud(snippetId)
   const workflowAvailableNodesMetaData = useAvailableNodesMetaData()
   const availableNodesMetaData = useMemo(() => {
     const nodes = workflowAvailableNodesMetaData.nodes.filter(node =>
@@ -128,9 +149,45 @@ const SnippetMain = ({
       syncWorkflowDraftWhenPageClose,
       handleRefreshWorkflowDraft,
       availableNodesMetaData,
+      fetchInspectVars,
+      hasNodeInspectVars,
+      hasSetInspectVar,
+      fetchInspectVarValue,
+      editInspectVarValue,
+      renameInspectVarName,
+      appendNodeInspectVars,
+      deleteInspectVar,
+      deleteNodeInspectorVars,
+      deleteAllInspectorVars,
+      isInspectVarEdited,
+      resetToLastRunVar,
+      invalidateSysVarValues,
+      resetConversationVar,
+      invalidateConversationVarValues,
       configsMap,
     }
-  }, [availableNodesMetaData, configsMap, doSyncWorkflowDraft, handleRefreshWorkflowDraft, syncWorkflowDraftWhenPageClose])
+  }, [
+    appendNodeInspectVars,
+    availableNodesMetaData,
+    configsMap,
+    deleteAllInspectorVars,
+    deleteInspectVar,
+    deleteNodeInspectorVars,
+    doSyncWorkflowDraft,
+    editInspectVarValue,
+    fetchInspectVarValue,
+    fetchInspectVars,
+    handleRefreshWorkflowDraft,
+    hasNodeInspectVars,
+    hasSetInspectVar,
+    invalidateConversationVarValues,
+    invalidateSysVarValues,
+    isInspectVarEdited,
+    renameInspectVarName,
+    resetConversationVar,
+    resetToLastRunVar,
+    syncWorkflowDraftWhenPageClose,
+  ])
 
   return (
     <div className="relative flex h-full overflow-hidden bg-background-body">
diff --git a/web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts b/web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts
new file mode 100644
index 0000000000..69e264d0cc
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts
@@ -0,0 +1,95 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useInspectVarsCrud } from '../use-inspect-vars-crud'
+
+const mockApis = {
+  hasNodeInspectVars: vi.fn(),
+  hasSetInspectVar: vi.fn(),
+  fetchInspectVarValue: vi.fn(),
+  editInspectVarValue: vi.fn(),
+  renameInspectVarName: vi.fn(),
+  appendNodeInspectVars: vi.fn(),
+  deleteInspectVar: vi.fn(),
+  deleteNodeInspectorVars: vi.fn(),
+  deleteAllInspectorVars: vi.fn(),
+  isInspectVarEdited: vi.fn(),
+  resetToLastRunVar: vi.fn(),
+  invalidateSysVarValues: vi.fn(),
+  resetConversationVar: vi.fn(),
+  invalidateConversationVarValues: vi.fn(),
+}
+
+const mockUseInspectVarsCrudCommon = vi.fn(() => mockApis)
+vi.mock('../../../workflow/hooks/use-inspect-vars-crud-common', () => ({
+  useInspectVarsCrudCommon: (...args: Parameters<typeof mockUseInspectVarsCrudCommon>) => mockUseInspectVarsCrudCommon(...args),
+}))
+
+const mockConfigsMap = {
+  flowId: 'snippet-123',
+  flowType: 'snippet',
+  fileSettings: {
+    image: { enabled: false },
+    fileUploadConfig: {},
+  },
+}
+
+vi.mock('../use-configs-map', () => ({
+  useConfigsMap: () => mockConfigsMap,
+}))
+
+describe('useInspectVarsCrud', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Composition', () => {
+    it('should pass configsMap to useInspectVarsCrudCommon', () => {
+      renderHook(() => useInspectVarsCrud('snippet-123'))
+
+      expect(mockUseInspectVarsCrudCommon).toHaveBeenCalledWith(
+        expect.objectContaining({
+          flowId: 'snippet-123',
+          flowType: 'snippet',
+        }),
+      )
+    })
+
+    it('should return all APIs from useInspectVarsCrudCommon', () => {
+      const { result } = renderHook(() => useInspectVarsCrud('snippet-123'))
+
+      expect(result.current.hasNodeInspectVars).toBe(mockApis.hasNodeInspectVars)
+      expect(result.current.fetchInspectVarValue).toBe(mockApis.fetchInspectVarValue)
+      expect(result.current.editInspectVarValue).toBe(mockApis.editInspectVarValue)
+      expect(result.current.deleteInspectVar).toBe(mockApis.deleteInspectVar)
+      expect(result.current.deleteAllInspectorVars).toBe(mockApis.deleteAllInspectorVars)
+      expect(result.current.resetToLastRunVar).toBe(mockApis.resetToLastRunVar)
+      expect(result.current.resetConversationVar).toBe(mockApis.resetConversationVar)
+    })
+  })
+
+  describe('API Surface', () => {
+    it('should expose all expected API methods', () => {
+      const { result } = renderHook(() => useInspectVarsCrud('snippet-123'))
+
+      const expectedKeys = [
+        'hasNodeInspectVars',
+        'hasSetInspectVar',
+        'fetchInspectVarValue',
+        'editInspectVarValue',
+        'renameInspectVarName',
+        'appendNodeInspectVars',
+        'deleteInspectVar',
+        'deleteNodeInspectorVars',
+        'deleteAllInspectorVars',
+        'isInspectVarEdited',
+        'resetToLastRunVar',
+        'invalidateSysVarValues',
+        'resetConversationVar',
+        'invalidateConversationVarValues',
+      ]
+
+      for (const key of expectedKeys)
+        expect(result.current).toHaveProperty(key)
+    })
+  })
+})
diff --git a/web/app/components/snippets/hooks/use-inspect-vars-crud.ts b/web/app/components/snippets/hooks/use-inspect-vars-crud.ts
new file mode 100644
index 0000000000..71ae6df068
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-inspect-vars-crud.ts
@@ -0,0 +1,13 @@
+import { useInspectVarsCrudCommon } from '../../workflow/hooks/use-inspect-vars-crud-common'
+import { useConfigsMap } from './use-configs-map'
+
+export const useInspectVarsCrud = (snippetId: string) => {
+  const configsMap = useConfigsMap(snippetId)
+  const apis = useInspectVarsCrudCommon({
+    ...configsMap,
+  })
+
+  return {
+    ...apis,
+  }
+}

From 768b3eb6f9f8023e743451bfbf511a0fabedc520 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 29 Mar 2026 20:55:11 +0800
Subject: [PATCH 039/108] feat(web): test run of snippet

---
 .../__tests__/snippet-main.spec.tsx           |  38 +++
 .../__tests__/workflow-panel.spec.tsx         |   1 +
 .../snippets/components/snippet-main.tsx      |  30 ++
 .../snippets/components/snippet-run-panel.tsx | 293 +++++++++++++++++
 .../snippets/components/workflow-panel.tsx    |  24 ++
 .../__tests__/use-snippet-start-run.spec.ts   | 131 ++++++++
 .../snippets/hooks/use-snippet-run.ts         | 298 ++++++++++++++++++
 .../snippets/hooks/use-snippet-start-run.ts   |  60 ++++
 8 files changed, 875 insertions(+)
 create mode 100644 web/app/components/snippets/components/snippet-run-panel.tsx
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-run.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-start-run.ts

diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
index edcc4c1bc0..ff3a3961ef 100644
--- a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -15,6 +15,13 @@ const mockToggleInputPanel = vi.fn()
 const mockTogglePublishMenu = vi.fn()
 const mockPublishSnippetMutateAsync = vi.fn()
 const mockFetchInspectVars = vi.fn()
+const mockHandleBackupDraft = vi.fn()
+const mockHandleLoadBackupDraft = vi.fn()
+const mockHandleRestoreFromPublishedWorkflow = vi.fn()
+const mockHandleRun = vi.fn()
+const mockHandleStartWorkflowRun = vi.fn()
+const mockHandleStopRun = vi.fn()
+const mockHandleWorkflowStartRunInWorkflow = vi.fn()
 const mockInspectVarsCrud = {
   hasNodeInspectVars: vi.fn(),
   hasSetInspectVar: vi.fn(),
@@ -111,6 +118,23 @@ vi.mock('@/app/components/snippets/hooks/use-snippet-refresh-draft', () => ({
   }),
 }))
 
+vi.mock('@/app/components/snippets/hooks/use-snippet-run', () => ({
+  useSnippetRun: () => ({
+    handleBackupDraft: mockHandleBackupDraft,
+    handleLoadBackupDraft: mockHandleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow: mockHandleRestoreFromPublishedWorkflow,
+    handleRun: mockHandleRun,
+    handleStopRun: mockHandleStopRun,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-start-run', () => ({
+  useSnippetStartRun: () => ({
+    handleStartWorkflowRun: mockHandleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow: mockHandleWorkflowStartRunInWorkflow,
+  }),
+}))
+
 vi.mock('@/app/components/app-sidebar', () => ({
   default: ({
     renderHeader,
@@ -304,4 +328,18 @@ describe('SnippetMain', () => {
       expect(capturedHooksStore?.invalidateConversationVarValues).toBe(mockInspectVarsCrud.invalidateConversationVarValues)
     })
   })
+
+  describe('Run Hooks', () => {
+    it('should pass snippet run handlers to WorkflowWithInnerContext', () => {
+      renderSnippetMain()
+
+      expect(capturedHooksStore?.handleBackupDraft).toBe(mockHandleBackupDraft)
+      expect(capturedHooksStore?.handleLoadBackupDraft).toBe(mockHandleLoadBackupDraft)
+      expect(capturedHooksStore?.handleRestoreFromPublishedWorkflow).toBe(mockHandleRestoreFromPublishedWorkflow)
+      expect(capturedHooksStore?.handleRun).toBe(mockHandleRun)
+      expect(capturedHooksStore?.handleStopRun).toBe(mockHandleStopRun)
+      expect(capturedHooksStore?.handleStartWorkflowRun).toBe(mockHandleStartWorkflowRun)
+      expect(capturedHooksStore?.handleWorkflowStartRunInWorkflow).toBe(mockHandleWorkflowStartRunInWorkflow)
+    })
+  })
 })
diff --git a/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
index 7b81a98494..db8a333143 100644
--- a/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
@@ -45,6 +45,7 @@ describe('SnippetWorkflowPanel', () => {
         expect(capturedPanelProps?.versionHistoryPanelProps?.restoreVersionUrl('version-1')).toBe('/snippets/snippet-1/workflows/version-1/restore')
         expect(capturedPanelProps?.versionHistoryPanelProps?.updateVersionUrl?.('version-1')).toBe('/snippets/snippet-1/workflows/version-1')
         expect(capturedPanelProps?.versionHistoryPanelProps?.latestVersionId).toBe('')
+        expect(capturedPanelProps?.components?.right).toBeTruthy()
       })
     })
   })
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index b6f3eb1f9f..46740c344a 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -28,6 +28,8 @@ import { useConfigsMap } from '../hooks/use-configs-map'
 import { useInspectVarsCrud } from '../hooks/use-inspect-vars-crud'
 import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
 import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
+import { useSnippetRun } from '../hooks/use-snippet-run'
+import { useSnippetStartRun } from '../hooks/use-snippet-start-run'
 import { useSnippetDetailStore } from '../store'
 import { useSnippetInputFieldActions } from './hooks/use-snippet-input-field-actions'
 import { useSnippetPublish } from './hooks/use-snippet-publish'
@@ -66,6 +68,13 @@ const SnippetMain = ({
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft(snippetId)
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
+  const {
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStopRun,
+  } = useSnippetRun(snippetId)
   const configsMap = useConfigsMap(snippetId)
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
     ...configsMap,
@@ -132,6 +141,13 @@ const SnippetMain = ({
     snippetId,
     section,
   })
+  const {
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow,
+  } = useSnippetStartRun({
+    handleRun,
+    inputFields: fields,
+  })
 
   useEffect(() => {
     reset()
@@ -148,6 +164,13 @@ const SnippetMain = ({
       doSyncWorkflowDraft,
       syncWorkflowDraftWhenPageClose,
       handleRefreshWorkflowDraft,
+      handleBackupDraft,
+      handleLoadBackupDraft,
+      handleRestoreFromPublishedWorkflow,
+      handleRun,
+      handleStopRun,
+      handleStartWorkflowRun,
+      handleWorkflowStartRunInWorkflow,
       availableNodesMetaData,
       fetchInspectVars,
       hasNodeInspectVars,
@@ -177,7 +200,14 @@ const SnippetMain = ({
     editInspectVarValue,
     fetchInspectVarValue,
     fetchInspectVars,
+    handleBackupDraft,
     handleRefreshWorkflowDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStartWorkflowRun,
+    handleStopRun,
+    handleWorkflowStartRunInWorkflow,
     hasNodeInspectVars,
     hasSetInspectVar,
     invalidateConversationVarValues,
diff --git a/web/app/components/snippets/components/snippet-run-panel.tsx b/web/app/components/snippets/components/snippet-run-panel.tsx
new file mode 100644
index 0000000000..912342d732
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-run-panel.tsx
@@ -0,0 +1,293 @@
+'use client'
+
+import type { InputForm } from '@/app/components/base/chat/chat/type'
+import type { InputVar as WorkflowInputVar } from '@/app/components/workflow/types'
+import type { SnippetInputField } from '@/models/snippet'
+import copy from 'copy-to-clipboard'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
+import { getProcessedInputs } from '@/app/components/base/chat/chat/utils'
+import Loading from '@/app/components/base/loading'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  useWorkflowInteractions,
+  useWorkflowRun,
+} from '@/app/components/workflow/hooks'
+import FormItem from '@/app/components/workflow/nodes/_base/components/before-run-form/form-item'
+import ResultPanel from '@/app/components/workflow/run/result-panel'
+import ResultText from '@/app/components/workflow/run/result-text'
+import TracingPanel from '@/app/components/workflow/run/tracing-panel'
+import { useStore } from '@/app/components/workflow/store'
+import {
+  InputVarType,
+  WorkflowRunningStatus,
+} from '@/app/components/workflow/types'
+import { formatWorkflowRunIdentifier } from '@/app/components/workflow/utils'
+import { PipelineInputVarType } from '@/models/pipeline'
+
+type SnippetRunPanelProps = {
+  fields: SnippetInputField[]
+}
+
+type SnippetRunField = WorkflowInputVar & InputForm
+
+const PIPELINE_TO_WORKFLOW_INPUT_VAR_TYPE: Record<PipelineInputVarType, InputVarType> = {
+  [PipelineInputVarType.textInput]: InputVarType.textInput,
+  [PipelineInputVarType.paragraph]: InputVarType.paragraph,
+  [PipelineInputVarType.select]: InputVarType.select,
+  [PipelineInputVarType.number]: InputVarType.number,
+  [PipelineInputVarType.singleFile]: InputVarType.singleFile,
+  [PipelineInputVarType.multiFiles]: InputVarType.multiFiles,
+  [PipelineInputVarType.checkbox]: InputVarType.checkbox,
+}
+
+const buildPreviewFields = (fields: SnippetInputField[]): SnippetRunField[] => {
+  return fields.map(field => ({
+    type: PIPELINE_TO_WORKFLOW_INPUT_VAR_TYPE[field.type],
+    label: field.label,
+    variable: field.variable,
+    max_length: field.max_length,
+    default: field.default_value,
+    required: field.required,
+    options: field.options,
+    placeholder: field.placeholder,
+    unit: field.unit,
+    hide: false,
+    allowed_file_upload_methods: field.allowed_file_upload_methods,
+    allowed_file_types: field.allowed_file_types,
+    allowed_file_extensions: field.allowed_file_extensions,
+  }))
+}
+
+const buildInitialInputs = (fields: SnippetRunField[]) => {
+  return fields.reduce<Record<string, unknown>>((acc, field) => {
+    if (field.default !== undefined)
+      acc[field.variable] = field.default
+
+    return acc
+  }, {})
+}
+
+const SnippetRunPanel = ({
+  fields,
+}: SnippetRunPanelProps) => {
+  const { t } = useTranslation()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+  const { handleRun } = useWorkflowRun()
+  const { checkInputsForm } = useCheckInputsForms()
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+  const showInputsPanel = useStore(s => s.showInputsPanel)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const panelWidth = useStore(s => s.previewPanelWidth)
+  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
+
+  const previewFields = useMemo(() => buildPreviewFields(fields), [fields])
+  const initialInputs = useMemo(() => buildInitialInputs(previewFields), [previewFields])
+  const [inputOverrides, setInputOverrides] = useState<Record<string, unknown> | null>(null)
+  const [selectedTab, setSelectedTab] = useState<string | null>(null)
+  const [isResizing, setIsResizing] = useState(false)
+
+  const inputs = inputOverrides ?? initialInputs
+  const hasInputTab = showInputsPanel && previewFields.length > 0
+  const defaultTab = hasInputTab ? 'INPUT' : 'RESULT'
+  const shouldShowDetailByDefault = !!workflowRunningData
+    && (workflowRunningData.result.status === WorkflowRunningStatus.Succeeded || workflowRunningData.result.status === WorkflowRunningStatus.Failed)
+    && !workflowRunningData.resultText
+    && !workflowRunningData.result.files?.length
+  const currentTab = selectedTab ?? (shouldShowDetailByDefault ? 'DETAIL' : defaultTab)
+
+  const handleValueChange = useCallback((variable: string, value: unknown) => {
+    setInputOverrides(prev => ({
+      ...(prev ?? initialInputs),
+      [variable]: value,
+    }))
+  }, [initialInputs])
+
+  const handleSubmit = useCallback(() => {
+    if (!checkInputsForm(inputs, previewFields))
+      return
+
+    setSelectedTab('RESULT')
+    handleRun({
+      inputs: getProcessedInputs(inputs, previewFields),
+    })
+  }, [checkInputsForm, handleRun, inputs, previewFields])
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+  }, [])
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false)
+  }, [])
+
+  const resize = useCallback((e: MouseEvent) => {
+    if (!isResizing)
+      return
+
+    const newWidth = window.innerWidth - e.clientX
+    const reservedCanvasWidth = 400
+    const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
+
+    if (newWidth >= 400 && newWidth <= maxAllowed)
+      setPreviewPanelWidth(newWidth)
+  }, [isResizing, setPreviewPanelWidth, workflowCanvasWidth])
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize)
+    window.addEventListener('mouseup', stopResizing)
+    return () => {
+      window.removeEventListener('mousemove', resize)
+      window.removeEventListener('mouseup', stopResizing)
+    }
+  }, [resize, stopResizing])
+
+  return (
+    <div
+      className="relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
+      style={{ width: `${panelWidth}px` }}
+    >
+      <div
+        className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
+        onMouseDown={startResizing}
+      />
+      <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
+        {`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at, workflowRunningData?.result.status)}`}
+        <div className="cursor-pointer p-1" onClick={handleCancelDebugAndPreviewPanel}>
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </div>
+      </div>
+      <div className="relative flex grow flex-col">
+        <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
+          {hasInputTab && (
+            <div
+              className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'INPUT' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'}`}
+              onClick={() => setSelectedTab('INPUT')}
+            >
+              {t('input', { ns: 'runLog' })}
+            </div>
+          )}
+          <div
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'RESULT' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            onClick={() => workflowRunningData && setSelectedTab('RESULT')}
+          >
+            {t('result', { ns: 'runLog' })}
+          </div>
+          <div
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'DETAIL' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            onClick={() => workflowRunningData && setSelectedTab('DETAIL')}
+          >
+            {t('detail', { ns: 'runLog' })}
+          </div>
+          <div
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'TRACING' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            onClick={() => workflowRunningData && setSelectedTab('TRACING')}
+          >
+            {t('tracing', { ns: 'runLog' })}
+          </div>
+        </div>
+        <div className={`h-0 grow overflow-y-auto rounded-b-2xl ${(currentTab === 'RESULT' || currentTab === 'TRACING') ? '!bg-background-section-burn' : 'bg-components-panel-bg'}`}>
+          {currentTab === 'INPUT' && hasInputTab && (
+            <>
+              <div className="px-4 pb-2 pt-3">
+                {previewFields.map((field, index) => (
+                  <div
+                    key={field.variable}
+                    className="mb-2 last-of-type:mb-0"
+                  >
+                    <FormItem
+                      autoFocus={index === 0}
+                      className="!block"
+                      payload={field}
+                      value={inputs[field.variable]}
+                      onChange={value => handleValueChange(field.variable, value)}
+                    />
+                  </div>
+                ))}
+              </div>
+              <div className="flex items-center justify-between px-4 py-2">
+                <Button
+                  variant="primary"
+                  className="w-full"
+                  disabled={workflowRunningData?.result?.status === WorkflowRunningStatus.Running}
+                  onClick={handleSubmit}
+                >
+                  {t('singleRun.startRun', { ns: 'workflow' })}
+                </Button>
+              </div>
+            </>
+          )}
+          {currentTab === 'RESULT' && (
+            <div className="p-2">
+              <ResultText
+                isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
+                outputs={workflowRunningData?.resultText}
+                allFiles={workflowRunningData?.result?.files}
+                error={workflowRunningData?.result?.error}
+                onClick={() => setSelectedTab('DETAIL')}
+              />
+              {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData.resultText === 'string') && (
+                <Button
+                  className="mb-4 ml-4 space-x-1"
+                  onClick={() => {
+                    copy(workflowRunningData?.resultText || '')
+                    toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
+                  }}
+                >
+                  <span className="i-ri-clipboard-line h-3.5 w-3.5" />
+                  <div>{t('operation.copy', { ns: 'common' })}</div>
+                </Button>
+              )}
+            </div>
+          )}
+          {currentTab === 'DETAIL' && workflowRunningData?.result && (
+            <ResultPanel
+              inputs={workflowRunningData.result?.inputs}
+              inputs_truncated={workflowRunningData.result?.inputs_truncated}
+              process_data={workflowRunningData.result?.process_data}
+              process_data_truncated={workflowRunningData.result?.process_data_truncated}
+              outputs={workflowRunningData.result?.outputs}
+              outputs_truncated={workflowRunningData.result?.outputs_truncated}
+              outputs_full_content={workflowRunningData.result?.outputs_full_content}
+              status={workflowRunningData.result?.status || ''}
+              error={workflowRunningData.result?.error}
+              elapsed_time={workflowRunningData.result?.elapsed_time}
+              total_tokens={workflowRunningData.result?.total_tokens}
+              created_at={workflowRunningData.result?.created_at}
+              created_by={workflowRunningData.result?.created_by}
+              steps={workflowRunningData.result?.total_steps}
+              exceptionCounts={workflowRunningData.result?.exceptions_count}
+            />
+          )}
+          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
+            <div className="flex h-full items-center justify-center bg-components-panel-bg">
+              <Loading />
+            </div>
+          )}
+          {currentTab === 'TRACING' && (
+            <TracingPanel
+              className="bg-background-section-burn"
+              list={workflowRunningData?.tracing || []}
+            />
+          )}
+          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+            <div className="flex h-full items-center justify-center !bg-background-section-burn">
+              <Loading />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(SnippetRunPanel)
diff --git a/web/app/components/snippets/components/workflow-panel.tsx b/web/app/components/snippets/components/workflow-panel.tsx
index 80c41df8a0..cb2f281c5d 100644
--- a/web/app/components/snippets/components/workflow-panel.tsx
+++ b/web/app/components/snippets/components/workflow-panel.tsx
@@ -4,9 +4,18 @@ import type { PanelProps } from '@/app/components/workflow/panel'
 import type { SnippetInputField } from '@/models/snippet'
 import { memo, useMemo } from 'react'
 import Panel from '@/app/components/workflow/panel'
+import { useStore } from '@/app/components/workflow/store'
+import dynamic from '@/next/dynamic'
 import SnippetInputFieldEditor from './input-field-editor'
 import SnippetInputFieldPanel from './panel'
 
+const Record = dynamic(() => import('@/app/components/workflow/panel/record'), {
+  ssr: false,
+})
+const SnippetRunPanel = dynamic(() => import('./snippet-run-panel'), {
+  ssr: false,
+})
+
 type SnippetWorkflowPanelProps = {
   snippetId: string
   fields: SnippetInputField[]
@@ -56,6 +65,20 @@ const SnippetPanelOnLeft = ({
   )
 }
 
+const SnippetPanelOnRight = ({
+  fields,
+}: Pick<SnippetWorkflowPanelProps, 'fields'>) => {
+  const historyWorkflowData = useStore(s => s.historyWorkflowData)
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
+
+  return (
+    <>
+      {historyWorkflowData && <Record />}
+      {showDebugAndPreviewPanel && <SnippetRunPanel fields={fields} />}
+    </>
+  )
+}
+
 const SnippetWorkflowPanel = ({
   snippetId,
   fields,
@@ -97,6 +120,7 @@ const SnippetWorkflowPanel = ({
             onSortChange={onSortChange}
           />
         ),
+        right: <SnippetPanelOnRight fields={fields} />,
       },
       versionHistoryPanelProps,
     }
diff --git a/web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts b/web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts
new file mode 100644
index 0000000000..909110939a
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts
@@ -0,0 +1,131 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { renderHook } from '@testing-library/react'
+import { act } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetStartRun } from '../use-snippet-start-run'
+
+const mockWorkflowStoreGetState = vi.fn()
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: mockWorkflowStoreGetState,
+  }),
+}))
+
+const mockHandleCancelDebugAndPreviewPanel = vi.fn()
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useWorkflowInteractions: () => ({
+    handleCancelDebugAndPreviewPanel: mockHandleCancelDebugAndPreviewPanel,
+  }),
+}))
+
+const mockSetShowDebugAndPreviewPanel = vi.fn()
+const mockSetShowInputsPanel = vi.fn()
+const mockSetShowEnvPanel = vi.fn()
+const mockSetShowGlobalVariablePanel = vi.fn()
+const mockHandleRun = vi.fn()
+
+const inputFields: SnippetInputField[] = [
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Query',
+    variable: 'query',
+    required: true,
+  },
+]
+
+describe('useSnippetStartRun', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockWorkflowStoreGetState.mockReturnValue({
+      workflowRunningData: undefined,
+      showDebugAndPreviewPanel: false,
+      setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+      setShowInputsPanel: mockSetShowInputsPanel,
+      setShowEnvPanel: mockSetShowEnvPanel,
+      setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+    })
+  })
+
+  it('should open the debug panel and input form when snippet has input fields', () => {
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields,
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(true)
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it('should run immediately when snippet has no input fields', () => {
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields: [],
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(false)
+    expect(mockHandleRun).toHaveBeenCalledWith({ inputs: {} })
+  })
+
+  it('should close the panel when debug panel is already open', () => {
+    mockWorkflowStoreGetState.mockReturnValue({
+      workflowRunningData: undefined,
+      showDebugAndPreviewPanel: true,
+      setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+      setShowInputsPanel: mockSetShowInputsPanel,
+      setShowEnvPanel: mockSetShowEnvPanel,
+      setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+    })
+
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields,
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalled()
+  })
+
+  it('should do nothing when workflow is already running', () => {
+    mockWorkflowStoreGetState.mockReturnValue({
+      workflowRunningData: {
+        result: {
+          status: WorkflowRunningStatus.Running,
+        },
+      },
+      showDebugAndPreviewPanel: false,
+      setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+      setShowInputsPanel: mockSetShowInputsPanel,
+      setShowEnvPanel: mockSetShowEnvPanel,
+      setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+    })
+
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields,
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowDebugAndPreviewPanel).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/snippets/hooks/use-snippet-run.ts b/web/app/components/snippets/hooks/use-snippet-run.ts
new file mode 100644
index 0000000000..3c8668270e
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-run.ts
@@ -0,0 +1,298 @@
+import type { IOtherOptions } from '@/service/base'
+import type { SnippetDraftRunPayload } from '@/types/snippet'
+import type { VersionHistory } from '@/types/workflow'
+import { produce } from 'immer'
+import { useCallback, useRef } from 'react'
+import {
+  useReactFlow,
+  useStoreApi,
+} from 'reactflow'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-interactions'
+import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { ssePost } from '@/service/base'
+import { useInvalidAllLastRun, useInvalidateWorkflowRunHistory } from '@/service/use-workflow'
+import { stopWorkflowRun } from '@/service/workflow'
+import { FlowType } from '@/types/common'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
+
+export const useSnippetRun = (snippetId: string) => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const reactflow = useReactFlow()
+  const { doSyncWorkflowDraft } = useNodesSyncDraft(snippetId)
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+
+  const {
+    handleWorkflowStarted,
+    handleWorkflowFinished,
+    handleWorkflowFailed,
+    handleWorkflowNodeStarted,
+    handleWorkflowNodeFinished,
+    handleWorkflowNodeIterationStarted,
+    handleWorkflowNodeIterationNext,
+    handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
+    handleWorkflowNodeRetry,
+    handleWorkflowAgentLog,
+    handleWorkflowTextChunk,
+    handleWorkflowTextReplace,
+  } = useWorkflowRunEvent()
+
+  const abortControllerRef = useRef<AbortController | null>(null)
+
+  const handleBackupDraft = useCallback(() => {
+    const {
+      getNodes,
+      edges,
+    } = store.getState()
+    const { getViewport } = reactflow
+    const {
+      backupDraft,
+      setBackupDraft,
+    } = workflowStore.getState()
+
+    if (!backupDraft) {
+      setBackupDraft({
+        nodes: getNodes(),
+        edges,
+        viewport: getViewport(),
+        environmentVariables: [],
+      })
+      doSyncWorkflowDraft()
+    }
+  }, [doSyncWorkflowDraft, reactflow, store, workflowStore])
+
+  const handleLoadBackupDraft = useCallback(() => {
+    const {
+      backupDraft,
+      setBackupDraft,
+      setEnvironmentVariables,
+    } = workflowStore.getState()
+
+    if (backupDraft) {
+      const {
+        nodes,
+        edges,
+        viewport,
+      } = backupDraft
+      handleUpdateWorkflowCanvas({
+        nodes,
+        edges,
+        viewport,
+      })
+      setEnvironmentVariables([])
+      setBackupDraft(undefined)
+    }
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
+  const invalidAllLastRun = useInvalidAllLastRun(FlowType.snippet, snippetId)
+  const invalidateRunHistory = useInvalidateWorkflowRunHistory()
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue({
+    flowType: FlowType.snippet,
+    flowId: snippetId,
+  })
+
+  const handleRun = useCallback(async (
+    params: SnippetDraftRunPayload,
+    callback?: IOtherOptions,
+  ) => {
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+    const newNodes = produce(getNodes(), (draft) => {
+      draft.forEach((node) => {
+        node.data.selected = false
+        node.data._runningStatus = undefined
+      })
+    })
+    setNodes(newNodes)
+    await doSyncWorkflowDraft()
+
+    const {
+      onWorkflowStarted,
+      onWorkflowFinished,
+      onNodeStarted,
+      onNodeFinished,
+      onIterationStart,
+      onIterationNext,
+      onIterationFinish,
+      onLoopStart,
+      onLoopNext,
+      onLoopFinish,
+      onNodeRetry,
+      onAgentLog,
+      onError,
+      ...restCallback
+    } = callback || {}
+    const runHistoryUrl = `/snippets/${snippetId}/workflow-runs`
+    workflowStore.setState({ historyWorkflowData: undefined })
+    const workflowContainer = document.getElementById('workflow-container')
+
+    const {
+      clientWidth,
+      clientHeight,
+    } = workflowContainer!
+
+    const url = `/snippets/${snippetId}/workflows/draft/run`
+
+    const {
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    setWorkflowRunningData({
+      result: {
+        inputs_truncated: false,
+        process_data_truncated: false,
+        outputs_truncated: false,
+        status: WorkflowRunningStatus.Running,
+      },
+      tracing: [],
+      resultText: '',
+    })
+
+    abortControllerRef.current?.abort()
+    abortControllerRef.current = null
+
+    ssePost(
+      url,
+      {
+        body: params,
+      },
+      {
+        getAbortController: (controller: AbortController) => {
+          abortControllerRef.current = controller
+        },
+        onWorkflowStarted: (params) => {
+          handleWorkflowStarted(params)
+          invalidateRunHistory(runHistoryUrl)
+
+          onWorkflowStarted?.(params)
+        },
+        onWorkflowFinished: (params) => {
+          handleWorkflowFinished(params)
+          invalidateRunHistory(runHistoryUrl)
+          fetchInspectVars({})
+          invalidAllLastRun()
+
+          onWorkflowFinished?.(params)
+        },
+        onError: (params) => {
+          handleWorkflowFailed()
+          invalidateRunHistory(runHistoryUrl)
+
+          onError?.(params)
+        },
+        onNodeStarted: (params) => {
+          handleWorkflowNodeStarted(
+            params,
+            {
+              clientWidth,
+              clientHeight,
+            },
+          )
+
+          onNodeStarted?.(params)
+        },
+        onNodeFinished: (params) => {
+          handleWorkflowNodeFinished(params)
+
+          onNodeFinished?.(params)
+        },
+        onIterationStart: (params) => {
+          handleWorkflowNodeIterationStarted(
+            params,
+            {
+              clientWidth,
+              clientHeight,
+            },
+          )
+
+          onIterationStart?.(params)
+        },
+        onIterationNext: (params) => {
+          handleWorkflowNodeIterationNext(params)
+
+          onIterationNext?.(params)
+        },
+        onIterationFinish: (params) => {
+          handleWorkflowNodeIterationFinished(params)
+
+          onIterationFinish?.(params)
+        },
+        onLoopStart: (params) => {
+          handleWorkflowNodeLoopStarted(
+            params,
+            {
+              clientWidth,
+              clientHeight,
+            },
+          )
+
+          onLoopStart?.(params)
+        },
+        onLoopNext: (params) => {
+          handleWorkflowNodeLoopNext(params)
+
+          onLoopNext?.(params)
+        },
+        onLoopFinish: (params) => {
+          handleWorkflowNodeLoopFinished(params)
+
+          onLoopFinish?.(params)
+        },
+        onNodeRetry: (params) => {
+          handleWorkflowNodeRetry(params)
+
+          onNodeRetry?.(params)
+        },
+        onAgentLog: (params) => {
+          handleWorkflowAgentLog(params)
+
+          onAgentLog?.(params)
+        },
+        onTextChunk: (params) => {
+          handleWorkflowTextChunk(params)
+        },
+        onTextReplace: (params) => {
+          handleWorkflowTextReplace(params)
+        },
+        ...restCallback,
+      },
+    )
+  }, [doSyncWorkflowDraft, fetchInspectVars, handleWorkflowAgentLog, handleWorkflowFailed, handleWorkflowFinished, handleWorkflowNodeFinished, handleWorkflowNodeIterationFinished, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationStarted, handleWorkflowNodeLoopFinished, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopStarted, handleWorkflowNodeRetry, handleWorkflowNodeStarted, handleWorkflowStarted, handleWorkflowTextChunk, handleWorkflowTextReplace, invalidAllLastRun, invalidateRunHistory, snippetId, store, workflowStore])
+
+  const handleStopRun = useCallback((taskId: string) => {
+    stopWorkflowRun(`/snippets/${snippetId}/workflow-runs/tasks/${taskId}/stop`)
+
+    if (abortControllerRef.current)
+      abortControllerRef.current.abort()
+
+    abortControllerRef.current = null
+  }, [snippetId])
+
+  const handleRestoreFromPublishedWorkflow = useCallback((publishedWorkflow: VersionHistory) => {
+    const nodes = publishedWorkflow.graph.nodes.map(node => ({ ...node, selected: false, data: { ...node.data, selected: false } }))
+    const edges = publishedWorkflow.graph.edges
+    const viewport = publishedWorkflow.graph.viewport!
+    handleUpdateWorkflowCanvas({
+      nodes,
+      edges,
+      viewport,
+    })
+
+    workflowStore.getState().setEnvironmentVariables([])
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
+  return {
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRun,
+    handleStopRun,
+    handleRestoreFromPublishedWorkflow,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-snippet-start-run.ts b/web/app/components/snippets/hooks/use-snippet-start-run.ts
new file mode 100644
index 0000000000..27051510b9
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-start-run.ts
@@ -0,0 +1,60 @@
+import type { SnippetInputField } from '@/models/snippet'
+import type { SnippetDraftRunPayload } from '@/types/snippet'
+import { useCallback } from 'react'
+import { useWorkflowInteractions } from '@/app/components/workflow/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+
+type UseSnippetStartRunOptions = {
+  handleRun: (params: SnippetDraftRunPayload) => void
+  inputFields: SnippetInputField[]
+}
+
+export const useSnippetStartRun = ({
+  handleRun,
+  inputFields,
+}: UseSnippetStartRunOptions) => {
+  const workflowStore = useWorkflowStore()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+
+  const handleWorkflowStartRunInWorkflow = useCallback(() => {
+    const {
+      workflowRunningData,
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (showDebugAndPreviewPanel) {
+      handleCancelDebugAndPreviewPanel()
+      return
+    }
+
+    setShowDebugAndPreviewPanel(true)
+
+    if (inputFields.length > 0) {
+      setShowInputsPanel(true)
+      return
+    }
+
+    setShowInputsPanel(false)
+    handleRun({ inputs: {} })
+  }, [handleCancelDebugAndPreviewPanel, handleRun, inputFields.length, workflowStore])
+
+  const handleStartWorkflowRun = useCallback(() => {
+    handleWorkflowStartRunInWorkflow()
+  }, [handleWorkflowStartRunInWorkflow])
+
+  return {
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow,
+  }
+}

From 871a2a149f572a7aa29cfc31e75388601cfd01dd Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 30 Mar 2026 10:32:59 +0800
Subject: [PATCH 040/108] refactor(web): split snippet index

---
 .../snippets/[snippetId]/evaluation/page.tsx  |   4 +-
 .../snippets/[snippetId]/orchestrate/page.tsx |   2 +-
 .../snippets/__tests__/index.spec.tsx         | 178 +++---------------
 .../snippet-evaluation-page.spec.tsx          | 107 +++++++++++
 .../__tests__/snippet-main.spec.tsx           |  44 +----
 .../components/hooks/use-snippet-publish.ts   |   5 +-
 .../snippets/components/snippet-layout.tsx    |  88 +++++++++
 .../snippets/components/snippet-main.tsx      | 126 +++----------
 web/app/components/snippets/index.tsx         |  55 +++---
 .../snippets/snippet-evaluation-page.tsx      |  46 +++++
 10 files changed, 332 insertions(+), 323 deletions(-)
 create mode 100644 web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
 create mode 100644 web/app/components/snippets/components/snippet-layout.tsx
 create mode 100644 web/app/components/snippets/snippet-evaluation-page.tsx

diff --git a/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
index 293945ad20..adc4bb6903 100644
--- a/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
+++ b/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
@@ -1,11 +1,11 @@
-import SnippetPage from '@/app/components/snippets'
+import SnippetEvaluationPage from '@/app/components/snippets/snippet-evaluation-page'
 
 const Page = async (props: {
   params: Promise<{ snippetId: string }>
 }) => {
   const { snippetId } = await props.params
 
-  return <SnippetPage snippetId={snippetId} section="evaluation" />
+  return <SnippetEvaluationPage snippetId={snippetId} />
 }
 
 export default Page
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
index 702dfcab54..8a39dc710b 100644
--- a/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
+++ b/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
@@ -5,7 +5,7 @@ const Page = async (props: {
 }) => {
   const { snippetId } = await props.params
 
-  return <SnippetPage snippetId={snippetId} section="orchestrate" />
+  return <SnippetPage snippetId={snippetId} />
 }
 
 export default Page
diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
index 041783b987..8d63394a82 100644
--- a/web/app/components/snippets/__tests__/index.spec.tsx
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -1,44 +1,16 @@
-import type { HeaderProps } from '@/app/components/workflow/header'
 import type { SnippetDetailPayload } from '@/models/snippet'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { PipelineInputVarType } from '@/models/pipeline'
+import { render, screen } from '@testing-library/react'
 import SnippetPage from '..'
-import { useSnippetDetailStore } from '../store'
 
 const mockUseSnippetInit = vi.fn()
-const mockPublishSnippetMutateAsync = vi.fn()
+const mockSetAppSidebarExpand = vi.fn()
 
 vi.mock('../hooks/use-snippet-init', () => ({
   useSnippetInit: (snippetId: string) => mockUseSnippetInit(snippetId),
 }))
 
-vi.mock('../hooks/use-configs-map', () => ({
-  useConfigsMap: () => ({
-    flowId: 'snippet-1',
-    flowType: 'snippet',
-    fileSettings: {},
-  }),
-}))
-
-vi.mock('../hooks/use-nodes-sync-draft', () => ({
-  useNodesSyncDraft: () => ({
-    doSyncWorkflowDraft: vi.fn(),
-    syncInputFieldsDraft: vi.fn(),
-    syncWorkflowDraftWhenPageClose: vi.fn(),
-  }),
-}))
-
-vi.mock('../hooks/use-snippet-refresh-draft', () => ({
-  useSnippetRefreshDraft: () => ({
-    handleRefreshWorkflowDraft: vi.fn(),
-  }),
-}))
-
-vi.mock('@/service/use-snippet-workflows', () => ({
-  usePublishSnippetWorkflowMutation: () => ({
-    mutateAsync: mockPublishSnippetMutateAsync,
-    isPending: false,
-  }),
+vi.mock('../components/snippet-main', () => ({
+  default: ({ snippetId }: { snippetId: string }) => <div data-testid="snippet-main">{snippetId}</div>,
 }))
 
 vi.mock('@/next/navigation', () => ({
@@ -48,41 +20,14 @@ vi.mock('@/next/navigation', () => ({
   }),
 }))
 
-vi.mock('@/service/use-snippets', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/service/use-snippets')>()
-
-  return {
-    ...actual,
-    useUpdateSnippetMutation: () => ({
-      mutate: vi.fn(),
-      isPending: false,
-    }),
-    useExportSnippetMutation: () => ({
-      mutateAsync: vi.fn(),
-      isPending: false,
-    }),
-    useDeleteSnippetMutation: () => ({
-      mutate: vi.fn(),
-      isPending: false,
-    }),
-  }
-})
-
-vi.mock('@/service/use-common', () => ({
-  useFileUploadConfig: () => ({
-    data: undefined,
-  }),
-}))
-
 vi.mock('@/hooks/use-breakpoints', () => ({
   default: () => 'desktop',
   MediaType: { mobile: 'mobile', desktop: 'desktop' },
 }))
 
-vi.mock('@/app/components/rag-pipeline/components/panel/input-field/hooks', () => ({
-  useFloatingRight: () => ({
-    floatingRight: false,
-    floatingRightWidth: 400,
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
   }),
 }))
 
@@ -90,26 +35,6 @@ vi.mock('@/app/components/workflow', () => ({
   default: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="workflow-default-context">{children}</div>
   ),
-  WorkflowWithInnerContext: ({ children, viewport }: { children: React.ReactNode, viewport?: { zoom?: number } }) => (
-    <div data-testid="workflow-inner-context">
-      <span data-testid="workflow-viewport-zoom">{viewport?.zoom ?? 'none'}</span>
-      {children}
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/header', () => ({
-  default: (props: HeaderProps) => {
-    const CustomRunMode = props.normal?.runAndHistoryProps?.components?.RunMode
-
-    return (
-      <div data-testid="workflow-header">
-        {props.normal?.components?.left}
-        {CustomRunMode && <CustomRunMode text={props.normal?.runAndHistoryProps?.runButtonText} />}
-        {props.normal?.components?.middle}
-      </div>
-    )
-  },
 }))
 
 vi.mock('@/app/components/workflow/context', () => ({
@@ -118,6 +43,16 @@ vi.mock('@/app/components/workflow/context', () => ({
   ),
 }))
 
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
+
+  return {
+    ...actual,
+    initialNodes: (nodes: unknown[]) => nodes,
+    initialEdges: (edges: unknown[]) => edges,
+  }
+})
+
 vi.mock('@/app/components/app-sidebar', () => ({
   default: ({
     renderHeader,
@@ -139,27 +74,12 @@ vi.mock('@/app/components/app-sidebar/nav-link', () => ({
   ),
 }))
 
-vi.mock('@/app/components/workflow/panel', () => ({
-  default: ({ components }: { components?: { left?: React.ReactNode, right?: React.ReactNode } }) => (
-    <div data-testid="workflow-panel">
-      <div data-testid="workflow-panel-left">{components?.left}</div>
-      <div data-testid="workflow-panel-right">{components?.right}</div>
-    </div>
-  ),
+vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
+  default: () => <div data-testid="snippet-info" />,
 }))
 
-vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
-
-  return {
-    ...actual,
-    initialNodes: (nodes: unknown[]) => nodes,
-    initialEdges: (edges: unknown[]) => edges,
-  }
-})
-
-vi.mock('react-sortablejs', () => ({
-  ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+vi.mock('@/app/components/evaluation', () => ({
+  default: ({ resourceId }: { resourceId: string }) => <div data-testid="evaluation">{resourceId}</div>,
 }))
 
 const mockSnippetDetail: SnippetDetailPayload = {
@@ -179,20 +99,10 @@ const mockSnippetDetail: SnippetDetailPayload = {
     nodes: [],
     edges: [],
   },
-  inputFields: [
-    {
-      type: PipelineInputVarType.textInput,
-      label: 'Blog URL',
-      variable: 'blog_url',
-      required: true,
-      options: [],
-      placeholder: 'Paste a source article URL',
-      max_length: 256,
-    },
-  ],
+  inputFields: [],
   uiMeta: {
-    inputFieldCount: 1,
-    checklistCount: 2,
+    inputFieldCount: 0,
+    checklistCount: 0,
     autoSavedAt: 'Auto-saved · a few seconds ago',
   },
 }
@@ -200,55 +110,23 @@ const mockSnippetDetail: SnippetDetailPayload = {
 describe('SnippetPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    useSnippetDetailStore.getState().reset()
-    mockPublishSnippetMutateAsync.mockResolvedValue(undefined)
     mockUseSnippetInit.mockReturnValue({
       data: mockSnippetDetail,
       isLoading: false,
     })
   })
 
-  it('should render the snippet detail shell', () => {
+  it('should render the orchestrate route shell with independent main content', () => {
     render(<SnippetPage snippetId="snippet-1" />)
 
-    expect(screen.getByText('Tone Rewriter')).toBeInTheDocument()
-    expect(screen.getByText('A static snippet mock.')).toBeInTheDocument()
     expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
+    expect(screen.getByTestId('snippet-info')).toBeInTheDocument()
     expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
     expect(screen.getByTestId('workflow-default-context')).toBeInTheDocument()
-    expect(screen.getByTestId('workflow-inner-context')).toBeInTheDocument()
-    expect(screen.getByTestId('workflow-viewport-zoom').textContent).toBe('1')
+    expect(screen.getByTestId('snippet-main')).toHaveTextContent('snippet-1')
   })
 
-  it('should open the input field panel and editor', () => {
-    render(<SnippetPage snippetId="snippet-1" />)
-
-    fireEvent.click(screen.getAllByRole('button', { name: /snippet\.inputFieldButton/i })[0])
-    expect(screen.getAllByText('snippet.panelTitle').length).toBeGreaterThan(0)
-
-    fireEvent.click(screen.getAllByRole('button', { name: /datasetPipeline\.inputFieldPanel\.addInputField/i })[0])
-    expect(screen.getAllByText('datasetPipeline.inputFieldPanel.addInputField').length).toBeGreaterThan(1)
-  })
-
-  it('should toggle the publish menu', () => {
-    render(<SnippetPage snippetId="snippet-1" />)
-
-    fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
-    expect(screen.getByText('snippet.publishMenuCurrentDraft')).toBeInTheDocument()
-  })
-
-  it('should publish the snippet when clicking publish in the menu', async () => {
-    render(<SnippetPage snippetId="snippet-1" />)
-
-    fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
-    fireEvent.click(screen.getAllByRole('button', { name: /snippet\.publishButton/i })[1])
-
-    expect(mockPublishSnippetMutateAsync).toHaveBeenCalledWith({
-      params: { snippetId: 'snippet-1' },
-    })
-  })
-
-  it('should render loading fallback when snippet data is unavailable', () => {
+  it('should render loading fallback when orchestrate data is unavailable', () => {
     mockUseSnippetInit.mockReturnValue({
       data: null,
       isLoading: false,
diff --git a/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
new file mode 100644
index 0000000000..21595ac963
--- /dev/null
+++ b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
@@ -0,0 +1,107 @@
+import type { Snippet } from '@/types/snippet'
+import { render, screen } from '@testing-library/react'
+import SnippetEvaluationPage from '../snippet-evaluation-page'
+
+const mockUseSnippetApiDetail = vi.fn()
+const mockSetAppSidebarExpand = vi.fn()
+
+vi.mock('@/service/use-snippets', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/use-snippets')>()
+
+  return {
+    ...actual,
+    useSnippetApiDetail: (snippetId: string) => mockUseSnippetApiDetail(snippetId),
+    useUpdateSnippetMutation: () => ({
+      mutate: vi.fn(),
+      isPending: false,
+    }),
+    useExportSnippetMutation: () => ({
+      mutateAsync: vi.fn(),
+      isPending: false,
+    }),
+    useDeleteSnippetMutation: () => ({
+      mutate: vi.fn(),
+      isPending: false,
+    }),
+  }
+})
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+    push: vi.fn(),
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: { mobile: 'mobile', desktop: 'desktop' },
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (modeState: string) => React.ReactNode
+    renderNavigation?: (modeState: string) => React.ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      <div data-testid="app-sidebar-header">{renderHeader?.('expand')}</div>
+      <div data-testid="app-sidebar-navigation">{renderNavigation?.('expand')}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name, onClick }: { name: string, onClick?: () => void }) => (
+    <button type="button" onClick={onClick}>{name}</button>
+  ),
+}))
+
+vi.mock('@/app/components/evaluation', () => ({
+  default: ({ resourceId }: { resourceId: string }) => <div data-testid="evaluation">{resourceId}</div>,
+}))
+
+const mockSnippetApiDetail: Snippet = {
+  id: 'snippet-1',
+  name: 'Tone Rewriter',
+  description: 'A static snippet mock.',
+  type: 'node',
+  is_published: false,
+  version: 'draft',
+  use_count: 19,
+  icon_info: {
+    icon_type: 'emoji',
+    icon: '🪄',
+    icon_background: '#E0EAFF',
+  },
+  input_fields: [],
+  created_at: 1_711_609_600,
+  updated_at: 1_711_616_800,
+  author: 'Evan',
+}
+
+describe('SnippetEvaluationPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSnippetApiDetail.mockReturnValue({
+      data: mockSnippetApiDetail,
+      isLoading: false,
+    })
+  })
+
+  it('should fetch evaluation route data independently from snippet init', () => {
+    render(<SnippetEvaluationPage snippetId="snippet-1" />)
+
+    expect(mockUseSnippetApiDetail).toHaveBeenCalledWith('snippet-1')
+    expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
+    expect(screen.getByTestId('evaluation')).toHaveTextContent('snippet-1')
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
index ff3a3961ef..c6a6b5a231 100644
--- a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -1,10 +1,9 @@
 import type { WorkflowProps } from '@/app/components/workflow'
-import type { SnippetDetailPayload, SnippetInputField, SnippetSection } from '@/models/snippet'
+import type { SnippetDetailPayload, SnippetInputField } from '@/models/snippet'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { PipelineInputVarType } from '@/models/pipeline'
 import SnippetMain from '../snippet-main'
 
-const mockSetAppSidebarExpand = vi.fn()
 const mockSyncInputFieldsDraft = vi.fn()
 const mockCloseEditor = vi.fn()
 const mockOpenEditor = vi.fn()
@@ -40,17 +39,6 @@ const mockInspectVarsCrud = {
 }
 let capturedHooksStore: Record<string, unknown> | undefined
 
-vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => 'desktop',
-  MediaType: { mobile: 'mobile', desktop: 'desktop' },
-}))
-
-vi.mock('@/app/components/app/store', () => ({
-  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
-    setAppSidebarExpand: mockSetAppSidebarExpand,
-  }),
-}))
-
 vi.mock('@/app/components/snippets/store', () => ({
   useSnippetDetailStore: (selector: (state: {
     editingField: SnippetInputField | null
@@ -135,33 +123,6 @@ vi.mock('@/app/components/snippets/hooks/use-snippet-start-run', () => ({
   }),
 }))
 
-vi.mock('@/app/components/app-sidebar', () => ({
-  default: ({
-    renderHeader,
-    renderNavigation,
-  }: {
-    renderHeader?: (modeState: string) => React.ReactNode
-    renderNavigation?: (modeState: string) => React.ReactNode
-  }) => (
-    <div data-testid="app-sidebar">
-      <div>{renderHeader?.('expand')}</div>
-      <div>{renderNavigation?.('expand')}</div>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/app-sidebar/nav-link', () => ({
-  default: ({ name }: { name: string }) => <div>{name}</div>,
-}))
-
-vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
-  default: () => <div data-testid="snippet-info" />,
-}))
-
-vi.mock('@/app/components/evaluation', () => ({
-  default: () => <div data-testid="evaluation" />,
-}))
-
 vi.mock('@/app/components/workflow', () => ({
   WorkflowWithInnerContext: ({
     children,
@@ -237,12 +198,11 @@ const payload: SnippetDetailPayload = {
   },
 }
 
-const renderSnippetMain = (section: SnippetSection = 'orchestrate') => {
+const renderSnippetMain = () => {
   return render(
     <SnippetMain
       payload={payload}
       snippetId="snippet-1"
-      section={section}
       nodes={[] as WorkflowProps['nodes']}
       edges={[] as WorkflowProps['edges']}
       viewport={{ x: 0, y: 0, zoom: 1 }}
diff --git a/web/app/components/snippets/components/hooks/use-snippet-publish.ts b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
index 1dd0612e14..29dbfb03d2 100644
--- a/web/app/components/snippets/components/hooks/use-snippet-publish.ts
+++ b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
@@ -1,4 +1,3 @@
-import type { SnippetSection } from '@/models/snippet'
 import { useKeyPress } from 'ahooks'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,12 +9,10 @@ import { useSnippetDetailStore } from '../../store'
 
 type UseSnippetPublishOptions = {
   snippetId: string
-  section: SnippetSection
 }
 
 export const useSnippetPublish = ({
   snippetId,
-  section,
 }: UseSnippetPublishOptions) => {
   const { t } = useTranslation('snippet')
   const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
@@ -41,7 +38,7 @@ export const useSnippetPublish = ({
   }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t])
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (event) => {
-    if (section !== 'orchestrate' || publishSnippetMutation.isPending)
+    if (publishSnippetMutation.isPending)
       return
 
     event.preventDefault()
diff --git a/web/app/components/snippets/components/snippet-layout.tsx b/web/app/components/snippets/components/snippet-layout.tsx
new file mode 100644
index 0000000000..37900f3969
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-layout.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
+import type { SnippetDetail, SnippetSection } from '@/models/snippet'
+import {
+  RiFlaskFill,
+  RiFlaskLine,
+  RiTerminalWindowFill,
+  RiTerminalWindowLine,
+} from '@remixicon/react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppSideBar from '@/app/components/app-sidebar'
+import NavLink from '@/app/components/app-sidebar/nav-link'
+import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+
+type SnippetLayoutProps = {
+  children: ReactNode
+  section: SnippetSection
+  snippet: SnippetDetail
+  snippetId: string
+}
+
+const ORCHESTRATE_ICONS: { normal: NavIcon, selected: NavIcon } = {
+  normal: RiTerminalWindowLine,
+  selected: RiTerminalWindowFill,
+}
+
+const EVALUATION_ICONS: { normal: NavIcon, selected: NavIcon } = {
+  normal: RiFlaskLine,
+  selected: RiFlaskFill,
+}
+
+const SnippetLayout = ({
+  children,
+  section,
+  snippet,
+  snippetId,
+}: SnippetLayoutProps) => {
+  const { t } = useTranslation('snippet')
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
+
+  useEffect(() => {
+    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+    const mode = isMobile ? 'collapse' : 'expand'
+    setAppSidebarExpand(isMobile ? mode : localeMode)
+  }, [isMobile, setAppSidebarExpand])
+
+  return (
+    <div className="relative flex h-full overflow-hidden bg-background-body">
+      <AppSideBar
+        navigation={[]}
+        renderHeader={mode => <SnippetInfo expand={mode === 'expand'} snippet={snippet} />}
+        renderNavigation={mode => (
+          <>
+            <NavLink
+              mode={mode}
+              name={t('sectionOrchestrate')}
+              iconMap={ORCHESTRATE_ICONS}
+              href={`/snippets/${snippetId}/orchestrate`}
+              active={section === 'orchestrate'}
+            />
+            <NavLink
+              mode={mode}
+              name={t('sectionEvaluation')}
+              iconMap={EVALUATION_ICONS}
+              href={`/snippets/${snippetId}/evaluation`}
+              active={section === 'evaluation'}
+            />
+          </>
+        )}
+      />
+
+      <div className="relative min-h-0 min-w-0 grow overflow-hidden">
+        <div className="absolute inset-0 min-h-0 min-w-0 overflow-hidden">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SnippetLayout
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index 46740c344a..f65ec8c6f8 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -1,29 +1,15 @@
 'use client'
 
-import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
 import type { WorkflowProps } from '@/app/components/workflow'
-import type { SnippetDetailPayload, SnippetSection } from '@/models/snippet'
-import {
-  RiFlaskFill,
-  RiFlaskLine,
-  RiTerminalWindowFill,
-  RiTerminalWindowLine,
-} from '@remixicon/react'
+import type { SnippetDetailPayload } from '@/models/snippet'
 import {
   useEffect,
   useMemo,
 } from 'react'
-import { useTranslation } from 'react-i18next'
-import AppSideBar from '@/app/components/app-sidebar'
-import NavLink from '@/app/components/app-sidebar/nav-link'
-import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import Evaluation from '@/app/components/evaluation'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
 import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
 import { BlockEnum } from '@/app/components/workflow/types'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useConfigsMap } from '../hooks/use-configs-map'
 import { useInspectVarsCrud } from '../hooks/use-inspect-vars-crud'
 import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
@@ -38,31 +24,16 @@ import SnippetChildren from './snippet-children'
 type SnippetMainProps = {
   payload: SnippetDetailPayload
   snippetId: string
-  section: SnippetSection
 } & Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
 
-const ORCHESTRATE_ICONS: { normal: NavIcon, selected: NavIcon } = {
-  normal: RiTerminalWindowLine,
-  selected: RiTerminalWindowFill,
-}
-
-const EVALUATION_ICONS: { normal: NavIcon, selected: NavIcon } = {
-  normal: RiFlaskLine,
-  selected: RiFlaskFill,
-}
-
 const SnippetMain = ({
   payload,
   snippetId,
-  section,
   nodes,
   edges,
   viewport,
 }: SnippetMainProps) => {
-  const { t } = useTranslation('snippet')
-  const { graph, snippet, uiMeta } = payload
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
+  const { graph, uiMeta } = payload
   const {
     doSyncWorkflowDraft,
     syncWorkflowDraftWhenPageClose,
@@ -114,7 +85,6 @@ const SnippetMain = ({
       nodesMap,
     }
   }, [workflowAvailableNodesMetaData])
-  const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
   const reset = useSnippetDetailStore(state => state.reset)
   const {
     editingField,
@@ -139,7 +109,6 @@ const SnippetMain = ({
     setPublishMenuOpen,
   } = useSnippetPublish({
     snippetId,
-    section,
   })
   const {
     handleStartWorkflowRun,
@@ -153,12 +122,6 @@ const SnippetMain = ({
     reset()
   }, [reset, snippetId])
 
-  useEffect(() => {
-    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
-    const mode = isMobile ? 'collapse' : 'expand'
-    setAppSidebarExpand(isMobile ? mode : localeMode)
-  }, [isMobile, setAppSidebarExpand])
-
   const hooksStore = useMemo(() => {
     return {
       doSyncWorkflowDraft,
@@ -220,67 +183,32 @@ const SnippetMain = ({
   ])
 
   return (
-    <div className="relative flex h-full overflow-hidden bg-background-body">
-      <AppSideBar
-        navigation={[]}
-        renderHeader={mode => <SnippetInfo expand={mode === 'expand'} snippet={snippet} />}
-        renderNavigation={mode => (
-          <>
-            <NavLink
-              mode={mode}
-              name={t('sectionOrchestrate')}
-              iconMap={ORCHESTRATE_ICONS}
-              href={`/snippets/${snippetId}/orchestrate`}
-              active={section === 'orchestrate'}
-            />
-            <NavLink
-              mode={mode}
-              name={t('sectionEvaluation')}
-              iconMap={EVALUATION_ICONS}
-              href={`/snippets/${snippetId}/evaluation`}
-              active={section === 'evaluation'}
-            />
-          </>
-        )}
+    <WorkflowWithInnerContext
+      nodes={nodes}
+      edges={edges}
+      viewport={viewport ?? graph.viewport}
+      hooksStore={hooksStore as any}
+    >
+      <SnippetChildren
+        snippetId={snippetId}
+        fields={fields}
+        uiMeta={uiMeta}
+        editingField={editingField}
+        isEditorOpen={isEditorOpen}
+        isInputPanelOpen={isInputPanelOpen}
+        isPublishMenuOpen={isPublishMenuOpen}
+        isPublishing={isPublishing}
+        onToggleInputPanel={handleToggleInputPanel}
+        onPublishMenuOpenChange={setPublishMenuOpen}
+        onCloseInputPanel={handleCloseInputPanel}
+        onPublish={handlePublish}
+        onOpenEditor={openEditor}
+        onCloseEditor={closeEditor}
+        onSubmitField={handleSubmitField}
+        onRemoveField={handleRemoveField}
+        onSortChange={handleSortChange}
       />
-
-      <div className="relative min-h-0 min-w-0 grow overflow-hidden">
-        <div className="absolute inset-0 min-h-0 min-w-0 overflow-hidden">
-          {section === 'evaluation'
-            ? (
-                <Evaluation resourceType="snippet" resourceId={snippetId} />
-              )
-            : (
-                <WorkflowWithInnerContext
-                  nodes={nodes}
-                  edges={edges}
-                  viewport={viewport ?? graph.viewport}
-                  hooksStore={hooksStore as any}
-                >
-                  <SnippetChildren
-                    snippetId={snippetId}
-                    fields={fields}
-                    uiMeta={uiMeta}
-                    editingField={editingField}
-                    isEditorOpen={isEditorOpen}
-                    isInputPanelOpen={isInputPanelOpen}
-                    isPublishMenuOpen={isPublishMenuOpen}
-                    isPublishing={isPublishing}
-                    onToggleInputPanel={handleToggleInputPanel}
-                    onPublishMenuOpenChange={setPublishMenuOpen}
-                    onCloseInputPanel={handleCloseInputPanel}
-                    onPublish={handlePublish}
-                    onOpenEditor={openEditor}
-                    onCloseEditor={closeEditor}
-                    onSubmitField={handleSubmitField}
-                    onRemoveField={handleRemoveField}
-                    onSortChange={handleSortChange}
-                  />
-                </WorkflowWithInnerContext>
-              )}
-        </div>
-      </div>
-    </div>
+    </WorkflowWithInnerContext>
   )
 }
 
diff --git a/web/app/components/snippets/index.tsx b/web/app/components/snippets/index.tsx
index 706fdf7a27..6d3bcb570e 100644
--- a/web/app/components/snippets/index.tsx
+++ b/web/app/components/snippets/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import type { SnippetSection } from '@/models/snippet'
 import { useMemo } from 'react'
 import Loading from '@/app/components/base/loading'
 import WorkflowWithDefaultContext from '@/app/components/workflow'
@@ -9,18 +8,23 @@ import {
   initialEdges,
   initialNodes,
 } from '@/app/components/workflow/utils'
+import SnippetLayout from './components/snippet-layout'
 import SnippetMain from './components/snippet-main'
 import { useSnippetInit } from './hooks/use-snippet-init'
 
 type SnippetPageProps = {
   snippetId: string
-  section?: SnippetSection
 }
 
-const SnippetPage = ({
-  snippetId,
-  section = 'orchestrate',
-}: SnippetPageProps) => {
+const SnippetPageLoading = () => {
+  return (
+    <div className="flex h-full items-center justify-center bg-background-body">
+      <Loading />
+    </div>
+  )
+}
+
+const SnippetPage = ({ snippetId }: SnippetPageProps) => {
   const { data, isLoading } = useSnippetInit(snippetId)
   const nodesData = useMemo(() => {
     if (!data)
@@ -36,35 +40,36 @@ const SnippetPage = ({
   }, [data])
 
   if (!data || isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center bg-background-body">
-        <Loading />
-      </div>
-    )
+    return <SnippetPageLoading />
   }
 
   return (
-    <WorkflowWithDefaultContext
-      edges={edgesData}
-      nodes={nodesData}
+    <SnippetLayout
+      snippetId={snippetId}
+      snippet={data.snippet}
+      section="orchestrate"
     >
-      <SnippetMain
-        key={snippetId}
-        snippetId={snippetId}
-        section={section}
-        payload={data}
-        nodes={nodesData}
+      <WorkflowWithDefaultContext
         edges={edgesData}
-        viewport={data.graph.viewport}
-      />
-    </WorkflowWithDefaultContext>
+        nodes={nodesData}
+      >
+        <SnippetMain
+          key={snippetId}
+          snippetId={snippetId}
+          payload={data}
+          nodes={nodesData}
+          edges={edgesData}
+          viewport={data.graph.viewport}
+        />
+      </WorkflowWithDefaultContext>
+    </SnippetLayout>
   )
 }
 
-const SnippetPageWrapper = (props: SnippetPageProps) => {
+const SnippetPageWrapper = ({ snippetId }: SnippetPageProps) => {
   return (
     <WorkflowContextProvider>
-      <SnippetPage {...props} />
+      <SnippetPage snippetId={snippetId} />
     </WorkflowContextProvider>
   )
 }
diff --git a/web/app/components/snippets/snippet-evaluation-page.tsx b/web/app/components/snippets/snippet-evaluation-page.tsx
new file mode 100644
index 0000000000..e52c857b3d
--- /dev/null
+++ b/web/app/components/snippets/snippet-evaluation-page.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import { useMemo } from 'react'
+import Loading from '@/app/components/base/loading'
+import Evaluation from '@/app/components/evaluation'
+import { buildSnippetDetailPayload, useSnippetApiDetail } from '@/service/use-snippets'
+import { getSnippetDetailMock } from '@/service/use-snippets.mock'
+import SnippetLayout from './components/snippet-layout'
+
+type SnippetEvaluationPageProps = {
+  snippetId: string
+}
+
+const SnippetEvaluationPage = ({ snippetId }: SnippetEvaluationPageProps) => {
+  const snippetApiDetail = useSnippetApiDetail(snippetId)
+  const mockSnippet = useMemo(() => getSnippetDetailMock(snippetId)?.snippet, [snippetId])
+  const snippet = useMemo(() => {
+    if (snippetApiDetail.data)
+      return buildSnippetDetailPayload(snippetApiDetail.data).snippet
+
+    if (!snippetApiDetail.isLoading)
+      return mockSnippet
+
+    return undefined
+  }, [mockSnippet, snippetApiDetail.data, snippetApiDetail.isLoading])
+
+  if (!snippet || snippetApiDetail.isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background-body">
+        <Loading />
+      </div>
+    )
+  }
+
+  return (
+    <SnippetLayout
+      snippetId={snippetId}
+      snippet={snippet}
+      section="evaluation"
+    >
+      <Evaluation resourceType="snippet" resourceId={snippetId} />
+    </SnippetLayout>
+  )
+}
+
+export default SnippetEvaluationPage

From ca88516d54ddf2ad39864123a845e5d527995eaf Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 30 Mar 2026 11:06:41 +0800
Subject: [PATCH 041/108] refactor(web): refactor evaluation page

---
 .../components/batch-test-panel.tsx           | 164 +++
 .../evaluation/components/condition-group.tsx | 344 ++++++
 .../components/conditions-section.tsx         |  51 +
 .../components/custom-metric-editor.tsx       | 151 +++
 .../components/judge-model-selector.tsx       |  43 +
 .../evaluation/components/metric-section.tsx  |  63 ++
 .../evaluation/components/metric-selector.tsx | 181 ++++
 .../evaluation/components/section-header.tsx  |  27 +
 web/app/components/evaluation/index.tsx       | 992 +-----------------
 web/app/components/evaluation/store-utils.ts  | 183 ++++
 web/app/components/evaluation/store.ts        | 732 ++++---------
 web/app/components/evaluation/types.ts        |   5 +
 web/app/components/evaluation/utils.ts        |  60 ++
 .../__tests__/use-snippet-publish.spec.ts     |   4 -
 14 files changed, 1514 insertions(+), 1486 deletions(-)
 create mode 100644 web/app/components/evaluation/components/batch-test-panel.tsx
 create mode 100644 web/app/components/evaluation/components/condition-group.tsx
 create mode 100644 web/app/components/evaluation/components/conditions-section.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor.tsx
 create mode 100644 web/app/components/evaluation/components/judge-model-selector.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector.tsx
 create mode 100644 web/app/components/evaluation/components/section-header.tsx
 create mode 100644 web/app/components/evaluation/store-utils.ts
 create mode 100644 web/app/components/evaluation/utils.ts

diff --git a/web/app/components/evaluation/components/batch-test-panel.tsx b/web/app/components/evaluation/components/batch-test-panel.tsx
new file mode 100644
index 0000000000..4a03de1b38
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel.tsx
@@ -0,0 +1,164 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../types'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from '../mock'
+import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../store'
+import { TAB_CLASS_NAME } from '../utils'
+
+const BatchTestPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const tabLabels = {
+    'input-fields': t('batch.tabs.input-fields'),
+    'history': t('batch.tabs.history'),
+  }
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const isRunnable = isEvaluationRunnable(resource)
+
+  const handleDownloadTemplate = () => {
+    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = config.templateFileName
+    link.click()
+  }
+
+  const handleRun = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    runBatchTest(resourceType, resourceId)
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-components-card-bg">
+      <div className="border-b border-divider-subtle p-5">
+        <div className="flex items-center gap-2 text-text-primary system-md-semibold">
+          <span aria-hidden="true" className="i-ri-flask-line h-5 w-5" />
+          {t('batch.title')}
+        </div>
+        <div className="mt-2 rounded-xl border border-divider-subtle bg-background-default-subtle p-3">
+          <div className="text-text-primary system-sm-semibold">{t('batch.noticeTitle')}</div>
+          <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
+        </div>
+        <div className="mt-4 flex rounded-xl border border-divider-subtle bg-background-default-subtle p-1">
+          {(['input-fields', 'history'] as const).map(tab => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                TAB_CLASS_NAME,
+                resource.activeBatchTab === tab ? 'bg-components-card-bg text-text-primary shadow-xs' : 'text-text-tertiary',
+              )}
+              onClick={() => setBatchTab(resourceType, resourceId, tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto p-5">
+        {resource.activeBatchTab === 'input-fields' && (
+          <div className="space-y-5">
+            <div>
+              <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('batch.requirementsTitle')}</div>
+              <div className="space-y-2">
+                {config.batchRequirements.map(requirement => (
+                  <div key={requirement} className="flex gap-2 text-text-tertiary system-sm-regular">
+                    <span className="mt-1 h-1.5 w-1.5 rounded-full bg-text-quaternary" />
+                    <span>{requirement}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="space-y-3">
+              <Button variant="secondary" className="w-full justify-center" onClick={handleDownloadTemplate}>
+                <span aria-hidden="true" className="i-ri-download-line mr-1 h-4 w-4" />
+                {t('batch.downloadTemplate')}
+              </Button>
+              <input
+                ref={fileInputRef}
+                hidden
+                type="file"
+                accept=".csv,.xlsx"
+                onChange={(event) => {
+                  const file = event.target.files?.[0]
+                  setUploadedFileName(resourceType, resourceId, file?.name ?? null)
+                }}
+              />
+              <button
+                type="button"
+                className="flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
+                <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
+                <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
+              </button>
+            </div>
+            {!isRunnable && (
+              <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
+                {t('batch.validation')}
+              </div>
+            )}
+            <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
+              {t('batch.run')}
+            </Button>
+          </div>
+        )}
+        {resource.activeBatchTab === 'history' && (
+          <div className="space-y-3">
+            {resource.batchRecords.length === 0 && (
+              <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary system-sm-regular">
+                {t('batch.emptyHistory')}
+              </div>
+            )}
+            {resource.batchRecords.map(record => (
+              <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-text-primary system-sm-semibold">{record.summary}</div>
+                    <div className="mt-1 text-text-tertiary system-xs-regular">{record.fileName}</div>
+                  </div>
+                  <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
+                    {record.status === 'running'
+                      ? (
+                          <span className="flex items-center gap-1">
+                            <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
+                            {statusLabels.running}
+                          </span>
+                        )
+                      : statusLabels[record.status]}
+                  </Badge>
+                </div>
+                <div className="mt-3 text-text-tertiary system-xs-regular">{record.startedAt}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default BatchTestPanel
diff --git a/web/app/components/evaluation/components/condition-group.tsx b/web/app/components/evaluation/components/condition-group.tsx
new file mode 100644
index 0000000000..a678776054
--- /dev/null
+++ b/web/app/components/evaluation/components/condition-group.tsx
@@ -0,0 +1,344 @@
+'use client'
+
+import type {
+  ComparisonOperator,
+  EvaluationFieldOption,
+  EvaluationResourceProps,
+  JudgmentConditionGroup,
+} from '../types'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
+import dayjs from '@/app/components/base/date-and-time-picker/utils/dayjs'
+import Input from '@/app/components/base/input'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/app/components/base/ui/select'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from '../mock'
+import { getAllowedOperators, requiresConditionValue, useEvaluationStore } from '../store'
+import { getFieldTypeIconClassName, getOperatorLabel, groupFieldOptions } from '../utils'
+
+type ConditionFieldLabelProps = {
+  field?: EvaluationFieldOption
+  placeholder: string
+}
+
+type ConditionFieldSelectProps = {
+  field?: EvaluationFieldOption
+  fieldOptions: EvaluationFieldOption[]
+  placeholder: string
+  onChange: (fieldId: string) => void
+}
+
+type ConditionOperatorSelectProps = {
+  field?: EvaluationFieldOption
+  operator: ComparisonOperator
+  operators: ComparisonOperator[]
+  onChange: (operator: ComparisonOperator) => void
+}
+
+type FieldValueInputProps = {
+  field?: EvaluationFieldOption
+  operator: ComparisonOperator
+  value: string | number | boolean | null
+  onChange: (value: string | number | boolean | null) => void
+}
+
+type ConditionGroupProps = EvaluationResourceProps & {
+  group: JudgmentConditionGroup
+  index: number
+}
+
+const ConditionFieldLabel = ({
+  field,
+  placeholder,
+}: ConditionFieldLabelProps) => {
+  if (!field)
+    return <span className="px-1 text-components-input-text-placeholder system-sm-regular">{placeholder}</span>
+
+  return (
+    <div className="flex min-w-0 items-center gap-2 px-1">
+      <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-[5px] pr-1.5 shadow-xs">
+        <span className={cn(getFieldTypeIconClassName(field.type), 'h-3 w-3 shrink-0 text-text-secondary')} />
+        <span className="truncate text-text-secondary system-xs-medium">{field.label}</span>
+      </div>
+      <span className="shrink-0 text-text-tertiary system-xs-regular">{field.type}</span>
+    </div>
+  )
+}
+
+const ConditionFieldSelect = ({
+  field,
+  fieldOptions,
+  placeholder,
+  onChange,
+}: ConditionFieldSelectProps) => {
+  return (
+    <Select value={field?.id ?? ''} onValueChange={value => value && onChange(value)}>
+      <SelectTrigger className="h-auto bg-transparent px-1 py-1 hover:bg-transparent focus-visible:bg-transparent">
+        <ConditionFieldLabel field={field} placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent popupClassName="w-[320px]">
+        {groupFieldOptions(fieldOptions).map(([groupName, fields]) => (
+          <SelectGroup key={groupName}>
+            <SelectGroupLabel className="px-3 pb-1 pt-2 text-text-tertiary system-xs-medium-uppercase">{groupName}</SelectGroupLabel>
+            {fields.map(option => (
+              <SelectItem key={option.id} value={option.id}>
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className={cn(getFieldTypeIconClassName(option.type), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
+                  <span className="truncate">{option.label}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const ConditionOperatorSelect = ({
+  field,
+  operator,
+  operators,
+  onChange,
+}: ConditionOperatorSelectProps) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
+      <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+        <span className="truncate text-text-secondary system-xs-medium">{getOperatorLabel(operator, field?.type, t)}</span>
+      </SelectTrigger>
+      <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
+        {operators.map(nextOperator => (
+          <SelectItem key={nextOperator} value={nextOperator}>
+            {getOperatorLabel(nextOperator, field?.type, t)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const FieldValueInput = ({
+  field,
+  operator,
+  value,
+  onChange,
+}: FieldValueInputProps) => {
+  const { t } = useTranslation('evaluation')
+
+  if (!field || !requiresConditionValue(operator))
+    return null
+
+  if (field.type === 'time') {
+    const selectedTime = typeof value === 'string' && value ? dayjs(value) : undefined
+
+    return (
+      <div className="px-2 py-1.5">
+        <DatePicker
+          value={selectedTime}
+          onChange={date => onChange(date ? date.toISOString() : null)}
+          onClear={() => onChange(null)}
+          placeholder={t('conditions.selectTime')}
+          triggerWrapClassName="w-full"
+          popupZIndexClassname="z-[1002]"
+          renderTrigger={({ handleClickTrigger }) => (
+            <button
+              type="button"
+              className="group flex w-full items-center gap-2 rounded-md px-1 py-1 text-left hover:bg-state-base-hover-alt"
+              onClick={handleClickTrigger}
+            >
+              <span
+                className={cn(
+                  'min-w-0 flex-1 truncate system-sm-regular',
+                  selectedTime ? 'text-text-secondary' : 'text-components-input-text-placeholder',
+                )}
+              >
+                {selectedTime ? selectedTime.format('MMM D, YYYY h:mm A') : t('conditions.selectTime')}
+              </span>
+              <span className="i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary" />
+            </button>
+          )}
+        />
+      </div>
+    )
+  }
+
+  if (field.type === 'boolean') {
+    return (
+      <div className="px-2 py-1.5">
+        <Select value={value === null ? '' : String(value)} onValueChange={nextValue => onChange(nextValue === 'true')}>
+          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+            <SelectValue placeholder={t('conditions.selectValue')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">{t('conditions.boolean.true')}</SelectItem>
+            <SelectItem value="false">{t('conditions.boolean.false')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  if (field.type === 'enum') {
+    return (
+      <div className="px-2 py-1.5">
+        <Select value={typeof value === 'string' ? value : ''} onValueChange={nextValue => onChange(nextValue)}>
+          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+            <SelectValue placeholder={t('conditions.selectValue')} />
+          </SelectTrigger>
+          <SelectContent>
+            {(field.options ?? []).map(option => (
+              <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-2 py-1.5">
+      <Input
+        type={field.type === 'number' ? 'number' : 'text'}
+        value={value === null || typeof value === 'boolean' ? '' : value}
+        className="border-none bg-transparent shadow-none hover:border-none hover:bg-state-base-hover-alt focus:border-none focus:bg-state-base-hover-alt focus:shadow-none"
+        placeholder={t('conditions.valuePlaceholder')}
+        onChange={(e) => {
+          if (field.type === 'number') {
+            const nextValue = e.target.value
+            onChange(nextValue === '' ? null : Number(nextValue))
+            return
+          }
+
+          onChange(e.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+const ConditionGroup = ({
+  resourceType,
+  resourceId,
+  group,
+  index,
+}: ConditionGroupProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const logicalLabels = {
+    and: t('conditions.logical.and'),
+    or: t('conditions.logical.or'),
+  }
+  const removeConditionGroup = useEvaluationStore(state => state.removeConditionGroup)
+  const setConditionGroupOperator = useEvaluationStore(state => state.setConditionGroupOperator)
+  const addConditionItem = useEvaluationStore(state => state.addConditionItem)
+  const removeConditionItem = useEvaluationStore(state => state.removeConditionItem)
+  const updateConditionField = useEvaluationStore(state => state.updateConditionField)
+  const updateConditionOperator = useEvaluationStore(state => state.updateConditionOperator)
+  const updateConditionValue = useEvaluationStore(state => state.updateConditionValue)
+
+  return (
+    <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <Badge>{t('conditions.groupLabel', { index: index + 1 })}</Badge>
+          <div className="flex rounded-lg border border-divider-subtle bg-background-default-subtle p-1">
+            {(['and', 'or'] as const).map(operator => (
+              <button
+                key={operator}
+                type="button"
+                className={cn(
+                  'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
+                  group.logicalOperator === operator
+                    ? 'bg-components-card-bg text-text-primary shadow-xs'
+                    : 'text-text-tertiary',
+                )}
+                onClick={() => setConditionGroupOperator(resourceType, resourceId, group.id, operator)}
+              >
+                {logicalLabels[operator]}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="small" variant="ghost" onClick={() => addConditionItem(resourceType, resourceId, group.id)}>
+            <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+            {t('conditions.addCondition')}
+          </Button>
+          <Button
+            size="small"
+            variant="ghost"
+            aria-label={t('conditions.removeGroup')}
+            onClick={() => removeConditionGroup(resourceType, resourceId, group.id)}
+          >
+            <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      <div className="space-y-3">
+        {group.items.map((item) => {
+          const field = config.fieldOptions.find(option => option.id === item.fieldId)
+          const allowedOperators = getAllowedOperators(resourceType, item.fieldId)
+          const showValue = !!field && requiresConditionValue(item.operator)
+
+          return (
+            <div key={item.id} className="flex items-start overflow-hidden rounded-lg">
+              <div className="min-w-0 flex-1 rounded-lg bg-components-input-bg-normal">
+                <div className="flex items-center gap-0 pr-1">
+                  <div className="min-w-0 flex-1 py-1">
+                    <ConditionFieldSelect
+                      field={field}
+                      fieldOptions={config.fieldOptions}
+                      placeholder={t('conditions.fieldPlaceholder')}
+                      onChange={value => updateConditionField(resourceType, resourceId, group.id, item.id, value)}
+                    />
+                  </div>
+                  <div className="h-3 w-px bg-divider-regular" />
+                  <ConditionOperatorSelect
+                    field={field}
+                    operator={item.operator}
+                    operators={allowedOperators}
+                    onChange={value => updateConditionOperator(resourceType, resourceId, group.id, item.id, value)}
+                  />
+                </div>
+                {showValue && (
+                  <div className="border-t border-divider-subtle">
+                    <FieldValueInput
+                      field={field}
+                      operator={item.operator}
+                      value={item.value}
+                      onChange={value => updateConditionValue(resourceType, resourceId, group.id, item.id, value)}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="pl-1 pt-1">
+                <Button
+                  size="small"
+                  variant="ghost"
+                  aria-label={t('conditions.removeCondition')}
+                  onClick={() => removeConditionItem(resourceType, resourceId, group.id, item.id)}
+                >
+                  <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default ConditionGroup
diff --git a/web/app/components/evaluation/components/conditions-section.tsx b/web/app/components/evaluation/components/conditions-section.tsx
new file mode 100644
index 0000000000..192ef17788
--- /dev/null
+++ b/web/app/components/evaluation/components/conditions-section.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../types'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { useEvaluationResource, useEvaluationStore } from '../store'
+import ConditionGroup from './condition-group'
+import SectionHeader from './section-header'
+
+const ConditionsSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const addConditionGroup = useEvaluationStore(state => state.addConditionGroup)
+
+  return (
+    <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
+      <SectionHeader
+        title={t('conditions.title')}
+        description={t('conditions.description')}
+        action={(
+          <Button variant="secondary" onClick={() => addConditionGroup(resourceType, resourceId)}>
+            <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+            {t('conditions.addGroup')}
+          </Button>
+        )}
+      />
+      <div className="mt-4 space-y-4">
+        {resource.conditions.length === 0 && (
+          <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center">
+            <div className="text-text-primary system-sm-semibold">{t('conditions.emptyTitle')}</div>
+            <div className="mt-1 text-text-tertiary system-sm-regular">{t('conditions.emptyDescription')}</div>
+          </div>
+        )}
+        {resource.conditions.map((group, index) => (
+          <ConditionGroup
+            key={group.id}
+            resourceType={resourceType}
+            resourceId={resourceId}
+            group={group}
+            index={index}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default ConditionsSection
diff --git a/web/app/components/evaluation/components/custom-metric-editor.tsx b/web/app/components/evaluation/components/custom-metric-editor.tsx
new file mode 100644
index 0000000000..2c35566bdd
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor.tsx
@@ -0,0 +1,151 @@
+'use client'
+
+import type { CustomMetricMapping, EvaluationMetric, EvaluationResourceProps, EvaluationResourceType } from '../types'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/app/components/base/ui/select'
+import { getEvaluationMockConfig } from '../mock'
+import { isCustomMetricConfigured, useEvaluationStore } from '../store'
+import { groupFieldOptions } from '../utils'
+
+type CustomMetricEditorProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+}
+
+type MappingRowProps = {
+  resourceType: EvaluationResourceType
+  mapping: CustomMetricMapping
+  targetOptions: Array<{ id: string, label: string }>
+  onUpdate: (patch: { sourceFieldId?: string | null, targetVariableId?: string | null }) => void
+  onRemove: () => void
+}
+
+function MappingRow({
+  resourceType,
+  mapping,
+  targetOptions,
+  onUpdate,
+  onRemove,
+}: MappingRowProps) {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+
+  return (
+    <div className="grid gap-2 rounded-xl border border-divider-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
+      <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
+        <SelectTrigger>
+          <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {groupFieldOptions(config.fieldOptions).map(([groupName, fields]) => (
+            <SelectGroup key={groupName}>
+              <SelectGroupLabel>{groupName}</SelectGroupLabel>
+              {fields.map(field => (
+                <SelectItem key={field.id} value={field.id}>{field.label}</SelectItem>
+              ))}
+            </SelectGroup>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="flex items-center justify-center text-text-quaternary">
+        <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4 -rotate-90" />
+      </div>
+      <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
+        <SelectTrigger>
+          <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {targetOptions.map(option => (
+            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button variant="ghost" size="small" aria-label={t('metrics.remove')} onClick={onRemove}>
+        <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+const CustomMetricEditor = ({
+  resourceType,
+  resourceId,
+  metric,
+}: CustomMetricEditorProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
+  const addCustomMetricMapping = useEvaluationStore(state => state.addCustomMetricMapping)
+  const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
+  const removeCustomMetricMapping = useEvaluationStore(state => state.removeCustomMetricMapping)
+  const selectedWorkflow = config.workflowOptions.find(option => option.id === metric.customConfig?.workflowId)
+  const isConfigured = isCustomMetricConfigured(metric)
+
+  if (!metric.customConfig)
+    return null
+
+  return (
+    <div className="mt-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-text-primary system-sm-semibold">{t('metrics.custom.title')}</div>
+          <div className="mt-1 text-text-tertiary system-xs-regular">{t('metrics.custom.description')}</div>
+        </div>
+        {!isConfigured && <Badge className="badge-warning">{t('metrics.custom.warningBadge')}</Badge>}
+      </div>
+      <div className="mt-4 grid gap-4 xl:grid-cols-[220px_minmax(0,1fr)]">
+        <div>
+          <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.workflowLabel')}</div>
+          <Select value={metric.customConfig.workflowId ?? ''} onValueChange={value => value && setCustomMetricWorkflow(resourceType, resourceId, metric.id, value)}>
+            <SelectTrigger>
+              <SelectValue placeholder={t('metrics.custom.workflowPlaceholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {config.workflowOptions.map(option => (
+                <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedWorkflow && <div className="mt-2 text-text-tertiary system-xs-regular">{selectedWorkflow.description}</div>}
+        </div>
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <div className="text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.mappingTitle')}</div>
+            <Button size="small" variant="ghost" onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}>
+              <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+              {t('metrics.custom.addMapping')}
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {metric.customConfig.mappings.map(mapping => (
+              <MappingRow
+                key={mapping.id}
+                resourceType={resourceType}
+                mapping={mapping}
+                targetOptions={selectedWorkflow?.targetVariables ?? []}
+                onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
+                onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
+              />
+            ))}
+          </div>
+          {!isConfigured && (
+            <div className="mt-3 rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
+              {t('metrics.custom.mappingWarning')}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CustomMetricEditor
diff --git a/web/app/components/evaluation/components/judge-model-selector.tsx b/web/app/components/evaluation/components/judge-model-selector.tsx
new file mode 100644
index 0000000000..27520e4aca
--- /dev/null
+++ b/web/app/components/evaluation/components/judge-model-selector.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../types'
+import { useEffect } from 'react'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useEvaluationResource, useEvaluationStore } from '../store'
+import { decodeModelSelection, encodeModelSelection } from '../utils'
+
+const JudgeModelSelector = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { data: modelList } = useModelList(ModelTypeEnum.textGeneration)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setJudgeModel = useEvaluationStore(state => state.setJudgeModel)
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+
+  useEffect(() => {
+    if (resource.judgeModelId || !modelList.length)
+      return
+
+    const firstProvider = modelList[0]
+    const firstModel = firstProvider.models[0]
+    if (!firstProvider || !firstModel)
+      return
+
+    setJudgeModel(resourceType, resourceId, encodeModelSelection(firstProvider.provider, firstModel.model))
+  }, [modelList, resource.judgeModelId, resourceId, resourceType, setJudgeModel])
+
+  return (
+    <ModelSelector
+      defaultModel={selectedModel}
+      modelList={modelList}
+      onSelect={model => setJudgeModel(resourceType, resourceId, encodeModelSelection(model.provider, model.model))}
+      showDeprecatedWarnIcon
+      triggerClassName="h-11"
+    />
+  )
+}
+
+export default JudgeModelSelector
diff --git a/web/app/components/evaluation/components/metric-section.tsx b/web/app/components/evaluation/components/metric-section.tsx
new file mode 100644
index 0000000000..0cb587f355
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../types'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import { useEvaluationResource, useEvaluationStore } from '../store'
+import CustomMetricEditor from './custom-metric-editor'
+import MetricSelector from './metric-selector'
+import SectionHeader from './section-header'
+
+const MetricSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+
+  return (
+    <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
+      <SectionHeader
+        title={t('metrics.title')}
+        description={t('metrics.description')}
+        action={<MetricSelector resourceType={resourceType} resourceId={resourceId} />}
+      />
+      <div className="mt-4 space-y-3">
+        {resource.metrics.map(metric => (
+          <div key={metric.id} className="rounded-2xl border border-divider-subtle p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <div className="text-text-primary system-sm-semibold">{metric.label}</div>
+                <div className="mt-1 text-text-tertiary system-xs-regular">{metric.description}</div>
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {metric.badges.map(badge => (
+                    <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
+                  ))}
+                </div>
+              </div>
+              <Button
+                size="small"
+                variant="ghost"
+                aria-label={t('metrics.remove')}
+                onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+              >
+                <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+              </Button>
+            </div>
+            {metric.kind === 'custom-workflow' && (
+              <CustomMetricEditor
+                resourceType={resourceType}
+                resourceId={resourceId}
+                metric={metric}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default MetricSection
diff --git a/web/app/components/evaluation/components/metric-selector.tsx b/web/app/components/evaluation/components/metric-selector.tsx
new file mode 100644
index 0000000000..8c9e5e413f
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector.tsx
@@ -0,0 +1,181 @@
+'use client'
+
+import type { ChangeEvent } from 'react'
+import type { EvaluationResourceProps } from '../types'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from '../mock'
+import { useEvaluationResource, useEvaluationStore } from '../store'
+
+const MetricSelector = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const metricGroupLabels = {
+    quality: t('metrics.groups.quality'),
+    operations: t('metrics.groups.operations'),
+  }
+  const metrics = useEvaluationResource(resourceType, resourceId).metrics
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [showAll, setShowAll] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const loadingTimerRef = useRef<number | null>(null)
+
+  const triggerLoading = () => {
+    if (loadingTimerRef.current)
+      window.clearTimeout(loadingTimerRef.current)
+
+    setIsLoading(true)
+    loadingTimerRef.current = window.setTimeout(() => {
+      setIsLoading(false)
+    }, 180)
+  }
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+
+    if (nextOpen) {
+      triggerLoading()
+      return
+    }
+
+    if (loadingTimerRef.current)
+      window.clearTimeout(loadingTimerRef.current)
+    setIsLoading(false)
+  }
+
+  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value)
+    if (open)
+      triggerLoading()
+  }
+
+  useEffect(() => {
+    return () => {
+      if (loadingTimerRef.current)
+        window.clearTimeout(loadingTimerRef.current)
+    }
+  }, [])
+
+  const filteredGroups = useMemo(() => {
+    const filteredMetrics = config.builtinMetrics.filter((metric) => {
+      const keyword = query.trim().toLowerCase()
+      if (!keyword)
+        return true
+
+      return metric.label.toLowerCase().includes(keyword) || metric.description.toLowerCase().includes(keyword)
+    })
+
+    const grouped = filteredMetrics.reduce<Record<string, typeof filteredMetrics>>((acc, metric) => {
+      acc[metric.group] = [...(acc[metric.group] ?? []), metric]
+      return acc
+    }, {})
+
+    return Object.entries(grouped)
+  }, [config.builtinMetrics, query])
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger className="btn btn-medium btn-secondary inline-flex items-center">
+        <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+        {t('metrics.add')}
+      </PopoverTrigger>
+      <PopoverContent popupClassName="w-[360px] p-3">
+        <div className="space-y-3">
+          <Input
+            value={query}
+            showLeftIcon
+            placeholder={t('metrics.searchPlaceholder')}
+            onChange={handleQueryChange}
+          />
+          <div className="max-h-[320px] space-y-3 overflow-y-auto pr-1">
+            {isLoading && (
+              <div className="space-y-2" data-testid="evaluation-metric-loading">
+                {['metric-skeleton-1', 'metric-skeleton-2', 'metric-skeleton-3'].map(key => (
+                  <div key={key} className="h-14 animate-pulse rounded-xl bg-background-default-subtle" />
+                ))}
+              </div>
+            )}
+            {!isLoading && filteredGroups.length === 0 && (
+              <div className="rounded-xl border border-dashed border-divider-subtle px-4 py-8 text-center text-text-tertiary system-sm-regular">
+                {t('metrics.noResults')}
+              </div>
+            )}
+            {!isLoading && filteredGroups.map(([groupName, options]) => {
+              const shownOptions = showAll ? options : options.slice(0, 2)
+              return (
+                <div key={groupName}>
+                  <div className="mb-2 text-text-tertiary system-xs-medium-uppercase">{metricGroupLabels[groupName as keyof typeof metricGroupLabels] ?? groupName}</div>
+                  <div className="space-y-2">
+                    {shownOptions.map(option => (
+                      <button
+                        key={option.id}
+                        type="button"
+                        className="w-full rounded-xl border border-divider-subtle px-3 py-3 text-left hover:border-components-button-secondary-border hover:bg-state-base-hover-alt"
+                        onClick={() => {
+                          addBuiltinMetric(resourceType, resourceId, option.id)
+                          setOpen(false)
+                        }}
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div>
+                            <div className="text-text-primary system-sm-semibold">{option.label}</div>
+                            <div className="mt-1 text-text-tertiary system-xs-regular">{option.description}</div>
+                          </div>
+                          {metrics.some(metric => metric.optionId === option.id && metric.kind === 'builtin') && (
+                            <Badge className="badge-accent">{t('metrics.added')}</Badge>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          {filteredGroups.some(([, options]) => options.length > 2) && (
+            <button
+              type="button"
+              className="flex items-center text-text-accent system-sm-medium"
+              onClick={() => setShowAll(value => !value)}
+            >
+              {showAll ? t('metrics.showLess') : t('metrics.showMore')}
+              <span
+                aria-hidden="true"
+                className={cn('i-ri-arrow-down-s-line ml-1 h-4 w-4 transition-transform', showAll && 'rotate-180')}
+              />
+            </button>
+          )}
+          <div className="border-t border-divider-subtle pt-3">
+            <Button
+              className="w-full justify-center"
+              variant="ghost-accent"
+              onClick={() => {
+                addCustomMetric(resourceType, resourceId)
+                setOpen(false)
+              }}
+            >
+              {t('metrics.addCustom')}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default MetricSelector
diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
new file mode 100644
index 0000000000..e0913b76a4
--- /dev/null
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+type SectionHeaderProps = {
+  title: string
+  description: string
+  action?: ReactNode
+}
+
+const SectionHeader = ({
+  title,
+  description,
+  action,
+}: SectionHeaderProps) => {
+  return (
+    <div className="flex flex-wrap items-start justify-between gap-3">
+      <div>
+        <div className="text-text-primary system-md-semibold">{title}</div>
+        <div className="mt-1 text-text-tertiary system-sm-regular">{description}</div>
+      </div>
+      {action}
+    </div>
+  )
+}
+
+export default SectionHeader
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
index 798e092eed..0f734ea9cc 100644
--- a/web/app/components/evaluation/index.tsx
+++ b/web/app/components/evaluation/index.tsx
@@ -1,923 +1,21 @@
 'use client'
 
-import type { TFunction } from 'i18next'
-import type { ChangeEvent, ReactNode } from 'react'
-import type {
-  ComparisonOperator,
-  CustomMetricMapping,
-  EvaluationFieldOption,
-  EvaluationMetric,
-  EvaluationResourceType,
-  JudgmentConditionGroup,
-} from './types'
-import {
-  RiAddLine,
-  RiArrowDownSLine,
-  RiCloseLine,
-  RiDeleteBinLine,
-  RiDownloadLine,
-  RiFileUploadLine,
-  RiFlaskLine,
-  RiLoader4Line,
-} from '@remixicon/react'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import type { EvaluationResourceProps } from './types'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
-import dayjs from '@/app/components/base/date-and-time-picker/utils/dayjs'
-import Input from '@/app/components/base/input'
-import Toast from '@/app/components/base/toast'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/app/components/base/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectGroupLabel,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/app/components/base/ui/select'
-import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
-import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from './mock'
-import {
-  getAllowedOperators,
-  isCustomMetricConfigured,
-  isEvaluationRunnable,
-  requiresConditionValue,
-  useEvaluationResource,
-  useEvaluationStore,
-} from './store'
-
-type EvaluationProps = {
-  resourceType: EvaluationResourceType
-  resourceId: string
-}
-
-const TAB_CLASS_NAME = 'flex-1 rounded-lg px-3 py-2 text-left system-sm-medium'
-
-const encodeModelSelection = (provider: string, model: string) => `${provider}::${model}`
-
-const decodeModelSelection = (judgeModelId: string | null) => {
-  if (!judgeModelId)
-    return undefined
-
-  const [provider, model] = judgeModelId.split('::')
-  if (!provider || !model)
-    return undefined
-
-  return { provider, model }
-}
-
-const compactOperatorLabels: Partial<Record<ComparisonOperator, string>> = {
-  is: '=',
-  is_not: '!=',
-  greater_than: '>',
-  less_than: '<',
-  greater_or_equal: '>=',
-  less_or_equal: '<=',
-}
-
-const groupFieldOptions = (fieldOptions: EvaluationFieldOption[]) => {
-  return Object.entries(fieldOptions.reduce<Record<string, EvaluationFieldOption[]>>((acc, field) => {
-    acc[field.group] = [...(acc[field.group] ?? []), field]
-    return acc
-  }, {}))
-}
-
-const getOperatorLabel = (
-  operator: ComparisonOperator,
-  fieldType: EvaluationFieldOption['type'] | undefined,
-  t: TFunction<'evaluation'>,
-) => {
-  if (fieldType === 'number' && compactOperatorLabels[operator])
-    return compactOperatorLabels[operator] as string
-
-  return t(`conditions.operators.${operator}` as const)
-}
-
-const getFieldTypeIconClassName = (fieldType: EvaluationFieldOption['type']) => {
-  if (fieldType === 'number')
-    return 'i-ri-hashtag'
-
-  if (fieldType === 'boolean')
-    return 'i-ri-checkbox-circle-line'
-
-  if (fieldType === 'enum')
-    return 'i-ri-list-check-2'
-
-  if (fieldType === 'time')
-    return 'i-ri-time-line'
-
-  return 'i-ri-text'
-}
-
-const ConditionFieldLabel = ({
-  field,
-  placeholder,
-}: {
-  field?: EvaluationFieldOption
-  placeholder: string
-}) => {
-  if (!field)
-    return <span className="px-1 text-components-input-text-placeholder system-sm-regular">{placeholder}</span>
-
-  return (
-    <div className="flex min-w-0 items-center gap-2 px-1">
-      <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-[5px] pr-1.5 shadow-xs">
-        <span className={cn(getFieldTypeIconClassName(field.type), 'h-3 w-3 shrink-0 text-text-secondary')} />
-        <span className="truncate text-text-secondary system-xs-medium">{field.label}</span>
-      </div>
-      <span className="shrink-0 text-text-tertiary system-xs-regular">{field.type}</span>
-    </div>
-  )
-}
-
-const SectionHeader = ({
-  title,
-  description,
-  action,
-}: {
-  title: string
-  description: string
-  action?: ReactNode
-}) => {
-  return (
-    <div className="flex flex-wrap items-start justify-between gap-3">
-      <div>
-        <div className="text-text-primary system-md-semibold">{title}</div>
-        <div className="mt-1 text-text-tertiary system-sm-regular">{description}</div>
-      </div>
-      {action}
-    </div>
-  )
-}
-
-const FieldValueInput = ({
-  field,
-  operator,
-  value,
-  onChange,
-}: {
-  field?: EvaluationFieldOption
-  operator: ComparisonOperator
-  value: string | number | boolean | null
-  onChange: (value: string | number | boolean | null) => void
-}) => {
-  const { t } = useTranslation('evaluation')
-
-  if (!field || !requiresConditionValue(operator))
-    return null
-
-  if (field.type === 'time') {
-    const selectedTime = typeof value === 'string' && value ? dayjs(value) : undefined
-
-    return (
-      <div className="px-2 py-1.5">
-        <DatePicker
-          value={selectedTime}
-          onChange={date => onChange(date ? date.toISOString() : null)}
-          onClear={() => onChange(null)}
-          placeholder={t('conditions.selectTime')}
-          triggerWrapClassName="w-full"
-          popupZIndexClassname="z-[1002]"
-          renderTrigger={({ handleClickTrigger }) => (
-            <button
-              type="button"
-              className="group flex w-full items-center gap-2 rounded-md px-1 py-1 text-left hover:bg-state-base-hover-alt"
-              onClick={handleClickTrigger}
-            >
-              <span className={cn(
-                'min-w-0 flex-1 truncate system-sm-regular',
-                selectedTime ? 'text-text-secondary' : 'text-components-input-text-placeholder',
-              )}
-              >
-                {selectedTime ? selectedTime.format('MMM D, YYYY h:mm A') : t('conditions.selectTime')}
-              </span>
-              <span className="i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary" />
-            </button>
-          )}
-        />
-      </div>
-    )
-  }
-
-  if (field.type === 'boolean') {
-    return (
-      <div className="px-2 py-1.5">
-        <Select value={value === null ? '' : String(value)} onValueChange={nextValue => onChange(nextValue === 'true')}>
-          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-            <SelectValue placeholder={t('conditions.selectValue')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="true">{t('conditions.boolean.true')}</SelectItem>
-            <SelectItem value="false">{t('conditions.boolean.false')}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    )
-  }
-
-  if (field.type === 'enum') {
-    return (
-      <div className="px-2 py-1.5">
-        <Select value={typeof value === 'string' ? value : ''} onValueChange={nextValue => onChange(nextValue)}>
-          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-            <SelectValue placeholder={t('conditions.selectValue')} />
-          </SelectTrigger>
-          <SelectContent>
-            {(field.options ?? []).map(option => (
-              <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    )
-  }
-
-  return (
-    <div className="px-2 py-1.5">
-      <Input
-        type={field.type === 'number' ? 'number' : 'text'}
-        value={value === null || typeof value === 'boolean' ? '' : value}
-        className="border-none bg-transparent shadow-none hover:border-none hover:bg-state-base-hover-alt focus:border-none focus:bg-state-base-hover-alt focus:shadow-none"
-        placeholder={t('conditions.valuePlaceholder')}
-        onChange={(e) => {
-          if (field.type === 'number') {
-            const nextValue = e.target.value
-            onChange(nextValue === '' ? null : Number(nextValue))
-            return
-          }
-
-          onChange(e.target.value)
-        }}
-      />
-    </div>
-  )
-}
-
-const ConditionFieldSelect = ({
-  field,
-  fieldOptions,
-  placeholder,
-  onChange,
-}: {
-  field?: EvaluationFieldOption
-  fieldOptions: EvaluationFieldOption[]
-  placeholder: string
-  onChange: (fieldId: string) => void
-}) => {
-  return (
-    <Select value={field?.id ?? ''} onValueChange={value => value && onChange(value)}>
-      <SelectTrigger className="h-auto bg-transparent px-1 py-1 hover:bg-transparent focus-visible:bg-transparent">
-        <ConditionFieldLabel field={field} placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent popupClassName="w-[320px]">
-        {groupFieldOptions(fieldOptions).map(([groupName, fields]) => (
-          <SelectGroup key={groupName}>
-            <SelectGroupLabel className="px-3 pb-1 pt-2 text-text-tertiary system-xs-medium-uppercase">{groupName}</SelectGroupLabel>
-            {fields.map(option => (
-              <SelectItem key={option.id} value={option.id}>
-                <div className="flex min-w-0 items-center gap-2">
-                  <span className={cn(getFieldTypeIconClassName(option.type), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
-                  <span className="truncate">{option.label}</span>
-                </div>
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
-const ConditionOperatorSelect = ({
-  field,
-  operator,
-  operators,
-  onChange,
-}: {
-  field?: EvaluationFieldOption
-  operator: ComparisonOperator
-  operators: ComparisonOperator[]
-  onChange: (operator: ComparisonOperator) => void
-}) => {
-  const { t } = useTranslation('evaluation')
-
-  return (
-    <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
-      <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-        <span className="truncate text-text-secondary system-xs-medium">{getOperatorLabel(operator, field?.type, t)}</span>
-      </SelectTrigger>
-      <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
-        {operators.map(nextOperator => (
-          <SelectItem key={nextOperator} value={nextOperator}>
-            {getOperatorLabel(nextOperator, field?.type, t)}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
-const JudgeModelSelector = ({
-  resourceId,
-  resourceType,
-}: EvaluationProps) => {
-  const { data: modelList } = useModelList(ModelTypeEnum.textGeneration)
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const setJudgeModel = useEvaluationStore(state => state.setJudgeModel)
-  const selectedModel = decodeModelSelection(resource.judgeModelId)
-
-  useEffect(() => {
-    if (resource.judgeModelId || !modelList.length)
-      return
-
-    const firstProvider = modelList[0]
-    const firstModel = firstProvider.models[0]
-    if (!firstProvider || !firstModel)
-      return
-
-    setJudgeModel(resourceType, resourceId, encodeModelSelection(firstProvider.provider, firstModel.model))
-  }, [modelList, resource.judgeModelId, resourceId, resourceType, setJudgeModel])
-
-  return (
-    <ModelSelector
-      defaultModel={selectedModel}
-      modelList={modelList}
-      onSelect={model => setJudgeModel(resourceType, resourceId, encodeModelSelection(model.provider, model.model))}
-      showDeprecatedWarnIcon
-      triggerClassName="h-11"
-    />
-  )
-}
-
-const MetricSelector = ({
-  resourceType,
-  resourceId,
-}: EvaluationProps) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const metricGroupLabels = {
-    quality: t('metrics.groups.quality'),
-    operations: t('metrics.groups.operations'),
-  }
-  const metrics = useEvaluationResource(resourceType, resourceId).metrics
-  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
-  const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [showAll, setShowAll] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const loadingTimerRef = useRef<number | null>(null)
-
-  const triggerLoading = () => {
-    if (loadingTimerRef.current)
-      window.clearTimeout(loadingTimerRef.current)
-
-    setIsLoading(true)
-    loadingTimerRef.current = window.setTimeout(() => {
-      setIsLoading(false)
-    }, 180)
-  }
-
-  const handleOpenChange = (nextOpen: boolean) => {
-    setOpen(nextOpen)
-
-    if (nextOpen) {
-      triggerLoading()
-      return
-    }
-
-    if (loadingTimerRef.current)
-      window.clearTimeout(loadingTimerRef.current)
-    setIsLoading(false)
-  }
-
-  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value)
-    if (open)
-      triggerLoading()
-  }
-
-  useEffect(() => {
-    return () => {
-      if (loadingTimerRef.current)
-        window.clearTimeout(loadingTimerRef.current)
-    }
-  }, [])
-
-  const filteredGroups = useMemo(() => {
-    const filteredMetrics = config.builtinMetrics.filter((metric) => {
-      const keyword = query.trim().toLowerCase()
-      if (!keyword)
-        return true
-
-      return metric.label.toLowerCase().includes(keyword) || metric.description.toLowerCase().includes(keyword)
-    })
-
-    const grouped = filteredMetrics.reduce<Record<string, typeof filteredMetrics>>((acc, metric) => {
-      acc[metric.group] = [...(acc[metric.group] ?? []), metric]
-      return acc
-    }, {})
-
-    return Object.entries(grouped)
-  }, [config.builtinMetrics, query])
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger className="btn btn-medium btn-secondary inline-flex items-center">
-        <RiAddLine className="mr-1 h-4 w-4" />
-        {t('metrics.add')}
-      </PopoverTrigger>
-      <PopoverContent popupClassName="w-[360px] p-3">
-        <div className="space-y-3">
-          <Input
-            value={query}
-            showLeftIcon
-            placeholder={t('metrics.searchPlaceholder')}
-            onChange={handleQueryChange}
-          />
-          <div className="max-h-[320px] space-y-3 overflow-y-auto pr-1">
-            {isLoading && (
-              <div className="space-y-2" data-testid="evaluation-metric-loading">
-                {['metric-skeleton-1', 'metric-skeleton-2', 'metric-skeleton-3'].map(key => (
-                  <div key={key} className="h-14 animate-pulse rounded-xl bg-background-default-subtle" />
-                ))}
-              </div>
-            )}
-            {!isLoading && filteredGroups.length === 0 && (
-              <div className="rounded-xl border border-dashed border-divider-subtle px-4 py-8 text-center text-text-tertiary system-sm-regular">
-                {t('metrics.noResults')}
-              </div>
-            )}
-            {!isLoading && filteredGroups.map(([groupName, options]) => {
-              const shownOptions = showAll ? options : options.slice(0, 2)
-              return (
-                <div key={groupName}>
-                  <div className="mb-2 text-text-tertiary system-xs-medium-uppercase">{metricGroupLabels[groupName as keyof typeof metricGroupLabels] ?? groupName}</div>
-                  <div className="space-y-2">
-                    {shownOptions.map(option => (
-                      <button
-                        key={option.id}
-                        type="button"
-                        className="w-full rounded-xl border border-divider-subtle px-3 py-3 text-left hover:border-components-button-secondary-border hover:bg-state-base-hover-alt"
-                        onClick={() => {
-                          addBuiltinMetric(resourceType, resourceId, option.id)
-                          setOpen(false)
-                        }}
-                      >
-                        <div className="flex items-start justify-between gap-3">
-                          <div>
-                            <div className="text-text-primary system-sm-semibold">{option.label}</div>
-                            <div className="mt-1 text-text-tertiary system-xs-regular">{option.description}</div>
-                          </div>
-                          {metrics.some(metric => metric.optionId === option.id && metric.kind === 'builtin') && (
-                            <Badge className="badge-accent">{t('metrics.added')}</Badge>
-                          )}
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-          {filteredGroups.some(([, options]) => options.length > 2) && (
-            <button
-              type="button"
-              className="flex items-center text-text-accent system-sm-medium"
-              onClick={() => setShowAll(value => !value)}
-            >
-              {showAll ? t('metrics.showLess') : t('metrics.showMore')}
-              <RiArrowDownSLine className={cn('ml-1 h-4 w-4 transition-transform', showAll && 'rotate-180')} />
-            </button>
-          )}
-          <div className="border-t border-divider-subtle pt-3">
-            <Button
-              className="w-full justify-center"
-              variant="ghost-accent"
-              onClick={() => {
-                addCustomMetric(resourceType, resourceId)
-                setOpen(false)
-              }}
-            >
-              {t('metrics.addCustom')}
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const CustomMetricEditor = ({
-  resourceType,
-  resourceId,
-  metric,
-}: EvaluationProps & { metric: EvaluationMetric }) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
-  const addCustomMetricMapping = useEvaluationStore(state => state.addCustomMetricMapping)
-  const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
-  const removeCustomMetricMapping = useEvaluationStore(state => state.removeCustomMetricMapping)
-  const selectedWorkflow = config.workflowOptions.find(option => option.id === metric.customConfig?.workflowId)
-  const isConfigured = isCustomMetricConfigured(metric)
-
-  if (!metric.customConfig)
-    return null
-
-  return (
-    <div className="mt-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <div className="text-text-primary system-sm-semibold">{t('metrics.custom.title')}</div>
-          <div className="mt-1 text-text-tertiary system-xs-regular">{t('metrics.custom.description')}</div>
-        </div>
-        {!isConfigured && <Badge className="badge-warning">{t('metrics.custom.warningBadge')}</Badge>}
-      </div>
-      <div className="mt-4 grid gap-4 xl:grid-cols-[220px_minmax(0,1fr)]">
-        <div>
-          <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.workflowLabel')}</div>
-          <Select value={metric.customConfig.workflowId ?? ''} onValueChange={value => value && setCustomMetricWorkflow(resourceType, resourceId, metric.id, value)}>
-            <SelectTrigger>
-              <SelectValue placeholder={t('metrics.custom.workflowPlaceholder')} />
-            </SelectTrigger>
-            <SelectContent>
-              {config.workflowOptions.map(option => (
-                <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {selectedWorkflow && <div className="mt-2 text-text-tertiary system-xs-regular">{selectedWorkflow.description}</div>}
-        </div>
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <div className="text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.mappingTitle')}</div>
-            <Button size="small" variant="ghost" onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}>
-              <RiAddLine className="mr-1 h-4 w-4" />
-              {t('metrics.custom.addMapping')}
-            </Button>
-          </div>
-          <div className="space-y-2">
-            {metric.customConfig.mappings.map(mapping => (
-              <MappingRow
-                key={mapping.id}
-                resourceType={resourceType}
-                mapping={mapping}
-                targetOptions={selectedWorkflow?.targetVariables ?? []}
-                onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
-                onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
-              />
-            ))}
-          </div>
-          {!isConfigured && (
-            <div className="mt-3 rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
-              {t('metrics.custom.mappingWarning')}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function MappingRow({
-  resourceType,
-  mapping,
-  targetOptions,
-  onUpdate,
-  onRemove,
-}: {
-  resourceType: EvaluationResourceType
-  mapping: CustomMetricMapping
-  targetOptions: Array<{ id: string, label: string }>
-  onUpdate: (patch: { sourceFieldId?: string | null, targetVariableId?: string | null }) => void
-  onRemove: () => void
-}) {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-
-  return (
-    <div className="grid gap-2 rounded-xl border border-divider-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
-      <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
-        <SelectTrigger>
-          <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
-        </SelectTrigger>
-        <SelectContent>
-          {groupFieldOptions(config.fieldOptions).map(([groupName, fields]) => (
-            <SelectGroup key={groupName}>
-              <SelectGroupLabel>{groupName}</SelectGroupLabel>
-              {fields.map(field => (
-                <SelectItem key={field.id} value={field.id}>{field.label}</SelectItem>
-              ))}
-            </SelectGroup>
-          ))}
-        </SelectContent>
-      </Select>
-      <div className="flex items-center justify-center text-text-quaternary">
-        <RiArrowDownSLine className="h-4 w-4 -rotate-90" />
-      </div>
-      <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
-        <SelectTrigger>
-          <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
-        </SelectTrigger>
-        <SelectContent>
-          {targetOptions.map(option => (
-            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Button variant="ghost" size="small" aria-label={t('metrics.remove')} onClick={onRemove}>
-        <RiDeleteBinLine className="h-4 w-4" />
-      </Button>
-    </div>
-  )
-}
-
-const ConditionGroup = ({
-  resourceType,
-  resourceId,
-  group,
-  index,
-}: EvaluationProps & { group: JudgmentConditionGroup, index: number }) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const logicalLabels = {
-    and: t('conditions.logical.and'),
-    or: t('conditions.logical.or'),
-  }
-  const removeConditionGroup = useEvaluationStore(state => state.removeConditionGroup)
-  const setConditionGroupOperator = useEvaluationStore(state => state.setConditionGroupOperator)
-  const addConditionItem = useEvaluationStore(state => state.addConditionItem)
-  const removeConditionItem = useEvaluationStore(state => state.removeConditionItem)
-  const updateConditionField = useEvaluationStore(state => state.updateConditionField)
-  const updateConditionOperator = useEvaluationStore(state => state.updateConditionOperator)
-  const updateConditionValue = useEvaluationStore(state => state.updateConditionValue)
-
-  return (
-    <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <Badge>{t('conditions.groupLabel', { index: index + 1 })}</Badge>
-          <div className="flex rounded-lg border border-divider-subtle bg-background-default-subtle p-1">
-            {(['and', 'or'] as const).map(operator => (
-              <button
-                key={operator}
-                type="button"
-                className={cn(
-                  'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
-                  group.logicalOperator === operator
-                    ? 'bg-components-card-bg text-text-primary shadow-xs'
-                    : 'text-text-tertiary',
-                )}
-                onClick={() => setConditionGroupOperator(resourceType, resourceId, group.id, operator)}
-              >
-                {logicalLabels[operator]}
-              </button>
-            ))}
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button size="small" variant="ghost" onClick={() => addConditionItem(resourceType, resourceId, group.id)}>
-            <RiAddLine className="mr-1 h-4 w-4" />
-            {t('conditions.addCondition')}
-          </Button>
-          <Button
-            size="small"
-            variant="ghost"
-            aria-label={t('conditions.removeGroup')}
-            onClick={() => removeConditionGroup(resourceType, resourceId, group.id)}
-          >
-            <RiDeleteBinLine className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-      <div className="space-y-3">
-        {group.items.map((item) => {
-          const field = config.fieldOptions.find(option => option.id === item.fieldId)
-          const allowedOperators = getAllowedOperators(resourceType, item.fieldId)
-          const showValue = !!field && requiresConditionValue(item.operator)
-
-          return (
-            <div key={item.id} className="flex items-start overflow-hidden rounded-lg">
-              <div className="min-w-0 flex-1 rounded-lg bg-components-input-bg-normal">
-                <div className="flex items-center gap-0 pr-1">
-                  <div className="min-w-0 flex-1 py-1">
-                    <ConditionFieldSelect
-                      field={field}
-                      fieldOptions={config.fieldOptions}
-                      placeholder={t('conditions.fieldPlaceholder')}
-                      onChange={value => updateConditionField(resourceType, resourceId, group.id, item.id, value)}
-                    />
-                  </div>
-                  <div className="h-3 w-px bg-divider-regular" />
-                  <ConditionOperatorSelect
-                    field={field}
-                    operator={item.operator}
-                    operators={allowedOperators}
-                    onChange={value => updateConditionOperator(resourceType, resourceId, group.id, item.id, value)}
-                  />
-                </div>
-                {showValue && (
-                  <div className="border-t border-divider-subtle">
-                    <FieldValueInput
-                      field={field}
-                      operator={item.operator}
-                      value={item.value}
-                      onChange={value => updateConditionValue(resourceType, resourceId, group.id, item.id, value)}
-                    />
-                  </div>
-                )}
-              </div>
-              <div className="pl-1 pt-1">
-                <Button
-                  size="small"
-                  variant="ghost"
-                  aria-label={t('conditions.removeCondition')}
-                  onClick={() => removeConditionItem(resourceType, resourceId, group.id, item.id)}
-                >
-                  <RiCloseLine className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-const BatchTestPanel = ({
-  resourceType,
-  resourceId,
-}: EvaluationProps) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const tabLabels = {
-    'input-fields': t('batch.tabs.input-fields'),
-    'history': t('batch.tabs.history'),
-  }
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
-  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const isRunnable = isEvaluationRunnable(resource)
-
-  const handleDownloadTemplate = () => {
-    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
-    const link = document.createElement('a')
-    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
-    link.download = config.templateFileName
-    link.click()
-  }
-
-  const handleRun = () => {
-    if (!isRunnable) {
-      Toast.notify({
-        type: 'warning',
-        message: t('batch.validation'),
-      })
-      return
-    }
-
-    runBatchTest(resourceType, resourceId)
-  }
-
-  return (
-    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-components-card-bg">
-      <div className="border-b border-divider-subtle p-5">
-        <div className="flex items-center gap-2 text-text-primary system-md-semibold">
-          <RiFlaskLine className="h-5 w-5" />
-          {t('batch.title')}
-        </div>
-        <div className="mt-2 rounded-xl border border-divider-subtle bg-background-default-subtle p-3">
-          <div className="text-text-primary system-sm-semibold">{t('batch.noticeTitle')}</div>
-          <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
-        </div>
-        <div className="mt-4 flex rounded-xl border border-divider-subtle bg-background-default-subtle p-1">
-          {(['input-fields', 'history'] as const).map(tab => (
-            <button
-              key={tab}
-              type="button"
-              className={cn(
-                TAB_CLASS_NAME,
-                resource.activeBatchTab === tab ? 'bg-components-card-bg text-text-primary shadow-xs' : 'text-text-tertiary',
-              )}
-              onClick={() => setBatchTab(resourceType, resourceId, tab)}
-            >
-              {tabLabels[tab]}
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-5">
-        {resource.activeBatchTab === 'input-fields' && (
-          <div className="space-y-5">
-            <div>
-              <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('batch.requirementsTitle')}</div>
-              <div className="space-y-2">
-                {config.batchRequirements.map(requirement => (
-                  <div key={requirement} className="flex gap-2 text-text-tertiary system-sm-regular">
-                    <span className="mt-1 h-1.5 w-1.5 rounded-full bg-text-quaternary" />
-                    <span>{requirement}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="space-y-3">
-              <Button variant="secondary" className="w-full justify-center" onClick={handleDownloadTemplate}>
-                <RiDownloadLine className="mr-1 h-4 w-4" />
-                {t('batch.downloadTemplate')}
-              </Button>
-              <input
-                ref={fileInputRef}
-                hidden
-                type="file"
-                accept=".csv,.xlsx"
-                onChange={(event) => {
-                  const file = event.target.files?.[0]
-                  setUploadedFileName(resourceType, resourceId, file?.name ?? null)
-                }}
-              />
-              <button
-                type="button"
-                className="flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
-                onClick={() => fileInputRef.current?.click()}
-              >
-                <RiFileUploadLine className="h-5 w-5 text-text-tertiary" />
-                <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
-                <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
-              </button>
-            </div>
-            {!isRunnable && (
-              <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
-                {t('batch.validation')}
-              </div>
-            )}
-            <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
-              {t('batch.run')}
-            </Button>
-          </div>
-        )}
-        {resource.activeBatchTab === 'history' && (
-          <div className="space-y-3">
-            {resource.batchRecords.length === 0 && (
-              <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary system-sm-regular">
-                {t('batch.emptyHistory')}
-              </div>
-            )}
-            {resource.batchRecords.map(record => (
-              <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <div className="text-text-primary system-sm-semibold">{record.summary}</div>
-                    <div className="mt-1 text-text-tertiary system-xs-regular">{record.fileName}</div>
-                  </div>
-                  <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
-                    {record.status === 'running'
-                      ? (
-                          <span className="flex items-center gap-1">
-                            <RiLoader4Line className="h-3 w-3 animate-spin" />
-                            {statusLabels.running}
-                          </span>
-                        )
-                      : statusLabels[record.status]}
-                  </Badge>
-                </div>
-                <div className="mt-3 text-text-tertiary system-xs-regular">{record.startedAt}</div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
+import BatchTestPanel from './components/batch-test-panel'
+import ConditionsSection from './components/conditions-section'
+import JudgeModelSelector from './components/judge-model-selector'
+import MetricSection from './components/metric-section'
+import SectionHeader from './components/section-header'
+import { useEvaluationStore } from './store'
 
 const Evaluation = ({
   resourceType,
   resourceId,
-}: EvaluationProps) => {
+}: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
-  const resource = useEvaluationResource(resourceType, resourceId)
   const ensureResource = useEvaluationStore(state => state.ensureResource)
-  const removeMetric = useEvaluationStore(state => state.removeMetric)
-  const addConditionGroup = useEvaluationStore(state => state.addConditionGroup)
 
   useEffect(() => {
     ensureResource(resourceType, resourceId)
@@ -934,76 +32,8 @@ const Evaluation = ({
               <JudgeModelSelector resourceType={resourceType} resourceId={resourceId} />
             </div>
           </section>
-
-          <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
-            <SectionHeader
-              title={t('metrics.title')}
-              description={t('metrics.description')}
-              action={<MetricSelector resourceType={resourceType} resourceId={resourceId} />}
-            />
-            <div className="mt-4 space-y-3">
-              {resource.metrics.map(metric => (
-                <div key={metric.id} className="rounded-2xl border border-divider-subtle p-4">
-                  <div className="flex items-start justify-between gap-3">
-                    <div>
-                      <div className="text-text-primary system-sm-semibold">{metric.label}</div>
-                      <div className="mt-1 text-text-tertiary system-xs-regular">{metric.description}</div>
-                      <div className="mt-3 flex flex-wrap gap-2">
-                        {metric.badges.map(badge => (
-                          <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
-                        ))}
-                      </div>
-                    </div>
-                    <Button
-                      size="small"
-                      variant="ghost"
-                      aria-label={t('metrics.remove')}
-                      onClick={() => removeMetric(resourceType, resourceId, metric.id)}
-                    >
-                      <RiDeleteBinLine className="h-4 w-4" />
-                    </Button>
-                  </div>
-                  {metric.kind === 'custom-workflow' && (
-                    <CustomMetricEditor
-                      resourceType={resourceType}
-                      resourceId={resourceId}
-                      metric={metric}
-                    />
-                  )}
-                </div>
-              ))}
-            </div>
-          </section>
-
-          <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
-            <SectionHeader
-              title={t('conditions.title')}
-              description={t('conditions.description')}
-              action={(
-                <Button variant="secondary" onClick={() => addConditionGroup(resourceType, resourceId)}>
-                  <RiAddLine className="mr-1 h-4 w-4" />
-                  {t('conditions.addGroup')}
-                </Button>
-              )}
-            />
-            <div className="mt-4 space-y-4">
-              {resource.conditions.length === 0 && (
-                <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center">
-                  <div className="text-text-primary system-sm-semibold">{t('conditions.emptyTitle')}</div>
-                  <div className="mt-1 text-text-tertiary system-sm-regular">{t('conditions.emptyDescription')}</div>
-                </div>
-              )}
-              {resource.conditions.map((group, index) => (
-                <ConditionGroup
-                  key={group.id}
-                  resourceType={resourceType}
-                  resourceId={resourceId}
-                  group={group}
-                  index={index}
-                />
-              ))}
-            </div>
-          </section>
+          <MetricSection resourceType={resourceType} resourceId={resourceId} />
+          <ConditionsSection resourceType={resourceType} resourceId={resourceId} />
         </div>
       </div>
 
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
new file mode 100644
index 0000000000..9724619348
--- /dev/null
+++ b/web/app/components/evaluation/store-utils.ts
@@ -0,0 +1,183 @@
+import type {
+  BatchTestRecord,
+  ComparisonOperator,
+  CustomMetricMapping,
+  EvaluationFieldOption,
+  EvaluationMetric,
+  EvaluationResourceState,
+  EvaluationResourceType,
+  JudgmentConditionGroup,
+  MetricOption,
+} from './types'
+import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
+
+export type EvaluationStoreResources = Record<string, EvaluationResourceState>
+
+const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+
+export const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
+
+export const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
+
+export const requiresConditionValue = (operator: ComparisonOperator) => !conditionOperatorsWithoutValue.includes(operator)
+
+export const getConditionValue = (
+  field: EvaluationFieldOption | undefined,
+  operator: ComparisonOperator,
+  previousValue: string | number | boolean | null = null,
+) => {
+  if (!field || !requiresConditionValue(operator))
+    return null
+
+  if (field.type === 'boolean')
+    return typeof previousValue === 'boolean' ? previousValue : null
+
+  if (field.type === 'enum')
+    return typeof previousValue === 'string' ? previousValue : null
+
+  if (field.type === 'number')
+    return typeof previousValue === 'number' ? previousValue : null
+
+  return typeof previousValue === 'string' ? previousValue : null
+}
+
+export const createBuiltinMetric = (metric: MetricOption): EvaluationMetric => ({
+  id: createId('metric'),
+  optionId: metric.id,
+  kind: 'builtin',
+  label: metric.label,
+  description: metric.description,
+  badges: metric.badges,
+})
+
+export const createCustomMetricMapping = (): CustomMetricMapping => ({
+  id: createId('mapping'),
+  sourceFieldId: null,
+  targetVariableId: null,
+})
+
+export const createCustomMetric = (): EvaluationMetric => ({
+  id: createId('metric'),
+  optionId: createId('custom'),
+  kind: 'custom-workflow',
+  label: 'Custom Evaluator',
+  description: 'Map workflow variables to your evaluation inputs.',
+  badges: ['Workflow'],
+  customConfig: {
+    workflowId: null,
+    mappings: [createCustomMetricMapping()],
+  },
+})
+
+export const buildConditionItem = (resourceType: EvaluationResourceType) => {
+  const field = getEvaluationMockConfig(resourceType).fieldOptions[0]
+  const operator = field ? getDefaultOperator(field.type) : 'contains'
+
+  return {
+    id: createId('condition'),
+    fieldId: field?.id ?? null,
+    operator,
+    value: getConditionValue(field, operator),
+  }
+}
+
+export const createConditionGroup = (resourceType: EvaluationResourceType): JudgmentConditionGroup => ({
+  id: createId('group'),
+  logicalOperator: 'and',
+  items: [buildConditionItem(resourceType)],
+})
+
+export const buildInitialState = (resourceType: EvaluationResourceType): EvaluationResourceState => {
+  const config = getEvaluationMockConfig(resourceType)
+  const defaultMetric = config.builtinMetrics[0]
+
+  return {
+    judgeModelId: null,
+    metrics: defaultMetric ? [createBuiltinMetric(defaultMetric)] : [],
+    conditions: [createConditionGroup(resourceType)],
+    activeBatchTab: 'input-fields',
+    uploadedFileName: null,
+    batchRecords: [],
+  }
+}
+
+export const getResourceState = (
+  resources: EvaluationStoreResources,
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  const resourceKey = buildResourceKey(resourceType, resourceId)
+
+  return {
+    resourceKey,
+    resource: resources[resourceKey] ?? buildInitialState(resourceType),
+  }
+}
+
+export const updateResourceState = (
+  resources: EvaluationStoreResources,
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+  updater: (resource: EvaluationResourceState) => EvaluationResourceState,
+) => {
+  const { resource, resourceKey } = getResourceState(resources, resourceType, resourceId)
+
+  return {
+    ...resources,
+    [resourceKey]: updater(resource),
+  }
+}
+
+export const updateMetric = (
+  metrics: EvaluationMetric[],
+  metricId: string,
+  updater: (metric: EvaluationMetric) => EvaluationMetric,
+) => metrics.map(metric => metric.id === metricId ? updater(metric) : metric)
+
+export const updateConditionGroup = (
+  groups: JudgmentConditionGroup[],
+  groupId: string,
+  updater: (group: JudgmentConditionGroup) => JudgmentConditionGroup,
+) => groups.map(group => group.id === groupId ? updater(group) : group)
+
+export const createBatchTestRecord = (
+  resourceType: EvaluationResourceType,
+  uploadedFileName: string | null | undefined,
+): BatchTestRecord => {
+  const config = getEvaluationMockConfig(resourceType)
+
+  return {
+    id: createId('batch'),
+    fileName: uploadedFileName ?? config.templateFileName,
+    status: 'running',
+    startedAt: new Date().toLocaleTimeString(),
+    summary: config.historySummaryLabel,
+  }
+}
+
+export const isCustomMetricConfigured = (metric: EvaluationMetric) => {
+  if (metric.kind !== 'custom-workflow')
+    return true
+
+  if (!metric.customConfig?.workflowId)
+    return false
+
+  return metric.customConfig.mappings.length > 0
+    && metric.customConfig.mappings.every(mapping => !!mapping.sourceFieldId && !!mapping.targetVariableId)
+}
+
+export const isEvaluationRunnable = (state: EvaluationResourceState) => {
+  return !!state.judgeModelId
+    && state.metrics.length > 0
+    && state.metrics.every(isCustomMetricConfigured)
+    && state.conditions.some(group => group.items.length > 0)
+}
+
+export const getAllowedOperators = (resourceType: EvaluationResourceType, fieldId: string | null) => {
+  const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
+
+  if (!field)
+    return ['contains'] as ComparisonOperator[]
+
+  return getComparisonOperators(field.type)
+}
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 59b2b6d907..26e3fd9e79 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -1,14 +1,29 @@
 import type {
-  BatchTestRecord,
   ComparisonOperator,
-  EvaluationFieldOption,
-  EvaluationMetric,
   EvaluationResourceState,
   EvaluationResourceType,
-  JudgmentConditionGroup,
 } from './types'
 import { create } from 'zustand'
-import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
+import { getDefaultOperator, getEvaluationMockConfig } from './mock'
+import {
+  buildConditionItem,
+  buildInitialState,
+  buildResourceKey,
+  createBatchTestRecord,
+  createBuiltinMetric,
+  createConditionGroup,
+  createCustomMetric,
+  createCustomMetricMapping,
+  getAllowedOperators as getAllowedOperatorsFromUtils,
+  getConditionValue,
+  getResourceState,
+  isCustomMetricConfigured as isCustomMetricConfiguredFromUtils,
+  isEvaluationRunnable as isEvaluationRunnableFromUtils,
+  requiresConditionValue as requiresConditionValueFromUtils,
+  updateConditionGroup,
+  updateMetric,
+  updateResourceState,
+} from './store-utils'
 
 type EvaluationStore = {
   resources: Record<string, EvaluationResourceState>
@@ -46,117 +61,8 @@ type EvaluationStore = {
   runBatchTest: (resourceType: EvaluationResourceType, resourceId: string) => void
 }
 
-const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
 const initialResourceCache: Record<string, EvaluationResourceState> = {}
 
-const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
-
-export const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
-
-export const requiresConditionValue = (operator: ComparisonOperator) => !conditionOperatorsWithoutValue.includes(operator)
-
-const getConditionValue = (
-  field: EvaluationFieldOption | undefined,
-  operator: ComparisonOperator,
-  previousValue: string | number | boolean | null = null,
-) => {
-  if (!field || !requiresConditionValue(operator))
-    return null
-
-  if (field.type === 'boolean')
-    return typeof previousValue === 'boolean' ? previousValue : null
-
-  if (field.type === 'enum')
-    return typeof previousValue === 'string' ? previousValue : null
-
-  if (field.type === 'number')
-    return typeof previousValue === 'number' ? previousValue : null
-
-  return typeof previousValue === 'string' ? previousValue : null
-}
-
-const buildConditionItem = (resourceType: EvaluationResourceType) => {
-  const field = getEvaluationMockConfig(resourceType).fieldOptions[0]
-  const operator = field ? getDefaultOperator(field.type) : 'contains'
-
-  return {
-    id: createId('condition'),
-    fieldId: field?.id ?? null,
-    operator,
-    value: getConditionValue(field, operator),
-  }
-}
-
-const buildInitialState = (resourceType: EvaluationResourceType): EvaluationResourceState => {
-  const config = getEvaluationMockConfig(resourceType)
-  const defaultMetric = config.builtinMetrics[0]
-
-  return {
-    judgeModelId: null,
-    metrics: defaultMetric
-      ? [{
-          id: createId('metric'),
-          optionId: defaultMetric.id,
-          kind: 'builtin',
-          label: defaultMetric.label,
-          description: defaultMetric.description,
-          badges: defaultMetric.badges,
-        }]
-      : [],
-    conditions: [{
-      id: createId('group'),
-      logicalOperator: 'and',
-      items: [buildConditionItem(resourceType)],
-    }],
-    activeBatchTab: 'input-fields',
-    uploadedFileName: null,
-    batchRecords: [],
-  }
-}
-
-const withResourceState = (
-  resources: EvaluationStore['resources'],
-  resourceType: EvaluationResourceType,
-  resourceId: string,
-) => {
-  const resourceKey = buildResourceKey(resourceType, resourceId)
-
-  return {
-    resourceKey,
-    resource: resources[resourceKey] ?? buildInitialState(resourceType),
-  }
-}
-
-const updateMetric = (
-  metrics: EvaluationMetric[],
-  metricId: string,
-  updater: (metric: EvaluationMetric) => EvaluationMetric,
-) => metrics.map(metric => metric.id === metricId ? updater(metric) : metric)
-
-const updateConditionGroup = (
-  groups: JudgmentConditionGroup[],
-  groupId: string,
-  updater: (group: JudgmentConditionGroup) => JudgmentConditionGroup,
-) => groups.map(group => group.id === groupId ? updater(group) : group)
-
-export const isCustomMetricConfigured = (metric: EvaluationMetric) => {
-  if (metric.kind !== 'custom-workflow')
-    return true
-
-  if (!metric.customConfig?.workflowId)
-    return false
-
-  return metric.customConfig.mappings.length > 0
-    && metric.customConfig.mappings.every(mapping => !!mapping.sourceFieldId && !!mapping.targetVariableId)
-}
-
-export const isEvaluationRunnable = (state: EvaluationResourceState) => {
-  return !!state.judgeModelId
-    && state.metrics.length > 0
-    && state.metrics.every(isCustomMetricConfigured)
-    && state.conditions.some(group => group.items.length > 0)
-}
-
 export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
   resources: {},
   ensureResource: (resourceType, resourceId) => {
@@ -172,19 +78,12 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
     }))
   },
   setJudgeModel: (resourceType, resourceId, judgeModelId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            judgeModelId,
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        judgeModelId,
+      })),
+    }))
   },
   addBuiltinMetric: (resourceType, resourceId, optionId) => {
     const option = getEvaluationMockConfig(resourceType).builtinMetrics.find(metric => metric.id === optionId)
@@ -192,430 +91,254 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       return
 
     set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+      const { resource } = getResourceState(state.resources, resourceType, resourceId)
 
       if (resource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin'))
         return state
 
       return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: [
-              ...resource.metrics,
-              {
-                id: createId('metric'),
-                optionId: option.id,
-                kind: 'builtin',
-                label: option.label,
-                description: option.description,
-                badges: option.badges,
-              },
-            ],
-          },
-        },
+        resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
+          ...currentResource,
+          metrics: [...currentResource.metrics, createBuiltinMetric(option)],
+        })),
       }
     })
   },
   addCustomMetric: (resourceType, resourceId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: [
-              ...resource.metrics,
-              {
-                id: createId('metric'),
-                optionId: createId('custom'),
-                kind: 'custom-workflow',
-                label: 'Custom Evaluator',
-                description: 'Map workflow variables to your evaluation inputs.',
-                badges: ['Workflow'],
-                customConfig: {
-                  workflowId: null,
-                  mappings: [{
-                    id: createId('mapping'),
-                    sourceFieldId: null,
-                    targetVariableId: null,
-                  }],
-                },
-              },
-            ],
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: [...resource.metrics, createCustomMetric()],
+      })),
+    }))
   },
   removeMetric: (resourceType, resourceId, metricId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: resource.metrics.filter(metric => metric.id !== metricId),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: resource.metrics.filter(metric => metric.id !== metricId),
+      })),
+    }))
   },
   setCustomMetricWorkflow: (resourceType, resourceId, metricId, workflowId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: updateMetric(resource.metrics, metricId, metric => ({
-              ...metric,
-              customConfig: metric.customConfig
-                ? {
-                    ...metric.customConfig,
-                    workflowId,
-                    mappings: metric.customConfig.mappings.map(mapping => ({
-                      ...mapping,
-                      targetVariableId: null,
-                    })),
-                  }
-                : metric.customConfig,
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                workflowId,
+                mappings: metric.customConfig.mappings.map(mapping => ({
+                  ...mapping,
+                  targetVariableId: null,
+                })),
+              }
+            : metric.customConfig,
+        })),
+      })),
+    }))
   },
   addCustomMetricMapping: (resourceType, resourceId, metricId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: updateMetric(resource.metrics, metricId, metric => ({
-              ...metric,
-              customConfig: metric.customConfig
-                ? {
-                    ...metric.customConfig,
-                    mappings: [
-                      ...metric.customConfig.mappings,
-                      {
-                        id: createId('mapping'),
-                        sourceFieldId: null,
-                        targetVariableId: null,
-                      },
-                    ],
-                  }
-                : metric.customConfig,
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                mappings: [...metric.customConfig.mappings, createCustomMetricMapping()],
+              }
+            : metric.customConfig,
+        })),
+      })),
+    }))
   },
   updateCustomMetricMapping: (resourceType, resourceId, metricId, mappingId, patch) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: updateMetric(resource.metrics, metricId, metric => ({
-              ...metric,
-              customConfig: metric.customConfig
-                ? {
-                    ...metric.customConfig,
-                    mappings: metric.customConfig.mappings.map(mapping => mapping.id === mappingId ? { ...mapping, ...patch } : mapping),
-                  }
-                : metric.customConfig,
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                mappings: metric.customConfig.mappings.map(mapping => mapping.id === mappingId ? { ...mapping, ...patch } : mapping),
+              }
+            : metric.customConfig,
+        })),
+      })),
+    }))
   },
   removeCustomMetricMapping: (resourceType, resourceId, metricId, mappingId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            metrics: updateMetric(resource.metrics, metricId, metric => ({
-              ...metric,
-              customConfig: metric.customConfig
-                ? {
-                    ...metric.customConfig,
-                    mappings: metric.customConfig.mappings.filter(mapping => mapping.id !== mappingId),
-                  }
-                : metric.customConfig,
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                mappings: metric.customConfig.mappings.filter(mapping => mapping.id !== mappingId),
+              }
+            : metric.customConfig,
+        })),
+      })),
+    }))
   },
   addConditionGroup: (resourceType, resourceId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: [
-              ...resource.conditions,
-              {
-                id: createId('group'),
-                logicalOperator: 'and',
-                items: [buildConditionItem(resourceType)],
-              },
-            ],
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: [...resource.conditions, createConditionGroup(resourceType)],
+      })),
+    }))
   },
   removeConditionGroup: (resourceType, resourceId, groupId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: resource.conditions.filter(group => group.id !== groupId),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: resource.conditions.filter(group => group.id !== groupId),
+      })),
+    }))
   },
   setConditionGroupOperator: (resourceType, resourceId, groupId, logicalOperator) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-              ...group,
-              logicalOperator,
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+          ...group,
+          logicalOperator,
+        })),
+      })),
+    }))
   },
   addConditionItem: (resourceType, resourceId, groupId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-              ...group,
-              items: [
-                ...group.items,
-                buildConditionItem(resourceType),
-              ],
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+          ...group,
+          items: [...group.items, buildConditionItem(resourceType)],
+        })),
+      })),
+    }))
   },
   removeConditionItem: (resourceType, resourceId, groupId, itemId) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-              ...group,
-              items: group.items.filter(item => item.id !== itemId),
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+          ...group,
+          items: group.items.filter(item => item.id !== itemId),
+        })),
+      })),
+    }))
   },
   updateConditionField: (resourceType, resourceId, groupId, itemId, fieldId) => {
     const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
 
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+          ...group,
+          items: group.items.map((item) => {
+            if (item.id !== itemId)
+              return item
 
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-              ...group,
-              items: group.items.map((item) => {
-                if (item.id !== itemId)
-                  return item
+            const nextOperator = field ? getDefaultOperator(field.type) : item.operator
 
-                return {
-                  ...item,
-                  fieldId,
-                  operator: field ? getDefaultOperator(field.type) : item.operator,
-                  value: getConditionValue(field, field ? getDefaultOperator(field.type) : item.operator),
-                }
-              }),
-            })),
-          },
-        },
-      }
-    })
+            return {
+              ...item,
+              fieldId,
+              operator: nextOperator,
+              value: getConditionValue(field, nextOperator),
+            }
+          }),
+        })),
+      })),
+    }))
   },
   updateConditionOperator: (resourceType, resourceId, groupId, itemId, operator) => {
     set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
       const fieldOptions = getEvaluationMockConfig(resourceType).fieldOptions
 
       return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-              ...group,
-              items: group.items.map((item) => {
-                if (item.id !== itemId)
-                  return item
+        resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
+          ...currentResource,
+          conditions: updateConditionGroup(currentResource.conditions, groupId, group => ({
+            ...group,
+            items: group.items.map((item) => {
+              if (item.id !== itemId)
+                return item
 
-                const field = fieldOptions.find(option => option.id === item.fieldId)
+              const field = fieldOptions.find(option => option.id === item.fieldId)
 
-                return {
-                  ...item,
-                  operator,
-                  value: getConditionValue(field, operator, item.value),
-                }
-              }),
-            })),
-          },
-        },
+              return {
+                ...item,
+                operator,
+                value: getConditionValue(field, operator, item.value),
+              }
+            }),
+          })),
+        })),
       }
     })
   },
   updateConditionValue: (resourceType, resourceId, groupId, itemId, value) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-              ...group,
-              items: group.items.map(item => item.id === itemId ? { ...item, value } : item),
-            })),
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
+          ...group,
+          items: group.items.map(item => item.id === itemId ? { ...item, value } : item),
+        })),
+      })),
+    }))
   },
   setBatchTab: (resourceType, resourceId, tab) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            activeBatchTab: tab,
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        activeBatchTab: tab,
+      })),
+    }))
   },
   setUploadedFileName: (resourceType, resourceId, uploadedFileName) => {
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            uploadedFileName,
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        uploadedFileName,
+      })),
+    }))
   },
   runBatchTest: (resourceType, resourceId) => {
-    const config = getEvaluationMockConfig(resourceType)
-    const recordId = createId('batch')
-    const nextRecord: BatchTestRecord = {
-      id: recordId,
-      fileName: get().resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileName ?? config.templateFileName,
-      status: 'running',
-      startedAt: new Date().toLocaleTimeString(),
-      summary: config.historySummaryLabel,
-    }
+    const { uploadedFileName } = get().resources[buildResourceKey(resourceType, resourceId)] ?? buildInitialState(resourceType)
+    const nextRecord = createBatchTestRecord(resourceType, uploadedFileName)
 
-    set((state) => {
-      const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-      return {
-        resources: {
-          ...state.resources,
-          [resourceKey]: {
-            ...resource,
-            activeBatchTab: 'history',
-            batchRecords: [nextRecord, ...resource.batchRecords],
-          },
-        },
-      }
-    })
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        activeBatchTab: 'history',
+        batchRecords: [nextRecord, ...resource.batchRecords],
+      })),
+    }))
 
     window.setTimeout(() => {
-      set((state) => {
-        const { resource, resourceKey } = withResourceState(state.resources, resourceType, resourceId)
-
-        return {
-          resources: {
-            ...state.resources,
-            [resourceKey]: {
-              ...resource,
-              batchRecords: resource.batchRecords.map(record => record.id === recordId
-                ? {
-                    ...record,
-                    status: resource.metrics.length > 1 ? 'success' : 'failed',
-                  }
-                : record),
-            },
-          },
-        }
-      })
+      set(state => ({
+        resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+          ...resource,
+          batchRecords: resource.batchRecords.map(record => record.id === nextRecord.id
+            ? {
+                ...record,
+                status: resource.metrics.length > 1 ? 'success' : 'failed',
+              }
+            : record),
+        })),
+      }))
     }, 1200)
   },
 }))
@@ -626,10 +349,17 @@ export const useEvaluationResource = (resourceType: EvaluationResourceType, reso
 }
 
 export const getAllowedOperators = (resourceType: EvaluationResourceType, fieldId: string | null) => {
-  const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
-
-  if (!field)
-    return ['contains'] as ComparisonOperator[]
-
-  return getComparisonOperators(field.type)
+  return getAllowedOperatorsFromUtils(resourceType, fieldId)
+}
+
+export const isCustomMetricConfigured = (metric: EvaluationResourceState['metrics'][number]) => {
+  return isCustomMetricConfiguredFromUtils(metric)
+}
+
+export const isEvaluationRunnable = (state: EvaluationResourceState) => {
+  return isEvaluationRunnableFromUtils(state)
+}
+
+export const requiresConditionValue = (operator: ComparisonOperator) => {
+  return requiresConditionValueFromUtils(operator)
 }
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 9b9cfda31c..dfda0e2f6c 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -1,5 +1,10 @@
 export type EvaluationResourceType = 'workflow' | 'pipeline' | 'snippet'
 
+export type EvaluationResourceProps = {
+  resourceType: EvaluationResourceType
+  resourceId: string
+}
+
 export type MetricKind = 'builtin' | 'custom-workflow'
 
 export type BatchTestTab = 'input-fields' | 'history'
diff --git a/web/app/components/evaluation/utils.ts b/web/app/components/evaluation/utils.ts
new file mode 100644
index 0000000000..99723ad1de
--- /dev/null
+++ b/web/app/components/evaluation/utils.ts
@@ -0,0 +1,60 @@
+import type { TFunction } from 'i18next'
+import type { ComparisonOperator, EvaluationFieldOption } from './types'
+
+export const TAB_CLASS_NAME = 'flex-1 rounded-lg px-3 py-2 text-left system-sm-medium'
+
+const compactOperatorLabels: Partial<Record<ComparisonOperator, string>> = {
+  is: '=',
+  is_not: '!=',
+  greater_than: '>',
+  less_than: '<',
+  greater_or_equal: '>=',
+  less_or_equal: '<=',
+}
+
+export const encodeModelSelection = (provider: string, model: string) => `${provider}::${model}`
+
+export const decodeModelSelection = (judgeModelId: string | null) => {
+  if (!judgeModelId)
+    return undefined
+
+  const [provider, model] = judgeModelId.split('::')
+  if (!provider || !model)
+    return undefined
+
+  return { provider, model }
+}
+
+export const groupFieldOptions = (fieldOptions: EvaluationFieldOption[]) => {
+  return Object.entries(fieldOptions.reduce<Record<string, EvaluationFieldOption[]>>((acc, field) => {
+    acc[field.group] = [...(acc[field.group] ?? []), field]
+    return acc
+  }, {}))
+}
+
+export const getOperatorLabel = (
+  operator: ComparisonOperator,
+  fieldType: EvaluationFieldOption['type'] | undefined,
+  t: TFunction<'evaluation'>,
+) => {
+  if (fieldType === 'number' && compactOperatorLabels[operator])
+    return compactOperatorLabels[operator] as string
+
+  return t(`conditions.operators.${operator}` as const)
+}
+
+export const getFieldTypeIconClassName = (fieldType: EvaluationFieldOption['type']) => {
+  if (fieldType === 'number')
+    return 'i-ri-hashtag'
+
+  if (fieldType === 'boolean')
+    return 'i-ri-checkbox-circle-line'
+
+  if (fieldType === 'enum')
+    return 'i-ri-list-check-2'
+
+  if (fieldType === 'time')
+    return 'i-ri-time-line'
+
+  return 'i-ri-text'
+}
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
index 8ffe98182e..9d29d80906 100644
--- a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
@@ -54,7 +54,6 @@ describe('useSnippetPublish', () => {
     it('should publish the snippet, close the menu, and show success feedback', async () => {
       const { result } = renderHook(() => useSnippetPublish({
         snippetId: 'snippet-1',
-        section: 'orchestrate',
       }))
 
       await act(async () => {
@@ -73,7 +72,6 @@ describe('useSnippetPublish', () => {
 
       const { result } = renderHook(() => useSnippetPublish({
         snippetId: 'snippet-1',
-        section: 'orchestrate',
       }))
 
       await act(async () => {
@@ -89,7 +87,6 @@ describe('useSnippetPublish', () => {
     it('should trigger publish on ctrl+shift+p in the orchestrate section', async () => {
       renderHook(() => useSnippetPublish({
         snippetId: 'snippet-1',
-        section: 'orchestrate',
       }))
 
       const event = new KeyboardEvent('keydown')
@@ -110,7 +107,6 @@ describe('useSnippetPublish', () => {
     it('should ignore the shortcut outside the orchestrate section', () => {
       renderHook(() => useSnippetPublish({
         snippetId: 'snippet-1',
-        section: 'evaluation',
       }))
 
       const event = new KeyboardEvent('keydown')

From 8cb634c9bc1d68cc778cb4a76473e2884ff1d8d0 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 30 Mar 2026 11:27:06 +0800
Subject: [PATCH 042/108] feat(web): evaluation layout

---
 .../components/batch-test-panel.tsx           | 71 +++++++++++--------
 .../components/conditions-section.tsx         | 36 ++++++----
 .../components/judge-model-selector.tsx       |  2 +-
 .../evaluation/components/metric-section.tsx  | 29 ++++++--
 .../evaluation/components/metric-selector.tsx | 32 +++++++--
 .../evaluation/components/section-header.tsx  | 55 +++++++++++++-
 web/app/components/evaluation/index.tsx       | 40 ++++++++---
 web/i18n/en-US/evaluation.json                |  8 ++-
 web/i18n/zh-Hans/evaluation.json              |  8 ++-
 9 files changed, 207 insertions(+), 74 deletions(-)

diff --git a/web/app/components/evaluation/components/batch-test-panel.tsx b/web/app/components/evaluation/components/batch-test-panel.tsx
index 4a03de1b38..2d95abf86d 100644
--- a/web/app/components/evaluation/components/batch-test-panel.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel.tsx
@@ -17,6 +17,10 @@ const BatchTestPanel = ({
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
   const config = getEvaluationMockConfig(resourceType)
+  const requirementFields = config.fieldOptions
+    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
+    .slice(0, 4)
+  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
   const tabLabels = {
     'input-fields': t('batch.tabs.input-fields'),
     'history': t('batch.tabs.history'),
@@ -32,6 +36,7 @@ const BatchTestPanel = ({
   const runBatchTest = useEvaluationStore(state => state.runBatchTest)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const isRunnable = isEvaluationRunnable(resource)
+  const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
 
   const handleDownloadTemplate = () => {
     const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
@@ -51,24 +56,27 @@ const BatchTestPanel = ({
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-components-card-bg">
-      <div className="border-b border-divider-subtle p-5">
-        <div className="flex items-center gap-2 text-text-primary system-md-semibold">
-          <span aria-hidden="true" className="i-ri-flask-line h-5 w-5" />
-          {t('batch.title')}
+    <div className="flex h-full min-h-0 flex-col bg-background-default">
+      <div className="px-6 py-4">
+        <div className="text-text-primary system-xl-semibold">{t('batch.title')}</div>
+        <div className="mt-1 text-text-tertiary system-sm-regular">{t('batch.description')}</div>
+        <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
+          <div className="flex items-start gap-3">
+            <span aria-hidden="true" className="i-ri-alert-fill mt-0.5 h-4 w-4 shrink-0 text-text-warning" />
+            <div className="text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
+          </div>
         </div>
-        <div className="mt-2 rounded-xl border border-divider-subtle bg-background-default-subtle p-3">
-          <div className="text-text-primary system-sm-semibold">{t('batch.noticeTitle')}</div>
-          <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
-        </div>
-        <div className="mt-4 flex rounded-xl border border-divider-subtle bg-background-default-subtle p-1">
+      </div>
+      <div className="border-b border-divider-subtle px-6">
+        <div className="flex gap-4">
           {(['input-fields', 'history'] as const).map(tab => (
             <button
               key={tab}
               type="button"
               className={cn(
                 TAB_CLASS_NAME,
-                resource.activeBatchTab === tab ? 'bg-components-card-bg text-text-primary shadow-xs' : 'text-text-tertiary',
+                'flex-none rounded-none border-b-2 border-transparent px-0 pb-2.5 pt-2 uppercase',
+                resource.activeBatchTab === tab ? 'border-text-accent-secondary text-text-primary' : 'text-text-tertiary',
               )}
               onClick={() => setBatchTab(resourceType, resourceId, tab)}
             >
@@ -77,22 +85,27 @@ const BatchTestPanel = ({
           ))}
         </div>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-5">
+      <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
         {resource.activeBatchTab === 'input-fields' && (
           <div className="space-y-5">
             <div>
-              <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('batch.requirementsTitle')}</div>
-              <div className="space-y-2">
-                {config.batchRequirements.map(requirement => (
-                  <div key={requirement} className="flex gap-2 text-text-tertiary system-sm-regular">
-                    <span className="mt-1 h-1.5 w-1.5 rounded-full bg-text-quaternary" />
-                    <span>{requirement}</span>
+              <div className="text-text-primary system-md-semibold">{t('batch.requirementsTitle')}</div>
+              <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.requirementsDescription')}</div>
+              <div className="mt-3 rounded-xl bg-background-section p-3">
+                {displayedRequirementFields.map(field => (
+                  <div key={field.id} className="flex items-center py-1">
+                    <div className="rounded px-1 py-0.5 text-text-tertiary system-xs-medium">
+                      {field.label}
+                    </div>
+                    <div className="text-[10px] leading-3 text-text-quaternary">
+                      {field.type}
+                    </div>
                   </div>
                 ))}
               </div>
             </div>
             <div className="space-y-3">
-              <Button variant="secondary" className="w-full justify-center" onClick={handleDownloadTemplate}>
+              <Button variant="secondary" className="w-full justify-center" disabled={!isPanelReady} onClick={handleDownloadTemplate}>
                 <span aria-hidden="true" className="i-ri-download-line mr-1 h-4 w-4" />
                 {t('batch.downloadTemplate')}
               </Button>
@@ -106,15 +119,17 @@ const BatchTestPanel = ({
                   setUploadedFileName(resourceType, resourceId, file?.name ?? null)
                 }}
               />
-              <button
-                type="button"
-                className="flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
-                onClick={() => fileInputRef.current?.click()}
-              >
-                <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
-                <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
-                <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
-              </button>
+              {isPanelReady && (
+                <button
+                  type="button"
+                  className="flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
+                  <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
+                  <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
+                </button>
+              )}
             </div>
             {!isRunnable && (
               <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
diff --git a/web/app/components/evaluation/components/conditions-section.tsx b/web/app/components/evaluation/components/conditions-section.tsx
index 192ef17788..7c08ba820a 100644
--- a/web/app/components/evaluation/components/conditions-section.tsx
+++ b/web/app/components/evaluation/components/conditions-section.tsx
@@ -2,10 +2,10 @@
 
 import type { EvaluationResourceProps } from '../types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
 import { useEvaluationResource, useEvaluationStore } from '../store'
 import ConditionGroup from './condition-group'
-import SectionHeader from './section-header'
+import { InlineSectionHeader } from './section-header'
 
 const ConditionsSection = ({
   resourceType,
@@ -14,24 +14,18 @@ const ConditionsSection = ({
   const { t } = useTranslation('evaluation')
   const resource = useEvaluationResource(resourceType, resourceId)
   const addConditionGroup = useEvaluationStore(state => state.addConditionGroup)
+  const canAddCondition = resource.metrics.length > 0
 
   return (
-    <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
-      <SectionHeader
+    <section className="max-w-[700px] py-4">
+      <InlineSectionHeader
         title={t('conditions.title')}
-        description={t('conditions.description')}
-        action={(
-          <Button variant="secondary" onClick={() => addConditionGroup(resourceType, resourceId)}>
-            <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
-            {t('conditions.addGroup')}
-          </Button>
-        )}
+        tooltip={t('conditions.description')}
       />
-      <div className="mt-4 space-y-4">
+      <div className="mt-2 space-y-4">
         {resource.conditions.length === 0 && (
-          <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center">
-            <div className="text-text-primary system-sm-semibold">{t('conditions.emptyTitle')}</div>
-            <div className="mt-1 text-text-tertiary system-sm-regular">{t('conditions.emptyDescription')}</div>
+          <div className="rounded-xl bg-background-section px-3 py-3 text-text-tertiary system-xs-regular">
+            {t('conditions.emptyDescription')}
           </div>
         )}
         {resource.conditions.map((group, index) => (
@@ -43,6 +37,18 @@ const ConditionsSection = ({
             index={index}
           />
         ))}
+        <button
+          type="button"
+          className={cn(
+            'inline-flex items-center text-text-accent system-sm-medium',
+            !canAddCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+          )}
+          disabled={!canAddCondition}
+          onClick={() => addConditionGroup(resourceType, resourceId)}
+        >
+          <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+          {t('conditions.addCondition')}
+        </button>
       </div>
     </section>
   )
diff --git a/web/app/components/evaluation/components/judge-model-selector.tsx b/web/app/components/evaluation/components/judge-model-selector.tsx
index 27520e4aca..e0514012fe 100644
--- a/web/app/components/evaluation/components/judge-model-selector.tsx
+++ b/web/app/components/evaluation/components/judge-model-selector.tsx
@@ -35,7 +35,7 @@ const JudgeModelSelector = ({
       modelList={modelList}
       onSelect={model => setJudgeModel(resourceType, resourceId, encodeModelSelection(model.provider, model.model))}
       showDeprecatedWarnIcon
-      triggerClassName="h-11"
+      triggerClassName="h-8 w-full rounded-lg"
     />
   )
 }
diff --git a/web/app/components/evaluation/components/metric-section.tsx b/web/app/components/evaluation/components/metric-section.tsx
index 0cb587f355..f72b214c27 100644
--- a/web/app/components/evaluation/components/metric-section.tsx
+++ b/web/app/components/evaluation/components/metric-section.tsx
@@ -7,7 +7,7 @@ import Button from '@/app/components/base/button'
 import { useEvaluationResource, useEvaluationStore } from '../store'
 import CustomMetricEditor from './custom-metric-editor'
 import MetricSelector from './metric-selector'
-import SectionHeader from './section-header'
+import { InlineSectionHeader } from './section-header'
 
 const MetricSection = ({
   resourceType,
@@ -16,17 +16,27 @@ const MetricSection = ({
   const { t } = useTranslation('evaluation')
   const resource = useEvaluationResource(resourceType, resourceId)
   const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const hasMetrics = resource.metrics.length > 0
 
   return (
-    <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
-      <SectionHeader
+    <section className="max-w-[700px] py-4">
+      <InlineSectionHeader
         title={t('metrics.title')}
-        description={t('metrics.description')}
-        action={<MetricSelector resourceType={resourceType} resourceId={resourceId} />}
+        tooltip={t('metrics.description')}
       />
-      <div className="mt-4 space-y-3">
+      <div className="mt-2 space-y-3">
+        {!hasMetrics && (
+          <div className="flex items-center gap-5 rounded-xl bg-background-section px-3 py-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-md">
+              <span aria-hidden="true" className="i-ri-bar-chart-horizontal-line h-6 w-6 text-text-primary" />
+            </div>
+            <div className="text-text-tertiary system-xs-regular">
+              {t('metrics.description')}
+            </div>
+          </div>
+        )}
         {resource.metrics.map(metric => (
-          <div key={metric.id} className="rounded-2xl border border-divider-subtle p-4">
+          <div key={metric.id} className="rounded-xl border border-divider-subtle bg-components-card-bg p-4">
             <div className="flex items-start justify-between gap-3">
               <div>
                 <div className="text-text-primary system-sm-semibold">{metric.label}</div>
@@ -55,6 +65,11 @@ const MetricSection = ({
             )}
           </div>
         ))}
+        <MetricSelector
+          resourceType={resourceType}
+          resourceId={resourceId}
+          triggerStyle="text"
+        />
       </div>
     </section>
   )
diff --git a/web/app/components/evaluation/components/metric-selector.tsx b/web/app/components/evaluation/components/metric-selector.tsx
index 8c9e5e413f..0ea9231b61 100644
--- a/web/app/components/evaluation/components/metric-selector.tsx
+++ b/web/app/components/evaluation/components/metric-selector.tsx
@@ -16,10 +16,19 @@ import { cn } from '@/utils/classnames'
 import { getEvaluationMockConfig } from '../mock'
 import { useEvaluationResource, useEvaluationStore } from '../store'
 
+type MetricSelectorProps = EvaluationResourceProps & {
+  triggerVariant?: 'primary' | 'warning' | 'secondary' | 'secondary-accent' | 'ghost' | 'ghost-accent' | 'tertiary'
+  triggerClassName?: string
+  triggerStyle?: 'button' | 'text'
+}
+
 const MetricSelector = ({
   resourceType,
   resourceId,
-}: EvaluationResourceProps) => {
+  triggerVariant = 'secondary',
+  triggerClassName,
+  triggerStyle = 'button',
+}: MetricSelectorProps) => {
   const { t } = useTranslation('evaluation')
   const config = getEvaluationMockConfig(resourceType)
   const metricGroupLabels = {
@@ -90,10 +99,23 @@ const MetricSelector = ({
 
   return (
     <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger className="btn btn-medium btn-secondary inline-flex items-center">
-        <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
-        {t('metrics.add')}
-      </PopoverTrigger>
+      <PopoverTrigger
+        render={(
+          triggerStyle === 'text'
+            ? (
+                <button type="button" className={cn('inline-flex items-center text-text-accent system-sm-medium', triggerClassName)}>
+                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                  {t('metrics.add')}
+                </button>
+              )
+            : (
+                <Button variant={triggerVariant} className={triggerClassName}>
+                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                  {t('metrics.add')}
+                </Button>
+              )
+        )}
+      />
       <PopoverContent popupClassName="w-[360px] p-3">
         <div className="space-y-3">
           <Input
diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
index e0913b76a4..37073265cd 100644
--- a/web/app/components/evaluation/components/section-header.tsx
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -1,23 +1,72 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { cn } from '@/utils/classnames'
 
 type SectionHeaderProps = {
   title: string
-  description: string
+  description?: ReactNode
   action?: ReactNode
+  className?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+type InlineSectionHeaderProps = {
+  title: string
+  tooltip?: ReactNode
+  action?: ReactNode
+  className?: string
 }
 
 const SectionHeader = ({
   title,
   description,
   action,
+  className,
+  titleClassName,
+  descriptionClassName,
 }: SectionHeaderProps) => {
   return (
-    <div className="flex flex-wrap items-start justify-between gap-3">
+    <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
       <div>
+        <div className={cn('text-text-primary system-md-semibold', titleClassName)}>{title}</div>
+        {description && <div className={cn('mt-1 text-text-tertiary system-sm-regular', descriptionClassName)}>{description}</div>}
+      </div>
+      {action}
+    </div>
+  )
+}
+
+export const InlineSectionHeader = ({
+  title,
+  tooltip,
+  action,
+  className,
+}: InlineSectionHeaderProps) => {
+  return (
+    <div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
+      <div className="flex min-h-6 items-center gap-1">
         <div className="text-text-primary system-md-semibold">{title}</div>
-        <div className="mt-1 text-text-tertiary system-sm-regular">{description}</div>
+        {tooltip && (
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <button
+                  type="button"
+                  className="flex h-4 w-4 items-center justify-center text-text-quaternary transition-colors hover:text-text-tertiary"
+                  aria-label={title}
+                >
+                  <span aria-hidden="true" className="i-ri-information-line h-3.5 w-3.5" />
+                </button>
+              )}
+            />
+            <TooltipContent>
+              {tooltip}
+            </TooltipContent>
+          </Tooltip>
+        )}
       </div>
       {action}
     </div>
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
index 0f734ea9cc..6c69ff9f5f 100644
--- a/web/app/components/evaluation/index.tsx
+++ b/web/app/components/evaluation/index.tsx
@@ -3,11 +3,12 @@
 import type { EvaluationResourceProps } from './types'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
 import BatchTestPanel from './components/batch-test-panel'
 import ConditionsSection from './components/conditions-section'
 import JudgeModelSelector from './components/judge-model-selector'
 import MetricSection from './components/metric-section'
-import SectionHeader from './components/section-header'
+import SectionHeader, { InlineSectionHeader } from './components/section-header'
 import { useEvaluationStore } from './store'
 
 const Evaluation = ({
@@ -15,6 +16,8 @@ const Evaluation = ({
   resourceId,
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const docLink = useDocLink()
   const ensureResource = useEvaluationStore(state => state.ensureResource)
 
   useEffect(() => {
@@ -22,22 +25,41 @@ const Evaluation = ({
   }, [ensureResource, resourceId, resourceType])
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-background-body xl:flex-row">
-      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 xl:px-8">
-        <div className="mx-auto max-w-5xl space-y-6">
-          <SectionHeader title={t('title')} description={t('description')} />
-          <section className="rounded-2xl border border-divider-subtle bg-components-card-bg p-5">
-            <SectionHeader title={t('judgeModel.title')} description={t('judgeModel.description')} />
-            <div className="mt-4 max-w-[360px]">
+    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto flex min-h-full max-w-[748px] flex-col px-6 py-4">
+          <SectionHeader
+            title={t('title')}
+            description={(
+              <>
+                {t('description')}
+                {' '}
+                <a
+                  className="text-text-accent"
+                  href={docLink()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {tCommon('operation.learnMore')}
+                </a>
+              </>
+            )}
+            descriptionClassName="max-w-[700px]"
+          />
+          <section className="max-w-[700px] py-4">
+            <InlineSectionHeader title={t('judgeModel.title')} tooltip={t('judgeModel.description')} />
+            <div className="mt-1.5">
               <JudgeModelSelector resourceType={resourceType} resourceId={resourceId} />
             </div>
           </section>
+          <div className="max-w-[700px] border-b border-divider-subtle" />
           <MetricSection resourceType={resourceType} resourceId={resourceId} />
+          <div className="max-w-[700px] border-b border-divider-subtle" />
           <ConditionsSection resourceType={resourceType} resourceId={resourceId} />
         </div>
       </div>
 
-      <div className="h-[420px] shrink-0 xl:h-auto xl:w-[360px]">
+      <div className="h-[420px] shrink-0 border-t border-divider-subtle xl:h-auto xl:w-[450px] xl:border-l xl:border-t-0">
         <BatchTestPanel resourceType={resourceType} resourceId={resourceId} />
       </div>
     </div>
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 1b0fb9dc10..27630e2d50 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -1,8 +1,10 @@
 {
+  "batch.description": "Execute batch evaluations and track performance history.",
   "batch.downloadTemplate": "Download Excel Template",
   "batch.emptyHistory": "No test history yet.",
-  "batch.noticeDescription": "Download the template, upload your cases, then run a local mock batch test.",
+  "batch.noticeDescription": "Configuration incomplete. Select the Judge Model and Metrics on the left to generate your batch test template.",
   "batch.noticeTitle": "Quick start",
+  "batch.requirementsDescription": "The input variables required to run this batch test. Ensure your uploaded dataset matches these fields.",
   "batch.requirementsTitle": "Data requirements",
   "batch.run": "Run Test",
   "batch.status.failed": "Failed",
@@ -19,7 +21,7 @@
   "conditions.boolean.false": "False",
   "conditions.boolean.true": "True",
   "conditions.description": "Define additional rules for when results should pass or fail.",
-  "conditions.emptyDescription": "Start with a condition group to define evaluation gates.",
+  "conditions.emptyDescription": "Add metrics above to configure pass/fail thresholds.",
   "conditions.emptyTitle": "No conditions yet",
   "conditions.fieldPlaceholder": "Select field",
   "conditions.groupLabel": "Group {{index}}",
@@ -44,7 +46,7 @@
   "conditions.selectValue": "Choose a value",
   "conditions.title": "Judgment Conditions",
   "conditions.valuePlaceholder": "Enter a value",
-  "description": "Configure judge models, metrics, and batch tests for this resource.",
+  "description": "Configure automated testing to grade your application's performance.",
   "judgeModel.description": "Choose the model used to score your evaluation results.",
   "judgeModel.title": "Judge Model",
   "metrics.add": "Add Metric",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index d62c0417d1..8e8ffdaf4b 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -1,8 +1,10 @@
 {
+  "batch.description": "执行批量评测并追踪性能历史。",
   "batch.downloadTemplate": "下载 Excel 模板",
   "batch.emptyHistory": "还没有测试历史。",
-  "batch.noticeDescription": "先下载模板，再上传测试集，然后运行本地模拟批量测试。",
+  "batch.noticeDescription": "配置尚未完成。请先在左侧选择判定模型和指标，以生成批量测试模板。",
   "batch.noticeTitle": "快速开始",
+  "batch.requirementsDescription": "运行此批量测试所需的输入变量。请确保上传的数据集包含这些字段。",
   "batch.requirementsTitle": "数据要求",
   "batch.run": "运行测试",
   "batch.status.failed": "失败",
@@ -19,7 +21,7 @@
   "conditions.boolean.false": "否",
   "conditions.boolean.true": "是",
   "conditions.description": "定义额外规则，决定结果何时通过或失败。",
-  "conditions.emptyDescription": "从一个条件组开始，定义评测门槛。",
+  "conditions.emptyDescription": "请先添加上方指标，再配置通过 / 失败阈值。",
   "conditions.emptyTitle": "还没有条件",
   "conditions.fieldPlaceholder": "选择字段",
   "conditions.groupLabel": "条件组 {{index}}",
@@ -44,7 +46,7 @@
   "conditions.selectValue": "选择值",
   "conditions.title": "判定条件",
   "conditions.valuePlaceholder": "输入值",
-  "description": "为当前资源配置判定模型、评测指标和批量测试。",
+  "description": "配置自动化测试，对应用表现进行评分。",
   "judgeModel.description": "选择用于打分和判定评测结果的模型。",
   "judgeModel.title": "判定模型",
   "metrics.add": "添加指标",

From 1660067d6e362e7041f5c75d16b6831d9f235665 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 30 Mar 2026 14:03:37 +0800
Subject: [PATCH 043/108] feat(web): judgement model selector

---
 .../evaluation/components/section-header.tsx  |  4 +-
 web/app/components/evaluation/index.tsx       |  2 +-
 .../snippet-evaluation-page.spec.tsx          | 54 ++++++++++++-------
 .../snippets/snippet-evaluation-page.tsx      | 22 ++------
 4 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
index 37073265cd..b2bb630ebe 100644
--- a/web/app/components/evaluation/components/section-header.tsx
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -31,7 +31,7 @@ const SectionHeader = ({
   return (
     <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
       <div>
-        <div className={cn('text-text-primary system-md-semibold', titleClassName)}>{title}</div>
+        <div className={cn('text-text-primary system-xl-semibold', titleClassName)}>{title}</div>
         {description && <div className={cn('mt-1 text-text-tertiary system-sm-regular', descriptionClassName)}>{description}</div>}
       </div>
       {action}
@@ -58,7 +58,7 @@ export const InlineSectionHeader = ({
                   className="flex h-4 w-4 items-center justify-center text-text-quaternary transition-colors hover:text-text-tertiary"
                   aria-label={title}
                 >
-                  <span aria-hidden="true" className="i-ri-information-line h-3.5 w-3.5" />
+                  <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
                 </button>
               )}
             />
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
index 6c69ff9f5f..c7ebca62f0 100644
--- a/web/app/components/evaluation/index.tsx
+++ b/web/app/components/evaluation/index.tsx
@@ -27,7 +27,7 @@ const Evaluation = ({
   return (
     <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto flex min-h-full max-w-[748px] flex-col px-6 py-4">
+        <div className="flex min-h-full max-w-[748px] flex-col px-6 py-4">
           <SectionHeader
             title={t('title')}
             description={(
diff --git a/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
index 21595ac963..4fa34c39f4 100644
--- a/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
+++ b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
@@ -1,8 +1,9 @@
-import type { Snippet } from '@/types/snippet'
+import type { SnippetDetailPayload } from '@/models/snippet'
 import { render, screen } from '@testing-library/react'
 import SnippetEvaluationPage from '../snippet-evaluation-page'
 
 const mockUseSnippetApiDetail = vi.fn()
+const mockGetSnippetDetailMock = vi.fn()
 const mockSetAppSidebarExpand = vi.fn()
 
 vi.mock('@/service/use-snippets', async (importOriginal) => {
@@ -33,6 +34,10 @@ vi.mock('@/next/navigation', () => ({
   }),
 }))
 
+vi.mock('@/service/use-snippets.mock', () => ({
+  getSnippetDetailMock: (snippetId: string) => mockGetSnippetDetailMock(snippetId),
+}))
+
 vi.mock('@/hooks/use-breakpoints', () => ({
   default: () => 'desktop',
   MediaType: { mobile: 'mobile', desktop: 'desktop' },
@@ -69,38 +74,49 @@ vi.mock('@/app/components/evaluation', () => ({
   default: ({ resourceId }: { resourceId: string }) => <div data-testid="evaluation">{resourceId}</div>,
 }))
 
-const mockSnippetApiDetail: Snippet = {
-  id: 'snippet-1',
-  name: 'Tone Rewriter',
-  description: 'A static snippet mock.',
-  type: 'node',
-  is_published: false,
-  version: 'draft',
-  use_count: 19,
-  icon_info: {
-    icon_type: 'emoji',
+const mockSnippetDetail: SnippetDetailPayload = {
+  snippet: {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'A static snippet mock.',
+    author: 'Evan',
+    updatedAt: '2024-03-24',
+    usage: '19',
     icon: '🪄',
-    icon_background: '#E0EAFF',
+    iconBackground: '#E0EAFF',
+  },
+  graph: {
+    nodes: [],
+    edges: [],
+    viewport: {
+      x: 0,
+      y: 0,
+      zoom: 1,
+    },
+  },
+  inputFields: [],
+  uiMeta: {
+    inputFieldCount: 0,
+    checklistCount: 0,
+    autoSavedAt: '2024-03-24 12:00',
   },
-  input_fields: [],
-  created_at: 1_711_609_600,
-  updated_at: 1_711_616_800,
-  author: 'Evan',
 }
 
 describe('SnippetEvaluationPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockUseSnippetApiDetail.mockReturnValue({
-      data: mockSnippetApiDetail,
+      data: undefined,
       isLoading: false,
     })
+    mockGetSnippetDetailMock.mockReturnValue(mockSnippetDetail)
   })
 
-  it('should fetch evaluation route data independently from snippet init', () => {
+  it('should render evaluation with mock snippet detail data', () => {
     render(<SnippetEvaluationPage snippetId="snippet-1" />)
 
-    expect(mockUseSnippetApiDetail).toHaveBeenCalledWith('snippet-1')
+    expect(mockGetSnippetDetailMock).toHaveBeenCalledWith('snippet-1')
+    expect(mockUseSnippetApiDetail).not.toHaveBeenCalled()
     expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
     expect(screen.getByTestId('evaluation')).toHaveTextContent('snippet-1')
   })
diff --git a/web/app/components/snippets/snippet-evaluation-page.tsx b/web/app/components/snippets/snippet-evaluation-page.tsx
index e52c857b3d..736f36fc1e 100644
--- a/web/app/components/snippets/snippet-evaluation-page.tsx
+++ b/web/app/components/snippets/snippet-evaluation-page.tsx
@@ -1,9 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import Loading from '@/app/components/base/loading'
 import Evaluation from '@/app/components/evaluation'
-import { buildSnippetDetailPayload, useSnippetApiDetail } from '@/service/use-snippets'
 import { getSnippetDetailMock } from '@/service/use-snippets.mock'
 import SnippetLayout from './components/snippet-layout'
 
@@ -12,25 +10,11 @@ type SnippetEvaluationPageProps = {
 }
 
 const SnippetEvaluationPage = ({ snippetId }: SnippetEvaluationPageProps) => {
-  const snippetApiDetail = useSnippetApiDetail(snippetId)
   const mockSnippet = useMemo(() => getSnippetDetailMock(snippetId)?.snippet, [snippetId])
-  const snippet = useMemo(() => {
-    if (snippetApiDetail.data)
-      return buildSnippetDetailPayload(snippetApiDetail.data).snippet
+  const snippet = mockSnippet
 
-    if (!snippetApiDetail.isLoading)
-      return mockSnippet
-
-    return undefined
-  }, [mockSnippet, snippetApiDetail.data, snippetApiDetail.isLoading])
-
-  if (!snippet || snippetApiDetail.isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center bg-background-body">
-        <Loading />
-      </div>
-    )
-  }
+  if (!snippet)
+    return null
 
   return (
     <SnippetLayout

From 23d0d6a65df90ecdb04452e647343a4fb2b8baa1 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 30 Mar 2026 14:20:43 +0800
Subject: [PATCH 044/108] chore(web): i18n of metrics

---
 web/i18n/en-US/evaluation.json   | 2 +-
 web/i18n/zh-Hans/evaluation.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 27630e2d50..6f70371f1e 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -62,7 +62,7 @@
   "metrics.custom.warningBadge": "Needs setup",
   "metrics.custom.workflowLabel": "Evaluation Workflow",
   "metrics.custom.workflowPlaceholder": "Select a workflow",
-  "metrics.description": "Combine built-in metrics with custom evaluator workflows.",
+  "metrics.description": "Choose from built-in metrics like Groundedness and Correctness to evaluate your workflow outputs.",
   "metrics.groups.operations": "Operations",
   "metrics.groups.quality": "Quality",
   "metrics.noResults": "No metrics match your search.",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 8e8ffdaf4b..633fa5a97d 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -62,7 +62,7 @@
   "metrics.custom.warningBadge": "待配置",
   "metrics.custom.workflowLabel": "评测工作流",
   "metrics.custom.workflowPlaceholder": "选择工作流",
-  "metrics.description": "组合内置指标和自定义评测工作流。",
+  "metrics.description": "从内置指标中选择，如 Groundedness 和 Correctness ，以评估您的工作流输出。",
   "metrics.groups.operations": "运行",
   "metrics.groups.quality": "质量",
   "metrics.noResults": "没有匹配的指标。",

From b92b8becd1d4d68658c82895e13c5560ed81e753 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 30 Mar 2026 15:39:52 +0800
Subject: [PATCH 045/108] feat(web): metric selector

---
 .../evaluation/__tests__/index.spec.tsx       | 131 +++++++++--
 .../evaluation/__tests__/store.spec.ts        |  24 +++
 .../evaluation/components/metric-section.tsx  |  19 +-
 .../evaluation/components/metric-selector.tsx | 203 ------------------
 .../components/metric-selector/index.tsx      | 149 +++++++++++++
 .../metric-selector/selector-empty-state.tsx  |  26 +++
 .../metric-selector/selector-footer.tsx       |  30 +++
 .../selector-metric-section.tsx               | 135 ++++++++++++
 .../components/metric-selector/types.ts       |  18 ++
 .../use-metric-selector-data.ts               | 167 ++++++++++++++
 .../components/metric-selector/utils.ts       |  77 +++++++
 web/app/components/evaluation/store-utils.ts  |   9 +-
 web/app/components/evaluation/store.ts        |  20 +-
 web/app/components/evaluation/types.ts        |   3 +
 web/i18n/en-US/evaluation.json                |  11 +-
 15 files changed, 786 insertions(+), 236 deletions(-)
 delete mode 100644 web/app/components/evaluation/components/metric-selector.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/index.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/selector-footer.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/types.ts
 create mode 100644 web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
 create mode 100644 web/app/components/evaluation/components/metric-selector/utils.ts

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 55edd6ceb2..8666c8b96d 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -3,6 +3,9 @@ import Evaluation from '..'
 import { getEvaluationMockConfig } from '../mock'
 import { useEvaluationStore } from '../store'
 
+const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
+const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
+
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelList: () => ({
     data: [{
@@ -20,12 +23,39 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-selec
   ),
 }))
 
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
+  useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
+}))
+
 describe('Evaluation', () => {
   beforeEach(() => {
     useEvaluationStore.setState({ resources: {} })
+    vi.clearAllMocks()
+
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['answer-correctness', 'faithfulness'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'answer-correctness': [
+            { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+          ],
+          'faithfulness': [
+            { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+          ],
+        })
+      },
+    })
   })
 
-  it('should search, add metrics, and create a batch history record', async () => {
+  it('should search, select metric nodes, and create a batch history record', async () => {
     vi.useFakeTimers()
 
     render(<Evaluation resourceType="workflow" resourceId="app-1" />)
@@ -33,32 +63,27 @@ describe('Evaluation', () => {
     expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('openai:gpt-4o-mini')
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
-    expect(screen.getByTestId('evaluation-metric-loading')).toBeInTheDocument()
 
-    await act(async () => {
-      vi.advanceTimersByTime(200)
-    })
-
-    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchPlaceholder'), {
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchNodeOrMetrics'), {
       target: { value: 'does-not-exist' },
     })
 
-    await act(async () => {
-      vi.advanceTimersByTime(200)
-    })
-
     expect(screen.getByText('evaluation.metrics.noResults')).toBeInTheDocument()
 
-    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchPlaceholder'), {
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchNodeOrMetrics'), {
       target: { value: 'faith' },
     })
 
-    await act(async () => {
-      vi.advanceTimersByTime(200)
+    fireEvent.click(screen.getByTestId('evaluation-metric-node-faithfulness-node-faithfulness'))
+    expect(screen.getAllByText('Faithfulness').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Retriever Node').length).toBeGreaterThan(0)
+
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchNodeOrMetrics'), {
+      target: { value: '' },
     })
 
-    fireEvent.click(screen.getByRole('button', { name: /Faithfulness/i }))
-    expect(screen.getAllByText('Faithfulness').length).toBeGreaterThan(0)
+    fireEvent.click(screen.getByTestId('evaluation-metric-node-answer-correctness-node-answer'))
+    expect(screen.getAllByText('Answer Correctness').length).toBeGreaterThan(0)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.batch.run' }))
     expect(screen.getByText('evaluation.batch.status.running')).toBeInTheDocument()
@@ -109,4 +134,78 @@ describe('Evaluation', () => {
 
     expect(screen.queryByText('evaluation.conditions.selectTime')).not.toBeInTheDocument()
   })
+
+  it('should render the metric no-node empty state', () => {
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['context-precision'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'context-precision': [],
+        })
+      },
+    })
+
+    render(<Evaluation resourceType="workflow" resourceId="app-3" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    expect(screen.getByText('evaluation.metrics.noNodesInWorkflow')).toBeInTheDocument()
+  })
+
+  it('should render the global empty state when no metrics are available', () => {
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: [],
+      },
+      isLoading: false,
+    })
+
+    render(<Evaluation resourceType="workflow" resourceId="app-4" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    expect(screen.getByText('evaluation.metrics.noResults')).toBeInTheDocument()
+  })
+
+  it('should show more nodes when a metric has more than three nodes', () => {
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['answer-correctness'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'answer-correctness': [
+            { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+            { node_id: 'node-2', title: 'LLM 2', type: 'llm' },
+            { node_id: 'node-3', title: 'LLM 3', type: 'llm' },
+            { node_id: 'node-4', title: 'LLM 4', type: 'llm' },
+          ],
+        })
+      },
+    })
+
+    render(<Evaluation resourceType="workflow" resourceId="app-5" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    expect(screen.getByText('LLM 3')).toBeInTheDocument()
+    expect(screen.queryByText('LLM 4')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.showMore' }))
+
+    expect(screen.getByText('LLM 4')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'evaluation.metrics.showLess' })).toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index d37952be61..83d9fd9de4 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -51,6 +51,30 @@ describe('evaluation store', () => {
     expect(useEvaluationStore.getState().resources['workflow:app-2'].metrics.some(metric => metric.id === addedMetric!.id)).toBe(false)
   })
 
+  it('should upsert builtin metric node selections', () => {
+    const resourceType = 'workflow'
+    const resourceId = 'app-4'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+    const metricId = config.builtinMetrics[0].id
+
+    store.ensureResource(resourceType, resourceId)
+    store.addBuiltinMetric(resourceType, resourceId, metricId, [
+      { node_id: 'node-1', title: 'Answer Node', type: 'answer' },
+    ])
+
+    store.addBuiltinMetric(resourceType, resourceId, metricId, [
+      { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
+    ])
+
+    const metric = useEvaluationStore.getState().resources['workflow:app-4'].metrics.find(item => item.optionId === metricId)
+
+    expect(metric?.nodeInfoList).toEqual([
+      { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
+    ])
+    expect(useEvaluationStore.getState().resources['workflow:app-4'].metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
+  })
+
   it('should update condition groups and adapt operators to field types', () => {
     const resourceType = 'pipeline'
     const resourceId = 'dataset-1'
diff --git a/web/app/components/evaluation/components/metric-section.tsx b/web/app/components/evaluation/components/metric-section.tsx
index f72b214c27..704b432ca3 100644
--- a/web/app/components/evaluation/components/metric-section.tsx
+++ b/web/app/components/evaluation/components/metric-section.tsx
@@ -36,7 +36,7 @@ const MetricSection = ({
           </div>
         )}
         {resource.metrics.map(metric => (
-          <div key={metric.id} className="rounded-xl border border-divider-subtle bg-components-card-bg p-4">
+          <div key={metric.id} className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
             <div className="flex items-start justify-between gap-3">
               <div>
                 <div className="text-text-primary system-sm-semibold">{metric.label}</div>
@@ -46,6 +46,22 @@ const MetricSection = ({
                     <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
                   ))}
                 </div>
+                {metric.kind === 'builtin' && (
+                  <div className="mt-3 rounded-xl bg-background-default-subtle px-3 py-2">
+                    <div className="text-text-secondary system-2xs-medium-uppercase">{t('metrics.nodesLabel')}</div>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {metric.nodeInfoList?.length
+                        ? metric.nodeInfoList.map(nodeInfo => (
+                            <Badge key={nodeInfo.node_id} className="badge-accent">
+                              {nodeInfo.title}
+                            </Badge>
+                          ))
+                        : (
+                            <span className="text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
+                          )}
+                    </div>
+                  </div>
+                )}
               </div>
               <Button
                 size="small"
@@ -68,7 +84,6 @@ const MetricSection = ({
         <MetricSelector
           resourceType={resourceType}
           resourceId={resourceId}
-          triggerStyle="text"
         />
       </div>
     </section>
diff --git a/web/app/components/evaluation/components/metric-selector.tsx b/web/app/components/evaluation/components/metric-selector.tsx
deleted file mode 100644
index 0ea9231b61..0000000000
--- a/web/app/components/evaluation/components/metric-selector.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-'use client'
-
-import type { ChangeEvent } from 'react'
-import type { EvaluationResourceProps } from '../types'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import Input from '@/app/components/base/input'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/app/components/base/ui/popover'
-import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../mock'
-import { useEvaluationResource, useEvaluationStore } from '../store'
-
-type MetricSelectorProps = EvaluationResourceProps & {
-  triggerVariant?: 'primary' | 'warning' | 'secondary' | 'secondary-accent' | 'ghost' | 'ghost-accent' | 'tertiary'
-  triggerClassName?: string
-  triggerStyle?: 'button' | 'text'
-}
-
-const MetricSelector = ({
-  resourceType,
-  resourceId,
-  triggerVariant = 'secondary',
-  triggerClassName,
-  triggerStyle = 'button',
-}: MetricSelectorProps) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const metricGroupLabels = {
-    quality: t('metrics.groups.quality'),
-    operations: t('metrics.groups.operations'),
-  }
-  const metrics = useEvaluationResource(resourceType, resourceId).metrics
-  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
-  const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [showAll, setShowAll] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const loadingTimerRef = useRef<number | null>(null)
-
-  const triggerLoading = () => {
-    if (loadingTimerRef.current)
-      window.clearTimeout(loadingTimerRef.current)
-
-    setIsLoading(true)
-    loadingTimerRef.current = window.setTimeout(() => {
-      setIsLoading(false)
-    }, 180)
-  }
-
-  const handleOpenChange = (nextOpen: boolean) => {
-    setOpen(nextOpen)
-
-    if (nextOpen) {
-      triggerLoading()
-      return
-    }
-
-    if (loadingTimerRef.current)
-      window.clearTimeout(loadingTimerRef.current)
-    setIsLoading(false)
-  }
-
-  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value)
-    if (open)
-      triggerLoading()
-  }
-
-  useEffect(() => {
-    return () => {
-      if (loadingTimerRef.current)
-        window.clearTimeout(loadingTimerRef.current)
-    }
-  }, [])
-
-  const filteredGroups = useMemo(() => {
-    const filteredMetrics = config.builtinMetrics.filter((metric) => {
-      const keyword = query.trim().toLowerCase()
-      if (!keyword)
-        return true
-
-      return metric.label.toLowerCase().includes(keyword) || metric.description.toLowerCase().includes(keyword)
-    })
-
-    const grouped = filteredMetrics.reduce<Record<string, typeof filteredMetrics>>((acc, metric) => {
-      acc[metric.group] = [...(acc[metric.group] ?? []), metric]
-      return acc
-    }, {})
-
-    return Object.entries(grouped)
-  }, [config.builtinMetrics, query])
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger
-        render={(
-          triggerStyle === 'text'
-            ? (
-                <button type="button" className={cn('inline-flex items-center text-text-accent system-sm-medium', triggerClassName)}>
-                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
-                  {t('metrics.add')}
-                </button>
-              )
-            : (
-                <Button variant={triggerVariant} className={triggerClassName}>
-                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
-                  {t('metrics.add')}
-                </Button>
-              )
-        )}
-      />
-      <PopoverContent popupClassName="w-[360px] p-3">
-        <div className="space-y-3">
-          <Input
-            value={query}
-            showLeftIcon
-            placeholder={t('metrics.searchPlaceholder')}
-            onChange={handleQueryChange}
-          />
-          <div className="max-h-[320px] space-y-3 overflow-y-auto pr-1">
-            {isLoading && (
-              <div className="space-y-2" data-testid="evaluation-metric-loading">
-                {['metric-skeleton-1', 'metric-skeleton-2', 'metric-skeleton-3'].map(key => (
-                  <div key={key} className="h-14 animate-pulse rounded-xl bg-background-default-subtle" />
-                ))}
-              </div>
-            )}
-            {!isLoading && filteredGroups.length === 0 && (
-              <div className="rounded-xl border border-dashed border-divider-subtle px-4 py-8 text-center text-text-tertiary system-sm-regular">
-                {t('metrics.noResults')}
-              </div>
-            )}
-            {!isLoading && filteredGroups.map(([groupName, options]) => {
-              const shownOptions = showAll ? options : options.slice(0, 2)
-              return (
-                <div key={groupName}>
-                  <div className="mb-2 text-text-tertiary system-xs-medium-uppercase">{metricGroupLabels[groupName as keyof typeof metricGroupLabels] ?? groupName}</div>
-                  <div className="space-y-2">
-                    {shownOptions.map(option => (
-                      <button
-                        key={option.id}
-                        type="button"
-                        className="w-full rounded-xl border border-divider-subtle px-3 py-3 text-left hover:border-components-button-secondary-border hover:bg-state-base-hover-alt"
-                        onClick={() => {
-                          addBuiltinMetric(resourceType, resourceId, option.id)
-                          setOpen(false)
-                        }}
-                      >
-                        <div className="flex items-start justify-between gap-3">
-                          <div>
-                            <div className="text-text-primary system-sm-semibold">{option.label}</div>
-                            <div className="mt-1 text-text-tertiary system-xs-regular">{option.description}</div>
-                          </div>
-                          {metrics.some(metric => metric.optionId === option.id && metric.kind === 'builtin') && (
-                            <Badge className="badge-accent">{t('metrics.added')}</Badge>
-                          )}
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-          {filteredGroups.some(([, options]) => options.length > 2) && (
-            <button
-              type="button"
-              className="flex items-center text-text-accent system-sm-medium"
-              onClick={() => setShowAll(value => !value)}
-            >
-              {showAll ? t('metrics.showLess') : t('metrics.showMore')}
-              <span
-                aria-hidden="true"
-                className={cn('i-ri-arrow-down-s-line ml-1 h-4 w-4 transition-transform', showAll && 'rotate-180')}
-              />
-            </button>
-          )}
-          <div className="border-t border-divider-subtle pt-3">
-            <Button
-              className="w-full justify-center"
-              variant="ghost-accent"
-              onClick={() => {
-                addCustomMetric(resourceType, resourceId)
-                setOpen(false)
-              }}
-            >
-              {t('metrics.addCustom')}
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export default MetricSelector
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
new file mode 100644
index 0000000000..a01256bb8d
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -0,0 +1,149 @@
+'use client'
+
+import type { ChangeEvent } from 'react'
+import type { MetricSelectorProps } from './types'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { cn } from '@/utils/classnames'
+import { useEvaluationStore } from '../../store'
+import SelectorEmptyState from './selector-empty-state'
+import SelectorFooter from './selector-footer'
+import SelectorMetricSection from './selector-metric-section'
+import { useMetricSelectorData } from './use-metric-selector-data'
+
+const MetricSelector = ({
+  resourceType,
+  resourceId,
+  triggerVariant = 'ghost-accent',
+  triggerClassName,
+  triggerStyle = 'button',
+}: MetricSelectorProps) => {
+  const { t } = useTranslation('evaluation')
+  const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [nodeInfoMap, setNodeInfoMap] = useState<Record<string, Array<{ node_id: string, title: string, type: string }>>>({})
+  const [collapsedMetricMap, setCollapsedMetricMap] = useState<Record<string, boolean>>({})
+  const [expandedMetricNodesMap, setExpandedMetricNodesMap] = useState<Record<string, boolean>>({})
+
+  const {
+    builtinMetricMap,
+    filteredSections,
+    isRemoteLoading,
+    toggleNodeSelection,
+  } = useMetricSelectorData({
+    open,
+    query,
+    resourceType,
+    resourceId,
+    nodeInfoMap,
+    setNodeInfoMap,
+  })
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+
+    if (nextOpen) {
+      setQuery('')
+      setCollapsedMetricMap({})
+      setExpandedMetricNodesMap({})
+    }
+  }
+
+  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger
+        render={(
+          triggerStyle === 'text'
+            ? (
+                <button type="button" className={cn('inline-flex items-center text-text-accent system-sm-medium', triggerClassName)}>
+                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                  {t('metrics.add')}
+                </button>
+              )
+            : (
+                <Button variant={triggerVariant} className={triggerClassName}>
+                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                  {t('metrics.add')}
+                </Button>
+              )
+        )}
+      />
+      <PopoverContent popupClassName="w-[360px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]">
+        <div className="flex min-h-[560px] flex-col bg-components-panel-bg">
+          <div className="border-b border-divider-subtle bg-background-section-burn px-2 py-2">
+            <Input
+              value={query}
+              showLeftIcon
+              placeholder={t('metrics.searchNodeOrMetrics')}
+              onChange={handleQueryChange}
+            />
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {isRemoteLoading && (
+              <div className="space-y-3 px-3 py-4" data-testid="evaluation-metric-loading">
+                {['metric-skeleton-1', 'metric-skeleton-2', 'metric-skeleton-3'].map(key => (
+                  <div key={key} className="h-20 animate-pulse rounded-xl bg-background-default-subtle" />
+                ))}
+              </div>
+            )}
+
+            {!isRemoteLoading && filteredSections.length === 0 && (
+              <SelectorEmptyState message={t('metrics.noResults')} />
+            )}
+
+            {!isRemoteLoading && filteredSections.map((section, index) => {
+              const { metric } = section
+              const isExpanded = collapsedMetricMap[metric.id] !== true
+              const isShowingAllNodes = expandedMetricNodesMap[metric.id] === true
+
+              return (
+                <SelectorMetricSection
+                  key={metric.id}
+                  section={section}
+                  index={index}
+                  addedMetric={builtinMetricMap.get(metric.id)}
+                  isExpanded={isExpanded}
+                  isShowingAllNodes={isShowingAllNodes}
+                  onToggleExpanded={() => setCollapsedMetricMap(current => ({
+                    ...current,
+                    [metric.id]: isExpanded,
+                  }))}
+                  onToggleNodeSelection={toggleNodeSelection}
+                  onToggleShowAllNodes={() => setExpandedMetricNodesMap(current => ({
+                    ...current,
+                    [metric.id]: !isShowingAllNodes,
+                  }))}
+                  t={t}
+                />
+              )
+            })}
+          </div>
+
+          <SelectorFooter
+            title={t('metrics.custom.footerTitle')}
+            description={t('metrics.custom.footerDescription')}
+            onClick={() => {
+              addCustomMetric(resourceType, resourceId)
+              setOpen(false)
+            }}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default MetricSelector
diff --git a/web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx b/web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx
new file mode 100644
index 0000000000..d93a8b84e3
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx
@@ -0,0 +1,26 @@
+type SelectorEmptyStateProps = {
+  message: string
+}
+
+const EmptySearchStateIcon = () => {
+  return (
+    <div className="relative h-8 w-8 text-text-quaternary">
+      <span aria-hidden="true" className="i-ri-search-line absolute bottom-0 right-0 h-6 w-6" />
+      <span aria-hidden="true" className="absolute left-0 top-[9px] h-[2px] w-[7px] rounded-full bg-current opacity-80" />
+      <span aria-hidden="true" className="absolute left-0 top-[16px] h-[2px] w-[4px] rounded-full bg-current opacity-80" />
+    </div>
+  )
+}
+
+const SelectorEmptyState = ({
+  message,
+}: SelectorEmptyStateProps) => {
+  return (
+    <div className="flex h-full min-h-[524px] flex-col items-center justify-center gap-2 px-4 pb-20 text-center">
+      <EmptySearchStateIcon />
+      <div className="text-text-secondary system-sm-regular">{message}</div>
+    </div>
+  )
+}
+
+export default SelectorEmptyState
diff --git a/web/app/components/evaluation/components/metric-selector/selector-footer.tsx b/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
new file mode 100644
index 0000000000..3b8d04474a
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
@@ -0,0 +1,30 @@
+type SelectorFooterProps = {
+  title: string
+  description: string
+  onClick: () => void
+}
+
+const SelectorFooter = ({
+  title,
+  description,
+  onClick,
+}: SelectorFooterProps) => {
+  return (
+    <button
+      type="button"
+      className="relative flex items-center gap-3 overflow-hidden border-t border-divider-subtle bg-background-default-subtle px-4 py-5 text-left hover:bg-state-base-hover-alt"
+      onClick={onClick}
+    >
+      <div className="absolute -left-6 -top-6 h-28 w-28 rounded-full bg-util-colors-indigo-indigo-100 opacity-50 blur-2xl" />
+      <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-[0px_3px_10px_-2px_rgba(9,9,11,0.08),0px_2px_4px_-2px_rgba(9,9,11,0.06)]">
+        <span aria-hidden="true" className="i-ri-add-line h-[18px] w-[18px] text-text-tertiary" />
+      </div>
+      <div className="relative min-w-0">
+        <div className="text-text-secondary system-sm-semibold">{title}</div>
+        <div className="mt-0.5 text-text-tertiary system-xs-regular">{description}</div>
+      </div>
+    </button>
+  )
+}
+
+export default SelectorFooter
diff --git a/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
new file mode 100644
index 0000000000..1eecc3662a
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
@@ -0,0 +1,135 @@
+import type { TFunction } from 'i18next'
+import type { EvaluationMetric } from '../../types'
+import type { MetricSelectorSection } from './types'
+import { cn } from '@/utils/classnames'
+import { getMetricVisual, getNodeVisual, getToneClasses } from './utils'
+
+type SelectorMetricSectionProps = {
+  section: MetricSelectorSection
+  index: number
+  addedMetric?: EvaluationMetric
+  isExpanded: boolean
+  isShowingAllNodes: boolean
+  onToggleExpanded: () => void
+  onToggleShowAllNodes: () => void
+  onToggleNodeSelection: (metricId: string, nodeInfo: MetricSelectorSection['visibleNodes'][number]) => void
+  t: TFunction<'evaluation'>
+}
+
+const SelectorMetricSection = ({
+  section,
+  index,
+  addedMetric,
+  isExpanded,
+  isShowingAllNodes,
+  onToggleExpanded,
+  onToggleShowAllNodes,
+  onToggleNodeSelection,
+  t,
+}: SelectorMetricSectionProps) => {
+  const { metric, visibleNodes, hasNoNodeInfo } = section
+  const selectedNodeIds = new Set(
+    addedMetric?.nodeInfoList?.length
+      ? addedMetric.nodeInfoList.map(nodeInfo => nodeInfo.node_id)
+      : [],
+  )
+  const metricVisual = getMetricVisual(metric.id)
+  const toneClasses = getToneClasses(metricVisual.tone)
+  const hasMoreNodes = visibleNodes.length > 3
+  const shownNodes = hasMoreNodes && !isShowingAllNodes ? visibleNodes.slice(0, 3) : visibleNodes
+
+  return (
+    <div data-testid={`evaluation-metric-option-${metric.id}`}>
+      {index > 0 && (
+        <div className="px-3 pt-1">
+          <div className="h-px w-full bg-divider-subtle" />
+        </div>
+      )}
+
+      <div className="flex items-center justify-between px-4 pb-1 pt-3">
+        <button
+          type="button"
+          className="flex min-w-0 items-center gap-2"
+          onClick={onToggleExpanded}
+        >
+          <div className={cn('flex h-[18px] w-[18px] items-center justify-center rounded-md', toneClasses.soft)}>
+            <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="truncate text-text-secondary system-xs-medium-uppercase">{metric.label}</span>
+            <span
+              aria-hidden="true"
+              className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
+            />
+          </div>
+        </button>
+
+        <button type="button" className="p-px text-text-quaternary">
+          <span aria-hidden="true" className="i-ri-question-line h-[14px] w-[14px]" />
+        </button>
+      </div>
+
+      {isExpanded && (
+        <div className="px-1 py-1">
+          {hasNoNodeInfo && (
+            <div className="px-3 pb-2 pt-0.5 text-text-tertiary system-sm-regular">
+              {t('metrics.noNodesInWorkflow')}
+            </div>
+          )}
+          {shownNodes.map((nodeInfo) => {
+            const nodeVisual = getNodeVisual(nodeInfo)
+            const nodeToneClasses = getToneClasses(nodeVisual.tone)
+            const isAdded = addedMetric
+              ? addedMetric.nodeInfoList?.length
+                ? selectedNodeIds.has(nodeInfo.node_id)
+                : true
+              : false
+
+            return (
+              <button
+                key={nodeInfo.node_id}
+                data-testid={`evaluation-metric-node-${metric.id}-${nodeInfo.node_id}`}
+                type="button"
+                className={cn(
+                  'flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-state-base-hover-alt',
+                  isAdded && 'opacity-50',
+                )}
+                onClick={() => onToggleNodeSelection(metric.id, nodeInfo)}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-2.5 pr-1">
+                  <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                    <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                  </div>
+                  <span className="truncate text-[13px] font-medium leading-4 text-text-secondary">
+                    {nodeInfo.title}
+                  </span>
+                </div>
+                {isAdded && (
+                  <span className="shrink-0 px-1 text-text-quaternary system-xs-regular">{t('metrics.added')}</span>
+                )}
+              </button>
+            )
+          })}
+          {hasMoreNodes && (
+            <button
+              type="button"
+              className="flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-left hover:bg-state-base-hover-alt"
+              onClick={onToggleShowAllNodes}
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-1.5 pr-1">
+                <div className="flex items-center px-1 text-text-tertiary">
+                  <span aria-hidden="true" className={cn(isShowingAllNodes ? 'i-ri-subtract-line' : 'i-ri-more-line', 'h-4 w-4')} />
+                </div>
+                <span className="truncate text-text-tertiary system-xs-regular">
+                  {isShowingAllNodes ? t('metrics.showLess') : t('metrics.showMore')}
+                </span>
+              </div>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SelectorMetricSection
diff --git a/web/app/components/evaluation/components/metric-selector/types.ts b/web/app/components/evaluation/components/metric-selector/types.ts
new file mode 100644
index 0000000000..ff51bd57af
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/types.ts
@@ -0,0 +1,18 @@
+import type { EvaluationMetric, EvaluationResourceProps, MetricOption } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
+
+export type MetricSelectorProps = EvaluationResourceProps & {
+  triggerVariant?: 'primary' | 'warning' | 'secondary' | 'secondary-accent' | 'ghost' | 'ghost-accent' | 'tertiary'
+  triggerClassName?: string
+  triggerStyle?: 'button' | 'text'
+}
+
+export type MetricVisualTone = 'indigo' | 'green'
+
+export type MetricSelectorSection = {
+  metric: MetricOption
+  hasNoNodeInfo: boolean
+  visibleNodes: NodeInfo[]
+}
+
+export type BuiltinMetricMap = Map<string, EvaluationMetric>
diff --git a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
new file mode 100644
index 0000000000..317b325a0f
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
@@ -0,0 +1,167 @@
+import type { BuiltinMetricMap, MetricSelectorSection } from './types'
+import type { NodeInfo } from '@/types/evaluation'
+import { useEffect, useMemo } from 'react'
+import { useAvailableEvaluationMetrics, useEvaluationNodeInfoMutation } from '@/service/use-evaluation'
+import { getEvaluationMockConfig } from '../../mock'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+import {
+  buildMetricOption,
+  dedupeNodeInfoList,
+  toEvaluationTargetType,
+} from './utils'
+
+type UseMetricSelectorDataOptions = {
+  open: boolean
+  query: string
+  resourceType: 'workflow' | 'pipeline' | 'snippet'
+  resourceId: string
+  nodeInfoMap: Record<string, NodeInfo[]>
+  setNodeInfoMap: (value: Record<string, NodeInfo[]>) => void
+}
+
+type UseMetricSelectorDataResult = {
+  builtinMetricMap: BuiltinMetricMap
+  filteredSections: MetricSelectorSection[]
+  isRemoteLoading: boolean
+  toggleNodeSelection: (metricId: string, nodeInfo: NodeInfo) => void
+}
+
+export const useMetricSelectorData = ({
+  open,
+  query,
+  resourceType,
+  resourceId,
+  nodeInfoMap,
+  setNodeInfoMap,
+}: UseMetricSelectorDataOptions): UseMetricSelectorDataResult => {
+  const config = getEvaluationMockConfig(resourceType)
+  const metrics = useEvaluationResource(resourceType, resourceId).metrics
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const { data: availableMetricsData, isLoading: isAvailableMetricsLoading } = useAvailableEvaluationMetrics(open)
+  const { mutate: loadNodeInfo, isPending: isNodeInfoLoading } = useEvaluationNodeInfoMutation()
+
+  const builtinMetrics = useMemo(() => {
+    return metrics.filter(metric => metric.kind === 'builtin')
+  }, [metrics])
+
+  const builtinMetricMap = useMemo(() => {
+    return new Map(builtinMetrics.map(metric => [metric.optionId, metric] as const))
+  }, [builtinMetrics])
+
+  const availableMetricIds = useMemo(() => availableMetricsData?.metrics ?? [], [availableMetricsData?.metrics])
+  const availableMetricIdsKey = availableMetricIds.join(',')
+
+  const resolvedMetrics = useMemo(() => {
+    const metricsMap = new Map(config.builtinMetrics.map(metric => [metric.id, metric] as const))
+    const defaultGroup = config.builtinMetrics[0]?.group ?? 'other'
+
+    return availableMetricIds.map(metricId => metricsMap.get(metricId) ?? buildMetricOption(metricId, defaultGroup))
+  }, [availableMetricIds, config.builtinMetrics])
+
+  useEffect(() => {
+    if (!open)
+      return
+
+    if (resourceType === 'pipeline' || !resourceId || availableMetricIds.length === 0)
+      return
+
+    let isActive = true
+
+    loadNodeInfo(
+      {
+        params: {
+          targetType: toEvaluationTargetType(resourceType),
+          targetId: resourceId,
+        },
+        body: {
+          metrics: availableMetricIds,
+        },
+      },
+      {
+        onSuccess: (data) => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap(data)
+        },
+        onError: () => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap({})
+        },
+      },
+    )
+
+    return () => {
+      isActive = false
+    }
+  }, [availableMetricIds, availableMetricIdsKey, loadNodeInfo, open, resourceId, resourceType, setNodeInfoMap])
+
+  const filteredSections = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+
+    return resolvedMetrics.map((metric) => {
+      const metricMatches = !keyword
+        || metric.label.toLowerCase().includes(keyword)
+        || metric.description.toLowerCase().includes(keyword)
+      const metricNodes = nodeInfoMap[metric.id] ?? []
+      const supportsNodeSelection = resourceType !== 'pipeline'
+      const hasNoNodeInfo = supportsNodeSelection && metricNodes.length === 0
+
+      if (hasNoNodeInfo) {
+        if (!metricMatches)
+          return null
+
+        return {
+          metric,
+          hasNoNodeInfo: true,
+          visibleNodes: [] as NodeInfo[],
+        }
+      }
+
+      const visibleNodes = metricMatches
+        ? metricNodes
+        : metricNodes.filter((nodeInfo) => {
+            return nodeInfo.title.toLowerCase().includes(keyword)
+              || nodeInfo.type.toLowerCase().includes(keyword)
+              || nodeInfo.node_id.toLowerCase().includes(keyword)
+          })
+
+      if (!metricMatches && visibleNodes.length === 0)
+        return null
+
+      return {
+        metric,
+        hasNoNodeInfo: false,
+        visibleNodes,
+      }
+    }).filter(section => !!section)
+  }, [nodeInfoMap, query, resolvedMetrics, resourceType])
+
+  const toggleNodeSelection = (metricId: string, nodeInfo: NodeInfo) => {
+    const addedMetric = builtinMetricMap.get(metricId)
+    const currentSelectedNodes = addedMetric?.nodeInfoList ?? []
+
+    const nextSelectedNodes = addedMetric && currentSelectedNodes.length === 0
+      ? [nodeInfo]
+      : currentSelectedNodes.some(item => item.node_id === nodeInfo.node_id)
+        ? currentSelectedNodes.filter(item => item.node_id !== nodeInfo.node_id)
+        : dedupeNodeInfoList([...currentSelectedNodes, nodeInfo])
+
+    if (addedMetric && nextSelectedNodes.length === 0) {
+      removeMetric(resourceType, resourceId, addedMetric.id)
+      return
+    }
+
+    addBuiltinMetric(resourceType, resourceId, metricId, nextSelectedNodes)
+  }
+
+  return {
+    builtinMetricMap,
+    filteredSections,
+    isRemoteLoading: isAvailableMetricsLoading || isNodeInfoLoading,
+    toggleNodeSelection,
+  }
+}
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
new file mode 100644
index 0000000000..78b8e19426
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -0,0 +1,77 @@
+import type { MetricOption } from '../../types'
+import type { MetricVisualTone } from './types'
+import type { EvaluationTargetType, NodeInfo } from '@/types/evaluation'
+
+export const toEvaluationTargetType = (resourceType: 'workflow' | 'snippet'): EvaluationTargetType => {
+  return resourceType === 'snippet' ? 'snippets' : 'app'
+}
+
+export const humanizeMetricId = (metricId: string) => {
+  return metricId
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+export const buildMetricOption = (metricId: string, fallbackGroup: string): MetricOption => ({
+  id: metricId,
+  label: humanizeMetricId(metricId),
+  description: '',
+  group: fallbackGroup,
+  badges: ['Built-in'],
+})
+
+export const getMetricVisual = (metricId: string): { icon: string, tone: MetricVisualTone } => {
+  if (['context-precision', 'context-recall'].includes(metricId)) {
+    return {
+      icon: metricId === 'context-recall' ? 'i-ri-arrow-go-back-line' : 'i-ri-focus-2-line',
+      tone: 'green',
+    }
+  }
+
+  if (metricId === 'faithfulness')
+    return { icon: 'i-ri-anchor-line', tone: 'indigo' }
+
+  if (metricId === 'tool-correctness')
+    return { icon: 'i-ri-tools-line', tone: 'indigo' }
+
+  if (metricId === 'task-completion')
+    return { icon: 'i-ri-task-line', tone: 'indigo' }
+
+  if (metricId === 'argument-correctness')
+    return { icon: 'i-ri-scales-3-line', tone: 'indigo' }
+
+  return { icon: 'i-ri-checkbox-circle-line', tone: 'indigo' }
+}
+
+export const getNodeVisual = (nodeInfo: NodeInfo): { icon: string, tone: MetricVisualTone } => {
+  const normalizedType = nodeInfo.type.toLowerCase()
+  const normalizedTitle = nodeInfo.title.toLowerCase()
+
+  if (normalizedType.includes('retriev') || normalizedTitle.includes('retriev') || normalizedTitle.includes('knowledge'))
+    return { icon: 'i-ri-book-open-line', tone: 'green' }
+
+  if (normalizedType.includes('agent') || normalizedTitle.includes('agent'))
+    return { icon: 'i-ri-user-star-line', tone: 'indigo' }
+
+  return { icon: 'i-ri-ai-generate-2', tone: 'indigo' }
+}
+
+export const getToneClasses = (tone: MetricVisualTone) => {
+  if (tone === 'green') {
+    return {
+      soft: 'bg-util-colors-green-green-50 text-util-colors-green-green-500',
+      solid: 'bg-util-colors-green-green-500 text-white',
+    }
+  }
+
+  return {
+    soft: 'bg-util-colors-indigo-indigo-50 text-util-colors-indigo-indigo-500',
+    solid: 'bg-util-colors-indigo-indigo-500 text-white',
+  }
+}
+
+export const dedupeNodeInfoList = (nodeInfoList: NodeInfo[]) => {
+  return Array.from(new Map(nodeInfoList.map(nodeInfo => [nodeInfo.node_id, nodeInfo])).values())
+}
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 9724619348..9ce194f989 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -9,6 +9,7 @@ import type {
   JudgmentConditionGroup,
   MetricOption,
 } from './types'
+import type { NodeInfo } from '@/types/evaluation'
 import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
 
 export type EvaluationStoreResources = Record<string, EvaluationResourceState>
@@ -41,13 +42,14 @@ export const getConditionValue = (
   return typeof previousValue === 'string' ? previousValue : null
 }
 
-export const createBuiltinMetric = (metric: MetricOption): EvaluationMetric => ({
+export const createBuiltinMetric = (metric: MetricOption, nodeInfoList: NodeInfo[] = []): EvaluationMetric => ({
   id: createId('metric'),
   optionId: metric.id,
   kind: 'builtin',
   label: metric.label,
   description: metric.description,
   badges: metric.badges,
+  nodeInfoList,
 })
 
 export const createCustomMetricMapping = (): CustomMetricMapping => ({
@@ -88,12 +90,9 @@ export const createConditionGroup = (resourceType: EvaluationResourceType): Judg
 })
 
 export const buildInitialState = (resourceType: EvaluationResourceType): EvaluationResourceState => {
-  const config = getEvaluationMockConfig(resourceType)
-  const defaultMetric = config.builtinMetrics[0]
-
   return {
     judgeModelId: null,
-    metrics: defaultMetric ? [createBuiltinMetric(defaultMetric)] : [],
+    metrics: [],
     conditions: [createConditionGroup(resourceType)],
     activeBatchTab: 'input-fields',
     uploadedFileName: null,
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 26e3fd9e79..402cc68147 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -3,6 +3,7 @@ import type {
   EvaluationResourceState,
   EvaluationResourceType,
 } from './types'
+import type { NodeInfo } from '@/types/evaluation'
 import { create } from 'zustand'
 import { getDefaultOperator, getEvaluationMockConfig } from './mock'
 import {
@@ -16,7 +17,6 @@ import {
   createCustomMetricMapping,
   getAllowedOperators as getAllowedOperatorsFromUtils,
   getConditionValue,
-  getResourceState,
   isCustomMetricConfigured as isCustomMetricConfiguredFromUtils,
   isEvaluationRunnable as isEvaluationRunnableFromUtils,
   requiresConditionValue as requiresConditionValueFromUtils,
@@ -29,7 +29,7 @@ type EvaluationStore = {
   resources: Record<string, EvaluationResourceState>
   ensureResource: (resourceType: EvaluationResourceType, resourceId: string) => void
   setJudgeModel: (resourceType: EvaluationResourceType, resourceId: string, judgeModelId: string) => void
-  addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string) => void
+  addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string, nodeInfoList?: NodeInfo[]) => void
   addCustomMetric: (resourceType: EvaluationResourceType, resourceId: string) => void
   removeMetric: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
   setCustomMetricWorkflow: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, workflowId: string) => void
@@ -85,21 +85,23 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
-  addBuiltinMetric: (resourceType, resourceId, optionId) => {
+  addBuiltinMetric: (resourceType, resourceId, optionId, nodeInfoList = []) => {
     const option = getEvaluationMockConfig(resourceType).builtinMetrics.find(metric => metric.id === optionId)
     if (!option)
       return
 
     set((state) => {
-      const { resource } = getResourceState(state.resources, resourceType, resourceId)
-
-      if (resource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin'))
-        return state
-
       return {
         resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
           ...currentResource,
-          metrics: [...currentResource.metrics, createBuiltinMetric(option)],
+          metrics: currentResource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin')
+            ? currentResource.metrics.map(metric => metric.optionId === optionId && metric.kind === 'builtin'
+                ? {
+                    ...metric,
+                    nodeInfoList,
+                  }
+                : metric)
+            : [...currentResource.metrics, createBuiltinMetric(option, nodeInfoList)],
         })),
       }
     })
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index dfda0e2f6c..fb10d4cde1 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -1,3 +1,5 @@
+import type { NodeInfo } from '@/types/evaluation'
+
 export type EvaluationResourceType = 'workflow' | 'pipeline' | 'snippet'
 
 export type EvaluationResourceProps = {
@@ -78,6 +80,7 @@ export type EvaluationMetric = {
   label: string
   description: string
   badges: string[]
+  nodeInfoList?: NodeInfo[]
   customConfig?: CustomMetricConfig
 }
 
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 6f70371f1e..9fb4198bb0 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -54,6 +54,8 @@
   "metrics.added": "Added",
   "metrics.custom.addMapping": "Add Mapping",
   "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
+  "metrics.custom.footerDescription": "Connect your published evaluation workflows",
+  "metrics.custom.footerTitle": "Custom metrics",
   "metrics.custom.mappingTitle": "Variable Mapping",
   "metrics.custom.mappingWarning": "Complete the workflow selection and each variable mapping to enable batch tests.",
   "metrics.custom.sourcePlaceholder": "Source variable",
@@ -64,12 +66,19 @@
   "metrics.custom.workflowPlaceholder": "Select a workflow",
   "metrics.description": "Choose from built-in metrics like Groundedness and Correctness to evaluate your workflow outputs.",
   "metrics.groups.operations": "Operations",
+  "metrics.groups.other": "Other",
   "metrics.groups.quality": "Quality",
-  "metrics.noResults": "No metrics match your search.",
+  "metrics.noNodesInWorkflow": "No LLM nodes in this workflow",
+  "metrics.noResults": "No metrics or nodes were found",
+  "metrics.nodesAll": "All nodes",
+  "metrics.nodesLabel": "Node Scope",
+  "metrics.nodesSelected": "Selected nodes",
   "metrics.remove": "Remove metric",
+  "metrics.searchNodeOrMetrics": "Search node or metrics",
   "metrics.searchPlaceholder": "Search metrics",
   "metrics.showLess": "Show less",
   "metrics.showMore": "Show more",
   "metrics.title": "Metrics",
+  "metrics.update": "Update",
   "title": "Evaluation"
 }

From 6bec4f65c952f6de986674c2a212e96425d20352 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Mar 2026 16:28:48 +0800
Subject: [PATCH 046/108] refactor(web): metric section refactor

---
 ...itor.tsx => custom-metric-editor-card.tsx} |  8 +-
 .../evaluation/components/metric-section.tsx  | 93 ------------------
 .../metric-section/__tests__/index.spec.tsx   | 94 +++++++++++++++++++
 .../components/metric-section/index.tsx       | 47 ++++++++++
 .../components/metric-section/metric-card.tsx | 74 +++++++++++++++
 .../metric-section-empty-state.tsx            | 18 ++++
 6 files changed, 237 insertions(+), 97 deletions(-)
 rename web/app/components/evaluation/components/{custom-metric-editor.tsx => custom-metric-editor-card.tsx} (97%)
 delete mode 100644 web/app/components/evaluation/components/metric-section.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/index.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/metric-card.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx

diff --git a/web/app/components/evaluation/components/custom-metric-editor.tsx b/web/app/components/evaluation/components/custom-metric-editor-card.tsx
similarity index 97%
rename from web/app/components/evaluation/components/custom-metric-editor.tsx
rename to web/app/components/evaluation/components/custom-metric-editor-card.tsx
index 2c35566bdd..3bc1db061b 100644
--- a/web/app/components/evaluation/components/custom-metric-editor.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor-card.tsx
@@ -17,7 +17,7 @@ import { getEvaluationMockConfig } from '../mock'
 import { isCustomMetricConfigured, useEvaluationStore } from '../store'
 import { groupFieldOptions } from '../utils'
 
-type CustomMetricEditorProps = EvaluationResourceProps & {
+type CustomMetricEditorCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
 }
 
@@ -76,11 +76,11 @@ function MappingRow({
   )
 }
 
-const CustomMetricEditor = ({
+const CustomMetricEditorCard = ({
   resourceType,
   resourceId,
   metric,
-}: CustomMetricEditorProps) => {
+}: CustomMetricEditorCardProps) => {
   const { t } = useTranslation('evaluation')
   const config = getEvaluationMockConfig(resourceType)
   const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
@@ -148,4 +148,4 @@ const CustomMetricEditor = ({
   )
 }
 
-export default CustomMetricEditor
+export default CustomMetricEditorCard
diff --git a/web/app/components/evaluation/components/metric-section.tsx b/web/app/components/evaluation/components/metric-section.tsx
deleted file mode 100644
index 704b432ca3..0000000000
--- a/web/app/components/evaluation/components/metric-section.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client'
-
-import type { EvaluationResourceProps } from '../types'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import { useEvaluationResource, useEvaluationStore } from '../store'
-import CustomMetricEditor from './custom-metric-editor'
-import MetricSelector from './metric-selector'
-import { InlineSectionHeader } from './section-header'
-
-const MetricSection = ({
-  resourceType,
-  resourceId,
-}: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const removeMetric = useEvaluationStore(state => state.removeMetric)
-  const hasMetrics = resource.metrics.length > 0
-
-  return (
-    <section className="max-w-[700px] py-4">
-      <InlineSectionHeader
-        title={t('metrics.title')}
-        tooltip={t('metrics.description')}
-      />
-      <div className="mt-2 space-y-3">
-        {!hasMetrics && (
-          <div className="flex items-center gap-5 rounded-xl bg-background-section px-3 py-3">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-md">
-              <span aria-hidden="true" className="i-ri-bar-chart-horizontal-line h-6 w-6 text-text-primary" />
-            </div>
-            <div className="text-text-tertiary system-xs-regular">
-              {t('metrics.description')}
-            </div>
-          </div>
-        )}
-        {resource.metrics.map(metric => (
-          <div key={metric.id} className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <div className="text-text-primary system-sm-semibold">{metric.label}</div>
-                <div className="mt-1 text-text-tertiary system-xs-regular">{metric.description}</div>
-                <div className="mt-3 flex flex-wrap gap-2">
-                  {metric.badges.map(badge => (
-                    <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
-                  ))}
-                </div>
-                {metric.kind === 'builtin' && (
-                  <div className="mt-3 rounded-xl bg-background-default-subtle px-3 py-2">
-                    <div className="text-text-secondary system-2xs-medium-uppercase">{t('metrics.nodesLabel')}</div>
-                    <div className="mt-2 flex flex-wrap gap-2">
-                      {metric.nodeInfoList?.length
-                        ? metric.nodeInfoList.map(nodeInfo => (
-                            <Badge key={nodeInfo.node_id} className="badge-accent">
-                              {nodeInfo.title}
-                            </Badge>
-                          ))
-                        : (
-                            <span className="text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
-                          )}
-                    </div>
-                  </div>
-                )}
-              </div>
-              <Button
-                size="small"
-                variant="ghost"
-                aria-label={t('metrics.remove')}
-                onClick={() => removeMetric(resourceType, resourceId, metric.id)}
-              >
-                <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
-              </Button>
-            </div>
-            {metric.kind === 'custom-workflow' && (
-              <CustomMetricEditor
-                resourceType={resourceType}
-                resourceId={resourceId}
-                metric={metric}
-              />
-            )}
-          </div>
-        ))}
-        <MetricSelector
-          resourceType={resourceType}
-          resourceId={resourceId}
-        />
-      </div>
-    </section>
-  )
-}
-
-export default MetricSection
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..b112d76f47
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -0,0 +1,94 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import MetricSection from '..'
+import { useEvaluationStore } from '../../../store'
+
+const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
+const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
+
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
+  useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
+}))
+
+const resourceType = 'workflow' as const
+const resourceId = 'metric-section-resource'
+
+const renderMetricSection = () => {
+  return render(<MetricSection resourceType={resourceType} resourceId={resourceId} />)
+}
+
+describe('MetricSection', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useEvaluationStore.setState({ resources: {} })
+
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['answer-correctness'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: vi.fn(),
+    })
+  })
+
+  // Verify the empty state block extracted from MetricSection.
+  describe('Empty State', () => {
+    it('should render the metric empty state when no metrics are selected', () => {
+      renderMetricSection()
+
+      expect(screen.getByText('evaluation.metrics.description')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.add' })).toBeInTheDocument()
+    })
+  })
+
+  // Verify the extracted builtin metric card presentation and removal flow.
+  describe('Builtin Metric Card', () => {
+    it('should render node badges for a builtin metric and remove it when delete is clicked', () => {
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
+          { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+        ])
+      })
+
+      renderMetricSection()
+
+      expect(screen.getByText('Answer Correctness')).toBeInTheDocument()
+      expect(screen.getByText('Answer Node')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.remove' }))
+
+      expect(screen.queryByText('Answer Correctness')).not.toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.description')).toBeInTheDocument()
+    })
+
+    it('should render the all-nodes label when a builtin metric has no node selection', () => {
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [])
+      })
+
+      renderMetricSection()
+
+      expect(screen.getByText('evaluation.metrics.nodesAll')).toBeInTheDocument()
+    })
+  })
+
+  // Verify the extracted custom metric editor card renders inside the metric card.
+  describe('Custom Metric Card', () => {
+    it('should render the custom metric editor card when a custom metric is added', () => {
+      act(() => {
+        useEvaluationStore.getState().addCustomMetric(resourceType, resourceId)
+      })
+
+      renderMetricSection()
+
+      expect(screen.getByText('Custom Evaluator')).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.title')).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.warningBadge')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.custom.addMapping' })).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
new file mode 100644
index 0000000000..582fcbfa30
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import { useEvaluationResource } from '../../store'
+import MetricSelector from '../metric-selector'
+import { InlineSectionHeader } from '../section-header'
+import MetricCard from './metric-card'
+import MetricSectionEmptyState from './metric-section-empty-state'
+
+const MetricSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const hasMetrics = resource.metrics.length > 0
+
+  return (
+    <section className="max-w-[700px] py-4">
+      <InlineSectionHeader
+        title={t('metrics.title')}
+        tooltip={t('metrics.description')}
+      />
+      <div className="mt-2 space-y-3">
+        {!hasMetrics && <MetricSectionEmptyState description={t('metrics.description')} />}
+        {resource.metrics.map(metric => (
+          <MetricCard
+            key={metric.id}
+            resourceType={resourceType}
+            resourceId={resourceId}
+            metric={metric}
+            nodesLabel={t('metrics.nodesLabel')}
+            nodesAllLabel={t('metrics.nodesAll')}
+            removeLabel={t('metrics.remove')}
+          />
+        ))}
+        <MetricSelector
+          resourceType={resourceType}
+          resourceId={resourceId}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default MetricSection
diff --git a/web/app/components/evaluation/components/metric-section/metric-card.tsx b/web/app/components/evaluation/components/metric-section/metric-card.tsx
new file mode 100644
index 0000000000..70af26a2dc
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/metric-card.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import { useEvaluationStore } from '../../store'
+import CustomMetricEditorCard from '../custom-metric-editor-card'
+
+type MetricCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+  nodesLabel: string
+  nodesAllLabel: string
+  removeLabel: string
+}
+
+const MetricCard = ({
+  resourceType,
+  resourceId,
+  metric,
+  nodesLabel,
+  nodesAllLabel,
+  removeLabel,
+}: MetricCardProps) => {
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+
+  return (
+    <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-text-primary system-sm-semibold">{metric.label}</div>
+          <div className="mt-1 text-text-tertiary system-xs-regular">{metric.description}</div>
+          <div className="mt-3 flex flex-wrap gap-2">
+            {metric.badges.map(badge => (
+              <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
+            ))}
+          </div>
+          {metric.kind === 'builtin' && (
+            <div className="mt-3 rounded-xl bg-background-default-subtle px-3 py-2">
+              <div className="text-text-secondary system-2xs-medium-uppercase">{nodesLabel}</div>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {metric.nodeInfoList?.length
+                  ? metric.nodeInfoList.map(nodeInfo => (
+                      <Badge key={nodeInfo.node_id} className="badge-accent">
+                        {nodeInfo.title}
+                      </Badge>
+                    ))
+                  : (
+                      <span className="text-text-tertiary system-xs-regular">{nodesAllLabel}</span>
+                    )}
+              </div>
+            </div>
+          )}
+        </div>
+        <Button
+          size="small"
+          variant="ghost"
+          aria-label={removeLabel}
+          onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+        >
+          <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+        </Button>
+      </div>
+      {metric.kind === 'custom-workflow' && (
+        <CustomMetricEditorCard
+          resourceType={resourceType}
+          resourceId={resourceId}
+          metric={metric}
+        />
+      )}
+    </div>
+  )
+}
+
+export default MetricCard
diff --git a/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
new file mode 100644
index 0000000000..657cdcbdd1
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
@@ -0,0 +1,18 @@
+type MetricSectionEmptyStateProps = {
+  description: string
+}
+
+const MetricSectionEmptyState = ({ description }: MetricSectionEmptyStateProps) => {
+  return (
+    <div className="flex items-center gap-5 rounded-xl bg-background-section px-3 py-3">
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-md">
+        <span aria-hidden="true" className="i-ri-bar-chart-horizontal-line h-6 w-6 text-text-primary" />
+      </div>
+      <div className="text-text-tertiary system-xs-regular">
+        {description}
+      </div>
+    </div>
+  )
+}
+
+export default MetricSectionEmptyState

From 351b909a539185d5af4213eac365a0dd862e5c06 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Mar 2026 17:00:37 +0800
Subject: [PATCH 047/108] feat(web): metric card

---
 .../components/custom-metric-editor-card.tsx  | 106 +++++++-------
 .../metric-section/__tests__/index.spec.tsx   |   2 +-
 .../components/metric-section/index.tsx       |   6 +-
 .../components/metric-section/metric-card.tsx | 134 +++++++++++++-----
 .../metric-section-empty-state.tsx            |   9 +-
 5 files changed, 160 insertions(+), 97 deletions(-)

diff --git a/web/app/components/evaluation/components/custom-metric-editor-card.tsx b/web/app/components/evaluation/components/custom-metric-editor-card.tsx
index 3bc1db061b..d9caf5c137 100644
--- a/web/app/components/evaluation/components/custom-metric-editor-card.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor-card.tsx
@@ -2,7 +2,6 @@
 
 import type { CustomMetricMapping, EvaluationMetric, EvaluationResourceProps, EvaluationResourceType } from '../types'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
 import {
   Select,
@@ -13,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/app/components/base/ui/select'
+import { cn } from '@/utils/classnames'
 import { getEvaluationMockConfig } from '../mock'
 import { isCustomMetricConfigured, useEvaluationStore } from '../store'
 import { groupFieldOptions } from '../utils'
@@ -40,9 +40,9 @@ function MappingRow({
   const config = getEvaluationMockConfig(resourceType)
 
   return (
-    <div className="grid gap-2 rounded-xl border border-divider-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
+    <div className="grid gap-2 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
       <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
-        <SelectTrigger>
+        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
           <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
         </SelectTrigger>
         <SelectContent>
@@ -60,7 +60,7 @@ function MappingRow({
         <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4 -rotate-90" />
       </div>
       <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
-        <SelectTrigger>
+        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
           <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
         </SelectTrigger>
         <SelectContent>
@@ -94,55 +94,59 @@ const CustomMetricEditorCard = ({
     return null
 
   return (
-    <div className="mt-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <div className="text-text-primary system-sm-semibold">{t('metrics.custom.title')}</div>
-          <div className="mt-1 text-text-tertiary system-xs-regular">{t('metrics.custom.description')}</div>
-        </div>
-        {!isConfigured && <Badge className="badge-warning">{t('metrics.custom.warningBadge')}</Badge>}
-      </div>
-      <div className="mt-4 grid gap-4 xl:grid-cols-[220px_minmax(0,1fr)]">
-        <div>
-          <div className="mb-2 text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.workflowLabel')}</div>
-          <Select value={metric.customConfig.workflowId ?? ''} onValueChange={value => value && setCustomMetricWorkflow(resourceType, resourceId, metric.id, value)}>
-            <SelectTrigger>
-              <SelectValue placeholder={t('metrics.custom.workflowPlaceholder')} />
-            </SelectTrigger>
-            <SelectContent>
-              {config.workflowOptions.map(option => (
-                <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {selectedWorkflow && <div className="mt-2 text-text-tertiary system-xs-regular">{selectedWorkflow.description}</div>}
-        </div>
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <div className="text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.mappingTitle')}</div>
-            <Button size="small" variant="ghost" onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}>
-              <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
-              {t('metrics.custom.addMapping')}
-            </Button>
-          </div>
-          <div className="space-y-2">
-            {metric.customConfig.mappings.map(mapping => (
-              <MappingRow
-                key={mapping.id}
-                resourceType={resourceType}
-                mapping={mapping}
-                targetOptions={selectedWorkflow?.targetVariables ?? []}
-                onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
-                onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
-              />
-            ))}
-          </div>
-          {!isConfigured && (
-            <div className="mt-3 rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
-              {t('metrics.custom.mappingWarning')}
+    <div className="px-3 pb-3 pt-1">
+      <Select value={metric.customConfig.workflowId ?? ''} onValueChange={value => value && setCustomMetricWorkflow(resourceType, resourceId, metric.id, value)}>
+        <SelectTrigger className="h-auto rounded-lg bg-components-input-bg-normal p-1 hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal">
+          <div className="flex min-w-0 items-center gap-2">
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+              <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
+                <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
+              </div>
             </div>
-          )}
+            <div className="min-w-0 flex-1 px-1 py-1 text-left">
+              <div className={cn('truncate system-sm-regular', selectedWorkflow ? 'text-text-secondary' : 'text-components-input-text-placeholder')}>
+                {selectedWorkflow?.label ?? t('metrics.custom.workflowPlaceholder')}
+              </div>
+            </div>
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {config.workflowOptions.map(option => (
+            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <div className="mt-4">
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <div className="text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.mappingTitle')}</div>
+          <Button
+            size="small"
+            variant="ghost"
+            className="text-text-accent"
+            onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}
+          >
+            <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+            {t('metrics.custom.addMapping')}
+          </Button>
         </div>
+        <div className="space-y-2">
+          {metric.customConfig.mappings.map(mapping => (
+            <MappingRow
+              key={mapping.id}
+              resourceType={resourceType}
+              mapping={mapping}
+              targetOptions={selectedWorkflow?.targetVariables ?? []}
+              onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
+              onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
+            />
+          ))}
+        </div>
+        {!isConfigured && (
+          <div className="mt-3 rounded-lg bg-background-section px-3 py-2 text-text-tertiary system-xs-regular">
+            {t('metrics.custom.mappingWarning')}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index b112d76f47..b7cb0780d8 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -86,8 +86,8 @@ describe('MetricSection', () => {
       renderMetricSection()
 
       expect(screen.getByText('Custom Evaluator')).toBeInTheDocument()
-      expect(screen.getByText('evaluation.metrics.custom.title')).toBeInTheDocument()
       expect(screen.getByText('evaluation.metrics.custom.warningBadge')).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.workflowPlaceholder')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: 'evaluation.metrics.custom.addMapping' })).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
index 582fcbfa30..c244e27a8a 100644
--- a/web/app/components/evaluation/components/metric-section/index.tsx
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -22,7 +22,7 @@ const MetricSection = ({
         title={t('metrics.title')}
         tooltip={t('metrics.description')}
       />
-      <div className="mt-2 space-y-3">
+      <div className="mt-1 space-y-1">
         {!hasMetrics && <MetricSectionEmptyState description={t('metrics.description')} />}
         {resource.metrics.map(metric => (
           <MetricCard
@@ -30,14 +30,16 @@ const MetricSection = ({
             resourceType={resourceType}
             resourceId={resourceId}
             metric={metric}
-            nodesLabel={t('metrics.nodesLabel')}
             nodesAllLabel={t('metrics.nodesAll')}
             removeLabel={t('metrics.remove')}
+            customWarningLabel={t('metrics.custom.warningBadge')}
           />
         ))}
         <MetricSelector
           resourceType={resourceType}
           resourceId={resourceId}
+          triggerStyle="text"
+          triggerClassName="rounded-md px-3 py-2 hover:bg-state-base-hover-alt"
         />
       </div>
     </section>
diff --git a/web/app/components/evaluation/components/metric-section/metric-card.tsx b/web/app/components/evaluation/components/metric-section/metric-card.tsx
index 70af26a2dc..a1ddc55c32 100644
--- a/web/app/components/evaluation/components/metric-section/metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/metric-card.tsx
@@ -3,63 +3,125 @@
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
-import { useEvaluationStore } from '../../store'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { cn } from '@/utils/classnames'
+import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
 import CustomMetricEditorCard from '../custom-metric-editor-card'
+import { getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
 
 type MetricCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
-  nodesLabel: string
   nodesAllLabel: string
   removeLabel: string
+  customWarningLabel: string
 }
 
 const MetricCard = ({
   resourceType,
   resourceId,
   metric,
-  nodesLabel,
   nodesAllLabel,
   removeLabel,
+  customWarningLabel,
 }: MetricCardProps) => {
+  const updateBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
   const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const metricVisual = metric.kind === 'custom-workflow'
+    ? { icon: 'i-ri-equalizer-2-line', tone: 'indigo' as const }
+    : getMetricVisual(metric.optionId)
+  const metricToneClasses = getToneClasses(metricVisual.tone)
+  const isCustomMetricInvalid = metric.kind === 'custom-workflow' && !isCustomMetricConfigured(metric)
+  const hasSelectedNodes = metric.kind === 'builtin' && !!metric.nodeInfoList?.length
 
   return (
-    <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <div className="text-text-primary system-sm-semibold">{metric.label}</div>
-          <div className="mt-1 text-text-tertiary system-xs-regular">{metric.description}</div>
-          <div className="mt-3 flex flex-wrap gap-2">
-            {metric.badges.map(badge => (
-              <Badge key={badge} className={badge === 'Workflow' ? 'badge-accent' : ''}>{badge}</Badge>
-            ))}
+    <div
+      className={cn(
+        'overflow-hidden rounded-xl border border-components-panel-border',
+        hasSelectedNodes ? 'bg-background-section' : 'bg-components-card-bg',
+      )}
+    >
+      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
+        <div className="flex min-w-0 flex-1 items-center gap-2 px-1">
+          <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
+            <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
+          </div>
+          <div className="flex min-w-0 items-center gap-1">
+            <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
+            {metric.description && (
+              <Tooltip>
+                <TooltipTrigger
+                  render={(
+                    <button
+                      type="button"
+                      className="flex h-4 w-4 shrink-0 items-center justify-center text-text-quaternary transition-colors hover:text-text-tertiary"
+                      aria-label={metric.label}
+                    >
+                      <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
+                    </button>
+                  )}
+                />
+                <TooltipContent>
+                  {metric.description}
+                </TooltipContent>
+              </Tooltip>
+            )}
           </div>
-          {metric.kind === 'builtin' && (
-            <div className="mt-3 rounded-xl bg-background-default-subtle px-3 py-2">
-              <div className="text-text-secondary system-2xs-medium-uppercase">{nodesLabel}</div>
-              <div className="mt-2 flex flex-wrap gap-2">
-                {metric.nodeInfoList?.length
-                  ? metric.nodeInfoList.map(nodeInfo => (
-                      <Badge key={nodeInfo.node_id} className="badge-accent">
-                        {nodeInfo.title}
-                      </Badge>
-                    ))
-                  : (
-                      <span className="text-text-tertiary system-xs-regular">{nodesAllLabel}</span>
-                    )}
-              </div>
-            </div>
-          )}
         </div>
-        <Button
-          size="small"
-          variant="ghost"
-          aria-label={removeLabel}
-          onClick={() => removeMetric(resourceType, resourceId, metric.id)}
-        >
-          <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
-        </Button>
+        <div className="flex shrink-0 items-center gap-1">
+          {isCustomMetricInvalid && (
+            <Badge className="badge-warning">
+              {customWarningLabel}
+            </Badge>
+          )}
+          <Button
+            size="small"
+            variant="ghost"
+            aria-label={removeLabel}
+            onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+          >
+            <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+          </Button>
+        </div>
       </div>
+
+      {metric.kind === 'builtin' && (
+        <div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
+          {metric.nodeInfoList?.length
+            ? metric.nodeInfoList.map((nodeInfo) => {
+                const nodeVisual = getNodeVisual(nodeInfo)
+                const nodeToneClasses = getToneClasses(nodeVisual.tone)
+
+                return (
+                  <div
+                    key={nodeInfo.node_id}
+                    className="inline-flex min-w-[18px] items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1.5 shadow-xs"
+                  >
+                    <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                      <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                    </div>
+                    <span className="px-1 text-text-primary system-xs-regular">{nodeInfo.title}</span>
+                    <button
+                      type="button"
+                      className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
+                      aria-label={nodeInfo.title}
+                      onClick={() => updateBuiltinMetric(
+                        resourceType,
+                        resourceId,
+                        metric.optionId,
+                        metric.nodeInfoList?.filter(item => item.node_id !== nodeInfo.node_id) ?? [],
+                      )}
+                    >
+                      <span aria-hidden="true" className="i-ri-close-line h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                )
+              })
+            : (
+                <span className="px-1 text-text-tertiary system-xs-regular">{nodesAllLabel}</span>
+              )}
+        </div>
+      )}
+
       {metric.kind === 'custom-workflow' && (
         <CustomMetricEditorCard
           resourceType={resourceType}
diff --git a/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
index 657cdcbdd1..eab57e2a55 100644
--- a/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
+++ b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
@@ -4,13 +4,8 @@ type MetricSectionEmptyStateProps = {
 
 const MetricSectionEmptyState = ({ description }: MetricSectionEmptyStateProps) => {
   return (
-    <div className="flex items-center gap-5 rounded-xl bg-background-section px-3 py-3">
-      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-md">
-        <span aria-hidden="true" className="i-ri-bar-chart-horizontal-line h-6 w-6 text-text-primary" />
-      </div>
-      <div className="text-text-tertiary system-xs-regular">
-        {description}
-      </div>
+    <div className="rounded-xl bg-background-section px-4 py-4 text-text-tertiary system-xs-regular">
+      {description}
     </div>
   )
 }

From 023fc55bd57cabaa556e1f5c5c377839938a8425 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Mar 2026 17:11:44 +0800
Subject: [PATCH 048/108] fix(web): empty state of metric

---
 .../metric-section/metric-section-empty-state.tsx        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
index eab57e2a55..918a93e430 100644
--- a/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
+++ b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
@@ -4,8 +4,13 @@ type MetricSectionEmptyStateProps = {
 
 const MetricSectionEmptyState = ({ description }: MetricSectionEmptyStateProps) => {
   return (
-    <div className="rounded-xl bg-background-section px-4 py-4 text-text-tertiary system-xs-regular">
-      {description}
+    <div className="flex items-center gap-5 rounded-xl bg-background-section p-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-md">
+        <span aria-hidden="true" className="i-ri-bar-chart-horizontal-line h-6 w-6 text-text-primary" />
+      </div>
+      <div className="min-w-0 flex-1 text-text-tertiary system-xs-regular">
+        {description}
+      </div>
     </div>
   )
 }

From a6ffff3b392df4528fb5e0726d82656c312488aa Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Mar 2026 17:22:07 +0800
Subject: [PATCH 049/108] fix(web): fix style of metric selector

---
 .../components/evaluation/components/metric-section/index.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
index c244e27a8a..f9f8ccc33b 100644
--- a/web/app/components/evaluation/components/metric-section/index.tsx
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -38,8 +38,7 @@ const MetricSection = ({
         <MetricSelector
           resourceType={resourceType}
           resourceId={resourceId}
-          triggerStyle="text"
-          triggerClassName="rounded-md px-3 py-2 hover:bg-state-base-hover-alt"
+          triggerClassName="rounded-md px-3 py-2"
         />
       </div>
     </section>

From 688bf7e7a1e2f7bc7f4672eec9bce2afd7ffdd81 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Mar 2026 17:43:56 +0800
Subject: [PATCH 050/108] feat(web): metric card style

---
 .../metric-section/__tests__/index.spec.tsx   |  29 ++++
 .../metric-section/builtin-metric-card.tsx    | 101 +++++++++++++
 .../metric-section/custom-metric-card.tsx     |  63 +++++++++
 .../components/metric-section/index.tsx       |   3 -
 .../components/metric-section/metric-card.tsx | 133 +++---------------
 web/i18n/en-US/evaluation.json                |   2 +
 6 files changed, 211 insertions(+), 120 deletions(-)
 create mode 100644 web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/custom-metric-card.tsx

diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index b7cb0780d8..4fb22e7595 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -48,14 +48,17 @@ describe('MetricSection', () => {
   // Verify the extracted builtin metric card presentation and removal flow.
   describe('Builtin Metric Card', () => {
     it('should render node badges for a builtin metric and remove it when delete is clicked', () => {
+      // Arrange
       act(() => {
         useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
           { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
         ])
       })
 
+      // Act
       renderMetricSection()
 
+      // Assert
       expect(screen.getByText('Answer Correctness')).toBeInTheDocument()
       expect(screen.getByText('Answer Node')).toBeInTheDocument()
 
@@ -66,14 +69,40 @@ describe('MetricSection', () => {
     })
 
     it('should render the all-nodes label when a builtin metric has no node selection', () => {
+      // Arrange
       act(() => {
         useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [])
       })
 
+      // Act
       renderMetricSection()
 
+      // Assert
       expect(screen.getByText('evaluation.metrics.nodesAll')).toBeInTheDocument()
     })
+
+    it('should collapse and expand the node section when the metric header is clicked', () => {
+      // Arrange
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
+          { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+        ])
+      })
+
+      // Act
+      renderMetricSection()
+
+      const toggleButton = screen.getByRole('button', { name: 'evaluation.metrics.collapseNodes' })
+      fireEvent.click(toggleButton)
+
+      // Assert
+      expect(screen.queryByText('Answer Node')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.expandNodes' })).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.expandNodes' }))
+
+      expect(screen.getByText('Answer Node')).toBeInTheDocument()
+    })
   })
 
   // Verify the extracted custom metric editor card renders inside the metric card.
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
new file mode 100644
index 0000000000..ece7c35892
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
+import { useEvaluationStore } from '../../store'
+import { getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
+
+type BuiltinMetricCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+}
+
+const BuiltinMetricCard = ({
+  resourceType,
+  resourceId,
+  metric,
+}: BuiltinMetricCardProps) => {
+  const { t } = useTranslation('evaluation')
+  const updateBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const [isExpanded, setIsExpanded] = useState(true)
+  const metricVisual = getMetricVisual(metric.optionId)
+  const metricToneClasses = getToneClasses(metricVisual.tone)
+
+  return (
+    <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
+      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
+        <button
+          type="button"
+          className="flex min-w-0 flex-1 items-center gap-2 px-1 text-left"
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? t('metrics.collapseNodes') : t('metrics.expandNodes')}
+          onClick={() => setIsExpanded(current => !current)}
+        >
+          <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
+            <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
+          </div>
+          <div className="flex min-w-0 items-center gap-0.5">
+            <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
+            <span
+              aria-hidden="true"
+              className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
+            />
+          </div>
+        </button>
+
+        <Button
+          size="small"
+          variant="ghost"
+          aria-label={t('metrics.remove')}
+          className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity hover:text-text-secondary focus-visible:opacity-100 group-hover:opacity-100"
+          onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+        >
+          <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+        </Button>
+      </div>
+
+      {isExpanded && (
+        <div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
+          {metric.nodeInfoList?.length
+            ? metric.nodeInfoList.map((nodeInfo) => {
+                const nodeVisual = getNodeVisual(nodeInfo)
+                const nodeToneClasses = getToneClasses(nodeVisual.tone)
+
+                return (
+                  <div
+                    key={nodeInfo.node_id}
+                    className="inline-flex min-w-[18px] items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1.5 shadow-xs"
+                  >
+                    <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                      <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                    </div>
+                    <span className="px-1 text-text-primary system-xs-regular">{nodeInfo.title}</span>
+                    <button
+                      type="button"
+                      className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
+                      aria-label={nodeInfo.title}
+                      onClick={() => updateBuiltinMetric(
+                        resourceType,
+                        resourceId,
+                        metric.optionId,
+                        metric.nodeInfoList?.filter(item => item.node_id !== nodeInfo.node_id) ?? [],
+                      )}
+                    >
+                      <span aria-hidden="true" className="i-ri-close-line h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                )
+              })
+            : (
+                <span className="px-1 text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
+              )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default BuiltinMetricCard
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
new file mode 100644
index 0000000000..e327ffbf63
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
+import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
+import CustomMetricEditorCard from '../custom-metric-editor-card'
+import { getToneClasses } from '../metric-selector/utils'
+
+type CustomMetricCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+}
+
+const CustomMetricCard = ({
+  resourceType,
+  resourceId,
+  metric,
+}: CustomMetricCardProps) => {
+  const { t } = useTranslation('evaluation')
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const isCustomMetricInvalid = !isCustomMetricConfigured(metric)
+  const metricToneClasses = getToneClasses('indigo')
+
+  return (
+    <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
+      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
+        <div className="flex min-w-0 flex-1 items-center gap-2 px-1">
+          <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
+            <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5" />
+          </div>
+          <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-1">
+          {isCustomMetricInvalid && (
+            <Badge className="badge-warning">
+              {t('metrics.custom.warningBadge')}
+            </Badge>
+          )}
+          <Button
+            size="small"
+            variant="ghost"
+            aria-label={t('metrics.remove')}
+            className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity hover:text-text-secondary focus-visible:opacity-100 group-hover:opacity-100"
+            onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+          >
+            <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <CustomMetricEditorCard
+        resourceType={resourceType}
+        resourceId={resourceId}
+        metric={metric}
+      />
+    </div>
+  )
+}
+
+export default CustomMetricCard
diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
index f9f8ccc33b..70a9606ee5 100644
--- a/web/app/components/evaluation/components/metric-section/index.tsx
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -30,9 +30,6 @@ const MetricSection = ({
             resourceType={resourceType}
             resourceId={resourceId}
             metric={metric}
-            nodesAllLabel={t('metrics.nodesAll')}
-            removeLabel={t('metrics.remove')}
-            customWarningLabel={t('metrics.custom.warningBadge')}
           />
         ))}
         <MetricSelector
diff --git a/web/app/components/evaluation/components/metric-section/metric-card.tsx b/web/app/components/evaluation/components/metric-section/metric-card.tsx
index a1ddc55c32..b066420998 100644
--- a/web/app/components/evaluation/components/metric-section/metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/metric-card.tsx
@@ -1,135 +1,34 @@
 'use client'
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
-import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
-import CustomMetricEditorCard from '../custom-metric-editor-card'
-import { getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
+import BuiltinMetricCard from './builtin-metric-card'
+import CustomMetricCard from './custom-metric-card'
 
 type MetricCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
-  nodesAllLabel: string
-  removeLabel: string
-  customWarningLabel: string
 }
 
 const MetricCard = ({
   resourceType,
   resourceId,
   metric,
-  nodesAllLabel,
-  removeLabel,
-  customWarningLabel,
 }: MetricCardProps) => {
-  const updateBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
-  const removeMetric = useEvaluationStore(state => state.removeMetric)
-  const metricVisual = metric.kind === 'custom-workflow'
-    ? { icon: 'i-ri-equalizer-2-line', tone: 'indigo' as const }
-    : getMetricVisual(metric.optionId)
-  const metricToneClasses = getToneClasses(metricVisual.tone)
-  const isCustomMetricInvalid = metric.kind === 'custom-workflow' && !isCustomMetricConfigured(metric)
-  const hasSelectedNodes = metric.kind === 'builtin' && !!metric.nodeInfoList?.length
+  if (metric.kind === 'custom-workflow') {
+    return (
+      <CustomMetricCard
+        resourceType={resourceType}
+        resourceId={resourceId}
+        metric={metric}
+      />
+    )
+  }
 
   return (
-    <div
-      className={cn(
-        'overflow-hidden rounded-xl border border-components-panel-border',
-        hasSelectedNodes ? 'bg-background-section' : 'bg-components-card-bg',
-      )}
-    >
-      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
-        <div className="flex min-w-0 flex-1 items-center gap-2 px-1">
-          <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
-            <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
-          </div>
-          <div className="flex min-w-0 items-center gap-1">
-            <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
-            {metric.description && (
-              <Tooltip>
-                <TooltipTrigger
-                  render={(
-                    <button
-                      type="button"
-                      className="flex h-4 w-4 shrink-0 items-center justify-center text-text-quaternary transition-colors hover:text-text-tertiary"
-                      aria-label={metric.label}
-                    >
-                      <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
-                    </button>
-                  )}
-                />
-                <TooltipContent>
-                  {metric.description}
-                </TooltipContent>
-              </Tooltip>
-            )}
-          </div>
-        </div>
-        <div className="flex shrink-0 items-center gap-1">
-          {isCustomMetricInvalid && (
-            <Badge className="badge-warning">
-              {customWarningLabel}
-            </Badge>
-          )}
-          <Button
-            size="small"
-            variant="ghost"
-            aria-label={removeLabel}
-            onClick={() => removeMetric(resourceType, resourceId, metric.id)}
-          >
-            <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      {metric.kind === 'builtin' && (
-        <div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
-          {metric.nodeInfoList?.length
-            ? metric.nodeInfoList.map((nodeInfo) => {
-                const nodeVisual = getNodeVisual(nodeInfo)
-                const nodeToneClasses = getToneClasses(nodeVisual.tone)
-
-                return (
-                  <div
-                    key={nodeInfo.node_id}
-                    className="inline-flex min-w-[18px] items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1.5 shadow-xs"
-                  >
-                    <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
-                      <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
-                    </div>
-                    <span className="px-1 text-text-primary system-xs-regular">{nodeInfo.title}</span>
-                    <button
-                      type="button"
-                      className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
-                      aria-label={nodeInfo.title}
-                      onClick={() => updateBuiltinMetric(
-                        resourceType,
-                        resourceId,
-                        metric.optionId,
-                        metric.nodeInfoList?.filter(item => item.node_id !== nodeInfo.node_id) ?? [],
-                      )}
-                    >
-                      <span aria-hidden="true" className="i-ri-close-line h-3.5 w-3.5" />
-                    </button>
-                  </div>
-                )
-              })
-            : (
-                <span className="px-1 text-text-tertiary system-xs-regular">{nodesAllLabel}</span>
-              )}
-        </div>
-      )}
-
-      {metric.kind === 'custom-workflow' && (
-        <CustomMetricEditorCard
-          resourceType={resourceType}
-          resourceId={resourceId}
-          metric={metric}
-        />
-      )}
-    </div>
+    <BuiltinMetricCard
+      resourceType={resourceType}
+      resourceId={resourceId}
+      metric={metric}
+    />
   )
 }
 
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 9fb4198bb0..a691f99fa2 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -52,6 +52,7 @@
   "metrics.add": "Add Metric",
   "metrics.addCustom": "Add Custom Metrics",
   "metrics.added": "Added",
+  "metrics.collapseNodes": "Collapse nodes",
   "metrics.custom.addMapping": "Add Mapping",
   "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
   "metrics.custom.footerDescription": "Connect your published evaluation workflows",
@@ -65,6 +66,7 @@
   "metrics.custom.workflowLabel": "Evaluation Workflow",
   "metrics.custom.workflowPlaceholder": "Select a workflow",
   "metrics.description": "Choose from built-in metrics like Groundedness and Correctness to evaluate your workflow outputs.",
+  "metrics.expandNodes": "Expand nodes",
   "metrics.groups.operations": "Operations",
   "metrics.groups.other": "Other",
   "metrics.groups.quality": "Quality",

From 873e13c2fb344fa9f103b0cc1be9d622a2d4deb9 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 31 Mar 2026 18:07:52 +0800
Subject: [PATCH 051/108] feat(web): support select node in metric card

---
 .../metric-section/__tests__/index.spec.tsx   | 67 ++++++++++++++++++-
 .../metric-section/builtin-metric-card.tsx    | 67 +++++++++++++++++--
 .../components/metric-section/index.tsx       | 50 ++++++++++++++
 .../components/metric-section/metric-card.tsx |  4 ++
 4 files changed, 183 insertions(+), 5 deletions(-)

diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index 4fb22e7595..36ee1fae1c 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -31,7 +31,13 @@ describe('MetricSection', () => {
 
     mockUseEvaluationNodeInfoMutation.mockReturnValue({
       isPending: false,
-      mutate: vi.fn(),
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'answer-correctness': [
+            { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+          ],
+        })
+      },
     })
   })
 
@@ -103,6 +109,65 @@ describe('MetricSection', () => {
 
       expect(screen.getByText('Answer Node')).toBeInTheDocument()
     })
+
+    it('should show only unselected nodes in the add-node dropdown and append the selected node', () => {
+      // Arrange
+      mockUseEvaluationNodeInfoMutation.mockReturnValue({
+        isPending: false,
+        mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+          options?.onSuccess?.({
+            'answer-correctness': [
+              { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+              { node_id: 'node-2', title: 'LLM 2', type: 'llm' },
+            ],
+          })
+        },
+      })
+
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
+          { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+        ])
+      })
+
+      // Act
+      renderMetricSection()
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.addNode' }))
+
+      // Assert
+      expect(screen.queryByRole('menuitem', { name: 'LLM 1' })).not.toBeInTheDocument()
+      fireEvent.click(screen.getByRole('menuitem', { name: 'LLM 2' }))
+
+      expect(screen.getByText('LLM 2')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'evaluation.metrics.addNode' })).not.toBeInTheDocument()
+    })
+
+    it('should hide the add-node button when the builtin metric already targets all nodes', () => {
+      // Arrange
+      mockUseEvaluationNodeInfoMutation.mockReturnValue({
+        isPending: false,
+        mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+          options?.onSuccess?.({
+            'answer-correctness': [
+              { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+              { node_id: 'node-2', title: 'LLM 2', type: 'llm' },
+            ],
+          })
+        },
+      })
+
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [])
+      })
+
+      // Act
+      renderMetricSection()
+
+      // Assert
+      expect(screen.getByText('evaluation.metrics.nodesAll')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'evaluation.metrics.addNode' })).not.toBeInTheDocument()
+    })
   })
 
   // Verify the extracted custom metric editor card renders inside the metric card.
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
index ece7c35892..cccbb43b49 100644
--- a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -1,21 +1,30 @@
 'use client'
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { cn } from '@/utils/classnames'
 import { useEvaluationStore } from '../../store'
-import { getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
+import { dedupeNodeInfoList, getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
 
 type BuiltinMetricCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
+  availableNodeInfoList?: NodeInfo[]
 }
 
 const BuiltinMetricCard = ({
   resourceType,
   resourceId,
   metric,
+  availableNodeInfoList = [],
 }: BuiltinMetricCardProps) => {
   const { t } = useTranslation('evaluation')
   const updateBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
@@ -23,6 +32,12 @@ const BuiltinMetricCard = ({
   const [isExpanded, setIsExpanded] = useState(true)
   const metricVisual = getMetricVisual(metric.optionId)
   const metricToneClasses = getToneClasses(metricVisual.tone)
+  const selectedNodeInfoList = metric.nodeInfoList ?? []
+  const selectedNodeIdSet = new Set(selectedNodeInfoList.map(nodeInfo => nodeInfo.node_id))
+  const selectableNodeInfoList = selectedNodeInfoList.length > 0
+    ? availableNodeInfoList.filter(nodeInfo => !selectedNodeIdSet.has(nodeInfo.node_id))
+    : []
+  const shouldShowAddNode = selectableNodeInfoList.length > 0
 
   return (
     <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
@@ -59,8 +74,8 @@ const BuiltinMetricCard = ({
 
       {isExpanded && (
         <div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
-          {metric.nodeInfoList?.length
-            ? metric.nodeInfoList.map((nodeInfo) => {
+          {selectedNodeInfoList.length
+            ? selectedNodeInfoList.map((nodeInfo) => {
                 const nodeVisual = getNodeVisual(nodeInfo)
                 const nodeToneClasses = getToneClasses(nodeVisual.tone)
 
@@ -81,7 +96,7 @@ const BuiltinMetricCard = ({
                         resourceType,
                         resourceId,
                         metric.optionId,
-                        metric.nodeInfoList?.filter(item => item.node_id !== nodeInfo.node_id) ?? [],
+                        selectedNodeInfoList.filter(item => item.node_id !== nodeInfo.node_id),
                       )}
                     >
                       <span aria-hidden="true" className="i-ri-close-line h-3.5 w-3.5" />
@@ -92,6 +107,50 @@ const BuiltinMetricCard = ({
             : (
                 <span className="px-1 text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
               )}
+
+          {shouldShowAddNode && (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={(
+                  <button
+                    type="button"
+                    className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-background-default-hover text-text-tertiary transition-colors hover:bg-state-base-hover"
+                  />
+                )}
+              >
+                <span aria-hidden="true" className="i-ri-add-line h-4 w-4 shrink-0" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                placement="bottom-start"
+                popupClassName="w-[252px] rounded-md border-[0.5px] border-components-panel-border py-1 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]"
+              >
+                {selectableNodeInfoList.map((nodeInfo) => {
+                  const nodeVisual = getNodeVisual(nodeInfo)
+                  const nodeToneClasses = getToneClasses(nodeVisual.tone)
+
+                  return (
+                    <DropdownMenuItem
+                      key={nodeInfo.node_id}
+                      className="h-auto gap-0 rounded-md px-3 py-1.5"
+                      onClick={() => updateBuiltinMetric(
+                        resourceType,
+                        resourceId,
+                        metric.optionId,
+                        dedupeNodeInfoList([...selectedNodeInfoList, nodeInfo]),
+                      )}
+                    >
+                      <div className="flex min-w-0 flex-1 items-center gap-2.5 pr-1">
+                        <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                          <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                        </div>
+                        <span className="truncate text-text-secondary system-sm-medium">{nodeInfo.title}</span>
+                      </div>
+                    </DropdownMenuItem>
+                  )
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
       )}
     </div>
diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
index 70a9606ee5..eac266c996 100644
--- a/web/app/components/evaluation/components/metric-section/index.tsx
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -1,9 +1,13 @@
 'use client'
 
 import type { EvaluationResourceProps } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useAvailableEvaluationMetrics, useEvaluationNodeInfoMutation } from '@/service/use-evaluation'
 import { useEvaluationResource } from '../../store'
 import MetricSelector from '../metric-selector'
+import { toEvaluationTargetType } from '../metric-selector/utils'
 import { InlineSectionHeader } from '../section-header'
 import MetricCard from './metric-card'
 import MetricSectionEmptyState from './metric-section-empty-state'
@@ -14,7 +18,52 @@ const MetricSection = ({
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
   const resource = useEvaluationResource(resourceType, resourceId)
+  const [nodeInfoMap, setNodeInfoMap] = useState<Record<string, NodeInfo[]>>({})
   const hasMetrics = resource.metrics.length > 0
+  const hasBuiltinMetrics = resource.metrics.some(metric => metric.kind === 'builtin')
+  const shouldLoadNodeInfo = resourceType !== 'pipeline' && !!resourceId && hasBuiltinMetrics
+  const { data: availableMetricsData } = useAvailableEvaluationMetrics(shouldLoadNodeInfo)
+  const { mutate: loadNodeInfo } = useEvaluationNodeInfoMutation()
+  const availableMetricIds = useMemo(() => availableMetricsData?.metrics ?? [], [availableMetricsData?.metrics])
+  const availableMetricIdsKey = availableMetricIds.join(',')
+  const resolvedNodeInfoMap = shouldLoadNodeInfo ? nodeInfoMap : {}
+
+  useEffect(() => {
+    if (!shouldLoadNodeInfo || availableMetricIds.length === 0)
+      return
+
+    let isActive = true
+
+    loadNodeInfo(
+      {
+        params: {
+          targetType: toEvaluationTargetType(resourceType),
+          targetId: resourceId,
+        },
+        body: {
+          metrics: availableMetricIds,
+        },
+      },
+      {
+        onSuccess: (data) => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap(data)
+        },
+        onError: () => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap({})
+        },
+      },
+    )
+
+    return () => {
+      isActive = false
+    }
+  }, [availableMetricIds, availableMetricIdsKey, loadNodeInfo, resourceId, resourceType, shouldLoadNodeInfo])
 
   return (
     <section className="max-w-[700px] py-4">
@@ -30,6 +79,7 @@ const MetricSection = ({
             resourceType={resourceType}
             resourceId={resourceId}
             metric={metric}
+            availableNodeInfoList={metric.kind === 'builtin' ? (resolvedNodeInfoMap[metric.optionId] ?? []) : undefined}
           />
         ))}
         <MetricSelector
diff --git a/web/app/components/evaluation/components/metric-section/metric-card.tsx b/web/app/components/evaluation/components/metric-section/metric-card.tsx
index b066420998..5d2088d52e 100644
--- a/web/app/components/evaluation/components/metric-section/metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/metric-card.tsx
@@ -1,17 +1,20 @@
 'use client'
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
 import BuiltinMetricCard from './builtin-metric-card'
 import CustomMetricCard from './custom-metric-card'
 
 type MetricCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
+  availableNodeInfoList?: NodeInfo[]
 }
 
 const MetricCard = ({
   resourceType,
   resourceId,
   metric,
+  availableNodeInfoList,
 }: MetricCardProps) => {
   if (metric.kind === 'custom-workflow') {
     return (
@@ -28,6 +31,7 @@ const MetricCard = ({
       resourceType={resourceType}
       resourceId={resourceId}
       metric={metric}
+      availableNodeInfoList={availableNodeInfoList}
     />
   )
 }

From 61e257b2a8cdff51ebfaaf044788dd61f948192b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 13:56:00 +0800
Subject: [PATCH 052/108] feat(web): app switch api

---
 web/contract/console/apps.ts            | 16 +++++
 web/contract/router.ts                  |  3 +-
 web/service/__tests__/use-apps.spec.tsx | 96 +++++++++++++++++++++++++
 web/service/use-apps.ts                 | 25 +++++++
 web/types/app.ts                        | 10 +++
 web/types/workflow.ts                   |  2 +
 6 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 web/service/__tests__/use-apps.spec.tsx

diff --git a/web/contract/console/apps.ts b/web/contract/console/apps.ts
index 4fbcfec0cf..00f730977e 100644
--- a/web/contract/console/apps.ts
+++ b/web/contract/console/apps.ts
@@ -1,3 +1,4 @@
+import type { WorkflowTypeConversionTarget } from '@/types/workflow'
 import { type } from '@orpc/contract'
 import { base } from '../base'
 
@@ -12,3 +13,18 @@ export const appDeleteContract = base
     }
   }>())
   .output(type<unknown>())
+
+export const appWorkflowTypeConvertContract = base
+  .route({
+    path: '/apps/{appId}/workflows/convert-type',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+    query: {
+      target_type: WorkflowTypeConversionTarget
+    }
+  }>())
+  .output(type<unknown>())
diff --git a/web/contract/router.ts b/web/contract/router.ts
index e07f8e5167..c7c2d2ad87 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -1,5 +1,5 @@
 import type { InferContractRouterInputs } from '@orpc/contract'
-import { appDeleteContract } from './console/apps'
+import { appDeleteContract, appWorkflowTypeConvertContract } from './console/apps'
 import { bindPartnerStackContract, invoicesContract } from './console/billing'
 import {
   availableEvaluationMetricsContract,
@@ -98,6 +98,7 @@ export const consoleRouterContract = {
   systemFeatures: systemFeaturesContract,
   apps: {
     deleteApp: appDeleteContract,
+    convertWorkflowType: appWorkflowTypeConvertContract,
   },
   explore: {
     apps: exploreAppsContract,
diff --git a/web/service/__tests__/use-apps.spec.tsx b/web/service/__tests__/use-apps.spec.tsx
new file mode 100644
index 0000000000..76d7b87943
--- /dev/null
+++ b/web/service/__tests__/use-apps.spec.tsx
@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { useConvertWorkflowTypeMutation } from '../use-apps'
+
+const {
+  invalidateQueries,
+  convertWorkflowTypeMutationFn,
+  convertWorkflowTypeMutationOptions,
+} = vi.hoisted(() => ({
+  invalidateQueries: vi.fn(),
+  convertWorkflowTypeMutationFn: vi.fn(),
+  convertWorkflowTypeMutationOptions: vi.fn(),
+}))
+
+vi.mock('@tanstack/react-query', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tanstack/react-query')>()
+
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries,
+    }),
+  }
+})
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {},
+  consoleQuery: {
+    apps: {
+      convertWorkflowType: {
+        mutationOptions: convertWorkflowTypeMutationOptions,
+      },
+    },
+  },
+}))
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+// Scenario: workflow type conversion forwards the expected API input and refreshes app caches.
+describe('useConvertWorkflowTypeMutation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    convertWorkflowTypeMutationFn.mockResolvedValue({})
+    convertWorkflowTypeMutationOptions.mockImplementation(options => ({
+      mutationFn: convertWorkflowTypeMutationFn,
+      onSuccess: options?.onSuccess,
+    }))
+  })
+
+  it('should convert workflow type and invalidate app queries when mutation succeeds', async () => {
+    // Arrange
+    const { result } = renderHook(() => useConvertWorkflowTypeMutation(), {
+      wrapper: createWrapper(),
+    })
+
+    // Act
+    await act(async () => {
+      result.current.mutate({
+        params: { appId: 'app-1' },
+        query: { target_type: 'evaluation' },
+      })
+    })
+
+    // Assert
+    await waitFor(() => {
+      expect(convertWorkflowTypeMutationFn).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: 'evaluation' },
+      })
+    })
+    await waitFor(() => {
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: ['apps', 'detail', 'app-1'],
+      })
+    })
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['apps', 'list'],
+    })
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['apps', 'full-list'],
+    })
+  })
+})
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index f28df7bd4b..b9b920e848 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -11,6 +11,7 @@ import type {
   WorkflowDailyConversationsResponse,
 } from '@/models/app'
 import type { App } from '@/types/app'
+import type { WorkflowTypeConversionTarget } from '@/types/workflow'
 import {
   keepPreviousData,
   useInfiniteQuery,
@@ -148,6 +149,30 @@ export const useDeleteAppMutation = () => {
   })
 }
 
+export const useConvertWorkflowTypeMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.apps.convertWorkflowType.mutationOptions({
+      onSuccess: async (_, variables) => {
+        await Promise.all([
+          queryClient.invalidateQueries({
+            queryKey: [NAME_SPACE, 'detail', variables.params.appId],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: [NAME_SPACE, 'list'],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: useAppFullListKey,
+          }),
+        ])
+      },
+    }),
+  })
+}
+
+export type { WorkflowTypeConversionTarget }
+
 const useAppStatisticsQuery = <T>(metric: string, appId: string, params?: DateRangeParams) => {
   return useQuery<T>({
     queryKey: [NAME_SPACE, 'statistics', metric, appId, params],
diff --git a/web/types/app.ts b/web/types/app.ts
index b782a78730..440328af65 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -47,6 +47,14 @@ export enum AppModeEnum {
 }
 export const AppModes = [AppModeEnum.COMPLETION, AppModeEnum.WORKFLOW, AppModeEnum.CHAT, AppModeEnum.ADVANCED_CHAT, AppModeEnum.AGENT_CHAT] as const
 
+export enum AppTypeEnum {
+  WORKFLOW = 'workflow',
+  CHAT = 'chat',
+  RAG_PIPELINE = 'rag-pipeline',
+  SNIPPET = 'snippet',
+  EVALUATION = 'evaluation',
+}
+
 /**
  * Variable type
  */
@@ -325,6 +333,8 @@ export type App = {
 
   /** Mode */
   mode: AppModeEnum
+  /** Type */
+  type?: AppTypeEnum
   /** Enable web app */
   enable_site: boolean
   /** Enable web API */
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index 9e7dfd7e7a..fc457e602e 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -427,6 +427,8 @@ export type PublishWorkflowParams = {
   releaseNotes: string
 }
 
+export type WorkflowTypeConversionTarget = 'workflow' | 'evaluation'
+
 export type UpdateWorkflowParams = {
   url: string
   title: string

From 6651c1c5da7bfcc1fc1d1db11d840250f1ea046b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 14:22:50 +0800
Subject: [PATCH 053/108] feat(web): workflow switch

---
 .../components/app/app-publisher/index.tsx    | 98 ++++++++++++++++++-
 web/i18n/en-US/workflow.json                  |  6 ++
 web/i18n/zh-Hans/workflow.json                |  6 ++
 3 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 0b5f629829..e48d523bff 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -21,6 +21,11 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import {
+  Tooltip as UITooltip,
+  TooltipContent as UITooltipContent,
+  TooltipTrigger as UITooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import { appDefaultIconBackground } from '@/config'
@@ -31,7 +36,8 @@ import { AccessMode } from '@/models/access-control'
 import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { fetchInstalledAppList } from '@/service/explore'
-import { AppModeEnum } from '@/types/app'
+import { useConvertWorkflowTypeMutation } from '@/service/use-apps'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import Divider from '../../base/divider'
 import Loading from '../../base/loading'
@@ -108,6 +114,21 @@ export type AppPublisherProps = {
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
+const WORKFLOW_TYPE_SWITCH_CONFIG = {
+  [AppTypeEnum.WORKFLOW]: {
+    targetType: AppTypeEnum.EVALUATION,
+    publishLabelKey: 'common.publishAsEvaluationWorkflow',
+    switchLabelKey: 'common.switchToEvaluationWorkflow',
+    tipKey: 'common.switchToEvaluationWorkflowTip',
+  },
+  [AppTypeEnum.EVALUATION]: {
+    targetType: AppTypeEnum.WORKFLOW,
+    publishLabelKey: 'common.publishAsStandardWorkflow',
+    switchLabelKey: 'common.switchToStandardWorkflow',
+    tipKey: 'common.switchToStandardWorkflowTip',
+  },
+} as const
+
 const AppPublisher = ({
   disabled = false,
   publishDisabled = false,
@@ -142,10 +163,13 @@ const AppPublisher = ({
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
+  const { mutateAsync: convertWorkflowType, isPending: isConvertingWorkflowType } = useConvertWorkflowTypeMutation()
 
   const appMode = (appDetail?.mode !== AppModeEnum.COMPLETION && appDetail?.mode !== AppModeEnum.WORKFLOW) ? AppModeEnum.CHAT : appDetail.mode
   const appURL = `${appBaseURL}${basePath}/${appMode}/${accessToken}`
   const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
+  const workflowTypeSwitchConfig = appDetail?.type ? WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type as keyof typeof WORKFLOW_TYPE_SWITCH_CONFIG] : undefined
+  const isEvaluationWorkflowType = appDetail?.type === AppTypeEnum.EVALUATION
 
   const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
   const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
@@ -236,6 +260,35 @@ const AppPublisher = ({
     }
   }, [appDetail, setAppDetail])
 
+  const handleWorkflowTypeSwitch = useCallback(async () => {
+    if (!appDetail?.id || !workflowTypeSwitchConfig)
+      return
+
+    try {
+      await convertWorkflowType({
+        params: {
+          appId: appDetail.id,
+        },
+        query: {
+          target_type: workflowTypeSwitchConfig.targetType,
+        },
+      })
+
+      if (!publishedAt)
+        await handlePublish()
+
+      const latestAppDetail = await fetchAppDetailDirect({
+        url: '/apps',
+        id: appDetail.id,
+      })
+      setAppDetail(latestAppDetail)
+
+      if (publishedAt)
+        setOpen(false)
+    }
+    catch { }
+  }, [appDetail?.id, convertWorkflowType, handlePublish, publishedAt, setAppDetail, workflowTypeSwitchConfig])
+
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
     e.preventDefault()
     if (publishDisabled || published)
@@ -336,6 +389,45 @@ const AppPublisher = ({
                               )
                         }
                       </Button>
+                      {workflowTypeSwitchConfig && (
+                        <button
+                          type="button"
+                          className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 text-text-tertiary system-sm-medium hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
+                          onClick={handleWorkflowTypeSwitch}
+                          disabled={publishDisabled || published || isConvertingWorkflowType}
+                        >
+                          <span className="px-0.5">
+                            {t(
+                              publishedAt
+                                ? workflowTypeSwitchConfig.switchLabelKey
+                                : workflowTypeSwitchConfig.publishLabelKey,
+                              { ns: 'workflow' },
+                            )}
+                          </span>
+                          <UITooltip>
+                            <UITooltipTrigger
+                              render={(
+                                <span
+                                  aria-label={t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                                  className="flex h-4 w-4 items-center justify-center text-text-quaternary hover:text-text-tertiary"
+                                  onClick={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                  }}
+                                >
+                                  <span className="i-ri-question-line h-3.5 w-3.5" />
+                                </span>
+                              )}
+                            />
+                            <UITooltipContent
+                              placement="top"
+                              popupClassName="w-[180px]"
+                            >
+                              {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                            </UITooltipContent>
+                          </UITooltip>
+                        </button>
+                      )}
                       {showStartNodeLimitHint && (
                         <div className="mt-3 flex flex-col items-stretch">
                           <p
@@ -357,9 +449,9 @@ const AppPublisher = ({
                     </>
                   )}
             </div>
-            {(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))
+            {!isEvaluationWorkflowType && (systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))
               ? <div className="py-2"><Loading /></div>
-              : (
+              : !isEvaluationWorkflowType && (
                   <>
                     <Divider className="my-0" />
                     {systemFeatures.webapp_auth.enabled && (
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 8d590627de..91161bbc04 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -198,6 +198,8 @@
   "common.previewPlaceholder": "Enter content in the box below to start debugging the Chatbot",
   "common.processData": "Process Data",
   "common.publish": "Publish",
+  "common.publishAsEvaluationWorkflow": "Publish as Evaluation Workflow",
+  "common.publishAsStandardWorkflow": "Publish as Standard Workflow",
   "common.publishUpdate": "Publish Update",
   "common.published": "Published",
   "common.publishedAt": "Published",
@@ -213,6 +215,10 @@
   "common.searchVar": "Search variable",
   "common.setVarValuePlaceholder": "Set variable",
   "common.showRunHistory": "Show Run History",
+  "common.switchToEvaluationWorkflow": "Switch to Evaluation Workflow",
+  "common.switchToEvaluationWorkflowTip": "Turns this workflow into a custom evaluator for batch testing. Disables public Web App access.",
+  "common.switchToStandardWorkflow": "Switch to Standard Workflow",
+  "common.switchToStandardWorkflowTip": "Turns this evaluator back into a standard workflow and restores public Web App access.",
   "common.syncingData": "Syncing data, just a few seconds.",
   "common.tagBound": "Number of apps using this tag",
   "common.undo": "Undo",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index d603c1b27d..a82a89c581 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -198,6 +198,8 @@
   "common.previewPlaceholder": "在下面的框中输入内容开始调试聊天机器人",
   "common.processData": "数据处理",
   "common.publish": "发布",
+  "common.publishAsEvaluationWorkflow": "发布为评测工作流",
+  "common.publishAsStandardWorkflow": "发布为标准工作流",
   "common.publishUpdate": "发布更新",
   "common.published": "已发布",
   "common.publishedAt": "发布于",
@@ -213,6 +215,10 @@
   "common.searchVar": "搜索变量",
   "common.setVarValuePlaceholder": "设置变量值",
   "common.showRunHistory": "显示运行历史",
+  "common.switchToEvaluationWorkflow": "切换为评测工作流",
+  "common.switchToEvaluationWorkflowTip": "将当前工作流转换为批量测试用的自定义评测器，并禁用公开 Web App 访问。",
+  "common.switchToStandardWorkflow": "切换为标准工作流",
+  "common.switchToStandardWorkflowTip": "将当前评测器转换回标准工作流，并恢复公开 Web App 访问。",
   "common.syncingData": "同步数据中，只需几秒钟。",
   "common.tagBound": "使用此标签的应用数量",
   "common.undo": "撤销",

From 756606f4781231359134cad98ddf39656c852805 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 14:39:41 +0800
Subject: [PATCH 054/108] feat(web): hide card view in evaluation

---
 .../__tests__/app-info-detail-panel.spec.tsx       | 13 ++++++++++++-
 .../app-sidebar/app-info/app-info-detail-panel.tsx | 14 ++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
index 3082eb3789..1bfae24094 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
@@ -2,7 +2,7 @@ import type { App, AppSSO } from '@/types/app'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import AppInfoDetailPanel from '../app-info-detail-panel'
 
 vi.mock('../../../base/app-icon', () => ({
@@ -135,6 +135,17 @@ describe('AppInfoDetailPanel', () => {
       expect(cardView).toHaveAttribute('data-app-id', 'app-1')
     })
 
+    it('should not render CardView when app type is evaluation', () => {
+      render(
+        <AppInfoDetailPanel
+          {...defaultProps}
+          appDetail={createAppDetail({ type: AppTypeEnum.EVALUATION })}
+        />,
+      )
+
+      expect(screen.queryByTestId('card-view')).not.toBeInTheDocument()
+    })
+
     it('should render app icon with large size', () => {
       render(<AppInfoDetailPanel {...defaultProps} />)
       const icon = screen.getByTestId('app-icon')
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 4aacc0cdb1..43c5711490 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
 import Button from '@/app/components/base/button'
 import ContentDialog from '@/app/components/base/content-dialog'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import AppIcon from '../../base/app-icon'
 import { getAppModeLabel } from './app-mode-labels'
 import AppOperations from './app-operations'
@@ -126,11 +126,13 @@ const AppInfoDetailPanel = ({
           secondaryOperations={secondaryOperations}
         />
       </div>
-      <CardView
-        appId={appDetail.id}
-        isInPanel={true}
-        className="flex flex-1 flex-col gap-2 overflow-auto px-2 py-1"
-      />
+      {appDetail.type !== AppTypeEnum.EVALUATION && (
+        <CardView
+          appId={appDetail.id}
+          isInPanel={true}
+          className="flex flex-1 flex-col gap-2 overflow-auto px-2 py-1"
+        />
+      )}
       {switchOperation && (
         <div className="flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch pb-2">
           <Button

From 231783eebe694aa8010d2d41fd47fa618ba3c99f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 15:13:52 +0800
Subject: [PATCH 055/108] chore(web): fix lint

---
 .../app-info/app-info-detail-panel.tsx        |  10 +-
 .../components/app/app-publisher/index.tsx    |  28 +--
 .../config/automatic/get-automatic-res.tsx    |  10 +-
 .../code-generator/get-code-generator-res.tsx |   6 +-
 .../components/apps/app-type-filter-shared.ts |   5 +-
 web/app/components/apps/app-type-filter.tsx   |   5 +-
 web/app/components/base/ui/select/index.tsx   |  12 +-
 .../components/metric-selector/utils.ts       |   2 +-
 web/app/components/evaluation/store-utils.ts  |   6 +-
 .../workflow/create-snippet-dialog.tsx        |  14 +-
 web/service/__tests__/use-apps.spec.tsx       |  11 +-
 web/service/use-apps.ts                       |   3 -
 web/service/use-evaluation.ts                 | 212 +-----------------
 web/service/use-snippet-workflows.ts          | 101 ---------
 web/service/use-snippets.mock.ts              |  25 +--
 web/service/use-snippets.ts                   |  91 --------
 web/types/app.ts                              | 129 ++++++-----
 17 files changed, 137 insertions(+), 533 deletions(-)

diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 43c5711490..8d28846081 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -97,7 +97,7 @@ const AppInfoDetailPanel = ({
     <ContentDialog
       show={show}
       onClose={onClose}
-      className="absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl p-0!"
+      className="absolute top-2 bottom-2 left-2 flex w-[420px] flex-col rounded-2xl p-0!"
     >
       <div className="flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4">
         <div className="flex items-center gap-3 self-stretch">
@@ -109,14 +109,14 @@ const AppInfoDetailPanel = ({
             imageUrl={appDetail.icon_url}
           />
           <div className="flex flex-1 flex-col items-start justify-center overflow-hidden">
-            <div className="w-full truncate text-text-secondary system-md-semibold">{appDetail.name}</div>
-            <div className="text-text-tertiary system-2xs-medium-uppercase">
+            <div className="w-full truncate system-md-semibold text-text-secondary">{appDetail.name}</div>
+            <div className="system-2xs-medium-uppercase text-text-tertiary">
               {getAppModeLabel(appDetail.mode, t)}
             </div>
           </div>
         </div>
         {appDetail.description && (
-          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto whitespace-normal wrap-break-word text-text-tertiary system-xs-regular">
+          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
             {appDetail.description}
           </div>
         )}
@@ -142,7 +142,7 @@ const AppInfoDetailPanel = ({
             onClick={switchOperation.onClick}
           >
             {switchOperation.icon}
-            <span className="text-text-tertiary system-sm-medium">{switchOperation.title}</span>
+            <span className="system-sm-medium text-text-tertiary">{switchOperation.title}</span>
           </Button>
         </div>
       )}
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index e48d523bff..ca8441cfb4 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -1,7 +1,7 @@
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { I18nKeysByPrefix } from '@/types/i18n'
-import type { PublishWorkflowParams } from '@/types/workflow'
+import type { PublishWorkflowParams, WorkflowTypeConversionTarget } from '@/types/workflow'
 import { useKeyPress } from 'ahooks'
 import {
   memo,
@@ -82,7 +82,7 @@ const AccessModeDisplay: React.FC<{ mode?: AccessMode }> = ({ mode }) => {
     <>
       <span className={`${icon} h-4 w-4 shrink-0 text-text-secondary`} />
       <div className="grow truncate">
-        <span className="text-text-secondary system-sm-medium">{t(`accessControlDialog.accessItems.${label}`, { ns: 'app' })}</span>
+        <span className="system-sm-medium text-text-secondary">{t(`accessControlDialog.accessItems.${label}`, { ns: 'app' })}</span>
       </div>
     </>
   )
@@ -270,7 +270,7 @@ const AppPublisher = ({
           appId: appDetail.id,
         },
         query: {
-          target_type: workflowTypeSwitchConfig.targetType,
+          target_type: workflowTypeSwitchConfig.targetType as WorkflowTypeConversionTarget,
         },
       })
 
@@ -321,7 +321,7 @@ const AppPublisher = ({
         <PortalToFollowElemTrigger onClick={handleTrigger}>
           <Button
             variant="primary"
-            className="py-2 pl-3 pr-2"
+            className="py-2 pr-2 pl-3"
             disabled={disabled}
           >
             {t('common.publish', { ns: 'workflow' })}
@@ -331,13 +331,13 @@ const AppPublisher = ({
         <PortalToFollowElemContent className="z-11">
           <div className="w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
             <div className="p-4 pt-3">
-              <div className="flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
                 {publishedAt ? t('common.latestPublished', { ns: 'workflow' }) : t('common.currentDraftUnpublished', { ns: 'workflow' })}
               </div>
               {publishedAt
                 ? (
                     <div className="flex items-center justify-between">
-                      <div className="flex items-center text-text-secondary system-sm-medium">
+                      <div className="flex items-center system-sm-medium text-text-secondary">
                         {t('common.publishedAt', { ns: 'workflow' })}
                         {' '}
                         {formatTimeFromNow(publishedAt)}
@@ -355,7 +355,7 @@ const AppPublisher = ({
                     </div>
                   )
                 : (
-                    <div className="flex items-center text-text-secondary system-sm-medium">
+                    <div className="flex items-center system-sm-medium text-text-secondary">
                       {t('common.autoSaved', { ns: 'workflow' })}
                       {' '}
                       ·
@@ -392,7 +392,7 @@ const AppPublisher = ({
                       {workflowTypeSwitchConfig && (
                         <button
                           type="button"
-                          className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 text-text-tertiary system-sm-medium hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
+                          className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 system-sm-medium text-text-tertiary hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
                           onClick={handleWorkflowTypeSwitch}
                           disabled={publishDisabled || published || isConvertingWorkflowType}
                         >
@@ -431,7 +431,7 @@ const AppPublisher = ({
                       {showStartNodeLimitHint && (
                         <div className="mt-3 flex flex-col items-stretch">
                           <p
-                            className="text-sm font-semibold leading-5 text-transparent"
+                            className="text-sm leading-5 font-semibold text-transparent"
                             style={upgradeHighlightStyle}
                           >
                             <span className="block">{t('publishLimit.startNodeTitlePrefix', { ns: 'workflow' })}</span>
@@ -442,7 +442,7 @@ const AppPublisher = ({
                           </p>
                           <UpgradeBtn
                             isShort
-                            className="mb-[12px] mt-[9px] h-[32px] w-[93px] self-start"
+                            className="mt-[9px] mb-[12px] h-[32px] w-[93px] self-start"
                           />
                         </div>
                       )}
@@ -457,10 +457,10 @@ const AppPublisher = ({
                     {systemFeatures.webapp_auth.enabled && (
                       <div className="p-4 pt-3">
                         <div className="flex h-6 items-center">
-                          <p className="text-text-tertiary system-xs-medium">{t('publishApp.title', { ns: 'app' })}</p>
+                          <p className="system-xs-medium text-text-tertiary">{t('publishApp.title', { ns: 'app' })}</p>
                         </div>
                         <div
-                          className="flex h-8 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2 hover:bg-primary-50 hover:text-text-accent"
+                          className="flex h-8 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal py-1 pr-2 pl-2.5 hover:bg-primary-50 hover:text-text-accent"
                           onClick={() => {
                             setShowAppAccessControl(true)
                           }}
@@ -468,12 +468,12 @@ const AppPublisher = ({
                           <div className="flex grow items-center gap-x-1.5 overflow-hidden pr-1">
                             <AccessModeDisplay mode={appDetail?.access_mode} />
                           </div>
-                          {!isAppAccessSet && <p className="shrink-0 text-text-tertiary system-xs-regular">{t('publishApp.notSet', { ns: 'app' })}</p>}
+                          {!isAppAccessSet && <p className="shrink-0 system-xs-regular text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
                           <div className="flex h-4 w-4 shrink-0 items-center justify-center">
                             <span className="i-ri-arrow-right-s-line h-4 w-4 text-text-quaternary" />
                           </div>
                         </div>
-                        {!isAppAccessSet && <p className="mt-1 text-text-warning system-xs-regular">{t('publishApp.notSetDesc', { ns: 'app' })}</p>}
+                        {!isAppAccessSet && <p className="mt-1 system-xs-regular text-text-warning">{t('publishApp.notSetDesc', { ns: 'app' })}</p>}
                       </div>
                     )}
                     {
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index d2522e875e..9b65175c17 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -62,7 +62,7 @@ const TryLabel: FC<{
 }> = ({ Icon, text, onClick }) => {
   return (
     <div
-      className="mr-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
+      className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
       onClick={onClick}
     >
       <Icon className="h-4 w-4 text-text-tertiary"></Icon>
@@ -89,7 +89,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   const [model, setModel] = React.useState<Model>(localModel || {
     name: '',
     provider: '',
-    mode: mode as unknown as ModelModeType.chat,
+    mode: mode as unknown as ModelModeType,
     completion_params: {} as CompletionParams,
   })
   const {
@@ -283,7 +283,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       <div className="flex h-[680px] flex-wrap">
         <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
-            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
+            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
             <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('generate.description', { ns: 'appDebug' })}</div>
           </div>
           <div>
@@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {isBasicMode && (
             <div className="mt-4">
               <div className="flex items-center">
-                <div className="mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-text-tertiary">{t('generate.tryIt', { ns: 'appDebug' })}</div>
+                <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{t('generate.tryIt', { ns: 'appDebug' })}</div>
                 <div
                   className="h-px grow"
                   style={{
@@ -326,7 +326,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {/* inputs */}
           <div className="mt-4">
             <div>
-              <div className="system-sm-semibold-uppercase mb-1.5 text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
               {isBasicMode
                 ? (
                     <InstructionEditorInBasic
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 2d6b3efb3d..ce1794a174 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -70,7 +70,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const [model, setModel] = React.useState<Model>(localModel || {
     name: '',
     provider: '',
-    mode: mode as unknown as ModelModeType.chat,
+    mode: mode as unknown as ModelModeType,
     completion_params: defaultCompletionParams,
   })
   const {
@@ -202,7 +202,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       <div className="relative flex h-[680px] flex-wrap">
         <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
-            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
+            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
             <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('codegen.description', { ns: 'appDebug' })}</div>
           </div>
           <div className="mb-4">
@@ -219,7 +219,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div>
             <div className="text-[0px]">
-              <div className="mb-1.5 text-text-secondary system-sm-semibold-uppercase">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
               <InstructionEditor
                 editorKey={editorKey}
                 value={instruction}
diff --git a/web/app/components/apps/app-type-filter-shared.ts b/web/app/components/apps/app-type-filter-shared.ts
index 2320833f16..26b279ae2f 100644
--- a/web/app/components/apps/app-type-filter-shared.ts
+++ b/web/app/components/apps/app-type-filter-shared.ts
@@ -1,8 +1,9 @@
 import { parseAsStringLiteral } from 'nuqs'
 import { AppModes } from '@/types/app'
 
-export const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
-export type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
+const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
+type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
+export type { AppListCategory }
 
 const appListCategorySet = new Set<string>(APP_LIST_CATEGORY_VALUES)
 
diff --git a/web/app/components/apps/app-type-filter.tsx b/web/app/components/apps/app-type-filter.tsx
index 72c08e89b9..a7979daade 100644
--- a/web/app/components/apps/app-type-filter.tsx
+++ b/web/app/components/apps/app-type-filter.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import type { AppListCategory } from './app-type-filter-shared'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -17,8 +18,8 @@ import { isAppListCategory } from './app-type-filter-shared'
 const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
 
 type AppTypeFilterProps = {
-  activeTab: import('./app-type-filter-shared').AppListCategory
-  onChange: (value: import('./app-type-filter-shared').AppListCategory) => void
+  activeTab: AppListCategory
+  onChange: (value: AppListCategory) => void
 }
 
 const AppTypeFilter = ({
diff --git a/web/app/components/base/ui/select/index.tsx b/web/app/components/base/ui/select/index.tsx
index b9441b2d6b..323a1ac0d0 100644
--- a/web/app/components/base/ui/select/index.tsx
+++ b/web/app/components/base/ui/select/index.tsx
@@ -9,6 +9,8 @@ import { parsePlacement } from '@/app/components/base/ui/placement'
 import { cn } from '@/utils/classnames'
 
 export const Select = BaseSelect.Root
+export const SelectGroup = BaseSelect.Group
+export const SelectGroupLabel = BaseSelect.GroupLabel
 export const SelectValue = BaseSelect.Value
 
 const selectTriggerVariants = cva(
@@ -78,7 +80,7 @@ export function SelectTrigger({
         role="button"
         aria-label="Clear selection"
         tabIndex={-1}
-        className="shrink-0 cursor-pointer text-text-quaternary hover:text-text-secondary group-data-disabled:hidden group-data-readonly:hidden"
+        className="shrink-0 cursor-pointer text-text-quaternary group-data-disabled:hidden group-data-readonly:hidden hover:text-text-secondary"
         onClick={(e) => {
           e.stopPropagation()
           onClear?.()
@@ -91,7 +93,7 @@ export function SelectTrigger({
   }
   else {
     trailingIcon = (
-      <BaseSelect.Icon className="shrink-0 text-text-quaternary transition-colors group-hover:text-text-secondary data-open:text-text-secondary group-data-readonly:hidden">
+      <BaseSelect.Icon className="shrink-0 text-text-quaternary transition-colors group-hover:text-text-secondary group-data-readonly:hidden data-open:text-text-secondary">
         <span className="i-ri-arrow-down-s-line h-4 w-4" aria-hidden="true" />
       </BaseSelect.Icon>
     )
@@ -169,7 +171,7 @@ export function SelectContent({
         <BaseSelect.Popup
           className={cn(
             'rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
-            'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+            'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
             popupClassName,
           )}
           {...popupProps}
@@ -194,8 +196,8 @@ export function SelectItem({
   return (
     <BaseSelect.Item
       className={cn(
-        'flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary outline-hidden system-sm-medium',
-        'data-disabled:cursor-not-allowed data-highlighted:bg-state-base-hover data-disabled:opacity-50',
+        'flex h-8 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary outline-hidden',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-state-base-hover',
         className,
       )}
       {...props}
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index 78b8e19426..8c369d9920 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -6,7 +6,7 @@ export const toEvaluationTargetType = (resourceType: 'workflow' | 'snippet'): Ev
   return resourceType === 'snippet' ? 'snippets' : 'app'
 }
 
-export const humanizeMetricId = (metricId: string) => {
+const humanizeMetricId = (metricId: string) => {
   return metricId
     .split(/[-_]/g)
     .filter(Boolean)
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 9ce194f989..2f706a5972 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -12,13 +12,13 @@ import type {
 import type { NodeInfo } from '@/types/evaluation'
 import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
 
-export type EvaluationStoreResources = Record<string, EvaluationResourceState>
+type EvaluationStoreResources = Record<string, EvaluationResourceState>
 
 const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
 
 export const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
 
-export const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
+const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
 
 export const requiresConditionValue = (operator: ComparisonOperator) => !conditionOperatorsWithoutValue.includes(operator)
 
@@ -100,7 +100,7 @@ export const buildInitialState = (resourceType: EvaluationResourceType): Evaluat
   }
 }
 
-export const getResourceState = (
+const getResourceState = (
   resources: EvaluationStoreResources,
   resourceType: EvaluationResourceType,
   resourceId: string,
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
index 1c0e84a50d..edd362d7d1 100644
--- a/web/app/components/workflow/create-snippet-dialog.tsx
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -21,7 +21,7 @@ export type CreateSnippetDialogPayload = {
   graph: SnippetCanvasData
 }
 
-export type CreateSnippetDialogInitialValue = {
+type CreateSnippetDialogInitialValue = {
   name?: string
   description?: string
   icon?: AppIconSelection
@@ -111,8 +111,8 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
         <DialogContent className="w-[520px] max-w-[520px] p-0">
           <DialogCloseButton />
 
-          <div className="px-6 pb-3 pt-6">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+          <div className="px-6 pt-6 pb-3">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {title || t('snippet.createDialogTitle', { ns: 'workflow' })}
             </DialogTitle>
           </div>
@@ -120,7 +120,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
           <div className="space-y-4 px-6 py-2">
             <div className="flex items-end gap-3">
               <div className="flex-1 pb-0.5">
-                <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
+                <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
                   {t('snippet.nameLabel', { ns: 'workflow' })}
                 </div>
                 <Input
@@ -144,7 +144,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
             </div>
 
             <div>
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
                 {t('snippet.descriptionLabel', { ns: 'workflow' })}
               </div>
               <Textarea
@@ -157,7 +157,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
             </div>
           </div>
 
-          <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-5">
+          <div className="flex items-center justify-end gap-2 px-6 pt-5 pb-6">
             <Button disabled={isSubmitting} onClick={handleClose}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
@@ -174,7 +174,7 @@ const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
         </DialogContent>
 
         <DialogPortal>
-          <div className="pointer-events-none fixed left-1/2 top-1/2 z-[1002] flex -translate-x-1/2 translate-y-[170px] items-center gap-1 text-text-quaternary body-xs-regular">
+          <div className="pointer-events-none fixed top-1/2 left-1/2 z-[1002] flex -translate-x-1/2 translate-y-[170px] items-center gap-1 body-xs-regular text-text-quaternary">
             <span>{t('snippet.shortcuts.press', { ns: 'workflow' })}</span>
             <ShortcutsName keys={['ctrl', 'enter']} textColor="secondary" />
             <span>{t('snippet.shortcuts.toConfirm', { ns: 'workflow' })}</span>
diff --git a/web/service/__tests__/use-apps.spec.tsx b/web/service/__tests__/use-apps.spec.tsx
index 76d7b87943..cb46073ef2 100644
--- a/web/service/__tests__/use-apps.spec.tsx
+++ b/web/service/__tests__/use-apps.spec.tsx
@@ -76,10 +76,13 @@ describe('useConvertWorkflowTypeMutation', () => {
 
     // Assert
     await waitFor(() => {
-      expect(convertWorkflowTypeMutationFn).toHaveBeenCalledWith({
-        params: { appId: 'app-1' },
-        query: { target_type: 'evaluation' },
-      })
+      expect(convertWorkflowTypeMutationFn).toHaveBeenCalledWith(
+        {
+          params: { appId: 'app-1' },
+          query: { target_type: 'evaluation' },
+        },
+        expect.any(Object),
+      )
     })
     await waitFor(() => {
       expect(invalidateQueries).toHaveBeenCalledWith({
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index b9b920e848..96a708e3ec 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -11,7 +11,6 @@ import type {
   WorkflowDailyConversationsResponse,
 } from '@/models/app'
 import type { App } from '@/types/app'
-import type { WorkflowTypeConversionTarget } from '@/types/workflow'
 import {
   keepPreviousData,
   useInfiniteQuery,
@@ -171,8 +170,6 @@ export const useConvertWorkflowTypeMutation = () => {
   })
 }
 
-export type { WorkflowTypeConversionTarget }
-
 const useAppStatisticsQuery = <T>(metric: string, appId: string, params?: DateRangeParams) => {
   return useQuery<T>({
     queryKey: [NAME_SPACE, 'statistics', metric, appId, params],
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index 13b5086f49..19159a17c1 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -1,107 +1,6 @@
-import type {
-  EvaluationConfigData,
-  EvaluationNodeInfoRequest,
-  EvaluationTargetType,
-} from '@/types/evaluation'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 import { consoleQuery } from '@/service/client'
 
-export type EvaluationResourceType = 'workflow' | 'pipeline' | 'snippet'
-
-type EvaluationLogsParams = {
-  page?: number
-  page_size?: number
-}
-
-type EvaluationRunDetailParams = {
-  page?: number
-  page_size?: number
-}
-
-const toEvaluationTargetType = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>): EvaluationTargetType => {
-  return resourceType === 'snippet' ? 'snippets' : 'app'
-}
-
-const invalidateEvaluationQueries = async (
-  queryClient: ReturnType<typeof useQueryClient>,
-  resourceType: EvaluationResourceType,
-) => {
-  const queryKey = resourceType === 'pipeline'
-    ? consoleQuery.datasetEvaluation.key()
-    : consoleQuery.evaluation.key()
-
-  await queryClient.invalidateQueries({ queryKey })
-}
-
-export const useEvaluationConfig = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>, resourceId: string) => {
-  return useQuery(consoleQuery.evaluation.config.queryOptions({
-    input: {
-      params: {
-        targetType: toEvaluationTargetType(resourceType),
-        targetId: resourceId,
-      },
-    },
-    enabled: !!resourceId,
-  }))
-}
-
-export const useDatasetEvaluationConfig = (datasetId: string) => {
-  return useQuery(consoleQuery.datasetEvaluation.config.queryOptions({
-    input: {
-      params: { datasetId },
-    },
-    enabled: !!datasetId,
-  }))
-}
-
-export const useEvaluationLogs = (
-  resourceType: Exclude<EvaluationResourceType, 'pipeline'>,
-  resourceId: string,
-  params: EvaluationLogsParams = {},
-) => {
-  return useQuery(consoleQuery.evaluation.logs.queryOptions({
-    input: {
-      params: {
-        targetType: toEvaluationTargetType(resourceType),
-        targetId: resourceId,
-      },
-      query: params,
-    },
-    enabled: !!resourceId,
-  }))
-}
-
-export const useDatasetEvaluationLogs = (datasetId: string, params: EvaluationLogsParams = {}) => {
-  return useQuery(consoleQuery.datasetEvaluation.logs.queryOptions({
-    input: {
-      params: { datasetId },
-      query: params,
-    },
-    enabled: !!datasetId,
-  }))
-}
-
-export const useEvaluationMetrics = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>, resourceId: string) => {
-  return useQuery(consoleQuery.evaluation.metrics.queryOptions({
-    input: {
-      params: {
-        targetType: toEvaluationTargetType(resourceType),
-        targetId: resourceId,
-      },
-    },
-    enabled: !!resourceId,
-  }))
-}
-
-export const useDatasetEvaluationMetrics = (datasetId: string) => {
-  return useQuery(consoleQuery.datasetEvaluation.metrics.queryOptions({
-    input: {
-      params: { datasetId },
-    },
-    enabled: !!datasetId,
-  }))
-}
-
 export const useAvailableEvaluationMetrics = (enabled = true) => {
   return useQuery(consoleQuery.evaluation.availableMetrics.queryOptions({
     enabled,
@@ -111,112 +10,3 @@ export const useAvailableEvaluationMetrics = (enabled = true) => {
 export const useEvaluationNodeInfoMutation = () => {
   return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
 }
-
-export const useSaveEvaluationConfigMutation = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>) => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.evaluation.saveConfig.mutationOptions({
-      onSuccess: async () => {
-        await invalidateEvaluationQueries(queryClient, resourceType)
-      },
-    }),
-  })
-}
-
-export const useSaveDatasetEvaluationConfigMutation = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.datasetEvaluation.saveConfig.mutationOptions({
-      onSuccess: async () => {
-        await invalidateEvaluationQueries(queryClient, 'pipeline')
-      },
-    }),
-  })
-}
-
-export const useStartEvaluationRunMutation = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>) => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.evaluation.startRun.mutationOptions({
-      onSuccess: async () => {
-        await invalidateEvaluationQueries(queryClient, resourceType)
-      },
-    }),
-  })
-}
-
-export const useStartDatasetEvaluationRunMutation = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.datasetEvaluation.startRun.mutationOptions({
-      onSuccess: async () => {
-        await invalidateEvaluationQueries(queryClient, 'pipeline')
-      },
-    }),
-  })
-}
-
-export const useCancelEvaluationRunMutation = (resourceType: Exclude<EvaluationResourceType, 'pipeline'>) => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.evaluation.cancelRun.mutationOptions({
-      onSuccess: async () => {
-        await invalidateEvaluationQueries(queryClient, resourceType)
-      },
-    }),
-  })
-}
-
-export const useCancelDatasetEvaluationRunMutation = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.datasetEvaluation.cancelRun.mutationOptions({
-      onSuccess: async () => {
-        await invalidateEvaluationQueries(queryClient, 'pipeline')
-      },
-    }),
-  })
-}
-
-export const useEvaluationRunDetail = (
-  resourceType: Exclude<EvaluationResourceType, 'pipeline'>,
-  resourceId: string,
-  runId: string,
-  params: EvaluationRunDetailParams = {},
-) => {
-  return useQuery(consoleQuery.evaluation.runDetail.queryOptions({
-    input: {
-      params: {
-        targetType: toEvaluationTargetType(resourceType),
-        targetId: resourceId,
-        runId,
-      },
-      query: params,
-    },
-    enabled: !!resourceId && !!runId,
-  }))
-}
-
-export const useDatasetEvaluationRunDetail = (datasetId: string, runId: string, params: EvaluationRunDetailParams = {}) => {
-  return useQuery(consoleQuery.datasetEvaluation.runDetail.queryOptions({
-    input: {
-      params: {
-        datasetId,
-        runId,
-      },
-      query: params,
-    },
-    enabled: !!datasetId && !!runId,
-  }))
-}
-
-export type {
-  EvaluationConfigData,
-  EvaluationNodeInfoRequest,
-}
diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
index 86ddd8c010..2fed4d6510 100644
--- a/web/service/use-snippet-workflows.ts
+++ b/web/service/use-snippet-workflows.ts
@@ -2,11 +2,6 @@ import type { SnippetWorkflow } from '@/types/snippet'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { consoleQuery } from '@/service/client'
 
-type WorkflowRunsParams = {
-  last_id?: string
-  limit?: number
-}
-
 const isNotFoundError = (error: unknown) => {
   return !!error && typeof error === 'object' && 'status' in error && error.status === 404
 }
@@ -68,15 +63,6 @@ export const useSnippetDraftWorkflow = (
   })
 }
 
-export const useSnippetDraftConfig = (snippetId: string) => {
-  return useQuery(consoleQuery.snippets.draftConfig.queryOptions({
-    input: {
-      params: { snippetId },
-    },
-    enabled: !!snippetId,
-  }))
-}
-
 export const useSnippetPublishedWorkflow = (
   snippetId: string,
   onSuccess?: (publishedWorkflow: SnippetWorkflow) => void,
@@ -119,65 +105,6 @@ export const useSnippetDefaultBlockConfigs = (
   })
 }
 
-export const useSnippetWorkflowRuns = (snippetId: string, params: WorkflowRunsParams = {}) => {
-  return useQuery(consoleQuery.snippets.workflowRuns.queryOptions({
-    input: {
-      params: { snippetId },
-      query: params,
-    },
-    enabled: !!snippetId,
-  }))
-}
-
-export const useSnippetWorkflowRunDetail = (snippetId: string, runId: string) => {
-  return useQuery(consoleQuery.snippets.workflowRunDetail.queryOptions({
-    input: {
-      params: {
-        snippetId,
-        runId,
-      },
-    },
-    enabled: !!snippetId && !!runId,
-  }))
-}
-
-export const useSnippetWorkflowRunNodeExecutions = (snippetId: string, runId: string) => {
-  return useQuery(consoleQuery.snippets.workflowRunNodeExecutions.queryOptions({
-    input: {
-      params: {
-        snippetId,
-        runId,
-      },
-    },
-    enabled: !!snippetId && !!runId,
-  }))
-}
-
-export const useSnippetDraftNodeLastRun = (snippetId: string, nodeId: string, enabled = true) => {
-  return useQuery(consoleQuery.snippets.lastDraftNodeRun.queryOptions({
-    input: {
-      params: {
-        snippetId,
-        nodeId,
-      },
-    },
-    enabled: !!snippetId && !!nodeId && enabled,
-    retry: 0,
-  }))
-}
-
-export const useSyncSnippetDraftWorkflowMutation = (snippetId: string) => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.snippets.syncDraftWorkflow.mutationOptions({
-      onSuccess: async () => {
-        await invalidateSnippetWorkflowQueries(queryClient, snippetId)
-      },
-    }),
-  })
-}
-
 export const usePublishSnippetWorkflowMutation = (snippetId: string) => {
   const queryClient = useQueryClient()
 
@@ -189,31 +116,3 @@ export const usePublishSnippetWorkflowMutation = (snippetId: string) => {
     }),
   })
 }
-
-export const useRunSnippetDraftNodeMutation = () => {
-  return useMutation(consoleQuery.snippets.runDraftNode.mutationOptions())
-}
-
-export const useRunSnippetDraftIterationNodeMutation = () => {
-  return useMutation(consoleQuery.snippets.runDraftIterationNode.mutationOptions())
-}
-
-export const useRunSnippetDraftLoopNodeMutation = () => {
-  return useMutation(consoleQuery.snippets.runDraftLoopNode.mutationOptions())
-}
-
-export const useRunSnippetDraftWorkflowMutation = () => {
-  return useMutation(consoleQuery.snippets.runDraftWorkflow.mutationOptions())
-}
-
-export const useStopSnippetWorkflowTaskMutation = (snippetId: string) => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.snippets.stopWorkflowTask.mutationOptions({
-      onSuccess: async () => {
-        await invalidateSnippetWorkflowQueries(queryClient, snippetId)
-      },
-    }),
-  })
-}
diff --git a/web/service/use-snippets.mock.ts b/web/service/use-snippets.mock.ts
index 60408340b2..68c655b1f5 100644
--- a/web/service/use-snippets.mock.ts
+++ b/web/service/use-snippets.mock.ts
@@ -1,6 +1,5 @@
 import type { Node } from '@/app/components/workflow/types'
 import type { SnippetDetailPayload, SnippetInputField, SnippetListItem } from '@/models/snippet'
-import { useQuery } from '@tanstack/react-query'
 import codeDefault from '@/app/components/workflow/nodes/code/default'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import httpDefault from '@/app/components/workflow/nodes/http/default'
@@ -11,9 +10,7 @@ import { BlockEnum, PromptRole } from '@/app/components/workflow/types'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { AppModeEnum } from '@/types/app'
 
-const NAME_SPACE = 'snippets'
-
-export const getSnippetListMock = (): SnippetListItem[] => ([
+const getSnippetListMock = (): SnippetListItem[] => ([
   {
     id: 'snippet-1',
     name: 'Tone Rewriter',
@@ -206,23 +203,3 @@ export const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload |
     },
   }
 }
-
-export const useSnippetDetail = (snippetId: string) => {
-  return useQuery({
-    queryKey: [NAME_SPACE, 'detail', snippetId],
-    queryFn: async () => getSnippetDetailMock(snippetId),
-    enabled: !!snippetId,
-  })
-}
-
-export const publishSnippet = async (_snippetId: string) => {
-  return Promise.resolve()
-}
-
-export const runSnippet = async (_snippetId: string) => {
-  return Promise.resolve()
-}
-
-export const updateSnippetInputFields = async (_snippetId: string, _fields: SnippetInputField[]) => {
-  return Promise.resolve()
-}
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index 12df39b830..cb8056921f 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -127,35 +127,8 @@ const normalizeSnippetListParams = (params: SnippetListParams) => {
   }
 }
 
-const isNotFoundError = (error: unknown) => {
-  return !!error && typeof error === 'object' && 'status' in error && error.status === 404
-}
-
 const snippetListKey = (params: SnippetListParams) => ['snippets', 'list', params]
 
-export const useSnippetList = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
-  const query = normalizeSnippetListParams(params)
-
-  return useQuery(consoleQuery.snippets.list.queryOptions({
-    input: { query },
-    enabled: options?.enabled ?? true,
-  }))
-}
-
-export const useSnippetListItems = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
-  return useQuery<SnippetListItemUIModel[]>({
-    queryKey: [...consoleQuery.snippets.list.queryKey({ input: { query: normalizeSnippetListParams(params) } }), 'items'],
-    queryFn: async () => {
-      const response = await consoleClient.snippets.list({
-        query: normalizeSnippetListParams(params),
-      })
-
-      return response.data.map(toSnippetListItem)
-    },
-    enabled: options?.enabled ?? true,
-  })
-}
-
 export const useInfiniteSnippetList = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
   const normalizedParams = normalizeSnippetListParams(params)
 
@@ -185,42 +158,6 @@ export const useSnippetApiDetail = (snippetId: string) => {
   }))
 }
 
-export const useSnippetDetail = (snippetId: string) => {
-  return useQuery<SnippetDetailPayload | null>({
-    queryKey: [...consoleQuery.snippets.detail.queryKey({
-      input: {
-        params: { snippetId },
-      },
-    }), 'payload'],
-    enabled: !!snippetId,
-    queryFn: async () => {
-      try {
-        const [snippet, workflow] = await Promise.all([
-          consoleClient.snippets.detail({
-            params: { snippetId },
-          }),
-          consoleClient.snippets.draftWorkflow({
-            params: { snippetId },
-          }).catch((error) => {
-            if (isNotFoundError(error))
-              return undefined
-
-            throw error
-          }),
-        ])
-
-        return buildSnippetDetailPayload(snippet, workflow)
-      }
-      catch (error) {
-        if (isNotFoundError(error))
-          return null
-
-        throw error
-      }
-    },
-  })
-}
-
 export const useCreateSnippetMutation = () => {
   const queryClient = useQueryClient()
 
@@ -272,34 +209,6 @@ export const useExportSnippetMutation = () => {
   })
 }
 
-export const usePublishSnippetMutation = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.snippets.publishWorkflow.mutationOptions({
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: consoleQuery.snippets.key(),
-        })
-      },
-    }),
-  })
-}
-
-export const useIncrementSnippetUseCountMutation = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    ...consoleQuery.snippets.incrementUseCount.mutationOptions({
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: consoleQuery.snippets.key(),
-        })
-      },
-    }),
-  })
-}
-
 export const useImportSnippetDSLMutation = () => {
   const queryClient = useQueryClient()
 
diff --git a/web/types/app.ts b/web/types/app.ts
index 440328af65..ac4edfbbd2 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -10,50 +10,71 @@ import type {
 } from '@/models/datasets'
 import type { AnnotationReplyConfig, ChatPromptConfig, CompletionPromptConfig, DatasetConfigs, PromptMode } from '@/models/debug'
 
-export enum Theme {
-  light = 'light',
-  dark = 'dark',
-  system = 'system',
-}
+export type Theme = 'light' | 'dark' | 'system'
+export const Theme = {
+  light: 'light' as Theme,
+  dark: 'dark' as Theme,
+  system: 'system' as Theme,
+} as const
 
-export enum ModelModeType {
-  chat = 'chat',
-  completion = 'completion',
-  unset = '',
-}
+export type ModelModeType = 'chat' | 'completion' | ''
+export const ModelModeType = {
+  chat: 'chat' as ModelModeType,
+  completion: 'completion' as ModelModeType,
+  unset: '' as ModelModeType,
+} as const
 
-export enum RETRIEVE_TYPE {
-  oneWay = 'single',
-  multiWay = 'multiple',
-}
+export type RETRIEVE_TYPE = 'single' | 'multiple'
+export const RETRIEVE_TYPE = {
+  oneWay: 'single' as RETRIEVE_TYPE,
+  multiWay: 'multiple' as RETRIEVE_TYPE,
+} as const
 
-export enum RETRIEVE_METHOD {
-  semantic = 'semantic_search',
-  fullText = 'full_text_search',
-  hybrid = 'hybrid_search',
-  invertedIndex = 'invertedIndex',
-  keywordSearch = 'keyword_search',
-}
+export type RETRIEVE_METHOD
+  = | 'semantic_search'
+    | 'full_text_search'
+    | 'hybrid_search'
+    | 'invertedIndex'
+    | 'keyword_search'
+export const RETRIEVE_METHOD = {
+  semantic: 'semantic_search' as RETRIEVE_METHOD,
+  fullText: 'full_text_search' as RETRIEVE_METHOD,
+  hybrid: 'hybrid_search' as RETRIEVE_METHOD,
+  invertedIndex: 'invertedIndex' as RETRIEVE_METHOD,
+  keywordSearch: 'keyword_search' as RETRIEVE_METHOD,
+} as const
 
 /**
  * App modes
  */
-export enum AppModeEnum {
-  COMPLETION = 'completion',
-  WORKFLOW = 'workflow',
-  CHAT = 'chat',
-  ADVANCED_CHAT = 'advanced-chat',
-  AGENT_CHAT = 'agent-chat',
-}
+export type AppModeEnum
+  = | 'completion'
+    | 'workflow'
+    | 'chat'
+    | 'advanced-chat'
+    | 'agent-chat'
+export const AppModeEnum = {
+  COMPLETION: 'completion' as AppModeEnum,
+  WORKFLOW: 'workflow' as AppModeEnum,
+  CHAT: 'chat' as AppModeEnum,
+  ADVANCED_CHAT: 'advanced-chat' as AppModeEnum,
+  AGENT_CHAT: 'agent-chat' as AppModeEnum,
+} as const
 export const AppModes = [AppModeEnum.COMPLETION, AppModeEnum.WORKFLOW, AppModeEnum.CHAT, AppModeEnum.ADVANCED_CHAT, AppModeEnum.AGENT_CHAT] as const
 
-export enum AppTypeEnum {
-  WORKFLOW = 'workflow',
-  CHAT = 'chat',
-  RAG_PIPELINE = 'rag-pipeline',
-  SNIPPET = 'snippet',
-  EVALUATION = 'evaluation',
-}
+export type AppTypeEnum
+  = | 'workflow'
+    | 'chat'
+    | 'rag-pipeline'
+    | 'snippet'
+    | 'evaluation'
+export const AppTypeEnum = {
+  WORKFLOW: 'workflow' as AppTypeEnum,
+  CHAT: 'chat' as AppTypeEnum,
+  RAG_PIPELINE: 'rag-pipeline' as AppTypeEnum,
+  SNIPPET: 'snippet' as AppTypeEnum,
+  EVALUATION: 'evaluation' as AppTypeEnum,
+} as const
 
 /**
  * Variable type
@@ -131,10 +152,11 @@ export type ToolItem = {
   }
 } | AgentTool
 
-export enum AgentStrategy {
-  functionCall = 'function_call',
-  react = 'react',
-}
+export type AgentStrategy = 'function_call' | 'react'
+export const AgentStrategy = {
+  functionCall: 'function_call' as AgentStrategy,
+  react: 'react' as AgentStrategy,
+} as const
 
 export type CompletionParams = {
   /** Maximum number of tokens in the answer message returned by Completion */
@@ -376,21 +398,24 @@ export type AppSSO = {
   enable_sso: boolean
 }
 
-export enum Resolution {
-  low = 'low',
-  high = 'high',
-}
+export type Resolution = 'low' | 'high'
+export const Resolution = {
+  low: 'low' as Resolution,
+  high: 'high' as Resolution,
+} as const
 
-export enum TransferMethod {
-  all = 'all',
-  local_file = 'local_file',
-  remote_url = 'remote_url',
-}
+export type TransferMethod = 'all' | 'local_file' | 'remote_url'
+export const TransferMethod = {
+  all: 'all' as TransferMethod,
+  local_file: 'local_file' as TransferMethod,
+  remote_url: 'remote_url' as TransferMethod,
+} as const
 
-export enum TtsAutoPlay {
-  enabled = 'enabled',
-  disabled = 'disabled',
-}
+export type TtsAutoPlay = 'enabled' | 'disabled'
+export const TtsAutoPlay = {
+  enabled: 'enabled' as TtsAutoPlay,
+  disabled: 'disabled' as TtsAutoPlay,
+} as const
 
 export const ALLOW_FILE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'webp', 'gif']
 

From 5311b5d00dfc279bb4a10ca583e47de71c89d863 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 16:06:33 +0800
Subject: [PATCH 056/108] feat(web): available evaluation workflow selector

---
 web/app/components/base/ui/select/index.tsx   |   2 -
 .../evaluation/__tests__/store.spec.ts        |   8 +-
 .../__tests__/workflow-selector.spec.tsx      | 158 +++++++++++++
 .../index.tsx}                                |  73 +++---
 .../workflow-selector.tsx                     | 213 ++++++++++++++++++
 .../metric-section/__tests__/index.spec.tsx   |  28 ++-
 .../metric-section/builtin-metric-card.tsx    |   1 +
 .../metric-section/custom-metric-card.tsx     |   2 +-
 web/app/components/evaluation/store-utils.ts  |   2 +
 web/app/components/evaluation/store.ts        |  13 +-
 web/app/components/evaluation/types.ts        |   2 +
 web/contract/console/evaluation.ts            |  16 ++
 web/contract/router.ts                        |   2 +
 web/i18n/en-US/evaluation.json                |   1 +
 web/i18n/zh-Hans/evaluation.json              |   1 +
 web/service/use-evaluation.ts                 |  58 ++++-
 web/types/evaluation.ts                       |  28 +++
 17 files changed, 570 insertions(+), 38 deletions(-)
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx
 rename web/app/components/evaluation/components/{custom-metric-editor-card.tsx => custom-metric-editor/index.tsx} (72%)
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx

diff --git a/web/app/components/base/ui/select/index.tsx b/web/app/components/base/ui/select/index.tsx
index ab04be21ec..964bd79e08 100644
--- a/web/app/components/base/ui/select/index.tsx
+++ b/web/app/components/base/ui/select/index.tsx
@@ -9,8 +9,6 @@ import { parsePlacement } from '@/app/components/base/ui/placement'
 import { cn } from '@/utils/classnames'
 
 export const Select = BaseSelect.Root
-export const SelectGroup = BaseSelect.Group
-export const SelectGroupLabel = BaseSelect.GroupLabel
 export const SelectValue = BaseSelect.Value
 /** @public */
 export const SelectGroup = BaseSelect.Group
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 83d9fd9de4..698231bf6f 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -24,7 +24,11 @@ describe('evaluation store', () => {
     expect(initialMetric).toBeDefined()
     expect(isCustomMetricConfigured(initialMetric!)).toBe(false)
 
-    store.setCustomMetricWorkflow(resourceType, resourceId, initialMetric!.id, config.workflowOptions[0].id)
+    store.setCustomMetricWorkflow(resourceType, resourceId, initialMetric!.id, {
+      workflowId: config.workflowOptions[0].id,
+      workflowAppId: 'custom-workflow-app-id',
+      workflowName: config.workflowOptions[0].label,
+    })
     store.updateCustomMetricMapping(resourceType, resourceId, initialMetric!.id, initialMetric!.customConfig!.mappings[0].id, {
       sourceFieldId: config.fieldOptions[0].id,
       targetVariableId: config.workflowOptions[0].targetVariables[0].id,
@@ -32,6 +36,8 @@ describe('evaluation store', () => {
 
     const configuredMetric = useEvaluationStore.getState().resources['workflow:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
     expect(isCustomMetricConfigured(configuredMetric!)).toBe(true)
+    expect(configuredMetric!.customConfig!.workflowAppId).toBe('custom-workflow-app-id')
+    expect(configuredMetric!.customConfig!.workflowName).toBe(config.workflowOptions[0].label)
   })
 
   it('should add and remove builtin metrics', () => {
diff --git a/web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx b/web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx
new file mode 100644
index 0000000000..3cf8f30b99
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx
@@ -0,0 +1,158 @@
+import type { ComponentProps } from 'react'
+import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import WorkflowSelector from '../workflow-selector'
+
+const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
+const mockUseInfiniteScroll = vi.hoisted(() => vi.fn())
+
+let loadMoreHandler: (() => Promise<{ list: unknown[] }>) | null = null
+
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
+}))
+
+vi.mock('ahooks', () => ({
+  useInfiniteScroll: (...args: unknown[]) => mockUseInfiniteScroll(...args),
+}))
+
+const createWorkflow = (
+  overrides: Partial<AvailableEvaluationWorkflow> = {},
+): AvailableEvaluationWorkflow => ({
+  id: 'workflow-1',
+  app_id: 'app-1',
+  app_name: 'Review Workflow App',
+  type: 'evaluation',
+  version: '1',
+  marked_name: 'Review Workflow',
+  marked_comment: 'Production release',
+  hash: 'hash-1',
+  created_by: {
+    id: 'user-1',
+    name: 'User One',
+    email: 'user-one@example.com',
+  },
+  created_at: 1710000000,
+  updated_by: null,
+  updated_at: 1710000000,
+  ...overrides,
+})
+
+const setupWorkflowQueryMock = (overrides?: {
+  workflows?: AvailableEvaluationWorkflow[]
+  hasNextPage?: boolean
+  isFetchingNextPage?: boolean
+}) => {
+  const fetchNextPage = vi.fn()
+
+  mockUseAvailableEvaluationWorkflows.mockReturnValue({
+    data: {
+      pages: [{
+        items: overrides?.workflows ?? [createWorkflow()],
+        page: 1,
+        limit: 20,
+        has_more: overrides?.hasNextPage ?? false,
+      }],
+    },
+    fetchNextPage,
+    hasNextPage: overrides?.hasNextPage ?? false,
+    isFetching: false,
+    isFetchingNextPage: overrides?.isFetchingNextPage ?? false,
+    isLoading: false,
+  })
+
+  return { fetchNextPage }
+}
+
+const renderWorkflowSelector = (props?: Partial<ComponentProps<typeof WorkflowSelector>>) => {
+  return render(
+    <WorkflowSelector
+      value={null}
+      onSelect={vi.fn()}
+      {...props}
+    />,
+  )
+}
+
+describe('WorkflowSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    loadMoreHandler = null
+
+    setupWorkflowQueryMock()
+    mockUseInfiniteScroll.mockImplementation((handler) => {
+      loadMoreHandler = handler as () => Promise<{ list: unknown[] }>
+    })
+  })
+
+  // Cover trigger rendering and selected label fallback.
+  describe('Rendering', () => {
+    it('should render the workflow placeholder when value is empty', () => {
+      renderWorkflowSelector()
+
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.custom.workflowLabel' })).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.workflowPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should render the selected workflow name from props when value is set', () => {
+      setupWorkflowQueryMock({ workflows: [] })
+
+      renderWorkflowSelector({
+        value: 'workflow-1',
+        selectedWorkflowName: 'Saved Review Workflow',
+      })
+
+      expect(screen.getByText('Saved Review Workflow')).toBeInTheDocument()
+    })
+  })
+
+  // Cover opening the popover and choosing one workflow option.
+  describe('Interactions', () => {
+    it('should call onSelect with the clicked workflow', async () => {
+      const onSelect = vi.fn()
+
+      renderWorkflowSelector({ onSelect })
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.custom.workflowLabel' }))
+
+      const option = await screen.findByRole('option', { name: 'Review Workflow' })
+      fireEvent.click(option)
+
+      expect(onSelect).toHaveBeenCalledWith(createWorkflow())
+    })
+  })
+
+  // Cover the infinite-scroll callback used by the ScrollArea viewport.
+  describe('Pagination', () => {
+    it('should fetch the next page when the load-more callback runs and more pages exist', async () => {
+      const { fetchNextPage } = setupWorkflowQueryMock({ hasNextPage: true })
+
+      renderWorkflowSelector()
+
+      await waitFor(() => expect(loadMoreHandler).not.toBeNull())
+
+      await act(async () => {
+        await loadMoreHandler?.()
+      })
+
+      expect(fetchNextPage).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not fetch the next page when the current request is already fetching', async () => {
+      const { fetchNextPage } = setupWorkflowQueryMock({
+        hasNextPage: true,
+        isFetchingNextPage: true,
+      })
+
+      renderWorkflowSelector()
+
+      await waitFor(() => expect(loadMoreHandler).not.toBeNull())
+
+      await act(async () => {
+        await loadMoreHandler?.()
+      })
+
+      expect(fetchNextPage).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/custom-metric-editor-card.tsx b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
similarity index 72%
rename from web/app/components/evaluation/components/custom-metric-editor-card.tsx
rename to web/app/components/evaluation/components/custom-metric-editor/index.tsx
index d9caf5c137..e8d6b9f507 100644
--- a/web/app/components/evaluation/components/custom-metric-editor-card.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
@@ -1,6 +1,9 @@
 'use client'
 
-import type { CustomMetricMapping, EvaluationMetric, EvaluationResourceProps, EvaluationResourceType } from '../types'
+import type { CustomMetricMapping, EvaluationMetric, EvaluationResourceProps, EvaluationResourceType } from '../../types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { Node } from '@/app/components/workflow/types'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import {
@@ -12,10 +15,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/app/components/base/ui/select'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useAppWorkflow } from '@/service/use-workflow'
 import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../mock'
-import { isCustomMetricConfigured, useEvaluationStore } from '../store'
-import { groupFieldOptions } from '../utils'
+import { getEvaluationMockConfig } from '../../mock'
+import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
+import { groupFieldOptions } from '../../utils'
+import WorkflowSelector from './workflow-selector'
 
 type CustomMetricEditorCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
@@ -29,6 +35,27 @@ type MappingRowProps = {
   onRemove: () => void
 }
 
+const getWorkflowTargetVariables = (
+  nodes?: Array<Node>,
+) => {
+  const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
+  if (!startNode || !Array.isArray(startNode.data.variables))
+    return []
+
+  return startNode.data.variables.map(variable => ({
+    id: variable.variable,
+    label: typeof variable.label === 'string' ? variable.label : variable.variable,
+  }))
+}
+
+const getWorkflowName = (workflow: {
+  marked_name?: string
+  app_name?: string
+  id: string
+}) => {
+  return workflow.marked_name || workflow.app_name || workflow.id
+}
+
 function MappingRow({
   resourceType,
   mapping,
@@ -82,12 +109,14 @@ const CustomMetricEditorCard = ({
   metric,
 }: CustomMetricEditorCardProps) => {
   const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
   const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
   const addCustomMetricMapping = useEvaluationStore(state => state.addCustomMetricMapping)
   const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
   const removeCustomMetricMapping = useEvaluationStore(state => state.removeCustomMetricMapping)
-  const selectedWorkflow = config.workflowOptions.find(option => option.id === metric.customConfig?.workflowId)
+  const { data: selectedWorkflow } = useAppWorkflow(metric.customConfig?.workflowAppId ?? '')
+  const targetOptions = useMemo(() => {
+    return getWorkflowTargetVariables(selectedWorkflow?.graph.nodes)
+  }, [selectedWorkflow?.graph.nodes])
   const isConfigured = isCustomMetricConfigured(metric)
 
   if (!metric.customConfig)
@@ -95,27 +124,15 @@ const CustomMetricEditorCard = ({
 
   return (
     <div className="px-3 pb-3 pt-1">
-      <Select value={metric.customConfig.workflowId ?? ''} onValueChange={value => value && setCustomMetricWorkflow(resourceType, resourceId, metric.id, value)}>
-        <SelectTrigger className="h-auto rounded-lg bg-components-input-bg-normal p-1 hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal">
-          <div className="flex min-w-0 items-center gap-2">
-            <div className="flex h-6 w-6 shrink-0 items-center justify-center">
-              <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
-                <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
-              </div>
-            </div>
-            <div className="min-w-0 flex-1 px-1 py-1 text-left">
-              <div className={cn('truncate system-sm-regular', selectedWorkflow ? 'text-text-secondary' : 'text-components-input-text-placeholder')}>
-                {selectedWorkflow?.label ?? t('metrics.custom.workflowPlaceholder')}
-              </div>
-            </div>
-          </div>
-        </SelectTrigger>
-        <SelectContent>
-          {config.workflowOptions.map(option => (
-            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <WorkflowSelector
+        value={metric.customConfig.workflowId}
+        selectedWorkflowName={metric.customConfig.workflowName ?? (selectedWorkflow ? getWorkflowName(selectedWorkflow) : null)}
+        onSelect={workflow => setCustomMetricWorkflow(resourceType, resourceId, metric.id, {
+          workflowId: workflow.id,
+          workflowAppId: workflow.app_id,
+          workflowName: getWorkflowName(workflow),
+        })}
+      />
 
       <div className="mt-4">
         <div className="mb-2 flex items-center justify-between gap-3">
@@ -136,7 +153,7 @@ const CustomMetricEditorCard = ({
               key={mapping.id}
               resourceType={resourceType}
               mapping={mapping}
-              targetOptions={selectedWorkflow?.targetVariables ?? []}
+              targetOptions={targetOptions}
               onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
               onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
             />
diff --git a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
new file mode 100644
index 0000000000..b9e6b7dd9e
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
@@ -0,0 +1,213 @@
+'use client'
+
+import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
+import { useInfiniteScroll } from 'ahooks'
+import * as React from 'react'
+import { useDeferredValue, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Loading from '@/app/components/base/loading'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@/app/components/base/ui/scroll-area'
+import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
+import { cn } from '@/utils/classnames'
+
+type WorkflowSelectorProps = {
+  value: string | null
+  selectedWorkflowName?: string | null
+  onSelect: (workflow: AvailableEvaluationWorkflow) => void
+}
+
+const PAGE_SIZE = 20
+
+const getWorkflowName = (workflow: AvailableEvaluationWorkflow) => {
+  return workflow.marked_name || workflow.app_name || workflow.id
+}
+
+const WorkflowSelector = ({
+  value,
+  selectedWorkflowName,
+  onSelect,
+}: WorkflowSelectorProps) => {
+  const { t } = useTranslation('evaluation')
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const deferredSearchText = useDeferredValue(searchText)
+  const viewportRef = useRef<HTMLDivElement>(null)
+
+  const keyword = deferredSearchText.trim() || undefined
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoading,
+  } = useAvailableEvaluationWorkflows(
+    {
+      page: 1,
+      limit: PAGE_SIZE,
+      keyword,
+    },
+    { enabled: isOpen },
+  )
+
+  const workflows = useMemo(() => {
+    return (data?.pages ?? []).flatMap(page => page.items)
+  }, [data?.pages])
+
+  const currentWorkflowName = useMemo(() => {
+    if (!value)
+      return null
+
+    const selectedWorkflow = workflows.find(workflow => workflow.id === value)
+    if (selectedWorkflow)
+      return getWorkflowName(selectedWorkflow)
+
+    return selectedWorkflowName ?? null
+  }, [selectedWorkflowName, value, workflows])
+
+  const isNoMore = hasNextPage === false
+
+  useInfiniteScroll(
+    async () => {
+      if (!hasNextPage || isFetchingNextPage)
+        return { list: [] }
+
+      await fetchNextPage()
+      return { list: [] }
+    },
+    {
+      target: viewportRef,
+      isNoMore: () => isNoMore,
+      reloadDeps: [isFetchingNextPage, isNoMore, keyword],
+    },
+  )
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setIsOpen(nextOpen)
+
+    if (!nextOpen)
+      setSearchText('')
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleOpenChange}>
+      <PopoverTrigger
+        render={(
+          <button
+            type="button"
+            className="group flex w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 text-left outline-hidden hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal"
+            aria-label={t('metrics.custom.workflowLabel')}
+          >
+            <div className="flex min-w-0 grow items-center gap-2">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+                <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
+                  <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
+                </div>
+              </div>
+              <div className="min-w-0 flex-1 px-1 py-1 text-left">
+                <div className={cn(
+                  'truncate system-sm-regular',
+                  currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
+                )}>
+                  {currentWorkflowName ?? t('metrics.custom.workflowPlaceholder')}
+                </div>
+              </div>
+            </div>
+            <span className="shrink-0 px-1 text-text-quaternary transition-colors group-hover:text-text-secondary">
+              <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4" />
+            </span>
+          </button>
+        )}
+      />
+
+      <PopoverContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName="w-[360px] overflow-hidden p-0"
+      >
+        <div className="bg-components-panel-bg">
+          <div className="p-2 pb-1">
+            <Input
+              showLeftIcon
+              showClearIcon
+              value={searchText}
+              onChange={event => setSearchText(event.target.value)}
+              onClear={() => setSearchText('')}
+            />
+          </div>
+
+          {(isLoading || (isFetching && workflows.length === 0))
+            ? (
+                <div className="flex h-[120px] items-center justify-center">
+                  <Loading type="area" />
+                </div>
+              )
+            : !workflows.length
+                ? (
+                    <div className="flex h-[120px] items-center justify-center text-text-tertiary system-sm-regular">
+                      {t('noData', { ns: 'common' })}
+                    </div>
+                  )
+                : (
+                    <ScrollAreaRoot className="relative max-h-[240px] overflow-hidden">
+                      <ScrollAreaViewport ref={viewportRef}>
+                        <ScrollAreaContent className="p-1" role="listbox" aria-label={t('metrics.custom.workflowLabel')}>
+                          {workflows.map(workflow => (
+                            <button
+                              key={workflow.id}
+                              type="button"
+                              role="option"
+                              aria-selected={workflow.id === value}
+                              className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left hover:bg-state-base-hover"
+                              onClick={() => {
+                                onSelect(workflow)
+                                setIsOpen(false)
+                                setSearchText('')
+                              }}
+                            >
+                              <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+                                <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
+                                  <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
+                                </div>
+                              </div>
+                              <div className="min-w-0 flex-1 truncate px-1 py-1 text-text-secondary system-sm-medium">
+                                {getWorkflowName(workflow)}
+                              </div>
+                              {workflow.id === value && (
+                                <span aria-hidden="true" className="i-ri-check-line h-4 w-4 shrink-0 text-text-accent" />
+                              )}
+                            </button>
+                          ))}
+
+                          {isFetchingNextPage && (
+                            <div className="flex justify-center px-3 py-2">
+                              <Loading />
+                            </div>
+                          )}
+                        </ScrollAreaContent>
+                      </ScrollAreaViewport>
+                      <ScrollAreaScrollbar orientation="vertical">
+                        <ScrollAreaThumb />
+                      </ScrollAreaScrollbar>
+                    </ScrollAreaRoot>
+                  )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default React.memo(WorkflowSelector)
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index 36ee1fae1c..7b1cb56daf 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -1,11 +1,14 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import MetricSection from '..'
 import { useEvaluationStore } from '../../../store'
 
+const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
 const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
 const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
 
 vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
   useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
   useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
 }))
@@ -14,7 +17,19 @@ const resourceType = 'workflow' as const
 const resourceId = 'metric-section-resource'
 
 const renderMetricSection = () => {
-  return render(<MetricSection resourceType={resourceType} resourceId={resourceId} />)
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MetricSection resourceType={resourceType} resourceId={resourceId} />
+    </QueryClientProvider>,
+  )
 }
 
 describe('MetricSection', () => {
@@ -29,6 +44,17 @@ describe('MetricSection', () => {
       isLoading: false,
     })
 
+    mockUseAvailableEvaluationWorkflows.mockReturnValue({
+      data: {
+        pages: [{ items: [], page: 1, limit: 20, has_more: false }],
+      },
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    })
+
     mockUseEvaluationNodeInfoMutation.mockReturnValue({
       isPending: false,
       mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
index cccbb43b49..8bdba64d21 100644
--- a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -114,6 +114,7 @@ const BuiltinMetricCard = ({
                 render={(
                   <button
                     type="button"
+                    aria-label={t('metrics.addNode')}
                     className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-background-default-hover text-text-tertiary transition-colors hover:bg-state-base-hover"
                   />
                 )}
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
index e327ffbf63..824ed8664e 100644
--- a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -6,7 +6,7 @@ import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
 import { cn } from '@/utils/classnames'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
-import CustomMetricEditorCard from '../custom-metric-editor-card'
+import CustomMetricEditorCard from '../custom-metric-editor'
 import { getToneClasses } from '../metric-selector/utils'
 
 type CustomMetricCardProps = EvaluationResourceProps & {
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 2f706a5972..a03c12d259 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -67,6 +67,8 @@ export const createCustomMetric = (): EvaluationMetric => ({
   badges: ['Workflow'],
   customConfig: {
     workflowId: null,
+    workflowAppId: null,
+    workflowName: null,
     mappings: [createCustomMetricMapping()],
   },
 })
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 402cc68147..c91744da9b 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -32,7 +32,12 @@ type EvaluationStore = {
   addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string, nodeInfoList?: NodeInfo[]) => void
   addCustomMetric: (resourceType: EvaluationResourceType, resourceId: string) => void
   removeMetric: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
-  setCustomMetricWorkflow: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, workflowId: string) => void
+  setCustomMetricWorkflow: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    workflow: { workflowId: string, workflowAppId: string, workflowName: string },
+  ) => void
   addCustomMetricMapping: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
   updateCustomMetricMapping: (
     resourceType: EvaluationResourceType,
@@ -122,7 +127,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
-  setCustomMetricWorkflow: (resourceType, resourceId, metricId, workflowId) => {
+  setCustomMetricWorkflow: (resourceType, resourceId, metricId, workflow) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
@@ -131,7 +136,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
           customConfig: metric.customConfig
             ? {
                 ...metric.customConfig,
-                workflowId,
+                workflowId: workflow.workflowId,
+                workflowAppId: workflow.workflowAppId,
+                workflowName: workflow.workflowName,
                 mappings: metric.customConfig.mappings.map(mapping => ({
                   ...mapping,
                   targetVariableId: null,
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index fb10d4cde1..7cdf67b3c9 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -70,6 +70,8 @@ export type CustomMetricMapping = {
 
 export type CustomMetricConfig = {
   workflowId: string | null
+  workflowAppId: string | null
+  workflowName: string | null
   mappings: CustomMetricMapping[]
 }
 
diff --git a/web/contract/console/evaluation.ts b/web/contract/console/evaluation.ts
index ded068b80c..cb3dea6241 100644
--- a/web/contract/console/evaluation.ts
+++ b/web/contract/console/evaluation.ts
@@ -1,4 +1,5 @@
 import type {
+  AvailableEvaluationWorkflowsResponse,
   EvaluationConfig,
   EvaluationConfigData,
   EvaluationFileInfo,
@@ -274,6 +275,21 @@ export const availableEvaluationMetricsContract = base
   })
   .output(type<EvaluationMetricsListResponse>())
 
+export const availableEvaluationWorkflowsContract = base
+  .route({
+    path: '/workspaces/current/available-evaluation-workflows',
+    method: 'GET',
+  })
+  .input(type<{
+    query: {
+      page?: number
+      limit?: number
+      keyword?: string
+      user_id?: string
+    }
+  }>())
+  .output(type<AvailableEvaluationWorkflowsResponse>())
+
 export const evaluationFileContract = base
   .route({
     path: '/{targetType}/{targetId}/evaluation/files/{fileId}',
diff --git a/web/contract/router.ts b/web/contract/router.ts
index c7c2d2ad87..acf918f9f8 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -3,6 +3,7 @@ import { appDeleteContract, appWorkflowTypeConvertContract } from './console/app
 import { bindPartnerStackContract, invoicesContract } from './console/billing'
 import {
   availableEvaluationMetricsContract,
+  availableEvaluationWorkflowsContract,
   cancelDatasetEvaluationRunContract,
   cancelEvaluationRunContract,
   datasetEvaluationConfigContract,
@@ -132,6 +133,7 @@ export const consoleRouterContract = {
     metrics: evaluationMetricsContract,
     nodeInfo: evaluationNodeInfoContract,
     availableMetrics: availableEvaluationMetricsContract,
+    availableWorkflows: availableEvaluationWorkflowsContract,
     file: evaluationFileContract,
     versionDetail: evaluationVersionDetailContract,
   },
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index a691f99fa2..2749ce3fc5 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -51,6 +51,7 @@
   "judgeModel.title": "Judge Model",
   "metrics.add": "Add Metric",
   "metrics.addCustom": "Add Custom Metrics",
+  "metrics.addNode": "Add Node",
   "metrics.added": "Added",
   "metrics.collapseNodes": "Collapse nodes",
   "metrics.custom.addMapping": "Add Mapping",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 633fa5a97d..6a8bfea6fa 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -51,6 +51,7 @@
   "judgeModel.title": "判定模型",
   "metrics.add": "添加指标",
   "metrics.addCustom": "添加自定义指标",
+  "metrics.addNode": "添加节点",
   "metrics.added": "已添加",
   "metrics.custom.addMapping": "添加映射",
   "metrics.custom.description": "选择评测工作流并完成变量映射后即可运行测试。",
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index 19159a17c1..45a5e5bc29 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -1,5 +1,32 @@
-import { useMutation, useQuery } from '@tanstack/react-query'
-import { consoleQuery } from '@/service/client'
+import type { AvailableEvaluationWorkflowsResponse } from '@/types/evaluation'
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+} from '@tanstack/react-query'
+import { consoleClient, consoleQuery } from '@/service/client'
+
+type AvailableEvaluationWorkflowsParams = {
+  page?: number
+  limit?: number
+  keyword?: string
+  userId?: string
+}
+
+const normalizeAvailableEvaluationWorkflowsParams = (params: AvailableEvaluationWorkflowsParams = {}) => {
+  const page = params.page ?? 1
+  const limit = params.limit ?? 20
+  const keyword = params.keyword?.trim()
+  const userId = params.userId?.trim()
+
+  return {
+    page,
+    limit,
+    ...(keyword ? { keyword } : {}),
+    ...(userId ? { user_id: userId } : {}),
+  }
+}
 
 export const useAvailableEvaluationMetrics = (enabled = true) => {
   return useQuery(consoleQuery.evaluation.availableMetrics.queryOptions({
@@ -10,3 +37,30 @@ export const useAvailableEvaluationMetrics = (enabled = true) => {
 export const useEvaluationNodeInfoMutation = () => {
   return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
 }
+
+export const useAvailableEvaluationWorkflows = (
+  params: AvailableEvaluationWorkflowsParams = {},
+  options?: { enabled?: boolean },
+) => {
+  const queryParams = normalizeAvailableEvaluationWorkflowsParams(params)
+
+  return useInfiniteQuery<AvailableEvaluationWorkflowsResponse>({
+    queryKey: consoleQuery.evaluation.availableWorkflows.queryKey({
+      input: {
+        query: queryParams,
+      },
+    }),
+    queryFn: ({ pageParam = queryParams.page }) => {
+      return consoleClient.evaluation.availableWorkflows({
+        query: {
+          ...queryParams,
+          page: Number(pageParam),
+        },
+      })
+    },
+    getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : undefined,
+    initialPageParam: queryParams.page,
+    placeholderData: keepPreviousData,
+    ...options,
+  })
+}
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index 4f4e097614..be9a532c26 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -105,6 +105,34 @@ export type EvaluationMetricsListResponse = {
   metrics: string[]
 }
 
+export type EvaluationWorkflowOperator = {
+  id: string
+  name: string
+  email: string
+}
+
+export type AvailableEvaluationWorkflow = {
+  id: string
+  app_id: string
+  app_name: string
+  type: string
+  version: string
+  marked_name: string
+  marked_comment: string
+  hash: string
+  created_by: EvaluationWorkflowOperator
+  created_at: number
+  updated_by: EvaluationWorkflowOperator | null
+  updated_at: number
+}
+
+export type AvailableEvaluationWorkflowsResponse = {
+  items: AvailableEvaluationWorkflow[]
+  page: number
+  limit: number
+  has_more: boolean
+}
+
 export type EvaluationNodeInfoRequest = {
   metrics?: string[]
 }

From 2bb0eab63685c0aedbef3ddd8d827df1a5ed1178 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 16:10:41 +0800
Subject: [PATCH 057/108] chore(web): mapping row refactor

---
 .../components/custom-metric-editor/index.tsx | 70 +----------------
 .../custom-metric-editor/mapping-row.tsx      | 76 +++++++++++++++++++
 2 files changed, 78 insertions(+), 68 deletions(-)
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx

diff --git a/web/app/components/evaluation/components/custom-metric-editor/index.tsx b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
index e8d6b9f507..04f4d9485d 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/index.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
@@ -1,40 +1,21 @@
 'use client'
 
-import type { CustomMetricMapping, EvaluationMetric, EvaluationResourceProps, EvaluationResourceType } from '../../types'
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { Node } from '@/app/components/workflow/types'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectGroupLabel,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/app/components/base/ui/select'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useAppWorkflow } from '@/service/use-workflow'
-import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../../mock'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
-import { groupFieldOptions } from '../../utils'
+import MappingRow from './mapping-row'
 import WorkflowSelector from './workflow-selector'
 
 type CustomMetricEditorCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
 }
 
-type MappingRowProps = {
-  resourceType: EvaluationResourceType
-  mapping: CustomMetricMapping
-  targetOptions: Array<{ id: string, label: string }>
-  onUpdate: (patch: { sourceFieldId?: string | null, targetVariableId?: string | null }) => void
-  onRemove: () => void
-}
-
 const getWorkflowTargetVariables = (
   nodes?: Array<Node>,
 ) => {
@@ -56,53 +37,6 @@ const getWorkflowName = (workflow: {
   return workflow.marked_name || workflow.app_name || workflow.id
 }
 
-function MappingRow({
-  resourceType,
-  mapping,
-  targetOptions,
-  onUpdate,
-  onRemove,
-}: MappingRowProps) {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-
-  return (
-    <div className="grid gap-2 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
-      <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
-        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-          <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
-        </SelectTrigger>
-        <SelectContent>
-          {groupFieldOptions(config.fieldOptions).map(([groupName, fields]) => (
-            <SelectGroup key={groupName}>
-              <SelectGroupLabel>{groupName}</SelectGroupLabel>
-              {fields.map(field => (
-                <SelectItem key={field.id} value={field.id}>{field.label}</SelectItem>
-              ))}
-            </SelectGroup>
-          ))}
-        </SelectContent>
-      </Select>
-      <div className="flex items-center justify-center text-text-quaternary">
-        <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4 -rotate-90" />
-      </div>
-      <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
-        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-          <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
-        </SelectTrigger>
-        <SelectContent>
-          {targetOptions.map(option => (
-            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Button variant="ghost" size="small" aria-label={t('metrics.remove')} onClick={onRemove}>
-        <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
-      </Button>
-    </div>
-  )
-}
-
 const CustomMetricEditorCard = ({
   resourceType,
   resourceId,
diff --git a/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx b/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
new file mode 100644
index 0000000000..782e67e321
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import type { CustomMetricMapping, EvaluationResourceType } from '../../types'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/app/components/base/ui/select'
+import { getEvaluationMockConfig } from '../../mock'
+import { groupFieldOptions } from '../../utils'
+
+type MappingRowProps = {
+  resourceType: EvaluationResourceType
+  mapping: CustomMetricMapping
+  targetOptions: Array<{ id: string, label: string }>
+  onUpdate: (patch: { sourceFieldId?: string | null, targetVariableId?: string | null }) => void
+  onRemove: () => void
+}
+
+const MappingRow = ({
+  resourceType,
+  mapping,
+  targetOptions,
+  onUpdate,
+  onRemove,
+}: MappingRowProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+
+  return (
+    <div className="grid gap-2 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
+      <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
+        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+          <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {groupFieldOptions(config.fieldOptions).map(([groupName, fields]) => (
+            <SelectGroup key={groupName}>
+              <SelectGroupLabel>{groupName}</SelectGroupLabel>
+              {fields.map(field => (
+                <SelectItem key={field.id} value={field.id}>{field.label}</SelectItem>
+              ))}
+            </SelectGroup>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <div className="flex items-center justify-center text-text-quaternary">
+        <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4 -rotate-90" />
+      </div>
+
+      <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
+        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+          <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {targetOptions.map(option => (
+            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Button variant="ghost" size="small" aria-label={t('metrics.remove')} onClick={onRemove}>
+        <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+export default MappingRow

From 8133e550ed66a798f10db9a816751fafb6b1d763 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 16:21:32 +0800
Subject: [PATCH 058/108] chore: fix pre-hook of web

---
 .vite-hooks/pre-commit | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vite-hooks/pre-commit b/.vite-hooks/pre-commit
index a4b5531ab1..9797ad8dcd 100755
--- a/.vite-hooks/pre-commit
+++ b/.vite-hooks/pre-commit
@@ -77,7 +77,7 @@ if $web_modified; then
     fi
 
     cd ./web || exit 1
-    vp staged
+    pnpm exec vp staged
 
     if $web_ts_modified; then
         echo "Running TypeScript type-check:tsgo"

From 81baeae5c4bef53bcc1264eae5b29f70f9b9093c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 3 Apr 2026 18:22:44 +0800
Subject: [PATCH 059/108] fix(web): evaluation workflow switch

---
 .../app-publisher/__tests__/index.spec.tsx    |  73 +++++++++++-
 .../app-publisher/__tests__/sections.spec.tsx |  42 +++++++
 .../components/app/app-publisher/index.tsx    | 104 ++++++++++--------
 .../components/app/app-publisher/sections.tsx |  58 +++++++++-
 .../src/vender/line/development/index.ts      |   1 -
 5 files changed, 224 insertions(+), 54 deletions(-)

diff --git a/web/app/components/app/app-publisher/__tests__/index.spec.tsx b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
index e97efaa525..137d028a3f 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { AccessMode } from '@/models/access-control'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import AppPublisher from '../index'
 
@@ -15,6 +15,7 @@ const mockOpenAsyncWindow = vi.fn()
 const mockFetchInstalledAppList = vi.fn()
 const mockFetchAppDetailDirect = vi.fn()
 const mockToastError = vi.fn()
+const mockConvertWorkflowType = vi.fn()
 
 const sectionProps = vi.hoisted(() => ({
   summary: null as null | Record<string, any>,
@@ -88,6 +89,13 @@ vi.mock('@/service/apps', () => ({
   fetchAppDetailDirect: (...args: unknown[]) => mockFetchAppDetailDirect(...args),
 }))
 
+vi.mock('@/service/use-apps', () => ({
+  useConvertWorkflowTypeMutation: () => ({
+    mutateAsync: (...args: unknown[]) => mockConvertWorkflowType(...args),
+    isPending: false,
+  }),
+}))
+
 vi.mock('@/app/components/base/ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
@@ -124,15 +132,15 @@ vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
 
   return {
     PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
+      <OpenContext value={open}>
         <div>{children}</div>
-      </OpenContext.Provider>
+      </OpenContext>
     ),
     PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
       <div onClick={onClick}>{children}</div>
     ),
     PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = ReactModule.useContext(OpenContext)
+      const open = ReactModule.use(OpenContext)
       return open ? <div>{children}</div> : null
     },
   }
@@ -145,6 +153,7 @@ vi.mock('../sections', () => ({
       <div>
         <button onClick={() => void props.handlePublish()}>publisher-summary-publish</button>
         <button onClick={() => void props.handleRestore()}>publisher-summary-restore</button>
+        <button onClick={() => void props.onWorkflowTypeSwitch()}>publisher-switch-workflow-type</button>
       </div>
     )
   },
@@ -175,6 +184,7 @@ describe('AppPublisher', () => {
       name: 'Demo App',
       mode: AppModeEnum.CHAT,
       access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+      type: AppTypeEnum.WORKFLOW,
       site: {
         app_base_url: 'https://example.com',
         access_token: 'token-1',
@@ -187,6 +197,7 @@ describe('AppPublisher', () => {
       id: 'app-1',
       access_mode: AccessMode.PUBLIC,
     })
+    mockConvertWorkflowType.mockResolvedValue({})
     mockOpenAsyncWindow.mockImplementation(async (resolver: () => Promise<string>) => {
       await resolver()
     })
@@ -452,4 +463,58 @@ describe('AppPublisher', () => {
     })
     expect(screen.getByTestId('access-control')).toBeInTheDocument()
   })
+
+  it('should switch workflow type, refresh app detail, and close the popover for published apps', async () => {
+    mockFetchAppDetailDirect.mockResolvedValueOnce({
+      id: 'app-1',
+      type: AppTypeEnum.EVALUATION,
+    })
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockConvertWorkflowType).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: AppTypeEnum.EVALUATION },
+      })
+      expect(mockFetchAppDetailDirect).toHaveBeenCalledWith({ url: '/apps', id: 'app-1' })
+      expect(mockSetAppDetail).toHaveBeenCalledWith({
+        id: 'app-1',
+        type: AppTypeEnum.EVALUATION,
+      })
+    })
+    expect(screen.queryByText('publisher-summary-publish')).not.toBeInTheDocument()
+  })
+
+  it('should hide access and actions sections for evaluation workflow apps', () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+
+    expect(screen.getByText('publisher-summary-publish')).toBeInTheDocument()
+    expect(screen.queryByText('publisher-access-control')).not.toBeInTheDocument()
+    expect(screen.queryByText('publisher-embed')).not.toBeInTheDocument()
+    expect(sectionProps.summary?.workflowTypeSwitchConfig).toEqual({
+      targetType: AppTypeEnum.WORKFLOW,
+      publishLabelKey: 'common.publishAsStandardWorkflow',
+      switchLabelKey: 'common.switchToStandardWorkflow',
+      tipKey: 'common.switchToStandardWorkflowTip',
+    })
+  })
 })
diff --git a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
index 57e7a55b13..87155e6aa6 100644
--- a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
@@ -45,12 +45,14 @@ describe('app-publisher sections', () => {
         handleRestore={handleRestore}
         isChatApp
         multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={Date.now()}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded={false}
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
@@ -83,12 +85,14 @@ describe('app-publisher sections', () => {
         handleRestore={vi.fn()}
         isChatApp={false}
         multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={undefined}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded={false}
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
@@ -107,12 +111,14 @@ describe('app-publisher sections', () => {
         handleRestore={vi.fn()}
         isChatApp={false}
         multipleModelConfigs={[{ id: '1' } as any]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={undefined}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded={false}
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
@@ -131,18 +137,54 @@ describe('app-publisher sections', () => {
         handleRestore={vi.fn()}
         isChatApp={false}
         multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={undefined}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
     expect(screen.getByText('publishLimit.startNodeDesc')).toBeInTheDocument()
   })
 
+  it('should render workflow type switch action and call switch handler', () => {
+    const onWorkflowTypeSwitch = vi.fn()
+
+    render(
+      <PublisherSummarySection
+        debugWithMultipleModel={false}
+        draftUpdatedAt={Date.now()}
+        formatTimeFromNow={() => '1 minute ago'}
+        handlePublish={vi.fn()}
+        handleRestore={vi.fn()}
+        isChatApp={false}
+        multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={onWorkflowTypeSwitch}
+        publishDisabled={false}
+        published={false}
+        publishedAt={undefined}
+        publishShortcut={['ctrl', '⇧', 'P']}
+        startNodeLimitExceeded={false}
+        upgradeHighlightStyle={{}}
+        workflowTypeSwitchConfig={{
+          targetType: 'evaluation',
+          publishLabelKey: 'common.publishAsEvaluationWorkflow',
+          switchLabelKey: 'common.switchToEvaluationWorkflow',
+          tipKey: 'common.switchToEvaluationWorkflowTip',
+        }}
+        workflowTypeSwitchDisabled={false}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publishAsEvaluationWorkflow'))
+
+    expect(onWorkflowTypeSwitch).toHaveBeenCalledTimes(1)
+  })
+
   it('should render loading access state and access mode labels when enabled', () => {
     const { rerender } = render(
       <PublisherAccessSection
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index d5e3fd1062..357e273061 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -1,6 +1,6 @@
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
-import type { I18nKeysByPrefix } from '@/types/i18n'
+import type { I18nKeysWithPrefix } from '@/types/i18n'
 import type { PublishWorkflowParams, WorkflowTypeConversionTarget } from '@/types/workflow'
 import { useKeyPress } from 'ahooks'
 import {
@@ -20,14 +20,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  Tooltip as UITooltip,
-  TooltipContent as UITooltipContent,
-  TooltipTrigger as UITooltipTrigger,
-} from '@/app/components/base/ui/tooltip'
-import UpgradeBtn from '@/app/components/billing/upgrade-btn'
-import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
-import { appDefaultIconBackground } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
@@ -78,21 +70,32 @@ export type AppPublisherProps = {
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
-const WORKFLOW_TYPE_SWITCH_CONFIG = {
-  [AppTypeEnum.WORKFLOW]: {
-    targetType: AppTypeEnum.EVALUATION,
+type WorkflowTypeSwitchLabelKey = I18nKeysWithPrefix<'workflow', 'common.'>
+
+const WORKFLOW_TYPE_SWITCH_CONFIG: Record<WorkflowTypeConversionTarget, {
+  targetType: WorkflowTypeConversionTarget
+  publishLabelKey: WorkflowTypeSwitchLabelKey
+  switchLabelKey: WorkflowTypeSwitchLabelKey
+  tipKey: WorkflowTypeSwitchLabelKey
+}> = {
+  workflow: {
+    targetType: 'evaluation',
     publishLabelKey: 'common.publishAsEvaluationWorkflow',
     switchLabelKey: 'common.switchToEvaluationWorkflow',
     tipKey: 'common.switchToEvaluationWorkflowTip',
   },
-  [AppTypeEnum.EVALUATION]: {
-    targetType: AppTypeEnum.WORKFLOW,
+  evaluation: {
+    targetType: 'workflow',
     publishLabelKey: 'common.publishAsStandardWorkflow',
     switchLabelKey: 'common.switchToStandardWorkflow',
     tipKey: 'common.switchToStandardWorkflowTip',
   },
 } as const
 
+const isWorkflowTypeConversionTarget = (type?: AppTypeEnum): type is WorkflowTypeConversionTarget => {
+  return type === 'workflow' || type === 'evaluation'
+}
+
 const AppPublisher = ({
   disabled = false,
   publishDisabled = false,
@@ -131,7 +134,9 @@ const AppPublisher = ({
 
   const appURL = getPublisherAppUrl({ appBaseUrl: appBaseURL, accessToken, mode: appDetail?.mode })
   const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
-  const workflowTypeSwitchConfig = appDetail?.type ? WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type as keyof typeof WORKFLOW_TYPE_SWITCH_CONFIG] : undefined
+  const workflowTypeSwitchConfig = isWorkflowTypeConversionTarget(appDetail?.type)
+    ? WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type]
+    : undefined
   const isEvaluationWorkflowType = appDetail?.type === AppTypeEnum.EVALUATION
 
   const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
@@ -230,7 +235,7 @@ const AppPublisher = ({
           appId: appDetail.id,
         },
         query: {
-          target_type: workflowTypeSwitchConfig.targetType as WorkflowTypeConversionTarget,
+          target_type: workflowTypeSwitchConfig.targetType,
         },
       })
 
@@ -304,37 +309,44 @@ const AppPublisher = ({
               publishShortcut={PUBLISH_SHORTCUT}
               startNodeLimitExceeded={startNodeLimitExceeded}
               upgradeHighlightStyle={upgradeHighlightStyle}
+              workflowTypeSwitchConfig={workflowTypeSwitchConfig}
+              workflowTypeSwitchDisabled={publishDisabled || published || isConvertingWorkflowType}
+              onWorkflowTypeSwitch={handleWorkflowTypeSwitch}
             />
-            <PublisherAccessSection
-              enabled={systemFeatures.webapp_auth.enabled}
-              isAppAccessSet={isAppAccessSet}
-              isLoading={Boolean(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))}
-              accessMode={appDetail?.access_mode}
-              onClick={() => setShowAppAccessControl(true)}
-            />
-            <PublisherActionsSection
-              appDetail={appDetail}
-              appURL={appURL}
-              disabledFunctionButton={disabledFunctionButton}
-              disabledFunctionTooltip={disabledFunctionTooltip}
-              handleEmbed={() => {
-                setEmbeddingModalOpen(true)
-                handleTrigger()
-              }}
-              handleOpenInExplore={handleOpenInExplore}
-              handlePublish={handlePublish}
-              hasHumanInputNode={hasHumanInputNode}
-              hasTriggerNode={hasTriggerNode}
-              inputs={inputs}
-              missingStartNode={missingStartNode}
-              onRefreshData={onRefreshData}
-              outputs={outputs}
-              published={published}
-              publishedAt={publishedAt}
-              toolPublished={toolPublished}
-              workflowToolAvailable={workflowToolAvailable}
-              workflowToolMessage={workflowToolMessage}
-            />
+            {!isEvaluationWorkflowType && (
+              <>
+                <PublisherAccessSection
+                  enabled={systemFeatures.webapp_auth.enabled}
+                  isAppAccessSet={isAppAccessSet}
+                  isLoading={Boolean(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))}
+                  accessMode={appDetail?.access_mode}
+                  onClick={() => setShowAppAccessControl(true)}
+                />
+                <PublisherActionsSection
+                  appDetail={appDetail}
+                  appURL={appURL}
+                  disabledFunctionButton={disabledFunctionButton}
+                  disabledFunctionTooltip={disabledFunctionTooltip}
+                  handleEmbed={() => {
+                    setEmbeddingModalOpen(true)
+                    handleTrigger()
+                  }}
+                  handleOpenInExplore={handleOpenInExplore}
+                  handlePublish={handlePublish}
+                  hasHumanInputNode={hasHumanInputNode}
+                  hasTriggerNode={hasTriggerNode}
+                  inputs={inputs}
+                  missingStartNode={missingStartNode}
+                  onRefreshData={onRefreshData}
+                  outputs={outputs}
+                  published={published}
+                  publishedAt={publishedAt}
+                  toolPublished={toolPublished}
+                  workflowToolAvailable={workflowToolAvailable}
+                  workflowToolMessage={workflowToolMessage}
+                />
+              </>
+            )}
           </div>
         </PortalToFollowElemContent>
         <EmbeddedModal
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index aa9af3bae0..2524653ff7 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -1,11 +1,11 @@
 import type { CSSProperties, ReactNode } from 'react'
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { AppPublisherProps } from './index'
-import type { PublishWorkflowParams } from '@/types/workflow'
+import type { I18nKeysWithPrefix } from '@/types/i18n'
+import type { PublishWorkflowParams, WorkflowTypeConversionTarget } from '@/types/workflow'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
-import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
 import Loading from '@/app/components/base/loading'
 import {
   Tooltip,
@@ -21,6 +21,8 @@ import PublishWithMultipleModel from './publish-with-multiple-model'
 import SuggestedAction from './suggested-action'
 import { ACCESS_MODE_MAP } from './utils'
 
+type WorkflowTypeSwitchLabelKey = I18nKeysWithPrefix<'workflow', 'common.'>
+
 type SummarySectionProps = Pick<AppPublisherProps, | 'debugWithMultipleModel'
   | 'draftUpdatedAt'
   | 'multipleModelConfigs'
@@ -31,9 +33,17 @@ type SummarySectionProps = Pick<AppPublisherProps, | 'debugWithMultipleModel'
     handlePublish: (params?: ModelAndParameter | PublishWorkflowParams) => Promise<void>
     handleRestore: () => Promise<void>
     isChatApp: boolean
+    onWorkflowTypeSwitch: () => Promise<void>
     published: boolean
     publishShortcut: string[]
     upgradeHighlightStyle: CSSProperties
+    workflowTypeSwitchConfig?: {
+      targetType: WorkflowTypeConversionTarget
+      publishLabelKey: WorkflowTypeSwitchLabelKey
+      switchLabelKey: WorkflowTypeSwitchLabelKey
+      tipKey: WorkflowTypeSwitchLabelKey
+    }
+    workflowTypeSwitchDisabled: boolean
   }
 
 type AccessSectionProps = {
@@ -98,12 +108,15 @@ export const PublisherSummarySection = ({
   handleRestore,
   isChatApp,
   multipleModelConfigs = [],
+  onWorkflowTypeSwitch,
   publishDisabled = false,
   published,
   publishedAt,
   publishShortcut,
   startNodeLimitExceeded = false,
   upgradeHighlightStyle,
+  workflowTypeSwitchConfig,
+  workflowTypeSwitchDisabled,
 }: SummarySectionProps) => {
   const { t } = useTranslation()
 
@@ -164,6 +177,45 @@ export const PublisherSummarySection = ({
                       </div>
                     )}
               </Button>
+              {workflowTypeSwitchConfig && (
+                <button
+                  type="button"
+                  className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 system-sm-medium text-text-tertiary hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
+                  onClick={() => void onWorkflowTypeSwitch()}
+                  disabled={workflowTypeSwitchDisabled}
+                >
+                  <span className="px-0.5">
+                    {t(
+                      publishedAt
+                        ? workflowTypeSwitchConfig.switchLabelKey
+                        : workflowTypeSwitchConfig.publishLabelKey,
+                      { ns: 'workflow' },
+                    )}
+                  </span>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={(
+                        <span
+                          className="flex h-4 w-4 items-center justify-center text-text-quaternary hover:text-text-tertiary"
+                          aria-label={t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                          onClick={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                          }}
+                        >
+                          <span className="i-ri-question-line h-3.5 w-3.5" />
+                        </span>
+                      )}
+                    />
+                    <TooltipContent
+                      placement="top"
+                      popupClassName="w-[180px]"
+                    >
+                      {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                    </TooltipContent>
+                  </Tooltip>
+                </button>
+              )}
               {startNodeLimitExceeded && (
                 <div className="mt-3 flex flex-col items-stretch">
                   <p
@@ -305,7 +357,7 @@ export const PublisherActionsSection = ({
             <SuggestedAction
               onClick={handleEmbed}
               disabled={!publishedAt}
-              icon={<CodeBrowser className="h-4 w-4" />}
+              icon={<span className="i-custom-vender-line-development-code-browser h-4 w-4" />}
             >
               {t('common.embedIntoSite', { ns: 'workflow' })}
             </SuggestedAction>
diff --git a/web/app/components/base/icons/src/vender/line/development/index.ts b/web/app/components/base/icons/src/vender/line/development/index.ts
index 7c3c48aa5e..4278370eec 100644
--- a/web/app/components/base/icons/src/vender/line/development/index.ts
+++ b/web/app/components/base/icons/src/vender/line/development/index.ts
@@ -1,2 +1 @@
 export { default as BracketsX } from './BracketsX'
-export { default as CodeBrowser } from './CodeBrowser'

From ed3db06154e80dc5bf4f46f790e52c6f71e4a30e Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 7 Apr 2026 16:12:25 +0800
Subject: [PATCH 060/108] feat(web): restrictions of evalution workflow
 available nodes

---
 .../app-publisher/__tests__/index.spec.tsx    |  20 +++
 .../app-publisher/__tests__/sections.spec.tsx |  31 +++++
 .../components/app/app-publisher/index.tsx    |  18 ++-
 .../components/app/app-publisher/sections.tsx | 120 +++++++++---------
 .../__tests__/index.spec.tsx                  |  23 ++++
 .../start-node-selection-panel.spec.tsx       |  23 ++++
 .../start-node-selection-panel.tsx            |  62 +++++----
 .../use-available-nodes-meta-data.spec.ts     |  27 ++++
 .../hooks/use-available-nodes-meta-data.ts    |  39 ++++--
 .../__tests__/all-start-blocks.spec.tsx       |  35 ++++-
 .../block-selector/__tests__/blocks.spec.tsx  |  51 ++++++++
 .../block-selector/all-start-blocks.tsx       |  19 ++-
 .../workflow/block-selector/blocks.tsx        |  13 +-
 .../workflow/utils/evaluation-workflow.ts     |  20 +++
 web/i18n/en-US/workflow.json                  |   1 +
 web/i18n/zh-Hans/workflow.json                |   1 +
 16 files changed, 394 insertions(+), 109 deletions(-)
 create mode 100644 web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
 create mode 100644 web/app/components/workflow/utils/evaluation-workflow.ts

diff --git a/web/app/components/app/app-publisher/__tests__/index.spec.tsx b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
index 137d028a3f..1c81d84612 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -517,4 +517,24 @@ describe('AppPublisher', () => {
       tipKey: 'common.switchToStandardWorkflowTip',
     })
   })
+
+  it('should block switching to evaluation workflow when restricted nodes exist', async () => {
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+        hasHumanInputNode
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalledWith('common.switchToEvaluationWorkflowDisabledTip')
+    })
+
+    expect(mockConvertWorkflowType).not.toHaveBeenCalled()
+    expect(sectionProps.summary?.workflowTypeSwitchDisabled).toBe(true)
+    expect(sectionProps.summary?.workflowTypeSwitchDisabledReason).toBe('common.switchToEvaluationWorkflowDisabledTip')
+  })
 })
diff --git a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
index 87155e6aa6..f242f1d6c2 100644
--- a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
@@ -185,6 +185,37 @@ describe('app-publisher sections', () => {
     expect(onWorkflowTypeSwitch).toHaveBeenCalledTimes(1)
   })
 
+  it('should disable workflow type switch when a disabled reason is provided', () => {
+    render(
+      <PublisherSummarySection
+        debugWithMultipleModel={false}
+        draftUpdatedAt={Date.now()}
+        formatTimeFromNow={() => '1 minute ago'}
+        handlePublish={vi.fn()}
+        handleRestore={vi.fn()}
+        isChatApp={false}
+        multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
+        publishDisabled={false}
+        published={false}
+        publishedAt={undefined}
+        publishShortcut={['ctrl', '⇧', 'P']}
+        startNodeLimitExceeded={false}
+        upgradeHighlightStyle={{}}
+        workflowTypeSwitchConfig={{
+          targetType: 'evaluation',
+          publishLabelKey: 'common.publishAsEvaluationWorkflow',
+          switchLabelKey: 'common.switchToEvaluationWorkflow',
+          tipKey: 'common.switchToEvaluationWorkflowTip',
+        }}
+        workflowTypeSwitchDisabled
+        workflowTypeSwitchDisabledReason="common.switchToEvaluationWorkflowDisabledTip"
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: /common\.publishAsEvaluationWorkflow/i })).toBeDisabled()
+  })
+
   it('should render loading access state and access mode labels when enabled', () => {
     const { rerender } = render(
       <PublisherAccessSection
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 357e273061..899975d36b 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -138,6 +138,15 @@ const AppPublisher = ({
     ? WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type]
     : undefined
   const isEvaluationWorkflowType = appDetail?.type === AppTypeEnum.EVALUATION
+  const workflowTypeSwitchDisabledReason = useMemo(() => {
+    if (workflowTypeSwitchConfig?.targetType !== AppTypeEnum.EVALUATION)
+      return undefined
+
+    if (!hasHumanInputNode && !hasTriggerNode)
+      return undefined
+
+    return t('common.switchToEvaluationWorkflowDisabledTip', { ns: 'workflow' })
+  }, [hasHumanInputNode, hasTriggerNode, t, workflowTypeSwitchConfig?.targetType])
 
   const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
   const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
@@ -228,6 +237,10 @@ const AppPublisher = ({
   const handleWorkflowTypeSwitch = useCallback(async () => {
     if (!appDetail?.id || !workflowTypeSwitchConfig)
       return
+    if (workflowTypeSwitchDisabledReason) {
+      toast.error(workflowTypeSwitchDisabledReason)
+      return
+    }
 
     try {
       await convertWorkflowType({
@@ -252,7 +265,7 @@ const AppPublisher = ({
         setOpen(false)
     }
     catch { }
-  }, [appDetail?.id, convertWorkflowType, handlePublish, publishedAt, setAppDetail, workflowTypeSwitchConfig])
+  }, [appDetail?.id, convertWorkflowType, handlePublish, publishedAt, setAppDetail, workflowTypeSwitchConfig, workflowTypeSwitchDisabledReason])
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
     e.preventDefault()
@@ -310,7 +323,8 @@ const AppPublisher = ({
               startNodeLimitExceeded={startNodeLimitExceeded}
               upgradeHighlightStyle={upgradeHighlightStyle}
               workflowTypeSwitchConfig={workflowTypeSwitchConfig}
-              workflowTypeSwitchDisabled={publishDisabled || published || isConvertingWorkflowType}
+              workflowTypeSwitchDisabled={publishDisabled || published || isConvertingWorkflowType || Boolean(workflowTypeSwitchDisabledReason)}
+              workflowTypeSwitchDisabledReason={workflowTypeSwitchDisabledReason}
               onWorkflowTypeSwitch={handleWorkflowTypeSwitch}
             />
             {!isEvaluationWorkflowType && (
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index 2524653ff7..67be6fd5a9 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -44,6 +44,7 @@ type SummarySectionProps = Pick<AppPublisherProps, | 'debugWithMultipleModel'
       tipKey: WorkflowTypeSwitchLabelKey
     }
     workflowTypeSwitchDisabled: boolean
+    workflowTypeSwitchDisabledReason?: string
   }
 
 type AccessSectionProps = {
@@ -100,6 +101,28 @@ export const AccessModeDisplay = ({ mode }: { mode?: keyof typeof ACCESS_MODE_MA
   )
 }
 
+const ActionTooltip = ({
+  disabled,
+  tooltip,
+  children,
+}: {
+  disabled: boolean
+  tooltip?: ReactNode
+  children: ReactNode
+}) => {
+  if (!disabled || !tooltip)
+    return <>{children}</>
+
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<div className="flex">{children}</div>} />
+      <TooltipContent>
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
 export const PublisherSummarySection = ({
   debugWithMultipleModel = false,
   draftUpdatedAt,
@@ -117,6 +140,7 @@ export const PublisherSummarySection = ({
   upgradeHighlightStyle,
   workflowTypeSwitchConfig,
   workflowTypeSwitchDisabled,
+  workflowTypeSwitchDisabledReason,
 }: SummarySectionProps) => {
   const { t } = useTranslation()
 
@@ -178,43 +202,45 @@ export const PublisherSummarySection = ({
                     )}
               </Button>
               {workflowTypeSwitchConfig && (
-                <button
-                  type="button"
-                  className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 system-sm-medium text-text-tertiary hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
-                  onClick={() => void onWorkflowTypeSwitch()}
-                  disabled={workflowTypeSwitchDisabled}
-                >
-                  <span className="px-0.5">
-                    {t(
-                      publishedAt
-                        ? workflowTypeSwitchConfig.switchLabelKey
-                        : workflowTypeSwitchConfig.publishLabelKey,
-                      { ns: 'workflow' },
-                    )}
-                  </span>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={(
-                        <span
-                          className="flex h-4 w-4 items-center justify-center text-text-quaternary hover:text-text-tertiary"
-                          aria-label={t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
-                          onClick={(e) => {
-                            e.preventDefault()
-                            e.stopPropagation()
-                          }}
-                        >
-                          <span className="i-ri-question-line h-3.5 w-3.5" />
-                        </span>
+                <ActionTooltip disabled={workflowTypeSwitchDisabled} tooltip={workflowTypeSwitchDisabledReason}>
+                  <button
+                    type="button"
+                    className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 system-sm-medium text-text-tertiary hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
+                    onClick={() => void onWorkflowTypeSwitch()}
+                    disabled={workflowTypeSwitchDisabled}
+                  >
+                    <span className="px-0.5">
+                      {t(
+                        publishedAt
+                          ? workflowTypeSwitchConfig.switchLabelKey
+                          : workflowTypeSwitchConfig.publishLabelKey,
+                        { ns: 'workflow' },
                       )}
-                    />
-                    <TooltipContent
-                      placement="top"
-                      popupClassName="w-[180px]"
-                    >
-                      {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
-                    </TooltipContent>
-                  </Tooltip>
-                </button>
+                    </span>
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={(
+                          <span
+                            className="flex h-4 w-4 items-center justify-center text-text-quaternary hover:text-text-tertiary"
+                            aria-label={t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                            }}
+                          >
+                            <span className="i-ri-question-line h-3.5 w-3.5" />
+                          </span>
+                        )}
+                      />
+                      <TooltipContent
+                        placement="top"
+                        popupClassName="w-[180px]"
+                      >
+                        {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                      </TooltipContent>
+                    </Tooltip>
+                  </button>
+                </ActionTooltip>
               )}
               {startNodeLimitExceeded && (
                 <div className="mt-3 flex flex-col items-stretch">
@@ -279,28 +305,6 @@ export const PublisherAccessSection = ({
   )
 }
 
-const ActionTooltip = ({
-  disabled,
-  tooltip,
-  children,
-}: {
-  disabled: boolean
-  tooltip?: ReactNode
-  children: ReactNode
-}) => {
-  if (!disabled || !tooltip)
-    return <>{children}</>
-
-  return (
-    <Tooltip>
-      <TooltipTrigger render={<div className="flex">{children}</div>} />
-      <TooltipContent>
-        {tooltip}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
 export const PublisherActionsSection = ({
   appDetail,
   appURL,
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
index af38ca113f..479b95dcb6 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
@@ -2,8 +2,21 @@ import type { ReactNode } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { AppTypeEnum } from '@/types/app'
 import WorkflowOnboardingModal from '../index'
 
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 vi.mock('@/app/components/workflow/block-selector', () => ({
   default: function MockNodeSelector({
     open,
@@ -44,6 +57,7 @@ describe('WorkflowOnboardingModal', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
   })
 
   const renderComponent = (props = {}) => {
@@ -91,6 +105,15 @@ describe('WorkflowOnboardingModal', () => {
       expect(getTriggerHeading()).toBeInTheDocument()
     })
 
+    it('should hide the trigger starter in evaluation workflows', () => {
+      mockAppType.current = AppTypeEnum.EVALUATION
+
+      renderComponent()
+
+      expect(getUserInputHeading()).toBeInTheDocument()
+      expect(screen.queryByRole('heading', { name: 'workflow.onboarding.trigger' })).not.toBeInTheDocument()
+    })
+
     it('should render ESC tip when shown', () => {
       renderComponent({ isShow: true })
 
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx
index b2496f8714..36544b568c 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx
@@ -2,8 +2,21 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { AppTypeEnum } from '@/types/app'
 import StartNodeSelectionPanel from '../start-node-selection-panel'
 
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 // Mock NodeSelector component
 vi.mock('@/app/components/workflow/block-selector', () => ({
   default: function MockNodeSelector({
@@ -61,6 +74,7 @@ describe('StartNodeSelectionPanel', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
   })
 
   // Helper function to render component
@@ -96,6 +110,15 @@ describe('StartNodeSelectionPanel', () => {
       expect(screen.getByText('workflow.onboarding.triggerDescription')).toBeInTheDocument()
     })
 
+    it('should hide the trigger option in evaluation workflows', () => {
+      mockAppType.current = AppTypeEnum.EVALUATION
+
+      renderComponent()
+
+      expect(screen.queryByText('workflow.onboarding.trigger')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('node-selector')).not.toBeInTheDocument()
+    })
+
     it('should render node selector component', () => {
       // Arrange & Act
       renderComponent()
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
index 883212cd2d..6c45ae6315 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
@@ -3,10 +3,12 @@ import type { FC } from 'react'
 import type { PluginDefaultValue } from '@/app/components/workflow/block-selector/types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { Home, TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 import NodeSelector from '@/app/components/workflow/block-selector'
 import { TabsEnum } from '@/app/components/workflow/block-selector/types'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { isEvaluationWorkflow } from '@/app/components/workflow/utils/evaluation-workflow'
 import StartNodeOption from './start-node-option'
 
 type StartNodeSelectionPanelProps = {
@@ -19,7 +21,9 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
   onSelectTrigger,
 }) => {
   const { t } = useTranslation()
+  const appType = useAppStore(s => s.appDetail?.type)
   const [showTriggerSelector, setShowTriggerSelector] = useState(false)
+  const isEvaluationWorkflowType = isEvaluationWorkflow(appType)
 
   const handleTriggerSelect = useCallback((nodeType: BlockEnum, toolConfig?: PluginDefaultValue) => {
     setShowTriggerSelector(false)
@@ -39,34 +43,36 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
         onClick={onSelectUserInput}
       />
 
-      <NodeSelector
-        open={showTriggerSelector}
-        onOpenChange={setShowTriggerSelector}
-        onSelect={handleTriggerSelect}
-        placement="right"
-        offset={-200}
-        noBlocks={true}
-        showStartTab={true}
-        defaultActiveTab={TabsEnum.Start}
-        forceShowStartContent={true}
-        availableBlocksTypes={[
-          BlockEnum.TriggerSchedule,
-          BlockEnum.TriggerWebhook,
-          BlockEnum.TriggerPlugin,
-        ]}
-        trigger={() => (
-          <StartNodeOption
-            icon={(
-              <div className="flex h-9 w-9 items-center justify-center radius-lg border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
-                <TriggerAll className="h-5 w-5 text-white" />
-              </div>
-            )}
-            title={t('onboarding.trigger', { ns: 'workflow' })}
-            description={t('onboarding.triggerDescription', { ns: 'workflow' })}
-            onClick={() => setShowTriggerSelector(true)}
-          />
-        )}
-      />
+      {!isEvaluationWorkflowType && (
+        <NodeSelector
+          open={showTriggerSelector}
+          onOpenChange={setShowTriggerSelector}
+          onSelect={handleTriggerSelect}
+          placement="right"
+          offset={-200}
+          noBlocks={true}
+          showStartTab={true}
+          defaultActiveTab={TabsEnum.Start}
+          forceShowStartContent={true}
+          availableBlocksTypes={[
+            BlockEnum.TriggerSchedule,
+            BlockEnum.TriggerWebhook,
+            BlockEnum.TriggerPlugin,
+          ]}
+          trigger={() => (
+            <StartNodeOption
+              icon={(
+                <div className="flex h-9 w-9 items-center justify-center radius-lg border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
+                  <TriggerAll className="h-5 w-5 text-white" />
+                </div>
+              )}
+              title={t('onboarding.trigger', { ns: 'workflow' })}
+              description={t('onboarding.triggerDescription', { ns: 'workflow' })}
+              onClick={() => setShowTriggerSelector(true)}
+            />
+          )}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts
index c92e438cb3..8a645d1ff9 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts
@@ -1,13 +1,25 @@
 import { renderHook } from '@testing-library/react'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { AppTypeEnum } from '@/types/app'
 import { useAvailableNodesMetaData } from '../use-available-nodes-meta-data'
 
 const mockUseIsChatMode = vi.fn()
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
 
 vi.mock('@/app/components/workflow-app/hooks/use-is-chat-mode', () => ({
   useIsChatMode: () => mockUseIsChatMode(),
 }))
 
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `/docs${path}`,
 }))
@@ -15,6 +27,7 @@ vi.mock('@/context/i18n', () => ({
 describe('useAvailableNodesMetaData', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
   })
 
   it('should include chat-specific nodes and make the start node undeletable in chat mode', () => {
@@ -46,4 +59,18 @@ describe('useAvailableNodesMetaData', () => {
       title: 'workflow.blocks.start',
     })
   })
+
+  it('should exclude human input and trigger nodes in evaluation workflows', () => {
+    mockUseIsChatMode.mockReturnValue(false)
+    mockAppType.current = AppTypeEnum.EVALUATION
+
+    const { result } = renderHook(() => useAvailableNodesMetaData())
+
+    expect(result.current.nodesMap?.[BlockEnum.Start]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.End]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.HumanInput]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerWebhook]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerSchedule]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerPlugin]).toBeUndefined()
+  })
 })
diff --git a/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts b/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
index 0c5c1e4a40..33edaa2ed5 100644
--- a/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
+++ b/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
@@ -2,6 +2,7 @@ import type { AvailableNodesMetaData } from '@/app/components/workflow/hooks-sto
 import type { DocPathWithoutLang } from '@/types/doc-paths'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
 import AnswerDefault from '@/app/components/workflow/nodes/answer/default'
 import EndDefault from '@/app/components/workflow/nodes/end/default'
@@ -10,13 +11,16 @@ import TriggerPluginDefault from '@/app/components/workflow/nodes/trigger-plugin
 import TriggerScheduleDefault from '@/app/components/workflow/nodes/trigger-schedule/default'
 import TriggerWebhookDefault from '@/app/components/workflow/nodes/trigger-webhook/default'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { isEvaluationWorkflow, isEvaluationWorkflowRestrictedNodeType } from '@/app/components/workflow/utils/evaluation-workflow'
 import { useDocLink } from '@/context/i18n'
 import { useIsChatMode } from './use-is-chat-mode'
 
 export const useAvailableNodesMetaData = () => {
   const { t } = useTranslation()
   const isChatMode = useIsChatMode()
+  const appType = useAppStore(s => s.appDetail?.type)
   const docLink = useDocLink()
+  const isEvaluationWorkflowType = isEvaluationWorkflow(appType)
 
   const startNodeMetaData = useMemo(() => ({
     ...StartDefault,
@@ -26,20 +30,27 @@ export const useAvailableNodesMetaData = () => {
     },
   }), [isChatMode])
 
-  const mergedNodesMetaData = useMemo(() => [
-    ...WORKFLOW_COMMON_NODES,
-    startNodeMetaData,
-    ...(
-      isChatMode
-        ? [AnswerDefault]
-        : [
-            EndDefault,
-            TriggerWebhookDefault,
-            TriggerScheduleDefault,
-            TriggerPluginDefault,
-          ]
-    ),
-  ], [isChatMode, startNodeMetaData])
+  const mergedNodesMetaData = useMemo(() => {
+    const nodes = [
+      ...WORKFLOW_COMMON_NODES,
+      startNodeMetaData,
+      ...(
+        isChatMode
+          ? [AnswerDefault]
+          : [
+              EndDefault,
+              TriggerWebhookDefault,
+              TriggerScheduleDefault,
+              TriggerPluginDefault,
+            ]
+      ),
+    ]
+
+    if (!isEvaluationWorkflowType)
+      return nodes
+
+    return nodes.filter(node => !isEvaluationWorkflowRestrictedNodeType(node.metaData.type))
+  }, [isChatMode, isEvaluationWorkflowType, startNodeMetaData])
 
   const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
     const { metaData } = node
diff --git a/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx b/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx
index 2b28662b45..0ffe583bb1 100644
--- a/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx
@@ -8,7 +8,7 @@ import { useGetLanguage, useLocale } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
 import { useAllTriggerPlugins, useInvalidateAllTriggerPlugins } from '@/service/use-triggers'
-import { Theme } from '@/types/app'
+import { AppTypeEnum, Theme } from '@/types/app'
 import { defaultSystemFeatures } from '@/types/feature'
 import { useAvailableNodesMetaData } from '../../../workflow-app/hooks'
 import useNodes from '../../store/workflow/use-nodes'
@@ -19,6 +19,18 @@ vi.mock('@/context/global-public-context', () => ({
   useGlobalPublicStore: vi.fn(),
 }))
 
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 vi.mock('@/context/i18n', () => ({
   useGetLanguage: vi.fn(),
   useLocale: vi.fn(),
@@ -179,6 +191,7 @@ const createAvailableNodesMetaData = (): ReturnType<typeof useAvailableNodesMeta
 describe('AllStartBlocks', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
     mockUseGlobalPublicStore.mockImplementation(selector => selector(createGlobalPublicStoreState(false)))
     mockUseGetLanguage.mockReturnValue('en_US')
     mockUseLocale.mockReturnValue('en_US')
@@ -238,6 +251,26 @@ describe('AllStartBlocks', () => {
 
       expect(await screen.findByRole('link', { name: /plugin\.findMoreInMarketplace/ })).toHaveAttribute('href', 'https://marketplace.test/start')
     })
+
+    it('should hide trigger options in evaluation workflows', async () => {
+      mockAppType.current = AppTypeEnum.EVALUATION
+
+      render(
+        <AllStartBlocks
+          searchText=""
+          onSelect={vi.fn()}
+          availableBlocksTypes={[BlockEnum.Start, BlockEnum.TriggerPlugin]}
+          allowUserInputSelection
+        />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('workflow.blocks.start')).toBeInTheDocument()
+      })
+
+      expect(screen.queryByText('Provider One')).not.toBeInTheDocument()
+      expect(screen.queryByText('workflow.tabs.allTriggers')).not.toBeInTheDocument()
+    })
   })
 
   // Empty filter states should surface the request-to-community fallback.
diff --git a/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx b/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
new file mode 100644
index 0000000000..27b8e68c7f
--- /dev/null
+++ b/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+import { useStoreApi } from 'reactflow'
+import { AppTypeEnum } from '@/types/app'
+import { BlockEnum } from '../../types'
+import Blocks from '../blocks'
+
+const mockGetNodes = vi.fn(() => [])
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('reactflow', () => ({
+  useStoreApi: vi.fn(),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
+const mockUseStoreApi = vi.mocked(useStoreApi)
+
+describe('Blocks', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
+    mockUseStoreApi.mockReturnValue({
+      getState: () => ({
+        getNodes: mockGetNodes,
+      }),
+    } as unknown as ReturnType<typeof useStoreApi>)
+  })
+
+  it('should hide human input in evaluation workflows', () => {
+    mockAppType.current = AppTypeEnum.EVALUATION
+
+    render(
+      <Blocks
+        searchText=""
+        onSelect={vi.fn()}
+        availableBlocksTypes={[BlockEnum.HumanInput, BlockEnum.LLM]}
+      />,
+    )
+
+    expect(screen.queryByText('workflow.blocks.human-input')).not.toBeInTheDocument()
+    expect(screen.getByText('workflow.blocks.llm')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index f59edfbcbf..80ce02cc47 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -14,9 +14,11 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { filterEvaluationWorkflowRestrictedBlockTypes, isEvaluationWorkflow } from '@/app/components/workflow/utils/evaluation-workflow'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
@@ -54,13 +56,21 @@ const AllStartBlocks = ({
   const { t } = useTranslation()
   const [hasStartBlocksContent, setHasStartBlocksContent] = useState(false)
   const [hasPluginContent, setHasPluginContent] = useState(false)
+  const appType = useAppStore(s => s.appDetail?.type)
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   const pluginRef = useRef<ListRef>(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
 
-  const entryNodeTypes = availableBlocksTypes?.length
-    ? availableBlocksTypes
-    : ENTRY_NODE_TYPES
+  const entryNodeTypes = useMemo(() => {
+    const blockTypes = availableBlocksTypes?.length
+      ? availableBlocksTypes
+      : [...ENTRY_NODE_TYPES]
+
+    if (!isEvaluationWorkflow(appType))
+      return blockTypes
+
+    return filterEvaluationWorkflowRestrictedBlockTypes(blockTypes)
+  }, [appType, availableBlocksTypes])
   const enableTriggerPlugin = entryNodeTypes.includes(BlockEnumValue.TriggerPlugin)
   const { data: triggerProviders = [] } = useAllTriggerPlugins(enableTriggerPlugin)
   const providerMap = useMemo(() => {
@@ -94,7 +104,8 @@ const AllStartBlocks = ({
   const shouldShowFeatured = enableTriggerPlugin
     && enable_marketplace
     && !hasFilter
-  const shouldShowTriggerListTitle = hasStartBlocksContent || hasPluginContent
+  const hasTriggerOptions = entryNodeTypes.some(type => type !== BlockEnumValue.Start)
+  const shouldShowTriggerListTitle = hasTriggerOptions && (hasStartBlocksContent || hasPluginContent)
   const shouldShowMarketplaceFooter = enable_marketplace && !hasFilter
 
   const handleStartBlocksContentChange = useCallback((hasContent: boolean) => {
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index 2425112335..429c25b21b 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -8,8 +8,10 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import Badge from '@/app/components/base/badge'
 import Tooltip from '@/app/components/base/tooltip'
+import { filterEvaluationWorkflowRestrictedBlockTypes, isEvaluationWorkflow } from '@/app/components/workflow/utils/evaluation-workflow'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import { BLOCK_CLASSIFICATIONS } from './constants'
@@ -29,7 +31,14 @@ const Blocks = ({
 }: BlocksProps) => {
   const { t } = useTranslation()
   const store = useStoreApi()
+  const appType = useAppStore(s => s.appDetail?.type)
   const blocksFromHooks = useBlocks()
+  const filteredAvailableBlocksTypes = useMemo(() => {
+    if (!isEvaluationWorkflow(appType))
+      return availableBlocksTypes
+
+    return filterEvaluationWorkflowRestrictedBlockTypes(availableBlocksTypes)
+  }, [appType, availableBlocksTypes])
 
   // Use external blocks if provided, otherwise fallback to hook-based blocks
   const blocks = blocksFromProps || blocksFromHooks.map(block => ({
@@ -57,7 +66,7 @@ const Blocks = ({
           return false
         }
 
-        return block.metaData.title.toLowerCase().includes(searchText.toLowerCase()) && availableBlocksTypes.includes(block.metaData.type)
+        return block.metaData.title.toLowerCase().includes(searchText.toLowerCase()) && filteredAvailableBlocksTypes.includes(block.metaData.type)
       })
 
       return {
@@ -65,7 +74,7 @@ const Blocks = ({
         [classification]: list,
       }
     }, {} as Record<string, typeof blocks>)
-  }, [blocks, searchText, availableBlocksTypes])
+  }, [blocks, filteredAvailableBlocksTypes, searchText])
   const isEmpty = Object.values(groups).every(list => !list.length)
 
   const renderGroup = useCallback((classification: BlockClassificationEnum) => {
diff --git a/web/app/components/workflow/utils/evaluation-workflow.ts b/web/app/components/workflow/utils/evaluation-workflow.ts
new file mode 100644
index 0000000000..40d4b2fb65
--- /dev/null
+++ b/web/app/components/workflow/utils/evaluation-workflow.ts
@@ -0,0 +1,20 @@
+import { AppTypeEnum } from '@/types/app'
+import { BlockEnum, TRIGGER_NODE_TYPES } from '../types'
+
+const EVALUATION_WORKFLOW_RESTRICTED_NODE_TYPES = new Set<string>([
+  BlockEnum.HumanInput,
+  ...TRIGGER_NODE_TYPES,
+])
+
+export const isEvaluationWorkflow = (appType?: string) => appType === AppTypeEnum.EVALUATION
+
+export const isEvaluationWorkflowRestrictedNodeType = (nodeType?: string) => {
+  if (!nodeType)
+    return false
+
+  return EVALUATION_WORKFLOW_RESTRICTED_NODE_TYPES.has(nodeType)
+}
+
+export const filterEvaluationWorkflowRestrictedBlockTypes = (blockTypes: BlockEnum[]) => {
+  return blockTypes.filter(blockType => !isEvaluationWorkflowRestrictedNodeType(blockType))
+}
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 91161bbc04..944601ad33 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -216,6 +216,7 @@
   "common.setVarValuePlaceholder": "Set variable",
   "common.showRunHistory": "Show Run History",
   "common.switchToEvaluationWorkflow": "Switch to Evaluation Workflow",
+  "common.switchToEvaluationWorkflowDisabledTip": "Evaluation workflows do not support Human Input nodes or Trigger start nodes.",
   "common.switchToEvaluationWorkflowTip": "Turns this workflow into a custom evaluator for batch testing. Disables public Web App access.",
   "common.switchToStandardWorkflow": "Switch to Standard Workflow",
   "common.switchToStandardWorkflowTip": "Turns this evaluator back into a standard workflow and restores public Web App access.",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index a82a89c581..1688dba6a7 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -216,6 +216,7 @@
   "common.setVarValuePlaceholder": "设置变量值",
   "common.showRunHistory": "显示运行历史",
   "common.switchToEvaluationWorkflow": "切换为评测工作流",
+  "common.switchToEvaluationWorkflowDisabledTip": "评测工作流不支持 Human Input 节点或 Trigger 开始节点。",
   "common.switchToEvaluationWorkflowTip": "将当前工作流转换为批量测试用的自定义评测器，并禁用公开 Web App 访问。",
   "common.switchToStandardWorkflow": "切换为标准工作流",
   "common.switchToStandardWorkflowTip": "将当前评测器转换回标准工作流，并恢复公开 Web App 访问。",

From fb91984fcb5e3da96212068af9bdf3ba22b7feac Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 13:26:43 +0800
Subject: [PATCH 061/108] feat(web): add evaluation navigation for rag-pipeline

---
 .../__tests__/layout-main.spec.tsx            | 209 ++++++++++++++++++
 .../[datasetId]/layout-main.tsx               |  19 +-
 web/app/components/evaluation/index.tsx       |   2 +-
 3 files changed, 221 insertions(+), 9 deletions(-)
 create mode 100644 web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx

diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
new file mode 100644
index 0000000000..74dc55efb8
--- /dev/null
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
@@ -0,0 +1,209 @@
+import type { ReactNode } from 'react'
+import type { DataSet } from '@/models/datasets'
+import { render, screen } from '@testing-library/react'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
+import { RETRIEVE_METHOD } from '@/types/app'
+import DatasetDetailLayout from '../layout-main'
+
+let mockPathname = '/datasets/test-dataset-id/documents'
+let mockDataset: DataSet | undefined
+
+const mockSetAppSidebarExpand = vi.fn()
+const mockMutateDatasetRes = vi.fn()
+
+vi.mock('@/next/navigation', () => ({
+  usePathname: () => mockPathname,
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: {
+    mobile: 'mobile',
+    desktop: 'desktop',
+  },
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: {
+      useSubscription: vi.fn(),
+    },
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceDatasetOperator: false,
+  }),
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+  default: vi.fn(),
+}))
+
+vi.mock('@/service/knowledge/use-dataset', () => ({
+  useDatasetDetail: () => ({
+    data: mockDataset,
+    error: null,
+    refetch: mockMutateDatasetRes,
+  }),
+  useDatasetRelatedApps: () => ({
+    data: [],
+  }),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    navigation,
+    children,
+  }: {
+    navigation: Array<{ name: string, href: string, disabled?: boolean }>
+    children?: ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      {navigation.map(item => (
+        <button
+          key={item.href}
+          type="button"
+          disabled={item.disabled}
+        >
+          {item.name}
+        </button>
+      ))}
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/datasets/extra-info', () => ({
+  default: () => <div data-testid="dataset-extra-info" />,
+}))
+
+vi.mock('@/app/components/base/loading', () => ({
+  default: () => <div role="status">loading</div>,
+}))
+
+const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
+  id: 'test-dataset-id',
+  name: 'Test Dataset',
+  indexing_status: 'completed',
+  icon_info: {
+    icon: 'book',
+    icon_background: '#fff',
+    icon_type: 'emoji',
+    icon_url: '',
+  },
+  description: '',
+  permission: DatasetPermission.onlyMe,
+  data_source_type: DataSourceType.FILE,
+  indexing_technique: IndexingType.QUALIFIED,
+  created_by: 'user-1',
+  updated_by: 'user-1',
+  updated_at: 0,
+  app_count: 0,
+  doc_form: ChunkingMode.text,
+  document_count: 0,
+  total_document_count: 0,
+  word_count: 0,
+  provider: 'vendor',
+  embedding_model: 'text-embedding',
+  embedding_model_provider: 'openai',
+  embedding_available: true,
+  retrieval_model_dict: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 3,
+    score_threshold_enabled: false,
+    score_threshold: 0.5,
+  },
+  retrieval_model: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 3,
+    score_threshold_enabled: false,
+    score_threshold: 0.5,
+  },
+  tags: [],
+  external_knowledge_info: {
+    external_knowledge_id: '',
+    external_knowledge_api_id: '',
+    external_knowledge_api_name: '',
+    external_knowledge_api_endpoint: '',
+  },
+  external_retrieval_model: {
+    top_k: 3,
+    score_threshold: 0.5,
+    score_threshold_enabled: false,
+  },
+  built_in_field_enabled: false,
+  pipeline_id: 'pipeline-1',
+  is_published: true,
+  runtime_mode: 'rag_pipeline',
+  enable_api: false,
+  is_multimodal: false,
+  ...overrides,
+})
+
+describe('DatasetDetailLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockPathname = '/datasets/test-dataset-id/documents'
+    mockDataset = createDataset()
+  })
+
+  describe('Evaluation navigation', () => {
+    it('should hide the evaluation menu when the dataset is not a rag pipeline', () => {
+      mockDataset = createDataset({
+        runtime_mode: 'general',
+        is_published: false,
+      })
+
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.queryByRole('button', { name: 'common.datasetMenus.evaluation' })).not.toBeInTheDocument()
+    })
+
+    it('should disable the evaluation menu when the rag pipeline is unpublished', () => {
+      mockDataset = createDataset({
+        is_published: false,
+      })
+
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.getByRole('button', { name: 'common.datasetMenus.evaluation' })).toBeDisabled()
+    })
+
+    it('should enable the evaluation menu when the rag pipeline is published', () => {
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.getByRole('button', { name: 'common.datasetMenus.evaluation' })).toBeEnabled()
+    })
+  })
+})
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index bc6837961a..b7a6347b4c 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -58,6 +58,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const { data: datasetRes, error, refetch: mutateDatasetRes } = useDatasetDetail(datasetId)
 
   const { data: relatedApps } = useDatasetRelatedApps(datasetId)
+  const isRagPipelineDataset = datasetRes?.runtime_mode === 'rag_pipeline'
 
   const isButtonDisabledWithPipeline = useMemo(() => {
     if (!datasetRes)
@@ -103,19 +104,21 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
           selectedIcon: PipelineFill as RemixiconComponentType,
           disabled: false,
         },
-        {
-          name: t('datasetMenus.evaluation', { ns: 'common' }),
-          href: `/datasets/${datasetId}/evaluation`,
-          icon: RiFlaskLine,
-          selectedIcon: RiFlaskFill,
-          disabled: false,
-        },
+        ...(isRagPipelineDataset
+          ? [{
+              name: t('datasetMenus.evaluation', { ns: 'common' }),
+              href: `/datasets/${datasetId}/evaluation`,
+              icon: RiFlaskLine,
+              selectedIcon: RiFlaskFill,
+              disabled: isButtonDisabledWithPipeline,
+            }]
+          : []),
         ...baseNavigation,
       ]
     }
 
     return baseNavigation
-  }, [t, datasetId, isButtonDisabledWithPipeline, datasetRes?.provider])
+  }, [t, datasetId, isButtonDisabledWithPipeline, isRagPipelineDataset, datasetRes?.provider])
 
   useDocumentTitle(datasetRes?.name || t('menus.datasets', { ns: 'common' }))
 
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
index c7ebca62f0..b031cd7afb 100644
--- a/web/app/components/evaluation/index.tsx
+++ b/web/app/components/evaluation/index.tsx
@@ -59,7 +59,7 @@ const Evaluation = ({
         </div>
       </div>
 
-      <div className="h-[420px] shrink-0 border-t border-divider-subtle xl:h-auto xl:w-[450px] xl:border-l xl:border-t-0">
+      <div className="h-[420px] shrink-0 border-t border-divider-subtle xl:h-auto xl:w-[450px] xl:border-t-0 xl:border-l">
         <BatchTestPanel resourceType={resourceType} resourceId={resourceId} />
       </div>
     </div>

From 73d95245f8897966ea7d1533ba1ce2fe837ddbd5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 13:44:29 +0800
Subject: [PATCH 062/108] feat(web): dataset evaluation layout

---
 .../evaluation/__tests__/index.spec.tsx       |  42 ++-
 .../components/judge-model-selector.tsx       |  11 +-
 .../components/non-pipeline-evaluation.tsx    |  62 ++++
 .../components/pipeline-evaluation.tsx        | 346 ++++++++++++++++++
 web/app/components/evaluation/index.tsx       |  63 +---
 web/app/components/evaluation/mock.ts         |  26 +-
 web/i18n/en-US/evaluation.json                |  11 +
 7 files changed, 506 insertions(+), 55 deletions(-)
 create mode 100644 web/app/components/evaluation/components/non-pipeline-evaluation.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline-evaluation.tsx

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 8666c8b96d..748ce5981f 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -16,9 +16,23 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
 }))
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
-  default: ({ defaultModel }: { defaultModel?: { provider: string, model: string } }) => (
-    <div data-testid="evaluation-model-selector">
-      {defaultModel ? `${defaultModel.provider}:${defaultModel.model}` : 'empty'}
+  default: ({
+    defaultModel,
+    onSelect,
+  }: {
+    defaultModel?: { provider: string, model: string }
+    onSelect: (model: { provider: string, model: string }) => void
+  }) => (
+    <div>
+      <div data-testid="evaluation-model-selector">
+        {defaultModel ? `${defaultModel.provider}:${defaultModel.model}` : 'empty'}
+      </div>
+      <button
+        type="button"
+        onClick={() => onSelect({ provider: 'openai', model: 'gpt-4o-mini' })}
+      >
+        select-model
+      </button>
     </div>
   ),
 }))
@@ -208,4 +222,26 @@ describe('Evaluation', () => {
     expect(screen.getByText('LLM 4')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'evaluation.metrics.showLess' })).toBeInTheDocument()
   })
+
+  it('should render the pipeline-specific layout without auto-selecting a judge model', () => {
+    render(<Evaluation resourceType="pipeline" resourceId="dataset-1" />)
+
+    expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('empty')
+    expect(screen.getByText('evaluation.history.title')).toBeInTheDocument()
+    expect(screen.getByText('Context Precision')).toBeInTheDocument()
+    expect(screen.getByText('Context Recall')).toBeInTheDocument()
+    expect(screen.getByText('Context Relevance')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.results.empty')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeDisabled()
+  })
+
+  it('should enable pipeline batch actions after selecting a judge model and metric', () => {
+    render(<Evaluation resourceType="pipeline" resourceId="dataset-2" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
+    fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
+
+    expect(screen.getByRole('button', { name: 'evaluation.batch.downloadTemplate' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeEnabled()
+  })
 })
diff --git a/web/app/components/evaluation/components/judge-model-selector.tsx b/web/app/components/evaluation/components/judge-model-selector.tsx
index e0514012fe..8f9ee4aff6 100644
--- a/web/app/components/evaluation/components/judge-model-selector.tsx
+++ b/web/app/components/evaluation/components/judge-model-selector.tsx
@@ -8,17 +8,22 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 import { useEvaluationResource, useEvaluationStore } from '../store'
 import { decodeModelSelection, encodeModelSelection } from '../utils'
 
+type JudgeModelSelectorProps = EvaluationResourceProps & {
+  autoSelectFirst?: boolean
+}
+
 const JudgeModelSelector = ({
   resourceType,
   resourceId,
-}: EvaluationResourceProps) => {
+  autoSelectFirst = true,
+}: JudgeModelSelectorProps) => {
   const { data: modelList } = useModelList(ModelTypeEnum.textGeneration)
   const resource = useEvaluationResource(resourceType, resourceId)
   const setJudgeModel = useEvaluationStore(state => state.setJudgeModel)
   const selectedModel = decodeModelSelection(resource.judgeModelId)
 
   useEffect(() => {
-    if (resource.judgeModelId || !modelList.length)
+    if (!autoSelectFirst || resource.judgeModelId || !modelList.length)
       return
 
     const firstProvider = modelList[0]
@@ -27,7 +32,7 @@ const JudgeModelSelector = ({
       return
 
     setJudgeModel(resourceType, resourceId, encodeModelSelection(firstProvider.provider, firstModel.model))
-  }, [modelList, resource.judgeModelId, resourceId, resourceType, setJudgeModel])
+  }, [autoSelectFirst, modelList, resource.judgeModelId, resourceId, resourceType, setJudgeModel])
 
   return (
     <ModelSelector
diff --git a/web/app/components/evaluation/components/non-pipeline-evaluation.tsx b/web/app/components/evaluation/components/non-pipeline-evaluation.tsx
new file mode 100644
index 0000000000..1b7d507339
--- /dev/null
+++ b/web/app/components/evaluation/components/non-pipeline-evaluation.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../types'
+import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
+import BatchTestPanel from './batch-test-panel'
+import ConditionsSection from './conditions-section'
+import JudgeModelSelector from './judge-model-selector'
+import MetricSection from './metric-section'
+import SectionHeader, { InlineSectionHeader } from './section-header'
+
+const NonPipelineEvaluation = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const docLink = useDocLink()
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex min-h-full max-w-[748px] flex-col px-6 py-4">
+          <SectionHeader
+            title={t('title')}
+            description={(
+              <>
+                {t('description')}
+                {' '}
+                <a
+                  className="text-text-accent"
+                  href={docLink()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {tCommon('operation.learnMore')}
+                </a>
+              </>
+            )}
+            descriptionClassName="max-w-[700px]"
+          />
+          <section className="max-w-[700px] py-4">
+            <InlineSectionHeader title={t('judgeModel.title')} tooltip={t('judgeModel.description')} />
+            <div className="mt-1.5">
+              <JudgeModelSelector resourceType={resourceType} resourceId={resourceId} />
+            </div>
+          </section>
+          <div className="max-w-[700px] border-b border-divider-subtle" />
+          <MetricSection resourceType={resourceType} resourceId={resourceId} />
+          <div className="max-w-[700px] border-b border-divider-subtle" />
+          <ConditionsSection resourceType={resourceType} resourceId={resourceId} />
+        </div>
+      </div>
+
+      <div className="h-[420px] shrink-0 border-t border-divider-subtle xl:h-auto xl:w-[450px] xl:border-t-0 xl:border-l">
+        <BatchTestPanel resourceType={resourceType} resourceId={resourceId} />
+      </div>
+    </div>
+  )
+}
+
+export default NonPipelineEvaluation
diff --git a/web/app/components/evaluation/components/pipeline-evaluation.tsx b/web/app/components/evaluation/components/pipeline-evaluation.tsx
new file mode 100644
index 0000000000..4464b85a73
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline-evaluation.tsx
@@ -0,0 +1,346 @@
+'use client'
+
+import type { EvaluationResourceProps, MetricOption } from '../types'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import Checkbox from '@/app/components/base/checkbox'
+import Input from '@/app/components/base/input'
+import { toast } from '@/app/components/base/ui/toast'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { useDocLink } from '@/context/i18n'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from '../mock'
+import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../store'
+import JudgeModelSelector from './judge-model-selector'
+import SectionHeader, { InlineSectionHeader } from './section-header'
+
+type PipelineMetricItemProps = {
+  metric: MetricOption
+  selected: boolean
+  onToggle: () => void
+  disabledCondition: boolean
+}
+
+const PipelineMetricItem = ({
+  metric,
+  selected,
+  onToggle,
+  disabledCondition,
+}: PipelineMetricItemProps) => {
+  return (
+    <div className="flex items-center justify-between gap-3 px-1 py-1">
+      <button
+        type="button"
+        className="flex min-w-0 items-center gap-2 text-left"
+        onClick={onToggle}
+      >
+        <Checkbox checked={selected} />
+        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <span className="flex h-4 w-4 items-center justify-center text-text-quaternary">
+                <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
+              </span>
+            )}
+          />
+          <TooltipContent>
+            {metric.description}
+          </TooltipContent>
+        </Tooltip>
+      </button>
+
+      <button
+        type="button"
+        disabled={disabledCondition}
+        className={cn(
+          'system-xs-medium text-text-tertiary',
+          disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+        )}
+      >
+        + Condition
+      </button>
+    </div>
+  )
+}
+
+const PipelineHistoryTable = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const [query, setQuery] = useState('')
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+
+  const filteredRecords = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+    if (!keyword)
+      return resource.batchRecords
+
+    return resource.batchRecords.filter(record =>
+      record.fileName.toLowerCase().includes(keyword)
+      || record.summary.toLowerCase().includes(keyword),
+    )
+  }, [query, resource.batchRecords])
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center justify-between gap-3 px-6 pt-4 pb-2">
+        <div className="system-xl-semibold text-text-primary">{t('history.title')}</div>
+        <div className="w-[160px] shrink-0 sm:w-[200px]">
+          <Input
+            value={query}
+            showLeftIcon
+            placeholder={t('history.searchPlaceholder')}
+            onChange={event => setQuery(event.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 px-4 pb-4">
+        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-effects-highlight bg-background-default">
+          <div className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] rounded-t-lg bg-background-section px-2 py-1">
+            <div className="flex items-center gap-1 px-2 system-xs-medium-uppercase text-text-tertiary">
+              <span>{t('history.columns.time')}</span>
+              <span aria-hidden="true" className="i-ri-arrow-down-line h-3 w-3" />
+            </div>
+            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</div>
+            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</div>
+            <div className="px-2 text-center system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</div>
+            <div />
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {filteredRecords.length > 0 && (
+              <div className="divide-y divide-divider-subtle">
+                {filteredRecords.map(record => (
+                  <div
+                    key={record.id}
+                    className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] items-center px-2 py-2"
+                  >
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{record.startedAt}</div>
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.creatorYou')}</div>
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.latestVersion')}</div>
+                    <div className="flex justify-center px-2">
+                      <Badge
+                        className={cn(
+                          record.status === 'failed' && 'badge-warning',
+                          record.status === 'success' && 'badge-accent',
+                        )}
+                      >
+                        {record.status === 'running'
+                          ? (
+                              <span className="flex items-center gap-1">
+                                <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
+                                {statusLabels.running}
+                              </span>
+                            )
+                          : statusLabels[record.status]}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-center">
+                      <button
+                        type="button"
+                        className="flex h-6 w-6 items-center justify-center rounded-md text-text-quaternary hover:bg-state-base-hover"
+                        aria-label={record.summary}
+                      >
+                        <span aria-hidden="true" className="i-ri-more-2-line h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {filteredRecords.length === 0 && (
+              <div className="flex h-full min-h-[321px] flex-col items-center justify-center gap-2 px-4 text-center">
+                <span aria-hidden="true" className="i-ri-history-line h-5 w-5 text-text-quaternary" />
+                <div className="system-sm-medium text-text-quaternary">{t('history.empty')}</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const PipelineResultsPanel = () => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
+      <div className="flex flex-col items-center gap-4 px-4 text-center">
+        <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
+        <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
+      </div>
+    </div>
+  )
+}
+
+const PipelineEvaluation = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const docLink = useDocLink()
+  const ensureResource = useEvaluationStore(state => state.ensureResource)
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const config = getEvaluationMockConfig(resourceType)
+  const builtinMetricMap = useMemo(() => new Map(
+    resource.metrics
+      .filter(metric => metric.kind === 'builtin')
+      .map(metric => [metric.optionId, metric]),
+  ), [resource.metrics])
+  const isConfigReady = !!resource.judgeModelId && builtinMetricMap.size > 0
+  const isRunnable = isEvaluationRunnable(resource)
+
+  useEffect(() => {
+    ensureResource(resourceType, resourceId)
+  }, [ensureResource, resourceId, resourceType])
+
+  const handleToggleMetric = (metricId: string) => {
+    const selectedMetric = builtinMetricMap.get(metricId)
+    if (selectedMetric) {
+      removeMetric(resourceType, resourceId, selectedMetric.id)
+      return
+    }
+
+    addBuiltinMetric(resourceType, resourceId, metricId)
+  }
+
+  const handleDownloadTemplate = () => {
+    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = config.templateFileName
+    link.click()
+  }
+
+  const handleUploadAndRun = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
+      <div className="flex min-h-0 flex-col border-b border-divider-subtle bg-background-default xl:w-[450px] xl:shrink-0 xl:border-r xl:border-b-0">
+        <div className="px-6 pt-4 pb-2">
+          <SectionHeader
+            title={t('title')}
+            description={(
+              <>
+                {t('description')}
+                {' '}
+                <a
+                  className="text-text-accent"
+                  href={docLink()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {tCommon('operation.learnMore')}
+                </a>
+              </>
+            )}
+          />
+        </div>
+
+        <div className="px-6 pt-3 pb-4">
+          <div className="space-y-3">
+            <section>
+              <InlineSectionHeader title={t('judgeModel.title')} tooltip={t('judgeModel.description')} />
+              <div className="mt-1">
+                <JudgeModelSelector
+                  resourceType={resourceType}
+                  resourceId={resourceId}
+                  autoSelectFirst={false}
+                />
+              </div>
+            </section>
+
+            <section>
+              <InlineSectionHeader title={t('metrics.title')} tooltip={t('metrics.description')} />
+              <div className="mt-1 space-y-0.5">
+                {config.builtinMetrics.map(metric => (
+                  <PipelineMetricItem
+                    key={metric.id}
+                    metric={metric}
+                    selected={builtinMetricMap.has(metric.id)}
+                    disabledCondition
+                    onToggle={() => handleToggleMetric(metric.id)}
+                  />
+                ))}
+              </div>
+            </section>
+
+            <div className="flex gap-2 pt-2">
+              <Button
+                className="flex-1 justify-center"
+                variant="secondary"
+                disabled={!isConfigReady}
+                onClick={handleDownloadTemplate}
+              >
+                <span aria-hidden="true" className="mr-1 i-ri-file-excel-2-line h-4 w-4" />
+                {t('batch.downloadTemplate')}
+              </Button>
+              <Button
+                className="flex-1 justify-center"
+                variant="primary"
+                disabled={!isConfigReady}
+                onClick={handleUploadAndRun}
+              >
+                {t('pipeline.uploadAndRun')}
+              </Button>
+            </div>
+
+            <input
+              ref={fileInputRef}
+              hidden
+              type="file"
+              accept=".csv,.xlsx"
+              onChange={(event) => {
+                const file = event.target.files?.[0]
+                if (!file)
+                  return
+
+                setUploadedFileName(resourceType, resourceId, file.name)
+                runBatchTest(resourceType, resourceId)
+                event.target.value = ''
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="border-t border-divider-subtle" />
+
+        <PipelineHistoryTable
+          resourceType={resourceType}
+          resourceId={resourceId}
+        />
+      </div>
+
+      <div className="min-h-0 flex-1 bg-background-default">
+        <PipelineResultsPanel />
+      </div>
+    </div>
+  )
+}
+
+export default PipelineEvaluation
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
index b031cd7afb..5806bf140a 100644
--- a/web/app/components/evaluation/index.tsx
+++ b/web/app/components/evaluation/index.tsx
@@ -2,67 +2,34 @@
 
 import type { EvaluationResourceProps } from './types'
 import { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useDocLink } from '@/context/i18n'
-import BatchTestPanel from './components/batch-test-panel'
-import ConditionsSection from './components/conditions-section'
-import JudgeModelSelector from './components/judge-model-selector'
-import MetricSection from './components/metric-section'
-import SectionHeader, { InlineSectionHeader } from './components/section-header'
+import NonPipelineEvaluation from './components/non-pipeline-evaluation'
+import PipelineEvaluation from './components/pipeline-evaluation'
 import { useEvaluationStore } from './store'
 
 const Evaluation = ({
   resourceType,
   resourceId,
 }: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const { t: tCommon } = useTranslation('common')
-  const docLink = useDocLink()
   const ensureResource = useEvaluationStore(state => state.ensureResource)
 
   useEffect(() => {
     ensureResource(resourceType, resourceId)
   }, [ensureResource, resourceId, resourceType])
 
-  return (
-    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
-      <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="flex min-h-full max-w-[748px] flex-col px-6 py-4">
-          <SectionHeader
-            title={t('title')}
-            description={(
-              <>
-                {t('description')}
-                {' '}
-                <a
-                  className="text-text-accent"
-                  href={docLink()}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {tCommon('operation.learnMore')}
-                </a>
-              </>
-            )}
-            descriptionClassName="max-w-[700px]"
-          />
-          <section className="max-w-[700px] py-4">
-            <InlineSectionHeader title={t('judgeModel.title')} tooltip={t('judgeModel.description')} />
-            <div className="mt-1.5">
-              <JudgeModelSelector resourceType={resourceType} resourceId={resourceId} />
-            </div>
-          </section>
-          <div className="max-w-[700px] border-b border-divider-subtle" />
-          <MetricSection resourceType={resourceType} resourceId={resourceId} />
-          <div className="max-w-[700px] border-b border-divider-subtle" />
-          <ConditionsSection resourceType={resourceType} resourceId={resourceId} />
-        </div>
-      </div>
+  if (resourceType === 'pipeline') {
+    return (
+      <PipelineEvaluation
+        resourceType={resourceType}
+        resourceId={resourceId}
+      />
+    )
+  }
 
-      <div className="h-[420px] shrink-0 border-t border-divider-subtle xl:h-auto xl:w-[450px] xl:border-t-0 xl:border-l">
-        <BatchTestPanel resourceType={resourceType} resourceId={resourceId} />
-      </div>
-    </div>
+  return (
+    <NonPipelineEvaluation
+      resourceType={resourceType}
+      resourceId={resourceId}
+    />
   )
 }
 
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
index 598e5ee675..341711e567 100644
--- a/web/app/components/evaluation/mock.ts
+++ b/web/app/components/evaluation/mock.ts
@@ -69,6 +69,30 @@ const builtinMetrics: MetricOption[] = [
   },
 ]
 
+const pipelineBuiltinMetrics: MetricOption[] = [
+  {
+    id: 'context-precision',
+    label: 'Context Precision',
+    description: 'Measures whether retrieved chunks stay tightly aligned to the request.',
+    group: 'quality',
+    badges: ['Retrieval'],
+  },
+  {
+    id: 'context-recall',
+    label: 'Context Recall',
+    description: 'Checks whether the retrieval result includes the evidence needed to answer.',
+    group: 'quality',
+    badges: ['Retrieval'],
+  },
+  {
+    id: 'context-relevance',
+    label: 'Context Relevance',
+    description: 'Scores how useful the retrieved context is for downstream generation.',
+    group: 'quality',
+    badges: ['Retrieval'],
+  },
+]
+
 const workflowOptions = [
   {
     id: 'workflow-precision-review',
@@ -139,7 +163,7 @@ export const getEvaluationMockConfig = (resourceType: EvaluationResourceType): E
   if (resourceType === 'pipeline') {
     return {
       judgeModels,
-      builtinMetrics,
+      builtinMetrics: pipelineBuiltinMetrics,
       workflowOptions,
       fieldOptions: pipelineFields,
       templateFileName: 'pipeline-evaluation-template.csv',
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 2749ce3fc5..41dff238e3 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -47,6 +47,15 @@
   "conditions.title": "Judgment Conditions",
   "conditions.valuePlaceholder": "Enter a value",
   "description": "Configure automated testing to grade your application's performance.",
+  "history.columns.creator": "Creator",
+  "history.columns.status": "Status",
+  "history.columns.time": "Time",
+  "history.columns.version": "Version",
+  "history.creatorYou": "You",
+  "history.empty": "No test history yet",
+  "history.latestVersion": "Latest",
+  "history.searchPlaceholder": "Search",
+  "history.title": "Test History",
   "judgeModel.description": "Choose the model used to score your evaluation results.",
   "judgeModel.title": "Judge Model",
   "metrics.add": "Add Metric",
@@ -83,5 +92,7 @@
   "metrics.showMore": "Show more",
   "metrics.title": "Metrics",
   "metrics.update": "Update",
+  "pipeline.uploadAndRun": "Upload & Run Test",
+  "results.empty": "No evaluation results yet.",
   "title": "Evaluation"
 }

From cfb5b9dfeab492ea1b5135965a73001fad4ee132 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 14:21:01 +0800
Subject: [PATCH 063/108] feat(web): dataset evaluation configure fetch

---
 .../[appId]/evaluation/page.tsx               |   2 +-
 .../[datasetId]/evaluation/page.tsx           |   2 +-
 .../evaluation/__tests__/index.spec.tsx       |  21 +-
 .../evaluation/__tests__/store.spec.ts        | 111 ++++++--
 .../{ => layout}/non-pipeline-evaluation.tsx  |  12 +-
 .../{ => layout}/pipeline-evaluation.tsx      |  10 +-
 .../metric-section/__tests__/index.spec.tsx   |   4 +-
 .../components/metric-section/index.tsx       |   2 +-
 .../use-metric-selector-data.ts               |   6 +-
 .../components/metric-selector/utils.ts       |   4 +-
 web/app/components/evaluation/index.tsx       |  16 +-
 web/app/components/evaluation/mock.ts         |   4 +-
 web/app/components/evaluation/store-utils.ts  | 269 +++++++++++++++---
 web/app/components/evaluation/store.ts        |  17 +-
 web/app/components/evaluation/types.ts        |   2 +-
 .../snippets/snippet-evaluation-page.tsx      |   2 +-
 web/service/use-evaluation.ts                 |  42 ++-
 web/types/evaluation.ts                       |  38 ++-
 18 files changed, 467 insertions(+), 97 deletions(-)
 rename web/app/components/evaluation/components/{ => layout}/non-pipeline-evaluation.tsx (85%)
 rename web/app/components/evaluation/components/{ => layout}/pipeline-evaluation.tsx (97%)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
index 161f37108d..d602c15d5e 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
@@ -5,7 +5,7 @@ const Page = async (props: {
 }) => {
   const { appId } = await props.params
 
-  return <Evaluation resourceType="workflow" resourceId={appId} />
+  return <Evaluation resourceType="apps" resourceId={appId} />
 }
 
 export default Page
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
index d502266d16..97ba166391 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
@@ -5,7 +5,7 @@ const Page = async (props: {
 }) => {
   const { datasetId } = await props.params
 
-  return <Evaluation resourceType="pipeline" resourceId={datasetId} />
+  return <Evaluation resourceType="datasets" resourceId={datasetId} />
 }
 
 export default Page
diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 748ce5981f..302df31c9d 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -4,6 +4,7 @@ import { getEvaluationMockConfig } from '../mock'
 import { useEvaluationStore } from '../store'
 
 const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
+const mockUseEvaluationConfig = vi.hoisted(() => vi.fn())
 const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
@@ -38,6 +39,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-selec
 }))
 
 vi.mock('@/service/use-evaluation', () => ({
+  useEvaluationConfig: (...args: unknown[]) => mockUseEvaluationConfig(...args),
   useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
   useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
 }))
@@ -46,6 +48,9 @@ describe('Evaluation', () => {
   beforeEach(() => {
     useEvaluationStore.setState({ resources: {} })
     vi.clearAllMocks()
+    mockUseEvaluationConfig.mockReturnValue({
+      data: null,
+    })
 
     mockUseAvailableEvaluationMetrics.mockReturnValue({
       data: {
@@ -72,7 +77,7 @@ describe('Evaluation', () => {
   it('should search, select metric nodes, and create a batch history record', async () => {
     vi.useFakeTimers()
 
-    render(<Evaluation resourceType="workflow" resourceId="app-1" />)
+    render(<Evaluation resourceType="apps" resourceId="app-1" />)
 
     expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('openai:gpt-4o-mini')
 
@@ -113,7 +118,7 @@ describe('Evaluation', () => {
   })
 
   it('should render time placeholders and hide the value row for empty operators', () => {
-    const resourceType = 'workflow'
+    const resourceType = 'apps'
     const resourceId = 'app-2'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
@@ -126,7 +131,7 @@ describe('Evaluation', () => {
       store.ensureResource(resourceType, resourceId)
       store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
 
-      const group = useEvaluationStore.getState().resources['workflow:app-2'].conditions[0]
+      const group = useEvaluationStore.getState().resources['apps:app-2'].conditions[0]
       groupId = group.id
       itemId = group.items[0].id
 
@@ -166,7 +171,7 @@ describe('Evaluation', () => {
       },
     })
 
-    render(<Evaluation resourceType="workflow" resourceId="app-3" />)
+    render(<Evaluation resourceType="apps" resourceId="app-3" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
 
@@ -181,7 +186,7 @@ describe('Evaluation', () => {
       isLoading: false,
     })
 
-    render(<Evaluation resourceType="workflow" resourceId="app-4" />)
+    render(<Evaluation resourceType="apps" resourceId="app-4" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
 
@@ -210,7 +215,7 @@ describe('Evaluation', () => {
       },
     })
 
-    render(<Evaluation resourceType="workflow" resourceId="app-5" />)
+    render(<Evaluation resourceType="apps" resourceId="app-5" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
 
@@ -224,7 +229,7 @@ describe('Evaluation', () => {
   })
 
   it('should render the pipeline-specific layout without auto-selecting a judge model', () => {
-    render(<Evaluation resourceType="pipeline" resourceId="dataset-1" />)
+    render(<Evaluation resourceType="datasets" resourceId="dataset-1" />)
 
     expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('empty')
     expect(screen.getByText('evaluation.history.title')).toBeInTheDocument()
@@ -236,7 +241,7 @@ describe('Evaluation', () => {
   })
 
   it('should enable pipeline batch actions after selecting a judge model and metric', () => {
-    render(<Evaluation resourceType="pipeline" resourceId="dataset-2" />)
+    render(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
     fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 698231bf6f..9415e8430a 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -1,3 +1,4 @@
+import type { EvaluationConfig } from '@/types/evaluation'
 import { getEvaluationMockConfig } from '../mock'
 import {
   getAllowedOperators,
@@ -12,7 +13,7 @@ describe('evaluation store', () => {
   })
 
   it('should configure a custom metric mapping to a valid state', () => {
-    const resourceType = 'workflow'
+    const resourceType = 'apps'
     const resourceId = 'app-1'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
@@ -20,7 +21,7 @@ describe('evaluation store', () => {
     store.ensureResource(resourceType, resourceId)
     store.addCustomMetric(resourceType, resourceId)
 
-    const initialMetric = useEvaluationStore.getState().resources['workflow:app-1'].metrics.find(metric => metric.kind === 'custom-workflow')
+    const initialMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.kind === 'custom-workflow')
     expect(initialMetric).toBeDefined()
     expect(isCustomMetricConfigured(initialMetric!)).toBe(false)
 
@@ -34,14 +35,14 @@ describe('evaluation store', () => {
       targetVariableId: config.workflowOptions[0].targetVariables[0].id,
     })
 
-    const configuredMetric = useEvaluationStore.getState().resources['workflow:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
+    const configuredMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
     expect(isCustomMetricConfigured(configuredMetric!)).toBe(true)
     expect(configuredMetric!.customConfig!.workflowAppId).toBe('custom-workflow-app-id')
     expect(configuredMetric!.customConfig!.workflowName).toBe(config.workflowOptions[0].label)
   })
 
   it('should add and remove builtin metrics', () => {
-    const resourceType = 'workflow'
+    const resourceType = 'apps'
     const resourceId = 'app-2'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
@@ -49,16 +50,16 @@ describe('evaluation store', () => {
     store.ensureResource(resourceType, resourceId)
     store.addBuiltinMetric(resourceType, resourceId, config.builtinMetrics[1].id)
 
-    const addedMetric = useEvaluationStore.getState().resources['workflow:app-2'].metrics.find(metric => metric.optionId === config.builtinMetrics[1].id)
+    const addedMetric = useEvaluationStore.getState().resources['apps:app-2'].metrics.find(metric => metric.optionId === config.builtinMetrics[1].id)
     expect(addedMetric).toBeDefined()
 
     store.removeMetric(resourceType, resourceId, addedMetric!.id)
 
-    expect(useEvaluationStore.getState().resources['workflow:app-2'].metrics.some(metric => metric.id === addedMetric!.id)).toBe(false)
+    expect(useEvaluationStore.getState().resources['apps:app-2'].metrics.some(metric => metric.id === addedMetric!.id)).toBe(false)
   })
 
   it('should upsert builtin metric node selections', () => {
-    const resourceType = 'workflow'
+    const resourceType = 'apps'
     const resourceId = 'app-4'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
@@ -73,38 +74,38 @@ describe('evaluation store', () => {
       { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
     ])
 
-    const metric = useEvaluationStore.getState().resources['workflow:app-4'].metrics.find(item => item.optionId === metricId)
+    const metric = useEvaluationStore.getState().resources['apps:app-4'].metrics.find(item => item.optionId === metricId)
 
     expect(metric?.nodeInfoList).toEqual([
       { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
     ])
-    expect(useEvaluationStore.getState().resources['workflow:app-4'].metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
+    expect(useEvaluationStore.getState().resources['apps:app-4'].metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
   })
 
   it('should update condition groups and adapt operators to field types', () => {
-    const resourceType = 'pipeline'
+    const resourceType = 'datasets'
     const resourceId = 'dataset-1'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
 
     store.ensureResource(resourceType, resourceId)
 
-    const initialGroup = useEvaluationStore.getState().resources['pipeline:dataset-1'].conditions[0]
+    const initialGroup = useEvaluationStore.getState().resources['datasets:dataset-1'].conditions[0]
     store.setConditionGroupOperator(resourceType, resourceId, initialGroup.id, 'or')
     store.addConditionGroup(resourceType, resourceId)
 
     const booleanField = config.fieldOptions.find(field => field.type === 'boolean')!
-    const currentItem = useEvaluationStore.getState().resources['pipeline:dataset-1'].conditions[0].items[0]
+    const currentItem = useEvaluationStore.getState().resources['datasets:dataset-1'].conditions[0].items[0]
     store.updateConditionField(resourceType, resourceId, initialGroup.id, currentItem.id, booleanField.id)
 
-    const updatedGroup = useEvaluationStore.getState().resources['pipeline:dataset-1'].conditions[0]
+    const updatedGroup = useEvaluationStore.getState().resources['datasets:dataset-1'].conditions[0]
     expect(updatedGroup.logicalOperator).toBe('or')
     expect(updatedGroup.items[0].operator).toBe('is')
     expect(getAllowedOperators(resourceType, booleanField.id)).toEqual(['is', 'is_not'])
   })
 
   it('should support time fields and clear values for empty operators', () => {
-    const resourceType = 'workflow'
+    const resourceType = 'apps'
     const resourceId = 'app-3'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
@@ -112,15 +113,89 @@ describe('evaluation store', () => {
     store.ensureResource(resourceType, resourceId)
 
     const timeField = config.fieldOptions.find(field => field.type === 'time')!
-    const item = useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].items[0]
+    const item = useEvaluationStore.getState().resources['apps:app-3'].conditions[0].items[0]
 
-    store.updateConditionField(resourceType, resourceId, useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].id, item.id, timeField.id)
-    store.updateConditionOperator(resourceType, resourceId, useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].id, item.id, 'is_empty')
+    store.updateConditionField(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, timeField.id)
+    store.updateConditionOperator(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, 'is_empty')
 
-    const updatedItem = useEvaluationStore.getState().resources['workflow:app-3'].conditions[0].items[0]
+    const updatedItem = useEvaluationStore.getState().resources['apps:app-3'].conditions[0].items[0]
 
     expect(getAllowedOperators(resourceType, timeField.id)).toEqual(['is', 'before', 'after', 'is_empty', 'is_not_empty'])
     expect(requiresConditionValue('is_empty')).toBe(false)
     expect(updatedItem.value).toBeNull()
   })
+
+  it('should hydrate resource state from evaluation config', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-5'
+    const store = useEvaluationStore.getState()
+    const config: EvaluationConfig = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      metrics_config: {
+        default_metrics: [{
+          metric: 'faithfulness',
+          node_info_list: [
+            { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
+          ],
+        }],
+        customized_metrics: {
+          evaluation_workflow_id: 'workflow-precision-review',
+          input_fields: {
+            'app.input.query': 'query',
+          },
+        },
+      },
+      judgement_conditions: [{
+        logical_operator: 'or',
+        items: [{
+          field_id: 'system.has_context',
+          operator: 'is',
+          value: true,
+        }],
+      }],
+    }
+
+    store.ensureResource(resourceType, resourceId)
+    store.setBatchTab(resourceType, resourceId, 'history')
+    store.setUploadedFileName(resourceType, resourceId, 'batch.csv')
+    useEvaluationStore.setState(state => ({
+      resources: {
+        ...state.resources,
+        'apps:app-5': {
+          ...state.resources['apps:app-5'],
+          batchRecords: [{
+            id: 'batch-1',
+            fileName: 'batch.csv',
+            status: 'success',
+            startedAt: '10:00:00',
+            summary: 'App evaluation batch',
+          }],
+        },
+      },
+    }))
+    store.hydrateResource(resourceType, resourceId, config)
+
+    const hydratedState = useEvaluationStore.getState().resources['apps:app-5']
+
+    expect(hydratedState.judgeModelId).toBe('openai::gpt-4o-mini')
+    expect(hydratedState.metrics).toHaveLength(2)
+    expect(hydratedState.metrics[0].optionId).toBe('faithfulness')
+    expect(hydratedState.metrics[0].nodeInfoList).toEqual([
+      { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
+    ])
+    expect(hydratedState.metrics[1].kind).toBe('custom-workflow')
+    expect(hydratedState.metrics[1].customConfig?.workflowId).toBe('workflow-precision-review')
+    expect(hydratedState.metrics[1].customConfig?.mappings[0].sourceFieldId).toBe('app.input.query')
+    expect(hydratedState.metrics[1].customConfig?.mappings[0].targetVariableId).toBe('query')
+    expect(hydratedState.conditions[0].logicalOperator).toBe('or')
+    expect(hydratedState.conditions[0].items[0]).toMatchObject({
+      fieldId: 'system.has_context',
+      operator: 'is',
+      value: true,
+    })
+    expect(hydratedState.activeBatchTab).toBe('history')
+    expect(hydratedState.uploadedFileName).toBe('batch.csv')
+    expect(hydratedState.batchRecords).toHaveLength(1)
+  })
 })
diff --git a/web/app/components/evaluation/components/non-pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx
similarity index 85%
rename from web/app/components/evaluation/components/non-pipeline-evaluation.tsx
rename to web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx
index 1b7d507339..5d47a754ff 100644
--- a/web/app/components/evaluation/components/non-pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import type { EvaluationResourceProps } from '../types'
+import type { EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
-import BatchTestPanel from './batch-test-panel'
-import ConditionsSection from './conditions-section'
-import JudgeModelSelector from './judge-model-selector'
-import MetricSection from './metric-section'
-import SectionHeader, { InlineSectionHeader } from './section-header'
+import BatchTestPanel from '../batch-test-panel'
+import ConditionsSection from '../conditions-section'
+import JudgeModelSelector from '../judge-model-selector'
+import MetricSection from '../metric-section'
+import SectionHeader, { InlineSectionHeader } from '../section-header'
 
 const NonPipelineEvaluation = ({
   resourceType,
diff --git a/web/app/components/evaluation/components/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
similarity index 97%
rename from web/app/components/evaluation/components/pipeline-evaluation.tsx
rename to web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 4464b85a73..73ba754f28 100644
--- a/web/app/components/evaluation/components/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { EvaluationResourceProps, MetricOption } from '../types'
+import type { EvaluationResourceProps, MetricOption } from '../../types'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
@@ -11,10 +11,10 @@ import { toast } from '@/app/components/base/ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useDocLink } from '@/context/i18n'
 import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../mock'
-import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../store'
-import JudgeModelSelector from './judge-model-selector'
-import SectionHeader, { InlineSectionHeader } from './section-header'
+import { getEvaluationMockConfig } from '../../mock'
+import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import JudgeModelSelector from '../judge-model-selector'
+import SectionHeader, { InlineSectionHeader } from '../section-header'
 
 type PipelineMetricItemProps = {
   metric: MetricOption
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index 7b1cb56daf..03343d2a1c 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import MetricSection from '..'
 import { useEvaluationStore } from '../../../store'
 
@@ -13,7 +13,7 @@ vi.mock('@/service/use-evaluation', () => ({
   useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
 }))
 
-const resourceType = 'workflow' as const
+const resourceType = 'apps' as const
 const resourceId = 'metric-section-resource'
 
 const renderMetricSection = () => {
diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
index eac266c996..7887b2733b 100644
--- a/web/app/components/evaluation/components/metric-section/index.tsx
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -21,7 +21,7 @@ const MetricSection = ({
   const [nodeInfoMap, setNodeInfoMap] = useState<Record<string, NodeInfo[]>>({})
   const hasMetrics = resource.metrics.length > 0
   const hasBuiltinMetrics = resource.metrics.some(metric => metric.kind === 'builtin')
-  const shouldLoadNodeInfo = resourceType !== 'pipeline' && !!resourceId && hasBuiltinMetrics
+  const shouldLoadNodeInfo = resourceType !== 'datasets' && !!resourceId && hasBuiltinMetrics
   const { data: availableMetricsData } = useAvailableEvaluationMetrics(shouldLoadNodeInfo)
   const { mutate: loadNodeInfo } = useEvaluationNodeInfoMutation()
   const availableMetricIds = useMemo(() => availableMetricsData?.metrics ?? [], [availableMetricsData?.metrics])
diff --git a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
index 317b325a0f..46f8e9e740 100644
--- a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
+++ b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
@@ -13,7 +13,7 @@ import {
 type UseMetricSelectorDataOptions = {
   open: boolean
   query: string
-  resourceType: 'workflow' | 'pipeline' | 'snippet'
+  resourceType: 'apps' | 'datasets' | 'snippets'
   resourceId: string
   nodeInfoMap: Record<string, NodeInfo[]>
   setNodeInfoMap: (value: Record<string, NodeInfo[]>) => void
@@ -63,7 +63,7 @@ export const useMetricSelectorData = ({
     if (!open)
       return
 
-    if (resourceType === 'pipeline' || !resourceId || availableMetricIds.length === 0)
+    if (resourceType === 'datasets' || !resourceId || availableMetricIds.length === 0)
       return
 
     let isActive = true
@@ -107,7 +107,7 @@ export const useMetricSelectorData = ({
         || metric.label.toLowerCase().includes(keyword)
         || metric.description.toLowerCase().includes(keyword)
       const metricNodes = nodeInfoMap[metric.id] ?? []
-      const supportsNodeSelection = resourceType !== 'pipeline'
+      const supportsNodeSelection = resourceType !== 'datasets'
       const hasNoNodeInfo = supportsNodeSelection && metricNodes.length === 0
 
       if (hasNoNodeInfo) {
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index 8c369d9920..a88e5069d7 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -2,8 +2,8 @@ import type { MetricOption } from '../../types'
 import type { MetricVisualTone } from './types'
 import type { EvaluationTargetType, NodeInfo } from '@/types/evaluation'
 
-export const toEvaluationTargetType = (resourceType: 'workflow' | 'snippet'): EvaluationTargetType => {
-  return resourceType === 'snippet' ? 'snippets' : 'app'
+export const toEvaluationTargetType = (resourceType: 'apps' | 'snippets'): EvaluationTargetType => {
+  return resourceType === 'snippets' ? 'snippets' : 'app'
 }
 
 const humanizeMetricId = (metricId: string) => {
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
index 5806bf140a..b12157b7fa 100644
--- a/web/app/components/evaluation/index.tsx
+++ b/web/app/components/evaluation/index.tsx
@@ -2,21 +2,31 @@
 
 import type { EvaluationResourceProps } from './types'
 import { useEffect } from 'react'
-import NonPipelineEvaluation from './components/non-pipeline-evaluation'
-import PipelineEvaluation from './components/pipeline-evaluation'
+import { useEvaluationConfig } from '@/service/use-evaluation'
+import NonPipelineEvaluation from './components/layout/non-pipeline-evaluation'
+import PipelineEvaluation from './components/layout/pipeline-evaluation'
 import { useEvaluationStore } from './store'
 
 const Evaluation = ({
   resourceType,
   resourceId,
 }: EvaluationResourceProps) => {
+  const { data: config } = useEvaluationConfig(resourceType, resourceId)
   const ensureResource = useEvaluationStore(state => state.ensureResource)
+  const hydrateResource = useEvaluationStore(state => state.hydrateResource)
 
   useEffect(() => {
     ensureResource(resourceType, resourceId)
   }, [ensureResource, resourceId, resourceType])
 
-  if (resourceType === 'pipeline') {
+  useEffect(() => {
+    if (!config)
+      return
+
+    hydrateResource(resourceType, resourceId, config)
+  }, [config, hydrateResource, resourceId, resourceType])
+
+  if (resourceType === 'datasets') {
     return (
       <PipelineEvaluation
         resourceType={resourceType}
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
index 341711e567..317f839b82 100644
--- a/web/app/components/evaluation/mock.ts
+++ b/web/app/components/evaluation/mock.ts
@@ -160,7 +160,7 @@ export const getDefaultOperator = (fieldType: EvaluationFieldOption['type']): Co
 }
 
 export const getEvaluationMockConfig = (resourceType: EvaluationResourceType): EvaluationMockConfig => {
-  if (resourceType === 'pipeline') {
+  if (resourceType === 'datasets') {
     return {
       judgeModels,
       builtinMetrics: pipelineBuiltinMetrics,
@@ -176,7 +176,7 @@ export const getEvaluationMockConfig = (resourceType: EvaluationResourceType): E
     }
   }
 
-  if (resourceType === 'snippet') {
+  if (resourceType === 'snippets') {
     return {
       judgeModels,
       builtinMetrics,
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index a03c12d259..c1acc1300c 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -9,24 +9,195 @@ import type {
   JudgmentConditionGroup,
   MetricOption,
 } from './types'
-import type { NodeInfo } from '@/types/evaluation'
+import type {
+  EvaluationConditionValue,
+  EvaluationConfig,
+  EvaluationCustomizedMetric,
+  EvaluationDefaultMetric,
+  EvaluationJudgementConditionGroup,
+  EvaluationJudgementConditionItem,
+  EvaluationMetricsConfig,
+  NodeInfo,
+} from '@/types/evaluation'
 import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
+import { encodeModelSelection } from './utils'
 
 type EvaluationStoreResources = Record<string, EvaluationResourceState>
 
 const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
 
+const humanizeMetricId = (metricId: string) => {
+  return metricId
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+const resolveMetricOption = (resourceType: EvaluationResourceType, metricId: string): MetricOption => {
+  const config = getEvaluationMockConfig(resourceType)
+  return config.builtinMetrics.find(metric => metric.id === metricId) ?? {
+    id: metricId,
+    label: humanizeMetricId(metricId),
+    description: '',
+    group: config.builtinMetrics[0]?.group ?? 'other',
+    badges: ['Built-in'],
+  }
+}
+
+const normalizeNodeInfoList = (value: NodeInfo[] | undefined): NodeInfo[] => {
+  if (!value?.length)
+    return []
+
+  return value
+    .map((item) => {
+      const nodeId = typeof item.node_id === 'string' ? item.node_id : ''
+      const title = typeof item.title === 'string' ? item.title : nodeId
+      const type = typeof item.type === 'string' ? item.type : ''
+
+      if (!nodeId)
+        return null
+
+      return {
+        node_id: nodeId,
+        title,
+        type,
+      }
+    })
+    .filter((item): item is NodeInfo => !!item)
+}
+
+const normalizeDefaultMetrics = (
+  resourceType: EvaluationResourceType,
+  value: EvaluationDefaultMetric[] | undefined,
+): EvaluationMetric[] => {
+  if (!value?.length)
+    return []
+
+  return value
+    .map((item) => {
+      const metricId = typeof item.metric === 'string' ? item.metric : ''
+      if (!metricId)
+        return null
+
+      const metricOption = resolveMetricOption(resourceType, metricId)
+      return createBuiltinMetric(metricOption, normalizeNodeInfoList(item.node_info_list ?? []))
+    })
+    .filter((item): item is EvaluationMetric => !!item)
+}
+
+const normalizeCustomMetricMappings = (
+  value: EvaluationCustomizedMetric['input_fields'],
+): CustomMetricMapping[] => {
+  if (!value)
+    return [createCustomMetricMapping()]
+
+  const mappings = Object.entries(value)
+    .filter((entry): entry is [string, string] => {
+      const [, targetVariableId] = entry
+      return typeof targetVariableId === 'string' && !!targetVariableId
+    })
+    .map(([sourceFieldId, targetVariableId]) => ({
+      id: createId('mapping'),
+      sourceFieldId,
+      targetVariableId,
+    }))
+
+  return mappings.length > 0 ? mappings : [createCustomMetricMapping()]
+}
+
+const normalizeCustomMetric = (
+  value: EvaluationCustomizedMetric | null | undefined,
+): EvaluationMetric[] => {
+  if (!value)
+    return []
+
+  const workflowId = typeof value.evaluation_workflow_id === 'string' ? value.evaluation_workflow_id : null
+  if (!workflowId)
+    return []
+
+  const customMetric = createCustomMetric()
+
+  return [{
+    ...customMetric,
+    customConfig: customMetric.customConfig
+      ? {
+          ...customMetric.customConfig,
+          workflowId,
+          mappings: normalizeCustomMetricMappings(value.input_fields),
+        }
+      : customMetric.customConfig,
+  }]
+}
+
+const normalizeConditionItem = (
+  resourceType: EvaluationResourceType,
+  value: EvaluationJudgementConditionItem,
+): JudgmentConditionGroup['items'][number] => {
+  const fieldId = typeof value.fieldId === 'string'
+    ? value.fieldId
+    : typeof value.field_id === 'string'
+      ? value.field_id
+      : null
+  const operatorValue = typeof value.operator === 'string' ? value.operator : null
+  const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
+  const allowedOperators = field ? getComparisonOperators(field.type) : ['contains']
+  const operator = operatorValue && allowedOperators.includes(operatorValue as ComparisonOperator)
+    ? operatorValue as ComparisonOperator
+    : field
+      ? getDefaultOperator(field.type)
+      : 'contains'
+  const rawValue: EvaluationConditionValue = value.value ?? null
+
+  return {
+    id: typeof value.id === 'string' ? value.id : createId('condition'),
+    fieldId,
+    operator,
+    value: getConditionValue(field, operator, rawValue),
+  }
+}
+
+const normalizeConditionGroups = (
+  resourceType: EvaluationResourceType,
+  value: EvaluationConfig['judgement_conditions'],
+): JudgmentConditionGroup[] => {
+  const groupsValue: EvaluationJudgementConditionGroup[] = Array.isArray(value)
+    ? value
+    : Array.isArray(value?.groups)
+      ? value.groups
+      : []
+
+  const groups = groupsValue
+    .map((group) => {
+      const itemsValue = Array.isArray(group.items) ? group.items : []
+      const items = itemsValue
+        .map(item => normalizeConditionItem(resourceType, item))
+
+      if (items.length === 0)
+        return null
+
+      return {
+        id: typeof group.id === 'string' ? group.id : createId('group'),
+        logicalOperator: group.logicalOperator === 'or' || group.logical_operator === 'or' ? 'or' : 'and',
+        items,
+      } satisfies JudgmentConditionGroup
+    })
+    .filter((group): group is JudgmentConditionGroup => !!group)
+
+  return groups.length > 0 ? groups : [createConditionGroup(resourceType)]
+}
+
 export const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
 
 const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
 
 export const requiresConditionValue = (operator: ComparisonOperator) => !conditionOperatorsWithoutValue.includes(operator)
 
-export const getConditionValue = (
+export function getConditionValue(
   field: EvaluationFieldOption | undefined,
   operator: ComparisonOperator,
   previousValue: string | number | boolean | null = null,
-) => {
+) {
   if (!field || !requiresConditionValue(operator))
     return null
 
@@ -42,36 +213,42 @@ export const getConditionValue = (
   return typeof previousValue === 'string' ? previousValue : null
 }
 
-export const createBuiltinMetric = (metric: MetricOption, nodeInfoList: NodeInfo[] = []): EvaluationMetric => ({
-  id: createId('metric'),
-  optionId: metric.id,
-  kind: 'builtin',
-  label: metric.label,
-  description: metric.description,
-  badges: metric.badges,
-  nodeInfoList,
-})
+export function createBuiltinMetric(metric: MetricOption, nodeInfoList: NodeInfo[] = []): EvaluationMetric {
+  return {
+    id: createId('metric'),
+    optionId: metric.id,
+    kind: 'builtin',
+    label: metric.label,
+    description: metric.description,
+    badges: metric.badges,
+    nodeInfoList,
+  }
+}
 
-export const createCustomMetricMapping = (): CustomMetricMapping => ({
-  id: createId('mapping'),
-  sourceFieldId: null,
-  targetVariableId: null,
-})
+export function createCustomMetricMapping(): CustomMetricMapping {
+  return {
+    id: createId('mapping'),
+    sourceFieldId: null,
+    targetVariableId: null,
+  }
+}
 
-export const createCustomMetric = (): EvaluationMetric => ({
-  id: createId('metric'),
-  optionId: createId('custom'),
-  kind: 'custom-workflow',
-  label: 'Custom Evaluator',
-  description: 'Map workflow variables to your evaluation inputs.',
-  badges: ['Workflow'],
-  customConfig: {
-    workflowId: null,
-    workflowAppId: null,
-    workflowName: null,
-    mappings: [createCustomMetricMapping()],
-  },
-})
+export function createCustomMetric(): EvaluationMetric {
+  return {
+    id: createId('metric'),
+    optionId: createId('custom'),
+    kind: 'custom-workflow',
+    label: 'Custom Evaluator',
+    description: 'Map workflow variables to your evaluation inputs.',
+    badges: ['Workflow'],
+    customConfig: {
+      workflowId: null,
+      workflowAppId: null,
+      workflowName: null,
+      mappings: [createCustomMetricMapping()],
+    },
+  }
+}
 
 export const buildConditionItem = (resourceType: EvaluationResourceType) => {
   const field = getEvaluationMockConfig(resourceType).fieldOptions[0]
@@ -85,11 +262,13 @@ export const buildConditionItem = (resourceType: EvaluationResourceType) => {
   }
 }
 
-export const createConditionGroup = (resourceType: EvaluationResourceType): JudgmentConditionGroup => ({
-  id: createId('group'),
-  logicalOperator: 'and',
-  items: [buildConditionItem(resourceType)],
-})
+export function createConditionGroup(resourceType: EvaluationResourceType): JudgmentConditionGroup {
+  return {
+    id: createId('group'),
+    logicalOperator: 'and',
+    items: [buildConditionItem(resourceType)],
+  }
+}
 
 export const buildInitialState = (resourceType: EvaluationResourceType): EvaluationResourceState => {
   return {
@@ -102,6 +281,24 @@ export const buildInitialState = (resourceType: EvaluationResourceType): Evaluat
   }
 }
 
+export const buildStateFromEvaluationConfig = (
+  resourceType: EvaluationResourceType,
+  config: EvaluationConfig,
+): EvaluationResourceState => {
+  const metricsConfig: EvaluationMetricsConfig = config.metrics_config ?? {}
+  const defaultMetrics = normalizeDefaultMetrics(resourceType, metricsConfig.default_metrics)
+  const customMetrics = normalizeCustomMetric(metricsConfig.customized_metrics)
+
+  return {
+    ...buildInitialState(resourceType),
+    judgeModelId: config.evaluation_model && config.evaluation_model_provider
+      ? encodeModelSelection(config.evaluation_model_provider, config.evaluation_model)
+      : null,
+    metrics: [...defaultMetrics, ...customMetrics],
+    conditions: normalizeConditionGroups(resourceType, config.judgement_conditions),
+  }
+}
+
 const getResourceState = (
   resources: EvaluationStoreResources,
   resourceType: EvaluationResourceType,
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index c91744da9b..61e1f773bb 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -3,13 +3,14 @@ import type {
   EvaluationResourceState,
   EvaluationResourceType,
 } from './types'
-import type { NodeInfo } from '@/types/evaluation'
+import type { EvaluationConfig, NodeInfo } from '@/types/evaluation'
 import { create } from 'zustand'
 import { getDefaultOperator, getEvaluationMockConfig } from './mock'
 import {
   buildConditionItem,
   buildInitialState,
   buildResourceKey,
+  buildStateFromEvaluationConfig,
   createBatchTestRecord,
   createBuiltinMetric,
   createConditionGroup,
@@ -28,6 +29,7 @@ import {
 type EvaluationStore = {
   resources: Record<string, EvaluationResourceState>
   ensureResource: (resourceType: EvaluationResourceType, resourceId: string) => void
+  hydrateResource: (resourceType: EvaluationResourceType, resourceId: string, config: EvaluationConfig) => void
   setJudgeModel: (resourceType: EvaluationResourceType, resourceId: string, judgeModelId: string) => void
   addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string, nodeInfoList?: NodeInfo[]) => void
   addCustomMetric: (resourceType: EvaluationResourceType, resourceId: string) => void
@@ -82,6 +84,19 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       },
     }))
   },
+  hydrateResource: (resourceType, resourceId, config) => {
+    set(state => ({
+      resources: {
+        ...state.resources,
+        [buildResourceKey(resourceType, resourceId)]: {
+          ...buildStateFromEvaluationConfig(resourceType, config),
+          activeBatchTab: state.resources[buildResourceKey(resourceType, resourceId)]?.activeBatchTab ?? 'input-fields',
+          uploadedFileName: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileName ?? null,
+          batchRecords: state.resources[buildResourceKey(resourceType, resourceId)]?.batchRecords ?? [],
+        },
+      },
+    }))
+  },
   setJudgeModel: (resourceType, resourceId, judgeModelId) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 7cdf67b3c9..936c47365e 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -1,6 +1,6 @@
 import type { NodeInfo } from '@/types/evaluation'
 
-export type EvaluationResourceType = 'workflow' | 'pipeline' | 'snippet'
+export type EvaluationResourceType = 'apps' | 'datasets' | 'snippets'
 
 export type EvaluationResourceProps = {
   resourceType: EvaluationResourceType
diff --git a/web/app/components/snippets/snippet-evaluation-page.tsx b/web/app/components/snippets/snippet-evaluation-page.tsx
index 736f36fc1e..5691be1977 100644
--- a/web/app/components/snippets/snippet-evaluation-page.tsx
+++ b/web/app/components/snippets/snippet-evaluation-page.tsx
@@ -22,7 +22,7 @@ const SnippetEvaluationPage = ({ snippetId }: SnippetEvaluationPageProps) => {
       snippet={snippet}
       section="evaluation"
     >
-      <Evaluation resourceType="snippet" resourceId={snippetId} />
+      <Evaluation resourceType="snippets" resourceId={snippetId} />
     </SnippetLayout>
   )
 }
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index 45a5e5bc29..e57aa7e162 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -1,4 +1,5 @@
-import type { AvailableEvaluationWorkflowsResponse } from '@/types/evaluation'
+import type { EvaluationResourceType } from '@/app/components/evaluation/types'
+import type { AvailableEvaluationWorkflowsResponse, EvaluationConfig } from '@/types/evaluation'
 import {
   keepPreviousData,
   useInfiniteQuery,
@@ -28,6 +29,45 @@ const normalizeAvailableEvaluationWorkflowsParams = (params: AvailableEvaluation
   }
 }
 
+const toEvaluationTargetType = (resourceType: Exclude<EvaluationResourceType, 'datasets'>) => {
+  return resourceType === 'snippets' ? 'snippets' : 'app'
+}
+
+const getEvaluationConfigQueryOptions = (
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  if (resourceType === 'datasets') {
+    return consoleQuery.datasetEvaluation.config.queryOptions({
+      input: {
+        params: {
+          datasetId: resourceId,
+        },
+      },
+      enabled: !!resourceId,
+      refetchOnWindowFocus: false,
+    })
+  }
+
+  return consoleQuery.evaluation.config.queryOptions({
+    input: {
+      params: {
+        targetType: toEvaluationTargetType(resourceType),
+        targetId: resourceId,
+      },
+    },
+    enabled: !!resourceId,
+    refetchOnWindowFocus: false,
+  })
+}
+
+export const useEvaluationConfig = (
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  return useQuery<EvaluationConfig>(getEvaluationConfigQueryOptions(resourceType, resourceId))
+}
+
 export const useAvailableEvaluationMetrics = (enabled = true) => {
   return useQuery(consoleQuery.evaluation.availableMetrics.queryOptions({
     enabled,
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index be9a532c26..0c92d34fc2 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -1,10 +1,38 @@
 export type EvaluationTargetType = 'app' | 'snippets'
 
+export type EvaluationMetricsConfig = {
+  default_metrics?: EvaluationDefaultMetric[]
+  customized_metrics?: EvaluationCustomizedMetric | null
+}
+
+export type EvaluationConditionValue = string | number | boolean | null
+
+export type EvaluationJudgementConditionItem = {
+  id?: string
+  fieldId?: string
+  field_id?: string
+  operator?: string
+  value?: EvaluationConditionValue
+}
+
+export type EvaluationJudgementConditionGroup = {
+  id?: string
+  logicalOperator?: 'and' | 'or'
+  logical_operator?: 'and' | 'or'
+  items?: EvaluationJudgementConditionItem[]
+}
+
+export type EvaluationJudgementConditions
+  = | EvaluationJudgementConditionGroup[]
+    | {
+      groups?: EvaluationJudgementConditionGroup[]
+    }
+
 export type EvaluationConfig = {
   evaluation_model: string | null
   evaluation_model_provider: string | null
-  metrics_config: Record<string, unknown> | null
-  judgement_conditions: Record<string, unknown> | null
+  metrics_config: EvaluationMetricsConfig | null
+  judgement_conditions: EvaluationJudgementConditions | null
 }
 
 export type NodeInfo = {
@@ -20,8 +48,8 @@ export type EvaluationDefaultMetric = {
 
 export type EvaluationCustomizedMetric = {
   evaluation_workflow_id?: string
-  input_fields?: Record<string, unknown>
-  output_fields?: Record<string, unknown>[]
+  input_fields?: Record<string, string | null | undefined>
+  output_fields?: Array<Record<string, string | null | undefined>>
 }
 
 export type EvaluationConfigData = {
@@ -29,7 +57,7 @@ export type EvaluationConfigData = {
   evaluation_model_provider?: string
   default_metrics?: EvaluationDefaultMetric[]
   customized_metrics?: EvaluationCustomizedMetric | null
-  judgment_config?: Record<string, unknown> | null
+  judgment_config?: EvaluationJudgementConditions | null
 }
 
 export type EvaluationRunRequest = EvaluationConfigData & {

From ccc8a5f278b3a27358a536f900ce3fa630d4f9b8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 14:56:22 +0800
Subject: [PATCH 064/108] refactor(web): dataset evaluation

---
 .../components/layout/pipeline-evaluation.tsx | 181 +-----------------
 .../pipeline/pipeline-history-table.tsx       | 117 +++++++++++
 .../pipeline/pipeline-metric-item.tsx         |  58 ++++++
 .../pipeline/pipeline-results-panel.tsx       |  18 ++
 4 files changed, 198 insertions(+), 176 deletions(-)
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx

diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 73ba754f28..c605c53e17 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -1,190 +1,19 @@
 'use client'
 
-import type { EvaluationResourceProps, MetricOption } from '../../types'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import type { EvaluationResourceProps } from '../../types'
+import { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
-import Checkbox from '@/app/components/base/checkbox'
-import Input from '@/app/components/base/input'
 import { toast } from '@/app/components/base/ui/toast'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useDocLink } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import JudgeModelSelector from '../judge-model-selector'
+import PipelineHistoryTable from '../pipeline/pipeline-history-table'
+import PipelineMetricItem from '../pipeline/pipeline-metric-item'
+import PipelineResultsPanel from '../pipeline/pipeline-results-panel'
 import SectionHeader, { InlineSectionHeader } from '../section-header'
 
-type PipelineMetricItemProps = {
-  metric: MetricOption
-  selected: boolean
-  onToggle: () => void
-  disabledCondition: boolean
-}
-
-const PipelineMetricItem = ({
-  metric,
-  selected,
-  onToggle,
-  disabledCondition,
-}: PipelineMetricItemProps) => {
-  return (
-    <div className="flex items-center justify-between gap-3 px-1 py-1">
-      <button
-        type="button"
-        className="flex min-w-0 items-center gap-2 text-left"
-        onClick={onToggle}
-      >
-        <Checkbox checked={selected} />
-        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
-        <Tooltip>
-          <TooltipTrigger
-            render={(
-              <span className="flex h-4 w-4 items-center justify-center text-text-quaternary">
-                <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
-              </span>
-            )}
-          />
-          <TooltipContent>
-            {metric.description}
-          </TooltipContent>
-        </Tooltip>
-      </button>
-
-      <button
-        type="button"
-        disabled={disabledCondition}
-        className={cn(
-          'system-xs-medium text-text-tertiary',
-          disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
-        )}
-      >
-        + Condition
-      </button>
-    </div>
-  )
-}
-
-const PipelineHistoryTable = ({
-  resourceType,
-  resourceId,
-}: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const [query, setQuery] = useState('')
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
-
-  const filteredRecords = useMemo(() => {
-    const keyword = query.trim().toLowerCase()
-    if (!keyword)
-      return resource.batchRecords
-
-    return resource.batchRecords.filter(record =>
-      record.fileName.toLowerCase().includes(keyword)
-      || record.summary.toLowerCase().includes(keyword),
-    )
-  }, [query, resource.batchRecords])
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex items-center justify-between gap-3 px-6 pt-4 pb-2">
-        <div className="system-xl-semibold text-text-primary">{t('history.title')}</div>
-        <div className="w-[160px] shrink-0 sm:w-[200px]">
-          <Input
-            value={query}
-            showLeftIcon
-            placeholder={t('history.searchPlaceholder')}
-            onChange={event => setQuery(event.target.value)}
-          />
-        </div>
-      </div>
-
-      <div className="min-h-0 flex-1 px-4 pb-4">
-        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-effects-highlight bg-background-default">
-          <div className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] rounded-t-lg bg-background-section px-2 py-1">
-            <div className="flex items-center gap-1 px-2 system-xs-medium-uppercase text-text-tertiary">
-              <span>{t('history.columns.time')}</span>
-              <span aria-hidden="true" className="i-ri-arrow-down-line h-3 w-3" />
-            </div>
-            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</div>
-            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</div>
-            <div className="px-2 text-center system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</div>
-            <div />
-          </div>
-
-          <div className="min-h-0 flex-1 overflow-y-auto">
-            {filteredRecords.length > 0 && (
-              <div className="divide-y divide-divider-subtle">
-                {filteredRecords.map(record => (
-                  <div
-                    key={record.id}
-                    className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] items-center px-2 py-2"
-                  >
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{record.startedAt}</div>
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.creatorYou')}</div>
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.latestVersion')}</div>
-                    <div className="flex justify-center px-2">
-                      <Badge
-                        className={cn(
-                          record.status === 'failed' && 'badge-warning',
-                          record.status === 'success' && 'badge-accent',
-                        )}
-                      >
-                        {record.status === 'running'
-                          ? (
-                              <span className="flex items-center gap-1">
-                                <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
-                                {statusLabels.running}
-                              </span>
-                            )
-                          : statusLabels[record.status]}
-                      </Badge>
-                    </div>
-                    <div className="flex justify-center">
-                      <button
-                        type="button"
-                        className="flex h-6 w-6 items-center justify-center rounded-md text-text-quaternary hover:bg-state-base-hover"
-                        aria-label={record.summary}
-                      >
-                        <span aria-hidden="true" className="i-ri-more-2-line h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {filteredRecords.length === 0 && (
-              <div className="flex h-full min-h-[321px] flex-col items-center justify-center gap-2 px-4 text-center">
-                <span aria-hidden="true" className="i-ri-history-line h-5 w-5 text-text-quaternary" />
-                <div className="system-sm-medium text-text-quaternary">{t('history.empty')}</div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const PipelineResultsPanel = () => {
-  const { t } = useTranslation('evaluation')
-
-  return (
-    <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
-      <div className="flex flex-col items-center gap-4 px-4 text-center">
-        <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
-        <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
-      </div>
-    </div>
-  )
-}
-
 const PipelineEvaluation = ({
   resourceType,
   resourceId,
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx
new file mode 100644
index 0000000000..51769d5d75
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import Input from '@/app/components/base/input'
+import { cn } from '@/utils/classnames'
+import { useEvaluationResource } from '../../store'
+
+const PipelineHistoryTable = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const [query, setQuery] = useState('')
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+
+  const filteredRecords = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+    if (!keyword)
+      return resource.batchRecords
+
+    return resource.batchRecords.filter(record =>
+      record.fileName.toLowerCase().includes(keyword)
+      || record.summary.toLowerCase().includes(keyword),
+    )
+  }, [query, resource.batchRecords])
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center justify-between gap-3 px-6 pt-4 pb-2">
+        <div className="system-xl-semibold text-text-primary">{t('history.title')}</div>
+        <div className="w-[160px] shrink-0 sm:w-[200px]">
+          <Input
+            value={query}
+            showLeftIcon
+            placeholder={t('history.searchPlaceholder')}
+            onChange={event => setQuery(event.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 px-4 pb-4">
+        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-effects-highlight bg-background-default">
+          <div className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] rounded-t-lg bg-background-section px-2 py-1">
+            <div className="flex items-center gap-1 px-2 system-xs-medium-uppercase text-text-tertiary">
+              <span>{t('history.columns.time')}</span>
+              <span aria-hidden="true" className="i-ri-arrow-down-line h-3 w-3" />
+            </div>
+            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</div>
+            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</div>
+            <div className="px-2 text-center system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</div>
+            <div />
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {filteredRecords.length > 0 && (
+              <div className="divide-y divide-divider-subtle">
+                {filteredRecords.map(record => (
+                  <div
+                    key={record.id}
+                    className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] items-center px-2 py-2"
+                  >
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{record.startedAt}</div>
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.creatorYou')}</div>
+                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.latestVersion')}</div>
+                    <div className="flex justify-center px-2">
+                      <Badge
+                        className={cn(
+                          record.status === 'failed' && 'badge-warning',
+                          record.status === 'success' && 'badge-accent',
+                        )}
+                      >
+                        {record.status === 'running'
+                          ? (
+                              <span className="flex items-center gap-1">
+                                <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
+                                {statusLabels.running}
+                              </span>
+                            )
+                          : statusLabels[record.status]}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-center">
+                      <button
+                        type="button"
+                        className="flex h-6 w-6 items-center justify-center rounded-md text-text-quaternary hover:bg-state-base-hover"
+                        aria-label={record.summary}
+                      >
+                        <span aria-hidden="true" className="i-ri-more-2-line h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {filteredRecords.length === 0 && (
+              <div className="flex h-full min-h-[321px] flex-col items-center justify-center gap-2 px-4 text-center">
+                <span aria-hidden="true" className="i-ri-history-line h-5 w-5 text-text-quaternary" />
+                <div className="system-sm-medium text-text-quaternary">{t('history.empty')}</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PipelineHistoryTable
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
new file mode 100644
index 0000000000..14c4a3c726
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import type { MetricOption } from '../../types'
+import Checkbox from '@/app/components/base/checkbox'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { cn } from '@/utils/classnames'
+
+type PipelineMetricItemProps = {
+  metric: MetricOption
+  selected: boolean
+  onToggle: () => void
+  disabledCondition: boolean
+}
+
+const PipelineMetricItem = ({
+  metric,
+  selected,
+  onToggle,
+  disabledCondition,
+}: PipelineMetricItemProps) => {
+  return (
+    <div className="flex items-center justify-between gap-3 px-1 py-1">
+      <button
+        type="button"
+        className="flex min-w-0 items-center gap-2 text-left"
+        onClick={onToggle}
+      >
+        <Checkbox checked={selected} />
+        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <span className="flex h-4 w-4 items-center justify-center text-text-quaternary">
+                <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
+              </span>
+            )}
+          />
+          <TooltipContent>
+            {metric.description}
+          </TooltipContent>
+        </Tooltip>
+      </button>
+
+      <button
+        type="button"
+        disabled={disabledCondition}
+        className={cn(
+          'system-xs-medium text-text-tertiary',
+          disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+        )}
+      >
+        + Condition
+      </button>
+    </div>
+  )
+}
+
+export default PipelineMetricItem
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
new file mode 100644
index 0000000000..3e7286adbf
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+const PipelineResultsPanel = () => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
+      <div className="flex flex-col items-center gap-4 px-4 text-center">
+        <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
+        <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
+      </div>
+    </div>
+  )
+}
+
+export default PipelineResultsPanel

From e52dbd49beae877e98d47ae2dbb76107c5617be3 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 15:34:59 +0800
Subject: [PATCH 065/108] feat(web): dataset evaluation configure

---
 .../evaluation/__tests__/index.spec.tsx       | 24 ++++++++-
 .../evaluation/__tests__/store.spec.ts        |  1 +
 .../components/layout/pipeline-evaluation.tsx | 33 ++++++++----
 .../pipeline/pipeline-metric-item.tsx         | 51 +++++++++++++++----
 web/app/components/evaluation/store-utils.ts  |  9 +++-
 web/app/components/evaluation/store.ts        | 12 +++++
 web/app/components/evaluation/types.ts        |  1 +
 web/i18n/en-US/evaluation.json                |  1 +
 8 files changed, 111 insertions(+), 21 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 302df31c9d..e2da9b196f 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -54,7 +54,7 @@ describe('Evaluation', () => {
 
     mockUseAvailableEvaluationMetrics.mockReturnValue({
       data: {
-        metrics: ['answer-correctness', 'faithfulness'],
+        metrics: ['answer-correctness', 'faithfulness', 'context-precision', 'context-recall', 'context-relevance'],
       },
       isLoading: false,
     })
@@ -240,12 +240,34 @@ describe('Evaluation', () => {
     expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeDisabled()
   })
 
+  it('should render selected pipeline metrics from config with the default threshold input', () => {
+    mockUseEvaluationConfig.mockReturnValue({
+      data: {
+        evaluation_model: null,
+        evaluation_model_provider: null,
+        metrics_config: {
+          default_metrics: [{
+            metric: 'context-precision',
+          }],
+          customized_metrics: null,
+        },
+        judgement_conditions: null,
+      },
+    })
+
+    render(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
+
+    expect(screen.getByText('Context Precision')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('0.85')).toBeInTheDocument()
+  })
+
   it('should enable pipeline batch actions after selecting a judge model and metric', () => {
     render(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
     fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
 
+    expect(screen.getByDisplayValue('0.85')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'evaluation.batch.downloadTemplate' })).toBeEnabled()
     expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeEnabled()
   })
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 9415e8430a..3814b15219 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -181,6 +181,7 @@ describe('evaluation store', () => {
     expect(hydratedState.judgeModelId).toBe('openai::gpt-4o-mini')
     expect(hydratedState.metrics).toHaveLength(2)
     expect(hydratedState.metrics[0].optionId).toBe('faithfulness')
+    expect(hydratedState.metrics[0].threshold).toBe(0.85)
     expect(hydratedState.metrics[0].nodeInfoList).toEqual([
       { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
     ])
diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index c605c53e17..32254e1e6d 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useDocLink } from '@/context/i18n'
+import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import JudgeModelSelector from '../judge-model-selector'
@@ -24,8 +25,10 @@ const PipelineEvaluation = ({
   const ensureResource = useEvaluationStore(state => state.ensureResource)
   const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
   const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const updateMetricThreshold = useEvaluationStore(state => state.updateMetricThreshold)
   const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
   const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const { data: availableMetricsData } = useAvailableEvaluationMetrics()
   const resource = useEvaluationResource(resourceType, resourceId)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const config = getEvaluationMockConfig(resourceType)
@@ -34,6 +37,12 @@ const PipelineEvaluation = ({
       .filter(metric => metric.kind === 'builtin')
       .map(metric => [metric.optionId, metric]),
   ), [resource.metrics])
+  const availableMetricIds = useMemo(() => new Set(availableMetricsData?.metrics ?? []), [availableMetricsData?.metrics])
+  const availableBuiltinMetrics = useMemo(() => {
+    return config.builtinMetrics.filter(metric =>
+      availableMetricIds.has(metric.id) || builtinMetricMap.has(metric.id),
+    )
+  }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
   const isConfigReady = !!resource.judgeModelId && builtinMetricMap.size > 0
   const isRunnable = isEvaluationRunnable(resource)
 
@@ -107,15 +116,21 @@ const PipelineEvaluation = ({
             <section>
               <InlineSectionHeader title={t('metrics.title')} tooltip={t('metrics.description')} />
               <div className="mt-1 space-y-0.5">
-                {config.builtinMetrics.map(metric => (
-                  <PipelineMetricItem
-                    key={metric.id}
-                    metric={metric}
-                    selected={builtinMetricMap.has(metric.id)}
-                    disabledCondition
-                    onToggle={() => handleToggleMetric(metric.id)}
-                  />
-                ))}
+                {availableBuiltinMetrics.map((metric) => {
+                  const selectedMetric = builtinMetricMap.get(metric.id)
+
+                  return (
+                    <PipelineMetricItem
+                      key={metric.id}
+                      metric={metric}
+                      selected={!!selectedMetric}
+                      threshold={selectedMetric?.threshold}
+                      disabledCondition
+                      onToggle={() => handleToggleMetric(metric.id)}
+                      onThresholdChange={value => updateMetricThreshold(resourceType, resourceId, selectedMetric?.id ?? '', value)}
+                    />
+                  )
+                })}
               </div>
             </section>
 
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
index 14c4a3c726..e535da2204 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -1,15 +1,20 @@
 'use client'
 
 import type { MetricOption } from '../../types'
+import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
+import Input from '@/app/components/base/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { cn } from '@/utils/classnames'
+import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
 
 type PipelineMetricItemProps = {
   metric: MetricOption
   selected: boolean
   onToggle: () => void
   disabledCondition: boolean
+  threshold?: number
+  onThresholdChange: (value: number) => void
 }
 
 const PipelineMetricItem = ({
@@ -17,7 +22,11 @@ const PipelineMetricItem = ({
   selected,
   onToggle,
   disabledCondition,
+  threshold = DEFAULT_PIPELINE_METRIC_THRESHOLD,
+  onThresholdChange,
 }: PipelineMetricItemProps) => {
+  const { t } = useTranslation('evaluation')
+
   return (
     <div className="flex items-center justify-between gap-3 px-1 py-1">
       <button
@@ -41,16 +50,38 @@ const PipelineMetricItem = ({
         </Tooltip>
       </button>
 
-      <button
-        type="button"
-        disabled={disabledCondition}
-        className={cn(
-          'system-xs-medium text-text-tertiary',
-          disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
-        )}
-      >
-        + Condition
-      </button>
+      {selected
+        ? (
+            <div className="flex items-center gap-2">
+              <span className="system-xs-medium text-text-accent">{t('pipeline.passIf')}</span>
+              <div className="w-[52px]">
+                <Input
+                  value={String(threshold)}
+                  type="number"
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  onChange={(event) => {
+                    const parsedValue = Number(event.target.value)
+                    if (!Number.isNaN(parsedValue))
+                      onThresholdChange(parsedValue)
+                  }}
+                />
+              </div>
+            </div>
+          )
+        : (
+            <button
+              type="button"
+              disabled={disabledCondition}
+              className={cn(
+                'system-xs-medium text-text-tertiary',
+                disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+              )}
+            >
+              + Condition
+            </button>
+          )}
     </div>
   )
 }
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index c1acc1300c..b1c6baa4de 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -24,6 +24,8 @@ import { encodeModelSelection } from './utils'
 
 type EvaluationStoreResources = Record<string, EvaluationResourceState>
 
+export const DEFAULT_PIPELINE_METRIC_THRESHOLD = 0.85
+
 const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
 
 const humanizeMetricId = (metricId: string) => {
@@ -213,7 +215,11 @@ export function getConditionValue(
   return typeof previousValue === 'string' ? previousValue : null
 }
 
-export function createBuiltinMetric(metric: MetricOption, nodeInfoList: NodeInfo[] = []): EvaluationMetric {
+export function createBuiltinMetric(
+  metric: MetricOption,
+  nodeInfoList: NodeInfo[] = [],
+  threshold = DEFAULT_PIPELINE_METRIC_THRESHOLD,
+): EvaluationMetric {
   return {
     id: createId('metric'),
     optionId: metric.id,
@@ -221,6 +227,7 @@ export function createBuiltinMetric(metric: MetricOption, nodeInfoList: NodeInfo
     label: metric.label,
     description: metric.description,
     badges: metric.badges,
+    threshold,
     nodeInfoList,
   }
 }
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 61e1f773bb..5774dd5934 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -32,6 +32,7 @@ type EvaluationStore = {
   hydrateResource: (resourceType: EvaluationResourceType, resourceId: string, config: EvaluationConfig) => void
   setJudgeModel: (resourceType: EvaluationResourceType, resourceId: string, judgeModelId: string) => void
   addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string, nodeInfoList?: NodeInfo[]) => void
+  updateMetricThreshold: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, threshold: number) => void
   addCustomMetric: (resourceType: EvaluationResourceType, resourceId: string) => void
   removeMetric: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
   setCustomMetricWorkflow: (
@@ -126,6 +127,17 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       }
     })
   },
+  updateMetricThreshold: (resourceType, resourceId, metricId, threshold) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          threshold,
+        })),
+      })),
+    }))
+  },
   addCustomMetric: (resourceType, resourceId) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 936c47365e..411c28d540 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -82,6 +82,7 @@ export type EvaluationMetric = {
   label: string
   description: string
   badges: string[]
+  threshold?: number
   nodeInfoList?: NodeInfo[]
   customConfig?: CustomMetricConfig
 }
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 41dff238e3..0ba7fe44cd 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -92,6 +92,7 @@
   "metrics.showMore": "Show more",
   "metrics.title": "Metrics",
   "metrics.update": "Update",
+  "pipeline.passIf": "Pass if \u2265",
   "pipeline.uploadAndRun": "Upload & Run Test",
   "results.empty": "No evaluation results yet.",
   "title": "Evaluation"

From d1a80a85c00a2c891ad93599b3c7accac1ed70c6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 17:17:15 +0800
Subject: [PATCH 066/108] refactor(web): evaluation configure schema update

---
 .../evaluation/__tests__/index.spec.tsx       | 10 ++++-----
 .../evaluation/__tests__/store.spec.ts        | 22 +++++++++----------
 .../components/metric-selector/utils.ts       |  2 +-
 web/app/components/evaluation/store-utils.ts  |  8 +++----
 web/service/use-evaluation.ts                 | 18 +--------------
 web/types/evaluation.ts                       | 18 +++++++--------
 6 files changed, 28 insertions(+), 50 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index e2da9b196f..0e7e6b8c91 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -245,12 +245,10 @@ describe('Evaluation', () => {
       data: {
         evaluation_model: null,
         evaluation_model_provider: null,
-        metrics_config: {
-          default_metrics: [{
-            metric: 'context-precision',
-          }],
-          customized_metrics: null,
-        },
+        default_metrics: [{
+          metric: 'context-precision',
+        }],
+        customized_metrics: null,
         judgement_conditions: null,
       },
     })
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 3814b15219..843a0107e8 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -132,18 +132,16 @@ describe('evaluation store', () => {
     const config: EvaluationConfig = {
       evaluation_model: 'gpt-4o-mini',
       evaluation_model_provider: 'openai',
-      metrics_config: {
-        default_metrics: [{
-          metric: 'faithfulness',
-          node_info_list: [
-            { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
-          ],
-        }],
-        customized_metrics: {
-          evaluation_workflow_id: 'workflow-precision-review',
-          input_fields: {
-            'app.input.query': 'query',
-          },
+      default_metrics: [{
+        metric: 'faithfulness',
+        node_info_list: [
+          { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
+        ],
+      }],
+      customized_metrics: {
+        evaluation_workflow_id: 'workflow-precision-review',
+        input_fields: {
+          'app.input.query': 'query',
         },
       },
       judgement_conditions: [{
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index a88e5069d7..818c4b61da 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -3,7 +3,7 @@ import type { MetricVisualTone } from './types'
 import type { EvaluationTargetType, NodeInfo } from '@/types/evaluation'
 
 export const toEvaluationTargetType = (resourceType: 'apps' | 'snippets'): EvaluationTargetType => {
-  return resourceType === 'snippets' ? 'snippets' : 'app'
+  return resourceType === 'snippets' ? 'snippets' : 'apps'
 }
 
 const humanizeMetricId = (metricId: string) => {
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index b1c6baa4de..ee81a8b06b 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -16,7 +16,6 @@ import type {
   EvaluationDefaultMetric,
   EvaluationJudgementConditionGroup,
   EvaluationJudgementConditionItem,
-  EvaluationMetricsConfig,
   NodeInfo,
 } from '@/types/evaluation'
 import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
@@ -71,7 +70,7 @@ const normalizeNodeInfoList = (value: NodeInfo[] | undefined): NodeInfo[] => {
 
 const normalizeDefaultMetrics = (
   resourceType: EvaluationResourceType,
-  value: EvaluationDefaultMetric[] | undefined,
+  value: EvaluationDefaultMetric[] | null | undefined,
 ): EvaluationMetric[] => {
   if (!value?.length)
     return []
@@ -292,9 +291,8 @@ export const buildStateFromEvaluationConfig = (
   resourceType: EvaluationResourceType,
   config: EvaluationConfig,
 ): EvaluationResourceState => {
-  const metricsConfig: EvaluationMetricsConfig = config.metrics_config ?? {}
-  const defaultMetrics = normalizeDefaultMetrics(resourceType, metricsConfig.default_metrics)
-  const customMetrics = normalizeCustomMetric(metricsConfig.customized_metrics)
+  const defaultMetrics = normalizeDefaultMetrics(resourceType, config.default_metrics)
+  const customMetrics = normalizeCustomMetric(config.customized_metrics)
 
   return {
     ...buildInitialState(resourceType),
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index e57aa7e162..5b68588f63 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -29,30 +29,14 @@ const normalizeAvailableEvaluationWorkflowsParams = (params: AvailableEvaluation
   }
 }
 
-const toEvaluationTargetType = (resourceType: Exclude<EvaluationResourceType, 'datasets'>) => {
-  return resourceType === 'snippets' ? 'snippets' : 'app'
-}
-
 const getEvaluationConfigQueryOptions = (
   resourceType: EvaluationResourceType,
   resourceId: string,
 ) => {
-  if (resourceType === 'datasets') {
-    return consoleQuery.datasetEvaluation.config.queryOptions({
-      input: {
-        params: {
-          datasetId: resourceId,
-        },
-      },
-      enabled: !!resourceId,
-      refetchOnWindowFocus: false,
-    })
-  }
-
   return consoleQuery.evaluation.config.queryOptions({
     input: {
       params: {
-        targetType: toEvaluationTargetType(resourceType),
+        targetType: resourceType,
         targetId: resourceId,
       },
     },
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index 0c92d34fc2..ba329ae072 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -1,9 +1,4 @@
-export type EvaluationTargetType = 'app' | 'snippets'
-
-export type EvaluationMetricsConfig = {
-  default_metrics?: EvaluationDefaultMetric[]
-  customized_metrics?: EvaluationCustomizedMetric | null
-}
+export type EvaluationTargetType = 'apps' | 'snippets' | 'datasets'
 
 export type EvaluationConditionValue = string | number | boolean | null
 
@@ -31,7 +26,8 @@ export type EvaluationJudgementConditions
 export type EvaluationConfig = {
   evaluation_model: string | null
   evaluation_model_provider: string | null
-  metrics_config: EvaluationMetricsConfig | null
+  default_metrics?: EvaluationDefaultMetric[] | null
+  customized_metrics?: EvaluationCustomizedMetric | null
   judgement_conditions: EvaluationJudgementConditions | null
 }
 
@@ -43,19 +39,23 @@ export type NodeInfo = {
 
 export type EvaluationDefaultMetric = {
   metric?: string
+  value_type?: string
   node_info_list?: NodeInfo[]
 }
 
 export type EvaluationCustomizedMetric = {
   evaluation_workflow_id?: string
   input_fields?: Record<string, string | null | undefined>
-  output_fields?: Array<Record<string, string | null | undefined>>
+  output_fields?: Array<{
+    variable?: string
+    value_type?: string
+  }>
 }
 
 export type EvaluationConfigData = {
   evaluation_model?: string
   evaluation_model_provider?: string
-  default_metrics?: EvaluationDefaultMetric[]
+  default_metrics?: EvaluationDefaultMetric[] | null
   customized_metrics?: EvaluationCustomizedMetric | null
   judgment_config?: EvaluationJudgementConditions | null
 }

From 5069694bbab3257d7215dc627eba713a8da705d7 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 17:30:10 +0800
Subject: [PATCH 067/108] refactor(web): remove unused metric property

---
 .../use-metric-selector-data.ts                |  3 +--
 .../components/metric-selector/utils.ts        |  4 +---
 web/app/components/evaluation/mock.ts          | 18 ------------------
 web/app/components/evaluation/store-utils.ts   |  4 ----
 web/app/components/evaluation/types.ts         |  3 ---
 5 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
index 46f8e9e740..d2ad11bc12 100644
--- a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
+++ b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
@@ -54,9 +54,8 @@ export const useMetricSelectorData = ({
 
   const resolvedMetrics = useMemo(() => {
     const metricsMap = new Map(config.builtinMetrics.map(metric => [metric.id, metric] as const))
-    const defaultGroup = config.builtinMetrics[0]?.group ?? 'other'
 
-    return availableMetricIds.map(metricId => metricsMap.get(metricId) ?? buildMetricOption(metricId, defaultGroup))
+    return availableMetricIds.map(metricId => metricsMap.get(metricId) ?? buildMetricOption(metricId))
   }, [availableMetricIds, config.builtinMetrics])
 
   useEffect(() => {
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index 818c4b61da..5ab3f03129 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -14,12 +14,10 @@ const humanizeMetricId = (metricId: string) => {
     .join(' ')
 }
 
-export const buildMetricOption = (metricId: string, fallbackGroup: string): MetricOption => ({
+export const buildMetricOption = (metricId: string): MetricOption => ({
   id: metricId,
   label: humanizeMetricId(metricId),
   description: '',
-  group: fallbackGroup,
-  badges: ['Built-in'],
 })
 
 export const getMetricVisual = (metricId: string): { icon: string, tone: MetricVisualTone } => {
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
index 317f839b82..362a39d41c 100644
--- a/web/app/components/evaluation/mock.ts
+++ b/web/app/components/evaluation/mock.ts
@@ -29,43 +29,31 @@ const builtinMetrics: MetricOption[] = [
     id: 'answer-correctness',
     label: 'Answer Correctness',
     description: 'Compares the response with the expected answer and scores factual alignment.',
-    group: 'quality',
-    badges: ['LLM', 'Built-in'],
   },
   {
     id: 'faithfulness',
     label: 'Faithfulness',
     description: 'Checks whether the answer stays grounded in the retrieved evidence.',
-    group: 'quality',
-    badges: ['LLM', 'Retrieval'],
   },
   {
     id: 'relevance',
     label: 'Relevance',
     description: 'Evaluates how directly the answer addresses the original request.',
-    group: 'quality',
-    badges: ['LLM'],
   },
   {
     id: 'latency',
     label: 'Latency',
     description: 'Captures runtime responsiveness for the full execution path.',
-    group: 'operations',
-    badges: ['System'],
   },
   {
     id: 'token-usage',
     label: 'Token Usage',
     description: 'Tracks prompt and completion token consumption for the run.',
-    group: 'operations',
-    badges: ['System'],
   },
   {
     id: 'tool-success-rate',
     label: 'Tool Success Rate',
     description: 'Measures whether each required tool invocation finishes without failure.',
-    group: 'operations',
-    badges: ['Workflow'],
   },
 ]
 
@@ -74,22 +62,16 @@ const pipelineBuiltinMetrics: MetricOption[] = [
     id: 'context-precision',
     label: 'Context Precision',
     description: 'Measures whether retrieved chunks stay tightly aligned to the request.',
-    group: 'quality',
-    badges: ['Retrieval'],
   },
   {
     id: 'context-recall',
     label: 'Context Recall',
     description: 'Checks whether the retrieval result includes the evidence needed to answer.',
-    group: 'quality',
-    badges: ['Retrieval'],
   },
   {
     id: 'context-relevance',
     label: 'Context Relevance',
     description: 'Scores how useful the retrieved context is for downstream generation.',
-    group: 'quality',
-    badges: ['Retrieval'],
   },
 ]
 
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index ee81a8b06b..be592b4df2 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -41,8 +41,6 @@ const resolveMetricOption = (resourceType: EvaluationResourceType, metricId: str
     id: metricId,
     label: humanizeMetricId(metricId),
     description: '',
-    group: config.builtinMetrics[0]?.group ?? 'other',
-    badges: ['Built-in'],
   }
 }
 
@@ -225,7 +223,6 @@ export function createBuiltinMetric(
     kind: 'builtin',
     label: metric.label,
     description: metric.description,
-    badges: metric.badges,
     threshold,
     nodeInfoList,
   }
@@ -246,7 +243,6 @@ export function createCustomMetric(): EvaluationMetric {
     kind: 'custom-workflow',
     label: 'Custom Evaluator',
     description: 'Map workflow variables to your evaluation inputs.',
-    badges: ['Workflow'],
     customConfig: {
       workflowId: null,
       workflowAppId: null,
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 411c28d540..c8486f7923 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -37,8 +37,6 @@ export type MetricOption = {
   id: string
   label: string
   description: string
-  group: string
-  badges: string[]
 }
 
 export type EvaluationWorkflowOption = {
@@ -81,7 +79,6 @@ export type EvaluationMetric = {
   kind: MetricKind
   label: string
   description: string
-  badges: string[]
   threshold?: number
   nodeInfoList?: NodeInfo[]
   customConfig?: CustomMetricConfig

From c29245c1cb41f1e443db417800ae02d4fd0977e6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 17:43:34 +0800
Subject: [PATCH 068/108] feat(web): only one evaluation workflow can be added

---
 .../evaluation/__tests__/store.spec.ts         | 18 ++++++++++++++++++
 .../metric-section/__tests__/index.spec.tsx    | 15 +++++++++++++++
 .../components/metric-selector/index.tsx       |  7 +++++--
 .../metric-selector/selector-footer.tsx        |  5 ++++-
 web/app/components/evaluation/store.ts         |  4 +++-
 web/i18n/en-US/evaluation.json                 |  1 +
 6 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 843a0107e8..18bd31a24c 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -41,6 +41,24 @@ describe('evaluation store', () => {
     expect(configuredMetric!.customConfig!.workflowName).toBe(config.workflowOptions[0].label)
   })
 
+  it('should only add one custom metric', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-custom-limit'
+    const store = useEvaluationStore.getState()
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    expect(
+      useEvaluationStore
+        .getState()
+        .resources['apps:app-custom-limit']
+        .metrics
+        .filter(metric => metric.kind === 'custom-workflow'),
+    ).toHaveLength(1)
+  })
+
   it('should add and remove builtin metrics', () => {
     const resourceType = 'apps'
     const resourceId = 'app-2'
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index 03343d2a1c..0b76e4387b 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -210,5 +210,20 @@ describe('MetricSection', () => {
       expect(screen.getByText('evaluation.metrics.custom.workflowPlaceholder')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: 'evaluation.metrics.custom.addMapping' })).toBeInTheDocument()
     })
+
+    it('should disable adding another custom metric when one already exists', () => {
+      // Arrange
+      act(() => {
+        useEvaluationStore.getState().addCustomMetric(resourceType, resourceId)
+      })
+
+      // Act
+      renderMetricSection()
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+      // Assert
+      expect(screen.getByRole('button', { name: /evaluation.metrics.custom.footerTitle/i })).toBeDisabled()
+      expect(screen.getByText('evaluation.metrics.custom.limitDescription')).toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
index a01256bb8d..4870952b9b 100644
--- a/web/app/components/evaluation/components/metric-selector/index.tsx
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -12,7 +12,7 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { cn } from '@/utils/classnames'
-import { useEvaluationStore } from '../../store'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
 import SelectorEmptyState from './selector-empty-state'
 import SelectorFooter from './selector-footer'
 import SelectorMetricSection from './selector-metric-section'
@@ -26,12 +26,14 @@ const MetricSelector = ({
   triggerStyle = 'button',
 }: MetricSelectorProps) => {
   const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
   const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [nodeInfoMap, setNodeInfoMap] = useState<Record<string, Array<{ node_id: string, title: string, type: string }>>>({})
   const [collapsedMetricMap, setCollapsedMetricMap] = useState<Record<string, boolean>>({})
   const [expandedMetricNodesMap, setExpandedMetricNodesMap] = useState<Record<string, boolean>>({})
+  const hasCustomMetric = resource.metrics.some(metric => metric.kind === 'custom-workflow')
 
   const {
     builtinMetricMap,
@@ -134,7 +136,8 @@ const MetricSelector = ({
 
           <SelectorFooter
             title={t('metrics.custom.footerTitle')}
-            description={t('metrics.custom.footerDescription')}
+            description={hasCustomMetric ? t('metrics.custom.limitDescription') : t('metrics.custom.footerDescription')}
+            disabled={hasCustomMetric}
             onClick={() => {
               addCustomMetric(resourceType, resourceId)
               setOpen(false)
diff --git a/web/app/components/evaluation/components/metric-selector/selector-footer.tsx b/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
index 3b8d04474a..74163c275d 100644
--- a/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
+++ b/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
@@ -1,18 +1,21 @@
 type SelectorFooterProps = {
   title: string
   description: string
+  disabled?: boolean
   onClick: () => void
 }
 
 const SelectorFooter = ({
   title,
   description,
+  disabled = false,
   onClick,
 }: SelectorFooterProps) => {
   return (
     <button
       type="button"
-      className="relative flex items-center gap-3 overflow-hidden border-t border-divider-subtle bg-background-default-subtle px-4 py-5 text-left hover:bg-state-base-hover-alt"
+      disabled={disabled}
+      className="relative flex items-center gap-3 overflow-hidden border-t border-divider-subtle bg-background-default-subtle px-4 py-5 text-left enabled:hover:bg-state-base-hover-alt disabled:cursor-not-allowed disabled:opacity-60"
       onClick={onClick}
     >
       <div className="absolute -left-6 -top-6 h-28 w-28 rounded-full bg-util-colors-indigo-indigo-100 opacity-50 blur-2xl" />
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 5774dd5934..8890694ca4 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -142,7 +142,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        metrics: [...resource.metrics, createCustomMetric()],
+        metrics: resource.metrics.some(metric => metric.kind === 'custom-workflow')
+          ? resource.metrics
+          : [...resource.metrics, createCustomMetric()],
       })),
     }))
   },
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 0ba7fe44cd..21939d9d15 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -67,6 +67,7 @@
   "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
   "metrics.custom.footerDescription": "Connect your published evaluation workflows",
   "metrics.custom.footerTitle": "Custom metrics",
+  "metrics.custom.limitDescription": "Only one custom metric can be added.",
   "metrics.custom.mappingTitle": "Variable Mapping",
   "metrics.custom.mappingWarning": "Complete the workflow selection and each variable mapping to enable batch tests.",
   "metrics.custom.sourcePlaceholder": "Source variable",

From 2a1761ac066d01902b9e85732b04a9ec48b55f77 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 18:16:30 +0800
Subject: [PATCH 069/108] feat(web): add output

---
 .../__tests__/index.spec.tsx                  | 171 ++++++++++++++++++
 .../components/custom-metric-editor/index.tsx |  49 ++++-
 .../metric-section/custom-metric-card.tsx     |   6 +-
 web/i18n/en-US/evaluation.json                |   1 +
 4 files changed, 220 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx

diff --git a/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..21063a0391
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
@@ -0,0 +1,171 @@
+import type { EvaluationMetric } from '../../../types'
+import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { Node } from '@/app/components/workflow/types'
+import type { FetchWorkflowDraftResponse } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import CustomMetricEditorCard from '..'
+import { useEvaluationStore } from '../../../store'
+
+const mockUseAppWorkflow = vi.hoisted(() => vi.fn())
+const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
+const mockUseInfiniteScroll = vi.hoisted(() => vi.fn())
+
+vi.mock('@/service/use-workflow', () => ({
+  useAppWorkflow: (...args: unknown[]) => mockUseAppWorkflow(...args),
+}))
+
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
+}))
+
+vi.mock('ahooks', () => ({
+  useInfiniteScroll: (...args: unknown[]) => mockUseInfiniteScroll(...args),
+}))
+
+const createStartNode = (): Node<StartNodeType> => ({
+  id: 'start-node',
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.Start,
+    title: 'Start',
+    desc: '',
+    variables: [],
+  },
+})
+
+const createEndNode = (
+  outputs: EndNodeType['outputs'],
+): Node<EndNodeType> => ({
+  id: 'end-node',
+  type: 'custom',
+  position: { x: 100, y: 0 },
+  data: {
+    type: BlockEnum.End,
+    title: 'End',
+    desc: '',
+    outputs,
+  },
+})
+
+const createWorkflow = (
+  nodes: Node[],
+): FetchWorkflowDraftResponse => ({
+  id: 'workflow-1',
+  graph: {
+    nodes,
+    edges: [],
+  },
+  features: {},
+  created_at: 1710000000,
+  created_by: {
+    id: 'user-1',
+    name: 'User One',
+    email: 'user-one@example.com',
+  },
+  hash: 'hash-1',
+  updated_at: 1710000001,
+  updated_by: {
+    id: 'user-2',
+    name: 'User Two',
+    email: 'user-two@example.com',
+  },
+  tool_published: true,
+  environment_variables: [],
+  conversation_variables: [],
+  version: '1',
+  marked_name: 'Evaluation Workflow',
+  marked_comment: 'Published',
+})
+
+const createMetric = (): EvaluationMetric => ({
+  id: 'metric-1',
+  optionId: 'custom-1',
+  kind: 'custom-workflow',
+  label: 'Custom Evaluator',
+  description: 'Map workflow variables to your evaluation inputs.',
+  customConfig: {
+    workflowId: 'workflow-1',
+    workflowAppId: 'app-1',
+    workflowName: 'Evaluation Workflow',
+    mappings: [{
+      id: 'mapping-1',
+      sourceFieldId: null,
+      targetVariableId: null,
+    }],
+  },
+})
+
+describe('CustomMetricEditorCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useEvaluationStore.setState({ resources: {} })
+
+    mockUseInfiniteScroll.mockImplementation(() => undefined)
+    mockUseAvailableEvaluationWorkflows.mockReturnValue({
+      data: {
+        pages: [{
+          items: [],
+          page: 1,
+          limit: 20,
+          has_more: false,
+        }],
+      },
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    })
+  })
+
+  // Verify end-node outputs are shown after a workflow is selected.
+  describe('Outputs', () => {
+    it('should render the selected workflow outputs from the end node', () => {
+      mockUseAppWorkflow.mockReturnValue({
+        data: createWorkflow([
+          createStartNode(),
+          createEndNode([
+            { variable: 'answer_score', value_selector: ['end', 'answer_score'], value_type: VarType.number },
+            { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
+          ]),
+        ]),
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="apps"
+          resourceId="app-1"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(screen.getByText('evaluation.metrics.custom.outputTitle')).toBeInTheDocument()
+      expect(screen.getByText('answer_score')).toBeInTheDocument()
+      expect(screen.getByText('number')).toBeInTheDocument()
+      expect(screen.getByText('reason')).toBeInTheDocument()
+      expect(screen.getByText('string')).toBeInTheDocument()
+    })
+
+    it('should hide the output section when the selected workflow has no end outputs', () => {
+      mockUseAppWorkflow.mockReturnValue({
+        data: createWorkflow([
+          createStartNode(),
+          createEndNode([]),
+        ]),
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="apps"
+          resourceId="app-1"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(screen.queryByText('evaluation.metrics.custom.outputTitle')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/custom-metric-editor/index.tsx b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
index 04f4d9485d..7fa385a4ce 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/index.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { Node } from '@/app/components/workflow/types'
 import { useMemo } from 'react'
@@ -29,6 +30,22 @@ const getWorkflowTargetVariables = (
   }))
 }
 
+const getWorkflowOutputs = (nodes?: Array<Node>) => {
+  return (nodes ?? [])
+    .filter(node => node.data.type === BlockEnum.End)
+    .flatMap((node) => {
+      const endNode = node as Node<EndNodeType>
+      if (!Array.isArray(endNode.data.outputs))
+        return []
+
+      return endNode.data.outputs
+        .map(output => ({
+          variable: output.variable,
+          valueType: output.value_type,
+        }))
+    })
+}
+
 const getWorkflowName = (workflow: {
   marked_name?: string
   app_name?: string
@@ -51,13 +68,16 @@ const CustomMetricEditorCard = ({
   const targetOptions = useMemo(() => {
     return getWorkflowTargetVariables(selectedWorkflow?.graph.nodes)
   }, [selectedWorkflow?.graph.nodes])
+  const workflowOutputs = useMemo(() => {
+    return getWorkflowOutputs(selectedWorkflow?.graph.nodes)
+  }, [selectedWorkflow?.graph.nodes])
   const isConfigured = isCustomMetricConfigured(metric)
 
   if (!metric.customConfig)
     return null
 
   return (
-    <div className="px-3 pb-3 pt-1">
+    <div className="px-3 pt-1 pb-3">
       <WorkflowSelector
         value={metric.customConfig.workflowId}
         selectedWorkflowName={metric.customConfig.workflowName ?? (selectedWorkflow ? getWorkflowName(selectedWorkflow) : null)}
@@ -68,16 +88,37 @@ const CustomMetricEditorCard = ({
         })}
       />
 
+      {!!workflowOutputs.length && (
+        <div className="mt-4 py-1">
+          <div className="min-h-6 system-xs-medium-uppercase text-text-tertiary">
+            {t('metrics.custom.outputTitle')}
+          </div>
+          <div className="flex flex-wrap items-center gap-y-1 px-2 py-2 system-xs-regular text-text-tertiary">
+            {workflowOutputs.map((output, index) => (
+              <div key={output.variable} className="flex items-center">
+                <span className="px-1 system-xs-medium text-text-secondary">{output.variable}</span>
+                {output.valueType && (
+                  <span>{output.valueType}</span>
+                )}
+                {index < workflowOutputs.length - 1 && (
+                  <span className="pl-0.5">,</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       <div className="mt-4">
         <div className="mb-2 flex items-center justify-between gap-3">
-          <div className="text-text-secondary system-xs-medium-uppercase">{t('metrics.custom.mappingTitle')}</div>
+          <div className="system-xs-medium-uppercase text-text-secondary">{t('metrics.custom.mappingTitle')}</div>
           <Button
             size="small"
             variant="ghost"
             className="text-text-accent"
             onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}
           >
-            <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+            <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
             {t('metrics.custom.addMapping')}
           </Button>
         </div>
@@ -94,7 +135,7 @@ const CustomMetricEditorCard = ({
           ))}
         </div>
         {!isConfigured && (
-          <div className="mt-3 rounded-lg bg-background-section px-3 py-2 text-text-tertiary system-xs-regular">
+          <div className="mt-3 rounded-lg bg-background-section px-3 py-2 system-xs-regular text-text-tertiary">
             {t('metrics.custom.mappingWarning')}
           </div>
         )}
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
index 824ed8664e..bf86f0e0ba 100644
--- a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -25,12 +25,12 @@ const CustomMetricCard = ({
 
   return (
     <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
-      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
+      <div className="flex items-center justify-between gap-3 px-3 pt-3 pb-1">
         <div className="flex min-w-0 flex-1 items-center gap-2 px-1">
           <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
             <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5" />
           </div>
-          <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
+          <div className="truncate system-md-medium text-text-secondary">{metric.label}</div>
         </div>
 
         <div className="flex shrink-0 items-center gap-1">
@@ -43,7 +43,7 @@ const CustomMetricCard = ({
             size="small"
             variant="ghost"
             aria-label={t('metrics.remove')}
-            className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity hover:text-text-secondary focus-visible:opacity-100 group-hover:opacity-100"
+            className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary focus-visible:opacity-100"
             onClick={() => removeMetric(resourceType, resourceId, metric.id)}
           >
             <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 21939d9d15..c874ef7f06 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -70,6 +70,7 @@
   "metrics.custom.limitDescription": "Only one custom metric can be added.",
   "metrics.custom.mappingTitle": "Variable Mapping",
   "metrics.custom.mappingWarning": "Complete the workflow selection and each variable mapping to enable batch tests.",
+  "metrics.custom.outputTitle": "Output",
   "metrics.custom.sourcePlaceholder": "Source variable",
   "metrics.custom.targetPlaceholder": "Target variable",
   "metrics.custom.title": "Custom Evaluator",

From 4879ea5cd59e743472a1b678fc064c3d9c83f514 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 19:23:22 +0800
Subject: [PATCH 070/108] feat(web): support variable selecting in variable
 mapping

---
 .../evaluation/__tests__/store.spec.ts        |  13 +-
 .../__tests__/index.spec.tsx                  | 239 ++++++++++++++++--
 .../components/custom-metric-editor/index.tsx | 146 +++++++----
 .../custom-metric-editor/mapping-row.tsx      |  98 ++++---
 .../published-graph-variable-picker.tsx       | 118 +++++++++
 .../metric-section/__tests__/index.spec.tsx   |   2 +-
 web/app/components/evaluation/store-utils.ts  |  48 +++-
 web/app/components/evaluation/store.ts        |  34 +--
 web/app/components/evaluation/types.ts        |   4 +-
 web/i18n/en-US/evaluation.json                |   4 +-
 10 files changed, 531 insertions(+), 175 deletions(-)
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx

diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 18bd31a24c..88610c6ccb 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -30,9 +30,10 @@ describe('evaluation store', () => {
       workflowAppId: 'custom-workflow-app-id',
       workflowName: config.workflowOptions[0].label,
     })
-    store.updateCustomMetricMapping(resourceType, resourceId, initialMetric!.id, initialMetric!.customConfig!.mappings[0].id, {
-      sourceFieldId: config.fieldOptions[0].id,
-      targetVariableId: config.workflowOptions[0].targetVariables[0].id,
+    store.syncCustomMetricMappings(resourceType, resourceId, initialMetric!.id, ['query'])
+    const syncedMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
+    store.updateCustomMetricMapping(resourceType, resourceId, initialMetric!.id, syncedMetric!.customConfig!.mappings[0].id, {
+      outputVariableId: 'answer',
     })
 
     const configuredMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
@@ -159,7 +160,7 @@ describe('evaluation store', () => {
       customized_metrics: {
         evaluation_workflow_id: 'workflow-precision-review',
         input_fields: {
-          'app.input.query': 'query',
+          query: 'answer',
         },
       },
       judgement_conditions: [{
@@ -203,8 +204,8 @@ describe('evaluation store', () => {
     ])
     expect(hydratedState.metrics[1].kind).toBe('custom-workflow')
     expect(hydratedState.metrics[1].customConfig?.workflowId).toBe('workflow-precision-review')
-    expect(hydratedState.metrics[1].customConfig?.mappings[0].sourceFieldId).toBe('app.input.query')
-    expect(hydratedState.metrics[1].customConfig?.mappings[0].targetVariableId).toBe('query')
+    expect(hydratedState.metrics[1].customConfig?.mappings[0].inputVariableId).toBe('query')
+    expect(hydratedState.metrics[1].customConfig?.mappings[0].outputVariableId).toBe('answer')
     expect(hydratedState.conditions[0].logicalOperator).toBe('or')
     expect(hydratedState.conditions[0].items[0]).toMatchObject({
       fieldId: 'system.has_context',
diff --git a/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
index 21063a0391..668447592c 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
@@ -1,21 +1,30 @@
 import type { EvaluationMetric } from '../../../types'
+import type { CodeNodeType } from '@/app/components/workflow/nodes/code/types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { Node } from '@/app/components/workflow/types'
+import type { SnippetWorkflow } from '@/types/snippet'
 import type { FetchWorkflowDraftResponse } from '@/types/workflow'
 import { render, screen } from '@testing-library/react'
-import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
 import CustomMetricEditorCard from '..'
 import { useEvaluationStore } from '../../../store'
 
 const mockUseAppWorkflow = vi.hoisted(() => vi.fn())
+const mockUseSnippetPublishedWorkflow = vi.hoisted(() => vi.fn())
 const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
 const mockUseInfiniteScroll = vi.hoisted(() => vi.fn())
+const mockPublishedGraphVariablePicker = vi.hoisted(() => vi.fn())
 
 vi.mock('@/service/use-workflow', () => ({
   useAppWorkflow: (...args: unknown[]) => mockUseAppWorkflow(...args),
 }))
 
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetPublishedWorkflow: (...args: unknown[]) => mockUseSnippetPublishedWorkflow(...args),
+}))
+
 vi.mock('@/service/use-evaluation', () => ({
   useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
 }))
@@ -24,6 +33,13 @@ vi.mock('ahooks', () => ({
   useInfiniteScroll: (...args: unknown[]) => mockUseInfiniteScroll(...args),
 }))
 
+vi.mock('../published-graph-variable-picker', () => ({
+  default: (props: Record<string, unknown>) => {
+    mockPublishedGraphVariablePicker(props)
+    return <div data-testid="published-graph-variable-picker" />
+  },
+}))
+
 const createStartNode = (): Node<StartNodeType> => ({
   id: 'start-node',
   type: 'custom',
@@ -32,7 +48,20 @@ const createStartNode = (): Node<StartNodeType> => ({
     type: BlockEnum.Start,
     title: 'Start',
     desc: '',
-    variables: [],
+    variables: [
+      {
+        variable: 'user_question',
+        label: 'User Question',
+        type: InputVarType.textInput,
+        required: true,
+      },
+      {
+        variable: 'retrieved_context',
+        label: 'Retrieved Context',
+        type: InputVarType.textInput,
+        required: true,
+      },
+    ],
   },
 })
 
@@ -50,6 +79,33 @@ const createEndNode = (
   },
 })
 
+const createCodeNode = (
+  id: string,
+  title: string,
+  outputs: Record<string, { type: VarType }>,
+): Node<CodeNodeType> => ({
+  id,
+  type: 'custom',
+  position: { x: 100, y: 0 },
+  data: {
+    type: BlockEnum.Code,
+    title,
+    desc: '',
+    code: '',
+    code_language: CodeLanguage.python3,
+    outputs: Object.fromEntries(
+      Object.entries(outputs).map(([key, value]) => [
+        key,
+        {
+          type: value.type,
+          children: null,
+        },
+      ]),
+    ),
+    variables: [],
+  },
+})
+
 const createWorkflow = (
   nodes: Node[],
 ): FetchWorkflowDraftResponse => ({
@@ -80,6 +136,20 @@ const createWorkflow = (
   marked_comment: 'Published',
 })
 
+const createSnippetWorkflow = (
+  nodes: Node[],
+): SnippetWorkflow => ({
+  id: 'snippet-workflow-1',
+  graph: {
+    nodes,
+    edges: [],
+  },
+  features: {},
+  hash: 'snippet-hash-1',
+  created_at: 1710000000,
+  updated_at: 1710000001,
+})
+
 const createMetric = (): EvaluationMetric => ({
   id: 'metric-1',
   optionId: 'custom-1',
@@ -88,12 +158,16 @@ const createMetric = (): EvaluationMetric => ({
   description: 'Map workflow variables to your evaluation inputs.',
   customConfig: {
     workflowId: 'workflow-1',
-    workflowAppId: 'app-1',
+    workflowAppId: 'workflow-app-1',
     workflowName: 'Evaluation Workflow',
     mappings: [{
       id: 'mapping-1',
-      sourceFieldId: null,
-      targetVariableId: null,
+      inputVariableId: 'user_question',
+      outputVariableId: 'current-node.answer',
+    }, {
+      id: 'mapping-2',
+      inputVariableId: 'retrieved_context',
+      outputVariableId: 'current-node.score',
     }],
   },
 })
@@ -102,6 +176,7 @@ describe('CustomMetricEditorCard', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     useEvaluationStore.setState({ resources: {} })
+    mockPublishedGraphVariablePicker.mockReset()
 
     mockUseInfiniteScroll.mockImplementation(() => undefined)
     mockUseAvailableEvaluationWorkflows.mockReturnValue({
@@ -119,48 +194,74 @@ describe('CustomMetricEditorCard', () => {
       isFetchingNextPage: false,
       isLoading: false,
     })
+    mockUseSnippetPublishedWorkflow.mockReturnValue({ data: undefined })
   })
 
-  // Verify end-node outputs are shown after a workflow is selected.
+  // Verify the selected evaluation workflow still drives the output summary section.
   describe('Outputs', () => {
     it('should render the selected workflow outputs from the end node', () => {
-      mockUseAppWorkflow.mockReturnValue({
-        data: createWorkflow([
-          createStartNode(),
-          createEndNode([
-            { variable: 'answer_score', value_selector: ['end', 'answer_score'], value_type: VarType.number },
-            { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
-          ]),
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([
+          { variable: 'answer_score', value_selector: ['end', 'answer_score'], value_type: VarType.number },
+          { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
         ]),
+      ])
+      const currentAppWorkflow = createWorkflow([
+        createCodeNode('current-node', 'Current Node', {
+          answer: { type: VarType.string },
+          score: { type: VarType.number },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+        if (appId === 'app-under-test')
+          return { data: currentAppWorkflow }
+
+        return { data: undefined }
       })
 
       render(
         <CustomMetricEditorCard
           resourceType="apps"
-          resourceId="app-1"
+          resourceId="app-under-test"
           metric={createMetric()}
         />,
       )
 
       expect(screen.getByText('evaluation.metrics.custom.outputTitle')).toBeInTheDocument()
-      expect(screen.getByText('answer_score')).toBeInTheDocument()
-      expect(screen.getByText('number')).toBeInTheDocument()
-      expect(screen.getByText('reason')).toBeInTheDocument()
-      expect(screen.getByText('string')).toBeInTheDocument()
+      expect(screen.getAllByText('answer_score').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('number').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('reason').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('string').length).toBeGreaterThan(0)
     })
 
     it('should hide the output section when the selected workflow has no end outputs', () => {
-      mockUseAppWorkflow.mockReturnValue({
-        data: createWorkflow([
-          createStartNode(),
-          createEndNode([]),
-        ]),
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([]),
+      ])
+      const currentAppWorkflow = createWorkflow([
+        createCodeNode('current-node', 'Current Node', {
+          answer: { type: VarType.string },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+        if (appId === 'app-under-test')
+          return { data: currentAppWorkflow }
+
+        return { data: undefined }
       })
 
       render(
         <CustomMetricEditorCard
           resourceType="apps"
-          resourceId="app-1"
+          resourceId="app-under-test"
           metric={createMetric()}
         />,
       )
@@ -168,4 +269,94 @@ describe('CustomMetricEditorCard', () => {
       expect(screen.queryByText('evaluation.metrics.custom.outputTitle')).not.toBeInTheDocument()
     })
   })
+
+  // Verify mapping rows use workflow start variables on the left and current published graph variables on the right.
+  describe('Variable Mapping', () => {
+    it('should pass the current app published graph and saved selector values to the picker', () => {
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([
+          { variable: 'answer_score', value_selector: ['end', 'answer_score'], value_type: VarType.number },
+          { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
+        ]),
+      ])
+      const currentAppWorkflow = createWorkflow([
+        createStartNode(),
+        createCodeNode('current-node', 'Current Node', {
+          answer: { type: VarType.string },
+          score: { type: VarType.number },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+        if (appId === 'app-under-test')
+          return { data: currentAppWorkflow }
+
+        return { data: undefined }
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="apps"
+          resourceId="app-under-test"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(screen.getByText('user_question')).toBeInTheDocument()
+      expect(screen.getByText('retrieved_context')).toBeInTheDocument()
+      expect(screen.getAllByText('string')).toHaveLength(3)
+      expect(mockPublishedGraphVariablePicker).toHaveBeenCalledTimes(2)
+      expect(mockPublishedGraphVariablePicker.mock.calls[0][0]).toMatchObject({
+        nodes: currentAppWorkflow.graph.nodes,
+        edges: currentAppWorkflow.graph.edges,
+        value: 'current-node.answer',
+      })
+      expect(mockPublishedGraphVariablePicker.mock.calls[1][0]).toMatchObject({
+        nodes: currentAppWorkflow.graph.nodes,
+        edges: currentAppWorkflow.graph.edges,
+        value: 'current-node.score',
+      })
+    })
+
+    it('should use the current snippet published graph when editing a snippet evaluation', () => {
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([
+          { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
+        ]),
+      ])
+      const currentSnippetWorkflow = createSnippetWorkflow([
+        createCodeNode('snippet-node', 'Snippet Node', {
+          result: { type: VarType.string },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+
+        return { data: undefined }
+      })
+      mockUseSnippetPublishedWorkflow.mockReturnValue({
+        data: currentSnippetWorkflow,
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="snippets"
+          resourceId="snippet-under-test"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(mockPublishedGraphVariablePicker).toHaveBeenCalledTimes(2)
+      expect(mockPublishedGraphVariablePicker.mock.calls[0][0]).toMatchObject({
+        nodes: currentSnippetWorkflow.graph.nodes,
+        edges: currentSnippetWorkflow.graph.edges,
+      })
+    })
+  })
 })
diff --git a/web/app/components/evaluation/components/custom-metric-editor/index.tsx b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
index 7fa385a4ce..5235c06163 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/index.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
@@ -3,11 +3,12 @@
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
-import type { Node } from '@/app/components/workflow/types'
-import { useMemo } from 'react'
+import type { Edge, InputVar, Node } from '@/app/components/workflow/types'
+import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import { BlockEnum } from '@/app/components/workflow/types'
+import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
 import { useAppWorkflow } from '@/service/use-workflow'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
 import MappingRow from './mapping-row'
@@ -17,16 +18,16 @@ type CustomMetricEditorCardProps = EvaluationResourceProps & {
   metric: EvaluationMetric
 }
 
-const getWorkflowTargetVariables = (
+const getWorkflowInputVariables = (
   nodes?: Array<Node>,
 ) => {
   const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
   if (!startNode || !Array.isArray(startNode.data.variables))
     return []
 
-  return startNode.data.variables.map(variable => ({
+  return startNode.data.variables.map((variable: InputVar) => ({
     id: variable.variable,
-    label: typeof variable.label === 'string' ? variable.label : variable.variable,
+    valueType: inputVarTypeToVarType(variable.type ?? InputVarType.textInput),
   }))
 }
 
@@ -39,9 +40,11 @@ const getWorkflowOutputs = (nodes?: Array<Node>) => {
         return []
 
       return endNode.data.outputs
+        .filter(output => typeof output.variable === 'string' && !!output.variable)
         .map(output => ({
-          variable: output.variable,
-          valueType: output.value_type,
+          id: output.variable,
+          valueType: typeof output.value_type === 'string' ? output.value_type : null,
+          nodeTitle: typeof endNode.data.title === 'string' && endNode.data.title ? endNode.data.title : 'End',
         }))
     })
 }
@@ -54,6 +57,14 @@ const getWorkflowName = (workflow: {
   return workflow.marked_name || workflow.app_name || workflow.id
 }
 
+const getGraphNodes = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.nodes) ? graph.nodes as Node[] : []
+}
+
+const getGraphEdges = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.edges) ? graph.edges as Edge[] : []
+}
+
 const CustomMetricEditorCard = ({
   resourceType,
   resourceId,
@@ -61,18 +72,60 @@ const CustomMetricEditorCard = ({
 }: CustomMetricEditorCardProps) => {
   const { t } = useTranslation('evaluation')
   const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
-  const addCustomMetricMapping = useEvaluationStore(state => state.addCustomMetricMapping)
+  const syncCustomMetricMappings = useEvaluationStore(state => state.syncCustomMetricMappings)
   const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
-  const removeCustomMetricMapping = useEvaluationStore(state => state.removeCustomMetricMapping)
   const { data: selectedWorkflow } = useAppWorkflow(metric.customConfig?.workflowAppId ?? '')
-  const targetOptions = useMemo(() => {
-    return getWorkflowTargetVariables(selectedWorkflow?.graph.nodes)
+  const { data: currentAppWorkflow } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
+  const { data: currentSnippetWorkflow } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
+  const inputVariables = useMemo(() => {
+    return getWorkflowInputVariables(selectedWorkflow?.graph.nodes)
   }, [selectedWorkflow?.graph.nodes])
   const workflowOutputs = useMemo(() => {
     return getWorkflowOutputs(selectedWorkflow?.graph.nodes)
   }, [selectedWorkflow?.graph.nodes])
+  const publishedGraph = useMemo(() => {
+    if (resourceType === 'apps') {
+      return {
+        nodes: currentAppWorkflow?.graph.nodes ?? [],
+        edges: currentAppWorkflow?.graph.edges ?? [],
+        environmentVariables: currentAppWorkflow?.environment_variables ?? [],
+        conversationVariables: currentAppWorkflow?.conversation_variables ?? [],
+      }
+    }
+
+    return {
+      nodes: getGraphNodes(currentSnippetWorkflow?.graph),
+      edges: getGraphEdges(currentSnippetWorkflow?.graph),
+      environmentVariables: [],
+      conversationVariables: [],
+    }
+  }, [
+    currentAppWorkflow?.conversation_variables,
+    currentAppWorkflow?.environment_variables,
+    currentAppWorkflow?.graph.edges,
+    currentAppWorkflow?.graph.nodes,
+    currentSnippetWorkflow?.graph,
+    resourceType,
+  ])
+  const inputVariableIds = useMemo(() => inputVariables.map(variable => variable.id), [inputVariables])
   const isConfigured = isCustomMetricConfigured(metric)
 
+  useEffect(() => {
+    if (!metric.customConfig?.workflowId)
+      return
+
+    const currentInputVariableIds = metric.customConfig.mappings
+      .map(mapping => mapping.inputVariableId)
+      .filter((value): value is string => !!value)
+
+    if (currentInputVariableIds.length === inputVariableIds.length
+      && currentInputVariableIds.every((value, index) => value === inputVariableIds[index])) {
+      return
+    }
+
+    syncCustomMetricMappings(resourceType, resourceId, metric.id, inputVariableIds)
+  }, [inputVariableIds, metric.customConfig?.mappings, metric.customConfig?.workflowId, metric.id, resourceId, resourceType, syncCustomMetricMappings])
+
   if (!metric.customConfig)
     return null
 
@@ -88,6 +141,37 @@ const CustomMetricEditorCard = ({
         })}
       />
 
+      <div className="mt-4">
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <div className="system-xs-medium-uppercase text-text-secondary">{t('metrics.custom.mappingTitle')}</div>
+        </div>
+        <div className="space-y-2">
+          {inputVariables.map((inputVariable) => {
+            const mapping = metric.customConfig?.mappings.find(item => item.inputVariableId === inputVariable.id)
+
+            return (
+              <MappingRow
+                key={inputVariable.id}
+                inputVariable={inputVariable}
+                publishedGraph={publishedGraph}
+                value={mapping?.outputVariableId ?? null}
+                onUpdate={(outputVariableId) => {
+                  if (!mapping)
+                    return
+
+                  updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, { outputVariableId })
+                }}
+              />
+            )
+          })}
+        </div>
+        {!isConfigured && (
+          <div className="mt-3 rounded-lg bg-background-section px-3 py-2 system-xs-regular text-text-tertiary">
+            {t('metrics.custom.mappingWarning')}
+          </div>
+        )}
+      </div>
+
       {!!workflowOutputs.length && (
         <div className="mt-4 py-1">
           <div className="min-h-6 system-xs-medium-uppercase text-text-tertiary">
@@ -95,8 +179,8 @@ const CustomMetricEditorCard = ({
           </div>
           <div className="flex flex-wrap items-center gap-y-1 px-2 py-2 system-xs-regular text-text-tertiary">
             {workflowOutputs.map((output, index) => (
-              <div key={output.variable} className="flex items-center">
-                <span className="px-1 system-xs-medium text-text-secondary">{output.variable}</span>
+              <div key={`${output.nodeTitle}-${output.id}-${index}`} className="flex items-center">
+                <span className="px-1 system-xs-medium text-text-secondary">{output.id}</span>
                 {output.valueType && (
                   <span>{output.valueType}</span>
                 )}
@@ -108,38 +192,6 @@ const CustomMetricEditorCard = ({
           </div>
         </div>
       )}
-
-      <div className="mt-4">
-        <div className="mb-2 flex items-center justify-between gap-3">
-          <div className="system-xs-medium-uppercase text-text-secondary">{t('metrics.custom.mappingTitle')}</div>
-          <Button
-            size="small"
-            variant="ghost"
-            className="text-text-accent"
-            onClick={() => addCustomMetricMapping(resourceType, resourceId, metric.id)}
-          >
-            <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
-            {t('metrics.custom.addMapping')}
-          </Button>
-        </div>
-        <div className="space-y-2">
-          {metric.customConfig.mappings.map(mapping => (
-            <MappingRow
-              key={mapping.id}
-              resourceType={resourceType}
-              mapping={mapping}
-              targetOptions={targetOptions}
-              onUpdate={patch => updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, patch)}
-              onRemove={() => removeCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id)}
-            />
-          ))}
-        </div>
-        {!isConfigured && (
-          <div className="mt-3 rounded-lg bg-background-section px-3 py-2 system-xs-regular text-text-tertiary">
-            {t('metrics.custom.mappingWarning')}
-          </div>
-        )}
-      </div>
     </div>
   )
 }
diff --git a/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx b/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
index 782e67e321..1340682674 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
@@ -1,74 +1,62 @@
 'use client'
 
-import type { CustomMetricMapping, EvaluationResourceType } from '../../types'
+import type {
+  ConversationVariable,
+  Edge,
+  EnvironmentVariable,
+  Node,
+} from '@/app/components/workflow/types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectGroupLabel,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/app/components/base/ui/select'
-import { getEvaluationMockConfig } from '../../mock'
-import { groupFieldOptions } from '../../utils'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import PublishedGraphVariablePicker from './published-graph-variable-picker'
 
 type MappingRowProps = {
-  resourceType: EvaluationResourceType
-  mapping: CustomMetricMapping
-  targetOptions: Array<{ id: string, label: string }>
-  onUpdate: (patch: { sourceFieldId?: string | null, targetVariableId?: string | null }) => void
-  onRemove: () => void
+  inputVariable: {
+    id: string
+    valueType: string
+  }
+  publishedGraph: {
+    nodes: Node[]
+    edges: Edge[]
+    environmentVariables: EnvironmentVariable[]
+    conversationVariables: ConversationVariable[]
+  }
+  value: string | null
+  onUpdate: (outputVariableId: string | null) => void
 }
 
 const MappingRow = ({
-  resourceType,
-  mapping,
-  targetOptions,
+  inputVariable,
+  publishedGraph,
+  value,
   onUpdate,
-  onRemove,
 }: MappingRowProps) => {
   const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
 
   return (
-    <div className="grid gap-2 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-card-bg p-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]">
-      <Select value={mapping.sourceFieldId ?? ''} onValueChange={value => onUpdate({ sourceFieldId: value })}>
-        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-          <SelectValue placeholder={t('metrics.custom.sourcePlaceholder')} />
-        </SelectTrigger>
-        <SelectContent>
-          {groupFieldOptions(config.fieldOptions).map(([groupName, fields]) => (
-            <SelectGroup key={groupName}>
-              <SelectGroupLabel>{groupName}</SelectGroupLabel>
-              {fields.map(field => (
-                <SelectItem key={field.id} value={field.id}>{field.label}</SelectItem>
-              ))}
-            </SelectGroup>
-          ))}
-        </SelectContent>
-      </Select>
-
-      <div className="flex items-center justify-center text-text-quaternary">
-        <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4 -rotate-90" />
+    <div className="flex items-center">
+      <div className="flex h-8 w-[200px] items-center rounded-md px-2">
+        <div className="flex min-w-0 items-center gap-0.5 px-1">
+          <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+          <div className="truncate system-xs-medium text-text-secondary">{inputVariable.id}</div>
+          <div className="shrink-0 system-xs-regular text-text-tertiary">{inputVariable.valueType}</div>
+        </div>
       </div>
 
-      <Select value={mapping.targetVariableId ?? ''} onValueChange={value => onUpdate({ targetVariableId: value })}>
-        <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-          <SelectValue placeholder={t('metrics.custom.targetPlaceholder')} />
-        </SelectTrigger>
-        <SelectContent>
-          {targetOptions.map(option => (
-            <SelectItem key={option.id} value={option.id}>{option.label}</SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <div className="flex h-8 w-9 items-center justify-center px-3 system-xs-medium text-text-tertiary">
+        <span aria-hidden="true">→</span>
+      </div>
 
-      <Button variant="ghost" size="small" aria-label={t('metrics.remove')} onClick={onRemove}>
-        <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
-      </Button>
+      <PublishedGraphVariablePicker
+        className="grow"
+        nodes={publishedGraph.nodes}
+        edges={publishedGraph.edges}
+        environmentVariables={publishedGraph.environmentVariables}
+        conversationVariables={publishedGraph.conversationVariables}
+        value={value}
+        placeholder={t('metrics.custom.outputPlaceholder')}
+        onChange={onUpdate}
+      />
     </div>
   )
 }
diff --git a/web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx b/web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx
new file mode 100644
index 0000000000..4aeb6b615d
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
+import type {
+  ConversationVariable,
+  Edge,
+  EnvironmentVariable,
+  Node,
+  ValueSelector,
+} from '@/app/components/workflow/types'
+import { useMemo } from 'react'
+import ReactFlow, { ReactFlowProvider } from 'reactflow'
+import { WorkflowContext } from '@/app/components/workflow/context'
+import { createHooksStore, HooksStoreContext } from '@/app/components/workflow/hooks-store'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import { createWorkflowStore } from '@/app/components/workflow/store/workflow'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { variableTransformer } from '@/app/components/workflow/utils/variable'
+
+type PublishedGraphVariablePickerProps = {
+  className?: string
+  nodes: Node[]
+  edges: Edge[]
+  environmentVariables?: EnvironmentVariable[]
+  conversationVariables?: ConversationVariable[]
+  placeholder: string
+  value: string | null
+  onChange: (value: string | null) => void
+}
+
+const PICKER_NODE_ID = '__evaluation-variable-picker__'
+
+const createPickerNode = (): Node<EndNodeType> => ({
+  id: PICKER_NODE_ID,
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.End,
+    title: 'End',
+    desc: '',
+    outputs: [],
+  },
+})
+
+const PublishedGraphVariablePicker = ({
+  className,
+  nodes,
+  edges,
+  environmentVariables = [],
+  conversationVariables = [],
+  placeholder,
+  value,
+  onChange,
+}: PublishedGraphVariablePickerProps) => {
+  const workflowStore = useMemo(() => {
+    const store = createWorkflowStore({})
+    store.setState({
+      isWorkflowDataLoaded: true,
+      environmentVariables,
+      conversationVariables,
+      ragPipelineVariables: [],
+      dataSourceList: [],
+    })
+    return store
+  }, [conversationVariables, environmentVariables])
+
+  const hooksStore = useMemo(() => createHooksStore({}), [])
+
+  const pickerNodes = useMemo(() => {
+    return [...nodes, createPickerNode()]
+  }, [nodes])
+
+  const pickerValue = useMemo<ValueSelector>(() => {
+    if (!value)
+      return []
+
+    return variableTransformer(value) as ValueSelector
+  }, [value])
+
+  return (
+    <WorkflowContext.Provider value={workflowStore}>
+      <HooksStoreContext.Provider value={hooksStore}>
+        <div id="workflow-container" className={className}>
+          <ReactFlowProvider>
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute h-px w-px overflow-hidden opacity-0"
+            >
+              <div style={{ width: 800, height: 600 }}>
+                <ReactFlow nodes={pickerNodes} edges={edges} fitView />
+              </div>
+            </div>
+
+            <VarReferencePicker
+              className="grow"
+              nodeId={PICKER_NODE_ID}
+              readonly={!nodes.length}
+              isShowNodeName
+              value={pickerValue}
+              onChange={(nextValue) => {
+                if (!Array.isArray(nextValue) || !nextValue.length) {
+                  onChange(null)
+                  return
+                }
+
+                onChange(nextValue.join('.'))
+              }}
+              availableNodes={nodes}
+              placeholder={placeholder}
+            />
+          </ReactFlowProvider>
+        </div>
+      </HooksStoreContext.Provider>
+    </WorkflowContext.Provider>
+  )
+}
+
+export default PublishedGraphVariablePicker
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
index 0b76e4387b..a234635c50 100644
--- a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -208,7 +208,7 @@ describe('MetricSection', () => {
       expect(screen.getByText('Custom Evaluator')).toBeInTheDocument()
       expect(screen.getByText('evaluation.metrics.custom.warningBadge')).toBeInTheDocument()
       expect(screen.getByText('evaluation.metrics.custom.workflowPlaceholder')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'evaluation.metrics.custom.addMapping' })).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.mappingTitle')).toBeInTheDocument()
     })
 
     it('should disable adding another custom metric when one already exists', () => {
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index be592b4df2..13efc6c66a 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -89,20 +89,16 @@ const normalizeCustomMetricMappings = (
   value: EvaluationCustomizedMetric['input_fields'],
 ): CustomMetricMapping[] => {
   if (!value)
-    return [createCustomMetricMapping()]
+    return []
 
   const mappings = Object.entries(value)
     .filter((entry): entry is [string, string] => {
-      const [, targetVariableId] = entry
-      return typeof targetVariableId === 'string' && !!targetVariableId
+      const [, outputVariableId] = entry
+      return typeof outputVariableId === 'string' && !!outputVariableId
     })
-    .map(([sourceFieldId, targetVariableId]) => ({
-      id: createId('mapping'),
-      sourceFieldId,
-      targetVariableId,
-    }))
+    .map(([inputVariableId, outputVariableId]) => createCustomMetricMapping(inputVariableId, outputVariableId))
 
-  return mappings.length > 0 ? mappings : [createCustomMetricMapping()]
+  return mappings
 }
 
 const normalizeCustomMetric = (
@@ -228,14 +224,38 @@ export function createBuiltinMetric(
   }
 }
 
-export function createCustomMetricMapping(): CustomMetricMapping {
+function createCustomMetricMapping(
+  inputVariableId: string | null = null,
+  outputVariableId: string | null = null,
+): CustomMetricMapping {
   return {
     id: createId('mapping'),
-    sourceFieldId: null,
-    targetVariableId: null,
+    inputVariableId,
+    outputVariableId,
   }
 }
 
+export const syncCustomMetricMappings = (
+  mappings: CustomMetricMapping[],
+  inputVariableIds: string[],
+) => {
+  const mappingByInputVariableId = new Map(
+    mappings
+      .filter(mapping => !!mapping.inputVariableId)
+      .map(mapping => [mapping.inputVariableId, mapping]),
+  )
+
+  return inputVariableIds.map((inputVariableId) => {
+    const existingMapping = mappingByInputVariableId.get(inputVariableId)
+    return existingMapping
+      ? {
+          ...existingMapping,
+          inputVariableId,
+        }
+      : createCustomMetricMapping(inputVariableId, null)
+  })
+}
+
 export function createCustomMetric(): EvaluationMetric {
   return {
     id: createId('metric'),
@@ -247,7 +267,7 @@ export function createCustomMetric(): EvaluationMetric {
       workflowId: null,
       workflowAppId: null,
       workflowName: null,
-      mappings: [createCustomMetricMapping()],
+      mappings: [],
     },
   }
 }
@@ -362,7 +382,7 @@ export const isCustomMetricConfigured = (metric: EvaluationMetric) => {
     return false
 
   return metric.customConfig.mappings.length > 0
-    && metric.customConfig.mappings.every(mapping => !!mapping.sourceFieldId && !!mapping.targetVariableId)
+    && metric.customConfig.mappings.every(mapping => !!mapping.inputVariableId && !!mapping.outputVariableId)
 }
 
 export const isEvaluationRunnable = (state: EvaluationResourceState) => {
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 8890694ca4..20b30a4b8e 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -15,12 +15,12 @@ import {
   createBuiltinMetric,
   createConditionGroup,
   createCustomMetric,
-  createCustomMetricMapping,
   getAllowedOperators as getAllowedOperatorsFromUtils,
   getConditionValue,
   isCustomMetricConfigured as isCustomMetricConfiguredFromUtils,
   isEvaluationRunnable as isEvaluationRunnableFromUtils,
   requiresConditionValue as requiresConditionValueFromUtils,
+  syncCustomMetricMappings as syncCustomMetricMappingsFromUtils,
   updateConditionGroup,
   updateMetric,
   updateResourceState,
@@ -41,15 +41,19 @@ type EvaluationStore = {
     metricId: string,
     workflow: { workflowId: string, workflowAppId: string, workflowName: string },
   ) => void
-  addCustomMetricMapping: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
+  syncCustomMetricMappings: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    inputVariableIds: string[],
+  ) => void
   updateCustomMetricMapping: (
     resourceType: EvaluationResourceType,
     resourceId: string,
     metricId: string,
     mappingId: string,
-    patch: { sourceFieldId?: string | null, targetVariableId?: string | null },
+    patch: { inputVariableId?: string | null, outputVariableId?: string | null },
   ) => void
-  removeCustomMetricMapping: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, mappingId: string) => void
   addConditionGroup: (resourceType: EvaluationResourceType, resourceId: string) => void
   removeConditionGroup: (resourceType: EvaluationResourceType, resourceId: string, groupId: string) => void
   setConditionGroupOperator: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, logicalOperator: 'and' | 'or') => void
@@ -170,7 +174,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
                 workflowName: workflow.workflowName,
                 mappings: metric.customConfig.mappings.map(mapping => ({
                   ...mapping,
-                  targetVariableId: null,
+                  outputVariableId: null,
                 })),
               }
             : metric.customConfig,
@@ -178,7 +182,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
-  addCustomMetricMapping: (resourceType, resourceId, metricId) => {
+  syncCustomMetricMappings: (resourceType, resourceId, metricId, inputVariableIds) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
@@ -187,7 +191,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
           customConfig: metric.customConfig
             ? {
                 ...metric.customConfig,
-                mappings: [...metric.customConfig.mappings, createCustomMetricMapping()],
+                mappings: syncCustomMetricMappingsFromUtils(metric.customConfig.mappings, inputVariableIds),
               }
             : metric.customConfig,
         })),
@@ -210,22 +214,6 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
-  removeCustomMetricMapping: (resourceType, resourceId, metricId, mappingId) => {
-    set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        metrics: updateMetric(resource.metrics, metricId, metric => ({
-          ...metric,
-          customConfig: metric.customConfig
-            ? {
-                ...metric.customConfig,
-                mappings: metric.customConfig.mappings.filter(mapping => mapping.id !== mappingId),
-              }
-            : metric.customConfig,
-        })),
-      })),
-    }))
-  },
   addConditionGroup: (resourceType, resourceId) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index c8486f7923..02e45f3b22 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -62,8 +62,8 @@ export type EvaluationFieldOption = {
 
 export type CustomMetricMapping = {
   id: string
-  sourceFieldId: string | null
-  targetVariableId: string | null
+  inputVariableId: string | null
+  outputVariableId: string | null
 }
 
 export type CustomMetricConfig = {
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index c874ef7f06..2a7197fc78 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -63,16 +63,14 @@
   "metrics.addNode": "Add Node",
   "metrics.added": "Added",
   "metrics.collapseNodes": "Collapse nodes",
-  "metrics.custom.addMapping": "Add Mapping",
   "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
   "metrics.custom.footerDescription": "Connect your published evaluation workflows",
   "metrics.custom.footerTitle": "Custom metrics",
   "metrics.custom.limitDescription": "Only one custom metric can be added.",
   "metrics.custom.mappingTitle": "Variable Mapping",
   "metrics.custom.mappingWarning": "Complete the workflow selection and each variable mapping to enable batch tests.",
+  "metrics.custom.outputPlaceholder": "Select an output variable",
   "metrics.custom.outputTitle": "Output",
-  "metrics.custom.sourcePlaceholder": "Source variable",
-  "metrics.custom.targetPlaceholder": "Target variable",
   "metrics.custom.title": "Custom Evaluator",
   "metrics.custom.warningBadge": "Needs setup",
   "metrics.custom.workflowLabel": "Evaluation Workflow",

From 4d1499ef75087567ef2f465a28c1046469f1aaed Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 19:46:18 +0800
Subject: [PATCH 071/108] refactor(web): refactor condition group

---
 .../evaluation/__tests__/index.spec.tsx       | 12 ++--
 .../evaluation/__tests__/store.spec.ts        |  8 +--
 .../condition-group.tsx                       | 60 ++++---------------
 .../index.tsx}                                | 12 ++--
 web/app/components/evaluation/mock.ts         |  6 --
 web/app/components/evaluation/types.ts        |  4 +-
 web/app/components/evaluation/utils.ts        |  3 -
 web/i18n/en-US/evaluation.json                |  3 -
 web/i18n/zh-Hans/evaluation.json              |  6 --
 9 files changed, 29 insertions(+), 85 deletions(-)
 rename web/app/components/evaluation/components/{ => conditions-section}/condition-group.tsx (82%)
 rename web/app/components/evaluation/components/{conditions-section.tsx => conditions-section/index.tsx} (81%)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 0e7e6b8c91..6257d38f77 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -117,13 +117,13 @@ describe('Evaluation', () => {
     vi.useRealTimers()
   })
 
-  it('should render time placeholders and hide the value row for empty operators', () => {
+  it('should hide the value row for empty operators', () => {
     const resourceType = 'apps'
     const resourceId = 'app-2'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
 
-    const timeField = config.fieldOptions.find(field => field.type === 'time')!
+    const stringField = config.fieldOptions.find(field => field.type === 'string')!
     let groupId = ''
     let itemId = ''
 
@@ -135,8 +135,8 @@ describe('Evaluation', () => {
       groupId = group.id
       itemId = group.items[0].id
 
-      store.updateConditionField(resourceType, resourceId, groupId, itemId, timeField.id)
-      store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'before')
+      store.updateConditionField(resourceType, resourceId, groupId, itemId, stringField.id)
+      store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'contains')
     })
 
     let rerender: ReturnType<typeof render>['rerender']
@@ -144,14 +144,14 @@ describe('Evaluation', () => {
       ({ rerender } = render(<Evaluation resourceType={resourceType} resourceId={resourceId} />))
     })
 
-    expect(screen.getByText('evaluation.conditions.selectTime')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('evaluation.conditions.valuePlaceholder')).toBeInTheDocument()
 
     act(() => {
       store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'is_empty')
       rerender(<Evaluation resourceType={resourceType} resourceId={resourceId} />)
     })
 
-    expect(screen.queryByText('evaluation.conditions.selectTime')).not.toBeInTheDocument()
+    expect(screen.queryByPlaceholderText('evaluation.conditions.valuePlaceholder')).not.toBeInTheDocument()
   })
 
   it('should render the metric no-node empty state', () => {
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 88610c6ccb..ce85c32e65 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -123,7 +123,7 @@ describe('evaluation store', () => {
     expect(getAllowedOperators(resourceType, booleanField.id)).toEqual(['is', 'is_not'])
   })
 
-  it('should support time fields and clear values for empty operators', () => {
+  it('should clear values for empty operators', () => {
     const resourceType = 'apps'
     const resourceId = 'app-3'
     const store = useEvaluationStore.getState()
@@ -131,15 +131,15 @@ describe('evaluation store', () => {
 
     store.ensureResource(resourceType, resourceId)
 
-    const timeField = config.fieldOptions.find(field => field.type === 'time')!
+    const stringField = config.fieldOptions.find(field => field.type === 'string')!
     const item = useEvaluationStore.getState().resources['apps:app-3'].conditions[0].items[0]
 
-    store.updateConditionField(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, timeField.id)
+    store.updateConditionField(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, stringField.id)
     store.updateConditionOperator(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, 'is_empty')
 
     const updatedItem = useEvaluationStore.getState().resources['apps:app-3'].conditions[0].items[0]
 
-    expect(getAllowedOperators(resourceType, timeField.id)).toEqual(['is', 'before', 'after', 'is_empty', 'is_not_empty'])
+    expect(getAllowedOperators(resourceType, stringField.id)).toEqual(['contains', 'not_contains', 'is', 'is_not', 'is_empty', 'is_not_empty'])
     expect(requiresConditionValue('is_empty')).toBe(false)
     expect(updatedItem.value).toBeNull()
   })
diff --git a/web/app/components/evaluation/components/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
similarity index 82%
rename from web/app/components/evaluation/components/condition-group.tsx
rename to web/app/components/evaluation/components/conditions-section/condition-group.tsx
index a678776054..902194c460 100644
--- a/web/app/components/evaluation/components/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -5,12 +5,10 @@ import type {
   EvaluationFieldOption,
   EvaluationResourceProps,
   JudgmentConditionGroup,
-} from '../types'
+} from '../../types'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
-import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
-import dayjs from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import Input from '@/app/components/base/input'
 import {
   Select,
@@ -22,9 +20,9 @@ import {
   SelectValue,
 } from '@/app/components/base/ui/select'
 import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../mock'
-import { getAllowedOperators, requiresConditionValue, useEvaluationStore } from '../store'
-import { getFieldTypeIconClassName, getOperatorLabel, groupFieldOptions } from '../utils'
+import { getEvaluationMockConfig } from '../../mock'
+import { getAllowedOperators, requiresConditionValue, useEvaluationStore } from '../../store'
+import { getFieldTypeIconClassName, getOperatorLabel, groupFieldOptions } from '../../utils'
 
 type ConditionFieldLabelProps = {
   field?: EvaluationFieldOption
@@ -62,15 +60,15 @@ const ConditionFieldLabel = ({
   placeholder,
 }: ConditionFieldLabelProps) => {
   if (!field)
-    return <span className="px-1 text-components-input-text-placeholder system-sm-regular">{placeholder}</span>
+    return <span className="px-1 system-sm-regular text-components-input-text-placeholder">{placeholder}</span>
 
   return (
     <div className="flex min-w-0 items-center gap-2 px-1">
-      <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-[5px] pr-1.5 shadow-xs">
+      <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
         <span className={cn(getFieldTypeIconClassName(field.type), 'h-3 w-3 shrink-0 text-text-secondary')} />
-        <span className="truncate text-text-secondary system-xs-medium">{field.label}</span>
+        <span className="truncate system-xs-medium text-text-secondary">{field.label}</span>
       </div>
-      <span className="shrink-0 text-text-tertiary system-xs-regular">{field.type}</span>
+      <span className="shrink-0 system-xs-regular text-text-tertiary">{field.type}</span>
     </div>
   )
 }
@@ -89,7 +87,7 @@ const ConditionFieldSelect = ({
       <SelectContent popupClassName="w-[320px]">
         {groupFieldOptions(fieldOptions).map(([groupName, fields]) => (
           <SelectGroup key={groupName}>
-            <SelectGroupLabel className="px-3 pb-1 pt-2 text-text-tertiary system-xs-medium-uppercase">{groupName}</SelectGroupLabel>
+            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{groupName}</SelectGroupLabel>
             {fields.map(option => (
               <SelectItem key={option.id} value={option.id}>
                 <div className="flex min-w-0 items-center gap-2">
@@ -116,7 +114,7 @@ const ConditionOperatorSelect = ({
   return (
     <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
       <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-        <span className="truncate text-text-secondary system-xs-medium">{getOperatorLabel(operator, field?.type, t)}</span>
+        <span className="truncate system-xs-medium text-text-secondary">{getOperatorLabel(operator, field?.type, t)}</span>
       </SelectTrigger>
       <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
         {operators.map(nextOperator => (
@@ -140,40 +138,6 @@ const FieldValueInput = ({
   if (!field || !requiresConditionValue(operator))
     return null
 
-  if (field.type === 'time') {
-    const selectedTime = typeof value === 'string' && value ? dayjs(value) : undefined
-
-    return (
-      <div className="px-2 py-1.5">
-        <DatePicker
-          value={selectedTime}
-          onChange={date => onChange(date ? date.toISOString() : null)}
-          onClear={() => onChange(null)}
-          placeholder={t('conditions.selectTime')}
-          triggerWrapClassName="w-full"
-          popupZIndexClassname="z-[1002]"
-          renderTrigger={({ handleClickTrigger }) => (
-            <button
-              type="button"
-              className="group flex w-full items-center gap-2 rounded-md px-1 py-1 text-left hover:bg-state-base-hover-alt"
-              onClick={handleClickTrigger}
-            >
-              <span
-                className={cn(
-                  'min-w-0 flex-1 truncate system-sm-regular',
-                  selectedTime ? 'text-text-secondary' : 'text-components-input-text-placeholder',
-                )}
-              >
-                {selectedTime ? selectedTime.format('MMM D, YYYY h:mm A') : t('conditions.selectTime')}
-              </span>
-              <span className="i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary" />
-            </button>
-          )}
-        />
-      </div>
-    )
-  }
-
   if (field.type === 'boolean') {
     return (
       <div className="px-2 py-1.5">
@@ -273,7 +237,7 @@ const ConditionGroup = ({
         </div>
         <div className="flex items-center gap-2">
           <Button size="small" variant="ghost" onClick={() => addConditionItem(resourceType, resourceId, group.id)}>
-            <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+            <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
             {t('conditions.addCondition')}
           </Button>
           <Button
@@ -323,7 +287,7 @@ const ConditionGroup = ({
                   </div>
                 )}
               </div>
-              <div className="pl-1 pt-1">
+              <div className="pt-1 pl-1">
                 <Button
                   size="small"
                   variant="ghost"
diff --git a/web/app/components/evaluation/components/conditions-section.tsx b/web/app/components/evaluation/components/conditions-section/index.tsx
similarity index 81%
rename from web/app/components/evaluation/components/conditions-section.tsx
rename to web/app/components/evaluation/components/conditions-section/index.tsx
index 7c08ba820a..db376a0610 100644
--- a/web/app/components/evaluation/components/conditions-section.tsx
+++ b/web/app/components/evaluation/components/conditions-section/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
-import type { EvaluationResourceProps } from '../types'
+import type { EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
-import { useEvaluationResource, useEvaluationStore } from '../store'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+import { InlineSectionHeader } from '../section-header'
 import ConditionGroup from './condition-group'
-import { InlineSectionHeader } from './section-header'
 
 const ConditionsSection = ({
   resourceType,
@@ -24,7 +24,7 @@ const ConditionsSection = ({
       />
       <div className="mt-2 space-y-4">
         {resource.conditions.length === 0 && (
-          <div className="rounded-xl bg-background-section px-3 py-3 text-text-tertiary system-xs-regular">
+          <div className="rounded-xl bg-background-section px-3 py-3 system-xs-regular text-text-tertiary">
             {t('conditions.emptyDescription')}
           </div>
         )}
@@ -40,13 +40,13 @@ const ConditionsSection = ({
         <button
           type="button"
           className={cn(
-            'inline-flex items-center text-text-accent system-sm-medium',
+            'inline-flex items-center system-sm-medium text-text-accent',
             !canAddCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
           )}
           disabled={!canAddCondition}
           onClick={() => addConditionGroup(resourceType, resourceId)}
         >
-          <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+          <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
           {t('conditions.addCondition')}
         </button>
       </div>
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
index 362a39d41c..d554c14fe0 100644
--- a/web/app/components/evaluation/mock.ts
+++ b/web/app/components/evaluation/mock.ts
@@ -102,14 +102,12 @@ const workflowFields: EvaluationFieldOption[] = [
   { id: 'app.input.locale', label: 'Locale', group: 'App Input', type: 'enum', options: [{ value: 'en-US', label: 'en-US' }, { value: 'zh-Hans', label: 'zh-Hans' }] },
   { id: 'app.output.answer', label: 'Answer', group: 'App Output', type: 'string' },
   { id: 'app.output.score', label: 'Score', group: 'App Output', type: 'number' },
-  { id: 'app.output.published_at', label: 'Publication Date', group: 'App Output', type: 'time' },
   { id: 'system.has_context', label: 'Has Context', group: 'System', type: 'boolean' },
 ]
 
 const pipelineFields: EvaluationFieldOption[] = [
   { id: 'dataset.input.document_id', label: 'Document ID', group: 'Dataset', type: 'string' },
   { id: 'dataset.input.chunk_count', label: 'Chunk Count', group: 'Dataset', type: 'number' },
-  { id: 'dataset.input.updated_at', label: 'Updated At', group: 'Dataset', type: 'time' },
   { id: 'retrieval.output.hit_rate', label: 'Hit Rate', group: 'Retrieval', type: 'number' },
   { id: 'retrieval.output.source', label: 'Source', group: 'Retrieval', type: 'enum', options: [{ value: 'bm25', label: 'BM25' }, { value: 'hybrid', label: 'Hybrid' }] },
   { id: 'pipeline.output.published', label: 'Published', group: 'Output', type: 'boolean' },
@@ -120,7 +118,6 @@ const snippetFields: EvaluationFieldOption[] = [
   { id: 'snippet.input.platforms', label: 'Platforms', group: 'Snippet Input', type: 'string' },
   { id: 'snippet.output.content', label: 'Generated Content', group: 'Snippet Output', type: 'string' },
   { id: 'snippet.output.length', label: 'Output Length', group: 'Snippet Output', type: 'number' },
-  { id: 'snippet.output.scheduled_at', label: 'Scheduled At', group: 'Snippet Output', type: 'time' },
   { id: 'system.requires_review', label: 'Requires Review', group: 'System', type: 'boolean' },
 ]
 
@@ -128,9 +125,6 @@ export const getComparisonOperators = (fieldType: EvaluationFieldOption['type'])
   if (fieldType === 'number')
     return ['is', 'is_not', 'greater_than', 'less_than', 'greater_or_equal', 'less_or_equal', 'is_empty', 'is_not_empty']
 
-  if (fieldType === 'time')
-    return ['is', 'before', 'after', 'is_empty', 'is_not_empty']
-
   if (fieldType === 'boolean' || fieldType === 'enum')
     return ['is', 'is_not']
 
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 02e45f3b22..8789d6f5c3 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -11,7 +11,7 @@ export type MetricKind = 'builtin' | 'custom-workflow'
 
 export type BatchTestTab = 'input-fields' | 'history'
 
-export type FieldType = 'string' | 'number' | 'boolean' | 'enum' | 'time'
+export type FieldType = 'string' | 'number' | 'boolean' | 'enum'
 
 export type ComparisonOperator
   = | 'contains'
@@ -24,8 +24,6 @@ export type ComparisonOperator
     | 'less_than'
     | 'greater_or_equal'
     | 'less_or_equal'
-    | 'before'
-    | 'after'
 
 export type JudgeModelOption = {
   id: string
diff --git a/web/app/components/evaluation/utils.ts b/web/app/components/evaluation/utils.ts
index 99723ad1de..54b6b2014a 100644
--- a/web/app/components/evaluation/utils.ts
+++ b/web/app/components/evaluation/utils.ts
@@ -53,8 +53,5 @@ export const getFieldTypeIconClassName = (fieldType: EvaluationFieldOption['type
   if (fieldType === 'enum')
     return 'i-ri-list-check-2'
 
-  if (fieldType === 'time')
-    return 'i-ri-time-line'
-
   return 'i-ri-text'
 }
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 2a7197fc78..c69a91f7bc 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -27,8 +27,6 @@
   "conditions.groupLabel": "Group {{index}}",
   "conditions.logical.and": "AND",
   "conditions.logical.or": "OR",
-  "conditions.operators.after": "After",
-  "conditions.operators.before": "Before",
   "conditions.operators.contains": "Contains",
   "conditions.operators.greater_or_equal": "Greater than or equal",
   "conditions.operators.greater_than": "Greater than",
@@ -42,7 +40,6 @@
   "conditions.removeCondition": "Remove condition",
   "conditions.removeGroup": "Remove condition group",
   "conditions.selectFieldFirst": "Select a field first",
-  "conditions.selectTime": "Choose a time...",
   "conditions.selectValue": "Choose a value",
   "conditions.title": "Judgment Conditions",
   "conditions.valuePlaceholder": "Enter a value",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 6a8bfea6fa..fb98c4e3af 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -27,8 +27,6 @@
   "conditions.groupLabel": "条件组 {{index}}",
   "conditions.logical.and": "且",
   "conditions.logical.or": "或",
-  "conditions.operators.after": "晚于",
-  "conditions.operators.before": "早于",
   "conditions.operators.contains": "包含",
   "conditions.operators.greater_or_equal": "大于等于",
   "conditions.operators.greater_than": "大于",
@@ -42,7 +40,6 @@
   "conditions.removeCondition": "删除条件",
   "conditions.removeGroup": "删除条件组",
   "conditions.selectFieldFirst": "请先选择字段",
-  "conditions.selectTime": "选择时间...",
   "conditions.selectValue": "选择值",
   "conditions.title": "判定条件",
   "conditions.valuePlaceholder": "输入值",
@@ -53,12 +50,9 @@
   "metrics.addCustom": "添加自定义指标",
   "metrics.addNode": "添加节点",
   "metrics.added": "已添加",
-  "metrics.custom.addMapping": "添加映射",
   "metrics.custom.description": "选择评测工作流并完成变量映射后即可运行测试。",
   "metrics.custom.mappingTitle": "变量映射",
   "metrics.custom.mappingWarning": "请先完成工作流选择和所有变量映射，再运行批量测试。",
-  "metrics.custom.sourcePlaceholder": "源变量",
-  "metrics.custom.targetPlaceholder": "目标变量",
   "metrics.custom.title": "自定义评测器",
   "metrics.custom.warningBadge": "待配置",
   "metrics.custom.workflowLabel": "评测工作流",

From 531637277291b5791f4bd0f15415ca9e7dfe0df6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 20:18:25 +0800
Subject: [PATCH 072/108] feat(web): judgement condition

---
 .../evaluation/__tests__/index.spec.tsx       |  24 +-
 .../evaluation/__tests__/store.spec.ts        | 106 ++++---
 .../conditions-section/condition-group.tsx    | 224 +++++++-------
 .../components/conditions-section/index.tsx   |  18 +-
 .../__tests__/index.spec.tsx                  |   2 +
 .../components/custom-metric-editor/index.tsx |  18 ++
 .../components/metric-selector/utils.ts       |   1 +
 web/app/components/evaluation/mock.ts         |  24 +-
 web/app/components/evaluation/store-utils.ts  | 281 ++++++++++++------
 web/app/components/evaluation/store.ts        | 241 ++++++++-------
 web/app/components/evaluation/types.ts        |  54 +++-
 web/app/components/evaluation/utils.ts        | 117 ++++++--
 web/i18n/en-US/evaluation.json                |   4 +-
 web/i18n/zh-Hans/evaluation.json              |   4 +-
 web/types/evaluation.ts                       |  18 +-
 15 files changed, 693 insertions(+), 443 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 6257d38f77..c0e85f6e79 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -1,6 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import Evaluation from '..'
-import { getEvaluationMockConfig } from '../mock'
 import { useEvaluationStore } from '../store'
 
 const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
@@ -121,22 +120,19 @@ describe('Evaluation', () => {
     const resourceType = 'apps'
     const resourceId = 'app-2'
     const store = useEvaluationStore.getState()
-    const config = getEvaluationMockConfig(resourceType)
-
-    const stringField = config.fieldOptions.find(field => field.type === 'string')!
-    let groupId = ''
-    let itemId = ''
+    let conditionId = ''
 
     act(() => {
       store.ensureResource(resourceType, resourceId)
       store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+      store.addBuiltinMetric(resourceType, resourceId, 'faithfulness', [
+        { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+      ])
+      store.addCondition(resourceType, resourceId)
 
-      const group = useEvaluationStore.getState().resources['apps:app-2'].conditions[0]
-      groupId = group.id
-      itemId = group.items[0].id
-
-      store.updateConditionField(resourceType, resourceId, groupId, itemId, stringField.id)
-      store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'contains')
+      const condition = useEvaluationStore.getState().resources['apps:app-2'].conditions.conditions[0]
+      conditionId = condition.id
+      store.updateConditionOperator(resourceType, resourceId, conditionId, '=')
     })
 
     let rerender: ReturnType<typeof render>['rerender']
@@ -147,7 +143,7 @@ describe('Evaluation', () => {
     expect(screen.getByPlaceholderText('evaluation.conditions.valuePlaceholder')).toBeInTheDocument()
 
     act(() => {
-      store.updateConditionOperator(resourceType, resourceId, groupId, itemId, 'is_empty')
+      store.updateConditionOperator(resourceType, resourceId, conditionId, 'is null')
       rerender(<Evaluation resourceType={resourceType} resourceId={resourceId} />)
     })
 
@@ -249,7 +245,7 @@ describe('Evaluation', () => {
           metric: 'context-precision',
         }],
         customized_metrics: null,
-        judgement_conditions: null,
+        judgment_config: null,
       },
     })
 
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index ce85c32e65..a8dd8c188a 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -31,6 +31,11 @@ describe('evaluation store', () => {
       workflowName: config.workflowOptions[0].label,
     })
     store.syncCustomMetricMappings(resourceType, resourceId, initialMetric!.id, ['query'])
+    store.syncCustomMetricOutputs(resourceType, resourceId, initialMetric!.id, [{
+      id: 'score',
+      valueType: 'number',
+    }])
+
     const syncedMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
     store.updateCustomMetricMapping(resourceType, resourceId, initialMetric!.id, syncedMetric!.customConfig!.mappings[0].id, {
       outputVariableId: 'answer',
@@ -40,6 +45,7 @@ describe('evaluation store', () => {
     expect(isCustomMetricConfigured(configuredMetric!)).toBe(true)
     expect(configuredMetric!.customConfig!.workflowAppId).toBe('custom-workflow-app-id')
     expect(configuredMetric!.customConfig!.workflowName).toBe(config.workflowOptions[0].label)
+    expect(configuredMetric!.customConfig!.outputs).toEqual([{ id: 'score', valueType: 'number' }])
   })
 
   it('should only add one custom metric', () => {
@@ -77,7 +83,7 @@ describe('evaluation store', () => {
     expect(useEvaluationStore.getState().resources['apps:app-2'].metrics.some(metric => metric.id === addedMetric!.id)).toBe(false)
   })
 
-  it('should upsert builtin metric node selections', () => {
+  it('should upsert builtin metric node selections and prune stale conditions', () => {
     const resourceType = 'apps'
     const resourceId = 'app-4'
     const store = useEvaluationStore.getState()
@@ -88,63 +94,78 @@ describe('evaluation store', () => {
     store.addBuiltinMetric(resourceType, resourceId, metricId, [
       { node_id: 'node-1', title: 'Answer Node', type: 'answer' },
     ])
+    store.addCondition(resourceType, resourceId)
 
     store.addBuiltinMetric(resourceType, resourceId, metricId, [
       { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
     ])
 
-    const metric = useEvaluationStore.getState().resources['apps:app-4'].metrics.find(item => item.optionId === metricId)
+    const state = useEvaluationStore.getState().resources['apps:app-4']
+    const metric = state.metrics.find(item => item.optionId === metricId)
 
     expect(metric?.nodeInfoList).toEqual([
       { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
     ])
-    expect(useEvaluationStore.getState().resources['apps:app-4'].metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
+    expect(state.metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
+    expect(state.conditions.conditions).toHaveLength(0)
   })
 
-  it('should update condition groups and adapt operators to field types', () => {
-    const resourceType = 'datasets'
-    const resourceId = 'dataset-1'
+  it('should build numeric conditions from selected metrics', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-conditions'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
 
     store.ensureResource(resourceType, resourceId)
+    store.addBuiltinMetric(resourceType, resourceId, config.builtinMetrics[0].id, [
+      { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+    ])
+    store.setConditionLogicalOperator(resourceType, resourceId, 'or')
+    store.addCondition(resourceType, resourceId)
 
-    const initialGroup = useEvaluationStore.getState().resources['datasets:dataset-1'].conditions[0]
-    store.setConditionGroupOperator(resourceType, resourceId, initialGroup.id, 'or')
-    store.addConditionGroup(resourceType, resourceId)
+    const state = useEvaluationStore.getState().resources['apps:app-conditions']
+    const condition = state.conditions.conditions[0]
 
-    const booleanField = config.fieldOptions.find(field => field.type === 'boolean')!
-    const currentItem = useEvaluationStore.getState().resources['datasets:dataset-1'].conditions[0].items[0]
-    store.updateConditionField(resourceType, resourceId, initialGroup.id, currentItem.id, booleanField.id)
-
-    const updatedGroup = useEvaluationStore.getState().resources['datasets:dataset-1'].conditions[0]
-    expect(updatedGroup.logicalOperator).toBe('or')
-    expect(updatedGroup.items[0].operator).toBe('is')
-    expect(getAllowedOperators(resourceType, booleanField.id)).toEqual(['is', 'is_not'])
+    expect(state.conditions.logicalOperator).toBe('or')
+    expect(condition.variableSelector).toEqual(['node-answer', 'answer-correctness'])
+    expect(condition.comparisonOperator).toBe('=')
+    expect(getAllowedOperators(state.metrics, condition.variableSelector)).toEqual(['=', '≠', '>', '<', '≥', '≤', 'is null', 'is not null'])
   })
 
-  it('should clear values for empty operators', () => {
+  it('should clear values for operators without values', () => {
     const resourceType = 'apps'
     const resourceId = 'app-3'
     const store = useEvaluationStore.getState()
     const config = getEvaluationMockConfig(resourceType)
 
     store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
 
-    const stringField = config.fieldOptions.find(field => field.type === 'string')!
-    const item = useEvaluationStore.getState().resources['apps:app-3'].conditions[0].items[0]
+    const customMetric = useEvaluationStore.getState().resources['apps:app-3'].metrics.find(metric => metric.kind === 'custom-workflow')!
+    store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+      workflowId: config.workflowOptions[0].id,
+      workflowAppId: 'custom-workflow-app-id',
+      workflowName: config.workflowOptions[0].label,
+    })
+    store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+      id: 'reason',
+      valueType: 'string',
+    }])
+    store.addCondition(resourceType, resourceId)
 
-    store.updateConditionField(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, stringField.id)
-    store.updateConditionOperator(resourceType, resourceId, useEvaluationStore.getState().resources['apps:app-3'].conditions[0].id, item.id, 'is_empty')
+    const condition = useEvaluationStore.getState().resources['apps:app-3'].conditions.conditions[0]
 
-    const updatedItem = useEvaluationStore.getState().resources['apps:app-3'].conditions[0].items[0]
+    store.updateConditionMetric(resourceType, resourceId, condition.id, [config.workflowOptions[0].id, 'reason'])
+    store.updateConditionValue(resourceType, resourceId, condition.id, 'needs follow-up')
+    store.updateConditionOperator(resourceType, resourceId, condition.id, 'empty')
 
-    expect(getAllowedOperators(resourceType, stringField.id)).toEqual(['contains', 'not_contains', 'is', 'is_not', 'is_empty', 'is_not_empty'])
-    expect(requiresConditionValue('is_empty')).toBe(false)
-    expect(updatedItem.value).toBeNull()
+    const updatedCondition = useEvaluationStore.getState().resources['apps:app-3'].conditions.conditions[0]
+
+    expect(requiresConditionValue('empty')).toBe(false)
+    expect(updatedCondition.value).toBeNull()
   })
 
-  it('should hydrate resource state from evaluation config', () => {
+  it('should hydrate resource state from judgment_config', () => {
     const resourceType = 'apps'
     const resourceId = 'app-5'
     const store = useEvaluationStore.getState()
@@ -162,15 +183,19 @@ describe('evaluation store', () => {
         input_fields: {
           query: 'answer',
         },
-      },
-      judgement_conditions: [{
-        logical_operator: 'or',
-        items: [{
-          field_id: 'system.has_context',
-          operator: 'is',
-          value: true,
+        output_fields: [{
+          variable: 'reason',
+          value_type: 'string',
         }],
-      }],
+      },
+      judgment_config: {
+        logical_operator: 'or',
+        conditions: [{
+          variable_selector: ['node-1', 'faithfulness'],
+          comparison_operator: '≥',
+          value: '0.9',
+        }],
+      },
     }
 
     store.ensureResource(resourceType, resourceId)
@@ -206,11 +231,12 @@ describe('evaluation store', () => {
     expect(hydratedState.metrics[1].customConfig?.workflowId).toBe('workflow-precision-review')
     expect(hydratedState.metrics[1].customConfig?.mappings[0].inputVariableId).toBe('query')
     expect(hydratedState.metrics[1].customConfig?.mappings[0].outputVariableId).toBe('answer')
-    expect(hydratedState.conditions[0].logicalOperator).toBe('or')
-    expect(hydratedState.conditions[0].items[0]).toMatchObject({
-      fieldId: 'system.has_context',
-      operator: 'is',
-      value: true,
+    expect(hydratedState.metrics[1].customConfig?.outputs).toEqual([{ id: 'reason', valueType: 'string' }])
+    expect(hydratedState.conditions.logicalOperator).toBe('or')
+    expect(hydratedState.conditions.conditions[0]).toMatchObject({
+      variableSelector: ['node-1', 'faithfulness'],
+      comparisonOperator: '≥',
+      value: '0.9',
     })
     expect(hydratedState.activeBatchTab).toBe('history')
     expect(hydratedState.uploadedFileName).toBe('batch.csv')
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 902194c460..c71aee5025 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -2,12 +2,12 @@
 
 import type {
   ComparisonOperator,
-  EvaluationFieldOption,
+  ConditionMetricOption,
   EvaluationResourceProps,
-  JudgmentConditionGroup,
+  JudgmentConditionItem,
 } from '../../types'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import {
@@ -20,79 +20,103 @@ import {
   SelectValue,
 } from '@/app/components/base/ui/select'
 import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../../mock'
-import { getAllowedOperators, requiresConditionValue, useEvaluationStore } from '../../store'
-import { getFieldTypeIconClassName, getOperatorLabel, groupFieldOptions } from '../../utils'
+import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
+import {
+  buildConditionMetricOptions,
+  getComparisonOperatorLabel,
+  isSelectorEqual,
+  serializeVariableSelector,
+} from '../../utils'
 
-type ConditionFieldLabelProps = {
-  field?: EvaluationFieldOption
+type ConditionMetricLabelProps = {
+  metric?: ConditionMetricOption
   placeholder: string
 }
 
-type ConditionFieldSelectProps = {
-  field?: EvaluationFieldOption
-  fieldOptions: EvaluationFieldOption[]
+type ConditionMetricSelectProps = {
+  metric?: ConditionMetricOption
+  metricOptions: ConditionMetricOption[]
   placeholder: string
-  onChange: (fieldId: string) => void
+  onChange: (variableSelector: [string, string]) => void
 }
 
 type ConditionOperatorSelectProps = {
-  field?: EvaluationFieldOption
   operator: ComparisonOperator
   operators: ComparisonOperator[]
   onChange: (operator: ComparisonOperator) => void
 }
 
-type FieldValueInputProps = {
-  field?: EvaluationFieldOption
-  operator: ComparisonOperator
-  value: string | number | boolean | null
-  onChange: (value: string | number | boolean | null) => void
+type ConditionValueInputProps = {
+  metric?: ConditionMetricOption
+  condition: JudgmentConditionItem
+  onChange: (value: string | string[] | boolean | null) => void
 }
 
-type ConditionGroupProps = EvaluationResourceProps & {
-  group: JudgmentConditionGroup
-  index: number
+type ConditionGroupProps = EvaluationResourceProps
+
+const getMetricValueTypeIconClassName = (valueType: ConditionMetricOption['valueType']) => {
+  if (valueType === 'number')
+    return 'i-ri-hashtag'
+
+  if (valueType === 'boolean')
+    return 'i-ri-checkbox-circle-line'
+
+  return 'i-ri-bar-chart-box-line'
 }
 
-const ConditionFieldLabel = ({
-  field,
+const ConditionMetricLabel = ({
+  metric,
   placeholder,
-}: ConditionFieldLabelProps) => {
-  if (!field)
+}: ConditionMetricLabelProps) => {
+  if (!metric)
     return <span className="px-1 system-sm-regular text-components-input-text-placeholder">{placeholder}</span>
 
   return (
     <div className="flex min-w-0 items-center gap-2 px-1">
       <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
-        <span className={cn(getFieldTypeIconClassName(field.type), 'h-3 w-3 shrink-0 text-text-secondary')} />
-        <span className="truncate system-xs-medium text-text-secondary">{field.label}</span>
+        <span className={cn(getMetricValueTypeIconClassName(metric.valueType), 'h-3 w-3 shrink-0 text-text-secondary')} />
+        <span className="truncate system-xs-medium text-text-secondary">{metric.label}</span>
       </div>
-      <span className="shrink-0 system-xs-regular text-text-tertiary">{field.type}</span>
+      <span className="shrink-0 system-xs-regular text-text-tertiary">{metric.group}</span>
     </div>
   )
 }
 
-const ConditionFieldSelect = ({
-  field,
-  fieldOptions,
+const ConditionMetricSelect = ({
+  metric,
+  metricOptions,
   placeholder,
   onChange,
-}: ConditionFieldSelectProps) => {
+}: ConditionMetricSelectProps) => {
+  const groupedMetricOptions = useMemo(() => {
+    return Object.entries(metricOptions.reduce<Record<string, ConditionMetricOption[]>>((acc, option) => {
+      acc[option.group] = [...(acc[option.group] ?? []), option]
+      return acc
+    }, {}))
+  }, [metricOptions])
+
   return (
-    <Select value={field?.id ?? ''} onValueChange={value => value && onChange(value)}>
+    <Select
+      value={serializeVariableSelector(metric?.variableSelector)}
+      onValueChange={(value) => {
+        const nextMetric = metricOptions.find(option => serializeVariableSelector(option.variableSelector) === value)
+        if (nextMetric)
+          onChange(nextMetric.variableSelector)
+      }}
+    >
       <SelectTrigger className="h-auto bg-transparent px-1 py-1 hover:bg-transparent focus-visible:bg-transparent">
-        <ConditionFieldLabel field={field} placeholder={placeholder} />
+        <ConditionMetricLabel metric={metric} placeholder={placeholder} />
       </SelectTrigger>
-      <SelectContent popupClassName="w-[320px]">
-        {groupFieldOptions(fieldOptions).map(([groupName, fields]) => (
+      <SelectContent popupClassName="w-[360px]">
+        {groupedMetricOptions.map(([groupName, options]) => (
           <SelectGroup key={groupName}>
             <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{groupName}</SelectGroupLabel>
-            {fields.map(option => (
-              <SelectItem key={option.id} value={option.id}>
+            {options.map(option => (
+              <SelectItem key={option.id} value={serializeVariableSelector(option.variableSelector)}>
                 <div className="flex min-w-0 items-center gap-2">
-                  <span className={cn(getFieldTypeIconClassName(option.type), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
+                  <span className={cn(getMetricValueTypeIconClassName(option.valueType), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
                   <span className="truncate">{option.label}</span>
+                  <span className="shrink-0 text-text-quaternary">{option.description}</span>
                 </div>
               </SelectItem>
             ))}
@@ -104,22 +128,21 @@ const ConditionFieldSelect = ({
 }
 
 const ConditionOperatorSelect = ({
-  field,
   operator,
   operators,
   onChange,
 }: ConditionOperatorSelectProps) => {
-  const { t } = useTranslation('evaluation')
+  const { t } = useTranslation()
 
   return (
     <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
       <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-        <span className="truncate system-xs-medium text-text-secondary">{getOperatorLabel(operator, field?.type, t)}</span>
+        <span className="truncate system-xs-medium text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
       </SelectTrigger>
       <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
         {operators.map(nextOperator => (
           <SelectItem key={nextOperator} value={nextOperator}>
-            {getOperatorLabel(nextOperator, field?.type, t)}
+            {getComparisonOperatorLabel(nextOperator, t)}
           </SelectItem>
         ))}
       </SelectContent>
@@ -127,21 +150,20 @@ const ConditionOperatorSelect = ({
   )
 }
 
-const FieldValueInput = ({
-  field,
-  operator,
-  value,
+const ConditionValueInput = ({
+  metric,
+  condition,
   onChange,
-}: FieldValueInputProps) => {
+}: ConditionValueInputProps) => {
   const { t } = useTranslation('evaluation')
 
-  if (!field || !requiresConditionValue(operator))
+  if (!metric || !requiresConditionValue(condition.comparisonOperator))
     return null
 
-  if (field.type === 'boolean') {
+  if (metric.valueType === 'boolean') {
     return (
       <div className="px-2 py-1.5">
-        <Select value={value === null ? '' : String(value)} onValueChange={nextValue => onChange(nextValue === 'true')}>
+        <Select value={condition.value === null ? '' : String(condition.value)} onValueChange={nextValue => onChange(nextValue === 'true')}>
           <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
             <SelectValue placeholder={t('conditions.selectValue')} />
           </SelectTrigger>
@@ -154,38 +176,27 @@ const FieldValueInput = ({
     )
   }
 
-  if (field.type === 'enum') {
-    return (
-      <div className="px-2 py-1.5">
-        <Select value={typeof value === 'string' ? value : ''} onValueChange={nextValue => onChange(nextValue)}>
-          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-            <SelectValue placeholder={t('conditions.selectValue')} />
-          </SelectTrigger>
-          <SelectContent>
-            {(field.options ?? []).map(option => (
-              <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    )
-  }
+  const isMultiValue = condition.comparisonOperator === 'in' || condition.comparisonOperator === 'not in'
+  const inputValue = Array.isArray(condition.value)
+    ? condition.value.join(', ')
+    : typeof condition.value === 'boolean'
+      ? ''
+      : condition.value ?? ''
 
   return (
     <div className="px-2 py-1.5">
       <Input
-        type={field.type === 'number' ? 'number' : 'text'}
-        value={value === null || typeof value === 'boolean' ? '' : value}
+        type={metric.valueType === 'number' && !isMultiValue ? 'number' : 'text'}
+        value={inputValue}
         className="border-none bg-transparent shadow-none hover:border-none hover:bg-state-base-hover-alt focus:border-none focus:bg-state-base-hover-alt focus:shadow-none"
         placeholder={t('conditions.valuePlaceholder')}
         onChange={(e) => {
-          if (field.type === 'number') {
-            const nextValue = e.target.value
-            onChange(nextValue === '' ? null : Number(nextValue))
+          if (isMultiValue) {
+            onChange(e.target.value.split(',').map(item => item.trim()).filter(Boolean))
             return
           }
 
-          onChange(e.target.value)
+          onChange(e.target.value === '' ? null : e.target.value)
         }}
       />
     </div>
@@ -195,20 +206,17 @@ const FieldValueInput = ({
 const ConditionGroup = ({
   resourceType,
   resourceId,
-  group,
-  index,
 }: ConditionGroupProps) => {
   const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const metricOptions = useMemo(() => buildConditionMetricOptions(resource.metrics), [resource.metrics])
   const logicalLabels = {
     and: t('conditions.logical.and'),
     or: t('conditions.logical.or'),
   }
-  const removeConditionGroup = useEvaluationStore(state => state.removeConditionGroup)
-  const setConditionGroupOperator = useEvaluationStore(state => state.setConditionGroupOperator)
-  const addConditionItem = useEvaluationStore(state => state.addConditionItem)
-  const removeConditionItem = useEvaluationStore(state => state.removeConditionItem)
-  const updateConditionField = useEvaluationStore(state => state.updateConditionField)
+  const setConditionLogicalOperator = useEvaluationStore(state => state.setConditionLogicalOperator)
+  const removeCondition = useEvaluationStore(state => state.removeCondition)
+  const updateConditionMetric = useEvaluationStore(state => state.updateConditionMetric)
   const updateConditionOperator = useEvaluationStore(state => state.updateConditionOperator)
   const updateConditionValue = useEvaluationStore(state => state.updateConditionValue)
 
@@ -216,7 +224,6 @@ const ConditionGroup = ({
     <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
       <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
         <div className="flex items-center gap-2">
-          <Badge>{t('conditions.groupLabel', { index: index + 1 })}</Badge>
           <div className="flex rounded-lg border border-divider-subtle bg-background-default-subtle p-1">
             {(['and', 'or'] as const).map(operator => (
               <button
@@ -224,65 +231,50 @@ const ConditionGroup = ({
                 type="button"
                 className={cn(
                   'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
-                  group.logicalOperator === operator
+                  resource.conditions.logicalOperator === operator
                     ? 'bg-components-card-bg text-text-primary shadow-xs'
                     : 'text-text-tertiary',
                 )}
-                onClick={() => setConditionGroupOperator(resourceType, resourceId, group.id, operator)}
+                onClick={() => setConditionLogicalOperator(resourceType, resourceId, operator)}
               >
                 {logicalLabels[operator]}
               </button>
             ))}
           </div>
         </div>
-        <div className="flex items-center gap-2">
-          <Button size="small" variant="ghost" onClick={() => addConditionItem(resourceType, resourceId, group.id)}>
-            <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
-            {t('conditions.addCondition')}
-          </Button>
-          <Button
-            size="small"
-            variant="ghost"
-            aria-label={t('conditions.removeGroup')}
-            onClick={() => removeConditionGroup(resourceType, resourceId, group.id)}
-          >
-            <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
-          </Button>
-        </div>
       </div>
+
       <div className="space-y-3">
-        {group.items.map((item) => {
-          const field = config.fieldOptions.find(option => option.id === item.fieldId)
-          const allowedOperators = getAllowedOperators(resourceType, item.fieldId)
-          const showValue = !!field && requiresConditionValue(item.operator)
+        {resource.conditions.conditions.map((condition) => {
+          const metric = metricOptions.find(option => isSelectorEqual(option.variableSelector, condition.variableSelector))
+          const allowedOperators = getAllowedOperators(resource.metrics, condition.variableSelector)
+          const showValue = !!metric && requiresConditionValue(condition.comparisonOperator)
 
           return (
-            <div key={item.id} className="flex items-start overflow-hidden rounded-lg">
+            <div key={condition.id} className="flex items-start overflow-hidden rounded-lg">
               <div className="min-w-0 flex-1 rounded-lg bg-components-input-bg-normal">
                 <div className="flex items-center gap-0 pr-1">
                   <div className="min-w-0 flex-1 py-1">
-                    <ConditionFieldSelect
-                      field={field}
-                      fieldOptions={config.fieldOptions}
+                    <ConditionMetricSelect
+                      metric={metric}
+                      metricOptions={metricOptions}
                       placeholder={t('conditions.fieldPlaceholder')}
-                      onChange={value => updateConditionField(resourceType, resourceId, group.id, item.id, value)}
+                      onChange={value => updateConditionMetric(resourceType, resourceId, condition.id, value)}
                     />
                   </div>
                   <div className="h-3 w-px bg-divider-regular" />
                   <ConditionOperatorSelect
-                    field={field}
-                    operator={item.operator}
+                    operator={condition.comparisonOperator}
                     operators={allowedOperators}
-                    onChange={value => updateConditionOperator(resourceType, resourceId, group.id, item.id, value)}
+                    onChange={value => updateConditionOperator(resourceType, resourceId, condition.id, value)}
                   />
                 </div>
                 {showValue && (
                   <div className="border-t border-divider-subtle">
-                    <FieldValueInput
-                      field={field}
-                      operator={item.operator}
-                      value={item.value}
-                      onChange={value => updateConditionValue(resourceType, resourceId, group.id, item.id, value)}
+                    <ConditionValueInput
+                      metric={metric}
+                      condition={condition}
+                      onChange={value => updateConditionValue(resourceType, resourceId, condition.id, value)}
                     />
                   </div>
                 )}
@@ -292,7 +284,7 @@ const ConditionGroup = ({
                   size="small"
                   variant="ghost"
                   aria-label={t('conditions.removeCondition')}
-                  onClick={() => removeConditionItem(resourceType, resourceId, group.id, item.id)}
+                  onClick={() => removeCondition(resourceType, resourceId, condition.id)}
                 >
                   <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
                 </Button>
diff --git a/web/app/components/evaluation/components/conditions-section/index.tsx b/web/app/components/evaluation/components/conditions-section/index.tsx
index db376a0610..383d0aad8b 100644
--- a/web/app/components/evaluation/components/conditions-section/index.tsx
+++ b/web/app/components/evaluation/components/conditions-section/index.tsx
@@ -1,9 +1,11 @@
 'use client'
 
 import type { EvaluationResourceProps } from '../../types'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
+import { buildConditionMetricOptions } from '../../utils'
 import { InlineSectionHeader } from '../section-header'
 import ConditionGroup from './condition-group'
 
@@ -13,8 +15,9 @@ const ConditionsSection = ({
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
   const resource = useEvaluationResource(resourceType, resourceId)
-  const addConditionGroup = useEvaluationStore(state => state.addConditionGroup)
-  const canAddCondition = resource.metrics.length > 0
+  const addCondition = useEvaluationStore(state => state.addCondition)
+  const conditionMetricOptions = useMemo(() => buildConditionMetricOptions(resource.metrics), [resource.metrics])
+  const canAddCondition = conditionMetricOptions.length > 0
 
   return (
     <section className="max-w-[700px] py-4">
@@ -23,20 +26,17 @@ const ConditionsSection = ({
         tooltip={t('conditions.description')}
       />
       <div className="mt-2 space-y-4">
-        {resource.conditions.length === 0 && (
+        {resource.conditions.conditions.length === 0 && (
           <div className="rounded-xl bg-background-section px-3 py-3 system-xs-regular text-text-tertiary">
             {t('conditions.emptyDescription')}
           </div>
         )}
-        {resource.conditions.map((group, index) => (
+        {resource.conditions.conditions.length > 0 && (
           <ConditionGroup
-            key={group.id}
             resourceType={resourceType}
             resourceId={resourceId}
-            group={group}
-            index={index}
           />
-        ))}
+        )}
         <button
           type="button"
           className={cn(
@@ -44,7 +44,7 @@ const ConditionsSection = ({
             !canAddCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
           )}
           disabled={!canAddCondition}
-          onClick={() => addConditionGroup(resourceType, resourceId)}
+          onClick={() => addCondition(resourceType, resourceId)}
         >
           <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
           {t('conditions.addCondition')}
diff --git a/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
index 668447592c..5f2c026908 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
@@ -156,6 +156,7 @@ const createMetric = (): EvaluationMetric => ({
   kind: 'custom-workflow',
   label: 'Custom Evaluator',
   description: 'Map workflow variables to your evaluation inputs.',
+  valueType: 'number',
   customConfig: {
     workflowId: 'workflow-1',
     workflowAppId: 'workflow-app-1',
@@ -169,6 +170,7 @@ const createMetric = (): EvaluationMetric => ({
       inputVariableId: 'retrieved_context',
       outputVariableId: 'current-node.score',
     }],
+    outputs: [],
   },
 })
 
diff --git a/web/app/components/evaluation/components/custom-metric-editor/index.tsx b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
index 5235c06163..694e48d310 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/index.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
@@ -73,6 +73,7 @@ const CustomMetricEditorCard = ({
   const { t } = useTranslation('evaluation')
   const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
   const syncCustomMetricMappings = useEvaluationStore(state => state.syncCustomMetricMappings)
+  const syncCustomMetricOutputs = useEvaluationStore(state => state.syncCustomMetricOutputs)
   const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
   const { data: selectedWorkflow } = useAppWorkflow(metric.customConfig?.workflowAppId ?? '')
   const { data: currentAppWorkflow } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
@@ -126,6 +127,23 @@ const CustomMetricEditorCard = ({
     syncCustomMetricMappings(resourceType, resourceId, metric.id, inputVariableIds)
   }, [inputVariableIds, metric.customConfig?.mappings, metric.customConfig?.workflowId, metric.id, resourceId, resourceType, syncCustomMetricMappings])
 
+  useEffect(() => {
+    if (!metric.customConfig?.workflowId)
+      return
+
+    const currentOutputs = metric.customConfig.outputs
+    if (
+      currentOutputs.length === workflowOutputs.length
+      && currentOutputs.every((output, index) =>
+        output.id === workflowOutputs[index]?.id && output.valueType === workflowOutputs[index]?.valueType,
+      )
+    ) {
+      return
+    }
+
+    syncCustomMetricOutputs(resourceType, resourceId, metric.id, workflowOutputs)
+  }, [metric.customConfig?.outputs, metric.customConfig?.workflowId, metric.id, resourceId, resourceType, syncCustomMetricOutputs, workflowOutputs])
+
   if (!metric.customConfig)
     return null
 
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index 5ab3f03129..274737127e 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -18,6 +18,7 @@ export const buildMetricOption = (metricId: string): MetricOption => ({
   id: metricId,
   label: humanizeMetricId(metricId),
   description: '',
+  valueType: 'number',
 })
 
 export const getMetricVisual = (metricId: string): { icon: string, tone: MetricVisualTone } => {
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
index d554c14fe0..9425672b93 100644
--- a/web/app/components/evaluation/mock.ts
+++ b/web/app/components/evaluation/mock.ts
@@ -1,5 +1,4 @@
 import type {
-  ComparisonOperator,
   EvaluationFieldOption,
   EvaluationMockConfig,
   EvaluationResourceType,
@@ -29,31 +28,37 @@ const builtinMetrics: MetricOption[] = [
     id: 'answer-correctness',
     label: 'Answer Correctness',
     description: 'Compares the response with the expected answer and scores factual alignment.',
+    valueType: 'number',
   },
   {
     id: 'faithfulness',
     label: 'Faithfulness',
     description: 'Checks whether the answer stays grounded in the retrieved evidence.',
+    valueType: 'number',
   },
   {
     id: 'relevance',
     label: 'Relevance',
     description: 'Evaluates how directly the answer addresses the original request.',
+    valueType: 'number',
   },
   {
     id: 'latency',
     label: 'Latency',
     description: 'Captures runtime responsiveness for the full execution path.',
+    valueType: 'number',
   },
   {
     id: 'token-usage',
     label: 'Token Usage',
     description: 'Tracks prompt and completion token consumption for the run.',
+    valueType: 'number',
   },
   {
     id: 'tool-success-rate',
     label: 'Tool Success Rate',
     description: 'Measures whether each required tool invocation finishes without failure.',
+    valueType: 'number',
   },
 ]
 
@@ -62,16 +67,19 @@ const pipelineBuiltinMetrics: MetricOption[] = [
     id: 'context-precision',
     label: 'Context Precision',
     description: 'Measures whether retrieved chunks stay tightly aligned to the request.',
+    valueType: 'number',
   },
   {
     id: 'context-recall',
     label: 'Context Recall',
     description: 'Checks whether the retrieval result includes the evidence needed to answer.',
+    valueType: 'number',
   },
   {
     id: 'context-relevance',
     label: 'Context Relevance',
     description: 'Scores how useful the retrieved context is for downstream generation.',
+    valueType: 'number',
   },
 ]
 
@@ -121,20 +129,6 @@ const snippetFields: EvaluationFieldOption[] = [
   { id: 'system.requires_review', label: 'Requires Review', group: 'System', type: 'boolean' },
 ]
 
-export const getComparisonOperators = (fieldType: EvaluationFieldOption['type']): ComparisonOperator[] => {
-  if (fieldType === 'number')
-    return ['is', 'is_not', 'greater_than', 'less_than', 'greater_or_equal', 'less_or_equal', 'is_empty', 'is_not_empty']
-
-  if (fieldType === 'boolean' || fieldType === 'enum')
-    return ['is', 'is_not']
-
-  return ['contains', 'not_contains', 'is', 'is_not', 'is_empty', 'is_not_empty']
-}
-
-export const getDefaultOperator = (fieldType: EvaluationFieldOption['type']): ComparisonOperator => {
-  return getComparisonOperators(fieldType)[0]
-}
-
 export const getEvaluationMockConfig = (resourceType: EvaluationResourceType): EvaluationMockConfig => {
   if (resourceType === 'datasets') {
     return {
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 13efc6c66a..98c0d6a368 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -2,24 +2,30 @@ import type {
   BatchTestRecord,
   ComparisonOperator,
   CustomMetricMapping,
-  EvaluationFieldOption,
   EvaluationMetric,
   EvaluationResourceState,
   EvaluationResourceType,
-  JudgmentConditionGroup,
+  JudgmentConditionItem,
+  JudgmentConfig,
   MetricOption,
 } from './types'
 import type {
-  EvaluationConditionValue,
   EvaluationConfig,
   EvaluationCustomizedMetric,
   EvaluationDefaultMetric,
-  EvaluationJudgementConditionGroup,
-  EvaluationJudgementConditionItem,
+  EvaluationJudgmentCondition,
+  EvaluationJudgmentConditionValue,
+  EvaluationJudgmentConfig,
   NodeInfo,
 } from '@/types/evaluation'
-import { getComparisonOperators, getDefaultOperator, getEvaluationMockConfig } from './mock'
-import { encodeModelSelection } from './utils'
+import { getEvaluationMockConfig } from './mock'
+import {
+  buildConditionMetricOptions,
+  encodeModelSelection,
+  getComparisonOperators,
+  getDefaultComparisonOperator,
+  requiresComparisonValue,
+} from './utils'
 
 type EvaluationStoreResources = Record<string, EvaluationResourceState>
 
@@ -41,6 +47,7 @@ const resolveMetricOption = (resourceType: EvaluationResourceType, metricId: str
     id: metricId,
     label: humanizeMetricId(metricId),
     description: '',
+    valueType: 'number',
   }
 }
 
@@ -91,14 +98,32 @@ const normalizeCustomMetricMappings = (
   if (!value)
     return []
 
-  const mappings = Object.entries(value)
+  return Object.entries(value)
     .filter((entry): entry is [string, string] => {
       const [, outputVariableId] = entry
       return typeof outputVariableId === 'string' && !!outputVariableId
     })
     .map(([inputVariableId, outputVariableId]) => createCustomMetricMapping(inputVariableId, outputVariableId))
+}
 
-  return mappings
+const normalizeCustomMetricOutputs = (
+  value: EvaluationCustomizedMetric['output_fields'],
+) => {
+  if (!value)
+    return []
+
+  return value
+    .map((output) => {
+      const id = typeof output.variable === 'string' ? output.variable : ''
+      if (!id)
+        return null
+
+      return {
+        id,
+        valueType: typeof output.value_type === 'string' ? output.value_type : null,
+      }
+    })
+    .filter((output): output is { id: string, valueType: string | null } => !!output)
 }
 
 const normalizeCustomMetric = (
@@ -120,92 +145,137 @@ const normalizeCustomMetric = (
           ...customMetric.customConfig,
           workflowId,
           mappings: normalizeCustomMetricMappings(value.input_fields),
+          outputs: normalizeCustomMetricOutputs(value.output_fields),
         }
       : customMetric.customConfig,
   }]
 }
 
+const normalizeVariableSelector = (value: string[] | undefined): [string, string] | null => {
+  if (!Array.isArray(value) || value.length < 2)
+    return null
+
+  const [scope, metricName] = value
+  return typeof scope === 'string' && !!scope && typeof metricName === 'string' && !!metricName
+    ? [scope, metricName]
+    : null
+}
+
+const getNormalizedConditionValue = (
+  operator: ComparisonOperator,
+  previousValue: EvaluationJudgmentConditionValue | string | number | boolean | null | undefined,
+) => {
+  if (!requiresComparisonValue(operator))
+    return null
+
+  if (Array.isArray(previousValue))
+    return previousValue.filter((item): item is string => typeof item === 'string' && !!item)
+
+  if (typeof previousValue === 'boolean')
+    return previousValue
+
+  if (typeof previousValue === 'number')
+    return String(previousValue)
+
+  return typeof previousValue === 'string' ? previousValue : null
+}
+
+const getRawJudgmentConfig = (config: EvaluationConfig): EvaluationJudgmentConfig | null | undefined => {
+  if (config.judgment_config)
+    return config.judgment_config
+
+  if (
+    config.judgement_conditions
+    && !Array.isArray(config.judgement_conditions)
+    && 'conditions' in config.judgement_conditions
+  ) {
+    return config.judgement_conditions as EvaluationJudgmentConfig
+  }
+
+  return null
+}
+
 const normalizeConditionItem = (
-  resourceType: EvaluationResourceType,
-  value: EvaluationJudgementConditionItem,
-): JudgmentConditionGroup['items'][number] => {
-  const fieldId = typeof value.fieldId === 'string'
-    ? value.fieldId
-    : typeof value.field_id === 'string'
-      ? value.field_id
-      : null
-  const operatorValue = typeof value.operator === 'string' ? value.operator : null
-  const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
-  const allowedOperators = field ? getComparisonOperators(field.type) : ['contains']
-  const operator = operatorValue && allowedOperators.includes(operatorValue as ComparisonOperator)
-    ? operatorValue as ComparisonOperator
-    : field
-      ? getDefaultOperator(field.type)
-      : 'contains'
-  const rawValue: EvaluationConditionValue = value.value ?? null
+  value: EvaluationJudgmentCondition,
+  metrics: EvaluationMetric[],
+): JudgmentConditionItem | null => {
+  const variableSelector = normalizeVariableSelector(value.variable_selector)
+  if (!variableSelector)
+    return null
+
+  const metricOption = buildConditionMetricOptions(metrics).find(option =>
+    option.variableSelector[0] === variableSelector[0] && option.variableSelector[1] === variableSelector[1],
+  )
+  if (!metricOption)
+    return null
+
+  const allowedOperators = getComparisonOperators(metricOption.valueType)
+  const rawOperator = typeof value.comparison_operator === 'string' ? value.comparison_operator : ''
+  const comparisonOperator = allowedOperators.includes(rawOperator as ComparisonOperator)
+    ? rawOperator as ComparisonOperator
+    : getDefaultComparisonOperator(metricOption.valueType)
 
   return {
-    id: typeof value.id === 'string' ? value.id : createId('condition'),
-    fieldId,
-    operator,
-    value: getConditionValue(field, operator, rawValue),
+    id: createId('condition'),
+    variableSelector,
+    comparisonOperator,
+    value: getConditionValue(metricOption.valueType, comparisonOperator, value.value),
   }
 }
 
-const normalizeConditionGroups = (
-  resourceType: EvaluationResourceType,
-  value: EvaluationConfig['judgement_conditions'],
-): JudgmentConditionGroup[] => {
-  const groupsValue: EvaluationJudgementConditionGroup[] = Array.isArray(value)
-    ? value
-    : Array.isArray(value?.groups)
-      ? value.groups
-      : []
+const createEmptyJudgmentConfig = (): JudgmentConfig => {
+  return {
+    logicalOperator: 'and',
+    conditions: [],
+  }
+}
 
-  const groups = groupsValue
-    .map((group) => {
-      const itemsValue = Array.isArray(group.items) ? group.items : []
-      const items = itemsValue
-        .map(item => normalizeConditionItem(resourceType, item))
+const normalizeJudgmentConfig = (
+  config: EvaluationConfig,
+  metrics: EvaluationMetric[],
+): JudgmentConfig => {
+  const rawJudgmentConfig = getRawJudgmentConfig(config)
 
-      if (items.length === 0)
-        return null
+  if (!rawJudgmentConfig)
+    return createEmptyJudgmentConfig()
 
-      return {
-        id: typeof group.id === 'string' ? group.id : createId('group'),
-        logicalOperator: group.logicalOperator === 'or' || group.logical_operator === 'or' ? 'or' : 'and',
-        items,
-      } satisfies JudgmentConditionGroup
-    })
-    .filter((group): group is JudgmentConditionGroup => !!group)
+  const conditions = (rawJudgmentConfig.conditions ?? [])
+    .map(condition => normalizeConditionItem(condition, metrics))
+    .filter((condition): condition is JudgmentConditionItem => !!condition)
 
-  return groups.length > 0 ? groups : [createConditionGroup(resourceType)]
+  return {
+    logicalOperator: rawJudgmentConfig.logical_operator === 'or' ? 'or' : 'and',
+    conditions,
+  }
 }
 
 export const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
 
-const conditionOperatorsWithoutValue: ComparisonOperator[] = ['is_empty', 'is_not_empty']
-
-export const requiresConditionValue = (operator: ComparisonOperator) => !conditionOperatorsWithoutValue.includes(operator)
+export const requiresConditionValue = (operator: ComparisonOperator) => {
+  return requiresComparisonValue(operator)
+}
 
 export function getConditionValue(
-  field: EvaluationFieldOption | undefined,
+  valueType: EvaluationMetric['valueType'] | undefined,
   operator: ComparisonOperator,
-  previousValue: string | number | boolean | null = null,
+  previousValue?: EvaluationJudgmentConditionValue | string | number | boolean | null,
 ) {
-  if (!field || !requiresConditionValue(operator))
+  if (!valueType || !requiresConditionValue(operator))
     return null
 
-  if (field.type === 'boolean')
+  if (valueType === 'boolean')
     return typeof previousValue === 'boolean' ? previousValue : null
 
-  if (field.type === 'enum')
-    return typeof previousValue === 'string' ? previousValue : null
+  if (operator === 'in' || operator === 'not in') {
+    if (Array.isArray(previousValue))
+      return previousValue.filter((item): item is string => typeof item === 'string' && !!item)
 
-  if (field.type === 'number')
-    return typeof previousValue === 'number' ? previousValue : null
+    return typeof previousValue === 'string' && previousValue
+      ? previousValue.split(',').map(item => item.trim()).filter(Boolean)
+      : []
+  }
 
-  return typeof previousValue === 'string' ? previousValue : null
+  return getNormalizedConditionValue(operator, previousValue)
 }
 
 export function createBuiltinMetric(
@@ -219,6 +289,7 @@ export function createBuiltinMetric(
     kind: 'builtin',
     label: metric.label,
     description: metric.description,
+    valueType: metric.valueType,
     threshold,
     nodeInfoList,
   }
@@ -263,40 +334,66 @@ export function createCustomMetric(): EvaluationMetric {
     kind: 'custom-workflow',
     label: 'Custom Evaluator',
     description: 'Map workflow variables to your evaluation inputs.',
+    valueType: 'number',
     customConfig: {
       workflowId: null,
       workflowAppId: null,
       workflowName: null,
       mappings: [],
+      outputs: [],
     },
   }
 }
 
-export const buildConditionItem = (resourceType: EvaluationResourceType) => {
-  const field = getEvaluationMockConfig(resourceType).fieldOptions[0]
-  const operator = field ? getDefaultOperator(field.type) : 'contains'
+export const buildConditionItem = (metrics: EvaluationMetric[]): JudgmentConditionItem => {
+  const metricOption = buildConditionMetricOptions(metrics)[0]
+  const comparisonOperator = metricOption ? getDefaultComparisonOperator(metricOption.valueType) : 'is'
 
   return {
     id: createId('condition'),
-    fieldId: field?.id ?? null,
-    operator,
-    value: getConditionValue(field, operator),
+    variableSelector: metricOption?.variableSelector ?? null,
+    comparisonOperator,
+    value: getConditionValue(metricOption?.valueType, comparisonOperator),
   }
 }
 
-export function createConditionGroup(resourceType: EvaluationResourceType): JudgmentConditionGroup {
+export const syncJudgmentConfigWithMetrics = (
+  judgmentConfig: JudgmentConfig,
+  metrics: EvaluationMetric[],
+): JudgmentConfig => {
+  const metricOptions = buildConditionMetricOptions(metrics)
+
   return {
-    id: createId('group'),
-    logicalOperator: 'and',
-    items: [buildConditionItem(resourceType)],
+    logicalOperator: judgmentConfig.logicalOperator,
+    conditions: judgmentConfig.conditions
+      .map((condition) => {
+        const metricOption = metricOptions.find(option =>
+          option.variableSelector[0] === condition.variableSelector?.[0]
+          && option.variableSelector[1] === condition.variableSelector?.[1],
+        )
+        if (!metricOption)
+          return null
+
+        const allowedOperators = getComparisonOperators(metricOption.valueType)
+        const comparisonOperator = allowedOperators.includes(condition.comparisonOperator)
+          ? condition.comparisonOperator
+          : getDefaultComparisonOperator(metricOption.valueType)
+
+        return {
+          ...condition,
+          comparisonOperator,
+          value: getConditionValue(metricOption.valueType, comparisonOperator, condition.value),
+        }
+      })
+      .filter((condition): condition is JudgmentConditionItem => !!condition),
   }
 }
 
-export const buildInitialState = (resourceType: EvaluationResourceType): EvaluationResourceState => {
+export const buildInitialState = (_resourceType: EvaluationResourceType): EvaluationResourceState => {
   return {
     judgeModelId: null,
     metrics: [],
-    conditions: [createConditionGroup(resourceType)],
+    conditions: createEmptyJudgmentConfig(),
     activeBatchTab: 'input-fields',
     uploadedFileName: null,
     batchRecords: [],
@@ -309,14 +406,15 @@ export const buildStateFromEvaluationConfig = (
 ): EvaluationResourceState => {
   const defaultMetrics = normalizeDefaultMetrics(resourceType, config.default_metrics)
   const customMetrics = normalizeCustomMetric(config.customized_metrics)
+  const metrics = [...defaultMetrics, ...customMetrics]
 
   return {
     ...buildInitialState(resourceType),
     judgeModelId: config.evaluation_model && config.evaluation_model_provider
       ? encodeModelSelection(config.evaluation_model_provider, config.evaluation_model)
       : null,
-    metrics: [...defaultMetrics, ...customMetrics],
-    conditions: normalizeConditionGroups(resourceType, config.judgement_conditions),
+    metrics,
+    conditions: normalizeJudgmentConfig(config, metrics),
   }
 }
 
@@ -353,12 +451,6 @@ export const updateMetric = (
   updater: (metric: EvaluationMetric) => EvaluationMetric,
 ) => metrics.map(metric => metric.id === metricId ? updater(metric) : metric)
 
-export const updateConditionGroup = (
-  groups: JudgmentConditionGroup[],
-  groupId: string,
-  updater: (group: JudgmentConditionGroup) => JudgmentConditionGroup,
-) => groups.map(group => group.id === groupId ? updater(group) : group)
-
 export const createBatchTestRecord = (
   resourceType: EvaluationResourceType,
   uploadedFileName: string | null | undefined,
@@ -389,14 +481,19 @@ export const isEvaluationRunnable = (state: EvaluationResourceState) => {
   return !!state.judgeModelId
     && state.metrics.length > 0
     && state.metrics.every(isCustomMetricConfigured)
-    && state.conditions.some(group => group.items.length > 0)
 }
 
-export const getAllowedOperators = (resourceType: EvaluationResourceType, fieldId: string | null) => {
-  const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
+export const getAllowedOperators = (
+  metrics: EvaluationMetric[],
+  variableSelector: [string, string] | null,
+) => {
+  const metricOption = buildConditionMetricOptions(metrics).find(option =>
+    option.variableSelector[0] === variableSelector?.[0]
+    && option.variableSelector[1] === variableSelector?.[1],
+  )
 
-  if (!field)
-    return ['contains'] as ComparisonOperator[]
+  if (!metricOption)
+    return ['is'] as ComparisonOperator[]
 
-  return getComparisonOperators(field.type)
+  return getComparisonOperators(metricOption.valueType)
 }
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 20b30a4b8e..263060191a 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -5,7 +5,7 @@ import type {
 } from './types'
 import type { EvaluationConfig, NodeInfo } from '@/types/evaluation'
 import { create } from 'zustand'
-import { getDefaultOperator, getEvaluationMockConfig } from './mock'
+import { getEvaluationMockConfig } from './mock'
 import {
   buildConditionItem,
   buildInitialState,
@@ -13,7 +13,6 @@ import {
   buildStateFromEvaluationConfig,
   createBatchTestRecord,
   createBuiltinMetric,
-  createConditionGroup,
   createCustomMetric,
   getAllowedOperators as getAllowedOperatorsFromUtils,
   getConditionValue,
@@ -21,10 +20,11 @@ import {
   isEvaluationRunnable as isEvaluationRunnableFromUtils,
   requiresConditionValue as requiresConditionValueFromUtils,
   syncCustomMetricMappings as syncCustomMetricMappingsFromUtils,
-  updateConditionGroup,
+  syncJudgmentConfigWithMetrics,
   updateMetric,
   updateResourceState,
 } from './store-utils'
+import { buildConditionMetricOptions } from './utils'
 
 type EvaluationStore = {
   resources: Record<string, EvaluationResourceState>
@@ -47,6 +47,12 @@ type EvaluationStore = {
     metricId: string,
     inputVariableIds: string[],
   ) => void
+  syncCustomMetricOutputs: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    outputs: Array<{ id: string, valueType: string | null }>,
+  ) => void
   updateCustomMetricMapping: (
     resourceType: EvaluationResourceType,
     resourceId: string,
@@ -54,19 +60,16 @@ type EvaluationStore = {
     mappingId: string,
     patch: { inputVariableId?: string | null, outputVariableId?: string | null },
   ) => void
-  addConditionGroup: (resourceType: EvaluationResourceType, resourceId: string) => void
-  removeConditionGroup: (resourceType: EvaluationResourceType, resourceId: string, groupId: string) => void
-  setConditionGroupOperator: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, logicalOperator: 'and' | 'or') => void
-  addConditionItem: (resourceType: EvaluationResourceType, resourceId: string, groupId: string) => void
-  removeConditionItem: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, itemId: string) => void
-  updateConditionField: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, itemId: string, fieldId: string) => void
-  updateConditionOperator: (resourceType: EvaluationResourceType, resourceId: string, groupId: string, itemId: string, operator: ComparisonOperator) => void
+  setConditionLogicalOperator: (resourceType: EvaluationResourceType, resourceId: string, logicalOperator: 'and' | 'or') => void
+  addCondition: (resourceType: EvaluationResourceType, resourceId: string) => void
+  removeCondition: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string) => void
+  updateConditionMetric: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string, variableSelector: [string, string]) => void
+  updateConditionOperator: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string, operator: ComparisonOperator) => void
   updateConditionValue: (
     resourceType: EvaluationResourceType,
     resourceId: string,
-    groupId: string,
-    itemId: string,
-    value: string | number | boolean | null,
+    conditionId: string,
+    value: string | string[] | boolean | null,
   ) => void
   setBatchTab: (resourceType: EvaluationResourceType, resourceId: string, tab: EvaluationResourceState['activeBatchTab']) => void
   setUploadedFileName: (resourceType: EvaluationResourceType, resourceId: string, uploadedFileName: string | null) => void
@@ -117,17 +120,22 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
 
     set((state) => {
       return {
-        resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
-          ...currentResource,
-          metrics: currentResource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin')
+        resources: updateResourceState(state.resources, resourceType, resourceId, (currentResource) => {
+          const metrics = currentResource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin')
             ? currentResource.metrics.map(metric => metric.optionId === optionId && metric.kind === 'builtin'
                 ? {
                     ...metric,
                     nodeInfoList,
                   }
                 : metric)
-            : [...currentResource.metrics, createBuiltinMetric(option, nodeInfoList)],
-        })),
+            : [...currentResource.metrics, createBuiltinMetric(option, nodeInfoList)]
+
+          return {
+            ...currentResource,
+            metrics,
+            conditions: syncJudgmentConfigWithMetrics(currentResource.conditions, metrics),
+          }
+        }),
       }
     })
   },
@@ -144,27 +152,36 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
   },
   addCustomMetric: (resourceType, resourceId) => {
     set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        metrics: resource.metrics.some(metric => metric.kind === 'custom-workflow')
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = resource.metrics.some(metric => metric.kind === 'custom-workflow')
           ? resource.metrics
-          : [...resource.metrics, createCustomMetric()],
-      })),
+          : [...resource.metrics, createCustomMetric()]
+
+        return {
+          ...resource,
+          metrics,
+          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+        }
+      }),
     }))
   },
   removeMetric: (resourceType, resourceId, metricId) => {
     set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        metrics: resource.metrics.filter(metric => metric.id !== metricId),
-      })),
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = resource.metrics.filter(metric => metric.id !== metricId)
+
+        return {
+          ...resource,
+          metrics,
+          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+        }
+      }),
     }))
   },
   setCustomMetricWorkflow: (resourceType, resourceId, metricId, workflow) => {
     set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        metrics: updateMetric(resource.metrics, metricId, metric => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = updateMetric(resource.metrics, metricId, metric => ({
           ...metric,
           customConfig: metric.customConfig
             ? {
@@ -176,10 +193,17 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
                   ...mapping,
                   outputVariableId: null,
                 })),
+                outputs: [],
               }
             : metric.customConfig,
-        })),
-      })),
+        }))
+
+        return {
+          ...resource,
+          metrics,
+          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+        }
+      }),
     }))
   },
   syncCustomMetricMappings: (resourceType, resourceId, metricId, inputVariableIds) => {
@@ -198,6 +222,27 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
+  syncCustomMetricOutputs: (resourceType, resourceId, metricId, outputs) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                outputs,
+              }
+            : metric.customConfig,
+        }))
+
+        return {
+          ...resource,
+          metrics,
+          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+        }
+      }),
+    }))
+  },
   updateCustomMetricMapping: (resourceType, resourceId, metricId, mappingId, patch) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
@@ -214,114 +259,101 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
-  addConditionGroup: (resourceType, resourceId) => {
+  setConditionLogicalOperator: (resourceType, resourceId, logicalOperator) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: [...resource.conditions, createConditionGroup(resourceType)],
-      })),
-    }))
-  },
-  removeConditionGroup: (resourceType, resourceId, groupId) => {
-    set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        conditions: resource.conditions.filter(group => group.id !== groupId),
-      })),
-    }))
-  },
-  setConditionGroupOperator: (resourceType, resourceId, groupId, logicalOperator) => {
-    set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-          ...group,
+        conditions: {
+          ...resource.conditions,
           logicalOperator,
-        })),
+        },
       })),
     }))
   },
-  addConditionItem: (resourceType, resourceId, groupId) => {
+  addCondition: (resourceType, resourceId) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-          ...group,
-          items: [...group.items, buildConditionItem(resourceType)],
-        })),
+        conditions: {
+          ...resource.conditions,
+          conditions: [...resource.conditions.conditions, buildConditionItem(resource.metrics)],
+        },
       })),
     }))
   },
-  removeConditionItem: (resourceType, resourceId, groupId, itemId) => {
+  removeCondition: (resourceType, resourceId, conditionId) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-          ...group,
-          items: group.items.filter(item => item.id !== itemId),
-        })),
+        conditions: {
+          ...resource.conditions,
+          conditions: resource.conditions.conditions.filter(condition => condition.id !== conditionId),
+        },
       })),
     }))
   },
-  updateConditionField: (resourceType, resourceId, groupId, itemId, fieldId) => {
-    const field = getEvaluationMockConfig(resourceType).fieldOptions.find(option => option.id === fieldId)
-
+  updateConditionMetric: (resourceType, resourceId, conditionId, variableSelector) => {
     set(state => ({
-      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
-        ...resource,
-        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-          ...group,
-          items: group.items.map((item) => {
-            if (item.id !== itemId)
-              return item
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const allowedOperators = getAllowedOperatorsFromUtils(resource.metrics, variableSelector)
+        const comparisonOperator = allowedOperators[0]
+        const metricOption = buildConditionMetricOptions(resource.metrics).find(option =>
+          option.variableSelector[0] === variableSelector[0] && option.variableSelector[1] === variableSelector[1],
+        )
 
-            const nextOperator = field ? getDefaultOperator(field.type) : item.operator
-
-            return {
-              ...item,
-              fieldId,
-              operator: nextOperator,
-              value: getConditionValue(field, nextOperator),
-            }
-          }),
-        })),
-      })),
+        return {
+          ...resource,
+          conditions: {
+            ...resource.conditions,
+            conditions: resource.conditions.conditions.map(condition => condition.id === conditionId
+              ? {
+                  ...condition,
+                  variableSelector,
+                  comparisonOperator,
+                  value: getConditionValue(metricOption?.valueType, comparisonOperator),
+                }
+              : condition),
+          },
+        }
+      }),
     }))
   },
-  updateConditionOperator: (resourceType, resourceId, groupId, itemId, operator) => {
+  updateConditionOperator: (resourceType, resourceId, conditionId, operator) => {
     set((state) => {
-      const fieldOptions = getEvaluationMockConfig(resourceType).fieldOptions
-
       return {
         resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
           ...currentResource,
-          conditions: updateConditionGroup(currentResource.conditions, groupId, group => ({
-            ...group,
-            items: group.items.map((item) => {
-              if (item.id !== itemId)
-                return item
+          conditions: {
+            ...currentResource.conditions,
+            conditions: currentResource.conditions.conditions.map((condition) => {
+              if (condition.id !== conditionId)
+                return condition
 
-              const field = fieldOptions.find(option => option.id === item.fieldId)
+              const metricOption = buildConditionMetricOptions(currentResource.metrics)
+                .find(option =>
+                  option.variableSelector[0] === condition.variableSelector?.[0]
+                  && option.variableSelector[1] === condition.variableSelector?.[1],
+                )
 
               return {
-                ...item,
-                operator,
-                value: getConditionValue(field, operator, item.value),
+                ...condition,
+                comparisonOperator: operator,
+                value: getConditionValue(metricOption?.valueType, operator, condition.value),
               }
             }),
-          })),
+          },
         })),
       }
     })
   },
-  updateConditionValue: (resourceType, resourceId, groupId, itemId, value) => {
+  updateConditionValue: (resourceType, resourceId, conditionId, value) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: updateConditionGroup(resource.conditions, groupId, group => ({
-          ...group,
-          items: group.items.map(item => item.id === itemId ? { ...item, value } : item),
-        })),
+        conditions: {
+          ...resource.conditions,
+          conditions: resource.conditions.conditions.map(condition => condition.id === conditionId ? { ...condition, value } : condition),
+        },
       })),
     }))
   },
@@ -374,8 +406,11 @@ export const useEvaluationResource = (resourceType: EvaluationResourceType, reso
   return useEvaluationStore(state => state.resources[resourceKey] ?? (initialResourceCache[resourceKey] ??= buildInitialState(resourceType)))
 }
 
-export const getAllowedOperators = (resourceType: EvaluationResourceType, fieldId: string | null) => {
-  return getAllowedOperatorsFromUtils(resourceType, fieldId)
+export const getAllowedOperators = (
+  metrics: EvaluationResourceState['metrics'],
+  variableSelector: [string, string] | null,
+) => {
+  return getAllowedOperatorsFromUtils(metrics, variableSelector)
 }
 
 export const isCustomMetricConfigured = (metric: EvaluationResourceState['metrics'][number]) => {
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 8789d6f5c3..3412c5016e 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -13,17 +13,27 @@ export type BatchTestTab = 'input-fields' | 'history'
 
 export type FieldType = 'string' | 'number' | 'boolean' | 'enum'
 
+export type ConditionMetricValueType = 'string' | 'number' | 'boolean'
+
 export type ComparisonOperator
   = | 'contains'
-    | 'not_contains'
+    | 'not contains'
+    | 'start with'
+    | 'end with'
     | 'is'
-    | 'is_not'
-    | 'is_empty'
-    | 'is_not_empty'
-    | 'greater_than'
-    | 'less_than'
-    | 'greater_or_equal'
-    | 'less_or_equal'
+    | 'is not'
+    | 'empty'
+    | 'not empty'
+    | 'in'
+    | 'not in'
+    | '='
+    | '≠'
+    | '>'
+    | '<'
+    | '≥'
+    | '≤'
+    | 'is null'
+    | 'is not null'
 
 export type JudgeModelOption = {
   id: string
@@ -35,6 +45,7 @@ export type MetricOption = {
   id: string
   label: string
   description: string
+  valueType: ConditionMetricValueType
 }
 
 export type EvaluationWorkflowOption = {
@@ -69,6 +80,10 @@ export type CustomMetricConfig = {
   workflowAppId: string | null
   workflowName: string | null
   mappings: CustomMetricMapping[]
+  outputs: Array<{
+    id: string
+    valueType: string | null
+  }>
 }
 
 export type EvaluationMetric = {
@@ -77,6 +92,7 @@ export type EvaluationMetric = {
   kind: MetricKind
   label: string
   description: string
+  valueType: ConditionMetricValueType
   threshold?: number
   nodeInfoList?: NodeInfo[]
   customConfig?: CustomMetricConfig
@@ -84,15 +100,23 @@ export type EvaluationMetric = {
 
 export type JudgmentConditionItem = {
   id: string
-  fieldId: string | null
-  operator: ComparisonOperator
-  value: string | number | boolean | null
+  variableSelector: [string, string] | null
+  comparisonOperator: ComparisonOperator
+  value: string | string[] | boolean | null
 }
 
-export type JudgmentConditionGroup = {
-  id: string
+export type JudgmentConfig = {
   logicalOperator: 'and' | 'or'
-  items: JudgmentConditionItem[]
+  conditions: JudgmentConditionItem[]
+}
+
+export type ConditionMetricOption = {
+  id: string
+  group: string
+  label: string
+  description: string
+  valueType: ConditionMetricValueType
+  variableSelector: [string, string]
 }
 
 export type BatchTestRecord = {
@@ -106,7 +130,7 @@ export type BatchTestRecord = {
 export type EvaluationResourceState = {
   judgeModelId: string | null
   metrics: EvaluationMetric[]
-  conditions: JudgmentConditionGroup[]
+  conditions: JudgmentConfig
   activeBatchTab: BatchTestTab
   uploadedFileName: string | null
   batchRecords: BatchTestRecord[]
diff --git a/web/app/components/evaluation/utils.ts b/web/app/components/evaluation/utils.ts
index 54b6b2014a..48b75d5c3e 100644
--- a/web/app/components/evaluation/utils.ts
+++ b/web/app/components/evaluation/utils.ts
@@ -1,16 +1,16 @@
 import type { TFunction } from 'i18next'
-import type { ComparisonOperator, EvaluationFieldOption } from './types'
+import type {
+  ComparisonOperator,
+  ConditionMetricOption,
+  ConditionMetricValueType,
+  EvaluationMetric,
+} from './types'
 
 export const TAB_CLASS_NAME = 'flex-1 rounded-lg px-3 py-2 text-left system-sm-medium'
 
-const compactOperatorLabels: Partial<Record<ComparisonOperator, string>> = {
-  is: '=',
-  is_not: '!=',
-  greater_than: '>',
-  less_than: '<',
-  greater_or_equal: '>=',
-  less_or_equal: '<=',
-}
+const rawOperatorLabels = new Set<ComparisonOperator>(['=', '≠', '>', '<', '≥', '≤'])
+
+const noValueOperators = new Set<ComparisonOperator>(['empty', 'not empty', 'is null', 'is not null'])
 
 export const encodeModelSelection = (provider: string, model: string) => `${provider}::${model}`
 
@@ -25,33 +25,84 @@ export const decodeModelSelection = (judgeModelId: string | null) => {
   return { provider, model }
 }
 
-export const groupFieldOptions = (fieldOptions: EvaluationFieldOption[]) => {
-  return Object.entries(fieldOptions.reduce<Record<string, EvaluationFieldOption[]>>((acc, field) => {
-    acc[field.group] = [...(acc[field.group] ?? []), field]
-    return acc
-  }, {}))
-}
-
-export const getOperatorLabel = (
+export const getComparisonOperatorLabel = (
   operator: ComparisonOperator,
-  fieldType: EvaluationFieldOption['type'] | undefined,
-  t: TFunction<'evaluation'>,
+  t: TFunction,
 ) => {
-  if (fieldType === 'number' && compactOperatorLabels[operator])
-    return compactOperatorLabels[operator] as string
+  if (rawOperatorLabels.has(operator))
+    return operator
 
-  return t(`conditions.operators.${operator}` as const)
+  return t(`nodes.ifElse.comparisonOperator.${operator}` as never, { ns: 'workflow' } as never) as unknown as string
 }
 
-export const getFieldTypeIconClassName = (fieldType: EvaluationFieldOption['type']) => {
-  if (fieldType === 'number')
-    return 'i-ri-hashtag'
-
-  if (fieldType === 'boolean')
-    return 'i-ri-checkbox-circle-line'
-
-  if (fieldType === 'enum')
-    return 'i-ri-list-check-2'
-
-  return 'i-ri-text'
+export const requiresComparisonValue = (operator: ComparisonOperator) => {
+  return !noValueOperators.has(operator)
+}
+
+const getMetricValueType = (valueType: string | null | undefined): ConditionMetricValueType => {
+  if (valueType === 'number' || valueType === 'integer')
+    return 'number'
+
+  if (valueType === 'boolean')
+    return 'boolean'
+
+  return 'string'
+}
+
+export const getComparisonOperators = (valueType: ConditionMetricValueType): ComparisonOperator[] => {
+  if (valueType === 'number')
+    return ['=', '≠', '>', '<', '≥', '≤', 'is null', 'is not null']
+
+  if (valueType === 'boolean')
+    return ['is', 'is not', 'is null', 'is not null']
+
+  return ['contains', 'not contains', 'start with', 'end with', 'is', 'is not', 'empty', 'not empty', 'in', 'not in', 'is null', 'is not null']
+}
+
+export const getDefaultComparisonOperator = (valueType: ConditionMetricValueType): ComparisonOperator => {
+  return getComparisonOperators(valueType)[0]
+}
+
+export const buildConditionMetricOptions = (metrics: EvaluationMetric[]): ConditionMetricOption[] => {
+  return metrics.flatMap((metric) => {
+    if (metric.kind === 'builtin') {
+      return (metric.nodeInfoList ?? []).map((nodeInfo) => {
+        return {
+          id: `${nodeInfo.node_id}:${metric.optionId}`,
+          group: nodeInfo.title,
+          label: metric.label,
+          description: nodeInfo.type,
+          valueType: metric.valueType,
+          variableSelector: [nodeInfo.node_id, metric.optionId] as [string, string],
+        }
+      })
+    }
+
+    const customConfig = metric.customConfig
+
+    if (!customConfig?.workflowId)
+      return []
+
+    return customConfig.outputs.map((output) => {
+      return {
+        id: `${customConfig.workflowId}:${output.id}`,
+        group: customConfig.workflowName ?? metric.label,
+        label: output.id,
+        description: customConfig.workflowName ?? metric.label,
+        valueType: getMetricValueType(output.valueType),
+        variableSelector: [customConfig.workflowId, output.id] as [string, string],
+      }
+    })
+  })
+}
+
+export const serializeVariableSelector = (value: [string, string] | null | undefined) => {
+  return value ? JSON.stringify(value) : ''
+}
+
+export const isSelectorEqual = (
+  left: [string, string] | null | undefined,
+  right: [string, string] | null | undefined,
+) => {
+  return left?.[0] === right?.[0] && left?.[1] === right?.[1]
 }
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index c69a91f7bc..92f6b2a643 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -23,7 +23,7 @@
   "conditions.description": "Define additional rules for when results should pass or fail.",
   "conditions.emptyDescription": "Add metrics above to configure pass/fail thresholds.",
   "conditions.emptyTitle": "No conditions yet",
-  "conditions.fieldPlaceholder": "Select field",
+  "conditions.fieldPlaceholder": "Select metric",
   "conditions.groupLabel": "Group {{index}}",
   "conditions.logical.and": "AND",
   "conditions.logical.or": "OR",
@@ -39,7 +39,7 @@
   "conditions.operators.not_contains": "Does not contain",
   "conditions.removeCondition": "Remove condition",
   "conditions.removeGroup": "Remove condition group",
-  "conditions.selectFieldFirst": "Select a field first",
+  "conditions.selectFieldFirst": "Select a metric first",
   "conditions.selectValue": "Choose a value",
   "conditions.title": "Judgment Conditions",
   "conditions.valuePlaceholder": "Enter a value",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index fb98c4e3af..8a1ff78ebf 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -23,7 +23,7 @@
   "conditions.description": "定义额外规则，决定结果何时通过或失败。",
   "conditions.emptyDescription": "请先添加上方指标，再配置通过 / 失败阈值。",
   "conditions.emptyTitle": "还没有条件",
-  "conditions.fieldPlaceholder": "选择字段",
+  "conditions.fieldPlaceholder": "选择指标",
   "conditions.groupLabel": "条件组 {{index}}",
   "conditions.logical.and": "且",
   "conditions.logical.or": "或",
@@ -39,7 +39,7 @@
   "conditions.operators.not_contains": "不包含",
   "conditions.removeCondition": "删除条件",
   "conditions.removeGroup": "删除条件组",
-  "conditions.selectFieldFirst": "请先选择字段",
+  "conditions.selectFieldFirst": "请先选择指标",
   "conditions.selectValue": "选择值",
   "conditions.title": "判定条件",
   "conditions.valuePlaceholder": "输入值",
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index ba329ae072..301a812488 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -1,5 +1,18 @@
 export type EvaluationTargetType = 'apps' | 'snippets' | 'datasets'
 
+export type EvaluationJudgmentConditionValue = string | string[] | boolean
+
+export type EvaluationJudgmentCondition = {
+  variable_selector?: string[]
+  comparison_operator?: string
+  value?: EvaluationJudgmentConditionValue
+}
+
+export type EvaluationJudgmentConfig = {
+  logical_operator?: 'and' | 'or'
+  conditions?: EvaluationJudgmentCondition[]
+}
+
 export type EvaluationConditionValue = string | number | boolean | null
 
 export type EvaluationJudgementConditionItem = {
@@ -28,7 +41,8 @@ export type EvaluationConfig = {
   evaluation_model_provider: string | null
   default_metrics?: EvaluationDefaultMetric[] | null
   customized_metrics?: EvaluationCustomizedMetric | null
-  judgement_conditions: EvaluationJudgementConditions | null
+  judgment_config?: EvaluationJudgmentConfig | null
+  judgement_conditions?: EvaluationJudgementConditions | null
 }
 
 export type NodeInfo = {
@@ -57,7 +71,7 @@ export type EvaluationConfigData = {
   evaluation_model_provider?: string
   default_metrics?: EvaluationDefaultMetric[] | null
   customized_metrics?: EvaluationCustomizedMetric | null
-  judgment_config?: EvaluationJudgementConditions | null
+  judgment_config?: EvaluationJudgmentConfig | null
 }
 
 export type EvaluationRunRequest = EvaluationConfigData & {

From 8dc6d736ee8913dc7059342acf2ef896b0abc8f2 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 20:32:53 +0800
Subject: [PATCH 073/108] refactor(web): store of evaluation

---
 .../evaluation/__tests__/index.spec.tsx       |  2 +-
 .../evaluation/__tests__/store.spec.ts        | 14 +++---
 .../conditions-section/condition-group.tsx    |  4 +-
 .../components/conditions-section/index.tsx   |  4 +-
 web/app/components/evaluation/store-utils.ts  | 21 ++-------
 web/app/components/evaluation/store.ts        | 44 +++++++++----------
 web/app/components/evaluation/types.ts        |  2 +-
 web/types/evaluation.ts                       | 24 ----------
 8 files changed, 38 insertions(+), 77 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index c0e85f6e79..5146e49535 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -130,7 +130,7 @@ describe('Evaluation', () => {
       ])
       store.addCondition(resourceType, resourceId)
 
-      const condition = useEvaluationStore.getState().resources['apps:app-2'].conditions.conditions[0]
+      const condition = useEvaluationStore.getState().resources['apps:app-2'].judgmentConfig.conditions[0]
       conditionId = condition.id
       store.updateConditionOperator(resourceType, resourceId, conditionId, '=')
     })
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index a8dd8c188a..8f6e557d5a 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -107,7 +107,7 @@ describe('evaluation store', () => {
       { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
     ])
     expect(state.metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
-    expect(state.conditions.conditions).toHaveLength(0)
+    expect(state.judgmentConfig.conditions).toHaveLength(0)
   })
 
   it('should build numeric conditions from selected metrics', () => {
@@ -124,9 +124,9 @@ describe('evaluation store', () => {
     store.addCondition(resourceType, resourceId)
 
     const state = useEvaluationStore.getState().resources['apps:app-conditions']
-    const condition = state.conditions.conditions[0]
+    const condition = state.judgmentConfig.conditions[0]
 
-    expect(state.conditions.logicalOperator).toBe('or')
+    expect(state.judgmentConfig.logicalOperator).toBe('or')
     expect(condition.variableSelector).toEqual(['node-answer', 'answer-correctness'])
     expect(condition.comparisonOperator).toBe('=')
     expect(getAllowedOperators(state.metrics, condition.variableSelector)).toEqual(['=', '≠', '>', '<', '≥', '≤', 'is null', 'is not null'])
@@ -153,13 +153,13 @@ describe('evaluation store', () => {
     }])
     store.addCondition(resourceType, resourceId)
 
-    const condition = useEvaluationStore.getState().resources['apps:app-3'].conditions.conditions[0]
+    const condition = useEvaluationStore.getState().resources['apps:app-3'].judgmentConfig.conditions[0]
 
     store.updateConditionMetric(resourceType, resourceId, condition.id, [config.workflowOptions[0].id, 'reason'])
     store.updateConditionValue(resourceType, resourceId, condition.id, 'needs follow-up')
     store.updateConditionOperator(resourceType, resourceId, condition.id, 'empty')
 
-    const updatedCondition = useEvaluationStore.getState().resources['apps:app-3'].conditions.conditions[0]
+    const updatedCondition = useEvaluationStore.getState().resources['apps:app-3'].judgmentConfig.conditions[0]
 
     expect(requiresConditionValue('empty')).toBe(false)
     expect(updatedCondition.value).toBeNull()
@@ -232,8 +232,8 @@ describe('evaluation store', () => {
     expect(hydratedState.metrics[1].customConfig?.mappings[0].inputVariableId).toBe('query')
     expect(hydratedState.metrics[1].customConfig?.mappings[0].outputVariableId).toBe('answer')
     expect(hydratedState.metrics[1].customConfig?.outputs).toEqual([{ id: 'reason', valueType: 'string' }])
-    expect(hydratedState.conditions.logicalOperator).toBe('or')
-    expect(hydratedState.conditions.conditions[0]).toMatchObject({
+    expect(hydratedState.judgmentConfig.logicalOperator).toBe('or')
+    expect(hydratedState.judgmentConfig.conditions[0]).toMatchObject({
       variableSelector: ['node-1', 'faithfulness'],
       comparisonOperator: '≥',
       value: '0.9',
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index c71aee5025..2825488893 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -231,7 +231,7 @@ const ConditionGroup = ({
                 type="button"
                 className={cn(
                   'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
-                  resource.conditions.logicalOperator === operator
+                  resource.judgmentConfig.logicalOperator === operator
                     ? 'bg-components-card-bg text-text-primary shadow-xs'
                     : 'text-text-tertiary',
                 )}
@@ -245,7 +245,7 @@ const ConditionGroup = ({
       </div>
 
       <div className="space-y-3">
-        {resource.conditions.conditions.map((condition) => {
+        {resource.judgmentConfig.conditions.map((condition) => {
           const metric = metricOptions.find(option => isSelectorEqual(option.variableSelector, condition.variableSelector))
           const allowedOperators = getAllowedOperators(resource.metrics, condition.variableSelector)
           const showValue = !!metric && requiresConditionValue(condition.comparisonOperator)
diff --git a/web/app/components/evaluation/components/conditions-section/index.tsx b/web/app/components/evaluation/components/conditions-section/index.tsx
index 383d0aad8b..d00830c1c8 100644
--- a/web/app/components/evaluation/components/conditions-section/index.tsx
+++ b/web/app/components/evaluation/components/conditions-section/index.tsx
@@ -26,12 +26,12 @@ const ConditionsSection = ({
         tooltip={t('conditions.description')}
       />
       <div className="mt-2 space-y-4">
-        {resource.conditions.conditions.length === 0 && (
+        {resource.judgmentConfig.conditions.length === 0 && (
           <div className="rounded-xl bg-background-section px-3 py-3 system-xs-regular text-text-tertiary">
             {t('conditions.emptyDescription')}
           </div>
         )}
-        {resource.conditions.conditions.length > 0 && (
+        {resource.judgmentConfig.conditions.length > 0 && (
           <ConditionGroup
             resourceType={resourceType}
             resourceId={resourceId}
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 98c0d6a368..e29d2a6bdb 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -180,21 +180,6 @@ const getNormalizedConditionValue = (
   return typeof previousValue === 'string' ? previousValue : null
 }
 
-const getRawJudgmentConfig = (config: EvaluationConfig): EvaluationJudgmentConfig | null | undefined => {
-  if (config.judgment_config)
-    return config.judgment_config
-
-  if (
-    config.judgement_conditions
-    && !Array.isArray(config.judgement_conditions)
-    && 'conditions' in config.judgement_conditions
-  ) {
-    return config.judgement_conditions as EvaluationJudgmentConfig
-  }
-
-  return null
-}
-
 const normalizeConditionItem = (
   value: EvaluationJudgmentCondition,
   metrics: EvaluationMetric[],
@@ -234,7 +219,7 @@ const normalizeJudgmentConfig = (
   config: EvaluationConfig,
   metrics: EvaluationMetric[],
 ): JudgmentConfig => {
-  const rawJudgmentConfig = getRawJudgmentConfig(config)
+  const rawJudgmentConfig: EvaluationJudgmentConfig | null | undefined = config.judgment_config
 
   if (!rawJudgmentConfig)
     return createEmptyJudgmentConfig()
@@ -393,7 +378,7 @@ export const buildInitialState = (_resourceType: EvaluationResourceType): Evalua
   return {
     judgeModelId: null,
     metrics: [],
-    conditions: createEmptyJudgmentConfig(),
+    judgmentConfig: createEmptyJudgmentConfig(),
     activeBatchTab: 'input-fields',
     uploadedFileName: null,
     batchRecords: [],
@@ -414,7 +399,7 @@ export const buildStateFromEvaluationConfig = (
       ? encodeModelSelection(config.evaluation_model_provider, config.evaluation_model)
       : null,
     metrics,
-    conditions: normalizeJudgmentConfig(config, metrics),
+    judgmentConfig: normalizeJudgmentConfig(config, metrics),
   }
 }
 
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 263060191a..454c8ee569 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -133,7 +133,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
           return {
             ...currentResource,
             metrics,
-            conditions: syncJudgmentConfigWithMetrics(currentResource.conditions, metrics),
+            judgmentConfig: syncJudgmentConfigWithMetrics(currentResource.judgmentConfig, metrics),
           }
         }),
       }
@@ -160,7 +160,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
         return {
           ...resource,
           metrics,
-          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
         }
       }),
     }))
@@ -173,7 +173,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
         return {
           ...resource,
           metrics,
-          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
         }
       }),
     }))
@@ -201,7 +201,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
         return {
           ...resource,
           metrics,
-          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
         }
       }),
     }))
@@ -238,7 +238,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
         return {
           ...resource,
           metrics,
-          conditions: syncJudgmentConfigWithMetrics(resource.conditions, metrics),
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
         }
       }),
     }))
@@ -263,8 +263,8 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: {
-          ...resource.conditions,
+        judgmentConfig: {
+          ...resource.judgmentConfig,
           logicalOperator,
         },
       })),
@@ -274,9 +274,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: {
-          ...resource.conditions,
-          conditions: [...resource.conditions.conditions, buildConditionItem(resource.metrics)],
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          conditions: [...resource.judgmentConfig.conditions, buildConditionItem(resource.metrics)],
         },
       })),
     }))
@@ -285,9 +285,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: {
-          ...resource.conditions,
-          conditions: resource.conditions.conditions.filter(condition => condition.id !== conditionId),
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          conditions: resource.judgmentConfig.conditions.filter(condition => condition.id !== conditionId),
         },
       })),
     }))
@@ -303,9 +303,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
 
         return {
           ...resource,
-          conditions: {
-            ...resource.conditions,
-            conditions: resource.conditions.conditions.map(condition => condition.id === conditionId
+          judgmentConfig: {
+            ...resource.judgmentConfig,
+            conditions: resource.judgmentConfig.conditions.map(condition => condition.id === conditionId
               ? {
                   ...condition,
                   variableSelector,
@@ -323,9 +323,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       return {
         resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
           ...currentResource,
-          conditions: {
-            ...currentResource.conditions,
-            conditions: currentResource.conditions.conditions.map((condition) => {
+          judgmentConfig: {
+            ...currentResource.judgmentConfig,
+            conditions: currentResource.judgmentConfig.conditions.map((condition) => {
               if (condition.id !== conditionId)
                 return condition
 
@@ -350,9 +350,9 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
-        conditions: {
-          ...resource.conditions,
-          conditions: resource.conditions.conditions.map(condition => condition.id === conditionId ? { ...condition, value } : condition),
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          conditions: resource.judgmentConfig.conditions.map(condition => condition.id === conditionId ? { ...condition, value } : condition),
         },
       })),
     }))
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 3412c5016e..acfcfdd11b 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -130,7 +130,7 @@ export type BatchTestRecord = {
 export type EvaluationResourceState = {
   judgeModelId: string | null
   metrics: EvaluationMetric[]
-  conditions: JudgmentConfig
+  judgmentConfig: JudgmentConfig
   activeBatchTab: BatchTestTab
   uploadedFileName: string | null
   batchRecords: BatchTestRecord[]
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index 301a812488..30070cfb57 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -13,36 +13,12 @@ export type EvaluationJudgmentConfig = {
   conditions?: EvaluationJudgmentCondition[]
 }
 
-export type EvaluationConditionValue = string | number | boolean | null
-
-export type EvaluationJudgementConditionItem = {
-  id?: string
-  fieldId?: string
-  field_id?: string
-  operator?: string
-  value?: EvaluationConditionValue
-}
-
-export type EvaluationJudgementConditionGroup = {
-  id?: string
-  logicalOperator?: 'and' | 'or'
-  logical_operator?: 'and' | 'or'
-  items?: EvaluationJudgementConditionItem[]
-}
-
-export type EvaluationJudgementConditions
-  = | EvaluationJudgementConditionGroup[]
-    | {
-      groups?: EvaluationJudgementConditionGroup[]
-    }
-
 export type EvaluationConfig = {
   evaluation_model: string | null
   evaluation_model_provider: string | null
   default_metrics?: EvaluationDefaultMetric[] | null
   customized_metrics?: EvaluationCustomizedMetric | null
   judgment_config?: EvaluationJudgmentConfig | null
-  judgement_conditions?: EvaluationJudgementConditions | null
 }
 
 export type NodeInfo = {

From 5efe8b8bd76d983b154f35c5f7f35800de8920cb Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 21:08:45 +0800
Subject: [PATCH 074/108] feat(web): add condition

---
 .../evaluation/__tests__/index.spec.tsx       | 45 +++++++++++
 .../evaluation/__tests__/store.spec.ts        | 29 +++++++
 .../add-condition-select.tsx                  | 75 +++++++++++++++++++
 .../conditions-section/condition-group.tsx    | 28 +++----
 .../components/conditions-section/index.tsx   | 24 +++---
 web/app/components/evaluation/store-utils.ts  | 13 +++-
 web/app/components/evaluation/store.ts        | 10 ++-
 web/app/components/evaluation/types.ts        | 10 ++-
 web/app/components/evaluation/utils.ts        | 35 +++++++--
 web/i18n/en-US/evaluation.json                |  3 +
 web/i18n/zh-Hans/evaluation.json              |  3 +
 11 files changed, 233 insertions(+), 42 deletions(-)
 create mode 100644 web/app/components/evaluation/components/conditions-section/add-condition-select.tsx

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 5146e49535..1346b363ce 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -1,5 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import Evaluation from '..'
+import ConditionsSection from '../components/conditions-section'
 import { useEvaluationStore } from '../store'
 
 const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
@@ -150,6 +151,50 @@ describe('Evaluation', () => {
     expect(screen.queryByPlaceholderText('evaluation.conditions.valuePlaceholder')).not.toBeInTheDocument()
   })
 
+  it('should add a condition from grouped metric dropdown items', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-conditions-dropdown'
+    const store = useEvaluationStore.getState()
+
+    act(() => {
+      store.ensureResource(resourceType, resourceId)
+      store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+      store.addBuiltinMetric(resourceType, resourceId, 'faithfulness', [
+        { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+      ])
+      store.addCustomMetric(resourceType, resourceId)
+
+      const customMetric = useEvaluationStore.getState().resources['apps:app-conditions-dropdown'].metrics.find(metric => metric.kind === 'custom-workflow')!
+      store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+        workflowId: 'workflow-1',
+        workflowAppId: 'workflow-app-1',
+        workflowName: 'Review Workflow',
+      })
+      store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+        id: 'reason',
+        valueType: 'string',
+      }])
+    })
+
+    render(<ConditionsSection resourceType={resourceType} resourceId={resourceId} />)
+
+    fireEvent.click(screen.getByRole('combobox', { name: 'evaluation.conditions.addCondition' }))
+
+    expect(screen.getByText('Faithfulness')).toBeInTheDocument()
+    expect(screen.getByText('Review Workflow')).toBeInTheDocument()
+    expect(screen.getByText('Retriever Node')).toBeInTheDocument()
+    expect(screen.getByText('reason')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.conditions.valueTypes.number')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.conditions.valueTypes.string')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('option', { name: /reason/i }))
+
+    const condition = useEvaluationStore.getState().resources['apps:app-conditions-dropdown'].judgmentConfig.conditions[0]
+
+    expect(condition.variableSelector).toEqual(['workflow-1', 'reason'])
+    expect(screen.getAllByText('Review Workflow').length).toBeGreaterThan(0)
+  })
+
   it('should render the metric no-node empty state', () => {
     mockUseAvailableEvaluationMetrics.mockReturnValue({
       data: {
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index 8f6e557d5a..eb7cd74b4d 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -132,6 +132,35 @@ describe('evaluation store', () => {
     expect(getAllowedOperators(state.metrics, condition.variableSelector)).toEqual(['=', '≠', '>', '<', '≥', '≤', 'is null', 'is not null'])
   })
 
+  it('should add a condition from the selected custom metric output', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-condition-selector'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    const customMetric = useEvaluationStore.getState().resources['apps:app-condition-selector'].metrics.find(metric => metric.kind === 'custom-workflow')!
+    store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+      workflowId: config.workflowOptions[0].id,
+      workflowAppId: 'custom-workflow-app-id',
+      workflowName: config.workflowOptions[0].label,
+    })
+    store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+      id: 'reason',
+      valueType: 'string',
+    }])
+
+    store.addCondition(resourceType, resourceId, [config.workflowOptions[0].id, 'reason'])
+
+    const condition = useEvaluationStore.getState().resources['apps:app-condition-selector'].judgmentConfig.conditions[0]
+
+    expect(condition.variableSelector).toEqual([config.workflowOptions[0].id, 'reason'])
+    expect(condition.comparisonOperator).toBe('contains')
+    expect(condition.value).toBeNull()
+  })
+
   it('should clear values for operators without values', () => {
     const resourceType = 'apps'
     const resourceId = 'app-3'
diff --git a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
new file mode 100644
index 0000000000..9e370e565a
--- /dev/null
+++ b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+} from '@/app/components/base/ui/select'
+import { cn } from '@/utils/classnames'
+import { useEvaluationStore } from '../../store'
+import { getConditionMetricValueTypeTranslationKey } from '../../utils'
+
+type AddConditionSelectProps = EvaluationResourceProps & {
+  metricOptionGroups: ConditionMetricOptionGroup[]
+  disabled: boolean
+}
+
+const AddConditionSelect = ({
+  resourceType,
+  resourceId,
+  metricOptionGroups,
+  disabled,
+}: AddConditionSelectProps) => {
+  const { t } = useTranslation('evaluation')
+  const addCondition = useEvaluationStore(state => state.addCondition)
+  const [selectKey, setSelectKey] = useState(0)
+
+  return (
+    <Select key={selectKey}>
+      <SelectTrigger
+        aria-label={t('conditions.addCondition')}
+        className={cn(
+          'inline-flex w-auto min-w-0 border-none bg-transparent px-0 py-0 text-text-accent shadow-none hover:bg-transparent focus-visible:bg-transparent',
+          disabled && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+        )}
+        disabled={disabled}
+      >
+        <span aria-hidden="true" className="i-ri-add-line h-4 w-4" />
+        {t('conditions.addCondition')}
+      </SelectTrigger>
+      <SelectContent placement="bottom-start" popupClassName="w-[320px]">
+        {metricOptionGroups.map(group => (
+          <SelectGroup key={group.label}>
+            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
+            {group.options.map(option => (
+              <SelectItem
+                key={option.id}
+                value={option.id}
+                className="h-auto gap-0 px-3 py-2"
+                onClick={() => {
+                  addCondition(resourceType, resourceId, option.variableSelector)
+                  setSelectKey(current => current + 1)
+                }}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <span className="truncate system-sm-medium text-text-secondary">{option.itemLabel}</span>
+                  <span className="ml-auto shrink-0 system-xs-medium text-text-tertiary">
+                    {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
+                  </span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default AddConditionSelect
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 2825488893..7cb73f1ca7 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -24,6 +24,8 @@ import { getAllowedOperators, requiresConditionValue, useEvaluationResource, use
 import {
   buildConditionMetricOptions,
   getComparisonOperatorLabel,
+  getConditionMetricValueTypeTranslationKey,
+  groupConditionMetricOptions,
   isSelectorEqual,
   serializeVariableSelector,
 } from '../../utils'
@@ -75,9 +77,9 @@ const ConditionMetricLabel = ({
     <div className="flex min-w-0 items-center gap-2 px-1">
       <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
         <span className={cn(getMetricValueTypeIconClassName(metric.valueType), 'h-3 w-3 shrink-0 text-text-secondary')} />
-        <span className="truncate system-xs-medium text-text-secondary">{metric.label}</span>
+        <span className="truncate system-xs-medium text-text-secondary">{metric.itemLabel}</span>
       </div>
-      <span className="shrink-0 system-xs-regular text-text-tertiary">{metric.group}</span>
+      <span className="shrink-0 system-xs-regular text-text-tertiary">{metric.groupLabel}</span>
     </div>
   )
 }
@@ -88,11 +90,9 @@ const ConditionMetricSelect = ({
   placeholder,
   onChange,
 }: ConditionMetricSelectProps) => {
+  const { t } = useTranslation('evaluation')
   const groupedMetricOptions = useMemo(() => {
-    return Object.entries(metricOptions.reduce<Record<string, ConditionMetricOption[]>>((acc, option) => {
-      acc[option.group] = [...(acc[option.group] ?? []), option]
-      return acc
-    }, {}))
+    return groupConditionMetricOptions(metricOptions)
   }, [metricOptions])
 
   return (
@@ -108,15 +108,17 @@ const ConditionMetricSelect = ({
         <ConditionMetricLabel metric={metric} placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent popupClassName="w-[360px]">
-        {groupedMetricOptions.map(([groupName, options]) => (
-          <SelectGroup key={groupName}>
-            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{groupName}</SelectGroupLabel>
-            {options.map(option => (
+        {groupedMetricOptions.map(group => (
+          <SelectGroup key={group.label}>
+            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
+            {group.options.map(option => (
               <SelectItem key={option.id} value={serializeVariableSelector(option.variableSelector)}>
-                <div className="flex min-w-0 items-center gap-2">
+                <div className="flex min-w-0 flex-1 items-center gap-2">
                   <span className={cn(getMetricValueTypeIconClassName(option.valueType), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
-                  <span className="truncate">{option.label}</span>
-                  <span className="shrink-0 text-text-quaternary">{option.description}</span>
+                  <span className="truncate">{option.itemLabel}</span>
+                  <span className="ml-auto shrink-0 system-xs-medium text-text-quaternary">
+                    {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
+                  </span>
                 </div>
               </SelectItem>
             ))}
diff --git a/web/app/components/evaluation/components/conditions-section/index.tsx b/web/app/components/evaluation/components/conditions-section/index.tsx
index d00830c1c8..fb28a56a38 100644
--- a/web/app/components/evaluation/components/conditions-section/index.tsx
+++ b/web/app/components/evaluation/components/conditions-section/index.tsx
@@ -3,10 +3,10 @@
 import type { EvaluationResourceProps } from '../../types'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
-import { useEvaluationResource, useEvaluationStore } from '../../store'
-import { buildConditionMetricOptions } from '../../utils'
+import { useEvaluationResource } from '../../store'
+import { buildConditionMetricOptions, groupConditionMetricOptions } from '../../utils'
 import { InlineSectionHeader } from '../section-header'
+import AddConditionSelect from './add-condition-select'
 import ConditionGroup from './condition-group'
 
 const ConditionsSection = ({
@@ -15,8 +15,8 @@ const ConditionsSection = ({
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
   const resource = useEvaluationResource(resourceType, resourceId)
-  const addCondition = useEvaluationStore(state => state.addCondition)
   const conditionMetricOptions = useMemo(() => buildConditionMetricOptions(resource.metrics), [resource.metrics])
+  const groupedConditionMetricOptions = useMemo(() => groupConditionMetricOptions(conditionMetricOptions), [conditionMetricOptions])
   const canAddCondition = conditionMetricOptions.length > 0
 
   return (
@@ -37,18 +37,12 @@ const ConditionsSection = ({
             resourceId={resourceId}
           />
         )}
-        <button
-          type="button"
-          className={cn(
-            'inline-flex items-center system-sm-medium text-text-accent',
-            !canAddCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
-          )}
+        <AddConditionSelect
+          resourceType={resourceType}
+          resourceId={resourceId}
+          metricOptionGroups={groupedConditionMetricOptions}
           disabled={!canAddCondition}
-          onClick={() => addCondition(resourceType, resourceId)}
-        >
-          <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
-          {t('conditions.addCondition')}
-        </button>
+        />
       </div>
     </section>
   )
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index e29d2a6bdb..0f547e7488 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -330,8 +330,17 @@ export function createCustomMetric(): EvaluationMetric {
   }
 }
 
-export const buildConditionItem = (metrics: EvaluationMetric[]): JudgmentConditionItem => {
-  const metricOption = buildConditionMetricOptions(metrics)[0]
+export const buildConditionItem = (
+  metrics: EvaluationMetric[],
+  variableSelector?: [string, string] | null,
+): JudgmentConditionItem => {
+  const metricOptions = buildConditionMetricOptions(metrics)
+  const metricOption = variableSelector
+    ? metricOptions.find(option =>
+      option.variableSelector[0] === variableSelector[0]
+      && option.variableSelector[1] === variableSelector[1],
+    ) ?? metricOptions[0]
+    : metricOptions[0]
   const comparisonOperator = metricOption ? getDefaultComparisonOperator(metricOption.valueType) : 'is'
 
   return {
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 454c8ee569..cfc006b595 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -61,7 +61,11 @@ type EvaluationStore = {
     patch: { inputVariableId?: string | null, outputVariableId?: string | null },
   ) => void
   setConditionLogicalOperator: (resourceType: EvaluationResourceType, resourceId: string, logicalOperator: 'and' | 'or') => void
-  addCondition: (resourceType: EvaluationResourceType, resourceId: string) => void
+  addCondition: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    variableSelector?: [string, string] | null,
+  ) => void
   removeCondition: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string) => void
   updateConditionMetric: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string, variableSelector: [string, string]) => void
   updateConditionOperator: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string, operator: ComparisonOperator) => void
@@ -270,13 +274,13 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
-  addCondition: (resourceType, resourceId) => {
+  addCondition: (resourceType, resourceId, variableSelector) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
         judgmentConfig: {
           ...resource.judgmentConfig,
-          conditions: [...resource.judgmentConfig.conditions, buildConditionItem(resource.metrics)],
+          conditions: [...resource.judgmentConfig.conditions, buildConditionItem(resource.metrics, variableSelector)],
         },
       })),
     }))
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index acfcfdd11b..baa73f6c3f 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -112,13 +112,17 @@ export type JudgmentConfig = {
 
 export type ConditionMetricOption = {
   id: string
-  group: string
-  label: string
-  description: string
+  groupLabel: string
+  itemLabel: string
   valueType: ConditionMetricValueType
   variableSelector: [string, string]
 }
 
+export type ConditionMetricOptionGroup = {
+  label: string
+  options: ConditionMetricOption[]
+}
+
 export type BatchTestRecord = {
   id: string
   fileName: string
diff --git a/web/app/components/evaluation/utils.ts b/web/app/components/evaluation/utils.ts
index 48b75d5c3e..3fba8158d6 100644
--- a/web/app/components/evaluation/utils.ts
+++ b/web/app/components/evaluation/utils.ts
@@ -2,6 +2,7 @@ import type { TFunction } from 'i18next'
 import type {
   ComparisonOperator,
   ConditionMetricOption,
+  ConditionMetricOptionGroup,
   ConditionMetricValueType,
   EvaluationMetric,
 } from './types'
@@ -69,9 +70,8 @@ export const buildConditionMetricOptions = (metrics: EvaluationMetric[]): Condit
       return (metric.nodeInfoList ?? []).map((nodeInfo) => {
         return {
           id: `${nodeInfo.node_id}:${metric.optionId}`,
-          group: nodeInfo.title,
-          label: metric.label,
-          description: nodeInfo.type,
+          groupLabel: metric.label,
+          itemLabel: nodeInfo.title || nodeInfo.node_id,
           valueType: metric.valueType,
           variableSelector: [nodeInfo.node_id, metric.optionId] as [string, string],
         }
@@ -86,9 +86,8 @@ export const buildConditionMetricOptions = (metrics: EvaluationMetric[]): Condit
     return customConfig.outputs.map((output) => {
       return {
         id: `${customConfig.workflowId}:${output.id}`,
-        group: customConfig.workflowName ?? metric.label,
-        label: output.id,
-        description: customConfig.workflowName ?? metric.label,
+        groupLabel: customConfig.workflowName ?? metric.label,
+        itemLabel: output.id,
         valueType: getMetricValueType(output.valueType),
         variableSelector: [customConfig.workflowId, output.id] as [string, string],
       }
@@ -96,6 +95,30 @@ export const buildConditionMetricOptions = (metrics: EvaluationMetric[]): Condit
   })
 }
 
+export const groupConditionMetricOptions = (metricOptions: ConditionMetricOption[]): ConditionMetricOptionGroup[] => {
+  const groups = metricOptions.reduce<Map<string, ConditionMetricOption[]>>((acc, option) => {
+    acc.set(option.groupLabel, [...(acc.get(option.groupLabel) ?? []), option])
+    return acc
+  }, new Map())
+
+  return Array.from(groups.entries()).map(([label, options]) => ({
+    label,
+    options,
+  }))
+}
+
+const conditionMetricValueTypeTranslationKeys = {
+  string: 'conditions.valueTypes.string',
+  number: 'conditions.valueTypes.number',
+  boolean: 'conditions.valueTypes.boolean',
+} as const
+
+export const getConditionMetricValueTypeTranslationKey = (
+  valueType: ConditionMetricValueType,
+) => {
+  return conditionMetricValueTypeTranslationKeys[valueType]
+}
+
 export const serializeVariableSelector = (value: [string, string] | null | undefined) => {
   return value ? JSON.stringify(value) : ''
 }
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 92f6b2a643..33191cd39a 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -43,6 +43,9 @@
   "conditions.selectValue": "Choose a value",
   "conditions.title": "Judgment Conditions",
   "conditions.valuePlaceholder": "Enter a value",
+  "conditions.valueTypes.boolean": "Boolean",
+  "conditions.valueTypes.number": "Number",
+  "conditions.valueTypes.string": "String",
   "description": "Configure automated testing to grade your application's performance.",
   "history.columns.creator": "Creator",
   "history.columns.status": "Status",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 8a1ff78ebf..04883d95e1 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -43,6 +43,9 @@
   "conditions.selectValue": "选择值",
   "conditions.title": "判定条件",
   "conditions.valuePlaceholder": "输入值",
+  "conditions.valueTypes.boolean": "布尔",
+  "conditions.valueTypes.number": "数值",
+  "conditions.valueTypes.string": "文本",
   "description": "配置自动化测试，对应用表现进行评分。",
   "judgeModel.description": "选择用于打分和判定评测结果的模型。",
   "judgeModel.title": "判定模型",

From 40284d9f9534be897584ebba28a0e63b549f8900 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 9 Apr 2026 21:19:51 +0800
Subject: [PATCH 075/108] refactor(web): batch test of evaluation

---
 .../components/batch-test-panel.tsx           | 179 ------------------
 .../batch-test-panel/history-tab.tsx          |  49 +++++
 .../components/batch-test-panel/index.tsx     |  85 +++++++++
 .../batch-test-panel/input-fields-tab.tsx     | 103 ++++++++++
 4 files changed, 237 insertions(+), 179 deletions(-)
 delete mode 100644 web/app/components/evaluation/components/batch-test-panel.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/index.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx

diff --git a/web/app/components/evaluation/components/batch-test-panel.tsx b/web/app/components/evaluation/components/batch-test-panel.tsx
deleted file mode 100644
index 2d95abf86d..0000000000
--- a/web/app/components/evaluation/components/batch-test-panel.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-'use client'
-
-import type { EvaluationResourceProps } from '../types'
-import { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
-import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../mock'
-import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../store'
-import { TAB_CLASS_NAME } from '../utils'
-
-const BatchTestPanel = ({
-  resourceType,
-  resourceId,
-}: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const requirementFields = config.fieldOptions
-    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
-    .slice(0, 4)
-  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
-  const tabLabels = {
-    'input-fields': t('batch.tabs.input-fields'),
-    'history': t('batch.tabs.history'),
-  }
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
-  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const isRunnable = isEvaluationRunnable(resource)
-  const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
-
-  const handleDownloadTemplate = () => {
-    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
-    const link = document.createElement('a')
-    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
-    link.download = config.templateFileName
-    link.click()
-  }
-
-  const handleRun = () => {
-    if (!isRunnable) {
-      toast.warning(t('batch.validation'))
-      return
-    }
-
-    runBatchTest(resourceType, resourceId)
-  }
-
-  return (
-    <div className="flex h-full min-h-0 flex-col bg-background-default">
-      <div className="px-6 py-4">
-        <div className="text-text-primary system-xl-semibold">{t('batch.title')}</div>
-        <div className="mt-1 text-text-tertiary system-sm-regular">{t('batch.description')}</div>
-        <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
-          <div className="flex items-start gap-3">
-            <span aria-hidden="true" className="i-ri-alert-fill mt-0.5 h-4 w-4 shrink-0 text-text-warning" />
-            <div className="text-text-tertiary system-xs-regular">{t('batch.noticeDescription')}</div>
-          </div>
-        </div>
-      </div>
-      <div className="border-b border-divider-subtle px-6">
-        <div className="flex gap-4">
-          {(['input-fields', 'history'] as const).map(tab => (
-            <button
-              key={tab}
-              type="button"
-              className={cn(
-                TAB_CLASS_NAME,
-                'flex-none rounded-none border-b-2 border-transparent px-0 pb-2.5 pt-2 uppercase',
-                resource.activeBatchTab === tab ? 'border-text-accent-secondary text-text-primary' : 'text-text-tertiary',
-              )}
-              onClick={() => setBatchTab(resourceType, resourceId, tab)}
-            >
-              {tabLabels[tab]}
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
-        {resource.activeBatchTab === 'input-fields' && (
-          <div className="space-y-5">
-            <div>
-              <div className="text-text-primary system-md-semibold">{t('batch.requirementsTitle')}</div>
-              <div className="mt-1 text-text-tertiary system-xs-regular">{t('batch.requirementsDescription')}</div>
-              <div className="mt-3 rounded-xl bg-background-section p-3">
-                {displayedRequirementFields.map(field => (
-                  <div key={field.id} className="flex items-center py-1">
-                    <div className="rounded px-1 py-0.5 text-text-tertiary system-xs-medium">
-                      {field.label}
-                    </div>
-                    <div className="text-[10px] leading-3 text-text-quaternary">
-                      {field.type}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="space-y-3">
-              <Button variant="secondary" className="w-full justify-center" disabled={!isPanelReady} onClick={handleDownloadTemplate}>
-                <span aria-hidden="true" className="i-ri-download-line mr-1 h-4 w-4" />
-                {t('batch.downloadTemplate')}
-              </Button>
-              <input
-                ref={fileInputRef}
-                hidden
-                type="file"
-                accept=".csv,.xlsx"
-                onChange={(event) => {
-                  const file = event.target.files?.[0]
-                  setUploadedFileName(resourceType, resourceId, file?.name ?? null)
-                }}
-              />
-              {isPanelReady && (
-                <button
-                  type="button"
-                  className="flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
-                  onClick={() => fileInputRef.current?.click()}
-                >
-                  <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
-                  <div className="mt-2 text-text-primary system-sm-semibold">{t('batch.uploadTitle')}</div>
-                  <div className="mt-1 text-text-tertiary system-xs-regular">{resource.uploadedFileName ?? t('batch.uploadHint')}</div>
-                </button>
-              )}
-            </div>
-            {!isRunnable && (
-              <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 text-text-tertiary system-xs-regular">
-                {t('batch.validation')}
-              </div>
-            )}
-            <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
-              {t('batch.run')}
-            </Button>
-          </div>
-        )}
-        {resource.activeBatchTab === 'history' && (
-          <div className="space-y-3">
-            {resource.batchRecords.length === 0 && (
-              <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary system-sm-regular">
-                {t('batch.emptyHistory')}
-              </div>
-            )}
-            {resource.batchRecords.map(record => (
-              <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <div className="text-text-primary system-sm-semibold">{record.summary}</div>
-                    <div className="mt-1 text-text-tertiary system-xs-regular">{record.fileName}</div>
-                  </div>
-                  <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
-                    {record.status === 'running'
-                      ? (
-                          <span className="flex items-center gap-1">
-                            <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
-                            {statusLabels.running}
-                          </span>
-                        )
-                      : statusLabels[record.status]}
-                  </Badge>
-                </div>
-                <div className="mt-3 text-text-tertiary system-xs-regular">{record.startedAt}</div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default BatchTestPanel
diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
new file mode 100644
index 0000000000..728b3e6c99
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -0,0 +1,49 @@
+import type { BatchTestRecord } from '../../types'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+
+type HistoryTabProps = {
+  batchRecords: BatchTestRecord[]
+}
+
+const HistoryTab = ({ batchRecords }: HistoryTabProps) => {
+  const { t } = useTranslation('evaluation')
+  const statusLabels = {
+    running: t('batch.status.running'),
+    success: t('batch.status.success'),
+    failed: t('batch.status.failed'),
+  }
+
+  return (
+    <div className="space-y-3">
+      {batchRecords.length === 0 && (
+        <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
+          {t('batch.emptyHistory')}
+        </div>
+      )}
+      {batchRecords.map(record => (
+        <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <div className="system-sm-semibold text-text-primary">{record.summary}</div>
+              <div className="mt-1 system-xs-regular text-text-tertiary">{record.fileName}</div>
+            </div>
+            <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
+              {record.status === 'running'
+                ? (
+                    <span className="flex items-center gap-1">
+                      <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
+                      {statusLabels.running}
+                    </span>
+                  )
+                : statusLabels[record.status]}
+            </Badge>
+          </div>
+          <div className="mt-3 system-xs-regular text-text-tertiary">{record.startedAt}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default HistoryTab
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
new file mode 100644
index 0000000000..818f83e5d5
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import type { BatchTestTab, EvaluationResourceProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+import { getEvaluationMockConfig } from '../../mock'
+import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import { TAB_CLASS_NAME } from '../../utils'
+import HistoryTab from './history-tab'
+import InputFieldsTab from './input-fields-tab'
+
+const BATCH_TABS: BatchTestTab[] = ['input-fields', 'history']
+
+const BatchTestPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const requirementFields = config.fieldOptions
+    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
+    .slice(0, 4)
+  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
+  const tabLabels: Record<BatchTestTab, string> = {
+    'input-fields': t('batch.tabs.input-fields'),
+    'history': t('batch.tabs.history'),
+  }
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const isRunnable = isEvaluationRunnable(resource)
+  const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
+
+  const handleRun = () => runBatchTest(resourceType, resourceId)
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default">
+      <div className="px-6 py-4">
+        <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
+        <div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
+        <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
+          <div className="flex items-start gap-3">
+            <span aria-hidden="true" className="mt-0.5 i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning" />
+            <div className="system-xs-regular text-text-tertiary">{t('batch.noticeDescription')}</div>
+          </div>
+        </div>
+      </div>
+      <div className="border-b border-divider-subtle px-6">
+        <div className="flex gap-4">
+          {BATCH_TABS.map(tab => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                TAB_CLASS_NAME,
+                'flex-none rounded-none border-b-2 border-transparent px-0 pt-2 pb-2.5 uppercase',
+                resource.activeBatchTab === tab ? 'border-text-accent-secondary text-text-primary' : 'text-text-tertiary',
+              )}
+              onClick={() => setBatchTab(resourceType, resourceId, tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
+        {resource.activeBatchTab === 'input-fields' && (
+          <InputFieldsTab
+            isPanelReady={isPanelReady}
+            isRunnable={isRunnable}
+            requirementFields={displayedRequirementFields}
+            templateFileName={config.templateFileName}
+            uploadedFileName={resource.uploadedFileName}
+            onRun={handleRun}
+            onUploadFileNameChange={uploadedFileName => setUploadedFileName(resourceType, resourceId, uploadedFileName)}
+          />
+        )}
+        {resource.activeBatchTab === 'history' && <HistoryTab batchRecords={resource.batchRecords} />}
+      </div>
+    </div>
+  )
+}
+
+export default BatchTestPanel
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
new file mode 100644
index 0000000000..e43da15e9e
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -0,0 +1,103 @@
+import type { EvaluationFieldOption } from '../../types'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
+
+type InputFieldsTabProps = {
+  requirementFields: EvaluationFieldOption[]
+  templateFileName: string
+  uploadedFileName: string | null
+  isPanelReady: boolean
+  isRunnable: boolean
+  onRun: () => void
+  onUploadFileNameChange: (uploadedFileName: string | null) => void
+}
+
+const InputFieldsTab = ({
+  requirementFields,
+  templateFileName,
+  uploadedFileName,
+  isPanelReady,
+  isRunnable,
+  onRun,
+  onUploadFileNameChange,
+}: InputFieldsTabProps) => {
+  const { t } = useTranslation('evaluation')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDownloadTemplate = () => {
+    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = templateFileName
+    link.click()
+  }
+
+  const handleRun = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    onRun()
+  }
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
+        <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
+        <div className="mt-3 rounded-xl bg-background-section p-3">
+          {requirementFields.map(field => (
+            <div key={field.id} className="flex items-center py-1">
+              <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
+                {field.label}
+              </div>
+              <div className="text-[10px] leading-3 text-text-quaternary">
+                {field.type}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="space-y-3">
+        <Button variant="secondary" className="w-full justify-center" disabled={!isPanelReady} onClick={handleDownloadTemplate}>
+          <span aria-hidden="true" className="mr-1 i-ri-download-line h-4 w-4" />
+          {t('batch.downloadTemplate')}
+        </Button>
+        <input
+          ref={fileInputRef}
+          hidden
+          type="file"
+          accept=".csv,.xlsx"
+          onChange={(event) => {
+            const file = event.target.files?.[0]
+            onUploadFileNameChange(file?.name ?? null)
+          }}
+        />
+        {isPanelReady && (
+          <button
+            type="button"
+            className="flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
+            <div className="mt-2 system-sm-semibold text-text-primary">{t('batch.uploadTitle')}</div>
+            <div className="mt-1 system-xs-regular text-text-tertiary">{uploadedFileName ?? t('batch.uploadHint')}</div>
+          </button>
+        )}
+      </div>
+      {!isRunnable && (
+        <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 system-xs-regular text-text-tertiary">
+          {t('batch.validation')}
+        </div>
+      )}
+      <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
+        {t('batch.run')}
+      </Button>
+    </div>
+  )
+}
+
+export default InputFieldsTab

From 03325e9750067cb29a7a1e3b7b8b06786c3ac9b5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 10:58:40 +0800
Subject: [PATCH 076/108] feat(web): run history of batch test

---
 .../batch-test-panel/history-tab.tsx          | 188 ++++++++++++++----
 .../components/batch-test-panel/index.tsx     |   2 +-
 web/i18n/en-US/evaluation.json                |   5 +
 web/i18n/zh-Hans/evaluation.json              |  14 ++
 web/types/evaluation.ts                       |  15 +-
 5 files changed, 186 insertions(+), 38 deletions(-)

diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
index 728b3e6c99..7080e175c4 100644
--- a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -1,47 +1,163 @@
-import type { BatchTestRecord } from '../../types'
+import type { EvaluationResourceProps } from '../../types'
+import type { EvaluationLogFile } from '@/types/evaluation'
+import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
+import Pagination from '@/app/components/base/pagination'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { consoleClient, consoleQuery } from '@/service/client'
+import { downloadUrl } from '@/utils/download'
 
-type HistoryTabProps = {
-  batchRecords: BatchTestRecord[]
+const PAGE_SIZE = 16
+const LOADING_ROW_IDS = ['1', '2', '3', '4', '5', '6']
+
+const formatCreatedAt = (createdAt: string) => {
+  if (!createdAt)
+    return '-'
+
+  return createdAt.includes('T') ? createdAt.slice(0, 10) : createdAt
 }
 
-const HistoryTab = ({ batchRecords }: HistoryTabProps) => {
+const HistoryTab = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
+  const [page, setPage] = useState(0)
+  const logsQuery = useQuery({
+    ...consoleQuery.evaluation.logs.queryOptions({
+      input: {
+        params: {
+          targetType: resourceType,
+          targetId: resourceId,
+        },
+        query: {
+          page: page + 1,
+          page_size: PAGE_SIZE,
+        },
+      },
+      refetchOnWindowFocus: false,
+    }),
+    placeholderData: keepPreviousData,
+  })
+  const fileDownloadMutation = useMutation({
+    mutationFn: async (file: EvaluationLogFile) => {
+      const fileInfo = await consoleClient.evaluation.file({
+        params: {
+          targetType: resourceType,
+          targetId: resourceId,
+          fileId: file.id,
+        },
+      })
+
+      downloadUrl({ url: fileInfo.download_url, fileName: file.name })
+    },
+  })
+  const records = logsQuery.data?.data ?? []
+  const total = logsQuery.data?.total ?? 0
+  const isInitialLoading = logsQuery.isLoading && !logsQuery.data
 
   return (
-    <div className="space-y-3">
-      {batchRecords.length === 0 && (
-        <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
-          {t('batch.emptyHistory')}
-        </div>
-      )}
-      {batchRecords.map(record => (
-        <div key={record.id} className="rounded-2xl border border-divider-subtle bg-background-default-subtle p-4">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <div className="system-sm-semibold text-text-primary">{record.summary}</div>
-              <div className="mt-1 system-xs-regular text-text-tertiary">{record.fileName}</div>
-            </div>
-            <Badge className={record.status === 'failed' ? 'badge-warning' : record.status === 'success' ? 'badge-accent' : ''}>
-              {record.status === 'running'
-                ? (
-                    <span className="flex items-center gap-1">
-                      <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
-                      {statusLabels.running}
-                    </span>
-                  )
-                : statusLabels[record.status]}
-            </Badge>
+    <div className="flex min-h-full flex-col">
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <table className="w-full table-fixed border-collapse overflow-hidden rounded-md">
+          <colgroup>
+            <col className="w-[120px]" />
+            <col className="w-[95px]" />
+            <col className="w-[80px]" />
+            <col className="w-[67px]" />
+            <col className="w-[40px]" />
+          </colgroup>
+          <thead>
+            <tr className="border-b border-divider-regular">
+              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">
+                <span className="inline-flex items-center gap-0.5">
+                  {t('history.columns.time')}
+                  <span aria-hidden="true" className="i-ri-arrow-down-line h-3.5 w-3.5" />
+                </span>
+              </th>
+              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</th>
+              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</th>
+              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</th>
+              <th className="h-7 text-center text-text-tertiary">
+                <span aria-hidden="true" className="i-ri-download-2-line inline-block h-3.5 w-3.5" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {isInitialLoading && LOADING_ROW_IDS.map(rowId => (
+              <tr key={rowId} className="border-b border-divider-subtle">
+                <td colSpan={5} className="h-10 px-3">
+                  <div className="h-4 animate-pulse rounded bg-background-section" />
+                </td>
+              </tr>
+            ))}
+            {!isInitialLoading && records.map(record => (
+              <tr key={`${record.created_at}-${record.test_file.id}`} className="border-b border-divider-subtle">
+                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{formatCreatedAt(record.created_at)}</td>
+                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.created_by}</td>
+                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.version || '-'}</td>
+                <td className="h-10 px-3 text-center">
+                  {record.result_file
+                    ? <span aria-label={t('history.status.completed')} className="i-ri-checkbox-circle-fill inline-block h-4 w-4 text-util-colors-green-green-600" />
+                    : <span aria-label={t('history.status.running')} className="i-ri-loader-4-line inline-block h-4 w-4 animate-spin text-text-accent" />}
+                </td>
+                <td className="h-10 text-center">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={(
+                        <button
+                          type="button"
+                          aria-label={t('history.actions.open')}
+                          className="inline-flex h-8 w-8 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                        />
+                      )}
+                    >
+                      <span aria-hidden="true" className="i-ri-more-2-fill h-4 w-4" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent popupClassName="w-[180px] rounded-lg border-[0.5px] border-components-panel-border py-1 shadow-lg">
+                      <DropdownMenuItem
+                        className="gap-2"
+                        onClick={() => fileDownloadMutation.mutate(record.test_file)}
+                      >
+                        <span aria-hidden="true" className="i-ri-file-download-line h-4 w-4" />
+                        {t('history.actions.downloadTestFile')}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        className="gap-2"
+                        disabled={!record.result_file}
+                        onClick={() => record.result_file && fileDownloadMutation.mutate(record.result_file)}
+                      >
+                        <span aria-hidden="true" className="i-ri-download-2-line h-4 w-4" />
+                        {t('history.actions.downloadResultFile')}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {!isInitialLoading && records.length === 0 && (
+          <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
+            {t('history.empty')}
           </div>
-          <div className="mt-3 system-xs-regular text-text-tertiary">{record.startedAt}</div>
-        </div>
-      ))}
+        )}
+      </div>
+      {total > PAGE_SIZE && (
+        <Pagination
+          className="px-0 py-3"
+          current={page}
+          limit={PAGE_SIZE}
+          total={total}
+          onChange={setPage}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 818f83e5d5..78aac12787 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -76,7 +76,7 @@ const BatchTestPanel = ({
             onUploadFileNameChange={uploadedFileName => setUploadedFileName(resourceType, resourceId, uploadedFileName)}
           />
         )}
-        {resource.activeBatchTab === 'history' && <HistoryTab batchRecords={resource.batchRecords} />}
+        {resource.activeBatchTab === 'history' && <HistoryTab resourceType={resourceType} resourceId={resourceId} />}
       </div>
     </div>
   )
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 33191cd39a..3558d5e9e2 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -47,6 +47,9 @@
   "conditions.valueTypes.number": "Number",
   "conditions.valueTypes.string": "String",
   "description": "Configure automated testing to grade your application's performance.",
+  "history.actions.downloadResultFile": "Download result",
+  "history.actions.downloadTestFile": "Download test file",
+  "history.actions.open": "Open history actions",
   "history.columns.creator": "Creator",
   "history.columns.status": "Status",
   "history.columns.time": "Time",
@@ -55,6 +58,8 @@
   "history.empty": "No test history yet",
   "history.latestVersion": "Latest",
   "history.searchPlaceholder": "Search",
+  "history.status.completed": "Completed",
+  "history.status.running": "Running",
   "history.title": "Test History",
   "judgeModel.description": "Choose the model used to score your evaluation results.",
   "judgeModel.title": "Judge Model",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 04883d95e1..db167bf50d 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -47,6 +47,20 @@
   "conditions.valueTypes.number": "数值",
   "conditions.valueTypes.string": "文本",
   "description": "配置自动化测试，对应用表现进行评分。",
+  "history.actions.downloadResultFile": "下载结果文件",
+  "history.actions.downloadTestFile": "下载测试文件",
+  "history.actions.open": "打开历史记录操作",
+  "history.columns.creator": "创建人",
+  "history.columns.status": "状态",
+  "history.columns.time": "时间",
+  "history.columns.version": "版本",
+  "history.creatorYou": "你",
+  "history.empty": "还没有测试历史",
+  "history.latestVersion": "最新",
+  "history.searchPlaceholder": "搜索",
+  "history.status.completed": "已完成",
+  "history.status.running": "运行中",
+  "history.title": "测试历史",
   "judgeModel.description": "选择用于打分和判定评测结果的模型。",
   "judgeModel.title": "判定模型",
   "metrics.add": "添加指标",
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index 30070cfb57..547b9cfa41 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -77,6 +77,19 @@ export type EvaluationRun = {
   created_at: number
 }
 
+export type EvaluationLogFile = {
+  id: string
+  name: string
+}
+
+export type EvaluationLog = {
+  created_at: string
+  created_by: string
+  test_file: EvaluationLogFile
+  result_file: EvaluationLogFile | null
+  version: string
+}
+
 export type EvaluationRunMetric = {
   name?: string
   value?: unknown
@@ -97,7 +110,7 @@ export type EvaluationRunItem = {
 }
 
 export type EvaluationLogsResponse = {
-  data: EvaluationRun[]
+  data: EvaluationLog[]
   total: number
   page: number
   page_size: number

From 577707ae509c49e7c4372cad65593f68a84289d1 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 11:10:24 +0800
Subject: [PATCH 077/108] refactor(web): input fields

---
 .../components/batch-test-panel/index.tsx     | 17 ++--------
 .../batch-test-panel/input-fields-tab.tsx     | 34 ++++++++++---------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 78aac12787..0736de4f93 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -3,7 +3,6 @@
 import type { BatchTestTab, EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
-import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import { TAB_CLASS_NAME } from '../../utils'
 import HistoryTab from './history-tab'
@@ -16,24 +15,15 @@ const BatchTestPanel = ({
   resourceId,
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
-  const config = getEvaluationMockConfig(resourceType)
-  const requirementFields = config.fieldOptions
-    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
-    .slice(0, 4)
-  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
   const tabLabels: Record<BatchTestTab, string> = {
     'input-fields': t('batch.tabs.input-fields'),
     'history': t('batch.tabs.history'),
   }
   const resource = useEvaluationResource(resourceType, resourceId)
   const setBatchTab = useEvaluationStore(state => state.setBatchTab)
-  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
   const isRunnable = isEvaluationRunnable(resource)
   const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
 
-  const handleRun = () => runBatchTest(resourceType, resourceId)
-
   return (
     <div className="flex h-full min-h-0 flex-col bg-background-default">
       <div className="px-6 py-4">
@@ -67,13 +57,10 @@ const BatchTestPanel = ({
       <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
         {resource.activeBatchTab === 'input-fields' && (
           <InputFieldsTab
+            resourceType={resourceType}
+            resourceId={resourceId}
             isPanelReady={isPanelReady}
             isRunnable={isRunnable}
-            requirementFields={displayedRequirementFields}
-            templateFileName={config.templateFileName}
-            uploadedFileName={resource.uploadedFileName}
-            onRun={handleRun}
-            onUploadFileNameChange={uploadedFileName => setUploadedFileName(resourceType, resourceId, uploadedFileName)}
           />
         )}
         {resource.activeBatchTab === 'history' && <HistoryTab resourceType={resourceType} resourceId={resourceId} />}
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
index e43da15e9e..7e1b617b0e 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -1,36 +1,38 @@
-import type { EvaluationFieldOption } from '../../types'
+import type { EvaluationResourceProps } from '../../types'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { toast } from '@/app/components/base/ui/toast'
+import { getEvaluationMockConfig } from '../../mock'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
 
-type InputFieldsTabProps = {
-  requirementFields: EvaluationFieldOption[]
-  templateFileName: string
-  uploadedFileName: string | null
+type InputFieldsTabProps = EvaluationResourceProps & {
   isPanelReady: boolean
   isRunnable: boolean
-  onRun: () => void
-  onUploadFileNameChange: (uploadedFileName: string | null) => void
 }
 
 const InputFieldsTab = ({
-  requirementFields,
-  templateFileName,
-  uploadedFileName,
+  resourceType,
+  resourceId,
   isPanelReady,
   isRunnable,
-  onRun,
-  onUploadFileNameChange,
 }: InputFieldsTabProps) => {
   const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const requirementFields = config.fieldOptions
+    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
+    .slice(0, 4)
+  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
+  const uploadedFileName = useEvaluationResource(resourceType, resourceId).uploadedFileName
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleDownloadTemplate = () => {
     const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
     const link = document.createElement('a')
     link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
-    link.download = templateFileName
+    link.download = config.templateFileName
     link.click()
   }
 
@@ -40,7 +42,7 @@ const InputFieldsTab = ({
       return
     }
 
-    onRun()
+    runBatchTest(resourceType, resourceId)
   }
 
   return (
@@ -49,7 +51,7 @@ const InputFieldsTab = ({
         <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
         <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
         <div className="mt-3 rounded-xl bg-background-section p-3">
-          {requirementFields.map(field => (
+          {displayedRequirementFields.map(field => (
             <div key={field.id} className="flex items-center py-1">
               <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
                 {field.label}
@@ -73,7 +75,7 @@ const InputFieldsTab = ({
           accept=".csv,.xlsx"
           onChange={(event) => {
             const file = event.target.files?.[0]
-            onUploadFileNameChange(file?.name ?? null)
+            setUploadedFileName(resourceType, resourceId, file?.name ?? null)
           }}
         />
         {isPanelReady && (

From 12c3b2e0cdacf55f1caa4da7a26b109429f9cf90 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 11:26:12 +0800
Subject: [PATCH 078/108] feat(web): start run

---
 .../batch-test-panel/input-fields-tab.tsx     | 94 ++++++++++++++++--
 web/app/components/evaluation/store-utils.ts  | 97 +++++++++++++++++++
 web/app/components/evaluation/store.ts        | 16 +++
 web/app/components/evaluation/types.ts        |  1 +
 web/i18n/en-US/evaluation.json                |  5 +
 web/i18n/zh-Hans/evaluation.json              |  5 +
 web/service/use-evaluation.ts                 | 13 +++
 7 files changed, 222 insertions(+), 9 deletions(-)

diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
index 7e1b617b0e..1d0d4e210c 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -1,10 +1,15 @@
+import type { ChangeEvent } from 'react'
 import type { EvaluationResourceProps } from '../../types'
+import { useMutation } from '@tanstack/react-query'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { toast } from '@/app/components/base/ui/toast'
+import { upload } from '@/service/base'
+import { useStartEvaluationRunMutation } from '@/service/use-evaluation'
 import { getEvaluationMockConfig } from '../../mock'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
+import { buildEvaluationRunRequest } from '../../store-utils'
 
 type InputFieldsTabProps = EvaluationResourceProps & {
   isPanelReady: boolean
@@ -23,10 +28,38 @@ const InputFieldsTab = ({
     .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
     .slice(0, 4)
   const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
-  const uploadedFileName = useEvaluationResource(resourceType, resourceId).uploadedFileName
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const uploadedFileId = resource.uploadedFileId
+  const uploadedFileName = resource.uploadedFileName
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setUploadedFile = useEvaluationStore(state => state.setUploadedFile)
   const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
+  const startRunMutation = useStartEvaluationRunMutation()
+  const uploadMutation = useMutation({
+    mutationFn: (file: File) => {
+      const formData = new FormData()
+      formData.append('file', file)
+
+      return upload({
+        xhr: new XMLHttpRequest(),
+        data: formData,
+      })
+    },
+    onSuccess: (uploadedFile) => {
+      setUploadedFile(resourceType, resourceId, {
+        id: uploadedFile.id,
+        name: typeof uploadedFile.name === 'string' ? uploadedFile.name : uploadedFileName ?? uploadedFile.id,
+      })
+    },
+    onError: () => {
+      setUploadedFile(resourceType, resourceId, null)
+      toast.error(t('batch.uploadError'))
+    },
+  })
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const isFileUploading = uploadMutation.isPending
+  const isRunning = startRunMutation.isPending
+  const isRunDisabled = !isRunnable || !uploadedFileId || isFileUploading || isRunning
 
   const handleDownloadTemplate = () => {
     const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
@@ -42,7 +75,51 @@ const InputFieldsTab = ({
       return
     }
 
-    runBatchTest(resourceType, resourceId)
+    if (isFileUploading) {
+      toast.warning(t('batch.uploading'))
+      return
+    }
+
+    if (!uploadedFileId) {
+      toast.warning(t('batch.fileRequired'))
+      return
+    }
+
+    const body = buildEvaluationRunRequest(resource, uploadedFileId)
+
+    if (!body) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    startRunMutation.mutate({
+      params: {
+        targetType: resourceType,
+        targetId: resourceId,
+      },
+      body,
+    }, {
+      onSuccess: () => {
+        toast.success(t('batch.runStarted'))
+        setBatchTab(resourceType, resourceId, 'history')
+      },
+      onError: () => {
+        toast.error(t('batch.runFailed'))
+      },
+    })
+  }
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    event.target.value = ''
+
+    if (!file) {
+      setUploadedFile(resourceType, resourceId, null)
+      return
+    }
+
+    setUploadedFileName(resourceType, resourceId, file.name)
+    uploadMutation.mutate(file)
   }
 
   return (
@@ -73,10 +150,7 @@ const InputFieldsTab = ({
           hidden
           type="file"
           accept=".csv,.xlsx"
-          onChange={(event) => {
-            const file = event.target.files?.[0]
-            setUploadedFileName(resourceType, resourceId, file?.name ?? null)
-          }}
+          onChange={handleFileChange}
         />
         {isPanelReady && (
           <button
@@ -86,7 +160,9 @@ const InputFieldsTab = ({
           >
             <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
             <div className="mt-2 system-sm-semibold text-text-primary">{t('batch.uploadTitle')}</div>
-            <div className="mt-1 system-xs-regular text-text-tertiary">{uploadedFileName ?? t('batch.uploadHint')}</div>
+            <div className="mt-1 system-xs-regular text-text-tertiary">
+              {isFileUploading ? t('batch.uploading') : uploadedFileName ?? t('batch.uploadHint')}
+            </div>
           </button>
         )}
       </div>
@@ -95,7 +171,7 @@ const InputFieldsTab = ({
           {t('batch.validation')}
         </div>
       )}
-      <Button className="w-full justify-center" variant="primary" disabled={!isRunnable} onClick={handleRun}>
+      <Button className="w-full justify-center" variant="primary" disabled={isRunDisabled} loading={isRunning} onClick={handleRun}>
         {t('batch.run')}
       </Button>
     </div>
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 0f547e7488..abe5a59c51 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -16,11 +16,13 @@ import type {
   EvaluationJudgmentCondition,
   EvaluationJudgmentConditionValue,
   EvaluationJudgmentConfig,
+  EvaluationRunRequest,
   NodeInfo,
 } from '@/types/evaluation'
 import { getEvaluationMockConfig } from './mock'
 import {
   buildConditionMetricOptions,
+  decodeModelSelection,
   encodeModelSelection,
   getComparisonOperators,
   getDefaultComparisonOperator,
@@ -389,6 +391,7 @@ export const buildInitialState = (_resourceType: EvaluationResourceType): Evalua
     metrics: [],
     judgmentConfig: createEmptyJudgmentConfig(),
     activeBatchTab: 'input-fields',
+    uploadedFileId: null,
     uploadedFileName: null,
     batchRecords: [],
   }
@@ -412,6 +415,100 @@ export const buildStateFromEvaluationConfig = (
   }
 }
 
+const getApiComparisonOperator = (operator: ComparisonOperator) => {
+  if (operator === 'is null')
+    return 'null'
+
+  if (operator === 'is not null')
+    return 'not null'
+
+  return operator
+}
+
+const getCustomMetricScopeId = (metric: EvaluationMetric) => {
+  if (metric.kind !== 'custom-workflow')
+    return null
+
+  return metric.customConfig?.workflowAppId ?? metric.customConfig?.workflowId ?? null
+}
+
+const buildCustomizedMetricsPayload = (metrics: EvaluationMetric[]): EvaluationRunRequest['customized_metrics'] => {
+  const customMetric = metrics.find(metric => metric.kind === 'custom-workflow')
+  const customConfig = customMetric?.customConfig
+  const evaluationWorkflowId = customMetric ? getCustomMetricScopeId(customMetric) : null
+
+  if (!customConfig || !evaluationWorkflowId)
+    return null
+
+  return {
+    evaluation_workflow_id: evaluationWorkflowId,
+    input_fields: Object.fromEntries(
+      customConfig.mappings
+        .filter((mapping): mapping is CustomMetricMapping & { inputVariableId: string, outputVariableId: string } =>
+          !!mapping.inputVariableId && !!mapping.outputVariableId,
+        )
+        .map(mapping => [mapping.inputVariableId, mapping.outputVariableId]),
+    ),
+    output_fields: customConfig.outputs.map(output => ({
+      variable: output.id,
+      value_type: output.valueType ?? undefined,
+    })),
+  }
+}
+
+const buildJudgmentConfigPayload = (resource: EvaluationResourceState): EvaluationRunRequest['judgment_config'] => {
+  const conditions = resource.judgmentConfig.conditions
+    .filter(condition => !!condition.variableSelector)
+    .map((condition) => {
+      const [scope, metricName] = condition.variableSelector!
+      const customMetric = resource.metrics.find(metric =>
+        metric.kind === 'custom-workflow'
+        && metric.customConfig?.workflowId === scope,
+      )
+
+      const customScopeId = customMetric ? getCustomMetricScopeId(customMetric) : null
+
+      return {
+        variable_selector: [customScopeId ?? scope, metricName],
+        comparison_operator: getApiComparisonOperator(condition.comparisonOperator),
+        ...(requiresComparisonValue(condition.comparisonOperator) ? { value: condition.value ?? undefined } : {}),
+      }
+    })
+
+  if (!conditions.length)
+    return null
+
+  return {
+    logical_operator: resource.judgmentConfig.logicalOperator,
+    conditions,
+  }
+}
+
+export const buildEvaluationRunRequest = (
+  resource: EvaluationResourceState,
+  fileId: string,
+): EvaluationRunRequest | null => {
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+
+  if (!selectedModel)
+    return null
+
+  return {
+    file_id: fileId,
+    evaluation_model: selectedModel.model,
+    evaluation_model_provider: selectedModel.provider,
+    default_metrics: resource.metrics
+      .filter(metric => metric.kind === 'builtin')
+      .map(metric => ({
+        metric: metric.optionId,
+        value_type: metric.valueType,
+        node_info_list: metric.nodeInfoList ?? [],
+      })),
+    customized_metrics: buildCustomizedMetricsPayload(resource.metrics),
+    judgment_config: buildJudgmentConfigPayload(resource),
+  }
+}
+
 const getResourceState = (
   resources: EvaluationStoreResources,
   resourceType: EvaluationResourceType,
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index cfc006b595..7db18e000b 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -76,6 +76,11 @@ type EvaluationStore = {
     value: string | string[] | boolean | null,
   ) => void
   setBatchTab: (resourceType: EvaluationResourceType, resourceId: string, tab: EvaluationResourceState['activeBatchTab']) => void
+  setUploadedFile: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    uploadedFile: { id: string, name: string } | null,
+  ) => void
   setUploadedFileName: (resourceType: EvaluationResourceType, resourceId: string, uploadedFileName: string | null) => void
   runBatchTest: (resourceType: EvaluationResourceType, resourceId: string) => void
 }
@@ -103,6 +108,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
         [buildResourceKey(resourceType, resourceId)]: {
           ...buildStateFromEvaluationConfig(resourceType, config),
           activeBatchTab: state.resources[buildResourceKey(resourceType, resourceId)]?.activeBatchTab ?? 'input-fields',
+          uploadedFileId: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileId ?? null,
           uploadedFileName: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileName ?? null,
           batchRecords: state.resources[buildResourceKey(resourceType, resourceId)]?.batchRecords ?? [],
         },
@@ -369,10 +375,20 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
+  setUploadedFile: (resourceType, resourceId, uploadedFile) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        uploadedFileId: uploadedFile?.id ?? null,
+        uploadedFileName: uploadedFile?.name ?? null,
+      })),
+    }))
+  },
   setUploadedFileName: (resourceType, resourceId, uploadedFileName) => {
     set(state => ({
       resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
         ...resource,
+        uploadedFileId: null,
         uploadedFileName,
       })),
     }))
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index baa73f6c3f..9a3750e5c5 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -136,6 +136,7 @@ export type EvaluationResourceState = {
   metrics: EvaluationMetric[]
   judgmentConfig: JudgmentConfig
   activeBatchTab: BatchTestTab
+  uploadedFileId: string | null
   uploadedFileName: string | null
   batchRecords: BatchTestRecord[]
 }
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 3558d5e9e2..ec1af7f7f1 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -2,19 +2,24 @@
   "batch.description": "Execute batch evaluations and track performance history.",
   "batch.downloadTemplate": "Download Excel Template",
   "batch.emptyHistory": "No test history yet.",
+  "batch.fileRequired": "Upload an evaluation dataset file before running the test.",
   "batch.noticeDescription": "Configuration incomplete. Select the Judge Model and Metrics on the left to generate your batch test template.",
   "batch.noticeTitle": "Quick start",
   "batch.requirementsDescription": "The input variables required to run this batch test. Ensure your uploaded dataset matches these fields.",
   "batch.requirementsTitle": "Data requirements",
   "batch.run": "Run Test",
+  "batch.runFailed": "Failed to start batch test.",
+  "batch.runStarted": "Batch test started.",
   "batch.status.failed": "Failed",
   "batch.status.running": "Running",
   "batch.status.success": "Success",
   "batch.tabs.history": "Test History",
   "batch.tabs.input-fields": "Input Fields",
   "batch.title": "Batch Test",
+  "batch.uploadError": "Failed to upload file.",
   "batch.uploadHint": "Select a .csv or .xlsx file",
   "batch.uploadTitle": "Upload test file",
+  "batch.uploading": "Uploading file...",
   "batch.validation": "Complete the judge model, metrics, and custom mappings before running a batch test.",
   "conditions.addCondition": "Add Condition",
   "conditions.addGroup": "Add Condition Group",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index db167bf50d..f3157f0dec 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -2,19 +2,24 @@
   "batch.description": "执行批量评测并追踪性能历史。",
   "batch.downloadTemplate": "下载 Excel 模板",
   "batch.emptyHistory": "还没有测试历史。",
+  "batch.fileRequired": "请先上传评估数据集文件，再运行测试。",
   "batch.noticeDescription": "配置尚未完成。请先在左侧选择判定模型和指标，以生成批量测试模板。",
   "batch.noticeTitle": "快速开始",
   "batch.requirementsDescription": "运行此批量测试所需的输入变量。请确保上传的数据集包含这些字段。",
   "batch.requirementsTitle": "数据要求",
   "batch.run": "运行测试",
+  "batch.runFailed": "启动批量测试失败。",
+  "batch.runStarted": "批量测试已启动。",
   "batch.status.failed": "失败",
   "batch.status.running": "运行中",
   "batch.status.success": "成功",
   "batch.tabs.history": "测试历史",
   "batch.tabs.input-fields": "输入字段",
   "batch.title": "批量测试",
+  "batch.uploadError": "文件上传失败。",
   "batch.uploadHint": "选择 .csv 或 .xlsx 文件",
   "batch.uploadTitle": "上传测试文件",
+  "batch.uploading": "文件上传中...",
   "batch.validation": "运行批量测试前，请先完成判定模型、指标和自定义映射配置。",
   "conditions.addCondition": "添加条件",
   "conditions.addGroup": "添加条件组",
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index 5b68588f63..2406345fc2 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -5,6 +5,7 @@ import {
   useInfiniteQuery,
   useMutation,
   useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 import { consoleClient, consoleQuery } from '@/service/client'
 
@@ -62,6 +63,18 @@ export const useEvaluationNodeInfoMutation = () => {
   return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
 }
 
+export const useStartEvaluationRunMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(consoleQuery.evaluation.startRun.mutationOptions({
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.evaluation.logs.key(),
+      })
+    },
+  }))
+}
+
 export const useAvailableEvaluationWorkflows = (
   params: AvailableEvaluationWorkflowsParams = {},
   options?: { enabled?: boolean },

From acef9630d5db35d540d6e01bb050a9c995516851 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 11:39:35 +0800
Subject: [PATCH 079/108] feat(web): input fields display

---
 .../batch-test-panel/input-fields-tab.tsx     | 82 ++++++++++++++++---
 web/i18n/en-US/evaluation.json                |  2 +
 web/i18n/zh-Hans/evaluation.json              |  2 +
 3 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
index 1d0d4e210c..f70de8c5b2 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -1,12 +1,18 @@
 import type { ChangeEvent } from 'react'
 import type { EvaluationResourceProps } from '../../types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { InputVar, Node } from '@/app/components/workflow/types'
 import { useMutation } from '@tanstack/react-query'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { toast } from '@/app/components/base/ui/toast'
+import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import { upload } from '@/service/base'
 import { useStartEvaluationRunMutation } from '@/service/use-evaluation'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import { useAppWorkflow } from '@/service/use-workflow'
 import { getEvaluationMockConfig } from '../../mock'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 import { buildEvaluationRunRequest } from '../../store-utils'
@@ -16,6 +22,37 @@ type InputFieldsTabProps = EvaluationResourceProps & {
   isRunnable: boolean
 }
 
+type InputField = {
+  name: string
+  type: string
+}
+
+const getGraphNodes = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.nodes) ? graph.nodes as Node[] : []
+}
+
+const getStartNodeInputFields = (nodes?: Node[]): InputField[] => {
+  const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
+  const variables = startNode?.data.variables
+
+  if (!Array.isArray(variables))
+    return []
+
+  return variables
+    .filter((variable): variable is InputVar => typeof variable.variable === 'string' && !!variable.variable)
+    .map(variable => ({
+      name: variable.variable,
+      type: inputVarTypeToVarType(variable.type ?? InputVarType.textInput),
+    }))
+}
+
+const escapeCsvCell = (value: string) => {
+  if (!/[",\n\r]/.test(value))
+    return value
+
+  return `"${value.replace(/"/g, '""')}"`
+}
+
 const InputFieldsTab = ({
   resourceType,
   resourceId,
@@ -24,10 +61,17 @@ const InputFieldsTab = ({
 }: InputFieldsTabProps) => {
   const { t } = useTranslation('evaluation')
   const config = getEvaluationMockConfig(resourceType)
-  const requirementFields = config.fieldOptions
-    .filter(field => field.id.includes('.input.') || field.group.toLowerCase().includes('input'))
-    .slice(0, 4)
-  const displayedRequirementFields = requirementFields.length > 0 ? requirementFields : config.fieldOptions.slice(0, 4)
+  const { data: currentAppWorkflow, isLoading: isAppWorkflowLoading } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
+  const { data: currentSnippetWorkflow, isLoading: isSnippetWorkflowLoading } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
+  const inputFields = useMemo(() => {
+    if (resourceType === 'apps')
+      return getStartNodeInputFields(currentAppWorkflow?.graph.nodes)
+
+    if (resourceType === 'snippets')
+      return getStartNodeInputFields(getGraphNodes(currentSnippetWorkflow?.graph))
+
+    return []
+  }, [currentAppWorkflow?.graph.nodes, currentSnippetWorkflow?.graph, resourceType])
   const resource = useEvaluationResource(resourceType, resourceId)
   const uploadedFileId = resource.uploadedFileId
   const uploadedFileName = resource.uploadedFileName
@@ -59,10 +103,18 @@ const InputFieldsTab = ({
   const fileInputRef = useRef<HTMLInputElement>(null)
   const isFileUploading = uploadMutation.isPending
   const isRunning = startRunMutation.isPending
+  const isInputFieldsLoading = (resourceType === 'apps' && isAppWorkflowLoading)
+    || (resourceType === 'snippets' && isSnippetWorkflowLoading)
+  const canDownloadTemplate = isPanelReady && !isInputFieldsLoading && inputFields.length > 0
   const isRunDisabled = !isRunnable || !uploadedFileId || isFileUploading || isRunning
 
   const handleDownloadTemplate = () => {
-    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
+    if (!inputFields.length) {
+      toast.warning(t('batch.noInputFields'))
+      return
+    }
+
+    const content = `${inputFields.map(field => escapeCsvCell(field.name)).join(',')}\n`
     const link = document.createElement('a')
     link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
     link.download = config.templateFileName
@@ -128,10 +180,20 @@ const InputFieldsTab = ({
         <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
         <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
         <div className="mt-3 rounded-xl bg-background-section p-3">
-          {displayedRequirementFields.map(field => (
-            <div key={field.id} className="flex items-center py-1">
+          {isInputFieldsLoading && (
+            <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
+              {t('batch.loadingInputFields')}
+            </div>
+          )}
+          {!isInputFieldsLoading && inputFields.length === 0 && (
+            <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
+              {t('batch.noInputFields')}
+            </div>
+          )}
+          {!isInputFieldsLoading && inputFields.map(field => (
+            <div key={field.name} className="flex items-center py-1">
               <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
-                {field.label}
+                {field.name}
               </div>
               <div className="text-[10px] leading-3 text-text-quaternary">
                 {field.type}
@@ -141,7 +203,7 @@ const InputFieldsTab = ({
         </div>
       </div>
       <div className="space-y-3">
-        <Button variant="secondary" className="w-full justify-center" disabled={!isPanelReady} onClick={handleDownloadTemplate}>
+        <Button variant="secondary" className="w-full justify-center" disabled={!canDownloadTemplate} onClick={handleDownloadTemplate}>
           <span aria-hidden="true" className="mr-1 i-ri-download-line h-4 w-4" />
           {t('batch.downloadTemplate')}
         </Button>
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index ec1af7f7f1..57033d17e4 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -3,6 +3,8 @@
   "batch.downloadTemplate": "Download Excel Template",
   "batch.emptyHistory": "No test history yet.",
   "batch.fileRequired": "Upload an evaluation dataset file before running the test.",
+  "batch.loadingInputFields": "Loading input fields...",
+  "batch.noInputFields": "No published start node input fields found.",
   "batch.noticeDescription": "Configuration incomplete. Select the Judge Model and Metrics on the left to generate your batch test template.",
   "batch.noticeTitle": "Quick start",
   "batch.requirementsDescription": "The input variables required to run this batch test. Ensure your uploaded dataset matches these fields.",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index f3157f0dec..2d54c30385 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -3,6 +3,8 @@
   "batch.downloadTemplate": "下载 Excel 模板",
   "batch.emptyHistory": "还没有测试历史。",
   "batch.fileRequired": "请先上传评估数据集文件，再运行测试。",
+  "batch.loadingInputFields": "正在加载输入字段...",
+  "batch.noInputFields": "未找到已发布 Start 节点的输入字段。",
   "batch.noticeDescription": "配置尚未完成。请先在左侧选择判定模型和指标，以生成批量测试模板。",
   "batch.noticeTitle": "快速开始",
   "batch.requirementsDescription": "运行此批量测试所需的输入变量。请确保上传的数据集包含这些字段。",

From 2df79c04045f13a40234023827835a4c58134aa2 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 12:04:51 +0800
Subject: [PATCH 080/108] refactor: input fields

---
 .../batch-test-panel/input-fields-tab.tsx     | 238 +++---------------
 .../input-fields-requirements.tsx             |  45 ++++
 .../input-fields/input-fields-utils.ts        |  54 ++++
 .../input-fields/upload-run-popover.tsx       | 187 ++++++++++++++
 .../input-fields/use-input-fields-actions.ts  | 165 ++++++++++++
 .../use-published-input-fields.ts             |  29 +++
 web/i18n/en-US/evaluation.json                |   8 +
 web/i18n/zh-Hans/evaluation.json              |   8 +
 8 files changed, 529 insertions(+), 205 deletions(-)
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts

diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
index f70de8c5b2..8d147dbedf 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -1,58 +1,17 @@
-import type { ChangeEvent } from 'react'
 import type { EvaluationResourceProps } from '../../types'
-import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
-import type { InputVar, Node } from '@/app/components/workflow/types'
-import { useMutation } from '@tanstack/react-query'
-import { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import { toast } from '@/app/components/base/ui/toast'
-import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
-import { upload } from '@/service/base'
-import { useStartEvaluationRunMutation } from '@/service/use-evaluation'
-import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
-import { useAppWorkflow } from '@/service/use-workflow'
 import { getEvaluationMockConfig } from '../../mock'
-import { useEvaluationResource, useEvaluationStore } from '../../store'
-import { buildEvaluationRunRequest } from '../../store-utils'
+import InputFieldsRequirements from './input-fields/input-fields-requirements'
+import UploadRunPopover from './input-fields/upload-run-popover'
+import { useInputFieldsActions } from './input-fields/use-input-fields-actions'
+import { usePublishedInputFields } from './input-fields/use-published-input-fields'
 
 type InputFieldsTabProps = EvaluationResourceProps & {
   isPanelReady: boolean
   isRunnable: boolean
 }
 
-type InputField = {
-  name: string
-  type: string
-}
-
-const getGraphNodes = (graph?: Record<string, unknown>) => {
-  return Array.isArray(graph?.nodes) ? graph.nodes as Node[] : []
-}
-
-const getStartNodeInputFields = (nodes?: Node[]): InputField[] => {
-  const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
-  const variables = startNode?.data.variables
-
-  if (!Array.isArray(variables))
-    return []
-
-  return variables
-    .filter((variable): variable is InputVar => typeof variable.variable === 'string' && !!variable.variable)
-    .map(variable => ({
-      name: variable.variable,
-      type: inputVarTypeToVarType(variable.type ?? InputVarType.textInput),
-    }))
-}
-
-const escapeCsvCell = (value: string) => {
-  if (!/[",\n\r]/.test(value))
-    return value
-
-  return `"${value.replace(/"/g, '""')}"`
-}
-
 const InputFieldsTab = ({
   resourceType,
   resourceId,
@@ -61,181 +20,50 @@ const InputFieldsTab = ({
 }: InputFieldsTabProps) => {
   const { t } = useTranslation('evaluation')
   const config = getEvaluationMockConfig(resourceType)
-  const { data: currentAppWorkflow, isLoading: isAppWorkflowLoading } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
-  const { data: currentSnippetWorkflow, isLoading: isSnippetWorkflowLoading } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
-  const inputFields = useMemo(() => {
-    if (resourceType === 'apps')
-      return getStartNodeInputFields(currentAppWorkflow?.graph.nodes)
-
-    if (resourceType === 'snippets')
-      return getStartNodeInputFields(getGraphNodes(currentSnippetWorkflow?.graph))
-
-    return []
-  }, [currentAppWorkflow?.graph.nodes, currentSnippetWorkflow?.graph, resourceType])
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const uploadedFileId = resource.uploadedFileId
-  const uploadedFileName = resource.uploadedFileName
-  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
-  const setUploadedFile = useEvaluationStore(state => state.setUploadedFile)
-  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const startRunMutation = useStartEvaluationRunMutation()
-  const uploadMutation = useMutation({
-    mutationFn: (file: File) => {
-      const formData = new FormData()
-      formData.append('file', file)
-
-      return upload({
-        xhr: new XMLHttpRequest(),
-        data: formData,
-      })
-    },
-    onSuccess: (uploadedFile) => {
-      setUploadedFile(resourceType, resourceId, {
-        id: uploadedFile.id,
-        name: typeof uploadedFile.name === 'string' ? uploadedFile.name : uploadedFileName ?? uploadedFile.id,
-      })
-    },
-    onError: () => {
-      setUploadedFile(resourceType, resourceId, null)
-      toast.error(t('batch.uploadError'))
-    },
+  const { inputFields, isInputFieldsLoading } = usePublishedInputFields(resourceType, resourceId)
+  const actions = useInputFieldsActions({
+    resourceType,
+    resourceId,
+    inputFields,
+    isInputFieldsLoading,
+    isPanelReady,
+    isRunnable,
+    templateFileName: config.templateFileName,
   })
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const isFileUploading = uploadMutation.isPending
-  const isRunning = startRunMutation.isPending
-  const isInputFieldsLoading = (resourceType === 'apps' && isAppWorkflowLoading)
-    || (resourceType === 'snippets' && isSnippetWorkflowLoading)
-  const canDownloadTemplate = isPanelReady && !isInputFieldsLoading && inputFields.length > 0
-  const isRunDisabled = !isRunnable || !uploadedFileId || isFileUploading || isRunning
-
-  const handleDownloadTemplate = () => {
-    if (!inputFields.length) {
-      toast.warning(t('batch.noInputFields'))
-      return
-    }
-
-    const content = `${inputFields.map(field => escapeCsvCell(field.name)).join(',')}\n`
-    const link = document.createElement('a')
-    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
-    link.download = config.templateFileName
-    link.click()
-  }
-
-  const handleRun = () => {
-    if (!isRunnable) {
-      toast.warning(t('batch.validation'))
-      return
-    }
-
-    if (isFileUploading) {
-      toast.warning(t('batch.uploading'))
-      return
-    }
-
-    if (!uploadedFileId) {
-      toast.warning(t('batch.fileRequired'))
-      return
-    }
-
-    const body = buildEvaluationRunRequest(resource, uploadedFileId)
-
-    if (!body) {
-      toast.warning(t('batch.validation'))
-      return
-    }
-
-    startRunMutation.mutate({
-      params: {
-        targetType: resourceType,
-        targetId: resourceId,
-      },
-      body,
-    }, {
-      onSuccess: () => {
-        toast.success(t('batch.runStarted'))
-        setBatchTab(resourceType, resourceId, 'history')
-      },
-      onError: () => {
-        toast.error(t('batch.runFailed'))
-      },
-    })
-  }
-
-  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0]
-    event.target.value = ''
-
-    if (!file) {
-      setUploadedFile(resourceType, resourceId, null)
-      return
-    }
-
-    setUploadedFileName(resourceType, resourceId, file.name)
-    uploadMutation.mutate(file)
-  }
 
   return (
     <div className="space-y-5">
-      <div>
-        <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
-        <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
-        <div className="mt-3 rounded-xl bg-background-section p-3">
-          {isInputFieldsLoading && (
-            <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
-              {t('batch.loadingInputFields')}
-            </div>
-          )}
-          {!isInputFieldsLoading && inputFields.length === 0 && (
-            <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
-              {t('batch.noInputFields')}
-            </div>
-          )}
-          {!isInputFieldsLoading && inputFields.map(field => (
-            <div key={field.name} className="flex items-center py-1">
-              <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
-                {field.name}
-              </div>
-              <div className="text-[10px] leading-3 text-text-quaternary">
-                {field.type}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <InputFieldsRequirements
+        inputFields={inputFields}
+        isLoading={isInputFieldsLoading}
+      />
       <div className="space-y-3">
-        <Button variant="secondary" className="w-full justify-center" disabled={!canDownloadTemplate} onClick={handleDownloadTemplate}>
+        <Button variant="secondary" className="w-full justify-center" disabled={!actions.canDownloadTemplate} onClick={actions.handleDownloadTemplate}>
           <span aria-hidden="true" className="mr-1 i-ri-download-line h-4 w-4" />
           {t('batch.downloadTemplate')}
         </Button>
-        <input
-          ref={fileInputRef}
-          hidden
-          type="file"
-          accept=".csv,.xlsx"
-          onChange={handleFileChange}
+        <UploadRunPopover
+          open={actions.isUploadPopoverOpen}
+          onOpenChange={actions.setIsUploadPopoverOpen}
+          triggerDisabled={actions.uploadButtonDisabled}
+          inputFields={inputFields}
+          currentFileName={actions.currentFileName}
+          currentFileExtension={actions.currentFileExtension}
+          currentFileSize={actions.currentFileSize}
+          isFileUploading={actions.isFileUploading}
+          isRunDisabled={actions.isRunDisabled}
+          isRunning={actions.isRunning}
+          onUploadFile={actions.handleUploadFile}
+          onClearUploadedFile={actions.handleClearUploadedFile}
+          onDownloadTemplate={actions.handleDownloadTemplate}
+          onRun={actions.handleRun}
         />
-        {isPanelReady && (
-          <button
-            type="button"
-            className="flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-divider-subtle bg-background-default-subtle px-4 py-6 text-center hover:border-components-button-secondary-border"
-            onClick={() => fileInputRef.current?.click()}
-          >
-            <span aria-hidden="true" className="i-ri-file-upload-line h-5 w-5 text-text-tertiary" />
-            <div className="mt-2 system-sm-semibold text-text-primary">{t('batch.uploadTitle')}</div>
-            <div className="mt-1 system-xs-regular text-text-tertiary">
-              {isFileUploading ? t('batch.uploading') : uploadedFileName ?? t('batch.uploadHint')}
-            </div>
-          </button>
-        )}
       </div>
       {!isRunnable && (
         <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 system-xs-regular text-text-tertiary">
           {t('batch.validation')}
         </div>
       )}
-      <Button className="w-full justify-center" variant="primary" disabled={isRunDisabled} loading={isRunning} onClick={handleRun}>
-        {t('batch.run')}
-      </Button>
     </div>
   )
 }
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx
new file mode 100644
index 0000000000..83201ea5a7
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx
@@ -0,0 +1,45 @@
+import type { InputField } from './input-fields-utils'
+import { useTranslation } from 'react-i18next'
+
+type InputFieldsRequirementsProps = {
+  inputFields: InputField[]
+  isLoading: boolean
+}
+
+const InputFieldsRequirements = ({
+  inputFields,
+  isLoading,
+}: InputFieldsRequirementsProps) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div>
+      <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
+      <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
+      <div className="mt-3 rounded-xl bg-background-section p-3">
+        {isLoading && (
+          <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
+            {t('batch.loadingInputFields')}
+          </div>
+        )}
+        {!isLoading && inputFields.length === 0 && (
+          <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
+            {t('batch.noInputFields')}
+          </div>
+        )}
+        {!isLoading && inputFields.map(field => (
+          <div key={field.name} className="flex items-center py-1">
+            <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
+              {field.name}
+            </div>
+            <div className="text-[10px] leading-3 text-text-quaternary">
+              {field.type}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default InputFieldsRequirements
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
new file mode 100644
index 0000000000..5a71b81d06
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
@@ -0,0 +1,54 @@
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { InputVar, Node } from '@/app/components/workflow/types'
+import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+
+export type InputField = {
+  name: string
+  type: string
+}
+
+export const getGraphNodes = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.nodes) ? graph.nodes as Node[] : []
+}
+
+export const getStartNodeInputFields = (nodes?: Node[]): InputField[] => {
+  const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
+  const variables = startNode?.data.variables
+
+  if (!Array.isArray(variables))
+    return []
+
+  return variables
+    .filter((variable): variable is InputVar => typeof variable.variable === 'string' && !!variable.variable)
+    .map(variable => ({
+      name: variable.variable,
+      type: inputVarTypeToVarType(variable.type ?? InputVarType.textInput),
+    }))
+}
+
+const escapeCsvCell = (value: string) => {
+  if (!/[",\n\r]/.test(value))
+    return value
+
+  return `"${value.replace(/"/g, '""')}"`
+}
+
+export const buildTemplateCsvContent = (inputFields: InputField[]) => {
+  return `${inputFields.map(field => escapeCsvCell(field.name)).join(',')}\n`
+}
+
+export const getFileExtension = (fileName: string) => {
+  const extension = fileName.split('.').pop()
+  return extension && extension !== fileName ? extension.toUpperCase() : ''
+}
+
+export const getExampleValue = (field: InputField, booleanLabel: string) => {
+  if (field.type === 'number')
+    return '0.7'
+
+  if (field.type === 'boolean')
+    return booleanLabel
+
+  return field.name
+}
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
new file mode 100644
index 0000000000..01c9d84770
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -0,0 +1,187 @@
+import type { ChangeEvent, DragEvent } from 'react'
+import type { InputField } from './input-fields-utils'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { cn } from '@/utils/classnames'
+import { getExampleValue } from './input-fields-utils'
+
+type UploadRunPopoverProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  triggerDisabled: boolean
+  inputFields: InputField[]
+  currentFileName: string | null | undefined
+  currentFileExtension: string
+  currentFileSize: string | number
+  isFileUploading: boolean
+  isRunDisabled: boolean
+  isRunning: boolean
+  onUploadFile: (file: File | undefined) => void
+  onClearUploadedFile: () => void
+  onDownloadTemplate: () => void
+  onRun: () => void
+}
+
+const UploadRunPopover = ({
+  open,
+  onOpenChange,
+  triggerDisabled,
+  inputFields,
+  currentFileName,
+  currentFileExtension,
+  currentFileSize,
+  isFileUploading,
+  isRunDisabled,
+  isRunning,
+  onUploadFile,
+  onClearUploadedFile,
+  onDownloadTemplate,
+  onRun,
+}: UploadRunPopoverProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const previewFields = inputFields.slice(0, 3)
+  const booleanExampleValue = t('conditions.boolean.true')
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onUploadFile(event.target.files?.[0])
+    event.target.value = ''
+  }
+
+  const handleDropFile = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    onUploadFile(event.dataTransfer.files?.[0])
+  }
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={(
+          <Button className="w-full justify-center" variant="primary" disabled={triggerDisabled}>
+            {t('batch.uploadAndRun')}
+          </Button>
+        )}
+      />
+      <PopoverContent
+        placement="bottom-end"
+        sideOffset={8}
+        popupClassName="w-[402px] overflow-hidden rounded-lg border border-components-panel-border p-0 shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]"
+      >
+        <div className="flex flex-col bg-components-panel-bg">
+          <div className="flex flex-col gap-4 p-4">
+            <input
+              ref={fileInputRef}
+              hidden
+              type="file"
+              accept=".csv,.xlsx"
+              onChange={handleFileChange}
+            />
+            {currentFileName
+              ? (
+                  <div className="flex h-20 items-center gap-3 rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3">
+                    <div className="flex p-3">
+                      <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
+                    </div>
+                    <div className="min-w-0 flex-1 py-1 pr-2">
+                      <div className="truncate system-xs-medium text-text-secondary">
+                        {currentFileName}
+                      </div>
+                      <div className="mt-0.5 flex h-3 items-center gap-1 system-2xs-medium text-text-tertiary">
+                        {!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
+                        {!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
+                        {!!currentFileSize && <span>{currentFileSize}</span>}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 pr-3">
+                      {isFileUploading && (
+                        <span aria-hidden="true" className="i-ri-loader-4-line h-4 w-4 animate-spin text-text-accent" />
+                      )}
+                      <button
+                        type="button"
+                        className="rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                        onClick={onClearUploadedFile}
+                        aria-label={t('batch.removeUploadedFile')}
+                      >
+                        <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                )
+              : (
+                  <div
+                    className="flex h-20 w-full items-center justify-center gap-3 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg p-3 text-left hover:border-components-button-secondary-border"
+                    onDragOver={event => event.preventDefault()}
+                    onDrop={handleDropFile}
+                  >
+                    <button
+                      type="button"
+                      className="flex shrink-0 p-3"
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <span aria-hidden="true" className="i-ri-file-upload-line h-6 w-6 text-text-tertiary" />
+                      <span className="sr-only">{t('batch.uploadTitle')}</span>
+                    </button>
+                    <div className="min-w-0 flex-1 text-left">
+                      <div className="system-md-regular text-text-secondary">
+                        {t('batch.uploadDropzonePrefix')}
+                        {' '}
+                        <span className="system-md-semibold">{t('batch.uploadDropzoneEmphasis')}</span>
+                        {' '}
+                        {t('batch.uploadDropzoneSuffix')}
+                      </div>
+                      <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                        {t('batch.uploadDropzoneDownloadPrefix')}
+                        {' '}
+                        <button
+                          type="button"
+                          className="text-text-accent hover:underline"
+                          onClick={onDownloadTemplate}
+                        >
+                          {t('batch.uploadDropzoneDownloadLink')}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+            {!!previewFields.length && (
+              <div className="space-y-1">
+                <div className="system-md-semibold text-text-secondary">{t('batch.example')}</div>
+                <div className="flex overflow-hidden rounded-lg border border-divider-regular">
+                  {previewFields.map((field, index) => (
+                    <div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
+                      <div className="min-h-8 border-b border-divider-regular px-3 py-2 system-xs-medium-uppercase text-text-tertiary">
+                        {field.name}
+                      </div>
+                      <div className="min-h-8 px-3 py-2 system-sm-regular text-text-secondary">
+                        {getExampleValue(field, booleanExampleValue)}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex items-end justify-end gap-2 border-t border-components-panel-border px-4 py-4">
+            <Button variant="secondary" className="rounded-lg" onClick={() => onOpenChange(false)}>
+              {tCommon('operation.cancel')}
+            </Button>
+            <Button className="flex-1 justify-center rounded-lg" variant="primary" disabled={isRunDisabled} loading={isRunning} onClick={onRun}>
+              <span aria-hidden="true" className="mr-1 i-ri-play-fill h-5 w-5" />
+              {t('batch.run')}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default UploadRunPopover
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
new file mode 100644
index 0000000000..7740323569
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
@@ -0,0 +1,165 @@
+import type { EvaluationResourceProps } from '../../../types'
+import type { InputField } from './input-fields-utils'
+import { useMutation } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
+import { upload } from '@/service/base'
+import { useStartEvaluationRunMutation } from '@/service/use-evaluation'
+import { formatFileSize } from '@/utils/format'
+import { useEvaluationResource, useEvaluationStore } from '../../../store'
+import { buildEvaluationRunRequest } from '../../../store-utils'
+import { buildTemplateCsvContent, getFileExtension } from './input-fields-utils'
+
+type UploadedFileMeta = {
+  name: string
+  size: number
+}
+
+type UseInputFieldsActionsParams = EvaluationResourceProps & {
+  inputFields: InputField[]
+  isInputFieldsLoading: boolean
+  isPanelReady: boolean
+  isRunnable: boolean
+  templateFileName: string
+}
+
+export const useInputFieldsActions = ({
+  resourceType,
+  resourceId,
+  inputFields,
+  isInputFieldsLoading,
+  isPanelReady,
+  isRunnable,
+  templateFileName,
+}: UseInputFieldsActionsParams) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setUploadedFile = useEvaluationStore(state => state.setUploadedFile)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const startRunMutation = useStartEvaluationRunMutation()
+  const [isUploadPopoverOpen, setIsUploadPopoverOpen] = useState(false)
+  const [uploadedFileMeta, setUploadedFileMeta] = useState<UploadedFileMeta | null>(null)
+  const uploadMutation = useMutation({
+    mutationFn: (file: File) => {
+      const formData = new FormData()
+      formData.append('file', file)
+
+      return upload({
+        xhr: new XMLHttpRequest(),
+        data: formData,
+      })
+    },
+    onSuccess: (uploadedFile, file) => {
+      setUploadedFile(resourceType, resourceId, {
+        id: uploadedFile.id,
+        name: typeof uploadedFile.name === 'string' ? uploadedFile.name : file.name,
+      })
+    },
+    onError: () => {
+      setUploadedFileMeta(null)
+      setUploadedFile(resourceType, resourceId, null)
+      toast.error(t('batch.uploadError'))
+    },
+  })
+
+  const isFileUploading = uploadMutation.isPending
+  const isRunning = startRunMutation.isPending
+  const uploadedFileId = resource.uploadedFileId
+  const currentFileName = uploadedFileMeta?.name ?? resource.uploadedFileName
+  const canDownloadTemplate = isPanelReady && !isInputFieldsLoading && inputFields.length > 0
+  const isRunDisabled = !isRunnable || !uploadedFileId || isFileUploading || isRunning
+  const uploadButtonDisabled = !isPanelReady || isInputFieldsLoading || isRunning
+
+  const handleDownloadTemplate = () => {
+    if (!inputFields.length) {
+      toast.warning(t('batch.noInputFields'))
+      return
+    }
+
+    const content = buildTemplateCsvContent(inputFields)
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = templateFileName
+    link.click()
+  }
+
+  const handleRun = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    if (isFileUploading) {
+      toast.warning(t('batch.uploading'))
+      return
+    }
+
+    if (!uploadedFileId) {
+      toast.warning(t('batch.fileRequired'))
+      return
+    }
+
+    const body = buildEvaluationRunRequest(resource, uploadedFileId)
+
+    if (!body) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    startRunMutation.mutate({
+      params: {
+        targetType: resourceType,
+        targetId: resourceId,
+      },
+      body,
+    }, {
+      onSuccess: () => {
+        toast.success(t('batch.runStarted'))
+        setIsUploadPopoverOpen(false)
+        setBatchTab(resourceType, resourceId, 'history')
+      },
+      onError: () => {
+        toast.error(t('batch.runFailed'))
+      },
+    })
+  }
+
+  const handleUploadFile = (file: File | undefined) => {
+    if (!file) {
+      setUploadedFileMeta(null)
+      setUploadedFile(resourceType, resourceId, null)
+      return
+    }
+
+    setUploadedFileMeta({
+      name: file.name,
+      size: file.size,
+    })
+    setUploadedFileName(resourceType, resourceId, file.name)
+    uploadMutation.mutate(file)
+  }
+
+  const handleClearUploadedFile = () => {
+    setUploadedFileMeta(null)
+    setUploadedFile(resourceType, resourceId, null)
+  }
+
+  return {
+    canDownloadTemplate,
+    currentFileExtension: currentFileName ? getFileExtension(currentFileName) : '',
+    currentFileName,
+    currentFileSize: uploadedFileMeta ? formatFileSize(uploadedFileMeta.size) : '',
+    handleClearUploadedFile,
+    handleDownloadTemplate,
+    handleRun,
+    handleUploadFile,
+    isFileUploading,
+    isRunning,
+    isRunDisabled,
+    isUploadPopoverOpen,
+    setIsUploadPopoverOpen,
+    uploadButtonDisabled,
+  }
+}
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
new file mode 100644
index 0000000000..a319603026
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
@@ -0,0 +1,29 @@
+import type { EvaluationResourceType } from '../../../types'
+import { useMemo } from 'react'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import { useAppWorkflow } from '@/service/use-workflow'
+import { getGraphNodes, getStartNodeInputFields } from './input-fields-utils'
+
+export const usePublishedInputFields = (
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  const { data: currentAppWorkflow, isLoading: isAppWorkflowLoading } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
+  const { data: currentSnippetWorkflow, isLoading: isSnippetWorkflowLoading } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
+
+  const inputFields = useMemo(() => {
+    if (resourceType === 'apps')
+      return getStartNodeInputFields(currentAppWorkflow?.graph.nodes)
+
+    if (resourceType === 'snippets')
+      return getStartNodeInputFields(getGraphNodes(currentSnippetWorkflow?.graph))
+
+    return []
+  }, [currentAppWorkflow?.graph.nodes, currentSnippetWorkflow?.graph, resourceType])
+
+  return {
+    inputFields,
+    isInputFieldsLoading: (resourceType === 'apps' && isAppWorkflowLoading)
+      || (resourceType === 'snippets' && isSnippetWorkflowLoading),
+  }
+}
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 57033d17e4..82a2c29250 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -2,11 +2,13 @@
   "batch.description": "Execute batch evaluations and track performance history.",
   "batch.downloadTemplate": "Download Excel Template",
   "batch.emptyHistory": "No test history yet.",
+  "batch.example": "Example:",
   "batch.fileRequired": "Upload an evaluation dataset file before running the test.",
   "batch.loadingInputFields": "Loading input fields...",
   "batch.noInputFields": "No published start node input fields found.",
   "batch.noticeDescription": "Configuration incomplete. Select the Judge Model and Metrics on the left to generate your batch test template.",
   "batch.noticeTitle": "Quick start",
+  "batch.removeUploadedFile": "Remove uploaded file",
   "batch.requirementsDescription": "The input variables required to run this batch test. Ensure your uploaded dataset matches these fields.",
   "batch.requirementsTitle": "Data requirements",
   "batch.run": "Run Test",
@@ -18,6 +20,12 @@
   "batch.tabs.history": "Test History",
   "batch.tabs.input-fields": "Input Fields",
   "batch.title": "Batch Test",
+  "batch.uploadAndRun": "Upload & Run Test",
+  "batch.uploadDropzoneDownloadLink": "here",
+  "batch.uploadDropzoneDownloadPrefix": "Don't have the template? Download",
+  "batch.uploadDropzoneEmphasis": "filled",
+  "batch.uploadDropzonePrefix": "Drag and drop your",
+  "batch.uploadDropzoneSuffix": "Excel Template",
   "batch.uploadError": "Failed to upload file.",
   "batch.uploadHint": "Select a .csv or .xlsx file",
   "batch.uploadTitle": "Upload test file",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 2d54c30385..40c0478138 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -2,11 +2,13 @@
   "batch.description": "执行批量评测并追踪性能历史。",
   "batch.downloadTemplate": "下载 Excel 模板",
   "batch.emptyHistory": "还没有测试历史。",
+  "batch.example": "示例：",
   "batch.fileRequired": "请先上传评估数据集文件，再运行测试。",
   "batch.loadingInputFields": "正在加载输入字段...",
   "batch.noInputFields": "未找到已发布 Start 节点的输入字段。",
   "batch.noticeDescription": "配置尚未完成。请先在左侧选择判定模型和指标，以生成批量测试模板。",
   "batch.noticeTitle": "快速开始",
+  "batch.removeUploadedFile": "移除已上传文件",
   "batch.requirementsDescription": "运行此批量测试所需的输入变量。请确保上传的数据集包含这些字段。",
   "batch.requirementsTitle": "数据要求",
   "batch.run": "运行测试",
@@ -18,6 +20,12 @@
   "batch.tabs.history": "测试历史",
   "batch.tabs.input-fields": "输入字段",
   "batch.title": "批量测试",
+  "batch.uploadAndRun": "上传并运行测试",
+  "batch.uploadDropzoneDownloadLink": "下载",
+  "batch.uploadDropzoneDownloadPrefix": "还没有模板？",
+  "batch.uploadDropzoneEmphasis": "已填写的",
+  "batch.uploadDropzonePrefix": "拖拽你的",
+  "batch.uploadDropzoneSuffix": "Excel 模板",
   "batch.uploadError": "文件上传失败。",
   "batch.uploadHint": "选择 .csv 或 .xlsx 文件",
   "batch.uploadTitle": "上传测试文件",

From f96e63460e6bf325fba7f40f7aefaaa84d2bb8d6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 13:49:05 +0800
Subject: [PATCH 081/108] feat(web): save configuration

---
 .../evaluation/__tests__/index.spec.tsx       | 139 +++++++++++++++---
 .../evaluation/__tests__/store.spec.ts        |  73 +++++++++
 .../components/batch-test-panel/index.tsx     |  52 ++++++-
 web/app/components/evaluation/store-utils.ts  |  26 +++-
 web/i18n/en-US/evaluation.json                |   1 +
 web/i18n/zh-Hans/evaluation.json              |   1 +
 web/service/use-evaluation.ts                 |  12 ++
 7 files changed, 277 insertions(+), 27 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 1346b363ce..fca39a5e5d 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import Evaluation from '..'
 import ConditionsSection from '../components/conditions-section'
@@ -6,6 +8,8 @@ import { useEvaluationStore } from '../store'
 const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
 const mockUseEvaluationConfig = vi.hoisted(() => vi.fn())
 const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
+const mockUseSaveEvaluationConfigMutation = vi.hoisted(() => vi.fn())
+const mockUseStartEvaluationRunMutation = vi.hoisted(() => vi.fn())
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelList: () => ({
@@ -42,8 +46,71 @@ vi.mock('@/service/use-evaluation', () => ({
   useEvaluationConfig: (...args: unknown[]) => mockUseEvaluationConfig(...args),
   useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
   useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
+  useSaveEvaluationConfigMutation: (...args: unknown[]) => mockUseSaveEvaluationConfigMutation(...args),
+  useStartEvaluationRunMutation: (...args: unknown[]) => mockUseStartEvaluationRunMutation(...args),
 }))
 
+vi.mock('@/service/use-workflow', () => ({
+  useAppWorkflow: () => ({
+    data: {
+      graph: {
+        nodes: [{
+          id: 'start',
+          data: {
+            type: 'start',
+            variables: [{
+              variable: 'query',
+              type: 'text-input',
+            }],
+          },
+        }],
+      },
+    },
+    isLoading: false,
+  }),
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetPublishedWorkflow: () => ({
+    data: {
+      graph: {
+        nodes: [{
+          id: 'start',
+          data: {
+            type: 'start',
+            variables: [{
+              variable: 'query',
+              type: 'text-input',
+            }],
+          },
+        }],
+      },
+    },
+    isLoading: false,
+  }),
+}))
+
+const renderWithQueryClient = (ui: ReactNode) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  })
+
+  return render(ui, {
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    ),
+  })
+}
+
 describe('Evaluation', () => {
   beforeEach(() => {
     useEvaluationStore.setState({ resources: {} })
@@ -72,12 +139,24 @@ describe('Evaluation', () => {
         })
       },
     })
+    mockUseSaveEvaluationConfigMutation.mockReturnValue({
+      isPending: false,
+      mutate: vi.fn(),
+    })
+    mockUseStartEvaluationRunMutation.mockReturnValue({
+      isPending: false,
+      mutate: vi.fn(),
+    })
   })
 
-  it('should search, select metric nodes, and create a batch history record', async () => {
-    vi.useFakeTimers()
+  it('should search, select metric nodes, and save evaluation config', () => {
+    const saveConfig = vi.fn()
+    mockUseSaveEvaluationConfigMutation.mockReturnValue({
+      isPending: false,
+      mutate: saveConfig,
+    })
 
-    render(<Evaluation resourceType="apps" resourceId="app-1" />)
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-1" />)
 
     expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('openai:gpt-4o-mini')
 
@@ -104,17 +183,39 @@ describe('Evaluation', () => {
     fireEvent.click(screen.getByTestId('evaluation-metric-node-answer-correctness-node-answer'))
     expect(screen.getAllByText('Answer Correctness').length).toBeGreaterThan(0)
 
-    fireEvent.click(screen.getByRole('button', { name: 'evaluation.batch.run' }))
-    expect(screen.getByText('evaluation.batch.status.running')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-    await act(async () => {
-      vi.advanceTimersByTime(1300)
+    expect(saveConfig).toHaveBeenCalledWith({
+      params: {
+        targetType: 'apps',
+        targetId: 'app-1',
+      },
+      body: {
+        evaluation_model: 'gpt-4o-mini',
+        evaluation_model_provider: 'openai',
+        default_metrics: [
+          {
+            metric: 'faithfulness',
+            value_type: 'number',
+            node_info_list: [
+              { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+            ],
+          },
+          {
+            metric: 'answer-correctness',
+            value_type: 'number',
+            node_info_list: [
+              { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+            ],
+          },
+        ],
+        customized_metrics: null,
+        judgment_config: null,
+      },
+    }, {
+      onSuccess: expect.any(Function),
+      onError: expect.any(Function),
     })
-
-    expect(screen.getByText('evaluation.batch.status.success')).toBeInTheDocument()
-    expect(screen.getByText('Workflow evaluation batch')).toBeInTheDocument()
-
-    vi.useRealTimers()
   })
 
   it('should hide the value row for empty operators', () => {
@@ -138,7 +239,7 @@ describe('Evaluation', () => {
 
     let rerender: ReturnType<typeof render>['rerender']
     act(() => {
-      ({ rerender } = render(<Evaluation resourceType={resourceType} resourceId={resourceId} />))
+      ({ rerender } = renderWithQueryClient(<Evaluation resourceType={resourceType} resourceId={resourceId} />))
     })
 
     expect(screen.getByPlaceholderText('evaluation.conditions.valuePlaceholder')).toBeInTheDocument()
@@ -212,7 +313,7 @@ describe('Evaluation', () => {
       },
     })
 
-    render(<Evaluation resourceType="apps" resourceId="app-3" />)
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-3" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
 
@@ -227,7 +328,7 @@ describe('Evaluation', () => {
       isLoading: false,
     })
 
-    render(<Evaluation resourceType="apps" resourceId="app-4" />)
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-4" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
 
@@ -256,7 +357,7 @@ describe('Evaluation', () => {
       },
     })
 
-    render(<Evaluation resourceType="apps" resourceId="app-5" />)
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-5" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
 
@@ -270,7 +371,7 @@ describe('Evaluation', () => {
   })
 
   it('should render the pipeline-specific layout without auto-selecting a judge model', () => {
-    render(<Evaluation resourceType="datasets" resourceId="dataset-1" />)
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-1" />)
 
     expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('empty')
     expect(screen.getByText('evaluation.history.title')).toBeInTheDocument()
@@ -294,14 +395,14 @@ describe('Evaluation', () => {
       },
     })
 
-    render(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
 
     expect(screen.getByText('Context Precision')).toBeInTheDocument()
     expect(screen.getByDisplayValue('0.85')).toBeInTheDocument()
   })
 
   it('should enable pipeline batch actions after selecting a judge model and metric', () => {
-    render(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
 
     fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
     fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index eb7cd74b4d..c3b122c18a 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -6,6 +6,7 @@ import {
   requiresConditionValue,
   useEvaluationStore,
 } from '../store'
+import { buildEvaluationConfigPayload, buildEvaluationRunRequest } from '../store-utils'
 
 describe('evaluation store', () => {
   beforeEach(() => {
@@ -271,4 +272,76 @@ describe('evaluation store', () => {
     expect(hydratedState.uploadedFileName).toBe('batch.csv')
     expect(hydratedState.batchRecords).toHaveLength(1)
   })
+
+  it('should build an evaluation config save payload from resource state', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-save-config'
+    const store = useEvaluationStore.getState()
+
+    store.ensureResource(resourceType, resourceId)
+    store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+    store.addBuiltinMetric(resourceType, resourceId, 'faithfulness', [
+      { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+    ])
+    store.addCustomMetric(resourceType, resourceId)
+
+    const customMetric = useEvaluationStore.getState().resources['apps:app-save-config'].metrics.find(metric => metric.kind === 'custom-workflow')!
+    store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+      workflowId: 'workflow-precision-review',
+      workflowAppId: 'evaluation-workflow-app-id',
+      workflowName: 'Precision Review',
+    })
+    store.syncCustomMetricMappings(resourceType, resourceId, customMetric.id, ['query'])
+    store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+      id: 'score',
+      valueType: 'number',
+    }])
+
+    const syncedMetric = useEvaluationStore.getState().resources['apps:app-save-config'].metrics.find(metric => metric.id === customMetric.id)!
+    store.updateCustomMetricMapping(resourceType, resourceId, customMetric.id, syncedMetric.customConfig!.mappings[0].id, {
+      outputVariableId: '{{#node-answer.output#}}',
+    })
+    store.addCondition(resourceType, resourceId, ['workflow-precision-review', 'score'])
+
+    const condition = useEvaluationStore.getState().resources['apps:app-save-config'].judgmentConfig.conditions[0]
+    store.updateConditionOperator(resourceType, resourceId, condition.id, '≥')
+    store.updateConditionValue(resourceType, resourceId, condition.id, '0.8')
+
+    const resource = useEvaluationStore.getState().resources['apps:app-save-config']
+    const expectedPayload = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [{
+        metric: 'faithfulness',
+        value_type: 'number',
+        node_info_list: [
+          { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+        ],
+      }],
+      customized_metrics: {
+        evaluation_workflow_id: 'evaluation-workflow-app-id',
+        input_fields: {
+          query: '{{#node-answer.output#}}',
+        },
+        output_fields: [{
+          variable: 'score',
+          value_type: 'number',
+        }],
+      },
+      judgment_config: {
+        logical_operator: 'and',
+        conditions: [{
+          variable_selector: ['evaluation-workflow-app-id', 'score'],
+          comparison_operator: '≥',
+          value: '0.8',
+        }],
+      },
+    }
+
+    expect(buildEvaluationConfigPayload(resource)).toEqual(expectedPayload)
+    expect(buildEvaluationRunRequest(resource, 'file-1')).toEqual({
+      ...expectedPayload,
+      file_id: 'file-1',
+    })
+  })
 })
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 0736de4f93..0f7226af00 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -2,8 +2,12 @@
 
 import type { BatchTestTab, EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
+import { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
 import { cn } from '@/utils/classnames'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import { buildEvaluationConfigPayload } from '../../store-utils'
 import { TAB_CLASS_NAME } from '../../utils'
 import HistoryTab from './history-tab'
 import InputFieldsTab from './input-fields-tab'
@@ -15,20 +19,64 @@ const BatchTestPanel = ({
   resourceId,
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
   const tabLabels: Record<BatchTestTab, string> = {
     'input-fields': t('batch.tabs.input-fields'),
     'history': t('batch.tabs.history'),
   }
   const resource = useEvaluationResource(resourceType, resourceId)
   const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const saveConfigMutation = useSaveEvaluationConfigMutation()
   const isRunnable = isEvaluationRunnable(resource)
   const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
 
+  const handleSave = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    const body = buildEvaluationConfigPayload(resource)
+
+    if (!body) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    saveConfigMutation.mutate({
+      params: {
+        targetType: resourceType,
+        targetId: resourceId,
+      },
+      body,
+    }, {
+      onSuccess: () => {
+        toast.success(tCommon('api.saved'))
+      },
+      onError: () => {
+        toast.error(t('config.saveFailed'))
+      },
+    })
+  }
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-background-default">
       <div className="px-6 py-4">
-        <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
-        <div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
+            <div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
+          </div>
+          <Button
+            className="shrink-0"
+            variant="primary"
+            disabled={!isRunnable}
+            loading={saveConfigMutation.isPending}
+            onClick={handleSave}
+          >
+            {tCommon('operation.save')}
+          </Button>
+        </div>
         <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
           <div className="flex items-start gap-3">
             <span aria-hidden="true" className="mt-0.5 i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning" />
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index abe5a59c51..a19e08e4da 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -11,6 +11,7 @@ import type {
 } from './types'
 import type {
   EvaluationConfig,
+  EvaluationConfigData,
   EvaluationCustomizedMetric,
   EvaluationDefaultMetric,
   EvaluationJudgmentCondition,
@@ -432,7 +433,7 @@ const getCustomMetricScopeId = (metric: EvaluationMetric) => {
   return metric.customConfig?.workflowAppId ?? metric.customConfig?.workflowId ?? null
 }
 
-const buildCustomizedMetricsPayload = (metrics: EvaluationMetric[]): EvaluationRunRequest['customized_metrics'] => {
+const buildCustomizedMetricsPayload = (metrics: EvaluationMetric[]): EvaluationConfigData['customized_metrics'] => {
   const customMetric = metrics.find(metric => metric.kind === 'custom-workflow')
   const customConfig = customMetric?.customConfig
   const evaluationWorkflowId = customMetric ? getCustomMetricScopeId(customMetric) : null
@@ -456,7 +457,7 @@ const buildCustomizedMetricsPayload = (metrics: EvaluationMetric[]): EvaluationR
   }
 }
 
-const buildJudgmentConfigPayload = (resource: EvaluationResourceState): EvaluationRunRequest['judgment_config'] => {
+const buildJudgmentConfigPayload = (resource: EvaluationResourceState): EvaluationConfigData['judgment_config'] => {
   const conditions = resource.judgmentConfig.conditions
     .filter(condition => !!condition.variableSelector)
     .map((condition) => {
@@ -484,17 +485,15 @@ const buildJudgmentConfigPayload = (resource: EvaluationResourceState): Evaluati
   }
 }
 
-export const buildEvaluationRunRequest = (
+export const buildEvaluationConfigPayload = (
   resource: EvaluationResourceState,
-  fileId: string,
-): EvaluationRunRequest | null => {
+): EvaluationConfigData | null => {
   const selectedModel = decodeModelSelection(resource.judgeModelId)
 
   if (!selectedModel)
     return null
 
   return {
-    file_id: fileId,
     evaluation_model: selectedModel.model,
     evaluation_model_provider: selectedModel.provider,
     default_metrics: resource.metrics
@@ -509,6 +508,21 @@ export const buildEvaluationRunRequest = (
   }
 }
 
+export const buildEvaluationRunRequest = (
+  resource: EvaluationResourceState,
+  fileId: string,
+): EvaluationRunRequest | null => {
+  const configPayload = buildEvaluationConfigPayload(resource)
+
+  if (!configPayload)
+    return null
+
+  return {
+    ...configPayload,
+    file_id: fileId,
+  }
+}
+
 const getResourceState = (
   resources: EvaluationStoreResources,
   resourceType: EvaluationResourceType,
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 82a2c29250..d5a79c2b6a 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -61,6 +61,7 @@
   "conditions.valueTypes.boolean": "Boolean",
   "conditions.valueTypes.number": "Number",
   "conditions.valueTypes.string": "String",
+  "config.saveFailed": "Failed to save evaluation configuration.",
   "description": "Configure automated testing to grade your application's performance.",
   "history.actions.downloadResultFile": "Download result",
   "history.actions.downloadTestFile": "Download test file",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 40c0478138..67cf0e268c 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -61,6 +61,7 @@
   "conditions.valueTypes.boolean": "布尔",
   "conditions.valueTypes.number": "数值",
   "conditions.valueTypes.string": "文本",
+  "config.saveFailed": "保存评测配置失败。",
   "description": "配置自动化测试，对应用表现进行评分。",
   "history.actions.downloadResultFile": "下载结果文件",
   "history.actions.downloadTestFile": "下载测试文件",
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index 2406345fc2..c07be31c57 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -63,6 +63,18 @@ export const useEvaluationNodeInfoMutation = () => {
   return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
 }
 
+export const useSaveEvaluationConfigMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(consoleQuery.evaluation.saveConfig.mutationOptions({
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.evaluation.config.key(),
+      })
+    },
+  }))
+}
+
 export const useStartEvaluationRunMutation = () => {
   const queryClient = useQueryClient()
 

From 670ab16ea184eadd793003539a390ea89f4e9535 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 16:51:06 +0800
Subject: [PATCH 082/108] feat(web): template download & upload & run in
 rag-pipeline

---
 .../evaluation/__tests__/index.spec.tsx       | 105 +++++++++++++++++-
 .../input-fields/input-fields-utils.ts        |  14 +++
 .../input-fields/upload-run-popover.tsx       |   4 +-
 .../use-published-input-fields.ts             |  14 ++-
 .../components/layout/pipeline-evaluation.tsx |  83 ++++++--------
 5 files changed, 167 insertions(+), 53 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index fca39a5e5d..a4c0232d5e 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -1,15 +1,25 @@
 import type { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import Evaluation from '..'
 import ConditionsSection from '../components/conditions-section'
 import { useEvaluationStore } from '../store'
 
+const mockUpload = vi.hoisted(() => vi.fn())
 const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
 const mockUseEvaluationConfig = vi.hoisted(() => vi.fn())
 const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
 const mockUseSaveEvaluationConfigMutation = vi.hoisted(() => vi.fn())
 const mockUseStartEvaluationRunMutation = vi.hoisted(() => vi.fn())
+const mockUsePublishedPipelineInfo = vi.hoisted(() => vi.fn())
+
+vi.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset?: { pipeline_id?: string } }) => unknown) => selector({
+    dataset: {
+      pipeline_id: 'pipeline-1',
+    },
+  }),
+}))
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelList: () => ({
@@ -42,6 +52,10 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-selec
   ),
 }))
 
+vi.mock('@/service/base', () => ({
+  upload: (...args: unknown[]) => mockUpload(...args),
+}))
+
 vi.mock('@/service/use-evaluation', () => ({
   useEvaluationConfig: (...args: unknown[]) => mockUseEvaluationConfig(...args),
   useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
@@ -50,6 +64,10 @@ vi.mock('@/service/use-evaluation', () => ({
   useStartEvaluationRunMutation: (...args: unknown[]) => mockUseStartEvaluationRunMutation(...args),
 }))
 
+vi.mock('@/service/use-pipeline', () => ({
+  usePublishedPipelineInfo: (...args: unknown[]) => mockUsePublishedPipelineInfo(...args),
+}))
+
 vi.mock('@/service/use-workflow', () => ({
   useAppWorkflow: () => ({
     data: {
@@ -147,6 +165,28 @@ describe('Evaluation', () => {
       isPending: false,
       mutate: vi.fn(),
     })
+    mockUsePublishedPipelineInfo.mockReturnValue({
+      data: {
+        rag_pipeline_variables: [{
+          belong_to_node_id: 'shared',
+          type: 'text-input',
+          label: 'Question',
+          variable: 'question',
+          required: true,
+        }, {
+          belong_to_node_id: 'shared',
+          type: 'number',
+          label: 'Top K',
+          variable: 'top_k',
+          required: false,
+        }],
+      },
+      isLoading: false,
+    })
+    mockUpload.mockResolvedValue({
+      id: 'uploaded-file-id',
+      name: 'evaluation.csv',
+    })
   })
 
   it('should search, select metric nodes, and save evaluation config', () => {
@@ -411,4 +451,67 @@ describe('Evaluation', () => {
     expect(screen.getByRole('button', { name: 'evaluation.batch.downloadTemplate' })).toBeEnabled()
     expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeEnabled()
   })
+
+  it('should upload and start a pipeline evaluation run', async () => {
+    const startRun = vi.fn()
+    mockUseStartEvaluationRunMutation.mockReturnValue({
+      isPending: false,
+      mutate: startRun,
+    })
+    mockUpload.mockResolvedValue({
+      id: 'file-1',
+      name: 'pipeline-evaluation.csv',
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-run" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
+    fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' }))
+
+    expect(screen.getAllByText('question').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('top_k').length).toBeGreaterThan(0)
+
+    const fileInput = document.querySelector<HTMLInputElement>('input[type="file"][accept=".csv,.xlsx"]')
+    expect(fileInput).toBeInTheDocument()
+
+    fireEvent.change(fileInput!, {
+      target: {
+        files: [new File(['case_id,input,expected'], 'pipeline-evaluation.csv', { type: 'text/csv' })],
+      },
+    })
+
+    await waitFor(() => {
+      expect(mockUpload).toHaveBeenCalledWith({
+        xhr: expect.any(XMLHttpRequest),
+        data: expect.any(FormData),
+      })
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.batch.run' }))
+
+    await waitFor(() => {
+      expect(startRun).toHaveBeenCalledWith({
+        params: {
+          targetType: 'datasets',
+          targetId: 'dataset-run',
+        },
+        body: {
+          evaluation_model: 'gpt-4o-mini',
+          evaluation_model_provider: 'openai',
+          default_metrics: [{
+            metric: 'context-precision',
+            value_type: 'number',
+            node_info_list: [],
+          }],
+          customized_metrics: null,
+          judgment_config: null,
+          file_id: 'file-1',
+        },
+      }, {
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      })
+    })
+  })
 })
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
index 5a71b81d06..2a12548a21 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
@@ -1,6 +1,8 @@
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { InputVar, Node } from '@/app/components/workflow/types'
+import type { RAGPipelineVariables } from '@/models/pipeline'
 import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { inputVarTypeToVarType as pipelineInputVarTypeToVarType } from '@/app/components/workflow/nodes/data-source/utils'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 
 export type InputField = {
@@ -27,6 +29,18 @@ export const getStartNodeInputFields = (nodes?: Node[]): InputField[] => {
     }))
 }
 
+export const getRagPipelineInputFields = (variables?: RAGPipelineVariables): InputField[] => {
+  if (!Array.isArray(variables))
+    return []
+
+  return variables
+    .filter(variable => typeof variable.variable === 'string' && !!variable.variable)
+    .map(variable => ({
+      name: variable.variable,
+      type: pipelineInputVarTypeToVarType(variable.type),
+    }))
+}
+
 const escapeCsvCell = (value: string) => {
   if (!/[",\n\r]/.test(value))
     return value
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
index 01c9d84770..3a54d9af0a 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -15,6 +15,7 @@ type UploadRunPopoverProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
   triggerDisabled: boolean
+  triggerLabel?: string
   inputFields: InputField[]
   currentFileName: string | null | undefined
   currentFileExtension: string
@@ -32,6 +33,7 @@ const UploadRunPopover = ({
   open,
   onOpenChange,
   triggerDisabled,
+  triggerLabel,
   inputFields,
   currentFileName,
   currentFileExtension,
@@ -65,7 +67,7 @@ const UploadRunPopover = ({
       <PopoverTrigger
         render={(
           <Button className="w-full justify-center" variant="primary" disabled={triggerDisabled}>
-            {t('batch.uploadAndRun')}
+            {triggerLabel ?? t('batch.uploadAndRun')}
           </Button>
         )}
       />
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
index a319603026..3c31f1577c 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
@@ -1,8 +1,10 @@
 import type { EvaluationResourceType } from '../../../types'
 import { useMemo } from 'react'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { usePublishedPipelineInfo } from '@/service/use-pipeline'
 import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
 import { useAppWorkflow } from '@/service/use-workflow'
-import { getGraphNodes, getStartNodeInputFields } from './input-fields-utils'
+import { getGraphNodes, getRagPipelineInputFields, getStartNodeInputFields } from './input-fields-utils'
 
 export const usePublishedInputFields = (
   resourceType: EvaluationResourceType,
@@ -10,6 +12,8 @@ export const usePublishedInputFields = (
 ) => {
   const { data: currentAppWorkflow, isLoading: isAppWorkflowLoading } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
   const { data: currentSnippetWorkflow, isLoading: isSnippetWorkflowLoading } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
+  const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
+  const { data: currentPipelineWorkflow, isLoading: isPipelineWorkflowLoading } = usePublishedPipelineInfo(resourceType === 'datasets' ? (pipelineId ?? '') : '')
 
   const inputFields = useMemo(() => {
     if (resourceType === 'apps')
@@ -18,12 +22,16 @@ export const usePublishedInputFields = (
     if (resourceType === 'snippets')
       return getStartNodeInputFields(getGraphNodes(currentSnippetWorkflow?.graph))
 
+    if (resourceType === 'datasets')
+      return getRagPipelineInputFields(currentPipelineWorkflow?.rag_pipeline_variables)
+
     return []
-  }, [currentAppWorkflow?.graph.nodes, currentSnippetWorkflow?.graph, resourceType])
+  }, [currentAppWorkflow?.graph.nodes, currentPipelineWorkflow?.rag_pipeline_variables, currentSnippetWorkflow?.graph, resourceType])
 
   return {
     inputFields,
     isInputFieldsLoading: (resourceType === 'apps' && isAppWorkflowLoading)
-      || (resourceType === 'snippets' && isSnippetWorkflowLoading),
+      || (resourceType === 'snippets' && isSnippetWorkflowLoading)
+      || (resourceType === 'datasets' && isPipelineWorkflowLoading),
   }
 }
diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 32254e1e6d..5f4854139b 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -1,14 +1,16 @@
 'use client'
 
 import type { EvaluationResourceProps } from '../../types'
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import { toast } from '@/app/components/base/ui/toast'
 import { useDocLink } from '@/context/i18n'
 import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
+import { useInputFieldsActions } from '../batch-test-panel/input-fields/use-input-fields-actions'
+import { usePublishedInputFields } from '../batch-test-panel/input-fields/use-published-input-fields'
 import JudgeModelSelector from '../judge-model-selector'
 import PipelineHistoryTable from '../pipeline/pipeline-history-table'
 import PipelineMetricItem from '../pipeline/pipeline-metric-item'
@@ -26,11 +28,8 @@ const PipelineEvaluation = ({
   const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
   const removeMetric = useEvaluationStore(state => state.removeMetric)
   const updateMetricThreshold = useEvaluationStore(state => state.updateMetricThreshold)
-  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
-  const runBatchTest = useEvaluationStore(state => state.runBatchTest)
   const { data: availableMetricsData } = useAvailableEvaluationMetrics()
   const resource = useEvaluationResource(resourceType, resourceId)
-  const fileInputRef = useRef<HTMLInputElement>(null)
   const config = getEvaluationMockConfig(resourceType)
   const builtinMetricMap = useMemo(() => new Map(
     resource.metrics
@@ -45,6 +44,16 @@ const PipelineEvaluation = ({
   }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
   const isConfigReady = !!resource.judgeModelId && builtinMetricMap.size > 0
   const isRunnable = isEvaluationRunnable(resource)
+  const { inputFields, isInputFieldsLoading } = usePublishedInputFields(resourceType, resourceId)
+  const actions = useInputFieldsActions({
+    resourceType,
+    resourceId,
+    inputFields,
+    isInputFieldsLoading,
+    isPanelReady: isConfigReady,
+    isRunnable,
+    templateFileName: config.templateFileName,
+  })
 
   useEffect(() => {
     ensureResource(resourceType, resourceId)
@@ -60,23 +69,6 @@ const PipelineEvaluation = ({
     addBuiltinMetric(resourceType, resourceId, metricId)
   }
 
-  const handleDownloadTemplate = () => {
-    const content = ['case_id,input,expected', '1,Example input,Example output'].join('\n')
-    const link = document.createElement('a')
-    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
-    link.download = config.templateFileName
-    link.click()
-  }
-
-  const handleUploadAndRun = () => {
-    if (!isRunnable) {
-      toast.warning(t('batch.validation'))
-      return
-    }
-
-    fileInputRef.current?.click()
-  }
-
   return (
     <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
       <div className="flex min-h-0 flex-col border-b border-divider-subtle bg-background-default xl:w-[450px] xl:shrink-0 xl:border-r xl:border-b-0">
@@ -138,37 +130,32 @@ const PipelineEvaluation = ({
               <Button
                 className="flex-1 justify-center"
                 variant="secondary"
-                disabled={!isConfigReady}
-                onClick={handleDownloadTemplate}
+                disabled={!actions.canDownloadTemplate}
+                onClick={actions.handleDownloadTemplate}
               >
                 <span aria-hidden="true" className="mr-1 i-ri-file-excel-2-line h-4 w-4" />
                 {t('batch.downloadTemplate')}
               </Button>
-              <Button
-                className="flex-1 justify-center"
-                variant="primary"
-                disabled={!isConfigReady}
-                onClick={handleUploadAndRun}
-              >
-                {t('pipeline.uploadAndRun')}
-              </Button>
+              <div className="flex-1">
+                <UploadRunPopover
+                  open={actions.isUploadPopoverOpen}
+                  onOpenChange={actions.setIsUploadPopoverOpen}
+                  triggerDisabled={actions.uploadButtonDisabled}
+                  triggerLabel={t('pipeline.uploadAndRun')}
+                  inputFields={inputFields}
+                  currentFileName={actions.currentFileName}
+                  currentFileExtension={actions.currentFileExtension}
+                  currentFileSize={actions.currentFileSize}
+                  isFileUploading={actions.isFileUploading}
+                  isRunDisabled={actions.isRunDisabled}
+                  isRunning={actions.isRunning}
+                  onUploadFile={actions.handleUploadFile}
+                  onClearUploadedFile={actions.handleClearUploadedFile}
+                  onDownloadTemplate={actions.handleDownloadTemplate}
+                  onRun={actions.handleRun}
+                />
+              </div>
             </div>
-
-            <input
-              ref={fileInputRef}
-              hidden
-              type="file"
-              accept=".csv,.xlsx"
-              onChange={(event) => {
-                const file = event.target.files?.[0]
-                if (!file)
-                  return
-
-                setUploadedFileName(resourceType, resourceId, file.name)
-                runBatchTest(resourceType, resourceId)
-                event.target.value = ''
-              }}
-            />
           </div>
         </div>
 

From ba951b01de8573ddf72cb769fb706e26348ef394 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 17:05:14 +0800
Subject: [PATCH 083/108] feat(web): template download

---
 .../evaluation/__tests__/index.spec.tsx       | 37 ++-----------------
 .../input-fields/input-fields-utils.ts        | 14 -------
 .../use-published-input-fields.ts             | 14 ++-----
 .../components/layout/pipeline-evaluation.tsx | 13 ++++---
 4 files changed, 14 insertions(+), 64 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index a4c0232d5e..dbcdeee247 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -11,15 +11,6 @@ const mockUseEvaluationConfig = vi.hoisted(() => vi.fn())
 const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
 const mockUseSaveEvaluationConfigMutation = vi.hoisted(() => vi.fn())
 const mockUseStartEvaluationRunMutation = vi.hoisted(() => vi.fn())
-const mockUsePublishedPipelineInfo = vi.hoisted(() => vi.fn())
-
-vi.mock('@/context/dataset-detail', () => ({
-  useDatasetDetailContextWithSelector: (selector: (state: { dataset?: { pipeline_id?: string } }) => unknown) => selector({
-    dataset: {
-      pipeline_id: 'pipeline-1',
-    },
-  }),
-}))
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelList: () => ({
@@ -64,10 +55,6 @@ vi.mock('@/service/use-evaluation', () => ({
   useStartEvaluationRunMutation: (...args: unknown[]) => mockUseStartEvaluationRunMutation(...args),
 }))
 
-vi.mock('@/service/use-pipeline', () => ({
-  usePublishedPipelineInfo: (...args: unknown[]) => mockUsePublishedPipelineInfo(...args),
-}))
-
 vi.mock('@/service/use-workflow', () => ({
   useAppWorkflow: () => ({
     data: {
@@ -165,24 +152,6 @@ describe('Evaluation', () => {
       isPending: false,
       mutate: vi.fn(),
     })
-    mockUsePublishedPipelineInfo.mockReturnValue({
-      data: {
-        rag_pipeline_variables: [{
-          belong_to_node_id: 'shared',
-          type: 'text-input',
-          label: 'Question',
-          variable: 'question',
-          required: true,
-        }, {
-          belong_to_node_id: 'shared',
-          type: 'number',
-          label: 'Top K',
-          variable: 'top_k',
-          required: false,
-        }],
-      },
-      isLoading: false,
-    })
     mockUpload.mockResolvedValue({
       id: 'uploaded-file-id',
       name: 'evaluation.csv',
@@ -469,15 +438,15 @@ describe('Evaluation', () => {
     fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
     fireEvent.click(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' }))
 
-    expect(screen.getAllByText('question').length).toBeGreaterThan(0)
-    expect(screen.getAllByText('top_k').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('query').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Expect Results').length).toBeGreaterThan(0)
 
     const fileInput = document.querySelector<HTMLInputElement>('input[type="file"][accept=".csv,.xlsx"]')
     expect(fileInput).toBeInTheDocument()
 
     fireEvent.change(fileInput!, {
       target: {
-        files: [new File(['case_id,input,expected'], 'pipeline-evaluation.csv', { type: 'text/csv' })],
+        files: [new File(['query,Expect Results'], 'pipeline-evaluation.csv', { type: 'text/csv' })],
       },
     })
 
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
index 2a12548a21..5a71b81d06 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
@@ -1,8 +1,6 @@
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { InputVar, Node } from '@/app/components/workflow/types'
-import type { RAGPipelineVariables } from '@/models/pipeline'
 import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import { inputVarTypeToVarType as pipelineInputVarTypeToVarType } from '@/app/components/workflow/nodes/data-source/utils'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 
 export type InputField = {
@@ -29,18 +27,6 @@ export const getStartNodeInputFields = (nodes?: Node[]): InputField[] => {
     }))
 }
 
-export const getRagPipelineInputFields = (variables?: RAGPipelineVariables): InputField[] => {
-  if (!Array.isArray(variables))
-    return []
-
-  return variables
-    .filter(variable => typeof variable.variable === 'string' && !!variable.variable)
-    .map(variable => ({
-      name: variable.variable,
-      type: pipelineInputVarTypeToVarType(variable.type),
-    }))
-}
-
 const escapeCsvCell = (value: string) => {
   if (!/[",\n\r]/.test(value))
     return value
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
index 3c31f1577c..a319603026 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
@@ -1,10 +1,8 @@
 import type { EvaluationResourceType } from '../../../types'
 import { useMemo } from 'react'
-import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
-import { usePublishedPipelineInfo } from '@/service/use-pipeline'
 import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
 import { useAppWorkflow } from '@/service/use-workflow'
-import { getGraphNodes, getRagPipelineInputFields, getStartNodeInputFields } from './input-fields-utils'
+import { getGraphNodes, getStartNodeInputFields } from './input-fields-utils'
 
 export const usePublishedInputFields = (
   resourceType: EvaluationResourceType,
@@ -12,8 +10,6 @@ export const usePublishedInputFields = (
 ) => {
   const { data: currentAppWorkflow, isLoading: isAppWorkflowLoading } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
   const { data: currentSnippetWorkflow, isLoading: isSnippetWorkflowLoading } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
-  const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
-  const { data: currentPipelineWorkflow, isLoading: isPipelineWorkflowLoading } = usePublishedPipelineInfo(resourceType === 'datasets' ? (pipelineId ?? '') : '')
 
   const inputFields = useMemo(() => {
     if (resourceType === 'apps')
@@ -22,16 +18,12 @@ export const usePublishedInputFields = (
     if (resourceType === 'snippets')
       return getStartNodeInputFields(getGraphNodes(currentSnippetWorkflow?.graph))
 
-    if (resourceType === 'datasets')
-      return getRagPipelineInputFields(currentPipelineWorkflow?.rag_pipeline_variables)
-
     return []
-  }, [currentAppWorkflow?.graph.nodes, currentPipelineWorkflow?.rag_pipeline_variables, currentSnippetWorkflow?.graph, resourceType])
+  }, [currentAppWorkflow?.graph.nodes, currentSnippetWorkflow?.graph, resourceType])
 
   return {
     inputFields,
     isInputFieldsLoading: (resourceType === 'apps' && isAppWorkflowLoading)
-      || (resourceType === 'snippets' && isSnippetWorkflowLoading)
-      || (resourceType === 'datasets' && isPipelineWorkflowLoading),
+      || (resourceType === 'snippets' && isSnippetWorkflowLoading),
   }
 }
diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 5f4854139b..1b1f88e0d8 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -10,13 +10,17 @@ import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
 import { useInputFieldsActions } from '../batch-test-panel/input-fields/use-input-fields-actions'
-import { usePublishedInputFields } from '../batch-test-panel/input-fields/use-published-input-fields'
 import JudgeModelSelector from '../judge-model-selector'
 import PipelineHistoryTable from '../pipeline/pipeline-history-table'
 import PipelineMetricItem from '../pipeline/pipeline-metric-item'
 import PipelineResultsPanel from '../pipeline/pipeline-results-panel'
 import SectionHeader, { InlineSectionHeader } from '../section-header'
 
+const PIPELINE_INPUT_FIELDS = [
+  { name: 'query', type: 'string' },
+  { name: 'Expect Results', type: 'string' },
+]
+
 const PipelineEvaluation = ({
   resourceType,
   resourceId,
@@ -44,12 +48,11 @@ const PipelineEvaluation = ({
   }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
   const isConfigReady = !!resource.judgeModelId && builtinMetricMap.size > 0
   const isRunnable = isEvaluationRunnable(resource)
-  const { inputFields, isInputFieldsLoading } = usePublishedInputFields(resourceType, resourceId)
   const actions = useInputFieldsActions({
     resourceType,
     resourceId,
-    inputFields,
-    isInputFieldsLoading,
+    inputFields: PIPELINE_INPUT_FIELDS,
+    isInputFieldsLoading: false,
     isPanelReady: isConfigReady,
     isRunnable,
     templateFileName: config.templateFileName,
@@ -142,7 +145,7 @@ const PipelineEvaluation = ({
                   onOpenChange={actions.setIsUploadPopoverOpen}
                   triggerDisabled={actions.uploadButtonDisabled}
                   triggerLabel={t('pipeline.uploadAndRun')}
-                  inputFields={inputFields}
+                  inputFields={PIPELINE_INPUT_FIELDS}
                   currentFileName={actions.currentFileName}
                   currentFileExtension={actions.currentFileExtension}
                   currentFileSize={actions.currentFileSize}

From ce28ad771c97d9801bcd2d95c864005d27e062f3 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 17:12:27 +0800
Subject: [PATCH 084/108] feat(web): test history of rag-pipeline evaluation

---
 .../evaluation/__tests__/index.spec.tsx       |   2 +-
 .../components/layout/pipeline-evaluation.tsx |  12 +-
 .../pipeline/pipeline-history-table.tsx       | 117 ------------------
 3 files changed, 8 insertions(+), 123 deletions(-)
 delete mode 100644 web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index dbcdeee247..8a1055326b 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -383,7 +383,7 @@ describe('Evaluation', () => {
     renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-1" />)
 
     expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('empty')
-    expect(screen.getByText('evaluation.history.title')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.history.columns.time')).toBeInTheDocument()
     expect(screen.getByText('Context Precision')).toBeInTheDocument()
     expect(screen.getByText('Context Recall')).toBeInTheDocument()
     expect(screen.getByText('Context Relevance')).toBeInTheDocument()
diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 1b1f88e0d8..82aadebb06 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -8,10 +8,10 @@ import { useDocLink } from '@/context/i18n'
 import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import HistoryTab from '../batch-test-panel/history-tab'
 import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
 import { useInputFieldsActions } from '../batch-test-panel/input-fields/use-input-fields-actions'
 import JudgeModelSelector from '../judge-model-selector'
-import PipelineHistoryTable from '../pipeline/pipeline-history-table'
 import PipelineMetricItem from '../pipeline/pipeline-metric-item'
 import PipelineResultsPanel from '../pipeline/pipeline-results-panel'
 import SectionHeader, { InlineSectionHeader } from '../section-header'
@@ -164,10 +164,12 @@ const PipelineEvaluation = ({
 
         <div className="border-t border-divider-subtle" />
 
-        <PipelineHistoryTable
-          resourceType={resourceType}
-          resourceId={resourceId}
-        />
+        <div className="min-h-0 flex-1 px-6 py-4">
+          <HistoryTab
+            resourceType={resourceType}
+            resourceId={resourceId}
+          />
+        </div>
       </div>
 
       <div className="min-h-0 flex-1 bg-background-default">
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx
deleted file mode 100644
index 51769d5d75..0000000000
--- a/web/app/components/evaluation/components/pipeline/pipeline-history-table.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-import type { EvaluationResourceProps } from '../../types'
-import { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import Input from '@/app/components/base/input'
-import { cn } from '@/utils/classnames'
-import { useEvaluationResource } from '../../store'
-
-const PipelineHistoryTable = ({
-  resourceType,
-  resourceId,
-}: EvaluationResourceProps) => {
-  const { t } = useTranslation('evaluation')
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const [query, setQuery] = useState('')
-  const statusLabels = {
-    running: t('batch.status.running'),
-    success: t('batch.status.success'),
-    failed: t('batch.status.failed'),
-  }
-
-  const filteredRecords = useMemo(() => {
-    const keyword = query.trim().toLowerCase()
-    if (!keyword)
-      return resource.batchRecords
-
-    return resource.batchRecords.filter(record =>
-      record.fileName.toLowerCase().includes(keyword)
-      || record.summary.toLowerCase().includes(keyword),
-    )
-  }, [query, resource.batchRecords])
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex items-center justify-between gap-3 px-6 pt-4 pb-2">
-        <div className="system-xl-semibold text-text-primary">{t('history.title')}</div>
-        <div className="w-[160px] shrink-0 sm:w-[200px]">
-          <Input
-            value={query}
-            showLeftIcon
-            placeholder={t('history.searchPlaceholder')}
-            onChange={event => setQuery(event.target.value)}
-          />
-        </div>
-      </div>
-
-      <div className="min-h-0 flex-1 px-4 pb-4">
-        <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-effects-highlight bg-background-default">
-          <div className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] rounded-t-lg bg-background-section px-2 py-1">
-            <div className="flex items-center gap-1 px-2 system-xs-medium-uppercase text-text-tertiary">
-              <span>{t('history.columns.time')}</span>
-              <span aria-hidden="true" className="i-ri-arrow-down-line h-3 w-3" />
-            </div>
-            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</div>
-            <div className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</div>
-            <div className="px-2 text-center system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</div>
-            <div />
-          </div>
-
-          <div className="min-h-0 flex-1 overflow-y-auto">
-            {filteredRecords.length > 0 && (
-              <div className="divide-y divide-divider-subtle">
-                {filteredRecords.map(record => (
-                  <div
-                    key={record.id}
-                    className="grid grid-cols-[minmax(0,1.8fr)_80px_80px_80px_40px] items-center px-2 py-2"
-                  >
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{record.startedAt}</div>
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.creatorYou')}</div>
-                    <div className="truncate px-2 system-sm-regular text-text-secondary">{t('history.latestVersion')}</div>
-                    <div className="flex justify-center px-2">
-                      <Badge
-                        className={cn(
-                          record.status === 'failed' && 'badge-warning',
-                          record.status === 'success' && 'badge-accent',
-                        )}
-                      >
-                        {record.status === 'running'
-                          ? (
-                              <span className="flex items-center gap-1">
-                                <span aria-hidden="true" className="i-ri-loader-4-line h-3 w-3 animate-spin" />
-                                {statusLabels.running}
-                              </span>
-                            )
-                          : statusLabels[record.status]}
-                      </Badge>
-                    </div>
-                    <div className="flex justify-center">
-                      <button
-                        type="button"
-                        className="flex h-6 w-6 items-center justify-center rounded-md text-text-quaternary hover:bg-state-base-hover"
-                        aria-label={record.summary}
-                      >
-                        <span aria-hidden="true" className="i-ri-more-2-line h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {filteredRecords.length === 0 && (
-              <div className="flex h-full min-h-[321px] flex-col items-center justify-center gap-2 px-4 text-center">
-                <span aria-hidden="true" className="i-ri-history-line h-5 w-5 text-text-quaternary" />
-                <div className="system-sm-medium text-text-quaternary">{t('history.empty')}</div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default PipelineHistoryTable

From 8b6b3cddea932ccfae9ded554f912b5345f6a57c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 17:31:10 +0800
Subject: [PATCH 085/108] refactor(web): rag-pipeline evaluation

---
 .../components/layout/pipeline-evaluation.tsx | 113 ++----------------
 .../pipeline/pipeline-batch-actions.tsx       |  70 +++++++++++
 .../pipeline/pipeline-metrics-section.tsx     |  69 +++++++++++
 3 files changed, 151 insertions(+), 101 deletions(-)
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx

diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 82aadebb06..73c211f899 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -1,26 +1,17 @@
 'use client'
 
 import type { EvaluationResourceProps } from '../../types'
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useDocLink } from '@/context/i18n'
-import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
-import { getEvaluationMockConfig } from '../../mock'
-import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import { useEvaluationStore } from '../../store'
 import HistoryTab from '../batch-test-panel/history-tab'
-import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
-import { useInputFieldsActions } from '../batch-test-panel/input-fields/use-input-fields-actions'
 import JudgeModelSelector from '../judge-model-selector'
-import PipelineMetricItem from '../pipeline/pipeline-metric-item'
+import PipelineBatchActions from '../pipeline/pipeline-batch-actions'
+import PipelineMetricsSection from '../pipeline/pipeline-metrics-section'
 import PipelineResultsPanel from '../pipeline/pipeline-results-panel'
 import SectionHeader, { InlineSectionHeader } from '../section-header'
 
-const PIPELINE_INPUT_FIELDS = [
-  { name: 'query', type: 'string' },
-  { name: 'Expect Results', type: 'string' },
-]
-
 const PipelineEvaluation = ({
   resourceType,
   resourceId,
@@ -29,49 +20,11 @@ const PipelineEvaluation = ({
   const { t: tCommon } = useTranslation('common')
   const docLink = useDocLink()
   const ensureResource = useEvaluationStore(state => state.ensureResource)
-  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
-  const removeMetric = useEvaluationStore(state => state.removeMetric)
-  const updateMetricThreshold = useEvaluationStore(state => state.updateMetricThreshold)
-  const { data: availableMetricsData } = useAvailableEvaluationMetrics()
-  const resource = useEvaluationResource(resourceType, resourceId)
-  const config = getEvaluationMockConfig(resourceType)
-  const builtinMetricMap = useMemo(() => new Map(
-    resource.metrics
-      .filter(metric => metric.kind === 'builtin')
-      .map(metric => [metric.optionId, metric]),
-  ), [resource.metrics])
-  const availableMetricIds = useMemo(() => new Set(availableMetricsData?.metrics ?? []), [availableMetricsData?.metrics])
-  const availableBuiltinMetrics = useMemo(() => {
-    return config.builtinMetrics.filter(metric =>
-      availableMetricIds.has(metric.id) || builtinMetricMap.has(metric.id),
-    )
-  }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
-  const isConfigReady = !!resource.judgeModelId && builtinMetricMap.size > 0
-  const isRunnable = isEvaluationRunnable(resource)
-  const actions = useInputFieldsActions({
-    resourceType,
-    resourceId,
-    inputFields: PIPELINE_INPUT_FIELDS,
-    isInputFieldsLoading: false,
-    isPanelReady: isConfigReady,
-    isRunnable,
-    templateFileName: config.templateFileName,
-  })
 
   useEffect(() => {
     ensureResource(resourceType, resourceId)
   }, [ensureResource, resourceId, resourceType])
 
-  const handleToggleMetric = (metricId: string) => {
-    const selectedMetric = builtinMetricMap.get(metricId)
-    if (selectedMetric) {
-      removeMetric(resourceType, resourceId, selectedMetric.id)
-      return
-    }
-
-    addBuiltinMetric(resourceType, resourceId, metricId)
-  }
-
   return (
     <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
       <div className="flex min-h-0 flex-col border-b border-divider-subtle bg-background-default xl:w-[450px] xl:shrink-0 xl:border-r xl:border-b-0">
@@ -108,57 +61,15 @@ const PipelineEvaluation = ({
               </div>
             </section>
 
-            <section>
-              <InlineSectionHeader title={t('metrics.title')} tooltip={t('metrics.description')} />
-              <div className="mt-1 space-y-0.5">
-                {availableBuiltinMetrics.map((metric) => {
-                  const selectedMetric = builtinMetricMap.get(metric.id)
+            <PipelineMetricsSection
+              resourceType={resourceType}
+              resourceId={resourceId}
+            />
 
-                  return (
-                    <PipelineMetricItem
-                      key={metric.id}
-                      metric={metric}
-                      selected={!!selectedMetric}
-                      threshold={selectedMetric?.threshold}
-                      disabledCondition
-                      onToggle={() => handleToggleMetric(metric.id)}
-                      onThresholdChange={value => updateMetricThreshold(resourceType, resourceId, selectedMetric?.id ?? '', value)}
-                    />
-                  )
-                })}
-              </div>
-            </section>
-
-            <div className="flex gap-2 pt-2">
-              <Button
-                className="flex-1 justify-center"
-                variant="secondary"
-                disabled={!actions.canDownloadTemplate}
-                onClick={actions.handleDownloadTemplate}
-              >
-                <span aria-hidden="true" className="mr-1 i-ri-file-excel-2-line h-4 w-4" />
-                {t('batch.downloadTemplate')}
-              </Button>
-              <div className="flex-1">
-                <UploadRunPopover
-                  open={actions.isUploadPopoverOpen}
-                  onOpenChange={actions.setIsUploadPopoverOpen}
-                  triggerDisabled={actions.uploadButtonDisabled}
-                  triggerLabel={t('pipeline.uploadAndRun')}
-                  inputFields={PIPELINE_INPUT_FIELDS}
-                  currentFileName={actions.currentFileName}
-                  currentFileExtension={actions.currentFileExtension}
-                  currentFileSize={actions.currentFileSize}
-                  isFileUploading={actions.isFileUploading}
-                  isRunDisabled={actions.isRunDisabled}
-                  isRunning={actions.isRunning}
-                  onUploadFile={actions.handleUploadFile}
-                  onClearUploadedFile={actions.handleClearUploadedFile}
-                  onDownloadTemplate={actions.handleDownloadTemplate}
-                  onRun={actions.handleRun}
-                />
-              </div>
-            </div>
+            <PipelineBatchActions
+              resourceType={resourceType}
+              resourceId={resourceId}
+            />
           </div>
         </div>
 
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
new file mode 100644
index 0000000000..086de8f8da
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import type { InputField } from '../batch-test-panel/input-fields/input-fields-utils'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { getEvaluationMockConfig } from '../../mock'
+import { isEvaluationRunnable, useEvaluationResource } from '../../store'
+import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
+import { useInputFieldsActions } from '../batch-test-panel/input-fields/use-input-fields-actions'
+
+const PIPELINE_INPUT_FIELDS: InputField[] = [
+  { name: 'query', type: 'string' },
+  { name: 'Expect Results', type: 'string' },
+]
+
+const PipelineBatchActions = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const config = getEvaluationMockConfig(resourceType)
+  const isConfigReady = !!resource.judgeModelId && resource.metrics.some(metric => metric.kind === 'builtin')
+  const isRunnable = isEvaluationRunnable(resource)
+  const actions = useInputFieldsActions({
+    resourceType,
+    resourceId,
+    inputFields: PIPELINE_INPUT_FIELDS,
+    isInputFieldsLoading: false,
+    isPanelReady: isConfigReady,
+    isRunnable,
+    templateFileName: config.templateFileName,
+  })
+
+  return (
+    <div className="flex gap-2 pt-2">
+      <Button
+        className="flex-1 justify-center"
+        variant="secondary"
+        disabled={!actions.canDownloadTemplate}
+        onClick={actions.handleDownloadTemplate}
+      >
+        <span aria-hidden="true" className="mr-1 i-ri-file-excel-2-line h-4 w-4" />
+        {t('batch.downloadTemplate')}
+      </Button>
+      <div className="flex-1">
+        <UploadRunPopover
+          open={actions.isUploadPopoverOpen}
+          onOpenChange={actions.setIsUploadPopoverOpen}
+          triggerDisabled={actions.uploadButtonDisabled}
+          triggerLabel={t('pipeline.uploadAndRun')}
+          inputFields={PIPELINE_INPUT_FIELDS}
+          currentFileName={actions.currentFileName}
+          currentFileExtension={actions.currentFileExtension}
+          currentFileSize={actions.currentFileSize}
+          isFileUploading={actions.isFileUploading}
+          isRunDisabled={actions.isRunDisabled}
+          isRunning={actions.isRunning}
+          onUploadFile={actions.handleUploadFile}
+          onClearUploadedFile={actions.handleClearUploadedFile}
+          onDownloadTemplate={actions.handleDownloadTemplate}
+          onRun={actions.handleRun}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PipelineBatchActions
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
new file mode 100644
index 0000000000..f9eb852f89
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
+import { getEvaluationMockConfig } from '../../mock'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+import { InlineSectionHeader } from '../section-header'
+import PipelineMetricItem from './pipeline-metric-item'
+
+const PipelineMetricsSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const updateMetricThreshold = useEvaluationStore(state => state.updateMetricThreshold)
+  const { data: availableMetricsData } = useAvailableEvaluationMetrics()
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const config = getEvaluationMockConfig(resourceType)
+  const builtinMetricMap = useMemo(() => new Map(
+    resource.metrics
+      .filter(metric => metric.kind === 'builtin')
+      .map(metric => [metric.optionId, metric]),
+  ), [resource.metrics])
+  const availableMetricIds = useMemo(() => new Set(availableMetricsData?.metrics ?? []), [availableMetricsData?.metrics])
+  const availableBuiltinMetrics = useMemo(() => {
+    return config.builtinMetrics.filter(metric =>
+      availableMetricIds.has(metric.id) || builtinMetricMap.has(metric.id),
+    )
+  }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
+
+  const handleToggleMetric = (metricId: string) => {
+    const selectedMetric = builtinMetricMap.get(metricId)
+    if (selectedMetric) {
+      removeMetric(resourceType, resourceId, selectedMetric.id)
+      return
+    }
+
+    addBuiltinMetric(resourceType, resourceId, metricId)
+  }
+
+  return (
+    <section>
+      <InlineSectionHeader title={t('metrics.title')} tooltip={t('metrics.description')} />
+      <div className="mt-1 space-y-0.5">
+        {availableBuiltinMetrics.map((metric) => {
+          const selectedMetric = builtinMetricMap.get(metric.id)
+
+          return (
+            <PipelineMetricItem
+              key={metric.id}
+              metric={metric}
+              selected={!!selectedMetric}
+              threshold={selectedMetric?.threshold}
+              disabledCondition
+              onToggle={() => handleToggleMetric(metric.id)}
+              onThresholdChange={value => updateMetricThreshold(resourceType, resourceId, selectedMetric?.id ?? '', value)}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export default PipelineMetricsSection

From 79fc352a5a54d09b7057a9d9b9886cd8fd0a4fe8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 17:48:28 +0800
Subject: [PATCH 086/108] feat(web): evaluation run detail

---
 .../batch-test-panel/history-tab.tsx          |  49 ++++-
 .../input-fields/use-input-fields-actions.ts  |   4 +-
 .../components/layout/pipeline-evaluation.tsx |   5 +-
 .../pipeline/pipeline-results-panel.tsx       | 126 +++++++++++-
 .../pipeline/pipeline-results-table.tsx       | 118 ++++++++++++
 .../pipeline/pipeline-results-utils.ts        | 179 ++++++++++++++++++
 web/app/components/evaluation/store-utils.ts  |   1 +
 web/app/components/evaluation/store.ts        |  10 +
 web/app/components/evaluation/types.ts        |   1 +
 web/i18n/en-US/evaluation.json                |  12 ++
 web/i18n/zh-Hans/evaluation.json              |  23 +++
 web/types/evaluation.ts                       |   3 +
 12 files changed, 518 insertions(+), 13 deletions(-)
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts

diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
index 7080e175c4..d8735065e2 100644
--- a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -1,7 +1,7 @@
 import type { EvaluationResourceProps } from '../../types'
-import type { EvaluationLogFile } from '@/types/evaluation'
+import type { EvaluationLog, EvaluationLogFile } from '@/types/evaluation'
 import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Pagination from '@/app/components/base/pagination'
 import {
@@ -11,7 +11,9 @@ import {
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
 import { consoleClient, consoleQuery } from '@/service/client'
+import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
 
 const PAGE_SIZE = 16
 const LOADING_ROW_IDS = ['1', '2', '3', '4', '5', '6']
@@ -23,12 +25,18 @@ const formatCreatedAt = (createdAt: string) => {
   return createdAt.includes('T') ? createdAt.slice(0, 10) : createdAt
 }
 
+const getLogRunId = (record: EvaluationLog) => {
+  return record.run_id ?? record.evaluation_run_id ?? record.id ?? null
+}
+
 const HistoryTab = ({
   resourceType,
   resourceId,
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
   const [page, setPage] = useState(0)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setSelectedRunId = useEvaluationStore(state => state.setSelectedRunId)
   const logsQuery = useQuery({
     ...consoleQuery.evaluation.logs.queryOptions({
       input: {
@@ -58,10 +66,19 @@ const HistoryTab = ({
       downloadUrl({ url: fileInfo.download_url, fileName: file.name })
     },
   })
-  const records = logsQuery.data?.data ?? []
+  const records = useMemo(() => logsQuery.data?.data ?? [], [logsQuery.data?.data])
   const total = logsQuery.data?.total ?? 0
   const isInitialLoading = logsQuery.isLoading && !logsQuery.data
 
+  useEffect(() => {
+    if (resource.selectedRunId)
+      return
+
+    const firstRunId = records.map(getLogRunId).find((runId): runId is string => !!runId)
+    if (firstRunId)
+      setSelectedRunId(resourceType, resourceId, firstRunId)
+  }, [records, resource.selectedRunId, resourceId, resourceType, setSelectedRunId])
+
   return (
     <div className="flex min-h-full flex-col">
       <div className="min-h-0 flex-1 overflow-hidden">
@@ -98,7 +115,19 @@ const HistoryTab = ({
               </tr>
             ))}
             {!isInitialLoading && records.map(record => (
-              <tr key={`${record.created_at}-${record.test_file.id}`} className="border-b border-divider-subtle">
+              <tr
+                key={`${record.created_at}-${record.test_file.id}`}
+                className={cn(
+                  'border-b border-divider-subtle',
+                  getLogRunId(record) && 'cursor-pointer hover:bg-state-base-hover',
+                  getLogRunId(record) === resource.selectedRunId && 'bg-background-default-subtle',
+                )}
+                onClick={() => {
+                  const runId = getLogRunId(record)
+                  if (runId)
+                    setSelectedRunId(resourceType, resourceId, runId)
+                }}
+              >
                 <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{formatCreatedAt(record.created_at)}</td>
                 <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.created_by}</td>
                 <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.version || '-'}</td>
@@ -115,6 +144,7 @@ const HistoryTab = ({
                           type="button"
                           aria-label={t('history.actions.open')}
                           className="inline-flex h-8 w-8 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                          onClick={event => event.stopPropagation()}
                         />
                       )}
                     >
@@ -123,7 +153,10 @@ const HistoryTab = ({
                     <DropdownMenuContent popupClassName="w-[180px] rounded-lg border-[0.5px] border-components-panel-border py-1 shadow-lg">
                       <DropdownMenuItem
                         className="gap-2"
-                        onClick={() => fileDownloadMutation.mutate(record.test_file)}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          fileDownloadMutation.mutate(record.test_file)
+                        }}
                       >
                         <span aria-hidden="true" className="i-ri-file-download-line h-4 w-4" />
                         {t('history.actions.downloadTestFile')}
@@ -131,7 +164,11 @@ const HistoryTab = ({
                       <DropdownMenuItem
                         className="gap-2"
                         disabled={!record.result_file}
-                        onClick={() => record.result_file && fileDownloadMutation.mutate(record.result_file)}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          if (record.result_file)
+                            fileDownloadMutation.mutate(record.result_file)
+                        }}
                       >
                         <span aria-hidden="true" className="i-ri-download-2-line h-4 w-4" />
                         {t('history.actions.downloadResultFile')}
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
index 7740323569..f7ffe49813 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
@@ -36,6 +36,7 @@ export const useInputFieldsActions = ({
   const { t } = useTranslation('evaluation')
   const resource = useEvaluationResource(resourceType, resourceId)
   const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setSelectedRunId = useEvaluationStore(state => state.setSelectedRunId)
   const setUploadedFile = useEvaluationStore(state => state.setUploadedFile)
   const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
   const startRunMutation = useStartEvaluationRunMutation()
@@ -115,8 +116,9 @@ export const useInputFieldsActions = ({
       },
       body,
     }, {
-      onSuccess: () => {
+      onSuccess: (run) => {
         toast.success(t('batch.runStarted'))
+        setSelectedRunId(resourceType, resourceId, run.id)
         setIsUploadPopoverOpen(false)
         setBatchTab(resourceType, resourceId, 'history')
       },
diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 73c211f899..9fb6c70a90 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -84,7 +84,10 @@ const PipelineEvaluation = ({
       </div>
 
       <div className="min-h-0 flex-1 bg-background-default">
-        <PipelineResultsPanel />
+        <PipelineResultsPanel
+          resourceType={resourceType}
+          resourceId={resourceId}
+        />
       </div>
     </div>
   )
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
index 3e7286adbf..c66f3ecc2f 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
@@ -1,16 +1,132 @@
 'use client'
 
+import type { EvaluationResourceProps } from '../../types'
+import { skipToken, useMutation, useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import { consoleClient, consoleQuery } from '@/service/client'
+import { downloadUrl } from '@/utils/download'
+import { useEvaluationResource } from '../../store'
+import { decodeModelSelection } from '../../utils'
+import PipelineResultsTable from './pipeline-results-table'
+import { getMetricColumns, getRunDate } from './pipeline-results-utils'
 
-const PipelineResultsPanel = () => {
+const PAGE_SIZE = 100
+
+const PipelineResultsPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+  const selectedRunId = resource.selectedRunId
+  const runDetailQuery = useQuery(consoleQuery.evaluation.runDetail.queryOptions({
+    input: selectedRunId
+      ? {
+          params: {
+            targetType: resourceType,
+            targetId: resourceId,
+            runId: selectedRunId,
+          },
+          query: {
+            page: 1,
+            page_size: PAGE_SIZE,
+          },
+        }
+      : skipToken,
+    refetchOnWindowFocus: false,
+  }))
+  const resultFileDownloadMutation = useMutation({
+    mutationFn: async (fileId: string) => {
+      const fileInfo = await consoleClient.evaluation.file({
+        params: {
+          targetType: resourceType,
+          targetId: resourceId,
+          fileId,
+        },
+      })
+
+      downloadUrl({ url: fileInfo.download_url, fileName: fileInfo.name })
+    },
+  })
+  const runDetail = runDetailQuery.data
+  const items = runDetail?.items.data ?? []
+  const metricColumns = getMetricColumns(resource, items)
+  const thresholdColumns = metricColumns.filter(column => column.threshold !== undefined)
+  const isEmpty = !selectedRunId || (!runDetailQuery.isLoading && items.length === 0)
+
+  if (isEmpty) {
+    return (
+      <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
+        <div className="flex flex-col items-center gap-4 px-4 text-center">
+          <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
+          <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
-      <div className="flex flex-col items-center gap-4 px-4 text-center">
-        <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
-        <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
+    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-background-default">
+      <div className="shrink-0 px-6 pt-4 pb-2">
+        <h2 className="system-xl-semibold text-text-primary">{t('results.title')}</h2>
       </div>
+      {runDetailQuery.isError && (
+        <div className="px-6 py-4 system-sm-regular text-text-destructive">{t('results.loadFailed')}</div>
+      )}
+      {!runDetailQuery.isError && (
+        <div className="flex min-h-0 flex-1 flex-col px-6 py-1">
+          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 py-1">
+            <div className="flex min-w-0 flex-wrap items-center gap-2 system-xs-regular text-text-secondary">
+              <span>{getRunDate(runDetail?.run.started_at ?? runDetail?.run.created_at ?? null)}</span>
+              <span aria-hidden="true">·</span>
+              <span>{t('results.queryCount', { count: runDetail?.run.total_items ?? runDetail?.items.total ?? items.length })}</span>
+              {selectedModel && (
+                <>
+                  <span aria-hidden="true">·</span>
+                  <span className="inline-flex min-w-0 items-center gap-1.5 rounded-lg bg-background-section-burn px-2 py-1">
+                    <span aria-hidden="true" className="i-ri-robot-2-line h-4 w-4 shrink-0 text-text-accent" />
+                    <span className="truncate">{selectedModel.model}</span>
+                  </span>
+                </>
+              )}
+              {thresholdColumns.length > 0 && (
+                <>
+                  <span aria-hidden="true">·</span>
+                  <span className="flex min-w-0 flex-wrap items-center gap-1">
+                    {thresholdColumns.map(column => (
+                      <span
+                        key={column.id}
+                        className="rounded-lg border-[0.5px] border-divider-subtle bg-background-section px-2 py-1 text-text-tertiary"
+                      >
+                        {t('results.metricThreshold', { metric: column.label, threshold: column.threshold })}
+                      </span>
+                    ))}
+                  </span>
+                </>
+              )}
+            </div>
+            <button
+              type="button"
+              className="inline-flex h-7 shrink-0 items-center gap-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 system-xs-medium text-components-button-secondary-text shadow-xs disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={!runDetail?.run.result_file_id || resultFileDownloadMutation.isPending}
+              onClick={() => {
+                if (runDetail?.run.result_file_id)
+                  resultFileDownloadMutation.mutate(runDetail.run.result_file_id)
+              }}
+            >
+              <span aria-hidden="true" className="i-ri-download-2-line h-3.5 w-3.5" />
+              {t('results.export')}
+            </button>
+          </div>
+
+          <PipelineResultsTable
+            items={items}
+            metricColumns={metricColumns}
+            isLoading={runDetailQuery.isLoading}
+          />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
new file mode 100644
index 0000000000..df6c0107c7
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
@@ -0,0 +1,118 @@
+import type { MetricColumn } from './pipeline-results-utils'
+import type { EvaluationRunItem } from '@/types/evaluation'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+import {
+  formatValue,
+  getIsItemPassed,
+  getMetricTextClassName,
+  getMetricValue,
+  getQueryContent,
+} from './pipeline-results-utils'
+
+const LOADING_ROW_IDS = ['1', '2', '3', '4', '5', '6']
+
+type PipelineResultsTableProps = {
+  items: EvaluationRunItem[]
+  metricColumns: MetricColumn[]
+  isLoading: boolean
+}
+
+const PipelineResultsTable = ({
+  items,
+  metricColumns,
+  isLoading,
+}: PipelineResultsTableProps) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div className="min-h-0 flex-1 overflow-auto py-2">
+      <table className="min-w-full table-fixed border-collapse overflow-hidden rounded-lg">
+        <colgroup>
+          <col className="w-10" />
+          <col className="w-[220px]" />
+          <col className="w-[190px]" />
+          <col className="w-[220px]" />
+          {metricColumns.map(column => <col key={column.id} className="w-24" />)}
+        </colgroup>
+        <thead>
+          <tr className="bg-background-section">
+            <th className="h-7 rounded-l-lg" />
+            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.query')}</th>
+            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.expected')}</th>
+            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.actual')}</th>
+            {metricColumns.map((column, index) => (
+              <th
+                key={column.id}
+                className={cn(
+                  'h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary',
+                  index === metricColumns.length - 1 && 'rounded-r-lg',
+                )}
+              >
+                {column.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading && LOADING_ROW_IDS.map(rowId => (
+            <tr key={rowId} className="border-b border-divider-subtle">
+              <td colSpan={4 + metricColumns.length} className="h-10 px-3">
+                <div className="h-4 animate-pulse rounded bg-background-section" />
+              </td>
+            </tr>
+          ))}
+          {!isLoading && items.map((item) => {
+            const isPassed = getIsItemPassed(item, metricColumns)
+            const actualOutput = item.error ?? item.actual_output
+
+            return (
+              <tr key={item.id} className="border-b border-divider-subtle even:bg-background-default-subtle">
+                <td className="h-10 px-3 align-top">
+                  <span
+                    aria-label={isPassed ? t('results.status.passed') : t('results.status.failed')}
+                    className={cn(
+                      'mt-3 inline-block h-4 w-4',
+                      isPassed
+                        ? 'i-ri-check-line text-util-colors-green-green-600'
+                        : 'i-ri-close-line text-util-colors-red-red-600',
+                    )}
+                  />
+                </td>
+                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
+                  <div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
+                </td>
+                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
+                  <div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
+                </td>
+                <td className={cn(
+                  'h-10 px-3 py-3 align-top system-sm-regular',
+                  actualOutput ? 'text-text-secondary' : 'text-text-destructive',
+                )}
+                >
+                  <div className="line-clamp-2 break-words">
+                    {actualOutput ? formatValue(actualOutput) : t('results.noResult')}
+                  </div>
+                </td>
+                {metricColumns.map((column) => {
+                  const metricValue = getMetricValue(item.metrics, column)
+
+                  return (
+                    <td
+                      key={column.id}
+                      className={cn('h-10 px-3 py-3 align-top system-sm-regular', getMetricTextClassName(metricValue, column))}
+                    >
+                      {formatValue(metricValue)}
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PipelineResultsTable
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts b/web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts
new file mode 100644
index 0000000000..6523221315
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts
@@ -0,0 +1,179 @@
+import type { EvaluationResourceState } from '../../types'
+import type { EvaluationRunItem, EvaluationRunMetric } from '@/types/evaluation'
+import { formatTime } from '@/utils/time'
+
+const PREFERRED_QUERY_INPUT_KEYS = ['query', 'question', 'input']
+
+export type MetricColumn = {
+  id: string
+  label: string
+  threshold?: number
+}
+
+const normalizeMetricKey = (value: string) => value.toLowerCase().replace(/[\s_-]/g, '')
+
+const humanizeMetricName = (name: string) => {
+  return name
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+export const formatValue = (value: unknown) => {
+  if (value === null || value === undefined || value === '')
+    return '-'
+
+  if (typeof value === 'string')
+    return value
+
+  if (typeof value === 'number') {
+    return Number.isInteger(value)
+      ? String(value)
+      : value.toLocaleString(undefined, { maximumFractionDigits: 3 })
+  }
+
+  if (typeof value === 'boolean')
+    return value ? 'true' : 'false'
+
+  return JSON.stringify(value)
+}
+
+export const getQueryContent = (item: EvaluationRunItem) => {
+  for (const key of PREFERRED_QUERY_INPUT_KEYS) {
+    const value = item.inputs[key]
+    if (value !== undefined)
+      return formatValue(value)
+  }
+
+  const firstValue = Object.values(item.inputs).find(value => value !== undefined && value !== null && value !== '')
+  return formatValue(firstValue)
+}
+
+export const getMetricValue = (metrics: EvaluationRunMetric[], column: MetricColumn) => {
+  const normalizedColumnId = normalizeMetricKey(column.id)
+  const normalizedColumnLabel = normalizeMetricKey(column.label)
+  const metric = metrics.find((item) => {
+    if (!item.name)
+      return false
+
+    const normalizedMetricName = normalizeMetricKey(item.name)
+    return normalizedMetricName === normalizedColumnId || normalizedMetricName === normalizedColumnLabel
+  })
+
+  return metric?.value
+}
+
+const getNumericMetricValue = (metrics: EvaluationRunMetric[], column: MetricColumn) => {
+  const value = getMetricValue(metrics, column)
+  if (typeof value === 'number')
+    return value
+
+  if (typeof value === 'string' && value.trim() !== '') {
+    const numericValue = Number(value)
+    return Number.isNaN(numericValue) ? null : numericValue
+  }
+
+  return null
+}
+
+export const getMetricTextClassName = (value: unknown, column: MetricColumn) => {
+  const numericValue = typeof value === 'number'
+    ? value
+    : typeof value === 'string' && value.trim() !== ''
+      ? Number(value)
+      : null
+
+  if (numericValue === null || Number.isNaN(numericValue))
+    return 'text-text-secondary'
+
+  if (column.threshold === undefined)
+    return 'text-text-secondary'
+
+  if (numericValue >= column.threshold)
+    return 'text-util-colors-green-green-600'
+
+  if (numericValue === 0)
+    return 'text-util-colors-red-red-600'
+
+  return 'text-util-colors-warning-warning-600'
+}
+
+const getJudgmentResult = (judgment: Record<string, unknown>) => {
+  for (const key of ['passed', 'pass', 'success', 'result']) {
+    const value = judgment[key]
+    if (typeof value === 'boolean')
+      return value
+
+    if (typeof value === 'string') {
+      const normalizedValue = value.toLowerCase()
+      if (['passed', 'pass', 'success', 'succeeded', 'true'].includes(normalizedValue))
+        return true
+
+      if (['failed', 'fail', 'failure', 'false'].includes(normalizedValue))
+        return false
+    }
+  }
+
+  return null
+}
+
+export const getIsItemPassed = (item: EvaluationRunItem, metricColumns: MetricColumn[]) => {
+  if (item.error)
+    return false
+
+  const judgmentResult = getJudgmentResult(item.judgment)
+  if (judgmentResult !== null)
+    return judgmentResult
+
+  const thresholdColumns = metricColumns.filter(column => column.threshold !== undefined)
+  if (thresholdColumns.length > 0) {
+    return thresholdColumns.every((column) => {
+      const metricValue = getNumericMetricValue(item.metrics, column)
+      const threshold = column.threshold
+      return threshold !== undefined && metricValue !== null && metricValue >= threshold
+    })
+  }
+
+  return item.overall_score === null ? true : item.overall_score > 0
+}
+
+export const getMetricColumns = (
+  resource: EvaluationResourceState,
+  items: EvaluationRunItem[],
+) => {
+  const columns = new Map<string, MetricColumn>()
+
+  resource.metrics.forEach((metric) => {
+    columns.set(normalizeMetricKey(metric.optionId), {
+      id: metric.optionId,
+      label: metric.label,
+      threshold: metric.threshold,
+    })
+  })
+
+  items.forEach((item) => {
+    item.metrics.forEach((metric) => {
+      if (!metric.name)
+        return
+
+      const normalizedName = normalizeMetricKey(metric.name)
+      if (!columns.has(normalizedName)) {
+        columns.set(normalizedName, {
+          id: metric.name,
+          label: humanizeMetricName(metric.name),
+        })
+      }
+    })
+  })
+
+  return Array.from(columns.values())
+}
+
+export const getRunDate = (timestamp: number | null) => {
+  if (!timestamp)
+    return '-'
+
+  const milliseconds = timestamp > 1_000_000_000_000 ? timestamp : timestamp * 1000
+  return formatTime({ date: milliseconds, dateFormat: 'YYYY-MM-DD HH:mm' })
+}
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index a19e08e4da..2942bfb4b6 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -394,6 +394,7 @@ export const buildInitialState = (_resourceType: EvaluationResourceType): Evalua
     activeBatchTab: 'input-fields',
     uploadedFileId: null,
     uploadedFileName: null,
+    selectedRunId: null,
     batchRecords: [],
   }
 }
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
index 7db18e000b..4e2df1bb00 100644
--- a/web/app/components/evaluation/store.ts
+++ b/web/app/components/evaluation/store.ts
@@ -82,6 +82,7 @@ type EvaluationStore = {
     uploadedFile: { id: string, name: string } | null,
   ) => void
   setUploadedFileName: (resourceType: EvaluationResourceType, resourceId: string, uploadedFileName: string | null) => void
+  setSelectedRunId: (resourceType: EvaluationResourceType, resourceId: string, runId: string | null) => void
   runBatchTest: (resourceType: EvaluationResourceType, resourceId: string) => void
 }
 
@@ -110,6 +111,7 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
           activeBatchTab: state.resources[buildResourceKey(resourceType, resourceId)]?.activeBatchTab ?? 'input-fields',
           uploadedFileId: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileId ?? null,
           uploadedFileName: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileName ?? null,
+          selectedRunId: state.resources[buildResourceKey(resourceType, resourceId)]?.selectedRunId ?? null,
           batchRecords: state.resources[buildResourceKey(resourceType, resourceId)]?.batchRecords ?? [],
         },
       },
@@ -393,6 +395,14 @@ export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
       })),
     }))
   },
+  setSelectedRunId: (resourceType, resourceId, runId) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        selectedRunId: runId,
+      })),
+    }))
+  },
   runBatchTest: (resourceType, resourceId) => {
     const { uploadedFileName } = get().resources[buildResourceKey(resourceType, resourceId)] ?? buildInitialState(resourceType)
     const nextRecord = createBatchTestRecord(resourceType, uploadedFileName)
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
index 9a3750e5c5..c0a1574cf8 100644
--- a/web/app/components/evaluation/types.ts
+++ b/web/app/components/evaluation/types.ts
@@ -138,6 +138,7 @@ export type EvaluationResourceState = {
   activeBatchTab: BatchTestTab
   uploadedFileId: string | null
   uploadedFileName: string | null
+  selectedRunId: string | null
   batchRecords: BatchTestRecord[]
 }
 
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index d5a79c2b6a..57535ee836 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -115,6 +115,18 @@
   "metrics.update": "Update",
   "pipeline.passIf": "Pass if \u2265",
   "pipeline.uploadAndRun": "Upload & Run Test",
+  "results.columns.actual": "Actual Result",
+  "results.columns.expected": "Expect Result",
+  "results.columns.query": "Query Content",
   "results.empty": "No evaluation results yet.",
+  "results.export": "Export",
+  "results.loadFailed": "Failed to load evaluation results.",
+  "results.metricThreshold": "{{metric}} \u2265 {{threshold}}",
+  "results.noResult": "No Result",
+  "results.queryCount_one": "{{count}} query",
+  "results.queryCount_other": "{{count}} queries",
+  "results.status.failed": "Failed",
+  "results.status.passed": "Passed",
+  "results.title": "Test Details",
   "title": "Evaluation"
 }
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index 67cf0e268c..e02558387f 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -91,13 +91,36 @@
   "metrics.custom.workflowLabel": "评测工作流",
   "metrics.custom.workflowPlaceholder": "选择工作流",
   "metrics.description": "从内置指标中选择，如 Groundedness 和 Correctness ，以评估您的工作流输出。",
+  "metrics.expandNodes": "展开节点",
   "metrics.groups.operations": "运行",
+  "metrics.groups.other": "其他",
   "metrics.groups.quality": "质量",
+  "metrics.noNodesInWorkflow": "当前工作流中没有 LLM 节点",
   "metrics.noResults": "没有匹配的指标。",
+  "metrics.nodesAll": "全部节点",
+  "metrics.nodesLabel": "节点范围",
+  "metrics.nodesSelected": "已选节点",
   "metrics.remove": "删除指标",
+  "metrics.searchNodeOrMetrics": "搜索节点或指标",
   "metrics.searchPlaceholder": "搜索指标",
   "metrics.showLess": "收起",
   "metrics.showMore": "展开更多",
   "metrics.title": "指标",
+  "metrics.update": "更新",
+  "pipeline.passIf": "通过条件 \u2265",
+  "pipeline.uploadAndRun": "上传并运行测试",
+  "results.columns.actual": "实际结果",
+  "results.columns.expected": "预期结果",
+  "results.columns.query": "Query 内容",
+  "results.empty": "还没有评测结果。",
+  "results.export": "导出",
+  "results.loadFailed": "加载评测结果失败。",
+  "results.metricThreshold": "{{metric}} \u2265 {{threshold}}",
+  "results.noResult": "无结果",
+  "results.queryCount_one": "{{count}} 条 query",
+  "results.queryCount_other": "{{count}} 条 query",
+  "results.status.failed": "失败",
+  "results.status.passed": "通过",
+  "results.title": "测试详情",
   "title": "评测"
 }
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index 547b9cfa41..021b848325 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -83,6 +83,9 @@ export type EvaluationLogFile = {
 }
 
 export type EvaluationLog = {
+  id?: string
+  run_id?: string
+  evaluation_run_id?: string
   created_at: string
   created_by: string
   test_file: EvaluationLogFile

From 23291398ec9b8d33df68d3173b8d423261bdefb2 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 10 Apr 2026 18:13:13 +0800
Subject: [PATCH 087/108] feat(web): switch warining dialog

---
 .../app-publisher/__tests__/index.spec.tsx    | 115 +++++++++++++
 ...luation-workflow-switch-confirm-dialog.tsx | 158 ++++++++++++++++++
 .../components/app/app-publisher/index.tsx    |  78 ++++++++-
 web/contract/console/evaluation.ts            |  13 ++
 web/contract/router.ts                        |   2 +
 web/eslint-suppressions.json                  |  26 +--
 web/i18n/en-US/workflow.json                  |  10 ++
 web/service/use-evaluation.ts                 |  19 +++
 web/types/evaluation.ts                       |  12 ++
 9 files changed, 407 insertions(+), 26 deletions(-)
 create mode 100644 web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx

diff --git a/web/app/components/app/app-publisher/__tests__/index.spec.tsx b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
index 1c81d84612..4ee8c18fa2 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -16,6 +16,7 @@ const mockFetchInstalledAppList = vi.fn()
 const mockFetchAppDetailDirect = vi.fn()
 const mockToastError = vi.fn()
 const mockConvertWorkflowType = vi.fn()
+const mockRefetchEvaluationWorkflowAssociatedTargets = vi.fn()
 
 const sectionProps = vi.hoisted(() => ({
   summary: null as null | Record<string, any>,
@@ -27,6 +28,7 @@ const ahooksMocks = vi.hoisted(() => ({
 }))
 
 let mockAppDetail: Record<string, any> | null = null
+let mockEvaluationWorkflowAssociatedTargets: Record<string, any> | undefined
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
@@ -96,6 +98,14 @@ vi.mock('@/service/use-apps', () => ({
   }),
 }))
 
+vi.mock('@/service/use-evaluation', () => ({
+  useEvaluationWorkflowAssociatedTargets: () => ({
+    data: mockEvaluationWorkflowAssociatedTargets,
+    refetch: mockRefetchEvaluationWorkflowAssociatedTargets,
+    isFetching: false,
+  }),
+}))
+
 vi.mock('@/app/components/base/ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
@@ -198,6 +208,11 @@ describe('AppPublisher', () => {
       access_mode: AccessMode.PUBLIC,
     })
     mockConvertWorkflowType.mockResolvedValue({})
+    mockEvaluationWorkflowAssociatedTargets = { items: [] }
+    mockRefetchEvaluationWorkflowAssociatedTargets.mockResolvedValue({
+      data: { items: [] },
+      isError: false,
+    })
     mockOpenAsyncWindow.mockImplementation(async (resolver: () => Promise<string>) => {
       await resolver()
     })
@@ -518,6 +533,106 @@ describe('AppPublisher', () => {
     })
   })
 
+  it('should confirm before switching an evaluation workflow with associated targets to a standard workflow', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+    mockEvaluationWorkflowAssociatedTargets = {
+      items: [
+        {
+          target_type: 'app',
+          target_id: 'dependent-app-1',
+          target_name: 'Dependent App',
+        },
+        {
+          target_type: 'knowledge_base',
+          target_id: 'knowledge-1',
+          target_name: 'Knowledge Base',
+        },
+      ],
+    }
+    mockRefetchEvaluationWorkflowAssociatedTargets.mockResolvedValueOnce({
+      data: mockEvaluationWorkflowAssociatedTargets,
+      isError: false,
+    })
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockRefetchEvaluationWorkflowAssociatedTargets).toHaveBeenCalledTimes(1)
+    })
+    expect(mockConvertWorkflowType).not.toHaveBeenCalled()
+    expect(screen.getByText('Dependent App')).toBeInTheDocument()
+    expect(screen.getByText('Knowledge Base')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.switchToStandardWorkflowConfirm.switch' }))
+
+    await waitFor(() => {
+      expect(mockConvertWorkflowType).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: AppTypeEnum.WORKFLOW },
+      })
+    })
+  })
+
+  it('should switch an evaluation workflow directly when there are no associated targets', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockRefetchEvaluationWorkflowAssociatedTargets).toHaveBeenCalledTimes(1)
+      expect(mockConvertWorkflowType).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: AppTypeEnum.WORKFLOW },
+      })
+    })
+    expect(screen.queryByText('common.switchToStandardWorkflowConfirm.title')).not.toBeInTheDocument()
+  })
+
+  it('should block switching an evaluation workflow when associated targets fail to load', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+    mockRefetchEvaluationWorkflowAssociatedTargets.mockResolvedValueOnce({
+      data: undefined,
+      isError: true,
+    })
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalledWith('common.switchToStandardWorkflowConfirm.loadFailed')
+    })
+    expect(mockConvertWorkflowType).not.toHaveBeenCalled()
+  })
+
   it('should block switching to evaluation workflow when restricted nodes exist', async () => {
     render(
       <AppPublisher
diff --git a/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
new file mode 100644
index 0000000000..3e4a9cb5c7
--- /dev/null
+++ b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
@@ -0,0 +1,158 @@
+'use client'
+
+import type { EvaluationWorkflowAssociatedTarget, EvaluationWorkflowAssociatedTargetType } from '@/types/evaluation'
+import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { useTranslation } from 'react-i18next'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import Link from '@/next/link'
+import { cn } from '@/utils/classnames'
+
+type EvaluationWorkflowSwitchConfirmDialogProps = {
+  open: boolean
+  targets: EvaluationWorkflowAssociatedTarget[]
+  loading?: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+}
+
+const TARGET_TYPE_META: Record<EvaluationWorkflowAssociatedTargetType, {
+  icon: string
+  iconClassName: string
+  labelKey: I18nKeysWithPrefix<'workflow', 'common.switchToStandardWorkflowConfirm.targetTypes.'>
+  href: (targetId: string) => string
+}> = {
+  app: {
+    icon: 'i-ri-flow-chart',
+    iconClassName: 'bg-components-icon-bg-teal-soft text-util-colors-teal-teal-600',
+    labelKey: 'common.switchToStandardWorkflowConfirm.targetTypes.app',
+    href: targetId => `/app/${targetId}/workflow`,
+  },
+  snippets: {
+    icon: 'i-ri-edit-2-line',
+    iconClassName: 'bg-components-icon-bg-violet-soft text-util-colors-violet-violet-600',
+    labelKey: 'common.switchToStandardWorkflowConfirm.targetTypes.snippets',
+    href: targetId => `/snippets/${targetId}/orchestrate`,
+  },
+  knowledge_base: {
+    icon: 'i-ri-book-2-line',
+    iconClassName: 'bg-components-icon-bg-indigo-soft text-util-colors-blue-blue-600',
+    labelKey: 'common.switchToStandardWorkflowConfirm.targetTypes.knowledge_base',
+    href: targetId => `/datasets/${targetId}/documents`,
+  },
+}
+
+const getTargetMeta = (targetType: EvaluationWorkflowAssociatedTargetType) => {
+  return TARGET_TYPE_META[targetType] ?? TARGET_TYPE_META.app
+}
+
+const DependentTargetItem = ({
+  target,
+}: {
+  target: EvaluationWorkflowAssociatedTarget
+}) => {
+  const { t } = useTranslation()
+  const meta = getTargetMeta(target.target_type)
+  const targetName = target.target_name || target.target_id
+
+  return (
+    <Link
+      href={meta.href(target.target_id)}
+      className="group flex w-full items-center gap-3 rounded-lg bg-background-section p-2 hover:bg-background-section-burn"
+      title={targetName}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'flex size-10 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-regular',
+          meta.iconClassName,
+        )}
+      >
+        <span className={cn(meta.icon, 'size-5')} />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col gap-1 py-px">
+        <span className="truncate system-md-semibold text-text-secondary">
+          {targetName}
+        </span>
+        <span className="system-2xs-medium-uppercase text-text-tertiary">
+          {t(meta.labelKey, { ns: 'workflow' })}
+        </span>
+      </span>
+      <span
+        aria-hidden="true"
+        className="i-ri-arrow-right-up-line size-3.5 shrink-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100"
+      />
+    </Link>
+  )
+}
+
+const EvaluationWorkflowSwitchConfirmDialog = ({
+  open,
+  targets,
+  loading = false,
+  onOpenChange,
+  onConfirm,
+}: EvaluationWorkflowSwitchConfirmDialogProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="w-[480px]">
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
+            {t('common.switchToStandardWorkflowConfirm.title', { ns: 'workflow' })}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="w-full system-md-regular text-text-secondary">
+            <span className="block">
+              {t('common.switchToStandardWorkflowConfirm.activeIn', { ns: 'workflow', count: targets.length })}
+            </span>
+            <span className="block">
+              {t('common.switchToStandardWorkflowConfirm.description', { ns: 'workflow' })}
+            </span>
+          </AlertDialogDescription>
+        </div>
+
+        <div className="flex flex-col gap-2 px-6 py-3">
+          <div className="flex items-center gap-2">
+            <span className="shrink-0 system-xs-medium-uppercase text-text-quaternary">
+              {t('common.switchToStandardWorkflowConfirm.dependentWorkflows', { ns: 'workflow' })}
+            </span>
+            <span className="h-px min-w-0 flex-1 bg-divider-subtle" />
+          </div>
+          <div className="flex max-h-[188px] flex-col gap-1 overflow-y-auto">
+            {targets.map(target => (
+              <DependentTargetItem
+                key={`${target.target_type}:${target.target_id}`}
+                target={target}
+              />
+            ))}
+          </div>
+        </div>
+
+        <AlertDialogActions>
+          <AlertDialogCancelButton disabled={loading}>
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton
+            loading={loading}
+            disabled={loading}
+            onClick={onConfirm}
+          >
+            {t('common.switchToStandardWorkflowConfirm.switch', { ns: 'workflow' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export default EvaluationWorkflowSwitchConfirmDialog
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 899975d36b..becdf368ee 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -1,5 +1,6 @@
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
+import type { EvaluationWorkflowAssociatedTarget } from '@/types/evaluation'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
 import type { PublishWorkflowParams, WorkflowTypeConversionTarget } from '@/types/workflow'
 import { useKeyPress } from 'ahooks'
@@ -28,11 +29,13 @@ import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/acces
 import { fetchAppDetailDirect } from '@/service/apps'
 import { fetchInstalledAppList } from '@/service/explore'
 import { useConvertWorkflowTypeMutation } from '@/service/use-apps'
+import { useEvaluationWorkflowAssociatedTargets } from '@/service/use-evaluation'
 import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import { toast } from '../../base/ui/toast'
 import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
 import AccessControl from '../app-access-control'
+import EvaluationWorkflowSwitchConfirmDialog from './evaluation-workflow-switch-confirm-dialog'
 import {
   PublisherAccessSection,
   PublisherActionsSection,
@@ -122,6 +125,8 @@ const AppPublisher = ({
   const [published, setPublished] = useState(false)
   const [open, setOpen] = useState(false)
   const [showAppAccessControl, setShowAppAccessControl] = useState(false)
+  const [showEvaluationWorkflowSwitchConfirm, setShowEvaluationWorkflowSwitchConfirm] = useState(false)
+  const [evaluationWorkflowSwitchTargets, setEvaluationWorkflowSwitchTargets] = useState<EvaluationWorkflowAssociatedTarget[]>([])
 
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
 
@@ -138,6 +143,10 @@ const AppPublisher = ({
     ? WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type]
     : undefined
   const isEvaluationWorkflowType = appDetail?.type === AppTypeEnum.EVALUATION
+  const {
+    refetch: refetchEvaluationWorkflowAssociatedTargets,
+    isFetching: isFetchingEvaluationWorkflowAssociatedTargets,
+  } = useEvaluationWorkflowAssociatedTargets(appDetail?.id, { enabled: false })
   const workflowTypeSwitchDisabledReason = useMemo(() => {
     if (workflowTypeSwitchConfig?.targetType !== AppTypeEnum.EVALUATION)
       return undefined
@@ -234,13 +243,9 @@ const AppPublisher = ({
     }
   }, [appDetail, setAppDetail])
 
-  const handleWorkflowTypeSwitch = useCallback(async () => {
+  const performWorkflowTypeSwitch = useCallback(async () => {
     if (!appDetail?.id || !workflowTypeSwitchConfig)
-      return
-    if (workflowTypeSwitchDisabledReason) {
-      toast.error(workflowTypeSwitchDisabledReason)
-      return
-    }
+      return false
 
     try {
       await convertWorkflowType({
@@ -263,9 +268,57 @@ const AppPublisher = ({
 
       if (publishedAt)
         setOpen(false)
+
+      setShowEvaluationWorkflowSwitchConfirm(false)
+      setEvaluationWorkflowSwitchTargets([])
+      return true
     }
-    catch { }
-  }, [appDetail?.id, convertWorkflowType, handlePublish, publishedAt, setAppDetail, workflowTypeSwitchConfig, workflowTypeSwitchDisabledReason])
+    catch {
+      return false
+    }
+  }, [appDetail?.id, convertWorkflowType, handlePublish, publishedAt, setAppDetail, workflowTypeSwitchConfig])
+
+  const handleWorkflowTypeSwitch = useCallback(async () => {
+    if (!appDetail?.id || !workflowTypeSwitchConfig)
+      return
+    if (workflowTypeSwitchDisabledReason) {
+      toast.error(workflowTypeSwitchDisabledReason)
+      return
+    }
+
+    if (appDetail.type === AppTypeEnum.EVALUATION && workflowTypeSwitchConfig.targetType === AppTypeEnum.WORKFLOW) {
+      const associatedTargetsResult = await refetchEvaluationWorkflowAssociatedTargets()
+
+      if (associatedTargetsResult.isError) {
+        toast.error(t('common.switchToStandardWorkflowConfirm.loadFailed', { ns: 'workflow' }))
+        return
+      }
+
+      const associatedTargets = associatedTargetsResult.data?.items ?? []
+      if (associatedTargets.length > 0) {
+        setEvaluationWorkflowSwitchTargets(associatedTargets)
+        setShowEvaluationWorkflowSwitchConfirm(true)
+        return
+      }
+    }
+
+    await performWorkflowTypeSwitch()
+  }, [
+    appDetail?.id,
+    appDetail?.type,
+    performWorkflowTypeSwitch,
+    refetchEvaluationWorkflowAssociatedTargets,
+    t,
+    workflowTypeSwitchConfig,
+    workflowTypeSwitchDisabledReason,
+  ])
+
+  const handleEvaluationWorkflowSwitchConfirmOpenChange = useCallback((nextOpen: boolean) => {
+    setShowEvaluationWorkflowSwitchConfirm(nextOpen)
+
+    if (!nextOpen)
+      setEvaluationWorkflowSwitchTargets([])
+  }, [])
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
     e.preventDefault()
@@ -323,7 +376,7 @@ const AppPublisher = ({
               startNodeLimitExceeded={startNodeLimitExceeded}
               upgradeHighlightStyle={upgradeHighlightStyle}
               workflowTypeSwitchConfig={workflowTypeSwitchConfig}
-              workflowTypeSwitchDisabled={publishDisabled || published || isConvertingWorkflowType || Boolean(workflowTypeSwitchDisabledReason)}
+              workflowTypeSwitchDisabled={publishDisabled || published || isConvertingWorkflowType || isFetchingEvaluationWorkflowAssociatedTargets || Boolean(workflowTypeSwitchDisabledReason)}
               workflowTypeSwitchDisabledReason={workflowTypeSwitchDisabledReason}
               onWorkflowTypeSwitch={handleWorkflowTypeSwitch}
             />
@@ -372,6 +425,13 @@ const AppPublisher = ({
         />
         {showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
       </PortalToFollowElem>
+      <EvaluationWorkflowSwitchConfirmDialog
+        open={showEvaluationWorkflowSwitchConfirm}
+        targets={evaluationWorkflowSwitchTargets}
+        loading={isConvertingWorkflowType}
+        onOpenChange={handleEvaluationWorkflowSwitchConfirmOpenChange}
+        onConfirm={() => void performWorkflowTypeSwitch()}
+      />
     </>
   )
 }
diff --git a/web/contract/console/evaluation.ts b/web/contract/console/evaluation.ts
index cb3dea6241..5daa973916 100644
--- a/web/contract/console/evaluation.ts
+++ b/web/contract/console/evaluation.ts
@@ -13,6 +13,7 @@ import type {
   EvaluationRunRequest,
   EvaluationTargetType,
   EvaluationVersionDetailResponse,
+  EvaluationWorkflowAssociatedTargetsResponse,
 } from '@/types/evaluation'
 import { type } from '@orpc/contract'
 import { base } from '../base'
@@ -290,6 +291,18 @@ export const availableEvaluationWorkflowsContract = base
   }>())
   .output(type<AvailableEvaluationWorkflowsResponse>())
 
+export const evaluationWorkflowAssociatedTargetsContract = base
+  .route({
+    path: '/workspaces/current/evaluation-workflows/{workflowId}/associated-targets',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      workflowId: string
+    }
+  }>())
+  .output(type<EvaluationWorkflowAssociatedTargetsResponse>())
+
 export const evaluationFileContract = base
   .route({
     path: '/{targetType}/{targetId}/evaluation/files/{fileId}',
diff --git a/web/contract/router.ts b/web/contract/router.ts
index acf918f9f8..9a0dbcc98f 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -20,6 +20,7 @@ import {
   evaluationRunDetailContract,
   evaluationTemplateDownloadContract,
   evaluationVersionDetailContract,
+  evaluationWorkflowAssociatedTargetsContract,
   saveDatasetEvaluationConfigContract,
   saveEvaluationConfigContract,
   startDatasetEvaluationRunContract,
@@ -134,6 +135,7 @@ export const consoleRouterContract = {
     nodeInfo: evaluationNodeInfoContract,
     availableMetrics: availableEvaluationMetricsContract,
     availableWorkflows: availableEvaluationWorkflowsContract,
+    associatedTargets: evaluationWorkflowAssociatedTargetsContract,
     file: evaluationFileContract,
     versionDetail: evaluationVersionDetailContract,
   },
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 4797b57c12..4639c7c912 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -587,9 +587,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -5556,6 +5553,11 @@
       "count": 4
     }
   },
+  "app/components/evaluation/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "app/components/explore/app-card/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 5
@@ -5566,11 +5568,6 @@
       "count": 2
     }
   },
-  "app/components/evaluation/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/explore/banner/banner-item.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -7665,13 +7662,13 @@
       "count": 1
     }
   },
-  "app/components/splash.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
+  "app/components/snippets/components/snippet-main.tsx": {
+    "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/snippets/components/snippet-main.tsx": {
-    "ts/no-explicit-any": {
+  "app/components/splash.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
@@ -11915,11 +11912,6 @@
       "count": 7
     }
   },
-  "service/use-evaluation.ts": {
-    "no-barrel-files/no-barrel-files": {
-      "count": 2
-    }
-  },
   "service/use-flow.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 1
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index f3a89cfab1..7098cd7e5f 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -219,6 +219,16 @@
   "common.switchToEvaluationWorkflowDisabledTip": "Evaluation workflows do not support Human Input nodes or Trigger start nodes.",
   "common.switchToEvaluationWorkflowTip": "Turns this workflow into a custom evaluator for batch testing. Disables public Web App access.",
   "common.switchToStandardWorkflow": "Switch to Standard Workflow",
+  "common.switchToStandardWorkflowConfirm.activeIn_one": "This evaluator is currently active in {{count}} configuration.",
+  "common.switchToStandardWorkflowConfirm.activeIn_other": "This evaluator is currently active in {{count}} configurations.",
+  "common.switchToStandardWorkflowConfirm.dependentWorkflows": "Dependent workflows",
+  "common.switchToStandardWorkflowConfirm.description": "Switching to a standard workflow will break these dependencies and may cause active batch tests to fail.",
+  "common.switchToStandardWorkflowConfirm.loadFailed": "Failed to load dependent workflows.",
+  "common.switchToStandardWorkflowConfirm.switch": "Switch",
+  "common.switchToStandardWorkflowConfirm.targetTypes.app": "Workflow",
+  "common.switchToStandardWorkflowConfirm.targetTypes.knowledge_base": "Knowledge Base",
+  "common.switchToStandardWorkflowConfirm.targetTypes.snippets": "Snippet",
+  "common.switchToStandardWorkflowConfirm.title": "Switch to Standard Workflow?",
   "common.switchToStandardWorkflowTip": "Turns this evaluator back into a standard workflow and restores public Web App access.",
   "common.syncingData": "Syncing data, just a few seconds.",
   "common.tagBound": "Number of apps using this tag",
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
index c07be31c57..f167a3ea40 100644
--- a/web/service/use-evaluation.ts
+++ b/web/service/use-evaluation.ts
@@ -2,6 +2,7 @@ import type { EvaluationResourceType } from '@/app/components/evaluation/types'
 import type { AvailableEvaluationWorkflowsResponse, EvaluationConfig } from '@/types/evaluation'
 import {
   keepPreviousData,
+  skipToken,
   useInfiniteQuery,
   useMutation,
   useQuery,
@@ -59,6 +60,24 @@ export const useAvailableEvaluationMetrics = (enabled = true) => {
   }))
 }
 
+export const useEvaluationWorkflowAssociatedTargets = (
+  workflowId: string | undefined,
+  options?: { enabled?: boolean },
+) => {
+  return useQuery(consoleQuery.evaluation.associatedTargets.queryOptions({
+    input: workflowId
+      ? {
+          params: {
+            workflowId,
+          },
+        }
+      : skipToken,
+    enabled: Boolean(workflowId) && (options?.enabled ?? true),
+    refetchOnWindowFocus: false,
+    retry: false,
+  }))
+}
+
 export const useEvaluationNodeInfoMutation = () => {
   return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
 }
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
index 021b848325..543ade6b17 100644
--- a/web/types/evaluation.ts
+++ b/web/types/evaluation.ts
@@ -167,6 +167,18 @@ export type AvailableEvaluationWorkflowsResponse = {
   has_more: boolean
 }
 
+export type EvaluationWorkflowAssociatedTargetType = 'app' | 'snippets' | 'knowledge_base'
+
+export type EvaluationWorkflowAssociatedTarget = {
+  target_type: EvaluationWorkflowAssociatedTargetType
+  target_id: string
+  target_name: string
+}
+
+export type EvaluationWorkflowAssociatedTargetsResponse = {
+  items: EvaluationWorkflowAssociatedTarget[]
+}
+
 export type EvaluationNodeInfoRequest = {
   metrics?: string[]
 }

From 627fbd2e86a8e57ade7e80c73fb9baf90f3c80e4 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 12 Apr 2026 10:36:20 +0800
Subject: [PATCH 088/108] feat(web): rag-pipeline evaluation configuration

---
 .../evaluation/__tests__/index.spec.tsx       |  37 +++++-
 .../evaluation/__tests__/store.spec.ts        | 113 +++++++++++++++++-
 .../components/batch-test-panel/index.tsx     |   2 +-
 .../input-fields/use-input-fields-actions.ts  |   2 +-
 .../pipeline/pipeline-metrics-section.tsx     |  53 +++++++-
 web/app/components/evaluation/store-utils.ts  | 102 +++++++++++++++-
 6 files changed, 295 insertions(+), 14 deletions(-)

diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
index 8a1055326b..4f8db5a32d 100644
--- a/web/app/components/evaluation/__tests__/index.spec.tsx
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -11,6 +11,7 @@ const mockUseEvaluationConfig = vi.hoisted(() => vi.fn())
 const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
 const mockUseSaveEvaluationConfigMutation = vi.hoisted(() => vi.fn())
 const mockUseStartEvaluationRunMutation = vi.hoisted(() => vi.fn())
+const mockUsePublishedPipelineInfo = vi.hoisted(() => vi.fn())
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelList: () => ({
@@ -55,6 +56,15 @@ vi.mock('@/service/use-evaluation', () => ({
   useStartEvaluationRunMutation: (...args: unknown[]) => mockUseStartEvaluationRunMutation(...args),
 }))
 
+vi.mock('@/service/use-pipeline', () => ({
+  usePublishedPipelineInfo: (...args: unknown[]) => mockUsePublishedPipelineInfo(...args),
+}))
+
+vi.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset: { pipeline_id: string } }) => unknown) =>
+    selector({ dataset: { pipeline_id: 'pipeline-1' } }),
+}))
+
 vi.mock('@/service/use-workflow', () => ({
   useAppWorkflow: () => ({
     data: {
@@ -152,6 +162,20 @@ describe('Evaluation', () => {
       isPending: false,
       mutate: vi.fn(),
     })
+    mockUsePublishedPipelineInfo.mockReturnValue({
+      data: {
+        graph: {
+          nodes: [{
+            id: 'knowledge-node',
+            data: {
+              type: 'knowledge-index',
+              title: 'Knowledge Base',
+            },
+          }],
+          edges: [],
+        },
+      },
+    })
     mockUpload.mockResolvedValue({
       id: 'uploaded-file-id',
       name: 'evaluation.csv',
@@ -471,10 +495,19 @@ describe('Evaluation', () => {
           default_metrics: [{
             metric: 'context-precision',
             value_type: 'number',
-            node_info_list: [],
+            node_info_list: [
+              { node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' },
+            ],
           }],
           customized_metrics: null,
-          judgment_config: null,
+          judgment_config: {
+            logical_operator: 'and',
+            conditions: [{
+              variable_selector: ['knowledge-node', 'context-precision'],
+              comparison_operator: '≥',
+              value: '0.85',
+            }],
+          },
           file_id: 'file-1',
         },
       }, {
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
index c3b122c18a..150f285b52 100644
--- a/web/app/components/evaluation/__tests__/store.spec.ts
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -338,8 +338,117 @@ describe('evaluation store', () => {
       },
     }
 
-    expect(buildEvaluationConfigPayload(resource)).toEqual(expectedPayload)
-    expect(buildEvaluationRunRequest(resource, 'file-1')).toEqual({
+    expect(buildEvaluationConfigPayload(resource, resourceType)).toEqual(expectedPayload)
+    expect(buildEvaluationRunRequest(resource, 'file-1', resourceType)).toEqual({
+      ...expectedPayload,
+      file_id: 'file-1',
+    })
+  })
+
+  it('should hydrate pipeline metrics from fixed knowledge-index conditions', () => {
+    const resourceType = 'datasets'
+    const resourceId = 'dataset-hydrate'
+    const store = useEvaluationStore.getState()
+    const config: EvaluationConfig = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [{
+        metric: 'context-precision',
+        node_info_list: [
+          { node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' },
+        ],
+      }],
+      customized_metrics: {
+        evaluation_workflow_id: 'should-be-ignored',
+        input_fields: {
+          query: 'answer',
+        },
+        output_fields: [{
+          variable: 'score',
+          value_type: 'number',
+        }],
+      },
+      judgment_config: {
+        logical_operator: 'or',
+        conditions: [{
+          variable_selector: ['knowledge-node', 'context-precision'],
+          comparison_operator: '≥',
+          value: '0.92',
+        }],
+      },
+    }
+
+    store.hydrateResource(resourceType, resourceId, config)
+
+    const hydratedState = useEvaluationStore.getState().resources['datasets:dataset-hydrate']
+
+    expect(hydratedState.judgeModelId).toBe('openai::gpt-4o-mini')
+    expect(hydratedState.metrics).toHaveLength(1)
+    expect(hydratedState.metrics[0]).toMatchObject({
+      optionId: 'context-precision',
+      kind: 'builtin',
+      valueType: 'number',
+      threshold: 0.92,
+      nodeInfoList: [
+        { node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' },
+      ],
+    })
+  })
+
+  it('should build pipeline judgment payload from metric thresholds', () => {
+    const resourceType = 'datasets'
+    const resourceId = 'dataset-save-config'
+    const store = useEvaluationStore.getState()
+    const knowledgeNodeInfo = [{ node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' }]
+
+    store.ensureResource(resourceType, resourceId)
+    store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+    store.addBuiltinMetric(resourceType, resourceId, 'context-precision', knowledgeNodeInfo)
+    store.addBuiltinMetric(resourceType, resourceId, 'context-recall', knowledgeNodeInfo)
+
+    const resourceWithMetrics = useEvaluationStore.getState().resources['datasets:dataset-save-config']
+    const contextPrecisionMetric = resourceWithMetrics.metrics.find(metric => metric.optionId === 'context-precision')!
+    const contextRecallMetric = resourceWithMetrics.metrics.find(metric => metric.optionId === 'context-recall')!
+
+    store.updateMetricThreshold(resourceType, resourceId, contextPrecisionMetric.id, 0.91)
+    store.updateMetricThreshold(resourceType, resourceId, contextRecallMetric.id, 0.88)
+
+    const resource = useEvaluationStore.getState().resources['datasets:dataset-save-config']
+    const expectedPayload = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [
+        {
+          metric: 'context-precision',
+          value_type: 'number',
+          node_info_list: knowledgeNodeInfo,
+        },
+        {
+          metric: 'context-recall',
+          value_type: 'number',
+          node_info_list: knowledgeNodeInfo,
+        },
+      ],
+      customized_metrics: null,
+      judgment_config: {
+        logical_operator: 'and',
+        conditions: [
+          {
+            variable_selector: ['knowledge-node', 'context-precision'],
+            comparison_operator: '≥',
+            value: '0.91',
+          },
+          {
+            variable_selector: ['knowledge-node', 'context-recall'],
+            comparison_operator: '≥',
+            value: '0.88',
+          },
+        ],
+      },
+    }
+
+    expect(buildEvaluationConfigPayload(resource, resourceType)).toEqual(expectedPayload)
+    expect(buildEvaluationRunRequest(resource, 'file-1', resourceType)).toEqual({
       ...expectedPayload,
       file_id: 'file-1',
     })
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 0f7226af00..11af19f4d5 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -36,7 +36,7 @@ const BatchTestPanel = ({
       return
     }
 
-    const body = buildEvaluationConfigPayload(resource)
+    const body = buildEvaluationConfigPayload(resource, resourceType)
 
     if (!body) {
       toast.warning(t('batch.validation'))
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
index f7ffe49813..8db1b0fbdd 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
@@ -102,7 +102,7 @@ export const useInputFieldsActions = ({
       return
     }
 
-    const body = buildEvaluationRunRequest(resource, uploadedFileId)
+    const body = buildEvaluationRunRequest(resource, uploadedFileId, resourceType)
 
     if (!body) {
       toast.warning(t('batch.validation'))
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
index f9eb852f89..2457b081c3 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
@@ -1,25 +1,62 @@
 'use client'
 
 import type { EvaluationResourceProps } from '../../types'
-import { useMemo } from 'react'
+import type { Node } from '@/app/components/workflow/types'
+import type { NodeInfo } from '@/types/evaluation'
+import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
+import { usePublishedPipelineInfo } from '@/service/use-pipeline'
 import { getEvaluationMockConfig } from '../../mock'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 import { InlineSectionHeader } from '../section-header'
 import PipelineMetricItem from './pipeline-metric-item'
 
+const getKnowledgeIndexNodeInfo = (nodes: Node[] | undefined): NodeInfo[] => {
+  const knowledgeIndexNode = nodes?.find(node => node.data.type === BlockEnum.KnowledgeBase)
+  if (!knowledgeIndexNode?.id)
+    return []
+
+  return [{
+    node_id: knowledgeIndexNode.id,
+    title: typeof knowledgeIndexNode.data?.title === 'string' && knowledgeIndexNode.data.title
+      ? knowledgeIndexNode.data.title
+      : knowledgeIndexNode.id,
+    type: 'knowledge-index',
+  }]
+}
+
+const isSameNodeInfoList = (left: NodeInfo[] | undefined, right: NodeInfo[]) => {
+  if ((left?.length ?? 0) !== right.length)
+    return false
+
+  return (left ?? []).every((nodeInfo, index) => {
+    const target = right[index]
+    return nodeInfo.node_id === target?.node_id
+      && nodeInfo.title === target?.title
+      && nodeInfo.type === target?.type
+  })
+}
+
 const PipelineMetricsSection = ({
   resourceType,
   resourceId,
 }: EvaluationResourceProps) => {
   const { t } = useTranslation('evaluation')
+  const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
   const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
   const removeMetric = useEvaluationStore(state => state.removeMetric)
   const updateMetricThreshold = useEvaluationStore(state => state.updateMetricThreshold)
   const { data: availableMetricsData } = useAvailableEvaluationMetrics()
+  const { data: publishedPipeline } = usePublishedPipelineInfo(pipelineId || '')
   const resource = useEvaluationResource(resourceType, resourceId)
   const config = getEvaluationMockConfig(resourceType)
+  const knowledgeIndexNodeInfoList = useMemo(
+    () => getKnowledgeIndexNodeInfo(publishedPipeline?.graph.nodes),
+    [publishedPipeline?.graph.nodes],
+  )
   const builtinMetricMap = useMemo(() => new Map(
     resource.metrics
       .filter(metric => metric.kind === 'builtin')
@@ -32,6 +69,18 @@ const PipelineMetricsSection = ({
     )
   }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
 
+  useEffect(() => {
+    if (!knowledgeIndexNodeInfoList.length)
+      return
+
+    resource.metrics.forEach((metric) => {
+      if (metric.kind !== 'builtin' || isSameNodeInfoList(metric.nodeInfoList, knowledgeIndexNodeInfoList))
+        return
+
+      addBuiltinMetric(resourceType, resourceId, metric.optionId, knowledgeIndexNodeInfoList)
+    })
+  }, [addBuiltinMetric, knowledgeIndexNodeInfoList, resource.metrics, resourceId, resourceType])
+
   const handleToggleMetric = (metricId: string) => {
     const selectedMetric = builtinMetricMap.get(metricId)
     if (selectedMetric) {
@@ -39,7 +88,7 @@ const PipelineMetricsSection = ({
       return
     }
 
-    addBuiltinMetric(resourceType, resourceId, metricId)
+    addBuiltinMetric(resourceType, resourceId, metricId, knowledgeIndexNodeInfoList)
   }
 
   return (
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index 2942bfb4b6..c34e643baa 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -34,6 +34,8 @@ type EvaluationStoreResources = Record<string, EvaluationResourceState>
 
 export const DEFAULT_PIPELINE_METRIC_THRESHOLD = 0.85
 
+const PIPELINE_LOGICAL_OPERATOR: JudgmentConfig['logicalOperator'] = 'and'
+
 const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
 
 const humanizeMetricId = (metricId: string) => {
@@ -54,6 +56,15 @@ const resolveMetricOption = (resourceType: EvaluationResourceType, metricId: str
   }
 }
 
+const pipelineMetricIds = new Set(getEvaluationMockConfig('datasets').builtinMetrics.map(metric => metric.id))
+
+const isPipelineResourceType = (resourceType: EvaluationResourceType) => resourceType === 'datasets'
+
+const isPipelineResourceState = (resource: EvaluationResourceState) => {
+  return resource.metrics.length > 0
+    && resource.metrics.every(metric => metric.kind === 'builtin' && pipelineMetricIds.has(metric.optionId))
+}
+
 const normalizeNodeInfoList = (value: NodeInfo[] | undefined): NodeInfo[] => {
   if (!value?.length)
     return []
@@ -164,6 +175,46 @@ const normalizeVariableSelector = (value: string[] | undefined): [string, string
     : null
 }
 
+const getConditionNumericValue = (value: EvaluationJudgmentCondition['value']) => {
+  if (typeof value === 'number')
+    return value
+
+  if (typeof value !== 'string')
+    return null
+
+  const parsedValue = Number(value)
+  return Number.isFinite(parsedValue) ? parsedValue : null
+}
+
+const getPipelineMetricThreshold = (
+  metric: EvaluationMetric,
+  config: EvaluationConfig,
+) => {
+  const matchingCondition = (config.judgment_config?.conditions ?? []).find((condition) => {
+    const variableSelector = normalizeVariableSelector(condition.variable_selector)
+    if (!variableSelector || variableSelector[1] !== metric.optionId || condition.comparison_operator !== '≥')
+      return false
+
+    if (!metric.nodeInfoList?.length)
+      return true
+
+    return metric.nodeInfoList.some(nodeInfo => nodeInfo.node_id === variableSelector[0])
+  })
+
+  return getConditionNumericValue(matchingCondition?.value) ?? metric.threshold ?? DEFAULT_PIPELINE_METRIC_THRESHOLD
+}
+
+const normalizePipelineMetrics = (
+  config: EvaluationConfig,
+  metrics: EvaluationMetric[],
+) => {
+  return metrics.map(metric => ({
+    ...metric,
+    valueType: 'number' as const,
+    threshold: getPipelineMetricThreshold(metric, config),
+  }))
+}
+
 const getNormalizedConditionValue = (
   operator: ComparisonOperator,
   previousValue: EvaluationJudgmentConditionValue | string | number | boolean | null | undefined,
@@ -404,8 +455,10 @@ export const buildStateFromEvaluationConfig = (
   config: EvaluationConfig,
 ): EvaluationResourceState => {
   const defaultMetrics = normalizeDefaultMetrics(resourceType, config.default_metrics)
-  const customMetrics = normalizeCustomMetric(config.customized_metrics)
-  const metrics = [...defaultMetrics, ...customMetrics]
+  const customMetrics = isPipelineResourceType(resourceType) ? [] : normalizeCustomMetric(config.customized_metrics)
+  const metrics = isPipelineResourceType(resourceType)
+    ? normalizePipelineMetrics(config, defaultMetrics)
+    : [...defaultMetrics, ...customMetrics]
 
   return {
     ...buildInitialState(resourceType),
@@ -458,7 +511,40 @@ const buildCustomizedMetricsPayload = (metrics: EvaluationMetric[]): EvaluationC
   }
 }
 
-const buildJudgmentConfigPayload = (resource: EvaluationResourceState): EvaluationConfigData['judgment_config'] => {
+const buildPipelineJudgmentConfigPayload = (
+  resource: EvaluationResourceState,
+): EvaluationConfigData['judgment_config'] => {
+  const conditions = resource.metrics
+    .filter((metric): metric is EvaluationMetric & { kind: 'builtin' } => metric.kind === 'builtin')
+    .map((metric) => {
+      const nodeInfo = metric.nodeInfoList?.[0]
+      if (!nodeInfo)
+        return null
+
+      return {
+        variable_selector: [nodeInfo.node_id, metric.optionId],
+        comparison_operator: '≥',
+        value: String(metric.threshold ?? DEFAULT_PIPELINE_METRIC_THRESHOLD),
+      }
+    })
+    .filter((condition): condition is NonNullable<typeof condition> => !!condition)
+
+  if (!conditions.length)
+    return null
+
+  return {
+    logical_operator: PIPELINE_LOGICAL_OPERATOR,
+    conditions,
+  }
+}
+
+const buildJudgmentConfigPayload = (
+  resource: EvaluationResourceState,
+  resourceType?: EvaluationResourceType,
+): EvaluationConfigData['judgment_config'] => {
+  if ((resourceType && isPipelineResourceType(resourceType)) || isPipelineResourceState(resource))
+    return buildPipelineJudgmentConfigPayload(resource)
+
   const conditions = resource.judgmentConfig.conditions
     .filter(condition => !!condition.variableSelector)
     .map((condition) => {
@@ -488,6 +574,7 @@ const buildJudgmentConfigPayload = (resource: EvaluationResourceState): Evaluati
 
 export const buildEvaluationConfigPayload = (
   resource: EvaluationResourceState,
+  resourceType?: EvaluationResourceType,
 ): EvaluationConfigData | null => {
   const selectedModel = decodeModelSelection(resource.judgeModelId)
 
@@ -504,16 +591,19 @@ export const buildEvaluationConfigPayload = (
         value_type: metric.valueType,
         node_info_list: metric.nodeInfoList ?? [],
       })),
-    customized_metrics: buildCustomizedMetricsPayload(resource.metrics),
-    judgment_config: buildJudgmentConfigPayload(resource),
+    customized_metrics: (resourceType && isPipelineResourceType(resourceType)) || isPipelineResourceState(resource)
+      ? null
+      : buildCustomizedMetricsPayload(resource.metrics),
+    judgment_config: buildJudgmentConfigPayload(resource, resourceType),
   }
 }
 
 export const buildEvaluationRunRequest = (
   resource: EvaluationResourceState,
   fileId: string,
+  resourceType?: EvaluationResourceType,
 ): EvaluationRunRequest | null => {
-  const configPayload = buildEvaluationConfigPayload(resource)
+  const configPayload = buildEvaluationConfigPayload(resource, resourceType)
 
   if (!configPayload)
     return null

From f93b287949e53cda5e897c591dca0996a6016085 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 12 Apr 2026 11:09:15 +0800
Subject: [PATCH 089/108] feat(web): billing for evaluation & snippets

---
 .../[appId]/evaluation/page.tsx               |  7 ++-
 .../(appDetailLayout)/[appId]/layout-main.tsx | 18 +++---
 .../__tests__/layout-main.spec.tsx            | 21 +++++++
 .../[datasetId]/evaluation/page.tsx           |  7 ++-
 .../[datasetId]/layout-main.tsx               |  6 +-
 web/app/(commonLayout)/snippets/page.tsx      |  7 ++-
 .../components/app/app-publisher/index.tsx    | 14 ++++-
 .../components/apps/__tests__/list.spec.tsx   | 34 +++++++++--
 web/app/components/apps/list.tsx              |  5 +-
 .../components/apps/studio-route-switch.tsx   | 24 +++++---
 .../snippet-and-evaluation-plan-guard.tsx     | 40 ++++++++++++
 web/app/components/billing/utils/index.ts     | 19 ++++++
 web/app/components/snippets/index.tsx         |  9 ++-
 .../snippets/snippet-evaluation-page.tsx      | 17 +++---
 .../block-selector/__tests__/hooks.spec.tsx   | 22 +++++++
 .../workflow/block-selector/hooks.ts          |  6 +-
 .../workflow/selection-contextmenu.tsx        | 61 +++++++++++--------
 .../use-snippet-and-evaluation-plan-access.ts | 19 ++++++
 18 files changed, 268 insertions(+), 68 deletions(-)
 create mode 100644 web/app/components/billing/snippet-and-evaluation-plan-guard.tsx
 create mode 100644 web/hooks/use-snippet-and-evaluation-plan-access.ts

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
index d602c15d5e..899667ad3c 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
@@ -1,3 +1,4 @@
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
 import Evaluation from '@/app/components/evaluation'
 
 const Page = async (props: {
@@ -5,7 +6,11 @@ const Page = async (props: {
 }) => {
   const { appId } = await props.params
 
-  return <Evaluation resourceType="apps" resourceId={appId} />
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref={`/app/${appId}/overview`}>
+      <Evaluation resourceType="apps" resourceId={appId} />
+    </SnippetAndEvaluationPlanGuard>
+  )
 }
 
 export default Page
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index 5b924a4c5a..96cacfc556 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -26,6 +26,7 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import dynamic from '@/next/dynamic'
 import { usePathname, useRouter } from '@/next/navigation'
 import { fetchAppDetailDirect } from '@/service/apps'
@@ -52,6 +53,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const pathname = usePathname()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
   const { appDetail, setAppDetail, setAppSidebarExpand } = useStore(useShallow(state => ({
     appDetail: state.appDetail,
@@ -78,12 +80,14 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
         icon: RiTerminalWindowLine,
         selectedIcon: RiTerminalWindowFill,
       })
-      navConfig.push({
-        name: t('appMenus.evaluation', { ns: 'common' }),
-        href: `/app/${appId}/evaluation`,
-        icon: RiFlaskLine,
-        selectedIcon: RiFlaskFill,
-      })
+      if (canAccessSnippetsAndEvaluation) {
+        navConfig.push({
+          name: t('appMenus.evaluation', { ns: 'common' }),
+          href: `/app/${appId}/evaluation`,
+          icon: RiFlaskLine,
+          selectedIcon: RiFlaskFill,
+        })
+      }
     }
 
     navConfig.push({
@@ -111,7 +115,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       selectedIcon: RiDashboard2Fill,
     })
     return navConfig
-  }, [t])
+  }, [canAccessSnippetsAndEvaluation, t])
 
   useDocumentTitle(appDetail?.name || t('menus.appDetail', { ns: 'common' }))
 
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
index 74dc55efb8..2831b0d464 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
@@ -8,6 +8,7 @@ import DatasetDetailLayout from '../layout-main'
 
 let mockPathname = '/datasets/test-dataset-id/documents'
 let mockDataset: DataSet | undefined
+let mockCanAccessSnippetsAndEvaluation = true
 
 const mockSetAppSidebarExpand = vi.fn()
 const mockMutateDatasetRes = vi.fn()
@@ -44,6 +45,13 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: mockCanAccessSnippetsAndEvaluation,
+    isReady: true,
+  }),
+}))
+
 vi.mock('@/hooks/use-document-title', () => ({
   default: vi.fn(),
 }))
@@ -164,6 +172,7 @@ describe('DatasetDetailLayout', () => {
     vi.clearAllMocks()
     mockPathname = '/datasets/test-dataset-id/documents'
     mockDataset = createDataset()
+    mockCanAccessSnippetsAndEvaluation = true
   })
 
   describe('Evaluation navigation', () => {
@@ -205,5 +214,17 @@ describe('DatasetDetailLayout', () => {
 
       expect(screen.getByRole('button', { name: 'common.datasetMenus.evaluation' })).toBeEnabled()
     })
+
+    it('should hide the evaluation menu when snippet and evaluation access is unavailable', () => {
+      mockCanAccessSnippetsAndEvaluation = false
+
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.queryByRole('button', { name: 'common.datasetMenus.evaluation' })).not.toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
index 97ba166391..ea8fc0ea82 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
@@ -1,3 +1,4 @@
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
 import Evaluation from '@/app/components/evaluation'
 
 const Page = async (props: {
@@ -5,7 +6,11 @@ const Page = async (props: {
 }) => {
   const { datasetId } = await props.params
 
-  return <Evaluation resourceType="datasets" resourceId={datasetId} />
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref={`/datasets/${datasetId}/documents`}>
+      <Evaluation resourceType="datasets" resourceId={datasetId} />
+    </SnippetAndEvaluationPlanGuard>
+  )
 }
 
 export default Page
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index b7a6347b4c..906d63e66e 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -24,6 +24,7 @@ import DatasetDetailContext from '@/context/dataset-detail'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { usePathname } from '@/next/navigation'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
@@ -51,6 +52,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       setHideHeader(v.payload)
   })
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -104,7 +106,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
           selectedIcon: PipelineFill as RemixiconComponentType,
           disabled: false,
         },
-        ...(isRagPipelineDataset
+        ...(isRagPipelineDataset && canAccessSnippetsAndEvaluation
           ? [{
               name: t('datasetMenus.evaluation', { ns: 'common' }),
               href: `/datasets/${datasetId}/evaluation`,
@@ -118,7 +120,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     }
 
     return baseNavigation
-  }, [t, datasetId, isButtonDisabledWithPipeline, isRagPipelineDataset, datasetRes?.provider])
+  }, [canAccessSnippetsAndEvaluation, t, datasetId, isButtonDisabledWithPipeline, isRagPipelineDataset, datasetRes?.provider])
 
   useDocumentTitle(datasetRes?.name || t('menus.datasets', { ns: 'common' }))
 
diff --git a/web/app/(commonLayout)/snippets/page.tsx b/web/app/(commonLayout)/snippets/page.tsx
index 660df108c5..73fadb0d27 100644
--- a/web/app/(commonLayout)/snippets/page.tsx
+++ b/web/app/(commonLayout)/snippets/page.tsx
@@ -1,7 +1,12 @@
 import Apps from '@/app/components/apps'
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
 
 const SnippetsPage = () => {
-  return <Apps pageType="snippets" />
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref="/apps">
+      <Apps pageType="snippets" />
+    </SnippetAndEvaluationPlanGuard>
+  )
 }
 
 export default SnippetsPage
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index becdf368ee..3b6ba7b19f 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -24,6 +24,7 @@ import {
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { AccessMode } from '@/models/access-control'
 import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
 import { fetchAppDetailDirect } from '@/service/apps'
@@ -133,15 +134,22 @@ const AppPublisher = ({
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(s => s.setAppDetail)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const { mutateAsync: convertWorkflowType, isPending: isConvertingWorkflowType } = useConvertWorkflowTypeMutation()
 
   const appURL = getPublisherAppUrl({ appBaseUrl: appBaseURL, accessToken, mode: appDetail?.mode })
   const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
-  const workflowTypeSwitchConfig = isWorkflowTypeConversionTarget(appDetail?.type)
-    ? WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type]
-    : undefined
+  const workflowTypeSwitchConfig = useMemo(() => {
+    if (!isWorkflowTypeConversionTarget(appDetail?.type))
+      return undefined
+
+    if (appDetail.type !== AppTypeEnum.EVALUATION && !canAccessSnippetsAndEvaluation)
+      return undefined
+
+    return WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type]
+  }, [appDetail?.type, canAccessSnippetsAndEvaluation])
   const isEvaluationWorkflowType = appDetail?.type === AppTypeEnum.EVALUATION
   const {
     refetch: refetchEvaluationWorkflowAssociatedTargets,
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index acc2abb1ff..feb1519e57 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -16,6 +16,7 @@ vi.mock('@/next/navigation', () => ({
 const mockIsCurrentWorkspaceEditor = vi.fn(() => true)
 const mockIsCurrentWorkspaceDatasetOperator = vi.fn(() => false)
 const mockIsLoadingCurrentWorkspace = vi.fn(() => false)
+const mockCanAccessSnippetsAndEvaluation = vi.fn(() => true)
 
 vi.mock('@/context/app-context', () => ({
   useAppContext: () => ({
@@ -33,6 +34,13 @@ vi.mock('@/context/global-public-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: mockCanAccessSnippetsAndEvaluation(),
+    isReady: true,
+  }),
+}))
+
 const mockSetQuery = vi.fn()
 const mockQueryState = {
   tagIDs: [] as string[],
@@ -135,12 +143,18 @@ const defaultSnippetData = {
         id: 'snippet-1',
         name: 'Tone Rewriter',
         description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+        type: 'node',
+        is_published: false,
+        use_count: 19,
+        icon_info: {
+          icon_type: 'emoji',
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+          icon_url: '',
+        },
+        created_at: 1704067200,
+        updated_at: '2024-01-02 10:00',
         author: '',
-        updatedAt: '2024-01-02 10:00',
-        usage: '19',
-        icon: '🪄',
-        iconBackground: '#E0EAFF',
-        status: undefined,
       },
     ],
     total: 1,
@@ -269,6 +283,7 @@ describe('List', () => {
     mockIsCurrentWorkspaceEditor.mockReturnValue(true)
     mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
     mockIsLoadingCurrentWorkspace.mockReturnValue(false)
+    mockCanAccessSnippetsAndEvaluation.mockReturnValue(true)
     mockDragging = false
     mockOnDSLFileDropped = null
     mockServiceState.error = null
@@ -336,6 +351,15 @@ describe('List', () => {
       fireEvent.click(screen.getByTestId('close-dsl-modal'))
       expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
     })
+
+    it('should hide the snippets route switch when snippet access is unavailable', () => {
+      mockCanAccessSnippetsAndEvaluation.mockReturnValue(false)
+
+      renderList()
+
+      expect(screen.getByRole('link', { name: 'app.studio.apps' })).toHaveAttribute('href', '/apps')
+      expect(screen.queryByRole('link', { name: 'workflow.tabs.snippets' })).not.toBeInTheDocument()
+    })
   })
 
   describe('Snippets Mode', () => {
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 736a7b4a3d..a0cfb653ad 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -14,6 +14,7 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import dynamic from '@/next/dynamic'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { useInfiniteSnippetList } from '@/service/use-snippets'
@@ -50,6 +51,7 @@ const List: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const isAppsPage = pageType === 'apps'
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const { systemFeatures } = useGlobalPublicStore()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, isLoadingCurrentWorkspace } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@@ -234,6 +236,7 @@ const List: FC<Props> = ({
               pageType={pageType}
               appsLabel={t('studio.apps', { ns: 'app' })}
               snippetsLabel={t('tabs.snippets', { ns: 'workflow' })}
+              showSnippets={canAccessSnippetsAndEvaluation}
             />
             {isAppsPage && (
               <AppTypeFilter
@@ -278,7 +281,7 @@ const List: FC<Props> = ({
                     className={cn(!hasAnyApp && 'z-10')}
                   />
                 )
-              : <SnippetCreateCard />
+              : canAccessSnippetsAndEvaluation && <SnippetCreateCard />
           )}
 
           {showSkeleton && <AppCardSkeleton count={6} />}
diff --git a/web/app/components/apps/studio-route-switch.tsx b/web/app/components/apps/studio-route-switch.tsx
index 7aea1cebbd..53f1337d06 100644
--- a/web/app/components/apps/studio-route-switch.tsx
+++ b/web/app/components/apps/studio-route-switch.tsx
@@ -8,12 +8,14 @@ type Props = {
   pageType: StudioPageType
   appsLabel: string
   snippetsLabel: string
+  showSnippets?: boolean
 }
 
 const StudioRouteSwitch = ({
   pageType,
   appsLabel,
   snippetsLabel,
+  showSnippets = true,
 }: Props) => {
   return (
     <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
@@ -27,16 +29,18 @@ const StudioRouteSwitch = ({
       >
         {appsLabel}
       </Link>
-      <Link
-        href="/snippets"
-        className={cn(
-          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
-          pageType === 'snippets' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
-          pageType !== 'snippets' && 'font-medium',
-        )}
-      >
-        {snippetsLabel}
-      </Link>
+      {showSnippets && (
+        <Link
+          href="/snippets"
+          className={cn(
+            'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+            pageType === 'snippets' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+            pageType !== 'snippets' && 'font-medium',
+          )}
+        >
+          {snippetsLabel}
+        </Link>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/billing/snippet-and-evaluation-plan-guard.tsx b/web/app/components/billing/snippet-and-evaluation-plan-guard.tsx
new file mode 100644
index 0000000000..39ed41a348
--- /dev/null
+++ b/web/app/components/billing/snippet-and-evaluation-plan-guard.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import Loading from '@/app/components/base/loading'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
+import { useRouter } from '@/next/navigation'
+
+type SnippetAndEvaluationPlanGuardProps = {
+  children: ReactNode
+  fallbackHref: string
+}
+
+const SnippetAndEvaluationPlanGuard = ({
+  children,
+  fallbackHref,
+}: SnippetAndEvaluationPlanGuardProps) => {
+  const router = useRouter()
+  const { canAccess, isReady } = useSnippetAndEvaluationPlanAccess()
+
+  useEffect(() => {
+    if (isReady && !canAccess)
+      router.replace(fallbackHref)
+  }, [canAccess, fallbackHref, isReady, router])
+
+  if (!isReady) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background-body">
+        <Loading />
+      </div>
+    )
+  }
+
+  if (!canAccess)
+    return null
+
+  return <>{children}</>
+}
+
+export default SnippetAndEvaluationPlanGuard
diff --git a/web/app/components/billing/utils/index.ts b/web/app/components/billing/utils/index.ts
index 6974f89c8b..024b32b346 100644
--- a/web/app/components/billing/utils/index.ts
+++ b/web/app/components/billing/utils/index.ts
@@ -1,6 +1,7 @@
 import type { BasicPlan, BillingQuota, CurrentPlanInfoBackend } from '../type'
 import dayjs from 'dayjs'
 import { ALL_PLANS, NUM_INFINITE } from '@/app/components/billing/config'
+import { Plan } from '../type'
 
 /**
  * Parse vectorSpace string from ALL_PLANS config and convert to MB
@@ -116,3 +117,21 @@ export const parseCurrentPlan = (data: CurrentPlanInfoBackend) => {
     },
   }
 }
+
+export const canAccessSnippetsAndEvaluation = ({
+  enableBilling,
+  isFetchedPlan,
+  planType,
+}: {
+  enableBilling: boolean
+  isFetchedPlan: boolean
+  planType: Plan
+}) => {
+  if (!isFetchedPlan)
+    return !enableBilling
+
+  if (!enableBilling)
+    return true
+
+  return planType === Plan.professional || planType === Plan.team || planType === Plan.enterprise
+}
diff --git a/web/app/components/snippets/index.tsx b/web/app/components/snippets/index.tsx
index 6d3bcb570e..a69dee643b 100644
--- a/web/app/components/snippets/index.tsx
+++ b/web/app/components/snippets/index.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo } from 'react'
 import Loading from '@/app/components/base/loading'
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
 import WorkflowWithDefaultContext from '@/app/components/workflow'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import {
@@ -68,9 +69,11 @@ const SnippetPage = ({ snippetId }: SnippetPageProps) => {
 
 const SnippetPageWrapper = ({ snippetId }: SnippetPageProps) => {
   return (
-    <WorkflowContextProvider>
-      <SnippetPage snippetId={snippetId} />
-    </WorkflowContextProvider>
+    <SnippetAndEvaluationPlanGuard fallbackHref="/apps">
+      <WorkflowContextProvider>
+        <SnippetPage snippetId={snippetId} />
+      </WorkflowContextProvider>
+    </SnippetAndEvaluationPlanGuard>
   )
 }
 
diff --git a/web/app/components/snippets/snippet-evaluation-page.tsx b/web/app/components/snippets/snippet-evaluation-page.tsx
index 5691be1977..f6aeeef335 100644
--- a/web/app/components/snippets/snippet-evaluation-page.tsx
+++ b/web/app/components/snippets/snippet-evaluation-page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
 import Evaluation from '@/app/components/evaluation'
 import { getSnippetDetailMock } from '@/service/use-snippets.mock'
 import SnippetLayout from './components/snippet-layout'
@@ -17,13 +18,15 @@ const SnippetEvaluationPage = ({ snippetId }: SnippetEvaluationPageProps) => {
     return null
 
   return (
-    <SnippetLayout
-      snippetId={snippetId}
-      snippet={snippet}
-      section="evaluation"
-    >
-      <Evaluation resourceType="snippets" resourceId={snippetId} />
-    </SnippetLayout>
+    <SnippetAndEvaluationPlanGuard fallbackHref="/apps">
+      <SnippetLayout
+        snippetId={snippetId}
+        snippet={snippet}
+        section="evaluation"
+      >
+        <Evaluation resourceType="snippets" resourceId={snippetId} />
+      </SnippetLayout>
+    </SnippetAndEvaluationPlanGuard>
   )
 }
 
diff --git a/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx b/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
index 6d27560802..67a271d49f 100644
--- a/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
@@ -2,7 +2,21 @@ import { act, renderHook } from '@testing-library/react'
 import { useTabs, useToolTabs } from '../hooks'
 import { TabsEnum, ToolTypeEnum } from '../types'
 
+const mockCanAccessSnippetsAndEvaluation = vi.fn(() => true)
+
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: mockCanAccessSnippetsAndEvaluation(),
+    isReady: true,
+  }),
+}))
+
 describe('block-selector hooks', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCanAccessSnippetsAndEvaluation.mockReturnValue(true)
+  })
+
   it('falls back to the first valid tab when the preferred start tab is disabled', () => {
     const { result } = renderHook(() => useTabs({
       noStart: false,
@@ -49,4 +63,12 @@ describe('block-selector hooks', () => {
     expect(visible.current.some(tab => tab.key === ToolTypeEnum.MCP)).toBe(true)
     expect(hidden.current.some(tab => tab.key === ToolTypeEnum.MCP)).toBe(false)
   })
+
+  it('hides the snippets tab when snippet access is unavailable', () => {
+    mockCanAccessSnippetsAndEvaluation.mockReturnValue(false)
+
+    const { result } = renderHook(() => useTabs({}))
+
+    expect(result.current.tabs.some(tab => tab.key === TabsEnum.Snippets)).toBe(false)
+  })
 })
diff --git a/web/app/components/workflow/block-selector/hooks.ts b/web/app/components/workflow/block-selector/hooks.ts
index c645d0e30d..ac1026f96b 100644
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -5,6 +5,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { BLOCKS } from './constants'
 import {
   TabsEnum,
@@ -42,6 +43,7 @@ export const useTabs = ({
   forceEnableStartTab?: boolean
 }) => {
   const { t } = useTranslation()
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const shouldShowStartTab = !noStart
   const shouldDisableStartTab = disableStartTab || (!forceEnableStartTab && hasUserInputNode)
   const startDisabledTip = disableStartTab
@@ -69,11 +71,11 @@ export const useTabs = ({
     }, {
       key: TabsEnum.Snippets,
       name: t('tabs.snippets', { ns: 'workflow' }),
-      show: true,
+      show: canAccessSnippetsAndEvaluation,
     }]
 
     return tabConfigs.filter(tab => tab.show)
-  }, [t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab, startDisabledTip])
+  }, [canAccessSnippetsAndEvaluation, t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab, startDisabledTip])
 
   const getValidTabKey = useCallback((targetKey?: TabsEnum) => {
     if (!targetKey)
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 8286b7006e..bb72db67fa 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -18,6 +18,7 @@ import {
   ContextMenuSeparator,
 } from '@/app/components/base/ui/context-menu'
 import { toast } from '@/app/components/base/ui/toast'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { useRouter } from '@/next/navigation'
 import { consoleClient } from '@/service/client'
 import { useCreateSnippetMutation } from '@/service/use-snippets'
@@ -296,6 +297,7 @@ const getSelectedSnippetGraph = (
 const SelectionContextmenu = () => {
   const { t } = useTranslation()
   const { push } = useRouter()
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const createSnippetMutation = useCreateSnippetMutation()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleNodesCopy, handleNodesDelete, handleNodesDuplicate } = useNodesInteractions()
@@ -342,7 +344,7 @@ const SelectionContextmenu = () => {
   }, [selectedNodes])
 
   const handleOpenCreateSnippetDialog = useCallback(() => {
-    if (isAddToSnippetDisabled)
+    if (!canAccessSnippetsAndEvaluation || isAddToSnippetDisabled)
       return
 
     const nodes = store.getState().getNodes()
@@ -351,7 +353,7 @@ const SelectionContextmenu = () => {
     setSelectedGraphSnapshot(getSelectedSnippetGraph(nodes, edges, selectedNodes))
     setIsCreateSnippetDialogOpen(true)
     handleSelectionContextmenuCancel()
-  }, [handleSelectionContextmenuCancel, isAddToSnippetDisabled, selectedNodes, store])
+  }, [canAccessSnippetsAndEvaluation, handleSelectionContextmenuCancel, isAddToSnippetDisabled, selectedNodes, store])
 
   const handleCloseCreateSnippetDialog = useCallback(() => {
     setIsCreateSnippetDialogOpen(false)
@@ -397,28 +399,37 @@ const SelectionContextmenu = () => {
     }
   }, [createSnippetMutation, handleCloseCreateSnippetDialog, push, t])
 
-  const menuActions = useMemo<ActionMenuItem[]>(() => [
-    {
-      action: 'createSnippet',
-      disabled: isAddToSnippetDisabled,
-      translationKey: 'snippet.addToSnippet',
-    },
-    {
-      action: 'copy',
-      shortcutKeys: ['ctrl', 'c'],
-      translationKey: 'common.copy',
-    },
-    {
-      action: 'duplicate',
-      shortcutKeys: ['ctrl', 'd'],
-      translationKey: 'common.duplicate',
-    },
-    {
-      action: 'delete',
-      shortcutKeys: ['del'],
-      translationKey: 'operation.delete',
-    },
-  ], [isAddToSnippetDisabled])
+  const menuActions = useMemo<ActionMenuItem[]>(() => {
+    const nextActions: ActionMenuItem[] = []
+
+    if (canAccessSnippetsAndEvaluation) {
+      nextActions.push({
+        action: 'createSnippet',
+        disabled: isAddToSnippetDisabled,
+        translationKey: 'snippet.addToSnippet',
+      })
+    }
+
+    nextActions.push(
+      {
+        action: 'copy',
+        shortcutKeys: ['ctrl', 'c'],
+        translationKey: 'common.copy',
+      },
+      {
+        action: 'duplicate',
+        shortcutKeys: ['ctrl', 'd'],
+        translationKey: 'common.duplicate',
+      },
+      {
+        action: 'delete',
+        shortcutKeys: ['del'],
+        translationKey: 'operation.delete',
+      },
+    )
+
+    return nextActions
+  }, [canAccessSnippetsAndEvaluation, isAddToSnippetDisabled])
 
   const getActionLabel = useCallback((translationKey: string) => {
     if (translationKey === 'operation.delete')
@@ -532,7 +543,7 @@ const SelectionContextmenu = () => {
                 data-testid={`selection-contextmenu-item-${item.action}`}
                 disabled={item.disabled}
                 className={cn(
-                  'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] font-normal leading-5 text-text-secondary',
+                  'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] leading-5 font-normal text-text-secondary',
                   item.action === 'delete' && 'data-[highlighted]:bg-state-destructive-hover data-[highlighted]:text-text-destructive',
                 )}
                 onClick={() => handleMenuAction(item.action)}
diff --git a/web/hooks/use-snippet-and-evaluation-plan-access.ts b/web/hooks/use-snippet-and-evaluation-plan-access.ts
new file mode 100644
index 0000000000..984a30fced
--- /dev/null
+++ b/web/hooks/use-snippet-and-evaluation-plan-access.ts
@@ -0,0 +1,19 @@
+'use client'
+
+import { canAccessSnippetsAndEvaluation } from '@/app/components/billing/utils'
+import { useProviderContextSelector } from '@/context/provider-context'
+
+export const useSnippetAndEvaluationPlanAccess = () => {
+  const planType = useProviderContextSelector(state => state.plan.type)
+  const enableBilling = useProviderContextSelector(state => state.enableBilling)
+  const isFetchedPlan = useProviderContextSelector(state => state.isFetchedPlan)
+
+  return {
+    canAccess: canAccessSnippetsAndEvaluation({
+      enableBilling,
+      isFetchedPlan,
+      planType,
+    }),
+    isReady: !enableBilling || isFetchedPlan,
+  }
+}

From e51af66d95c6b374efff8054e54b63c8061ddca7 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 12 Apr 2026 12:19:17 +0800
Subject: [PATCH 090/108] feat(web): support creator filtering in apps &
 snippets

---
 .../apps/app-list-browsing-flow.test.tsx      |  50 ++--
 web/__tests__/apps/create-app-flow.test.tsx   |  29 +++
 .../components/apps/__tests__/list.spec.tsx   |  92 +++++--
 web/app/components/apps/creators-filter.tsx   | 229 ++++++++++++------
 .../__tests__/use-apps-query-state.spec.tsx   |  49 +++-
 .../apps/hooks/use-apps-query-state.ts        |   8 +-
 web/app/components/apps/list.tsx              |  16 +-
 web/contract/console/snippets.ts              |   1 +
 web/service/use-apps.ts                       |   3 +
 web/service/use-snippets.ts                   |   2 +
 10 files changed, 364 insertions(+), 115 deletions(-)

diff --git a/web/__tests__/apps/app-list-browsing-flow.test.tsx b/web/__tests__/apps/app-list-browsing-flow.test.tsx
index 1be7e56086..60299631d3 100644
--- a/web/__tests__/apps/app-list-browsing-flow.test.tsx
+++ b/web/__tests__/apps/app-list-browsing-flow.test.tsx
@@ -77,6 +77,13 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: true,
+    isReady: true,
+  }),
+}))
+
 vi.mock('@/app/components/base/tag-management/store', () => ({
   useStore: (selector: (state: Record<string, unknown>) => unknown) => {
     const state = {
@@ -93,6 +100,16 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/service/use-common', () => ({
+  useMembers: () => ({
+    data: {
+      accounts: [
+        { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+      ],
+    },
+  }),
+}))
+
 vi.mock('@/service/use-apps', () => ({
   useInfiniteAppList: () => ({
     data: { pages: mockPages },
@@ -110,6 +127,18 @@ vi.mock('@/service/use-apps', () => ({
   }),
 }))
 
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: () => ({
+    data: { pages: [] },
+    isLoading: false,
+    isFetching: false,
+    isFetchingNextPage: false,
+    fetchNextPage: vi.fn(),
+    hasNextPage: false,
+    error: null,
+  }),
+}))
+
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
@@ -319,16 +348,11 @@ describe('App List Browsing Flow', () => {
 
   // -- Tab navigation --
   describe('Tab Navigation', () => {
-    it('should render all category tabs', () => {
+    it('should render the app type dropdown trigger', () => {
       mockPages = [createPage([createMockApp()])]
       renderList()
 
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
-      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
-      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
-      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
-      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
     })
   })
 
@@ -354,21 +378,19 @@ describe('App List Browsing Flow', () => {
 
   // -- "Created by me" filter --
   describe('Created By Me Filter', () => {
-    it('should render the "created by me" checkbox', () => {
+    it('should not render a standalone "created by me" checkbox in the current header layout', () => {
       mockPages = [createPage([createMockApp()])]
       renderList()
 
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+      expect(screen.queryByText('app.showMyCreatedAppsOnly')).not.toBeInTheDocument()
     })
 
-    it('should toggle the "created by me" filter on click', () => {
+    it('should keep the current layout stable without a "created by me" control', () => {
       mockPages = [createPage([createMockApp()])]
       renderList()
 
-      const checkbox = screen.getByText('app.showMyCreatedAppsOnly')
-      fireEvent.click(checkbox)
-
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
+      expect(screen.queryByText('app.showMyCreatedAppsOnly')).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/__tests__/apps/create-app-flow.test.tsx b/web/__tests__/apps/create-app-flow.test.tsx
index bc1f7a3a06..58915ac414 100644
--- a/web/__tests__/apps/create-app-flow.test.tsx
+++ b/web/__tests__/apps/create-app-flow.test.tsx
@@ -64,6 +64,13 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: true,
+    isReady: true,
+  }),
+}))
+
 vi.mock('@/app/components/base/tag-management/store', () => ({
   useStore: (selector: (state: Record<string, unknown>) => unknown) => {
     const state = {
@@ -80,6 +87,16 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/service/use-common', () => ({
+  useMembers: () => ({
+    data: {
+      accounts: [
+        { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+      ],
+    },
+  }),
+}))
+
 vi.mock('@/service/use-apps', () => ({
   useInfiniteAppList: () => ({
     data: { pages: mockPages },
@@ -97,6 +114,18 @@ vi.mock('@/service/use-apps', () => ({
   }),
 }))
 
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: () => ({
+    data: { pages: [] },
+    isLoading: false,
+    isFetching: false,
+    isFetchingNextPage: false,
+    fetchNextPage: vi.fn(),
+    hasNextPage: false,
+    error: null,
+  }),
+}))
+
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index feb1519e57..b316843e70 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -44,6 +44,7 @@ vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
 const mockSetQuery = vi.fn()
 const mockQueryState = {
   tagIDs: [] as string[],
+  creatorIDs: [] as string[],
   keywords: '',
   isCreatedByMe: false,
 }
@@ -68,6 +69,8 @@ vi.mock('../hooks/use-dsl-drag-drop', () => ({
 const mockRefetch = vi.fn()
 const mockFetchNextPage = vi.fn()
 const mockFetchSnippetNextPage = vi.fn()
+const mockUseInfiniteAppList = vi.fn()
+const mockUseInfiniteSnippetList = vi.fn()
 
 const mockServiceState = {
   error: null as Error | null,
@@ -112,16 +115,19 @@ const defaultAppData = {
 }
 
 vi.mock('@/service/use-apps', () => ({
-  useInfiniteAppList: () => ({
-    data: defaultAppData,
-    isLoading: mockServiceState.isLoading,
-    isFetching: mockServiceState.isFetching,
-    isFetchingNextPage: mockServiceState.isFetchingNextPage,
-    fetchNextPage: mockFetchNextPage,
-    hasNextPage: mockServiceState.hasNextPage,
-    error: mockServiceState.error,
-    refetch: mockRefetch,
-  }),
+  useInfiniteAppList: (params: unknown, options: unknown) => {
+    mockUseInfiniteAppList(params, options)
+    return {
+      data: defaultAppData,
+      isLoading: mockServiceState.isLoading,
+      isFetching: mockServiceState.isFetching,
+      isFetchingNextPage: mockServiceState.isFetchingNextPage,
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: mockServiceState.hasNextPage,
+      error: mockServiceState.error,
+      refetch: mockRefetch,
+    }
+  },
   useDeleteAppMutation: () => ({
     mutateAsync: vi.fn(),
     isPending: false,
@@ -162,15 +168,18 @@ const defaultSnippetData = {
 }
 
 vi.mock('@/service/use-snippets', () => ({
-  useInfiniteSnippetList: () => ({
-    data: defaultSnippetData,
-    isLoading: mockSnippetServiceState.isLoading,
-    isFetching: mockSnippetServiceState.isFetching,
-    isFetchingNextPage: mockSnippetServiceState.isFetchingNextPage,
-    fetchNextPage: mockFetchSnippetNextPage,
-    hasNextPage: mockSnippetServiceState.hasNextPage,
-    error: mockSnippetServiceState.error,
-  }),
+  useInfiniteSnippetList: (params: unknown, options: unknown) => {
+    mockUseInfiniteSnippetList(params, options)
+    return {
+      data: defaultSnippetData,
+      isLoading: mockSnippetServiceState.isLoading,
+      isFetching: mockSnippetServiceState.isFetching,
+      isFetchingNextPage: mockSnippetServiceState.isFetchingNextPage,
+      fetchNextPage: mockFetchSnippetNextPage,
+      hasNextPage: mockSnippetServiceState.hasNextPage,
+      error: mockSnippetServiceState.error,
+    }
+  },
   useCreateSnippetMutation: () => ({
     mutate: vi.fn(),
     isPending: false,
@@ -193,6 +202,17 @@ vi.mock('@/config', () => ({
   NEED_REFRESH_APP_LIST_KEY: 'needRefreshAppList',
 }))
 
+vi.mock('@/service/use-common', () => ({
+  useMembers: () => ({
+    data: {
+      accounts: [
+        { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+        { id: 'user-2', name: 'Alice', email: 'alice@example.com', avatar: '', avatar_url: '', role: 'admin', last_login_at: '', created_at: '', status: 'active' },
+      ],
+    },
+  }),
+}))
+
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
@@ -292,6 +312,7 @@ describe('List', () => {
     mockServiceState.isFetching = false
     mockServiceState.isFetchingNextPage = false
     mockQueryState.tagIDs = []
+    mockQueryState.creatorIDs = []
     mockQueryState.keywords = ''
     mockQueryState.isCreatedByMe = false
     mockSnippetServiceState.error = null
@@ -299,6 +320,8 @@ describe('List', () => {
     mockSnippetServiceState.isLoading = false
     mockSnippetServiceState.isFetching = false
     mockSnippetServiceState.isFetchingNextPage = false
+    mockUseInfiniteAppList.mockClear()
+    mockUseInfiniteSnippetList.mockClear()
     intersectionCallback = null
     localStorage.clear()
   })
@@ -310,7 +333,7 @@ describe('List', () => {
       expect(screen.getByRole('link', { name: 'app.studio.apps' })).toHaveAttribute('href', '/apps')
       expect(screen.getByRole('link', { name: 'workflow.tabs.snippets' })).toHaveAttribute('href', '/snippets')
       expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
-      expect(screen.getByText('app.studio.filters.creators')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.allCreators')).toBeInTheDocument()
       expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
       expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
       expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
@@ -328,14 +351,23 @@ describe('List', () => {
       expect(lastCall.searchParams.get('category')).toBe(AppModeEnum.WORKFLOW)
     })
 
-    it('should keep the creators dropdown visual-only and not update app query state', async () => {
+    it('should update creatorIDs when selecting a creator from the dropdown', async () => {
       renderList()
 
-      fireEvent.click(screen.getByText('app.studio.filters.creators'))
-      fireEvent.click(await screen.findByText('Evan'))
+      fireEvent.click(screen.getByText('app.studio.filters.allCreators'))
+      fireEvent.click(await screen.findByText('Current User'))
 
-      expect(mockSetQuery).not.toHaveBeenCalled()
-      expect(screen.getByText('app.studio.filters.creators +1')).toBeInTheDocument()
+      expect(mockSetQuery).toHaveBeenCalledTimes(1)
+    })
+
+    it('should pass creator_id to the app list query when creatorIDs are selected', () => {
+      mockQueryState.creatorIDs = ['user-1', 'user-2']
+
+      renderList()
+
+      expect(mockUseInfiniteAppList).toHaveBeenCalledWith(expect.objectContaining({
+        creator_id: 'user-1,user-2',
+      }), expect.any(Object))
     })
 
     it('should render and close the DSL import modal when a file is dropped', () => {
@@ -393,6 +425,16 @@ describe('List', () => {
       expect(screen.queryByText('app.newApp.dropDSLToCreateApp')).not.toBeInTheDocument()
     })
 
+    it('should pass creator_id to the snippet list query when creatorIDs are selected', () => {
+      mockQueryState.creatorIDs = ['user-1', 'user-2']
+
+      renderList({ pageType: 'snippets' })
+
+      expect(mockUseInfiniteSnippetList).toHaveBeenCalledWith(expect.objectContaining({
+        creator_id: 'user-1,user-2',
+      }), expect.any(Object))
+    })
+
     it('should not fetch the next snippet page when no more data is available', () => {
       renderList({ pageType: 'snippets' })
 
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
index 1e2bed5f3a..7a268c5136 100644
--- a/web/app/components/apps/creators-filter.tsx
+++ b/web/app/components/apps/creators-filter.tsx
@@ -2,81 +2,162 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
+import { Avatar } from '@/app/components/base/ui/avatar'
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuCheckboxItemIndicator,
   DropdownMenuContent,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
+import { useAppContext } from '@/context/app-context'
+import { useMembers } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 
+type CreatorsFilterProps = {
+  value: string[]
+  onChange: (value: string[]) => void
+}
+
 type CreatorOption = {
   id: string
   name: string
-  isYou?: boolean
-  avatarClassName: string
+  avatarUrl: string | null
+  isYou: boolean
 }
 
-const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
+const baseChipClassName = 'flex h-8 items-center rounded-lg border-[0.5px] px-2 text-[13px] leading-4 transition-colors'
 
-const creatorOptions: CreatorOption[] = [
-  { id: 'evan', name: 'Evan', isYou: true, avatarClassName: 'bg-gradient-to-br from-[#ff9b3f] to-[#ff4d00]' },
-  { id: 'jack', name: 'Jack', avatarClassName: 'bg-gradient-to-br from-[#fde68a] to-[#d6d3d1]' },
-  { id: 'gigi', name: 'Gigi', avatarClassName: 'bg-gradient-to-br from-[#f9a8d4] to-[#a78bfa]' },
-  { id: 'alice', name: 'Alice', avatarClassName: 'bg-gradient-to-br from-[#93c5fd] to-[#4f46e5]' },
-  { id: 'mandy', name: 'Mandy', avatarClassName: 'bg-gradient-to-br from-[#374151] to-[#111827]' },
-]
-
-const CreatorsFilter = () => {
+const CreatorsFilter = ({
+  value,
+  onChange,
+}: CreatorsFilterProps) => {
   const { t } = useTranslation()
-  const [selectedCreatorIds, setSelectedCreatorIds] = useState<string[]>([])
+  const { userProfile } = useAppContext()
+  const { data: membersData } = useMembers()
   const [keywords, setKeywords] = useState('')
 
+  const creatorOptions = useMemo<CreatorOption[]>(() => {
+    const currentUserId = userProfile?.id
+    const members = membersData?.accounts ?? []
+
+    return [...members]
+      .filter(member => member.status !== 'pending')
+      .sort((left, right) => {
+        if (left.id === currentUserId)
+          return -1
+        if (right.id === currentUserId)
+          return 1
+        return left.name.localeCompare(right.name)
+      })
+      .map(member => ({
+        id: member.id,
+        name: member.name,
+        avatarUrl: member.avatar_url,
+        isYou: member.id === currentUserId,
+      }))
+  }, [membersData?.accounts, userProfile?.id])
+
   const filteredCreators = useMemo(() => {
     const normalizedKeywords = keywords.trim().toLowerCase()
     if (!normalizedKeywords)
       return creatorOptions
 
-    return creatorOptions.filter(creator => creator.name.toLowerCase().includes(normalizedKeywords))
-  }, [keywords])
+    return creatorOptions.filter((creator) => {
+      const keyword = normalizedKeywords
+      return creator.name.toLowerCase().includes(keyword)
+    })
+  }, [creatorOptions, keywords])
 
-  const selectedCount = selectedCreatorIds.length
-  const triggerLabel = selectedCount > 0
-    ? `${t('studio.filters.creators', { ns: 'app' })} +${selectedCount}`
-    : t('studio.filters.creators', { ns: 'app' })
+  const selectedCreators = useMemo(() => {
+    const creatorMap = new Map(creatorOptions.map(creator => [creator.id, creator]))
+    return value
+      .map(id => creatorMap.get(id))
+      .filter((creator): creator is CreatorOption => Boolean(creator))
+  }, [creatorOptions, value])
 
   const toggleCreator = useCallback((creatorId: string) => {
-    setSelectedCreatorIds((prev) => {
-      if (prev.includes(creatorId))
-        return prev.filter(id => id !== creatorId)
-      return [...prev, creatorId]
-    })
-  }, [])
+    if (value.includes(creatorId)) {
+      onChange(value.filter(id => id !== creatorId))
+      return
+    }
+
+    onChange([...value, creatorId])
+  }, [onChange, value])
 
   const resetCreators = useCallback(() => {
-    setSelectedCreatorIds([])
+    onChange([])
     setKeywords('')
-  }, [])
+  }, [onChange])
+
+  const selectedCount = value.length
+  const selectedAvatarCreators = selectedCreators.slice(0, 3)
+  const isSelected = selectedCount > 0
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
         render={(
-          <button
-            type="button"
-            className={cn(chipClassName, selectedCount > 0 && 'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs')}
+          <div
+            className={cn(
+              baseChipClassName,
+              isSelected
+                ? 'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-state-base-hover'
+                : 'border-transparent bg-[#f9f9f9] text-text-tertiary hover:bg-components-input-bg-hover',
+            )}
           />
         )}
       >
         <span aria-hidden className="i-ri-user-shared-line h-4 w-4 shrink-0 text-text-tertiary" />
-        <span>{triggerLabel}</span>
-        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
+        {!isSelected && (
+          <>
+            <span className="px-1 text-text-tertiary">{t('studio.filters.allCreators', { ns: 'app' })}</span>
+            <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
+          </>
+        )}
+        {isSelected && (
+          <>
+            <span className="px-1 text-text-tertiary">{t('studio.filters.creators', { ns: 'app' })}</span>
+            <span className="flex items-center pr-1">
+              {selectedAvatarCreators.map((creator, index) => (
+                <Avatar
+                  key={creator.id}
+                  avatar={creator.avatarUrl}
+                  name={creator.name}
+                  size="xs"
+                  className={cn(
+                    'border border-components-panel-bg',
+                    index > 0 && '-ml-1',
+                  )}
+                />
+              ))}
+            </span>
+            <span className="text-xs leading-4 font-medium text-text-tertiary">{`+${selectedCount}`}</span>
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label={t('studio.filters.reset', { ns: 'app' })}
+              className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-xs text-text-quaternary hover:text-text-tertiary"
+              onClick={(event) => {
+                event.stopPropagation()
+                resetCreators()
+              }}
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter' && event.key !== ' ')
+                  return
+
+                event.preventDefault()
+                event.stopPropagation()
+                resetCreators()
+              }}
+            >
+              <span aria-hidden className="i-ri-close-circle-fill h-3.5 w-3.5" />
+            </span>
+          </>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent placement="bottom-start" popupClassName="w-[280px] p-0">
-        <div className="flex items-center gap-2 p-2 pb-1">
+        <div className="flex items-center gap-1 p-2 pb-1">
           <Input
             showLeftIcon
             showClearIcon
@@ -85,40 +166,50 @@ const CreatorsFilter = () => {
             onClear={() => setKeywords('')}
             placeholder={t('studio.filters.searchCreators', { ns: 'app' })}
           />
-          <button
-            type="button"
-            className="shrink-0 rounded-md px-2 py-1 text-xs font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
-            onClick={resetCreators}
-          >
-            {t('studio.filters.reset', { ns: 'app' })}
-          </button>
-        </div>
-        <div className="px-1 pb-1">
-          <DropdownMenuCheckboxItem
-            checked={selectedCreatorIds.length === 0}
-            onCheckedChange={resetCreators}
-          >
-            <span aria-hidden className="i-ri-user-line h-4 w-4 shrink-0 text-text-tertiary" />
-            <span>{t('studio.filters.allCreators', { ns: 'app' })}</span>
-            <DropdownMenuCheckboxItemIndicator />
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuSeparator />
-          {filteredCreators.map(creator => (
-            <DropdownMenuCheckboxItem
-              key={creator.id}
-              checked={selectedCreatorIds.includes(creator.id)}
-              onCheckedChange={() => toggleCreator(creator.id)}
+          {isSelected && (
+            <button
+              type="button"
+              className="shrink-0 rounded-sm px-2 py-1 text-xs font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+              onClick={resetCreators}
             >
-              <span className={cn('h-5 w-5 shrink-0 rounded-full border border-white', creator.avatarClassName)} />
-              <span className="flex min-w-0 grow items-center justify-between gap-2">
-                <span className="truncate">{creator.name}</span>
-                {creator.isYou && (
-                  <span className="shrink-0 text-text-quaternary">{t('studio.filters.you', { ns: 'app' })}</span>
-                )}
-              </span>
-              <DropdownMenuCheckboxItemIndicator />
-            </DropdownMenuCheckboxItem>
-          ))}
+              {t('studio.filters.reset', { ns: 'app' })}
+            </button>
+          )}
+        </div>
+        <div className="max-h-[240px] overflow-y-auto px-1 pb-1">
+          {filteredCreators.map((creator) => {
+            const checked = value.includes(creator.id)
+
+            return (
+              <button
+                key={creator.id}
+                type="button"
+                className="flex w-full items-center gap-1 rounded-md px-2 py-1.5 hover:bg-state-base-hover"
+                onClick={() => toggleCreator(creator.id)}
+              >
+                <Checkbox
+                  id={creator.id}
+                  checked={checked}
+                  onCheck={() => undefined}
+                  className="shrink-0"
+                />
+                <div className="flex min-w-0 grow items-center gap-2 px-1">
+                  <Avatar
+                    avatar={creator.avatarUrl}
+                    name={creator.name}
+                    size="xs"
+                    className="border-[0.5px] border-divider-regular"
+                  />
+                  <div className="flex min-w-0 grow items-center justify-between gap-2">
+                    <span className="truncate text-sm text-text-secondary">{creator.name}</span>
+                    {creator.isYou && (
+                      <span className="shrink-0 text-sm text-text-quaternary">{t('studio.filters.you', { ns: 'app' })}</span>
+                    )}
+                  </div>
+                </div>
+              </button>
+            )
+          })}
         </div>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx b/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
index 8e8e5821a8..29e75ec605 100644
--- a/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
+++ b/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
@@ -23,6 +23,7 @@ describe('useAppsQueryState', () => {
       const { result } = renderWithAdapter()
 
       expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.creatorIDs).toBeUndefined()
       expect(result.current.query.keywords).toBeUndefined()
       expect(result.current.query.isCreatedByMe).toBe(false)
     })
@@ -41,6 +42,12 @@ describe('useAppsQueryState', () => {
       expect(result.current.query.keywords).toBe('search term')
     })
 
+    it('should parse creatorIDs when URL includes creatorIDs', () => {
+      const { result } = renderWithAdapter('?creatorIDs=user-1;user-2')
+
+      expect(result.current.query.creatorIDs).toEqual(['user-1', 'user-2'])
+    })
+
     it('should parse isCreatedByMe when URL includes true value', () => {
       const { result } = renderWithAdapter('?isCreatedByMe=true')
 
@@ -49,10 +56,11 @@ describe('useAppsQueryState', () => {
 
     it('should parse all params when URL includes multiple filters', () => {
       const { result } = renderWithAdapter(
-        '?tagIDs=tag1;tag2&keywords=test&isCreatedByMe=true',
+        '?tagIDs=tag1;tag2&creatorIDs=user-1;user-2&keywords=test&isCreatedByMe=true',
       )
 
       expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+      expect(result.current.query.creatorIDs).toEqual(['user-1', 'user-2'])
       expect(result.current.query.keywords).toBe('test')
       expect(result.current.query.isCreatedByMe).toBe(true)
     })
@@ -79,6 +87,16 @@ describe('useAppsQueryState', () => {
       expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
     })
 
+    it('should update creatorIDs when setQuery receives creatorIDs', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ creatorIDs: ['user-1', 'user-2'] })
+      })
+
+      expect(result.current.query.creatorIDs).toEqual(['user-1', 'user-2'])
+    })
+
     it('should update isCreatedByMe when setQuery receives true', () => {
       const { result } = renderWithAdapter()
 
@@ -131,6 +149,18 @@ describe('useAppsQueryState', () => {
       expect(update.searchParams.get('tagIDs')).toBe('tag1;tag2')
     })
 
+    it('should sync creatorIDs to URL when creatorIDs change', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ creatorIDs: ['user-1', 'user-2'] })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('creatorIDs')).toBe('user-1;user-2')
+    })
+
     it('should sync isCreatedByMe to URL when enabled', async () => {
       const { result, onUrlUpdate } = renderWithAdapter()
 
@@ -167,6 +197,18 @@ describe('useAppsQueryState', () => {
       expect(update.searchParams.has('tagIDs')).toBe(false)
     })
 
+    it('should remove creatorIDs from URL when creatorIDs are empty', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter('?creatorIDs=user-1;user-2')
+
+      act(() => {
+        result.current.setQuery({ creatorIDs: [] })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('creatorIDs')).toBe(false)
+    })
+
     it('should remove isCreatedByMe from URL when disabled', async () => {
       const { result, onUrlUpdate } = renderWithAdapter('?isCreatedByMe=true')
 
@@ -212,12 +254,17 @@ describe('useAppsQueryState', () => {
         result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
       })
 
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, creatorIDs: ['user-1'] }))
+      })
+
       act(() => {
         result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
       })
 
       expect(result.current.query.keywords).toBe('first')
       expect(result.current.query.tagIDs).toEqual(['tag1'])
+      expect(result.current.query.creatorIDs).toEqual(['user-1'])
       expect(result.current.query.isCreatedByMe).toBe(true)
     })
   })
diff --git a/web/app/components/apps/hooks/use-apps-query-state.ts b/web/app/components/apps/hooks/use-apps-query-state.ts
index ecf7707e8a..50ae13a425 100644
--- a/web/app/components/apps/hooks/use-apps-query-state.ts
+++ b/web/app/components/apps/hooks/use-apps-query-state.ts
@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
 
 type AppsQuery = {
   tagIDs?: string[]
+  creatorIDs?: string[]
   keywords?: string
   isCreatedByMe?: boolean
 }
@@ -13,6 +14,7 @@ function useAppsQueryState() {
   const [urlQuery, setUrlQuery] = useQueryStates(
     {
       tagIDs: parseAsArrayOf(parseAsString, ';'),
+      creatorIDs: parseAsArrayOf(parseAsString, ';'),
       keywords: parseAsString,
       isCreatedByMe: parseAsBoolean,
     },
@@ -23,15 +25,18 @@ function useAppsQueryState() {
 
   const query = useMemo<AppsQuery>(() => ({
     tagIDs: urlQuery.tagIDs ?? undefined,
+    creatorIDs: urlQuery.creatorIDs ?? undefined,
     keywords: normalizeKeywords(urlQuery.keywords),
     isCreatedByMe: urlQuery.isCreatedByMe ?? false,
-  }), [urlQuery.isCreatedByMe, urlQuery.keywords, urlQuery.tagIDs])
+  }), [urlQuery.creatorIDs, urlQuery.isCreatedByMe, urlQuery.keywords, urlQuery.tagIDs])
 
   const setQuery = useCallback((next: AppsQuery | ((prev: AppsQuery) => AppsQuery)) => {
     const buildPatch = (patch: AppsQuery) => {
       const result: Partial<typeof urlQuery> = {}
       if ('tagIDs' in patch)
         result.tagIDs = patch.tagIDs && patch.tagIDs.length > 0 ? patch.tagIDs : null
+      if ('creatorIDs' in patch)
+        result.creatorIDs = patch.creatorIDs && patch.creatorIDs.length > 0 ? patch.creatorIDs : null
       if ('keywords' in patch)
         result.keywords = patch.keywords ? patch.keywords : null
       if ('isCreatedByMe' in patch)
@@ -42,6 +47,7 @@ function useAppsQueryState() {
     if (typeof next === 'function') {
       setUrlQuery(prev => buildPatch(next({
         tagIDs: prev.tagIDs ?? undefined,
+        creatorIDs: prev.creatorIDs ?? undefined,
         keywords: normalizeKeywords(prev.keywords),
         isCreatedByMe: prev.isCreatedByMe ?? false,
       })))
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index a0cfb653ad..47dcbf34ad 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -60,7 +60,7 @@ const List: FC<Props> = ({
     parseAsAppListCategory,
   )
 
-  const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
+  const { query: { tagIDs = [], creatorIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
   const [appKeywords, setAppKeywords] = useState(keywords)
   const [snippetKeywordsInput, setSnippetKeywordsInput] = useState('')
@@ -79,6 +79,10 @@ const List: FC<Props> = ({
     setQuery(prev => ({ ...prev, tagIDs: nextTagIDs }))
   }, [setQuery])
 
+  const setCreatorIDs = useCallback((nextCreatorIDs: string[]) => {
+    setQuery(prev => ({ ...prev, creatorIDs: nextCreatorIDs }))
+  }, [setQuery])
+
   const handleDSLFileDropped = useCallback((file: File) => {
     setDroppedDSLFile(file)
     setShowCreateFromDSLModal(true)
@@ -96,6 +100,7 @@ const List: FC<Props> = ({
     name: appKeywords,
     tag_ids: tagIDs,
     is_created_by_me: queryIsCreatedByMe,
+    ...(creatorIDs.length > 0 ? { creator_id: creatorIDs.join(',') } : {}),
     ...(activeTab !== 'all' ? { mode: activeTab } : {}),
   }
 
@@ -124,6 +129,7 @@ const List: FC<Props> = ({
     page: 1,
     limit: 30,
     keyword: snippetKeywords || undefined,
+    creator_id: creatorIDs.length > 0 ? creatorIDs.join(',') : undefined,
   }, {
     enabled: !isAppsPage,
   })
@@ -227,10 +233,10 @@ const List: FC<Props> = ({
     <>
       <div ref={containerRef} className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
         {dragging && (
-          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2" />
+          <div className="inset-0 absolute z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2" />
         )}
 
-        <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-5 pt-7">
+        <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pt-7 pb-5">
           <div className="flex flex-wrap items-center gap-2">
             <StudioRouteSwitch
               pageType={pageType}
@@ -246,7 +252,7 @@ const List: FC<Props> = ({
                 }}
               />
             )}
-            <CreatorsFilter />
+            <CreatorsFilter value={creatorIDs} onChange={setCreatorIDs} />
             {isAppsPage && (
               <TagFilter type="app" value={tagFilterValue} onChange={handleTagsChange} />
             )}
@@ -266,7 +272,7 @@ const List: FC<Props> = ({
         </div>
 
         <div className={cn(
-          'relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
+          'relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
           isAppsPage && !hasAnyApp && 'overflow-hidden',
         )}
         >
diff --git a/web/contract/console/snippets.ts b/web/contract/console/snippets.ts
index 82a5838436..7fd096aa3a 100644
--- a/web/contract/console/snippets.ts
+++ b/web/contract/console/snippets.ts
@@ -32,6 +32,7 @@ export const listCustomizedSnippetsContract = base
       page: number
       limit: number
       keyword?: string
+      creator_id?: string
       is_published?: boolean
     }
   }>())
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index 96a708e3ec..7a49ea604f 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -30,6 +30,7 @@ type AppListParams = {
   name?: string
   mode?: AppModeEnum | 'all'
   tag_ids?: string[]
+  creator_id?: string
   is_created_by_me?: boolean
 }
 
@@ -55,6 +56,7 @@ const normalizeAppListParams = (params: AppListParams) => {
     name = '',
     mode,
     tag_ids,
+    creator_id,
     is_created_by_me,
   } = params
 
@@ -66,6 +68,7 @@ const normalizeAppListParams = (params: AppListParams) => {
     name,
     ...(safeMode && safeMode !== 'all' ? { mode: safeMode } : {}),
     ...(tag_ids?.length ? { tag_ids } : {}),
+    ...(creator_id ? { creator_id } : {}),
     ...(is_created_by_me ? { is_created_by_me } : {}),
   }
 }
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
index cb8056921f..dffc3d6631 100644
--- a/web/service/use-snippets.ts
+++ b/web/service/use-snippets.ts
@@ -25,6 +25,7 @@ type SnippetListParams = {
   page?: number
   limit?: number
   keyword?: string
+  creator_id?: string
   is_published?: boolean
 }
 
@@ -123,6 +124,7 @@ const normalizeSnippetListParams = (params: SnippetListParams) => {
     page: params.page ?? DEFAULT_SNIPPET_LIST_PARAMS.page,
     limit: params.limit ?? DEFAULT_SNIPPET_LIST_PARAMS.limit,
     ...(params.keyword ? { keyword: params.keyword } : {}),
+    ...(params.creator_id ? { creator_id: params.creator_id } : {}),
     ...(typeof params.is_published === 'boolean' ? { is_published: params.is_published } : {}),
   }
 }

From f6047aafe8a673d8268fd2c76e0684cab75c6116 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 13 Apr 2026 14:13:04 +0800
Subject: [PATCH 091/108] feat(web): metric descriptions

---
 .../default-metric-descriptions.spec.ts       | 34 ++++++++
 .../use-metric-selector-data.ts               | 18 ++++-
 .../components/metric-selector/utils.ts       |  3 +-
 .../pipeline/pipeline-metric-item.tsx         |  4 +-
 .../evaluation/default-metric-descriptions.ts | 79 +++++++++++++++++++
 web/app/components/evaluation/mock.ts         | 13 +--
 web/app/components/evaluation/store-utils.ts  |  3 +-
 web/i18n/en-US/evaluation.json                |  9 +++
 web/i18n/zh-Hans/evaluation.json              |  9 +++
 9 files changed, 159 insertions(+), 13 deletions(-)
 create mode 100644 web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts
 create mode 100644 web/app/components/evaluation/default-metric-descriptions.ts

diff --git a/web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts b/web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts
new file mode 100644
index 0000000000..9671220334
--- /dev/null
+++ b/web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts
@@ -0,0 +1,34 @@
+import { getDefaultMetricDescription, getDefaultMetricDescriptionI18nKey, getTranslatedMetricDescription } from '../default-metric-descriptions'
+
+describe('default metric descriptions', () => {
+  it('should resolve descriptions for kebab-case metric ids', () => {
+    expect(getDefaultMetricDescription('context-precision')).toContain('retrieval pipeline returns little noise')
+    expect(getDefaultMetricDescription('answer-correctness')).toContain('factual accuracy and completeness')
+  })
+
+  it('should normalize snake_case metric ids from backend payloads', () => {
+    expect(getDefaultMetricDescription('CONTEXT_RECALL')).toContain('does not miss important supporting evidence')
+    expect(getDefaultMetricDescription('TOOL_CORRECTNESS')).toContain('tool-use strategy matches the expected behavior')
+  })
+
+  it('should support the legacy relevance alias', () => {
+    expect(getDefaultMetricDescription('relevance')).toContain('addresses the user\'s question')
+  })
+
+  it('should resolve i18n keys for builtin metrics', () => {
+    expect(getDefaultMetricDescriptionI18nKey('context-precision')).toBe('metrics.builtin.description.contextPrecision')
+    expect(getDefaultMetricDescriptionI18nKey('ANSWER_RELEVANCY')).toBe('metrics.builtin.description.answerRelevancy')
+  })
+
+  it('should use translated content when translation key exists', () => {
+    const t = vi.fn((key: string, options?: { defaultValue?: string }) => {
+      if (key === 'metrics.builtin.description.faithfulness')
+        return '忠实性中文文案'
+
+      return options?.defaultValue ?? key
+    })
+
+    expect(getTranslatedMetricDescription(t as never, 'faithfulness')).toBe('忠实性中文文案')
+    expect(getTranslatedMetricDescription(t as never, 'latency', 'Latency fallback')).toBe('Latency fallback')
+  })
+})
diff --git a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
index d2ad11bc12..24e1b494bc 100644
--- a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
+++ b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
@@ -1,7 +1,9 @@
 import type { BuiltinMetricMap, MetricSelectorSection } from './types'
 import type { NodeInfo } from '@/types/evaluation'
 import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useAvailableEvaluationMetrics, useEvaluationNodeInfoMutation } from '@/service/use-evaluation'
+import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
 import { getEvaluationMockConfig } from '../../mock'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 import {
@@ -34,6 +36,7 @@ export const useMetricSelectorData = ({
   nodeInfoMap,
   setNodeInfoMap,
 }: UseMetricSelectorDataOptions): UseMetricSelectorDataResult => {
+  const { t } = useTranslation('evaluation')
   const config = getEvaluationMockConfig(resourceType)
   const metrics = useEvaluationResource(resourceType, resourceId).metrics
   const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
@@ -102,9 +105,10 @@ export const useMetricSelectorData = ({
     const keyword = query.trim().toLowerCase()
 
     return resolvedMetrics.map((metric) => {
+      const metricDescription = getTranslatedMetricDescription(t, metric.id, metric.description)
       const metricMatches = !keyword
         || metric.label.toLowerCase().includes(keyword)
-        || metric.description.toLowerCase().includes(keyword)
+        || metricDescription.toLowerCase().includes(keyword)
       const metricNodes = nodeInfoMap[metric.id] ?? []
       const supportsNodeSelection = resourceType !== 'datasets'
       const hasNoNodeInfo = supportsNodeSelection && metricNodes.length === 0
@@ -114,7 +118,10 @@ export const useMetricSelectorData = ({
           return null
 
         return {
-          metric,
+          metric: {
+            ...metric,
+            description: metricDescription,
+          },
           hasNoNodeInfo: true,
           visibleNodes: [] as NodeInfo[],
         }
@@ -132,12 +139,15 @@ export const useMetricSelectorData = ({
         return null
 
       return {
-        metric,
+        metric: {
+          ...metric,
+          description: metricDescription,
+        },
         hasNoNodeInfo: false,
         visibleNodes,
       }
     }).filter(section => !!section)
-  }, [nodeInfoMap, query, resolvedMetrics, resourceType])
+  }, [nodeInfoMap, query, resolvedMetrics, resourceType, t])
 
   const toggleNodeSelection = (metricId: string, nodeInfo: NodeInfo) => {
     const addedMetric = builtinMetricMap.get(metricId)
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
index 274737127e..2a6ca53158 100644
--- a/web/app/components/evaluation/components/metric-selector/utils.ts
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -1,6 +1,7 @@
 import type { MetricOption } from '../../types'
 import type { MetricVisualTone } from './types'
 import type { EvaluationTargetType, NodeInfo } from '@/types/evaluation'
+import { getDefaultMetricDescription } from '../../default-metric-descriptions'
 
 export const toEvaluationTargetType = (resourceType: 'apps' | 'snippets'): EvaluationTargetType => {
   return resourceType === 'snippets' ? 'snippets' : 'apps'
@@ -17,7 +18,7 @@ const humanizeMetricId = (metricId: string) => {
 export const buildMetricOption = (metricId: string): MetricOption => ({
   id: metricId,
   label: humanizeMetricId(metricId),
-  description: '',
+  description: getDefaultMetricDescription(metricId),
   valueType: 'number',
 })
 
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
index e535da2204..314d3cfae8 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -6,6 +6,7 @@ import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { cn } from '@/utils/classnames'
+import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
 import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
 
 type PipelineMetricItemProps = {
@@ -26,6 +27,7 @@ const PipelineMetricItem = ({
   onThresholdChange,
 }: PipelineMetricItemProps) => {
   const { t } = useTranslation('evaluation')
+  const metricDescription = getTranslatedMetricDescription(t, metric.id, metric.description)
 
   return (
     <div className="flex items-center justify-between gap-3 px-1 py-1">
@@ -45,7 +47,7 @@ const PipelineMetricItem = ({
             )}
           />
           <TooltipContent>
-            {metric.description}
+            {metricDescription}
           </TooltipContent>
         </Tooltip>
       </button>
diff --git a/web/app/components/evaluation/default-metric-descriptions.ts b/web/app/components/evaluation/default-metric-descriptions.ts
new file mode 100644
index 0000000000..c989a45d62
--- /dev/null
+++ b/web/app/components/evaluation/default-metric-descriptions.ts
@@ -0,0 +1,79 @@
+import type { TFunction } from 'i18next'
+
+const DEFAULT_METRIC_DESCRIPTION = {
+  FAITHFULNESS: 'Measures whether every claim in the model\'s response is grounded in the provided retrieved context. A high score means the answer contains no hallucinated content; each statement can be traced back to a passage in the context.',
+  ANSWER_RELEVANCY: 'Measures how well the model\'s response addresses the user\'s question. A high score means the answer stays on-topic; a low score indicates irrelevant content or a failure to answer the actual question.',
+  ANSWER_CORRECTNESS: 'Measures the factual accuracy and completeness of the model\'s answer relative to a ground-truth reference. It combines semantic similarity with key-fact coverage, so both meaning and content matter.',
+  SEMANTIC_SIMILARITY: 'Measures the cosine similarity between the model\'s response and the reference answer in an embedding space. It evaluates whether the two texts convey the same meaning, independent of factual correctness.',
+  CONTEXT_PRECISION: 'Measures the proportion of retrieved context chunks that are actually relevant to the question (precision). A high score means the retrieval pipeline returns little noise.',
+  CONTEXT_RECALL: 'Measures the proportion of ground-truth information that is covered by the retrieved context chunks (recall). A high score means the retrieval pipeline does not miss important supporting evidence.',
+  CONTEXT_RELEVANCE: 'Measures how relevant each individual retrieved chunk is to the query. Similar to CONTEXT_PRECISION but evaluated at the chunk level rather than against a reference answer.',
+  TOOL_CORRECTNESS: 'Measures the correctness of the tool calls made by the agent during task execution: both the choice of tool and the arguments passed. A high score means the agent\'s tool-use strategy matches the expected behavior.',
+  TASK_COMPLETION: 'Measures whether the agent ultimately achieves the user\'s stated goal. It evaluates the reasoning chain, intermediate steps, and final output holistically; a high score means the task was fully accomplished.',
+} as const
+
+type DefaultMetricDescription = typeof DEFAULT_METRIC_DESCRIPTION[keyof typeof DEFAULT_METRIC_DESCRIPTION]
+
+const DEFAULT_METRIC_DESCRIPTION_KEYS = {
+  FAITHFULNESS: 'metrics.builtin.description.faithfulness',
+  ANSWER_RELEVANCY: 'metrics.builtin.description.answerRelevancy',
+  ANSWER_CORRECTNESS: 'metrics.builtin.description.answerCorrectness',
+  SEMANTIC_SIMILARITY: 'metrics.builtin.description.semanticSimilarity',
+  CONTEXT_PRECISION: 'metrics.builtin.description.contextPrecision',
+  CONTEXT_RECALL: 'metrics.builtin.description.contextRecall',
+  CONTEXT_RELEVANCE: 'metrics.builtin.description.contextRelevance',
+  TOOL_CORRECTNESS: 'metrics.builtin.description.toolCorrectness',
+  TASK_COMPLETION: 'metrics.builtin.description.taskCompletion',
+} as const
+
+type DefaultMetricDescriptionKey = typeof DEFAULT_METRIC_DESCRIPTION_KEYS[keyof typeof DEFAULT_METRIC_DESCRIPTION_KEYS]
+
+const DEFAULT_METRIC_DESCRIPTIONS: Record<string, DefaultMetricDescription> = {
+  'faithfulness': DEFAULT_METRIC_DESCRIPTION.FAITHFULNESS,
+  'answer-relevancy': DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
+  'answer-correctness': DEFAULT_METRIC_DESCRIPTION.ANSWER_CORRECTNESS,
+  'semantic-similarity': DEFAULT_METRIC_DESCRIPTION.SEMANTIC_SIMILARITY,
+  'context-precision': DEFAULT_METRIC_DESCRIPTION.CONTEXT_PRECISION,
+  'context-recall': DEFAULT_METRIC_DESCRIPTION.CONTEXT_RECALL,
+  'context-relevance': DEFAULT_METRIC_DESCRIPTION.CONTEXT_RELEVANCE,
+  'tool-correctness': DEFAULT_METRIC_DESCRIPTION.TOOL_CORRECTNESS,
+  'task-completion': DEFAULT_METRIC_DESCRIPTION.TASK_COMPLETION,
+  'relevance': DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
+}
+
+const DEFAULT_METRIC_DESCRIPTION_I18N_KEYS: Record<string, DefaultMetricDescriptionKey> = {
+  'faithfulness': DEFAULT_METRIC_DESCRIPTION_KEYS.FAITHFULNESS,
+  'answer-relevancy': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
+  'answer-correctness': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_CORRECTNESS,
+  'semantic-similarity': DEFAULT_METRIC_DESCRIPTION_KEYS.SEMANTIC_SIMILARITY,
+  'context-precision': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_PRECISION,
+  'context-recall': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RECALL,
+  'context-relevance': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RELEVANCE,
+  'tool-correctness': DEFAULT_METRIC_DESCRIPTION_KEYS.TOOL_CORRECTNESS,
+  'task-completion': DEFAULT_METRIC_DESCRIPTION_KEYS.TASK_COMPLETION,
+  'relevance': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
+}
+
+const normalizeMetricId = (metricId: string) => metricId.trim().toLowerCase().replace(/_/g, '-')
+
+export const getDefaultMetricDescription = (metricId: string) => {
+  return DEFAULT_METRIC_DESCRIPTIONS[normalizeMetricId(metricId)] ?? ''
+}
+
+export const getDefaultMetricDescriptionI18nKey = (metricId: string) => {
+  return DEFAULT_METRIC_DESCRIPTION_I18N_KEYS[normalizeMetricId(metricId)] ?? null
+}
+
+export const getTranslatedMetricDescription = (
+  t: TFunction<'evaluation'>,
+  metricId: string,
+  fallbackDescription = '',
+) => {
+  const defaultDescription = fallbackDescription || getDefaultMetricDescription(metricId)
+  const descriptionI18nKey = getDefaultMetricDescriptionI18nKey(metricId)
+
+  if (!descriptionI18nKey)
+    return defaultDescription
+
+  return t(descriptionI18nKey, { defaultValue: defaultDescription })
+}
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
index 9425672b93..61f6d57b39 100644
--- a/web/app/components/evaluation/mock.ts
+++ b/web/app/components/evaluation/mock.ts
@@ -4,6 +4,7 @@ import type {
   EvaluationResourceType,
   MetricOption,
 } from './types'
+import { getDefaultMetricDescription } from './default-metric-descriptions'
 
 const judgeModels = [
   {
@@ -27,19 +28,19 @@ const builtinMetrics: MetricOption[] = [
   {
     id: 'answer-correctness',
     label: 'Answer Correctness',
-    description: 'Compares the response with the expected answer and scores factual alignment.',
+    description: getDefaultMetricDescription('answer-correctness'),
     valueType: 'number',
   },
   {
     id: 'faithfulness',
     label: 'Faithfulness',
-    description: 'Checks whether the answer stays grounded in the retrieved evidence.',
+    description: getDefaultMetricDescription('faithfulness'),
     valueType: 'number',
   },
   {
     id: 'relevance',
     label: 'Relevance',
-    description: 'Evaluates how directly the answer addresses the original request.',
+    description: getDefaultMetricDescription('relevance'),
     valueType: 'number',
   },
   {
@@ -66,19 +67,19 @@ const pipelineBuiltinMetrics: MetricOption[] = [
   {
     id: 'context-precision',
     label: 'Context Precision',
-    description: 'Measures whether retrieved chunks stay tightly aligned to the request.',
+    description: getDefaultMetricDescription('context-precision'),
     valueType: 'number',
   },
   {
     id: 'context-recall',
     label: 'Context Recall',
-    description: 'Checks whether the retrieval result includes the evidence needed to answer.',
+    description: getDefaultMetricDescription('context-recall'),
     valueType: 'number',
   },
   {
     id: 'context-relevance',
     label: 'Context Relevance',
-    description: 'Scores how useful the retrieved context is for downstream generation.',
+    description: getDefaultMetricDescription('context-relevance'),
     valueType: 'number',
   },
 ]
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
index c34e643baa..b8903442d8 100644
--- a/web/app/components/evaluation/store-utils.ts
+++ b/web/app/components/evaluation/store-utils.ts
@@ -20,6 +20,7 @@ import type {
   EvaluationRunRequest,
   NodeInfo,
 } from '@/types/evaluation'
+import { getDefaultMetricDescription } from './default-metric-descriptions'
 import { getEvaluationMockConfig } from './mock'
 import {
   buildConditionMetricOptions,
@@ -51,7 +52,7 @@ const resolveMetricOption = (resourceType: EvaluationResourceType, metricId: str
   return config.builtinMetrics.find(metric => metric.id === metricId) ?? {
     id: metricId,
     label: humanizeMetricId(metricId),
-    description: '',
+    description: getDefaultMetricDescription(metricId),
     valueType: 'number',
   }
 }
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
index 57535ee836..9802bc904c 100644
--- a/web/i18n/en-US/evaluation.json
+++ b/web/i18n/en-US/evaluation.json
@@ -83,6 +83,15 @@
   "metrics.addCustom": "Add Custom Metrics",
   "metrics.addNode": "Add Node",
   "metrics.added": "Added",
+  "metrics.builtin.description.answerCorrectness": "Measures the factual accuracy and completeness of the model's answer relative to a ground-truth reference. It combines semantic similarity with key-fact coverage, so both meaning and content matter.",
+  "metrics.builtin.description.answerRelevancy": "Measures how well the model's response addresses the user's question. A high score means the answer stays on-topic; a low score indicates irrelevant content or a failure to answer the actual question.",
+  "metrics.builtin.description.contextPrecision": "Measures the proportion of retrieved context chunks that are actually relevant to the question (precision). A high score means the retrieval pipeline returns little noise.",
+  "metrics.builtin.description.contextRecall": "Measures the proportion of ground-truth information that is covered by the retrieved context chunks (recall). A high score means the retrieval pipeline does not miss important supporting evidence.",
+  "metrics.builtin.description.contextRelevance": "Measures how relevant each individual retrieved chunk is to the query. Similar to CONTEXT_PRECISION but evaluated at the chunk level rather than against a reference answer.",
+  "metrics.builtin.description.faithfulness": "Measures whether every claim in the model's response is grounded in the provided retrieved context. A high score means the answer contains no hallucinated content; each statement can be traced back to a passage in the context.",
+  "metrics.builtin.description.semanticSimilarity": "Measures the cosine similarity between the model's response and the reference answer in an embedding space. It evaluates whether the two texts convey the same meaning, independent of factual correctness.",
+  "metrics.builtin.description.taskCompletion": "Measures whether the agent ultimately achieves the user's stated goal. It evaluates the reasoning chain, intermediate steps, and final output holistically; a high score means the task was fully accomplished.",
+  "metrics.builtin.description.toolCorrectness": "Measures the correctness of the tool calls made by the agent during task execution: both the choice of tool and the arguments passed. A high score means the agent's tool-use strategy matches the expected behavior.",
   "metrics.collapseNodes": "Collapse nodes",
   "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
   "metrics.custom.footerDescription": "Connect your published evaluation workflows",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
index e02558387f..0f499426e4 100644
--- a/web/i18n/zh-Hans/evaluation.json
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -83,6 +83,15 @@
   "metrics.addCustom": "添加自定义指标",
   "metrics.addNode": "添加节点",
   "metrics.added": "已添加",
+  "metrics.builtin.description.answerCorrectness": "衡量模型回答相对于标准答案的事实准确性与完整性。它结合了语义相似度与关键信息覆盖情况，因此不仅关注表达含义，也关注内容是否完整准确。",
+  "metrics.builtin.description.answerRelevancy": "衡量模型回答与用户问题的贴合程度。高分表示回答始终围绕问题展开；低分表示内容偏题，或没有真正回答用户的实际问题。",
+  "metrics.builtin.description.contextPrecision": "衡量检索出的上下文片段中，实际与问题相关的内容占比（Precision）。高分表示检索流程带回的噪声较少。",
+  "metrics.builtin.description.contextRecall": "衡量标准答案所需的真实信息，有多少被检索出的上下文片段覆盖到（Recall）。高分表示检索流程没有遗漏重要的支撑证据。",
+  "metrics.builtin.description.contextRelevance": "衡量每一个被检索出的上下文片段与查询的相关程度。它与 CONTEXT_PRECISION 类似，但评估粒度在单个 chunk 层面，而不是相对于参考答案整体评估。",
+  "metrics.builtin.description.faithfulness": "衡量模型回答中的每一个陈述，是否都能从提供的检索上下文中找到依据。高分表示回答中没有幻觉内容，每一条表述都可以追溯到上下文中的某个片段。",
+  "metrics.builtin.description.semanticSimilarity": "衡量模型回答与参考答案在向量语义空间中的余弦相似度。它评估的是两段文本是否表达了相同含义，而不直接判断事实是否正确。",
+  "metrics.builtin.description.taskCompletion": "衡量 Agent 是否最终完成了用户明确提出的目标。它会整体评估推理链路、中间步骤和最终输出；高分表示任务已被完整达成。",
+  "metrics.builtin.description.toolCorrectness": "衡量 Agent 在任务执行过程中发起的工具调用是否正确，包括工具选择本身以及传入参数是否合理。高分表示 Agent 的工具使用策略符合预期行为。",
   "metrics.custom.description": "选择评测工作流并完成变量映射后即可运行测试。",
   "metrics.custom.mappingTitle": "变量映射",
   "metrics.custom.mappingWarning": "请先完成工作流选择和所有变量映射，再运行批量测试。",

From 46bc76bae3359bb2452f4d8e914234c12d8fa08d Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 13 Apr 2026 17:22:04 +0800
Subject: [PATCH 092/108] feat(web): add evaluation cell in workflow log

---
 .../__tests__/evaluation-cell.spec.tsx        |  75 +++++++++++++
 .../app/workflow-log/__tests__/index.spec.tsx |   1 +
 .../app/workflow-log/__tests__/list.spec.tsx  |  35 +++++-
 .../app/workflow-log/evaluation-cell.tsx      | 100 ++++++++++++++++++
 web/app/components/app/workflow-log/list.tsx  |  39 +++----
 web/i18n/en-US/app-log.json                   |   1 +
 web/i18n/zh-Hans/app-log.json                 |   1 +
 web/models/log.ts                             |  10 ++
 8 files changed, 241 insertions(+), 21 deletions(-)
 create mode 100644 web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx
 create mode 100644 web/app/components/app/workflow-log/evaluation-cell.tsx

diff --git a/web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx b/web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx
new file mode 100644
index 0000000000..e51ffdaaac
--- /dev/null
+++ b/web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx
@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import EvaluationCell from '../evaluation-cell'
+
+describe('EvaluationCell', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render a placeholder when evaluation data is empty', () => {
+      render(<EvaluationCell evaluation={[]} />)
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'appLog.table.header.evaluation' })).not.toBeInTheDocument()
+    })
+
+    it('should render a trigger button when evaluation data is available', () => {
+      render(
+        <EvaluationCell
+          evaluation={[{
+            name: 'Faithfulness',
+            value: 0.98,
+          }]}
+        />,
+      )
+
+      expect(screen.getByRole('button', { name: 'appLog.table.header.evaluation' })).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should render evaluation details when clicking the trigger', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <EvaluationCell
+          evaluation={[{
+            name: 'Faithfulness',
+            value: 0.98,
+            nodeInfo: {
+              node_id: 'node-1',
+              title: 'Knowledge Retrieval',
+              type: 'knowledge-retrieval',
+            },
+          }]}
+        />,
+      )
+
+      await user.click(screen.getByRole('button', { name: 'appLog.table.header.evaluation' }))
+
+      expect(await screen.findByTestId('workflow-log-evaluation-popover')).toBeInTheDocument()
+      expect(screen.getByText('Faithfulness')).toBeInTheDocument()
+      expect(screen.getByText('0.98')).toBeInTheDocument()
+      expect(screen.getByText('Knowledge Retrieval')).toBeInTheDocument()
+    })
+
+    it('should render boolean values using readable text', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <EvaluationCell
+          evaluation={[{
+            name: 'Correctness',
+            value: true,
+          }]}
+        />,
+      )
+
+      await user.click(screen.getByRole('button', { name: 'appLog.table.header.evaluation' }))
+
+      expect(await screen.findByText('True')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/__tests__/index.spec.tsx b/web/app/components/app/workflow-log/__tests__/index.spec.tsx
index 1fe3db30db..4414843ed0 100644
--- a/web/app/components/app/workflow-log/__tests__/index.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/index.spec.tsx
@@ -215,6 +215,7 @@ const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): W
   },
   created_at: Date.now(),
   ...overrides,
+  evaluation: overrides.evaluation ?? [],
 })
 
 const createMockLogsResponse = (
diff --git a/web/app/components/app/workflow-log/__tests__/list.spec.tsx b/web/app/components/app/workflow-log/__tests__/list.spec.tsx
index 356aaa5a48..1246096cf5 100644
--- a/web/app/components/app/workflow-log/__tests__/list.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/list.spec.tsx
@@ -146,6 +146,7 @@ const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): W
     email: 'test@example.com',
   },
   created_at: Date.now(),
+  evaluation: [],
   ...overrides,
 })
 
@@ -216,6 +217,7 @@ describe('WorkflowAppLogList', () => {
       expect(screen.getByText('appLog.table.header.runtime')).toBeInTheDocument()
       expect(screen.getByText('appLog.table.header.tokens')).toBeInTheDocument()
       expect(screen.getByText('appLog.table.header.user')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.evaluation')).toBeInTheDocument()
     })
 
     it('should render trigger column for workflow apps', () => {
@@ -404,8 +406,9 @@ describe('WorkflowAppLogList', () => {
 
       // Arrow should rotate (indicated by class change)
       // The sort icon should have rotate-180 class for ascending
-      const sortIcon = startTimeHeader.closest('div')?.querySelector('svg')
+      const sortIcon = startTimeHeader.closest('div')?.querySelector('.i-heroicons-arrow-down')
       expect(sortIcon).toBeInTheDocument()
+      expect(sortIcon).toHaveClass('rotate-180')
     })
 
     it('should render sort arrow icon', () => {
@@ -416,7 +419,7 @@ describe('WorkflowAppLogList', () => {
       )
 
       // Check for ArrowDownIcon presence
-      const sortArrow = container.querySelector('svg.ml-0\\.5')
+      const sortArrow = container.querySelector('.i-heroicons-arrow-down')
       expect(sortArrow).toBeInTheDocument()
     })
   })
@@ -491,6 +494,34 @@ describe('WorkflowAppLogList', () => {
       // The row should have the selected class
       expect(dataRow).toHaveClass('bg-background-default-hover')
     })
+
+    it('should open evaluation popover without opening drawer when clicking evaluation trigger', async () => {
+      const user = userEvent.setup()
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          evaluation: [{
+            name: 'Faithfulness',
+            value: 0.98,
+            nodeInfo: {
+              node_id: 'node-1',
+              title: 'Knowledge Retrieval',
+              type: 'knowledge-retrieval',
+            },
+          }],
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      await user.click(screen.getByRole('button', { name: 'appLog.table.header.evaluation' }))
+
+      expect(await screen.findByTestId('workflow-log-evaluation-popover')).toBeInTheDocument()
+      expect(screen.getByText('Faithfulness')).toBeInTheDocument()
+      expect(screen.getByText('Knowledge Retrieval')).toBeInTheDocument()
+      expect(screen.queryByRole('heading', { name: 'appLog.runDetail.workflowTitle' })).not.toBeInTheDocument()
+    })
   })
 
   // --------------------------------------------------------------------------
diff --git a/web/app/components/app/workflow-log/evaluation-cell.tsx b/web/app/components/app/workflow-log/evaluation-cell.tsx
new file mode 100644
index 0000000000..8cb3770681
--- /dev/null
+++ b/web/app/components/app/workflow-log/evaluation-cell.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import type { EvaluationLogItem } from '@/models/log'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
+import { cn } from '@/utils/classnames'
+
+type EvaluationCellProps = {
+  evaluation: EvaluationLogItem[]
+}
+
+const formatEvaluationValue = (value: EvaluationLogItem['value']) => {
+  if (typeof value === 'boolean')
+    return value ? 'True' : 'False'
+
+  return String(value)
+}
+
+const EvaluationCell = ({
+  evaluation,
+}: EvaluationCellProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  if (!evaluation.length) {
+    return (
+      <div className="flex items-center justify-center px-2 py-3 system-sm-regular text-text-quaternary">
+        -
+      </div>
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={(
+          <button
+            type="button"
+            aria-label={t('table.header.evaluation', { ns: 'appLog' })}
+            data-testid="workflow-log-evaluation-trigger"
+            className={cn(
+              'flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary transition-colors',
+              'hover:bg-state-base-hover hover:text-text-secondary',
+              open && 'bg-state-base-hover text-text-secondary',
+            )}
+          >
+            <span aria-hidden="true" className="i-ri-eye-line h-4 w-4" />
+          </button>
+        )}
+      />
+      <PopoverContent
+        placement="left-start"
+        sideOffset={12}
+        popupClassName="w-[320px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]"
+      >
+        <div data-testid="workflow-log-evaluation-popover" className="max-h-[320px] overflow-y-auto bg-components-panel-bg">
+          {evaluation.map((item, index) => {
+            const nodeVisual = item.nodeInfo ? getNodeVisual(item.nodeInfo) : null
+            const nodeToneClasses = nodeVisual ? getToneClasses(nodeVisual.tone) : null
+
+            return (
+              <div
+                key={`${item.name}-${index}`}
+                className={cn(
+                  'grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-4 py-3',
+                  index !== evaluation.length - 1 && 'border-b border-divider-subtle',
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="truncate system-sm-medium text-text-secondary">{item.name}</div>
+                  {item.nodeInfo && nodeVisual && nodeToneClasses && (
+                    <div className="mt-1 flex min-w-0 items-center gap-1.5">
+                      <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                        <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                      </div>
+                      <span className="truncate system-xs-regular text-text-tertiary">
+                        {item.nodeInfo.title}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <div className="max-w-[120px] text-right system-sm-regular wrap-break-word text-text-secondary">
+                  {formatEvaluationValue(item.value)}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default EvaluationCell
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 18ec914c7d..36033db534 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -2,8 +2,6 @@
 import type { FC } from 'react'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunTriggeredFrom } from '@/models/log'
 import type { App } from '@/types/app'
-import { ArrowDownIcon } from '@heroicons/react/24/outline'
-import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Drawer from '@/app/components/base/drawer'
@@ -14,6 +12,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import DetailPanel from './detail'
+import EvaluationCell from './evaluation-cell'
 import TriggerByDisplay from './trigger-by-display'
 
 type ILogs = {
@@ -59,7 +58,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
   const statusTdRender = (status: string) => {
     if (status === 'succeeded') {
       return (
-        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
           <Indicator color="green" />
           <span className="text-util-colors-green-green-600">Success</span>
         </div>
@@ -67,7 +66,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'failed') {
       return (
-        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
           <Indicator color="red" />
           <span className="text-util-colors-red-red-600">Failure</span>
         </div>
@@ -75,7 +74,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'stopped') {
       return (
-        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
           <Indicator color="yellow" />
           <span className="text-util-colors-warning-warning-600">Stop</span>
         </div>
@@ -83,7 +82,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'paused') {
       return (
-        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
           <Indicator color="yellow" />
           <span className="text-util-colors-warning-warning-600">Pending</span>
         </div>
@@ -91,7 +90,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'running') {
       return (
-        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
           <Indicator color="blue" />
           <span className="text-util-colors-blue-light-blue-light-600">Running</span>
         </div>
@@ -99,7 +98,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
     }
     if (status === 'partial-succeeded') {
       return (
-        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
           <Indicator color="green" />
           <span className="text-util-colors-green-green-600">Partial Success</span>
         </div>
@@ -118,23 +117,22 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
 
   return (
     <div className="overflow-x-auto">
-      <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
+      <table className={cn('mt-2 w-full min-w-[560px] border-collapse border-0')}>
         <thead className="system-xs-medium-uppercase text-text-tertiary">
           <tr>
-            <td className="w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1"></td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+            <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap"></td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
               <div className="flex cursor-pointer items-center hover:text-text-secondary" onClick={handleSort}>
                 {t('table.header.startTime', { ns: 'appLog' })}
-                <ArrowDownIcon
-                  className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}
-                />
+                <span className={cn('i-heroicons-arrow-down', 'ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')} />
               </div>
             </td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.status', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.runtime', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.tokens', { ns: 'appLog' })}</td>
-            <td className={cn('whitespace-nowrap bg-background-section-burn py-1.5 pl-3', !isWorkflow ? 'rounded-r-lg' : '')}>{t('table.header.user', { ns: 'appLog' })}</td>
-            {isWorkflow && <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.triggered_from', { ns: 'appLog' })}</td>}
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.status', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.runtime', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.tokens', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.user', { ns: 'appLog' })}</td>
+            <td className={cn('bg-background-section-burn py-1.5 px-3 whitespace-nowrap text-center', !isWorkflow ? 'rounded-r-lg' : '')}>{t('table.header.evaluation', { ns: 'appLog' })}</td>
+            {isWorkflow && <td className="rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.triggered_from', { ns: 'appLog' })}</td>}
           </tr>
         </thead>
         <tbody className="system-sm-regular text-text-secondary">
@@ -172,6 +170,9 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
                     {endUser}
                   </div>
                 </td>
+                <td className="p-2 pr-2" onClick={event => event.stopPropagation()}>
+                  <EvaluationCell evaluation={log.evaluation} />
+                </td>
                 {isWorkflow && (
                   <td className="p-3 pr-2">
                     <TriggerByDisplay triggeredFrom={log.workflow_run.triggered_from as WorkflowRunTriggeredFrom} triggerMetadata={log.details?.trigger_metadata} />
diff --git a/web/i18n/en-US/app-log.json b/web/i18n/en-US/app-log.json
index 3ffb8ba99e..7cd62958e4 100644
--- a/web/i18n/en-US/app-log.json
+++ b/web/i18n/en-US/app-log.json
@@ -54,6 +54,7 @@
   "table.empty.noOutput": "No output",
   "table.header.adminRate": "Op. Rate",
   "table.header.endUser": "End User or Account",
+  "table.header.evaluation": "EVALUATION",
   "table.header.input": "Input",
   "table.header.messageCount": "Message Count",
   "table.header.output": "Output",
diff --git a/web/i18n/zh-Hans/app-log.json b/web/i18n/zh-Hans/app-log.json
index ef043d1b70..0a825da172 100644
--- a/web/i18n/zh-Hans/app-log.json
+++ b/web/i18n/zh-Hans/app-log.json
@@ -54,6 +54,7 @@
   "table.empty.noOutput": "无输出",
   "table.header.adminRate": "管理员反馈",
   "table.header.endUser": "用户或账户",
+  "table.header.evaluation": "评测",
   "table.header.input": "输入",
   "table.header.messageCount": "消息数",
   "table.header.output": "输出",
diff --git a/web/models/log.ts b/web/models/log.ts
index f9cb13ab8e..e41b66821f 100644
--- a/web/models/log.ts
+++ b/web/models/log.ts
@@ -257,6 +257,15 @@ export type EndUserInfo = {
   is_anonymous: boolean
   session_id: string
 }
+export type EvaluationLogItem = {
+  name: string
+  value: string | number | boolean
+  nodeInfo?: {
+    node_id: string
+    type: string
+    title: string
+  }
+}
 export type WorkflowAppLogDetail = {
   id: string
   workflow_run: WorkflowRunDetail
@@ -267,6 +276,7 @@ export type WorkflowAppLogDetail = {
   created_by_end_user?: EndUserInfo
   created_at: number
   read_at?: number
+  evaluation: EvaluationLogItem[]
 }
 export type WorkflowLogsResponse = {
   data: Array<WorkflowAppLogDetail>

From 7f5bbe0ee3a06f15dc1556760e16aa3e01db74a7 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 15 Apr 2026 15:23:50 +0800
Subject: [PATCH 093/108] fix(web): button import

---
 .../frontend-testing/references/mocking.md     |  4 ++--
 .../components/app/app-publisher/sections.tsx  |  2 +-
 .../components/batch-test-panel/index.tsx      |  2 +-
 .../batch-test-panel/input-fields-tab.tsx      |  2 +-
 .../input-fields/upload-run-popover.tsx        |  2 +-
 .../conditions-section/condition-group.tsx     |  2 +-
 .../metric-section/builtin-metric-card.tsx     |  2 +-
 .../metric-section/custom-metric-card.tsx      |  2 +-
 .../components/metric-selector/index.tsx       | 11 +++++------
 .../components/metric-selector/types.ts        |  1 -
 .../pipeline/pipeline-batch-actions.tsx        |  2 +-
 .../snippets/components/panel/index.tsx        |  2 +-
 .../snippets/components/publish-menu.tsx       |  2 +-
 .../components/snippet-import-dsl-dialog.tsx   | 18 +++++++++---------
 .../snippets/components/snippet-run-panel.tsx  |  2 +-
 .../workflow/block-selector/snippets/index.tsx |  4 ++--
 .../snippets/snippet-empty-state.tsx           |  2 +-
 .../workflow/create-snippet-dialog.tsx         |  2 +-
 18 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/.agents/skills/frontend-testing/references/mocking.md b/.agents/skills/frontend-testing/references/mocking.md
index f58377c4a5..82d9c21cbb 100644
--- a/.agents/skills/frontend-testing/references/mocking.md
+++ b/.agents/skills/frontend-testing/references/mocking.md
@@ -20,11 +20,11 @@
 ```typescript
 // ❌ WRONG: Don't mock base components
 vi.mock('@/app/components/base/loading', () => () => <div>Loading</div>)
-vi.mock('@/app/components/base/button', () => ({ children }: any) => <button>{children}</button>)
+vi.mock('@/app/components/base/ui/button', () => ({ children }: any) => <button>{children}</button>)
 
 // ✅ CORRECT: Import and use real base components
 import Loading from '@/app/components/base/loading'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 // They will render normally in tests
 ```
 
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index 6d02c67e92..54fbcee672 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -234,7 +234,7 @@ export const PublisherSummarySection = ({
                       />
                       <TooltipContent
                         placement="top"
-                        popupClassName="w-[180px]"
+                        className="w-[180px]"
                       >
                         {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
                       </TooltipContent>
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 11af19f4d5..895eeb3f59 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -2,7 +2,7 @@
 
 import type { BatchTestTab, EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
index 8d147dbedf..27b1b062cb 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -1,6 +1,6 @@
 import type { EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { getEvaluationMockConfig } from '../../mock'
 import InputFieldsRequirements from './input-fields/input-fields-requirements'
 import UploadRunPopover from './input-fields/upload-run-popover'
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
index 3a54d9af0a..0be65bd654 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -2,7 +2,7 @@ import type { ChangeEvent, DragEvent } from 'react'
 import type { InputField } from './input-fields-utils'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Popover,
   PopoverContent,
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 7cb73f1ca7..1f2ac8de43 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -8,7 +8,7 @@ import type {
 } from '../../types'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/base/input'
 import {
   Select,
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
index 8bdba64d21..3fa84c946a 100644
--- a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -4,7 +4,7 @@ import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import type { NodeInfo } from '@/types/evaluation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
index bf86f0e0ba..3e06b0a637 100644
--- a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -3,7 +3,7 @@
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
 import CustomMetricEditorCard from '../custom-metric-editor'
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
index 4870952b9b..2b690ee94c 100644
--- a/web/app/components/evaluation/components/metric-selector/index.tsx
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -4,8 +4,8 @@ import type { ChangeEvent } from 'react'
 import type { MetricSelectorProps } from './types'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Popover,
   PopoverContent,
@@ -21,7 +21,6 @@ import { useMetricSelectorData } from './use-metric-selector-data'
 const MetricSelector = ({
   resourceType,
   resourceId,
-  triggerVariant = 'ghost-accent',
   triggerClassName,
   triggerStyle = 'button',
 }: MetricSelectorProps) => {
@@ -69,14 +68,14 @@ const MetricSelector = ({
         render={(
           triggerStyle === 'text'
             ? (
-                <button type="button" className={cn('inline-flex items-center text-text-accent system-sm-medium', triggerClassName)}>
-                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                <button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('metrics.add')}
                 </button>
               )
             : (
-                <Button variant={triggerVariant} className={triggerClassName}>
-                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                <Button variant="ghost-accent" className={triggerClassName}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('metrics.add')}
                 </Button>
               )
diff --git a/web/app/components/evaluation/components/metric-selector/types.ts b/web/app/components/evaluation/components/metric-selector/types.ts
index ff51bd57af..102329701e 100644
--- a/web/app/components/evaluation/components/metric-selector/types.ts
+++ b/web/app/components/evaluation/components/metric-selector/types.ts
@@ -2,7 +2,6 @@ import type { EvaluationMetric, EvaluationResourceProps, MetricOption } from '..
 import type { NodeInfo } from '@/types/evaluation'
 
 export type MetricSelectorProps = EvaluationResourceProps & {
-  triggerVariant?: 'primary' | 'warning' | 'secondary' | 'secondary-accent' | 'ghost' | 'ghost-accent' | 'tertiary'
   triggerClassName?: string
   triggerStyle?: 'button' | 'text'
 }
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
index 086de8f8da..2cc673aa2c 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
@@ -3,7 +3,7 @@
 import type { EvaluationResourceProps } from '../../types'
 import type { InputField } from '../batch-test-panel/input-fields/input-fields-utils'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource } from '../../store'
 import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
diff --git a/web/app/components/snippets/components/panel/index.tsx b/web/app/components/snippets/components/panel/index.tsx
index 96de81d2ee..a87d59e03a 100644
--- a/web/app/components/snippets/components/panel/index.tsx
+++ b/web/app/components/snippets/components/panel/index.tsx
@@ -4,7 +4,7 @@ import type { SortableItem } from '@/app/components/rag-pipeline/components/pane
 import type { SnippetInputField } from '@/models/snippet'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import FieldListContainer from '@/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container'
 
 type SnippetInputFieldPanelProps = {
diff --git a/web/app/components/snippets/components/publish-menu.tsx b/web/app/components/snippets/components/publish-menu.tsx
index 7ef3d43c86..0a10f7606c 100644
--- a/web/app/components/snippets/components/publish-menu.tsx
+++ b/web/app/components/snippets/components/publish-menu.tsx
@@ -2,7 +2,7 @@
 
 import type { SnippetDetailUIModel } from '@/models/snippet'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 
 const PublishMenu = ({
diff --git a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
index b9c8dc88ad..832372315e 100644
--- a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
+++ b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
@@ -4,8 +4,8 @@ import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import {
@@ -163,14 +163,14 @@ const SnippetImportDSLDialog = ({
     <>
       <Dialog open={show} onOpenChange={open => !open && onClose()}>
         <DialogContent className="w-[520px] p-0">
-          <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+          <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('importFromDSL', { ns: 'app' })}
             </DialogTitle>
-            <DialogCloseButton className="right-5 top-6 h-8 w-8" />
+            <DialogCloseButton className="top-6 right-5 h-8 w-8" />
           </div>
 
-          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
+          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
             {[
               { key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
               { key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
@@ -202,7 +202,7 @@ const SnippetImportDSLDialog = ({
             )}
             {currentTab === SnippetImportDSLTab.FromURL && (
               <div>
-                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
+                <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -232,10 +232,10 @@ const SnippetImportDSLDialog = ({
       <Dialog open={showVersionMismatchDialog} onOpenChange={open => !open && setShowVersionMismatchDialog(false)}>
         <DialogContent className="w-[480px]">
           <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
             </DialogTitle>
-            <div className="flex grow flex-col text-text-secondary system-md-regular">
+            <div className="flex grow flex-col system-md-regular text-text-secondary">
               <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
               <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
               <br />
@@ -253,7 +253,7 @@ const SnippetImportDSLDialog = ({
             <Button variant="secondary" disabled={isImporting} onClick={() => setShowVersionMismatchDialog(false)}>
               {t('newApp.Cancel', { ns: 'app' })}
             </Button>
-            <Button variant="primary" destructive disabled={isImporting} onClick={handleConfirmImport}>
+            <Button variant="primary" tone="destructive" disabled={isImporting} onClick={handleConfirmImport}>
               {t('newApp.Confirm', { ns: 'app' })}
             </Button>
           </div>
diff --git a/web/app/components/snippets/components/snippet-run-panel.tsx b/web/app/components/snippets/components/snippet-run-panel.tsx
index 912342d732..cf9d91496c 100644
--- a/web/app/components/snippets/components/snippet-run-panel.tsx
+++ b/web/app/components/snippets/components/snippet-run-panel.tsx
@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
 import { getProcessedInputs } from '@/app/components/base/chat/chat/utils'
 import Loading from '@/app/components/base/loading'
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
index bf63f3b30e..b936ee7257 100644
--- a/web/app/components/workflow/block-selector/snippets/index.tsx
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -52,7 +52,7 @@ const LoadingSkeleton = () => {
           </div>
         ))}
       </div>
-      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-components-panel-bg-transparent to-background-default-subtle" />
+      <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-components-panel-bg-transparent to-background-default-subtle" />
     </div>
   )
 }
@@ -147,7 +147,7 @@ const Snippets = ({
                         <TooltipContent
                           placement="left-start"
                           variant="plain"
-                          popupClassName="!bg-transparent !p-0"
+                          className="bg-transparent! p-0!"
                         >
                           <SnippetDetailCard snippet={item} />
                         </TooltipContent>
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
index f0c00115c8..91ae9ae1ae 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type SnippetEmptyStateProps = {
   onCreate: () => void
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
index edd362d7d1..182fddfcf4 100644
--- a/web/app/components/workflow/create-snippet-dialog.tsx
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -8,7 +8,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import { Dialog, DialogCloseButton, DialogContent, DialogPortal, DialogTitle } from '@/app/components/base/ui/dialog'

From f9b76f0f52c252d68c236be8c04e1030421f784a Mon Sep 17 00:00:00 2001
From: FFXN <31929997+FFXN@users.noreply.github.com>
Date: Wed, 15 Apr 2026 16:09:40 +0800
Subject: [PATCH 094/108] feat: evaluation (#35251)

Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Yansong Zhang <916125788@qq.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: hj24 <mambahj24@gmail.com>
Co-authored-by: hj24 <huangjian@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 api/configs/feature/__init__.py               |  27 +
 api/controllers/console/__init__.py           |  11 +
 api/controllers/console/app/app.py            |  21 +
 api/controllers/console/app/workflow.py       | 116 ++-
 api/controllers/console/billing/billing.py    |  39 +
 api/controllers/console/datasets/datasets.py  | 447 +++++++-
 .../console/evaluation/__init__.py            |   1 +
 .../console/evaluation/evaluation.py          | 869 +++++++++++++++
 api/controllers/console/snippets/payloads.py  | 135 +++
 .../console/snippets/snippet_workflow.py      | 534 ++++++++++
 .../snippet_workflow_draft_variable.py        | 319 ++++++
 api/controllers/console/workspace/snippets.py | 380 +++++++
 api/core/app/apps/workflow/app_generator.py   |  23 +-
 api/core/evaluation/__init__.py               |   0
 .../evaluation/base_evaluation_instance.py    | 279 +++++
 api/core/evaluation/entities/__init__.py      |   0
 api/core/evaluation/entities/config_entity.py |  27 +
 .../evaluation/entities/evaluation_entity.py  | 226 ++++
 .../evaluation/entities/judgment_entity.py    |  96 ++
 api/core/evaluation/evaluation_manager.py     |  61 ++
 api/core/evaluation/frameworks/__init__.py    |   0
 .../frameworks/deepeval/__init__.py           |   1 +
 .../frameworks/deepeval/deepeval_evaluator.py | 299 ++++++
 .../evaluation/frameworks/ragas/__init__.py   |   0
 .../frameworks/ragas/ragas_evaluator.py       | 312 ++++++
 .../frameworks/ragas/ragas_model_wrapper.py   |  48 +
 api/core/evaluation/judgment/__init__.py      |   0
 api/core/evaluation/judgment/processor.py     | 160 +++
 api/core/evaluation/runners/__init__.py       |  52 +
 .../runners/agent_evaluation_runner.py        |  62 ++
 .../runners/base_evaluation_runner.py         |  51 +
 .../runners/llm_evaluation_runner.py          |  83 ++
 .../runners/retrieval_evaluation_runner.py    |  61 ++
 .../runners/snippet_evaluation_runner.py      |  68 ++
 .../runners/workflow_evaluation_runner.py     |  62 ++
 api/enums/quota_type.py                       | 188 ----
 api/fields/snippet_fields.py                  |  45 +
 api/fields/workflow_app_log_fields.py         |   1 +
 ...5e80d2380_add_customized_snippets_table.py |  83 ++
 ...0001-a1b2c3d4e5f6_add_evaluation_tables.py | 116 +++
 ...1721-4c60d8d3ee74_merge_migration_heads.py |  25 +
 api/models/__init__.py                        |  15 +
 api/models/evaluation.py                      | 205 ++++
 api/models/snippet.py                         | 101 ++
 api/models/workflow.py                        |   2 +
 api/pyproject.toml                            |   6 +
 api/services/app_generate_service.py          |   6 +-
 api/services/async_workflow_service.py        |  25 +-
 api/services/billing_service.py               | 150 ++-
 api/services/errors/evaluation.py             |  21 +
 api/services/evaluation_service.py            | 985 ++++++++++++++++++
 api/services/feature_service.py               |   2 +-
 api/services/quota_service.py                 | 233 +++++
 api/services/snippet_dsl_service.py           | 555 ++++++++++
 api/services/snippet_generate_service.py      | 421 ++++++++
 api/services/snippet_service.py               | 608 +++++++++++
 api/services/trigger/webhook_service.py       |  20 +-
 api/services/workflow_app_service.py          |  66 +-
 .../workflow_draft_variable_service.py        |  12 +-
 api/services/workflow_service.py              | 194 +++-
 api/tasks/evaluation_task.py                  | 541 ++++++++++
 api/tasks/trigger_processing_tasks.py         |   8 +-
 api/tasks/workflow_schedule_tasks.py          |   6 +-
 .../services/test_app_generate_service.py     |  23 +-
 .../trigger/test_trigger_e2e.py               |   4 +-
 .../evaluation/judgment/test_processor.py     | 145 +++
 .../runners/test_base_evaluation_runner.py    |  78 ++
 api/tests/unit_tests/enums/__init__.py        |   0
 api/tests/unit_tests/enums/test_quota_type.py | 349 +++++++
 .../services/test_app_generate_service.py     |  12 +-
 .../services/test_async_workflow_service.py   |  23 +-
 .../services/test_billing_service.py          | 160 ++-
 .../services/test_webhook_service.py          | 769 ++++++++++++++
 .../unit_tests/tasks/test_evaluation_task.py  |  97 ++
 api/uv.lock                                   | 494 ++++++++-
 web/app/components/app-initializer.tsx        |   3 +
 .../app-list/__tests__/index.spec.tsx         |  13 +-
 .../app/create-app-dialog/app-list/index.tsx  |  11 +-
 .../create-app-modal/__tests__/index.spec.tsx |  13 +-
 .../components/app/create-app-modal/index.tsx |   8 +-
 .../__tests__/index.spec.tsx                  |  21 +-
 .../app/create-from-dsl-modal/index.tsx       |   9 +-
 .../components/apps/__tests__/index.spec.tsx  | 140 ++-
 web/app/components/apps/index.tsx             |  25 +-
 .../base/amplitude/AmplitudeProvider.tsx      |   6 +-
 .../__tests__/cookie-recorder.spec.tsx        |  18 +
 .../billing/partner-stack/cookie-recorder.tsx |   4 +-
 .../billing/partner-stack/index.tsx           |   4 +-
 .../billing/partner-stack/use-ps-info.ts      |  16 +-
 .../explore/app-list/__tests__/index.spec.tsx |  42 +-
 web/app/components/explore/app-list/index.tsx |  25 +-
 web/app/signup/set-password/page.tsx          |   2 +
 .../__tests__/create-app-tracking.spec.ts     | 134 +++
 web/utils/create-app-tracking.ts              | 187 ++++
 94 files changed, 12010 insertions(+), 335 deletions(-)
 create mode 100644 api/controllers/console/evaluation/__init__.py
 create mode 100644 api/controllers/console/evaluation/evaluation.py
 create mode 100644 api/controllers/console/snippets/payloads.py
 create mode 100644 api/controllers/console/snippets/snippet_workflow.py
 create mode 100644 api/controllers/console/snippets/snippet_workflow_draft_variable.py
 create mode 100644 api/controllers/console/workspace/snippets.py
 create mode 100644 api/core/evaluation/__init__.py
 create mode 100644 api/core/evaluation/base_evaluation_instance.py
 create mode 100644 api/core/evaluation/entities/__init__.py
 create mode 100644 api/core/evaluation/entities/config_entity.py
 create mode 100644 api/core/evaluation/entities/evaluation_entity.py
 create mode 100644 api/core/evaluation/entities/judgment_entity.py
 create mode 100644 api/core/evaluation/evaluation_manager.py
 create mode 100644 api/core/evaluation/frameworks/__init__.py
 create mode 100644 api/core/evaluation/frameworks/deepeval/__init__.py
 create mode 100644 api/core/evaluation/frameworks/deepeval/deepeval_evaluator.py
 create mode 100644 api/core/evaluation/frameworks/ragas/__init__.py
 create mode 100644 api/core/evaluation/frameworks/ragas/ragas_evaluator.py
 create mode 100644 api/core/evaluation/frameworks/ragas/ragas_model_wrapper.py
 create mode 100644 api/core/evaluation/judgment/__init__.py
 create mode 100644 api/core/evaluation/judgment/processor.py
 create mode 100644 api/core/evaluation/runners/__init__.py
 create mode 100644 api/core/evaluation/runners/agent_evaluation_runner.py
 create mode 100644 api/core/evaluation/runners/base_evaluation_runner.py
 create mode 100644 api/core/evaluation/runners/llm_evaluation_runner.py
 create mode 100644 api/core/evaluation/runners/retrieval_evaluation_runner.py
 create mode 100644 api/core/evaluation/runners/snippet_evaluation_runner.py
 create mode 100644 api/core/evaluation/runners/workflow_evaluation_runner.py
 create mode 100644 api/fields/snippet_fields.py
 create mode 100644 api/migrations/versions/2026_01_29_1200-1c05e80d2380_add_customized_snippets_table.py
 create mode 100644 api/migrations/versions/2026_03_03_0001-a1b2c3d4e5f6_add_evaluation_tables.py
 create mode 100644 api/migrations/versions/2026_03_17_1721-4c60d8d3ee74_merge_migration_heads.py
 create mode 100644 api/models/evaluation.py
 create mode 100644 api/models/snippet.py
 create mode 100644 api/services/errors/evaluation.py
 create mode 100644 api/services/evaluation_service.py
 create mode 100644 api/services/quota_service.py
 create mode 100644 api/services/snippet_dsl_service.py
 create mode 100644 api/services/snippet_generate_service.py
 create mode 100644 api/services/snippet_service.py
 create mode 100644 api/tasks/evaluation_task.py
 create mode 100644 api/tests/unit_tests/core/evaluation/judgment/test_processor.py
 create mode 100644 api/tests/unit_tests/core/evaluation/runners/test_base_evaluation_runner.py
 create mode 100644 api/tests/unit_tests/enums/__init__.py
 create mode 100644 api/tests/unit_tests/enums/test_quota_type.py
 create mode 100644 api/tests/unit_tests/tasks/test_evaluation_task.py
 create mode 100644 web/utils/__tests__/create-app-tracking.spec.ts
 create mode 100644 web/utils/create-app-tracking.ts

diff --git a/api/configs/feature/__init__.py b/api/configs/feature/__init__.py
index d37cff63e9..78862c1384 100644
--- a/api/configs/feature/__init__.py
+++ b/api/configs/feature/__init__.py
@@ -1366,6 +1366,32 @@ class SandboxExpiredRecordsCleanConfig(BaseSettings):
     )
 
 
+class EvaluationConfig(BaseSettings):
+    """
+    Configuration for evaluation runtime
+    """
+
+    EVALUATION_FRAMEWORK: str = Field(
+        description="Evaluation framework to use (ragas/deepeval/none)",
+        default="none",
+    )
+
+    EVALUATION_MAX_CONCURRENT_RUNS: PositiveInt = Field(
+        description="Maximum number of concurrent evaluation runs per tenant",
+        default=3,
+    )
+
+    EVALUATION_MAX_DATASET_ROWS: PositiveInt = Field(
+        description="Maximum number of rows allowed in an evaluation dataset",
+        default=500,
+    )
+
+    EVALUATION_TASK_TIMEOUT: PositiveInt = Field(
+        description="Timeout in seconds for a single evaluation task",
+        default=3600,
+    )
+
+
 class FeatureConfig(
     # place the configs in alphabet order
     AppExecutionConfig,
@@ -1378,6 +1404,7 @@ class FeatureConfig(
     MarketplaceConfig,
     DataSetConfig,
     EndpointConfig,
+    EvaluationConfig,
     FileAccessConfig,
     FileUploadConfig,
     HttpConfig,
diff --git a/api/controllers/console/__init__.py b/api/controllers/console/__init__.py
index d624b10b22..e952e33465 100644
--- a/api/controllers/console/__init__.py
+++ b/api/controllers/console/__init__.py
@@ -107,6 +107,9 @@ from .datasets.rag_pipeline import (
     rag_pipeline_workflow,
 )
 
+# Import evaluation controllers
+from .evaluation import evaluation
+
 # Import explore controllers
 from .explore import (
     banner,
@@ -117,6 +120,9 @@ from .explore import (
     trial,
 )
 
+# Import snippet controllers
+from .snippets import snippet_workflow, snippet_workflow_draft_variable
+
 # Import tag controllers
 from .tag import tags
 
@@ -130,6 +136,7 @@ from .workspace import (
     model_providers,
     models,
     plugin,
+    snippets,
     tool_providers,
     trigger_providers,
     workspace,
@@ -167,6 +174,7 @@ __all__ = [
     "datasource_content_preview",
     "email_register",
     "endpoint",
+    "evaluation",
     "extension",
     "external",
     "feature",
@@ -201,6 +209,9 @@ __all__ = [
     "saved_message",
     "setup",
     "site",
+    "snippet_workflow",
+    "snippet_workflow_draft_variable",
+    "snippets",
     "spec",
     "statistic",
     "tags",
diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index ac0682486b..06810d7094 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -329,6 +329,7 @@ class AppPartial(ResponseModel):
     create_user_name: str | None = None
     author_name: str | None = None
     has_draft_trigger: bool | None = None
+    workflow_type: str | None = None
 
     @computed_field(return_type=str | None)  # type: ignore
     @property
@@ -363,6 +364,7 @@ class AppDetail(ResponseModel):
     updated_by: str | None = None
     updated_at: int | None = None
     access_mode: str | None = None
+    workflow_type: str | None = None
     tags: list[Tag] = Field(default_factory=list)
 
     @field_validator("created_at", "updated_at", mode="before")
@@ -505,6 +507,17 @@ class AppListApi(Resource):
         for app in app_pagination.items:
             app.has_draft_trigger = str(app.id) in draft_trigger_app_ids
 
+        workflow_ids = [str(app.workflow_id) for app in app_pagination.items if app.workflow_id]
+        workflow_type_map: dict[str, str] = {}
+        if workflow_ids:
+            rows = db.session.execute(
+                select(Workflow.id, Workflow.type).where(Workflow.id.in_(workflow_ids))
+            ).all()
+            workflow_type_map = {str(row.id): row.type for row in rows}
+
+        for app in app_pagination.items:
+            app.workflow_type = workflow_type_map.get(str(app.workflow_id)) if app.workflow_id else None
+
         pagination_model = AppPagination.model_validate(app_pagination, from_attributes=True)
         return pagination_model.model_dump(mode="json"), 200
 
@@ -551,6 +564,14 @@ class AppApi(Resource):
             app_setting = EnterpriseService.WebAppAuth.get_app_access_mode_by_id(app_id=str(app_model.id))
             app_model.access_mode = app_setting.access_mode
 
+        if app_model.workflow_id:
+            row = db.session.execute(
+                select(Workflow.type).where(Workflow.id == app_model.workflow_id)
+            ).scalar()
+            app_model.workflow_type = row if row else None
+        else:
+            app_model.workflow_type = None
+
         response_model = AppDetailWithSite.model_validate(app_model, from_attributes=True)
         return response_model.model_dump(mode="json")
 
diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index 5e6ff87d62..a149960a23 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -1,7 +1,7 @@
 import json
 import logging
 from collections.abc import Sequence
-from typing import Any
+from typing import Any, Literal
 
 from flask import abort, request
 from flask_restx import Resource, fields, marshal, marshal_with
@@ -46,7 +46,7 @@ from libs.helper import TimestampField, uuid_value
 from libs.login import current_account_with_tenant, login_required
 from models import App
 from models.model import AppMode
-from models.workflow import Workflow
+from models.workflow import Workflow, WorkflowType
 from services.app_generate_service import AppGenerateService
 from services.errors.app import IsDraftWorkflowError, WorkflowHashNotEqualError, WorkflowNotFoundError
 from services.errors.llm import InvokeRateLimitError
@@ -150,6 +150,24 @@ class ConvertToWorkflowPayload(BaseModel):
     icon_background: str | None = None
 
 
+class WorkflowListQuery(BaseModel):
+    page: int = Field(default=1, ge=1, le=99999)
+    limit: int = Field(default=10, ge=1, le=100)
+    user_id: str | None = None
+    named_only: bool = False
+    keyword: str | None = Field(default=None, max_length=255)
+
+
+class WorkflowUpdatePayload(BaseModel):
+    marked_name: str | None = Field(default=None, max_length=20)
+    marked_comment: str | None = Field(default=None, max_length=100)
+
+
+class WorkflowTypeConvertQuery(BaseModel):
+    target_type: Literal["workflow", "evaluation"]
+
+
+
 class DraftWorkflowTriggerRunPayload(BaseModel):
     node_id: str
 
@@ -173,6 +191,7 @@ reg(DefaultBlockConfigQuery)
 reg(ConvertToWorkflowPayload)
 reg(WorkflowListQuery)
 reg(WorkflowUpdatePayload)
+reg(WorkflowTypeConvertQuery)
 reg(DraftWorkflowTriggerRunPayload)
 reg(DraftWorkflowTriggerRunAllPayload)
 
@@ -845,6 +864,54 @@ class PublishedWorkflowApi(Resource):
         }
 
 
+@console_ns.route("/apps/<uuid:app_id>/workflows/publish/evaluation")
+class EvaluationPublishedWorkflowApi(Resource):
+    @console_ns.doc("publish_evaluation_workflow")
+    @console_ns.doc(description="Publish draft workflow as evaluation workflow")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.expect(console_ns.models[PublishWorkflowPayload.__name__])
+    @console_ns.response(200, "Evaluation workflow published successfully")
+    @console_ns.response(400, "Invalid workflow or unsupported node type")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
+    @edit_permission_required
+    def post(self, app_model: App):
+        """
+        Publish draft workflow as evaluation workflow.
+
+        Evaluation workflows cannot include trigger or human-input nodes.
+        """
+        current_user, _ = current_account_with_tenant()
+        args = PublishWorkflowPayload.model_validate(console_ns.payload or {})
+
+        workflow_service = WorkflowService()
+        with Session(db.engine) as session:
+            workflow = workflow_service.publish_evaluation_workflow(
+                session=session,
+                app_model=app_model,
+                account=current_user,
+                marked_name=args.marked_name or "",
+                marked_comment=args.marked_comment or "",
+            )
+
+            # Keep workflow_id aligned with the latest published workflow.
+            app_model_in_session = session.get(App, app_model.id)
+            if app_model_in_session:
+                app_model_in_session.workflow_id = workflow.id
+                app_model_in_session.updated_by = current_user.id
+                app_model_in_session.updated_at = naive_utc_now()
+
+            workflow_created_at = TimestampField().format(workflow.created_at)
+            session.commit()
+
+        return {
+            "result": "success",
+            "created_at": workflow_created_at,
+        }
+
+
 @console_ns.route("/apps/<uuid:app_id>/workflows/default-workflow-block-configs")
 class DefaultBlockConfigsApi(Resource):
     @console_ns.doc("get_default_block_configs")
@@ -1016,6 +1083,51 @@ class DraftWorkflowRestoreApi(Resource):
         }
 
 
+@console_ns.route("/apps/<uuid:app_id>/workflows/convert-type")
+class WorkflowTypeConvertApi(Resource):
+    @console_ns.doc("convert_published_workflow_type")
+    @console_ns.doc(description="Convert current effective published workflow type in-place")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.expect(console_ns.models[WorkflowTypeConvertQuery.__name__])
+    @console_ns.response(200, "Workflow type converted successfully")
+    @console_ns.response(400, "Invalid workflow type or unsupported workflow graph")
+    @console_ns.response(404, "Workflow not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
+    @edit_permission_required
+    def post(self, app_model: App):
+        current_user, _ = current_account_with_tenant()
+        args = WorkflowTypeConvertQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        target_type = WorkflowType.value_of(args.target_type)
+
+        workflow_service = WorkflowService()
+        with Session(db.engine) as session:
+            try:
+                workflow = workflow_service.convert_published_workflow_type(
+                    session=session,
+                    app_model=app_model,
+                    target_type=target_type,
+                    account=current_user,
+                )
+            except WorkflowNotFoundError as exc:
+                raise NotFound(str(exc)) from exc
+            except IsDraftWorkflowError as exc:
+                raise BadRequest(str(exc)) from exc
+            except ValueError as exc:
+                raise BadRequest(str(exc)) from exc
+
+            session.commit()
+
+        return {
+            "result": "success",
+            "workflow_id": workflow.id,
+            "type": workflow.type.value,
+            "updated_at": TimestampField().format(workflow.updated_at or workflow.created_at),
+        }
+
+
 @console_ns.route("/apps/<uuid:app_id>/workflows/<string:workflow_id>")
 class WorkflowByIdApi(Resource):
     @console_ns.doc("update_workflow_by_id")
diff --git a/api/controllers/console/billing/billing.py b/api/controllers/console/billing/billing.py
index 45de338559..ce2870c82e 100644
--- a/api/controllers/console/billing/billing.py
+++ b/api/controllers/console/billing/billing.py
@@ -1,4 +1,6 @@
 import base64
+import json
+from datetime import UTC, datetime, timedelta
 from typing import Literal
 
 from flask import request
@@ -10,6 +12,7 @@ from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, only_edition_cloud, setup_required
 from enums.cloud_plan import CloudPlan
+from extensions.ext_redis import redis_client
 from libs.login import current_account_with_tenant, login_required
 from services.billing_service import BillingService
 
@@ -77,3 +80,39 @@ class PartnerTenants(Resource):
             raise BadRequest("Invalid partner information")
 
         return BillingService.sync_partner_tenants_bindings(current_user.id, decoded_partner_key, click_id)
+
+
+_DEBUG_KEY = "billing:debug"
+_DEBUG_TTL = timedelta(days=7)
+
+
+class DebugDataPayload(BaseModel):
+    type: str = Field(..., min_length=1, description="Data type key")
+    data: str = Field(..., min_length=1, description="Data value to append")
+
+
+@console_ns.route("/billing/debug/data")
+class DebugData(Resource):
+    def post(self):
+        body = DebugDataPayload.model_validate(request.get_json(force=True))
+        item = json.dumps({
+            "type": body.type,
+            "data": body.data,
+            "createTime": datetime.now(UTC).strftime("%Y-%m-%dT%H:%M:%SZ"),
+        })
+        redis_client.lpush(_DEBUG_KEY, item)
+        redis_client.expire(_DEBUG_KEY, _DEBUG_TTL)
+        return {"result": "ok"}, 201
+
+    def get(self):
+        recent = request.args.get("recent", 10, type=int)
+        items = redis_client.lrange(_DEBUG_KEY, 0, recent - 1)
+        return {
+            "data": [
+                json.loads(item.decode("utf-8") if isinstance(item, bytes) else item) for item in items
+            ]
+        }
+
+    def delete(self):
+        redis_client.delete(_DEBUG_KEY)
+        return {"result": "ok"}
diff --git a/api/controllers/console/datasets/datasets.py b/api/controllers/console/datasets/datasets.py
index b2a905366a..14ca27acbd 100644
--- a/api/controllers/console/datasets/datasets.py
+++ b/api/controllers/console/datasets/datasets.py
@@ -1,11 +1,14 @@
+import json
 from typing import Any, cast
+from urllib.parse import quote
 
-from flask import request
+from flask import Response, request
 from flask_restx import Resource, fields, marshal, marshal_with
 from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import func, select
-from werkzeug.exceptions import Forbidden, NotFound
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import BadRequest, Forbidden, NotFound
 
 import services
 from configs import dify_config
@@ -22,6 +25,7 @@ from controllers.console.wraps import (
     setup_required,
 )
 from core.errors.error import LLMBadRequestError, ProviderTokenNotInitError
+from core.evaluation.entities.evaluation_entity import EvaluationCategory, EvaluationConfigData, EvaluationRunRequest
 from core.indexing_runner import IndexingRunner
 from core.plugin.impl.model_runtime_factory import create_plugin_provider_manager
 from core.rag.datasource.vdb.vector_type import VectorType
@@ -30,6 +34,7 @@ from core.rag.extractor.entity.extract_setting import ExtractSetting, NotionInfo
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
 from extensions.ext_database import db
+from extensions.ext_storage import storage
 from fields.app_fields import app_detail_kernel_fields, related_app_list
 from fields.dataset_fields import (
     content_fields,
@@ -50,12 +55,19 @@ from fields.dataset_fields import (
 )
 from fields.document_fields import document_status_fields
 from libs.login import current_account_with_tenant, login_required
-from models import ApiToken, Dataset, Document, DocumentSegment, UploadFile
+from models import ApiToken, Dataset, Document, DocumentSegment, EvaluationRun, EvaluationTargetType, UploadFile
 from models.dataset import DatasetPermission, DatasetPermissionEnum
 from models.enums import ApiTokenType, SegmentStatus
 from models.provider_ids import ModelProviderID
 from services.api_token_service import ApiTokenCache
 from services.dataset_service import DatasetPermissionService, DatasetService, DocumentService
+from services.errors.evaluation import (
+    EvaluationDatasetInvalidError,
+    EvaluationFrameworkNotConfiguredError,
+    EvaluationMaxConcurrentRunsError,
+    EvaluationNotFoundError,
+)
+from services.evaluation_service import EvaluationService
 
 # Register models for flask_restx to avoid dict type issues in Swagger
 dataset_base_model = get_or_create_model("DatasetBase", dataset_fields)
@@ -983,3 +995,432 @@ class DatasetAutoDisableLogApi(Resource):
         if dataset is None:
             raise NotFound("Dataset not found.")
         return DatasetService.get_dataset_auto_disable_logs(dataset_id_str), 200
+
+
+# ---- Knowledge Base Retrieval Evaluation ----
+
+
+def _serialize_dataset_evaluation_run(run: EvaluationRun) -> dict[str, Any]:
+    return {
+        "id": run.id,
+        "tenant_id": run.tenant_id,
+        "target_type": run.target_type,
+        "target_id": run.target_id,
+        "evaluation_config_id": run.evaluation_config_id,
+        "status": run.status,
+        "dataset_file_id": run.dataset_file_id,
+        "result_file_id": run.result_file_id,
+        "total_items": run.total_items,
+        "completed_items": run.completed_items,
+        "failed_items": run.failed_items,
+        "progress": run.progress,
+        "metrics_summary": json.loads(run.metrics_summary) if run.metrics_summary else {},
+        "error": run.error,
+        "created_by": run.created_by,
+        "started_at": int(run.started_at.timestamp()) if run.started_at else None,
+        "completed_at": int(run.completed_at.timestamp()) if run.completed_at else None,
+        "created_at": int(run.created_at.timestamp()) if run.created_at else None,
+    }
+
+
+def _serialize_dataset_evaluation_run_item(item: Any) -> dict[str, Any]:
+    return {
+        "id": item.id,
+        "item_index": item.item_index,
+        "inputs": item.inputs_dict,
+        "expected_output": item.expected_output,
+        "actual_output": item.actual_output,
+        "metrics": item.metrics_list,
+        "judgment": item.judgment_dict,
+        "metadata": item.metadata_dict,
+        "error": item.error,
+        "overall_score": item.overall_score,
+    }
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/template/download")
+class DatasetEvaluationTemplateDownloadApi(Resource):
+    @console_ns.doc("download_dataset_evaluation_template")
+    @console_ns.response(200, "Template file streamed as XLSX attachment")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def post(self, dataset_id):
+        """Download evaluation dataset template for knowledge base retrieval."""
+        current_user, _ = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        xlsx_content, filename = EvaluationService.generate_retrieval_dataset_template()
+        encoded_filename = quote(filename)
+        response = Response(
+            xlsx_content,
+            mimetype="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        )
+        response.headers["Content-Disposition"] = f"attachment; filename*=UTF-8''{encoded_filename}"
+        response.headers["Content-Length"] = str(len(xlsx_content))
+        return response
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation")
+class DatasetEvaluationDetailApi(Resource):
+    @console_ns.doc("get_dataset_evaluation_config")
+    @console_ns.response(200, "Evaluation configuration retrieved")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self, dataset_id):
+        """Get evaluation configuration for the knowledge base."""
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            config = EvaluationService.get_evaluation_config(
+                session, current_tenant_id, "dataset", dataset_id_str
+            )
+
+        if config is None:
+            return {
+                "evaluation_model": None,
+                "evaluation_model_provider": None,
+                "default_metrics": None,
+                "customized_metrics": None,
+                "judgment_config": None,
+            }
+
+        return {
+            "evaluation_model": config.evaluation_model,
+            "evaluation_model_provider": config.evaluation_model_provider,
+            "default_metrics": config.default_metrics_list,
+            "customized_metrics": config.customized_metrics_dict,
+            "judgment_config": config.judgment_config_dict,
+        }
+
+    @console_ns.doc("save_dataset_evaluation_config")
+    @console_ns.response(200, "Evaluation configuration saved")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def put(self, dataset_id):
+        """Save evaluation configuration for the knowledge base."""
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        body = request.get_json(force=True)
+        try:
+            config_data = EvaluationConfigData.model_validate(body)
+        except Exception as e:
+            raise BadRequest(f"Invalid request body: {e}")
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            config = EvaluationService.save_evaluation_config(
+                session=session,
+                tenant_id=current_tenant_id,
+                target_type="dataset",
+                target_id=dataset_id_str,
+                account_id=str(current_user.id),
+                data=config_data,
+            )
+
+        return {
+            "evaluation_model": config.evaluation_model,
+            "evaluation_model_provider": config.evaluation_model_provider,
+            "default_metrics": config.default_metrics_list,
+            "customized_metrics": config.customized_metrics_dict,
+            "judgment_config": config.judgment_config_dict,
+        }
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/run")
+class DatasetEvaluationRunApi(Resource):
+    @console_ns.doc("start_dataset_evaluation_run")
+    @console_ns.response(200, "Evaluation run started")
+    @console_ns.response(400, "Invalid request")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def post(self, dataset_id):
+        """Start an evaluation run for the knowledge base retrieval."""
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        body = request.get_json(force=True)
+        if not body:
+            raise BadRequest("Request body is required.")
+
+        try:
+            run_request = EvaluationRunRequest.model_validate(body)
+        except Exception as e:
+            raise BadRequest(f"Invalid request body: {e}")
+
+        upload_file = (
+            db.session.query(UploadFile).filter_by(id=run_request.file_id, tenant_id=current_tenant_id).first()
+        )
+        if not upload_file:
+            raise NotFound("Dataset file not found.")
+
+        try:
+            dataset_content = storage.load_once(upload_file.key)
+        except Exception:
+            raise BadRequest("Failed to read dataset file.")
+
+        if not dataset_content:
+            raise BadRequest("Dataset file is empty.")
+
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                evaluation_run = EvaluationService.start_evaluation_run(
+                    session=session,
+                    tenant_id=current_tenant_id,
+                    target_type=EvaluationTargetType.KNOWLEDGE_BASE,
+                    target_id=dataset_id_str,
+                    account_id=str(current_user.id),
+                    dataset_file_content=dataset_content,
+                    run_request=run_request,
+                )
+                return _serialize_dataset_evaluation_run(evaluation_run), 200
+        except EvaluationFrameworkNotConfiguredError as e:
+            return {"message": str(e.description)}, 400
+        except EvaluationNotFoundError as e:
+            return {"message": str(e.description)}, 404
+        except EvaluationMaxConcurrentRunsError as e:
+            return {"message": str(e.description)}, 429
+        except EvaluationDatasetInvalidError as e:
+            return {"message": str(e.description)}, 400
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/logs")
+class DatasetEvaluationLogsApi(Resource):
+    @console_ns.doc("get_dataset_evaluation_logs")
+    @console_ns.response(200, "Evaluation logs retrieved")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self, dataset_id):
+        """Get evaluation run history for the knowledge base."""
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        page = request.args.get("page", 1, type=int)
+        page_size = request.args.get("page_size", 20, type=int)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            runs, total = EvaluationService.get_evaluation_runs(
+                session=session,
+                tenant_id=current_tenant_id,
+                target_type="dataset",
+                target_id=dataset_id_str,
+                page=page,
+                page_size=page_size,
+            )
+
+        return {
+            "data": [_serialize_dataset_evaluation_run(run) for run in runs],
+            "total": total,
+            "page": page,
+            "page_size": page_size,
+        }
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/runs/<uuid:run_id>")
+class DatasetEvaluationRunDetailApi(Resource):
+    @console_ns.doc("get_dataset_evaluation_run_detail")
+    @console_ns.response(200, "Evaluation run detail retrieved")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset or run not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self, dataset_id, run_id):
+        """Get evaluation run detail including per-item results."""
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        run_id_str = str(run_id)
+        page = request.args.get("page", 1, type=int)
+        page_size = request.args.get("page_size", 50, type=int)
+
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                run = EvaluationService.get_evaluation_run_detail(
+                    session=session,
+                    tenant_id=current_tenant_id,
+                    run_id=run_id_str,
+                )
+                items, total_items = EvaluationService.get_evaluation_run_items(
+                    session=session,
+                    run_id=run_id_str,
+                    page=page,
+                    page_size=page_size,
+                )
+                return {
+                    "run": _serialize_dataset_evaluation_run(run),
+                    "items": {
+                        "data": [_serialize_dataset_evaluation_run_item(item) for item in items],
+                        "total": total_items,
+                        "page": page,
+                        "page_size": page_size,
+                    },
+                }
+        except EvaluationNotFoundError as e:
+            return {"message": str(e.description)}, 404
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/runs/<uuid:run_id>/cancel")
+class DatasetEvaluationRunCancelApi(Resource):
+    @console_ns.doc("cancel_dataset_evaluation_run")
+    @console_ns.response(200, "Evaluation run cancelled")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset or run not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def post(self, dataset_id, run_id):
+        """Cancel a running knowledge base evaluation."""
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        run_id_str = str(run_id)
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                run = EvaluationService.cancel_evaluation_run(
+                    session=session,
+                    tenant_id=current_tenant_id,
+                    run_id=run_id_str,
+                )
+                return _serialize_dataset_evaluation_run(run)
+        except EvaluationNotFoundError as e:
+            return {"message": str(e.description)}, 404
+        except ValueError as e:
+            return {"message": str(e)}, 400
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/metrics")
+class DatasetEvaluationMetricsApi(Resource):
+    @console_ns.doc("get_dataset_evaluation_metrics")
+    @console_ns.response(200, "Available retrieval metrics retrieved")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self, dataset_id):
+        """Get available evaluation metrics for knowledge base retrieval."""
+        current_user, _ = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        return {
+            "metrics": EvaluationService.get_supported_metrics(EvaluationCategory.KNOWLEDGE_BASE)
+        }
+
+
+@console_ns.route("/datasets/<uuid:dataset_id>/evaluation/files/<uuid:file_id>")
+class DatasetEvaluationFileDownloadApi(Resource):
+    @console_ns.doc("download_dataset_evaluation_file")
+    @console_ns.response(200, "File download URL generated")
+    @console_ns.response(403, "Permission denied")
+    @console_ns.response(404, "Dataset or file not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self, dataset_id, file_id):
+        """Download evaluation test file or result file for the knowledge base."""
+        from core.workflow.file import helpers as file_helpers
+
+        current_user, current_tenant_id = current_account_with_tenant()
+        dataset_id_str = str(dataset_id)
+        dataset = DatasetService.get_dataset(dataset_id_str)
+        if dataset is None:
+            raise NotFound("Dataset not found.")
+        try:
+            DatasetService.check_dataset_permission(dataset, current_user)
+        except services.errors.account.NoPermissionError as e:
+            raise Forbidden(str(e))
+
+        file_id_str = str(file_id)
+        with Session(db.engine, expire_on_commit=False) as session:
+            stmt = select(UploadFile).where(
+                UploadFile.id == file_id_str,
+                UploadFile.tenant_id == current_tenant_id,
+            )
+            upload_file = session.execute(stmt).scalar_one_or_none()
+
+        if not upload_file:
+            raise NotFound("File not found.")
+
+        download_url = file_helpers.get_signed_file_url(upload_file_id=upload_file.id, as_attachment=True)
+
+        return {
+            "id": upload_file.id,
+            "name": upload_file.name,
+            "size": upload_file.size,
+            "extension": upload_file.extension,
+            "mime_type": upload_file.mime_type,
+            "created_at": int(upload_file.created_at.timestamp()) if upload_file.created_at else None,
+            "download_url": download_url,
+        }
diff --git a/api/controllers/console/evaluation/__init__.py b/api/controllers/console/evaluation/__init__.py
new file mode 100644
index 0000000000..65c6eacd84
--- /dev/null
+++ b/api/controllers/console/evaluation/__init__.py
@@ -0,0 +1 @@
+# Evaluation controller module
diff --git a/api/controllers/console/evaluation/evaluation.py b/api/controllers/console/evaluation/evaluation.py
new file mode 100644
index 0000000000..31490020c3
--- /dev/null
+++ b/api/controllers/console/evaluation/evaluation.py
@@ -0,0 +1,869 @@
+from __future__ import annotations
+
+import logging
+from collections.abc import Callable
+from functools import wraps
+from typing import TYPE_CHECKING, ParamSpec, TypeVar, Union
+from urllib.parse import quote
+
+from flask import Response, request
+from flask_restx import Resource, fields, marshal
+from pydantic import BaseModel
+from sqlalchemy import select
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import BadRequest, Forbidden, NotFound
+
+from controllers.common.schema import register_schema_models
+from controllers.console import console_ns
+from controllers.console.app.workflow import WorkflowListQuery
+from controllers.console.wraps import (
+    account_initialization_required,
+    edit_permission_required,
+    setup_required,
+)
+from core.evaluation.entities.evaluation_entity import EvaluationCategory, EvaluationConfigData, EvaluationRunRequest
+from extensions.ext_database import db
+from extensions.ext_storage import storage
+from fields.member_fields import simple_account_fields
+from graphon.file import helpers as file_helpers
+from libs.helper import TimestampField
+from libs.login import current_account_with_tenant, login_required
+from models import App, Dataset
+from models.model import UploadFile
+from models.snippet import CustomizedSnippet
+from services.errors.evaluation import (
+    EvaluationDatasetInvalidError,
+    EvaluationFrameworkNotConfiguredError,
+    EvaluationMaxConcurrentRunsError,
+    EvaluationNotFoundError,
+)
+from services.evaluation_service import EvaluationService
+from services.workflow_service import WorkflowService
+
+if TYPE_CHECKING:
+    from models.evaluation import EvaluationRun, EvaluationRunItem
+
+logger = logging.getLogger(__name__)
+
+P = ParamSpec("P")
+R = TypeVar("R")
+
+# Valid evaluation target types
+EVALUATE_TARGET_TYPES = {"app", "snippets"}
+
+
+class VersionQuery(BaseModel):
+    """Query parameters for version endpoint."""
+
+    version: str
+
+
+register_schema_models(
+    console_ns,
+    VersionQuery,
+)
+
+
+# Response field definitions
+file_info_fields = {
+    "id": fields.String,
+    "name": fields.String,
+}
+
+evaluation_log_fields = {
+    "created_at": TimestampField,
+    "created_by": fields.String,
+    "test_file": fields.Nested(
+        console_ns.model(
+            "EvaluationTestFile",
+            file_info_fields,
+        )
+    ),
+    "result_file": fields.Nested(
+        console_ns.model(
+            "EvaluationResultFile",
+            file_info_fields,
+        ),
+        allow_null=True,
+    ),
+    "version": fields.String,
+}
+
+evaluation_log_list_model = console_ns.model(
+    "EvaluationLogList",
+    {
+        "data": fields.List(fields.Nested(console_ns.model("EvaluationLog", evaluation_log_fields))),
+    },
+)
+
+evaluation_default_metric_node_info_fields = {
+    "node_id": fields.String,
+    "type": fields.String,
+    "title": fields.String,
+}
+evaluation_default_metric_item_fields = {
+    "metric": fields.String,
+    "value_type": fields.String,
+    "node_info_list": fields.List(
+        fields.Nested(
+            console_ns.model("EvaluationDefaultMetricNodeInfo", evaluation_default_metric_node_info_fields),
+        ),
+    ),
+}
+
+customized_metrics_fields = {
+    "evaluation_workflow_id": fields.String,
+    "input_fields": fields.Raw,
+    "output_fields": fields.Raw,
+}
+
+judgment_condition_fields = {
+    "variable_selector": fields.List(fields.String),
+    "comparison_operator": fields.String,
+    "value": fields.String,
+}
+
+judgment_config_fields = {
+    "logical_operator": fields.String,
+    "conditions": fields.List(fields.Nested(console_ns.model("JudgmentCondition", judgment_condition_fields))),
+}
+
+evaluation_detail_fields = {
+    "evaluation_model": fields.String,
+    "evaluation_model_provider": fields.String,
+    "default_metrics": fields.List(
+        fields.Nested(console_ns.model("EvaluationDefaultMetricItem_Detail", evaluation_default_metric_item_fields)),
+        allow_null=True,
+    ),
+    "customized_metrics": fields.Nested(
+        console_ns.model("EvaluationCustomizedMetrics", customized_metrics_fields),
+        allow_null=True,
+    ),
+    "judgment_config": fields.Nested(
+        console_ns.model("EvaluationJudgmentConfig", judgment_config_fields),
+        allow_null=True,
+    ),
+}
+
+evaluation_detail_model = console_ns.model("EvaluationDetail", evaluation_detail_fields)
+
+available_evaluation_workflow_list_fields = {
+    "id": fields.String,
+    "app_id": fields.String,
+    "app_name": fields.String,
+    "type": fields.String,
+    "version": fields.String,
+    "marked_name": fields.String,
+    "marked_comment": fields.String,
+    "hash": fields.String,
+    "created_by": fields.Nested(simple_account_fields),
+    "created_at": TimestampField,
+    "updated_by": fields.Nested(simple_account_fields, allow_null=True),
+    "updated_at": TimestampField,
+}
+
+available_evaluation_workflow_pagination_fields = {
+    "items": fields.List(fields.Nested(available_evaluation_workflow_list_fields)),
+    "page": fields.Integer,
+    "limit": fields.Integer,
+    "has_more": fields.Boolean,
+}
+
+available_evaluation_workflow_pagination_model = console_ns.model(
+    "AvailableEvaluationWorkflowPagination",
+    available_evaluation_workflow_pagination_fields,
+)
+
+evaluation_default_metrics_response_model = console_ns.model(
+    "EvaluationDefaultMetricsResponse",
+    {
+        "default_metrics": fields.List(
+            fields.Nested(console_ns.model("EvaluationDefaultMetricItem", evaluation_default_metric_item_fields)),
+        ),
+    },
+)
+
+
+def get_evaluation_target(view_func: Callable[P, R]):
+    """
+    Decorator to resolve polymorphic evaluation target (app or snippet).
+
+    Validates the target_type parameter and fetches the corresponding
+    model (App or CustomizedSnippet) with tenant isolation.
+    """
+
+    @wraps(view_func)
+    def decorated_view(*args: P.args, **kwargs: P.kwargs):
+        target_type = kwargs.get("evaluate_target_type")
+        target_id = kwargs.get("evaluate_target_id")
+
+        if target_type not in EVALUATE_TARGET_TYPES:
+            raise NotFound(f"Invalid evaluation target type: {target_type}")
+
+        _, current_tenant_id = current_account_with_tenant()
+
+        target_id = str(target_id)
+
+        # Remove path parameters
+        del kwargs["evaluate_target_type"]
+        del kwargs["evaluate_target_id"]
+
+        target: Union[App, CustomizedSnippet, Dataset] | None = None
+
+        if target_type == "app":
+            target = db.session.query(App).where(App.id == target_id, App.tenant_id == current_tenant_id).first()
+        elif target_type == "snippets":
+            target = (
+                db.session.query(CustomizedSnippet)
+                .where(CustomizedSnippet.id == target_id, CustomizedSnippet.tenant_id == current_tenant_id)
+                .first()
+            )
+        elif target_type == "knowledge":
+            target = (db.session.query(Dataset)
+                      .where(Dataset.id == target_id, Dataset.tenant_id == current_tenant_id)
+                      .first())
+
+        if not target:
+            raise NotFound(f"{str(target_type)} not found")
+
+        kwargs["target"] = target
+        kwargs["target_type"] = target_type
+
+        return view_func(*args, **kwargs)
+
+    return decorated_view
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/dataset-template/download")
+class EvaluationDatasetTemplateDownloadApi(Resource):
+    @console_ns.doc("download_evaluation_dataset_template")
+    @console_ns.response(200, "Template file streamed as XLSX attachment")
+    @console_ns.response(400, "Invalid target type or excluded app mode")
+    @console_ns.response(404, "Target not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    @edit_permission_required
+    def post(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """
+        Download evaluation dataset template.
+
+        Generates an XLSX template based on the target's input parameters
+        and streams it directly as a file attachment.
+        """
+        try:
+            xlsx_content, filename = EvaluationService.generate_dataset_template(
+                target=target,
+                target_type=target_type,
+            )
+        except ValueError as e:
+            return {"message": str(e)}, 400
+
+        encoded_filename = quote(filename)
+        response = Response(
+            xlsx_content,
+            mimetype="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        )
+        response.headers["Content-Disposition"] = f"attachment; filename*=UTF-8''{encoded_filename}"
+        response.headers["Content-Length"] = str(len(xlsx_content))
+        return response
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation")
+class EvaluationDetailApi(Resource):
+    @console_ns.doc("get_evaluation_detail")
+    @console_ns.response(200, "Evaluation details retrieved successfully", evaluation_detail_model)
+    @console_ns.response(404, "Target not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """
+        Get evaluation configuration for the target.
+
+        Returns evaluation configuration including model settings,
+        metrics config, and judgement conditions.
+        """
+        _, current_tenant_id = current_account_with_tenant()
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            config = EvaluationService.get_evaluation_config(session, current_tenant_id, target_type, str(target.id))
+
+        if config is None:
+            return {
+                "evaluation_model": None,
+                "evaluation_model_provider": None,
+                "default_metrics": None,
+                "customized_metrics": None,
+                "judgment_config": None,
+            }
+
+        return {
+            "evaluation_model": config.evaluation_model,
+            "evaluation_model_provider": config.evaluation_model_provider,
+            "default_metrics": config.default_metrics_list,
+            "customized_metrics": config.customized_metrics_dict,
+            "judgment_config": config.judgment_config_dict,
+        }
+
+    @console_ns.doc("save_evaluation_detail")
+    @console_ns.response(200, "Evaluation configuration saved successfully")
+    @console_ns.response(404, "Target not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    @edit_permission_required
+    def put(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """
+        Save evaluation configuration for the target.
+        """
+        current_account, current_tenant_id = current_account_with_tenant()
+        body = request.get_json(force=True)
+
+        try:
+            config_data = EvaluationConfigData.model_validate(body)
+        except Exception as e:
+            raise BadRequest(f"Invalid request body: {e}")
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            config = EvaluationService.save_evaluation_config(
+                session=session,
+                tenant_id=current_tenant_id,
+                target_type=target_type,
+                target_id=str(target.id),
+                account_id=str(current_account.id),
+                data=config_data,
+            )
+
+        return {
+            "evaluation_model": config.evaluation_model,
+            "evaluation_model_provider": config.evaluation_model_provider,
+            "default_metrics": config.default_metrics_list,
+            "customized_metrics": config.customized_metrics_dict,
+            "judgment_config": config.judgment_config_dict,
+        }
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/logs")
+class EvaluationLogsApi(Resource):
+    @console_ns.doc("get_evaluation_logs")
+    @console_ns.response(200, "Evaluation logs retrieved successfully")
+    @console_ns.response(404, "Target not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """
+        Get evaluation run history for the target.
+
+        Returns a paginated list of evaluation runs.
+        """
+        _, current_tenant_id = current_account_with_tenant()
+        page = request.args.get("page", 1, type=int)
+        page_size = request.args.get("page_size", 20, type=int)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            runs, total = EvaluationService.get_evaluation_runs(
+                session=session,
+                tenant_id=current_tenant_id,
+                target_type=target_type,
+                target_id=str(target.id),
+                page=page,
+                page_size=page_size,
+            )
+
+        return {
+            "data": [_serialize_evaluation_run(run) for run in runs],
+            "total": total,
+            "page": page,
+            "page_size": page_size,
+        }
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/run")
+class EvaluationRunApi(Resource):
+    @console_ns.doc("start_evaluation_run")
+    @console_ns.response(200, "Evaluation run started")
+    @console_ns.response(400, "Invalid request")
+    @console_ns.response(404, "Target not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    @edit_permission_required
+    def post(self, target: Union[App, CustomizedSnippet, Dataset], target_type: str):
+        """
+        Start an evaluation run.
+
+        Expects JSON body with:
+        - file_id: uploaded dataset file ID
+        - evaluation_model: evaluation model name
+        - evaluation_model_provider: evaluation model provider
+        - default_metrics: list of default metric objects
+        - customized_metrics: customized metrics object (optional)
+        - judgment_config: judgment conditions config (optional)
+        """
+        current_account, current_tenant_id = current_account_with_tenant()
+
+        body = request.get_json(force=True)
+        if not body:
+            raise BadRequest("Request body is required.")
+
+        # Validate and parse request body
+        try:
+            run_request = EvaluationRunRequest.model_validate(body)
+        except Exception as e:
+            raise BadRequest(f"Invalid request body: {e}")
+
+        # Load dataset file
+        upload_file = (
+            db.session.query(UploadFile).filter_by(id=run_request.file_id, tenant_id=current_tenant_id).first()
+        )
+        if not upload_file:
+            raise NotFound("Dataset file not found.")
+
+        try:
+            dataset_content = storage.load_once(upload_file.key)
+        except Exception:
+            raise BadRequest("Failed to read dataset file.")
+
+        if not dataset_content:
+            raise BadRequest("Dataset file is empty.")
+
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                evaluation_run = EvaluationService.start_evaluation_run(
+                    session=session,
+                    tenant_id=current_tenant_id,
+                    target_type=target_type,
+                    target_id=str(target.id),
+                    account_id=str(current_account.id),
+                    dataset_file_content=dataset_content,
+                    run_request=run_request,
+                )
+                return _serialize_evaluation_run(evaluation_run), 200
+        except EvaluationFrameworkNotConfiguredError as e:
+            return {"message": str(e.description)}, 400
+        except EvaluationNotFoundError as e:
+            return {"message": str(e.description)}, 404
+        except EvaluationMaxConcurrentRunsError as e:
+            return {"message": str(e.description)}, 429
+        except EvaluationDatasetInvalidError as e:
+            return {"message": str(e.description)}, 400
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/runs/<uuid:run_id>")
+class EvaluationRunDetailApi(Resource):
+    @console_ns.doc("get_evaluation_run_detail")
+    @console_ns.response(200, "Evaluation run detail retrieved")
+    @console_ns.response(404, "Run not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str, run_id: str):
+        """
+        Get evaluation run detail including items.
+        """
+        _, current_tenant_id = current_account_with_tenant()
+        run_id = str(run_id)
+        page = request.args.get("page", 1, type=int)
+        page_size = request.args.get("page_size", 50, type=int)
+
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                run = EvaluationService.get_evaluation_run_detail(
+                    session=session,
+                    tenant_id=current_tenant_id,
+                    run_id=run_id,
+                )
+                items, total_items = EvaluationService.get_evaluation_run_items(
+                    session=session,
+                    run_id=run_id,
+                    page=page,
+                    page_size=page_size,
+                )
+
+                return {
+                    "run": _serialize_evaluation_run(run),
+                    "items": {
+                        "data": [_serialize_evaluation_run_item(item) for item in items],
+                        "total": total_items,
+                        "page": page,
+                        "page_size": page_size,
+                    },
+                }
+        except EvaluationNotFoundError as e:
+            return {"message": str(e.description)}, 404
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/runs/<uuid:run_id>/cancel")
+class EvaluationRunCancelApi(Resource):
+    @console_ns.doc("cancel_evaluation_run")
+    @console_ns.response(200, "Evaluation run cancelled")
+    @console_ns.response(404, "Run not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    @edit_permission_required
+    def post(self, target: Union[App, CustomizedSnippet], target_type: str, run_id: str):
+        """Cancel a running evaluation."""
+        _, current_tenant_id = current_account_with_tenant()
+        run_id = str(run_id)
+
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                run = EvaluationService.cancel_evaluation_run(
+                    session=session,
+                    tenant_id=current_tenant_id,
+                    run_id=run_id,
+                )
+                return _serialize_evaluation_run(run)
+        except EvaluationNotFoundError as e:
+            return {"message": str(e.description)}, 404
+        except ValueError as e:
+            return {"message": str(e)}, 400
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/metrics")
+class EvaluationMetricsApi(Resource):
+    @console_ns.doc("get_evaluation_metrics")
+    @console_ns.response(200, "Available metrics retrieved")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """
+        Get available evaluation metrics for the current framework.
+        """
+        result = {}
+        for category in EvaluationCategory:
+            result[category.value] = EvaluationService.get_supported_metrics(category)
+        return {"metrics": result}
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/default-metrics")
+class EvaluationDefaultMetricsApi(Resource):
+    @console_ns.doc(
+        "get_evaluation_default_metrics_with_nodes",
+        description=(
+            "List default metrics supported by the current evaluation framework with matching nodes "
+            "from the target's published workflow only (draft is ignored)."
+        ),
+    )
+    @console_ns.response(
+        200,
+        "Default metrics and node candidates for the published workflow",
+        evaluation_default_metrics_response_model,
+    )
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
+        default_metrics = EvaluationService.get_default_metrics_with_nodes_for_published_target(
+            target=target,
+            target_type=target_type,
+        )
+        return {"default_metrics": [m.model_dump() for m in default_metrics]}
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/node-info")
+class EvaluationNodeInfoApi(Resource):
+    @console_ns.doc("get_evaluation_node_info")
+    @console_ns.response(200, "Node info grouped by metric")
+    @console_ns.response(404, "Target not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def post(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """Return workflow/snippet node info grouped by requested metrics.
+
+        Request body (JSON):
+            - metrics: list[str] | None  – metric names to query; omit or pass
+              an empty list to get all nodes under key ``"all"``.
+
+        Response:
+            ``{metric_or_all: [{"node_id": ..., "type": ..., "title": ...}, ...]}``
+        """
+        body = request.get_json(silent=True) or {}
+        metrics: list[str] | None = body.get("metrics") or None
+
+        result = EvaluationService.get_nodes_for_metrics(
+            target=target,
+            target_type=target_type,
+            metrics=metrics,
+        )
+        return result
+
+
+@console_ns.route("/evaluation/available-metrics")
+class EvaluationAvailableMetricsApi(Resource):
+    @console_ns.doc("get_available_evaluation_metrics")
+    @console_ns.response(200, "Available metrics list")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self):
+        """Return the centrally-defined list of evaluation metrics."""
+        return {"metrics": EvaluationService.get_available_metrics()}
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/files/<uuid:file_id>")
+class EvaluationFileDownloadApi(Resource):
+    @console_ns.doc("download_evaluation_file")
+    @console_ns.response(200, "File download URL generated successfully")
+    @console_ns.response(404, "Target or file not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str, file_id: str):
+        """
+        Download evaluation test file or result file.
+
+        Looks up the specified file, verifies it belongs to the same tenant,
+        and returns file info and download URL.
+        """
+        file_id = str(file_id)
+        _, current_tenant_id = current_account_with_tenant()
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            stmt = select(UploadFile).where(
+                UploadFile.id == file_id,
+                UploadFile.tenant_id == current_tenant_id,
+            )
+            upload_file = session.execute(stmt).scalar_one_or_none()
+
+        if not upload_file:
+            raise NotFound("File not found")
+
+        download_url = file_helpers.get_signed_file_url(upload_file_id=upload_file.id, as_attachment=True)
+
+        return {
+            "id": upload_file.id,
+            "name": upload_file.name,
+            "size": upload_file.size,
+            "extension": upload_file.extension,
+            "mime_type": upload_file.mime_type,
+            "created_at": int(upload_file.created_at.timestamp()) if upload_file.created_at else None,
+            "download_url": download_url,
+        }
+
+
+@console_ns.route("/<string:evaluate_target_type>/<uuid:evaluate_target_id>/evaluation/version")
+class EvaluationVersionApi(Resource):
+    @console_ns.doc("get_evaluation_version_detail")
+    @console_ns.expect(console_ns.models.get(VersionQuery.__name__))
+    @console_ns.response(200, "Version details retrieved successfully")
+    @console_ns.response(404, "Target or version not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_evaluation_target
+    def get(self, target: Union[App, CustomizedSnippet], target_type: str):
+        """
+        Get evaluation target version details.
+
+        Returns the workflow graph for the specified version.
+        """
+        version = request.args.get("version")
+
+        if not version:
+            return {"message": "version parameter is required"}, 400
+
+        graph = {}
+        if target_type == "snippets" and isinstance(target, CustomizedSnippet):
+            graph = target.graph_dict
+
+        return {
+            "graph": graph,
+        }
+
+
+@console_ns.route("/workspaces/current/available-evaluation-workflows")
+class AvailableEvaluationWorkflowsApi(Resource):
+    @console_ns.expect(console_ns.models[WorkflowListQuery.__name__])
+    @console_ns.doc("list_available_evaluation_workflows")
+    @console_ns.doc(description="List published evaluation workflows in the current workspace (all apps)")
+    @console_ns.response(
+        200,
+        "Available evaluation workflows retrieved",
+        available_evaluation_workflow_pagination_model,
+    )
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def get(self):
+        """List published evaluation-type workflows for the current tenant (cross-app)."""
+        current_user, current_tenant_id = current_account_with_tenant()
+
+        args = WorkflowListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        page = args.page
+        limit = args.limit
+        user_id = args.user_id
+        named_only = args.named_only
+        keyword = args.keyword
+
+        if user_id and user_id != current_user.id:
+            raise Forbidden()
+
+        workflow_service = WorkflowService()
+        with Session(db.engine) as session:
+            workflows, has_more = workflow_service.list_published_evaluation_workflows(
+                session=session,
+                tenant_id=current_tenant_id,
+                page=page,
+                limit=limit,
+                user_id=user_id,
+                named_only=named_only,
+                keyword=keyword,
+            )
+
+            app_ids = {w.app_id for w in workflows}
+            if app_ids:
+                apps = session.scalars(select(App).where(App.id.in_(app_ids))).all()
+                app_names = {a.id: a.name for a in apps}
+            else:
+                app_names = {}
+
+        items = []
+        for wf in workflows:
+            items.append(
+                {
+                    "id": wf.id,
+                    "app_id": wf.app_id,
+                    "app_name": app_names.get(wf.app_id, ""),
+                    "type": wf.type.value,
+                    "version": wf.version,
+                    "marked_name": wf.marked_name,
+                    "marked_comment": wf.marked_comment,
+                    "hash": wf.unique_hash,
+                    "created_by": wf.created_by_account,
+                    "created_at": wf.created_at,
+                    "updated_by": wf.updated_by_account,
+                    "updated_at": wf.updated_at,
+                }
+            )
+
+        return (
+            marshal(
+                {"items": items, "page": page, "limit": limit, "has_more": has_more},
+                available_evaluation_workflow_pagination_fields,
+            ),
+            200,
+        )
+
+
+@console_ns.route("/workspaces/current/evaluation-workflows/<string:workflow_id>/associated-targets")
+class EvaluationWorkflowAssociatedTargetsApi(Resource):
+    @console_ns.doc("list_evaluation_workflow_associated_targets")
+    @console_ns.doc(
+        description="List targets (apps / snippets / knowledge bases) that use the given workflow as customized metrics"
+    )
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def get(self, workflow_id: str):
+        """Return all evaluation targets that reference this workflow as customized metrics."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        with Session(db.engine) as session:
+            configs = EvaluationService.list_targets_by_customized_workflow(
+                session=session,
+                tenant_id=current_tenant_id,
+                customized_workflow_id=workflow_id,
+            )
+
+            target_ids_by_type: dict[str, list[str]] = {}
+            for cfg in configs:
+                target_ids_by_type.setdefault(cfg.target_type, []).append(cfg.target_id)
+
+            app_names: dict[str, str] = {}
+            if "app" in target_ids_by_type:
+                apps = session.scalars(select(App).where(App.id.in_(target_ids_by_type["app"]))).all()
+                app_names = {a.id: a.name for a in apps}
+
+            snippet_names: dict[str, str] = {}
+            if "snippets" in target_ids_by_type:
+                snippets = session.scalars(
+                    select(CustomizedSnippet).where(CustomizedSnippet.id.in_(target_ids_by_type["snippets"]))
+                ).all()
+                snippet_names = {s.id: s.name for s in snippets}
+
+            dataset_names: dict[str, str] = {}
+            if "knowledge_base" in target_ids_by_type:
+                datasets = session.scalars(
+                    select(Dataset).where(Dataset.id.in_(target_ids_by_type["knowledge_base"]))
+                ).all()
+                dataset_names = {d.id: d.name for d in datasets}
+
+        items = []
+        for cfg in configs:
+            name = ""
+            if cfg.target_type == "app":
+                name = app_names.get(cfg.target_id, "")
+            elif cfg.target_type == "snippets":
+                name = snippet_names.get(cfg.target_id, "")
+            elif cfg.target_type == "knowledge_base":
+                name = dataset_names.get(cfg.target_id, "")
+
+            items.append(
+                {
+                    "target_type": cfg.target_type,
+                    "target_id": cfg.target_id,
+                    "target_name": name,
+                }
+            )
+
+        return {"items": items}, 200
+
+
+# ---- Serialization Helpers ----
+
+
+def _serialize_evaluation_run(run: EvaluationRun) -> dict[str, object]:
+    return {
+        "id": run.id,
+        "tenant_id": run.tenant_id,
+        "target_type": run.target_type,
+        "target_id": run.target_id,
+        "evaluation_config_id": run.evaluation_config_id,
+        "status": run.status,
+        "dataset_file_id": run.dataset_file_id,
+        "result_file_id": run.result_file_id,
+        "total_items": run.total_items,
+        "completed_items": run.completed_items,
+        "failed_items": run.failed_items,
+        "progress": run.progress,
+        "metrics_summary": run.metrics_summary_dict,
+        "error": run.error,
+        "created_by": run.created_by,
+        "started_at": int(run.started_at.timestamp()) if run.started_at else None,
+        "completed_at": int(run.completed_at.timestamp()) if run.completed_at else None,
+        "created_at": int(run.created_at.timestamp()) if run.created_at else None,
+    }
+
+
+def _serialize_evaluation_run_item(item: EvaluationRunItem) -> dict[str, object]:
+    return {
+        "id": item.id,
+        "item_index": item.item_index,
+        "inputs": item.inputs_dict,
+        "expected_output": item.expected_output,
+        "actual_output": item.actual_output,
+        "metrics": item.metrics_list,
+        "judgment": item.judgment_dict,
+        "metadata": item.metadata_dict,
+        "error": item.error,
+        "overall_score": item.overall_score,
+    }
diff --git a/api/controllers/console/snippets/payloads.py b/api/controllers/console/snippets/payloads.py
new file mode 100644
index 0000000000..980506ccc4
--- /dev/null
+++ b/api/controllers/console/snippets/payloads.py
@@ -0,0 +1,135 @@
+from typing import Any, Literal
+
+from pydantic import BaseModel, Field, field_validator
+
+
+class SnippetListQuery(BaseModel):
+    """Query parameters for listing snippets."""
+
+    page: int = Field(default=1, ge=1, le=99999)
+    limit: int = Field(default=20, ge=1, le=100)
+    keyword: str | None = None
+    is_published: bool | None = Field(default=None, description="Filter by published status")
+    creators: list[str] | None = Field(default=None, description="Filter by creator account IDs")
+
+    @field_validator("creators", mode="before")
+    @classmethod
+    def parse_creators(cls, value: object) -> list[str] | None:
+        """Normalize creators filter from query string or list input."""
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return [creator.strip() for creator in value.split(",") if creator.strip()] or None
+        if isinstance(value, list):
+            return [str(creator).strip() for creator in value if str(creator).strip()] or None
+        return None
+
+
+class IconInfo(BaseModel):
+    """Icon information model."""
+
+    icon: str | None = None
+    icon_type: Literal["emoji", "image"] | None = None
+    icon_background: str | None = None
+    icon_url: str | None = None
+
+
+class InputFieldDefinition(BaseModel):
+    """Input field definition for snippet parameters."""
+
+    default: str | None = None
+    hint: bool | None = None
+    label: str | None = None
+    max_length: int | None = None
+    options: list[str] | None = None
+    placeholder: str | None = None
+    required: bool | None = None
+    type: str | None = None  # e.g., "text-input"
+
+
+class CreateSnippetPayload(BaseModel):
+    """Payload for creating a new snippet."""
+
+    name: str = Field(..., min_length=1, max_length=255)
+    description: str | None = Field(default=None, max_length=2000)
+    type: Literal["node", "group"] = "node"
+    icon_info: IconInfo | None = None
+    graph: dict[str, Any] | None = None
+    input_fields: list[InputFieldDefinition] | None = Field(default_factory=list)
+
+
+class UpdateSnippetPayload(BaseModel):
+    """Payload for updating a snippet."""
+
+    name: str | None = Field(default=None, min_length=1, max_length=255)
+    description: str | None = Field(default=None, max_length=2000)
+    icon_info: IconInfo | None = None
+
+
+class SnippetDraftSyncPayload(BaseModel):
+    """Payload for syncing snippet draft workflow."""
+
+    graph: dict[str, Any]
+    hash: str | None = None
+    conversation_variables: list[dict[str, Any]] | None = Field(
+        default=None,
+        description="Ignored. Snippet workflows do not persist conversation variables.",
+    )
+    input_fields: list[dict[str, Any]] | None = None
+
+
+class WorkflowRunQuery(BaseModel):
+    """Query parameters for workflow runs."""
+
+    last_id: str | None = None
+    limit: int = Field(default=20, ge=1, le=100)
+
+
+class SnippetDraftRunPayload(BaseModel):
+    """Payload for running snippet draft workflow."""
+
+    inputs: dict[str, Any]
+    files: list[dict[str, Any]] | None = None
+
+
+class SnippetDraftNodeRunPayload(BaseModel):
+    """Payload for running a single node in snippet draft workflow."""
+
+    inputs: dict[str, Any]
+    query: str = ""
+    files: list[dict[str, Any]] | None = None
+
+
+class SnippetIterationNodeRunPayload(BaseModel):
+    """Payload for running an iteration node in snippet draft workflow."""
+
+    inputs: dict[str, Any] | None = None
+
+
+class SnippetLoopNodeRunPayload(BaseModel):
+    """Payload for running a loop node in snippet draft workflow."""
+
+    inputs: dict[str, Any] | None = None
+
+
+class PublishWorkflowPayload(BaseModel):
+    """Payload for publishing snippet workflow."""
+
+    knowledge_base_setting: dict[str, Any] | None = None
+
+
+class SnippetImportPayload(BaseModel):
+    """Payload for importing snippet from DSL."""
+
+    mode: str = Field(..., description="Import mode: yaml-content or yaml-url")
+    yaml_content: str | None = Field(default=None, description="YAML content (required for yaml-content mode)")
+    yaml_url: str | None = Field(default=None, description="YAML URL (required for yaml-url mode)")
+    name: str | None = Field(default=None, description="Override snippet name")
+    description: str | None = Field(default=None, description="Override snippet description")
+    snippet_id: str | None = Field(default=None, description="Snippet ID to update (optional)")
+
+
+class IncludeSecretQuery(BaseModel):
+    """Query parameter for including secret variables in export."""
+
+    include_secret: str = Field(default="false", description="Whether to include secret variables")
diff --git a/api/controllers/console/snippets/snippet_workflow.py b/api/controllers/console/snippets/snippet_workflow.py
new file mode 100644
index 0000000000..d4b3ec5e4e
--- /dev/null
+++ b/api/controllers/console/snippets/snippet_workflow.py
@@ -0,0 +1,534 @@
+import logging
+from collections.abc import Callable
+from functools import wraps
+from typing import ParamSpec, TypeVar
+
+from flask import request
+from flask_restx import Resource, marshal_with
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import InternalServerError, NotFound
+
+from controllers.common.schema import register_schema_models
+from controllers.console import console_ns
+from controllers.console.app.error import DraftWorkflowNotExist, DraftWorkflowNotSync
+from controllers.console.app.workflow import workflow_model
+from controllers.console.app.workflow_run import (
+    workflow_run_detail_model,
+    workflow_run_node_execution_list_model,
+    workflow_run_node_execution_model,
+    workflow_run_pagination_model,
+)
+from controllers.console.snippets.payloads import (
+    PublishWorkflowPayload,
+    SnippetDraftNodeRunPayload,
+    SnippetDraftRunPayload,
+    SnippetDraftSyncPayload,
+    SnippetIterationNodeRunPayload,
+    SnippetLoopNodeRunPayload,
+    WorkflowRunQuery,
+)
+from controllers.console.wraps import (
+    account_initialization_required,
+    edit_permission_required,
+    setup_required,
+)
+from core.app.apps.base_app_queue_manager import AppQueueManager
+from core.app.entities.app_invoke_entities import InvokeFrom
+from extensions.ext_database import db
+from extensions.ext_redis import redis_client
+from graphon.graph_engine.manager import GraphEngineManager
+from libs import helper
+from libs.helper import TimestampField
+from libs.login import current_account_with_tenant, login_required
+from models.snippet import CustomizedSnippet
+from services.errors.app import WorkflowHashNotEqualError
+from services.snippet_generate_service import SnippetGenerateService
+from services.snippet_service import SnippetService
+
+logger = logging.getLogger(__name__)
+
+P = ParamSpec("P")
+R = TypeVar("R")
+
+# Register Pydantic models with Swagger
+register_schema_models(
+    console_ns,
+    SnippetDraftSyncPayload,
+    SnippetDraftNodeRunPayload,
+    SnippetDraftRunPayload,
+    SnippetIterationNodeRunPayload,
+    SnippetLoopNodeRunPayload,
+    WorkflowRunQuery,
+    PublishWorkflowPayload,
+)
+
+
+class SnippetNotFoundError(Exception):
+    """Snippet not found error."""
+
+    pass
+
+
+def get_snippet(view_func: Callable[P, R]):
+    """Decorator to fetch and validate snippet access."""
+
+    @wraps(view_func)
+    def decorated_view(*args: P.args, **kwargs: P.kwargs):
+        if not kwargs.get("snippet_id"):
+            raise ValueError("missing snippet_id in path parameters")
+
+        _, current_tenant_id = current_account_with_tenant()
+
+        snippet_id = str(kwargs.get("snippet_id"))
+        del kwargs["snippet_id"]
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=snippet_id,
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        kwargs["snippet"] = snippet
+
+        return view_func(*args, **kwargs)
+
+    return decorated_view
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft")
+class SnippetDraftWorkflowApi(Resource):
+    @console_ns.doc("get_snippet_draft_workflow")
+    @console_ns.response(200, "Draft workflow retrieved successfully", workflow_model)
+    @console_ns.response(404, "Snippet or draft workflow not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    @marshal_with(workflow_model)
+    def get(self, snippet: CustomizedSnippet):
+        """Get draft workflow for snippet."""
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+
+        if not workflow:
+            raise DraftWorkflowNotExist()
+
+        db.session.expunge(workflow)
+        workflow.conversation_variables = []
+        return workflow
+
+    @console_ns.doc("sync_snippet_draft_workflow")
+    @console_ns.expect(console_ns.models.get(SnippetDraftSyncPayload.__name__))
+    @console_ns.response(200, "Draft workflow synced successfully")
+    @console_ns.response(400, "Hash mismatch")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet):
+        """Sync draft workflow for snippet."""
+        current_user, _ = current_account_with_tenant()
+
+        payload = SnippetDraftSyncPayload.model_validate(console_ns.payload or {})
+
+        try:
+            snippet_service = SnippetService()
+            workflow = snippet_service.sync_draft_workflow(
+                snippet=snippet,
+                graph=payload.graph,
+                unique_hash=payload.hash,
+                account=current_user,
+                input_fields=payload.input_fields,
+            )
+        except WorkflowHashNotEqualError:
+            raise DraftWorkflowNotSync()
+        except ValueError as e:
+            return {"message": str(e)}, 400
+
+        return {
+            "result": "success",
+            "hash": workflow.unique_hash,
+            "updated_at": TimestampField().format(workflow.updated_at or workflow.created_at),
+        }
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/config")
+class SnippetDraftConfigApi(Resource):
+    @console_ns.doc("get_snippet_draft_config")
+    @console_ns.response(200, "Draft config retrieved successfully")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def get(self, snippet: CustomizedSnippet):
+        """Get snippet draft workflow configuration limits."""
+        return {
+            "parallel_depth_limit": 3,
+        }
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/publish")
+class SnippetPublishedWorkflowApi(Resource):
+    @console_ns.doc("get_snippet_published_workflow")
+    @console_ns.response(200, "Published workflow retrieved successfully", workflow_model)
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    @marshal_with(workflow_model)
+    def get(self, snippet: CustomizedSnippet):
+        """Get published workflow for snippet."""
+        if not snippet.is_published:
+            return None
+
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_published_workflow(snippet=snippet)
+
+        return workflow
+
+    @console_ns.doc("publish_snippet_workflow")
+    @console_ns.expect(console_ns.models.get(PublishWorkflowPayload.__name__))
+    @console_ns.response(200, "Workflow published successfully")
+    @console_ns.response(400, "No draft workflow found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet):
+        """Publish snippet workflow."""
+        current_user, _ = current_account_with_tenant()
+        snippet_service = SnippetService()
+
+        with Session(db.engine) as session:
+            snippet = session.merge(snippet)
+            try:
+                workflow = snippet_service.publish_workflow(
+                    session=session,
+                    snippet=snippet,
+                    account=current_user,
+                )
+                workflow_created_at = TimestampField().format(workflow.created_at)
+                session.commit()
+            except ValueError as e:
+                return {"message": str(e)}, 400
+
+        return {
+            "result": "success",
+            "created_at": workflow_created_at,
+        }
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/default-workflow-block-configs")
+class SnippetDefaultBlockConfigsApi(Resource):
+    @console_ns.doc("get_snippet_default_block_configs")
+    @console_ns.response(200, "Default block configs retrieved successfully")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def get(self, snippet: CustomizedSnippet):
+        """Get default block configurations for snippet workflow."""
+        snippet_service = SnippetService()
+        return snippet_service.get_default_block_configs()
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs")
+class SnippetWorkflowRunsApi(Resource):
+    @console_ns.doc("list_snippet_workflow_runs")
+    @console_ns.response(200, "Workflow runs retrieved successfully", workflow_run_pagination_model)
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @marshal_with(workflow_run_pagination_model)
+    def get(self, snippet: CustomizedSnippet):
+        """List workflow runs for snippet."""
+        query = WorkflowRunQuery.model_validate(
+            {
+                "last_id": request.args.get("last_id"),
+                "limit": request.args.get("limit", type=int, default=20),
+            }
+        )
+        args = {
+            "last_id": query.last_id,
+            "limit": query.limit,
+        }
+
+        snippet_service = SnippetService()
+        result = snippet_service.get_snippet_workflow_runs(snippet=snippet, args=args)
+
+        return result
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs/<uuid:run_id>")
+class SnippetWorkflowRunDetailApi(Resource):
+    @console_ns.doc("get_snippet_workflow_run_detail")
+    @console_ns.response(200, "Workflow run detail retrieved successfully", workflow_run_detail_model)
+    @console_ns.response(404, "Workflow run not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @marshal_with(workflow_run_detail_model)
+    def get(self, snippet: CustomizedSnippet, run_id):
+        """Get workflow run detail for snippet."""
+        run_id = str(run_id)
+
+        snippet_service = SnippetService()
+        workflow_run = snippet_service.get_snippet_workflow_run(snippet=snippet, run_id=run_id)
+
+        if not workflow_run:
+            raise NotFound("Workflow run not found")
+
+        return workflow_run
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs/<uuid:run_id>/node-executions")
+class SnippetWorkflowRunNodeExecutionsApi(Resource):
+    @console_ns.doc("list_snippet_workflow_run_node_executions")
+    @console_ns.response(200, "Node executions retrieved successfully", workflow_run_node_execution_list_model)
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @marshal_with(workflow_run_node_execution_list_model)
+    def get(self, snippet: CustomizedSnippet, run_id):
+        """List node executions for a workflow run."""
+        run_id = str(run_id)
+
+        snippet_service = SnippetService()
+        node_executions = snippet_service.get_snippet_workflow_run_node_executions(
+            snippet=snippet,
+            run_id=run_id,
+        )
+
+        return {"data": node_executions}
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/nodes/<string:node_id>/run")
+class SnippetDraftNodeRunApi(Resource):
+    @console_ns.doc("run_snippet_draft_node")
+    @console_ns.doc(description="Run a single node in snippet draft workflow (single-step debugging)")
+    @console_ns.doc(params={"snippet_id": "Snippet ID", "node_id": "Node ID"})
+    @console_ns.expect(console_ns.models.get(SnippetDraftNodeRunPayload.__name__))
+    @console_ns.response(200, "Node run completed successfully", workflow_run_node_execution_model)
+    @console_ns.response(404, "Snippet or draft workflow not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @marshal_with(workflow_run_node_execution_model)
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet, node_id: str):
+        """
+        Run a single node in snippet draft workflow.
+
+        Executes a specific node with provided inputs for single-step debugging.
+        Returns the node execution result including status, outputs, and timing.
+        """
+        current_user, _ = current_account_with_tenant()
+        payload = SnippetDraftNodeRunPayload.model_validate(console_ns.payload or {})
+
+        user_inputs = payload.inputs
+
+        # Get draft workflow for file parsing
+        snippet_service = SnippetService()
+        draft_workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not draft_workflow:
+            raise NotFound("Draft workflow not found")
+
+        files = SnippetGenerateService.parse_files(draft_workflow, payload.files)
+
+        workflow_node_execution = SnippetGenerateService.run_draft_node(
+            snippet=snippet,
+            node_id=node_id,
+            user_inputs=user_inputs,
+            account=current_user,
+            query=payload.query,
+            files=files,
+        )
+
+        return workflow_node_execution
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/nodes/<string:node_id>/last-run")
+class SnippetDraftNodeLastRunApi(Resource):
+    @console_ns.doc("get_snippet_draft_node_last_run")
+    @console_ns.doc(description="Get last run result for a node in snippet draft workflow")
+    @console_ns.doc(params={"snippet_id": "Snippet ID", "node_id": "Node ID"})
+    @console_ns.response(200, "Node last run retrieved successfully", workflow_run_node_execution_model)
+    @console_ns.response(404, "Snippet, draft workflow, or node last run not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @marshal_with(workflow_run_node_execution_model)
+    def get(self, snippet: CustomizedSnippet, node_id: str):
+        """
+        Get the last run result for a specific node in snippet draft workflow.
+
+        Returns the most recent execution record for the given node,
+        including status, inputs, outputs, and timing information.
+        """
+        snippet_service = SnippetService()
+        draft_workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not draft_workflow:
+            raise NotFound("Draft workflow not found")
+
+        node_exec = snippet_service.get_snippet_node_last_run(
+            snippet=snippet,
+            workflow=draft_workflow,
+            node_id=node_id,
+        )
+        if node_exec is None:
+            raise NotFound("Node last run not found")
+
+        return node_exec
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/iteration/nodes/<string:node_id>/run")
+class SnippetDraftRunIterationNodeApi(Resource):
+    @console_ns.doc("run_snippet_draft_iteration_node")
+    @console_ns.doc(description="Run draft workflow iteration node for snippet")
+    @console_ns.doc(params={"snippet_id": "Snippet ID", "node_id": "Node ID"})
+    @console_ns.expect(console_ns.models.get(SnippetIterationNodeRunPayload.__name__))
+    @console_ns.response(200, "Iteration node run started successfully (SSE stream)")
+    @console_ns.response(404, "Snippet or draft workflow not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet, node_id: str):
+        """
+        Run a draft workflow iteration node for snippet.
+
+        Iteration nodes execute their internal sub-graph multiple times over an input list.
+        Returns an SSE event stream with iteration progress and results.
+        """
+        current_user, _ = current_account_with_tenant()
+        args = SnippetIterationNodeRunPayload.model_validate(console_ns.payload or {}).model_dump(exclude_none=True)
+
+        try:
+            response = SnippetGenerateService.generate_single_iteration(
+                snippet=snippet, user=current_user, node_id=node_id, args=args, streaming=True
+            )
+
+            return helper.compact_generate_response(response)
+        except ValueError as e:
+            raise e
+        except Exception:
+            logger.exception("internal server error.")
+            raise InternalServerError()
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/loop/nodes/<string:node_id>/run")
+class SnippetDraftRunLoopNodeApi(Resource):
+    @console_ns.doc("run_snippet_draft_loop_node")
+    @console_ns.doc(description="Run draft workflow loop node for snippet")
+    @console_ns.doc(params={"snippet_id": "Snippet ID", "node_id": "Node ID"})
+    @console_ns.expect(console_ns.models.get(SnippetLoopNodeRunPayload.__name__))
+    @console_ns.response(200, "Loop node run started successfully (SSE stream)")
+    @console_ns.response(404, "Snippet or draft workflow not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet, node_id: str):
+        """
+        Run a draft workflow loop node for snippet.
+
+        Loop nodes execute their internal sub-graph repeatedly until a condition is met.
+        Returns an SSE event stream with loop progress and results.
+        """
+        current_user, _ = current_account_with_tenant()
+        args = SnippetLoopNodeRunPayload.model_validate(console_ns.payload or {})
+
+        try:
+            response = SnippetGenerateService.generate_single_loop(
+                snippet=snippet, user=current_user, node_id=node_id, args=args, streaming=True
+            )
+
+            return helper.compact_generate_response(response)
+        except ValueError as e:
+            raise e
+        except Exception:
+            logger.exception("internal server error.")
+            raise InternalServerError()
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/run")
+class SnippetDraftWorkflowRunApi(Resource):
+    @console_ns.doc("run_snippet_draft_workflow")
+    @console_ns.expect(console_ns.models.get(SnippetDraftRunPayload.__name__))
+    @console_ns.response(200, "Draft workflow run started successfully (SSE stream)")
+    @console_ns.response(404, "Snippet or draft workflow not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet):
+        """
+        Run draft workflow for snippet.
+
+        Executes the snippet's draft workflow with the provided inputs
+        and returns an SSE event stream with execution progress and results.
+        """
+        current_user, _ = current_account_with_tenant()
+
+        payload = SnippetDraftRunPayload.model_validate(console_ns.payload or {})
+        args = payload.model_dump(exclude_none=True)
+
+        try:
+            response = SnippetGenerateService.generate(
+                snippet=snippet,
+                user=current_user,
+                args=args,
+                invoke_from=InvokeFrom.DEBUGGER,
+                streaming=True,
+            )
+
+            return helper.compact_generate_response(response)
+        except ValueError as e:
+            raise e
+        except Exception:
+            logger.exception("internal server error.")
+            raise InternalServerError()
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflow-runs/tasks/<string:task_id>/stop")
+class SnippetWorkflowTaskStopApi(Resource):
+    @console_ns.doc("stop_snippet_workflow_task")
+    @console_ns.response(200, "Task stopped successfully")
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    def post(self, snippet: CustomizedSnippet, task_id: str):
+        """
+        Stop a running snippet workflow task.
+
+        Uses both the legacy stop flag mechanism and the graph engine
+        command channel for backward compatibility.
+        """
+        # Stop using both mechanisms for backward compatibility
+        # Legacy stop flag mechanism (without user check)
+        AppQueueManager.set_stop_flag_no_user_check(task_id)
+
+        # New graph engine command channel mechanism
+        GraphEngineManager(redis_client).send_stop_command(task_id)
+
+        return {"result": "success"}
diff --git a/api/controllers/console/snippets/snippet_workflow_draft_variable.py b/api/controllers/console/snippets/snippet_workflow_draft_variable.py
new file mode 100644
index 0000000000..ce3f5cef52
--- /dev/null
+++ b/api/controllers/console/snippets/snippet_workflow_draft_variable.py
@@ -0,0 +1,319 @@
+"""
+Snippet draft workflow variable APIs.
+
+Mirrors console app routes under /apps/.../workflows/draft/variables for snippet scope,
+using CustomizedSnippet.id as WorkflowDraftVariable.app_id (same invariant as snippet execution).
+
+Snippet workflows do not expose system variables (`node_id == sys`) or conversation variables
+(`node_id == conversation`): paginated list queries exclude those rows; single-variable GET/PATCH/DELETE/reset
+reject them; `GET .../system-variables` and `GET .../conversation-variables` return empty lists for API parity.
+Other routes mirror `workflow_draft_variable` app APIs under `/snippets/...`.
+"""
+
+from collections.abc import Callable
+from functools import wraps
+from typing import Any, ParamSpec, TypeVar
+
+from flask import Response, request
+from flask_restx import Resource, marshal, marshal_with
+from sqlalchemy.orm import Session
+
+from controllers.console import console_ns
+from controllers.console.app.error import DraftWorkflowNotExist
+from controllers.console.app.workflow_draft_variable import (
+    WorkflowDraftVariableListQuery,
+    WorkflowDraftVariableUpdatePayload,
+    _ensure_variable_access,
+    _file_access_controller,
+    validate_node_id,
+    workflow_draft_variable_list_model,
+    workflow_draft_variable_list_without_value_model,
+    workflow_draft_variable_model,
+)
+from controllers.console.snippets.snippet_workflow import get_snippet
+from controllers.console.wraps import account_initialization_required, edit_permission_required, setup_required
+from controllers.web.error import InvalidArgumentError, NotFoundError
+from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, SYSTEM_VARIABLE_NODE_ID
+from extensions.ext_database import db
+from factories.file_factory import build_from_mapping, build_from_mappings
+from factories.variable_factory import build_segment_with_type
+from graphon.variables.types import SegmentType
+from libs.login import current_user, login_required
+from models.snippet import CustomizedSnippet
+from models.workflow import WorkflowDraftVariable
+from services.snippet_service import SnippetService
+from services.workflow_draft_variable_service import WorkflowDraftVariableList, WorkflowDraftVariableService
+
+P = ParamSpec("P")
+R = TypeVar("R")
+
+_SNIPPET_EXCLUDED_DRAFT_VARIABLE_NODE_IDS: frozenset[str] = frozenset(
+    {SYSTEM_VARIABLE_NODE_ID, CONVERSATION_VARIABLE_NODE_ID}
+)
+
+
+def _ensure_snippet_draft_variable_row_allowed(
+    *,
+    variable: WorkflowDraftVariable,
+    variable_id: str,
+) -> None:
+    """Snippet scope only supports canvas-node draft variables; treat sys/conversation rows as not found."""
+    if variable.node_id in _SNIPPET_EXCLUDED_DRAFT_VARIABLE_NODE_IDS:
+        raise NotFoundError(description=f"variable not found, id={variable_id}")
+
+
+def _snippet_draft_var_prerequisite(f: Callable[P, R]) -> Callable[P, R]:
+    """Setup, auth, snippet resolution, and tenant edit permission (same stack as snippet workflow APIs)."""
+
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_snippet
+    @edit_permission_required
+    @wraps(f)
+    def wrapper(*args: P.args, **kwargs: P.kwargs) -> R:
+        return f(*args, **kwargs)
+
+    return wrapper
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/variables")
+class SnippetWorkflowVariableCollectionApi(Resource):
+    @console_ns.expect(console_ns.models[WorkflowDraftVariableListQuery.__name__])
+    @console_ns.doc("get_snippet_workflow_variables")
+    @console_ns.doc(description="List draft workflow variables without values (paginated, snippet scope)")
+    @console_ns.response(
+        200,
+        "Workflow variables retrieved successfully",
+        workflow_draft_variable_list_without_value_model,
+    )
+    @_snippet_draft_var_prerequisite
+    @marshal_with(workflow_draft_variable_list_without_value_model)
+    def get(self, snippet: CustomizedSnippet) -> WorkflowDraftVariableList:
+        args = WorkflowDraftVariableListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+
+        snippet_service = SnippetService()
+        if snippet_service.get_draft_workflow(snippet=snippet) is None:
+            raise DraftWorkflowNotExist()
+
+        with Session(bind=db.engine, expire_on_commit=False) as session:
+            draft_var_srv = WorkflowDraftVariableService(session=session)
+            workflow_vars = draft_var_srv.list_variables_without_values(
+                app_id=snippet.id,
+                page=args.page,
+                limit=args.limit,
+                user_id=current_user.id,
+                exclude_node_ids=_SNIPPET_EXCLUDED_DRAFT_VARIABLE_NODE_IDS,
+            )
+
+        return workflow_vars
+
+    @console_ns.doc("delete_snippet_workflow_variables")
+    @console_ns.doc(description="Delete all draft workflow variables for the current user (snippet scope)")
+    @console_ns.response(204, "Workflow variables deleted successfully")
+    @_snippet_draft_var_prerequisite
+    def delete(self, snippet: CustomizedSnippet) -> Response:
+        draft_var_srv = WorkflowDraftVariableService(session=db.session())
+        draft_var_srv.delete_user_workflow_variables(snippet.id, user_id=current_user.id)
+        db.session.commit()
+        return Response("", 204)
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/nodes/<string:node_id>/variables")
+class SnippetNodeVariableCollectionApi(Resource):
+    @console_ns.doc("get_snippet_node_variables")
+    @console_ns.doc(description="Get variables for a specific node (snippet draft workflow)")
+    @console_ns.response(200, "Node variables retrieved successfully", workflow_draft_variable_list_model)
+    @_snippet_draft_var_prerequisite
+    @marshal_with(workflow_draft_variable_list_model)
+    def get(self, snippet: CustomizedSnippet, node_id: str) -> WorkflowDraftVariableList:
+        validate_node_id(node_id)
+        with Session(bind=db.engine, expire_on_commit=False) as session:
+            draft_var_srv = WorkflowDraftVariableService(session=session)
+            node_vars = draft_var_srv.list_node_variables(snippet.id, node_id, user_id=current_user.id)
+
+        return node_vars
+
+    @console_ns.doc("delete_snippet_node_variables")
+    @console_ns.doc(description="Delete all variables for a specific node (snippet draft workflow)")
+    @console_ns.response(204, "Node variables deleted successfully")
+    @_snippet_draft_var_prerequisite
+    def delete(self, snippet: CustomizedSnippet, node_id: str) -> Response:
+        validate_node_id(node_id)
+        srv = WorkflowDraftVariableService(db.session())
+        srv.delete_node_variables(snippet.id, node_id, user_id=current_user.id)
+        db.session.commit()
+        return Response("", 204)
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/variables/<uuid:variable_id>")
+class SnippetVariableApi(Resource):
+    @console_ns.doc("get_snippet_workflow_variable")
+    @console_ns.doc(description="Get a specific draft workflow variable (snippet scope)")
+    @console_ns.response(200, "Variable retrieved successfully", workflow_draft_variable_model)
+    @console_ns.response(404, "Variable not found")
+    @_snippet_draft_var_prerequisite
+    @marshal_with(workflow_draft_variable_model)
+    def get(self, snippet: CustomizedSnippet, variable_id: str) -> WorkflowDraftVariable:
+        draft_var_srv = WorkflowDraftVariableService(session=db.session())
+        variable = _ensure_variable_access(
+            variable=draft_var_srv.get_variable(variable_id=variable_id),
+            app_id=snippet.id,
+            variable_id=variable_id,
+        )
+        _ensure_snippet_draft_variable_row_allowed(variable=variable, variable_id=variable_id)
+        return variable
+
+    @console_ns.doc("update_snippet_workflow_variable")
+    @console_ns.doc(description="Update a draft workflow variable (snippet scope)")
+    @console_ns.expect(console_ns.models[WorkflowDraftVariableUpdatePayload.__name__])
+    @console_ns.response(200, "Variable updated successfully", workflow_draft_variable_model)
+    @console_ns.response(404, "Variable not found")
+    @_snippet_draft_var_prerequisite
+    @marshal_with(workflow_draft_variable_model)
+    def patch(self, snippet: CustomizedSnippet, variable_id: str) -> WorkflowDraftVariable:
+        draft_var_srv = WorkflowDraftVariableService(session=db.session())
+        args_model = WorkflowDraftVariableUpdatePayload.model_validate(console_ns.payload or {})
+
+        variable = _ensure_variable_access(
+            variable=draft_var_srv.get_variable(variable_id=variable_id),
+            app_id=snippet.id,
+            variable_id=variable_id,
+        )
+        _ensure_snippet_draft_variable_row_allowed(variable=variable, variable_id=variable_id)
+
+        new_name = args_model.name
+        raw_value = args_model.value
+        if new_name is None and raw_value is None:
+            return variable
+
+        new_value = None
+        if raw_value is not None:
+            if variable.value_type == SegmentType.FILE:
+                if not isinstance(raw_value, dict):
+                    raise InvalidArgumentError(description=f"expected dict for file, got {type(raw_value)}")
+                raw_value = build_from_mapping(
+                    mapping=raw_value,
+                    tenant_id=snippet.tenant_id,
+                    access_controller=_file_access_controller,
+                )
+            elif variable.value_type == SegmentType.ARRAY_FILE:
+                if not isinstance(raw_value, list):
+                    raise InvalidArgumentError(description=f"expected list for files, got {type(raw_value)}")
+                if len(raw_value) > 0 and not isinstance(raw_value[0], dict):
+                    raise InvalidArgumentError(description=f"expected dict for files[0], got {type(raw_value)}")
+                raw_value = build_from_mappings(
+                    mappings=raw_value,
+                    tenant_id=snippet.tenant_id,
+                    access_controller=_file_access_controller,
+                )
+            new_value = build_segment_with_type(variable.value_type, raw_value)
+        draft_var_srv.update_variable(variable, name=new_name, value=new_value)
+        db.session.commit()
+        return variable
+
+    @console_ns.doc("delete_snippet_workflow_variable")
+    @console_ns.doc(description="Delete a draft workflow variable (snippet scope)")
+    @console_ns.response(204, "Variable deleted successfully")
+    @console_ns.response(404, "Variable not found")
+    @_snippet_draft_var_prerequisite
+    def delete(self, snippet: CustomizedSnippet, variable_id: str) -> Response:
+        draft_var_srv = WorkflowDraftVariableService(session=db.session())
+        variable = _ensure_variable_access(
+            variable=draft_var_srv.get_variable(variable_id=variable_id),
+            app_id=snippet.id,
+            variable_id=variable_id,
+        )
+        _ensure_snippet_draft_variable_row_allowed(variable=variable, variable_id=variable_id)
+        draft_var_srv.delete_variable(variable)
+        db.session.commit()
+        return Response("", 204)
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/variables/<uuid:variable_id>/reset")
+class SnippetVariableResetApi(Resource):
+    @console_ns.doc("reset_snippet_workflow_variable")
+    @console_ns.doc(description="Reset a draft workflow variable to its default value (snippet scope)")
+    @console_ns.response(200, "Variable reset successfully", workflow_draft_variable_model)
+    @console_ns.response(204, "Variable reset (no content)")
+    @console_ns.response(404, "Variable not found")
+    @_snippet_draft_var_prerequisite
+    def put(self, snippet: CustomizedSnippet, variable_id: str) -> Response | Any:
+        draft_var_srv = WorkflowDraftVariableService(session=db.session())
+        snippet_service = SnippetService()
+        draft_workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if draft_workflow is None:
+            raise NotFoundError(
+                f"Draft workflow not found, snippet_id={snippet.id}",
+            )
+        variable = _ensure_variable_access(
+            variable=draft_var_srv.get_variable(variable_id=variable_id),
+            app_id=snippet.id,
+            variable_id=variable_id,
+        )
+        _ensure_snippet_draft_variable_row_allowed(variable=variable, variable_id=variable_id)
+
+        resetted = draft_var_srv.reset_variable(draft_workflow, variable)
+        db.session.commit()
+        if resetted is None:
+            return Response("", 204)
+        return marshal(resetted, workflow_draft_variable_model)
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/conversation-variables")
+class SnippetConversationVariableCollectionApi(Resource):
+    @console_ns.doc("get_snippet_conversation_variables")
+    @console_ns.doc(
+        description="Conversation variables are not used in snippet workflows; returns an empty list for API parity"
+    )
+    @console_ns.response(200, "Conversation variables retrieved successfully", workflow_draft_variable_list_model)
+    @_snippet_draft_var_prerequisite
+    @marshal_with(workflow_draft_variable_list_model)
+    def get(self, snippet: CustomizedSnippet) -> WorkflowDraftVariableList:
+        return WorkflowDraftVariableList(variables=[])
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/system-variables")
+class SnippetSystemVariableCollectionApi(Resource):
+    @console_ns.doc("get_snippet_system_variables")
+    @console_ns.doc(
+        description="System variables are not used in snippet workflows; returns an empty list for API parity"
+    )
+    @console_ns.response(200, "System variables retrieved successfully", workflow_draft_variable_list_model)
+    @_snippet_draft_var_prerequisite
+    @marshal_with(workflow_draft_variable_list_model)
+    def get(self, snippet: CustomizedSnippet) -> WorkflowDraftVariableList:
+        return WorkflowDraftVariableList(variables=[])
+
+
+@console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft/environment-variables")
+class SnippetEnvironmentVariableCollectionApi(Resource):
+    @console_ns.doc("get_snippet_environment_variables")
+    @console_ns.doc(description="Get environment variables from snippet draft workflow graph")
+    @console_ns.response(200, "Environment variables retrieved successfully")
+    @console_ns.response(404, "Draft workflow not found")
+    @_snippet_draft_var_prerequisite
+    def get(self, snippet: CustomizedSnippet) -> dict[str, list[dict[str, Any]]]:
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if workflow is None:
+            raise DraftWorkflowNotExist()
+
+        env_vars_list: list[dict[str, Any]] = []
+        for v in workflow.environment_variables:
+            env_vars_list.append(
+                {
+                    "id": v.id,
+                    "type": "env",
+                    "name": v.name,
+                    "description": v.description,
+                    "selector": v.selector,
+                    "value_type": v.value_type.exposed_type().value,
+                    "value": v.value,
+                    "edited": False,
+                    "visible": True,
+                    "editable": True,
+                }
+            )
+
+        return {"items": env_vars_list}
diff --git a/api/controllers/console/workspace/snippets.py b/api/controllers/console/workspace/snippets.py
new file mode 100644
index 0000000000..13bfc37f71
--- /dev/null
+++ b/api/controllers/console/workspace/snippets.py
@@ -0,0 +1,380 @@
+import logging
+from urllib.parse import quote
+
+from flask import Response, request
+from flask_restx import Resource, marshal
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import NotFound
+
+from controllers.common.schema import register_schema_models
+from controllers.console import console_ns
+from controllers.console.snippets.payloads import (
+    CreateSnippetPayload,
+    IncludeSecretQuery,
+    SnippetImportPayload,
+    SnippetListQuery,
+    UpdateSnippetPayload,
+)
+from controllers.console.wraps import (
+    account_initialization_required,
+    edit_permission_required,
+    setup_required,
+)
+from extensions.ext_database import db
+from fields.snippet_fields import snippet_fields, snippet_list_fields, snippet_pagination_fields
+from libs.login import current_account_with_tenant, login_required
+from models.snippet import SnippetType
+from services.app_dsl_service import ImportStatus
+from services.snippet_dsl_service import SnippetDslService
+from services.snippet_service import SnippetService
+
+logger = logging.getLogger(__name__)
+
+# Register Pydantic models with Swagger
+register_schema_models(
+    console_ns,
+    SnippetListQuery,
+    CreateSnippetPayload,
+    UpdateSnippetPayload,
+    SnippetImportPayload,
+    IncludeSecretQuery,
+)
+
+# Create namespace models for marshaling
+snippet_model = console_ns.model("Snippet", snippet_fields)
+snippet_list_model = console_ns.model("SnippetList", snippet_list_fields)
+snippet_pagination_model = console_ns.model("SnippetPagination", snippet_pagination_fields)
+
+
+@console_ns.route("/workspaces/current/customized-snippets")
+class CustomizedSnippetsApi(Resource):
+    @console_ns.doc("list_customized_snippets")
+    @console_ns.expect(console_ns.models.get(SnippetListQuery.__name__))
+    @console_ns.response(200, "Snippets retrieved successfully", snippet_pagination_model)
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self):
+        """List customized snippets with pagination and search."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        query_params = request.args.to_dict()
+        query = SnippetListQuery.model_validate(query_params)
+
+        snippets, total, has_more = SnippetService.get_snippets(
+            tenant_id=current_tenant_id,
+            page=query.page,
+            limit=query.limit,
+            keyword=query.keyword,
+            is_published=query.is_published,
+            creators=query.creators,
+        )
+
+        return {
+            "data": marshal(snippets, snippet_list_fields),
+            "page": query.page,
+            "limit": query.limit,
+            "total": total,
+            "has_more": has_more,
+        }, 200
+
+    @console_ns.doc("create_customized_snippet")
+    @console_ns.expect(console_ns.models.get(CreateSnippetPayload.__name__))
+    @console_ns.response(201, "Snippet created successfully", snippet_model)
+    @console_ns.response(400, "Invalid request or name already exists")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def post(self):
+        """Create a new customized snippet."""
+        current_user, current_tenant_id = current_account_with_tenant()
+
+        payload = CreateSnippetPayload.model_validate(console_ns.payload or {})
+
+        try:
+            snippet_type = SnippetType(payload.type)
+        except ValueError:
+            snippet_type = SnippetType.NODE
+
+        try:
+            snippet = SnippetService.create_snippet(
+                tenant_id=current_tenant_id,
+                name=payload.name,
+                description=payload.description,
+                snippet_type=snippet_type,
+                icon_info=payload.icon_info.model_dump() if payload.icon_info else None,
+                input_fields=[f.model_dump() for f in payload.input_fields] if payload.input_fields else None,
+                account=current_user,
+            )
+        except ValueError as e:
+            return {"message": str(e)}, 400
+
+        return marshal(snippet, snippet_fields), 201
+
+
+@console_ns.route("/workspaces/current/customized-snippets/<uuid:snippet_id>")
+class CustomizedSnippetDetailApi(Resource):
+    @console_ns.doc("get_customized_snippet")
+    @console_ns.response(200, "Snippet retrieved successfully", snippet_model)
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self, snippet_id: str):
+        """Get customized snippet details."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=str(snippet_id),
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        return marshal(snippet, snippet_fields), 200
+
+    @console_ns.doc("update_customized_snippet")
+    @console_ns.expect(console_ns.models.get(UpdateSnippetPayload.__name__))
+    @console_ns.response(200, "Snippet updated successfully", snippet_model)
+    @console_ns.response(400, "Invalid request or name already exists")
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def patch(self, snippet_id: str):
+        """Update customized snippet."""
+        current_user, current_tenant_id = current_account_with_tenant()
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=str(snippet_id),
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        payload = UpdateSnippetPayload.model_validate(console_ns.payload or {})
+        update_data = payload.model_dump(exclude_unset=True)
+
+        if "icon_info" in update_data and update_data["icon_info"] is not None:
+            update_data["icon_info"] = payload.icon_info.model_dump() if payload.icon_info else None
+
+        if not update_data:
+            return {"message": "No valid fields to update"}, 400
+
+        try:
+            with Session(db.engine, expire_on_commit=False) as session:
+                snippet = session.merge(snippet)
+                snippet = SnippetService.update_snippet(
+                    session=session,
+                    snippet=snippet,
+                    account_id=current_user.id,
+                    data=update_data,
+                )
+                session.commit()
+        except ValueError as e:
+            return {"message": str(e)}, 400
+
+        return marshal(snippet, snippet_fields), 200
+
+    @console_ns.doc("delete_customized_snippet")
+    @console_ns.response(204, "Snippet deleted successfully")
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def delete(self, snippet_id: str):
+        """Delete customized snippet."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=str(snippet_id),
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        with Session(db.engine) as session:
+            snippet = session.merge(snippet)
+            SnippetService.delete_snippet(
+                session=session,
+                snippet=snippet,
+            )
+            session.commit()
+
+        return "", 204
+
+
+@console_ns.route("/workspaces/current/customized-snippets/<uuid:snippet_id>/export")
+class CustomizedSnippetExportApi(Resource):
+    @console_ns.doc("export_customized_snippet")
+    @console_ns.doc(description="Export snippet configuration as DSL")
+    @console_ns.doc(params={"snippet_id": "Snippet ID to export"})
+    @console_ns.response(200, "Snippet exported successfully")
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def get(self, snippet_id: str):
+        """Export snippet as DSL."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=str(snippet_id),
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        # Get include_secret parameter
+        query = IncludeSecretQuery.model_validate(request.args.to_dict())
+
+        with Session(db.engine) as session:
+            export_service = SnippetDslService(session)
+            result = export_service.export_snippet_dsl(snippet=snippet, include_secret=query.include_secret == "true")
+
+        # Set filename with .snippet extension
+        filename = f"{snippet.name}.snippet"
+        encoded_filename = quote(filename)
+        
+        response = Response(
+            result,
+            mimetype="application/x-yaml",
+        )
+        response.headers["Content-Disposition"] = f"attachment; filename*=UTF-8''{encoded_filename}"
+        response.headers["Content-Type"] = "application/x-yaml"
+        
+        return response
+
+
+@console_ns.route("/workspaces/current/customized-snippets/imports")
+class CustomizedSnippetImportApi(Resource):
+    @console_ns.doc("import_customized_snippet")
+    @console_ns.doc(description="Import snippet from DSL")
+    @console_ns.expect(console_ns.models.get(SnippetImportPayload.__name__))
+    @console_ns.response(200, "Snippet imported successfully")
+    @console_ns.response(202, "Import pending confirmation")
+    @console_ns.response(400, "Import failed")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def post(self):
+        """Import snippet from DSL."""
+        current_user, _ = current_account_with_tenant()
+        payload = SnippetImportPayload.model_validate(console_ns.payload or {})
+
+        with Session(db.engine) as session:
+            import_service = SnippetDslService(session)
+            result = import_service.import_snippet(
+                account=current_user,
+                import_mode=payload.mode,
+                yaml_content=payload.yaml_content,
+                yaml_url=payload.yaml_url,
+                snippet_id=payload.snippet_id,
+                name=payload.name,
+                description=payload.description,
+            )
+            session.commit()
+
+        # Return appropriate status code based on result
+        status = result.status
+        if status == ImportStatus.FAILED:
+            return result.model_dump(mode="json"), 400
+        elif status == ImportStatus.PENDING:
+            return result.model_dump(mode="json"), 202
+        return result.model_dump(mode="json"), 200
+
+
+@console_ns.route("/workspaces/current/customized-snippets/imports/<string:import_id>/confirm")
+class CustomizedSnippetImportConfirmApi(Resource):
+    @console_ns.doc("confirm_snippet_import")
+    @console_ns.doc(description="Confirm a pending snippet import")
+    @console_ns.doc(params={"import_id": "Import ID to confirm"})
+    @console_ns.response(200, "Import confirmed successfully")
+    @console_ns.response(400, "Import failed")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def post(self, import_id: str):
+        """Confirm a pending snippet import."""
+        current_user, _ = current_account_with_tenant()
+
+        with Session(db.engine) as session:
+            import_service = SnippetDslService(session)
+            result = import_service.confirm_import(import_id=import_id, account=current_user)
+            session.commit()
+
+        if result.status == ImportStatus.FAILED:
+            return result.model_dump(mode="json"), 400
+        return result.model_dump(mode="json"), 200
+
+
+@console_ns.route("/workspaces/current/customized-snippets/<uuid:snippet_id>/check-dependencies")
+class CustomizedSnippetCheckDependenciesApi(Resource):
+    @console_ns.doc("check_snippet_dependencies")
+    @console_ns.doc(description="Check dependencies for a snippet")
+    @console_ns.doc(params={"snippet_id": "Snippet ID"})
+    @console_ns.response(200, "Dependencies checked successfully")
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def get(self, snippet_id: str):
+        """Check dependencies for a snippet."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=str(snippet_id),
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        with Session(db.engine) as session:
+            import_service = SnippetDslService(session)
+            result = import_service.check_dependencies(snippet=snippet)
+
+        return result.model_dump(mode="json"), 200
+
+
+@console_ns.route("/workspaces/current/customized-snippets/<uuid:snippet_id>/use-count/increment")
+class CustomizedSnippetUseCountIncrementApi(Resource):
+    @console_ns.doc("increment_snippet_use_count")
+    @console_ns.doc(description="Increment snippet use count by 1")
+    @console_ns.doc(params={"snippet_id": "Snippet ID"})
+    @console_ns.response(200, "Use count incremented successfully")
+    @console_ns.response(404, "Snippet not found")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    def post(self, snippet_id: str):
+        """Increment snippet use count when it is inserted into a workflow."""
+        _, current_tenant_id = current_account_with_tenant()
+
+        snippet = SnippetService.get_snippet_by_id(
+            snippet_id=str(snippet_id),
+            tenant_id=current_tenant_id,
+        )
+
+        if not snippet:
+            raise NotFound("Snippet not found")
+
+        with Session(db.engine) as session:
+            snippet = session.merge(snippet)
+            SnippetService.increment_use_count(session=session, snippet=snippet)
+            session.commit()
+            session.refresh(snippet)
+
+        return {"result": "success", "use_count": snippet.use_count}, 200
diff --git a/api/core/app/apps/workflow/app_generator.py b/api/core/app/apps/workflow/app_generator.py
index 6074e81d1e..ba070ffa94 100644
--- a/api/core/app/apps/workflow/app_generator.py
+++ b/api/core/app/apps/workflow/app_generator.py
@@ -14,7 +14,7 @@ from graphon.runtime import GraphRuntimeState
 from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
 from pydantic import ValidationError
 from sqlalchemy import select
-from sqlalchemy.orm import sessionmaker
+from sqlalchemy.orm import Session, sessionmaker
 
 import contexts
 from configs import dify_config
@@ -54,6 +54,25 @@ logger = logging.getLogger(__name__)
 
 
 class WorkflowAppGenerator(BaseAppGenerator):
+    @staticmethod
+    def _ensure_snippet_start_node_in_worker(*, session: Session, workflow: Workflow) -> Workflow:
+        """Re-apply snippet virtual Start injection after worker reloads workflow from DB."""
+        if workflow.type != "snippet":
+            return workflow
+
+        from models.snippet import CustomizedSnippet
+        from services.snippet_generate_service import SnippetGenerateService
+
+        snippet = session.scalar(
+            select(CustomizedSnippet).where(
+                CustomizedSnippet.id == workflow.app_id,
+                CustomizedSnippet.tenant_id == workflow.tenant_id,
+            )
+        )
+        if snippet is None:
+            return workflow
+        return SnippetGenerateService.ensure_start_node_for_worker(workflow, snippet)
+
     @staticmethod
     def _should_prepare_user_inputs(args: Mapping[str, Any]) -> bool:
         return not bool(args.get(SKIP_PREPARE_USER_INPUTS_KEY))
@@ -557,6 +576,8 @@ class WorkflowAppGenerator(BaseAppGenerator):
                 if workflow is None:
                     raise ValueError("Workflow not found")
 
+                workflow = self._ensure_snippet_start_node_in_worker(session=session, workflow=workflow)
+
                 # Determine system_user_id based on invocation source
                 is_external_api_call = application_generate_entity.invoke_from in {
                     InvokeFrom.WEB_APP,
diff --git a/api/core/evaluation/__init__.py b/api/core/evaluation/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/evaluation/base_evaluation_instance.py b/api/core/evaluation/base_evaluation_instance.py
new file mode 100644
index 0000000000..67fbf0374c
--- /dev/null
+++ b/api/core/evaluation/base_evaluation_instance.py
@@ -0,0 +1,279 @@
+import logging
+from abc import ABC, abstractmethod
+from collections.abc import Mapping
+from typing import Any
+
+from core.evaluation.entities.evaluation_entity import (
+    CustomizedMetrics,
+    EvaluationCategory,
+    EvaluationItemInput,
+    EvaluationItemResult,
+    EvaluationMetric,
+    NodeInfo,
+)
+from graphon.node_events.base import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class BaseEvaluationInstance(ABC):
+    """Abstract base class for evaluation framework adapters."""
+
+    @abstractmethod
+    def evaluate_llm(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Evaluate LLM outputs using the configured framework."""
+        ...
+
+    @abstractmethod
+    def evaluate_retrieval(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Evaluate retrieval quality using the configured framework."""
+        ...
+
+    @abstractmethod
+    def evaluate_agent(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Evaluate agent outputs using the configured framework."""
+        ...
+
+    @abstractmethod
+    def get_supported_metrics(self, category: EvaluationCategory) -> list[str]:
+        """Return the list of supported metric names for a given evaluation category."""
+        ...
+
+    def evaluate_with_customized_workflow(
+        self,
+        node_run_result_mapping_list: list[dict[str, NodeRunResult]],
+        customized_metrics: CustomizedMetrics,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Evaluate using a published workflow as the evaluator.
+
+        The evaluator workflow's output variables are treated as metrics:
+        each output variable name becomes a metric name, and its value
+        becomes the score.
+
+        Args:
+            node_run_result_mapping_list: One mapping per test-data item,
+                where each mapping is ``{node_id: NodeRunResult}`` from the
+                target execution.
+            customized_metrics: Contains ``evaluation_workflow_id`` (the
+                published evaluator workflow) and ``input_fields`` (value
+                sources for the evaluator's input variables).
+            tenant_id: Tenant scope.
+
+        Returns:
+            A list of ``EvaluationItemResult`` with metrics extracted from
+            the evaluator workflow's output variables.
+        """
+        from sqlalchemy.orm import Session
+
+        from core.app.apps.workflow.app_generator import WorkflowAppGenerator
+        from core.app.entities.app_invoke_entities import InvokeFrom
+        from core.evaluation.runners import get_service_account_for_app
+        from models.engine import db
+        from models.model import App
+        from services.workflow_service import WorkflowService
+
+        workflow_id = customized_metrics.evaluation_workflow_id
+        if not workflow_id:
+            raise ValueError("customized_metrics must contain 'evaluation_workflow_id' for customized evaluator")
+
+        # Load the evaluator workflow resources using a dedicated session
+        with Session(db.engine, expire_on_commit=False) as session, session.begin():
+            app = session.query(App).filter_by(id=workflow_id, tenant_id=tenant_id).first()
+            if not app:
+                raise ValueError(f"Evaluation workflow app {workflow_id} not found in tenant {tenant_id}")
+            service_account = get_service_account_for_app(session, workflow_id)
+
+        workflow_service = WorkflowService()
+        published_workflow = workflow_service.get_published_workflow(app_model=app)
+        if not published_workflow:
+            raise ValueError(f"No published workflow found for evaluation app {workflow_id}")
+
+        eval_results: list[EvaluationItemResult] = []
+        for idx, node_run_result_mapping in enumerate(node_run_result_mapping_list):
+            try:
+                workflow_inputs = self._build_workflow_inputs(
+                    customized_metrics.input_fields,
+                    node_run_result_mapping,
+                )
+
+                generator = WorkflowAppGenerator()
+                response: Mapping[str, Any] = generator.generate(
+                    app_model=app,
+                    workflow=published_workflow,
+                    user=service_account,
+                    args={"inputs": workflow_inputs},
+                    invoke_from=InvokeFrom.SERVICE_API,
+                    streaming=False,
+                    call_depth=0,
+                )
+
+                metrics = self._extract_workflow_metrics(response, workflow_id)
+                eval_results.append(
+                    EvaluationItemResult(
+                        index=idx,
+                        metrics=metrics,
+                    )
+                )
+            except Exception:
+                logger.exception(
+                    "Customized evaluator failed for item %d with workflow %s",
+                    idx,
+                    workflow_id,
+                )
+                eval_results.append(EvaluationItemResult(index=idx))
+
+        return eval_results
+
+    @staticmethod
+    def _build_workflow_inputs(
+        input_fields: dict[str, Any],
+        node_run_result_mapping: dict[str, NodeRunResult],
+    ) -> dict[str, Any]:
+        """Build customized workflow inputs by resolving value sources.
+
+        Each entry in ``input_fields`` maps a workflow input variable name
+        to its value source, which can be:
+
+          - **Constant**: a plain string without ``{{#…#}}`` used as-is.
+          - **Expression**: a string containing one or more
+            ``{{#node_id.output_key#}}`` selectors (same format as
+            ``VariableTemplateParser``) resolved from
+            ``node_run_result_mapping``.
+
+        """
+        from graphon.nodes.base.variable_template_parser import REGEX as VARIABLE_REGEX
+
+        workflow_inputs: dict[str, Any] = {}
+
+        for field_name, value_source in input_fields.items():
+            if not isinstance(value_source, str):
+                # Non-string values (numbers, bools, dicts) are used directly.
+                workflow_inputs[field_name] = value_source
+                continue
+
+            # Check if the entire value is a single expression.
+            full_match = VARIABLE_REGEX.fullmatch(value_source)
+            if full_match:
+                workflow_inputs[field_name] = resolve_variable_selector(
+                    full_match.group(1),
+                    node_run_result_mapping,
+                )
+            elif VARIABLE_REGEX.search(value_source):
+                # Mixed template: interpolate all expressions as strings.
+                workflow_inputs[field_name] = VARIABLE_REGEX.sub(
+                    lambda m: str(resolve_variable_selector(m.group(1), node_run_result_mapping)),
+                    value_source,
+                )
+            else:
+                # Plain constant — no expression markers.
+                workflow_inputs[field_name] = value_source
+
+        return workflow_inputs
+
+    @staticmethod
+    def _extract_workflow_metrics(
+        response: Mapping[str, object],
+        evaluation_workflow_id: str,
+    ) -> list[EvaluationMetric]:
+        """Extract evaluation metrics from workflow output variables.
+
+        Each metric's ``node_info`` is set with *evaluation_workflow_id* as
+        the ``node_id``, so that judgment conditions can reference customized
+        metrics via ``variable_selector: [evaluation_workflow_id, metric_name]``.
+        """
+        metrics: list[EvaluationMetric] = []
+        node_info = NodeInfo(node_id=evaluation_workflow_id, type="customized", title="customized")
+
+        data = response.get("data")
+        if not isinstance(data, Mapping):
+            logger.warning("Unexpected workflow response format: missing 'data' dict")
+            return metrics
+
+        outputs = data.get("outputs")
+        if not isinstance(outputs, dict):
+            logger.warning("Unexpected workflow response format: 'outputs' is not a dict")
+            return metrics
+
+        for key, raw_value in outputs.items():
+            if not isinstance(key, str):
+                continue
+            metrics.append(EvaluationMetric(name=key, value=raw_value, node_info=node_info))
+
+        return metrics
+
+
+def resolve_variable_selector(
+    selector_raw: str,
+    node_run_result_mapping: dict[str, NodeRunResult],
+) -> object:
+    """
+    Resolve a ``#node_id.output_key#`` selector against node run results.
+    """
+    #
+    cleaned = selector_raw.strip("#")
+    parts = cleaned.split(".")
+
+    if len(parts) < 2:
+        logger.warning(
+            "Selector '%s' must have at least node_id.output_key",
+            selector_raw,
+        )
+        return ""
+
+    node_id = parts[0]
+    output_path = parts[1:]
+
+    node_result = node_run_result_mapping.get(node_id)
+    if not node_result or not node_result.outputs:
+        logger.warning(
+            "Selector '%s': node '%s' not found or has no outputs",
+            selector_raw,
+            node_id,
+        )
+        return ""
+
+    # Traverse the output path to support nested keys.
+    current: object = node_result.outputs
+    for key in output_path:
+        if isinstance(current, Mapping):
+            next_val = current.get(key)
+            if next_val is None:
+                logger.warning(
+                    "Selector '%s': key '%s' not found in node '%s' outputs",
+                    selector_raw,
+                    key,
+                    node_id,
+                )
+                return ""
+            current = next_val
+        else:
+            logger.warning(
+                "Selector '%s': cannot traverse into non-dict value at key '%s'",
+                selector_raw,
+                key,
+            )
+            return ""
+
+    return current if current is not None else ""
diff --git a/api/core/evaluation/entities/__init__.py b/api/core/evaluation/entities/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/evaluation/entities/config_entity.py b/api/core/evaluation/entities/config_entity.py
new file mode 100644
index 0000000000..ef9f22f185
--- /dev/null
+++ b/api/core/evaluation/entities/config_entity.py
@@ -0,0 +1,27 @@
+from enum import StrEnum
+
+from pydantic import BaseModel
+
+
+class EvaluationFrameworkEnum(StrEnum):
+    RAGAS = "ragas"
+    DEEPEVAL = "deepeval"
+    NONE = "none"
+
+
+class BaseEvaluationConfig(BaseModel):
+    """Base configuration for evaluation frameworks."""
+
+    pass
+
+
+class RagasConfig(BaseEvaluationConfig):
+    """RAGAS-specific configuration."""
+
+    pass
+
+
+class DeepEvalConfig(BaseEvaluationConfig):
+    """DeepEval-specific configuration."""
+
+    pass
diff --git a/api/core/evaluation/entities/evaluation_entity.py b/api/core/evaluation/entities/evaluation_entity.py
new file mode 100644
index 0000000000..a87354b526
--- /dev/null
+++ b/api/core/evaluation/entities/evaluation_entity.py
@@ -0,0 +1,226 @@
+from enum import StrEnum
+from typing import Any
+
+from pydantic import BaseModel, Field
+
+from core.evaluation.entities.judgment_entity import JudgmentConfig, JudgmentResult
+
+
+class EvaluationCategory(StrEnum):
+    LLM = "llm"
+    RETRIEVAL = "knowledge_retrieval"
+    AGENT = "agent"
+    WORKFLOW = "workflow"
+    SNIPPET = "snippet"
+    KNOWLEDGE_BASE = "knowledge_base"
+
+
+class EvaluationMetricName(StrEnum):
+    """Canonical metric names shared across all evaluation frameworks.
+
+    Each framework maps these names to its own internal implementation.
+    A framework that does not support a given metric should log a warning
+    and skip it rather than raising an error.
+
+    ── LLM / general text-quality metrics ──────────────────────────────────
+    FAITHFULNESS
+        Measures whether every claim in the model's response is grounded in
+        the provided retrieved context. A high score means the answer
+        contains no hallucinated content — each statement can be traced back
+        to a passage in the context.
+        Required fields: user_input, response, retrieved_contexts.
+
+    ANSWER_RELEVANCY
+        Measures how well the model's response addresses the user's question.
+        A high score means the answer stays on-topic; a low score indicates
+        irrelevant content or a failure to answer the actual question.
+        Required fields: user_input, response.
+
+    ANSWER_CORRECTNESS
+        Measures the factual accuracy and completeness of the model's answer
+        relative to a ground-truth reference. It combines semantic similarity
+        with key-fact coverage, so both meaning and content matter.
+        Required fields: user_input, response, reference (expected_output).
+
+    SEMANTIC_SIMILARITY
+        Measures the cosine similarity between the model's response and the
+        reference answer in an embedding space. It evaluates whether the two
+        texts convey the same meaning, independent of factual correctness.
+        Required fields: response, reference (expected_output).
+
+    ── Retrieval-quality metrics ────────────────────────────────────────────
+    CONTEXT_PRECISION
+        Measures the proportion of retrieved context chunks that are actually
+        relevant to the question (precision). A high score means the retrieval
+        pipeline returns little noise.
+        Required fields: user_input, reference, retrieved_contexts.
+
+    CONTEXT_RECALL
+        Measures the proportion of ground-truth information that is covered by
+        the retrieved context chunks (recall). A high score means the retrieval
+        pipeline does not miss important supporting evidence.
+        Required fields: user_input, reference, retrieved_contexts.
+
+    CONTEXT_RELEVANCE
+        Measures how relevant each individual retrieved chunk is to the query.
+        Similar to CONTEXT_PRECISION but evaluated at the chunk level rather
+        than against a reference answer.
+        Required fields: user_input, retrieved_contexts.
+
+    ── Agent-quality metrics ────────────────────────────────────────────────
+    TOOL_CORRECTNESS
+        Measures the correctness of the tool calls made by the agent during
+        task execution — both the choice of tool and the arguments passed.
+        A high score means the agent's tool-use strategy matches the expected
+        behavior.
+        Required fields: actual tool calls vs. expected tool calls.
+
+    TASK_COMPLETION
+        Measures whether the agent ultimately achieves the user's stated goal.
+        It evaluates the reasoning chain, intermediate steps, and final output
+        holistically; a high score means the task was fully accomplished.
+        Required fields: user_input, actual_output.
+    """
+
+    # LLM / general text-quality metrics
+    FAITHFULNESS = "faithfulness"
+    ANSWER_RELEVANCY = "answer_relevancy"
+    ANSWER_CORRECTNESS = "answer_correctness"
+    SEMANTIC_SIMILARITY = "semantic_similarity"
+
+    # Retrieval-quality metrics
+    CONTEXT_PRECISION = "context_precision"
+    CONTEXT_RECALL = "context_recall"
+    CONTEXT_RELEVANCE = "context_relevance"
+
+    # Agent-quality metrics
+    TOOL_CORRECTNESS = "tool_correctness"
+    TASK_COMPLETION = "task_completion"
+
+
+# Per-category canonical metric lists used by get_supported_metrics().
+LLM_METRIC_NAMES: list[EvaluationMetricName] = [
+    EvaluationMetricName.FAITHFULNESS,        # Every claim is grounded in context; no hallucinations
+    EvaluationMetricName.ANSWER_RELEVANCY,    # Response stays on-topic and addresses the question
+    EvaluationMetricName.ANSWER_CORRECTNESS,  # Factual accuracy and completeness vs. reference
+    EvaluationMetricName.SEMANTIC_SIMILARITY,  # Semantic closeness to the reference answer
+]
+
+RETRIEVAL_METRIC_NAMES: list[EvaluationMetricName] = [
+    EvaluationMetricName.CONTEXT_PRECISION,  # Fraction of retrieved chunks that are relevant (precision)
+    EvaluationMetricName.CONTEXT_RECALL,     # Fraction of ground-truth info covered by retrieval (recall)
+    EvaluationMetricName.CONTEXT_RELEVANCE,  # Per-chunk relevance to the query
+]
+
+AGENT_METRIC_NAMES: list[EvaluationMetricName] = [
+    EvaluationMetricName.TOOL_CORRECTNESS,  # Correct tool selection and arguments
+    EvaluationMetricName.TASK_COMPLETION,   # Whether the agent fully achieves the user's goal
+]
+
+WORKFLOW_METRIC_NAMES: list[EvaluationMetricName] = [
+    EvaluationMetricName.FAITHFULNESS,
+    EvaluationMetricName.ANSWER_RELEVANCY,
+    EvaluationMetricName.ANSWER_CORRECTNESS,
+]
+
+METRIC_NODE_TYPE_MAPPING: dict[str, str] = {
+    **{m.value: "llm" for m in LLM_METRIC_NAMES},
+    **{m.value: "knowledge-retrieval" for m in RETRIEVAL_METRIC_NAMES},
+    **{m.value: "agent" for m in AGENT_METRIC_NAMES},
+}
+
+METRIC_VALUE_TYPE_MAPPING: dict[str, str] = {
+    EvaluationMetricName.FAITHFULNESS: "number",
+    EvaluationMetricName.ANSWER_RELEVANCY: "number",
+    EvaluationMetricName.ANSWER_CORRECTNESS: "number",
+    EvaluationMetricName.SEMANTIC_SIMILARITY: "number",
+    EvaluationMetricName.CONTEXT_PRECISION: "number",
+    EvaluationMetricName.CONTEXT_RECALL: "number",
+    EvaluationMetricName.CONTEXT_RELEVANCE: "number",
+    EvaluationMetricName.TOOL_CORRECTNESS: "number",
+    EvaluationMetricName.TASK_COMPLETION: "number",
+}
+
+
+class NodeInfo(BaseModel):
+    node_id: str
+    type: str
+    title: str
+
+
+class EvaluationMetric(BaseModel):
+    name: str
+    value: Any
+    details: dict[str, Any] = Field(default_factory=dict)
+    node_info: NodeInfo | None = None
+
+
+class EvaluationItemInput(BaseModel):
+    index: int
+    inputs: dict[str, Any]
+    output: str
+    expected_output: str | None = None
+    context: list[str] | None = None
+
+
+class EvaluationDatasetInput(BaseModel):
+    index: int
+    inputs: dict[str, Any]
+    expected_output: str | None = None
+
+
+class EvaluationItemResult(BaseModel):
+    index: int
+    actual_output: str | None = None
+    metrics: list[EvaluationMetric] = Field(default_factory=list)
+    metadata: dict[str, Any] = Field(default_factory=dict)
+    judgment: JudgmentResult = Field(default_factory=JudgmentResult)
+    error: str | None = None
+
+
+class DefaultMetric(BaseModel):
+    metric: str
+    value_type: str = ""
+    node_info_list: list[NodeInfo]
+
+
+class CustomizedMetricOutputField(BaseModel):
+    variable: str
+    value_type: str
+
+
+class CustomizedMetrics(BaseModel):
+    evaluation_workflow_id: str
+    input_fields: dict[str, Any]
+    output_fields: list[CustomizedMetricOutputField]
+
+
+class EvaluationConfigData(BaseModel):
+    """Structured data for saving evaluation configuration."""
+
+    evaluation_model: str = ""
+    evaluation_model_provider: str = ""
+    default_metrics: list[DefaultMetric] = Field(default_factory=list)
+    customized_metrics: CustomizedMetrics | None = None
+    judgment_config: JudgmentConfig | None = None
+
+
+class EvaluationRunRequest(EvaluationConfigData):
+    """Request body for starting an evaluation run."""
+
+    file_id: str
+
+
+class EvaluationRunData(BaseModel):
+    """Serializable data for Celery task."""
+
+    evaluation_run_id: str
+    tenant_id: str
+    target_type: str
+    target_id: str
+    evaluation_model_provider: str
+    evaluation_model: str
+    default_metrics: list[DefaultMetric] = Field(default_factory=list)
+    customized_metrics: CustomizedMetrics | None = None
+    judgment_config: JudgmentConfig | None = None
+    input_list: list[EvaluationDatasetInput]
diff --git a/api/core/evaluation/entities/judgment_entity.py b/api/core/evaluation/entities/judgment_entity.py
new file mode 100644
index 0000000000..4a59879c06
--- /dev/null
+++ b/api/core/evaluation/entities/judgment_entity.py
@@ -0,0 +1,96 @@
+"""Judgment condition entities for evaluation metric assessment.
+
+Condition structure mirrors the workflow if-else ``Condition`` model from
+``graphon.utils.condition.entities``.  The left-hand side uses
+``variable_selector`` — a two-element list ``[node_id, metric_name]`` — to
+uniquely identify an evaluation metric (different nodes may produce metrics
+with the same name).
+
+Operators reuse ``SupportedComparisonOperator`` from the workflow engine so
+that type semantics stay consistent across the platform.
+
+Typical usage::
+
+    judgment_config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["node_abc", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            )
+        ],
+    )
+"""
+
+from collections.abc import Sequence
+from typing import Any, Literal
+
+from pydantic import BaseModel, Field
+
+from graphon.utils.condition.entities import SupportedComparisonOperator
+
+
+class JudgmentCondition(BaseModel):
+    """A single judgment condition that checks one metric value.
+
+    Mirrors ``graphon.utils.condition.entities.Condition`` with the left-hand
+    side being a metric selector instead of a workflow variable selector.
+
+    Attributes:
+        variable_selector: ``[node_id, metric_name]`` identifying the metric.
+        comparison_operator: Reuses workflow's ``SupportedComparisonOperator``.
+        value: The comparison target (right side).  For unary operators such
+            as ``empty`` or ``null`` this can be ``None``.
+    """
+
+    variable_selector: list[str]
+    comparison_operator: SupportedComparisonOperator
+    value: str | Sequence[str] | bool | None = None
+
+
+class JudgmentConfig(BaseModel):
+    """A group of judgment conditions combined with a logical operator.
+
+    Attributes:
+        logical_operator: How to combine condition results — "and" requires
+            all conditions to pass, "or" requires at least one.
+        conditions: The list of individual conditions to evaluate.
+    """
+
+    logical_operator: Literal["and", "or"] = "and"
+    conditions: list[JudgmentCondition] = Field(default_factory=list)
+
+
+class JudgmentConditionResult(BaseModel):
+    """Result of evaluating a single judgment condition.
+
+    Attributes:
+        variable_selector: ``[node_id, metric_name]`` that was checked.
+        comparison_operator: The operator that was applied.
+        expected_value: The resolved comparison value.
+        actual_value: The actual metric value that was evaluated.
+        passed: Whether this individual condition passed.
+        error: Error message if the condition evaluation failed.
+    """
+
+    variable_selector: list[str]
+    comparison_operator: str
+    expected_value: Any = None
+    actual_value: Any = None
+    passed: bool = False
+    error: str | None = None
+
+
+class JudgmentResult(BaseModel):
+    """Overall result of evaluating all judgment conditions for one item.
+
+    Attributes:
+        passed: Whether the overall judgment passed (based on logical_operator).
+        logical_operator: The logical operator used to combine conditions.
+        condition_results: Detailed result for each individual condition.
+    """
+
+    passed: bool = False
+    logical_operator: Literal["and", "or"] = "and"
+    condition_results: list[JudgmentConditionResult] = Field(default_factory=list)
diff --git a/api/core/evaluation/evaluation_manager.py b/api/core/evaluation/evaluation_manager.py
new file mode 100644
index 0000000000..5499b96cad
--- /dev/null
+++ b/api/core/evaluation/evaluation_manager.py
@@ -0,0 +1,61 @@
+import collections
+import logging
+from typing import Any
+
+from configs import dify_config
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.config_entity import EvaluationFrameworkEnum
+from core.evaluation.entities.evaluation_entity import EvaluationCategory
+
+logger = logging.getLogger(__name__)
+
+
+class EvaluationFrameworkConfigMap(collections.UserDict[str, dict[str, Any]]):
+    """Registry mapping framework enum -> {config_class, evaluator_class}."""
+
+    def __getitem__(self, framework: str) -> dict[str, Any]:
+        match framework:
+            case EvaluationFrameworkEnum.RAGAS:
+                from core.evaluation.entities.config_entity import RagasConfig
+                from core.evaluation.frameworks.ragas.ragas_evaluator import RagasEvaluator
+
+                return {
+                    "config_class": RagasConfig,
+                    "evaluator_class": RagasEvaluator,
+                }
+            case EvaluationFrameworkEnum.DEEPEVAL:
+                raise NotImplementedError("DeepEval adapter is not yet implemented.")
+            case _:
+                raise ValueError(f"Unknown evaluation framework: {framework}")
+
+
+evaluation_framework_config_map = EvaluationFrameworkConfigMap()
+
+
+class EvaluationManager:
+    """Factory for evaluation instances based on global configuration."""
+
+    @staticmethod
+    def get_evaluation_instance() -> BaseEvaluationInstance | None:
+        """Create and return an evaluation instance based on EVALUATION_FRAMEWORK env var."""
+        framework = dify_config.EVALUATION_FRAMEWORK
+        if not framework or framework == EvaluationFrameworkEnum.NONE:
+            return None
+
+        try:
+            config_map = evaluation_framework_config_map[framework]
+            evaluator_class = config_map["evaluator_class"]
+            config_class = config_map["config_class"]
+            config = config_class()
+            return evaluator_class(config)
+        except Exception:
+            logger.exception("Failed to create evaluation instance for framework: %s", framework)
+            return None
+
+    @staticmethod
+    def get_supported_metrics(category: EvaluationCategory) -> list[str]:
+        """Return supported metrics for the current framework and given category."""
+        instance = EvaluationManager.get_evaluation_instance()
+        if instance is None:
+            return []
+        return instance.get_supported_metrics(category)
diff --git a/api/core/evaluation/frameworks/__init__.py b/api/core/evaluation/frameworks/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/evaluation/frameworks/deepeval/__init__.py b/api/core/evaluation/frameworks/deepeval/__init__.py
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/api/core/evaluation/frameworks/deepeval/__init__.py
@@ -0,0 +1 @@
+
diff --git a/api/core/evaluation/frameworks/deepeval/deepeval_evaluator.py b/api/core/evaluation/frameworks/deepeval/deepeval_evaluator.py
new file mode 100644
index 0000000000..e0c65792f3
--- /dev/null
+++ b/api/core/evaluation/frameworks/deepeval/deepeval_evaluator.py
@@ -0,0 +1,299 @@
+import logging
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.config_entity import DeepEvalConfig
+from core.evaluation.entities.evaluation_entity import (
+    AGENT_METRIC_NAMES,
+    LLM_METRIC_NAMES,
+    RETRIEVAL_METRIC_NAMES,
+    WORKFLOW_METRIC_NAMES,
+    EvaluationCategory,
+    EvaluationItemInput,
+    EvaluationItemResult,
+    EvaluationMetric,
+    EvaluationMetricName,
+)
+from core.evaluation.frameworks.ragas.ragas_model_wrapper import DifyModelWrapper
+
+logger = logging.getLogger(__name__)
+
+# Maps canonical EvaluationMetricName to the corresponding deepeval metric class name.
+# deepeval metric field requirements (LLMTestCase fields):
+#   - faithfulness:       input, actual_output, retrieval_context
+#   - answer_relevancy:   input, actual_output
+#   - context_precision:  input, actual_output, expected_output, retrieval_context
+#   - context_recall:     input, actual_output, expected_output, retrieval_context
+#   - context_relevance:  input, actual_output, retrieval_context
+#   - tool_correctness:   input, actual_output, expected_tools
+#   - task_completion:    input, actual_output
+# Metrics not listed here are unsupported by deepeval and will be skipped.
+_DEEPEVAL_METRIC_MAP: dict[EvaluationMetricName, str] = {
+    EvaluationMetricName.FAITHFULNESS: "FaithfulnessMetric",
+    EvaluationMetricName.ANSWER_RELEVANCY: "AnswerRelevancyMetric",
+    EvaluationMetricName.CONTEXT_PRECISION: "ContextualPrecisionMetric",
+    EvaluationMetricName.CONTEXT_RECALL: "ContextualRecallMetric",
+    EvaluationMetricName.CONTEXT_RELEVANCE: "ContextualRelevancyMetric",
+    EvaluationMetricName.TOOL_CORRECTNESS: "ToolCorrectnessMetric",
+    EvaluationMetricName.TASK_COMPLETION: "TaskCompletionMetric",
+}
+
+
+class DeepEvalEvaluator(BaseEvaluationInstance):
+    """DeepEval framework adapter for evaluation."""
+
+    def __init__(self, config: DeepEvalConfig):
+        self.config = config
+
+    def get_supported_metrics(self, category: EvaluationCategory) -> list[str]:
+        match category:
+            case EvaluationCategory.LLM:
+                candidates = LLM_METRIC_NAMES
+            case EvaluationCategory.RETRIEVAL:
+                candidates = RETRIEVAL_METRIC_NAMES
+            case EvaluationCategory.AGENT:
+                candidates = AGENT_METRIC_NAMES
+            case EvaluationCategory.WORKFLOW | EvaluationCategory.SNIPPET:
+                candidates = WORKFLOW_METRIC_NAMES
+            case _:
+                return []
+        return [m for m in candidates if m in _DEEPEVAL_METRIC_MAP]
+
+    def evaluate_llm(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.LLM)
+
+    def evaluate_retrieval(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.RETRIEVAL)
+
+    def evaluate_agent(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.AGENT)
+
+    def evaluate_workflow(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.WORKFLOW)
+
+    def _evaluate(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+        category: EvaluationCategory,
+    ) -> list[EvaluationItemResult]:
+        """Core evaluation logic using DeepEval."""
+        model_wrapper = DifyModelWrapper(model_provider, model_name, tenant_id)
+        requested_metrics = metric_names or self.get_supported_metrics(category)
+
+        try:
+            return self._evaluate_with_deepeval(items, requested_metrics, category)
+        except ImportError:
+            logger.warning("DeepEval not installed, falling back to simple evaluation")
+            return self._evaluate_simple(items, requested_metrics, model_wrapper)
+
+    def _evaluate_with_deepeval(
+        self,
+        items: list[EvaluationItemInput],
+        requested_metrics: list[str],
+        category: EvaluationCategory,
+    ) -> list[EvaluationItemResult]:
+        """Evaluate using DeepEval library.
+
+        Builds LLMTestCase differently per category:
+        - LLM/Workflow: input=prompt, actual_output=output, retrieval_context=context
+        - Retrieval: input=query, actual_output=output, expected_output, retrieval_context=context
+        - Agent: input=query, actual_output=output
+        """
+        metric_pairs = _build_deepeval_metrics(requested_metrics)
+        if not metric_pairs:
+            logger.warning("No valid DeepEval metrics found for: %s", requested_metrics)
+            return [EvaluationItemResult(index=item.index) for item in items]
+
+        results: list[EvaluationItemResult] = []
+        for item in items:
+            test_case = self._build_test_case(item, category)
+            metrics: list[EvaluationMetric] = []
+            for canonical_name, metric in metric_pairs:
+                try:
+                    metric.measure(test_case)
+                    if metric.score is not None:
+                        metrics.append(EvaluationMetric(name=canonical_name, value=float(metric.score)))
+                except Exception:
+                    logger.exception(
+                        "Failed to compute metric %s for item %d",
+                        canonical_name,
+                        item.index,
+                    )
+            results.append(EvaluationItemResult(index=item.index, metrics=metrics))
+        return results
+
+    @staticmethod
+    def _build_test_case(item: EvaluationItemInput, category: EvaluationCategory) -> Any:
+        """Build a deepeval LLMTestCase with the correct fields per category."""
+        from deepeval.test_case import LLMTestCase
+
+        user_input = _format_input(item.inputs, category)
+
+        match category:
+            case EvaluationCategory.LLM | EvaluationCategory.WORKFLOW:
+                # faithfulness needs: input, actual_output, retrieval_context
+                # answer_relevancy needs: input, actual_output
+                return LLMTestCase(
+                    input=user_input,
+                    actual_output=item.output,
+                    expected_output=item.expected_output or None,
+                    retrieval_context=item.context or None,
+                )
+            case EvaluationCategory.RETRIEVAL:
+                # contextual_precision/recall needs: input, actual_output, expected_output, retrieval_context
+                return LLMTestCase(
+                    input=user_input,
+                    actual_output=item.output or "",
+                    expected_output=item.expected_output or "",
+                    retrieval_context=item.context or [],
+                )
+            case _:
+                return LLMTestCase(
+                    input=user_input,
+                    actual_output=item.output,
+                )
+
+    def _evaluate_simple(
+        self,
+        items: list[EvaluationItemInput],
+        requested_metrics: list[str],
+        model_wrapper: DifyModelWrapper,
+    ) -> list[EvaluationItemResult]:
+        """Simple LLM-as-judge fallback when DeepEval is not available."""
+        results: list[EvaluationItemResult] = []
+        for item in items:
+            metrics: list[EvaluationMetric] = []
+            for m_name in requested_metrics:
+                try:
+                    score = self._judge_with_llm(model_wrapper, m_name, item)
+                    metrics.append(EvaluationMetric(name=m_name, value=score))
+                except Exception:
+                    logger.exception("Failed to compute metric %s for item %d", m_name, item.index)
+            results.append(EvaluationItemResult(index=item.index, metrics=metrics))
+        return results
+
+    def _judge_with_llm(
+        self,
+        model_wrapper: DifyModelWrapper,
+        metric_name: str,
+        item: EvaluationItemInput,
+    ) -> float:
+        """Use the LLM to judge a single metric for a single item."""
+        prompt = self._build_judge_prompt(metric_name, item)
+        response = model_wrapper.invoke(prompt)
+        return self._parse_score(response)
+
+    @staticmethod
+    def _build_judge_prompt(metric_name: str, item: EvaluationItemInput) -> str:
+        """Build a scoring prompt for the LLM judge."""
+        parts = [
+            f"Evaluate the following on the metric '{metric_name}' using a scale of 0.0 to 1.0.",
+            f"\nInput: {item.inputs}",
+            f"\nOutput: {item.output}",
+        ]
+        if item.expected_output:
+            parts.append(f"\nExpected Output: {item.expected_output}")
+        if item.context:
+            parts.append(f"\nContext: {'; '.join(item.context)}")
+        parts.append("\nRespond with ONLY a single floating point number between 0.0 and 1.0, nothing else.")
+        return "\n".join(parts)
+
+    @staticmethod
+    def _parse_score(response: str) -> float:
+        """Parse a float score from LLM response."""
+        import re
+
+        cleaned = response.strip()
+        try:
+            score = float(cleaned)
+            return max(0.0, min(1.0, score))
+        except ValueError:
+            match = re.search(r"(\d+\.?\d*)", cleaned)
+            if match:
+                score = float(match.group(1))
+                return max(0.0, min(1.0, score))
+            return 0.0
+
+
+def _format_input(inputs: dict[str, Any], category: EvaluationCategory) -> str:
+    """Extract the user-facing input string from the inputs dict."""
+    match category:
+        case EvaluationCategory.LLM | EvaluationCategory.WORKFLOW:
+            return str(inputs.get("prompt", ""))
+        case EvaluationCategory.RETRIEVAL:
+            return str(inputs.get("query", ""))
+        case _:
+            return str(next(iter(inputs.values()), "")) if inputs else ""
+
+
+def _build_deepeval_metrics(requested_metrics: list[str]) -> list[tuple[str, Any]]:
+    """Build DeepEval metric instances from canonical metric names.
+
+    Returns a list of (canonical_name, metric_instance) pairs so that callers
+    can record the canonical name rather than the framework-internal class name.
+    """
+    try:
+        from deepeval.metrics import (
+            AnswerRelevancyMetric,
+            ContextualPrecisionMetric,
+            ContextualRecallMetric,
+            ContextualRelevancyMetric,
+            FaithfulnessMetric,
+            TaskCompletionMetric,
+            ToolCorrectnessMetric,
+        )
+
+        # Maps canonical name → deepeval metric class
+        deepeval_class_map: dict[str, Any] = {
+            EvaluationMetricName.FAITHFULNESS: FaithfulnessMetric,
+            EvaluationMetricName.ANSWER_RELEVANCY: AnswerRelevancyMetric,
+            EvaluationMetricName.CONTEXT_PRECISION: ContextualPrecisionMetric,
+            EvaluationMetricName.CONTEXT_RECALL: ContextualRecallMetric,
+            EvaluationMetricName.CONTEXT_RELEVANCE: ContextualRelevancyMetric,
+            EvaluationMetricName.TOOL_CORRECTNESS: ToolCorrectnessMetric,
+            EvaluationMetricName.TASK_COMPLETION: TaskCompletionMetric,
+        }
+
+        pairs: list[tuple[str, Any]] = []
+        for name in requested_metrics:
+            metric_class = deepeval_class_map.get(name)
+            if metric_class:
+                pairs.append((name, metric_class(threshold=0.5)))
+            else:
+                logger.warning("Metric '%s' is not supported by DeepEval, skipping", name)
+        return pairs
+    except ImportError:
+        logger.warning("DeepEval metrics not available")
+        return []
diff --git a/api/core/evaluation/frameworks/ragas/__init__.py b/api/core/evaluation/frameworks/ragas/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/evaluation/frameworks/ragas/ragas_evaluator.py b/api/core/evaluation/frameworks/ragas/ragas_evaluator.py
new file mode 100644
index 0000000000..ec2320439d
--- /dev/null
+++ b/api/core/evaluation/frameworks/ragas/ragas_evaluator.py
@@ -0,0 +1,312 @@
+import logging
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.config_entity import RagasConfig
+from core.evaluation.entities.evaluation_entity import (
+    AGENT_METRIC_NAMES,
+    LLM_METRIC_NAMES,
+    RETRIEVAL_METRIC_NAMES,
+    WORKFLOW_METRIC_NAMES,
+    EvaluationCategory,
+    EvaluationItemInput,
+    EvaluationItemResult,
+    EvaluationMetric,
+    EvaluationMetricName,
+)
+from core.evaluation.frameworks.ragas.ragas_model_wrapper import DifyModelWrapper
+
+logger = logging.getLogger(__name__)
+
+# Maps canonical EvaluationMetricName to the corresponding ragas metric class.
+# Metrics not listed here are unsupported by ragas and will be skipped.
+_RAGAS_METRIC_MAP: dict[EvaluationMetricName, str] = {
+    EvaluationMetricName.FAITHFULNESS: "Faithfulness",
+    EvaluationMetricName.ANSWER_RELEVANCY: "AnswerRelevancy",
+    EvaluationMetricName.ANSWER_CORRECTNESS: "AnswerCorrectness",
+    EvaluationMetricName.SEMANTIC_SIMILARITY: "SemanticSimilarity",
+    EvaluationMetricName.CONTEXT_PRECISION: "ContextPrecision",
+    EvaluationMetricName.CONTEXT_RECALL: "ContextRecall",
+    EvaluationMetricName.CONTEXT_RELEVANCE: "ContextRelevance",
+    EvaluationMetricName.TOOL_CORRECTNESS: "ToolCallAccuracy",
+}
+
+
+class RagasEvaluator(BaseEvaluationInstance):
+    """RAGAS framework adapter for evaluation."""
+
+    def __init__(self, config: RagasConfig):
+        self.config = config
+
+    def get_supported_metrics(self, category: EvaluationCategory) -> list[str]:
+        match category:
+            case EvaluationCategory.LLM:
+                candidates = LLM_METRIC_NAMES
+            case EvaluationCategory.RETRIEVAL:
+                candidates = RETRIEVAL_METRIC_NAMES
+            case EvaluationCategory.AGENT:
+                candidates = AGENT_METRIC_NAMES
+            case EvaluationCategory.WORKFLOW | EvaluationCategory.SNIPPET:
+                candidates = WORKFLOW_METRIC_NAMES
+            case _:
+                return []
+        return [m for m in candidates if m in _RAGAS_METRIC_MAP]
+
+    def evaluate_llm(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.LLM)
+
+    def evaluate_retrieval(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.RETRIEVAL)
+
+    def evaluate_agent(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.AGENT)
+
+    def evaluate_workflow(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        return self._evaluate(items, metric_names, model_provider, model_name, tenant_id, EvaluationCategory.WORKFLOW)
+
+    def _evaluate(
+        self,
+        items: list[EvaluationItemInput],
+        metric_names: list[str],
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+        category: EvaluationCategory,
+    ) -> list[EvaluationItemResult]:
+        """Core evaluation logic using RAGAS."""
+        model_wrapper = DifyModelWrapper(model_provider, model_name, tenant_id)
+        requested_metrics = metric_names or self.get_supported_metrics(category)
+
+        try:
+            return self._evaluate_with_ragas(items, requested_metrics, model_wrapper, category)
+        except ImportError:
+            logger.warning("RAGAS not installed, falling back to simple evaluation")
+            return self._evaluate_simple(items, requested_metrics, model_wrapper)
+
+    def _evaluate_with_ragas(
+        self,
+        items: list[EvaluationItemInput],
+        requested_metrics: list[str],
+        model_wrapper: DifyModelWrapper,
+        category: EvaluationCategory,
+    ) -> list[EvaluationItemResult]:
+        """Evaluate using RAGAS library.
+
+        Builds SingleTurnSample differently per category to match ragas requirements:
+        - LLM/Workflow: user_input=prompt, response=output, reference=expected_output
+        - Retrieval: user_input=query, reference=expected_output, retrieved_contexts=context
+        - Agent: Not supported via EvaluationDataset (requires message-based API)
+        """
+        from ragas import evaluate as ragas_evaluate
+        from ragas.dataset_schema import EvaluationDataset
+
+        samples: list[Any] = []
+        for item in items:
+            sample = self._build_sample(item, category)
+            samples.append(sample)
+
+        dataset = EvaluationDataset(samples=samples)
+
+        ragas_metrics = self._build_ragas_metrics(requested_metrics)
+        if not ragas_metrics:
+            logger.warning("No valid RAGAS metrics found for: %s", requested_metrics)
+            return [EvaluationItemResult(index=item.index) for item in items]
+
+        try:
+            result = ragas_evaluate(
+                dataset=dataset,
+                metrics=ragas_metrics,
+            )
+
+            results: list[EvaluationItemResult] = []
+            result_df = result.to_pandas()
+            for i, item in enumerate(items):
+                metrics: list[EvaluationMetric] = []
+                for m_name in requested_metrics:
+                    if m_name in result_df.columns:
+                        score = result_df.iloc[i][m_name]
+                        if score is not None and not (isinstance(score, float) and score != score):
+                            metrics.append(EvaluationMetric(name=m_name, value=float(score)))
+                results.append(EvaluationItemResult(index=item.index, metrics=metrics))
+            return results
+        except Exception:
+            logger.exception("RAGAS evaluation failed, falling back to simple evaluation")
+            return self._evaluate_simple(items, requested_metrics, model_wrapper)
+
+    @staticmethod
+    def _build_sample(item: EvaluationItemInput, category: EvaluationCategory) -> Any:
+        """Build a ragas SingleTurnSample with the correct fields per category.
+
+        ragas metric field requirements:
+        - faithfulness:       user_input, response, retrieved_contexts
+        - answer_relevancy:   user_input, response
+        - answer_correctness: user_input, response, reference
+        - semantic_similarity: user_input, response, reference
+        - context_precision:  user_input, reference, retrieved_contexts
+        - context_recall:     user_input, reference, retrieved_contexts
+        - context_relevance:  user_input, retrieved_contexts
+        """
+        from ragas.dataset_schema import SingleTurnSample
+
+        user_input = _format_input(item.inputs, category)
+
+        match category:
+            case EvaluationCategory.LLM:
+                # response = actual LLM output, reference = expected output
+                return SingleTurnSample(
+                    user_input=user_input,
+                    response=item.output,
+                    reference=item.expected_output or "",
+                    retrieved_contexts=item.context or [],
+                )
+            case EvaluationCategory.RETRIEVAL:
+                # context_precision/recall only need reference + retrieved_contexts
+                return SingleTurnSample(
+                    user_input=user_input,
+                    reference=item.expected_output or "",
+                    retrieved_contexts=item.context or [],
+                )
+            case _:
+                return SingleTurnSample(
+                    user_input=user_input,
+                    response=item.output,
+                )
+
+    def _evaluate_simple(
+        self,
+        items: list[EvaluationItemInput],
+        requested_metrics: list[str],
+        model_wrapper: DifyModelWrapper,
+    ) -> list[EvaluationItemResult]:
+        """Simple LLM-as-judge fallback when RAGAS is not available."""
+        results: list[EvaluationItemResult] = []
+        for item in items:
+            metrics: list[EvaluationMetric] = []
+            for m_name in requested_metrics:
+                try:
+                    score = self._judge_with_llm(model_wrapper, m_name, item)
+                    metrics.append(EvaluationMetric(name=m_name, value=score))
+                except Exception:
+                    logger.exception("Failed to compute metric %s for item %d", m_name, item.index)
+            results.append(EvaluationItemResult(index=item.index, metrics=metrics))
+        return results
+
+    def _judge_with_llm(
+        self,
+        model_wrapper: DifyModelWrapper,
+        metric_name: str,
+        item: EvaluationItemInput,
+    ) -> float:
+        """Use the LLM to judge a single metric for a single item."""
+        prompt = self._build_judge_prompt(metric_name, item)
+        response = model_wrapper.invoke(prompt)
+        return self._parse_score(response)
+
+    @staticmethod
+    def _build_judge_prompt(metric_name: str, item: EvaluationItemInput) -> str:
+        """Build a scoring prompt for the LLM judge."""
+        parts = [
+            f"Evaluate the following on the metric '{metric_name}' using a scale of 0.0 to 1.0.",
+            f"\nInput: {item.inputs}",
+            f"\nOutput: {item.output}",
+        ]
+        if item.expected_output:
+            parts.append(f"\nExpected Output: {item.expected_output}")
+        if item.context:
+            parts.append(f"\nContext: {'; '.join(item.context)}")
+        parts.append("\nRespond with ONLY a single floating point number between 0.0 and 1.0, nothing else.")
+        return "\n".join(parts)
+
+    @staticmethod
+    def _parse_score(response: str) -> float:
+        """Parse a float score from LLM response."""
+        import re
+
+        cleaned = response.strip()
+        try:
+            score = float(cleaned)
+            return max(0.0, min(1.0, score))
+        except ValueError:
+            match = re.search(r"(\d+\.?\d*)", cleaned)
+            if match:
+                score = float(match.group(1))
+                return max(0.0, min(1.0, score))
+            return 0.0
+
+    @staticmethod
+    def _build_ragas_metrics(requested_metrics: list[str]) -> list[Any]:
+        """Build RAGAS metric instances from canonical metric names."""
+        try:
+            from ragas.metrics.collections import (
+                AnswerCorrectness,
+                AnswerRelevancy,
+                ContextPrecision,
+                ContextRecall,
+                ContextRelevance,
+                Faithfulness,
+                SemanticSimilarity,
+                ToolCallAccuracy,
+            )
+
+            # Maps canonical name → ragas metric class
+            ragas_class_map: dict[str, Any] = {
+                EvaluationMetricName.FAITHFULNESS: Faithfulness,
+                EvaluationMetricName.ANSWER_RELEVANCY: AnswerRelevancy,
+                EvaluationMetricName.ANSWER_CORRECTNESS: AnswerCorrectness,
+                EvaluationMetricName.SEMANTIC_SIMILARITY: SemanticSimilarity,
+                EvaluationMetricName.CONTEXT_PRECISION: ContextPrecision,
+                EvaluationMetricName.CONTEXT_RECALL: ContextRecall,
+                EvaluationMetricName.CONTEXT_RELEVANCE: ContextRelevance,
+                EvaluationMetricName.TOOL_CORRECTNESS: ToolCallAccuracy,
+            }
+
+            metrics = []
+            for name in requested_metrics:
+                metric_class = ragas_class_map.get(name)
+                if metric_class:
+                    metrics.append(metric_class())
+                else:
+                    logger.warning("Metric '%s' is not supported by RAGAS, skipping", name)
+            return metrics
+        except ImportError:
+            logger.warning("RAGAS metrics not available")
+            return []
+
+
+def _format_input(inputs: dict[str, Any], category: EvaluationCategory) -> str:
+    """Extract the user-facing input string from the inputs dict."""
+    match category:
+        case EvaluationCategory.LLM | EvaluationCategory.WORKFLOW:
+            return str(inputs.get("prompt", ""))
+        case EvaluationCategory.RETRIEVAL:
+            return str(inputs.get("query", ""))
+        case _:
+            return str(next(iter(inputs.values()), "")) if inputs else ""
diff --git a/api/core/evaluation/frameworks/ragas/ragas_model_wrapper.py b/api/core/evaluation/frameworks/ragas/ragas_model_wrapper.py
new file mode 100644
index 0000000000..e0a5e14914
--- /dev/null
+++ b/api/core/evaluation/frameworks/ragas/ragas_model_wrapper.py
@@ -0,0 +1,48 @@
+import logging
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+
+class DifyModelWrapper:
+    """Wraps Dify's model invocation interface for use by RAGAS as an LLM judge.
+
+    RAGAS requires an LLM to compute certain metrics (faithfulness, answer_relevancy, etc.).
+    This wrapper bridges Dify's ModelInstance to a callable that RAGAS can use.
+    """
+
+    def __init__(self, model_provider: str, model_name: str, tenant_id: str):
+        self.model_provider = model_provider
+        self.model_name = model_name
+        self.tenant_id = tenant_id
+
+    def _get_model_instance(self) -> Any:
+        from core.model_manager import ModelManager
+        from core.model_runtime.entities.model_entities import ModelType
+
+        model_manager = ModelManager()
+        model_instance = model_manager.get_model_instance(
+            tenant_id=self.tenant_id,
+            provider=self.model_provider,
+            model_type=ModelType.LLM,
+            model=self.model_name,
+        )
+        return model_instance
+
+    def invoke(self, prompt: str) -> str:
+        """Invoke the model with a text prompt and return the text response."""
+        from core.model_runtime.entities.message_entities import (
+            SystemPromptMessage,
+            UserPromptMessage,
+        )
+
+        model_instance = self._get_model_instance()
+        result = model_instance.invoke_llm(
+            prompt_messages=[
+                SystemPromptMessage(content="You are an evaluation judge. Answer precisely and concisely."),
+                UserPromptMessage(content=prompt),
+            ],
+            model_parameters={"temperature": 0.0, "max_tokens": 2048},
+            stream=False,
+        )
+        return result.message.content
diff --git a/api/core/evaluation/judgment/__init__.py b/api/core/evaluation/judgment/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/core/evaluation/judgment/processor.py b/api/core/evaluation/judgment/processor.py
new file mode 100644
index 0000000000..7a0ce38b75
--- /dev/null
+++ b/api/core/evaluation/judgment/processor.py
@@ -0,0 +1,160 @@
+"""Judgment condition processor for evaluation metrics.
+
+Evaluates pass/fail judgment conditions against evaluation metric values.
+Each condition uses ``variable_selector`` (``[node_id, metric_name]``) to
+look up the metric value, then delegates the actual comparison to the
+workflow condition engine (``graphon.utils.condition.processor``).
+
+The processor is intentionally decoupled from evaluation frameworks and
+runners.  It operates on plain ``dict`` mappings and can be invoked
+anywhere that already has per-item metric results.
+"""
+
+import logging
+from collections.abc import Sequence
+from typing import Any, cast
+
+from core.evaluation.entities.judgment_entity import (
+    JudgmentCondition,
+    JudgmentConditionResult,
+    JudgmentConfig,
+    JudgmentResult,
+)
+from graphon.utils.condition.entities import SupportedComparisonOperator
+from graphon.utils.condition.processor import _evaluate_condition  # pyright: ignore[reportPrivateUsage]
+
+logger = logging.getLogger(__name__)
+
+_UNARY_OPERATORS = frozenset({"null", "not null", "empty", "not empty"})
+
+
+class JudgmentProcessor:
+    @staticmethod
+    def evaluate(
+        metric_values: dict[tuple[str, str], Any],
+        config: JudgmentConfig,
+    ) -> JudgmentResult:
+        """Evaluate all judgment conditions against the given metric values.
+
+        Args:
+            metric_values: Mapping of ``(node_id, metric_name)`` → metric
+                value (e.g. ``{("node_abc", "faithfulness"): 0.85}``).
+            config: The judgment configuration with logical_operator and
+                conditions.
+
+        Returns:
+            JudgmentResult with overall pass/fail and per-condition details.
+        """
+        if not config.conditions:
+            return JudgmentResult(
+                passed=True,
+                logical_operator=config.logical_operator,
+                condition_results=[],
+            )
+
+        condition_results: list[JudgmentConditionResult] = []
+
+        for condition in config.conditions:
+            result = JudgmentProcessor._evaluate_single_condition(metric_values, condition)
+            condition_results.append(result)
+
+            if config.logical_operator == "and" and not result.passed:
+                return JudgmentResult(
+                    passed=False,
+                    logical_operator=config.logical_operator,
+                    condition_results=condition_results,
+                )
+            if config.logical_operator == "or" and result.passed:
+                return JudgmentResult(
+                    passed=True,
+                    logical_operator=config.logical_operator,
+                    condition_results=condition_results,
+                )
+
+        if config.logical_operator == "and":
+            final_passed = all(r.passed for r in condition_results)
+        else:
+            final_passed = any(r.passed for r in condition_results)
+
+        return JudgmentResult(
+            passed=final_passed,
+            logical_operator=config.logical_operator,
+            condition_results=condition_results,
+        )
+
+    @staticmethod
+    def _evaluate_single_condition(
+        metric_values: dict[tuple[str, str], Any],
+        condition: JudgmentCondition,
+    ) -> JudgmentConditionResult:
+        """Evaluate a single judgment condition.
+
+        Steps:
+          1. Extract ``(node_id, metric_name)`` from ``variable_selector``.
+          2. Look up the metric value from ``metric_values``.
+          3. Delegate comparison to the workflow condition engine.
+        """
+        selector = condition.variable_selector
+        if len(selector) < 2:
+            return JudgmentConditionResult(
+                variable_selector=selector,
+                comparison_operator=condition.comparison_operator,
+                expected_value=condition.value,
+                actual_value=None,
+                passed=False,
+                error=f"variable_selector must have at least 2 elements, got {len(selector)}",
+            )
+
+        node_id, metric_name = selector[0], selector[1]
+        actual_value = metric_values.get((node_id, metric_name))
+
+        if actual_value is None and condition.comparison_operator not in _UNARY_OPERATORS:
+            return JudgmentConditionResult(
+                variable_selector=selector,
+                comparison_operator=condition.comparison_operator,
+                expected_value=condition.value,
+                actual_value=None,
+                passed=False,
+                error=f"Metric '{metric_name}' on node '{node_id}' not found in evaluation results",
+            )
+
+        try:
+            expected = condition.value
+            # Numeric operators need the actual value coerced to int/float
+            # so that the workflow engine's numeric assertions work correctly.
+            coerced_actual: object = actual_value
+            if (
+                condition.comparison_operator in {"=", "≠", ">", "<", "≥", "≤"}
+                and actual_value is not None
+                and not isinstance(actual_value, (int, float, bool))
+            ):
+                coerced_actual = float(actual_value)
+
+            passed = _evaluate_condition(
+                operator=cast(SupportedComparisonOperator, condition.comparison_operator),
+                value=coerced_actual,
+                expected=cast(str | Sequence[str] | bool | Sequence[bool] | None, expected),
+            )
+
+            return JudgmentConditionResult(
+                variable_selector=selector,
+                comparison_operator=condition.comparison_operator,
+                expected_value=expected,
+                actual_value=actual_value,
+                passed=passed,
+            )
+        except Exception as e:
+            logger.warning(
+                "Judgment condition evaluation failed for [%s, %s]: %s",
+                node_id,
+                metric_name,
+                str(e),
+            )
+            return JudgmentConditionResult(
+                variable_selector=selector,
+                comparison_operator=condition.comparison_operator,
+                expected_value=condition.value,
+                actual_value=actual_value,
+                passed=False,
+                error=str(e),
+            )
diff --git a/api/core/evaluation/runners/__init__.py b/api/core/evaluation/runners/__init__.py
new file mode 100644
index 0000000000..0a69087432
--- /dev/null
+++ b/api/core/evaluation/runners/__init__.py
@@ -0,0 +1,52 @@
+from sqlalchemy import select
+from sqlalchemy.orm import Session
+
+from models import Account, App, CustomizedSnippet, TenantAccountJoin
+
+
+def get_service_account_for_app(session: Session, app_id: str) -> Account:
+    """Get the creator account for an app with tenant context set up.
+
+    This follows the same pattern as BaseTraceInstance.get_service_account_with_tenant().
+    """
+    app = session.scalar(select(App).where(App.id == app_id))
+    if not app:
+        raise ValueError(f"App with id {app_id} not found")
+
+    if not app.created_by:
+        raise ValueError(f"App with id {app_id} has no creator")
+
+    account = session.scalar(select(Account).where(Account.id == app.created_by))
+    if not account:
+        raise ValueError(f"Creator account not found for app {app_id}")
+
+    current_tenant = session.query(TenantAccountJoin).filter_by(account_id=account.id, current=True).first()
+    if not current_tenant:
+        raise ValueError(f"Current tenant not found for account {account.id}")
+
+    account.set_tenant_id(current_tenant.tenant_id)
+    return account
+
+
+def get_service_account_for_snippet(session: Session, snippet_id: str) -> Account:
+    """Get the creator account for a snippet with tenant context set up.
+
+    Mirrors :func:`get_service_account_for_app` but queries CustomizedSnippet.
+    """
+    snippet = session.scalar(select(CustomizedSnippet).where(CustomizedSnippet.id == snippet_id))
+    if not snippet:
+        raise ValueError(f"Snippet with id {snippet_id} not found")
+
+    if not snippet.created_by:
+        raise ValueError(f"Snippet with id {snippet_id} has no creator")
+
+    account = session.scalar(select(Account).where(Account.id == snippet.created_by))
+    if not account:
+        raise ValueError(f"Creator account not found for snippet {snippet_id}")
+
+    current_tenant = session.query(TenantAccountJoin).filter_by(account_id=account.id, current=True).first()
+    if not current_tenant:
+        raise ValueError(f"Current tenant not found for account {account.id}")
+
+    account.set_tenant_id(current_tenant.tenant_id)
+    return account
diff --git a/api/core/evaluation/runners/agent_evaluation_runner.py b/api/core/evaluation/runners/agent_evaluation_runner.py
new file mode 100644
index 0000000000..ef3bbe704c
--- /dev/null
+++ b/api/core/evaluation/runners/agent_evaluation_runner.py
@@ -0,0 +1,62 @@
+import logging
+from collections.abc import Mapping
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    DefaultMetric,
+    EvaluationItemInput,
+    EvaluationItemResult,
+)
+from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
+from graphon.node_events import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class AgentEvaluationRunner(BaseEvaluationRunner):
+    """Runner for agent evaluation: collects tool calls and final output."""
+
+    def __init__(self, evaluation_instance: BaseEvaluationInstance):
+        super().__init__(evaluation_instance)
+
+    def evaluate_metrics(
+        self,
+        node_run_result_list: list[NodeRunResult],
+        default_metric: DefaultMetric,
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Compute agent evaluation metrics."""
+        if not node_run_result_list:
+            return []
+        merged_items = self._merge_results_into_items(node_run_result_list)
+        return self.evaluation_instance.evaluate_agent(
+            merged_items, [default_metric.metric], model_provider, model_name, tenant_id
+        )
+
+    @staticmethod
+    def _merge_results_into_items(items: list[NodeRunResult]) -> list[EvaluationItemInput]:
+        """Create EvaluationItemInput list from NodeRunResult for agent evaluation."""
+        merged = []
+        for i, item in enumerate(items):
+            output = _extract_agent_output(item.outputs)
+            merged.append(
+                EvaluationItemInput(
+                    index=i,
+                    inputs=dict(item.inputs),
+                    output=output,
+                )
+            )
+        return merged
+
+
+def _extract_agent_output(outputs: Mapping[str, Any]) -> str:
+    """Extract the primary output text from agent NodeRunResult.outputs."""
+    if "answer" in outputs:
+        return str(outputs["answer"])
+    if "text" in outputs:
+        return str(outputs["text"])
+    values = list(outputs.values())
+    return str(values[0]) if values else ""
diff --git a/api/core/evaluation/runners/base_evaluation_runner.py b/api/core/evaluation/runners/base_evaluation_runner.py
new file mode 100644
index 0000000000..9046c2ddad
--- /dev/null
+++ b/api/core/evaluation/runners/base_evaluation_runner.py
@@ -0,0 +1,51 @@
+"""Base evaluation runner.
+
+Provides the abstract interface for metric computation. Each concrete runner
+(LLM, Retrieval, Agent, Workflow, Snippet) implements ``evaluate_metrics``
+to compute scores for a specific node type.
+
+Orchestration (merging results from multiple runners, applying judgment, and
+persisting to the database) is handled by the evaluation task, not the runner.
+"""
+
+import logging
+from abc import ABC, abstractmethod
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    DefaultMetric,
+    EvaluationItemResult,
+)
+from graphon.node_events import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class BaseEvaluationRunner(ABC):
+    """Abstract base class for evaluation runners.
+
+    Runners are stateless metric calculators: they receive node execution
+    results and a metric specification, then return scored results.  They
+    do **not** touch the database or apply judgment logic.
+    """
+
+    def __init__(self, evaluation_instance: BaseEvaluationInstance):
+        self.evaluation_instance = evaluation_instance
+
+    @abstractmethod
+    def evaluate_metrics(
+        self,
+        node_run_result_list: list[NodeRunResult],
+        default_metric: DefaultMetric,
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Compute evaluation metrics on the collected results.
+
+        The returned ``EvaluationItemResult.index`` values are positional
+        (0-based) and correspond to the order of *node_run_result_list*.
+        The caller is responsible for mapping them back to the original
+        dataset indices.
+        """
+        ...
diff --git a/api/core/evaluation/runners/llm_evaluation_runner.py b/api/core/evaluation/runners/llm_evaluation_runner.py
new file mode 100644
index 0000000000..4b1c244838
--- /dev/null
+++ b/api/core/evaluation/runners/llm_evaluation_runner.py
@@ -0,0 +1,83 @@
+import logging
+from collections.abc import Mapping
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    DefaultMetric,
+    EvaluationItemInput,
+    EvaluationItemResult,
+)
+from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
+from graphon.node_events import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class LLMEvaluationRunner(BaseEvaluationRunner):
+    """Runner for LLM evaluation: extracts prompts/outputs then evaluates."""
+
+    def __init__(self, evaluation_instance: BaseEvaluationInstance):
+        super().__init__(evaluation_instance)
+
+    def evaluate_metrics(
+        self,
+        node_run_result_list: list[NodeRunResult],
+        default_metric: DefaultMetric,
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Use the evaluation instance to compute LLM metrics."""
+        if not node_run_result_list:
+            return []
+        merged_items = self._merge_results_into_items(node_run_result_list)
+        return self.evaluation_instance.evaluate_llm(
+            merged_items, [default_metric.metric], model_provider, model_name, tenant_id
+        )
+
+    @staticmethod
+    def _merge_results_into_items(
+        items: list[NodeRunResult],
+    ) -> list[EvaluationItemInput]:
+        """Create new items from NodeRunResult for ragas evaluation.
+
+        Extracts prompts from process_data and concatenates them into a single
+        string with role prefixes (e.g. "system: ...\nuser: ...\nassistant: ...").
+        The last assistant message in outputs is used as the actual output.
+        """
+        merged = []
+        for i, item in enumerate(items):
+            prompt = _format_prompts(item.process_data.get("prompts", []))
+            output = _extract_llm_output(item.outputs)
+            merged.append(
+                EvaluationItemInput(
+                    index=i,
+                    inputs={"prompt": prompt},
+                    output=output,
+                )
+            )
+        return merged
+
+
+def _format_prompts(prompts: list[dict[str, Any]]) -> str:
+    """Concatenate a list of prompt messages into a single string for evaluation.
+
+    Each message is formatted as "role: text" and joined with newlines.
+    """
+    parts: list[str] = []
+    for msg in prompts:
+        role = msg.get("role", "unknown")
+        text = msg.get("text", "")
+        parts.append(f"{role}: {text}")
+    return "\n".join(parts)
+
+
+def _extract_llm_output(outputs: Mapping[str, Any]) -> str:
+    """Extract the LLM output text from NodeRunResult.outputs."""
+    if "text" in outputs:
+        return str(outputs["text"])
+    if "answer" in outputs:
+        return str(outputs["answer"])
+    values = list(outputs.values())
+    return str(values[0]) if values else ""
diff --git a/api/core/evaluation/runners/retrieval_evaluation_runner.py b/api/core/evaluation/runners/retrieval_evaluation_runner.py
new file mode 100644
index 0000000000..66b8ab7360
--- /dev/null
+++ b/api/core/evaluation/runners/retrieval_evaluation_runner.py
@@ -0,0 +1,61 @@
+import logging
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    DefaultMetric,
+    EvaluationItemInput,
+    EvaluationItemResult,
+)
+from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
+from graphon.node_events import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class RetrievalEvaluationRunner(BaseEvaluationRunner):
+    """Runner for retrieval evaluation: performs knowledge base retrieval, then evaluates."""
+
+    def __init__(self, evaluation_instance: BaseEvaluationInstance):
+        super().__init__(evaluation_instance)
+
+    def evaluate_metrics(
+        self,
+        node_run_result_list: list[NodeRunResult],
+        default_metric: DefaultMetric,
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Compute retrieval evaluation metrics."""
+        if not node_run_result_list:
+            return []
+
+        merged_items = []
+        for i, node_result in enumerate(node_run_result_list):
+            outputs = node_result.outputs
+            query = self._extract_query(dict(node_result.inputs))
+            result_list = outputs.get("result", [])
+            contexts = [item.get("content", "") for item in result_list if item.get("content")]
+            output = "\n---\n".join(contexts)
+
+            merged_items.append(
+                EvaluationItemInput(
+                    index=i,
+                    inputs={"query": query},
+                    output=output,
+                    context=contexts,
+                )
+            )
+
+        return self.evaluation_instance.evaluate_retrieval(
+            merged_items, [default_metric.metric], model_provider, model_name, tenant_id
+        )
+
+    @staticmethod
+    def _extract_query(inputs: dict[str, Any]) -> str:
+        for key in ("query", "question", "input", "text"):
+            if key in inputs:
+                return str(inputs[key])
+        values = list(inputs.values())
+        return str(values[0]) if values else ""
diff --git a/api/core/evaluation/runners/snippet_evaluation_runner.py b/api/core/evaluation/runners/snippet_evaluation_runner.py
new file mode 100644
index 0000000000..bc516f9ee8
--- /dev/null
+++ b/api/core/evaluation/runners/snippet_evaluation_runner.py
@@ -0,0 +1,68 @@
+"""Runner for Snippet evaluation.
+
+Snippets are essentially workflows, so we reuse ``evaluate_workflow`` from
+the evaluation instance for metric computation.
+"""
+
+import logging
+from collections.abc import Mapping
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    DefaultMetric,
+    EvaluationItemInput,
+    EvaluationItemResult,
+)
+from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
+from graphon.node_events import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class SnippetEvaluationRunner(BaseEvaluationRunner):
+    """Runner for snippet evaluation: evaluates a published Snippet workflow."""
+
+    def __init__(self, evaluation_instance: BaseEvaluationInstance):
+        super().__init__(evaluation_instance)
+
+    def evaluate_metrics(
+        self,
+        node_run_result_list: list[NodeRunResult],
+        default_metric: DefaultMetric,
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Compute evaluation metrics for snippet outputs."""
+        if not node_run_result_list:
+            return []
+        merged_items = self._merge_results_into_items(node_run_result_list)
+        return self.evaluation_instance.evaluate_workflow(
+            merged_items, [default_metric.metric], model_provider, model_name, tenant_id
+        )
+
+    @staticmethod
+    def _merge_results_into_items(items: list[NodeRunResult]) -> list[EvaluationItemInput]:
+        """Create EvaluationItemInput list from NodeRunResult for snippet evaluation."""
+        merged = []
+        for i, item in enumerate(items):
+            output = _extract_snippet_output(item.outputs)
+            merged.append(
+                EvaluationItemInput(
+                    index=i,
+                    inputs=dict(item.inputs),
+                    output=output,
+                )
+            )
+        return merged
+
+
+def _extract_snippet_output(outputs: Mapping[str, Any]) -> str:
+    """Extract the primary output text from snippet NodeRunResult.outputs."""
+    if "answer" in outputs:
+        return str(outputs["answer"])
+    if "text" in outputs:
+        return str(outputs["text"])
+    values = list(outputs.values())
+    return str(values[0]) if values else ""
diff --git a/api/core/evaluation/runners/workflow_evaluation_runner.py b/api/core/evaluation/runners/workflow_evaluation_runner.py
new file mode 100644
index 0000000000..e1cc9defdb
--- /dev/null
+++ b/api/core/evaluation/runners/workflow_evaluation_runner.py
@@ -0,0 +1,62 @@
+import logging
+from collections.abc import Mapping
+from typing import Any
+
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    DefaultMetric,
+    EvaluationItemInput,
+    EvaluationItemResult,
+)
+from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
+from graphon.node_events import NodeRunResult
+
+logger = logging.getLogger(__name__)
+
+
+class WorkflowEvaluationRunner(BaseEvaluationRunner):
+    """Runner for workflow evaluation: executes workflow App in non-streaming mode."""
+
+    def __init__(self, evaluation_instance: BaseEvaluationInstance):
+        super().__init__(evaluation_instance)
+
+    def evaluate_metrics(
+        self,
+        node_run_result_list: list[NodeRunResult],
+        default_metric: DefaultMetric,
+        model_provider: str,
+        model_name: str,
+        tenant_id: str,
+    ) -> list[EvaluationItemResult]:
+        """Compute workflow evaluation metrics (end-to-end)."""
+        if not node_run_result_list:
+            return []
+        merged_items = self._merge_results_into_items(node_run_result_list)
+        return self.evaluation_instance.evaluate_workflow(
+            merged_items, [default_metric.metric], model_provider, model_name, tenant_id
+        )
+
+    @staticmethod
+    def _merge_results_into_items(items: list[NodeRunResult]) -> list[EvaluationItemInput]:
+        """Create EvaluationItemInput list from NodeRunResult for workflow evaluation."""
+        merged = []
+        for i, item in enumerate(items):
+            output = _extract_workflow_output(item.outputs)
+            merged.append(
+                EvaluationItemInput(
+                    index=i,
+                    inputs=dict(item.inputs),
+                    output=output,
+                )
+            )
+        return merged
+
+
+def _extract_workflow_output(outputs: Mapping[str, Any]) -> str:
+    """Extract the primary output text from workflow NodeRunResult.outputs."""
+    if "answer" in outputs:
+        return str(outputs["answer"])
+    if "text" in outputs:
+        return str(outputs["text"])
+    values = list(outputs.values())
+    return str(values[0]) if values else ""
diff --git a/api/enums/quota_type.py b/api/enums/quota_type.py
index 9f511b88ef..a10ac21f69 100644
--- a/api/enums/quota_type.py
+++ b/api/enums/quota_type.py
@@ -1,56 +1,17 @@
-import logging
-from dataclasses import dataclass
 from enum import StrEnum, auto
 
-logger = logging.getLogger(__name__)
-
-
-@dataclass
-class QuotaCharge:
-    """
-    Result of a quota consumption operation.
-
-    Attributes:
-        success: Whether the quota charge succeeded
-        charge_id: UUID for refund, or None if failed/disabled
-    """
-
-    success: bool
-    charge_id: str | None
-    _quota_type: "QuotaType"
-
-    def refund(self) -> None:
-        """
-        Refund this quota charge.
-
-        Safe to call even if charge failed or was disabled.
-        This method guarantees no exceptions will be raised.
-        """
-        if self.charge_id:
-            self._quota_type.refund(self.charge_id)
-            logger.info("Refunded quota for %s with charge_id: %s", self._quota_type.value, self.charge_id)
-
 
 class QuotaType(StrEnum):
     """
     Supported quota types for tenant feature usage.
-
-    Add additional types here whenever new billable features become available.
     """
 
-    # Trigger execution quota
     TRIGGER = auto()
-
-    # Workflow execution quota
     WORKFLOW = auto()
-
     UNLIMITED = auto()
 
     @property
     def billing_key(self) -> str:
-        """
-        Get the billing key for the feature.
-        """
         match self:
             case QuotaType.TRIGGER:
                 return "trigger_event"
@@ -58,152 +19,3 @@ class QuotaType(StrEnum):
                 return "api_rate_limit"
             case _:
                 raise ValueError(f"Invalid quota type: {self}")
-
-    def consume(self, tenant_id: str, amount: int = 1) -> QuotaCharge:
-        """
-        Consume quota for the feature.
-
-        Args:
-            tenant_id: The tenant identifier
-            amount: Amount to consume (default: 1)
-
-        Returns:
-            QuotaCharge with success status and charge_id for refund
-
-        Raises:
-            QuotaExceededError: When quota is insufficient
-        """
-        from configs import dify_config
-        from services.billing_service import BillingService
-        from services.errors.app import QuotaExceededError
-
-        if not dify_config.BILLING_ENABLED:
-            logger.debug("Billing disabled, allowing request for %s", tenant_id)
-            return QuotaCharge(success=True, charge_id=None, _quota_type=self)
-
-        logger.info("Consuming %d %s quota for tenant %s", amount, self.value, tenant_id)
-
-        if amount <= 0:
-            raise ValueError("Amount to consume must be greater than 0")
-
-        try:
-            response = BillingService.update_tenant_feature_plan_usage(tenant_id, self.billing_key, delta=amount)
-
-            if response.get("result") != "success":
-                logger.warning(
-                    "Failed to consume quota for %s, feature %s details: %s",
-                    tenant_id,
-                    self.value,
-                    response.get("detail"),
-                )
-                raise QuotaExceededError(feature=self.value, tenant_id=tenant_id, required=amount)
-
-            charge_id = response.get("history_id")
-            logger.debug(
-                "Successfully consumed %d %s quota for tenant %s, charge_id: %s",
-                amount,
-                self.value,
-                tenant_id,
-                charge_id,
-            )
-            return QuotaCharge(success=True, charge_id=charge_id, _quota_type=self)
-
-        except QuotaExceededError:
-            raise
-        except Exception:
-            # fail-safe: allow request on billing errors
-            logger.exception("Failed to consume quota for %s, feature %s", tenant_id, self.value)
-            return unlimited()
-
-    def check(self, tenant_id: str, amount: int = 1) -> bool:
-        """
-        Check if tenant has sufficient quota without consuming.
-
-        Args:
-            tenant_id: The tenant identifier
-            amount: Amount to check (default: 1)
-
-        Returns:
-            True if quota is sufficient, False otherwise
-        """
-        from configs import dify_config
-
-        if not dify_config.BILLING_ENABLED:
-            return True
-
-        if amount <= 0:
-            raise ValueError("Amount to check must be greater than 0")
-
-        try:
-            remaining = self.get_remaining(tenant_id)
-            return remaining >= amount if remaining != -1 else True
-        except Exception:
-            logger.exception("Failed to check quota for %s, feature %s", tenant_id, self.value)
-            # fail-safe: allow request on billing errors
-            return True
-
-    def refund(self, charge_id: str) -> None:
-        """
-        Refund quota using charge_id from consume().
-
-        This method guarantees no exceptions will be raised.
-        All errors are logged but silently handled.
-
-        Args:
-            charge_id: The UUID returned from consume()
-        """
-        try:
-            from configs import dify_config
-            from services.billing_service import BillingService
-
-            if not dify_config.BILLING_ENABLED:
-                return
-
-            if not charge_id:
-                logger.warning("Cannot refund: charge_id is empty")
-                return
-
-            logger.info("Refunding %s quota with charge_id: %s", self.value, charge_id)
-
-            response = BillingService.refund_tenant_feature_plan_usage(charge_id)
-            if response.get("result") == "success":
-                logger.debug("Successfully refunded %s quota, charge_id: %s", self.value, charge_id)
-            else:
-                logger.warning("Refund failed for charge_id: %s", charge_id)
-
-        except Exception:
-            # Catch ALL exceptions - refund must never fail
-            logger.exception("Failed to refund quota for charge_id: %s", charge_id)
-            # Don't raise - refund is best-effort and must be silent
-
-    def get_remaining(self, tenant_id: str) -> int:
-        """
-        Get remaining quota for the tenant.
-
-        Args:
-            tenant_id: The tenant identifier
-
-        Returns:
-            Remaining quota amount
-        """
-        from services.billing_service import BillingService
-
-        try:
-            usage_info = BillingService.get_tenant_feature_plan_usage(tenant_id, self.billing_key)
-            # Assuming the API returns a dict with 'remaining' or 'limit' and 'used'
-            if isinstance(usage_info, dict):
-                return usage_info.get("remaining", 0)
-            # If it returns a simple number, treat it as remaining
-            return int(usage_info) if usage_info else 0
-        except Exception:
-            logger.exception("Failed to get remaining quota for %s, feature %s", tenant_id, self.value)
-            return -1
-
-
-def unlimited() -> QuotaCharge:
-    """
-    Return a quota charge for unlimited quota.
-
-    This is useful for features that are not subject to quota limits, such as the UNLIMITED quota type.
-    """
-    return QuotaCharge(success=True, charge_id=None, _quota_type=QuotaType.UNLIMITED)
diff --git a/api/fields/snippet_fields.py b/api/fields/snippet_fields.py
new file mode 100644
index 0000000000..2562d7cff0
--- /dev/null
+++ b/api/fields/snippet_fields.py
@@ -0,0 +1,45 @@
+from flask_restx import fields
+
+from fields.member_fields import simple_account_fields
+from libs.helper import TimestampField
+
+# Snippet list item fields (lightweight for list display)
+snippet_list_fields = {
+    "id": fields.String,
+    "name": fields.String,
+    "description": fields.String,
+    "type": fields.String,
+    "version": fields.Integer,
+    "use_count": fields.Integer,
+    "is_published": fields.Boolean,
+    "icon_info": fields.Raw,
+    "created_at": TimestampField,
+    "updated_at": TimestampField,
+}
+
+# Full snippet fields (includes creator info and graph data)
+snippet_fields = {
+    "id": fields.String,
+    "name": fields.String,
+    "description": fields.String,
+    "type": fields.String,
+    "version": fields.Integer,
+    "use_count": fields.Integer,
+    "is_published": fields.Boolean,
+    "icon_info": fields.Raw,
+    "graph": fields.Raw(attribute="graph_dict"),
+    "input_fields": fields.Raw(attribute="input_fields_list"),
+    "created_by": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
+    "created_at": TimestampField,
+    "updated_by": fields.Nested(simple_account_fields, attribute="updated_by_account", allow_null=True),
+    "updated_at": TimestampField,
+}
+
+# Pagination response fields
+snippet_pagination_fields = {
+    "data": fields.List(fields.Nested(snippet_list_fields)),
+    "page": fields.Integer,
+    "limit": fields.Integer,
+    "total": fields.Integer,
+    "has_more": fields.Boolean,
+}
diff --git a/api/fields/workflow_app_log_fields.py b/api/fields/workflow_app_log_fields.py
index d0e762f62b..195b720285 100644
--- a/api/fields/workflow_app_log_fields.py
+++ b/api/fields/workflow_app_log_fields.py
@@ -14,6 +14,7 @@ workflow_app_log_partial_fields = {
     "id": fields.String,
     "workflow_run": fields.Nested(workflow_run_for_log_fields, attribute="workflow_run", allow_null=True),
     "details": fields.Raw(attribute="details"),
+    "evaluation": fields.Raw(attribute="evaluation", default=None),
     "created_from": fields.String,
     "created_by_role": fields.String,
     "created_by_account": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
diff --git a/api/migrations/versions/2026_01_29_1200-1c05e80d2380_add_customized_snippets_table.py b/api/migrations/versions/2026_01_29_1200-1c05e80d2380_add_customized_snippets_table.py
new file mode 100644
index 0000000000..5d487b121b
--- /dev/null
+++ b/api/migrations/versions/2026_01_29_1200-1c05e80d2380_add_customized_snippets_table.py
@@ -0,0 +1,83 @@
+"""add_customized_snippets_table
+
+Revision ID: 1c05e80d2380
+Revises: 788d3099ae3a
+Create Date: 2026-01-29 12:00:00.000000
+
+"""
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy.dialects import postgresql
+
+import models as models
+
+
+def _is_pg(conn):
+    return conn.dialect.name == "postgresql"
+
+
+# revision identifiers, used by Alembic.
+revision = "1c05e80d2380"
+down_revision = "788d3099ae3a"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    conn = op.get_bind()
+
+    if _is_pg(conn):
+        op.create_table(
+            "customized_snippets",
+            sa.Column("id", models.types.StringUUID(), server_default=sa.text("uuidv7()"), nullable=False),
+            sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
+            sa.Column("name", sa.String(length=255), nullable=False),
+            sa.Column("description", sa.Text(), nullable=True),
+            sa.Column("type", sa.String(length=50), server_default=sa.text("'node'"), nullable=False),
+            sa.Column("workflow_id", models.types.StringUUID(), nullable=True),
+            sa.Column("is_published", sa.Boolean(), server_default=sa.text("false"), nullable=False),
+            sa.Column("version", sa.Integer(), server_default=sa.text("1"), nullable=False),
+            sa.Column("use_count", sa.Integer(), server_default=sa.text("0"), nullable=False),
+            sa.Column("icon_info", postgresql.JSONB(astext_type=sa.Text()), nullable=True),
+            sa.Column("graph", sa.Text(), nullable=True),
+            sa.Column("input_fields", sa.Text(), nullable=True),
+            sa.Column("created_by", models.types.StringUUID(), nullable=True),
+            sa.Column("created_at", sa.DateTime(), server_default=sa.text("CURRENT_TIMESTAMP"), nullable=False),
+            sa.Column("updated_by", models.types.StringUUID(), nullable=True),
+            sa.Column("updated_at", sa.DateTime(), server_default=sa.text("CURRENT_TIMESTAMP"), nullable=False),
+            sa.PrimaryKeyConstraint("id", name="customized_snippet_pkey"),
+            sa.UniqueConstraint("tenant_id", "name", name="customized_snippet_tenant_name_key"),
+        )
+    else:
+        op.create_table(
+            "customized_snippets",
+            sa.Column("id", models.types.StringUUID(), nullable=False),
+            sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
+            sa.Column("name", sa.String(length=255), nullable=False),
+            sa.Column("description", models.types.LongText(), nullable=True),
+            sa.Column("type", sa.String(length=50), server_default=sa.text("'node'"), nullable=False),
+            sa.Column("workflow_id", models.types.StringUUID(), nullable=True),
+            sa.Column("is_published", sa.Boolean(), server_default=sa.text("false"), nullable=False),
+            sa.Column("version", sa.Integer(), server_default=sa.text("1"), nullable=False),
+            sa.Column("use_count", sa.Integer(), server_default=sa.text("0"), nullable=False),
+            sa.Column("icon_info", models.types.AdjustedJSON(astext_type=sa.Text()), nullable=True),
+            sa.Column("graph", models.types.LongText(), nullable=True),
+            sa.Column("input_fields", models.types.LongText(), nullable=True),
+            sa.Column("created_by", models.types.StringUUID(), nullable=True),
+            sa.Column("created_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+            sa.Column("updated_by", models.types.StringUUID(), nullable=True),
+            sa.Column("updated_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+            sa.PrimaryKeyConstraint("id", name="customized_snippet_pkey"),
+            sa.UniqueConstraint("tenant_id", "name", name="customized_snippet_tenant_name_key"),
+        )
+
+    with op.batch_alter_table("customized_snippets", schema=None) as batch_op:
+        batch_op.create_index("customized_snippet_tenant_idx", ["tenant_id"], unique=False)
+
+
+def downgrade():
+    with op.batch_alter_table("customized_snippets", schema=None) as batch_op:
+        batch_op.drop_index("customized_snippet_tenant_idx")
+
+    op.drop_table("customized_snippets")
diff --git a/api/migrations/versions/2026_03_03_0001-a1b2c3d4e5f6_add_evaluation_tables.py b/api/migrations/versions/2026_03_03_0001-a1b2c3d4e5f6_add_evaluation_tables.py
new file mode 100644
index 0000000000..986b4ca8bd
--- /dev/null
+++ b/api/migrations/versions/2026_03_03_0001-a1b2c3d4e5f6_add_evaluation_tables.py
@@ -0,0 +1,116 @@
+"""add_evaluation_tables
+
+Revision ID: a1b2c3d4e5f6
+Revises: 1c05e80d2380
+Create Date: 2026-03-03 00:01:00.000000
+
+"""
+
+import sqlalchemy as sa
+from alembic import op
+
+import models as models
+
+
+# revision identifiers, used by Alembic.
+revision = "a1b2c3d4e5f6"
+down_revision = "1c05e80d2380"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # evaluation_configurations
+    op.create_table(
+        "evaluation_configurations",
+        sa.Column("id", models.types.StringUUID(), nullable=False),
+        sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
+        sa.Column("target_type", sa.String(length=20), nullable=False),
+        sa.Column("target_id", models.types.StringUUID(), nullable=False),
+        sa.Column("evaluation_model_provider", sa.String(length=255), nullable=True),
+        sa.Column("evaluation_model", sa.String(length=255), nullable=True),
+        sa.Column("metrics_config", models.types.LongText(), nullable=True),
+        sa.Column("judgement_conditions", models.types.LongText(), nullable=True),
+        sa.Column("created_by", models.types.StringUUID(), nullable=False),
+        sa.Column("updated_by", models.types.StringUUID(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+        sa.Column("updated_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+        sa.PrimaryKeyConstraint("id", name="evaluation_configuration_pkey"),
+        sa.UniqueConstraint("tenant_id", "target_type", "target_id", name="evaluation_configuration_unique"),
+    )
+    with op.batch_alter_table("evaluation_configurations", schema=None) as batch_op:
+        batch_op.create_index(
+            "evaluation_configuration_target_idx", ["tenant_id", "target_type", "target_id"], unique=False
+        )
+
+    # evaluation_runs
+    op.create_table(
+        "evaluation_runs",
+        sa.Column("id", models.types.StringUUID(), nullable=False),
+        sa.Column("tenant_id", models.types.StringUUID(), nullable=False),
+        sa.Column("target_type", sa.String(length=20), nullable=False),
+        sa.Column("target_id", models.types.StringUUID(), nullable=False),
+        sa.Column("evaluation_config_id", models.types.StringUUID(), nullable=False),
+        sa.Column("status", sa.String(length=20), nullable=False, server_default=sa.text("'pending'")),
+        sa.Column("dataset_file_id", models.types.StringUUID(), nullable=True),
+        sa.Column("result_file_id", models.types.StringUUID(), nullable=True),
+        sa.Column("total_items", sa.Integer(), nullable=False, server_default=sa.text("0")),
+        sa.Column("completed_items", sa.Integer(), nullable=False, server_default=sa.text("0")),
+        sa.Column("failed_items", sa.Integer(), nullable=False, server_default=sa.text("0")),
+        sa.Column("metrics_summary", models.types.LongText(), nullable=True),
+        sa.Column("error", sa.Text(), nullable=True),
+        sa.Column("celery_task_id", sa.String(length=255), nullable=True),
+        sa.Column("created_by", models.types.StringUUID(), nullable=False),
+        sa.Column("started_at", sa.DateTime(), nullable=True),
+        sa.Column("completed_at", sa.DateTime(), nullable=True),
+        sa.Column("created_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+        sa.Column("updated_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+        sa.PrimaryKeyConstraint("id", name="evaluation_run_pkey"),
+    )
+    with op.batch_alter_table("evaluation_runs", schema=None) as batch_op:
+        batch_op.create_index(
+            "evaluation_run_target_idx", ["tenant_id", "target_type", "target_id"], unique=False
+        )
+        batch_op.create_index("evaluation_run_status_idx", ["tenant_id", "status"], unique=False)
+
+    # evaluation_run_items
+    op.create_table(
+        "evaluation_run_items",
+        sa.Column("id", models.types.StringUUID(), nullable=False),
+        sa.Column("evaluation_run_id", models.types.StringUUID(), nullable=False),
+        sa.Column("workflow_run_id", models.types.StringUUID(), nullable=True),
+        sa.Column("item_index", sa.Integer(), nullable=False),
+        sa.Column("inputs", models.types.LongText(), nullable=True),
+        sa.Column("expected_output", models.types.LongText(), nullable=True),
+        sa.Column("context", models.types.LongText(), nullable=True),
+        sa.Column("actual_output", models.types.LongText(), nullable=True),
+        sa.Column("metrics", models.types.LongText(), nullable=True),
+        sa.Column("metadata_json", models.types.LongText(), nullable=True),
+        sa.Column("error", sa.Text(), nullable=True),
+        sa.Column("overall_score", sa.Float(), nullable=True),
+        sa.Column("created_at", sa.DateTime(), server_default=sa.func.current_timestamp(), nullable=False),
+        sa.PrimaryKeyConstraint("id", name="evaluation_run_item_pkey"),
+    )
+    with op.batch_alter_table("evaluation_run_items", schema=None) as batch_op:
+        batch_op.create_index("evaluation_run_item_run_idx", ["evaluation_run_id"], unique=False)
+        batch_op.create_index(
+            "evaluation_run_item_index_idx", ["evaluation_run_id", "item_index"], unique=False
+        )
+        batch_op.create_index("evaluation_run_item_workflow_run_idx", ["workflow_run_id"], unique=False)
+
+
+def downgrade():
+    with op.batch_alter_table("evaluation_run_items", schema=None) as batch_op:
+        batch_op.drop_index("evaluation_run_item_workflow_run_idx")
+        batch_op.drop_index("evaluation_run_item_index_idx")
+        batch_op.drop_index("evaluation_run_item_run_idx")
+    op.drop_table("evaluation_run_items")
+
+    with op.batch_alter_table("evaluation_runs", schema=None) as batch_op:
+        batch_op.drop_index("evaluation_run_status_idx")
+        batch_op.drop_index("evaluation_run_target_idx")
+    op.drop_table("evaluation_runs")
+
+    with op.batch_alter_table("evaluation_configurations", schema=None) as batch_op:
+        batch_op.drop_index("evaluation_configuration_target_idx")
+    op.drop_table("evaluation_configurations")
diff --git a/api/migrations/versions/2026_03_17_1721-4c60d8d3ee74_merge_migration_heads.py b/api/migrations/versions/2026_03_17_1721-4c60d8d3ee74_merge_migration_heads.py
new file mode 100644
index 0000000000..4b1b32c8d3
--- /dev/null
+++ b/api/migrations/versions/2026_03_17_1721-4c60d8d3ee74_merge_migration_heads.py
@@ -0,0 +1,25 @@
+"""merge migration heads
+
+Revision ID: 4c60d8d3ee74
+Revises: fce013ca180e, a1b2c3d4e5f6
+Create Date: 2026-03-17 17:21:12.105536
+
+"""
+from alembic import op
+import models as models
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '4c60d8d3ee74'
+down_revision = ('fce013ca180e', 'a1b2c3d4e5f6')
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    pass
+
+
+def downgrade():
+    pass
diff --git a/api/models/__init__.py b/api/models/__init__.py
index fcae07f948..8a605d5195 100644
--- a/api/models/__init__.py
+++ b/api/models/__init__.py
@@ -33,6 +33,13 @@ from .enums import (
     WorkflowRunTriggeredFrom,
     WorkflowTriggerStatus,
 )
+from .evaluation import (
+    EvaluationConfiguration,
+    EvaluationRun,
+    EvaluationRunItem,
+    EvaluationRunStatus,
+    EvaluationTargetType,
+)
 from .execution_extra_content import ExecutionExtraContent, HumanInputContent
 from .human_input import HumanInputForm
 from .model import (
@@ -80,6 +87,7 @@ from .provider import (
     TenantDefaultModel,
     TenantPreferredModelProvider,
 )
+from .snippet import CustomizedSnippet, SnippetType
 from .source import DataSourceApiKeyAuthBinding, DataSourceOauthBinding
 from .task import CeleryTask, CeleryTaskSet
 from .tools import (
@@ -139,6 +147,7 @@ __all__ = [
     "Conversation",
     "ConversationVariable",
     "CreatorUserRole",
+    "CustomizedSnippet",
     "DataSourceApiKeyAuthBinding",
     "DataSourceOauthBinding",
     "Dataset",
@@ -156,6 +165,11 @@ __all__ = [
     "DocumentSegment",
     "Embedding",
     "EndUser",
+    "EvaluationConfiguration",
+    "EvaluationRun",
+    "EvaluationRunItem",
+    "EvaluationRunStatus",
+    "EvaluationTargetType",
     "ExecutionExtraContent",
     "ExporleBanner",
     "ExternalKnowledgeApis",
@@ -183,6 +197,7 @@ __all__ = [
     "RecommendedApp",
     "SavedMessage",
     "Site",
+    "SnippetType",
     "Tag",
     "TagBinding",
     "Tenant",
diff --git a/api/models/evaluation.py b/api/models/evaluation.py
new file mode 100644
index 0000000000..680d6ab31c
--- /dev/null
+++ b/api/models/evaluation.py
@@ -0,0 +1,205 @@
+from __future__ import annotations
+
+import json
+from datetime import datetime
+from enum import StrEnum
+from typing import Any
+
+import sqlalchemy as sa
+from sqlalchemy import DateTime, Float, Integer, String, Text, func
+from sqlalchemy.orm import Mapped, mapped_column
+
+from libs.uuid_utils import uuidv7
+
+from .base import Base
+from .types import LongText, StringUUID
+
+
+class EvaluationRunStatus(StrEnum):
+    PENDING = "pending"
+    RUNNING = "running"
+    COMPLETED = "completed"
+    FAILED = "failed"
+    CANCELLED = "cancelled"
+
+
+class EvaluationTargetType(StrEnum):
+    APP = "app"
+    SNIPPETS = "snippets"
+    KNOWLEDGE_BASE = "knowledge_base"
+
+
+class EvaluationConfiguration(Base):
+    """Stores evaluation configuration for each target (App or Snippet)."""
+
+    __tablename__ = "evaluation_configurations"
+    __table_args__ = (
+        sa.PrimaryKeyConstraint("id", name="evaluation_configuration_pkey"),
+        sa.Index("evaluation_configuration_target_idx", "tenant_id", "target_type", "target_id"),
+        sa.Index("evaluation_configuration_workflow_idx", "customized_workflow_id"),
+        sa.UniqueConstraint("tenant_id", "target_type", "target_id", name="evaluation_configuration_unique"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuidv7()))
+    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    target_type: Mapped[str] = mapped_column(String(20), nullable=False)
+    target_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+
+    evaluation_model_provider: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    evaluation_model: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    metrics_config: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    judgement_conditions: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    customized_workflow_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    updated_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+
+    @property
+    def metrics_config_dict(self) -> dict[str, Any]:
+        if self.metrics_config:
+            return json.loads(self.metrics_config)
+        return {}
+
+    @metrics_config_dict.setter
+    def metrics_config_dict(self, value: dict[str, Any]) -> None:
+        self.metrics_config = json.dumps(value)
+
+    @property
+    def default_metrics_list(self) -> list[dict[str, Any]]:
+        """Extract default_metrics from the stored metrics_config JSON."""
+        config = self.metrics_config_dict
+        return config.get("default_metrics", [])
+
+    @property
+    def customized_metrics_dict(self) -> dict[str, Any] | None:
+        """Extract customized_metrics from the stored metrics_config JSON."""
+        config = self.metrics_config_dict
+        return config.get("customized_metrics")
+
+    @property
+    def judgment_config_dict(self) -> dict[str, Any] | None:
+        """Return judgment config (stored in the judgement_conditions column)."""
+        if self.judgement_conditions:
+            parsed = json.loads(self.judgement_conditions)
+            return parsed if parsed else None
+        return None
+
+    @property
+    def judgement_conditions_dict(self) -> dict[str, Any]:
+        if self.judgement_conditions:
+            return json.loads(self.judgement_conditions)
+        return {}
+
+    @judgement_conditions_dict.setter
+    def judgement_conditions_dict(self, value: dict[str, Any]) -> None:
+        self.judgement_conditions = json.dumps(value)
+
+    def __repr__(self) -> str:
+        return f"<EvaluationConfiguration(id={self.id}, target={self.target_type}:{self.target_id})>"
+
+
+class EvaluationRun(Base):
+    """Stores each evaluation run record."""
+
+    __tablename__ = "evaluation_runs"
+    __table_args__ = (
+        sa.PrimaryKeyConstraint("id", name="evaluation_run_pkey"),
+        sa.Index("evaluation_run_target_idx", "tenant_id", "target_type", "target_id"),
+        sa.Index("evaluation_run_status_idx", "tenant_id", "status"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuidv7()))
+    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    target_type: Mapped[str] = mapped_column(String(20), nullable=False)
+    target_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    evaluation_config_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+
+    status: Mapped[str] = mapped_column(String(20), nullable=False, default=EvaluationRunStatus.PENDING)
+    dataset_file_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+    result_file_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+
+    total_items: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
+    completed_items: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
+    failed_items: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
+    error: Mapped[str | None] = mapped_column(Text, nullable=True)
+
+    celery_task_id: Mapped[str | None] = mapped_column(String(255), nullable=True)
+
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    started_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    completed_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+
+    @property
+    def progress(self) -> float:
+        if self.total_items == 0:
+            return 0.0
+        return (self.completed_items + self.failed_items) / self.total_items
+
+    def __repr__(self) -> str:
+        return f"<EvaluationRun(id={self.id}, status={self.status})>"
+
+
+class EvaluationRunItem(Base):
+    """Stores per-row evaluation results."""
+
+    __tablename__ = "evaluation_run_items"
+    __table_args__ = (
+        sa.PrimaryKeyConstraint("id", name="evaluation_run_item_pkey"),
+        sa.Index("evaluation_run_item_run_idx", "evaluation_run_id"),
+        sa.Index("evaluation_run_item_index_idx", "evaluation_run_id", "item_index"),
+        sa.Index("evaluation_run_item_workflow_run_idx", "workflow_run_id"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuidv7()))
+    evaluation_run_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    workflow_run_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+
+    item_index: Mapped[int] = mapped_column(Integer, nullable=False)
+    inputs: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    expected_output: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    context: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    actual_output: Mapped[str | None] = mapped_column(LongText, nullable=True)
+
+    metrics: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    judgment: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    metadata_json: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    error: Mapped[str | None] = mapped_column(Text, nullable=True)
+
+    overall_score: Mapped[float | None] = mapped_column(Float, nullable=True)
+
+    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
+
+    @property
+    def inputs_dict(self) -> dict[str, Any]:
+        if self.inputs:
+            return json.loads(self.inputs)
+        return {}
+
+    @property
+    def metrics_list(self) -> list[dict[str, Any]]:
+        if self.metrics:
+            return json.loads(self.metrics)
+        return []
+
+    @property
+    def judgment_dict(self) -> dict[str, Any]:
+        if self.judgment:
+            return json.loads(self.judgment)
+        return {}
+
+    @property
+    def metadata_dict(self) -> dict[str, Any]:
+        if self.metadata_json:
+            return json.loads(self.metadata_json)
+        return {}
+
+    def __repr__(self) -> str:
+        return f"<EvaluationRunItem(id={self.id}, run={self.evaluation_run_id}, index={self.item_index})>"
diff --git a/api/models/snippet.py b/api/models/snippet.py
new file mode 100644
index 0000000000..4a4645d744
--- /dev/null
+++ b/api/models/snippet.py
@@ -0,0 +1,101 @@
+import json
+from datetime import datetime
+from enum import StrEnum
+from typing import Any
+
+import sqlalchemy as sa
+from sqlalchemy import DateTime, String, func
+from sqlalchemy.orm import Mapped, mapped_column
+
+from libs.uuid_utils import uuidv7
+
+from .account import Account
+from .base import Base
+from .engine import db
+from .types import AdjustedJSON, LongText, StringUUID
+
+
+class SnippetType(StrEnum):
+    """Snippet Type Enum"""
+
+    NODE = "node"
+    GROUP = "group"
+
+
+class CustomizedSnippet(Base):
+    """
+    Customized Snippet Model
+
+    Stores reusable workflow components (nodes or node groups) that can be
+    shared across applications within a workspace.
+    """
+
+    __tablename__ = "customized_snippets"
+    __table_args__ = (
+        sa.PrimaryKeyConstraint("id", name="customized_snippet_pkey"),
+        sa.Index("customized_snippet_tenant_idx", "tenant_id"),
+        sa.UniqueConstraint("tenant_id", "name", name="customized_snippet_tenant_name_key"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuidv7()))
+    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    name: Mapped[str] = mapped_column(String(255), nullable=False)
+    description: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    type: Mapped[str] = mapped_column(String(50), nullable=False, server_default=sa.text("'node'"))
+
+    # Workflow reference for published version
+    workflow_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+
+    # State flags
+    is_published: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("false"))
+    version: Mapped[int] = mapped_column(sa.Integer, nullable=False, server_default=sa.text("1"))
+    use_count: Mapped[int] = mapped_column(sa.Integer, nullable=False, server_default=sa.text("0"))
+
+    # Visual customization
+    icon_info: Mapped[dict | None] = mapped_column(AdjustedJSON, nullable=True)
+
+    # Snippet configuration (stored as JSON text)
+    input_fields: Mapped[str | None] = mapped_column(LongText, nullable=True)
+
+    # Audit fields
+    created_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+
+    @property
+    def graph_dict(self) -> dict[str, Any]:
+        """Get graph from associated workflow."""
+        if self.workflow_id:
+            from .workflow import Workflow
+
+            workflow = db.session.get(Workflow, self.workflow_id)
+            if workflow:
+                return json.loads(workflow.graph) if workflow.graph else {}
+        return {}
+
+    @property
+    def input_fields_list(self) -> list[dict[str, Any]]:
+        """Parse input_fields JSON to list."""
+        return json.loads(self.input_fields) if self.input_fields else []
+
+    @property
+    def created_by_account(self) -> Account | None:
+        """Get the account that created this snippet."""
+        if self.created_by:
+            return db.session.get(Account, self.created_by)
+        return None
+
+    @property
+    def updated_by_account(self) -> Account | None:
+        """Get the account that last updated this snippet."""
+        if self.updated_by:
+            return db.session.get(Account, self.updated_by)
+        return None
+
+    @property
+    def version_str(self) -> str:
+        """Get version as string for API response."""
+        return str(self.version)
diff --git a/api/models/workflow.py b/api/models/workflow.py
index 63abf8c3b6..aadb062426 100644
--- a/api/models/workflow.py
+++ b/api/models/workflow.py
@@ -106,6 +106,8 @@ class WorkflowType(StrEnum):
     WORKFLOW = "workflow"
     CHAT = "chat"
     RAG_PIPELINE = "rag-pipeline"
+    SNIPPET = "snippet"
+    EVALUATION = "evaluation"
 
     @classmethod
     def value_of(cls, value: str) -> "WorkflowType":
diff --git a/api/pyproject.toml b/api/pyproject.toml
index f22bafb03a..abef591783 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -234,6 +234,12 @@ storage = [
 ############################################################
 tools = ["cloudscraper~=1.2.71", "nltk~=3.9.1"]
 
+############################################################
+# [ Evaluation ] dependency group
+# Required for evaluation frameworks
+############################################################
+evaluation = ["ragas>=0.2.0", "deepeval>=2.0.0"]
+
 ############################################################
 # [ VDB ] workspace plugins — hollow packages under providers/vdb/*
 # Each declares its own third-party deps and registers dify.vector_backends entry points.
diff --git a/api/services/app_generate_service.py b/api/services/app_generate_service.py
index 5e8c7aa337..2c9d815b64 100644
--- a/api/services/app_generate_service.py
+++ b/api/services/app_generate_service.py
@@ -18,12 +18,13 @@ from core.app.features.rate_limiting import RateLimit
 from core.app.features.rate_limiting.rate_limit import rate_limit_context
 from core.app.layers.pause_state_persist_layer import PauseStateLayerConfig
 from core.db import session_factory
-from enums.quota_type import QuotaType, unlimited
+from enums.quota_type import QuotaType
 from extensions.otel import AppGenerateHandler, trace_span
 from models.model import Account, App, AppMode, EndUser
 from models.workflow import Workflow, WorkflowRun
 from services.errors.app import QuotaExceededError, WorkflowIdFormatError, WorkflowNotFoundError
 from services.errors.llm import InvokeRateLimitError
+from services.quota_service import QuotaService, unlimited
 from services.workflow_service import WorkflowService
 from tasks.app_generate.workflow_execute_task import AppExecutionParams, workflow_based_app_execution_task
 
@@ -106,7 +107,7 @@ class AppGenerateService:
         quota_charge = unlimited()
         if dify_config.BILLING_ENABLED:
             try:
-                quota_charge = QuotaType.WORKFLOW.consume(app_model.tenant_id)
+                quota_charge = QuotaService.reserve(QuotaType.WORKFLOW, app_model.tenant_id)
             except QuotaExceededError:
                 raise InvokeRateLimitError(f"Workflow execution quota limit reached for tenant {app_model.tenant_id}")
 
@@ -116,6 +117,7 @@ class AppGenerateService:
         request_id = RateLimit.gen_request_key()
         try:
             request_id = rate_limit.enter(request_id)
+            quota_charge.commit()
             effective_mode = (
                 AppMode.AGENT_CHAT if app_model.is_agent and app_model.mode != AppMode.AGENT_CHAT else app_model.mode
             )
diff --git a/api/services/async_workflow_service.py b/api/services/async_workflow_service.py
index a731d5c048..8b39d63385 100644
--- a/api/services/async_workflow_service.py
+++ b/api/services/async_workflow_service.py
@@ -22,6 +22,7 @@ from models.trigger import WorkflowTriggerLog, WorkflowTriggerLogDict
 from models.workflow import Workflow
 from repositories.sqlalchemy_workflow_trigger_log_repository import SQLAlchemyWorkflowTriggerLogRepository
 from services.errors.app import QuotaExceededError, WorkflowNotFoundError, WorkflowQuotaLimitError
+from services.quota_service import QuotaService, unlimited
 from services.workflow.entities import AsyncTriggerResponse, TriggerData, WorkflowTaskData
 from services.workflow.queue_dispatcher import QueueDispatcherManager, QueuePriority
 from services.workflow_service import WorkflowService
@@ -131,9 +132,10 @@ class AsyncWorkflowService:
         trigger_log = trigger_log_repo.create(trigger_log)
         session.commit()
 
-        # 7. Check and consume quota
+        # 7. Reserve quota (commit after successful dispatch)
+        quota_charge = unlimited()
         try:
-            QuotaType.WORKFLOW.consume(trigger_data.tenant_id)
+            quota_charge = QuotaService.reserve(QuotaType.WORKFLOW, trigger_data.tenant_id)
         except QuotaExceededError as e:
             # Update trigger log status
             trigger_log.status = WorkflowTriggerStatus.RATE_LIMITED
@@ -153,13 +155,18 @@ class AsyncWorkflowService:
         # 9. Dispatch to appropriate queue
         task_data_dict = task_data.model_dump(mode="json")
 
-        task: AsyncResult[Any] | None = None
-        if queue_name == QueuePriority.PROFESSIONAL:
-            task = execute_workflow_professional.delay(task_data_dict)
-        elif queue_name == QueuePriority.TEAM:
-            task = execute_workflow_team.delay(task_data_dict)
-        else:  # SANDBOX
-            task = execute_workflow_sandbox.delay(task_data_dict)
+        try:
+            task: AsyncResult[Any] | None = None
+            if queue_name == QueuePriority.PROFESSIONAL:
+                task = execute_workflow_professional.delay(task_data_dict)
+            elif queue_name == QueuePriority.TEAM:
+                task = execute_workflow_team.delay(task_data_dict)
+            else:  # SANDBOX
+                task = execute_workflow_sandbox.delay(task_data_dict)
+            quota_charge.commit()
+        except Exception:
+            quota_charge.refund()
+            raise
 
         # 10. Update trigger log with task info
         trigger_log.status = WorkflowTriggerStatus.QUEUED
diff --git a/api/services/billing_service.py b/api/services/billing_service.py
index a1362ccad6..eeaddfee2f 100644
--- a/api/services/billing_service.py
+++ b/api/services/billing_service.py
@@ -32,6 +32,102 @@ class SubscriptionPlan(TypedDict):
     expiration_date: int
 
 
+class QuotaReserveResult(TypedDict):
+    reservation_id: str
+    available: int
+    reserved: int
+
+
+class QuotaCommitResult(TypedDict):
+    available: int
+    reserved: int
+    refunded: int
+
+
+class QuotaReleaseResult(TypedDict):
+    available: int
+    reserved: int
+    released: int
+
+
+_quota_reserve_adapter = TypeAdapter(QuotaReserveResult)
+_quota_commit_adapter = TypeAdapter(QuotaCommitResult)
+_quota_release_adapter = TypeAdapter(QuotaReleaseResult)
+class _BillingQuota(TypedDict):
+    size: int
+    limit: int
+
+
+class _VectorSpaceQuota(TypedDict):
+    size: float
+    limit: int
+
+
+class _KnowledgeRateLimit(TypedDict):
+    # NOTE (hj24):
+    # 1. Return for sandbox users but is null for other plans, it's defined but never used.
+    # 2. Keep it for compatibility for now, can be deprecated in future versions.
+    size: NotRequired[int]
+    # NOTE END
+    limit: int
+
+
+class _BillingSubscription(TypedDict):
+    plan: str
+    interval: str
+    education: bool
+
+
+class BillingInfo(TypedDict):
+    """Response of /subscription/info.
+
+    NOTE (hj24):
+    - Fields not listed here (e.g. trigger_event, api_rate_limit) are stripped by TypeAdapter.validate_python()
+    - To ensure the precision, billing may convert fields like int as str, be careful when use TypeAdapter:
+        1. validate_python in non-strict mode will coerce it to the expected type
+        2. In strict mode, it will raise ValidationError
+        3. To preserve compatibility, always keep non-strict mode here and avoid strict mode
+    """
+
+    enabled: bool
+    subscription: _BillingSubscription
+    members: _BillingQuota
+    apps: _BillingQuota
+    vector_space: _VectorSpaceQuota
+    knowledge_rate_limit: _KnowledgeRateLimit
+    documents_upload_quota: _BillingQuota
+    annotation_quota_limit: _BillingQuota
+    docs_processing: str
+    can_replace_logo: bool
+    model_load_balancing_enabled: bool
+    knowledge_pipeline_publish_enabled: bool
+    next_credit_reset_date: NotRequired[int]
+
+
+_billing_info_adapter = TypeAdapter(BillingInfo)
+
+
+class _TenantFeatureQuota(TypedDict):
+    usage: int
+    limit: int
+    reset_date: NotRequired[int]
+
+
+class TenantFeatureQuotaInfo(TypedDict):
+    """Response of /quota/info.
+
+    NOTE (hj24):
+    - Same convention as BillingInfo: billing may return int fields as str,
+      always keep non-strict mode to auto-coerce.
+    """
+
+    trigger_event: _TenantFeatureQuota
+    api_rate_limit: _TenantFeatureQuota
+
+
+_tenant_feature_quota_info_adapter = TypeAdapter(TenantFeatureQuotaInfo)
+
+
 class _BillingQuota(TypedDict):
     size: int
     limit: int
@@ -149,11 +245,63 @@ class BillingService:
 
     @classmethod
     def get_tenant_feature_plan_usage_info(cls, tenant_id: str):
+        """Deprecated: Use get_quota_info instead."""
         params = {"tenant_id": tenant_id}
-
         usage_info = cls._send_request("GET", "/tenant-feature-usage/info", params=params)
         return usage_info
 
+    @classmethod
+    def get_quota_info(cls, tenant_id: str) -> TenantFeatureQuotaInfo:
+        params = {"tenant_id": tenant_id}
+        return _tenant_feature_quota_info_adapter.validate_python(
+            cls._send_request("GET", "/quota/info", params=params)
+        )
+
+    @classmethod
+    def quota_reserve(
+        cls, tenant_id: str, feature_key: str, request_id: str, amount: int = 1, meta: dict | None = None
+    ) -> QuotaReserveResult:
+        """Reserve quota before task execution."""
+        payload: dict = {
+            "tenant_id": tenant_id,
+            "feature_key": feature_key,
+            "request_id": request_id,
+            "amount": amount,
+        }
+        if meta:
+            payload["meta"] = meta
+        return _quota_reserve_adapter.validate_python(cls._send_request("POST", "/quota/reserve", json=payload))
+
+    @classmethod
+    def quota_commit(
+        cls, tenant_id: str, feature_key: str, reservation_id: str, actual_amount: int, meta: dict | None = None
+    ) -> QuotaCommitResult:
+        """Commit a reservation with actual consumption."""
+        payload: dict = {
+            "tenant_id": tenant_id,
+            "feature_key": feature_key,
+            "reservation_id": reservation_id,
+            "actual_amount": actual_amount,
+        }
+        if meta:
+            payload["meta"] = meta
+        return _quota_commit_adapter.validate_python(cls._send_request("POST", "/quota/commit", json=payload))
+
+    @classmethod
+    def quota_release(cls, tenant_id: str, feature_key: str, reservation_id: str) -> QuotaReleaseResult:
+        """Release a reservation (cancel, return frozen quota)."""
+        return _quota_release_adapter.validate_python(
+            cls._send_request(
+                "POST",
+                "/quota/release",
+                json={
+                    "tenant_id": tenant_id,
+                    "feature_key": feature_key,
+                    "reservation_id": reservation_id,
+                },
+            )
+        )
+
     @classmethod
     def get_knowledge_rate_limit(cls, tenant_id: str) -> KnowledgeRateLimitDict:
         params = {"tenant_id": tenant_id}
diff --git a/api/services/errors/evaluation.py b/api/services/errors/evaluation.py
new file mode 100644
index 0000000000..6affb68d21
--- /dev/null
+++ b/api/services/errors/evaluation.py
@@ -0,0 +1,21 @@
+from services.errors.base import BaseServiceError
+
+
+class EvaluationFrameworkNotConfiguredError(BaseServiceError):
+    def __init__(self, description: str | None = None):
+        super().__init__(description or "Evaluation framework is not configured. Set EVALUATION_FRAMEWORK env var.")
+
+
+class EvaluationNotFoundError(BaseServiceError):
+    def __init__(self, description: str | None = None):
+        super().__init__(description or "Evaluation not found.")
+
+
+class EvaluationDatasetInvalidError(BaseServiceError):
+    def __init__(self, description: str | None = None):
+        super().__init__(description or "Evaluation dataset is invalid.")
+
+
+class EvaluationMaxConcurrentRunsError(BaseServiceError):
+    def __init__(self, description: str | None = None):
+        super().__init__(description or "Maximum number of concurrent evaluation runs reached.")
diff --git a/api/services/evaluation_service.py b/api/services/evaluation_service.py
new file mode 100644
index 0000000000..196af2a617
--- /dev/null
+++ b/api/services/evaluation_service.py
@@ -0,0 +1,985 @@
+import io
+import json
+import logging
+from collections.abc import Mapping
+from typing import Any, Union
+
+from openpyxl import Workbook, load_workbook
+from openpyxl.styles import Alignment, Border, Font, PatternFill, Side
+from openpyxl.utils import get_column_letter
+from sqlalchemy.orm import Session
+
+from configs import dify_config
+from core.evaluation.entities.evaluation_entity import (
+    METRIC_NODE_TYPE_MAPPING,
+    METRIC_VALUE_TYPE_MAPPING,
+    DefaultMetric,
+    EvaluationCategory,
+    EvaluationConfigData,
+    EvaluationDatasetInput,
+    EvaluationMetricName,
+    EvaluationRunData,
+    EvaluationRunRequest,
+    NodeInfo,
+)
+from core.evaluation.evaluation_manager import EvaluationManager
+from graphon.enums import WorkflowNodeExecutionMetadataKey
+from graphon.node_events.base import NodeRunResult
+from models.evaluation import (
+    EvaluationConfiguration,
+    EvaluationRun,
+    EvaluationRunItem,
+    EvaluationRunStatus,
+)
+from models.model import App, AppMode
+from models.snippet import CustomizedSnippet
+from models.workflow import Workflow
+from services.errors.evaluation import (
+    EvaluationDatasetInvalidError,
+    EvaluationFrameworkNotConfiguredError,
+    EvaluationMaxConcurrentRunsError,
+    EvaluationNotFoundError,
+)
+from services.snippet_service import SnippetService
+from services.workflow_service import WorkflowService
+
+logger = logging.getLogger(__name__)
+
+
+class EvaluationService:
+    """
+    Service for evaluation-related operations.
+
+    Provides functionality to generate evaluation dataset templates
+    based on App or Snippet input parameters.
+    """
+
+    # Excluded app modes that don't support evaluation templates
+    EXCLUDED_APP_MODES = {AppMode.RAG_PIPELINE}
+
+    @classmethod
+    def generate_dataset_template(
+        cls,
+        target: Union[App, CustomizedSnippet],
+        target_type: str,
+    ) -> tuple[bytes, str]:
+        """
+        Generate evaluation dataset template as XLSX bytes.
+
+        Creates an XLSX file with headers based on the evaluation target's input parameters.
+        The first column is index, followed by input parameter columns.
+
+        :param target: App or CustomizedSnippet instance
+        :param target_type: Target type string ("app" or "snippet")
+        :return: Tuple of (xlsx_content_bytes, filename)
+        :raises ValueError: If target type is not supported or app mode is excluded
+        """
+        # Validate target type
+        if target_type == "app":
+            if not isinstance(target, App):
+                raise ValueError("Invalid target: expected App instance")
+            if AppMode.value_of(target.mode) in cls.EXCLUDED_APP_MODES:
+                raise ValueError(f"App mode '{target.mode}' does not support evaluation templates")
+            input_fields = cls._get_app_input_fields(target)
+        elif target_type == "snippet":
+            if not isinstance(target, CustomizedSnippet):
+                raise ValueError("Invalid target: expected CustomizedSnippet instance")
+            input_fields = cls._get_snippet_input_fields(target)
+        else:
+            raise ValueError(f"Unsupported target type: {target_type}")
+
+        # Generate XLSX template
+        xlsx_content = cls._generate_xlsx_template(input_fields, target.name)
+
+        # Build filename
+        truncated_name = target.name[:10] + "..." if len(target.name) > 10 else target.name
+        filename = f"{truncated_name}-evaluation-dataset.xlsx"
+
+        return xlsx_content, filename
+
+    @classmethod
+    def _get_app_input_fields(cls, app: App) -> list[dict]:
+        """
+        Get input fields from App's workflow.
+
+        :param app: App instance
+        :return: List of input field definitions
+        """
+        workflow_service = WorkflowService()
+        workflow = workflow_service.get_published_workflow(app_model=app)
+        if not workflow:
+            workflow = workflow_service.get_draft_workflow(app_model=app)
+
+        if not workflow:
+            return []
+
+        # Get user input form from workflow
+        user_input_form = workflow.user_input_form()
+        return user_input_form
+
+    @classmethod
+    def _get_snippet_input_fields(cls, snippet: CustomizedSnippet) -> list[dict]:
+        """
+        Get input fields from Snippet.
+
+        Tries to get from snippet's own input_fields first,
+        then falls back to workflow's user_input_form.
+
+        :param snippet: CustomizedSnippet instance
+        :return: List of input field definitions
+        """
+        # Try snippet's own input_fields first
+        input_fields = snippet.input_fields_list
+        if input_fields:
+            return input_fields
+
+        # Fallback to workflow's user_input_form
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_published_workflow(snippet=snippet)
+        if not workflow:
+            workflow = snippet_service.get_draft_workflow(snippet=snippet)
+
+        if workflow:
+            return workflow.user_input_form()
+
+        return []
+
+    @classmethod
+    def _generate_xlsx_template(cls, input_fields: list[dict], target_name: str) -> bytes:
+        """
+        Generate XLSX template file content.
+
+        Creates a workbook with:
+        - First row as header row with "index" and input field names
+        - Styled header with background color and borders
+        - Empty data rows ready for user input
+
+        :param input_fields: List of input field definitions
+        :param target_name: Name of the target (for sheet name)
+        :return: XLSX file content as bytes
+        """
+        wb = Workbook()
+        ws = wb.active
+        if ws is None:
+            ws = wb.create_sheet("Evaluation Dataset")
+
+        sheet_name = "Evaluation Dataset"
+        ws.title = sheet_name
+
+        header_font = Font(bold=True, color="FFFFFF")
+        header_fill = PatternFill(start_color="4472C4", end_color="4472C4", fill_type="solid")
+        header_alignment = Alignment(horizontal="center", vertical="center")
+        thin_border = Border(
+            left=Side(style="thin"),
+            right=Side(style="thin"),
+            top=Side(style="thin"),
+            bottom=Side(style="thin"),
+        )
+
+        # Build header row
+        headers = ["index"]
+
+        for field in input_fields:
+            field_label = str(field.get("label") or field.get("variable") or "")
+            headers.append(field_label)
+
+        # Write header row
+        for col_idx, header in enumerate(headers, start=1):
+            cell = ws.cell(row=1, column=col_idx, value=header)
+            cell.font = header_font
+            cell.fill = header_fill
+            cell.alignment = header_alignment
+            cell.border = thin_border
+
+        # Set column widths
+        ws.column_dimensions["A"].width = 10  # index column
+        for col_idx in range(2, len(headers) + 1):
+            ws.column_dimensions[get_column_letter(col_idx)].width = 20
+
+        # Add one empty row with row number for user reference
+        for col_idx in range(1, len(headers) + 1):
+            cell = ws.cell(row=2, column=col_idx, value="")
+            cell.border = thin_border
+            if col_idx == 1:
+                cell.value = 1
+                cell.alignment = Alignment(horizontal="center")
+
+        # Save to bytes
+        output = io.BytesIO()
+        wb.save(output)
+        output.seek(0)
+
+        return output.getvalue()
+
+    @classmethod
+    def generate_retrieval_dataset_template(cls) -> tuple[bytes, str]:
+        """Generate evaluation dataset XLSX template for knowledge base retrieval.
+
+        The template contains three columns: ``index``, ``query``, and
+        ``expected_output``.  Callers upload a filled copy and start an
+        evaluation run with ``target_type="dataset"``.
+
+        :returns: (xlsx_content_bytes, filename)
+        """
+        wb = Workbook()
+        ws = wb.active
+        if ws is None:
+            ws = wb.create_sheet("Evaluation Dataset")
+        ws.title = "Evaluation Dataset"
+
+        header_font = Font(bold=True, color="FFFFFF")
+        header_fill = PatternFill(start_color="4472C4", end_color="4472C4", fill_type="solid")
+        header_alignment = Alignment(horizontal="center", vertical="center")
+        thin_border = Border(
+            left=Side(style="thin"),
+            right=Side(style="thin"),
+            top=Side(style="thin"),
+            bottom=Side(style="thin"),
+        )
+
+        headers = ["index", "query", "expected_output"]
+        for col_idx, header in enumerate(headers, start=1):
+            cell = ws.cell(row=1, column=col_idx, value=header)
+            cell.font = header_font
+            cell.fill = header_fill
+            cell.alignment = header_alignment
+            cell.border = thin_border
+
+        ws.column_dimensions["A"].width = 10
+        ws.column_dimensions["B"].width = 30
+        ws.column_dimensions["C"].width = 30
+
+        # Add one sample row
+        for col_idx in range(1, len(headers) + 1):
+            cell = ws.cell(row=2, column=col_idx, value="")
+            cell.border = thin_border
+            if col_idx == 1:
+                cell.value = 1
+                cell.alignment = Alignment(horizontal="center")
+
+        output = io.BytesIO()
+        wb.save(output)
+        output.seek(0)
+        return output.getvalue(), "retrieval-evaluation-dataset.xlsx"
+
+    # ---- Evaluation Configuration CRUD ----
+
+    @classmethod
+    def get_evaluation_config(
+        cls,
+        session: Session,
+        tenant_id: str,
+        target_type: str,
+        target_id: str,
+    ) -> EvaluationConfiguration | None:
+        return (
+            session.query(EvaluationConfiguration)
+            .filter_by(tenant_id=tenant_id, target_type=target_type, target_id=target_id)
+            .first()
+        )
+
+    @classmethod
+    def save_evaluation_config(
+        cls,
+        session: Session,
+        tenant_id: str,
+        target_type: str,
+        target_id: str,
+        account_id: str,
+        data: EvaluationConfigData,
+    ) -> EvaluationConfiguration:
+        config = cls.get_evaluation_config(session, tenant_id, target_type, target_id)
+        if config is None:
+            config = EvaluationConfiguration(
+                tenant_id=tenant_id,
+                target_type=target_type,
+                target_id=target_id,
+                created_by=account_id,
+                updated_by=account_id,
+            )
+            session.add(config)
+
+        config.evaluation_model_provider = data.evaluation_model_provider
+        config.evaluation_model = data.evaluation_model
+        config.metrics_config = json.dumps(
+            {
+                "default_metrics": [m.model_dump() for m in data.default_metrics],
+                "customized_metrics": data.customized_metrics.model_dump() if data.customized_metrics else None,
+            }
+        )
+        config.judgement_conditions = json.dumps(data.judgment_config.model_dump() if data.judgment_config else {})
+        config.customized_workflow_id = (
+            data.customized_metrics.evaluation_workflow_id if data.customized_metrics else None
+        )
+        config.updated_by = account_id
+        session.commit()
+        session.refresh(config)
+        return config
+
+    @classmethod
+    def list_targets_by_customized_workflow(
+        cls,
+        session: Session,
+        tenant_id: str,
+        customized_workflow_id: str,
+    ) -> list[EvaluationConfiguration]:
+        """Return all evaluation configs that reference the given workflow as customized metrics."""
+        from sqlalchemy import select
+
+        return list(
+            session.scalars(
+                select(EvaluationConfiguration).where(
+                    EvaluationConfiguration.tenant_id == tenant_id,
+                    EvaluationConfiguration.customized_workflow_id == customized_workflow_id,
+                )
+            ).all()
+        )
+
+    # ---- Evaluation Run Management ----
+
+    @classmethod
+    def start_evaluation_run(
+        cls,
+        session: Session,
+        tenant_id: str,
+        target_type: str,
+        target_id: str,
+        account_id: str,
+        dataset_file_content: bytes,
+        run_request: EvaluationRunRequest,
+    ) -> EvaluationRun:
+        """Validate dataset, create run record, dispatch Celery task.
+
+        Saves the provided parameters as the latest EvaluationConfiguration
+        before creating the run.
+        """
+        # Check framework is configured
+        evaluation_instance = EvaluationManager.get_evaluation_instance()
+        if evaluation_instance is None:
+            raise EvaluationFrameworkNotConfiguredError()
+
+        # Save as latest EvaluationConfiguration
+        config = cls.save_evaluation_config(
+            session=session,
+            tenant_id=tenant_id,
+            target_type=target_type,
+            target_id=target_id,
+            account_id=account_id,
+            data=run_request,
+        )
+
+        # Check concurrent run limit
+        active_runs = (
+            session.query(EvaluationRun)
+            .filter_by(tenant_id=tenant_id)
+            .filter(EvaluationRun.status.in_([EvaluationRunStatus.PENDING, EvaluationRunStatus.RUNNING]))
+            .count()
+        )
+        max_concurrent = dify_config.EVALUATION_MAX_CONCURRENT_RUNS
+        if active_runs >= max_concurrent:
+            raise EvaluationMaxConcurrentRunsError(f"Maximum concurrent runs ({max_concurrent}) reached.")
+
+        # Parse dataset
+        items = cls._parse_dataset(dataset_file_content)
+        max_rows = dify_config.EVALUATION_MAX_DATASET_ROWS
+        if len(items) > max_rows:
+            raise EvaluationDatasetInvalidError(f"Dataset has {len(items)} rows, max is {max_rows}.")
+
+        # Create evaluation run
+        evaluation_run = EvaluationRun(
+            tenant_id=tenant_id,
+            target_type=target_type,
+            target_id=target_id,
+            evaluation_config_id=config.id,
+            status=EvaluationRunStatus.PENDING,
+            total_items=len(items),
+            created_by=account_id,
+        )
+        session.add(evaluation_run)
+        session.commit()
+        session.refresh(evaluation_run)
+
+        # Build Celery task data
+        run_data = EvaluationRunData(
+            evaluation_run_id=evaluation_run.id,
+            tenant_id=tenant_id,
+            target_type=target_type,
+            target_id=target_id,
+            evaluation_model_provider=run_request.evaluation_model_provider,
+            evaluation_model=run_request.evaluation_model,
+            default_metrics=run_request.default_metrics,
+            customized_metrics=run_request.customized_metrics,
+            judgment_config=run_request.judgment_config,
+            input_list=items,
+        )
+
+        # Dispatch Celery task
+        from tasks.evaluation_task import run_evaluation
+
+        task = run_evaluation.delay(run_data.model_dump())
+        evaluation_run.celery_task_id = task.id
+        session.commit()
+
+        return evaluation_run
+
+    @classmethod
+    def get_evaluation_runs(
+        cls,
+        session: Session,
+        tenant_id: str,
+        target_type: str,
+        target_id: str,
+        page: int = 1,
+        page_size: int = 20,
+    ) -> tuple[list[EvaluationRun], int]:
+        """Query evaluation run history with pagination."""
+        query = (
+            session.query(EvaluationRun)
+            .filter_by(tenant_id=tenant_id, target_type=target_type, target_id=target_id)
+            .order_by(EvaluationRun.created_at.desc())
+        )
+        total = query.count()
+        runs = query.offset((page - 1) * page_size).limit(page_size).all()
+        return runs, total
+
+    @classmethod
+    def get_evaluation_run_detail(
+        cls,
+        session: Session,
+        tenant_id: str,
+        run_id: str,
+    ) -> EvaluationRun:
+        run = session.query(EvaluationRun).filter_by(id=run_id, tenant_id=tenant_id).first()
+        if not run:
+            raise EvaluationNotFoundError("Evaluation run not found.")
+        return run
+
+    @classmethod
+    def get_evaluation_run_items(
+        cls,
+        session: Session,
+        run_id: str,
+        page: int = 1,
+        page_size: int = 50,
+    ) -> tuple[list[EvaluationRunItem], int]:
+        """Query evaluation run items with pagination."""
+        query = (
+            session.query(EvaluationRunItem)
+            .filter_by(evaluation_run_id=run_id)
+            .order_by(EvaluationRunItem.item_index.asc())
+        )
+        total = query.count()
+        items = query.offset((page - 1) * page_size).limit(page_size).all()
+        return items, total
+
+    @classmethod
+    def cancel_evaluation_run(
+        cls,
+        session: Session,
+        tenant_id: str,
+        run_id: str,
+    ) -> EvaluationRun:
+        run = cls.get_evaluation_run_detail(session, tenant_id, run_id)
+        if run.status not in (EvaluationRunStatus.PENDING, EvaluationRunStatus.RUNNING):
+            raise ValueError(f"Cannot cancel evaluation run in status: {run.status}")
+
+        run.status = EvaluationRunStatus.CANCELLED
+
+        # Revoke Celery task if running
+        if run.celery_task_id:
+            try:
+                from celery import current_app as celery_app
+
+                celery_app.control.revoke(run.celery_task_id, terminate=True)
+            except Exception:
+                logger.exception("Failed to revoke Celery task %s", run.celery_task_id)
+
+        session.commit()
+        return run
+
+    @classmethod
+    def get_supported_metrics(cls, category: EvaluationCategory) -> list[str]:
+        return EvaluationManager.get_supported_metrics(category)
+
+    @staticmethod
+    def get_available_metrics() -> list[str]:
+        """Return the centrally-defined list of evaluation metrics."""
+        return [m.value for m in EvaluationMetricName]
+
+    @classmethod
+    def _nodes_for_metrics_from_workflow(
+        cls,
+        workflow: Workflow,
+        metrics: list[str],
+    ) -> dict[str, list[dict[str, str]]]:
+        node_type_to_nodes: dict[str, list[dict[str, str]]] = {}
+        for node_id, node_data in workflow.walk_nodes():
+            ntype = node_data.get("type", "")
+            node_type_to_nodes.setdefault(ntype, []).append(
+                NodeInfo(node_id=node_id, type=ntype, title=node_data.get("title", "")).model_dump()
+            )
+
+        result: dict[str, list[dict[str, str]]] = {}
+        for metric in metrics:
+            required_node_type = METRIC_NODE_TYPE_MAPPING.get(metric)
+            if required_node_type is None:
+                result[metric] = []
+                continue
+            result[metric] = node_type_to_nodes.get(required_node_type, [])
+        return result
+
+    @classmethod
+    def _union_supported_metric_names(cls) -> list[str]:
+        """Metric names the current evaluation framework supports for any :class:`EvaluationCategory`."""
+        ordered: list[str] = []
+        seen: set[str] = set()
+        for category in EvaluationCategory:
+            for name in cls.get_supported_metrics(category):
+                if name not in seen:
+                    seen.add(name)
+                    ordered.append(name)
+        return ordered
+
+    @classmethod
+    def get_default_metrics_with_nodes_for_published_target(
+        cls,
+        target: Union[App, CustomizedSnippet],
+        target_type: str,
+    ) -> list[DefaultMetric]:
+        """List default metrics and matching nodes using only the *published* workflow graph.
+
+        Metrics are those supported by the configured evaluation framework and present in
+        :data:`METRIC_NODE_TYPE_MAPPING`. Node lists are derived from the published workflow only
+        (no draft fallback).
+        """
+        workflow = cls._resolve_published_workflow(target, target_type)
+        if not workflow:
+            return []
+
+        supported = cls._union_supported_metric_names()
+        metric_names = sorted(m for m in supported if m in METRIC_NODE_TYPE_MAPPING)
+        if not metric_names:
+            return []
+
+        nodes_by_metric = cls._nodes_for_metrics_from_workflow(workflow, metric_names)
+        return [
+            DefaultMetric(
+                metric=m,
+                value_type=METRIC_VALUE_TYPE_MAPPING.get(m, "number"),
+                node_info_list=[NodeInfo.model_validate(n) for n in nodes_by_metric.get(m, [])],
+            )
+            for m in metric_names
+        ]
+
+    @classmethod
+    def get_nodes_for_metrics(
+        cls,
+        target: Union[App, CustomizedSnippet],
+        target_type: str,
+        metrics: list[str] | None = None,
+    ) -> dict[str, list[dict[str, str]]]:
+        """Return node info grouped by metric (or all nodes when *metrics* is empty).
+
+        :param target: App or CustomizedSnippet instance.
+        :param target_type: ``"app"`` or ``"snippets"``.
+        :param metrics: Optional list of metric names to filter by.
+            When *None* or empty, returns ``{"all": [<every node>]}``.
+        :returns: ``{metric_name: [NodeInfo dict, ...]}`` or
+            ``{"all": [NodeInfo dict, ...]}``.
+        """
+        workflow = cls._resolve_workflow(target, target_type)
+        if not workflow:
+            return {"all": []} if not metrics else {m: [] for m in metrics}
+
+        if not metrics:
+            all_nodes = [
+                NodeInfo(node_id=node_id, type=node_data.get("type", ""), title=node_data.get("title", "")).model_dump()
+                for node_id, node_data in workflow.walk_nodes()
+            ]
+            return {"all": all_nodes}
+
+        return cls._nodes_for_metrics_from_workflow(workflow, metrics)
+
+    @classmethod
+    def _resolve_published_workflow(
+        cls,
+        target: Union[App, CustomizedSnippet],
+        target_type: str,
+    ) -> Workflow | None:
+        """Resolve only the published workflow for the target (no draft fallback)."""
+        if target_type == "snippets" and isinstance(target, CustomizedSnippet):
+            return SnippetService().get_published_workflow(snippet=target)
+        if target_type == "app" and isinstance(target, App):
+            return WorkflowService().get_published_workflow(app_model=target)
+        return None
+
+    @classmethod
+    def _resolve_workflow(
+        cls,
+        target: Union[App, CustomizedSnippet],
+        target_type: str,
+    ) -> Workflow | None:
+        """Resolve the *published* (preferred) or *draft* workflow for the target."""
+        if target_type == "snippets" and isinstance(target, CustomizedSnippet):
+            snippet_service = SnippetService()
+            workflow = snippet_service.get_published_workflow(snippet=target)
+            if not workflow:
+                workflow = snippet_service.get_draft_workflow(snippet=target)
+            return workflow
+        elif target_type == "app" and isinstance(target, App):
+            workflow_service = WorkflowService()
+            workflow = workflow_service.get_published_workflow(app_model=target)
+            if not workflow:
+                workflow = workflow_service.get_draft_workflow(app_model=target)
+            return workflow
+        return None
+
+    # ---- Category Resolution ----
+
+    @classmethod
+    def _resolve_evaluation_category(cls, default_metrics: list[DefaultMetric]) -> EvaluationCategory:
+        """Derive evaluation category from default_metrics node_info types.
+
+        Uses the type of the first node_info found in default_metrics.
+        Falls back to LLM if no metrics are provided.
+        """
+        for metric in default_metrics:
+            for node_info in metric.node_info_list:
+                try:
+                    return EvaluationCategory(node_info.type)
+                except ValueError:
+                    continue
+        return EvaluationCategory.LLM
+
+    @classmethod
+    def execute_targets(
+        cls,
+        tenant_id: str,
+        target_type: str,
+        target_id: str,
+        input_list: list[EvaluationDatasetInput],
+        max_workers: int = 5,
+    ) -> tuple[list[dict[str, NodeRunResult]], list[str | None]]:
+        """Execute the evaluation target for every test-data item in parallel.
+
+        :param tenant_id: Workspace / tenant ID.
+        :param target_type: ``"app"`` or ``"snippet"``.
+        :param target_id: ID of the App or CustomizedSnippet.
+        :param input_list: All test-data items parsed from the dataset.
+        :param max_workers: Maximum number of parallel worker threads.
+        :return: Tuple of (node_results, workflow_run_ids).
+            node_results: ordered list of ``{node_id: NodeRunResult}`` mappings;
+            the *i*-th element corresponds to ``input_list[i]``.
+            workflow_run_ids: ordered list of workflow_run_id strings (or None)
+            for each input item.
+        """
+        from concurrent.futures import ThreadPoolExecutor
+
+        from flask import Flask, current_app
+
+        flask_app: Flask = current_app._get_current_object()  # type: ignore
+
+        def _worker(item: EvaluationDatasetInput) -> tuple[dict[str, NodeRunResult], str | None]:
+            with flask_app.app_context():
+                from models.engine import db
+
+                with Session(db.engine, expire_on_commit=False) as thread_session:
+                    try:
+                        response = cls._run_single_target(
+                            session=thread_session,
+                            target_type=target_type,
+                            target_id=target_id,
+                            item=item,
+                        )
+
+                        workflow_run_id = cls._extract_workflow_run_id(response)
+                        if not workflow_run_id:
+                            logger.warning(
+                                "No workflow_run_id for item %d (target=%s)",
+                                item.index,
+                                target_id,
+                            )
+                            return {}, None
+
+                        node_results = cls._query_node_run_results(
+                            session=thread_session,
+                            tenant_id=tenant_id,
+                            app_id=target_id,
+                            workflow_run_id=workflow_run_id,
+                        )
+                        return node_results, workflow_run_id
+                    except Exception:
+                        logger.exception(
+                            "Target execution failed for item %d (target=%s)",
+                            item.index,
+                            target_id,
+                        )
+                        return {}, None
+
+        with ThreadPoolExecutor(max_workers=max_workers) as executor:
+            futures = [executor.submit(_worker, item) for item in input_list]
+            ordered_results: list[dict[str, NodeRunResult]] = []
+            ordered_workflow_run_ids: list[str | None] = []
+            for future in futures:
+                try:
+                    node_result, wf_run_id = future.result()
+                    ordered_results.append(node_result)
+                    ordered_workflow_run_ids.append(wf_run_id)
+                except Exception:
+                    logger.exception("Unexpected error collecting target execution result")
+                    ordered_results.append({})
+                    ordered_workflow_run_ids.append(None)
+
+        return ordered_results, ordered_workflow_run_ids
+
+    @classmethod
+    def _run_single_target(
+        cls,
+        session: Session,
+        target_type: str,
+        target_id: str,
+        item: EvaluationDatasetInput,
+    ) -> Mapping[str, object]:
+        """Execute a single evaluation target with one test-data item.
+
+        Dispatches to the appropriate execution service based on
+        ``target_type``:
+
+        * ``"snippet"`` → :meth:`SnippetGenerateService.run_published`
+        * ``"app"`` → :meth:`WorkflowAppGenerator().generate` (blocking mode)
+
+        :returns: The blocking response mapping from the workflow engine.
+        :raises ValueError: If the target is not found or not published.
+        """
+        from core.app.apps.workflow.app_generator import WorkflowAppGenerator
+        from core.app.entities.app_invoke_entities import InvokeFrom
+        from core.evaluation.runners import get_service_account_for_app, get_service_account_for_snippet
+
+        if target_type == "snippet":
+            from services.snippet_generate_service import SnippetGenerateService
+
+            snippet = session.query(CustomizedSnippet).filter_by(id=target_id).first()
+            if not snippet:
+                raise ValueError(f"Snippet {target_id} not found")
+
+            service_account = get_service_account_for_snippet(session, target_id)
+
+            return SnippetGenerateService.run_published(
+                snippet=snippet,
+                user=service_account,
+                args={"inputs": item.inputs},
+                invoke_from=InvokeFrom.SERVICE_API,
+            )
+        else:
+            # target_type == "app"
+            app = session.query(App).filter_by(id=target_id).first()
+            if not app:
+                raise ValueError(f"App {target_id} not found")
+
+            service_account = get_service_account_for_app(session, target_id)
+
+            workflow_service = WorkflowService()
+            workflow = workflow_service.get_published_workflow(app_model=app)
+            if not workflow:
+                raise ValueError(f"No published workflow for app {target_id}")
+
+            response: Mapping[str, object] = WorkflowAppGenerator().generate(
+                app_model=app,
+                workflow=workflow,
+                user=service_account,
+                args={"inputs": item.inputs},
+                invoke_from=InvokeFrom.SERVICE_API,
+                streaming=False,
+                call_depth=0,
+            )
+            return response
+
+    @staticmethod
+    def _extract_workflow_run_id(response: Mapping[str, object]) -> str | None:
+        """Extract ``workflow_run_id`` from a blocking workflow response."""
+        wf_run_id = response.get("workflow_run_id")
+        if wf_run_id:
+            return str(wf_run_id)
+        data = response.get("data")
+        if isinstance(data, Mapping) and data.get("id"):
+            return str(data["id"])
+        return None
+
+    @staticmethod
+    def _query_node_run_results(
+        session: Session,
+        tenant_id: str,
+        app_id: str,
+        workflow_run_id: str,
+    ) -> dict[str, NodeRunResult]:
+        """Query all node execution records for a workflow run."""
+        from sqlalchemy import asc, select
+
+        from graphon.enums import WorkflowNodeExecutionStatus
+        from models.workflow import WorkflowNodeExecutionModel
+
+        stmt = (
+            WorkflowNodeExecutionModel.preload_offload_data(select(WorkflowNodeExecutionModel))
+            .where(
+                WorkflowNodeExecutionModel.tenant_id == tenant_id,
+                WorkflowNodeExecutionModel.app_id == app_id,
+                WorkflowNodeExecutionModel.workflow_run_id == workflow_run_id,
+            )
+            .order_by(asc(WorkflowNodeExecutionModel.created_at))
+        )
+
+        node_models: list[WorkflowNodeExecutionModel] = list(session.execute(stmt).scalars().all())
+
+        result: dict[str, NodeRunResult] = {}
+        for node in node_models:
+            # Convert string-keyed metadata to WorkflowNodeExecutionMetadataKey-keyed
+            raw_metadata = node.execution_metadata_dict
+            typed_metadata: dict[WorkflowNodeExecutionMetadataKey, object] = {}
+            for key, val in raw_metadata.items():
+                try:
+                    typed_metadata[WorkflowNodeExecutionMetadataKey(key)] = val
+                except ValueError:
+                    pass  # skip unknown metadata keys
+
+            result[node.node_id] = NodeRunResult(
+                status=WorkflowNodeExecutionStatus(node.status),
+                inputs=node.inputs_dict or {},
+                process_data=node.process_data_dict or {},
+                outputs=node.outputs_dict or {},
+                metadata=typed_metadata,
+                error=node.error or "",
+            )
+        return result
+
+    # ---- Dataset Parsing ----
+
+    @classmethod
+    def _parse_dataset(cls, xlsx_content: bytes) -> list[EvaluationDatasetInput]:
+        """Parse evaluation dataset from XLSX bytes."""
+        wb = load_workbook(io.BytesIO(xlsx_content), read_only=True)
+        ws = wb.active
+        if ws is None:
+            raise EvaluationDatasetInvalidError("XLSX file has no active worksheet.")
+
+        rows = list(ws.iter_rows(values_only=True))
+        if len(rows) < 2:
+            raise EvaluationDatasetInvalidError("Dataset must have at least a header row and one data row.")
+
+        headers = [str(h).strip() if h is not None else "" for h in rows[0]]
+        if not headers or headers[0].lower() != "index":
+            raise EvaluationDatasetInvalidError("First column header must be 'index'.")
+
+        input_headers = headers[1:]  # Skip 'index'
+        items = []
+        for row_idx, row in enumerate(rows[1:], start=1):
+            values = list(row)
+            if all(v is None or str(v).strip() == "" for v in values):
+                continue  # Skip empty rows
+
+            index_val = values[0] if values else row_idx
+            try:
+                index = int(str(index_val))
+            except (TypeError, ValueError):
+                index = row_idx
+
+            inputs: dict[str, Any] = {}
+            for col_idx, header in enumerate(input_headers):
+                val = values[col_idx + 1] if col_idx + 1 < len(values) else None
+                inputs[header] = str(val) if val is not None else ""
+
+            # Extract expected_output column into dedicated field
+            expected_output = inputs.pop("expected_output", None)
+
+            items.append(
+                EvaluationDatasetInput(
+                    index=index,
+                    inputs=inputs,
+                    expected_output=expected_output,
+                )
+            )
+
+        wb.close()
+        return items
+
+    @classmethod
+    def execute_retrieval_test_targets(
+        cls,
+        dataset_id: str,
+        account_id: str,
+        input_list: list[EvaluationDatasetInput],
+        max_workers: int = 5,
+    ) -> list[NodeRunResult]:
+        """Run hit testing against a knowledge base for every input item in parallel.
+
+        Each item must supply a ``query`` key in its ``inputs`` dict.  The
+        retrieved segments are normalised into the same ``NodeRunResult`` format
+        that :class:`RetrievalEvaluationRunner` expects:
+
+        .. code-block:: python
+
+            NodeRunResult(
+                inputs={"query": "..."},
+                outputs={"result": [{"content": "...", "score": ...}, ...]},
+            )
+
+        :returns: Ordered list of ``NodeRunResult`` — one per input item.
+            If retrieval fails for an item the result has an empty ``result``
+            list so the runner can still persist a (metric-less) row.
+        """
+        from concurrent.futures import ThreadPoolExecutor
+
+        from flask import current_app
+
+        flask_app = current_app._get_current_object()  # type: ignore
+
+        def _worker(item: EvaluationDatasetInput) -> NodeRunResult:
+            with flask_app.app_context():
+                from extensions.ext_database import db as flask_db
+                from models.account import Account
+                from models.dataset import Dataset
+                from services.hit_testing_service import HitTestingService
+
+                dataset = flask_db.session.query(Dataset).filter_by(id=dataset_id).first()
+                if not dataset:
+                    raise ValueError(f"Dataset {dataset_id} not found")
+
+                account = flask_db.session.query(Account).filter_by(id=account_id).first()
+                if not account:
+                    raise ValueError(f"Account {account_id} not found")
+
+                query = str(item.inputs.get("query", ""))
+                response = HitTestingService.retrieve(
+                    dataset=dataset,
+                    query=query,
+                    account=account,
+                    retrieval_model=None,  # Use dataset's configured retrieval model
+                    external_retrieval_model={},
+                    limit=10,
+                )
+
+                records = response.get("records", [])
+                result_list = [
+                    {
+                        "content": r.get("segment", {}).get("content", "") or r.get("content", ""),
+                        "score": r.get("score"),
+                    }
+                    for r in records
+                    if r.get("segment", {}).get("content") or r.get("content")
+                ]
+
+                return NodeRunResult(
+                    inputs={"query": query},
+                    outputs={"result": result_list},
+                )
+
+        with ThreadPoolExecutor(max_workers=max_workers) as executor:
+            futures = [executor.submit(_worker, item) for item in input_list]
+            results: list[NodeRunResult] = []
+            for item, future in zip(input_list, futures):
+                try:
+                    results.append(future.result())
+                except Exception:
+                    logger.exception("Retrieval test failed for item %d (dataset=%s)", item.index, dataset_id)
+                    results.append(NodeRunResult(inputs={}, outputs={"result": []}))
+
+        return results
diff --git a/api/services/feature_service.py b/api/services/feature_service.py
index df653e0ba7..9216a7fb99 100644
--- a/api/services/feature_service.py
+++ b/api/services/feature_service.py
@@ -281,7 +281,7 @@ class FeatureService:
     def _fulfill_params_from_billing_api(cls, features: FeatureModel, tenant_id: str):
         billing_info = BillingService.get_info(tenant_id)
 
-        features_usage_info = BillingService.get_tenant_feature_plan_usage_info(tenant_id)
+        features_usage_info = BillingService.get_quota_info(tenant_id)
 
         features.billing.enabled = billing_info["enabled"]
         features.billing.subscription.plan = billing_info["subscription"]["plan"]
diff --git a/api/services/quota_service.py b/api/services/quota_service.py
new file mode 100644
index 0000000000..4c784315c7
--- /dev/null
+++ b/api/services/quota_service.py
@@ -0,0 +1,233 @@
+from __future__ import annotations
+
+import logging
+import uuid
+from dataclasses import dataclass, field
+from typing import TYPE_CHECKING
+
+from configs import dify_config
+
+if TYPE_CHECKING:
+    from enums.quota_type import QuotaType
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class QuotaCharge:
+    """
+    Result of a quota reservation (Reserve phase).
+
+    Lifecycle:
+        charge = QuotaService.consume(QuotaType.TRIGGER, tenant_id)
+        try:
+            do_work()
+            charge.commit()   # Confirm consumption
+        except:
+            charge.refund()   # Release frozen quota
+
+    If neither commit() nor refund() is called, the billing system's
+    cleanup CronJob will auto-release the reservation within ~75 seconds.
+    """
+
+    success: bool
+    charge_id: str | None  # reservation_id
+    _quota_type: QuotaType
+    _tenant_id: str | None = None
+    _feature_key: str | None = None
+    _amount: int = 0
+    _committed: bool = field(default=False, repr=False)
+
+    def commit(self, actual_amount: int | None = None) -> None:
+        """
+        Confirm the consumption with actual amount.
+
+        Args:
+            actual_amount: Actual amount consumed. Defaults to the reserved amount.
+                           If less than reserved, the difference is refunded automatically.
+        """
+        if self._committed or not self.charge_id or not self._tenant_id or not self._feature_key:
+            return
+
+        try:
+            from services.billing_service import BillingService
+
+            amount = actual_amount if actual_amount is not None else self._amount
+            BillingService.quota_commit(
+                tenant_id=self._tenant_id,
+                feature_key=self._feature_key,
+                reservation_id=self.charge_id,
+                actual_amount=amount,
+            )
+            self._committed = True
+            logger.debug(
+                "Committed %s quota for tenant %s, reservation_id: %s, amount: %d",
+                self._quota_type,
+                self._tenant_id,
+                self.charge_id,
+                amount,
+            )
+        except Exception:
+            logger.exception("Failed to commit quota, reservation_id: %s", self.charge_id)
+
+    def refund(self) -> None:
+        """
+        Release the reserved quota (cancel the charge).
+
+        Safe to call even if:
+        - charge failed or was disabled (charge_id is None)
+        - already committed (Release after Commit is a no-op)
+        - already refunded (idempotent)
+
+        This method guarantees no exceptions will be raised.
+        """
+        if not self.charge_id or not self._tenant_id or not self._feature_key:
+            return
+
+        QuotaService.release(self._quota_type, self.charge_id, self._tenant_id, self._feature_key)
+
+
+def unlimited() -> QuotaCharge:
+    from enums.quota_type import QuotaType
+
+    return QuotaCharge(success=True, charge_id=None, _quota_type=QuotaType.UNLIMITED)
+
+
+class QuotaService:
+    """Orchestrates quota reserve / commit / release lifecycle via BillingService."""
+
+    @staticmethod
+    def consume(quota_type: QuotaType, tenant_id: str, amount: int = 1) -> QuotaCharge:
+        """
+        Reserve + immediate Commit (one-shot mode).
+
+        The returned QuotaCharge supports .refund() which calls Release.
+        For two-phase usage (e.g. streaming), use reserve() directly.
+        """
+        charge = QuotaService.reserve(quota_type, tenant_id, amount)
+        if charge.success and charge.charge_id:
+            charge.commit()
+        return charge
+
+    @staticmethod
+    def reserve(quota_type: QuotaType, tenant_id: str, amount: int = 1) -> QuotaCharge:
+        """
+        Reserve quota before task execution (Reserve phase only).
+
+        The caller MUST call charge.commit() after the task succeeds,
+        or charge.refund() if the task fails.
+
+        Raises:
+            QuotaExceededError: When quota is insufficient
+        """
+        from services.billing_service import BillingService
+        from services.errors.app import QuotaExceededError
+
+        if not dify_config.BILLING_ENABLED:
+            logger.debug("Billing disabled, allowing request for %s", tenant_id)
+            return QuotaCharge(success=True, charge_id=None, _quota_type=quota_type)
+
+        logger.info("Reserving %d %s quota for tenant %s", amount, quota_type.value, tenant_id)
+
+        if amount <= 0:
+            raise ValueError("Amount to reserve must be greater than 0")
+
+        request_id = str(uuid.uuid4())
+        feature_key = quota_type.billing_key
+
+        try:
+            reserve_resp = BillingService.quota_reserve(
+                tenant_id=tenant_id,
+                feature_key=feature_key,
+                request_id=request_id,
+                amount=amount,
+            )
+
+            reservation_id = reserve_resp.get("reservation_id")
+            if not reservation_id:
+                logger.warning(
+                    "Reserve returned no reservation_id for %s, feature %s, response: %s",
+                    tenant_id,
+                    quota_type.value,
+                    reserve_resp,
+                )
+                raise QuotaExceededError(feature=quota_type.value, tenant_id=tenant_id, required=amount)
+
+            logger.debug(
+                "Reserved %d %s quota for tenant %s, reservation_id: %s",
+                amount,
+                quota_type.value,
+                tenant_id,
+                reservation_id,
+            )
+            return QuotaCharge(
+                success=True,
+                charge_id=reservation_id,
+                _quota_type=quota_type,
+                _tenant_id=tenant_id,
+                _feature_key=feature_key,
+                _amount=amount,
+            )
+
+        except QuotaExceededError:
+            raise
+        except ValueError:
+            raise
+        except Exception:
+            logger.exception("Failed to reserve quota for %s, feature %s", tenant_id, quota_type.value)
+            return unlimited()
+
+    @staticmethod
+    def check(quota_type: QuotaType, tenant_id: str, amount: int = 1) -> bool:
+        if not dify_config.BILLING_ENABLED:
+            return True
+
+        if amount <= 0:
+            raise ValueError("Amount to check must be greater than 0")
+
+        try:
+            remaining = QuotaService.get_remaining(quota_type, tenant_id)
+            return remaining >= amount if remaining != -1 else True
+        except Exception:
+            logger.exception("Failed to check quota for %s, feature %s", tenant_id, quota_type.value)
+            return True
+
+    @staticmethod
+    def release(quota_type: QuotaType, reservation_id: str, tenant_id: str, feature_key: str) -> None:
+        """Release a reservation. Guarantees no exceptions."""
+        try:
+            from services.billing_service import BillingService
+
+            if not dify_config.BILLING_ENABLED:
+                return
+
+            if not reservation_id:
+                return
+
+            logger.info("Releasing %s quota, reservation_id: %s", quota_type.value, reservation_id)
+            BillingService.quota_release(
+                tenant_id=tenant_id,
+                feature_key=feature_key,
+                reservation_id=reservation_id,
+            )
+        except Exception:
+            logger.exception("Failed to release quota, reservation_id: %s", reservation_id)
+
+    @staticmethod
+    def get_remaining(quota_type: QuotaType, tenant_id: str) -> int:
+        from services.billing_service import BillingService
+
+        try:
+            usage_info = BillingService.get_quota_info(tenant_id)
+            if isinstance(usage_info, dict):
+                feature_info = usage_info.get(quota_type.billing_key, {})
+                if isinstance(feature_info, dict):
+                    limit = feature_info.get("limit", 0)
+                    usage = feature_info.get("usage", 0)
+                    if limit == -1:
+                        return -1
+                    return max(0, limit - usage)
+            return 0
+        except Exception:
+            logger.exception("Failed to get remaining quota for %s, feature %s", tenant_id, quota_type.value)
+            return -1
diff --git a/api/services/snippet_dsl_service.py b/api/services/snippet_dsl_service.py
new file mode 100644
index 0000000000..f074a40f09
--- /dev/null
+++ b/api/services/snippet_dsl_service.py
@@ -0,0 +1,555 @@
+import json
+import logging
+import uuid
+from collections.abc import Mapping
+from datetime import UTC, datetime
+from enum import StrEnum
+from urllib.parse import urlparse
+
+import yaml  # type: ignore
+from packaging import version
+from pydantic import BaseModel, Field
+from sqlalchemy import select
+from sqlalchemy.orm import Session
+
+from core.helper import ssrf_proxy
+from core.plugin.entities.plugin import PluginDependency
+from extensions.ext_redis import redis_client
+from graphon.enums import BuiltinNodeTypes
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+from models import Account
+from models.snippet import CustomizedSnippet, SnippetType
+from models.workflow import Workflow
+from services.plugin.dependencies_analysis import DependenciesAnalysisService
+from services.snippet_service import SNIPPET_FORBIDDEN_NODE_TYPES, SnippetService
+
+logger = logging.getLogger(__name__)
+
+IMPORT_INFO_REDIS_KEY_PREFIX = "snippet_import_info:"
+CHECK_DEPENDENCIES_REDIS_KEY_PREFIX = "snippet_check_dependencies:"
+IMPORT_INFO_REDIS_EXPIRY = 10 * 60  # 10 minutes
+DSL_MAX_SIZE = 10 * 1024 * 1024  # 10MB
+CURRENT_DSL_VERSION = "0.1.0"
+
+
+class ImportMode(StrEnum):
+    YAML_CONTENT = "yaml-content"
+    YAML_URL = "yaml-url"
+
+
+class ImportStatus(StrEnum):
+    COMPLETED = "completed"
+    COMPLETED_WITH_WARNINGS = "completed-with-warnings"
+    PENDING = "pending"
+    FAILED = "failed"
+
+
+class SnippetImportInfo(BaseModel):
+    id: str
+    status: ImportStatus
+    snippet_id: str | None = None
+    current_dsl_version: str = CURRENT_DSL_VERSION
+    imported_dsl_version: str = ""
+    error: str = ""
+
+
+class CheckDependenciesResult(BaseModel):
+    leaked_dependencies: list[PluginDependency] = Field(default_factory=list)
+
+
+def _check_version_compatibility(imported_version: str) -> ImportStatus:
+    """Determine import status based on version comparison"""
+    try:
+        current_ver = version.parse(CURRENT_DSL_VERSION)
+        imported_ver = version.parse(imported_version)
+    except version.InvalidVersion:
+        return ImportStatus.FAILED
+
+    # If imported version is newer than current, always return PENDING
+    if imported_ver > current_ver:
+        return ImportStatus.PENDING
+
+    # If imported version is older than current's major, return PENDING
+    if imported_ver.major < current_ver.major:
+        return ImportStatus.PENDING
+
+    # If imported version is older than current's minor, return COMPLETED_WITH_WARNINGS
+    if imported_ver.minor < current_ver.minor:
+        return ImportStatus.COMPLETED_WITH_WARNINGS
+
+    # If imported version equals or is older than current's micro, return COMPLETED
+    return ImportStatus.COMPLETED
+
+
+class SnippetPendingData(BaseModel):
+    import_mode: str
+    yaml_content: str
+    snippet_id: str | None
+
+
+class CheckDependenciesPendingData(BaseModel):
+    dependencies: list[PluginDependency]
+    snippet_id: str | None
+
+
+class SnippetDslService:
+    def __init__(self, session: Session):
+        self._session = session
+
+    def import_snippet(
+        self,
+        *,
+        account: Account,
+        import_mode: str,
+        yaml_content: str | None = None,
+        yaml_url: str | None = None,
+        snippet_id: str | None = None,
+        name: str | None = None,
+        description: str | None = None,
+    ) -> SnippetImportInfo:
+        """Import a snippet from YAML content or URL."""
+        import_id = str(uuid.uuid4())
+
+        # Validate import mode
+        try:
+            mode = ImportMode(import_mode)
+        except ValueError:
+            raise ValueError(f"Invalid import_mode: {import_mode}")
+
+        # Get YAML content
+        content: str = ""
+        if mode == ImportMode.YAML_URL:
+            if not yaml_url:
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error="yaml_url is required when import_mode is yaml-url",
+                )
+            try:
+                parsed_url = urlparse(yaml_url)
+                if parsed_url.scheme not in ["http", "https"]:
+                    return SnippetImportInfo(
+                        id=import_id,
+                        status=ImportStatus.FAILED,
+                        error="Invalid URL scheme, only http and https are allowed",
+                    )
+                response = ssrf_proxy.get(yaml_url, timeout=(10, 30))
+                if response.status_code != 200:
+                    return SnippetImportInfo(
+                        id=import_id,
+                        status=ImportStatus.FAILED,
+                        error=f"Failed to fetch YAML from URL: {response.status_code}",
+                    )
+                content = response.text
+                if len(content) > DSL_MAX_SIZE:
+                    return SnippetImportInfo(
+                        id=import_id,
+                        status=ImportStatus.FAILED,
+                        error=f"YAML content size exceeds maximum limit of {DSL_MAX_SIZE} bytes",
+                    )
+            except Exception as e:
+                logger.exception("Failed to fetch YAML from URL")
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error=f"Failed to fetch YAML from URL: {str(e)}",
+                )
+        elif mode == ImportMode.YAML_CONTENT:
+            if not yaml_content:
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error="yaml_content is required when import_mode is yaml-content",
+                )
+            content = yaml_content
+            if len(content) > DSL_MAX_SIZE:
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error=f"YAML content size exceeds maximum limit of {DSL_MAX_SIZE} bytes",
+                )
+
+        try:
+            # Parse YAML
+            data = yaml.safe_load(content)
+            if not isinstance(data, dict):
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error="Invalid YAML format: expected a dictionary",
+                )
+
+            # Validate and fix DSL version
+            if not data.get("version"):
+                data["version"] = "0.1.0"
+
+            # Strictly validate kind field
+            kind = data.get("kind")
+            if not kind:
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error="Missing 'kind' field in DSL. Expected 'kind: snippet'.",
+                )
+            if kind != "snippet":
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error=f"Invalid DSL kind: expected 'snippet', got '{kind}'. This DSL is for {kind}, not snippet.",
+                )
+
+            imported_version = data.get("version", "0.1.0")
+            if not isinstance(imported_version, str):
+                raise ValueError(f"Invalid version type, expected str, got {type(imported_version)}")
+            status = _check_version_compatibility(imported_version)
+
+            # Extract snippet data
+            snippet_data = data.get("snippet")
+            if not snippet_data:
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error="Missing snippet data in YAML content",
+                )
+
+            # Validate workflow nodes - check for forbidden node types
+            workflow_data = data.get("workflow", {})
+            if workflow_data:
+                graph = workflow_data.get("graph", {})
+                nodes = graph.get("nodes", [])
+                forbidden_nodes_found = []
+                for node in nodes:
+                    node_data = node.get("data", {})
+                    if not node_data:
+                        continue
+                    node_type = node_data.get("type", "")
+                    if node_type in SNIPPET_FORBIDDEN_NODE_TYPES:
+                        forbidden_nodes_found.append(node_type)
+                
+                if forbidden_nodes_found:
+                    forbidden_types_str = ", ".join(set(forbidden_nodes_found))
+                    return SnippetImportInfo(
+                        id=import_id,
+                        status=ImportStatus.FAILED,
+                        error=f"Snippet cannot contain the following node types: {forbidden_types_str}",
+                    )
+
+            # If snippet_id is provided, check if it exists
+            snippet = None
+            if snippet_id:
+                stmt = select(CustomizedSnippet).where(
+                    CustomizedSnippet.id == snippet_id,
+                    CustomizedSnippet.tenant_id == account.current_tenant_id,
+                )
+                snippet = self._session.scalar(stmt)
+
+                if not snippet:
+                    return SnippetImportInfo(
+                        id=import_id,
+                        status=ImportStatus.FAILED,
+                        error="Snippet not found",
+                    )
+
+            # If major version mismatch, store import info in Redis
+            if status == ImportStatus.PENDING:
+                pending_data = SnippetPendingData(
+                    import_mode=import_mode,
+                    yaml_content=content,
+                    snippet_id=snippet_id,
+                )
+                redis_client.setex(
+                    f"{IMPORT_INFO_REDIS_KEY_PREFIX}{import_id}",
+                    IMPORT_INFO_REDIS_EXPIRY,
+                    pending_data.model_dump_json(),
+                )
+
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=status,
+                    snippet_id=snippet_id,
+                    imported_dsl_version=imported_version,
+                )
+
+            # Extract dependencies
+            dependencies = data.get("dependencies", [])
+            check_dependencies_pending_data = None
+            if dependencies:
+                check_dependencies_pending_data = [PluginDependency.model_validate(d) for d in dependencies]
+
+            # Create or update snippet
+            snippet = self._create_or_update_snippet(
+                snippet=snippet,
+                data=data,
+                account=account,
+                name=name,
+                description=description,
+                dependencies=check_dependencies_pending_data,
+            )
+
+            return SnippetImportInfo(
+                id=import_id,
+                status=status,
+                snippet_id=snippet.id,
+                imported_dsl_version=imported_version,
+            )
+
+        except yaml.YAMLError as e:
+            return SnippetImportInfo(
+                id=import_id,
+                status=ImportStatus.FAILED,
+                error=f"Invalid YAML format: {str(e)}",
+            )
+
+        except Exception as e:
+            logger.exception("Failed to import snippet")
+            return SnippetImportInfo(
+                id=import_id,
+                status=ImportStatus.FAILED,
+                error=str(e),
+            )
+
+    def confirm_import(self, *, import_id: str, account: Account) -> SnippetImportInfo:
+        """
+        Confirm an import that requires confirmation
+        """
+        redis_key = f"{IMPORT_INFO_REDIS_KEY_PREFIX}{import_id}"
+        pending_data = redis_client.get(redis_key)
+
+        if not pending_data:
+            return SnippetImportInfo(
+                id=import_id,
+                status=ImportStatus.FAILED,
+                error="Import information expired or does not exist",
+            )
+
+        try:
+            if not isinstance(pending_data, str | bytes):
+                return SnippetImportInfo(
+                    id=import_id,
+                    status=ImportStatus.FAILED,
+                    error="Invalid import information",
+                )
+
+            pending_data_str = pending_data.decode("utf-8") if isinstance(pending_data, bytes) else pending_data
+            pending = SnippetPendingData.model_validate_json(pending_data_str)
+
+            # Re-import with the pending data
+            return self.import_snippet(
+                account=account,
+                import_mode=pending.import_mode,
+                yaml_content=pending.yaml_content,
+                snippet_id=pending.snippet_id,
+            )
+
+        except Exception as e:
+            logger.exception("Failed to confirm import")
+            return SnippetImportInfo(
+                id=import_id,
+                status=ImportStatus.FAILED,
+                error=str(e),
+            )
+
+    def check_dependencies(self, snippet: CustomizedSnippet) -> CheckDependenciesResult:
+        """
+        Check dependencies for a snippet
+        """
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not workflow:
+            return CheckDependenciesResult(leaked_dependencies=[])
+
+        dependencies = self._extract_dependencies_from_workflow(workflow)
+        leaked_dependencies = DependenciesAnalysisService.generate_dependencies(
+            tenant_id=snippet.tenant_id, dependencies=dependencies
+        )
+
+        return CheckDependenciesResult(leaked_dependencies=leaked_dependencies)
+
+    def _create_or_update_snippet(
+        self,
+        *,
+        snippet: CustomizedSnippet | None,
+        data: dict,
+        account: Account,
+        name: str | None = None,
+        description: str | None = None,
+        dependencies: list[PluginDependency] | None = None,
+    ) -> CustomizedSnippet:
+        """
+        Create or update snippet from DSL data
+        """
+        snippet_data = data.get("snippet", {})
+        workflow_data = data.get("workflow", {})
+
+        # Extract snippet info
+        snippet_name = name or snippet_data.get("name") or "Untitled Snippet"
+        snippet_description = description or snippet_data.get("description") or ""
+        snippet_type_str = snippet_data.get("type", "node")
+        try:
+            snippet_type = SnippetType(snippet_type_str)
+        except ValueError:
+            snippet_type = SnippetType.NODE
+
+        icon_info = snippet_data.get("icon_info", {})
+        input_fields = snippet_data.get("input_fields", [])
+
+        # Create or update snippet
+        if snippet:
+            # Update existing snippet
+            snippet.name = snippet_name
+            snippet.description = snippet_description
+            snippet.type = snippet_type.value
+            snippet.icon_info = icon_info or None
+            snippet.input_fields = json.dumps(input_fields) if input_fields else None
+            snippet.updated_by = account.id
+            snippet.updated_at = datetime.now(UTC).replace(tzinfo=None)
+        else:
+            # Create new snippet
+            snippet = CustomizedSnippet(
+                tenant_id=account.current_tenant_id,
+                name=snippet_name,
+                description=snippet_description,
+                type=snippet_type.value,
+                icon_info=icon_info or None,
+                input_fields=json.dumps(input_fields) if input_fields else None,
+                created_by=account.id,
+            )
+            self._session.add(snippet)
+            self._session.flush()
+
+        # Create or update draft workflow
+        if workflow_data:
+            graph = workflow_data.get("graph", {})
+
+            snippet_service = SnippetService()
+            # Get existing workflow hash if exists
+            existing_workflow = snippet_service.get_draft_workflow(snippet=snippet)
+            unique_hash = existing_workflow.unique_hash if existing_workflow else None
+
+            snippet_service.sync_draft_workflow(
+                snippet=snippet,
+                graph=graph,
+                unique_hash=unique_hash,
+                account=account,
+                input_fields=input_fields,
+            )
+
+        self._session.commit()
+        return snippet
+
+    def export_snippet_dsl(self, snippet: CustomizedSnippet, include_secret: bool = False) -> str:
+        """
+        Export snippet as DSL
+        :param snippet: CustomizedSnippet instance
+        :param include_secret: Whether include secret variable
+        :return: YAML string
+        """
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not workflow:
+            raise ValueError("Missing draft workflow configuration, please check.")
+
+        icon_info = snippet.icon_info or {}
+        export_data = {
+            "version": CURRENT_DSL_VERSION,
+            "kind": "snippet",
+            "snippet": {
+                "name": snippet.name,
+                "description": snippet.description or "",
+                "type": snippet.type,
+                "icon_info": icon_info,
+                "input_fields": snippet.input_fields_list,
+            },
+        }
+
+        self._append_workflow_export_data(
+            export_data=export_data, snippet=snippet, workflow=workflow, include_secret=include_secret
+        )
+
+        return yaml.dump(export_data, allow_unicode=True)  # type: ignore
+
+    def _append_workflow_export_data(
+        self, *, export_data: dict, snippet: CustomizedSnippet, workflow: Workflow, include_secret: bool
+    ) -> None:
+        """
+        Append workflow export data
+        """
+        workflow_dict = workflow.to_dict(include_secret=include_secret)
+        # Filter workspace related data from nodes
+        workflow_dict["environment_variables"] = []
+        workflow_dict["conversation_variables"] = []
+
+        for node in workflow_dict.get("graph", {}).get("nodes", []):
+            node_data = node.get("data", {})
+            if not node_data:
+                continue
+            data_type = node_data.get("type", "")
+            if data_type == BuiltinNodeTypes.KNOWLEDGE_RETRIEVAL:
+                dataset_ids = node_data.get("dataset_ids", [])
+                node["data"]["dataset_ids"] = [
+                    self._encrypt_dataset_id(dataset_id=dataset_id, tenant_id=snippet.tenant_id)
+                    for dataset_id in dataset_ids
+                ]
+            # filter credential id from tool node
+            if not include_secret and data_type == BuiltinNodeTypes.TOOL:
+                node_data.pop("credential_id", None)
+            # filter credential id from agent node
+            if not include_secret and data_type == BuiltinNodeTypes.AGENT:
+                for tool in node_data.get("agent_parameters", {}).get("tools", {}).get("value", []):
+                    tool.pop("credential_id", None)
+
+        export_data["workflow"] = workflow_dict
+        dependencies = self._extract_dependencies_from_workflow(workflow)
+        export_data["dependencies"] = [
+            jsonable_encoder(d.model_dump())
+            for d in DependenciesAnalysisService.generate_dependencies(
+                tenant_id=snippet.tenant_id, dependencies=dependencies
+            )
+        ]
+
+    def _encrypt_dataset_id(self, *, dataset_id: str, tenant_id: str) -> str:
+        """
+        Encrypt dataset ID for export
+        """
+        # For now, just return the dataset_id as-is
+        # In the future, we might want to encrypt it
+        return dataset_id
+
+    def _extract_dependencies_from_workflow(self, workflow: Workflow) -> list[str]:
+        """
+        Extract dependencies from workflow
+        :param workflow: Workflow instance
+        :return: dependencies list format like ["langgenius/google"]
+        """
+        graph = workflow.graph_dict
+        dependencies = self._extract_dependencies_from_workflow_graph(graph)
+        return dependencies
+
+    def _extract_dependencies_from_workflow_graph(self, graph: Mapping) -> list[str]:
+        """
+        Extract dependencies from workflow graph
+        :param graph: Workflow graph
+        :return: dependencies list format like ["langgenius/google"]
+        """
+        dependencies = []
+        for node in graph.get("nodes", []):
+            node_data = node.get("data", {})
+            if not node_data:
+                continue
+            data_type = node_data.get("type", "")
+            if data_type == BuiltinNodeTypes.TOOL:
+                tool_config = node_data.get("tool_configurations", {})
+                provider_type = tool_config.get("provider_type")
+                provider_name = tool_config.get("provider")
+                if provider_type and provider_name:
+                    dependencies.append(f"{provider_name}/{provider_name}")
+            elif data_type == BuiltinNodeTypes.AGENT:
+                agent_parameters = node_data.get("agent_parameters", {})
+                tools = agent_parameters.get("tools", {}).get("value", [])
+                for tool in tools:
+                    provider_type = tool.get("provider_type")
+                    provider_name = tool.get("provider")
+                    if provider_type and provider_name:
+                        dependencies.append(f"{provider_name}/{provider_name}")
+
+        return dependencies
diff --git a/api/services/snippet_generate_service.py b/api/services/snippet_generate_service.py
new file mode 100644
index 0000000000..5e0d25c8f7
--- /dev/null
+++ b/api/services/snippet_generate_service.py
@@ -0,0 +1,421 @@
+"""
+Service for generating snippet workflow executions.
+
+Uses an adapter pattern to bridge CustomizedSnippet with the App-based
+WorkflowAppGenerator. The adapter (_SnippetAsApp) provides the minimal App-like
+interface needed by the generator, avoiding modifications to core workflow
+infrastructure.
+
+Key invariants:
+- Snippets always run as WORKFLOW mode (not CHAT or ADVANCED_CHAT).
+- The adapter maps snippet.id to app_id in workflow execution records.
+- Snippet debugging has no rate limiting (max_active_requests = 0).
+
+Supported execution modes:
+- Full workflow run (generate): Runs the entire draft workflow as SSE stream.
+- Single node run (run_draft_node): Synchronous single-step debugging for regular nodes.
+- Single iteration run (generate_single_iteration): SSE stream for iteration container nodes.
+- Single loop run (generate_single_loop): SSE stream for loop container nodes.
+"""
+
+import json
+import logging
+from collections.abc import Generator, Mapping, Sequence
+from typing import Any, Union
+
+from sqlalchemy.orm import make_transient
+
+from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
+from core.app.apps.workflow.app_generator import WorkflowAppGenerator
+from core.app.entities.app_invoke_entities import InvokeFrom
+from factories import file_factory
+from graphon.file.models import File
+from models import Account
+from models.model import AppMode, EndUser
+from models.snippet import CustomizedSnippet
+from models.workflow import Workflow, WorkflowNodeExecutionModel
+from services.snippet_service import SnippetService
+from services.workflow_service import WorkflowService
+
+logger = logging.getLogger(__name__)
+
+
+class _SnippetAsApp:
+    """
+    Minimal adapter that wraps a CustomizedSnippet to satisfy the App-like
+    interface required by WorkflowAppGenerator, WorkflowAppConfigManager,
+    and WorkflowService.run_draft_workflow_node.
+
+    Used properties:
+    - id: maps to snippet.id (stored as app_id in workflows table)
+    - tenant_id: maps to snippet.tenant_id
+    - mode: hardcoded to AppMode.WORKFLOW since snippets always run as workflows
+    - max_active_requests: defaults to 0 (no limit) for snippet debugging
+    - app_model_config_id: None (snippets don't have app model configs)
+    """
+
+    id: str
+    tenant_id: str
+    mode: str
+    max_active_requests: int
+    app_model_config_id: str | None
+
+    def __init__(self, snippet: CustomizedSnippet) -> None:
+        self.id = snippet.id
+        self.tenant_id = snippet.tenant_id
+        self.mode = AppMode.WORKFLOW.value
+        self.max_active_requests = 0
+        self.app_model_config_id = None
+
+
+class SnippetGenerateService:
+    """
+    Service for running snippet workflow executions.
+
+    Adapts CustomizedSnippet to work with the existing App-based
+    WorkflowAppGenerator infrastructure, avoiding duplication of the
+    complex workflow execution pipeline.
+    """
+
+    # Specific ID for the injected virtual Start node so it can be recognised
+    _VIRTUAL_START_NODE_ID = "__snippet_virtual_start__"
+
+    @classmethod
+    def generate(
+        cls,
+        snippet: CustomizedSnippet,
+        user: Union[Account, EndUser],
+        args: Mapping[str, Any],
+        invoke_from: InvokeFrom,
+        streaming: bool = True,
+    ) -> Union[Mapping[str, Any], Generator[Mapping[str, Any] | str, None, None]]:
+        """
+        Run a snippet's draft workflow.
+
+        Retrieves the draft workflow, adapts the snippet to an App-like proxy,
+        then delegates execution to WorkflowAppGenerator.
+
+        If the workflow graph has no Start node, a virtual Start node is injected
+        in-memory so that:
+        1. Graph validation passes (root node must have execution_type=ROOT).
+        2. User inputs are processed into the variable pool by the StartNode logic.
+
+        :param snippet: CustomizedSnippet instance
+        :param user: Account or EndUser initiating the run
+        :param args: Workflow inputs (must include "inputs" key)
+        :param invoke_from: Source of invocation (typically DEBUGGER)
+        :param streaming: Whether to stream the response
+        :return: Blocking response mapping or SSE streaming generator
+        :raises ValueError: If the snippet has no draft workflow
+        """
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not workflow:
+            raise ValueError("Workflow not initialized")
+
+        # Inject a virtual Start node when the graph doesn't have one.
+        workflow = cls._ensure_start_node(workflow, snippet)
+
+        # Adapt snippet to App-like interface for WorkflowAppGenerator
+        app_proxy = _SnippetAsApp(snippet)
+
+        return WorkflowAppGenerator.convert_to_event_stream(
+            WorkflowAppGenerator().generate(
+                app_model=app_proxy,  # type: ignore[arg-type]
+                workflow=workflow,
+                user=user,
+                args=args,
+                invoke_from=invoke_from,
+                streaming=streaming,
+                call_depth=0,
+            )
+        )
+
+    @classmethod
+    def run_published(
+        cls,
+        snippet: CustomizedSnippet,
+        user: Union[Account, EndUser],
+        args: Mapping[str, Any],
+        invoke_from: InvokeFrom,
+    ) -> Mapping[str, Any]:
+        """
+        Run a snippet's published workflow in non-streaming (blocking) mode.
+
+        Similar to :meth:`generate` but targets the published workflow instead
+        of the draft, and returns the raw blocking response without SSE
+        wrapping.  Designed for programmatic callers such as evaluation runners.
+
+        :param snippet: CustomizedSnippet instance (must be published)
+        :param user: Account or EndUser initiating the run
+        :param args: Workflow inputs (must include "inputs" key)
+        :param invoke_from: Source of invocation
+        :return: Blocking response mapping with workflow outputs
+        :raises ValueError: If the snippet has no published workflow
+        """
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_published_workflow(snippet)
+        if not workflow:
+            raise ValueError("No published workflow found for snippet")
+
+        # Inject a virtual Start node when the graph doesn't have one.
+        workflow = cls._ensure_start_node(workflow, snippet)
+
+        app_proxy = _SnippetAsApp(snippet)
+
+        response: Mapping[str, Any] = WorkflowAppGenerator().generate(
+            app_model=app_proxy,  # type: ignore[arg-type]
+            workflow=workflow,
+            user=user,
+            args=args,
+            invoke_from=invoke_from,
+            streaming=False,
+        )
+        return response
+
+    @classmethod
+    def ensure_start_node_for_worker(cls, workflow: Workflow, snippet: CustomizedSnippet) -> Workflow:
+        """Public wrapper for worker-thread start-node injection."""
+        return cls._ensure_start_node(workflow, snippet)
+
+    @classmethod
+    def _ensure_start_node(cls, workflow: Workflow, snippet: CustomizedSnippet) -> Workflow:
+        """
+        Return *workflow* with a Start node.
+
+        If the graph already contains a Start node, the original workflow is
+        returned unchanged.  Otherwise a virtual Start node is injected and the
+        workflow object is detached from the SQLAlchemy session so the in-memory
+        change is never flushed to the database.
+        """
+        graph_dict = workflow.graph_dict
+        nodes: list[dict[str, Any]] = graph_dict.get("nodes", [])
+
+        has_start = any(node.get("data", {}).get("type") == "start" for node in nodes)
+        if has_start:
+            return workflow
+
+        modified_graph = cls._inject_virtual_start_node(
+            graph_dict=graph_dict,
+            input_fields=snippet.input_fields_list,
+        )
+
+        # Detach from session to prevent accidental DB persistence of the
+        # modified graph.  All attributes remain accessible for read.
+        make_transient(workflow)
+        workflow.graph = json.dumps(modified_graph)
+        return workflow
+
+    @classmethod
+    def _inject_virtual_start_node(
+        cls,
+        graph_dict: Mapping[str, Any],
+        input_fields: list[dict[str, Any]],
+    ) -> dict[str, Any]:
+        """
+        Build a new graph dict with a virtual Start node prepended.
+
+        The virtual Start node is wired to every existing node that has no
+        incoming edges (i.e. the current root candidates).  This guarantees:
+
+        :param graph_dict: Original graph configuration.
+        :param input_fields: Snippet input field definitions from
+            ``CustomizedSnippet.input_fields_list``.
+        :return: New graph dict containing the virtual Start node and edges.
+        """
+        nodes: list[dict[str, Any]] = list(graph_dict.get("nodes", []))
+        edges: list[dict[str, Any]] = list(graph_dict.get("edges", []))
+
+        # Identify nodes with no incoming edges.
+        nodes_with_incoming: set[str] = set()
+        for edge in edges:
+            target = edge.get("target")
+            if isinstance(target, str):
+                nodes_with_incoming.add(target)
+        root_candidate_ids = [n["id"] for n in nodes if n["id"] not in nodes_with_incoming]
+
+        # Build Start node ``variables`` from snippet input fields.
+        start_variables: list[dict[str, Any]] = []
+        for field in input_fields:
+            var: dict[str, Any] = {
+                "variable": field.get("variable", ""),
+                "label": field.get("label", field.get("variable", "")),
+                "type": field.get("type", "text-input"),
+                "required": field.get("required", False),
+                "options": field.get("options", []),
+            }
+            if field.get("max_length") is not None:
+                var["max_length"] = field["max_length"]
+            start_variables.append(var)
+
+        virtual_start_node: dict[str, Any] = {
+            "id": cls._VIRTUAL_START_NODE_ID,
+            "data": {
+                "type": "start",
+                "title": "Start",
+                "variables": start_variables,
+            },
+        }
+
+        # Create edges from virtual Start to each root candidate.
+        new_edges: list[dict[str, Any]] = [
+            {
+                "source": cls._VIRTUAL_START_NODE_ID,
+                "sourceHandle": "source",
+                "target": root_id,
+                "targetHandle": "target",
+            }
+            for root_id in root_candidate_ids
+        ]
+
+        return {
+            **graph_dict,
+            "nodes": [virtual_start_node, *nodes],
+            "edges": [*edges, *new_edges],
+        }
+
+    @classmethod
+    def run_draft_node(
+        cls,
+        snippet: CustomizedSnippet,
+        node_id: str,
+        user_inputs: Mapping[str, Any],
+        account: Account,
+        query: str = "",
+        files: Sequence[File] | None = None,
+    ) -> WorkflowNodeExecutionModel:
+        """
+        Run a single node in a snippet's draft workflow (single-step debugging).
+
+        Retrieves the draft workflow, adapts the snippet to an App-like proxy,
+        parses file inputs, then delegates to WorkflowService.run_draft_workflow_node.
+
+        :param snippet: CustomizedSnippet instance
+        :param node_id: ID of the node to run
+        :param user_inputs: User input values for the node
+        :param account: Account initiating the run
+        :param query: Optional query string
+        :param files: Optional parsed file objects
+        :return: WorkflowNodeExecutionModel with execution results
+        :raises ValueError: If the snippet has no draft workflow
+        """
+        snippet_service = SnippetService()
+        draft_workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not draft_workflow:
+            raise ValueError("Workflow not initialized")
+
+        app_proxy = _SnippetAsApp(snippet)
+
+        workflow_service = WorkflowService()
+        return workflow_service.run_draft_workflow_node(
+            app_model=app_proxy,  # type: ignore[arg-type]
+            draft_workflow=draft_workflow,
+            node_id=node_id,
+            user_inputs=user_inputs,
+            account=account,
+            query=query,
+            files=files,
+        )
+
+    @classmethod
+    def generate_single_iteration(
+        cls,
+        snippet: CustomizedSnippet,
+        user: Union[Account, EndUser],
+        node_id: str,
+        args: Mapping[str, Any],
+        streaming: bool = True,
+    ) -> Union[Mapping[str, Any], Generator[Mapping[str, Any] | str, None, None]]:
+        """
+        Run a single iteration node in a snippet's draft workflow.
+
+        Iteration nodes are container nodes that execute their sub-graph multiple
+        times, producing many events. Therefore, this uses the full WorkflowAppGenerator
+        pipeline with SSE streaming (unlike regular single-step node run).
+
+        :param snippet: CustomizedSnippet instance
+        :param user: Account or EndUser initiating the run
+        :param node_id: ID of the iteration node to run
+        :param args: Dict containing 'inputs' key with iteration input data
+        :param streaming: Whether to stream the response (should be True)
+        :return: SSE streaming generator
+        :raises ValueError: If the snippet has no draft workflow
+        """
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not workflow:
+            raise ValueError("Workflow not initialized")
+
+        app_proxy = _SnippetAsApp(snippet)
+
+        return WorkflowAppGenerator.convert_to_event_stream(
+            WorkflowAppGenerator().single_iteration_generate(
+                app_model=app_proxy,  # type: ignore[arg-type]
+                workflow=workflow,
+                node_id=node_id,
+                user=user,
+                args=args,
+                streaming=streaming,
+            )
+        )
+
+    @classmethod
+    def generate_single_loop(
+        cls,
+        snippet: CustomizedSnippet,
+        user: Union[Account, EndUser],
+        node_id: str,
+        args: Any,
+        streaming: bool = True,
+    ) -> Union[Mapping[str, Any], Generator[Mapping[str, Any] | str, None, None]]:
+        """
+        Run a single loop node in a snippet's draft workflow.
+
+        Loop nodes are container nodes that execute their sub-graph repeatedly,
+        producing many events. Therefore, this uses the full WorkflowAppGenerator
+        pipeline with SSE streaming (unlike regular single-step node run).
+
+        :param snippet: CustomizedSnippet instance
+        :param user: Account or EndUser initiating the run
+        :param node_id: ID of the loop node to run
+        :param args: Pydantic model with 'inputs' attribute containing loop input data
+        :param streaming: Whether to stream the response (should be True)
+        :return: SSE streaming generator
+        :raises ValueError: If the snippet has no draft workflow
+        """
+        snippet_service = SnippetService()
+        workflow = snippet_service.get_draft_workflow(snippet=snippet)
+        if not workflow:
+            raise ValueError("Workflow not initialized")
+
+        app_proxy = _SnippetAsApp(snippet)
+
+        return WorkflowAppGenerator.convert_to_event_stream(
+            WorkflowAppGenerator().single_loop_generate(
+                app_model=app_proxy,  # type: ignore[arg-type]
+                workflow=workflow,
+                node_id=node_id,
+                user=user,
+                args=args,  # type: ignore[arg-type]
+                streaming=streaming,
+            )
+        )
+
+    @staticmethod
+    def parse_files(workflow: Workflow, files: list[dict] | None = None) -> Sequence[File]:
+        """
+        Parse file mappings into File objects based on workflow configuration.
+
+        :param workflow: Workflow instance for file upload config
+        :param files: Raw file mapping dicts
+        :return: Parsed File objects
+        """
+        files = files or []
+        file_extra_config = FileUploadConfigManager.convert(workflow.features_dict, is_vision=False)
+        if file_extra_config is None:
+            return []
+        return file_factory.build_from_mappings(
+            mappings=files,
+            tenant_id=workflow.tenant_id,
+            config=file_extra_config,
+        )
diff --git a/api/services/snippet_service.py b/api/services/snippet_service.py
new file mode 100644
index 0000000000..a2cdc23f3d
--- /dev/null
+++ b/api/services/snippet_service.py
@@ -0,0 +1,608 @@
+import json
+import logging
+from collections.abc import Mapping, Sequence
+from datetime import UTC, datetime
+from typing import Any
+
+from sqlalchemy import func, select
+from sqlalchemy.orm import Session, sessionmaker
+
+from core.workflow.node_factory import LATEST_VERSION, NODE_TYPE_CLASSES_MAPPING
+from extensions.ext_database import db
+from graphon.enums import BuiltinNodeTypes, NodeType
+from libs.infinite_scroll_pagination import InfiniteScrollPagination
+from models import Account
+from models.enums import WorkflowRunTriggeredFrom
+from models.snippet import CustomizedSnippet, SnippetType
+from models.workflow import (
+    Workflow,
+    WorkflowNodeExecutionModel,
+    WorkflowRun,
+    WorkflowType,
+)
+from repositories.factory import DifyAPIRepositoryFactory
+from services.errors.app import WorkflowHashNotEqualError
+
+logger = logging.getLogger(__name__)
+
+# Node types not allowed in snippet workflows (sync, publish, DSL import).
+SNIPPET_FORBIDDEN_NODE_TYPES: frozenset[str] = frozenset(
+    {
+        BuiltinNodeTypes.START,
+        BuiltinNodeTypes.HUMAN_INPUT,
+        BuiltinNodeTypes.KNOWLEDGE_RETRIEVAL,
+    }
+)
+
+
+class SnippetService:
+    """Service for managing customized snippets."""
+
+    def __init__(self, session_maker: sessionmaker | None = None):
+        """Initialize SnippetService with repository dependencies."""
+        if session_maker is None:
+            session_maker = sessionmaker(bind=db.engine, expire_on_commit=False)
+        self._node_execution_service_repo = DifyAPIRepositoryFactory.create_api_workflow_node_execution_repository(
+            session_maker
+        )
+        self._workflow_run_repo = DifyAPIRepositoryFactory.create_api_workflow_run_repository(session_maker)
+
+    @staticmethod
+    def validate_snippet_graph_forbidden_nodes(graph: Mapping[str, Any]) -> None:
+        """Reject graphs that contain node types not allowed in snippets."""
+        nodes = graph.get("nodes") or []
+        disallowed: list[tuple[str, str]] = []
+        for node in nodes:
+            if not isinstance(node, dict):
+                continue
+            node_data = node.get("data") or {}
+            node_type = node_data.get("type")
+            if not isinstance(node_type, str):
+                continue
+            if node_type in SNIPPET_FORBIDDEN_NODE_TYPES:
+                node_id = node.get("id")
+                disallowed.append((str(node_id) if node_id is not None else "?", node_type))
+        if not disallowed:
+            return
+        detail = ", ".join(f"{nid}:{t}" for nid, t in disallowed)
+        raise ValueError(
+            "Snippet workflow cannot contain start, human-input, or knowledge-retrieval nodes. "
+            f"Found: {detail}"
+        )
+
+    # --- CRUD Operations ---
+
+    @staticmethod
+    def get_snippets(
+        *,
+        tenant_id: str,
+        page: int = 1,
+        limit: int = 20,
+        keyword: str | None = None,
+        is_published: bool | None = None,
+        creators: list[str] | None = None,
+    ) -> tuple[Sequence[CustomizedSnippet], int, bool]:
+        """
+        Get paginated list of snippets with optional search.
+
+        :param tenant_id: Tenant ID
+        :param page: Page number (1-indexed)
+        :param limit: Number of items per page
+        :param keyword: Optional search keyword for name/description
+        :param is_published: Optional filter by published status (True/False/None for all)
+        :param creators: Optional filter by creator account IDs
+        :return: Tuple of (snippets list, total count, has_more flag)
+        """
+        stmt = (
+            select(CustomizedSnippet)
+            .where(CustomizedSnippet.tenant_id == tenant_id)
+            .order_by(CustomizedSnippet.created_at.desc())
+        )
+
+        if keyword:
+            stmt = stmt.where(
+                CustomizedSnippet.name.ilike(f"%{keyword}%") | CustomizedSnippet.description.ilike(f"%{keyword}%")
+            )
+
+        if is_published is not None:
+            stmt = stmt.where(CustomizedSnippet.is_published == is_published)
+
+        if creators:
+            stmt = stmt.where(CustomizedSnippet.created_by.in_(creators))
+
+        # Get total count
+        count_stmt = select(func.count()).select_from(stmt.subquery())
+        total = db.session.scalar(count_stmt) or 0
+
+        # Apply pagination
+        stmt = stmt.limit(limit + 1).offset((page - 1) * limit)
+        snippets = list(db.session.scalars(stmt).all())
+
+        has_more = len(snippets) > limit
+        if has_more:
+            snippets = snippets[:-1]
+
+        return snippets, total, has_more
+
+    @staticmethod
+    def get_snippet_by_id(
+        *,
+        snippet_id: str,
+        tenant_id: str,
+    ) -> CustomizedSnippet | None:
+        """
+        Get snippet by ID with tenant isolation.
+
+        :param snippet_id: Snippet ID
+        :param tenant_id: Tenant ID
+        :return: CustomizedSnippet or None
+        """
+        return (
+            db.session.query(CustomizedSnippet)
+            .where(
+                CustomizedSnippet.id == snippet_id,
+                CustomizedSnippet.tenant_id == tenant_id,
+            )
+            .first()
+        )
+
+    @staticmethod
+    def create_snippet(
+        *,
+        tenant_id: str,
+        name: str,
+        description: str | None,
+        snippet_type: SnippetType,
+        icon_info: dict | None,
+        input_fields: list[dict] | None,
+        account: Account,
+    ) -> CustomizedSnippet:
+        """
+        Create a new snippet.
+
+        :param tenant_id: Tenant ID
+        :param name: Snippet name (must be unique per tenant)
+        :param description: Snippet description
+        :param snippet_type: Type of snippet (node or group)
+        :param icon_info: Icon information
+        :param input_fields: Input field definitions
+        :param account: Creator account
+        :return: Created CustomizedSnippet
+        :raises ValueError: If name already exists
+        """
+        # Check if name already exists for this tenant
+        existing = (
+            db.session.query(CustomizedSnippet)
+            .where(
+                CustomizedSnippet.tenant_id == tenant_id,
+                CustomizedSnippet.name == name,
+            )
+            .first()
+        )
+        if existing:
+            raise ValueError(f"Snippet with name '{name}' already exists")
+
+        snippet = CustomizedSnippet(
+            tenant_id=tenant_id,
+            name=name,
+            description=description or "",
+            type=snippet_type.value,
+            icon_info=icon_info,
+            input_fields=json.dumps(input_fields) if input_fields else None,
+            created_by=account.id,
+        )
+
+        db.session.add(snippet)
+        db.session.commit()
+
+        return snippet
+
+    @staticmethod
+    def update_snippet(
+        *,
+        session: Session,
+        snippet: CustomizedSnippet,
+        account_id: str,
+        data: dict,
+    ) -> CustomizedSnippet:
+        """
+        Update snippet attributes.
+
+        :param session: Database session
+        :param snippet: Snippet to update
+        :param account_id: ID of account making the update
+        :param data: Dictionary of fields to update
+        :return: Updated CustomizedSnippet
+        """
+        if "name" in data:
+            # Check if new name already exists for this tenant
+            existing = (
+                session.query(CustomizedSnippet)
+                .where(
+                    CustomizedSnippet.tenant_id == snippet.tenant_id,
+                    CustomizedSnippet.name == data["name"],
+                    CustomizedSnippet.id != snippet.id,
+                )
+                .first()
+            )
+            if existing:
+                raise ValueError(f"Snippet with name '{data['name']}' already exists")
+            snippet.name = data["name"]
+
+        if "description" in data:
+            snippet.description = data["description"]
+
+        if "icon_info" in data:
+            snippet.icon_info = data["icon_info"]
+
+        snippet.updated_by = account_id
+        snippet.updated_at = datetime.now(UTC).replace(tzinfo=None)
+
+        session.add(snippet)
+        return snippet
+
+    @staticmethod
+    def delete_snippet(
+        *,
+        session: Session,
+        snippet: CustomizedSnippet,
+    ) -> bool:
+        """
+        Delete a snippet.
+
+        :param session: Database session
+        :param snippet: Snippet to delete
+        :return: True if deleted successfully
+        """
+        session.delete(snippet)
+        return True
+
+    # --- Workflow Operations ---
+
+    def get_draft_workflow(self, snippet: CustomizedSnippet) -> Workflow | None:
+        """
+        Get draft workflow for snippet.
+
+        :param snippet: CustomizedSnippet instance
+        :return: Draft Workflow or None
+        """
+        workflow = (
+            db.session.query(Workflow)
+            .where(
+                Workflow.tenant_id == snippet.tenant_id,
+                Workflow.app_id == snippet.id,
+                Workflow.type == WorkflowType.SNIPPET.value,
+                Workflow.version == "draft",
+            )
+            .first()
+        )
+        return workflow
+
+    def get_published_workflow(self, snippet: CustomizedSnippet) -> Workflow | None:
+        """
+        Get published workflow for snippet.
+
+        :param snippet: CustomizedSnippet instance
+        :return: Published Workflow or None
+        """
+        if not snippet.workflow_id:
+            return None
+
+        workflow = (
+            db.session.query(Workflow)
+            .where(
+                Workflow.tenant_id == snippet.tenant_id,
+                Workflow.app_id == snippet.id,
+                Workflow.type == WorkflowType.SNIPPET.value,
+                Workflow.id == snippet.workflow_id,
+            )
+            .first()
+        )
+        return workflow
+
+    def sync_draft_workflow(
+        self,
+        *,
+        snippet: CustomizedSnippet,
+        graph: dict,
+        unique_hash: str | None,
+        account: Account,
+        input_fields: list[dict] | None = None,
+    ) -> Workflow:
+        """
+        Sync draft workflow for snippet.
+
+        Snippet workflows do not persist environment variables (always empty) or
+        conversation variables (always empty).
+
+        :param snippet: CustomizedSnippet instance
+        :param graph: Workflow graph configuration
+        :param unique_hash: Hash for conflict detection
+        :param account: Account making the change
+        :param input_fields: Input fields for snippet
+        :return: Synced Workflow
+        :raises WorkflowHashNotEqualError: If hash mismatch
+        """
+        SnippetService.validate_snippet_graph_forbidden_nodes(graph)
+
+        workflow = self.get_draft_workflow(snippet=snippet)
+
+        if workflow and workflow.unique_hash != unique_hash:
+            raise WorkflowHashNotEqualError()
+
+        # Create draft workflow if not found
+        if not workflow:
+            workflow = Workflow(
+                tenant_id=snippet.tenant_id,
+                app_id=snippet.id,
+                features="{}",
+                type=WorkflowType.SNIPPET.value,
+                version="draft",
+                graph=json.dumps(graph),
+                created_by=account.id,
+                environment_variables=[],
+                conversation_variables=[],
+            )
+            db.session.add(workflow)
+            db.session.flush()
+        else:
+            # Update existing draft workflow
+            workflow.graph = json.dumps(graph)
+            workflow.updated_by = account.id
+            workflow.updated_at = datetime.now(UTC).replace(tzinfo=None)
+            workflow.environment_variables = []
+            workflow.conversation_variables = []
+
+        # Update snippet's input_fields if provided
+        if input_fields is not None:
+            snippet.input_fields = json.dumps(input_fields)
+            snippet.updated_by = account.id
+            snippet.updated_at = datetime.now(UTC).replace(tzinfo=None)
+
+        db.session.commit()
+        return workflow
+
+    def publish_workflow(
+        self,
+        *,
+        session: Session,
+        snippet: CustomizedSnippet,
+        account: Account,
+    ) -> Workflow:
+        """
+        Publish the draft workflow as a new version.
+
+        :param session: Database session
+        :param snippet: CustomizedSnippet instance
+        :param account: Account making the change
+        :return: Published Workflow
+        :raises ValueError: If no draft workflow exists
+        """
+        draft_workflow_stmt = select(Workflow).where(
+            Workflow.tenant_id == snippet.tenant_id,
+            Workflow.app_id == snippet.id,
+            Workflow.type == WorkflowType.SNIPPET.value,
+            Workflow.version == "draft",
+        )
+        draft_workflow = session.scalar(draft_workflow_stmt)
+        if not draft_workflow:
+            raise ValueError("No valid workflow found.")
+
+        SnippetService.validate_snippet_graph_forbidden_nodes(draft_workflow.graph_dict)
+
+        # Create new published workflow
+        workflow = Workflow.new(
+            tenant_id=snippet.tenant_id,
+            app_id=snippet.id,
+            type=draft_workflow.type,
+            version=str(datetime.now(UTC).replace(tzinfo=None)),
+            graph=draft_workflow.graph,
+            features=draft_workflow.features,
+            created_by=account.id,
+            environment_variables=[],
+            conversation_variables=[],
+            rag_pipeline_variables=draft_workflow.rag_pipeline_variables,
+            marked_name="",
+            marked_comment="",
+        )
+        session.add(workflow)
+
+        # Update snippet version
+        snippet.version += 1
+        snippet.is_published = True
+        snippet.workflow_id = workflow.id
+        snippet.updated_by = account.id
+        session.add(snippet)
+
+        return workflow
+
+    def get_all_published_workflows(
+        self,
+        *,
+        session: Session,
+        snippet: CustomizedSnippet,
+        page: int,
+        limit: int,
+    ) -> tuple[Sequence[Workflow], bool]:
+        """
+        Get all published workflow versions for snippet.
+
+        :param session: Database session
+        :param snippet: CustomizedSnippet instance
+        :param page: Page number
+        :param limit: Items per page
+        :return: Tuple of (workflows list, has_more flag)
+        """
+        if not snippet.workflow_id:
+            return [], False
+
+        stmt = (
+            select(Workflow)
+            .where(
+                Workflow.app_id == snippet.id,
+                Workflow.type == WorkflowType.SNIPPET.value,
+                Workflow.version != "draft",
+            )
+            .order_by(Workflow.version.desc())
+            .limit(limit + 1)
+            .offset((page - 1) * limit)
+        )
+
+        workflows = list(session.scalars(stmt).all())
+        has_more = len(workflows) > limit
+        if has_more:
+            workflows = workflows[:-1]
+
+        return workflows, has_more
+
+    # --- Default Block Configs ---
+
+    def get_default_block_configs(self) -> list[dict]:
+        """
+        Get default block configurations for all node types.
+
+        :return: List of default configurations
+        """
+        default_block_configs: list[dict[str, Any]] = []
+        for node_class_mapping in NODE_TYPE_CLASSES_MAPPING.values():
+            node_class = node_class_mapping[LATEST_VERSION]
+            default_config = node_class.get_default_config()
+            if default_config:
+                default_block_configs.append(dict(default_config))
+
+        return default_block_configs
+
+    def get_default_block_config(self, node_type: str, filters: dict | None = None) -> Mapping[str, object] | None:
+        """
+        Get default config for specific node type.
+
+        :param node_type: Node type string
+        :param filters: Optional filters
+        :return: Default configuration or None
+        """
+        node_type_enum = NodeType(node_type)
+
+        if node_type_enum not in NODE_TYPE_CLASSES_MAPPING:
+            return None
+
+        node_class = NODE_TYPE_CLASSES_MAPPING[node_type_enum][LATEST_VERSION]
+        default_config = node_class.get_default_config(filters=filters)
+        if not default_config:
+            return None
+
+        return default_config
+
+    # --- Workflow Run Operations ---
+
+    def get_snippet_workflow_runs(
+        self,
+        *,
+        snippet: CustomizedSnippet,
+        args: dict,
+    ) -> InfiniteScrollPagination:
+        """
+        Get paginated workflow runs for snippet.
+
+        :param snippet: CustomizedSnippet instance
+        :param args: Request arguments (last_id, limit)
+        :return: InfiniteScrollPagination result
+        """
+        limit = int(args.get("limit", 20))
+        last_id = args.get("last_id")
+
+        triggered_from_values = [
+            WorkflowRunTriggeredFrom.DEBUGGING,
+        ]
+
+        return self._workflow_run_repo.get_paginated_workflow_runs(
+            tenant_id=snippet.tenant_id,
+            app_id=snippet.id,
+            triggered_from=triggered_from_values,
+            limit=limit,
+            last_id=last_id,
+        )
+
+    def get_snippet_workflow_run(
+        self,
+        *,
+        snippet: CustomizedSnippet,
+        run_id: str,
+    ) -> WorkflowRun | None:
+        """
+        Get workflow run details.
+
+        :param snippet: CustomizedSnippet instance
+        :param run_id: Workflow run ID
+        :return: WorkflowRun or None
+        """
+        return self._workflow_run_repo.get_workflow_run_by_id(
+            tenant_id=snippet.tenant_id,
+            app_id=snippet.id,
+            run_id=run_id,
+        )
+
+    def get_snippet_workflow_run_node_executions(
+        self,
+        *,
+        snippet: CustomizedSnippet,
+        run_id: str,
+    ) -> Sequence[WorkflowNodeExecutionModel]:
+        """
+        Get workflow run node execution list.
+
+        :param snippet: CustomizedSnippet instance
+        :param run_id: Workflow run ID
+        :return: List of WorkflowNodeExecutionModel
+        """
+        workflow_run = self.get_snippet_workflow_run(snippet=snippet, run_id=run_id)
+        if not workflow_run:
+            return []
+
+        node_executions = self._node_execution_service_repo.get_executions_by_workflow_run(
+            tenant_id=snippet.tenant_id,
+            app_id=snippet.id,
+            workflow_run_id=workflow_run.id,
+        )
+
+        return node_executions
+
+    # --- Node Execution Operations ---
+
+    def get_snippet_node_last_run(
+        self,
+        *,
+        snippet: CustomizedSnippet,
+        workflow: Workflow,
+        node_id: str,
+    ) -> WorkflowNodeExecutionModel | None:
+        """
+        Get the most recent execution for a specific node in a snippet workflow.
+
+        :param snippet: CustomizedSnippet instance
+        :param workflow: Workflow instance
+        :param node_id: Node identifier
+        :return: WorkflowNodeExecutionModel or None
+        """
+        return self._node_execution_service_repo.get_node_last_execution(
+            tenant_id=snippet.tenant_id,
+            app_id=snippet.id,
+            workflow_id=workflow.id,
+            node_id=node_id,
+        )
+
+    # --- Use Count ---
+
+    @staticmethod
+    def increment_use_count(
+        *,
+        session: Session,
+        snippet: CustomizedSnippet,
+    ) -> None:
+        """
+        Increment the use_count when snippet is used.
+
+        :param session: Database session
+        :param snippet: CustomizedSnippet instance
+        """
+        snippet.use_count += 1
+        session.add(snippet)
diff --git a/api/services/trigger/webhook_service.py b/api/services/trigger/webhook_service.py
index bb767a6759..c782bffad4 100644
--- a/api/services/trigger/webhook_service.py
+++ b/api/services/trigger/webhook_service.py
@@ -38,6 +38,7 @@ from models.workflow import Workflow
 from services.async_workflow_service import AsyncWorkflowService
 from services.end_user_service import EndUserService
 from services.errors.app import QuotaExceededError
+from services.quota_service import QuotaService
 from services.trigger.app_trigger_service import AppTriggerService
 from services.workflow.entities import WebhookTriggerData
 
@@ -819,9 +820,9 @@ class WebhookService:
                     user_id=None,
                 )
 
-                # consume quota before triggering workflow execution
+                # reserve quota before triggering workflow execution
                 try:
-                    QuotaType.TRIGGER.consume(webhook_trigger.tenant_id)
+                    quota_charge = QuotaService.reserve(QuotaType.TRIGGER, webhook_trigger.tenant_id)
                 except QuotaExceededError:
                     AppTriggerService.mark_tenant_triggers_rate_limited(webhook_trigger.tenant_id)
                     logger.info(
@@ -832,11 +833,16 @@ class WebhookService:
                     raise
 
                 # Trigger workflow execution asynchronously
-                AsyncWorkflowService.trigger_workflow_async(
-                    session,
-                    end_user,
-                    trigger_data,
-                )
+                try:
+                    AsyncWorkflowService.trigger_workflow_async(
+                        session,
+                        end_user,
+                        trigger_data,
+                    )
+                    quota_charge.commit()
+                except Exception:
+                    quota_charge.refund()
+                    raise
 
         except Exception:
             logger.exception("Failed to trigger workflow for webhook %s", webhook_trigger.webhook_id)
diff --git a/api/services/workflow_app_service.py b/api/services/workflow_app_service.py
index b5ab176ad2..5ab3430883 100644
--- a/api/services/workflow_app_service.py
+++ b/api/services/workflow_app_service.py
@@ -23,17 +23,28 @@ class LogView:
     """Lightweight wrapper for WorkflowAppLog with computed details.
 
     - Exposes `details_` for marshalling to `details` in API response
+    - Exposes `evaluation_` for marshalling evaluation metrics in API response
     - Proxies all other attributes to the underlying `WorkflowAppLog`
     """
 
-    def __init__(self, log: WorkflowAppLog, details: LogViewDetails | None):
+    def __init__(
+        self,
+        log: WorkflowAppLog,
+        details: LogViewDetails | None,
+        evaluation: list[dict] | None = None,
+    ):
         self.log = log
         self.details_ = details
+        self.evaluation_ = evaluation
 
     @property
     def details(self) -> LogViewDetails | None:
         return self.details_
 
+    @property
+    def evaluation(self) -> list[dict] | None:
+        return self.evaluation_
+
     def __getattr__(self, name):
         return getattr(self.log, name)
 
@@ -170,12 +181,20 @@ class WorkflowAppService:
         # Execute query and get items
         if detail:
             rows = session.execute(offset_stmt).all()
-            items = [
-                LogView(log, {"trigger_metadata": self.handle_trigger_metadata(app_model.tenant_id, meta_val)})
+            logs_with_details = [
+                (log, {"trigger_metadata": self.handle_trigger_metadata(app_model.tenant_id, meta_val)})
                 for log, meta_val in rows
             ]
         else:
-            items = [LogView(log, None) for log in session.scalars(offset_stmt).all()]
+            logs_with_details = [(log, None) for log in session.scalars(offset_stmt).all()]
+
+        workflow_run_ids = [log.workflow_run_id for log, _ in logs_with_details]
+        eval_map = self._batch_query_evaluation_metrics(session, workflow_run_ids)
+
+        items = [
+            LogView(log, details, evaluation=eval_map.get(log.workflow_run_id))
+            for log, details in logs_with_details
+        ]
         return {
             "page": page,
             "limit": limit,
@@ -257,6 +276,45 @@ class WorkflowAppService:
             "data": items,
         }
 
+    @staticmethod
+    def _batch_query_evaluation_metrics(
+        session: Session,
+        workflow_run_ids: list[str],
+    ) -> dict[str, list[dict[str, Any]]]:
+        """Return evaluation metrics keyed by workflow_run_id.
+
+        Only returns metrics from completed evaluation runs.  If a workflow
+        run was not part of any evaluation (or the evaluation has not
+        completed), it will be absent from the result dict.
+        """
+        from models.evaluation import EvaluationRun, EvaluationRunItem, EvaluationRunStatus
+
+        if not workflow_run_ids:
+            return {}
+
+        non_null_ids = [wid for wid in workflow_run_ids if wid]
+        if not non_null_ids:
+            return {}
+
+        stmt = (
+            select(EvaluationRunItem.workflow_run_id, EvaluationRunItem.metrics)
+            .join(EvaluationRun, EvaluationRun.id == EvaluationRunItem.evaluation_run_id)
+            .where(
+                EvaluationRunItem.workflow_run_id.in_(non_null_ids),
+                EvaluationRun.status == EvaluationRunStatus.COMPLETED,
+            )
+        )
+        rows = session.execute(stmt).all()
+
+        result: dict[str, list[dict[str, Any]]] = {}
+        for wf_run_id, metrics_json in rows:
+            if wf_run_id and metrics_json:
+                parsed: list[dict[str, Any]] = json.loads(metrics_json)
+                existing = result.get(wf_run_id, [])
+                existing.extend(parsed)
+                result[wf_run_id] = existing
+        return result
+
     def handle_trigger_metadata(self, tenant_id: str, meta_val: str | None) -> dict[str, Any]:
         metadata: dict[str, Any] | None = self._safe_json_loads(meta_val)
         if not metadata:
diff --git a/api/services/workflow_draft_variable_service.py b/api/services/workflow_draft_variable_service.py
index 2cc6e21574..fae5dea3cb 100644
--- a/api/services/workflow_draft_variable_service.py
+++ b/api/services/workflow_draft_variable_service.py
@@ -1,7 +1,7 @@
 import dataclasses
 import json
 import logging
-from collections.abc import Mapping, Sequence
+from collections.abc import Mapping, Sequence, Set
 from concurrent.futures import ThreadPoolExecutor
 from datetime import datetime
 from enum import StrEnum
@@ -271,12 +271,20 @@ class WorkflowDraftVariableService:
         )
 
     def list_variables_without_values(
-        self, app_id: str, page: int, limit: int, user_id: str
+        self,
+        app_id: str,
+        page: int,
+        limit: int,
+        user_id: str,
+        *,
+        exclude_node_ids: Set[str] | None = None,
     ) -> WorkflowDraftVariableList:
         criteria = [
             WorkflowDraftVariable.app_id == app_id,
             WorkflowDraftVariable.user_id == user_id,
         ]
+        if exclude_node_ids:
+            criteria.append(WorkflowDraftVariable.node_id.notin_(list(exclude_node_ids)))
         total = None
         base_stmt = select(WorkflowDraftVariable).where(*criteria)
         if page == 1:
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index 0e1864ce9a..76cf4dc687 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -5,7 +5,7 @@ import uuid
 from collections.abc import Callable, Generator, Mapping, Sequence
 from typing import Any, cast
 
-from graphon.entities import WorkflowNodeExecution
+from graphon.entities import GraphInitParams, WorkflowNodeExecution
 from graphon.entities.graph_config import NodeConfigDict
 from graphon.entities.pause_reason import HumanInputRequired
 from graphon.enums import (
@@ -30,7 +30,7 @@ from graphon.variable_loader import load_into_variable_pool
 from graphon.variables import VariableBase
 from graphon.variables.input_entities import VariableEntityType
 from graphon.variables.variables import Variable
-from sqlalchemy import exists, select
+from sqlalchemy import and_, exists, or_, select
 from sqlalchemy.orm import Session, sessionmaker
 
 from configs import dify_config
@@ -42,7 +42,7 @@ from core.entities import PluginCredentialType
 from core.plugin.impl.model_runtime_factory import create_plugin_model_assembly, create_plugin_provider_manager
 from core.repositories import DifyCoreRepositoryFactory
 from core.repositories.human_input_repository import FormCreateParams, HumanInputFormRepositoryImpl
-from core.trigger.constants import is_trigger_node_type
+from core.trigger.constants import TRIGGER_NODE_TYPES, is_trigger_node_type
 from core.workflow.human_input_compat import (
     DeliveryChannelConfig,
     normalize_human_input_node_data_for_graph,
@@ -65,6 +65,7 @@ from extensions.ext_database import db
 from extensions.ext_storage import storage
 from factories.file_factory import build_from_mapping, build_from_mappings
 from libs.datetime_utils import naive_utc_now
+from libs.helper import escape_like_pattern
 from models import Account
 from models.human_input import HumanInputFormRecipient, RecipientType
 from models.model import App, AppMode
@@ -99,6 +100,15 @@ class WorkflowService:
     Workflow Service
     """
 
+    # Centralized unsupported node types for evaluation workflow publishing.
+    # Keep this set updated when evaluation workflow constraints change.
+    EVALUATION_UNSUPPORTED_NODE_TYPES: frozenset[str] = frozenset(
+        {
+            BuiltinNodeTypes.HUMAN_INPUT,
+            *TRIGGER_NODE_TYPES,
+        }
+    )
+
     def __init__(self, session_maker: sessionmaker | None = None):
         """Initialize WorkflowService with repository dependencies."""
         if session_maker is None:
@@ -237,6 +247,59 @@ class WorkflowService:
 
         return workflows, has_more
 
+    def list_published_evaluation_workflows(
+        self,
+        *,
+        session: Session,
+        tenant_id: str,
+        page: int,
+        limit: int,
+        user_id: str | None,
+        named_only: bool = False,
+        keyword: str | None = None,
+    ) -> tuple[Sequence[Workflow], bool]:
+        """
+        List published evaluation-type workflows for a tenant (cross-app), excluding draft rows.
+
+        When ``keyword`` is non-empty, match workflows whose marked name or parent app name contains
+        the substring (case-insensitive, LIKE wildcards escaped).
+        """
+        stmt = select(Workflow).where(
+            Workflow.tenant_id == tenant_id,
+            Workflow.type == WorkflowType.EVALUATION,
+            Workflow.version != Workflow.VERSION_DRAFT,
+        )
+
+        if user_id:
+            stmt = stmt.where(Workflow.created_by == user_id)
+
+        if named_only:
+            stmt = stmt.where(Workflow.marked_name != "")
+
+        keyword_stripped = keyword.strip() if keyword else ""
+        if keyword_stripped:
+            escaped = escape_like_pattern(keyword_stripped)
+            pattern = f"%{escaped}%"
+            stmt = stmt.join(
+                App,
+                and_(Workflow.app_id == App.id, App.tenant_id == tenant_id),
+            ).where(
+                or_(
+                    Workflow.marked_name.ilike(pattern, escape="\\"),
+                    App.name.ilike(pattern, escape="\\"),
+                )
+            )
+
+        stmt = stmt.order_by(Workflow.created_at.desc()).limit(limit + 1).offset((page - 1) * limit)
+
+        workflows = session.scalars(stmt).all()
+
+        has_more = len(workflows) > limit
+        if has_more:
+            workflows = workflows[:-1]
+
+        return workflows, has_more
+
     def sync_draft_workflow(
         self,
         *,
@@ -400,6 +463,127 @@ class WorkflowService:
         # return new workflow
         return workflow
 
+    def publish_evaluation_workflow(
+        self,
+        *,
+        session: Session,
+        app_model: App,
+        account: Account,
+        marked_name: str = "",
+        marked_comment: str = "",
+    ) -> Workflow:
+        """Publish draft workflow as an evaluation workflow version.
+
+        Compared to standard publish:
+        - force published workflow type to ``evaluation``;
+        - reject graphs containing trigger or human-input nodes.
+        """
+        draft_workflow_stmt = select(Workflow).where(
+            Workflow.tenant_id == app_model.tenant_id,
+            Workflow.app_id == app_model.id,
+            Workflow.version == Workflow.VERSION_DRAFT,
+        )
+        draft_workflow = session.scalar(draft_workflow_stmt)
+        if not draft_workflow:
+            raise ValueError("No valid workflow found.")
+
+        # Validate credentials before publishing, for credential policy check
+        from services.feature_service import FeatureService
+
+        if FeatureService.get_system_features().plugin_manager.enabled:
+            self._validate_workflow_credentials(draft_workflow)
+
+        # validate graph structure
+        self.validate_graph_structure(graph=draft_workflow.graph_dict)
+        self._validate_evaluation_workflow_nodes(draft_workflow)
+
+        workflow = Workflow.new(
+            tenant_id=app_model.tenant_id,
+            app_id=app_model.id,
+            type=WorkflowType.EVALUATION.value,
+            version=Workflow.version_from_datetime(naive_utc_now()),
+            graph=draft_workflow.graph,
+            created_by=account.id,
+            environment_variables=draft_workflow.environment_variables,
+            conversation_variables=draft_workflow.conversation_variables,
+            marked_name=marked_name,
+            marked_comment=marked_comment,
+            rag_pipeline_variables=draft_workflow.rag_pipeline_variables,
+            features=draft_workflow.features,
+        )
+
+        session.add(workflow)
+
+        # trigger app workflow events
+        app_published_workflow_was_updated.send(app_model, published_workflow=workflow)
+
+        return workflow
+
+    def convert_published_workflow_type(
+        self,
+        *,
+        session: Session,
+        app_model: App,
+        target_type: WorkflowType,
+        account: Account,
+    ) -> Workflow:
+        """
+        Convert a published workflow type in-place.
+
+        This endpoint only supports conversion between standard workflow and evaluation workflow.
+        """
+        if target_type not in {WorkflowType.WORKFLOW, WorkflowType.EVALUATION}:
+            raise ValueError("target_type must be either 'workflow' or 'evaluation'")
+
+        if not app_model.workflow_id:
+            raise WorkflowNotFoundError("Published workflow not found")
+
+        stmt = select(Workflow).where(
+            Workflow.tenant_id == app_model.tenant_id,
+            Workflow.app_id == app_model.id,
+            Workflow.id == app_model.workflow_id,
+        )
+        workflow = session.scalar(stmt)
+        if not workflow:
+            raise WorkflowNotFoundError("Published workflow not found")
+
+        if workflow.version == Workflow.VERSION_DRAFT:
+            raise IsDraftWorkflowError("Current effective workflow cannot be a draft version.")
+
+        if workflow.type == target_type:
+            return workflow
+
+        if target_type == WorkflowType.EVALUATION:
+            self._validate_evaluation_workflow_nodes(workflow)
+
+        workflow.type = target_type
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        app_published_workflow_was_updated.send(app_model, published_workflow=workflow)
+
+        return workflow
+
+    @staticmethod
+    def _validate_evaluation_workflow_nodes(workflow: Workflow) -> None:
+        """Ensure evaluation workflows do not contain unsupported node types."""
+        disallowed_nodes: list[tuple[str, str]] = []
+        for node_id, node_data in workflow.walk_nodes():
+            node_type = node_data.get("type")
+            if not isinstance(node_type, str):
+                continue
+            if node_type in WorkflowService.EVALUATION_UNSUPPORTED_NODE_TYPES:
+                disallowed_nodes.append((node_id, node_type))
+
+        if not disallowed_nodes:
+            return
+
+        formatted_nodes = ", ".join(f"{node_id}:{node_type}" for node_id, node_type in disallowed_nodes)
+        raise ValueError(
+            "Evaluation workflow cannot contain trigger or human-input nodes. "
+            f"Found disallowed nodes: {formatted_nodes}"
+        )
+
     def _validate_workflow_credentials(self, workflow: Workflow) -> None:
         """
         Validate all credentials in workflow nodes before publishing.
@@ -1550,8 +1734,8 @@ def _setup_variable_pool(
             "workflow_execution_id": str(uuid.uuid4()),
         }
 
-        # Only add chatflow-specific variables for non-workflow types.
-        if workflow.type != WorkflowType.WORKFLOW:
+        # Only add chatflow-specific variables for chat-like workflow types.
+        if workflow.type not in {WorkflowType.WORKFLOW, WorkflowType.EVALUATION}:
             system_variable_values.update(
                 {
                     "query": query,
diff --git a/api/tasks/evaluation_task.py b/api/tasks/evaluation_task.py
new file mode 100644
index 0000000000..4e3f7acb2e
--- /dev/null
+++ b/api/tasks/evaluation_task.py
@@ -0,0 +1,541 @@
+import io
+import json
+import logging
+from typing import Any
+
+from celery import shared_task
+from openpyxl import Workbook
+from openpyxl.styles import Alignment, Border, Font, PatternFill, Side
+from openpyxl.utils import get_column_letter
+
+from configs import dify_config
+from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
+from core.evaluation.entities.evaluation_entity import (
+    EvaluationCategory,
+    EvaluationDatasetInput,
+    EvaluationItemResult,
+    EvaluationRunData,
+    NodeInfo,
+)
+from core.evaluation.entities.judgment_entity import JudgmentConfig
+from core.evaluation.evaluation_manager import EvaluationManager
+from core.evaluation.judgment.processor import JudgmentProcessor
+from core.evaluation.runners.agent_evaluation_runner import AgentEvaluationRunner
+from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
+from core.evaluation.runners.llm_evaluation_runner import LLMEvaluationRunner
+from core.evaluation.runners.retrieval_evaluation_runner import RetrievalEvaluationRunner
+from core.evaluation.runners.snippet_evaluation_runner import SnippetEvaluationRunner
+from core.evaluation.runners.workflow_evaluation_runner import WorkflowEvaluationRunner
+from extensions.ext_database import db
+from graphon.node_events import NodeRunResult
+from libs.datetime_utils import naive_utc_now
+from models.enums import CreatorUserRole
+from models.evaluation import EvaluationRun, EvaluationRunItem, EvaluationRunStatus
+from models.model import UploadFile
+from services.evaluation_service import EvaluationService
+
+logger = logging.getLogger(__name__)
+
+
+@shared_task(queue="evaluation")
+def run_evaluation(run_data_dict: dict[str, Any]) -> None:
+    """Celery task for running evaluations asynchronously.
+
+    Workflow:
+    1. Deserialize EvaluationRunData
+    2. Execute target and collect node results
+    3. Evaluate metrics via runners (one per metric-node pair)
+    4. Merge results per test-data row (1 item = 1 EvaluationRunItem)
+    5. Apply judgment conditions
+    6. Persist results + generate result XLSX
+    7. Update EvaluationRun status to COMPLETED
+    """
+    run_data = EvaluationRunData.model_validate(run_data_dict)
+
+    with db.engine.connect() as connection:
+        from sqlalchemy.orm import Session
+
+        session = Session(bind=connection)
+
+        try:
+            _execute_evaluation(session, run_data)
+        except Exception as e:
+            logger.exception("Evaluation run %s failed", run_data.evaluation_run_id)
+            _mark_run_failed(session, run_data.evaluation_run_id, str(e))
+        finally:
+            session.close()
+
+
+def _execute_evaluation(session: Any, run_data: EvaluationRunData) -> None:
+    """Core evaluation execution logic."""
+    evaluation_run = session.query(EvaluationRun).filter_by(id=run_data.evaluation_run_id).first()
+    if not evaluation_run:
+        logger.error("EvaluationRun %s not found", run_data.evaluation_run_id)
+        return
+
+    if evaluation_run.status == EvaluationRunStatus.CANCELLED:
+        logger.info("EvaluationRun %s was cancelled", run_data.evaluation_run_id)
+        return
+
+    evaluation_instance = EvaluationManager.get_evaluation_instance()
+    if evaluation_instance is None:
+        raise ValueError("Evaluation framework not configured")
+
+    # Mark as running
+    evaluation_run.status = EvaluationRunStatus.RUNNING
+    evaluation_run.started_at = naive_utc_now()
+    session.commit()
+
+    if run_data.target_type == "dataset":
+        results: list[EvaluationItemResult] = _execute_retrieval_test(
+            session=session,
+            evaluation_run=evaluation_run,
+            run_data=run_data,
+            evaluation_instance=evaluation_instance,
+        )
+    else:
+        evaluation_service = EvaluationService()
+        node_run_result_mapping_list, workflow_run_ids = evaluation_service.execute_targets(
+            tenant_id=run_data.tenant_id,
+            target_type=run_data.target_type,
+            target_id=run_data.target_id,
+            input_list=run_data.input_list,
+        )
+
+        workflow_run_id_map = {
+            item.index: wf_run_id
+            for item, wf_run_id in zip(run_data.input_list, workflow_run_ids)
+            if wf_run_id
+        }
+
+        results = _execute_evaluation_runner(
+            session=session,
+            run_data=run_data,
+            evaluation_instance=evaluation_instance,
+            node_run_result_mapping_list=node_run_result_mapping_list,
+            workflow_run_id_map=workflow_run_id_map,
+        )
+
+    # Compute summary metrics
+    metrics_summary = _compute_metrics_summary(results, run_data.judgment_config)
+
+    # Generate result XLSX
+    result_xlsx = _generate_result_xlsx(run_data.input_list, results)
+
+    # Store result file
+    result_file_id = _store_result_file(run_data.tenant_id, run_data.evaluation_run_id, result_xlsx, session)
+
+    # Update run to completed
+    evaluation_run = session.query(EvaluationRun).filter_by(id=run_data.evaluation_run_id).first()
+    if evaluation_run:
+        evaluation_run.status = EvaluationRunStatus.COMPLETED
+        evaluation_run.completed_at = naive_utc_now()
+        evaluation_run.metrics_summary = json.dumps(metrics_summary)
+        if result_file_id:
+            evaluation_run.result_file_id = result_file_id
+        session.commit()
+
+    logger.info("Evaluation run %s completed successfully", run_data.evaluation_run_id)
+
+
+# ---------------------------------------------------------------------------
+# Evaluation orchestration — merge + judgment + persist
+# ---------------------------------------------------------------------------
+
+
+def _execute_evaluation_runner(
+    session: Any,
+    run_data: EvaluationRunData,
+    evaluation_instance: BaseEvaluationInstance,
+    node_run_result_mapping_list: list[dict[str, NodeRunResult]],
+    workflow_run_id_map: dict[int, str] | None = None,
+) -> list[EvaluationItemResult]:
+    """Evaluate all metrics, merge per-item, apply judgment, persist once.
+
+    Ensures 1 test-data row = 1 EvaluationRunItem with all metrics combined.
+    """
+    results_by_index: dict[int, EvaluationItemResult] = {}
+
+    # Phase 1: Default metrics — one batch per (metric, node) pair
+    for default_metric in run_data.default_metrics:
+        for node_info in default_metric.node_info_list:
+            node_run_result_list: list[NodeRunResult] = []
+            item_indices: list[int] = []
+            for i, mapping in enumerate(node_run_result_mapping_list):
+                node_result = mapping.get(node_info.node_id)
+                if node_result is not None:
+                    node_run_result_list.append(node_result)
+                    item_indices.append(i)
+
+            if not node_run_result_list:
+                continue
+
+            runner = _create_runner(EvaluationCategory(node_info.type), evaluation_instance)
+            try:
+                evaluated = runner.evaluate_metrics(
+                    node_run_result_list=node_run_result_list,
+                    default_metric=default_metric,
+                    model_provider=run_data.evaluation_model_provider,
+                    model_name=run_data.evaluation_model,
+                    tenant_id=run_data.tenant_id,
+                )
+            except Exception:
+                logger.exception(
+                    "Failed metrics for %s on node %s", default_metric.metric, node_info.node_id
+                )
+                continue
+
+            _stamp_and_merge(evaluated, item_indices, node_info, results_by_index)
+
+    # Phase 2: Customized metrics
+    if run_data.customized_metrics:
+        try:
+            customized_results = evaluation_instance.evaluate_with_customized_workflow(
+                node_run_result_mapping_list=node_run_result_mapping_list,
+                customized_metrics=run_data.customized_metrics,
+                tenant_id=run_data.tenant_id,
+            )
+            for result in customized_results:
+                _merge_result(results_by_index, result.index, result)
+        except Exception:
+            logger.exception("Failed customized metrics for run %s", run_data.evaluation_run_id)
+
+    results = list(results_by_index.values())
+
+    # Phase 3: Judgment
+    if run_data.judgment_config:
+        results = _apply_judgment(results, run_data.judgment_config)
+
+    # Phase 4: Persist — one EvaluationRunItem per test-data row
+    _persist_results(
+        session, run_data.evaluation_run_id, results, run_data.input_list, workflow_run_id_map
+    )
+
+    return results
+
+
+def _execute_retrieval_test(
+    session: Any,
+    evaluation_run: EvaluationRun,
+    run_data: EvaluationRunData,
+    evaluation_instance: BaseEvaluationInstance,
+) -> list[EvaluationItemResult]:
+    """Execute knowledge base retrieval for all items, then evaluate metrics.
+
+    Unlike the workflow-based path, there are no workflow nodes to traverse.
+    Hit testing is run directly for each dataset item and the results are fed
+    straight into :class:`RetrievalEvaluationRunner`.
+    """
+    node_run_result_list = EvaluationService.execute_retrieval_test_targets(
+        dataset_id=run_data.target_id,
+        account_id=evaluation_run.created_by,
+        input_list=run_data.input_list,
+    )
+
+    results_by_index: dict[int, EvaluationItemResult] = {}
+    runner = RetrievalEvaluationRunner(evaluation_instance)
+
+    for default_metric in run_data.default_metrics:
+        try:
+            evaluated = runner.evaluate_metrics(
+                node_run_result_list=node_run_result_list,
+                default_metric=default_metric,
+                model_provider=run_data.evaluation_model_provider,
+                model_name=run_data.evaluation_model,
+                tenant_id=run_data.tenant_id,
+            )
+            item_indices = list(range(len(node_run_result_list)))
+            _stamp_and_merge(evaluated, item_indices, None, results_by_index)
+        except Exception:
+            logger.exception("Failed retrieval metrics for run %s", run_data.evaluation_run_id)
+
+    results = list(results_by_index.values())
+
+    if run_data.judgment_config:
+        results = _apply_judgment(results, run_data.judgment_config)
+
+    _persist_results(session, run_data.evaluation_run_id, results, run_data.input_list)
+
+    return results
+
+
+# ---------------------------------------------------------------------------
+# Helpers — merge, judgment, persist
+# ---------------------------------------------------------------------------
+
+
+def _stamp_and_merge(
+    evaluated: list[EvaluationItemResult],
+    item_indices: list[int],
+    node_info: NodeInfo | None,
+    results_by_index: dict[int, EvaluationItemResult],
+) -> None:
+    """Attach node_info to each metric and merge into results_by_index."""
+    for result in evaluated:
+        original_index = item_indices[result.index]
+        if node_info is not None:
+            for metric in result.metrics:
+                metric.node_info = node_info
+        _merge_result(results_by_index, original_index, result)
+
+
+def _merge_result(
+    results_by_index: dict[int, EvaluationItemResult],
+    index: int,
+    new_result: EvaluationItemResult,
+) -> None:
+    """Merge new metrics into an existing result for the same index."""
+    existing = results_by_index.get(index)
+    if existing:
+        merged_metrics = existing.metrics + new_result.metrics
+        actual = existing.actual_output or new_result.actual_output
+        results_by_index[index] = existing.model_copy(
+            update={"metrics": merged_metrics, "actual_output": actual}
+        )
+    else:
+        results_by_index[index] = new_result.model_copy(update={"index": index})
+
+
+def _apply_judgment(
+    results: list[EvaluationItemResult],
+    judgment_config: JudgmentConfig,
+) -> list[EvaluationItemResult]:
+    """Evaluate pass/fail judgment conditions on each result's metrics."""
+    judged: list[EvaluationItemResult] = []
+    for result in results:
+        if result.error is not None or not result.metrics:
+            judged.append(result)
+            continue
+        metric_values: dict[tuple[str, str], object] = {
+            (m.node_info.node_id, m.name): m.value for m in result.metrics if m.node_info
+        }
+        judgment_result = JudgmentProcessor.evaluate(metric_values, judgment_config)
+        judged.append(result.model_copy(update={"judgment": judgment_result}))
+    return judged
+
+
+def _persist_results(
+    session: Any,
+    evaluation_run_id: str,
+    results: list[EvaluationItemResult],
+    input_list: list[EvaluationDatasetInput],
+    workflow_run_id_map: dict[int, str] | None = None,
+) -> None:
+    """Persist evaluation results — one EvaluationRunItem per test-data row."""
+    dataset_map = {item.index: item for item in input_list}
+    wf_map = workflow_run_id_map or {}
+
+    for result in results:
+        item_input = dataset_map.get(result.index)
+        run_item = EvaluationRunItem(
+            evaluation_run_id=evaluation_run_id,
+            workflow_run_id=wf_map.get(result.index),
+            item_index=result.index,
+            inputs=json.dumps(item_input.inputs) if item_input else None,
+            expected_output=item_input.expected_output if item_input else None,
+            actual_output=result.actual_output,
+            metrics=json.dumps([m.model_dump() for m in result.metrics]) if result.metrics else None,
+            judgment=json.dumps(result.judgment.model_dump()) if result.judgment else None,
+            metadata_json=json.dumps(result.metadata) if result.metadata else None,
+            error=result.error,
+            overall_score=getattr(result, "overall_score", None),
+        )
+        session.add(run_item)
+
+    session.commit()
+
+
+def _create_runner(
+    category: EvaluationCategory,
+    evaluation_instance: BaseEvaluationInstance,
+) -> BaseEvaluationRunner:
+    """Create the appropriate runner for the evaluation category."""
+    match category:
+        case EvaluationCategory.LLM:
+            return LLMEvaluationRunner(evaluation_instance)
+        case EvaluationCategory.RETRIEVAL | EvaluationCategory.KNOWLEDGE_BASE:
+            return RetrievalEvaluationRunner(evaluation_instance)
+        case EvaluationCategory.AGENT:
+            return AgentEvaluationRunner(evaluation_instance)
+        case EvaluationCategory.WORKFLOW:
+            return WorkflowEvaluationRunner(evaluation_instance)
+        case EvaluationCategory.SNIPPET:
+            return SnippetEvaluationRunner(evaluation_instance)
+        case _:
+            raise ValueError(f"Unknown evaluation category: {category}")
+
+
+# ---------------------------------------------------------------------------
+# Status / summary / XLSX / storage helpers (unchanged logic)
+# ---------------------------------------------------------------------------
+
+
+def _mark_run_failed(session: Any, run_id: str, error: str) -> None:
+    """Mark an evaluation run as failed."""
+    try:
+        evaluation_run = session.query(EvaluationRun).filter_by(id=run_id).first()
+        if evaluation_run:
+            evaluation_run.status = EvaluationRunStatus.FAILED
+            evaluation_run.error = error[:2000]
+            evaluation_run.completed_at = naive_utc_now()
+            session.commit()
+    except Exception:
+        logger.exception("Failed to mark run %s as failed", run_id)
+
+
+def _compute_metrics_summary(
+    results: list[EvaluationItemResult],
+    judgment_config: JudgmentConfig | None,
+) -> dict[str, Any]:
+    """Compute aggregate metric and judgment summaries for an evaluation run."""
+    summary: dict[str, Any] = {}
+
+    if judgment_config is not None and judgment_config.conditions:
+        evaluated_results: list[EvaluationItemResult] = [
+            result for result in results if result.error is None and result.metrics
+        ]
+        passed_items = sum(1 for result in evaluated_results if result.judgment.passed)
+        evaluated_items = len(evaluated_results)
+        summary["_judgment"] = {
+            "enabled": True,
+            "logical_operator": judgment_config.logical_operator,
+            "configured_conditions": len(judgment_config.conditions),
+            "evaluated_items": evaluated_items,
+            "passed_items": passed_items,
+            "failed_items": evaluated_items - passed_items,
+            "pass_rate": passed_items / evaluated_items if evaluated_items else 0.0,
+        }
+
+    return summary
+
+
+def _generate_result_xlsx(
+    input_list: list[EvaluationDatasetInput],
+    results: list[EvaluationItemResult],
+) -> bytes:
+    """Generate result XLSX with input data, actual output, metric scores, and judgment."""
+    wb = Workbook()
+    ws = wb.active
+    if ws is None:
+        ws = wb.create_sheet("Evaluation Results")
+    ws.title = "Evaluation Results"
+
+    header_font = Font(bold=True, color="FFFFFF")
+    header_fill = PatternFill(start_color="4472C4", end_color="4472C4", fill_type="solid")
+    header_alignment = Alignment(horizontal="center", vertical="center")
+    thin_border = Border(
+        left=Side(style="thin"),
+        right=Side(style="thin"),
+        top=Side(style="thin"),
+        bottom=Side(style="thin"),
+    )
+
+    # Collect all metric names
+    all_metric_names: list[str] = []
+    for result in results:
+        for metric in result.metrics:
+            if metric.name not in all_metric_names:
+                all_metric_names.append(metric.name)
+
+    # Collect all input keys
+    input_keys: list[str] = []
+    for item in input_list:
+        for key in item.inputs:
+            if key not in input_keys:
+                input_keys.append(key)
+
+    has_judgment = any(bool(r.judgment.condition_results) for r in results)
+
+    judgment_headers = ["judgment"] if has_judgment else []
+    headers = (
+        ["index"] + input_keys + ["expected_output", "actual_output"] + all_metric_names + judgment_headers + ["error"]
+    )
+
+    for col_idx, header in enumerate(headers, start=1):
+        cell = ws.cell(row=1, column=col_idx, value=header)
+        cell.font = header_font
+        cell.fill = header_fill
+        cell.alignment = header_alignment
+        cell.border = thin_border
+
+    ws.column_dimensions["A"].width = 10
+    for col_idx in range(2, len(headers) + 1):
+        ws.column_dimensions[get_column_letter(col_idx)].width = 25
+
+    result_by_index = {r.index: r for r in results}
+
+    for row_idx, item in enumerate(input_list, start=2):
+        result = result_by_index.get(item.index)
+
+        col = 1
+        ws.cell(row=row_idx, column=col, value=item.index).border = thin_border
+        col += 1
+
+        for key in input_keys:
+            val = item.inputs.get(key, "")
+            ws.cell(row=row_idx, column=col, value=str(val)).border = thin_border
+            col += 1
+
+        ws.cell(row=row_idx, column=col, value=item.expected_output or "").border = thin_border
+        col += 1
+
+        ws.cell(row=row_idx, column=col, value=result.actual_output if result else "").border = thin_border
+        col += 1
+
+        metric_scores = {m.name: m.value for m in result.metrics} if result else {}
+        for metric_name in all_metric_names:
+            score = metric_scores.get(metric_name)
+            ws.cell(row=row_idx, column=col, value=score if score is not None else "").border = thin_border
+            col += 1
+
+        if has_judgment:
+            if result and result.judgment.condition_results:
+                judgment_value = "Pass" if result.judgment.passed else "Fail"
+            else:
+                judgment_value = ""
+            ws.cell(row=row_idx, column=col, value=judgment_value).border = thin_border
+            col += 1
+
+        ws.cell(row=row_idx, column=col, value=result.error if result else "").border = thin_border
+
+    output = io.BytesIO()
+    wb.save(output)
+    output.seek(0)
+    return output.getvalue()
+
+
+def _store_result_file(
+    tenant_id: str,
+    run_id: str,
+    xlsx_content: bytes,
+    session: Any,
+) -> str | None:
+    """Store result XLSX file and return the UploadFile ID."""
+    try:
+        from extensions.ext_storage import storage
+        from libs.uuid_utils import uuidv7
+
+        filename = f"evaluation-result-{run_id[:8]}.xlsx"
+        storage_key = f"evaluation_results/{tenant_id}/{str(uuidv7())}.xlsx"
+
+        storage.save(storage_key, xlsx_content)
+
+        upload_file: UploadFile = UploadFile(
+            tenant_id=tenant_id,
+            storage_type=dify_config.STORAGE_TYPE,
+            key=storage_key,
+            name=filename,
+            size=len(xlsx_content),
+            extension="xlsx",
+            mime_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            created_by_role=CreatorUserRole.ACCOUNT,
+            created_by="system",
+            created_at=naive_utc_now(),
+            used=False,
+        )
+        session.add(upload_file)
+        session.commit()
+        return upload_file.id
+    except Exception:
+        logger.exception("Failed to store result file for run %s", run_id)
+        return None
diff --git a/api/tasks/trigger_processing_tasks.py b/api/tasks/trigger_processing_tasks.py
index 56626e372e..b9f382eccf 100644
--- a/api/tasks/trigger_processing_tasks.py
+++ b/api/tasks/trigger_processing_tasks.py
@@ -28,7 +28,7 @@ from core.trigger.entities.entities import TriggerProviderEntity
 from core.trigger.provider import PluginTriggerProviderController
 from core.trigger.trigger_manager import TriggerManager
 from core.workflow.nodes.trigger_plugin.entities import TriggerEventNodeData
-from enums.quota_type import QuotaType, unlimited
+from enums.quota_type import QuotaType
 from models.enums import (
     AppTriggerType,
     CreatorUserRole,
@@ -42,6 +42,7 @@ from models.workflow import Workflow, WorkflowAppLog, WorkflowAppLogCreatedFrom,
 from services.async_workflow_service import AsyncWorkflowService
 from services.end_user_service import EndUserService
 from services.errors.app import QuotaExceededError
+from services.quota_service import QuotaService, unlimited
 from services.trigger.app_trigger_service import AppTriggerService
 from services.trigger.trigger_provider_service import TriggerProviderService
 from services.trigger.trigger_request_service import TriggerHttpRequestCachingService
@@ -298,10 +299,10 @@ def dispatch_triggered_workflow(
                 icon_dark_filename=trigger_entity.identity.icon_dark or "",
             )
 
-            # consume quota before invoking trigger
+            # reserve quota before invoking trigger
             quota_charge = unlimited()
             try:
-                quota_charge = QuotaType.TRIGGER.consume(subscription.tenant_id)
+                quota_charge = QuotaService.reserve(QuotaType.TRIGGER, subscription.tenant_id)
             except QuotaExceededError:
                 AppTriggerService.mark_tenant_triggers_rate_limited(subscription.tenant_id)
                 logger.info(
@@ -387,6 +388,7 @@ def dispatch_triggered_workflow(
                     raise ValueError(f"End user not found for app {plugin_trigger.app_id}")
 
                 AsyncWorkflowService.trigger_workflow_async(session=session, user=end_user, trigger_data=trigger_data)
+                quota_charge.commit()
                 dispatched_count += 1
                 logger.info(
                     "Triggered workflow for app %s with trigger event %s",
diff --git a/api/tasks/workflow_schedule_tasks.py b/api/tasks/workflow_schedule_tasks.py
index 8c64d3ab27..dfb2fb3391 100644
--- a/api/tasks/workflow_schedule_tasks.py
+++ b/api/tasks/workflow_schedule_tasks.py
@@ -8,10 +8,11 @@ from core.workflow.nodes.trigger_schedule.exc import (
     ScheduleNotFoundError,
     TenantOwnerNotFoundError,
 )
-from enums.quota_type import QuotaType, unlimited
+from enums.quota_type import QuotaType
 from models.trigger import WorkflowSchedulePlan
 from services.async_workflow_service import AsyncWorkflowService
 from services.errors.app import QuotaExceededError
+from services.quota_service import QuotaService, unlimited
 from services.trigger.app_trigger_service import AppTriggerService
 from services.trigger.schedule_service import ScheduleService
 from services.workflow.entities import ScheduleTriggerData
@@ -43,7 +44,7 @@ def run_schedule_trigger(schedule_id: str) -> None:
 
         quota_charge = unlimited()
         try:
-            quota_charge = QuotaType.TRIGGER.consume(schedule.tenant_id)
+            quota_charge = QuotaService.reserve(QuotaType.TRIGGER, schedule.tenant_id)
         except QuotaExceededError:
             AppTriggerService.mark_tenant_triggers_rate_limited(schedule.tenant_id)
             logger.info("Tenant %s rate limited, skipping schedule trigger %s", schedule.tenant_id, schedule_id)
@@ -61,6 +62,7 @@ def run_schedule_trigger(schedule_id: str) -> None:
                     tenant_id=schedule.tenant_id,
                 ),
             )
+            quota_charge.commit()
             logger.info("Schedule %s triggered workflow: %s", schedule_id, response.workflow_trigger_log_id)
         except Exception as e:
             quota_charge.refund()
diff --git a/api/tests/test_containers_integration_tests/services/test_app_generate_service.py b/api/tests/test_containers_integration_tests/services/test_app_generate_service.py
index 5b1a4790f5..3229693fd4 100644
--- a/api/tests/test_containers_integration_tests/services/test_app_generate_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_app_generate_service.py
@@ -36,12 +36,19 @@ class TestAppGenerateService:
             ) as mock_message_based_generator,
             patch("services.account_service.FeatureService", autospec=True) as mock_account_feature_service,
             patch("services.app_generate_service.dify_config", autospec=True) as mock_dify_config,
+            patch("services.quota_service.dify_config", autospec=True) as mock_quota_dify_config,
             patch("configs.dify_config", autospec=True) as mock_global_dify_config,
         ):
             # Setup default mock returns for billing service
-            mock_billing_service.update_tenant_feature_plan_usage.return_value = {
-                "result": "success",
-                "history_id": "test_history_id",
+            mock_billing_service.quota_reserve.return_value = {
+                "reservation_id": "test-reservation-id",
+                "available": 100,
+                "reserved": 1,
+            }
+            mock_billing_service.quota_commit.return_value = {
+                "available": 99,
+                "reserved": 0,
+                "refunded": 0,
             }
 
             # Setup default mock returns for workflow service
@@ -101,6 +108,8 @@ class TestAppGenerateService:
             mock_dify_config.APP_DEFAULT_ACTIVE_REQUESTS = 100
             mock_dify_config.APP_DAILY_RATE_LIMIT = 1000
 
+            mock_quota_dify_config.BILLING_ENABLED = False
+
             mock_global_dify_config.BILLING_ENABLED = False
             mock_global_dify_config.APP_MAX_ACTIVE_REQUESTS = 100
             mock_global_dify_config.APP_DAILY_RATE_LIMIT = 1000
@@ -118,6 +127,7 @@ class TestAppGenerateService:
                 "message_based_generator": mock_message_based_generator,
                 "account_feature_service": mock_account_feature_service,
                 "dify_config": mock_dify_config,
+                "quota_dify_config": mock_quota_dify_config,
                 "global_dify_config": mock_global_dify_config,
             }
 
@@ -465,6 +475,7 @@ class TestAppGenerateService:
 
         # Set BILLING_ENABLED to True for this test
         mock_external_service_dependencies["dify_config"].BILLING_ENABLED = True
+        mock_external_service_dependencies["quota_dify_config"].BILLING_ENABLED = True
         mock_external_service_dependencies["global_dify_config"].BILLING_ENABLED = True
 
         # Setup test arguments
@@ -478,8 +489,10 @@ class TestAppGenerateService:
         # Verify the result
         assert result == ["test_response"]
 
-        # Verify billing service was called to consume quota
-        mock_external_service_dependencies["billing_service"].update_tenant_feature_plan_usage.assert_called_once()
+        # Verify billing two-phase quota (reserve + commit)
+        billing = mock_external_service_dependencies["billing_service"]
+        billing.quota_reserve.assert_called_once()
+        billing.quota_commit.assert_called_once()
 
     def test_generate_with_invalid_app_mode(
         self, db_session_with_containers: Session, mock_external_service_dependencies
diff --git a/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py b/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
index d725fb990a..7c4553d4a0 100644
--- a/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
+++ b/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
@@ -605,9 +605,9 @@ def test_schedule_trigger_creates_trigger_log(
     )
 
     # Mock quota to avoid rate limiting
-    from enums import quota_type
+    from services import quota_service
 
-    monkeypatch.setattr(quota_type.QuotaType.TRIGGER, "consume", lambda _tenant_id: quota_type.unlimited())
+    monkeypatch.setattr(quota_service.QuotaService, "reserve", lambda *_args, **_kwargs: quota_service.unlimited())
 
     # Execute schedule trigger
     workflow_schedule_tasks.run_schedule_trigger(plan.id)
diff --git a/api/tests/unit_tests/core/evaluation/judgment/test_processor.py b/api/tests/unit_tests/core/evaluation/judgment/test_processor.py
new file mode 100644
index 0000000000..6f4cdc6708
--- /dev/null
+++ b/api/tests/unit_tests/core/evaluation/judgment/test_processor.py
@@ -0,0 +1,145 @@
+"""Unit tests for metric-based judgment evaluation."""
+
+from core.evaluation.entities.judgment_entity import JudgmentCondition, JudgmentConfig
+from core.evaluation.judgment.processor import JudgmentProcessor
+
+
+def test_evaluate_uses_and_conditions_against_metric_values() -> None:
+    """All conditions must pass when the logical operator is ``and``."""
+    config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_node_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            ),
+            JudgmentCondition(
+                variable_selector=["llm_node_1", "answer_relevancy"],
+                comparison_operator="≥",
+                value="0.7",
+            ),
+        ],
+    )
+
+    result = JudgmentProcessor.evaluate(
+        {
+            ("llm_node_1", "faithfulness"): 0.9,
+            ("llm_node_1", "answer_relevancy"): 0.75,
+        },
+        config,
+    )
+
+    assert result.passed is True
+    assert len(result.condition_results) == 2
+    assert all(condition_result.passed for condition_result in result.condition_results)
+
+
+def test_evaluate_sets_passed_false_when_any_and_condition_fails() -> None:
+    """A failed metric comparison should make the overall judgment fail."""
+    config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_node_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            ),
+            JudgmentCondition(
+                variable_selector=["llm_node_1", "answer_relevancy"],
+                comparison_operator="≥",
+                value="0.7",
+            ),
+        ],
+    )
+
+    result = JudgmentProcessor.evaluate(
+        {
+            ("llm_node_1", "faithfulness"): 0.9,
+            ("llm_node_1", "answer_relevancy"): 0.6,
+        },
+        config,
+    )
+
+    assert result.passed is False
+    assert result.condition_results[-1].passed is False
+
+
+def test_evaluate_with_different_nodes_same_metric() -> None:
+    """Conditions can target different nodes even with the same metric name."""
+    config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_node_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            ),
+            JudgmentCondition(
+                variable_selector=["llm_node_2", "faithfulness"],
+                comparison_operator=">",
+                value="0.5",
+            ),
+        ],
+    )
+
+    result = JudgmentProcessor.evaluate(
+        {
+            ("llm_node_1", "faithfulness"): 0.9,
+            ("llm_node_2", "faithfulness"): 0.6,
+        },
+        config,
+    )
+
+    assert result.passed is True
+    assert len(result.condition_results) == 2
+
+
+def test_evaluate_or_operator_passes_when_one_condition_met() -> None:
+    """With ``or`` logical operator, one passing condition should suffice."""
+    config = JudgmentConfig(
+        logical_operator="or",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["node_a", "score"],
+                comparison_operator=">",
+                value="0.9",
+            ),
+            JudgmentCondition(
+                variable_selector=["node_b", "score"],
+                comparison_operator=">",
+                value="0.5",
+            ),
+        ],
+    )
+
+    result = JudgmentProcessor.evaluate(
+        {
+            ("node_a", "score"): 0.3,
+            ("node_b", "score"): 0.8,
+        },
+        config,
+    )
+
+    assert result.passed is True
+
+
+def test_evaluate_string_contains_operator() -> None:
+    """String operators should work correctly via workflow engine delegation."""
+    config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["node_a", "status"],
+                comparison_operator="contains",
+                value="success",
+            ),
+        ],
+    )
+
+    result = JudgmentProcessor.evaluate(
+        {("node_a", "status"): "evaluation_success_done"},
+        config,
+    )
+
+    assert result.passed is True
diff --git a/api/tests/unit_tests/core/evaluation/runners/test_base_evaluation_runner.py b/api/tests/unit_tests/core/evaluation/runners/test_base_evaluation_runner.py
new file mode 100644
index 0000000000..e833331e82
--- /dev/null
+++ b/api/tests/unit_tests/core/evaluation/runners/test_base_evaluation_runner.py
@@ -0,0 +1,78 @@
+"""Tests for judgment application logic (moved from BaseEvaluationRunner to evaluation_task)."""
+
+from core.evaluation.entities.evaluation_entity import EvaluationItemResult, EvaluationMetric, NodeInfo
+from core.evaluation.entities.judgment_entity import JudgmentCondition, JudgmentConfig
+from tasks.evaluation_task import _apply_judgment
+
+_NODE_INFO = NodeInfo(node_id="llm_1", type="llm", title="LLM Node")
+
+
+def test_apply_judgment_marks_passing_result() -> None:
+    """Items whose metrics satisfy the judgment conditions should be marked as passed."""
+    results = [
+        EvaluationItemResult(
+            index=0,
+            actual_output="result",
+            metrics=[EvaluationMetric(name="faithfulness", value=0.91, node_info=_NODE_INFO)],
+        )
+    ]
+    judgment_config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            )
+        ],
+    )
+
+    judged = _apply_judgment(results, judgment_config)
+
+    assert judged[0].judgment.passed is True
+
+
+def test_apply_judgment_marks_failing_result() -> None:
+    """Items whose metrics do NOT satisfy the conditions should be marked as failed."""
+    results = [
+        EvaluationItemResult(
+            index=0,
+            metrics=[EvaluationMetric(name="faithfulness", value=0.5, node_info=_NODE_INFO)],
+        )
+    ]
+    judgment_config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            )
+        ],
+    )
+
+    judged = _apply_judgment(results, judgment_config)
+
+    assert judged[0].judgment.passed is False
+
+
+def test_apply_judgment_skips_errored_items() -> None:
+    """Items with errors should be passed through without judgment evaluation."""
+    results = [
+        EvaluationItemResult(index=0, error="timeout"),
+    ]
+    judgment_config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            )
+        ],
+    )
+
+    judged = _apply_judgment(results, judgment_config)
+
+    assert judged[0].error == "timeout"
+    assert judged[0].judgment.passed is False
diff --git a/api/tests/unit_tests/enums/__init__.py b/api/tests/unit_tests/enums/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/enums/test_quota_type.py b/api/tests/unit_tests/enums/test_quota_type.py
new file mode 100644
index 0000000000..f256ff3b4e
--- /dev/null
+++ b/api/tests/unit_tests/enums/test_quota_type.py
@@ -0,0 +1,349 @@
+"""Unit tests for QuotaType, QuotaService, and QuotaCharge."""
+
+from unittest.mock import patch
+
+import pytest
+
+from enums.quota_type import QuotaType
+from services.quota_service import QuotaCharge, QuotaService, unlimited
+
+
+class TestQuotaType:
+    def test_billing_key_trigger(self):
+        assert QuotaType.TRIGGER.billing_key == "trigger_event"
+
+    def test_billing_key_workflow(self):
+        assert QuotaType.WORKFLOW.billing_key == "api_rate_limit"
+
+    def test_billing_key_unlimited_raises(self):
+        with pytest.raises(ValueError, match="Invalid quota type"):
+            _ = QuotaType.UNLIMITED.billing_key
+
+
+class TestQuotaService:
+    def test_reserve_billing_disabled(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService"),
+        ):
+            mock_cfg.BILLING_ENABLED = False
+            charge = QuotaService.reserve(QuotaType.TRIGGER, "t1")
+            assert charge.success is True
+            assert charge.charge_id is None
+
+    def test_reserve_zero_amount_raises(self):
+        with patch("services.quota_service.dify_config") as mock_cfg:
+            mock_cfg.BILLING_ENABLED = True
+            with pytest.raises(ValueError, match="greater than 0"):
+                QuotaService.reserve(QuotaType.TRIGGER, "t1", amount=0)
+
+    def test_reserve_success(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_reserve.return_value = {"reservation_id": "rid-1", "available": 99}
+
+            charge = QuotaService.reserve(QuotaType.TRIGGER, "t1", amount=1)
+
+            assert charge.success is True
+            assert charge.charge_id == "rid-1"
+            assert charge._tenant_id == "t1"
+            assert charge._feature_key == "trigger_event"
+            assert charge._amount == 1
+            mock_bs.quota_reserve.assert_called_once()
+
+    def test_reserve_no_reservation_id_raises(self):
+        from services.errors.app import QuotaExceededError
+
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_reserve.return_value = {}
+
+            with pytest.raises(QuotaExceededError):
+                QuotaService.reserve(QuotaType.TRIGGER, "t1")
+
+    def test_reserve_quota_exceeded_propagates(self):
+        from services.errors.app import QuotaExceededError
+
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_reserve.side_effect = QuotaExceededError(feature="trigger", tenant_id="t1", required=1)
+
+            with pytest.raises(QuotaExceededError):
+                QuotaService.reserve(QuotaType.TRIGGER, "t1")
+
+    def test_reserve_api_exception_returns_unlimited(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_reserve.side_effect = RuntimeError("network")
+
+            charge = QuotaService.reserve(QuotaType.TRIGGER, "t1")
+            assert charge.success is True
+            assert charge.charge_id is None
+
+    def test_consume_calls_reserve_and_commit(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_reserve.return_value = {"reservation_id": "rid-c"}
+            mock_bs.quota_commit.return_value = {}
+
+            charge = QuotaService.consume(QuotaType.TRIGGER, "t1")
+            assert charge.success is True
+            mock_bs.quota_commit.assert_called_once()
+
+    def test_check_billing_disabled(self):
+        with patch("services.quota_service.dify_config") as mock_cfg:
+            mock_cfg.BILLING_ENABLED = False
+            assert QuotaService.check(QuotaType.TRIGGER, "t1") is True
+
+    def test_check_zero_amount_raises(self):
+        with patch("services.quota_service.dify_config") as mock_cfg:
+            mock_cfg.BILLING_ENABLED = True
+            with pytest.raises(ValueError, match="greater than 0"):
+                QuotaService.check(QuotaType.TRIGGER, "t1", amount=0)
+
+    def test_check_sufficient_quota(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch.object(QuotaService, "get_remaining", return_value=100),
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            assert QuotaService.check(QuotaType.TRIGGER, "t1", amount=50) is True
+
+    def test_check_insufficient_quota(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch.object(QuotaService, "get_remaining", return_value=5),
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            assert QuotaService.check(QuotaType.TRIGGER, "t1", amount=10) is False
+
+    def test_check_unlimited_quota(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch.object(QuotaService, "get_remaining", return_value=-1),
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            assert QuotaService.check(QuotaType.TRIGGER, "t1", amount=999) is True
+
+    def test_check_exception_returns_true(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch.object(QuotaService, "get_remaining", side_effect=RuntimeError),
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            assert QuotaService.check(QuotaType.TRIGGER, "t1") is True
+
+    def test_release_billing_disabled(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = False
+            QuotaService.release(QuotaType.TRIGGER, "rid-1", "t1", "trigger_event")
+            mock_bs.quota_release.assert_not_called()
+
+    def test_release_empty_reservation(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            QuotaService.release(QuotaType.TRIGGER, "", "t1", "trigger_event")
+            mock_bs.quota_release.assert_not_called()
+
+    def test_release_success(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_release.return_value = {}
+            QuotaService.release(QuotaType.TRIGGER, "rid-1", "t1", "trigger_event")
+            mock_bs.quota_release.assert_called_once_with(
+                tenant_id="t1", feature_key="trigger_event", reservation_id="rid-1"
+            )
+
+    def test_release_exception_swallowed(self):
+        with (
+            patch("services.quota_service.dify_config") as mock_cfg,
+            patch("services.billing_service.BillingService") as mock_bs,
+        ):
+            mock_cfg.BILLING_ENABLED = True
+            mock_bs.quota_release.side_effect = RuntimeError("fail")
+            QuotaService.release(QuotaType.TRIGGER, "rid-1", "t1", "trigger_event")
+
+    def test_get_remaining_normal(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = {"trigger_event": {"limit": 100, "usage": 30}}
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == 70
+
+    def test_get_remaining_unlimited(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = {"trigger_event": {"limit": -1, "usage": 0}}
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == -1
+
+    def test_get_remaining_over_limit_returns_zero(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = {"trigger_event": {"limit": 10, "usage": 15}}
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == 0
+
+    def test_get_remaining_exception_returns_neg1(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.side_effect = RuntimeError
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == -1
+
+    def test_get_remaining_empty_response(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = {}
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == 0
+
+    def test_get_remaining_non_dict_response(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = "invalid"
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == 0
+
+    def test_get_remaining_feature_not_in_response(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = {"other_feature": {"limit": 100, "usage": 0}}
+            remaining = QuotaService.get_remaining(QuotaType.TRIGGER, "t1")
+            assert remaining == 0
+
+    def test_get_remaining_non_dict_feature_info(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.get_quota_info.return_value = {"trigger_event": "not_a_dict"}
+            assert QuotaService.get_remaining(QuotaType.TRIGGER, "t1") == 0
+
+
+class TestQuotaCharge:
+    def test_commit_success(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.quota_commit.return_value = {}
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id="t1",
+                _feature_key="trigger_event",
+                _amount=1,
+            )
+            charge.commit()
+            mock_bs.quota_commit.assert_called_once_with(
+                tenant_id="t1",
+                feature_key="trigger_event",
+                reservation_id="rid-1",
+                actual_amount=1,
+            )
+            assert charge._committed is True
+
+    def test_commit_with_actual_amount(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.quota_commit.return_value = {}
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id="t1",
+                _feature_key="trigger_event",
+                _amount=10,
+            )
+            charge.commit(actual_amount=5)
+            call_kwargs = mock_bs.quota_commit.call_args[1]
+            assert call_kwargs["actual_amount"] == 5
+
+    def test_commit_idempotent(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.quota_commit.return_value = {}
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id="t1",
+                _feature_key="trigger_event",
+                _amount=1,
+            )
+            charge.commit()
+            charge.commit()
+            assert mock_bs.quota_commit.call_count == 1
+
+    def test_commit_no_charge_id_noop(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            charge = QuotaCharge(success=True, charge_id=None, _quota_type=QuotaType.TRIGGER)
+            charge.commit()
+            mock_bs.quota_commit.assert_not_called()
+
+    def test_commit_no_tenant_id_noop(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id=None,
+                _feature_key="trigger_event",
+            )
+            charge.commit()
+            mock_bs.quota_commit.assert_not_called()
+
+    def test_commit_exception_swallowed(self):
+        with patch("services.billing_service.BillingService") as mock_bs:
+            mock_bs.quota_commit.side_effect = RuntimeError("fail")
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id="t1",
+                _feature_key="trigger_event",
+                _amount=1,
+            )
+            charge.commit()
+
+    def test_refund_success(self):
+        with patch.object(QuotaService, "release") as mock_rel:
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id="t1",
+                _feature_key="trigger_event",
+            )
+            charge.refund()
+            mock_rel.assert_called_once_with(QuotaType.TRIGGER, "rid-1", "t1", "trigger_event")
+
+    def test_refund_no_charge_id_noop(self):
+        with patch.object(QuotaService, "release") as mock_rel:
+            charge = QuotaCharge(success=True, charge_id=None, _quota_type=QuotaType.TRIGGER)
+            charge.refund()
+            mock_rel.assert_not_called()
+
+    def test_refund_no_tenant_id_noop(self):
+        with patch.object(QuotaService, "release") as mock_rel:
+            charge = QuotaCharge(
+                success=True,
+                charge_id="rid-1",
+                _quota_type=QuotaType.TRIGGER,
+                _tenant_id=None,
+            )
+            charge.refund()
+            mock_rel.assert_not_called()
+
+
+class TestUnlimited:
+    def test_unlimited_returns_success_with_no_charge_id(self):
+        charge = unlimited()
+        assert charge.success is True
+        assert charge.charge_id is None
+        assert charge._quota_type == QuotaType.UNLIMITED
diff --git a/api/tests/unit_tests/services/test_app_generate_service.py b/api/tests/unit_tests/services/test_app_generate_service.py
index c2b430c551..c88daf6b1e 100644
--- a/api/tests/unit_tests/services/test_app_generate_service.py
+++ b/api/tests/unit_tests/services/test_app_generate_service.py
@@ -23,6 +23,7 @@ import pytest
 
 import services.app_generate_service as ags_module
 from core.app.entities.app_invoke_entities import InvokeFrom
+from enums.quota_type import QuotaType
 from models.model import AppMode
 from services.app_generate_service import AppGenerateService
 from services.errors.app import WorkflowIdFormatError, WorkflowNotFoundError
@@ -447,8 +448,8 @@ class TestGenerateBilling:
     def test_billing_enabled_consumes_quota(self, mocker, monkeypatch):
         monkeypatch.setattr(ags_module.dify_config, "BILLING_ENABLED", True)
         quota_charge = MagicMock()
-        consume_mock = mocker.patch(
-            "services.app_generate_service.QuotaType.WORKFLOW.consume",
+        reserve_mock = mocker.patch(
+            "services.app_generate_service.QuotaService.reserve",
             return_value=quota_charge,
         )
         mocker.patch(
@@ -467,7 +468,8 @@ class TestGenerateBilling:
             invoke_from=InvokeFrom.SERVICE_API,
             streaming=False,
         )
-        consume_mock.assert_called_once_with("tenant-id")
+        reserve_mock.assert_called_once_with(QuotaType.WORKFLOW, "tenant-id")
+        quota_charge.commit.assert_called_once()
 
     def test_billing_quota_exceeded_raises_rate_limit_error(self, mocker, monkeypatch):
         from services.errors.app import QuotaExceededError
@@ -475,7 +477,7 @@ class TestGenerateBilling:
 
         monkeypatch.setattr(ags_module.dify_config, "BILLING_ENABLED", True)
         mocker.patch(
-            "services.app_generate_service.QuotaType.WORKFLOW.consume",
+            "services.app_generate_service.QuotaService.reserve",
             side_effect=QuotaExceededError(feature="workflow", tenant_id="t", required=1),
         )
 
@@ -492,7 +494,7 @@ class TestGenerateBilling:
         monkeypatch.setattr(ags_module.dify_config, "BILLING_ENABLED", True)
         quota_charge = MagicMock()
         mocker.patch(
-            "services.app_generate_service.QuotaType.WORKFLOW.consume",
+            "services.app_generate_service.QuotaService.reserve",
             return_value=quota_charge,
         )
         mocker.patch(
diff --git a/api/tests/unit_tests/services/test_async_workflow_service.py b/api/tests/unit_tests/services/test_async_workflow_service.py
index ca6ff9dc63..361e95a557 100644
--- a/api/tests/unit_tests/services/test_async_workflow_service.py
+++ b/api/tests/unit_tests/services/test_async_workflow_service.py
@@ -57,7 +57,7 @@ class TestAsyncWorkflowService:
             - repo: SQLAlchemyWorkflowTriggerLogRepository
             - dispatcher_manager_class: QueueDispatcherManager class
             - dispatcher: dispatcher instance
-            - quota_workflow: QuotaType.WORKFLOW
+            - quota_service: QuotaService mock
             - get_workflow: AsyncWorkflowService._get_workflow method
             - professional_task: execute_workflow_professional
             - team_task: execute_workflow_team
@@ -72,7 +72,12 @@ class TestAsyncWorkflowService:
         mock_repo.create.side_effect = _create_side_effect
 
         mock_dispatcher = MagicMock()
-        quota_workflow = MagicMock()
+        mock_quota_service = MagicMock()
+        mock_get_workflow = MagicMock()
+
+        mock_professional_task = MagicMock()
+        mock_team_task = MagicMock()
+        mock_sandbox_task = MagicMock()
 
         with (
             patch.object(
@@ -88,8 +93,8 @@ class TestAsyncWorkflowService:
             ) as mock_get_workflow,
             patch.object(
                 async_workflow_service_module,
-                "QuotaType",
-                new=SimpleNamespace(WORKFLOW=quota_workflow),
+                "QuotaService",
+                new=mock_quota_service,
             ),
             patch.object(async_workflow_service_module, "execute_workflow_professional") as mock_professional_task,
             patch.object(async_workflow_service_module, "execute_workflow_team") as mock_team_task,
@@ -102,7 +107,7 @@ class TestAsyncWorkflowService:
                 "repo": mock_repo,
                 "dispatcher_manager_class": mock_dispatcher_manager_class,
                 "dispatcher": mock_dispatcher,
-                "quota_workflow": quota_workflow,
+                "quota_service": mock_quota_service,
                 "get_workflow": mock_get_workflow,
                 "professional_task": mock_professional_task,
                 "team_task": mock_team_task,
@@ -141,6 +146,9 @@ class TestAsyncWorkflowService:
         mocks["team_task"].delay.return_value = task_result
         mocks["sandbox_task"].delay.return_value = task_result
 
+        quota_charge_mock = MagicMock()
+        mocks["quota_service"].reserve.return_value = quota_charge_mock
+
         class DummyAccount:
             def __init__(self, user_id: str):
                 self.id = user_id
@@ -158,7 +166,8 @@ class TestAsyncWorkflowService:
         assert result.status == "queued"
         assert result.queue == queue_name
 
-        mocks["quota_workflow"].consume.assert_called_once_with("tenant-123")
+        mocks["quota_service"].reserve.assert_called_once()
+        quota_charge_mock.commit.assert_called_once()
         assert session.commit.call_count == 2
 
         created_log = mocks["repo"].create.call_args[0][0]
@@ -245,7 +254,7 @@ class TestAsyncWorkflowService:
         mocks = async_workflow_trigger_mocks
         mocks["dispatcher"].get_queue_name.return_value = QueuePriority.TEAM
         mocks["get_workflow"].return_value = workflow
-        mocks["quota_workflow"].consume.side_effect = QuotaExceededError(
+        mocks["quota_service"].reserve.side_effect = QuotaExceededError(
             feature="workflow",
             tenant_id="tenant-123",
             required=1,
diff --git a/api/tests/unit_tests/services/test_billing_service.py b/api/tests/unit_tests/services/test_billing_service.py
index 9ab0171eac..36592196c6 100644
--- a/api/tests/unit_tests/services/test_billing_service.py
+++ b/api/tests/unit_tests/services/test_billing_service.py
@@ -425,7 +425,7 @@ class TestBillingServiceUsageCalculation:
             yield mock
 
     def test_get_tenant_feature_plan_usage_info(self, mock_send_request):
-        """Test retrieval of tenant feature plan usage information."""
+        """Test retrieval of tenant feature plan usage information (legacy endpoint)."""
         # Arrange
         tenant_id = "tenant-123"
         expected_response = {"features": {"trigger": {"used": 50, "limit": 100}, "workflow": {"used": 20, "limit": 50}}}
@@ -438,6 +438,20 @@ class TestBillingServiceUsageCalculation:
         assert result == expected_response
         mock_send_request.assert_called_once_with("GET", "/tenant-feature-usage/info", params={"tenant_id": tenant_id})
 
+    def test_get_quota_info(self, mock_send_request):
+        """Test retrieval of quota info from new endpoint."""
+        # Arrange
+        tenant_id = "tenant-123"
+        expected_response = {"trigger_event": {"limit": 100, "usage": 30}, "api_rate_limit": {"limit": -1, "usage": 0}}
+        mock_send_request.return_value = expected_response
+
+        # Act
+        result = BillingService.get_quota_info(tenant_id)
+
+        # Assert
+        assert result == expected_response
+        mock_send_request.assert_called_once_with("GET", "/quota/info", params={"tenant_id": tenant_id})
+
     def test_update_tenant_feature_plan_usage_positive_delta(self, mock_send_request):
         """Test updating tenant feature usage with positive delta (adding credits)."""
         # Arrange
@@ -515,6 +529,150 @@ class TestBillingServiceUsageCalculation:
         )
 
 
+class TestBillingServiceQuotaOperations:
+    """Unit tests for quota reserve/commit/release operations."""
+
+    @pytest.fixture
+    def mock_send_request(self):
+        with patch.object(BillingService, "_send_request") as mock:
+            yield mock
+
+    def test_quota_reserve_success(self, mock_send_request):
+        expected = {"reservation_id": "rid-1", "available": 99, "reserved": 1}
+        mock_send_request.return_value = expected
+
+        result = BillingService.quota_reserve(tenant_id="t1", feature_key="trigger_event", request_id="req-1", amount=1)
+
+        assert result == expected
+        mock_send_request.assert_called_once_with(
+            "POST",
+            "/quota/reserve",
+            json={"tenant_id": "t1", "feature_key": "trigger_event", "request_id": "req-1", "amount": 1},
+        )
+
+    def test_quota_reserve_coerces_string_to_int(self, mock_send_request):
+        """Test that TypeAdapter coerces string values to int."""
+        mock_send_request.return_value = {"reservation_id": "rid-str", "available": "99", "reserved": "1"}
+
+        result = BillingService.quota_reserve(tenant_id="t1", feature_key="trigger_event", request_id="req-s", amount=1)
+
+        assert result["available"] == 99
+        assert isinstance(result["available"], int)
+        assert result["reserved"] == 1
+        assert isinstance(result["reserved"], int)
+
+    def test_quota_reserve_with_meta(self, mock_send_request):
+        mock_send_request.return_value = {"reservation_id": "rid-2", "available": 98, "reserved": 1}
+        meta = {"source": "webhook"}
+
+        BillingService.quota_reserve(
+            tenant_id="t1", feature_key="trigger_event", request_id="req-2", amount=1, meta=meta
+        )
+
+        call_json = mock_send_request.call_args[1]["json"]
+        assert call_json["meta"] == {"source": "webhook"}
+
+    def test_quota_commit_success(self, mock_send_request):
+        expected = {"available": 98, "reserved": 0, "refunded": 0}
+        mock_send_request.return_value = expected
+
+        result = BillingService.quota_commit(
+            tenant_id="t1", feature_key="trigger_event", reservation_id="rid-1", actual_amount=1
+        )
+
+        assert result == expected
+        mock_send_request.assert_called_once_with(
+            "POST",
+            "/quota/commit",
+            json={
+                "tenant_id": "t1",
+                "feature_key": "trigger_event",
+                "reservation_id": "rid-1",
+                "actual_amount": 1,
+            },
+        )
+
+    def test_quota_commit_coerces_string_to_int(self, mock_send_request):
+        """Test that TypeAdapter coerces string values to int."""
+        mock_send_request.return_value = {"available": "97", "reserved": "0", "refunded": "1"}
+
+        result = BillingService.quota_commit(
+            tenant_id="t1", feature_key="trigger_event", reservation_id="rid-s", actual_amount=1
+        )
+
+        assert result["available"] == 97
+        assert isinstance(result["available"], int)
+        assert result["refunded"] == 1
+        assert isinstance(result["refunded"], int)
+
+    def test_quota_commit_with_meta(self, mock_send_request):
+        mock_send_request.return_value = {"available": 97, "reserved": 0, "refunded": 0}
+        meta = {"reason": "partial"}
+
+        BillingService.quota_commit(
+            tenant_id="t1", feature_key="trigger_event", reservation_id="rid-1", actual_amount=1, meta=meta
+        )
+
+        call_json = mock_send_request.call_args[1]["json"]
+        assert call_json["meta"] == {"reason": "partial"}
+
+    def test_quota_release_success(self, mock_send_request):
+        expected = {"available": 100, "reserved": 0, "released": 1}
+        mock_send_request.return_value = expected
+
+        result = BillingService.quota_release(tenant_id="t1", feature_key="trigger_event", reservation_id="rid-1")
+
+        assert result == expected
+        mock_send_request.assert_called_once_with(
+            "POST",
+            "/quota/release",
+            json={"tenant_id": "t1", "feature_key": "trigger_event", "reservation_id": "rid-1"},
+        )
+
+    def test_quota_release_coerces_string_to_int(self, mock_send_request):
+        """Test that TypeAdapter coerces string values to int."""
+        mock_send_request.return_value = {"available": "100", "reserved": "0", "released": "1"}
+
+        result = BillingService.quota_release(tenant_id="t1", feature_key="trigger_event", reservation_id="rid-s")
+
+        assert result["available"] == 100
+        assert isinstance(result["available"], int)
+        assert result["released"] == 1
+        assert isinstance(result["released"], int)
+
+    def test_get_quota_info_coerces_string_to_int(self, mock_send_request):
+        """Test that TypeAdapter coerces string values to int for get_quota_info."""
+        mock_send_request.return_value = {
+            "trigger_event": {"usage": "42", "limit": "3000", "reset_date": "1700000000"},
+            "api_rate_limit": {"usage": "10", "limit": "-1", "reset_date": "-1"},
+        }
+
+        result = BillingService.get_quota_info("t1")
+
+        assert result["trigger_event"]["usage"] == 42
+        assert isinstance(result["trigger_event"]["usage"], int)
+        assert result["trigger_event"]["limit"] == 3000
+        assert isinstance(result["trigger_event"]["limit"], int)
+        assert result["trigger_event"]["reset_date"] == 1700000000
+        assert isinstance(result["trigger_event"]["reset_date"], int)
+        assert result["api_rate_limit"]["limit"] == -1
+        assert isinstance(result["api_rate_limit"]["limit"], int)
+
+    def test_get_quota_info_accepts_int_values(self, mock_send_request):
+        """Test that get_quota_info works with native int values."""
+        expected = {
+            "trigger_event": {"usage": 42, "limit": 3000, "reset_date": 1700000000},
+            "api_rate_limit": {"usage": 0, "limit": -1},
+        }
+        mock_send_request.return_value = expected
+
+        result = BillingService.get_quota_info("t1")
+
+        assert result["trigger_event"]["usage"] == 42
+        assert result["trigger_event"]["limit"] == 3000
+        assert result["api_rate_limit"]["limit"] == -1
+
+
 class TestBillingServiceRateLimitEnforcement:
     """Unit tests for rate limit enforcement mechanisms.
 
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index ffdcc046f9..02fbe473df 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -559,3 +559,772 @@ class TestWebhookServiceUnit:
 
             result = _prepare_webhook_execution("test_webhook", is_debug=True)
             assert result == (mock_trigger, mock_workflow, mock_config, mock_data, None)
+
+
+
+# === Merged from test_webhook_service_additional.py ===
+
+
+from types import SimpleNamespace
+from typing import Any, cast
+from unittest.mock import MagicMock
+
+import pytest
+from flask import Flask
+from graphon.variables.types import SegmentType
+from werkzeug.datastructures import FileStorage
+from werkzeug.exceptions import RequestEntityTooLarge
+
+from core.workflow.nodes.trigger_webhook.entities import (
+    ContentType,
+    WebhookBodyParameter,
+    WebhookData,
+    WebhookParameter,
+)
+from models.enums import AppTriggerStatus
+from models.model import App
+from models.trigger import WorkflowWebhookTrigger
+from models.workflow import Workflow
+from services.errors.app import QuotaExceededError
+from services.trigger import webhook_service as service_module
+from services.trigger.webhook_service import WebhookService
+
+
+class _FakeQuery:
+    def __init__(self, result: Any) -> None:
+        self._result = result
+
+    def where(self, *args: Any, **kwargs: Any) -> "_FakeQuery":
+        return self
+
+    def filter(self, *args: Any, **kwargs: Any) -> "_FakeQuery":
+        return self
+
+    def order_by(self, *args: Any, **kwargs: Any) -> "_FakeQuery":
+        return self
+
+    def first(self) -> Any:
+        return self._result
+
+
+class _SessionContext:
+    def __init__(self, session: Any) -> None:
+        self._session = session
+
+    def __enter__(self) -> Any:
+        return self._session
+
+    def __exit__(self, exc_type: Any, exc: Any, tb: Any) -> bool:
+        return False
+
+
+class _SessionmakerContext:
+    def __init__(self, session: Any) -> None:
+        self._session = session
+
+    def begin(self) -> "_SessionmakerContext":
+        return self
+
+    def __enter__(self) -> Any:
+        return self._session
+
+    def __exit__(self, exc_type: Any, exc: Any, tb: Any) -> bool:
+        return False
+
+
+@pytest.fixture
+def flask_app() -> Flask:
+    return Flask(__name__)
+
+
+def _patch_session(monkeypatch: pytest.MonkeyPatch, session: Any) -> None:
+    monkeypatch.setattr(service_module, "db", SimpleNamespace(engine=MagicMock(), session=MagicMock()))
+    monkeypatch.setattr(service_module, "Session", lambda *args, **kwargs: _SessionContext(session))
+    monkeypatch.setattr(service_module, "sessionmaker", lambda *args, **kwargs: _SessionmakerContext(session))
+
+
+def _workflow_trigger(**kwargs: Any) -> WorkflowWebhookTrigger:
+    return cast(WorkflowWebhookTrigger, SimpleNamespace(**kwargs))
+
+
+def _workflow(**kwargs: Any) -> Workflow:
+    return cast(Workflow, SimpleNamespace(**kwargs))
+
+
+def _app(**kwargs: Any) -> App:
+    return cast(App, SimpleNamespace(**kwargs))
+
+
+def test_get_webhook_trigger_and_workflow_should_raise_when_webhook_not_found(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    fake_session = MagicMock()
+    fake_session.scalar.return_value = None
+    _patch_session(monkeypatch, fake_session)
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="Webhook not found"):
+        WebhookService.get_webhook_trigger_and_workflow("webhook-1")
+
+
+def test_get_webhook_trigger_and_workflow_should_raise_when_app_trigger_not_found(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = SimpleNamespace(app_id="app-1", node_id="node-1")
+    fake_session = MagicMock()
+    fake_session.scalar.side_effect = [webhook_trigger, None]
+    _patch_session(monkeypatch, fake_session)
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="App trigger not found"):
+        WebhookService.get_webhook_trigger_and_workflow("webhook-1")
+
+
+def test_get_webhook_trigger_and_workflow_should_raise_when_app_trigger_rate_limited(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = SimpleNamespace(app_id="app-1", node_id="node-1")
+    app_trigger = SimpleNamespace(status=AppTriggerStatus.RATE_LIMITED)
+    fake_session = MagicMock()
+    fake_session.scalar.side_effect = [webhook_trigger, app_trigger]
+    _patch_session(monkeypatch, fake_session)
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="rate limited"):
+        WebhookService.get_webhook_trigger_and_workflow("webhook-1")
+
+
+def test_get_webhook_trigger_and_workflow_should_raise_when_app_trigger_disabled(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = SimpleNamespace(app_id="app-1", node_id="node-1")
+    app_trigger = SimpleNamespace(status=AppTriggerStatus.DISABLED)
+    fake_session = MagicMock()
+    fake_session.scalar.side_effect = [webhook_trigger, app_trigger]
+    _patch_session(monkeypatch, fake_session)
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="disabled"):
+        WebhookService.get_webhook_trigger_and_workflow("webhook-1")
+
+
+def test_get_webhook_trigger_and_workflow_should_raise_when_workflow_not_found(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    webhook_trigger = SimpleNamespace(app_id="app-1", node_id="node-1")
+    app_trigger = SimpleNamespace(status=AppTriggerStatus.ENABLED)
+    fake_session = MagicMock()
+    fake_session.scalar.side_effect = [webhook_trigger, app_trigger, None]
+    _patch_session(monkeypatch, fake_session)
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="Workflow not found"):
+        WebhookService.get_webhook_trigger_and_workflow("webhook-1")
+
+
+def test_get_webhook_trigger_and_workflow_should_return_values_for_non_debug_mode(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = SimpleNamespace(app_id="app-1", node_id="node-1")
+    app_trigger = SimpleNamespace(status=AppTriggerStatus.ENABLED)
+    workflow = MagicMock()
+    workflow.get_node_config_by_id.return_value = {"data": {"key": "value"}}
+
+    fake_session = MagicMock()
+    fake_session.scalar.side_effect = [webhook_trigger, app_trigger, workflow]
+    _patch_session(monkeypatch, fake_session)
+
+    # Act
+    got_trigger, got_workflow, got_node_config = WebhookService.get_webhook_trigger_and_workflow("webhook-1")
+
+    # Assert
+    assert got_trigger is webhook_trigger
+    assert got_workflow is workflow
+    assert got_node_config == {"data": {"key": "value"}}
+
+
+def test_get_webhook_trigger_and_workflow_should_return_values_for_debug_mode(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    webhook_trigger = SimpleNamespace(app_id="app-1", node_id="node-1")
+    workflow = MagicMock()
+    workflow.get_node_config_by_id.return_value = {"data": {"mode": "debug"}}
+
+    fake_session = MagicMock()
+    fake_session.scalar.side_effect = [webhook_trigger, workflow]
+    _patch_session(monkeypatch, fake_session)
+
+    # Act
+    got_trigger, got_workflow, got_node_config = WebhookService.get_webhook_trigger_and_workflow(
+        "webhook-1", is_debug=True
+    )
+
+    # Assert
+    assert got_trigger is webhook_trigger
+    assert got_workflow is workflow
+    assert got_node_config == {"data": {"mode": "debug"}}
+
+
+def test_extract_webhook_data_should_use_text_fallback_for_unknown_content_type(
+    flask_app: Flask,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    warning_mock = MagicMock()
+    monkeypatch.setattr(service_module.logger, "warning", warning_mock)
+    webhook_trigger = MagicMock()
+
+    # Act
+    with flask_app.test_request_context(
+        "/webhook",
+        method="POST",
+        headers={"Content-Type": "application/vnd.custom"},
+        data="plain content",
+    ):
+        result = WebhookService.extract_webhook_data(webhook_trigger)
+
+    # Assert
+    assert result["body"] == {"raw": "plain content"}
+    warning_mock.assert_called_once()
+
+
+def test_extract_webhook_data_should_raise_for_request_too_large(
+    flask_app: Flask,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    monkeypatch.setattr(service_module.dify_config, "WEBHOOK_REQUEST_BODY_MAX_SIZE", 1)
+
+    # Act / Assert
+    with flask_app.test_request_context("/webhook", method="POST", data="ab"):
+        with pytest.raises(RequestEntityTooLarge):
+            WebhookService.extract_webhook_data(MagicMock())
+
+
+def test_extract_octet_stream_body_should_return_none_when_empty_payload(flask_app: Flask) -> None:
+    # Arrange
+    webhook_trigger = MagicMock()
+
+    # Act
+    with flask_app.test_request_context("/webhook", method="POST", data=b""):
+        body, files = WebhookService._extract_octet_stream_body(webhook_trigger)
+
+    # Assert
+    assert body == {"raw": None}
+    assert files == {}
+
+
+def test_extract_octet_stream_body_should_return_none_when_processing_raises(
+    flask_app: Flask,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = MagicMock()
+    monkeypatch.setattr(WebhookService, "_detect_binary_mimetype", MagicMock(return_value="application/octet-stream"))
+    monkeypatch.setattr(WebhookService, "_create_file_from_binary", MagicMock(side_effect=RuntimeError("boom")))
+
+    # Act
+    with flask_app.test_request_context("/webhook", method="POST", data=b"abc"):
+        body, files = WebhookService._extract_octet_stream_body(webhook_trigger)
+
+    # Assert
+    assert body == {"raw": None}
+    assert files == {}
+
+
+def test_extract_text_body_should_return_empty_string_when_request_read_fails(
+    flask_app: Flask,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    monkeypatch.setattr("flask.wrappers.Request.get_data", MagicMock(side_effect=RuntimeError("read error")))
+
+    # Act
+    with flask_app.test_request_context("/webhook", method="POST", data="abc"):
+        body, files = WebhookService._extract_text_body()
+
+    # Assert
+    assert body == {"raw": ""}
+    assert files == {}
+
+
+def test_detect_binary_mimetype_should_fallback_when_magic_raises(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    fake_magic = MagicMock()
+    fake_magic.from_buffer.side_effect = RuntimeError("magic failed")
+    monkeypatch.setattr(service_module, "magic", fake_magic)
+
+    # Act
+    result = WebhookService._detect_binary_mimetype(b"binary")
+
+    # Assert
+    assert result == "application/octet-stream"
+
+
+def test_process_file_uploads_should_use_octet_stream_fallback_when_mimetype_unknown(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = _workflow_trigger(created_by="user-1", tenant_id="tenant-1")
+    file_obj = MagicMock()
+    file_obj.to_dict.return_value = {"id": "f-1"}
+    monkeypatch.setattr(WebhookService, "_create_file_from_binary", MagicMock(return_value=file_obj))
+    monkeypatch.setattr(service_module.mimetypes, "guess_type", MagicMock(return_value=(None, None)))
+
+    uploaded = MagicMock()
+    uploaded.filename = "file.unknown"
+    uploaded.content_type = None
+    uploaded.read.return_value = b"content"
+
+    # Act
+    result = WebhookService._process_file_uploads({"f": uploaded}, webhook_trigger)
+
+    # Assert
+    assert result == {"f": {"id": "f-1"}}
+
+
+def test_create_file_from_binary_should_call_tool_file_manager_and_file_factory(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = _workflow_trigger(created_by="user-1", tenant_id="tenant-1")
+    manager = MagicMock()
+    manager.create_file_by_raw.return_value = SimpleNamespace(id="tool-file-1")
+    monkeypatch.setattr(service_module, "ToolFileManager", MagicMock(return_value=manager))
+    expected_file = MagicMock()
+    monkeypatch.setattr(service_module.file_factory, "build_from_mapping", MagicMock(return_value=expected_file))
+
+    # Act
+    result = WebhookService._create_file_from_binary(b"abc", "text/plain", webhook_trigger)
+
+    # Assert
+    assert result is expected_file
+    manager.create_file_by_raw.assert_called_once()
+
+
+@pytest.mark.parametrize(
+    ("raw_value", "param_type", "expected"),
+    [
+        ("42", SegmentType.NUMBER, 42),
+        ("3.14", SegmentType.NUMBER, 3.14),
+        ("yes", SegmentType.BOOLEAN, True),
+        ("no", SegmentType.BOOLEAN, False),
+    ],
+)
+def test_convert_form_value_should_convert_supported_types(
+    raw_value: str,
+    param_type: str,
+    expected: Any,
+) -> None:
+    # Arrange
+
+    # Act
+    result = WebhookService._convert_form_value("param", raw_value, param_type)
+
+    # Assert
+    assert result == expected
+
+
+def test_convert_form_value_should_raise_for_unsupported_type() -> None:
+    # Arrange
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="Unsupported type"):
+        WebhookService._convert_form_value("p", "x", SegmentType.FILE)
+
+
+def test_validate_json_value_should_return_original_for_unmapped_supported_segment_type(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    warning_mock = MagicMock()
+    monkeypatch.setattr(service_module.logger, "warning", warning_mock)
+
+    # Act
+    result = WebhookService._validate_json_value("param", {"x": 1}, "unsupported-type")
+
+    # Assert
+    assert result == {"x": 1}
+    warning_mock.assert_called_once()
+
+
+def test_validate_and_convert_value_should_wrap_conversion_errors() -> None:
+    # Arrange
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="validation failed"):
+        WebhookService._validate_and_convert_value("param", "bad", SegmentType.NUMBER, is_form_data=True)
+
+
+def test_process_parameters_should_raise_when_required_parameter_missing() -> None:
+    # Arrange
+    raw_params = {"optional": "x"}
+    config = [WebhookParameter(name="required_param", type=SegmentType.STRING, required=True)]
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="Required parameter missing"):
+        WebhookService._process_parameters(raw_params, config, is_form_data=True)
+
+
+def test_process_parameters_should_include_unconfigured_parameters() -> None:
+    # Arrange
+    raw_params = {"known": "1", "unknown": "x"}
+    config = [WebhookParameter(name="known", type=SegmentType.NUMBER, required=False)]
+
+    # Act
+    result = WebhookService._process_parameters(raw_params, config, is_form_data=True)
+
+    # Assert
+    assert result == {"known": 1, "unknown": "x"}
+
+
+def test_process_body_parameters_should_raise_when_required_text_raw_is_missing() -> None:
+    # Arrange
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="Required body content missing"):
+        WebhookService._process_body_parameters(
+            raw_body={"raw": ""},
+            body_configs=[WebhookBodyParameter(name="raw", required=True)],
+            content_type=ContentType.TEXT,
+        )
+
+
+def test_process_body_parameters_should_skip_file_config_for_multipart_form_data() -> None:
+    # Arrange
+    raw_body = {"message": "hello", "extra": "x"}
+    body_configs = [
+        WebhookBodyParameter(name="upload", type=SegmentType.FILE, required=True),
+        WebhookBodyParameter(name="message", type=SegmentType.STRING, required=True),
+    ]
+
+    # Act
+    result = WebhookService._process_body_parameters(raw_body, body_configs, ContentType.FORM_DATA)
+
+    # Assert
+    assert result == {"message": "hello", "extra": "x"}
+
+
+def test_validate_required_headers_should_accept_sanitized_header_names() -> None:
+    # Arrange
+    headers = {"x_api_key": "123"}
+    configs = [WebhookParameter(name="x-api-key", required=True)]
+
+    # Act
+    WebhookService._validate_required_headers(headers, configs)
+
+    # Assert
+    assert True
+
+
+def test_validate_required_headers_should_raise_when_required_header_missing() -> None:
+    # Arrange
+    headers = {"x-other": "123"}
+    configs = [WebhookParameter(name="x-api-key", required=True)]
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="Required header missing"):
+        WebhookService._validate_required_headers(headers, configs)
+
+
+def test_validate_http_metadata_should_return_content_type_mismatch_error() -> None:
+    # Arrange
+    webhook_data = {"method": "POST", "headers": {"Content-Type": "application/json"}}
+    node_data = WebhookData(method="post", content_type=ContentType.TEXT)
+
+    # Act
+    result = WebhookService._validate_http_metadata(webhook_data, node_data)
+
+    # Assert
+    assert result["valid"] is False
+    assert "Content-type mismatch" in result["error"]
+
+
+def test_extract_content_type_should_fallback_to_lowercase_header_key() -> None:
+    # Arrange
+    headers = {"content-type": "application/json; charset=utf-8"}
+
+    # Act
+    result = WebhookService._extract_content_type(headers)
+
+    # Assert
+    assert result == "application/json"
+
+
+def test_build_workflow_inputs_should_include_expected_keys() -> None:
+    # Arrange
+    webhook_data = {"headers": {"h": "v"}, "query_params": {"q": 1}, "body": {"b": 2}}
+
+    # Act
+    result = WebhookService.build_workflow_inputs(webhook_data)
+
+    # Assert
+    assert result["webhook_data"] == webhook_data
+    assert result["webhook_headers"] == {"h": "v"}
+    assert result["webhook_query_params"] == {"q": 1}
+    assert result["webhook_body"] == {"b": 2}
+
+
+def test_trigger_workflow_execution_should_trigger_async_workflow_successfully(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    webhook_trigger = _workflow_trigger(
+        app_id="app-1",
+        node_id="node-1",
+        tenant_id="tenant-1",
+        webhook_id="webhook-1",
+    )
+    workflow = _workflow(id="wf-1")
+    webhook_data = {"body": {"x": 1}}
+
+    session = MagicMock()
+    _patch_session(monkeypatch, session)
+
+    end_user = SimpleNamespace(id="end-user-1")
+    monkeypatch.setattr(
+        service_module.EndUserService, "get_or_create_end_user_by_type", MagicMock(return_value=end_user)
+    )
+    quota_type = SimpleNamespace(TRIGGER=SimpleNamespace(consume=MagicMock()))
+    monkeypatch.setattr(service_module, "QuotaType", quota_type)
+    trigger_async_mock = MagicMock()
+    monkeypatch.setattr(service_module.AsyncWorkflowService, "trigger_workflow_async", trigger_async_mock)
+
+    # Act
+    WebhookService.trigger_workflow_execution(webhook_trigger, webhook_data, workflow)
+
+    # Assert
+    trigger_async_mock.assert_called_once()
+
+
+def test_trigger_workflow_execution_should_mark_tenant_rate_limited_when_quota_exceeded(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    webhook_trigger = _workflow_trigger(
+        app_id="app-1",
+        node_id="node-1",
+        tenant_id="tenant-1",
+        webhook_id="webhook-1",
+    )
+    workflow = _workflow(id="wf-1")
+
+    session = MagicMock()
+    _patch_session(monkeypatch, session)
+
+    monkeypatch.setattr(
+        service_module.EndUserService,
+        "get_or_create_end_user_by_type",
+        MagicMock(return_value=SimpleNamespace(id="end-user-1")),
+    )
+    monkeypatch.setattr(
+        service_module.QuotaService,
+        "reserve",
+        MagicMock(side_effect=QuotaExceededError(feature="trigger", tenant_id="tenant-1", required=1)),
+    )
+    mark_rate_limited_mock = MagicMock()
+    monkeypatch.setattr(service_module.AppTriggerService, "mark_tenant_triggers_rate_limited", mark_rate_limited_mock)
+
+    # Act / Assert
+    with pytest.raises(QuotaExceededError):
+        WebhookService.trigger_workflow_execution(webhook_trigger, {"body": {}}, workflow)
+    mark_rate_limited_mock.assert_called_once_with("tenant-1")
+
+
+def test_trigger_workflow_execution_should_log_and_reraise_unexpected_errors(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    webhook_trigger = _workflow_trigger(
+        app_id="app-1",
+        node_id="node-1",
+        tenant_id="tenant-1",
+        webhook_id="webhook-1",
+    )
+    workflow = _workflow(id="wf-1")
+
+    session = MagicMock()
+    _patch_session(monkeypatch, session)
+
+    monkeypatch.setattr(
+        service_module.EndUserService, "get_or_create_end_user_by_type", MagicMock(side_effect=RuntimeError("boom"))
+    )
+    logger_exception_mock = MagicMock()
+    monkeypatch.setattr(service_module.logger, "exception", logger_exception_mock)
+
+    # Act / Assert
+    with pytest.raises(RuntimeError, match="boom"):
+        WebhookService.trigger_workflow_execution(webhook_trigger, {"body": {}}, workflow)
+    logger_exception_mock.assert_called_once()
+
+
+def test_sync_webhook_relationships_should_raise_when_workflow_exceeds_node_limit() -> None:
+    # Arrange
+    app = _app(id="app-1", tenant_id="tenant-1", created_by="user-1")
+    workflow = _workflow(
+        walk_nodes=lambda _node_type: [
+            (f"node-{i}", {}) for i in range(WebhookService.MAX_WEBHOOK_NODES_PER_WORKFLOW + 1)
+        ]
+    )
+
+    # Act / Assert
+    with pytest.raises(ValueError, match="maximum webhook node limit"):
+        WebhookService.sync_webhook_relationships(app, workflow)
+
+
+def test_sync_webhook_relationships_should_raise_when_lock_not_acquired(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    app = _app(id="app-1", tenant_id="tenant-1", created_by="user-1")
+    workflow = _workflow(walk_nodes=lambda _node_type: [("node-1", {})])
+
+    lock = MagicMock()
+    lock.acquire.return_value = False
+    monkeypatch.setattr(service_module.redis_client, "get", MagicMock(return_value=None))
+    monkeypatch.setattr(service_module.redis_client, "lock", MagicMock(return_value=lock))
+
+    # Act / Assert
+    with pytest.raises(RuntimeError, match="Failed to acquire lock"):
+        WebhookService.sync_webhook_relationships(app, workflow)
+
+
+def test_sync_webhook_relationships_should_create_missing_records_and_delete_stale_records(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # Arrange
+    app = _app(id="app-1", tenant_id="tenant-1", created_by="user-1")
+    workflow = _workflow(walk_nodes=lambda _node_type: [("node-new", {})])
+
+    class _WorkflowWebhookTrigger:
+        app_id = "app_id"
+        tenant_id = "tenant_id"
+        webhook_id = "webhook_id"
+        node_id = "node_id"
+
+        def __init__(self, app_id: str, tenant_id: str, node_id: str, webhook_id: str, created_by: str) -> None:
+            self.id = None
+            self.app_id = app_id
+            self.tenant_id = tenant_id
+            self.node_id = node_id
+            self.webhook_id = webhook_id
+            self.created_by = created_by
+
+    class _Select:
+        def where(self, *args: Any, **kwargs: Any) -> "_Select":
+            return self
+
+    class _Session:
+        def __init__(self) -> None:
+            self.added: list[Any] = []
+            self.deleted: list[Any] = []
+            self.commit_count = 0
+            self.existing_records = [SimpleNamespace(node_id="node-stale")]
+
+        def scalars(self, _stmt: Any) -> Any:
+            return SimpleNamespace(all=lambda: self.existing_records)
+
+        def add(self, obj: Any) -> None:
+            self.added.append(obj)
+
+        def flush(self) -> None:
+            for idx, obj in enumerate(self.added, start=1):
+                if obj.id is None:
+                    obj.id = f"rec-{idx}"
+
+        def commit(self) -> None:
+            self.commit_count += 1
+
+        def delete(self, obj: Any) -> None:
+            self.deleted.append(obj)
+
+    lock = MagicMock()
+    lock.acquire.return_value = True
+    lock.release.return_value = None
+
+    fake_session = _Session()
+
+    monkeypatch.setattr(service_module, "WorkflowWebhookTrigger", _WorkflowWebhookTrigger)
+    monkeypatch.setattr(service_module, "select", MagicMock(return_value=_Select()))
+    monkeypatch.setattr(service_module.redis_client, "get", MagicMock(return_value=None))
+    monkeypatch.setattr(service_module.redis_client, "lock", MagicMock(return_value=lock))
+    redis_set_mock = MagicMock()
+    redis_delete_mock = MagicMock()
+    monkeypatch.setattr(service_module.redis_client, "set", redis_set_mock)
+    monkeypatch.setattr(service_module.redis_client, "delete", redis_delete_mock)
+    monkeypatch.setattr(WebhookService, "generate_webhook_id", MagicMock(return_value="generated-webhook-id"))
+    _patch_session(monkeypatch, fake_session)
+
+    # Act
+    WebhookService.sync_webhook_relationships(app, workflow)
+
+    # Assert
+    assert len(fake_session.added) == 1
+    assert len(fake_session.deleted) == 1
+    redis_set_mock.assert_called_once()
+    redis_delete_mock.assert_called_once()
+    lock.release.assert_called_once()
+
+
+def test_sync_webhook_relationships_should_log_when_lock_release_fails(monkeypatch: pytest.MonkeyPatch) -> None:
+    # Arrange
+    app = _app(id="app-1", tenant_id="tenant-1", created_by="user-1")
+    workflow = _workflow(walk_nodes=lambda _node_type: [])
+
+    class _Select:
+        def where(self, *args: Any, **kwargs: Any) -> "_Select":
+            return self
+
+    class _Session:
+        def scalars(self, _stmt: Any) -> Any:
+            return SimpleNamespace(all=lambda: [])
+
+        def commit(self) -> None:
+            return None
+
+    lock = MagicMock()
+    lock.acquire.return_value = True
+    lock.release.side_effect = RuntimeError("release failed")
+
+    logger_exception_mock = MagicMock()
+
+    monkeypatch.setattr(service_module, "select", MagicMock(return_value=_Select()))
+    monkeypatch.setattr(service_module.redis_client, "get", MagicMock(return_value=None))
+    monkeypatch.setattr(service_module.redis_client, "lock", MagicMock(return_value=lock))
+    monkeypatch.setattr(service_module.logger, "exception", logger_exception_mock)
+    _patch_session(monkeypatch, _Session())
+
+    # Act
+    WebhookService.sync_webhook_relationships(app, workflow)
+
+    # Assert
+    assert logger_exception_mock.call_count == 1
+
+
+def test_generate_webhook_response_should_fallback_when_response_body_is_not_json() -> None:
+    # Arrange
+    node_config = {"data": {"status_code": 200, "response_body": "{bad-json"}}
+
+    # Act
+    body, status = WebhookService.generate_webhook_response(node_config)
+
+    # Assert
+    assert status == 200
+    assert "message" in body
+
+
+def test_generate_webhook_id_should_return_24_character_identifier() -> None:
+    # Arrange
+
+    # Act
+    webhook_id = WebhookService.generate_webhook_id()
+
+    # Assert
+    assert isinstance(webhook_id, str)
+    assert len(webhook_id) == 24
+
+
+def test_sanitize_key_should_return_original_value_for_non_string_input() -> None:
+    # Arrange
+
+    # Act
+    result = WebhookService._sanitize_key(123)  # type: ignore[arg-type]
+
+    # Assert
+    assert result == 123
+
diff --git a/api/tests/unit_tests/tasks/test_evaluation_task.py b/api/tests/unit_tests/tasks/test_evaluation_task.py
new file mode 100644
index 0000000000..6922ec522e
--- /dev/null
+++ b/api/tests/unit_tests/tasks/test_evaluation_task.py
@@ -0,0 +1,97 @@
+"""Unit tests for evaluation task helpers."""
+
+from core.evaluation.entities.evaluation_entity import EvaluationItemResult, EvaluationMetric, NodeInfo
+from core.evaluation.entities.judgment_entity import (
+    JudgmentCondition,
+    JudgmentConfig,
+    JudgmentResult,
+)
+from tasks.evaluation_task import _compute_metrics_summary, _merge_result, _stamp_and_merge
+
+_NODE_INFO = NodeInfo(node_id="llm_1", type="llm", title="LLM Node")
+
+
+def test_compute_metrics_summary_includes_judgment_counts() -> None:
+    """Summary should expose pass/fail counts when judgment rules are configured."""
+    judgment_config = JudgmentConfig(
+        logical_operator="and",
+        conditions=[
+            JudgmentCondition(
+                variable_selector=["llm_1", "faithfulness"],
+                comparison_operator=">",
+                value="0.8",
+            )
+        ],
+    )
+    results = [
+        EvaluationItemResult(
+            index=0,
+            metrics=[EvaluationMetric(name="faithfulness", value=0.9, node_info=_NODE_INFO)],
+            judgment=JudgmentResult(passed=True, logical_operator="and", condition_results=[]),
+        ),
+        EvaluationItemResult(
+            index=1,
+            metrics=[EvaluationMetric(name="faithfulness", value=0.4, node_info=_NODE_INFO)],
+            judgment=JudgmentResult(passed=False, logical_operator="and", condition_results=[]),
+        ),
+        EvaluationItemResult(index=2, error="timeout"),
+    ]
+
+    summary = _compute_metrics_summary(results, judgment_config)
+
+    assert summary["_judgment"] == {
+        "enabled": True,
+        "logical_operator": "and",
+        "configured_conditions": 1,
+        "evaluated_items": 2,
+        "passed_items": 1,
+        "failed_items": 1,
+        "pass_rate": 0.5,
+    }
+
+
+def test_merge_result_combines_metrics_for_same_index() -> None:
+    """Merging two results with the same index should concatenate their metrics."""
+    results_by_index: dict[int, EvaluationItemResult] = {}
+
+    first = EvaluationItemResult(
+        index=0,
+        actual_output="output_1",
+        metrics=[EvaluationMetric(name="faithfulness", value=0.9)],
+    )
+    _merge_result(results_by_index, 0, first)
+
+    second = EvaluationItemResult(
+        index=0,
+        actual_output="output_2",
+        metrics=[EvaluationMetric(name="context_precision", value=0.7)],
+    )
+    _merge_result(results_by_index, 0, second)
+
+    merged = results_by_index[0]
+    assert len(merged.metrics) == 2
+    assert merged.metrics[0].name == "faithfulness"
+    assert merged.metrics[1].name == "context_precision"
+    assert merged.actual_output == "output_1"
+
+
+def test_stamp_and_merge_attaches_node_info() -> None:
+    """_stamp_and_merge should set node_info on every metric and remap indices."""
+    results_by_index: dict[int, EvaluationItemResult] = {}
+    node_info = NodeInfo(node_id="llm_1", type="llm", title="GPT-4")
+
+    evaluated = [
+        EvaluationItemResult(
+            index=0,
+            metrics=[EvaluationMetric(name="faithfulness", value=0.85)],
+        )
+    ]
+    item_indices = [3]
+
+    _stamp_and_merge(evaluated, item_indices, node_info, results_by_index)
+
+    assert 3 in results_by_index
+    metric = results_by_index[3].metrics[0]
+    assert metric.node_info is not None
+    assert metric.node_info.node_id == "llm_1"
+    assert metric.node_info.type == "llm"
diff --git a/api/uv.lock b/api/uv.lock
index 9ed8d16107..d0f1ed826e 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -320,6 +320,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/15/b3/9b1a8074496371342ec1e796a96f99c82c945a339cd81a8e73de28b4cf9e/anyio-4.11.0-py3-none-any.whl", hash = "sha256:0287e96f4d26d4149305414d4e3bc32f0dcd0862365a4bddea19d7a1ec38c4fc", size = 109097, upload-time = "2025-09-23T09:19:10.601Z" },
 ]
 
+[[package]]
+name = "appdirs"
+version = "1.4.4"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/d7/d8/05696357e0311f5b5c316d7b95f46c669dd9c15aaeecbb48c7d0aeb88c40/appdirs-1.4.4.tar.gz", hash = "sha256:7d5d0167b2b1ba821647616af46a749d1c653740dd0d2415100fe26e27afdf41", size = 13470, upload-time = "2020-05-11T07:59:51.037Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3b/00/2344469e2084fb287c2e0b57b72910309874c3245463acd6cf5e3db69324/appdirs-1.4.4-py2.py3-none-any.whl", hash = "sha256:a841dacd6b99318a741b166adb07e19ee71a274450e68237b4650ca1055ab128", size = 9566, upload-time = "2020-05-11T07:59:49.499Z" },
+]
+
 [[package]]
 name = "apscheduler"
 version = "3.11.2"
@@ -1243,6 +1252,45 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/a7/27/b822b474aaefb684d11df358d52e012699a2a8af231f9b47c54b73f280cb/databricks_sdk-0.73.0-py3-none-any.whl", hash = "sha256:a4d3cfd19357a2b459d2dc3101454d7f0d1b62865ce099c35d0c342b66ac64ff", size = 753896, upload-time = "2025-11-05T06:52:56.451Z" },
 ]
 
+[[package]]
+name = "dataclasses-json"
+version = "0.6.7"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "marshmallow" },
+    { name = "typing-inspect" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/64/a4/f71d9cf3a5ac257c993b5ca3f93df5f7fb395c725e7f1e6479d2514173c3/dataclasses_json-0.6.7.tar.gz", hash = "sha256:b6b3e528266ea45b9535223bc53ca645f5208833c29229e847b3f26a1cc55fc0", size = 32227, upload-time = "2024-06-09T16:20:19.103Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/c3/be/d0d44e092656fe7a06b55e6103cbce807cdbdee17884a5367c68c9860853/dataclasses_json-0.6.7-py3-none-any.whl", hash = "sha256:0dbf33f26c8d5305befd61b39d2b3414e8a407bedc2834dea9b8d642666fb40a", size = 28686, upload-time = "2024-06-09T16:20:16.715Z" },
+]
+
+[[package]]
+name = "datasets"
+version = "2.19.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "aiohttp" },
+    { name = "dill" },
+    { name = "filelock" },
+    { name = "fsspec", extra = ["http"] },
+    { name = "huggingface-hub" },
+    { name = "multiprocess" },
+    { name = "numpy" },
+    { name = "packaging" },
+    { name = "pandas" },
+    { name = "pyarrow" },
+    { name = "pyarrow-hotfix" },
+    { name = "pyyaml" },
+    { name = "requests" },
+    { name = "tqdm" },
+    { name = "xxhash" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/52/e7/6ee66732f74e4fb1c8915e58b3c253aded777ad0fa457f3f831dd0cd09b4/datasets-2.19.2.tar.gz", hash = "sha256:eccb82fb3bb5ee26ccc6d7a15b7f1f834e2cc4e59b7cff7733a003552bad51ef", size = 2215337, upload-time = "2024-06-03T05:11:44.756Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3f/59/46818ebeb708234a60e42ccf409d20709e482519d2aa450b501ddbba4594/datasets-2.19.2-py3-none-any.whl", hash = "sha256:e07ff15d75b1af75c87dd96323ba2a361128d495136652f37fd62f918d17bb4e", size = 542113, upload-time = "2024-06-03T05:11:41.151Z" },
+]
+
 [[package]]
 name = "dateparser"
 version = "1.2.2"
@@ -1267,6 +1315,45 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/4e/8c/f3147f5c4b73e7550fe5f9352eaa956ae838d5c51eb58e7a25b9f3e2643b/decorator-5.2.1-py3-none-any.whl", hash = "sha256:d316bb415a2d9e2d2b3abcc4084c6502fc09240e292cd76a76afc106a1c8e04a", size = 9190, upload-time = "2025-02-24T04:41:32.565Z" },
 ]
 
+[[package]]
+name = "deepeval"
+version = "3.9.6"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "aiohttp" },
+    { name = "click" },
+    { name = "grpcio" },
+    { name = "jinja2" },
+    { name = "nest-asyncio" },
+    { name = "openai" },
+    { name = "opentelemetry-api" },
+    { name = "opentelemetry-sdk" },
+    { name = "portalocker" },
+    { name = "posthog" },
+    { name = "pydantic" },
+    { name = "pydantic-settings" },
+    { name = "pyfiglet" },
+    { name = "pytest" },
+    { name = "pytest-asyncio" },
+    { name = "pytest-repeat" },
+    { name = "pytest-rerunfailures" },
+    { name = "pytest-xdist" },
+    { name = "python-dotenv" },
+    { name = "requests" },
+    { name = "rich" },
+    { name = "sentry-sdk" },
+    { name = "setuptools" },
+    { name = "tabulate" },
+    { name = "tenacity" },
+    { name = "tqdm" },
+    { name = "typer" },
+    { name = "wheel" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c0/64/dd6c1bce14324c211d72facd6d4deb1453321d7e32a82b7d5f1ead7ba817/deepeval-3.9.6.tar.gz", hash = "sha256:07eaad40f17a21b809bd6719f9f4ae61d8880753edddaee2abbcd4a27cfb225d", size = 614512, upload-time = "2026-04-07T15:27:41.533Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/0e/3e/cac5dad55d9a9540b5288dbe853554638302df43c459e0f64663d5ad129a/deepeval-3.9.6-py3-none-any.whl", hash = "sha256:6a368cdd7fda7bf94ef1bcb65b40914271096dbdc54aa8988aa62bda41c68f94", size = 843386, upload-time = "2026-04-07T15:27:39.134Z" },
+]
+
 [[package]]
 name = "defusedxml"
 version = "0.7.1"
@@ -1459,6 +1546,10 @@ dev = [
     { name = "types-ujson" },
     { name = "xinference-client" },
 ]
+evaluation = [
+    { name = "deepeval" },
+    { name = "ragas" },
+]
 storage = [
     { name = "azure-storage-blob" },
     { name = "bce-python-sdk" },
@@ -1756,6 +1847,10 @@ dev = [
     { name = "types-ujson", specifier = ">=5.10.0" },
     { name = "xinference-client", specifier = "~=2.4.0" },
 ]
+evaluation = [
+    { name = "deepeval", specifier = ">=2.0.0" },
+    { name = "ragas", specifier = ">=0.2.0" },
+]
 storage = [
     { name = "azure-storage-blob", specifier = "==12.28.0" },
     { name = "bce-python-sdk", specifier = "~=0.9.69" },
@@ -2167,6 +2262,24 @@ dependencies = [
 [package.metadata]
 requires-dist = [{ name = "weaviate-client", specifier = "==4.20.5" }]
 
+[[package]]
+name = "dill"
+version = "0.3.8"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/17/4d/ac7ffa80c69ea1df30a8aa11b3578692a5118e7cd1aa157e3ef73b092d15/dill-0.3.8.tar.gz", hash = "sha256:3ebe3c479ad625c4553aca177444d89b486b1d84982eeacded644afc0cf797ca", size = 184847, upload-time = "2024-01-27T23:42:16.145Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/c9/7a/cef76fd8438a42f96db64ddaa85280485a9c395e7df3db8158cfec1eee34/dill-0.3.8-py3-none-any.whl", hash = "sha256:c36ca9ffb54365bdd2f8eb3eff7d2a21237f8452b57ace88b1ac615b7e815bd7", size = 116252, upload-time = "2024-01-27T23:42:14.239Z" },
+]
+
+[[package]]
+name = "diskcache"
+version = "5.6.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/3f/21/1c1ffc1a039ddcc459db43cc108658f32c57d271d7289a2794e401d0fdb6/diskcache-5.6.3.tar.gz", hash = "sha256:2c3a3fa2743d8535d832ec61c2054a1641f41775aa7c556758a109941e33e4fc", size = 67916, upload-time = "2023-08-31T06:12:00.316Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3f/27/4570e78fc0bf5ea0ca45eb1de3818a23787af9b390c0b0a0033a1b8236f9/diskcache-5.6.3-py3-none-any.whl", hash = "sha256:5e31b2d5fbad117cc363ebaf6b689474db18a1f6438bc82358b024abd4c2ca19", size = 45550, upload-time = "2023-08-31T06:11:58.822Z" },
+]
+
 [[package]]
 name = "diskcache-weave"
 version = "5.6.3.post1"
@@ -2546,11 +2659,16 @@ wheels = [
 
 [[package]]
 name = "fsspec"
-version = "2025.10.0"
+version = "2024.3.1"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/24/7f/2747c0d332b9acfa75dc84447a066fdf812b5a6b8d30472b74d309bfe8cb/fsspec-2025.10.0.tar.gz", hash = "sha256:b6789427626f068f9a83ca4e8a3cc050850b6c0f71f99ddb4f542b8266a26a59", size = 309285, upload-time = "2025-10-30T14:58:44.036Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/8b/b8/e3ba21f03c00c27adc9a8cd1cab8adfb37b6024757133924a9a4eab63a83/fsspec-2024.3.1.tar.gz", hash = "sha256:f39780e282d7d117ffb42bb96992f8a90795e4d0fb0f661a70ca39fe9c43ded9", size = 170742, upload-time = "2024-03-18T19:35:13.995Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/eb/02/a6b21098b1d5d6249b7c5ab69dde30108a71e4e819d4a9778f1de1d5b70d/fsspec-2025.10.0-py3-none-any.whl", hash = "sha256:7c7712353ae7d875407f97715f0e1ffcc21e33d5b24556cb1e090ae9409ec61d", size = 200966, upload-time = "2025-10-30T14:58:42.53Z" },
+    { url = "https://files.pythonhosted.org/packages/93/6d/66d48b03460768f523da62a57a7e14e5e95fdf339d79e996ce3cecda2cdb/fsspec-2024.3.1-py3-none-any.whl", hash = "sha256:918d18d41bf73f0e2b261824baeb1b124bcf771767e3a26425cd7dec3332f512", size = 171991, upload-time = "2024-03-18T19:35:11.259Z" },
+]
+
+[package.optional-dependencies]
+http = [
+    { name = "aiohttp" },
 ]
 
 [[package]]
@@ -3333,6 +3451,28 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e5/ca/1172b6638d52f2d6caa2dd262ec4c811ba59eee96d54a7701930726bce18/installer-0.7.0-py3-none-any.whl", hash = "sha256:05d1933f0a5ba7d8d6296bb6d5018e7c94fa473ceb10cf198a92ccea19c27b53", size = 453838, upload-time = "2023-03-17T20:39:36.219Z" },
 ]
 
+[[package]]
+name = "instructor"
+version = "1.15.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "aiohttp" },
+    { name = "docstring-parser" },
+    { name = "jinja2" },
+    { name = "jiter" },
+    { name = "openai" },
+    { name = "pydantic" },
+    { name = "pydantic-core" },
+    { name = "requests" },
+    { name = "rich" },
+    { name = "tenacity" },
+    { name = "typer" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/dc/a4/832cfb15420360e26d2d85bd9d5fe1e4b839d52587574d389bc31284bf6f/instructor-1.15.1.tar.gz", hash = "sha256:c72406469d9025b742e83cf0c13e914b317db2089d08d889944e74fcd659ef94", size = 69948370, upload-time = "2026-04-03T01:51:30.107Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d8/c8/36c5d9b80aaf40ba9a7084a8fc18c967db6bf248a4cc8d0f0816b14284be/instructor-1.15.1-py3-none-any.whl", hash = "sha256:be81d17ba2b154a04ab4720808f24f9d6b598f80992f82eaf9cc79006099cf6c", size = 178156, upload-time = "2026-04-03T01:51:23.098Z" },
+]
+
 [[package]]
 name = "intersystems-irispython"
 version = "5.3.2"
@@ -3442,6 +3582,27 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e1/03/7afcecb4242d93b684708b47fb014abdc1922a01b38c0e30f1117ae74a83/json_repair-0.59.2-py3-none-any.whl", hash = "sha256:6ca6238519c24f671bcb05d1f38a0d6a452bb4ca5af82137595c5c2f1a0fb785", size = 46918, upload-time = "2026-04-11T15:55:39.817Z" },
 ]
 
+[[package]]
+name = "jsonpatch"
+version = "1.33"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "jsonpointer" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/42/78/18813351fe5d63acad16aec57f94ec2b70a09e53ca98145589e185423873/jsonpatch-1.33.tar.gz", hash = "sha256:9fcd4009c41e6d12348b4a0ff2563ba56a2923a7dfee731d004e212e1ee5030c", size = 21699, upload-time = "2023-06-26T12:07:29.144Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/73/07/02e16ed01e04a374e644b575638ec7987ae846d25ad97bcc9945a3ee4b0e/jsonpatch-1.33-py2.py3-none-any.whl", hash = "sha256:0ae28c0cd062bbd8b8ecc26d7d164fbbea9652a1a3693f3b956c1eae5145dade", size = 12898, upload-time = "2023-06-16T21:01:28.466Z" },
+]
+
+[[package]]
+name = "jsonpointer"
+version = "3.1.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/18/c7/af399a2e7a67fd18d63c40c5e62d3af4e67b836a2107468b6a5ea24c4304/jsonpointer-3.1.1.tar.gz", hash = "sha256:0b801c7db33a904024f6004d526dcc53bbb8a4a0f4e32bfd10beadf60adf1900", size = 9068, upload-time = "2026-03-23T22:32:32.458Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/9e/6a/a83720e953b1682d2d109d3c2dbb0bc9bf28cc1cbc205be4ef4be5da709d/jsonpointer-3.1.1-py3-none-any.whl", hash = "sha256:8ff8b95779d071ba472cf5bc913028df06031797532f08a7d5b602d8b2a488ca", size = 7659, upload-time = "2026-03-23T22:32:31.568Z" },
+]
+
 [[package]]
 name = "jsonschema"
 version = "4.25.1"
@@ -3515,6 +3676,106 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/89/43/d9bebfc3db7dea6ec80df5cb2aad8d274dd18ec2edd6c4f21f32c237cbbb/kubernetes-33.1.0-py2.py3-none-any.whl", hash = "sha256:544de42b24b64287f7e0aa9513c93cb503f7f40eea39b20f66810011a86eabc5", size = 1941335, upload-time = "2025-06-09T21:57:56.327Z" },
 ]
 
+[[package]]
+name = "langchain"
+version = "1.2.15"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+    { name = "langgraph" },
+    { name = "pydantic" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/98/3f/888a7099d2bd2917f8b0c3ffc7e347f1e664cf64267820b0b923c4f339fc/langchain-1.2.15.tar.gz", hash = "sha256:1717b6719daefae90b2728314a5e2a117ff916291e2862595b6c3d6fba33d652", size = 574732, upload-time = "2026-04-03T14:26:03.994Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3f/e8/a3b8cb0005553f6a876865073c81ef93bd7c5b18381bcb9ba4013af96ebc/langchain-1.2.15-py3-none-any.whl", hash = "sha256:e349db349cb3e9550c4044077cf90a1717691756cc236438404b23500e615874", size = 112714, upload-time = "2026-04-03T14:26:02.557Z" },
+]
+
+[[package]]
+name = "langchain-classic"
+version = "1.0.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+    { name = "langchain-text-splitters" },
+    { name = "langsmith" },
+    { name = "pydantic" },
+    { name = "pyyaml" },
+    { name = "requests" },
+    { name = "sqlalchemy" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/32/04/b01c09e37414bab9f209efa311502841a3c0de5bc6c35e729c8d8a9893c9/langchain_classic-1.0.3.tar.gz", hash = "sha256:168ef1dfbfb18cae5a9ff0accecc9413a5b5aa3464b53fa841561a3384b6324a", size = 10534933, upload-time = "2026-03-13T13:56:11.96Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ab/e6/cfdeedec0537ffbf5041773590d25beb7f2aa467cc6630e788c9c7c72c3e/langchain_classic-1.0.3-py3-none-any.whl", hash = "sha256:26df1ec9806b1fbff19d9085a747ea7d8d82d7e3fb1d25132859979de627ef79", size = 1041335, upload-time = "2026-03-13T13:56:09.677Z" },
+]
+
+[[package]]
+name = "langchain-community"
+version = "0.4.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "aiohttp" },
+    { name = "dataclasses-json" },
+    { name = "httpx-sse" },
+    { name = "langchain-classic" },
+    { name = "langchain-core" },
+    { name = "langsmith" },
+    { name = "numpy" },
+    { name = "pydantic-settings" },
+    { name = "pyyaml" },
+    { name = "requests" },
+    { name = "sqlalchemy" },
+    { name = "tenacity" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/53/97/a03585d42b9bdb6fbd935282d6e3348b10322a24e6ce12d0c99eb461d9af/langchain_community-0.4.1.tar.gz", hash = "sha256:f3b211832728ee89f169ddce8579b80a085222ddb4f4ed445a46e977d17b1e85", size = 33241144, upload-time = "2025-10-27T15:20:32.504Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/f0/a4/c4fde67f193401512337456cabc2148f2c43316e445f5decd9f8806e2992/langchain_community-0.4.1-py3-none-any.whl", hash = "sha256:2135abb2c7748a35c84613108f7ebf30f8505b18c3c18305ffaecfc7651f6c6a", size = 2533285, upload-time = "2025-10-27T15:20:30.767Z" },
+]
+
+[[package]]
+name = "langchain-core"
+version = "1.2.28"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "jsonpatch" },
+    { name = "langsmith" },
+    { name = "packaging" },
+    { name = "pydantic" },
+    { name = "pyyaml" },
+    { name = "tenacity" },
+    { name = "typing-extensions" },
+    { name = "uuid-utils" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/f8/a4/317a1a3ac1df33a64adb3670bf88bbe3b3d5baa274db6863a979db472897/langchain_core-1.2.28.tar.gz", hash = "sha256:271a3d8bd618f795fdeba112b0753980457fc90537c46a0c11998516a74dc2cb", size = 846119, upload-time = "2026-04-08T18:19:34.867Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/a8/92/32f785f077c7e898da97064f113c73fbd9ad55d1e2169cf3a391b183dedb/langchain_core-1.2.28-py3-none-any.whl", hash = "sha256:80764232581eaf8057bcefa71dbf8adc1f6a28d257ebd8b95ba9b8b452e8c6ac", size = 508727, upload-time = "2026-04-08T18:19:32.823Z" },
+]
+
+[[package]]
+name = "langchain-openai"
+version = "1.1.9"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+    { name = "openai" },
+    { name = "tiktoken" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/49/ae/1dbeb49ab8f098f78ec52e21627e705e5d7c684dc8826c2c34cc2746233a/langchain_openai-1.1.9.tar.gz", hash = "sha256:fdee25dcf4b0685d8e2f59856f4d5405431ef9e04ab53afe19e2e8360fed8234", size = 1004828, upload-time = "2026-02-10T21:03:21.615Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/52/a1/8a20d19f69d022c10d34afa42d972cc50f971b880d0eb4a828cf3dd824a8/langchain_openai-1.1.9-py3-none-any.whl", hash = "sha256:ca2482b136c45fb67c0db84a9817de675e0eb8fb2203a33914c1b7a96f273940", size = 85769, upload-time = "2026-02-10T21:03:20.333Z" },
+]
+
+[[package]]
+name = "langchain-text-splitters"
+version = "1.1.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/85/38/14121ead61e0e75f79c3a35e5148ac7c2fe754a55f76eab3eed573269524/langchain_text_splitters-1.1.1.tar.gz", hash = "sha256:34861abe7c07d9e49d4dc852d0129e26b32738b60a74486853ec9b6d6a8e01d2", size = 279352, upload-time = "2026-02-18T23:02:42.798Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/84/66/d9e0c3b83b0ad75ee746c51ba347cacecb8d656b96e1d513f3e334d1ccab/langchain_text_splitters-1.1.1-py3-none-any.whl", hash = "sha256:5ed0d7bf314ba925041e7d7d17cd8b10f688300d5415fb26c29442f061e329dc", size = 35734, upload-time = "2026-02-18T23:02:41.913Z" },
+]
+
 [[package]]
 name = "langdetect"
 version = "1.0.9"
@@ -3543,6 +3804,62 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/be/0a/b84e3e68a690ccfe6d64953c572772c685fcb0915b7f2ee3a87c22e388ab/langfuse-4.2.0-py3-none-any.whl", hash = "sha256:bfd760bf10fd0228f297f6369436620f76d16b589de46393d65706b27e4e4082", size = 475449, upload-time = "2026-04-10T11:55:23.624Z" },
 ]
 
+[[package]]
+name = "langgraph"
+version = "1.1.6"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+    { name = "langgraph-checkpoint" },
+    { name = "langgraph-prebuilt" },
+    { name = "langgraph-sdk" },
+    { name = "pydantic" },
+    { name = "xxhash" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/5c/e5/d3f72ead3c7f15769d5a9c07e373628f1fbaf6cbe7735694d7085859acf6/langgraph-1.1.6.tar.gz", hash = "sha256:1783f764b08a607e9f288dbcf6da61caeb0dd40b337e5c9fb8b412341fbc0b60", size = 549634, upload-time = "2026-04-03T19:01:32.561Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/71/e6/b36ecdb3ff4ba9a290708d514bae89ebbe2f554b6abbe4642acf3fddbe51/langgraph-1.1.6-py3-none-any.whl", hash = "sha256:fdbf5f54fa5a5a4c4b09b7b5e537f1b2fa283d2f0f610d3457ddeecb479458b9", size = 169755, upload-time = "2026-04-03T19:01:30.686Z" },
+]
+
+[[package]]
+name = "langgraph-checkpoint"
+version = "4.0.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+    { name = "ormsgpack" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b1/44/a8df45d1e8b4637e29789fa8bae1db022c953cc7ac80093cfc52e923547e/langgraph_checkpoint-4.0.1.tar.gz", hash = "sha256:b433123735df11ade28829e40ce25b9be614930cd50245ff2af60629234befd9", size = 158135, upload-time = "2026-02-27T21:06:16.092Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/65/4c/09a4a0c42f5d2fc38d6c4d67884788eff7fd2cfdf367fdf7033de908b4c0/langgraph_checkpoint-4.0.1-py3-none-any.whl", hash = "sha256:e3adcd7a0e0166f3b48b8cf508ce0ea366e7420b5a73aa81289888727769b034", size = 50453, upload-time = "2026-02-27T21:06:14.293Z" },
+]
+
+[[package]]
+name = "langgraph-prebuilt"
+version = "1.0.9"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "langchain-core" },
+    { name = "langgraph-checkpoint" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/99/4c/06dac899f4945bedb0c3a1583c19484c2cc894114ea30d9a538dd270086e/langgraph_prebuilt-1.0.9.tar.gz", hash = "sha256:93de7512e9caade4b77ead92428f6215c521fdb71b8ffda8cd55f0ad814e64de", size = 165850, upload-time = "2026-04-03T14:06:37.721Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/1d/a2/8368ac187b75e7f9d938ca075d34f116683f5cfc48d924029ee79aea147b/langgraph_prebuilt-1.0.9-py3-none-any.whl", hash = "sha256:776c8e3154a5aef5ad0e5bf3f263f2dcaab3983786cc20014b7f955d99d2d1b2", size = 35958, upload-time = "2026-04-03T14:06:36.58Z" },
+]
+
+[[package]]
+name = "langgraph-sdk"
+version = "0.3.13"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "httpx" },
+    { name = "orjson" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/0e/db/77a45127dddcfea5e4256ba916182903e4c31dc4cfca305b8c386f0a9e53/langgraph_sdk-0.3.13.tar.gz", hash = "sha256:419ca5663eec3cec192ad194ac0647c0c826866b446073eb40f384f950986cd5", size = 196360, upload-time = "2026-04-07T20:34:18.766Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/fe/ef/64d64e9f8eea47ce7b939aa6da6863b674c8d418647813c20111645fcc62/langgraph_sdk-0.3.13-py3-none-any.whl", hash = "sha256:aee09e345c90775f6de9d6f4c7b847cfc652e49055c27a2aed0d981af2af3bd0", size = 96668, upload-time = "2026-04-07T20:34:17.866Z" },
+]
+
 [[package]]
 name = "langsmith"
 version = "0.7.30"
@@ -3731,6 +4048,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e5/f1/216fc1bbfd74011693a4fd837e7026152e89c4bcf3e77b6692fba9923123/markupsafe-3.0.3-cp312-cp312-win_arm64.whl", hash = "sha256:35add3b638a5d900e807944a078b51922212fb3dedb01633a8defc4b01a3c85f", size = 13906, upload-time = "2025-09-27T18:36:40.689Z" },
 ]
 
+[[package]]
+name = "marshmallow"
+version = "3.26.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "packaging" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/55/79/de6c16cc902f4fc372236926b0ce2ab7845268dcc30fb2fbb7f71b418631/marshmallow-3.26.2.tar.gz", hash = "sha256:bbe2adb5a03e6e3571b573f42527c6fe926e17467833660bebd11593ab8dfd57", size = 222095, upload-time = "2025-12-22T06:53:53.309Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/be/2f/5108cb3ee4ba6501748c4908b908e55f42a5b66245b4cfe0c99326e1ef6e/marshmallow-3.26.2-py3-none-any.whl", hash = "sha256:013fa8a3c4c276c24d26d84ce934dc964e2aa794345a0f8c7e5a7191482c8a73", size = 50964, upload-time = "2025-12-22T06:53:51.801Z" },
+]
+
 [[package]]
 name = "mdurl"
 version = "0.1.2"
@@ -3870,6 +4199,22 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/b7/da/7d22601b625e241d4f23ef1ebff8acfc60da633c9e7e7922e24d10f592b3/multidict-6.7.0-py3-none-any.whl", hash = "sha256:394fc5c42a333c9ffc3e421a4c85e08580d990e08b99f6bf35b4132114c5dcb3", size = 12317, upload-time = "2025-10-06T14:52:29.272Z" },
 ]
 
+[[package]]
+name = "multiprocess"
+version = "0.70.16"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "dill" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b5/ae/04f39c5d0d0def03247c2893d6f2b83c136bf3320a2154d7b8858f2ba72d/multiprocess-0.70.16.tar.gz", hash = "sha256:161af703d4652a0e1410be6abccecde4a7ddffd19341be0a7011b94aeb171ac1", size = 1772603, upload-time = "2024-01-28T18:52:34.85Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/bc/f7/7ec7fddc92e50714ea3745631f79bd9c96424cb2702632521028e57d3a36/multiprocess-0.70.16-py310-none-any.whl", hash = "sha256:c4a9944c67bd49f823687463660a2d6daae94c289adff97e0f9d696ba6371d02", size = 134824, upload-time = "2024-01-28T18:52:26.062Z" },
+    { url = "https://files.pythonhosted.org/packages/50/15/b56e50e8debaf439f44befec5b2af11db85f6e0f344c3113ae0be0593a91/multiprocess-0.70.16-py311-none-any.whl", hash = "sha256:af4cabb0dac72abfb1e794fa7855c325fd2b55a10a44628a3c1ad3311c04127a", size = 143519, upload-time = "2024-01-28T18:52:28.115Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/7d/a988f258104dcd2ccf1ed40fdc97e26c4ac351eeaf81d76e266c52d84e2f/multiprocess-0.70.16-py312-none-any.whl", hash = "sha256:fc0544c531920dde3b00c29863377f87e1632601092ea2daca74e4beb40faa2e", size = 146741, upload-time = "2024-01-28T18:52:29.395Z" },
+    { url = "https://files.pythonhosted.org/packages/ea/89/38df130f2c799090c978b366cfdf5b96d08de5b29a4a293df7f7429fa50b/multiprocess-0.70.16-py38-none-any.whl", hash = "sha256:a71d82033454891091a226dfc319d0cfa8019a4e888ef9ca910372a446de4435", size = 132628, upload-time = "2024-01-28T18:52:30.853Z" },
+    { url = "https://files.pythonhosted.org/packages/da/d9/f7f9379981e39b8c2511c9e0326d212accacb82f12fbfdc1aa2ce2a7b2b6/multiprocess-0.70.16-py39-none-any.whl", hash = "sha256:a0bafd3ae1b732eac64be2e72038231c1ba97724b60b09400d68f229fcc2fbf3", size = 133351, upload-time = "2024-01-28T18:52:31.981Z" },
+]
+
 [[package]]
 name = "murmurhash"
 version = "1.0.15"
@@ -3940,6 +4285,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/15/dd/b3250826c29cee7816de4409a2fe5e469a68b9a89f6bfaa5eed74f05532c/mysql_connector_python-9.6.0-py2.py3-none-any.whl", hash = "sha256:44b0fb57207ebc6ae05b5b21b7968a9ed33b29187fe87b38951bad2a334d75d5", size = 480527, upload-time = "2026-02-10T12:04:36.176Z" },
 ]
 
+[[package]]
+name = "nest-asyncio"
+version = "1.6.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/83/f8/51569ac65d696c8ecbee95938f89d4abf00f47d58d48f6fbabfe8f0baefe/nest_asyncio-1.6.0.tar.gz", hash = "sha256:6f172d5449aca15afd6c646851f4e31e02c598d553a667e38cafa997cfec55fe", size = 7418, upload-time = "2024-01-21T14:25:19.227Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/a0/c4/c2971a3ba4c6103a3d10c4b0f24f461ddc027f0f09763220cf35ca1401b3/nest_asyncio-1.6.0-py3-none-any.whl", hash = "sha256:87af6efd6b5e897c81050477ef65c62e2b2f35d51703cae01aff2905b1852e1c", size = 5195, upload-time = "2024-01-21T14:25:17.223Z" },
+]
+
 [[package]]
 name = "networkx"
 version = "3.6"
@@ -4567,6 +4921,23 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/04/3d/b4fefad8bdf91e0fe212eb04975aeb36ea92997269d68857efcc7eb1dda3/orjson-3.11.6-cp312-cp312-win_arm64.whl", hash = "sha256:65dfa096f4e3a5e02834b681f539a87fbe85adc82001383c0db907557f666bfc", size = 135212, upload-time = "2026-01-29T15:12:18.3Z" },
 ]
 
+[[package]]
+name = "ormsgpack"
+version = "1.12.2"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/12/0c/f1761e21486942ab9bb6feaebc610fa074f7c5e496e6962dea5873348077/ormsgpack-1.12.2.tar.gz", hash = "sha256:944a2233640273bee67521795a73cf1e959538e0dfb7ac635505010455e53b33", size = 39031, upload-time = "2026-01-18T20:55:28.023Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/4c/36/16c4b1921c308a92cef3bf6663226ae283395aa0ff6e154f925c32e91ff5/ormsgpack-1.12.2-cp312-cp312-macosx_10_12_x86_64.macosx_11_0_arm64.macosx_10_12_universal2.whl", hash = "sha256:7a29d09b64b9694b588ff2f80e9826bdceb3a2b91523c5beae1fab27d5c940e7", size = 378618, upload-time = "2026-01-18T20:55:50.835Z" },
+    { url = "https://files.pythonhosted.org/packages/c0/68/468de634079615abf66ed13bb5c34ff71da237213f29294363beeeca5306/ormsgpack-1.12.2-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0b39e629fd2e1c5b2f46f99778450b59454d1f901bc507963168985e79f09c5d", size = 203186, upload-time = "2026-01-18T20:56:11.163Z" },
+    { url = "https://files.pythonhosted.org/packages/73/a9/d756e01961442688b7939bacd87ce13bfad7d26ce24f910f6028178b2cc8/ormsgpack-1.12.2-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:958dcb270d30a7cb633a45ee62b9444433fa571a752d2ca484efdac07480876e", size = 210738, upload-time = "2026-01-18T20:56:09.181Z" },
+    { url = "https://files.pythonhosted.org/packages/7b/ba/795b1036888542c9113269a3f5690ab53dd2258c6fb17676ac4bd44fcf94/ormsgpack-1.12.2-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:58d379d72b6c5e964851c77cfedfb386e474adee4fd39791c2c5d9efb53505cc", size = 212569, upload-time = "2026-01-18T20:56:06.135Z" },
+    { url = "https://files.pythonhosted.org/packages/6c/aa/bff73c57497b9e0cba8837c7e4bcab584b1a6dbc91a5dd5526784a5030c8/ormsgpack-1.12.2-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:8463a3fc5f09832e67bdb0e2fda6d518dc4281b133166146a67f54c08496442e", size = 387166, upload-time = "2026-01-18T20:55:36.738Z" },
+    { url = "https://files.pythonhosted.org/packages/d3/cf/f8283cba44bcb7b14f97b6274d449db276b3a86589bdb363169b51bc12de/ormsgpack-1.12.2-cp312-cp312-musllinux_1_2_armv7l.whl", hash = "sha256:eddffb77eff0bad4e67547d67a130604e7e2dfbb7b0cde0796045be4090f35c6", size = 482498, upload-time = "2026-01-18T20:55:29.626Z" },
+    { url = "https://files.pythonhosted.org/packages/05/be/71e37b852d723dfcbe952ad04178c030df60d6b78eba26bfd14c9a40575e/ormsgpack-1.12.2-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:fcd55e5f6ba0dbce624942adf9f152062135f991a0126064889f68eb850de0dd", size = 425518, upload-time = "2026-01-18T20:55:49.556Z" },
+    { url = "https://files.pythonhosted.org/packages/7a/0c/9803aa883d18c7ef197213cd2cbf73ba76472a11fe100fb7dab2884edf48/ormsgpack-1.12.2-cp312-cp312-win_amd64.whl", hash = "sha256:d024b40828f1dde5654faebd0d824f9cc29ad46891f626272dd5bfd7af2333a4", size = 117462, upload-time = "2026-01-18T20:55:47.726Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/9e/029e898298b2cc662f10d7a15652a53e3b525b1e7f07e21fef8536a09bb8/ormsgpack-1.12.2-cp312-cp312-win_arm64.whl", hash = "sha256:da538c542bac7d1c8f3f2a937863dba36f013108ce63e55745941dda4b75dbb6", size = 111559, upload-time = "2026-01-18T20:55:54.273Z" },
+]
+
 [[package]]
 name = "oss2"
 version = "2.19.1"
@@ -4793,7 +5164,7 @@ wheels = [
 
 [[package]]
 name = "posthog"
-version = "7.0.1"
+version = "5.4.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "backoff" },
@@ -4801,11 +5172,10 @@ dependencies = [
     { name = "python-dateutil" },
     { name = "requests" },
     { name = "six" },
-    { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/a2/d4/b9afe855a8a7a1bf4459c28ae4c300b40338122dc850acabefcf2c3df24d/posthog-7.0.1.tar.gz", hash = "sha256:21150562c2630a599c1d7eac94bc5c64eb6f6acbf3ff52ccf1e57345706db05a", size = 126985, upload-time = "2025-11-15T12:44:22.465Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/48/20/60ae67bb9d82f00427946218d49e2e7e80fb41c15dc5019482289ec9ce8d/posthog-5.4.0.tar.gz", hash = "sha256:701669261b8d07cdde0276e5bc096b87f9e200e3b9589c5ebff14df658c5893c", size = 88076, upload-time = "2025-06-20T23:19:23.485Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/05/0c/8b6b20b0be71725e6e8a32dcd460cdbf62fe6df9bc656a650150dc98fedd/posthog-7.0.1-py3-none-any.whl", hash = "sha256:efe212d8d88a9ba80a20c588eab4baf4b1a5e90e40b551160a5603bb21e96904", size = 145234, upload-time = "2025-11-15T12:44:21.247Z" },
+    { url = "https://files.pythonhosted.org/packages/4f/98/e480cab9a08d1c09b1c59a93dade92c1bb7544826684ff2acbfd10fcfbd4/posthog-5.4.0-py3-none-any.whl", hash = "sha256:284dfa302f64353484420b52d4ad81ff5c2c2d1d607c4e2db602ac72761831bd", size = 105364, upload-time = "2025-06-20T23:19:22.001Z" },
 ]
 
 [[package]]
@@ -5000,6 +5370,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/f6/70/1fdda42d65b28b078e93d75d371b2185a61da89dda4def8ba6ba41ebdeb4/pyarrow-23.0.1-cp312-cp312-win_amd64.whl", hash = "sha256:07deae7783782ac7250989a7b2ecde9b3c343a643f82e8a4df03d93b633006f0", size = 27620678, upload-time = "2026-02-16T10:10:39.31Z" },
 ]
 
+[[package]]
+name = "pyarrow-hotfix"
+version = "0.7"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/d2/ed/c3e8677f7abf3981838c2af7b5ac03e3589b3ef94fcb31d575426abae904/pyarrow_hotfix-0.7.tar.gz", hash = "sha256:59399cd58bdd978b2e42816a4183a55c6472d4e33d183351b6069f11ed42661d", size = 9910, upload-time = "2025-04-25T10:17:06.247Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/2e/c3/94ade4906a2f88bc935772f59c934013b4205e773bcb4239db114a6da136/pyarrow_hotfix-0.7-py3-none-any.whl", hash = "sha256:3236f3b5f1260f0e2ac070a55c1a7b339c4bb7267839bd2015e283234e758100", size = 7923, upload-time = "2025-04-25T10:17:05.224Z" },
+]
+
 [[package]]
 name = "pyasn1"
 version = "0.6.3"
@@ -5120,6 +5499,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/00/4b/ccc026168948fec4f7555b9164c724cf4125eac006e176541483d2c959be/pydantic_settings-2.13.1-py3-none-any.whl", hash = "sha256:d56fd801823dbeae7f0975e1f8c8e25c258eb75d278ea7abb5d9cebb01b56237", size = 58929, upload-time = "2026-02-19T13:45:06.034Z" },
 ]
 
+[[package]]
+name = "pyfiglet"
+version = "1.0.4"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/c8/e3/0a86276ad2c383ce08d76110a8eec2fe22e7051c4b8ba3fa163a0b08c428/pyfiglet-1.0.4.tar.gz", hash = "sha256:db9c9940ed1bf3048deff534ed52ff2dafbbc2cd7610b17bb5eca1df6d4278ef", size = 1560615, upload-time = "2025-08-15T18:32:47.302Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/9f/5c/fe9f95abd5eaedfa69f31e450f7e2768bef121dbdf25bcddee2cd3087a16/pyfiglet-1.0.4-py3-none-any.whl", hash = "sha256:65b57b7a8e1dff8a67dc8e940a117238661d5e14c3e49121032bd404d9b2b39f", size = 1806118, upload-time = "2025-08-15T18:32:45.556Z" },
+]
+
 [[package]]
 name = "pygments"
 version = "2.20.0"
@@ -5329,6 +5717,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/d4/24/a372aaf5c9b7208e7112038812994107bc65a84cd00e0354a88c2c77a617/pytest-9.0.3-py3-none-any.whl", hash = "sha256:2c5efc453d45394fdd706ade797c0a81091eccd1d6e4bccfcd476e2b8e0ab5d9", size = 375249, upload-time = "2026-04-07T17:16:16.13Z" },
 ]
 
+[[package]]
+name = "pytest-asyncio"
+version = "1.3.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "pytest" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/90/2c/8af215c0f776415f3590cac4f9086ccefd6fd463befeae41cd4d3f193e5a/pytest_asyncio-1.3.0.tar.gz", hash = "sha256:d7f52f36d231b80ee124cd216ffb19369aa168fc10095013c6b014a34d3ee9e5", size = 50087, upload-time = "2025-11-10T16:07:47.256Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/e5/35/f8b19922b6a25bc0880171a2f1a003eaeb93657475193ab516fd87cac9da/pytest_asyncio-1.3.0-py3-none-any.whl", hash = "sha256:611e26147c7f77640e6d0a92a38ed17c3e9848063698d5c93d5aa7aa11cebff5", size = 15075, upload-time = "2025-11-10T16:07:45.537Z" },
+]
+
 [[package]]
 name = "pytest-benchmark"
 version = "5.2.3"
@@ -5381,6 +5782,31 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/5a/cc/06253936f4a7fa2e0f48dfe6d851d9c56df896a9ab09ac019d70b760619c/pytest_mock-3.15.1-py3-none-any.whl", hash = "sha256:0a25e2eb88fe5168d535041d09a4529a188176ae608a6d249ee65abc0949630d", size = 10095, upload-time = "2025-09-16T16:37:25.734Z" },
 ]
 
+[[package]]
+name = "pytest-repeat"
+version = "0.9.4"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "pytest" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/80/d4/69e9dbb9b8266df0b157c72be32083403c412990af15c7c15f7a3fd1b142/pytest_repeat-0.9.4.tar.gz", hash = "sha256:d92ac14dfaa6ffcfe6917e5d16f0c9bc82380c135b03c2a5f412d2637f224485", size = 6488, upload-time = "2025-04-07T14:59:53.077Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/73/d4/8b706b81b07b43081bd68a2c0359fe895b74bf664b20aca8005d2bb3be71/pytest_repeat-0.9.4-py3-none-any.whl", hash = "sha256:c1738b4e412a6f3b3b9e0b8b29fcd7a423e50f87381ad9307ef6f5a8601139f3", size = 4180, upload-time = "2025-04-07T14:59:51.492Z" },
+]
+
+[[package]]
+name = "pytest-rerunfailures"
+version = "16.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "packaging" },
+    { name = "pytest" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/de/04/71e9520551fc8fe2cf5c1a1842e4e600265b0815f2016b7c27ec85688682/pytest_rerunfailures-16.1.tar.gz", hash = "sha256:c38b266db8a808953ebd71ac25c381cb1981a78ff9340a14bcb9f1b9bff1899e", size = 30889, upload-time = "2025-10-10T07:06:01.238Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/77/54/60eabb34445e3db3d3d874dc1dfa72751bfec3265bd611cb13c8b290adea/pytest_rerunfailures-16.1-py3-none-any.whl", hash = "sha256:5d11b12c0ca9a1665b5054052fcc1084f8deadd9328962745ef6b04e26382e86", size = 14093, upload-time = "2025-10-10T07:06:00.019Z" },
+]
+
 [[package]]
 name = "pytest-timeout"
 version = "2.4.0"
@@ -5581,6 +6007,35 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/3a/fa/5abd82cde353f1009c068cca820195efd94e403d261b787e78ea7a9c8318/qdrant_client-1.9.0-py3-none-any.whl", hash = "sha256:ee02893eab1f642481b1ac1e38eb68ec30bab0f673bef7cc05c19fa5d2cbf43e", size = 229258, upload-time = "2024-04-22T13:35:46.81Z" },
 ]
 
+[[package]]
+name = "ragas"
+version = "0.3.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "appdirs" },
+    { name = "datasets" },
+    { name = "diskcache" },
+    { name = "gitpython" },
+    { name = "instructor" },
+    { name = "langchain" },
+    { name = "langchain-community" },
+    { name = "langchain-core" },
+    { name = "langchain-openai" },
+    { name = "nest-asyncio" },
+    { name = "numpy" },
+    { name = "openai" },
+    { name = "pillow" },
+    { name = "pydantic" },
+    { name = "rich" },
+    { name = "tiktoken" },
+    { name = "tqdm" },
+    { name = "typer" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/5c/3f/44ffcfcd10b885c330f5e07f327edcf8965674103f81a8766a01672c3f27/ragas-0.3.2.tar.gz", hash = "sha256:a800a5326f0d5bfa086cf8832d4b1031e4b21ff063f83d7d9388ee36e1a93fe6", size = 257091, upload-time = "2025-08-19T12:04:18.655Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/1f/1a/d08bb5fd256c375dae885e508c00636cba5692e772616e49c6d4cfdec52c/ragas-0.3.2-py3-none-any.whl", hash = "sha256:ccf4447fdc6daf69b5fafb26d8baa5095e4194a4dc87091b2a118f68322e7f1b", size = 277283, upload-time = "2025-08-19T12:04:17.329Z" },
+]
+
 [[package]]
 name = "rapidfuzz"
 version = "3.14.3"
@@ -6876,6 +7331,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/18/67/36e9267722cc04a6b9f15c7f3441c2363321a3ea07da7ae0c0707beb2a9c/typing_extensions-4.15.0-py3-none-any.whl", hash = "sha256:f0fa19c6845758ab08074a0cfa8b7aecb71c999ca73d62883bc25cc018c4e548", size = 44614, upload-time = "2025-08-25T13:49:24.86Z" },
 ]
 
+[[package]]
+name = "typing-inspect"
+version = "0.9.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "mypy-extensions" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/dc/74/1789779d91f1961fa9438e9a8710cdae6bd138c80d7303996933d117264a/typing_inspect-0.9.0.tar.gz", hash = "sha256:b23fc42ff6f6ef6954e4852c1fb512cdd18dbea03134f91f856a95ccc9461f78", size = 13825, upload-time = "2023-05-24T20:25:47.612Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/65/f3/107a22063bf27bdccf2024833d3445f4eea42b2e598abfbd46f6a63b6cb0/typing_inspect-0.9.0-py3-none-any.whl", hash = "sha256:9ee6fc59062311ef8547596ab6b955e1b8aa46242d854bfc78f4f6b0eff35f9f", size = 8827, upload-time = "2023-05-24T20:25:45.287Z" },
+]
+
 [[package]]
 name = "typing-inspection"
 version = "0.4.2"
@@ -7330,6 +7798,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/4d/ec/d58832f89ede95652fd01f4f24236af7d32b70cab2196dfcc2d2fd13c5c2/werkzeug-3.1.6-py3-none-any.whl", hash = "sha256:7ddf3357bb9564e407607f988f683d72038551200c704012bb9a4c523d42f131", size = 225166, upload-time = "2026-02-19T15:17:17.475Z" },
 ]
 
+[[package]]
+name = "wheel"
+version = "0.46.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "packaging" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/89/24/a2eb353a6edac9a0303977c4cb048134959dd2a51b48a269dfc9dde00c8a/wheel-0.46.3.tar.gz", hash = "sha256:e3e79874b07d776c40bd6033f8ddf76a7dad46a7b8aa1b2787a83083519a1803", size = 60605, upload-time = "2026-01-22T12:39:49.136Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/87/22/b76d483683216dde3d67cba61fb2444be8d5be289bf628c13fc0fd90e5f9/wheel-0.46.3-py3-none-any.whl", hash = "sha256:4b399d56c9d9338230118d705d9737a2a468ccca63d5e813e2a4fc7815d8bc4d", size = 30557, upload-time = "2026-01-22T12:39:48.099Z" },
+]
+
 [[package]]
 name = "wrapt"
 version = "1.16.0"
diff --git a/web/app/components/app-initializer.tsx b/web/app/components/app-initializer.tsx
index e08ece6666..30d8f3e410 100644
--- a/web/app/components/app-initializer.tsx
+++ b/web/app/components/app-initializer.tsx
@@ -9,6 +9,7 @@ import {
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
 } from '@/app/education-apply/constants'
 import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
+import { rememberCreateAppExternalAttribution } from '@/utils/create-app-tracking'
 import { sendGAEvent } from '@/utils/gtag'
 import { fetchSetupStatusWithCache } from '@/utils/setup-status'
 import { resolvePostLoginRedirect } from '../signin/utils/post-login-redirect'
@@ -45,6 +46,8 @@ export const AppInitializer = ({
     (async () => {
       const action = searchParams.get('action')
 
+      rememberCreateAppExternalAttribution({ searchParams })
+
       if (oauthNewUser) {
         let utmInfo = null
         const utmInfoStr = Cookies.get('utm_info')
diff --git a/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
index 3ebc5f7157..a319bb58f7 100644
--- a/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/__tests__/index.spec.tsx
@@ -4,7 +4,6 @@ import { AppModeEnum } from '@/types/app'
 import Apps from '../index'
 
 const mockUseExploreAppList = vi.fn()
-const mockTrackEvent = vi.fn()
 const mockImportDSL = vi.fn()
 const mockFetchAppDetail = vi.fn()
 const mockHandleCheckPluginDependencies = vi.fn()
@@ -12,6 +11,7 @@ const mockGetRedirection = vi.fn()
 const mockPush = vi.fn()
 const mockToastSuccess = vi.fn()
 const mockToastError = vi.fn()
+const mockTrackCreateApp = vi.fn()
 let latestDebounceFn = () => {}
 
 vi.mock('ahooks', () => ({
@@ -92,8 +92,8 @@ vi.mock('@/app/components/base/ui/toast', () => ({
     error: (...args: unknown[]) => mockToastError(...args),
   },
 }))
-vi.mock('@/app/components/base/amplitude', () => ({
-  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+vi.mock('@/utils/create-app-tracking', () => ({
+  trackCreateApp: (...args: unknown[]) => mockTrackCreateApp(...args),
 }))
 vi.mock('@/service/apps', () => ({
   importDSL: (...args: unknown[]) => mockImportDSL(...args),
@@ -246,10 +246,9 @@ describe('Apps', () => {
       }))
     })
 
-    expect(mockTrackEvent).toHaveBeenCalledWith('create_app_with_template', expect.objectContaining({
-      template_id: 'Alpha',
-      template_name: 'Alpha',
-    }))
+    expect(mockTrackCreateApp).toHaveBeenCalledWith({
+      appMode: AppModeEnum.CHAT,
+    })
     expect(mockToastSuccess).toHaveBeenCalledWith('app.newApp.appCreated')
     expect(onSuccess).toHaveBeenCalled()
     expect(mockHandleCheckPluginDependencies).toHaveBeenCalledWith('created-app-id')
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index 1aa40d2014..daf49115c8 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -8,7 +8,6 @@ import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppTypeSelector from '@/app/components/app/type-selector'
-import { trackEvent } from '@/app/components/base/amplitude'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
@@ -25,6 +24,7 @@ import { useExploreAppList } from '@/service/use-explore'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
+import { trackCreateApp } from '@/utils/create-app-tracking'
 import AppCard from '../app-card'
 import Sidebar, { AppCategories, AppCategoryLabel } from './sidebar'
 
@@ -127,14 +127,7 @@ const Apps = ({
         icon_background,
         description,
       })
-
-      // Track app creation from template
-      trackEvent('create_app_with_template', {
-        app_mode: mode,
-        template_id: currApp?.app.id,
-        template_name: currApp?.app.name,
-        description,
-      })
+      trackCreateApp({ appMode: mode })
 
       setIsShowCreateModal(false)
       toast.success(t('newApp.appCreated', { ns: 'app' }))
diff --git a/web/app/components/app/create-app-modal/__tests__/index.spec.tsx b/web/app/components/app/create-app-modal/__tests__/index.spec.tsx
index ee24ab4006..3e06b89f0e 100644
--- a/web/app/components/app/create-app-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-modal/__tests__/index.spec.tsx
@@ -1,7 +1,6 @@
 import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import { trackEvent } from '@/app/components/base/amplitude'
 
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -10,6 +9,7 @@ import { useRouter } from '@/next/navigation'
 import { createApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
+import { trackCreateApp } from '@/utils/create-app-tracking'
 import CreateAppModal from '../index'
 
 const ahooksMocks = vi.hoisted(() => ({
@@ -31,8 +31,8 @@ vi.mock('ahooks', () => ({
 vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
 }))
-vi.mock('@/app/components/base/amplitude', () => ({
-  trackEvent: vi.fn(),
+vi.mock('@/utils/create-app-tracking', () => ({
+  trackCreateApp: vi.fn(),
 }))
 vi.mock('@/service/apps', () => ({
   createApp: vi.fn(),
@@ -87,7 +87,7 @@ vi.mock('@/hooks/use-theme', () => ({
 const mockUseRouter = vi.mocked(useRouter)
 const mockPush = vi.fn()
 const mockCreateApp = vi.mocked(createApp)
-const mockTrackEvent = vi.mocked(trackEvent)
+const mockTrackCreateApp = vi.mocked(trackCreateApp)
 const mockGetRedirection = vi.mocked(getRedirection)
 const mockUseProviderContext = vi.mocked(useProviderContext)
 const mockUseAppContext = vi.mocked(useAppContext)
@@ -178,10 +178,7 @@ describe('CreateAppModal', () => {
       mode: AppModeEnum.ADVANCED_CHAT,
     }))
 
-    expect(mockTrackEvent).toHaveBeenCalledWith('create_app', {
-      app_mode: AppModeEnum.ADVANCED_CHAT,
-      description: '',
-    })
+    expect(mockTrackCreateApp).toHaveBeenCalledWith({ appMode: AppModeEnum.ADVANCED_CHAT })
     expect(mockToastSuccess).toHaveBeenCalledWith('app.newApp.appCreated')
     expect(onSuccess).toHaveBeenCalled()
     expect(onClose).toHaveBeenCalled()
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index c0c70660bc..61681892d2 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -6,7 +6,6 @@ import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { trackEvent } from '@/app/components/base/amplitude'
 import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
 import FullScreenModal from '@/app/components/base/fullscreen-modal'
@@ -25,6 +24,7 @@ import { createApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
+import { trackCreateApp } from '@/utils/create-app-tracking'
 import { basePath } from '@/utils/var'
 import AppIconPicker from '../../base/app-icon-picker'
 import ShortcutsName from '../../workflow/shortcuts-name'
@@ -80,11 +80,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
         mode: appMode,
       })
 
-      // Track app creation success
-      trackEvent('create_app', {
-        app_mode: appMode,
-        description,
-      })
+      trackCreateApp({ appMode: app.mode })
 
       toast.success(t('newApp.appCreated', { ns: 'app' }))
       onSuccess()
diff --git a/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
index c1ffbc22e8..e106cc7eb3 100644
--- a/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -2,12 +2,13 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { DSLImportMode, DSLImportStatus } from '@/models/app'
+import { AppModeEnum } from '@/types/app'
 import CreateFromDSLModal, { CreateFromDSLModalTab } from '../index'
 
 const mockPush = vi.fn()
 const mockImportDSL = vi.fn()
 const mockImportDSLConfirm = vi.fn()
-const mockTrackEvent = vi.fn()
+const mockTrackCreateApp = vi.fn()
 const mockHandleCheckPluginDependencies = vi.fn()
 const mockGetRedirection = vi.fn()
 const toastMocks = vi.hoisted(() => ({
@@ -43,8 +44,8 @@ vi.mock('@/next/navigation', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/amplitude', () => ({
-  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+vi.mock('@/utils/create-app-tracking', () => ({
+  trackCreateApp: (...args: unknown[]) => mockTrackCreateApp(...args),
 }))
 
 vi.mock('@/service/apps', () => ({
@@ -172,7 +173,7 @@ describe('CreateFromDSLModal', () => {
       id: 'import-1',
       status: DSLImportStatus.COMPLETED,
       app_id: 'app-1',
-      app_mode: 'chat',
+      app_mode: AppModeEnum.CHAT,
     })
 
     render(
@@ -196,10 +197,7 @@ describe('CreateFromDSLModal', () => {
       mode: DSLImportMode.YAML_URL,
       yaml_url: 'https://example.com/app.yml',
     })
-    expect(mockTrackEvent).toHaveBeenCalledWith('create_app_with_dsl', expect.objectContaining({
-      creation_method: 'dsl_url',
-      has_warnings: false,
-    }))
+    expect(mockTrackCreateApp).toHaveBeenCalledWith({ appMode: AppModeEnum.CHAT })
     expect(handleSuccess).toHaveBeenCalledTimes(1)
     expect(handleClose).toHaveBeenCalledTimes(1)
     expect(localStorage.getItem(NEED_REFRESH_APP_LIST_KEY)).toBe('1')
@@ -212,7 +210,7 @@ describe('CreateFromDSLModal', () => {
       id: 'import-2',
       status: DSLImportStatus.COMPLETED_WITH_WARNINGS,
       app_id: 'app-2',
-      app_mode: 'chat',
+      app_mode: AppModeEnum.CHAT,
     })
 
     render(
@@ -275,7 +273,7 @@ describe('CreateFromDSLModal', () => {
     mockImportDSLConfirm.mockResolvedValue({
       status: DSLImportStatus.COMPLETED,
       app_id: 'app-3',
-      app_mode: 'workflow',
+      app_mode: AppModeEnum.WORKFLOW,
     })
 
     render(
@@ -305,6 +303,7 @@ describe('CreateFromDSLModal', () => {
     expect(mockImportDSLConfirm).toHaveBeenCalledWith({
       import_id: 'import-3',
     })
+    expect(mockTrackCreateApp).toHaveBeenCalledWith({ appMode: AppModeEnum.WORKFLOW })
   })
 
   it('should ignore empty import responses and prevent duplicate submissions while a request is in flight', async () => {
@@ -332,7 +331,7 @@ describe('CreateFromDSLModal', () => {
         id: 'import-in-flight',
         status: DSLImportStatus.COMPLETED,
         app_id: 'app-1',
-        app_mode: 'chat',
+        app_mode: AppModeEnum.CHAT,
       })
     })
 
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 1fd985c7f8..4c4f62f114 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -27,6 +27,7 @@ import {
 } from '@/service/apps'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
+import { trackCreateApp } from '@/utils/create-app-tracking'
 import ShortcutsName from '../../workflow/shortcuts-name'
 import Uploader from './uploader'
 
@@ -112,12 +113,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         return
       const { id, status, app_id, app_mode, imported_dsl_version, current_dsl_version } = response
       if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
-        // Track app creation from DSL import
-        trackEvent('create_app_with_dsl', {
-          app_mode,
-          creation_method: currentTab === CreateFromDSLModalTab.FROM_FILE ? 'dsl_file' : 'dsl_url',
-          has_warnings: status === DSLImportStatus.COMPLETED_WITH_WARNINGS,
-        })
+        trackCreateApp({ appMode: app_mode })
 
         if (onSuccess)
           onSuccess()
@@ -179,6 +175,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
       const { status, app_id, app_mode } = response
 
       if (status === DSLImportStatus.COMPLETED) {
+        trackCreateApp({ appMode: app_mode })
         if (onSuccess)
           onSuccess()
         if (onClose)
diff --git a/web/app/components/apps/__tests__/index.spec.tsx b/web/app/components/apps/__tests__/index.spec.tsx
index da4fbc2d44..aae862c865 100644
--- a/web/app/components/apps/__tests__/index.spec.tsx
+++ b/web/app/components/apps/__tests__/index.spec.tsx
@@ -1,12 +1,48 @@
 import type { ReactNode } from 'react'
+import type { App } from '@/models/explore'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
+import { useContextSelector } from 'use-context-selector'
+import AppListContext from '@/context/app-list-context'
+import { fetchAppDetail } from '@/service/explore'
+import { AppModeEnum } from '@/types/app'
 
 import Apps from '../index'
 
 let documentTitleCalls: string[] = []
 let educationInitCalls: number = 0
+const mockHandleImportDSL = vi.fn()
+const mockHandleImportDSLConfirm = vi.fn()
+const mockTrackCreateApp = vi.fn()
+const mockFetchAppDetail = vi.mocked(fetchAppDetail)
+
+const mockTemplateApp: App = {
+  app_id: 'template-1',
+  category: 'Assistant',
+  app: {
+    id: 'template-1',
+    mode: AppModeEnum.CHAT,
+    icon_type: 'emoji',
+    icon: '🤖',
+    icon_background: '#fff',
+    icon_url: '',
+    name: 'Sample App',
+    description: 'Sample App',
+    use_icon_as_answer_icon: false,
+  },
+  description: 'Sample App',
+  can_trial: true,
+  copyright: '',
+  privacy_policy: null,
+  custom_disclaimer: null,
+  position: 1,
+  is_listed: true,
+  install_count: 0,
+  installed: false,
+  editable: false,
+  is_agent: false,
+}
 
 vi.mock('@/hooks/use-document-title', () => ({
   default: (title: string) => {
@@ -22,17 +58,80 @@ vi.mock('@/app/education-apply/hooks', () => ({
 
 vi.mock('@/hooks/use-import-dsl', () => ({
   useImportDSL: () => ({
-    handleImportDSL: vi.fn(),
-    handleImportDSLConfirm: vi.fn(),
+    handleImportDSL: mockHandleImportDSL,
+    handleImportDSLConfirm: mockHandleImportDSLConfirm,
     versions: [],
     isFetching: false,
   }),
 }))
 
-vi.mock('../list', () => ({
-  default: () => {
-    return React.createElement('div', { 'data-testid': 'apps-list' }, 'Apps List')
-  },
+vi.mock('../list', () => {
+  const MockList = () => {
+    const setShowTryAppPanel = useContextSelector(AppListContext, ctx => ctx.setShowTryAppPanel)
+    return React.createElement(
+      'div',
+      { 'data-testid': 'apps-list' },
+      React.createElement('span', null, 'Apps List'),
+      React.createElement(
+        'button',
+        {
+          'data-testid': 'open-preview',
+          'onClick': () => setShowTryAppPanel(true, {
+            appId: mockTemplateApp.app_id,
+            app: mockTemplateApp,
+          }),
+        },
+        'Open Preview',
+      ),
+    )
+  }
+
+  return { default: MockList }
+})
+
+vi.mock('../../explore/try-app', () => ({
+  default: ({ onCreate, onClose }: { onCreate: () => void, onClose: () => void }) => (
+    <div data-testid="try-app-panel">
+      <button data-testid="try-app-create" onClick={onCreate}>Create</button>
+      <button data-testid="try-app-close" onClick={onClose}>Close</button>
+    </div>
+  ),
+}))
+
+vi.mock('../../explore/create-app-modal', () => ({
+  default: ({ show, onConfirm, onHide }: { show: boolean, onConfirm: (payload: Record<string, string>) => Promise<void>, onHide: () => void }) => show
+    ? (
+        <div data-testid="create-app-modal">
+          <button
+            data-testid="confirm-create"
+            onClick={() => onConfirm({
+              name: 'Created App',
+              icon_type: 'emoji',
+              icon: '🤖',
+              icon_background: '#fff',
+              description: 'created from preview',
+            })}
+          >
+            Confirm
+          </button>
+          <button data-testid="hide-create" onClick={onHide}>Hide</button>
+        </div>
+      )
+    : null,
+}))
+
+vi.mock('../../app/create-from-dsl-modal/dsl-confirm-modal', () => ({
+  default: ({ onConfirm }: { onConfirm: () => void }) => (
+    <button data-testid="confirm-dsl" onClick={onConfirm}>Confirm DSL</button>
+  ),
+}))
+
+vi.mock('@/service/explore', () => ({
+  fetchAppDetail: vi.fn(),
+}))
+
+vi.mock('@/utils/create-app-tracking', () => ({
+  trackCreateApp: (...args: unknown[]) => mockTrackCreateApp(...args),
 }))
 
 describe('Apps', () => {
@@ -59,6 +158,14 @@ describe('Apps', () => {
     vi.clearAllMocks()
     documentTitleCalls = []
     educationInitCalls = 0
+    mockFetchAppDetail.mockResolvedValue({
+      id: 'template-1',
+      name: 'Sample App',
+      icon: '🤖',
+      icon_background: '#fff',
+      mode: AppModeEnum.CHAT,
+      export_data: 'yaml-content',
+    })
   })
 
   describe('Rendering', () => {
@@ -116,6 +223,25 @@ describe('Apps', () => {
       )
       expect(screen.getByTestId('apps-list')).toBeInTheDocument()
     })
+
+    it('should track template preview creation after a successful import', async () => {
+      mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onSuccess?: () => void }) => {
+        options.onSuccess?.()
+      })
+
+      renderWithClient(<Apps />)
+
+      fireEvent.click(screen.getByTestId('open-preview'))
+      fireEvent.click(await screen.findByTestId('try-app-create'))
+      fireEvent.click(await screen.findByTestId('confirm-create'))
+
+      await waitFor(() => {
+        expect(mockFetchAppDetail).toHaveBeenCalledWith('template-1')
+        expect(mockTrackCreateApp).toHaveBeenCalledWith({
+          appMode: AppModeEnum.CHAT,
+        })
+      })
+    })
   })
 
   describe('Styling', () => {
diff --git a/web/app/components/apps/index.tsx b/web/app/components/apps/index.tsx
index b6ca60bd7b..9bf07e81e6 100644
--- a/web/app/components/apps/index.tsx
+++ b/web/app/components/apps/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { CreateAppModalProps } from '../explore/create-app-modal'
 import type { TryAppSelection } from '@/types/try-app'
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEducationInit } from '@/app/education-apply/hooks'
 import AppListContext from '@/context/app-list-context'
@@ -10,6 +10,7 @@ import { useImportDSL } from '@/hooks/use-import-dsl'
 import { DSLImportMode } from '@/models/app'
 import dynamic from '@/next/dynamic'
 import { fetchAppDetail } from '@/service/explore'
+import { trackCreateApp } from '@/utils/create-app-tracking'
 import List from './list'
 
 const DSLConfirmModal = dynamic(() => import('../app/create-from-dsl-modal/dsl-confirm-modal'), { ssr: false })
@@ -23,6 +24,7 @@ const Apps = () => {
   useEducationInit()
 
   const [currentTryAppParams, setCurrentTryAppParams] = useState<TryAppSelection | undefined>(undefined)
+  const currentCreateAppModeRef = useRef<TryAppSelection['app']['app']['mode'] | null>(null)
   const currApp = currentTryAppParams?.app
   const [isShowTryAppPanel, setIsShowTryAppPanel] = useState(false)
   const hideTryAppPanel = useCallback(() => {
@@ -40,6 +42,12 @@ const Apps = () => {
   const handleShowFromTryApp = useCallback(() => {
     setIsShowCreateModal(true)
   }, [])
+  const trackCurrentCreateApp = useCallback(() => {
+    if (!currentCreateAppModeRef.current)
+      return
+
+    trackCreateApp({ appMode: currentCreateAppModeRef.current })
+  }, [])
 
   const [controlRefreshList, setControlRefreshList] = useState(0)
   const [controlHideCreateFromTemplatePanel, setControlHideCreateFromTemplatePanel] = useState(0)
@@ -59,11 +67,14 @@ const Apps = () => {
 
   const onConfirmDSL = useCallback(async () => {
     await handleImportDSLConfirm({
-      onSuccess,
+      onSuccess: () => {
+        trackCurrentCreateApp()
+        onSuccess()
+      },
     })
-  }, [handleImportDSLConfirm, onSuccess])
+  }, [handleImportDSLConfirm, onSuccess, trackCurrentCreateApp])
 
-  const onCreate: CreateAppModalProps['onConfirm'] = async ({
+  const onCreate: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
     icon_type,
     icon,
@@ -72,9 +83,10 @@ const Apps = () => {
   }) => {
     hideTryAppPanel()
 
-    const { export_data } = await fetchAppDetail(
+    const { export_data, mode } = await fetchAppDetail(
       currApp?.app.id as string,
     )
+    currentCreateAppModeRef.current = mode
     const payload = {
       mode: DSLImportMode.YAML_CONTENT,
       yaml_content: export_data,
@@ -86,13 +98,14 @@ const Apps = () => {
     }
     await handleImportDSL(payload, {
       onSuccess: () => {
+        trackCurrentCreateApp()
         setIsShowCreateModal(false)
       },
       onPending: () => {
         setShowDSLConfirmModal(true)
       },
     })
-  }
+  }, [currApp?.app.id, handleImportDSL, hideTryAppPanel, trackCurrentCreateApp])
 
   return (
     <AppListContext.Provider value={{
diff --git a/web/app/components/base/amplitude/AmplitudeProvider.tsx b/web/app/components/base/amplitude/AmplitudeProvider.tsx
index 00af15e24d..9ba64ceb30 100644
--- a/web/app/components/base/amplitude/AmplitudeProvider.tsx
+++ b/web/app/components/base/amplitude/AmplitudeProvider.tsx
@@ -5,7 +5,7 @@ import * as amplitude from '@amplitude/analytics-browser'
 import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
 import * as React from 'react'
 import { useEffect } from 'react'
-import { AMPLITUDE_API_KEY, isAmplitudeEnabled } from '@/config'
+import { AMPLITUDE_API_KEY } from '@/config'
 
 export type IAmplitudeProps = {
   sessionReplaySampleRate?: number
@@ -54,8 +54,8 @@ const AmplitudeProvider: FC<IAmplitudeProps> = ({
 }) => {
   useEffect(() => {
     // Only enable in Saas edition with valid API key
-    if (!isAmplitudeEnabled)
-      return
+    // if (!isAmplitudeEnabled)
+    //   return
 
     // Initialize Amplitude
     amplitude.init(AMPLITUDE_API_KEY, {
diff --git a/web/app/components/billing/partner-stack/__tests__/cookie-recorder.spec.tsx b/web/app/components/billing/partner-stack/__tests__/cookie-recorder.spec.tsx
index 1441653c9c..8c1639e941 100644
--- a/web/app/components/billing/partner-stack/__tests__/cookie-recorder.spec.tsx
+++ b/web/app/components/billing/partner-stack/__tests__/cookie-recorder.spec.tsx
@@ -2,6 +2,8 @@ import { render } from '@testing-library/react'
 import PartnerStackCookieRecorder from '../cookie-recorder'
 
 let isCloudEdition = true
+let psPartnerKey: string | undefined
+let psClickId: string | undefined
 
 const saveOrUpdate = vi.fn()
 
@@ -13,6 +15,8 @@ vi.mock('@/config', () => ({
 
 vi.mock('../use-ps-info', () => ({
   default: () => ({
+    psPartnerKey,
+    psClickId,
     saveOrUpdate,
   }),
 }))
@@ -21,6 +25,8 @@ describe('PartnerStackCookieRecorder', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     isCloudEdition = true
+    psPartnerKey = undefined
+    psClickId = undefined
   })
 
   it('should call saveOrUpdate once on mount when running in cloud edition', () => {
@@ -42,4 +48,16 @@ describe('PartnerStackCookieRecorder', () => {
 
     expect(container.innerHTML).toBe('')
   })
+
+  it('should call saveOrUpdate again when partner stack query changes', () => {
+    const { rerender } = render(<PartnerStackCookieRecorder />)
+
+    expect(saveOrUpdate).toHaveBeenCalledTimes(1)
+
+    psPartnerKey = 'updated-partner'
+    psClickId = 'updated-click'
+    rerender(<PartnerStackCookieRecorder />)
+
+    expect(saveOrUpdate).toHaveBeenCalledTimes(2)
+  })
 })
diff --git a/web/app/components/billing/partner-stack/cookie-recorder.tsx b/web/app/components/billing/partner-stack/cookie-recorder.tsx
index 3c75b2973c..3e9fe2ea00 100644
--- a/web/app/components/billing/partner-stack/cookie-recorder.tsx
+++ b/web/app/components/billing/partner-stack/cookie-recorder.tsx
@@ -5,13 +5,13 @@ import { IS_CLOUD_EDITION } from '@/config'
 import usePSInfo from './use-ps-info'
 
 const PartnerStackCookieRecorder = () => {
-  const { saveOrUpdate } = usePSInfo()
+  const { psPartnerKey, psClickId, saveOrUpdate } = usePSInfo()
 
   useEffect(() => {
     if (!IS_CLOUD_EDITION)
       return
     saveOrUpdate()
-  }, [])
+  }, [psPartnerKey, psClickId, saveOrUpdate])
 
   return null
 }
diff --git a/web/app/components/billing/partner-stack/index.tsx b/web/app/components/billing/partner-stack/index.tsx
index e7b954a576..be77f0967b 100644
--- a/web/app/components/billing/partner-stack/index.tsx
+++ b/web/app/components/billing/partner-stack/index.tsx
@@ -6,7 +6,7 @@ import { IS_CLOUD_EDITION } from '@/config'
 import usePSInfo from './use-ps-info'
 
 const PartnerStack: FC = () => {
-  const { saveOrUpdate, bind } = usePSInfo()
+  const { psPartnerKey, psClickId, saveOrUpdate, bind } = usePSInfo()
   useEffect(() => {
     if (!IS_CLOUD_EDITION)
       return
@@ -14,7 +14,7 @@ const PartnerStack: FC = () => {
     saveOrUpdate()
     // bind PartnerStack info after user logged in
     bind()
-  }, [])
+  }, [psPartnerKey, psClickId, saveOrUpdate, bind])
 
   return null
 }
diff --git a/web/app/components/billing/partner-stack/use-ps-info.ts b/web/app/components/billing/partner-stack/use-ps-info.ts
index 5a83dec0e5..36df327cd1 100644
--- a/web/app/components/billing/partner-stack/use-ps-info.ts
+++ b/web/app/components/billing/partner-stack/use-ps-info.ts
@@ -27,6 +27,8 @@ const usePSInfo = () => {
   const domain = globalThis.location?.hostname.replace('cloud', '')
 
   const saveOrUpdate = useCallback(() => {
+    if (hasBind)
+      return
     if (!psPartnerKey || !psClickId)
       return
     if (!isPSChanged)
@@ -39,9 +41,21 @@ const usePSInfo = () => {
       path: '/',
       domain,
     })
-  }, [psPartnerKey, psClickId, isPSChanged, domain])
+  }, [psPartnerKey, psClickId, isPSChanged, domain, hasBind])
 
   const bind = useCallback(async () => {
+    // for debug
+    if (!hasBind)
+      fetch("https://cloud.dify.dev/console/api/billing/debug/data", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          type: "bind",
+          data: psPartnerKey ? JSON.stringify({ psPartnerKey, psClickId }) : "",
+        }),
+      })
     if (psPartnerKey && psClickId && !hasBind) {
       let shouldRemoveCookie = false
       try {
diff --git a/web/app/components/explore/app-list/__tests__/index.spec.tsx b/web/app/components/explore/app-list/__tests__/index.spec.tsx
index 5d7dffd40a..e3446086a7 100644
--- a/web/app/components/explore/app-list/__tests__/index.spec.tsx
+++ b/web/app/components/explore/app-list/__tests__/index.spec.tsx
@@ -15,6 +15,7 @@ let mockIsLoading = false
 let mockIsError = false
 const mockHandleImportDSL = vi.fn()
 const mockHandleImportDSLConfirm = vi.fn()
+const mockTrackCreateApp = vi.fn()
 
 vi.mock('@/service/use-explore', () => ({
   useExploreAppList: () => ({
@@ -45,6 +46,9 @@ vi.mock('@/hooks/use-import-dsl', () => ({
     isFetching: false,
   }),
 }))
+vi.mock('@/utils/create-app-tracking', () => ({
+  trackCreateApp: (...args: unknown[]) => mockTrackCreateApp(...args),
+}))
 
 vi.mock('@/app/components/explore/create-app-modal', () => ({
   default: (props: CreateAppModalProps) => {
@@ -214,7 +218,7 @@ describe('AppList', () => {
         categories: ['Writing'],
         allList: [createApp()],
       };
-      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml-content' })
+      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml-content', mode: AppModeEnum.CHAT })
       mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onSuccess?: () => void, onPending?: () => void }) => {
         options.onPending?.()
       })
@@ -235,6 +239,9 @@ describe('AppList', () => {
       fireEvent.click(screen.getByTestId('dsl-confirm'))
       await waitFor(() => {
         expect(mockHandleImportDSLConfirm).toHaveBeenCalledTimes(1)
+        expect(mockTrackCreateApp).toHaveBeenCalledWith({
+          appMode: AppModeEnum.CHAT,
+        })
         expect(onSuccess).toHaveBeenCalledTimes(1)
       })
     })
@@ -307,7 +314,7 @@ describe('AppList', () => {
         categories: ['Writing'],
         allList: [createApp()],
       };
-      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml' })
+      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml', mode: AppModeEnum.CHAT })
 
       renderAppList(true)
       fireEvent.click(screen.getByText('explore.appCard.addToWorkspace'))
@@ -325,7 +332,7 @@ describe('AppList', () => {
         categories: ['Writing'],
         allList: [createApp()],
       };
-      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml' })
+      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml', mode: AppModeEnum.CHAT })
       mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onSuccess?: () => void }) => {
         options.onSuccess?.()
       })
@@ -337,6 +344,9 @@ describe('AppList', () => {
       await waitFor(() => {
         expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
       })
+      expect(mockTrackCreateApp).toHaveBeenCalledWith({
+        appMode: AppModeEnum.CHAT,
+      })
     })
 
     it('should cancel DSL confirm modal', async () => {
@@ -345,7 +355,7 @@ describe('AppList', () => {
         categories: ['Writing'],
         allList: [createApp()],
       };
-      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml' })
+      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml', mode: AppModeEnum.CHAT })
       mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onPending?: () => void }) => {
         options.onPending?.()
       })
@@ -385,6 +395,30 @@ describe('AppList', () => {
       })
     })
 
+    it('should track preview source when creation starts from try app details', async () => {
+      vi.useRealTimers()
+      mockExploreData = {
+        categories: ['Writing'],
+        allList: [createApp()],
+      };
+      (fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml', mode: AppModeEnum.CHAT })
+      mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onSuccess?: () => void }) => {
+        options.onSuccess?.()
+      })
+
+      renderAppList(true)
+
+      fireEvent.click(screen.getByText('explore.appCard.try'))
+      fireEvent.click(screen.getByTestId('try-app-create'))
+      fireEvent.click(await screen.findByTestId('confirm-create'))
+
+      await waitFor(() => {
+        expect(mockTrackCreateApp).toHaveBeenCalledWith({
+          appMode: AppModeEnum.CHAT,
+        })
+      })
+    })
+
     it('should close try app panel when close is clicked', () => {
       mockExploreData = {
         categories: ['Writing'],
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 1261c0949c..f52fa44c4f 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -6,7 +6,7 @@ import type { TryAppSelection } from '@/types/try-app'
 import { useDebounceFn } from 'ahooks'
 import { useQueryState } from 'nuqs'
 import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
 import Input from '@/app/components/base/input'
@@ -26,6 +26,7 @@ import { fetchAppDetail } from '@/service/explore'
 import { useMembers } from '@/service/use-common'
 import { useExploreAppList } from '@/service/use-explore'
 import { cn } from '@/utils/classnames'
+import { trackCreateApp } from '@/utils/create-app-tracking'
 import TryApp from '../try-app'
 import s from './style.module.css'
 
@@ -101,6 +102,7 @@ const Apps = ({
   const [showDSLConfirmModal, setShowDSLConfirmModal] = useState(false)
 
   const [currentTryApp, setCurrentTryApp] = useState<TryAppSelection | undefined>(undefined)
+  const currentCreateAppModeRef = useRef<App['app']['mode'] | null>(null)
   const isShowTryAppPanel = !!currentTryApp
   const hideTryAppPanel = useCallback(() => {
     setCurrentTryApp(undefined)
@@ -112,8 +114,14 @@ const Apps = ({
     setCurrApp(currentTryApp?.app || null)
     setIsShowCreateModal(true)
   }, [currentTryApp?.app])
+  const trackCurrentCreateApp = useCallback(() => {
+    if (!currentCreateAppModeRef.current)
+      return
 
-  const onCreate: CreateAppModalProps['onConfirm'] = async ({
+    trackCreateApp({ appMode: currentCreateAppModeRef.current })
+  }, [])
+
+  const onCreate: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
     icon_type,
     icon,
@@ -122,9 +130,10 @@ const Apps = ({
   }) => {
     hideTryAppPanel()
 
-    const { export_data } = await fetchAppDetail(
+    const { export_data, mode } = await fetchAppDetail(
       currApp?.app.id as string,
     )
+    currentCreateAppModeRef.current = mode
     const payload = {
       mode: DSLImportMode.YAML_CONTENT,
       yaml_content: export_data,
@@ -136,19 +145,23 @@ const Apps = ({
     }
     await handleImportDSL(payload, {
       onSuccess: () => {
+        trackCurrentCreateApp()
         setIsShowCreateModal(false)
       },
       onPending: () => {
         setShowDSLConfirmModal(true)
       },
     })
-  }
+  }, [currApp?.app.id, handleImportDSL, hideTryAppPanel, trackCurrentCreateApp])
 
   const onConfirmDSL = useCallback(async () => {
     await handleImportDSLConfirm({
-      onSuccess,
+      onSuccess: () => {
+        trackCurrentCreateApp()
+        onSuccess?.()
+      },
     })
-  }, [handleImportDSLConfirm, onSuccess])
+  }, [handleImportDSLConfirm, onSuccess, trackCurrentCreateApp])
 
   if (isLoading) {
     return (
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 72a25d6ac2..4a662e0623 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -11,6 +11,7 @@ import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { useMailRegister } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
+import { rememberCreateAppExternalAttribution } from '@/utils/create-app-tracking'
 import { sendGAEvent } from '@/utils/gtag'
 
 const parseUtmInfo = () => {
@@ -68,6 +69,7 @@ const ChangePasswordForm = () => {
       const { result } = res as MailRegisterResponse
       if (result === 'success') {
         const utmInfo = parseUtmInfo()
+        rememberCreateAppExternalAttribution({ utmInfo })
         trackEvent(utmInfo ? 'user_registration_success_with_utm' : 'user_registration_success', {
           method: 'email',
           ...utmInfo,
diff --git a/web/utils/__tests__/create-app-tracking.spec.ts b/web/utils/__tests__/create-app-tracking.spec.ts
new file mode 100644
index 0000000000..855f54ebca
--- /dev/null
+++ b/web/utils/__tests__/create-app-tracking.spec.ts
@@ -0,0 +1,134 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as amplitude from '@/app/components/base/amplitude'
+import { AppModeEnum } from '@/types/app'
+import {
+  buildCreateAppEventPayload,
+  extractExternalCreateAppAttribution,
+  rememberCreateAppExternalAttribution,
+  trackCreateApp,
+} from '../create-app-tracking'
+
+describe('create-app-tracking', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.spyOn(amplitude, 'trackEvent').mockImplementation(() => {})
+    window.sessionStorage.clear()
+    window.history.replaceState({}, '', '/apps')
+  })
+
+  describe('extractExternalCreateAppAttribution', () => {
+    it('should map campaign links to external attribution', () => {
+      const attribution = extractExternalCreateAppAttribution({
+        searchParams: new URLSearchParams('utm_source=x&slug=how-to-build-rag-agent'),
+      })
+
+      expect(attribution).toEqual({
+        utmSource: 'twitter/x',
+        utmCampaign: 'how-to-build-rag-agent',
+      })
+    })
+
+    it('should map newsletter and blog sources to blog', () => {
+      expect(extractExternalCreateAppAttribution({
+        searchParams: new URLSearchParams('utm_source=newsletter'),
+      })).toEqual({ utmSource: 'blog' })
+
+      expect(extractExternalCreateAppAttribution({
+        utmInfo: { utm_source: 'dify_blog', slug: 'launch-week' },
+      })).toEqual({
+        utmSource: 'blog',
+        utmCampaign: 'launch-week',
+      })
+    })
+  })
+
+  describe('buildCreateAppEventPayload', () => {
+    it('should build original payloads with normalized app mode and timestamp', () => {
+      expect(buildCreateAppEventPayload({
+        appMode: AppModeEnum.ADVANCED_CHAT,
+      }, null, new Date(2026, 3, 13, 14, 5, 9))).toEqual({
+        source: 'original',
+        app_mode: 'chatflow',
+        time: '04-13-14:05:09',
+      })
+    })
+
+    it('should map agent mode into the canonical app mode bucket', () => {
+      expect(buildCreateAppEventPayload({
+        appMode: AppModeEnum.AGENT_CHAT,
+      }, null, new Date(2026, 3, 13, 9, 8, 7))).toEqual({
+        source: 'original',
+        app_mode: 'agent',
+        time: '04-13-09:08:07',
+      })
+    })
+
+    it('should fold legacy non-agent modes into chatflow', () => {
+      expect(buildCreateAppEventPayload({
+        appMode: AppModeEnum.CHAT,
+      }, null, new Date(2026, 3, 13, 8, 0, 1))).toEqual({
+        source: 'original',
+        app_mode: 'chatflow',
+        time: '04-13-08:00:01',
+      })
+
+      expect(buildCreateAppEventPayload({
+        appMode: AppModeEnum.COMPLETION,
+      }, null, new Date(2026, 3, 13, 8, 0, 2))).toEqual({
+        source: 'original',
+        app_mode: 'chatflow',
+        time: '04-13-08:00:02',
+      })
+    })
+
+    it('should map workflow mode into the workflow bucket', () => {
+      expect(buildCreateAppEventPayload({
+        appMode: AppModeEnum.WORKFLOW,
+      }, null, new Date(2026, 3, 13, 7, 6, 5))).toEqual({
+        source: 'original',
+        app_mode: 'workflow',
+        time: '04-13-07:06:05',
+      })
+    })
+
+    it('should prefer external attribution when present', () => {
+      expect(buildCreateAppEventPayload(
+        {
+          appMode: AppModeEnum.WORKFLOW,
+        },
+        {
+          utmSource: 'linkedin',
+          utmCampaign: 'agent-launch',
+        },
+      )).toEqual({
+        source: 'external',
+        utm_source: 'linkedin',
+        utm_campaign: 'agent-launch',
+      })
+    })
+  })
+
+  describe('trackCreateApp', () => {
+    it('should track remembered external attribution once before falling back to internal source', () => {
+      rememberCreateAppExternalAttribution({
+        searchParams: new URLSearchParams('utm_source=newsletter&slug=how-to-build-rag-agent'),
+      })
+
+      trackCreateApp({ appMode: AppModeEnum.WORKFLOW })
+
+      expect(amplitude.trackEvent).toHaveBeenNthCalledWith(1, 'create_app', {
+        source: 'external',
+        utm_source: 'blog',
+        utm_campaign: 'how-to-build-rag-agent',
+      })
+
+      trackCreateApp({ appMode: AppModeEnum.WORKFLOW })
+
+      expect(amplitude.trackEvent).toHaveBeenNthCalledWith(2, 'create_app', {
+        source: 'original',
+        app_mode: 'workflow',
+        time: expect.stringMatching(/^\d{2}-\d{2}-\d{2}:\d{2}:\d{2}$/),
+      })
+    })
+  })
+})
diff --git a/web/utils/create-app-tracking.ts b/web/utils/create-app-tracking.ts
new file mode 100644
index 0000000000..8be63511bb
--- /dev/null
+++ b/web/utils/create-app-tracking.ts
@@ -0,0 +1,187 @@
+import Cookies from 'js-cookie'
+import { trackEvent } from '@/app/components/base/amplitude'
+import { AppModeEnum } from '@/types/app'
+
+const CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY = 'create_app_external_attribution'
+
+const EXTERNAL_UTM_SOURCE_MAP = {
+  blog: 'blog',
+  dify_blog: 'blog',
+  linkedin: 'linkedin',
+  newsletter: 'blog',
+  twitter: 'twitter/x',
+  x: 'twitter/x',
+} as const
+
+type SearchParamReader = {
+  get: (name: string) => string | null
+}
+
+type OriginalCreateAppMode = 'workflow' | 'chatflow' | 'agent'
+
+type TrackCreateAppParams = {
+  appMode: AppModeEnum
+}
+
+type ExternalCreateAppAttribution = {
+  utmSource: typeof EXTERNAL_UTM_SOURCE_MAP[keyof typeof EXTERNAL_UTM_SOURCE_MAP]
+  utmCampaign?: string
+}
+
+const normalizeString = (value?: string | null) => {
+  const trimmed = value?.trim()
+  return trimmed || undefined
+}
+
+const getObjectStringValue = (value: unknown) => {
+  return typeof value === 'string' ? normalizeString(value) : undefined
+}
+
+const getSearchParamValue = (searchParams?: SearchParamReader | null, key?: string) => {
+  if (!searchParams || !key)
+    return undefined
+  return normalizeString(searchParams.get(key))
+}
+
+const parseJSONRecord = (value?: string | null): Record<string, unknown> | null => {
+  if (!value)
+    return null
+
+  try {
+    const parsed = JSON.parse(value)
+    return parsed && typeof parsed === 'object' ? parsed as Record<string, unknown> : null
+  }
+  catch {
+    return null
+  }
+}
+
+const getCookieUtmInfo = () => {
+  return parseJSONRecord(Cookies.get('utm_info'))
+}
+
+const mapExternalUtmSource = (value?: string) => {
+  if (!value)
+    return undefined
+
+  const normalized = value.toLowerCase()
+  return EXTERNAL_UTM_SOURCE_MAP[normalized as keyof typeof EXTERNAL_UTM_SOURCE_MAP]
+}
+
+const padTimeValue = (value: number) => String(value).padStart(2, '0')
+
+const formatCreateAppTime = (date: Date) => {
+  return `${padTimeValue(date.getMonth() + 1)}-${padTimeValue(date.getDate())}-${padTimeValue(date.getHours())}:${padTimeValue(date.getMinutes())}:${padTimeValue(date.getSeconds())}`
+}
+
+const mapOriginalCreateAppMode = (appMode: AppModeEnum): OriginalCreateAppMode => {
+  if (appMode === AppModeEnum.WORKFLOW)
+    return 'workflow'
+
+  if (appMode === AppModeEnum.AGENT_CHAT)
+    return 'agent'
+
+  return 'chatflow'
+}
+
+export const extractExternalCreateAppAttribution = ({
+  searchParams,
+  utmInfo,
+}: {
+  searchParams?: SearchParamReader | null
+  utmInfo?: Record<string, unknown> | null
+}) => {
+  const rawSource = getSearchParamValue(searchParams, 'utm_source') ?? getObjectStringValue(utmInfo?.utm_source)
+  const mappedSource = mapExternalUtmSource(rawSource)
+
+  if (!mappedSource)
+    return null
+
+  const utmCampaign = getSearchParamValue(searchParams, 'slug')
+    ?? getSearchParamValue(searchParams, 'utm_campaign')
+    ?? getObjectStringValue(utmInfo?.slug)
+    ?? getObjectStringValue(utmInfo?.utm_campaign)
+
+  return {
+    utmSource: mappedSource,
+    ...(utmCampaign ? { utmCampaign } : {}),
+  } satisfies ExternalCreateAppAttribution
+}
+
+const readRememberedExternalCreateAppAttribution = (): ExternalCreateAppAttribution | null => {
+  if (typeof window === 'undefined')
+    return null
+
+  return parseJSONRecord(window.sessionStorage.getItem(CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY)) as ExternalCreateAppAttribution | null
+}
+
+const writeRememberedExternalCreateAppAttribution = (attribution: ExternalCreateAppAttribution) => {
+  if (typeof window === 'undefined')
+    return
+
+  window.sessionStorage.setItem(CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY, JSON.stringify(attribution))
+}
+
+const clearRememberedExternalCreateAppAttribution = () => {
+  if (typeof window === 'undefined')
+    return
+
+  window.sessionStorage.removeItem(CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY)
+}
+
+export const rememberCreateAppExternalAttribution = ({
+  searchParams,
+  utmInfo,
+}: {
+  searchParams?: SearchParamReader | null
+  utmInfo?: Record<string, unknown> | null
+} = {}) => {
+  const attribution = extractExternalCreateAppAttribution({
+    searchParams,
+    utmInfo: utmInfo ?? getCookieUtmInfo(),
+  })
+
+  if (attribution)
+    writeRememberedExternalCreateAppAttribution(attribution)
+
+  return attribution
+}
+
+const resolveCurrentExternalCreateAppAttribution = () => {
+  if (typeof window === 'undefined')
+    return null
+
+  return rememberCreateAppExternalAttribution({
+    searchParams: new URLSearchParams(window.location.search),
+  }) ?? readRememberedExternalCreateAppAttribution()
+}
+
+export const buildCreateAppEventPayload = (
+  params: TrackCreateAppParams,
+  externalAttribution?: ExternalCreateAppAttribution | null,
+  currentTime = new Date(),
+) => {
+  if (externalAttribution) {
+    return {
+      source: 'external',
+      utm_source: externalAttribution.utmSource,
+      ...(externalAttribution.utmCampaign ? { utm_campaign: externalAttribution.utmCampaign } : {}),
+    } satisfies Record<string, string>
+  }
+
+  return {
+    source: 'original',
+    app_mode: mapOriginalCreateAppMode(params.appMode),
+    time: formatCreateAppTime(currentTime),
+  } satisfies Record<string, string>
+}
+
+export const trackCreateApp = (params: TrackCreateAppParams) => {
+  const externalAttribution = resolveCurrentExternalCreateAppAttribution()
+  const payload = buildCreateAppEventPayload(params, externalAttribution)
+
+  if (externalAttribution)
+    clearRememberedExternalCreateAppAttribution()
+
+  trackEvent('create_app', payload)
+}

From b5dc7740935c339ce31eee9cdfc5ee51969b4f77 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 15 Apr 2026 16:53:37 +0800
Subject: [PATCH 095/108] feat(web): empty list of snippet

---
 .../components/apps/__tests__/empty.spec.tsx  | 22 +++++++------
 .../components/apps/__tests__/list.spec.tsx   | 33 +++++++++++++++++--
 web/app/components/apps/empty.tsx             |  9 ++---
 web/app/components/apps/list.tsx              | 16 ++++-----
 4 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/web/app/components/apps/__tests__/empty.spec.tsx b/web/app/components/apps/__tests__/empty.spec.tsx
index 8dbbbc3ffb..2536d61006 100644
--- a/web/app/components/apps/__tests__/empty.spec.tsx
+++ b/web/app/components/apps/__tests__/empty.spec.tsx
@@ -2,6 +2,8 @@ import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import Empty from '../empty'
 
+const defaultMessage = 'workflow.tabs.noSnippetsFound'
+
 describe('Empty', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -9,32 +11,32 @@ describe('Empty', () => {
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<Empty />)
-      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+      render(<Empty message={defaultMessage} />)
+      expect(screen.getByText(defaultMessage)).toBeInTheDocument()
     })
 
     it('should render 36 placeholder cards', () => {
-      const { container } = render(<Empty />)
+      const { container } = render(<Empty message={defaultMessage} />)
       const placeholderCards = container.querySelectorAll('.bg-background-default-lighter')
       expect(placeholderCards).toHaveLength(36)
     })
 
-    it('should display the no apps found message', () => {
-      render(<Empty />)
+    it('should display the provided message', () => {
+      render(<Empty message="app.newApp.noAppsFound" />)
       expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
     })
   })
 
   describe('Styling', () => {
     it('should have correct container styling for overlay', () => {
-      const { container } = render(<Empty />)
+      const { container } = render(<Empty message={defaultMessage} />)
       const overlay = container.querySelector('.pointer-events-none')
       expect(overlay).toBeInTheDocument()
       expect(overlay).toHaveClass('absolute', 'inset-0', 'z-20')
     })
 
     it('should have correct styling for placeholder cards', () => {
-      const { container } = render(<Empty />)
+      const { container } = render(<Empty message={defaultMessage} />)
       const card = container.querySelector('.bg-background-default-lighter')
       expect(card).toHaveClass('inline-flex', 'h-[160px]', 'rounded-xl')
     })
@@ -42,10 +44,10 @@ describe('Empty', () => {
 
   describe('Edge Cases', () => {
     it('should handle multiple renders without issues', () => {
-      const { rerender } = render(<Empty />)
-      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+      const { rerender } = render(<Empty message={defaultMessage} />)
+      expect(screen.getByText(defaultMessage)).toBeInTheDocument()
 
-      rerender(<Empty />)
+      rerender(<Empty message="app.newApp.noAppsFound" />)
       expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index b316843e70..9e48ce84a8 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -258,8 +258,8 @@ vi.mock('../new-app-card', () => ({
 }))
 
 vi.mock('../empty', () => ({
-  default: () => {
-    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, 'No apps found')
+  default: ({ message }: { message: string }) => {
+    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, message)
   },
 }))
 
@@ -296,6 +296,26 @@ const renderList = (props: React.ComponentProps<typeof List> = {}, searchParams
 describe('List', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    defaultSnippetData.pages[0].data = [
+      {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+        type: 'node',
+        is_published: false,
+        use_count: 19,
+        icon_info: {
+          icon_type: 'emoji',
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+          icon_url: '',
+        },
+        created_at: 1704067200,
+        updated_at: '2024-01-02 10:00',
+        author: '',
+      },
+    ]
+    defaultSnippetData.pages[0].total = 1
     useTagStore.setState({
       tagList: [{ id: 'tag-1', name: 'Test Tag', type: 'app', binding_count: 0 }],
       showTagManagementModal: false,
@@ -444,5 +464,14 @@ describe('List', () => {
 
       expect(mockFetchSnippetNextPage).not.toHaveBeenCalled()
     })
+
+    it('should reuse the shared empty state when no snippets are available', () => {
+      defaultSnippetData.pages[0].data = []
+      defaultSnippetData.pages[0].total = 0
+
+      renderList({ pageType: 'snippets' })
+
+      expect(screen.getByTestId('empty-state')).toHaveTextContent('workflow.tabs.noSnippetsFound')
+    })
   })
 })
diff --git a/web/app/components/apps/empty.tsx b/web/app/components/apps/empty.tsx
index 0dee3c908a..0876101d79 100644
--- a/web/app/components/apps/empty.tsx
+++ b/web/app/components/apps/empty.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 
 const DefaultCards = React.memo(() => {
   const renderArray = Array.from({ length: 36 })
@@ -17,15 +16,17 @@ const DefaultCards = React.memo(() => {
   )
 })
 
-const Empty = () => {
-  const { t } = useTranslation()
+type Props = {
+  message: string
+}
 
+const Empty = ({ message }: Props) => {
   return (
     <>
       <DefaultCards />
       <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-linear-to-t from-background-body to-transparent">
         <span className="system-md-medium text-text-tertiary">
-          {t('newApp.noAppsFound', { ns: 'app' })}
+          {message}
         </span>
       </div>
     </>
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 47dcbf34ad..9b680c9087 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -228,12 +228,16 @@ const List: FC<Props> = ({
   const hasAnyApp = (data?.pages?.[0]?.total ?? 0) > 0
   const hasAnySnippet = snippetItems.length > 0
   const currentKeywords = isAppsPage ? keywords : snippetKeywordsInput
+  const showEmptyState = !showSkeleton && (isAppsPage ? !hasAnyApp : !hasAnySnippet)
+  const emptyStateMessage = isAppsPage
+    ? t('newApp.noAppsFound', { ns: 'app' })
+    : t('tabs.noSnippetsFound', { ns: 'workflow' })
 
   return (
     <>
       <div ref={containerRef} className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
         {dragging && (
-          <div className="inset-0 absolute z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2" />
+          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2" />
         )}
 
         <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pt-7 pb-5">
@@ -273,7 +277,7 @@ const List: FC<Props> = ({
 
         <div className={cn(
           'relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
-          isAppsPage && !hasAnyApp && 'overflow-hidden',
+          showEmptyState && 'overflow-hidden',
         )}
         >
           {(isCurrentWorkspaceEditor || isLoadingCurrentWorkspace) && (
@@ -300,13 +304,7 @@ const List: FC<Props> = ({
             <SnippetCard key={snippet.id} snippet={snippet} />
           ))}
 
-          {!showSkeleton && isAppsPage && !hasAnyApp && <Empty />}
-
-          {!showSkeleton && !isAppsPage && !hasAnySnippet && (
-            <div className="col-span-full flex min-h-[240px] items-center justify-center rounded-xl border border-dashed border-divider-regular bg-components-card-bg p-6 text-center text-sm text-text-tertiary">
-              {t('tabs.noSnippetsFound', { ns: 'workflow' })}
-            </div>
-          )}
+          {showEmptyState && <Empty message={emptyStateMessage} />}
 
           {isAppsPage && isFetchingNextPage && (
             <AppCardSkeleton count={3} />

From f1da2c76d100f615a6fa0c0e0d56be04c73f68f3 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 15 Apr 2026 18:22:20 +0800
Subject: [PATCH 096/108] fix(web): add page title for snippet

---
 web/app/components/apps/creators-filter.tsx   |   2 +-
 .../__tests__/snippet-layout.spec.tsx         | 108 ++++++++++++++++++
 .../snippets/components/snippet-layout.tsx    |   3 +
 3 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx

diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
index 7a268c5136..4bcff660e5 100644
--- a/web/app/components/apps/creators-filter.tsx
+++ b/web/app/components/apps/creators-filter.tsx
@@ -103,7 +103,7 @@ const CreatorsFilter = ({
               baseChipClassName,
               isSelected
                 ? 'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-state-base-hover'
-                : 'border-transparent bg-[#f9f9f9] text-text-tertiary hover:bg-components-input-bg-hover',
+                : 'border-transparent bg-components-input-bg-normal text-text-tertiary hover:bg-components-input-bg-hover',
             )}
           />
         )}
diff --git a/web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx
new file mode 100644
index 0000000000..3202c3dc43
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx
@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import SnippetLayout from '../snippet-layout'
+
+const mockSetAppSidebarExpand = vi.fn()
+const mockUseDocumentTitle = vi.fn()
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: {
+    mobile: 'mobile',
+    desktop: 'desktop',
+  },
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+  default: (title: string) => mockUseDocumentTitle(title),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (mode: string) => ReactNode
+    renderNavigation?: (mode: string) => ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      {renderHeader?.('expand')}
+      {renderNavigation?.('expand')}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name, href, active }: { name: string, href: string, active: boolean }) => (
+    <a
+      aria-current={active ? 'page' : undefined}
+      href={href}
+    >
+      {name}
+    </a>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
+  default: ({ snippet }: { snippet: SnippetDetail }) => <div>{snippet.name}</div>,
+}))
+
+const createSnippet = (overrides: Partial<SnippetDetail> = {}): SnippetDetail => ({
+  id: 'snippet-1',
+  name: 'Snippet Title',
+  description: 'Snippet description',
+  author: 'tester',
+  updatedAt: '2026-04-15',
+  usage: '42',
+  icon: 'emoji',
+  iconBackground: '#ffffff',
+  ...overrides,
+})
+
+describe('SnippetLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  describe('Document title', () => {
+    it('should set the document title to the snippet name when snippet detail is available', () => {
+      render(
+        <SnippetLayout
+          snippetId="snippet-1"
+          snippet={createSnippet()}
+          section="orchestrate"
+        >
+          <div>content</div>
+        </SnippetLayout>,
+      )
+
+      expect(mockUseDocumentTitle).toHaveBeenCalledWith('Snippet Title')
+    })
+  })
+
+  describe('Navigation', () => {
+    it('should render snippet navigation links', () => {
+      render(
+        <SnippetLayout
+          snippetId="snippet-1"
+          snippet={createSnippet()}
+          section="evaluation"
+        >
+          <div>content</div>
+        </SnippetLayout>,
+      )
+
+      expect(screen.getByRole('link', { name: 'snippet.sectionOrchestrate' })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
+      expect(screen.getByRole('link', { name: 'snippet.sectionEvaluation' })).toHaveAttribute('href', '/snippets/snippet-1/evaluation')
+      expect(screen.getByRole('link', { name: 'snippet.sectionEvaluation' })).toHaveAttribute('aria-current', 'page')
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/snippet-layout.tsx b/web/app/components/snippets/components/snippet-layout.tsx
index 37900f3969..2d03f3a065 100644
--- a/web/app/components/snippets/components/snippet-layout.tsx
+++ b/web/app/components/snippets/components/snippet-layout.tsx
@@ -16,6 +16,7 @@ import NavLink from '@/app/components/app-sidebar/nav-link'
 import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import useDocumentTitle from '@/hooks/use-document-title'
 
 type SnippetLayoutProps = {
   children: ReactNode
@@ -45,6 +46,8 @@ const SnippetLayout = ({
   const isMobile = media === MediaType.mobile
   const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
 
+  useDocumentTitle(snippet.name || t('typeLabel'))
+
   useEffect(() => {
     const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
     const mode = isMobile ? 'collapse' : 'expand'

From 5bfebd371d88d46c3f6d5c5763bad03a4945a901 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 16 Apr 2026 10:31:35 +0800
Subject: [PATCH 097/108] fix(web): snippet draft sync

---
 .../__tests__/snippet-main.spec.tsx           |  57 +++---
 .../use-snippet-input-field-actions.spec.ts   |  24 ++-
 .../hooks/use-snippet-input-field-actions.ts  |  15 +-
 .../snippets/components/snippet-main.tsx      |  14 +-
 .../__tests__/use-nodes-sync-draft.spec.ts    | 163 ++++++++++++++++++
 .../snippets/hooks/use-nodes-sync-draft.ts    |  36 ++--
 .../hooks/use-snippet-refresh-draft.ts        |   9 +
 web/app/components/snippets/store/index.ts    |   4 +
 8 files changed, 268 insertions(+), 54 deletions(-)
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts

diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
index c6a6b5a231..ed0ce3987d 100644
--- a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -8,6 +8,7 @@ const mockSyncInputFieldsDraft = vi.fn()
 const mockCloseEditor = vi.fn()
 const mockOpenEditor = vi.fn()
 const mockReset = vi.fn()
+const mockSetFields = vi.fn()
 const mockSetInputPanelOpen = vi.fn()
 const mockSetPublishMenuOpen = vi.fn()
 const mockToggleInputPanel = vi.fn()
@@ -38,33 +39,24 @@ const mockInspectVarsCrud = {
   invalidateConversationVarValues: vi.fn(),
 }
 let capturedHooksStore: Record<string, unknown> | undefined
+let snippetDetailStoreState: {
+  editingField: SnippetInputField | null
+  fields: SnippetInputField[]
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  isPublishMenuOpen: boolean
+  closeEditor: typeof mockCloseEditor
+  openEditor: typeof mockOpenEditor
+  reset: typeof mockReset
+  setFields: typeof mockSetFields
+  setInputPanelOpen: typeof mockSetInputPanelOpen
+  setPublishMenuOpen: typeof mockSetPublishMenuOpen
+  toggleInputPanel: typeof mockToggleInputPanel
+  togglePublishMenu: typeof mockTogglePublishMenu
+}
 
 vi.mock('@/app/components/snippets/store', () => ({
-  useSnippetDetailStore: (selector: (state: {
-    editingField: SnippetInputField | null
-    isEditorOpen: boolean
-    isInputPanelOpen: boolean
-    isPublishMenuOpen: boolean
-    closeEditor: typeof mockCloseEditor
-    openEditor: typeof mockOpenEditor
-    reset: typeof mockReset
-    setInputPanelOpen: typeof mockSetInputPanelOpen
-    setPublishMenuOpen: typeof mockSetPublishMenuOpen
-    toggleInputPanel: typeof mockToggleInputPanel
-    togglePublishMenu: typeof mockTogglePublishMenu
-  }) => unknown) => selector({
-    editingField: null,
-    isEditorOpen: false,
-    isInputPanelOpen: true,
-    isPublishMenuOpen: false,
-    closeEditor: mockCloseEditor,
-    openEditor: mockOpenEditor,
-    reset: mockReset,
-    setInputPanelOpen: mockSetInputPanelOpen,
-    setPublishMenuOpen: mockSetPublishMenuOpen,
-    toggleInputPanel: mockToggleInputPanel,
-    togglePublishMenu: mockTogglePublishMenu,
-  }),
+  useSnippetDetailStore: (selector: (state: typeof snippetDetailStoreState) => unknown) => selector(snippetDetailStoreState),
 }))
 
 vi.mock('@/service/use-snippet-workflows', () => ({
@@ -216,6 +208,21 @@ describe('SnippetMain', () => {
     mockSyncInputFieldsDraft.mockResolvedValue(undefined)
     mockPublishSnippetMutateAsync.mockResolvedValue(undefined)
     capturedHooksStore = undefined
+    snippetDetailStoreState = {
+      editingField: null,
+      fields: [...payload.inputFields],
+      isEditorOpen: false,
+      isInputPanelOpen: true,
+      isPublishMenuOpen: false,
+      closeEditor: mockCloseEditor,
+      openEditor: mockOpenEditor,
+      reset: mockReset,
+      setFields: mockSetFields,
+      setInputPanelOpen: mockSetInputPanelOpen,
+      setPublishMenuOpen: mockSetPublishMenuOpen,
+      toggleInputPanel: mockToggleInputPanel,
+      togglePublishMenu: mockTogglePublishMenu,
+    }
   })
 
   describe('Input Fields Sync', () => {
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
index ae9819e464..f8f9f1daba 100644
--- a/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
@@ -7,15 +7,18 @@ import { useSnippetInputFieldActions } from '../use-snippet-input-field-actions'
 const mockSyncInputFieldsDraft = vi.fn()
 const mockCloseEditor = vi.fn()
 const mockOpenEditor = vi.fn()
+const mockSetFields = vi.fn()
 const mockSetInputPanelOpen = vi.fn()
 const mockToggleInputPanel = vi.fn()
 
 let snippetDetailStoreState: {
   editingField: SnippetInputField | null
+  fields: SnippetInputField[]
   isEditorOpen: boolean
   isInputPanelOpen: boolean
   closeEditor: typeof mockCloseEditor
   openEditor: typeof mockOpenEditor
+  setFields: typeof mockSetFields
   setInputPanelOpen: typeof mockSetInputPanelOpen
   toggleInputPanel: typeof mockToggleInputPanel
 }
@@ -49,37 +52,42 @@ describe('useSnippetInputFieldActions', () => {
     vi.clearAllMocks()
     snippetDetailStoreState = {
       editingField: null,
+      fields: [],
       isEditorOpen: false,
       isInputPanelOpen: true,
       closeEditor: mockCloseEditor,
       openEditor: mockOpenEditor,
+      setFields: mockSetFields,
       setInputPanelOpen: mockSetInputPanelOpen,
       toggleInputPanel: mockToggleInputPanel,
     }
+    mockSetFields.mockImplementation((fields: SnippetInputField[]) => {
+      snippetDetailStoreState.fields = fields
+    })
     mockSyncInputFieldsDraft.mockResolvedValue(undefined)
   })
 
   describe('Field sync', () => {
     it('should remove a field and sync the draft', () => {
+      snippetDetailStoreState.fields = [createField()]
       const { result } = renderHook(() => useSnippetInputFieldActions({
         snippetId: 'snippet-1',
-        initialFields: [createField()],
       }))
 
       act(() => {
         result.current.handleRemoveField(0)
       })
 
-      expect(result.current.fields).toEqual([])
+      expect(mockSetFields).toHaveBeenCalledWith([])
       expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([], {
         onRefresh: expect.any(Function),
       })
     })
 
     it('should append a new field and close the editor after syncing', () => {
+      snippetDetailStoreState.fields = [createField()]
       const { result } = renderHook(() => useSnippetInputFieldActions({
         snippetId: 'snippet-1',
-        initialFields: [createField()],
       }))
 
       act(() => {
@@ -89,7 +97,7 @@ describe('useSnippetInputFieldActions', () => {
         }))
       })
 
-      expect(result.current.fields).toEqual([
+      expect(mockSetFields).toHaveBeenCalledWith([
         createField(),
         createField({
           label: 'Topic',
@@ -109,9 +117,9 @@ describe('useSnippetInputFieldActions', () => {
     })
 
     it('should reject duplicated variables without syncing', () => {
+      snippetDetailStoreState.fields = [createField()]
       const { result } = renderHook(() => useSnippetInputFieldActions({
         snippetId: 'snippet-1',
-        initialFields: [createField()],
       }))
 
       act(() => {
@@ -124,15 +132,15 @@ describe('useSnippetInputFieldActions', () => {
       expect(toast.error).toHaveBeenCalledWith('datasetPipeline.inputFieldPanel.error.variableDuplicate')
       expect(mockSyncInputFieldsDraft).not.toHaveBeenCalled()
       expect(mockCloseEditor).not.toHaveBeenCalled()
-      expect(result.current.fields).toEqual([createField()])
+      expect(mockSetFields).not.toHaveBeenCalled()
     })
   })
 
   describe('Panel actions', () => {
     it('should close the editor before toggling the input panel when the panel is open', () => {
+      snippetDetailStoreState.fields = [createField()]
       const { result } = renderHook(() => useSnippetInputFieldActions({
         snippetId: 'snippet-1',
-        initialFields: [createField()],
       }))
 
       act(() => {
@@ -144,9 +152,9 @@ describe('useSnippetInputFieldActions', () => {
     })
 
     it('should close the input panel and clear the editor state', () => {
+      snippetDetailStoreState.fields = [createField()]
       const { result } = renderHook(() => useSnippetInputFieldActions({
         snippetId: 'snippet-1',
-        initialFields: [createField()],
       }))
 
       act(() => {
diff --git a/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
index 738c9cc646..503949004a 100644
--- a/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
+++ b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
@@ -1,5 +1,5 @@
 import type { SnippetInputField } from '@/models/snippet'
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { toast } from '@/app/components/base/ui/toast'
@@ -8,37 +8,38 @@ import { useSnippetDetailStore } from '../../store'
 
 type UseSnippetInputFieldActionsOptions = {
   snippetId: string
-  initialFields: SnippetInputField[]
 }
 
 export const useSnippetInputFieldActions = ({
   snippetId,
-  initialFields,
 }: UseSnippetInputFieldActionsOptions) => {
   const { t } = useTranslation('snippet')
-  const [fields, setFields] = useState<SnippetInputField[]>(initialFields)
   const { syncInputFieldsDraft } = useNodesSyncDraft(snippetId)
   const {
     editingField,
+    fields,
     isEditorOpen,
     isInputPanelOpen,
     closeEditor,
     openEditor,
+    setFields,
     setInputPanelOpen,
     toggleInputPanel,
   } = useSnippetDetailStore(useShallow(state => ({
     editingField: state.editingField,
+    fields: state.fields,
     isEditorOpen: state.isEditorOpen,
     isInputPanelOpen: state.isInputPanelOpen,
     closeEditor: state.closeEditor,
     openEditor: state.openEditor,
+    setFields: state.setFields,
     setInputPanelOpen: state.setInputPanelOpen,
     toggleInputPanel: state.toggleInputPanel,
   })))
 
   const handleSortChange = useCallback((newFields: SnippetInputField[]) => {
     setFields(newFields)
-  }, [])
+  }, [setFields])
 
   const handleRemoveField = useCallback((index: number) => {
     const nextFields = fields.filter((_, currentIndex) => currentIndex !== index)
@@ -46,7 +47,7 @@ export const useSnippetInputFieldActions = ({
     void syncInputFieldsDraft(nextFields, {
       onRefresh: setFields,
     })
-  }, [fields, syncInputFieldsDraft])
+  }, [fields, setFields, syncInputFieldsDraft])
 
   const handleSubmitField = useCallback((field: SnippetInputField) => {
     const originalVariable = editingField?.variable
@@ -66,7 +67,7 @@ export const useSnippetInputFieldActions = ({
       onRefresh: setFields,
     })
     closeEditor()
-  }, [closeEditor, editingField?.variable, fields, syncInputFieldsDraft, t])
+  }, [closeEditor, editingField?.variable, fields, setFields, syncInputFieldsDraft, t])
 
   const handleToggleInputPanel = useCallback(() => {
     if (isInputPanelOpen)
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
index f65ec8c6f8..6dd75ac426 100644
--- a/web/app/components/snippets/components/snippet-main.tsx
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -6,6 +6,7 @@ import {
   useEffect,
   useMemo,
 } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
 import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
@@ -85,7 +86,13 @@ const SnippetMain = ({
       nodesMap,
     }
   }, [workflowAvailableNodesMetaData])
-  const reset = useSnippetDetailStore(state => state.reset)
+  const {
+    reset,
+    setFields,
+  } = useSnippetDetailStore(useShallow(state => ({
+    reset: state.reset,
+    setFields: state.setFields,
+  })))
   const {
     editingField,
     fields,
@@ -100,7 +107,6 @@ const SnippetMain = ({
     handleToggleInputPanel,
   } = useSnippetInputFieldActions({
     snippetId,
-    initialFields: payload.inputFields,
   })
   const {
     handlePublish,
@@ -122,6 +128,10 @@ const SnippetMain = ({
     reset()
   }, [reset, snippetId])
 
+  useEffect(() => {
+    setFields(payload.inputFields)
+  }, [payload.inputFields, setFields, snippetId])
+
   const hooksStore = useMemo(() => {
     return {
       doSyncWorkflowDraft,
diff --git a/web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts b/web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts
new file mode 100644
index 0000000000..30c9a780fa
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts
@@ -0,0 +1,163 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { act, renderHook } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetDetailStore } from '../../store'
+import { useNodesSyncDraft } from '../use-nodes-sync-draft'
+
+const mockGetNodes = vi.fn()
+const mockGetNodesReadOnly = vi.fn()
+const mockPostWithKeepalive = vi.fn()
+const mockSyncDraftWorkflow = vi.fn()
+const mockSetDraftUpdatedAt = vi.fn()
+const mockSetSyncWorkflowDraftHash = vi.fn()
+
+let reactFlowState: {
+  getNodes: typeof mockGetNodes
+  edges: Array<Record<string, unknown>>
+  transform: [number, number, number]
+}
+
+let workflowStoreState: {
+  syncWorkflowDraftHash: string | null
+  setDraftUpdatedAt: typeof mockSetDraftUpdatedAt
+  setSyncWorkflowDraftHash: typeof mockSetSyncWorkflowDraftHash
+}
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({ getState: () => reactFlowState }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-workflow', () => ({
+  useNodesReadOnly: () => ({ getNodesReadOnly: mockGetNodesReadOnly }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-serial-async-callback', () => ({
+  useSerialAsyncCallback: (fn: (...args: unknown[]) => Promise<void>, checkFn?: () => boolean) =>
+    (...args: unknown[]) => {
+      if (checkFn?.())
+        return
+
+      return fn(...args)
+    },
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => workflowStoreState,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    snippets: {
+      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+    },
+  },
+}))
+
+vi.mock('@/service/fetch', () => ({
+  postWithKeepalive: (...args: unknown[]) => mockPostWithKeepalive(...args),
+}))
+
+vi.mock('@/config', () => ({ API_PREFIX: '/api' }))
+
+vi.mock('../use-snippet-refresh-draft', () => ({
+  useSnippetRefreshDraft: () => ({
+    handleRefreshWorkflowDraft: vi.fn(),
+  }),
+}))
+
+const createInputField = (variable: string): SnippetInputField => ({
+  type: PipelineInputVarType.textInput,
+  label: variable,
+  variable,
+  required: false,
+})
+
+describe('snippet/use-nodes-sync-draft', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    reactFlowState = {
+      getNodes: mockGetNodes,
+      edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+      transform: [12, 24, 1.5],
+    }
+    workflowStoreState = {
+      syncWorkflowDraftHash: 'draft-hash',
+      setDraftUpdatedAt: mockSetDraftUpdatedAt,
+      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+    }
+    mockGetNodesReadOnly.mockReturnValue(false)
+    mockGetNodes.mockReturnValue([
+      { id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start', _temp: 'drop' } },
+    ])
+    mockSyncDraftWorkflow.mockResolvedValue({
+      hash: 'next-hash',
+      updated_at: 123,
+    })
+    useSnippetDetailStore.setState({
+      fields: [createInputField('topic')],
+    })
+  })
+
+  it('should include current input_fields when syncing the draft graph', async () => {
+    const { result } = renderHook(() => useNodesSyncDraft('snippet-1'))
+
+    await act(async () => {
+      await result.current.doSyncWorkflowDraft()
+    })
+
+    expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-1' },
+      body: {
+        graph: {
+          nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start' } }],
+          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+          viewport: { x: 12, y: 24, zoom: 1.5 },
+        },
+        input_fields: [createInputField('topic')],
+        hash: 'draft-hash',
+      },
+    })
+  })
+
+  it('should include the latest graph when syncing input fields', async () => {
+    const { result } = renderHook(() => useNodesSyncDraft('snippet-1'))
+    const nextFields = [createInputField('summary')]
+
+    await act(async () => {
+      await result.current.syncInputFieldsDraft(nextFields)
+    })
+
+    expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-1' },
+      body: {
+        graph: {
+          nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start' } }],
+          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+          viewport: { x: 12, y: 24, zoom: 1.5 },
+        },
+        input_fields: nextFields,
+        hash: 'draft-hash',
+      },
+    })
+  })
+
+  it('should send input_fields together with graph on page close', () => {
+    const { result } = renderHook(() => useNodesSyncDraft('snippet-1'))
+
+    act(() => {
+      result.current.syncWorkflowDraftWhenPageClose()
+    })
+
+    expect(mockPostWithKeepalive).toHaveBeenCalledWith('/api/snippets/snippet-1/workflows/draft', {
+      graph: {
+        nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start' } }],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+        viewport: { x: 12, y: 24, zoom: 1.5 },
+      },
+      input_fields: [createInputField('topic')],
+      hash: 'draft-hash',
+    })
+  })
+})
diff --git a/web/app/components/snippets/hooks/use-nodes-sync-draft.ts b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
index 169f1e6e9a..1c3efb5647 100644
--- a/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
@@ -10,6 +10,7 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 import { API_PREFIX } from '@/config'
 import { consoleClient } from '@/service/client'
 import { postWithKeepalive } from '@/service/fetch'
+import { useSnippetDetailStore } from '../store'
 import { useSnippetRefreshDraft } from './use-snippet-refresh-draft'
 
 const isSyncConflictError = (error: unknown): error is { bodyUsed: boolean, json: () => Promise<{ code?: string }> } => {
@@ -30,7 +31,13 @@ export const useNodesSyncDraft = (snippetId: string) => {
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
 
-  const getGraphSyncPayload = useCallback(() => {
+  const getInputFieldsSyncPayload = useCallback((inputFields?: SnippetInputField[]) => {
+    return {
+      input_fields: inputFields ?? useSnippetDetailStore.getState().fields,
+    }
+  }, [])
+
+  const getDraftSyncPayload = useCallback((inputFields?: SnippetInputField[]) => {
     const {
       getNodes,
       edges,
@@ -59,13 +66,14 @@ export const useNodesSyncDraft = (snippetId: string) => {
     })
 
     return {
+      ...getInputFieldsSyncPayload(inputFields),
       graph: {
         nodes: producedNodes,
         edges: producedEdges,
         viewport: { x, y, zoom },
       },
     }
-  }, [snippetId, store])
+  }, [getInputFieldsSyncPayload, snippetId, store])
 
   const syncDraft = useCallback(async (
     payload: Omit<SnippetDraftSyncPayload, 'hash'>,
@@ -116,34 +124,38 @@ export const useNodesSyncDraft = (snippetId: string) => {
     if (getNodesReadOnly())
       return
 
-    const graphPayload = getGraphSyncPayload()
-    if (!graphPayload)
+    const draftPayload = getDraftSyncPayload()
+    if (!draftPayload)
       return
 
     const { syncWorkflowDraftHash } = workflowStore.getState()
     postWithKeepalive(`${API_PREFIX}/snippets/${snippetId}/workflows/draft`, {
-      ...graphPayload,
+      ...draftPayload,
       hash: syncWorkflowDraftHash,
     })
-  }, [getGraphSyncPayload, getNodesReadOnly, snippetId, workflowStore])
+  }, [getDraftSyncPayload, getNodesReadOnly, snippetId, workflowStore])
 
   const performSync = useCallback(async (
     notRefreshWhenSyncError?: boolean,
     callback?: SyncDraftCallback,
   ) => {
-    const graphPayload = getGraphSyncPayload()
-    if (!graphPayload)
+    const draftPayload = getDraftSyncPayload()
+    if (!draftPayload)
       return
 
-    await syncDraft(graphPayload, notRefreshWhenSyncError, callback)
-  }, [getGraphSyncPayload, syncDraft])
+    await syncDraft(draftPayload, notRefreshWhenSyncError, callback)
+  }, [getDraftSyncPayload, syncDraft])
 
   const performInputFieldsSync = useCallback(async (
     inputFields: SnippetInputField[],
     callback?: SyncInputFieldsDraftCallback,
   ) => {
+    const draftPayload = getDraftSyncPayload(inputFields)
+    if (!draftPayload)
+      return
+
     await syncDraft(
-      { input_fields: inputFields },
+      draftPayload,
       false,
       callback,
       (draftWorkflow) => {
@@ -153,7 +165,7 @@ export const useNodesSyncDraft = (snippetId: string) => {
         callback?.onRefresh?.(refreshedInputFields)
       },
     )
-  }, [syncDraft])
+  }, [getDraftSyncPayload, syncDraft])
 
   const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
   const syncInputFieldsDraft = useSerialAsyncCallback(performInputFieldsSync)
diff --git a/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
index 270db76a00..33420911de 100644
--- a/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
+++ b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
@@ -1,9 +1,11 @@
 import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
+import type { SnippetInputField } from '@/models/snippet'
 import type { SnippetWorkflow } from '@/types/snippet'
 import { useCallback } from 'react'
 import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { consoleClient } from '@/service/client'
+import { useSnippetDetailStore } from '../store'
 
 export const useSnippetRefreshDraft = (snippetId: string) => {
   const workflowStore = useWorkflowStore()
@@ -23,12 +25,19 @@ export const useSnippetRefreshDraft = (snippetId: string) => {
     consoleClient.snippets.draftWorkflow({
       params: { snippetId },
     }).then((response) => {
+      const inputFields = Array.isArray(response.input_fields)
+        ? response.input_fields as SnippetInputField[]
+        : []
+
       handleUpdateWorkflowCanvas({
         ...response.graph,
         nodes: response.graph?.nodes || [],
         edges: response.graph?.edges || [],
         viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
       } as WorkflowDataUpdater)
+      useSnippetDetailStore.setState({
+        fields: inputFields,
+      })
       setSyncWorkflowDraftHash(response.hash)
       setDraftUpdatedAt(response.updated_at)
       onSuccess?.(response)
diff --git a/web/app/components/snippets/store/index.ts b/web/app/components/snippets/store/index.ts
index c0c86d6aa2..4dcd78c046 100644
--- a/web/app/components/snippets/store/index.ts
+++ b/web/app/components/snippets/store/index.ts
@@ -5,12 +5,14 @@ import { create } from 'zustand'
 
 type SnippetDetailUIState = {
   activeSection: SnippetSection
+  fields: SnippetInputField[]
   isInputPanelOpen: boolean
   isPublishMenuOpen: boolean
   isPreviewMode: boolean
   isEditorOpen: boolean
   editingField: SnippetInputField | null
   setActiveSection: (section: SnippetSection) => void
+  setFields: (fields: SnippetInputField[]) => void
   setInputPanelOpen: (value: boolean) => void
   toggleInputPanel: () => void
   setPublishMenuOpen: (value: boolean) => void
@@ -23,6 +25,7 @@ type SnippetDetailUIState = {
 
 const initialState = {
   activeSection: 'orchestrate' as SnippetSection,
+  fields: [] as SnippetInputField[],
   isInputPanelOpen: false,
   isPublishMenuOpen: false,
   isPreviewMode: false,
@@ -33,6 +36,7 @@ const initialState = {
 export const useSnippetDetailStore = create<SnippetDetailUIState>(set => ({
   ...initialState,
   setActiveSection: activeSection => set({ activeSection }),
+  setFields: fields => set({ fields }),
   setInputPanelOpen: isInputPanelOpen => set({ isInputPanelOpen }),
   toggleInputPanel: () => set(state => ({ isInputPanelOpen: !state.isInputPanelOpen, isPublishMenuOpen: false })),
   setPublishMenuOpen: isPublishMenuOpen => set({ isPublishMenuOpen }),

From a9dc57eeef6cb90f8fcced0f3eed1b304eff7923 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 16 Apr 2026 11:07:26 +0800
Subject: [PATCH 098/108] fix(web): input fields form & graph publish

---
 .../__tests__/input-field-editor.spec.tsx     |  2 +-
 .../__tests__/publish-menu.spec.tsx           | 20 ++++
 .../__tests__/use-snippet-publish.spec.ts     | 15 ++-
 .../components/hooks/use-snippet-publish.ts   |  7 +-
 .../components/input-field-editor.tsx         |  9 +-
 .../input-field-form/__tests__/hooks.spec.ts  | 40 ++++++++
 .../input-field-form/__tests__/schema.spec.ts | 51 ++++++++++
 .../components/input-field-form/hooks.ts      | 30 ++++++
 .../components/input-field-form/index.tsx     | 92 ++++++++++++++++++
 .../input-field-form/initial-fields.tsx       | 50 ++++++++++
 .../components/input-field-form/schema.ts     | 95 +++++++++++++++++++
 .../snippets/components/publish-menu.tsx      | 24 ++++-
 .../components/snippet-header/index.tsx       |  7 +-
 .../components/snippet-header/publisher.tsx   |  8 +-
 .../hooks/__tests__/use-snippet-init.spec.ts  | 13 ++-
 .../snippets/hooks/use-snippet-init.ts        | 11 ++-
 web/service/use-snippet-workflows.ts          | 14 ++-
 17 files changed, 465 insertions(+), 23 deletions(-)
 create mode 100644 web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts
 create mode 100644 web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts
 create mode 100644 web/app/components/snippets/components/input-field-form/hooks.ts
 create mode 100644 web/app/components/snippets/components/input-field-form/index.tsx
 create mode 100644 web/app/components/snippets/components/input-field-form/initial-fields.tsx
 create mode 100644 web/app/components/snippets/components/input-field-form/schema.ts

diff --git a/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx b/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
index de46e23164..dd89fcf2e3 100644
--- a/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
@@ -9,7 +9,7 @@ vi.mock('@/app/components/rag-pipeline/components/panel/input-field/hooks', () =
   useFloatingRight: (...args: unknown[]) => mockUseFloatingRight(...args),
 }))
 
-vi.mock('@/app/components/rag-pipeline/components/panel/input-field/editor/form', () => ({
+vi.mock('../input-field-form', () => ({
   default: ({ isEditMode }: { isEditMode: boolean }) => (
     <div data-testid="snippet-input-field-form">{isEditMode ? 'edit' : 'create'}</div>
   ),
diff --git a/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx b/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
index 5b5a61343d..c3c97047d9 100644
--- a/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
@@ -5,6 +5,8 @@ describe('PublishMenu', () => {
   it('should render the draft summary and publish shortcut', () => {
     const { container } = render(
       <PublishMenu
+        draftUpdatedAt={0}
+        publishedAt={0}
         uiMeta={{
           inputFieldCount: 1,
           checklistCount: 2,
@@ -19,4 +21,22 @@ describe('PublishMenu', () => {
     expect(screen.getByRole('button', { name: 'snippet.publishButton' })).toBeInTheDocument()
     expect(container.querySelectorAll('.system-kbd')).toHaveLength(3)
   })
+
+  it('should render published summary when a published version exists', () => {
+    render(
+      <PublishMenu
+        draftUpdatedAt={1_712_300_000_000}
+        publishedAt={1_712_345_678_000}
+        uiMeta={{
+          inputFieldCount: 1,
+          checklistCount: 2,
+          autoSavedAt: 'Auto-saved · a few seconds ago',
+        }}
+        onPublish={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('workflow.common.latestPublished')).toBeInTheDocument()
+    expect(screen.getByText(/workflow\.common\.publishedAt/)).toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
index 9d29d80906..d3d46e89cb 100644
--- a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
@@ -5,6 +5,7 @@ import { useSnippetPublish } from '../use-snippet-publish'
 const mockMutateAsync = vi.fn()
 const mockSetPublishMenuOpen = vi.fn()
 const mockUseKeyPress = vi.fn()
+const mockSetPublishedAt = vi.fn()
 
 let isPublishMenuOpen = false
 let isPending = false
@@ -28,6 +29,14 @@ vi.mock('@/service/use-snippet-workflows', () => ({
   }),
 }))
 
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => ({
+      setPublishedAt: mockSetPublishedAt,
+    }),
+  }),
+}))
+
 vi.mock('../../../store', () => ({
   useSnippetDetailStore: (selector: (state: {
     isPublishMenuOpen: boolean
@@ -44,7 +53,7 @@ describe('useSnippetPublish', () => {
     isPublishMenuOpen = false
     isPending = false
     shortcutHandler = undefined
-    mockMutateAsync.mockResolvedValue(undefined)
+    mockMutateAsync.mockResolvedValue({ created_at: 1_712_345_678 })
     mockUseKeyPress.mockImplementation((_key, handler) => {
       shortcutHandler = handler
     })
@@ -63,6 +72,7 @@ describe('useSnippetPublish', () => {
       expect(mockMutateAsync).toHaveBeenCalledWith({
         params: { snippetId: 'snippet-1' },
       })
+      expect(mockSetPublishedAt).toHaveBeenCalledWith(1_712_345_678)
       expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
       expect(toast.success).toHaveBeenCalledWith('snippet.publishSuccess')
     })
@@ -104,7 +114,8 @@ describe('useSnippetPublish', () => {
       expect(preventDefault).toHaveBeenCalledTimes(1)
     })
 
-    it('should ignore the shortcut outside the orchestrate section', () => {
+    it('should ignore the shortcut while publishing is pending', () => {
+      isPending = true
       renderHook(() => useSnippetPublish({
         snippetId: 'snippet-1',
       }))
diff --git a/web/app/components/snippets/components/hooks/use-snippet-publish.ts b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
index 29dbfb03d2..fc3db4d8f4 100644
--- a/web/app/components/snippets/components/hooks/use-snippet-publish.ts
+++ b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
@@ -3,6 +3,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { toast } from '@/app/components/base/ui/toast'
+import { useWorkflowStore } from '@/app/components/workflow/store'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { usePublishSnippetWorkflowMutation } from '@/service/use-snippet-workflows'
 import { useSnippetDetailStore } from '../../store'
@@ -15,6 +16,7 @@ export const useSnippetPublish = ({
   snippetId,
 }: UseSnippetPublishOptions) => {
   const { t } = useTranslation('snippet')
+  const workflowStore = useWorkflowStore()
   const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
   const {
     isPublishMenuOpen,
@@ -26,16 +28,17 @@ export const useSnippetPublish = ({
 
   const handlePublish = useCallback(async () => {
     try {
-      await publishSnippetMutation.mutateAsync({
+      const publishedWorkflow = await publishSnippetMutation.mutateAsync({
         params: { snippetId },
       })
+      workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
       setPublishMenuOpen(false)
       toast.success(t('publishSuccess'))
     }
     catch (error) {
       toast.error(error instanceof Error ? error.message : t('publishFailed'))
     }
-  }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t])
+  }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t, workflowStore])
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (event) => {
     if (publishSnippetMutation.isPending)
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
index dcc6b8b72c..82ae65d67b 100644
--- a/web/app/components/snippets/components/input-field-editor.tsx
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -2,13 +2,12 @@
 
 import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
 import type { SnippetInputField } from '@/models/snippet'
-import { RiCloseLine } from '@remixicon/react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import InputFieldForm from '@/app/components/rag-pipeline/components/panel/input-field/editor/form'
 import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
 import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
 import { cn } from '@/utils/classnames'
+import InputFieldForm from './input-field-form'
 
 type SnippetInputFieldEditorProps = {
   field?: SnippetInputField | null
@@ -43,15 +42,15 @@ const SnippetInputFieldEditor = ({
         width: `min(${floatingRightWidth}px, calc(100vw - 24px))`,
       }}
     >
-      <div className="flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary system-xl-semibold">
+      <div className="flex items-center pt-3.5 pr-11 pb-1 pl-4 system-xl-semibold text-text-primary">
         {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
       </div>
       <button
         type="button"
-        className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center"
+        className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center"
         onClick={onClose}
       >
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+        <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
       </button>
       <InputFieldForm
         initialData={initialData}
diff --git a/web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts b/web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts
new file mode 100644
index 0000000000..178d4a136d
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts
@@ -0,0 +1,40 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetInputFieldConfigurations } from '../hooks'
+
+const mockUseConfigurations = vi.fn()
+
+vi.mock('@/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks', () => ({
+  useConfigurations: (...args: unknown[]) => mockUseConfigurations(...args),
+}))
+
+describe('useSnippetInputFieldConfigurations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should make text maxLength configuration optional for snippets only', () => {
+    mockUseConfigurations.mockReturnValue([
+      {
+        variable: 'maxLength',
+        required: true,
+        showConditions: [{ variable: 'type', value: PipelineInputVarType.textInput }],
+      },
+      {
+        variable: 'required',
+        required: true,
+        showConditions: [],
+      },
+    ])
+
+    const { result } = renderHook(() => useSnippetInputFieldConfigurations({
+      getFieldValue: vi.fn(),
+      setFieldValue: vi.fn(),
+      supportFile: true,
+    }))
+
+    expect(result.current[0].required).toBe(false)
+    expect(result.current[1].required).toBe(true)
+  })
+})
diff --git a/web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts b/web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts
new file mode 100644
index 0000000000..63a531a9d6
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts
@@ -0,0 +1,51 @@
+import type { TFunction } from 'i18next'
+import { describe, expect, it, vi } from 'vitest'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { createSnippetInputFieldSchema, TEXT_MAX_LENGTH } from '../schema'
+
+vi.mock('@/config', () => ({
+  MAX_VAR_KEY_LENGTH: 30,
+}))
+
+const t: TFunction = ((key: string) => key) as unknown as TFunction
+
+describe('createSnippetInputFieldSchema', () => {
+  const defaultOptions = { maxFileUploadLimit: 10 }
+
+  it('should allow text-input maxLength to be omitted', () => {
+    const schema = createSnippetInputFieldSchema(PipelineInputVarType.textInput, t, defaultOptions)
+    const result = schema.safeParse({
+      type: 'text-input',
+      variable: 'text_var',
+      label: 'Text',
+      required: false,
+    })
+
+    expect(result.success).toBe(true)
+  })
+
+  it('should still reject text-input maxLength above the limit', () => {
+    const schema = createSnippetInputFieldSchema(PipelineInputVarType.textInput, t, defaultOptions)
+    const result = schema.safeParse({
+      type: 'text-input',
+      variable: 'text_var',
+      label: 'Text',
+      required: false,
+      maxLength: TEXT_MAX_LENGTH + 1,
+    })
+
+    expect(result.success).toBe(false)
+  })
+
+  it('should allow paragraph maxLength to be omitted', () => {
+    const schema = createSnippetInputFieldSchema(PipelineInputVarType.paragraph, t, defaultOptions)
+    const result = schema.safeParse({
+      type: 'paragraph',
+      variable: 'paragraph_var',
+      label: 'Paragraph',
+      required: false,
+    })
+
+    expect(result.success).toBe(true)
+  })
+})
diff --git a/web/app/components/snippets/components/input-field-form/hooks.ts b/web/app/components/snippets/components/input-field-form/hooks.ts
new file mode 100644
index 0000000000..d3a98198b1
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/hooks.ts
@@ -0,0 +1,30 @@
+import type { DeepKeys } from '@tanstack/react-form'
+import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import { useMemo } from 'react'
+import { useConfigurations } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks'
+import { PipelineInputVarType } from '@/models/pipeline'
+
+type UseSnippetInputFieldConfigurationsProps = {
+  getFieldValue: (fieldName: DeepKeys<FormData>) => unknown
+  setFieldValue: (fieldName: DeepKeys<FormData>, value: unknown) => void
+  supportFile: boolean
+}
+
+export const useSnippetInputFieldConfigurations = (props: UseSnippetInputFieldConfigurationsProps) => {
+  const configurations = useConfigurations(props)
+
+  return useMemo(() => {
+    return configurations.map((configuration) => {
+      const isTextMaxLengthField = configuration.variable === 'maxLength'
+        && configuration.showConditions?.some(condition => condition.value === PipelineInputVarType.textInput)
+
+      if (!isTextMaxLengthField)
+        return configuration
+
+      return {
+        ...configuration,
+        required: false,
+      }
+    })
+  }, [configurations])
+}
diff --git a/web/app/components/snippets/components/input-field-form/index.tsx b/web/app/components/snippets/components/input-field-form/index.tsx
new file mode 100644
index 0000000000..e5620c9299
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/index.tsx
@@ -0,0 +1,92 @@
+import type { FormData, InputFieldFormProps } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import type { MoreInfo } from '@/app/components/workflow/types'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
+import { useAppForm } from '@/app/components/base/form'
+import { Button } from '@/app/components/base/ui/button'
+import { toast } from '@/app/components/base/ui/toast'
+import HiddenFields from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields'
+import ShowAllSettings from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings'
+import { ChangeType } from '@/app/components/workflow/types'
+import { useFileUploadConfig } from '@/service/use-common'
+import InitialFields from './initial-fields'
+import { createSnippetInputFieldSchema } from './schema'
+
+const SnippetInputFieldForm = ({ initialData, supportFile = false, onCancel, onSubmit, isEditMode = true }: InputFieldFormProps) => {
+  const { t } = useTranslation()
+  const { data: fileUploadConfigResponse } = useFileUploadConfig()
+  const { maxFileUploadLimit } = useFileSizeLimit(fileUploadConfigResponse)
+  const inputFieldForm = useAppForm({
+    defaultValues: initialData,
+    validators: {
+      onSubmit: ({ value }) => {
+        const { type } = value
+        const schema = createSnippetInputFieldSchema(type, t, { maxFileUploadLimit })
+        const result = schema.safeParse(value)
+        if (!result.success) {
+          const issues = result.error.issues
+          const firstIssue = issues[0]
+          const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
+          toast.error(errorMessage)
+          return errorMessage
+        }
+        return undefined
+      },
+    },
+    onSubmit: ({ value }) => {
+      let moreInfo: MoreInfo | undefined
+      if (isEditMode && value.variable !== initialData?.variable) {
+        moreInfo = {
+          type: ChangeType.changeVarName,
+          payload: { beforeKey: initialData?.variable || '', afterKey: value.variable },
+        }
+      }
+      onSubmit(value as FormData, moreInfo)
+    },
+  })
+  const [showAllSettings, setShowAllSettings] = useState(false)
+  const InitialFieldsComp = InitialFields({
+    initialData,
+    supportFile,
+  })
+  const HiddenFieldsComp = HiddenFields({
+    initialData,
+  })
+  const handleShowAllSettings = useCallback(() => {
+    setShowAllSettings(true)
+  }, [])
+  const ShowAllSettingComp = ShowAllSettings({
+    initialData,
+    handleShowAllSettings,
+  })
+
+  return (
+    <form
+      className="w-full"
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        inputFieldForm.handleSubmit()
+      }}
+    >
+      <div className="flex flex-col gap-4 px-4 py-2">
+        <InitialFieldsComp form={inputFieldForm} />
+        <Divider type="horizontal" />
+        {!showAllSettings && (<ShowAllSettingComp form={inputFieldForm} />)}
+        {showAllSettings && (<HiddenFieldsComp form={inputFieldForm} />)}
+      </div>
+      <div className="flex items-center justify-end gap-x-2 p-4 pt-2">
+        <Button variant="secondary" onClick={onCancel}>
+          {t('operation.cancel', { ns: 'common' })}
+        </Button>
+        <inputFieldForm.AppForm>
+          <inputFieldForm.Actions />
+        </inputFieldForm.AppForm>
+      </div>
+    </form>
+  )
+}
+
+export default SnippetInputFieldForm
diff --git a/web/app/components/snippets/components/input-field-form/initial-fields.tsx b/web/app/components/snippets/components/input-field-form/initial-fields.tsx
new file mode 100644
index 0000000000..0028995d76
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/initial-fields.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { useCallback } from 'react'
+import { withForm } from '@/app/components/base/form'
+import InputField from '@/app/components/base/form/form-scenarios/input-field/field'
+import { useSnippetInputFieldConfigurations } from './hooks'
+
+type InitialFieldsProps = {
+  initialData?: Record<string, unknown>
+  supportFile: boolean
+}
+
+const InitialFields = ({
+  initialData,
+  supportFile,
+}: InitialFieldsProps) => withForm({
+  defaultValues: initialData,
+  // eslint-disable-next-line react/component-hook-factories
+  render: function Render({
+    form,
+  }) {
+    const getFieldValue = useCallback((fieldName: string) => {
+      return form.getFieldValue(fieldName)
+    }, [form])
+
+    const setFieldValue = useCallback((fieldName: string, value: unknown) => {
+      form.setFieldValue(fieldName, value)
+    }, [form])
+
+    const initialConfigurations = useSnippetInputFieldConfigurations({
+      getFieldValue,
+      setFieldValue,
+      supportFile,
+    })
+
+    return (
+      <>
+        {initialConfigurations.map((config) => {
+          const FieldComponent = InputField({
+            initialData,
+            config,
+          })
+          const key = `${config.variable}-${config.label}-${config.showConditions.map(condition => String(condition.value)).join('-') || 'default'}`
+          return <FieldComponent key={key} form={form} />
+        })}
+      </>
+    )
+  },
+})
+
+export default InitialFields
diff --git a/web/app/components/snippets/components/input-field-form/schema.ts b/web/app/components/snippets/components/input-field-form/schema.ts
new file mode 100644
index 0000000000..563e6ec5e9
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/schema.ts
@@ -0,0 +1,95 @@
+import type { TFunction } from 'i18next'
+import type { SchemaOptions } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import * as z from 'zod'
+import { InputTypeEnum } from '@/app/components/base/form/components/field/input-type-select/types'
+import { MAX_VAR_KEY_LENGTH } from '@/config'
+import { PipelineInputVarType } from '@/models/pipeline'
+
+export const TEXT_MAX_LENGTH = 256
+
+const TransferMethod = z.enum([
+  'all',
+  'local_file',
+  'remote_url',
+])
+
+const SupportedFileTypes = z.enum([
+  'image',
+  'document',
+  'video',
+  'audio',
+  'custom',
+])
+
+export const createSnippetInputFieldSchema = (type: PipelineInputVarType, t: TFunction, options: SchemaOptions) => {
+  const { maxFileUploadLimit } = options
+  const commonSchema = z.object({
+    type: InputTypeEnum,
+    variable: z.string().nonempty({
+      message: t('varKeyError.canNoBeEmpty', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }).max(MAX_VAR_KEY_LENGTH, {
+      message: t('varKeyError.tooLong', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }).regex(/^(?!\d)\w+/, {
+      message: t('varKeyError.notStartWithNumber', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }).regex(/^[a-z_]\w{0,29}$/i, {
+      message: t('varKeyError.notValid', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }),
+    label: z.string().nonempty({
+      message: t('variableConfig.errorMsg.labelNameRequired', { ns: 'appDebug' }),
+    }),
+    required: z.boolean(),
+    tooltips: z.string().optional(),
+  })
+
+  if (type === PipelineInputVarType.textInput || type === PipelineInputVarType.paragraph) {
+    return z.object({
+      maxLength: z.number().min(1).max(TEXT_MAX_LENGTH).optional(),
+      default: z.string().optional(),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.number) {
+    return z.object({
+      default: z.number().optional(),
+      unit: z.string().optional(),
+      placeholder: z.string().optional(),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.select) {
+    return z.object({
+      options: z.array(z.string()).nonempty({
+        message: t('variableConfig.errorMsg.atLeastOneOption', { ns: 'appDebug' }),
+      }).refine(
+        arr => new Set(arr).size === arr.length,
+        {
+          message: t('variableConfig.errorMsg.optionRepeat', { ns: 'appDebug' }),
+        },
+      ),
+      default: z.string().optional(),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.singleFile) {
+    return z.object({
+      allowedFileUploadMethods: z.array(TransferMethod),
+      allowedTypesAndExtensions: z.object({
+        allowedFileExtensions: z.array(z.string()).optional(),
+        allowedFileTypes: z.array(SupportedFileTypes),
+      }),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.multiFiles) {
+    return z.object({
+      allowedFileUploadMethods: z.array(TransferMethod),
+      allowedTypesAndExtensions: z.object({
+        allowedFileExtensions: z.array(z.string()).optional(),
+        allowedFileTypes: z.array(SupportedFileTypes),
+      }),
+      maxLength: z.number().min(1).max(maxFileUploadLimit),
+    }).merge(commonSchema).passthrough()
+  }
+
+  return commonSchema.passthrough()
+}
diff --git a/web/app/components/snippets/components/publish-menu.tsx b/web/app/components/snippets/components/publish-menu.tsx
index 0a10f7606c..d5af23f935 100644
--- a/web/app/components/snippets/components/publish-menu.tsx
+++ b/web/app/components/snippets/components/publish-menu.tsx
@@ -4,26 +4,40 @@ import type { SnippetDetailUIModel } from '@/models/snippet'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 
 const PublishMenu = ({
+  draftUpdatedAt,
+  publishedAt,
   uiMeta,
   onPublish,
   isPublishing = false,
 }: {
+  draftUpdatedAt: number
+  publishedAt: number
   uiMeta: SnippetDetailUIModel
   onPublish: () => void
   isPublishing?: boolean
 }) => {
   const { t } = useTranslation('snippet')
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+
+  const hasPublishedVersion = Boolean(publishedAt)
 
   return (
-    <div className="flex flex-col gap-3 px-4 pb-4 pt-3">
+    <div className="flex flex-col gap-3 px-4 pt-3 pb-4">
       <div className="flex flex-col">
-        <div className="min-h-6 text-text-tertiary system-xs-medium-uppercase">
-          {t('publishMenuCurrentDraft')}
+        <div className="min-h-6 system-xs-medium-uppercase text-text-tertiary">
+          {hasPublishedVersion
+            ? t('common.latestPublished', { ns: 'workflow' })
+            : t('publishMenuCurrentDraft')}
         </div>
-        <div className="text-text-secondary system-sm-medium">
-          {uiMeta.autoSavedAt}
+        <div className="system-sm-medium text-text-secondary">
+          {hasPublishedVersion
+            ? `${t('common.publishedAt', { ns: 'workflow' })} ${formatTimeFromNow(publishedAt)}`
+            : draftUpdatedAt
+              ? `${t('common.autoSaved', { ns: 'workflow' })} · ${formatTimeFromNow(draftUpdatedAt)}`
+              : uiMeta.autoSavedAt}
         </div>
       </div>
       <Button
diff --git a/web/app/components/snippets/components/snippet-header/index.tsx b/web/app/components/snippets/components/snippet-header/index.tsx
index d19a8e6967..b7a0488f63 100644
--- a/web/app/components/snippets/components/snippet-header/index.tsx
+++ b/web/app/components/snippets/components/snippet-header/index.tsx
@@ -7,6 +7,7 @@ import {
   useMemo,
 } from 'react'
 import Header from '@/app/components/workflow/header'
+import { useStore } from '@/app/components/workflow/store'
 import InputFieldButton from './input-field-button'
 import Publisher from './publisher'
 import RunMode from './run-mode'
@@ -32,6 +33,8 @@ const SnippetHeader = ({
   onPublishMenuOpenChange,
   onPublish,
 }: SnippetHeaderProps) => {
+  const draftUpdatedAt = useStore(state => state.draftUpdatedAt)
+  const publishedAt = useStore(state => state.publishedAt)
   const viewHistoryProps = useMemo(() => {
     return {
       historyUrl: `/snippets/${snippetId}/workflow-runs`,
@@ -46,10 +49,12 @@ const SnippetHeader = ({
           middle: (
             <Publisher
               uiMeta={uiMeta}
+              draftUpdatedAt={draftUpdatedAt}
               open={isPublishMenuOpen}
               isPublishing={isPublishing}
               onOpenChange={onPublishMenuOpenChange}
               onPublish={onPublish}
+              publishedAt={publishedAt}
             />
           ),
         },
@@ -69,7 +74,7 @@ const SnippetHeader = ({
         viewHistoryProps,
       },
     }
-  }, [inputFieldCount, isPublishMenuOpen, isPublishing, onPublish, onPublishMenuOpenChange, onToggleInputPanel, uiMeta, viewHistoryProps])
+  }, [draftUpdatedAt, inputFieldCount, isPublishMenuOpen, isPublishing, onPublish, onPublishMenuOpenChange, onToggleInputPanel, publishedAt, uiMeta, viewHistoryProps])
 
   return <Header {...headerProps} />
 }
diff --git a/web/app/components/snippets/components/snippet-header/publisher.tsx b/web/app/components/snippets/components/snippet-header/publisher.tsx
index 25b79485c6..b79079fa7e 100644
--- a/web/app/components/snippets/components/snippet-header/publisher.tsx
+++ b/web/app/components/snippets/components/snippet-header/publisher.tsx
@@ -12,25 +12,29 @@ import PublishMenu from '../publish-menu'
 
 type PublisherProps = {
   uiMeta: SnippetDetailUIModel
+  draftUpdatedAt: number
   open: boolean
   isPublishing: boolean
   onOpenChange: (open: boolean) => void
   onPublish: () => void
+  publishedAt: number
 }
 
 const Publisher = ({
   uiMeta,
+  draftUpdatedAt,
   open,
   isPublishing,
   onOpenChange,
   onPublish,
+  publishedAt,
 }: PublisherProps) => {
   const { t } = useTranslation('snippet')
 
   return (
     <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]">
-        <span className="text-[13px] font-medium leading-4">{t('publishButton')}</span>
+        <span className="text-[13px] leading-4 font-medium">{t('publishButton')}</span>
         <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
@@ -39,6 +43,8 @@ const Publisher = ({
         popupClassName="w-80 !rounded-2xl !bg-components-panel-bg !p-0 !shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]"
       >
         <PublishMenu
+          draftUpdatedAt={draftUpdatedAt}
+          publishedAt={publishedAt}
           uiMeta={uiMeta}
           isPublishing={isPublishing}
           onPublish={onPublish}
diff --git a/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
index beb019b6a4..cdf0b982b1 100644
--- a/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
+++ b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
@@ -202,7 +202,7 @@ describe('useSnippetInit', () => {
       onSuccess?.({
         created_at: 1_712_345_678,
       })
-      return { data: undefined, isLoading: false }
+      return { data: { created_at: 1_712_345_678 }, isLoading: false }
     })
 
     renderHook(() => useSnippetInit('snippet-1'))
@@ -210,6 +210,17 @@ describe('useSnippetInit', () => {
     expect(mockSetPublishedAt).toHaveBeenCalledWith(1_712_345_678)
   })
 
+  it('should reset published metadata when the published workflow is unavailable', () => {
+    mockUseSnippetPublishedWorkflow.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockSetPublishedAt).toHaveBeenCalledWith(0)
+  })
+
   it('should stay loading while draft workflow is still fetching', () => {
     mockUseSnippetDraftWorkflow.mockReturnValue({
       data: undefined,
diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
index bacd5d21e9..22e0c4a30d 100644
--- a/web/app/components/snippets/hooks/use-snippet-init.ts
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import {
   useSnippetDefaultBlockConfigs,
@@ -54,10 +54,17 @@ export const useSnippetInit = (snippetId: string) => {
       nodesDefaultConfigs: normalizeNodesDefaultConfigs(nodesDefaultConfigs),
     })
   })
-  useSnippetPublishedWorkflow(snippetId, (publishedWorkflow) => {
+  const publishedWorkflowQuery = useSnippetPublishedWorkflow(snippetId, (publishedWorkflow) => {
     workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
   })
 
+  useEffect(() => {
+    if (publishedWorkflowQuery.isLoading)
+      return
+
+    workflowStore.getState().setPublishedAt(publishedWorkflowQuery.data?.created_at ?? 0)
+  }, [publishedWorkflowQuery.data?.created_at, publishedWorkflowQuery.isLoading, workflowStore])
+
   const mockData = useMemo(() => getSnippetDetailMock(snippetId), [snippetId])
   const shouldUseMockData = !snippetApiDetail.isLoading && !snippetApiDetail.data && !!mockData
 
diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
index 2fed4d6510..4141097bed 100644
--- a/web/service/use-snippet-workflows.ts
+++ b/web/service/use-snippet-workflows.ts
@@ -77,9 +77,17 @@ export const useSnippetPublishedWorkflow = (
   return useQuery({
     ...queryOptions,
     queryFn: async (context) => {
-      const publishedWorkflow = await queryOptions.queryFn(context)
-      onSuccess?.(publishedWorkflow)
-      return publishedWorkflow
+      try {
+        const publishedWorkflow = await queryOptions.queryFn(context)
+        onSuccess?.(publishedWorkflow)
+        return publishedWorkflow
+      }
+      catch (error) {
+        if (isNotFoundError(error))
+          return undefined
+
+        throw error
+      }
     },
   })
 }

From 5e7d9eff8487a057f1eb1b507ac4f10ae26b4529 Mon Sep 17 00:00:00 2001
From: FFXN <31929997+FFXN@users.noreply.github.com>
Date: Thu, 16 Apr 2026 11:25:23 +0800
Subject: [PATCH 099/108] feat: evaluation (#35290)

Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Yansong Zhang <916125788@qq.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: hj24 <mambahj24@gmail.com>
Co-authored-by: hj24 <huangjian@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 .../console/snippets/snippet_workflow.py      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/api/controllers/console/snippets/snippet_workflow.py b/api/controllers/console/snippets/snippet_workflow.py
index d4b3ec5e4e..661a207658 100644
--- a/api/controllers/console/snippets/snippet_workflow.py
+++ b/api/controllers/console/snippets/snippet_workflow.py
@@ -4,7 +4,7 @@ from functools import wraps
 from typing import ParamSpec, TypeVar
 
 from flask import request
-from flask_restx import Resource, marshal_with
+from flask_restx import Resource, fields, marshal_with
 from sqlalchemy.orm import Session
 from werkzeug.exceptions import InternalServerError, NotFound
 
@@ -63,6 +63,11 @@ register_schema_models(
 )
 
 
+snippet_workflow_model = console_ns.clone("SnippetWorkflow", workflow_model, {
+    "input_fields": fields.Raw(default=[]),
+})
+
+
 class SnippetNotFoundError(Exception):
     """Snippet not found error."""
 
@@ -100,14 +105,14 @@ def get_snippet(view_func: Callable[P, R]):
 @console_ns.route("/snippets/<uuid:snippet_id>/workflows/draft")
 class SnippetDraftWorkflowApi(Resource):
     @console_ns.doc("get_snippet_draft_workflow")
-    @console_ns.response(200, "Draft workflow retrieved successfully", workflow_model)
+    @console_ns.response(200, "Draft workflow retrieved successfully", snippet_workflow_model)
     @console_ns.response(404, "Snippet or draft workflow not found")
     @setup_required
     @login_required
     @account_initialization_required
     @get_snippet
     @edit_permission_required
-    @marshal_with(workflow_model)
+    @marshal_with(snippet_workflow_model)
     def get(self, snippet: CustomizedSnippet):
         """Get draft workflow for snippet."""
         snippet_service = SnippetService()
@@ -118,6 +123,7 @@ class SnippetDraftWorkflowApi(Resource):
 
         db.session.expunge(workflow)
         workflow.conversation_variables = []
+        workflow.input_fields = snippet.input_fields_list
         return workflow
 
     @console_ns.doc("sync_snippet_draft_workflow")
@@ -175,14 +181,14 @@ class SnippetDraftConfigApi(Resource):
 @console_ns.route("/snippets/<uuid:snippet_id>/workflows/publish")
 class SnippetPublishedWorkflowApi(Resource):
     @console_ns.doc("get_snippet_published_workflow")
-    @console_ns.response(200, "Published workflow retrieved successfully", workflow_model)
+    @console_ns.response(200, "Published workflow retrieved successfully", snippet_workflow_model)
     @console_ns.response(404, "Snippet not found")
     @setup_required
     @login_required
     @account_initialization_required
     @get_snippet
     @edit_permission_required
-    @marshal_with(workflow_model)
+    @marshal_with(snippet_workflow_model)
     def get(self, snippet: CustomizedSnippet):
         """Get published workflow for snippet."""
         if not snippet.is_published:
@@ -191,6 +197,9 @@ class SnippetPublishedWorkflowApi(Resource):
         snippet_service = SnippetService()
         workflow = snippet_service.get_published_workflow(snippet=snippet)
 
+        if workflow:
+            workflow.input_fields = snippet.input_fields_list
+
         return workflow
 
     @console_ns.doc("publish_snippet_workflow")

From 7aa700bf2b1e00b7313fbc5a2ddc09fb9138c022 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 16 Apr 2026 12:06:53 +0800
Subject: [PATCH 100/108] fix(web): fix merge

---
 .../app-sidebar/snippet-info/dropdown.tsx      |  7 ++++---
 .../app-sidebar/snippet-info/index.tsx         | 10 +++++-----
 ...aluation-workflow-switch-confirm-dialog.tsx | 10 +++++-----
 .../app/workflow-log/evaluation-cell.tsx       | 10 +++++-----
 web/app/components/apps/app-type-filter.tsx    |  2 +-
 web/app/components/apps/creators-filter.tsx    |  2 +-
 .../components/apps/studio-route-switch.tsx    |  4 ++--
 .../batch-test-panel/history-tab.tsx           | 18 +++++++++---------
 .../components/batch-test-panel/index.tsx      |  4 ++--
 .../input-fields/upload-run-popover.tsx        | 12 ++++++------
 .../add-condition-select.tsx                   |  8 ++++----
 .../conditions-section/condition-group.tsx     | 18 +++++++++---------
 .../custom-metric-editor/workflow-selector.tsx | 11 ++++++-----
 .../metric-section/builtin-metric-card.tsx     | 16 ++++++++--------
 .../metric-section/custom-metric-card.tsx      |  4 ++--
 .../components/metric-selector/index.tsx       |  4 ++--
 .../selector-metric-section.tsx                | 14 +++++++-------
 .../pipeline/pipeline-metric-item.tsx          |  4 ++--
 .../pipeline/pipeline-results-table.tsx        | 18 +++++++++---------
 .../evaluation/components/section-header.tsx   |  8 ++++----
 .../snippets/components/input-field-editor.tsx |  4 ++--
 .../components/snippet-header/run-mode.tsx     |  8 ++++----
 .../components/snippet-import-dsl-dialog.tsx   |  9 ++++-----
 .../workflow/block-selector/snippets/index.tsx |  2 +-
 .../snippets/snippet-list-item.tsx             |  6 +++---
 25 files changed, 107 insertions(+), 106 deletions(-)

diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
index 4022c6f3ec..1e1bddf615 100644
--- a/web/app/components/app-sidebar/snippet-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -2,6 +2,7 @@
 
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { SnippetDetail } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -24,7 +25,7 @@ import { toast } from '@/app/components/base/ui/toast'
 import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
 import { useRouter } from '@/next/navigation'
 import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
+
 import { downloadBlob } from '@/utils/download'
 
 type SnippetInfoDropdownProps = {
@@ -170,10 +171,10 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
       <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
         <AlertDialogContent className="w-[400px]">
           <div className="space-y-2 p-6">
-            <AlertDialogTitle className="text-text-primary title-lg-semi-bold">
+            <AlertDialogTitle className="title-lg-semi-bold text-text-primary">
               {t('deleteConfirmTitle')}
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-text-tertiary system-sm-regular">
+            <AlertDialogDescription className="system-sm-regular text-text-tertiary">
               {t('deleteConfirmContent')}
             </AlertDialogDescription>
           </div>
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
index e47f14fe9e..cc1f867026 100644
--- a/web/app/components/app-sidebar/snippet-info/index.tsx
+++ b/web/app/components/app-sidebar/snippet-info/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { SnippetDetail } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import { cn } from '@/utils/classnames'
 import SnippetInfoDropdown from './dropdown'
 
 type SnippetInfoProps = {
@@ -19,7 +19,7 @@ const SnippetInfo = ({
   const { t } = useTranslation('snippet')
 
   return (
-    <div className={cn('flex flex-col', expand ? 'px-2 pb-1 pt-2' : 'p-1')}>
+    <div className={cn('flex flex-col', expand ? 'px-2 pt-2 pb-1' : 'p-1')}>
       <div className={cn('flex flex-col', expand ? 'gap-2 rounded-xl p-2' : '')}>
         <div className={cn('flex', expand ? 'items-center justify-between' : 'items-start gap-3')}>
           <div className={cn('shrink-0', !expand && 'ml-1')}>
@@ -34,16 +34,16 @@ const SnippetInfo = ({
         </div>
         {expand && (
           <div className="min-w-0">
-            <div className="truncate text-text-secondary system-md-semibold">
+            <div className="system-md-semibold truncate text-text-secondary">
               {snippet.name}
             </div>
-            <div className="pt-1 text-text-tertiary system-2xs-medium-uppercase">
+            <div className="system-2xs-medium-uppercase pt-1 text-text-tertiary">
               {t('typeLabel')}
             </div>
           </div>
         )}
         {expand && snippet.description && (
-          <p className="line-clamp-3 break-words text-text-tertiary system-xs-regular">
+          <p className="system-xs-regular line-clamp-3 break-words text-text-tertiary">
             {snippet.description}
           </p>
         )}
diff --git a/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
index 3e4a9cb5c7..39aad51ffd 100644
--- a/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
+++ b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
@@ -2,6 +2,7 @@
 
 import type { EvaluationWorkflowAssociatedTarget, EvaluationWorkflowAssociatedTargetType } from '@/types/evaluation'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
@@ -13,7 +14,6 @@ import {
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 
 type EvaluationWorkflowSwitchConfirmDialogProps = {
   open: boolean
@@ -80,7 +80,7 @@ const DependentTargetItem = ({
         <span className={cn(meta.icon, 'size-5')} />
       </span>
       <span className="flex min-w-0 flex-1 flex-col gap-1 py-px">
-        <span className="truncate system-md-semibold text-text-secondary">
+        <span className="system-md-semibold truncate text-text-secondary">
           {targetName}
         </span>
         <span className="system-2xs-medium-uppercase text-text-tertiary">
@@ -108,10 +108,10 @@ const EvaluationWorkflowSwitchConfirmDialog = ({
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent className="w-[480px]">
         <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-          <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
+          <AlertDialogTitle className="title-2xl-semi-bold w-full text-text-primary">
             {t('common.switchToStandardWorkflowConfirm.title', { ns: 'workflow' })}
           </AlertDialogTitle>
-          <AlertDialogDescription className="w-full system-md-regular text-text-secondary">
+          <AlertDialogDescription className="system-md-regular w-full text-text-secondary">
             <span className="block">
               {t('common.switchToStandardWorkflowConfirm.activeIn', { ns: 'workflow', count: targets.length })}
             </span>
@@ -123,7 +123,7 @@ const EvaluationWorkflowSwitchConfirmDialog = ({
 
         <div className="flex flex-col gap-2 px-6 py-3">
           <div className="flex items-center gap-2">
-            <span className="shrink-0 system-xs-medium-uppercase text-text-quaternary">
+            <span className="system-xs-medium-uppercase shrink-0 text-text-quaternary">
               {t('common.switchToStandardWorkflowConfirm.dependentWorkflows', { ns: 'workflow' })}
             </span>
             <span className="h-px min-w-0 flex-1 bg-divider-subtle" />
diff --git a/web/app/components/app/workflow-log/evaluation-cell.tsx b/web/app/components/app/workflow-log/evaluation-cell.tsx
index 8cb3770681..3e49015454 100644
--- a/web/app/components/app/workflow-log/evaluation-cell.tsx
+++ b/web/app/components/app/workflow-log/evaluation-cell.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { EvaluationLogItem } from '@/models/log'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -9,7 +10,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
-import { cn } from '@/utils/classnames'
 
 type EvaluationCellProps = {
   evaluation: EvaluationLogItem[]
@@ -30,7 +30,7 @@ const EvaluationCell = ({
 
   if (!evaluation.length) {
     return (
-      <div className="flex items-center justify-center px-2 py-3 system-sm-regular text-text-quaternary">
+      <div className="system-sm-regular flex items-center justify-center px-2 py-3 text-text-quaternary">
         -
       </div>
     )
@@ -73,19 +73,19 @@ const EvaluationCell = ({
                 )}
               >
                 <div className="min-w-0">
-                  <div className="truncate system-sm-medium text-text-secondary">{item.name}</div>
+                  <div className="system-sm-medium truncate text-text-secondary">{item.name}</div>
                   {item.nodeInfo && nodeVisual && nodeToneClasses && (
                     <div className="mt-1 flex min-w-0 items-center gap-1.5">
                       <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                         <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                       </div>
-                      <span className="truncate system-xs-regular text-text-tertiary">
+                      <span className="system-xs-regular truncate text-text-tertiary">
                         {item.nodeInfo.title}
                       </span>
                     </div>
                   )}
                 </div>
-                <div className="max-w-[120px] text-right system-sm-regular wrap-break-word text-text-secondary">
+                <div className="system-sm-regular max-w-[120px] text-right wrap-break-word text-text-secondary">
                   {formatEvaluationValue(item.value)}
                 </div>
               </div>
diff --git a/web/app/components/apps/app-type-filter.tsx b/web/app/components/apps/app-type-filter.tsx
index a7979daade..a1401100ae 100644
--- a/web/app/components/apps/app-type-filter.tsx
+++ b/web/app/components/apps/app-type-filter.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { AppListCategory } from './app-type-filter-shared'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -12,7 +13,6 @@ import {
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { isAppListCategory } from './app-type-filter-shared'
 
 const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
index 4bcff660e5..9a00ccab6f 100644
--- a/web/app/components/apps/creators-filter.tsx
+++ b/web/app/components/apps/creators-filter.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
@@ -12,7 +13,6 @@ import {
 } from '@/app/components/base/ui/dropdown-menu'
 import { useAppContext } from '@/context/app-context'
 import { useMembers } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 
 type CreatorsFilterProps = {
   value: string[]
diff --git a/web/app/components/apps/studio-route-switch.tsx b/web/app/components/apps/studio-route-switch.tsx
index 53f1337d06..18235f9b74 100644
--- a/web/app/components/apps/studio-route-switch.tsx
+++ b/web/app/components/apps/studio-route-switch.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import type { StudioPageType } from '.'
+import { cn } from '@langgenius/dify-ui/cn'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   pageType: StudioPageType
@@ -18,7 +18,7 @@ const StudioRouteSwitch = ({
   showSnippets = true,
 }: Props) => {
   return (
-    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-[1px]">
+    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-px">
       <Link
         href="/apps"
         className={cn(
diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
index d8735065e2..4da6f6fe48 100644
--- a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -1,5 +1,6 @@
 import type { EvaluationResourceProps } from '../../types'
 import type { EvaluationLog, EvaluationLogFile } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import {
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
 import { consoleClient, consoleQuery } from '@/service/client'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 
@@ -92,15 +92,15 @@ const HistoryTab = ({
           </colgroup>
           <thead>
             <tr className="border-b border-divider-regular">
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">
                 <span className="inline-flex items-center gap-0.5">
                   {t('history.columns.time')}
                   <span aria-hidden="true" className="i-ri-arrow-down-line h-3.5 w-3.5" />
                 </span>
               </th>
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.creator')}</th>
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.version')}</th>
-              <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('history.columns.status')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.creator')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.version')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.status')}</th>
               <th className="h-7 text-center text-text-tertiary">
                 <span aria-hidden="true" className="i-ri-download-2-line inline-block h-3.5 w-3.5" />
               </th>
@@ -128,9 +128,9 @@ const HistoryTab = ({
                     setSelectedRunId(resourceType, resourceId, runId)
                 }}
               >
-                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{formatCreatedAt(record.created_at)}</td>
-                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.created_by}</td>
-                <td className="h-10 truncate px-3 system-sm-regular text-text-secondary">{record.version || '-'}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{formatCreatedAt(record.created_at)}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.created_by}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.version || '-'}</td>
                 <td className="h-10 px-3 text-center">
                   {record.result_file
                     ? <span aria-label={t('history.status.completed')} className="i-ri-checkbox-circle-fill inline-block h-4 w-4 text-util-colors-green-green-600" />
@@ -181,7 +181,7 @@ const HistoryTab = ({
           </tbody>
         </table>
         {!isInitialLoading && records.length === 0 && (
-          <div className="rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center system-sm-regular text-text-tertiary">
+          <div className="system-sm-regular rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary">
             {t('history.empty')}
           </div>
         )}
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 895eeb3f59..99ee09af11 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { BatchTestTab, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
-import { cn } from '@/utils/classnames'
 import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
 import { buildEvaluationConfigPayload } from '../../store-utils'
 import { TAB_CLASS_NAME } from '../../utils'
@@ -65,7 +65,7 @@ const BatchTestPanel = ({
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
             <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
-            <div className="mt-1 system-sm-regular text-text-tertiary">{t('batch.description')}</div>
+            <div className="system-sm-regular mt-1 text-text-tertiary">{t('batch.description')}</div>
           </div>
           <Button
             className="shrink-0"
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
index 0be65bd654..e19209ffb5 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -1,5 +1,6 @@
 import type { ChangeEvent, DragEvent } from 'react'
 import type { InputField } from './input-fields-utils'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
@@ -8,7 +9,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
-import { cn } from '@/utils/classnames'
 import { getExampleValue } from './input-fields-utils'
 
 type UploadRunPopoverProps = {
@@ -92,10 +92,10 @@ const UploadRunPopover = ({
                       <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
                     </div>
                     <div className="min-w-0 flex-1 py-1 pr-2">
-                      <div className="truncate system-xs-medium text-text-secondary">
+                      <div className="system-xs-medium truncate text-text-secondary">
                         {currentFileName}
                       </div>
-                      <div className="mt-0.5 flex h-3 items-center gap-1 system-2xs-medium text-text-tertiary">
+                      <div className="system-2xs-medium mt-0.5 flex h-3 items-center gap-1 text-text-tertiary">
                         {!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
                         {!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
                         {!!currentFileSize && <span>{currentFileSize}</span>}
@@ -138,7 +138,7 @@ const UploadRunPopover = ({
                         {' '}
                         {t('batch.uploadDropzoneSuffix')}
                       </div>
-                      <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                      <div className="system-xs-regular mt-0.5 text-text-tertiary">
                         {t('batch.uploadDropzoneDownloadPrefix')}
                         {' '}
                         <button
@@ -159,10 +159,10 @@ const UploadRunPopover = ({
                 <div className="flex overflow-hidden rounded-lg border border-divider-regular">
                   {previewFields.map((field, index) => (
                     <div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
-                      <div className="min-h-8 border-b border-divider-regular px-3 py-2 system-xs-medium-uppercase text-text-tertiary">
+                      <div className="system-xs-medium-uppercase min-h-8 border-b border-divider-regular px-3 py-2 text-text-tertiary">
                         {field.name}
                       </div>
-                      <div className="min-h-8 px-3 py-2 system-sm-regular text-text-secondary">
+                      <div className="system-sm-regular min-h-8 px-3 py-2 text-text-secondary">
                         {getExampleValue(field, booleanExampleValue)}
                       </div>
                     </div>
diff --git a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
index 9e370e565a..cbe44c05b2 100644
--- a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
+++ b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -11,7 +12,6 @@ import {
   SelectItem,
   SelectTrigger,
 } from '@/app/components/base/ui/select'
-import { cn } from '@/utils/classnames'
 import { useEvaluationStore } from '../../store'
 import { getConditionMetricValueTypeTranslationKey } from '../../utils'
 
@@ -46,7 +46,7 @@ const AddConditionSelect = ({
       <SelectContent placement="bottom-start" popupClassName="w-[320px]">
         {metricOptionGroups.map(group => (
           <SelectGroup key={group.label}>
-            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
+            <SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
             {group.options.map(option => (
               <SelectItem
                 key={option.id}
@@ -58,8 +58,8 @@ const AddConditionSelect = ({
                 }}
               >
                 <div className="flex min-w-0 flex-1 items-center gap-3">
-                  <span className="truncate system-sm-medium text-text-secondary">{option.itemLabel}</span>
-                  <span className="ml-auto shrink-0 system-xs-medium text-text-tertiary">
+                  <span className="system-sm-medium truncate text-text-secondary">{option.itemLabel}</span>
+                  <span className="system-xs-medium ml-auto shrink-0 text-text-tertiary">
                     {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
                   </span>
                 </div>
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 1f2ac8de43..c37fb615dc 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -6,10 +6,11 @@ import type {
   EvaluationResourceProps,
   JudgmentConditionItem,
 } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Select,
   SelectContent,
@@ -19,7 +20,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/app/components/base/ui/select'
-import { cn } from '@/utils/classnames'
 import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
 import {
   buildConditionMetricOptions,
@@ -71,15 +71,15 @@ const ConditionMetricLabel = ({
   placeholder,
 }: ConditionMetricLabelProps) => {
   if (!metric)
-    return <span className="px-1 system-sm-regular text-components-input-text-placeholder">{placeholder}</span>
+    return <span className="system-sm-regular px-1 text-components-input-text-placeholder">{placeholder}</span>
 
   return (
     <div className="flex min-w-0 items-center gap-2 px-1">
       <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
         <span className={cn(getMetricValueTypeIconClassName(metric.valueType), 'h-3 w-3 shrink-0 text-text-secondary')} />
-        <span className="truncate system-xs-medium text-text-secondary">{metric.itemLabel}</span>
+        <span className="system-xs-medium truncate text-text-secondary">{metric.itemLabel}</span>
       </div>
-      <span className="shrink-0 system-xs-regular text-text-tertiary">{metric.groupLabel}</span>
+      <span className="system-xs-regular shrink-0 text-text-tertiary">{metric.groupLabel}</span>
     </div>
   )
 }
@@ -110,13 +110,13 @@ const ConditionMetricSelect = ({
       <SelectContent popupClassName="w-[360px]">
         {groupedMetricOptions.map(group => (
           <SelectGroup key={group.label}>
-            <SelectGroupLabel className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{group.label}</SelectGroupLabel>
+            <SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
             {group.options.map(option => (
               <SelectItem key={option.id} value={serializeVariableSelector(option.variableSelector)}>
                 <div className="flex min-w-0 flex-1 items-center gap-2">
                   <span className={cn(getMetricValueTypeIconClassName(option.valueType), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
                   <span className="truncate">{option.itemLabel}</span>
-                  <span className="ml-auto shrink-0 system-xs-medium text-text-quaternary">
+                  <span className="system-xs-medium ml-auto shrink-0 text-text-quaternary">
                     {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
                   </span>
                 </div>
@@ -139,7 +139,7 @@ const ConditionOperatorSelect = ({
   return (
     <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
       <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
-        <span className="truncate system-xs-medium text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
+        <span className="system-xs-medium truncate text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
       </SelectTrigger>
       <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
         {operators.map(nextOperator => (
@@ -232,7 +232,7 @@ const ConditionGroup = ({
                 key={operator}
                 type="button"
                 className={cn(
-                  'rounded-md px-3 py-1.5 system-xs-medium-uppercase',
+                  'system-xs-medium-uppercase rounded-md px-3 py-1.5',
                   resource.judgmentConfig.logicalOperator === operator
                     ? 'bg-components-card-bg text-text-primary shadow-xs'
                     : 'text-text-tertiary',
diff --git a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
index b9e6b7dd9e..c85c192aff 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useInfiniteScroll } from 'ahooks'
 import * as React from 'react'
 import { useDeferredValue, useMemo, useRef, useState } from 'react'
@@ -20,7 +21,6 @@ import {
   ScrollAreaViewport,
 } from '@/app/components/base/ui/scroll-area'
 import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
-import { cn } from '@/utils/classnames'
 
 type WorkflowSelectorProps = {
   value: string | null
@@ -119,9 +119,10 @@ const WorkflowSelector = ({
               </div>
               <div className="min-w-0 flex-1 px-1 py-1 text-left">
                 <div className={cn(
-                  'truncate system-sm-regular',
+                  'system-sm-regular truncate',
                   currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
-                )}>
+                )}
+                >
                   {currentWorkflowName ?? t('metrics.custom.workflowPlaceholder')}
                 </div>
               </div>
@@ -157,7 +158,7 @@ const WorkflowSelector = ({
               )
             : !workflows.length
                 ? (
-                    <div className="flex h-[120px] items-center justify-center text-text-tertiary system-sm-regular">
+                    <div className="system-sm-regular flex h-[120px] items-center justify-center text-text-tertiary">
                       {t('noData', { ns: 'common' })}
                     </div>
                   )
@@ -183,7 +184,7 @@ const WorkflowSelector = ({
                                   <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
                                 </div>
                               </div>
-                              <div className="min-w-0 flex-1 truncate px-1 py-1 text-text-secondary system-sm-medium">
+                              <div className="system-sm-medium min-w-0 flex-1 truncate px-1 py-1 text-text-secondary">
                                 {getWorkflowName(workflow)}
                               </div>
                               {workflow.id === value && (
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
index 3fa84c946a..f8103aa2cc 100644
--- a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -2,6 +2,7 @@
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import type { NodeInfo } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
@@ -11,7 +12,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
-import { cn } from '@/utils/classnames'
 import { useEvaluationStore } from '../../store'
 import { dedupeNodeInfoList, getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
 
@@ -41,7 +41,7 @@ const BuiltinMetricCard = ({
 
   return (
     <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
-      <div className="flex items-center justify-between gap-3 px-3 pb-1 pt-3">
+      <div className="flex items-center justify-between gap-3 px-3 pt-3 pb-1">
         <button
           type="button"
           className="flex min-w-0 flex-1 items-center gap-2 px-1 text-left"
@@ -53,7 +53,7 @@ const BuiltinMetricCard = ({
             <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
           </div>
           <div className="flex min-w-0 items-center gap-0.5">
-            <div className="truncate text-text-secondary system-md-medium">{metric.label}</div>
+            <div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
             <span
               aria-hidden="true"
               className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
@@ -65,7 +65,7 @@ const BuiltinMetricCard = ({
           size="small"
           variant="ghost"
           aria-label={t('metrics.remove')}
-          className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity hover:text-text-secondary focus-visible:opacity-100 group-hover:opacity-100"
+          className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary focus-visible:opacity-100"
           onClick={() => removeMetric(resourceType, resourceId, metric.id)}
         >
           <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
@@ -73,7 +73,7 @@ const BuiltinMetricCard = ({
       </div>
 
       {isExpanded && (
-        <div className="flex flex-wrap gap-1 px-3 pb-3 pt-1">
+        <div className="flex flex-wrap gap-1 px-3 pt-1 pb-3">
           {selectedNodeInfoList.length
             ? selectedNodeInfoList.map((nodeInfo) => {
                 const nodeVisual = getNodeVisual(nodeInfo)
@@ -87,7 +87,7 @@ const BuiltinMetricCard = ({
                     <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                       <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                     </div>
-                    <span className="px-1 text-text-primary system-xs-regular">{nodeInfo.title}</span>
+                    <span className="system-xs-regular px-1 text-text-primary">{nodeInfo.title}</span>
                     <button
                       type="button"
                       className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
@@ -105,7 +105,7 @@ const BuiltinMetricCard = ({
                 )
               })
             : (
-                <span className="px-1 text-text-tertiary system-xs-regular">{t('metrics.nodesAll')}</span>
+                <span className="system-xs-regular px-1 text-text-tertiary">{t('metrics.nodesAll')}</span>
               )}
 
           {shouldShowAddNode && (
@@ -144,7 +144,7 @@ const BuiltinMetricCard = ({
                         <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                           <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                         </div>
-                        <span className="truncate text-text-secondary system-sm-medium">{nodeInfo.title}</span>
+                        <span className="system-sm-medium truncate text-text-secondary">{nodeInfo.title}</span>
                       </div>
                     </DropdownMenuItem>
                   )
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
index 3e06b0a637..d0c04bac04 100644
--- a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
 import CustomMetricEditorCard from '../custom-metric-editor'
 import { getToneClasses } from '../metric-selector/utils'
@@ -30,7 +30,7 @@ const CustomMetricCard = ({
           <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
             <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5" />
           </div>
-          <div className="truncate system-md-medium text-text-secondary">{metric.label}</div>
+          <div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
         </div>
 
         <div className="flex shrink-0 items-center gap-1">
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
index 2b690ee94c..0f91271a9f 100644
--- a/web/app/components/evaluation/components/metric-selector/index.tsx
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -2,6 +2,7 @@
 
 import type { ChangeEvent } from 'react'
 import type { MetricSelectorProps } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
@@ -11,7 +12,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
-import { cn } from '@/utils/classnames'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 import SelectorEmptyState from './selector-empty-state'
 import SelectorFooter from './selector-footer'
@@ -68,7 +68,7 @@ const MetricSelector = ({
         render={(
           triggerStyle === 'text'
             ? (
-                <button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
+                <button type="button" className={cn('system-sm-medium inline-flex items-center text-text-accent', triggerClassName)}>
                   <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('metrics.add')}
                 </button>
diff --git a/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
index 1eecc3662a..9b4a0826a7 100644
--- a/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
+++ b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
@@ -1,7 +1,7 @@
 import type { TFunction } from 'i18next'
 import type { EvaluationMetric } from '../../types'
 import type { MetricSelectorSection } from './types'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { getMetricVisual, getNodeVisual, getToneClasses } from './utils'
 
 type SelectorMetricSectionProps = {
@@ -46,7 +46,7 @@ const SelectorMetricSection = ({
         </div>
       )}
 
-      <div className="flex items-center justify-between px-4 pb-1 pt-3">
+      <div className="flex items-center justify-between px-4 pt-3 pb-1">
         <button
           type="button"
           className="flex min-w-0 items-center gap-2"
@@ -56,7 +56,7 @@ const SelectorMetricSection = ({
             <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
           </div>
           <div className="flex items-center gap-1">
-            <span className="truncate text-text-secondary system-xs-medium-uppercase">{metric.label}</span>
+            <span className="system-xs-medium-uppercase truncate text-text-secondary">{metric.label}</span>
             <span
               aria-hidden="true"
               className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
@@ -72,7 +72,7 @@ const SelectorMetricSection = ({
       {isExpanded && (
         <div className="px-1 py-1">
           {hasNoNodeInfo && (
-            <div className="px-3 pb-2 pt-0.5 text-text-tertiary system-sm-regular">
+            <div className="system-sm-regular px-3 pt-0.5 pb-2 text-text-tertiary">
               {t('metrics.noNodesInWorkflow')}
             </div>
           )}
@@ -100,12 +100,12 @@ const SelectorMetricSection = ({
                   <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                     <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                   </div>
-                  <span className="truncate text-[13px] font-medium leading-4 text-text-secondary">
+                  <span className="truncate text-[13px] leading-4 font-medium text-text-secondary">
                     {nodeInfo.title}
                   </span>
                 </div>
                 {isAdded && (
-                  <span className="shrink-0 px-1 text-text-quaternary system-xs-regular">{t('metrics.added')}</span>
+                  <span className="system-xs-regular shrink-0 px-1 text-text-quaternary">{t('metrics.added')}</span>
                 )}
               </button>
             )
@@ -120,7 +120,7 @@ const SelectorMetricSection = ({
                 <div className="flex items-center px-1 text-text-tertiary">
                   <span aria-hidden="true" className={cn(isShowingAllNodes ? 'i-ri-subtract-line' : 'i-ri-more-line', 'h-4 w-4')} />
                 </div>
-                <span className="truncate text-text-tertiary system-xs-regular">
+                <span className="system-xs-regular truncate text-text-tertiary">
                   {isShowingAllNodes ? t('metrics.showLess') : t('metrics.showMore')}
                 </span>
               </div>
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
index 314d3cfae8..1e9f9cc4c1 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { MetricOption } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
 import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
 
@@ -37,7 +37,7 @@ const PipelineMetricItem = ({
         onClick={onToggle}
       >
         <Checkbox checked={selected} />
-        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
+        <span className="system-sm-medium truncate text-text-secondary">{metric.label}</span>
         <Tooltip>
           <TooltipTrigger
             render={(
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
index df6c0107c7..15e21f1315 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
@@ -1,7 +1,7 @@
 import type { MetricColumn } from './pipeline-results-utils'
 import type { EvaluationRunItem } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import {
   formatValue,
   getIsItemPassed,
@@ -38,14 +38,14 @@ const PipelineResultsTable = ({
         <thead>
           <tr className="bg-background-section">
             <th className="h-7 rounded-l-lg" />
-            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.query')}</th>
-            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.expected')}</th>
-            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.actual')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.query')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.expected')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.actual')}</th>
             {metricColumns.map((column, index) => (
               <th
                 key={column.id}
                 className={cn(
-                  'h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary',
+                  'system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary',
                   index === metricColumns.length - 1 && 'rounded-r-lg',
                 )}
               >
@@ -79,14 +79,14 @@ const PipelineResultsTable = ({
                     )}
                   />
                 </td>
-                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
+                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
                   <div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
                 </td>
-                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
+                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
                   <div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
                 </td>
                 <td className={cn(
-                  'h-10 px-3 py-3 align-top system-sm-regular',
+                  'system-sm-regular h-10 px-3 py-3 align-top',
                   actualOutput ? 'text-text-secondary' : 'text-text-destructive',
                 )}
                 >
@@ -100,7 +100,7 @@ const PipelineResultsTable = ({
                   return (
                     <td
                       key={column.id}
-                      className={cn('h-10 px-3 py-3 align-top system-sm-regular', getMetricTextClassName(metricValue, column))}
+                      className={cn('system-sm-regular h-10 px-3 py-3 align-top', getMetricTextClassName(metricValue, column))}
                     >
                       {formatValue(metricValue)}
                     </td>
diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
index b2bb630ebe..6ddc155201 100644
--- a/web/app/components/evaluation/components/section-header.tsx
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 
 type SectionHeaderProps = {
   title: string
@@ -31,8 +31,8 @@ const SectionHeader = ({
   return (
     <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
       <div>
-        <div className={cn('text-text-primary system-xl-semibold', titleClassName)}>{title}</div>
-        {description && <div className={cn('mt-1 text-text-tertiary system-sm-regular', descriptionClassName)}>{description}</div>}
+        <div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div>
+        {description && <div className={cn('system-sm-regular mt-1 text-text-tertiary', descriptionClassName)}>{description}</div>}
       </div>
       {action}
     </div>
@@ -48,7 +48,7 @@ export const InlineSectionHeader = ({
   return (
     <div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
       <div className="flex min-h-6 items-center gap-1">
-        <div className="text-text-primary system-md-semibold">{title}</div>
+        <div className="system-md-semibold text-text-primary">{title}</div>
         {tooltip && (
           <Tooltip>
             <TooltipTrigger
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
index 82ae65d67b..a50f7bd0a4 100644
--- a/web/app/components/snippets/components/input-field-editor.tsx
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -2,11 +2,11 @@
 
 import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
 import type { SnippetInputField } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
 import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
-import { cn } from '@/utils/classnames'
 import InputFieldForm from './input-field-form'
 
 type SnippetInputFieldEditorProps = {
@@ -42,7 +42,7 @@ const SnippetInputFieldEditor = ({
         width: `min(${floatingRightWidth}px, calc(100vw - 24px))`,
       }}
     >
-      <div className="flex items-center pt-3.5 pr-11 pb-1 pl-4 system-xl-semibold text-text-primary">
+      <div className="system-xl-semibold flex items-center pt-3.5 pr-11 pb-1 pl-4 text-text-primary">
         {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
       </div>
       <button
diff --git a/web/app/components/snippets/components/snippet-header/run-mode.tsx b/web/app/components/snippets/components/snippet-header/run-mode.tsx
index 1ed61b39ea..c8a9705360 100644
--- a/web/app/components/snippets/components/snippet-header/run-mode.tsx
+++ b/web/app/components/snippets/components/snippet-header/run-mode.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { cn } from '@/utils/classnames'
 
 type RunModeProps = {
   text?: string
@@ -40,7 +40,7 @@ const RunMode = ({
       <button
         type="button"
         className={cn(
-          'flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text system-xs-medium hover:bg-state-accent-hover',
+          'system-xs-medium flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text hover:bg-state-accent-hover',
           isRunning && 'cursor-not-allowed rounded-l-md bg-state-accent-hover',
         )}
         onClick={handleWorkflowStartRunInWorkflow}
@@ -49,13 +49,13 @@ const RunMode = ({
         {isRunning
           ? (
               <>
-                <span aria-hidden className="i-ri-loader-2-line mr-1 size-4 animate-spin" />
+                <span aria-hidden className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
                 {t('common.running', { ns: 'workflow' })}
               </>
             )
           : (
               <>
-                <span aria-hidden className="i-ri-play-large-line mr-1 size-4" />
+                <span aria-hidden className="mr-1 i-ri-play-large-line size-4" />
                 {text ?? t('common.run', { ns: 'workflow' })}
                 <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
               </>
diff --git a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
index 832372315e..f3d9bf05e1 100644
--- a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
+++ b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
@@ -1,5 +1,5 @@
 'use client'
-
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +16,6 @@ import {
   useConfirmSnippetImportMutation,
   useImportSnippetDSLMutation,
 } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
 import ShortcutsName from '../../workflow/shortcuts-name'
 
 type SnippetImportDSLDialogProps = {
@@ -170,7 +169,7 @@ const SnippetImportDSLDialog = ({
             <DialogCloseButton className="top-6 right-5 h-8 w-8" />
           </div>
 
-          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
+          <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
             {[
               { key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
               { key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
@@ -202,7 +201,7 @@ const SnippetImportDSLDialog = ({
             )}
             {currentTab === SnippetImportDSLTab.FromURL && (
               <div>
-                <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
+                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -235,7 +234,7 @@ const SnippetImportDSLDialog = ({
             <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
             </DialogTitle>
-            <div className="flex grow flex-col system-md-regular text-text-secondary">
+            <div className="system-md-regular flex grow flex-col text-text-secondary">
               <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
               <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
               <br />
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
index b936ee7257..7c50644545 100644
--- a/web/app/components/workflow/block-selector/snippets/index.tsx
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useInfiniteScroll } from 'ahooks'
 import {
   memo,
@@ -20,7 +21,6 @@ import {
   TooltipTrigger,
 } from '@/app/components/base/ui/tooltip'
 import { useInfiniteSnippetList } from '@/service/use-snippets'
-import { cn } from '@/utils/classnames'
 import CreateSnippetDialog from '../../create-snippet-dialog'
 import SnippetDetailCard from './snippet-detail-card'
 import SnippetEmptyState from './snippet-empty-state'
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
index 0681fde8c7..fa4cd13b3b 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
@@ -3,8 +3,8 @@ import type {
   Ref,
 } from 'react'
 import type { PublishedSnippetListItem } from './snippet-detail-card'
+import { cn } from '@langgenius/dify-ui/cn'
 import AppIcon from '@/app/components/base/app-icon'
-import { cn } from '@/utils/classnames'
 
 type SnippetListItemProps = {
   isHovered: boolean
@@ -36,11 +36,11 @@ const SnippetListItem = ({
         background={snippet.icon_info.icon_background}
         imageUrl={snippet.icon_info.icon_url}
       />
-      <div className="min-w-0 text-text-secondary system-sm-medium">
+      <div className="system-sm-medium min-w-0 text-text-secondary">
         {snippet.name}
       </div>
       {isHovered && snippet.author && (
-        <div className="ml-auto text-text-tertiary system-xs-regular">
+        <div className="system-xs-regular ml-auto text-text-tertiary">
           {snippet.author}
         </div>
       )}

From d776fc08273d97971f6def1e61ab9913eb6ba371 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 16 Apr 2026 12:18:48 +0800
Subject: [PATCH 101/108] fix(web): icon missing

---
 packages/iconify-collections/custom-public/icons.json | 10 +++++++++-
 packages/iconify-collections/custom-public/info.json  |  2 +-
 packages/iconify-collections/custom-vender/icons.json |  7 ++++++-
 packages/iconify-collections/custom-vender/info.json  |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/iconify-collections/custom-public/icons.json b/packages/iconify-collections/custom-public/icons.json
index 347b6145e2..7c7d110be8 100644
--- a/packages/iconify-collections/custom-public/icons.json
+++ b/packages/iconify-collections/custom-public/icons.json
@@ -1,6 +1,6 @@
 {
   "prefix": "custom-public",
-  "lastModified": 1775115796,
+  "lastModified": 1776313052,
   "icons": {
     "avatar-user": {
       "body": "<g fill=\"none\"><g clip-path=\"url(#svgID0)\"><rect width=\"512\" height=\"512\" fill=\"currentColor\" rx=\"256\"/></g><defs><clipPath id=\"svgID0\"><rect width=\"512\" height=\"512\" fill=\"#fff\" rx=\"256\"/></clipPath></defs></g>",
@@ -65,6 +65,9 @@
       "width": 50,
       "height": 26
     },
+    "common-enter-key": {
+      "body": ""
+    },
     "common-gdpr": {
       "body": "<g fill=\"currentColor\"><path d=\"M11.037.899v26.174c1.629-.702 10.195-4.606 10.195-10.194V4.887zm0 0v26.174C9.408 26.371.843 22.467.843 16.88V4.887z\"/><path d=\"m11.037 4.634l.31.927h.954l-.758.561l.28.9l-.786-.563l-.758.562l.28-.899l-.757-.561h.954zm3.286.899l.309.898h.955l-.787.562l.31.927l-.787-.562l-.758.562l.28-.927l-.786-.562h.983zm2.724 2.387l.281.898h.955l-.758.562l.28.927l-.758-.562l-.786.562l.309-.927l-.787-.562h.955zm-6.01 11.851l.31.927h.954l-.758.562l.28.898l-.786-.561l-.758.561l.28-.898l-.757-.562h.954zm3.286-.786l.309.899h.955l-.787.561l.31.927l-.787-.561l-.758.561l.28-.927l-.786-.561h.983zm2.724-1.966l.281.927h.955l-.758.561l.28.9l-.758-.562l-.786.561l.309-.898l-.787-.562h.955zM7.78 5.533l-.31.898h-.954l.786.562l-.309.927l.786-.562l.759.562l-.281-.927l.758-.562H8.06zM5.055 7.92l-.28.898H3.82l.758.562l-.281.927l.758-.562l.787.562l-.31-.927l.787-.562h-.955zM7.78 18.985l-.31.899h-.954l.786.561l-.309.927l.786-.561l.759.561l-.281-.927l.758-.561H8.06zm-2.725-1.966l-.28.927H3.82l.758.561l-.281.9l.758-.562l.787.561l-.31-.898l.787-.562h-.955z\"/></g>",
       "width": 23,
@@ -407,6 +410,11 @@
     "model-checked": {
       "body": "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.333 4L6 11.333L2.667 8\"/>"
     },
+    "other-comment": {
+      "body": "<path fill=\"currentColor\" d=\"M12.333 4a2.667 2.667 0 0 0-2.666-2.667H4.333A2.667 2.667 0 0 0 1.667 4v6.667h8A2.667 2.667 0 0 0 12.333 8zM7.667 6.667V8H4.333V6.667zm2-2.667v1.333H4.333V4zm4 4a4 4 0 0 1-4 4H.333V4a4 4 0 0 1 4-4h5.334a4 4 0 0 1 4 4z\"/>",
+      "width": 14,
+      "height": 12
+    },
     "other-default-tool-icon": {
       "body": "<g fill=\"none\" opacity=\".5\"><rect width=\"24\" height=\"24\" fill=\"currentColor\" rx=\"6\"/><rect width=\"23.5\" height=\"23.5\" x=\".25\" y=\".25\" stroke=\"currentColor\" stroke-opacity=\".05\" stroke-width=\".5\" rx=\"5.75\"/><path fill=\"currentColor\" d=\"M11.888 5.306a.4.4 0 0 0 .167-.168l.359-.717a.375.375 0 0 1 .67 0l.36.717a.37.37 0 0 0 .167.168l.717.359a.375.375 0 0 1 0 .67l-.717.36a.37.37 0 0 0-.168.167l-.358.717a.375.375 0 0 1-.671 0l-.359-.717a.4.4 0 0 0-.167-.168l-.718-.359a.375.375 0 0 1 0-.67zm-4 1.25a.4.4 0 0 0 .167-.168l.234-.467a.375.375 0 0 1 .67 0l.234.467a.4.4 0 0 0 .168.168l.468.234a.375.375 0 0 1 0 .67l-.468.234a.4.4 0 0 0-.168.168l-.233.467a.375.375 0 0 1-.671 0l-.234-.467a.4.4 0 0 0-.167-.168L7.42 7.46a.375.375 0 0 1 0-.67z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M17.942 5.91a.56.56 0 0 1 .148.782L16.006 9.75h1.431c.311 0 .563.252.563.563v7.874c0 .725-.588 1.313-1.312 1.313H7.313A1.313 1.313 0 0 1 6 18.188v-7.875c0-.311.252-.563.563-.563h8.082l2.515-3.692a.563.563 0 0 1 .782-.148m-7.63 6.84a.562.562 0 1 0 0 1.125h3.376a.563.563 0 0 0 0-1.125z\" clip-rule=\"evenodd\"/></g>"
     },
diff --git a/packages/iconify-collections/custom-public/info.json b/packages/iconify-collections/custom-public/info.json
index 8b5572de6f..115e9e25f9 100644
--- a/packages/iconify-collections/custom-public/info.json
+++ b/packages/iconify-collections/custom-public/info.json
@@ -1,7 +1,7 @@
 {
   "prefix": "custom-public",
   "name": "Dify Custom Public",
-  "total": 142,
+  "total": 144,
   "version": "0.0.0-private",
   "author": {
     "name": "LangGenius, Inc.",
diff --git a/packages/iconify-collections/custom-vender/icons.json b/packages/iconify-collections/custom-vender/icons.json
index a7dc8e75e0..d588db650e 100644
--- a/packages/iconify-collections/custom-vender/icons.json
+++ b/packages/iconify-collections/custom-vender/icons.json
@@ -1,6 +1,6 @@
 {
   "prefix": "custom-vender",
-  "lastModified": 1775115796,
+  "lastModified": 1776313052,
   "icons": {
     "features-citations": {
       "body": "<path fill=\"currentColor\" d=\"M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m6-.03v2.988h4.036v-3.724H8.813a2.5 2.5 0 0 1 .212-1.204q.495-1.104 1.94-1.557V7q-1.94.383-2.96 1.614Q7 9.847 7 11.97m8.04-1.911q.495-1.148 1.925-1.586V7q-1.884.382-2.931 1.6Q13 9.818 13 11.97v2.988h4.036v-3.724h-2.224q-.056-.567.227-1.175\"/>"
@@ -1025,6 +1025,11 @@
     "workflow-if-else": {
       "body": ""
     },
+    "workflow-input-field": {
+      "body": "<path fill=\"currentColor\" d=\"M5.333 3.333h2v9.334h-2V14h5.333v-1.333h-2V3.333h2V2H5.333zm-4 1.334a.667.667 0 0 0-.666.666v5.334c0 .368.298.666.666.666h4V10H2V6h3.333V4.667zM10.667 6H14v4h-3.334v1.333h4a.667.667 0 0 0 .667-.666V5.333a.667.667 0 0 0-.667-.666h-4z\"/>",
+      "width": 16,
+      "height": 16
+    },
     "workflow-iteration": {
       "body": ""
     },
diff --git a/packages/iconify-collections/custom-vender/info.json b/packages/iconify-collections/custom-vender/info.json
index 0a84c45bbd..ea5f666503 100644
--- a/packages/iconify-collections/custom-vender/info.json
+++ b/packages/iconify-collections/custom-vender/info.json
@@ -1,7 +1,7 @@
 {
   "prefix": "custom-vender",
   "name": "Dify Custom Vender",
-  "total": 277,
+  "total": 278,
   "version": "0.0.0-private",
   "author": {
     "name": "LangGenius, Inc.",

From 129f681c59f7c7d410a2beda9a26c007a98ca940 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 16 Apr 2026 12:29:07 +0800
Subject: [PATCH 102/108] fix(web): slient snippet draft fetching

---
 .../__tests__/use-snippet-workflows.spec.tsx  | 78 +++++++++++++++++++
 web/service/use-snippet-workflows.ts          |  5 +-
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 web/service/__tests__/use-snippet-workflows.spec.tsx

diff --git a/web/service/__tests__/use-snippet-workflows.spec.tsx b/web/service/__tests__/use-snippet-workflows.spec.tsx
new file mode 100644
index 0000000000..d39f27390b
--- /dev/null
+++ b/web/service/__tests__/use-snippet-workflows.spec.tsx
@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react'
+import type { SnippetWorkflow } from '@/types/snippet'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { get } from '../base'
+import { useSnippetDraftWorkflow } from '../use-snippet-workflows'
+
+const { draftWorkflowQueryOptions } = vi.hoisted(() => ({
+  draftWorkflowQueryOptions: vi.fn(),
+}))
+
+vi.mock('../base', () => ({
+  get: vi.fn(),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleQuery: {
+    snippets: {
+      draftWorkflow: {
+        queryOptions: draftWorkflowQueryOptions,
+      },
+    },
+  },
+}))
+
+const mockGet = vi.mocked(get)
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+describe('useSnippetDraftWorkflow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    draftWorkflowQueryOptions.mockReturnValue({
+      queryKey: ['console', 'snippets', 'draft-workflow', 'snippet-1'],
+      enabled: true,
+      queryFn: vi.fn(),
+    })
+  })
+
+  it('should fetch the draft workflow silently during initialization', async () => {
+    const onSuccess = vi.fn()
+    const draftWorkflow = {
+      hash: 'draft-hash',
+      updated_at: 1_712_345_678,
+    } as SnippetWorkflow
+
+    mockGet.mockResolvedValueOnce(draftWorkflow)
+
+    const { result } = renderHook(() => useSnippetDraftWorkflow('snippet-1', onSuccess), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(draftWorkflow)
+    })
+
+    expect(draftWorkflowQueryOptions).toHaveBeenCalledWith({
+      input: {
+        params: { snippetId: 'snippet-1' },
+      },
+      enabled: true,
+    })
+    expect(mockGet).toHaveBeenCalledWith('/snippets/snippet-1/workflows/draft', {}, { silent: true })
+    expect(onSuccess).toHaveBeenCalledWith(draftWorkflow)
+  })
+})
diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
index 4141097bed..8130e73752 100644
--- a/web/service/use-snippet-workflows.ts
+++ b/web/service/use-snippet-workflows.ts
@@ -1,6 +1,7 @@
 import type { SnippetWorkflow } from '@/types/snippet'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { consoleQuery } from '@/service/client'
+import { get } from './base'
 
 const isNotFoundError = (error: unknown) => {
   return !!error && typeof error === 'object' && 'status' in error && error.status === 404
@@ -47,9 +48,9 @@ export const useSnippetDraftWorkflow = (
 
   return useQuery({
     ...queryOptions,
-    queryFn: async (context) => {
+    queryFn: async () => {
       try {
-        const draftWorkflow = await queryOptions.queryFn(context)
+        const draftWorkflow = await get<SnippetWorkflow>(`/snippets/${snippetId}/workflows/draft`, {}, { silent: true })
         onSuccess?.(draftWorkflow)
         return draftWorkflow
       }

From 6de81c403d07838fb485d21525bcdfccb3a4700a Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 16 Apr 2026 12:57:34 +0800
Subject: [PATCH 103/108] fix uv.lock

---
 api/uv.lock | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/api/uv.lock b/api/uv.lock
index de1f8b212f..fa5e876429 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -6562,6 +6562,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/45/3f/48af1e72e59d60481724b326317bd311615bdedc31f8f81f9508fb84cda6/tablestore-6.4.4-py3-none-any.whl", hash = "sha256:984f086fa7acabaa3558da93205ad6df562b266b85fd249bc5891f2dd1d65814", size = 5118758, upload-time = "2026-04-09T09:40:17.209Z" },
 ]
 
+[[package]]
+name = "tabulate"
+version = "0.9.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/ec/fe/802052aecb21e3797b8f7902564ab6ea0d60ff8ca23952079064155d1ae1/tabulate-0.9.0.tar.gz", hash = "sha256:0095b12bf5966de529c0feb1fa08671671b3368eec77d7ef7ab114be2c068b3c", size = 81090, upload-time = "2022-10-06T17:21:48.54Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/40/44/4a5f08c96eb108af5cb50b41f76142f0afa346dfa99d5296fe7202a11854/tabulate-0.9.0-py3-none-any.whl", hash = "sha256:024ca478df22e9340661486f85298cff5f6dcdba14f3813e8830015b9ed1948f", size = 35252, upload-time = "2022-10-06T17:21:44.262Z" },
+]
+
 [[package]]
 name = "tcvdb-text"
 version = "1.1.2"

From b491ea53c5ae98712cd135e01ecb2e2eec76f61c Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Thu, 16 Apr 2026 15:15:45 +0800
Subject: [PATCH 104/108] fix: improve i18n and comment default uuidv7

---
 api/models/comment.py          | 8 ++++----
 web/i18n/ar-TN/workflow.json   | 4 ++--
 web/i18n/de-DE/workflow.json   | 4 ++--
 web/i18n/es-ES/workflow.json   | 4 ++--
 web/i18n/fa-IR/workflow.json   | 2 +-
 web/i18n/fr-FR/workflow.json   | 4 ++--
 web/i18n/hi-IN/workflow.json   | 4 ++--
 web/i18n/id-ID/workflow.json   | 4 ++--
 web/i18n/it-IT/workflow.json   | 4 ++--
 web/i18n/ja-JP/workflow.json   | 4 ++--
 web/i18n/ko-KR/workflow.json   | 4 ++--
 web/i18n/nl-NL/workflow.json   | 2 +-
 web/i18n/pl-PL/workflow.json   | 4 ++--
 web/i18n/pt-BR/workflow.json   | 4 ++--
 web/i18n/ro-RO/workflow.json   | 4 ++--
 web/i18n/ru-RU/workflow.json   | 4 ++--
 web/i18n/sl-SI/workflow.json   | 4 ++--
 web/i18n/th-TH/workflow.json   | 4 ++--
 web/i18n/tr-TR/workflow.json   | 4 ++--
 web/i18n/uk-UA/workflow.json   | 4 ++--
 web/i18n/vi-VN/workflow.json   | 4 ++--
 web/i18n/zh-Hans/workflow.json | 2 +-
 web/i18n/zh-Hant/workflow.json | 4 ++--
 23 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/api/models/comment.py b/api/models/comment.py
index 308339e6f6..7018c7e1f2 100644
--- a/api/models/comment.py
+++ b/api/models/comment.py
@@ -7,7 +7,7 @@ from sqlalchemy import Index, func
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from .account import Account
-from .base import Base
+from .base import Base, gen_uuidv7_string
 from .engine import db
 from .types import StringUUID
 
@@ -41,7 +41,7 @@ class WorkflowComment(Base):
         Index("workflow_comments_created_at_idx", "created_at"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    id: Mapped[str] = mapped_column(StringUUID, default=gen_uuidv7_string)
     tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     app_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     position_x: Mapped[float] = mapped_column(db.Float)
@@ -148,7 +148,7 @@ class WorkflowCommentReply(Base):
         Index("comment_replies_created_at_idx", "created_at"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    id: Mapped[str] = mapped_column(StringUUID, default=gen_uuidv7_string)
     comment_id: Mapped[str] = mapped_column(
         StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
     )
@@ -193,7 +193,7 @@ class WorkflowCommentMention(Base):
         Index("comment_mentions_user_idx", "mentioned_user_id"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    id: Mapped[str] = mapped_column(StringUUID, default=gen_uuidv7_string)
     comment_id: Mapped[str] = mapped_column(
         StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
     )
diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index 6b9d2b2f8c..ba0a937774 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "المحتوى المخزن",
   "chatVariable.updatedAt": "تم التحديث في ",
   "collaboration.historyAction.generic": "قام متعاون بعملية تراجع/إعادة",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "أضف تعليقًا",
   "comments.actions.deleteReply": "حذف الرد",
   "comments.actions.editComment": "تعديل التعليق",
   "comments.actions.editReply": "تعديل الرد",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "فشل حذف الإصدار",
   "versionHistory.action.deleteSuccess": "تم حذف الإصدار",
   "versionHistory.action.restoreFailure": "فشل استعادة الإصدار",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} يقوم بالاستعادة إلى الإصدار {{versionName}}...",
   "versionHistory.action.restoreSuccess": "تم استعادة الإصدار",
   "versionHistory.action.updateFailure": "فشل تحديث الإصدار",
   "versionHistory.action.updateSuccess": "تم تحديث الإصدار",
diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json
index 20a142431c..3394652b9b 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Gespeicherter Inhalt",
   "chatVariable.updatedAt": "Aktualisiert am ",
   "collaboration.historyAction.generic": "Ein Mitbearbeiter hat Rückgängig/Wiederholen ausgeführt",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Kommentar hinzufügen",
   "comments.actions.deleteReply": "Antwort löschen",
   "comments.actions.editComment": "Kommentar bearbeiten",
   "comments.actions.editReply": "Antwort bearbeiten",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Version löschen fehlgeschlagen",
   "versionHistory.action.deleteSuccess": "Version gelöscht",
   "versionHistory.action.restoreFailure": "Wiederherstellung der Version fehlgeschlagen",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} stellt Version {{versionName}} wieder her...",
   "versionHistory.action.restoreSuccess": "Version wiederhergestellt",
   "versionHistory.action.updateFailure": "Aktualisierung der Version fehlgeschlagen",
   "versionHistory.action.updateSuccess": "Version aktualisiert",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index 2b7ca99452..203d31bc57 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Contenido almacenado",
   "chatVariable.updatedAt": "Actualizado el ",
   "collaboration.historyAction.generic": "Un colaborador realizó deshacer/rehacer",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Añadir un comentario",
   "comments.actions.deleteReply": "Eliminar respuesta",
   "comments.actions.editComment": "Editar comentario",
   "comments.actions.editReply": "Editar respuesta",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Error al eliminar la versión",
   "versionHistory.action.deleteSuccess": "Versión eliminada",
   "versionHistory.action.restoreFailure": "Error al restaurar la versión",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} está restaurando a la versión {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versión restaurada",
   "versionHistory.action.updateFailure": "Error al actualizar la versión",
   "versionHistory.action.updateSuccess": "Versión actualizada",
diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index 7914b861ed..6b502a0318 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "محتوای ذخیره‌شده",
   "chatVariable.updatedAt": "به‌روزرسانی شده در ",
   "collaboration.historyAction.generic": "یک همکار عملیات برگرداندن/انجام مجدد را انجام داد",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "افزودن دیدگاه",
   "comments.actions.deleteReply": "حذف پاسخ",
   "comments.actions.editComment": "ویرایش دیدگاه",
   "comments.actions.editReply": "ویرایش پاسخ",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index d4fbd8f27a..106665d2bf 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Contenu stocké",
   "chatVariable.updatedAt": "Mis à jour le ",
   "collaboration.historyAction.generic": "Un collaborateur a effectué une annulation/une réexécution",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Ajouter un commentaire",
   "comments.actions.deleteReply": "Supprimer la réponse",
   "comments.actions.editComment": "Modifier le commentaire",
   "comments.actions.editReply": "Modifier la réponse",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Échec de la suppression de la version",
   "versionHistory.action.deleteSuccess": "Version supprimée",
   "versionHistory.action.restoreFailure": "Échec de la restauration de la version",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} restaure la version {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Version restaurée",
   "versionHistory.action.updateFailure": "Échec de la mise à jour de la version",
   "versionHistory.action.updateSuccess": "Version mise à jour",
diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json
index 5c3b6eb1f9..777711ef22 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "संग्रहीत सामग्री",
   "chatVariable.updatedAt": "अपडेट किया गया ",
   "collaboration.historyAction.generic": "एक सहयोगी ने Undo/Redo किया",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "टिप्पणी जोड़ें",
   "comments.actions.deleteReply": "जवाब हटाएं",
   "comments.actions.editComment": "टिप्पणी संपादित करें",
   "comments.actions.editReply": "जवाब संपादित करें",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "संस्करण को हटाने में विफल",
   "versionHistory.action.deleteSuccess": "संस्करण हटाया गया",
   "versionHistory.action.restoreFailure": "संस्करण को पुनर्स्थापित करने में विफल",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} संस्करण {{versionName}} को पुनर्स्थापित कर रहे हैं...",
   "versionHistory.action.restoreSuccess": "संस्करण पुनर्स्थापित किया गया",
   "versionHistory.action.updateFailure": "संस्करण अपडेट करने में विफल",
   "versionHistory.action.updateSuccess": "संस्करण अपडेट किया गया",
diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json
index 376227eedf..6150fc6505 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Konten yang disimpan",
   "chatVariable.updatedAt": "Diperbarui pada",
   "collaboration.historyAction.generic": "Seorang kolaborator melakukan urungkan/ulang",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Tambahkan komentar",
   "comments.actions.deleteReply": "Hapus balasan",
   "comments.actions.editComment": "Edit komentar",
   "comments.actions.editReply": "Edit balasan",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Gagal menghapus versi",
   "versionHistory.action.deleteSuccess": "Versi dihapus",
   "versionHistory.action.restoreFailure": "Gagal memulihkan versi",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} sedang memulihkan ke versi {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versi dipulihkan",
   "versionHistory.action.updateFailure": "Gagal memperbarui versi",
   "versionHistory.action.updateSuccess": "Versi diperbarui",
diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json
index 7bd102f745..533e6a1b7d 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Contenuto memorizzato",
   "chatVariable.updatedAt": "Aggiornato il ",
   "collaboration.historyAction.generic": "Un collaboratore ha eseguito annulla/ripristina",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Aggiungi un commento",
   "comments.actions.deleteReply": "Elimina risposta",
   "comments.actions.editComment": "Modifica commento",
   "comments.actions.editReply": "Modifica risposta",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Impossibile eliminare la versione",
   "versionHistory.action.deleteSuccess": "Versione eliminata",
   "versionHistory.action.restoreFailure": "Impossibile ripristinare la versione",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} sta ripristinando alla versione {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versione ripristinata",
   "versionHistory.action.updateFailure": "Impossibile aggiornare la versione",
   "versionHistory.action.updateSuccess": "Versione aggiornata",
diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json
index 9564abc43d..07aaa99132 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "保存内容",
   "chatVariable.updatedAt": "最終更新：",
   "collaboration.historyAction.generic": "共同編集者が元に戻す/やり直しを実行しました",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "コメントを追加",
   "comments.actions.deleteReply": "返信を削除",
   "comments.actions.editComment": "コメントを編集",
   "comments.actions.editReply": "返信を編集",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "削除に失敗しました",
   "versionHistory.action.deleteSuccess": "削除が完了しました",
   "versionHistory.action.restoreFailure": "復元に失敗しました",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} がバージョン {{versionName}} に復元中です...",
   "versionHistory.action.restoreSuccess": "復元が完了しました",
   "versionHistory.action.updateFailure": "更新に失敗しました",
   "versionHistory.action.updateSuccess": "更新が完了しました",
diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json
index 7dfeda4573..fcdf681ab1 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "저장된 내용",
   "chatVariable.updatedAt": "업데이트 시간: ",
   "collaboration.historyAction.generic": "공동 작업자가 실행 취소/다시 실행을 수행했습니다",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "댓글 추가",
   "comments.actions.deleteReply": "답글 삭제",
   "comments.actions.editComment": "댓글 편집",
   "comments.actions.editReply": "답글 편집",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "버전을 삭제하지 못했습니다.",
   "versionHistory.action.deleteSuccess": "버전 삭제됨",
   "versionHistory.action.restoreFailure": "버전을 복원하지 못했습니다.",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}}님이 버전 {{versionName}}로 복원하는 중입니다...",
   "versionHistory.action.restoreSuccess": "복원된 버전",
   "versionHistory.action.updateFailure": "버전 업데이트에 실패했습니다.",
   "versionHistory.action.updateSuccess": "버전이 업데이트되었습니다.",
diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json
index 852415b419..ce1438df6b 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Stored content",
   "chatVariable.updatedAt": "Updated at ",
   "collaboration.historyAction.generic": "Een medewerker heeft een ongedaan maken/opnieuw uitvoeren-actie uitgevoerd",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Voeg een reactie toe",
   "comments.actions.deleteReply": "Antwoord verwijderen",
   "comments.actions.editComment": "Reactie bewerken",
   "comments.actions.editReply": "Antwoord bewerken",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 996681f50b..23f3f2cebd 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Przechowywana zawartość",
   "chatVariable.updatedAt": "Zaktualizowano ",
   "collaboration.historyAction.generic": "Współpracownik wykonał cofnięcie/ponowienie",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Dodaj komentarz",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Edytuj komentarz",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Nie udało się usunąć wersji",
   "versionHistory.action.deleteSuccess": "Wersja usunięta",
   "versionHistory.action.restoreFailure": "Nie udało się przywrócić wersji",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} przywraca wersję {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Wersja przywrócona",
   "versionHistory.action.updateFailure": "Nie udało się zaktualizować wersji",
   "versionHistory.action.updateSuccess": "Wersja zaktualizowana",
diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json
index 74af4a8e62..963bb0c176 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Conteúdo armazenado",
   "chatVariable.updatedAt": "Atualizado em ",
   "collaboration.historyAction.generic": "Um colaborador realizou desfazer/refazer",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Adicionar comentário",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Editar comentário",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Falha ao deletar versão",
   "versionHistory.action.deleteSuccess": "Versão excluída",
   "versionHistory.action.restoreFailure": "Falha ao restaurar versão",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} está restaurando para a versão {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versão restaurada",
   "versionHistory.action.updateFailure": "Falha ao atualizar a versão",
   "versionHistory.action.updateSuccess": "Versão atualizada",
diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json
index 6c02f5fc3c..2550c6afd2 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Conținut stocat",
   "chatVariable.updatedAt": "Actualizat la ",
   "collaboration.historyAction.generic": "Un colaborator a efectuat anulare/refacere",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Adaugă un comentariu",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Editează comentariul",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Ștergerea versiunii a eșuat",
   "versionHistory.action.deleteSuccess": "Versiune ștearsă",
   "versionHistory.action.restoreFailure": "Restaurarea versiunii a eșuat",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} restaurează la versiunea {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versiune restaurată",
   "versionHistory.action.updateFailure": "Actualizarea versiunii a eșuat",
   "versionHistory.action.updateSuccess": "Versiune actualizată",
diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json
index 87153206a9..a13a7afe28 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Сохраненный контент",
   "chatVariable.updatedAt": "Обновлено в ",
   "collaboration.historyAction.generic": "Участник выполнил отмену/повтор",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Добавить комментарий",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Редактировать комментарий",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Не удалось удалить версию",
   "versionHistory.action.deleteSuccess": "Версия удалена",
   "versionHistory.action.restoreFailure": "Не удалось восстановить версию",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} восстанавливает версию {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Версия восстановлена",
   "versionHistory.action.updateFailure": "Не удалось обновить версию",
   "versionHistory.action.updateSuccess": "Версия обновлена",
diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json
index 987d439f9a..deb71836b7 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Shranjena vsebina",
   "chatVariable.updatedAt": "Posodobljeno ob",
   "collaboration.historyAction.generic": "Sodelavec je izvedel razveljavitev/ponovitev",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Dodaj komentar",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Uredi komentar",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Brisanje različice ni uspelo",
   "versionHistory.action.deleteSuccess": "Različica izbrisana",
   "versionHistory.action.restoreFailure": "Obnavljanje različice ni uspelo",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} obnavlja različico {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Obnovljena različica",
   "versionHistory.action.updateFailure": "Posodobitev različice ni uspela",
   "versionHistory.action.updateSuccess": "Različica posodobljena",
diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json
index 424f510d4a..75c82b883d 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "เนื้อหาที่เก็บไว้",
   "chatVariable.updatedAt": "อัพเดทเมื่อ",
   "collaboration.historyAction.generic": "ผู้ร่วมงานได้ทำการยกเลิก/ทำซ้ำ",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "เพิ่มความคิดเห็น",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "แก้ไขความคิดเห็น",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "ลบเวอร์ชันไม่สำเร็จ",
   "versionHistory.action.deleteSuccess": "เวอร์ชันถูกลบ",
   "versionHistory.action.restoreFailure": "ไม่สามารถกู้คืนเวอร์ชันได้",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} กำลังกู้คืนไปยังเวอร์ชัน {{versionName}}...",
   "versionHistory.action.restoreSuccess": "เวอร์ชันที่กู้คืน",
   "versionHistory.action.updateFailure": "ไม่สามารถอัปเดตเวอร์ชันได้",
   "versionHistory.action.updateSuccess": "อัปเดตเวอร์ชัน",
diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json
index ce43144e5c..3943a3c067 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Depolanan içerik",
   "chatVariable.updatedAt": "Güncellenme zamanı: ",
   "collaboration.historyAction.generic": "Bir işbirlikçi geri alma/yeniden yapma gerçekleştirdi",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Yorum ekle",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Yorumu düzenle",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Versiyonu silme işlemi başarısız oldu",
   "versionHistory.action.deleteSuccess": "Sürüm silindi",
   "versionHistory.action.restoreFailure": "Sürümü geri yüklemekte başarısız olundu",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}}, {{versionName}} sürümüne geri dönüyor...",
   "versionHistory.action.restoreSuccess": "Sürüm geri yüklendi",
   "versionHistory.action.updateFailure": "Sürüm güncellenemedi",
   "versionHistory.action.updateSuccess": "Sürüm güncellendi",
diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json
index 76cd3eddee..088df91e32 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Збережений вміст",
   "chatVariable.updatedAt": "Оновлено ",
   "collaboration.historyAction.generic": "Співавтор виконав скасування/повторення",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Додати коментар",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Редагувати коментар",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Не вдалося видалити версію",
   "versionHistory.action.deleteSuccess": "Версія видалена",
   "versionHistory.action.restoreFailure": "Не вдалося відновити версію",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} відновлює до версії {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Версія відновлена",
   "versionHistory.action.updateFailure": "Не вдалося оновити версію",
   "versionHistory.action.updateSuccess": "Версія оновлена",
diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json
index 7750f0efb6..be1dc9cb9c 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Nội dung đã lưu",
   "chatVariable.updatedAt": "Cập nhật lúc ",
   "collaboration.historyAction.generic": "Một cộng tác viên đã thực hiện hoàn tác/làm lại",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Thêm bình luận",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Chỉnh sửa bình luận",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Xóa phiên bản thất bại",
   "versionHistory.action.deleteSuccess": "Phiên bản đã bị xóa",
   "versionHistory.action.restoreFailure": "Không thể khôi phục phiên bản",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} đang khôi phục về phiên bản {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Phiên bản đã được khôi phục",
   "versionHistory.action.updateFailure": "Cập nhật phiên bản không thành công",
   "versionHistory.action.updateSuccess": "Phiên bản đã được cập nhật",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index 865fcd2b8c..dab8d45e11 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "存储内容",
   "chatVariable.updatedAt": "更新时间 ",
   "collaboration.historyAction.generic": "协作者执行了撤销/重做操作",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "添加评论",
   "comments.actions.deleteReply": "删除回复",
   "comments.actions.editComment": "编辑评论",
   "comments.actions.editReply": "编辑回复",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 6b8ad06650..daf8baf8a8 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "已儲存內容",
   "chatVariable.updatedAt": "更新於 ",
   "collaboration.historyAction.generic": "協作者執行了復原/重做操作",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "新增評論",
   "comments.actions.deleteReply": "刪除回覆",
   "comments.actions.editComment": "編輯評論",
   "comments.actions.editReply": "編輯回覆",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "無法刪除版本",
   "versionHistory.action.deleteSuccess": "版本已刪除",
   "versionHistory.action.restoreFailure": "無法恢復版本",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} 正在還原至版本 {{versionName}}...",
   "versionHistory.action.restoreSuccess": "恢復版本",
   "versionHistory.action.updateFailure": "更新版本失敗",
   "versionHistory.action.updateSuccess": "版本已更新",

From a13996dba15330eec6a1479a9c4c63c4fabcae38 Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Thu, 16 Apr 2026 15:30:27 +0800
Subject: [PATCH 105/108] refactor(web): replace PortalToFollowElem with
 DropdownMenu in various components

- Updated PublishWithMultipleModel, AppSidebarDropdown, DatasetSidebarDropdown, and others to use DropdownMenu for dropdown functionality.
- Adjusted related tests to reflect the new DropdownMenu structure.
- Enhanced the user interface by improving dropdown interactions and accessibility.
---
 .../__tests__/app-sidebar-dropdown.spec.tsx   |  51 ++-
 .../dataset-sidebar-dropdown.spec.tsx         |  49 ++-
 .../__tests__/app-operations.spec.tsx         |  74 ++++-
 .../app-sidebar/app-info/app-operations.tsx   |  80 ++---
 .../app-sidebar/app-sidebar-dropdown.tsx      |  68 ++--
 .../app-sidebar/dataset-sidebar-dropdown.tsx  |  72 ++--
 .../publish-with-multiple-model.spec.tsx      |  57 +++-
 .../publish-with-multiple-model.tsx           | 103 +++---
 .../item-operation/__tests__/index.spec.tsx   | 112 ++++++-
 .../explore/item-operation/index.tsx          | 101 +++---
 .../install-plugin-dropdown.spec.tsx          | 107 +++++-
 .../plugin-page/install-plugin-dropdown.tsx   | 118 +++----
 .../__tests__/operation-dropdown.spec.tsx     | 192 ++++++-----
 .../tools/mcp/detail/operation-dropdown.tsx   |  92 ++----
 .../__tests__/test-run-menu-helpers.spec.tsx  |  29 +-
 .../header/__tests__/test-run-menu.spec.tsx   |  77 +++--
 .../workflow/header/test-run-menu-helpers.tsx |   8 +-
 .../workflow/header/test-run-menu.tsx         |  37 ++-
 .../__tests__/operation-selector.spec.tsx     |  68 ++++
 .../components/operation-selector.tsx         | 107 +++---
 .../operator/__tests__/more-actions.spec.tsx  | 309 ++++++++++++++++++
 .../workflow/operator/more-actions.tsx        | 143 ++++----
 .../context-menu/__tests__/menu-item.spec.tsx |  21 +-
 .../context-menu/index.tsx                    |  95 +++---
 .../context-menu/menu-item.tsx                |  15 +-
 .../__tests__/agent-log-nav-more.spec.tsx     |  46 +++
 .../run/agent-log/agent-log-nav-more.tsx      |  74 ++---
 27 files changed, 1545 insertions(+), 760 deletions(-)
 create mode 100644 web/app/components/workflow/operator/__tests__/more-actions.spec.tsx

diff --git a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
index 5018709da1..5e18bbc343 100644
--- a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
@@ -19,17 +19,40 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
-  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="portal-content">{children}</div>
-  ),
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-trigger"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(!isOpen)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown-content">{children}</div>,
+  }
+})
 
 vi.mock('../../base/app-icon', () => ({
   default: ({ size, icon }: { size: string, icon: string }) => (
@@ -128,11 +151,11 @@ describe('AppSidebarDropdown', () => {
     const user = userEvent.setup()
     render(<AppSidebarDropdown navigation={navigation} />)
 
-    const trigger = screen.getByTestId('portal-trigger')
+    const trigger = screen.getByTestId('dropdown-trigger')
     await user.click(trigger)
 
-    const portal = screen.getByTestId('portal-elem')
-    expect(portal).toHaveAttribute('data-open', 'true')
+    const dropdown = screen.getByTestId('dropdown-menu')
+    expect(dropdown).toHaveAttribute('data-open', 'true')
   })
 
   it('should render divider between app info and navigation', () => {
diff --git a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
index 1f3a5f9ad8..5060987cda 100644
--- a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
@@ -21,17 +21,40 @@ vi.mock('@/hooks/use-knowledge', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
-  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="portal-content">{children}</div>
-  ),
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-trigger"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(!isOpen)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown-content">{children}</div>,
+  }
+})
 
 vi.mock('../../base/app-icon', () => ({
   default: ({ size, icon }: { size: string, icon: string }) => (
@@ -173,10 +196,10 @@ describe('DatasetSidebarDropdown', () => {
     const user = userEvent.setup()
     render(<DatasetSidebarDropdown navigation={navigation} />)
 
-    const trigger = screen.getByTestId('portal-trigger')
+    const trigger = screen.getByTestId('dropdown-trigger')
     await user.click(trigger)
 
-    expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'true')
+    expect(screen.getByTestId('dropdown-menu')).toHaveAttribute('data-open', 'true')
   })
 
   it('should render divider', () => {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
index 2c5b133a74..461cedc20c 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
@@ -30,17 +30,67 @@ vi.mock('../../../base/ui/button', () => ({
   ),
 }))
 
-vi.mock('../../../base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
-  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => (
-    <div data-testid="portal-content" className={className}>{children}</div>
-  ),
-}))
+vi.mock('../../../base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      onClick,
+      render,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLElement>
+      render?: React.ReactElement
+    }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        onClick?.(e)
+        setOpen(!isOpen)
+      }
+
+      if (render)
+        return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record<string, unknown>, children)
+
+      return <button data-testid="dropdown-trigger" onClick={handleClick}>{children}</button>
+    },
+    DropdownMenuContent: ({ children, popupClassName }: { children: React.ReactNode, popupClassName?: string }) => {
+      const { isOpen } = useDropdownMenuContext()
+      if (!isOpen)
+        return null
+
+      return <div data-testid="dropdown-content" className={popupClassName}>{children}</div>
+    },
+    DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-item"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuSeparator: () => <hr data-testid="dropdown-separator" />,
+  }
+})
 
 const createOperation = (id: string, title: string, type?: 'divider'): Operation => ({
   id,
@@ -169,7 +219,7 @@ describe('AppOperations', () => {
 
       render(<AppOperations gap={4} primaryOperations={ops} secondaryOperations={secondary} />)
 
-      const trigger = screen.queryByTestId('portal-trigger')
+      const trigger = screen.queryByTestId('dropdown-trigger')
       if (trigger)
         await user.click(trigger)
 
diff --git a/web/app/components/app-sidebar/app-info/app-operations.tsx b/web/app/components/app-sidebar/app-info/app-operations.tsx
index a3e67c8a59..095fb31206 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -1,9 +1,15 @@
 import type { JSX } from 'react'
 import { RiMoreLine } from '@remixicon/react'
-import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../base/ui/dropdown-menu'
 
 export type Operation = {
   id: string
@@ -33,9 +39,6 @@ const AppOperations = ({
   const [moreOperations, setMoreOperations] = useState<Operation[]>([])
   const [showMore, setShowMore] = useState(false)
   const navRef = useRef<HTMLDivElement>(null)
-  const handleTriggerMore = useCallback(() => {
-    setShowMore(true)
-  }, [setShowMore])
 
   const primaryOps = useMemo(() => {
     if (operations)
@@ -169,43 +172,44 @@ const AppOperations = ({
           </Button>
         ))}
         {shouldShowMoreButton && (
-          <PortalToFollowElem
-            open={showMore}
-            onOpenChange={setShowMore}
-            placement="bottom-end"
-            offset={{ mainAxis: 4 }}
-          >
-            <PortalToFollowElemTrigger onClick={handleTriggerMore}>
-              <Button
-                size="small"
-                variant="secondary"
-                className="gap-px"
-              >
+          <DropdownMenu open={showMore} onOpenChange={setShowMore}>
+            <DropdownMenuTrigger
+              render={(
+                <Button
+                  size="small"
+                  variant="secondary"
+                  className="gap-px"
+                />
+              )}
+            >
+              <>
                 <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
                 <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>
-              </Button>
-            </PortalToFollowElemTrigger>
-            <PortalToFollowElemContent className="z-30">
-              <div className="flex min-w-[264px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
-                {moreOperations.map(item => item.type === 'divider'
-                  ? (
-                      <div key={item.id} className="my-1 h-px bg-divider-subtle" />
-                    )
-                  : (
-                      <div
-                        key={item.id}
-                        className="flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover"
-                        onClick={item.onClick}
-                      >
-                        {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
-                        <span className="system-md-regular text-text-secondary">{item.title}</span>
-                      </div>
-                    ))}
-              </div>
-            </PortalToFollowElemContent>
-          </PortalToFollowElem>
+              </>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              placement="bottom-end"
+              sideOffset={4}
+              popupClassName="min-w-[264px]"
+            >
+              {moreOperations.map(item => item.type === 'divider'
+                ? (
+                    <DropdownMenuSeparator key={item.id} />
+                  )
+                : (
+                    <DropdownMenuItem
+                      key={item.id}
+                      className="gap-x-1 px-1.5"
+                      onClick={item.onClick}
+                    >
+                      {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
+                      <span className="system-md-regular text-text-secondary">{item.title}</span>
+                    </DropdownMenuItem>
+                  ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
         )}
       </div>
     </>
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index 361fc94d69..617d14f426 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -5,14 +5,14 @@ import {
   RiMenuLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useAppContext } from '@/context/app-context'
 import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
@@ -34,16 +34,7 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
   const { isCurrentWorkspaceEditor } = useAppContext()
   const appDetail = useAppStore(state => state.appDetail)
   const [detailExpand, setDetailExpand] = useState(false)
-
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
 
   if (!appDetail)
     return null
@@ -51,27 +42,28 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
   return (
     <>
       <div className="fixed top-2 left-2 z-20">
-        <PortalToFollowElem
-          open={open}
-          onOpenChange={setOpen}
-          placement="bottom-start"
-          offset={{
-            mainAxis: -41,
-          }}
-        >
-          <PortalToFollowElemTrigger onClick={handleTrigger}>
-            <div className={cn('flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover', open && 'bg-background-default-hover')}>
-              <AppIcon
-                size="small"
-                iconType={appDetail.icon_type}
-                icon={appDetail.icon}
-                background={appDetail.icon_background}
-                imageUrl={appDetail.icon_url}
-              />
-              <RiMenuLine className="h-4 w-4 text-text-tertiary" />
-            </div>
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-1000">
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenuTrigger
+            aria-label={t('operation.more', { ns: 'common' })}
+            className={cn(
+              'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
+              open && 'bg-background-default-hover',
+            )}
+          >
+            <AppIcon
+              size="small"
+              iconType={appDetail.icon_type}
+              icon={appDetail.icon}
+              background={appDetail.icon_background}
+              imageUrl={appDetail.icon_url}
+            />
+            <RiMenuLine className="h-4 w-4 text-text-tertiary" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-start"
+            sideOffset={4}
+            popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
+          >
             <div className={cn('w-[305px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg')}>
               <div className="p-2">
                 <div
@@ -114,8 +106,8 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
                 })}
               </nav>
             </div>
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <div className="z-20">
         <AppInfo expand onlyShowDetail openState={detailExpand} onDetailExpand={setDetailExpand} />
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index de2563b377..3968a0df6f 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -5,13 +5,13 @@ import {
   RiMenuLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { DOC_FORM_TEXT } from '@/models/datasets'
@@ -41,15 +41,7 @@ const DatasetSidebarDropdown = ({
 
   const { data: relatedApps } = useDatasetRelatedApps(dataset.id)
 
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
 
   const iconInfo = dataset.icon_info || {
     icon: '📙',
@@ -66,32 +58,28 @@ const DatasetSidebarDropdown = ({
   return (
     <>
       <div className="fixed top-2 left-2 z-20">
-        <PortalToFollowElem
-          open={open}
-          onOpenChange={setOpen}
-          placement="bottom-start"
-          offset={{
-            mainAxis: -41,
-          }}
-        >
-          <PortalToFollowElemTrigger onClick={handleTrigger}>
-            <div
-              className={cn(
-                'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
-                open && 'bg-background-default-hover',
-              )}
-            >
-              <AppIcon
-                size="small"
-                iconType={iconInfo.icon_type}
-                icon={iconInfo.icon}
-                background={iconInfo.icon_background}
-                imageUrl={iconInfo.icon_url}
-              />
-              <RiMenuLine className="size-4 text-text-tertiary" />
-            </div>
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-50">
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenuTrigger
+            aria-label={t('operation.more', { ns: 'common' })}
+            className={cn(
+              'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
+              open && 'bg-background-default-hover',
+            )}
+          >
+            <AppIcon
+              size="small"
+              iconType={iconInfo.icon_type}
+              icon={iconInfo.icon}
+              background={iconInfo.icon_background}
+              imageUrl={iconInfo.icon_url}
+            />
+            <RiMenuLine className="size-4 text-text-tertiary" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-start"
+            sideOffset={4}
+            popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
+          >
             <div className="relative w-[216px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg">
               <Effect className="top-[-22px] -left-5 opacity-15" />
               <div className="flex flex-col gap-y-2 p-4">
@@ -155,8 +143,8 @@ const DatasetSidebarDropdown = ({
                 documentCount={dataset.document_count}
               />
             </div>
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </>
   )
diff --git a/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx b/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
index f476d8b188..465252c6c4 100644
--- a/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/publish-with-multiple-model.spec.tsx
@@ -22,24 +22,57 @@ vi.mock('../../header/account-setting/model-provider-page/model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <span data-testid="model-icon">{modelName}</span>,
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
   const ReactModule = await vi.importActual<typeof import('react')>('react')
-  const OpenContext = ReactModule.createContext(false)
+  const OpenContext = ReactModule.createContext<{ open: boolean, setOpen: (nextOpen: boolean) => void } | null>(null)
+
+  const useOpenContext = () => {
+    const context = ReactModule.use(OpenContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
 
   return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <OpenContext.Provider value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
         <div data-testid="portal-root">{children}</div>
       </OpenContext.Provider>
     ),
-    PortalToFollowElemTrigger: ({ children, onClick, className }: { children: React.ReactNode, onClick?: () => void, className?: string }) => (
-      <div className={className} onClick={onClick}>
-        {children}
-      </div>
-    ),
-    PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
-      const open = ReactModule.useContext(OpenContext)
-      return open ? <div className={className}>{children}</div> : null
+    DropdownMenuTrigger: ({
+      children,
+      render,
+    }: {
+      children: React.ReactNode
+      render?: React.ReactElement
+    }) => {
+      const { open, setOpen } = useOpenContext()
+
+      if (render) {
+        return ReactModule.cloneElement(render, {
+          onClick: () => setOpen(!open),
+        } as Record<string, unknown>, children)
+      }
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children, popupClassName }: { children: React.ReactNode, popupClassName?: string }) => {
+      const context = useOpenContext()
+      return context.open ? <div className={popupClassName}>{children}</div> : null
+    },
+    DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { setOpen } = useOpenContext()
+      return (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
     },
   }
 })
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index b4ad0423b0..fbff371577 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -4,12 +4,13 @@ import type { Model, ModelItem } from '@/app/components/header/account-setting/m
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useProviderContext } from '@/context/provider-context'
 import ModelIcon from '../../header/account-setting/model-provider-page/model-icon'
@@ -50,61 +51,57 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
     }
   })
 
-  const handleToggle = () => {
-    if (validModelConfigs.length)
-      setOpen(v => !v)
-  }
-
-  const handleSelect = (item: ModelAndParameter) => {
-    onSelect(item)
-    setOpen(false)
-  }
-
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
     >
-      <PortalToFollowElemTrigger className="w-full" onClick={handleToggle}>
-        <Button
-          variant="primary"
-          disabled={!validModelConfigs.length}
-          className="mt-3 w-full"
-        >
+      <DropdownMenuTrigger
+        disabled={!validModelConfigs.length}
+        render={(
+          <Button
+            variant="primary"
+            disabled={!validModelConfigs.length}
+            className="mt-3 w-full"
+          />
+        )}
+      >
+        <>
           {t('operation.applyConfig', { ns: 'appDebug' })}
           <RiArrowDownSLine className="ml-0.5 h-3 w-3" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50 mt-1 w-[288px]">
-        <div className="rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
-          <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
-            {t('publishAs', { ns: 'appDebug' })}
-          </div>
-          {
-            validModelConfigs.map((item, index) => (
-              <div
-                key={item.id}
-                className="flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-tertiary hover:bg-state-base-hover"
-                onClick={() => handleSelect(item)}
-              >
-                <span className="min-w-[18px] italic">
-                  #
-                  {index + 1}
-                </span>
-                <ModelIcon modelName={item.model} provider={item.providerItem} className="ml-2" />
-                <div
-                  className="ml-1 truncate text-text-secondary"
-                  title={item.modelItem.label[language]}
-                >
-                  {item.modelItem.label[language]}
-                </div>
-              </div>
-            ))
-          }
+        </>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[288px] p-1"
+      >
+        <div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
+          {t('publishAs', { ns: 'appDebug' })}
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        {
+          validModelConfigs.map((item, index) => (
+            <DropdownMenuItem
+              key={item.id}
+              className="gap-0 px-3"
+              onClick={() => onSelect(item)}
+            >
+              <span className="min-w-[18px] italic">
+                #
+                {index + 1}
+              </span>
+              <ModelIcon modelName={item.model} provider={item.providerItem} className="ml-2" />
+              <div
+                className="ml-1 truncate text-text-secondary"
+                title={item.modelItem.label[language]}
+              >
+                {item.modelItem.label[language]}
+              </div>
+            </DropdownMenuItem>
+          ))
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/explore/item-operation/__tests__/index.spec.tsx b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
index f7f9b44a84..d54c644ab0 100644
--- a/web/app/components/explore/item-operation/__tests__/index.spec.tsx
+++ b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
@@ -1,6 +1,81 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
 import ItemOperation from '../index'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      onClick,
+      ...props
+    }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(!isOpen)
+          }}
+          {...props}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({
+      children,
+      popupProps,
+    }: {
+      children: React.ReactNode
+      popupProps?: React.HTMLAttributes<HTMLDivElement>
+    }) => {
+      const { isOpen } = useDropdownMenuContext()
+      if (!isOpen)
+        return null
+
+      return <div data-testid="dropdown-content" {...popupProps}>{children}</div>
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 describe('ItemOperation', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -67,14 +142,27 @@ describe('ItemOperation', () => {
 
       expect(props.onDelete).toHaveBeenCalledTimes(1)
     })
+
+    it('should call onRenameConversation when clicking rename action', async () => {
+      const onRenameConversation = vi.fn()
+      renderComponent({
+        isShowRenameConversation: true,
+        onRenameConversation,
+      })
+
+      fireEvent.click(screen.getByTestId('item-operation-trigger'))
+      fireEvent.click(await screen.findByText('explore.sidebar.action.rename'))
+
+      expect(onRenameConversation).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('Edge Cases', () => {
     it('should close the menu when mouse leaves the panel and item is not hovering', async () => {
       renderComponent()
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      const pinText = await screen.findByText('explore.sidebar.action.pin')
-      const menu = pinText.closest('div')?.parentElement as HTMLElement
+      await screen.findByText('explore.sidebar.action.pin')
+      const menu = screen.getByTestId('dropdown-content')
 
       fireEvent.mouseEnter(menu)
       fireEvent.mouseLeave(menu)
@@ -83,5 +171,25 @@ describe('ItemOperation', () => {
         expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
       })
     })
+
+    it('should stop propagation when clicking inside the dropdown content', async () => {
+      const onParentClick = vi.fn()
+
+      render(
+        <div onClick={onParentClick}>
+          <ItemOperation
+            isPinned={false}
+            isShowDelete
+            togglePin={vi.fn()}
+            onDelete={vi.fn()}
+          />
+        </div>,
+      )
+
+      fireEvent.click(screen.getByTestId('item-operation-trigger'))
+      fireEvent.click(await screen.findByTestId('dropdown-content'))
+
+      expect(onParentClick).not.toHaveBeenCalled()
+    })
   })
 })
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 94eed731fa..72bd00fa6e 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -7,10 +7,14 @@ import {
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { Pin02 } from '../../base/icons/src/vender/line/general'
 import s from './style.module.css'
 
@@ -35,61 +39,74 @@ const ItemOperation: FC<IItemOperationProps> = ({
   isShowDelete,
   onDelete,
 }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation('explore')
+  const { t: tCommon } = useTranslation('common')
   const [open, setOpen] = useState(false)
-  const ref = useRef(null)
   const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
   useEffect(() => {
     if (!isItemHovering && !isHovering)
       setOpen(false)
   }, [isItemHovering, isHovering])
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        data-testid="item-operation-trigger"
+        className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} bg-components-actionbar-bg! shadow-none!`)}
+        onClick={(e) => {
+          e.stopPropagation()
+        }}
       >
-        <div
-          className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} bg-components-actionbar-bg! shadow-none!`)}
-          data-testid="item-operation-trigger"
-        >
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent
-        className="z-50"
+        <span className="sr-only">{tCommon('operation.more')}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[120px]"
+        popupProps={{
+          onMouseEnter: setIsHovering,
+          onMouseLeave: setNotHovering,
+          onClick: e => e.stopPropagation(),
+        }}
       >
-        <div
-          ref={ref}
-          className="min-w-[120px] rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]"
-          onMouseEnter={setIsHovering}
-          onMouseLeave={setNotHovering}
+        <DropdownMenuItem
+          className={cn(s.actionItem, 'gap-2 px-3')}
           onClick={(e) => {
             e.stopPropagation()
+            togglePin()
           }}
         >
-          <div className={cn(s.actionItem, 'group hover:bg-state-base-hover')} onClick={togglePin}>
-            <Pin02 className="h-4 w-4 shrink-0 text-text-secondary" />
-            <span className={s.actionName}>{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
-          </div>
-          {isShowRenameConversation && (
-            <div className={cn(s.actionItem, 'group hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <RiEditLine className="h-4 w-4 shrink-0 text-text-secondary" />
-              <span className={s.actionName}>{t('sidebar.action.rename', { ns: 'explore' })}</span>
-            </div>
-          )}
-          {isShowDelete && (
-            <div className={cn(s.actionItem, s.deleteActionItem, 'group hover:bg-state-base-hover')} onClick={onDelete}>
-              <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-text-secondary')} />
-              <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('sidebar.action.delete', { ns: 'explore' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+          <Pin02 className="h-4 w-4 shrink-0 text-text-secondary" />
+          <span className={s.actionName}>{isPinned ? t('sidebar.action.unpin') : t('sidebar.action.pin')}</span>
+        </DropdownMenuItem>
+        {isShowRenameConversation && (
+          <DropdownMenuItem
+            className={cn(s.actionItem, 'gap-2 px-3')}
+            onClick={(e) => {
+              e.stopPropagation()
+              onRenameConversation?.()
+            }}
+          >
+            <RiEditLine className="h-4 w-4 shrink-0 text-text-secondary" />
+            <span className={s.actionName}>{t('sidebar.action.rename')}</span>
+          </DropdownMenuItem>
+        )}
+        {isShowDelete && (
+          <DropdownMenuItem
+            className={cn(s.actionItem, s.deleteActionItem, 'gap-2 px-3 data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive')}
+            onClick={(e) => {
+              e.stopPropagation()
+              onDelete()
+            }}
+          >
+            <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-inherit')} />
+            <span className={cn(s.actionName, s.deleteActionItemChild, 'text-inherit')}>{t('sidebar.action.delete')}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(ItemOperation)
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index 28aec206f1..1f249b16c6 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -36,34 +36,85 @@ vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
 }))
 
 vi.mock('@/app/components/base/ui/button', () => ({
-  Button: ({ children }: { children: React.ReactNode }) => <span data-testid="button-content">{children}</span>,
+  Button: ({ children, onClick, className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button type="button" data-testid="button-content" className={className} onClick={onClick} {...props}>{children}</button>
+  ),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
   const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
   return {
-    PortalToFollowElem: ({
+    DropdownMenu: ({
       open,
+      onOpenChange,
       children,
     }: {
       open: boolean
+      onOpenChange?: (open: boolean) => void
       children: React.ReactNode
     }) => {
       portalOpen = open
-      return <div>{children}</div>
+      return (
+        <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+          <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+        </DropdownMenuContext>
+      )
     },
-    PortalToFollowElemTrigger: ({
+    DropdownMenuTrigger: ({
       children,
       onClick,
+      render,
     }: {
       children: React.ReactNode
-      onClick: () => void
-    }) => <button data-testid="dropdown-trigger" onClick={onClick}>{children}</button>,
-    PortalToFollowElemContent: ({
+      onClick?: React.MouseEventHandler<HTMLElement>
+      render?: React.ReactElement
+    }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        onClick?.(e)
+        setOpen(!isOpen)
+      }
+
+      if (render)
+        return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record<string, unknown>, children)
+
+      return <button data-testid="dropdown-trigger" onClick={handleClick}>{children}</button>
+    },
+    DropdownMenuContent: ({
       children,
     }: {
       children: React.ReactNode
     }) => portalOpen ? <div data-testid="dropdown-content">{children}</div> : null,
+    DropdownMenuItem: ({
+      children,
+      onClick,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-item"
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
   }
 })
 
@@ -131,13 +182,13 @@ describe('InstallPluginDropdown', () => {
     expect(onSwitchToMarketplaceTab).toHaveBeenCalledTimes(1)
   })
 
-  it('opens the github installer when github is selected', () => {
+  it('opens the github installer when github is selected', async () => {
     render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
 
     fireEvent.click(screen.getByTestId('dropdown-trigger'))
     fireEvent.click(screen.getByText('plugin.source.github'))
 
-    expect(screen.getByTestId('github-modal')).toBeInTheDocument()
+    expect(await screen.findByTestId('github-modal')).toBeInTheDocument()
   })
 
   it('opens the local package installer when a file is selected', () => {
@@ -153,4 +204,40 @@ describe('InstallPluginDropdown', () => {
     expect(screen.getByTestId('local-modal')).toBeInTheDocument()
     expect(screen.getByText('plugin.difypkg')).toBeInTheDocument()
   })
+
+  it('triggers the hidden file input when local is selected from the menu', () => {
+    const clickSpy = vi.spyOn(HTMLInputElement.prototype, 'click')
+
+    render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
+
+    fireEvent.click(screen.getByTestId('dropdown-trigger'))
+    fireEvent.click(screen.getByText('plugin.source.local'))
+
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+    clickSpy.mockRestore()
+  })
+
+  it('closes the github installer when the modal requests close', async () => {
+    render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
+
+    fireEvent.click(screen.getByTestId('dropdown-trigger'))
+    fireEvent.click(screen.getByText('plugin.source.github'))
+    fireEvent.click(await screen.findByTestId('close-github-modal'))
+
+    expect(screen.queryByTestId('github-modal')).not.toBeInTheDocument()
+  })
+
+  it('closes the local package installer when the modal requests close', () => {
+    const { container } = render(<InstallPluginDropdown onSwitchToMarketplaceTab={vi.fn()} />)
+
+    fireEvent.click(screen.getByTestId('dropdown-trigger'))
+    fireEvent.change(container.querySelector('input[type="file"]')!, {
+      target: {
+        files: [new File(['content'], 'plugin.difypkg')],
+      },
+    })
+    fireEvent.click(screen.getByTestId('close-local-modal'))
+
+    expect(screen.queryByTestId('local-modal')).not.toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 4bfe495b93..9b98d16410 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -8,12 +8,13 @@ import { useTranslation } from 'react-i18next'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
@@ -77,61 +78,66 @@ const InstallPluginDropdown = ({
     }
   }, [plugin_installation_permission, enable_marketplace, t])
 
+  const handleInstallMethodSelect = (action: string) => {
+    if (action === 'local') {
+      fileInputRef.current?.click()
+      return
+    }
+
+    if (action === 'marketplace') {
+      onSwitchToMarketplaceTab()
+      return
+    }
+
+    queueMicrotask(() => {
+      setSelectedAction(action)
+    })
+  }
+
   return (
-    <PortalToFollowElem
-      open={isMenuOpen}
-      onOpenChange={setIsMenuOpen}
-      placement="bottom-start"
-      offset={4}
-    >
+    <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
       <div className="relative">
-        <PortalToFollowElemTrigger onClick={() => setIsMenuOpen(v => !v)}>
-          <Button
-            className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
-          >
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
+            />
+          )}
+        >
+          <>
             <RiAddLine className="h-4 w-4" />
             <span className="pl-1">{t('installPlugin', { ns: 'plugin' })}</span>
             <RiArrowDownSLine className="ml-1 h-4 w-4" />
-          </Button>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-1002">
-          <div className="shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 pb-2">
-            <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2 system-xs-medium-uppercase text-text-tertiary">
-              {t('installFrom', { ns: 'plugin' })}
-            </span>
-            <input
-              type="file"
-              ref={fileInputRef}
-              style={{ display: 'none' }}
-              onChange={handleFileChange}
-              accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
-            />
-            <div className="w-full">
-              {installMethods.map(({ icon: Icon, text, action }) => (
-                <div
-                  key={action}
-                  className="flex w-full cursor-pointer! items-center gap-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-                  onClick={() => {
-                    if (action === 'local') {
-                      fileInputRef.current?.click()
-                    }
-                    else if (action === 'marketplace') {
-                      onSwitchToMarketplaceTab()
-                      setIsMenuOpen(false)
-                    }
-                    else {
-                      setSelectedAction(action)
-                      setIsMenuOpen(false)
-                    }
-                  }}
-                >
-                  <Icon className="h-4 w-4 text-text-tertiary" />
-                  <span className="px-1 system-md-regular text-text-secondary">{text}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </PortalToFollowElemContent>
+          </>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={4}
+          popupClassName="w-[200px] pb-2"
+        >
+          <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-3 system-xs-medium-uppercase text-text-tertiary">
+            {t('installFrom', { ns: 'plugin' })}
+          </span>
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+            accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
+          />
+          {installMethods.map(({ icon: Icon, text, action }) => (
+            <DropdownMenuItem
+              key={action}
+              className="gap-1 px-2"
+              onClick={() => handleInstallMethodSelect(action)}
+            >
+              <div className="flex items-center gap-1">
+                <Icon className="h-4 w-4 text-text-tertiary" />
+                <span className="px-1 system-md-regular text-text-secondary">{text}</span>
+              </div>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
       </div>
       {selectedAction === 'github' && (
         <InstallFromGitHub
@@ -150,7 +156,7 @@ const InstallPluginDropdown = ({
       {/* {pluginLists.map((item: any) => (
         <div key={item.id} onClick={() => handleUninstall(item.id)}>{item.name} 卸载</div>
       ))} */}
-    </PortalToFollowElem>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
index 0b4773f796..962f39c326 100644
--- a/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx
@@ -2,6 +2,82 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import OperationDropdown from '../operation-dropdown'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      render,
+      onClick,
+    }: {
+      children: React.ReactNode
+      render?: React.ReactElement
+      onClick?: React.MouseEventHandler<HTMLElement>
+    }) => {
+      const { isOpen, setOpen } = useDropdownMenuContext()
+      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+        onClick?.(e)
+        setOpen(!isOpen)
+      }
+
+      if (render)
+        return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record<string, unknown>, children)
+
+      return <button data-testid="dropdown-trigger" onClick={handleClick}>{children}</button>
+    },
+    DropdownMenuContent: ({
+      children,
+      className,
+      popupClassName,
+    }: {
+      children: React.ReactNode
+      className?: string
+      popupClassName?: string
+    }) => {
+      const { isOpen } = useDropdownMenuContext()
+      return isOpen ? <div data-testid="dropdown-content" className={[className, popupClassName].filter(Boolean).join(' ')}>{children}</div> : null
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          data-testid="dropdown-item"
+          className={className}
+          onClick={(e) => {
+            onClick?.(e)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 describe('OperationDropdown', () => {
   const defaultProps = {
     onEdit: vi.fn(),
@@ -16,7 +92,7 @@ describe('OperationDropdown', () => {
 
     it('should render trigger button with more icon', () => {
       render(<OperationDropdown {...defaultProps} />)
-      const button = document.querySelector('button')
+      const button = screen.getByTestId('dropdown-trigger')
       expect(button).toBeInTheDocument()
       const svg = button?.querySelector('svg')
       expect(svg).toBeInTheDocument()
@@ -39,37 +115,27 @@ describe('OperationDropdown', () => {
     it('should open dropdown when trigger is clicked', async () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
 
-        // Dropdown content should be rendered
-        expect(screen.getByText('tools.mcp.operation.edit')).toBeInTheDocument()
-        expect(screen.getByText('tools.mcp.operation.remove')).toBeInTheDocument()
-      }
+      expect(screen.getByText('tools.mcp.operation.edit')).toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.operation.remove')).toBeInTheDocument()
     })
 
     it('should call onOpenChange when opened', () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        expect(onOpenChange).toHaveBeenCalledWith(true)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      expect(onOpenChange).toHaveBeenCalledWith(true)
     })
 
     it('should close dropdown when trigger is clicked again', async () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        fireEvent.click(trigger)
-        expect(onOpenChange).toHaveBeenLastCalledWith(false)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      expect(onOpenChange).toHaveBeenLastCalledWith(false)
     })
   })
 
@@ -78,62 +144,38 @@ describe('OperationDropdown', () => {
       const onEdit = vi.fn()
       render(<OperationDropdown {...defaultProps} onEdit={onEdit} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const editOption = screen.getByText('tools.mcp.operation.edit')
-        fireEvent.click(editOption)
-
-        expect(onEdit).toHaveBeenCalledTimes(1)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      fireEvent.click(screen.getByText('tools.mcp.operation.edit'))
+      expect(onEdit).toHaveBeenCalledTimes(1)
     })
 
     it('should call onRemove when remove option is clicked', () => {
       const onRemove = vi.fn()
       render(<OperationDropdown {...defaultProps} onRemove={onRemove} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const removeOption = screen.getByText('tools.mcp.operation.remove')
-        fireEvent.click(removeOption)
-
-        expect(onRemove).toHaveBeenCalledTimes(1)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      fireEvent.click(screen.getByText('tools.mcp.operation.remove'))
+      expect(onRemove).toHaveBeenCalledTimes(1)
     })
 
     it('should close dropdown after edit is clicked', () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        onOpenChange.mockClear()
-
-        const editOption = screen.getByText('tools.mcp.operation.edit')
-        fireEvent.click(editOption)
-
-        expect(onOpenChange).toHaveBeenCalledWith(false)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      onOpenChange.mockClear()
+      fireEvent.click(screen.getByText('tools.mcp.operation.edit'))
+      expect(onOpenChange).toHaveBeenCalledWith(false)
     })
 
     it('should close dropdown after remove is clicked', () => {
       const onOpenChange = vi.fn()
       render(<OperationDropdown {...defaultProps} onOpenChange={onOpenChange} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-        onOpenChange.mockClear()
-
-        const removeOption = screen.getByText('tools.mcp.operation.remove')
-        fireEvent.click(removeOption)
-
-        expect(onOpenChange).toHaveBeenCalledWith(false)
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      onOpenChange.mockClear()
+      fireEvent.click(screen.getByText('tools.mcp.operation.remove'))
+      expect(onOpenChange).toHaveBeenCalledWith(false)
     })
   })
 
@@ -141,39 +183,25 @@ describe('OperationDropdown', () => {
     it('should have correct dropdown width', () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const dropdown = document.querySelector('.w-\\[160px\\]')
-        expect(dropdown).toBeInTheDocument()
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      const dropdown = document.querySelector('.w-\\[160px\\]')
+      expect(dropdown).toBeInTheDocument()
     })
 
-    it('should have rounded-xl on dropdown', () => {
+    it('should render dropdown content through the shared popup shell', () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        const dropdown = document.querySelector('[class*="rounded-xl"][class*="border"]')
-        expect(dropdown).toBeInTheDocument()
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      expect(screen.getByTestId('dropdown-content')).toBeInTheDocument()
     })
 
-    it('should show destructive hover style on remove option', () => {
+    it('should apply destructive highlighted styles on remove option', () => {
       render(<OperationDropdown {...defaultProps} />)
 
-      const trigger = document.querySelector('button')
-      if (trigger) {
-        fireEvent.click(trigger)
-
-        // The text is in a div, and the hover style is on the parent div with group class
-        const removeOptionText = screen.getByText('tools.mcp.operation.remove')
-        const removeOptionContainer = removeOptionText.closest('.group')
-        expect(removeOptionContainer).toHaveClass('hover:bg-state-destructive-hover')
-      }
+      fireEvent.click(screen.getByTestId('dropdown-trigger'))
+      const removeOptionText = screen.getByText('tools.mcp.operation.remove')
+      const removeOptionContainer = removeOptionText.closest('button')
+      expect(removeOptionContainer).toHaveClass('data-highlighted:bg-state-destructive-hover')
     })
   })
 
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index 4f5468aebc..9a7ee67051 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -7,14 +7,15 @@ import {
   RiMoreFill,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   inCard?: boolean
@@ -30,60 +31,37 @@ const OperationDropdown: FC<Props> = ({
   onRemove,
 }) => {
   const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-    onOpenChange?.(v)
-  }, [doSetOpen])
-
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange])
 
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: !inCard ? -12 : 0,
-        crossAxis: !inCard ? 36 : 0,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <div>
-          <ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')}>
-            <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
-          </ActionButton>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div className="w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs">
-          <div
-            className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-base-hover"
-            onClick={() => {
-              onEdit()
-              handleTrigger()
-            }}
-          >
-            <RiEditLine className="h-4 w-4 text-text-tertiary" />
-            <div className="ml-2 system-md-regular text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
-          </div>
-          <div
-            className="group flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-destructive-hover"
-            onClick={() => {
-              onRemove()
-              handleTrigger()
-            }}
-          >
-            <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive-secondary" />
-            <div className="ml-2 system-md-regular text-text-secondary group-hover:text-text-destructive">{t('mcp.operation.remove', { ns: 'tools' })}</div>
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+    <DropdownMenu open={open} onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger
+        render={<ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')} />}
+      >
+        <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[160px]"
+      >
+        <DropdownMenuItem onClick={onEdit}>
+          <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
+          <div className="ml-2 system-md-regular text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive"
+          onClick={onRemove}
+        >
+          <RiDeleteBinLine className="h-4 w-4 shrink-0 text-inherit" />
+          <div className="ml-2 system-md-regular text-inherit">{t('mcp.operation.remove', { ns: 'tools' })}</div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(OperationDropdown)
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
index cce4c070a1..7df9cd091f 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
@@ -1,7 +1,7 @@
+import type * as React from 'react'
 import type { TriggerOption } from '../test-run-menu'
 import { fireEvent, render, renderHook, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { TriggerType } from '../test-run-menu'
 import {
   getNormalizedShortcutKey,
@@ -10,6 +10,33 @@ import {
   useShortcutMenu,
 } from '../test-run-menu-helpers'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement>, className?: string }) => (
+      <button type="button" className={className} onClick={onClick}>{children}</button>
+    ),
+  }
+})
+
 vi.mock('../shortcuts-name', () => ({
   default: ({ keys }: { keys: string[] }) => <span>{keys.join('+')}</span>,
 }))
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
index 2e3384b61e..40387d1e0e 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
@@ -5,25 +5,61 @@ import { act } from 'react'
 import * as React from 'react'
 import TestRunMenu, { TriggerType } from '../test-run-menu'
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({
-    children,
-  }: {
-    children: React.ReactNode
-  }) => <div>{children}</div>,
-  PortalToFollowElemTrigger: ({
-    children,
-    onClick,
-  }: {
-    children: React.ReactNode
-    onClick?: () => void
-  }) => <div onClick={onClick}>{children}</div>,
-  PortalToFollowElemContent: ({
-    children,
-  }: {
-    children: React.ReactNode
-  }) => <div>{children}</div>,
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      render,
+    }: {
+      children: React.ReactNode
+      render?: React.ReactElement
+    }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+
+      if (render)
+        return React.cloneElement(render, { onClick: () => setOpen(!open) } as Record<string, unknown>, children)
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuGroupLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => <div className={className}>{children}</div>,
+    DropdownMenuSeparator: ({ className }: { className?: string }) => <div className={className} data-testid="dropdown-separator" />,
+    DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement>, className?: string }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
 
 vi.mock('../shortcuts-name', () => ({
   default: ({ keys }: { keys: string[] }) => <span>{keys.join('+')}</span>,
@@ -95,10 +131,11 @@ describe('TestRunMenu', () => {
     act(() => {
       fireEvent.click(screen.getByRole('button', { name: 'Toggle via ref' }))
     })
+    expect(screen.getByText('~')).toBeInTheDocument()
+
     fireEvent.keyDown(window, { key: '0' })
 
     expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'run-all' }))
-    expect(screen.getByText('~')).toBeInTheDocument()
   })
 
   it('should ignore disabled options in the rendered menu', async () => {
diff --git a/web/app/components/workflow/header/test-run-menu-helpers.tsx b/web/app/components/workflow/header/test-run-menu-helpers.tsx
index dbe6b616a0..4a25cd87a6 100644
--- a/web/app/components/workflow/header/test-run-menu-helpers.tsx
+++ b/web/app/components/workflow/header/test-run-menu-helpers.tsx
@@ -6,6 +6,7 @@ import {
   isValidElement,
   useEffect,
 } from 'react'
+import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
 import ShortcutsName from '../shortcuts-name'
 
 export type ShortcutMapping = {
@@ -27,9 +28,8 @@ export const OptionRow = ({
   onSelect: (option: TriggerOption) => void
 }) => {
   return (
-    <div
-      key={option.id}
-      className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
+    <DropdownMenuItem
+      className="h-auto px-3 py-1.5 system-md-regular"
       onClick={() => onSelect(option)}
     >
       <div className="flex min-w-0 flex-1 items-center">
@@ -41,7 +41,7 @@ export const OptionRow = ({
       {shortcutKey && (
         <ShortcutsName keys={[shortcutKey]} className="ml-2" textColor="secondary" />
       )}
-    </div>
+    </DropdownMenuItem>
   )
 }
 
diff --git a/web/app/components/workflow/header/test-run-menu.tsx b/web/app/components/workflow/header/test-run-menu.tsx
index 1d496e4332..5b86c3c3f5 100644
--- a/web/app/components/workflow/header/test-run-menu.tsx
+++ b/web/app/components/workflow/header/test-run-menu.tsx
@@ -1,7 +1,7 @@
 import type { ShortcutMapping } from './test-run-menu-helpers'
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { OptionRow, SingleOptionTrigger, useShortcutMenu } from './test-run-menu-helpers'
 
 export enum TriggerType {
@@ -127,7 +127,7 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
   }), [hasSingleEnabledOption, runSoleOption])
 
   const renderOption = (option: TriggerOption) => {
-    return <OptionRow option={option} shortcutKey={shortcutKeyById.get(option.id)} onSelect={handleSelect} />
+    return <OptionRow key={option.id} option={option} shortcutKey={shortcutKeyById.get(option.id)} onSelect={handleSelect} />
   }
 
   const { hasUserInput, hasTriggers, hasRunAll } = useMemo(() => getMenuVisibility(options), [options])
@@ -141,27 +141,28 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
   }
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={{ mainAxis: 8, crossAxis: -4 }}
     >
-      <PortalToFollowElemTrigger asChild onClick={() => setOpen(!open)}>
-        <div style={{ userSelect: 'none' }}>
-          {children}
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-12">
-        <div className="w-[284px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
-          <div className="mb-2 px-3 pt-2 text-sm font-medium text-text-primary">
+      <DropdownMenuTrigger render={<div style={{ userSelect: 'none' }} />}>
+        {children}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={8}
+        alignOffset={-4}
+        popupClassName="w-[284px] p-1"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuGroupLabel className="mb-1 px-3 pt-2 text-sm font-medium text-text-primary">
             {t('common.chooseStartNodeToRun', { ns: 'workflow' })}
-          </div>
+          </DropdownMenuGroupLabel>
           <div>
             {hasUserInput && renderOption(options.userInput!)}
 
             {(hasTriggers || hasRunAll) && hasUserInput && (
-              <div className="mx-3 my-1 h-px bg-divider-subtle" />
+              <DropdownMenuSeparator className="mx-3" />
             )}
 
             {hasRunAll && renderOption(options.runAll!)}
@@ -170,9 +171,9 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
               .filter(trigger => trigger.enabled !== false)
               .map(trigger => renderOption(trigger))}
           </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 })
 
diff --git a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
index 63813c8a46..f59de9e874 100644
--- a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
@@ -4,6 +4,74 @@ import { VarType } from '@/app/components/workflow/types'
 import { WriteMode } from '../../types'
 import OperationSelector from '../operation-selector'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({
+      children,
+      className,
+      disabled,
+    }: {
+      children: React.ReactNode
+      className?: string
+      disabled?: boolean
+    }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          disabled={disabled}
+          onClick={() => !disabled && setOpen(!open)}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuGroupLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
+    DropdownMenuItem: ({
+      children,
+      onClick,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 describe('assigner/operation-selector', () => {
   it('shows numeric write modes and emits the selected operation', async () => {
     const user = userEvent.setup()
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index 8bce904b74..333aa5b2cd 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -9,12 +9,15 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuGroupLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { getOperationItems, isOperationItem } from '../utils'
 
 type OperationSelectorProps = {
@@ -49,65 +52,57 @@ const OperationSelector: FC<OperationSelectorProps> = ({
   const selectedItem = items.find(item => item.value === value)
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => !disabled && setOpen(v => !v)}
+      <DropdownMenuTrigger
+        disabled={disabled}
+        className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1', disabled ? 'cursor-not-allowed bg-components-input-bg-disabled!' : 'cursor-pointer hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', className)}
       >
-        <div
-          className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1', disabled ? 'cursor-not-allowed bg-components-input-bg-disabled!' : 'cursor-pointer hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', className)}
-        >
-          <div className="flex items-center p-1">
-            <span
-              className={`truncate overflow-hidden system-sm-regular text-ellipsis
+        <div className="flex items-center p-1">
+          <span
+            className={`truncate overflow-hidden system-sm-regular text-ellipsis
                 ${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
-            >
-              {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
-            </span>
-          </div>
-          <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
+          >
+            {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
+          </span>
         </div>
-      </PortalToFollowElemTrigger>
+        <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
+      </DropdownMenuTrigger>
 
-      <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
-        <div className="flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
-          <div className="flex flex-col items-start self-stretch p-1">
-            <div className="flex items-start self-stretch px-3 pt-1 pb-0.5">
-              <div className="flex grow system-xs-medium-uppercase text-text-tertiary">{t('nodes.assigner.operations.title', { ns: 'workflow' })}</div>
-            </div>
-            {items.map(item => (
-              !isOperationItem(item)
-                ? (
-                    <Divider key="divider" className="my-1" />
-                  )
-                : (
-                    <div
-                      key={item.value}
-                      className={cn('flex items-center gap-1 self-stretch rounded-lg px-2 py-1', 'cursor-pointer hover:bg-state-base-hover')}
-                      onClick={() => {
-                        onSelect(item)
-                        setOpen(false)
-                      }}
-                    >
-                      <div className="flex min-h-5 grow items-center gap-1 px-1">
-                        <span className="flex grow system-sm-medium text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
-                      </div>
-                      {item.value === value && (
-                        <div className="flex items-center justify-center">
-                          <RiCheckLine className="h-4 w-4 text-text-accent" />
-                        </div>
-                      )}
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName={cn('w-[140px]', popupClassName)}
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuGroupLabel>{t('nodes.assigner.operations.title', { ns: 'workflow' })}</DropdownMenuGroupLabel>
+          {items.map(item => (
+            !isOperationItem(item)
+              ? (
+                  <DropdownMenuSeparator key="divider" />
+                )
+              : (
+                  <DropdownMenuItem
+                    key={item.value}
+                    className="gap-1 px-2 py-1"
+                    onClick={() => onSelect(item)}
+                  >
+                    <div className="flex min-h-5 grow items-center gap-1 px-1">
+                      <span className="flex grow system-sm-medium text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
                     </div>
-                  )
-            ))}
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+                    {item.value === value && (
+                      <div className="flex items-center justify-center">
+                        <RiCheckLine className="h-4 w-4 text-text-accent" />
+                      </div>
+                    )}
+                  </DropdownMenuItem>
+                )
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
new file mode 100644
index 0000000000..c5aeabbaaa
--- /dev/null
+++ b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
@@ -0,0 +1,309 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { act } from 'react'
+import MoreActions from '../more-actions'
+
+const mockToPng = vi.fn()
+const mockToJpeg = vi.fn()
+const mockToSvg = vi.fn()
+const mockDownloadUrl = vi.fn()
+const mockSetViewport = vi.fn()
+const mockGetNodesReadOnly = vi.fn()
+const {
+  mockAppStoreState,
+  mockWorkflowState,
+} = vi.hoisted(() => ({
+  mockAppStoreState: {
+    appSidebarExpand: 'collapse',
+  },
+  mockWorkflowState: {
+    knowledgeName: '',
+    appName: 'Demo App',
+    maximizeCanvas: false,
+  },
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, className }: { children: React.ReactNode, className?: string }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+      return (
+        <button type="button" className={className} onClick={() => setOpen(!open)}>
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({
+      children,
+      onClick,
+      className,
+    }: {
+      children: React.ReactNode
+      onClick?: React.MouseEventHandler<HTMLButtonElement>
+      className?: string
+    }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          className={className}
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+    DropdownMenuSeparator: ({ className }: { className?: string }) => <div className={className} data-testid="dropdown-separator" />,
+  }
+})
+
+vi.mock('html-to-image', () => ({
+  toPng: (...args: unknown[]) => mockToPng(...args),
+  toJpeg: (...args: unknown[]) => mockToJpeg(...args),
+  toSvg: (...args: unknown[]) => mockToSvg(...args),
+}))
+
+vi.mock('reactflow', () => ({
+  getNodesBounds: () => ({ x: 0, y: 0, width: 240, height: 120 }),
+  useReactFlow: () => ({
+    getNodes: () => [{ id: 'node-1' }],
+    getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+    setViewport: mockSetViewport,
+  }),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: typeof mockAppStoreState) => unknown) => selector(mockAppStoreState),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: typeof mockWorkflowState) => unknown) => selector(mockWorkflowState),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesReadOnly: () => ({
+    getNodesReadOnly: mockGetNodesReadOnly,
+  }),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadUrl: (...args: unknown[]) => mockDownloadUrl(...args),
+}))
+
+vi.mock('../tip-popup', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('@/app/components/base/image-uploader/image-preview', () => ({
+  default: ({ title, onCancel }: { title: string, onCancel: () => void }) => (
+    <div data-testid="image-preview">
+      <span>{title}</span>
+      <button type="button" onClick={onCancel}>close-preview</button>
+    </div>
+  ),
+}))
+
+describe('MoreActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+    mockGetNodesReadOnly.mockReturnValue(false)
+    mockToPng.mockResolvedValue('data:image/png;base64,current')
+    mockToJpeg.mockResolvedValue('data:image/jpeg;base64,current')
+    mockToSvg.mockResolvedValue('data:image/svg+xml;base64,current')
+    mockAppStoreState.appSidebarExpand = 'collapse'
+    mockWorkflowState.knowledgeName = ''
+    mockWorkflowState.appName = 'Demo App'
+    mockWorkflowState.maximizeCanvas = false
+
+    document.body.innerHTML = ''
+    const viewport = document.createElement('div')
+    viewport.className = 'react-flow__viewport'
+    document.body.appendChild(viewport)
+  })
+
+  it('opens the menu and exports the current view as png', async () => {
+    const user = userEvent.setup()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0])
+
+    await waitFor(() => {
+      expect(mockToPng).toHaveBeenCalledTimes(1)
+    })
+    expect(mockDownloadUrl).toHaveBeenCalledWith({
+      url: 'data:image/png;base64,current',
+      fileName: 'Demo App.png',
+    })
+  })
+
+  it('does not open the menu when the workflow is read only', async () => {
+    const user = userEvent.setup()
+    mockGetNodesReadOnly.mockReturnValue(true)
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.queryByText('workflow.common.exportImage')).not.toBeInTheDocument()
+  })
+
+  it('shows a preview when exporting the whole workflow', async () => {
+    vi.useFakeTimers()
+
+    render(<MoreActions />)
+
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1])
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300)
+    })
+
+    expect(screen.getByTestId('image-preview')).toHaveTextContent('Demo App-whole-workflow.png')
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+    expect(mockSetViewport).toHaveBeenCalledTimes(2)
+    expect(mockDownloadUrl).toHaveBeenCalledWith({
+      url: 'data:image/png;base64,current',
+      fileName: 'Demo App-whole-workflow.png',
+    })
+  })
+
+  it.each([
+    ['workflow.common.exportJPEG', mockToJpeg, 'Demo App.jpeg'],
+    ['workflow.common.exportSVG', mockToSvg, 'Demo App.svg'],
+  ])('exports the current view with %s', async (label, exporter, fileName) => {
+    const user = userEvent.setup()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText(label)[0])
+
+    await waitFor(() => {
+      expect(exporter).toHaveBeenCalledTimes(1)
+    })
+    expect(mockDownloadUrl).toHaveBeenCalledWith({
+      url: expect.any(String),
+      fileName,
+    })
+  })
+
+  it('exports the whole workflow as svg when the canvas is maximized', async () => {
+    vi.useFakeTimers()
+    mockWorkflowState.maximizeCanvas = true
+
+    render(<MoreActions />)
+
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getAllByText('workflow.common.exportSVG')[1])
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(300)
+    })
+
+    expect(mockToSvg).toHaveBeenCalledTimes(1)
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+    expect(mockSetViewport).toHaveBeenCalledTimes(2)
+    expect(screen.getByTestId('image-preview')).toHaveTextContent('Demo App-whole-workflow.svg')
+  })
+
+  it('returns early when there is no app or knowledge name', async () => {
+    const user = userEvent.setup()
+    mockWorkflowState.appName = ''
+    mockWorkflowState.knowledgeName = ''
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0])
+
+    expect(mockToPng).not.toHaveBeenCalled()
+    expect(mockDownloadUrl).not.toHaveBeenCalled()
+  })
+
+  it('returns early when the viewport element is missing', async () => {
+    const user = userEvent.setup()
+    document.querySelector('.react-flow__viewport')?.remove()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0])
+
+    expect(mockToPng).not.toHaveBeenCalled()
+    expect(mockDownloadUrl).not.toHaveBeenCalled()
+  })
+
+  it('returns early when the workflow becomes read only before exporting', async () => {
+    const user = userEvent.setup()
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    mockGetNodesReadOnly.mockReturnValue(true)
+    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0])
+
+    expect(mockToJpeg).not.toHaveBeenCalled()
+    expect(mockDownloadUrl).not.toHaveBeenCalled()
+  })
+
+  it('logs export failures and lets the preview close', async () => {
+    const user = userEvent.setup()
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockToJpeg.mockRejectedValueOnce(new Error('boom'))
+
+    render(<MoreActions />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0])
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith('Export image failed:', expect.any(Error))
+    })
+    expect(screen.queryByTestId('image-preview')).not.toBeInTheDocument()
+
+    mockToPng.mockResolvedValueOnce('data:image/png;base64,current')
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1])
+    await waitFor(() => {
+      expect(screen.getByTestId('image-preview')).toBeInTheDocument()
+    })
+    await user.click(screen.getByText('close-preview'))
+    expect(screen.queryByTestId('image-preview')).not.toBeInTheDocument()
+
+    consoleErrorSpy.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 5e71cc658b..66dbed1a91 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -14,10 +14,12 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useStore } from '@/app/components/workflow/store'
 import { downloadUrl } from '@/utils/download'
 import { useNodesReadOnly } from '../hooks'
@@ -37,6 +39,7 @@ const MoreActions: FC = () => {
   const { appSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
   })))
+  const isReadOnly = getNodesReadOnly()
 
   const crossAxisOffset = useMemo(() => {
     if (maximizeCanvas)
@@ -161,93 +164,67 @@ const MoreActions: FC = () => {
     }
   }, [getNodesReadOnly, appName, reactFlow, knowledgeName])
 
-  const handleTrigger = useCallback(() => {
-    if (getNodesReadOnly())
-      return
-
-    setOpen(v => !v)
-  }, [getNodesReadOnly])
-
   return (
     <>
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
-        onOpenChange={setOpen}
-        placement="bottom-end"
-        offset={{
-          mainAxis: -200,
-          crossAxis: crossAxisOffset,
+        onOpenChange={(nextOpen) => {
+          if (isReadOnly) {
+            setOpen(false)
+            return
+          }
+          setOpen(nextOpen)
         }}
       >
-        <PortalToFollowElemTrigger>
+        <DropdownMenuTrigger
+          className={cn(
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            isReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+          )}
+        >
           <TipPopup title={t('common.moreActions', { ns: 'workflow' })}>
-            <div
-              className={cn(
-                'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
-                `${getNodesReadOnly() && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
-              )}
-              onClick={handleTrigger}
-            >
-              <RiMoreFill className="h-4 w-4" />
-            </div>
+            <RiMoreFill className="h-4 w-4" />
           </TipPopup>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-10">
-          <div className="min-w-[180px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg">
-            <div className="p-1">
-              <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary">
-                <RiExportLine className="h-3 w-3" />
-                {t('common.exportImage', { ns: 'workflow' })}
-              </div>
-              <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
-                {t('common.currentView', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('png')}
-              >
-                {t('common.exportPNG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('jpeg')}
-              >
-                {t('common.exportJPEG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('svg')}
-              >
-                {t('common.exportSVG', { ns: 'workflow' })}
-              </div>
-
-              <div className="border-border-divider mx-2 my-1 border-t" />
-
-              <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
-                {t('common.currentWorkflow', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('png', true)}
-              >
-                {t('common.exportPNG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('jpeg', true)}
-              >
-                {t('common.exportJPEG', { ns: 'workflow' })}
-              </div>
-              <div
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular hover:bg-state-base-hover"
-                onClick={() => handleExportImage('svg', true)}
-              >
-                {t('common.exportSVG', { ns: 'workflow' })}
-              </div>
-            </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={-200}
+          alignOffset={crossAxisOffset}
+          popupClassName="min-w-[180px]"
+        >
+          <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary">
+            <RiExportLine className="h-3 w-3" />
+            {t('common.exportImage', { ns: 'workflow' })}
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
+            {t('common.currentView', { ns: 'workflow' })}
+          </div>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('png')}>
+            {t('common.exportPNG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('jpeg')}>
+            {t('common.exportJPEG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('svg')}>
+            {t('common.exportSVG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator className="mx-2" />
+
+          <div className="px-2 py-1 text-xs font-medium text-text-tertiary">
+            {t('common.currentWorkflow', { ns: 'workflow' })}
+          </div>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('png', true)}>
+            {t('common.exportPNG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('jpeg', true)}>
+            {t('common.exportJPEG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="system-md-regular" onClick={() => handleExportImage('svg', true)}>
+            {t('common.exportSVG', { ns: 'workflow' })}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       {previewUrl && (
         <ImagePreview
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
index 02b1f8ee34..844e189067 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/__tests__/menu-item.spec.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { DropdownMenu, DropdownMenuContent } from '@/app/components/base/ui/dropdown-menu'
 import { VersionHistoryContextMenuOptions } from '../../../../types'
 import MenuItem from '../menu-item'
 
@@ -9,14 +10,18 @@ describe('MenuItem', () => {
     const onClick = vi.fn()
 
     render(
-      <MenuItem
-        item={{
-          key: VersionHistoryContextMenuOptions.delete,
-          name: 'Delete',
-        }}
-        isDestructive
-        onClick={onClick}
-      />,
+      <DropdownMenu open onOpenChange={vi.fn()}>
+        <DropdownMenuContent>
+          <MenuItem
+            item={{
+              key: VersionHistoryContextMenuOptions.delete,
+              name: 'Delete',
+            }}
+            isDestructive
+            onClick={onClick}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>,
     )
 
     await user.click(screen.getByText('Delete'))
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
index a635e80bab..f063902753 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -1,14 +1,13 @@
 import type { FC } from 'react'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback } from 'react'
-import Divider from '@/app/components/base/divider'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import MenuItem from './menu-item'
 import useContextMenu from './use-context-menu'
@@ -28,58 +27,44 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
     options,
   } = useContextMenu(props)
 
-  const handleClickTrigger = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    setOpen(v => !v)
-  }, [setOpen])
-
   return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger>
-        <Button size="small" className="px-1" onClick={handleClickTrigger}>
-          <RiMoreFill className="h-4 w-4" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
-        <div className="flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
-          <div className="flex flex-col p-1">
-            {
-              options.map((option) => {
-                return (
-                  <MenuItem
-                    key={option.key}
-                    item={option}
-                    onClick={handleClickMenuItem.bind(null, option.key)}
-                  />
-                )
-              })
-            }
-          </div>
-          {
-            isShowDelete && (
-              <>
-                <Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
-                <div className="p-1">
-                  <MenuItem
-                    item={deleteOperation}
-                    isDestructive
-                    onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
-                  />
-                </div>
-              </>
-            )
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      <DropdownMenuTrigger
+        render={<Button size="small" className="px-1" onClick={e => e.stopPropagation()} />}
+      >
+        <RiMoreFill className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[184px] shadow-shadow-shadow-5"
+      >
+        {
+          options.map(option => (
+            <MenuItem
+              key={option.key}
+              item={option}
+              onClick={handleClickMenuItem.bind(null, option.key)}
+            />
+          ))
+        }
+        {
+          isShowDelete && (
+            <>
+              <DropdownMenuSeparator className="my-0" />
+              <MenuItem
+                item={deleteOperation}
+                isDestructive
+                onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
+              />
+            </>
+          )
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
index 5a3f21272f..2c393dea77 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { VersionHistoryContextMenuOptions } from '../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
+import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
 
 type MenuItemProps = {
   item: {
@@ -18,23 +19,25 @@ const MenuItem: FC<MenuItemProps> = ({
   isDestructive = false,
 }) => {
   return (
-    <div
+    <DropdownMenuItem
       className={cn(
-        'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5',
-        isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
+        'justify-between px-2 py-1.5',
+        isDestructive && 'data-highlighted:bg-state-destructive-hover',
       )}
-      onClick={() => {
+      destructive={isDestructive}
+      onClick={(event) => {
+        event.stopPropagation()
         onClick(item.key)
       }}
     >
       <div className={cn(
         'flex-1 system-md-regular text-text-primary',
-        isDestructive && 'hover:text-text-destructive',
+        isDestructive && 'text-inherit',
       )}
       >
         {item.name}
       </div>
-    </div>
+    </DropdownMenuItem>
   )
 }
 
diff --git a/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx b/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
index d109635af4..35b32a5ce6 100644
--- a/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
+++ b/web/app/components/workflow/run/agent-log/__tests__/agent-log-nav-more.spec.tsx
@@ -3,6 +3,52 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import AgentLogNavMore from '../agent-log-nav-more'
 
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+  const React = await import('react')
+  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+  const useDropdownMenuContext = () => {
+    const context = React.use(DropdownMenuContext)
+    if (!context)
+      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+    return context
+  }
+
+  return {
+    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
+        <div>{children}</div>
+      </DropdownMenuContext>
+    ),
+    DropdownMenuTrigger: ({ children, render }: { children: React.ReactNode, render?: React.ReactElement }) => {
+      const { open, setOpen } = useDropdownMenuContext()
+
+      if (render)
+        return React.cloneElement(render, { onClick: () => setOpen(!open) } as Record<string, unknown>, children)
+
+      return <button type="button" onClick={() => setOpen(!open)}>{children}</button>
+    },
+    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+      const { open } = useDropdownMenuContext()
+      return open ? <div>{children}</div> : null
+    },
+    DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
+      const { setOpen } = useDropdownMenuContext()
+      return (
+        <button
+          type="button"
+          onClick={(event) => {
+            onClick?.(event)
+            setOpen(false)
+          }}
+        >
+          {children}
+        </button>
+      )
+    },
+  }
+})
+
 const createLogItem = (overrides: Partial<AgentLogItemWithChildren> = {}): AgentLogItemWithChildren => ({
   message_id: 'message-1',
   label: 'Planner',
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index 8bdb6ad227..77f3c778a6 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -1,12 +1,13 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiMoreLine } from '@remixicon/react'
 import { useState } from 'react'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type AgentLogNavMoreProps = {
   options: AgentLogItemWithChildren[]
@@ -19,42 +20,39 @@ const AgentLogNavMore = ({
   const [open, setOpen] = useState(false)
 
   return (
-    <PortalToFollowElem
-      placement="bottom-start"
-      offset={{
-        mainAxis: 2,
-        crossAxis: -54,
-      }}
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <Button
-          className="h-6 w-6"
-          variant="ghost-accent"
-        >
-          <RiMoreLine className="h-4 w-4" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
-        <div className="w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          {
-            options.map(option => (
-              <div
-                key={option.message_id}
-                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular text-text-secondary hover:bg-state-base-hover"
-                onClick={() => {
-                  onShowAgentOrToolLog(option)
-                  setOpen(false)
-                }}
-              >
-                {option.label}
-              </div>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            className="h-6 w-6"
+            variant="ghost-accent"
+          />
+        )}
+      >
+        <RiMoreLine className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={2}
+        alignOffset={-54}
+        popupClassName="w-[136px] p-1"
+      >
+        {
+          options.map(option => (
+            <DropdownMenuItem
+              key={option.message_id}
+              className="system-md-regular"
+              onClick={() => onShowAgentOrToolLog(option)}
+            >
+              {option.label}
+            </DropdownMenuItem>
+          ))
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 

From 79d87e600022e4f6a8e1400786f9d9b65e558a9c Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Thu, 16 Apr 2026 16:40:26 +0800
Subject: [PATCH 106/108] refactor(web): replace Dropdown component with
 DropdownMenu in various components

- Updated DebugItem, MobileOperationDropdown, and Operation components to utilize DropdownMenu for improved dropdown functionality.
- Removed deprecated Dropdown component references and adjusted related tests accordingly.
- Enhanced user interactions and accessibility across dropdown menus.
---
 .../__tests__/dropdown-callbacks.spec.tsx     |  41 ++--
 .../dataset-info/__tests__/index.spec.tsx     |   8 +-
 .../app-sidebar/dataset-info/dropdown.tsx     |  58 ++---
 .../__tests__/debug-item.spec.tsx             | 121 ++++------
 .../debug-with-multiple-model/debug-item.tsx  | 135 ++++++-----
 .../components/base/action-button/index.tsx   |   4 +-
 .../mobile-operation-dropdown.spec.tsx        |  23 +-
 .../header/__tests__/operation.spec.tsx       |  12 +-
 .../header/mobile-operation-dropdown.tsx      |  60 +++--
 .../chat-with-history/header/operation.tsx    |  77 +++---
 .../sidebar/__tests__/operation.spec.tsx      |  75 +++++-
 .../chat-with-history/sidebar/operation.tsx   | 109 +++++----
 .../base/dropdown/__tests__/index.spec.tsx    | 225 ------------------
 .../base/dropdown/index.stories.tsx           |  88 -------
 web/app/components/base/dropdown/index.tsx    | 122 ----------
 .../dropdown/__tests__/index.spec.tsx         |   4 +-
 .../header/breadcrumbs/dropdown/index.tsx     |  36 ++-
 .../__tests__/operator.spec.tsx               |  43 ++--
 .../data-source-page-new/operator.tsx         | 163 +++++--------
 .../plugin-tasks/__tests__/index.spec.tsx     |  44 ++++
 .../plugin-page/plugin-tasks/index.tsx        |  32 +--
 .../__tests__/menu-dropdown.spec.tsx          |  40 ++++
 .../share/text-generation/menu-dropdown.tsx   | 135 +++++------
 .../__tests__/action.spec.tsx                 | 124 ++++++++++
 .../market-place-plugin/action.tsx            |  65 ++---
 web/docs/overlay-migration.md                 |   1 -
 web/eslint.constants.mjs                      |   8 -
 27 files changed, 835 insertions(+), 1018 deletions(-)
 delete mode 100644 web/app/components/base/dropdown/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/dropdown/index.stories.tsx
 delete mode 100644 web/app/components/base/dropdown/index.tsx
 create mode 100644 web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx

diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
index 6ed10609e9..b514b6e095 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
@@ -137,14 +137,6 @@ vi.mock('@/app/components/datasets/rename-modal', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
 describe('Dropdown callback coverage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -159,7 +151,7 @@ describe('Dropdown callback coverage', () => {
     const user = userEvent.setup()
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.edit'))
 
     expect(screen.getByTestId('rename-modal')).toBeInTheDocument()
@@ -175,7 +167,7 @@ describe('Dropdown callback coverage', () => {
     const user = userEvent.setup()
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.edit'))
 
     expect(screen.getByTestId('rename-modal')).toBeInTheDocument()
@@ -190,7 +182,7 @@ describe('Dropdown callback coverage', () => {
     const user = userEvent.setup()
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
@@ -210,7 +202,7 @@ describe('Dropdown callback coverage', () => {
 
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
@@ -224,7 +216,7 @@ describe('Dropdown callback coverage', () => {
 
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('datasetPipeline.operations.exportPipeline'))
 
     await waitFor(() => {
@@ -232,6 +224,27 @@ describe('Dropdown callback coverage', () => {
     })
   })
 
+  it('should not attempt export when the dataset has no pipeline id', async () => {
+    const user = userEvent.setup()
+    mockDataset = createDataset({ pipeline_id: '' })
+
+    render(<Dropdown expand={false} />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByText('datasetPipeline.operations.exportPipeline'))
+
+    expect(mockExportPipeline).not.toHaveBeenCalled()
+  })
+
+  it('should render and open correctly when collapsed', async () => {
+    const user = userEvent.setup()
+    render(<Dropdown expand={false} />)
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+  })
+
   it('should surface the backend message when checking app usage fails', async () => {
     const user = userEvent.setup()
     mockCheckIsUsedInApp.mockRejectedValueOnce({
@@ -240,7 +253,7 @@ describe('Dropdown callback coverage', () => {
 
     render(<Dropdown expand />)
 
-    await user.click(screen.getByTestId('portal-trigger'))
+    await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
index bb85e00c14..e6d3f94e2a 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
@@ -1,5 +1,4 @@
 import type { DataSet } from '@/models/datasets'
-import { RiEditLine } from '@remixicon/react'
 import { createEvent, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
@@ -22,6 +21,7 @@ const mockInvalidDatasetDetail = vi.fn()
 const mockExportPipeline = vi.fn()
 const mockCheckIsUsedInApp = vi.fn()
 const mockDeleteDataset = vi.fn()
+const TestEditIcon = () => <span aria-hidden className="i-ri-edit-line" />
 
 const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
   id: 'dataset-1',
@@ -210,7 +210,7 @@ describe('MenuItem', () => {
       const user = userEvent.setup()
       const handleClick = vi.fn()
       // Arrange
-      render(<MenuItem name="Edit" Icon={RiEditLine} handleClick={handleClick} />)
+      render(<MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />)
 
       // Act
       await user.click(screen.getByText('Edit'))
@@ -225,7 +225,7 @@ describe('MenuItem', () => {
 
       render(
         <div onClick={parentClick}>
-          <MenuItem name="Edit" Icon={RiEditLine} handleClick={handleClick} />
+          <MenuItem name="Edit" Icon={TestEditIcon} handleClick={handleClick} />
         </div>,
       )
 
@@ -236,7 +236,7 @@ describe('MenuItem', () => {
     })
 
     it('should not crash when no click handler is provided', () => {
-      render(<MenuItem name="Edit" Icon={RiEditLine} />)
+      render(<MenuItem name="Edit" Icon={TestEditIcon} />)
 
       const event = createEvent.click(screen.getByText('Edit'))
       fireEvent(screen.getByText('Edit'), event)
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 9abebfcc88..e69b3d7e32 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -1,6 +1,5 @@
 import type { DataSet } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -14,7 +13,6 @@ import { useInvalid } from '@/service/use-base'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -24,6 +22,11 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '../../base/ui/alert-dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../../base/ui/dropdown-menu'
 import RenameDatasetModal from '../../datasets/rename-modal'
 import Menu from './menu'
 
@@ -44,10 +47,6 @@ const DropDown = ({
   const isCurrentWorkspaceDatasetOperator = useAppContextWithSelector(state => state.isCurrentWorkspaceDatasetOperator)
   const dataset = useDatasetDetailContextWithSelector(state => state.dataset) as DataSet
 
-  const handleTrigger = useCallback(() => {
-    setOpen(prev => !prev)
-  }, [])
-
   const invalidDatasetList = useInvalidDatasetList()
   const invalidDatasetDetail = useInvalid([...datasetDetailQueryKeyPrefix, dataset.id])
 
@@ -57,9 +56,11 @@ const DropDown = ({
   }, [invalidDatasetDetail, invalidDatasetList])
 
   const openRenameModal = useCallback(() => {
-    setShowRenameModal(true)
-    handleTrigger()
-  }, [handleTrigger])
+    setOpen(false)
+    queueMicrotask(() => {
+      setShowRenameModal(true)
+    })
+  }, [])
 
   const { mutateAsync: exportPipelineConfig } = useExportPipelineDSL()
 
@@ -67,7 +68,7 @@ const DropDown = ({
     const { pipeline_id, name } = dataset
     if (!pipeline_id)
       return
-    handleTrigger()
+    setOpen(false)
     try {
       const { data } = await exportPipelineConfig({
         pipelineId: pipeline_id,
@@ -79,9 +80,10 @@ const DropDown = ({
     catch {
       toast(t('exportFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [dataset, exportPipelineConfig, handleTrigger, t])
+  }, [dataset, exportPipelineConfig, t])
 
   const detectIsUsedByApp = useCallback(async () => {
+    setOpen(false)
     try {
       const { is_using: isUsedByApp } = await checkIsUsedInApp(dataset.id)
       setConfirmMessage(isUsedByApp ? t('datasetUsedByApp', { ns: 'dataset' })! : t('deleteDatasetConfirmContent', { ns: 'dataset' })!)
@@ -91,10 +93,7 @@ const DropDown = ({
       const res = await e.json()
       toast(res?.message || 'Unknown error', { type: 'error' })
     }
-    finally {
-      handleTrigger()
-    }
-  }, [dataset.id, handleTrigger, t])
+  }, [dataset.id, t])
 
   const onConfirmDelete = useCallback(async () => {
     try {
@@ -109,32 +108,27 @@ const DropDown = ({
   }, [dataset.id, replace, invalidDatasetList, t])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement={expand ? 'bottom-end' : 'right'}
-      offset={expand
-        ? {
-            mainAxis: 4,
-            crossAxis: 10,
-          }
-        : {
-            mainAxis: 4,
-          }}
     >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <ActionButton className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md')}>
-          <RiMoreFill className="size-4" />
+      <DropdownMenuTrigger render={<div />}>
+        <ActionButton className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md', open && 'bg-state-base-hover')}>
+          <span aria-hidden className="i-ri-more-fill size-4" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-60">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement={expand ? 'bottom-end' : 'right-start'}
+        sideOffset={4}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <Menu
           showDelete={!isCurrentWorkspaceDatasetOperator}
           openRenameModal={openRenameModal}
           handleExportPipeline={handleExportPipeline}
           detectIsUsedByApp={detectIsUsedByApp}
         />
-      </PortalToFollowElemContent>
+      </DropdownMenuContent>
       {showRenameModal && (
         <RenameDatasetModal
           show={showRenameModal}
@@ -163,7 +157,7 @@ const DropDown = ({
           </AlertDialogActions>
         </AlertDialogContent>
       </AlertDialog>
-    </PortalToFollowElem>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx
index 19c5fbf3fa..bc433a8f9d 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/__tests__/debug-item.spec.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react'
 import type { ModelAndParameter } from '../../types'
-import type { Item } from '@/app/components/base/dropdown'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { AppModeEnum } from '@/types/app'
 import DebugItem from '../debug-item'
@@ -10,12 +10,6 @@ const mockUseDebugConfigurationContext = vi.fn()
 const mockUseDebugWithMultipleModelContext = vi.fn()
 const mockUseProviderContext = vi.fn()
 
-let capturedDropdownProps: {
-  onSelect: (item: Item) => void
-  items: Item[]
-  secondItems?: Item[]
-} | null = null
-
 let capturedModelParameterTriggerProps: {
   modelAndParameter: ModelAndParameter
 } | null = null
@@ -51,34 +45,6 @@ vi.mock('../model-parameter-trigger', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/dropdown', () => ({
-  default: (props: { onSelect: (item: Item) => void, items: Item[], secondItems?: Item[] }) => {
-    capturedDropdownProps = props
-    return (
-      <div data-testid="dropdown">
-        {props.items.map(item => (
-          <button
-            key={item.value}
-            data-testid={`dropdown-item-${item.value}`}
-            onClick={() => props.onSelect(item)}
-          >
-            {item.text}
-          </button>
-        ))}
-        {props.secondItems?.map(item => (
-          <button
-            key={item.value}
-            data-testid={`dropdown-second-item-${item.value}`}
-            onClick={() => props.onSelect(item)}
-          >
-            {item.text}
-          </button>
-        ))}
-      </div>
-    )
-  },
-}))
-
 const createModelAndParameter = (overrides: Partial<ModelAndParameter> = {}): ModelAndParameter => ({
   id: 'model-1',
   model: 'gpt-3.5-turbo',
@@ -117,7 +83,6 @@ const renderComponent = (props: Partial<DebugItemProps> = {}) => {
 describe('DebugItem', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    capturedDropdownProps = null
     capturedModelParameterTriggerProps = null
 
     mockUseDebugConfigurationContext.mockReturnValue({
@@ -137,12 +102,18 @@ describe('DebugItem', () => {
     })
   })
 
+  const openMenu = async () => {
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button'))
+    return user
+  }
+
   describe('rendering', () => {
     it('should render with basic props', () => {
       renderComponent()
 
       expect(screen.getByTestId('model-parameter-trigger')).toBeInTheDocument()
-      expect(screen.getByTestId('dropdown')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeInTheDocument()
     })
 
     it('should display correct index number', () => {
@@ -280,7 +251,7 @@ describe('DebugItem', () => {
   })
 
   describe('dropdown menu', () => {
-    it('should show duplicate option when less than 4 models', () => {
+    it('should show duplicate option when less than 4 models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [createModelAndParameter()],
         onMultipleModelConfigsChange: vi.fn(),
@@ -288,13 +259,12 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).toContainEqual(
-        expect.objectContaining({ value: 'duplicate' }),
-      )
+      expect(screen.getByText('appDebug.duplicateModel')).toBeInTheDocument()
     })
 
-    it('should hide duplicate option when 4 or more models', () => {
+    it('should hide duplicate option when 4 or more models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [
           createModelAndParameter({ id: '1' }),
@@ -307,52 +277,48 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).not.toContainEqual(
-        expect.objectContaining({ value: 'duplicate' }),
-      )
+      expect(screen.queryByText('appDebug.duplicateModel')).not.toBeInTheDocument()
     })
 
-    it('should show debug-as-single-model option when provider and model are set', () => {
+    it('should show debug-as-single-model option when provider and model are set', async () => {
       renderComponent({
         modelAndParameter: createModelAndParameter({
           provider: 'openai',
           model: 'gpt-3.5-turbo',
         }),
       })
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).toContainEqual(
-        expect.objectContaining({ value: 'debug-as-single-model' }),
-      )
+      expect(screen.getByText('appDebug.debugAsSingleModel')).toBeInTheDocument()
     })
 
-    it('should hide debug-as-single-model option when provider is missing', () => {
+    it('should hide debug-as-single-model option when provider is missing', async () => {
       renderComponent({
         modelAndParameter: createModelAndParameter({
           provider: '',
           model: 'gpt-3.5-turbo',
         }),
       })
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).not.toContainEqual(
-        expect.objectContaining({ value: 'debug-as-single-model' }),
-      )
+      expect(screen.queryByText('appDebug.debugAsSingleModel')).not.toBeInTheDocument()
     })
 
-    it('should hide debug-as-single-model option when model is missing', () => {
+    it('should hide debug-as-single-model option when model is missing', async () => {
       renderComponent({
         modelAndParameter: createModelAndParameter({
           provider: 'openai',
           model: '',
         }),
       })
+      await openMenu()
 
-      expect(capturedDropdownProps?.items).not.toContainEqual(
-        expect.objectContaining({ value: 'debug-as-single-model' }),
-      )
+      expect(screen.queryByText('appDebug.debugAsSingleModel')).not.toBeInTheDocument()
     })
 
-    it('should show remove option in secondItems when more than 2 models', () => {
+    it('should show remove option in secondItems when more than 2 models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [
           createModelAndParameter({ id: '1' }),
@@ -364,13 +330,12 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.secondItems).toContainEqual(
-        expect.objectContaining({ value: 'remove' }),
-      )
+      expect(screen.getByText('common.operation.remove')).toBeInTheDocument()
     })
 
-    it('should not show remove option when 2 or fewer models', () => {
+    it('should not show remove option when 2 or fewer models', async () => {
       mockUseDebugWithMultipleModelContext.mockReturnValue({
         multipleModelConfigs: [
           createModelAndParameter({ id: '1' }),
@@ -381,13 +346,14 @@ describe('DebugItem', () => {
       })
 
       renderComponent()
+      await openMenu()
 
-      expect(capturedDropdownProps?.secondItems).toBeUndefined()
+      expect(screen.queryByText('common.operation.remove')).not.toBeInTheDocument()
     })
   })
 
   describe('dropdown actions', () => {
-    it('should duplicate model when duplicate is selected', () => {
+    it('should duplicate model when duplicate is selected', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const originalModel = createModelAndParameter({ id: 'original' })
 
@@ -399,7 +365,8 @@ describe('DebugItem', () => {
 
       renderComponent({ modelAndParameter: originalModel })
 
-      fireEvent.click(screen.getByTestId('dropdown-item-duplicate'))
+      const user = await openMenu()
+      await user.click(screen.getByText('appDebug.duplicateModel'))
 
       expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
         true,
@@ -414,7 +381,7 @@ describe('DebugItem', () => {
       )
     })
 
-    it('should not duplicate when already at 4 models', () => {
+    it('should not duplicate when already at 4 models', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const models = [
         createModelAndParameter({ id: '1' }),
@@ -430,14 +397,13 @@ describe('DebugItem', () => {
       })
 
       renderComponent({ modelAndParameter: models[0] })
-
-      // Since duplicate is not shown when >= 4 models, we need to manually call handleSelect
-      capturedDropdownProps?.onSelect({ value: 'duplicate', text: 'Duplicate' })
+      await openMenu()
 
       expect(onMultipleModelConfigsChange).not.toHaveBeenCalled()
+      expect(screen.queryByText('appDebug.duplicateModel')).not.toBeInTheDocument()
     })
 
-    it('should call onDebugWithMultipleModelChange when debug-as-single-model is selected', () => {
+    it('should call onDebugWithMultipleModelChange when debug-as-single-model is selected', async () => {
       const onDebugWithMultipleModelChange = vi.fn()
       const modelAndParameter = createModelAndParameter()
 
@@ -449,12 +415,13 @@ describe('DebugItem', () => {
 
       renderComponent({ modelAndParameter })
 
-      fireEvent.click(screen.getByTestId('dropdown-item-debug-as-single-model'))
+      const user = await openMenu()
+      await user.click(screen.getByText('appDebug.debugAsSingleModel'))
 
       expect(onDebugWithMultipleModelChange).toHaveBeenCalledWith(modelAndParameter)
     })
 
-    it('should remove model when remove is selected', () => {
+    it('should remove model when remove is selected', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const models = [
         createModelAndParameter({ id: '1' }),
@@ -470,7 +437,8 @@ describe('DebugItem', () => {
 
       renderComponent({ modelAndParameter: models[1] })
 
-      fireEvent.click(screen.getByTestId('dropdown-second-item-remove'))
+      const user = await openMenu()
+      await user.click(screen.getByText('common.operation.remove'))
 
       expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
         true,
@@ -478,7 +446,7 @@ describe('DebugItem', () => {
       )
     })
 
-    it('should insert duplicated model at correct position', () => {
+    it('should insert duplicated model at correct position', async () => {
       const onMultipleModelConfigsChange = vi.fn()
       const models = [
         createModelAndParameter({ id: '1' }),
@@ -495,7 +463,8 @@ describe('DebugItem', () => {
       // Duplicate the second model
       renderComponent({ modelAndParameter: models[1] })
 
-      fireEvent.click(screen.getByTestId('dropdown-item-duplicate'))
+      const user = await openMenu()
+      await user.click(screen.getByText('appDebug.duplicateModel'))
 
       expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
         true,
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
index f7a3112225..4b21616d46 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
@@ -1,9 +1,15 @@
 import type { CSSProperties, FC } from 'react'
 import type { ModelAndParameter } from '../types'
-import type { Item } from '@/app/components/base/dropdown'
-import { memo } from 'react'
+import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Dropdown from '@/app/components/base/dropdown'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
 import { useProviderContext } from '@/context/provider-context'
@@ -35,34 +41,43 @@ const DebugItem: FC<DebugItemProps> = ({
   const index = multipleModelConfigs.findIndex(v => v.id === modelAndParameter.id)
   const currentProvider = textGenerationModelList.find(item => item.provider === modelAndParameter.provider)
   const currentModel = currentProvider?.models.find(item => item.model === modelAndParameter.model)
+  const [open, setOpen] = useState(false)
 
-  const handleSelect = (item: Item) => {
-    if (item.value === 'duplicate') {
-      if (multipleModelConfigs.length >= 4)
-        return
+  const handleDuplicate = () => {
+    setOpen(false)
+    if (multipleModelConfigs.length >= 4)
+      return
 
-      onMultipleModelConfigsChange(
-        true,
-        [
-          ...multipleModelConfigs.slice(0, index + 1),
-          {
-            ...modelAndParameter,
-            id: `${Date.now()}`,
-          },
-          ...multipleModelConfigs.slice(index + 1),
-        ],
-      )
-    }
-    if (item.value === 'debug-as-single-model')
-      onDebugWithMultipleModelChange(modelAndParameter)
-    if (item.value === 'remove') {
-      onMultipleModelConfigsChange(
-        true,
-        multipleModelConfigs.filter(item => item.id !== modelAndParameter.id),
-      )
-    }
+    onMultipleModelConfigsChange(
+      true,
+      [
+        ...multipleModelConfigs.slice(0, index + 1),
+        {
+          ...modelAndParameter,
+          id: `${Date.now()}`,
+        },
+        ...multipleModelConfigs.slice(index + 1),
+      ],
+    )
   }
 
+  const handleDebugAsSingleModel = () => {
+    setOpen(false)
+    onDebugWithMultipleModelChange(modelAndParameter)
+  }
+
+  const handleRemove = () => {
+    setOpen(false)
+    onMultipleModelConfigsChange(
+      true,
+      multipleModelConfigs.filter(item => item.id !== modelAndParameter.id),
+    )
+  }
+
+  const showDuplicate = multipleModelConfigs.length <= 3
+  const showDebugAsSingleModel = !!(modelAndParameter.provider && modelAndParameter.model)
+  const showRemove = multipleModelConfigs.length > 2
+
   return (
     <div
       className={`flex min-w-[320px] flex-col rounded-xl bg-background-section-burn ${className}`}
@@ -76,41 +91,37 @@ const DebugItem: FC<DebugItemProps> = ({
         <ModelParameterTrigger
           modelAndParameter={modelAndParameter}
         />
-        <Dropdown
-          onSelect={handleSelect}
-          items={[
-            ...(
-              multipleModelConfigs.length <= 3
-                ? [
-                    {
-                      value: 'duplicate',
-                      text: t('duplicateModel', { ns: 'appDebug' }),
-                    },
-                  ]
-                : []
-            ),
-            ...(
-              (modelAndParameter.provider && modelAndParameter.model)
-                ? [
-                    {
-                      value: 'debug-as-single-model',
-                      text: t('debugAsSingleModel', { ns: 'appDebug' }),
-                    },
-                  ]
-                : []
-            ),
-          ]}
-          secondItems={
-            multipleModelConfigs.length > 2
-              ? [
-                  {
-                    value: 'remove',
-                    text: t('operation.remove', { ns: 'common' }) as string,
-                  },
-                ]
-              : undefined
-          }
-        />
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenuTrigger render={<div />}>
+            <ActionButton className={open ? 'bg-state-base-hover' : ''}>
+              <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-end"
+            sideOffset={4}
+            popupClassName="min-w-[160px]"
+          >
+            {showDuplicate && (
+              <DropdownMenuItem className="system-md-regular" onClick={handleDuplicate}>
+                {t('duplicateModel', { ns: 'appDebug' })}
+              </DropdownMenuItem>
+            )}
+            {showDebugAsSingleModel && (
+              <DropdownMenuItem className="system-md-regular" onClick={handleDebugAsSingleModel}>
+                {t('debugAsSingleModel', { ns: 'appDebug' })}
+              </DropdownMenuItem>
+            )}
+            {showRemove && (
+              <>
+                {(showDuplicate || showDebugAsSingleModel) && <DropdownMenuSeparator />}
+                <DropdownMenuItem destructive className="system-md-regular" onClick={handleRemove}>
+                  {t('operation.remove', { ns: 'common' })}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <div style={{ height: 'calc(100% - 40px)' }}>
         {
diff --git a/web/app/components/base/action-button/index.tsx b/web/app/components/base/action-button/index.tsx
index ec84fa06d8..86c8933a8a 100644
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -30,7 +30,7 @@ const actionButtonVariants = cva(
   },
 )
 
-export type ActionButtonProps = {
+type ActionButtonProps = {
   size?: 'xs' | 's' | 'm' | 'l' | 'xl'
   state?: ActionButtonState
   styleCss?: CSSProperties
@@ -73,4 +73,4 @@ const ActionButton = ({ className, size, state = ActionButtonState.Default, styl
 ActionButton.displayName = 'ActionButton'
 
 export default ActionButton
-export { ActionButton, ActionButtonState, actionButtonVariants }
+export { ActionButton, ActionButtonState }
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
index 295bebecac..525f9b89a5 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -53,11 +53,16 @@ describe('MobileOperationDropdown Component', () => {
 
     // Reset Chat
     await user.click(screen.getByText('share.chat.resetChat'))
-    expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
+    })
 
+    await user.click(screen.getByRole('button'))
     // View Chat Settings
     await user.click(screen.getByText('share.chat.viewChatSettings'))
-    expect(defaultProps.handleViewChatSettings).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.handleViewChatSettings).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('applies hover state to ActionButton when open', async () => {
@@ -72,4 +77,16 @@ describe('MobileOperationDropdown Component', () => {
     await user.click(trigger)
     expect(trigger).toHaveClass('action-btn-hover')
   })
+
+  it('closes the menu after clicking an action', async () => {
+    const user = userEvent.setup()
+    render(<MobileOperationDropdown {...defaultProps} />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByText('share.chat.resetChat'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('share.chat.resetChat')).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
index 454f20066e..294d5eebc5 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -74,12 +74,18 @@ describe('Operation Component', () => {
     expect(defaultProps.togglePin).toHaveBeenCalledTimes(1)
 
     // Rename
+    await user.click(screen.getByText('Chat Title'))
     await user.click(screen.getByText('explore.sidebar.action.rename'))
-    expect(defaultProps.onRenameConversation).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.onRenameConversation).toHaveBeenCalledTimes(1)
+    })
 
     // Delete
+    await user.click(screen.getByText('Chat Title'))
     await user.click(screen.getByText('explore.sidebar.action.delete'))
-    expect(defaultProps.onDelete).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultProps.onDelete).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('applies hover background when open', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index f8101e1b3a..5d80db7ac3 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   handleResetChat: () => void
@@ -16,40 +21,45 @@ const MobileOperationDropdown = ({
 }: Props) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const handleMenuAction = useCallback((callback: () => void) => {
+    setOpen(false)
+    queueMicrotask(callback)
+  }, [])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: -4,
-      }}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        render={<div />}
         data-testid="mobile-more-btn"
       >
         <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
           <div className="i-ri-more-fill h-[18px] w-[18px]" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-40">
-        <div
-          className="min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[160px]"
+      >
+        <DropdownMenuItem
+          className="system-md-regular"
+          onClick={() => handleMenuAction(handleResetChat)}
         >
-          <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover" onClick={handleResetChat}>
-            <span className="grow">{t('chat.resetChat', { ns: 'share' })}</span>
-          </div>
-          {!hideViewChatSettings && (
-            <div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover" onClick={handleViewChatSettings}>
-              <span className="grow">{t('chat.viewChatSettings', { ns: 'share' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+          <span className="grow">{t('chat.resetChat', { ns: 'share' })}</span>
+        </DropdownMenuItem>
+        {!hideViewChatSettings && (
+          <DropdownMenuItem
+            className="system-md-regular"
+            onClick={() => handleMenuAction(handleViewChatSettings)}
+          >
+            <span className="grow">{t('chat.viewChatSettings', { ns: 'share' })}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
 
   )
 }
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index d61af1f6a1..a6dd6a0a9e 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -1,14 +1,16 @@
 'use client'
-import type { Placement } from '@floating-ui/react'
 import type { FC } from 'react'
+import type { Placement } from '@/app/components/base/ui/placement'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiArrowDownSLine,
-} from '@remixicon/react'
 import * as React from 'react'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   title: string
@@ -33,42 +35,51 @@ const Operation: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const handleDeferredAction = useCallback((action: () => void) => {
+    setOpen(false)
+    queueMicrotask(action)
+  }, [])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement={placement}
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        render={<div />}
       >
         <div className={cn('flex cursor-pointer items-center rounded-lg p-1.5 pl-2 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           <div className="system-md-semibold">{title}</div>
-          <RiArrowDownSLine className="h-4 w-4" />
+          <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
         </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div
-          className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
-        >
-          <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
-            <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
-          </div>
-          {isShowRenameConversation && (
-            <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
-            </div>
-          )}
-          {isShowDelete && (
-            <div className={cn('group flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete}>
-              <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement={placement}
+        sideOffset={4}
+        popupClassName="min-w-[120px]"
+      >
+        <DropdownMenuItem className="system-md-regular" onClick={togglePin}>
+          <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
+        </DropdownMenuItem>
+        {isShowRenameConversation && (
+          <DropdownMenuItem
+            className="system-md-regular"
+            onClick={() => onRenameConversation && handleDeferredAction(onRenameConversation)}
+          >
+            <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+        {isShowDelete && (
+          <DropdownMenuItem
+            destructive
+            className="system-md-regular"
+            onClick={() => handleDeferredAction(onDelete)}
+          >
+            <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(Operation)
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
index e46b54872e..5aa8da7965 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
@@ -1,16 +1,9 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Operation from '../operation'
 
-// Mock PortalToFollowElem components to render children in place
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => <div data-open={open}>{children}</div>,
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => <div onClick={onClick}>{children}</div>,
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div data-testid="portal-content">{children}</div>,
-}))
-
 describe('Operation', () => {
   const defaultProps = {
     isActive: false,
@@ -72,7 +65,9 @@ describe('Operation', () => {
     await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('explore.sidebar.action.rename'))
 
-    expect(defaultProps.onRenameConversation).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(defaultProps.onRenameConversation).toHaveBeenCalled()
+    })
   })
 
   it('should call onDelete when delete is clicked', async () => {
@@ -82,7 +77,9 @@ describe('Operation', () => {
     await user.click(screen.getByRole('button'))
     await user.click(screen.getByText('explore.sidebar.action.delete'))
 
-    expect(defaultProps.onDelete).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(defaultProps.onDelete).toHaveBeenCalled()
+    })
   })
 
   it('should respect visibility props', async () => {
@@ -108,8 +105,7 @@ describe('Operation', () => {
 
     await user.click(screen.getByRole('button'))
 
-    const portalContent = screen.getByTestId('portal-content')
-    expect(portalContent).toBeInTheDocument()
+    expect(screen.getByText('explore.sidebar.action.pin')).toBeInTheDocument()
   })
 
   it('should close dropdown when item hovering stops', async () => {
@@ -120,5 +116,60 @@ describe('Operation', () => {
     expect(screen.getByText('explore.sidebar.action.pin')).toBeInTheDocument()
 
     rerender(<Operation {...defaultProps} isItemHovering={false} />)
+
+    await waitFor(() => {
+      expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should keep the trigger mounted while visually hidden', () => {
+    render(<Operation {...defaultProps} isItemHovering={false} />)
+
+    const trigger = screen.getByRole('button')
+    expect(trigger).toHaveClass('pointer-events-none')
+    expect(trigger).toHaveClass('opacity-0')
+  })
+
+  it('should safely ignore rename clicks when callback is missing', async () => {
+    const user = userEvent.setup()
+    render(<Operation {...defaultProps} onRenameConversation={undefined} />)
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByText('explore.sidebar.action.rename'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('explore.sidebar.action.rename')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should not bubble trigger clicks to the parent container', async () => {
+    const user = userEvent.setup()
+    const parentClick = vi.fn()
+
+    render(
+      <div onClick={parentClick}>
+        <Operation {...defaultProps} />
+      </div>,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+
+  it('should not bubble popup clicks to the parent container', async () => {
+    const user = userEvent.setup()
+    const parentClick = vi.fn()
+
+    render(
+      <div onClick={parentClick}>
+        <Operation {...defaultProps} isItemHovering={true} />
+      </div>,
+    )
+
+    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('menu'))
+
+    expect(parentClick).not.toHaveBeenCalled()
   })
 })
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 18ff3e4d62..611d2bb1b9 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -1,19 +1,17 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiDeleteBinLine,
-  RiEditLine,
-  RiMoreFill,
-  RiPushpinLine,
-  RiUnpinLine,
-} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type Props = {
   isActive?: boolean
@@ -38,24 +36,29 @@ const Operation: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const ref = useRef(null)
   const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
   useEffect(() => {
     if (!isItemHovering && !isHovering)
       setOpen(false)
   }, [isItemHovering, isHovering])
+  const handleDeferredAction = useCallback((action?: () => void) => {
+    if (!action)
+      return
+    setOpen(false)
+    queueMicrotask(action)
+  }, [])
   return (
-    <PortalToFollowElem
+    <DropdownMenu
+      modal={false}
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={4}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => setOpen(v => !v)}
+      <DropdownMenuTrigger
+        render={<div />}
+        onClick={e => e.stopPropagation()}
       >
         <ActionButton
-          className={cn((isItemHovering || open) ? 'opacity-100' : 'opacity-0')}
+          className={cn((isItemHovering || open) ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0')}
           state={
             isActive
               ? ActionButtonState.Active
@@ -64,39 +67,57 @@ const Operation: FC<Props> = ({
                 : ActionButtonState.Default
           }
         >
-          <RiMoreFill className="h-4 w-4" />
+          <span aria-hidden className="i-ri-more-fill h-4 w-4" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div
-          ref={ref}
-          className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
-          onMouseEnter={setIsHovering}
-          onMouseLeave={setNotHovering}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[120px]"
+        popupProps={{
+          onMouseEnter: setIsHovering,
+          onMouseLeave: setNotHovering,
+          onClick: e => e.stopPropagation(),
+        }}
+      >
+        <DropdownMenuItem
+          className="gap-2 px-2 system-md-regular"
           onClick={(e) => {
             e.stopPropagation()
+            togglePin()
           }}
         >
-          <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
-            {isPinned && <RiUnpinLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
-            {!isPinned && <RiPushpinLine className="h-4 w-4 shrink-0 text-text-tertiary" />}
-            <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
-          </div>
-          {isShowRenameConversation && (
-            <div className={cn('flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
-              <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
-            </div>
-          )}
-          {isShowDelete && (
-            <div className={cn('group flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete}>
-              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover:text-text-destructive')} />
-              <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+          {isPinned && <span aria-hidden className="i-ri-unpin-line h-4 w-4 shrink-0 text-text-tertiary" />}
+          {!isPinned && <span aria-hidden className="i-ri-pushpin-line h-4 w-4 shrink-0 text-text-tertiary" />}
+          <span className="grow">{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}</span>
+        </DropdownMenuItem>
+        {isShowRenameConversation && (
+          <DropdownMenuItem
+            className="gap-2 px-2 system-md-regular"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleDeferredAction(onRenameConversation)
+            }}
+          >
+            <span aria-hidden className="i-ri-edit-line h-4 w-4 shrink-0 text-text-tertiary" />
+            <span className="grow">{t('sidebar.action.rename', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+        {isShowDelete && (
+          <DropdownMenuItem
+            destructive
+            className="gap-2 px-2 system-md-regular"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleDeferredAction(onDelete)
+            }}
+          >
+            <span aria-hidden className="i-ri-delete-bin-line h-4 w-4 shrink-0" />
+            <span className="grow">{t('sidebar.action.delete', { ns: 'explore' })}</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(Operation)
diff --git a/web/app/components/base/dropdown/__tests__/index.spec.tsx b/web/app/components/base/dropdown/__tests__/index.spec.tsx
deleted file mode 100644
index 9820554e3d..0000000000
--- a/web/app/components/base/dropdown/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
-import Dropdown from '../index'
-
-describe('Dropdown Component', () => {
-  const mockItems = [
-    { value: 'option1', text: 'Option 1' },
-    { value: 'option2', text: 'Option 2' },
-  ]
-  const mockSecondItems = [
-    { value: 'option3', text: 'Option 3' },
-  ]
-  const onSelect = vi.fn()
-
-  afterEach(() => {
-    cleanup()
-    vi.clearAllMocks()
-  })
-
-  it('renders default trigger properly', () => {
-    const { container } = render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    const trigger = container.querySelector('button')
-    expect(trigger).toBeInTheDocument()
-  })
-
-  it('renders custom trigger when provided', () => {
-    render(
-      <Dropdown
-        items={mockItems}
-        onSelect={onSelect}
-        renderTrigger={open => <button data-testid="custom-trigger">{open ? 'Open' : 'Closed'}</button>}
-      />,
-    )
-    const trigger = screen.getByTestId('custom-trigger')
-    expect(trigger).toBeInTheDocument()
-    expect(trigger).toHaveTextContent('Closed')
-  })
-
-  it('opens dropdown menu on trigger click and shows items', async () => {
-    render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    const trigger = screen.getByRole('button')
-
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-
-    // Dropdown items are rendered in a portal (document.body)
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-    expect(screen.getByText('Option 2')).toBeInTheDocument()
-  })
-
-  it('calls onSelect and closes dropdown when an item is clicked', async () => {
-    render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    const trigger = screen.getByRole('button')
-
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-
-    const option1 = screen.getByText('Option 1')
-    await act(async () => {
-      fireEvent.click(option1)
-    })
-
-    expect(onSelect).toHaveBeenCalledWith(mockItems[0])
-    expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
-  })
-
-  it('calls onSelect and closes dropdown when a second item is clicked', async () => {
-    render(
-      <Dropdown items={mockItems} secondItems={mockSecondItems} onSelect={onSelect} />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    const option3 = screen.getByText('Option 3')
-    await act(async () => {
-      fireEvent.click(option3)
-    })
-    expect(onSelect).toHaveBeenCalledWith(mockSecondItems[0])
-    expect(screen.queryByText('Option 3')).not.toBeInTheDocument()
-  })
-
-  it('renders second items and divider when provided', async () => {
-    render(
-      <Dropdown
-        items={mockItems}
-        secondItems={mockSecondItems}
-        onSelect={onSelect}
-      />,
-    )
-    const trigger = screen.getByRole('button')
-
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-    expect(screen.getByText('Option 3')).toBeInTheDocument()
-
-    // Check for divider (h-px bg-divider-regular)
-    const divider = document.body.querySelector('.bg-divider-regular.h-px')
-    expect(divider).toBeInTheDocument()
-  })
-
-  it('applies custom classNames', async () => {
-    const popupClass = 'custom-popup'
-    const itemClass = 'custom-item'
-    const secondItemClass = 'custom-second-item'
-
-    render(
-      <Dropdown
-        items={mockItems}
-        secondItems={mockSecondItems}
-        onSelect={onSelect}
-        popupClassName={popupClass}
-        itemClassName={itemClass}
-        secondItemClassName={secondItemClass}
-      />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    const popup = document.body.querySelector(`.${popupClass}`)
-    expect(popup).toBeInTheDocument()
-
-    const items = screen.getAllByText('Option 1')
-    expect(items[0]).toHaveClass(itemClass)
-
-    const secondItems = screen.getAllByText('Option 3')
-    expect(secondItems[0]).toHaveClass(secondItemClass)
-  })
-
-  it('applies open class to trigger when menu is open', async () => {
-    render(<Dropdown items={mockItems} onSelect={onSelect} />)
-    const trigger = screen.getByRole('button')
-    await act(async () => {
-      fireEvent.click(trigger)
-    })
-    expect(trigger).toHaveClass('bg-divider-regular')
-  })
-
-  it('handles JSX elements as item text', async () => {
-    const itemsWithJSX = [
-      { value: 'jsx', text: <span data-testid="jsx-item">JSX Content</span> },
-    ]
-    render(
-      <Dropdown items={itemsWithJSX} onSelect={onSelect} />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    expect(screen.getByTestId('jsx-item')).toBeInTheDocument()
-    expect(screen.getByText('JSX Content')).toBeInTheDocument()
-  })
-
-  it('does not render items section if items list is empty', async () => {
-    render(
-      <Dropdown items={[]} secondItems={mockSecondItems} onSelect={onSelect} />,
-    )
-
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-
-    const p1Divs = document.body.querySelectorAll('.p-1')
-    expect(p1Divs.length).toBe(1)
-    expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
-    expect(screen.getByText('Option 3')).toBeInTheDocument()
-  })
-
-  it('does not render divider if only one section is provided', async () => {
-    const { rerender } = render(
-      <Dropdown items={mockItems} onSelect={onSelect} />,
-    )
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-    expect(document.body.querySelector('.bg-divider-regular.h-px')).not.toBeInTheDocument()
-
-    await act(async () => {
-      rerender(
-        <Dropdown items={[]} secondItems={mockSecondItems} onSelect={onSelect} />,
-      )
-    })
-    expect(document.body.querySelector('.bg-divider-regular.h-px')).not.toBeInTheDocument()
-  })
-
-  it('renders nothing if both item lists are empty', async () => {
-    render(<Dropdown items={[]} secondItems={[]} onSelect={onSelect} />)
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button'))
-    })
-    const popup = document.body.querySelector('.bg-components-panel-bg')
-    expect(popup?.children.length).toBe(0)
-  })
-
-  it('passes triggerProps to ActionButton and applies custom className', () => {
-    render(
-      <Dropdown
-        items={mockItems}
-        onSelect={onSelect}
-        triggerProps={{
-          'disabled': true,
-          'aria-label': 'dropdown-trigger',
-          'className': 'custom-trigger-class',
-        }}
-      />,
-    )
-    const trigger = screen.getByLabelText('dropdown-trigger')
-    expect(trigger).toBeDisabled()
-    expect(trigger).toHaveClass('custom-trigger-class')
-  })
-})
diff --git a/web/app/components/base/dropdown/index.stories.tsx b/web/app/components/base/dropdown/index.stories.tsx
deleted file mode 100644
index 7cb7f820f6..0000000000
--- a/web/app/components/base/dropdown/index.stories.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { Item } from '.'
-import { useState } from 'react'
-import { fn } from 'storybook/test'
-import Dropdown from '.'
-
-const PRIMARY_ITEMS: Item[] = [
-  { value: 'rename', text: 'Rename' },
-  { value: 'duplicate', text: 'Duplicate' },
-]
-
-const SECONDARY_ITEMS: Item[] = [
-  { value: 'archive', text: <span className="text-text-destructive">Archive</span> },
-  { value: 'delete', text: <span className="text-text-destructive">Delete</span> },
-]
-
-const meta = {
-  title: 'Base/Navigation/Dropdown',
-  component: Dropdown,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Small contextual menu with optional destructive section. Uses portal positioning utilities for precise placement.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  args: {
-    items: PRIMARY_ITEMS,
-    secondItems: SECONDARY_ITEMS,
-  },
-} satisfies Meta<typeof Dropdown>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const DropdownDemo = (props: React.ComponentProps<typeof Dropdown>) => {
-  const [lastAction, setLastAction] = useState<string>('None')
-
-  return (
-    <div className="flex h-[200px] flex-col items-center justify-center gap-4">
-      <Dropdown
-        {...props}
-        onSelect={(item) => {
-          setLastAction(String(item.value))
-          props.onSelect?.(item)
-        }}
-      />
-      <div className="rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-xs text-text-secondary">
-        Last action:
-        {' '}
-        <span className="font-mono text-text-primary">{lastAction}</span>
-      </div>
-    </div>
-  )
-}
-
-export const Playground: Story = {
-  render: args => <DropdownDemo {...args} />,
-  args: {
-    items: PRIMARY_ITEMS,
-    secondItems: SECONDARY_ITEMS,
-    onSelect: fn(),
-  },
-}
-
-export const CustomTrigger: Story = {
-  render: args => (
-    <DropdownDemo
-      {...args}
-      renderTrigger={open => (
-        <button
-          type="button"
-          className="inline-flex items-center gap-1 rounded-md border border-divider-subtle px-3 py-1.5 text-sm text-text-secondary hover:bg-state-base-hover-alt"
-        >
-          Actions
-          <span className={`transition-transform ${open ? 'rotate-180' : ''}`}>
-            ▾
-          </span>
-        </button>
-      )}
-    />
-  ),
-  args: {
-    items: PRIMARY_ITEMS,
-    onSelect: fn(),
-  },
-}
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
deleted file mode 100644
index f9a19f34ea..0000000000
--- a/web/app/components/base/dropdown/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { FC } from 'react'
-import type { ActionButtonProps } from '@/app/components/base/action-button'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiMoreFill,
-} from '@remixicon/react'
-import { useState } from 'react'
-import ActionButton from '@/app/components/base/action-button'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-export type Item = {
-  value: string | number
-  text: string | React.JSX.Element
-}
-type DropdownProps = {
-  items: Item[]
-  secondItems?: Item[]
-  onSelect: (item: Item) => void
-  renderTrigger?: (open: boolean) => React.ReactNode
-  triggerProps?: ActionButtonProps
-  popupClassName?: string
-  itemClassName?: string
-  secondItemClassName?: string
-}
-const Dropdown: FC<DropdownProps> = ({
-  items,
-  onSelect,
-  secondItems,
-  renderTrigger,
-  triggerProps,
-  popupClassName,
-  itemClassName,
-  secondItemClassName,
-}) => {
-  const [open, setOpen] = useState(false)
-
-  const handleSelect = (item: Item) => {
-    setOpen(false)
-    onSelect(item)
-  }
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        {
-          renderTrigger
-            ? renderTrigger(open)
-            : (
-                <ActionButton
-                  {...triggerProps}
-                  className={cn(
-                    open && 'bg-divider-regular',
-                    triggerProps?.className,
-                  )}
-                >
-                  <RiMoreFill className="h-4 w-4 text-text-tertiary" />
-                </ActionButton>
-              )
-        }
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={popupClassName}>
-        <div className="rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg text-sm text-text-secondary shadow-lg">
-          {
-            !!items.length && (
-              <div className="p-1">
-                {
-                  items.map(item => (
-                    <div
-                      key={item.value}
-                      className={cn(
-                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
-                        itemClassName,
-                      )}
-                      onClick={() => handleSelect(item)}
-                    >
-                      {item.text}
-                    </div>
-                  ))
-                }
-              </div>
-            )
-          }
-          {
-            (!!items.length && !!secondItems?.length) && (
-              <div className="h-px bg-divider-regular" />
-            )
-          }
-          {
-            !!secondItems?.length && (
-              <div className="p-1">
-                {
-                  secondItems.map(item => (
-                    <div
-                      key={item.value}
-                      className={cn(
-                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
-                        secondItemClassName,
-                      )}
-                      onClick={() => handleSelect(item)}
-                    >
-                      {item.text}
-                    </div>
-                  ))
-                }
-              </div>
-            )
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default Dropdown
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx
index 0157d3cf79..aef07e9be7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/__tests__/index.spec.tsx
@@ -31,10 +31,10 @@ describe('Dropdown', () => {
 
       const { container } = render(<Dropdown {...props} />)
 
-      // Assert - Button should have RiMoreFill icon (rendered as svg)
+      // Assert - Button should have the more icon
       const button = screen.getByRole('button')
       expect(button).toBeInTheDocument()
-      expect(container.querySelector('svg')).toBeInTheDocument()
+      expect(container.querySelector('.i-ri-more-fill')).toBeInTheDocument()
     })
 
     it('should render separator after dropdown', () => {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
index 7178b45b34..c6a90824ab 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
@@ -1,12 +1,11 @@
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import Menu from './menu'
 
 type DropdownProps = {
@@ -22,26 +21,17 @@ const Dropdown = ({
 }: DropdownProps) => {
   const [open, setOpen] = useState(false)
 
-  const handleTrigger = useCallback(() => {
-    setOpen(prev => !prev)
-  }, [])
-
   const handleBreadCrumbClick = useCallback((index: number) => {
     onBreadcrumbClick(index)
     setOpen(false)
   }, [onBreadcrumbClick])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={{
-        mainAxis: 4,
-        crossAxis: -13,
-      }}
     >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
+      <DropdownMenuTrigger render={<div />}>
         <button
           type="button"
           className={cn(
@@ -49,18 +39,22 @@ const Dropdown = ({
             open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
           )}
         >
-          <RiMoreFill className="size-4 text-text-tertiary" />
+          <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
         </button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-11">
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
+      >
         <Menu
           breadcrumbs={breadcrumbs}
           startIndex={startIndex}
           onBreadcrumbClick={handleBreadCrumbClick}
         />
-      </PortalToFollowElemContent>
+      </DropdownMenuContent>
       <span className="system-xs-regular text-divider-deep">/</span>
-    </PortalToFollowElem>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
index 0140626dd7..12042acfa1 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
@@ -1,5 +1,6 @@
 import type { DataSourceCredential } from '../types'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 import Operator from '../operator'
 
@@ -9,10 +10,6 @@ import Operator from '../operator'
  */
 
 // Helper to open dropdown
-const openDropdown = () => {
-  fireEvent.click(screen.getByRole('button'))
-}
-
 describe('Operator Component', () => {
   const mockOnAction = vi.fn()
   const mockOnRename = vi.fn()
@@ -37,7 +34,7 @@ describe('Operator Component', () => {
 
       // Act
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
 
       // Assert
       expect(await screen.findByText('plugin.auth.setDefault')).toBeInTheDocument()
@@ -53,7 +50,7 @@ describe('Operator Component', () => {
 
       // Act
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
 
       // Assert
       expect(await screen.findByText('plugin.auth.setDefault')).toBeInTheDocument()
@@ -71,11 +68,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.operation.rename'))
 
       // Assert
-      expect(mockOnRename).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(mockOnRename).toHaveBeenCalledTimes(1)
+      })
       expect(mockOnAction).not.toHaveBeenCalled()
     })
 
@@ -85,7 +84,7 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} />)
 
       // Act & Assert
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       const renameBtn = await screen.findByText('common.operation.rename')
       expect(() => fireEvent.click(renameBtn)).not.toThrow()
     })
@@ -96,11 +95,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('plugin.auth.setDefault'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('setDefault', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('setDefault', credential)
+      })
     })
 
     it('should call onAction for "edit" action', async () => {
@@ -109,11 +110,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.operation.edit'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('edit', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('edit', credential)
+      })
     })
 
     it('should call onAction for "change" action', async () => {
@@ -122,11 +125,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.dataSource.notion.changeAuthorizedPages'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('change', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('change', credential)
+      })
     })
 
     it('should call onAction for "delete" action', async () => {
@@ -135,11 +140,13 @@ describe('Operator Component', () => {
       render(<Operator credentialItem={credential} onAction={mockOnAction} onRename={mockOnRename} />)
 
       // Act
-      openDropdown()
+      await userEvent.setup().click(screen.getByRole('button'))
       fireEvent.click(await screen.findByText('common.operation.remove'))
 
       // Assert
-      expect(mockOnAction).toHaveBeenCalledWith('delete', credential)
+      await waitFor(() => {
+        expect(mockOnAction).toHaveBeenCalledWith('delete', credential)
+      })
     })
   })
 })
diff --git a/web/app/components/header/account-setting/data-source-page-new/operator.tsx b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
index 22303fb8f0..b8aea9fb1d 100644
--- a/web/app/components/header/account-setting/data-source-page-new/operator.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
@@ -1,21 +1,20 @@
 import type {
   DataSourceCredential,
 } from './types'
-import type { Item } from '@/app/components/base/dropdown'
-import {
-  RiDeleteBinLine,
-  RiEditLine,
-  RiEqualizer2Line,
-  RiHome9Line,
-  RiStickyNoteAddLine,
-} from '@remixicon/react'
 import {
   memo,
   useCallback,
-  useMemo,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Dropdown from '@/app/components/base/dropdown'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 
 type OperatorProps = {
@@ -29,106 +28,60 @@ const Operator = ({
   onRename,
 }: OperatorProps) => {
   const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
   const {
     type,
   } = credentialItem
-  const items = useMemo(() => {
-    const commonItems = [
-      {
-        value: 'setDefault',
-        text: (
-          <div className="flex items-center">
-            <RiHome9Line className="mr-2 h-4 w-4 text-text-tertiary" />
-            <div className="text-text-secondary system-sm-semibold">{t('auth.setDefault', { ns: 'plugin' })}</div>
-          </div>
-        ),
-      },
-      ...(
-        type === CredentialTypeEnum.OAUTH2
-          ? [
-              {
-                value: 'rename',
-                text: (
-                  <div className="flex items-center">
-                    <RiEditLine className="mr-2 h-4 w-4 text-text-tertiary" />
-                    <div className="text-text-secondary system-sm-semibold">{t('operation.rename', { ns: 'common' })}</div>
-                  </div>
-                ),
-              },
-            ]
-          : []
-      ),
-      ...(
-        type === CredentialTypeEnum.API_KEY
-          ? [
-              {
-                value: 'edit',
-                text: (
-                  <div className="flex items-center">
-                    <RiEqualizer2Line className="mr-2 h-4 w-4 text-text-tertiary" />
-                    <div className="text-text-secondary system-sm-semibold">{t('operation.edit', { ns: 'common' })}</div>
-                  </div>
-                ),
-              },
-            ]
-          : []
-      ),
-    ]
-    if (type === CredentialTypeEnum.OAUTH2) {
-      const oAuthItems = [
-        {
-          value: 'change',
-          text: (
-            <div className="flex items-center">
-              <RiStickyNoteAddLine className="mr-2 h-4 w-4 text-text-tertiary" />
-              <div className="mb-1 text-text-secondary system-sm-semibold">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
-            </div>
-          ),
-        },
-      ]
-      commonItems.push(...oAuthItems)
-    }
-    return commonItems
-  }, [t, type])
-
-  const secondItems = useMemo(() => {
-    return [
-      {
-        value: 'delete',
-        text: (
-          <div className="flex items-center">
-            <RiDeleteBinLine className="mr-2 h-4 w-4 text-text-tertiary" />
-            <div className="text-text-secondary system-sm-semibold">
-              {t('operation.remove', { ns: 'common' })}
-            </div>
-          </div>
-        ),
-      },
-    ]
-  }, [])
-  const handleSelect = useCallback((item: Item) => {
-    if (item.value === 'rename') {
-      onRename?.()
-      return
-    }
-    onAction(
-      item.value as string,
-      credentialItem,
-    )
-  }, [onAction, credentialItem, onRename])
+  const handleAction = useCallback((action: string) => {
+    setOpen(false)
+    queueMicrotask(() => {
+      if (action === 'rename') {
+        onRename?.()
+        return
+      }
+      onAction(action, credentialItem)
+    })
+  }, [credentialItem, onAction, onRename])
 
   return (
-    <Dropdown
-      items={items}
-      secondItems={secondItems}
-      onSelect={handleSelect}
-      popupClassName="z-1002"
-      triggerProps={{
-        size: 'l',
-      }}
-      itemClassName="py-2 h-auto hover:bg-state-base-hover"
-      secondItemClassName="py-2 h-auto hover:bg-state-base-hover"
-    />
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger render={<div />}>
+        <ActionButton size="l" className={open ? 'bg-state-base-hover' : ''}>
+          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+        </ActionButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[200px]">
+        <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('setDefault')}>
+          <span aria-hidden className="i-ri-home-9-line h-4 w-4 text-text-tertiary" />
+          <div className="text-text-secondary system-sm-semibold">{t('auth.setDefault', { ns: 'plugin' })}</div>
+        </DropdownMenuItem>
+        {type === CredentialTypeEnum.OAUTH2 && (
+          <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('rename')}>
+            <span aria-hidden className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
+            <div className="text-text-secondary system-sm-semibold">{t('operation.rename', { ns: 'common' })}</div>
+          </DropdownMenuItem>
+        )}
+        {type === CredentialTypeEnum.API_KEY && (
+          <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('edit')}>
+            <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+            <div className="text-text-secondary system-sm-semibold">{t('operation.edit', { ns: 'common' })}</div>
+          </DropdownMenuItem>
+        )}
+        {type === CredentialTypeEnum.OAUTH2 && (
+          <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('change')}>
+            <span aria-hidden className="i-ri-sticky-note-add-line h-4 w-4 text-text-tertiary" />
+            <div className="mb-1 text-text-secondary system-sm-semibold">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem destructive className="h-auto gap-2 py-2" onClick={() => handleAction('delete')}>
+          <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+          <div className="system-sm-semibold">
+            {t('operation.remove', { ns: 'common' })}
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
index 56992b377f..8c33894929 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
@@ -680,6 +680,26 @@ describe('PluginTasks Component', () => {
       })
     })
 
+    it('should close the menu after clearing the last non-running plugins', async () => {
+      setupMocks([
+        createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
+      ])
+
+      render(<PluginTasks />)
+
+      fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+      await waitFor(() => {
+        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: /task\.clearAll/i }))
+
+      await waitFor(() => {
+        expect(document.querySelector('.w-\\[360px\\]')).not.toBeInTheDocument()
+      })
+    })
+
     it('should clear only error plugins when onClearErrors is called', async () => {
       const { mockMutateAsync } = setupMocks([
         createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'error-1' }),
@@ -792,6 +812,30 @@ describe('PluginTasks Component', () => {
 
       expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
     })
+
+    it('should open for installing-with-success state', () => {
+      setupMocks([
+        createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
+        createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
+      ])
+
+      render(<PluginTasks />)
+      fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+    })
+
+    it('should open for installing-with-error state', () => {
+      setupMocks([
+        createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
+        createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'failed-1' }),
+      ])
+
+      render(<PluginTasks />)
+      fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+    })
   })
 })
 
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index b96b1ec07c..5acd193a82 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -5,10 +5,10 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import PluginTaskList from './components/plugin-task-list'
 import TaskStatusIndicator from './components/task-status-indicator'
@@ -96,16 +96,14 @@ const PluginTasks = () => {
 
   return (
     <div className="flex items-center">
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
         onOpenChange={setOpen}
-        placement="bottom-start"
-        offset={{
-          mainAxis: 4,
-          crossAxis: 79,
-        }}
       >
-        <PortalToFollowElemTrigger onClick={handleTriggerClick}>
+        <DropdownMenuTrigger
+          render={<div />}
+          onClick={handleTriggerClick}
+        >
           <TaskStatusIndicator
             tip={tip}
             isInstalling={isInstalling}
@@ -118,8 +116,12 @@ const PluginTasks = () => {
             totalPluginsLength={totalPluginsLength}
             onClick={() => {}}
           />
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-11">
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={4}
+          popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none overflow-visible"
+        >
           <PluginTaskList
             runningPlugins={runningPlugins}
             successPlugins={successPlugins}
@@ -129,8 +131,8 @@ const PluginTasks = () => {
             onClearErrors={handleClearErrors}
             onClearSingle={handleClearSingle}
           />
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   )
 }
diff --git a/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx b/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
index 7ccd788cb0..edad871855 100644
--- a/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
+++ b/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
@@ -3,6 +3,27 @@ import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-libra
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import MenuDropdown from '../menu-dropdown'
 
+vi.mock('../info-modal', () => ({
+  default: ({
+    isShow,
+    onClose,
+    data,
+  }: {
+    isShow: boolean
+    onClose: () => void
+    data?: SiteInfo
+  }) => {
+    if (!isShow)
+      return null
+    return (
+      <div data-testid="info-modal">
+        <span>{data?.title}</span>
+        <button type="button" onClick={onClose}>Close Info</button>
+      </div>
+    )
+  },
+}))
+
 const mockReplace = vi.fn()
 const mockPathname = '/test-path'
 vi.mock('@/next/navigation', () => ({
@@ -191,6 +212,25 @@ describe('MenuDropdown', () => {
         expect(screen.getByText('Test App')).toBeInTheDocument()
       })
     })
+
+    it('should close InfoModal when the close handler runs', async () => {
+      render(<MenuDropdown data={baseSiteInfo} />)
+
+      fireEvent.click(screen.getByRole('button'))
+      await waitFor(() => {
+        expect(screen.getByText('common.userProfile.about')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('common.userProfile.about'))
+      await waitFor(() => {
+        expect(screen.getByTestId('info-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('Close Info'))
+      await waitFor(() => {
+        expect(screen.queryByTestId('info-modal')).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('forceClose prop', () => {
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index bc8323676c..d50a0d77de 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -1,26 +1,25 @@
 'use client'
-import type { Placement } from '@floating-ui/react'
 import type { FC } from 'react'
+import type { Placement } from '@/app/components/base/ui/placement'
 import type { SiteInfo } from '@/models/share'
 import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiEqualizer2Line,
-} from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useWebAppStore } from '@/context/web-app-context'
 import { AccessMode } from '@/models/access-control'
 import { usePathname, useRouter } from '@/next/navigation'
 import { webAppLogout } from '@/service/webapp-auth'
-import Divider from '../../base/divider'
 import InfoModal from './info-modal'
 
 type Props = {
@@ -40,24 +39,22 @@ const MenuDropdown: FC<Props> = ({
   const router = useRouter()
   const pathname = usePathname()
   const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
+  const [open, setOpen] = useState(false)
 
   const shareCode = useWebAppStore(s => s.shareCode)
   const handleLogout = useCallback(async () => {
+    setOpen(false)
     await webAppLogout(shareCode!)
     router.replace(`/webapp-signin?redirect_url=${pathname}`)
-  }, [router, pathname, webAppLogout, shareCode])
+  }, [pathname, router, setOpen, shareCode])
 
   const [show, setShow] = useState(false)
+  const handleOpenInfoModal = useCallback(() => {
+    setOpen(false)
+    queueMicrotask(() => {
+      setShow(true)
+    })
+  }, [])
 
   useEffect(() => {
     if (forceClose)
@@ -66,60 +63,56 @@ const MenuDropdown: FC<Props> = ({
 
   return (
     <>
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
         onOpenChange={setOpen}
-        placement={placement || 'bottom-end'}
-        offset={{
-          mainAxis: 4,
-          crossAxis: -4,
-        }}
       >
-        <PortalToFollowElemTrigger onClick={handleTrigger}>
-          <div>
-            <ActionButton size="l" className={cn(open && 'bg-state-base-hover')}>
-              <RiEqualizer2Line className="h-[18px] w-[18px]" />
-            </ActionButton>
-          </div>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-50">
-          <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
-            <div className="p-1">
-              <div className={cn('flex cursor-pointer items-center rounded-lg py-1.5 pr-2 pl-3 system-md-regular text-text-secondary')}>
-                <div className="grow">{t('theme.theme', { ns: 'common' })}</div>
-                <ThemeSwitcher />
-              </div>
+        <DropdownMenuTrigger
+          render={<div />}
+          aria-label={t('operation.more', { ns: 'common' })}
+        >
+          <ActionButton size="l" className={cn(open && 'bg-state-base-hover')}>
+            <span aria-hidden className="i-ri-equalizer-2-line h-[18px] w-[18px]" />
+          </ActionButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement={placement || 'bottom-end'}
+          sideOffset={4}
+          popupClassName="w-[224px]"
+        >
+          <div className="px-3 py-1.5 system-md-regular text-text-secondary">
+            <div className="flex items-center gap-2">
+              <div className="grow">{t('theme.theme', { ns: 'common' })}</div>
+              <ThemeSwitcher />
             </div>
-            <Divider type="horizontal" className="my-0" />
-            <div className="p-1">
-              {data?.privacy_policy && (
-                <a href={data.privacy_policy} target="_blank" className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">
-                  <span className="grow">{t('chat.privacyPolicyMiddle', { ns: 'share' })}</span>
-                </a>
-              )}
-              <div
-                onClick={() => {
-                  handleTrigger()
-                  setShow(true)
-                }}
-                className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
-              >
-                {t('userProfile.about', { ns: 'common' })}
-              </div>
-            </div>
-            {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
-              <div className="p-1">
-                <div
-                  onClick={handleLogout}
-                  className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
-                >
-                  {t('userProfile.logout', { ns: 'common' })}
-                </div>
-              </div>
-            )}
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          <DropdownMenuSeparator className="my-0" />
+          {data?.privacy_policy && (
+            <DropdownMenuLinkItem
+              className="px-3 system-md-regular"
+              href={data.privacy_policy}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span className="grow">{t('chat.privacyPolicyMiddle', { ns: 'share' })}</span>
+            </DropdownMenuLinkItem>
+          )}
+          <DropdownMenuItem
+            className="px-3 system-md-regular"
+            onClick={handleOpenInfoModal}
+          >
+            {t('userProfile.about', { ns: 'common' })}
+          </DropdownMenuItem>
+          {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
+            <DropdownMenuItem
+              className="px-3 system-md-regular"
+              onClick={handleLogout}
+            >
+              {t('userProfile.logout', { ns: 'common' })}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
       {show && (
         <InfoModal
           isShow={show}
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx b/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
new file mode 100644
index 0000000000..1d845dd5fc
--- /dev/null
+++ b/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
@@ -0,0 +1,124 @@
+import type { ComponentProps } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useDownloadPlugin } from '@/service/use-plugins'
+import OperationDropdown from '../action'
+
+const mockDownloadBlob = vi.fn()
+const mockRemoveQueries = vi.fn()
+
+vi.mock('next-themes', () => ({
+  useTheme: () => ({
+    theme: 'light',
+  }),
+}))
+
+vi.mock('@/service/use-plugins', () => ({
+  useDownloadPlugin: vi.fn(),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadBlob: (...args: unknown[]) => mockDownloadBlob(...args),
+}))
+
+vi.mock('@/utils/var', () => ({
+  getMarketplaceUrl: (path: string) => `https://marketplace.example${path}`,
+}))
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const renderComponent = (props?: Partial<ComponentProps<typeof OperationDropdown>>) => {
+  const queryClient = createQueryClient()
+  vi.spyOn(queryClient, 'removeQueries').mockImplementation(((...args) => {
+    return mockRemoveQueries(...args)
+  }) as typeof queryClient.removeQueries)
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <OperationDropdown
+        open={false}
+        onOpenChange={vi.fn()}
+        author="langgenius"
+        name="test-plugin"
+        version="1.0.0"
+        {...props}
+      />
+    </QueryClientProvider>,
+  )
+}
+
+describe('OperationDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useDownloadPlugin).mockImplementation((_, enabled) => ({
+      data: enabled ? null : null,
+      isLoading: false,
+    }) as unknown as ReturnType<typeof useDownloadPlugin>)
+  })
+
+  it('should render download and view details actions when opened', async () => {
+    renderComponent({ open: true })
+
+    expect(screen.getByText('common.operation.download')).toBeInTheDocument()
+    expect(screen.getByText('common.operation.viewDetails')).toBeInTheDocument()
+  })
+
+  it('should request a download when download is clicked', async () => {
+    const onOpenChange = vi.fn()
+    renderComponent({ open: true, onOpenChange })
+
+    await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+    expect(mockRemoveQueries).toHaveBeenCalled()
+  })
+
+  it('should skip download when already loading', async () => {
+    vi.mocked(useDownloadPlugin).mockReturnValue({
+      data: null,
+      isLoading: true,
+    } as unknown as ReturnType<typeof useDownloadPlugin>)
+
+    renderComponent({ open: true })
+
+    await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+    expect(mockRemoveQueries).not.toHaveBeenCalled()
+  })
+
+  it('should download the blob when the hook returns data', async () => {
+    vi.mocked(useDownloadPlugin).mockImplementation((_, enabled) => ({
+      data: enabled ? new Blob(['plugin zip'], { type: 'application/zip' }) : null,
+      isLoading: false,
+    }) as unknown as ReturnType<typeof useDownloadPlugin>)
+
+    renderComponent({ open: true })
+
+    await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+    await waitFor(() => {
+      expect(mockDownloadBlob).toHaveBeenCalledWith({
+        data: expect.any(Blob),
+        fileName: 'langgenius-test-plugin_1.0.0.zip',
+      })
+    })
+    expect(mockRemoveQueries).toHaveBeenCalled()
+  })
+
+  it('should link to the marketplace detail page', () => {
+    renderComponent({ open: true })
+
+    expect(screen.getByRole('menuitem', { name: 'common.operation.viewDetails' })).toHaveAttribute(
+      'href',
+      'https://marketplace.example/plugins/langgenius/test-plugin',
+    )
+  })
+})
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index 4ae623ffc1..a058e8c051 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -1,19 +1,19 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-// import { Button } from '@/app/components/base/ui/button'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { useDownloadPlugin } from '@/service/use-plugins'
 import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -36,16 +36,10 @@ const OperationDropdown: FC<Props> = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const queryClient = useQueryClient()
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    onOpenChange(v)
-    openRef.current = v
+  const setOpen = useCallback((value: boolean) => {
+    onOpenChange(value)
   }, [onOpenChange])
 
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
-
   const [needDownload, setNeedDownload] = useState(false)
   const downloadInfo = useMemo(() => ({
     organization: author,
@@ -56,12 +50,13 @@ const OperationDropdown: FC<Props> = ({
   const handleDownload = useCallback(() => {
     if (isLoading)
       return
+    setOpen(false)
     queryClient.removeQueries({
       queryKey: ['plugins', 'downloadPlugin', downloadInfo],
       exact: true,
     })
     setNeedDownload(true)
-  }, [downloadInfo, isLoading, queryClient])
+  }, [downloadInfo, isLoading, queryClient, setOpen])
 
   useEffect(() => {
     if (!needDownload || !blob)
@@ -75,27 +70,33 @@ const OperationDropdown: FC<Props> = ({
     })
   }, [author, blob, downloadInfo, name, needDownload, queryClient, version])
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 0,
-        crossAxis: 0,
-      }}
     >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
+      <DropdownMenuTrigger render={<div />}>
         <ActionButton className={cn(open && 'bg-state-base-hover')}>
-          <RiMoreFill className="h-4 w-4 text-components-button-secondary-accent-text" />
+          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-components-button-secondary-accent-text" />
         </ActionButton>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-9999">
-        <div className="min-w-[176px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          <div onClick={handleDownload} className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
-          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="block cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="min-w-[176px]"
+      >
+        <DropdownMenuItem className="system-md-regular" onClick={handleDownload}>
+          {t('operation.download', { ns: 'common' })}
+        </DropdownMenuItem>
+        <DropdownMenuLinkItem
+          className="system-md-regular"
+          href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t('operation.viewDetails', { ns: 'common' })}
+        </DropdownMenuLinkItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(OperationDropdown)
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 6762c2bfb1..339db8945b 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -9,7 +9,6 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/tooltip`
   - `@/app/components/base/modal`
   - `@/app/components/base/select` (including `custom` / `pure`)
-  - `@/app/components/base/dropdown`
   - `@/app/components/base/dialog`
   - `@/app/components/base/toast` (including `context`)
 - Replacement primitives:
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index fb912d6524..57a14fc22d 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -52,13 +52,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
     ],
     message: 'Deprecated: use @/app/components/base/ui/select instead. See issue #32767.',
   },
-  {
-    group: [
-      '**/base/dropdown',
-      '**/base/dropdown/index',
-    ],
-    message: 'Deprecated: use @/app/components/base/ui/dropdown-menu instead. See issue #32767.',
-  },
   {
     group: [
       '**/base/dialog',
@@ -80,7 +73,6 @@ export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
   'app/components/base/chip/index.tsx',
   'app/components/base/date-and-time-picker/date-picker/index.tsx',
   'app/components/base/date-and-time-picker/time-picker/index.tsx',
-  'app/components/base/dropdown/index.tsx',
   'app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx',
   'app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx',
   'app/components/base/file-uploader/file-from-link-or-local/index.tsx',

From 90384b26b3e4677e7d909f356fb2f5d49942e19f Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Thu, 16 Apr 2026 16:58:52 +0800
Subject: [PATCH 107/108] merge

---
 api/controllers/console/__init__.py                        | 2 +-
 api/controllers/console/app/app.py                         | 2 +-
 api/core/evaluation/base_evaluation_instance.py            | 3 ++-
 api/core/evaluation/entities/judgment_entity.py            | 3 +--
 api/core/evaluation/judgment/processor.py                  | 5 +++--
 api/core/evaluation/runners/agent_evaluation_runner.py     | 3 ++-
 api/core/evaluation/runners/base_evaluation_runner.py      | 3 ++-
 api/core/evaluation/runners/llm_evaluation_runner.py       | 3 ++-
 api/core/evaluation/runners/retrieval_evaluation_runner.py | 3 ++-
 api/core/evaluation/runners/snippet_evaluation_runner.py   | 3 ++-
 api/core/evaluation/runners/workflow_evaluation_runner.py  | 3 ++-
 api/models/evaluation.py                                   | 2 +-
 api/services/billing_service.py                            | 2 ++
 api/services/evaluation_service.py                         | 6 +++---
 api/services/snippet_dsl_service.py                        | 4 ++--
 api/services/snippet_generate_service.py                   | 2 +-
 api/services/snippet_service.py                            | 2 +-
 api/services/workflow_service.py                           | 2 +-
 api/tasks/evaluation_task.py                               | 2 +-
 api/tests/unit_tests/services/test_webhook_service.py      | 6 ------
 20 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/api/controllers/console/__init__.py b/api/controllers/console/__init__.py
index 5e9cfe8f3f..9249f891c4 100644
--- a/api/controllers/console/__init__.py
+++ b/api/controllers/console/__init__.py
@@ -120,10 +120,10 @@ from .explore import (
     saved_message,
     trial,
 )
-from .socketio import workflow as socketio_workflow  # pyright: ignore[reportUnusedImport]
 
 # Import snippet controllers
 from .snippets import snippet_workflow, snippet_workflow_draft_variable
+from .socketio import workflow as socketio_workflow  # pyright: ignore[reportUnusedImport]
 
 # Import tag controllers
 from .tag import tags
diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index 06810d7094..214545bac8 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -568,7 +568,7 @@ class AppApi(Resource):
             row = db.session.execute(
                 select(Workflow.type).where(Workflow.id == app_model.workflow_id)
             ).scalar()
-            app_model.workflow_type = row if row else None
+            app_model.workflow_type = row or None
         else:
             app_model.workflow_type = None
 
diff --git a/api/core/evaluation/base_evaluation_instance.py b/api/core/evaluation/base_evaluation_instance.py
index 67fbf0374c..76cbe2f9c5 100644
--- a/api/core/evaluation/base_evaluation_instance.py
+++ b/api/core/evaluation/base_evaluation_instance.py
@@ -3,6 +3,8 @@ from abc import ABC, abstractmethod
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.node_events.base import NodeRunResult
+
 from core.evaluation.entities.evaluation_entity import (
     CustomizedMetrics,
     EvaluationCategory,
@@ -11,7 +13,6 @@ from core.evaluation.entities.evaluation_entity import (
     EvaluationMetric,
     NodeInfo,
 )
-from graphon.node_events.base import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/entities/judgment_entity.py b/api/core/evaluation/entities/judgment_entity.py
index 4a59879c06..c871d95520 100644
--- a/api/core/evaluation/entities/judgment_entity.py
+++ b/api/core/evaluation/entities/judgment_entity.py
@@ -26,9 +26,8 @@ Typical usage::
 from collections.abc import Sequence
 from typing import Any, Literal
 
-from pydantic import BaseModel, Field
-
 from graphon.utils.condition.entities import SupportedComparisonOperator
+from pydantic import BaseModel, Field
 
 
 class JudgmentCondition(BaseModel):
diff --git a/api/core/evaluation/judgment/processor.py b/api/core/evaluation/judgment/processor.py
index 7a0ce38b75..7bf4cdf5f5 100644
--- a/api/core/evaluation/judgment/processor.py
+++ b/api/core/evaluation/judgment/processor.py
@@ -14,14 +14,15 @@ import logging
 from collections.abc import Sequence
 from typing import Any, cast
 
+from graphon.utils.condition.entities import SupportedComparisonOperator
+from graphon.utils.condition.processor import _evaluate_condition  # pyright: ignore[reportPrivateUsage]
+
 from core.evaluation.entities.judgment_entity import (
     JudgmentCondition,
     JudgmentConditionResult,
     JudgmentConfig,
     JudgmentResult,
 )
-from graphon.utils.condition.entities import SupportedComparisonOperator
-from graphon.utils.condition.processor import _evaluate_condition  # pyright: ignore[reportPrivateUsage]
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/runners/agent_evaluation_runner.py b/api/core/evaluation/runners/agent_evaluation_runner.py
index ef3bbe704c..fbeca41cf9 100644
--- a/api/core/evaluation/runners/agent_evaluation_runner.py
+++ b/api/core/evaluation/runners/agent_evaluation_runner.py
@@ -2,6 +2,8 @@ import logging
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.node_events import NodeRunResult
+
 from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
 from core.evaluation.entities.evaluation_entity import (
     DefaultMetric,
@@ -9,7 +11,6 @@ from core.evaluation.entities.evaluation_entity import (
     EvaluationItemResult,
 )
 from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
-from graphon.node_events import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/runners/base_evaluation_runner.py b/api/core/evaluation/runners/base_evaluation_runner.py
index 9046c2ddad..fe3fb7c61f 100644
--- a/api/core/evaluation/runners/base_evaluation_runner.py
+++ b/api/core/evaluation/runners/base_evaluation_runner.py
@@ -11,12 +11,13 @@ persisting to the database) is handled by the evaluation task, not the runner.
 import logging
 from abc import ABC, abstractmethod
 
+from graphon.node_events import NodeRunResult
+
 from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
 from core.evaluation.entities.evaluation_entity import (
     DefaultMetric,
     EvaluationItemResult,
 )
-from graphon.node_events import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/runners/llm_evaluation_runner.py b/api/core/evaluation/runners/llm_evaluation_runner.py
index 4b1c244838..b9322a11cc 100644
--- a/api/core/evaluation/runners/llm_evaluation_runner.py
+++ b/api/core/evaluation/runners/llm_evaluation_runner.py
@@ -2,6 +2,8 @@ import logging
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.node_events import NodeRunResult
+
 from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
 from core.evaluation.entities.evaluation_entity import (
     DefaultMetric,
@@ -9,7 +11,6 @@ from core.evaluation.entities.evaluation_entity import (
     EvaluationItemResult,
 )
 from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
-from graphon.node_events import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/runners/retrieval_evaluation_runner.py b/api/core/evaluation/runners/retrieval_evaluation_runner.py
index 66b8ab7360..5188e05451 100644
--- a/api/core/evaluation/runners/retrieval_evaluation_runner.py
+++ b/api/core/evaluation/runners/retrieval_evaluation_runner.py
@@ -1,6 +1,8 @@
 import logging
 from typing import Any
 
+from graphon.node_events import NodeRunResult
+
 from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
 from core.evaluation.entities.evaluation_entity import (
     DefaultMetric,
@@ -8,7 +10,6 @@ from core.evaluation.entities.evaluation_entity import (
     EvaluationItemResult,
 )
 from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
-from graphon.node_events import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/runners/snippet_evaluation_runner.py b/api/core/evaluation/runners/snippet_evaluation_runner.py
index bc516f9ee8..7c5be24144 100644
--- a/api/core/evaluation/runners/snippet_evaluation_runner.py
+++ b/api/core/evaluation/runners/snippet_evaluation_runner.py
@@ -8,6 +8,8 @@ import logging
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.node_events import NodeRunResult
+
 from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
 from core.evaluation.entities.evaluation_entity import (
     DefaultMetric,
@@ -15,7 +17,6 @@ from core.evaluation.entities.evaluation_entity import (
     EvaluationItemResult,
 )
 from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
-from graphon.node_events import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/evaluation/runners/workflow_evaluation_runner.py b/api/core/evaluation/runners/workflow_evaluation_runner.py
index e1cc9defdb..9f64aaa70d 100644
--- a/api/core/evaluation/runners/workflow_evaluation_runner.py
+++ b/api/core/evaluation/runners/workflow_evaluation_runner.py
@@ -2,6 +2,8 @@ import logging
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.node_events import NodeRunResult
+
 from core.evaluation.base_evaluation_instance import BaseEvaluationInstance
 from core.evaluation.entities.evaluation_entity import (
     DefaultMetric,
@@ -9,7 +11,6 @@ from core.evaluation.entities.evaluation_entity import (
     EvaluationItemResult,
 )
 from core.evaluation.runners.base_evaluation_runner import BaseEvaluationRunner
-from graphon.node_events import NodeRunResult
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/models/evaluation.py b/api/models/evaluation.py
index 680d6ab31c..fce50c5f48 100644
--- a/api/models/evaluation.py
+++ b/api/models/evaluation.py
@@ -85,7 +85,7 @@ class EvaluationConfiguration(Base):
         """Return judgment config (stored in the judgement_conditions column)."""
         if self.judgement_conditions:
             parsed = json.loads(self.judgement_conditions)
-            return parsed if parsed else None
+            return parsed or None
         return None
 
     @property
diff --git a/api/services/billing_service.py b/api/services/billing_service.py
index eeaddfee2f..068c93d94f 100644
--- a/api/services/billing_service.py
+++ b/api/services/billing_service.py
@@ -53,6 +53,8 @@ class QuotaReleaseResult(TypedDict):
 _quota_reserve_adapter = TypeAdapter(QuotaReserveResult)
 _quota_commit_adapter = TypeAdapter(QuotaCommitResult)
 _quota_release_adapter = TypeAdapter(QuotaReleaseResult)
+
+
 class _BillingQuota(TypedDict):
     size: int
     limit: int
diff --git a/api/services/evaluation_service.py b/api/services/evaluation_service.py
index 196af2a617..3f4500c061 100644
--- a/api/services/evaluation_service.py
+++ b/api/services/evaluation_service.py
@@ -4,6 +4,8 @@ import logging
 from collections.abc import Mapping
 from typing import Any, Union
 
+from graphon.enums import WorkflowNodeExecutionMetadataKey
+from graphon.node_events.base import NodeRunResult
 from openpyxl import Workbook, load_workbook
 from openpyxl.styles import Alignment, Border, Font, PatternFill, Side
 from openpyxl.utils import get_column_letter
@@ -23,8 +25,6 @@ from core.evaluation.entities.evaluation_entity import (
     NodeInfo,
 )
 from core.evaluation.evaluation_manager import EvaluationManager
-from graphon.enums import WorkflowNodeExecutionMetadataKey
-from graphon.node_events.base import NodeRunResult
 from models.evaluation import (
     EvaluationConfiguration,
     EvaluationRun,
@@ -813,9 +813,9 @@ class EvaluationService:
         workflow_run_id: str,
     ) -> dict[str, NodeRunResult]:
         """Query all node execution records for a workflow run."""
+        from graphon.enums import WorkflowNodeExecutionStatus
         from sqlalchemy import asc, select
 
-        from graphon.enums import WorkflowNodeExecutionStatus
         from models.workflow import WorkflowNodeExecutionModel
 
         stmt = (
diff --git a/api/services/snippet_dsl_service.py b/api/services/snippet_dsl_service.py
index f074a40f09..8dbd7085b7 100644
--- a/api/services/snippet_dsl_service.py
+++ b/api/services/snippet_dsl_service.py
@@ -7,6 +7,8 @@ from enum import StrEnum
 from urllib.parse import urlparse
 
 import yaml  # type: ignore
+from graphon.enums import BuiltinNodeTypes
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from packaging import version
 from pydantic import BaseModel, Field
 from sqlalchemy import select
@@ -15,8 +17,6 @@ from sqlalchemy.orm import Session
 from core.helper import ssrf_proxy
 from core.plugin.entities.plugin import PluginDependency
 from extensions.ext_redis import redis_client
-from graphon.enums import BuiltinNodeTypes
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from models import Account
 from models.snippet import CustomizedSnippet, SnippetType
 from models.workflow import Workflow
diff --git a/api/services/snippet_generate_service.py b/api/services/snippet_generate_service.py
index 5e0d25c8f7..230128d2b2 100644
--- a/api/services/snippet_generate_service.py
+++ b/api/services/snippet_generate_service.py
@@ -23,13 +23,13 @@ import logging
 from collections.abc import Generator, Mapping, Sequence
 from typing import Any, Union
 
+from graphon.file.models import File
 from sqlalchemy.orm import make_transient
 
 from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
 from core.app.apps.workflow.app_generator import WorkflowAppGenerator
 from core.app.entities.app_invoke_entities import InvokeFrom
 from factories import file_factory
-from graphon.file.models import File
 from models import Account
 from models.model import AppMode, EndUser
 from models.snippet import CustomizedSnippet
diff --git a/api/services/snippet_service.py b/api/services/snippet_service.py
index a2cdc23f3d..f3b383d98b 100644
--- a/api/services/snippet_service.py
+++ b/api/services/snippet_service.py
@@ -4,12 +4,12 @@ from collections.abc import Mapping, Sequence
 from datetime import UTC, datetime
 from typing import Any
 
+from graphon.enums import BuiltinNodeTypes, NodeType
 from sqlalchemy import func, select
 from sqlalchemy.orm import Session, sessionmaker
 
 from core.workflow.node_factory import LATEST_VERSION, NODE_TYPE_CLASSES_MAPPING
 from extensions.ext_database import db
-from graphon.enums import BuiltinNodeTypes, NodeType
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from models import Account
 from models.enums import WorkflowRunTriggeredFrom
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index b4ae59f1b4..aab41efe50 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -5,7 +5,7 @@ import uuid
 from collections.abc import Callable, Generator, Mapping, Sequence
 from typing import Any, cast
 
-from graphon.entities import GraphInitParams, WorkflowNodeExecution
+from graphon.entities import WorkflowNodeExecution
 from graphon.entities.graph_config import NodeConfigDict
 from graphon.entities.pause_reason import HumanInputRequired
 from graphon.enums import (
diff --git a/api/tasks/evaluation_task.py b/api/tasks/evaluation_task.py
index 4e3f7acb2e..838a2b5d4b 100644
--- a/api/tasks/evaluation_task.py
+++ b/api/tasks/evaluation_task.py
@@ -4,6 +4,7 @@ import logging
 from typing import Any
 
 from celery import shared_task
+from graphon.node_events import NodeRunResult
 from openpyxl import Workbook
 from openpyxl.styles import Alignment, Border, Font, PatternFill, Side
 from openpyxl.utils import get_column_letter
@@ -27,7 +28,6 @@ from core.evaluation.runners.retrieval_evaluation_runner import RetrievalEvaluat
 from core.evaluation.runners.snippet_evaluation_runner import SnippetEvaluationRunner
 from core.evaluation.runners.workflow_evaluation_runner import WorkflowEvaluationRunner
 from extensions.ext_database import db
-from graphon.node_events import NodeRunResult
 from libs.datetime_utils import naive_utc_now
 from models.enums import CreatorUserRole
 from models.evaluation import EvaluationRun, EvaluationRunItem, EvaluationRunStatus
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index 02fbe473df..bf645f9795 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -561,18 +561,13 @@ class TestWebhookServiceUnit:
             assert result == (mock_trigger, mock_workflow, mock_config, mock_data, None)
 
 
-
 # === Merged from test_webhook_service_additional.py ===
 
 
 from types import SimpleNamespace
 from typing import Any, cast
-from unittest.mock import MagicMock
 
-import pytest
-from flask import Flask
 from graphon.variables.types import SegmentType
-from werkzeug.datastructures import FileStorage
 from werkzeug.exceptions import RequestEntityTooLarge
 
 from core.workflow.nodes.trigger_webhook.entities import (
@@ -587,7 +582,6 @@ from models.trigger import WorkflowWebhookTrigger
 from models.workflow import Workflow
 from services.errors.app import QuotaExceededError
 from services.trigger import webhook_service as service_module
-from services.trigger.webhook_service import WebhookService
 
 
 class _FakeQuery:

From fa74a4ed675594534336e0de1fa226344f8e5884 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 17 Apr 2026 08:29:13 +0000
Subject: [PATCH 108/108] Merge deploy/dev into feat/evaluation - resolve merge
 conflicts

Agent-Logs-Url: https://github.com/langgenius/dify/sessions/489dd945-dfff-462a-9c76-d29fdaa55de2

Co-authored-by: FFXN <31929997+FFXN@users.noreply.github.com>
---
 .../frontend-testing/references/mocking.md    |    4 +-
 .github/workflows/style.yml                   |   14 +-
 .gitignore                                    |    3 -
 .vite-hooks/pre-commit                        |   45 +-
 api/controllers/console/__init__.py           |    6 +
 api/controllers/console/app/app.py            |    4 +-
 api/controllers/console/app/audio.py          |    2 +-
 api/controllers/console/app/completion.py     |    2 +-
 api/controllers/console/app/generator.py      |    2 +-
 api/controllers/console/app/mcp_server.py     |   32 +-
 api/controllers/console/app/workflow.py       |   13 +-
 .../console/app/workflow_app_log.py           |    2 +-
 api/controllers/console/app/workflow_run.py   |    4 +-
 api/controllers/console/auth/oauth_server.py  |    2 +-
 api/controllers/console/datasets/datasets.py  |    2 +-
 .../console/datasets/datasets_document.py     |  170 +-
 .../console/datasets/datasets_segments.py     |    2 +-
 .../console/datasets/hit_testing_base.py      |    2 +-
 .../datasets/rag_pipeline/datasource_auth.py  |    4 +-
 .../rag_pipeline_draft_variable.py            |    2 +-
 .../rag_pipeline/rag_pipeline_workflow.py     |    2 +-
 api/controllers/console/explore/audio.py      |    2 +-
 api/controllers/console/explore/completion.py |    2 +-
 api/controllers/console/explore/message.py    |    2 +-
 api/controllers/console/explore/trial.py      |    4 +-
 api/controllers/console/explore/workflow.py   |    4 +-
 api/controllers/console/remote_files.py       |    2 +-
 .../console/workspace/agent_providers.py      |    2 +-
 api/controllers/console/workspace/endpoint.py |    2 +-
 .../workspace/load_balancing_config.py        |    4 +-
 .../console/workspace/model_providers.py      |    6 +-
 api/controllers/console/workspace/models.py   |    6 +-
 api/controllers/console/workspace/plugin.py   |    2 +-
 .../console/workspace/tool_providers.py       |    2 +-
 .../console/workspace/trigger_providers.py    |    2 +-
 api/controllers/inner_api/plugin/plugin.py    |    2 +-
 api/controllers/inner_api/plugin/wraps.py     |   16 +-
 api/controllers/mcp/mcp.py                    |    2 +-
 api/controllers/service_api/app/audio.py      |    2 +-
 api/controllers/service_api/app/completion.py |    2 +-
 .../service_api/app/conversation.py           |    2 +-
 .../service_api/dataset/dataset.py            |    2 +-
 .../service_api/dataset/segment.py            |    2 +-
 .../service_api/workspace/models.py           |    2 +-
 api/controllers/web/audio.py                  |    2 +-
 api/controllers/web/completion.py             |    2 +-
 api/controllers/web/message.py                |    2 +-
 api/controllers/web/remote_files.py           |    2 +-
 api/controllers/web/workflow.py               |    4 +-
 api/core/agent/base_agent_runner.py           |   28 +-
 api/core/agent/cot_agent_runner.py            |   17 +-
 api/core/agent/cot_chat_agent_runner.py       |    3 +-
 api/core/agent/cot_completion_agent_runner.py |    3 +-
 api/core/agent/fc_agent_runner.py             |   15 +-
 .../agent/output_parser/cot_output_parser.py  |    3 +-
 .../model_config/converter.py                 |    7 +-
 .../easy_ui_based_app/model_config/manager.py |    3 +-
 .../prompt_template/manager.py                |    3 +-
 api/core/app/app_config/entities.py           |    8 +-
 .../features/file_upload/manager.py           |    3 +-
 .../variables/manager.py                      |    3 +-
 .../app/apps/advanced_chat/app_generator.py   |    9 +-
 api/core/app/apps/advanced_chat/app_runner.py |   12 +-
 api/core/app/apps/agent_chat/app_generator.py |    2 +-
 api/core/app/apps/agent_chat/app_runner.py    |    6 +-
 .../base_app_generate_response_converter.py   |    3 +-
 api/core/app/apps/base_app_queue_manager.py   |    2 +-
 api/core/app/apps/base_app_runner.py          |   21 +-
 api/core/app/apps/chat/app_generator.py       |    2 +-
 api/core/app/apps/chat/app_runner.py          |    4 +-
 .../common/graph_runtime_state_support.py     |    3 +-
 .../common/workflow_response_converter.py     |   26 +-
 api/core/app/apps/completion/app_generator.py |    2 +-
 api/core/app/apps/completion/app_runner.py    |    4 +-
 .../app/apps/pipeline/pipeline_generator.py   |    4 +-
 api/core/app/apps/pipeline/pipeline_runner.py |   12 +-
 api/core/app/apps/workflow/app_generator.py   |    8 +-
 api/core/app/apps/workflow/app_runner.py      |   11 +-
 .../apps/workflow/generate_task_pipeline.py   |    6 +-
 api/core/app/apps/workflow_app_runner.py      |   66 +-
 api/core/app/entities/app_invoke_entities.py  |    4 +-
 api/core/app/entities/queue_entities.py       |    8 +-
 api/core/app/entities/task_entities.py        |    8 +-
 .../hosting_moderation/hosting_moderation.py  |    3 +-
 .../app/layers/pause_state_persist_layer.py   |    4 +-
 api/core/app/layers/timeslice_layer.py        |    2 +-
 api/core/app/layers/trigger_post_layer.py     |    4 +-
 api/core/app/llm/model_access.py              |    9 +-
 api/core/app/llm/quota.py                     |    2 +-
 .../based_generate_task_pipeline.py           |    2 +-
 api/core/app/workflow/layers/llm_quota.py     |    9 +-
 api/core/app/workflow/layers/persistence.py   |   15 +-
 .../base/tts/app_generator_tts_publisher.py   |    5 +-
 api/core/datasource/datasource_manager.py     |    6 +-
 api/core/datasource/entities/api_entities.py  |    2 +-
 .../datasource/utils/message_transformer.py   |    3 +-
 api/core/entities/execution_extra_content.py  |    2 +-
 api/core/entities/mcp_provider.py             |    2 +-
 api/core/entities/model_entities.py           |    3 +-
 api/core/entities/provider_configuration.py   |   20 +-
 api/core/entities/provider_entities.py        |    2 +-
 .../helper/code_executor/code_executor.py     |    2 +-
 api/core/helper/moderation.py                 |    7 +-
 api/core/hosting_configuration.py             |    2 +-
 .../output_parser/structured_output.py        |   10 +-
 api/core/mcp/server/streamable_http.py        |    3 +-
 api/core/mcp/utils.py                         |    2 +-
 api/core/memory/token_buffer_memory.py        |   18 +-
 api/core/model_manager.py                     |   19 +-
 api/core/ops/aliyun_trace/aliyun_trace.py     |    4 +-
 api/core/ops/aliyun_trace/utils.py            |    4 +-
 .../arize_phoenix_trace.py                    |    2 +-
 .../ops/langsmith_trace/langsmith_trace.py    |    2 +-
 api/core/ops/mlflow_trace/mlflow_trace.py     |    2 +-
 api/core/ops/opik_trace/opik_trace.py         |    2 +-
 api/core/ops/tencent_trace/span_builder.py    |    4 +-
 api/core/ops/tencent_trace/tencent_trace.py   |    8 +-
 api/core/ops/weave_trace/weave_trace.py       |    2 +-
 api/core/plugin/backwards_invocation/model.py |   27 +-
 api/core/plugin/backwards_invocation/node.py  |    3 +-
 api/core/plugin/entities/plugin.py            |    2 +-
 api/core/plugin/entities/plugin_daemon.py     |    4 +-
 api/core/plugin/entities/request.py           |    8 +-
 api/core/plugin/impl/base.py                  |   16 +-
 api/core/plugin/impl/model.py                 |   13 +-
 api/core/plugin/utils/converter.py            |    3 +-
 api/core/prompt/advanced_prompt_transform.py  |   15 +-
 .../prompt/agent_history_prompt_transform.py  |   11 +-
 api/core/prompt/prompt_transform.py           |    5 +-
 api/core/prompt/simple_prompt_transform.py    |   13 +-
 api/core/prompt/utils/prompt_message_util.py  |    3 +-
 api/core/provider_manager.py                  |   16 +-
 api/core/rag/datasource/retrieval_service.py  |   34 +-
 api/core/rag/datasource/vdb/vector_factory.py |    2 +-
 api/core/rag/docstore/dataset_docstore.py     |    2 +-
 api/core/rag/embedding/cached_embedding.py    |    4 +-
 .../processor/paragraph_index_processor.py    |   20 +-
 api/core/rag/models/document.py               |    3 +-
 api/core/rag/rerank/rerank_model.py           |    5 +-
 api/core/rag/rerank/weight_rerank.py          |    2 +-
 api/core/rag/retrieval/dataset_retrieval.py   |   10 +-
 .../multi_dataset_function_call_router.py     |    5 +-
 api/core/rag/splitter/fixed_text_splitter.py  |    3 +-
 .../celery_workflow_execution_repository.py   |    2 +-
 ...lery_workflow_node_execution_repository.py |    2 +-
 api/core/repositories/factory.py              |    2 +-
 ...qlalchemy_workflow_execution_repository.py |    6 +-
 ...hemy_workflow_node_execution_repository.py |    8 +-
 .../builtin_tool/providers/audio/tools/asr.py |    7 +-
 .../builtin_tool/providers/audio/tools/tts.py |    3 +-
 api/core/tools/builtin_tool/tool.py           |    5 +-
 api/core/tools/custom_tool/tool.py            |    2 +-
 api/core/tools/entities/api_entities.py       |    2 +-
 api/core/tools/mcp_tool/tool.py               |    3 +-
 api/core/tools/tool_engine.py                 |    2 +-
 api/core/tools/tool_file_manager.py           |    2 +-
 api/core/tools/tool_manager.py                |    5 +-
 .../dataset_multi_retriever_tool.py           |    2 +-
 api/core/tools/utils/message_transformer.py   |    2 +-
 .../tools/utils/model_invocation_utils.py     |    7 +-
 .../utils/workflow_configuration_sync.py      |    5 +-
 api/core/tools/workflow_as_tool/provider.py   |    2 +-
 api/core/tools/workflow_as_tool/tool.py       |    4 +-
 api/core/trigger/debug/event_selectors.py     |    2 +-
 api/core/workflow/nodes/agent/entities.py     |    4 +-
 .../nodes/datasource/datasource_node.py       |   13 +-
 .../workflow/nodes/datasource/entities.py     |    5 +-
 .../nodes/knowledge_index/entities.py         |    4 +-
 .../knowledge_index/knowledge_index_node.py   |   11 +-
 .../nodes/knowledge_retrieval/entities.py     |    6 +-
 .../knowledge_retrieval_node.py               |   11 +-
 .../workflow/nodes/trigger_plugin/entities.py |    4 +-
 .../trigger_plugin/trigger_event_node.py      |    5 +-
 .../nodes/trigger_schedule/entities.py        |    4 +-
 .../trigger_schedule/trigger_schedule_node.py |    5 +-
 .../nodes/trigger_webhook/entities.py         |    6 +-
 .../workflow/nodes/trigger_webhook/node.py    |    9 +-
 .../event_handlers/create_document_index.py   |   31 +-
 .../create_site_record_when_app_created.py    |    8 +-
 ...rameters_cache_when_sync_draft_workflow.py |    5 +-
 ...oin_when_app_published_workflow_updated.py |    2 +-
 api/extensions/ext_sentry.py                  |    3 +-
 ..._api_workflow_node_execution_repository.py |    2 +-
 .../logstore_api_workflow_run_repository.py   |    2 +-
 .../logstore_workflow_execution_repository.py |    4 +-
 api/extensions/otel/parser/base.py            |   10 +-
 api/extensions/otel/parser/llm.py             |    4 +-
 api/extensions/otel/parser/retrieval.py       |    6 +-
 api/extensions/otel/parser/tool.py            |    8 +-
 api/factories/variable_factory.py             |   11 +-
 api/fields/member_fields.py                   |    2 +-
 api/fields/message_fields.py                  |    2 +-
 api/fields/raws.py                            |    1 -
 api/fields/workflow_fields.py                 |    2 +-
 api/libs/helper.py                            |    4 +-
 api/models/comment.py                         |    8 +-
 api/models/dataset.py                         |   43 +-
 api/models/human_input.py                     |    2 +-
 api/models/model.py                           |    6 +-
 api/models/provider.py                        |    2 +-
 api/models/workflow.py                        |   29 +-
 .../api_workflow_run_repository.py            |    4 +-
 ..._api_workflow_node_execution_repository.py |    2 +-
 .../sqlalchemy_api_workflow_run_repository.py |    6 +-
 ...hemy_execution_extra_content_repository.py |    6 +-
 api/services/app_dsl_service.py               |   12 +-
 api/services/app_task_service.py              |    3 +-
 api/services/audio_service.py                 |    2 +-
 api/services/billing_service.py               |    2 +
 .../clear_free_plan_tenant_expired_logs.py    |    2 +-
 api/services/conversation_service.py          |    2 +-
 api/services/conversation_variable_updater.py |    2 +-
 api/services/datasource_provider_service.py   |    2 +-
 .../entities/model_provider_entities.py       |   18 +-
 api/services/file_service.py                  |    2 +-
 .../human_input_delivery_test_service.py      |    2 +-
 api/services/human_input_service.py           |   12 +-
 api/services/model_load_balancing_service.py  |   12 +-
 api/services/rag_pipeline/rag_pipeline.py     |   18 +-
 .../rag_pipeline/rag_pipeline_dsl_service.py  |   12 +-
 .../archive_paid_plan_workflow_run.py         |    2 +-
 .../tools/api_tools_manage_service.py         |  353 +-
 api/services/trigger/trigger_service.py       |    2 +-
 api/services/variable_truncator.py            |    3 +-
 api/services/vector_service.py                |    2 +-
 api/services/workflow/workflow_converter.py   |   10 +-
 .../workflow_draft_variable_service.py        |   26 +-
 .../workflow_event_snapshot_service.py        |    8 +-
 api/services/workflow_service.py              |   54 +-
 .../app_generate/workflow_execute_task.py     |    2 +-
 .../batch_create_segment_to_index_task.py     |    2 +-
 api/tasks/human_input_timeout_tasks.py        |    4 +-
 api/tasks/mail_human_input_delivery_task.py   |    2 +-
 api/tasks/trigger_processing_tasks.py         |    9 +-
 api/tasks/workflow_execution_tasks.py         |    4 +-
 api/tasks/workflow_node_execution_tasks.py    |    6 +-
 .../test_datasource_manager_integration.py    |    3 +-
 .../test_datasource_node_integration.py       |    5 +-
 .../model_runtime/__mock/plugin_model.py      |    6 +-
 .../test_workflow_draft_variable_service.py   |    8 +-
 .../test_remove_app_and_related_data_task.py  |    4 +-
 .../workflow/nodes/__mock/model.py            |    3 +-
 .../workflow/nodes/test_code.py               |   10 +-
 .../workflow/nodes/test_http.py               |   13 +-
 .../workflow/nodes/test_llm.py                |   11 +-
 .../nodes/test_parameter_extractor.py         |   11 +-
 .../workflow/nodes/test_template_transform.py |    7 +-
 ...test_chat_conversation_status_count_api.py |    2 +-
 .../layers/test_pause_state_persist_layer.py  |   14 +-
 .../test_human_input_form_repository_impl.py  |    2 +-
 .../test_human_input_resume_node_execution.py |   22 +-
 .../factories/test_storage_key_loader.py      |    2 +-
 ..._api_workflow_node_execution_repository.py |    2 +-
 ..._sqlalchemy_api_workflow_run_repository.py |    8 +-
 .../services/test_agent_service.py            |    1 +
 .../services/test_app_dsl_service.py          |    2 +-
 .../services/test_dataset_service.py          |    2 +-
 .../test_dataset_service_update_dataset.py    |    2 +-
 .../test_delete_archived_workflow_run.py      |    2 +-
 .../test_human_input_delivery_test.py         |    4 +-
 .../services/test_model_provider_service.py   |    8 +-
 .../services/test_workflow_app_service.py     |    2 +-
 .../test_workflow_draft_variable_service.py   |    2 +-
 ...kflow_node_execution_service_repository.py |    2 +-
 .../tasks/test_clean_notion_document_task.py  |  174 +-
 .../test_mail_human_input_delivery_task.py    |    6 +-
 .../test_remove_app_and_related_data_task.py  |    4 +-
 .../test_workflow_pause_integration.py        |    4 +-
 .../trigger/test_trigger_e2e.py               |    2 +-
 .../app/test_workflow_pause_details_api.py    |    8 +-
 .../app/workflow_draft_variables_test.py      |    2 +-
 .../workspace/test_load_balancing_config.py   |    3 +-
 .../controllers/service_api/app/test_audio.py |    2 +-
 .../service_api/app/test_completion.py        |    2 +-
 .../service_api/app/test_conversation.py      |    2 +-
 .../service_api/app/test_workflow.py          |    2 +-
 .../service_api/app/test_workflow_fields.py   |    3 +-
 .../features/file_upload/test_manager.py      |    3 +-
 .../test_app_runner_conversation_variables.py |    2 +-
 .../chat/test_base_app_runner_multimodal.py   |    4 +-
 .../test_graph_runtime_state_support.py       |    2 +-
 .../test_workflow_response_converter.py       |    3 +-
 ...workflow_response_converter_human_input.py |    5 +-
 ..._workflow_response_converter_resumption.py |    5 +-
 ..._workflow_response_converter_truncation.py |    4 +-
 .../core/app/apps/test_base_app_generator.py  |    5 +-
 .../test_workflow_app_runner_notifications.py |    4 +-
 .../test_workflow_app_runner_single_node.py   |    4 +-
 .../app/apps/test_workflow_pause_events.py    |   10 +-
 .../workflow/test_generate_task_pipeline.py   |    5 +-
 ...est_conversation_variable_persist_layer.py |    7 +-
 .../layers/test_pause_state_persist_layer.py  |   20 +-
 ...st_easy_ui_based_generate_task_pipeline.py |    4 +-
 .../datasource/test_datasource_manager.py     |    6 +-
 .../core/mcp/server/test_streamable_http.py   |    2 +-
 .../core/plugin/test_plugin_runtime.py        |   16 +-
 .../core/plugin/utils/test_chunk_merger.py    |    2 +-
 .../prompt/test_advanced_prompt_transform.py  |   14 +-
 .../test_agent_history_prompt_transform.py    |   13 +-
 .../core/prompt/test_prompt_message.py        |    5 +-
 .../rag/embedding/test_embedding_service.py   |    8 +-
 .../core/rag/indexing/test_indexing_runner.py |    2 +-
 ...st_celery_workflow_execution_repository.py |    4 +-
 ...lery_workflow_node_execution_repository.py |    6 +-
 .../test_human_input_form_repository_impl.py  |   10 +-
 ...rkflow_node_execution_conflict_handling.py |   10 +-
 ...test_workflow_node_execution_truncation.py |   10 +-
 api/tests/unit_tests/core/test_file.py        |    1 +
 .../unit_tests/core/test_model_manager.py     |    2 +-
 .../core/test_provider_configuration.py       |   18 +-
 .../utils/test_workflow_configuration_sync.py |    2 +-
 .../core/tools/workflow_as_tool/test_tool.py  |    2 +-
 .../unit_tests/core/variables/test_segment.py |   10 +-
 .../core/variables/test_segment_type.py       |    1 -
 .../variables/test_segment_type_validation.py |    1 -
 .../core/variables/test_variables.py          |    3 +-
 .../workflow/graph_engine/layers/conftest.py  |    6 +-
 .../graph_engine/layers/test_observability.py |    2 +-
 .../graph_engine/test_mock_factory.py         |    3 +-
 .../workflow/graph_engine/test_mock_nodes.py  |    9 +-
 .../test_parallel_human_input_join_resume.py  |   15 +-
 .../graph_engine/test_table_runner.py         |   11 +-
 .../core/workflow/nodes/answer/test_answer.py |    9 +-
 .../workflow/nodes/base/test_base_node.py     |    4 +-
 .../test_get_node_type_classes_mapping.py     |    3 +-
 .../workflow/nodes/code/code_node_spec.py     |    3 +-
 .../nodes/datasource/test_datasource_node.py  |    5 +-
 .../test_http_request_executor.py             |    8 +-
 .../http_request/test_http_request_node.py    |   10 +-
 .../human_input/test_email_delivery_config.py |    3 +-
 .../test_human_input_form_filled_event.py     |    7 +-
 .../test_knowledge_retrieval_node.py          |    8 +-
 .../workflow/nodes/list_operator/node_spec.py |    4 +-
 .../core/workflow/nodes/llm/test_node.py      |   26 +-
 .../test_parameter_extractor_node.py          |    4 +-
 .../core/workflow/nodes/test_base_node.py     |    8 +-
 .../nodes/test_document_extractor_node.py     |    4 +-
 .../core/workflow/nodes/test_if_else.py       |   10 +-
 .../core/workflow/nodes/test_list_operator.py |    4 +-
 .../nodes/test_start_node_json_object.py      |    8 +-
 .../workflow/nodes/webhook/test_exceptions.py |    2 +-
 .../core/workflow/test_variable_pool.py       |   18 +-
 .../core/workflow/test_workflow_entry.py      |   12 +-
 .../test_workflow_entry_redis_channel.py      |    5 +-
 .../factories/test_build_from_mapping.py      |    2 +-
 .../factories/test_variable_factory.py        |   10 +-
 .../libs/_human_input/test_form_service.py    |    2 +-
 .../libs/_human_input/test_models.py          |    2 +-
 .../models/test_conversation_variable.py      |    3 +-
 api/tests/unit_tests/models/test_model.py     |    2 +-
 api/tests/unit_tests/models/test_workflow.py  |    7 +-
 .../unit_tests/models/test_workflow_models.py |    2 +-
 .../services/document_service_validation.py   |    2 +-
 .../services/test_async_workflow_service.py   |    5 -
 .../services/test_conversation_service.py     |  795 ++
 .../services/test_human_input_service.py      |   12 +-
 ...est_model_provider_service_sanitization.py |    4 +-
 .../services/test_variable_truncator.py       |    2 +-
 .../services/test_webhook_service.py          |    6 -
 .../test_workflow_run_service_pause.py        |    2 +-
 .../workflow/test_draft_var_loader_simple.py  |    6 +-
 .../test_workflow_draft_variable_service.py   |    8 +-
 .../test_workflow_event_snapshot_service.py   |    6 +-
 .../test_workflow_human_input_delivery.py     |    6 +-
 .../tasks/test_human_input_timeout_tasks.py   |    2 +-
 api/tests/unit_tests/tools/test_mcp_tool.py   |    2 +-
 .../test_structured_output_parser.py          |    6 +-
 api/uv.lock                                   |   27 +-
 .../assets/vender/workflow/input-field.svg    |    3 +
 .../custom-public/icons.json                  |   10 +-
 .../custom-public/info.json                   |    2 +-
 .../custom-vender/icons.json                  |    7 +-
 .../custom-vender/info.json                   |    2 +-
 sdks/nodejs-client/tsconfig.json              |   12 +-
 .../apps/app-list-browsing-flow.test.tsx      |   50 +-
 web/__tests__/apps/create-app-flow.test.tsx   |   29 +
 .../[appId]/evaluation/page.tsx               |   16 +
 .../(appDetailLayout)/[appId]/layout-main.tsx |   83 +-
 .../__tests__/layout-main.spec.tsx            |  230 +
 .../[datasetId]/evaluation/page.tsx           |   16 +
 .../[datasetId]/layout-main.tsx               |   47 +-
 web/app/(commonLayout)/layout.tsx             |    6 +-
 web/app/(commonLayout)/role-route-guard.tsx   |    2 +-
 .../snippets/[snippetId]/evaluation/page.tsx  |   11 +
 .../snippets/[snippetId]/orchestrate/page.tsx |   11 +
 .../snippets/[snippetId]/page.spec.ts         |   21 +
 .../snippets/[snippetId]/page.tsx             |   11 +
 web/app/(commonLayout)/snippets/page.tsx      |   12 +
 .../app-sidebar/__tests__/index.spec.tsx      |   15 +
 .../__tests__/app-info-detail-panel.spec.tsx  |   13 +-
 .../app-info/app-info-detail-panel.tsx        |   14 +-
 web/app/components/app-sidebar/basic.tsx      |    8 +-
 .../app-sidebar/dataset-info/menu-item.tsx    |    2 +-
 web/app/components/app-sidebar/index.tsx      |   12 +-
 .../nav-link/__tests__/index.spec.tsx         |   16 +
 .../components/app-sidebar/nav-link/index.tsx |   36 +-
 .../snippet-info/__tests__/dropdown.spec.tsx  |  285 +
 .../snippet-info/__tests__/index.spec.tsx     |   62 +
 .../app-sidebar/snippet-info/dropdown.tsx     |  198 +
 .../app-sidebar/snippet-info/index.tsx        |   55 +
 .../app-publisher/__tests__/index.spec.tsx    |  208 +-
 .../app-publisher/__tests__/sections.spec.tsx |   73 +
 ...luation-workflow-switch-confirm-dialog.tsx |  158 +
 .../components/app/app-publisher/index.tsx    |  229 +-
 .../components/app/app-publisher/sections.tsx |  106 +-
 .../config-prompt/advanced-prompt-input.tsx   |    4 +-
 .../config-prompt/simple-prompt-input.tsx     |    4 +-
 .../app/configuration/config-var/index.tsx    |    6 +-
 .../config/automatic/get-automatic-res.tsx    |    2 +-
 .../code-generator/get-code-generator-res.tsx |    2 +-
 .../params-config/weighted-score.tsx          |   20 +-
 .../debug-with-multiple-model/debug-item.tsx  |    4 +-
 .../__tests__/evaluation-cell.spec.tsx        |   75 +
 .../app/workflow-log/__tests__/index.spec.tsx |    1 +
 .../app/workflow-log/__tests__/list.spec.tsx  |  203 +-
 .../app/workflow-log/evaluation-cell.tsx      |  100 +
 web/app/components/app/workflow-log/list.tsx  |   14 +-
 .../components/apps/__tests__/empty.spec.tsx  |   22 +-
 .../components/apps/__tests__/list.spec.tsx   |  459 +-
 .../components/apps/app-type-filter-shared.ts |   16 +
 web/app/components/apps/app-type-filter.tsx   |   72 +
 web/app/components/apps/creators-filter.tsx   |  219 +
 web/app/components/apps/empty.tsx             |    9 +-
 .../__tests__/use-apps-query-state.spec.tsx   |   49 +-
 .../apps/hooks/use-apps-query-state.ts        |    8 +-
 web/app/components/apps/index.tsx             |   16 +-
 web/app/components/apps/list.tsx              |  300 +-
 .../components/apps/studio-route-switch.tsx   |   48 +
 .../base/audio-gallery/AudioPlayer.tsx        |    4 +-
 .../__tests__/chat-wrapper.spec.tsx           |  126 +-
 .../header/__tests__/index.spec.tsx           |   29 +-
 .../chat-with-history/header/operation.tsx    |    2 +-
 .../base/chat/chat-with-history/hooks.tsx     |    2 +-
 .../chat-with-history/sidebar/operation.tsx   |    2 +-
 .../base/chat/chat/citation/popup.tsx         |   18 +-
 web/app/components/base/chat/utils.ts         |   12 +-
 web/app/components/base/copy-icon/index.tsx   |    4 +-
 .../base/corner-label/index.stories.tsx       |    2 +-
 .../annotation-reply/config-param.tsx         |    4 +-
 .../__tests__/index.spec.tsx                  |   31 +-
 .../moderation/moderation-setting-modal.tsx   |    4 +-
 .../mixed-variable-text-input/placeholder.tsx |    4 +-
 .../base/form/hooks/use-check-validated.ts    |    2 +-
 .../base/grid-mask/__tests__/index.spec.tsx   |   32 +-
 .../src/vender/line/development/index.ts      |    1 -
 .../components/base/image-uploader/hooks.ts   |   12 +-
 .../image-uploader/image-list.stories.tsx     |    4 +-
 .../base/input/__tests__/index.spec.tsx       |   48 +-
 .../components/base/logo/index.stories.tsx    |    8 +-
 .../__tests__/code-block.spec.tsx             |   58 +-
 .../markdown-blocks/__tests__/form.spec.tsx   |   33 +-
 .../base/markdown/__tests__/index.spec.tsx    |    8 +-
 .../base/modal-like-wrap/index.stories.tsx    |    4 +-
 web/app/components/base/notion-icon/index.tsx |    2 +-
 .../page-selector/__tests__/index.spec.tsx    |   90 +-
 .../component-picker-block/prompt-option.tsx  |    2 +-
 .../__tests__/component.spec.tsx              |   14 +-
 .../__tests__/pre-populate.spec.tsx           |    6 +-
 .../plugins/query-block/component.tsx         |    2 +-
 .../__tests__/component.spec.tsx              |    6 +-
 .../plugins/workflow-variable-block/node.tsx  |   18 +-
 .../base/prompt-log-modal/index.tsx           |    4 +-
 .../components/base/select/locale-signin.tsx  |    2 +-
 web/app/components/base/spinner/index.tsx     |    2 +-
 .../components/base/tag-management/index.tsx  |    4 +-
 .../components/base/tag-management/panel.tsx  |   10 +-
 .../cloud-plan-item/__tests__/index.spec.tsx  |   57 +-
 .../pricing/plans/cloud-plan-item/index.tsx   |   16 +-
 .../snippet-and-evaluation-plan-guard.tsx     |   40 +
 web/app/components/billing/utils/index.ts     |   19 +
 .../datasets/common/image-previewer/index.tsx |   22 +-
 .../datasets/create/step-one/upgrade-card.tsx |    4 +-
 .../create/step-two/__tests__/index.spec.tsx  |  189 +-
 .../components/__tests__/inputs.spec.tsx      |   27 +-
 .../firecrawl/__tests__/options.spec.tsx      |   63 +-
 .../watercrawl/__tests__/options.spec.tsx     |   44 +-
 .../components/__tests__/operations.spec.tsx  |   33 +-
 .../document-list/__tests__/index.spec.tsx    |   81 +-
 .../__tests__/document-table-row.spec.tsx     |   51 +-
 .../website-crawl/base/options/index.tsx      |    2 +-
 .../process-documents/form.tsx                |    2 +-
 .../query-input/__tests__/index.spec.tsx      |   59 +-
 .../__tests__/modal.spec.tsx                  |   72 +-
 .../__tests__/index.spec.tsx                  |  136 +-
 .../index-method/__tests__/index.spec.tsx     |   29 +-
 .../settings/index-method/keyword-number.tsx  |   10 +-
 .../settings/permission-selector/index.tsx    |   12 +-
 .../default-metric-descriptions.spec.ts       |   34 +
 .../evaluation/__tests__/index.spec.tsx       |  519 ++
 .../evaluation/__tests__/store.spec.ts        |  456 +
 .../batch-test-panel/history-tab.tsx          |  202 +
 .../components/batch-test-panel/index.tsx     |  120 +
 .../batch-test-panel/input-fields-tab.tsx     |   71 +
 .../input-fields-requirements.tsx             |   45 +
 .../input-fields/input-fields-utils.ts        |   54 +
 .../input-fields/upload-run-popover.tsx       |  189 +
 .../input-fields/use-input-fields-actions.ts  |  167 +
 .../use-published-input-fields.ts             |   29 +
 .../add-condition-select.tsx                  |   75 +
 .../conditions-section/condition-group.tsx    |  302 +
 .../components/conditions-section/index.tsx   |   51 +
 .../__tests__/index.spec.tsx                  |  364 +
 .../__tests__/workflow-selector.spec.tsx      |  158 +
 .../components/custom-metric-editor/index.tsx |  217 +
 .../custom-metric-editor/mapping-row.tsx      |   64 +
 .../published-graph-variable-picker.tsx       |  118 +
 .../workflow-selector.tsx                     |  214 +
 .../components/judge-model-selector.tsx       |   48 +
 .../layout/non-pipeline-evaluation.tsx        |   62 +
 .../components/layout/pipeline-evaluation.tsx |   96 +
 .../metric-section/__tests__/index.spec.tsx   |  229 +
 .../metric-section/builtin-metric-card.tsx    |  161 +
 .../metric-section/custom-metric-card.tsx     |   63 +
 .../components/metric-section/index.tsx       |   95 +
 .../components/metric-section/metric-card.tsx |   39 +
 .../metric-section-empty-state.tsx            |   18 +
 .../components/metric-selector/index.tsx      |  151 +
 .../metric-selector/selector-empty-state.tsx  |   26 +
 .../metric-selector/selector-footer.tsx       |   33 +
 .../selector-metric-section.tsx               |  135 +
 .../components/metric-selector/types.ts       |   17 +
 .../use-metric-selector-data.ts               |  176 +
 .../components/metric-selector/utils.ts       |   77 +
 .../pipeline/pipeline-batch-actions.tsx       |   70 +
 .../pipeline/pipeline-metric-item.tsx         |   91 +
 .../pipeline/pipeline-metrics-section.tsx     |  118 +
 .../pipeline/pipeline-results-panel.tsx       |  134 +
 .../pipeline/pipeline-results-table.tsx       |  118 +
 .../pipeline/pipeline-results-utils.ts        |  179 +
 .../evaluation/components/section-header.tsx  |   76 +
 .../evaluation/default-metric-descriptions.ts |   79 +
 web/app/components/evaluation/index.tsx       |   46 +
 web/app/components/evaluation/mock.ts         |  179 +
 web/app/components/evaluation/store-utils.ts  |  696 ++
 web/app/components/evaluation/store.ts        |  456 +
 web/app/components/evaluation/types.ts        |  153 +
 web/app/components/evaluation/utils.ts        |  131 +
 .../data-source-page-new/operator.tsx         |   10 +-
 .../header/account-setting/index.tsx          |    2 +-
 .../key-validator/KeyInput.tsx                |    4 +-
 .../account-setting/members-page/index.tsx    |   28 +-
 .../members-page/operation/index.tsx          |   81 +-
 .../model-auth/credential-selector.tsx        |    8 +-
 .../status-indicators.tsx                     |    4 +-
 .../model-load-balancing-modal.tsx            |    2 +-
 web/app/components/header/app-nav/index.tsx   |    2 +-
 web/app/components/header/header-wrapper.tsx  |    2 +-
 web/app/components/header/index.tsx           |    6 +-
 .../plugins/marketplace/description/index.tsx |   18 +-
 .../search-box/__tests__/index.spec.tsx       |  187 +-
 .../sort-dropdown/__tests__/index.spec.tsx    |  769 +-
 .../marketplace/sort-dropdown/index.tsx       |   85 +-
 .../__tests__/detail-header.spec.tsx          |  104 +-
 .../app-selector/__tests__/index.spec.tsx     |  340 +-
 .../app-selector/app-picker.tsx               |    8 +-
 .../app-selector/index.tsx                    |    2 +-
 .../__tests__/tts-params-panel.spec.tsx       |  172 +-
 .../__tests__/index.spec.tsx                  |   16 +-
 .../components/reasoning-config-form.tsx      |    4 +-
 .../plugin-item/__tests__/action.spec.tsx     |  112 +-
 .../plugin-tasks/__tests__/index.spec.tsx     |  121 +-
 .../plugin-page/plugin-tasks/index.tsx        |   10 +-
 .../__tests__/index.spec.tsx                  |  133 +-
 .../panel/input-field/editor/form/index.tsx   |    2 +-
 .../document-processing/options.tsx           |    4 +-
 .../snippets/__tests__/index.spec.tsx         |  139 +
 .../snippet-evaluation-page.spec.tsx          |  123 +
 .../__tests__/input-field-editor.spec.tsx     |   80 +
 .../__tests__/publish-menu.spec.tsx           |   42 +
 .../__tests__/snippet-create-card.spec.tsx    |  107 +
 .../__tests__/snippet-layout.spec.tsx         |  108 +
 .../__tests__/snippet-main.spec.tsx           |  312 +
 .../__tests__/workflow-panel.spec.tsx         |   52 +
 .../use-snippet-input-field-actions.spec.ts   |  168 +
 .../__tests__/use-snippet-publish.spec.ts     |  134 +
 .../hooks/use-snippet-input-field-actions.ts  |   96 +
 .../components/hooks/use-snippet-publish.ts   |   57 +
 .../components/input-field-editor.tsx         |   66 +
 .../input-field-form/__tests__/hooks.spec.ts  |   40 +
 .../input-field-form/__tests__/schema.spec.ts |   51 +
 .../components/input-field-form/hooks.ts      |   30 +
 .../components/input-field-form/index.tsx     |   92 +
 .../input-field-form/initial-fields.tsx       |   50 +
 .../components/input-field-form/schema.ts     |   95 +
 .../snippets/components/panel/index.tsx       |   86 +
 .../snippets/components/publish-menu.tsx      |   62 +
 .../snippets/components/snippet-card.tsx      |   58 +
 .../snippets/components/snippet-children.tsx  |  103 +
 .../components/snippet-create-card.tsx        |  109 +
 .../snippet-header/__tests__/index.spec.tsx   |   89 +
 .../components/snippet-header/index.tsx       |   82 +
 .../snippet-header/input-field-button.tsx     |   32 +
 .../components/snippet-header/publisher.tsx   |   57 +
 .../components/snippet-header/run-mode.tsx    |   78 +
 .../components/snippet-import-dsl-dialog.tsx  |  265 +
 .../snippets/components/snippet-layout.tsx    |   91 +
 .../snippets/components/snippet-main.tsx      |  225 +
 .../snippets/components/snippet-run-panel.tsx |  293 +
 .../snippets/components/workflow-panel.tsx    |  145 +
 .../__tests__/use-inspect-vars-crud.spec.ts   |   95 +
 .../__tests__/use-nodes-sync-draft.spec.ts    |  163 +
 .../hooks/__tests__/use-snippet-init.spec.ts  |  235 +
 .../__tests__/use-snippet-start-run.spec.ts   |  131 +
 .../snippets/hooks/use-configs-map.ts         |   24 +
 .../snippets/hooks/use-inspect-vars-crud.ts   |   13 +
 .../snippets/hooks/use-nodes-sync-draft.ts    |  178 +
 .../snippets/hooks/use-snippet-init.ts        |   89 +
 .../hooks/use-snippet-refresh-draft.ts        |   52 +
 .../snippets/hooks/use-snippet-run.ts         |  298 +
 .../snippets/hooks/use-snippet-start-run.ts   |   60 +
 web/app/components/snippets/index.tsx         |   80 +
 .../snippets/snippet-evaluation-page.tsx      |   33 +
 web/app/components/snippets/store/index.ts    |   48 +
 .../components/tools/marketplace/index.tsx    |   28 +-
 .../mcp/detail/__tests__/content.spec.tsx     |   73 +-
 .../tools/provider/__tests__/detail.spec.tsx  |   84 +-
 .../__tests__/method-selector.spec.tsx        |   60 +-
 .../__tests__/index.spec.tsx                  |   23 +
 .../start-node-selection-panel.spec.tsx       |   23 +
 .../start-node-option.tsx                     |    4 +-
 .../start-node-selection-panel.tsx            |   62 +-
 .../use-available-nodes-meta-data.spec.ts     |   27 +
 .../hooks/use-available-nodes-meta-data.ts    |   39 +-
 .../__tests__/selection-contextmenu.spec.tsx  |  164 +-
 .../__tests__/all-start-blocks.spec.tsx       |   35 +-
 .../block-selector/__tests__/blocks.spec.tsx  |   35 +-
 .../block-selector/__tests__/hooks.spec.tsx   |   22 +
 .../block-selector/all-start-blocks.tsx       |   19 +-
 .../workflow/block-selector/blocks.tsx        |   13 +-
 .../workflow/block-selector/hooks.ts          |   17 +-
 .../workflow/block-selector/main.tsx          |   75 +-
 .../snippets/__tests__/index.spec.tsx         |  161 +
 .../__tests__/snippet-detail-card.spec.tsx    |   64 +
 .../__tests__/snippet-empty-state.spec.tsx    |   31 +
 .../__tests__/snippet-list-item.spec.tsx      |   85 +
 .../__tests__/use-create-snippet.spec.tsx     |  139 +
 .../__tests__/use-insert-snippet.spec.tsx     |  130 +
 .../block-selector/snippets/index.tsx         |  179 +
 .../snippets/snippet-detail-card.tsx          |   92 +
 .../snippets/snippet-empty-state.tsx          |   31 +
 .../snippets/snippet-list-item.tsx            |   51 +
 .../snippets/use-create-snippet.ts            |   71 +
 .../snippets/use-insert-snippet.ts            |  143 +
 .../workflow/block-selector/tabs.tsx          |   12 +-
 .../workflow/block-selector/types.ts          |    1 +
 .../workflow/create-snippet-dialog.tsx        |  199 +
 .../header/__tests__/header-layouts.spec.tsx  |   14 +
 .../header/__tests__/test-run-menu.spec.tsx   |    1 -
 .../workflow/header/header-in-normal.tsx      |   20 +-
 .../workflow/header/running-title.tsx         |    2 +-
 .../workflow/header/test-run-menu.tsx         |    6 +-
 .../__tests__/use-inspect-vars-crud.spec.ts   |   36 +-
 .../workflow/hooks/use-checklist.ts           |   88 +-
 .../workflow/hooks/use-inspect-vars-crud.ts   |    7 +-
 .../_base/components/editor/text-editor.tsx   |    2 +-
 .../mixed-variable-text-input/placeholder.tsx |    4 +-
 .../_base/components/next-step/operator.tsx   |   42 +-
 .../_base/components/panel-operator/index.tsx |   42 +-
 .../components/title-description-input.tsx    |    6 +-
 .../components/variable/constant-field.tsx    |    2 +-
 .../components/variable/output-var-list.tsx   |   12 +-
 .../_base/components/variable/var-list.tsx    |   26 +-
 .../nodes/_base/hooks/use-output-var-list.ts  |   14 +-
 .../__tests__/operation-selector.spec.tsx     |    1 -
 .../components/operation-selector.tsx         |   12 +-
 .../components/workflow/nodes/http/node.tsx   |    4 +-
 .../workflow/nodes/iteration-start/index.tsx  |    2 +-
 .../condition-list/condition-number.tsx       |    4 +-
 .../condition-list/condition-string.tsx       |    4 +-
 .../workflow/nodes/loop-start/index.tsx       |    2 +-
 .../components/extract-parameter/item.tsx     |    8 +-
 .../workflow/nodes/trigger-webhook/panel.tsx  |   15 +-
 .../operator/__tests__/more-actions.spec.tsx  |   18 +-
 .../workflow/operator/zoom-in-out.tsx         |  243 +-
 .../components/object-value-item.tsx          |    6 +-
 .../context-menu/menu-item.tsx                |    2 +-
 .../run/utils/format-log/iteration/index.ts   |    2 +-
 .../workflow/selection-contextmenu.tsx        |  409 +-
 .../workflow/utils/evaluation-workflow.ts     |   20 +
 web/contract/console/apps.ts                  |   15 +
 web/contract/console/evaluation.ts            |  334 +
 web/contract/console/snippets.ts              |  343 +
 web/contract/router.ts                        |  109 +-
 web/eslint-suppressions.json                  | 8297 +++++++++++++++++
 web/eslint.config.mjs                         |   24 +-
 .../use-snippet-and-evaluation-plan-access.ts |   19 +
 web/i18n-config/resources.ts                  |    6 +
 web/i18n/ar-TN/workflow.json                  |    4 +-
 web/i18n/de-DE/workflow.json                  |    4 +-
 web/i18n/en-US/app-log.json                   |    1 +
 web/i18n/en-US/app.json                       |    7 +
 web/i18n/en-US/common.json                    |    2 +
 web/i18n/en-US/evaluation.json                |  141 +
 web/i18n/en-US/snippet.json                   |   37 +
 web/i18n/en-US/workflow.json                  |   32 +
 web/i18n/es-ES/workflow.json                  |    4 +-
 web/i18n/fa-IR/workflow.json                  |    2 +-
 web/i18n/fr-FR/workflow.json                  |    4 +-
 web/i18n/hi-IN/workflow.json                  |    4 +-
 web/i18n/id-ID/workflow.json                  |    4 +-
 web/i18n/it-IT/workflow.json                  |    4 +-
 web/i18n/ja-JP/workflow.json                  |    4 +-
 web/i18n/ko-KR/workflow.json                  |    4 +-
 web/i18n/nl-NL/workflow.json                  |    2 +-
 web/i18n/pl-PL/workflow.json                  |    4 +-
 web/i18n/pt-BR/workflow.json                  |    4 +-
 web/i18n/ro-RO/workflow.json                  |    4 +-
 web/i18n/ru-RU/workflow.json                  |    4 +-
 web/i18n/sl-SI/workflow.json                  |    4 +-
 web/i18n/th-TH/workflow.json                  |    4 +-
 web/i18n/tr-TR/workflow.json                  |    4 +-
 web/i18n/uk-UA/workflow.json                  |    4 +-
 web/i18n/vi-VN/workflow.json                  |    4 +-
 web/i18n/zh-Hans/app-log.json                 |    1 +
 web/i18n/zh-Hans/common.json                  |    2 +
 web/i18n/zh-Hans/evaluation.json              |  135 +
 web/i18n/zh-Hans/snippet.json                 |   37 +
 web/i18n/zh-Hans/workflow.json                |   24 +-
 web/i18n/zh-Hant/workflow.json                |    4 +-
 web/models/log.ts                             |   10 +
 web/models/snippet.ts                         |   50 +
 web/service/__tests__/use-apps.spec.tsx       |   99 +
 .../__tests__/use-snippet-workflows.spec.tsx  |   78 +
 web/service/use-apps.ts                       |   25 +
 web/service/use-evaluation.ts                 |  134 +
 web/service/use-snippet-workflows.ts          |  127 +
 web/service/use-snippets.mock.ts              |  205 +
 web/service/use-snippets.ts                   |  252 +
 web/service/utils.ts                          |    1 +
 web/types/app.ts                              |  125 +-
 web/types/common.ts                           |    1 +
 web/types/evaluation.ts                       |  200 +
 web/types/snippet.ts                          |  164 +
 web/types/workflow.ts                         |    2 +
 734 files changed, 33501 insertions(+), 4798 deletions(-)
 create mode 100644 packages/iconify-collections/assets/vender/workflow/input-field.svg
 create mode 100644 web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
 create mode 100644 web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
 create mode 100644 web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts
 create mode 100644 web/app/(commonLayout)/snippets/[snippetId]/page.tsx
 create mode 100644 web/app/(commonLayout)/snippets/page.tsx
 create mode 100644 web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
 create mode 100644 web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
 create mode 100644 web/app/components/app-sidebar/snippet-info/dropdown.tsx
 create mode 100644 web/app/components/app-sidebar/snippet-info/index.tsx
 create mode 100644 web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
 create mode 100644 web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx
 create mode 100644 web/app/components/app/workflow-log/evaluation-cell.tsx
 create mode 100644 web/app/components/apps/app-type-filter-shared.ts
 create mode 100644 web/app/components/apps/app-type-filter.tsx
 create mode 100644 web/app/components/apps/creators-filter.tsx
 create mode 100644 web/app/components/apps/studio-route-switch.tsx
 create mode 100644 web/app/components/billing/snippet-and-evaluation-plan-guard.tsx
 create mode 100644 web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts
 create mode 100644 web/app/components/evaluation/__tests__/index.spec.tsx
 create mode 100644 web/app/components/evaluation/__tests__/store.spec.ts
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/index.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
 create mode 100644 web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
 create mode 100644 web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
 create mode 100644 web/app/components/evaluation/components/conditions-section/condition-group.tsx
 create mode 100644 web/app/components/evaluation/components/conditions-section/index.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/index.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx
 create mode 100644 web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
 create mode 100644 web/app/components/evaluation/components/judge-model-selector.tsx
 create mode 100644 web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx
 create mode 100644 web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/index.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/metric-card.tsx
 create mode 100644 web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/index.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/selector-footer.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
 create mode 100644 web/app/components/evaluation/components/metric-selector/types.ts
 create mode 100644 web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
 create mode 100644 web/app/components/evaluation/components/metric-selector/utils.ts
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
 create mode 100644 web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts
 create mode 100644 web/app/components/evaluation/components/section-header.tsx
 create mode 100644 web/app/components/evaluation/default-metric-descriptions.ts
 create mode 100644 web/app/components/evaluation/index.tsx
 create mode 100644 web/app/components/evaluation/mock.ts
 create mode 100644 web/app/components/evaluation/store-utils.ts
 create mode 100644 web/app/components/evaluation/store.ts
 create mode 100644 web/app/components/evaluation/types.ts
 create mode 100644 web/app/components/evaluation/utils.ts
 create mode 100644 web/app/components/snippets/__tests__/index.spec.tsx
 create mode 100644 web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
 create mode 100644 web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
 create mode 100644 web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
 create mode 100644 web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
 create mode 100644 web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
 create mode 100644 web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
 create mode 100644 web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
 create mode 100644 web/app/components/snippets/components/hooks/use-snippet-publish.ts
 create mode 100644 web/app/components/snippets/components/input-field-editor.tsx
 create mode 100644 web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts
 create mode 100644 web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts
 create mode 100644 web/app/components/snippets/components/input-field-form/hooks.ts
 create mode 100644 web/app/components/snippets/components/input-field-form/index.tsx
 create mode 100644 web/app/components/snippets/components/input-field-form/initial-fields.tsx
 create mode 100644 web/app/components/snippets/components/input-field-form/schema.ts
 create mode 100644 web/app/components/snippets/components/panel/index.tsx
 create mode 100644 web/app/components/snippets/components/publish-menu.tsx
 create mode 100644 web/app/components/snippets/components/snippet-card.tsx
 create mode 100644 web/app/components/snippets/components/snippet-children.tsx
 create mode 100644 web/app/components/snippets/components/snippet-create-card.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/index.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/input-field-button.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/publisher.tsx
 create mode 100644 web/app/components/snippets/components/snippet-header/run-mode.tsx
 create mode 100644 web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
 create mode 100644 web/app/components/snippets/components/snippet-layout.tsx
 create mode 100644 web/app/components/snippets/components/snippet-main.tsx
 create mode 100644 web/app/components/snippets/components/snippet-run-panel.tsx
 create mode 100644 web/app/components/snippets/components/workflow-panel.tsx
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
 create mode 100644 web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts
 create mode 100644 web/app/components/snippets/hooks/use-configs-map.ts
 create mode 100644 web/app/components/snippets/hooks/use-inspect-vars-crud.ts
 create mode 100644 web/app/components/snippets/hooks/use-nodes-sync-draft.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-init.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-run.ts
 create mode 100644 web/app/components/snippets/hooks/use-snippet-start-run.ts
 create mode 100644 web/app/components/snippets/index.tsx
 create mode 100644 web/app/components/snippets/snippet-evaluation-page.tsx
 create mode 100644 web/app/components/snippets/store/index.ts
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/index.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
 create mode 100644 web/app/components/workflow/block-selector/snippets/use-create-snippet.ts
 create mode 100644 web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
 create mode 100644 web/app/components/workflow/create-snippet-dialog.tsx
 create mode 100644 web/app/components/workflow/utils/evaluation-workflow.ts
 create mode 100644 web/contract/console/evaluation.ts
 create mode 100644 web/contract/console/snippets.ts
 create mode 100644 web/eslint-suppressions.json
 create mode 100644 web/hooks/use-snippet-and-evaluation-plan-access.ts
 create mode 100644 web/i18n/en-US/evaluation.json
 create mode 100644 web/i18n/en-US/snippet.json
 create mode 100644 web/i18n/zh-Hans/evaluation.json
 create mode 100644 web/i18n/zh-Hans/snippet.json
 create mode 100644 web/models/snippet.ts
 create mode 100644 web/service/__tests__/use-apps.spec.tsx
 create mode 100644 web/service/__tests__/use-snippet-workflows.spec.tsx
 create mode 100644 web/service/use-evaluation.ts
 create mode 100644 web/service/use-snippet-workflows.ts
 create mode 100644 web/service/use-snippets.mock.ts
 create mode 100644 web/service/use-snippets.ts
 create mode 100644 web/types/evaluation.ts
 create mode 100644 web/types/snippet.ts

diff --git a/.agents/skills/frontend-testing/references/mocking.md b/.agents/skills/frontend-testing/references/mocking.md
index f58377c4a5..82d9c21cbb 100644
--- a/.agents/skills/frontend-testing/references/mocking.md
+++ b/.agents/skills/frontend-testing/references/mocking.md
@@ -20,11 +20,11 @@
 ```typescript
 // ❌ WRONG: Don't mock base components
 vi.mock('@/app/components/base/loading', () => () => <div>Loading</div>)
-vi.mock('@/app/components/base/button', () => ({ children }: any) => <button>{children}</button>)
+vi.mock('@/app/components/base/ui/button', () => ({ children }: any) => <button>{children}</button>)
 
 // ✅ CORRECT: Import and use real base components
 import Loading from '@/app/components/base/loading'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 // They will render normally in tests
 ```
 
diff --git a/.github/workflows/style.yml b/.github/workflows/style.yml
index 29f5b090f8..c32fc9d0cb 100644
--- a/.github/workflows/style.yml
+++ b/.github/workflows/style.yml
@@ -77,8 +77,6 @@ jobs:
         with:
           files: |
             web/**
-            e2e/**
-            sdks/nodejs-client/**
             packages/**
             package.json
             pnpm-lock.yaml
@@ -97,14 +95,14 @@ jobs:
         id: eslint-cache-restore
         uses: actions/cache/restore@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
         with:
-          path: .eslintcache
-          key: ${{ runner.os }}-eslint-${{ hashFiles('pnpm-lock.yaml', 'eslint.config.mjs', 'web/eslint.config.mjs', 'web/eslint.constants.mjs', 'web/plugins/eslint/**') }}-${{ github.sha }}
+          path: web/.eslintcache
+          key: ${{ runner.os }}-web-eslint-${{ hashFiles('web/package.json', 'pnpm-lock.yaml', 'web/eslint.config.mjs', 'web/eslint.constants.mjs', 'web/plugins/eslint/**') }}-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-eslint-${{ hashFiles('pnpm-lock.yaml', 'eslint.config.mjs', 'web/eslint.config.mjs', 'web/eslint.constants.mjs', 'web/plugins/eslint/**') }}-
+            ${{ runner.os }}-web-eslint-${{ hashFiles('web/package.json', 'pnpm-lock.yaml', 'web/eslint.config.mjs', 'web/eslint.constants.mjs', 'web/plugins/eslint/**') }}-
 
       - name: Web style check
         if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: .
+        working-directory: ./web
         run: vp run lint:ci
 
       - name: Web tsslint
@@ -114,7 +112,7 @@ jobs:
 
       - name: Web type check
         if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: .
+        working-directory: ./web
         run: vp run type-check
 
       - name: Web dead code check
@@ -126,7 +124,7 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true' && success() && steps.eslint-cache-restore.outputs.cache-hit != 'true'
         uses: actions/cache/save@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
         with:
-          path: .eslintcache
+          path: web/.eslintcache
           key: ${{ steps.eslint-cache-restore.outputs.cache-primary-key }}
 
   superlinter:
diff --git a/.gitignore b/.gitignore
index 3493a7c756..53dea88899 100644
--- a/.gitignore
+++ b/.gitignore
@@ -203,7 +203,6 @@ sdks/python-client/dify_client.egg-info
 
 .vscode/*
 !.vscode/launch.json.template
-!.vscode/settings.example.json
 !.vscode/README.md
 api/.vscode
 # vscode Code History Extension
@@ -243,5 +242,3 @@ scripts/stress-test/reports/
 
 # Code Agent Folder
 .qoder/*
-
-.eslintcache
diff --git a/.vite-hooks/pre-commit b/.vite-hooks/pre-commit
index d48381bce2..cced022568 100755
--- a/.vite-hooks/pre-commit
+++ b/.vite-hooks/pre-commit
@@ -56,9 +56,44 @@ if $api_modified; then
     fi
 fi
 
-if $skip_web_checks; then
-    echo "Git operation in progress, skipping web checks"
-    exit 0
-fi
+if $web_modified; then
+    if $skip_web_checks; then
+        echo "Git operation in progress, skipping web checks"
+        exit 0
+    fi
 
-vp staged
+    echo "Running ESLint on web module"
+
+    if git diff --cached --quiet -- 'web/**/*.ts' 'web/**/*.tsx'; then
+        web_ts_modified=false
+    else
+        ts_diff_status=$?
+        if [ $ts_diff_status -eq 1 ]; then
+            web_ts_modified=true
+        else
+            echo "Unable to determine staged TypeScript changes (git exit code: $ts_diff_status)."
+            exit $ts_diff_status
+        fi
+    fi
+
+    cd ./web || exit 1
+    pnpm exec vp staged
+
+    if $web_ts_modified; then
+        echo "Running TypeScript type-check:tsgo"
+        if ! npm run type-check:tsgo; then
+            echo "Type check failed. Please run 'npm run type-check:tsgo' to fix the errors."
+            exit 1
+        fi
+    else
+        echo "No staged TypeScript changes detected, skipping type-check:tsgo"
+    fi
+
+    echo "Running knip"
+    if ! npm run knip; then
+        echo "Knip check failed. Please run 'npm run knip' to fix the errors."
+        exit 1
+    fi
+
+    cd ../
+fi
diff --git a/api/controllers/console/__init__.py b/api/controllers/console/__init__.py
index 0e9508d18a..23351beed9 100644
--- a/api/controllers/console/__init__.py
+++ b/api/controllers/console/__init__.py
@@ -120,6 +120,9 @@ from .explore import (
     saved_message,
     trial,
 )
+
+# Import snippet controllers
+from .snippets import snippet_workflow, snippet_workflow_draft_variable
 from .socketio import workflow as socketio_workflow  # pyright: ignore[reportUnusedImport]
 
 # Import snippet controllers
@@ -211,6 +214,9 @@ __all__ = [
     "saved_message",
     "setup",
     "site",
+    "snippet_workflow",
+    "snippet_workflow_draft_variable",
+    "snippets",
     "socketio_workflow",
     "snippet_workflow",
     "snippet_workflow_draft_variable",
diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index df5c94a867..214545bac8 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -5,6 +5,7 @@ from typing import Any, Literal
 
 from flask import request
 from flask_restx import Resource
+from graphon.enums import WorkflowExecutionStatus
 from pydantic import AliasChoices, BaseModel, Field, computed_field, field_validator
 from sqlalchemy import select
 from sqlalchemy.orm import Session
@@ -29,7 +30,6 @@ from core.rag.retrieval.retrieval_methods import RetrievalMethod
 from core.trigger.constants import TRIGGER_NODE_TYPES
 from extensions.ext_database import db
 from fields.base import ResponseModel
-from graphon.enums import WorkflowExecutionStatus
 from libs.helper import build_icon_url
 from libs.login import current_account_with_tenant, login_required
 from models import App, DatasetPermissionEnum, Workflow
@@ -568,7 +568,7 @@ class AppApi(Resource):
             row = db.session.execute(
                 select(Workflow.type).where(Workflow.id == app_model.workflow_id)
             ).scalar()
-            app_model.workflow_type = row if row else None
+            app_model.workflow_type = row or None
         else:
             app_model.workflow_type = None
 
diff --git a/api/controllers/console/app/audio.py b/api/controllers/console/app/audio.py
index 91fbe4a85a..78ddb904e1 100644
--- a/api/controllers/console/app/audio.py
+++ b/api/controllers/console/app/audio.py
@@ -2,6 +2,7 @@ import logging
 
 from flask import request
 from flask_restx import Resource, fields
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field
 from werkzeug.exceptions import InternalServerError
 
@@ -22,7 +23,6 @@ from controllers.console.app.error import (
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs.login import login_required
 from models import App, AppMode
 from services.audio_service import AudioService
diff --git a/api/controllers/console/app/completion.py b/api/controllers/console/app/completion.py
index fe274e4c9a..d83925d173 100644
--- a/api/controllers/console/app/completion.py
+++ b/api/controllers/console/app/completion.py
@@ -3,6 +3,7 @@ from typing import Any, Literal
 
 from flask import request
 from flask_restx import Resource
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field, field_validator
 from werkzeug.exceptions import InternalServerError, NotFound
 
@@ -26,7 +27,6 @@ from core.errors.error import (
     QuotaExceededError,
 )
 from core.helper.trace_id_helper import get_external_trace_id
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.helper import uuid_value
 from libs.login import current_user, login_required
diff --git a/api/controllers/console/app/generator.py b/api/controllers/console/app/generator.py
index c720a5e074..7101d5df7b 100644
--- a/api/controllers/console/app/generator.py
+++ b/api/controllers/console/app/generator.py
@@ -1,6 +1,7 @@
 from collections.abc import Sequence
 
 from flask_restx import Resource
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field
 
 from controllers.console import console_ns
@@ -19,7 +20,6 @@ from core.helper.code_executor.python3.python3_code_provider import Python3CodeP
 from core.llm_generator.entities import RuleCodeGeneratePayload, RuleGeneratePayload, RuleStructuredOutputPayload
 from core.llm_generator.llm_generator import LLMGenerator
 from extensions.ext_database import db
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs.login import current_account_with_tenant, login_required
 from models import App
 from services.workflow_service import WorkflowService
diff --git a/api/controllers/console/app/mcp_server.py b/api/controllers/console/app/mcp_server.py
index d517f695b8..5b1abc98dc 100644
--- a/api/controllers/console/app/mcp_server.py
+++ b/api/controllers/console/app/mcp_server.py
@@ -18,6 +18,12 @@ from models.enums import AppMCPServerStatus
 from models.model import AppMCPServer
 
 
+def _to_timestamp(value: datetime | int | None) -> int | None:
+    if isinstance(value, datetime):
+        return int(value.timestamp())
+    return value
+
+
 class MCPServerCreatePayload(BaseModel):
     description: str | None = Field(default=None, description="Server description")
     parameters: dict[str, Any] = Field(..., description="Server parameters configuration")
@@ -30,25 +36,19 @@ class MCPServerUpdatePayload(BaseModel):
     status: str | None = Field(default=None, description="Server status")
 
 
-def _to_timestamp(value: datetime | int | None) -> int | None:
-    if isinstance(value, datetime):
-        return int(value.timestamp())
-    return value
-
-
 class AppMCPServerResponse(ResponseModel):
     id: str
     name: str
     server_code: str
     description: str
-    status: AppMCPServerStatus
+    status: str
     parameters: dict[str, Any] | list[Any] | str
     created_at: int | None = None
     updated_at: int | None = None
 
     @field_validator("parameters", mode="before")
     @classmethod
-    def _normalize_parameters(cls, value: Any) -> Any:
+    def _parse_json_string(cls, value: Any) -> Any:
         if isinstance(value, str):
             try:
                 return json.loads(value)
@@ -70,9 +70,7 @@ class AppMCPServerController(Resource):
     @console_ns.doc("get_app_mcp_server")
     @console_ns.doc(description="Get MCP server configuration for an application")
     @console_ns.doc(params={"app_id": "Application ID"})
-    @console_ns.response(
-        200, "MCP server configuration retrieved successfully", console_ns.models[AppMCPServerResponse.__name__]
-    )
+    @console_ns.response(200, "Server configuration", console_ns.models[AppMCPServerResponse.__name__])
     @login_required
     @account_initialization_required
     @setup_required
@@ -87,9 +85,7 @@ class AppMCPServerController(Resource):
     @console_ns.doc(description="Create MCP server configuration for an application")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.expect(console_ns.models[MCPServerCreatePayload.__name__])
-    @console_ns.response(
-        201, "MCP server configuration created successfully", console_ns.models[AppMCPServerResponse.__name__]
-    )
+    @console_ns.response(200, "Server created", console_ns.models[AppMCPServerResponse.__name__])
     @console_ns.response(403, "Insufficient permissions")
     @account_initialization_required
     @get_app_model
@@ -115,15 +111,13 @@ class AppMCPServerController(Resource):
         )
         db.session.add(server)
         db.session.commit()
-        return AppMCPServerResponse.model_validate(server, from_attributes=True).model_dump(mode="json"), 201
+        return AppMCPServerResponse.model_validate(server, from_attributes=True).model_dump(mode="json")
 
     @console_ns.doc("update_app_mcp_server")
     @console_ns.doc(description="Update MCP server configuration for an application")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.expect(console_ns.models[MCPServerUpdatePayload.__name__])
-    @console_ns.response(
-        200, "MCP server configuration updated successfully", console_ns.models[AppMCPServerResponse.__name__]
-    )
+    @console_ns.response(200, "Server updated", console_ns.models[AppMCPServerResponse.__name__])
     @console_ns.response(403, "Insufficient permissions")
     @console_ns.response(404, "Server not found")
     @get_app_model
@@ -160,7 +154,7 @@ class AppMCPServerRefreshController(Resource):
     @console_ns.doc("refresh_app_mcp_server")
     @console_ns.doc(description="Refresh MCP server configuration and regenerate server code")
     @console_ns.doc(params={"server_id": "Server ID"})
-    @console_ns.response(200, "MCP server refreshed successfully", console_ns.models[AppMCPServerResponse.__name__])
+    @console_ns.response(200, "Server refreshed", console_ns.models[AppMCPServerResponse.__name__])
     @console_ns.response(403, "Insufficient permissions")
     @console_ns.response(404, "Server not found")
     @setup_required
diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index 1f25beeefc..ec29970ba6 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -5,12 +5,17 @@ from typing import Any, Literal
 
 from flask import abort, request
 from flask_restx import Resource, fields, marshal, marshal_with
+from graphon.enums import NodeType
+from graphon.file import File
+from graphon.file import helpers as file_helpers
+from graphon.graph_engine.manager import GraphEngineManager
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, ValidationError, field_validator
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import BadRequest, Forbidden, InternalServerError, NotFound
 
 import services
-from controllers.common.controller_schemas import DefaultBlockConfigQuery, WorkflowListQuery, WorkflowUpdatePayload
+from controllers.common.controller_schemas import DefaultBlockConfigQuery
 from controllers.console import console_ns
 from controllers.console.app.error import ConversationCompletedError, DraftWorkflowNotExist, DraftWorkflowNotSync
 from controllers.console.app.workflow_run import workflow_run_node_execution_model
@@ -37,11 +42,6 @@ from factories import file_factory, variable_factory
 from fields.member_fields import simple_account_fields
 from fields.online_user_fields import online_user_list_fields
 from fields.workflow_fields import workflow_fields, workflow_pagination_fields
-from graphon.enums import NodeType
-from graphon.file import File
-from graphon.file import helpers as file_helpers
-from graphon.graph_engine.manager import GraphEngineManager
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs import helper
 from libs.datetime_utils import naive_utc_now
 from libs.helper import TimestampField, uuid_value
@@ -171,7 +171,6 @@ class WorkflowTypeConvertQuery(BaseModel):
     target_type: Literal["workflow", "evaluation"]
 
 
-
 class WorkflowFeaturesPayload(BaseModel):
     features: dict[str, Any] = Field(..., description="Workflow feature configuration")
 
diff --git a/api/controllers/console/app/workflow_app_log.py b/api/controllers/console/app/workflow_app_log.py
index 4b39590235..6b402898e8 100644
--- a/api/controllers/console/app/workflow_app_log.py
+++ b/api/controllers/console/app/workflow_app_log.py
@@ -4,6 +4,7 @@ from typing import Any
 from dateutil.parser import isoparse
 from flask import request
 from flask_restx import Resource
+from graphon.enums import WorkflowExecutionStatus
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy.orm import sessionmaker
 
@@ -15,7 +16,6 @@ from extensions.ext_database import db
 from fields.base import ResponseModel
 from fields.end_user_fields import SimpleEndUser
 from fields.member_fields import SimpleAccount
-from graphon.enums import WorkflowExecutionStatus
 from libs.login import login_required
 from models import App
 from models.model import AppMode
diff --git a/api/controllers/console/app/workflow_run.py b/api/controllers/console/app/workflow_run.py
index 6748d95d6b..a1a075be71 100644
--- a/api/controllers/console/app/workflow_run.py
+++ b/api/controllers/console/app/workflow_run.py
@@ -3,6 +3,8 @@ from typing import Literal, TypedDict, cast
 
 from flask import request
 from flask_restx import Resource, fields, marshal_with
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.enums import WorkflowExecutionStatus
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import select
 from sqlalchemy.orm import sessionmaker
@@ -26,8 +28,6 @@ from fields.workflow_run_fields import (
     workflow_run_node_execution_list_fields,
     workflow_run_pagination_fields,
 )
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.enums import WorkflowExecutionStatus
 from libs.archive_storage import ArchiveStorageNotConfiguredError, get_archive_storage
 from libs.custom_inputs import time_duration
 from libs.helper import uuid_value
diff --git a/api/controllers/console/auth/oauth_server.py b/api/controllers/console/auth/oauth_server.py
index 727428c8e7..b55cda4244 100644
--- a/api/controllers/console/auth/oauth_server.py
+++ b/api/controllers/console/auth/oauth_server.py
@@ -5,11 +5,11 @@ from typing import Concatenate
 from flask import jsonify, request
 from flask.typing import ResponseReturnValue
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel
 from werkzeug.exceptions import BadRequest, NotFound
 
 from controllers.console.wraps import account_initialization_required, setup_required
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_account_with_tenant, login_required
 from models import Account
 from models.model import OAuthProviderApp
diff --git a/api/controllers/console/datasets/datasets.py b/api/controllers/console/datasets/datasets.py
index 0b493d2c71..14ca27acbd 100644
--- a/api/controllers/console/datasets/datasets.py
+++ b/api/controllers/console/datasets/datasets.py
@@ -4,6 +4,7 @@ from urllib.parse import quote
 
 from flask import Response, request
 from flask_restx import Resource, fields, marshal, marshal_with
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import func, select
 from sqlalchemy.orm import Session
@@ -53,7 +54,6 @@ from fields.dataset_fields import (
     weighted_score_fields,
 )
 from fields.document_fields import document_status_fields
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs.login import current_account_with_tenant, login_required
 from models import ApiToken, Dataset, Document, DocumentSegment, EvaluationRun, EvaluationTargetType, UploadFile
 from models.dataset import DatasetPermission, DatasetPermissionEnum
diff --git a/api/controllers/console/datasets/datasets_document.py b/api/controllers/console/datasets/datasets_document.py
index 3372a967d9..98d4ad9412 100644
--- a/api/controllers/console/datasets/datasets_document.py
+++ b/api/controllers/console/datasets/datasets_document.py
@@ -3,19 +3,20 @@ import logging
 from argparse import ArgumentTypeError
 from collections.abc import Sequence
 from contextlib import ExitStack
-from datetime import datetime
 from typing import Any, Literal, cast
 
 import sqlalchemy as sa
 from flask import request, send_file
-from flask_restx import Resource, marshal
-from pydantic import BaseModel, Field, field_validator
+from flask_restx import Resource, fields, marshal, marshal_with
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
+from pydantic import BaseModel, Field
 from sqlalchemy import asc, desc, func, select
 from werkzeug.exceptions import Forbidden, NotFound
 
 import services
 from controllers.common.controller_schemas import DocumentBatchDownloadZipPayload
-from controllers.common.schema import register_schema_models
+from controllers.common.schema import get_or_create_model, register_schema_models
 from controllers.console import console_ns
 from core.errors.error import (
     LLMBadRequestError,
@@ -30,14 +31,14 @@ from core.rag.extractor.entity.datasource_type import DatasourceType
 from core.rag.extractor.entity.extract_setting import ExtractSetting, NotionInfo, WebsiteInfo
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
 from extensions.ext_database import db
-from fields.base import ResponseModel
+from fields.dataset_fields import dataset_fields
 from fields.document_fields import (
+    dataset_and_document_fields,
     document_fields,
+    document_metadata_fields,
     document_status_fields,
     document_with_segments_fields,
 )
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from libs.datetime_utils import naive_utc_now
 from libs.login import current_account_with_tenant, login_required
 from models import DatasetProcessRule, Document, DocumentSegment, UploadFile
@@ -71,100 +72,27 @@ from ..wraps import (
 logger = logging.getLogger(__name__)
 
 
-def _to_timestamp(value: datetime | int | None) -> int | None:
-    if isinstance(value, datetime):
-        return int(value.timestamp())
-    return value
+# Register models for flask_restx to avoid dict type issues in Swagger
+dataset_model = get_or_create_model("Dataset", dataset_fields)
 
+document_metadata_model = get_or_create_model("DocumentMetadata", document_metadata_fields)
 
-def _normalize_enum(value: Any) -> Any:
-    if isinstance(value, str) or value is None:
-        return value
-    return getattr(value, "value", value)
+document_fields_copy = document_fields.copy()
+document_fields_copy["doc_metadata"] = fields.List(
+    fields.Nested(document_metadata_model), attribute="doc_metadata_details"
+)
+document_model = get_or_create_model("Document", document_fields_copy)
 
+document_with_segments_fields_copy = document_with_segments_fields.copy()
+document_with_segments_fields_copy["doc_metadata"] = fields.List(
+    fields.Nested(document_metadata_model), attribute="doc_metadata_details"
+)
+document_with_segments_model = get_or_create_model("DocumentWithSegments", document_with_segments_fields_copy)
 
-class DatasetResponse(ResponseModel):
-    id: str
-    name: str
-    description: str | None = None
-    permission: str | None = None
-    data_source_type: str | None = None
-    indexing_technique: str | None = None
-    created_by: str | None = None
-    created_at: int | None = None
-
-    @field_validator("data_source_type", "indexing_technique", mode="before")
-    @classmethod
-    def _normalize_enum_fields(cls, value: Any) -> Any:
-        return _normalize_enum(value)
-
-    @field_validator("created_at", mode="before")
-    @classmethod
-    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
-        return _to_timestamp(value)
-
-
-class DocumentMetadataResponse(ResponseModel):
-    id: str
-    name: str
-    type: str
-    value: str | None = None
-
-
-class DocumentResponse(ResponseModel):
-    id: str
-    position: int | None = None
-    data_source_type: str | None = None
-    data_source_info: Any = Field(default=None, validation_alias="data_source_info_dict")
-    data_source_detail_dict: Any = None
-    dataset_process_rule_id: str | None = None
-    name: str
-    created_from: str | None = None
-    created_by: str | None = None
-    created_at: int | None = None
-    tokens: int | None = None
-    indexing_status: str | None = None
-    error: str | None = None
-    enabled: bool | None = None
-    disabled_at: int | None = None
-    disabled_by: str | None = None
-    archived: bool | None = None
-    display_status: str | None = None
-    word_count: int | None = None
-    hit_count: int | None = None
-    doc_form: str | None = None
-    doc_metadata: list[DocumentMetadataResponse] = Field(default_factory=list, validation_alias="doc_metadata_details")
-    summary_index_status: str | None = None
-    need_summary: bool | None = None
-
-    @field_validator("data_source_type", "indexing_status", "display_status", "doc_form", mode="before")
-    @classmethod
-    def _normalize_enum_fields(cls, value: Any) -> Any:
-        return _normalize_enum(value)
-
-    @field_validator("doc_metadata", mode="before")
-    @classmethod
-    def _normalize_doc_metadata(cls, value: Any) -> list[Any]:
-        if value is None:
-            return []
-        return value
-
-    @field_validator("created_at", "disabled_at", mode="before")
-    @classmethod
-    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
-        return _to_timestamp(value)
-
-
-class DocumentWithSegmentsResponse(DocumentResponse):
-    process_rule_dict: Any = None
-    completed_segments: int | None = None
-    total_segments: int | None = None
-
-
-class DatasetAndDocumentResponse(ResponseModel):
-    dataset: DatasetResponse
-    documents: list[DocumentResponse]
-    batch: str
+dataset_and_document_fields_copy = dataset_and_document_fields.copy()
+dataset_and_document_fields_copy["dataset"] = fields.Nested(dataset_model)
+dataset_and_document_fields_copy["documents"] = fields.List(fields.Nested(document_model))
+dataset_and_document_model = get_or_create_model("DatasetAndDocument", dataset_and_document_fields_copy)
 
 
 class DocumentRetryPayload(BaseModel):
@@ -179,11 +107,6 @@ class GenerateSummaryPayload(BaseModel):
     document_list: list[str]
 
 
-class DocumentMetadataUpdatePayload(BaseModel):
-    doc_type: str | None = None
-    doc_metadata: Any = None
-
-
 class DocumentDatasetListParam(BaseModel):
     page: int = Field(1, title="Page", description="Page number.")
     limit: int = Field(20, title="Limit", description="Page size.")
@@ -201,13 +124,7 @@ register_schema_models(
     DocumentRetryPayload,
     DocumentRenamePayload,
     GenerateSummaryPayload,
-    DocumentMetadataUpdatePayload,
     DocumentBatchDownloadZipPayload,
-    DatasetResponse,
-    DocumentMetadataResponse,
-    DocumentResponse,
-    DocumentWithSegmentsResponse,
-    DatasetAndDocumentResponse,
 )
 
 
@@ -440,10 +357,10 @@ class DatasetDocumentListApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
+    @marshal_with(dataset_and_document_model)
     @cloud_edition_billing_resource_check("vector_space")
     @cloud_edition_billing_rate_limit_check("knowledge")
     @console_ns.expect(console_ns.models[KnowledgeConfig.__name__])
-    @console_ns.response(200, "Documents created successfully", console_ns.models[DatasetAndDocumentResponse.__name__])
     def post(self, dataset_id):
         current_user, _ = current_account_with_tenant()
         dataset_id = str(dataset_id)
@@ -481,9 +398,7 @@ class DatasetDocumentListApi(Resource):
         except ModelCurrentlyNotSupportError:
             raise ProviderModelCurrentlyNotSupportError()
 
-        return DatasetAndDocumentResponse.model_validate(
-            {"dataset": dataset, "documents": documents, "batch": batch}, from_attributes=True
-        ).model_dump(mode="json")
+        return {"dataset": dataset, "documents": documents, "batch": batch}
 
     @setup_required
     @login_required
@@ -511,13 +426,12 @@ class DatasetInitApi(Resource):
     @console_ns.doc("init_dataset")
     @console_ns.doc(description="Initialize dataset with documents")
     @console_ns.expect(console_ns.models[KnowledgeConfig.__name__])
-    @console_ns.response(
-        201, "Dataset initialized successfully", console_ns.models[DatasetAndDocumentResponse.__name__]
-    )
+    @console_ns.response(201, "Dataset initialized successfully", dataset_and_document_model)
     @console_ns.response(400, "Invalid request parameters")
     @setup_required
     @login_required
     @account_initialization_required
+    @marshal_with(dataset_and_document_model)
     @cloud_edition_billing_resource_check("vector_space")
     @cloud_edition_billing_rate_limit_check("knowledge")
     def post(self):
@@ -565,9 +479,9 @@ class DatasetInitApi(Resource):
         except ModelCurrentlyNotSupportError:
             raise ProviderModelCurrentlyNotSupportError()
 
-        return DatasetAndDocumentResponse.model_validate(
-            {"dataset": dataset, "documents": documents, "batch": batch}, from_attributes=True
-        ).model_dump(mode="json")
+        response = {"dataset": dataset, "documents": documents, "batch": batch}
+
+        return response
 
 
 @console_ns.route("/datasets/<uuid:dataset_id>/documents/<uuid:document_id>/indexing-estimate")
@@ -1074,7 +988,15 @@ class DocumentMetadataApi(DocumentResource):
     @console_ns.doc("update_document_metadata")
     @console_ns.doc(description="Update document metadata")
     @console_ns.doc(params={"dataset_id": "Dataset ID", "document_id": "Document ID"})
-    @console_ns.expect(console_ns.models[DocumentMetadataUpdatePayload.__name__])
+    @console_ns.expect(
+        console_ns.model(
+            "UpdateDocumentMetadataRequest",
+            {
+                "doc_type": fields.String(description="Document type"),
+                "doc_metadata": fields.Raw(description="Document metadata"),
+            },
+        )
+    )
     @console_ns.response(200, "Document metadata updated successfully")
     @console_ns.response(404, "Document not found")
     @console_ns.response(403, "Permission denied")
@@ -1087,10 +1009,10 @@ class DocumentMetadataApi(DocumentResource):
         document_id = str(document_id)
         document = self.get_document(dataset_id, document_id)
 
-        req_data = DocumentMetadataUpdatePayload.model_validate(request.get_json() or {})
+        req_data = request.get_json()
 
-        doc_type = req_data.doc_type
-        doc_metadata = req_data.doc_metadata
+        doc_type = req_data.get("doc_type")
+        doc_metadata = req_data.get("doc_metadata")
 
         # The role of the current user in the ta table must be admin, owner, dataset_operator, or editor
         if not current_user.is_dataset_editor:
@@ -1272,7 +1194,7 @@ class DocumentRenameApi(DocumentResource):
     @setup_required
     @login_required
     @account_initialization_required
-    @console_ns.response(200, "Document renamed successfully", console_ns.models[DocumentResponse.__name__])
+    @marshal_with(document_model)
     @console_ns.expect(console_ns.models[DocumentRenamePayload.__name__])
     def post(self, dataset_id, document_id):
         # The role of the current user in the ta table must be admin, owner, editor, or dataset_operator
@@ -1290,7 +1212,7 @@ class DocumentRenameApi(DocumentResource):
         except services.errors.document.DocumentIndexingError:
             raise DocumentIndexingError("Cannot delete document during indexing.")
 
-        return DocumentResponse.model_validate(document, from_attributes=True).model_dump(mode="json")
+        return document
 
 
 @console_ns.route("/datasets/<uuid:dataset_id>/documents/<uuid:document_id>/website-sync")
diff --git a/api/controllers/console/datasets/datasets_segments.py b/api/controllers/console/datasets/datasets_segments.py
index 2647bb1f5a..354c299bef 100644
--- a/api/controllers/console/datasets/datasets_segments.py
+++ b/api/controllers/console/datasets/datasets_segments.py
@@ -2,6 +2,7 @@ import uuid
 
 from flask import request
 from flask_restx import Resource, marshal
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, Field
 from sqlalchemy import String, cast, func, or_, select
 from sqlalchemy.dialects.postgresql import JSONB
@@ -31,7 +32,6 @@ from core.rag.index_processor.constant.index_type import IndexTechniqueType
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from fields.segment_fields import child_chunk_fields, segment_fields
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs.helper import escape_like_pattern
 from libs.login import current_account_with_tenant, login_required
 from models.dataset import ChildChunk, DocumentSegment
diff --git a/api/controllers/console/datasets/hit_testing_base.py b/api/controllers/console/datasets/hit_testing_base.py
index 699fa599c8..8fb3699849 100644
--- a/api/controllers/console/datasets/hit_testing_base.py
+++ b/api/controllers/console/datasets/hit_testing_base.py
@@ -2,6 +2,7 @@ import logging
 from typing import Any
 
 from flask_restx import marshal
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field
 from werkzeug.exceptions import Forbidden, InternalServerError, NotFound
 
@@ -20,7 +21,6 @@ from core.errors.error import (
     QuotaExceededError,
 )
 from fields.hit_testing_fields import hit_testing_record_fields
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs.login import current_user
 from models.account import Account
 from services.dataset_service import DatasetService
diff --git a/api/controllers/console/datasets/rag_pipeline/datasource_auth.py b/api/controllers/console/datasets/rag_pipeline/datasource_auth.py
index fd0a8b33bc..bdf83b991e 100644
--- a/api/controllers/console/datasets/rag_pipeline/datasource_auth.py
+++ b/api/controllers/console/datasets/rag_pipeline/datasource_auth.py
@@ -2,6 +2,8 @@ from typing import Any
 
 from flask import make_response, redirect, request
 from flask_restx import Resource
+from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field
 from werkzeug.exceptions import Forbidden, NotFound
 
@@ -10,8 +12,6 @@ from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, edit_permission_required, setup_required
 from core.plugin.impl.oauth import OAuthHandler
-from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_account_with_tenant, login_required
 from models.provider_ids import DatasourceProviderID
 from services.datasource_provider_service import DatasourceProviderService
diff --git a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_draft_variable.py b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_draft_variable.py
index b31d73f27d..3549f9542d 100644
--- a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_draft_variable.py
+++ b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_draft_variable.py
@@ -4,6 +4,7 @@ from typing import Any, NoReturn
 
 from flask import Response, request
 from flask_restx import Resource, marshal, marshal_with
+from graphon.variables.types import SegmentType
 from pydantic import BaseModel, Field
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import Forbidden
@@ -27,7 +28,6 @@ from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, SYSTE
 from extensions.ext_database import db
 from factories.file_factory import build_from_mapping, build_from_mappings
 from factories.variable_factory import build_segment_with_type
-from graphon.variables.types import SegmentType
 from libs.login import current_user, login_required
 from models import Account
 from models.dataset import Pipeline
diff --git a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
index ee146e8287..a8077d9eb0 100644
--- a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
+++ b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
@@ -4,6 +4,7 @@ from typing import Any, Literal, cast
 
 from flask import abort, request
 from flask_restx import Resource, marshal_with  # type: ignore
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, ValidationError
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import BadRequest, Forbidden, InternalServerError, NotFound
@@ -40,7 +41,6 @@ from core.app.apps.pipeline.pipeline_generator import PipelineGenerator
 from core.app.entities.app_invoke_entities import InvokeFrom
 from extensions.ext_database import db
 from factories import variable_factory
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs import helper
 from libs.helper import TimestampField, UUIDStrOrEmpty
 from libs.login import current_account_with_tenant, current_user, login_required
diff --git a/api/controllers/console/explore/audio.py b/api/controllers/console/explore/audio.py
index ab660d9dc3..a37077af42 100644
--- a/api/controllers/console/explore/audio.py
+++ b/api/controllers/console/explore/audio.py
@@ -1,6 +1,7 @@
 import logging
 
 from flask import request
+from graphon.model_runtime.errors.invoke import InvokeError
 from werkzeug.exceptions import InternalServerError
 
 import services
@@ -19,7 +20,6 @@ from controllers.console.app.error import (
 )
 from controllers.console.explore.wraps import InstalledAppResource
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 from services.audio_service import AudioService
 from services.errors.audio import (
     AudioTooLargeServiceError,
diff --git a/api/controllers/console/explore/completion.py b/api/controllers/console/explore/completion.py
index ccdccceaa6..eacd7332fe 100644
--- a/api/controllers/console/explore/completion.py
+++ b/api/controllers/console/explore/completion.py
@@ -2,6 +2,7 @@ import logging
 from typing import Any, Literal
 from uuid import UUID
 
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field, field_validator
 from werkzeug.exceptions import InternalServerError, NotFound
 
@@ -25,7 +26,6 @@ from core.errors.error import (
     QuotaExceededError,
 )
 from extensions.ext_database import db
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.datetime_utils import naive_utc_now
 from libs.login import current_user
diff --git a/api/controllers/console/explore/message.py b/api/controllers/console/explore/message.py
index 209667d1d0..64d55d7ca3 100644
--- a/api/controllers/console/explore/message.py
+++ b/api/controllers/console/explore/message.py
@@ -2,6 +2,7 @@ import logging
 from typing import Literal
 
 from flask import request
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, TypeAdapter
 from werkzeug.exceptions import InternalServerError, NotFound
 
@@ -24,7 +25,6 @@ from core.app.entities.app_invoke_entities import InvokeFrom
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
 from fields.conversation_fields import ResultResponse
 from fields.message_fields import MessageInfiniteScrollPagination, MessageListItem, SuggestedQuestionsResponse
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.login import current_account_with_tenant
 from models.enums import FeedbackRating
diff --git a/api/controllers/console/explore/trial.py b/api/controllers/console/explore/trial.py
index 1456301a24..0a3595454a 100644
--- a/api/controllers/console/explore/trial.py
+++ b/api/controllers/console/explore/trial.py
@@ -3,6 +3,8 @@ from typing import Any, Literal, cast
 
 from flask import request
 from flask_restx import Resource, fields, marshal, marshal_with
+from graphon.graph_engine.manager import GraphEngineManager
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel
 from sqlalchemy import select
 from werkzeug.exceptions import Forbidden, InternalServerError, NotFound
@@ -59,8 +61,6 @@ from fields.workflow_fields import (
     workflow_fields,
     workflow_partial_fields,
 )
-from graphon.graph_engine.manager import GraphEngineManager
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.helper import uuid_value
 from libs.login import current_user
diff --git a/api/controllers/console/explore/workflow.py b/api/controllers/console/explore/workflow.py
index 438cce4fd8..da88de6776 100644
--- a/api/controllers/console/explore/workflow.py
+++ b/api/controllers/console/explore/workflow.py
@@ -1,5 +1,7 @@
 import logging
 
+from graphon.graph_engine.manager import GraphEngineManager
+from graphon.model_runtime.errors.invoke import InvokeError
 from werkzeug.exceptions import InternalServerError
 
 from controllers.common.controller_schemas import WorkflowRunPayload
@@ -21,8 +23,6 @@ from core.errors.error import (
     QuotaExceededError,
 )
 from extensions.ext_redis import redis_client
-from graphon.graph_engine.manager import GraphEngineManager
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.login import current_account_with_tenant
 from models.model import AppMode, InstalledApp
diff --git a/api/controllers/console/remote_files.py b/api/controllers/console/remote_files.py
index 2a46d2250a..551c86fd82 100644
--- a/api/controllers/console/remote_files.py
+++ b/api/controllers/console/remote_files.py
@@ -2,6 +2,7 @@ import urllib.parse
 
 import httpx
 from flask_restx import Resource
+from graphon.file import helpers as file_helpers
 from pydantic import BaseModel, Field
 
 import services
@@ -15,7 +16,6 @@ from controllers.console import console_ns
 from core.helper import ssrf_proxy
 from extensions.ext_database import db
 from fields.file_fields import FileWithSignedUrl, RemoteFileInfo
-from graphon.file import helpers as file_helpers
 from libs.login import current_account_with_tenant, login_required
 from services.file_service import FileService
 
diff --git a/api/controllers/console/workspace/agent_providers.py b/api/controllers/console/workspace/agent_providers.py
index 764f488755..3fdcbc4710 100644
--- a/api/controllers/console/workspace/agent_providers.py
+++ b/api/controllers/console/workspace/agent_providers.py
@@ -1,8 +1,8 @@
 from flask_restx import Resource, fields
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, setup_required
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_account_with_tenant, login_required
 from services.agent_service import AgentService
 
diff --git a/api/controllers/console/workspace/endpoint.py b/api/controllers/console/workspace/endpoint.py
index f45b72f390..b6b9deb1f9 100644
--- a/api/controllers/console/workspace/endpoint.py
+++ b/api/controllers/console/workspace/endpoint.py
@@ -2,13 +2,13 @@ from typing import Any
 
 from flask import request
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field
 
 from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, is_admin_or_owner_required, setup_required
 from core.plugin.impl.exc import PluginPermissionDeniedError
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_account_with_tenant, login_required
 from services.plugin.endpoint_service import EndpointService
 
diff --git a/api/controllers/console/workspace/load_balancing_config.py b/api/controllers/console/workspace/load_balancing_config.py
index 2a6f37aec8..e4cfca9fa4 100644
--- a/api/controllers/console/workspace/load_balancing_config.py
+++ b/api/controllers/console/workspace/load_balancing_config.py
@@ -1,12 +1,12 @@
 from flask_restx import Resource
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
 from pydantic import BaseModel
 from werkzeug.exceptions import Forbidden
 
 from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, setup_required
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
 from libs.login import current_account_with_tenant, login_required
 from models import TenantAccountRole
 from services.model_load_balancing_service import ModelLoadBalancingService
diff --git a/api/controllers/console/workspace/model_providers.py b/api/controllers/console/workspace/model_providers.py
index 4b10561fdb..cbb9677309 100644
--- a/api/controllers/console/workspace/model_providers.py
+++ b/api/controllers/console/workspace/model_providers.py
@@ -3,13 +3,13 @@ from typing import Any, Literal
 
 from flask import request, send_file
 from flask_restx import Resource
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, field_validator
 
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, is_admin_or_owner_required, setup_required
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.helper import uuid_value
 from libs.login import current_account_with_tenant, login_required
 from services.billing_service import BillingService
diff --git a/api/controllers/console/workspace/models.py b/api/controllers/console/workspace/models.py
index b2d07ff8f9..f8f95304f0 100644
--- a/api/controllers/console/workspace/models.py
+++ b/api/controllers/console/workspace/models.py
@@ -3,14 +3,14 @@ from typing import Any, cast
 
 from flask import request
 from flask_restx import Resource
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, field_validator
 
 from controllers.common.schema import register_enum_models, register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, is_admin_or_owner_required, setup_required
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.helper import uuid_value
 from libs.login import current_account_with_tenant, login_required
 from services.model_load_balancing_service import ModelLoadBalancingService
diff --git a/api/controllers/console/workspace/plugin.py b/api/controllers/console/workspace/plugin.py
index b3e344ccea..aa674a63b3 100644
--- a/api/controllers/console/workspace/plugin.py
+++ b/api/controllers/console/workspace/plugin.py
@@ -4,6 +4,7 @@ from typing import Any, Literal
 
 from flask import request, send_file
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field
 from werkzeug.datastructures import FileStorage
 from werkzeug.exceptions import Forbidden
@@ -14,7 +15,6 @@ from controllers.console import console_ns
 from controllers.console.workspace import plugin_permission_required
 from controllers.console.wraps import account_initialization_required, is_admin_or_owner_required, setup_required
 from core.plugin.impl.exc import PluginDaemonClientSideError
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_account_with_tenant, login_required
 from models.account import TenantPluginAutoUpgradeStrategy, TenantPluginPermission
 from services.plugin.plugin_auto_upgrade_service import PluginAutoUpgradeService
diff --git a/api/controllers/console/workspace/tool_providers.py b/api/controllers/console/workspace/tool_providers.py
index 471594f349..c9956501e2 100644
--- a/api/controllers/console/workspace/tool_providers.py
+++ b/api/controllers/console/workspace/tool_providers.py
@@ -5,6 +5,7 @@ from urllib.parse import urlparse
 
 from flask import make_response, redirect, request, send_file
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, HttpUrl, field_validator, model_validator
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import Forbidden
@@ -27,7 +28,6 @@ from core.plugin.entities.plugin_daemon import CredentialType
 from core.plugin.impl.oauth import OAuthHandler
 from core.tools.entities.tool_entities import ApiProviderSchemaType, WorkflowToolParameterConfiguration
 from extensions.ext_database import db
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.helper import alphanumeric, uuid_value
 from libs.login import current_account_with_tenant, login_required
 from models.provider_ids import ToolProviderID
diff --git a/api/controllers/console/workspace/trigger_providers.py b/api/controllers/console/workspace/trigger_providers.py
index d11b66244f..7a28a09861 100644
--- a/api/controllers/console/workspace/trigger_providers.py
+++ b/api/controllers/console/workspace/trigger_providers.py
@@ -3,6 +3,7 @@ from typing import Any
 
 from flask import make_response, redirect, request
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, model_validator
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import BadRequest, Forbidden
@@ -15,7 +16,6 @@ from core.plugin.impl.oauth import OAuthHandler
 from core.trigger.entities.entities import SubscriptionBuilderUpdater
 from core.trigger.trigger_manager import TriggerManager
 from extensions.ext_database import db
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_user, login_required
 from models.account import Account
 from models.provider_ids import TriggerProviderID
diff --git a/api/controllers/inner_api/plugin/plugin.py b/api/controllers/inner_api/plugin/plugin.py
index 72cab3de73..83c8fa02fe 100644
--- a/api/controllers/inner_api/plugin/plugin.py
+++ b/api/controllers/inner_api/plugin/plugin.py
@@ -1,4 +1,5 @@
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 from controllers.console.wraps import setup_required
 from controllers.inner_api import inner_api_ns
@@ -29,7 +30,6 @@ from core.plugin.entities.request import (
 )
 from core.tools.entities.tool_entities import ToolProviderType
 from core.tools.signature import get_signed_file_url_for_plugin
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.helper import length_prefixed_response
 from models import Account, Tenant
 from models.model import EndUser
diff --git a/api/controllers/inner_api/plugin/wraps.py b/api/controllers/inner_api/plugin/wraps.py
index 2f309262cb..a5846e2815 100644
--- a/api/controllers/inner_api/plugin/wraps.py
+++ b/api/controllers/inner_api/plugin/wraps.py
@@ -20,13 +20,10 @@ class TenantUserPayload(BaseModel):
 
 def get_user(tenant_id: str, user_id: str | None) -> EndUser:
     """
-    Get current user.
+    Get current user
 
     NOTE: user_id is not trusted, it could be maliciously set to any value.
-    As a result, it could only be considered as an end user id. Even when a
-    concrete end-user ID is supplied, lookups must stay tenant-scoped so one
-    tenant cannot bind another tenant's user record into the plugin request
-    context.
+    As a result, it could only be considered as an end user id.
     """
     if not user_id:
         user_id = DefaultEndUserSessionID.DEFAULT_SESSION_ID
@@ -45,14 +42,7 @@ def get_user(tenant_id: str, user_id: str | None) -> EndUser:
                     .limit(1)
                 )
             else:
-                user_model = session.scalar(
-                    select(EndUser)
-                    .where(
-                        EndUser.id == user_id,
-                        EndUser.tenant_id == tenant_id,
-                    )
-                    .limit(1)
-                )
+                user_model = session.get(EndUser, user_id)
 
             if not user_model:
                 user_model = EndUser(
diff --git a/api/controllers/mcp/mcp.py b/api/controllers/mcp/mcp.py
index f652bbc581..8066f198bb 100644
--- a/api/controllers/mcp/mcp.py
+++ b/api/controllers/mcp/mcp.py
@@ -2,6 +2,7 @@ from typing import Any, Union
 
 from flask import Response
 from flask_restx import Resource
+from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from pydantic import BaseModel, Field, ValidationError
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
@@ -11,7 +12,6 @@ from controllers.mcp import mcp_ns
 from core.mcp import types as mcp_types
 from core.mcp.server.streamable_http import handle_mcp_request
 from extensions.ext_database import db
-from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from libs import helper
 from models.enums import AppMCPServerStatus
 from models.model import App, AppMCPServer, AppMode, EndUser
diff --git a/api/controllers/service_api/app/audio.py b/api/controllers/service_api/app/audio.py
index e818573b8f..907dd1b06d 100644
--- a/api/controllers/service_api/app/audio.py
+++ b/api/controllers/service_api/app/audio.py
@@ -2,6 +2,7 @@ import logging
 
 from flask import request
 from flask_restx import Resource
+from graphon.model_runtime.errors.invoke import InvokeError
 from werkzeug.exceptions import InternalServerError
 
 import services
@@ -21,7 +22,6 @@ from controllers.service_api.app.error import (
 )
 from controllers.service_api.wraps import FetchUserArg, WhereisUserArg, validate_app_token
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 from models.model import App, EndUser
 from services.audio_service import AudioService
 from services.errors.audio import (
diff --git a/api/controllers/service_api/app/completion.py b/api/controllers/service_api/app/completion.py
index 31f2797d66..3142e5118e 100644
--- a/api/controllers/service_api/app/completion.py
+++ b/api/controllers/service_api/app/completion.py
@@ -4,6 +4,7 @@ from uuid import UUID
 
 from flask import request
 from flask_restx import Resource
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field, field_validator
 from werkzeug.exceptions import BadRequest, InternalServerError, NotFound
 
@@ -28,7 +29,6 @@ from core.errors.error import (
     QuotaExceededError,
 )
 from core.helper.trace_id_helper import get_external_trace_id
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.helper import UUIDStrOrEmpty
 from models.model import App, AppMode, EndUser
diff --git a/api/controllers/service_api/app/conversation.py b/api/controllers/service_api/app/conversation.py
index c4353ca7b8..50851aea08 100644
--- a/api/controllers/service_api/app/conversation.py
+++ b/api/controllers/service_api/app/conversation.py
@@ -3,6 +3,7 @@ from typing import Any, Literal
 
 from flask import request
 from flask_restx import Resource
+from graphon.variables.types import SegmentType
 from pydantic import BaseModel, Field, TypeAdapter, field_validator
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import BadRequest, NotFound
@@ -21,7 +22,6 @@ from fields.conversation_fields import (
     ConversationInfiniteScrollPagination,
     SimpleConversation,
 )
-from graphon.variables.types import SegmentType
 from libs.helper import UUIDStrOrEmpty
 from models.model import App, AppMode, EndUser
 from services.conversation_service import ConversationService
diff --git a/api/controllers/service_api/dataset/dataset.py b/api/controllers/service_api/dataset/dataset.py
index 76519cad0a..fd954be6b1 100644
--- a/api/controllers/service_api/dataset/dataset.py
+++ b/api/controllers/service_api/dataset/dataset.py
@@ -2,6 +2,7 @@ from typing import Any, Literal, cast
 
 from flask import request
 from flask_restx import marshal
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, Field, TypeAdapter, field_validator
 from werkzeug.exceptions import Forbidden, NotFound
 
@@ -18,7 +19,6 @@ from core.plugin.impl.model_runtime_factory import create_plugin_provider_manage
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
 from fields.dataset_fields import dataset_detail_fields
 from fields.tag_fields import DataSetTag
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs.login import current_user
 from models.account import Account
 from models.dataset import DatasetPermissionEnum
diff --git a/api/controllers/service_api/dataset/segment.py b/api/controllers/service_api/dataset/segment.py
index 5992fa7410..971b63577c 100644
--- a/api/controllers/service_api/dataset/segment.py
+++ b/api/controllers/service_api/dataset/segment.py
@@ -2,6 +2,7 @@ from typing import Any
 
 from flask import request
 from flask_restx import marshal
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, Field
 from sqlalchemy import select
 from werkzeug.exceptions import NotFound
@@ -22,7 +23,6 @@ from core.model_manager import ModelManager
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
 from extensions.ext_database import db
 from fields.segment_fields import child_chunk_fields, segment_fields
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs.login import current_account_with_tenant
 from models.dataset import Dataset
 from services.dataset_service import DatasetService, DocumentService, SegmentService
diff --git a/api/controllers/service_api/workspace/models.py b/api/controllers/service_api/workspace/models.py
index 5ac65fc4e6..c0a6cb0a76 100644
--- a/api/controllers/service_api/workspace/models.py
+++ b/api/controllers/service_api/workspace/models.py
@@ -1,9 +1,9 @@
 from flask_login import current_user
 from flask_restx import Resource
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 from controllers.service_api import service_api_ns
 from controllers.service_api.wraps import validate_dataset_token
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from services.model_provider_service import ModelProviderService
 
 
diff --git a/api/controllers/web/audio.py b/api/controllers/web/audio.py
index 3ad595f1f4..0ef4471018 100644
--- a/api/controllers/web/audio.py
+++ b/api/controllers/web/audio.py
@@ -2,6 +2,7 @@ import logging
 
 from flask import request
 from flask_restx import fields, marshal_with
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import field_validator
 from werkzeug.exceptions import InternalServerError
 
@@ -21,7 +22,6 @@ from controllers.web.error import (
 )
 from controllers.web.wraps import WebApiResource
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs.helper import uuid_value
 from models.model import App
 from services.audio_service import AudioService
diff --git a/api/controllers/web/completion.py b/api/controllers/web/completion.py
index 0528184d79..e37f9af5f0 100644
--- a/api/controllers/web/completion.py
+++ b/api/controllers/web/completion.py
@@ -1,6 +1,7 @@
 import logging
 from typing import Any, Literal
 
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field, field_validator
 from werkzeug.exceptions import InternalServerError, NotFound
 
@@ -25,7 +26,6 @@ from core.errors.error import (
     ProviderTokenNotInitError,
     QuotaExceededError,
 )
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from libs.helper import uuid_value
 from models.model import AppMode
diff --git a/api/controllers/web/message.py b/api/controllers/web/message.py
index 07ecf8035b..39afdd843f 100644
--- a/api/controllers/web/message.py
+++ b/api/controllers/web/message.py
@@ -2,6 +2,7 @@ import logging
 from typing import Literal
 
 from flask import request
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field, TypeAdapter
 from werkzeug.exceptions import InternalServerError, NotFound
 
@@ -23,7 +24,6 @@ from core.app.entities.app_invoke_entities import InvokeFrom
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
 from fields.conversation_fields import ResultResponse
 from fields.message_fields import SuggestedQuestionsResponse, WebMessageInfiniteScrollPagination, WebMessageListItem
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from models.enums import FeedbackRating
 from models.model import AppMode
diff --git a/api/controllers/web/remote_files.py b/api/controllers/web/remote_files.py
index fe31e9d4ac..38aeccc642 100644
--- a/api/controllers/web/remote_files.py
+++ b/api/controllers/web/remote_files.py
@@ -1,6 +1,7 @@
 import urllib.parse
 
 import httpx
+from graphon.file import helpers as file_helpers
 from pydantic import BaseModel, Field, HttpUrl
 
 import services
@@ -13,7 +14,6 @@ from controllers.common.errors import (
 from core.helper import ssrf_proxy
 from extensions.ext_database import db
 from fields.file_fields import FileWithSignedUrl, RemoteFileInfo
-from graphon.file import helpers as file_helpers
 from services.file_service import FileService
 
 from ..common.schema import register_schema_models
diff --git a/api/controllers/web/workflow.py b/api/controllers/web/workflow.py
index 98211193a0..796e090976 100644
--- a/api/controllers/web/workflow.py
+++ b/api/controllers/web/workflow.py
@@ -1,5 +1,7 @@
 import logging
 
+from graphon.graph_engine.manager import GraphEngineManager
+from graphon.model_runtime.errors.invoke import InvokeError
 from werkzeug.exceptions import InternalServerError
 
 from controllers.common.controller_schemas import WorkflowRunPayload
@@ -22,8 +24,6 @@ from core.errors.error import (
     QuotaExceededError,
 )
 from extensions.ext_redis import redis_client
-from graphon.graph_engine.manager import GraphEngineManager
-from graphon.model_runtime.errors.invoke import InvokeError
 from libs import helper
 from models.model import App, AppMode, EndUser
 from services.app_generate_service import AppGenerateService
diff --git a/api/core/agent/base_agent_runner.py b/api/core/agent/base_agent_runner.py
index 790602ef5d..06c746990d 100644
--- a/api/core/agent/base_agent_runner.py
+++ b/api/core/agent/base_agent_runner.py
@@ -4,6 +4,20 @@ import uuid
 from decimal import Decimal
 from typing import Union, cast
 
+from graphon.file import file_manager
+from graphon.model_runtime.entities import (
+    AssistantPromptMessage,
+    LLMUsage,
+    PromptMessage,
+    PromptMessageTool,
+    SystemPromptMessage,
+    TextPromptMessageContent,
+    ToolPromptMessage,
+    UserPromptMessage,
+)
+from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent, PromptMessageContentUnionTypes
+from graphon.model_runtime.entities.model_entities import ModelFeature
+from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from sqlalchemy import func, select
 
 from core.agent.entities import AgentEntity, AgentToolEntity
@@ -29,20 +43,6 @@ from core.tools.tool_manager import ToolManager
 from core.tools.utils.dataset_retriever_tool import DatasetRetrieverTool
 from extensions.ext_database import db
 from factories import file_factory
-from graphon.file import file_manager
-from graphon.model_runtime.entities import (
-    AssistantPromptMessage,
-    LLMUsage,
-    PromptMessage,
-    PromptMessageTool,
-    SystemPromptMessage,
-    TextPromptMessageContent,
-    ToolPromptMessage,
-    UserPromptMessage,
-)
-from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent, PromptMessageContentUnionTypes
-from graphon.model_runtime.entities.model_entities import ModelFeature
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from models.enums import CreatorUserRole
 from models.model import Conversation, Message, MessageAgentThought, MessageFile
 
diff --git a/api/core/agent/cot_agent_runner.py b/api/core/agent/cot_agent_runner.py
index 0bc93ad34d..f07ac64498 100644
--- a/api/core/agent/cot_agent_runner.py
+++ b/api/core/agent/cot_agent_runner.py
@@ -4,6 +4,15 @@ from abc import ABC, abstractmethod
 from collections.abc import Generator, Mapping, Sequence
 from typing import Any, TypedDict
 
+from graphon.model_runtime.entities.llm_entities import LLMResult, LLMResultChunk, LLMResultChunkDelta, LLMUsage
+from graphon.model_runtime.entities.message_entities import (
+    AssistantPromptMessage,
+    PromptMessage,
+    PromptMessageTool,
+    ToolPromptMessage,
+    UserPromptMessage,
+)
+
 from core.agent.base_agent_runner import BaseAgentRunner
 from core.agent.entities import AgentScratchpadUnit
 from core.agent.errors import AgentMaxIterationError
@@ -15,14 +24,6 @@ from core.prompt.agent_history_prompt_transform import AgentHistoryPromptTransfo
 from core.tools.__base.tool import Tool
 from core.tools.entities.tool_entities import ToolInvokeMeta
 from core.tools.tool_engine import ToolEngine
-from graphon.model_runtime.entities.llm_entities import LLMResult, LLMResultChunk, LLMResultChunkDelta, LLMUsage
-from graphon.model_runtime.entities.message_entities import (
-    AssistantPromptMessage,
-    PromptMessage,
-    PromptMessageTool,
-    ToolPromptMessage,
-    UserPromptMessage,
-)
 from models.model import Message
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/agent/cot_chat_agent_runner.py b/api/core/agent/cot_chat_agent_runner.py
index a2186be100..2b2e26987e 100644
--- a/api/core/agent/cot_chat_agent_runner.py
+++ b/api/core/agent/cot_chat_agent_runner.py
@@ -1,6 +1,5 @@
 import json
 
-from core.agent.cot_agent_runner import CotAgentRunner
 from graphon.file import file_manager
 from graphon.model_runtime.entities import (
     AssistantPromptMessage,
@@ -12,6 +11,8 @@ from graphon.model_runtime.entities import (
 from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent, PromptMessageContentUnionTypes
 from graphon.model_runtime.utils.encoders import jsonable_encoder
 
+from core.agent.cot_agent_runner import CotAgentRunner
+
 
 class CotChatAgentRunner(CotAgentRunner):
     def _organize_system_prompt(self) -> SystemPromptMessage:
diff --git a/api/core/agent/cot_completion_agent_runner.py b/api/core/agent/cot_completion_agent_runner.py
index 51a30998ae..d4c52a8eb1 100644
--- a/api/core/agent/cot_completion_agent_runner.py
+++ b/api/core/agent/cot_completion_agent_runner.py
@@ -1,6 +1,5 @@
 import json
 
-from core.agent.cot_agent_runner import CotAgentRunner
 from graphon.model_runtime.entities.message_entities import (
     AssistantPromptMessage,
     PromptMessage,
@@ -9,6 +8,8 @@ from graphon.model_runtime.entities.message_entities import (
 )
 from graphon.model_runtime.utils.encoders import jsonable_encoder
 
+from core.agent.cot_agent_runner import CotAgentRunner
+
 
 class CotCompletionAgentRunner(CotAgentRunner):
     def _organize_instruction_prompt(self) -> str:
diff --git a/api/core/agent/fc_agent_runner.py b/api/core/agent/fc_agent_runner.py
index d38d24d1e7..fdffde85d0 100644
--- a/api/core/agent/fc_agent_runner.py
+++ b/api/core/agent/fc_agent_runner.py
@@ -4,13 +4,6 @@ from collections.abc import Generator
 from copy import deepcopy
 from typing import Any, Union
 
-from core.agent.base_agent_runner import BaseAgentRunner
-from core.agent.errors import AgentMaxIterationError
-from core.app.apps.base_app_queue_manager import PublishFrom
-from core.app.entities.queue_entities import QueueAgentThoughtEvent, QueueMessageEndEvent, QueueMessageFileEvent
-from core.prompt.agent_history_prompt_transform import AgentHistoryPromptTransform
-from core.tools.entities.tool_entities import ToolInvokeMeta
-from core.tools.tool_engine import ToolEngine
 from graphon.file import file_manager
 from graphon.model_runtime.entities import (
     AssistantPromptMessage,
@@ -26,6 +19,14 @@ from graphon.model_runtime.entities import (
     UserPromptMessage,
 )
 from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent, PromptMessageContentUnionTypes
+
+from core.agent.base_agent_runner import BaseAgentRunner
+from core.agent.errors import AgentMaxIterationError
+from core.app.apps.base_app_queue_manager import PublishFrom
+from core.app.entities.queue_entities import QueueAgentThoughtEvent, QueueMessageEndEvent, QueueMessageFileEvent
+from core.prompt.agent_history_prompt_transform import AgentHistoryPromptTransform
+from core.tools.entities.tool_entities import ToolInvokeMeta
+from core.tools.tool_engine import ToolEngine
 from models.model import Message
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/agent/output_parser/cot_output_parser.py b/api/core/agent/output_parser/cot_output_parser.py
index f341ca5a0b..8cccd2be6d 100644
--- a/api/core/agent/output_parser/cot_output_parser.py
+++ b/api/core/agent/output_parser/cot_output_parser.py
@@ -3,9 +3,10 @@ import re
 from collections.abc import Generator
 from typing import Any, Union
 
-from core.agent.entities import AgentScratchpadUnit
 from graphon.model_runtime.entities.llm_entities import LLMResultChunk
 
+from core.agent.entities import AgentScratchpadUnit
+
 
 class CotAgentOutputParser:
     @classmethod
diff --git a/api/core/app/app_config/easy_ui_based_app/model_config/converter.py b/api/core/app/app_config/easy_ui_based_app/model_config/converter.py
index dbd7527fc6..b7dd55632e 100644
--- a/api/core/app/app_config/easy_ui_based_app/model_config/converter.py
+++ b/api/core/app/app_config/easy_ui_based_app/model_config/converter.py
@@ -1,13 +1,14 @@
 from typing import cast
 
+from graphon.model_runtime.entities.llm_entities import LLMMode
+from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
+from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+
 from core.app.app_config.entities import EasyUIBasedAppConfig
 from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
 from core.entities.model_entities import ModelStatus
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
 from core.plugin.impl.model_runtime_factory import create_plugin_provider_manager
-from graphon.model_runtime.entities.llm_entities import LLMMode
-from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 
 
 class ModelConfigConverter:
diff --git a/api/core/app/app_config/easy_ui_based_app/model_config/manager.py b/api/core/app/app_config/easy_ui_based_app/model_config/manager.py
index 02498c23e1..9d980e5ca3 100644
--- a/api/core/app/app_config/easy_ui_based_app/model_config/manager.py
+++ b/api/core/app/app_config/easy_ui_based_app/model_config/manager.py
@@ -1,9 +1,10 @@
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
+
 from core.app.app_config.entities import ModelConfigEntity
 from core.plugin.impl.model_runtime_factory import create_plugin_model_assembly
-from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
 from models.model import AppModelConfigDict
 from models.provider_ids import ModelProviderID
 
diff --git a/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py b/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py
index 4c07445df3..57c6d1c496 100644
--- a/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py
+++ b/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py
@@ -1,5 +1,7 @@
 from typing import Any
 
+from graphon.model_runtime.entities.message_entities import PromptMessageRole
+
 from core.app.app_config.entities import (
     AdvancedChatMessageEntity,
     AdvancedChatPromptTemplateEntity,
@@ -7,7 +9,6 @@ from core.app.app_config.entities import (
     PromptTemplateEntity,
 )
 from core.prompt.simple_prompt_transform import ModelMode
-from graphon.model_runtime.entities.message_entities import PromptMessageRole
 from models.model import AppMode, AppModelConfigDict
 
 
diff --git a/api/core/app/app_config/entities.py b/api/core/app/app_config/entities.py
index 53563dc5da..819aca864c 100644
--- a/api/core/app/app_config/entities.py
+++ b/api/core/app/app_config/entities.py
@@ -1,14 +1,14 @@
 from enum import StrEnum, auto
 from typing import Any, Literal
 
-from pydantic import BaseModel, Field
-
-from core.rag.data_post_processor.data_post_processor import RerankingModelDict, WeightsDict
-from core.rag.entities import MetadataFilteringCondition
 from graphon.file import FileUploadConfig
 from graphon.model_runtime.entities.llm_entities import LLMMode
 from graphon.model_runtime.entities.message_entities import PromptMessageRole
 from graphon.variables.input_entities import VariableEntity as WorkflowVariableEntity
+from pydantic import BaseModel, Field
+
+from core.rag.data_post_processor.data_post_processor import RerankingModelDict, WeightsDict
+from core.rag.entities import MetadataFilteringCondition
 from models.model import AppMode
 
 
diff --git a/api/core/app/app_config/features/file_upload/manager.py b/api/core/app/app_config/features/file_upload/manager.py
index 8f20ef2ff9..959c3868b4 100644
--- a/api/core/app/app_config/features/file_upload/manager.py
+++ b/api/core/app/app_config/features/file_upload/manager.py
@@ -1,9 +1,10 @@
 from collections.abc import Mapping
 from typing import Any
 
-from constants import DEFAULT_FILE_NUMBER_LIMITS
 from graphon.file import FileUploadConfig
 
+from constants import DEFAULT_FILE_NUMBER_LIMITS
+
 
 class FileUploadConfigManager:
     @classmethod
diff --git a/api/core/app/app_config/workflow_ui_based_app/variables/manager.py b/api/core/app/app_config/workflow_ui_based_app/variables/manager.py
index 13ace32fd6..62e0c31d1a 100644
--- a/api/core/app/app_config/workflow_ui_based_app/variables/manager.py
+++ b/api/core/app/app_config/workflow_ui_based_app/variables/manager.py
@@ -1,7 +1,8 @@
 import re
 
-from core.app.app_config.entities import RagPipelineVariableEntity
 from graphon.variables.input_entities import VariableEntity
+
+from core.app.app_config.entities import RagPipelineVariableEntity
 from models.workflow import Workflow
 
 
diff --git a/api/core/app/apps/advanced_chat/app_generator.py b/api/core/app/apps/advanced_chat/app_generator.py
index 9e64b471cb..985ded0f74 100644
--- a/api/core/app/apps/advanced_chat/app_generator.py
+++ b/api/core/app/apps/advanced_chat/app_generator.py
@@ -18,6 +18,11 @@ from constants import UUID_NIL
 
 if TYPE_CHECKING:
     from controllers.console.app.workflow import LoopNodeRunPayload
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
+from graphon.runtime import GraphRuntimeState
+from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
+
 from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
 from core.app.apps.advanced_chat.app_config_manager import AdvancedChatAppConfigManager
 from core.app.apps.advanced_chat.app_runner import AdvancedChatAppRunner
@@ -43,10 +48,6 @@ from core.repositories import DifyCoreRepositoryFactory
 from core.repositories.factory import WorkflowExecutionRepository, WorkflowNodeExecutionRepository
 from extensions.ext_database import db
 from factories import file_factory
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
-from graphon.runtime import GraphRuntimeState
-from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
 from libs.flask_utils import preserve_flask_contexts
 from models import Account, App, Conversation, EndUser, Message, Workflow, WorkflowNodeExecutionTriggeredFrom
 from models.enums import WorkflowRunTriggeredFrom
diff --git a/api/core/app/apps/advanced_chat/app_runner.py b/api/core/app/apps/advanced_chat/app_runner.py
index 4e57b4dedc..7b4cb98bd4 100644
--- a/api/core/app/apps/advanced_chat/app_runner.py
+++ b/api/core/app/apps/advanced_chat/app_runner.py
@@ -3,6 +3,12 @@ import time
 from collections.abc import Mapping, Sequence
 from typing import Any, cast
 
+from graphon.enums import WorkflowType
+from graphon.graph_engine.command_channels import RedisChannel
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.runtime import GraphRuntimeState, VariablePool
+from graphon.variable_loader import VariableLoader
+from graphon.variables.variables import Variable
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -37,12 +43,6 @@ from core.workflow.workflow_entry import WorkflowEntry
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from extensions.otel import WorkflowAppRunnerHandler, trace_span
-from graphon.enums import WorkflowType
-from graphon.graph_engine.command_channels import RedisChannel
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.runtime import GraphRuntimeState, VariablePool
-from graphon.variable_loader import VariableLoader
-from graphon.variables.variables import Variable
 from models import Workflow
 from models.model import App, Conversation, Message, MessageAnnotation
 from models.workflow import ConversationVariable
diff --git a/api/core/app/apps/agent_chat/app_generator.py b/api/core/app/apps/agent_chat/app_generator.py
index 5cdc477028..5872f6b264 100644
--- a/api/core/app/apps/agent_chat/app_generator.py
+++ b/api/core/app/apps/agent_chat/app_generator.py
@@ -6,6 +6,7 @@ from collections.abc import Generator, Mapping
 from typing import Any, Literal, overload
 
 from flask import Flask, current_app
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from pydantic import ValidationError
 
 from configs import dify_config
@@ -23,7 +24,6 @@ from core.app.entities.app_invoke_entities import AgentChatAppGenerateEntity, In
 from core.ops.ops_trace_manager import TraceQueueManager
 from extensions.ext_database import db
 from factories import file_factory
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from libs.flask_utils import preserve_flask_contexts
 from models import Account, App, EndUser
 from services.conversation_service import ConversationService
diff --git a/api/core/app/apps/agent_chat/app_runner.py b/api/core/app/apps/agent_chat/app_runner.py
index 09ddce327e..a20d3f3c38 100644
--- a/api/core/app/apps/agent_chat/app_runner.py
+++ b/api/core/app/apps/agent_chat/app_runner.py
@@ -1,6 +1,9 @@
 import logging
 from typing import cast
 
+from graphon.model_runtime.entities.llm_entities import LLMMode
+from graphon.model_runtime.entities.model_entities import ModelFeature, ModelPropertyKey
+from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from sqlalchemy import select
 
 from core.agent.cot_chat_agent_runner import CotChatAgentRunner
@@ -16,9 +19,6 @@ from core.memory.token_buffer_memory import TokenBufferMemory
 from core.model_manager import ModelInstance
 from core.moderation.base import ModerationError
 from extensions.ext_database import db
-from graphon.model_runtime.entities.llm_entities import LLMMode
-from graphon.model_runtime.entities.model_entities import ModelFeature, ModelPropertyKey
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from models.model import App, Conversation, Message
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/app/apps/base_app_generate_response_converter.py b/api/core/app/apps/base_app_generate_response_converter.py
index d5edfaeb25..406d07927e 100644
--- a/api/core/app/apps/base_app_generate_response_converter.py
+++ b/api/core/app/apps/base_app_generate_response_converter.py
@@ -3,10 +3,11 @@ from abc import ABC, abstractmethod
 from collections.abc import Generator, Mapping
 from typing import Any, Union
 
+from graphon.model_runtime.errors.invoke import InvokeError
+
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.app.entities.task_entities import AppBlockingResponse, AppStreamResponse
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/app/apps/base_app_queue_manager.py b/api/core/app/apps/base_app_queue_manager.py
index d1771452c5..20bf81aeec 100644
--- a/api/core/app/apps/base_app_queue_manager.py
+++ b/api/core/app/apps/base_app_queue_manager.py
@@ -7,6 +7,7 @@ from enum import IntEnum, auto
 from typing import Any
 
 from cachetools import TTLCache, cachedmethod
+from graphon.runtime import GraphRuntimeState
 from redis.exceptions import RedisError
 from sqlalchemy.orm import DeclarativeMeta
 
@@ -21,7 +22,6 @@ from core.app.entities.queue_entities import (
     WorkflowQueueMessage,
 )
 from extensions.ext_redis import redis_client
-from graphon.runtime import GraphRuntimeState
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/app/apps/base_app_runner.py b/api/core/app/apps/base_app_runner.py
index 1251b397e2..4aebc0cb30 100644
--- a/api/core/app/apps/base_app_runner.py
+++ b/api/core/app/apps/base_app_runner.py
@@ -5,6 +5,17 @@ from collections.abc import Generator, Mapping, Sequence
 from mimetypes import guess_extension
 from typing import TYPE_CHECKING, Any, Union
 
+from graphon.file import FileTransferMethod, FileType
+from graphon.model_runtime.entities.llm_entities import LLMResult, LLMResultChunk, LLMResultChunkDelta, LLMUsage
+from graphon.model_runtime.entities.message_entities import (
+    AssistantPromptMessage,
+    ImagePromptMessageContent,
+    PromptMessage,
+    TextPromptMessageContent,
+)
+from graphon.model_runtime.entities.model_entities import ModelPropertyKey
+from graphon.model_runtime.errors.invoke import InvokeBadRequestError
+
 from core.app.app_config.entities import ExternalDataVariableEntity, PromptTemplateEntity
 from core.app.apps.base_app_queue_manager import AppQueueManager, PublishFrom
 from core.app.entities.app_invoke_entities import (
@@ -30,16 +41,6 @@ from core.prompt.entities.advanced_prompt_entities import ChatModelMessage, Comp
 from core.prompt.simple_prompt_transform import ModelMode, SimplePromptTransform
 from core.tools.tool_file_manager import ToolFileManager
 from extensions.ext_database import db
-from graphon.file import FileTransferMethod, FileType
-from graphon.model_runtime.entities.llm_entities import LLMResult, LLMResultChunk, LLMResultChunkDelta, LLMUsage
-from graphon.model_runtime.entities.message_entities import (
-    AssistantPromptMessage,
-    ImagePromptMessageContent,
-    PromptMessage,
-    TextPromptMessageContent,
-)
-from graphon.model_runtime.entities.model_entities import ModelPropertyKey
-from graphon.model_runtime.errors.invoke import InvokeBadRequestError
 from models.enums import CreatorUserRole, MessageFileBelongsTo
 from models.model import App, AppMode, Message, MessageAnnotation, MessageFile
 
diff --git a/api/core/app/apps/chat/app_generator.py b/api/core/app/apps/chat/app_generator.py
index 58afefe296..891dcece73 100644
--- a/api/core/app/apps/chat/app_generator.py
+++ b/api/core/app/apps/chat/app_generator.py
@@ -6,6 +6,7 @@ from collections.abc import Generator, Mapping
 from typing import Any, Literal, overload
 
 from flask import Flask, copy_current_request_context, current_app
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from pydantic import ValidationError
 
 from configs import dify_config
@@ -23,7 +24,6 @@ from core.app.entities.app_invoke_entities import ChatAppGenerateEntity, InvokeF
 from core.ops.ops_trace_manager import TraceQueueManager
 from extensions.ext_database import db
 from factories import file_factory
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from models import Account
 from models.model import App, EndUser
 from services.conversation_service import ConversationService
diff --git a/api/core/app/apps/chat/app_runner.py b/api/core/app/apps/chat/app_runner.py
index 077c5239f3..050f763e95 100644
--- a/api/core/app/apps/chat/app_runner.py
+++ b/api/core/app/apps/chat/app_runner.py
@@ -1,6 +1,8 @@
 import logging
 from typing import cast
 
+from graphon.file import File
+from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 from sqlalchemy import select
 
 from core.app.apps.base_app_queue_manager import AppQueueManager, PublishFrom
@@ -16,8 +18,6 @@ from core.model_manager import ModelInstance
 from core.moderation.base import ModerationError
 from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
 from extensions.ext_database import db
-from graphon.file import File
-from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 from models.model import App, Conversation, Message
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/app/apps/common/graph_runtime_state_support.py b/api/core/app/apps/common/graph_runtime_state_support.py
index 2a90fbdad0..ab277857fe 100644
--- a/api/core/app/apps/common/graph_runtime_state_support.py
+++ b/api/core/app/apps/common/graph_runtime_state_support.py
@@ -4,9 +4,10 @@ from __future__ import annotations
 
 from typing import TYPE_CHECKING
 
-from core.workflow.system_variables import SystemVariableKey, get_system_text
 from graphon.runtime import GraphRuntimeState
 
+from core.workflow.system_variables import SystemVariableKey, get_system_text
+
 if TYPE_CHECKING:
     from core.app.task_pipeline.based_generate_task_pipeline import BasedGenerateTaskPipeline
 
diff --git a/api/core/app/apps/common/workflow_response_converter.py b/api/core/app/apps/common/workflow_response_converter.py
index bd685d5189..a515531616 100644
--- a/api/core/app/apps/common/workflow_response_converter.py
+++ b/api/core/app/apps/common/workflow_response_converter.py
@@ -6,6 +6,19 @@ from dataclasses import dataclass
 from datetime import datetime
 from typing import Any, NewType, TypedDict, Union
 
+from graphon.entities import WorkflowStartReason
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.enums import (
+    BuiltinNodeTypes,
+    WorkflowExecutionStatus,
+    WorkflowNodeExecutionMetadataKey,
+    WorkflowNodeExecutionStatus,
+)
+from graphon.file import FILE_MODEL_IDENTITY, File
+from graphon.runtime import GraphRuntimeState
+from graphon.variables.segments import ArrayFileSegment, FileSegment, Segment
+from graphon.variables.variables import Variable
+from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from sqlalchemy import select
 from sqlalchemy.orm import Session
 
@@ -55,19 +68,6 @@ from core.workflow.human_input_forms import load_form_tokens_by_form_id
 from core.workflow.system_variables import SystemVariableKey, system_variables_to_mapping
 from core.workflow.workflow_entry import WorkflowEntry
 from extensions.ext_database import db
-from graphon.entities import WorkflowStartReason
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.enums import (
-    BuiltinNodeTypes,
-    WorkflowExecutionStatus,
-    WorkflowNodeExecutionMetadataKey,
-    WorkflowNodeExecutionStatus,
-)
-from graphon.file import FILE_MODEL_IDENTITY, File
-from graphon.runtime import GraphRuntimeState
-from graphon.variables.segments import ArrayFileSegment, FileSegment, Segment
-from graphon.variables.variables import Variable
-from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from libs.datetime_utils import naive_utc_now
 from models import Account, EndUser
 from models.human_input import HumanInputForm
diff --git a/api/core/app/apps/completion/app_generator.py b/api/core/app/apps/completion/app_generator.py
index 423bfdac51..61339b316a 100644
--- a/api/core/app/apps/completion/app_generator.py
+++ b/api/core/app/apps/completion/app_generator.py
@@ -6,6 +6,7 @@ from collections.abc import Generator, Mapping
 from typing import Any, Literal, overload
 
 from flask import Flask, copy_current_request_context, current_app
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from pydantic import ValidationError
 from sqlalchemy import select
 
@@ -23,7 +24,6 @@ from core.app.entities.app_invoke_entities import CompletionAppGenerateEntity, I
 from core.ops.ops_trace_manager import TraceQueueManager
 from extensions.ext_database import db
 from factories import file_factory
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
 from models import Account, App, EndUser, Message
 from services.errors.app import MoreLikeThisDisabledError
 from services.errors.message import MessageNotExistsError
diff --git a/api/core/app/apps/completion/app_runner.py b/api/core/app/apps/completion/app_runner.py
index 6bb1ecdcb1..b216f7cf7b 100644
--- a/api/core/app/apps/completion/app_runner.py
+++ b/api/core/app/apps/completion/app_runner.py
@@ -1,6 +1,8 @@
 import logging
 from typing import cast
 
+from graphon.file import File
+from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 from sqlalchemy import select
 
 from core.app.apps.base_app_queue_manager import AppQueueManager
@@ -14,8 +16,6 @@ from core.model_manager import ModelInstance
 from core.moderation.base import ModerationError
 from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
 from extensions.ext_database import db
-from graphon.file import File
-from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 from models.model import App, Message
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/app/apps/pipeline/pipeline_generator.py b/api/core/app/apps/pipeline/pipeline_generator.py
index 4b2f17189b..83c74b86e5 100644
--- a/api/core/app/apps/pipeline/pipeline_generator.py
+++ b/api/core/app/apps/pipeline/pipeline_generator.py
@@ -10,6 +10,8 @@ from collections.abc import Generator, Mapping
 from typing import Any, Literal, cast, overload
 
 from flask import Flask, current_app
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
+from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
 from pydantic import ValidationError
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
@@ -41,8 +43,6 @@ from core.repositories.factory import (
     WorkflowNodeExecutionRepository,
 )
 from extensions.ext_database import db
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
-from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
 from libs.flask_utils import preserve_flask_contexts
 from models import Account, EndUser, Workflow, WorkflowNodeExecutionTriggeredFrom
 from models.dataset import Document, DocumentPipelineExecutionLog, Pipeline
diff --git a/api/core/app/apps/pipeline/pipeline_runner.py b/api/core/app/apps/pipeline/pipeline_runner.py
index 2ee0ae27eb..36daaf09e9 100644
--- a/api/core/app/apps/pipeline/pipeline_runner.py
+++ b/api/core/app/apps/pipeline/pipeline_runner.py
@@ -2,6 +2,12 @@ import logging
 import time
 from typing import cast
 
+from graphon.enums import WorkflowType
+from graphon.graph import Graph
+from graphon.graph_events import GraphEngineEvent, GraphRunFailedEvent
+from graphon.runtime import GraphRuntimeState, VariablePool
+from graphon.variable_loader import VariableLoader
+from graphon.variables.variables import RAGPipelineVariable, RAGPipelineVariableInput
 from sqlalchemy import select
 
 from core.app.apps.base_app_queue_manager import AppQueueManager
@@ -20,12 +26,6 @@ from core.workflow.system_variables import build_bootstrap_variables, build_syst
 from core.workflow.variable_pool_initializer import add_node_inputs_to_pool, add_variables_to_pool
 from core.workflow.workflow_entry import WorkflowEntry
 from extensions.ext_database import db
-from graphon.enums import WorkflowType
-from graphon.graph import Graph
-from graphon.graph_events import GraphEngineEvent, GraphRunFailedEvent
-from graphon.runtime import GraphRuntimeState, VariablePool
-from graphon.variable_loader import VariableLoader
-from graphon.variables.variables import RAGPipelineVariable, RAGPipelineVariableInput
 from models.dataset import Document, Pipeline
 from models.model import EndUser
 from models.workflow import Workflow
diff --git a/api/core/app/apps/workflow/app_generator.py b/api/core/app/apps/workflow/app_generator.py
index 5a1e7e117f..ba070ffa94 100644
--- a/api/core/app/apps/workflow/app_generator.py
+++ b/api/core/app/apps/workflow/app_generator.py
@@ -8,6 +8,10 @@ from collections.abc import Generator, Mapping, Sequence
 from typing import TYPE_CHECKING, Any, Literal, overload
 
 from flask import Flask, current_app
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
+from graphon.runtime import GraphRuntimeState
+from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
 from pydantic import ValidationError
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
@@ -34,10 +38,6 @@ from core.repositories import DifyCoreRepositoryFactory
 from core.repositories.factory import WorkflowExecutionRepository, WorkflowNodeExecutionRepository
 from extensions.ext_database import db
 from factories import file_factory
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError
-from graphon.runtime import GraphRuntimeState
-from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader
 from libs.flask_utils import preserve_flask_contexts
 from models.account import Account
 from models.enums import WorkflowRunTriggeredFrom
diff --git a/api/core/app/apps/workflow/app_runner.py b/api/core/app/apps/workflow/app_runner.py
index cfb9208486..2cb8088971 100644
--- a/api/core/app/apps/workflow/app_runner.py
+++ b/api/core/app/apps/workflow/app_runner.py
@@ -3,6 +3,12 @@ import time
 from collections.abc import Sequence
 from typing import cast
 
+from graphon.enums import WorkflowType
+from graphon.graph_engine.command_channels import RedisChannel
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.runtime import GraphRuntimeState, VariablePool
+from graphon.variable_loader import VariableLoader
+
 from core.app.apps.base_app_queue_manager import AppQueueManager
 from core.app.apps.workflow.app_config_manager import WorkflowAppConfig
 from core.app.apps.workflow_app_runner import WorkflowBasedAppRunner
@@ -15,11 +21,6 @@ from core.workflow.variable_pool_initializer import add_node_inputs_to_pool, add
 from core.workflow.workflow_entry import WorkflowEntry
 from extensions.ext_redis import redis_client
 from extensions.otel import WorkflowAppRunnerHandler, trace_span
-from graphon.enums import WorkflowType
-from graphon.graph_engine.command_channels import RedisChannel
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.runtime import GraphRuntimeState, VariablePool
-from graphon.variable_loader import VariableLoader
 from libs.datetime_utils import naive_utc_now
 from models.workflow import Workflow
 
diff --git a/api/core/app/apps/workflow/generate_task_pipeline.py b/api/core/app/apps/workflow/generate_task_pipeline.py
index 15645add57..96387133b1 100644
--- a/api/core/app/apps/workflow/generate_task_pipeline.py
+++ b/api/core/app/apps/workflow/generate_task_pipeline.py
@@ -4,6 +4,9 @@ from collections.abc import Callable, Generator
 from contextlib import contextmanager
 from typing import Union
 
+from graphon.entities import WorkflowStartReason
+from graphon.enums import WorkflowExecutionStatus
+from graphon.runtime import GraphRuntimeState
 from sqlalchemy.orm import Session, sessionmaker
 
 from constants.tts_auto_play_timeout import TTS_AUTO_PLAY_TIMEOUT, TTS_AUTO_PLAY_YIELD_CPU_TIME
@@ -58,9 +61,6 @@ from core.base.tts import AppGeneratorTTSPublisher, AudioTrunk
 from core.ops.ops_trace_manager import TraceQueueManager
 from core.workflow.system_variables import build_system_variables
 from extensions.ext_database import db
-from graphon.entities import WorkflowStartReason
-from graphon.enums import WorkflowExecutionStatus
-from graphon.runtime import GraphRuntimeState
 from models import Account
 from models.enums import CreatorUserRole
 from models.model import EndUser
diff --git a/api/core/app/apps/workflow_app_runner.py b/api/core/app/apps/workflow_app_runner.py
index 047b54c86c..437432611d 100644
--- a/api/core/app/apps/workflow_app_runner.py
+++ b/api/core/app/apps/workflow_app_runner.py
@@ -3,6 +3,39 @@ import time
 from collections.abc import Mapping, Sequence
 from typing import Any, cast
 
+from graphon.entities.graph_config import NodeConfigDictAdapter
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.graph import Graph
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.graph_events import (
+    GraphEngineEvent,
+    GraphRunAbortedEvent,
+    GraphRunFailedEvent,
+    GraphRunPartialSucceededEvent,
+    GraphRunPausedEvent,
+    GraphRunStartedEvent,
+    GraphRunSucceededEvent,
+    NodeRunAgentLogEvent,
+    NodeRunExceptionEvent,
+    NodeRunFailedEvent,
+    NodeRunHumanInputFormFilledEvent,
+    NodeRunHumanInputFormTimeoutEvent,
+    NodeRunIterationFailedEvent,
+    NodeRunIterationNextEvent,
+    NodeRunIterationStartedEvent,
+    NodeRunIterationSucceededEvent,
+    NodeRunLoopFailedEvent,
+    NodeRunLoopNextEvent,
+    NodeRunLoopStartedEvent,
+    NodeRunLoopSucceededEvent,
+    NodeRunRetrieverResourceEvent,
+    NodeRunRetryEvent,
+    NodeRunStartedEvent,
+    NodeRunStreamChunkEvent,
+    NodeRunSucceededEvent,
+)
+from graphon.runtime import GraphRuntimeState, VariablePool
+from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader, load_into_variable_pool
 from pydantic import ValidationError
 
 from core.app.apps.base_app_queue_manager import AppQueueManager, PublishFrom
@@ -49,39 +82,6 @@ from core.workflow.system_variables import (
 from core.workflow.variable_pool_initializer import add_variables_to_pool
 from core.workflow.workflow_entry import WorkflowEntry
 from core.workflow.workflow_run_outputs import project_node_outputs_for_workflow_run
-from graphon.entities.graph_config import NodeConfigDictAdapter
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.graph import Graph
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.graph_events import (
-    GraphEngineEvent,
-    GraphRunAbortedEvent,
-    GraphRunFailedEvent,
-    GraphRunPartialSucceededEvent,
-    GraphRunPausedEvent,
-    GraphRunStartedEvent,
-    GraphRunSucceededEvent,
-    NodeRunAgentLogEvent,
-    NodeRunExceptionEvent,
-    NodeRunFailedEvent,
-    NodeRunHumanInputFormFilledEvent,
-    NodeRunHumanInputFormTimeoutEvent,
-    NodeRunIterationFailedEvent,
-    NodeRunIterationNextEvent,
-    NodeRunIterationStartedEvent,
-    NodeRunIterationSucceededEvent,
-    NodeRunLoopFailedEvent,
-    NodeRunLoopNextEvent,
-    NodeRunLoopStartedEvent,
-    NodeRunLoopSucceededEvent,
-    NodeRunRetrieverResourceEvent,
-    NodeRunRetryEvent,
-    NodeRunStartedEvent,
-    NodeRunStreamChunkEvent,
-    NodeRunSucceededEvent,
-)
-from graphon.runtime import GraphRuntimeState, VariablePool
-from graphon.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader, load_into_variable_pool
 from models.workflow import Workflow
 from tasks.mail_human_input_delivery_task import dispatch_human_input_email_task
 
diff --git a/api/core/app/entities/app_invoke_entities.py b/api/core/app/entities/app_invoke_entities.py
index 09992f4bbf..a3fb7b4c5d 100644
--- a/api/core/app/entities/app_invoke_entities.py
+++ b/api/core/app/entities/app_invoke_entities.py
@@ -2,13 +2,13 @@ from collections.abc import Mapping, Sequence
 from enum import StrEnum
 from typing import TYPE_CHECKING, Any
 
+from graphon.file import File, FileUploadConfig
+from graphon.model_runtime.entities.model_entities import AIModelEntity
 from pydantic import BaseModel, ConfigDict, Field, ValidationInfo, field_validator
 
 from constants import UUID_NIL
 from core.app.app_config.entities import EasyUIBasedAppConfig, WorkflowUIBasedAppConfig
 from core.entities.provider_configuration import ProviderModelBundle
-from graphon.file import File, FileUploadConfig
-from graphon.model_runtime.entities.model_entities import AIModelEntity
 
 if TYPE_CHECKING:
     from core.ops.ops_trace_manager import TraceQueueManager
diff --git a/api/core/app/entities/queue_entities.py b/api/core/app/entities/queue_entities.py
index 221b7fb058..482f995d8e 100644
--- a/api/core/app/entities/queue_entities.py
+++ b/api/core/app/entities/queue_entities.py
@@ -3,14 +3,14 @@ from datetime import datetime
 from enum import StrEnum, auto
 from typing import Any
 
-from pydantic import BaseModel, ConfigDict, Field
-
-from core.app.entities.agent_strategy import AgentStrategyInfo
-from core.rag.entities import RetrievalSourceMetadata
 from graphon.entities import WorkflowStartReason
 from graphon.entities.pause_reason import PauseReason
 from graphon.enums import NodeType, WorkflowNodeExecutionMetadataKey
 from graphon.model_runtime.entities.llm_entities import LLMResult, LLMResultChunk
+from pydantic import BaseModel, ConfigDict, Field
+
+from core.app.entities.agent_strategy import AgentStrategyInfo
+from core.rag.entities import RetrievalSourceMetadata
 
 
 class QueueEvent(StrEnum):
diff --git a/api/core/app/entities/task_entities.py b/api/core/app/entities/task_entities.py
index 6e4ca69cf0..88faf235d1 100644
--- a/api/core/app/entities/task_entities.py
+++ b/api/core/app/entities/task_entities.py
@@ -2,14 +2,14 @@ from collections.abc import Mapping, Sequence
 from enum import StrEnum
 from typing import Any
 
-from pydantic import BaseModel, ConfigDict, Field
-
-from core.app.entities.agent_strategy import AgentStrategyInfo
-from core.rag.entities import RetrievalSourceMetadata
 from graphon.entities import WorkflowStartReason
 from graphon.enums import WorkflowExecutionStatus, WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from graphon.model_runtime.entities.llm_entities import LLMResult, LLMUsage
 from graphon.nodes.human_input.entities import FormInput, UserAction
+from pydantic import BaseModel, ConfigDict, Field
+
+from core.app.entities.agent_strategy import AgentStrategyInfo
+from core.rag.entities import RetrievalSourceMetadata
 
 
 class AnnotationReplyAccount(BaseModel):
diff --git a/api/core/app/features/hosting_moderation/hosting_moderation.py b/api/core/app/features/hosting_moderation/hosting_moderation.py
index d59f5125e3..d2d2fea4fb 100644
--- a/api/core/app/features/hosting_moderation/hosting_moderation.py
+++ b/api/core/app/features/hosting_moderation/hosting_moderation.py
@@ -1,8 +1,9 @@
 import logging
 
+from graphon.model_runtime.entities.message_entities import PromptMessage
+
 from core.app.entities.app_invoke_entities import EasyUIBasedAppGenerateEntity
 from core.helper import moderation
-from graphon.model_runtime.entities.message_entities import PromptMessage
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/app/layers/pause_state_persist_layer.py b/api/core/app/layers/pause_state_persist_layer.py
index 9811f9f830..c027f42788 100644
--- a/api/core/app/layers/pause_state_persist_layer.py
+++ b/api/core/app/layers/pause_state_persist_layer.py
@@ -1,14 +1,14 @@
 from dataclasses import dataclass
 from typing import Annotated, Literal, Self
 
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.graph_events import GraphEngineEvent, GraphRunPausedEvent
 from pydantic import BaseModel, Field
 from sqlalchemy import Engine
 from sqlalchemy.orm import Session, sessionmaker
 
 from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity, WorkflowAppGenerateEntity
 from core.workflow.system_variables import SystemVariableKey, get_system_text
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.graph_events import GraphEngineEvent, GraphRunPausedEvent
 from models.model import AppMode
 from repositories.api_workflow_run_repository import APIWorkflowRunRepository
 from repositories.factory import DifyAPIRepositoryFactory
diff --git a/api/core/app/layers/timeslice_layer.py b/api/core/app/layers/timeslice_layer.py
index bb9fc1b6fa..8c8daf8712 100644
--- a/api/core/app/layers/timeslice_layer.py
+++ b/api/core/app/layers/timeslice_layer.py
@@ -3,10 +3,10 @@ import uuid
 from typing import ClassVar
 
 from apscheduler.schedulers.background import BackgroundScheduler  # type: ignore
-
 from graphon.graph_engine.entities.commands import CommandType, GraphEngineCommand
 from graphon.graph_engine.layers import GraphEngineLayer
 from graphon.graph_events import GraphEngineEvent
+
 from services.workflow.entities import WorkflowScheduleCFSPlanEntity
 from services.workflow.scheduler import CFSPlanScheduler, SchedulerCommand
 
diff --git a/api/core/app/layers/trigger_post_layer.py b/api/core/app/layers/trigger_post_layer.py
index b60fe82ffe..77c7bec67e 100644
--- a/api/core/app/layers/trigger_post_layer.py
+++ b/api/core/app/layers/trigger_post_layer.py
@@ -2,12 +2,12 @@ import logging
 from datetime import UTC, datetime
 from typing import Any, ClassVar
 
+from graphon.graph_engine.layers import GraphEngineLayer
+from graphon.graph_events import GraphEngineEvent, GraphRunFailedEvent, GraphRunPausedEvent, GraphRunSucceededEvent
 from pydantic import TypeAdapter
 
 from core.db.session_factory import session_factory
 from core.workflow.system_variables import SystemVariableKey, get_system_text
-from graphon.graph_engine.layers import GraphEngineLayer
-from graphon.graph_events import GraphEngineEvent, GraphRunFailedEvent, GraphRunPausedEvent, GraphRunSucceededEvent
 from models.enums import WorkflowTriggerStatus
 from repositories.sqlalchemy_workflow_trigger_log_repository import SQLAlchemyWorkflowTriggerLogRepository
 from tasks.workflow_cfs_scheduler.cfs_scheduler import AsyncWorkflowCFSPlanEntity
diff --git a/api/core/app/llm/model_access.py b/api/core/app/llm/model_access.py
index c49c4eb0ac..278d0cb30b 100644
--- a/api/core/app/llm/model_access.py
+++ b/api/core/app/llm/model_access.py
@@ -2,15 +2,16 @@ from __future__ import annotations
 
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.nodes.llm.entities import ModelConfig
+from graphon.nodes.llm.exc import LLMModeRequiredError, ModelNotExistError
+from graphon.nodes.llm.protocols import CredentialsProvider
+
 from core.app.entities.app_invoke_entities import DifyRunContext, ModelConfigWithCredentialsEntity
 from core.errors.error import ProviderTokenNotInitError
 from core.model_manager import ModelInstance, ModelManager
 from core.plugin.impl.model_runtime_factory import create_plugin_provider_manager
 from core.provider_manager import ProviderManager
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.nodes.llm.entities import ModelConfig
-from graphon.nodes.llm.exc import LLMModeRequiredError, ModelNotExistError
-from graphon.nodes.llm.protocols import CredentialsProvider
 
 
 class DifyCredentialsProvider:
diff --git a/api/core/app/llm/quota.py b/api/core/app/llm/quota.py
index b6039e1e4e..0bb10190c4 100644
--- a/api/core/app/llm/quota.py
+++ b/api/core/app/llm/quota.py
@@ -1,3 +1,4 @@
+from graphon.model_runtime.entities.llm_entities import LLMUsage
 from sqlalchemy import update
 from sqlalchemy.orm import sessionmaker
 
@@ -7,7 +8,6 @@ from core.entities.provider_entities import ProviderQuotaType, QuotaUnit
 from core.errors.error import QuotaExceededError
 from core.model_manager import ModelInstance
 from extensions.ext_database import db
-from graphon.model_runtime.entities.llm_entities import LLMUsage
 from libs.datetime_utils import naive_utc_now
 from models.provider import Provider, ProviderType
 from models.provider_ids import ModelProviderID
diff --git a/api/core/app/task_pipeline/based_generate_task_pipeline.py b/api/core/app/task_pipeline/based_generate_task_pipeline.py
index 9e688589db..10b9c36d3e 100644
--- a/api/core/app/task_pipeline/based_generate_task_pipeline.py
+++ b/api/core/app/task_pipeline/based_generate_task_pipeline.py
@@ -1,6 +1,7 @@
 import logging
 import time
 
+from graphon.model_runtime.errors.invoke import InvokeAuthorizationError, InvokeError
 from sqlalchemy import select
 from sqlalchemy.orm import Session
 
@@ -17,7 +18,6 @@ from core.app.entities.task_entities import (
 )
 from core.errors.error import QuotaExceededError
 from core.moderation.output_moderation import ModerationRule, OutputModeration
-from graphon.model_runtime.errors.invoke import InvokeAuthorizationError, InvokeError
 from models.enums import MessageStatus
 from models.model import Message
 
diff --git a/api/core/app/workflow/layers/llm_quota.py b/api/core/app/workflow/layers/llm_quota.py
index 4a7918032e..c577ce0754 100644
--- a/api/core/app/workflow/layers/llm_quota.py
+++ b/api/core/app/workflow/layers/llm_quota.py
@@ -7,16 +7,17 @@ This layer centralizes model-quota deduction outside node implementations.
 import logging
 from typing import TYPE_CHECKING, cast, final, override
 
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
-from core.app.llm import deduct_llm_quota, ensure_llm_quota_available
-from core.errors.error import QuotaExceededError
-from core.model_manager import ModelInstance
 from graphon.enums import BuiltinNodeTypes
 from graphon.graph_engine.entities.commands import AbortCommand, CommandType
 from graphon.graph_engine.layers import GraphEngineLayer
 from graphon.graph_events import GraphEngineEvent, GraphNodeEventBase, NodeRunSucceededEvent
 from graphon.nodes.base.node import Node
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
+from core.app.llm import deduct_llm_quota, ensure_llm_quota_available
+from core.errors.error import QuotaExceededError
+from core.model_manager import ModelInstance
+
 if TYPE_CHECKING:
     from graphon.nodes.llm.node import LLMNode
     from graphon.nodes.parameter_extractor.parameter_extractor_node import ParameterExtractorNode
diff --git a/api/core/app/workflow/layers/persistence.py b/api/core/app/workflow/layers/persistence.py
index 87f005a250..ada065a943 100644
--- a/api/core/app/workflow/layers/persistence.py
+++ b/api/core/app/workflow/layers/persistence.py
@@ -14,13 +14,6 @@ from dataclasses import dataclass
 from datetime import datetime
 from typing import Any, Union
 
-from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity, WorkflowAppGenerateEntity
-from core.ops.entities.trace_entity import TraceTaskName
-from core.ops.ops_trace_manager import TraceQueueManager, TraceTask
-from core.repositories.factory import WorkflowExecutionRepository, WorkflowNodeExecutionRepository
-from core.workflow.system_variables import SystemVariableKey
-from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
-from core.workflow.workflow_run_outputs import project_node_outputs_for_workflow_run
 from graphon.entities import WorkflowExecution, WorkflowNodeExecution
 from graphon.enums import (
     WorkflowExecutionStatus,
@@ -45,6 +38,14 @@ from graphon.graph_events import (
     NodeRunSucceededEvent,
 )
 from graphon.node_events import NodeRunResult
+
+from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity, WorkflowAppGenerateEntity
+from core.ops.entities.trace_entity import TraceTaskName
+from core.ops.ops_trace_manager import TraceQueueManager, TraceTask
+from core.repositories.factory import WorkflowExecutionRepository, WorkflowNodeExecutionRepository
+from core.workflow.system_variables import SystemVariableKey
+from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
+from core.workflow.workflow_run_outputs import project_node_outputs_for_workflow_run
 from libs.datetime_utils import naive_utc_now
 
 
diff --git a/api/core/base/tts/app_generator_tts_publisher.py b/api/core/base/tts/app_generator_tts_publisher.py
index 9e3c187210..3d8a7a54f3 100644
--- a/api/core/base/tts/app_generator_tts_publisher.py
+++ b/api/core/base/tts/app_generator_tts_publisher.py
@@ -6,6 +6,9 @@ import re
 import threading
 from collections.abc import Iterable
 
+from graphon.model_runtime.entities.message_entities import TextPromptMessageContent
+from graphon.model_runtime.entities.model_entities import ModelType
+
 from core.app.entities.queue_entities import (
     MessageQueueMessage,
     QueueAgentMessageEvent,
@@ -15,8 +18,6 @@ from core.app.entities.queue_entities import (
     WorkflowQueueMessage,
 )
 from core.model_manager import ModelInstance, ModelManager
-from graphon.model_runtime.entities.message_entities import TextPromptMessageContent
-from graphon.model_runtime.entities.model_entities import ModelType
 
 
 class AudioTrunk:
diff --git a/api/core/datasource/datasource_manager.py b/api/core/datasource/datasource_manager.py
index dc831e5cac..a5297fa33a 100644
--- a/api/core/datasource/datasource_manager.py
+++ b/api/core/datasource/datasource_manager.py
@@ -3,6 +3,9 @@ from collections.abc import Generator
 from threading import Lock
 from typing import Any, cast
 
+from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
+from graphon.file import File, FileTransferMethod, FileType, get_file_type_by_mime_type
+from graphon.node_events import NodeRunResult, StreamChunkEvent, StreamCompletedEvent
 from sqlalchemy import select
 
 import contexts
@@ -28,9 +31,6 @@ from core.plugin.impl.datasource import PluginDatasourceManager
 from core.workflow.file_reference import build_file_reference
 from core.workflow.nodes.datasource.entities import DatasourceParameter, OnlineDriveDownloadFileParam
 from factories import file_factory
-from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
-from graphon.file import File, FileTransferMethod, FileType, get_file_type_by_mime_type
-from graphon.node_events import NodeRunResult, StreamChunkEvent, StreamCompletedEvent
 from models.model import UploadFile
 from models.tools import ToolFile
 from services.datasource_provider_service import DatasourceProviderService
diff --git a/api/core/datasource/entities/api_entities.py b/api/core/datasource/entities/api_entities.py
index 352e6bfd49..9c22d5e67c 100644
--- a/api/core/datasource/entities/api_entities.py
+++ b/api/core/datasource/entities/api_entities.py
@@ -1,10 +1,10 @@
 from typing import Any, Literal, TypedDict
 
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, field_validator
 
 from core.datasource.entities.datasource_entities import DatasourceParameter
 from core.tools.entities.common_entities import I18nObject, I18nObjectDict
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 
 class DatasourceApiEntity(BaseModel):
diff --git a/api/core/datasource/utils/message_transformer.py b/api/core/datasource/utils/message_transformer.py
index 6a3f9e684a..c012e128f4 100644
--- a/api/core/datasource/utils/message_transformer.py
+++ b/api/core/datasource/utils/message_transformer.py
@@ -2,10 +2,11 @@ import logging
 from collections.abc import Generator
 from mimetypes import guess_extension, guess_type
 
+from graphon.file import File, FileTransferMethod, FileType
+
 from core.datasource.entities.datasource_entities import DatasourceMessage
 from core.tools.tool_file_manager import ToolFileManager
 from core.workflow.file_reference import parse_file_reference
-from graphon.file import File, FileTransferMethod, FileType
 from models.tools import ToolFile
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/entities/execution_extra_content.py b/api/core/entities/execution_extra_content.py
index 04ae193396..d304c982cd 100644
--- a/api/core/entities/execution_extra_content.py
+++ b/api/core/entities/execution_extra_content.py
@@ -3,9 +3,9 @@ from __future__ import annotations
 from collections.abc import Mapping, Sequence
 from typing import Any, TypeAlias
 
+from graphon.nodes.human_input.entities import FormInput, UserAction
 from pydantic import BaseModel, ConfigDict, Field
 
-from graphon.nodes.human_input.entities import FormInput, UserAction
 from models.execution_extra_content import ExecutionContentType
 
 
diff --git a/api/core/entities/mcp_provider.py b/api/core/entities/mcp_provider.py
index bfa4f56915..a440829b46 100644
--- a/api/core/entities/mcp_provider.py
+++ b/api/core/entities/mcp_provider.py
@@ -6,6 +6,7 @@ from enum import StrEnum
 from typing import TYPE_CHECKING, Any
 from urllib.parse import urlparse
 
+from graphon.file import helpers as file_helpers
 from pydantic import BaseModel
 
 from configs import dify_config
@@ -15,7 +16,6 @@ from core.helper.provider_cache import NoOpProviderCredentialCache
 from core.mcp.types import OAuthClientInformation, OAuthClientMetadata, OAuthTokens
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolProviderType
-from graphon.file import helpers as file_helpers
 
 if TYPE_CHECKING:
     from models.tools import MCPToolProvider
diff --git a/api/core/entities/model_entities.py b/api/core/entities/model_entities.py
index e99a131500..84d95c38c6 100644
--- a/api/core/entities/model_entities.py
+++ b/api/core/entities/model_entities.py
@@ -1,11 +1,10 @@
 from collections.abc import Sequence
 from enum import StrEnum, auto
 
-from pydantic import BaseModel, ConfigDict
-
 from graphon.model_runtime.entities.common_entities import I18nObject
 from graphon.model_runtime.entities.model_entities import ModelType, ProviderModel
 from graphon.model_runtime.entities.provider_entities import ProviderEntity
+from pydantic import BaseModel, ConfigDict
 
 
 class ModelStatus(StrEnum):
diff --git a/api/core/entities/provider_configuration.py b/api/core/entities/provider_configuration.py
index 1ab66cceee..d07f6f913a 100644
--- a/api/core/entities/provider_configuration.py
+++ b/api/core/entities/provider_configuration.py
@@ -8,6 +8,16 @@ from collections.abc import Iterator, Sequence
 from json import JSONDecodeError
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import AIModelEntity, FetchFrom, ModelType
+from graphon.model_runtime.entities.provider_entities import (
+    ConfigurateMethod,
+    CredentialFormSchema,
+    FormType,
+    ProviderEntity,
+)
+from graphon.model_runtime.model_providers.__base.ai_model import AIModel
+from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
+from graphon.model_runtime.runtime import ModelRuntime
 from pydantic import BaseModel, ConfigDict, Field, PrivateAttr, model_validator
 from sqlalchemy import func, select
 from sqlalchemy.orm import Session
@@ -24,16 +34,6 @@ from core.entities.provider_entities import (
 from core.helper import encrypter
 from core.helper.model_provider_cache import ProviderCredentialsCache, ProviderCredentialsCacheType
 from core.plugin.impl.model_runtime_factory import create_plugin_model_provider_factory
-from graphon.model_runtime.entities.model_entities import AIModelEntity, FetchFrom, ModelType
-from graphon.model_runtime.entities.provider_entities import (
-    ConfigurateMethod,
-    CredentialFormSchema,
-    FormType,
-    ProviderEntity,
-)
-from graphon.model_runtime.model_providers.__base.ai_model import AIModel
-from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
-from graphon.model_runtime.runtime import ModelRuntime
 from libs.datetime_utils import naive_utc_now
 from models.engine import db
 from models.enums import CredentialSourceType
diff --git a/api/core/entities/provider_entities.py b/api/core/entities/provider_entities.py
index 72b29c2277..95431c0e01 100644
--- a/api/core/entities/provider_entities.py
+++ b/api/core/entities/provider_entities.py
@@ -3,6 +3,7 @@ from __future__ import annotations
 from enum import StrEnum, auto
 from typing import Any, Union
 
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, ConfigDict, Field
 
 from core.entities.parameter_entities import (
@@ -12,7 +13,6 @@ from core.entities.parameter_entities import (
     ToolSelectorScope,
 )
 from core.tools.entities.common_entities import I18nObject
-from graphon.model_runtime.entities.model_entities import ModelType
 
 
 class ProviderQuotaType(StrEnum):
diff --git a/api/core/helper/code_executor/code_executor.py b/api/core/helper/code_executor/code_executor.py
index 951e065b2c..35bfcfb6a5 100644
--- a/api/core/helper/code_executor/code_executor.py
+++ b/api/core/helper/code_executor/code_executor.py
@@ -4,6 +4,7 @@ from threading import Lock
 from typing import Any
 
 import httpx
+from graphon.nodes.code.entities import CodeLanguage
 from pydantic import BaseModel
 from yarl import URL
 
@@ -13,7 +14,6 @@ from core.helper.code_executor.jinja2.jinja2_transformer import Jinja2TemplateTr
 from core.helper.code_executor.python3.python3_transformer import Python3TemplateTransformer
 from core.helper.code_executor.template_transformer import TemplateTransformer
 from core.helper.http_client_pooling import get_pooled_http_client
-from graphon.nodes.code.entities import CodeLanguage
 
 logger = logging.getLogger(__name__)
 code_execution_endpoint_url = URL(str(dify_config.CODE_EXECUTION_ENDPOINT))
diff --git a/api/core/helper/moderation.py b/api/core/helper/moderation.py
index dc37a36943..a1e782a094 100644
--- a/api/core/helper/moderation.py
+++ b/api/core/helper/moderation.py
@@ -2,13 +2,14 @@ import logging
 import secrets
 from typing import cast
 
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.errors.invoke import InvokeBadRequestError
+from graphon.model_runtime.model_providers.__base.moderation_model import ModerationModel
+
 from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
 from core.entities import DEFAULT_PLUGIN_ID
 from core.plugin.impl.model_runtime_factory import create_plugin_model_provider_factory
 from extensions.ext_hosting_provider import hosting_configuration
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.errors.invoke import InvokeBadRequestError
-from graphon.model_runtime.model_providers.__base.moderation_model import ModerationModel
 from models.provider import ProviderType
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/hosting_configuration.py b/api/core/hosting_configuration.py
index 8bcb899b23..f8f56e12d2 100644
--- a/api/core/hosting_configuration.py
+++ b/api/core/hosting_configuration.py
@@ -1,12 +1,12 @@
 from typing import Any
 
 from flask import Flask
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel
 
 from configs import dify_config
 from core.entities import DEFAULT_PLUGIN_ID
 from core.entities.provider_entities import ProviderQuotaType, QuotaUnit, RestrictModel
-from graphon.model_runtime.entities.model_entities import ModelType
 
 
 class HostingQuota(BaseModel):
diff --git a/api/core/llm_generator/output_parser/structured_output.py b/api/core/llm_generator/output_parser/structured_output.py
index d2e375626f..a8ad7c9179 100644
--- a/api/core/llm_generator/output_parser/structured_output.py
+++ b/api/core/llm_generator/output_parser/structured_output.py
@@ -5,11 +5,6 @@ from enum import StrEnum
 from typing import Any, Literal, cast, overload
 
 import json_repair
-from pydantic import TypeAdapter, ValidationError
-
-from core.llm_generator.output_parser.errors import OutputParserError
-from core.llm_generator.prompts import STRUCTURED_OUTPUT_PROMPT
-from core.model_manager import ModelInstance
 from graphon.model_runtime.callbacks.base_callback import Callback
 from graphon.model_runtime.entities.llm_entities import (
     LLMResult,
@@ -26,6 +21,11 @@ from graphon.model_runtime.entities.message_entities import (
     TextPromptMessageContent,
 )
 from graphon.model_runtime.entities.model_entities import AIModelEntity, ParameterRule
+from pydantic import TypeAdapter, ValidationError
+
+from core.llm_generator.output_parser.errors import OutputParserError
+from core.llm_generator.prompts import STRUCTURED_OUTPUT_PROMPT
+from core.model_manager import ModelInstance
 
 
 class ResponseFormat(StrEnum):
diff --git a/api/core/mcp/server/streamable_http.py b/api/core/mcp/server/streamable_http.py
index 884610ca82..72171d1536 100644
--- a/api/core/mcp/server/streamable_http.py
+++ b/api/core/mcp/server/streamable_http.py
@@ -3,11 +3,12 @@ import logging
 from collections.abc import Mapping
 from typing import Any, NotRequired, TypedDict, cast
 
+from graphon.variables.input_entities import VariableEntity, VariableEntityType
+
 from configs import dify_config
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.app.features.rate_limiting.rate_limit import RateLimitGenerator
 from core.mcp import types as mcp_types
-from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from models.model import App, AppMCPServer, AppMode, EndUser
 from services.app_generate_service import AppGenerateService
 
diff --git a/api/core/mcp/utils.py b/api/core/mcp/utils.py
index 7b5a7635f1..7e35044176 100644
--- a/api/core/mcp/utils.py
+++ b/api/core/mcp/utils.py
@@ -4,11 +4,11 @@ from contextlib import AbstractContextManager
 
 import httpx
 import httpx_sse
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from httpx_sse import connect_sse
 
 from configs import dify_config
 from core.mcp.types import ErrorData, JSONRPCError
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 HTTP_REQUEST_NODE_SSL_VERIFY = dify_config.HTTP_REQUEST_NODE_SSL_VERIFY
 
diff --git a/api/core/memory/token_buffer_memory.py b/api/core/memory/token_buffer_memory.py
index d840ee213c..5809d6f74a 100644
--- a/api/core/memory/token_buffer_memory.py
+++ b/api/core/memory/token_buffer_memory.py
@@ -1,14 +1,5 @@
 from collections.abc import Sequence
 
-from sqlalchemy import select
-from sqlalchemy.orm import sessionmaker
-
-from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
-from core.app.file_access import DatabaseFileAccessController
-from core.model_manager import ModelInstance
-from core.prompt.utils.extract_thread_messages import extract_thread_messages
-from extensions.ext_database import db
-from factories import file_factory
 from graphon.file import file_manager
 from graphon.model_runtime.entities import (
     AssistantPromptMessage,
@@ -19,6 +10,15 @@ from graphon.model_runtime.entities import (
     UserPromptMessage,
 )
 from graphon.model_runtime.entities.message_entities import PromptMessageContentUnionTypes
+from sqlalchemy import select
+from sqlalchemy.orm import sessionmaker
+
+from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
+from core.app.file_access import DatabaseFileAccessController
+from core.model_manager import ModelInstance
+from core.prompt.utils.extract_thread_messages import extract_thread_messages
+from extensions.ext_database import db
+from factories import file_factory
 from models.model import AppMode, Conversation, Message, MessageFile
 from models.workflow import Workflow
 from repositories.api_workflow_run_repository import APIWorkflowRunRepository
diff --git a/api/core/model_manager.py b/api/core/model_manager.py
index d8d8dfedd8..36beb55d7f 100644
--- a/api/core/model_manager.py
+++ b/api/core/model_manager.py
@@ -2,15 +2,6 @@ import logging
 from collections.abc import Callable, Generator, Iterable, Mapping, Sequence
 from typing import IO, Any, Literal, Optional, Union, cast, overload
 
-from configs import dify_config
-from core.entities import PluginCredentialType
-from core.entities.embedding_type import EmbeddingInputType
-from core.entities.provider_configuration import ProviderConfiguration, ProviderModelBundle
-from core.entities.provider_entities import ModelLoadBalancingConfiguration
-from core.errors.error import ProviderTokenNotInitError
-from core.plugin.impl.model_runtime_factory import create_plugin_provider_manager
-from core.provider_manager import ProviderManager
-from extensions.ext_redis import redis_client
 from graphon.model_runtime.callbacks.base_callback import Callback
 from graphon.model_runtime.entities.llm_entities import LLMResult
 from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageTool
@@ -24,6 +15,16 @@ from graphon.model_runtime.model_providers.__base.rerank_model import RerankMode
 from graphon.model_runtime.model_providers.__base.speech2text_model import Speech2TextModel
 from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
 from graphon.model_runtime.model_providers.__base.tts_model import TTSModel
+
+from configs import dify_config
+from core.entities import PluginCredentialType
+from core.entities.embedding_type import EmbeddingInputType
+from core.entities.provider_configuration import ProviderConfiguration, ProviderModelBundle
+from core.entities.provider_entities import ModelLoadBalancingConfiguration
+from core.errors.error import ProviderTokenNotInitError
+from core.plugin.impl.model_runtime_factory import create_plugin_provider_manager
+from core.provider_manager import ProviderManager
+from extensions.ext_redis import redis_client
 from models.provider import ProviderType
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/ops/aliyun_trace/aliyun_trace.py b/api/core/ops/aliyun_trace/aliyun_trace.py
index 76e81242f4..70aaf2a07b 100644
--- a/api/core/ops/aliyun_trace/aliyun_trace.py
+++ b/api/core/ops/aliyun_trace/aliyun_trace.py
@@ -1,6 +1,8 @@
 import logging
 from collections.abc import Sequence
 
+from graphon.entities import WorkflowNodeExecution
+from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from opentelemetry.trace import SpanKind
 from sqlalchemy.orm import sessionmaker
 
@@ -58,8 +60,6 @@ from core.ops.entities.trace_entity import (
 )
 from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
-from graphon.entities import WorkflowNodeExecution
-from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import WorkflowNodeExecutionTriggeredFrom
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/ops/aliyun_trace/utils.py b/api/core/ops/aliyun_trace/utils.py
index 2e02a186cc..aa35ac74c2 100644
--- a/api/core/ops/aliyun_trace/utils.py
+++ b/api/core/ops/aliyun_trace/utils.py
@@ -2,6 +2,8 @@ import json
 from collections.abc import Mapping
 from typing import Any, TypedDict
 
+from graphon.entities import WorkflowNodeExecution
+from graphon.enums import WorkflowNodeExecutionStatus
 from opentelemetry.trace import Link, Status, StatusCode
 
 from core.ops.aliyun_trace.entities.semconv import (
@@ -15,8 +17,6 @@ from core.ops.aliyun_trace.entities.semconv import (
 )
 from core.rag.models.document import Document
 from extensions.ext_database import db
-from graphon.entities import WorkflowNodeExecution
-from graphon.enums import WorkflowNodeExecutionStatus
 from models import EndUser
 
 # Constants
diff --git a/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py b/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
index 78516e1a22..dd5edde630 100644
--- a/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
+++ b/api/core/ops/arize_phoenix_trace/arize_phoenix_trace.py
@@ -6,6 +6,7 @@ from datetime import datetime, timedelta
 from typing import Any, Union, cast
 from urllib.parse import urlparse
 
+from graphon.enums import WorkflowNodeExecutionStatus
 from openinference.semconv.trace import (
     MessageAttributes,
     OpenInferenceMimeTypeValues,
@@ -40,7 +41,6 @@ from core.ops.entities.trace_entity import (
 from core.ops.utils import JSON_DICT_ADAPTER
 from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
-from graphon.enums import WorkflowNodeExecutionStatus
 from models.model import EndUser, MessageFile
 from models.workflow import WorkflowNodeExecutionTriggeredFrom
 
diff --git a/api/core/ops/langsmith_trace/langsmith_trace.py b/api/core/ops/langsmith_trace/langsmith_trace.py
index d960038f15..490c64af84 100644
--- a/api/core/ops/langsmith_trace/langsmith_trace.py
+++ b/api/core/ops/langsmith_trace/langsmith_trace.py
@@ -4,6 +4,7 @@ import uuid
 from datetime import datetime, timedelta
 from typing import cast
 
+from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from langsmith import Client
 from langsmith.schemas import RunBase
 from sqlalchemy.orm import sessionmaker
@@ -29,7 +30,6 @@ from core.ops.langsmith_trace.entities.langsmith_trace_entity import (
 from core.ops.utils import filter_none_values, generate_dotted_order
 from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
-from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser, MessageFile, WorkflowNodeExecutionTriggeredFrom
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/ops/mlflow_trace/mlflow_trace.py b/api/core/ops/mlflow_trace/mlflow_trace.py
index 87fcaeabcc..c070a937be 100644
--- a/api/core/ops/mlflow_trace/mlflow_trace.py
+++ b/api/core/ops/mlflow_trace/mlflow_trace.py
@@ -4,6 +4,7 @@ from datetime import datetime, timedelta
 from typing import Any, cast
 
 import mlflow
+from graphon.enums import BuiltinNodeTypes
 from mlflow.entities import Document, Span, SpanEvent, SpanStatusCode, SpanType
 from mlflow.tracing.constant import SpanAttributeKey, TokenUsageKey, TraceMetadataKey
 from mlflow.tracing.fluent import start_span_no_context, update_current_trace
@@ -25,7 +26,6 @@ from core.ops.entities.trace_entity import (
 )
 from core.ops.utils import JSON_DICT_ADAPTER
 from extensions.ext_database import db
-from graphon.enums import BuiltinNodeTypes
 from models import EndUser
 from models.workflow import WorkflowNodeExecutionModel
 
diff --git a/api/core/ops/opik_trace/opik_trace.py b/api/core/ops/opik_trace/opik_trace.py
index 672efe45bd..e0c7b9bfe5 100644
--- a/api/core/ops/opik_trace/opik_trace.py
+++ b/api/core/ops/opik_trace/opik_trace.py
@@ -5,6 +5,7 @@ import uuid
 from datetime import datetime, timedelta
 from typing import Any, cast
 
+from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from opik import Opik, Trace
 from opik.id_helpers import uuid4_to_uuid7
 from sqlalchemy.orm import sessionmaker
@@ -24,7 +25,6 @@ from core.ops.entities.trace_entity import (
 )
 from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
-from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser, MessageFile, WorkflowNodeExecutionTriggeredFrom
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/ops/tencent_trace/span_builder.py b/api/core/ops/tencent_trace/span_builder.py
index 36878dc58f..f79095d966 100644
--- a/api/core/ops/tencent_trace/span_builder.py
+++ b/api/core/ops/tencent_trace/span_builder.py
@@ -6,6 +6,8 @@ import json
 import logging
 from datetime import datetime
 
+from graphon.entities import WorkflowNodeExecution
+from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from opentelemetry.trace import Status, StatusCode
 
 from core.ops.entities.trace_entity import (
@@ -41,8 +43,6 @@ from core.ops.tencent_trace.entities.semconv import (
 from core.ops.tencent_trace.entities.tencent_trace_entity import SpanData
 from core.ops.tencent_trace.utils import TencentTraceUtils
 from core.rag.models.document import Document
-from graphon.entities import WorkflowNodeExecution
-from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/ops/tencent_trace/tencent_trace.py b/api/core/ops/tencent_trace/tencent_trace.py
index d681b9da80..84f54d8a5a 100644
--- a/api/core/ops/tencent_trace/tencent_trace.py
+++ b/api/core/ops/tencent_trace/tencent_trace.py
@@ -4,6 +4,10 @@ Tencent APM tracing implementation with separated concerns
 
 import logging
 
+from graphon.entities.workflow_node_execution import (
+    WorkflowNodeExecution,
+)
+from graphon.nodes import BuiltinNodeTypes
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -25,10 +29,6 @@ from core.ops.tencent_trace.span_builder import TencentSpanBuilder
 from core.ops.tencent_trace.utils import TencentTraceUtils
 from core.repositories import SQLAlchemyWorkflowNodeExecutionRepository
 from extensions.ext_database import db
-from graphon.entities.workflow_node_execution import (
-    WorkflowNodeExecution,
-)
-from graphon.nodes import BuiltinNodeTypes
 from models import Account, App, TenantAccountJoin, WorkflowNodeExecutionTriggeredFrom
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/ops/weave_trace/weave_trace.py b/api/core/ops/weave_trace/weave_trace.py
index f79544f1c7..8d9ba4694d 100644
--- a/api/core/ops/weave_trace/weave_trace.py
+++ b/api/core/ops/weave_trace/weave_trace.py
@@ -6,6 +6,7 @@ from typing import Any, cast
 
 import wandb
 import weave
+from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from sqlalchemy.orm import sessionmaker
 from weave.trace_server.trace_server_interface import (
     CallEndReq,
@@ -32,7 +33,6 @@ from core.ops.entities.trace_entity import (
 from core.ops.weave_trace.entities.weave_trace_entity import WeaveTraceModel
 from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
-from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionMetadataKey
 from models import EndUser, MessageFile, WorkflowNodeExecutionTriggeredFrom
 
 logger = logging.getLogger(__name__)
diff --git a/api/core/plugin/backwards_invocation/model.py b/api/core/plugin/backwards_invocation/model.py
index c92438960a..a4b24ff849 100644
--- a/api/core/plugin/backwards_invocation/model.py
+++ b/api/core/plugin/backwards_invocation/model.py
@@ -3,6 +3,20 @@ from binascii import hexlify, unhexlify
 from collections.abc import Generator
 from typing import Any
 
+from graphon.model_runtime.entities.llm_entities import (
+    LLMResult,
+    LLMResultChunk,
+    LLMResultChunkDelta,
+    LLMResultChunkWithStructuredOutput,
+    LLMResultWithStructuredOutput,
+)
+from graphon.model_runtime.entities.message_entities import (
+    PromptMessage,
+    SystemPromptMessage,
+    UserPromptMessage,
+)
+from graphon.model_runtime.entities.model_entities import ModelType
+
 from core.app.llm import deduct_llm_quota
 from core.llm_generator.output_parser.structured_output import invoke_llm_with_structured_output
 from core.model_manager import ModelManager
@@ -19,19 +33,6 @@ from core.plugin.entities.request import (
 )
 from core.tools.entities.tool_entities import ToolProviderType
 from core.tools.utils.model_invocation_utils import ModelInvocationUtils
-from graphon.model_runtime.entities.llm_entities import (
-    LLMResult,
-    LLMResultChunk,
-    LLMResultChunkDelta,
-    LLMResultChunkWithStructuredOutput,
-    LLMResultWithStructuredOutput,
-)
-from graphon.model_runtime.entities.message_entities import (
-    PromptMessage,
-    SystemPromptMessage,
-    UserPromptMessage,
-)
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.account import Tenant
 
 
diff --git a/api/core/plugin/backwards_invocation/node.py b/api/core/plugin/backwards_invocation/node.py
index 9550e49992..9478997494 100644
--- a/api/core/plugin/backwards_invocation/node.py
+++ b/api/core/plugin/backwards_invocation/node.py
@@ -1,4 +1,3 @@
-from core.plugin.backwards_invocation.base import BaseBackwardsInvocation
 from graphon.enums import BuiltinNodeTypes
 from graphon.nodes.llm.entities import ModelConfig as LLMModelConfig
 from graphon.nodes.parameter_extractor.entities import (
@@ -9,6 +8,8 @@ from graphon.nodes.question_classifier.entities import (
     ClassConfig,
     QuestionClassifierNodeData,
 )
+
+from core.plugin.backwards_invocation.base import BaseBackwardsInvocation
 from services.workflow_service import WorkflowService
 
 
diff --git a/api/core/plugin/entities/plugin.py b/api/core/plugin/entities/plugin.py
index 89e0e8881c..4d28032a57 100644
--- a/api/core/plugin/entities/plugin.py
+++ b/api/core/plugin/entities/plugin.py
@@ -3,6 +3,7 @@ from collections.abc import Mapping
 from enum import StrEnum, auto
 from typing import Any
 
+from graphon.model_runtime.entities.provider_entities import ProviderEntity
 from packaging.version import InvalidVersion, Version
 from pydantic import BaseModel, Field, field_validator, model_validator
 
@@ -13,7 +14,6 @@ from core.plugin.entities.endpoint import EndpointProviderDeclaration
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolProviderEntity
 from core.trigger.entities.entities import TriggerProviderEntity
-from graphon.model_runtime.entities.provider_entities import ProviderEntity
 
 
 class PluginInstallationSource(StrEnum):
diff --git a/api/core/plugin/entities/plugin_daemon.py b/api/core/plugin/entities/plugin_daemon.py
index 257638ad77..e0ddb746c7 100644
--- a/api/core/plugin/entities/plugin_daemon.py
+++ b/api/core/plugin/entities/plugin_daemon.py
@@ -6,6 +6,8 @@ from datetime import datetime
 from enum import StrEnum
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import AIModelEntity
+from graphon.model_runtime.entities.provider_entities import ProviderEntity
 from pydantic import BaseModel, ConfigDict, Field
 
 from core.agent.plugin_entities import AgentProviderEntityWithPlugin
@@ -16,8 +18,6 @@ from core.plugin.entities.plugin import PluginDeclaration, PluginEntity
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolProviderEntityWithPlugin
 from core.trigger.entities.entities import TriggerProviderEntity
-from graphon.model_runtime.entities.model_entities import AIModelEntity
-from graphon.model_runtime.entities.provider_entities import ProviderEntity
 
 
 class PluginDaemonBasicResponse[T: BaseModel | dict | list | bool | str](BaseModel):
diff --git a/api/core/plugin/entities/request.py b/api/core/plugin/entities/request.py
index 1474883204..4a85952dcd 100644
--- a/api/core/plugin/entities/request.py
+++ b/api/core/plugin/entities/request.py
@@ -4,10 +4,6 @@ from collections.abc import Mapping
 from typing import Any, Literal
 
 from flask import Response
-from pydantic import BaseModel, ConfigDict, Field, field_validator
-
-from core.entities.provider_entities import BasicProviderConfig
-from core.plugin.utils.http_parser import deserialize_response
 from graphon.model_runtime.entities.message_entities import (
     AssistantPromptMessage,
     PromptMessage,
@@ -25,6 +21,10 @@ from graphon.nodes.parameter_extractor.entities import (
 from graphon.nodes.question_classifier.entities import (
     ClassConfig,
 )
+from pydantic import BaseModel, ConfigDict, Field, field_validator
+
+from core.entities.provider_entities import BasicProviderConfig
+from core.plugin.utils.http_parser import deserialize_response
 
 
 class InvokeCredentials(BaseModel):
diff --git a/api/core/plugin/impl/base.py b/api/core/plugin/impl/base.py
index 9ee8469892..7f36560b49 100644
--- a/api/core/plugin/impl/base.py
+++ b/api/core/plugin/impl/base.py
@@ -5,6 +5,14 @@ from collections.abc import Callable, Generator
 from typing import Any, cast
 
 import httpx
+from graphon.model_runtime.errors.invoke import (
+    InvokeAuthorizationError,
+    InvokeBadRequestError,
+    InvokeConnectionError,
+    InvokeRateLimitError,
+    InvokeServerUnavailableError,
+)
+from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
 from pydantic import BaseModel
 from yarl import URL
 
@@ -29,14 +37,6 @@ from core.trigger.errors import (
     TriggerPluginInvokeError,
     TriggerProviderCredentialValidationError,
 )
-from graphon.model_runtime.errors.invoke import (
-    InvokeAuthorizationError,
-    InvokeBadRequestError,
-    InvokeConnectionError,
-    InvokeRateLimitError,
-    InvokeServerUnavailableError,
-)
-from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
 
 plugin_daemon_inner_api_baseurl = URL(str(dify_config.PLUGIN_DAEMON_URL))
 _plugin_daemon_timeout_config = cast(
diff --git a/api/core/plugin/impl/model.py b/api/core/plugin/impl/model.py
index 47608bdfa6..703af63f7c 100644
--- a/api/core/plugin/impl/model.py
+++ b/api/core/plugin/impl/model.py
@@ -2,6 +2,13 @@ import binascii
 from collections.abc import Generator, Sequence
 from typing import IO, Any
 
+from graphon.model_runtime.entities.llm_entities import LLMResultChunk
+from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageTool
+from graphon.model_runtime.entities.model_entities import AIModelEntity
+from graphon.model_runtime.entities.rerank_entities import MultimodalRerankInput, RerankResult
+from graphon.model_runtime.entities.text_embedding_entities import EmbeddingResult
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+
 from core.plugin.entities.plugin_daemon import (
     PluginBasicBooleanResponse,
     PluginDaemonInnerError,
@@ -13,12 +20,6 @@ from core.plugin.entities.plugin_daemon import (
     PluginVoicesResponse,
 )
 from core.plugin.impl.base import BasePluginClient
-from graphon.model_runtime.entities.llm_entities import LLMResultChunk
-from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageTool
-from graphon.model_runtime.entities.model_entities import AIModelEntity
-from graphon.model_runtime.entities.rerank_entities import MultimodalRerankInput, RerankResult
-from graphon.model_runtime.entities.text_embedding_entities import EmbeddingResult
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 
 class PluginModelClient(BasePluginClient):
diff --git a/api/core/plugin/utils/converter.py b/api/core/plugin/utils/converter.py
index 12d8e282b2..90350f8400 100644
--- a/api/core/plugin/utils/converter.py
+++ b/api/core/plugin/utils/converter.py
@@ -1,8 +1,9 @@
 from typing import Any
 
-from core.tools.entities.tool_entities import ToolSelector
 from graphon.file import File
 
+from core.tools.entities.tool_entities import ToolSelector
+
 
 def convert_parameters_to_plugin_format(parameters: dict[str, Any]) -> dict[str, Any]:
     for parameter_name, parameter in parameters.items():
diff --git a/api/core/prompt/advanced_prompt_transform.py b/api/core/prompt/advanced_prompt_transform.py
index 24e05ef865..19b5e9223a 100644
--- a/api/core/prompt/advanced_prompt_transform.py
+++ b/api/core/prompt/advanced_prompt_transform.py
@@ -1,13 +1,6 @@
 from collections.abc import Mapping, Sequence
 from typing import cast
 
-from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
-from core.helper.code_executor.jinja2.jinja2_formatter import Jinja2Formatter
-from core.memory.token_buffer_memory import TokenBufferMemory
-from core.model_manager import ModelInstance
-from core.prompt.entities.advanced_prompt_entities import ChatModelMessage, CompletionModelPromptTemplate, MemoryConfig
-from core.prompt.prompt_transform import PromptTransform
-from core.prompt.utils.prompt_template_parser import PromptTemplateParser
 from graphon.file import File, file_manager
 from graphon.model_runtime.entities import (
     AssistantPromptMessage,
@@ -20,6 +13,14 @@ from graphon.model_runtime.entities import (
 from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent, PromptMessageContentUnionTypes
 from graphon.runtime import VariablePool
 
+from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
+from core.helper.code_executor.jinja2.jinja2_formatter import Jinja2Formatter
+from core.memory.token_buffer_memory import TokenBufferMemory
+from core.model_manager import ModelInstance
+from core.prompt.entities.advanced_prompt_entities import ChatModelMessage, CompletionModelPromptTemplate, MemoryConfig
+from core.prompt.prompt_transform import PromptTransform
+from core.prompt.utils.prompt_template_parser import PromptTemplateParser
+
 
 class AdvancedPromptTransform(PromptTransform):
     """
diff --git a/api/core/prompt/agent_history_prompt_transform.py b/api/core/prompt/agent_history_prompt_transform.py
index 8f1d51f08a..9be70199b7 100644
--- a/api/core/prompt/agent_history_prompt_transform.py
+++ b/api/core/prompt/agent_history_prompt_transform.py
@@ -1,10 +1,5 @@
 from typing import cast
 
-from core.app.entities.app_invoke_entities import (
-    ModelConfigWithCredentialsEntity,
-)
-from core.memory.token_buffer_memory import TokenBufferMemory
-from core.prompt.prompt_transform import PromptTransform
 from graphon.model_runtime.entities.message_entities import (
     PromptMessage,
     SystemPromptMessage,
@@ -12,6 +7,12 @@ from graphon.model_runtime.entities.message_entities import (
 )
 from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 
+from core.app.entities.app_invoke_entities import (
+    ModelConfigWithCredentialsEntity,
+)
+from core.memory.token_buffer_memory import TokenBufferMemory
+from core.prompt.prompt_transform import PromptTransform
+
 
 class AgentHistoryPromptTransform(PromptTransform):
     """
diff --git a/api/core/prompt/prompt_transform.py b/api/core/prompt/prompt_transform.py
index 6ff2f44cdc..4539ae9f11 100644
--- a/api/core/prompt/prompt_transform.py
+++ b/api/core/prompt/prompt_transform.py
@@ -1,11 +1,12 @@
 from typing import Any
 
+from graphon.model_runtime.entities.message_entities import PromptMessage
+from graphon.model_runtime.entities.model_entities import AIModelEntity, ModelPropertyKey
+
 from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
 from core.memory.token_buffer_memory import TokenBufferMemory
 from core.model_manager import ModelInstance
 from core.prompt.entities.advanced_prompt_entities import MemoryConfig
-from graphon.model_runtime.entities.message_entities import PromptMessage
-from graphon.model_runtime.entities.model_entities import AIModelEntity, ModelPropertyKey
 
 
 class PromptTransform:
diff --git a/api/core/prompt/simple_prompt_transform.py b/api/core/prompt/simple_prompt_transform.py
index 1665bdeb52..dc8391a6a5 100644
--- a/api/core/prompt/simple_prompt_transform.py
+++ b/api/core/prompt/simple_prompt_transform.py
@@ -4,12 +4,6 @@ from collections.abc import Mapping, Sequence
 from enum import StrEnum, auto
 from typing import TYPE_CHECKING, Any, TypedDict, cast
 
-from core.app.app_config.entities import PromptTemplateEntity
-from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
-from core.memory.token_buffer_memory import TokenBufferMemory
-from core.prompt.entities.advanced_prompt_entities import MemoryConfig
-from core.prompt.prompt_transform import PromptTransform
-from core.prompt.utils.prompt_template_parser import PromptTemplateParser
 from graphon.file import file_manager
 from graphon.model_runtime.entities.message_entities import (
     ImagePromptMessageContent,
@@ -19,6 +13,13 @@ from graphon.model_runtime.entities.message_entities import (
     TextPromptMessageContent,
     UserPromptMessage,
 )
+
+from core.app.app_config.entities import PromptTemplateEntity
+from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
+from core.memory.token_buffer_memory import TokenBufferMemory
+from core.prompt.entities.advanced_prompt_entities import MemoryConfig
+from core.prompt.prompt_transform import PromptTransform
+from core.prompt.utils.prompt_template_parser import PromptTemplateParser
 from models.model import AppMode
 
 if TYPE_CHECKING:
diff --git a/api/core/prompt/utils/prompt_message_util.py b/api/core/prompt/utils/prompt_message_util.py
index ba76eb0c4e..dbda749925 100644
--- a/api/core/prompt/utils/prompt_message_util.py
+++ b/api/core/prompt/utils/prompt_message_util.py
@@ -1,7 +1,6 @@
 from collections.abc import Sequence
 from typing import Any, cast
 
-from core.prompt.simple_prompt_transform import ModelMode
 from graphon.model_runtime.entities import (
     AssistantPromptMessage,
     AudioPromptMessageContent,
@@ -12,6 +11,8 @@ from graphon.model_runtime.entities import (
     TextPromptMessageContent,
 )
 
+from core.prompt.simple_prompt_transform import ModelMode
+
 
 class PromptMessageUtil:
     @staticmethod
diff --git a/api/core/provider_manager.py b/api/core/provider_manager.py
index c3bbe8fc09..39ef31632e 100644
--- a/api/core/provider_manager.py
+++ b/api/core/provider_manager.py
@@ -6,6 +6,14 @@ from collections.abc import Sequence
 from json import JSONDecodeError
 from typing import TYPE_CHECKING, Any
 
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.entities.provider_entities import (
+    ConfigurateMethod,
+    CredentialFormSchema,
+    FormType,
+    ProviderEntity,
+)
+from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
 from pydantic import TypeAdapter
 from sqlalchemy import select
 from sqlalchemy.exc import IntegrityError
@@ -33,14 +41,6 @@ from core.helper.position_helper import is_filtered
 from extensions import ext_hosting_provider
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.entities.provider_entities import (
-    ConfigurateMethod,
-    CredentialFormSchema,
-    FormType,
-    ProviderEntity,
-)
-from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
 from models.provider import (
     LoadBalancingModelConfig,
     Provider,
diff --git a/api/core/rag/datasource/retrieval_service.py b/api/core/rag/datasource/retrieval_service.py
index 7e71d67ec0..f978e072f3 100644
--- a/api/core/rag/datasource/retrieval_service.py
+++ b/api/core/rag/datasource/retrieval_service.py
@@ -4,6 +4,7 @@ from concurrent.futures import ThreadPoolExecutor
 from typing import Any, NotRequired, TypedDict
 
 from flask import Flask, current_app
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy import select
 from sqlalchemy.orm import Session, load_only
 
@@ -23,7 +24,6 @@ from core.rag.rerank.rerank_type import RerankMode
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
 from core.tools.signature import sign_upload_file
 from extensions.ext_database import db
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.dataset import (
     ChildChunk,
     Dataset,
@@ -195,23 +195,6 @@ class RetrievalService:
         )
         return all_documents
 
-    @classmethod
-    def _filter_documents_by_vector_score_threshold(
-        cls, documents: list[Document], score_threshold: float | None
-    ) -> list[Document]:
-        """Keep documents whose stored retrieval score meets the threshold.
-
-        Used when hybrid search skips early vector thresholding but no rerank
-        runner applies a threshold afterward (same rule as ``calculate_vector_score``).
-        """
-        if score_threshold is None:
-            return documents
-        return [
-            document
-            for document in documents
-            if document.metadata and document.metadata.get("score", 0) >= score_threshold
-        ]
-
     @classmethod
     def _deduplicate_documents(cls, documents: list[Document]) -> list[Document]:
         """Deduplicate documents in O(n) while preserving first-seen order.
@@ -311,20 +294,13 @@ class RetrievalService:
 
                 vector = Vector(dataset=dataset)
                 documents = []
-                # Hybrid search merges keyword / full-text / vector hits and then reranks
-                # (weighted fusion or reranking model). Applying the user score threshold at
-                # vector retrieval time uses embedding similarity, which is not comparable to
-                # reranked or fused scores and incorrectly drops high-quality chunks (#35233).
-                embedding_score_threshold = (
-                    0.0 if retrieval_method == RetrievalMethod.HYBRID_SEARCH else score_threshold
-                )
                 if query_type == QueryType.TEXT_QUERY:
                     documents.extend(
                         vector.search_by_vector(
                             query,
                             search_type="similarity_score_threshold",
                             top_k=top_k,
-                            score_threshold=embedding_score_threshold,
+                            score_threshold=score_threshold,
                             filter={"group_id": [dataset.id]},
                             document_ids_filter=document_ids_filter,
                         )
@@ -336,7 +312,7 @@ class RetrievalService:
                         vector.search_by_file(
                             file_id=query,
                             top_k=top_k,
-                            score_threshold=embedding_score_threshold,
+                            score_threshold=score_threshold,
                             filter={"group_id": [dataset.id]},
                             document_ids_filter=document_ids_filter,
                         )
@@ -868,10 +844,6 @@ class RetrievalService:
                     top_n=top_k,
                     query_type=QueryType.TEXT_QUERY if query else QueryType.IMAGE_QUERY,
                 )
-                if not data_post_processor.rerank_runner and score_threshold:
-                    all_documents_item = self._filter_documents_by_vector_score_threshold(
-                        all_documents_item, score_threshold
-                    )
 
             all_documents.extend(all_documents_item)
 
diff --git a/api/core/rag/datasource/vdb/vector_factory.py b/api/core/rag/datasource/vdb/vector_factory.py
index 59d7f3c3c4..dddd5fc994 100644
--- a/api/core/rag/datasource/vdb/vector_factory.py
+++ b/api/core/rag/datasource/vdb/vector_factory.py
@@ -4,6 +4,7 @@ import time
 from abc import ABC, abstractmethod
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy import select
 
 from configs import dify_config
@@ -18,7 +19,6 @@ from core.rag.models.document import Document
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from extensions.ext_storage import storage
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.dataset import Dataset, Whitelist
 from models.model import UploadFile
 
diff --git a/api/core/rag/docstore/dataset_docstore.py b/api/core/rag/docstore/dataset_docstore.py
index f4699f6869..8e9ebdd17a 100644
--- a/api/core/rag/docstore/dataset_docstore.py
+++ b/api/core/rag/docstore/dataset_docstore.py
@@ -3,13 +3,13 @@ from __future__ import annotations
 from collections.abc import Sequence
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy import delete, func, select
 
 from core.model_manager import ModelManager
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
 from core.rag.models.document import AttachmentDocument, Document
 from extensions.ext_database import db
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.dataset import ChildChunk, Dataset, DocumentSegment, SegmentAttachmentBinding
 
 
diff --git a/api/core/rag/embedding/cached_embedding.py b/api/core/rag/embedding/cached_embedding.py
index 4926f44f16..9f1c73ec88 100644
--- a/api/core/rag/embedding/cached_embedding.py
+++ b/api/core/rag/embedding/cached_embedding.py
@@ -4,6 +4,8 @@ import pickle
 from typing import Any, cast
 
 import numpy as np
+from graphon.model_runtime.entities.model_entities import ModelPropertyKey
+from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
 from sqlalchemy import select
 from sqlalchemy.exc import IntegrityError
 
@@ -13,8 +15,6 @@ from core.model_manager import ModelInstance
 from core.rag.embedding.embedding_base import Embeddings
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from graphon.model_runtime.entities.model_entities import ModelPropertyKey
-from graphon.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
 from libs import helper
 from models.dataset import Embedding
 
diff --git a/api/core/rag/index_processor/processor/paragraph_index_processor.py b/api/core/rag/index_processor/processor/paragraph_index_processor.py
index f8242efe31..a487c49053 100644
--- a/api/core/rag/index_processor/processor/paragraph_index_processor.py
+++ b/api/core/rag/index_processor/processor/paragraph_index_processor.py
@@ -7,6 +7,16 @@ from typing import Any, TypedDict, cast
 
 logger = logging.getLogger(__name__)
 
+from graphon.file import File, FileTransferMethod, FileType, file_manager
+from graphon.model_runtime.entities.llm_entities import LLMResult, LLMUsage
+from graphon.model_runtime.entities.message_entities import (
+    ImagePromptMessageContent,
+    PromptMessage,
+    PromptMessageContentUnionTypes,
+    TextPromptMessageContent,
+    UserPromptMessage,
+)
+from graphon.model_runtime.entities.model_entities import ModelFeature, ModelType
 from sqlalchemy import select
 
 from core.app.file_access import DatabaseFileAccessController
@@ -33,16 +43,6 @@ from core.tools.utils.text_processing_utils import remove_leading_symbols
 from core.workflow.file_reference import build_file_reference
 from extensions.ext_database import db
 from factories.file_factory import build_from_mapping
-from graphon.file import File, FileTransferMethod, FileType, file_manager
-from graphon.model_runtime.entities.llm_entities import LLMResult, LLMUsage
-from graphon.model_runtime.entities.message_entities import (
-    ImagePromptMessageContent,
-    PromptMessage,
-    PromptMessageContentUnionTypes,
-    TextPromptMessageContent,
-    UserPromptMessage,
-)
-from graphon.model_runtime.entities.model_entities import ModelFeature, ModelType
 from libs import helper
 from models import UploadFile
 from models.account import Account
diff --git a/api/core/rag/models/document.py b/api/core/rag/models/document.py
index 4ebf095904..087736d0b0 100644
--- a/api/core/rag/models/document.py
+++ b/api/core/rag/models/document.py
@@ -2,9 +2,8 @@ from abc import ABC, abstractmethod
 from collections.abc import Sequence
 from typing import Any
 
-from pydantic import BaseModel, Field
-
 from graphon.file import File
+from pydantic import BaseModel, Field
 
 
 class ChildDocument(BaseModel):
diff --git a/api/core/rag/rerank/rerank_model.py b/api/core/rag/rerank/rerank_model.py
index bce08f998f..a8d37845a5 100644
--- a/api/core/rag/rerank/rerank_model.py
+++ b/api/core/rag/rerank/rerank_model.py
@@ -1,5 +1,8 @@
 import base64
 
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.entities.rerank_entities import MultimodalRerankInput, RerankResult
+
 from core.model_manager import ModelInstance, ModelManager
 from core.rag.index_processor.constant.doc_type import DocType
 from core.rag.index_processor.constant.query_type import QueryType
@@ -7,8 +10,6 @@ from core.rag.models.document import Document
 from core.rag.rerank.rerank_base import BaseRerankRunner
 from extensions.ext_database import db
 from extensions.ext_storage import storage
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.entities.rerank_entities import MultimodalRerankInput, RerankResult
 from models.model import UploadFile
 
 
diff --git a/api/core/rag/rerank/weight_rerank.py b/api/core/rag/rerank/weight_rerank.py
index d0732b269a..49123e13d0 100644
--- a/api/core/rag/rerank/weight_rerank.py
+++ b/api/core/rag/rerank/weight_rerank.py
@@ -2,6 +2,7 @@ import math
 from collections import Counter
 
 import numpy as np
+from graphon.model_runtime.entities.model_entities import ModelType
 
 from core.model_manager import ModelManager
 from core.rag.datasource.keyword.jieba.jieba_keyword_table_handler import JiebaKeywordTableHandler
@@ -11,7 +12,6 @@ from core.rag.index_processor.constant.query_type import QueryType
 from core.rag.models.document import Document
 from core.rag.rerank.entity.weight import VectorSetting, Weights
 from core.rag.rerank.rerank_base import BaseRerankRunner
-from graphon.model_runtime.entities.model_entities import ModelType
 
 
 class WeightRerankRunner(BaseRerankRunner):
diff --git a/api/core/rag/retrieval/dataset_retrieval.py b/api/core/rag/retrieval/dataset_retrieval.py
index 1453fe020b..8ebc840b99 100644
--- a/api/core/rag/retrieval/dataset_retrieval.py
+++ b/api/core/rag/retrieval/dataset_retrieval.py
@@ -9,6 +9,11 @@ from collections.abc import Generator, Mapping
 from typing import Any, Union, cast
 
 from flask import Flask, current_app
+from graphon.file import File, FileTransferMethod, FileType
+from graphon.model_runtime.entities.llm_entities import LLMMode, LLMResult, LLMUsage
+from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageRole, PromptMessageTool
+from graphon.model_runtime.entities.model_entities import ModelFeature, ModelType
+from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from sqlalchemy import and_, func, literal, or_, select, update
 from sqlalchemy.orm import sessionmaker
 
@@ -64,11 +69,6 @@ from core.workflow.nodes.knowledge_retrieval.retrieval import (
 )
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from graphon.file import File, FileTransferMethod, FileType
-from graphon.model_runtime.entities.llm_entities import LLMMode, LLMResult, LLMUsage
-from graphon.model_runtime.entities.message_entities import PromptMessage, PromptMessageRole, PromptMessageTool
-from graphon.model_runtime.entities.model_entities import ModelFeature, ModelType
-from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from libs.helper import parse_uuid_str_or_none
 from libs.json_in_md_parser import parse_and_check_json_markdown
 from models import UploadFile
diff --git a/api/core/rag/retrieval/router/multi_dataset_function_call_router.py b/api/core/rag/retrieval/router/multi_dataset_function_call_router.py
index e617a9660e..dce7b6226c 100644
--- a/api/core/rag/retrieval/router/multi_dataset_function_call_router.py
+++ b/api/core/rag/retrieval/router/multi_dataset_function_call_router.py
@@ -1,9 +1,10 @@
 from typing import Union
 
+from graphon.model_runtime.entities.llm_entities import LLMResult, LLMUsage
+from graphon.model_runtime.entities.message_entities import PromptMessageTool, SystemPromptMessage, UserPromptMessage
+
 from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
 from core.model_manager import ModelInstance
-from graphon.model_runtime.entities.llm_entities import LLMResult, LLMUsage
-from graphon.model_runtime.entities.message_entities import PromptMessageTool, SystemPromptMessage, UserPromptMessage
 
 
 class FunctionCallMultiDatasetRouter:
diff --git a/api/core/rag/splitter/fixed_text_splitter.py b/api/core/rag/splitter/fixed_text_splitter.py
index 2581c354dd..3383c7f3bd 100644
--- a/api/core/rag/splitter/fixed_text_splitter.py
+++ b/api/core/rag/splitter/fixed_text_splitter.py
@@ -7,9 +7,10 @@ import re
 from collections.abc import Collection
 from typing import Any, Literal
 
+from graphon.model_runtime.model_providers.__base.tokenizers.gpt2_tokenizer import GPT2Tokenizer
+
 from core.model_manager import ModelInstance
 from core.rag.splitter.text_splitter import RecursiveCharacterTextSplitter
-from graphon.model_runtime.model_providers.__base.tokenizers.gpt2_tokenizer import GPT2Tokenizer
 
 
 class EnhanceRecursiveCharacterTextSplitter(RecursiveCharacterTextSplitter):
diff --git a/api/core/repositories/celery_workflow_execution_repository.py b/api/core/repositories/celery_workflow_execution_repository.py
index e87d1cd6b2..b07c63fdf0 100644
--- a/api/core/repositories/celery_workflow_execution_repository.py
+++ b/api/core/repositories/celery_workflow_execution_repository.py
@@ -7,11 +7,11 @@ providing improved performance by offloading database operations to background w
 
 import logging
 
+from graphon.entities import WorkflowExecution
 from sqlalchemy.engine import Engine
 from sqlalchemy.orm import sessionmaker
 
 from core.repositories.factory import WorkflowExecutionRepository
-from graphon.entities import WorkflowExecution
 from libs.helper import extract_tenant_id
 from models import Account, CreatorUserRole, EndUser
 from models.enums import WorkflowRunTriggeredFrom
diff --git a/api/core/repositories/celery_workflow_node_execution_repository.py b/api/core/repositories/celery_workflow_node_execution_repository.py
index 2451563317..cdb3af01a8 100644
--- a/api/core/repositories/celery_workflow_node_execution_repository.py
+++ b/api/core/repositories/celery_workflow_node_execution_repository.py
@@ -8,6 +8,7 @@ providing improved performance by offloading database operations to background w
 import logging
 from collections.abc import Sequence
 
+from graphon.entities import WorkflowNodeExecution
 from sqlalchemy.engine import Engine
 from sqlalchemy.orm import sessionmaker
 
@@ -15,7 +16,6 @@ from core.repositories.factory import (
     OrderConfig,
     WorkflowNodeExecutionRepository,
 )
-from graphon.entities import WorkflowNodeExecution
 from libs.helper import extract_tenant_id
 from models import Account, CreatorUserRole, EndUser
 from models.workflow import WorkflowNodeExecutionTriggeredFrom
diff --git a/api/core/repositories/factory.py b/api/core/repositories/factory.py
index 4e83e70799..ce3ad15759 100644
--- a/api/core/repositories/factory.py
+++ b/api/core/repositories/factory.py
@@ -9,11 +9,11 @@ from collections.abc import Sequence
 from dataclasses import dataclass
 from typing import Literal, Protocol
 
+from graphon.entities import WorkflowExecution, WorkflowNodeExecution
 from sqlalchemy.engine import Engine
 from sqlalchemy.orm import sessionmaker
 
 from configs import dify_config
-from graphon.entities import WorkflowExecution, WorkflowNodeExecution
 from libs.module_loading import import_string
 from models import Account, EndUser
 from models.enums import WorkflowRunTriggeredFrom
diff --git a/api/core/repositories/sqlalchemy_workflow_execution_repository.py b/api/core/repositories/sqlalchemy_workflow_execution_repository.py
index 6be3902317..d74cc8f231 100644
--- a/api/core/repositories/sqlalchemy_workflow_execution_repository.py
+++ b/api/core/repositories/sqlalchemy_workflow_execution_repository.py
@@ -5,13 +5,13 @@ SQLAlchemy implementation of the WorkflowExecutionRepository.
 import json
 import logging
 
+from graphon.entities import WorkflowExecution
+from graphon.enums import WorkflowExecutionStatus, WorkflowType
+from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from sqlalchemy.engine import Engine
 from sqlalchemy.orm import sessionmaker
 
 from core.repositories.factory import WorkflowExecutionRepository
-from graphon.entities import WorkflowExecution
-from graphon.enums import WorkflowExecutionStatus, WorkflowType
-from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from libs.helper import extract_tenant_id
 from models import (
     Account,
diff --git a/api/core/repositories/sqlalchemy_workflow_node_execution_repository.py b/api/core/repositories/sqlalchemy_workflow_node_execution_repository.py
index b036687bc9..13e885672a 100644
--- a/api/core/repositories/sqlalchemy_workflow_node_execution_repository.py
+++ b/api/core/repositories/sqlalchemy_workflow_node_execution_repository.py
@@ -10,6 +10,10 @@ from concurrent.futures import ThreadPoolExecutor
 from typing import Any
 
 import psycopg2.errors
+from graphon.entities import WorkflowNodeExecution
+from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from sqlalchemy import UnaryExpression, asc, desc, select
 from sqlalchemy.engine import Engine
 from sqlalchemy.exc import IntegrityError
@@ -19,10 +23,6 @@ from tenacity import before_sleep_log, retry, retry_if_exception, stop_after_att
 from configs import dify_config
 from core.repositories.factory import OrderConfig, WorkflowNodeExecutionRepository
 from extensions.ext_storage import storage
-from graphon.entities import WorkflowNodeExecution
-from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
-from graphon.model_runtime.utils.encoders import jsonable_encoder
-from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from libs.helper import extract_tenant_id
 from libs.uuid_utils import uuidv7
 from models import (
diff --git a/api/core/tools/builtin_tool/providers/audio/tools/asr.py b/api/core/tools/builtin_tool/providers/audio/tools/asr.py
index 95660ab93b..e539074303 100644
--- a/api/core/tools/builtin_tool/providers/audio/tools/asr.py
+++ b/api/core/tools/builtin_tool/providers/audio/tools/asr.py
@@ -2,14 +2,15 @@ import io
 from collections.abc import Generator
 from typing import Any
 
+from graphon.file import FileType
+from graphon.file.file_manager import download
+from graphon.model_runtime.entities.model_entities import ModelType
+
 from core.model_manager import ModelManager
 from core.plugin.entities.parameters import PluginParameterOption
 from core.tools.builtin_tool.tool import BuiltinTool
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolInvokeMessage, ToolParameter
-from graphon.file import FileType
-from graphon.file.file_manager import download
-from graphon.model_runtime.entities.model_entities import ModelType
 from services.model_provider_service import ModelProviderService
 
 
diff --git a/api/core/tools/builtin_tool/providers/audio/tools/tts.py b/api/core/tools/builtin_tool/providers/audio/tools/tts.py
index ac3820f1ab..f49c669fe0 100644
--- a/api/core/tools/builtin_tool/providers/audio/tools/tts.py
+++ b/api/core/tools/builtin_tool/providers/audio/tools/tts.py
@@ -2,12 +2,13 @@ import io
 from collections.abc import Generator
 from typing import Any
 
+from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
+
 from core.model_manager import ModelManager
 from core.plugin.entities.parameters import PluginParameterOption
 from core.tools.builtin_tool.tool import BuiltinTool
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolInvokeMessage, ToolParameter
-from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
 from services.model_provider_service import ModelProviderService
 
 
diff --git a/api/core/tools/builtin_tool/tool.py b/api/core/tools/builtin_tool/tool.py
index d41503e1e6..14af63a962 100644
--- a/api/core/tools/builtin_tool/tool.py
+++ b/api/core/tools/builtin_tool/tool.py
@@ -1,11 +1,12 @@
 from __future__ import annotations
 
+from graphon.model_runtime.entities.llm_entities import LLMResult
+from graphon.model_runtime.entities.message_entities import PromptMessage, SystemPromptMessage, UserPromptMessage
+
 from core.tools.__base.tool import Tool
 from core.tools.__base.tool_runtime import ToolRuntime
 from core.tools.entities.tool_entities import ToolProviderType
 from core.tools.utils.model_invocation_utils import ModelInvocationUtils
-from graphon.model_runtime.entities.llm_entities import LLMResult
-from graphon.model_runtime.entities.message_entities import PromptMessage, SystemPromptMessage, UserPromptMessage
 
 _SUMMARY_PROMPT = """You are a professional language researcher, you are interested in the language
 and you can quickly aimed at the main point of an webpage and reproduce it in your own words but
diff --git a/api/core/tools/custom_tool/tool.py b/api/core/tools/custom_tool/tool.py
index 168e5f4493..0a2c37c563 100644
--- a/api/core/tools/custom_tool/tool.py
+++ b/api/core/tools/custom_tool/tool.py
@@ -6,6 +6,7 @@ from typing import Any, Union
 from urllib.parse import urlencode
 
 import httpx
+from graphon.file.file_manager import download
 
 from core.helper import ssrf_proxy
 from core.tools.__base.tool import Tool
@@ -13,7 +14,6 @@ from core.tools.__base.tool_runtime import ToolRuntime
 from core.tools.entities.tool_bundle import ApiToolBundle
 from core.tools.entities.tool_entities import ToolEntity, ToolInvokeMessage, ToolProviderType
 from core.tools.errors import ToolInvokeError, ToolParameterValidationError, ToolProviderCredentialValidationError
-from graphon.file.file_manager import download
 
 API_TOOL_DEFAULT_TIMEOUT = (
     int(getenv("API_TOOL_DEFAULT_CONNECT_TIMEOUT", "10")),
diff --git a/api/core/tools/entities/api_entities.py b/api/core/tools/entities/api_entities.py
index 42a88c0003..410ec72baf 100644
--- a/api/core/tools/entities/api_entities.py
+++ b/api/core/tools/entities/api_entities.py
@@ -2,6 +2,7 @@ from collections.abc import Mapping
 from datetime import datetime
 from typing import Any, Literal
 
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, Field, field_validator
 
 from core.entities.mcp_provider import MCPAuthentication, MCPConfiguration
@@ -9,7 +10,6 @@ from core.plugin.entities.plugin_daemon import CredentialType
 from core.tools.__base.tool import ToolParameter
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolProviderType
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 
 class ToolApiEntity(BaseModel):
diff --git a/api/core/tools/mcp_tool/tool.py b/api/core/tools/mcp_tool/tool.py
index 00fc8a8282..f6d09472b3 100644
--- a/api/core/tools/mcp_tool/tool.py
+++ b/api/core/tools/mcp_tool/tool.py
@@ -6,6 +6,8 @@ import logging
 from collections.abc import Generator, Mapping
 from typing import Any, cast
 
+from graphon.model_runtime.entities.llm_entities import LLMUsage, LLMUsageMetadata
+
 from core.mcp.auth_client import MCPClientWithAuthRetry
 from core.mcp.error import MCPConnectionError
 from core.mcp.types import (
@@ -21,7 +23,6 @@ from core.tools.__base.tool import Tool
 from core.tools.__base.tool_runtime import ToolRuntime
 from core.tools.entities.tool_entities import ToolEntity, ToolInvokeMessage, ToolProviderType
 from core.tools.errors import ToolInvokeError
-from graphon.model_runtime.entities.llm_entities import LLMUsage, LLMUsageMetadata
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/core/tools/tool_engine.py b/api/core/tools/tool_engine.py
index 3caacb8706..d060fa8b49 100644
--- a/api/core/tools/tool_engine.py
+++ b/api/core/tools/tool_engine.py
@@ -7,6 +7,7 @@ from datetime import UTC, datetime
 from mimetypes import guess_type
 from typing import Any, Union, cast
 
+from graphon.file import FileTransferMethod, FileType
 from yarl import URL
 
 from core.app.entities.app_invoke_entities import InvokeFrom
@@ -32,7 +33,6 @@ from core.tools.errors import (
 from core.tools.utils.message_transformer import ToolFileMessageTransformer, safe_json_value
 from core.tools.workflow_as_tool.tool import WorkflowTool
 from extensions.ext_database import db
-from graphon.file import FileTransferMethod, FileType
 from models.enums import CreatorUserRole, MessageFileBelongsTo
 from models.model import Message, MessageFile
 
diff --git a/api/core/tools/tool_file_manager.py b/api/core/tools/tool_file_manager.py
index b3424cd9a5..d8674b3af9 100644
--- a/api/core/tools/tool_file_manager.py
+++ b/api/core/tools/tool_file_manager.py
@@ -9,6 +9,7 @@ from mimetypes import guess_extension, guess_type
 from uuid import uuid4
 
 import httpx
+from graphon.file import File, FileTransferMethod, get_file_type_by_mime_type
 from sqlalchemy import select
 
 from configs import dify_config
@@ -16,7 +17,6 @@ from core.db.session_factory import session_factory
 from core.helper import ssrf_proxy
 from core.workflow.file_reference import build_file_reference
 from extensions.ext_storage import storage
-from graphon.file import File, FileTransferMethod, get_file_type_by_mime_type
 from models.model import MessageFile
 from models.tools import ToolFile
 
diff --git a/api/core/tools/tool_manager.py b/api/core/tools/tool_manager.py
index f4588904d3..be13d40f3e 100644
--- a/api/core/tools/tool_manager.py
+++ b/api/core/tools/tool_manager.py
@@ -8,6 +8,7 @@ from threading import Lock
 from typing import TYPE_CHECKING, Any, Literal, Protocol, cast
 
 import sqlalchemy as sa
+from graphon.runtime import VariablePool
 from pydantic import TypeAdapter
 from sqlalchemy import select
 from sqlalchemy.orm import Session
@@ -28,13 +29,14 @@ from core.tools.plugin_tool.tool import PluginTool
 from core.tools.utils.uuid_utils import is_valid_uuid
 from core.tools.workflow_as_tool.provider import WorkflowToolProviderController
 from extensions.ext_database import db
-from graphon.runtime import VariablePool
 from models.provider_ids import ToolProviderID
 from services.tools.mcp_tools_manage_service import MCPToolManageService
 
 if TYPE_CHECKING:
     pass
 
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+
 from core.agent.entities import AgentToolEntity
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.helper.module_import_helper import load_single_subclass_from_source
@@ -60,7 +62,6 @@ from core.tools.tool_label_manager import ToolLabelManager
 from core.tools.utils.configuration import ToolParameterConfigurationManager
 from core.tools.utils.encryption import create_provider_encrypter, create_tool_provider_encrypter
 from core.tools.workflow_as_tool.tool import WorkflowTool
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from models.tools import ApiToolProvider, BuiltinToolProvider, WorkflowToolProvider
 from services.tools.tools_transform_service import ToolTransformService
 
diff --git a/api/core/tools/utils/dataset_retriever/dataset_multi_retriever_tool.py b/api/core/tools/utils/dataset_retriever/dataset_multi_retriever_tool.py
index b6890b2611..03e3c5918d 100644
--- a/api/core/tools/utils/dataset_retriever/dataset_multi_retriever_tool.py
+++ b/api/core/tools/utils/dataset_retriever/dataset_multi_retriever_tool.py
@@ -1,6 +1,7 @@
 import threading
 
 from flask import Flask, current_app
+from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel, Field
 from sqlalchemy import select
 
@@ -14,7 +15,6 @@ from core.rag.rerank.rerank_model import RerankModelRunner
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
 from core.tools.utils.dataset_retriever.dataset_retriever_base_tool import DatasetRetrieverBaseTool
 from extensions.ext_database import db
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.dataset import Dataset, Document, DocumentSegment
 
 default_retrieval_model: DefaultRetrievalModelDict = {
diff --git a/api/core/tools/utils/message_transformer.py b/api/core/tools/utils/message_transformer.py
index 79d0c114d4..81c85bc90d 100644
--- a/api/core/tools/utils/message_transformer.py
+++ b/api/core/tools/utils/message_transformer.py
@@ -9,11 +9,11 @@ from uuid import UUID
 
 import numpy as np
 import pytz
+from graphon.file import File, FileTransferMethod, FileType
 
 from core.tools.entities.tool_entities import ToolInvokeMessage
 from core.tools.tool_file_manager import ToolFileManager
 from core.workflow.file_reference import parse_file_reference
-from graphon.file import File, FileTransferMethod, FileType
 from libs.login import current_user
 from models import Account
 
diff --git a/api/core/tools/utils/model_invocation_utils.py b/api/core/tools/utils/model_invocation_utils.py
index 9e1d41cb39..8d6f83dc07 100644
--- a/api/core/tools/utils/model_invocation_utils.py
+++ b/api/core/tools/utils/model_invocation_utils.py
@@ -8,9 +8,6 @@ import json
 from decimal import Decimal
 from typing import cast
 
-from core.model_manager import ModelManager
-from core.tools.entities.tool_entities import ToolProviderType
-from extensions.ext_database import db
 from graphon.model_runtime.entities.llm_entities import LLMResult
 from graphon.model_runtime.entities.message_entities import PromptMessage
 from graphon.model_runtime.entities.model_entities import ModelPropertyKey, ModelType
@@ -23,6 +20,10 @@ from graphon.model_runtime.errors.invoke import (
 )
 from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
 from graphon.model_runtime.utils.encoders import jsonable_encoder
+
+from core.model_manager import ModelManager
+from core.tools.entities.tool_entities import ToolProviderType
+from extensions.ext_database import db
 from models.tools import ToolModelInvoke
 
 
diff --git a/api/core/tools/utils/workflow_configuration_sync.py b/api/core/tools/utils/workflow_configuration_sync.py
index 45718cadb6..2159eb8638 100644
--- a/api/core/tools/utils/workflow_configuration_sync.py
+++ b/api/core/tools/utils/workflow_configuration_sync.py
@@ -1,12 +1,13 @@
 from collections.abc import Mapping, Sequence
 from typing import Any
 
-from core.tools.entities.tool_entities import WorkflowToolParameterConfiguration
-from core.tools.errors import WorkflowToolHumanInputNotSupportedError
 from graphon.enums import BuiltinNodeTypes
 from graphon.nodes.base.entities import OutputVariableEntity
 from graphon.variables.input_entities import VariableEntity
 
+from core.tools.entities.tool_entities import WorkflowToolParameterConfiguration
+from core.tools.errors import WorkflowToolHumanInputNotSupportedError
+
 
 class WorkflowToolConfigurationUtils:
     @classmethod
diff --git a/api/core/tools/workflow_as_tool/provider.py b/api/core/tools/workflow_as_tool/provider.py
index 5905fd919e..a01004448a 100644
--- a/api/core/tools/workflow_as_tool/provider.py
+++ b/api/core/tools/workflow_as_tool/provider.py
@@ -2,6 +2,7 @@ from __future__ import annotations
 
 from collections.abc import Mapping
 
+from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from pydantic import Field
 from sqlalchemy import select
 from sqlalchemy.orm import Session
@@ -24,7 +25,6 @@ from core.tools.entities.tool_entities import (
 from core.tools.utils.workflow_configuration_sync import WorkflowToolConfigurationUtils
 from core.tools.workflow_as_tool.tool import WorkflowTool
 from extensions.ext_database import db
-from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from models.account import Account
 from models.model import App, AppMode
 from models.tools import WorkflowToolProvider
diff --git a/api/core/tools/workflow_as_tool/tool.py b/api/core/tools/workflow_as_tool/tool.py
index 52ab605963..7c4f8ee03a 100644
--- a/api/core/tools/workflow_as_tool/tool.py
+++ b/api/core/tools/workflow_as_tool/tool.py
@@ -5,6 +5,8 @@ import logging
 from collections.abc import Generator, Mapping, Sequence
 from typing import Any, cast
 
+from graphon.file import FILE_MODEL_IDENTITY, File, FileTransferMethod
+from graphon.model_runtime.entities.llm_entities import LLMUsage, LLMUsageMetadata
 from sqlalchemy import select
 
 from core.app.file_access import DatabaseFileAccessController
@@ -20,8 +22,6 @@ from core.tools.entities.tool_entities import (
 from core.tools.errors import ToolInvokeError
 from core.workflow.file_reference import resolve_file_record_id
 from factories.file_factory import build_from_mapping
-from graphon.file import FILE_MODEL_IDENTITY, File, FileTransferMethod
-from graphon.model_runtime.entities.llm_entities import LLMUsage, LLMUsageMetadata
 from models import Account, Tenant
 from models.model import App, EndUser
 from models.utils.file_input_compat import build_file_from_stored_mapping
diff --git a/api/core/trigger/debug/event_selectors.py b/api/core/trigger/debug/event_selectors.py
index 24c1271488..61d1cd8540 100644
--- a/api/core/trigger/debug/event_selectors.py
+++ b/api/core/trigger/debug/event_selectors.py
@@ -8,6 +8,7 @@ from collections.abc import Mapping
 from datetime import datetime
 from typing import Any
 
+from graphon.entities.graph_config import NodeConfigDict
 from pydantic import BaseModel
 
 from core.plugin.entities.request import TriggerInvokeEventResponse
@@ -27,7 +28,6 @@ from core.trigger.debug.events import (
 from core.workflow.nodes.trigger_plugin.entities import TriggerEventNodeData
 from core.workflow.nodes.trigger_schedule.entities import ScheduleConfig
 from extensions.ext_redis import redis_client
-from graphon.entities.graph_config import NodeConfigDict
 from libs.datetime_utils import ensure_naive_utc, naive_utc_now
 from libs.schedule_utils import calculate_next_run_at
 from models.model import App
diff --git a/api/core/workflow/nodes/agent/entities.py b/api/core/workflow/nodes/agent/entities.py
index 51452c29a3..c52aad150b 100644
--- a/api/core/workflow/nodes/agent/entities.py
+++ b/api/core/workflow/nodes/agent/entities.py
@@ -1,12 +1,12 @@
 from enum import IntEnum, StrEnum, auto
 from typing import Any, Literal, Union
 
+from graphon.entities.base_node_data import BaseNodeData
+from graphon.enums import BuiltinNodeTypes, NodeType
 from pydantic import BaseModel
 
 from core.prompt.entities.advanced_prompt_entities import MemoryConfig
 from core.tools.entities.tool_entities import ToolSelector
-from graphon.entities.base_node_data import BaseNodeData
-from graphon.enums import BuiltinNodeTypes, NodeType
 
 
 class AgentNodeData(BaseNodeData):
diff --git a/api/core/workflow/nodes/datasource/datasource_node.py b/api/core/workflow/nodes/datasource/datasource_node.py
index e4f6b3b470..d9247b2593 100644
--- a/api/core/workflow/nodes/datasource/datasource_node.py
+++ b/api/core/workflow/nodes/datasource/datasource_node.py
@@ -1,12 +1,6 @@
 from collections.abc import Generator, Mapping, Sequence
 from typing import TYPE_CHECKING, Any
 
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
-from core.datasource.datasource_manager import DatasourceManager
-from core.datasource.entities.datasource_entities import DatasourceProviderType
-from core.plugin.impl.exc import PluginDaemonClientSideError
-from core.workflow.file_reference import resolve_file_record_id
-from core.workflow.system_variables import SystemVariableKey, get_system_segment
 from graphon.entities.graph_config import NodeConfigDict
 from graphon.enums import (
     BuiltinNodeTypes,
@@ -18,6 +12,13 @@ from graphon.node_events import NodeRunResult, StreamCompletedEvent
 from graphon.nodes.base.node import Node
 from graphon.nodes.base.variable_template_parser import VariableTemplateParser
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
+from core.datasource.datasource_manager import DatasourceManager
+from core.datasource.entities.datasource_entities import DatasourceProviderType
+from core.plugin.impl.exc import PluginDaemonClientSideError
+from core.workflow.file_reference import resolve_file_record_id
+from core.workflow.system_variables import SystemVariableKey, get_system_segment
+
 from .entities import DatasourceNodeData, DatasourceParameter, OnlineDriveDownloadFileParam
 from .exc import DatasourceNodeError
 
diff --git a/api/core/workflow/nodes/datasource/entities.py b/api/core/workflow/nodes/datasource/entities.py
index 28966f2392..cad32f8d5b 100644
--- a/api/core/workflow/nodes/datasource/entities.py
+++ b/api/core/workflow/nodes/datasource/entities.py
@@ -1,10 +1,9 @@
 from typing import Any, Literal, Union
 
-from pydantic import BaseModel, field_validator
-from pydantic_core.core_schema import ValidationInfo
-
 from graphon.entities.base_node_data import BaseNodeData
 from graphon.enums import BuiltinNodeTypes, NodeType
+from pydantic import BaseModel, field_validator
+from pydantic_core.core_schema import ValidationInfo
 
 
 class DatasourceEntity(BaseModel):
diff --git a/api/core/workflow/nodes/knowledge_index/entities.py b/api/core/workflow/nodes/knowledge_index/entities.py
index 260881e49c..04a10f9257 100644
--- a/api/core/workflow/nodes/knowledge_index/entities.py
+++ b/api/core/workflow/nodes/knowledge_index/entities.py
@@ -1,13 +1,13 @@
 from typing import Union
 
+from graphon.entities.base_node_data import BaseNodeData
+from graphon.enums import NodeType
 from pydantic import BaseModel
 
 from core.rag.entities import RerankingModelConfig, WeightedScoreConfig
 from core.rag.index_processor.index_processor_base import SummaryIndexSettingDict
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
 from core.workflow.nodes.knowledge_index import KNOWLEDGE_INDEX_NODE_TYPE
-from graphon.entities.base_node_data import BaseNodeData
-from graphon.enums import NodeType
 
 
 class RetrievalSetting(BaseModel):
diff --git a/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py b/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py
index d5cab05dbe..bb72fe3881 100644
--- a/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py
+++ b/api/core/workflow/nodes/knowledge_index/knowledge_index_node.py
@@ -2,16 +2,17 @@ import logging
 from collections.abc import Mapping
 from typing import TYPE_CHECKING, Any
 
+from graphon.entities.graph_config import NodeConfigDict
+from graphon.enums import NodeExecutionType, WorkflowNodeExecutionStatus
+from graphon.node_events import NodeRunResult
+from graphon.nodes.base.node import Node
+from graphon.nodes.base.template import Template
+
 from core.rag.index_processor.index_processor import IndexProcessor
 from core.rag.index_processor.index_processor_base import SummaryIndexSettingDict
 from core.rag.summary_index.summary_index import SummaryIndex
 from core.workflow.nodes.knowledge_index import KNOWLEDGE_INDEX_NODE_TYPE
 from core.workflow.system_variables import SystemVariableKey, get_system_segment, get_system_text
-from graphon.entities.graph_config import NodeConfigDict
-from graphon.enums import NodeExecutionType, WorkflowNodeExecutionStatus
-from graphon.node_events import NodeRunResult
-from graphon.nodes.base.node import Node
-from graphon.nodes.base.template import Template
 
 from .entities import KnowledgeIndexNodeData
 from .exc import (
diff --git a/api/core/workflow/nodes/knowledge_retrieval/entities.py b/api/core/workflow/nodes/knowledge_retrieval/entities.py
index 3825f526a2..460ec693ce 100644
--- a/api/core/workflow/nodes/knowledge_retrieval/entities.py
+++ b/api/core/workflow/nodes/knowledge_retrieval/entities.py
@@ -1,11 +1,11 @@
 from typing import Literal
 
-from pydantic import BaseModel, Field
-
-from core.rag.entities import Condition, MetadataFilteringCondition, RerankingModelConfig, WeightedScoreConfig
 from graphon.entities.base_node_data import BaseNodeData
 from graphon.enums import BuiltinNodeTypes, NodeType
 from graphon.nodes.llm.entities import ModelConfig, VisionConfig
+from pydantic import BaseModel, Field
+
+from core.rag.entities import Condition, MetadataFilteringCondition, RerankingModelConfig, WeightedScoreConfig
 
 __all__ = ["Condition"]
 
diff --git a/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py b/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
index 47ad14b499..13624b27b3 100644
--- a/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
+++ b/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
@@ -8,11 +8,6 @@ import logging
 from collections.abc import Mapping, Sequence
 from typing import TYPE_CHECKING, Any, Literal
 
-from core.app.app_config.entities import DatasetRetrieveConfigEntity
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
-from core.rag.data_post_processor.data_post_processor import RerankingModelDict, WeightsDict
-from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
-from core.workflow.file_reference import parse_file_reference
 from graphon.entities import GraphInitParams
 from graphon.entities.graph_config import NodeConfigDict
 from graphon.enums import (
@@ -32,6 +27,12 @@ from graphon.variables import (
 )
 from graphon.variables.segments import ArrayObjectSegment
 
+from core.app.app_config.entities import DatasetRetrieveConfigEntity
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, DifyRunContext
+from core.rag.data_post_processor.data_post_processor import RerankingModelDict, WeightsDict
+from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
+from core.workflow.file_reference import parse_file_reference
+
 from .entities import (
     Condition,
     KnowledgeRetrievalNodeData,
diff --git a/api/core/workflow/nodes/trigger_plugin/entities.py b/api/core/workflow/nodes/trigger_plugin/entities.py
index 23ed2cd408..bf5be2379a 100644
--- a/api/core/workflow/nodes/trigger_plugin/entities.py
+++ b/api/core/workflow/nodes/trigger_plugin/entities.py
@@ -1,12 +1,12 @@
 from collections.abc import Mapping
 from typing import Any, Literal, Union
 
+from graphon.entities.base_node_data import BaseNodeData
+from graphon.enums import NodeType
 from pydantic import BaseModel, Field, ValidationInfo, field_validator
 
 from core.trigger.constants import TRIGGER_PLUGIN_NODE_TYPE
 from core.trigger.entities.entities import EventParameter
-from graphon.entities.base_node_data import BaseNodeData
-from graphon.enums import NodeType
 
 from .exc import TriggerEventParameterError
 
diff --git a/api/core/workflow/nodes/trigger_plugin/trigger_event_node.py b/api/core/workflow/nodes/trigger_plugin/trigger_event_node.py
index c848a86255..e50de11bb9 100644
--- a/api/core/workflow/nodes/trigger_plugin/trigger_event_node.py
+++ b/api/core/workflow/nodes/trigger_plugin/trigger_event_node.py
@@ -1,12 +1,13 @@
 from collections.abc import Mapping
 from typing import Any
 
-from core.trigger.constants import TRIGGER_PLUGIN_NODE_TYPE
-from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
 from graphon.enums import NodeExecutionType, WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult
 from graphon.nodes.base.node import Node
 
+from core.trigger.constants import TRIGGER_PLUGIN_NODE_TYPE
+from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
+
 from .entities import TriggerEventNodeData
 
 
diff --git a/api/core/workflow/nodes/trigger_schedule/entities.py b/api/core/workflow/nodes/trigger_schedule/entities.py
index 683c8d420f..04f1f7e6bb 100644
--- a/api/core/workflow/nodes/trigger_schedule/entities.py
+++ b/api/core/workflow/nodes/trigger_schedule/entities.py
@@ -1,10 +1,10 @@
 from typing import Any, Literal, Union
 
+from graphon.entities.base_node_data import BaseNodeData
+from graphon.enums import NodeType
 from pydantic import BaseModel, Field
 
 from core.trigger.constants import TRIGGER_SCHEDULE_NODE_TYPE
-from graphon.entities.base_node_data import BaseNodeData
-from graphon.enums import NodeType
 
 
 class TriggerScheduleNodeData(BaseNodeData):
diff --git a/api/core/workflow/nodes/trigger_schedule/trigger_schedule_node.py b/api/core/workflow/nodes/trigger_schedule/trigger_schedule_node.py
index b46cc76a6e..a9753ab387 100644
--- a/api/core/workflow/nodes/trigger_schedule/trigger_schedule_node.py
+++ b/api/core/workflow/nodes/trigger_schedule/trigger_schedule_node.py
@@ -1,11 +1,12 @@
 from collections.abc import Mapping
 
-from core.trigger.constants import TRIGGER_SCHEDULE_NODE_TYPE
-from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
 from graphon.enums import NodeExecutionType, WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult
 from graphon.nodes.base.node import Node
 
+from core.trigger.constants import TRIGGER_SCHEDULE_NODE_TYPE
+from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
+
 from .entities import TriggerScheduleNodeData
 
 
diff --git a/api/core/workflow/nodes/trigger_webhook/entities.py b/api/core/workflow/nodes/trigger_webhook/entities.py
index b261039448..a30f877e4b 100644
--- a/api/core/workflow/nodes/trigger_webhook/entities.py
+++ b/api/core/workflow/nodes/trigger_webhook/entities.py
@@ -1,12 +1,12 @@
 from collections.abc import Sequence
 from enum import StrEnum
 
-from pydantic import BaseModel, Field, field_validator
-
-from core.trigger.constants import TRIGGER_WEBHOOK_NODE_TYPE
 from graphon.entities.base_node_data import BaseNodeData
 from graphon.enums import NodeType
 from graphon.variables.types import SegmentType
+from pydantic import BaseModel, Field, field_validator
+
+from core.trigger.constants import TRIGGER_WEBHOOK_NODE_TYPE
 
 _WEBHOOK_HEADER_ALLOWED_TYPES: frozenset[SegmentType] = frozenset((SegmentType.STRING,))
 
diff --git a/api/core/workflow/nodes/trigger_webhook/node.py b/api/core/workflow/nodes/trigger_webhook/node.py
index 13c4f05bfd..d942a718cc 100644
--- a/api/core/workflow/nodes/trigger_webhook/node.py
+++ b/api/core/workflow/nodes/trigger_webhook/node.py
@@ -2,10 +2,6 @@ import logging
 from collections.abc import Mapping
 from typing import Any
 
-from core.trigger.constants import TRIGGER_WEBHOOK_NODE_TYPE
-from core.workflow.file_reference import resolve_file_record_id
-from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
-from factories.variable_factory import build_segment_with_type
 from graphon.enums import NodeExecutionType, WorkflowNodeExecutionStatus
 from graphon.file import FileTransferMethod
 from graphon.node_events import NodeRunResult
@@ -14,6 +10,11 @@ from graphon.nodes.protocols import FileReferenceFactoryProtocol
 from graphon.variables.types import SegmentType
 from graphon.variables.variables import FileVariable
 
+from core.trigger.constants import TRIGGER_WEBHOOK_NODE_TYPE
+from core.workflow.file_reference import resolve_file_record_id
+from core.workflow.variable_prefixes import SYSTEM_VARIABLE_NODE_ID
+from factories.variable_factory import build_segment_with_type
+
 from .entities import ContentType, WebhookData
 
 logger = logging.getLogger(__name__)
diff --git a/api/events/event_handlers/create_document_index.py b/api/events/event_handlers/create_document_index.py
index 0c535a1c5b..b7e7a6e60f 100644
--- a/api/events/event_handlers/create_document_index.py
+++ b/api/events/event_handlers/create_document_index.py
@@ -6,9 +6,9 @@ import click
 from sqlalchemy import select
 from werkzeug.exceptions import NotFound
 
-from core.db.session_factory import session_factory
 from core.indexing_runner import DocumentIsPausedError, IndexingRunner
 from events.document_index_event import document_index_created
+from extensions.ext_database import db
 from libs.datetime_utils import naive_utc_now
 from models.dataset import Document
 from models.enums import IndexingStatus
@@ -22,25 +22,24 @@ def handle(sender, **kwargs):
     document_ids = kwargs.get("document_ids", [])
     documents = []
     start_at = time.perf_counter()
-    with session_factory.create_session() as session:
-        for document_id in document_ids:
-            logger.info(click.style(f"Start process document: {document_id}", fg="green"))
+    for document_id in document_ids:
+        logger.info(click.style(f"Start process document: {document_id}", fg="green"))
 
-            document = session.scalar(
-                select(Document).where(
-                    Document.id == document_id,
-                    Document.dataset_id == dataset_id,
-                )
+        document = db.session.scalar(
+            select(Document).where(
+                Document.id == document_id,
+                Document.dataset_id == dataset_id,
             )
+        )
 
-            if not document:
-                raise NotFound("Document not found")
+        if not document:
+            raise NotFound("Document not found")
 
-            document.indexing_status = IndexingStatus.PARSING
-            document.processing_started_at = naive_utc_now()
-            documents.append(document)
-            session.add(document)
-        session.commit()
+        document.indexing_status = IndexingStatus.PARSING
+        document.processing_started_at = naive_utc_now()
+        documents.append(document)
+        db.session.add(document)
+    db.session.commit()
 
     with contextlib.suppress(Exception):
         try:
diff --git a/api/events/event_handlers/create_site_record_when_app_created.py b/api/events/event_handlers/create_site_record_when_app_created.py
index 5e2a456dce..84be592b1a 100644
--- a/api/events/event_handlers/create_site_record_when_app_created.py
+++ b/api/events/event_handlers/create_site_record_when_app_created.py
@@ -1,5 +1,5 @@
-from core.db.session_factory import session_factory
 from events.app_event import app_was_created
+from extensions.ext_database import db
 from models.enums import CustomizeTokenStrategy
 from models.model import Site
 
@@ -22,6 +22,6 @@ def handle(sender, **kwargs):
             created_by=app.created_by,
             updated_by=app.updated_by,
         )
-        with session_factory.create_session() as session:
-            session.add(site)
-            session.commit()
+
+        db.session.add(site)
+        db.session.commit()
diff --git a/api/events/event_handlers/delete_tool_parameters_cache_when_sync_draft_workflow.py b/api/events/event_handlers/delete_tool_parameters_cache_when_sync_draft_workflow.py
index ba9758175f..7bd8e88231 100644
--- a/api/events/event_handlers/delete_tool_parameters_cache_when_sync_draft_workflow.py
+++ b/api/events/event_handlers/delete_tool_parameters_cache_when_sync_draft_workflow.py
@@ -1,11 +1,12 @@
 import logging
 
+from graphon.nodes import BuiltinNodeTypes
+from graphon.nodes.tool.entities import ToolEntity
+
 from core.tools.entities.tool_entities import ToolProviderType
 from core.tools.tool_manager import ToolManager
 from core.tools.utils.configuration import ToolParameterConfigurationManager
 from events.app_event import app_draft_workflow_was_synced
-from graphon.nodes import BuiltinNodeTypes
-from graphon.nodes.tool.entities import ToolEntity
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/events/event_handlers/update_app_dataset_join_when_app_published_workflow_updated.py b/api/events/event_handlers/update_app_dataset_join_when_app_published_workflow_updated.py
index 6769b94cde..86b5b2bbf0 100644
--- a/api/events/event_handlers/update_app_dataset_join_when_app_published_workflow_updated.py
+++ b/api/events/event_handlers/update_app_dataset_join_when_app_published_workflow_updated.py
@@ -1,11 +1,11 @@
 from typing import cast
 
+from graphon.nodes import BuiltinNodeTypes
 from sqlalchemy import delete, select
 
 from core.workflow.nodes.knowledge_retrieval.entities import KnowledgeRetrievalNodeData
 from events.app_event import app_published_workflow_was_updated
 from extensions.ext_database import db
-from graphon.nodes import BuiltinNodeTypes
 from models.dataset import AppDatasetJoin
 from models.workflow import Workflow
 
diff --git a/api/extensions/ext_sentry.py b/api/extensions/ext_sentry.py
index 69d1f1ab07..5cc58f27c4 100644
--- a/api/extensions/ext_sentry.py
+++ b/api/extensions/ext_sentry.py
@@ -5,12 +5,11 @@ from dify_app import DifyApp
 def init_app(app: DifyApp):
     if dify_config.SENTRY_DSN:
         import sentry_sdk
+        from graphon.model_runtime.errors.invoke import InvokeRateLimitError
         from sentry_sdk.integrations.celery import CeleryIntegration
         from sentry_sdk.integrations.flask import FlaskIntegration
         from werkzeug.exceptions import HTTPException
 
-        from graphon.model_runtime.errors.invoke import InvokeRateLimitError
-
         try:
             from langfuse._utils import parse_error
 
diff --git a/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py b/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py
index 64ff0f0674..db599c5d49 100644
--- a/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py
+++ b/api/extensions/logstore/repositories/logstore_api_workflow_node_execution_repository.py
@@ -11,12 +11,12 @@ from collections.abc import Sequence
 from datetime import datetime
 from typing import Any
 
+from graphon.enums import WorkflowNodeExecutionStatus
 from sqlalchemy.orm import sessionmaker
 
 from extensions.logstore.aliyun_logstore import AliyunLogStore
 from extensions.logstore.repositories import safe_float, safe_int
 from extensions.logstore.sql_escape import escape_identifier, escape_logstore_query_value
-from graphon.enums import WorkflowNodeExecutionStatus
 from models.enums import CreatorUserRole
 from models.workflow import WorkflowNodeExecutionModel, WorkflowNodeExecutionTriggeredFrom
 from repositories.api_workflow_node_execution_repository import DifyAPIWorkflowNodeExecutionRepository
diff --git a/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py b/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py
index 7f77a0437a..2745141431 100644
--- a/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py
+++ b/api/extensions/logstore/repositories/logstore_api_workflow_run_repository.py
@@ -20,12 +20,12 @@ from collections.abc import Sequence
 from datetime import datetime
 from typing import Any, cast
 
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy.orm import sessionmaker
 
 from extensions.logstore.aliyun_logstore import AliyunLogStore
 from extensions.logstore.repositories import safe_float, safe_int
 from extensions.logstore.sql_escape import escape_identifier, escape_logstore_query_value, escape_sql_string
-from graphon.enums import WorkflowExecutionStatus
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
 from models.workflow import WorkflowRun, WorkflowType
diff --git a/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py b/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py
index 544109276d..d0f3e2e244 100644
--- a/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py
+++ b/api/extensions/logstore/repositories/logstore_workflow_execution_repository.py
@@ -3,14 +3,14 @@ import logging
 import os
 import time
 
+from graphon.entities import WorkflowExecution
+from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from sqlalchemy.engine import Engine
 from sqlalchemy.orm import sessionmaker
 
 from core.repositories.factory import WorkflowExecutionRepository
 from core.repositories.sqlalchemy_workflow_execution_repository import SQLAlchemyWorkflowExecutionRepository
 from extensions.logstore.aliyun_logstore import AliyunLogStore
-from graphon.entities import WorkflowExecution
-from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from libs.helper import extract_tenant_id
 from models import (
     Account,
diff --git a/api/extensions/otel/parser/base.py b/api/extensions/otel/parser/base.py
index fbf379b3e5..23d324f9ea 100644
--- a/api/extensions/otel/parser/base.py
+++ b/api/extensions/otel/parser/base.py
@@ -10,17 +10,17 @@ Gate is only active in EE (``ENTERPRISE_ENABLED=True``) when
 import json
 from typing import Any, Protocol
 
+from graphon.enums import BuiltinNodeTypes
+from graphon.file import File
+from graphon.graph_events import GraphNodeEventBase
+from graphon.nodes.base.node import Node
+from graphon.variables import Segment
 from opentelemetry.trace import Span
 from opentelemetry.trace.status import Status, StatusCode
 from pydantic import BaseModel
 
 from configs import dify_config
 from extensions.otel.semconv.gen_ai import ChainAttributes, GenAIAttributes
-from graphon.enums import BuiltinNodeTypes
-from graphon.file import File
-from graphon.graph_events import GraphNodeEventBase
-from graphon.nodes.base.node import Node
-from graphon.variables import Segment
 
 
 def should_include_content() -> bool:
diff --git a/api/extensions/otel/parser/llm.py b/api/extensions/otel/parser/llm.py
index ec3c78a12d..335c5cc29e 100644
--- a/api/extensions/otel/parser/llm.py
+++ b/api/extensions/otel/parser/llm.py
@@ -6,12 +6,12 @@ import logging
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.graph_events import GraphNodeEventBase
+from graphon.nodes.base.node import Node
 from opentelemetry.trace import Span
 
 from extensions.otel.parser.base import DefaultNodeOTelParser, safe_json_dumps
 from extensions.otel.semconv.gen_ai import LLMAttributes
-from graphon.graph_events import GraphNodeEventBase
-from graphon.nodes.base.node import Node
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/extensions/otel/parser/retrieval.py b/api/extensions/otel/parser/retrieval.py
index 56672d1fd4..6df5f62c15 100644
--- a/api/extensions/otel/parser/retrieval.py
+++ b/api/extensions/otel/parser/retrieval.py
@@ -6,13 +6,13 @@ import logging
 from collections.abc import Sequence
 from typing import Any
 
+from graphon.graph_events import GraphNodeEventBase
+from graphon.nodes.base.node import Node
+from graphon.variables import Segment
 from opentelemetry.trace import Span
 
 from extensions.otel.parser.base import DefaultNodeOTelParser, safe_json_dumps
 from extensions.otel.semconv.gen_ai import RetrieverAttributes
-from graphon.graph_events import GraphNodeEventBase
-from graphon.nodes.base.node import Node
-from graphon.variables import Segment
 
 logger = logging.getLogger(__name__)
 
diff --git a/api/extensions/otel/parser/tool.py b/api/extensions/otel/parser/tool.py
index 75ddbba448..b9fdd9e1ca 100644
--- a/api/extensions/otel/parser/tool.py
+++ b/api/extensions/otel/parser/tool.py
@@ -2,14 +2,14 @@
 Parser for tool nodes that captures tool-specific metadata.
 """
 
-from opentelemetry.trace import Span
-
-from extensions.otel.parser.base import DefaultNodeOTelParser, safe_json_dumps
-from extensions.otel.semconv.gen_ai import ToolAttributes
 from graphon.enums import WorkflowNodeExecutionMetadataKey
 from graphon.graph_events import GraphNodeEventBase
 from graphon.nodes.base.node import Node
 from graphon.nodes.tool.entities import ToolNodeData
+from opentelemetry.trace import Span
+
+from extensions.otel.parser.base import DefaultNodeOTelParser, safe_json_dumps
+from extensions.otel.semconv.gen_ai import ToolAttributes
 
 
 class ToolNodeOTelParser:
diff --git a/api/factories/variable_factory.py b/api/factories/variable_factory.py
index fd7acb14d3..57205b5739 100644
--- a/api/factories/variable_factory.py
+++ b/api/factories/variable_factory.py
@@ -8,11 +8,6 @@ shared conversion functions for legacy callers and tests.
 from collections.abc import Mapping, Sequence
 from typing import Any, cast
 
-from configs import dify_config
-from core.workflow.variable_prefixes import (
-    CONVERSATION_VARIABLE_NODE_ID,
-    ENVIRONMENT_VARIABLE_NODE_ID,
-)
 from graphon.variables.exc import VariableError
 from graphon.variables.factory import (
     TypeMismatchError,
@@ -36,6 +31,12 @@ from graphon.variables.variables import (
     VariableBase,
 )
 
+from configs import dify_config
+from core.workflow.variable_prefixes import (
+    CONVERSATION_VARIABLE_NODE_ID,
+    ENVIRONMENT_VARIABLE_NODE_ID,
+)
+
 __all__ = [
     "TypeMismatchError",
     "UnsupportedSegmentTypeError",
diff --git a/api/fields/member_fields.py b/api/fields/member_fields.py
index 67b320beaa..cfe0015918 100644
--- a/api/fields/member_fields.py
+++ b/api/fields/member_fields.py
@@ -3,10 +3,10 @@ from __future__ import annotations
 from datetime import datetime
 
 from flask_restx import fields
+from graphon.file import helpers as file_helpers
 from pydantic import computed_field, field_validator
 
 from fields.base import ResponseModel
-from graphon.file import helpers as file_helpers
 
 simple_account_fields = {
     "id": fields.String,
diff --git a/api/fields/message_fields.py b/api/fields/message_fields.py
index ca18f1c203..1a871204a0 100644
--- a/api/fields/message_fields.py
+++ b/api/fields/message_fields.py
@@ -3,12 +3,12 @@ from __future__ import annotations
 from datetime import datetime
 from uuid import uuid4
 
+from graphon.file import File
 from pydantic import Field, field_validator
 
 from core.entities.execution_extra_content import ExecutionExtraContentDomainModel
 from fields.base import ResponseModel
 from fields.conversation_fields import AgentThought, JSONValue, MessageFile
-from graphon.file import File
 
 type JSONValueType = JSONValue
 
diff --git a/api/fields/raws.py b/api/fields/raws.py
index ee6f53b360..4c65cdab7a 100644
--- a/api/fields/raws.py
+++ b/api/fields/raws.py
@@ -1,5 +1,4 @@
 from flask_restx import fields
-
 from graphon.file import File
 
 
diff --git a/api/fields/workflow_fields.py b/api/fields/workflow_fields.py
index f9b5e98936..b0b6cc0b48 100644
--- a/api/fields/workflow_fields.py
+++ b/api/fields/workflow_fields.py
@@ -1,8 +1,8 @@
 from flask_restx import fields
+from graphon.variables import SecretVariable, SegmentType, VariableBase
 
 from core.helper import encrypter
 from fields.member_fields import simple_account_fields
-from graphon.variables import SecretVariable, SegmentType, VariableBase
 from libs.helper import TimestampField
 
 from ._value_type_serializer import serialize_value_type
diff --git a/api/libs/helper.py b/api/libs/helper.py
index ac69a11084..69bd483515 100644
--- a/api/libs/helper.py
+++ b/api/libs/helper.py
@@ -16,6 +16,8 @@ from zoneinfo import available_timezones
 
 from flask import Response, stream_with_context
 from flask_restx import fields
+from graphon.file import helpers as file_helpers
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from pydantic import BaseModel, TypeAdapter
 from pydantic.functional_validators import AfterValidator
 from typing_extensions import TypedDict
@@ -23,8 +25,6 @@ from typing_extensions import TypedDict
 from configs import dify_config
 from core.app.features.rate_limiting.rate_limit import RateLimitGenerator
 from extensions.ext_redis import redis_client
-from graphon.file import helpers as file_helpers
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 
 if TYPE_CHECKING:
     from models import Account
diff --git a/api/models/comment.py b/api/models/comment.py
index 308339e6f6..7018c7e1f2 100644
--- a/api/models/comment.py
+++ b/api/models/comment.py
@@ -7,7 +7,7 @@ from sqlalchemy import Index, func
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from .account import Account
-from .base import Base
+from .base import Base, gen_uuidv7_string
 from .engine import db
 from .types import StringUUID
 
@@ -41,7 +41,7 @@ class WorkflowComment(Base):
         Index("workflow_comments_created_at_idx", "created_at"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    id: Mapped[str] = mapped_column(StringUUID, default=gen_uuidv7_string)
     tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     app_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     position_x: Mapped[float] = mapped_column(db.Float)
@@ -148,7 +148,7 @@ class WorkflowCommentReply(Base):
         Index("comment_replies_created_at_idx", "created_at"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    id: Mapped[str] = mapped_column(StringUUID, default=gen_uuidv7_string)
     comment_id: Mapped[str] = mapped_column(
         StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
     )
@@ -193,7 +193,7 @@ class WorkflowCommentMention(Base):
         Index("comment_mentions_user_idx", "mentioned_user_id"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    id: Mapped[str] = mapped_column(StringUUID, default=gen_uuidv7_string)
     comment_id: Mapped[str] = mapped_column(
         StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
     )
diff --git a/api/models/dataset.py b/api/models/dataset.py
index eee5c39a0e..50301dd2d7 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -1715,7 +1715,7 @@ class SegmentAttachmentBinding(TypeBase):
     )
 
 
-class DocumentSegmentSummary(TypeBase):
+class DocumentSegmentSummary(Base):
     __tablename__ = "document_segment_summaries"
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="document_segment_summaries_pkey"),
@@ -1725,40 +1725,25 @@ class DocumentSegmentSummary(TypeBase):
         sa.Index("document_segment_summaries_status_idx", "status"),
     )
 
-    id: Mapped[str] = mapped_column(
-        StringUUID,
-        nullable=False,
-        insert_default=lambda: str(uuid4()),
-        default_factory=lambda: str(uuid4()),
-        init=False,
-    )
+    id: Mapped[str] = mapped_column(StringUUID, nullable=False, default=lambda: str(uuid4()))
     dataset_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     document_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     # corresponds to DocumentSegment.id or parent chunk id
     chunk_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    summary_content: Mapped[str | None] = mapped_column(LongText, nullable=True, default=None)
-    summary_index_node_id: Mapped[str | None] = mapped_column(String(255), nullable=True, default=None)
-    summary_index_node_hash: Mapped[str | None] = mapped_column(String(255), nullable=True, default=None)
-    tokens: Mapped[int | None] = mapped_column(sa.Integer, nullable=True, default=None)
-    status: Mapped[SummaryStatus] = mapped_column(
-        EnumText(SummaryStatus, length=32),
-        nullable=False,
-        server_default=sa.text("'generating'"),
-        default=SummaryStatus.GENERATING,
-    )
-    error: Mapped[str | None] = mapped_column(LongText, nullable=True, default=None)
-    enabled: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("true"), default=True)
-    disabled_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True, default=None)
-    disabled_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True, default=None)
-    created_at: Mapped[datetime] = mapped_column(
-        DateTime, nullable=False, server_default=func.current_timestamp(), init=False
+    summary_content: Mapped[str] = mapped_column(LongText, nullable=True)
+    summary_index_node_id: Mapped[str] = mapped_column(String(255), nullable=True)
+    summary_index_node_hash: Mapped[str] = mapped_column(String(255), nullable=True)
+    tokens: Mapped[int | None] = mapped_column(sa.Integer, nullable=True)
+    status: Mapped[str] = mapped_column(
+        EnumText(SummaryStatus, length=32), nullable=False, server_default=sa.text("'generating'")
     )
+    error: Mapped[str] = mapped_column(LongText, nullable=True)
+    enabled: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("true"))
+    disabled_at: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    disabled_by = mapped_column(StringUUID, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
     updated_at: Mapped[datetime] = mapped_column(
-        DateTime,
-        nullable=False,
-        server_default=func.current_timestamp(),
-        onupdate=func.current_timestamp(),
-        init=False,
+        DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
     )
 
     def __repr__(self):
diff --git a/api/models/human_input.py b/api/models/human_input.py
index b4c7a634b6..79c5d62f6a 100644
--- a/api/models/human_input.py
+++ b/api/models/human_input.py
@@ -3,11 +3,11 @@ from enum import StrEnum
 from typing import Annotated, Literal, Self, final
 
 import sqlalchemy as sa
+from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from pydantic import BaseModel, Field
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from core.workflow.human_input_compat import DeliveryMethodType
-from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from libs.helper import generate_string
 
 from .base import Base, DefaultFieldsMixin
diff --git a/api/models/model.py b/api/models/model.py
index 7fe0731098..8eabf45363 100644
--- a/api/models/model.py
+++ b/api/models/model.py
@@ -14,6 +14,9 @@ from uuid import uuid4
 import sqlalchemy as sa
 from flask import request
 from flask_login import UserMixin  # type: ignore[import-untyped]
+from graphon.enums import WorkflowExecutionStatus
+from graphon.file import FILE_MODEL_IDENTITY, File, FileTransferMethod, FileType
+from graphon.file import helpers as file_helpers
 from sqlalchemy import BigInteger, Float, Index, PrimaryKeyConstraint, String, exists, func, select, text
 from sqlalchemy.orm import Mapped, Session, mapped_column, sessionmaker
 
@@ -21,9 +24,6 @@ from configs import dify_config
 from constants import DEFAULT_FILE_NUMBER_LIMITS
 from core.tools.signature import sign_tool_file
 from extensions.storage.storage_type import StorageType
-from graphon.enums import WorkflowExecutionStatus
-from graphon.file import FILE_MODEL_IDENTITY, File, FileTransferMethod, FileType
-from graphon.file import helpers as file_helpers
 from libs.helper import generate_string  # type: ignore[import-not-found]
 from libs.uuid_utils import uuidv7
 from models.utils.file_input_compat import build_file_from_input_mapping
diff --git a/api/models/provider.py b/api/models/provider.py
index 2bb67d605b..8270961b31 100644
--- a/api/models/provider.py
+++ b/api/models/provider.py
@@ -6,10 +6,10 @@ from functools import cached_property
 from uuid import uuid4
 
 import sqlalchemy as sa
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy import DateTime, String, func, select, text
 from sqlalchemy.orm import Mapped, mapped_column
 
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs.uuid_utils import uuidv7
 
 from .base import TypeBase
diff --git a/api/models/workflow.py b/api/models/workflow.py
index 467d60f6ac..020adaa9a8 100644
--- a/api/models/workflow.py
+++ b/api/models/workflow.py
@@ -8,6 +8,19 @@ from typing import TYPE_CHECKING, Any, Optional, TypedDict, cast
 from uuid import uuid4
 
 import sqlalchemy as sa
+from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
+from graphon.entities.pause_reason import HumanInputRequired, PauseReason, PauseReasonType, SchedulingPause
+from graphon.enums import (
+    BuiltinNodeTypes,
+    NodeType,
+    WorkflowExecutionStatus,
+    WorkflowNodeExecutionMetadataKey,
+    WorkflowNodeExecutionStatus,
+)
+from graphon.file import File
+from graphon.file.constants import maybe_file_object
+from graphon.variables import utils as variable_utils
+from graphon.variables.variables import FloatVariable, IntegerVariable, RAGPipelineVariable, StringVariable
 from sqlalchemy import (
     DateTime,
     Index,
@@ -31,19 +44,6 @@ from core.workflow.variable_prefixes import (
 )
 from extensions.ext_storage import Storage
 from factories.variable_factory import TypeMismatchError, build_segment_with_type
-from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
-from graphon.entities.pause_reason import HumanInputRequired, PauseReason, PauseReasonType, SchedulingPause
-from graphon.enums import (
-    BuiltinNodeTypes,
-    NodeType,
-    WorkflowExecutionStatus,
-    WorkflowNodeExecutionMetadataKey,
-    WorkflowNodeExecutionStatus,
-)
-from graphon.file import File
-from graphon.file.constants import maybe_file_object
-from graphon.variables import utils as variable_utils
-from graphon.variables.variables import FloatVariable, IntegerVariable, RAGPipelineVariable, StringVariable
 from libs.datetime_utils import naive_utc_now
 from libs.uuid_utils import uuidv7
 
@@ -53,10 +53,11 @@ if TYPE_CHECKING:
     from .model import AppMode, UploadFile
 
 
+from graphon.variables import SecretVariable, Segment, SegmentType, VariableBase
+
 from constants import DEFAULT_FILE_NUMBER_LIMITS, HIDDEN_VALUE
 from core.helper import encrypter
 from factories import variable_factory
-from graphon.variables import SecretVariable, Segment, SegmentType, VariableBase
 from libs import helper
 
 from .account import Account
diff --git a/api/repositories/api_workflow_run_repository.py b/api/repositories/api_workflow_run_repository.py
index 72b38e7906..100589804c 100644
--- a/api/repositories/api_workflow_run_repository.py
+++ b/api/repositories/api_workflow_run_repository.py
@@ -38,11 +38,11 @@ from collections.abc import Callable, Sequence
 from datetime import datetime
 from typing import Protocol, TypedDict
 
+from graphon.entities.pause_reason import PauseReason
+from graphon.enums import WorkflowType
 from sqlalchemy.orm import Session
 
 from core.repositories.factory import WorkflowExecutionRepository
-from graphon.entities.pause_reason import PauseReason
-from graphon.enums import WorkflowType
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from models.enums import WorkflowRunTriggeredFrom
 from models.workflow import WorkflowAppLog, WorkflowArchiveLog, WorkflowPause, WorkflowPauseReason, WorkflowRun
diff --git a/api/repositories/sqlalchemy_api_workflow_node_execution_repository.py b/api/repositories/sqlalchemy_api_workflow_node_execution_repository.py
index 44735eb769..d5c6a203b1 100644
--- a/api/repositories/sqlalchemy_api_workflow_node_execution_repository.py
+++ b/api/repositories/sqlalchemy_api_workflow_node_execution_repository.py
@@ -10,11 +10,11 @@ from collections.abc import Sequence
 from datetime import datetime
 from typing import Protocol, cast
 
+from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from sqlalchemy import asc, delete, desc, func, select
 from sqlalchemy.engine import CursorResult
 from sqlalchemy.orm import Session, sessionmaker
 
-from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from models.workflow import WorkflowNodeExecutionModel, WorkflowNodeExecutionOffload
 from repositories.api_workflow_node_execution_repository import (
     DifyAPIWorkflowNodeExecutionRepository,
diff --git a/api/repositories/sqlalchemy_api_workflow_run_repository.py b/api/repositories/sqlalchemy_api_workflow_run_repository.py
index 474b200fc5..b760696c5e 100644
--- a/api/repositories/sqlalchemy_api_workflow_run_repository.py
+++ b/api/repositories/sqlalchemy_api_workflow_run_repository.py
@@ -28,15 +28,15 @@ from decimal import Decimal
 from typing import Any, cast
 
 import sqlalchemy as sa
+from graphon.entities.pause_reason import HumanInputRequired, PauseReason, PauseReasonType, SchedulingPause
+from graphon.enums import WorkflowExecutionStatus, WorkflowType
+from graphon.nodes.human_input.entities import FormDefinition
 from pydantic import ValidationError
 from sqlalchemy import and_, delete, func, null, or_, select, tuple_
 from sqlalchemy.engine import CursorResult
 from sqlalchemy.orm import Session, selectinload, sessionmaker
 
 from extensions.ext_storage import storage
-from graphon.entities.pause_reason import HumanInputRequired, PauseReason, PauseReasonType, SchedulingPause
-from graphon.enums import WorkflowExecutionStatus, WorkflowType
-from graphon.nodes.human_input.entities import FormDefinition
 from libs.datetime_utils import naive_utc_now
 from libs.helper import convert_datetime_to_date
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
diff --git a/api/repositories/sqlalchemy_execution_extra_content_repository.py b/api/repositories/sqlalchemy_execution_extra_content_repository.py
index 67f8795d3f..feba5f7eb6 100644
--- a/api/repositories/sqlalchemy_execution_extra_content_repository.py
+++ b/api/repositories/sqlalchemy_execution_extra_content_repository.py
@@ -7,6 +7,9 @@ from collections import defaultdict
 from collections.abc import Sequence
 from typing import Any
 
+from graphon.nodes.human_input.entities import FormDefinition
+from graphon.nodes.human_input.enums import HumanInputFormStatus
+from graphon.nodes.human_input.human_input_node import HumanInputNode
 from sqlalchemy import select
 from sqlalchemy.orm import Session, selectinload, sessionmaker
 
@@ -18,9 +21,6 @@ from core.entities.execution_extra_content import (
 from core.entities.execution_extra_content import (
     HumanInputContent as HumanInputContentDomainModel,
 )
-from graphon.nodes.human_input.entities import FormDefinition
-from graphon.nodes.human_input.enums import HumanInputFormStatus
-from graphon.nodes.human_input.human_input_node import HumanInputNode
 from models.execution_extra_content import (
     ExecutionExtraContent as ExecutionExtraContentModel,
 )
diff --git a/api/services/app_dsl_service.py b/api/services/app_dsl_service.py
index 78806927bc..74b800606d 100644
--- a/api/services/app_dsl_service.py
+++ b/api/services/app_dsl_service.py
@@ -10,6 +10,12 @@ from uuid import uuid4
 import yaml
 from Crypto.Cipher import AES
 from Crypto.Util.Padding import pad, unpad
+from graphon.enums import BuiltinNodeTypes
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+from graphon.nodes.llm.entities import LLMNodeData
+from graphon.nodes.parameter_extractor.entities import ParameterExtractorNodeData
+from graphon.nodes.question_classifier.entities import QuestionClassifierNodeData
+from graphon.nodes.tool.entities import ToolNodeData
 from packaging import version
 from packaging.version import parse as parse_version
 from pydantic import BaseModel
@@ -29,12 +35,6 @@ from core.workflow.nodes.trigger_schedule.trigger_schedule_node import TriggerSc
 from events.app_event import app_model_config_was_updated, app_was_created
 from extensions.ext_redis import redis_client
 from factories import variable_factory
-from graphon.enums import BuiltinNodeTypes
-from graphon.model_runtime.utils.encoders import jsonable_encoder
-from graphon.nodes.llm.entities import LLMNodeData
-from graphon.nodes.parameter_extractor.entities import ParameterExtractorNodeData
-from graphon.nodes.question_classifier.entities import QuestionClassifierNodeData
-from graphon.nodes.tool.entities import ToolNodeData
 from libs.datetime_utils import naive_utc_now
 from models import Account, App, AppMode
 from models.model import AppModelConfig, AppModelConfigDict, IconType
diff --git a/api/services/app_task_service.py b/api/services/app_task_service.py
index 6e9d6b1c73..0842e9d3e7 100644
--- a/api/services/app_task_service.py
+++ b/api/services/app_task_service.py
@@ -5,10 +5,11 @@ like stopping tasks, handling both legacy Redis flag mechanism and
 new GraphEngine command channel mechanism.
 """
 
+from graphon.graph_engine.manager import GraphEngineManager
+
 from core.app.apps.base_app_queue_manager import AppQueueManager
 from core.app.entities.app_invoke_entities import InvokeFrom
 from extensions.ext_redis import redis_client
-from graphon.graph_engine.manager import GraphEngineManager
 from models.model import AppMode
 
 
diff --git a/api/services/audio_service.py b/api/services/audio_service.py
index 60948e652b..1c7027efb4 100644
--- a/api/services/audio_service.py
+++ b/api/services/audio_service.py
@@ -5,12 +5,12 @@ from collections.abc import Generator
 from typing import cast
 
 from flask import Response, stream_with_context
+from graphon.model_runtime.entities.model_entities import ModelType
 from werkzeug.datastructures import FileStorage
 
 from constants import AUDIO_EXTENSIONS
 from core.model_manager import ModelManager
 from extensions.ext_database import db
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.enums import MessageStatus
 from models.model import App, AppMode, Message
 from services.errors.audio import (
diff --git a/api/services/billing_service.py b/api/services/billing_service.py
index eeaddfee2f..068c93d94f 100644
--- a/api/services/billing_service.py
+++ b/api/services/billing_service.py
@@ -53,6 +53,8 @@ class QuotaReleaseResult(TypedDict):
 _quota_reserve_adapter = TypeAdapter(QuotaReserveResult)
 _quota_commit_adapter = TypeAdapter(QuotaCommitResult)
 _quota_release_adapter = TypeAdapter(QuotaReleaseResult)
+
+
 class _BillingQuota(TypedDict):
     size: int
     limit: int
diff --git a/api/services/clear_free_plan_tenant_expired_logs.py b/api/services/clear_free_plan_tenant_expired_logs.py
index dcc93b4b0f..ea12e40420 100644
--- a/api/services/clear_free_plan_tenant_expired_logs.py
+++ b/api/services/clear_free_plan_tenant_expired_logs.py
@@ -6,6 +6,7 @@ from concurrent.futures import ThreadPoolExecutor
 
 import click
 from flask import Flask, current_app
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from sqlalchemy import delete, func, select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -13,7 +14,6 @@ from configs import dify_config
 from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
 from extensions.ext_storage import storage
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from models.account import Tenant
 from models.model import (
     App,
diff --git a/api/services/conversation_service.py b/api/services/conversation_service.py
index ee8a1c4edd..f5085af59b 100644
--- a/api/services/conversation_service.py
+++ b/api/services/conversation_service.py
@@ -3,6 +3,7 @@ import logging
 from collections.abc import Callable, Sequence
 from typing import Any
 
+from graphon.variables.types import SegmentType
 from sqlalchemy import asc, desc, func, or_, select
 from sqlalchemy.orm import Session
 
@@ -12,7 +13,6 @@ from core.db.session_factory import session_factory
 from core.llm_generator.llm_generator import LLMGenerator
 from extensions.ext_database import db
 from factories import variable_factory
-from graphon.variables.types import SegmentType
 from libs.datetime_utils import naive_utc_now
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from models import Account, ConversationVariable
diff --git a/api/services/conversation_variable_updater.py b/api/services/conversation_variable_updater.py
index 287d513f48..95a8951951 100644
--- a/api/services/conversation_variable_updater.py
+++ b/api/services/conversation_variable_updater.py
@@ -1,7 +1,7 @@
+from graphon.variables.variables import VariableBase
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
 
-from graphon.variables.variables import VariableBase
 from models import ConversationVariable
 
 
diff --git a/api/services/datasource_provider_service.py b/api/services/datasource_provider_service.py
index 416bc8cef9..364c4a86a0 100644
--- a/api/services/datasource_provider_service.py
+++ b/api/services/datasource_provider_service.py
@@ -3,6 +3,7 @@ import time
 from collections.abc import Mapping
 from typing import Any
 
+from graphon.model_runtime.entities.provider_entities import FormType
 from sqlalchemy import delete, func, select, update
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -17,7 +18,6 @@ from core.plugin.impl.oauth import OAuthHandler
 from core.tools.utils.encryption import ProviderConfigCache, ProviderConfigEncrypter, create_provider_encrypter
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from graphon.model_runtime.entities.provider_entities import FormType
 from models.oauth import DatasourceOauthParamConfig, DatasourceOauthTenantParamConfig, DatasourceProvider
 from models.provider_ids import DatasourceProviderID
 from services.plugin.plugin_service import PluginService
diff --git a/api/services/entities/model_provider_entities.py b/api/services/entities/model_provider_entities.py
index 6679c08ebd..a944ef6acd 100644
--- a/api/services/entities/model_provider_entities.py
+++ b/api/services/entities/model_provider_entities.py
@@ -1,6 +1,15 @@
 from collections.abc import Sequence
 from enum import StrEnum
 
+from graphon.model_runtime.entities.common_entities import I18nObject
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.entities.provider_entities import (
+    ConfigurateMethod,
+    ModelCredentialSchema,
+    ProviderCredentialSchema,
+    ProviderHelpEntity,
+    SimpleProviderEntity,
+)
 from pydantic import BaseModel, ConfigDict, model_validator
 
 from configs import dify_config
@@ -15,15 +24,6 @@ from core.entities.provider_entities import (
     QuotaConfiguration,
     UnaddedModelConfiguration,
 )
-from graphon.model_runtime.entities.common_entities import I18nObject
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.entities.provider_entities import (
-    ConfigurateMethod,
-    ModelCredentialSchema,
-    ProviderCredentialSchema,
-    ProviderHelpEntity,
-    SimpleProviderEntity,
-)
 from models.provider import ProviderType
 
 
diff --git a/api/services/file_service.py b/api/services/file_service.py
index 52da2a7951..79a935de4b 100644
--- a/api/services/file_service.py
+++ b/api/services/file_service.py
@@ -8,6 +8,7 @@ from tempfile import NamedTemporaryFile
 from typing import Literal
 from zipfile import ZIP_DEFLATED, ZipFile
 
+from graphon.file import helpers as file_helpers
 from sqlalchemy import Engine, select
 from sqlalchemy.orm import Session, sessionmaker
 from werkzeug.exceptions import NotFound
@@ -23,7 +24,6 @@ from core.rag.extractor.extract_processor import ExtractProcessor
 from extensions.ext_database import db
 from extensions.ext_storage import storage
 from extensions.storage.storage_type import StorageType
-from graphon.file import helpers as file_helpers
 from libs.datetime_utils import naive_utc_now
 from libs.helper import extract_tenant_id
 from models import Account
diff --git a/api/services/human_input_delivery_test_service.py b/api/services/human_input_delivery_test_service.py
index 68ef67dec1..77576fa4c0 100644
--- a/api/services/human_input_delivery_test_service.py
+++ b/api/services/human_input_delivery_test_service.py
@@ -4,6 +4,7 @@ from dataclasses import dataclass, field
 from enum import StrEnum
 from typing import Protocol
 
+from graphon.runtime import VariablePool
 from sqlalchemy import Engine, select
 from sqlalchemy.orm import sessionmaker
 
@@ -17,7 +18,6 @@ from core.workflow.human_input_compat import (
 )
 from extensions.ext_database import db
 from extensions.ext_mail import mail
-from graphon.runtime import VariablePool
 from libs.email_template_renderer import render_email_template
 from models import Account, TenantAccountJoin
 from services.feature_service import FeatureService
diff --git a/api/services/human_input_service.py b/api/services/human_input_service.py
index 76598d31ac..02a6620fc7 100644
--- a/api/services/human_input_service.py
+++ b/api/services/human_input_service.py
@@ -3,6 +3,12 @@ from collections.abc import Mapping
 from datetime import datetime, timedelta
 from typing import Any
 
+from graphon.nodes.human_input.entities import (
+    FormDefinition,
+    HumanInputSubmissionValidationError,
+    validate_human_input_submission,
+)
+from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from sqlalchemy import Engine, select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -11,12 +17,6 @@ from core.repositories.human_input_repository import (
     HumanInputFormRecord,
     HumanInputFormSubmissionRepository,
 )
-from graphon.nodes.human_input.entities import (
-    FormDefinition,
-    HumanInputSubmissionValidationError,
-    validate_human_input_submission,
-)
-from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from libs.datetime_utils import ensure_naive_utc, naive_utc_now
 from libs.exception import BaseHTTPException
 from models.human_input import RecipientType
diff --git a/api/services/model_load_balancing_service.py b/api/services/model_load_balancing_service.py
index c269346f5f..b652e049ce 100644
--- a/api/services/model_load_balancing_service.py
+++ b/api/services/model_load_balancing_service.py
@@ -2,6 +2,12 @@ import json
 import logging
 from typing import Any, TypedDict
 
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.entities.provider_entities import (
+    ModelCredentialSchema,
+    ProviderCredentialSchema,
+)
+from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
 from sqlalchemy import or_, select
 
 from constants import HIDDEN_VALUE
@@ -12,12 +18,6 @@ from core.model_manager import LBModelManager
 from core.plugin.impl.model_runtime_factory import create_plugin_model_assembly, create_plugin_provider_manager
 from core.provider_manager import ProviderManager
 from extensions.ext_database import db
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.entities.provider_entities import (
-    ModelCredentialSchema,
-    ProviderCredentialSchema,
-)
-from graphon.model_runtime.model_providers.model_provider_factory import ModelProviderFactory
 from libs.datetime_utils import naive_utc_now
 from models.enums import CredentialSourceType
 from models.provider import LoadBalancingModelConfig, ProviderCredential, ProviderModelCredential
diff --git a/api/services/rag_pipeline/rag_pipeline.py b/api/services/rag_pipeline/rag_pipeline.py
index 968600d1bc..605689226a 100644
--- a/api/services/rag_pipeline/rag_pipeline.py
+++ b/api/services/rag_pipeline/rag_pipeline.py
@@ -9,6 +9,15 @@ from typing import Any, cast
 from uuid import uuid4
 
 from flask_login import current_user
+from graphon.entities import WorkflowNodeExecution
+from graphon.enums import BuiltinNodeTypes, ErrorStrategy, NodeType, WorkflowNodeExecutionStatus
+from graphon.errors import WorkflowNodeRunFailedError
+from graphon.graph_events import GraphNodeEventBase, NodeRunFailedEvent, NodeRunSucceededEvent
+from graphon.node_events import NodeRunResult
+from graphon.nodes.base.node import Node
+from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, build_http_request_config
+from graphon.runtime import VariablePool
+from graphon.variables.variables import Variable, VariableBase
 from sqlalchemy import func, select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -44,15 +53,6 @@ from core.workflow.variable_pool_initializer import add_variables_to_pool
 from core.workflow.workflow_entry import WorkflowEntry
 from enterprise.telemetry.draft_trace import enqueue_draft_node_execution_trace
 from extensions.ext_database import db
-from graphon.entities import WorkflowNodeExecution
-from graphon.enums import BuiltinNodeTypes, ErrorStrategy, NodeType, WorkflowNodeExecutionStatus
-from graphon.errors import WorkflowNodeRunFailedError
-from graphon.graph_events import GraphNodeEventBase, NodeRunFailedEvent, NodeRunSucceededEvent
-from graphon.node_events import NodeRunResult
-from graphon.nodes.base.node import Node
-from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, build_http_request_config
-from graphon.runtime import VariablePool
-from graphon.variables.variables import Variable, VariableBase
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from models import Account
 from models.dataset import (  # type: ignore
diff --git a/api/services/rag_pipeline/rag_pipeline_dsl_service.py b/api/services/rag_pipeline/rag_pipeline_dsl_service.py
index f315d053cb..7dd86f1581 100644
--- a/api/services/rag_pipeline/rag_pipeline_dsl_service.py
+++ b/api/services/rag_pipeline/rag_pipeline_dsl_service.py
@@ -13,6 +13,12 @@ import yaml  # type: ignore
 from Crypto.Cipher import AES
 from Crypto.Util.Padding import pad, unpad
 from flask_login import current_user
+from graphon.enums import BuiltinNodeTypes
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+from graphon.nodes.llm.entities import LLMNodeData
+from graphon.nodes.parameter_extractor.entities import ParameterExtractorNodeData
+from graphon.nodes.question_classifier.entities import QuestionClassifierNodeData
+from graphon.nodes.tool.entities import ToolNodeData
 from packaging import version
 from pydantic import BaseModel
 from sqlalchemy import select
@@ -27,12 +33,6 @@ from core.workflow.nodes.knowledge_index import KNOWLEDGE_INDEX_NODE_TYPE
 from core.workflow.nodes.knowledge_retrieval.entities import KnowledgeRetrievalNodeData
 from extensions.ext_redis import redis_client
 from factories import variable_factory
-from graphon.enums import BuiltinNodeTypes
-from graphon.model_runtime.utils.encoders import jsonable_encoder
-from graphon.nodes.llm.entities import LLMNodeData
-from graphon.nodes.parameter_extractor.entities import ParameterExtractorNodeData
-from graphon.nodes.question_classifier.entities import QuestionClassifierNodeData
-from graphon.nodes.tool.entities import ToolNodeData
 from models import Account
 from models.dataset import Dataset, DatasetCollectionBinding, Pipeline
 from models.enums import CollectionBindingType, DatasetRuntimeMode
diff --git a/api/services/retention/workflow_run/archive_paid_plan_workflow_run.py b/api/services/retention/workflow_run/archive_paid_plan_workflow_run.py
index 21be411bea..ab60986bfe 100644
--- a/api/services/retention/workflow_run/archive_paid_plan_workflow_run.py
+++ b/api/services/retention/workflow_run/archive_paid_plan_workflow_run.py
@@ -27,13 +27,13 @@ from dataclasses import dataclass, field
 from typing import Any, TypedDict
 
 import click
+from graphon.enums import WorkflowType
 from sqlalchemy import inspect
 from sqlalchemy.orm import Session, sessionmaker
 
 from configs import dify_config
 from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
-from graphon.enums import WorkflowType
 from libs.archive_storage import (
     ArchiveStorage,
     ArchiveStorageNotConfiguredError,
diff --git a/api/services/tools/api_tools_manage_service.py b/api/services/tools/api_tools_manage_service.py
index 5ff2c21749..3bfa221528 100644
--- a/api/services/tools/api_tools_manage_service.py
+++ b/api/services/tools/api_tools_manage_service.py
@@ -2,9 +2,9 @@ import json
 import logging
 from typing import Any, TypedDict, cast
 
+from graphon.model_runtime.utils.encoders import jsonable_encoder
 from httpx import get
 from sqlalchemy import select
-from sqlalchemy.orm import sessionmaker
 
 from core.entities.provider_entities import ProviderConfig
 from core.tools.__base.tool_runtime import ToolRuntime
@@ -16,13 +16,11 @@ from core.tools.entities.tool_entities import (
     ApiProviderAuthType,
     ApiProviderSchemaType,
 )
-from core.tools.errors import ApiToolProviderNotFoundError
 from core.tools.tool_label_manager import ToolLabelManager
 from core.tools.tool_manager import ToolManager
 from core.tools.utils.encryption import create_tool_provider_encrypter
 from core.tools.utils.parser import ApiBasedToolSchemaParser
 from extensions.ext_database import db
-from graphon.model_runtime.utils.encoders import jsonable_encoder
 from models.tools import ApiToolProvider
 from services.tools.tools_transform_service import ToolTransformService
 
@@ -118,85 +116,71 @@ class ApiToolManageService:
         privacy_policy: str,
         custom_disclaimer: str,
         labels: list[str],
-    ) -> dict[str, Any]:
+    ):
         """
-        Create a new API tool provider.
-
-        :param user_id: The ID of the user creating the provider.
-        :param tenant_id: The ID of the workspace/tenant.
-        :param provider_name: The name of the API tool provider.
-        :param icon: The icon configuration for the provider.
-        :param credentials: The credentials for the provider.
-        :param schema_type: The type of schema (e.g., OpenAPI).
-        :param schema: The raw schema string.
-        :param privacy_policy: The privacy policy URL or text.
-        :param custom_disclaimer: Custom disclaimer text.
-        :param labels: A list of labels for the provider.
-        :return: A dictionary indicating the result status.
+        create api tool provider
         """
-
         provider_name = provider_name.strip()
 
         # check if the provider exists
-        # Create new session with automatic transaction management
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as _session:
-            provider: ApiToolProvider | None = _session.scalar(
-                select(ApiToolProvider)
-                .where(
-                    ApiToolProvider.tenant_id == tenant_id,
-                    ApiToolProvider.name == provider_name,
-                )
-                .limit(1)
+        provider = db.session.scalar(
+            select(ApiToolProvider)
+            .where(
+                ApiToolProvider.tenant_id == tenant_id,
+                ApiToolProvider.name == provider_name,
             )
+            .limit(1)
+        )
 
-            if provider is not None:
-                raise ValueError(f"provider {provider_name} already exists")
+        if provider is not None:
+            raise ValueError(f"provider {provider_name} already exists")
 
-            # parse openapi to tool bundle
-            extra_info: dict[str, str] = {}
-            # extra info like description will be set here
-            tool_bundles, schema_type = ApiToolManageService.convert_schema_to_tool_bundles(schema, extra_info)
+        # parse openapi to tool bundle
+        extra_info: dict[str, str] = {}
+        # extra info like description will be set here
+        tool_bundles, schema_type = ApiToolManageService.convert_schema_to_tool_bundles(schema, extra_info)
 
-            if len(tool_bundles) > 100:
-                raise ValueError("the number of apis should be less than 100")
+        if len(tool_bundles) > 100:
+            raise ValueError("the number of apis should be less than 100")
 
-            # create API tool provider
-            api_tool_provider = ApiToolProvider(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                name=provider_name,
-                icon=json.dumps(icon),
-                schema=schema,
-                description=extra_info.get("description", ""),
-                schema_type_str=schema_type,
-                tools_str=json.dumps(jsonable_encoder(tool_bundles)),
-                credentials_str="{}",
-                privacy_policy=privacy_policy,
-                custom_disclaimer=custom_disclaimer,
-            )
+        # create db provider
+        db_provider = ApiToolProvider(
+            tenant_id=tenant_id,
+            user_id=user_id,
+            name=provider_name,
+            icon=json.dumps(icon),
+            schema=schema,
+            description=extra_info.get("description", ""),
+            schema_type_str=schema_type,
+            tools_str=json.dumps(jsonable_encoder(tool_bundles)),
+            credentials_str="{}",
+            privacy_policy=privacy_policy,
+            custom_disclaimer=custom_disclaimer,
+        )
 
-            if "auth_type" not in credentials:
-                raise ValueError("auth_type is required")
+        if "auth_type" not in credentials:
+            raise ValueError("auth_type is required")
 
-            # get auth type, none or api key
-            auth_type = ApiProviderAuthType.value_of(credentials["auth_type"])
+        # get auth type, none or api key
+        auth_type = ApiProviderAuthType.value_of(credentials["auth_type"])
 
-            # create provider entity
-            provider_controller = ApiToolProviderController.from_db(api_tool_provider, auth_type)
-            # load tools into provider entity
-            provider_controller.load_bundled_tools(tool_bundles)
+        # create provider entity
+        provider_controller = ApiToolProviderController.from_db(db_provider, auth_type)
+        # load tools into provider entity
+        provider_controller.load_bundled_tools(tool_bundles)
 
-            # encrypt credentials
-            encrypter, _ = create_tool_provider_encrypter(
-                tenant_id=tenant_id,
-                controller=provider_controller,
-            )
-            api_tool_provider.credentials_str = json.dumps(encrypter.encrypt(credentials))
+        # encrypt credentials
+        encrypter, _ = create_tool_provider_encrypter(
+            tenant_id=tenant_id,
+            controller=provider_controller,
+        )
+        db_provider.credentials_str = json.dumps(encrypter.encrypt(credentials))
 
-            _session.add(api_tool_provider)
+        db.session.add(db_provider)
+        db.session.commit()
 
-            # update labels
-            ToolLabelManager.update_tool_labels(provider_controller, labels, _session)
+        # update labels
+        ToolLabelManager.update_tool_labels(provider_controller, labels)
 
         return {"result": "success"}
 
@@ -228,25 +212,16 @@ class ApiToolManageService:
     @staticmethod
     def list_api_tool_provider_tools(user_id: str, tenant_id: str, provider_name: str) -> list[ToolApiEntity]:
         """
-        List tools provided by a specific API tool provider.
-
-        :param user_id: The ID of the user requesting the list.
-        :param tenant_id: The ID of the workspace/tenant.
-        :param provider_name: The name of the API tool provider.
-        :return: A list of ToolApiEntity objects.
+        list api tool provider tools
         """
-
-        # create new session with automatic transaction management
-        provider: ApiToolProvider | None = None
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as _session:
-            provider = _session.scalar(
-                select(ApiToolProvider)
-                .where(
-                    ApiToolProvider.tenant_id == tenant_id,
-                    ApiToolProvider.name == provider_name,
-                )
-                .limit(1)
+        provider: ApiToolProvider | None = db.session.scalar(
+            select(ApiToolProvider)
+            .where(
+                ApiToolProvider.tenant_id == tenant_id,
+                ApiToolProvider.name == provider_name,
             )
+            .limit(1)
+        )
 
         if provider is None:
             raise ValueError(f"you have not added provider {provider_name}")
@@ -276,133 +251,103 @@ class ApiToolManageService:
         privacy_policy: str | None,
         custom_disclaimer: str,
         labels: list[str],
-    ) -> dict[str, Any]:
+    ):
         """
-        Update an existing API tool provider.
-
-        :param user_id: The ID of the user updating the provider.
-        :param tenant_id: The ID of the workspace/tenant.
-        :param provider_name: The new name of the API tool provider.
-        :param original_provider: The original name of the API tool provider.
-        :param icon: The icon configuration for the provider.
-        :param credentials: The credentials for the provider.
-        :param _schema_type: The type of schema (e.g., OpenAPI).
-        :param schema: The raw schema string.
-        :param privacy_policy: The privacy policy URL or text.
-        :param custom_disclaimer: Custom disclaimer text.
-        :param labels: A list of labels for the provider.
-        :return: A dictionary indicating the result status.
+        update api tool provider
         """
-
         provider_name = provider_name.strip()
 
         # check if the provider exists
-        # create new session with automatic transaction management
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as _session:
-            provider: ApiToolProvider | None = _session.scalar(
-                select(ApiToolProvider)
-                .where(
-                    ApiToolProvider.tenant_id == tenant_id,
-                    ApiToolProvider.name == original_provider,
-                )
-                .limit(1)
+        provider = db.session.scalar(
+            select(ApiToolProvider)
+            .where(
+                ApiToolProvider.tenant_id == tenant_id,
+                ApiToolProvider.name == original_provider,
             )
+            .limit(1)
+        )
 
-            if provider is None:
-                raise ApiToolProviderNotFoundError(provider_name=original_provider, tenant_id=tenant_id)
+        if provider is None:
+            raise ValueError(f"api provider {provider_name} does not exists")
+        # parse openapi to tool bundle
+        extra_info: dict[str, str] = {}
+        # extra info like description will be set here
+        tool_bundles, schema_type = ApiToolManageService.convert_schema_to_tool_bundles(schema, extra_info)
 
-            # parse openapi to tool bundle
-            extra_info: dict[str, str] = {}
-            # extra info like description will be set here
-            tool_bundles, schema_type = ApiToolManageService.convert_schema_to_tool_bundles(schema, extra_info)
+        # update db provider
+        provider.name = provider_name
+        provider.icon = json.dumps(icon)
+        provider.schema = schema
+        provider.description = extra_info.get("description", "")
+        provider.schema_type_str = schema_type
+        provider.tools_str = json.dumps(jsonable_encoder(tool_bundles))
+        provider.privacy_policy = privacy_policy
+        provider.custom_disclaimer = custom_disclaimer
 
-            # update db provider
-            provider.name = provider_name
-            provider.icon = json.dumps(icon)
-            provider.schema = schema
-            provider.description = extra_info.get("description", "")
-            provider.schema_type_str = schema_type
-            provider.tools_str = json.dumps(jsonable_encoder(tool_bundles))
-            provider.privacy_policy = privacy_policy
-            provider.custom_disclaimer = custom_disclaimer
+        if "auth_type" not in credentials:
+            raise ValueError("auth_type is required")
 
-            if "auth_type" not in credentials:
-                raise ValueError("auth_type is required")
+        # get auth type, none or api key
+        auth_type = ApiProviderAuthType.value_of(credentials["auth_type"])
 
-            # get auth type, none or api key
-            auth_type = ApiProviderAuthType.value_of(credentials["auth_type"])
+        # create provider entity
+        provider_controller = ApiToolProviderController.from_db(provider, auth_type)
+        # load tools into provider entity
+        provider_controller.load_bundled_tools(tool_bundles)
 
-            # create provider entity
-            provider_controller = ApiToolProviderController.from_db(provider, auth_type)
-            # load tools into provider entity
-            provider_controller.load_bundled_tools(tool_bundles)
+        # get original credentials if exists
+        encrypter, cache = create_tool_provider_encrypter(
+            tenant_id=tenant_id,
+            controller=provider_controller,
+        )
 
-            # get original credentials if exists
-            encrypter, cache = create_tool_provider_encrypter(
-                tenant_id=tenant_id,
-                controller=provider_controller,
-            )
+        original_credentials = encrypter.decrypt(provider.credentials)
+        masked_credentials = encrypter.mask_plugin_credentials(original_credentials)
+        # check if the credential has changed, save the original credential
+        for name, value in credentials.items():
+            if name in masked_credentials and value == masked_credentials[name]:
+                credentials[name] = original_credentials[name]
 
-            original_credentials = encrypter.decrypt(provider.credentials)
-            masked_credentials = encrypter.mask_plugin_credentials(original_credentials)
+        credentials = dict(encrypter.encrypt(credentials))
+        provider.credentials_str = json.dumps(credentials)
 
-            # check if the credential has changed, save the original credential
-            for name, value in credentials.items():
-                if name in masked_credentials and value == masked_credentials[name]:
-                    credentials[name] = original_credentials[name]
-
-            credentials = dict(encrypter.encrypt(credentials))
-            provider.credentials_str = json.dumps(credentials)
-
-            _session.add(provider)
-
-            # update labels
-            ToolLabelManager.update_tool_labels(provider_controller, labels, _session)
+        db.session.add(provider)
+        db.session.commit()
 
         # delete cache
         cache.delete()
 
+        # update labels
+        ToolLabelManager.update_tool_labels(provider_controller, labels)
+
         return {"result": "success"}
 
     @staticmethod
     def delete_api_tool_provider(user_id: str, tenant_id: str, provider_name: str):
         """
-        Delete an API tool provider.
-
-        :param user_id: The ID of the user performing the deletion operation.
-        :param tenant_id: The ID of the workspace/tenant where the provider belongs.
-        :param provider_name: The unique name of the API tool provider to be deleted.
-        :raises ValueError: If the specified provider does not exist in the tenant.
-        :return: A dictionary indicating the result status.
+        delete tool provider
         """
-
-        # create new session with automatic transaction management
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as _session:
-            provider: ApiToolProvider | None = _session.scalar(
-                select(ApiToolProvider)
-                .where(
-                    ApiToolProvider.tenant_id == tenant_id,
-                    ApiToolProvider.name == provider_name,
-                )
-                .limit(1)
+        provider = db.session.scalar(
+            select(ApiToolProvider)
+            .where(
+                ApiToolProvider.tenant_id == tenant_id,
+                ApiToolProvider.name == provider_name,
             )
+            .limit(1)
+        )
 
-            if provider is None:
-                raise ValueError(f"you have not added provider {provider_name}")
+        if provider is None:
+            raise ValueError(f"you have not added provider {provider_name}")
 
-            _session.delete(provider)
+        db.session.delete(provider)
+        db.session.commit()
 
         return {"result": "success"}
 
     @staticmethod
-    def get_api_tool_provider(user_id: str, tenant_id: str, provider: str) -> dict[str, Any]:
+    def get_api_tool_provider(user_id: str, tenant_id: str, provider: str):
         """
-        Get API tool provider details.
-
-        :param user_id: The ID of the user requesting the provider.
-        :param tenant_id: The ID of the workspace/tenant.
-        :param provider: The name of the API tool provider.
-        :return: A dictionary containing the provider details.
+        get api tool provider
         """
         return ToolManager.user_get_api_provider(provider=provider, tenant_id=tenant_id)
 
@@ -415,20 +360,10 @@ class ApiToolManageService:
         parameters: dict[str, Any],
         schema_type: ApiProviderSchemaType,
         schema: str,
-    ) -> dict[str, Any]:
+    ):
         """
-        Test an API tool before adding the API tool provider.
-
-        :param tenant_id: The ID of the workspace/tenant.
-        :param provider_name: The name of the API tool provider.
-        :param tool_name: The name of the specific tool to test.
-        :param credentials: The credentials for the provider.
-        :param parameters: The parameters to pass to the tool.
-        :param schema_type: The type of schema (e.g., OpenAPI).
-        :param schema: The raw schema string.
-        :return: A dictionary containing the result or error message.
+        test api tool before adding api tool provider
         """
-
         if schema_type not in [member.value for member in ApiProviderSchemaType]:
             raise ValueError(f"invalid schema type {schema_type}")
 
@@ -442,21 +377,18 @@ class ApiToolManageService:
         if tool_bundle is None:
             raise ValueError(f"invalid tool name {tool_name}")
 
-        # create new session with automatic transaction management to get the provider
-        provider: ApiToolProvider | None = None
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as _session:
-            provider = _session.scalar(
-                select(ApiToolProvider)
-                .where(
-                    ApiToolProvider.tenant_id == tenant_id,
-                    ApiToolProvider.name == provider_name,
-                )
-                .limit(1)
+        db_provider = db.session.scalar(
+            select(ApiToolProvider)
+            .where(
+                ApiToolProvider.tenant_id == tenant_id,
+                ApiToolProvider.name == provider_name,
             )
+            .limit(1)
+        )
 
-        if provider is None:
+        if not db_provider:
             # create a fake db provider
-            provider = ApiToolProvider(
+            db_provider = ApiToolProvider(
                 tenant_id="",
                 user_id="",
                 name="",
@@ -475,12 +407,12 @@ class ApiToolManageService:
         auth_type = ApiProviderAuthType.value_of(credentials["auth_type"])
 
         # create provider entity
-        provider_controller = ApiToolProviderController.from_db(provider, auth_type)
+        provider_controller = ApiToolProviderController.from_db(db_provider, auth_type)
         # load tools into provider entity
         provider_controller.load_bundled_tools(tool_bundles)
 
         # decrypt credentials
-        if provider.id:
+        if db_provider.id:
             encrypter, _ = create_tool_provider_encrypter(
                 tenant_id=tenant_id,
                 controller=provider_controller,
@@ -511,21 +443,14 @@ class ApiToolManageService:
     @staticmethod
     def list_api_tools(tenant_id: str) -> list[ToolProviderApiEntity]:
         """
-        List all API tools for a specific tenant.
-
-        :param tenant_id: The ID of the workspace/tenant.
-        :return: A list of ToolProviderApiEntity objects.
+        list api tools
         """
         # get all api providers
-        # create new session with automatic transaction management
-        providers: list[ApiToolProvider] = []
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as _session:
-            providers = list(
-                _session.scalars(select(ApiToolProvider).where(ApiToolProvider.tenant_id == tenant_id)).all()
-            )
+        db_providers = db.session.scalars(select(ApiToolProvider).where(ApiToolProvider.tenant_id == tenant_id)).all()
 
         result: list[ToolProviderApiEntity] = []
-        for provider in providers:
+
+        for provider in db_providers:
             # convert provider controller to user provider
             provider_controller = ToolTransformService.api_provider_to_controller(db_provider=provider)
             labels = ToolLabelManager.get_tool_labels(provider_controller)
diff --git a/api/services/trigger/trigger_service.py b/api/services/trigger/trigger_service.py
index 911331e357..5a5d13b96d 100644
--- a/api/services/trigger/trigger_service.py
+++ b/api/services/trigger/trigger_service.py
@@ -5,6 +5,7 @@ from collections.abc import Mapping
 from typing import Any
 
 from flask import Request, Response
+from graphon.entities.graph_config import NodeConfigDict
 from pydantic import BaseModel
 from sqlalchemy import select
 from sqlalchemy.orm import sessionmaker
@@ -20,7 +21,6 @@ from core.trigger.utils.encryption import create_trigger_provider_encrypter_for_
 from core.workflow.nodes.trigger_plugin.entities import TriggerEventNodeData
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from graphon.entities.graph_config import NodeConfigDict
 from models.model import App
 from models.provider_ids import TriggerProviderID
 from models.trigger import TriggerSubscription, WorkflowPluginTrigger
diff --git a/api/services/variable_truncator.py b/api/services/variable_truncator.py
index c96050ce13..4d58a9cf12 100644
--- a/api/services/variable_truncator.py
+++ b/api/services/variable_truncator.py
@@ -5,7 +5,6 @@ from abc import ABC, abstractmethod
 from collections.abc import Mapping
 from typing import Any, overload
 
-from configs import dify_config
 from graphon.file import File
 from graphon.nodes.variable_assigner.common.helpers import UpdatedVariable
 from graphon.variables.segments import (
@@ -22,6 +21,8 @@ from graphon.variables.segments import (
 )
 from graphon.variables.utils import dumps_with_segments
 
+from configs import dify_config
+
 _MAX_DEPTH = 100
 
 
diff --git a/api/services/vector_service.py b/api/services/vector_service.py
index 58193d75a9..9827c8dfbc 100644
--- a/api/services/vector_service.py
+++ b/api/services/vector_service.py
@@ -1,5 +1,6 @@
 import logging
 
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy import delete, select
 
 from core.model_manager import ModelInstance, ModelManager
@@ -12,7 +13,6 @@ from core.rag.index_processor.index_processor_base import BaseIndexProcessor
 from core.rag.index_processor.index_processor_factory import IndexProcessorFactory
 from core.rag.models.document import AttachmentDocument, Document
 from extensions.ext_database import db
-from graphon.model_runtime.entities.model_entities import ModelType
 from models import UploadFile
 from models.dataset import ChildChunk, Dataset, DatasetProcessRule, DocumentSegment, SegmentAttachmentBinding
 from models.dataset import Document as DatasetDocument
diff --git a/api/services/workflow/workflow_converter.py b/api/services/workflow/workflow_converter.py
index 5dedb9e372..1582bcd46c 100644
--- a/api/services/workflow/workflow_converter.py
+++ b/api/services/workflow/workflow_converter.py
@@ -1,6 +1,11 @@
 import json
 from typing import Any, TypedDict
 
+from graphon.file import FileUploadConfig
+from graphon.model_runtime.entities.llm_entities import LLMMode
+from graphon.model_runtime.utils.encoders import jsonable_encoder
+from graphon.nodes import BuiltinNodeTypes
+from graphon.variables.input_entities import VariableEntity
 from sqlalchemy import select
 
 from core.app.app_config.entities import (
@@ -19,11 +24,6 @@ from core.prompt.simple_prompt_transform import SimplePromptTransform
 from core.prompt.utils.prompt_template_parser import PromptTemplateParser
 from events.app_event import app_was_created
 from extensions.ext_database import db
-from graphon.file import FileUploadConfig
-from graphon.model_runtime.entities.llm_entities import LLMMode
-from graphon.model_runtime.utils.encoders import jsonable_encoder
-from graphon.nodes import BuiltinNodeTypes
-from graphon.variables.input_entities import VariableEntity
 from models import Account
 from models.api_based_extension import APIBasedExtension, APIBasedExtensionPoint
 from models.model import App, AppMode, AppModelConfig, IconType
diff --git a/api/services/workflow_draft_variable_service.py b/api/services/workflow_draft_variable_service.py
index 8afb565955..fae5dea3cb 100644
--- a/api/services/workflow_draft_variable_service.py
+++ b/api/services/workflow_draft_variable_service.py
@@ -7,6 +7,19 @@ from datetime import datetime
 from enum import StrEnum
 from typing import Any, ClassVar, NotRequired, TypedDict
 
+from graphon.enums import NodeType
+from graphon.file import File
+from graphon.nodes import BuiltinNodeTypes
+from graphon.nodes.variable_assigner.common.helpers import get_updated_variables
+from graphon.variable_loader import VariableLoader
+from graphon.variables import Segment, StringSegment, VariableBase
+from graphon.variables.consts import SELECTORS_LENGTH
+from graphon.variables.segments import (
+    ArrayFileSegment,
+    FileSegment,
+)
+from graphon.variables.types import SegmentType
+from graphon.variables.utils import dumps_with_segments
 from sqlalchemy import Engine, delete, orm, select
 from sqlalchemy.dialects.mysql import insert as mysql_insert
 from sqlalchemy.dialects.postgresql import insert as pg_insert
@@ -27,19 +40,6 @@ from core.workflow.variable_prefixes import (
 from extensions.ext_storage import storage
 from factories.file_factory import StorageKeyLoader
 from factories.variable_factory import build_segment, segment_to_variable
-from graphon.enums import NodeType
-from graphon.file import File
-from graphon.nodes import BuiltinNodeTypes
-from graphon.nodes.variable_assigner.common.helpers import get_updated_variables
-from graphon.variable_loader import VariableLoader
-from graphon.variables import Segment, StringSegment, VariableBase
-from graphon.variables.consts import SELECTORS_LENGTH
-from graphon.variables.segments import (
-    ArrayFileSegment,
-    FileSegment,
-)
-from graphon.variables.types import SegmentType
-from graphon.variables.utils import dumps_with_segments
 from libs.datetime_utils import naive_utc_now
 from libs.uuid_utils import uuidv7
 from models import Account, App, Conversation
diff --git a/api/services/workflow_event_snapshot_service.py b/api/services/workflow_event_snapshot_service.py
index 5fca444723..601e9261fc 100644
--- a/api/services/workflow_event_snapshot_service.py
+++ b/api/services/workflow_event_snapshot_service.py
@@ -9,6 +9,10 @@ from collections.abc import Generator, Mapping, Sequence
 from dataclasses import dataclass
 from typing import Any
 
+from graphon.entities import WorkflowStartReason
+from graphon.enums import WorkflowExecutionStatus, WorkflowNodeExecutionStatus
+from graphon.runtime import GraphRuntimeState
+from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from sqlalchemy import desc, select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -22,10 +26,6 @@ from core.app.entities.task_entities import (
     WorkflowStartStreamResponse,
 )
 from core.app.layers.pause_state_persist_layer import WorkflowResumptionContext
-from graphon.entities import WorkflowStartReason
-from graphon.enums import WorkflowExecutionStatus, WorkflowNodeExecutionStatus
-from graphon.runtime import GraphRuntimeState
-from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from models.model import AppMode, Message
 from models.workflow import WorkflowNodeExecutionTriggeredFrom, WorkflowRun
 from repositories.api_workflow_node_execution_repository import WorkflowNodeExecutionSnapshot
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index 6786623d7a..aab41efe50 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -5,7 +5,32 @@ import uuid
 from collections.abc import Callable, Generator, Mapping, Sequence
 from typing import Any, cast
 
-from sqlalchemy import exists, select
+from graphon.entities import WorkflowNodeExecution
+from graphon.entities.graph_config import NodeConfigDict
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.enums import (
+    ErrorStrategy,
+    NodeType,
+    WorkflowNodeExecutionMetadataKey,
+    WorkflowNodeExecutionStatus,
+)
+from graphon.errors import WorkflowNodeRunFailedError
+from graphon.file import File
+from graphon.graph_events import GraphNodeEventBase, NodeRunFailedEvent, NodeRunSucceededEvent
+from graphon.node_events import NodeRunResult
+from graphon.nodes import BuiltinNodeTypes
+from graphon.nodes.base.node import Node
+from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, build_http_request_config
+from graphon.nodes.human_input.entities import HumanInputNodeData, validate_human_input_submission
+from graphon.nodes.human_input.enums import HumanInputFormKind
+from graphon.nodes.human_input.human_input_node import HumanInputNode
+from graphon.nodes.start.entities import StartNodeData
+from graphon.runtime import GraphRuntimeState, VariablePool
+from graphon.variable_loader import load_into_variable_pool
+from graphon.variables import VariableBase
+from graphon.variables.input_entities import VariableEntityType
+from graphon.variables.variables import Variable
+from sqlalchemy import and_, exists, or_, select
 from sqlalchemy.orm import Session, sessionmaker
 
 from configs import dify_config
@@ -39,31 +64,6 @@ from events.app_event import app_draft_workflow_was_synced, app_published_workfl
 from extensions.ext_database import db
 from extensions.ext_storage import storage
 from factories.file_factory import build_from_mapping, build_from_mappings
-from graphon.entities import WorkflowNodeExecution
-from graphon.entities.graph_config import NodeConfigDict
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.enums import (
-    ErrorStrategy,
-    NodeType,
-    WorkflowNodeExecutionMetadataKey,
-    WorkflowNodeExecutionStatus,
-)
-from graphon.errors import WorkflowNodeRunFailedError
-from graphon.file import File
-from graphon.graph_events import GraphNodeEventBase, NodeRunFailedEvent, NodeRunSucceededEvent
-from graphon.node_events import NodeRunResult
-from graphon.nodes import BuiltinNodeTypes
-from graphon.nodes.base.node import Node
-from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, build_http_request_config
-from graphon.nodes.human_input.entities import HumanInputNodeData, validate_human_input_submission
-from graphon.nodes.human_input.enums import HumanInputFormKind
-from graphon.nodes.human_input.human_input_node import HumanInputNode
-from graphon.nodes.start.entities import StartNodeData
-from graphon.runtime import GraphRuntimeState, VariablePool
-from graphon.variable_loader import load_into_variable_pool
-from graphon.variables import VariableBase
-from graphon.variables.input_entities import VariableEntityType
-from graphon.variables.variables import Variable
 from libs.datetime_utils import naive_utc_now
 from libs.helper import escape_like_pattern
 from models import Account
@@ -1817,7 +1817,7 @@ def _setup_variable_pool(
         }
 
         # Only add chatflow-specific variables for chat-like workflow types.
-        if workflow.type not in {WorkflowType.WORKFLOW, WorkflowType.EVALUATION, WorkflowType.SNIPPET}:
+        if workflow.type not in {WorkflowType.WORKFLOW, WorkflowType.EVALUATION}:
             system_variable_values.update(
                 {
                     "query": query,
diff --git a/api/tasks/app_generate/workflow_execute_task.py b/api/tasks/app_generate/workflow_execute_task.py
index c22e7e9918..8f2f5f261e 100644
--- a/api/tasks/app_generate/workflow_execute_task.py
+++ b/api/tasks/app_generate/workflow_execute_task.py
@@ -7,6 +7,7 @@ from typing import Annotated, Any
 
 from celery import shared_task
 from flask import current_app, json
+from graphon.runtime import GraphRuntimeState
 from pydantic import BaseModel, Discriminator, Field, Tag
 from sqlalchemy import Engine, select
 from sqlalchemy.orm import Session, sessionmaker
@@ -22,7 +23,6 @@ from core.app.entities.app_invoke_entities import (
 from core.app.layers.pause_state_persist_layer import PauseStateLayerConfig, WorkflowResumptionContext
 from core.repositories import DifyCoreRepositoryFactory
 from extensions.ext_database import db
-from graphon.runtime import GraphRuntimeState
 from libs.flask_utils import set_login_user
 from models.account import Account
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
diff --git a/api/tasks/batch_create_segment_to_index_task.py b/api/tasks/batch_create_segment_to_index_task.py
index beb23d8354..4db551c73c 100644
--- a/api/tasks/batch_create_segment_to_index_task.py
+++ b/api/tasks/batch_create_segment_to_index_task.py
@@ -8,6 +8,7 @@ from typing import Any
 import click
 import pandas as pd
 from celery import shared_task
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy import func, select
 
 from core.db.session_factory import session_factory
@@ -15,7 +16,6 @@ from core.model_manager import ModelManager
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
 from extensions.ext_redis import redis_client
 from extensions.ext_storage import storage
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs import helper
 from libs.datetime_utils import naive_utc_now
 from models.dataset import Dataset, Document, DocumentSegment
diff --git a/api/tasks/human_input_timeout_tasks.py b/api/tasks/human_input_timeout_tasks.py
index fd743205a1..ca73b4d374 100644
--- a/api/tasks/human_input_timeout_tasks.py
+++ b/api/tasks/human_input_timeout_tasks.py
@@ -2,6 +2,8 @@ import logging
 from datetime import timedelta
 
 from celery import shared_task
+from graphon.enums import WorkflowExecutionStatus
+from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from sqlalchemy import or_, select
 from sqlalchemy.orm import sessionmaker
 
@@ -9,8 +11,6 @@ from configs import dify_config
 from core.repositories.human_input_repository import HumanInputFormSubmissionRepository
 from extensions.ext_database import db
 from extensions.ext_storage import storage
-from graphon.enums import WorkflowExecutionStatus
-from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from libs.datetime_utils import ensure_naive_utc, naive_utc_now
 from models.human_input import HumanInputForm
 from models.workflow import WorkflowPause, WorkflowRun
diff --git a/api/tasks/mail_human_input_delivery_task.py b/api/tasks/mail_human_input_delivery_task.py
index f8ae3f4b6e..a316eec7b9 100644
--- a/api/tasks/mail_human_input_delivery_task.py
+++ b/api/tasks/mail_human_input_delivery_task.py
@@ -6,6 +6,7 @@ from typing import Any
 
 import click
 from celery import shared_task
+from graphon.runtime import GraphRuntimeState, VariablePool
 from sqlalchemy import select
 from sqlalchemy.orm import Session, sessionmaker
 
@@ -14,7 +15,6 @@ from core.app.layers.pause_state_persist_layer import WorkflowResumptionContext
 from core.workflow.human_input_compat import EmailDeliveryConfig, EmailDeliveryMethod
 from extensions.ext_database import db
 from extensions.ext_mail import mail
-from graphon.runtime import GraphRuntimeState, VariablePool
 from models.human_input import (
     DeliveryMethodType,
     HumanInputDelivery,
diff --git a/api/tasks/trigger_processing_tasks.py b/api/tasks/trigger_processing_tasks.py
index d9df2733fd..b9f382eccf 100644
--- a/api/tasks/trigger_processing_tasks.py
+++ b/api/tasks/trigger_processing_tasks.py
@@ -12,6 +12,7 @@ from datetime import UTC, datetime
 from typing import Any
 
 from celery import shared_task
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy import func, select
 from sqlalchemy.orm import Session
 
@@ -28,8 +29,6 @@ from core.trigger.provider import PluginTriggerProviderController
 from core.trigger.trigger_manager import TriggerManager
 from core.workflow.nodes.trigger_plugin.entities import TriggerEventNodeData
 from enums.quota_type import QuotaType
-from services.quota_service import unlimited
-from graphon.enums import WorkflowExecutionStatus
 from models.enums import (
     AppTriggerType,
     CreatorUserRole,
@@ -43,6 +42,7 @@ from models.workflow import Workflow, WorkflowAppLog, WorkflowAppLogCreatedFrom,
 from services.async_workflow_service import AsyncWorkflowService
 from services.end_user_service import EndUserService
 from services.errors.app import QuotaExceededError
+from services.quota_service import QuotaService, unlimited
 from services.trigger.app_trigger_service import AppTriggerService
 from services.trigger.trigger_provider_service import TriggerProviderService
 from services.trigger.trigger_request_service import TriggerHttpRequestCachingService
@@ -299,10 +299,10 @@ def dispatch_triggered_workflow(
                 icon_dark_filename=trigger_entity.identity.icon_dark or "",
             )
 
-            # consume quota before invoking trigger
+            # reserve quota before invoking trigger
             quota_charge = unlimited()
             try:
-                quota_charge = QuotaType.TRIGGER.consume(subscription.tenant_id)
+                quota_charge = QuotaService.reserve(QuotaType.TRIGGER, subscription.tenant_id)
             except QuotaExceededError:
                 AppTriggerService.mark_tenant_triggers_rate_limited(subscription.tenant_id)
                 logger.info(
@@ -388,6 +388,7 @@ def dispatch_triggered_workflow(
                     raise ValueError(f"End user not found for app {plugin_trigger.app_id}")
 
                 AsyncWorkflowService.trigger_workflow_async(session=session, user=end_user, trigger_data=trigger_data)
+                quota_charge.commit()
                 dispatched_count += 1
                 logger.info(
                     "Triggered workflow for app %s with trigger event %s",
diff --git a/api/tasks/workflow_execution_tasks.py b/api/tasks/workflow_execution_tasks.py
index 5ca04fd7c2..b4f975f4da 100644
--- a/api/tasks/workflow_execution_tasks.py
+++ b/api/tasks/workflow_execution_tasks.py
@@ -10,11 +10,11 @@ import logging
 from typing import Any
 
 from celery import shared_task
+from graphon.entities import WorkflowExecution
+from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from sqlalchemy import select
 
 from core.db.session_factory import session_factory
-from graphon.entities import WorkflowExecution
-from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
 from models import CreatorUserRole, WorkflowRun
 from models.enums import WorkflowRunTriggeredFrom
 
diff --git a/api/tasks/workflow_node_execution_tasks.py b/api/tasks/workflow_node_execution_tasks.py
index 0d5475a56d..128cdd72e1 100644
--- a/api/tasks/workflow_node_execution_tasks.py
+++ b/api/tasks/workflow_node_execution_tasks.py
@@ -10,13 +10,13 @@ import logging
 from typing import Any
 
 from celery import shared_task
-from sqlalchemy import select
-
-from core.db.session_factory import session_factory
 from graphon.entities.workflow_node_execution import (
     WorkflowNodeExecution,
 )
 from graphon.workflow_type_encoder import WorkflowRuntimeTypeConverter
+from sqlalchemy import select
+
+from core.db.session_factory import session_factory
 from models import CreatorUserRole, WorkflowNodeExecutionModel
 from models.workflow import WorkflowNodeExecutionTriggeredFrom
 
diff --git a/api/tests/integration_tests/core/datasource/test_datasource_manager_integration.py b/api/tests/integration_tests/core/datasource/test_datasource_manager_integration.py
index a876b0c4aa..91245e879e 100644
--- a/api/tests/integration_tests/core/datasource/test_datasource_manager_integration.py
+++ b/api/tests/integration_tests/core/datasource/test_datasource_manager_integration.py
@@ -1,8 +1,9 @@
 from collections.abc import Generator
 
+from graphon.node_events import StreamCompletedEvent
+
 from core.datasource.datasource_manager import DatasourceManager
 from core.datasource.entities.datasource_entities import DatasourceMessage
-from graphon.node_events import StreamCompletedEvent
 
 
 def _gen_var_stream() -> Generator[DatasourceMessage, None, None]:
diff --git a/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py b/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py
index b5318aaa2b..3fdea10976 100644
--- a/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py
+++ b/api/tests/integration_tests/core/workflow/nodes/datasource/test_datasource_node_integration.py
@@ -1,8 +1,9 @@
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
-from core.workflow.nodes.datasource.datasource_node import DatasourceNode
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult, StreamCompletedEvent
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
+from core.workflow.nodes.datasource.datasource_node import DatasourceNode
+
 
 class _Seg:
     def __init__(self, v):
diff --git a/api/tests/integration_tests/model_runtime/__mock/plugin_model.py b/api/tests/integration_tests/model_runtime/__mock/plugin_model.py
index c4146d5ccd..ce04a158a8 100644
--- a/api/tests/integration_tests/model_runtime/__mock/plugin_model.py
+++ b/api/tests/integration_tests/model_runtime/__mock/plugin_model.py
@@ -4,9 +4,6 @@ from collections.abc import Generator, Sequence
 from decimal import Decimal
 from json import dumps
 
-from core.plugin.entities.plugin_daemon import PluginModelProviderEntity
-from core.plugin.impl.model import PluginModelClient
-
 # import monkeypatch
 from graphon.model_runtime.entities.common_entities import I18nObject
 from graphon.model_runtime.entities.llm_entities import (
@@ -26,6 +23,9 @@ from graphon.model_runtime.entities.model_entities import (
 )
 from graphon.model_runtime.entities.provider_entities import ConfigurateMethod, ProviderEntity
 
+from core.plugin.entities.plugin_daemon import PluginModelProviderEntity
+from core.plugin.impl.model import PluginModelClient
+
 
 class MockModelClass(PluginModelClient):
     def fetch_model_providers(self, tenant_id: str) -> Sequence[PluginModelProviderEntity]:
diff --git a/api/tests/integration_tests/services/test_workflow_draft_variable_service.py b/api/tests/integration_tests/services/test_workflow_draft_variable_service.py
index e130644338..c7bb90f019 100644
--- a/api/tests/integration_tests/services/test_workflow_draft_variable_service.py
+++ b/api/tests/integration_tests/services/test_workflow_draft_variable_service.py
@@ -3,6 +3,10 @@ import unittest
 import uuid
 
 import pytest
+from graphon.nodes import BuiltinNodeTypes
+from graphon.variables.segments import StringSegment
+from graphon.variables.types import SegmentType
+from graphon.variables.variables import StringVariable
 from sqlalchemy import delete, func, select
 from sqlalchemy.orm import Session
 
@@ -11,10 +15,6 @@ from extensions.ext_database import db
 from extensions.ext_storage import storage
 from extensions.storage.storage_type import StorageType
 from factories.variable_factory import build_segment
-from graphon.nodes import BuiltinNodeTypes
-from graphon.variables.segments import StringSegment
-from graphon.variables.types import SegmentType
-from graphon.variables.variables import StringVariable
 from libs import datetime_utils
 from models.enums import CreatorUserRole
 from models.model import UploadFile
diff --git a/api/tests/integration_tests/tasks/test_remove_app_and_related_data_task.py b/api/tests/integration_tests/tasks/test_remove_app_and_related_data_task.py
index 4f444598b1..3dfedd811d 100644
--- a/api/tests/integration_tests/tasks/test_remove_app_and_related_data_task.py
+++ b/api/tests/integration_tests/tasks/test_remove_app_and_related_data_task.py
@@ -2,11 +2,11 @@ import uuid
 from unittest.mock import patch
 
 import pytest
+from graphon.variables.segments import StringSegment
 from sqlalchemy import delete, func, select
 
 from core.db.session_factory import session_factory
 from extensions.storage.storage_type import StorageType
-from graphon.variables.segments import StringSegment
 from models import Tenant
 from models.enums import CreatorUserRole
 from models.model import App, UploadFile
@@ -209,6 +209,7 @@ class TestDeleteDraftVariablesWithOffloadIntegration:
     def setup_offload_test_data(self, app_and_tenant):
         tenant, app = app_and_tenant
         from graphon.variables.types import SegmentType
+
         from libs.datetime_utils import naive_utc_now
 
         with session_factory.create_session() as session:
@@ -452,6 +453,7 @@ class TestDeleteDraftVariablesSessionCommit:
     def setup_offload_test_data(self, app_and_tenant):
         """Create test data with offload files for session commit tests."""
         from graphon.variables.types import SegmentType
+
         from libs.datetime_utils import naive_utc_now
 
         tenant, app = app_and_tenant
diff --git a/api/tests/integration_tests/workflow/nodes/__mock/model.py b/api/tests/integration_tests/workflow/nodes/__mock/model.py
index a9a2617bae..c0143faa85 100644
--- a/api/tests/integration_tests/workflow/nodes/__mock/model.py
+++ b/api/tests/integration_tests/workflow/nodes/__mock/model.py
@@ -1,11 +1,12 @@
 from unittest.mock import MagicMock
 
+from graphon.model_runtime.entities.model_entities import ModelType
+
 from core.app.entities.app_invoke_entities import ModelConfigWithCredentialsEntity
 from core.entities.provider_configuration import ProviderConfiguration, ProviderModelBundle
 from core.entities.provider_entities import CustomConfiguration, CustomProviderConfiguration, SystemConfiguration
 from core.model_manager import ModelInstance
 from core.plugin.impl.model_runtime_factory import create_plugin_model_provider_factory
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.provider import ProviderType
 
 
diff --git a/api/tests/integration_tests/workflow/nodes/test_code.py b/api/tests/integration_tests/workflow/nodes/test_code.py
index e3476c292b..4f41396c22 100644
--- a/api/tests/integration_tests/workflow/nodes/test_code.py
+++ b/api/tests/integration_tests/workflow/nodes/test_code.py
@@ -2,17 +2,17 @@ import time
 import uuid
 
 import pytest
-
-from configs import dify_config
-from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
-from core.workflow.node_factory import DifyNodeFactory
-from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.graph import Graph
 from graphon.node_events import NodeRunResult
 from graphon.nodes.code.code_node import CodeNode
 from graphon.nodes.code.limits import CodeNodeLimits
 from graphon.runtime import GraphRuntimeState, VariablePool
+
+from configs import dify_config
+from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
+from core.workflow.node_factory import DifyNodeFactory
+from core.workflow.system_variables import build_system_variables
 from tests.workflow_test_utils import build_test_graph_init_params
 
 pytest_plugins = ("tests.integration_tests.workflow.nodes.__mock.code_executor",)
diff --git a/api/tests/integration_tests/workflow/nodes/test_http.py b/api/tests/integration_tests/workflow/nodes/test_http.py
index aa6cf1e021..b1f937e738 100644
--- a/api/tests/integration_tests/workflow/nodes/test_http.py
+++ b/api/tests/integration_tests/workflow/nodes/test_http.py
@@ -3,6 +3,11 @@ import uuid
 from urllib.parse import urlencode
 
 import pytest
+from graphon.enums import WorkflowNodeExecutionStatus
+from graphon.file.file_manager import file_manager
+from graphon.graph import Graph
+from graphon.nodes.http_request import HttpRequestNode, HttpRequestNodeConfig
+from graphon.runtime import GraphRuntimeState, VariablePool
 
 from configs import dify_config
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
@@ -11,11 +16,6 @@ from core.tools.tool_file_manager import ToolFileManager
 from core.workflow.node_factory import DifyNodeFactory
 from core.workflow.node_runtime import DifyFileReferenceFactory
 from core.workflow.system_variables import build_system_variables
-from graphon.enums import WorkflowNodeExecutionStatus
-from graphon.file.file_manager import file_manager
-from graphon.graph import Graph
-from graphon.nodes.http_request import HttpRequestNode, HttpRequestNodeConfig
-from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
 
 pytest_plugins = ("tests.integration_tests.workflow.nodes.__mock.http",)
@@ -192,7 +192,6 @@ def test_custom_authorization_header(setup_http_mock):
 @pytest.mark.parametrize("setup_http_mock", [["none"]], indirect=True)
 def test_custom_auth_with_empty_api_key_raises_error(setup_http_mock):
     """Test: In custom authentication mode, when the api_key is empty, AuthorizationConfigError should be raised."""
-    from core.workflow.system_variables import build_system_variables
     from graphon.enums import BuiltinNodeTypes
     from graphon.nodes.http_request.entities import (
         HttpRequestNodeAuthorization,
@@ -203,6 +202,8 @@ def test_custom_auth_with_empty_api_key_raises_error(setup_http_mock):
     from graphon.nodes.http_request.executor import Executor
     from graphon.runtime import VariablePool
 
+    from core.workflow.system_variables import build_system_variables
+
     # Create variable pool
     variable_pool = VariablePool(
         system_variables=build_system_variables(user_id="test", files=[]),
diff --git a/api/tests/integration_tests/workflow/nodes/test_llm.py b/api/tests/integration_tests/workflow/nodes/test_llm.py
index fa5d63cfbf..f0f3fcead1 100644
--- a/api/tests/integration_tests/workflow/nodes/test_llm.py
+++ b/api/tests/integration_tests/workflow/nodes/test_llm.py
@@ -4,11 +4,6 @@ import uuid
 from collections.abc import Generator
 from unittest.mock import MagicMock, patch
 
-from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
-from core.llm_generator.output_parser.structured_output import _parse_structured_output
-from core.model_manager import ModelInstance
-from core.workflow.system_variables import build_system_variables
-from extensions.ext_database import db
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.node_events import StreamCompletedEvent
 from graphon.nodes.llm.file_saver import LLMFileSaver
@@ -17,6 +12,12 @@ from graphon.nodes.llm.protocols import CredentialsProvider, ModelFactory
 from graphon.nodes.llm.runtime_protocols import PromptMessageSerializerProtocol
 from graphon.nodes.protocols import HttpClientProtocol
 from graphon.runtime import GraphRuntimeState, VariablePool
+
+from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
+from core.llm_generator.output_parser.structured_output import _parse_structured_output
+from core.model_manager import ModelInstance
+from core.workflow.system_variables import build_system_variables
+from extensions.ext_database import db
 from tests.workflow_test_utils import build_test_graph_init_params
 
 """FOR MOCK FIXTURES, DO NOT REMOVE"""
diff --git a/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py b/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
index 52886855b8..fe512c2585 100644
--- a/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
+++ b/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
@@ -3,16 +3,17 @@ import time
 import uuid
 from unittest.mock import MagicMock
 
+from graphon.enums import WorkflowNodeExecutionStatus
+from graphon.model_runtime.entities import AssistantPromptMessage, UserPromptMessage
+from graphon.nodes.llm.protocols import CredentialsProvider, ModelFactory
+from graphon.nodes.parameter_extractor.parameter_extractor_node import ParameterExtractorNode
+from graphon.runtime import GraphRuntimeState, VariablePool
+
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from core.model_manager import ModelInstance
 from core.workflow.node_runtime import DifyPromptMessageSerializer
 from core.workflow.system_variables import build_system_variables
 from extensions.ext_database import db
-from graphon.enums import WorkflowNodeExecutionStatus
-from graphon.model_runtime.entities import AssistantPromptMessage, UserPromptMessage
-from graphon.nodes.llm.protocols import CredentialsProvider, ModelFactory
-from graphon.nodes.parameter_extractor.parameter_extractor_node import ParameterExtractorNode
-from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.integration_tests.workflow.nodes.__mock.model import get_mocked_fetch_model_instance
 from tests.workflow_test_utils import build_test_graph_init_params
 
diff --git a/api/tests/integration_tests/workflow/nodes/test_template_transform.py b/api/tests/integration_tests/workflow/nodes/test_template_transform.py
index 9e3e1a47e3..2d728569be 100644
--- a/api/tests/integration_tests/workflow/nodes/test_template_transform.py
+++ b/api/tests/integration_tests/workflow/nodes/test_template_transform.py
@@ -1,14 +1,15 @@
 import time
 import uuid
 
-from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
-from core.workflow.node_factory import DifyNodeFactory
-from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.graph import Graph
 from graphon.nodes.template_transform.template_transform_node import TemplateTransformNode
 from graphon.runtime import GraphRuntimeState, VariablePool
 from graphon.template_rendering import TemplateRenderError
+
+from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
+from core.workflow.node_factory import DifyNodeFactory
+from core.workflow.system_variables import build_system_variables
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
diff --git a/api/tests/test_containers_integration_tests/controllers/console/app/test_chat_conversation_status_count_api.py b/api/tests/test_containers_integration_tests/controllers/console/app/test_chat_conversation_status_count_api.py
index 5a22f81a69..ea95959a82 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/app/test_chat_conversation_status_count_api.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/app/test_chat_conversation_status_count_api.py
@@ -4,11 +4,11 @@ import json
 import uuid
 
 from flask.testing import FlaskClient
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy.orm import Session
 
 from configs import dify_config
 from constants import HEADER_NAME_CSRF_TOKEN
-from graphon.enums import WorkflowExecutionStatus
 from libs.datetime_utils import naive_utc_now
 from libs.token import _real_cookie_name, generate_csrf_token
 from models import Account, DifySetup, Tenant, TenantAccountJoin
diff --git a/api/tests/test_containers_integration_tests/core/app/layers/test_pause_state_persist_layer.py b/api/tests/test_containers_integration_tests/core/app/layers/test_pause_state_persist_layer.py
index c342e8994b..b4b65abdb6 100644
--- a/api/tests/test_containers_integration_tests/core/app/layers/test_pause_state_persist_layer.py
+++ b/api/tests/test_containers_integration_tests/core/app/layers/test_pause_state_persist_layer.py
@@ -22,6 +22,13 @@ import uuid
 from time import time
 
 import pytest
+from graphon.entities.pause_reason import SchedulingPause
+from graphon.enums import WorkflowExecutionStatus
+from graphon.graph_engine.entities.commands import GraphEngineCommand
+from graphon.graph_engine.layers.base import GraphEngineLayerNotInitializedError
+from graphon.graph_events import GraphRunPausedEvent
+from graphon.model_runtime.entities.llm_entities import LLMUsage
+from graphon.runtime import GraphRuntimeState, ReadOnlyGraphRuntimeState, ReadOnlyGraphRuntimeStateWrapper, VariablePool
 from sqlalchemy import Engine, delete, select
 from sqlalchemy.orm import Session
 
@@ -33,13 +40,6 @@ from core.app.layers.pause_state_persist_layer import (
 )
 from core.workflow.system_variables import build_system_variables
 from extensions.ext_storage import storage
-from graphon.entities.pause_reason import SchedulingPause
-from graphon.enums import WorkflowExecutionStatus
-from graphon.graph_engine.entities.commands import GraphEngineCommand
-from graphon.graph_engine.layers.base import GraphEngineLayerNotInitializedError
-from graphon.graph_events import GraphRunPausedEvent
-from graphon.model_runtime.entities.llm_entities import LLMUsage
-from graphon.runtime import GraphRuntimeState, ReadOnlyGraphRuntimeState, ReadOnlyGraphRuntimeStateWrapper, VariablePool
 from libs.datetime_utils import naive_utc_now
 from models import Account
 from models import WorkflowPause as WorkflowPauseModel
diff --git a/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py b/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py
index 14d5740072..3b1570a9a8 100644
--- a/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py
+++ b/api/tests/test_containers_integration_tests/core/repositories/test_human_input_form_repository_impl.py
@@ -4,6 +4,7 @@ from __future__ import annotations
 
 from uuid import uuid4
 
+from graphon.nodes.human_input.entities import FormDefinition, HumanInputNodeData, UserAction
 from sqlalchemy import Engine, select
 from sqlalchemy.orm import Session
 
@@ -17,7 +18,6 @@ from core.workflow.human_input_compat import (
     MemberRecipient,
     WebAppDeliveryMethod,
 )
-from graphon.nodes.human_input.entities import FormDefinition, HumanInputNodeData, UserAction
 from models.account import (
     Account,
     AccountStatus,
diff --git a/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py b/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py
index da4f8847d6..3ecf621095 100644
--- a/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py
+++ b/api/tests/test_containers_integration_tests/core/workflow/test_human_input_resume_node_execution.py
@@ -4,17 +4,6 @@ from datetime import timedelta
 from unittest.mock import MagicMock
 
 import pytest
-from sqlalchemy import delete, select
-from sqlalchemy.orm import Session
-
-from core.app.app_config.entities import WorkflowUIBasedAppConfig
-from core.app.entities.app_invoke_entities import InvokeFrom, WorkflowAppGenerateEntity
-from core.app.workflow.layers import PersistenceWorkflowInfo, WorkflowPersistenceLayer
-from core.repositories.human_input_repository import HumanInputFormEntity, HumanInputFormRepository
-from core.repositories.sqlalchemy_workflow_execution_repository import SQLAlchemyWorkflowExecutionRepository
-from core.repositories.sqlalchemy_workflow_node_execution_repository import SQLAlchemyWorkflowNodeExecutionRepository
-from core.workflow.node_runtime import DifyHumanInputNodeRuntime
-from core.workflow.system_variables import build_system_variables
 from graphon.enums import WorkflowType
 from graphon.graph import Graph
 from graphon.graph_engine import GraphEngine
@@ -27,6 +16,17 @@ from graphon.nodes.human_input.human_input_node import HumanInputNode
 from graphon.nodes.start.entities import StartNodeData
 from graphon.nodes.start.start_node import StartNode
 from graphon.runtime import GraphRuntimeState, VariablePool
+from sqlalchemy import delete, select
+from sqlalchemy.orm import Session
+
+from core.app.app_config.entities import WorkflowUIBasedAppConfig
+from core.app.entities.app_invoke_entities import InvokeFrom, WorkflowAppGenerateEntity
+from core.app.workflow.layers import PersistenceWorkflowInfo, WorkflowPersistenceLayer
+from core.repositories.human_input_repository import HumanInputFormEntity, HumanInputFormRepository
+from core.repositories.sqlalchemy_workflow_execution_repository import SQLAlchemyWorkflowExecutionRepository
+from core.repositories.sqlalchemy_workflow_node_execution_repository import SQLAlchemyWorkflowNodeExecutionRepository
+from core.workflow.node_runtime import DifyHumanInputNodeRuntime
+from core.workflow.system_variables import build_system_variables
 from libs.datetime_utils import naive_utc_now
 from models import Account
 from models.account import AccountStatus, Tenant, TenantAccountJoin, TenantAccountRole, TenantStatus
diff --git a/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py b/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py
index 2e207ddc67..cc72dc1cf3 100644
--- a/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py
+++ b/api/tests/test_containers_integration_tests/factories/test_storage_key_loader.py
@@ -4,13 +4,13 @@ from unittest.mock import patch
 from uuid import uuid4
 
 import pytest
+from graphon.file import File, FileTransferMethod, FileType
 from sqlalchemy.orm import Session
 
 from core.app.file_access import DatabaseFileAccessController
 from extensions.ext_database import db
 from extensions.storage.storage_type import StorageType
 from factories.file_factory import StorageKeyLoader
-from graphon.file import File, FileTransferMethod, FileType
 from models import ToolFile, UploadFile
 from models.enums import CreatorUserRole
 
diff --git a/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_node_execution_repository.py b/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_node_execution_repository.py
index 641399c7f9..a68b3a08c7 100644
--- a/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_node_execution_repository.py
+++ b/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_node_execution_repository.py
@@ -5,10 +5,10 @@ from __future__ import annotations
 from datetime import timedelta
 from uuid import uuid4
 
+from graphon.enums import WorkflowNodeExecutionStatus
 from sqlalchemy import Engine, delete
 from sqlalchemy.orm import Session, sessionmaker
 
-from graphon.enums import WorkflowNodeExecutionStatus
 from libs.datetime_utils import naive_utc_now
 from models.enums import CreatorUserRole
 from models.workflow import WorkflowNodeExecutionModel
diff --git a/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_run_repository.py b/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_run_repository.py
index aebe87839c..64c93ac07c 100644
--- a/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_run_repository.py
+++ b/api/tests/test_containers_integration_tests/repositories/test_sqlalchemy_api_workflow_run_repository.py
@@ -8,15 +8,15 @@ from unittest.mock import Mock
 from uuid import uuid4
 
 import pytest
-from sqlalchemy import Engine, delete, select
-from sqlalchemy.orm import Session, sessionmaker
-
-from extensions.ext_storage import storage
 from graphon.entities import WorkflowExecution
 from graphon.entities.pause_reason import HumanInputRequired, PauseReasonType
 from graphon.enums import WorkflowExecutionStatus
 from graphon.nodes.human_input.entities import FormDefinition, FormInput, UserAction
 from graphon.nodes.human_input.enums import FormInputType, HumanInputFormStatus
+from sqlalchemy import Engine, delete, select
+from sqlalchemy.orm import Session, sessionmaker
+
+from extensions.ext_storage import storage
 from libs.datetime_utils import naive_utc_now
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
 from models.human_input import (
diff --git a/api/tests/test_containers_integration_tests/services/test_agent_service.py b/api/tests/test_containers_integration_tests/services/test_agent_service.py
index 00a2f9a59f..4f3c0e4200 100644
--- a/api/tests/test_containers_integration_tests/services/test_agent_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_agent_service.py
@@ -842,6 +842,7 @@ class TestAgentService:
         conversation, message = self._create_test_conversation_and_message(db_session_with_containers, app, account)
 
         from graphon.file import FileTransferMethod, FileType
+
         from models.enums import CreatorUserRole
 
         # Add files to message
diff --git a/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py b/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py
index 77ce28b999..6c15587058 100644
--- a/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py
@@ -9,6 +9,7 @@ from uuid import uuid4
 import pytest
 import yaml
 from faker import Faker
+from graphon.enums import BuiltinNodeTypes
 
 from core.trigger.constants import (
     TRIGGER_PLUGIN_NODE_TYPE,
@@ -16,7 +17,6 @@ from core.trigger.constants import (
     TRIGGER_WEBHOOK_NODE_TYPE,
 )
 from extensions.ext_redis import redis_client
-from graphon.enums import BuiltinNodeTypes
 from models import Account, AppMode
 from models.model import AppModelConfig, IconType
 from services import app_dsl_service
diff --git a/api/tests/test_containers_integration_tests/services/test_dataset_service.py b/api/tests/test_containers_integration_tests/services/test_dataset_service.py
index 0de3c64c4f..f9bfa570cb 100644
--- a/api/tests/test_containers_integration_tests/services/test_dataset_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_dataset_service.py
@@ -9,11 +9,11 @@ from unittest.mock import Mock, patch
 from uuid import uuid4
 
 import pytest
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
 from models.dataset import Dataset, DatasetPermissionEnum, Document, ExternalKnowledgeBindings, Pipeline
 from models.enums import DatasetRuntimeMode, DataSourceType, DocumentCreatedFrom, IndexingStatus
diff --git a/api/tests/test_containers_integration_tests/services/test_dataset_service_update_dataset.py b/api/tests/test_containers_integration_tests/services/test_dataset_service_update_dataset.py
index ac0483a45d..2974e00897 100644
--- a/api/tests/test_containers_integration_tests/services/test_dataset_service_update_dataset.py
+++ b/api/tests/test_containers_integration_tests/services/test_dataset_service_update_dataset.py
@@ -3,10 +3,10 @@ from unittest.mock import Mock, patch
 from uuid import uuid4
 
 import pytest
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.account import (
     Account,
     AccountStatus,
diff --git a/api/tests/test_containers_integration_tests/services/test_delete_archived_workflow_run.py b/api/tests/test_containers_integration_tests/services/test_delete_archived_workflow_run.py
index fe426ae516..c8f04e9215 100644
--- a/api/tests/test_containers_integration_tests/services/test_delete_archived_workflow_run.py
+++ b/api/tests/test_containers_integration_tests/services/test_delete_archived_workflow_run.py
@@ -5,9 +5,9 @@ Testcontainers integration tests for archived workflow run deletion service.
 from datetime import UTC, datetime, timedelta
 from uuid import uuid4
 
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy import select
 
-from graphon.enums import WorkflowExecutionStatus
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
 from models.workflow import WorkflowArchiveLog, WorkflowRun
 from services.retention.workflow_run.delete_archived_workflow_run import ArchivedWorkflowRunDeletion
diff --git a/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py b/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py
index 18c5320d0a..c46b8fba0b 100644
--- a/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py
+++ b/api/tests/test_containers_integration_tests/services/test_human_input_delivery_test.py
@@ -3,6 +3,8 @@ import uuid
 from unittest.mock import MagicMock
 
 import pytest
+from graphon.enums import BuiltinNodeTypes
+from graphon.nodes.human_input.entities import HumanInputNodeData
 
 from core.workflow.human_input_compat import (
     EmailDeliveryConfig,
@@ -10,8 +12,6 @@ from core.workflow.human_input_compat import (
     EmailRecipients,
     ExternalRecipient,
 )
-from graphon.enums import BuiltinNodeTypes
-from graphon.nodes.human_input.entities import HumanInputNodeData
 from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
 from models.model import App, AppMode
 from models.workflow import Workflow, WorkflowType
diff --git a/api/tests/test_containers_integration_tests/services/test_model_provider_service.py b/api/tests/test_containers_integration_tests/services/test_model_provider_service.py
index 8955a3b5f2..ba926bf675 100644
--- a/api/tests/test_containers_integration_tests/services/test_model_provider_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_model_provider_service.py
@@ -2,10 +2,10 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from faker import Faker
+from graphon.model_runtime.entities.model_entities import FetchFrom, ModelType
 from sqlalchemy.orm import Session
 
 from core.entities.model_entities import ModelStatus
-from graphon.model_runtime.entities.model_entities import FetchFrom, ModelType
 from models import Account, Tenant, TenantAccountJoin, TenantAccountRole
 from models.provider import Provider, ProviderModel, ProviderModelSetting, ProviderType
 from services.model_provider_service import ModelProviderService
@@ -405,10 +405,11 @@ class TestModelProviderService:
         mock_provider_manager = mock_external_service_dependencies["provider_manager"].return_value
 
         # Create mock models
-        from core.entities.model_entities import ModelWithProviderEntity, SimpleModelProviderEntity
         from graphon.model_runtime.entities.common_entities import I18nObject
         from graphon.model_runtime.entities.provider_entities import ProviderEntity
 
+        from core.entities.model_entities import ModelWithProviderEntity, SimpleModelProviderEntity
+
         # Create real model objects instead of mocks
         provider_entity_1 = SimpleModelProviderEntity(
             ProviderEntity(
@@ -643,9 +644,10 @@ class TestModelProviderService:
         mock_provider_manager = mock_external_service_dependencies["provider_manager"].return_value
 
         # Create mock default model response
-        from core.entities.model_entities import DefaultModelEntity, DefaultModelProviderEntity
         from graphon.model_runtime.entities.common_entities import I18nObject
 
+        from core.entities.model_entities import DefaultModelEntity, DefaultModelProviderEntity
+
         mock_default_model = DefaultModelEntity(
             model="gpt-3.5-turbo",
             model_type=ModelType.LLM,
diff --git a/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py b/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py
index 1e57b5603d..749c6fff5b 100644
--- a/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py
@@ -8,9 +8,9 @@ from unittest.mock import patch
 
 import pytest
 from faker import Faker
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy.orm import Session
 
-from graphon.enums import WorkflowExecutionStatus
 from models import EndUser, Workflow, WorkflowAppLog, WorkflowArchiveLog, WorkflowRun
 from models.enums import AppTriggerType, CreatorUserRole, WorkflowRunTriggeredFrom
 from models.workflow import WorkflowAppLogCreatedFrom
diff --git a/api/tests/test_containers_integration_tests/services/test_workflow_draft_variable_service.py b/api/tests/test_containers_integration_tests/services/test_workflow_draft_variable_service.py
index 86cf2327c7..0c281c8c33 100644
--- a/api/tests/test_containers_integration_tests/services/test_workflow_draft_variable_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_workflow_draft_variable_service.py
@@ -1,9 +1,9 @@
 import pytest
 from faker import Faker
+from graphon.variables.segments import StringSegment
 from sqlalchemy.orm import Session
 
 from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, SYSTEM_VARIABLE_NODE_ID
-from graphon.variables.segments import StringSegment
 from models import App, Workflow
 from models.enums import DraftVariableType
 from models.workflow import WorkflowDraftVariable
diff --git a/api/tests/test_containers_integration_tests/services/workflow/test_workflow_node_execution_service_repository.py b/api/tests/test_containers_integration_tests/services/workflow/test_workflow_node_execution_service_repository.py
index 4dab895135..7c43bf676b 100644
--- a/api/tests/test_containers_integration_tests/services/workflow/test_workflow_node_execution_service_repository.py
+++ b/api/tests/test_containers_integration_tests/services/workflow/test_workflow_node_execution_service_repository.py
@@ -1,10 +1,10 @@
 from datetime import datetime, timedelta
 from uuid import uuid4
 
+from graphon.enums import WorkflowNodeExecutionStatus
 from sqlalchemy import Engine, select
 from sqlalchemy.orm import Session, sessionmaker
 
-from graphon.enums import WorkflowNodeExecutionStatus
 from libs.datetime_utils import naive_utc_now
 from models.enums import CreatorUserRole
 from models.workflow import WorkflowNodeExecutionModel
diff --git a/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py b/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py
index fa3ac12cf0..2fb62e0fc0 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py
@@ -11,8 +11,7 @@ from unittest.mock import Mock, patch
 
 import pytest
 from faker import Faker
-from sqlalchemy import ColumnElement, func, select
-from sqlalchemy.orm import Session
+from sqlalchemy import func, select
 
 from core.rag.index_processor.constant.index_type import IndexStructureType
 from models.dataset import Dataset, Document, DocumentSegment
@@ -22,14 +21,6 @@ from tasks.clean_notion_document_task import clean_notion_document_task
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
 
-def _count_documents(session: Session, condition: ColumnElement[bool]) -> int:
-    return session.scalar(select(func.count()).select_from(Document).where(condition)) or 0
-
-
-def _count_segments(session: Session, condition: ColumnElement[bool]) -> int:
-    return session.scalar(select(func.count()).select_from(DocumentSegment).where(condition)) or 0
-
-
 class TestCleanNotionDocumentTask:
     """Integration tests for clean_notion_document_task using testcontainers."""
 
@@ -155,14 +146,29 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify data exists before cleanup
-        assert _count_documents(db_session_with_containers, Document.id.in_(document_ids)) == 3
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id.in_(document_ids)) == 6
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id.in_(document_ids))
+            )
+            == 3
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(document_ids))
+            )
+            == 6
+        )
 
         # Execute cleanup task
         clean_notion_document_task(document_ids, dataset.id)
 
         # Verify segments are deleted
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id.in_(document_ids)) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(document_ids))
+            )
+            == 0
+        )
 
         # Verify index processor was called
         mock_processor = mock_index_processor_factory.return_value.init_index_processor.return_value
@@ -322,7 +328,12 @@ class TestCleanNotionDocumentTask:
             # The task properly handles various index types and document configurations.
 
             # Verify segments are deleted
-            assert _count_segments(db_session_with_containers, DocumentSegment.document_id == document.id) == 0
+            assert (
+                db_session_with_containers.scalar(
+                    select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+                )
+                == 0
+            )
 
             # Reset mock for next iteration
             mock_index_processor_factory.reset_mock()
@@ -405,7 +416,12 @@ class TestCleanNotionDocumentTask:
         clean_notion_document_task([document.id], dataset.id)
 
         # Verify segments are deleted
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id == document.id) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
+            == 0
+        )
 
         # Note: This test successfully verifies that segments without index_node_ids
         # are properly deleted from the database.
@@ -491,8 +507,18 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify all data exists before cleanup
-        assert _count_documents(db_session_with_containers, Document.dataset_id == dataset.id) == 5
-        assert _count_segments(db_session_with_containers, DocumentSegment.dataset_id == dataset.id) == 10
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.dataset_id == dataset.id)
+            )
+            == 5
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
+            == 10
+        )
 
         # Clean up only first 3 documents
         documents_to_clean = [doc.id for doc in documents[:3]]
@@ -502,12 +528,29 @@ class TestCleanNotionDocumentTask:
         clean_notion_document_task(documents_to_clean, dataset.id)
 
         # Verify only specified documents' segments are deleted
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id.in_(documents_to_clean)) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count())
+                .select_from(DocumentSegment)
+                .where(DocumentSegment.document_id.in_(documents_to_clean))
+            )
+            == 0
+        )
 
         # Verify remaining documents and segments are intact
         remaining_docs = [doc.id for doc in documents[3:]]
-        assert _count_documents(db_session_with_containers, Document.id.in_(remaining_docs)) == 2
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id.in_(remaining_docs)) == 4
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id.in_(remaining_docs))
+            )
+            == 2
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(remaining_docs))
+            )
+            == 4
+        )
 
         # Note: This test successfully verifies partial document cleanup operations.
         # The database operations work correctly, isolating only the specified documents.
@@ -591,13 +634,23 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify all segments exist before cleanup
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id == document.id) == 4
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
+            == 4
+        )
 
         # Execute cleanup task
         clean_notion_document_task([document.id], dataset.id)
 
         # Verify all segments are deleted regardless of status
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id == document.id) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
+            == 0
+        )
 
         # Note: This test successfully verifies database operations.
         # IndexProcessor verification would require more sophisticated mocking.
@@ -767,9 +820,16 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify all data exists before cleanup
-        assert _count_documents(db_session_with_containers, Document.dataset_id == dataset.id) == num_documents
         assert (
-            _count_segments(db_session_with_containers, DocumentSegment.dataset_id == dataset.id)
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.dataset_id == dataset.id)
+            )
+            == num_documents
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == num_documents * num_segments_per_doc
         )
 
@@ -778,7 +838,12 @@ class TestCleanNotionDocumentTask:
         clean_notion_document_task(all_document_ids, dataset.id)
 
         # Verify all segments are deleted
-        assert _count_segments(db_session_with_containers, DocumentSegment.dataset_id == dataset.id) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
+            == 0
+        )
 
         # Note: This test successfully verifies bulk document cleanup operations.
         # The database efficiently handles large-scale deletions.
@@ -885,12 +950,29 @@ class TestCleanNotionDocumentTask:
         clean_notion_document_task([target_document.id], target_dataset.id)
 
         # Verify only documents' segments from target dataset are deleted
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id == target_document.id) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count())
+                .select_from(DocumentSegment)
+                .where(DocumentSegment.document_id == target_document.id)
+            )
+            == 0
+        )
 
         # Verify documents from other datasets remain intact
         remaining_docs = [doc.id for doc in all_documents[1:]]
-        assert _count_documents(db_session_with_containers, Document.id.in_(remaining_docs)) == 2
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id.in_(remaining_docs)) == 6
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id.in_(remaining_docs))
+            )
+            == 2
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(remaining_docs))
+            )
+            == 6
+        )
 
         # Note: This test successfully verifies multi-tenant isolation.
         # Only documents from the target dataset are affected, maintaining tenant separation.
@@ -985,9 +1067,13 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify all data exists before cleanup
-        assert _count_documents(db_session_with_containers, Document.dataset_id == dataset.id) == len(document_statuses)
+        assert db_session_with_containers.scalar(
+            select(func.count()).select_from(Document).where(Document.dataset_id == dataset.id)
+        ) == len(document_statuses)
         assert (
-            _count_segments(db_session_with_containers, DocumentSegment.dataset_id == dataset.id)
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == len(document_statuses) * 2
         )
 
@@ -996,7 +1082,12 @@ class TestCleanNotionDocumentTask:
         clean_notion_document_task(all_document_ids, dataset.id)
 
         # Verify all segments are deleted regardless of status
-        assert _count_segments(db_session_with_containers, DocumentSegment.dataset_id == dataset.id) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
+            == 0
+        )
 
         # Note: This test successfully verifies cleanup of documents in various states.
         # All documents are deleted regardless of their indexing status.
@@ -1094,14 +1185,29 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify data exists before cleanup
-        assert _count_documents(db_session_with_containers, Document.id == document.id) == 1
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id == document.id) == 3
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id == document.id)
+            )
+            == 1
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
+            == 3
+        )
 
         # Execute cleanup task
         clean_notion_document_task([document.id], dataset.id)
 
         # Verify segments are deleted
-        assert _count_segments(db_session_with_containers, DocumentSegment.document_id == document.id) == 0
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
+            == 0
+        )
 
         # Note: This test successfully verifies cleanup of documents with rich metadata.
         # The task properly handles complex document structures and metadata fields.
diff --git a/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py b/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py
index 328bdbf055..1b4dcf28ea 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_mail_human_input_delivery_task.py
@@ -3,6 +3,9 @@ from datetime import UTC, datetime
 from unittest.mock import patch
 
 import pytest
+from graphon.enums import WorkflowExecutionStatus
+from graphon.nodes.human_input.entities import HumanInputNodeData
+from graphon.runtime import GraphRuntimeState, VariablePool
 from sqlalchemy import delete
 
 from configs import dify_config
@@ -18,9 +21,6 @@ from core.workflow.human_input_compat import (
     MemberRecipient,
 )
 from extensions.ext_storage import storage
-from graphon.enums import WorkflowExecutionStatus
-from graphon.nodes.human_input.entities import HumanInputNodeData
-from graphon.runtime import GraphRuntimeState, VariablePool
 from models.account import Account, AccountStatus, Tenant, TenantAccountJoin, TenantAccountRole
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
 from models.human_input import HumanInputDelivery, HumanInputForm, HumanInputFormRecipient
diff --git a/api/tests/test_containers_integration_tests/tasks/test_remove_app_and_related_data_task.py b/api/tests/test_containers_integration_tests/tasks/test_remove_app_and_related_data_task.py
index b43b622870..b5bef145d5 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_remove_app_and_related_data_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_remove_app_and_related_data_task.py
@@ -2,12 +2,12 @@ import uuid
 from unittest.mock import ANY, call, patch
 
 import pytest
+from graphon.variables.segments import StringSegment
+from graphon.variables.types import SegmentType
 from sqlalchemy import delete, func, select
 
 from core.db.session_factory import session_factory
 from extensions.storage.storage_type import StorageType
-from graphon.variables.segments import StringSegment
-from graphon.variables.types import SegmentType
 from libs.datetime_utils import naive_utc_now
 from models import Tenant
 from models.enums import CreatorUserRole
diff --git a/api/tests/test_containers_integration_tests/test_workflow_pause_integration.py b/api/tests/test_containers_integration_tests/test_workflow_pause_integration.py
index b00d827e37..6e98c0855a 100644
--- a/api/tests/test_containers_integration_tests/test_workflow_pause_integration.py
+++ b/api/tests/test_containers_integration_tests/test_workflow_pause_integration.py
@@ -24,12 +24,12 @@ from dataclasses import dataclass
 from datetime import timedelta
 
 import pytest
+from graphon.entities import WorkflowExecution
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy import delete, func, select
 from sqlalchemy.orm import Session, selectinload, sessionmaker
 
 from extensions.ext_storage import storage
-from graphon.entities import WorkflowExecution
-from graphon.enums import WorkflowExecutionStatus
 from libs.datetime_utils import naive_utc_now
 from models import Account
 from models import WorkflowPause as WorkflowPauseModel
diff --git a/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py b/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
index 9c20118e27..7c4553d4a0 100644
--- a/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
+++ b/api/tests/test_containers_integration_tests/trigger/test_trigger_e2e.py
@@ -10,6 +10,7 @@ from typing import Any
 import pytest
 from flask import Flask, Response
 from flask.testing import FlaskClient
+from graphon.enums import BuiltinNodeTypes
 from sqlalchemy import select
 from sqlalchemy.orm import Session
 
@@ -24,7 +25,6 @@ from core.trigger.debug import event_selectors
 from core.trigger.debug.event_bus import TriggerDebugEventBus
 from core.trigger.debug.event_selectors import PluginTriggerDebugEventPoller, WebhookTriggerDebugEventPoller
 from core.trigger.debug.events import PluginTriggerDebugEvent, build_plugin_pool_key
-from graphon.enums import BuiltinNodeTypes
 from libs.datetime_utils import naive_utc_now
 from models.account import Account, Tenant
 from models.enums import AppTriggerStatus, AppTriggerType, CreatorUserRole, WorkflowTriggerStatus
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py b/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py
index c4a8148446..e11102acb1 100644
--- a/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py
@@ -6,14 +6,14 @@ from unittest.mock import Mock
 
 import pytest
 from flask import Flask
-
-from controllers.console import wraps as console_wraps
-from controllers.console.app import workflow_run as workflow_run_module
-from controllers.web.error import NotFoundError
 from graphon.entities.pause_reason import HumanInputRequired
 from graphon.enums import WorkflowExecutionStatus
 from graphon.nodes.human_input.entities import FormInput, UserAction
 from graphon.nodes.human_input.enums import FormInputType
+
+from controllers.console import wraps as console_wraps
+from controllers.console.app import workflow_run as workflow_run_module
+from controllers.web.error import NotFoundError
 from libs import login as login_lib
 from models.account import Account, AccountStatus, TenantAccountRole
 from models.workflow import WorkflowRun
diff --git a/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py b/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py
index b19a1740eb..740da1f1df 100644
--- a/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py
+++ b/api/tests/unit_tests/controllers/console/app/workflow_draft_variables_test.py
@@ -5,6 +5,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from flask_restx import marshal
+from graphon.variables.types import SegmentType
 
 from controllers.console.app.workflow_draft_variable import (
     _WORKFLOW_DRAFT_VARIABLE_FIELDS,
@@ -15,7 +16,6 @@ from controllers.console.app.workflow_draft_variable import (
 )
 from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, SYSTEM_VARIABLE_NODE_ID
 from factories.variable_factory import build_segment
-from graphon.variables.types import SegmentType
 from libs.datetime_utils import naive_utc_now
 from libs.uuid_utils import uuidv7
 from models.workflow import WorkflowDraftVariable, WorkflowDraftVariableFile
diff --git a/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py b/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py
index b2f949c6e2..9c42ee9529 100644
--- a/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py
+++ b/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py
@@ -11,10 +11,9 @@ from unittest.mock import MagicMock
 import pytest
 from flask import Flask
 from flask.views import MethodView
-from werkzeug.exceptions import Forbidden
-
 from graphon.model_runtime.entities.model_entities import ModelType
 from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
+from werkzeug.exceptions import Forbidden
 
 if not hasattr(builtins, "MethodView"):
     builtins.MethodView = MethodView  # type: ignore[attr-defined]
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_audio.py b/api/tests/unit_tests/controllers/service_api/app/test_audio.py
index c16ebad739..a26fea8fbd 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_audio.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_audio.py
@@ -13,6 +13,7 @@ from types import SimpleNamespace
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.model_runtime.errors.invoke import InvokeError
 from werkzeug.datastructures import FileStorage
 from werkzeug.exceptions import InternalServerError
 
@@ -29,7 +30,6 @@ from controllers.service_api.app.error import (
     UnsupportedAudioTypeError,
 )
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 from services.audio_service import AudioService
 from services.errors.app_model_config import AppModelConfigBrokenError
 from services.errors.audio import (
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_completion.py b/api/tests/unit_tests/controllers/service_api/app/test_completion.py
index 3364c07e62..57681d8f5b 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_completion.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_completion.py
@@ -16,6 +16,7 @@ from types import SimpleNamespace
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import ValidationError
 from werkzeug.exceptions import BadRequest, NotFound
 
@@ -34,7 +35,6 @@ from controllers.service_api.app.error import (
     NotChatAppError,
 )
 from core.errors.error import QuotaExceededError
-from graphon.model_runtime.errors.invoke import InvokeError
 from models.model import App, AppMode, EndUser
 from services.app_generate_service import AppGenerateService
 from services.app_task_service import AppTaskService
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_conversation.py b/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
index 14c35a9ed5..97fdf1a011 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
@@ -20,6 +20,7 @@ from types import SimpleNamespace
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.variables.types import SegmentType
 from werkzeug.exceptions import BadRequest, NotFound
 
 import services
@@ -37,7 +38,6 @@ from controllers.service_api.app.conversation import (
     ConversationVariableUpdatePayload,
 )
 from controllers.service_api.app.error import NotChatAppError
-from graphon.variables.types import SegmentType
 from models.model import App, AppMode, EndUser
 from services.conversation_service import ConversationService
 from services.errors.conversation import (
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_workflow.py b/api/tests/unit_tests/controllers/service_api/app/test_workflow.py
index da09ec13ce..74a3c75839 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_workflow.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_workflow.py
@@ -20,6 +20,7 @@ from types import SimpleNamespace
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.enums import WorkflowExecutionStatus
 from werkzeug.exceptions import BadRequest, NotFound
 
 from controllers.service_api.app.error import NotWorkflowAppError
@@ -36,7 +37,6 @@ from controllers.service_api.app.workflow import (
     WorkflowTaskStopApi,
 )
 from controllers.web.error import InvokeRateLimitError as InvokeRateLimitHttpError
-from graphon.enums import WorkflowExecutionStatus
 from models.model import App, AppMode
 from services.app_generate_service import AppGenerateService
 from services.errors.app import IsDraftWorkflowError, WorkflowNotFoundError
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_workflow_fields.py b/api/tests/unit_tests/controllers/service_api/app/test_workflow_fields.py
index eda270258d..4b8e3a738c 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_workflow_fields.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_workflow_fields.py
@@ -1,8 +1,9 @@
 from types import SimpleNamespace
 
-from controllers.service_api.app.workflow import WorkflowRunOutputsField, WorkflowRunStatusField
 from graphon.enums import WorkflowExecutionStatus
 
+from controllers.service_api.app.workflow import WorkflowRunOutputsField, WorkflowRunStatusField
+
 
 def test_workflow_run_status_field_with_enum() -> None:
     field = WorkflowRunStatusField()
diff --git a/api/tests/unit_tests/core/app/app_config/features/file_upload/test_manager.py b/api/tests/unit_tests/core/app/app_config/features/file_upload/test_manager.py
index 11b53dd0f9..8bde9c1f97 100644
--- a/api/tests/unit_tests/core/app/app_config/features/file_upload/test_manager.py
+++ b/api/tests/unit_tests/core/app/app_config/features/file_upload/test_manager.py
@@ -1,7 +1,8 @@
-from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
 from graphon.file import FileTransferMethod, FileUploadConfig, ImageConfig
 from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 
+from core.app.app_config.features.file_upload.manager import FileUploadConfigManager
+
 
 def test_convert_with_vision():
     config = {
diff --git a/api/tests/unit_tests/core/app/apps/advanced_chat/test_app_runner_conversation_variables.py b/api/tests/unit_tests/core/app/apps/advanced_chat/test_app_runner_conversation_variables.py
index 45d4b0e321..1fb0dc6cf1 100644
--- a/api/tests/unit_tests/core/app/apps/advanced_chat/test_app_runner_conversation_variables.py
+++ b/api/tests/unit_tests/core/app/apps/advanced_chat/test_app_runner_conversation_variables.py
@@ -3,12 +3,12 @@
 from unittest.mock import MagicMock, patch
 from uuid import uuid4
 
+from graphon.variables import SegmentType
 from sqlalchemy.orm import Session
 
 from core.app.apps.advanced_chat.app_runner import AdvancedChatAppRunner
 from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity, InvokeFrom
 from factories import variable_factory
-from graphon.variables import SegmentType
 from models import ConversationVariable, Workflow
 
 MINIMAL_GRAPH = {
diff --git a/api/tests/unit_tests/core/app/apps/chat/test_base_app_runner_multimodal.py b/api/tests/unit_tests/core/app/apps/chat/test_base_app_runner_multimodal.py
index b3ea1a464f..f255d2c7df 100644
--- a/api/tests/unit_tests/core/app/apps/chat/test_base_app_runner_multimodal.py
+++ b/api/tests/unit_tests/core/app/apps/chat/test_base_app_runner_multimodal.py
@@ -4,13 +4,13 @@ from unittest.mock import MagicMock, patch
 from uuid import uuid4
 
 import pytest
+from graphon.file import FileTransferMethod, FileType
+from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 
 from core.app.apps.base_app_queue_manager import PublishFrom
 from core.app.apps.base_app_runner import AppRunner
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.app.entities.queue_entities import QueueMessageFileEvent
-from graphon.file import FileTransferMethod, FileType
-from graphon.model_runtime.entities.message_entities import ImagePromptMessageContent
 from models.enums import CreatorUserRole
 
 
diff --git a/api/tests/unit_tests/core/app/apps/common/test_graph_runtime_state_support.py b/api/tests/unit_tests/core/app/apps/common/test_graph_runtime_state_support.py
index 201923e0e4..4a94a2b4f1 100644
--- a/api/tests/unit_tests/core/app/apps/common/test_graph_runtime_state_support.py
+++ b/api/tests/unit_tests/core/app/apps/common/test_graph_runtime_state_support.py
@@ -1,11 +1,11 @@
 from types import SimpleNamespace
 
 import pytest
+from graphon.runtime import GraphRuntimeState, VariablePool
 
 from core.app.apps.common.graph_runtime_state_support import GraphRuntimeStateSupport
 from core.workflow.system_variables import build_system_variables
 from core.workflow.variable_pool_initializer import add_variables_to_pool
-from graphon.runtime import GraphRuntimeState, VariablePool
 
 
 def _make_state(workflow_run_id: str | None) -> GraphRuntimeState:
diff --git a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py
index 3ab63aed25..328cd12f12 100644
--- a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py
+++ b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter.py
@@ -1,9 +1,10 @@
 from collections.abc import Mapping, Sequence
 
-from core.app.apps.common.workflow_response_converter import WorkflowResponseConverter
 from graphon.file import FILE_MODEL_IDENTITY, File, FileTransferMethod, FileType
 from graphon.variables.segments import ArrayFileSegment, FileSegment
 
+from core.app.apps.common.workflow_response_converter import WorkflowResponseConverter
+
 
 class TestWorkflowResponseConverterFetchFilesFromVariableValue:
     """Test class for WorkflowResponseConverter._fetch_files_from_variable_value method"""
diff --git a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_human_input.py b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_human_input.py
index 1bef6f69cd..bc11bf4174 100644
--- a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_human_input.py
+++ b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_human_input.py
@@ -1,12 +1,13 @@
 from datetime import UTC, datetime
 from types import SimpleNamespace
 
+from graphon.entities import WorkflowStartReason
+from graphon.runtime import GraphRuntimeState, VariablePool
+
 from core.app.apps.common.workflow_response_converter import WorkflowResponseConverter
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.app.entities.queue_entities import QueueHumanInputFormFilledEvent, QueueHumanInputFormTimeoutEvent
 from core.workflow.system_variables import build_system_variables
-from graphon.entities import WorkflowStartReason
-from graphon.runtime import GraphRuntimeState, VariablePool
 
 
 def _build_converter():
diff --git a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_resumption.py b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_resumption.py
index 936ac37e55..c9e146ff12 100644
--- a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_resumption.py
+++ b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_resumption.py
@@ -1,10 +1,11 @@
 from types import SimpleNamespace
 
+from graphon.entities import WorkflowStartReason
+from graphon.runtime import GraphRuntimeState, VariablePool
+
 from core.app.apps.common.workflow_response_converter import WorkflowResponseConverter
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.workflow.system_variables import build_system_variables
-from graphon.entities import WorkflowStartReason
-from graphon.runtime import GraphRuntimeState, VariablePool
 
 
 def _build_converter() -> WorkflowResponseConverter:
diff --git a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_truncation.py b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_truncation.py
index b3c0eb74fa..0fde7565d2 100644
--- a/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_truncation.py
+++ b/api/tests/unit_tests/core/app/apps/common/test_workflow_response_converter_truncation.py
@@ -10,6 +10,8 @@ from typing import Any
 from unittest.mock import Mock
 
 import pytest
+from graphon.entities import WorkflowStartReason
+from graphon.enums import BuiltinNodeTypes
 
 from core.app.app_config.entities import WorkflowUIBasedAppConfig
 from core.app.apps.common.workflow_response_converter import WorkflowResponseConverter
@@ -25,8 +27,6 @@ from core.app.entities.queue_entities import (
     QueueNodeSucceededEvent,
 )
 from core.workflow.system_variables import build_system_variables
-from graphon.entities import WorkflowStartReason
-from graphon.enums import BuiltinNodeTypes
 from libs.datetime_utils import naive_utc_now
 from models import Account
 from models.model import AppMode
diff --git a/api/tests/unit_tests/core/app/apps/test_base_app_generator.py b/api/tests/unit_tests/core/app/apps/test_base_app_generator.py
index b0f8b423e1..6167be3bbd 100644
--- a/api/tests/unit_tests/core/app/apps/test_base_app_generator.py
+++ b/api/tests/unit_tests/core/app/apps/test_base_app_generator.py
@@ -1,7 +1,7 @@
 import pytest
+from graphon.variables.input_entities import VariableEntity, VariableEntityType
 
 from core.app.apps.base_app_generator import BaseAppGenerator
-from graphon.variables.input_entities import VariableEntity, VariableEntityType
 
 
 def test_validate_inputs_with_zero():
@@ -476,8 +476,9 @@ class TestBaseAppGeneratorExtras:
         assert converted[1] == "event: ping\n\n"
 
     def test_get_draft_var_saver_factory_debugger(self):
-        from core.app.entities.app_invoke_entities import InvokeFrom
         from graphon.enums import BuiltinNodeTypes
+
+        from core.app.entities.app_invoke_entities import InvokeFrom
         from models import Account
 
         base_app_generator = BaseAppGenerator()
diff --git a/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_notifications.py b/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_notifications.py
index 10fb2271f4..aa789d9ff3 100644
--- a/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_notifications.py
+++ b/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_notifications.py
@@ -1,11 +1,11 @@
 from unittest.mock import MagicMock
 
 import pytest
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.graph_events import GraphRunPausedEvent
 
 from core.app.apps.workflow_app_runner import WorkflowBasedAppRunner
 from core.app.entities.queue_entities import QueueWorkflowPausedEvent
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.graph_events import GraphRunPausedEvent
 
 
 class _DummyQueueManager:
diff --git a/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_single_node.py b/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_single_node.py
index 620a153204..9e30faecf2 100644
--- a/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_single_node.py
+++ b/api/tests/unit_tests/core/app/apps/test_workflow_app_runner_single_node.py
@@ -4,14 +4,14 @@ from typing import Any
 from unittest.mock import MagicMock, patch
 
 import pytest
+from graphon.entities.graph_config import NodeConfigDictAdapter
+from graphon.runtime import GraphRuntimeState, VariablePool
 
 from core.app.apps.base_app_queue_manager import AppQueueManager
 from core.app.apps.workflow.app_runner import WorkflowAppRunner
 from core.app.apps.workflow_app_runner import WorkflowBasedAppRunner
 from core.app.entities.app_invoke_entities import InvokeFrom, WorkflowAppGenerateEntity
 from core.workflow.system_variables import default_system_variables
-from graphon.entities.graph_config import NodeConfigDictAdapter
-from graphon.runtime import GraphRuntimeState, VariablePool
 from models.workflow import Workflow
 
 
diff --git a/api/tests/unit_tests/core/app/apps/test_workflow_pause_events.py b/api/tests/unit_tests/core/app/apps/test_workflow_pause_events.py
index a3ab379b66..8a717e1dcc 100644
--- a/api/tests/unit_tests/core/app/apps/test_workflow_pause_events.py
+++ b/api/tests/unit_tests/core/app/apps/test_workflow_pause_events.py
@@ -3,6 +3,11 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
+from graphon.entities import WorkflowStartReason
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.graph_events import GraphRunPausedEvent
+from graphon.nodes.human_input.entities import FormInput, UserAction
+from graphon.nodes.human_input.enums import FormInputType
 
 from core.app.apps.common import workflow_response_converter
 from core.app.apps.common.workflow_response_converter import WorkflowResponseConverter
@@ -11,11 +16,6 @@ from core.app.entities.app_invoke_entities import InvokeFrom
 from core.app.entities.queue_entities import QueueWorkflowPausedEvent
 from core.app.entities.task_entities import HumanInputRequiredResponse, WorkflowPauseStreamResponse
 from core.workflow.system_variables import build_system_variables
-from graphon.entities import WorkflowStartReason
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.graph_events import GraphRunPausedEvent
-from graphon.nodes.human_input.entities import FormInput, UserAction
-from graphon.nodes.human_input.enums import FormInputType
 from models.account import Account
 from models.human_input import RecipientType
 
diff --git a/api/tests/unit_tests/core/app/apps/workflow/test_generate_task_pipeline.py b/api/tests/unit_tests/core/app/apps/workflow/test_generate_task_pipeline.py
index 1f6e7e12ef..29df903aa8 100644
--- a/api/tests/unit_tests/core/app/apps/workflow/test_generate_task_pipeline.py
+++ b/api/tests/unit_tests/core/app/apps/workflow/test_generate_task_pipeline.py
@@ -2,14 +2,15 @@ import time
 from contextlib import contextmanager
 from unittest.mock import MagicMock
 
+from graphon.entities import WorkflowStartReason
+from graphon.runtime import GraphRuntimeState
+
 from core.app.app_config.entities import WorkflowUIBasedAppConfig
 from core.app.apps.base_app_queue_manager import AppQueueManager
 from core.app.apps.workflow.generate_task_pipeline import WorkflowAppGenerateTaskPipeline
 from core.app.entities.app_invoke_entities import InvokeFrom, WorkflowAppGenerateEntity
 from core.app.entities.queue_entities import QueueWorkflowStartedEvent
 from core.workflow.system_variables import build_system_variables
-from graphon.entities import WorkflowStartReason
-from graphon.runtime import GraphRuntimeState
 from models.account import Account
 from models.model import AppMode
 from tests.workflow_test_utils import build_test_variable_pool
diff --git a/api/tests/unit_tests/core/app/layers/test_conversation_variable_persist_layer.py b/api/tests/unit_tests/core/app/layers/test_conversation_variable_persist_layer.py
index ba55e8f695..a78c1b428f 100644
--- a/api/tests/unit_tests/core/app/layers/test_conversation_variable_persist_layer.py
+++ b/api/tests/unit_tests/core/app/layers/test_conversation_variable_persist_layer.py
@@ -1,9 +1,6 @@
 from collections.abc import Sequence
 from unittest.mock import Mock
 
-from core.app.layers.conversation_variable_persist_layer import ConversationVariablePersistenceLayer
-from core.workflow.system_variables import SystemVariableKey
-from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
 from graphon.graph_engine.command_channels import CommandChannel
 from graphon.graph_events import NodeRunSucceededEvent, NodeRunVariableUpdatedEvent
@@ -11,6 +8,10 @@ from graphon.node_events import NodeRunResult
 from graphon.runtime import ReadOnlyGraphRuntimeState
 from graphon.variables import StringVariable
 from graphon.variables.segments import Segment, StringSegment
+
+from core.app.layers.conversation_variable_persist_layer import ConversationVariablePersistenceLayer
+from core.workflow.system_variables import SystemVariableKey
+from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID
 from libs.datetime_utils import naive_utc_now
 
 
diff --git a/api/tests/unit_tests/core/app/layers/test_pause_state_persist_layer.py b/api/tests/unit_tests/core/app/layers/test_pause_state_persist_layer.py
index 539944d683..035e64325b 100644
--- a/api/tests/unit_tests/core/app/layers/test_pause_state_persist_layer.py
+++ b/api/tests/unit_tests/core/app/layers/test_pause_state_persist_layer.py
@@ -4,16 +4,6 @@ from time import time
 from unittest.mock import Mock
 
 import pytest
-
-from core.app.app_config.entities import WorkflowUIBasedAppConfig
-from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity, InvokeFrom, WorkflowAppGenerateEntity
-from core.app.layers.pause_state_persist_layer import (
-    PauseStatePersistenceLayer,
-    WorkflowResumptionContext,
-    _AdvancedChatAppGenerateEntityWrapper,
-    _WorkflowGenerateEntityWrapper,
-)
-from core.workflow.system_variables import SystemVariableKey
 from graphon.entities.pause_reason import SchedulingPause
 from graphon.graph_engine.entities.commands import GraphEngineCommand
 from graphon.graph_engine.layers.base import GraphEngineLayerNotInitializedError
@@ -25,6 +15,16 @@ from graphon.graph_events import (
 )
 from graphon.runtime import ReadOnlyVariablePool
 from graphon.variables.segments import Segment
+
+from core.app.app_config.entities import WorkflowUIBasedAppConfig
+from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity, InvokeFrom, WorkflowAppGenerateEntity
+from core.app.layers.pause_state_persist_layer import (
+    PauseStatePersistenceLayer,
+    WorkflowResumptionContext,
+    _AdvancedChatAppGenerateEntityWrapper,
+    _WorkflowGenerateEntityWrapper,
+)
+from core.workflow.system_variables import SystemVariableKey
 from models.model import AppMode
 from repositories.factory import DifyAPIRepositoryFactory
 
diff --git a/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py b/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py
index 1c1bf391d3..4aaa10a81a 100644
--- a/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py
+++ b/api/tests/unit_tests/core/app/task_pipeline/test_easy_ui_based_generate_task_pipeline.py
@@ -2,6 +2,8 @@ from types import SimpleNamespace
 from unittest.mock import ANY, Mock, patch
 
 import pytest
+from graphon.model_runtime.entities.llm_entities import LLMResult as RuntimeLLMResult
+from graphon.model_runtime.entities.message_entities import TextPromptMessageContent
 
 from core.app.apps.base_app_queue_manager import AppQueueManager
 from core.app.entities.app_invoke_entities import ChatAppGenerateEntity
@@ -26,8 +28,6 @@ from core.app.entities.task_entities import (
 from core.app.task_pipeline.easy_ui_based_generate_task_pipeline import EasyUIBasedGenerateTaskPipeline
 from core.base.tts import AppGeneratorTTSPublisher
 from core.ops.ops_trace_manager import TraceQueueManager
-from graphon.model_runtime.entities.llm_entities import LLMResult as RuntimeLLMResult
-from graphon.model_runtime.entities.message_entities import TextPromptMessageContent
 from models.model import AppMode
 
 
diff --git a/api/tests/unit_tests/core/datasource/test_datasource_manager.py b/api/tests/unit_tests/core/datasource/test_datasource_manager.py
index 81315d2508..d338cadb77 100644
--- a/api/tests/unit_tests/core/datasource/test_datasource_manager.py
+++ b/api/tests/unit_tests/core/datasource/test_datasource_manager.py
@@ -2,15 +2,15 @@ import types
 from collections.abc import Generator
 
 import pytest
+from graphon.enums import WorkflowNodeExecutionStatus
+from graphon.file import File, FileTransferMethod, FileType
+from graphon.node_events import StreamChunkEvent, StreamCompletedEvent
 
 from contexts.wrapper import RecyclableContextVar
 from core.datasource.datasource_manager import DatasourceManager
 from core.datasource.entities.datasource_entities import DatasourceMessage, DatasourceProviderType
 from core.datasource.errors import DatasourceProviderNotFoundError
 from core.workflow.file_reference import parse_file_reference
-from graphon.enums import WorkflowNodeExecutionStatus
-from graphon.file import File, FileTransferMethod, FileType
-from graphon.node_events import StreamChunkEvent, StreamCompletedEvent
 
 
 def _gen_messages_text_only(text: str) -> Generator[DatasourceMessage, None, None]:
diff --git a/api/tests/unit_tests/core/mcp/server/test_streamable_http.py b/api/tests/unit_tests/core/mcp/server/test_streamable_http.py
index 57456085c3..9a815fb94d 100644
--- a/api/tests/unit_tests/core/mcp/server/test_streamable_http.py
+++ b/api/tests/unit_tests/core/mcp/server/test_streamable_http.py
@@ -3,6 +3,7 @@ from unittest.mock import Mock, patch
 
 import jsonschema
 import pytest
+from graphon.variables.input_entities import VariableEntity, VariableEntityType
 
 from core.app.features.rate_limiting.rate_limit import RateLimitGenerator
 from core.mcp import types
@@ -18,7 +19,6 @@ from core.mcp.server.streamable_http import (
     prepare_tool_arguments,
     process_mapping_response,
 )
-from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from models.model import App, AppMCPServer, AppMode, EndUser
 
 
diff --git a/api/tests/unit_tests/core/plugin/test_plugin_runtime.py b/api/tests/unit_tests/core/plugin/test_plugin_runtime.py
index 704b82adc0..a3b1e5f6b0 100644
--- a/api/tests/unit_tests/core/plugin/test_plugin_runtime.py
+++ b/api/tests/unit_tests/core/plugin/test_plugin_runtime.py
@@ -17,6 +17,14 @@ from unittest.mock import MagicMock, patch
 
 import httpx
 import pytest
+from graphon.model_runtime.errors.invoke import (
+    InvokeAuthorizationError,
+    InvokeBadRequestError,
+    InvokeConnectionError,
+    InvokeRateLimitError,
+    InvokeServerUnavailableError,
+)
+from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
 from pydantic import BaseModel
 
 from core.plugin.entities.plugin_daemon import (
@@ -37,14 +45,6 @@ from core.plugin.impl.exc import (
 )
 from core.plugin.impl.plugin import PluginInstaller
 from core.plugin.impl.tool import PluginToolManager
-from graphon.model_runtime.errors.invoke import (
-    InvokeAuthorizationError,
-    InvokeBadRequestError,
-    InvokeConnectionError,
-    InvokeRateLimitError,
-    InvokeServerUnavailableError,
-)
-from graphon.model_runtime.errors.validate import CredentialsValidateFailedError
 
 
 @pytest.fixture(autouse=True)
diff --git a/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py b/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py
index d49b6e4b71..90730dff5a 100644
--- a/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py
+++ b/api/tests/unit_tests/core/plugin/utils/test_chunk_merger.py
@@ -1,12 +1,12 @@
 from collections.abc import Generator
 
 import pytest
+from graphon.file import File, FileTransferMethod, FileType
 
 from core.agent.entities import AgentInvokeMessage
 from core.plugin.utils.chunk_merger import FileChunk, merge_blob_chunks
 from core.plugin.utils.converter import convert_parameters_to_plugin_format
 from core.tools.entities.tool_entities import ToolInvokeMessage, ToolParameter, ToolSelector
-from graphon.file import File, FileTransferMethod, FileType
 
 
 class TestChunkMerger:
diff --git a/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py b/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py
index 395d392127..2b280dd674 100644
--- a/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py
+++ b/api/tests/unit_tests/core/prompt/test_advanced_prompt_transform.py
@@ -2,13 +2,6 @@ from typing import cast
 from unittest.mock import MagicMock, patch
 
 import pytest
-
-from configs import dify_config
-from core.app.app_config.entities import ModelConfigEntity
-from core.memory.token_buffer_memory import TokenBufferMemory
-from core.prompt.advanced_prompt_transform import AdvancedPromptTransform
-from core.prompt.entities.advanced_prompt_entities import ChatModelMessage, CompletionModelPromptTemplate, MemoryConfig
-from core.prompt.utils.prompt_template_parser import PromptTemplateParser
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.model_runtime.entities.message_entities import (
     AssistantPromptMessage,
@@ -18,6 +11,13 @@ from graphon.model_runtime.entities.message_entities import (
     TextPromptMessageContent,
     UserPromptMessage,
 )
+
+from configs import dify_config
+from core.app.app_config.entities import ModelConfigEntity
+from core.memory.token_buffer_memory import TokenBufferMemory
+from core.prompt.advanced_prompt_transform import AdvancedPromptTransform
+from core.prompt.entities.advanced_prompt_entities import ChatModelMessage, CompletionModelPromptTemplate, MemoryConfig
+from core.prompt.utils.prompt_template_parser import PromptTemplateParser
 from models.model import Conversation
 
 
diff --git a/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py b/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py
index 803afa54d7..4a54649b28 100644
--- a/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py
+++ b/api/tests/unit_tests/core/prompt/test_agent_history_prompt_transform.py
@@ -1,11 +1,5 @@
 from unittest.mock import MagicMock
 
-from core.app.entities.app_invoke_entities import (
-    ModelConfigWithCredentialsEntity,
-)
-from core.entities.provider_configuration import ProviderModelBundle
-from core.memory.token_buffer_memory import TokenBufferMemory
-from core.prompt.agent_history_prompt_transform import AgentHistoryPromptTransform
 from graphon.model_runtime.entities.message_entities import (
     AssistantPromptMessage,
     SystemPromptMessage,
@@ -13,6 +7,13 @@ from graphon.model_runtime.entities.message_entities import (
     UserPromptMessage,
 )
 from graphon.model_runtime.model_providers.__base.large_language_model import LargeLanguageModel
+
+from core.app.entities.app_invoke_entities import (
+    ModelConfigWithCredentialsEntity,
+)
+from core.entities.provider_configuration import ProviderModelBundle
+from core.memory.token_buffer_memory import TokenBufferMemory
+from core.prompt.agent_history_prompt_transform import AgentHistoryPromptTransform
 from models.model import Conversation
 
 
diff --git a/api/tests/unit_tests/core/prompt/test_prompt_message.py b/api/tests/unit_tests/core/prompt/test_prompt_message.py
index 5d865d934c..a4b3960b0a 100644
--- a/api/tests/unit_tests/core/prompt/test_prompt_message.py
+++ b/api/tests/unit_tests/core/prompt/test_prompt_message.py
@@ -1,5 +1,3 @@
-from core.prompt.simple_prompt_transform import ModelMode
-from core.prompt.utils.prompt_message_util import PromptMessageUtil
 from graphon.model_runtime.entities.message_entities import (
     AssistantPromptMessage,
     AudioPromptMessageContent,
@@ -9,6 +7,9 @@ from graphon.model_runtime.entities.message_entities import (
     UserPromptMessage,
 )
 
+from core.prompt.simple_prompt_transform import ModelMode
+from core.prompt.utils.prompt_message_util import PromptMessageUtil
+
 
 def test_build_prompt_message_with_prompt_message_contents():
     prompt = UserPromptMessage(content=[TextPromptMessageContent(data="Hello, World!")])
diff --git a/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py b/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py
index 4b8175b0b4..408cf14a51 100644
--- a/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py
+++ b/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py
@@ -49,10 +49,6 @@ from unittest.mock import Mock, patch
 
 import numpy as np
 import pytest
-from sqlalchemy.exc import IntegrityError
-
-from core.entities.embedding_type import EmbeddingInputType
-from core.rag.embedding.cached_embedding import CacheEmbedding
 from graphon.model_runtime.entities.model_entities import ModelPropertyKey
 from graphon.model_runtime.entities.text_embedding_entities import EmbeddingResult, EmbeddingUsage
 from graphon.model_runtime.errors.invoke import (
@@ -60,6 +56,10 @@ from graphon.model_runtime.errors.invoke import (
     InvokeConnectionError,
     InvokeRateLimitError,
 )
+from sqlalchemy.exc import IntegrityError
+
+from core.entities.embedding_type import EmbeddingInputType
+from core.rag.embedding.cached_embedding import CacheEmbedding
 from models.dataset import Embedding
 
 
diff --git a/api/tests/unit_tests/core/rag/indexing/test_indexing_runner.py b/api/tests/unit_tests/core/rag/indexing/test_indexing_runner.py
index 7c4defc180..641c5d9ba0 100644
--- a/api/tests/unit_tests/core/rag/indexing/test_indexing_runner.py
+++ b/api/tests/unit_tests/core/rag/indexing/test_indexing_runner.py
@@ -53,6 +53,7 @@ from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 
 import pytest
+from graphon.model_runtime.entities.model_entities import ModelType
 from sqlalchemy.orm.exc import ObjectDeletedError
 
 from core.errors.error import ProviderTokenNotInitError
@@ -63,7 +64,6 @@ from core.indexing_runner import (
 )
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
 from core.rag.models.document import ChildDocument, Document
-from graphon.model_runtime.entities.model_entities import ModelType
 from libs.datetime_utils import naive_utc_now
 from models.dataset import Dataset, DatasetProcessRule
 from models.dataset import Document as DatasetDocument
diff --git a/api/tests/unit_tests/core/repositories/test_celery_workflow_execution_repository.py b/api/tests/unit_tests/core/repositories/test_celery_workflow_execution_repository.py
index 3d3322094e..e229d5fc1a 100644
--- a/api/tests/unit_tests/core/repositories/test_celery_workflow_execution_repository.py
+++ b/api/tests/unit_tests/core/repositories/test_celery_workflow_execution_repository.py
@@ -9,10 +9,10 @@ from unittest.mock import Mock, patch
 from uuid import uuid4
 
 import pytest
-
-from core.repositories.celery_workflow_execution_repository import CeleryWorkflowExecutionRepository
 from graphon.entities import WorkflowExecution
 from graphon.enums import WorkflowType
+
+from core.repositories.celery_workflow_execution_repository import CeleryWorkflowExecutionRepository
 from libs.datetime_utils import naive_utc_now
 from models import Account, EndUser
 from models.enums import WorkflowRunTriggeredFrom
diff --git a/api/tests/unit_tests/core/repositories/test_celery_workflow_node_execution_repository.py b/api/tests/unit_tests/core/repositories/test_celery_workflow_node_execution_repository.py
index 05b4f3a053..7dbf78d0f0 100644
--- a/api/tests/unit_tests/core/repositories/test_celery_workflow_node_execution_repository.py
+++ b/api/tests/unit_tests/core/repositories/test_celery_workflow_node_execution_repository.py
@@ -9,14 +9,14 @@ from unittest.mock import Mock, patch
 from uuid import uuid4
 
 import pytest
-
-from core.repositories.celery_workflow_node_execution_repository import CeleryWorkflowNodeExecutionRepository
-from core.repositories.factory import OrderConfig
 from graphon.entities.workflow_node_execution import (
     WorkflowNodeExecution,
     WorkflowNodeExecutionStatus,
 )
 from graphon.enums import BuiltinNodeTypes
+
+from core.repositories.celery_workflow_node_execution_repository import CeleryWorkflowNodeExecutionRepository
+from core.repositories.factory import OrderConfig
 from libs.datetime_utils import naive_utc_now
 from models import Account, EndUser
 from models.workflow import WorkflowNodeExecutionTriggeredFrom
diff --git a/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py b/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py
index 8be1ac318c..0fc82dda53 100644
--- a/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py
+++ b/api/tests/unit_tests/core/repositories/test_human_input_form_repository_impl.py
@@ -7,6 +7,11 @@ from datetime import datetime
 from types import SimpleNamespace
 
 import pytest
+from graphon.nodes.human_input.entities import (
+    FormDefinition,
+    UserAction,
+)
+from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 
 from core.repositories.human_input_repository import (
     HumanInputFormRecord,
@@ -21,11 +26,6 @@ from core.workflow.human_input_compat import (
     ExternalRecipient,
     MemberRecipient,
 )
-from graphon.nodes.human_input.entities import (
-    FormDefinition,
-    UserAction,
-)
-from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
 from libs.datetime_utils import naive_utc_now
 from models.human_input import (
     EmailExternalRecipientPayload,
diff --git a/api/tests/unit_tests/core/repositories/test_workflow_node_execution_conflict_handling.py b/api/tests/unit_tests/core/repositories/test_workflow_node_execution_conflict_handling.py
index abdbc72085..84fe522388 100644
--- a/api/tests/unit_tests/core/repositories/test_workflow_node_execution_conflict_handling.py
+++ b/api/tests/unit_tests/core/repositories/test_workflow_node_execution_conflict_handling.py
@@ -4,17 +4,17 @@ from unittest.mock import MagicMock, Mock
 
 import psycopg2.errors
 import pytest
+from graphon.entities.workflow_node_execution import (
+    WorkflowNodeExecution,
+    WorkflowNodeExecutionStatus,
+)
+from graphon.enums import BuiltinNodeTypes
 from sqlalchemy.exc import IntegrityError
 from sqlalchemy.orm import sessionmaker
 
 from core.repositories.sqlalchemy_workflow_node_execution_repository import (
     SQLAlchemyWorkflowNodeExecutionRepository,
 )
-from graphon.entities.workflow_node_execution import (
-    WorkflowNodeExecution,
-    WorkflowNodeExecutionStatus,
-)
-from graphon.enums import BuiltinNodeTypes
 from libs.datetime_utils import naive_utc_now
 from models import Account, WorkflowNodeExecutionTriggeredFrom
 
diff --git a/api/tests/unit_tests/core/repositories/test_workflow_node_execution_truncation.py b/api/tests/unit_tests/core/repositories/test_workflow_node_execution_truncation.py
index 5af1376a0a..27729e7f06 100644
--- a/api/tests/unit_tests/core/repositories/test_workflow_node_execution_truncation.py
+++ b/api/tests/unit_tests/core/repositories/test_workflow_node_execution_truncation.py
@@ -11,17 +11,17 @@ from datetime import UTC, datetime
 from typing import Any
 from unittest.mock import MagicMock
 
+from graphon.entities.workflow_node_execution import (
+    WorkflowNodeExecution,
+    WorkflowNodeExecutionStatus,
+)
+from graphon.enums import BuiltinNodeTypes
 from sqlalchemy import Engine
 
 from configs import dify_config
 from core.repositories.sqlalchemy_workflow_node_execution_repository import (
     SQLAlchemyWorkflowNodeExecutionRepository,
 )
-from graphon.entities.workflow_node_execution import (
-    WorkflowNodeExecution,
-    WorkflowNodeExecutionStatus,
-)
-from graphon.enums import BuiltinNodeTypes
 from models import Account, WorkflowNodeExecutionTriggeredFrom
 from models.enums import ExecutionOffLoadType
 from models.workflow import WorkflowNodeExecutionModel, WorkflowNodeExecutionOffload
diff --git a/api/tests/unit_tests/core/test_file.py b/api/tests/unit_tests/core/test_file.py
index f17927f16b..ac65d0c02b 100644
--- a/api/tests/unit_tests/core/test_file.py
+++ b/api/tests/unit_tests/core/test_file.py
@@ -1,6 +1,7 @@
 import json
 
 from graphon.file import File, FileTransferMethod, FileType, FileUploadConfig
+
 from models.workflow import Workflow
 
 
diff --git a/api/tests/unit_tests/core/test_model_manager.py b/api/tests/unit_tests/core/test_model_manager.py
index afea9144c0..f5efb78b61 100644
--- a/api/tests/unit_tests/core/test_model_manager.py
+++ b/api/tests/unit_tests/core/test_model_manager.py
@@ -2,12 +2,12 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 import redis
+from graphon.model_runtime.entities.model_entities import ModelType
 from pytest_mock import MockerFixture
 
 from core.entities.provider_entities import ModelLoadBalancingConfiguration
 from core.model_manager import LBModelManager
 from extensions.ext_redis import redis_client
-from graphon.model_runtime.entities.model_entities import ModelType
 
 
 @pytest.fixture
diff --git a/api/tests/unit_tests/core/test_provider_configuration.py b/api/tests/unit_tests/core/test_provider_configuration.py
index b19a21d7f4..331166fe63 100644
--- a/api/tests/unit_tests/core/test_provider_configuration.py
+++ b/api/tests/unit_tests/core/test_provider_configuration.py
@@ -1,6 +1,15 @@
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.model_runtime.entities.common_entities import I18nObject
+from graphon.model_runtime.entities.model_entities import ModelType
+from graphon.model_runtime.entities.provider_entities import (
+    ConfigurateMethod,
+    CredentialFormSchema,
+    FormOption,
+    FormType,
+    ProviderEntity,
+)
 
 from core.entities.provider_configuration import ProviderConfiguration, SystemConfigurationStatus
 from core.entities.provider_entities import (
@@ -12,15 +21,6 @@ from core.entities.provider_entities import (
     RestrictModel,
     SystemConfiguration,
 )
-from graphon.model_runtime.entities.common_entities import I18nObject
-from graphon.model_runtime.entities.model_entities import ModelType
-from graphon.model_runtime.entities.provider_entities import (
-    ConfigurateMethod,
-    CredentialFormSchema,
-    FormOption,
-    FormType,
-    ProviderEntity,
-)
 from models.provider import Provider, ProviderType
 
 
diff --git a/api/tests/unit_tests/core/tools/utils/test_workflow_configuration_sync.py b/api/tests/unit_tests/core/tools/utils/test_workflow_configuration_sync.py
index 43f3fbd5c9..0e3a7e623a 100644
--- a/api/tests/unit_tests/core/tools/utils/test_workflow_configuration_sync.py
+++ b/api/tests/unit_tests/core/tools/utils/test_workflow_configuration_sync.py
@@ -1,9 +1,9 @@
 import pytest
+from graphon.variables.input_entities import VariableEntity, VariableEntityType
 
 from core.tools.entities.tool_entities import ToolParameter, WorkflowToolParameterConfiguration
 from core.tools.errors import WorkflowToolHumanInputNotSupportedError
 from core.tools.utils.workflow_configuration_sync import WorkflowToolConfigurationUtils
-from graphon.variables.input_entities import VariableEntity, VariableEntityType
 
 
 def test_ensure_no_human_input_nodes_passes_for_non_human_input():
diff --git a/api/tests/unit_tests/core/tools/workflow_as_tool/test_tool.py b/api/tests/unit_tests/core/tools/workflow_as_tool/test_tool.py
index 72a73dd936..c20edd7400 100644
--- a/api/tests/unit_tests/core/tools/workflow_as_tool/test_tool.py
+++ b/api/tests/unit_tests/core/tools/workflow_as_tool/test_tool.py
@@ -11,6 +11,7 @@ from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 
 import pytest
+from graphon.file import FILE_MODEL_IDENTITY, FileTransferMethod, FileType
 
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.tools.__base.tool_runtime import ToolRuntime
@@ -24,7 +25,6 @@ from core.tools.entities.tool_entities import (
 )
 from core.tools.errors import ToolInvokeError
 from core.tools.workflow_as_tool.tool import WorkflowTool
-from graphon.file import FILE_MODEL_IDENTITY, FileTransferMethod, FileType
 
 
 class StubScalars:
diff --git a/api/tests/unit_tests/core/variables/test_segment.py b/api/tests/unit_tests/core/variables/test_segment.py
index 72052c8c05..7406b88270 100644
--- a/api/tests/unit_tests/core/variables/test_segment.py
+++ b/api/tests/unit_tests/core/variables/test_segment.py
@@ -2,11 +2,6 @@ import dataclasses
 
 import orjson
 import pytest
-from pydantic import BaseModel
-
-from core.helper import encrypter
-from core.workflow.system_variables import build_bootstrap_variables, build_system_variables
-from core.workflow.variable_pool_initializer import add_variables_to_pool
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.runtime import VariablePool
 from graphon.variables.segment_group import SegmentGroup
@@ -47,6 +42,11 @@ from graphon.variables.variables import (
     StringVariable,
     Variable,
 )
+from pydantic import BaseModel
+
+from core.helper import encrypter
+from core.workflow.system_variables import build_bootstrap_variables, build_system_variables
+from core.workflow.variable_pool_initializer import add_variables_to_pool
 
 
 def _build_variable_pool(
diff --git a/api/tests/unit_tests/core/variables/test_segment_type.py b/api/tests/unit_tests/core/variables/test_segment_type.py
index d4e862220a..37ecd2890b 100644
--- a/api/tests/unit_tests/core/variables/test_segment_type.py
+++ b/api/tests/unit_tests/core/variables/test_segment_type.py
@@ -1,5 +1,4 @@
 import pytest
-
 from graphon.variables.segment_group import SegmentGroup
 from graphon.variables.segments import StringSegment
 from graphon.variables.types import ArrayValidation, SegmentType
diff --git a/api/tests/unit_tests/core/variables/test_segment_type_validation.py b/api/tests/unit_tests/core/variables/test_segment_type_validation.py
index 94e788edb2..09254e17a3 100644
--- a/api/tests/unit_tests/core/variables/test_segment_type_validation.py
+++ b/api/tests/unit_tests/core/variables/test_segment_type_validation.py
@@ -9,7 +9,6 @@ from dataclasses import dataclass
 from typing import Any
 
 import pytest
-
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.variables.segment_group import SegmentGroup
 from graphon.variables.segments import (
diff --git a/api/tests/unit_tests/core/variables/test_variables.py b/api/tests/unit_tests/core/variables/test_variables.py
index dae5e1ce98..75b01bf42e 100644
--- a/api/tests/unit_tests/core/variables/test_variables.py
+++ b/api/tests/unit_tests/core/variables/test_variables.py
@@ -1,6 +1,4 @@
 import pytest
-from pydantic import ValidationError
-
 from graphon.variables import (
     ArrayFileVariable,
     ArrayVariable,
@@ -12,6 +10,7 @@ from graphon.variables import (
     StringVariable,
 )
 from graphon.variables.variables import VariableBase
+from pydantic import ValidationError
 
 
 def test_frozen_variables():
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
index 025d79b25d..41627f5e0b 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
@@ -5,13 +5,12 @@ Shared fixtures for ObservabilityLayer tests.
 from unittest.mock import MagicMock, patch
 
 import pytest
+from graphon.enums import BuiltinNodeTypes
 from opentelemetry.sdk.trace import TracerProvider
 from opentelemetry.sdk.trace.export import SimpleSpanProcessor
 from opentelemetry.sdk.trace.export.in_memory_span_exporter import InMemorySpanExporter
 from opentelemetry.trace import set_tracer_provider
 
-from graphon.enums import BuiltinNodeTypes
-
 
 @pytest.fixture
 def memory_span_exporter():
@@ -62,9 +61,10 @@ def mock_llm_node():
 @pytest.fixture
 def mock_tool_node():
     """Create a mock Tool Node with tool-specific attributes."""
-    from core.tools.entities.tool_entities import ToolProviderType
     from graphon.nodes.tool.entities import ToolNodeData
 
+    from core.tools.entities.tool_entities import ToolProviderType
+
     node = MagicMock()
     node.id = "test-tool-node-id"
     node.title = "Test Tool Node"
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
index 919f15efd0..9cf72763ee 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
@@ -13,10 +13,10 @@ Test coverage:
 from unittest.mock import patch
 
 import pytest
+from graphon.enums import BuiltinNodeTypes
 from opentelemetry.trace import StatusCode
 
 from core.app.workflow.layers.observability import ObservabilityLayer
-from graphon.enums import BuiltinNodeTypes
 
 
 class TestObservabilityLayerInitialization:
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py
index 76b2984a4b..88989db856 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_factory.py
@@ -7,11 +7,12 @@ requiring external services (LLM, Agent, Tool, Knowledge Retrieval, HTTP Request
 
 from typing import TYPE_CHECKING, Any
 
-from core.workflow.node_factory import DifyNodeFactory
 from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.enums import BuiltinNodeTypes, NodeType
 from graphon.nodes.base.node import Node
 
+from core.workflow.node_factory import DifyNodeFactory
+
 from .test_mock_nodes import (
     MockAgentNode,
     MockCodeNode,
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py
index 971b9b2bbf..8b7fbd1b30 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_mock_nodes.py
@@ -10,10 +10,6 @@ from collections.abc import Generator, Mapping
 from typing import TYPE_CHECKING, Any, Optional
 from unittest.mock import MagicMock
 
-from core.model_manager import ModelInstance
-from core.workflow.node_runtime import DifyToolNodeRuntime
-from core.workflow.nodes.agent import AgentNode
-from core.workflow.nodes.knowledge_retrieval.knowledge_retrieval_node import KnowledgeRetrievalNode
 from graphon.enums import WorkflowNodeExecutionMetadataKey, WorkflowNodeExecutionStatus
 from graphon.model_runtime.entities.llm_entities import LLMUsage
 from graphon.node_events import NodeRunResult, StreamChunkEvent, StreamCompletedEvent
@@ -31,6 +27,11 @@ from graphon.nodes.template_transform import TemplateTransformNode
 from graphon.nodes.tool import ToolNode
 from graphon.template_rendering import Jinja2TemplateRenderer, TemplateRenderError
 
+from core.model_manager import ModelInstance
+from core.workflow.node_runtime import DifyToolNodeRuntime
+from core.workflow.nodes.agent import AgentNode
+from core.workflow.nodes.knowledge_retrieval.knowledge_retrieval_node import KnowledgeRetrievalNode
+
 if TYPE_CHECKING:
     from graphon.entities import GraphInitParams
     from graphon.runtime import GraphRuntimeState
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py b/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py
index 55a329eba9..8311a1e847 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_parallel_human_input_join_resume.py
@@ -4,13 +4,6 @@ from dataclasses import dataclass
 from datetime import datetime, timedelta
 from typing import Any, Protocol
 
-from core.repositories.human_input_repository import (
-    FormCreateParams,
-    HumanInputFormEntity,
-    HumanInputFormRepository,
-)
-from core.workflow.node_runtime import DifyHumanInputNodeRuntime
-from core.workflow.system_variables import build_system_variables
 from graphon.entities import WorkflowStartReason
 from graphon.graph import Graph
 from graphon.graph_engine import GraphEngine, GraphEngineConfig
@@ -30,6 +23,14 @@ from graphon.nodes.human_input.human_input_node import HumanInputNode
 from graphon.nodes.start.entities import StartNodeData
 from graphon.nodes.start.start_node import StartNode
 from graphon.runtime import GraphRuntimeState, VariablePool
+
+from core.repositories.human_input_repository import (
+    FormCreateParams,
+    HumanInputFormEntity,
+    HumanInputFormRepository,
+)
+from core.workflow.node_runtime import DifyHumanInputNodeRuntime
+from core.workflow.system_variables import build_system_variables
 from libs.datetime_utils import naive_utc_now
 from tests.workflow_test_utils import build_test_graph_init_params
 
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/test_table_runner.py b/api/tests/unit_tests/core/workflow/graph_engine/test_table_runner.py
index 7d23b63049..b11f957677 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/test_table_runner.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/test_table_runner.py
@@ -19,11 +19,6 @@ from functools import lru_cache
 from pathlib import Path
 from typing import Any
 
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
-from core.tools.utils.yaml_utils import _load_yaml_file
-from core.workflow.node_factory import DifyNodeFactory, get_default_root_node_id
-from core.workflow.system_variables import build_bootstrap_variables, build_system_variables
-from core.workflow.variable_pool_initializer import add_node_inputs_to_pool, add_variables_to_pool
 from graphon.entities import GraphInitParams
 from graphon.graph import Graph
 from graphon.graph_engine import GraphEngine, GraphEngineConfig
@@ -44,6 +39,12 @@ from graphon.variables import (
     StringVariable,
 )
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
+from core.tools.utils.yaml_utils import _load_yaml_file
+from core.workflow.node_factory import DifyNodeFactory, get_default_root_node_id
+from core.workflow.system_variables import build_bootstrap_variables, build_system_variables
+from core.workflow.variable_pool_initializer import add_node_inputs_to_pool, add_variables_to_pool
+
 from .test_mock_config import MockConfig
 from .test_mock_factory import MockNodeFactory
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py b/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py
index 9c0ad25b58..7195471eb6 100644
--- a/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py
+++ b/api/tests/unit_tests/core/workflow/nodes/answer/test_answer.py
@@ -2,14 +2,15 @@ import time
 import uuid
 from unittest.mock import MagicMock
 
+from graphon.enums import WorkflowNodeExecutionStatus
+from graphon.graph import Graph
+from graphon.nodes.answer.answer_node import AnswerNode
+from graphon.runtime import GraphRuntimeState, VariablePool
+
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from core.workflow.node_factory import DifyNodeFactory
 from core.workflow.system_variables import build_system_variables
 from extensions.ext_database import db
-from graphon.enums import WorkflowNodeExecutionStatus
-from graphon.graph import Graph
-from graphon.nodes.answer.answer_node import AnswerNode
-from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/base/test_base_node.py b/api/tests/unit_tests/core/workflow/nodes/base/test_base_node.py
index ec4cef1955..343bcd3919 100644
--- a/api/tests/unit_tests/core/workflow/nodes/base/test_base_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/base/test_base_node.py
@@ -1,10 +1,10 @@
 import pytest
-
-from core.workflow.node_factory import get_node_type_classes_mapping
 from graphon.entities.base_node_data import BaseNodeData
 from graphon.enums import BuiltinNodeTypes, NodeType
 from graphon.nodes.base.node import Node
 
+from core.workflow.node_factory import get_node_type_classes_mapping
+
 # Ensures that all production node classes are imported and registered.
 _ = get_node_type_classes_mapping()
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/base/test_get_node_type_classes_mapping.py b/api/tests/unit_tests/core/workflow/nodes/base/test_get_node_type_classes_mapping.py
index ef0df55995..b9371a34f4 100644
--- a/api/tests/unit_tests/core/workflow/nodes/base/test_get_node_type_classes_mapping.py
+++ b/api/tests/unit_tests/core/workflow/nodes/base/test_get_node_type_classes_mapping.py
@@ -1,7 +1,6 @@
 import types
 from collections.abc import Mapping
 
-from core.workflow.node_factory import get_node_type_classes_mapping
 from graphon.entities.base_node_data import BaseNodeData
 from graphon.enums import BuiltinNodeTypes, NodeType
 from graphon.nodes.base.node import Node
@@ -14,6 +13,8 @@ from graphon.nodes.variable_assigner.v2.node import (
     VariableAssignerNode as VariableAssignerV2,
 )
 
+from core.workflow.node_factory import get_node_type_classes_mapping
+
 
 def test_variable_assigner_latest_prefers_highest_numeric_version():
     # Act
diff --git a/api/tests/unit_tests/core/workflow/nodes/code/code_node_spec.py b/api/tests/unit_tests/core/workflow/nodes/code/code_node_spec.py
index ce0c9b79c6..d155124c50 100644
--- a/api/tests/unit_tests/core/workflow/nodes/code/code_node_spec.py
+++ b/api/tests/unit_tests/core/workflow/nodes/code/code_node_spec.py
@@ -1,4 +1,3 @@
-from configs import dify_config
 from graphon.nodes.code.code_node import CodeNode
 from graphon.nodes.code.entities import CodeLanguage, CodeNodeData
 from graphon.nodes.code.exc import (
@@ -9,6 +8,8 @@ from graphon.nodes.code.exc import (
 from graphon.nodes.code.limits import CodeNodeLimits
 from graphon.variables.types import SegmentType
 
+from configs import dify_config
+
 CodeNode._limits = CodeNodeLimits(
     max_string_length=dify_config.CODE_MAX_STRING_LENGTH,
     max_number=dify_config.CODE_MAX_NUMBER,
diff --git a/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py b/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py
index 9cceadde49..fb03ae9998 100644
--- a/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/datasource/test_datasource_node.py
@@ -1,8 +1,9 @@
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
-from core.workflow.nodes.datasource.datasource_node import DatasourceNode
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.node_events import NodeRunResult, StreamChunkEvent, StreamCompletedEvent
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
+from core.workflow.nodes.datasource.datasource_node import DatasourceNode
+
 
 class _VarSeg:
     def __init__(self, v):
diff --git a/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_executor.py b/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_executor.py
index be7cc073db..a5026b40cf 100644
--- a/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_executor.py
+++ b/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_executor.py
@@ -1,8 +1,4 @@
 import pytest
-
-from configs import dify_config
-from core.helper.ssrf_proxy import ssrf_proxy
-from core.workflow.system_variables import default_system_variables
 from graphon.file.file_manager import file_manager
 from graphon.nodes.http_request import (
     BodyData,
@@ -16,6 +12,10 @@ from graphon.nodes.http_request.exc import AuthorizationConfigError
 from graphon.nodes.http_request.executor import Executor
 from graphon.runtime import VariablePool
 
+from configs import dify_config
+from core.helper.ssrf_proxy import ssrf_proxy
+from core.workflow.system_variables import default_system_variables
+
 HTTP_REQUEST_CONFIG = HttpRequestNodeConfig(
     max_connect_timeout=dify_config.HTTP_REQUEST_MAX_CONNECT_TIMEOUT,
     max_read_timeout=dify_config.HTTP_REQUEST_MAX_READ_TIMEOUT,
diff --git a/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py b/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py
index a3cadc0681..4705b3f76e 100644
--- a/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/http_request/test_http_request_node.py
@@ -3,17 +3,17 @@ from typing import Any
 
 import httpx
 import pytest
+from graphon.enums import WorkflowNodeExecutionStatus
+from graphon.file.file_manager import file_manager
+from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, HttpRequestNode, HttpRequestNodeConfig
+from graphon.nodes.http_request.entities import HttpRequestNodeTimeout, Response
+from graphon.runtime import GraphRuntimeState, VariablePool
 
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from core.helper.ssrf_proxy import ssrf_proxy
 from core.tools.tool_file_manager import ToolFileManager
 from core.workflow.node_runtime import DifyFileReferenceFactory
 from core.workflow.system_variables import build_system_variables
-from graphon.enums import WorkflowNodeExecutionStatus
-from graphon.file.file_manager import file_manager
-from graphon.nodes.http_request import HTTP_REQUEST_CONFIG_FILTER_KEY, HttpRequestNode, HttpRequestNodeConfig
-from graphon.nodes.http_request.entities import HttpRequestNodeTimeout, Response
-from graphon.runtime import GraphRuntimeState, VariablePool
 from tests.workflow_test_utils import build_test_graph_init_params
 
 HTTP_REQUEST_CONFIG = HttpRequestNodeConfig(
diff --git a/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py b/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py
index 1d6a4da7c4..d16e1233ac 100644
--- a/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py
+++ b/api/tests/unit_tests/core/workflow/nodes/human_input/test_email_delivery_config.py
@@ -1,6 +1,7 @@
-from core.workflow.human_input_compat import EmailDeliveryConfig, EmailRecipients
 from graphon.runtime import VariablePool
 
+from core.workflow.human_input_compat import EmailDeliveryConfig, EmailRecipients
+
 
 def test_render_body_template_replaces_variable_values():
     config = EmailDeliveryConfig(
diff --git a/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py b/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py
index bc98028d5b..52802c7ce1 100644
--- a/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py
+++ b/api/tests/unit_tests/core/workflow/nodes/human_input/test_human_input_form_filled_event.py
@@ -1,9 +1,6 @@
 import datetime
 from types import SimpleNamespace
 
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
-from core.workflow.node_runtime import DifyHumanInputNodeRuntime
-from core.workflow.system_variables import default_system_variables
 from graphon.entities import GraphInitParams
 from graphon.enums import BuiltinNodeTypes
 from graphon.graph_events import (
@@ -14,6 +11,10 @@ from graphon.graph_events import (
 from graphon.nodes.human_input.enums import HumanInputFormStatus
 from graphon.nodes.human_input.human_input_node import HumanInputNode
 from graphon.runtime import GraphRuntimeState, VariablePool
+
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
+from core.workflow.node_runtime import DifyHumanInputNodeRuntime
+from core.workflow.system_variables import default_system_variables
 from libs.datetime_utils import naive_utc_now
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py b/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py
index 45e8ae7d20..ab64be59ad 100644
--- a/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/knowledge_retrieval/test_knowledge_retrieval_node.py
@@ -3,6 +3,10 @@ import uuid
 from unittest.mock import Mock
 
 import pytest
+from graphon.enums import WorkflowNodeExecutionStatus
+from graphon.model_runtime.entities.llm_entities import LLMUsage
+from graphon.runtime import GraphRuntimeState, VariablePool
+from graphon.variables import StringSegment
 
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from core.workflow.nodes.knowledge_retrieval.entities import (
@@ -17,10 +21,6 @@ from core.workflow.nodes.knowledge_retrieval.exc import RateLimitExceededError
 from core.workflow.nodes.knowledge_retrieval.knowledge_retrieval_node import KnowledgeRetrievalNode
 from core.workflow.nodes.knowledge_retrieval.retrieval import RAGRetrievalProtocol, Source
 from core.workflow.system_variables import build_system_variables
-from graphon.enums import WorkflowNodeExecutionStatus
-from graphon.model_runtime.entities.llm_entities import LLMUsage
-from graphon.runtime import GraphRuntimeState, VariablePool
-from graphon.variables import StringSegment
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py b/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py
index eca34f05be..fdf1706765 100644
--- a/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py
+++ b/api/tests/unit_tests/core/workflow/nodes/list_operator/node_spec.py
@@ -1,14 +1,14 @@
 from unittest.mock import MagicMock
 
 import pytest
-
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
 from graphon.entities import GraphInitParams
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
 from graphon.nodes.list_operator.node import ListOperatorNode
 from graphon.runtime import GraphRuntimeState
 from graphon.variables import ArrayNumberSegment, ArrayStringSegment
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY
+
 
 class TestListOperatorNode:
     """Comprehensive tests for ListOperatorNode."""
diff --git a/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py b/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py
index b1f81b6c48..7841bf05ad 100644
--- a/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/llm/test_node.py
@@ -5,19 +5,6 @@ from collections.abc import Sequence
 from unittest import mock
 
 import pytest
-
-from core.app.entities.app_invoke_entities import DifyRunContext, InvokeFrom, ModelConfigWithCredentialsEntity, UserFrom
-from core.app.llm.model_access import (
-    DifyCredentialsProvider,
-    DifyModelFactory,
-    build_dify_model_access,
-    fetch_model_config,
-)
-from core.entities.provider_configuration import ProviderConfiguration, ProviderModelBundle
-from core.entities.provider_entities import CustomConfiguration, SystemConfiguration
-from core.plugin.impl.model_runtime_factory import create_plugin_model_runtime
-from core.prompt.entities.advanced_prompt_entities import MemoryConfig
-from core.workflow.system_variables import default_system_variables
 from graphon.entities import GraphInitParams
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.model_runtime.entities.common_entities import I18nObject
@@ -80,6 +67,19 @@ from graphon.nodes.llm.runtime_protocols import PromptMessageSerializerProtocol
 from graphon.runtime import GraphRuntimeState, VariablePool
 from graphon.template_rendering import TemplateRenderError
 from graphon.variables import ArrayAnySegment, ArrayFileSegment, NoneSegment
+
+from core.app.entities.app_invoke_entities import DifyRunContext, InvokeFrom, ModelConfigWithCredentialsEntity, UserFrom
+from core.app.llm.model_access import (
+    DifyCredentialsProvider,
+    DifyModelFactory,
+    build_dify_model_access,
+    fetch_model_config,
+)
+from core.entities.provider_configuration import ProviderConfiguration, ProviderModelBundle
+from core.entities.provider_entities import CustomConfiguration, SystemConfiguration
+from core.plugin.impl.model_runtime_factory import create_plugin_model_runtime
+from core.prompt.entities.advanced_prompt_entities import MemoryConfig
+from core.workflow.system_variables import default_system_variables
 from models.provider import ProviderType
 from tests.workflow_test_utils import build_test_graph_init_params
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/parameter_extractor/test_parameter_extractor_node.py b/api/tests/unit_tests/core/workflow/nodes/parameter_extractor/test_parameter_extractor_node.py
index 8f8ec49f14..1c362a0a03 100644
--- a/api/tests/unit_tests/core/workflow/nodes/parameter_extractor/test_parameter_extractor_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/parameter_extractor/test_parameter_extractor_node.py
@@ -6,8 +6,6 @@ from dataclasses import dataclass
 from typing import Any
 
 import pytest
-
-from factories.variable_factory import build_segment_with_type
 from graphon.model_runtime.entities import LLMMode
 from graphon.nodes.llm import ModelConfig, VisionConfig
 from graphon.nodes.parameter_extractor.entities import ParameterConfig, ParameterExtractorNodeData
@@ -20,6 +18,8 @@ from graphon.nodes.parameter_extractor.exc import (
 from graphon.nodes.parameter_extractor.parameter_extractor_node import ParameterExtractorNode
 from graphon.variables.types import SegmentType
 
+from factories.variable_factory import build_segment_with_type
+
 
 @dataclass
 class ValidTestCase:
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_base_node.py b/api/tests/unit_tests/core/workflow/nodes/test_base_node.py
index 0522dd9d14..e11ebf6eb8 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_base_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_base_node.py
@@ -1,16 +1,16 @@
 from collections.abc import Mapping
 
 import pytest
-
-from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
-from core.workflow.node_runtime import resolve_dify_run_context
-from core.workflow.system_variables import build_system_variables
 from graphon.entities import GraphInitParams
 from graphon.entities.base_node_data import BaseNodeData
 from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
 from graphon.enums import BuiltinNodeTypes
 from graphon.nodes.base.node import Node
 from graphon.runtime import GraphRuntimeState, VariablePool
+
+from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
+from core.workflow.node_runtime import resolve_dify_run_context
+from core.workflow.system_variables import build_system_variables
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py b/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py
index 87ec2d5bce..555ff0c945 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_document_extractor_node.py
@@ -4,8 +4,6 @@ from unittest.mock import Mock, patch
 import pandas as pd
 import pytest
 from docx.oxml.text.paragraph import CT_P
-
-from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from graphon.entities import GraphInitParams
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
 from graphon.file import File, FileTransferMethod
@@ -21,6 +19,8 @@ from graphon.nodes.document_extractor.node import (
 from graphon.variables import ArrayFileSegment
 from graphon.variables.segments import ArrayStringSegment
 from graphon.variables.variables import StringVariable
+
+from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_if_else.py b/api/tests/unit_tests/core/workflow/nodes/test_if_else.py
index 782750e02e..1b14f0ab13 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_if_else.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_if_else.py
@@ -3,11 +3,6 @@ import uuid
 from unittest.mock import MagicMock, Mock
 
 import pytest
-
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
-from core.workflow.node_factory import DifyNodeFactory
-from core.workflow.system_variables import build_system_variables
-from extensions.ext_database import db
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.graph import Graph
@@ -16,6 +11,11 @@ from graphon.nodes.if_else.if_else_node import IfElseNode
 from graphon.runtime import GraphRuntimeState, VariablePool
 from graphon.utils.condition.entities import Condition, SubCondition, SubVariableCondition
 from graphon.variables import ArrayFileSegment
+
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
+from core.workflow.node_factory import DifyNodeFactory
+from core.workflow.system_variables import build_system_variables
+from extensions.ext_database import db
 from tests.workflow_test_utils import build_test_graph_init_params
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py b/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py
index b217e4e8e7..d28c3e01e5 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_list_operator.py
@@ -1,8 +1,6 @@
 from unittest.mock import MagicMock
 
 import pytest
-
-from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
 from graphon.enums import WorkflowNodeExecutionStatus
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.nodes.list_operator.entities import (
@@ -18,6 +16,8 @@ from graphon.nodes.list_operator.exc import InvalidKeyError
 from graphon.nodes.list_operator.node import ListOperatorNode, _get_file_extract_string_func
 from graphon.variables import ArrayFileSegment
 
+from core.app.entities.app_invoke_entities import DIFY_RUN_CONTEXT_KEY, InvokeFrom, UserFrom
+
 
 @pytest.fixture
 def list_operator_node():
diff --git a/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py b/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
index 543f9878de..833c303052 100644
--- a/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
+++ b/api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py
@@ -2,16 +2,16 @@ import json
 import time
 
 import pytest
-from pydantic import ValidationError as PydanticValidationError
-
-from core.workflow.system_variables import build_system_variables
-from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, ENVIRONMENT_VARIABLE_NODE_ID
 from graphon.nodes.start.entities import StartNodeData
 from graphon.nodes.start.start_node import StartNode
 from graphon.runtime import GraphRuntimeState
 from graphon.variables import build_segment, segment_to_variable
 from graphon.variables.input_entities import VariableEntity, VariableEntityType
 from graphon.variables.variables import Variable
+from pydantic import ValidationError as PydanticValidationError
+
+from core.workflow.system_variables import build_system_variables
+from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, ENVIRONMENT_VARIABLE_NODE_ID
 from tests.workflow_test_utils import build_test_graph_init_params, build_test_variable_pool
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_exceptions.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_exceptions.py
index 617554ee17..f1132af02b 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_exceptions.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_exceptions.py
@@ -1,4 +1,5 @@
 import pytest
+from graphon.entities.exc import BaseNodeError
 
 from core.workflow.nodes.trigger_webhook.exc import (
     WebhookConfigError,
@@ -6,7 +7,6 @@ from core.workflow.nodes.trigger_webhook.exc import (
     WebhookNotFoundError,
     WebhookTimeoutError,
 )
-from graphon.entities.exc import BaseNodeError
 
 
 def test_webhook_node_error_inheritance():
diff --git a/api/tests/unit_tests/core/workflow/test_variable_pool.py b/api/tests/unit_tests/core/workflow/test_variable_pool.py
index dddd6eb00c..e7b2b2914a 100644
--- a/api/tests/unit_tests/core/workflow/test_variable_pool.py
+++ b/api/tests/unit_tests/core/workflow/test_variable_pool.py
@@ -2,15 +2,6 @@ import uuid
 from collections import defaultdict
 
 import pytest
-
-from core.workflow.system_variables import build_system_variables, system_variables_to_mapping
-from core.workflow.variable_pool_initializer import add_variables_to_pool
-from core.workflow.variable_prefixes import (
-    CONVERSATION_VARIABLE_NODE_ID,
-    ENVIRONMENT_VARIABLE_NODE_ID,
-    SYSTEM_VARIABLE_NODE_ID,
-)
-from factories.variable_factory import build_segment, segment_to_variable
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.runtime import VariablePool
 from graphon.variables import FileSegment, StringSegment
@@ -36,6 +27,15 @@ from graphon.variables.variables import (
     Variable,
 )
 
+from core.workflow.system_variables import build_system_variables, system_variables_to_mapping
+from core.workflow.variable_pool_initializer import add_variables_to_pool
+from core.workflow.variable_prefixes import (
+    CONVERSATION_VARIABLE_NODE_ID,
+    ENVIRONMENT_VARIABLE_NODE_ID,
+    SYSTEM_VARIABLE_NODE_ID,
+)
+from factories.variable_factory import build_segment, segment_to_variable
+
 
 @pytest.fixture
 def pool():
diff --git a/api/tests/unit_tests/core/workflow/test_workflow_entry.py b/api/tests/unit_tests/core/workflow/test_workflow_entry.py
index 041c5cc612..d8361d06c4 100644
--- a/api/tests/unit_tests/core/workflow/test_workflow_entry.py
+++ b/api/tests/unit_tests/core/workflow/test_workflow_entry.py
@@ -1,6 +1,12 @@
 from types import SimpleNamespace
 
 import pytest
+from graphon.entities.graph_config import NodeConfigDictAdapter
+from graphon.file import File, FileTransferMethod, FileType
+from graphon.nodes.code.code_node import CodeNode
+from graphon.nodes.code.limits import CodeNodeLimits
+from graphon.runtime import VariablePool
+from graphon.variables.variables import StringVariable
 
 from configs import dify_config
 from core.helper.code_executor.code_executor import CodeLanguage
@@ -10,12 +16,6 @@ from core.workflow.variable_prefixes import (
     ENVIRONMENT_VARIABLE_NODE_ID,
 )
 from core.workflow.workflow_entry import WorkflowEntry
-from graphon.entities.graph_config import NodeConfigDictAdapter
-from graphon.file import File, FileTransferMethod, FileType
-from graphon.nodes.code.code_node import CodeNode
-from graphon.nodes.code.limits import CodeNodeLimits
-from graphon.runtime import VariablePool
-from graphon.variables.variables import StringVariable
 
 
 @pytest.fixture(autouse=True)
diff --git a/api/tests/unit_tests/core/workflow/test_workflow_entry_redis_channel.py b/api/tests/unit_tests/core/workflow/test_workflow_entry_redis_channel.py
index 80dc8927fa..4b2f98aeff 100644
--- a/api/tests/unit_tests/core/workflow/test_workflow_entry_redis_channel.py
+++ b/api/tests/unit_tests/core/workflow/test_workflow_entry_redis_channel.py
@@ -2,11 +2,12 @@
 
 from unittest.mock import MagicMock, patch
 
-from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
-from core.workflow.workflow_entry import WorkflowEntry
 from graphon.graph_engine.command_channels import RedisChannel
 from graphon.runtime import GraphRuntimeState, VariablePool
 
+from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
+from core.workflow.workflow_entry import WorkflowEntry
+
 
 class TestWorkflowEntryRedisChannel:
     """Test suite for WorkflowEntry with Redis command channel."""
diff --git a/api/tests/unit_tests/factories/test_build_from_mapping.py b/api/tests/unit_tests/factories/test_build_from_mapping.py
index 511192001e..4fe3f2cb28 100644
--- a/api/tests/unit_tests/factories/test_build_from_mapping.py
+++ b/api/tests/unit_tests/factories/test_build_from_mapping.py
@@ -2,13 +2,13 @@ import uuid
 from unittest.mock import MagicMock, patch
 
 import pytest
+from graphon.file import File, FileTransferMethod, FileType, FileUploadConfig
 from httpx import Response
 
 from core.app.entities.app_invoke_entities import InvokeFrom, UserFrom
 from core.app.file_access import DatabaseFileAccessController, FileAccessScope, bind_file_access_scope
 from core.workflow.file_reference import build_file_reference, parse_file_reference, resolve_file_record_id
 from factories.file_factory.builders import build_from_mapping as _build_from_mapping
-from graphon.file import File, FileTransferMethod, FileType, FileUploadConfig
 from models import ToolFile, UploadFile
 
 # Test Data
diff --git a/api/tests/unit_tests/factories/test_variable_factory.py b/api/tests/unit_tests/factories/test_variable_factory.py
index c35e80a826..a06c42507d 100644
--- a/api/tests/unit_tests/factories/test_variable_factory.py
+++ b/api/tests/unit_tests/factories/test_variable_factory.py
@@ -4,11 +4,6 @@ from typing import Any
 from uuid import uuid4
 
 import pytest
-from hypothesis import HealthCheck, given, settings
-from hypothesis import strategies as st
-
-from factories import variable_factory
-from factories.variable_factory import TypeMismatchError, build_segment, build_segment_with_type
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.variables import (
     ArrayNumberVariable,
@@ -36,6 +31,11 @@ from graphon.variables.segments import (
     StringSegment,
 )
 from graphon.variables.types import SegmentType
+from hypothesis import HealthCheck, given, settings
+from hypothesis import strategies as st
+
+from factories import variable_factory
+from factories.variable_factory import TypeMismatchError, build_segment, build_segment_with_type
 
 
 def test_string_variable():
diff --git a/api/tests/unit_tests/libs/_human_input/test_form_service.py b/api/tests/unit_tests/libs/_human_input/test_form_service.py
index fa2c02020b..f1ce1a2c1c 100644
--- a/api/tests/unit_tests/libs/_human_input/test_form_service.py
+++ b/api/tests/unit_tests/libs/_human_input/test_form_service.py
@@ -5,7 +5,6 @@ Unit tests for FormService.
 from datetime import timedelta
 
 import pytest
-
 from graphon.nodes.human_input.entities import (
     FormInput,
     UserAction,
@@ -14,6 +13,7 @@ from graphon.nodes.human_input.enums import (
     FormInputType,
     TimeoutUnit,
 )
+
 from libs.datetime_utils import naive_utc_now
 
 from .support import (
diff --git a/api/tests/unit_tests/libs/_human_input/test_models.py b/api/tests/unit_tests/libs/_human_input/test_models.py
index 866ee61b3e..0babfbb315 100644
--- a/api/tests/unit_tests/libs/_human_input/test_models.py
+++ b/api/tests/unit_tests/libs/_human_input/test_models.py
@@ -5,7 +5,6 @@ Unit tests for human input form models.
 from datetime import datetime, timedelta
 
 import pytest
-
 from graphon.nodes.human_input.entities import (
     FormInput,
     UserAction,
@@ -14,6 +13,7 @@ from graphon.nodes.human_input.enums import (
     FormInputType,
     TimeoutUnit,
 )
+
 from libs.datetime_utils import naive_utc_now
 
 from .support import FormSubmissionData, FormSubmissionRequest, HumanInputForm
diff --git a/api/tests/unit_tests/models/test_conversation_variable.py b/api/tests/unit_tests/models/test_conversation_variable.py
index bb3a6db1a1..86163f1554 100644
--- a/api/tests/unit_tests/models/test_conversation_variable.py
+++ b/api/tests/unit_tests/models/test_conversation_variable.py
@@ -1,7 +1,8 @@
 from uuid import uuid4
 
-from factories import variable_factory
 from graphon.variables import SegmentType
+
+from factories import variable_factory
 from models import ConversationVariable
 
 
diff --git a/api/tests/unit_tests/models/test_model.py b/api/tests/unit_tests/models/test_model.py
index a87dd7f15a..3f6d6bfbe3 100644
--- a/api/tests/unit_tests/models/test_model.py
+++ b/api/tests/unit_tests/models/test_model.py
@@ -2,9 +2,9 @@ import importlib
 import types
 
 import pytest
+from graphon.file import FILE_MODEL_IDENTITY, FileTransferMethod
 
 from core.workflow.file_reference import build_file_reference
-from graphon.file import FILE_MODEL_IDENTITY, FileTransferMethod
 from models.model import Conversation, Message
 
 
diff --git a/api/tests/unit_tests/models/test_workflow.py b/api/tests/unit_tests/models/test_workflow.py
index f7bdc97eb5..e7c0479757 100644
--- a/api/tests/unit_tests/models/test_workflow.py
+++ b/api/tests/unit_tests/models/test_workflow.py
@@ -3,13 +3,14 @@ import json
 from unittest import mock
 from uuid import uuid4
 
+from graphon.file import File, FileTransferMethod, FileType
+from graphon.variables import FloatVariable, IntegerVariable, SecretVariable, StringVariable
+from graphon.variables.segments import IntegerSegment, Segment
+
 from constants import HIDDEN_VALUE
 from core.helper import encrypter
 from core.workflow.file_reference import build_file_reference
 from factories.variable_factory import build_segment
-from graphon.file import File, FileTransferMethod, FileType
-from graphon.variables import FloatVariable, IntegerVariable, SecretVariable, StringVariable
-from graphon.variables.segments import IntegerSegment, Segment
 from models.workflow import (
     Workflow,
     WorkflowDraftVariable,
diff --git a/api/tests/unit_tests/models/test_workflow_models.py b/api/tests/unit_tests/models/test_workflow_models.py
index eb9fef7587..507e1c8c3a 100644
--- a/api/tests/unit_tests/models/test_workflow_models.py
+++ b/api/tests/unit_tests/models/test_workflow_models.py
@@ -13,12 +13,12 @@ from datetime import UTC, datetime
 from uuid import uuid4
 
 import pytest
-
 from graphon.enums import (
     BuiltinNodeTypes,
     WorkflowExecutionStatus,
     WorkflowNodeExecutionStatus,
 )
+
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
 from models.workflow import (
     Workflow,
diff --git a/api/tests/unit_tests/services/document_service_validation.py b/api/tests/unit_tests/services/document_service_validation.py
index 71df8c4e20..6903c47a24 100644
--- a/api/tests/unit_tests/services/document_service_validation.py
+++ b/api/tests/unit_tests/services/document_service_validation.py
@@ -109,11 +109,11 @@ This test suite follows a comprehensive testing strategy that covers:
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.model_runtime.entities.model_entities import ModelType
 
 from core.errors.error import LLMBadRequestError, ProviderTokenNotInitError
 from core.rag.entities import PreProcessingRule, Rule, Segmentation
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
-from graphon.model_runtime.entities.model_entities import ModelType
 from models.dataset import Dataset, DatasetProcessRule, Document
 from services.dataset_service import DatasetService, DocumentService
 from services.entities.knowledge_entities.knowledge_entities import (
diff --git a/api/tests/unit_tests/services/test_async_workflow_service.py b/api/tests/unit_tests/services/test_async_workflow_service.py
index 361e95a557..73fc399ac3 100644
--- a/api/tests/unit_tests/services/test_async_workflow_service.py
+++ b/api/tests/unit_tests/services/test_async_workflow_service.py
@@ -73,11 +73,6 @@ class TestAsyncWorkflowService:
 
         mock_dispatcher = MagicMock()
         mock_quota_service = MagicMock()
-        mock_get_workflow = MagicMock()
-
-        mock_professional_task = MagicMock()
-        mock_team_task = MagicMock()
-        mock_sandbox_task = MagicMock()
 
         with (
             patch.object(
diff --git a/api/tests/unit_tests/services/test_conversation_service.py b/api/tests/unit_tests/services/test_conversation_service.py
index 2c7f13b79f..68f4c51afe 100644
--- a/api/tests/unit_tests/services/test_conversation_service.py
+++ b/api/tests/unit_tests/services/test_conversation_service.py
@@ -6,15 +6,26 @@ Tests are organized by functionality and include edge cases, error handling,
 and both positive and negative test scenarios.
 """
 
+from datetime import timedelta
 from unittest.mock import MagicMock, Mock, create_autospec, patch
 
+import pytest
 from sqlalchemy import asc, desc
 
 from core.app.entities.app_invoke_entities import InvokeFrom
 from libs.datetime_utils import naive_utc_now
+from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from models import Account, ConversationVariable
+from models.enums import ConversationFromSource
 from models.model import App, Conversation, EndUser, Message
 from services.conversation_service import ConversationService
+from services.errors.conversation import (
+    ConversationNotExistsError,
+    ConversationVariableNotExistsError,
+    ConversationVariableTypeMismatchError,
+    LastConversationNotExistsError,
+)
+from services.errors.message import MessageNotExistsError
 
 
 class ConversationServiceTestDataFactory:
@@ -327,9 +338,330 @@ class TestConversationServiceHelpers:
         assert condition is not None
 
 
+class TestConversationServiceGetConversation:
+    """Test conversation retrieval operations."""
+
+    @patch("services.conversation_service.db.session")
+    def test_get_conversation_success_with_account(self, mock_db_session):
+        """
+        Test successful conversation retrieval with account user.
+
+        Should return conversation when found with proper filters.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock(
+            from_account_id=user.id, from_source=ConversationFromSource.CONSOLE
+        )
+
+        mock_db_session.scalar.return_value = conversation
+
+        # Act
+        result = ConversationService.get_conversation(app_model, "conv-123", user)
+
+        # Assert
+        assert result == conversation
+
+    @patch("services.conversation_service.db.session")
+    def test_get_conversation_success_with_end_user(self, mock_db_session):
+        """
+        Test successful conversation retrieval with end user.
+
+        Should return conversation when found with proper filters for API user.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_end_user_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock(
+            from_end_user_id=user.id, from_source=ConversationFromSource.API
+        )
+
+        mock_db_session.scalar.return_value = conversation
+
+        # Act
+        result = ConversationService.get_conversation(app_model, "conv-123", user)
+
+        # Assert
+        assert result == conversation
+
+    @patch("services.conversation_service.db.session")
+    def test_get_conversation_not_found_raises_error(self, mock_db_session):
+        """
+        Test that get_conversation raises error when conversation not found.
+
+        Should raise ConversationNotExistsError when no matching conversation found.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        mock_db_session.scalar.return_value = None
+
+        # Act & Assert
+        with pytest.raises(ConversationNotExistsError):
+            ConversationService.get_conversation(app_model, "conv-123", user)
+
+
+class TestConversationServiceRename:
+    """Test conversation rename operations."""
+
+    @patch("services.conversation_service.db.session")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_rename_with_manual_name(self, mock_get_conversation, mock_db_session):
+        """
+        Test renaming conversation with manual name.
+
+        Should update conversation name and timestamp when auto_generate is False.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Act
+        result = ConversationService.rename(
+            app_model=app_model,
+            conversation_id="conv-123",
+            user=user,
+            name="New Name",
+            auto_generate=False,
+        )
+
+        # Assert
+        assert result == conversation
+        assert conversation.name == "New Name"
+        mock_db_session.commit.assert_called_once()
+
+
+class TestConversationServiceAutoGenerateName:
+    """Test conversation auto-name generation operations."""
+
+    @patch("services.conversation_service.db.session")
+    @patch("services.conversation_service.LLMGenerator")
+    def test_auto_generate_name_success(self, mock_llm_generator, mock_db_session):
+        """
+        Test successful auto-generation of conversation name.
+
+        Should generate name using LLMGenerator and update conversation.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+        message = ConversationServiceTestDataFactory.create_message_mock(
+            conversation_id=conversation.id, app_id=app_model.id
+        )
+
+        # Mock database query to return message
+        mock_db_session.scalar.return_value = message
+
+        # Mock LLM generator
+        mock_llm_generator.generate_conversation_name.return_value = "Generated Name"
+
+        # Act
+        result = ConversationService.auto_generate_name(app_model, conversation)
+
+        # Assert
+        assert result == conversation
+        assert conversation.name == "Generated Name"
+        mock_llm_generator.generate_conversation_name.assert_called_once_with(
+            app_model.tenant_id, message.query, conversation.id, app_model.id
+        )
+        mock_db_session.commit.assert_called_once()
+
+    @patch("services.conversation_service.db.session")
+    def test_auto_generate_name_no_message_raises_error(self, mock_db_session):
+        """
+        Test auto-generation fails when no message found.
+
+        Should raise MessageNotExistsError when conversation has no messages.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        # Mock database query to return None
+        mock_db_session.scalar.return_value = None
+
+        # Act & Assert
+        with pytest.raises(MessageNotExistsError):
+            ConversationService.auto_generate_name(app_model, conversation)
+
+    @patch("services.conversation_service.db.session")
+    @patch("services.conversation_service.LLMGenerator")
+    def test_auto_generate_name_handles_llm_exception(self, mock_llm_generator, mock_db_session):
+        """
+        Test auto-generation handles LLM generator exceptions gracefully.
+
+        Should continue without name when LLMGenerator fails.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+        message = ConversationServiceTestDataFactory.create_message_mock(
+            conversation_id=conversation.id, app_id=app_model.id
+        )
+
+        # Mock database query to return message
+        mock_db_session.scalar.return_value = message
+
+        # Mock LLM generator to raise exception
+        mock_llm_generator.generate_conversation_name.side_effect = Exception("LLM Error")
+
+        # Act
+        result = ConversationService.auto_generate_name(app_model, conversation)
+
+        # Assert
+        assert result == conversation
+        # Name should remain unchanged due to exception
+        mock_db_session.commit.assert_called_once()
+
+
+class TestConversationServiceDelete:
+    """Test conversation deletion operations."""
+
+    @patch("services.conversation_service.delete_conversation_related_data")
+    @patch("services.conversation_service.db.session")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_delete_success(self, mock_get_conversation, mock_db_session, mock_delete_task):
+        """
+        Test successful conversation deletion.
+
+        Should delete conversation and schedule cleanup task.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock(name="Test App")
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Act
+        ConversationService.delete(app_model, "conv-123", user)
+
+        # Assert
+        mock_db_session.delete.assert_called_once_with(conversation)
+        mock_db_session.commit.assert_called_once()
+        mock_delete_task.delay.assert_called_once_with(conversation.id)
+
+
 class TestConversationServiceConversationalVariable:
     """Test conversational variable operations."""
 
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_get_conversational_variable_success(self, mock_get_conversation, mock_session_factory):
+        """
+        Test successful retrieval of conversational variables.
+
+        Should return paginated list of variables for conversation.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session and variables
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        variable1 = ConversationServiceTestDataFactory.create_conversation_variable_mock()
+        variable2 = ConversationServiceTestDataFactory.create_conversation_variable_mock(variable_id="var-456")
+
+        mock_session.scalars.return_value.all.return_value = [variable1, variable2]
+
+        # Act
+        result = ConversationService.get_conversational_variable(
+            app_model=app_model,
+            conversation_id="conv-123",
+            user=user,
+            limit=10,
+            last_id=None,
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+        assert len(result.data) == 2
+        assert result.limit == 10
+        assert result.has_more is False
+
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_get_conversational_variable_with_last_id(self, mock_get_conversation, mock_session_factory):
+        """
+        Test retrieval of variables with last_id pagination.
+
+        Should filter variables created after last_id.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session and variables
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        last_variable = ConversationServiceTestDataFactory.create_conversation_variable_mock(
+            created_at=naive_utc_now() - timedelta(hours=1)
+        )
+        variable = ConversationServiceTestDataFactory.create_conversation_variable_mock(created_at=naive_utc_now())
+
+        mock_session.scalar.return_value = last_variable
+        mock_session.scalars.return_value.all.return_value = [variable]
+
+        # Act
+        result = ConversationService.get_conversational_variable(
+            app_model=app_model,
+            conversation_id="conv-123",
+            user=user,
+            limit=10,
+            last_id="var-123",
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+        assert len(result.data) == 1
+        assert result.limit == 10
+
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_get_conversational_variable_last_id_not_found_raises_error(
+        self, mock_get_conversation, mock_session_factory
+    ):
+        """
+        Test that invalid last_id raises ConversationVariableNotExistsError.
+
+        Should raise error when last_id doesn't exist.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+        mock_session.scalar.return_value = None
+
+        # Act & Assert
+        with pytest.raises(ConversationVariableNotExistsError):
+            ConversationService.get_conversational_variable(
+                app_model=app_model,
+                conversation_id="conv-123",
+                user=user,
+                limit=10,
+                last_id="invalid-id",
+            )
+
     @patch("services.conversation_service.session_factory")
     @patch("services.conversation_service.ConversationService.get_conversation")
     @patch("services.conversation_service.dify_config")
@@ -366,3 +698,466 @@ class TestConversationServiceConversationalVariable:
 
         # Assert - JSON filter should be applied
         assert mock_session.scalars.called
+
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    @patch("services.conversation_service.dify_config")
+    def test_get_conversational_variable_with_name_filter_postgresql(
+        self, mock_config, mock_get_conversation, mock_session_factory
+    ):
+        """
+        Test variable filtering by name for PostgreSQL databases.
+
+        Should apply JSON extraction filter for variable names.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+        mock_config.DB_TYPE = "postgresql"
+
+        # Mock session
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+        mock_session.scalars.return_value.all.return_value = []
+
+        # Act
+        ConversationService.get_conversational_variable(
+            app_model=app_model,
+            conversation_id="conv-123",
+            user=user,
+            limit=10,
+            last_id=None,
+            variable_name="test_var",
+        )
+
+        # Assert - JSON filter should be applied
+        assert mock_session.scalars.called
+
+
+class TestConversationServiceUpdateVariable:
+    """Test conversation variable update operations."""
+
+    @patch("services.conversation_service.variable_factory")
+    @patch("services.conversation_service.ConversationVariableUpdater")
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_update_conversation_variable_success(
+        self, mock_get_conversation, mock_session_factory, mock_updater_class, mock_variable_factory
+    ):
+        """
+        Test successful update of conversation variable.
+
+        Should update variable value and return updated data.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session and existing variable
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        existing_variable = ConversationServiceTestDataFactory.create_conversation_variable_mock(value_type="string")
+        mock_session.scalar.return_value = existing_variable
+
+        # Mock variable factory and updater
+        updated_variable = Mock()
+        updated_variable.model_dump.return_value = {"id": "var-123", "name": "test_var", "value": "new_value"}
+        mock_variable_factory.build_conversation_variable_from_mapping.return_value = updated_variable
+
+        mock_updater = MagicMock()
+        mock_updater_class.return_value = mock_updater
+
+        # Act
+        result = ConversationService.update_conversation_variable(
+            app_model=app_model,
+            conversation_id="conv-123",
+            variable_id="var-123",
+            user=user,
+            new_value="new_value",
+        )
+
+        # Assert
+        assert result["id"] == "var-123"
+        assert result["value"] == "new_value"
+        mock_updater.update.assert_called_once_with("conv-123", updated_variable)
+        mock_updater.flush.assert_called_once()
+
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_update_conversation_variable_not_found_raises_error(self, mock_get_conversation, mock_session_factory):
+        """
+        Test update fails when variable doesn't exist.
+
+        Should raise ConversationVariableNotExistsError.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+        mock_session.scalar.return_value = None
+
+        # Act & Assert
+        with pytest.raises(ConversationVariableNotExistsError):
+            ConversationService.update_conversation_variable(
+                app_model=app_model,
+                conversation_id="conv-123",
+                variable_id="invalid-id",
+                user=user,
+                new_value="new_value",
+            )
+
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_update_conversation_variable_type_mismatch_raises_error(self, mock_get_conversation, mock_session_factory):
+        """
+        Test update fails when value type doesn't match expected type.
+
+        Should raise ConversationVariableTypeMismatchError.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session and existing variable
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        existing_variable = ConversationServiceTestDataFactory.create_conversation_variable_mock(value_type="number")
+        mock_session.scalar.return_value = existing_variable
+
+        # Act & Assert - Try to set string value for number variable
+        with pytest.raises(ConversationVariableTypeMismatchError):
+            ConversationService.update_conversation_variable(
+                app_model=app_model,
+                conversation_id="conv-123",
+                variable_id="var-123",
+                user=user,
+                new_value="string_value",  # Wrong type
+            )
+
+    @patch("services.conversation_service.session_factory")
+    @patch("services.conversation_service.ConversationService.get_conversation")
+    def test_update_conversation_variable_integer_number_compatibility(
+        self, mock_get_conversation, mock_session_factory
+    ):
+        """
+        Test that integer type accepts number values.
+
+        Should allow number values for integer type variables.
+        """
+        # Arrange
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+
+        mock_get_conversation.return_value = conversation
+
+        # Mock session and existing variable
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        existing_variable = ConversationServiceTestDataFactory.create_conversation_variable_mock(value_type="integer")
+        mock_session.scalar.return_value = existing_variable
+
+        # Mock variable factory and updater
+        updated_variable = Mock()
+        updated_variable.model_dump.return_value = {"id": "var-123", "name": "test_var", "value": 42}
+
+        with (
+            patch("services.conversation_service.variable_factory") as mock_variable_factory,
+            patch("services.conversation_service.ConversationVariableUpdater") as mock_updater_class,
+        ):
+            mock_variable_factory.build_conversation_variable_from_mapping.return_value = updated_variable
+            mock_updater = MagicMock()
+            mock_updater_class.return_value = mock_updater
+
+            # Act
+            result = ConversationService.update_conversation_variable(
+                app_model=app_model,
+                conversation_id="conv-123",
+                variable_id="var-123",
+                user=user,
+                new_value=42,  # Number value for integer type
+            )
+
+            # Assert
+            assert result["value"] == 42
+            mock_updater.update.assert_called_once()
+
+
+class TestConversationServicePaginationAdvanced:
+    """Advanced pagination tests for ConversationService."""
+
+    @patch("services.conversation_service.session_factory")
+    def test_pagination_by_last_id_with_last_id_not_found(self, mock_session_factory):
+        """
+        Test pagination with invalid last_id raises error.
+
+        Should raise LastConversationNotExistsError when last_id doesn't exist.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+        mock_session.scalar.return_value = None
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Act & Assert
+        with pytest.raises(LastConversationNotExistsError):
+            ConversationService.pagination_by_last_id(
+                session=mock_session,
+                app_model=app_model,
+                user=user,
+                last_id="invalid-id",
+                limit=20,
+                invoke_from=InvokeFrom.WEB_APP,
+            )
+
+    @patch("services.conversation_service.session_factory")
+    def test_pagination_by_last_id_with_exclude_ids(self, mock_session_factory):
+        """
+        Test pagination with exclude_ids filter.
+
+        Should exclude specified conversation IDs from results.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+        mock_session.scalars.return_value.all.return_value = [conversation]
+        mock_session.scalar.return_value = conversation
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Act
+        result = ConversationService.pagination_by_last_id(
+            session=mock_session,
+            app_model=app_model,
+            user=user,
+            last_id=None,
+            limit=20,
+            invoke_from=InvokeFrom.WEB_APP,
+            exclude_ids=["excluded-123"],
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+        assert len(result.data) == 1
+
+    @patch("services.conversation_service.session_factory")
+    def test_pagination_by_last_id_has_more_detection(self, mock_session_factory):
+        """
+        Test pagination has_more detection logic.
+
+        Should set has_more=True when there are more results beyond limit.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        # Return exactly limit items to trigger has_more check
+        conversations = [
+            ConversationServiceTestDataFactory.create_conversation_mock(conversation_id=f"conv-{i}") for i in range(20)
+        ]
+        mock_session.scalars.return_value.all.return_value = conversations
+        mock_session.scalar.return_value = conversations[-1]
+
+        # Mock count query to return > 0
+        mock_session.scalar.return_value = 5  # Additional items exist
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Act
+        result = ConversationService.pagination_by_last_id(
+            session=mock_session,
+            app_model=app_model,
+            user=user,
+            last_id=None,
+            limit=20,
+            invoke_from=InvokeFrom.WEB_APP,
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+        assert result.has_more is True
+
+    @patch("services.conversation_service.session_factory")
+    def test_pagination_by_last_id_with_different_sort_by(self, mock_session_factory):
+        """
+        Test pagination with different sort fields.
+
+        Should handle various sort_by parameters correctly.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock()
+        mock_session.scalars.return_value.all.return_value = [conversation]
+        mock_session.scalar.return_value = conversation
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Test different sort fields
+        sort_fields = ["created_at", "-updated_at", "name", "-status"]
+
+        for sort_by in sort_fields:
+            # Act
+            result = ConversationService.pagination_by_last_id(
+                session=mock_session,
+                app_model=app_model,
+                user=user,
+                last_id=None,
+                limit=20,
+                invoke_from=InvokeFrom.WEB_APP,
+                sort_by=sort_by,
+            )
+
+            # Assert
+            assert isinstance(result, InfiniteScrollPagination)
+
+
+class TestConversationServiceEdgeCases:
+    """Test edge cases and error scenarios."""
+
+    @patch("services.conversation_service.session_factory")
+    def test_pagination_with_end_user_api_source(self, mock_session_factory):
+        """
+        Test pagination correctly handles EndUser with API source.
+
+        Should use 'api' as from_source for EndUser instances.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock(
+            from_source=ConversationFromSource.API, from_end_user_id="user-123"
+        )
+        mock_session.scalars.return_value.all.return_value = [conversation]
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_end_user_mock()
+
+        # Act
+        result = ConversationService.pagination_by_last_id(
+            session=mock_session,
+            app_model=app_model,
+            user=user,
+            last_id=None,
+            limit=20,
+            invoke_from=InvokeFrom.WEB_APP,
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+
+    @patch("services.conversation_service.session_factory")
+    def test_pagination_with_account_console_source(self, mock_session_factory):
+        """
+        Test pagination correctly handles Account with console source.
+
+        Should use 'console' as from_source for Account instances.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+        conversation = ConversationServiceTestDataFactory.create_conversation_mock(
+            from_source=ConversationFromSource.CONSOLE, from_account_id="account-123"
+        )
+        mock_session.scalars.return_value.all.return_value = [conversation]
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Act
+        result = ConversationService.pagination_by_last_id(
+            session=mock_session,
+            app_model=app_model,
+            user=user,
+            last_id=None,
+            limit=20,
+            invoke_from=InvokeFrom.WEB_APP,
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+
+    def test_pagination_with_include_ids_filter(self):
+        """
+        Test pagination with include_ids filter.
+
+        Should only return conversations with IDs in include_ids list.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session.scalars.return_value.all.return_value = []
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Act
+        result = ConversationService.pagination_by_last_id(
+            session=mock_session,
+            app_model=app_model,
+            user=user,
+            last_id=None,
+            limit=20,
+            invoke_from=InvokeFrom.WEB_APP,
+            include_ids=["conv-123", "conv-456"],
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+        # Verify that include_ids filter was applied
+        assert mock_session.scalars.called
+
+    def test_pagination_with_empty_exclude_ids(self):
+        """
+        Test pagination with empty exclude_ids list.
+
+        Should handle empty exclude_ids gracefully.
+        """
+        # Arrange
+        mock_session = MagicMock()
+        mock_session.scalars.return_value.all.return_value = []
+
+        app_model = ConversationServiceTestDataFactory.create_app_mock()
+        user = ConversationServiceTestDataFactory.create_account_mock()
+
+        # Act
+        result = ConversationService.pagination_by_last_id(
+            session=mock_session,
+            app_model=app_model,
+            user=user,
+            last_id=None,
+            limit=20,
+            invoke_from=InvokeFrom.WEB_APP,
+            exclude_ids=[],
+        )
+
+        # Assert
+        assert isinstance(result, InfiniteScrollPagination)
+        assert result.has_more is False
diff --git a/api/tests/unit_tests/services/test_human_input_service.py b/api/tests/unit_tests/services/test_human_input_service.py
index 55af564821..9be475d043 100644
--- a/api/tests/unit_tests/services/test_human_input_service.py
+++ b/api/tests/unit_tests/services/test_human_input_service.py
@@ -3,18 +3,18 @@ from datetime import datetime, timedelta
 from unittest.mock import MagicMock
 
 import pytest
-
-import services.human_input_service as human_input_service_module
-from core.repositories.human_input_repository import (
-    HumanInputFormRecord,
-    HumanInputFormSubmissionRepository,
-)
 from graphon.nodes.human_input.entities import (
     FormDefinition,
     FormInput,
     UserAction,
 )
 from graphon.nodes.human_input.enums import FormInputType, HumanInputFormKind, HumanInputFormStatus
+
+import services.human_input_service as human_input_service_module
+from core.repositories.human_input_repository import (
+    HumanInputFormRecord,
+    HumanInputFormSubmissionRepository,
+)
 from libs.datetime_utils import naive_utc_now
 from models.human_input import RecipientType
 from services.human_input_service import (
diff --git a/api/tests/unit_tests/services/test_model_provider_service_sanitization.py b/api/tests/unit_tests/services/test_model_provider_service_sanitization.py
index 97f3bd6f01..1bd979b9ec 100644
--- a/api/tests/unit_tests/services/test_model_provider_service_sanitization.py
+++ b/api/tests/unit_tests/services/test_model_provider_service_sanitization.py
@@ -1,11 +1,11 @@
 import types
 
 import pytest
-
-from core.entities.provider_entities import CredentialConfiguration, CustomModelConfiguration
 from graphon.model_runtime.entities.common_entities import I18nObject
 from graphon.model_runtime.entities.model_entities import ModelType
 from graphon.model_runtime.entities.provider_entities import ConfigurateMethod
+
+from core.entities.provider_entities import CredentialConfiguration, CustomModelConfiguration
 from models.provider import ProviderType
 from services.model_provider_service import ModelProviderService
 
diff --git a/api/tests/unit_tests/services/test_variable_truncator.py b/api/tests/unit_tests/services/test_variable_truncator.py
index 4b864dd221..98ec6fb77c 100644
--- a/api/tests/unit_tests/services/test_variable_truncator.py
+++ b/api/tests/unit_tests/services/test_variable_truncator.py
@@ -16,7 +16,6 @@ from typing import Any
 from uuid import uuid4
 
 import pytest
-
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.variables.segments import (
     ArrayFileSegment,
@@ -29,6 +28,7 @@ from graphon.variables.segments import (
     ObjectSegment,
     StringSegment,
 )
+
 from services.variable_truncator import (
     DummyVariableTruncator,
     MaxDepthExceededError,
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index 02fbe473df..bf645f9795 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -561,18 +561,13 @@ class TestWebhookServiceUnit:
             assert result == (mock_trigger, mock_workflow, mock_config, mock_data, None)
 
 
-
 # === Merged from test_webhook_service_additional.py ===
 
 
 from types import SimpleNamespace
 from typing import Any, cast
-from unittest.mock import MagicMock
 
-import pytest
-from flask import Flask
 from graphon.variables.types import SegmentType
-from werkzeug.datastructures import FileStorage
 from werkzeug.exceptions import RequestEntityTooLarge
 
 from core.workflow.nodes.trigger_webhook.entities import (
@@ -587,7 +582,6 @@ from models.trigger import WorkflowWebhookTrigger
 from models.workflow import Workflow
 from services.errors.app import QuotaExceededError
 from services.trigger import webhook_service as service_module
-from services.trigger.webhook_service import WebhookService
 
 
 class _FakeQuery:
diff --git a/api/tests/unit_tests/services/test_workflow_run_service_pause.py b/api/tests/unit_tests/services/test_workflow_run_service_pause.py
index 239cc83518..a62c9f4555 100644
--- a/api/tests/unit_tests/services/test_workflow_run_service_pause.py
+++ b/api/tests/unit_tests/services/test_workflow_run_service_pause.py
@@ -13,10 +13,10 @@ from datetime import datetime
 from unittest.mock import MagicMock, create_autospec, patch
 
 import pytest
+from graphon.enums import WorkflowExecutionStatus
 from sqlalchemy import Engine
 from sqlalchemy.orm import Session, sessionmaker
 
-from graphon.enums import WorkflowExecutionStatus
 from models.workflow import WorkflowPause
 from repositories.api_workflow_run_repository import APIWorkflowRunRepository
 from repositories.sqlalchemy_api_workflow_run_repository import _PrivateWorkflowPauseEntity
diff --git a/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py b/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py
index 60beec7964..8525672da8 100644
--- a/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py
+++ b/api/tests/unit_tests/services/workflow/test_draft_var_loader_simple.py
@@ -4,12 +4,12 @@ import json
 from unittest.mock import Mock, patch
 
 import pytest
-from sqlalchemy import Engine
-
-from core.workflow.file_reference import build_file_reference
 from graphon.file import File, FileTransferMethod, FileType
 from graphon.variables.segments import ObjectSegment, StringSegment
 from graphon.variables.types import SegmentType
+from sqlalchemy import Engine
+
+from core.workflow.file_reference import build_file_reference
 from models.model import UploadFile
 from models.workflow import WorkflowDraftVariable, WorkflowDraftVariableFile
 from services.workflow_draft_variable_service import DraftVarLoader
diff --git a/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py b/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py
index f6bdb6a60e..e7e72793a3 100644
--- a/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py
+++ b/api/tests/unit_tests/services/workflow/test_workflow_draft_variable_service.py
@@ -4,6 +4,10 @@ import uuid
 from unittest.mock import MagicMock, Mock, patch
 
 import pytest
+from graphon.enums import BuiltinNodeTypes
+from graphon.file import File, FileTransferMethod, FileType
+from graphon.variables.segments import StringSegment
+from graphon.variables.types import SegmentType
 from sqlalchemy import Engine
 from sqlalchemy.orm import Session
 
@@ -13,10 +17,6 @@ from core.workflow.variable_prefixes import (
     ENVIRONMENT_VARIABLE_NODE_ID,
     SYSTEM_VARIABLE_NODE_ID,
 )
-from graphon.enums import BuiltinNodeTypes
-from graphon.file import File, FileTransferMethod, FileType
-from graphon.variables.segments import StringSegment
-from graphon.variables.types import SegmentType
 from libs.uuid_utils import uuidv7
 from models.account import Account
 from models.enums import DraftVariableType
diff --git a/api/tests/unit_tests/services/workflow/test_workflow_event_snapshot_service.py b/api/tests/unit_tests/services/workflow/test_workflow_event_snapshot_service.py
index d570dce107..4146fd312b 100644
--- a/api/tests/unit_tests/services/workflow/test_workflow_event_snapshot_service.py
+++ b/api/tests/unit_tests/services/workflow/test_workflow_event_snapshot_service.py
@@ -6,13 +6,13 @@ from datetime import UTC, datetime
 from threading import Event
 
 import pytest
+from graphon.entities.pause_reason import HumanInputRequired
+from graphon.enums import WorkflowExecutionStatus, WorkflowNodeExecutionStatus
+from graphon.runtime import GraphRuntimeState, VariablePool
 
 from core.app.app_config.entities import WorkflowUIBasedAppConfig
 from core.app.entities.app_invoke_entities import InvokeFrom, WorkflowAppGenerateEntity
 from core.app.layers.pause_state_persist_layer import WorkflowResumptionContext, _WorkflowGenerateEntityWrapper
-from graphon.entities.pause_reason import HumanInputRequired
-from graphon.enums import WorkflowExecutionStatus, WorkflowNodeExecutionStatus
-from graphon.runtime import GraphRuntimeState, VariablePool
 from models.enums import CreatorUserRole
 from models.model import AppMode
 from models.workflow import WorkflowRun
diff --git a/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py b/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py
index d7192994b2..98d057e41f 100644
--- a/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py
+++ b/api/tests/unit_tests/services/workflow/test_workflow_human_input_delivery.py
@@ -3,6 +3,9 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
+from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
+from graphon.enums import BuiltinNodeTypes
+from graphon.nodes.human_input.entities import HumanInputNodeData
 from sqlalchemy.orm import sessionmaker
 
 from core.workflow.human_input_compat import (
@@ -12,9 +15,6 @@ from core.workflow.human_input_compat import (
     ExternalRecipient,
     MemberRecipient,
 )
-from graphon.entities.graph_config import NodeConfigDict, NodeConfigDictAdapter
-from graphon.enums import BuiltinNodeTypes
-from graphon.nodes.human_input.entities import HumanInputNodeData
 from services import workflow_service as workflow_service_module
 from services.workflow_service import WorkflowService
 
diff --git a/api/tests/unit_tests/tasks/test_human_input_timeout_tasks.py b/api/tests/unit_tests/tasks/test_human_input_timeout_tasks.py
index 591da56f49..7119217e94 100644
--- a/api/tests/unit_tests/tasks/test_human_input_timeout_tasks.py
+++ b/api/tests/unit_tests/tasks/test_human_input_timeout_tasks.py
@@ -5,8 +5,8 @@ from types import SimpleNamespace
 from typing import Any
 
 import pytest
-
 from graphon.nodes.human_input.enums import HumanInputFormKind, HumanInputFormStatus
+
 from tasks import human_input_timeout_tasks as task_module
 
 
diff --git a/api/tests/unit_tests/tools/test_mcp_tool.py b/api/tests/unit_tests/tools/test_mcp_tool.py
index 689b973097..544e89fcee 100644
--- a/api/tests/unit_tests/tools/test_mcp_tool.py
+++ b/api/tests/unit_tests/tools/test_mcp_tool.py
@@ -4,6 +4,7 @@ from typing import Any
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.model_runtime.entities.llm_entities import LLMUsage
 
 from core.mcp.types import (
     AudioContent,
@@ -18,7 +19,6 @@ from core.tools.__base.tool_runtime import ToolRuntime
 from core.tools.entities.common_entities import I18nObject
 from core.tools.entities.tool_entities import ToolEntity, ToolIdentity, ToolInvokeMessage
 from core.tools.mcp_tool.tool import MCPTool
-from graphon.model_runtime.entities.llm_entities import LLMUsage
 
 
 def _make_mcp_tool(output_schema: dict[str, Any] | None = None) -> MCPTool:
diff --git a/api/tests/unit_tests/utils/structured_output_parser/test_structured_output_parser.py b/api/tests/unit_tests/utils/structured_output_parser/test_structured_output_parser.py
index c166a946d9..ffa6833524 100644
--- a/api/tests/unit_tests/utils/structured_output_parser/test_structured_output_parser.py
+++ b/api/tests/unit_tests/utils/structured_output_parser/test_structured_output_parser.py
@@ -2,9 +2,6 @@ from decimal import Decimal
 from unittest.mock import MagicMock, patch
 
 import pytest
-
-from core.llm_generator.output_parser.errors import OutputParserError
-from core.llm_generator.output_parser.structured_output import invoke_llm_with_structured_output
 from graphon.model_runtime.entities.llm_entities import (
     LLMResult,
     LLMResultChunk,
@@ -21,6 +18,9 @@ from graphon.model_runtime.entities.message_entities import (
 )
 from graphon.model_runtime.entities.model_entities import AIModelEntity, ModelType
 
+from core.llm_generator.output_parser.errors import OutputParserError
+from core.llm_generator.output_parser.structured_output import invoke_llm_with_structured_output
+
 
 def create_mock_usage(prompt_tokens: int = 10, completion_tokens: int = 5) -> LLMUsage:
     """Create a mock LLMUsage with all required fields"""
diff --git a/api/uv.lock b/api/uv.lock
index 7ed1b9960c..db00ccf800 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -380,14 +380,14 @@ wheels = [
 
 [[package]]
 name = "authlib"
-version = "1.6.11"
+version = "1.6.9"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "cryptography" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/28/10/b325d58ffe86815b399334a101e63bc6fa4e1953921cb23703b48a0a0220/authlib-1.6.11.tar.gz", hash = "sha256:64db35b9b01aeccb4715a6c9a6613a06f2bd7be2ab9d2eb89edd1dfc7580a38f", size = 165359, upload-time = "2026-04-16T07:22:50.279Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/af/98/00d3dd826d46959ad8e32af2dbb2398868fd9fd0683c26e56d0789bd0e68/authlib-1.6.9.tar.gz", hash = "sha256:d8f2421e7e5980cc1ddb4e32d3f5fa659cfaf60d8eaf3281ebed192e4ab74f04", size = 165134, upload-time = "2026-03-02T07:44:01.998Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/57/2f/55fca558f925a51db046e5b929deb317ddb05afed74b22d89f4eca578980/authlib-1.6.11-py2.py3-none-any.whl", hash = "sha256:c8687a9a26451c51a34a06fa17bb97cb15bba46a6a626755e2d7f50da8bff3e3", size = 244469, upload-time = "2026-04-16T07:22:48.413Z" },
+    { url = "https://files.pythonhosted.org/packages/53/23/b65f568ed0c22f1efacb744d2db1a33c8068f384b8c9b482b52ebdbc3ef6/authlib-1.6.9-py2.py3-none-any.whl", hash = "sha256:f08b4c14e08f0861dc18a32357b33fbcfd2ea86cfe3fe149484b4d764c4a0ac3", size = 244197, upload-time = "2026-03-02T07:44:00.307Z" },
 ]
 
 [[package]]
@@ -3903,14 +3903,14 @@ wheels = [
 
 [[package]]
 name = "mako"
-version = "1.3.11"
+version = "1.3.10"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "markupsafe" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/59/8a/805404d0c0b9f3d7a326475ca008db57aea9c5c9f2e1e39ed0faa335571c/mako-1.3.11.tar.gz", hash = "sha256:071eb4ab4c5010443152255d77db7faa6ce5916f35226eb02dc34479b6858069", size = 399811, upload-time = "2026-04-14T20:19:51.493Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/9e/38/bd5b78a920a64d708fe6bc8e0a2c075e1389d53bef8413725c63ba041535/mako-1.3.10.tar.gz", hash = "sha256:99579a6f39583fa7e5630a28c3c1f440e4e97a414b80372649c0ce338da2ea28", size = 392474, upload-time = "2025-04-10T12:44:31.16Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/68/a5/19d7aaa7e433713ffe881df33705925a196afb9532efc8475d26593921a6/mako-1.3.11-py3-none-any.whl", hash = "sha256:e372c6e333cf004aa736a15f425087ec977e1fcbd2966aae7f17c8dc1da27a77", size = 78503, upload-time = "2026-04-14T20:19:53.233Z" },
+    { url = "https://files.pythonhosted.org/packages/87/fb/99f81ac72ae23375f22b7afdb7642aba97c00a713c217124420147681a2f/mako-1.3.10-py3-none-any.whl", hash = "sha256:baef24a52fc4fc514a0887ac600f9f1cff3d82c61d4d700a1fa84d597b88db59", size = 78509, upload-time = "2025-04-10T12:50:53.297Z" },
 ]
 
 [[package]]
@@ -5501,11 +5501,11 @@ wheels = [
 
 [[package]]
 name = "pypdf"
-version = "6.10.2"
+version = "6.10.1"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/7b/3f/9f2167401c2e94833ca3b69535bad89e533b5de75fefe4197a2c224baec2/pypdf-6.10.2.tar.gz", hash = "sha256:7d09ce108eff6bf67465d461b6ef352dcb8d84f7a91befc02f904455c6eea11d", size = 5315679, upload-time = "2026-04-15T16:37:36.978Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/66/79/f2730c42ec7891a75a2fcea2eb4f356872bcbc671b711418060424796612/pypdf-6.10.1.tar.gz", hash = "sha256:62e6ca7f65aaa28b3d192addb44f97296e4be1748f57ed0f4efb2d4915841880", size = 5315704, upload-time = "2026-04-14T12:55:20.996Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/0c/d6/1d5c60cc17bbdf37c1552d9c03862fc6d32c5836732a0415b2d637edc2d0/pypdf-6.10.2-py3-none-any.whl", hash = "sha256:aa53be9826655b51c96741e5d7983ca224d898ac0a77896e64636810517624aa", size = 336308, upload-time = "2026-04-15T16:37:34.851Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/04/e3aa7f1f14dbc53429cae34666261eb935d99bd61d24756ab94d7e0309da/pypdf-6.10.1-py3-none-any.whl", hash = "sha256:6331940d3bfe75b7e6601d35db7adabab5fc1d716efaeb384e3c0c3957d033de", size = 335606, upload-time = "2026-04-14T12:55:18.941Z" },
 ]
 
 [[package]]
@@ -6562,6 +6562,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/45/3f/48af1e72e59d60481724b326317bd311615bdedc31f8f81f9508fb84cda6/tablestore-6.4.4-py3-none-any.whl", hash = "sha256:984f086fa7acabaa3558da93205ad6df562b266b85fd249bc5891f2dd1d65814", size = 5118758, upload-time = "2026-04-09T09:40:17.209Z" },
 ]
 
+[[package]]
+name = "tabulate"
+version = "0.9.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/ec/fe/802052aecb21e3797b8f7902564ab6ea0d60ff8ca23952079064155d1ae1/tabulate-0.9.0.tar.gz", hash = "sha256:0095b12bf5966de529c0feb1fa08671671b3368eec77d7ef7ab114be2c068b3c", size = 81090, upload-time = "2022-10-06T17:21:48.54Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/40/44/4a5f08c96eb108af5cb50b41f76142f0afa346dfa99d5296fe7202a11854/tabulate-0.9.0-py3-none-any.whl", hash = "sha256:024ca478df22e9340661486f85298cff5f6dcdba14f3813e8830015b9ed1948f", size = 35252, upload-time = "2022-10-06T17:21:44.262Z" },
+]
+
 [[package]]
 name = "tcvdb-text"
 version = "1.1.2"
diff --git a/packages/iconify-collections/assets/vender/workflow/input-field.svg b/packages/iconify-collections/assets/vender/workflow/input-field.svg
new file mode 100644
index 0000000000..47ef58181e
--- /dev/null
+++ b/packages/iconify-collections/assets/vender/workflow/input-field.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33317 3.33333H7.33317V12.6667H5.33317V14H10.6665V12.6667H8.6665V3.33333H10.6665V2H5.33317V3.33333ZM1.33317 4.66667C0.964984 4.66667 0.666504 4.96515 0.666504 5.33333V10.6667C0.666504 11.0349 0.964984 11.3333 1.33317 11.3333H5.33317V10H1.99984V6H5.33317V4.66667H1.33317ZM10.6665 6H13.9998V10H10.6665V11.3333H14.6665C15.0347 11.3333 15.3332 11.0349 15.3332 10.6667V5.33333C15.3332 4.96515 15.0347 4.66667 14.6665 4.66667H10.6665V6Z" fill="#354052"/>
+</svg>
diff --git a/packages/iconify-collections/custom-public/icons.json b/packages/iconify-collections/custom-public/icons.json
index 347b6145e2..7c7d110be8 100644
--- a/packages/iconify-collections/custom-public/icons.json
+++ b/packages/iconify-collections/custom-public/icons.json
@@ -1,6 +1,6 @@
 {
   "prefix": "custom-public",
-  "lastModified": 1775115796,
+  "lastModified": 1776313052,
   "icons": {
     "avatar-user": {
       "body": "<g fill=\"none\"><g clip-path=\"url(#svgID0)\"><rect width=\"512\" height=\"512\" fill=\"currentColor\" rx=\"256\"/></g><defs><clipPath id=\"svgID0\"><rect width=\"512\" height=\"512\" fill=\"#fff\" rx=\"256\"/></clipPath></defs></g>",
@@ -65,6 +65,9 @@
       "width": 50,
       "height": 26
     },
+    "common-enter-key": {
+      "body": ""
+    },
     "common-gdpr": {
       "body": "<g fill=\"currentColor\"><path d=\"M11.037.899v26.174c1.629-.702 10.195-4.606 10.195-10.194V4.887zm0 0v26.174C9.408 26.371.843 22.467.843 16.88V4.887z\"/><path d=\"m11.037 4.634l.31.927h.954l-.758.561l.28.9l-.786-.563l-.758.562l.28-.899l-.757-.561h.954zm3.286.899l.309.898h.955l-.787.562l.31.927l-.787-.562l-.758.562l.28-.927l-.786-.562h.983zm2.724 2.387l.281.898h.955l-.758.562l.28.927l-.758-.562l-.786.562l.309-.927l-.787-.562h.955zm-6.01 11.851l.31.927h.954l-.758.562l.28.898l-.786-.561l-.758.561l.28-.898l-.757-.562h.954zm3.286-.786l.309.899h.955l-.787.561l.31.927l-.787-.561l-.758.561l.28-.927l-.786-.561h.983zm2.724-1.966l.281.927h.955l-.758.561l.28.9l-.758-.562l-.786.561l.309-.898l-.787-.562h.955zM7.78 5.533l-.31.898h-.954l.786.562l-.309.927l.786-.562l.759.562l-.281-.927l.758-.562H8.06zM5.055 7.92l-.28.898H3.82l.758.562l-.281.927l.758-.562l.787.562l-.31-.927l.787-.562h-.955zM7.78 18.985l-.31.899h-.954l.786.561l-.309.927l.786-.561l.759.561l-.281-.927l.758-.561H8.06zm-2.725-1.966l-.28.927H3.82l.758.561l-.281.9l.758-.562l.787.561l-.31-.898l.787-.562h-.955z\"/></g>",
       "width": 23,
@@ -407,6 +410,11 @@
     "model-checked": {
       "body": "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.333 4L6 11.333L2.667 8\"/>"
     },
+    "other-comment": {
+      "body": "<path fill=\"currentColor\" d=\"M12.333 4a2.667 2.667 0 0 0-2.666-2.667H4.333A2.667 2.667 0 0 0 1.667 4v6.667h8A2.667 2.667 0 0 0 12.333 8zM7.667 6.667V8H4.333V6.667zm2-2.667v1.333H4.333V4zm4 4a4 4 0 0 1-4 4H.333V4a4 4 0 0 1 4-4h5.334a4 4 0 0 1 4 4z\"/>",
+      "width": 14,
+      "height": 12
+    },
     "other-default-tool-icon": {
       "body": "<g fill=\"none\" opacity=\".5\"><rect width=\"24\" height=\"24\" fill=\"currentColor\" rx=\"6\"/><rect width=\"23.5\" height=\"23.5\" x=\".25\" y=\".25\" stroke=\"currentColor\" stroke-opacity=\".05\" stroke-width=\".5\" rx=\"5.75\"/><path fill=\"currentColor\" d=\"M11.888 5.306a.4.4 0 0 0 .167-.168l.359-.717a.375.375 0 0 1 .67 0l.36.717a.37.37 0 0 0 .167.168l.717.359a.375.375 0 0 1 0 .67l-.717.36a.37.37 0 0 0-.168.167l-.358.717a.375.375 0 0 1-.671 0l-.359-.717a.4.4 0 0 0-.167-.168l-.718-.359a.375.375 0 0 1 0-.67zm-4 1.25a.4.4 0 0 0 .167-.168l.234-.467a.375.375 0 0 1 .67 0l.234.467a.4.4 0 0 0 .168.168l.468.234a.375.375 0 0 1 0 .67l-.468.234a.4.4 0 0 0-.168.168l-.233.467a.375.375 0 0 1-.671 0l-.234-.467a.4.4 0 0 0-.167-.168L7.42 7.46a.375.375 0 0 1 0-.67z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M17.942 5.91a.56.56 0 0 1 .148.782L16.006 9.75h1.431c.311 0 .563.252.563.563v7.874c0 .725-.588 1.313-1.312 1.313H7.313A1.313 1.313 0 0 1 6 18.188v-7.875c0-.311.252-.563.563-.563h8.082l2.515-3.692a.563.563 0 0 1 .782-.148m-7.63 6.84a.562.562 0 1 0 0 1.125h3.376a.563.563 0 0 0 0-1.125z\" clip-rule=\"evenodd\"/></g>"
     },
diff --git a/packages/iconify-collections/custom-public/info.json b/packages/iconify-collections/custom-public/info.json
index 8b5572de6f..115e9e25f9 100644
--- a/packages/iconify-collections/custom-public/info.json
+++ b/packages/iconify-collections/custom-public/info.json
@@ -1,7 +1,7 @@
 {
   "prefix": "custom-public",
   "name": "Dify Custom Public",
-  "total": 142,
+  "total": 144,
   "version": "0.0.0-private",
   "author": {
     "name": "LangGenius, Inc.",
diff --git a/packages/iconify-collections/custom-vender/icons.json b/packages/iconify-collections/custom-vender/icons.json
index a7dc8e75e0..d588db650e 100644
--- a/packages/iconify-collections/custom-vender/icons.json
+++ b/packages/iconify-collections/custom-vender/icons.json
@@ -1,6 +1,6 @@
 {
   "prefix": "custom-vender",
-  "lastModified": 1775115796,
+  "lastModified": 1776313052,
   "icons": {
     "features-citations": {
       "body": "<path fill=\"currentColor\" d=\"M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m6-.03v2.988h4.036v-3.724H8.813a2.5 2.5 0 0 1 .212-1.204q.495-1.104 1.94-1.557V7q-1.94.383-2.96 1.614Q7 9.847 7 11.97m8.04-1.911q.495-1.148 1.925-1.586V7q-1.884.382-2.931 1.6Q13 9.818 13 11.97v2.988h4.036v-3.724h-2.224q-.056-.567.227-1.175\"/>"
@@ -1025,6 +1025,11 @@
     "workflow-if-else": {
       "body": ""
     },
+    "workflow-input-field": {
+      "body": "<path fill=\"currentColor\" d=\"M5.333 3.333h2v9.334h-2V14h5.333v-1.333h-2V3.333h2V2H5.333zm-4 1.334a.667.667 0 0 0-.666.666v5.334c0 .368.298.666.666.666h4V10H2V6h3.333V4.667zM10.667 6H14v4h-3.334v1.333h4a.667.667 0 0 0 .667-.666V5.333a.667.667 0 0 0-.667-.666h-4z\"/>",
+      "width": 16,
+      "height": 16
+    },
     "workflow-iteration": {
       "body": ""
     },
diff --git a/packages/iconify-collections/custom-vender/info.json b/packages/iconify-collections/custom-vender/info.json
index 0a84c45bbd..ea5f666503 100644
--- a/packages/iconify-collections/custom-vender/info.json
+++ b/packages/iconify-collections/custom-vender/info.json
@@ -1,7 +1,7 @@
 {
   "prefix": "custom-vender",
   "name": "Dify Custom Vender",
-  "total": 277,
+  "total": 278,
   "version": "0.0.0-private",
   "author": {
     "name": "LangGenius, Inc.",
diff --git a/sdks/nodejs-client/tsconfig.json b/sdks/nodejs-client/tsconfig.json
index 1e55007ed0..46055447be 100644
--- a/sdks/nodejs-client/tsconfig.json
+++ b/sdks/nodejs-client/tsconfig.json
@@ -1,14 +1,18 @@
 {
-  "extends": "@dify/tsconfig/node.json",
   "compilerOptions": {
-    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "rootDir": ".",
     "outDir": "dist",
-    "noEmit": false,
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "types": ["node"]
   },
-  "include": ["src/**/*.ts", "tests/**/*.ts", "vite.config.ts"]
+  "include": ["src/**/*.ts", "tests/**/*.ts"]
 }
diff --git a/web/__tests__/apps/app-list-browsing-flow.test.tsx b/web/__tests__/apps/app-list-browsing-flow.test.tsx
index a5ed79a7bd..e0f09ad2ac 100644
--- a/web/__tests__/apps/app-list-browsing-flow.test.tsx
+++ b/web/__tests__/apps/app-list-browsing-flow.test.tsx
@@ -77,6 +77,13 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: true,
+    isReady: true,
+  }),
+}))
+
 vi.mock('@/app/components/base/tag-management/store', () => ({
   useStore: (selector: (state: Record<string, unknown>) => unknown) => {
     const state = {
@@ -93,6 +100,16 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/service/use-common', () => ({
+  useMembers: () => ({
+    data: {
+      accounts: [
+        { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+      ],
+    },
+  }),
+}))
+
 vi.mock('@/service/apps', () => ({
   fetchWorkflowOnlineUsers: vi.fn().mockResolvedValue({}),
 }))
@@ -114,6 +131,18 @@ vi.mock('@/service/use-apps', () => ({
   }),
 }))
 
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: () => ({
+    data: { pages: [] },
+    isLoading: false,
+    isFetching: false,
+    isFetchingNextPage: false,
+    fetchNextPage: vi.fn(),
+    hasNextPage: false,
+    error: null,
+  }),
+}))
+
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
@@ -323,16 +352,11 @@ describe('App List Browsing Flow', () => {
 
   // -- Tab navigation --
   describe('Tab Navigation', () => {
-    it('should render all category tabs', () => {
+    it('should render the app type dropdown trigger', () => {
       mockPages = [createPage([createMockApp()])]
       renderList()
 
-      expect(screen.getByText('app.types.all')).toBeInTheDocument()
-      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
-      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
-      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
-      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
-      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
     })
   })
 
@@ -358,21 +382,19 @@ describe('App List Browsing Flow', () => {
 
   // -- "Created by me" filter --
   describe('Created By Me Filter', () => {
-    it('should render the "created by me" checkbox', () => {
+    it('should not render a standalone "created by me" checkbox in the current header layout', () => {
       mockPages = [createPage([createMockApp()])]
       renderList()
 
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+      expect(screen.queryByText('app.showMyCreatedAppsOnly')).not.toBeInTheDocument()
     })
 
-    it('should toggle the "created by me" filter on click', () => {
+    it('should keep the current layout stable without a "created by me" control', () => {
       mockPages = [createPage([createMockApp()])]
       renderList()
 
-      const checkbox = screen.getByText('app.showMyCreatedAppsOnly')
-      fireEvent.click(checkbox)
-
-      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
+      expect(screen.queryByText('app.showMyCreatedAppsOnly')).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/__tests__/apps/create-app-flow.test.tsx b/web/__tests__/apps/create-app-flow.test.tsx
index 9abc870ecf..ab45860a07 100644
--- a/web/__tests__/apps/create-app-flow.test.tsx
+++ b/web/__tests__/apps/create-app-flow.test.tsx
@@ -64,6 +64,13 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: true,
+    isReady: true,
+  }),
+}))
+
 vi.mock('@/app/components/base/tag-management/store', () => ({
   useStore: (selector: (state: Record<string, unknown>) => unknown) => {
     const state = {
@@ -80,6 +87,16 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/service/use-common', () => ({
+  useMembers: () => ({
+    data: {
+      accounts: [
+        { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+      ],
+    },
+  }),
+}))
+
 vi.mock('@/service/apps', () => ({
   fetchWorkflowOnlineUsers: vi.fn().mockResolvedValue({}),
 }))
@@ -101,6 +118,18 @@ vi.mock('@/service/use-apps', () => ({
   }),
 }))
 
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: () => ({
+    data: { pages: [] },
+    isLoading: false,
+    isFetching: false,
+    isFetchingNextPage: false,
+    fetchNextPage: vi.fn(),
+    hasNextPage: false,
+    error: null,
+  }),
+}))
+
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
new file mode 100644
index 0000000000..899667ad3c
--- /dev/null
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/evaluation/page.tsx
@@ -0,0 +1,16 @@
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
+import Evaluation from '@/app/components/evaluation'
+
+const Page = async (props: {
+  params: Promise<{ appId: string }>
+}) => {
+  const { appId } = await props.params
+
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref={`/app/${appId}/overview`}>
+      <Evaluation resourceType="apps" resourceId={appId} />
+    </SnippetAndEvaluationPlanGuard>
+  )
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index 8a1a6fd131..7f8d6d535e 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -8,6 +8,8 @@ import {
   RiDashboard2Line,
   RiFileList3Fill,
   RiFileList3Line,
+  RiFlaskFill,
+  RiFlaskLine,
   RiTerminalBoxFill,
   RiTerminalBoxLine,
   RiTerminalWindowFill,
@@ -25,6 +27,7 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import dynamic from '@/next/dynamic'
 import { usePathname, useRouter } from '@/next/navigation'
 import { fetchAppDetailDirect } from '@/service/apps'
@@ -50,6 +53,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const pathname = usePathname()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
   const { appDetail, setAppDetail, setAppSidebarExpand } = useStore(useShallow(state => ({
     appDetail: state.appDetail,
@@ -67,42 +71,51 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   }>>([])
 
   const getNavigationConfig = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: AppModeEnum) => {
-    const navConfig = [
-      ...(isCurrentWorkspaceEditor
-        ? [{
-            name: t('appMenus.promptEng', { ns: 'common' }),
-            href: `/app/${appId}/${(mode === AppModeEnum.WORKFLOW || mode === AppModeEnum.ADVANCED_CHAT) ? 'workflow' : 'configuration'}`,
-            icon: RiTerminalWindowLine,
-            selectedIcon: RiTerminalWindowFill,
-          }]
-        : []
-      ),
-      {
-        name: t('appMenus.apiAccess', { ns: 'common' }),
-        href: `/app/${appId}/develop`,
-        icon: RiTerminalBoxLine,
-        selectedIcon: RiTerminalBoxFill,
-      },
-      ...(isCurrentWorkspaceEditor
-        ? [{
-            name: mode !== AppModeEnum.WORKFLOW
-              ? t('appMenus.logAndAnn', { ns: 'common' })
-              : t('appMenus.logs', { ns: 'common' }),
-            href: `/app/${appId}/logs`,
-            icon: RiFileList3Line,
-            selectedIcon: RiFileList3Fill,
-          }]
-        : []
-      ),
-      {
-        name: t('appMenus.overview', { ns: 'common' }),
-        href: `/app/${appId}/overview`,
-        icon: RiDashboard2Line,
-        selectedIcon: RiDashboard2Fill,
-      },
-    ]
+    const navConfig = []
+
+    if (isCurrentWorkspaceEditor) {
+      navConfig.push({
+        name: t('appMenus.promptEng', { ns: 'common' }),
+        href: `/app/${appId}/${(mode === AppModeEnum.WORKFLOW || mode === AppModeEnum.ADVANCED_CHAT) ? 'workflow' : 'configuration'}`,
+        icon: RiTerminalWindowLine,
+        selectedIcon: RiTerminalWindowFill,
+      })
+      if (canAccessSnippetsAndEvaluation) {
+        navConfig.push({
+          name: t('appMenus.evaluation', { ns: 'common' }),
+          href: `/app/${appId}/evaluation`,
+          icon: RiFlaskLine,
+          selectedIcon: RiFlaskFill,
+        })
+      }
+    }
+
+    navConfig.push({
+      name: t('appMenus.apiAccess', { ns: 'common' }),
+      href: `/app/${appId}/develop`,
+      icon: RiTerminalBoxLine,
+      selectedIcon: RiTerminalBoxFill,
+    })
+
+    if (isCurrentWorkspaceEditor) {
+      navConfig.push({
+        name: mode !== AppModeEnum.WORKFLOW
+          ? t('appMenus.logAndAnn', { ns: 'common' })
+          : t('appMenus.logs', { ns: 'common' }),
+        href: `/app/${appId}/logs`,
+        icon: RiFileList3Line,
+        selectedIcon: RiFileList3Fill,
+      })
+    }
+
+    navConfig.push({
+      name: t('appMenus.overview', { ns: 'common' }),
+      href: `/app/${appId}/overview`,
+      icon: RiDashboard2Line,
+      selectedIcon: RiDashboard2Fill,
+    })
     return navConfig
-  }, [t])
+  }, [canAccessSnippetsAndEvaluation, t])
 
   useDocumentTitle(appDetail?.name || t('menus.appDetail', { ns: 'common' }))
 
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
new file mode 100644
index 0000000000..2831b0d464
--- /dev/null
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx
@@ -0,0 +1,230 @@
+import type { ReactNode } from 'react'
+import type { DataSet } from '@/models/datasets'
+import { render, screen } from '@testing-library/react'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
+import { RETRIEVE_METHOD } from '@/types/app'
+import DatasetDetailLayout from '../layout-main'
+
+let mockPathname = '/datasets/test-dataset-id/documents'
+let mockDataset: DataSet | undefined
+let mockCanAccessSnippetsAndEvaluation = true
+
+const mockSetAppSidebarExpand = vi.fn()
+const mockMutateDatasetRes = vi.fn()
+
+vi.mock('@/next/navigation', () => ({
+  usePathname: () => mockPathname,
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: {
+    mobile: 'mobile',
+    desktop: 'desktop',
+  },
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: {
+      useSubscription: vi.fn(),
+    },
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceDatasetOperator: false,
+  }),
+}))
+
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: mockCanAccessSnippetsAndEvaluation,
+    isReady: true,
+  }),
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+  default: vi.fn(),
+}))
+
+vi.mock('@/service/knowledge/use-dataset', () => ({
+  useDatasetDetail: () => ({
+    data: mockDataset,
+    error: null,
+    refetch: mockMutateDatasetRes,
+  }),
+  useDatasetRelatedApps: () => ({
+    data: [],
+  }),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    navigation,
+    children,
+  }: {
+    navigation: Array<{ name: string, href: string, disabled?: boolean }>
+    children?: ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      {navigation.map(item => (
+        <button
+          key={item.href}
+          type="button"
+          disabled={item.disabled}
+        >
+          {item.name}
+        </button>
+      ))}
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/datasets/extra-info', () => ({
+  default: () => <div data-testid="dataset-extra-info" />,
+}))
+
+vi.mock('@/app/components/base/loading', () => ({
+  default: () => <div role="status">loading</div>,
+}))
+
+const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
+  id: 'test-dataset-id',
+  name: 'Test Dataset',
+  indexing_status: 'completed',
+  icon_info: {
+    icon: 'book',
+    icon_background: '#fff',
+    icon_type: 'emoji',
+    icon_url: '',
+  },
+  description: '',
+  permission: DatasetPermission.onlyMe,
+  data_source_type: DataSourceType.FILE,
+  indexing_technique: IndexingType.QUALIFIED,
+  created_by: 'user-1',
+  updated_by: 'user-1',
+  updated_at: 0,
+  app_count: 0,
+  doc_form: ChunkingMode.text,
+  document_count: 0,
+  total_document_count: 0,
+  word_count: 0,
+  provider: 'vendor',
+  embedding_model: 'text-embedding',
+  embedding_model_provider: 'openai',
+  embedding_available: true,
+  retrieval_model_dict: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 3,
+    score_threshold_enabled: false,
+    score_threshold: 0.5,
+  },
+  retrieval_model: {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: '',
+      reranking_model_name: '',
+    },
+    top_k: 3,
+    score_threshold_enabled: false,
+    score_threshold: 0.5,
+  },
+  tags: [],
+  external_knowledge_info: {
+    external_knowledge_id: '',
+    external_knowledge_api_id: '',
+    external_knowledge_api_name: '',
+    external_knowledge_api_endpoint: '',
+  },
+  external_retrieval_model: {
+    top_k: 3,
+    score_threshold: 0.5,
+    score_threshold_enabled: false,
+  },
+  built_in_field_enabled: false,
+  pipeline_id: 'pipeline-1',
+  is_published: true,
+  runtime_mode: 'rag_pipeline',
+  enable_api: false,
+  is_multimodal: false,
+  ...overrides,
+})
+
+describe('DatasetDetailLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockPathname = '/datasets/test-dataset-id/documents'
+    mockDataset = createDataset()
+    mockCanAccessSnippetsAndEvaluation = true
+  })
+
+  describe('Evaluation navigation', () => {
+    it('should hide the evaluation menu when the dataset is not a rag pipeline', () => {
+      mockDataset = createDataset({
+        runtime_mode: 'general',
+        is_published: false,
+      })
+
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.queryByRole('button', { name: 'common.datasetMenus.evaluation' })).not.toBeInTheDocument()
+    })
+
+    it('should disable the evaluation menu when the rag pipeline is unpublished', () => {
+      mockDataset = createDataset({
+        is_published: false,
+      })
+
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.getByRole('button', { name: 'common.datasetMenus.evaluation' })).toBeDisabled()
+    })
+
+    it('should enable the evaluation menu when the rag pipeline is published', () => {
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.getByRole('button', { name: 'common.datasetMenus.evaluation' })).toBeEnabled()
+    })
+
+    it('should hide the evaluation menu when snippet and evaluation access is unavailable', () => {
+      mockCanAccessSnippetsAndEvaluation = false
+
+      render(
+        <DatasetDetailLayout datasetId="test-dataset-id">
+          <div data-testid="dataset-detail-content">content</div>
+        </DatasetDetailLayout>,
+      )
+
+      expect(screen.queryByRole('button', { name: 'common.datasetMenus.evaluation' })).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
new file mode 100644
index 0000000000..ea8fc0ea82
--- /dev/null
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/evaluation/page.tsx
@@ -0,0 +1,16 @@
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
+import Evaluation from '@/app/components/evaluation'
+
+const Page = async (props: {
+  params: Promise<{ datasetId: string }>
+}) => {
+  const { datasetId } = await props.params
+
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref={`/datasets/${datasetId}/documents`}>
+      <Evaluation resourceType="datasets" resourceId={datasetId} />
+    </SnippetAndEvaluationPlanGuard>
+  )
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index ba3272c1a7..c5719d6a61 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -7,6 +7,8 @@ import {
   RiEqualizer2Line,
   RiFileTextFill,
   RiFileTextLine,
+  RiFlaskFill,
+  RiFlaskLine,
   RiFocus2Fill,
   RiFocus2Line,
 } from '@remixicon/react'
@@ -23,6 +25,7 @@ import DatasetDetailContext from '@/context/dataset-detail'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { usePathname } from '@/next/navigation'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 
@@ -49,6 +52,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       setHideHeader(v.payload)
   })
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -56,6 +60,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const { data: datasetRes, error, refetch: mutateDatasetRes } = useDatasetDetail(datasetId)
 
   const { data: relatedApps } = useDatasetRelatedApps(datasetId)
+  const isRagPipelineDataset = datasetRes?.runtime_mode === 'rag_pipeline'
 
   const isButtonDisabledWithPipeline = useMemo(() => {
     if (!datasetRes)
@@ -86,24 +91,36 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     ]
 
     if (datasetRes?.provider !== 'external') {
-      baseNavigation.unshift({
-        name: t('datasetMenus.pipeline', { ns: 'common' }),
-        href: `/datasets/${datasetId}/pipeline`,
-        icon: PipelineLine as RemixiconComponentType,
-        selectedIcon: PipelineFill as RemixiconComponentType,
-        disabled: false,
-      })
-      baseNavigation.unshift({
-        name: t('datasetMenus.documents', { ns: 'common' }),
-        href: `/datasets/${datasetId}/documents`,
-        icon: RiFileTextLine,
-        selectedIcon: RiFileTextFill,
-        disabled: isButtonDisabledWithPipeline,
-      })
+      return [
+        {
+          name: t('datasetMenus.documents', { ns: 'common' }),
+          href: `/datasets/${datasetId}/documents`,
+          icon: RiFileTextLine,
+          selectedIcon: RiFileTextFill,
+          disabled: isButtonDisabledWithPipeline,
+        },
+        {
+          name: t('datasetMenus.pipeline', { ns: 'common' }),
+          href: `/datasets/${datasetId}/pipeline`,
+          icon: PipelineLine as RemixiconComponentType,
+          selectedIcon: PipelineFill as RemixiconComponentType,
+          disabled: false,
+        },
+        ...(isRagPipelineDataset && canAccessSnippetsAndEvaluation
+          ? [{
+              name: t('datasetMenus.evaluation', { ns: 'common' }),
+              href: `/datasets/${datasetId}/evaluation`,
+              icon: RiFlaskLine,
+              selectedIcon: RiFlaskFill,
+              disabled: isButtonDisabledWithPipeline,
+            }]
+          : []),
+        ...baseNavigation,
+      ]
     }
 
     return baseNavigation
-  }, [t, datasetId, isButtonDisabledWithPipeline, datasetRes?.provider])
+  }, [canAccessSnippetsAndEvaluation, t, datasetId, isButtonDisabledWithPipeline, isRagPipelineDataset, datasetRes?.provider])
 
   useDocumentTitle(datasetRes?.name || t('menus.datasets', { ns: 'common' }))
 
diff --git a/web/app/(commonLayout)/layout.tsx b/web/app/(commonLayout)/layout.tsx
index 49e9431940..5ac39f1e39 100644
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@@ -5,6 +5,7 @@ import InSiteMessageNotification from '@/app/components/app/in-site-message/noti
 import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import Zendesk from '@/app/components/base/zendesk'
+import GotoAnything from '@/app/components/goto-anything'
 import Header from '@/app/components/header'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import ReadmePanel from '@/app/components/plugins/readme-panel'
@@ -12,15 +13,10 @@ import { AppContextProvider } from '@/context/app-context-provider'
 import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
 import { ModalContextProvider } from '@/context/modal-context-provider'
 import { ProviderContextProvider } from '@/context/provider-context-provider'
-import dynamic from '@/next/dynamic'
 import PartnerStack from '../components/billing/partner-stack'
 import Splash from '../components/splash'
 import RoleRouteGuard from './role-route-guard'
 
-const GotoAnything = dynamic(() => import('@/app/components/goto-anything'), {
-  ssr: false,
-})
-
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <>
diff --git a/web/app/(commonLayout)/role-route-guard.tsx b/web/app/(commonLayout)/role-route-guard.tsx
index 483dfef095..6de5efb346 100644
--- a/web/app/(commonLayout)/role-route-guard.tsx
+++ b/web/app/(commonLayout)/role-route-guard.tsx
@@ -6,7 +6,7 @@ import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { usePathname, useRouter } from '@/next/navigation'
 
-const datasetOperatorRedirectRoutes = ['/apps', '/app', '/explore', '/tools'] as const
+const datasetOperatorRedirectRoutes = ['/apps', '/app', '/snippets', '/explore', '/tools'] as const
 
 const isPathUnderRoute = (pathname: string, route: string) => pathname === route || pathname.startsWith(`${route}/`)
 
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
new file mode 100644
index 0000000000..adc4bb6903
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/evaluation/page.tsx
@@ -0,0 +1,11 @@
+import SnippetEvaluationPage from '@/app/components/snippets/snippet-evaluation-page'
+
+const Page = async (props: {
+  params: Promise<{ snippetId: string }>
+}) => {
+  const { snippetId } = await props.params
+
+  return <SnippetEvaluationPage snippetId={snippetId} />
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
new file mode 100644
index 0000000000..8a39dc710b
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/orchestrate/page.tsx
@@ -0,0 +1,11 @@
+import SnippetPage from '@/app/components/snippets'
+
+const Page = async (props: {
+  params: Promise<{ snippetId: string }>
+}) => {
+  const { snippetId } = await props.params
+
+  return <SnippetPage snippetId={snippetId} />
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts b/web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts
new file mode 100644
index 0000000000..578c562848
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/page.spec.ts
@@ -0,0 +1,21 @@
+import Page from './page'
+
+const mockRedirect = vi.fn()
+
+vi.mock('next/navigation', () => ({
+  redirect: (path: string) => mockRedirect(path),
+}))
+
+describe('snippet detail redirect page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should redirect legacy snippet detail routes to orchestrate', async () => {
+    await Page({
+      params: Promise.resolve({ snippetId: 'snippet-1' }),
+    })
+
+    expect(mockRedirect).toHaveBeenCalledWith('/snippets/snippet-1/orchestrate')
+  })
+})
diff --git a/web/app/(commonLayout)/snippets/[snippetId]/page.tsx b/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
new file mode 100644
index 0000000000..3b35e29360
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/[snippetId]/page.tsx
@@ -0,0 +1,11 @@
+import { redirect } from 'next/navigation'
+
+const Page = async (props: {
+  params: Promise<{ snippetId: string }>
+}) => {
+  const { snippetId } = await props.params
+
+  redirect(`/snippets/${snippetId}/orchestrate`)
+}
+
+export default Page
diff --git a/web/app/(commonLayout)/snippets/page.tsx b/web/app/(commonLayout)/snippets/page.tsx
new file mode 100644
index 0000000000..73fadb0d27
--- /dev/null
+++ b/web/app/(commonLayout)/snippets/page.tsx
@@ -0,0 +1,12 @@
+import Apps from '@/app/components/apps'
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
+
+const SnippetsPage = () => {
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref="/apps">
+      <Apps pageType="snippets" />
+    </SnippetAndEvaluationPlanGuard>
+  )
+}
+
+export default SnippetsPage
diff --git a/web/app/components/app-sidebar/__tests__/index.spec.tsx b/web/app/components/app-sidebar/__tests__/index.spec.tsx
index b2e1e92bbb..1b6046baee 100644
--- a/web/app/components/app-sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/index.spec.tsx
@@ -165,6 +165,21 @@ describe('AppDetailNav', () => {
       )
       expect(screen.queryByTestId('extra-info')).not.toBeInTheDocument()
     })
+
+    it('should render custom header and navigation when provided', () => {
+      render(
+        <AppDetailNav
+          navigation={navigation}
+          renderHeader={mode => <div data-testid="custom-header" data-mode={mode} />}
+          renderNavigation={mode => <div data-testid="custom-navigation" data-mode={mode} />}
+        />,
+      )
+
+      expect(screen.getByTestId('custom-header')).toHaveAttribute('data-mode', 'expand')
+      expect(screen.getByTestId('custom-navigation')).toHaveAttribute('data-mode', 'expand')
+      expect(screen.queryByTestId('app-info')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('nav-link-Overview')).not.toBeInTheDocument()
+    })
   })
 
   describe('Workflow canvas mode', () => {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
index 2171974253..58a1c5a3c6 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
@@ -2,7 +2,7 @@ import type { App, AppSSO } from '@/types/app'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import AppInfoDetailPanel from '../app-info-detail-panel'
 
 vi.mock('../../../base/app-icon', () => ({
@@ -135,6 +135,17 @@ describe('AppInfoDetailPanel', () => {
       expect(cardView).toHaveAttribute('data-app-id', 'app-1')
     })
 
+    it('should not render CardView when app type is evaluation', () => {
+      render(
+        <AppInfoDetailPanel
+          {...defaultProps}
+          appDetail={createAppDetail({ type: AppTypeEnum.EVALUATION })}
+        />,
+      )
+
+      expect(screen.queryByTestId('card-view')).not.toBeInTheDocument()
+    })
+
     it('should render app icon with large size', () => {
       render(<AppInfoDetailPanel {...defaultProps} />)
       const icon = screen.getByTestId('app-icon')
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 624630b179..4e90c238ea 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
 import ContentDialog from '@/app/components/base/content-dialog'
 import { Button } from '@/app/components/base/ui/button'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import AppIcon from '../../base/app-icon'
 import { getAppModeLabel } from './app-mode-labels'
 import AppOperations from './app-operations'
@@ -126,11 +126,13 @@ const AppInfoDetailPanel = ({
           secondaryOperations={secondaryOperations}
         />
       </div>
-      <CardView
-        appId={appDetail.id}
-        isInPanel={true}
-        className="flex flex-1 flex-col gap-2 overflow-auto px-2 py-1"
-      />
+      {appDetail.type !== AppTypeEnum.EVALUATION && (
+        <CardView
+          appId={appDetail.id}
+          isInPanel={true}
+          className="flex flex-1 flex-col gap-2 overflow-auto px-2 py-1"
+        />
+      )}
       {switchOperation && (
         <div className="flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch pb-2">
           <Button
diff --git a/web/app/components/app-sidebar/basic.tsx b/web/app/components/app-sidebar/basic.tsx
index 2814072860..29a08f8a01 100644
--- a/web/app/components/app-sidebar/basic.tsx
+++ b/web/app/components/app-sidebar/basic.tsx
@@ -76,8 +76,8 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
         )}
       {mode === 'expand' && (
         <div className="group w-full">
-          <div className={`flex flex-row items-center system-md-semibold text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
-            <div className="min-w-0 overflow-hidden break-normal text-ellipsis">
+          <div className={`flex flex-row items-center text-text-secondary system-md-semibold group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
+            <div className="min-w-0 overflow-hidden text-ellipsis break-normal">
               {name}
             </div>
             {hoverTip
@@ -95,10 +95,10 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
               )}
           </div>
           {!hideType && isExtraInLine && (
-            <div className="flex system-2xs-medium-uppercase text-text-tertiary">{type}</div>
+            <div className="flex text-text-tertiary system-2xs-medium-uppercase">{type}</div>
           )}
           {!hideType && !isExtraInLine && (
-            <div className="system-2xs-medium-uppercase text-text-tertiary">{isExternal ? t('externalTag', { ns: 'dataset' }) : type}</div>
+            <div className="text-text-tertiary system-2xs-medium-uppercase">{isExternal ? t('externalTag', { ns: 'dataset' }) : type}</div>
           )}
         </div>
       )}
diff --git a/web/app/components/app-sidebar/dataset-info/menu-item.tsx b/web/app/components/app-sidebar/dataset-info/menu-item.tsx
index d426512176..7ad8d9407f 100644
--- a/web/app/components/app-sidebar/dataset-info/menu-item.tsx
+++ b/web/app/components/app-sidebar/dataset-info/menu-item.tsx
@@ -22,7 +22,7 @@ const MenuItem = ({
       }}
     >
       <Icon className="size-4 text-text-tertiary" />
-      <span className="px-1 system-md-regular text-text-secondary">{name}</span>
+      <span className="px-1 text-text-secondary system-md-regular">{name}</span>
     </div>
   )
 }
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 716b73abf5..7b69c94b47 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -27,12 +27,16 @@ type IAppDetailNavProps = {
     disabled?: boolean
   }>
   extraInfo?: (modeState: string) => React.ReactNode
+  renderHeader?: (modeState: string) => React.ReactNode
+  renderNavigation?: (modeState: string) => React.ReactNode
 }
 
 const AppDetailNav = ({
   navigation,
   extraInfo,
   iconType = 'app',
+  renderHeader,
+  renderNavigation,
 }: IAppDetailNavProps) => {
   const { appSidebarExpand, setAppSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
@@ -104,10 +108,11 @@ const AppDetailNav = ({
           expand ? 'p-2' : 'p-1',
         )}
       >
-        {iconType === 'app' && (
+        {renderHeader?.(appSidebarExpand)}
+        {!renderHeader && iconType === 'app' && (
           <AppInfo expand={expand} />
         )}
-        {iconType !== 'app' && (
+        {!renderHeader && iconType !== 'app' && (
           <DatasetInfo expand={expand} />
         )}
       </div>
@@ -136,7 +141,8 @@ const AppDetailNav = ({
           expand ? 'px-3 py-2' : 'p-3',
         )}
       >
-        {navigation.map((item, index) => {
+        {renderNavigation?.(appSidebarExpand)}
+        {!renderNavigation && navigation.map((item, index) => {
           return (
             <NavLink
               key={index}
diff --git a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
index fe46290002..e480c36945 100644
--- a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
@@ -262,4 +262,20 @@ describe('NavLink Animation and Layout Issues', () => {
       expect(iconWrapper).toHaveClass('-ml-1')
     })
   })
+
+  describe('Button Mode', () => {
+    it('should render as an interactive button when href is omitted', () => {
+      const onClick = vi.fn()
+
+      render(<NavLink {...mockProps} href={undefined} active={true} onClick={onClick} />)
+
+      const buttonElement = screen.getByText('Orchestrate').closest('button')
+      expect(buttonElement).not.toBeNull()
+      expect(buttonElement).toHaveClass('bg-components-menu-item-bg-active')
+      expect(buttonElement).toHaveClass('text-text-accent-light-mode-only')
+
+      buttonElement?.click()
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
 })
diff --git a/web/app/components/app-sidebar/nav-link/index.tsx b/web/app/components/app-sidebar/nav-link/index.tsx
index a2f737da16..89ad74d3c2 100644
--- a/web/app/components/app-sidebar/nav-link/index.tsx
+++ b/web/app/components/app-sidebar/nav-link/index.tsx
@@ -14,13 +14,15 @@ export type NavIcon = React.ComponentType<
 
 export type NavLinkProps = {
   name: string
-  href: string
+  href?: string
   iconMap: {
     selected: NavIcon
     normal: NavIcon
   }
   mode?: string
   disabled?: boolean
+  active?: boolean
+  onClick?: () => void
 }
 
 const NavLink = ({
@@ -29,6 +31,8 @@ const NavLink = ({
   iconMap,
   mode = 'expand',
   disabled = false,
+  active,
+  onClick,
 }: NavLinkProps) => {
   const segment = useSelectedLayoutSegment()
   const formattedSegment = (() => {
@@ -39,8 +43,11 @@ const NavLink = ({
 
     return res
   })()
-  const isActive = href.toLowerCase().split('/')?.pop() === formattedSegment
+  const isActive = active ?? (href ? href.toLowerCase().split('/')?.pop() === formattedSegment : false)
   const NavIcon = isActive ? iconMap.selected : iconMap.normal
+  const linkClassName = cn(isActive
+    ? 'border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only system-sm-semibold'
+    : 'text-components-menu-item-text system-sm-medium hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover', 'flex h-8 items-center rounded-lg pl-3 pr-1')
 
   const renderIcon = () => (
     <div className={cn(mode !== 'expand' && '-ml-1')}>
@@ -70,13 +77,32 @@ const NavLink = ({
     )
   }
 
+  if (!href) {
+    return (
+      <button
+        key={name}
+        type="button"
+        className={linkClassName}
+        title={mode === 'collapse' ? name : ''}
+        onClick={onClick}
+      >
+        {renderIcon()}
+        <span
+          className={cn('overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out', mode === 'expand'
+            ? 'ml-2 max-w-none opacity-100'
+            : 'ml-0 max-w-0 opacity-0')}
+        >
+          {name}
+        </span>
+      </button>
+    )
+  }
+
   return (
     <Link
       key={name}
       href={href}
-      className={cn(isActive
-        ? 'border-t-[0.75px] border-r-[0.25px] border-b-[0.25px] border-l-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active system-sm-semibold text-text-accent-light-mode-only'
-        : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover', 'flex h-8 items-center rounded-lg pr-1 pl-3')}
+      className={linkClassName}
       title={mode === 'collapse' ? name : ''}
     >
       {renderIcon()}
diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
new file mode 100644
index 0000000000..4c24af692b
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/dropdown.spec.tsx
@@ -0,0 +1,285 @@
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { CreateSnippetDialogPayload } from '@/app/components/workflow/create-snippet-dialog'
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import SnippetInfoDropdown from '../dropdown'
+
+const mockReplace = vi.fn()
+const mockDownloadBlob = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockUpdateMutate = vi.fn()
+const mockExportMutateAsync = vi.fn()
+const mockDeleteMutate = vi.fn()
+let mockDropdownOpen = false
+let mockDropdownOnOpenChange: ((open: boolean) => void) | undefined
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    replace: mockReplace,
+  }),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadBlob: (args: { data: Blob, fileName: string }) => mockDownloadBlob(args),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+  DropdownMenu: ({
+    open,
+    onOpenChange,
+    children,
+  }: {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    children: React.ReactNode
+  }) => {
+    mockDropdownOpen = !!open
+    mockDropdownOnOpenChange = onOpenChange
+    return <div>{children}</div>
+  },
+  DropdownMenuTrigger: ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <button
+      type="button"
+      className={className}
+      onClick={() => mockDropdownOnOpenChange?.(!mockDropdownOpen)}
+    >
+      {children}
+    </button>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    mockDropdownOpen ? <div>{children}</div> : null
+  ),
+  DropdownMenuItem: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <button type="button" onClick={onClick}>
+      {children}
+    </button>
+  ),
+  DropdownMenuSeparator: () => <hr />,
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useUpdateSnippetMutation: () => ({
+    mutate: mockUpdateMutate,
+    isPending: false,
+  }),
+  useExportSnippetMutation: () => ({
+    mutateAsync: mockExportMutateAsync,
+    isPending: false,
+  }),
+  useDeleteSnippetMutation: () => ({
+    mutate: mockDeleteMutate,
+    isPending: false,
+  }),
+}))
+
+type MockCreateSnippetDialogProps = {
+  isOpen: boolean
+  title?: string
+  confirmText?: string
+  initialValue?: {
+    name?: string
+    description?: string
+    icon?: AppIconSelection
+  }
+  onClose: () => void
+  onConfirm: (payload: CreateSnippetDialogPayload) => void
+}
+
+vi.mock('@/app/components/workflow/create-snippet-dialog', () => ({
+  default: ({
+    isOpen,
+    title,
+    confirmText,
+    initialValue,
+    onClose,
+    onConfirm,
+  }: MockCreateSnippetDialogProps) => {
+    if (!isOpen)
+      return null
+
+    return (
+      <div data-testid="create-snippet-dialog">
+        <div>{title}</div>
+        <div>{confirmText}</div>
+        <div>{initialValue?.name}</div>
+        <div>{initialValue?.description}</div>
+        <button
+          type="button"
+          onClick={() => onConfirm({
+            name: 'Updated snippet',
+            description: 'Updated description',
+            icon: {
+              type: 'emoji',
+              icon: '✨',
+              background: '#FFFFFF',
+            },
+            graph: {
+              nodes: [],
+              edges: [],
+              viewport: { x: 0, y: 0, zoom: 1 },
+            },
+          })}
+        >
+          submit-edit
+        </button>
+        <button type="button" onClick={onClose}>close-edit</button>
+      </div>
+    )
+  },
+}))
+
+const mockSnippet: SnippetDetail = {
+  id: 'snippet-1',
+  name: 'Social Media Repurposer',
+  description: 'Turn one blog post into multiple social media variations.',
+  author: 'Dify',
+  updatedAt: '2026-03-25 10:00',
+  usage: '12',
+  icon: '🤖',
+  iconBackground: '#F0FDF9',
+  status: undefined,
+}
+
+describe('SnippetInfoDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockDropdownOpen = false
+    mockDropdownOnOpenChange = undefined
+  })
+
+  // Rendering coverage for the menu trigger itself.
+  describe('Rendering', () => {
+    it('should render the dropdown trigger button', () => {
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  // Edit flow should seed the dialog with current snippet info and submit updates.
+  describe('Edit Snippet', () => {
+    it('should open the edit dialog and submit snippet updates', async () => {
+      const user = userEvent.setup()
+      mockUpdateMutate.mockImplementation((_variables: unknown, options?: { onSuccess?: () => void }) => {
+        options?.onSuccess?.()
+      })
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.editInfo'))
+
+      expect(screen.getByTestId('create-snippet-dialog')).toBeInTheDocument()
+      expect(screen.getByText('snippet.editDialogTitle')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.save')).toBeInTheDocument()
+      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+      expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'submit-edit' }))
+
+      expect(mockUpdateMutate).toHaveBeenCalledWith({
+        params: { snippetId: mockSnippet.id },
+        body: {
+          name: 'Updated snippet',
+          description: 'Updated description',
+          icon_info: {
+            icon: '✨',
+            icon_type: 'emoji',
+            icon_background: '#FFFFFF',
+            icon_url: undefined,
+          },
+        },
+      }, expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }))
+      expect(mockToastSuccess).toHaveBeenCalledWith('snippet.editDone')
+    })
+  })
+
+  // Export should call the export hook and download the returned YAML blob.
+  describe('Export Snippet', () => {
+    it('should export and download the snippet yaml', async () => {
+      const user = userEvent.setup()
+      mockExportMutateAsync.mockResolvedValue('yaml: content')
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.exportSnippet'))
+
+      await waitFor(() => {
+        expect(mockExportMutateAsync).toHaveBeenCalledWith({ snippetId: mockSnippet.id })
+      })
+
+      expect(mockDownloadBlob).toHaveBeenCalledWith({
+        data: expect.any(Blob),
+        fileName: `${mockSnippet.name}.yml`,
+      })
+    })
+
+    it('should show an error toast when export fails', async () => {
+      const user = userEvent.setup()
+      mockExportMutateAsync.mockRejectedValue(new Error('export failed'))
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.exportSnippet'))
+
+      await waitFor(() => {
+        expect(mockToastError).toHaveBeenCalledWith('snippet.exportFailed')
+      })
+    })
+  })
+
+  // Delete should require confirmation and redirect after a successful mutation.
+  describe('Delete Snippet', () => {
+    it('should confirm deletion and redirect to the snippets list', async () => {
+      const user = userEvent.setup()
+      mockDeleteMutate.mockImplementation((_variables: unknown, options?: { onSuccess?: () => void }) => {
+        options?.onSuccess?.()
+      })
+
+      render(<SnippetInfoDropdown snippet={mockSnippet} />)
+
+      await user.click(screen.getByRole('button'))
+      await user.click(screen.getByText('snippet.menu.deleteSnippet'))
+
+      expect(screen.getByText('snippet.deleteConfirmTitle')).toBeInTheDocument()
+      expect(screen.getByText('snippet.deleteConfirmContent')).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'snippet.menu.deleteSnippet' }))
+
+      expect(mockDeleteMutate).toHaveBeenCalledWith({
+        params: { snippetId: mockSnippet.id },
+      }, expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }))
+      expect(mockToastSuccess).toHaveBeenCalledWith('snippet.deleted')
+      expect(mockReplace).toHaveBeenCalledWith('/snippets')
+    })
+  })
+})
diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..50754ffd23
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
@@ -0,0 +1,62 @@
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import SnippetInfo from '..'
+
+vi.mock('../dropdown', () => ({
+  default: () => <div data-testid="snippet-info-dropdown" />,
+}))
+
+const mockSnippet: SnippetDetail = {
+  id: 'snippet-1',
+  name: 'Social Media Repurposer',
+  description: 'Turn one blog post into multiple social media variations.',
+  author: 'Dify',
+  updatedAt: '2026-03-25 10:00',
+  usage: '12',
+  icon: '🤖',
+  iconBackground: '#F0FDF9',
+  status: undefined,
+}
+
+describe('SnippetInfo', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the collapsed and expanded sidebar header states.
+  describe('Rendering', () => {
+    it('should render the expanded snippet details and dropdown when expand is true', () => {
+      render(<SnippetInfo expand={true} snippet={mockSnippet} />)
+
+      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+      expect(screen.getByText('snippet.typeLabel')).toBeInTheDocument()
+      expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
+      expect(screen.getByTestId('snippet-info-dropdown')).toBeInTheDocument()
+    })
+
+    it('should hide the expanded-only content when expand is false', () => {
+      render(<SnippetInfo expand={false} snippet={mockSnippet} />)
+
+      expect(screen.queryByText(mockSnippet.name)).not.toBeInTheDocument()
+      expect(screen.queryByText('snippet.typeLabel')).not.toBeInTheDocument()
+      expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
+      expect(screen.queryByTestId('snippet-info-dropdown')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge cases around optional snippet fields should not break the header layout.
+  describe('Edge Cases', () => {
+    it('should omit the description block when the snippet has no description', () => {
+      render(
+        <SnippetInfo
+          expand={true}
+          snippet={{ ...mockSnippet, description: '' }}
+        />,
+      )
+
+      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
+      expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
new file mode 100644
index 0000000000..1e1bddf615
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -0,0 +1,198 @@
+'use client'
+
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { SnippetDetail } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { toast } from '@/app/components/base/ui/toast'
+import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
+import { useRouter } from '@/next/navigation'
+import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
+
+import { downloadBlob } from '@/utils/download'
+
+type SnippetInfoDropdownProps = {
+  snippet: SnippetDetail
+}
+
+const FALLBACK_ICON: AppIconSelection = {
+  type: 'emoji',
+  icon: '🤖',
+  background: '#FFEAD5',
+}
+
+const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
+  const { t } = useTranslation('snippet')
+  const { replace } = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false)
+  const updateSnippetMutation = useUpdateSnippetMutation()
+  const exportSnippetMutation = useExportSnippetMutation()
+  const deleteSnippetMutation = useDeleteSnippetMutation()
+
+  const initialValue = React.useMemo(() => ({
+    name: snippet.name,
+    description: snippet.description,
+    icon: snippet.icon
+      ? {
+          type: 'emoji' as const,
+          icon: snippet.icon,
+          background: snippet.iconBackground || FALLBACK_ICON.background,
+        }
+      : FALLBACK_ICON,
+  }), [snippet.description, snippet.icon, snippet.iconBackground, snippet.name])
+
+  const handleOpenEditDialog = React.useCallback(() => {
+    setOpen(false)
+    setIsEditDialogOpen(true)
+  }, [])
+
+  const handleExportSnippet = React.useCallback(async () => {
+    setOpen(false)
+    try {
+      const data = await exportSnippetMutation.mutateAsync({ snippetId: snippet.id })
+      const file = new Blob([data], { type: 'application/yaml' })
+      downloadBlob({ data: file, fileName: `${snippet.name}.yml` })
+    }
+    catch {
+      toast.error(t('exportFailed'))
+    }
+  }, [exportSnippetMutation, snippet.id, snippet.name, t])
+
+  const handleEditSnippet = React.useCallback(async ({ name, description, icon }: {
+    name: string
+    description: string
+    icon: AppIconSelection
+  }) => {
+    updateSnippetMutation.mutate({
+      params: { snippetId: snippet.id },
+      body: {
+        name,
+        description: description || undefined,
+        icon_info: {
+          icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+          icon_type: icon.type,
+          icon_background: icon.type === 'emoji' ? icon.background : undefined,
+          icon_url: icon.type === 'image' ? icon.url : undefined,
+        },
+      },
+    }, {
+      onSuccess: () => {
+        toast.success(t('editDone'))
+        setIsEditDialogOpen(false)
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('editFailed'))
+      },
+    })
+  }, [snippet.id, t, updateSnippetMutation])
+
+  const handleDeleteSnippet = React.useCallback(() => {
+    deleteSnippetMutation.mutate({
+      params: { snippetId: snippet.id },
+    }, {
+      onSuccess: () => {
+        toast.success(t('deleted'))
+        setIsDeleteDialogOpen(false)
+        replace('/snippets')
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('deleteFailed'))
+      },
+    })
+  }, [deleteSnippetMutation, replace, snippet.id, t])
+
+  return (
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger
+          className={cn('action-btn action-btn-m size-6 rounded-md text-text-tertiary', open && 'bg-state-base-hover text-text-secondary')}
+        >
+          <span aria-hidden className="i-ri-more-fill size-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={4}
+          popupClassName="w-[180px] p-1"
+        >
+          <DropdownMenuItem className="mx-0 gap-2" onClick={handleOpenEditDialog}>
+            <span aria-hidden className="i-ri-edit-line size-4 shrink-0 text-text-tertiary" />
+            <span className="grow">{t('menu.editInfo')}</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="mx-0 gap-2" onClick={handleExportSnippet}>
+            <span aria-hidden className="i-ri-download-2-line size-4 shrink-0 text-text-tertiary" />
+            <span className="grow">{t('menu.exportSnippet')}</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator className="!my-1 bg-divider-subtle" />
+          <DropdownMenuItem
+            className="mx-0 gap-2"
+            destructive
+            onClick={() => {
+              setOpen(false)
+              setIsDeleteDialogOpen(true)
+            }}
+          >
+            <span aria-hidden className="i-ri-delete-bin-line size-4 shrink-0" />
+            <span className="grow">{t('menu.deleteSnippet')}</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {isEditDialogOpen && (
+        <CreateSnippetDialog
+          isOpen={isEditDialogOpen}
+          initialValue={initialValue}
+          title={t('editDialogTitle')}
+          confirmText={t('operation.save', { ns: 'common' })}
+          isSubmitting={updateSnippetMutation.isPending}
+          onClose={() => setIsEditDialogOpen(false)}
+          onConfirm={handleEditSnippet}
+        />
+      )}
+
+      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent className="w-[400px]">
+          <div className="space-y-2 p-6">
+            <AlertDialogTitle className="title-lg-semi-bold text-text-primary">
+              {t('deleteConfirmTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="system-sm-regular text-text-tertiary">
+              {t('deleteConfirmContent')}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions className="pt-0">
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              loading={deleteSnippetMutation.isPending}
+              onClick={handleDeleteSnippet}
+            >
+              {t('menu.deleteSnippet')}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+export default React.memo(SnippetInfoDropdown)
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
new file mode 100644
index 0000000000..cc1f867026
--- /dev/null
+++ b/web/app/components/app-sidebar/snippet-info/index.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import type { SnippetDetail } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '@/app/components/base/app-icon'
+import SnippetInfoDropdown from './dropdown'
+
+type SnippetInfoProps = {
+  expand: boolean
+  snippet: SnippetDetail
+}
+
+const SnippetInfo = ({
+  expand,
+  snippet,
+}: SnippetInfoProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <div className={cn('flex flex-col', expand ? 'px-2 pt-2 pb-1' : 'p-1')}>
+      <div className={cn('flex flex-col', expand ? 'gap-2 rounded-xl p-2' : '')}>
+        <div className={cn('flex', expand ? 'items-center justify-between' : 'items-start gap-3')}>
+          <div className={cn('shrink-0', !expand && 'ml-1')}>
+            <AppIcon
+              size={expand ? 'large' : 'small'}
+              iconType="emoji"
+              icon={snippet.icon}
+              background={snippet.iconBackground}
+            />
+          </div>
+          {expand && <SnippetInfoDropdown snippet={snippet} />}
+        </div>
+        {expand && (
+          <div className="min-w-0">
+            <div className="system-md-semibold truncate text-text-secondary">
+              {snippet.name}
+            </div>
+            <div className="system-2xs-medium-uppercase pt-1 text-text-tertiary">
+              {t('typeLabel')}
+            </div>
+          </div>
+        )}
+        {expand && snippet.description && (
+          <p className="system-xs-regular line-clamp-3 break-words text-text-tertiary">
+            {snippet.description}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(SnippetInfo)
diff --git a/web/app/components/app/app-publisher/__tests__/index.spec.tsx b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
index bba2f53afc..a7fad12a27 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { AccessMode } from '@/models/access-control'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import AppPublisher from '../index'
 
@@ -15,6 +15,8 @@ const mockOpenAsyncWindow = vi.fn()
 const mockFetchInstalledAppList = vi.fn()
 const mockFetchAppDetailDirect = vi.fn()
 const mockToastError = vi.fn()
+const mockConvertWorkflowType = vi.fn()
+const mockRefetchEvaluationWorkflowAssociatedTargets = vi.fn()
 const mockInvalidateAppWorkflow = vi.fn()
 
 const sectionProps = vi.hoisted(() => ({
@@ -27,6 +29,7 @@ const ahooksMocks = vi.hoisted(() => ({
 }))
 
 let mockAppDetail: Record<string, any> | null = null
+let mockEvaluationWorkflowAssociatedTargets: Record<string, any> | undefined
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
@@ -89,6 +92,21 @@ vi.mock('@/service/apps', () => ({
   fetchAppDetailDirect: (...args: unknown[]) => mockFetchAppDetailDirect(...args),
 }))
 
+vi.mock('@/service/use-apps', () => ({
+  useConvertWorkflowTypeMutation: () => ({
+    mutateAsync: (...args: unknown[]) => mockConvertWorkflowType(...args),
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/service/use-evaluation', () => ({
+  useEvaluationWorkflowAssociatedTargets: () => ({
+    data: mockEvaluationWorkflowAssociatedTargets,
+    refetch: mockRefetchEvaluationWorkflowAssociatedTargets,
+    isFetching: false,
+  }),
+}))
+
 vi.mock('@/service/use-workflow', () => ({
   useInvalidateAppWorkflow: () => mockInvalidateAppWorkflow,
 }))
@@ -129,15 +147,15 @@ vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
 
   return {
     PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
+      <OpenContext value={open}>
         <div>{children}</div>
-      </OpenContext.Provider>
+      </OpenContext>
     ),
     PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
       <div onClick={onClick}>{children}</div>
     ),
     PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = ReactModule.useContext(OpenContext)
+      const open = ReactModule.use(OpenContext)
       return open ? <div>{children}</div> : null
     },
   }
@@ -150,6 +168,7 @@ vi.mock('../sections', () => ({
       <div>
         <button onClick={() => void props.handlePublish()}>publisher-summary-publish</button>
         <button onClick={() => void props.handleRestore()}>publisher-summary-restore</button>
+        <button onClick={() => void props.onWorkflowTypeSwitch()}>publisher-switch-workflow-type</button>
       </div>
     )
   },
@@ -180,6 +199,7 @@ describe('AppPublisher', () => {
       name: 'Demo App',
       mode: AppModeEnum.CHAT,
       access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+      type: AppTypeEnum.WORKFLOW,
       site: {
         app_base_url: 'https://example.com',
         access_token: 'token-1',
@@ -192,6 +212,12 @@ describe('AppPublisher', () => {
       id: 'app-1',
       access_mode: AccessMode.PUBLIC,
     })
+    mockConvertWorkflowType.mockResolvedValue({})
+    mockEvaluationWorkflowAssociatedTargets = { items: [] }
+    mockRefetchEvaluationWorkflowAssociatedTargets.mockResolvedValue({
+      data: { items: [] },
+      isError: false,
+    })
     mockOpenAsyncWindow.mockImplementation(async (resolver: () => Promise<string>) => {
       await resolver()
     })
@@ -457,4 +483,178 @@ describe('AppPublisher', () => {
     })
     expect(screen.getByTestId('access-control'))!.toBeInTheDocument()
   })
+
+  it('should switch workflow type, refresh app detail, and close the popover for published apps', async () => {
+    mockFetchAppDetailDirect.mockResolvedValueOnce({
+      id: 'app-1',
+      type: AppTypeEnum.EVALUATION,
+    })
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockConvertWorkflowType).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: AppTypeEnum.EVALUATION },
+      })
+      expect(mockFetchAppDetailDirect).toHaveBeenCalledWith({ url: '/apps', id: 'app-1' })
+      expect(mockSetAppDetail).toHaveBeenCalledWith({
+        id: 'app-1',
+        type: AppTypeEnum.EVALUATION,
+      })
+    })
+    expect(screen.queryByText('publisher-summary-publish')).not.toBeInTheDocument()
+  })
+
+  it('should hide access and actions sections for evaluation workflow apps', () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+
+    expect(screen.getByText('publisher-summary-publish')).toBeInTheDocument()
+    expect(screen.queryByText('publisher-access-control')).not.toBeInTheDocument()
+    expect(screen.queryByText('publisher-embed')).not.toBeInTheDocument()
+    expect(sectionProps.summary?.workflowTypeSwitchConfig).toEqual({
+      targetType: AppTypeEnum.WORKFLOW,
+      publishLabelKey: 'common.publishAsStandardWorkflow',
+      switchLabelKey: 'common.switchToStandardWorkflow',
+      tipKey: 'common.switchToStandardWorkflowTip',
+    })
+  })
+
+  it('should confirm before switching an evaluation workflow with associated targets to a standard workflow', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+    mockEvaluationWorkflowAssociatedTargets = {
+      items: [
+        {
+          target_type: 'app',
+          target_id: 'dependent-app-1',
+          target_name: 'Dependent App',
+        },
+        {
+          target_type: 'knowledge_base',
+          target_id: 'knowledge-1',
+          target_name: 'Knowledge Base',
+        },
+      ],
+    }
+    mockRefetchEvaluationWorkflowAssociatedTargets.mockResolvedValueOnce({
+      data: mockEvaluationWorkflowAssociatedTargets,
+      isError: false,
+    })
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockRefetchEvaluationWorkflowAssociatedTargets).toHaveBeenCalledTimes(1)
+    })
+    expect(mockConvertWorkflowType).not.toHaveBeenCalled()
+    expect(screen.getByText('Dependent App')).toBeInTheDocument()
+    expect(screen.getByText('Knowledge Base')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.switchToStandardWorkflowConfirm.switch' }))
+
+    await waitFor(() => {
+      expect(mockConvertWorkflowType).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: AppTypeEnum.WORKFLOW },
+      })
+    })
+  })
+
+  it('should switch an evaluation workflow directly when there are no associated targets', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockRefetchEvaluationWorkflowAssociatedTargets).toHaveBeenCalledTimes(1)
+      expect(mockConvertWorkflowType).toHaveBeenCalledWith({
+        params: { appId: 'app-1' },
+        query: { target_type: AppTypeEnum.WORKFLOW },
+      })
+    })
+    expect(screen.queryByText('common.switchToStandardWorkflowConfirm.title')).not.toBeInTheDocument()
+  })
+
+  it('should block switching an evaluation workflow when associated targets fail to load', async () => {
+    mockAppDetail = {
+      ...mockAppDetail,
+      type: AppTypeEnum.EVALUATION,
+    }
+    mockRefetchEvaluationWorkflowAssociatedTargets.mockResolvedValueOnce({
+      data: undefined,
+      isError: true,
+    })
+
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalledWith('common.switchToStandardWorkflowConfirm.loadFailed')
+    })
+    expect(mockConvertWorkflowType).not.toHaveBeenCalled()
+  })
+
+  it('should block switching to evaluation workflow when restricted nodes exist', async () => {
+    render(
+      <AppPublisher
+        publishedAt={Date.now()}
+        hasHumanInputNode
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publish'))
+    fireEvent.click(screen.getByText('publisher-switch-workflow-type'))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalledWith('common.switchToEvaluationWorkflowDisabledTip')
+    })
+
+    expect(mockConvertWorkflowType).not.toHaveBeenCalled()
+    expect(sectionProps.summary?.workflowTypeSwitchDisabled).toBe(true)
+    expect(sectionProps.summary?.workflowTypeSwitchDisabledReason).toBe('common.switchToEvaluationWorkflowDisabledTip')
+  })
 })
diff --git a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
index 57e7a55b13..f242f1d6c2 100644
--- a/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/sections.spec.tsx
@@ -45,12 +45,14 @@ describe('app-publisher sections', () => {
         handleRestore={handleRestore}
         isChatApp
         multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={Date.now()}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded={false}
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
@@ -83,12 +85,14 @@ describe('app-publisher sections', () => {
         handleRestore={vi.fn()}
         isChatApp={false}
         multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={undefined}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded={false}
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
@@ -107,12 +111,14 @@ describe('app-publisher sections', () => {
         handleRestore={vi.fn()}
         isChatApp={false}
         multipleModelConfigs={[{ id: '1' } as any]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={undefined}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded={false}
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
@@ -131,18 +137,85 @@ describe('app-publisher sections', () => {
         handleRestore={vi.fn()}
         isChatApp={false}
         multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
         publishDisabled={false}
         published={false}
         publishedAt={undefined}
         publishShortcut={['ctrl', '⇧', 'P']}
         startNodeLimitExceeded
         upgradeHighlightStyle={{}}
+        workflowTypeSwitchDisabled={false}
       />,
     )
 
     expect(screen.getByText('publishLimit.startNodeDesc')).toBeInTheDocument()
   })
 
+  it('should render workflow type switch action and call switch handler', () => {
+    const onWorkflowTypeSwitch = vi.fn()
+
+    render(
+      <PublisherSummarySection
+        debugWithMultipleModel={false}
+        draftUpdatedAt={Date.now()}
+        formatTimeFromNow={() => '1 minute ago'}
+        handlePublish={vi.fn()}
+        handleRestore={vi.fn()}
+        isChatApp={false}
+        multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={onWorkflowTypeSwitch}
+        publishDisabled={false}
+        published={false}
+        publishedAt={undefined}
+        publishShortcut={['ctrl', '⇧', 'P']}
+        startNodeLimitExceeded={false}
+        upgradeHighlightStyle={{}}
+        workflowTypeSwitchConfig={{
+          targetType: 'evaluation',
+          publishLabelKey: 'common.publishAsEvaluationWorkflow',
+          switchLabelKey: 'common.switchToEvaluationWorkflow',
+          tipKey: 'common.switchToEvaluationWorkflowTip',
+        }}
+        workflowTypeSwitchDisabled={false}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.publishAsEvaluationWorkflow'))
+
+    expect(onWorkflowTypeSwitch).toHaveBeenCalledTimes(1)
+  })
+
+  it('should disable workflow type switch when a disabled reason is provided', () => {
+    render(
+      <PublisherSummarySection
+        debugWithMultipleModel={false}
+        draftUpdatedAt={Date.now()}
+        formatTimeFromNow={() => '1 minute ago'}
+        handlePublish={vi.fn()}
+        handleRestore={vi.fn()}
+        isChatApp={false}
+        multipleModelConfigs={[]}
+        onWorkflowTypeSwitch={vi.fn()}
+        publishDisabled={false}
+        published={false}
+        publishedAt={undefined}
+        publishShortcut={['ctrl', '⇧', 'P']}
+        startNodeLimitExceeded={false}
+        upgradeHighlightStyle={{}}
+        workflowTypeSwitchConfig={{
+          targetType: 'evaluation',
+          publishLabelKey: 'common.publishAsEvaluationWorkflow',
+          switchLabelKey: 'common.switchToEvaluationWorkflow',
+          tipKey: 'common.switchToEvaluationWorkflowTip',
+        }}
+        workflowTypeSwitchDisabled
+        workflowTypeSwitchDisabledReason="common.switchToEvaluationWorkflowDisabledTip"
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: /common\.publishAsEvaluationWorkflow/i })).toBeDisabled()
+  })
+
   it('should render loading access state and access mode labels when enabled', () => {
     const { rerender } = render(
       <PublisherAccessSection
diff --git a/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
new file mode 100644
index 0000000000..39aad51ffd
--- /dev/null
+++ b/web/app/components/app/app-publisher/evaluation-workflow-switch-confirm-dialog.tsx
@@ -0,0 +1,158 @@
+'use client'
+
+import type { EvaluationWorkflowAssociatedTarget, EvaluationWorkflowAssociatedTargetType } from '@/types/evaluation'
+import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import Link from '@/next/link'
+
+type EvaluationWorkflowSwitchConfirmDialogProps = {
+  open: boolean
+  targets: EvaluationWorkflowAssociatedTarget[]
+  loading?: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+}
+
+const TARGET_TYPE_META: Record<EvaluationWorkflowAssociatedTargetType, {
+  icon: string
+  iconClassName: string
+  labelKey: I18nKeysWithPrefix<'workflow', 'common.switchToStandardWorkflowConfirm.targetTypes.'>
+  href: (targetId: string) => string
+}> = {
+  app: {
+    icon: 'i-ri-flow-chart',
+    iconClassName: 'bg-components-icon-bg-teal-soft text-util-colors-teal-teal-600',
+    labelKey: 'common.switchToStandardWorkflowConfirm.targetTypes.app',
+    href: targetId => `/app/${targetId}/workflow`,
+  },
+  snippets: {
+    icon: 'i-ri-edit-2-line',
+    iconClassName: 'bg-components-icon-bg-violet-soft text-util-colors-violet-violet-600',
+    labelKey: 'common.switchToStandardWorkflowConfirm.targetTypes.snippets',
+    href: targetId => `/snippets/${targetId}/orchestrate`,
+  },
+  knowledge_base: {
+    icon: 'i-ri-book-2-line',
+    iconClassName: 'bg-components-icon-bg-indigo-soft text-util-colors-blue-blue-600',
+    labelKey: 'common.switchToStandardWorkflowConfirm.targetTypes.knowledge_base',
+    href: targetId => `/datasets/${targetId}/documents`,
+  },
+}
+
+const getTargetMeta = (targetType: EvaluationWorkflowAssociatedTargetType) => {
+  return TARGET_TYPE_META[targetType] ?? TARGET_TYPE_META.app
+}
+
+const DependentTargetItem = ({
+  target,
+}: {
+  target: EvaluationWorkflowAssociatedTarget
+}) => {
+  const { t } = useTranslation()
+  const meta = getTargetMeta(target.target_type)
+  const targetName = target.target_name || target.target_id
+
+  return (
+    <Link
+      href={meta.href(target.target_id)}
+      className="group flex w-full items-center gap-3 rounded-lg bg-background-section p-2 hover:bg-background-section-burn"
+      title={targetName}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'flex size-10 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-regular',
+          meta.iconClassName,
+        )}
+      >
+        <span className={cn(meta.icon, 'size-5')} />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col gap-1 py-px">
+        <span className="system-md-semibold truncate text-text-secondary">
+          {targetName}
+        </span>
+        <span className="system-2xs-medium-uppercase text-text-tertiary">
+          {t(meta.labelKey, { ns: 'workflow' })}
+        </span>
+      </span>
+      <span
+        aria-hidden="true"
+        className="i-ri-arrow-right-up-line size-3.5 shrink-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100"
+      />
+    </Link>
+  )
+}
+
+const EvaluationWorkflowSwitchConfirmDialog = ({
+  open,
+  targets,
+  loading = false,
+  onOpenChange,
+  onConfirm,
+}: EvaluationWorkflowSwitchConfirmDialogProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="w-[480px]">
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="title-2xl-semi-bold w-full text-text-primary">
+            {t('common.switchToStandardWorkflowConfirm.title', { ns: 'workflow' })}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="system-md-regular w-full text-text-secondary">
+            <span className="block">
+              {t('common.switchToStandardWorkflowConfirm.activeIn', { ns: 'workflow', count: targets.length })}
+            </span>
+            <span className="block">
+              {t('common.switchToStandardWorkflowConfirm.description', { ns: 'workflow' })}
+            </span>
+          </AlertDialogDescription>
+        </div>
+
+        <div className="flex flex-col gap-2 px-6 py-3">
+          <div className="flex items-center gap-2">
+            <span className="system-xs-medium-uppercase shrink-0 text-text-quaternary">
+              {t('common.switchToStandardWorkflowConfirm.dependentWorkflows', { ns: 'workflow' })}
+            </span>
+            <span className="h-px min-w-0 flex-1 bg-divider-subtle" />
+          </div>
+          <div className="flex max-h-[188px] flex-col gap-1 overflow-y-auto">
+            {targets.map(target => (
+              <DependentTargetItem
+                key={`${target.target_type}:${target.target_id}`}
+                target={target}
+              />
+            ))}
+          </div>
+        </div>
+
+        <AlertDialogActions>
+          <AlertDialogCancelButton disabled={loading}>
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton
+            loading={loading}
+            disabled={loading}
+            onClick={onConfirm}
+          >
+            {t('common.switchToStandardWorkflowConfirm.switch', { ns: 'workflow' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export default EvaluationWorkflowSwitchConfirmDialog
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index ce3698dbb7..c5e5fffaa8 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -1,7 +1,9 @@
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
-import type { PublishWorkflowParams } from '@/types/workflow'
+import type { EvaluationWorkflowAssociatedTarget } from '@/types/evaluation'
+import type { I18nKeysWithPrefix } from '@/types/i18n'
+import type { PublishWorkflowParams, WorkflowTypeConversionTarget } from '@/types/workflow'
 import { useKeyPress } from 'ahooks'
 import {
   memo,
@@ -23,17 +25,21 @@ import { WorkflowContext } from '@/app/components/workflow/context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { AccessMode } from '@/models/access-control'
 import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { fetchInstalledAppList } from '@/service/explore'
+import { useConvertWorkflowTypeMutation } from '@/service/use-apps'
+import { useEvaluationWorkflowAssociatedTargets } from '@/service/use-evaluation'
 import { useInvalidateAppWorkflow } from '@/service/use-workflow'
 import { fetchPublishedWorkflow } from '@/service/workflow'
-import { AppModeEnum } from '@/types/app'
+import { AppModeEnum, AppTypeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import { toast } from '../../base/ui/toast'
 import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
 import AccessControl from '../app-access-control'
+import EvaluationWorkflowSwitchConfirmDialog from './evaluation-workflow-switch-confirm-dialog'
 import {
   PublisherAccessSection,
   PublisherActionsSection,
@@ -71,6 +77,32 @@ export type AppPublisherProps = {
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
+type WorkflowTypeSwitchLabelKey = I18nKeysWithPrefix<'workflow', 'common.'>
+
+const WORKFLOW_TYPE_SWITCH_CONFIG: Record<WorkflowTypeConversionTarget, {
+  targetType: WorkflowTypeConversionTarget
+  publishLabelKey: WorkflowTypeSwitchLabelKey
+  switchLabelKey: WorkflowTypeSwitchLabelKey
+  tipKey: WorkflowTypeSwitchLabelKey
+}> = {
+  workflow: {
+    targetType: 'evaluation',
+    publishLabelKey: 'common.publishAsEvaluationWorkflow',
+    switchLabelKey: 'common.switchToEvaluationWorkflow',
+    tipKey: 'common.switchToEvaluationWorkflowTip',
+  },
+  evaluation: {
+    targetType: 'workflow',
+    publishLabelKey: 'common.publishAsStandardWorkflow',
+    switchLabelKey: 'common.switchToStandardWorkflow',
+    tipKey: 'common.switchToStandardWorkflowTip',
+  },
+} as const
+
+const isWorkflowTypeConversionTarget = (type?: AppTypeEnum): type is WorkflowTypeConversionTarget => {
+  return type === 'workflow' || type === 'evaluation'
+}
+
 const AppPublisher = ({
   disabled = false,
   publishDisabled = false,
@@ -97,6 +129,8 @@ const AppPublisher = ({
   const [published, setPublished] = useState(false)
   const [open, setOpen] = useState(false)
   const [showAppAccessControl, setShowAppAccessControl] = useState(false)
+  const [showEvaluationWorkflowSwitchConfirm, setShowEvaluationWorkflowSwitchConfirm] = useState(false)
+  const [evaluationWorkflowSwitchTargets, setEvaluationWorkflowSwitchTargets] = useState<EvaluationWorkflowAssociatedTarget[]>([])
 
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
 
@@ -104,11 +138,36 @@ const AppPublisher = ({
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(s => s.setAppDetail)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
+  const { mutateAsync: convertWorkflowType, isPending: isConvertingWorkflowType } = useConvertWorkflowTypeMutation()
 
   const appURL = getPublisherAppUrl({ appBaseUrl: appBaseURL, accessToken, mode: appDetail?.mode })
   const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
+  const workflowTypeSwitchConfig = useMemo(() => {
+    if (!isWorkflowTypeConversionTarget(appDetail?.type))
+      return undefined
+
+    if (appDetail.type !== AppTypeEnum.EVALUATION && !canAccessSnippetsAndEvaluation)
+      return undefined
+
+    return WORKFLOW_TYPE_SWITCH_CONFIG[appDetail.type]
+  }, [appDetail?.type, canAccessSnippetsAndEvaluation])
+  const isEvaluationWorkflowType = appDetail?.type === AppTypeEnum.EVALUATION
+  const {
+    refetch: refetchEvaluationWorkflowAssociatedTargets,
+    isFetching: isFetchingEvaluationWorkflowAssociatedTargets,
+  } = useEvaluationWorkflowAssociatedTargets(appDetail?.id, { enabled: false })
+  const workflowTypeSwitchDisabledReason = useMemo(() => {
+    if (workflowTypeSwitchConfig?.targetType !== AppTypeEnum.EVALUATION)
+      return undefined
+
+    if (!hasHumanInputNode && !hasTriggerNode)
+      return undefined
+
+    return t('common.switchToEvaluationWorkflowDisabledTip', { ns: 'workflow' })
+  }, [hasHumanInputNode, hasTriggerNode, t, workflowTypeSwitchConfig?.targetType])
 
   const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
   const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
@@ -197,7 +256,7 @@ const AppPublisher = ({
         throw new Error('App not found')
       const { installed_apps } = await fetchInstalledAppList(appDetail.id)
       if (installed_apps?.length > 0)
-        return `${basePath}/explore/installed/${installed_apps[0]!.id}`
+        return `${basePath}/explore/installed/${installed_apps[0].id}`
       throw new Error('No app found in Explore')
     }, {
       onError: (err) => {
@@ -218,6 +277,83 @@ const AppPublisher = ({
     }
   }, [appDetail, setAppDetail])
 
+  const performWorkflowTypeSwitch = useCallback(async () => {
+    if (!appDetail?.id || !workflowTypeSwitchConfig)
+      return false
+
+    try {
+      await convertWorkflowType({
+        params: {
+          appId: appDetail.id,
+        },
+        query: {
+          target_type: workflowTypeSwitchConfig.targetType,
+        },
+      })
+
+      if (!publishedAt)
+        await handlePublish()
+
+      const latestAppDetail = await fetchAppDetailDirect({
+        url: '/apps',
+        id: appDetail.id,
+      })
+      setAppDetail(latestAppDetail)
+
+      if (publishedAt)
+        setOpen(false)
+
+      setShowEvaluationWorkflowSwitchConfirm(false)
+      setEvaluationWorkflowSwitchTargets([])
+      return true
+    }
+    catch {
+      return false
+    }
+  }, [appDetail?.id, convertWorkflowType, handlePublish, publishedAt, setAppDetail, workflowTypeSwitchConfig])
+
+  const handleWorkflowTypeSwitch = useCallback(async () => {
+    if (!appDetail?.id || !workflowTypeSwitchConfig)
+      return
+    if (workflowTypeSwitchDisabledReason) {
+      toast.error(workflowTypeSwitchDisabledReason)
+      return
+    }
+
+    if (appDetail.type === AppTypeEnum.EVALUATION && workflowTypeSwitchConfig.targetType === AppTypeEnum.WORKFLOW) {
+      const associatedTargetsResult = await refetchEvaluationWorkflowAssociatedTargets()
+
+      if (associatedTargetsResult.isError) {
+        toast.error(t('common.switchToStandardWorkflowConfirm.loadFailed', { ns: 'workflow' }))
+        return
+      }
+
+      const associatedTargets = associatedTargetsResult.data?.items ?? []
+      if (associatedTargets.length > 0) {
+        setEvaluationWorkflowSwitchTargets(associatedTargets)
+        setShowEvaluationWorkflowSwitchConfirm(true)
+        return
+      }
+    }
+
+    await performWorkflowTypeSwitch()
+  }, [
+    appDetail?.id,
+    appDetail?.type,
+    performWorkflowTypeSwitch,
+    refetchEvaluationWorkflowAssociatedTargets,
+    t,
+    workflowTypeSwitchConfig,
+    workflowTypeSwitchDisabledReason,
+  ])
+
+  const handleEvaluationWorkflowSwitchConfirmOpenChange = useCallback((nextOpen: boolean) => {
+    setShowEvaluationWorkflowSwitchConfirm(nextOpen)
+
+    if (!nextOpen)
+      setEvaluationWorkflowSwitchTargets([])
+  }, [])
+
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
     e.preventDefault()
     if (publishDisabled || published)
@@ -298,43 +434,51 @@ const AppPublisher = ({
               publishShortcut={PUBLISH_SHORTCUT}
               startNodeLimitExceeded={startNodeLimitExceeded}
               upgradeHighlightStyle={upgradeHighlightStyle}
+              workflowTypeSwitchConfig={workflowTypeSwitchConfig}
+              workflowTypeSwitchDisabled={publishDisabled || published || isConvertingWorkflowType || isFetchingEvaluationWorkflowAssociatedTargets || Boolean(workflowTypeSwitchDisabledReason)}
+              workflowTypeSwitchDisabledReason={workflowTypeSwitchDisabledReason}
+              onWorkflowTypeSwitch={handleWorkflowTypeSwitch}
             />
-            <PublisherAccessSection
-              enabled={systemFeatures.webapp_auth.enabled}
-              isAppAccessSet={isAppAccessSet}
-              isLoading={Boolean(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))}
-              accessMode={appDetail?.access_mode}
-              onClick={() => {
-                handleOpenChange(false)
-                setShowAppAccessControl(true)
-              }}
-            />
-            <PublisherActionsSection
-              appDetail={appDetail}
-              appURL={appURL}
-              disabledFunctionButton={disabledFunctionButton}
-              disabledFunctionTooltip={disabledFunctionTooltip}
-              handleEmbed={() => {
-                setEmbeddingModalOpen(true)
-                handleOpenChange(false)
-              }}
-              handleOpenInExplore={() => {
-                handleOpenChange(false)
-                handleOpenInExplore()
-              }}
-              handlePublish={handlePublish}
-              hasHumanInputNode={hasHumanInputNode}
-              hasTriggerNode={hasTriggerNode}
-              inputs={inputs}
-              missingStartNode={missingStartNode}
-              onRefreshData={onRefreshData}
-              outputs={outputs}
-              published={published}
-              publishedAt={publishedAt}
-              toolPublished={toolPublished}
-              workflowToolAvailable={workflowToolAvailable}
-              workflowToolMessage={workflowToolMessage}
-            />
+            {!isEvaluationWorkflowType && (
+              <>
+                <PublisherAccessSection
+                  enabled={systemFeatures.webapp_auth.enabled}
+                  isAppAccessSet={isAppAccessSet}
+                  isLoading={Boolean(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))}
+                  accessMode={appDetail?.access_mode}
+                  onClick={() => {
+                    handleOpenChange(false)
+                    setShowAppAccessControl(true)
+                  }}
+                />
+                <PublisherActionsSection
+                  appDetail={appDetail}
+                  appURL={appURL}
+                  disabledFunctionButton={disabledFunctionButton}
+                  disabledFunctionTooltip={disabledFunctionTooltip}
+                  handleEmbed={() => {
+                    setEmbeddingModalOpen(true)
+                    handleOpenChange(false)
+                  }}
+                  handleOpenInExplore={() => {
+                    handleOpenChange(false)
+                    handleOpenInExplore()
+                  }}
+                  handlePublish={handlePublish}
+                  hasHumanInputNode={hasHumanInputNode}
+                  hasTriggerNode={hasTriggerNode}
+                  inputs={inputs}
+                  missingStartNode={missingStartNode}
+                  onRefreshData={onRefreshData}
+                  outputs={outputs}
+                  published={published}
+                  publishedAt={publishedAt}
+                  toolPublished={toolPublished}
+                  workflowToolAvailable={workflowToolAvailable}
+                  workflowToolMessage={workflowToolMessage}
+                />
+              </>
+            )}
           </div>
         </PopoverContent>
         <EmbeddedModal
@@ -346,6 +490,13 @@ const AppPublisher = ({
         />
         {showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
       </Popover>
+      <EvaluationWorkflowSwitchConfirmDialog
+        open={showEvaluationWorkflowSwitchConfirm}
+        targets={evaluationWorkflowSwitchTargets}
+        loading={isConvertingWorkflowType}
+        onOpenChange={handleEvaluationWorkflowSwitchConfirmOpenChange}
+        onConfirm={() => void performWorkflowTypeSwitch()}
+      />
     </>
   )
 }
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index d4864a3763..54fbcee672 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -1,10 +1,10 @@
 import type { CSSProperties, ReactNode } from 'react'
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { AppPublisherProps } from './index'
-import type { PublishWorkflowParams } from '@/types/workflow'
+import type { I18nKeysWithPrefix } from '@/types/i18n'
+import type { PublishWorkflowParams, WorkflowTypeConversionTarget } from '@/types/workflow'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
 import Loading from '@/app/components/base/loading'
 import { Button } from '@/app/components/base/ui/button'
 import {
@@ -21,6 +21,8 @@ import PublishWithMultipleModel from './publish-with-multiple-model'
 import SuggestedAction from './suggested-action'
 import { ACCESS_MODE_MAP } from './utils'
 
+type WorkflowTypeSwitchLabelKey = I18nKeysWithPrefix<'workflow', 'common.'>
+
 type SummarySectionProps = Pick<AppPublisherProps, | 'debugWithMultipleModel'
   | 'draftUpdatedAt'
   | 'multipleModelConfigs'
@@ -31,9 +33,18 @@ type SummarySectionProps = Pick<AppPublisherProps, | 'debugWithMultipleModel'
     handlePublish: (params?: ModelAndParameter | PublishWorkflowParams) => Promise<void>
     handleRestore: () => Promise<void>
     isChatApp: boolean
+    onWorkflowTypeSwitch: () => Promise<void>
     published: boolean
     publishShortcut: string[]
     upgradeHighlightStyle: CSSProperties
+    workflowTypeSwitchConfig?: {
+      targetType: WorkflowTypeConversionTarget
+      publishLabelKey: WorkflowTypeSwitchLabelKey
+      switchLabelKey: WorkflowTypeSwitchLabelKey
+      tipKey: WorkflowTypeSwitchLabelKey
+    }
+    workflowTypeSwitchDisabled: boolean
+    workflowTypeSwitchDisabledReason?: string
   }
 
 type AccessSectionProps = {
@@ -90,6 +101,28 @@ export const AccessModeDisplay = ({ mode }: { mode?: keyof typeof ACCESS_MODE_MA
   )
 }
 
+const ActionTooltip = ({
+  disabled,
+  tooltip,
+  children,
+}: {
+  disabled: boolean
+  tooltip?: ReactNode
+  children: ReactNode
+}) => {
+  if (!disabled || !tooltip)
+    return <>{children}</>
+
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<div className="flex">{children}</div>} />
+      <TooltipContent>
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
 export const PublisherSummarySection = ({
   debugWithMultipleModel = false,
   draftUpdatedAt,
@@ -98,12 +131,16 @@ export const PublisherSummarySection = ({
   handleRestore,
   isChatApp,
   multipleModelConfigs = [],
+  onWorkflowTypeSwitch,
   publishDisabled = false,
   published,
   publishedAt,
   publishShortcut,
   startNodeLimitExceeded = false,
   upgradeHighlightStyle,
+  workflowTypeSwitchConfig,
+  workflowTypeSwitchDisabled,
+  workflowTypeSwitchDisabledReason,
 }: SummarySectionProps) => {
   const { t } = useTranslation()
 
@@ -164,6 +201,47 @@ export const PublisherSummarySection = ({
                       </div>
                     )}
               </Button>
+              {workflowTypeSwitchConfig && (
+                <ActionTooltip disabled={workflowTypeSwitchDisabled} tooltip={workflowTypeSwitchDisabledReason}>
+                  <button
+                    type="button"
+                    className="flex h-8 w-full items-center justify-center gap-0.5 rounded-lg px-3 py-2 system-sm-medium text-text-tertiary hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
+                    onClick={() => void onWorkflowTypeSwitch()}
+                    disabled={workflowTypeSwitchDisabled}
+                  >
+                    <span className="px-0.5">
+                      {t(
+                        publishedAt
+                          ? workflowTypeSwitchConfig.switchLabelKey
+                          : workflowTypeSwitchConfig.publishLabelKey,
+                        { ns: 'workflow' },
+                      )}
+                    </span>
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={(
+                          <span
+                            className="flex h-4 w-4 items-center justify-center text-text-quaternary hover:text-text-tertiary"
+                            aria-label={t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                            }}
+                          >
+                            <span className="i-ri-question-line h-3.5 w-3.5" />
+                          </span>
+                        )}
+                      />
+                      <TooltipContent
+                        placement="top"
+                        className="w-[180px]"
+                      >
+                        {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
+                      </TooltipContent>
+                    </Tooltip>
+                  </button>
+                </ActionTooltip>
+              )}
               {startNodeLimitExceeded && (
                 <div className="mt-3 flex flex-col items-stretch">
                   <p
@@ -227,28 +305,6 @@ export const PublisherAccessSection = ({
   )
 }
 
-const ActionTooltip = ({
-  disabled,
-  tooltip,
-  children,
-}: {
-  disabled: boolean
-  tooltip?: ReactNode
-  children: ReactNode
-}) => {
-  if (!disabled || !tooltip)
-    return <>{children}</>
-
-  return (
-    <Tooltip>
-      <TooltipTrigger render={<div className="flex">{children}</div>} />
-      <TooltipContent>
-        {tooltip}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
 export const PublisherActionsSection = ({
   appDetail,
   appURL,
@@ -305,7 +361,7 @@ export const PublisherActionsSection = ({
             <SuggestedAction
               onClick={handleEmbed}
               disabled={!publishedAt}
-              icon={<CodeBrowser className="h-4 w-4" />}
+              icon={<span className="i-custom-vender-line-development-code-browser h-4 w-4" />}
             >
               {t('common.embedIntoSite', { ns: 'workflow' })}
             </SuggestedAction>
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index 1de6e6ce0c..2783f66c3f 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -96,8 +96,8 @@ const AdvancedPromptInput: FC<Props> = ({
       },
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
-          if (promptVariables[i]!.key === newExternalDataTool.variable) {
-            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i]!.key }))
+          if (promptVariables[i].key === newExternalDataTool.variable) {
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 6b5c3acccb..0f6d2b94a6 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -94,8 +94,8 @@ const Prompt: FC<ISimplePromptInput> = ({
       },
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
-          if (promptVariables[i]!.key === newExternalDataTool.variable) {
-            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i]!.key }))
+          if (promptVariables[i].key === newExternalDataTool.variable) {
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index aca2817249..951680c035 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -165,8 +165,8 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
       },
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
-          if (promptVariables[i]!.key === newExternalDataTool.variable && i !== index) {
-            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i]!.key }))
+          if (promptVariables[i].key === newExternalDataTool.variable && i !== index) {
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
@@ -220,7 +220,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
   const handleRemoveVar = useCallback((index: number) => {
     const removeVar = promptVariables[index]
 
-    if (mode === AppModeEnum.COMPLETION && dataSets.length > 0 && removeVar!.is_context_var) {
+    if (mode === AppModeEnum.COMPLETION && dataSets.length > 0 && removeVar.is_context_var) {
       showDeleteContextVarModal()
       setRemoveIndex(index)
       return
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index d9200af773..ec4ceb5ed4 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -96,7 +96,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   const [model, setModel] = React.useState<Model>(localModel || {
     name: '',
     provider: '',
-    mode: mode as unknown as ModelModeType.chat,
+    mode: mode as unknown as ModelModeType,
     completion_params: {} as CompletionParams,
   })
   const {
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index eb1ee7e10c..b58520c379 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -78,7 +78,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   const [model, setModel] = React.useState<Model>(localModel || {
     name: '',
     provider: '',
-    mode: mode as unknown as ModelModeType.chat,
+    mode: mode as unknown as ModelModeType,
     completion_params: defaultCompletionParams,
   })
   const {
diff --git a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
index e5080f26e4..d4ce935a4d 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
@@ -1,11 +1,12 @@
+import type { CSSProperties } from 'react'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Slider } from '@/app/components/base/ui/slider'
 
-const weightedScoreSliderSlotClassNames = {
-  track: 'bg-util-colors-teal-teal-500',
-  indicator: 'bg-util-colors-blue-light-blue-light-500',
+const weightedScoreSliderStyle: CSSProperties & Record<'--slider-track' | '--slider-range', string> = {
+  '--slider-track': 'var(--color-util-colors-teal-teal-500)',
+  '--slider-range': 'var(--color-util-colors-blue-light-blue-light-500)',
 }
 
 const formatNumber = (value: number) => {
@@ -35,8 +36,8 @@ const WeightedScore = ({
 
   return (
     <div>
-      <div className="space-x-3 rounded-lg border border-components-panel-border px-3 pt-5 pb-2">
-        <div className="grow">
+      <div className="space-x-3 rounded-lg border border-components-panel-border px-3 pb-2 pt-5">
+        <div className="grow" style={weightedScoreSliderStyle}>
           <Slider
             className="grow"
             max={1.0}
@@ -46,18 +47,17 @@ const WeightedScore = ({
             onValueChange={v => !readonly && onChange({ value: [v, (10 - v * 10) / 10] })}
             disabled={readonly}
             aria-label={t('weightedScore.semantic', { ns: 'dataset' })}
-            slotClassNames={weightedScoreSliderSlotClassNames}
           />
         </div>
         <div className="mt-3 flex justify-between">
-          <div className="flex w-[90px] shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
+          <div className="flex w-[90px] shrink-0 items-center text-util-colors-blue-light-blue-light-500 system-xs-semibold-uppercase">
             <div className="mr-1 truncate uppercase" title={t('weightedScore.semantic', { ns: 'dataset' }) || ''}>
               {t('weightedScore.semantic', { ns: 'dataset' })}
             </div>
-            {formatNumber(value.value[0]!)}
+            {formatNumber(value.value[0])}
           </div>
-          <div className="flex w-[90px] shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
-            {formatNumber(value.value[1]!)}
+          <div className="flex w-[90px] shrink-0 items-center justify-end text-util-colors-teal-teal-500 system-xs-semibold-uppercase">
+            {formatNumber(value.value[1])}
             <div className="ml-1 truncate uppercase" title={t('weightedScore.keyword', { ns: 'dataset' }) || ''}>
               {t('weightedScore.keyword', { ns: 'dataset' })}
             </div>
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
index 2e535baeac..4b21616d46 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
@@ -84,7 +84,7 @@ const DebugItem: FC<DebugItemProps> = ({
       style={style}
     >
       <div className="flex h-10 shrink-0 items-center justify-between border-b-[0.5px] border-divider-regular px-3">
-        <div className="flex h-5 w-6 items-center justify-center font-medium text-text-tertiary italic">
+        <div className="flex h-5 w-6 items-center justify-center font-medium italic text-text-tertiary">
           #
           {index + 1}
         </div>
@@ -115,7 +115,7 @@ const DebugItem: FC<DebugItemProps> = ({
             {showRemove && (
               <>
                 {(showDuplicate || showDebugAsSingleModel) && <DropdownMenuSeparator />}
-                <DropdownMenuItem variant="destructive" className="system-md-regular" onClick={handleRemove}>
+                <DropdownMenuItem destructive className="system-md-regular" onClick={handleRemove}>
                   {t('operation.remove', { ns: 'common' })}
                 </DropdownMenuItem>
               </>
diff --git a/web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx b/web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx
new file mode 100644
index 0000000000..e51ffdaaac
--- /dev/null
+++ b/web/app/components/app/workflow-log/__tests__/evaluation-cell.spec.tsx
@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import EvaluationCell from '../evaluation-cell'
+
+describe('EvaluationCell', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render a placeholder when evaluation data is empty', () => {
+      render(<EvaluationCell evaluation={[]} />)
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'appLog.table.header.evaluation' })).not.toBeInTheDocument()
+    })
+
+    it('should render a trigger button when evaluation data is available', () => {
+      render(
+        <EvaluationCell
+          evaluation={[{
+            name: 'Faithfulness',
+            value: 0.98,
+          }]}
+        />,
+      )
+
+      expect(screen.getByRole('button', { name: 'appLog.table.header.evaluation' })).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should render evaluation details when clicking the trigger', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <EvaluationCell
+          evaluation={[{
+            name: 'Faithfulness',
+            value: 0.98,
+            nodeInfo: {
+              node_id: 'node-1',
+              title: 'Knowledge Retrieval',
+              type: 'knowledge-retrieval',
+            },
+          }]}
+        />,
+      )
+
+      await user.click(screen.getByRole('button', { name: 'appLog.table.header.evaluation' }))
+
+      expect(await screen.findByTestId('workflow-log-evaluation-popover')).toBeInTheDocument()
+      expect(screen.getByText('Faithfulness')).toBeInTheDocument()
+      expect(screen.getByText('0.98')).toBeInTheDocument()
+      expect(screen.getByText('Knowledge Retrieval')).toBeInTheDocument()
+    })
+
+    it('should render boolean values using readable text', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <EvaluationCell
+          evaluation={[{
+            name: 'Correctness',
+            value: true,
+          }]}
+        />,
+      )
+
+      await user.click(screen.getByRole('button', { name: 'appLog.table.header.evaluation' }))
+
+      expect(await screen.findByText('True')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/__tests__/index.spec.tsx b/web/app/components/app/workflow-log/__tests__/index.spec.tsx
index 1fe3db30db..4414843ed0 100644
--- a/web/app/components/app/workflow-log/__tests__/index.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/index.spec.tsx
@@ -215,6 +215,7 @@ const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): W
   },
   created_at: Date.now(),
   ...overrides,
+  evaluation: overrides.evaluation ?? [],
 })
 
 const createMockLogsResponse = (
diff --git a/web/app/components/app/workflow-log/__tests__/list.spec.tsx b/web/app/components/app/workflow-log/__tests__/list.spec.tsx
index 35e6369e67..1246096cf5 100644
--- a/web/app/components/app/workflow-log/__tests__/list.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/list.spec.tsx
@@ -146,6 +146,7 @@ const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): W
     email: 'test@example.com',
   },
   created_at: Date.now(),
+  evaluation: [],
   ...overrides,
 })
 
@@ -181,7 +182,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={undefined} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(container.querySelector('.spin-animation'))!.toBeInTheDocument()
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
     })
 
     it('should render loading state when appDetail is undefined', () => {
@@ -191,7 +192,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={undefined} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(container.querySelector('.spin-animation'))!.toBeInTheDocument()
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
     })
 
     it('should render table when data is available', () => {
@@ -201,7 +202,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render all table headers', () => {
@@ -211,11 +212,12 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('appLog.table.header.startTime'))!.toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.status'))!.toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.runtime'))!.toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.tokens'))!.toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.user'))!.toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.startTime')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.status')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.runtime')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.tokens')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.user')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.evaluation')).toBeInTheDocument()
     })
 
     it('should render trigger column for workflow apps', () => {
@@ -226,7 +228,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={workflowApp} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('appLog.table.header.triggered_from'))!.toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.triggered_from')).toBeInTheDocument()
     })
 
     it('should not render trigger column for non-workflow apps', () => {
@@ -256,7 +258,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('Success'))!.toBeInTheDocument()
+      expect(screen.getByText('Success')).toBeInTheDocument()
     })
 
     it('should render failure status correctly', () => {
@@ -270,7 +272,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('Failure'))!.toBeInTheDocument()
+      expect(screen.getByText('Failure')).toBeInTheDocument()
     })
 
     it('should render stopped status correctly', () => {
@@ -284,7 +286,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('Stop'))!.toBeInTheDocument()
+      expect(screen.getByText('Stop')).toBeInTheDocument()
     })
 
     it('should render running status correctly', () => {
@@ -298,7 +300,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('Running'))!.toBeInTheDocument()
+      expect(screen.getByText('Running')).toBeInTheDocument()
     })
 
     it('should render partial-succeeded status correctly', () => {
@@ -312,7 +314,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('Partial Success'))!.toBeInTheDocument()
+      expect(screen.getByText('Partial Success')).toBeInTheDocument()
     })
   })
 
@@ -332,7 +334,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('John Doe'))!.toBeInTheDocument()
+      expect(screen.getByText('John Doe')).toBeInTheDocument()
     })
 
     it('should display end user session id when created by end user', () => {
@@ -347,7 +349,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('session-abc-123'))!.toBeInTheDocument()
+      expect(screen.getByText('session-abc-123')).toBeInTheDocument()
     })
 
     it('should display N/A when no user info', () => {
@@ -362,7 +364,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('N/A'))!.toBeInTheDocument()
+      expect(screen.getByText('N/A')).toBeInTheDocument()
     })
   })
 
@@ -404,8 +406,9 @@ describe('WorkflowAppLogList', () => {
 
       // Arrow should rotate (indicated by class change)
       // The sort icon should have rotate-180 class for ascending
-      const sortIcon = startTimeHeader.closest('div')?.querySelector('svg')
-      expect(sortIcon)!.toBeInTheDocument()
+      const sortIcon = startTimeHeader.closest('div')?.querySelector('.i-heroicons-arrow-down')
+      expect(sortIcon).toBeInTheDocument()
+      expect(sortIcon).toHaveClass('rotate-180')
     })
 
     it('should render sort arrow icon', () => {
@@ -416,8 +419,8 @@ describe('WorkflowAppLogList', () => {
       )
 
       // Check for ArrowDownIcon presence
-      const sortArrow = container.querySelector('svg.ml-0\\.5')
-      expect(sortArrow)!.toBeInTheDocument()
+      const sortArrow = container.querySelector('.i-heroicons-arrow-down')
+      expect(sortArrow).toBeInTheDocument()
     })
   })
 
@@ -440,11 +443,11 @@ describe('WorkflowAppLogList', () => {
       )
 
       const dataRows = screen.getAllByRole('row')
-      await user.click(dataRows[1]!) // Click first data row
+      await user.click(dataRows[1]) // Click first data row
 
       const dialog = await screen.findByRole('dialog')
-      expect(dialog)!.toBeInTheDocument()
-      expect(screen.getByText('appLog.runDetail.workflowTitle'))!.toBeInTheDocument()
+      expect(dialog).toBeInTheDocument()
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
     })
 
     it('should close drawer and call onRefresh when closing', async () => {
@@ -459,7 +462,7 @@ describe('WorkflowAppLogList', () => {
 
       // Open drawer
       const dataRows = screen.getAllByRole('row')
-      await user.click(dataRows[1]!)
+      await user.click(dataRows[1])
       await screen.findByRole('dialog')
 
       // Close drawer using Escape key
@@ -482,46 +485,42 @@ describe('WorkflowAppLogList', () => {
       const dataRows = screen.getAllByRole('row')
       const dataRow = dataRows[1]
 
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
-      // Before click - no highlight
       // Before click - no highlight
       expect(dataRow).not.toHaveClass('bg-background-default-hover')
 
       // After click - has highlight (via currentLog state)
-      await user.click(dataRow!)
+      await user.click(dataRow)
 
       // The row should have the selected class
-      // The row should have the selected class
-      expect(dataRow)!.toHaveClass('bg-background-default-hover')
+      expect(dataRow).toHaveClass('bg-background-default-hover')
+    })
+
+    it('should open evaluation popover without opening drawer when clicking evaluation trigger', async () => {
+      const user = userEvent.setup()
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          evaluation: [{
+            name: 'Faithfulness',
+            value: 0.98,
+            nodeInfo: {
+              node_id: 'node-1',
+              title: 'Knowledge Retrieval',
+              type: 'knowledge-retrieval',
+            },
+          }],
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      await user.click(screen.getByRole('button', { name: 'appLog.table.header.evaluation' }))
+
+      expect(await screen.findByTestId('workflow-log-evaluation-popover')).toBeInTheDocument()
+      expect(screen.getByText('Faithfulness')).toBeInTheDocument()
+      expect(screen.getByText('Knowledge Retrieval')).toBeInTheDocument()
+      expect(screen.queryByRole('heading', { name: 'appLog.runDetail.workflowTitle' })).not.toBeInTheDocument()
     })
   })
 
@@ -547,7 +546,7 @@ describe('WorkflowAppLogList', () => {
 
       // Open drawer
       const dataRows = screen.getAllByRole('row')
-      await user.click(dataRows[1]!)
+      await user.click(dataRows[1])
       await screen.findByRole('dialog')
 
       // Replay button should be present for app-run triggers
@@ -575,12 +574,12 @@ describe('WorkflowAppLogList', () => {
 
       // Open drawer
       const dataRows = screen.getAllByRole('row')
-      await user.click(dataRows[1]!)
+      await user.click(dataRows[1])
       await screen.findByRole('dialog')
 
       // Replay button should be present for debugging triggers
       const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
-      expect(replayButton)!.toBeInTheDocument()
+      expect(replayButton).toBeInTheDocument()
     })
 
     it('should not show replay for webhook triggers', async () => {
@@ -601,40 +600,9 @@ describe('WorkflowAppLogList', () => {
 
       // Open drawer
       const dataRows = screen.getAllByRole('row')
-      await user.click(dataRows[1]!)
+      await user.click(dataRows[1])
       await screen.findByRole('dialog')
 
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
-      // Replay button should not be present for webhook triggers
       // Replay button should not be present for webhook triggers
       expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
     })
@@ -657,7 +625,7 @@ describe('WorkflowAppLogList', () => {
 
       // Unread indicator is a small blue dot
       const unreadDot = container.querySelector('.bg-util-colors-blue-blue-500')
-      expect(unreadDot)!.toBeInTheDocument()
+      expect(unreadDot).toBeInTheDocument()
     })
 
     it('should not show unread indicator for read logs', () => {
@@ -692,7 +660,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('1.235s'))!.toBeInTheDocument()
+      expect(screen.getByText('1.235s')).toBeInTheDocument()
     })
 
     it('should display 0 elapsed time with special styling', () => {
@@ -707,8 +675,8 @@ describe('WorkflowAppLogList', () => {
       )
 
       const zeroTime = screen.getByText('0.000s')
-      expect(zeroTime)!.toBeInTheDocument()
-      expect(zeroTime)!.toHaveClass('text-text-quaternary')
+      expect(zeroTime).toBeInTheDocument()
+      expect(zeroTime).toHaveClass('text-text-quaternary')
     })
   })
 
@@ -727,7 +695,7 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('12345'))!.toBeInTheDocument()
+      expect(screen.getByText('12345')).toBeInTheDocument()
     })
   })
 
@@ -743,7 +711,7 @@ describe('WorkflowAppLogList', () => {
       )
 
       const table = screen.getByRole('table')
-      expect(table)!.toBeInTheDocument()
+      expect(table).toBeInTheDocument()
 
       // Should only have header row
       const rows = screen.getAllByRole('row')
@@ -784,8 +752,8 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
       )
 
-      expect(screen.getByText('0.000s'))!.toBeInTheDocument()
-      expect(screen.getByText('0'))!.toBeInTheDocument()
+      expect(screen.getByText('0.000s')).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
     })
 
     it('should handle null workflow_run.triggered_from for non-workflow apps', () => {
@@ -802,37 +770,6 @@ describe('WorkflowAppLogList', () => {
         <WorkflowAppLogList logs={logs} appDetail={chatApp} onRefresh={defaultOnRefresh} />,
       )
 
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
-      // Should render without trigger column
       // Should render without trigger column
       expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
     })
diff --git a/web/app/components/app/workflow-log/evaluation-cell.tsx b/web/app/components/app/workflow-log/evaluation-cell.tsx
new file mode 100644
index 0000000000..3e49015454
--- /dev/null
+++ b/web/app/components/app/workflow-log/evaluation-cell.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import type { EvaluationLogItem } from '@/models/log'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
+
+type EvaluationCellProps = {
+  evaluation: EvaluationLogItem[]
+}
+
+const formatEvaluationValue = (value: EvaluationLogItem['value']) => {
+  if (typeof value === 'boolean')
+    return value ? 'True' : 'False'
+
+  return String(value)
+}
+
+const EvaluationCell = ({
+  evaluation,
+}: EvaluationCellProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  if (!evaluation.length) {
+    return (
+      <div className="system-sm-regular flex items-center justify-center px-2 py-3 text-text-quaternary">
+        -
+      </div>
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={(
+          <button
+            type="button"
+            aria-label={t('table.header.evaluation', { ns: 'appLog' })}
+            data-testid="workflow-log-evaluation-trigger"
+            className={cn(
+              'flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary transition-colors',
+              'hover:bg-state-base-hover hover:text-text-secondary',
+              open && 'bg-state-base-hover text-text-secondary',
+            )}
+          >
+            <span aria-hidden="true" className="i-ri-eye-line h-4 w-4" />
+          </button>
+        )}
+      />
+      <PopoverContent
+        placement="left-start"
+        sideOffset={12}
+        popupClassName="w-[320px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]"
+      >
+        <div data-testid="workflow-log-evaluation-popover" className="max-h-[320px] overflow-y-auto bg-components-panel-bg">
+          {evaluation.map((item, index) => {
+            const nodeVisual = item.nodeInfo ? getNodeVisual(item.nodeInfo) : null
+            const nodeToneClasses = nodeVisual ? getToneClasses(nodeVisual.tone) : null
+
+            return (
+              <div
+                key={`${item.name}-${index}`}
+                className={cn(
+                  'grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-4 py-3',
+                  index !== evaluation.length - 1 && 'border-b border-divider-subtle',
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="system-sm-medium truncate text-text-secondary">{item.name}</div>
+                  {item.nodeInfo && nodeVisual && nodeToneClasses && (
+                    <div className="mt-1 flex min-w-0 items-center gap-1.5">
+                      <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                        <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                      </div>
+                      <span className="system-xs-regular truncate text-text-tertiary">
+                        {item.nodeInfo.title}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <div className="system-sm-regular max-w-[120px] text-right wrap-break-word text-text-secondary">
+                  {formatEvaluationValue(item.value)}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default EvaluationCell
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index e514962d9b..0f9b3f9620 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunTriggeredFrom } from '@/models/log'
 import type { App } from '@/types/app'
-import { ArrowDownIcon } from '@heroicons/react/24/outline'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -14,6 +13,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
 import { AppModeEnum } from '@/types/app'
 import DetailPanel from './detail'
+import EvaluationCell from './evaluation-cell'
 import TriggerByDisplay from './trigger-by-display'
 
 type ILogs = {
@@ -118,22 +118,21 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
 
   return (
     <div className="overflow-x-auto">
-      <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
+      <table className={cn('mt-2 w-full min-w-[560px] border-collapse border-0')}>
         <thead className="system-xs-medium-uppercase text-text-tertiary">
           <tr>
             <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap"></td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
               <div className="flex cursor-pointer items-center hover:text-text-secondary" onClick={handleSort}>
                 {t('table.header.startTime', { ns: 'appLog' })}
-                <ArrowDownIcon
-                  className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}
-                />
+                <span className={cn('i-heroicons-arrow-down', 'ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')} />
               </div>
             </td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.status', { ns: 'appLog' })}</td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.runtime', { ns: 'appLog' })}</td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.tokens', { ns: 'appLog' })}</td>
-            <td className={cn('bg-background-section-burn py-1.5 pl-3 whitespace-nowrap', !isWorkflow ? 'rounded-r-lg' : '')}>{t('table.header.user', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.user', { ns: 'appLog' })}</td>
+            <td className={cn('bg-background-section-burn py-1.5 px-3 whitespace-nowrap text-center', !isWorkflow ? 'rounded-r-lg' : '')}>{t('table.header.evaluation', { ns: 'appLog' })}</td>
             {isWorkflow && <td className="rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.triggered_from', { ns: 'appLog' })}</td>}
           </tr>
         </thead>
@@ -172,6 +171,9 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
                     {endUser}
                   </div>
                 </td>
+                <td className="p-2 pr-2" onClick={event => event.stopPropagation()}>
+                  <EvaluationCell evaluation={log.evaluation} />
+                </td>
                 {isWorkflow && (
                   <td className="p-3 pr-2">
                     <TriggerByDisplay triggeredFrom={log.workflow_run.triggered_from as WorkflowRunTriggeredFrom} triggerMetadata={log.details?.trigger_metadata} />
diff --git a/web/app/components/apps/__tests__/empty.spec.tsx b/web/app/components/apps/__tests__/empty.spec.tsx
index 8dbbbc3ffb..2536d61006 100644
--- a/web/app/components/apps/__tests__/empty.spec.tsx
+++ b/web/app/components/apps/__tests__/empty.spec.tsx
@@ -2,6 +2,8 @@ import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import Empty from '../empty'
 
+const defaultMessage = 'workflow.tabs.noSnippetsFound'
+
 describe('Empty', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -9,32 +11,32 @@ describe('Empty', () => {
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<Empty />)
-      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+      render(<Empty message={defaultMessage} />)
+      expect(screen.getByText(defaultMessage)).toBeInTheDocument()
     })
 
     it('should render 36 placeholder cards', () => {
-      const { container } = render(<Empty />)
+      const { container } = render(<Empty message={defaultMessage} />)
       const placeholderCards = container.querySelectorAll('.bg-background-default-lighter')
       expect(placeholderCards).toHaveLength(36)
     })
 
-    it('should display the no apps found message', () => {
-      render(<Empty />)
+    it('should display the provided message', () => {
+      render(<Empty message="app.newApp.noAppsFound" />)
       expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
     })
   })
 
   describe('Styling', () => {
     it('should have correct container styling for overlay', () => {
-      const { container } = render(<Empty />)
+      const { container } = render(<Empty message={defaultMessage} />)
       const overlay = container.querySelector('.pointer-events-none')
       expect(overlay).toBeInTheDocument()
       expect(overlay).toHaveClass('absolute', 'inset-0', 'z-20')
     })
 
     it('should have correct styling for placeholder cards', () => {
-      const { container } = render(<Empty />)
+      const { container } = render(<Empty message={defaultMessage} />)
       const card = container.querySelector('.bg-background-default-lighter')
       expect(card).toHaveClass('inline-flex', 'h-[160px]', 'rounded-xl')
     })
@@ -42,10 +44,10 @@ describe('Empty', () => {
 
   describe('Edge Cases', () => {
     it('should handle multiple renders without issues', () => {
-      const { rerender } = render(<Empty />)
-      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+      const { rerender } = render(<Empty message={defaultMessage} />)
+      expect(screen.getByText(defaultMessage)).toBeInTheDocument()
 
-      rerender(<Empty />)
+      rerender(<Empty message="app.newApp.noAppsFound" />)
       expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index eddcb31d60..7a421dfa0f 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { renderWithNuqs } from '@/test/nuqs-testing'
@@ -15,10 +15,14 @@ vi.mock('@/next/navigation', () => ({
 
 const mockIsCurrentWorkspaceEditor = vi.fn(() => true)
 const mockIsCurrentWorkspaceDatasetOperator = vi.fn(() => false)
+const mockIsLoadingCurrentWorkspace = vi.fn(() => false)
+const mockCanAccessSnippetsAndEvaluation = vi.fn(() => true)
+
 vi.mock('@/context/app-context', () => ({
   useAppContext: () => ({
     isCurrentWorkspaceEditor: mockIsCurrentWorkspaceEditor(),
     isCurrentWorkspaceDatasetOperator: mockIsCurrentWorkspaceDatasetOperator(),
+    isLoadingCurrentWorkspace: mockIsLoadingCurrentWorkspace(),
   }),
 }))
 
@@ -30,12 +34,21 @@ vi.mock('@/context/global-public-context', () => ({
   }),
 }))
 
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: mockCanAccessSnippetsAndEvaluation(),
+    isReady: true,
+  }),
+}))
+
 const mockSetQuery = vi.fn()
 const mockQueryState = {
   tagIDs: [] as string[],
+  creatorIDs: [] as string[],
   keywords: '',
   isCreatedByMe: false,
 }
+
 vi.mock('../hooks/use-apps-query-state', () => ({
   default: () => ({
     query: mockQueryState,
@@ -45,6 +58,7 @@ vi.mock('../hooks/use-apps-query-state', () => ({
 
 let mockOnDSLFileDropped: ((file: File) => void) | null = null
 let mockDragging = false
+
 vi.mock('../hooks/use-dsl-drag-drop', () => ({
   useDSLDragDrop: ({ onDSLFileDropped }: { onDSLFileDropped: (file: File) => void }) => {
     mockOnDSLFileDropped = onDSLFileDropped
@@ -54,11 +68,15 @@ vi.mock('../hooks/use-dsl-drag-drop', () => ({
 
 const mockRefetch = vi.fn()
 const mockFetchNextPage = vi.fn()
+const mockFetchSnippetNextPage = vi.fn()
+const mockUseInfiniteAppList = vi.fn()
+const mockUseInfiniteSnippetList = vi.fn()
 
 const mockServiceState = {
   error: null as Error | null,
   hasNextPage: false,
   isLoading: false,
+  isFetching: false,
   isFetchingNextPage: false,
 }
 
@@ -97,21 +115,85 @@ const defaultAppData = {
 }
 
 vi.mock('@/service/use-apps', () => ({
-  useInfiniteAppList: () => ({
-    data: defaultAppData,
-    isLoading: mockServiceState.isLoading,
-    isFetchingNextPage: mockServiceState.isFetchingNextPage,
-    fetchNextPage: mockFetchNextPage,
-    hasNextPage: mockServiceState.hasNextPage,
-    error: mockServiceState.error,
-    refetch: mockRefetch,
-  }),
+  useInfiniteAppList: (params: unknown, options: unknown) => {
+    mockUseInfiniteAppList(params, options)
+    return {
+      data: defaultAppData,
+      isLoading: mockServiceState.isLoading,
+      isFetching: mockServiceState.isFetching,
+      isFetchingNextPage: mockServiceState.isFetchingNextPage,
+      fetchNextPage: mockFetchNextPage,
+      hasNextPage: mockServiceState.hasNextPage,
+      error: mockServiceState.error,
+      refetch: mockRefetch,
+    }
+  },
   useDeleteAppMutation: () => ({
     mutateAsync: vi.fn(),
     isPending: false,
   }),
 }))
 
+const mockSnippetServiceState = {
+  error: null as Error | null,
+  hasNextPage: false,
+  isLoading: false,
+  isFetching: false,
+  isFetchingNextPage: false,
+}
+
+const defaultSnippetData = {
+  pages: [{
+    data: [
+      {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+        type: 'node',
+        is_published: false,
+        use_count: 19,
+        icon_info: {
+          icon_type: 'emoji',
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+          icon_url: '',
+        },
+        created_at: 1704067200,
+        updated_at: '2024-01-02 10:00',
+        author: '',
+      },
+    ],
+    total: 1,
+  }],
+}
+
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: (params: unknown, options: unknown) => {
+    mockUseInfiniteSnippetList(params, options)
+    return {
+      data: defaultSnippetData,
+      isLoading: mockSnippetServiceState.isLoading,
+      isFetching: mockSnippetServiceState.isFetching,
+      isFetchingNextPage: mockSnippetServiceState.isFetchingNextPage,
+      fetchNextPage: mockFetchSnippetNextPage,
+      hasNextPage: mockSnippetServiceState.hasNextPage,
+      error: mockSnippetServiceState.error,
+    }
+  },
+  useCreateSnippetMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+  useImportSnippetDSLMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+  useConfirmSnippetImportMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+}))
+
 vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([{ id: 'tag-1', name: 'Test Tag', type: 'app' }]),
 }))
@@ -124,6 +206,17 @@ vi.mock('@/config', async (importOriginal) => {
   }
 })
 
+vi.mock('@/service/use-common', () => ({
+  useMembers: () => ({
+    data: {
+      accounts: [
+        { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+        { id: 'user-2', name: 'Alice', email: 'alice@example.com', avatar: '', avatar_url: '', role: 'admin', last_login_at: '', created_at: '', status: 'active' },
+      ],
+    },
+  }),
+}))
+
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
@@ -137,13 +230,21 @@ vi.mock('@/next/dynamic', () => ({
         return React.createElement('div', { 'data-testid': 'tag-management-modal' })
       }
     }
+
     if (fnString.includes('create-from-dsl-modal')) {
       return function MockCreateFromDSLModal({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) {
         if (!show)
           return null
-        return React.createElement('div', { 'data-testid': 'create-dsl-modal' }, React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'), React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-dsl-modal' }, 'Success'))
+
+        return React.createElement(
+          'div',
+          { 'data-testid': 'create-dsl-modal' },
+          React.createElement('button', { 'data-testid': 'close-dsl-modal', 'onClick': onClose }, 'Close'),
+          React.createElement('button', { 'data-testid': 'success-dsl-modal', 'onClick': onSuccess }, 'Success'),
+        )
       }
     }
+
     return () => null
   },
 }))
@@ -161,8 +262,8 @@ vi.mock('../new-app-card', () => ({
 }))
 
 vi.mock('../empty', () => ({
-  default: () => {
-    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, 'No apps found')
+  default: ({ message }: { message: string }) => {
+    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, message)
   },
 }))
 
@@ -192,151 +293,105 @@ beforeAll(() => {
   } as unknown as typeof IntersectionObserver
 })
 
-// Render helper wrapping with shared nuqs testing helper.
-const renderList = (searchParams = '') => {
-  return renderWithNuqs(<List />, { searchParams })
+const renderList = (props: React.ComponentProps<typeof List> = {}, searchParams = '') => {
+  return renderWithNuqs(<List {...props} />, { searchParams })
 }
 
 describe('List', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    defaultSnippetData.pages[0].data = [
+      {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+        type: 'node',
+        is_published: false,
+        use_count: 19,
+        icon_info: {
+          icon_type: 'emoji',
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+          icon_url: '',
+        },
+        created_at: 1704067200,
+        updated_at: '2024-01-02 10:00',
+        author: '',
+      },
+    ]
+    defaultSnippetData.pages[0].total = 1
     useTagStore.setState({
       tagList: [{ id: 'tag-1', name: 'Test Tag', type: 'app', binding_count: 0 }],
       showTagManagementModal: false,
     })
     mockIsCurrentWorkspaceEditor.mockReturnValue(true)
     mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
+    mockIsLoadingCurrentWorkspace.mockReturnValue(false)
+    mockCanAccessSnippetsAndEvaluation.mockReturnValue(true)
     mockDragging = false
     mockOnDSLFileDropped = null
     mockServiceState.error = null
     mockServiceState.hasNextPage = false
     mockServiceState.isLoading = false
+    mockServiceState.isFetching = false
     mockServiceState.isFetchingNextPage = false
     mockQueryState.tagIDs = []
+    mockQueryState.creatorIDs = []
     mockQueryState.keywords = ''
     mockQueryState.isCreatedByMe = false
+    mockSnippetServiceState.error = null
+    mockSnippetServiceState.hasNextPage = false
+    mockSnippetServiceState.isLoading = false
+    mockSnippetServiceState.isFetching = false
+    mockSnippetServiceState.isFetchingNextPage = false
+    mockUseInfiniteAppList.mockClear()
+    mockUseInfiniteSnippetList.mockClear()
     intersectionCallback = null
     localStorage.clear()
   })
 
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      renderList()
-      expect(screen.getByText('app.types.all'))!.toBeInTheDocument()
-    })
-
-    it('should render tab slider with all app types', () => {
+  describe('Apps Mode', () => {
+    it('should render the apps route switch, dropdown filters, and app cards', () => {
       renderList()
 
-      expect(screen.getByText('app.types.all'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.workflow'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.advanced'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.chatbot'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.agent'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.completion'))!.toBeInTheDocument()
+      expect(screen.getByRole('link', { name: 'app.studio.apps' })).toHaveAttribute('href', '/apps')
+      expect(screen.getByRole('link', { name: 'workflow.tabs.snippets' })).toHaveAttribute('href', '/snippets')
+      expect(screen.getByText('app.studio.filters.types')).toBeInTheDocument()
+      expect(screen.getByText('app.studio.filters.allCreators')).toBeInTheDocument()
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+      expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
     })
 
-    it('should render search input', () => {
-      renderList()
-      expect(screen.getByRole('textbox'))!.toBeInTheDocument()
-    })
-
-    it('should render tag filter', () => {
-      renderList()
-      expect(screen.getByText('common.tag.placeholder'))!.toBeInTheDocument()
-    })
-
-    it('should render created by me checkbox', () => {
-      renderList()
-      expect(screen.getByText('app.showMyCreatedAppsOnly'))!.toBeInTheDocument()
-    })
-
-    it('should render app cards when apps exist', () => {
-      renderList()
-
-      expect(screen.getByTestId('app-card-app-1'))!.toBeInTheDocument()
-      expect(screen.getByTestId('app-card-app-2'))!.toBeInTheDocument()
-    })
-
-    it('should render new app card for editors', () => {
-      renderList()
-      expect(screen.getByTestId('new-app-card'))!.toBeInTheDocument()
-    })
-
-    it('should render footer when branding is disabled', () => {
-      renderList()
-      expect(screen.getByTestId('footer'))!.toBeInTheDocument()
-    })
-
-    it('should render drop DSL hint for editors', () => {
-      renderList()
-      expect(screen.getByText('app.newApp.dropDSLToCreateApp'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('Tab Navigation', () => {
-    it('should update URL when workflow tab is clicked', async () => {
+    it('should update the category query when selecting an app type from the dropdown', async () => {
       const { onUrlUpdate } = renderList()
 
-      fireEvent.click(screen.getByText('app.types.workflow'))
+      fireEvent.click(screen.getByText('app.studio.filters.types'))
+      fireEvent.click(await screen.findByText('app.types.workflow'))
 
-      await vi.waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]![0]
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
       expect(lastCall.searchParams.get('category')).toBe(AppModeEnum.WORKFLOW)
     })
 
-    it('should update URL when all tab is clicked', async () => {
-      const { onUrlUpdate } = renderList('?category=workflow')
-
-      fireEvent.click(screen.getByText('app.types.all'))
-
-      await vi.waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]![0]
-      // nuqs removes the default value ('all') from URL params
-      expect(lastCall.searchParams.has('category')).toBe(false)
-    })
-  })
-
-  describe('Search Functionality', () => {
-    it('should render search input field', () => {
-      renderList()
-      expect(screen.getByRole('textbox'))!.toBeInTheDocument()
-    })
-
-    it('should handle search input change', () => {
+    it('should update creatorIDs when selecting a creator from the dropdown', async () => {
       renderList()
 
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'test search' } })
+      fireEvent.click(screen.getByText('app.studio.filters.allCreators'))
+      fireEvent.click(await screen.findByText('Current User'))
 
-      expect(mockSetQuery).toHaveBeenCalled()
+      expect(mockSetQuery).toHaveBeenCalledTimes(1)
     })
 
-    it('should handle search clear button click', () => {
-      mockQueryState.keywords = 'existing search'
+    it('should pass creator_id to the app list query when creatorIDs are selected', () => {
+      mockQueryState.creatorIDs = ['user-1', 'user-2']
 
       renderList()
 
-      const clearButton = document.querySelector('.group')
-      expect(clearButton)!.toBeInTheDocument()
-      if (clearButton)
-        fireEvent.click(clearButton)
-
-      expect(mockSetQuery).toHaveBeenCalled()
-    })
-  })
-
-  describe('Tag Filter', () => {
-    it('should render tag filter component', () => {
-      renderList()
-      expect(screen.getByText('common.tag.placeholder'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('Created By Me Filter', () => {
-    it('should render checkbox with correct label', () => {
-      renderList()
-      expect(screen.getByText('app.showMyCreatedAppsOnly'))!.toBeInTheDocument()
+      expect(mockUseInfiniteAppList).toHaveBeenCalledWith(expect.objectContaining({
+        creator_id: 'user-1,user-2',
+      }), expect.any(Object))
     })
 
     it('should handle checkbox change', () => {
@@ -391,39 +446,39 @@ describe('List', () => {
   describe('Edge Cases', () => {
     it('should handle multiple renders without issues', () => {
       const { unmount } = renderWithNuqs(<List />)
-      expect(screen.getByText('app.types.all'))!.toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
 
       unmount()
       renderList()
-      expect(screen.getByText('app.types.all'))!.toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
     })
 
     it('should render app cards correctly', () => {
       renderList()
 
-      expect(screen.getByText('Test App 1'))!.toBeInTheDocument()
-      expect(screen.getByText('Test App 2'))!.toBeInTheDocument()
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
     })
 
     it('should render with all filter options visible', () => {
       renderList()
 
-      expect(screen.getByRole('textbox'))!.toBeInTheDocument()
-      expect(screen.getByText('common.tag.placeholder'))!.toBeInTheDocument()
-      expect(screen.getByText('app.showMyCreatedAppsOnly'))!.toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByText('common.tag.placeholder')).toBeInTheDocument()
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
     })
   })
 
   describe('Dragging State', () => {
     it('should show drop hint when DSL feature is enabled for editors', () => {
       renderList()
-      expect(screen.getByText('app.newApp.dropDSLToCreateApp'))!.toBeInTheDocument()
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
     })
 
     it('should render dragging state overlay when dragging', () => {
       mockDragging = true
       const { container } = renderList()
-      expect(container)!.toBeInTheDocument()
+      expect(container).toBeInTheDocument()
     })
   })
 
@@ -431,12 +486,12 @@ describe('List', () => {
     it('should render all app type tabs', () => {
       renderList()
 
-      expect(screen.getByText('app.types.all'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.workflow'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.advanced'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.chatbot'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.agent'))!.toBeInTheDocument()
-      expect(screen.getByText('app.types.completion'))!.toBeInTheDocument()
+      expect(screen.getByText('app.types.all')).toBeInTheDocument()
+      expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
+      expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
+      expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
+      expect(screen.getByText('app.types.agent')).toBeInTheDocument()
+      expect(screen.getByText('app.types.completion')).toBeInTheDocument()
     })
 
     it('should update URL for each app type tab click', async () => {
@@ -454,7 +509,7 @@ describe('List', () => {
         onUrlUpdate.mockClear()
         fireEvent.click(screen.getByText(text))
         await vi.waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]![0]
+        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
         expect(lastCall.searchParams.get('category')).toBe(mode)
       }
     })
@@ -464,22 +519,22 @@ describe('List', () => {
     it('should display all app cards from data', () => {
       renderList()
 
-      expect(screen.getByTestId('app-card-app-1'))!.toBeInTheDocument()
-      expect(screen.getByTestId('app-card-app-2'))!.toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
     })
 
     it('should display app names correctly', () => {
       renderList()
 
-      expect(screen.getByText('Test App 1'))!.toBeInTheDocument()
-      expect(screen.getByText('Test App 2'))!.toBeInTheDocument()
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
     })
   })
 
   describe('Footer Visibility', () => {
     it('should render footer when branding is disabled', () => {
       renderList()
-      expect(screen.getByTestId('footer'))!.toBeInTheDocument()
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
     })
   })
 
@@ -493,99 +548,79 @@ describe('List', () => {
           mockOnDSLFileDropped(mockFile)
       })
 
-      expect(screen.getByTestId('create-dsl-modal'))!.toBeInTheDocument()
-    })
-
-    it('should close DSL modal when onClose is called', () => {
-      renderList()
-
-      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
-      act(() => {
-        if (mockOnDSLFileDropped)
-          mockOnDSLFileDropped(mockFile)
-      })
-
-      expect(screen.getByTestId('create-dsl-modal'))!.toBeInTheDocument()
-
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
       fireEvent.click(screen.getByTestId('close-dsl-modal'))
-
       expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
     })
 
-    it('should close DSL modal and refetch when onSuccess is called', () => {
+    it('should hide the snippets route switch when snippet access is unavailable', () => {
+      mockCanAccessSnippetsAndEvaluation.mockReturnValue(false)
+
       renderList()
 
-      const mockFile = new File(['test content'], 'test.yml', { type: 'application/yaml' })
+      expect(screen.getByRole('link', { name: 'app.studio.apps' })).toHaveAttribute('href', '/apps')
+      expect(screen.queryByRole('link', { name: 'workflow.tabs.snippets' })).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Snippets Mode', () => {
+    it('should render the snippets create card and snippet card from the real query hook', () => {
+      renderList({ pageType: 'snippets' })
+
+      expect(screen.getByText('snippet.create')).toBeInTheDocument()
+      expect(screen.getByText('Tone Rewriter')).toBeInTheDocument()
+      expect(screen.getByText('Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.')).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: /Tone Rewriter/i })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
+      expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('app-card-app-1')).not.toBeInTheDocument()
+    })
+
+    it('should request the next snippet page when the infinite-scroll anchor intersects', () => {
+      mockSnippetServiceState.hasNextPage = true
+      renderList({ pageType: 'snippets' })
+
       act(() => {
-        if (mockOnDSLFileDropped)
-          mockOnDSLFileDropped(mockFile)
+        intersectionCallback?.([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)
       })
 
-      expect(screen.getByTestId('create-dsl-modal'))!.toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('success-dsl-modal'))
-
-      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
-      expect(mockRefetch).toHaveBeenCalled()
-    })
-  })
-
-  describe('Infinite Scroll', () => {
-    it('should call fetchNextPage when intersection observer triggers', () => {
-      mockServiceState.hasNextPage = true
-      renderList()
-
-      if (intersectionCallback) {
-        act(() => {
-          intersectionCallback!(
-            [{ isIntersecting: true } as IntersectionObserverEntry],
-            {} as IntersectionObserver,
-          )
-        })
-      }
-
-      expect(mockFetchNextPage).toHaveBeenCalled()
+      expect(mockFetchSnippetNextPage).toHaveBeenCalled()
     })
 
-    it('should not call fetchNextPage when not intersecting', () => {
-      mockServiceState.hasNextPage = true
-      renderList()
+    it('should not render app-only controls in snippets mode', () => {
+      renderList({ pageType: 'snippets' })
 
-      if (intersectionCallback) {
-        act(() => {
-          intersectionCallback!(
-            [{ isIntersecting: false } as IntersectionObserverEntry],
-            {} as IntersectionObserver,
-          )
-        })
-      }
-
-      expect(mockFetchNextPage).not.toHaveBeenCalled()
+      expect(screen.queryByText('app.studio.filters.types')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.tag.placeholder')).not.toBeInTheDocument()
+      expect(screen.queryByText('app.newApp.dropDSLToCreateApp')).not.toBeInTheDocument()
     })
 
-    it('should not call fetchNextPage when loading', () => {
-      mockServiceState.hasNextPage = true
-      mockServiceState.isLoading = true
-      renderList()
+    it('should pass creator_id to the snippet list query when creatorIDs are selected', () => {
+      mockQueryState.creatorIDs = ['user-1', 'user-2']
 
-      if (intersectionCallback) {
-        act(() => {
-          intersectionCallback!(
-            [{ isIntersecting: true } as IntersectionObserverEntry],
-            {} as IntersectionObserver,
-          )
-        })
-      }
+      renderList({ pageType: 'snippets' })
 
-      expect(mockFetchNextPage).not.toHaveBeenCalled()
+      expect(mockUseInfiniteSnippetList).toHaveBeenCalledWith(expect.objectContaining({
+        creator_id: 'user-1,user-2',
+      }), expect.any(Object))
     })
-  })
 
-  describe('Error State', () => {
-    it('should handle error state in useEffect', () => {
-      mockServiceState.error = new Error('Test error')
-      const { container } = renderList()
-      expect(container)!.toBeInTheDocument()
+    it('should not fetch the next snippet page when no more data is available', () => {
+      renderList({ pageType: 'snippets' })
+
+      act(() => {
+        intersectionCallback?.([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)
+      })
+
+      expect(mockFetchSnippetNextPage).not.toHaveBeenCalled()
+    })
+
+    it('should reuse the shared empty state when no snippets are available', () => {
+      defaultSnippetData.pages[0].data = []
+      defaultSnippetData.pages[0].total = 0
+
+      renderList({ pageType: 'snippets' })
+
+      expect(screen.getByTestId('empty-state')).toHaveTextContent('workflow.tabs.noSnippetsFound')
     })
   })
 })
diff --git a/web/app/components/apps/app-type-filter-shared.ts b/web/app/components/apps/app-type-filter-shared.ts
new file mode 100644
index 0000000000..26b279ae2f
--- /dev/null
+++ b/web/app/components/apps/app-type-filter-shared.ts
@@ -0,0 +1,16 @@
+import { parseAsStringLiteral } from 'nuqs'
+import { AppModes } from '@/types/app'
+
+const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
+type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
+export type { AppListCategory }
+
+const appListCategorySet = new Set<string>(APP_LIST_CATEGORY_VALUES)
+
+export const isAppListCategory = (value: string): value is AppListCategory => {
+  return appListCategorySet.has(value)
+}
+
+export const parseAsAppListCategory = parseAsStringLiteral(APP_LIST_CATEGORY_VALUES)
+  .withDefault('all')
+  .withOptions({ history: 'push' })
diff --git a/web/app/components/apps/app-type-filter.tsx b/web/app/components/apps/app-type-filter.tsx
new file mode 100644
index 0000000000..a1401100ae
--- /dev/null
+++ b/web/app/components/apps/app-type-filter.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import type { AppListCategory } from './app-type-filter-shared'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioItemIndicator,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { AppModeEnum } from '@/types/app'
+import { isAppListCategory } from './app-type-filter-shared'
+
+const chipClassName = 'flex h-8 items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-[13px] leading-[18px] text-text-secondary hover:bg-components-input-bg-hover'
+
+type AppTypeFilterProps = {
+  activeTab: AppListCategory
+  onChange: (value: AppListCategory) => void
+}
+
+const AppTypeFilter = ({
+  activeTab,
+  onChange,
+}: AppTypeFilterProps) => {
+  const { t } = useTranslation()
+
+  const options = useMemo(() => ([
+    { value: 'all', text: t('types.all', { ns: 'app' }), iconClassName: 'i-ri-apps-2-line' },
+    { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), iconClassName: 'i-ri-exchange-2-line' },
+    { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), iconClassName: 'i-ri-message-3-line' },
+    { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), iconClassName: 'i-ri-message-3-line' },
+    { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), iconClassName: 'i-ri-robot-3-line' },
+    { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), iconClassName: 'i-ri-file-4-line' },
+  ]), [t])
+
+  const activeOption = options.find(option => option.value === activeTab)
+  const triggerLabel = activeTab === 'all' ? t('studio.filters.types', { ns: 'app' }) : activeOption?.text
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <button
+            type="button"
+            className={cn(chipClassName, activeTab !== 'all' && 'shadow-xs')}
+          />
+        )}
+      >
+        <span aria-hidden className={cn('h-4 w-4 shrink-0 text-text-tertiary', activeOption?.iconClassName ?? 'i-ri-apps-2-line')} />
+        <span>{triggerLabel}</span>
+        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent placement="bottom-start" popupClassName="w-[220px]">
+        <DropdownMenuRadioGroup value={activeTab} onValueChange={value => isAppListCategory(value) && onChange(value)}>
+          {options.map(option => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              <span aria-hidden className={cn('h-4 w-4 shrink-0 text-text-tertiary', option.iconClassName)} />
+              <span>{option.text}</span>
+              <DropdownMenuRadioItemIndicator />
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default AppTypeFilter
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
new file mode 100644
index 0000000000..9a00ccab6f
--- /dev/null
+++ b/web/app/components/apps/creators-filter.tsx
@@ -0,0 +1,219 @@
+'use client'
+
+import { cn } from '@langgenius/dify-ui/cn'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Checkbox from '@/app/components/base/checkbox'
+import Input from '@/app/components/base/input'
+import { Avatar } from '@/app/components/base/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { useAppContext } from '@/context/app-context'
+import { useMembers } from '@/service/use-common'
+
+type CreatorsFilterProps = {
+  value: string[]
+  onChange: (value: string[]) => void
+}
+
+type CreatorOption = {
+  id: string
+  name: string
+  avatarUrl: string | null
+  isYou: boolean
+}
+
+const baseChipClassName = 'flex h-8 items-center rounded-lg border-[0.5px] px-2 text-[13px] leading-4 transition-colors'
+
+const CreatorsFilter = ({
+  value,
+  onChange,
+}: CreatorsFilterProps) => {
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const { data: membersData } = useMembers()
+  const [keywords, setKeywords] = useState('')
+
+  const creatorOptions = useMemo<CreatorOption[]>(() => {
+    const currentUserId = userProfile?.id
+    const members = membersData?.accounts ?? []
+
+    return [...members]
+      .filter(member => member.status !== 'pending')
+      .sort((left, right) => {
+        if (left.id === currentUserId)
+          return -1
+        if (right.id === currentUserId)
+          return 1
+        return left.name.localeCompare(right.name)
+      })
+      .map(member => ({
+        id: member.id,
+        name: member.name,
+        avatarUrl: member.avatar_url,
+        isYou: member.id === currentUserId,
+      }))
+  }, [membersData?.accounts, userProfile?.id])
+
+  const filteredCreators = useMemo(() => {
+    const normalizedKeywords = keywords.trim().toLowerCase()
+    if (!normalizedKeywords)
+      return creatorOptions
+
+    return creatorOptions.filter((creator) => {
+      const keyword = normalizedKeywords
+      return creator.name.toLowerCase().includes(keyword)
+    })
+  }, [creatorOptions, keywords])
+
+  const selectedCreators = useMemo(() => {
+    const creatorMap = new Map(creatorOptions.map(creator => [creator.id, creator]))
+    return value
+      .map(id => creatorMap.get(id))
+      .filter((creator): creator is CreatorOption => Boolean(creator))
+  }, [creatorOptions, value])
+
+  const toggleCreator = useCallback((creatorId: string) => {
+    if (value.includes(creatorId)) {
+      onChange(value.filter(id => id !== creatorId))
+      return
+    }
+
+    onChange([...value, creatorId])
+  }, [onChange, value])
+
+  const resetCreators = useCallback(() => {
+    onChange([])
+    setKeywords('')
+  }, [onChange])
+
+  const selectedCount = value.length
+  const selectedAvatarCreators = selectedCreators.slice(0, 3)
+  const isSelected = selectedCount > 0
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <div
+            className={cn(
+              baseChipClassName,
+              isSelected
+                ? 'border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-state-base-hover'
+                : 'border-transparent bg-components-input-bg-normal text-text-tertiary hover:bg-components-input-bg-hover',
+            )}
+          />
+        )}
+      >
+        <span aria-hidden className="i-ri-user-shared-line h-4 w-4 shrink-0 text-text-tertiary" />
+        {!isSelected && (
+          <>
+            <span className="px-1 text-text-tertiary">{t('studio.filters.allCreators', { ns: 'app' })}</span>
+            <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
+          </>
+        )}
+        {isSelected && (
+          <>
+            <span className="px-1 text-text-tertiary">{t('studio.filters.creators', { ns: 'app' })}</span>
+            <span className="flex items-center pr-1">
+              {selectedAvatarCreators.map((creator, index) => (
+                <Avatar
+                  key={creator.id}
+                  avatar={creator.avatarUrl}
+                  name={creator.name}
+                  size="xs"
+                  className={cn(
+                    'border border-components-panel-bg',
+                    index > 0 && '-ml-1',
+                  )}
+                />
+              ))}
+            </span>
+            <span className="text-xs leading-4 font-medium text-text-tertiary">{`+${selectedCount}`}</span>
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label={t('studio.filters.reset', { ns: 'app' })}
+              className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-xs text-text-quaternary hover:text-text-tertiary"
+              onClick={(event) => {
+                event.stopPropagation()
+                resetCreators()
+              }}
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter' && event.key !== ' ')
+                  return
+
+                event.preventDefault()
+                event.stopPropagation()
+                resetCreators()
+              }}
+            >
+              <span aria-hidden className="i-ri-close-circle-fill h-3.5 w-3.5" />
+            </span>
+          </>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent placement="bottom-start" popupClassName="w-[280px] p-0">
+        <div className="flex items-center gap-1 p-2 pb-1">
+          <Input
+            showLeftIcon
+            showClearIcon
+            value={keywords}
+            onChange={e => setKeywords(e.target.value)}
+            onClear={() => setKeywords('')}
+            placeholder={t('studio.filters.searchCreators', { ns: 'app' })}
+          />
+          {isSelected && (
+            <button
+              type="button"
+              className="shrink-0 rounded-sm px-2 py-1 text-xs font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+              onClick={resetCreators}
+            >
+              {t('studio.filters.reset', { ns: 'app' })}
+            </button>
+          )}
+        </div>
+        <div className="max-h-[240px] overflow-y-auto px-1 pb-1">
+          {filteredCreators.map((creator) => {
+            const checked = value.includes(creator.id)
+
+            return (
+              <button
+                key={creator.id}
+                type="button"
+                className="flex w-full items-center gap-1 rounded-md px-2 py-1.5 hover:bg-state-base-hover"
+                onClick={() => toggleCreator(creator.id)}
+              >
+                <Checkbox
+                  id={creator.id}
+                  checked={checked}
+                  onCheck={() => undefined}
+                  className="shrink-0"
+                />
+                <div className="flex min-w-0 grow items-center gap-2 px-1">
+                  <Avatar
+                    avatar={creator.avatarUrl}
+                    name={creator.name}
+                    size="xs"
+                    className="border-[0.5px] border-divider-regular"
+                  />
+                  <div className="flex min-w-0 grow items-center justify-between gap-2">
+                    <span className="truncate text-sm text-text-secondary">{creator.name}</span>
+                    {creator.isYou && (
+                      <span className="shrink-0 text-sm text-text-quaternary">{t('studio.filters.you', { ns: 'app' })}</span>
+                    )}
+                  </div>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default CreatorsFilter
diff --git a/web/app/components/apps/empty.tsx b/web/app/components/apps/empty.tsx
index 0dee3c908a..0876101d79 100644
--- a/web/app/components/apps/empty.tsx
+++ b/web/app/components/apps/empty.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 
 const DefaultCards = React.memo(() => {
   const renderArray = Array.from({ length: 36 })
@@ -17,15 +16,17 @@ const DefaultCards = React.memo(() => {
   )
 })
 
-const Empty = () => {
-  const { t } = useTranslation()
+type Props = {
+  message: string
+}
 
+const Empty = ({ message }: Props) => {
   return (
     <>
       <DefaultCards />
       <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-linear-to-t from-background-body to-transparent">
         <span className="system-md-medium text-text-tertiary">
-          {t('newApp.noAppsFound', { ns: 'app' })}
+          {message}
         </span>
       </div>
     </>
diff --git a/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx b/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
index 4b0c63f580..d5734cce07 100644
--- a/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
+++ b/web/app/components/apps/hooks/__tests__/use-apps-query-state.spec.tsx
@@ -23,6 +23,7 @@ describe('useAppsQueryState', () => {
       const { result } = renderWithAdapter()
 
       expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.creatorIDs).toBeUndefined()
       expect(result.current.query.keywords).toBeUndefined()
       expect(result.current.query.isCreatedByMe).toBe(false)
     })
@@ -41,6 +42,12 @@ describe('useAppsQueryState', () => {
       expect(result.current.query.keywords).toBe('search term')
     })
 
+    it('should parse creatorIDs when URL includes creatorIDs', () => {
+      const { result } = renderWithAdapter('?creatorIDs=user-1;user-2')
+
+      expect(result.current.query.creatorIDs).toEqual(['user-1', 'user-2'])
+    })
+
     it('should parse isCreatedByMe when URL includes true value', () => {
       const { result } = renderWithAdapter('?isCreatedByMe=true')
 
@@ -49,10 +56,11 @@ describe('useAppsQueryState', () => {
 
     it('should parse all params when URL includes multiple filters', () => {
       const { result } = renderWithAdapter(
-        '?tagIDs=tag1;tag2&keywords=test&isCreatedByMe=true',
+        '?tagIDs=tag1;tag2&creatorIDs=user-1;user-2&keywords=test&isCreatedByMe=true',
       )
 
       expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+      expect(result.current.query.creatorIDs).toEqual(['user-1', 'user-2'])
       expect(result.current.query.keywords).toBe('test')
       expect(result.current.query.isCreatedByMe).toBe(true)
     })
@@ -79,6 +87,16 @@ describe('useAppsQueryState', () => {
       expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
     })
 
+    it('should update creatorIDs when setQuery receives creatorIDs', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ creatorIDs: ['user-1', 'user-2'] })
+      })
+
+      expect(result.current.query.creatorIDs).toEqual(['user-1', 'user-2'])
+    })
+
     it('should update isCreatedByMe when setQuery receives true', () => {
       const { result } = renderWithAdapter()
 
@@ -131,6 +149,18 @@ describe('useAppsQueryState', () => {
       expect(update.searchParams.get('tagIDs')).toBe('tag1;tag2')
     })
 
+    it('should sync creatorIDs to URL when creatorIDs change', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ creatorIDs: ['user-1', 'user-2'] })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('creatorIDs')).toBe('user-1;user-2')
+    })
+
     it('should sync isCreatedByMe to URL when enabled', async () => {
       const { result, onUrlUpdate } = renderWithAdapter()
 
@@ -167,6 +197,18 @@ describe('useAppsQueryState', () => {
       expect(update.searchParams.has('tagIDs')).toBe(false)
     })
 
+    it('should remove creatorIDs from URL when creatorIDs are empty', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter('?creatorIDs=user-1;user-2')
+
+      act(() => {
+        result.current.setQuery({ creatorIDs: [] })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('creatorIDs')).toBe(false)
+    })
+
     it('should remove isCreatedByMe from URL when disabled', async () => {
       const { result, onUrlUpdate } = renderWithAdapter('?isCreatedByMe=true')
 
@@ -212,12 +254,17 @@ describe('useAppsQueryState', () => {
         result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
       })
 
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, creatorIDs: ['user-1'] }))
+      })
+
       act(() => {
         result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
       })
 
       expect(result.current.query.keywords).toBe('first')
       expect(result.current.query.tagIDs).toEqual(['tag1'])
+      expect(result.current.query.creatorIDs).toEqual(['user-1'])
       expect(result.current.query.isCreatedByMe).toBe(true)
     })
   })
diff --git a/web/app/components/apps/hooks/use-apps-query-state.ts b/web/app/components/apps/hooks/use-apps-query-state.ts
index ecf7707e8a..50ae13a425 100644
--- a/web/app/components/apps/hooks/use-apps-query-state.ts
+++ b/web/app/components/apps/hooks/use-apps-query-state.ts
@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
 
 type AppsQuery = {
   tagIDs?: string[]
+  creatorIDs?: string[]
   keywords?: string
   isCreatedByMe?: boolean
 }
@@ -13,6 +14,7 @@ function useAppsQueryState() {
   const [urlQuery, setUrlQuery] = useQueryStates(
     {
       tagIDs: parseAsArrayOf(parseAsString, ';'),
+      creatorIDs: parseAsArrayOf(parseAsString, ';'),
       keywords: parseAsString,
       isCreatedByMe: parseAsBoolean,
     },
@@ -23,15 +25,18 @@ function useAppsQueryState() {
 
   const query = useMemo<AppsQuery>(() => ({
     tagIDs: urlQuery.tagIDs ?? undefined,
+    creatorIDs: urlQuery.creatorIDs ?? undefined,
     keywords: normalizeKeywords(urlQuery.keywords),
     isCreatedByMe: urlQuery.isCreatedByMe ?? false,
-  }), [urlQuery.isCreatedByMe, urlQuery.keywords, urlQuery.tagIDs])
+  }), [urlQuery.creatorIDs, urlQuery.isCreatedByMe, urlQuery.keywords, urlQuery.tagIDs])
 
   const setQuery = useCallback((next: AppsQuery | ((prev: AppsQuery) => AppsQuery)) => {
     const buildPatch = (patch: AppsQuery) => {
       const result: Partial<typeof urlQuery> = {}
       if ('tagIDs' in patch)
         result.tagIDs = patch.tagIDs && patch.tagIDs.length > 0 ? patch.tagIDs : null
+      if ('creatorIDs' in patch)
+        result.creatorIDs = patch.creatorIDs && patch.creatorIDs.length > 0 ? patch.creatorIDs : null
       if ('keywords' in patch)
         result.keywords = patch.keywords ? patch.keywords : null
       if ('isCreatedByMe' in patch)
@@ -42,6 +47,7 @@ function useAppsQueryState() {
     if (typeof next === 'function') {
       setUrlQuery(prev => buildPatch(next({
         tagIDs: prev.tagIDs ?? undefined,
+        creatorIDs: prev.creatorIDs ?? undefined,
         keywords: normalizeKeywords(prev.keywords),
         isCreatedByMe: prev.isCreatedByMe ?? false,
       })))
diff --git a/web/app/components/apps/index.tsx b/web/app/components/apps/index.tsx
index 9bf07e81e6..9f23e42bb9 100644
--- a/web/app/components/apps/index.tsx
+++ b/web/app/components/apps/index.tsx
@@ -13,14 +13,24 @@ import { fetchAppDetail } from '@/service/explore'
 import { trackCreateApp } from '@/utils/create-app-tracking'
 import List from './list'
 
+export type StudioPageType = 'apps' | 'snippets'
+
+type AppsProps = {
+  pageType?: StudioPageType
+}
+
 const DSLConfirmModal = dynamic(() => import('../app/create-from-dsl-modal/dsl-confirm-modal'), { ssr: false })
 const CreateAppModal = dynamic(() => import('../explore/create-app-modal'), { ssr: false })
 const TryApp = dynamic(() => import('../explore/try-app'), { ssr: false })
 
-const Apps = () => {
+const Apps = ({
+  pageType = 'apps',
+}: AppsProps) => {
   const { t } = useTranslation()
 
-  useDocumentTitle(t('menus.apps', { ns: 'common' }))
+  useDocumentTitle(pageType === 'apps'
+    ? t('menus.apps', { ns: 'common' })
+    : t('tabs.snippets', { ns: 'workflow' }))
   useEducationInit()
 
   const [currentTryAppParams, setCurrentTryAppParams] = useState<TryAppSelection | undefined>(undefined)
@@ -116,7 +126,7 @@ const Apps = () => {
     }}
     >
       <div className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
-        <List controlRefreshList={controlRefreshList} />
+        <List controlRefreshList={controlRefreshList} pageType={pageType} />
         {isShowTryAppPanel && (
           <TryApp
             appId={currentTryAppParams?.appId || ''}
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 02f12a0c78..7b7dcd1c8b 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -1,32 +1,40 @@
 'use client'
 
 import type { FC } from 'react'
+import type { StudioPageType } from '.'
+import type { App } from '@/types/app'
 import type { WorkflowOnlineUser } from '@/models/app'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
-import TabSliderNew from '@/app/components/base/tab-slider-new'
 import TagFilter from '@/app/components/base/tag-management/filter'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import dynamic from '@/next/dynamic'
 import { fetchWorkflowOnlineUsers } from '@/service/apps'
 import { useInfiniteAppList } from '@/service/use-apps'
+import { useInfiniteSnippetList } from '@/service/use-snippets'
+import SnippetCard from '../snippets/components/snippet-card'
+import SnippetCreateCard from '../snippets/components/snippet-create-card'
 import { AppModeEnum, AppModes } from '@/types/app'
 import AppCard from './app-card'
 import { AppCardSkeleton } from './app-card-skeleton'
+import AppTypeFilter from './app-type-filter'
+import { parseAsAppListCategory } from './app-type-filter-shared'
+import CreatorsFilter from './creators-filter'
 import Empty from './empty'
 import Footer from './footer'
 import useAppsQueryState from './hooks/use-apps-query-state'
 import { useDSLDragDrop } from './hooks/use-dsl-drag-drop'
 import NewAppCard from './new-app-card'
+import StudioRouteSwitch from './studio-route-switch'
 
 const TagManagementModal = dynamic(() => import('@/app/components/base/tag-management'), {
   ssr: false,
@@ -35,25 +43,18 @@ const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-fro
   ssr: false,
 })
 
-const APP_LIST_CATEGORY_VALUES = ['all', ...AppModes] as const
-type AppListCategory = typeof APP_LIST_CATEGORY_VALUES[number]
-const appListCategorySet = new Set<string>(APP_LIST_CATEGORY_VALUES)
-
-const isAppListCategory = (value: string): value is AppListCategory => {
-  return appListCategorySet.has(value)
-}
-
-const parseAsAppListCategory = parseAsStringLiteral(APP_LIST_CATEGORY_VALUES)
-  .withDefault('all')
-  .withOptions({ history: 'push' })
-
 type Props = {
   controlRefreshList?: number
+  pageType?: StudioPageType
 }
+
 const List: FC<Props> = ({
   controlRefreshList = 0,
+  pageType = 'apps',
 }) => {
   const { t } = useTranslation()
+  const isAppsPage = pageType === 'apps'
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const { systemFeatures } = useGlobalPublicStore()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, isLoadingCurrentWorkspace } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
@@ -62,20 +63,28 @@ const List: FC<Props> = ({
     parseAsAppListCategory,
   )
 
-  const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
-  const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe)
+  const { query: { tagIDs = [], creatorIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
-  const [searchKeywords, setSearchKeywords] = useState(keywords)
-  const newAppCardRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const [appKeywords, setAppKeywords] = useState(keywords)
+  const [snippetKeywordsInput, setSnippetKeywordsInput] = useState('')
+  const [snippetKeywords, setSnippetKeywords] = useState('')
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [droppedDSLFile, setDroppedDSLFile] = useState<File | undefined>()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const newAppCardRef = useRef<HTMLDivElement>(null)
+
   const [workflowOnlineUsersMap, setWorkflowOnlineUsersMap] = useState<Record<string, WorkflowOnlineUser[]>>({})
   const setKeywords = useCallback((keywords: string) => {
     setQuery(prev => ({ ...prev, keywords }))
   }, [setQuery])
-  const setTagIDs = useCallback((tagIDs: string[]) => {
-    setQuery(prev => ({ ...prev, tagIDs }))
+
+  const setTagIDs = useCallback((nextTagIDs: string[]) => {
+    setQuery(prev => ({ ...prev, tagIDs: nextTagIDs }))
+  }, [setQuery])
+
+  const setCreatorIDs = useCallback((nextCreatorIDs: string[]) => {
+    setQuery(prev => ({ ...prev, creatorIDs: nextCreatorIDs }))
   }, [setQuery])
 
   const handleDSLFileDropped = useCallback((file: File) => {
@@ -86,15 +95,16 @@ const List: FC<Props> = ({
   const { dragging } = useDSLDragDrop({
     onDSLFileDropped: handleDSLFileDropped,
     containerRef,
-    enabled: isCurrentWorkspaceEditor,
+    enabled: isAppsPage && isCurrentWorkspaceEditor,
   })
 
   const appListQueryParams = {
     page: 1,
     limit: 30,
-    name: searchKeywords,
+    name: appKeywords,
     tag_ids: tagIDs,
-    is_created_by_me: isCreatedByMe,
+    is_created_by_me: queryIsCreatedByMe,
+    ...(creatorIDs.length > 0 ? { creator_id: creatorIDs.join(',') } : {}),
     ...(activeTab !== 'all' ? { mode: activeTab } : {}),
   }
 
@@ -107,84 +117,125 @@ const List: FC<Props> = ({
     hasNextPage,
     error,
     refetch,
-  } = useInfiniteAppList(appListQueryParams, { enabled: !isCurrentWorkspaceDatasetOperator })
+  } = useInfiniteAppList(appListQueryParams, {
+    enabled: isAppsPage && !isCurrentWorkspaceDatasetOperator,
+  })
+
+  const {
+    data: snippetData,
+    isLoading: isSnippetListLoading,
+    isFetching: isSnippetListFetching,
+    isFetchingNextPage: isSnippetListFetchingNextPage,
+    fetchNextPage: fetchSnippetNextPage,
+    hasNextPage: hasSnippetNextPage,
+    error: snippetError,
+  } = useInfiniteSnippetList({
+    page: 1,
+    limit: 30,
+    keyword: snippetKeywords || undefined,
+    creator_id: creatorIDs.length > 0 ? creatorIDs.join(',') : undefined,
+  }, {
+    enabled: !isAppsPage,
+  })
 
   useEffect(() => {
-    if (controlRefreshList > 0) {
+    if (isAppsPage && controlRefreshList > 0)
       refetch()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlRefreshList])
-
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const options = [
-    { value: 'all', text: t('types.all', { ns: 'app' }), icon: <span className="mr-1 i-ri-apps-2-line h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), icon: <span className="mr-1 i-ri-exchange-2-line h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), icon: <span className="mr-1 i-ri-message-3-line h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), icon: <span className="mr-1 i-ri-message-3-line h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), icon: <span className="mr-1 i-ri-robot-3-line h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), icon: <span className="mr-1 i-ri-file-4-line h-[14px] w-[14px]" /> },
-  ]
+  }, [controlRefreshList, isAppsPage, refetch])
 
   useEffect(() => {
+    if (!isAppsPage)
+      return
+
     if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       refetch()
     }
-  }, [refetch])
+  }, [isAppsPage, refetch])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
       return
-    const hasMore = hasNextPage ?? true
+
+    const hasMore = isAppsPage ? (hasNextPage ?? true) : (hasSnippetNextPage ?? true)
+    const isPageLoading = isAppsPage ? isLoading : isSnippetListLoading
+    const isNextPageFetching = isAppsPage ? isFetchingNextPage : isSnippetListFetchingNextPage
+    const currentError = isAppsPage ? error : snippetError
     let observer: IntersectionObserver | undefined
 
-    if (error) {
-      if (observer)
-        observer.disconnect()
+    if (currentError) {
+      observer?.disconnect()
       return
     }
 
     if (anchorRef.current && containerRef.current) {
-      // Calculate dynamic rootMargin: clamps to 100-200px range, using 20% of container height as the base value for better responsiveness
       const containerHeight = containerRef.current.clientHeight
-      const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200)) // Clamps to 100-200px range, using 20% of container height as the base value
+      const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200))
 
       observer = new IntersectionObserver((entries) => {
-        if (entries[0]!.isIntersecting && !isLoading && !isFetchingNextPage && !error && hasMore)
-          fetchNextPage()
+        if (entries[0].isIntersecting && !isPageLoading && !isNextPageFetching && !currentError && hasMore) {
+          if (isAppsPage)
+            fetchNextPage()
+          else
+            fetchSnippetNextPage()
+        }
       }, {
         root: containerRef.current,
         rootMargin: `${dynamicMargin}px`,
-        threshold: 0.1, // Trigger when 10% of the anchor element is visible
+        threshold: 0.1,
       })
       observer.observe(anchorRef.current)
     }
+
     return () => observer?.disconnect()
-  }, [isLoading, isFetchingNextPage, fetchNextPage, error, hasNextPage, isCurrentWorkspaceDatasetOperator])
+  }, [error, fetchNextPage, fetchSnippetNextPage, hasNextPage, hasSnippetNextPage, isAppsPage, isCurrentWorkspaceDatasetOperator, isFetchingNextPage, isLoading, isSnippetListFetchingNextPage, isSnippetListLoading, snippetError])
 
-  const { run: handleSearch } = useDebounceFn(() => {
-    setSearchKeywords(keywords)
+  const { run: handleAppSearch } = useDebounceFn((value: string) => {
+    setAppKeywords(value)
   }, { wait: 500 })
-  const handleKeywordsChange = (value: string) => {
-    setKeywords(value)
-    handleSearch()
-  }
 
-  const { run: handleTagsUpdate } = useDebounceFn(() => {
-    setTagIDs(tagFilterValue)
+  const { run: handleSnippetSearch } = useDebounceFn((value: string) => {
+    setSnippetKeywords(value)
   }, { wait: 500 })
-  const handleTagsChange = (value: string[]) => {
+
+  const handleKeywordsChange = useCallback((value: string) => {
+    if (isAppsPage) {
+      setKeywords(value)
+      handleAppSearch(value)
+      return
+    }
+
+    setSnippetKeywordsInput(value)
+    handleSnippetSearch(value)
+  }, [handleAppSearch, handleSnippetSearch, isAppsPage, setKeywords])
+
+  const { run: handleTagsUpdate } = useDebounceFn((value: string[]) => {
+    setTagIDs(value)
+  }, { wait: 500 })
+
+  const handleTagsChange = useCallback((value: string[]) => {
     setTagFilterValue(value)
-    handleTagsUpdate()
-  }
+    handleTagsUpdate(value)
+  }, [handleTagsUpdate])
 
-  const handleCreatedByMeChange = useCallback(() => {
-    const newValue = !isCreatedByMe
-    setIsCreatedByMe(newValue)
-    setQuery(prev => ({ ...prev, isCreatedByMe: newValue }))
-  }, [isCreatedByMe, setQuery])
+  const appItems = useMemo<App[]>(() => {
+    return (data?.pages ?? []).flatMap(({ data: apps }) => apps)
+  }, [data?.pages])
 
+  const snippetItems = useMemo(() => {
+    return (snippetData?.pages ?? []).flatMap(({ data }) => data)
+  }, [snippetData?.pages])
+
+  const showSkeleton = isAppsPage
+    ? (isLoading || (isFetching && data?.pages?.length === 0))
+    : (isSnippetListLoading || (isSnippetListFetching && snippetItems.length === 0))
+  const hasAnyApp = (data?.pages?.[0]?.total ?? 0) > 0
+  const hasAnySnippet = snippetItems.length > 0
+  const currentKeywords = isAppsPage ? keywords : snippetKeywordsInput
+  const showEmptyState = !showSkeleton && (isAppsPage ? !hasAnyApp : !hasAnySnippet)
+  const emptyStateMessage = isAppsPage
+    ? t('newApp.noAppsFound', { ns: 'app' })
+    : t('tabs.noSnippetsFound', { ns: 'workflow' })
   const pages = data?.pages ?? []
   const appIds = useMemo(() => {
     const ids = new Set<string>()
@@ -233,85 +284,99 @@ const List: FC<Props> = ({
     return () => window.clearInterval(timer)
   }, [refetch, refreshWorkflowOnlineUsers, systemFeatures.enable_collaboration_mode])
 
-  const hasAnyApp = (pages[0]?.total ?? 0) > 0
-  // Show skeleton during initial load or when refetching with no previous data
-  const showSkeleton = isLoading || (isFetching && pages.length === 0)
-
   return (
     <>
       <div ref={containerRef} className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
         {dragging && (
-          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2">
-          </div>
+          <div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2" />
         )}
 
         <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pt-7 pb-5">
-          <TabSliderNew
-            value={activeTab}
-            onChange={(nextValue) => {
-              if (isAppListCategory(nextValue))
-                setActiveTab(nextValue)
-            }}
-            options={options}
-          />
+          <div className="flex flex-wrap items-center gap-2">
+            <StudioRouteSwitch
+              pageType={pageType}
+              appsLabel={t('studio.apps', { ns: 'app' })}
+              snippetsLabel={t('tabs.snippets', { ns: 'workflow' })}
+              showSnippets={canAccessSnippetsAndEvaluation}
+            />
+            {isAppsPage && (
+              <AppTypeFilter
+                activeTab={activeTab}
+                onChange={(value) => {
+                  void setActiveTab(value)
+                }}
+              />
+            )}
+            <CreatorsFilter value={creatorIDs} onChange={setCreatorIDs} />
+            {isAppsPage && (
+              <TagFilter type="app" value={tagFilterValue} onChange={handleTagsChange} />
+            )}
+          </div>
+
           <div className="flex items-center gap-2">
-            <label className="mr-2 flex h-7 items-center space-x-2">
-              <Checkbox checked={isCreatedByMe} onCheck={handleCreatedByMeChange} />
-              <div className="text-sm font-normal text-text-secondary">
-                {t('showMyCreatedAppsOnly', { ns: 'app' })}
-              </div>
-            </label>
-            <TagFilter type="app" value={tagFilterValue} onChange={handleTagsChange} />
             <Input
               showLeftIcon
               showClearIcon
               wrapperClassName="w-[200px]"
-              value={keywords}
+              placeholder={isAppsPage ? undefined : t('tabs.searchSnippets', { ns: 'workflow' })}
+              value={currentKeywords}
               onChange={e => handleKeywordsChange(e.target.value)}
               onClear={() => handleKeywordsChange('')}
             />
           </div>
         </div>
+
         <div className={cn(
           'relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
-          !hasAnyApp && 'overflow-hidden',
+          showEmptyState && 'overflow-hidden',
         )}
         >
           {(isCurrentWorkspaceEditor || isLoadingCurrentWorkspace) && (
-            <NewAppCard
-              ref={newAppCardRef}
-              isLoading={isLoadingCurrentWorkspace}
-              onSuccess={refetch}
-              selectedAppType={activeTab}
-              className={cn(!hasAnyApp && 'z-10')}
-            />
+            isAppsPage
+              ? (
+                  <NewAppCard
+                    ref={newAppCardRef}
+                    isLoading={isLoadingCurrentWorkspace}
+                    onSuccess={refetch}
+                    selectedAppType={activeTab}
+                    className={cn(!hasAnyApp && 'z-10')}
+                  />
+                )
+              : canAccessSnippetsAndEvaluation && <SnippetCreateCard />
           )}
-          {(() => {
-            if (showSkeleton)
-              return <AppCardSkeleton count={6} />
 
-            if (hasAnyApp) {
-              return pages.flatMap(({ data: apps }) => apps).map(app => (
-                <AppCard
-                  key={app.id}
-                  app={app}
-                  onlineUsers={workflowOnlineUsersMap[app.id] ?? []}
-                  onRefresh={refetch}
-                />
-              ))
-            }
+          {showSkeleton && <AppCardSkeleton count={6} />}
 
-            // No apps - show empty state
-            return <Empty />
-          })()}
-          {isFetchingNextPage && (
+          {!showSkeleton && isAppsPage && hasAnyApp && pages.flatMap(({ data: apps }) => apps).map(app => (
+            <AppCard
+              key={app.id}
+              app={app}
+              onlineUsers={workflowOnlineUsersMap[app.id] ?? []}
+              onRefresh={refetch}
+            />
+          ))}
+
+          {!showSkeleton && !isAppsPage && hasAnySnippet && snippetItems.map(snippet => (
+            <SnippetCard key={snippet.id} snippet={snippet} />
+          ))}
+
+          {showEmptyState && <Empty message={emptyStateMessage} />}
+
+          {isAppsPage && isFetchingNextPage && (
+            <AppCardSkeleton count={3} />
+          )}
+
+          {!isAppsPage && isSnippetListFetchingNextPage && (
             <AppCardSkeleton count={3} />
           )}
         </div>
 
-        {isCurrentWorkspaceEditor && (
+        {isAppsPage && isCurrentWorkspaceEditor && (
           <div
-            className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}
+            className={cn(
+              'flex items-center justify-center gap-2 py-4',
+              dragging ? 'text-text-accent' : 'text-text-quaternary',
+            )}
             role="region"
             aria-label={t('newApp.dropDSLToCreateApp', { ns: 'app' })}
           >
@@ -319,17 +384,18 @@ const List: FC<Props> = ({
             <span className="system-xs-regular">{t('newApp.dropDSLToCreateApp', { ns: 'app' })}</span>
           </div>
         )}
+
         {!systemFeatures.branding.enabled && (
           <Footer />
         )}
         <CheckModal />
         <div ref={anchorRef} className="h-0"> </div>
-        {showTagManagementModal && (
+        {isAppsPage && showTagManagementModal && (
           <TagManagementModal type="app" show={showTagManagementModal} />
         )}
       </div>
 
-      {showCreateFromDSLModal && (
+      {isAppsPage && showCreateFromDSLModal && (
         <CreateFromDSLModal
           show={showCreateFromDSLModal}
           onClose={() => {
diff --git a/web/app/components/apps/studio-route-switch.tsx b/web/app/components/apps/studio-route-switch.tsx
new file mode 100644
index 0000000000..18235f9b74
--- /dev/null
+++ b/web/app/components/apps/studio-route-switch.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import type { StudioPageType } from '.'
+import { cn } from '@langgenius/dify-ui/cn'
+import Link from '@/next/link'
+
+type Props = {
+  pageType: StudioPageType
+  appsLabel: string
+  snippetsLabel: string
+  showSnippets?: boolean
+}
+
+const StudioRouteSwitch = ({
+  pageType,
+  appsLabel,
+  snippetsLabel,
+  showSnippets = true,
+}: Props) => {
+  return (
+    <div className="flex items-center rounded-lg border-[0.5px] border-divider-subtle bg-[rgba(200,206,218,0.2)] p-px">
+      <Link
+        href="/apps"
+        className={cn(
+          'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+          pageType === 'apps' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+          pageType !== 'apps' && 'font-medium',
+        )}
+      >
+        {appsLabel}
+      </Link>
+      {showSnippets && (
+        <Link
+          href="/snippets"
+          className={cn(
+            'flex h-8 items-center rounded-lg px-3 text-[14px] leading-5 text-text-secondary',
+            pageType === 'snippets' && 'bg-components-card-bg font-semibold text-text-primary shadow-xs',
+            pageType !== 'snippets' && 'font-medium',
+          )}
+        >
+          {snippetsLabel}
+        </Link>
+      )}
+    </div>
+  )
+}
+
+export default StudioRouteSwitch
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index c3b2056698..9174b13356 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -95,7 +95,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       for (let i = 0; i < samples; i++) {
         let sum = 0
         for (let j = 0; j < blockSize; j++)
-          sum += Math.abs(channelData[i * blockSize + j]!)
+          sum += Math.abs(channelData[i * blockSize + j])
         // Apply nonlinear scaling to enhance small amplitudes
         waveformData.push((sum / blockSize) * 5)
       }
@@ -145,7 +145,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
     e.preventDefault()
     const getClientX = (event: React.MouseEvent | React.TouchEvent): number => {
       if ('touches' in event)
-        return event.touches[0]!.clientX
+        return event.touches[0].clientX
       return event.clientX
     }
     const updateProgress = (clientX: number) => {
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
index 83a8666e79..bd5f01bcda 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
@@ -151,8 +151,8 @@ describe('ChatWrapper', () => {
 
     render(<ChatWrapper />)
 
-    expect(await screen.findByText('Welcome'))!.toBeInTheDocument()
-    expect(await screen.findByText('Q1'))!.toBeInTheDocument()
+    expect(await screen.findByText('Welcome')).toBeInTheDocument()
+    expect(await screen.findByText('Q1')).toBeInTheDocument()
 
     fireEvent.click(screen.getByText('Q1'))
     expect(handleSend).toHaveBeenCalled()
@@ -170,7 +170,7 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(screen.getByText('Default opening statement'))!.toBeInTheDocument()
+    expect(screen.getByText('Default opening statement')).toBeInTheDocument()
   })
 
   it('should render welcome screen without suggested questions', async () => {
@@ -186,7 +186,7 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(await screen.findByText('Welcome message'))!.toBeInTheDocument()
+    expect(await screen.findByText('Welcome message')).toBeInTheDocument()
   })
 
   it('should show responding state', async () => {
@@ -197,7 +197,7 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(await screen.findByText('Bot thinking...'))!.toBeInTheDocument()
+    expect(await screen.findByText('Bot thinking...')).toBeInTheDocument()
   })
 
   it('should handle manual message input and stop responding', async () => {
@@ -320,9 +320,9 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const disabledContainer = chatInput!.closest('.pointer-events-none')
-    expect(disabledContainer)!.toBeInTheDocument()
-    expect(disabledContainer)!.toHaveClass('opacity-50')
+    const disabledContainer = chatInput.closest('.pointer-events-none')
+    expect(disabledContainer).toBeInTheDocument()
+    expect(disabledContainer).toHaveClass('opacity-50')
   })
 
   it('should not disable input when required field has value', () => {
@@ -337,7 +337,7 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
+    const container = chatInput.closest('.pointer-events-none')
     expect(container).not.toBeInTheDocument()
   })
 
@@ -361,8 +361,8 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
-    expect(container)!.toBeInTheDocument()
+    const container = chatInput.closest('.pointer-events-none')
+    expect(container).toBeInTheDocument()
   })
 
   it('should not disable input when file is fully uploaded', () => {
@@ -411,8 +411,8 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
-    expect(container)!.toBeInTheDocument()
+    const container = chatInput.closest('.pointer-events-none')
+    expect(container).toBeInTheDocument()
   })
 
   it('should not disable when all files are uploaded', () => {
@@ -457,7 +457,7 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textarea = screen.getByRole('textbox')
     const container = textarea.closest('.pointer-events-none')
-    expect(container)!.toBeInTheDocument()
+    expect(container).toBeInTheDocument()
   })
 
   it('should not disable input when allInputsHidden is true', () => {
@@ -523,7 +523,7 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
 
     expect(handleSwitchSibling).toHaveBeenCalledWith('resume-node', expect.any(Object))
-    const resumeOptions = handleSwitchSibling.mock.calls[0]![1]
+    const resumeOptions = handleSwitchSibling.mock.calls[0][1]
     resumeOptions.onGetSuggestedQuestions('response-from-resume')
     expect(fetchSuggestedQuestions).toHaveBeenCalledWith('response-from-resume', 'webApp', 'test-app-id')
   })
@@ -619,7 +619,7 @@ describe('ChatWrapper', () => {
 
     render(<ChatWrapper />)
 
-    const onStopCallback = vi.mocked(useChat).mock.calls[0]![3] as (taskId: string) => void
+    const onStopCallback = vi.mocked(useChat).mock.calls[0][3] as (taskId: string) => void
     onStopCallback('taskId-123')
     expect(stopChatMessageResponding).toHaveBeenCalledWith('', 'taskId-123', 'webApp', 'test-app-id')
   })
@@ -645,7 +645,7 @@ describe('ChatWrapper', () => {
     expect(handleSend).toHaveBeenCalled()
 
     // Get the options passed to handleSend
-    const options = handleSend.mock.calls[0]![2]
+    const options = handleSend.mock.calls[0][2]
     expect(options.isPublicAPI).toBe(true)
 
     // Call onGetSuggestedQuestions
@@ -679,7 +679,7 @@ describe('ChatWrapper', () => {
       fireEvent.click(nextButton)
       expect(handleSwitchSibling).toHaveBeenCalled()
 
-      const options = handleSwitchSibling.mock.calls[0]![1]
+      const options = handleSwitchSibling.mock.calls[0][1]
       options.onGetSuggestedQuestions('response-id')
       expect(fetchSuggestedQuestions).toHaveBeenCalledWith('response-id', 'webApp', 'test-app-id')
     }
@@ -708,8 +708,8 @@ describe('ChatWrapper', () => {
       expect(handleSend).toHaveBeenCalled()
       const args = handleSend.mock.calls[0]
       // args[1] is data
-      expect(args![1].query).toBe('Q1')
-      expect(args![1].parent_message_id).toBeNull()
+      expect(args[1].query).toBe('Q1')
+      expect(args[1].parent_message_id).toBeNull()
     }
   })
 
@@ -737,7 +737,7 @@ describe('ChatWrapper', () => {
       fireEvent.click(regenerateBtn)
       expect(handleSend).toHaveBeenCalled()
       const args = handleSend.mock.calls[0]
-      expect(args![1].parent_message_id).toBe('a0')
+      expect(args[1].parent_message_id).toBe('a0')
     }
   })
 
@@ -774,10 +774,10 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(await screen.findByText('Node 1'))!.toBeInTheDocument()
+    expect(await screen.findByText('Node 1')).toBeInTheDocument()
 
     const input = screen.getAllByRole('textbox').find(el => el.closest('.chat-answer-container')) || screen.getAllByRole('textbox')[0]
-    fireEvent.change(input!, { target: { value: 'test' } })
+    fireEvent.change(input, { target: { value: 'test' } })
 
     const runButton = screen.getByText('Run')
     fireEvent.click(runButton)
@@ -817,10 +817,10 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(await screen.findByText('Node Web 1'))!.toBeInTheDocument()
+    expect(await screen.findByText('Node Web 1')).toBeInTheDocument()
 
     const input = screen.getAllByRole('textbox').find(el => el.closest('.chat-answer-container')) || screen.getAllByRole('textbox')[0]
-    fireEvent.change(input!, { target: { value: 'web-test' } })
+    fireEvent.change(input, { target: { value: 'web-test' } })
     fireEvent.click(screen.getByText('Run'))
 
     await waitFor(() => {
@@ -841,7 +841,7 @@ describe('ChatWrapper', () => {
 
     render(<ChatWrapper />)
     expect(document.querySelector('.chat-answer-container')).not.toBeInTheDocument()
-    expect(screen.getByText('Welcome'))!.toBeInTheDocument()
+    expect(screen.getByText('Welcome')).toBeInTheDocument()
   })
 
   it('should show all messages including opening statement when there are multiple messages', () => {
@@ -861,7 +861,7 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const welcomeElements = screen.getAllByText('Welcome')
     expect(welcomeElements.length).toBeGreaterThan(0)
-    expect(screen.getByText('User message'))!.toBeInTheDocument()
+    expect(screen.getByText('User message')).toBeInTheDocument()
   })
 
   it('should show chatNode and inputs form on desktop for new conversation', () => {
@@ -873,7 +873,7 @@ describe('ChatWrapper', () => {
     })
 
     render(<ChatWrapper />)
-    expect(screen.getByText('Test'))!.toBeInTheDocument()
+    expect(screen.getByText('Test')).toBeInTheDocument()
   })
 
   it('should show chatNode on mobile for new conversation only', () => {
@@ -885,7 +885,7 @@ describe('ChatWrapper', () => {
     })
 
     const { rerender } = render(<ChatWrapper />)
-    expect(screen.getByText('Test'))!.toBeInTheDocument()
+    expect(screen.getByText('Test')).toBeInTheDocument()
 
     vi.mocked(useChatWithHistoryContext).mockReturnValue({
       ...defaultContextValue,
@@ -974,8 +974,8 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(screen.getByText('Answer'))!.toBeInTheDocument()
-    expect(screen.getByAltText('answer icon'))!.toBeInTheDocument()
+    expect(screen.getByText('Answer')).toBeInTheDocument()
+    expect(screen.getByAltText('answer icon')).toBeInTheDocument()
   })
 
   it('should render question icon fallback when user avatar is available', () => {
@@ -993,7 +993,7 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(screen.getByText('J'))!.toBeInTheDocument()
+    expect(screen.getByText('J')).toBeInTheDocument()
   })
 
   it('should use fallback values for nullable appData, appMeta and avatar name', () => {
@@ -1012,8 +1012,8 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(screen.getByText('Question with fallback avatar name'))!.toBeInTheDocument()
-    expect(screen.getByText('U'))!.toBeInTheDocument()
+    expect(screen.getByText('Question with fallback avatar name')).toBeInTheDocument()
+    expect(screen.getByText('U')).toBeInTheDocument()
   })
 
   it('should set handleStop on currentChatInstanceRef', () => {
@@ -1101,8 +1101,8 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
-    expect(container)!.toBeInTheDocument()
+    const container = chatInput.closest('.pointer-events-none')
+    expect(container).toBeInTheDocument()
   })
 
   it('should call formatBooleanInputs when sending message', async () => {
@@ -1223,8 +1223,7 @@ describe('ChatWrapper', () => {
 
     render(<ChatWrapper />)
     // This tests line 91 - using currentConversationItem.introduction
-    // This tests line 91 - using currentConversationItem.introduction
-    expect(screen.getByText('Custom introduction from conversation item'))!.toBeInTheDocument()
+    expect(screen.getByText('Custom introduction from conversation item')).toBeInTheDocument()
   })
 
   it('should handle early return when hasEmptyInput is already set', () => {
@@ -1243,8 +1242,8 @@ describe('ChatWrapper', () => {
     // This tests line 106 - early return when hasEmptyInput is set
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
-    expect(container)!.toBeInTheDocument()
+    const container = chatInput.closest('.pointer-events-none')
+    expect(container).toBeInTheDocument()
   })
 
   it('should handle early return when fileIsUploading is already set', () => {
@@ -1271,8 +1270,8 @@ describe('ChatWrapper', () => {
     // This tests line 109 - early return when fileIsUploading is set
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
-    expect(container)!.toBeInTheDocument()
+    const container = chatInput.closest('.pointer-events-none')
+    expect(container).toBeInTheDocument()
   })
 
   it('should handle doSend with no parent message id', async () => {
@@ -1562,7 +1561,7 @@ describe('ChatWrapper', () => {
     } as unknown as ChatHookReturn)
 
     render(<ChatWrapper />)
-    expect(screen.getByText('Default opening statement'))!.toBeInTheDocument()
+    expect(screen.getByText('Default opening statement')).toBeInTheDocument()
   })
 
   it('should handle doSend when regenerating with null parentAnswer', async () => {
@@ -1610,9 +1609,7 @@ describe('ChatWrapper', () => {
 
     // Just verify the component renders - the actual editedQuestion flow
     // is tested through the doRegenerate callback that's passed to Chat
-    // Just verify the component renders - the actual editedQuestion flow
-    // is tested through the doRegenerate callback that's passed to Chat
-    expect(screen.getByText('Answer'))!.toBeInTheDocument()
+    expect(screen.getByText('Answer')).toBeInTheDocument()
     expect(handleSend).toBeDefined()
   })
 
@@ -1632,9 +1629,7 @@ describe('ChatWrapper', () => {
 
     // The doRegenerate is passed to Chat component and would be called
     // This ensures lines 198-200 are covered
-    // The doRegenerate is passed to Chat component and would be called
-    // This ensures lines 198-200 are covered
-    expect(screen.getByText('A1'))!.toBeInTheDocument()
+    expect(screen.getByText('A1')).toBeInTheDocument()
   })
 
   it('should handle doRegenerate when question has message_files', async () => {
@@ -1814,38 +1809,7 @@ describe('ChatWrapper', () => {
     render(<ChatWrapper />)
     const textboxes = screen.getAllByRole('textbox')
     const chatInput = textboxes[textboxes.length - 1]
-    const container = chatInput!.closest('.pointer-events-none')
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
-    // Should not be disabled because it's not required
+    const container = chatInput.closest('.pointer-events-none')
     // Should not be disabled because it's not required
     expect(container).not.toBeInTheDocument()
   })
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
index b1c23a129b..5feaccd191 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
@@ -108,7 +108,7 @@ describe('Header Component', () => {
         currentConversationItem: mockConv,
         sidebarCollapseState: true,
       })
-      expect(screen.getByText('My Chat'))!.toBeInTheDocument()
+      expect(screen.getByText('My Chat')).toBeInTheDocument()
     })
 
     it('should render ViewFormDropdown trigger when inputsForms are present', () => {
@@ -133,7 +133,7 @@ describe('Header Component', () => {
       const buttons = screen.getAllByRole('button')
       // Sidebar, NewChat, ResetChat (3)
       const resetChatBtn = buttons[buttons.length - 1]
-      await userEvent.click(resetChatBtn!)
+      await userEvent.click(resetChatBtn)
 
       expect(handleNewConversation).toHaveBeenCalled()
     })
@@ -144,7 +144,7 @@ describe('Header Component', () => {
 
       const buttons = screen.getAllByRole('button')
       const sidebarBtn = buttons[0]
-      await userEvent.click(sidebarBtn!)
+      await userEvent.click(sidebarBtn)
 
       expect(handleSidebarCollapse).toHaveBeenCalledWith(false)
     })
@@ -163,7 +163,7 @@ describe('Header Component', () => {
       await userEvent.click(trigger)
 
       const pinBtn = await screen.findByText('explore.sidebar.action.pin')
-      expect(pinBtn)!.toBeInTheDocument()
+      expect(pinBtn).toBeInTheDocument()
 
       await userEvent.click(pinBtn)
 
@@ -225,7 +225,7 @@ describe('Header Component', () => {
       const renameMenuBtn = await screen.findByText('explore.sidebar.action.rename')
       await userEvent.click(renameMenuBtn)
 
-      expect(await screen.findByText('common.chat.renameConversation'))!.toBeInTheDocument()
+      expect(await screen.findByText('common.chat.renameConversation')).toBeInTheDocument()
 
       const input = screen.getByDisplayValue('My Chat')
       await userEvent.clear(input)
@@ -236,7 +236,7 @@ describe('Header Component', () => {
 
       expect(handleRenameConversation).toHaveBeenCalledWith('conv-1', 'New Name', expect.any(Object))
 
-      const successCallback = handleRenameConversation.mock.calls[0]![2].onSuccess
+      const successCallback = handleRenameConversation.mock.calls[0][2].onSuccess
       await act(async () => {
         successCallback()
       })
@@ -262,14 +262,14 @@ describe('Header Component', () => {
       await userEvent.click(deleteMenuBtn)
 
       expect(handleDeleteConversation).not.toHaveBeenCalled()
-      expect(await screen.findByText('share.chat.deleteConversation.title'))!.toBeInTheDocument()
+      expect(await screen.findByText('share.chat.deleteConversation.title')).toBeInTheDocument()
 
       const confirmBtn = await screen.findByText('common.operation.confirm')
       await userEvent.click(confirmBtn)
 
       expect(handleDeleteConversation).toHaveBeenCalledWith('conv-1', expect.any(Object))
 
-      const successCallback = handleDeleteConversation.mock.calls[0]![1].onSuccess
+      const successCallback = handleDeleteConversation.mock.calls[0][1].onSuccess
       await act(async () => {
         successCallback()
       })
@@ -311,7 +311,7 @@ describe('Header Component', () => {
       await userEvent.click(screen.getByText('My Chat'))
       await userEvent.click(await screen.findByText('explore.sidebar.action.delete'))
 
-      expect(await screen.findByText('share.chat.deleteConversation.title'))!.toBeInTheDocument()
+      expect(await screen.findByText('share.chat.deleteConversation.title')).toBeInTheDocument()
     })
   })
 
@@ -332,7 +332,7 @@ describe('Header Component', () => {
     it('should render system title if conversation id is missing', () => {
       setup({ currentConversationId: '', sidebarCollapseState: true })
       const titleEl = screen.getByText('Test App')
-      expect(titleEl)!.toHaveClass('system-md-semibold')
+      expect(titleEl).toHaveClass('system-md-semibold')
     })
 
     it('should render app icon from URL when icon_url is provided', () => {
@@ -347,7 +347,7 @@ describe('Header Component', () => {
         },
       })
       const img = screen.getByAltText('app icon')
-      expect(img)!.toHaveAttribute('src', 'https://example.com/icon.png')
+      expect(img).toHaveAttribute('src', 'https://example.com/icon.png')
     })
 
     it('should handle undefined appData gracefully (optional chaining)', () => {
@@ -364,8 +364,7 @@ describe('Header Component', () => {
         sidebarCollapseState: true,
       })
       // The separator is just a div with text content '/'
-      // The separator is just a div with text content '/'
-      expect(screen.getByText('/'))!.toBeInTheDocument()
+      expect(screen.getByText('/')).toBeInTheDocument()
     })
 
     it('should handle New Chat button state when currentConversationId is present but isResponding is true', () => {
@@ -378,7 +377,7 @@ describe('Header Component', () => {
       const buttons = screen.getAllByRole('button')
       // Sidebar, NewChat, ResetChat (3)
       const newChatBtn = buttons[1]
-      expect(newChatBtn)!.toBeDisabled()
+      expect(newChatBtn).toBeDisabled()
     })
 
     it('should handle New Chat button state when currentConversationId is missing and isResponding is false', () => {
@@ -391,7 +390,7 @@ describe('Header Component', () => {
       const buttons = screen.getAllByRole('button')
       // Sidebar, NewChat (2)
       const newChatBtn = buttons[1]
-      expect(newChatBtn)!.toBeDisabled()
+      expect(newChatBtn).toBeDisabled()
     })
 
     it('should not render operation menu if conversation id is missing', () => {
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index d439a43c1f..a6dd6a0a9e 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -71,7 +71,7 @@ const Operation: FC<Props> = ({
         )}
         {isShowDelete && (
           <DropdownMenuItem
-            variant="destructive"
+            destructive
             className="system-md-regular"
             onClick={() => handleDeferredAction(onDelete)}
           >
diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index df261d750c..e6f5657ff5 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -452,7 +452,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
       toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       setOriginConversationList(produce((draft) => {
         const index = originConversationList.findIndex(item => item.id === conversationId)
-        const item = draft[index]!
+        const item = draft[index]
         draft[index] = {
           ...item,
           name: newName,
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index adda03fb55..611d2bb1b9 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -105,7 +105,7 @@ const Operation: FC<Props> = ({
         )}
         {isShowDelete && (
           <DropdownMenuItem
-            variant="destructive"
+            destructive
             className="gap-2 px-2 system-md-regular"
             onClick={(e) => {
               e.stopPropagation()
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 51a73bc4b6..2b4070b69a 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -64,10 +64,10 @@ const Popup: FC<PopupProps> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
         <div data-testid="popup-content" className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]">
-          <div className="px-4 pt-3 pb-2">
+          <div className="px-4 pb-2 pt-3">
             <div className="flex h-[18px] items-center">
               <FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
-              <div className="truncate system-xs-medium text-text-tertiary">
+              <div className="truncate text-text-tertiary system-xs-medium">
                 {(data.dataSourceType === 'upload_file' || data.dataSourceType === 'file') && !!data.sources?.[0]?.dataset_id
                   ? (
                       <button
@@ -98,7 +98,7 @@ const Popup: FC<PopupProps> = ({
                         <div className="mb-2 flex items-center justify-between">
                           <div className="flex h-5 items-center rounded-md border border-divider-subtle px-1.5">
                             {/* replaced svg component with tailwind icon class per lint rule */}
-                            <i className="mr-0.5 i-custom-vender-line-general-hash-02 h-3 w-3 text-text-quaternary" aria-hidden />
+                            <i className="i-custom-vender-line-general-hash-02 mr-0.5 h-3 w-3 text-text-quaternary" aria-hidden />
                             <div data-testid="popup-segment-position" className="text-[11px] font-medium text-text-tertiary">
                               {source.segment_position || index + 1}
                             </div>
@@ -111,29 +111,29 @@ const Popup: FC<PopupProps> = ({
                                 className="hidden h-[18px] items-center text-xs text-text-accent group-hover:flex"
                               >
                                 {t('chat.citation.linkToDataset', { ns: 'common' })}
-                                <i className="ml-1 i-custom-vender-line-arrows-arrow-up-right h-3 w-3" aria-hidden />
+                                <i className="i-custom-vender-line-arrows-arrow-up-right ml-1 h-3 w-3" aria-hidden />
                               </Link>
                             )
                           }
                         </div>
-                        <div data-testid="popup-source-content" className="text-[13px] wrap-break-word text-text-secondary">{source.content}</div>
+                        <div data-testid="popup-source-content" className="wrap-break-word text-[13px] text-text-secondary">{source.content}</div>
                         {
                           showHitInfo && (
-                            <div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center system-xs-medium text-text-quaternary">
+                            <div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center text-text-quaternary system-xs-medium">
                               <Tooltip
                                 text={t('chat.citation.characters', { ns: 'common' })}
                                 data={source.word_count}
-                                icon={<i className="mr-1 i-custom-vender-line-editor-type-square h-3 w-3" aria-hidden />}
+                                icon={<i className="i-custom-vender-line-editor-type-square mr-1 h-3 w-3" aria-hidden />}
                               />
                               <Tooltip
                                 text={t('chat.citation.hitCount', { ns: 'common' })}
                                 data={source.hit_count}
-                                icon={<i className="mr-1 i-custom-vender-line-general-target-04 h-3 w-3" aria-hidden />}
+                                icon={<i className="i-custom-vender-line-general-target-04 mr-1 h-3 w-3" aria-hidden />}
                               />
                               <Tooltip
                                 text={t('chat.citation.vectorHash', { ns: 'common' })}
                                 data={source.index_node_hash?.substring(0, 7)}
-                                icon={<i className="mr-1 i-custom-vender-line-editor-bezier-curve-03 h-3 w-3" aria-hidden />}
+                                icon={<i className="i-custom-vender-line-editor-bezier-curve-03 mr-1 h-3 w-3" aria-hidden />}
                               />
                               {
                                 !!source.score && (
diff --git a/web/app/components/base/chat/utils.ts b/web/app/components/base/chat/utils.ts
index ff9085c4e6..5881f565a4 100644
--- a/web/app/components/base/chat/utils.ts
+++ b/web/app/components/base/chat/utils.ts
@@ -94,7 +94,7 @@ function isValidGeneratedAnswer(item?: ChatItem | ChatItemInTree): boolean {
 
 function getLastAnswer<T extends ChatItem | ChatItemInTree>(chatList: T[]): T | null {
   for (let i = chatList.length - 1; i >= 0; i--) {
-    const item = chatList[i]!
+    const item = chatList[i]
     if (isValidGeneratedAnswer(item))
       return item
   }
@@ -158,7 +158,7 @@ function buildChatItemTree(allMessages: IChatItem[]): ChatItemInTree[] {
         rootNodes.push(questionNode)
       }
       else {
-        map[parentMessageId]!.children!.push(questionNode)
+        map[parentMessageId].children!.push(questionNode)
       }
     }
   }
@@ -188,8 +188,8 @@ function getThreadMessages(tree: ChatItemInTree[], targetMessageId?: string): Ch
 
         const parentAnswer = path[index - 2]
         const siblingCount = !parentAnswer ? tree.length : parentAnswer.children!.length
-        const prevSibling = !parentAnswer ? tree[item.siblingIndex! - 1]?.children?.[0]?.id : parentAnswer.children![item.siblingIndex! - 1]?.children?.[0]!.id
-        const nextSibling = !parentAnswer ? tree[item.siblingIndex! + 1]?.children?.[0]?.id : parentAnswer.children![item.siblingIndex! + 1]?.children?.[0]!.id
+        const prevSibling = !parentAnswer ? tree[item.siblingIndex! - 1]?.children?.[0]?.id : parentAnswer.children![item.siblingIndex! - 1]?.children?.[0].id
+        const nextSibling = !parentAnswer ? tree[item.siblingIndex! + 1]?.children?.[0]?.id : parentAnswer.children![item.siblingIndex! + 1]?.children?.[0].id
 
         return { ...item, siblingCount, prevSibling, nextSibling }
       })
@@ -198,8 +198,8 @@ function getThreadMessages(tree: ChatItemInTree[], targetMessageId?: string): Ch
     if (node.children) {
       for (let i = node.children.length - 1; i >= 0; i--) {
         stack.push({
-          node: node.children[i]!,
-          path: [...path, node.children[i]!],
+          node: node.children[i],
+          path: [...path, node.children[i]],
         })
       }
     }
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
index b0b4635a39..15332592d0 100644
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -30,8 +30,8 @@ const CopyIcon = ({ content }: Props) => {
     >
       <div onMouseLeave={reset}>
         {!copied
-          ? (<span className="mx-1 i-custom-vender-line-files-copy h-3.5 w-3.5 cursor-pointer text-text-tertiary" onClick={handleCopy} data-testid="copy-icon" />)
-          : (<span className="mx-1 i-custom-vender-line-files-copy-check h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)}
+          ? (<span className="i-custom-vender-line-files-copy mx-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary" onClick={handleCopy} data-testid="copy-icon" />)
+          : (<span className="i-custom-vender-line-files-copy-check mx-1 h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)}
       </div>
     </Tooltip>
   )
diff --git a/web/app/components/base/corner-label/index.stories.tsx b/web/app/components/base/corner-label/index.stories.tsx
index ce2ff6d277..cb7a180c85 100644
--- a/web/app/components/base/corner-label/index.stories.tsx
+++ b/web/app/components/base/corner-label/index.stories.tsx
@@ -31,7 +31,7 @@ export const Default: Story = {}
 export const OnCard: Story = {
   render: args => (
     <div className="relative w-80 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <CornerLabel {...args} className="absolute -top-px -right-px" />
+      <CornerLabel {...args} className="absolute -right-px -top-px" />
       <div className="text-sm text-text-secondary">
         Showcase how the label sits on a card header. Pair with contextual text or status information.
       </div>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
index 0335587af0..b3985df481 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
@@ -11,10 +11,10 @@ export const Item: FC<{ title: string, tooltip: string, children: React.JSX.Elem
   return (
     <div>
       <div className="mb-1 flex items-center space-x-1">
-        <div className="py-1 system-sm-semibold text-text-secondary">{title}</div>
+        <div className="py-1 text-text-secondary system-sm-semibold">{title}</div>
         <Tooltip
           popupContent={
-            <div className="max-w-[200px] system-sm-regular text-text-secondary">{tooltip}</div>
+            <div className="max-w-[200px] text-text-secondary system-sm-regular">{tooltip}</div>
           }
         />
       </div>
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/index.spec.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/index.spec.tsx
index 9e74a1d0df..b7ee5b39b2 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/index.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/index.spec.tsx
@@ -43,19 +43,19 @@ describe('ConversationOpener', () => {
   it('should render the conversation opener title', () => {
     renderWithProvider()
 
-    expect(screen.getByText(/feature\.conversationOpener\.title/))!.toBeInTheDocument()
+    expect(screen.getByText(/feature\.conversationOpener\.title/)).toBeInTheDocument()
   })
 
   it('should render description when not enabled', () => {
     renderWithProvider()
 
-    expect(screen.getByText(/feature\.conversationOpener\.description/))!.toBeInTheDocument()
+    expect(screen.getByText(/feature\.conversationOpener\.description/)).toBeInTheDocument()
   })
 
   it('should render a switch toggle', () => {
     renderWithProvider()
 
-    expect(screen.getByRole('switch'))!.toBeInTheDocument()
+    expect(screen.getByRole('switch')).toBeInTheDocument()
   })
 
   it('should call onChange when toggled', () => {
@@ -72,7 +72,7 @@ describe('ConversationOpener', () => {
       opening: { enabled: true, opening_statement: 'Welcome to the app!' },
     })
 
-    expect(screen.getByText('Welcome to the app!'))!.toBeInTheDocument()
+    expect(screen.getByText('Welcome to the app!')).toBeInTheDocument()
   })
 
   it('should show placeholder when enabled but no opening statement', () => {
@@ -80,7 +80,7 @@ describe('ConversationOpener', () => {
       opening: { enabled: true, opening_statement: '' },
     })
 
-    expect(screen.getByText(/openingStatement\.placeholder/))!.toBeInTheDocument()
+    expect(screen.getByText(/openingStatement\.placeholder/)).toBeInTheDocument()
   })
 
   it('should show edit button when hovering over enabled feature', () => {
@@ -91,7 +91,7 @@ describe('ConversationOpener', () => {
     const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
     fireEvent.mouseEnter(card)
 
-    expect(screen.getByText(/openingStatement\.writeOpener/))!.toBeInTheDocument()
+    expect(screen.getByText(/openingStatement\.writeOpener/)).toBeInTheDocument()
   })
 
   it('should open modal when edit button is clicked', () => {
@@ -127,7 +127,7 @@ describe('ConversationOpener', () => {
     fireEvent.mouseEnter(card)
     fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
 
-    const modalCall = mockSetShowOpeningModal.mock.calls[0]![0]
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
     expect(modalCall.payload).toBeDefined()
     expect(modalCall.onSaveCallback).toBeDefined()
     expect(modalCall.onCancelCallback).toBeDefined()
@@ -143,7 +143,7 @@ describe('ConversationOpener', () => {
     fireEvent.mouseEnter(card)
     fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
 
-    const modalCall = mockSetShowOpeningModal.mock.calls[0]![0]
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
     act(() => {
       modalCall.onSaveCallback({ enabled: true, opening_statement: 'Updated' })
     })
@@ -161,7 +161,7 @@ describe('ConversationOpener', () => {
     fireEvent.mouseEnter(card)
     fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
 
-    const modalCall = mockSetShowOpeningModal.mock.calls[0]![0]
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
     modalCall.onCancelCallback()
 
     expect(onChange).toHaveBeenCalled()
@@ -173,21 +173,18 @@ describe('ConversationOpener', () => {
     })
 
     // Before hover, opening statement visible
-    // Before hover, opening statement visible
-    expect(screen.getByText('Welcome!'))!.toBeInTheDocument()
+    expect(screen.getByText('Welcome!')).toBeInTheDocument()
 
     const card = screen.getByText(/feature\.conversationOpener\.title/).closest('[class]')!
     fireEvent.mouseEnter(card)
 
     // After hover, button visible, statement hidden
-    // After hover, button visible, statement hidden
-    expect(screen.getByText(/openingStatement\.writeOpener/))!.toBeInTheDocument()
+    expect(screen.getByText(/openingStatement\.writeOpener/)).toBeInTheDocument()
 
     fireEvent.mouseLeave(card)
 
     // After leave, statement visible again
-    // After leave, statement visible again
-    expect(screen.getByText('Welcome!'))!.toBeInTheDocument()
+    expect(screen.getByText('Welcome!')).toBeInTheDocument()
   })
 
   it('should return early from opener handler when disabled and hovered', () => {
@@ -211,7 +208,7 @@ describe('ConversationOpener', () => {
     fireEvent.mouseEnter(card)
     fireEvent.click(screen.getByText(/openingStatement\.writeOpener/))
 
-    const modalCall = mockSetShowOpeningModal.mock.calls[0]![0]
+    const modalCall = mockSetShowOpeningModal.mock.calls[0][0]
     act(() => {
       modalCall.onSaveCallback({ enabled: true, opening_statement: 'Updated without callback' })
       modalCall.onCancelCallback()
@@ -224,6 +221,6 @@ describe('ConversationOpener', () => {
     renderWithProvider()
 
     fireEvent.click(screen.getByRole('switch'))
-    expect(screen.getByRole('switch'))!.toBeInTheDocument()
+    expect(screen.getByRole('switch')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 438af2e9a1..1247321bd8 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -205,8 +205,8 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
 
     if (systemTypes.findIndex(t => t === localeData.type) < 0 && currentProvider?.form_schema) {
       for (let i = 0; i < currentProvider.form_schema.length; i++) {
-        if (!localeData.config?.[currentProvider.form_schema[i]!.variable] && currentProvider.form_schema[i]!.required) {
-          toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i]!.label['en-US'] : currentProvider.form_schema[i]!.label['zh-Hans'] }))
+        if (!localeData.config?.[currentProvider.form_schema[i].variable] && currentProvider.form_schema[i].required) {
+          toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }))
           return
         }
       }
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
index c4efd7b0a0..b6b7a858de 100644
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
@@ -25,9 +25,9 @@ const Placeholder = () => {
     >
       <div className="flex grow items-center">
         Type or press
-        <div className="mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
+        <div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray text-text-placeholder">/</div>
         <div
-          className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
+          className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
           onClick={((e) => {
             e.stopPropagation()
             handleInsert('/')
diff --git a/web/app/components/base/form/hooks/use-check-validated.ts b/web/app/components/base/form/hooks/use-check-validated.ts
index 6530b3f0be..0a6cb20fc0 100644
--- a/web/app/components/base/form/hooks/use-check-validated.ts
+++ b/web/app/components/base/form/hooks/use-check-validated.ts
@@ -20,7 +20,7 @@ export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) =
           const conditionValue = showOnValues[condition.variable]
           return conditionValue === condition.value
         })
-        const errors: any[] = show ? fields[key]!.errors : []
+        const errors: any[] = show ? fields[key].errors : []
         return [...acc, ...errors]
       }, [] as string[])
       if (errorArray.length) {
diff --git a/web/app/components/base/grid-mask/__tests__/index.spec.tsx b/web/app/components/base/grid-mask/__tests__/index.spec.tsx
index 267e454ef0..302d23a61a 100644
--- a/web/app/components/base/grid-mask/__tests__/index.spec.tsx
+++ b/web/app/components/base/grid-mask/__tests__/index.spec.tsx
@@ -15,48 +15,48 @@ describe('GridMask', () => {
   describe('Rendering', () => {
     it('should render children in the content layer', () => {
       renderGridMask({}, <button>Run</button>)
-      expect(screen.getByRole('button', { name: 'Run' }))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Run' })).toBeInTheDocument()
     })
 
     it('should render correctly without optional className props', () => {
       const { wrapper, canvasLayer, gradientLayer, contentLayer } = renderGridMask({}, <span>Plain child</span>)
 
-      expect(wrapper)!.toHaveClass('bg-saas-background')
-      expect(canvasLayer)!.toHaveClass('absolute')
-      expect(gradientLayer)!.toHaveClass('absolute')
-      expect(contentLayer)!.toHaveTextContent('Plain child')
+      expect(wrapper).toHaveClass('bg-saas-background')
+      expect(canvasLayer).toHaveClass('absolute')
+      expect(gradientLayer).toHaveClass('absolute')
+      expect(contentLayer).toHaveTextContent('Plain child')
     })
 
     it('should render wrapper, canvas, gradient and content layers in order', () => {
       const { wrapper, canvasLayer, gradientLayer, contentLayer } = renderGridMask({}, <span>Content</span>)
-      expect(wrapper)!.toBeInTheDocument()
+      expect(wrapper).toBeInTheDocument()
       expect(wrapper.children).toHaveLength(3)
-      expect(canvasLayer)!.toHaveClass('z-0')
-      expect(gradientLayer)!.toHaveClass('z-1')
-      expect(contentLayer)!.toHaveClass('z-2')
-      expect(contentLayer)!.toHaveTextContent('Content')
+      expect(canvasLayer).toHaveClass('z-0')
+      expect(gradientLayer).toHaveClass('z-1')
+      expect(contentLayer).toHaveClass('z-2')
+      expect(contentLayer).toHaveTextContent('Content')
     })
   })
 
   describe('Props', () => {
     it('should apply wrapperClassName to wrapper element', () => {
       const { wrapper } = renderGridMask({ wrapperClassName: 'custom-wrapper' }, <span>Child</span>)
-      expect(wrapper)!.toHaveClass('custom-wrapper')
-      expect(wrapper)!.toHaveClass('relative')
+      expect(wrapper).toHaveClass('custom-wrapper')
+      expect(wrapper).toHaveClass('relative')
     })
 
     it('should apply canvasClassName and grid background class to canvas layer', () => {
       const { canvasLayer } = renderGridMask({ canvasClassName: 'custom-canvas' }, <span>Child</span>)
 
-      expect(canvasLayer)!.toHaveClass('custom-canvas')
-      expect(canvasLayer)!.toHaveClass(Style.gridBg!)
+      expect(canvasLayer).toHaveClass('custom-canvas')
+      expect(canvasLayer).toHaveClass(Style.gridBg)
     })
 
     it('should apply gradientClassName to gradient layer', () => {
       const { gradientLayer } = renderGridMask({ gradientClassName: 'custom-gradient' }, <span>Child</span>)
 
-      expect(gradientLayer)!.toHaveClass('custom-gradient')
-      expect(gradientLayer)!.toHaveClass('bg-grid-mask-background')
+      expect(gradientLayer).toHaveClass('custom-gradient')
+      expect(gradientLayer).toHaveClass('bg-grid-mask-background')
     })
   })
 })
diff --git a/web/app/components/base/icons/src/vender/line/development/index.ts b/web/app/components/base/icons/src/vender/line/development/index.ts
index 7c3c48aa5e..4278370eec 100644
--- a/web/app/components/base/icons/src/vender/line/development/index.ts
+++ b/web/app/components/base/icons/src/vender/line/development/index.ts
@@ -1,2 +1 @@
 export { default as BracketsX } from './BracketsX'
-export { default as CodeBrowser } from './CodeBrowser'
diff --git a/web/app/components/base/image-uploader/hooks.ts b/web/app/components/base/image-uploader/hooks.ts
index ec1b1248f1..8a1a082b0f 100644
--- a/web/app/components/base/image-uploader/hooks.ts
+++ b/web/app/components/base/image-uploader/hooks.ts
@@ -31,7 +31,7 @@ export const useImageFiles = () => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
     if (index > -1) {
-      const currentFile = files[index]!
+      const currentFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentFile, deleted: true }, ...files.slice(index + 1)]
       setFiles(newFiles)
       filesRef.current = newFiles
@@ -41,7 +41,7 @@ export const useImageFiles = () => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
     if (index > -1) {
-      const currentFile = files[index]!
+      const currentFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentFile, progress: -1 }, ...files.slice(index + 1)]
       filesRef.current = newFiles
       setFiles(newFiles)
@@ -51,7 +51,7 @@ export const useImageFiles = () => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
     if (index > -1) {
-      const currentImageFile = files[index]!
+      const currentImageFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: 100 }, ...files.slice(index + 1)]
       filesRef.current = newFiles
       setFiles(newFiles)
@@ -61,9 +61,9 @@ export const useImageFiles = () => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
     if (index > -1) {
-      const currentImageFile = files[index]!
+      const currentImageFile = files[index]
       imageUpload({
-        file: currentImageFile!.file!,
+        file: currentImageFile.file!,
         onProgressCallback: (progress) => {
           const newFiles = [...files.slice(0, index), { ...currentImageFile, progress }, ...files.slice(index + 1)]
           filesRef.current = newFiles
@@ -114,7 +114,7 @@ export const useLocalFileUploader = ({ limit, disabled = false, onUpload }: useL
       // TODO: leave some warnings?
       return
     }
-    if (!ALLOW_FILE_EXTENSIONS.includes(file.type.split('/')[1]!))
+    if (!ALLOW_FILE_EXTENSIONS.includes(file.type.split('/')[1]))
       return
     if (limit && file.size > limit * 1024 * 1024) {
       toast.error(t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: limit }))
diff --git a/web/app/components/base/image-uploader/image-list.stories.tsx b/web/app/components/base/image-uploader/image-list.stories.tsx
index 0c27211d16..cfea4a0da0 100644
--- a/web/app/components/base/image-uploader/image-list.stories.tsx
+++ b/web/app/components/base/image-uploader/image-list.stories.tsx
@@ -132,7 +132,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
   return (
     <div className="flex w-[360px] flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
       <div className="flex flex-col gap-2">
-        <span className="text-xs font-medium tracking-[0.18em] text-text-tertiary uppercase">Add images</span>
+        <span className="text-xs font-medium uppercase tracking-[0.18em] text-text-tertiary">Add images</span>
         <div className="flex items-center gap-2">
           <ImageLinkInput onUpload={handleUploadFromLink} disabled={readonly} />
           <button
@@ -156,7 +156,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
       />
 
       <div className="rounded-lg border border-divider-subtle bg-background-default p-2">
-        <span className="mb-1 block text-[11px] font-semibold tracking-widest text-text-tertiary uppercase">
+        <span className="mb-1 block text-[11px] font-semibold uppercase tracking-widest text-text-tertiary">
           Files state
         </span>
         <pre className="max-h-40 overflow-auto text-[11px] leading-relaxed text-text-tertiary">
diff --git a/web/app/components/base/input/__tests__/index.spec.tsx b/web/app/components/base/input/__tests__/index.spec.tsx
index 7dc5d22eab..1c50454962 100644
--- a/web/app/components/base/input/__tests__/index.spec.tsx
+++ b/web/app/components/base/input/__tests__/index.spec.tsx
@@ -36,7 +36,7 @@ describe('Input component', () => {
   it('renders correctly with default props', () => {
     render(<Input />)
     const input = screen.getByPlaceholderText(/input/i)
-    expect(input)!.toBeInTheDocument()
+    expect(input).toBeInTheDocument()
     expect(input).not.toBeDisabled()
     expect(input).not.toHaveClass('cursor-not-allowed')
   })
@@ -44,17 +44,17 @@ describe('Input component', () => {
   it('shows left icon when showLeftIcon is true', () => {
     render(<Input showLeftIcon />)
     const searchIcon = document.querySelector('.i-ri-search-line')
-    expect(searchIcon)!.toBeInTheDocument()
+    expect(searchIcon).toBeInTheDocument()
     const input = screen.getByPlaceholderText(/search/i)
-    expect(input)!.toHaveClass('pl-[26px]')
+    expect(input).toHaveClass('pl-[26px]')
   })
 
   it('shows clear icon when showClearIcon is true and has value', () => {
     render(<Input showClearIcon value="test" />)
     const clearIcon = document.querySelector('.i-ri-close-circle-fill')
-    expect(clearIcon)!.toBeInTheDocument()
+    expect(clearIcon).toBeInTheDocument()
     const input = screen.getByDisplayValue('test')
-    expect(input)!.toHaveClass('pr-[26px]')
+    expect(input).toHaveClass('pr-[26px]')
   })
 
   it('does not show clear icon when disabled, even with value', () => {
@@ -74,23 +74,23 @@ describe('Input component', () => {
   it('shows warning icon when destructive is true', () => {
     render(<Input destructive />)
     const warningIcon = document.querySelector('.i-ri-error-warning-line')
-    expect(warningIcon)!.toBeInTheDocument()
+    expect(warningIcon).toBeInTheDocument()
     const input = screen.getByPlaceholderText(/input/i)
-    expect(input)!.toHaveClass('border-components-input-border-destructive')
+    expect(input).toHaveClass('border-components-input-border-destructive')
   })
 
   it('applies disabled styles when disabled', () => {
     render(<Input disabled />)
     const input = screen.getByPlaceholderText(/input/i)
-    expect(input)!.toBeDisabled()
-    expect(input)!.toHaveClass('cursor-not-allowed')
-    expect(input)!.toHaveClass('bg-components-input-bg-disabled')
+    expect(input).toBeDisabled()
+    expect(input).toHaveClass('cursor-not-allowed')
+    expect(input).toHaveClass('bg-components-input-bg-disabled')
   })
 
   it('displays custom unit when provided', () => {
     render(<Input unit="km" />)
     const unitElement = screen.getByText('km')
-    expect(unitElement)!.toBeInTheDocument()
+    expect(unitElement).toBeInTheDocument()
   })
 
   it('applies custom className and style', () => {
@@ -98,8 +98,8 @@ describe('Input component', () => {
     const customStyle = { color: 'red' }
     render(<Input className={customClass} styleCss={customStyle} />)
     const input = screen.getByPlaceholderText(/input/i)
-    expect(input)!.toHaveClass(customClass)
-    expect(input)!.toHaveStyle({ color: 'red' })
+    expect(input).toHaveClass(customClass)
+    expect(input).toHaveStyle({ color: 'red' })
   })
 
   it('applies large size variant correctly', () => {
@@ -112,41 +112,41 @@ describe('Input component', () => {
     const placeholder = 'Custom placeholder'
     render(<Input placeholder={placeholder} />)
     const input = screen.getByPlaceholderText(placeholder)
-    expect(input)!.toBeInTheDocument()
+    expect(input).toBeInTheDocument()
   })
 
   describe('Additional Layout Branches', () => {
     it('applies pl-7 when showLeftIcon and size is large', () => {
       render(<Input showLeftIcon size="large" />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveClass('pl-7')
+      expect(input).toHaveClass('pl-7')
     })
 
     it('applies pr-7 when showClearIcon, has value, and size is large', () => {
       render(<Input showClearIcon value="123" size="large" onChange={vi.fn()} />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveClass('pr-7')
+      expect(input).toHaveClass('pr-7')
     })
 
     it('applies pr-7 when destructive and size is large', () => {
       render(<Input destructive size="large" />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveClass('pr-7')
+      expect(input).toHaveClass('pr-7')
     })
 
     it('shows copy icon and applies pr-[26px] when showCopyIcon is true', () => {
       render(<Input showCopyIcon />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveClass('pr-[26px]')
+      expect(input).toHaveClass('pr-[26px]')
       // Assert that CopyFeedbackNew wrapper is present
       const copyWrapper = document.querySelector('.group.absolute.right-0')
-      expect(copyWrapper)!.toBeInTheDocument()
+      expect(copyWrapper).toBeInTheDocument()
     })
 
     it('shows copy icon and applies pr-7 when showCopyIcon and size is large', () => {
       render(<Input showCopyIcon size="large" value="my-val" onChange={vi.fn()} />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveClass('pr-7')
+      expect(input).toHaveClass('pr-7')
     })
   })
 
@@ -198,10 +198,10 @@ describe('Input component', () => {
       fireEvent.blur(input)
 
       expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange.mock.calls[0]![0].type).toBe('change')
-      expect(onChange.mock.calls[0]![0].target.value).toBe('12')
+      expect(onChange.mock.calls[0][0].type).toBe('change')
+      expect(onChange.mock.calls[0][0].target.value).toBe('12')
       expect(onBlur).toHaveBeenCalledTimes(1)
-      expect(onBlur.mock.calls[0]![0].target.value).toBe('12')
+      expect(onBlur.mock.calls[0][0].target.value).toBe('12')
     })
 
     it('does not trigger change on blur-sm when value is already normalized', () => {
@@ -214,7 +214,7 @@ describe('Input component', () => {
 
       expect(onChange).not.toHaveBeenCalled()
       expect(onBlur).toHaveBeenCalledTimes(1)
-      expect(onBlur.mock.calls[0]![0].target.value).toBe('12')
+      expect(onBlur.mock.calls[0][0].target.value).toBe('12')
     })
   })
 })
diff --git a/web/app/components/base/logo/index.stories.tsx b/web/app/components/base/logo/index.stories.tsx
index 90209564ae..2aa7ec2bb9 100644
--- a/web/app/components/base/logo/index.stories.tsx
+++ b/web/app/components/base/logo/index.stories.tsx
@@ -55,7 +55,7 @@ export const Playground: Story = {
       <ThemePreview theme="dark">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-2">
-            <span className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Primary logo</span>
+            <span className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Primary logo</span>
             <div className="flex items-center justify-between rounded-xl border border-divider-subtle bg-background-default p-4">
               <DifyLogo size={size} style={style} />
               <code className="text-[11px] text-text-tertiary">{`size="${size}" | style="${style}"`}</code>
@@ -63,15 +63,15 @@ export const Playground: Story = {
           </div>
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
-              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Site favicon</span>
+              <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Site favicon</span>
               <LogoSite />
             </div>
             <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
-              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded header</span>
+              <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Embedded header</span>
               <LogoEmbeddedChatHeader />
             </div>
             <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4 sm:col-span-2">
-              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded avatar</span>
+              <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Embedded avatar</span>
               <LogoEmbeddedChatAvatar className="border-divider-strong rounded-2xl border" />
             </div>
           </div>
diff --git a/web/app/components/base/markdown-blocks/__tests__/code-block.spec.tsx b/web/app/components/base/markdown-blocks/__tests__/code-block.spec.tsx
index a3d28a3b5e..2eebe44af9 100644
--- a/web/app/components/base/markdown-blocks/__tests__/code-block.spec.tsx
+++ b/web/app/components/base/markdown-blocks/__tests__/code-block.spec.tsx
@@ -121,7 +121,7 @@ vi.mock('@/app/components/base/mermaid', () => ({
 
 const findEchartsHost = async () => {
   await waitFor(() => {
-    expect(document.querySelector('.echarts-for-react'))!.toBeInTheDocument()
+    expect(document.querySelector('.echarts-for-react')).toBeInTheDocument()
   })
   return document.querySelector('.echarts-for-react') as HTMLDivElement
 }
@@ -214,7 +214,7 @@ describe('CodeBlock', () => {
     it('should render syntax-highlighted output when language is standard', async () => {
       render(<CodeBlock className="language-javascript">const x = 1;</CodeBlock>)
 
-      expect(screen.getByText('JavaScript'))!.toBeInTheDocument()
+      expect(screen.getByText('JavaScript')).toBeInTheDocument()
       await waitFor(() => {
         expect(document.querySelector('code.language-javascript')?.textContent).toContain('const x = 1;')
       })
@@ -223,7 +223,7 @@ describe('CodeBlock', () => {
     it('should format unknown language labels with capitalized fallback when language is not in map', () => {
       render(<CodeBlock className="language-ruby">puts "ok"</CodeBlock>)
 
-      expect(screen.getByText('Ruby'))!.toBeInTheDocument()
+      expect(screen.getByText('Ruby')).toBeInTheDocument()
     })
 
     // it('should render mermaid controls when language is mermaid', async () => {
@@ -235,24 +235,24 @@ describe('CodeBlock', () => {
     it('should render mermaid block when language is mermaid', async () => {
       render(<CodeBlock className="language-mermaid">{'graph TD; A-->B;'}</CodeBlock>)
 
-      expect(screen.getByText('Mermaid'))!.toBeInTheDocument()
-      expect(await screen.findByTestId('mock-mermaid'))!.toHaveTextContent('graph TD; A-->B;')
+      expect(screen.getByText('Mermaid')).toBeInTheDocument()
+      expect(await screen.findByTestId('mock-mermaid')).toHaveTextContent('graph TD; A-->B;')
     })
 
     it('should render abc section header when language is abc', () => {
       render(<CodeBlock className="language-abc">X:1\nT:test</CodeBlock>)
 
-      expect(screen.getByText('ABC'))!.toBeInTheDocument()
+      expect(screen.getByText('ABC')).toBeInTheDocument()
     })
 
     it('should hide svg renderer when toggle is clicked for svg language', async () => {
       const user = userEvent.setup()
       render(<CodeBlock className="language-svg">{'<svg/>'}</CodeBlock>)
 
-      expect(await screen.findByText(/Error rendering SVG/i))!.toBeInTheDocument()
+      expect(await screen.findByText(/Error rendering SVG/i)).toBeInTheDocument()
 
       const svgToggleButton = screen.getAllByRole('button')[0]
-      await user.click(svgToggleButton!)
+      await user.click(svgToggleButton)
 
       expect(screen.queryByText(/Error rendering SVG/i)).not.toBeInTheDocument()
     })
@@ -262,7 +262,7 @@ describe('CodeBlock', () => {
 
       render(<CodeBlock className="language-javascript">const y = 2;</CodeBlock>)
 
-      expect(screen.getByText('JavaScript'))!.toBeInTheDocument()
+      expect(screen.getByText('JavaScript')).toBeInTheDocument()
       await waitFor(() => {
         expect(document.querySelector('code.language-javascript')?.textContent).toContain('const y = 2;')
       })
@@ -274,7 +274,7 @@ describe('CodeBlock', () => {
       render(<CodeBlock className="language-javascript">const z = 3;</CodeBlock>)
 
       await waitFor(() => {
-        expect(screen.getByText('const z = 3;'))!.toBeInTheDocument()
+        expect(screen.getByText('const z = 3;')).toBeInTheDocument()
       })
       expect(document.querySelector('code.language-javascript')).toBeNull()
     })
@@ -285,53 +285,53 @@ describe('CodeBlock', () => {
     it('should show loading indicator when echarts content is empty', () => {
       render(<CodeBlock className="language-echarts"></CodeBlock>)
 
-      expect(screen.getByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(screen.getByText(/Chart loading.../i)).toBeInTheDocument()
     })
 
     it('should keep loading when echarts content is whitespace only', () => {
       render(<CodeBlock className="language-echarts">{'   '}</CodeBlock>)
 
-      expect(screen.getByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(screen.getByText(/Chart loading.../i)).toBeInTheDocument()
     })
 
     it('should render echarts with parsed option when JSON is valid', async () => {
       const option = { title: [{ text: 'Hello' }] }
       render(<CodeBlock className="language-echarts">{JSON.stringify(option)}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
       expect(screen.queryByText(/Chart loading.../i)).not.toBeInTheDocument()
     })
 
     it('should use error option when echarts content is invalid but structurally complete', async () => {
       render(<CodeBlock className="language-echarts">{'{a:1}'}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
       expect(screen.queryByText(/Chart loading.../i)).not.toBeInTheDocument()
     })
 
     it('should use error option when echarts content is invalid non-structured text', async () => {
       render(<CodeBlock className="language-echarts">{'not a json {'}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
       expect(screen.queryByText(/Chart loading.../i)).not.toBeInTheDocument()
     })
 
     it('should keep loading when option is valid JSON but not an object', async () => {
       render(<CodeBlock className="language-echarts">"text-value"</CodeBlock>)
 
-      expect(await screen.findByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(await screen.findByText(/Chart loading.../i)).toBeInTheDocument()
     })
 
     it('should keep loading when echarts content matches incomplete quote-pattern guard', async () => {
       render(<CodeBlock className="language-echarts">{'x{"a":1'}</CodeBlock>)
 
-      expect(await screen.findByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(await screen.findByText(/Chart loading.../i)).toBeInTheDocument()
     })
 
     it('should keep loading when echarts content has unmatched opening array bracket', async () => {
       render(<CodeBlock className="language-echarts">[[1,2]</CodeBlock>)
 
-      expect(await screen.findByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(await screen.findByText(/Chart loading.../i)).toBeInTheDocument()
     })
 
     it('should keep chart instance stable when window resize is triggered', async () => {
@@ -343,7 +343,7 @@ describe('CodeBlock', () => {
         window.dispatchEvent(new Event('resize'))
       })
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
     })
 
     it('should keep rendering when echarts content updates repeatedly', async () => {
@@ -355,7 +355,7 @@ describe('CodeBlock', () => {
       rerender(<CodeBlock className="language-echarts">{'{"a":4}'}</CodeBlock>)
       rerender(<CodeBlock className="language-echarts">{'{"a":5}'}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
     })
 
     it('should stop processing extra finished events when chart finished callback fires repeatedly', async () => {
@@ -374,27 +374,27 @@ describe('CodeBlock', () => {
         await new Promise(resolve => setTimeout(resolve, 500))
       })
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
     })
 
     it('should switch from loading to chart when streaming content becomes valid JSON', async () => {
       const { rerender } = render(<CodeBlock className="language-echarts">{'{ "a":'}</CodeBlock>)
-      expect(screen.getByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(screen.getByText(/Chart loading.../i)).toBeInTheDocument()
 
       rerender(<CodeBlock className="language-echarts">{'{ "a": 1 }'}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
     })
 
     it('should parse array JSON after previously incomplete streaming content', async () => {
       const parseSpy = vi.spyOn(JSON, 'parse')
       parseSpy.mockImplementationOnce(() => ({ series: [] }) as unknown as object)
       const { rerender } = render(<CodeBlock className="language-echarts">[1, 2</CodeBlock>)
-      expect(screen.getByText(/Chart loading.../i))!.toBeInTheDocument()
+      expect(screen.getByText(/Chart loading.../i)).toBeInTheDocument()
 
       rerender(<CodeBlock className="language-echarts">[1, 2]</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
       parseSpy.mockRestore()
     })
 
@@ -404,7 +404,7 @@ describe('CodeBlock', () => {
 
       render(<CodeBlock className="language-echarts">abcde</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
       parseSpy.mockRestore()
     })
 
@@ -412,14 +412,14 @@ describe('CodeBlock', () => {
       mockUseTheme.mockReturnValue({ theme: Theme.dark })
       render(<CodeBlock className="language-echarts">{'{"series":[]}'}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
     })
 
     it('should render dark mode error option when app theme is dark and echarts content is invalid', async () => {
       mockUseTheme.mockReturnValue({ theme: Theme.dark })
       render(<CodeBlock className="language-echarts">{'{a:1}'}</CodeBlock>)
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
     })
 
     it('should wire resize listener when echarts view re-enters with a ready chart instance', async () => {
@@ -433,7 +433,7 @@ describe('CodeBlock', () => {
         window.dispatchEvent(new Event('resize'))
       })
 
-      expect(await findEchartsHost())!.toBeInTheDocument()
+      expect(await findEchartsHost()).toBeInTheDocument()
       unmount()
     })
 
diff --git a/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx b/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx
index ebf70b6b77..9c88b8a0a6 100644
--- a/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx
+++ b/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx
@@ -92,11 +92,11 @@ describe('MarkdownForm', () => {
 
       render(<MarkdownForm node={node} />)
 
-      expect(screen.getByText('Name'))!.toBeInTheDocument()
-      expect(screen.getByPlaceholderText('Enter name'))!.toBeInTheDocument()
-      expect(screen.getByPlaceholderText('Enter bio'))!.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Submit' }))!.toBeInTheDocument()
-      expect(screen.getByText(UNSUPPORTED_TAG_ARTICLE_RE))!.toBeInTheDocument()
+      expect(screen.getByText('Name')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Enter name')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Enter bio')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument()
+      expect(screen.getByText(UNSUPPORTED_TAG_ARTICLE_RE)).toBeInTheDocument()
     })
   })
 
@@ -221,7 +221,7 @@ describe('MarkdownForm', () => {
       try {
         render(<MarkdownForm node={node} />)
 
-        expect(screen.getByRole('button', { name: 'Submit' }))!.toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument()
         expect(consoleErrorSpy).toHaveBeenCalled()
       }
       finally {
@@ -413,7 +413,7 @@ describe('MarkdownForm', () => {
 
       // Click the "Now" button in the footer to select current time (calls onChange)
       const nowButtons = await screen.findAllByText('time.operation.now')
-      await user.click(nowButtons[0]!)
+      await user.click(nowButtons[0])
 
       // Submit the form
       await user.click(screen.getByRole('button', { name: 'Submit' }))
@@ -529,7 +529,7 @@ describe('MarkdownForm', () => {
       await user.click(button)
 
       await waitFor(() => {
-        expect(button)!.toBeDisabled()
+        expect(button).toBeDisabled()
       })
     })
 
@@ -586,7 +586,7 @@ describe('MarkdownForm', () => {
       render(<MarkdownForm node={node} />)
 
       const button = screen.getByRole('button', { name: 'Go' })
-      expect(button)!.toBeInTheDocument()
+      expect(button).toBeInTheDocument()
     })
 
     it('should ignore invalid variant and size values', () => {
@@ -596,7 +596,7 @@ describe('MarkdownForm', () => {
 
       render(<MarkdownForm node={node} />)
 
-      expect(screen.getByRole('button', { name: 'Go' }))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Go' })).toBeInTheDocument()
     })
   })
 
@@ -610,7 +610,7 @@ describe('MarkdownForm', () => {
       render(<MarkdownForm node={node} />)
 
       const input = screen.getByPlaceholderText('Password')
-      expect(input)!.toHaveAttribute('type', 'password')
+      expect(input).toHaveAttribute('type', 'password')
     })
 
     it('should render email input', () => {
@@ -620,7 +620,7 @@ describe('MarkdownForm', () => {
 
       render(<MarkdownForm node={node} />)
 
-      expect(screen.getByPlaceholderText('Email'))!.toHaveAttribute('type', 'email')
+      expect(screen.getByPlaceholderText('Email')).toHaveAttribute('type', 'email')
     })
 
     it('should render number input', () => {
@@ -630,7 +630,7 @@ describe('MarkdownForm', () => {
 
       render(<MarkdownForm node={node} />)
 
-      expect(screen.getByPlaceholderText('Age'))!.toHaveAttribute('type', 'number')
+      expect(screen.getByPlaceholderText('Age')).toHaveAttribute('type', 'number')
     })
 
     it('should submit typed value from password input', async () => {
@@ -664,7 +664,7 @@ describe('MarkdownForm', () => {
       render(<MarkdownForm node={node} />)
 
       expect(screen.queryByRole('slider')).not.toBeInTheDocument()
-      expect(screen.getByText(UNSUPPORTED_TAG_RE))!.toBeInTheDocument()
+      expect(screen.getByText(UNSUPPORTED_TAG_RE)).toBeInTheDocument()
     })
   })
 
@@ -689,7 +689,7 @@ describe('MarkdownForm', () => {
 
       render(<MarkdownForm node={node} />)
 
-      expect(screen.getByTestId('checkbox-agree'))!.toBeInTheDocument()
+      expect(screen.getByTestId('checkbox-agree')).toBeInTheDocument()
     })
 
     it('should render select with no options when dataOptions is missing', () => {
@@ -700,8 +700,7 @@ describe('MarkdownForm', () => {
       render(<MarkdownForm node={node} />)
 
       // Select renders with empty items list
-      // Select renders with empty items list
-      expect(screen.getByTestId('markdown-form'))!.toBeInTheDocument()
+      expect(screen.getByTestId('markdown-form')).toBeInTheDocument()
     })
 
     it('should render button with empty text when children array is empty', () => {
diff --git a/web/app/components/base/markdown/__tests__/index.spec.tsx b/web/app/components/base/markdown/__tests__/index.spec.tsx
index f28635650a..8e4ce7e0ce 100644
--- a/web/app/components/base/markdown/__tests__/index.spec.tsx
+++ b/web/app/components/base/markdown/__tests__/index.spec.tsx
@@ -32,7 +32,7 @@ type CapturedProps = {
 const getLastWrapperProps = (): CapturedProps => {
   const calls = mockReactMarkdownWrapper.mock.calls
   const lastCall = calls[calls.length - 1]
-  return lastCall![0] as CapturedProps
+  return lastCall[0] as CapturedProps
 }
 
 describe('Markdown', () => {
@@ -42,19 +42,19 @@ describe('Markdown', () => {
 
   it('should render wrapper content', () => {
     render(<Markdown content="Hello World" />)
-    expect(screen.getByTestId('react-markdown-wrapper'))!.toHaveTextContent('Hello World')
+    expect(screen.getByTestId('react-markdown-wrapper')).toHaveTextContent('Hello World')
   })
 
   it('should apply default classes', () => {
     const { container } = render(<Markdown content="Test" />)
     const markdownDiv = container.querySelector('.markdown-body')
-    expect(markdownDiv)!.toHaveClass('markdown-body', 'text-text-primary!')
+    expect(markdownDiv).toHaveClass('markdown-body', 'text-text-primary!')
   })
 
   it('should merge custom className with default classes', () => {
     const { container } = render(<Markdown content="Test" className="custom another" />)
     const markdownDiv = container.querySelector('.markdown-body')
-    expect(markdownDiv)!.toHaveClass('markdown-body', 'text-text-primary!', 'custom', 'another')
+    expect(markdownDiv).toHaveClass('markdown-body', 'text-text-primary!', 'custom', 'another')
   })
 
   it('should not include undefined in className', () => {
diff --git a/web/app/components/base/modal-like-wrap/index.stories.tsx b/web/app/components/base/modal-like-wrap/index.stories.tsx
index 38d969b2ce..ed6688773d 100644
--- a/web/app/components/base/modal-like-wrap/index.stories.tsx
+++ b/web/app/components/base/modal-like-wrap/index.stories.tsx
@@ -81,10 +81,10 @@ export const WithBackLink: Story = {
       hideCloseBtn
       beforeHeader={(
         <button
-          className="mb-1 flex items-center gap-1 text-xs font-medium text-text-accent uppercase"
+          className="mb-1 flex items-center gap-1 text-xs font-medium uppercase text-text-accent"
           onClick={() => console.log('back')}
         >
-          <span className="inline-block h-4 w-4 rounded-sm bg-text-accent/10 text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
+          <span className="bg-text-accent/10 inline-block h-4 w-4 rounded-sm text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
           Back
         </button>
       )}
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index f2b5146d73..62fcef1dc1 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -31,7 +31,7 @@ const NotionIcon = ({
       )
     }
     return (
-      <div className={cn('flex h-5 w-5 items-center justify-center rounded-sm bg-gray-200 text-xs font-medium text-gray-500', className)}>{name?.[0]!.toLocaleUpperCase()}</div>
+      <div className={cn('flex h-5 w-5 items-center justify-center rounded-sm bg-gray-200 text-xs font-medium text-gray-500', className)}>{name?.[0].toLocaleUpperCase()}</div>
     )
   }
 
diff --git a/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx b/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx
index 21a7a08d63..d4b559452e 100644
--- a/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/__tests__/index.spec.tsx
@@ -24,11 +24,11 @@ const mockList: DataSourceNotionPage[] = [
 ]
 
 const mockPagesMap: DataSourceNotionPageMap = {
-  'root-1': { ...mockList[0]!, workspace_id: 'workspace-1' },
-  'child-1': { ...mockList[1]!, workspace_id: 'workspace-1' },
-  'grandchild-1': { ...mockList[2]!, workspace_id: 'workspace-1' },
-  'child-2': { ...mockList[3]!, workspace_id: 'workspace-1' },
-  'root-2': { ...mockList[4]!, workspace_id: 'workspace-1' },
+  'root-1': { ...mockList[0], workspace_id: 'workspace-1' },
+  'child-1': { ...mockList[1], workspace_id: 'workspace-1' },
+  'grandchild-1': { ...mockList[2], workspace_id: 'workspace-1' },
+  'child-2': { ...mockList[3], workspace_id: 'workspace-1' },
+  'root-2': { ...mockList[4], workspace_id: 'workspace-1' },
 }
 
 describe('PageSelector', () => {
@@ -39,7 +39,7 @@ describe('PageSelector', () => {
   it('should render root level pages initially', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} />)
 
-    expect(screen.getByText('Root 1'))!.toBeInTheDocument()
+    expect(screen.getByText('Root 1')).toBeInTheDocument()
     expect(screen.queryByText('Child 1')).not.toBeInTheDocument()
   })
 
@@ -50,13 +50,13 @@ describe('PageSelector', () => {
     const toggle = screen.getByTestId('notion-page-toggle-root-1')
     await user.click(toggle)
 
-    expect(screen.getByText('Child 1'))!.toBeInTheDocument()
+    expect(screen.getByText('Child 1')).toBeInTheDocument()
   })
 
   it('should call onSelect with descendants when parent is selected', async () => {
     const handleSelect = vi.fn()
     const user = userEvent.setup()
-    render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={[mockList[0]!, mockList[1]!, mockList[2]!]} onSelect={handleSelect} />)
+    render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={[mockList[0], mockList[1], mockList[2]]} onSelect={handleSelect} />)
 
     const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-root-1')
     await user.click(checkbox)
@@ -78,7 +78,7 @@ describe('PageSelector', () => {
   it('should show breadcrumbs when searching', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="Grandchild" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} />)
 
-    expect(screen.getByText('Root 1 / Child 1 / Grandchild 1'))!.toBeInTheDocument()
+    expect(screen.getByText('Root 1 / Child 1 / Grandchild 1')).toBeInTheDocument()
   })
 
   it('should call onPreview when preview button is clicked', async () => {
@@ -95,7 +95,7 @@ describe('PageSelector', () => {
   it('should show no result message when search returns nothing', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="nonexistent" pagesMap={mockPagesMap} list={[]} onSelect={vi.fn()} />)
 
-    expect(screen.getByText('common.dataSource.notion.selector.noSearchResult'))!.toBeInTheDocument()
+    expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
   })
 
   it('should handle selection when searchValue is present', async () => {
@@ -124,7 +124,7 @@ describe('PageSelector', () => {
 
     const toggleBtn = screen.getByTestId('notion-page-toggle-root-1')
     await user.click(toggleBtn) // Expand
-    await waitFor(() => expect(screen.queryByText('Child 1'))!.toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByText('Child 1')).toBeInTheDocument())
 
     await user.click(toggleBtn) // Collapse
     await waitFor(() => expect(screen.queryByText('Child 1')).not.toBeInTheDocument())
@@ -149,14 +149,14 @@ describe('PageSelector', () => {
   it('should render preview button when canPreview is true', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} canPreview={true} />)
 
-    expect(screen.getByTestId('notion-page-preview-root-1'))!.toBeInTheDocument()
+    expect(screen.getByTestId('notion-page-preview-root-1')).toBeInTheDocument()
   })
 
   it('should use previewPageId prop when provided', () => {
     const { rerender } = render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} previewPageId="root-1" />)
 
     let row = screen.getByTestId('notion-page-row-root-1')
-    expect(row)!.toHaveClass('bg-state-base-hover')
+    expect(row).toHaveClass('bg-state-base-hover')
 
     rerender(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} previewPageId="root-2" />)
 
@@ -190,9 +190,8 @@ describe('PageSelector', () => {
     await user.click(toggle)
 
     // Both children should be visible
-    // Both children should be visible
-    expect(screen.getByText('Child 1'))!.toBeInTheDocument()
-    expect(screen.getByText('Child 2'))!.toBeInTheDocument()
+    expect(screen.getByText('Child 1')).toBeInTheDocument()
+    expect(screen.getByText('Child 2')).toBeInTheDocument()
   })
 
   it('should expand nested children when toggling parent', async () => {
@@ -202,12 +201,12 @@ describe('PageSelector', () => {
     // Expand root-1
     let toggle = screen.getByTestId('notion-page-toggle-root-1')
     await user.click(toggle)
-    expect(screen.getByText('Child 1'))!.toBeInTheDocument()
+    expect(screen.getByText('Child 1')).toBeInTheDocument()
 
     // Expand child-1
     toggle = screen.getByTestId('notion-page-toggle-child-1')
     await user.click(toggle)
-    expect(screen.getByText('Grandchild 1'))!.toBeInTheDocument()
+    expect(screen.getByText('Grandchild 1')).toBeInTheDocument()
 
     // Collapse child-1
     await user.click(toggle)
@@ -228,7 +227,7 @@ describe('PageSelector', () => {
   it('should only select the item when searching (no descendants)', async () => {
     const handleSelect = vi.fn()
     const user = userEvent.setup()
-    render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="Child" pagesMap={mockPagesMap} list={[mockList[1]!]} onSelect={handleSelect} />)
+    render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="Child" pagesMap={mockPagesMap} list={[mockList[1]]} onSelect={handleSelect} />)
 
     const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-child-1')
     await user.click(checkbox)
@@ -240,7 +239,7 @@ describe('PageSelector', () => {
   it('should deselect only the item when searching (no descendants)', async () => {
     const handleSelect = vi.fn()
     const user = userEvent.setup()
-    render(<PageSelector value={new Set(['child-1'])} disabledValue={new Set()} searchValue="Child" pagesMap={mockPagesMap} list={[mockList[1]!]} onSelect={handleSelect} />)
+    render(<PageSelector value={new Set(['child-1'])} disabledValue={new Set()} searchValue="Child" pagesMap={mockPagesMap} list={[mockList[1]]} onSelect={handleSelect} />)
 
     const checkbox = screen.getByTestId('checkbox-notion-page-checkbox-child-1')
     await user.click(checkbox)
@@ -251,8 +250,8 @@ describe('PageSelector', () => {
   it('should handle multiple root pages', async () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} />)
 
-    expect(screen.getByText('Root 1'))!.toBeInTheDocument()
-    expect(screen.getByText('Root 2'))!.toBeInTheDocument()
+    expect(screen.getByText('Root 1')).toBeInTheDocument()
+    expect(screen.getByText('Root 2')).toBeInTheDocument()
   })
 
   it('should update preview when clicking preview button with onPreview provided', async () => {
@@ -277,61 +276,29 @@ describe('PageSelector', () => {
     rerender(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} canPreview={true} />)
 
     const row = screen.getByTestId('notion-page-row-root-1')
-    expect(row)!.toHaveClass('bg-state-base-hover')
+    expect(row).toHaveClass('bg-state-base-hover')
   })
 
   it('should render page name with correct title attribute', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} />)
 
     const pageName = screen.getByTestId('notion-page-name-root-1')
-    expect(pageName)!.toHaveAttribute('title', 'Root 1')
+    expect(pageName).toHaveAttribute('title', 'Root 1')
   })
 
   it('should handle empty list gracefully', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="" pagesMap={mockPagesMap} list={[]} onSelect={vi.fn()} />)
 
-    expect(screen.getByText('common.dataSource.notion.selector.noSearchResult'))!.toBeInTheDocument()
+    expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
   })
 
   it('should filter search results correctly with partial matches', () => {
     render(<PageSelector value={new Set()} disabledValue={new Set()} searchValue="1" pagesMap={mockPagesMap} list={mockList} onSelect={vi.fn()} />)
 
     // Should show Root 1, Child 1, and Grandchild 1
-    // Should show Root 1, Child 1, and Grandchild 1
-    expect(screen.getByTestId('notion-page-name-root-1'))!.toBeInTheDocument()
-    expect(screen.getByTestId('notion-page-name-child-1'))!.toBeInTheDocument()
-    expect(screen.getByTestId('notion-page-name-grandchild-1'))!.toBeInTheDocument()
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
-    // Should not show Root 2, Child 2
+    expect(screen.getByTestId('notion-page-name-root-1')).toBeInTheDocument()
+    expect(screen.getByTestId('notion-page-name-child-1')).toBeInTheDocument()
+    expect(screen.getByTestId('notion-page-name-grandchild-1')).toBeInTheDocument()
     // Should not show Root 2, Child 2
     expect(screen.queryByTestId('notion-page-name-root-2')).not.toBeInTheDocument()
     expect(screen.queryByTestId('notion-page-name-child-2')).not.toBeInTheDocument()
@@ -346,7 +313,6 @@ describe('PageSelector', () => {
     await user.click(toggle)
 
     // Should expand even though parent is disabled
-    // Should expand even though parent is disabled
-    expect(screen.getByText('Child 1'))!.toBeInTheDocument()
+    expect(screen.getByText('Child 1')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
index 1499fc1d7f..a36403b898 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
@@ -23,7 +23,7 @@ export const PromptMenuItem = memo(({
       className={`
         flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
         ${isSelected && !disabled && 'bg-state-base-hover!'}
-        ${disabled ? 'cursor-not-allowed opacity-30' : ''}
+        ${disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer hover:bg-state-base-hover'}
       `}
       tabIndex={-1}
       ref={setRefElement}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component.spec.tsx
index ee82595d1c..f219f2f805 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component.spec.tsx
@@ -100,8 +100,8 @@ describe('HITLInputComponent', () => {
     await user.click(screen.getByRole('button', { name: 'emit-same-name' }))
 
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0]![0]).toHaveLength(1)
-    expect(onChange.mock.calls[0]![0][0].output_variable_name).toBe('user_name')
+    expect(onChange.mock.calls[0][0]).toHaveLength(1)
+    expect(onChange.mock.calls[0][0][0].output_variable_name).toBe('user_name')
   })
 
   it('should replace payload when variable name is renamed', async () => {
@@ -124,7 +124,7 @@ describe('HITLInputComponent', () => {
     await user.click(screen.getByRole('button', { name: 'emit-rename' }))
 
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0]![0][0].output_variable_name).toBe('renamed_name')
+    expect(onChange.mock.calls[0][0][0].output_variable_name).toBe('renamed_name')
   })
 
   it('should update existing payload when variable name stays the same', async () => {
@@ -157,9 +157,9 @@ describe('HITLInputComponent', () => {
     await user.click(screen.getByRole('button', { name: 'emit-update' }))
 
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0]![0][0].default.value).toBe('updated')
-    expect(onChange.mock.calls[0]![0][0].output_variable_name).toBe('user_name')
-    expect(onChange.mock.calls[0]![0][1].output_variable_name).toBe('other_name')
-    expect(onChange.mock.calls[0]![0][1].default.value).toBe('other')
+    expect(onChange.mock.calls[0][0][0].default.value).toBe('updated')
+    expect(onChange.mock.calls[0][0][0].output_variable_name).toBe('user_name')
+    expect(onChange.mock.calls[0][0][1].output_variable_name).toBe('other_name')
+    expect(onChange.mock.calls[0][0][1].default.value).toBe('other')
   })
 })
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx
index 990a7ced4a..f5efc52c23 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx
@@ -82,12 +82,12 @@ describe('PrePopulate', () => {
       />,
     )
 
-    expect(screen.getByText('Static Content'))!.toBeInTheDocument()
+    expect(screen.getByText('Static Content')).toBeInTheDocument()
 
     await user.keyboard('{Tab}')
 
     expect(screen.queryByText('Static Content')).not.toBeInTheDocument()
-    expect(screen.getByRole('textbox'))!.toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
 
   it('should update constant value and toggle to variable mode when type switch is clicked', async () => {
@@ -154,7 +154,7 @@ describe('PrePopulate', () => {
       />,
     )
 
-    const pickerProps = mockVarReferencePicker.mock.calls[0]![0] as VarReferencePickerProps
+    const pickerProps = mockVarReferencePicker.mock.calls[0][0] as VarReferencePickerProps
 
     const allowString = pickerProps.filterVar({ type: 'string' } as Var)
     const allowNumber = pickerProps.filterVar({ type: 'number' } as Var)
diff --git a/web/app/components/base/prompt-editor/plugins/query-block/component.tsx b/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
index cd5b60bc9b..a5b5969904 100644
--- a/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/query-block/component.tsx
@@ -17,7 +17,7 @@ const QueryBlockComponent: FC<QueryBlockComponentProps> = ({
   return (
     <div
       className={`
-        inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pr-0.5 pl-1 hover:bg-[#FFEAD5]
+        inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pl-1 pr-0.5 hover:bg-[#FFEAD5]
         ${isSelected && 'border-[#FD853A]!'}
       `}
       ref={ref}
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/component.spec.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/component.spec.tsx
index 804d4653ce..a6cb70ddb6 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/component.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/component.spec.tsx
@@ -129,7 +129,7 @@ describe('WorkflowVariableBlockComponent', () => {
       />,
     )
 
-    expect(screen.getByRole('button', { name: 'label' }))!.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'label' })).toBeInTheDocument()
     expect(mockHasNodes).toHaveBeenCalledWith([WorkflowVariableBlockNode])
     expect(mockRegisterCommand).toHaveBeenCalledWith(
       UPDATE_WORKFLOW_NODES_MAP,
@@ -188,7 +188,7 @@ describe('WorkflowVariableBlockComponent', () => {
       />,
     )
 
-    expect(screen.getByRole('button', { name: 'label' }))!.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'label' })).toBeInTheDocument()
   })
 
   it('should pass computed varType when getVarType is provided', () => {
@@ -489,7 +489,7 @@ describe('WorkflowVariableBlockComponent', () => {
       />,
     )
 
-    const updateHandler = mockRegisterCommand.mock.calls[0]![1] as (payload: UpdateWorkflowNodesMapPayload) => boolean
+    const updateHandler = mockRegisterCommand.mock.calls[0][1] as (payload: UpdateWorkflowNodesMapPayload) => boolean
     let result = false
     act(() => {
       result = updateHandler({
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx
index 20fc7c6e79..2d13627b20 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx
@@ -19,11 +19,11 @@ export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element>
   __getVarType?: GetVarType
   __availableVariables?: NodeOutPutVar[]
 
-  static override getType(): string {
+  static getType(): string {
     return 'workflow-variable-block'
   }
 
-  static override clone(node: WorkflowVariableBlockNode): WorkflowVariableBlockNode {
+  static clone(node: WorkflowVariableBlockNode): WorkflowVariableBlockNode {
     return new WorkflowVariableBlockNode(
       node.__variables,
       node.__workflowNodesMap,
@@ -33,7 +33,7 @@ export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element>
     )
   }
 
-  override isInline(): boolean {
+  isInline(): boolean {
     return true
   }
 
@@ -52,17 +52,17 @@ export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element>
     this.__availableVariables = availableVariables
   }
 
-  override createDOM(): HTMLElement {
+  createDOM(): HTMLElement {
     const div = document.createElement('div')
     div.classList.add('inline-flex', 'items-center', 'align-middle')
     return div
   }
 
-  override updateDOM(): false {
+  updateDOM(): false {
     return false
   }
 
-  override decorate(): React.JSX.Element {
+  decorate(): React.JSX.Element {
     return (
       <WorkflowVariableBlockComponent
         nodeKey={this.getKey()}
@@ -74,7 +74,7 @@ export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element>
     )
   }
 
-  static override importJSON(serializedNode: SerializedNode): WorkflowVariableBlockNode {
+  static importJSON(serializedNode: SerializedNode): WorkflowVariableBlockNode {
     const node = $createWorkflowVariableBlockNode(
       serializedNode.variables,
       serializedNode.workflowNodesMap,
@@ -85,7 +85,7 @@ export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element>
     return node
   }
 
-  override exportJSON(): SerializedNode {
+  exportJSON(): SerializedNode {
     const json: SerializedNode = {
       type: 'workflow-variable-block',
       version: 1,
@@ -119,7 +119,7 @@ export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element>
     return self.__availableVariables
   }
 
-  override getTextContent(): string {
+  getTextContent(): string {
     return `{{#${this.getVariables().join('.')}#}}`
   }
 }
diff --git a/web/app/components/base/prompt-log-modal/index.tsx b/web/app/components/base/prompt-log-modal/index.tsx
index 08200623ae..6a79dfffeb 100644
--- a/web/app/components/base/prompt-log-modal/index.tsx
+++ b/web/app/components/base/prompt-log-modal/index.tsx
@@ -42,13 +42,13 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
       }}
       ref={ref}
     >
-      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
+      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
         <div className="text-base font-semibold text-text-primary">PROMPT LOG</div>
         <div className="flex items-center">
           {
             currentLogItem.log?.length === 1 && (
               <>
-                <CopyFeedbackNew className="h-6 w-6" content={currentLogItem.log[0]!.text} />
+                <CopyFeedbackNew className="h-6 w-6" content={currentLogItem.log[0].text} />
                 <div className="mx-2.5 h-[14px] w-px bg-divider-regular" />
               </>
             )
diff --git a/web/app/components/base/select/locale-signin.tsx b/web/app/components/base/select/locale-signin.tsx
index 046a76a5d4..3c5dd999f6 100644
--- a/web/app/components/base/select/locale-signin.tsx
+++ b/web/app/components/base/select/locale-signin.tsx
@@ -36,7 +36,7 @@ export default function LocaleSigninSelect({
           leaveTo="transform opacity-0 scale-95"
         >
           <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg focus:outline-hidden">
-            <div className="max-h-96 overflow-y-auto mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)] px-1 py-1">
+            <div className="max-h-96 overflow-y-auto px-1 py-1 mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)]">
               {items.map((item) => {
                 return (
                   <MenuItem key={item.value}>
diff --git a/web/app/components/base/spinner/index.tsx b/web/app/components/base/spinner/index.tsx
index 48ee65b99f..65fea46a91 100644
--- a/web/app/components/base/spinner/index.tsx
+++ b/web/app/components/base/spinner/index.tsx
@@ -14,7 +14,7 @@ const Spinner: FC<Props> = ({ loading = false, children, className }) => {
       role="status"
     >
       <span
-        className="absolute! -m-px! h-px! w-px! overflow-hidden! border-0! p-0! whitespace-nowrap! [clip:rect(0,0,0,0)]!"
+        className="absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!"
       >
         Loading...
       </span>
diff --git a/web/app/components/base/tag-management/index.tsx b/web/app/components/base/tag-management/index.tsx
index 8e693fb9f1..79c557a8b9 100644
--- a/web/app/components/base/tag-management/index.tsx
+++ b/web/app/components/base/tag-management/index.tsx
@@ -48,8 +48,8 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
   }, [type])
   return (
     <Modal className="!w-[600px] !max-w-[600px] rounded-xl px-8 py-6" isShow={show} onClose={() => setShowTagManagementModal(false)}>
-      <div className="relative pb-2 text-xl leading-[30px] font-semibold text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
-      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
+      <div className="relative pb-2 text-xl font-semibold leading-[30px] text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
+      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
         <span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="tag-management-modal-close-button" />
       </div>
       <div className="mt-3 flex flex-wrap gap-2">
diff --git a/web/app/components/base/tag-management/panel.tsx b/web/app/components/base/tag-management/panel.tsx
index db0aae1b05..cceb09b4d7 100644
--- a/web/app/components/base/tag-management/panel.tsx
+++ b/web/app/components/base/tag-management/panel.tsx
@@ -114,7 +114,7 @@ const Panel = (props: PanelProps) => {
         <div className="p-1">
           <div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" data-testid="create-tag-option" onClick={createNewTag}>
             <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-            <div className="grow truncate px-1 system-md-regular text-text-secondary">
+            <div className="grow truncate px-1 text-text-secondary system-md-regular">
               {`${t('tag.create', { ns: 'common' })} `}
               <span className="system-md-medium">{`'${keywords}'`}</span>
             </div>
@@ -127,7 +127,7 @@ const Panel = (props: PanelProps) => {
           {filteredSelectedTagList.map(tag => (
             <div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
               <Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
-              <div title={tag.name} className="grow truncate px-1 system-md-regular text-text-secondary">
+              <div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
                 {tag.name}
               </div>
             </div>
@@ -135,7 +135,7 @@ const Panel = (props: PanelProps) => {
           {filteredTagList.map(tag => (
             <div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
               <Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
-              <div title={tag.name} className="grow truncate px-1 system-md-regular text-text-secondary">
+              <div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
                 {tag.name}
               </div>
             </div>
@@ -146,7 +146,7 @@ const Panel = (props: PanelProps) => {
         <div className="p-1">
           <div className="flex flex-col items-center gap-y-1 p-3">
             <span className="i-ri-price-tag-3-line h-6 w-6 text-text-quaternary" />
-            <div className="system-xs-regular text-text-tertiary">{t('tag.noTag', { ns: 'common' })}</div>
+            <div className="text-text-tertiary system-xs-regular">{t('tag.noTag', { ns: 'common' })}</div>
           </div>
         </div>
       )}
@@ -154,7 +154,7 @@ const Panel = (props: PanelProps) => {
       <div className="p-1">
         <div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => setShowTagManagementModal(true)}>
           <span className="i-ri-price-tag-3-line h-4 w-4 text-text-tertiary" />
-          <div className="grow truncate px-1 system-md-regular text-text-secondary">
+          <div className="grow truncate px-1 text-text-secondary system-md-regular">
             {t('tag.manageTags', { ns: 'common' })}
           </div>
         </div>
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
index a4b8888b27..0ae553ec01 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
@@ -98,10 +98,10 @@ describe('CloudPlanItem', () => {
         />,
       )
 
-      expect(screen.getByText('billing.plans.sandbox.name'))!.toBeInTheDocument()
-      expect(screen.getByText('billing.plans.sandbox.description'))!.toBeInTheDocument()
-      expect(screen.getByText('billing.plansCommon.free'))!.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' }))!.toBeInTheDocument()
+      expect(screen.getByText('billing.plans.sandbox.name')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.sandbox.description')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.free')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' })).toBeInTheDocument()
     })
 
     it('should display yearly pricing with discount when planRange is yearly', () => {
@@ -115,9 +115,9 @@ describe('CloudPlanItem', () => {
       )
 
       const professionalPlan = ALL_PLANS[Plan.professional]
-      expect(screen.getByText(`$${professionalPlan.price * 12}`))!.toBeInTheDocument()
-      expect(screen.getByText(`$${professionalPlan.price * 10}`))!.toBeInTheDocument()
-      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.year/))!.toBeInTheDocument()
+      expect(screen.getByText(`$${professionalPlan.price * 12}`)).toBeInTheDocument()
+      expect(screen.getByText(`$${professionalPlan.price * 10}`)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.year/)).toBeInTheDocument()
     })
 
     it('should show "most popular" badge for professional plan', () => {
@@ -130,7 +130,7 @@ describe('CloudPlanItem', () => {
         />,
       )
 
-      expect(screen.getByText('billing.plansCommon.mostPopular'))!.toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.mostPopular')).toBeInTheDocument()
     })
 
     it('should not show "most popular" badge for non-professional plans', () => {
@@ -157,7 +157,7 @@ describe('CloudPlanItem', () => {
       )
 
       const button = screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' })
-      expect(button)!.toBeDisabled()
+      expect(button).toBeDisabled()
     })
   })
 
@@ -176,7 +176,7 @@ describe('CloudPlanItem', () => {
       )
 
       fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' }))
-      expect(screen.getByText('billing.buyPermissionDeniedTip'))!.toBeInTheDocument()
+      expect(screen.getByText('billing.buyPermissionDeniedTip')).toBeInTheDocument()
       expect(mockBillingInvoices).not.toHaveBeenCalled()
     })
 
@@ -320,7 +320,7 @@ describe('CloudPlanItem', () => {
         expect(openWindow).toHaveBeenCalledTimes(1)
         // The onError callback should have been passed to openAsyncWindow
         const callArgs = openWindow.mock.calls[0]
-        expect(callArgs![1]).toHaveProperty('onError')
+        expect(callArgs[1]).toHaveProperty('onError')
       })
     })
 
@@ -336,39 +336,8 @@ describe('CloudPlanItem', () => {
       )
 
       const teamPlan = ALL_PLANS[Plan.team]
-      expect(screen.getByText(`$${teamPlan.price}`))!.toBeInTheDocument()
-      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.month/))!.toBeInTheDocument()
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
-      // Should NOT show crossed-out yearly price
+      expect(screen.getByText(`$${teamPlan.price}`)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.month/)).toBeInTheDocument()
       // Should NOT show crossed-out yearly price
       expect(screen.queryByText(`$${teamPlan.price * 12}`)).not.toBeInTheDocument()
     })
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
index 99d956ba90..b85f1d8631 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
@@ -103,38 +103,38 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
           {ICON_MAP[plan]}
           <div className="flex min-h-[104px] flex-col gap-y-2">
             <div className="flex items-center gap-x-2.5">
-              <div className="text-[30px] leading-[1.2] font-medium text-text-primary">{t(`${i18nPrefix}.name`, { ns: 'billing' })}</div>
+              <div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name`, { ns: 'billing' })}</div>
               {
                 isMostPopularPlan && (
                   <div className="flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1">
-                    <span className="system-2xs-semibold-uppercase text-text-primary-on-surface">
+                    <span className="text-text-primary-on-surface system-2xs-semibold-uppercase">
                       {t('plansCommon.mostPopular', { ns: 'billing' })}
                     </span>
                   </div>
                 )
               }
             </div>
-            <div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.description`, { ns: 'billing' })}</div>
+            <div className="text-text-secondary system-sm-regular">{t(`${i18nPrefix}.description`, { ns: 'billing' })}</div>
           </div>
         </div>
         {/* Price */}
-        <div className="flex items-end gap-x-2 px-1 pt-4 pb-8">
+        <div className="flex items-end gap-x-2 px-1 pb-8 pt-4">
           {isFreePlan && (
-            <span className="title-4xl-semi-bold text-text-primary">{t('plansCommon.free', { ns: 'billing' })}</span>
+            <span className="text-text-primary title-4xl-semi-bold">{t('plansCommon.free', { ns: 'billing' })}</span>
           )}
           {!isFreePlan && (
             <>
               {isYear && (
-                <span className="title-4xl-semi-bold text-text-quaternary line-through">
+                <span className="text-text-quaternary line-through title-4xl-semi-bold">
                   $
                   {planInfo.price * 12}
                 </span>
               )}
-              <span className="title-4xl-semi-bold text-text-primary">
+              <span className="text-text-primary title-4xl-semi-bold">
                 $
                 {isYear ? planInfo.price * 10 : planInfo.price}
               </span>
-              <span className="pb-0.5 system-md-regular text-text-tertiary">
+              <span className="pb-0.5 text-text-tertiary system-md-regular">
                 {t('plansCommon.priceTip', { ns: 'billing' })}
                 {t(`plansCommon.${!isYear ? 'month' : 'year'}`, { ns: 'billing' })}
               </span>
diff --git a/web/app/components/billing/snippet-and-evaluation-plan-guard.tsx b/web/app/components/billing/snippet-and-evaluation-plan-guard.tsx
new file mode 100644
index 0000000000..39ed41a348
--- /dev/null
+++ b/web/app/components/billing/snippet-and-evaluation-plan-guard.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import Loading from '@/app/components/base/loading'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
+import { useRouter } from '@/next/navigation'
+
+type SnippetAndEvaluationPlanGuardProps = {
+  children: ReactNode
+  fallbackHref: string
+}
+
+const SnippetAndEvaluationPlanGuard = ({
+  children,
+  fallbackHref,
+}: SnippetAndEvaluationPlanGuardProps) => {
+  const router = useRouter()
+  const { canAccess, isReady } = useSnippetAndEvaluationPlanAccess()
+
+  useEffect(() => {
+    if (isReady && !canAccess)
+      router.replace(fallbackHref)
+  }, [canAccess, fallbackHref, isReady, router])
+
+  if (!isReady) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background-body">
+        <Loading />
+      </div>
+    )
+  }
+
+  if (!canAccess)
+    return null
+
+  return <>{children}</>
+}
+
+export default SnippetAndEvaluationPlanGuard
diff --git a/web/app/components/billing/utils/index.ts b/web/app/components/billing/utils/index.ts
index 2d37eecbd5..c61ed2b54d 100644
--- a/web/app/components/billing/utils/index.ts
+++ b/web/app/components/billing/utils/index.ts
@@ -1,6 +1,7 @@
 import type { BasicPlan, BillingQuota, CurrentPlanInfoBackend } from '../type'
 import dayjs from 'dayjs'
 import { ALL_PLANS, NUM_INFINITE } from '@/app/components/billing/config'
+import { Plan } from '../type'
 
 /**
  * Parse vectorSpace string from ALL_PLANS config and convert to MB
@@ -116,3 +117,21 @@ export const parseCurrentPlan = (data: CurrentPlanInfoBackend) => {
     },
   }
 }
+
+export const canAccessSnippetsAndEvaluation = ({
+  enableBilling,
+  isFetchedPlan,
+  planType,
+}: {
+  enableBilling: boolean
+  isFetchedPlan: boolean
+  planType: Plan
+}) => {
+  if (!isFetchedPlan)
+    return !enableBilling
+
+  if (!enableBilling)
+    return true
+
+  return planType === Plan.professional || planType === Plan.team || planType === Plan.enterprise
+}
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index 2cc51a3be5..f899dcb33d 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -137,7 +137,7 @@ const ImagePreviewer = ({
       return {
         ...prev,
         [image.url]: {
-          ...prev[image.url]!,
+          ...prev[image.url],
           status: 'loading',
         },
       }
@@ -168,15 +168,15 @@ const ImagePreviewer = ({
           Esc
         </span>
       </div>
-      {cachedImages[currentImage!.url]!.status === 'loading' && (
+      {cachedImages[currentImage.url].status === 'loading' && (
         <Loading type="app" />
       )}
-      {cachedImages[currentImage!.url]!.status === 'error' && (
+      {cachedImages[currentImage.url].status === 'error' && (
         <div className="flex max-w-sm flex-col items-center gap-y-2 system-sm-regular text-text-tertiary">
-          <span>{`Failed to load image: ${currentImage!.url}. Please try again.`}</span>
+          <span>{`Failed to load image: ${currentImage.url}. Please try again.`}</span>
           <Button
             variant="secondary"
-            onClick={() => retryImage(currentImage!)}
+            onClick={() => retryImage(currentImage)}
             className="size-9 rounded-full p-0"
             size="large"
           >
@@ -184,19 +184,19 @@ const ImagePreviewer = ({
           </Button>
         </div>
       )}
-      {cachedImages[currentImage!.url]!.status === 'loaded' && (
+      {cachedImages[currentImage.url].status === 'loaded' && (
         <div className="flex size-full flex-col items-center justify-center gap-y-2">
           <img
-            alt={currentImage!.name}
-            src={cachedImages[currentImage!.url]!.blobUrl}
+            alt={currentImage.name}
+            src={cachedImages[currentImage.url].blobUrl}
             className="max-h-[calc(100%-2.5rem)] max-w-full object-contain shadow-lg ring-8 ring-effects-image-frame backdrop-blur-[5px]"
           />
           <div className="flex shrink-0 gap-x-2 pt-3 pb-1 system-sm-regular text-text-tertiary">
-            <span>{currentImage!.name}</span>
+            <span>{currentImage.name}</span>
             <span>·</span>
-            <span>{`${cachedImages[currentImage!.url]!.width} ×  ${cachedImages[currentImage!.url]!.height}`}</span>
+            <span>{`${cachedImages[currentImage.url].width} ×  ${cachedImages[currentImage.url].height}`}</span>
             <span>·</span>
-            <span>{formatFileSize(currentImage!.size)}</span>
+            <span>{formatFileSize(currentImage.size)}</span>
           </div>
         </div>
       )}
diff --git a/web/app/components/datasets/create/step-one/upgrade-card.tsx b/web/app/components/datasets/create/step-one/upgrade-card.tsx
index e7016206ea..356e15ed43 100644
--- a/web/app/components/datasets/create/step-one/upgrade-card.tsx
+++ b/web/app/components/datasets/create/step-one/upgrade-card.tsx
@@ -15,9 +15,9 @@ const UpgradeCard: FC = () => {
   }, [setShowPricingModal])
 
   return (
-    <div className="flex items-center justify-between rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-3 pr-3.5 pl-4 shadow-xs backdrop-blur-[5px]">
+    <div className="flex items-center justify-between rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-3 pl-4 pr-3.5 shadow-xs backdrop-blur-[5px] ">
       <div>
-        <div className="bg-[linear-gradient(92deg,var(--components-input-border-active-prompt-1,#0BA5EC)_0%,var(--components-input-border-active-prompt-2,#155AEF)_99.21%)] bg-clip-text title-md-semi-bold text-transparent">{t('upgrade.uploadMultipleFiles.title', { ns: 'billing' })}</div>
+        <div className="title-md-semi-bold bg-[linear-gradient(92deg,var(--components-input-border-active-prompt-1,#0BA5EC)_0%,var(--components-input-border-active-prompt-2,#155AEF)_99.21%)] bg-clip-text text-transparent">{t('upgrade.uploadMultipleFiles.title', { ns: 'billing' })}</div>
         <div className="system-xs-regular text-text-tertiary">{t('upgrade.uploadMultipleFiles.description', { ns: 'billing' })}</div>
       </div>
       <UpgradeBtn
diff --git a/web/app/components/datasets/create/step-two/__tests__/index.spec.tsx b/web/app/components/datasets/create/step-two/__tests__/index.spec.tsx
index a5318430be..86e8ec2ab5 100644
--- a/web/app/components/datasets/create/step-two/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/step-two/__tests__/index.spec.tsx
@@ -1717,23 +1717,22 @@ describe('StepTwoFooter', () => {
       render(<StepTwoFooter {...defaultProps} />)
 
       // Should render Previous and Next buttons with correct text
-      // Should render Previous and Next buttons with correct text
-      expect(screen.getByText(/previousStep/i))!.toBeInTheDocument()
-      expect(screen.getByText(/nextStep/i))!.toBeInTheDocument()
+      expect(screen.getByText(/previousStep/i)).toBeInTheDocument()
+      expect(screen.getByText(/nextStep/i)).toBeInTheDocument()
     })
 
     it('should render Previous and Next buttons when not in setting mode', () => {
       render(<StepTwoFooter {...defaultProps} />)
 
-      expect(screen.getByText(/previousStep/i))!.toBeInTheDocument()
-      expect(screen.getByText(/nextStep/i))!.toBeInTheDocument()
+      expect(screen.getByText(/previousStep/i)).toBeInTheDocument()
+      expect(screen.getByText(/nextStep/i)).toBeInTheDocument()
     })
 
     it('should render Save and Cancel buttons when in setting mode', () => {
       render(<StepTwoFooter {...defaultProps} isSetting={true} />)
 
-      expect(screen.getByText(/save/i))!.toBeInTheDocument()
-      expect(screen.getByText(/cancel/i))!.toBeInTheDocument()
+      expect(screen.getByText(/save/i)).toBeInTheDocument()
+      expect(screen.getByText(/cancel/i)).toBeInTheDocument()
     })
   })
 
@@ -1773,14 +1772,14 @@ describe('StepTwoFooter', () => {
       render(<StepTwoFooter {...defaultProps} isCreating={true} />)
 
       const nextButton = screen.getByText(/nextStep/i).closest('button')
-      expect(nextButton)!.toBeDisabled()
+      expect(nextButton).toBeDisabled()
     })
 
     it('should show loading state on Save button when creating in setting mode', () => {
       render(<StepTwoFooter {...defaultProps} isSetting={true} isCreating={true} />)
 
       const saveButton = screen.getByText(/save/i).closest('button')
-      expect(saveButton)!.toBeDisabled()
+      expect(saveButton).toBeDisabled()
     })
   })
 })
@@ -1812,50 +1811,18 @@ describe('PreviewPanel', () => {
       render(<PreviewPanel {...defaultProps} />)
 
       // Check for the preview header title text
-      // Check for the preview header title text
-      expect(screen.getByText('datasetCreation.stepTwo.preview'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.preview')).toBeInTheDocument()
     })
 
     it('should render idle state when isIdle is true', () => {
       render(<PreviewPanel {...defaultProps} isIdle={true} />)
 
-      expect(screen.getByText(/previewChunkTip/i))!.toBeInTheDocument()
+      expect(screen.getByText(/previewChunkTip/i)).toBeInTheDocument()
     })
 
     it('should render loading skeleton when isPending is true', () => {
       render(<PreviewPanel {...defaultProps} isIdle={false} isPending={true} />)
 
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
-      // Should show skeleton containers
       // Should show skeleton containers
       expect(screen.queryByText(/previewChunkTip/i)).not.toBeInTheDocument()
     })
@@ -1874,7 +1841,7 @@ describe('PreviewPanel', () => {
         />,
       )
 
-      expect(screen.getByText('Chunk 1 content'))!.toBeInTheDocument()
+      expect(screen.getByText('Chunk 1 content')).toBeInTheDocument()
     })
 
     it('should render QA preview when docForm is qa', () => {
@@ -1888,8 +1855,8 @@ describe('PreviewPanel', () => {
         />,
       )
 
-      expect(screen.getByText('Q1'))!.toBeInTheDocument()
-      expect(screen.getByText('A1'))!.toBeInTheDocument()
+      expect(screen.getByText('Q1')).toBeInTheDocument()
+      expect(screen.getByText('A1')).toBeInTheDocument()
     })
 
     it('should show chunk count badge for non-QA doc form', () => {
@@ -1903,7 +1870,7 @@ describe('PreviewPanel', () => {
         />,
       )
 
-      expect(screen.getByText(/25/))!.toBeInTheDocument()
+      expect(screen.getByText(/25/)).toBeInTheDocument()
     })
 
     it('should render parent-child preview when docForm is parentChild', () => {
@@ -1926,13 +1893,11 @@ describe('PreviewPanel', () => {
       )
 
       // Should render parent chunk label
-      // Should render parent chunk label
-      expect(screen.getByText('Chunk-1'))!.toBeInTheDocument()
+      expect(screen.getByText('Chunk-1')).toBeInTheDocument()
       // Should render child chunks
-      // Should render child chunks
-      expect(screen.getByText('Child 1'))!.toBeInTheDocument()
-      expect(screen.getByText('Child 2'))!.toBeInTheDocument()
-      expect(screen.getByText('Child 3'))!.toBeInTheDocument()
+      expect(screen.getByText('Child 1')).toBeInTheDocument()
+      expect(screen.getByText('Child 2')).toBeInTheDocument()
+      expect(screen.getByText('Child 3')).toBeInTheDocument()
     })
 
     it('should limit child chunks when chunkForContext is full-doc', () => {
@@ -1955,43 +1920,10 @@ describe('PreviewPanel', () => {
       )
 
       // Should render parent chunk
-      // Should render parent chunk
-      expect(screen.getByText('Chunk-1'))!.toBeInTheDocument()
+      expect(screen.getByText('Chunk-1')).toBeInTheDocument()
       // full-doc mode limits to FULL_DOC_PREVIEW_LENGTH (50)
-      // full-doc mode limits to FULL_DOC_PREVIEW_LENGTH (50)
-      expect(screen.getByText('ChildChunk1'))!.toBeInTheDocument()
-      expect(screen.getByText('ChildChunk50'))!.toBeInTheDocument()
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
-      // Should not render beyond the limit
+      expect(screen.getByText('ChildChunk1')).toBeInTheDocument()
+      expect(screen.getByText('ChildChunk50')).toBeInTheDocument()
       // Should not render beyond the limit
       expect(screen.queryByText('ChildChunk51')).not.toBeInTheDocument()
     })
@@ -2012,10 +1944,10 @@ describe('PreviewPanel', () => {
         />,
       )
 
-      expect(screen.getByText('Chunk-1'))!.toBeInTheDocument()
-      expect(screen.getByText('Chunk-2'))!.toBeInTheDocument()
-      expect(screen.getByText('P1-C1'))!.toBeInTheDocument()
-      expect(screen.getByText('P2-C1'))!.toBeInTheDocument()
+      expect(screen.getByText('Chunk-1')).toBeInTheDocument()
+      expect(screen.getByText('Chunk-2')).toBeInTheDocument()
+      expect(screen.getByText('P1-C1')).toBeInTheDocument()
+      expect(screen.getByText('P2-C1')).toBeInTheDocument()
     })
   })
 
@@ -2290,20 +2222,19 @@ describe('StepTwo Component', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
-      expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
     })
 
     it('should show general chunking options when not in upload', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // Should render the segmentation section
-      // Should render the segmentation section
-      expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
     })
 
     it('should show footer with Previous and Next buttons', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
-      expect(screen.getByText(/stepTwo\.previousStep/i))!.toBeInTheDocument()
-      expect(screen.getByText(/stepTwo\.nextStep/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.previousStep/i)).toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.nextStep/i)).toBeInTheDocument()
     })
   })
 
@@ -2351,7 +2282,7 @@ describe('StepTwo Component', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // GeneralChunkingOptions renders a "Preview Chunk" button
       const previewButtons = screen.getAllByText(/stepTwo\.previewChunk/i)
-      fireEvent.click(previewButtons[0]!)
+      fireEvent.click(previewButtons[0])
       // updatePreview calls estimateHook.fetchEstimate()
       // No error means the handler executed successfully
     })
@@ -2361,7 +2292,7 @@ describe('StepTwo Component', () => {
       // ParentChildOptions renders an OptionCard; find the title element and click its parent card
       const parentChildTitles = screen.getAllByText(/stepTwo\.parentChild/i)
       // The first match is the title; click it to trigger onDocFormChange
-      fireEvent.click(parentChildTitles[0]!)
+      fireEvent.click(parentChildTitles[0])
       // handleDocFormChange sets docForm, segmentationType, and resets estimate
     })
   })
@@ -2376,8 +2307,7 @@ describe('StepTwo Component', () => {
         />,
       )
       // When currentDataset has parentChild doc_form, should show parent-child option
-      // When currentDataset has parentChild doc_form, should show parent-child option
-      expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
     })
 
     it('should render setting mode with Save/Cancel buttons', () => {
@@ -2390,8 +2320,8 @@ describe('StepTwo Component', () => {
           datasetId="test-id"
         />,
       )
-      expect(screen.getByText(/stepTwo\.save/i))!.toBeInTheDocument()
-      expect(screen.getByText(/stepTwo\.cancel/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.save/i)).toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.cancel/i)).toBeInTheDocument()
     })
 
     it('should call onCancel when Cancel button is clicked in setting mode', () => {
@@ -2432,9 +2362,8 @@ describe('StepTwo Component', () => {
     it('should show both general and parent-child options in create page', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // When isInInit (no datasetId, no isSetting), both options should show
-      // When isInInit (no datasetId, no isSetting), both options should show
-      expect(screen.getByText('datasetCreation.stepTwo.general'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepTwo.parentChild'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.general')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.parentChild')).toBeInTheDocument()
     })
 
     it('should only show parent-child option when dataset has parentChild doc_form', () => {
@@ -2447,9 +2376,7 @@ describe('StepTwo Component', () => {
       )
       // showGeneralOption should be false (parentChild not in [text, qa])
       // showParentChildOption should be true
-      // showGeneralOption should be false (parentChild not in [text, qa])
-      // showParentChildOption should be true
-      expect(screen.getByText('datasetCreation.stepTwo.parentChild'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.parentChild')).toBeInTheDocument()
     })
 
     it('should show general option only when dataset has text doc_form', () => {
@@ -2461,8 +2388,7 @@ describe('StepTwo Component', () => {
         />,
       )
       // showGeneralOption should be true (text is in [text, qa])
-      // showGeneralOption should be true (text is in [text, qa])
-      expect(screen.getByText('datasetCreation.stepTwo.general'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.general')).toBeInTheDocument()
     })
   })
 
@@ -2475,7 +2401,7 @@ describe('StepTwo Component', () => {
           datasetId="test-id"
         />,
       )
-      expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
     })
 
     it('should show general option for empty dataset (no doc_form)', () => {
@@ -2487,7 +2413,7 @@ describe('StepTwo Component', () => {
           datasetId="test-id"
         />,
       )
-      expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
     })
 
     it('should show both options in empty dataset upload', () => {
@@ -2500,9 +2426,8 @@ describe('StepTwo Component', () => {
         />,
       )
       // isUploadInEmptyDataset=true shows both options
-      // isUploadInEmptyDataset=true shows both options
-      expect(screen.getByText('datasetCreation.stepTwo.general'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepTwo.parentChild'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.general')).toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.parentChild')).toBeInTheDocument()
     })
   })
 
@@ -2510,22 +2435,19 @@ describe('StepTwo Component', () => {
     it('should render indexing mode section', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // IndexingModeSection renders the index mode title
-      // IndexingModeSection renders the index mode title
-      expect(screen.getByText(/stepTwo\.indexMode/i))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.indexMode/i)).toBeInTheDocument()
     })
 
     it('should render embedding model selector when QUALIFIED', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // ModelSelector is mocked and rendered with data-testid
-      // ModelSelector is mocked and rendered with data-testid
-      expect(screen.getByTestId('model-selector'))!.toBeInTheDocument()
+      expect(screen.getByTestId('model-selector')).toBeInTheDocument()
     })
 
     it('should render retrieval method config', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // RetrievalMethodConfig is mocked with data-testid
-      // RetrievalMethodConfig is mocked with data-testid
-      expect(screen.getByTestId('retrieval-method-config'))!.toBeInTheDocument()
+      expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
     })
 
     it('should disable model and retrieval config when datasetId has existing data source', () => {
@@ -2538,14 +2460,14 @@ describe('StepTwo Component', () => {
       )
       // isModelAndRetrievalConfigDisabled should be true
       const modelSelector = screen.getByTestId('model-selector')
-      expect(modelSelector)!.toHaveAttribute('data-readonly', 'true')
+      expect(modelSelector).toHaveAttribute('data-readonly', 'true')
     })
   })
 
   describe('Preview Panel', () => {
     it('should render preview panel', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
-      expect(screen.getByText('datasetCreation.stepTwo.preview'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.preview')).toBeInTheDocument()
     })
 
     it('should hide document picker in setting mode', () => {
@@ -2559,8 +2481,7 @@ describe('StepTwo Component', () => {
         />,
       )
       // Preview panel should still render
-      // Preview panel should still render
-      expect(screen.getByText('datasetCreation.stepTwo.preview'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetCreation.stepTwo.preview')).toBeInTheDocument()
     })
   })
 
@@ -2577,35 +2498,35 @@ describe('StepTwo Component', () => {
     it('should switch to QUALIFIED when selecting parentChild in ECONOMICAL mode', async () => {
       render(<StepTwo {...defaultStepTwoProps} isAPIKeySet={false} />)
       await vi.waitFor(() => {
-        expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+        expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
       })
       const parentChildTitles = screen.getAllByText(/stepTwo\.parentChild/i)
-      fireEvent.click(parentChildTitles[0]!)
+      fireEvent.click(parentChildTitles[0])
     })
 
     it('should open QA confirm dialog and confirm switch when QA selected in ECONOMICAL mode', async () => {
       render(<StepTwo {...defaultStepTwoProps} isAPIKeySet={false} />)
       await vi.waitFor(() => {
-        expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+        expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
       })
       const qaCheckbox = screen.getByText(/stepTwo\.useQALanguage/i)
       fireEvent.click(qaCheckbox)
       // Dialog should open → click Switch to confirm (triggers handleQAConfirm)
       const switchButton = await screen.findByText(/stepTwo\.switch/i)
-      expect(switchButton)!.toBeInTheDocument()
+      expect(switchButton).toBeInTheDocument()
       fireEvent.click(switchButton)
     })
 
     it('should close QA confirm dialog when cancel is clicked', async () => {
       render(<StepTwo {...defaultStepTwoProps} isAPIKeySet={false} />)
       await vi.waitFor(() => {
-        expect(screen.getByText(/stepTwo\.segmentation/i))!.toBeInTheDocument()
+        expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
       })
       // Open QA confirm dialog
       const qaCheckbox = screen.getByText(/stepTwo\.useQALanguage/i)
       fireEvent.click(qaCheckbox)
       const dialogCancelButtons = await screen.findAllByText(/stepTwo\.cancel/i)
-      fireEvent.click(dialogCancelButtons[0]!)
+      fireEvent.click(dialogCancelButtons[0])
     })
 
     it('should handle picker change when selecting a different file', () => {
@@ -2624,7 +2545,7 @@ describe('StepTwo Component', () => {
       render(<StepTwo {...defaultStepTwoProps} />)
       // The default maxChunkLength (1024) now exceeds the limit (100)
       const previewButtons = screen.getAllByText(/stepTwo\.previewChunk/i)
-      fireEvent.click(previewButtons[0]!)
+      fireEvent.click(previewButtons[0])
       // Restore
       document.body.removeAttribute('data-public-indexing-max-segmentation-tokens-length')
     })
diff --git a/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx b/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx
index f1ab5392ce..2c0480e508 100644
--- a/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx
+++ b/web/app/components/datasets/create/step-two/components/__tests__/inputs.spec.tsx
@@ -12,27 +12,26 @@ describe('DelimiterInput', () => {
 
   it('should render separator label', () => {
     render(<DelimiterInput />)
-    expect(screen.getByText(`${ns}.stepTwo.separator`))!.toBeInTheDocument()
+    expect(screen.getByText(`${ns}.stepTwo.separator`)).toBeInTheDocument()
   })
 
   it('should render text input with placeholder', () => {
     render(<DelimiterInput />)
     const input = screen.getByPlaceholderText(`${ns}.stepTwo.separatorPlaceholder`)
-    expect(input)!.toBeInTheDocument()
-    expect(input)!.toHaveAttribute('type', 'text')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'text')
   })
 
   it('should pass through value and onChange props', () => {
     const onChange = vi.fn()
     render(<DelimiterInput value="test-val" onChange={onChange} />)
-    expect(screen.getByDisplayValue('test-val'))!.toBeInTheDocument()
+    expect(screen.getByDisplayValue('test-val')).toBeInTheDocument()
   })
 
   it('should render tooltip content', () => {
     render(<DelimiterInput />)
     // Tooltip triggers render; component mounts without error
-    // Tooltip triggers render; component mounts without error
-    expect(screen.getByText(`${ns}.stepTwo.separator`))!.toBeInTheDocument()
+    expect(screen.getByText(`${ns}.stepTwo.separator`)).toBeInTheDocument()
   })
 
   it('should suppress onChange during IME composition', () => {
@@ -48,7 +47,7 @@ describe('DelimiterInput', () => {
 
     fireEvent.compositionEnd(input)
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0]![0].target.value).toBe(finalValue)
+    expect(onChange.mock.calls[0][0].target.value).toBe(finalValue)
   })
 })
 
@@ -59,24 +58,24 @@ describe('MaxLengthInput', () => {
 
   it('should render max length label', () => {
     render(<MaxLengthInput onChange={vi.fn()} />)
-    expect(screen.getByText(`${ns}.stepTwo.maxLength`))!.toBeInTheDocument()
+    expect(screen.getByText(`${ns}.stepTwo.maxLength`)).toBeInTheDocument()
   })
 
   it('should render number input', () => {
     render(<MaxLengthInput onChange={vi.fn()} />)
     const input = screen.getByRole('textbox')
-    expect(input)!.toBeInTheDocument()
+    expect(input).toBeInTheDocument()
   })
 
   it('should accept value prop', () => {
     render(<MaxLengthInput value={500} onChange={vi.fn()} />)
-    expect(screen.getByRole('textbox'))!.toHaveValue('500')
+    expect(screen.getByRole('textbox')).toHaveValue('500')
   })
 
   it('should have min of 1', () => {
     render(<MaxLengthInput onChange={vi.fn()} />)
     const input = screen.getByRole('textbox')
-    expect(input)!.toBeInTheDocument()
+    expect(input).toBeInTheDocument()
   })
 
   it('should reset to the minimum when users clear the value', () => {
@@ -108,18 +107,18 @@ describe('OverlapInput', () => {
   it('should render number input', () => {
     render(<OverlapInput onChange={vi.fn()} />)
     const input = screen.getByRole('textbox')
-    expect(input)!.toBeInTheDocument()
+    expect(input).toBeInTheDocument()
   })
 
   it('should accept value prop', () => {
     render(<OverlapInput value={50} onChange={vi.fn()} />)
-    expect(screen.getByRole('textbox'))!.toHaveValue('50')
+    expect(screen.getByRole('textbox')).toHaveValue('50')
   })
 
   it('should have min of 1', () => {
     render(<OverlapInput onChange={vi.fn()} />)
     const input = screen.getByRole('textbox')
-    expect(input)!.toBeInTheDocument()
+    expect(input).toBeInTheDocument()
   })
 
   it('should reset to the minimum when users clear the value', () => {
diff --git a/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx b/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx
index 946c04aa93..313ad9c051 100644
--- a/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx
@@ -35,10 +35,9 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       // Check that key elements are rendered
-      // Check that key elements are rendered
-      expect(screen.getByText(/crawlSubPage/i))!.toBeInTheDocument()
-      expect(screen.getByText(/limit/i))!.toBeInTheDocument()
-      expect(screen.getByText(/maxDepth/i))!.toBeInTheDocument()
+      expect(screen.getByText(/crawlSubPage/i)).toBeInTheDocument()
+      expect(screen.getByText(/limit/i)).toBeInTheDocument()
+      expect(screen.getByText(/maxDepth/i)).toBeInTheDocument()
     })
 
     it('should render all form fields', () => {
@@ -46,16 +45,14 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       // Checkboxes
-      // Checkboxes
-      expect(screen.getByText(/crawlSubPage/i))!.toBeInTheDocument()
-      expect(screen.getByText(/extractOnlyMainContent/i))!.toBeInTheDocument()
+      expect(screen.getByText(/crawlSubPage/i)).toBeInTheDocument()
+      expect(screen.getByText(/extractOnlyMainContent/i)).toBeInTheDocument()
 
       // Text/Number fields
-      // Text/Number fields
-      expect(screen.getByText(/limit/i))!.toBeInTheDocument()
-      expect(screen.getByText(/maxDepth/i))!.toBeInTheDocument()
-      expect(screen.getByText(/excludePaths/i))!.toBeInTheDocument()
-      expect(screen.getByText(/includeOnlyPaths/i))!.toBeInTheDocument()
+      expect(screen.getByText(/limit/i)).toBeInTheDocument()
+      expect(screen.getByText(/maxDepth/i)).toBeInTheDocument()
+      expect(screen.getByText(/excludePaths/i)).toBeInTheDocument()
+      expect(screen.getByText(/includeOnlyPaths/i)).toBeInTheDocument()
     })
 
     it('should render with custom className', () => {
@@ -65,7 +62,7 @@ describe('Options', () => {
       )
 
       const rootElement = container.firstChild as HTMLElement
-      expect(rootElement)!.toHaveClass('custom-class')
+      expect(rootElement).toHaveClass('custom-class')
     })
 
     it('should render limit field with required indicator', () => {
@@ -74,7 +71,7 @@ describe('Options', () => {
 
       // Limit field should have required indicator (*)
       const requiredIndicator = screen.getByText('*')
-      expect(requiredIndicator)!.toBeInTheDocument()
+      expect(requiredIndicator).toBeInTheDocument()
     })
 
     it('should render placeholder for excludes field', () => {
@@ -82,7 +79,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const excludesInput = screen.getByPlaceholderText('blog/*, /about/*')
-      expect(excludesInput)!.toBeInTheDocument()
+      expect(excludesInput).toBeInTheDocument()
     })
 
     it('should render placeholder for includes field', () => {
@@ -90,7 +87,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const includesInput = screen.getByPlaceholderText('articles/*')
-      expect(includesInput)!.toBeInTheDocument()
+      expect(includesInput).toBeInTheDocument()
     })
 
     it('should render two checkboxes', () => {
@@ -109,8 +106,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       // First checkbox should have check icon when checked
-      // First checkbox should have check icon when checked
-      expect(screen.queryByTestId('check-icon-crawl-sub-page'))!.toBeInTheDocument()
+      expect(screen.queryByTestId('check-icon-crawl-sub-page')).toBeInTheDocument()
     })
 
     it('should display crawl_sub_pages checkbox without check icon when false', () => {
@@ -122,7 +118,7 @@ describe('Options', () => {
     it('should display only_main_content checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ only_main_content: true })
       render(<Options payload={payload} onChange={mockOnChange} />)
-      expect(screen.getByTestId('check-icon-only-main-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('check-icon-only-main-content')).toBeInTheDocument()
     })
 
     it('should display only_main_content checkbox without check icon when false', () => {
@@ -136,7 +132,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const limitInput = screen.getByDisplayValue('25')
-      expect(limitInput)!.toBeInTheDocument()
+      expect(limitInput).toBeInTheDocument()
     })
 
     it('should display max_depth value in input', () => {
@@ -144,7 +140,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const maxDepthInput = screen.getByDisplayValue('5')
-      expect(maxDepthInput)!.toBeInTheDocument()
+      expect(maxDepthInput).toBeInTheDocument()
     })
 
     it('should display excludes value in input', () => {
@@ -152,7 +148,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const excludesInput = screen.getByDisplayValue('test/*')
-      expect(excludesInput)!.toBeInTheDocument()
+      expect(excludesInput).toBeInTheDocument()
     })
 
     it('should display includes value in input', () => {
@@ -160,7 +156,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const includesInput = screen.getByDisplayValue('docs/*')
-      expect(includesInput)!.toBeInTheDocument()
+      expect(includesInput).toBeInTheDocument()
     })
   })
 
@@ -170,7 +166,7 @@ describe('Options', () => {
       const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
 
       const checkboxes = getCheckboxes(container)
-      fireEvent.click(checkboxes[0]!)
+      fireEvent.click(checkboxes[0])
 
       expect(mockOnChange).toHaveBeenCalledWith({
         ...payload,
@@ -183,7 +179,7 @@ describe('Options', () => {
       const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
 
       const checkboxes = getCheckboxes(container)
-      fireEvent.click(checkboxes[1]!)
+      fireEvent.click(checkboxes[1])
 
       expect(mockOnChange).toHaveBeenCalledWith({
         ...payload,
@@ -255,8 +251,7 @@ describe('Options', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       // Component should render without crashing
-      // Component should render without crashing
-      expect(screen.getByText(/limit/i))!.toBeInTheDocument()
+      expect(screen.getByText(/limit/i)).toBeInTheDocument()
     })
 
     it('should handle zero values', () => {
@@ -278,8 +273,8 @@ describe('Options', () => {
       })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByDisplayValue('9999'))!.toBeInTheDocument()
-      expect(screen.getByDisplayValue('100'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('9999')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('100')).toBeInTheDocument()
     })
 
     it('should handle special characters in text fields', () => {
@@ -289,8 +284,8 @@ describe('Options', () => {
       })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByDisplayValue('path/*/file?query=1&param=2'))!.toBeInTheDocument()
-      expect(screen.getByDisplayValue('docs/**/*.md'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('path/*/file?query=1&param=2')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('docs/**/*.md')).toBeInTheDocument()
     })
 
     it('should preserve other payload fields when updating one field', () => {
@@ -362,7 +357,7 @@ describe('Options', () => {
 
       rerender(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByText(/limit/i))!.toBeInTheDocument()
+      expect(screen.getByText(/limit/i)).toBeInTheDocument()
     })
 
     it('should re-render when payload changes', () => {
@@ -370,10 +365,10 @@ describe('Options', () => {
       const payload2 = createMockCrawlOptions({ limit: 20 })
 
       const { rerender } = render(<Options payload={payload1} onChange={mockOnChange} />)
-      expect(screen.getByDisplayValue('10'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('10')).toBeInTheDocument()
 
       rerender(<Options payload={payload2} onChange={mockOnChange} />)
-      expect(screen.getByDisplayValue('20'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('20')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx b/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx
index b65df109ad..bda01dc152 100644
--- a/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx
@@ -34,12 +34,12 @@ describe('Options (watercrawl)', () => {
       const payload = createMockCrawlOptions()
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByText(/crawlSubPage/i))!.toBeInTheDocument()
-      expect(screen.getByText(/extractOnlyMainContent/i))!.toBeInTheDocument()
-      expect(screen.getByText(/limit/i))!.toBeInTheDocument()
-      expect(screen.getByText(/maxDepth/i))!.toBeInTheDocument()
-      expect(screen.getByText(/excludePaths/i))!.toBeInTheDocument()
-      expect(screen.getByText(/includeOnlyPaths/i))!.toBeInTheDocument()
+      expect(screen.getByText(/crawlSubPage/i)).toBeInTheDocument()
+      expect(screen.getByText(/extractOnlyMainContent/i)).toBeInTheDocument()
+      expect(screen.getByText(/limit/i)).toBeInTheDocument()
+      expect(screen.getByText(/maxDepth/i)).toBeInTheDocument()
+      expect(screen.getByText(/excludePaths/i)).toBeInTheDocument()
+      expect(screen.getByText(/includeOnlyPaths/i)).toBeInTheDocument()
     })
 
     it('should render two checkboxes', () => {
@@ -55,21 +55,21 @@ describe('Options (watercrawl)', () => {
       render(<Options payload={payload} onChange={mockOnChange} />)
 
       const requiredIndicator = screen.getByText('*')
-      expect(requiredIndicator)!.toBeInTheDocument()
+      expect(requiredIndicator).toBeInTheDocument()
     })
 
     it('should render placeholder for excludes field', () => {
       const payload = createMockCrawlOptions()
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByPlaceholderText('blog/*, /about/*'))!.toBeInTheDocument()
+      expect(screen.getByPlaceholderText('blog/*, /about/*')).toBeInTheDocument()
     })
 
     it('should render placeholder for includes field', () => {
       const payload = createMockCrawlOptions()
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByPlaceholderText('articles/*'))!.toBeInTheDocument()
+      expect(screen.getByPlaceholderText('articles/*')).toBeInTheDocument()
     })
 
     it('should render with custom className', () => {
@@ -79,7 +79,7 @@ describe('Options (watercrawl)', () => {
       )
 
       const rootElement = container.firstChild as HTMLElement
-      expect(rootElement)!.toHaveClass('custom-class')
+      expect(rootElement).toHaveClass('custom-class')
     })
   })
 
@@ -89,7 +89,7 @@ describe('Options (watercrawl)', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: true })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByTestId('check-icon-crawl-sub-pages'))!.toBeInTheDocument()
+      expect(screen.getByTestId('check-icon-crawl-sub-pages')).toBeInTheDocument()
     })
 
     it('should display crawl_sub_pages checkbox without check icon when false', () => {
@@ -97,13 +97,13 @@ describe('Options (watercrawl)', () => {
       const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
 
       const checkboxes = getCheckboxes(container)
-      expect(checkboxes[0]!.querySelector('svg')).not.toBeInTheDocument()
+      expect(checkboxes[0].querySelector('svg')).not.toBeInTheDocument()
     })
 
     it('should display only_main_content checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ only_main_content: true })
       render(<Options payload={payload} onChange={mockOnChange} />)
-      expect(screen.getByTestId('check-icon-only-main-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('check-icon-only-main-content')).toBeInTheDocument()
     })
 
     it('should display only_main_content checkbox without check icon when false', () => {
@@ -111,35 +111,35 @@ describe('Options (watercrawl)', () => {
       const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
 
       const checkboxes = getCheckboxes(container)
-      expect(checkboxes[1]!.querySelector('svg')).not.toBeInTheDocument()
+      expect(checkboxes[1].querySelector('svg')).not.toBeInTheDocument()
     })
 
     it('should display limit value in input', () => {
       const payload = createMockCrawlOptions({ limit: 25 })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByDisplayValue('25'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('25')).toBeInTheDocument()
     })
 
     it('should display max_depth value in input', () => {
       const payload = createMockCrawlOptions({ max_depth: 5 })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByDisplayValue('5'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('5')).toBeInTheDocument()
     })
 
     it('should display excludes value in input', () => {
       const payload = createMockCrawlOptions({ excludes: 'test/*' })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByDisplayValue('test/*'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('test/*')).toBeInTheDocument()
     })
 
     it('should display includes value in input', () => {
       const payload = createMockCrawlOptions({ includes: 'docs/*' })
       render(<Options payload={payload} onChange={mockOnChange} />)
 
-      expect(screen.getByDisplayValue('docs/*'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('docs/*')).toBeInTheDocument()
     })
   })
 
@@ -149,7 +149,7 @@ describe('Options (watercrawl)', () => {
       const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
 
       const checkboxes = getCheckboxes(container)
-      fireEvent.click(checkboxes[0]!)
+      fireEvent.click(checkboxes[0])
 
       expect(mockOnChange).toHaveBeenCalledWith({
         ...payload,
@@ -162,7 +162,7 @@ describe('Options (watercrawl)', () => {
       const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
 
       const checkboxes = getCheckboxes(container)
-      fireEvent.click(checkboxes[1]!)
+      fireEvent.click(checkboxes[1])
 
       expect(mockOnChange).toHaveBeenCalledWith({
         ...payload,
@@ -264,10 +264,10 @@ describe('Options (watercrawl)', () => {
       const payload2 = createMockCrawlOptions({ limit: 20 })
 
       const { rerender } = render(<Options payload={payload1} onChange={mockOnChange} />)
-      expect(screen.getByDisplayValue('10'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('10')).toBeInTheDocument()
 
       rerender(<Options payload={payload2} onChange={mockOnChange} />)
-      expect(screen.getByDisplayValue('20'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('20')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
index c89059d185..0d60ef86db 100644
--- a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
@@ -105,7 +105,7 @@ describe('Operations', () => {
   describe('rendering', () => {
     it('should render without crashing', () => {
       render(<Operations {...defaultProps} />)
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
 
     it('should render buttons when embeddingAvailable', () => {
@@ -122,7 +122,7 @@ describe('Operations', () => {
     it('should render disabled switch when embeddingAvailable is false in list scene', () => {
       render(<Operations {...defaultProps} embeddingAvailable={false} scene="list" />)
       const disabledSwitch = screen.getByRole('switch')
-      expect(disabledSwitch)!.toHaveAttribute('aria-disabled', 'true')
+      expect(disabledSwitch).toHaveAttribute('aria-disabled', 'true')
     })
   })
 
@@ -209,7 +209,7 @@ describe('Operations', () => {
       const buttons = screen.getAllByRole('button')
       const settingsButton = buttons[0]
       await act(async () => {
-        fireEvent.click(settingsButton!)
+        fireEvent.click(settingsButton)
       })
       expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/documents/doc-1/settings')
     })
@@ -219,7 +219,7 @@ describe('Operations', () => {
     it('should render differently in detail scene', () => {
       render(<Operations {...defaultProps} scene="detail" />)
       const container = document.querySelector('.flex.items-center')
-      expect(container)!.toBeInTheDocument()
+      expect(container).toBeInTheDocument()
     })
 
     it('should not render switch in detail scene', () => {
@@ -239,7 +239,7 @@ describe('Operations', () => {
           onSelectedIdChange={mockOnSelectedIdChange}
         />,
       )
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
   })
 
@@ -257,8 +257,7 @@ describe('Operations', () => {
       render(<Operations {...defaultProps} />)
       await openPopover()
       // Check if popover content is visible
-      // Check if popover content is visible
-      expect(screen.getByText('datasetDocuments.list.table.rename'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetDocuments.list.table.rename')).toBeInTheDocument()
     })
 
     it('should call archive when archive action is clicked', async () => {
@@ -298,8 +297,7 @@ describe('Operations', () => {
         fireEvent.click(deleteButton)
       })
       // Check if confirmation modal is shown
-      // Check if confirmation modal is shown
-      expect(screen.getByText('datasetDocuments.list.delete.title'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetDocuments.list.delete.title')).toBeInTheDocument()
     })
 
     it('should call delete when confirm is clicked in delete modal', async () => {
@@ -326,8 +324,7 @@ describe('Operations', () => {
         fireEvent.click(deleteButton)
       })
       // Verify modal is shown
-      // Verify modal is shown
-      expect(screen.getByText('datasetDocuments.list.delete.title'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetDocuments.list.delete.title')).toBeInTheDocument()
       // Find and click the cancel button
       const cancelButton = screen.getByText('common.operation.cancel')
       await act(async () => {
@@ -369,7 +366,7 @@ describe('Operations', () => {
       await user.click(renameAction)
 
       const renameInput = await screen.findByRole('textbox')
-      expect(renameInput)!.toHaveValue('Test Document')
+      expect(renameInput).toHaveValue('Test Document')
     })
 
     it('should call sync for notion data source', async () => {
@@ -461,7 +458,7 @@ describe('Operations', () => {
         />,
       )
       await openPopover()
-      expect(screen.getByText('datasetDocuments.list.action.download'))!.toBeInTheDocument()
+      expect(screen.getByText('datasetDocuments.list.action.download')).toBeInTheDocument()
     })
 
     it('should download archived file when download is clicked', async () => {
@@ -546,7 +543,7 @@ describe('Operations', () => {
           detail={{ ...defaultDetail, display_status: 'indexing' }}
         />,
       )
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
 
     it('should render resume action when status is paused', () => {
@@ -556,7 +553,7 @@ describe('Operations', () => {
           detail={{ ...defaultDetail, display_status: 'paused' }}
         />,
       )
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
 
     it('should not show pause/resume for available status', async () => {
@@ -585,7 +582,7 @@ describe('Operations', () => {
           detail={{ ...defaultDetail, data_source_type: 'notion_import' }}
         />,
       )
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
 
     it('should handle web data source type', () => {
@@ -595,7 +592,7 @@ describe('Operations', () => {
           detail={{ ...defaultDetail, data_source_type: 'website_crawl' }}
         />,
       )
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
 
     it('should not show download for non-file data source', async () => {
@@ -625,7 +622,7 @@ describe('Operations', () => {
     it('should accept custom className prop', () => {
       // The className is passed to CustomPopover, verify component renders without errors
       render(<Operations {...defaultProps} className="custom-class" />)
-      expect(document.querySelector('.flex.items-center'))!.toBeInTheDocument()
+      expect(document.querySelector('.flex.items-center')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
index 01d6299492..97ae1c92a1 100644
--- a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
@@ -112,26 +112,25 @@ describe('DocumentList', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render all documents', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('Document 1.txt'))!.toBeInTheDocument()
-      expect(screen.getByText('Document 2.txt'))!.toBeInTheDocument()
-      expect(screen.getByText('Document 3.txt'))!.toBeInTheDocument()
+      expect(screen.getByText('Document 1.txt')).toBeInTheDocument()
+      expect(screen.getByText('Document 2.txt')).toBeInTheDocument()
+      expect(screen.getByText('Document 3.txt')).toBeInTheDocument()
     })
 
     it('should render table headers', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('#'))!.toBeInTheDocument()
+      expect(screen.getByText('#')).toBeInTheDocument()
     })
 
     it('should render pagination when total is provided', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
       // Pagination component should be present
-      // Pagination component should be present
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should not render pagination when total is 0', () => {
@@ -140,13 +139,13 @@ describe('DocumentList', () => {
         pagination: { ...defaultPagination, total: 0 },
       }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render empty table when no documents', () => {
       const props = { ...defaultProps, documents: [] }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
   })
 
@@ -166,8 +165,7 @@ describe('DocumentList', () => {
       const props = { ...defaultProps, embeddingAvailable: false }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
       // Row checkboxes should still be there, but header checkbox should be hidden
-      // Row checkboxes should still be there, but header checkbox should be hidden
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should call onSelectedIdChange when select all is clicked', () => {
@@ -177,7 +175,7 @@ describe('DocumentList', () => {
 
       const checkboxes = findCheckboxes(container)
       if (checkboxes.length > 0) {
-        fireEvent.click(checkboxes[0]!)
+        fireEvent.click(checkboxes[0])
         expect(onSelectedIdChange).toHaveBeenCalled()
       }
     })
@@ -192,7 +190,7 @@ describe('DocumentList', () => {
       // When checked, checkbox should have a check icon (svg) inside
       props.selectedIds.forEach((id) => {
         const checkIcon = screen.getByTestId(`check-icon-doc-row-${id}`)
-        expect(checkIcon)!.toBeInTheDocument()
+        expect(checkIcon).toBeInTheDocument()
       })
     })
 
@@ -208,9 +206,7 @@ describe('DocumentList', () => {
       expect(checkboxes.length).toBeGreaterThan(0)
       // Header checkbox should show indeterminate icon, not check icon
       // Just verify it's rendered
-      // Header checkbox should show indeterminate icon, not check icon
-      // Just verify it's rendered
-      expect(checkboxes[0])!.toBeInTheDocument()
+      expect(checkboxes[0]).toBeInTheDocument()
     })
 
     it('should call onSelectedIdChange with single document when row checkbox is clicked', () => {
@@ -220,7 +216,7 @@ describe('DocumentList', () => {
 
       const checkboxes = findCheckboxes(container)
       if (checkboxes.length > 1) {
-        fireEvent.click(checkboxes[1]!)
+        fireEvent.click(checkboxes[1])
         expect(onSelectedIdChange).toHaveBeenCalled()
       }
     })
@@ -240,7 +236,7 @@ describe('DocumentList', () => {
 
       const sortableHeaders = container.querySelectorAll('thead button')
       if (sortableHeaders.length > 0)
-        fireEvent.click(sortableHeaders[0]!)
+        fireEvent.click(sortableHeaders[0])
 
       expect(onSortChange).toHaveBeenCalled()
     })
@@ -255,16 +251,14 @@ describe('DocumentList', () => {
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
       // BatchAction component should be visible
-      // BatchAction component should be visible
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should not show batch action bar when no documents selected', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
 
       // BatchAction should not be present
-      // BatchAction should not be present
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render batch action bar with archive option', () => {
@@ -275,8 +269,7 @@ describe('DocumentList', () => {
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
       // BatchAction component should be visible when documents are selected
-      // BatchAction component should be visible when documents are selected
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render batch action bar with enable option', () => {
@@ -286,7 +279,7 @@ describe('DocumentList', () => {
       }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render batch action bar with disable option', () => {
@@ -296,7 +289,7 @@ describe('DocumentList', () => {
       }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render batch action bar with delete option', () => {
@@ -306,7 +299,7 @@ describe('DocumentList', () => {
       }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should clear selection when cancel is clicked', () => {
@@ -336,8 +329,7 @@ describe('DocumentList', () => {
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
       // BatchAction should be visible
-      // BatchAction should be visible
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should show re-index option for error documents', () => {
@@ -351,8 +343,7 @@ describe('DocumentList', () => {
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
       // BatchAction with re-index should be present for error documents
-      // BatchAction with re-index should be present for error documents
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
   })
 
@@ -363,7 +354,7 @@ describe('DocumentList', () => {
       const rows = screen.getAllByRole('row')
       // First row is header, second row is first document
       if (rows.length > 1) {
-        fireEvent.click(rows[1]!)
+        fireEvent.click(rows[1])
         expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/documents/doc-1')
       }
     })
@@ -385,11 +376,11 @@ describe('DocumentList', () => {
       const renameButtons = container.querySelectorAll('.cursor-pointer.rounded-md')
       if (renameButtons.length > 0) {
         await act(async () => {
-          fireEvent.click(renameButtons[0]!)
+          fireEvent.click(renameButtons[0])
         })
       }
 
-      expect(screen.getByRole('dialog', { name: 'datasetDocuments.list.table.rename' }))!.toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'datasetDocuments.list.table.rename' })).toBeInTheDocument()
     })
 
     it('should call onUpdate when document is renamed', () => {
@@ -398,8 +389,7 @@ describe('DocumentList', () => {
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
       // The handleRenamed callback wraps onUpdate
-      // The handleRenamed callback wraps onUpdate
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
   })
 
@@ -418,7 +408,7 @@ describe('DocumentList', () => {
         })
       }
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should call onManageMetadata when manage metadata is triggered', () => {
@@ -431,27 +421,26 @@ describe('DocumentList', () => {
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
       // The onShowManage callback in EditMetadataBatchModal should call hideEditModal then onManageMetadata
-      // The onShowManage callback in EditMetadataBatchModal should call hideEditModal then onManageMetadata
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
   })
 
   describe('Chunking Mode', () => {
     it('should render with general mode', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render with QA mode', () => {
       // This test uses the default mock which returns ChunkingMode.text
       // The component will compute isQAMode based on doc_form
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should render with parent-child mode', () => {
       render(<DocumentList {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
   })
 
@@ -460,7 +449,7 @@ describe('DocumentList', () => {
       const props = { ...defaultProps, documents: [] }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should handle documents with missing optional fields', () => {
@@ -474,7 +463,7 @@ describe('DocumentList', () => {
       }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should handle remote sort value', () => {
@@ -484,7 +473,7 @@ describe('DocumentList', () => {
       }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should handle large number of documents', () => {
@@ -493,7 +482,7 @@ describe('DocumentList', () => {
       const props = { ...defaultProps, documents: manyDocs }
       render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      expect(screen.getByRole('table'))!.toBeInTheDocument()
+      expect(screen.getByRole('table')).toBeInTheDocument()
     }, 10000)
   })
 })
diff --git a/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx b/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
index b6b02ed829..d5e4f480be 100644
--- a/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
@@ -103,23 +103,23 @@ describe('DocumentTableRow', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<DocumentTableRow {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('test-document.txt'))!.toBeInTheDocument()
+      expect(screen.getByText('test-document.txt')).toBeInTheDocument()
     })
 
     it('should render index number correctly', () => {
       render(<DocumentTableRow {...defaultProps} index={5} />, { wrapper: createWrapper() })
-      expect(screen.getByText('6'))!.toBeInTheDocument()
+      expect(screen.getByText('6')).toBeInTheDocument()
     })
 
     it('should render document name with tooltip', () => {
       render(<DocumentTableRow {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('test-document.txt'))!.toBeInTheDocument()
+      expect(screen.getByText('test-document.txt')).toBeInTheDocument()
     })
 
     it('should render checkbox element', () => {
       const { container } = render(<DocumentTableRow {...defaultProps} />, { wrapper: createWrapper() })
       const checkbox = findCheckbox(container)
-      expect(checkbox)!.toBeInTheDocument()
+      expect(checkbox).toBeInTheDocument()
     })
   })
 
@@ -127,14 +127,14 @@ describe('DocumentTableRow', () => {
     it('should show check icon when isSelected is true', () => {
       const { container } = render(<DocumentTableRow {...defaultProps} isSelected />, { wrapper: createWrapper() })
       const checkbox = findCheckbox(container)
-      expect(checkbox)!.toBeInTheDocument()
-      expect(screen.getByTestId('check-icon-doc-row-doc-1'))!.toBeInTheDocument()
+      expect(checkbox).toBeInTheDocument()
+      expect(screen.getByTestId('check-icon-doc-row-doc-1')).toBeInTheDocument()
     })
 
     it('should not show check icon when isSelected is false', () => {
       const { container } = render(<DocumentTableRow {...defaultProps} isSelected={false} />, { wrapper: createWrapper() })
       const checkbox = findCheckbox(container)
-      expect(checkbox)!.toBeInTheDocument()
+      expect(checkbox).toBeInTheDocument()
       expect(screen.queryByTestId('check-icon-doc-row-doc-1')).not.toBeInTheDocument()
     })
 
@@ -200,13 +200,13 @@ describe('DocumentTableRow', () => {
     it('should display word count less than 1000 as is', () => {
       const doc = createMockDoc({ word_count: 500 })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByText('500'))!.toBeInTheDocument()
+      expect(screen.getByText('500')).toBeInTheDocument()
     })
 
     it('should display word count 1000 or more in k format', () => {
       const doc = createMockDoc({ word_count: 1500 })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByText('1.5k'))!.toBeInTheDocument()
+      expect(screen.getByText('1.5k')).toBeInTheDocument()
     })
 
     it('should display 0 with empty style when word_count is 0', () => {
@@ -219,7 +219,7 @@ describe('DocumentTableRow', () => {
     it('should handle undefined word_count', () => {
       const doc = createMockDoc({ word_count: undefined as unknown as number })
       const { container } = render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(container)!.toBeInTheDocument()
+      expect(container).toBeInTheDocument()
     })
   })
 
@@ -227,13 +227,13 @@ describe('DocumentTableRow', () => {
     it('should display hit count less than 1000 as is', () => {
       const doc = createMockDoc({ hit_count: 100 })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByText('100'))!.toBeInTheDocument()
+      expect(screen.getByText('100')).toBeInTheDocument()
     })
 
     it('should display hit count 1000 or more in k format', () => {
       const doc = createMockDoc({ hit_count: 2500 })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByText('2.5k'))!.toBeInTheDocument()
+      expect(screen.getByText('2.5k')).toBeInTheDocument()
     })
 
     it('should display 0 with empty style when hit_count is 0', () => {
@@ -248,13 +248,12 @@ describe('DocumentTableRow', () => {
     it('should render ChunkingModeLabel with general mode', () => {
       render(<DocumentTableRow {...defaultProps} isGeneralMode isQAMode={false} />, { wrapper: createWrapper() })
       // ChunkingModeLabel should be rendered
-      // ChunkingModeLabel should be rendered
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
 
     it('should render ChunkingModeLabel with QA mode', () => {
       render(<DocumentTableRow {...defaultProps} isGeneralMode={false} isQAMode />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
   })
 
@@ -262,13 +261,13 @@ describe('DocumentTableRow', () => {
     it('should render SummaryStatus when summary_index_status is present', () => {
       const doc = createMockDoc({ summary_index_status: 'completed' })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
 
     it('should not render SummaryStatus when summary_index_status is absent', () => {
       const doc = createMockDoc({ summary_index_status: undefined })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
   })
 
@@ -283,7 +282,7 @@ describe('DocumentTableRow', () => {
       // Find the rename button by finding the RiEditLine icon's parent
       const renameButtons = container.querySelectorAll('.cursor-pointer.rounded-md')
       if (renameButtons.length > 0) {
-        fireEvent.click(renameButtons[0]!)
+        fireEvent.click(renameButtons[0])
         expect(onShowRenameModal).toHaveBeenCalledWith(defaultProps.doc)
         expect(mockPush).not.toHaveBeenCalled()
       }
@@ -293,13 +292,13 @@ describe('DocumentTableRow', () => {
   describe('Operations', () => {
     it('should pass selectedIds to Operations component', () => {
       render(<DocumentTableRow {...defaultProps} selectedIds={['doc-1', 'doc-2']} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
 
     it('should pass onSelectedIdChange to Operations component', () => {
       const onSelectedIdChange = vi.fn()
       render(<DocumentTableRow {...defaultProps} onSelectedIdChange={onSelectedIdChange} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
   })
 
@@ -307,7 +306,7 @@ describe('DocumentTableRow', () => {
     it('should render with FILE data source type', () => {
       const doc = createMockDoc({ data_source_type: DataSourceType.FILE })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
 
     it('should render with NOTION data source type', () => {
@@ -316,13 +315,13 @@ describe('DocumentTableRow', () => {
         data_source_info: { notion_page_icon: 'icon.png' },
       })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
 
     it('should render with WEB data source type', () => {
       const doc = createMockDoc({ data_source_type: DataSourceType.WEB })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
   })
 
@@ -330,13 +329,13 @@ describe('DocumentTableRow', () => {
     it('should handle document with very long name', () => {
       const doc = createMockDoc({ name: `${'a'.repeat(500)}.txt` })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
 
     it('should handle document with special characters in name', () => {
       const doc = createMockDoc({ name: '<script>test</script>.txt' })
       render(<DocumentTableRow {...defaultProps} doc={doc} />, { wrapper: createWrapper() })
-      expect(screen.getByText('<script>test</script>.txt'))!.toBeInTheDocument()
+      expect(screen.getByText('<script>test</script>.txt')).toBeInTheDocument()
     })
 
     it('should memoize the component', () => {
@@ -344,7 +343,7 @@ describe('DocumentTableRow', () => {
       const { rerender } = render(<DocumentTableRow {...defaultProps} />, { wrapper })
 
       rerender(<DocumentTableRow {...defaultProps} />)
-      expect(screen.getByRole('row'))!.toBeInTheDocument()
+      expect(screen.getByRole('row')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
index c8a06ea807..899c70e216 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
@@ -43,7 +43,7 @@ const Options = ({
         if (!result.success) {
           const issues = result.error.issues
           const firstIssue = issues[0]
-          const errorMessage = `"${firstIssue!.path.join('.')}" ${firstIssue!.message}`
+          const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
           toast.error(errorMessage)
           return errorMessage
         }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx
index 7fde02adcd..33703d56b2 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx
@@ -33,7 +33,7 @@ const Form = ({
         if (!result.success) {
           const issues = result.error.issues
           const firstIssue = issues[0]
-          const errorMessage = `"${firstIssue!.path.join('.')}" ${firstIssue!.message}`
+          const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
           toast.error(errorMessage)
           return errorMessage
         }
diff --git a/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx b/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
index d9427f5117..25b7abe7ea 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
@@ -79,17 +79,17 @@ describe('QueryInput', () => {
 
   it('should render title', () => {
     render(<QueryInput {...defaultProps} />)
-    expect(screen.getByText('datasetHitTesting.input.title'))!.toBeInTheDocument()
+    expect(screen.getByText('datasetHitTesting.input.title')).toBeInTheDocument()
   })
 
   it('should render textarea with query text', () => {
     render(<QueryInput {...defaultProps} />)
-    expect(screen.getByTestId('textarea'))!.toBeInTheDocument()
+    expect(screen.getByTestId('textarea')).toBeInTheDocument()
   })
 
   it('should render submit button', () => {
     render(<QueryInput {...defaultProps} />)
-    expect(screen.getByRole('button', { name: /input\.testing/ }))!.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /input\.testing/ })).toBeInTheDocument()
   })
 
   it('should disable submit button when text is empty', () => {
@@ -98,17 +98,17 @@ describe('QueryInput', () => {
       queries: [{ content: '', content_type: 'text_query', file_info: null }] satisfies Query[],
     }
     render(<QueryInput {...props} />)
-    expect(screen.getByRole('button', { name: /input\.testing/ }))!.toBeDisabled()
+    expect(screen.getByRole('button', { name: /input\.testing/ })).toBeDisabled()
   })
 
   it('should render retrieval method for non-external mode', () => {
     render(<QueryInput {...defaultProps} />)
-    expect(screen.getByText('dataset.retrieval.semantic_search.title'))!.toBeInTheDocument()
+    expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
   })
 
   it('should render settings button for external mode', () => {
     render(<QueryInput {...defaultProps} isExternal={true} />)
-    expect(screen.getByText('datasetHitTesting.settingTitle'))!.toBeInTheDocument()
+    expect(screen.getByText('datasetHitTesting.settingTitle')).toBeInTheDocument()
   })
 
   it('should disable submit button when text exceeds 200 characters', () => {
@@ -117,15 +117,15 @@ describe('QueryInput', () => {
       queries: [{ content: 'a'.repeat(201), content_type: 'text_query', file_info: null }] satisfies Query[],
     }
     render(<QueryInput {...props} />)
-    expect(screen.getByRole('button', { name: /input\.testing/ }))!.toBeDisabled()
+    expect(screen.getByRole('button', { name: /input\.testing/ })).toBeDisabled()
   })
 
   it('should show loading state on submit button when loading', () => {
     render(<QueryInput {...defaultProps} loading={true} />)
     const submitButton = screen.getByRole('button', { name: /input\.testing/ })
-    expect(submitButton)!.toBeDisabled()
-    expect(submitButton)!.toHaveAttribute('aria-busy', 'true')
-    expect(submitButton.querySelector('.animate-spin'))!.toBeInTheDocument()
+    expect(submitButton).toBeDisabled()
+    expect(submitButton).toHaveAttribute('aria-busy', 'true')
+    expect(submitButton.querySelector('.animate-spin')).toBeInTheDocument()
   })
 
   // Cover line 83: images useMemo with image_query data
@@ -141,37 +141,6 @@ describe('QueryInput', () => {
       ]
       render(<QueryInput {...defaultProps} queries={queries} />)
 
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
-      // Submit should be enabled since we have text + uploaded image
       // Submit should be enabled since we have text + uploaded image
       expect(screen.getByRole('button', { name: /input\.testing/ })).not.toBeDisabled()
     })
@@ -184,7 +153,7 @@ describe('QueryInput', () => {
 
       // Click settings button to open modal
       fireEvent.click(screen.getByRole('button', { name: /settingTitle/ }))
-      expect(screen.getByTestId('external-retrieval-modal'))!.toBeInTheDocument()
+      expect(screen.getByTestId('external-retrieval-modal')).toBeInTheDocument()
 
       // Close modal
       fireEvent.click(screen.getByTestId('modal-close'))
@@ -196,7 +165,7 @@ describe('QueryInput', () => {
 
       // Open modal
       fireEvent.click(screen.getByRole('button', { name: /settingTitle/ }))
-      expect(screen.getByTestId('external-retrieval-modal'))!.toBeInTheDocument()
+      expect(screen.getByTestId('external-retrieval-modal')).toBeInTheDocument()
 
       // Save settings
       fireEvent.click(screen.getByTestId('modal-save'))
@@ -305,7 +274,7 @@ describe('QueryInput', () => {
         ]),
       )
       // Should not contain image_query
-      const calledWith = defaultProps.setQueries.mock.calls[0]![0] as Query[]
+      const calledWith = defaultProps.setQueries.mock.calls[0][0] as Query[]
       expect(calledWith.filter(q => q.content_type === 'image_query')).toHaveLength(0)
     })
   })
@@ -443,7 +412,7 @@ describe('QueryInput', () => {
     it('should show keyword_search when isEconomy is true', () => {
       render(<QueryInput {...defaultProps} isEconomy={true} />)
 
-      expect(screen.getByText('dataset.retrieval.keyword_search.title'))!.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.keyword_search.title')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
index 40c925222c..d9b88e20bb 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
@@ -120,14 +120,14 @@ describe('EditMetadataBatchModal', () => {
     it('should render without crashing', async () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
     })
 
     it('should render document count', async () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
       await waitFor(() => {
-        expect(screen.getByText(/5/))!.toBeInTheDocument()
+        expect(screen.getByText(/5/)).toBeInTheDocument()
       })
     })
 
@@ -142,8 +142,8 @@ describe('EditMetadataBatchModal', () => {
     it('should render field names for existing items', async () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
       await waitFor(() => {
-        expect(screen.getByText('field_one'))!.toBeInTheDocument()
-        expect(screen.getByText('field_two'))!.toBeInTheDocument()
+        expect(screen.getByText('field_one')).toBeInTheDocument()
+        expect(screen.getByText('field_two')).toBeInTheDocument()
       })
     })
 
@@ -158,7 +158,7 @@ describe('EditMetadataBatchModal', () => {
     it('should render select metadata modal', async () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
       await waitFor(() => {
-        expect(screen.getByTestId('select-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('select-modal')).toBeInTheDocument()
       })
     })
   })
@@ -169,7 +169,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onHide={onHide} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       const cancelButton = screen.getByText(/cancel/i)
@@ -183,7 +183,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onSave={onSave} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // Find the primary save button (not the one in SelectMetadataModal)
@@ -196,17 +196,17 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       const checkboxContainer = document.querySelector('[data-testid*="checkbox"]')
-      expect(checkboxContainer)!.toBeInTheDocument()
+      expect(checkboxContainer).toBeInTheDocument()
 
       if (checkboxContainer) {
         fireEvent.click(checkboxContainer)
         await waitFor(() => {
           const checkIcon = screen.getByTestId('check-icon-apply-to-all')
-          expect(checkIcon)!.toBeInTheDocument()
+          expect(checkIcon).toBeInTheDocument()
         })
       }
     })
@@ -216,7 +216,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onHide={onHide} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
     })
   })
@@ -226,7 +226,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('change-1'))
@@ -239,7 +239,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('remove-1'))
@@ -252,7 +252,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // First change the item
@@ -269,14 +269,14 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('select-metadata'))
 
       // Should now have add-row for the new item
       await waitFor(() => {
-        expect(screen.getByTestId('add-row'))!.toBeInTheDocument()
+        expect(screen.getByTestId('add-row')).toBeInTheDocument()
       })
     })
 
@@ -284,14 +284,14 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // First add an item
       fireEvent.click(screen.getByTestId('select-metadata'))
 
       await waitFor(() => {
-        expect(screen.getByTestId('add-row'))!.toBeInTheDocument()
+        expect(screen.getByTestId('add-row')).toBeInTheDocument()
       })
 
       // Then remove it
@@ -306,20 +306,20 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // First add an item
       fireEvent.click(screen.getByTestId('select-metadata'))
 
       await waitFor(() => {
-        expect(screen.getByTestId('add-row'))!.toBeInTheDocument()
+        expect(screen.getByTestId('add-row')).toBeInTheDocument()
       })
 
       // Then change it
       fireEvent.click(screen.getByTestId('add-change-new-1'))
 
-      expect(screen.getByTestId('add-row'))!.toBeInTheDocument()
+      expect(screen.getByTestId('add-row')).toBeInTheDocument()
     })
 
     it('should call doAddMetaData when saving new metadata with valid name', async () => {
@@ -328,7 +328,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('save-metadata'))
@@ -344,7 +344,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('save-metadata'))
@@ -368,7 +368,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('save-metadata'))
@@ -388,7 +388,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onShowManage={onShowManage} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('manage-metadata'))
@@ -401,14 +401,14 @@ describe('EditMetadataBatchModal', () => {
     it('should pass correct datasetId', async () => {
       render(<EditMetadataBatchModal {...defaultProps} datasetId="custom-ds" />)
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
     })
 
     it('should display correct document number', async () => {
       render(<EditMetadataBatchModal {...defaultProps} documentNum={10} />)
       await waitFor(() => {
-        expect(screen.getByText(/10/))!.toBeInTheDocument()
+        expect(screen.getByText(/10/)).toBeInTheDocument()
       })
     })
 
@@ -427,7 +427,7 @@ describe('EditMetadataBatchModal', () => {
       ]
       render(<EditMetadataBatchModal {...defaultProps} list={multipleValueList} />)
       await waitFor(() => {
-        expect(screen.getByTestId('edit-row'))!.toBeInTheDocument()
+        expect(screen.getByTestId('edit-row')).toBeInTheDocument()
       })
     })
 
@@ -436,7 +436,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onSave={onSave} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // Find the primary save button
@@ -453,7 +453,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onSave={onSave} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
@@ -470,7 +470,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onSave={onSave} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       const checkboxContainer = document.querySelector('[data-testid*="checkbox"]')
@@ -493,7 +493,7 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} onSave={onSave} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // Remove an item
@@ -503,7 +503,7 @@ describe('EditMetadataBatchModal', () => {
 
       expect(onSave).toHaveBeenCalled()
       // The first argument should not contain the deleted item (id '1')
-      const savedList = onSave.mock.calls[0]![0] as MetadataItemInBatchEdit[]
+      const savedList = onSave.mock.calls[0][0] as MetadataItemInBatchEdit[]
       const hasDeletedItem = savedList.some(item => item.id === '1')
       expect(hasDeletedItem).toBe(false)
     })
@@ -512,13 +512,13 @@ describe('EditMetadataBatchModal', () => {
       render(<EditMetadataBatchModal {...defaultProps} />)
 
       await waitFor(() => {
-        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
       // Add first item
       fireEvent.click(screen.getByTestId('select-metadata'))
       await waitFor(() => {
-        expect(screen.getByTestId('add-row'))!.toBeInTheDocument()
+        expect(screen.getByTestId('add-row')).toBeInTheDocument()
       })
 
       // Remove it
@@ -531,7 +531,7 @@ describe('EditMetadataBatchModal', () => {
       // Add again
       fireEvent.click(screen.getByTestId('select-metadata'))
       await waitFor(() => {
-        expect(screen.getByTestId('add-row'))!.toBeInTheDocument()
+        expect(screen.getByTestId('add-row')).toBeInTheDocument()
       })
     })
   })
diff --git a/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx b/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx
index 71f23324f6..ddd624a076 100644
--- a/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx
@@ -99,7 +99,7 @@ describe('MetadataDocument', () => {
           docDetail={mockDocDetail as Parameters<typeof MetadataDocument>[0]['docDetail']}
         />,
       )
-      expect(container.firstChild)!.toBeInTheDocument()
+      expect(container.firstChild).toBeInTheDocument()
     })
 
     it('should render metadata fields when hasData is true', () => {
@@ -110,8 +110,8 @@ describe('MetadataDocument', () => {
           docDetail={mockDocDetail as Parameters<typeof MetadataDocument>[0]['docDetail']}
         />,
       )
-      expect(screen.getByText('field_one'))!.toBeInTheDocument()
-      expect(screen.getByText('field_two'))!.toBeInTheDocument()
+      expect(screen.getByText('field_one')).toBeInTheDocument()
+      expect(screen.getByText('field_two')).toBeInTheDocument()
     })
 
     it('should render no-data state when hasData is false and not in edit mode', () => {
@@ -147,8 +147,8 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText(/save/i))!.toBeInTheDocument()
-      expect(screen.getByText(/cancel/i))!.toBeInTheDocument()
+      expect(screen.getByText(/save/i)).toBeInTheDocument()
+      expect(screen.getByText(/cancel/i)).toBeInTheDocument()
     })
 
     it('should render built-in section when builtInEnabled is true', () => {
@@ -166,7 +166,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('created_at'))!.toBeInTheDocument()
+      expect(screen.getByText('created_at')).toBeInTheDocument()
     })
 
     it('should render divider when builtInEnabled is true', () => {
@@ -185,7 +185,7 @@ describe('MetadataDocument', () => {
       )
 
       const divider = container.querySelector('.bg-linear-to-r')
-      expect(divider)!.toBeInTheDocument()
+      expect(divider).toBeInTheDocument()
     })
 
     it('should render origin info section', () => {
@@ -202,7 +202,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('source'))!.toBeInTheDocument()
+      expect(screen.getByText('source')).toBeInTheDocument()
     })
 
     it('should render technical parameters section', () => {
@@ -219,7 +219,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('word_count'))!.toBeInTheDocument()
+      expect(screen.getByText('word_count')).toBeInTheDocument()
     })
 
     it('should render all sections together', () => {
@@ -239,10 +239,10 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('field_one'))!.toBeInTheDocument()
-      expect(screen.getByText('created_at'))!.toBeInTheDocument()
-      expect(screen.getByText('source'))!.toBeInTheDocument()
-      expect(screen.getByText('word_count'))!.toBeInTheDocument()
+      expect(screen.getByText('field_one')).toBeInTheDocument()
+      expect(screen.getByText('created_at')).toBeInTheDocument()
+      expect(screen.getByText('source')).toBeInTheDocument()
+      expect(screen.getByText('word_count')).toBeInTheDocument()
     })
   })
 
@@ -255,7 +255,7 @@ describe('MetadataDocument', () => {
           docDetail={mockDocDetail as Parameters<typeof MetadataDocument>[0]['docDetail']}
         />,
       )
-      expect(screen.getByText(/edit/i))!.toBeInTheDocument()
+      expect(screen.getByText(/edit/i)).toBeInTheDocument()
     })
 
     it('should call startToEdit when edit button is clicked', () => {
@@ -362,9 +362,8 @@ describe('MetadataDocument', () => {
       )
 
       // Should show save/cancel buttons
-      // Should show save/cancel buttons
-      expect(screen.getByText(/save/i))!.toBeInTheDocument()
-      expect(screen.getByText(/cancel/i))!.toBeInTheDocument()
+      expect(screen.getByText(/save/i)).toBeInTheDocument()
+      expect(screen.getByText(/cancel/i)).toBeInTheDocument()
     })
   })
 
@@ -387,7 +386,7 @@ describe('MetadataDocument', () => {
 
       const inputs = container.querySelectorAll('input')
       if (inputs.length > 0) {
-        fireEvent.change(inputs[0]!, { target: { value: 'new value' } })
+        fireEvent.change(inputs[0], { target: { value: 'new value' } })
 
         await waitFor(() => {
           expect(setTempList).toHaveBeenCalled()
@@ -455,7 +454,7 @@ describe('MetadataDocument', () => {
 
       const inputs = container.querySelectorAll('input')
       if (inputs.length > 0) {
-        fireEvent.change(inputs[0]!, { target: { value: 'updated' } })
+        fireEvent.change(inputs[0], { target: { value: 'updated' } })
         await waitFor(() => {
           expect(setTempList).toHaveBeenCalled()
         })
@@ -484,7 +483,7 @@ describe('MetadataDocument', () => {
       expect(deleteContainers.length).toBeGreaterThan(0)
 
       if (deleteContainers.length > 0) {
-        const deleteIcon = deleteContainers[0]!.querySelector('svg')
+        const deleteIcon = deleteContainers[0].querySelector('svg')
         if (deleteIcon)
           fireEvent.click(deleteIcon)
 
@@ -505,7 +504,7 @@ describe('MetadataDocument', () => {
           className="custom-class"
         />,
       )
-      expect(container.firstChild)!.toHaveClass('custom-class')
+      expect(container.firstChild).toHaveClass('custom-class')
     })
 
     it('should use tempList when in edit mode', () => {
@@ -525,7 +524,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('temp_field'))!.toBeInTheDocument()
+      expect(screen.getByText('temp_field')).toBeInTheDocument()
     })
 
     it('should use list when not in edit mode', () => {
@@ -537,8 +536,8 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('field_one'))!.toBeInTheDocument()
-      expect(screen.getByText('field_two'))!.toBeInTheDocument()
+      expect(screen.getByText('field_one')).toBeInTheDocument()
+      expect(screen.getByText('field_two')).toBeInTheDocument()
     })
 
     it('should pass datasetId to child components', () => {
@@ -550,8 +549,7 @@ describe('MetadataDocument', () => {
         />,
       )
       // Component should render without errors
-      // Component should render without errors
-      expect(screen.getByText('field_one'))!.toBeInTheDocument()
+      expect(screen.getByText('field_one')).toBeInTheDocument()
     })
   })
 
@@ -590,37 +588,6 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
-      // NoData component should not be rendered
       // NoData component should not be rendered
       expect(screen.queryByText(/start/i)).not.toBeInTheDocument()
     })
@@ -640,37 +607,6 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
-      // headerRight should be null/undefined
       // headerRight should be null/undefined
       expect(screen.queryByText(/^edit$/i)).not.toBeInTheDocument()
     })
@@ -692,7 +628,7 @@ describe('MetadataDocument', () => {
           docDetail={mockDocDetail as Parameters<typeof MetadataDocument>[0]['docDetail']}
         />,
       )
-      expect(container.firstChild)!.toBeInTheDocument()
+      expect(container.firstChild).toBeInTheDocument()
     })
 
     it('should render correctly with minimal props', () => {
@@ -703,7 +639,7 @@ describe('MetadataDocument', () => {
           docDetail={mockDocDetail as Parameters<typeof MetadataDocument>[0]['docDetail']}
         />,
       )
-      expect(container.firstChild)!.toBeInTheDocument()
+      expect(container.firstChild).toBeInTheDocument()
     })
 
     it('should handle switching between view and edit mode', () => {
@@ -715,7 +651,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText(/edit/i))!.toBeInTheDocument()
+      expect(screen.getByText(/edit/i)).toBeInTheDocument()
 
       unmount()
 
@@ -732,8 +668,8 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText(/save/i))!.toBeInTheDocument()
-      expect(screen.getByText(/cancel/i))!.toBeInTheDocument()
+      expect(screen.getByText(/save/i)).toBeInTheDocument()
+      expect(screen.getByText(/cancel/i)).toBeInTheDocument()
     })
 
     it('should handle multiple items in all sections', () => {
@@ -766,11 +702,11 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('user_field_1'))!.toBeInTheDocument()
-      expect(screen.getByText('user_field_2'))!.toBeInTheDocument()
-      expect(screen.getByText('created_at'))!.toBeInTheDocument()
-      expect(screen.getByText('source'))!.toBeInTheDocument()
-      expect(screen.getByText('word_count'))!.toBeInTheDocument()
+      expect(screen.getByText('user_field_1')).toBeInTheDocument()
+      expect(screen.getByText('user_field_2')).toBeInTheDocument()
+      expect(screen.getByText('created_at')).toBeInTheDocument()
+      expect(screen.getByText('source')).toBeInTheDocument()
+      expect(screen.getByText('word_count')).toBeInTheDocument()
     })
 
     it('should handle null values in metadata', () => {
@@ -789,7 +725,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('null_field'))!.toBeInTheDocument()
+      expect(screen.getByText('null_field')).toBeInTheDocument()
     })
 
     it('should handle undefined values in metadata', () => {
@@ -808,7 +744,7 @@ describe('MetadataDocument', () => {
         />,
       )
 
-      expect(screen.getByText('undefined_field'))!.toBeInTheDocument()
+      expect(screen.getByText('undefined_field')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx b/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
index 5e81611fc4..7441274155 100644
--- a/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
@@ -19,12 +19,12 @@ describe('IndexMethod', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<IndexMethod {...defaultProps} />)
-      expect(screen.getByText(/stepTwo\.qualified/))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.qualified/)).toBeInTheDocument()
     })
 
     it('should render High Quality option', () => {
       render(<IndexMethod {...defaultProps} />)
-      expect(screen.getByText(/stepTwo\.qualified/))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.qualified/)).toBeInTheDocument()
     })
 
     it('should render Economy option', () => {
@@ -34,17 +34,17 @@ describe('IndexMethod', () => {
 
     it('should render High Quality description', () => {
       render(<IndexMethod {...defaultProps} />)
-      expect(screen.getByText(/form\.indexMethodHighQualityTip/))!.toBeInTheDocument()
+      expect(screen.getByText(/form\.indexMethodHighQualityTip/)).toBeInTheDocument()
     })
 
     it('should render Economy description', () => {
       render(<IndexMethod {...defaultProps} />)
-      expect(screen.getByText(/form\.indexMethodEconomyTip/))!.toBeInTheDocument()
+      expect(screen.getByText(/form\.indexMethodEconomyTip/)).toBeInTheDocument()
     })
 
     it('should render recommended badge on High Quality', () => {
       render(<IndexMethod {...defaultProps} />)
-      expect(screen.getByText(/stepTwo\.recommend/))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.recommend/)).toBeInTheDocument()
     })
   })
 
@@ -82,7 +82,7 @@ describe('IndexMethod', () => {
       // Find and click Economy option - use getAllByText and get the first one (title)
       const economyTitles = screen.getAllByText(/form\.indexMethodEconomy/)
       const economyTitle = economyTitles[0]
-      const card = economyTitle!.closest('div')?.parentElement?.parentElement?.parentElement
+      const card = economyTitle.closest('div')?.parentElement?.parentElement?.parentElement
       fireEvent.click(card!)
 
       expect(handleChange).toHaveBeenCalledWith(IndexingType.ECONOMICAL)
@@ -114,7 +114,7 @@ describe('IndexMethod', () => {
       // Try to click Economy option - use getAllByText and get the first one (title)
       const economyTitles = screen.getAllByText(/form\.indexMethodEconomy/)
       const economyTitle = economyTitles[0]
-      const card = economyTitle!.closest('div')?.parentElement?.parentElement?.parentElement
+      const card = economyTitle.closest('div')?.parentElement?.parentElement?.parentElement
       fireEvent.click(card!)
 
       // Should not call onChange because Economy is disabled when current is QUALIFIED
@@ -125,13 +125,13 @@ describe('IndexMethod', () => {
   describe('KeywordNumber', () => {
     it('should render KeywordNumber component inside Economy option', () => {
       render(<IndexMethod {...defaultProps} />)
-      expect(getKeywordSlider())!.toBeInTheDocument()
+      expect(getKeywordSlider()).toBeInTheDocument()
     })
 
     it('should pass keywordNumber to KeywordNumber component', () => {
       render(<IndexMethod {...defaultProps} keywordNumber={25} />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveValue('25')
+      expect(input).toHaveValue('25')
     })
 
     it('should call onKeywordNumberChange when KeywordNumber changes', () => {
@@ -160,13 +160,13 @@ describe('IndexMethod', () => {
     it('should show orange effect color for High Quality option', () => {
       const { container } = render(<IndexMethod {...defaultProps} />)
       const orangeEffect = container.querySelector('.bg-util-colors-orange-orange-500')
-      expect(orangeEffect)!.toBeInTheDocument()
+      expect(orangeEffect).toBeInTheDocument()
     })
 
     it('should show indigo effect color for Economy option', () => {
       const { container } = render(<IndexMethod {...defaultProps} />)
       const indigoEffect = container.querySelector('.bg-util-colors-indigo-indigo-600')
-      expect(indigoEffect)!.toBeInTheDocument()
+      expect(indigoEffect).toBeInTheDocument()
     })
   })
 
@@ -188,20 +188,19 @@ describe('IndexMethod', () => {
     it('should handle undefined currentValue', () => {
       render(<IndexMethod {...defaultProps} currentValue={undefined} />)
       // Should render without error
-      // Should render without error
-      expect(screen.getByText(/stepTwo\.qualified/))!.toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.qualified/)).toBeInTheDocument()
     })
 
     it('should handle minimum keywordNumber', () => {
       render(<IndexMethod {...defaultProps} keywordNumber={0} />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveValue('0')
+      expect(input).toHaveValue('0')
     })
 
     it('should handle max keywordNumber', () => {
       render(<IndexMethod {...defaultProps} keywordNumber={50} />)
       const input = screen.getByRole('textbox')
-      expect(input)!.toHaveValue('50')
+      expect(input).toHaveValue('50')
     })
   })
 })
diff --git a/web/app/components/datasets/settings/index-method/keyword-number.tsx b/web/app/components/datasets/settings/index-method/keyword-number.tsx
index 03992fb027..feb63c1d65 100644
--- a/web/app/components/datasets/settings/index-method/keyword-number.tsx
+++ b/web/app/components/datasets/settings/index-method/keyword-number.tsx
@@ -33,7 +33,7 @@ const KeyWordNumber = ({
   return (
     <div className="flex items-center gap-x-1">
       <div className="flex grow items-center gap-x-0.5">
-        <div className="truncate system-xs-medium text-text-secondary">
+        <div className="truncate text-text-secondary system-xs-medium">
           {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
         </div>
         <Tooltip
@@ -57,11 +57,11 @@ const KeyWordNumber = ({
         value={keywordNumber}
         onValueChange={handleInputChange}
       >
-        <NumberFieldGroup>
-          <NumberFieldInput />
+        <NumberFieldGroup size="regular">
+          <NumberFieldInput size="regular" />
           <NumberFieldControls>
-            <NumberFieldIncrement />
-            <NumberFieldDecrement />
+            <NumberFieldIncrement size="regular" />
+            <NumberFieldDecrement size="regular" />
           </NumberFieldControls>
         </NumberFieldGroup>
       </NumberField>
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index 8c31799add..a7182d8f79 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -133,8 +133,8 @@ const PermissionSelector = ({
                     {
                       selectedMembers.length === 1 && (
                         <Avatar
-                          avatar={selectedMembers[0]!.avatar_url}
-                          name={selectedMembers[0]!.name}
+                          avatar={selectedMembers[0].avatar_url}
+                          name={selectedMembers[0].name}
                           size="xs"
                         />
                       )
@@ -143,14 +143,14 @@ const PermissionSelector = ({
                       selectedMembers.length >= 2 && (
                         <>
                           <Avatar
-                            avatar={selectedMembers[0]!.avatar_url}
-                            name={selectedMembers[0]!.name}
+                            avatar={selectedMembers[0].avatar_url}
+                            name={selectedMembers[0].name}
                             className="absolute top-0 left-0 z-0"
                             size="xxs"
                           />
                           <Avatar
-                            avatar={selectedMembers[1]!.avatar_url}
-                            name={selectedMembers[1]!.name}
+                            avatar={selectedMembers[1].avatar_url}
+                            name={selectedMembers[1].name}
                             className="absolute right-0 bottom-0 z-10"
                             size="xxs"
                           />
diff --git a/web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts b/web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts
new file mode 100644
index 0000000000..9671220334
--- /dev/null
+++ b/web/app/components/evaluation/__tests__/default-metric-descriptions.spec.ts
@@ -0,0 +1,34 @@
+import { getDefaultMetricDescription, getDefaultMetricDescriptionI18nKey, getTranslatedMetricDescription } from '../default-metric-descriptions'
+
+describe('default metric descriptions', () => {
+  it('should resolve descriptions for kebab-case metric ids', () => {
+    expect(getDefaultMetricDescription('context-precision')).toContain('retrieval pipeline returns little noise')
+    expect(getDefaultMetricDescription('answer-correctness')).toContain('factual accuracy and completeness')
+  })
+
+  it('should normalize snake_case metric ids from backend payloads', () => {
+    expect(getDefaultMetricDescription('CONTEXT_RECALL')).toContain('does not miss important supporting evidence')
+    expect(getDefaultMetricDescription('TOOL_CORRECTNESS')).toContain('tool-use strategy matches the expected behavior')
+  })
+
+  it('should support the legacy relevance alias', () => {
+    expect(getDefaultMetricDescription('relevance')).toContain('addresses the user\'s question')
+  })
+
+  it('should resolve i18n keys for builtin metrics', () => {
+    expect(getDefaultMetricDescriptionI18nKey('context-precision')).toBe('metrics.builtin.description.contextPrecision')
+    expect(getDefaultMetricDescriptionI18nKey('ANSWER_RELEVANCY')).toBe('metrics.builtin.description.answerRelevancy')
+  })
+
+  it('should use translated content when translation key exists', () => {
+    const t = vi.fn((key: string, options?: { defaultValue?: string }) => {
+      if (key === 'metrics.builtin.description.faithfulness')
+        return '忠实性中文文案'
+
+      return options?.defaultValue ?? key
+    })
+
+    expect(getTranslatedMetricDescription(t as never, 'faithfulness')).toBe('忠实性中文文案')
+    expect(getTranslatedMetricDescription(t as never, 'latency', 'Latency fallback')).toBe('Latency fallback')
+  })
+})
diff --git a/web/app/components/evaluation/__tests__/index.spec.tsx b/web/app/components/evaluation/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..4f8db5a32d
--- /dev/null
+++ b/web/app/components/evaluation/__tests__/index.spec.tsx
@@ -0,0 +1,519 @@
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Evaluation from '..'
+import ConditionsSection from '../components/conditions-section'
+import { useEvaluationStore } from '../store'
+
+const mockUpload = vi.hoisted(() => vi.fn())
+const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
+const mockUseEvaluationConfig = vi.hoisted(() => vi.fn())
+const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
+const mockUseSaveEvaluationConfigMutation = vi.hoisted(() => vi.fn())
+const mockUseStartEvaluationRunMutation = vi.hoisted(() => vi.fn())
+const mockUsePublishedPipelineInfo = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelList: () => ({
+    data: [{
+      provider: 'openai',
+      models: [{ model: 'gpt-4o-mini' }],
+    }],
+  }),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  default: ({
+    defaultModel,
+    onSelect,
+  }: {
+    defaultModel?: { provider: string, model: string }
+    onSelect: (model: { provider: string, model: string }) => void
+  }) => (
+    <div>
+      <div data-testid="evaluation-model-selector">
+        {defaultModel ? `${defaultModel.provider}:${defaultModel.model}` : 'empty'}
+      </div>
+      <button
+        type="button"
+        onClick={() => onSelect({ provider: 'openai', model: 'gpt-4o-mini' })}
+      >
+        select-model
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/service/base', () => ({
+  upload: (...args: unknown[]) => mockUpload(...args),
+}))
+
+vi.mock('@/service/use-evaluation', () => ({
+  useEvaluationConfig: (...args: unknown[]) => mockUseEvaluationConfig(...args),
+  useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
+  useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
+  useSaveEvaluationConfigMutation: (...args: unknown[]) => mockUseSaveEvaluationConfigMutation(...args),
+  useStartEvaluationRunMutation: (...args: unknown[]) => mockUseStartEvaluationRunMutation(...args),
+}))
+
+vi.mock('@/service/use-pipeline', () => ({
+  usePublishedPipelineInfo: (...args: unknown[]) => mockUsePublishedPipelineInfo(...args),
+}))
+
+vi.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset: { pipeline_id: string } }) => unknown) =>
+    selector({ dataset: { pipeline_id: 'pipeline-1' } }),
+}))
+
+vi.mock('@/service/use-workflow', () => ({
+  useAppWorkflow: () => ({
+    data: {
+      graph: {
+        nodes: [{
+          id: 'start',
+          data: {
+            type: 'start',
+            variables: [{
+              variable: 'query',
+              type: 'text-input',
+            }],
+          },
+        }],
+      },
+    },
+    isLoading: false,
+  }),
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetPublishedWorkflow: () => ({
+    data: {
+      graph: {
+        nodes: [{
+          id: 'start',
+          data: {
+            type: 'start',
+            variables: [{
+              variable: 'query',
+              type: 'text-input',
+            }],
+          },
+        }],
+      },
+    },
+    isLoading: false,
+  }),
+}))
+
+const renderWithQueryClient = (ui: ReactNode) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  })
+
+  return render(ui, {
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    ),
+  })
+}
+
+describe('Evaluation', () => {
+  beforeEach(() => {
+    useEvaluationStore.setState({ resources: {} })
+    vi.clearAllMocks()
+    mockUseEvaluationConfig.mockReturnValue({
+      data: null,
+    })
+
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['answer-correctness', 'faithfulness', 'context-precision', 'context-recall', 'context-relevance'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'answer-correctness': [
+            { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+          ],
+          'faithfulness': [
+            { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+          ],
+        })
+      },
+    })
+    mockUseSaveEvaluationConfigMutation.mockReturnValue({
+      isPending: false,
+      mutate: vi.fn(),
+    })
+    mockUseStartEvaluationRunMutation.mockReturnValue({
+      isPending: false,
+      mutate: vi.fn(),
+    })
+    mockUsePublishedPipelineInfo.mockReturnValue({
+      data: {
+        graph: {
+          nodes: [{
+            id: 'knowledge-node',
+            data: {
+              type: 'knowledge-index',
+              title: 'Knowledge Base',
+            },
+          }],
+          edges: [],
+        },
+      },
+    })
+    mockUpload.mockResolvedValue({
+      id: 'uploaded-file-id',
+      name: 'evaluation.csv',
+    })
+  })
+
+  it('should search, select metric nodes, and save evaluation config', () => {
+    const saveConfig = vi.fn()
+    mockUseSaveEvaluationConfigMutation.mockReturnValue({
+      isPending: false,
+      mutate: saveConfig,
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-1" />)
+
+    expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('openai:gpt-4o-mini')
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchNodeOrMetrics'), {
+      target: { value: 'does-not-exist' },
+    })
+
+    expect(screen.getByText('evaluation.metrics.noResults')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchNodeOrMetrics'), {
+      target: { value: 'faith' },
+    })
+
+    fireEvent.click(screen.getByTestId('evaluation-metric-node-faithfulness-node-faithfulness'))
+    expect(screen.getAllByText('Faithfulness').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Retriever Node').length).toBeGreaterThan(0)
+
+    fireEvent.change(screen.getByPlaceholderText('evaluation.metrics.searchNodeOrMetrics'), {
+      target: { value: '' },
+    })
+
+    fireEvent.click(screen.getByTestId('evaluation-metric-node-answer-correctness-node-answer'))
+    expect(screen.getAllByText('Answer Correctness').length).toBeGreaterThan(0)
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+    expect(saveConfig).toHaveBeenCalledWith({
+      params: {
+        targetType: 'apps',
+        targetId: 'app-1',
+      },
+      body: {
+        evaluation_model: 'gpt-4o-mini',
+        evaluation_model_provider: 'openai',
+        default_metrics: [
+          {
+            metric: 'faithfulness',
+            value_type: 'number',
+            node_info_list: [
+              { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+            ],
+          },
+          {
+            metric: 'answer-correctness',
+            value_type: 'number',
+            node_info_list: [
+              { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+            ],
+          },
+        ],
+        customized_metrics: null,
+        judgment_config: null,
+      },
+    }, {
+      onSuccess: expect.any(Function),
+      onError: expect.any(Function),
+    })
+  })
+
+  it('should hide the value row for empty operators', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-2'
+    const store = useEvaluationStore.getState()
+    let conditionId = ''
+
+    act(() => {
+      store.ensureResource(resourceType, resourceId)
+      store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+      store.addBuiltinMetric(resourceType, resourceId, 'faithfulness', [
+        { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+      ])
+      store.addCondition(resourceType, resourceId)
+
+      const condition = useEvaluationStore.getState().resources['apps:app-2'].judgmentConfig.conditions[0]
+      conditionId = condition.id
+      store.updateConditionOperator(resourceType, resourceId, conditionId, '=')
+    })
+
+    let rerender: ReturnType<typeof render>['rerender']
+    act(() => {
+      ({ rerender } = renderWithQueryClient(<Evaluation resourceType={resourceType} resourceId={resourceId} />))
+    })
+
+    expect(screen.getByPlaceholderText('evaluation.conditions.valuePlaceholder')).toBeInTheDocument()
+
+    act(() => {
+      store.updateConditionOperator(resourceType, resourceId, conditionId, 'is null')
+      rerender(<Evaluation resourceType={resourceType} resourceId={resourceId} />)
+    })
+
+    expect(screen.queryByPlaceholderText('evaluation.conditions.valuePlaceholder')).not.toBeInTheDocument()
+  })
+
+  it('should add a condition from grouped metric dropdown items', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-conditions-dropdown'
+    const store = useEvaluationStore.getState()
+
+    act(() => {
+      store.ensureResource(resourceType, resourceId)
+      store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+      store.addBuiltinMetric(resourceType, resourceId, 'faithfulness', [
+        { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+      ])
+      store.addCustomMetric(resourceType, resourceId)
+
+      const customMetric = useEvaluationStore.getState().resources['apps:app-conditions-dropdown'].metrics.find(metric => metric.kind === 'custom-workflow')!
+      store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+        workflowId: 'workflow-1',
+        workflowAppId: 'workflow-app-1',
+        workflowName: 'Review Workflow',
+      })
+      store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+        id: 'reason',
+        valueType: 'string',
+      }])
+    })
+
+    render(<ConditionsSection resourceType={resourceType} resourceId={resourceId} />)
+
+    fireEvent.click(screen.getByRole('combobox', { name: 'evaluation.conditions.addCondition' }))
+
+    expect(screen.getByText('Faithfulness')).toBeInTheDocument()
+    expect(screen.getByText('Review Workflow')).toBeInTheDocument()
+    expect(screen.getByText('Retriever Node')).toBeInTheDocument()
+    expect(screen.getByText('reason')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.conditions.valueTypes.number')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.conditions.valueTypes.string')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('option', { name: /reason/i }))
+
+    const condition = useEvaluationStore.getState().resources['apps:app-conditions-dropdown'].judgmentConfig.conditions[0]
+
+    expect(condition.variableSelector).toEqual(['workflow-1', 'reason'])
+    expect(screen.getAllByText('Review Workflow').length).toBeGreaterThan(0)
+  })
+
+  it('should render the metric no-node empty state', () => {
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['context-precision'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'context-precision': [],
+        })
+      },
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-3" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    expect(screen.getByText('evaluation.metrics.noNodesInWorkflow')).toBeInTheDocument()
+  })
+
+  it('should render the global empty state when no metrics are available', () => {
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: [],
+      },
+      isLoading: false,
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-4" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    expect(screen.getByText('evaluation.metrics.noResults')).toBeInTheDocument()
+  })
+
+  it('should show more nodes when a metric has more than three nodes', () => {
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['answer-correctness'],
+      },
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'answer-correctness': [
+            { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+            { node_id: 'node-2', title: 'LLM 2', type: 'llm' },
+            { node_id: 'node-3', title: 'LLM 3', type: 'llm' },
+            { node_id: 'node-4', title: 'LLM 4', type: 'llm' },
+          ],
+        })
+      },
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="apps" resourceId="app-5" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+    expect(screen.getByText('LLM 3')).toBeInTheDocument()
+    expect(screen.queryByText('LLM 4')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.showMore' }))
+
+    expect(screen.getByText('LLM 4')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'evaluation.metrics.showLess' })).toBeInTheDocument()
+  })
+
+  it('should render the pipeline-specific layout without auto-selecting a judge model', () => {
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-1" />)
+
+    expect(screen.getByTestId('evaluation-model-selector')).toHaveTextContent('empty')
+    expect(screen.getByText('evaluation.history.columns.time')).toBeInTheDocument()
+    expect(screen.getByText('Context Precision')).toBeInTheDocument()
+    expect(screen.getByText('Context Recall')).toBeInTheDocument()
+    expect(screen.getByText('Context Relevance')).toBeInTheDocument()
+    expect(screen.getByText('evaluation.results.empty')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeDisabled()
+  })
+
+  it('should render selected pipeline metrics from config with the default threshold input', () => {
+    mockUseEvaluationConfig.mockReturnValue({
+      data: {
+        evaluation_model: null,
+        evaluation_model_provider: null,
+        default_metrics: [{
+          metric: 'context-precision',
+        }],
+        customized_metrics: null,
+        judgment_config: null,
+      },
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
+
+    expect(screen.getByText('Context Precision')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('0.85')).toBeInTheDocument()
+  })
+
+  it('should enable pipeline batch actions after selecting a judge model and metric', () => {
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-2" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
+    fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
+
+    expect(screen.getByDisplayValue('0.85')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'evaluation.batch.downloadTemplate' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' })).toBeEnabled()
+  })
+
+  it('should upload and start a pipeline evaluation run', async () => {
+    const startRun = vi.fn()
+    mockUseStartEvaluationRunMutation.mockReturnValue({
+      isPending: false,
+      mutate: startRun,
+    })
+    mockUpload.mockResolvedValue({
+      id: 'file-1',
+      name: 'pipeline-evaluation.csv',
+    })
+
+    renderWithQueryClient(<Evaluation resourceType="datasets" resourceId="dataset-run" />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
+    fireEvent.click(screen.getByRole('button', { name: /Context Precision/i }))
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.pipeline.uploadAndRun' }))
+
+    expect(screen.getAllByText('query').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Expect Results').length).toBeGreaterThan(0)
+
+    const fileInput = document.querySelector<HTMLInputElement>('input[type="file"][accept=".csv,.xlsx"]')
+    expect(fileInput).toBeInTheDocument()
+
+    fireEvent.change(fileInput!, {
+      target: {
+        files: [new File(['query,Expect Results'], 'pipeline-evaluation.csv', { type: 'text/csv' })],
+      },
+    })
+
+    await waitFor(() => {
+      expect(mockUpload).toHaveBeenCalledWith({
+        xhr: expect.any(XMLHttpRequest),
+        data: expect.any(FormData),
+      })
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'evaluation.batch.run' }))
+
+    await waitFor(() => {
+      expect(startRun).toHaveBeenCalledWith({
+        params: {
+          targetType: 'datasets',
+          targetId: 'dataset-run',
+        },
+        body: {
+          evaluation_model: 'gpt-4o-mini',
+          evaluation_model_provider: 'openai',
+          default_metrics: [{
+            metric: 'context-precision',
+            value_type: 'number',
+            node_info_list: [
+              { node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' },
+            ],
+          }],
+          customized_metrics: null,
+          judgment_config: {
+            logical_operator: 'and',
+            conditions: [{
+              variable_selector: ['knowledge-node', 'context-precision'],
+              comparison_operator: '≥',
+              value: '0.85',
+            }],
+          },
+          file_id: 'file-1',
+        },
+      }, {
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      })
+    })
+  })
+})
diff --git a/web/app/components/evaluation/__tests__/store.spec.ts b/web/app/components/evaluation/__tests__/store.spec.ts
new file mode 100644
index 0000000000..150f285b52
--- /dev/null
+++ b/web/app/components/evaluation/__tests__/store.spec.ts
@@ -0,0 +1,456 @@
+import type { EvaluationConfig } from '@/types/evaluation'
+import { getEvaluationMockConfig } from '../mock'
+import {
+  getAllowedOperators,
+  isCustomMetricConfigured,
+  requiresConditionValue,
+  useEvaluationStore,
+} from '../store'
+import { buildEvaluationConfigPayload, buildEvaluationRunRequest } from '../store-utils'
+
+describe('evaluation store', () => {
+  beforeEach(() => {
+    useEvaluationStore.setState({ resources: {} })
+  })
+
+  it('should configure a custom metric mapping to a valid state', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-1'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    const initialMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.kind === 'custom-workflow')
+    expect(initialMetric).toBeDefined()
+    expect(isCustomMetricConfigured(initialMetric!)).toBe(false)
+
+    store.setCustomMetricWorkflow(resourceType, resourceId, initialMetric!.id, {
+      workflowId: config.workflowOptions[0].id,
+      workflowAppId: 'custom-workflow-app-id',
+      workflowName: config.workflowOptions[0].label,
+    })
+    store.syncCustomMetricMappings(resourceType, resourceId, initialMetric!.id, ['query'])
+    store.syncCustomMetricOutputs(resourceType, resourceId, initialMetric!.id, [{
+      id: 'score',
+      valueType: 'number',
+    }])
+
+    const syncedMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
+    store.updateCustomMetricMapping(resourceType, resourceId, initialMetric!.id, syncedMetric!.customConfig!.mappings[0].id, {
+      outputVariableId: 'answer',
+    })
+
+    const configuredMetric = useEvaluationStore.getState().resources['apps:app-1'].metrics.find(metric => metric.id === initialMetric!.id)
+    expect(isCustomMetricConfigured(configuredMetric!)).toBe(true)
+    expect(configuredMetric!.customConfig!.workflowAppId).toBe('custom-workflow-app-id')
+    expect(configuredMetric!.customConfig!.workflowName).toBe(config.workflowOptions[0].label)
+    expect(configuredMetric!.customConfig!.outputs).toEqual([{ id: 'score', valueType: 'number' }])
+  })
+
+  it('should only add one custom metric', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-custom-limit'
+    const store = useEvaluationStore.getState()
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    expect(
+      useEvaluationStore
+        .getState()
+        .resources['apps:app-custom-limit']
+        .metrics
+        .filter(metric => metric.kind === 'custom-workflow'),
+    ).toHaveLength(1)
+  })
+
+  it('should add and remove builtin metrics', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-2'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addBuiltinMetric(resourceType, resourceId, config.builtinMetrics[1].id)
+
+    const addedMetric = useEvaluationStore.getState().resources['apps:app-2'].metrics.find(metric => metric.optionId === config.builtinMetrics[1].id)
+    expect(addedMetric).toBeDefined()
+
+    store.removeMetric(resourceType, resourceId, addedMetric!.id)
+
+    expect(useEvaluationStore.getState().resources['apps:app-2'].metrics.some(metric => metric.id === addedMetric!.id)).toBe(false)
+  })
+
+  it('should upsert builtin metric node selections and prune stale conditions', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-4'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+    const metricId = config.builtinMetrics[0].id
+
+    store.ensureResource(resourceType, resourceId)
+    store.addBuiltinMetric(resourceType, resourceId, metricId, [
+      { node_id: 'node-1', title: 'Answer Node', type: 'answer' },
+    ])
+    store.addCondition(resourceType, resourceId)
+
+    store.addBuiltinMetric(resourceType, resourceId, metricId, [
+      { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
+    ])
+
+    const state = useEvaluationStore.getState().resources['apps:app-4']
+    const metric = state.metrics.find(item => item.optionId === metricId)
+
+    expect(metric?.nodeInfoList).toEqual([
+      { node_id: 'node-2', title: 'Retriever Node', type: 'retriever' },
+    ])
+    expect(state.metrics.filter(item => item.optionId === metricId)).toHaveLength(1)
+    expect(state.judgmentConfig.conditions).toHaveLength(0)
+  })
+
+  it('should build numeric conditions from selected metrics', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-conditions'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addBuiltinMetric(resourceType, resourceId, config.builtinMetrics[0].id, [
+      { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+    ])
+    store.setConditionLogicalOperator(resourceType, resourceId, 'or')
+    store.addCondition(resourceType, resourceId)
+
+    const state = useEvaluationStore.getState().resources['apps:app-conditions']
+    const condition = state.judgmentConfig.conditions[0]
+
+    expect(state.judgmentConfig.logicalOperator).toBe('or')
+    expect(condition.variableSelector).toEqual(['node-answer', 'answer-correctness'])
+    expect(condition.comparisonOperator).toBe('=')
+    expect(getAllowedOperators(state.metrics, condition.variableSelector)).toEqual(['=', '≠', '>', '<', '≥', '≤', 'is null', 'is not null'])
+  })
+
+  it('should add a condition from the selected custom metric output', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-condition-selector'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    const customMetric = useEvaluationStore.getState().resources['apps:app-condition-selector'].metrics.find(metric => metric.kind === 'custom-workflow')!
+    store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+      workflowId: config.workflowOptions[0].id,
+      workflowAppId: 'custom-workflow-app-id',
+      workflowName: config.workflowOptions[0].label,
+    })
+    store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+      id: 'reason',
+      valueType: 'string',
+    }])
+
+    store.addCondition(resourceType, resourceId, [config.workflowOptions[0].id, 'reason'])
+
+    const condition = useEvaluationStore.getState().resources['apps:app-condition-selector'].judgmentConfig.conditions[0]
+
+    expect(condition.variableSelector).toEqual([config.workflowOptions[0].id, 'reason'])
+    expect(condition.comparisonOperator).toBe('contains')
+    expect(condition.value).toBeNull()
+  })
+
+  it('should clear values for operators without values', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-3'
+    const store = useEvaluationStore.getState()
+    const config = getEvaluationMockConfig(resourceType)
+
+    store.ensureResource(resourceType, resourceId)
+    store.addCustomMetric(resourceType, resourceId)
+
+    const customMetric = useEvaluationStore.getState().resources['apps:app-3'].metrics.find(metric => metric.kind === 'custom-workflow')!
+    store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+      workflowId: config.workflowOptions[0].id,
+      workflowAppId: 'custom-workflow-app-id',
+      workflowName: config.workflowOptions[0].label,
+    })
+    store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+      id: 'reason',
+      valueType: 'string',
+    }])
+    store.addCondition(resourceType, resourceId)
+
+    const condition = useEvaluationStore.getState().resources['apps:app-3'].judgmentConfig.conditions[0]
+
+    store.updateConditionMetric(resourceType, resourceId, condition.id, [config.workflowOptions[0].id, 'reason'])
+    store.updateConditionValue(resourceType, resourceId, condition.id, 'needs follow-up')
+    store.updateConditionOperator(resourceType, resourceId, condition.id, 'empty')
+
+    const updatedCondition = useEvaluationStore.getState().resources['apps:app-3'].judgmentConfig.conditions[0]
+
+    expect(requiresConditionValue('empty')).toBe(false)
+    expect(updatedCondition.value).toBeNull()
+  })
+
+  it('should hydrate resource state from judgment_config', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-5'
+    const store = useEvaluationStore.getState()
+    const config: EvaluationConfig = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [{
+        metric: 'faithfulness',
+        node_info_list: [
+          { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
+        ],
+      }],
+      customized_metrics: {
+        evaluation_workflow_id: 'workflow-precision-review',
+        input_fields: {
+          query: 'answer',
+        },
+        output_fields: [{
+          variable: 'reason',
+          value_type: 'string',
+        }],
+      },
+      judgment_config: {
+        logical_operator: 'or',
+        conditions: [{
+          variable_selector: ['node-1', 'faithfulness'],
+          comparison_operator: '≥',
+          value: '0.9',
+        }],
+      },
+    }
+
+    store.ensureResource(resourceType, resourceId)
+    store.setBatchTab(resourceType, resourceId, 'history')
+    store.setUploadedFileName(resourceType, resourceId, 'batch.csv')
+    useEvaluationStore.setState(state => ({
+      resources: {
+        ...state.resources,
+        'apps:app-5': {
+          ...state.resources['apps:app-5'],
+          batchRecords: [{
+            id: 'batch-1',
+            fileName: 'batch.csv',
+            status: 'success',
+            startedAt: '10:00:00',
+            summary: 'App evaluation batch',
+          }],
+        },
+      },
+    }))
+    store.hydrateResource(resourceType, resourceId, config)
+
+    const hydratedState = useEvaluationStore.getState().resources['apps:app-5']
+
+    expect(hydratedState.judgeModelId).toBe('openai::gpt-4o-mini')
+    expect(hydratedState.metrics).toHaveLength(2)
+    expect(hydratedState.metrics[0].optionId).toBe('faithfulness')
+    expect(hydratedState.metrics[0].threshold).toBe(0.85)
+    expect(hydratedState.metrics[0].nodeInfoList).toEqual([
+      { node_id: 'node-1', title: 'Retriever', type: 'retriever' },
+    ])
+    expect(hydratedState.metrics[1].kind).toBe('custom-workflow')
+    expect(hydratedState.metrics[1].customConfig?.workflowId).toBe('workflow-precision-review')
+    expect(hydratedState.metrics[1].customConfig?.mappings[0].inputVariableId).toBe('query')
+    expect(hydratedState.metrics[1].customConfig?.mappings[0].outputVariableId).toBe('answer')
+    expect(hydratedState.metrics[1].customConfig?.outputs).toEqual([{ id: 'reason', valueType: 'string' }])
+    expect(hydratedState.judgmentConfig.logicalOperator).toBe('or')
+    expect(hydratedState.judgmentConfig.conditions[0]).toMatchObject({
+      variableSelector: ['node-1', 'faithfulness'],
+      comparisonOperator: '≥',
+      value: '0.9',
+    })
+    expect(hydratedState.activeBatchTab).toBe('history')
+    expect(hydratedState.uploadedFileName).toBe('batch.csv')
+    expect(hydratedState.batchRecords).toHaveLength(1)
+  })
+
+  it('should build an evaluation config save payload from resource state', () => {
+    const resourceType = 'apps'
+    const resourceId = 'app-save-config'
+    const store = useEvaluationStore.getState()
+
+    store.ensureResource(resourceType, resourceId)
+    store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+    store.addBuiltinMetric(resourceType, resourceId, 'faithfulness', [
+      { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+    ])
+    store.addCustomMetric(resourceType, resourceId)
+
+    const customMetric = useEvaluationStore.getState().resources['apps:app-save-config'].metrics.find(metric => metric.kind === 'custom-workflow')!
+    store.setCustomMetricWorkflow(resourceType, resourceId, customMetric.id, {
+      workflowId: 'workflow-precision-review',
+      workflowAppId: 'evaluation-workflow-app-id',
+      workflowName: 'Precision Review',
+    })
+    store.syncCustomMetricMappings(resourceType, resourceId, customMetric.id, ['query'])
+    store.syncCustomMetricOutputs(resourceType, resourceId, customMetric.id, [{
+      id: 'score',
+      valueType: 'number',
+    }])
+
+    const syncedMetric = useEvaluationStore.getState().resources['apps:app-save-config'].metrics.find(metric => metric.id === customMetric.id)!
+    store.updateCustomMetricMapping(resourceType, resourceId, customMetric.id, syncedMetric.customConfig!.mappings[0].id, {
+      outputVariableId: '{{#node-answer.output#}}',
+    })
+    store.addCondition(resourceType, resourceId, ['workflow-precision-review', 'score'])
+
+    const condition = useEvaluationStore.getState().resources['apps:app-save-config'].judgmentConfig.conditions[0]
+    store.updateConditionOperator(resourceType, resourceId, condition.id, '≥')
+    store.updateConditionValue(resourceType, resourceId, condition.id, '0.8')
+
+    const resource = useEvaluationStore.getState().resources['apps:app-save-config']
+    const expectedPayload = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [{
+        metric: 'faithfulness',
+        value_type: 'number',
+        node_info_list: [
+          { node_id: 'node-faithfulness', title: 'Retriever Node', type: 'retriever' },
+        ],
+      }],
+      customized_metrics: {
+        evaluation_workflow_id: 'evaluation-workflow-app-id',
+        input_fields: {
+          query: '{{#node-answer.output#}}',
+        },
+        output_fields: [{
+          variable: 'score',
+          value_type: 'number',
+        }],
+      },
+      judgment_config: {
+        logical_operator: 'and',
+        conditions: [{
+          variable_selector: ['evaluation-workflow-app-id', 'score'],
+          comparison_operator: '≥',
+          value: '0.8',
+        }],
+      },
+    }
+
+    expect(buildEvaluationConfigPayload(resource, resourceType)).toEqual(expectedPayload)
+    expect(buildEvaluationRunRequest(resource, 'file-1', resourceType)).toEqual({
+      ...expectedPayload,
+      file_id: 'file-1',
+    })
+  })
+
+  it('should hydrate pipeline metrics from fixed knowledge-index conditions', () => {
+    const resourceType = 'datasets'
+    const resourceId = 'dataset-hydrate'
+    const store = useEvaluationStore.getState()
+    const config: EvaluationConfig = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [{
+        metric: 'context-precision',
+        node_info_list: [
+          { node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' },
+        ],
+      }],
+      customized_metrics: {
+        evaluation_workflow_id: 'should-be-ignored',
+        input_fields: {
+          query: 'answer',
+        },
+        output_fields: [{
+          variable: 'score',
+          value_type: 'number',
+        }],
+      },
+      judgment_config: {
+        logical_operator: 'or',
+        conditions: [{
+          variable_selector: ['knowledge-node', 'context-precision'],
+          comparison_operator: '≥',
+          value: '0.92',
+        }],
+      },
+    }
+
+    store.hydrateResource(resourceType, resourceId, config)
+
+    const hydratedState = useEvaluationStore.getState().resources['datasets:dataset-hydrate']
+
+    expect(hydratedState.judgeModelId).toBe('openai::gpt-4o-mini')
+    expect(hydratedState.metrics).toHaveLength(1)
+    expect(hydratedState.metrics[0]).toMatchObject({
+      optionId: 'context-precision',
+      kind: 'builtin',
+      valueType: 'number',
+      threshold: 0.92,
+      nodeInfoList: [
+        { node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' },
+      ],
+    })
+  })
+
+  it('should build pipeline judgment payload from metric thresholds', () => {
+    const resourceType = 'datasets'
+    const resourceId = 'dataset-save-config'
+    const store = useEvaluationStore.getState()
+    const knowledgeNodeInfo = [{ node_id: 'knowledge-node', title: 'Knowledge Base', type: 'knowledge-index' }]
+
+    store.ensureResource(resourceType, resourceId)
+    store.setJudgeModel(resourceType, resourceId, 'openai::gpt-4o-mini')
+    store.addBuiltinMetric(resourceType, resourceId, 'context-precision', knowledgeNodeInfo)
+    store.addBuiltinMetric(resourceType, resourceId, 'context-recall', knowledgeNodeInfo)
+
+    const resourceWithMetrics = useEvaluationStore.getState().resources['datasets:dataset-save-config']
+    const contextPrecisionMetric = resourceWithMetrics.metrics.find(metric => metric.optionId === 'context-precision')!
+    const contextRecallMetric = resourceWithMetrics.metrics.find(metric => metric.optionId === 'context-recall')!
+
+    store.updateMetricThreshold(resourceType, resourceId, contextPrecisionMetric.id, 0.91)
+    store.updateMetricThreshold(resourceType, resourceId, contextRecallMetric.id, 0.88)
+
+    const resource = useEvaluationStore.getState().resources['datasets:dataset-save-config']
+    const expectedPayload = {
+      evaluation_model: 'gpt-4o-mini',
+      evaluation_model_provider: 'openai',
+      default_metrics: [
+        {
+          metric: 'context-precision',
+          value_type: 'number',
+          node_info_list: knowledgeNodeInfo,
+        },
+        {
+          metric: 'context-recall',
+          value_type: 'number',
+          node_info_list: knowledgeNodeInfo,
+        },
+      ],
+      customized_metrics: null,
+      judgment_config: {
+        logical_operator: 'and',
+        conditions: [
+          {
+            variable_selector: ['knowledge-node', 'context-precision'],
+            comparison_operator: '≥',
+            value: '0.91',
+          },
+          {
+            variable_selector: ['knowledge-node', 'context-recall'],
+            comparison_operator: '≥',
+            value: '0.88',
+          },
+        ],
+      },
+    }
+
+    expect(buildEvaluationConfigPayload(resource, resourceType)).toEqual(expectedPayload)
+    expect(buildEvaluationRunRequest(resource, 'file-1', resourceType)).toEqual({
+      ...expectedPayload,
+      file_id: 'file-1',
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
new file mode 100644
index 0000000000..4da6f6fe48
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/history-tab.tsx
@@ -0,0 +1,202 @@
+import type { EvaluationResourceProps } from '../../types'
+import type { EvaluationLog, EvaluationLogFile } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
+import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Pagination from '@/app/components/base/pagination'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { consoleClient, consoleQuery } from '@/service/client'
+import { downloadUrl } from '@/utils/download'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+
+const PAGE_SIZE = 16
+const LOADING_ROW_IDS = ['1', '2', '3', '4', '5', '6']
+
+const formatCreatedAt = (createdAt: string) => {
+  if (!createdAt)
+    return '-'
+
+  return createdAt.includes('T') ? createdAt.slice(0, 10) : createdAt
+}
+
+const getLogRunId = (record: EvaluationLog) => {
+  return record.run_id ?? record.evaluation_run_id ?? record.id ?? null
+}
+
+const HistoryTab = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const [page, setPage] = useState(0)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setSelectedRunId = useEvaluationStore(state => state.setSelectedRunId)
+  const logsQuery = useQuery({
+    ...consoleQuery.evaluation.logs.queryOptions({
+      input: {
+        params: {
+          targetType: resourceType,
+          targetId: resourceId,
+        },
+        query: {
+          page: page + 1,
+          page_size: PAGE_SIZE,
+        },
+      },
+      refetchOnWindowFocus: false,
+    }),
+    placeholderData: keepPreviousData,
+  })
+  const fileDownloadMutation = useMutation({
+    mutationFn: async (file: EvaluationLogFile) => {
+      const fileInfo = await consoleClient.evaluation.file({
+        params: {
+          targetType: resourceType,
+          targetId: resourceId,
+          fileId: file.id,
+        },
+      })
+
+      downloadUrl({ url: fileInfo.download_url, fileName: file.name })
+    },
+  })
+  const records = useMemo(() => logsQuery.data?.data ?? [], [logsQuery.data?.data])
+  const total = logsQuery.data?.total ?? 0
+  const isInitialLoading = logsQuery.isLoading && !logsQuery.data
+
+  useEffect(() => {
+    if (resource.selectedRunId)
+      return
+
+    const firstRunId = records.map(getLogRunId).find((runId): runId is string => !!runId)
+    if (firstRunId)
+      setSelectedRunId(resourceType, resourceId, firstRunId)
+  }, [records, resource.selectedRunId, resourceId, resourceType, setSelectedRunId])
+
+  return (
+    <div className="flex min-h-full flex-col">
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <table className="w-full table-fixed border-collapse overflow-hidden rounded-md">
+          <colgroup>
+            <col className="w-[120px]" />
+            <col className="w-[95px]" />
+            <col className="w-[80px]" />
+            <col className="w-[67px]" />
+            <col className="w-[40px]" />
+          </colgroup>
+          <thead>
+            <tr className="border-b border-divider-regular">
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">
+                <span className="inline-flex items-center gap-0.5">
+                  {t('history.columns.time')}
+                  <span aria-hidden="true" className="i-ri-arrow-down-line h-3.5 w-3.5" />
+                </span>
+              </th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.creator')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.version')}</th>
+              <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('history.columns.status')}</th>
+              <th className="h-7 text-center text-text-tertiary">
+                <span aria-hidden="true" className="i-ri-download-2-line inline-block h-3.5 w-3.5" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {isInitialLoading && LOADING_ROW_IDS.map(rowId => (
+              <tr key={rowId} className="border-b border-divider-subtle">
+                <td colSpan={5} className="h-10 px-3">
+                  <div className="h-4 animate-pulse rounded bg-background-section" />
+                </td>
+              </tr>
+            ))}
+            {!isInitialLoading && records.map(record => (
+              <tr
+                key={`${record.created_at}-${record.test_file.id}`}
+                className={cn(
+                  'border-b border-divider-subtle',
+                  getLogRunId(record) && 'cursor-pointer hover:bg-state-base-hover',
+                  getLogRunId(record) === resource.selectedRunId && 'bg-background-default-subtle',
+                )}
+                onClick={() => {
+                  const runId = getLogRunId(record)
+                  if (runId)
+                    setSelectedRunId(resourceType, resourceId, runId)
+                }}
+              >
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{formatCreatedAt(record.created_at)}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.created_by}</td>
+                <td className="system-sm-regular h-10 truncate px-3 text-text-secondary">{record.version || '-'}</td>
+                <td className="h-10 px-3 text-center">
+                  {record.result_file
+                    ? <span aria-label={t('history.status.completed')} className="i-ri-checkbox-circle-fill inline-block h-4 w-4 text-util-colors-green-green-600" />
+                    : <span aria-label={t('history.status.running')} className="i-ri-loader-4-line inline-block h-4 w-4 animate-spin text-text-accent" />}
+                </td>
+                <td className="h-10 text-center">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={(
+                        <button
+                          type="button"
+                          aria-label={t('history.actions.open')}
+                          className="inline-flex h-8 w-8 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                          onClick={event => event.stopPropagation()}
+                        />
+                      )}
+                    >
+                      <span aria-hidden="true" className="i-ri-more-2-fill h-4 w-4" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent popupClassName="w-[180px] rounded-lg border-[0.5px] border-components-panel-border py-1 shadow-lg">
+                      <DropdownMenuItem
+                        className="gap-2"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          fileDownloadMutation.mutate(record.test_file)
+                        }}
+                      >
+                        <span aria-hidden="true" className="i-ri-file-download-line h-4 w-4" />
+                        {t('history.actions.downloadTestFile')}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        className="gap-2"
+                        disabled={!record.result_file}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          if (record.result_file)
+                            fileDownloadMutation.mutate(record.result_file)
+                        }}
+                      >
+                        <span aria-hidden="true" className="i-ri-download-2-line h-4 w-4" />
+                        {t('history.actions.downloadResultFile')}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {!isInitialLoading && records.length === 0 && (
+          <div className="system-sm-regular rounded-2xl border border-dashed border-divider-subtle px-4 py-10 text-center text-text-tertiary">
+            {t('history.empty')}
+          </div>
+        )}
+      </div>
+      {total > PAGE_SIZE && (
+        <Pagination
+          className="px-0 py-3"
+          current={page}
+          limit={PAGE_SIZE}
+          total={total}
+          onChange={setPage}
+        />
+      )}
+    </div>
+  )
+}
+
+export default HistoryTab
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
new file mode 100644
index 0000000000..99ee09af11
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import type { BatchTestTab, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import { toast } from '@/app/components/base/ui/toast'
+import { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
+import { isEvaluationRunnable, useEvaluationResource, useEvaluationStore } from '../../store'
+import { buildEvaluationConfigPayload } from '../../store-utils'
+import { TAB_CLASS_NAME } from '../../utils'
+import HistoryTab from './history-tab'
+import InputFieldsTab from './input-fields-tab'
+
+const BATCH_TABS: BatchTestTab[] = ['input-fields', 'history']
+
+const BatchTestPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const tabLabels: Record<BatchTestTab, string> = {
+    'input-fields': t('batch.tabs.input-fields'),
+    'history': t('batch.tabs.history'),
+  }
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const saveConfigMutation = useSaveEvaluationConfigMutation()
+  const isRunnable = isEvaluationRunnable(resource)
+  const isPanelReady = !!resource.judgeModelId && resource.metrics.length > 0
+
+  const handleSave = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    const body = buildEvaluationConfigPayload(resource, resourceType)
+
+    if (!body) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    saveConfigMutation.mutate({
+      params: {
+        targetType: resourceType,
+        targetId: resourceId,
+      },
+      body,
+    }, {
+      onSuccess: () => {
+        toast.success(tCommon('api.saved'))
+      },
+      onError: () => {
+        toast.error(t('config.saveFailed'))
+      },
+    })
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default">
+      <div className="px-6 py-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="system-xl-semibold text-text-primary">{t('batch.title')}</div>
+            <div className="system-sm-regular mt-1 text-text-tertiary">{t('batch.description')}</div>
+          </div>
+          <Button
+            className="shrink-0"
+            variant="primary"
+            disabled={!isRunnable}
+            loading={saveConfigMutation.isPending}
+            onClick={handleSave}
+          >
+            {tCommon('operation.save')}
+          </Button>
+        </div>
+        <div className="mt-4 rounded-xl border border-divider-subtle bg-components-card-bg p-3">
+          <div className="flex items-start gap-3">
+            <span aria-hidden="true" className="mt-0.5 i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning" />
+            <div className="system-xs-regular text-text-tertiary">{t('batch.noticeDescription')}</div>
+          </div>
+        </div>
+      </div>
+      <div className="border-b border-divider-subtle px-6">
+        <div className="flex gap-4">
+          {BATCH_TABS.map(tab => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                TAB_CLASS_NAME,
+                'flex-none rounded-none border-b-2 border-transparent px-0 pt-2 pb-2.5 uppercase',
+                resource.activeBatchTab === tab ? 'border-text-accent-secondary text-text-primary' : 'text-text-tertiary',
+              )}
+              onClick={() => setBatchTab(resourceType, resourceId, tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', !isPanelReady && 'opacity-50')}>
+        {resource.activeBatchTab === 'input-fields' && (
+          <InputFieldsTab
+            resourceType={resourceType}
+            resourceId={resourceId}
+            isPanelReady={isPanelReady}
+            isRunnable={isRunnable}
+          />
+        )}
+        {resource.activeBatchTab === 'history' && <HistoryTab resourceType={resourceType} resourceId={resourceId} />}
+      </div>
+    </div>
+  )
+}
+
+export default BatchTestPanel
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
new file mode 100644
index 0000000000..27b1b062cb
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -0,0 +1,71 @@
+import type { EvaluationResourceProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import { getEvaluationMockConfig } from '../../mock'
+import InputFieldsRequirements from './input-fields/input-fields-requirements'
+import UploadRunPopover from './input-fields/upload-run-popover'
+import { useInputFieldsActions } from './input-fields/use-input-fields-actions'
+import { usePublishedInputFields } from './input-fields/use-published-input-fields'
+
+type InputFieldsTabProps = EvaluationResourceProps & {
+  isPanelReady: boolean
+  isRunnable: boolean
+}
+
+const InputFieldsTab = ({
+  resourceType,
+  resourceId,
+  isPanelReady,
+  isRunnable,
+}: InputFieldsTabProps) => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const { inputFields, isInputFieldsLoading } = usePublishedInputFields(resourceType, resourceId)
+  const actions = useInputFieldsActions({
+    resourceType,
+    resourceId,
+    inputFields,
+    isInputFieldsLoading,
+    isPanelReady,
+    isRunnable,
+    templateFileName: config.templateFileName,
+  })
+
+  return (
+    <div className="space-y-5">
+      <InputFieldsRequirements
+        inputFields={inputFields}
+        isLoading={isInputFieldsLoading}
+      />
+      <div className="space-y-3">
+        <Button variant="secondary" className="w-full justify-center" disabled={!actions.canDownloadTemplate} onClick={actions.handleDownloadTemplate}>
+          <span aria-hidden="true" className="mr-1 i-ri-download-line h-4 w-4" />
+          {t('batch.downloadTemplate')}
+        </Button>
+        <UploadRunPopover
+          open={actions.isUploadPopoverOpen}
+          onOpenChange={actions.setIsUploadPopoverOpen}
+          triggerDisabled={actions.uploadButtonDisabled}
+          inputFields={inputFields}
+          currentFileName={actions.currentFileName}
+          currentFileExtension={actions.currentFileExtension}
+          currentFileSize={actions.currentFileSize}
+          isFileUploading={actions.isFileUploading}
+          isRunDisabled={actions.isRunDisabled}
+          isRunning={actions.isRunning}
+          onUploadFile={actions.handleUploadFile}
+          onClearUploadedFile={actions.handleClearUploadedFile}
+          onDownloadTemplate={actions.handleDownloadTemplate}
+          onRun={actions.handleRun}
+        />
+      </div>
+      {!isRunnable && (
+        <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-2 system-xs-regular text-text-tertiary">
+          {t('batch.validation')}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default InputFieldsTab
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx
new file mode 100644
index 0000000000..83201ea5a7
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-requirements.tsx
@@ -0,0 +1,45 @@
+import type { InputField } from './input-fields-utils'
+import { useTranslation } from 'react-i18next'
+
+type InputFieldsRequirementsProps = {
+  inputFields: InputField[]
+  isLoading: boolean
+}
+
+const InputFieldsRequirements = ({
+  inputFields,
+  isLoading,
+}: InputFieldsRequirementsProps) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div>
+      <div className="system-md-semibold text-text-primary">{t('batch.requirementsTitle')}</div>
+      <div className="mt-1 system-xs-regular text-text-tertiary">{t('batch.requirementsDescription')}</div>
+      <div className="mt-3 rounded-xl bg-background-section p-3">
+        {isLoading && (
+          <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
+            {t('batch.loadingInputFields')}
+          </div>
+        )}
+        {!isLoading && inputFields.length === 0 && (
+          <div className="px-1 py-0.5 system-xs-regular text-text-tertiary">
+            {t('batch.noInputFields')}
+          </div>
+        )}
+        {!isLoading && inputFields.map(field => (
+          <div key={field.name} className="flex items-center py-1">
+            <div className="rounded px-1 py-0.5 system-xs-medium text-text-tertiary">
+              {field.name}
+            </div>
+            <div className="text-[10px] leading-3 text-text-quaternary">
+              {field.type}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default InputFieldsRequirements
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
new file mode 100644
index 0000000000..5a71b81d06
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/input-fields-utils.ts
@@ -0,0 +1,54 @@
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { InputVar, Node } from '@/app/components/workflow/types'
+import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+
+export type InputField = {
+  name: string
+  type: string
+}
+
+export const getGraphNodes = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.nodes) ? graph.nodes as Node[] : []
+}
+
+export const getStartNodeInputFields = (nodes?: Node[]): InputField[] => {
+  const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
+  const variables = startNode?.data.variables
+
+  if (!Array.isArray(variables))
+    return []
+
+  return variables
+    .filter((variable): variable is InputVar => typeof variable.variable === 'string' && !!variable.variable)
+    .map(variable => ({
+      name: variable.variable,
+      type: inputVarTypeToVarType(variable.type ?? InputVarType.textInput),
+    }))
+}
+
+const escapeCsvCell = (value: string) => {
+  if (!/[",\n\r]/.test(value))
+    return value
+
+  return `"${value.replace(/"/g, '""')}"`
+}
+
+export const buildTemplateCsvContent = (inputFields: InputField[]) => {
+  return `${inputFields.map(field => escapeCsvCell(field.name)).join(',')}\n`
+}
+
+export const getFileExtension = (fileName: string) => {
+  const extension = fileName.split('.').pop()
+  return extension && extension !== fileName ? extension.toUpperCase() : ''
+}
+
+export const getExampleValue = (field: InputField, booleanLabel: string) => {
+  if (field.type === 'number')
+    return '0.7'
+
+  if (field.type === 'boolean')
+    return booleanLabel
+
+  return field.name
+}
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
new file mode 100644
index 0000000000..e19209ffb5
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -0,0 +1,189 @@
+import type { ChangeEvent, DragEvent } from 'react'
+import type { InputField } from './input-fields-utils'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { getExampleValue } from './input-fields-utils'
+
+type UploadRunPopoverProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  triggerDisabled: boolean
+  triggerLabel?: string
+  inputFields: InputField[]
+  currentFileName: string | null | undefined
+  currentFileExtension: string
+  currentFileSize: string | number
+  isFileUploading: boolean
+  isRunDisabled: boolean
+  isRunning: boolean
+  onUploadFile: (file: File | undefined) => void
+  onClearUploadedFile: () => void
+  onDownloadTemplate: () => void
+  onRun: () => void
+}
+
+const UploadRunPopover = ({
+  open,
+  onOpenChange,
+  triggerDisabled,
+  triggerLabel,
+  inputFields,
+  currentFileName,
+  currentFileExtension,
+  currentFileSize,
+  isFileUploading,
+  isRunDisabled,
+  isRunning,
+  onUploadFile,
+  onClearUploadedFile,
+  onDownloadTemplate,
+  onRun,
+}: UploadRunPopoverProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const previewFields = inputFields.slice(0, 3)
+  const booleanExampleValue = t('conditions.boolean.true')
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onUploadFile(event.target.files?.[0])
+    event.target.value = ''
+  }
+
+  const handleDropFile = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    onUploadFile(event.dataTransfer.files?.[0])
+  }
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={(
+          <Button className="w-full justify-center" variant="primary" disabled={triggerDisabled}>
+            {triggerLabel ?? t('batch.uploadAndRun')}
+          </Button>
+        )}
+      />
+      <PopoverContent
+        placement="bottom-end"
+        sideOffset={8}
+        popupClassName="w-[402px] overflow-hidden rounded-lg border border-components-panel-border p-0 shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]"
+      >
+        <div className="flex flex-col bg-components-panel-bg">
+          <div className="flex flex-col gap-4 p-4">
+            <input
+              ref={fileInputRef}
+              hidden
+              type="file"
+              accept=".csv,.xlsx"
+              onChange={handleFileChange}
+            />
+            {currentFileName
+              ? (
+                  <div className="flex h-20 items-center gap-3 rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3">
+                    <div className="flex p-3">
+                      <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
+                    </div>
+                    <div className="min-w-0 flex-1 py-1 pr-2">
+                      <div className="system-xs-medium truncate text-text-secondary">
+                        {currentFileName}
+                      </div>
+                      <div className="system-2xs-medium mt-0.5 flex h-3 items-center gap-1 text-text-tertiary">
+                        {!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
+                        {!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
+                        {!!currentFileSize && <span>{currentFileSize}</span>}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 pr-3">
+                      {isFileUploading && (
+                        <span aria-hidden="true" className="i-ri-loader-4-line h-4 w-4 animate-spin text-text-accent" />
+                      )}
+                      <button
+                        type="button"
+                        className="rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                        onClick={onClearUploadedFile}
+                        aria-label={t('batch.removeUploadedFile')}
+                      >
+                        <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                )
+              : (
+                  <div
+                    className="flex h-20 w-full items-center justify-center gap-3 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg p-3 text-left hover:border-components-button-secondary-border"
+                    onDragOver={event => event.preventDefault()}
+                    onDrop={handleDropFile}
+                  >
+                    <button
+                      type="button"
+                      className="flex shrink-0 p-3"
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <span aria-hidden="true" className="i-ri-file-upload-line h-6 w-6 text-text-tertiary" />
+                      <span className="sr-only">{t('batch.uploadTitle')}</span>
+                    </button>
+                    <div className="min-w-0 flex-1 text-left">
+                      <div className="system-md-regular text-text-secondary">
+                        {t('batch.uploadDropzonePrefix')}
+                        {' '}
+                        <span className="system-md-semibold">{t('batch.uploadDropzoneEmphasis')}</span>
+                        {' '}
+                        {t('batch.uploadDropzoneSuffix')}
+                      </div>
+                      <div className="system-xs-regular mt-0.5 text-text-tertiary">
+                        {t('batch.uploadDropzoneDownloadPrefix')}
+                        {' '}
+                        <button
+                          type="button"
+                          className="text-text-accent hover:underline"
+                          onClick={onDownloadTemplate}
+                        >
+                          {t('batch.uploadDropzoneDownloadLink')}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+            {!!previewFields.length && (
+              <div className="space-y-1">
+                <div className="system-md-semibold text-text-secondary">{t('batch.example')}</div>
+                <div className="flex overflow-hidden rounded-lg border border-divider-regular">
+                  {previewFields.map((field, index) => (
+                    <div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
+                      <div className="system-xs-medium-uppercase min-h-8 border-b border-divider-regular px-3 py-2 text-text-tertiary">
+                        {field.name}
+                      </div>
+                      <div className="system-sm-regular min-h-8 px-3 py-2 text-text-secondary">
+                        {getExampleValue(field, booleanExampleValue)}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex items-end justify-end gap-2 border-t border-components-panel-border px-4 py-4">
+            <Button variant="secondary" className="rounded-lg" onClick={() => onOpenChange(false)}>
+              {tCommon('operation.cancel')}
+            </Button>
+            <Button className="flex-1 justify-center rounded-lg" variant="primary" disabled={isRunDisabled} loading={isRunning} onClick={onRun}>
+              <span aria-hidden="true" className="mr-1 i-ri-play-fill h-5 w-5" />
+              {t('batch.run')}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default UploadRunPopover
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
new file mode 100644
index 0000000000..8db1b0fbdd
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-input-fields-actions.ts
@@ -0,0 +1,167 @@
+import type { EvaluationResourceProps } from '../../../types'
+import type { InputField } from './input-fields-utils'
+import { useMutation } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
+import { upload } from '@/service/base'
+import { useStartEvaluationRunMutation } from '@/service/use-evaluation'
+import { formatFileSize } from '@/utils/format'
+import { useEvaluationResource, useEvaluationStore } from '../../../store'
+import { buildEvaluationRunRequest } from '../../../store-utils'
+import { buildTemplateCsvContent, getFileExtension } from './input-fields-utils'
+
+type UploadedFileMeta = {
+  name: string
+  size: number
+}
+
+type UseInputFieldsActionsParams = EvaluationResourceProps & {
+  inputFields: InputField[]
+  isInputFieldsLoading: boolean
+  isPanelReady: boolean
+  isRunnable: boolean
+  templateFileName: string
+}
+
+export const useInputFieldsActions = ({
+  resourceType,
+  resourceId,
+  inputFields,
+  isInputFieldsLoading,
+  isPanelReady,
+  isRunnable,
+  templateFileName,
+}: UseInputFieldsActionsParams) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setBatchTab = useEvaluationStore(state => state.setBatchTab)
+  const setSelectedRunId = useEvaluationStore(state => state.setSelectedRunId)
+  const setUploadedFile = useEvaluationStore(state => state.setUploadedFile)
+  const setUploadedFileName = useEvaluationStore(state => state.setUploadedFileName)
+  const startRunMutation = useStartEvaluationRunMutation()
+  const [isUploadPopoverOpen, setIsUploadPopoverOpen] = useState(false)
+  const [uploadedFileMeta, setUploadedFileMeta] = useState<UploadedFileMeta | null>(null)
+  const uploadMutation = useMutation({
+    mutationFn: (file: File) => {
+      const formData = new FormData()
+      formData.append('file', file)
+
+      return upload({
+        xhr: new XMLHttpRequest(),
+        data: formData,
+      })
+    },
+    onSuccess: (uploadedFile, file) => {
+      setUploadedFile(resourceType, resourceId, {
+        id: uploadedFile.id,
+        name: typeof uploadedFile.name === 'string' ? uploadedFile.name : file.name,
+      })
+    },
+    onError: () => {
+      setUploadedFileMeta(null)
+      setUploadedFile(resourceType, resourceId, null)
+      toast.error(t('batch.uploadError'))
+    },
+  })
+
+  const isFileUploading = uploadMutation.isPending
+  const isRunning = startRunMutation.isPending
+  const uploadedFileId = resource.uploadedFileId
+  const currentFileName = uploadedFileMeta?.name ?? resource.uploadedFileName
+  const canDownloadTemplate = isPanelReady && !isInputFieldsLoading && inputFields.length > 0
+  const isRunDisabled = !isRunnable || !uploadedFileId || isFileUploading || isRunning
+  const uploadButtonDisabled = !isPanelReady || isInputFieldsLoading || isRunning
+
+  const handleDownloadTemplate = () => {
+    if (!inputFields.length) {
+      toast.warning(t('batch.noInputFields'))
+      return
+    }
+
+    const content = buildTemplateCsvContent(inputFields)
+    const link = document.createElement('a')
+    link.href = `data:text/csv;charset=utf-8,${encodeURIComponent(content)}`
+    link.download = templateFileName
+    link.click()
+  }
+
+  const handleRun = () => {
+    if (!isRunnable) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    if (isFileUploading) {
+      toast.warning(t('batch.uploading'))
+      return
+    }
+
+    if (!uploadedFileId) {
+      toast.warning(t('batch.fileRequired'))
+      return
+    }
+
+    const body = buildEvaluationRunRequest(resource, uploadedFileId, resourceType)
+
+    if (!body) {
+      toast.warning(t('batch.validation'))
+      return
+    }
+
+    startRunMutation.mutate({
+      params: {
+        targetType: resourceType,
+        targetId: resourceId,
+      },
+      body,
+    }, {
+      onSuccess: (run) => {
+        toast.success(t('batch.runStarted'))
+        setSelectedRunId(resourceType, resourceId, run.id)
+        setIsUploadPopoverOpen(false)
+        setBatchTab(resourceType, resourceId, 'history')
+      },
+      onError: () => {
+        toast.error(t('batch.runFailed'))
+      },
+    })
+  }
+
+  const handleUploadFile = (file: File | undefined) => {
+    if (!file) {
+      setUploadedFileMeta(null)
+      setUploadedFile(resourceType, resourceId, null)
+      return
+    }
+
+    setUploadedFileMeta({
+      name: file.name,
+      size: file.size,
+    })
+    setUploadedFileName(resourceType, resourceId, file.name)
+    uploadMutation.mutate(file)
+  }
+
+  const handleClearUploadedFile = () => {
+    setUploadedFileMeta(null)
+    setUploadedFile(resourceType, resourceId, null)
+  }
+
+  return {
+    canDownloadTemplate,
+    currentFileExtension: currentFileName ? getFileExtension(currentFileName) : '',
+    currentFileName,
+    currentFileSize: uploadedFileMeta ? formatFileSize(uploadedFileMeta.size) : '',
+    handleClearUploadedFile,
+    handleDownloadTemplate,
+    handleRun,
+    handleUploadFile,
+    isFileUploading,
+    isRunning,
+    isRunDisabled,
+    isUploadPopoverOpen,
+    setIsUploadPopoverOpen,
+    uploadButtonDisabled,
+  }
+}
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
new file mode 100644
index 0000000000..a319603026
--- /dev/null
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/use-published-input-fields.ts
@@ -0,0 +1,29 @@
+import type { EvaluationResourceType } from '../../../types'
+import { useMemo } from 'react'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import { useAppWorkflow } from '@/service/use-workflow'
+import { getGraphNodes, getStartNodeInputFields } from './input-fields-utils'
+
+export const usePublishedInputFields = (
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  const { data: currentAppWorkflow, isLoading: isAppWorkflowLoading } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
+  const { data: currentSnippetWorkflow, isLoading: isSnippetWorkflowLoading } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
+
+  const inputFields = useMemo(() => {
+    if (resourceType === 'apps')
+      return getStartNodeInputFields(currentAppWorkflow?.graph.nodes)
+
+    if (resourceType === 'snippets')
+      return getStartNodeInputFields(getGraphNodes(currentSnippetWorkflow?.graph))
+
+    return []
+  }, [currentAppWorkflow?.graph.nodes, currentSnippetWorkflow?.graph, resourceType])
+
+  return {
+    inputFields,
+    isInputFieldsLoading: (resourceType === 'apps' && isAppWorkflowLoading)
+      || (resourceType === 'snippets' && isSnippetWorkflowLoading),
+  }
+}
diff --git a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
new file mode 100644
index 0000000000..cbe44c05b2
--- /dev/null
+++ b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+} from '@/app/components/base/ui/select'
+import { useEvaluationStore } from '../../store'
+import { getConditionMetricValueTypeTranslationKey } from '../../utils'
+
+type AddConditionSelectProps = EvaluationResourceProps & {
+  metricOptionGroups: ConditionMetricOptionGroup[]
+  disabled: boolean
+}
+
+const AddConditionSelect = ({
+  resourceType,
+  resourceId,
+  metricOptionGroups,
+  disabled,
+}: AddConditionSelectProps) => {
+  const { t } = useTranslation('evaluation')
+  const addCondition = useEvaluationStore(state => state.addCondition)
+  const [selectKey, setSelectKey] = useState(0)
+
+  return (
+    <Select key={selectKey}>
+      <SelectTrigger
+        aria-label={t('conditions.addCondition')}
+        className={cn(
+          'inline-flex w-auto min-w-0 border-none bg-transparent px-0 py-0 text-text-accent shadow-none hover:bg-transparent focus-visible:bg-transparent',
+          disabled && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+        )}
+        disabled={disabled}
+      >
+        <span aria-hidden="true" className="i-ri-add-line h-4 w-4" />
+        {t('conditions.addCondition')}
+      </SelectTrigger>
+      <SelectContent placement="bottom-start" popupClassName="w-[320px]">
+        {metricOptionGroups.map(group => (
+          <SelectGroup key={group.label}>
+            <SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
+            {group.options.map(option => (
+              <SelectItem
+                key={option.id}
+                value={option.id}
+                className="h-auto gap-0 px-3 py-2"
+                onClick={() => {
+                  addCondition(resourceType, resourceId, option.variableSelector)
+                  setSelectKey(current => current + 1)
+                }}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <span className="system-sm-medium truncate text-text-secondary">{option.itemLabel}</span>
+                  <span className="system-xs-medium ml-auto shrink-0 text-text-tertiary">
+                    {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
+                  </span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default AddConditionSelect
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
new file mode 100644
index 0000000000..c37fb615dc
--- /dev/null
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -0,0 +1,302 @@
+'use client'
+
+import type {
+  ComparisonOperator,
+  ConditionMetricOption,
+  EvaluationResourceProps,
+  JudgmentConditionItem,
+} from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/app/components/base/ui/select'
+import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
+import {
+  buildConditionMetricOptions,
+  getComparisonOperatorLabel,
+  getConditionMetricValueTypeTranslationKey,
+  groupConditionMetricOptions,
+  isSelectorEqual,
+  serializeVariableSelector,
+} from '../../utils'
+
+type ConditionMetricLabelProps = {
+  metric?: ConditionMetricOption
+  placeholder: string
+}
+
+type ConditionMetricSelectProps = {
+  metric?: ConditionMetricOption
+  metricOptions: ConditionMetricOption[]
+  placeholder: string
+  onChange: (variableSelector: [string, string]) => void
+}
+
+type ConditionOperatorSelectProps = {
+  operator: ComparisonOperator
+  operators: ComparisonOperator[]
+  onChange: (operator: ComparisonOperator) => void
+}
+
+type ConditionValueInputProps = {
+  metric?: ConditionMetricOption
+  condition: JudgmentConditionItem
+  onChange: (value: string | string[] | boolean | null) => void
+}
+
+type ConditionGroupProps = EvaluationResourceProps
+
+const getMetricValueTypeIconClassName = (valueType: ConditionMetricOption['valueType']) => {
+  if (valueType === 'number')
+    return 'i-ri-hashtag'
+
+  if (valueType === 'boolean')
+    return 'i-ri-checkbox-circle-line'
+
+  return 'i-ri-bar-chart-box-line'
+}
+
+const ConditionMetricLabel = ({
+  metric,
+  placeholder,
+}: ConditionMetricLabelProps) => {
+  if (!metric)
+    return <span className="system-sm-regular px-1 text-components-input-text-placeholder">{placeholder}</span>
+
+  return (
+    <div className="flex min-w-0 items-center gap-2 px-1">
+      <div className="inline-flex h-6 min-w-0 items-center gap-1 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-[5px] shadow-xs">
+        <span className={cn(getMetricValueTypeIconClassName(metric.valueType), 'h-3 w-3 shrink-0 text-text-secondary')} />
+        <span className="system-xs-medium truncate text-text-secondary">{metric.itemLabel}</span>
+      </div>
+      <span className="system-xs-regular shrink-0 text-text-tertiary">{metric.groupLabel}</span>
+    </div>
+  )
+}
+
+const ConditionMetricSelect = ({
+  metric,
+  metricOptions,
+  placeholder,
+  onChange,
+}: ConditionMetricSelectProps) => {
+  const { t } = useTranslation('evaluation')
+  const groupedMetricOptions = useMemo(() => {
+    return groupConditionMetricOptions(metricOptions)
+  }, [metricOptions])
+
+  return (
+    <Select
+      value={serializeVariableSelector(metric?.variableSelector)}
+      onValueChange={(value) => {
+        const nextMetric = metricOptions.find(option => serializeVariableSelector(option.variableSelector) === value)
+        if (nextMetric)
+          onChange(nextMetric.variableSelector)
+      }}
+    >
+      <SelectTrigger className="h-auto bg-transparent px-1 py-1 hover:bg-transparent focus-visible:bg-transparent">
+        <ConditionMetricLabel metric={metric} placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent popupClassName="w-[360px]">
+        {groupedMetricOptions.map(group => (
+          <SelectGroup key={group.label}>
+            <SelectGroupLabel className="system-xs-medium-uppercase px-3 pt-2 pb-1 text-text-tertiary">{group.label}</SelectGroupLabel>
+            {group.options.map(option => (
+              <SelectItem key={option.id} value={serializeVariableSelector(option.variableSelector)}>
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  <span className={cn(getMetricValueTypeIconClassName(option.valueType), 'h-3.5 w-3.5 shrink-0 text-text-tertiary')} />
+                  <span className="truncate">{option.itemLabel}</span>
+                  <span className="system-xs-medium ml-auto shrink-0 text-text-quaternary">
+                    {t(getConditionMetricValueTypeTranslationKey(option.valueType))}
+                  </span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const ConditionOperatorSelect = ({
+  operator,
+  operators,
+  onChange,
+}: ConditionOperatorSelectProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Select value={operator} onValueChange={value => value && onChange(value as ComparisonOperator)}>
+      <SelectTrigger className="h-8 w-auto min-w-[88px] gap-1 rounded-md bg-transparent px-1.5 py-0 hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+        <span className="system-xs-medium truncate text-text-secondary">{getComparisonOperatorLabel(operator, t)}</span>
+      </SelectTrigger>
+      <SelectContent className="z-[1002]" popupClassName="w-[240px] bg-components-panel-bg-blur backdrop-blur-[10px]">
+        {operators.map(nextOperator => (
+          <SelectItem key={nextOperator} value={nextOperator}>
+            {getComparisonOperatorLabel(nextOperator, t)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const ConditionValueInput = ({
+  metric,
+  condition,
+  onChange,
+}: ConditionValueInputProps) => {
+  const { t } = useTranslation('evaluation')
+
+  if (!metric || !requiresConditionValue(condition.comparisonOperator))
+    return null
+
+  if (metric.valueType === 'boolean') {
+    return (
+      <div className="px-2 py-1.5">
+        <Select value={condition.value === null ? '' : String(condition.value)} onValueChange={nextValue => onChange(nextValue === 'true')}>
+          <SelectTrigger className="bg-transparent hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt">
+            <SelectValue placeholder={t('conditions.selectValue')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">{t('conditions.boolean.true')}</SelectItem>
+            <SelectItem value="false">{t('conditions.boolean.false')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  const isMultiValue = condition.comparisonOperator === 'in' || condition.comparisonOperator === 'not in'
+  const inputValue = Array.isArray(condition.value)
+    ? condition.value.join(', ')
+    : typeof condition.value === 'boolean'
+      ? ''
+      : condition.value ?? ''
+
+  return (
+    <div className="px-2 py-1.5">
+      <Input
+        type={metric.valueType === 'number' && !isMultiValue ? 'number' : 'text'}
+        value={inputValue}
+        className="border-none bg-transparent shadow-none hover:border-none hover:bg-state-base-hover-alt focus:border-none focus:bg-state-base-hover-alt focus:shadow-none"
+        placeholder={t('conditions.valuePlaceholder')}
+        onChange={(e) => {
+          if (isMultiValue) {
+            onChange(e.target.value.split(',').map(item => item.trim()).filter(Boolean))
+            return
+          }
+
+          onChange(e.target.value === '' ? null : e.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+const ConditionGroup = ({
+  resourceType,
+  resourceId,
+}: ConditionGroupProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const metricOptions = useMemo(() => buildConditionMetricOptions(resource.metrics), [resource.metrics])
+  const logicalLabels = {
+    and: t('conditions.logical.and'),
+    or: t('conditions.logical.or'),
+  }
+  const setConditionLogicalOperator = useEvaluationStore(state => state.setConditionLogicalOperator)
+  const removeCondition = useEvaluationStore(state => state.removeCondition)
+  const updateConditionMetric = useEvaluationStore(state => state.updateConditionMetric)
+  const updateConditionOperator = useEvaluationStore(state => state.updateConditionOperator)
+  const updateConditionValue = useEvaluationStore(state => state.updateConditionValue)
+
+  return (
+    <div className="rounded-2xl border border-divider-subtle bg-components-card-bg p-4">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <div className="flex rounded-lg border border-divider-subtle bg-background-default-subtle p-1">
+            {(['and', 'or'] as const).map(operator => (
+              <button
+                key={operator}
+                type="button"
+                className={cn(
+                  'system-xs-medium-uppercase rounded-md px-3 py-1.5',
+                  resource.judgmentConfig.logicalOperator === operator
+                    ? 'bg-components-card-bg text-text-primary shadow-xs'
+                    : 'text-text-tertiary',
+                )}
+                onClick={() => setConditionLogicalOperator(resourceType, resourceId, operator)}
+              >
+                {logicalLabels[operator]}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {resource.judgmentConfig.conditions.map((condition) => {
+          const metric = metricOptions.find(option => isSelectorEqual(option.variableSelector, condition.variableSelector))
+          const allowedOperators = getAllowedOperators(resource.metrics, condition.variableSelector)
+          const showValue = !!metric && requiresConditionValue(condition.comparisonOperator)
+
+          return (
+            <div key={condition.id} className="flex items-start overflow-hidden rounded-lg">
+              <div className="min-w-0 flex-1 rounded-lg bg-components-input-bg-normal">
+                <div className="flex items-center gap-0 pr-1">
+                  <div className="min-w-0 flex-1 py-1">
+                    <ConditionMetricSelect
+                      metric={metric}
+                      metricOptions={metricOptions}
+                      placeholder={t('conditions.fieldPlaceholder')}
+                      onChange={value => updateConditionMetric(resourceType, resourceId, condition.id, value)}
+                    />
+                  </div>
+                  <div className="h-3 w-px bg-divider-regular" />
+                  <ConditionOperatorSelect
+                    operator={condition.comparisonOperator}
+                    operators={allowedOperators}
+                    onChange={value => updateConditionOperator(resourceType, resourceId, condition.id, value)}
+                  />
+                </div>
+                {showValue && (
+                  <div className="border-t border-divider-subtle">
+                    <ConditionValueInput
+                      metric={metric}
+                      condition={condition}
+                      onChange={value => updateConditionValue(resourceType, resourceId, condition.id, value)}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="pt-1 pl-1">
+                <Button
+                  size="small"
+                  variant="ghost"
+                  aria-label={t('conditions.removeCondition')}
+                  onClick={() => removeCondition(resourceType, resourceId, condition.id)}
+                >
+                  <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default ConditionGroup
diff --git a/web/app/components/evaluation/components/conditions-section/index.tsx b/web/app/components/evaluation/components/conditions-section/index.tsx
new file mode 100644
index 0000000000..fb28a56a38
--- /dev/null
+++ b/web/app/components/evaluation/components/conditions-section/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useEvaluationResource } from '../../store'
+import { buildConditionMetricOptions, groupConditionMetricOptions } from '../../utils'
+import { InlineSectionHeader } from '../section-header'
+import AddConditionSelect from './add-condition-select'
+import ConditionGroup from './condition-group'
+
+const ConditionsSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const conditionMetricOptions = useMemo(() => buildConditionMetricOptions(resource.metrics), [resource.metrics])
+  const groupedConditionMetricOptions = useMemo(() => groupConditionMetricOptions(conditionMetricOptions), [conditionMetricOptions])
+  const canAddCondition = conditionMetricOptions.length > 0
+
+  return (
+    <section className="max-w-[700px] py-4">
+      <InlineSectionHeader
+        title={t('conditions.title')}
+        tooltip={t('conditions.description')}
+      />
+      <div className="mt-2 space-y-4">
+        {resource.judgmentConfig.conditions.length === 0 && (
+          <div className="rounded-xl bg-background-section px-3 py-3 system-xs-regular text-text-tertiary">
+            {t('conditions.emptyDescription')}
+          </div>
+        )}
+        {resource.judgmentConfig.conditions.length > 0 && (
+          <ConditionGroup
+            resourceType={resourceType}
+            resourceId={resourceId}
+          />
+        )}
+        <AddConditionSelect
+          resourceType={resourceType}
+          resourceId={resourceId}
+          metricOptionGroups={groupedConditionMetricOptions}
+          disabled={!canAddCondition}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default ConditionsSection
diff --git a/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..5f2c026908
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/__tests__/index.spec.tsx
@@ -0,0 +1,364 @@
+import type { EvaluationMetric } from '../../../types'
+import type { CodeNodeType } from '@/app/components/workflow/nodes/code/types'
+import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { Node } from '@/app/components/workflow/types'
+import type { SnippetWorkflow } from '@/types/snippet'
+import type { FetchWorkflowDraftResponse } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
+import CustomMetricEditorCard from '..'
+import { useEvaluationStore } from '../../../store'
+
+const mockUseAppWorkflow = vi.hoisted(() => vi.fn())
+const mockUseSnippetPublishedWorkflow = vi.hoisted(() => vi.fn())
+const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
+const mockUseInfiniteScroll = vi.hoisted(() => vi.fn())
+const mockPublishedGraphVariablePicker = vi.hoisted(() => vi.fn())
+
+vi.mock('@/service/use-workflow', () => ({
+  useAppWorkflow: (...args: unknown[]) => mockUseAppWorkflow(...args),
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetPublishedWorkflow: (...args: unknown[]) => mockUseSnippetPublishedWorkflow(...args),
+}))
+
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
+}))
+
+vi.mock('ahooks', () => ({
+  useInfiniteScroll: (...args: unknown[]) => mockUseInfiniteScroll(...args),
+}))
+
+vi.mock('../published-graph-variable-picker', () => ({
+  default: (props: Record<string, unknown>) => {
+    mockPublishedGraphVariablePicker(props)
+    return <div data-testid="published-graph-variable-picker" />
+  },
+}))
+
+const createStartNode = (): Node<StartNodeType> => ({
+  id: 'start-node',
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.Start,
+    title: 'Start',
+    desc: '',
+    variables: [
+      {
+        variable: 'user_question',
+        label: 'User Question',
+        type: InputVarType.textInput,
+        required: true,
+      },
+      {
+        variable: 'retrieved_context',
+        label: 'Retrieved Context',
+        type: InputVarType.textInput,
+        required: true,
+      },
+    ],
+  },
+})
+
+const createEndNode = (
+  outputs: EndNodeType['outputs'],
+): Node<EndNodeType> => ({
+  id: 'end-node',
+  type: 'custom',
+  position: { x: 100, y: 0 },
+  data: {
+    type: BlockEnum.End,
+    title: 'End',
+    desc: '',
+    outputs,
+  },
+})
+
+const createCodeNode = (
+  id: string,
+  title: string,
+  outputs: Record<string, { type: VarType }>,
+): Node<CodeNodeType> => ({
+  id,
+  type: 'custom',
+  position: { x: 100, y: 0 },
+  data: {
+    type: BlockEnum.Code,
+    title,
+    desc: '',
+    code: '',
+    code_language: CodeLanguage.python3,
+    outputs: Object.fromEntries(
+      Object.entries(outputs).map(([key, value]) => [
+        key,
+        {
+          type: value.type,
+          children: null,
+        },
+      ]),
+    ),
+    variables: [],
+  },
+})
+
+const createWorkflow = (
+  nodes: Node[],
+): FetchWorkflowDraftResponse => ({
+  id: 'workflow-1',
+  graph: {
+    nodes,
+    edges: [],
+  },
+  features: {},
+  created_at: 1710000000,
+  created_by: {
+    id: 'user-1',
+    name: 'User One',
+    email: 'user-one@example.com',
+  },
+  hash: 'hash-1',
+  updated_at: 1710000001,
+  updated_by: {
+    id: 'user-2',
+    name: 'User Two',
+    email: 'user-two@example.com',
+  },
+  tool_published: true,
+  environment_variables: [],
+  conversation_variables: [],
+  version: '1',
+  marked_name: 'Evaluation Workflow',
+  marked_comment: 'Published',
+})
+
+const createSnippetWorkflow = (
+  nodes: Node[],
+): SnippetWorkflow => ({
+  id: 'snippet-workflow-1',
+  graph: {
+    nodes,
+    edges: [],
+  },
+  features: {},
+  hash: 'snippet-hash-1',
+  created_at: 1710000000,
+  updated_at: 1710000001,
+})
+
+const createMetric = (): EvaluationMetric => ({
+  id: 'metric-1',
+  optionId: 'custom-1',
+  kind: 'custom-workflow',
+  label: 'Custom Evaluator',
+  description: 'Map workflow variables to your evaluation inputs.',
+  valueType: 'number',
+  customConfig: {
+    workflowId: 'workflow-1',
+    workflowAppId: 'workflow-app-1',
+    workflowName: 'Evaluation Workflow',
+    mappings: [{
+      id: 'mapping-1',
+      inputVariableId: 'user_question',
+      outputVariableId: 'current-node.answer',
+    }, {
+      id: 'mapping-2',
+      inputVariableId: 'retrieved_context',
+      outputVariableId: 'current-node.score',
+    }],
+    outputs: [],
+  },
+})
+
+describe('CustomMetricEditorCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useEvaluationStore.setState({ resources: {} })
+    mockPublishedGraphVariablePicker.mockReset()
+
+    mockUseInfiniteScroll.mockImplementation(() => undefined)
+    mockUseAvailableEvaluationWorkflows.mockReturnValue({
+      data: {
+        pages: [{
+          items: [],
+          page: 1,
+          limit: 20,
+          has_more: false,
+        }],
+      },
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    })
+    mockUseSnippetPublishedWorkflow.mockReturnValue({ data: undefined })
+  })
+
+  // Verify the selected evaluation workflow still drives the output summary section.
+  describe('Outputs', () => {
+    it('should render the selected workflow outputs from the end node', () => {
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([
+          { variable: 'answer_score', value_selector: ['end', 'answer_score'], value_type: VarType.number },
+          { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
+        ]),
+      ])
+      const currentAppWorkflow = createWorkflow([
+        createCodeNode('current-node', 'Current Node', {
+          answer: { type: VarType.string },
+          score: { type: VarType.number },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+        if (appId === 'app-under-test')
+          return { data: currentAppWorkflow }
+
+        return { data: undefined }
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="apps"
+          resourceId="app-under-test"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(screen.getByText('evaluation.metrics.custom.outputTitle')).toBeInTheDocument()
+      expect(screen.getAllByText('answer_score').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('number').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('reason').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('string').length).toBeGreaterThan(0)
+    })
+
+    it('should hide the output section when the selected workflow has no end outputs', () => {
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([]),
+      ])
+      const currentAppWorkflow = createWorkflow([
+        createCodeNode('current-node', 'Current Node', {
+          answer: { type: VarType.string },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+        if (appId === 'app-under-test')
+          return { data: currentAppWorkflow }
+
+        return { data: undefined }
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="apps"
+          resourceId="app-under-test"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(screen.queryByText('evaluation.metrics.custom.outputTitle')).not.toBeInTheDocument()
+    })
+  })
+
+  // Verify mapping rows use workflow start variables on the left and current published graph variables on the right.
+  describe('Variable Mapping', () => {
+    it('should pass the current app published graph and saved selector values to the picker', () => {
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([
+          { variable: 'answer_score', value_selector: ['end', 'answer_score'], value_type: VarType.number },
+          { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
+        ]),
+      ])
+      const currentAppWorkflow = createWorkflow([
+        createStartNode(),
+        createCodeNode('current-node', 'Current Node', {
+          answer: { type: VarType.string },
+          score: { type: VarType.number },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+        if (appId === 'app-under-test')
+          return { data: currentAppWorkflow }
+
+        return { data: undefined }
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="apps"
+          resourceId="app-under-test"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(screen.getByText('user_question')).toBeInTheDocument()
+      expect(screen.getByText('retrieved_context')).toBeInTheDocument()
+      expect(screen.getAllByText('string')).toHaveLength(3)
+      expect(mockPublishedGraphVariablePicker).toHaveBeenCalledTimes(2)
+      expect(mockPublishedGraphVariablePicker.mock.calls[0][0]).toMatchObject({
+        nodes: currentAppWorkflow.graph.nodes,
+        edges: currentAppWorkflow.graph.edges,
+        value: 'current-node.answer',
+      })
+      expect(mockPublishedGraphVariablePicker.mock.calls[1][0]).toMatchObject({
+        nodes: currentAppWorkflow.graph.nodes,
+        edges: currentAppWorkflow.graph.edges,
+        value: 'current-node.score',
+      })
+    })
+
+    it('should use the current snippet published graph when editing a snippet evaluation', () => {
+      const selectedWorkflow = createWorkflow([
+        createStartNode(),
+        createEndNode([
+          { variable: 'reason', value_selector: ['end', 'reason'], value_type: VarType.string },
+        ]),
+      ])
+      const currentSnippetWorkflow = createSnippetWorkflow([
+        createCodeNode('snippet-node', 'Snippet Node', {
+          result: { type: VarType.string },
+        }),
+      ])
+
+      mockUseAppWorkflow.mockImplementation((appId: string) => {
+        if (appId === 'workflow-app-1')
+          return { data: selectedWorkflow }
+
+        return { data: undefined }
+      })
+      mockUseSnippetPublishedWorkflow.mockReturnValue({
+        data: currentSnippetWorkflow,
+      })
+
+      render(
+        <CustomMetricEditorCard
+          resourceType="snippets"
+          resourceId="snippet-under-test"
+          metric={createMetric()}
+        />,
+      )
+
+      expect(mockPublishedGraphVariablePicker).toHaveBeenCalledTimes(2)
+      expect(mockPublishedGraphVariablePicker.mock.calls[0][0]).toMatchObject({
+        nodes: currentSnippetWorkflow.graph.nodes,
+        edges: currentSnippetWorkflow.graph.edges,
+      })
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx b/web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx
new file mode 100644
index 0000000000..3cf8f30b99
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/__tests__/workflow-selector.spec.tsx
@@ -0,0 +1,158 @@
+import type { ComponentProps } from 'react'
+import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import WorkflowSelector from '../workflow-selector'
+
+const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
+const mockUseInfiniteScroll = vi.hoisted(() => vi.fn())
+
+let loadMoreHandler: (() => Promise<{ list: unknown[] }>) | null = null
+
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
+}))
+
+vi.mock('ahooks', () => ({
+  useInfiniteScroll: (...args: unknown[]) => mockUseInfiniteScroll(...args),
+}))
+
+const createWorkflow = (
+  overrides: Partial<AvailableEvaluationWorkflow> = {},
+): AvailableEvaluationWorkflow => ({
+  id: 'workflow-1',
+  app_id: 'app-1',
+  app_name: 'Review Workflow App',
+  type: 'evaluation',
+  version: '1',
+  marked_name: 'Review Workflow',
+  marked_comment: 'Production release',
+  hash: 'hash-1',
+  created_by: {
+    id: 'user-1',
+    name: 'User One',
+    email: 'user-one@example.com',
+  },
+  created_at: 1710000000,
+  updated_by: null,
+  updated_at: 1710000000,
+  ...overrides,
+})
+
+const setupWorkflowQueryMock = (overrides?: {
+  workflows?: AvailableEvaluationWorkflow[]
+  hasNextPage?: boolean
+  isFetchingNextPage?: boolean
+}) => {
+  const fetchNextPage = vi.fn()
+
+  mockUseAvailableEvaluationWorkflows.mockReturnValue({
+    data: {
+      pages: [{
+        items: overrides?.workflows ?? [createWorkflow()],
+        page: 1,
+        limit: 20,
+        has_more: overrides?.hasNextPage ?? false,
+      }],
+    },
+    fetchNextPage,
+    hasNextPage: overrides?.hasNextPage ?? false,
+    isFetching: false,
+    isFetchingNextPage: overrides?.isFetchingNextPage ?? false,
+    isLoading: false,
+  })
+
+  return { fetchNextPage }
+}
+
+const renderWorkflowSelector = (props?: Partial<ComponentProps<typeof WorkflowSelector>>) => {
+  return render(
+    <WorkflowSelector
+      value={null}
+      onSelect={vi.fn()}
+      {...props}
+    />,
+  )
+}
+
+describe('WorkflowSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    loadMoreHandler = null
+
+    setupWorkflowQueryMock()
+    mockUseInfiniteScroll.mockImplementation((handler) => {
+      loadMoreHandler = handler as () => Promise<{ list: unknown[] }>
+    })
+  })
+
+  // Cover trigger rendering and selected label fallback.
+  describe('Rendering', () => {
+    it('should render the workflow placeholder when value is empty', () => {
+      renderWorkflowSelector()
+
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.custom.workflowLabel' })).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.workflowPlaceholder')).toBeInTheDocument()
+    })
+
+    it('should render the selected workflow name from props when value is set', () => {
+      setupWorkflowQueryMock({ workflows: [] })
+
+      renderWorkflowSelector({
+        value: 'workflow-1',
+        selectedWorkflowName: 'Saved Review Workflow',
+      })
+
+      expect(screen.getByText('Saved Review Workflow')).toBeInTheDocument()
+    })
+  })
+
+  // Cover opening the popover and choosing one workflow option.
+  describe('Interactions', () => {
+    it('should call onSelect with the clicked workflow', async () => {
+      const onSelect = vi.fn()
+
+      renderWorkflowSelector({ onSelect })
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.custom.workflowLabel' }))
+
+      const option = await screen.findByRole('option', { name: 'Review Workflow' })
+      fireEvent.click(option)
+
+      expect(onSelect).toHaveBeenCalledWith(createWorkflow())
+    })
+  })
+
+  // Cover the infinite-scroll callback used by the ScrollArea viewport.
+  describe('Pagination', () => {
+    it('should fetch the next page when the load-more callback runs and more pages exist', async () => {
+      const { fetchNextPage } = setupWorkflowQueryMock({ hasNextPage: true })
+
+      renderWorkflowSelector()
+
+      await waitFor(() => expect(loadMoreHandler).not.toBeNull())
+
+      await act(async () => {
+        await loadMoreHandler?.()
+      })
+
+      expect(fetchNextPage).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not fetch the next page when the current request is already fetching', async () => {
+      const { fetchNextPage } = setupWorkflowQueryMock({
+        hasNextPage: true,
+        isFetchingNextPage: true,
+      })
+
+      renderWorkflowSelector()
+
+      await waitFor(() => expect(loadMoreHandler).not.toBeNull())
+
+      await act(async () => {
+        await loadMoreHandler?.()
+      })
+
+      expect(fetchNextPage).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/custom-metric-editor/index.tsx b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
new file mode 100644
index 0000000000..694e48d310
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/index.tsx
@@ -0,0 +1,217 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { Edge, InputVar, Node } from '@/app/components/workflow/types'
+import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import { useAppWorkflow } from '@/service/use-workflow'
+import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
+import MappingRow from './mapping-row'
+import WorkflowSelector from './workflow-selector'
+
+type CustomMetricEditorCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+}
+
+const getWorkflowInputVariables = (
+  nodes?: Array<Node>,
+) => {
+  const startNode = nodes?.find(node => node.data.type === BlockEnum.Start) as Node<StartNodeType> | undefined
+  if (!startNode || !Array.isArray(startNode.data.variables))
+    return []
+
+  return startNode.data.variables.map((variable: InputVar) => ({
+    id: variable.variable,
+    valueType: inputVarTypeToVarType(variable.type ?? InputVarType.textInput),
+  }))
+}
+
+const getWorkflowOutputs = (nodes?: Array<Node>) => {
+  return (nodes ?? [])
+    .filter(node => node.data.type === BlockEnum.End)
+    .flatMap((node) => {
+      const endNode = node as Node<EndNodeType>
+      if (!Array.isArray(endNode.data.outputs))
+        return []
+
+      return endNode.data.outputs
+        .filter(output => typeof output.variable === 'string' && !!output.variable)
+        .map(output => ({
+          id: output.variable,
+          valueType: typeof output.value_type === 'string' ? output.value_type : null,
+          nodeTitle: typeof endNode.data.title === 'string' && endNode.data.title ? endNode.data.title : 'End',
+        }))
+    })
+}
+
+const getWorkflowName = (workflow: {
+  marked_name?: string
+  app_name?: string
+  id: string
+}) => {
+  return workflow.marked_name || workflow.app_name || workflow.id
+}
+
+const getGraphNodes = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.nodes) ? graph.nodes as Node[] : []
+}
+
+const getGraphEdges = (graph?: Record<string, unknown>) => {
+  return Array.isArray(graph?.edges) ? graph.edges as Edge[] : []
+}
+
+const CustomMetricEditorCard = ({
+  resourceType,
+  resourceId,
+  metric,
+}: CustomMetricEditorCardProps) => {
+  const { t } = useTranslation('evaluation')
+  const setCustomMetricWorkflow = useEvaluationStore(state => state.setCustomMetricWorkflow)
+  const syncCustomMetricMappings = useEvaluationStore(state => state.syncCustomMetricMappings)
+  const syncCustomMetricOutputs = useEvaluationStore(state => state.syncCustomMetricOutputs)
+  const updateCustomMetricMapping = useEvaluationStore(state => state.updateCustomMetricMapping)
+  const { data: selectedWorkflow } = useAppWorkflow(metric.customConfig?.workflowAppId ?? '')
+  const { data: currentAppWorkflow } = useAppWorkflow(resourceType === 'apps' ? resourceId : '')
+  const { data: currentSnippetWorkflow } = useSnippetPublishedWorkflow(resourceType === 'snippets' ? resourceId : '')
+  const inputVariables = useMemo(() => {
+    return getWorkflowInputVariables(selectedWorkflow?.graph.nodes)
+  }, [selectedWorkflow?.graph.nodes])
+  const workflowOutputs = useMemo(() => {
+    return getWorkflowOutputs(selectedWorkflow?.graph.nodes)
+  }, [selectedWorkflow?.graph.nodes])
+  const publishedGraph = useMemo(() => {
+    if (resourceType === 'apps') {
+      return {
+        nodes: currentAppWorkflow?.graph.nodes ?? [],
+        edges: currentAppWorkflow?.graph.edges ?? [],
+        environmentVariables: currentAppWorkflow?.environment_variables ?? [],
+        conversationVariables: currentAppWorkflow?.conversation_variables ?? [],
+      }
+    }
+
+    return {
+      nodes: getGraphNodes(currentSnippetWorkflow?.graph),
+      edges: getGraphEdges(currentSnippetWorkflow?.graph),
+      environmentVariables: [],
+      conversationVariables: [],
+    }
+  }, [
+    currentAppWorkflow?.conversation_variables,
+    currentAppWorkflow?.environment_variables,
+    currentAppWorkflow?.graph.edges,
+    currentAppWorkflow?.graph.nodes,
+    currentSnippetWorkflow?.graph,
+    resourceType,
+  ])
+  const inputVariableIds = useMemo(() => inputVariables.map(variable => variable.id), [inputVariables])
+  const isConfigured = isCustomMetricConfigured(metric)
+
+  useEffect(() => {
+    if (!metric.customConfig?.workflowId)
+      return
+
+    const currentInputVariableIds = metric.customConfig.mappings
+      .map(mapping => mapping.inputVariableId)
+      .filter((value): value is string => !!value)
+
+    if (currentInputVariableIds.length === inputVariableIds.length
+      && currentInputVariableIds.every((value, index) => value === inputVariableIds[index])) {
+      return
+    }
+
+    syncCustomMetricMappings(resourceType, resourceId, metric.id, inputVariableIds)
+  }, [inputVariableIds, metric.customConfig?.mappings, metric.customConfig?.workflowId, metric.id, resourceId, resourceType, syncCustomMetricMappings])
+
+  useEffect(() => {
+    if (!metric.customConfig?.workflowId)
+      return
+
+    const currentOutputs = metric.customConfig.outputs
+    if (
+      currentOutputs.length === workflowOutputs.length
+      && currentOutputs.every((output, index) =>
+        output.id === workflowOutputs[index]?.id && output.valueType === workflowOutputs[index]?.valueType,
+      )
+    ) {
+      return
+    }
+
+    syncCustomMetricOutputs(resourceType, resourceId, metric.id, workflowOutputs)
+  }, [metric.customConfig?.outputs, metric.customConfig?.workflowId, metric.id, resourceId, resourceType, syncCustomMetricOutputs, workflowOutputs])
+
+  if (!metric.customConfig)
+    return null
+
+  return (
+    <div className="px-3 pt-1 pb-3">
+      <WorkflowSelector
+        value={metric.customConfig.workflowId}
+        selectedWorkflowName={metric.customConfig.workflowName ?? (selectedWorkflow ? getWorkflowName(selectedWorkflow) : null)}
+        onSelect={workflow => setCustomMetricWorkflow(resourceType, resourceId, metric.id, {
+          workflowId: workflow.id,
+          workflowAppId: workflow.app_id,
+          workflowName: getWorkflowName(workflow),
+        })}
+      />
+
+      <div className="mt-4">
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <div className="system-xs-medium-uppercase text-text-secondary">{t('metrics.custom.mappingTitle')}</div>
+        </div>
+        <div className="space-y-2">
+          {inputVariables.map((inputVariable) => {
+            const mapping = metric.customConfig?.mappings.find(item => item.inputVariableId === inputVariable.id)
+
+            return (
+              <MappingRow
+                key={inputVariable.id}
+                inputVariable={inputVariable}
+                publishedGraph={publishedGraph}
+                value={mapping?.outputVariableId ?? null}
+                onUpdate={(outputVariableId) => {
+                  if (!mapping)
+                    return
+
+                  updateCustomMetricMapping(resourceType, resourceId, metric.id, mapping.id, { outputVariableId })
+                }}
+              />
+            )
+          })}
+        </div>
+        {!isConfigured && (
+          <div className="mt-3 rounded-lg bg-background-section px-3 py-2 system-xs-regular text-text-tertiary">
+            {t('metrics.custom.mappingWarning')}
+          </div>
+        )}
+      </div>
+
+      {!!workflowOutputs.length && (
+        <div className="mt-4 py-1">
+          <div className="min-h-6 system-xs-medium-uppercase text-text-tertiary">
+            {t('metrics.custom.outputTitle')}
+          </div>
+          <div className="flex flex-wrap items-center gap-y-1 px-2 py-2 system-xs-regular text-text-tertiary">
+            {workflowOutputs.map((output, index) => (
+              <div key={`${output.nodeTitle}-${output.id}-${index}`} className="flex items-center">
+                <span className="px-1 system-xs-medium text-text-secondary">{output.id}</span>
+                {output.valueType && (
+                  <span>{output.valueType}</span>
+                )}
+                {index < workflowOutputs.length - 1 && (
+                  <span className="pl-0.5">,</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CustomMetricEditorCard
diff --git a/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx b/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
new file mode 100644
index 0000000000..1340682674
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/mapping-row.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import type {
+  ConversationVariable,
+  Edge,
+  EnvironmentVariable,
+  Node,
+} from '@/app/components/workflow/types'
+import { useTranslation } from 'react-i18next'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import PublishedGraphVariablePicker from './published-graph-variable-picker'
+
+type MappingRowProps = {
+  inputVariable: {
+    id: string
+    valueType: string
+  }
+  publishedGraph: {
+    nodes: Node[]
+    edges: Edge[]
+    environmentVariables: EnvironmentVariable[]
+    conversationVariables: ConversationVariable[]
+  }
+  value: string | null
+  onUpdate: (outputVariableId: string | null) => void
+}
+
+const MappingRow = ({
+  inputVariable,
+  publishedGraph,
+  value,
+  onUpdate,
+}: MappingRowProps) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div className="flex items-center">
+      <div className="flex h-8 w-[200px] items-center rounded-md px-2">
+        <div className="flex min-w-0 items-center gap-0.5 px-1">
+          <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+          <div className="truncate system-xs-medium text-text-secondary">{inputVariable.id}</div>
+          <div className="shrink-0 system-xs-regular text-text-tertiary">{inputVariable.valueType}</div>
+        </div>
+      </div>
+
+      <div className="flex h-8 w-9 items-center justify-center px-3 system-xs-medium text-text-tertiary">
+        <span aria-hidden="true">→</span>
+      </div>
+
+      <PublishedGraphVariablePicker
+        className="grow"
+        nodes={publishedGraph.nodes}
+        edges={publishedGraph.edges}
+        environmentVariables={publishedGraph.environmentVariables}
+        conversationVariables={publishedGraph.conversationVariables}
+        value={value}
+        placeholder={t('metrics.custom.outputPlaceholder')}
+        onChange={onUpdate}
+      />
+    </div>
+  )
+}
+
+export default MappingRow
diff --git a/web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx b/web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx
new file mode 100644
index 0000000000..4aeb6b615d
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/published-graph-variable-picker.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
+import type {
+  ConversationVariable,
+  Edge,
+  EnvironmentVariable,
+  Node,
+  ValueSelector,
+} from '@/app/components/workflow/types'
+import { useMemo } from 'react'
+import ReactFlow, { ReactFlowProvider } from 'reactflow'
+import { WorkflowContext } from '@/app/components/workflow/context'
+import { createHooksStore, HooksStoreContext } from '@/app/components/workflow/hooks-store'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import { createWorkflowStore } from '@/app/components/workflow/store/workflow'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { variableTransformer } from '@/app/components/workflow/utils/variable'
+
+type PublishedGraphVariablePickerProps = {
+  className?: string
+  nodes: Node[]
+  edges: Edge[]
+  environmentVariables?: EnvironmentVariable[]
+  conversationVariables?: ConversationVariable[]
+  placeholder: string
+  value: string | null
+  onChange: (value: string | null) => void
+}
+
+const PICKER_NODE_ID = '__evaluation-variable-picker__'
+
+const createPickerNode = (): Node<EndNodeType> => ({
+  id: PICKER_NODE_ID,
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.End,
+    title: 'End',
+    desc: '',
+    outputs: [],
+  },
+})
+
+const PublishedGraphVariablePicker = ({
+  className,
+  nodes,
+  edges,
+  environmentVariables = [],
+  conversationVariables = [],
+  placeholder,
+  value,
+  onChange,
+}: PublishedGraphVariablePickerProps) => {
+  const workflowStore = useMemo(() => {
+    const store = createWorkflowStore({})
+    store.setState({
+      isWorkflowDataLoaded: true,
+      environmentVariables,
+      conversationVariables,
+      ragPipelineVariables: [],
+      dataSourceList: [],
+    })
+    return store
+  }, [conversationVariables, environmentVariables])
+
+  const hooksStore = useMemo(() => createHooksStore({}), [])
+
+  const pickerNodes = useMemo(() => {
+    return [...nodes, createPickerNode()]
+  }, [nodes])
+
+  const pickerValue = useMemo<ValueSelector>(() => {
+    if (!value)
+      return []
+
+    return variableTransformer(value) as ValueSelector
+  }, [value])
+
+  return (
+    <WorkflowContext.Provider value={workflowStore}>
+      <HooksStoreContext.Provider value={hooksStore}>
+        <div id="workflow-container" className={className}>
+          <ReactFlowProvider>
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute h-px w-px overflow-hidden opacity-0"
+            >
+              <div style={{ width: 800, height: 600 }}>
+                <ReactFlow nodes={pickerNodes} edges={edges} fitView />
+              </div>
+            </div>
+
+            <VarReferencePicker
+              className="grow"
+              nodeId={PICKER_NODE_ID}
+              readonly={!nodes.length}
+              isShowNodeName
+              value={pickerValue}
+              onChange={(nextValue) => {
+                if (!Array.isArray(nextValue) || !nextValue.length) {
+                  onChange(null)
+                  return
+                }
+
+                onChange(nextValue.join('.'))
+              }}
+              availableNodes={nodes}
+              placeholder={placeholder}
+            />
+          </ReactFlowProvider>
+        </div>
+      </HooksStoreContext.Provider>
+    </WorkflowContext.Provider>
+  )
+}
+
+export default PublishedGraphVariablePicker
diff --git a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
new file mode 100644
index 0000000000..c85c192aff
--- /dev/null
+++ b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
@@ -0,0 +1,214 @@
+'use client'
+
+import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useInfiniteScroll } from 'ahooks'
+import * as React from 'react'
+import { useDeferredValue, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Loading from '@/app/components/base/loading'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@/app/components/base/ui/scroll-area'
+import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
+
+type WorkflowSelectorProps = {
+  value: string | null
+  selectedWorkflowName?: string | null
+  onSelect: (workflow: AvailableEvaluationWorkflow) => void
+}
+
+const PAGE_SIZE = 20
+
+const getWorkflowName = (workflow: AvailableEvaluationWorkflow) => {
+  return workflow.marked_name || workflow.app_name || workflow.id
+}
+
+const WorkflowSelector = ({
+  value,
+  selectedWorkflowName,
+  onSelect,
+}: WorkflowSelectorProps) => {
+  const { t } = useTranslation('evaluation')
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const deferredSearchText = useDeferredValue(searchText)
+  const viewportRef = useRef<HTMLDivElement>(null)
+
+  const keyword = deferredSearchText.trim() || undefined
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoading,
+  } = useAvailableEvaluationWorkflows(
+    {
+      page: 1,
+      limit: PAGE_SIZE,
+      keyword,
+    },
+    { enabled: isOpen },
+  )
+
+  const workflows = useMemo(() => {
+    return (data?.pages ?? []).flatMap(page => page.items)
+  }, [data?.pages])
+
+  const currentWorkflowName = useMemo(() => {
+    if (!value)
+      return null
+
+    const selectedWorkflow = workflows.find(workflow => workflow.id === value)
+    if (selectedWorkflow)
+      return getWorkflowName(selectedWorkflow)
+
+    return selectedWorkflowName ?? null
+  }, [selectedWorkflowName, value, workflows])
+
+  const isNoMore = hasNextPage === false
+
+  useInfiniteScroll(
+    async () => {
+      if (!hasNextPage || isFetchingNextPage)
+        return { list: [] }
+
+      await fetchNextPage()
+      return { list: [] }
+    },
+    {
+      target: viewportRef,
+      isNoMore: () => isNoMore,
+      reloadDeps: [isFetchingNextPage, isNoMore, keyword],
+    },
+  )
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setIsOpen(nextOpen)
+
+    if (!nextOpen)
+      setSearchText('')
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleOpenChange}>
+      <PopoverTrigger
+        render={(
+          <button
+            type="button"
+            className="group flex w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 text-left outline-hidden hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal"
+            aria-label={t('metrics.custom.workflowLabel')}
+          >
+            <div className="flex min-w-0 grow items-center gap-2">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+                <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
+                  <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
+                </div>
+              </div>
+              <div className="min-w-0 flex-1 px-1 py-1 text-left">
+                <div className={cn(
+                  'system-sm-regular truncate',
+                  currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
+                )}
+                >
+                  {currentWorkflowName ?? t('metrics.custom.workflowPlaceholder')}
+                </div>
+              </div>
+            </div>
+            <span className="shrink-0 px-1 text-text-quaternary transition-colors group-hover:text-text-secondary">
+              <span aria-hidden="true" className="i-ri-arrow-down-s-line h-4 w-4" />
+            </span>
+          </button>
+        )}
+      />
+
+      <PopoverContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName="w-[360px] overflow-hidden p-0"
+      >
+        <div className="bg-components-panel-bg">
+          <div className="p-2 pb-1">
+            <Input
+              showLeftIcon
+              showClearIcon
+              value={searchText}
+              onChange={event => setSearchText(event.target.value)}
+              onClear={() => setSearchText('')}
+            />
+          </div>
+
+          {(isLoading || (isFetching && workflows.length === 0))
+            ? (
+                <div className="flex h-[120px] items-center justify-center">
+                  <Loading type="area" />
+                </div>
+              )
+            : !workflows.length
+                ? (
+                    <div className="system-sm-regular flex h-[120px] items-center justify-center text-text-tertiary">
+                      {t('noData', { ns: 'common' })}
+                    </div>
+                  )
+                : (
+                    <ScrollAreaRoot className="relative max-h-[240px] overflow-hidden">
+                      <ScrollAreaViewport ref={viewportRef}>
+                        <ScrollAreaContent className="p-1" role="listbox" aria-label={t('metrics.custom.workflowLabel')}>
+                          {workflows.map(workflow => (
+                            <button
+                              key={workflow.id}
+                              type="button"
+                              role="option"
+                              aria-selected={workflow.id === value}
+                              className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left hover:bg-state-base-hover"
+                              onClick={() => {
+                                onSelect(workflow)
+                                setIsOpen(false)
+                                setSearchText('')
+                              }}
+                            >
+                              <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+                                <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
+                                  <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
+                                </div>
+                              </div>
+                              <div className="system-sm-medium min-w-0 flex-1 truncate px-1 py-1 text-text-secondary">
+                                {getWorkflowName(workflow)}
+                              </div>
+                              {workflow.id === value && (
+                                <span aria-hidden="true" className="i-ri-check-line h-4 w-4 shrink-0 text-text-accent" />
+                              )}
+                            </button>
+                          ))}
+
+                          {isFetchingNextPage && (
+                            <div className="flex justify-center px-3 py-2">
+                              <Loading />
+                            </div>
+                          )}
+                        </ScrollAreaContent>
+                      </ScrollAreaViewport>
+                      <ScrollAreaScrollbar orientation="vertical">
+                        <ScrollAreaThumb />
+                      </ScrollAreaScrollbar>
+                    </ScrollAreaRoot>
+                  )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default React.memo(WorkflowSelector)
diff --git a/web/app/components/evaluation/components/judge-model-selector.tsx b/web/app/components/evaluation/components/judge-model-selector.tsx
new file mode 100644
index 0000000000..8f9ee4aff6
--- /dev/null
+++ b/web/app/components/evaluation/components/judge-model-selector.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../types'
+import { useEffect } from 'react'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useEvaluationResource, useEvaluationStore } from '../store'
+import { decodeModelSelection, encodeModelSelection } from '../utils'
+
+type JudgeModelSelectorProps = EvaluationResourceProps & {
+  autoSelectFirst?: boolean
+}
+
+const JudgeModelSelector = ({
+  resourceType,
+  resourceId,
+  autoSelectFirst = true,
+}: JudgeModelSelectorProps) => {
+  const { data: modelList } = useModelList(ModelTypeEnum.textGeneration)
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const setJudgeModel = useEvaluationStore(state => state.setJudgeModel)
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+
+  useEffect(() => {
+    if (!autoSelectFirst || resource.judgeModelId || !modelList.length)
+      return
+
+    const firstProvider = modelList[0]
+    const firstModel = firstProvider.models[0]
+    if (!firstProvider || !firstModel)
+      return
+
+    setJudgeModel(resourceType, resourceId, encodeModelSelection(firstProvider.provider, firstModel.model))
+  }, [autoSelectFirst, modelList, resource.judgeModelId, resourceId, resourceType, setJudgeModel])
+
+  return (
+    <ModelSelector
+      defaultModel={selectedModel}
+      modelList={modelList}
+      onSelect={model => setJudgeModel(resourceType, resourceId, encodeModelSelection(model.provider, model.model))}
+      showDeprecatedWarnIcon
+      triggerClassName="h-8 w-full rounded-lg"
+    />
+  )
+}
+
+export default JudgeModelSelector
diff --git a/web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx
new file mode 100644
index 0000000000..5d47a754ff
--- /dev/null
+++ b/web/app/components/evaluation/components/layout/non-pipeline-evaluation.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
+import BatchTestPanel from '../batch-test-panel'
+import ConditionsSection from '../conditions-section'
+import JudgeModelSelector from '../judge-model-selector'
+import MetricSection from '../metric-section'
+import SectionHeader, { InlineSectionHeader } from '../section-header'
+
+const NonPipelineEvaluation = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const docLink = useDocLink()
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex min-h-full max-w-[748px] flex-col px-6 py-4">
+          <SectionHeader
+            title={t('title')}
+            description={(
+              <>
+                {t('description')}
+                {' '}
+                <a
+                  className="text-text-accent"
+                  href={docLink()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {tCommon('operation.learnMore')}
+                </a>
+              </>
+            )}
+            descriptionClassName="max-w-[700px]"
+          />
+          <section className="max-w-[700px] py-4">
+            <InlineSectionHeader title={t('judgeModel.title')} tooltip={t('judgeModel.description')} />
+            <div className="mt-1.5">
+              <JudgeModelSelector resourceType={resourceType} resourceId={resourceId} />
+            </div>
+          </section>
+          <div className="max-w-[700px] border-b border-divider-subtle" />
+          <MetricSection resourceType={resourceType} resourceId={resourceId} />
+          <div className="max-w-[700px] border-b border-divider-subtle" />
+          <ConditionsSection resourceType={resourceType} resourceId={resourceId} />
+        </div>
+      </div>
+
+      <div className="h-[420px] shrink-0 border-t border-divider-subtle xl:h-auto xl:w-[450px] xl:border-t-0 xl:border-l">
+        <BatchTestPanel resourceType={resourceType} resourceId={resourceId} />
+      </div>
+    </div>
+  )
+}
+
+export default NonPipelineEvaluation
diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
new file mode 100644
index 0000000000..9fb6c70a90
--- /dev/null
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
+import { useEvaluationStore } from '../../store'
+import HistoryTab from '../batch-test-panel/history-tab'
+import JudgeModelSelector from '../judge-model-selector'
+import PipelineBatchActions from '../pipeline/pipeline-batch-actions'
+import PipelineMetricsSection from '../pipeline/pipeline-metrics-section'
+import PipelineResultsPanel from '../pipeline/pipeline-results-panel'
+import SectionHeader, { InlineSectionHeader } from '../section-header'
+
+const PipelineEvaluation = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const { t: tCommon } = useTranslation('common')
+  const docLink = useDocLink()
+  const ensureResource = useEvaluationStore(state => state.ensureResource)
+
+  useEffect(() => {
+    ensureResource(resourceType, resourceId)
+  }, [ensureResource, resourceId, resourceType])
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
+      <div className="flex min-h-0 flex-col border-b border-divider-subtle bg-background-default xl:w-[450px] xl:shrink-0 xl:border-r xl:border-b-0">
+        <div className="px-6 pt-4 pb-2">
+          <SectionHeader
+            title={t('title')}
+            description={(
+              <>
+                {t('description')}
+                {' '}
+                <a
+                  className="text-text-accent"
+                  href={docLink()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {tCommon('operation.learnMore')}
+                </a>
+              </>
+            )}
+          />
+        </div>
+
+        <div className="px-6 pt-3 pb-4">
+          <div className="space-y-3">
+            <section>
+              <InlineSectionHeader title={t('judgeModel.title')} tooltip={t('judgeModel.description')} />
+              <div className="mt-1">
+                <JudgeModelSelector
+                  resourceType={resourceType}
+                  resourceId={resourceId}
+                  autoSelectFirst={false}
+                />
+              </div>
+            </section>
+
+            <PipelineMetricsSection
+              resourceType={resourceType}
+              resourceId={resourceId}
+            />
+
+            <PipelineBatchActions
+              resourceType={resourceType}
+              resourceId={resourceId}
+            />
+          </div>
+        </div>
+
+        <div className="border-t border-divider-subtle" />
+
+        <div className="min-h-0 flex-1 px-6 py-4">
+          <HistoryTab
+            resourceType={resourceType}
+            resourceId={resourceId}
+          />
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 bg-background-default">
+        <PipelineResultsPanel
+          resourceType={resourceType}
+          resourceId={resourceId}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PipelineEvaluation
diff --git a/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..a234635c50
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/__tests__/index.spec.tsx
@@ -0,0 +1,229 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import MetricSection from '..'
+import { useEvaluationStore } from '../../../store'
+
+const mockUseAvailableEvaluationWorkflows = vi.hoisted(() => vi.fn())
+const mockUseAvailableEvaluationMetrics = vi.hoisted(() => vi.fn())
+const mockUseEvaluationNodeInfoMutation = vi.hoisted(() => vi.fn())
+
+vi.mock('@/service/use-evaluation', () => ({
+  useAvailableEvaluationWorkflows: (...args: unknown[]) => mockUseAvailableEvaluationWorkflows(...args),
+  useAvailableEvaluationMetrics: (...args: unknown[]) => mockUseAvailableEvaluationMetrics(...args),
+  useEvaluationNodeInfoMutation: (...args: unknown[]) => mockUseEvaluationNodeInfoMutation(...args),
+}))
+
+const resourceType = 'apps' as const
+const resourceId = 'metric-section-resource'
+
+const renderMetricSection = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MetricSection resourceType={resourceType} resourceId={resourceId} />
+    </QueryClientProvider>,
+  )
+}
+
+describe('MetricSection', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useEvaluationStore.setState({ resources: {} })
+
+    mockUseAvailableEvaluationMetrics.mockReturnValue({
+      data: {
+        metrics: ['answer-correctness'],
+      },
+      isLoading: false,
+    })
+
+    mockUseAvailableEvaluationWorkflows.mockReturnValue({
+      data: {
+        pages: [{ items: [], page: 1, limit: 20, has_more: false }],
+      },
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    })
+
+    mockUseEvaluationNodeInfoMutation.mockReturnValue({
+      isPending: false,
+      mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+        options?.onSuccess?.({
+          'answer-correctness': [
+            { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+          ],
+        })
+      },
+    })
+  })
+
+  // Verify the empty state block extracted from MetricSection.
+  describe('Empty State', () => {
+    it('should render the metric empty state when no metrics are selected', () => {
+      renderMetricSection()
+
+      expect(screen.getByText('evaluation.metrics.description')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.add' })).toBeInTheDocument()
+    })
+  })
+
+  // Verify the extracted builtin metric card presentation and removal flow.
+  describe('Builtin Metric Card', () => {
+    it('should render node badges for a builtin metric and remove it when delete is clicked', () => {
+      // Arrange
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
+          { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+        ])
+      })
+
+      // Act
+      renderMetricSection()
+
+      // Assert
+      expect(screen.getByText('Answer Correctness')).toBeInTheDocument()
+      expect(screen.getByText('Answer Node')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.remove' }))
+
+      expect(screen.queryByText('Answer Correctness')).not.toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.description')).toBeInTheDocument()
+    })
+
+    it('should render the all-nodes label when a builtin metric has no node selection', () => {
+      // Arrange
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [])
+      })
+
+      // Act
+      renderMetricSection()
+
+      // Assert
+      expect(screen.getByText('evaluation.metrics.nodesAll')).toBeInTheDocument()
+    })
+
+    it('should collapse and expand the node section when the metric header is clicked', () => {
+      // Arrange
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
+          { node_id: 'node-answer', title: 'Answer Node', type: 'llm' },
+        ])
+      })
+
+      // Act
+      renderMetricSection()
+
+      const toggleButton = screen.getByRole('button', { name: 'evaluation.metrics.collapseNodes' })
+      fireEvent.click(toggleButton)
+
+      // Assert
+      expect(screen.queryByText('Answer Node')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'evaluation.metrics.expandNodes' })).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.expandNodes' }))
+
+      expect(screen.getByText('Answer Node')).toBeInTheDocument()
+    })
+
+    it('should show only unselected nodes in the add-node dropdown and append the selected node', () => {
+      // Arrange
+      mockUseEvaluationNodeInfoMutation.mockReturnValue({
+        isPending: false,
+        mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+          options?.onSuccess?.({
+            'answer-correctness': [
+              { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+              { node_id: 'node-2', title: 'LLM 2', type: 'llm' },
+            ],
+          })
+        },
+      })
+
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [
+          { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+        ])
+      })
+
+      // Act
+      renderMetricSection()
+
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.addNode' }))
+
+      // Assert
+      expect(screen.queryByRole('menuitem', { name: 'LLM 1' })).not.toBeInTheDocument()
+      fireEvent.click(screen.getByRole('menuitem', { name: 'LLM 2' }))
+
+      expect(screen.getByText('LLM 2')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'evaluation.metrics.addNode' })).not.toBeInTheDocument()
+    })
+
+    it('should hide the add-node button when the builtin metric already targets all nodes', () => {
+      // Arrange
+      mockUseEvaluationNodeInfoMutation.mockReturnValue({
+        isPending: false,
+        mutate: (_input: unknown, options?: { onSuccess?: (data: Record<string, Array<{ node_id: string, title: string, type: string }>>) => void }) => {
+          options?.onSuccess?.({
+            'answer-correctness': [
+              { node_id: 'node-1', title: 'LLM 1', type: 'llm' },
+              { node_id: 'node-2', title: 'LLM 2', type: 'llm' },
+            ],
+          })
+        },
+      })
+
+      act(() => {
+        useEvaluationStore.getState().addBuiltinMetric(resourceType, resourceId, 'answer-correctness', [])
+      })
+
+      // Act
+      renderMetricSection()
+
+      // Assert
+      expect(screen.getByText('evaluation.metrics.nodesAll')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'evaluation.metrics.addNode' })).not.toBeInTheDocument()
+    })
+  })
+
+  // Verify the extracted custom metric editor card renders inside the metric card.
+  describe('Custom Metric Card', () => {
+    it('should render the custom metric editor card when a custom metric is added', () => {
+      act(() => {
+        useEvaluationStore.getState().addCustomMetric(resourceType, resourceId)
+      })
+
+      renderMetricSection()
+
+      expect(screen.getByText('Custom Evaluator')).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.warningBadge')).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.workflowPlaceholder')).toBeInTheDocument()
+      expect(screen.getByText('evaluation.metrics.custom.mappingTitle')).toBeInTheDocument()
+    })
+
+    it('should disable adding another custom metric when one already exists', () => {
+      // Arrange
+      act(() => {
+        useEvaluationStore.getState().addCustomMetric(resourceType, resourceId)
+      })
+
+      // Act
+      renderMetricSection()
+      fireEvent.click(screen.getByRole('button', { name: 'evaluation.metrics.add' }))
+
+      // Assert
+      expect(screen.getByRole('button', { name: /evaluation.metrics.custom.footerTitle/i })).toBeDisabled()
+      expect(screen.getByText('evaluation.metrics.custom.limitDescription')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
new file mode 100644
index 0000000000..f8103aa2cc
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -0,0 +1,161 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { useEvaluationStore } from '../../store'
+import { dedupeNodeInfoList, getMetricVisual, getNodeVisual, getToneClasses } from '../metric-selector/utils'
+
+type BuiltinMetricCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+  availableNodeInfoList?: NodeInfo[]
+}
+
+const BuiltinMetricCard = ({
+  resourceType,
+  resourceId,
+  metric,
+  availableNodeInfoList = [],
+}: BuiltinMetricCardProps) => {
+  const { t } = useTranslation('evaluation')
+  const updateBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const [isExpanded, setIsExpanded] = useState(true)
+  const metricVisual = getMetricVisual(metric.optionId)
+  const metricToneClasses = getToneClasses(metricVisual.tone)
+  const selectedNodeInfoList = metric.nodeInfoList ?? []
+  const selectedNodeIdSet = new Set(selectedNodeInfoList.map(nodeInfo => nodeInfo.node_id))
+  const selectableNodeInfoList = selectedNodeInfoList.length > 0
+    ? availableNodeInfoList.filter(nodeInfo => !selectedNodeIdSet.has(nodeInfo.node_id))
+    : []
+  const shouldShowAddNode = selectableNodeInfoList.length > 0
+
+  return (
+    <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
+      <div className="flex items-center justify-between gap-3 px-3 pt-3 pb-1">
+        <button
+          type="button"
+          className="flex min-w-0 flex-1 items-center gap-2 px-1 text-left"
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? t('metrics.collapseNodes') : t('metrics.expandNodes')}
+          onClick={() => setIsExpanded(current => !current)}
+        >
+          <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
+            <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
+          </div>
+          <div className="flex min-w-0 items-center gap-0.5">
+            <div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
+            <span
+              aria-hidden="true"
+              className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
+            />
+          </div>
+        </button>
+
+        <Button
+          size="small"
+          variant="ghost"
+          aria-label={t('metrics.remove')}
+          className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary focus-visible:opacity-100"
+          onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+        >
+          <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+        </Button>
+      </div>
+
+      {isExpanded && (
+        <div className="flex flex-wrap gap-1 px-3 pt-1 pb-3">
+          {selectedNodeInfoList.length
+            ? selectedNodeInfoList.map((nodeInfo) => {
+                const nodeVisual = getNodeVisual(nodeInfo)
+                const nodeToneClasses = getToneClasses(nodeVisual.tone)
+
+                return (
+                  <div
+                    key={nodeInfo.node_id}
+                    className="inline-flex min-w-[18px] items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1.5 shadow-xs"
+                  >
+                    <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                      <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                    </div>
+                    <span className="system-xs-regular px-1 text-text-primary">{nodeInfo.title}</span>
+                    <button
+                      type="button"
+                      className="flex h-4 w-4 items-center justify-center rounded-sm text-text-quaternary transition-colors hover:text-text-secondary"
+                      aria-label={nodeInfo.title}
+                      onClick={() => updateBuiltinMetric(
+                        resourceType,
+                        resourceId,
+                        metric.optionId,
+                        selectedNodeInfoList.filter(item => item.node_id !== nodeInfo.node_id),
+                      )}
+                    >
+                      <span aria-hidden="true" className="i-ri-close-line h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                )
+              })
+            : (
+                <span className="system-xs-regular px-1 text-text-tertiary">{t('metrics.nodesAll')}</span>
+              )}
+
+          {shouldShowAddNode && (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={(
+                  <button
+                    type="button"
+                    aria-label={t('metrics.addNode')}
+                    className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-background-default-hover text-text-tertiary transition-colors hover:bg-state-base-hover"
+                  />
+                )}
+              >
+                <span aria-hidden="true" className="i-ri-add-line h-4 w-4 shrink-0" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                placement="bottom-start"
+                popupClassName="w-[252px] rounded-md border-[0.5px] border-components-panel-border py-1 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]"
+              >
+                {selectableNodeInfoList.map((nodeInfo) => {
+                  const nodeVisual = getNodeVisual(nodeInfo)
+                  const nodeToneClasses = getToneClasses(nodeVisual.tone)
+
+                  return (
+                    <DropdownMenuItem
+                      key={nodeInfo.node_id}
+                      className="h-auto gap-0 rounded-md px-3 py-1.5"
+                      onClick={() => updateBuiltinMetric(
+                        resourceType,
+                        resourceId,
+                        metric.optionId,
+                        dedupeNodeInfoList([...selectedNodeInfoList, nodeInfo]),
+                      )}
+                    >
+                      <div className="flex min-w-0 flex-1 items-center gap-2.5 pr-1">
+                        <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                          <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                        </div>
+                        <span className="system-sm-medium truncate text-text-secondary">{nodeInfo.title}</span>
+                      </div>
+                    </DropdownMenuItem>
+                  )
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default BuiltinMetricCard
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
new file mode 100644
index 0000000000..d0c04bac04
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import { Button } from '@/app/components/base/ui/button'
+import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
+import CustomMetricEditorCard from '../custom-metric-editor'
+import { getToneClasses } from '../metric-selector/utils'
+
+type CustomMetricCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+}
+
+const CustomMetricCard = ({
+  resourceType,
+  resourceId,
+  metric,
+}: CustomMetricCardProps) => {
+  const { t } = useTranslation('evaluation')
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const isCustomMetricInvalid = !isCustomMetricConfigured(metric)
+  const metricToneClasses = getToneClasses('indigo')
+
+  return (
+    <div className="group overflow-hidden rounded-xl border border-components-panel-border hover:bg-background-section">
+      <div className="flex items-center justify-between gap-3 px-3 pt-3 pb-1">
+        <div className="flex min-w-0 flex-1 items-center gap-2 px-1">
+          <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px]', metricToneClasses.soft)}>
+            <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5" />
+          </div>
+          <div className="system-md-medium truncate text-text-secondary">{metric.label}</div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-1">
+          {isCustomMetricInvalid && (
+            <Badge className="badge-warning">
+              {t('metrics.custom.warningBadge')}
+            </Badge>
+          )}
+          <Button
+            size="small"
+            variant="ghost"
+            aria-label={t('metrics.remove')}
+            className="h-6 w-6 shrink-0 rounded-md p-0 text-text-quaternary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary focus-visible:opacity-100"
+            onClick={() => removeMetric(resourceType, resourceId, metric.id)}
+          >
+            <span aria-hidden="true" className="i-ri-delete-bin-line h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <CustomMetricEditorCard
+        resourceType={resourceType}
+        resourceId={resourceId}
+        metric={metric}
+      />
+    </div>
+  )
+}
+
+export default CustomMetricCard
diff --git a/web/app/components/evaluation/components/metric-section/index.tsx b/web/app/components/evaluation/components/metric-section/index.tsx
new file mode 100644
index 0000000000..7887b2733b
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/index.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableEvaluationMetrics, useEvaluationNodeInfoMutation } from '@/service/use-evaluation'
+import { useEvaluationResource } from '../../store'
+import MetricSelector from '../metric-selector'
+import { toEvaluationTargetType } from '../metric-selector/utils'
+import { InlineSectionHeader } from '../section-header'
+import MetricCard from './metric-card'
+import MetricSectionEmptyState from './metric-section-empty-state'
+
+const MetricSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const [nodeInfoMap, setNodeInfoMap] = useState<Record<string, NodeInfo[]>>({})
+  const hasMetrics = resource.metrics.length > 0
+  const hasBuiltinMetrics = resource.metrics.some(metric => metric.kind === 'builtin')
+  const shouldLoadNodeInfo = resourceType !== 'datasets' && !!resourceId && hasBuiltinMetrics
+  const { data: availableMetricsData } = useAvailableEvaluationMetrics(shouldLoadNodeInfo)
+  const { mutate: loadNodeInfo } = useEvaluationNodeInfoMutation()
+  const availableMetricIds = useMemo(() => availableMetricsData?.metrics ?? [], [availableMetricsData?.metrics])
+  const availableMetricIdsKey = availableMetricIds.join(',')
+  const resolvedNodeInfoMap = shouldLoadNodeInfo ? nodeInfoMap : {}
+
+  useEffect(() => {
+    if (!shouldLoadNodeInfo || availableMetricIds.length === 0)
+      return
+
+    let isActive = true
+
+    loadNodeInfo(
+      {
+        params: {
+          targetType: toEvaluationTargetType(resourceType),
+          targetId: resourceId,
+        },
+        body: {
+          metrics: availableMetricIds,
+        },
+      },
+      {
+        onSuccess: (data) => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap(data)
+        },
+        onError: () => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap({})
+        },
+      },
+    )
+
+    return () => {
+      isActive = false
+    }
+  }, [availableMetricIds, availableMetricIdsKey, loadNodeInfo, resourceId, resourceType, shouldLoadNodeInfo])
+
+  return (
+    <section className="max-w-[700px] py-4">
+      <InlineSectionHeader
+        title={t('metrics.title')}
+        tooltip={t('metrics.description')}
+      />
+      <div className="mt-1 space-y-1">
+        {!hasMetrics && <MetricSectionEmptyState description={t('metrics.description')} />}
+        {resource.metrics.map(metric => (
+          <MetricCard
+            key={metric.id}
+            resourceType={resourceType}
+            resourceId={resourceId}
+            metric={metric}
+            availableNodeInfoList={metric.kind === 'builtin' ? (resolvedNodeInfoMap[metric.optionId] ?? []) : undefined}
+          />
+        ))}
+        <MetricSelector
+          resourceType={resourceType}
+          resourceId={resourceId}
+          triggerClassName="rounded-md px-3 py-2"
+        />
+      </div>
+    </section>
+  )
+}
+
+export default MetricSection
diff --git a/web/app/components/evaluation/components/metric-section/metric-card.tsx b/web/app/components/evaluation/components/metric-section/metric-card.tsx
new file mode 100644
index 0000000000..5d2088d52e
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/metric-card.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
+import BuiltinMetricCard from './builtin-metric-card'
+import CustomMetricCard from './custom-metric-card'
+
+type MetricCardProps = EvaluationResourceProps & {
+  metric: EvaluationMetric
+  availableNodeInfoList?: NodeInfo[]
+}
+
+const MetricCard = ({
+  resourceType,
+  resourceId,
+  metric,
+  availableNodeInfoList,
+}: MetricCardProps) => {
+  if (metric.kind === 'custom-workflow') {
+    return (
+      <CustomMetricCard
+        resourceType={resourceType}
+        resourceId={resourceId}
+        metric={metric}
+      />
+    )
+  }
+
+  return (
+    <BuiltinMetricCard
+      resourceType={resourceType}
+      resourceId={resourceId}
+      metric={metric}
+      availableNodeInfoList={availableNodeInfoList}
+    />
+  )
+}
+
+export default MetricCard
diff --git a/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
new file mode 100644
index 0000000000..918a93e430
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-section/metric-section-empty-state.tsx
@@ -0,0 +1,18 @@
+type MetricSectionEmptyStateProps = {
+  description: string
+}
+
+const MetricSectionEmptyState = ({ description }: MetricSectionEmptyStateProps) => {
+  return (
+    <div className="flex items-center gap-5 rounded-xl bg-background-section p-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-md">
+        <span aria-hidden="true" className="i-ri-bar-chart-horizontal-line h-6 w-6 text-text-primary" />
+      </div>
+      <div className="min-w-0 flex-1 text-text-tertiary system-xs-regular">
+        {description}
+      </div>
+    </div>
+  )
+}
+
+export default MetricSectionEmptyState
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
new file mode 100644
index 0000000000..0f91271a9f
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -0,0 +1,151 @@
+'use client'
+
+import type { ChangeEvent } from 'react'
+import type { MetricSelectorProps } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+import SelectorEmptyState from './selector-empty-state'
+import SelectorFooter from './selector-footer'
+import SelectorMetricSection from './selector-metric-section'
+import { useMetricSelectorData } from './use-metric-selector-data'
+
+const MetricSelector = ({
+  resourceType,
+  resourceId,
+  triggerClassName,
+  triggerStyle = 'button',
+}: MetricSelectorProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const addCustomMetric = useEvaluationStore(state => state.addCustomMetric)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [nodeInfoMap, setNodeInfoMap] = useState<Record<string, Array<{ node_id: string, title: string, type: string }>>>({})
+  const [collapsedMetricMap, setCollapsedMetricMap] = useState<Record<string, boolean>>({})
+  const [expandedMetricNodesMap, setExpandedMetricNodesMap] = useState<Record<string, boolean>>({})
+  const hasCustomMetric = resource.metrics.some(metric => metric.kind === 'custom-workflow')
+
+  const {
+    builtinMetricMap,
+    filteredSections,
+    isRemoteLoading,
+    toggleNodeSelection,
+  } = useMetricSelectorData({
+    open,
+    query,
+    resourceType,
+    resourceId,
+    nodeInfoMap,
+    setNodeInfoMap,
+  })
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+
+    if (nextOpen) {
+      setQuery('')
+      setCollapsedMetricMap({})
+      setExpandedMetricNodesMap({})
+    }
+  }
+
+  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger
+        render={(
+          triggerStyle === 'text'
+            ? (
+                <button type="button" className={cn('system-sm-medium inline-flex items-center text-text-accent', triggerClassName)}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
+                  {t('metrics.add')}
+                </button>
+              )
+            : (
+                <Button variant="ghost-accent" className={triggerClassName}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
+                  {t('metrics.add')}
+                </Button>
+              )
+        )}
+      />
+      <PopoverContent popupClassName="w-[360px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]">
+        <div className="flex min-h-[560px] flex-col bg-components-panel-bg">
+          <div className="border-b border-divider-subtle bg-background-section-burn px-2 py-2">
+            <Input
+              value={query}
+              showLeftIcon
+              placeholder={t('metrics.searchNodeOrMetrics')}
+              onChange={handleQueryChange}
+            />
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {isRemoteLoading && (
+              <div className="space-y-3 px-3 py-4" data-testid="evaluation-metric-loading">
+                {['metric-skeleton-1', 'metric-skeleton-2', 'metric-skeleton-3'].map(key => (
+                  <div key={key} className="h-20 animate-pulse rounded-xl bg-background-default-subtle" />
+                ))}
+              </div>
+            )}
+
+            {!isRemoteLoading && filteredSections.length === 0 && (
+              <SelectorEmptyState message={t('metrics.noResults')} />
+            )}
+
+            {!isRemoteLoading && filteredSections.map((section, index) => {
+              const { metric } = section
+              const isExpanded = collapsedMetricMap[metric.id] !== true
+              const isShowingAllNodes = expandedMetricNodesMap[metric.id] === true
+
+              return (
+                <SelectorMetricSection
+                  key={metric.id}
+                  section={section}
+                  index={index}
+                  addedMetric={builtinMetricMap.get(metric.id)}
+                  isExpanded={isExpanded}
+                  isShowingAllNodes={isShowingAllNodes}
+                  onToggleExpanded={() => setCollapsedMetricMap(current => ({
+                    ...current,
+                    [metric.id]: isExpanded,
+                  }))}
+                  onToggleNodeSelection={toggleNodeSelection}
+                  onToggleShowAllNodes={() => setExpandedMetricNodesMap(current => ({
+                    ...current,
+                    [metric.id]: !isShowingAllNodes,
+                  }))}
+                  t={t}
+                />
+              )
+            })}
+          </div>
+
+          <SelectorFooter
+            title={t('metrics.custom.footerTitle')}
+            description={hasCustomMetric ? t('metrics.custom.limitDescription') : t('metrics.custom.footerDescription')}
+            disabled={hasCustomMetric}
+            onClick={() => {
+              addCustomMetric(resourceType, resourceId)
+              setOpen(false)
+            }}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default MetricSelector
diff --git a/web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx b/web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx
new file mode 100644
index 0000000000..d93a8b84e3
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/selector-empty-state.tsx
@@ -0,0 +1,26 @@
+type SelectorEmptyStateProps = {
+  message: string
+}
+
+const EmptySearchStateIcon = () => {
+  return (
+    <div className="relative h-8 w-8 text-text-quaternary">
+      <span aria-hidden="true" className="i-ri-search-line absolute bottom-0 right-0 h-6 w-6" />
+      <span aria-hidden="true" className="absolute left-0 top-[9px] h-[2px] w-[7px] rounded-full bg-current opacity-80" />
+      <span aria-hidden="true" className="absolute left-0 top-[16px] h-[2px] w-[4px] rounded-full bg-current opacity-80" />
+    </div>
+  )
+}
+
+const SelectorEmptyState = ({
+  message,
+}: SelectorEmptyStateProps) => {
+  return (
+    <div className="flex h-full min-h-[524px] flex-col items-center justify-center gap-2 px-4 pb-20 text-center">
+      <EmptySearchStateIcon />
+      <div className="text-text-secondary system-sm-regular">{message}</div>
+    </div>
+  )
+}
+
+export default SelectorEmptyState
diff --git a/web/app/components/evaluation/components/metric-selector/selector-footer.tsx b/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
new file mode 100644
index 0000000000..74163c275d
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/selector-footer.tsx
@@ -0,0 +1,33 @@
+type SelectorFooterProps = {
+  title: string
+  description: string
+  disabled?: boolean
+  onClick: () => void
+}
+
+const SelectorFooter = ({
+  title,
+  description,
+  disabled = false,
+  onClick,
+}: SelectorFooterProps) => {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className="relative flex items-center gap-3 overflow-hidden border-t border-divider-subtle bg-background-default-subtle px-4 py-5 text-left enabled:hover:bg-state-base-hover-alt disabled:cursor-not-allowed disabled:opacity-60"
+      onClick={onClick}
+    >
+      <div className="absolute -left-6 -top-6 h-28 w-28 rounded-full bg-util-colors-indigo-indigo-100 opacity-50 blur-2xl" />
+      <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-[0px_3px_10px_-2px_rgba(9,9,11,0.08),0px_2px_4px_-2px_rgba(9,9,11,0.06)]">
+        <span aria-hidden="true" className="i-ri-add-line h-[18px] w-[18px] text-text-tertiary" />
+      </div>
+      <div className="relative min-w-0">
+        <div className="text-text-secondary system-sm-semibold">{title}</div>
+        <div className="mt-0.5 text-text-tertiary system-xs-regular">{description}</div>
+      </div>
+    </button>
+  )
+}
+
+export default SelectorFooter
diff --git a/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
new file mode 100644
index 0000000000..9b4a0826a7
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/selector-metric-section.tsx
@@ -0,0 +1,135 @@
+import type { TFunction } from 'i18next'
+import type { EvaluationMetric } from '../../types'
+import type { MetricSelectorSection } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { getMetricVisual, getNodeVisual, getToneClasses } from './utils'
+
+type SelectorMetricSectionProps = {
+  section: MetricSelectorSection
+  index: number
+  addedMetric?: EvaluationMetric
+  isExpanded: boolean
+  isShowingAllNodes: boolean
+  onToggleExpanded: () => void
+  onToggleShowAllNodes: () => void
+  onToggleNodeSelection: (metricId: string, nodeInfo: MetricSelectorSection['visibleNodes'][number]) => void
+  t: TFunction<'evaluation'>
+}
+
+const SelectorMetricSection = ({
+  section,
+  index,
+  addedMetric,
+  isExpanded,
+  isShowingAllNodes,
+  onToggleExpanded,
+  onToggleShowAllNodes,
+  onToggleNodeSelection,
+  t,
+}: SelectorMetricSectionProps) => {
+  const { metric, visibleNodes, hasNoNodeInfo } = section
+  const selectedNodeIds = new Set(
+    addedMetric?.nodeInfoList?.length
+      ? addedMetric.nodeInfoList.map(nodeInfo => nodeInfo.node_id)
+      : [],
+  )
+  const metricVisual = getMetricVisual(metric.id)
+  const toneClasses = getToneClasses(metricVisual.tone)
+  const hasMoreNodes = visibleNodes.length > 3
+  const shownNodes = hasMoreNodes && !isShowingAllNodes ? visibleNodes.slice(0, 3) : visibleNodes
+
+  return (
+    <div data-testid={`evaluation-metric-option-${metric.id}`}>
+      {index > 0 && (
+        <div className="px-3 pt-1">
+          <div className="h-px w-full bg-divider-subtle" />
+        </div>
+      )}
+
+      <div className="flex items-center justify-between px-4 pt-3 pb-1">
+        <button
+          type="button"
+          className="flex min-w-0 items-center gap-2"
+          onClick={onToggleExpanded}
+        >
+          <div className={cn('flex h-[18px] w-[18px] items-center justify-center rounded-md', toneClasses.soft)}>
+            <span aria-hidden="true" className={cn(metricVisual.icon, 'h-3.5 w-3.5')} />
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="system-xs-medium-uppercase truncate text-text-secondary">{metric.label}</span>
+            <span
+              aria-hidden="true"
+              className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary transition-transform', !isExpanded && '-rotate-90')}
+            />
+          </div>
+        </button>
+
+        <button type="button" className="p-px text-text-quaternary">
+          <span aria-hidden="true" className="i-ri-question-line h-[14px] w-[14px]" />
+        </button>
+      </div>
+
+      {isExpanded && (
+        <div className="px-1 py-1">
+          {hasNoNodeInfo && (
+            <div className="system-sm-regular px-3 pt-0.5 pb-2 text-text-tertiary">
+              {t('metrics.noNodesInWorkflow')}
+            </div>
+          )}
+          {shownNodes.map((nodeInfo) => {
+            const nodeVisual = getNodeVisual(nodeInfo)
+            const nodeToneClasses = getToneClasses(nodeVisual.tone)
+            const isAdded = addedMetric
+              ? addedMetric.nodeInfoList?.length
+                ? selectedNodeIds.has(nodeInfo.node_id)
+                : true
+              : false
+
+            return (
+              <button
+                key={nodeInfo.node_id}
+                data-testid={`evaluation-metric-node-${metric.id}-${nodeInfo.node_id}`}
+                type="button"
+                className={cn(
+                  'flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-state-base-hover-alt',
+                  isAdded && 'opacity-50',
+                )}
+                onClick={() => onToggleNodeSelection(metric.id, nodeInfo)}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-2.5 pr-1">
+                  <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
+                    <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
+                  </div>
+                  <span className="truncate text-[13px] leading-4 font-medium text-text-secondary">
+                    {nodeInfo.title}
+                  </span>
+                </div>
+                {isAdded && (
+                  <span className="system-xs-regular shrink-0 px-1 text-text-quaternary">{t('metrics.added')}</span>
+                )}
+              </button>
+            )
+          })}
+          {hasMoreNodes && (
+            <button
+              type="button"
+              className="flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-left hover:bg-state-base-hover-alt"
+              onClick={onToggleShowAllNodes}
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-1.5 pr-1">
+                <div className="flex items-center px-1 text-text-tertiary">
+                  <span aria-hidden="true" className={cn(isShowingAllNodes ? 'i-ri-subtract-line' : 'i-ri-more-line', 'h-4 w-4')} />
+                </div>
+                <span className="system-xs-regular truncate text-text-tertiary">
+                  {isShowingAllNodes ? t('metrics.showLess') : t('metrics.showMore')}
+                </span>
+              </div>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SelectorMetricSection
diff --git a/web/app/components/evaluation/components/metric-selector/types.ts b/web/app/components/evaluation/components/metric-selector/types.ts
new file mode 100644
index 0000000000..102329701e
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/types.ts
@@ -0,0 +1,17 @@
+import type { EvaluationMetric, EvaluationResourceProps, MetricOption } from '../../types'
+import type { NodeInfo } from '@/types/evaluation'
+
+export type MetricSelectorProps = EvaluationResourceProps & {
+  triggerClassName?: string
+  triggerStyle?: 'button' | 'text'
+}
+
+export type MetricVisualTone = 'indigo' | 'green'
+
+export type MetricSelectorSection = {
+  metric: MetricOption
+  hasNoNodeInfo: boolean
+  visibleNodes: NodeInfo[]
+}
+
+export type BuiltinMetricMap = Map<string, EvaluationMetric>
diff --git a/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
new file mode 100644
index 0000000000..24e1b494bc
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/use-metric-selector-data.ts
@@ -0,0 +1,176 @@
+import type { BuiltinMetricMap, MetricSelectorSection } from './types'
+import type { NodeInfo } from '@/types/evaluation'
+import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableEvaluationMetrics, useEvaluationNodeInfoMutation } from '@/service/use-evaluation'
+import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
+import { getEvaluationMockConfig } from '../../mock'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+import {
+  buildMetricOption,
+  dedupeNodeInfoList,
+  toEvaluationTargetType,
+} from './utils'
+
+type UseMetricSelectorDataOptions = {
+  open: boolean
+  query: string
+  resourceType: 'apps' | 'datasets' | 'snippets'
+  resourceId: string
+  nodeInfoMap: Record<string, NodeInfo[]>
+  setNodeInfoMap: (value: Record<string, NodeInfo[]>) => void
+}
+
+type UseMetricSelectorDataResult = {
+  builtinMetricMap: BuiltinMetricMap
+  filteredSections: MetricSelectorSection[]
+  isRemoteLoading: boolean
+  toggleNodeSelection: (metricId: string, nodeInfo: NodeInfo) => void
+}
+
+export const useMetricSelectorData = ({
+  open,
+  query,
+  resourceType,
+  resourceId,
+  nodeInfoMap,
+  setNodeInfoMap,
+}: UseMetricSelectorDataOptions): UseMetricSelectorDataResult => {
+  const { t } = useTranslation('evaluation')
+  const config = getEvaluationMockConfig(resourceType)
+  const metrics = useEvaluationResource(resourceType, resourceId).metrics
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const { data: availableMetricsData, isLoading: isAvailableMetricsLoading } = useAvailableEvaluationMetrics(open)
+  const { mutate: loadNodeInfo, isPending: isNodeInfoLoading } = useEvaluationNodeInfoMutation()
+
+  const builtinMetrics = useMemo(() => {
+    return metrics.filter(metric => metric.kind === 'builtin')
+  }, [metrics])
+
+  const builtinMetricMap = useMemo(() => {
+    return new Map(builtinMetrics.map(metric => [metric.optionId, metric] as const))
+  }, [builtinMetrics])
+
+  const availableMetricIds = useMemo(() => availableMetricsData?.metrics ?? [], [availableMetricsData?.metrics])
+  const availableMetricIdsKey = availableMetricIds.join(',')
+
+  const resolvedMetrics = useMemo(() => {
+    const metricsMap = new Map(config.builtinMetrics.map(metric => [metric.id, metric] as const))
+
+    return availableMetricIds.map(metricId => metricsMap.get(metricId) ?? buildMetricOption(metricId))
+  }, [availableMetricIds, config.builtinMetrics])
+
+  useEffect(() => {
+    if (!open)
+      return
+
+    if (resourceType === 'datasets' || !resourceId || availableMetricIds.length === 0)
+      return
+
+    let isActive = true
+
+    loadNodeInfo(
+      {
+        params: {
+          targetType: toEvaluationTargetType(resourceType),
+          targetId: resourceId,
+        },
+        body: {
+          metrics: availableMetricIds,
+        },
+      },
+      {
+        onSuccess: (data) => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap(data)
+        },
+        onError: () => {
+          if (!isActive)
+            return
+
+          setNodeInfoMap({})
+        },
+      },
+    )
+
+    return () => {
+      isActive = false
+    }
+  }, [availableMetricIds, availableMetricIdsKey, loadNodeInfo, open, resourceId, resourceType, setNodeInfoMap])
+
+  const filteredSections = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+
+    return resolvedMetrics.map((metric) => {
+      const metricDescription = getTranslatedMetricDescription(t, metric.id, metric.description)
+      const metricMatches = !keyword
+        || metric.label.toLowerCase().includes(keyword)
+        || metricDescription.toLowerCase().includes(keyword)
+      const metricNodes = nodeInfoMap[metric.id] ?? []
+      const supportsNodeSelection = resourceType !== 'datasets'
+      const hasNoNodeInfo = supportsNodeSelection && metricNodes.length === 0
+
+      if (hasNoNodeInfo) {
+        if (!metricMatches)
+          return null
+
+        return {
+          metric: {
+            ...metric,
+            description: metricDescription,
+          },
+          hasNoNodeInfo: true,
+          visibleNodes: [] as NodeInfo[],
+        }
+      }
+
+      const visibleNodes = metricMatches
+        ? metricNodes
+        : metricNodes.filter((nodeInfo) => {
+            return nodeInfo.title.toLowerCase().includes(keyword)
+              || nodeInfo.type.toLowerCase().includes(keyword)
+              || nodeInfo.node_id.toLowerCase().includes(keyword)
+          })
+
+      if (!metricMatches && visibleNodes.length === 0)
+        return null
+
+      return {
+        metric: {
+          ...metric,
+          description: metricDescription,
+        },
+        hasNoNodeInfo: false,
+        visibleNodes,
+      }
+    }).filter(section => !!section)
+  }, [nodeInfoMap, query, resolvedMetrics, resourceType, t])
+
+  const toggleNodeSelection = (metricId: string, nodeInfo: NodeInfo) => {
+    const addedMetric = builtinMetricMap.get(metricId)
+    const currentSelectedNodes = addedMetric?.nodeInfoList ?? []
+
+    const nextSelectedNodes = addedMetric && currentSelectedNodes.length === 0
+      ? [nodeInfo]
+      : currentSelectedNodes.some(item => item.node_id === nodeInfo.node_id)
+        ? currentSelectedNodes.filter(item => item.node_id !== nodeInfo.node_id)
+        : dedupeNodeInfoList([...currentSelectedNodes, nodeInfo])
+
+    if (addedMetric && nextSelectedNodes.length === 0) {
+      removeMetric(resourceType, resourceId, addedMetric.id)
+      return
+    }
+
+    addBuiltinMetric(resourceType, resourceId, metricId, nextSelectedNodes)
+  }
+
+  return {
+    builtinMetricMap,
+    filteredSections,
+    isRemoteLoading: isAvailableMetricsLoading || isNodeInfoLoading,
+    toggleNodeSelection,
+  }
+}
diff --git a/web/app/components/evaluation/components/metric-selector/utils.ts b/web/app/components/evaluation/components/metric-selector/utils.ts
new file mode 100644
index 0000000000..2a6ca53158
--- /dev/null
+++ b/web/app/components/evaluation/components/metric-selector/utils.ts
@@ -0,0 +1,77 @@
+import type { MetricOption } from '../../types'
+import type { MetricVisualTone } from './types'
+import type { EvaluationTargetType, NodeInfo } from '@/types/evaluation'
+import { getDefaultMetricDescription } from '../../default-metric-descriptions'
+
+export const toEvaluationTargetType = (resourceType: 'apps' | 'snippets'): EvaluationTargetType => {
+  return resourceType === 'snippets' ? 'snippets' : 'apps'
+}
+
+const humanizeMetricId = (metricId: string) => {
+  return metricId
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+export const buildMetricOption = (metricId: string): MetricOption => ({
+  id: metricId,
+  label: humanizeMetricId(metricId),
+  description: getDefaultMetricDescription(metricId),
+  valueType: 'number',
+})
+
+export const getMetricVisual = (metricId: string): { icon: string, tone: MetricVisualTone } => {
+  if (['context-precision', 'context-recall'].includes(metricId)) {
+    return {
+      icon: metricId === 'context-recall' ? 'i-ri-arrow-go-back-line' : 'i-ri-focus-2-line',
+      tone: 'green',
+    }
+  }
+
+  if (metricId === 'faithfulness')
+    return { icon: 'i-ri-anchor-line', tone: 'indigo' }
+
+  if (metricId === 'tool-correctness')
+    return { icon: 'i-ri-tools-line', tone: 'indigo' }
+
+  if (metricId === 'task-completion')
+    return { icon: 'i-ri-task-line', tone: 'indigo' }
+
+  if (metricId === 'argument-correctness')
+    return { icon: 'i-ri-scales-3-line', tone: 'indigo' }
+
+  return { icon: 'i-ri-checkbox-circle-line', tone: 'indigo' }
+}
+
+export const getNodeVisual = (nodeInfo: NodeInfo): { icon: string, tone: MetricVisualTone } => {
+  const normalizedType = nodeInfo.type.toLowerCase()
+  const normalizedTitle = nodeInfo.title.toLowerCase()
+
+  if (normalizedType.includes('retriev') || normalizedTitle.includes('retriev') || normalizedTitle.includes('knowledge'))
+    return { icon: 'i-ri-book-open-line', tone: 'green' }
+
+  if (normalizedType.includes('agent') || normalizedTitle.includes('agent'))
+    return { icon: 'i-ri-user-star-line', tone: 'indigo' }
+
+  return { icon: 'i-ri-ai-generate-2', tone: 'indigo' }
+}
+
+export const getToneClasses = (tone: MetricVisualTone) => {
+  if (tone === 'green') {
+    return {
+      soft: 'bg-util-colors-green-green-50 text-util-colors-green-green-500',
+      solid: 'bg-util-colors-green-green-500 text-white',
+    }
+  }
+
+  return {
+    soft: 'bg-util-colors-indigo-indigo-50 text-util-colors-indigo-indigo-500',
+    solid: 'bg-util-colors-indigo-indigo-500 text-white',
+  }
+}
+
+export const dedupeNodeInfoList = (nodeInfoList: NodeInfo[]) => {
+  return Array.from(new Map(nodeInfoList.map(nodeInfo => [nodeInfo.node_id, nodeInfo])).values())
+}
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
new file mode 100644
index 0000000000..2cc673aa2c
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import type { InputField } from '../batch-test-panel/input-fields/input-fields-utils'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import { getEvaluationMockConfig } from '../../mock'
+import { isEvaluationRunnable, useEvaluationResource } from '../../store'
+import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
+import { useInputFieldsActions } from '../batch-test-panel/input-fields/use-input-fields-actions'
+
+const PIPELINE_INPUT_FIELDS: InputField[] = [
+  { name: 'query', type: 'string' },
+  { name: 'Expect Results', type: 'string' },
+]
+
+const PipelineBatchActions = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const config = getEvaluationMockConfig(resourceType)
+  const isConfigReady = !!resource.judgeModelId && resource.metrics.some(metric => metric.kind === 'builtin')
+  const isRunnable = isEvaluationRunnable(resource)
+  const actions = useInputFieldsActions({
+    resourceType,
+    resourceId,
+    inputFields: PIPELINE_INPUT_FIELDS,
+    isInputFieldsLoading: false,
+    isPanelReady: isConfigReady,
+    isRunnable,
+    templateFileName: config.templateFileName,
+  })
+
+  return (
+    <div className="flex gap-2 pt-2">
+      <Button
+        className="flex-1 justify-center"
+        variant="secondary"
+        disabled={!actions.canDownloadTemplate}
+        onClick={actions.handleDownloadTemplate}
+      >
+        <span aria-hidden="true" className="mr-1 i-ri-file-excel-2-line h-4 w-4" />
+        {t('batch.downloadTemplate')}
+      </Button>
+      <div className="flex-1">
+        <UploadRunPopover
+          open={actions.isUploadPopoverOpen}
+          onOpenChange={actions.setIsUploadPopoverOpen}
+          triggerDisabled={actions.uploadButtonDisabled}
+          triggerLabel={t('pipeline.uploadAndRun')}
+          inputFields={PIPELINE_INPUT_FIELDS}
+          currentFileName={actions.currentFileName}
+          currentFileExtension={actions.currentFileExtension}
+          currentFileSize={actions.currentFileSize}
+          isFileUploading={actions.isFileUploading}
+          isRunDisabled={actions.isRunDisabled}
+          isRunning={actions.isRunning}
+          onUploadFile={actions.handleUploadFile}
+          onClearUploadedFile={actions.handleClearUploadedFile}
+          onDownloadTemplate={actions.handleDownloadTemplate}
+          onRun={actions.handleRun}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PipelineBatchActions
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
new file mode 100644
index 0000000000..1e9f9cc4c1
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import type { MetricOption } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import Checkbox from '@/app/components/base/checkbox'
+import Input from '@/app/components/base/input'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
+import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
+
+type PipelineMetricItemProps = {
+  metric: MetricOption
+  selected: boolean
+  onToggle: () => void
+  disabledCondition: boolean
+  threshold?: number
+  onThresholdChange: (value: number) => void
+}
+
+const PipelineMetricItem = ({
+  metric,
+  selected,
+  onToggle,
+  disabledCondition,
+  threshold = DEFAULT_PIPELINE_METRIC_THRESHOLD,
+  onThresholdChange,
+}: PipelineMetricItemProps) => {
+  const { t } = useTranslation('evaluation')
+  const metricDescription = getTranslatedMetricDescription(t, metric.id, metric.description)
+
+  return (
+    <div className="flex items-center justify-between gap-3 px-1 py-1">
+      <button
+        type="button"
+        className="flex min-w-0 items-center gap-2 text-left"
+        onClick={onToggle}
+      >
+        <Checkbox checked={selected} />
+        <span className="system-sm-medium truncate text-text-secondary">{metric.label}</span>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <span className="flex h-4 w-4 items-center justify-center text-text-quaternary">
+                <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
+              </span>
+            )}
+          />
+          <TooltipContent>
+            {metricDescription}
+          </TooltipContent>
+        </Tooltip>
+      </button>
+
+      {selected
+        ? (
+            <div className="flex items-center gap-2">
+              <span className="system-xs-medium text-text-accent">{t('pipeline.passIf')}</span>
+              <div className="w-[52px]">
+                <Input
+                  value={String(threshold)}
+                  type="number"
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  onChange={(event) => {
+                    const parsedValue = Number(event.target.value)
+                    if (!Number.isNaN(parsedValue))
+                      onThresholdChange(parsedValue)
+                  }}
+                />
+              </div>
+            </div>
+          )
+        : (
+            <button
+              type="button"
+              disabled={disabledCondition}
+              className={cn(
+                'system-xs-medium text-text-tertiary',
+                disabledCondition && 'cursor-not-allowed text-components-button-secondary-accent-text-disabled',
+              )}
+            >
+              + Condition
+            </button>
+          )}
+    </div>
+  )
+}
+
+export default PipelineMetricItem
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
new file mode 100644
index 0000000000..2457b081c3
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metrics-section.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import type { Node } from '@/app/components/workflow/types'
+import type { NodeInfo } from '@/types/evaluation'
+import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { useAvailableEvaluationMetrics } from '@/service/use-evaluation'
+import { usePublishedPipelineInfo } from '@/service/use-pipeline'
+import { getEvaluationMockConfig } from '../../mock'
+import { useEvaluationResource, useEvaluationStore } from '../../store'
+import { InlineSectionHeader } from '../section-header'
+import PipelineMetricItem from './pipeline-metric-item'
+
+const getKnowledgeIndexNodeInfo = (nodes: Node[] | undefined): NodeInfo[] => {
+  const knowledgeIndexNode = nodes?.find(node => node.data.type === BlockEnum.KnowledgeBase)
+  if (!knowledgeIndexNode?.id)
+    return []
+
+  return [{
+    node_id: knowledgeIndexNode.id,
+    title: typeof knowledgeIndexNode.data?.title === 'string' && knowledgeIndexNode.data.title
+      ? knowledgeIndexNode.data.title
+      : knowledgeIndexNode.id,
+    type: 'knowledge-index',
+  }]
+}
+
+const isSameNodeInfoList = (left: NodeInfo[] | undefined, right: NodeInfo[]) => {
+  if ((left?.length ?? 0) !== right.length)
+    return false
+
+  return (left ?? []).every((nodeInfo, index) => {
+    const target = right[index]
+    return nodeInfo.node_id === target?.node_id
+      && nodeInfo.title === target?.title
+      && nodeInfo.type === target?.type
+  })
+}
+
+const PipelineMetricsSection = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
+  const addBuiltinMetric = useEvaluationStore(state => state.addBuiltinMetric)
+  const removeMetric = useEvaluationStore(state => state.removeMetric)
+  const updateMetricThreshold = useEvaluationStore(state => state.updateMetricThreshold)
+  const { data: availableMetricsData } = useAvailableEvaluationMetrics()
+  const { data: publishedPipeline } = usePublishedPipelineInfo(pipelineId || '')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const config = getEvaluationMockConfig(resourceType)
+  const knowledgeIndexNodeInfoList = useMemo(
+    () => getKnowledgeIndexNodeInfo(publishedPipeline?.graph.nodes),
+    [publishedPipeline?.graph.nodes],
+  )
+  const builtinMetricMap = useMemo(() => new Map(
+    resource.metrics
+      .filter(metric => metric.kind === 'builtin')
+      .map(metric => [metric.optionId, metric]),
+  ), [resource.metrics])
+  const availableMetricIds = useMemo(() => new Set(availableMetricsData?.metrics ?? []), [availableMetricsData?.metrics])
+  const availableBuiltinMetrics = useMemo(() => {
+    return config.builtinMetrics.filter(metric =>
+      availableMetricIds.has(metric.id) || builtinMetricMap.has(metric.id),
+    )
+  }, [availableMetricIds, builtinMetricMap, config.builtinMetrics])
+
+  useEffect(() => {
+    if (!knowledgeIndexNodeInfoList.length)
+      return
+
+    resource.metrics.forEach((metric) => {
+      if (metric.kind !== 'builtin' || isSameNodeInfoList(metric.nodeInfoList, knowledgeIndexNodeInfoList))
+        return
+
+      addBuiltinMetric(resourceType, resourceId, metric.optionId, knowledgeIndexNodeInfoList)
+    })
+  }, [addBuiltinMetric, knowledgeIndexNodeInfoList, resource.metrics, resourceId, resourceType])
+
+  const handleToggleMetric = (metricId: string) => {
+    const selectedMetric = builtinMetricMap.get(metricId)
+    if (selectedMetric) {
+      removeMetric(resourceType, resourceId, selectedMetric.id)
+      return
+    }
+
+    addBuiltinMetric(resourceType, resourceId, metricId, knowledgeIndexNodeInfoList)
+  }
+
+  return (
+    <section>
+      <InlineSectionHeader title={t('metrics.title')} tooltip={t('metrics.description')} />
+      <div className="mt-1 space-y-0.5">
+        {availableBuiltinMetrics.map((metric) => {
+          const selectedMetric = builtinMetricMap.get(metric.id)
+
+          return (
+            <PipelineMetricItem
+              key={metric.id}
+              metric={metric}
+              selected={!!selectedMetric}
+              threshold={selectedMetric?.threshold}
+              disabledCondition
+              onToggle={() => handleToggleMetric(metric.id)}
+              onThresholdChange={value => updateMetricThreshold(resourceType, resourceId, selectedMetric?.id ?? '', value)}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export default PipelineMetricsSection
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
new file mode 100644
index 0000000000..c66f3ecc2f
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import type { EvaluationResourceProps } from '../../types'
+import { skipToken, useMutation, useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { consoleClient, consoleQuery } from '@/service/client'
+import { downloadUrl } from '@/utils/download'
+import { useEvaluationResource } from '../../store'
+import { decodeModelSelection } from '../../utils'
+import PipelineResultsTable from './pipeline-results-table'
+import { getMetricColumns, getRunDate } from './pipeline-results-utils'
+
+const PAGE_SIZE = 100
+
+const PipelineResultsPanel = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { t } = useTranslation('evaluation')
+  const resource = useEvaluationResource(resourceType, resourceId)
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+  const selectedRunId = resource.selectedRunId
+  const runDetailQuery = useQuery(consoleQuery.evaluation.runDetail.queryOptions({
+    input: selectedRunId
+      ? {
+          params: {
+            targetType: resourceType,
+            targetId: resourceId,
+            runId: selectedRunId,
+          },
+          query: {
+            page: 1,
+            page_size: PAGE_SIZE,
+          },
+        }
+      : skipToken,
+    refetchOnWindowFocus: false,
+  }))
+  const resultFileDownloadMutation = useMutation({
+    mutationFn: async (fileId: string) => {
+      const fileInfo = await consoleClient.evaluation.file({
+        params: {
+          targetType: resourceType,
+          targetId: resourceId,
+          fileId,
+        },
+      })
+
+      downloadUrl({ url: fileInfo.download_url, fileName: fileInfo.name })
+    },
+  })
+  const runDetail = runDetailQuery.data
+  const items = runDetail?.items.data ?? []
+  const metricColumns = getMetricColumns(resource, items)
+  const thresholdColumns = metricColumns.filter(column => column.threshold !== undefined)
+  const isEmpty = !selectedRunId || (!runDetailQuery.isLoading && items.length === 0)
+
+  if (isEmpty) {
+    return (
+      <div className="flex min-h-[360px] flex-1 items-center justify-center xl:min-h-0">
+        <div className="flex flex-col items-center gap-4 px-4 text-center">
+          <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
+          <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-background-default">
+      <div className="shrink-0 px-6 pt-4 pb-2">
+        <h2 className="system-xl-semibold text-text-primary">{t('results.title')}</h2>
+      </div>
+      {runDetailQuery.isError && (
+        <div className="px-6 py-4 system-sm-regular text-text-destructive">{t('results.loadFailed')}</div>
+      )}
+      {!runDetailQuery.isError && (
+        <div className="flex min-h-0 flex-1 flex-col px-6 py-1">
+          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 py-1">
+            <div className="flex min-w-0 flex-wrap items-center gap-2 system-xs-regular text-text-secondary">
+              <span>{getRunDate(runDetail?.run.started_at ?? runDetail?.run.created_at ?? null)}</span>
+              <span aria-hidden="true">·</span>
+              <span>{t('results.queryCount', { count: runDetail?.run.total_items ?? runDetail?.items.total ?? items.length })}</span>
+              {selectedModel && (
+                <>
+                  <span aria-hidden="true">·</span>
+                  <span className="inline-flex min-w-0 items-center gap-1.5 rounded-lg bg-background-section-burn px-2 py-1">
+                    <span aria-hidden="true" className="i-ri-robot-2-line h-4 w-4 shrink-0 text-text-accent" />
+                    <span className="truncate">{selectedModel.model}</span>
+                  </span>
+                </>
+              )}
+              {thresholdColumns.length > 0 && (
+                <>
+                  <span aria-hidden="true">·</span>
+                  <span className="flex min-w-0 flex-wrap items-center gap-1">
+                    {thresholdColumns.map(column => (
+                      <span
+                        key={column.id}
+                        className="rounded-lg border-[0.5px] border-divider-subtle bg-background-section px-2 py-1 text-text-tertiary"
+                      >
+                        {t('results.metricThreshold', { metric: column.label, threshold: column.threshold })}
+                      </span>
+                    ))}
+                  </span>
+                </>
+              )}
+            </div>
+            <button
+              type="button"
+              className="inline-flex h-7 shrink-0 items-center gap-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 system-xs-medium text-components-button-secondary-text shadow-xs disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={!runDetail?.run.result_file_id || resultFileDownloadMutation.isPending}
+              onClick={() => {
+                if (runDetail?.run.result_file_id)
+                  resultFileDownloadMutation.mutate(runDetail.run.result_file_id)
+              }}
+            >
+              <span aria-hidden="true" className="i-ri-download-2-line h-3.5 w-3.5" />
+              {t('results.export')}
+            </button>
+          </div>
+
+          <PipelineResultsTable
+            items={items}
+            metricColumns={metricColumns}
+            isLoading={runDetailQuery.isLoading}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default PipelineResultsPanel
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
new file mode 100644
index 0000000000..15e21f1315
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
@@ -0,0 +1,118 @@
+import type { MetricColumn } from './pipeline-results-utils'
+import type { EvaluationRunItem } from '@/types/evaluation'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import {
+  formatValue,
+  getIsItemPassed,
+  getMetricTextClassName,
+  getMetricValue,
+  getQueryContent,
+} from './pipeline-results-utils'
+
+const LOADING_ROW_IDS = ['1', '2', '3', '4', '5', '6']
+
+type PipelineResultsTableProps = {
+  items: EvaluationRunItem[]
+  metricColumns: MetricColumn[]
+  isLoading: boolean
+}
+
+const PipelineResultsTable = ({
+  items,
+  metricColumns,
+  isLoading,
+}: PipelineResultsTableProps) => {
+  const { t } = useTranslation('evaluation')
+
+  return (
+    <div className="min-h-0 flex-1 overflow-auto py-2">
+      <table className="min-w-full table-fixed border-collapse overflow-hidden rounded-lg">
+        <colgroup>
+          <col className="w-10" />
+          <col className="w-[220px]" />
+          <col className="w-[190px]" />
+          <col className="w-[220px]" />
+          {metricColumns.map(column => <col key={column.id} className="w-24" />)}
+        </colgroup>
+        <thead>
+          <tr className="bg-background-section">
+            <th className="h-7 rounded-l-lg" />
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.query')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.expected')}</th>
+            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.actual')}</th>
+            {metricColumns.map((column, index) => (
+              <th
+                key={column.id}
+                className={cn(
+                  'system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary',
+                  index === metricColumns.length - 1 && 'rounded-r-lg',
+                )}
+              >
+                {column.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading && LOADING_ROW_IDS.map(rowId => (
+            <tr key={rowId} className="border-b border-divider-subtle">
+              <td colSpan={4 + metricColumns.length} className="h-10 px-3">
+                <div className="h-4 animate-pulse rounded bg-background-section" />
+              </td>
+            </tr>
+          ))}
+          {!isLoading && items.map((item) => {
+            const isPassed = getIsItemPassed(item, metricColumns)
+            const actualOutput = item.error ?? item.actual_output
+
+            return (
+              <tr key={item.id} className="border-b border-divider-subtle even:bg-background-default-subtle">
+                <td className="h-10 px-3 align-top">
+                  <span
+                    aria-label={isPassed ? t('results.status.passed') : t('results.status.failed')}
+                    className={cn(
+                      'mt-3 inline-block h-4 w-4',
+                      isPassed
+                        ? 'i-ri-check-line text-util-colors-green-green-600'
+                        : 'i-ri-close-line text-util-colors-red-red-600',
+                    )}
+                  />
+                </td>
+                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
+                  <div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
+                </td>
+                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
+                  <div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
+                </td>
+                <td className={cn(
+                  'system-sm-regular h-10 px-3 py-3 align-top',
+                  actualOutput ? 'text-text-secondary' : 'text-text-destructive',
+                )}
+                >
+                  <div className="line-clamp-2 break-words">
+                    {actualOutput ? formatValue(actualOutput) : t('results.noResult')}
+                  </div>
+                </td>
+                {metricColumns.map((column) => {
+                  const metricValue = getMetricValue(item.metrics, column)
+
+                  return (
+                    <td
+                      key={column.id}
+                      className={cn('system-sm-regular h-10 px-3 py-3 align-top', getMetricTextClassName(metricValue, column))}
+                    >
+                      {formatValue(metricValue)}
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PipelineResultsTable
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts b/web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts
new file mode 100644
index 0000000000..6523221315
--- /dev/null
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-utils.ts
@@ -0,0 +1,179 @@
+import type { EvaluationResourceState } from '../../types'
+import type { EvaluationRunItem, EvaluationRunMetric } from '@/types/evaluation'
+import { formatTime } from '@/utils/time'
+
+const PREFERRED_QUERY_INPUT_KEYS = ['query', 'question', 'input']
+
+export type MetricColumn = {
+  id: string
+  label: string
+  threshold?: number
+}
+
+const normalizeMetricKey = (value: string) => value.toLowerCase().replace(/[\s_-]/g, '')
+
+const humanizeMetricName = (name: string) => {
+  return name
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+export const formatValue = (value: unknown) => {
+  if (value === null || value === undefined || value === '')
+    return '-'
+
+  if (typeof value === 'string')
+    return value
+
+  if (typeof value === 'number') {
+    return Number.isInteger(value)
+      ? String(value)
+      : value.toLocaleString(undefined, { maximumFractionDigits: 3 })
+  }
+
+  if (typeof value === 'boolean')
+    return value ? 'true' : 'false'
+
+  return JSON.stringify(value)
+}
+
+export const getQueryContent = (item: EvaluationRunItem) => {
+  for (const key of PREFERRED_QUERY_INPUT_KEYS) {
+    const value = item.inputs[key]
+    if (value !== undefined)
+      return formatValue(value)
+  }
+
+  const firstValue = Object.values(item.inputs).find(value => value !== undefined && value !== null && value !== '')
+  return formatValue(firstValue)
+}
+
+export const getMetricValue = (metrics: EvaluationRunMetric[], column: MetricColumn) => {
+  const normalizedColumnId = normalizeMetricKey(column.id)
+  const normalizedColumnLabel = normalizeMetricKey(column.label)
+  const metric = metrics.find((item) => {
+    if (!item.name)
+      return false
+
+    const normalizedMetricName = normalizeMetricKey(item.name)
+    return normalizedMetricName === normalizedColumnId || normalizedMetricName === normalizedColumnLabel
+  })
+
+  return metric?.value
+}
+
+const getNumericMetricValue = (metrics: EvaluationRunMetric[], column: MetricColumn) => {
+  const value = getMetricValue(metrics, column)
+  if (typeof value === 'number')
+    return value
+
+  if (typeof value === 'string' && value.trim() !== '') {
+    const numericValue = Number(value)
+    return Number.isNaN(numericValue) ? null : numericValue
+  }
+
+  return null
+}
+
+export const getMetricTextClassName = (value: unknown, column: MetricColumn) => {
+  const numericValue = typeof value === 'number'
+    ? value
+    : typeof value === 'string' && value.trim() !== ''
+      ? Number(value)
+      : null
+
+  if (numericValue === null || Number.isNaN(numericValue))
+    return 'text-text-secondary'
+
+  if (column.threshold === undefined)
+    return 'text-text-secondary'
+
+  if (numericValue >= column.threshold)
+    return 'text-util-colors-green-green-600'
+
+  if (numericValue === 0)
+    return 'text-util-colors-red-red-600'
+
+  return 'text-util-colors-warning-warning-600'
+}
+
+const getJudgmentResult = (judgment: Record<string, unknown>) => {
+  for (const key of ['passed', 'pass', 'success', 'result']) {
+    const value = judgment[key]
+    if (typeof value === 'boolean')
+      return value
+
+    if (typeof value === 'string') {
+      const normalizedValue = value.toLowerCase()
+      if (['passed', 'pass', 'success', 'succeeded', 'true'].includes(normalizedValue))
+        return true
+
+      if (['failed', 'fail', 'failure', 'false'].includes(normalizedValue))
+        return false
+    }
+  }
+
+  return null
+}
+
+export const getIsItemPassed = (item: EvaluationRunItem, metricColumns: MetricColumn[]) => {
+  if (item.error)
+    return false
+
+  const judgmentResult = getJudgmentResult(item.judgment)
+  if (judgmentResult !== null)
+    return judgmentResult
+
+  const thresholdColumns = metricColumns.filter(column => column.threshold !== undefined)
+  if (thresholdColumns.length > 0) {
+    return thresholdColumns.every((column) => {
+      const metricValue = getNumericMetricValue(item.metrics, column)
+      const threshold = column.threshold
+      return threshold !== undefined && metricValue !== null && metricValue >= threshold
+    })
+  }
+
+  return item.overall_score === null ? true : item.overall_score > 0
+}
+
+export const getMetricColumns = (
+  resource: EvaluationResourceState,
+  items: EvaluationRunItem[],
+) => {
+  const columns = new Map<string, MetricColumn>()
+
+  resource.metrics.forEach((metric) => {
+    columns.set(normalizeMetricKey(metric.optionId), {
+      id: metric.optionId,
+      label: metric.label,
+      threshold: metric.threshold,
+    })
+  })
+
+  items.forEach((item) => {
+    item.metrics.forEach((metric) => {
+      if (!metric.name)
+        return
+
+      const normalizedName = normalizeMetricKey(metric.name)
+      if (!columns.has(normalizedName)) {
+        columns.set(normalizedName, {
+          id: metric.name,
+          label: humanizeMetricName(metric.name),
+        })
+      }
+    })
+  })
+
+  return Array.from(columns.values())
+}
+
+export const getRunDate = (timestamp: number | null) => {
+  if (!timestamp)
+    return '-'
+
+  const milliseconds = timestamp > 1_000_000_000_000 ? timestamp : timestamp * 1000
+  return formatTime({ date: milliseconds, dateFormat: 'YYYY-MM-DD HH:mm' })
+}
diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
new file mode 100644
index 0000000000..6ddc155201
--- /dev/null
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+
+type SectionHeaderProps = {
+  title: string
+  description?: ReactNode
+  action?: ReactNode
+  className?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+type InlineSectionHeaderProps = {
+  title: string
+  tooltip?: ReactNode
+  action?: ReactNode
+  className?: string
+}
+
+const SectionHeader = ({
+  title,
+  description,
+  action,
+  className,
+  titleClassName,
+  descriptionClassName,
+}: SectionHeaderProps) => {
+  return (
+    <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
+      <div>
+        <div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div>
+        {description && <div className={cn('system-sm-regular mt-1 text-text-tertiary', descriptionClassName)}>{description}</div>}
+      </div>
+      {action}
+    </div>
+  )
+}
+
+export const InlineSectionHeader = ({
+  title,
+  tooltip,
+  action,
+  className,
+}: InlineSectionHeaderProps) => {
+  return (
+    <div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
+      <div className="flex min-h-6 items-center gap-1">
+        <div className="system-md-semibold text-text-primary">{title}</div>
+        {tooltip && (
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <button
+                  type="button"
+                  className="flex h-4 w-4 items-center justify-center text-text-quaternary transition-colors hover:text-text-tertiary"
+                  aria-label={title}
+                >
+                  <span aria-hidden="true" className="i-ri-question-line h-3.5 w-3.5" />
+                </button>
+              )}
+            />
+            <TooltipContent>
+              {tooltip}
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+      {action}
+    </div>
+  )
+}
+
+export default SectionHeader
diff --git a/web/app/components/evaluation/default-metric-descriptions.ts b/web/app/components/evaluation/default-metric-descriptions.ts
new file mode 100644
index 0000000000..c989a45d62
--- /dev/null
+++ b/web/app/components/evaluation/default-metric-descriptions.ts
@@ -0,0 +1,79 @@
+import type { TFunction } from 'i18next'
+
+const DEFAULT_METRIC_DESCRIPTION = {
+  FAITHFULNESS: 'Measures whether every claim in the model\'s response is grounded in the provided retrieved context. A high score means the answer contains no hallucinated content; each statement can be traced back to a passage in the context.',
+  ANSWER_RELEVANCY: 'Measures how well the model\'s response addresses the user\'s question. A high score means the answer stays on-topic; a low score indicates irrelevant content or a failure to answer the actual question.',
+  ANSWER_CORRECTNESS: 'Measures the factual accuracy and completeness of the model\'s answer relative to a ground-truth reference. It combines semantic similarity with key-fact coverage, so both meaning and content matter.',
+  SEMANTIC_SIMILARITY: 'Measures the cosine similarity between the model\'s response and the reference answer in an embedding space. It evaluates whether the two texts convey the same meaning, independent of factual correctness.',
+  CONTEXT_PRECISION: 'Measures the proportion of retrieved context chunks that are actually relevant to the question (precision). A high score means the retrieval pipeline returns little noise.',
+  CONTEXT_RECALL: 'Measures the proportion of ground-truth information that is covered by the retrieved context chunks (recall). A high score means the retrieval pipeline does not miss important supporting evidence.',
+  CONTEXT_RELEVANCE: 'Measures how relevant each individual retrieved chunk is to the query. Similar to CONTEXT_PRECISION but evaluated at the chunk level rather than against a reference answer.',
+  TOOL_CORRECTNESS: 'Measures the correctness of the tool calls made by the agent during task execution: both the choice of tool and the arguments passed. A high score means the agent\'s tool-use strategy matches the expected behavior.',
+  TASK_COMPLETION: 'Measures whether the agent ultimately achieves the user\'s stated goal. It evaluates the reasoning chain, intermediate steps, and final output holistically; a high score means the task was fully accomplished.',
+} as const
+
+type DefaultMetricDescription = typeof DEFAULT_METRIC_DESCRIPTION[keyof typeof DEFAULT_METRIC_DESCRIPTION]
+
+const DEFAULT_METRIC_DESCRIPTION_KEYS = {
+  FAITHFULNESS: 'metrics.builtin.description.faithfulness',
+  ANSWER_RELEVANCY: 'metrics.builtin.description.answerRelevancy',
+  ANSWER_CORRECTNESS: 'metrics.builtin.description.answerCorrectness',
+  SEMANTIC_SIMILARITY: 'metrics.builtin.description.semanticSimilarity',
+  CONTEXT_PRECISION: 'metrics.builtin.description.contextPrecision',
+  CONTEXT_RECALL: 'metrics.builtin.description.contextRecall',
+  CONTEXT_RELEVANCE: 'metrics.builtin.description.contextRelevance',
+  TOOL_CORRECTNESS: 'metrics.builtin.description.toolCorrectness',
+  TASK_COMPLETION: 'metrics.builtin.description.taskCompletion',
+} as const
+
+type DefaultMetricDescriptionKey = typeof DEFAULT_METRIC_DESCRIPTION_KEYS[keyof typeof DEFAULT_METRIC_DESCRIPTION_KEYS]
+
+const DEFAULT_METRIC_DESCRIPTIONS: Record<string, DefaultMetricDescription> = {
+  'faithfulness': DEFAULT_METRIC_DESCRIPTION.FAITHFULNESS,
+  'answer-relevancy': DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
+  'answer-correctness': DEFAULT_METRIC_DESCRIPTION.ANSWER_CORRECTNESS,
+  'semantic-similarity': DEFAULT_METRIC_DESCRIPTION.SEMANTIC_SIMILARITY,
+  'context-precision': DEFAULT_METRIC_DESCRIPTION.CONTEXT_PRECISION,
+  'context-recall': DEFAULT_METRIC_DESCRIPTION.CONTEXT_RECALL,
+  'context-relevance': DEFAULT_METRIC_DESCRIPTION.CONTEXT_RELEVANCE,
+  'tool-correctness': DEFAULT_METRIC_DESCRIPTION.TOOL_CORRECTNESS,
+  'task-completion': DEFAULT_METRIC_DESCRIPTION.TASK_COMPLETION,
+  'relevance': DEFAULT_METRIC_DESCRIPTION.ANSWER_RELEVANCY,
+}
+
+const DEFAULT_METRIC_DESCRIPTION_I18N_KEYS: Record<string, DefaultMetricDescriptionKey> = {
+  'faithfulness': DEFAULT_METRIC_DESCRIPTION_KEYS.FAITHFULNESS,
+  'answer-relevancy': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
+  'answer-correctness': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_CORRECTNESS,
+  'semantic-similarity': DEFAULT_METRIC_DESCRIPTION_KEYS.SEMANTIC_SIMILARITY,
+  'context-precision': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_PRECISION,
+  'context-recall': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RECALL,
+  'context-relevance': DEFAULT_METRIC_DESCRIPTION_KEYS.CONTEXT_RELEVANCE,
+  'tool-correctness': DEFAULT_METRIC_DESCRIPTION_KEYS.TOOL_CORRECTNESS,
+  'task-completion': DEFAULT_METRIC_DESCRIPTION_KEYS.TASK_COMPLETION,
+  'relevance': DEFAULT_METRIC_DESCRIPTION_KEYS.ANSWER_RELEVANCY,
+}
+
+const normalizeMetricId = (metricId: string) => metricId.trim().toLowerCase().replace(/_/g, '-')
+
+export const getDefaultMetricDescription = (metricId: string) => {
+  return DEFAULT_METRIC_DESCRIPTIONS[normalizeMetricId(metricId)] ?? ''
+}
+
+export const getDefaultMetricDescriptionI18nKey = (metricId: string) => {
+  return DEFAULT_METRIC_DESCRIPTION_I18N_KEYS[normalizeMetricId(metricId)] ?? null
+}
+
+export const getTranslatedMetricDescription = (
+  t: TFunction<'evaluation'>,
+  metricId: string,
+  fallbackDescription = '',
+) => {
+  const defaultDescription = fallbackDescription || getDefaultMetricDescription(metricId)
+  const descriptionI18nKey = getDefaultMetricDescriptionI18nKey(metricId)
+
+  if (!descriptionI18nKey)
+    return defaultDescription
+
+  return t(descriptionI18nKey, { defaultValue: defaultDescription })
+}
diff --git a/web/app/components/evaluation/index.tsx b/web/app/components/evaluation/index.tsx
new file mode 100644
index 0000000000..b12157b7fa
--- /dev/null
+++ b/web/app/components/evaluation/index.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { EvaluationResourceProps } from './types'
+import { useEffect } from 'react'
+import { useEvaluationConfig } from '@/service/use-evaluation'
+import NonPipelineEvaluation from './components/layout/non-pipeline-evaluation'
+import PipelineEvaluation from './components/layout/pipeline-evaluation'
+import { useEvaluationStore } from './store'
+
+const Evaluation = ({
+  resourceType,
+  resourceId,
+}: EvaluationResourceProps) => {
+  const { data: config } = useEvaluationConfig(resourceType, resourceId)
+  const ensureResource = useEvaluationStore(state => state.ensureResource)
+  const hydrateResource = useEvaluationStore(state => state.hydrateResource)
+
+  useEffect(() => {
+    ensureResource(resourceType, resourceId)
+  }, [ensureResource, resourceId, resourceType])
+
+  useEffect(() => {
+    if (!config)
+      return
+
+    hydrateResource(resourceType, resourceId, config)
+  }, [config, hydrateResource, resourceId, resourceType])
+
+  if (resourceType === 'datasets') {
+    return (
+      <PipelineEvaluation
+        resourceType={resourceType}
+        resourceId={resourceId}
+      />
+    )
+  }
+
+  return (
+    <NonPipelineEvaluation
+      resourceType={resourceType}
+      resourceId={resourceId}
+    />
+  )
+}
+
+export default Evaluation
diff --git a/web/app/components/evaluation/mock.ts b/web/app/components/evaluation/mock.ts
new file mode 100644
index 0000000000..61f6d57b39
--- /dev/null
+++ b/web/app/components/evaluation/mock.ts
@@ -0,0 +1,179 @@
+import type {
+  EvaluationFieldOption,
+  EvaluationMockConfig,
+  EvaluationResourceType,
+  MetricOption,
+} from './types'
+import { getDefaultMetricDescription } from './default-metric-descriptions'
+
+const judgeModels = [
+  {
+    id: 'gpt-4.1-mini',
+    label: 'GPT-4.1 mini',
+    provider: 'OpenAI',
+  },
+  {
+    id: 'claude-3-7-sonnet',
+    label: 'Claude 3.7 Sonnet',
+    provider: 'Anthropic',
+  },
+  {
+    id: 'gemini-2.0-flash',
+    label: 'Gemini 2.0 Flash',
+    provider: 'Google',
+  },
+]
+
+const builtinMetrics: MetricOption[] = [
+  {
+    id: 'answer-correctness',
+    label: 'Answer Correctness',
+    description: getDefaultMetricDescription('answer-correctness'),
+    valueType: 'number',
+  },
+  {
+    id: 'faithfulness',
+    label: 'Faithfulness',
+    description: getDefaultMetricDescription('faithfulness'),
+    valueType: 'number',
+  },
+  {
+    id: 'relevance',
+    label: 'Relevance',
+    description: getDefaultMetricDescription('relevance'),
+    valueType: 'number',
+  },
+  {
+    id: 'latency',
+    label: 'Latency',
+    description: 'Captures runtime responsiveness for the full execution path.',
+    valueType: 'number',
+  },
+  {
+    id: 'token-usage',
+    label: 'Token Usage',
+    description: 'Tracks prompt and completion token consumption for the run.',
+    valueType: 'number',
+  },
+  {
+    id: 'tool-success-rate',
+    label: 'Tool Success Rate',
+    description: 'Measures whether each required tool invocation finishes without failure.',
+    valueType: 'number',
+  },
+]
+
+const pipelineBuiltinMetrics: MetricOption[] = [
+  {
+    id: 'context-precision',
+    label: 'Context Precision',
+    description: getDefaultMetricDescription('context-precision'),
+    valueType: 'number',
+  },
+  {
+    id: 'context-recall',
+    label: 'Context Recall',
+    description: getDefaultMetricDescription('context-recall'),
+    valueType: 'number',
+  },
+  {
+    id: 'context-relevance',
+    label: 'Context Relevance',
+    description: getDefaultMetricDescription('context-relevance'),
+    valueType: 'number',
+  },
+]
+
+const workflowOptions = [
+  {
+    id: 'workflow-precision-review',
+    label: 'Precision Review Workflow',
+    description: 'Custom evaluator for nuanced quality review.',
+    targetVariables: [
+      { id: 'query', label: 'query' },
+      { id: 'answer', label: 'answer' },
+      { id: 'reference', label: 'reference' },
+    ],
+  },
+  {
+    id: 'workflow-risk-review',
+    label: 'Risk Review Workflow',
+    description: 'Custom evaluator for policy and escalation checks.',
+    targetVariables: [
+      { id: 'input', label: 'input' },
+      { id: 'output', label: 'output' },
+    ],
+  },
+]
+
+const workflowFields: EvaluationFieldOption[] = [
+  { id: 'app.input.query', label: 'Query', group: 'App Input', type: 'string' },
+  { id: 'app.input.locale', label: 'Locale', group: 'App Input', type: 'enum', options: [{ value: 'en-US', label: 'en-US' }, { value: 'zh-Hans', label: 'zh-Hans' }] },
+  { id: 'app.output.answer', label: 'Answer', group: 'App Output', type: 'string' },
+  { id: 'app.output.score', label: 'Score', group: 'App Output', type: 'number' },
+  { id: 'system.has_context', label: 'Has Context', group: 'System', type: 'boolean' },
+]
+
+const pipelineFields: EvaluationFieldOption[] = [
+  { id: 'dataset.input.document_id', label: 'Document ID', group: 'Dataset', type: 'string' },
+  { id: 'dataset.input.chunk_count', label: 'Chunk Count', group: 'Dataset', type: 'number' },
+  { id: 'retrieval.output.hit_rate', label: 'Hit Rate', group: 'Retrieval', type: 'number' },
+  { id: 'retrieval.output.source', label: 'Source', group: 'Retrieval', type: 'enum', options: [{ value: 'bm25', label: 'BM25' }, { value: 'hybrid', label: 'Hybrid' }] },
+  { id: 'pipeline.output.published', label: 'Published', group: 'Output', type: 'boolean' },
+]
+
+const snippetFields: EvaluationFieldOption[] = [
+  { id: 'snippet.input.blog_url', label: 'Blog URL', group: 'Snippet Input', type: 'string' },
+  { id: 'snippet.input.platforms', label: 'Platforms', group: 'Snippet Input', type: 'string' },
+  { id: 'snippet.output.content', label: 'Generated Content', group: 'Snippet Output', type: 'string' },
+  { id: 'snippet.output.length', label: 'Output Length', group: 'Snippet Output', type: 'number' },
+  { id: 'system.requires_review', label: 'Requires Review', group: 'System', type: 'boolean' },
+]
+
+export const getEvaluationMockConfig = (resourceType: EvaluationResourceType): EvaluationMockConfig => {
+  if (resourceType === 'datasets') {
+    return {
+      judgeModels,
+      builtinMetrics: pipelineBuiltinMetrics,
+      workflowOptions,
+      fieldOptions: pipelineFields,
+      templateFileName: 'pipeline-evaluation-template.csv',
+      batchRequirements: [
+        'Include one row per retrieval scenario.',
+        'Provide the expected source or target chunk for each case.',
+        'Keep numeric metrics in plain number format.',
+      ],
+      historySummaryLabel: 'Pipeline evaluation batch',
+    }
+  }
+
+  if (resourceType === 'snippets') {
+    return {
+      judgeModels,
+      builtinMetrics,
+      workflowOptions,
+      fieldOptions: snippetFields,
+      templateFileName: 'snippet-evaluation-template.csv',
+      batchRequirements: [
+        'Include one row per snippet execution case.',
+        'Provide the expected final content or acceptance rule.',
+        'Keep optional fields empty when not used.',
+      ],
+      historySummaryLabel: 'Snippet evaluation batch',
+    }
+  }
+
+  return {
+    judgeModels,
+    builtinMetrics,
+    workflowOptions,
+    fieldOptions: workflowFields,
+    templateFileName: 'workflow-evaluation-template.csv',
+    batchRequirements: [
+      'Include one row per workflow test case.',
+      'Provide both user input and expected answer when available.',
+      'Keep boolean columns as true or false.',
+    ],
+    historySummaryLabel: 'Workflow evaluation batch',
+  }
+}
diff --git a/web/app/components/evaluation/store-utils.ts b/web/app/components/evaluation/store-utils.ts
new file mode 100644
index 0000000000..b8903442d8
--- /dev/null
+++ b/web/app/components/evaluation/store-utils.ts
@@ -0,0 +1,696 @@
+import type {
+  BatchTestRecord,
+  ComparisonOperator,
+  CustomMetricMapping,
+  EvaluationMetric,
+  EvaluationResourceState,
+  EvaluationResourceType,
+  JudgmentConditionItem,
+  JudgmentConfig,
+  MetricOption,
+} from './types'
+import type {
+  EvaluationConfig,
+  EvaluationConfigData,
+  EvaluationCustomizedMetric,
+  EvaluationDefaultMetric,
+  EvaluationJudgmentCondition,
+  EvaluationJudgmentConditionValue,
+  EvaluationJudgmentConfig,
+  EvaluationRunRequest,
+  NodeInfo,
+} from '@/types/evaluation'
+import { getDefaultMetricDescription } from './default-metric-descriptions'
+import { getEvaluationMockConfig } from './mock'
+import {
+  buildConditionMetricOptions,
+  decodeModelSelection,
+  encodeModelSelection,
+  getComparisonOperators,
+  getDefaultComparisonOperator,
+  requiresComparisonValue,
+} from './utils'
+
+type EvaluationStoreResources = Record<string, EvaluationResourceState>
+
+export const DEFAULT_PIPELINE_METRIC_THRESHOLD = 0.85
+
+const PIPELINE_LOGICAL_OPERATOR: JudgmentConfig['logicalOperator'] = 'and'
+
+const createId = (prefix: string) => `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+
+const humanizeMetricId = (metricId: string) => {
+  return metricId
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+const resolveMetricOption = (resourceType: EvaluationResourceType, metricId: string): MetricOption => {
+  const config = getEvaluationMockConfig(resourceType)
+  return config.builtinMetrics.find(metric => metric.id === metricId) ?? {
+    id: metricId,
+    label: humanizeMetricId(metricId),
+    description: getDefaultMetricDescription(metricId),
+    valueType: 'number',
+  }
+}
+
+const pipelineMetricIds = new Set(getEvaluationMockConfig('datasets').builtinMetrics.map(metric => metric.id))
+
+const isPipelineResourceType = (resourceType: EvaluationResourceType) => resourceType === 'datasets'
+
+const isPipelineResourceState = (resource: EvaluationResourceState) => {
+  return resource.metrics.length > 0
+    && resource.metrics.every(metric => metric.kind === 'builtin' && pipelineMetricIds.has(metric.optionId))
+}
+
+const normalizeNodeInfoList = (value: NodeInfo[] | undefined): NodeInfo[] => {
+  if (!value?.length)
+    return []
+
+  return value
+    .map((item) => {
+      const nodeId = typeof item.node_id === 'string' ? item.node_id : ''
+      const title = typeof item.title === 'string' ? item.title : nodeId
+      const type = typeof item.type === 'string' ? item.type : ''
+
+      if (!nodeId)
+        return null
+
+      return {
+        node_id: nodeId,
+        title,
+        type,
+      }
+    })
+    .filter((item): item is NodeInfo => !!item)
+}
+
+const normalizeDefaultMetrics = (
+  resourceType: EvaluationResourceType,
+  value: EvaluationDefaultMetric[] | null | undefined,
+): EvaluationMetric[] => {
+  if (!value?.length)
+    return []
+
+  return value
+    .map((item) => {
+      const metricId = typeof item.metric === 'string' ? item.metric : ''
+      if (!metricId)
+        return null
+
+      const metricOption = resolveMetricOption(resourceType, metricId)
+      return createBuiltinMetric(metricOption, normalizeNodeInfoList(item.node_info_list ?? []))
+    })
+    .filter((item): item is EvaluationMetric => !!item)
+}
+
+const normalizeCustomMetricMappings = (
+  value: EvaluationCustomizedMetric['input_fields'],
+): CustomMetricMapping[] => {
+  if (!value)
+    return []
+
+  return Object.entries(value)
+    .filter((entry): entry is [string, string] => {
+      const [, outputVariableId] = entry
+      return typeof outputVariableId === 'string' && !!outputVariableId
+    })
+    .map(([inputVariableId, outputVariableId]) => createCustomMetricMapping(inputVariableId, outputVariableId))
+}
+
+const normalizeCustomMetricOutputs = (
+  value: EvaluationCustomizedMetric['output_fields'],
+) => {
+  if (!value)
+    return []
+
+  return value
+    .map((output) => {
+      const id = typeof output.variable === 'string' ? output.variable : ''
+      if (!id)
+        return null
+
+      return {
+        id,
+        valueType: typeof output.value_type === 'string' ? output.value_type : null,
+      }
+    })
+    .filter((output): output is { id: string, valueType: string | null } => !!output)
+}
+
+const normalizeCustomMetric = (
+  value: EvaluationCustomizedMetric | null | undefined,
+): EvaluationMetric[] => {
+  if (!value)
+    return []
+
+  const workflowId = typeof value.evaluation_workflow_id === 'string' ? value.evaluation_workflow_id : null
+  if (!workflowId)
+    return []
+
+  const customMetric = createCustomMetric()
+
+  return [{
+    ...customMetric,
+    customConfig: customMetric.customConfig
+      ? {
+          ...customMetric.customConfig,
+          workflowId,
+          mappings: normalizeCustomMetricMappings(value.input_fields),
+          outputs: normalizeCustomMetricOutputs(value.output_fields),
+        }
+      : customMetric.customConfig,
+  }]
+}
+
+const normalizeVariableSelector = (value: string[] | undefined): [string, string] | null => {
+  if (!Array.isArray(value) || value.length < 2)
+    return null
+
+  const [scope, metricName] = value
+  return typeof scope === 'string' && !!scope && typeof metricName === 'string' && !!metricName
+    ? [scope, metricName]
+    : null
+}
+
+const getConditionNumericValue = (value: EvaluationJudgmentCondition['value']) => {
+  if (typeof value === 'number')
+    return value
+
+  if (typeof value !== 'string')
+    return null
+
+  const parsedValue = Number(value)
+  return Number.isFinite(parsedValue) ? parsedValue : null
+}
+
+const getPipelineMetricThreshold = (
+  metric: EvaluationMetric,
+  config: EvaluationConfig,
+) => {
+  const matchingCondition = (config.judgment_config?.conditions ?? []).find((condition) => {
+    const variableSelector = normalizeVariableSelector(condition.variable_selector)
+    if (!variableSelector || variableSelector[1] !== metric.optionId || condition.comparison_operator !== '≥')
+      return false
+
+    if (!metric.nodeInfoList?.length)
+      return true
+
+    return metric.nodeInfoList.some(nodeInfo => nodeInfo.node_id === variableSelector[0])
+  })
+
+  return getConditionNumericValue(matchingCondition?.value) ?? metric.threshold ?? DEFAULT_PIPELINE_METRIC_THRESHOLD
+}
+
+const normalizePipelineMetrics = (
+  config: EvaluationConfig,
+  metrics: EvaluationMetric[],
+) => {
+  return metrics.map(metric => ({
+    ...metric,
+    valueType: 'number' as const,
+    threshold: getPipelineMetricThreshold(metric, config),
+  }))
+}
+
+const getNormalizedConditionValue = (
+  operator: ComparisonOperator,
+  previousValue: EvaluationJudgmentConditionValue | string | number | boolean | null | undefined,
+) => {
+  if (!requiresComparisonValue(operator))
+    return null
+
+  if (Array.isArray(previousValue))
+    return previousValue.filter((item): item is string => typeof item === 'string' && !!item)
+
+  if (typeof previousValue === 'boolean')
+    return previousValue
+
+  if (typeof previousValue === 'number')
+    return String(previousValue)
+
+  return typeof previousValue === 'string' ? previousValue : null
+}
+
+const normalizeConditionItem = (
+  value: EvaluationJudgmentCondition,
+  metrics: EvaluationMetric[],
+): JudgmentConditionItem | null => {
+  const variableSelector = normalizeVariableSelector(value.variable_selector)
+  if (!variableSelector)
+    return null
+
+  const metricOption = buildConditionMetricOptions(metrics).find(option =>
+    option.variableSelector[0] === variableSelector[0] && option.variableSelector[1] === variableSelector[1],
+  )
+  if (!metricOption)
+    return null
+
+  const allowedOperators = getComparisonOperators(metricOption.valueType)
+  const rawOperator = typeof value.comparison_operator === 'string' ? value.comparison_operator : ''
+  const comparisonOperator = allowedOperators.includes(rawOperator as ComparisonOperator)
+    ? rawOperator as ComparisonOperator
+    : getDefaultComparisonOperator(metricOption.valueType)
+
+  return {
+    id: createId('condition'),
+    variableSelector,
+    comparisonOperator,
+    value: getConditionValue(metricOption.valueType, comparisonOperator, value.value),
+  }
+}
+
+const createEmptyJudgmentConfig = (): JudgmentConfig => {
+  return {
+    logicalOperator: 'and',
+    conditions: [],
+  }
+}
+
+const normalizeJudgmentConfig = (
+  config: EvaluationConfig,
+  metrics: EvaluationMetric[],
+): JudgmentConfig => {
+  const rawJudgmentConfig: EvaluationJudgmentConfig | null | undefined = config.judgment_config
+
+  if (!rawJudgmentConfig)
+    return createEmptyJudgmentConfig()
+
+  const conditions = (rawJudgmentConfig.conditions ?? [])
+    .map(condition => normalizeConditionItem(condition, metrics))
+    .filter((condition): condition is JudgmentConditionItem => !!condition)
+
+  return {
+    logicalOperator: rawJudgmentConfig.logical_operator === 'or' ? 'or' : 'and',
+    conditions,
+  }
+}
+
+export const buildResourceKey = (resourceType: EvaluationResourceType, resourceId: string) => `${resourceType}:${resourceId}`
+
+export const requiresConditionValue = (operator: ComparisonOperator) => {
+  return requiresComparisonValue(operator)
+}
+
+export function getConditionValue(
+  valueType: EvaluationMetric['valueType'] | undefined,
+  operator: ComparisonOperator,
+  previousValue?: EvaluationJudgmentConditionValue | string | number | boolean | null,
+) {
+  if (!valueType || !requiresConditionValue(operator))
+    return null
+
+  if (valueType === 'boolean')
+    return typeof previousValue === 'boolean' ? previousValue : null
+
+  if (operator === 'in' || operator === 'not in') {
+    if (Array.isArray(previousValue))
+      return previousValue.filter((item): item is string => typeof item === 'string' && !!item)
+
+    return typeof previousValue === 'string' && previousValue
+      ? previousValue.split(',').map(item => item.trim()).filter(Boolean)
+      : []
+  }
+
+  return getNormalizedConditionValue(operator, previousValue)
+}
+
+export function createBuiltinMetric(
+  metric: MetricOption,
+  nodeInfoList: NodeInfo[] = [],
+  threshold = DEFAULT_PIPELINE_METRIC_THRESHOLD,
+): EvaluationMetric {
+  return {
+    id: createId('metric'),
+    optionId: metric.id,
+    kind: 'builtin',
+    label: metric.label,
+    description: metric.description,
+    valueType: metric.valueType,
+    threshold,
+    nodeInfoList,
+  }
+}
+
+function createCustomMetricMapping(
+  inputVariableId: string | null = null,
+  outputVariableId: string | null = null,
+): CustomMetricMapping {
+  return {
+    id: createId('mapping'),
+    inputVariableId,
+    outputVariableId,
+  }
+}
+
+export const syncCustomMetricMappings = (
+  mappings: CustomMetricMapping[],
+  inputVariableIds: string[],
+) => {
+  const mappingByInputVariableId = new Map(
+    mappings
+      .filter(mapping => !!mapping.inputVariableId)
+      .map(mapping => [mapping.inputVariableId, mapping]),
+  )
+
+  return inputVariableIds.map((inputVariableId) => {
+    const existingMapping = mappingByInputVariableId.get(inputVariableId)
+    return existingMapping
+      ? {
+          ...existingMapping,
+          inputVariableId,
+        }
+      : createCustomMetricMapping(inputVariableId, null)
+  })
+}
+
+export function createCustomMetric(): EvaluationMetric {
+  return {
+    id: createId('metric'),
+    optionId: createId('custom'),
+    kind: 'custom-workflow',
+    label: 'Custom Evaluator',
+    description: 'Map workflow variables to your evaluation inputs.',
+    valueType: 'number',
+    customConfig: {
+      workflowId: null,
+      workflowAppId: null,
+      workflowName: null,
+      mappings: [],
+      outputs: [],
+    },
+  }
+}
+
+export const buildConditionItem = (
+  metrics: EvaluationMetric[],
+  variableSelector?: [string, string] | null,
+): JudgmentConditionItem => {
+  const metricOptions = buildConditionMetricOptions(metrics)
+  const metricOption = variableSelector
+    ? metricOptions.find(option =>
+      option.variableSelector[0] === variableSelector[0]
+      && option.variableSelector[1] === variableSelector[1],
+    ) ?? metricOptions[0]
+    : metricOptions[0]
+  const comparisonOperator = metricOption ? getDefaultComparisonOperator(metricOption.valueType) : 'is'
+
+  return {
+    id: createId('condition'),
+    variableSelector: metricOption?.variableSelector ?? null,
+    comparisonOperator,
+    value: getConditionValue(metricOption?.valueType, comparisonOperator),
+  }
+}
+
+export const syncJudgmentConfigWithMetrics = (
+  judgmentConfig: JudgmentConfig,
+  metrics: EvaluationMetric[],
+): JudgmentConfig => {
+  const metricOptions = buildConditionMetricOptions(metrics)
+
+  return {
+    logicalOperator: judgmentConfig.logicalOperator,
+    conditions: judgmentConfig.conditions
+      .map((condition) => {
+        const metricOption = metricOptions.find(option =>
+          option.variableSelector[0] === condition.variableSelector?.[0]
+          && option.variableSelector[1] === condition.variableSelector?.[1],
+        )
+        if (!metricOption)
+          return null
+
+        const allowedOperators = getComparisonOperators(metricOption.valueType)
+        const comparisonOperator = allowedOperators.includes(condition.comparisonOperator)
+          ? condition.comparisonOperator
+          : getDefaultComparisonOperator(metricOption.valueType)
+
+        return {
+          ...condition,
+          comparisonOperator,
+          value: getConditionValue(metricOption.valueType, comparisonOperator, condition.value),
+        }
+      })
+      .filter((condition): condition is JudgmentConditionItem => !!condition),
+  }
+}
+
+export const buildInitialState = (_resourceType: EvaluationResourceType): EvaluationResourceState => {
+  return {
+    judgeModelId: null,
+    metrics: [],
+    judgmentConfig: createEmptyJudgmentConfig(),
+    activeBatchTab: 'input-fields',
+    uploadedFileId: null,
+    uploadedFileName: null,
+    selectedRunId: null,
+    batchRecords: [],
+  }
+}
+
+export const buildStateFromEvaluationConfig = (
+  resourceType: EvaluationResourceType,
+  config: EvaluationConfig,
+): EvaluationResourceState => {
+  const defaultMetrics = normalizeDefaultMetrics(resourceType, config.default_metrics)
+  const customMetrics = isPipelineResourceType(resourceType) ? [] : normalizeCustomMetric(config.customized_metrics)
+  const metrics = isPipelineResourceType(resourceType)
+    ? normalizePipelineMetrics(config, defaultMetrics)
+    : [...defaultMetrics, ...customMetrics]
+
+  return {
+    ...buildInitialState(resourceType),
+    judgeModelId: config.evaluation_model && config.evaluation_model_provider
+      ? encodeModelSelection(config.evaluation_model_provider, config.evaluation_model)
+      : null,
+    metrics,
+    judgmentConfig: normalizeJudgmentConfig(config, metrics),
+  }
+}
+
+const getApiComparisonOperator = (operator: ComparisonOperator) => {
+  if (operator === 'is null')
+    return 'null'
+
+  if (operator === 'is not null')
+    return 'not null'
+
+  return operator
+}
+
+const getCustomMetricScopeId = (metric: EvaluationMetric) => {
+  if (metric.kind !== 'custom-workflow')
+    return null
+
+  return metric.customConfig?.workflowAppId ?? metric.customConfig?.workflowId ?? null
+}
+
+const buildCustomizedMetricsPayload = (metrics: EvaluationMetric[]): EvaluationConfigData['customized_metrics'] => {
+  const customMetric = metrics.find(metric => metric.kind === 'custom-workflow')
+  const customConfig = customMetric?.customConfig
+  const evaluationWorkflowId = customMetric ? getCustomMetricScopeId(customMetric) : null
+
+  if (!customConfig || !evaluationWorkflowId)
+    return null
+
+  return {
+    evaluation_workflow_id: evaluationWorkflowId,
+    input_fields: Object.fromEntries(
+      customConfig.mappings
+        .filter((mapping): mapping is CustomMetricMapping & { inputVariableId: string, outputVariableId: string } =>
+          !!mapping.inputVariableId && !!mapping.outputVariableId,
+        )
+        .map(mapping => [mapping.inputVariableId, mapping.outputVariableId]),
+    ),
+    output_fields: customConfig.outputs.map(output => ({
+      variable: output.id,
+      value_type: output.valueType ?? undefined,
+    })),
+  }
+}
+
+const buildPipelineJudgmentConfigPayload = (
+  resource: EvaluationResourceState,
+): EvaluationConfigData['judgment_config'] => {
+  const conditions = resource.metrics
+    .filter((metric): metric is EvaluationMetric & { kind: 'builtin' } => metric.kind === 'builtin')
+    .map((metric) => {
+      const nodeInfo = metric.nodeInfoList?.[0]
+      if (!nodeInfo)
+        return null
+
+      return {
+        variable_selector: [nodeInfo.node_id, metric.optionId],
+        comparison_operator: '≥',
+        value: String(metric.threshold ?? DEFAULT_PIPELINE_METRIC_THRESHOLD),
+      }
+    })
+    .filter((condition): condition is NonNullable<typeof condition> => !!condition)
+
+  if (!conditions.length)
+    return null
+
+  return {
+    logical_operator: PIPELINE_LOGICAL_OPERATOR,
+    conditions,
+  }
+}
+
+const buildJudgmentConfigPayload = (
+  resource: EvaluationResourceState,
+  resourceType?: EvaluationResourceType,
+): EvaluationConfigData['judgment_config'] => {
+  if ((resourceType && isPipelineResourceType(resourceType)) || isPipelineResourceState(resource))
+    return buildPipelineJudgmentConfigPayload(resource)
+
+  const conditions = resource.judgmentConfig.conditions
+    .filter(condition => !!condition.variableSelector)
+    .map((condition) => {
+      const [scope, metricName] = condition.variableSelector!
+      const customMetric = resource.metrics.find(metric =>
+        metric.kind === 'custom-workflow'
+        && metric.customConfig?.workflowId === scope,
+      )
+
+      const customScopeId = customMetric ? getCustomMetricScopeId(customMetric) : null
+
+      return {
+        variable_selector: [customScopeId ?? scope, metricName],
+        comparison_operator: getApiComparisonOperator(condition.comparisonOperator),
+        ...(requiresComparisonValue(condition.comparisonOperator) ? { value: condition.value ?? undefined } : {}),
+      }
+    })
+
+  if (!conditions.length)
+    return null
+
+  return {
+    logical_operator: resource.judgmentConfig.logicalOperator,
+    conditions,
+  }
+}
+
+export const buildEvaluationConfigPayload = (
+  resource: EvaluationResourceState,
+  resourceType?: EvaluationResourceType,
+): EvaluationConfigData | null => {
+  const selectedModel = decodeModelSelection(resource.judgeModelId)
+
+  if (!selectedModel)
+    return null
+
+  return {
+    evaluation_model: selectedModel.model,
+    evaluation_model_provider: selectedModel.provider,
+    default_metrics: resource.metrics
+      .filter(metric => metric.kind === 'builtin')
+      .map(metric => ({
+        metric: metric.optionId,
+        value_type: metric.valueType,
+        node_info_list: metric.nodeInfoList ?? [],
+      })),
+    customized_metrics: (resourceType && isPipelineResourceType(resourceType)) || isPipelineResourceState(resource)
+      ? null
+      : buildCustomizedMetricsPayload(resource.metrics),
+    judgment_config: buildJudgmentConfigPayload(resource, resourceType),
+  }
+}
+
+export const buildEvaluationRunRequest = (
+  resource: EvaluationResourceState,
+  fileId: string,
+  resourceType?: EvaluationResourceType,
+): EvaluationRunRequest | null => {
+  const configPayload = buildEvaluationConfigPayload(resource, resourceType)
+
+  if (!configPayload)
+    return null
+
+  return {
+    ...configPayload,
+    file_id: fileId,
+  }
+}
+
+const getResourceState = (
+  resources: EvaluationStoreResources,
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  const resourceKey = buildResourceKey(resourceType, resourceId)
+
+  return {
+    resourceKey,
+    resource: resources[resourceKey] ?? buildInitialState(resourceType),
+  }
+}
+
+export const updateResourceState = (
+  resources: EvaluationStoreResources,
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+  updater: (resource: EvaluationResourceState) => EvaluationResourceState,
+) => {
+  const { resource, resourceKey } = getResourceState(resources, resourceType, resourceId)
+
+  return {
+    ...resources,
+    [resourceKey]: updater(resource),
+  }
+}
+
+export const updateMetric = (
+  metrics: EvaluationMetric[],
+  metricId: string,
+  updater: (metric: EvaluationMetric) => EvaluationMetric,
+) => metrics.map(metric => metric.id === metricId ? updater(metric) : metric)
+
+export const createBatchTestRecord = (
+  resourceType: EvaluationResourceType,
+  uploadedFileName: string | null | undefined,
+): BatchTestRecord => {
+  const config = getEvaluationMockConfig(resourceType)
+
+  return {
+    id: createId('batch'),
+    fileName: uploadedFileName ?? config.templateFileName,
+    status: 'running',
+    startedAt: new Date().toLocaleTimeString(),
+    summary: config.historySummaryLabel,
+  }
+}
+
+export const isCustomMetricConfigured = (metric: EvaluationMetric) => {
+  if (metric.kind !== 'custom-workflow')
+    return true
+
+  if (!metric.customConfig?.workflowId)
+    return false
+
+  return metric.customConfig.mappings.length > 0
+    && metric.customConfig.mappings.every(mapping => !!mapping.inputVariableId && !!mapping.outputVariableId)
+}
+
+export const isEvaluationRunnable = (state: EvaluationResourceState) => {
+  return !!state.judgeModelId
+    && state.metrics.length > 0
+    && state.metrics.every(isCustomMetricConfigured)
+}
+
+export const getAllowedOperators = (
+  metrics: EvaluationMetric[],
+  variableSelector: [string, string] | null,
+) => {
+  const metricOption = buildConditionMetricOptions(metrics).find(option =>
+    option.variableSelector[0] === variableSelector?.[0]
+    && option.variableSelector[1] === variableSelector?.[1],
+  )
+
+  if (!metricOption)
+    return ['is'] as ComparisonOperator[]
+
+  return getComparisonOperators(metricOption.valueType)
+}
diff --git a/web/app/components/evaluation/store.ts b/web/app/components/evaluation/store.ts
new file mode 100644
index 0000000000..4e2df1bb00
--- /dev/null
+++ b/web/app/components/evaluation/store.ts
@@ -0,0 +1,456 @@
+import type {
+  ComparisonOperator,
+  EvaluationResourceState,
+  EvaluationResourceType,
+} from './types'
+import type { EvaluationConfig, NodeInfo } from '@/types/evaluation'
+import { create } from 'zustand'
+import { getEvaluationMockConfig } from './mock'
+import {
+  buildConditionItem,
+  buildInitialState,
+  buildResourceKey,
+  buildStateFromEvaluationConfig,
+  createBatchTestRecord,
+  createBuiltinMetric,
+  createCustomMetric,
+  getAllowedOperators as getAllowedOperatorsFromUtils,
+  getConditionValue,
+  isCustomMetricConfigured as isCustomMetricConfiguredFromUtils,
+  isEvaluationRunnable as isEvaluationRunnableFromUtils,
+  requiresConditionValue as requiresConditionValueFromUtils,
+  syncCustomMetricMappings as syncCustomMetricMappingsFromUtils,
+  syncJudgmentConfigWithMetrics,
+  updateMetric,
+  updateResourceState,
+} from './store-utils'
+import { buildConditionMetricOptions } from './utils'
+
+type EvaluationStore = {
+  resources: Record<string, EvaluationResourceState>
+  ensureResource: (resourceType: EvaluationResourceType, resourceId: string) => void
+  hydrateResource: (resourceType: EvaluationResourceType, resourceId: string, config: EvaluationConfig) => void
+  setJudgeModel: (resourceType: EvaluationResourceType, resourceId: string, judgeModelId: string) => void
+  addBuiltinMetric: (resourceType: EvaluationResourceType, resourceId: string, optionId: string, nodeInfoList?: NodeInfo[]) => void
+  updateMetricThreshold: (resourceType: EvaluationResourceType, resourceId: string, metricId: string, threshold: number) => void
+  addCustomMetric: (resourceType: EvaluationResourceType, resourceId: string) => void
+  removeMetric: (resourceType: EvaluationResourceType, resourceId: string, metricId: string) => void
+  setCustomMetricWorkflow: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    workflow: { workflowId: string, workflowAppId: string, workflowName: string },
+  ) => void
+  syncCustomMetricMappings: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    inputVariableIds: string[],
+  ) => void
+  syncCustomMetricOutputs: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    outputs: Array<{ id: string, valueType: string | null }>,
+  ) => void
+  updateCustomMetricMapping: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    metricId: string,
+    mappingId: string,
+    patch: { inputVariableId?: string | null, outputVariableId?: string | null },
+  ) => void
+  setConditionLogicalOperator: (resourceType: EvaluationResourceType, resourceId: string, logicalOperator: 'and' | 'or') => void
+  addCondition: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    variableSelector?: [string, string] | null,
+  ) => void
+  removeCondition: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string) => void
+  updateConditionMetric: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string, variableSelector: [string, string]) => void
+  updateConditionOperator: (resourceType: EvaluationResourceType, resourceId: string, conditionId: string, operator: ComparisonOperator) => void
+  updateConditionValue: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    conditionId: string,
+    value: string | string[] | boolean | null,
+  ) => void
+  setBatchTab: (resourceType: EvaluationResourceType, resourceId: string, tab: EvaluationResourceState['activeBatchTab']) => void
+  setUploadedFile: (
+    resourceType: EvaluationResourceType,
+    resourceId: string,
+    uploadedFile: { id: string, name: string } | null,
+  ) => void
+  setUploadedFileName: (resourceType: EvaluationResourceType, resourceId: string, uploadedFileName: string | null) => void
+  setSelectedRunId: (resourceType: EvaluationResourceType, resourceId: string, runId: string | null) => void
+  runBatchTest: (resourceType: EvaluationResourceType, resourceId: string) => void
+}
+
+const initialResourceCache: Record<string, EvaluationResourceState> = {}
+
+export const useEvaluationStore = create<EvaluationStore>((set, get) => ({
+  resources: {},
+  ensureResource: (resourceType, resourceId) => {
+    const resourceKey = buildResourceKey(resourceType, resourceId)
+    if (get().resources[resourceKey])
+      return
+
+    set(state => ({
+      resources: {
+        ...state.resources,
+        [resourceKey]: buildInitialState(resourceType),
+      },
+    }))
+  },
+  hydrateResource: (resourceType, resourceId, config) => {
+    set(state => ({
+      resources: {
+        ...state.resources,
+        [buildResourceKey(resourceType, resourceId)]: {
+          ...buildStateFromEvaluationConfig(resourceType, config),
+          activeBatchTab: state.resources[buildResourceKey(resourceType, resourceId)]?.activeBatchTab ?? 'input-fields',
+          uploadedFileId: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileId ?? null,
+          uploadedFileName: state.resources[buildResourceKey(resourceType, resourceId)]?.uploadedFileName ?? null,
+          selectedRunId: state.resources[buildResourceKey(resourceType, resourceId)]?.selectedRunId ?? null,
+          batchRecords: state.resources[buildResourceKey(resourceType, resourceId)]?.batchRecords ?? [],
+        },
+      },
+    }))
+  },
+  setJudgeModel: (resourceType, resourceId, judgeModelId) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        judgeModelId,
+      })),
+    }))
+  },
+  addBuiltinMetric: (resourceType, resourceId, optionId, nodeInfoList = []) => {
+    const option = getEvaluationMockConfig(resourceType).builtinMetrics.find(metric => metric.id === optionId)
+    if (!option)
+      return
+
+    set((state) => {
+      return {
+        resources: updateResourceState(state.resources, resourceType, resourceId, (currentResource) => {
+          const metrics = currentResource.metrics.some(metric => metric.optionId === optionId && metric.kind === 'builtin')
+            ? currentResource.metrics.map(metric => metric.optionId === optionId && metric.kind === 'builtin'
+                ? {
+                    ...metric,
+                    nodeInfoList,
+                  }
+                : metric)
+            : [...currentResource.metrics, createBuiltinMetric(option, nodeInfoList)]
+
+          return {
+            ...currentResource,
+            metrics,
+            judgmentConfig: syncJudgmentConfigWithMetrics(currentResource.judgmentConfig, metrics),
+          }
+        }),
+      }
+    })
+  },
+  updateMetricThreshold: (resourceType, resourceId, metricId, threshold) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          threshold,
+        })),
+      })),
+    }))
+  },
+  addCustomMetric: (resourceType, resourceId) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = resource.metrics.some(metric => metric.kind === 'custom-workflow')
+          ? resource.metrics
+          : [...resource.metrics, createCustomMetric()]
+
+        return {
+          ...resource,
+          metrics,
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
+        }
+      }),
+    }))
+  },
+  removeMetric: (resourceType, resourceId, metricId) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = resource.metrics.filter(metric => metric.id !== metricId)
+
+        return {
+          ...resource,
+          metrics,
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
+        }
+      }),
+    }))
+  },
+  setCustomMetricWorkflow: (resourceType, resourceId, metricId, workflow) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                workflowId: workflow.workflowId,
+                workflowAppId: workflow.workflowAppId,
+                workflowName: workflow.workflowName,
+                mappings: metric.customConfig.mappings.map(mapping => ({
+                  ...mapping,
+                  outputVariableId: null,
+                })),
+                outputs: [],
+              }
+            : metric.customConfig,
+        }))
+
+        return {
+          ...resource,
+          metrics,
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
+        }
+      }),
+    }))
+  },
+  syncCustomMetricMappings: (resourceType, resourceId, metricId, inputVariableIds) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                mappings: syncCustomMetricMappingsFromUtils(metric.customConfig.mappings, inputVariableIds),
+              }
+            : metric.customConfig,
+        })),
+      })),
+    }))
+  },
+  syncCustomMetricOutputs: (resourceType, resourceId, metricId, outputs) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const metrics = updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                outputs,
+              }
+            : metric.customConfig,
+        }))
+
+        return {
+          ...resource,
+          metrics,
+          judgmentConfig: syncJudgmentConfigWithMetrics(resource.judgmentConfig, metrics),
+        }
+      }),
+    }))
+  },
+  updateCustomMetricMapping: (resourceType, resourceId, metricId, mappingId, patch) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        metrics: updateMetric(resource.metrics, metricId, metric => ({
+          ...metric,
+          customConfig: metric.customConfig
+            ? {
+                ...metric.customConfig,
+                mappings: metric.customConfig.mappings.map(mapping => mapping.id === mappingId ? { ...mapping, ...patch } : mapping),
+              }
+            : metric.customConfig,
+        })),
+      })),
+    }))
+  },
+  setConditionLogicalOperator: (resourceType, resourceId, logicalOperator) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          logicalOperator,
+        },
+      })),
+    }))
+  },
+  addCondition: (resourceType, resourceId, variableSelector) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          conditions: [...resource.judgmentConfig.conditions, buildConditionItem(resource.metrics, variableSelector)],
+        },
+      })),
+    }))
+  },
+  removeCondition: (resourceType, resourceId, conditionId) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          conditions: resource.judgmentConfig.conditions.filter(condition => condition.id !== conditionId),
+        },
+      })),
+    }))
+  },
+  updateConditionMetric: (resourceType, resourceId, conditionId, variableSelector) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, (resource) => {
+        const allowedOperators = getAllowedOperatorsFromUtils(resource.metrics, variableSelector)
+        const comparisonOperator = allowedOperators[0]
+        const metricOption = buildConditionMetricOptions(resource.metrics).find(option =>
+          option.variableSelector[0] === variableSelector[0] && option.variableSelector[1] === variableSelector[1],
+        )
+
+        return {
+          ...resource,
+          judgmentConfig: {
+            ...resource.judgmentConfig,
+            conditions: resource.judgmentConfig.conditions.map(condition => condition.id === conditionId
+              ? {
+                  ...condition,
+                  variableSelector,
+                  comparisonOperator,
+                  value: getConditionValue(metricOption?.valueType, comparisonOperator),
+                }
+              : condition),
+          },
+        }
+      }),
+    }))
+  },
+  updateConditionOperator: (resourceType, resourceId, conditionId, operator) => {
+    set((state) => {
+      return {
+        resources: updateResourceState(state.resources, resourceType, resourceId, currentResource => ({
+          ...currentResource,
+          judgmentConfig: {
+            ...currentResource.judgmentConfig,
+            conditions: currentResource.judgmentConfig.conditions.map((condition) => {
+              if (condition.id !== conditionId)
+                return condition
+
+              const metricOption = buildConditionMetricOptions(currentResource.metrics)
+                .find(option =>
+                  option.variableSelector[0] === condition.variableSelector?.[0]
+                  && option.variableSelector[1] === condition.variableSelector?.[1],
+                )
+
+              return {
+                ...condition,
+                comparisonOperator: operator,
+                value: getConditionValue(metricOption?.valueType, operator, condition.value),
+              }
+            }),
+          },
+        })),
+      }
+    })
+  },
+  updateConditionValue: (resourceType, resourceId, conditionId, value) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        judgmentConfig: {
+          ...resource.judgmentConfig,
+          conditions: resource.judgmentConfig.conditions.map(condition => condition.id === conditionId ? { ...condition, value } : condition),
+        },
+      })),
+    }))
+  },
+  setBatchTab: (resourceType, resourceId, tab) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        activeBatchTab: tab,
+      })),
+    }))
+  },
+  setUploadedFile: (resourceType, resourceId, uploadedFile) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        uploadedFileId: uploadedFile?.id ?? null,
+        uploadedFileName: uploadedFile?.name ?? null,
+      })),
+    }))
+  },
+  setUploadedFileName: (resourceType, resourceId, uploadedFileName) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        uploadedFileId: null,
+        uploadedFileName,
+      })),
+    }))
+  },
+  setSelectedRunId: (resourceType, resourceId, runId) => {
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        selectedRunId: runId,
+      })),
+    }))
+  },
+  runBatchTest: (resourceType, resourceId) => {
+    const { uploadedFileName } = get().resources[buildResourceKey(resourceType, resourceId)] ?? buildInitialState(resourceType)
+    const nextRecord = createBatchTestRecord(resourceType, uploadedFileName)
+
+    set(state => ({
+      resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+        ...resource,
+        activeBatchTab: 'history',
+        batchRecords: [nextRecord, ...resource.batchRecords],
+      })),
+    }))
+
+    window.setTimeout(() => {
+      set(state => ({
+        resources: updateResourceState(state.resources, resourceType, resourceId, resource => ({
+          ...resource,
+          batchRecords: resource.batchRecords.map(record => record.id === nextRecord.id
+            ? {
+                ...record,
+                status: resource.metrics.length > 1 ? 'success' : 'failed',
+              }
+            : record),
+        })),
+      }))
+    }, 1200)
+  },
+}))
+
+export const useEvaluationResource = (resourceType: EvaluationResourceType, resourceId: string) => {
+  const resourceKey = buildResourceKey(resourceType, resourceId)
+  return useEvaluationStore(state => state.resources[resourceKey] ?? (initialResourceCache[resourceKey] ??= buildInitialState(resourceType)))
+}
+
+export const getAllowedOperators = (
+  metrics: EvaluationResourceState['metrics'],
+  variableSelector: [string, string] | null,
+) => {
+  return getAllowedOperatorsFromUtils(metrics, variableSelector)
+}
+
+export const isCustomMetricConfigured = (metric: EvaluationResourceState['metrics'][number]) => {
+  return isCustomMetricConfiguredFromUtils(metric)
+}
+
+export const isEvaluationRunnable = (state: EvaluationResourceState) => {
+  return isEvaluationRunnableFromUtils(state)
+}
+
+export const requiresConditionValue = (operator: ComparisonOperator) => {
+  return requiresConditionValueFromUtils(operator)
+}
diff --git a/web/app/components/evaluation/types.ts b/web/app/components/evaluation/types.ts
new file mode 100644
index 0000000000..c0a1574cf8
--- /dev/null
+++ b/web/app/components/evaluation/types.ts
@@ -0,0 +1,153 @@
+import type { NodeInfo } from '@/types/evaluation'
+
+export type EvaluationResourceType = 'apps' | 'datasets' | 'snippets'
+
+export type EvaluationResourceProps = {
+  resourceType: EvaluationResourceType
+  resourceId: string
+}
+
+export type MetricKind = 'builtin' | 'custom-workflow'
+
+export type BatchTestTab = 'input-fields' | 'history'
+
+export type FieldType = 'string' | 'number' | 'boolean' | 'enum'
+
+export type ConditionMetricValueType = 'string' | 'number' | 'boolean'
+
+export type ComparisonOperator
+  = | 'contains'
+    | 'not contains'
+    | 'start with'
+    | 'end with'
+    | 'is'
+    | 'is not'
+    | 'empty'
+    | 'not empty'
+    | 'in'
+    | 'not in'
+    | '='
+    | '≠'
+    | '>'
+    | '<'
+    | '≥'
+    | '≤'
+    | 'is null'
+    | 'is not null'
+
+export type JudgeModelOption = {
+  id: string
+  label: string
+  provider: string
+}
+
+export type MetricOption = {
+  id: string
+  label: string
+  description: string
+  valueType: ConditionMetricValueType
+}
+
+export type EvaluationWorkflowOption = {
+  id: string
+  label: string
+  description: string
+  targetVariables: Array<{
+    id: string
+    label: string
+  }>
+}
+
+export type EvaluationFieldOption = {
+  id: string
+  label: string
+  group: string
+  type: FieldType
+  options?: Array<{
+    value: string
+    label: string
+  }>
+}
+
+export type CustomMetricMapping = {
+  id: string
+  inputVariableId: string | null
+  outputVariableId: string | null
+}
+
+export type CustomMetricConfig = {
+  workflowId: string | null
+  workflowAppId: string | null
+  workflowName: string | null
+  mappings: CustomMetricMapping[]
+  outputs: Array<{
+    id: string
+    valueType: string | null
+  }>
+}
+
+export type EvaluationMetric = {
+  id: string
+  optionId: string
+  kind: MetricKind
+  label: string
+  description: string
+  valueType: ConditionMetricValueType
+  threshold?: number
+  nodeInfoList?: NodeInfo[]
+  customConfig?: CustomMetricConfig
+}
+
+export type JudgmentConditionItem = {
+  id: string
+  variableSelector: [string, string] | null
+  comparisonOperator: ComparisonOperator
+  value: string | string[] | boolean | null
+}
+
+export type JudgmentConfig = {
+  logicalOperator: 'and' | 'or'
+  conditions: JudgmentConditionItem[]
+}
+
+export type ConditionMetricOption = {
+  id: string
+  groupLabel: string
+  itemLabel: string
+  valueType: ConditionMetricValueType
+  variableSelector: [string, string]
+}
+
+export type ConditionMetricOptionGroup = {
+  label: string
+  options: ConditionMetricOption[]
+}
+
+export type BatchTestRecord = {
+  id: string
+  fileName: string
+  status: 'running' | 'success' | 'failed'
+  startedAt: string
+  summary: string
+}
+
+export type EvaluationResourceState = {
+  judgeModelId: string | null
+  metrics: EvaluationMetric[]
+  judgmentConfig: JudgmentConfig
+  activeBatchTab: BatchTestTab
+  uploadedFileId: string | null
+  uploadedFileName: string | null
+  selectedRunId: string | null
+  batchRecords: BatchTestRecord[]
+}
+
+export type EvaluationMockConfig = {
+  judgeModels: JudgeModelOption[]
+  builtinMetrics: MetricOption[]
+  workflowOptions: EvaluationWorkflowOption[]
+  fieldOptions: EvaluationFieldOption[]
+  templateFileName: string
+  batchRequirements: string[]
+  historySummaryLabel: string
+}
diff --git a/web/app/components/evaluation/utils.ts b/web/app/components/evaluation/utils.ts
new file mode 100644
index 0000000000..3fba8158d6
--- /dev/null
+++ b/web/app/components/evaluation/utils.ts
@@ -0,0 +1,131 @@
+import type { TFunction } from 'i18next'
+import type {
+  ComparisonOperator,
+  ConditionMetricOption,
+  ConditionMetricOptionGroup,
+  ConditionMetricValueType,
+  EvaluationMetric,
+} from './types'
+
+export const TAB_CLASS_NAME = 'flex-1 rounded-lg px-3 py-2 text-left system-sm-medium'
+
+const rawOperatorLabels = new Set<ComparisonOperator>(['=', '≠', '>', '<', '≥', '≤'])
+
+const noValueOperators = new Set<ComparisonOperator>(['empty', 'not empty', 'is null', 'is not null'])
+
+export const encodeModelSelection = (provider: string, model: string) => `${provider}::${model}`
+
+export const decodeModelSelection = (judgeModelId: string | null) => {
+  if (!judgeModelId)
+    return undefined
+
+  const [provider, model] = judgeModelId.split('::')
+  if (!provider || !model)
+    return undefined
+
+  return { provider, model }
+}
+
+export const getComparisonOperatorLabel = (
+  operator: ComparisonOperator,
+  t: TFunction,
+) => {
+  if (rawOperatorLabels.has(operator))
+    return operator
+
+  return t(`nodes.ifElse.comparisonOperator.${operator}` as never, { ns: 'workflow' } as never) as unknown as string
+}
+
+export const requiresComparisonValue = (operator: ComparisonOperator) => {
+  return !noValueOperators.has(operator)
+}
+
+const getMetricValueType = (valueType: string | null | undefined): ConditionMetricValueType => {
+  if (valueType === 'number' || valueType === 'integer')
+    return 'number'
+
+  if (valueType === 'boolean')
+    return 'boolean'
+
+  return 'string'
+}
+
+export const getComparisonOperators = (valueType: ConditionMetricValueType): ComparisonOperator[] => {
+  if (valueType === 'number')
+    return ['=', '≠', '>', '<', '≥', '≤', 'is null', 'is not null']
+
+  if (valueType === 'boolean')
+    return ['is', 'is not', 'is null', 'is not null']
+
+  return ['contains', 'not contains', 'start with', 'end with', 'is', 'is not', 'empty', 'not empty', 'in', 'not in', 'is null', 'is not null']
+}
+
+export const getDefaultComparisonOperator = (valueType: ConditionMetricValueType): ComparisonOperator => {
+  return getComparisonOperators(valueType)[0]
+}
+
+export const buildConditionMetricOptions = (metrics: EvaluationMetric[]): ConditionMetricOption[] => {
+  return metrics.flatMap((metric) => {
+    if (metric.kind === 'builtin') {
+      return (metric.nodeInfoList ?? []).map((nodeInfo) => {
+        return {
+          id: `${nodeInfo.node_id}:${metric.optionId}`,
+          groupLabel: metric.label,
+          itemLabel: nodeInfo.title || nodeInfo.node_id,
+          valueType: metric.valueType,
+          variableSelector: [nodeInfo.node_id, metric.optionId] as [string, string],
+        }
+      })
+    }
+
+    const customConfig = metric.customConfig
+
+    if (!customConfig?.workflowId)
+      return []
+
+    return customConfig.outputs.map((output) => {
+      return {
+        id: `${customConfig.workflowId}:${output.id}`,
+        groupLabel: customConfig.workflowName ?? metric.label,
+        itemLabel: output.id,
+        valueType: getMetricValueType(output.valueType),
+        variableSelector: [customConfig.workflowId, output.id] as [string, string],
+      }
+    })
+  })
+}
+
+export const groupConditionMetricOptions = (metricOptions: ConditionMetricOption[]): ConditionMetricOptionGroup[] => {
+  const groups = metricOptions.reduce<Map<string, ConditionMetricOption[]>>((acc, option) => {
+    acc.set(option.groupLabel, [...(acc.get(option.groupLabel) ?? []), option])
+    return acc
+  }, new Map())
+
+  return Array.from(groups.entries()).map(([label, options]) => ({
+    label,
+    options,
+  }))
+}
+
+const conditionMetricValueTypeTranslationKeys = {
+  string: 'conditions.valueTypes.string',
+  number: 'conditions.valueTypes.number',
+  boolean: 'conditions.valueTypes.boolean',
+} as const
+
+export const getConditionMetricValueTypeTranslationKey = (
+  valueType: ConditionMetricValueType,
+) => {
+  return conditionMetricValueTypeTranslationKeys[valueType]
+}
+
+export const serializeVariableSelector = (value: [string, string] | null | undefined) => {
+  return value ? JSON.stringify(value) : ''
+}
+
+export const isSelectorEqual = (
+  left: [string, string] | null | undefined,
+  right: [string, string] | null | undefined,
+) => {
+  return left?.[0] === right?.[0] && left?.[1] === right?.[1]
+}
diff --git a/web/app/components/header/account-setting/data-source-page-new/operator.tsx b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
index 437fa80139..b8aea9fb1d 100644
--- a/web/app/components/header/account-setting/data-source-page-new/operator.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/operator.tsx
@@ -53,28 +53,28 @@ const Operator = ({
       <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[200px]">
         <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('setDefault')}>
           <span aria-hidden className="i-ri-home-9-line h-4 w-4 text-text-tertiary" />
-          <div className="system-sm-semibold text-text-secondary">{t('auth.setDefault', { ns: 'plugin' })}</div>
+          <div className="text-text-secondary system-sm-semibold">{t('auth.setDefault', { ns: 'plugin' })}</div>
         </DropdownMenuItem>
         {type === CredentialTypeEnum.OAUTH2 && (
           <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('rename')}>
             <span aria-hidden className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
-            <div className="system-sm-semibold text-text-secondary">{t('operation.rename', { ns: 'common' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('operation.rename', { ns: 'common' })}</div>
           </DropdownMenuItem>
         )}
         {type === CredentialTypeEnum.API_KEY && (
           <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('edit')}>
             <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
-            <div className="system-sm-semibold text-text-secondary">{t('operation.edit', { ns: 'common' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('operation.edit', { ns: 'common' })}</div>
           </DropdownMenuItem>
         )}
         {type === CredentialTypeEnum.OAUTH2 && (
           <DropdownMenuItem className="h-auto gap-2 py-2" onClick={() => handleAction('change')}>
             <span aria-hidden className="i-ri-sticky-note-add-line h-4 w-4 text-text-tertiary" />
-            <div className="mb-1 system-sm-semibold text-text-secondary">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
+            <div className="mb-1 text-text-secondary system-sm-semibold">{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}</div>
           </DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
-        <DropdownMenuItem variant="destructive" className="h-auto gap-2 py-2" onClick={() => handleAction('delete')}>
+        <DropdownMenuItem destructive className="h-auto gap-2 py-2" onClick={() => handleAction('delete')}>
           <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
           <div className="system-sm-semibold">
             {t('operation.remove', { ns: 'common' })}
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 3ec6dea315..64dff27cf6 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -130,7 +130,7 @@ export default function AccountSetting({
       ],
     },
   ]
-  const activeItem = [...menuItems[0]!.items, ...menuItems[1]!.items].find(item => item.key === activeMenu)
+  const activeItem = [...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)
 
   const [searchValue, setSearchValue] = useState<string>('')
 
diff --git a/web/app/components/header/account-setting/key-validator/KeyInput.tsx b/web/app/components/header/account-setting/key-validator/KeyInput.tsx
index c352cc4835..cf8f88be7e 100644
--- a/web/app/components/header/account-setting/key-validator/KeyInput.tsx
+++ b/web/app/components/header/account-setting/key-validator/KeyInput.tsx
@@ -60,8 +60,8 @@ const KeyInput = ({
         <input
           className="
             mr-2 w-full appearance-none
-            bg-transparent py-[9px] text-xs leading-[18px]
-            font-medium text-gray-700 outline-hidden
+            bg-transparent py-[9px] text-xs font-medium
+            leading-[18px] text-gray-700 outline-hidden
           "
           value={value}
           placeholder={placeholder}
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index 0a3ed87e8f..6ac9ee5d2d 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -50,12 +50,12 @@ const MembersPage = () => {
   return (
     <>
       <div className="flex flex-col">
-        <div className="mb-4 flex items-center gap-3 rounded-xl border-t-[0.5px] border-l-[0.5px] border-divider-subtle bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5">
+        <div className="mb-4 flex items-center gap-3 rounded-xl border-l-[0.5px] border-t-[0.5px] border-divider-subtle bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5">
           <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-components-icon-bg-blue-solid text-[20px]">
-            <span className="bg-linear-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold text-shadow-shadow-1 uppercase opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
+            <span className="bg-linear-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold uppercase text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
           </div>
           <div className="grow">
-            <div className="flex items-center gap-1 system-md-semibold text-text-secondary">
+            <div className="flex items-center gap-1 text-text-secondary system-md-semibold">
               <span>{currentWorkspace?.name}</span>
               {isCurrentWorkspaceOwner && (
                 <span>
@@ -82,7 +82,7 @@ const MembersPage = () => {
                 </span>
               )}
             </div>
-            <div className="mt-1 system-xs-medium text-text-tertiary">
+            <div className="mt-1 text-text-tertiary system-xs-medium">
               {enableBilling && isNotUnlimitedMemberPlan
                 ? (
                     <div className="flex space-x-1">
@@ -116,9 +116,9 @@ const MembersPage = () => {
         </div>
         <div className="overflow-visible lg:overflow-visible">
           <div className="flex min-w-[480px] items-center border-b border-divider-regular py-[7px]">
-            <div className="grow px-3 system-xs-medium-uppercase text-text-tertiary">{t('members.name', { ns: 'common' })}</div>
-            <div className="w-[104px] shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('members.lastActive', { ns: 'common' })}</div>
-            <div className="w-[96px] shrink-0 px-3 system-xs-medium-uppercase text-text-tertiary">{t('members.role', { ns: 'common' })}</div>
+            <div className="grow px-3 text-text-tertiary system-xs-medium-uppercase">{t('members.name', { ns: 'common' })}</div>
+            <div className="w-[104px] shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('members.lastActive', { ns: 'common' })}</div>
+            <div className="w-[96px] shrink-0 px-3 text-text-tertiary system-xs-medium-uppercase">{t('members.role', { ns: 'common' })}</div>
           </div>
           <div className="relative min-w-[480px]">
             {
@@ -127,27 +127,27 @@ const MembersPage = () => {
                   <div className="flex grow items-center px-3 py-2">
                     <Avatar avatar={account.avatar_url} size="sm" className="mr-2" name={account.name} />
                     <div className="">
-                      <div className="system-sm-medium text-text-secondary">
+                      <div className="text-text-secondary system-sm-medium">
                         {account.name}
-                        {account.status === 'pending' && <span className="ml-1 system-xs-medium text-text-warning">{t('members.pending', { ns: 'common' })}</span>}
-                        {userProfile.email === account.email && <span className="system-xs-regular text-text-tertiary">{t('members.you', { ns: 'common' })}</span>}
+                        {account.status === 'pending' && <span className="ml-1 text-text-warning system-xs-medium">{t('members.pending', { ns: 'common' })}</span>}
+                        {userProfile.email === account.email && <span className="text-text-tertiary system-xs-regular">{t('members.you', { ns: 'common' })}</span>}
                       </div>
-                      <div className="system-xs-regular text-text-tertiary">{account.email}</div>
+                      <div className="text-text-tertiary system-xs-regular">{account.email}</div>
                     </div>
                   </div>
-                  <div className="flex w-[104px] shrink-0 items-center py-2 system-sm-regular text-text-secondary">{formatTimeFromNow(Number((account.last_active_at || account.created_at)) * 1000)}</div>
+                  <div className="flex w-[104px] shrink-0 items-center py-2 text-text-secondary system-sm-regular">{formatTimeFromNow(Number((account.last_active_at || account.created_at)) * 1000)}</div>
                   <div className="flex w-[96px] shrink-0 items-center">
                     {isCurrentWorkspaceOwner && account.role === 'owner' && isAllowTransferWorkspace && (
                       <TransferOwnership onOperate={() => setShowTransferOwnershipModal(true)}></TransferOwnership>
                     )}
                     {isCurrentWorkspaceOwner && account.role === 'owner' && !isAllowTransferWorkspace && (
-                      <div className="px-3 system-sm-regular text-text-secondary">{RoleMap[account.role] || RoleMap.normal}</div>
+                      <div className="px-3 text-text-secondary system-sm-regular">{RoleMap[account.role] || RoleMap.normal}</div>
                     )}
                     {isCurrentWorkspaceOwner && account.role !== 'owner' && (
                       <Operation member={account} operatorRole={currentWorkspace.role} onOperate={refetch} />
                     )}
                     {!isCurrentWorkspaceOwner && (
-                      <div className="px-3 system-sm-regular text-text-secondary">{RoleMap[account.role] || RoleMap.normal}</div>
+                      <div className="px-3 text-text-secondary system-sm-regular">{RoleMap[account.role] || RoleMap.normal}</div>
                     )}
                   </div>
                 </div>
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index dab0c84e5b..5fb3be0195 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -1,15 +1,10 @@
 'use client'
 import type { Member } from '@/models/common'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { toast } from '@/app/components/base/ui/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
@@ -79,50 +74,40 @@ const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
     }
   }
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger
-        render={<div className={cn('group flex h-full w-full cursor-pointer items-center justify-between px-3 system-sm-regular text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')} />}
-      >
-        {RoleMap[member.role] || RoleMap.normal}
-        <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        placement="bottom-end"
-        sideOffset={4}
-        popupClassName="inline-flex flex-col rounded-xl p-0"
-      >
-        <div className="p-1">
-          {roleList.map(role => (
-            <DropdownMenuItem
-              key={role}
-              className="h-auto items-start gap-2 rounded-lg px-3 py-2"
-              onClick={() => handleUpdateMemberRole(role)}
-            >
-              {role === member.role
-                ? <span aria-hidden className="mt-[2px] i-ri-check-line h-4 w-4 shrink-0 text-text-accent" />
-                : <span aria-hidden className="mt-[2px] h-4 w-4 shrink-0" />}
-              <div>
-                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
-                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
+    <PortalToFollowElem open={open} onOpenChange={setOpen} placement="bottom-end" offset={{ mainAxis: 4 }}>
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
+        <div className={cn('group flex h-full w-full cursor-pointer items-center justify-between px-3 system-sm-regular text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+          {RoleMap[member.role] || RoleMap.normal}
+          <ChevronDownIcon className={cn('h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-1002">
+        <div className={cn('inline-flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs')}>
+          <div className="p-1">
+            {roleList.map(role => (
+              <div key={role} className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
+                {role === member.role
+                  ? <CheckIcon className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />
+                  : <div className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />}
+                <div>
+                  <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
+                  <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="border-t border-divider-subtle p-1">
+            <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
+              <div className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />
+              <div>
+                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('members.removeFromTeam', { ns: 'common' })}</div>
+                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
               </div>
-            </DropdownMenuItem>
-          ))}
-        </div>
-        <DropdownMenuSeparator className="my-0" />
-        <div className="p-1">
-          <DropdownMenuItem
-            className="h-auto items-start gap-2 rounded-lg px-3 py-2"
-            onClick={handleDeleteMemberOrCancelInvitation}
-          >
-            <span aria-hidden className="mt-[2px] h-4 w-4 shrink-0" />
-            <div>
-              <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('members.removeFromTeam', { ns: 'common' })}</div>
-              <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
             </div>
-          </DropdownMenuItem>
+          </div>
         </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 export default memo(Operation)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
index be3e9edb93..0f507a24c6 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
@@ -58,9 +58,9 @@ const CredentialSelector = ({
             selectedCredential && (
               <div className="flex items-center">
                 {
-                  !selectedCredential.addNewCredential && <Indicator className="mr-2 ml-1 shrink-0" />
+                  !selectedCredential.addNewCredential && <Indicator className="ml-1 mr-2 shrink-0" />
                 }
-                <div className="truncate system-sm-regular text-components-input-text-filled" title={selectedCredential.credential_name}>{selectedCredential.credential_name}</div>
+                <div className="truncate text-components-input-text-filled system-sm-regular" title={selectedCredential.credential_name}>{selectedCredential.credential_name}</div>
                 {
                   selectedCredential.from_enterprise && (
                     <Badge className="shrink-0">Enterprise</Badge>
@@ -71,7 +71,7 @@ const CredentialSelector = ({
           }
           {
             !selectedCredential && (
-              <div className="grow truncate system-sm-regular text-components-input-text-placeholder">{t('modelProvider.auth.selectModelCredential', { ns: 'common' })}</div>
+              <div className="grow truncate text-components-input-text-placeholder system-sm-regular">{t('modelProvider.auth.selectModelCredential', { ns: 'common' })}</div>
             )
           }
           <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
@@ -98,7 +98,7 @@ const CredentialSelector = ({
           {
             !notAllowAddNewCredential && (
               <div
-                className="flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 system-xs-medium text-text-accent-light-mode-only"
+                className="flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 text-text-accent-light-mode-only system-xs-medium"
                 onClick={handleAddNewCredential}
               >
                 <RiAddLine className="mr-1 h-4 w-4" />
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
index cca5846390..3cb37fd4e5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@@ -20,12 +20,12 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
       <div className="flex w-[240px] max-w-[240px] flex-col gap-1 px-1 py-1.5" onClick={e => e.stopPropagation()}>
         <div className="title-xs-semi-bold text-text-primary">{title}</div>
         {description && (
-          <div className="min-w-[200px] body-xs-regular text-text-secondary">
+          <div className="body-xs-regular min-w-[200px] text-text-secondary">
             {description}
           </div>
         )}
         {linkText && linkHref && (
-          <div className="z-100 cursor-pointer body-xs-regular text-text-accent">
+          <div className="body-xs-regular z-100 cursor-pointer text-text-accent">
             <Link
               href={linkHref}
               onClick={(e) => {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 652630be67..3556777395 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -164,7 +164,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
         const prevIndex = newConfigs.findIndex(item => item.credential_id === modelCredential.credential_id && item.name !== '__inherit__')
         const newIndex = available_credentials.findIndex(c => c.credential_id === modelCredential.credential_id)
         if (newIndex > -1 && prevIndex > -1)
-          newConfigs[prevIndex]!.name = available_credentials[newIndex]!.credential_name || ''
+          newConfigs[prevIndex].name = available_credentials[newIndex].credential_name || ''
         return {
           ...prev,
           configs: newConfigs,
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 2e7a77a891..d98eaa1b3b 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -107,7 +107,7 @@ const AppNav = () => {
         icon={<RiRobot2Line className="h-4 w-4" />}
         activeIcon={<RiRobot2Fill className="h-4 w-4" />}
         text={t('menus.apps', { ns: 'common' })}
-        activeSegment={['apps', 'app']}
+        activeSegment={['apps', 'app', 'snippets']}
         link="/apps"
         curNav={appDetail}
         navigationItems={navItems}
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index 1379d176e0..6a6c2151a6 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -14,7 +14,7 @@ const HeaderWrapper = ({
   children,
 }: HeaderWrapperProps) => {
   const pathname = usePathname()
-  const isBordered = ['/apps', '/datasets/create', '/tools'].includes(pathname)
+  const isBordered = ['/apps', '/snippets', '/datasets/create', '/tools'].includes(pathname)
   // Check if the current path is a workflow canvas & fullscreen
   const inWorkflowCanvas = pathname.endsWith('/workflow')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index d92fd032fd..560d5f1eaa 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -45,7 +45,7 @@ const Header = () => {
 
   const renderLogo = () => (
     <h1>
-      <Link href="/apps" className="flex h-8 shrink-0 items-center justify-center overflow-hidden px-0.5 indent-[-9999px] whitespace-nowrap">
+      <Link href="/apps" className="flex h-8 shrink-0 items-center justify-center overflow-hidden whitespace-nowrap px-0.5 indent-[-9999px]">
         {isBrandingEnabled && systemFeatures.branding.application_title ? systemFeatures.branding.application_title : 'Dify'}
         {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
           ? (
@@ -91,7 +91,7 @@ const Header = () => {
 
   return (
     <div className="flex h-[56px] items-center">
-      <div className="flex min-w-0 flex-1 items-center pr-2 pl-3 min-[1280px]:pr-3">
+      <div className="flex min-w-0 flex-1 items-center pl-3 pr-2 min-[1280px]:pr-3">
         {renderLogo()}
         <div className="mx-1.5 shrink-0 font-light text-divider-deep">/</div>
         <WorkspaceProvider>
@@ -105,7 +105,7 @@ const Header = () => {
         {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
         {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
       </div>
-      <div className="flex min-w-0 flex-1 items-center justify-end pr-3 pl-2 min-[1280px]:pl-3">
+      <div className="flex min-w-0 flex-1 items-center justify-end pl-2 pr-3 min-[1280px]:pl-3">
         <EnvNav />
         <div className="mr-2">
           <PluginsNav />
diff --git a/web/app/components/plugins/marketplace/description/index.tsx b/web/app/components/plugins/marketplace/description/index.tsx
index c91110b8cc..c3c1ab5fb1 100644
--- a/web/app/components/plugins/marketplace/description/index.tsx
+++ b/web/app/components/plugins/marketplace/description/index.tsx
@@ -9,10 +9,10 @@ const Description = () => {
 
   return (
     <>
-      <h1 className="mb-2 shrink-0 text-center title-4xl-semi-bold text-text-primary">
+      <h1 className="title-4xl-semi-bold mb-2 shrink-0 text-center text-text-primary">
         {t('marketplace.empower')}
       </h1>
-      <h2 className="flex shrink-0 items-center justify-center text-center body-md-regular text-text-tertiary">
+      <h2 className="body-md-regular flex shrink-0 items-center justify-center text-center text-text-tertiary">
         {
           isZhHans && (
             <>
@@ -29,31 +29,31 @@ const Description = () => {
             </>
           )
         }
-        <span className="relative z-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.models')}
         </span>
         ,
-        <span className="relative z-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.tools')}
         </span>
         ,
-        <span className="relative z-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.datasources')}
         </span>
         ,
-        <span className="relative z-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.triggers')}
         </span>
         ,
-        <span className="relative z-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.agents')}
         </span>
         ,
-        <span className="relative z-1 mr-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.extensions')}
         </span>
         {t('marketplace.and')}
-        <span className="relative z-1 mr-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+        <span className="body-md-medium relative z-1 ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
           {t('category.bundles')}
         </span>
         {
diff --git a/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
index 8609ba5539..31cb5d8445 100644
--- a/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
@@ -124,7 +124,7 @@ describe('SearchBox', () => {
     it('should render without crashing', () => {
       render(<SearchBox {...defaultProps} />)
 
-      expect(screen.getByRole('textbox'))!.toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('should render with marketplace mode styling', () => {
@@ -133,8 +133,7 @@ describe('SearchBox', () => {
       )
 
       // In marketplace mode, TagsFilter comes before input
-      // In marketplace mode, TagsFilter comes before input
-      expect(container.querySelector('.rounded-xl'))!.toBeInTheDocument()
+      expect(container.querySelector('.rounded-xl')).toBeInTheDocument()
     })
 
     it('should render with non-marketplace mode styling', () => {
@@ -143,26 +142,25 @@ describe('SearchBox', () => {
       )
 
       // In non-marketplace mode, search icon appears first
-      // In non-marketplace mode, search icon appears first
-      expect(container.querySelector('.rounded-lg'))!.toBeInTheDocument()
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument()
     })
 
     it('should render placeholder correctly', () => {
       render(<SearchBox {...defaultProps} placeholder="Search here..." />)
 
-      expect(screen.getByPlaceholderText('Search here...'))!.toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Search here...')).toBeInTheDocument()
     })
 
     it('should render search input with current value', () => {
       render(<SearchBox {...defaultProps} search="test query" />)
 
-      expect(screen.getByDisplayValue('test query'))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue('test query')).toBeInTheDocument()
     })
 
     it('should render TagsFilter component', () => {
       render(<SearchBox {...defaultProps} />)
 
-      expect(screen.getByTestId('portal-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
     })
   })
 
@@ -177,9 +175,8 @@ describe('SearchBox', () => {
       const input = screen.getByRole('textbox')
 
       // Both should be rendered
-      // Both should be rendered
-      expect(portalElem)!.toBeInTheDocument()
-      expect(input)!.toBeInTheDocument()
+      expect(portalElem).toBeInTheDocument()
+      expect(input).toBeInTheDocument()
     })
 
     it('should render clear button when search has value in marketplace mode', () => {
@@ -210,8 +207,7 @@ describe('SearchBox', () => {
       )
 
       // Search icon should be present
-      // Search icon should be present
-      expect(container.querySelector('.text-components-input-text-placeholder'))!.toBeInTheDocument()
+      expect(container.querySelector('.text-components-input-text-placeholder')).toBeInTheDocument()
     })
 
     it('should render clear button when search has value', () => {
@@ -227,8 +223,8 @@ describe('SearchBox', () => {
       const portalElem = screen.getByTestId('portal-elem')
       const input = screen.getByRole('textbox')
 
-      expect(portalElem)!.toBeInTheDocument()
-      expect(input)!.toBeInTheDocument()
+      expect(portalElem).toBeInTheDocument()
+      expect(input).toBeInTheDocument()
     })
 
     it('should set autoFocus when prop is true', () => {
@@ -236,8 +232,7 @@ describe('SearchBox', () => {
 
       const input = screen.getByRole('textbox')
       // autoFocus is a boolean attribute that React handles specially
-      // autoFocus is a boolean attribute that React handles specially
-      expect(input)!.toBeInTheDocument()
+      expect(input).toBeInTheDocument()
     })
   })
 
@@ -269,7 +264,7 @@ describe('SearchBox', () => {
       const buttons = screen.getAllByRole('button')
       // Find the clear button (the one in the search area)
       const clearButton = buttons[buttons.length - 1]
-      fireEvent.click(clearButton!)
+      fireEvent.click(clearButton)
 
       expect(onSearchChange).toHaveBeenCalledWith('')
     })
@@ -287,7 +282,7 @@ describe('SearchBox', () => {
 
       const buttons = screen.getAllByRole('button')
       // First button should be the clear button in non-marketplace mode
-      fireEvent.click(buttons[0]!)
+      fireEvent.click(buttons[0])
 
       expect(onSearchChange).toHaveBeenCalledWith('')
     })
@@ -361,7 +356,7 @@ describe('SearchBox', () => {
         <SearchBox {...defaultProps} wrapperClassName="custom-wrapper-class" />,
       )
 
-      expect(container.querySelector('.custom-wrapper-class'))!.toBeInTheDocument()
+      expect(container.querySelector('.custom-wrapper-class')).toBeInTheDocument()
     })
 
     it('should apply inputClassName correctly', () => {
@@ -369,19 +364,19 @@ describe('SearchBox', () => {
         <SearchBox {...defaultProps} inputClassName="custom-input-class" />,
       )
 
-      expect(container.querySelector('.custom-input-class'))!.toBeInTheDocument()
+      expect(container.querySelector('.custom-input-class')).toBeInTheDocument()
     })
 
     it('should handle empty placeholder', () => {
       render(<SearchBox {...defaultProps} placeholder="" />)
 
-      expect(screen.getByRole('textbox'))!.toHaveAttribute('placeholder', '')
+      expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', '')
     })
 
     it('should use default placeholder when not provided', () => {
       render(<SearchBox {...defaultProps} />)
 
-      expect(screen.getByRole('textbox'))!.toHaveAttribute('placeholder', '')
+      expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', '')
     })
   })
 
@@ -392,14 +387,14 @@ describe('SearchBox', () => {
     it('should handle empty search value', () => {
       render(<SearchBox {...defaultProps} search="" />)
 
-      expect(screen.getByRole('textbox'))!.toBeInTheDocument()
-      expect(screen.getByRole('textbox'))!.toHaveValue('')
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toHaveValue('')
     })
 
     it('should handle empty tags array', () => {
       render(<SearchBox {...defaultProps} tags={[]} />)
 
-      expect(screen.getByTestId('portal-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
     })
 
     it('should handle special characters in search', () => {
@@ -416,7 +411,7 @@ describe('SearchBox', () => {
       const longString = 'a'.repeat(1000)
       render(<SearchBox {...defaultProps} search={longString} />)
 
-      expect(screen.getByDisplayValue(longString))!.toBeInTheDocument()
+      expect(screen.getByDisplayValue(longString)).toBeInTheDocument()
     })
 
     it('should handle whitespace-only search', () => {
@@ -444,21 +439,20 @@ describe('SearchBoxWrapper', () => {
     it('should render without crashing', () => {
       render(<SearchBoxWrapper />)
 
-      expect(screen.getByRole('textbox'))!.toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('should render in marketplace mode', () => {
       const { container } = render(<SearchBoxWrapper />)
 
-      expect(container.querySelector('.rounded-xl'))!.toBeInTheDocument()
+      expect(container.querySelector('.rounded-xl')).toBeInTheDocument()
     })
 
     it('should apply correct wrapper classes', () => {
       const { container } = render(<SearchBoxWrapper />)
 
       // Check for z-11 class from wrapper
-      // Check for z-11 class from wrapper
-      expect(container.querySelector('.z-11'))!.toBeInTheDocument()
+      expect(container.querySelector('.z-11')).toBeInTheDocument()
     })
   })
 
@@ -477,7 +471,7 @@ describe('SearchBoxWrapper', () => {
     it('should use translation for placeholder', () => {
       render(<SearchBoxWrapper />)
 
-      expect(screen.getByPlaceholderText('Search plugins'))!.toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Search plugins')).toBeInTheDocument()
     })
   })
 })
@@ -502,13 +496,13 @@ describe('MarketplaceTrigger', () => {
     it('should render without crashing', () => {
       render(<MarketplaceTrigger {...defaultProps} />)
 
-      expect(screen.getByText('All Tags'))!.toBeInTheDocument()
+      expect(screen.getByText('All Tags')).toBeInTheDocument()
     })
 
     it('should show "All Tags" when no tags selected', () => {
       render(<MarketplaceTrigger {...defaultProps} selectedTagsLength={0} />)
 
-      expect(screen.getByText('All Tags'))!.toBeInTheDocument()
+      expect(screen.getByText('All Tags')).toBeInTheDocument()
     })
 
     it('should show arrow down icon when no tags selected', () => {
@@ -517,8 +511,7 @@ describe('MarketplaceTrigger', () => {
       )
 
       // Arrow down icon should be present
-      // Arrow down icon should be present
-      expect(container.querySelector('.size-4'))!.toBeInTheDocument()
+      expect(container.querySelector('.size-4')).toBeInTheDocument()
     })
   })
 
@@ -532,7 +525,7 @@ describe('MarketplaceTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('Agent'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent')).toBeInTheDocument()
     })
 
     it('should show multiple tag labels separated by comma', () => {
@@ -544,7 +537,7 @@ describe('MarketplaceTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('Agent,RAG'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent,RAG')).toBeInTheDocument()
     })
 
     it('should show +N indicator when more than 2 tags selected', () => {
@@ -556,7 +549,7 @@ describe('MarketplaceTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('+2'))!.toBeInTheDocument()
+      expect(screen.getByText('+2')).toBeInTheDocument()
     })
 
     it('should only show first 2 tags in label', () => {
@@ -568,7 +561,7 @@ describe('MarketplaceTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('Agent,RAG'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent,RAG')).toBeInTheDocument()
       expect(screen.queryByText('Search')).not.toBeInTheDocument()
     })
   })
@@ -584,8 +577,7 @@ describe('MarketplaceTrigger', () => {
       )
 
       // RiCloseCircleFill icon should be present
-      // RiCloseCircleFill icon should be present
-      expect(container.querySelector('.text-text-quaternary'))!.toBeInTheDocument()
+      expect(container.querySelector('.text-text-quaternary')).toBeInTheDocument()
     })
 
     it('should not show clear button when no tags selected', () => {
@@ -593,37 +585,6 @@ describe('MarketplaceTrigger', () => {
         <MarketplaceTrigger {...defaultProps} selectedTagsLength={0} />,
       )
 
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
-      // Clear button should not be present
       // Clear button should not be present
       expect(container.querySelector('.text-text-quaternary')).not.toBeInTheDocument()
     })
@@ -653,7 +614,7 @@ describe('MarketplaceTrigger', () => {
         <MarketplaceTrigger {...defaultProps} open selectedTagsLength={0} />,
       )
 
-      expect(container.querySelector('.bg-state-base-hover'))!.toBeInTheDocument()
+      expect(container.querySelector('.bg-state-base-hover')).toBeInTheDocument()
     })
 
     it('should apply border styling when tags are selected', () => {
@@ -665,7 +626,7 @@ describe('MarketplaceTrigger', () => {
         />,
       )
 
-      expect(container.querySelector('.border-components-button-secondary-border'))!.toBeInTheDocument()
+      expect(container.querySelector('.border-components-button-secondary-border')).toBeInTheDocument()
     })
   })
 
@@ -675,7 +636,7 @@ describe('MarketplaceTrigger', () => {
         <MarketplaceTrigger {...defaultProps} tagsMap={{}} tags={[]} />,
       )
 
-      expect(container)!.toBeInTheDocument()
+      expect(container).toBeInTheDocument()
     })
   })
 })
@@ -700,13 +661,13 @@ describe('ToolSelectorTrigger', () => {
     it('should render without crashing', () => {
       const { container } = render(<ToolSelectorTrigger {...defaultProps} />)
 
-      expect(container)!.toBeInTheDocument()
+      expect(container).toBeInTheDocument()
     })
 
     it('should render price tag icon', () => {
       const { container } = render(<ToolSelectorTrigger {...defaultProps} />)
 
-      expect(container.querySelector('.size-4'))!.toBeInTheDocument()
+      expect(container.querySelector('.size-4')).toBeInTheDocument()
     })
   })
 
@@ -720,7 +681,7 @@ describe('ToolSelectorTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('Agent'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent')).toBeInTheDocument()
     })
 
     it('should show multiple tag labels separated by comma', () => {
@@ -732,7 +693,7 @@ describe('ToolSelectorTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('Agent,RAG'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent,RAG')).toBeInTheDocument()
     })
 
     it('should show +N indicator when more than 2 tags selected', () => {
@@ -744,7 +705,7 @@ describe('ToolSelectorTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('+2'))!.toBeInTheDocument()
+      expect(screen.getByText('+2')).toBeInTheDocument()
     })
 
     it('should not show tag labels when no tags selected', () => {
@@ -764,7 +725,7 @@ describe('ToolSelectorTrigger', () => {
         />,
       )
 
-      expect(container.querySelector('.text-text-quaternary'))!.toBeInTheDocument()
+      expect(container.querySelector('.text-text-quaternary')).toBeInTheDocument()
     })
 
     it('should not show clear button when no tags selected', () => {
@@ -824,7 +785,7 @@ describe('ToolSelectorTrigger', () => {
         <ToolSelectorTrigger {...defaultProps} open selectedTagsLength={0} />,
       )
 
-      expect(container.querySelector('.bg-state-base-hover'))!.toBeInTheDocument()
+      expect(container.querySelector('.bg-state-base-hover')).toBeInTheDocument()
     })
 
     it('should apply border styling when tags are selected', () => {
@@ -836,7 +797,7 @@ describe('ToolSelectorTrigger', () => {
         />,
       )
 
-      expect(container.querySelector('.border-components-button-secondary-border'))!.toBeInTheDocument()
+      expect(container.querySelector('.border-components-button-secondary-border')).toBeInTheDocument()
     })
 
     it('should not apply hover styling when open but has tags', () => {
@@ -850,8 +811,7 @@ describe('ToolSelectorTrigger', () => {
       )
 
       // Should have border styling, not hover
-      // Should have border styling, not hover
-      expect(container.querySelector('.border-components-button-secondary-border'))!.toBeInTheDocument()
+      expect(container.querySelector('.border-components-button-secondary-border')).toBeInTheDocument()
     })
   })
 
@@ -866,7 +826,7 @@ describe('ToolSelectorTrigger', () => {
         />,
       )
 
-      expect(screen.getByText('Agent'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent')).toBeInTheDocument()
     })
   })
 })
@@ -894,7 +854,7 @@ describe('TagsFilter', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
     })
 
     it('should pass usedInMarketplace prop to TagsFilter', () => {
@@ -909,8 +869,7 @@ describe('TagsFilter', () => {
       )
 
       // MarketplaceTrigger should show "All Tags"
-      // MarketplaceTrigger should show "All Tags"
-      expect(screen.getByText('All Tags'))!.toBeInTheDocument()
+      expect(screen.getByText('All Tags')).toBeInTheDocument()
     })
 
     it('should show selected tags count in TagsFilter trigger', () => {
@@ -924,7 +883,7 @@ describe('TagsFilter', () => {
         />,
       )
 
-      expect(screen.getByText('+1'))!.toBeInTheDocument()
+      expect(screen.getByText('+1')).toBeInTheDocument()
     })
   })
 
@@ -943,7 +902,7 @@ describe('TagsFilter', () => {
       fireEvent.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+        expect(screen.getByTestId('portal-content')).toBeInTheDocument()
       })
     })
 
@@ -962,7 +921,7 @@ describe('TagsFilter', () => {
       // Open
       fireEvent.click(trigger)
       await waitFor(() => {
-        expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+        expect(screen.getByTestId('portal-content')).toBeInTheDocument()
       })
 
       // Close
@@ -988,8 +947,8 @@ describe('TagsFilter', () => {
       fireEvent.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByText('Agent'))!.toBeInTheDocument()
-        expect(screen.getByText('RAG'))!.toBeInTheDocument()
+        expect(screen.getByText('Agent')).toBeInTheDocument()
+        expect(screen.getByText('RAG')).toBeInTheDocument()
       })
     })
 
@@ -1008,7 +967,7 @@ describe('TagsFilter', () => {
       fireEvent.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByText('Agent'))!.toBeInTheDocument()
+        expect(screen.getByText('Agent')).toBeInTheDocument()
       })
 
       const agentOption = screen.getByText('Agent')
@@ -1059,7 +1018,7 @@ describe('TagsFilter', () => {
       fireEvent.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByText('RAG'))!.toBeInTheDocument()
+        expect(screen.getByText('RAG')).toBeInTheDocument()
       })
 
       const ragOption = screen.getByText('RAG')
@@ -1102,7 +1061,7 @@ describe('TagsFilter', () => {
       fireEvent.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByText('Agent'))!.toBeInTheDocument()
+        expect(screen.getByText('Agent')).toBeInTheDocument()
       })
 
       const inputs = screen.getAllByRole('textbox')
@@ -1112,7 +1071,7 @@ describe('TagsFilter', () => {
 
       if (searchInput) {
         fireEvent.change(searchInput, { target: { value: 'agent' } })
-        expect(screen.getByText('Agent'))!.toBeInTheDocument()
+        expect(screen.getByText('Agent')).toBeInTheDocument()
       }
     })
   })
@@ -1138,8 +1097,7 @@ describe('TagsFilter', () => {
       })
 
       // Verify dropdown content is rendered
-      // Verify dropdown content is rendered
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should render tag options when dropdown is open', async () => {
@@ -1156,14 +1114,13 @@ describe('TagsFilter', () => {
       fireEvent.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+        expect(screen.getByTestId('portal-content')).toBeInTheDocument()
       })
 
       // When no tags selected, these should appear once each in dropdown
-      // When no tags selected, these should appear once each in dropdown
-      expect(screen.getByText('Agent'))!.toBeInTheDocument()
-      expect(screen.getByText('RAG'))!.toBeInTheDocument()
-      expect(screen.getByText('Search'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent')).toBeInTheDocument()
+      expect(screen.getByText('RAG')).toBeInTheDocument()
+      expect(screen.getByText('Search')).toBeInTheDocument()
     })
   })
 })
@@ -1189,8 +1146,8 @@ describe('Accessibility', () => {
     )
 
     const input = screen.getByRole('textbox')
-    expect(input)!.toBeInTheDocument()
-    expect(input)!.toHaveAttribute('placeholder', 'Search plugins')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('placeholder', 'Search plugins')
   })
 
   it('should have clickable tag options in dropdown', async () => {
@@ -1199,7 +1156,7 @@ describe('Accessibility', () => {
     fireEvent.click(screen.getByTestId('portal-trigger'))
 
     await waitFor(() => {
-      expect(screen.getByText('Agent'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent')).toBeInTheDocument()
     })
   })
 })
@@ -1235,7 +1192,7 @@ describe('Combined Workflows', () => {
     fireEvent.click(trigger)
 
     await waitFor(() => {
-      expect(screen.getByText('Agent'))!.toBeInTheDocument()
+      expect(screen.getByText('Agent')).toBeInTheDocument()
     })
 
     const agentOption = screen.getByText('Agent')
@@ -1260,9 +1217,9 @@ describe('Combined Workflows', () => {
       />,
     )
 
-    expect(screen.getByDisplayValue('test'))!.toBeInTheDocument()
-    expect(screen.getByText('Agent,RAG'))!.toBeInTheDocument()
-    expect(screen.getByTestId('portal-elem'))!.toBeInTheDocument()
+    expect(screen.getByDisplayValue('test')).toBeInTheDocument()
+    expect(screen.getByText('Agent,RAG')).toBeInTheDocument()
+    expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
   })
 
   it('should handle prop changes correctly', () => {
@@ -1277,7 +1234,7 @@ describe('Combined Workflows', () => {
       />,
     )
 
-    expect(screen.getByDisplayValue('initial'))!.toBeInTheDocument()
+    expect(screen.getByDisplayValue('initial')).toBeInTheDocument()
 
     rerender(
       <SearchBox
@@ -1288,6 +1245,6 @@ describe('Combined Workflows', () => {
       />,
     )
 
-    expect(screen.getByDisplayValue('updated'))!.toBeInTheDocument()
+    expect(screen.getByDisplayValue('updated')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
index 990bb321de..4d93726c4c 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
@@ -1,12 +1,15 @@
-import type {
-  MouseEventHandler,
-  ReactNode,
-} from 'react'
-import { render, screen, within } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import SortDropdown from '../index'
 
+// ================================
+// Mock external dependencies only
+// ================================
+
+// Mock i18n translation hook
 const mockTranslation = vi.fn((key: string, options?: { ns?: string }) => {
+  // Build full key with namespace prefix if provided
   const fullKey = options?.ns ? `${options.ns}.${key}` : key
   const translations: Record<string, string> = {
     'plugin.marketplace.sortBy': 'Sort by',
@@ -24,6 +27,7 @@ vi.mock('#i18n', () => ({
   }),
 }))
 
+// Mock marketplace atoms with controllable values
 let mockSort: { sortBy: string, sortOrder: string } = { sortBy: 'install_count', sortOrder: 'DESC' }
 const mockHandleSortChange = vi.fn()
 
@@ -31,123 +35,664 @@ vi.mock('../../atoms', () => ({
   useMarketplaceSort: () => [mockSort, mockHandleSortChange],
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
-  const React = await import('react')
-  const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+// Mock portal component with controllable open state
+let mockPortalOpenState = false
 
-  const useDropdownMenuContext = () => {
-    const context = React.use(DropdownMenuContext)
-    if (!context)
-      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
-    return context
-  }
+vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children, open, onOpenChange: _onOpenChange }: {
+    children: React.ReactNode
+    open: boolean
+    onOpenChange: (open: boolean) => void
+  }) => {
+    mockPortalOpenState = open
+    return (
+      <div data-testid="portal-wrapper" data-open={open}>
+        {children}
+      </div>
+    )
+  },
+  PortalToFollowElemTrigger: ({ children, onClick }: {
+    children: React.ReactNode
+    onClick: () => void
+  }) => (
+    <div data-testid="portal-trigger" onClick={onClick}>
+      {children}
+    </div>
+  ),
+  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
+    // Match actual behavior: only render when portal is open
+    if (!mockPortalOpenState)
+      return null
+    return <div data-testid="portal-content">{children}</div>
+  },
+}))
 
-  return {
-    DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
-      <DropdownMenuContext value={{ open, setOpen: onOpenChange ?? vi.fn() }}>
-        <div data-testid="dropdown-wrapper" data-open={open}>
-          {children}
-        </div>
-      </DropdownMenuContext>
-    ),
-    DropdownMenuTrigger: ({ children, className }: { children: ReactNode, className?: string }) => {
-      const { open, setOpen } = useDropdownMenuContext()
-      return (
-        <button
-          type="button"
-          className={className}
-          data-testid="dropdown-trigger"
-          onClick={() => setOpen(!open)}
-        >
-          {children}
-        </button>
-      )
-    },
-    DropdownMenuContent: ({ children }: { children: ReactNode }) => {
-      const { open } = useDropdownMenuContext()
-      return open ? <div data-testid="dropdown-content">{children}</div> : null
-    },
-    DropdownMenuItem: ({
-      children,
-      onClick,
-      className,
-    }: {
-      children: ReactNode
-      onClick?: MouseEventHandler<HTMLButtonElement>
-      className?: string
-    }) => {
-      const { setOpen } = useDropdownMenuContext()
-      return (
-        <button
-          type="button"
-          className={className}
-          onClick={(event) => {
-            onClick?.(event)
-            setOpen(false)
-          }}
-        >
-          {children}
-        </button>
-      )
-    },
-  }
-})
+// ================================
+// Test Factory Functions
+// ================================
 
+type SortOption = {
+  value: string
+  order: string
+  text: string
+}
+
+const createSortOptions = (): SortOption[] => [
+  { value: 'install_count', order: 'DESC', text: 'Most Popular' },
+  { value: 'version_updated_at', order: 'DESC', text: 'Recently Updated' },
+  { value: 'created_at', order: 'DESC', text: 'Newly Released' },
+  { value: 'created_at', order: 'ASC', text: 'First Released' },
+]
+
+// ================================
+// SortDropdown Component Tests
+// ================================
 describe('SortDropdown', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
+    mockPortalOpenState = false
   })
 
-  it('renders the selected sort option in the trigger', () => {
-    render(<SortDropdown />)
+  // ================================
+  // Rendering Tests
+  // ================================
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<SortDropdown />)
 
-    const trigger = screen.getByTestId('dropdown-trigger')
-    expect(within(trigger).getByText('Sort by')).toBeInTheDocument()
-    expect(within(trigger).getByText('Most Popular')).toBeInTheDocument()
-  })
-
-  it('falls back to the default option when the current sort is invalid', () => {
-    mockSort = { sortBy: 'unknown', sortOrder: 'ASC' }
-
-    render(<SortDropdown />)
-
-    expect(screen.getByText('Most Popular')).toBeInTheDocument()
-  })
-
-  it('opens the menu and renders all sort options', async () => {
-    const user = userEvent.setup()
-    render(<SortDropdown />)
-
-    await user.click(screen.getByTestId('dropdown-trigger'))
-
-    const content = screen.getByTestId('dropdown-content')
-    expect(within(content).getByText('Most Popular')).toBeInTheDocument()
-    expect(within(content).getByText('Recently Updated')).toBeInTheDocument()
-    expect(within(content).getByText('Newly Released')).toBeInTheDocument()
-    expect(within(content).getByText('First Released')).toBeInTheDocument()
-  })
-
-  it('shows a check icon for the currently selected option', async () => {
-    const user = userEvent.setup()
-    const { container } = render(<SortDropdown />)
-
-    await user.click(screen.getByTestId('dropdown-trigger'))
-
-    expect(container.querySelector('.i-ri-check-line')).toBeInTheDocument()
-  })
-
-  it('updates the sort and closes the menu when an option is selected', async () => {
-    const user = userEvent.setup()
-    render(<SortDropdown />)
-
-    await user.click(screen.getByTestId('dropdown-trigger'))
-    await user.click(screen.getByText('Recently Updated'))
-
-    expect(mockHandleSortChange).toHaveBeenCalledWith({
-      sortBy: 'version_updated_at',
-      sortOrder: 'DESC',
+      expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
     })
-    expect(screen.queryByTestId('dropdown-content')).not.toBeInTheDocument()
+
+    it('should render sort by label', () => {
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Sort by')).toBeInTheDocument()
+    })
+
+    it('should render selected option text', () => {
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
+    })
+
+    it('should render arrow down icon', () => {
+      const { container } = render(<SortDropdown />)
+
+      const arrowIcon = container.querySelector('.h-4.w-4.text-text-tertiary')
+      expect(arrowIcon).toBeInTheDocument()
+    })
+
+    it('should render trigger element with correct styles', () => {
+      const { container } = render(<SortDropdown />)
+
+      const trigger = container.querySelector('.cursor-pointer')
+      expect(trigger).toBeInTheDocument()
+      expect(trigger).toHaveClass('h-8', 'rounded-lg', 'bg-state-base-hover-alt')
+    })
+
+    it('should not render dropdown content when closed', () => {
+      render(<SortDropdown />)
+
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // State Management Tests
+  // ================================
+  describe('State Management', () => {
+    it('should initialize with closed state', () => {
+      render(<SortDropdown />)
+
+      const wrapper = screen.getByTestId('portal-wrapper')
+      expect(wrapper).toHaveAttribute('data-open', 'false')
+    })
+
+    it('should display correct selected option for install_count DESC', () => {
+      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
+    })
+
+    it('should display correct selected option for version_updated_at DESC', () => {
+      mockSort = { sortBy: 'version_updated_at', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Recently Updated')).toBeInTheDocument()
+    })
+
+    it('should display correct selected option for created_at DESC', () => {
+      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Newly Released')).toBeInTheDocument()
+    })
+
+    it('should display correct selected option for created_at ASC', () => {
+      mockSort = { sortBy: 'created_at', sortOrder: 'ASC' }
+      render(<SortDropdown />)
+
+      expect(screen.getByText('First Released')).toBeInTheDocument()
+    })
+
+    it('should toggle open state when trigger clicked', () => {
+      render(<SortDropdown />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // After click, portal content should be visible
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should close dropdown when trigger clicked again', () => {
+      render(<SortDropdown />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Open
+      fireEvent.click(trigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close
+      fireEvent.click(trigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // User Interactions Tests
+  // ================================
+  describe('User Interactions', () => {
+    it('should open dropdown on trigger click', () => {
+      render(<SortDropdown />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should render all sort options when open', () => {
+      render(<SortDropdown />)
+
+      // Open dropdown
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      expect(within(content).getByText('Most Popular')).toBeInTheDocument()
+      expect(within(content).getByText('Recently Updated')).toBeInTheDocument()
+      expect(within(content).getByText('Newly Released')).toBeInTheDocument()
+      expect(within(content).getByText('First Released')).toBeInTheDocument()
+    })
+
+    it('should call handleSortChange when option clicked', () => {
+      render(<SortDropdown />)
+
+      // Open dropdown
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      // Click on "Recently Updated"
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('Recently Updated'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledWith({
+        sortBy: 'version_updated_at',
+        sortOrder: 'DESC',
+      })
+    })
+
+    it('should call handleSortChange with correct params for Most Popular', () => {
+      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('Most Popular'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledWith({
+        sortBy: 'install_count',
+        sortOrder: 'DESC',
+      })
+    })
+
+    it('should call handleSortChange with correct params for Newly Released', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('Newly Released'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledWith({
+        sortBy: 'created_at',
+        sortOrder: 'DESC',
+      })
+    })
+
+    it('should call handleSortChange with correct params for First Released', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('First Released'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledWith({
+        sortBy: 'created_at',
+        sortOrder: 'ASC',
+      })
+    })
+
+    it('should allow selecting currently selected option', () => {
+      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('Most Popular'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledWith({
+        sortBy: 'install_count',
+        sortOrder: 'DESC',
+      })
+    })
+
+    it('should support userEvent for trigger click', async () => {
+      const user = userEvent.setup()
+      render(<SortDropdown />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+      await user.click(trigger)
+
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // Check Icon Tests
+  // ================================
+  describe('Check Icon', () => {
+    it('should show check icon for selected option', () => {
+      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
+      const { container } = render(<SortDropdown />)
+
+      // Open dropdown
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      // Check icon should be present in the dropdown
+      const checkIcon = container.querySelector('.text-text-accent')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    it('should show check icon only for matching sortBy AND sortOrder', () => {
+      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const options = content.querySelectorAll('.cursor-pointer')
+
+      // "Newly Released" (created_at DESC) should have check icon
+      // "First Released" (created_at ASC) should NOT have check icon
+      expect(options.length).toBe(4)
+    })
+
+    it('should not show check icon for different sortOrder with same sortBy', () => {
+      mockSort = { sortBy: 'created_at', sortOrder: 'DESC' }
+      const { container } = render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      // Only one check icon should be visible (for Newly Released, not First Released)
+      const checkIcons = container.querySelectorAll('.text-text-accent')
+      expect(checkIcons.length).toBe(1)
+    })
+  })
+
+  // ================================
+  // Dropdown Options Structure Tests
+  // ================================
+  describe('Dropdown Options Structure', () => {
+    const sortOptions = createSortOptions()
+
+    it('should render 4 sort options', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const options = content.querySelectorAll('.cursor-pointer')
+      expect(options.length).toBe(4)
+    })
+
+    it.each(sortOptions)('should render option: $text', ({ text }) => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      expect(within(content).getByText(text)).toBeInTheDocument()
+    })
+
+    it('should render options with unique keys', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const options = content.querySelectorAll('.cursor-pointer')
+
+      // All options should be rendered (no key conflicts)
+      expect(options.length).toBe(4)
+    })
+
+    it('should render dropdown container with correct styles', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const container = content.firstChild as HTMLElement
+      expect(container).toHaveClass('rounded-xl', 'shadow-lg')
+    })
+
+    it('should render option items with hover styles', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const option = content.querySelector('.cursor-pointer')
+      expect(option).toHaveClass('hover:bg-components-panel-on-panel-item-bg-hover')
+    })
+  })
+
+  // ================================
+  // Edge Cases Tests
+  // ================================
+  describe('Edge Cases', () => {
+    // The component falls back to the first option (Most Popular) when sort values are invalid
+
+    it('should fallback to default option when sortBy is unknown', () => {
+      mockSort = { sortBy: 'unknown_field', sortOrder: 'DESC' }
+
+      render(<SortDropdown />)
+
+      // Should fallback to first option "Most Popular"
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
+    })
+
+    it('should fallback to default option when sortBy is empty', () => {
+      mockSort = { sortBy: '', sortOrder: 'DESC' }
+
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
+    })
+
+    it('should fallback to default option when sortOrder is unknown', () => {
+      mockSort = { sortBy: 'install_count', sortOrder: 'UNKNOWN' }
+
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
+    })
+
+    it('should render correctly when handleSortChange is a no-op', () => {
+      mockHandleSortChange.mockImplementation(() => {})
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('Recently Updated'))
+
+      expect(mockHandleSortChange).toHaveBeenCalled()
+    })
+
+    it('should handle rapid toggle clicks', () => {
+      render(<SortDropdown />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Rapid clicks
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      // Final state should be open (odd number of clicks)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should handle multiple option selections', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+
+      // Click multiple options
+      fireEvent.click(within(content).getByText('Recently Updated'))
+      fireEvent.click(within(content).getByText('Newly Released'))
+      fireEvent.click(within(content).getByText('First Released'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // ================================
+  // Context Integration Tests
+  // ================================
+  describe('Context Integration', () => {
+    it('should read sort value from context', () => {
+      mockSort = { sortBy: 'version_updated_at', sortOrder: 'DESC' }
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Recently Updated')).toBeInTheDocument()
+    })
+
+    it('should call context handleSortChange on selection', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      fireEvent.click(within(content).getByText('First Released'))
+
+      expect(mockHandleSortChange).toHaveBeenCalledWith({
+        sortBy: 'created_at',
+        sortOrder: 'ASC',
+      })
+    })
+
+    it('should update display when context sort changes', () => {
+      const { rerender } = render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
+
+      // Simulate context change
+      mockSort = { sortBy: 'created_at', sortOrder: 'ASC' }
+      rerender(<SortDropdown />)
+
+      expect(screen.getByText('First Released')).toBeInTheDocument()
+    })
+
+    it('should use selector pattern correctly', () => {
+      render(<SortDropdown />)
+
+      // Component should have called useMarketplaceContext with selector functions
+      expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // Accessibility Tests
+  // ================================
+  describe('Accessibility', () => {
+    it('should have cursor pointer on trigger', () => {
+      const { container } = render(<SortDropdown />)
+
+      const trigger = container.querySelector('.cursor-pointer')
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should have cursor pointer on options', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const options = content.querySelectorAll('.cursor-pointer')
+      expect(options.length).toBeGreaterThan(0)
+    })
+
+    it('should have visible focus indicators via hover styles', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const option = content.querySelector('.hover\\:bg-components-panel-on-panel-item-bg-hover')
+      expect(option).toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // Translation Tests
+  // ================================
+  describe('Translations', () => {
+    it('should call translation for sortBy label', () => {
+      render(<SortDropdown />)
+
+      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortBy', { ns: 'plugin' })
+    })
+
+    it('should call translation for all sort options', () => {
+      render(<SortDropdown />)
+
+      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.mostPopular', { ns: 'plugin' })
+      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.recentlyUpdated', { ns: 'plugin' })
+      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.newlyReleased', { ns: 'plugin' })
+      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.firstReleased', { ns: 'plugin' })
+    })
+  })
+
+  // ================================
+  // Portal Component Integration Tests
+  // ================================
+  describe('Portal Component Integration', () => {
+    it('should pass open state to PortalToFollowElem', () => {
+      render(<SortDropdown />)
+
+      const wrapper = screen.getByTestId('portal-wrapper')
+      expect(wrapper).toHaveAttribute('data-open', 'false')
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      expect(wrapper).toHaveAttribute('data-open', 'true')
+    })
+
+    it('should render trigger content inside PortalToFollowElemTrigger', () => {
+      render(<SortDropdown />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+      expect(within(trigger).getByText('Sort by')).toBeInTheDocument()
+      expect(within(trigger).getByText('Most Popular')).toBeInTheDocument()
+    })
+
+    it('should render options inside PortalToFollowElemContent', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      expect(within(content).getByText('Most Popular')).toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // Visual Style Tests
+  // ================================
+  describe('Visual Styles', () => {
+    it('should apply correct trigger container styles', () => {
+      const { container } = render(<SortDropdown />)
+
+      const triggerDiv = container.querySelector('.flex.h-8.cursor-pointer.items-center.rounded-lg')
+      expect(triggerDiv).toBeInTheDocument()
+    })
+
+    it('should apply secondary text color to sort by label', () => {
+      const { container } = render(<SortDropdown />)
+
+      const label = container.querySelector('.text-text-secondary')
+      expect(label).toBeInTheDocument()
+      expect(label?.textContent).toBe('Sort by')
+    })
+
+    it('should apply primary text color to selected option', () => {
+      const { container } = render(<SortDropdown />)
+
+      const selected = container.querySelector('.text-text-primary.system-sm-medium')
+      expect(selected).toBeInTheDocument()
+    })
+
+    it('should apply tertiary text color to arrow icon', () => {
+      const { container } = render(<SortDropdown />)
+
+      const arrow = container.querySelector('.text-text-tertiary')
+      expect(arrow).toBeInTheDocument()
+    })
+
+    it('should apply accent text color to check icon when option selected', () => {
+      mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
+      const { container } = render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const checkIcon = container.querySelector('.text-text-accent')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    it('should apply blur-sm backdrop to dropdown container', () => {
+      render(<SortDropdown />)
+
+      fireEvent.click(screen.getByTestId('portal-trigger'))
+
+      const content = screen.getByTestId('portal-content')
+      const container = content.querySelector('.backdrop-blur-xs')
+      expect(container).toBeInTheDocument()
+    })
+  })
+
+  // ================================
+  // All Sort Options Click Tests
+  // ================================
+  describe('All Sort Options Click Handlers', () => {
+    const testCases = [
+      { text: 'Most Popular', sortBy: 'install_count', sortOrder: 'DESC' },
+      { text: 'Recently Updated', sortBy: 'version_updated_at', sortOrder: 'DESC' },
+      { text: 'Newly Released', sortBy: 'created_at', sortOrder: 'DESC' },
+      { text: 'First Released', sortBy: 'created_at', sortOrder: 'ASC' },
+    ]
+
+    it.each(testCases)(
+      'should call handleSortChange with { sortBy: "$sortBy", sortOrder: "$sortOrder" } when clicking "$text"',
+      ({ text, sortBy, sortOrder }) => {
+        render(<SortDropdown />)
+
+        fireEvent.click(screen.getByTestId('portal-trigger'))
+
+        const content = screen.getByTestId('portal-content')
+        fireEvent.click(within(content).getByText(text))
+
+        expect(mockHandleSortChange).toHaveBeenCalledWith({ sortBy, sortOrder })
+      },
+    )
   })
 })
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index a47143de02..dddfab5402 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -1,12 +1,15 @@
 'use client'
 import { useTranslation } from '#i18n'
+import {
+  RiArrowDownSLine,
+  RiCheckLine,
+} from '@remixicon/react'
 import { useState } from 'react'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 import { useMarketplaceSort } from '../atoms'
 
 const SortDropdown = () => {
@@ -35,44 +38,50 @@ const SortDropdown = () => {
   ]
   const [sort, handleSortChange] = useMarketplaceSort()
   const [open, setOpen] = useState(false)
-  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder) ?? options[0]!
+  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder) ?? options[0]
 
   return (
-    <DropdownMenu
+    <PortalToFollowElem
+      placement="bottom-start"
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
       open={open}
       onOpenChange={setOpen}
     >
-      <DropdownMenuTrigger className="flex h-8 cursor-pointer items-center rounded-lg bg-state-base-hover-alt px-2 pr-3">
-        <span className="mr-1 system-sm-regular text-text-secondary">
-          {t('marketplace.sortBy', { ns: 'plugin' })}
-        </span>
-        <span className="mr-1 system-sm-medium text-text-primary">
-          {selectedOption.text}
-        </span>
-        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 text-text-tertiary" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        placement="bottom-start"
-        sideOffset={4}
-        popupClassName="p-1"
-      >
-        {options.map(option => (
-          <DropdownMenuItem
-            key={`${option.value}-${option.order}`}
-            className="justify-between px-3 pr-2 system-md-regular text-text-primary"
-            onClick={() => {
-              handleSortChange({ sortBy: option.value, sortOrder: option.order })
-              setOpen(false)
-            }}
-          >
-            {option.text}
-            {sort.sortBy === option.value && sort.sortOrder === option.order && (
-              <span aria-hidden className="ml-2 i-ri-check-line h-4 w-4 text-text-accent" />
-            )}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className="flex h-8 cursor-pointer items-center rounded-lg bg-state-base-hover-alt px-2 pr-3">
+          <span className="system-sm-regular mr-1 text-text-secondary">
+            {t('marketplace.sortBy', { ns: 'plugin' })}
+          </span>
+          <span className="system-sm-medium mr-1 text-text-primary">
+            {selectedOption.text}
+          </span>
+          <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs">
+          {
+            options.map(option => (
+              <div
+                key={`${option.value}-${option.order}`}
+                className="system-md-regular flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 pr-2 text-text-primary hover:bg-components-panel-on-panel-item-bg-hover"
+                onClick={() => handleSortChange({ sortBy: option.value, sortOrder: option.order })}
+              >
+                {option.text}
+                {
+                  sort.sortBy === option.value && sort.sortOrder === option.order && (
+                    <RiCheckLine className="ml-2 h-4 w-4 text-text-accent" />
+                  )
+                }
+              </div>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx
index 0eacbf3bd3..74ce8525a9 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/detail-header.spec.tsx
@@ -297,13 +297,13 @@ describe('DetailHeader', () => {
     it('should render plugin title', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should render plugin icon with correct src', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('card-icon'))!.toBeInTheDocument()
+      expect(screen.getByTestId('card-icon')).toBeInTheDocument()
     })
 
     it('should render icon with http url directly', () => {
@@ -315,13 +315,13 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('card-icon'))!.toHaveAttribute('data-src', 'https://example.com/icon.png')
+      expect(screen.getByTestId('card-icon')).toHaveAttribute('data-src', 'https://example.com/icon.png')
     })
 
     it('should render description when not in readme view', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('description'))!.toBeInTheDocument()
+      expect(screen.getByTestId('description')).toBeInTheDocument()
     })
 
     it('should not render description in readme view', () => {
@@ -333,7 +333,7 @@ describe('DetailHeader', () => {
     it('should render verified badge when verified', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('verified-badge'))!.toBeInTheDocument()
+      expect(screen.getByTestId('verified-badge')).toBeInTheDocument()
     })
   })
 
@@ -346,8 +346,7 @@ describe('DetailHeader', () => {
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
       // Badge component should render with the version
-      // Badge component should render with the version
-      expect(screen.getByText('1.0.0'))!.toBeInTheDocument()
+      expect(screen.getByText('1.0.0')).toBeInTheDocument()
     })
 
     it('should not show new version indicator when versions match', () => {
@@ -358,8 +357,7 @@ describe('DetailHeader', () => {
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
       // Badge component should render with the version
-      // Badge component should render with the version
-      expect(screen.getByText('1.0.0'))!.toBeInTheDocument()
+      expect(screen.getByText('1.0.0')).toBeInTheDocument()
     })
 
     it('should show update button when new version is available', () => {
@@ -369,7 +367,7 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByText('plugin.detailPanel.operation.update'))!.toBeInTheDocument()
+      expect(screen.getByText('plugin.detailPanel.operation.update')).toBeInTheDocument()
     })
 
     it('should show update button for GitHub source', () => {
@@ -379,7 +377,7 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByText('plugin.detailPanel.operation.update'))!.toBeInTheDocument()
+      expect(screen.getByText('plugin.detailPanel.operation.update')).toBeInTheDocument()
     })
   })
 
@@ -395,7 +393,7 @@ describe('DetailHeader', () => {
 
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should render component when strategy is disabled', () => {
@@ -409,7 +407,7 @@ describe('DetailHeader', () => {
 
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should enable auto upgrade for update_all mode', () => {
@@ -424,8 +422,7 @@ describe('DetailHeader', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
       // Auto upgrade badge should be rendered
-      // Auto upgrade badge should be rendered
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should enable auto upgrade for partial mode when plugin is included', () => {
@@ -439,7 +436,7 @@ describe('DetailHeader', () => {
 
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should not enable auto upgrade for partial mode when plugin is not included', () => {
@@ -453,7 +450,7 @@ describe('DetailHeader', () => {
 
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should enable auto upgrade for exclude mode when plugin is not excluded', () => {
@@ -467,7 +464,7 @@ describe('DetailHeader', () => {
 
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should not enable auto upgrade for exclude mode when plugin is excluded', () => {
@@ -481,7 +478,7 @@ describe('DetailHeader', () => {
 
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should not enable auto upgrade for non-marketplace plugins', () => {
@@ -499,7 +496,7 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should not enable auto upgrade when marketplace feature is disabled', () => {
@@ -515,8 +512,7 @@ describe('DetailHeader', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
       // Component should still render but auto upgrade should be disabled
-      // Component should still render but auto upgrade should be disabled
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
   })
 
@@ -526,7 +522,7 @@ describe('DetailHeader', () => {
 
       // Find the close button (ActionButton with action-btn class)
       const actionButtons = screen.getAllByRole('button').filter(btn => btn.classList.contains('action-btn'))
-      fireEvent.click(actionButtons[actionButtons.length - 1]!)
+      fireEvent.click(actionButtons[actionButtons.length - 1])
 
       expect(mockOnHide).toHaveBeenCalled()
     })
@@ -537,7 +533,7 @@ describe('DetailHeader', () => {
       const infoBtn = screen.getByTestId('info-btn')
       fireEvent.click(infoBtn)
 
-      expect(infoBtn)!.toBeInTheDocument()
+      expect(infoBtn).toBeInTheDocument()
     })
 
     it('should have check version button available', () => {
@@ -546,7 +542,7 @@ describe('DetailHeader', () => {
       const checkBtn = screen.getByTestId('check-version-btn')
       fireEvent.click(checkBtn)
 
-      expect(checkBtn)!.toBeInTheDocument()
+      expect(checkBtn).toBeInTheDocument()
     })
   })
 
@@ -561,7 +557,7 @@ describe('DetailHeader', () => {
       const updateBtn = screen.getByText('plugin.detailPanel.operation.update')
       fireEvent.click(updateBtn)
 
-      expect(updateBtn)!.toBeInTheDocument()
+      expect(updateBtn).toBeInTheDocument()
     })
 
     it('should have version picker select button', () => {
@@ -570,7 +566,7 @@ describe('DetailHeader', () => {
       const selectBtn = screen.getByTestId('select-version-btn')
       fireEvent.click(selectBtn)
 
-      expect(selectBtn)!.toBeInTheDocument()
+      expect(selectBtn).toBeInTheDocument()
     })
 
     it('should have downgrade button', () => {
@@ -579,7 +575,7 @@ describe('DetailHeader', () => {
       const downgradeBtn = screen.getByTestId('select-downgrade-btn')
       fireEvent.click(downgradeBtn)
 
-      expect(downgradeBtn)!.toBeInTheDocument()
+      expect(downgradeBtn).toBeInTheDocument()
     })
   })
 
@@ -655,7 +651,7 @@ describe('DetailHeader', () => {
       const removeBtn = screen.getByTestId('remove-btn')
       fireEvent.click(removeBtn)
 
-      expect(removeBtn)!.toBeInTheDocument()
+      expect(removeBtn).toBeInTheDocument()
     })
 
     it('should have uninstallPlugin mock defined', () => {
@@ -675,13 +671,13 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('remove-btn'))!.toBeInTheDocument()
+      expect(screen.getByTestId('remove-btn')).toBeInTheDocument()
     })
 
     it('should render correctly for tool plugin delete', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('remove-btn'))!.toBeInTheDocument()
+      expect(screen.getByTestId('remove-btn')).toBeInTheDocument()
     })
   })
 
@@ -693,21 +689,21 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should render local source icon', () => {
       const detail = createPluginDetail({ source: PluginSource.local })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should render debugging source icon', () => {
       const detail = createPluginDetail({ source: PluginSource.debugging })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should not render deprecation notice for non-marketplace source', () => {
@@ -726,20 +722,20 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('operation-dropdown'))!.toBeInTheDocument()
+      expect(screen.getByTestId('operation-dropdown')).toBeInTheDocument()
     })
 
     it('should render marketplace source correctly', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('operation-dropdown'))!.toBeInTheDocument()
+      expect(screen.getByTestId('operation-dropdown')).toBeInTheDocument()
     })
 
     it('should render local source correctly', () => {
       const detail = createPluginDetail({ source: PluginSource.local })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('operation-dropdown'))!.toBeInTheDocument()
+      expect(screen.getByTestId('operation-dropdown')).toBeInTheDocument()
     })
   })
 
@@ -747,7 +743,7 @@ describe('DetailHeader', () => {
     it('should render plugin auth for tool category', () => {
       render(<DetailHeader detail={createPluginDetail()} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('plugin-auth'))!.toBeInTheDocument()
+      expect(screen.getByTestId('plugin-auth')).toBeInTheDocument()
     })
 
     it('should not render plugin auth for non-tool category', () => {
@@ -774,7 +770,7 @@ describe('DetailHeader', () => {
       const detail = createPluginDetail({ version: '' })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('title'))!.toBeInTheDocument()
+      expect(screen.getByTestId('title')).toBeInTheDocument()
     })
 
     it('should handle plugin with name containing slash', () => {
@@ -786,7 +782,7 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('org-info'))!.toBeInTheDocument()
+      expect(screen.getByTestId('org-info')).toBeInTheDocument()
     })
 
     it('should handle empty icon', () => {
@@ -798,7 +794,7 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('card-icon'))!.toHaveAttribute('data-src', '')
+      expect(screen.getByTestId('card-icon')).toHaveAttribute('data-src', '')
     })
   })
 
@@ -809,7 +805,7 @@ describe('DetailHeader', () => {
       fireEvent.click(screen.getByTestId('remove-btn'))
 
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
     })
 
@@ -818,7 +814,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('remove-btn'))
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
@@ -833,7 +829,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('remove-btn'))
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
@@ -848,7 +844,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('remove-btn'))
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
@@ -869,7 +865,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('remove-btn'))
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
@@ -884,7 +880,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('remove-btn'))
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
@@ -899,7 +895,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('remove-btn'))
       await waitFor(() => {
-        expect(screen.getByRole('alertdialog'))!.toBeInTheDocument()
+        expect(screen.getByRole('alertdialog')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
@@ -921,7 +917,7 @@ describe('DetailHeader', () => {
       fireEvent.click(screen.getByText('plugin.detailPanel.operation.update'))
 
       await waitFor(() => {
-        expect(screen.getByTestId('update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('update-modal')).toBeInTheDocument()
       })
     })
 
@@ -934,7 +930,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByText('plugin.detailPanel.operation.update'))
       await waitFor(() => {
-        expect(screen.getByTestId('update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('update-modal')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('update-modal-save'))
@@ -953,7 +949,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByText('plugin.detailPanel.operation.update'))
       await waitFor(() => {
-        expect(screen.getByTestId('update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('update-modal')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('update-modal-cancel'))
@@ -971,7 +967,7 @@ describe('DetailHeader', () => {
       fireEvent.click(screen.getByTestId('info-btn'))
 
       await waitFor(() => {
-        expect(screen.getByTestId('plugin-info'))!.toBeInTheDocument()
+        expect(screen.getByTestId('plugin-info')).toBeInTheDocument()
       })
     })
 
@@ -980,7 +976,7 @@ describe('DetailHeader', () => {
 
       fireEvent.click(screen.getByTestId('info-btn'))
       await waitFor(() => {
-        expect(screen.getByTestId('plugin-info'))!.toBeInTheDocument()
+        expect(screen.getByTestId('plugin-info')).toBeInTheDocument()
       })
 
       fireEvent.click(screen.getByTestId('plugin-info-close'))
@@ -997,7 +993,7 @@ describe('DetailHeader', () => {
       })
       render(<DetailHeader detail={detail} onUpdate={mockOnUpdate} onHide={mockOnHide} />)
 
-      expect(screen.getByTestId('info-btn'))!.toBeInTheDocument()
+      expect(screen.getByTestId('info-btn')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
index f7dd1921e4..4dd604a03e 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
@@ -393,20 +393,19 @@ describe('AppTrigger', () => {
     it('should render placeholder when no app is selected', () => {
       render(<AppTrigger open={false} />)
       // i18n mock returns key with namespace in dot format
-      // i18n mock returns key with namespace in dot format
-      expect(screen.getByText('app.appSelector.placeholder'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.placeholder')).toBeInTheDocument()
     })
 
     it('should render app details when app is selected', () => {
       const app = createMockApp({ name: 'My Test App' })
       render(<AppTrigger open={false} appDetail={app} />)
-      expect(screen.getByText('My Test App'))!.toBeInTheDocument()
+      expect(screen.getByText('My Test App')).toBeInTheDocument()
     })
 
     it('should apply open state styling', () => {
       const { container } = render(<AppTrigger open={true} />)
       const trigger = container.querySelector('.bg-state-base-hover-alt')
-      expect(trigger)!.toBeInTheDocument()
+      expect(trigger).toBeInTheDocument()
     })
 
     it('should render AppIcon when app is provided', () => {
@@ -414,21 +413,21 @@ describe('AppTrigger', () => {
       const { container } = render(<AppTrigger open={false} appDetail={app} />)
       // AppIcon renders with a specific class when app is provided
       const iconContainer = container.querySelector('.mr-2')
-      expect(iconContainer)!.toBeInTheDocument()
+      expect(iconContainer).toBeInTheDocument()
     })
   })
 
   describe('Props', () => {
     it('should handle undefined appDetail gracefully', () => {
       render(<AppTrigger open={false} appDetail={undefined} />)
-      expect(screen.getByText('app.appSelector.placeholder'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.placeholder')).toBeInTheDocument()
     })
 
     it('should display app name with title attribute', () => {
       const app = createMockApp({ name: 'Long App Name For Testing' })
       render(<AppTrigger open={false} appDetail={app} />)
       const nameElement = screen.getByTitle('Long App Name For Testing')
-      expect(nameElement)!.toBeInTheDocument()
+      expect(nameElement).toBeInTheDocument()
     })
   })
 
@@ -436,14 +435,14 @@ describe('AppTrigger', () => {
     it('should have correct base classes', () => {
       const { container } = render(<AppTrigger open={false} />)
       const trigger = container.firstChild as HTMLElement
-      expect(trigger)!.toHaveClass('group', 'flex', 'cursor-pointer')
+      expect(trigger).toHaveClass('group', 'flex', 'cursor-pointer')
     })
 
     it('should apply different padding when app is provided', () => {
       const app = createMockApp()
       const { container } = render(<AppTrigger open={false} appDetail={app} />)
       const trigger = container.firstChild as HTMLElement
-      expect(trigger)!.toHaveClass('py-1.5', 'pl-1.5')
+      expect(trigger).toHaveClass('py-1.5', 'pl-1.5')
     })
   })
 })
@@ -480,18 +479,18 @@ describe('AppPicker', () => {
   describe('Rendering', () => {
     it('should render trigger element', () => {
       render(<AppPicker {...defaultProps} />)
-      expect(screen.getByText('Select App'))!.toBeInTheDocument()
+      expect(screen.getByText('Select App')).toBeInTheDocument()
     })
 
     it('should render app list when open', () => {
       render(<AppPicker {...defaultProps} isShow={true} />)
-      expect(screen.getByText('App 1'))!.toBeInTheDocument()
-      expect(screen.getByText('App 2'))!.toBeInTheDocument()
+      expect(screen.getByText('App 1')).toBeInTheDocument()
+      expect(screen.getByText('App 2')).toBeInTheDocument()
     })
 
     it('should show loading indicator when isLoading is true', () => {
       render(<AppPicker {...defaultProps} isShow={true} isLoading={true} />)
-      expect(screen.getByText('common.loading'))!.toBeInTheDocument()
+      expect(screen.getByText('common.loading')).toBeInTheDocument()
     })
 
     it('should not render content when isShow is false', () => {
@@ -539,31 +538,31 @@ describe('AppPicker', () => {
     it('should display correct app type for CHAT', () => {
       const apps = [createMockApp({ id: 'chat-app', name: 'Chat App', mode: AppModeEnum.CHAT })]
       render(<AppPicker {...defaultProps} isShow={true} apps={apps} />)
-      expect(screen.getByText('chat'))!.toBeInTheDocument()
+      expect(screen.getByText('chat')).toBeInTheDocument()
     })
 
     it('should display correct app type for WORKFLOW', () => {
       const apps = [createMockApp({ id: 'workflow-app', name: 'Workflow App', mode: AppModeEnum.WORKFLOW })]
       render(<AppPicker {...defaultProps} isShow={true} apps={apps} />)
-      expect(screen.getByText('workflow'))!.toBeInTheDocument()
+      expect(screen.getByText('workflow')).toBeInTheDocument()
     })
 
     it('should display correct app type for ADVANCED_CHAT', () => {
       const apps = [createMockApp({ id: 'chatflow-app', name: 'Chatflow App', mode: AppModeEnum.ADVANCED_CHAT })]
       render(<AppPicker {...defaultProps} isShow={true} apps={apps} />)
-      expect(screen.getByText('chatflow'))!.toBeInTheDocument()
+      expect(screen.getByText('chatflow')).toBeInTheDocument()
     })
 
     it('should display correct app type for AGENT_CHAT', () => {
       const apps = [createMockApp({ id: 'agent-app', name: 'Agent App', mode: AppModeEnum.AGENT_CHAT })]
       render(<AppPicker {...defaultProps} isShow={true} apps={apps} />)
-      expect(screen.getByText('agent'))!.toBeInTheDocument()
+      expect(screen.getByText('agent')).toBeInTheDocument()
     })
 
     it('should display correct app type for COMPLETION', () => {
       const apps = [createMockApp({ id: 'completion-app', name: 'Completion App', mode: AppModeEnum.COMPLETION })]
       render(<AppPicker {...defaultProps} isShow={true} apps={apps} />)
-      expect(screen.getByText('completion'))!.toBeInTheDocument()
+      expect(screen.getByText('completion')).toBeInTheDocument()
     })
   })
 
@@ -576,7 +575,7 @@ describe('AppPicker', () => {
     it('should handle search text with value', () => {
       render(<AppPicker {...defaultProps} isShow={true} searchText="test search" />)
       const input = screen.getByTestId('input')
-      expect(input)!.toHaveValue('test search')
+      expect(input).toHaveValue('test search')
     })
   })
 
@@ -642,8 +641,7 @@ describe('AppPicker', () => {
       render(<AppPicker {...defaultProps} isShow={true} hasMore={true} />)
 
       // The component should render without errors
-      // The component should render without errors
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle isShow toggle correctly', () => {
@@ -656,8 +654,7 @@ describe('AppPicker', () => {
       rerender(<AppPicker {...defaultProps} isShow={false} />)
 
       // Should not crash
-      // Should not crash
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should setup intersection observer when isShow is true', () => {
@@ -677,8 +674,7 @@ describe('AppPicker', () => {
       rerender(<AppPicker {...defaultProps} isShow={false} />)
 
       // Component should render without errors
-      // Component should render without errors
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should cleanup observer on component unmount', () => {
@@ -695,8 +691,7 @@ describe('AppPicker', () => {
       triggerMutationObserver()
 
       // Component should still work correctly
-      // Component should still work correctly
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should not setup IntersectionObserver when observerTarget is null', () => {
@@ -704,8 +699,7 @@ describe('AppPicker', () => {
       render(<AppPicker {...defaultProps} isShow={false} />)
 
       // The guard at line 84 should prevent setup
-      // The guard at line 84 should prevent setup
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should debounce onLoadMore calls using loadingRef', () => {
@@ -804,8 +798,8 @@ describe('AppInputsForm', () => {
         { type: InputVarType.textInput, label: 'Name', variable: 'name', required: false },
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('Name'))!.toBeInTheDocument()
-      expect(screen.getByPlaceholderText('Name'))!.toBeInTheDocument()
+      expect(screen.getByText('Name')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Name')).toBeInTheDocument()
     })
 
     it('should render number input field', () => {
@@ -813,7 +807,7 @@ describe('AppInputsForm', () => {
         { type: InputVarType.number, label: 'Count', variable: 'count', required: false },
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('Count'))!.toBeInTheDocument()
+      expect(screen.getByText('Count')).toBeInTheDocument()
     })
 
     it('should render paragraph (textarea) field', () => {
@@ -821,7 +815,7 @@ describe('AppInputsForm', () => {
         { type: InputVarType.paragraph, label: 'Description', variable: 'desc', required: false },
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('Description'))!.toBeInTheDocument()
+      expect(screen.getByText('Description')).toBeInTheDocument()
     })
 
     it('should render select field', () => {
@@ -846,8 +840,8 @@ describe('AppInputsForm', () => {
         },
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('Single File Upload'))!.toBeInTheDocument()
-      expect(screen.getByTestId('file-uploader'))!.toBeInTheDocument()
+      expect(screen.getByText('Single File Upload')).toBeInTheDocument()
+      expect(screen.getByTestId('file-uploader')).toBeInTheDocument()
     })
 
     it('should render file uploader for single file with existing value', () => {
@@ -865,8 +859,7 @@ describe('AppInputsForm', () => {
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} inputs={{ singleFile: existingFile }} />)
       // The file uploader should receive the existing file as an array
-      // The file uploader should receive the existing file as an array
-      expect(screen.getByTestId('file-value'))!.toHaveTextContent(JSON.stringify([existingFile]))
+      expect(screen.getByTestId('file-value')).toHaveTextContent(JSON.stringify([existingFile]))
     })
 
     it('should render file uploader for multi files', () => {
@@ -883,7 +876,7 @@ describe('AppInputsForm', () => {
         },
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('Attachments'))!.toBeInTheDocument()
+      expect(screen.getByText('Attachments')).toBeInTheDocument()
     })
 
     it('should show optional label for non-required fields', () => {
@@ -891,7 +884,7 @@ describe('AppInputsForm', () => {
         { type: InputVarType.textInput, label: 'Name', variable: 'name', required: false },
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('workflow.panel.optional'))!.toBeInTheDocument()
+      expect(screen.getByText('workflow.panel.optional')).toBeInTheDocument()
     })
 
     it('should not show optional label for required fields', () => {
@@ -1033,7 +1026,7 @@ describe('AppInputsForm', () => {
       render(<AppInputsForm {...defaultProps} inputsForms={forms} inputs={{ name: 'existing' }} />)
 
       const input = screen.getByPlaceholderText('Name')
-      expect(input)!.toHaveValue('existing')
+      expect(input).toHaveValue('existing')
     })
 
     it('should handle empty string value', () => {
@@ -1043,7 +1036,7 @@ describe('AppInputsForm', () => {
       render(<AppInputsForm {...defaultProps} inputsForms={forms} inputs={{ name: '' }} />)
 
       const input = screen.getByPlaceholderText('Name')
-      expect(input)!.toHaveValue('')
+      expect(input).toHaveValue('')
     })
 
     it('should handle undefined variable value', () => {
@@ -1053,7 +1046,7 @@ describe('AppInputsForm', () => {
       render(<AppInputsForm {...defaultProps} inputsForms={forms} inputs={{}} />)
 
       const input = screen.getByPlaceholderText('Name')
-      expect(input)!.toHaveValue('')
+      expect(input).toHaveValue('')
     })
 
     it('should handle multiple form fields', () => {
@@ -1064,9 +1057,9 @@ describe('AppInputsForm', () => {
       ]
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
 
-      expect(screen.getByText('Name'))!.toBeInTheDocument()
-      expect(screen.getByText('Age'))!.toBeInTheDocument()
-      expect(screen.getByText('Bio'))!.toBeInTheDocument()
+      expect(screen.getByText('Name')).toBeInTheDocument()
+      expect(screen.getByText('Age')).toBeInTheDocument()
+      expect(screen.getByText('Bio')).toBeInTheDocument()
     })
 
     it('should handle unknown form type gracefully', () => {
@@ -1075,7 +1068,7 @@ describe('AppInputsForm', () => {
       ]
       // Should not throw error, just not render the field
       render(<AppInputsForm {...defaultProps} inputsForms={forms} />)
-      expect(screen.getByText('Unknown'))!.toBeInTheDocument()
+      expect(screen.getByText('Unknown')).toBeInTheDocument()
     })
   })
 })
@@ -1100,49 +1093,18 @@ describe('AppInputsPanel', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should show no params message when form schema is empty', () => {
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.noParams'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.noParams')).toBeInTheDocument()
     })
 
     it('should show loading state when app is loading', () => {
       mockAppDetailLoading = true
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
       // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
-      // Loading component should be rendered
       expect(screen.queryByText('app.appSelector.params')).not.toBeInTheDocument()
     })
 
@@ -1157,19 +1119,19 @@ describe('AppInputsPanel', () => {
   describe('Props', () => {
     it('should handle undefined value', () => {
       renderWithQueryClient(<AppInputsPanel {...defaultProps} value={undefined} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should handle different app modes', () => {
       const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={workflowApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should handle advanced chat mode', () => {
       const advancedChatApp = createMockApp({ mode: AppModeEnum.ADVANCED_CHAT })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={advancedChatApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
   })
 
@@ -1185,7 +1147,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for number input', () => {
@@ -1199,7 +1161,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for checkbox input', () => {
@@ -1213,7 +1175,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for select input', () => {
@@ -1227,7 +1189,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for file-list input', () => {
@@ -1241,7 +1203,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for file input', () => {
@@ -1255,7 +1217,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for json_object input', () => {
@@ -1269,7 +1231,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for text-input (default)', () => {
@@ -1283,7 +1245,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should filter external_data_tool items', () => {
@@ -1298,7 +1260,7 @@ describe('AppInputsPanel', () => {
         },
       })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
   })
 
@@ -1321,7 +1283,7 @@ describe('AppInputsPanel', () => {
       }
       const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={workflowApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for workflow with singleFile variable', () => {
@@ -1342,7 +1304,7 @@ describe('AppInputsPanel', () => {
       }
       const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={workflowApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should generate schema for workflow with regular variable', () => {
@@ -1363,7 +1325,7 @@ describe('AppInputsPanel', () => {
       }
       const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={workflowApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
   })
 
@@ -1382,7 +1344,7 @@ describe('AppInputsPanel', () => {
       })
       const completionApp = createMockApp({ mode: AppModeEnum.COMPLETION })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={completionApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should add image upload schema for WORKFLOW mode with file upload enabled', () => {
@@ -1402,7 +1364,7 @@ describe('AppInputsPanel', () => {
       }
       const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={workflowApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
   })
 
@@ -1410,7 +1372,7 @@ describe('AppInputsPanel', () => {
     it('should call onFormChange when form is updated', () => {
       const onFormChange = vi.fn()
       renderWithQueryClient(<AppInputsPanel {...defaultProps} onFormChange={onFormChange} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
 
     it('should call onFormChange with updated values when text input changes', () => {
@@ -1462,7 +1424,7 @@ describe('AppInputsPanel', () => {
           <AppInputsPanel {...defaultProps} />
         </QueryClientProvider>,
       )
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
   })
 
@@ -1470,7 +1432,7 @@ describe('AppInputsPanel', () => {
     it('should return empty schema when currentApp is null', () => {
       mockAppDetailData = null
       renderWithQueryClient(<AppInputsPanel {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.noParams'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.noParams')).toBeInTheDocument()
     })
 
     it('should handle workflow without start node', () => {
@@ -1480,7 +1442,7 @@ describe('AppInputsPanel', () => {
       }
       const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
       renderWithQueryClient(<AppInputsPanel {...defaultProps} appDetail={workflowApp} />)
-      expect(screen.getByText('app.appSelector.params'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.params')).toBeInTheDocument()
     })
   })
 })
@@ -1515,12 +1477,12 @@ describe('AppSelector', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should render trigger component', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByText('app.appSelector.placeholder'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.placeholder')).toBeInTheDocument()
     })
 
     it('should show selected app info when value is provided', () => {
@@ -1531,20 +1493,19 @@ describe('AppSelector', () => {
         />,
       )
       // Should show the app trigger with app info
-      // Should show the app trigger with app info
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
   describe('Props', () => {
     it('should handle different placement values', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} placement="top" />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle different offset values', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} offset={10} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle disabled state', () => {
@@ -1552,13 +1513,12 @@ describe('AppSelector', () => {
       const trigger = screen.getByTestId('portal-trigger')
       fireEvent.click(trigger)
       // Portal should remain closed when disabled
-      // Portal should remain closed when disabled
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
     })
 
     it('should handle scope prop', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} scope="workflow" />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle value with inputs', () => {
@@ -1568,7 +1528,7 @@ describe('AppSelector', () => {
           value={{ app_id: 'app-1', inputs: { name: 'test' }, files: [] }}
         />,
       )
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle value with files', () => {
@@ -1578,7 +1538,7 @@ describe('AppSelector', () => {
           value={{ app_id: 'app-1', inputs: {}, files: [{ id: 'file-1' }] }}
         />,
       )
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
@@ -1587,11 +1547,10 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       const trigger = screen.getAllByTestId('portal-trigger')[0]
-      fireEvent.click(trigger!)
+      fireEvent.click(trigger)
 
       // The portal state should update synchronously - get the first one (outer portal)
-      // The portal state should update synchronously - get the first one (outer portal)
-      expect(screen.getAllByTestId('portal-to-follow-elem')[0])!.toHaveAttribute('data-open', 'true')
+      expect(screen.getAllByTestId('portal-to-follow-elem')[0]).toHaveAttribute('data-open', 'true')
     })
 
     it('should not toggle isShow when disabled', () => {
@@ -1600,7 +1559,7 @@ describe('AppSelector', () => {
       const trigger = screen.getByTestId('portal-trigger')
       fireEvent.click(trigger)
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
     })
 
     it('should manage search text state', () => {
@@ -1610,8 +1569,7 @@ describe('AppSelector', () => {
       fireEvent.click(trigger)
 
       // Portal content should be visible after click
-      // Portal content should be visible after click
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should render correctly during load more setup', () => {
@@ -1621,8 +1579,7 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Trigger should be rendered
-      // Trigger should be rendered
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
     })
   })
 
@@ -1635,7 +1592,7 @@ describe('AppSelector', () => {
       // Open the portal
       fireEvent.click(screen.getByTestId('portal-trigger'))
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should call onSelect with correct value structure', () => {
@@ -1649,8 +1606,7 @@ describe('AppSelector', () => {
       )
 
       // The component should maintain the correct value structure
-      // The component should maintain the correct value structure
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should clear inputs when selecting different app', () => {
@@ -1664,8 +1620,7 @@ describe('AppSelector', () => {
       )
 
       // Component renders with existing value
-      // Component renders with existing value
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should preserve inputs when selecting same app', () => {
@@ -1678,7 +1633,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
@@ -1692,7 +1647,7 @@ describe('AppSelector', () => {
       }
 
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should memoize currentAppInfo correctly', () => {
@@ -1707,7 +1662,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should memoize formattedValue correctly', () => {
@@ -1718,7 +1673,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should be wrapped with React.memo', () => {
@@ -1735,7 +1690,7 @@ describe('AppSelector', () => {
         </QueryClientProvider>,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
@@ -1743,7 +1698,7 @@ describe('AppSelector', () => {
     it('should handle load more when hasMore is true', async () => {
       mockHasNextPage = true
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should not trigger load more when already loading', async () => {
@@ -1769,7 +1724,7 @@ describe('AppSelector', () => {
         vi.advanceTimersByTime(500)
       })
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should render load more area when hasMore is true', () => {
@@ -1780,11 +1735,10 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open the portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Should render without errors
-      // Should render without errors
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should handle fetchNextPage rejection gracefully in handleLoadMore', async () => {
@@ -1794,8 +1748,7 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Should not crash even if fetchNextPage rejects
-      // Should not crash even if fetchNextPage rejects
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should call fetchNextPage when intersection observer triggers handleLoadMore', async () => {
@@ -1806,11 +1759,11 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Open the inner app picker portal
       const triggers = screen.getAllByTestId('portal-trigger')
-      fireEvent.click(triggers[1]!)
+      fireEvent.click(triggers[1])
 
       // Simulate intersection to trigger handleLoadMore
       triggerIntersection([{ isIntersecting: true } as IntersectionObserverEntry])
@@ -1827,9 +1780,9 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open portals
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
       const triggers = screen.getAllByTestId('portal-trigger')
-      fireEvent.click(triggers[1]!)
+      fireEvent.click(triggers[1])
 
       // Trigger first intersection
       triggerIntersection([{ isIntersecting: true } as IntersectionObserverEntry])
@@ -1853,9 +1806,9 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open portals
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
       const triggers = screen.getAllByTestId('portal-trigger')
-      fireEvent.click(triggers[1]!)
+      fireEvent.click(triggers[1])
 
       // Trigger intersection
       triggerIntersection([{ isIntersecting: true } as IntersectionObserverEntry])
@@ -1872,9 +1825,9 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open portals
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
       const triggers = screen.getAllByTestId('portal-trigger')
-      fireEvent.click(triggers[1]!)
+      fireEvent.click(triggers[1])
 
       // Trigger intersection
       triggerIntersection([{ isIntersecting: true } as IntersectionObserverEntry])
@@ -1894,7 +1847,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle form change without image file', () => {
@@ -1907,7 +1860,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should extract #image# from inputs and add to files array', () => {
@@ -1921,7 +1874,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should preserve existing files when no #image# in inputs', () => {
@@ -1934,7 +1887,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
@@ -1954,9 +1907,9 @@ describe('AppSelector', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should preserve inputs when selecting the same app', () => {
@@ -1973,7 +1926,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle app selection with empty value', () => {
@@ -1991,34 +1944,34 @@ describe('AppSelector', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
   })
 
   describe('Edge Cases', () => {
     it('should handle undefined value', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} value={undefined} />)
-      expect(screen.getByText('app.appSelector.placeholder'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.placeholder')).toBeInTheDocument()
     })
 
     it('should handle empty pages array', () => {
       mockAppListData = { pages: [] }
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle undefined data', () => {
       mockAppListData = undefined
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle loading state', () => {
       mockIsLoading = true
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle app not found in displayedApps', () => {
@@ -2033,7 +1986,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle value with empty inputs and files', () => {
@@ -2044,7 +1997,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
@@ -2056,8 +2009,7 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Should not crash
-      // Should not crash
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 })
@@ -2091,11 +2043,10 @@ describe('AppSelector Integration', () => {
       renderWithQueryClient(<AppSelector onSelect={onSelect} />)
 
       // 1. Click trigger to open picker - get first trigger (outer portal)
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Get the first portal element (outer portal)
-      // Get the first portal element (outer portal)
-      expect(screen.getAllByTestId('portal-to-follow-elem')[0])!.toHaveAttribute('data-open', 'true')
+      expect(screen.getAllByTestId('portal-to-follow-elem')[0]).toHaveAttribute('data-open', 'true')
     })
 
     it('should handle app change with input preservation logic', () => {
@@ -2107,7 +2058,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
   })
 
@@ -2116,8 +2067,7 @@ describe('AppSelector Integration', () => {
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
       // AppTrigger should show placeholder when no app selected
-      // AppTrigger should show placeholder when no app selected
-      expect(screen.getByText('app.appSelector.placeholder'))!.toBeInTheDocument()
+      expect(screen.getByText('app.appSelector.placeholder')).toBeInTheDocument()
     })
 
     it('should pass correct props to AppPicker', () => {
@@ -2125,7 +2075,7 @@ describe('AppSelector Integration', () => {
 
       fireEvent.click(screen.getByTestId('portal-trigger'))
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
   })
 
@@ -2138,7 +2088,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
     })
 
     it('should handle search filtering through app list', () => {
@@ -2146,7 +2096,7 @@ describe('AppSelector Integration', () => {
 
       fireEvent.click(screen.getByTestId('portal-trigger'))
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
   })
 
@@ -2165,13 +2115,13 @@ describe('AppSelector Integration', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // The inner AppPicker portal is closed by default (isShowChooseApp = false)
       // We need to click on the inner trigger to open it
       const innerTriggers = screen.getAllByTestId('portal-trigger')
       // The second trigger is the inner AppPicker trigger
-      fireEvent.click(innerTriggers[1]!)
+      fireEvent.click(innerTriggers[1])
 
       // Now the inner portal should be open and show the app list
       // Find and click on app-2
@@ -2200,16 +2150,16 @@ describe('AppSelector Integration', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Click on the inner trigger to open app picker
       const innerTriggers = screen.getAllByTestId('portal-trigger')
-      fireEvent.click(innerTriggers[1]!)
+      fireEvent.click(innerTriggers[1])
 
       // Click on the same app - need to get the one in the app list, not the trigger
       const appItems = screen.getAllByText('App 1')
       // The last one should be in the dropdown list
-      fireEvent.click(appItems[appItems.length - 1]!)
+      fireEvent.click(appItems[appItems.length - 1])
 
       // onSelect should be called with preserved inputs since it's the same app
       expect(onSelect).toHaveBeenCalledWith({
@@ -2233,15 +2183,15 @@ describe('AppSelector Integration', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Click on inner trigger to open app picker
       const innerTriggers = screen.getAllByTestId('portal-trigger')
-      fireEvent.click(innerTriggers[1]!)
+      fireEvent.click(innerTriggers[1])
 
       // Click on an app from the dropdown
       const app1Elements = screen.getAllByText('App 1')
-      fireEvent.click(app1Elements[app1Elements.length - 1]!)
+      fireEvent.click(app1Elements[app1Elements.length - 1])
 
       // onSelect should be called with new app and empty inputs/files
       expect(onSelect).toHaveBeenCalledWith({
@@ -2261,9 +2211,9 @@ describe('AppSelector Integration', () => {
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
       // Open the portal to render the app picker
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should stay stable after fetchNextPage completes', async () => {
@@ -2273,9 +2223,9 @@ describe('AppSelector Integration', () => {
 
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
     })
 
     it('should not call fetchNextPage when conditions prevent it', () => {
@@ -2284,7 +2234,7 @@ describe('AppSelector Integration', () => {
 
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // fetchNextPage should not be called
       expect(mockFetchNextPage).not.toHaveBeenCalled()
@@ -2306,7 +2256,7 @@ describe('AppSelector Integration', () => {
       )
 
       // Open portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // formattedValue should include #image# from files
       expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
@@ -2325,7 +2275,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
     })
@@ -2343,7 +2293,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
     })
@@ -2374,12 +2324,12 @@ describe('AppSelector Integration', () => {
       )
 
       // Open portal to render AppInputsPanel
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Find and interact with the form input (may not exist if schema is empty)
       const formInputs = screen.queryAllByPlaceholderText('FormInputField')
       if (formInputs.length > 0) {
-        fireEvent.change(formInputs[0]!, { target: { value: 'test value' } })
+        fireEvent.change(formInputs[0], { target: { value: 'test value' } })
 
         // handleFormChange in index.tsx should have been called
         expect(onSelect).toHaveBeenCalledWith({
@@ -2426,12 +2376,12 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Find file uploader and trigger upload - the #image# field will be extracted
       const uploadBtns = screen.queryAllByTestId('upload-file-btn')
       if (uploadBtns.length > 0) {
-        fireEvent.click(uploadBtns[0]!)
+        fireEvent.click(uploadBtns[0])
         // handleFormChange should extract #image# and convert to files
         expect(onSelect).toHaveBeenCalled()
       }
@@ -2464,12 +2414,12 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Find form input (may not exist if schema is empty)
       const inputs = screen.queryAllByPlaceholderText('PreserveField')
       if (inputs.length > 0) {
-        fireEvent.change(inputs[0]!, { target: { value: 'updated name' } })
+        fireEvent.change(inputs[0], { target: { value: 'updated name' } })
 
         // onSelect should be called preserving existing files (no #image# in inputs)
         expect(onSelect).toHaveBeenCalledWith({
@@ -2515,7 +2465,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       // Try to find and click the upload button which triggers #image# form change
       const uploadBtn = screen.queryByTestId('upload-file-btn')
@@ -2549,11 +2499,11 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('portal-trigger')[0])
 
       const inputs = screen.queryAllByPlaceholderText('SimpleInput')
       if (inputs.length > 0) {
-        fireEvent.change(inputs[0]!, { target: { value: 'changed' } })
+        fireEvent.change(inputs[0], { target: { value: 'changed' } })
         // handleFormChange should preserve existing files when no #image# in inputs
         expect(onSelect).toHaveBeenCalledWith({
           app_id: 'app-1',
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
index 41140ac63b..c4cb4f4da8 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -78,7 +78,7 @@ const AppPicker: FC<Props> = ({
 
   const handleIntersection = useCallback((entries: IntersectionObserverEntry[]) => {
     const target = entries[0]
-    if (!target!.isIntersecting || loadingRef.current || !hasMore || isLoading)
+    if (!target.isIntersecting || loadingRef.current || !hasMore || isLoading)
       return
 
     loadingRef.current = true
@@ -188,7 +188,7 @@ const AppPicker: FC<Props> = ({
             {apps.map(app => (
               <div
                 key={app.id}
-                className="flex cursor-pointer items-center gap-3 rounded-lg py-1 pr-3 pl-2 hover:bg-state-base-hover"
+                className="flex cursor-pointer items-center gap-3 rounded-lg py-1 pl-2 pr-3 hover:bg-state-base-hover"
                 onClick={() => onSelect(app)}
               >
                 <AppIcon
@@ -199,7 +199,7 @@ const AppPicker: FC<Props> = ({
                   background={app.icon_background}
                   imageUrl={app.icon_url}
                 />
-                <div title={`${app.name} (${app.id})`} className="grow system-sm-medium text-components-input-text-filled">
+                <div title={`${app.name} (${app.id})`} className="grow text-components-input-text-filled system-sm-medium">
                   <span className="mr-1">{app.name}</span>
                   <span className="text-text-tertiary">
                     (
@@ -207,7 +207,7 @@ const AppPicker: FC<Props> = ({
                     )
                   </span>
                 </div>
-                <div className="shrink-0 system-2xs-medium-uppercase text-text-tertiary">{getAppType(app)}</div>
+                <div className="shrink-0 text-text-tertiary system-2xs-medium-uppercase">{getAppType(app)}</div>
               </div>
             ))}
             <div ref={observerTargetRef} className="h-4 w-full">
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
index 97e144af6f..abd47b4592 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -161,7 +161,7 @@ const AppSelector: FC<Props> = ({
         <PortalToFollowElemContent className="z-1000">
           <div className="relative min-h-20 w-[389px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
             <div className="flex flex-col gap-1 px-4 py-3">
-              <div className="flex h-6 items-center system-sm-semibold text-text-secondary">{t('appSelector.label', { ns: 'app' })}</div>
+              <div className="flex h-6 items-center text-text-secondary system-sm-semibold">{t('appSelector.label', { ns: 'app' })}</div>
               <AppPicker
                 placement="bottom"
                 offset={offset}
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx
index e423359872..c3f7f221b5 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx
@@ -161,8 +161,7 @@ describe('TTSParamsPanel', () => {
       const { container } = render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(container)!.toBeInTheDocument()
+      expect(container).toBeInTheDocument()
     })
 
     it('should render language label', () => {
@@ -173,8 +172,7 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByText('appDebug.voice.voiceSettings.language'))!.toBeInTheDocument()
+      expect(screen.getByText('appDebug.voice.voiceSettings.language')).toBeInTheDocument()
     })
 
     it('should render voice label', () => {
@@ -185,8 +183,7 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByText('appDebug.voice.voiceSettings.voice'))!.toBeInTheDocument()
+      expect(screen.getByText('appDebug.voice.voiceSettings.voice')).toBeInTheDocument()
     })
 
     it('should render two Select components', () => {
@@ -210,7 +207,7 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const values = screen.getAllByTestId('selected-value')
-      expect(values[0])!.toHaveTextContent('zh-Hans')
+      expect(values[0]).toHaveTextContent('zh-Hans')
     })
 
     it('should render voice select with correct value', () => {
@@ -222,7 +219,7 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const values = screen.getAllByTestId('selected-value')
-      expect(values[1])!.toHaveTextContent('echo')
+      expect(values[1]).toHaveTextContent('echo')
     })
 
     it('should only show supported languages in language select', () => {
@@ -233,10 +230,9 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-en-US'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-zh-Hans'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-ja-JP'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-en-US')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-zh-Hans')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-ja-JP')).toBeInTheDocument()
       expect(screen.queryByTestId('select-item-unsupported-lang')).not.toBeInTheDocument()
     })
 
@@ -248,10 +244,9 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-alloy'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-echo'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-fable'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-alloy')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-echo')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-fable')).toBeInTheDocument()
     })
   })
 
@@ -265,9 +260,8 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('tts-language-select-trigger'))!.toHaveAttribute('data-class', 'w-full')
-      expect(screen.getByTestId('tts-voice-select-trigger'))!.toHaveAttribute('data-class', 'w-full')
+      expect(screen.getByTestId('tts-language-select-trigger')).toHaveAttribute('data-class', 'w-full')
+      expect(screen.getByTestId('tts-voice-select-trigger')).toHaveAttribute('data-class', 'w-full')
     })
 
     it('should apply popup className to SelectContent', () => {
@@ -279,8 +273,8 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const contents = screen.getAllByTestId('select-content')
-      expect(contents[0])!.toHaveAttribute('data-popup-class', 'w-[354px]')
-      expect(contents[1])!.toHaveAttribute('data-popup-class', 'w-[354px]')
+      expect(contents[0]).toHaveAttribute('data-popup-class', 'w-[354px]')
+      expect(contents[1]).toHaveAttribute('data-popup-class', 'w-[354px]')
     })
   })
 
@@ -402,37 +396,6 @@ describe('TTSParamsPanel', () => {
       // Act
       render(<TTSParamsPanel {...props} />)
 
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
-      // Assert - no voice items should be rendered
       // Assert - no voice items should be rendered
       expect(screen.queryByTestId('select-item-alloy')).not.toBeInTheDocument()
       expect(screen.queryByTestId('select-item-echo')).not.toBeInTheDocument()
@@ -450,37 +413,6 @@ describe('TTSParamsPanel', () => {
       // Act
       render(<TTSParamsPanel {...props} />)
 
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
       // Assert
       expect(screen.queryByTestId('select-item-alloy')).not.toBeInTheDocument()
     })
@@ -498,9 +430,8 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-voice-1'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-voice-2'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-voice-1')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-voice-2')).toBeInTheDocument()
     })
 
     it('should handle currentModel with empty voices array', () => {
@@ -513,7 +444,7 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert - no voice items (except language items)
-      expect(screen.getAllByTestId('select-content')[1]!.children).toHaveLength(0)
+      expect(screen.getAllByTestId('select-content')[1].children).toHaveLength(0)
       expect(screen.queryByTestId('select-item-alloy')).not.toBeInTheDocument()
     })
 
@@ -529,8 +460,7 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-single-voice'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-single-voice')).toBeInTheDocument()
     })
   })
 
@@ -545,7 +475,7 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const values = screen.getAllByTestId('selected-value')
-      expect(values[0])!.toHaveTextContent('')
+      expect(values[0]).toHaveTextContent('')
     })
 
     it('should handle empty voice value', () => {
@@ -557,7 +487,7 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const values = screen.getAllByTestId('selected-value')
-      expect(values[1])!.toHaveTextContent('')
+      expect(values[1]).toHaveTextContent('')
     })
 
     it('should handle many voices', () => {
@@ -574,9 +504,8 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-voice-0'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-voice-19'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-voice-0')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-voice-19')).toBeInTheDocument()
     })
 
     it('should handle voice with special characters in mode', () => {
@@ -591,8 +520,7 @@ describe('TTSParamsPanel', () => {
       render(<TTSParamsPanel {...props} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-voice-with_special.chars'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-voice-with_special.chars')).toBeInTheDocument()
     })
 
     it('should handle onChange not being called multiple times', () => {
@@ -618,13 +546,13 @@ describe('TTSParamsPanel', () => {
       // Act
       const { rerender } = render(<TTSParamsPanel {...props} />)
       const values = screen.getAllByTestId('selected-value')
-      expect(values[0])!.toHaveTextContent('en-US')
+      expect(values[0]).toHaveTextContent('en-US')
 
       rerender(<TTSParamsPanel {...props} language="zh-Hans" />)
 
       // Assert
       const updatedValues = screen.getAllByTestId('selected-value')
-      expect(updatedValues[0])!.toHaveTextContent('zh-Hans')
+      expect(updatedValues[0]).toHaveTextContent('zh-Hans')
     })
 
     it('should update when voice prop changes', () => {
@@ -634,13 +562,13 @@ describe('TTSParamsPanel', () => {
       // Act
       const { rerender } = render(<TTSParamsPanel {...props} />)
       const values = screen.getAllByTestId('selected-value')
-      expect(values[1])!.toHaveTextContent('alloy')
+      expect(values[1]).toHaveTextContent('alloy')
 
       rerender(<TTSParamsPanel {...props} voice="echo" />)
 
       // Assert
       const updatedValues = screen.getAllByTestId('selected-value')
-      expect(updatedValues[1])!.toHaveTextContent('echo')
+      expect(updatedValues[1]).toHaveTextContent('echo')
     })
 
     it('should update voice list when currentModel changes', () => {
@@ -652,7 +580,7 @@ describe('TTSParamsPanel', () => {
 
       // Act
       const { rerender } = render(<TTSParamsPanel {...props} />)
-      expect(screen.getByTestId('select-item-alloy'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-alloy')).toBeInTheDocument()
       expect(screen.queryByTestId('select-item-nova')).not.toBeInTheDocument()
 
       const newModel = createCurrentModel([
@@ -662,9 +590,8 @@ describe('TTSParamsPanel', () => {
       rerender(<TTSParamsPanel {...props} currentModel={newModel} />)
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('select-item-alloy'))!.toBeInTheDocument()
-      expect(screen.getByTestId('select-item-nova'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-alloy')).toBeInTheDocument()
+      expect(screen.getByTestId('select-item-nova')).toBeInTheDocument()
     })
 
     it('should handle currentModel becoming null', () => {
@@ -673,41 +600,10 @@ describe('TTSParamsPanel', () => {
 
       // Act
       const { rerender } = render(<TTSParamsPanel {...props} />)
-      expect(screen.getByTestId('select-item-alloy'))!.toBeInTheDocument()
+      expect(screen.getByTestId('select-item-alloy')).toBeInTheDocument()
 
       rerender(<TTSParamsPanel {...props} currentModel={null} />)
 
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
       // Assert
       expect(screen.queryByTestId('select-item-alloy')).not.toBeInTheDocument()
     })
@@ -740,7 +636,7 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const languageLabel = screen.getByText('appDebug.voice.voiceSettings.language')
-      expect(languageLabel)!.toHaveClass('system-sm-semibold')
+      expect(languageLabel).toHaveClass('system-sm-semibold')
     })
 
     it('should have proper label structure for voice select', () => {
@@ -752,7 +648,7 @@ describe('TTSParamsPanel', () => {
 
       // Assert
       const voiceLabel = screen.getByText('appDebug.voice.voiceSettings.voice')
-      expect(voiceLabel)!.toHaveClass('system-sm-semibold')
+      expect(voiceLabel).toHaveClass('system-sm-semibold')
     })
   })
 })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/index.spec.tsx
index 19a2d5a9f1..d41dfaa7d0 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/index.spec.tsx
@@ -100,8 +100,8 @@ describe('SubscriptionList', () => {
     it('should render list view by default', () => {
       render(<SubscriptionList />)
 
-      expect(screen.getByText(/pluginTrigger\.subscription\.listNum/))!.toBeInTheDocument()
-      expect(screen.getByText('Subscription One'))!.toBeInTheDocument()
+      expect(screen.getByText(/pluginTrigger\.subscription\.listNum/)).toBeInTheDocument()
+      expect(screen.getByText('Subscription One')).toBeInTheDocument()
     })
 
     it('should render loading state when subscriptions are loading', () => {
@@ -112,7 +112,7 @@ describe('SubscriptionList', () => {
 
       render(<SubscriptionList />)
 
-      expect(screen.getByRole('status'))!.toBeInTheDocument()
+      expect(screen.getByRole('status')).toBeInTheDocument()
       expect(screen.queryByText('Subscription One')).not.toBeInTheDocument()
     })
 
@@ -121,7 +121,7 @@ describe('SubscriptionList', () => {
 
       render(<SubscriptionList pluginDetail={pluginDetail} />)
 
-      expect(screen.getByText('Subscription One'))!.toBeInTheDocument()
+      expect(screen.getByText('Subscription One')).toBeInTheDocument()
     })
 
     it('should render without list entries when subscriptions are empty', () => {
@@ -141,7 +141,7 @@ describe('SubscriptionList', () => {
     it('should render selector view when mode is selector', () => {
       render(<SubscriptionList mode={SubscriptionListMode.SELECTOR} />)
 
-      expect(screen.getByText('Subscription One'))!.toBeInTheDocument()
+      expect(screen.getByText('Subscription One')).toBeInTheDocument()
     })
 
     it('should visually distinguish selected subscription from unselected', () => {
@@ -182,7 +182,7 @@ describe('SubscriptionList', () => {
       fireEvent.click(screen.getByRole('button', { name: 'Subscription One' }))
 
       expect(onSelect).toHaveBeenCalledTimes(1)
-      const [selectedSubscription, callback] = (onSelect.mock.calls[0] ?? []) as [any, any]
+      const [selectedSubscription, callback] = onSelect.mock.calls[0]
       expect(selectedSubscription).toMatchObject({ id: 'sub-1', name: 'Subscription One' })
       expect(typeof callback).toBe('function')
 
@@ -212,7 +212,7 @@ describe('SubscriptionList', () => {
       fireEvent.click(deleteButton)
 
       expect(onSelect).not.toHaveBeenCalled()
-      expect(screen.getByText(/pluginTrigger\.subscription\.list\.item\.actions\.deleteConfirm\.title/))!.toBeInTheDocument()
+      expect(screen.getByText(/pluginTrigger\.subscription\.list\.item\.actions\.deleteConfirm\.title/)).toBeInTheDocument()
     })
   })
 
@@ -222,7 +222,7 @@ describe('SubscriptionList', () => {
 
       render(<SubscriptionList />)
 
-      expect(await screen.findByText('Something went wrong'))!.toBeInTheDocument()
+      expect(await screen.findByText('Something went wrong')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
index 4e6be7d81c..8a3642d043 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
@@ -137,7 +137,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
         asChild={false}
       />
     ))
-    const varInput = value[variable]!.value
+    const varInput = value[variable].value
     const {
       isString,
       isNumber,
@@ -179,7 +179,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
               >
                 <div
                   className="ml-0.5 cursor-pointer rounded-sm p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
-                  onClick={() => showSchema(input_schema as SchemaRoot, fieldTitle!)}
+                  onClick={() => showSchema(input_schema as SchemaRoot, fieldTitle)}
                 >
                   <RiBracesLine className="size-3.5" />
                 </div>
diff --git a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
index 0b0d9c7fc8..82c4d69d1b 100644
--- a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
+++ b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
@@ -253,11 +253,10 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
-      // Assert
-      expect(screen.getByText('plugin.action.delete'))!.toBeInTheDocument()
+      expect(screen.getByText('plugin.action.delete')).toBeInTheDocument()
     })
 
     it('should display plugin name in delete confirm content', () => {
@@ -271,11 +270,10 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
-      // Assert
-      expect(screen.getByText('my-awesome-plugin'))!.toBeInTheDocument()
+      expect(screen.getByText('my-awesome-plugin')).toBeInTheDocument()
     })
 
     it('should hide confirm modal when cancel is clicked', () => {
@@ -288,8 +286,8 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
-      expect(screen.getByText('plugin.action.delete'))!.toBeInTheDocument()
+      fireEvent.click(getActionButtons()[0])
+      expect(screen.getByText('plugin.action.delete')).toBeInTheDocument()
 
       fireEvent.click(getDeleteCancelButton())
 
@@ -310,7 +308,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       // Assert
@@ -332,7 +330,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       // Assert
@@ -354,7 +352,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       // Assert
@@ -376,7 +374,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       // Assert
@@ -403,12 +401,12 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       // Assert - Loading state
       await waitFor(() => {
-        expect(getDeleteConfirmButton())!.toBeDisabled()
+        expect(getDeleteConfirmButton()).toBeDisabled()
       })
 
       // Resolve and check modal closes
@@ -436,14 +434,13 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
-      // Assert
-      expect(screen.getByTestId('plugin-info-modal'))!.toBeInTheDocument()
-      expect(screen.getByTestId('plugin-info-modal'))!.toHaveAttribute('data-repo', 'owner/repo-name')
-      expect(screen.getByTestId('plugin-info-modal'))!.toHaveAttribute('data-release', '2.0.0')
-      expect(screen.getByTestId('plugin-info-modal'))!.toHaveAttribute('data-package', 'my-package.difypkg')
+      expect(screen.getByTestId('plugin-info-modal')).toBeInTheDocument()
+      expect(screen.getByTestId('plugin-info-modal')).toHaveAttribute('data-repo', 'owner/repo-name')
+      expect(screen.getByTestId('plugin-info-modal')).toHaveAttribute('data-release', '2.0.0')
+      expect(screen.getByTestId('plugin-info-modal')).toHaveAttribute('data-package', 'my-package.difypkg')
     })
 
     it('should hide plugin info modal when close is clicked', () => {
@@ -456,42 +453,11 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
-      expect(screen.getByTestId('plugin-info-modal'))!.toBeInTheDocument()
+      fireEvent.click(getActionButtons()[0])
+      expect(screen.getByTestId('plugin-info-modal')).toBeInTheDocument()
 
       fireEvent.click(screen.getByTestId('close-plugin-info'))
 
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
-      // Assert
       // Assert
       expect(screen.queryByTestId('plugin-info-modal')).not.toBeInTheDocument()
     })
@@ -515,7 +481,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
       await waitFor(() => {
@@ -541,7 +507,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
       await waitFor(() => {
@@ -560,7 +526,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
       await waitFor(() => {
@@ -584,7 +550,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert - toast is called with the translated payload
       await waitFor(() => {
@@ -615,7 +581,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
       await waitFor(() => {
@@ -655,7 +621,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Wait for modal to be called
       await waitFor(() => {
@@ -663,7 +629,7 @@ describe('Action Component', () => {
       })
 
       // Invoke the callback
-      const call = mockSetShowUpdatePluginModal.mock.calls[0]![0]
+      const call = mockSetShowUpdatePluginModal.mock.calls[0][0]
       call.onSaveCallback()
 
       // Assert
@@ -687,7 +653,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
       await waitFor(() => {
@@ -712,7 +678,7 @@ describe('Action Component', () => {
 
       // Act - First render and delete
       const { rerender } = render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
@@ -722,7 +688,7 @@ describe('Action Component', () => {
       // Re-render with same props
       mockUninstallPlugin.mockClear()
       rerender(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
@@ -748,7 +714,7 @@ describe('Action Component', () => {
 
       // Act
       const { rerender } = render(<Action {...props1} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
@@ -757,7 +723,7 @@ describe('Action Component', () => {
 
       mockUninstallPlugin.mockClear()
       rerender(<Action {...props2} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
@@ -785,7 +751,7 @@ describe('Action Component', () => {
 
       // Act
       const { rerender } = render(<Action {...props1} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
@@ -794,7 +760,7 @@ describe('Action Component', () => {
       expect(onDelete2).not.toHaveBeenCalled()
 
       rerender(<Action {...props2} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
@@ -836,7 +802,7 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert - Should use author and pluginName as fallback
       await waitFor(() => {
@@ -860,12 +826,11 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
       fireEvent.click(getDeleteConfirmButton())
 
       // The confirm button should be disabled during deletion
-      // The confirm button should be disabled during deletion
-      expect(getDeleteConfirmButton())!.toBeDisabled()
+      expect(getDeleteConfirmButton()).toBeDisabled()
 
       // Resolve the deletion
       resolveFirst!({ success: true })
@@ -886,11 +851,10 @@ describe('Action Component', () => {
 
       // Act
       render(<Action {...props} />)
-      fireEvent.click(getActionButtons()[0]!)
+      fireEvent.click(getActionButtons()[0])
 
       // Assert
-      // Assert
-      expect(screen.getByText('plugin-with-special@chars#123'))!.toBeInTheDocument()
+      expect(screen.getByText('plugin-with-special@chars#123')).toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
index c87673b750..8c33894929 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
@@ -83,8 +83,8 @@ describe('usePluginTaskStatus Hook', () => {
 
       render(<TestComponent />)
 
-      expect(screen.getByTestId('running-count'))!.toHaveTextContent('1')
-      expect(screen.getByTestId('running-id'))!.toHaveTextContent(runningPlugin.plugin_unique_identifier)
+      expect(screen.getByTestId('running-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('running-id')).toHaveTextContent(runningPlugin.plugin_unique_identifier)
     })
 
     it('should categorize success plugins correctly', () => {
@@ -103,8 +103,8 @@ describe('usePluginTaskStatus Hook', () => {
 
       render(<TestComponent />)
 
-      expect(screen.getByTestId('success-count'))!.toHaveTextContent('1')
-      expect(screen.getByTestId('success-id'))!.toHaveTextContent(successPlugin.plugin_unique_identifier)
+      expect(screen.getByTestId('success-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('success-id')).toHaveTextContent(successPlugin.plugin_unique_identifier)
     })
 
     it('should categorize error plugins correctly', () => {
@@ -123,8 +123,8 @@ describe('usePluginTaskStatus Hook', () => {
 
       render(<TestComponent />)
 
-      expect(screen.getByTestId('error-count'))!.toHaveTextContent('1')
-      expect(screen.getByTestId('error-id'))!.toHaveTextContent(errorPlugin.plugin_unique_identifier)
+      expect(screen.getByTestId('error-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('error-id')).toHaveTextContent(errorPlugin.plugin_unique_identifier)
     })
 
     it('should categorize mixed plugins correctly', () => {
@@ -149,10 +149,10 @@ describe('usePluginTaskStatus Hook', () => {
 
       render(<TestComponent />)
 
-      expect(screen.getByTestId('running'))!.toHaveTextContent('1')
-      expect(screen.getByTestId('success'))!.toHaveTextContent('1')
-      expect(screen.getByTestId('error'))!.toHaveTextContent('1')
-      expect(screen.getByTestId('total'))!.toHaveTextContent('3')
+      expect(screen.getByTestId('running')).toHaveTextContent('1')
+      expect(screen.getByTestId('success')).toHaveTextContent('1')
+      expect(screen.getByTestId('error')).toHaveTextContent('1')
+      expect(screen.getByTestId('total')).toHaveTextContent('3')
     })
   })
 
@@ -175,11 +175,11 @@ describe('usePluginTaskStatus Hook', () => {
 
       render(<TestComponent />)
 
-      expect(screen.getByTestId('isInstalling'))!.toHaveTextContent('true')
-      expect(screen.getByTestId('isInstallingWithSuccess'))!.toHaveTextContent('false')
-      expect(screen.getByTestId('isInstallingWithError'))!.toHaveTextContent('false')
-      expect(screen.getByTestId('isSuccess'))!.toHaveTextContent('false')
-      expect(screen.getByTestId('isFailed'))!.toHaveTextContent('false')
+      expect(screen.getByTestId('isInstalling')).toHaveTextContent('true')
+      expect(screen.getByTestId('isInstallingWithSuccess')).toHaveTextContent('false')
+      expect(screen.getByTestId('isInstallingWithError')).toHaveTextContent('false')
+      expect(screen.getByTestId('isSuccess')).toHaveTextContent('false')
+      expect(screen.getByTestId('isFailed')).toHaveTextContent('false')
     })
 
     it('should set isInstallingWithSuccess when running and success plugins exist', () => {
@@ -194,7 +194,7 @@ describe('usePluginTaskStatus Hook', () => {
       }
 
       render(<TestComponent />)
-      expect(screen.getByTestId('flag'))!.toHaveTextContent('true')
+      expect(screen.getByTestId('flag')).toHaveTextContent('true')
     })
 
     it('should set isInstallingWithError when running and error plugins exist', () => {
@@ -209,7 +209,7 @@ describe('usePluginTaskStatus Hook', () => {
       }
 
       render(<TestComponent />)
-      expect(screen.getByTestId('flag'))!.toHaveTextContent('true')
+      expect(screen.getByTestId('flag')).toHaveTextContent('true')
     })
 
     it('should set isSuccess when all plugins succeeded', () => {
@@ -224,7 +224,7 @@ describe('usePluginTaskStatus Hook', () => {
       }
 
       render(<TestComponent />)
-      expect(screen.getByTestId('flag'))!.toHaveTextContent('true')
+      expect(screen.getByTestId('flag')).toHaveTextContent('true')
     })
 
     it('should set isFailed when no running plugins and some failed', () => {
@@ -239,7 +239,7 @@ describe('usePluginTaskStatus Hook', () => {
       }
 
       render(<TestComponent />)
-      expect(screen.getByTestId('flag'))!.toHaveTextContent('true')
+      expect(screen.getByTestId('flag')).toHaveTextContent('true')
     })
   })
 
@@ -296,12 +296,12 @@ describe('TaskStatusIndicator Component', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<TaskStatusIndicator {...defaultProps} />)
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should render with correct id', () => {
       render(<TaskStatusIndicator {...defaultProps} />)
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
   })
 
@@ -309,18 +309,17 @@ describe('TaskStatusIndicator Component', () => {
     it('should show downloading icon when installing', () => {
       render(<TaskStatusIndicator {...defaultProps} isInstalling />)
       // DownloadingIcon is rendered when isInstalling is true
-      // DownloadingIcon is rendered when isInstalling is true
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show downloading icon when installing with error', () => {
       render(<TaskStatusIndicator {...defaultProps} isInstallingWithError />)
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show install icon when not installing', () => {
       render(<TaskStatusIndicator {...defaultProps} isSuccess />)
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
   })
 
@@ -334,7 +333,7 @@ describe('TaskStatusIndicator Component', () => {
           totalPluginsLength={3}
         />,
       )
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show progress circle when installing with success', () => {
@@ -346,7 +345,7 @@ describe('TaskStatusIndicator Component', () => {
           totalPluginsLength={3}
         />,
       )
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show error progress circle when installing with error', () => {
@@ -358,7 +357,7 @@ describe('TaskStatusIndicator Component', () => {
           totalPluginsLength={3}
         />,
       )
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show success icon when all completed successfully', () => {
@@ -371,12 +370,12 @@ describe('TaskStatusIndicator Component', () => {
           totalPluginsLength={3}
         />,
       )
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show error icon when failed', () => {
       render(<TaskStatusIndicator {...defaultProps} isFailed />)
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
   })
 
@@ -384,19 +383,19 @@ describe('TaskStatusIndicator Component', () => {
     it('should apply error styles when installing with error', () => {
       render(<TaskStatusIndicator {...defaultProps} isInstallingWithError />)
       const trigger = document.getElementById('plugin-task-trigger')
-      expect(trigger)!.toHaveClass('bg-state-destructive-hover')
+      expect(trigger).toHaveClass('bg-state-destructive-hover')
     })
 
     it('should apply error styles when failed', () => {
       render(<TaskStatusIndicator {...defaultProps} isFailed />)
       const trigger = document.getElementById('plugin-task-trigger')
-      expect(trigger)!.toHaveClass('bg-state-destructive-hover')
+      expect(trigger).toHaveClass('bg-state-destructive-hover')
     })
 
     it('should apply cursor-pointer when clickable', () => {
       render(<TaskStatusIndicator {...defaultProps} isInstalling />)
       const trigger = document.getElementById('plugin-task-trigger')
-      expect(trigger)!.toHaveClass('cursor-pointer')
+      expect(trigger).toHaveClass('cursor-pointer')
     })
   })
 
@@ -430,7 +429,7 @@ describe('PluginTaskList Component', () => {
   describe('Rendering', () => {
     it('should render without crashing with empty lists', () => {
       render(<PluginTaskList {...defaultProps} />)
-      expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
     })
 
     it('should render running plugins section when plugins exist', () => {
@@ -440,8 +439,7 @@ describe('PluginTaskList Component', () => {
       // Translation key is returned as text in tests, multiple matches expected (title + status)
       expect(screen.getAllByText(/task\.installing/i).length).toBeGreaterThan(0)
       // Verify section container is rendered
-      // Verify section container is rendered
-      expect(document.querySelector('.max-h-\\[300px\\]'))!.toBeInTheDocument()
+      expect(document.querySelector('.max-h-\\[300px\\]')).toBeInTheDocument()
     })
 
     it('should render success plugins section when plugins exist', () => {
@@ -456,7 +454,7 @@ describe('PluginTaskList Component', () => {
       const errorPlugins = [createMockPlugin({ status: TaskStatus.failed, message: 'Error occurred' })]
       render(<PluginTaskList {...defaultProps} errorPlugins={errorPlugins} />)
 
-      expect(screen.getByText('Error occurred'))!.toBeInTheDocument()
+      expect(screen.getByText('Error occurred')).toBeInTheDocument()
     })
 
     it('should render all sections when all types exist', () => {
@@ -543,7 +541,7 @@ describe('PluginTaskList Component', () => {
 
       render(<PluginTaskList {...defaultProps} runningPlugins={[plugin]} />)
 
-      expect(screen.getByText('My Test Plugin'))!.toBeInTheDocument()
+      expect(screen.getByText('My Test Plugin')).toBeInTheDocument()
     })
 
     it('should display plugin message when available', () => {
@@ -554,7 +552,7 @@ describe('PluginTaskList Component', () => {
 
       render(<PluginTaskList {...defaultProps} successPlugins={[plugin]} />)
 
-      expect(screen.getByText('Successfully installed!'))!.toBeInTheDocument()
+      expect(screen.getByText('Successfully installed!')).toBeInTheDocument()
     })
 
     it('should display multiple plugins in each section', () => {
@@ -565,8 +563,8 @@ describe('PluginTaskList Component', () => {
 
       render(<PluginTaskList {...defaultProps} runningPlugins={runningPlugins} />)
 
-      expect(screen.getByText('Plugin A'))!.toBeInTheDocument()
-      expect(screen.getByText('Plugin B'))!.toBeInTheDocument()
+      expect(screen.getByText('Plugin A')).toBeInTheDocument()
+      expect(screen.getByText('Plugin B')).toBeInTheDocument()
       // Count is rendered, verify multiple items are in list
       expect(document.querySelectorAll('.hover\\:bg-state-base-hover').length).toBe(2)
     })
@@ -595,7 +593,7 @@ describe('PluginTasks Component', () => {
 
       render(<PluginTasks />)
 
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
   })
 
@@ -606,8 +604,7 @@ describe('PluginTasks Component', () => {
       render(<PluginTasks />)
 
       // The component renders with a tooltip, we verify it exists
-      // The component renders with a tooltip, we verify it exists
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show success tip when all succeeded', () => {
@@ -615,7 +612,7 @@ describe('PluginTasks Component', () => {
 
       render(<PluginTasks />)
 
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should show error tip when some failed', () => {
@@ -626,7 +623,7 @@ describe('PluginTasks Component', () => {
 
       render(<PluginTasks />)
 
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
   })
 
@@ -640,8 +637,7 @@ describe('PluginTasks Component', () => {
       fireEvent.click(document.getElementById('plugin-task-trigger')!)
 
       // The popover content should be visible (PluginTaskList)
-      // The popover content should be visible (PluginTaskList)
-      expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
     })
 
     it('should not toggle when status does not allow', () => {
@@ -651,8 +647,7 @@ describe('PluginTasks Component', () => {
       render(<PluginTasks />)
 
       // Component should still render
-      // Component should still render
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
   })
 
@@ -670,7 +665,7 @@ describe('PluginTasks Component', () => {
 
       // Wait for popover content to render
       await waitFor(() => {
-        expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
+        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
       })
 
       // Find and click clear all button
@@ -716,13 +711,13 @@ describe('PluginTasks Component', () => {
       fireEvent.click(document.getElementById('plugin-task-trigger')!)
 
       await waitFor(() => {
-        expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
+        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
       })
 
       // Find and click the clear all button in error section
       const clearButtons = screen.getAllByRole('button')
       if (clearButtons.length > 0)
-        fireEvent.click(clearButtons[0]!)
+        fireEvent.click(clearButtons[0])
 
       await waitFor(() => {
         expect(mockMutateAsync).toHaveBeenCalled()
@@ -744,13 +739,13 @@ describe('PluginTasks Component', () => {
       fireEvent.click(document.getElementById('plugin-task-trigger')!)
 
       await waitFor(() => {
-        expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
+        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
       })
 
       // Find and click individual clear button (usually the last one)
       const clearButtons = screen.getAllByRole('button')
       const individualClearButton = clearButtons[clearButtons.length - 1]
-      fireEvent.click(individualClearButton!)
+      fireEvent.click(individualClearButton)
 
       await waitFor(() => {
         expect(mockMutateAsync).toHaveBeenCalledWith({
@@ -775,7 +770,7 @@ describe('PluginTasks Component', () => {
 
       render(<PluginTasks />)
 
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should handle many plugins', () => {
@@ -788,7 +783,7 @@ describe('PluginTasks Component', () => {
 
       render(<PluginTasks />)
 
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should handle plugins with empty labels', () => {
@@ -800,7 +795,7 @@ describe('PluginTasks Component', () => {
 
       render(<PluginTasks />)
 
-      expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
     })
 
     it('should handle plugins with long messages', () => {
@@ -815,7 +810,7 @@ describe('PluginTasks Component', () => {
       // Open popover
       fireEvent.click(document.getElementById('plugin-task-trigger')!)
 
-      expect(document.querySelector('.w-\\[360px\\]'))!.toBeInTheDocument()
+      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
     })
 
     it('should open for installing-with-success state', () => {
@@ -858,13 +853,13 @@ describe('PluginTasks Integration', () => {
 
     const { rerender } = render(<PluginTasks />)
 
-    expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
 
     // Simulate completion by re-rendering with success
     setupMocks([createMockPlugin({ status: TaskStatus.success })])
     rerender(<PluginTasks />)
 
-    expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
   })
 
   it('should show correct UI flow from installing to failure', async () => {
@@ -873,13 +868,13 @@ describe('PluginTasks Integration', () => {
 
     const { rerender } = render(<PluginTasks />)
 
-    expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
 
     // Simulate failure by re-rendering with failed
     setupMocks([createMockPlugin({ status: TaskStatus.failed, message: 'Network error' })])
     rerender(<PluginTasks />)
 
-    expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument()
+    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
   })
 
   it('should handle mixed status during installation', () => {
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index 9a39b43bf6..5acd193a82 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -33,7 +33,6 @@ const PluginTasks = () => {
     handleClearErrorPlugin,
   } = usePluginTaskStatus()
   const { getIconUrl } = useGetIcon()
-  const canOpenMenu = isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess
 
   // Generate tooltip text based on status
   const tip = useMemo(() => {
@@ -86,6 +85,11 @@ const PluginTasks = () => {
     [clearPluginsAndClose],
   )
 
+  const handleTriggerClick = useCallback(() => {
+    if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess)
+      setOpen(v => !v)
+  }, [isFailed, isInstalling, isInstallingWithSuccess, isInstallingWithError, isSuccess])
+
   // Hide when no plugin tasks
   if (totalPluginsLength === 0)
     return null
@@ -98,7 +102,7 @@ const PluginTasks = () => {
       >
         <DropdownMenuTrigger
           render={<div />}
-          disabled={!canOpenMenu}
+          onClick={handleTriggerClick}
         >
           <TaskStatusIndicator
             tip={tip}
@@ -116,7 +120,7 @@ const PluginTasks = () => {
         <DropdownMenuContent
           placement="bottom-end"
           sideOffset={4}
-          popupClassName="[scrollbar-width:none] overflow-visible border-0 bg-transparent p-0 shadow-none backdrop-blur-none [&::-webkit-scrollbar]:hidden"
+          popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none overflow-visible"
         >
           <PluginTaskList
             runningPlugins={runningPlugins}
diff --git a/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx
index f71780e2df..26eeb7fe03 100644
--- a/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx
@@ -148,8 +148,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert
-        // Assert
-        expect(screen.getByText('plugin.privilege.title'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.title')).toBeInTheDocument()
       })
 
       it('should render install permission section', () => {
@@ -157,8 +156,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert
-        // Assert
-        expect(screen.getByText('plugin.privilege.whoCanInstall'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.whoCanInstall')).toBeInTheDocument()
       })
 
       it('should render debug permission section', () => {
@@ -166,8 +164,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert
-        // Assert
-        expect(screen.getByText('plugin.privilege.whoCanDebug'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.whoCanDebug')).toBeInTheDocument()
       })
 
       it('should render all permission options for install', () => {
@@ -183,9 +180,8 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert
-        // Assert
-        expect(screen.getByText('common.operation.cancel'))!.toBeInTheDocument()
-        expect(screen.getByText('common.operation.save'))!.toBeInTheDocument()
+        expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
+        expect(screen.getByText('common.operation.save')).toBeInTheDocument()
       })
 
       it('should render AutoUpdateSetting when marketplace is enabled', () => {
@@ -196,8 +192,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert
-        // Assert
-        expect(screen.getByTestId('auto-update-setting'))!.toBeInTheDocument()
+        expect(screen.getByTestId('auto-update-setting')).toBeInTheDocument()
       })
 
       it('should not render AutoUpdateSetting when marketplace is disabled', () => {
@@ -207,37 +202,6 @@ describe('reference-setting-modal', () => {
         // Act
         render(<ReferenceSettingModal {...defaultProps} />)
 
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
-        // Assert
         // Assert
         expect(screen.queryByTestId('auto-update-setting')).not.toBeInTheDocument()
       })
@@ -247,8 +211,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert
-        // Assert
-        expect(screen.getByTestId('modal-close'))!.toBeInTheDocument()
+        expect(screen.getByTestId('modal-close')).toBeInTheDocument()
       })
     })
 
@@ -267,11 +230,11 @@ describe('reference-setting-modal', () => {
 
         // Assert - admin option should be selected for install (first one)
         const adminOptions = screen.getAllByTestId('option-card-plugin.privilege.admins')
-        expect(adminOptions[0])!.toHaveAttribute('aria-pressed', 'true') // Install permission
+        expect(adminOptions[0]).toHaveAttribute('aria-pressed', 'true') // Install permission
 
         // Assert - noOne option should be selected for debug (second one)
         const noOneOptions = screen.getAllByTestId('option-card-plugin.privilege.noone')
-        expect(noOneOptions[1])!.toHaveAttribute('aria-pressed', 'true') // Debug permission
+        expect(noOneOptions[1]).toHaveAttribute('aria-pressed', 'true') // Debug permission
       })
 
       it('should update tempPrivilege when permission option is clicked', () => {
@@ -280,11 +243,10 @@ describe('reference-setting-modal', () => {
 
         // Act - click on "No One" for install permission
         const noOneOptions = screen.getAllByTestId('option-card-plugin.privilege.noone')
-        fireEvent.click(noOneOptions[0]!) // First one is for install permission
+        fireEvent.click(noOneOptions[0]) // First one is for install permission
 
         // Assert - the option should now be selected
-        // Assert - the option should now be selected
-        expect(noOneOptions[0])!.toHaveAttribute('aria-pressed', 'true')
+        expect(noOneOptions[0]).toHaveAttribute('aria-pressed', 'true')
       })
 
       it('should initialize with payload auto_upgrade values', () => {
@@ -299,8 +261,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
         // Assert
-        // Assert
-        expect(screen.getByTestId('auto-update-strategy'))!.toHaveTextContent('latest')
+        expect(screen.getByTestId('auto-update-strategy')).toHaveTextContent('latest')
       })
 
       it('should use default auto_upgrade when payload.auto_upgrade is undefined', () => {
@@ -314,8 +275,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
         // Assert - should use default value (disabled)
-        // Assert - should use default value (disabled)
-        expect(screen.getByTestId('auto-update-strategy'))!.toHaveTextContent('disabled')
+        expect(screen.getByTestId('auto-update-strategy')).toHaveTextContent('disabled')
       })
     })
 
@@ -391,11 +351,10 @@ describe('reference-setting-modal', () => {
 
         // Click Everyone for install permission
         const everyoneOptions = screen.getAllByTestId('option-card-plugin.privilege.everyone')
-        fireEvent.click(everyoneOptions[0]!)
+        fireEvent.click(everyoneOptions[0])
 
         // Assert
-        // Assert
-        expect(everyoneOptions[0])!.toHaveAttribute('aria-pressed', 'true')
+        expect(everyoneOptions[0]).toHaveAttribute('aria-pressed', 'true')
       })
 
       it('should update debug permission when Admins Only option is clicked', () => {
@@ -412,11 +371,10 @@ describe('reference-setting-modal', () => {
 
         // Click Admins Only for debug permission (second set of options)
         const adminOptions = screen.getAllByTestId('option-card-plugin.privilege.admins')
-        fireEvent.click(adminOptions[1]!) // Second one is for debug permission
+        fireEvent.click(adminOptions[1]) // Second one is for debug permission
 
         // Assert
-        // Assert
-        expect(adminOptions[1])!.toHaveAttribute('aria-pressed', 'true')
+        expect(adminOptions[1]).toHaveAttribute('aria-pressed', 'true')
       })
 
       it('should update auto_upgrade config when changed in AutoUpdateSetting', async () => {
@@ -452,8 +410,7 @@ describe('reference-setting-modal', () => {
         rerender(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert - component should render without issues
-        // Assert - component should render without issues
-        expect(screen.getByText('plugin.privilege.title'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.title')).toBeInTheDocument()
       })
 
       it('handleSave should be memoized with useCallback', async () => {
@@ -477,11 +434,10 @@ describe('reference-setting-modal', () => {
 
         // Act - click install permission option
         const everyoneOptions = screen.getAllByTestId('option-card-plugin.privilege.everyone')
-        fireEvent.click(everyoneOptions[0]!)
+        fireEvent.click(everyoneOptions[0])
 
         // Assert - install permission should be updated
-        // Assert - install permission should be updated
-        expect(everyoneOptions[0])!.toHaveAttribute('aria-pressed', 'true')
+        expect(everyoneOptions[0]).toHaveAttribute('aria-pressed', 'true')
       })
     })
 
@@ -500,7 +456,7 @@ describe('reference-setting-modal', () => {
 
         // Act & Assert - should not crash
         render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
-        expect(screen.getByText('plugin.privilege.title'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.title')).toBeInTheDocument()
       })
 
       it('should handle undefined permission values', () => {
@@ -515,7 +471,7 @@ describe('reference-setting-modal', () => {
 
         // Assert - should use default PermissionType.noOne
         const noOneOptions = screen.getAllByTestId('option-card-plugin.privilege.noone')
-        expect(noOneOptions[0])!.toHaveAttribute('aria-pressed', 'true')
+        expect(noOneOptions[0]).toHaveAttribute('aria-pressed', 'true')
       })
 
       it('should handle missing install_permission', () => {
@@ -531,8 +487,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
         // Assert - should fall back to PermissionType.noOne
-        // Assert - should fall back to PermissionType.noOne
-        expect(screen.getByText('plugin.privilege.title'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.title')).toBeInTheDocument()
       })
 
       it('should handle missing debug_permission', () => {
@@ -548,8 +503,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
         // Assert - should fall back to PermissionType.noOne
-        // Assert - should fall back to PermissionType.noOne
-        expect(screen.getByText('plugin.privilege.title'))!.toBeInTheDocument()
+        expect(screen.getByText('plugin.privilege.title')).toBeInTheDocument()
       })
 
       it('should handle slow async onSave gracefully', async () => {
@@ -601,8 +555,7 @@ describe('reference-setting-modal', () => {
             const { unmount } = render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
             // Assert - should render without crashing
-            // Assert - should render without crashing
-            expect(screen.getByText('plugin.privilege.title'))!.toBeInTheDocument()
+            expect(screen.getByText('plugin.privilege.title')).toBeInTheDocument()
 
             unmount()
           })
@@ -629,8 +582,7 @@ describe('reference-setting-modal', () => {
           const { unmount } = render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
           // Assert
-          // Assert
-          expect(screen.getByTestId('auto-update-strategy'))!.toHaveTextContent(strategy)
+          expect(screen.getByTestId('auto-update-strategy')).toHaveTextContent(strategy)
 
           unmount()
         })
@@ -656,8 +608,7 @@ describe('reference-setting-modal', () => {
           const { unmount } = render(<ReferenceSettingModal {...defaultProps} payload={payload} />)
 
           // Assert
-          // Assert
-          expect(screen.getByTestId('auto-update-mode'))!.toHaveTextContent(mode)
+          expect(screen.getByTestId('auto-update-mode')).toHaveTextContent(mode)
 
           unmount()
         })
@@ -680,7 +631,7 @@ describe('reference-setting-modal', () => {
 
         // Change install permission to noOne
         const noOneOptions = screen.getAllByTestId('option-card-plugin.privilege.noone')
-        fireEvent.click(noOneOptions[0]!)
+        fireEvent.click(noOneOptions[0])
 
         // Save
         fireEvent.click(screen.getByText('common.operation.save'))
@@ -711,7 +662,7 @@ describe('reference-setting-modal', () => {
 
         // Change debug permission to noOne
         const noOneOptions = screen.getAllByTestId('option-card-plugin.privilege.noone')
-        fireEvent.click(noOneOptions[1]!) // Second one is for debug
+        fireEvent.click(noOneOptions[1]) // Second one is for debug
 
         // Save
         fireEvent.click(screen.getByText('common.operation.save'))
@@ -740,7 +691,7 @@ describe('reference-setting-modal', () => {
 
         // Change install permission
         const everyoneOptions = screen.getAllByTestId('option-card-plugin.privilege.everyone')
-        fireEvent.click(everyoneOptions[0]!)
+        fireEvent.click(everyoneOptions[0])
 
         // Save
         fireEvent.click(screen.getByText('common.operation.save'))
@@ -766,7 +717,7 @@ describe('reference-setting-modal', () => {
 
         // Assert
         const modal = screen.getByTestId('modal')
-        expect(modal)!.toHaveClass('w-[620px]', 'max-w-[620px]', 'p-0!')
+        expect(modal).toHaveClass('w-[620px]', 'max-w-[620px]', 'p-0!')
       })
 
       it('should pass isShow=true to Modal', () => {
@@ -774,8 +725,7 @@ describe('reference-setting-modal', () => {
         render(<ReferenceSettingModal {...defaultProps} />)
 
         // Assert - modal should be visible
-        // Assert - modal should be visible
-        expect(screen.getByTestId('modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('modal')).toBeInTheDocument()
       })
     })
 
@@ -786,8 +736,8 @@ describe('reference-setting-modal', () => {
 
         // Assert - check order by getting all section labels
         const labels = screen.getAllByText(/plugin\.privilege\.whoCan/)
-        expect(labels[0])!.toHaveTextContent('plugin.privilege.whoCanInstall')
-        expect(labels[1])!.toHaveTextContent('plugin.privilege.whoCanDebug')
+        expect(labels[0]).toHaveTextContent('plugin.privilege.whoCanInstall')
+        expect(labels[1]).toHaveTextContent('plugin.privilege.whoCanDebug')
       })
 
       it('should render three options per permission section', () => {
@@ -812,8 +762,8 @@ describe('reference-setting-modal', () => {
         const cancelButton = screen.getByText('common.operation.cancel')
         const saveButton = screen.getByText('common.operation.save')
 
-        expect(cancelButton)!.toBeInTheDocument()
-        expect(saveButton)!.toBeInTheDocument()
+        expect(cancelButton).toBeInTheDocument()
+        expect(saveButton).toBeInTheDocument()
       })
     })
   })
@@ -847,11 +797,11 @@ describe('reference-setting-modal', () => {
 
       // Change install permission to Everyone
       const everyoneOptions = screen.getAllByTestId('option-card-plugin.privilege.everyone')
-      fireEvent.click(everyoneOptions[0]!)
+      fireEvent.click(everyoneOptions[0])
 
       // Change debug permission to Admins Only
       const adminOptions = screen.getAllByTestId('option-card-plugin.privilege.admins')
-      fireEvent.click(adminOptions[1]!)
+      fireEvent.click(adminOptions[1])
 
       // Change auto-update strategy
       fireEvent.click(screen.getByTestId('auto-update-change'))
@@ -891,7 +841,7 @@ describe('reference-setting-modal', () => {
 
       // Make some changes
       const noOneOptions = screen.getAllByTestId('option-card-plugin.privilege.noone')
-      fireEvent.click(noOneOptions[0]!)
+      fireEvent.click(noOneOptions[0])
 
       // Cancel
       fireEvent.click(screen.getByText('common.operation.cancel'))
@@ -913,9 +863,8 @@ describe('reference-setting-modal', () => {
       render(<ReferenceSettingModal {...props} />)
 
       // Assert - Labels are rendered correctly
-      // Assert - Labels are rendered correctly
-      expect(screen.getByText('plugin.privilege.whoCanInstall'))!.toBeInTheDocument()
-      expect(screen.getByText('plugin.privilege.whoCanDebug'))!.toBeInTheDocument()
+      expect(screen.getByText('plugin.privilege.whoCanInstall')).toBeInTheDocument()
+      expect(screen.getByText('plugin.privilege.whoCanDebug')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
index 3854b6561a..de003e78ba 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
@@ -28,7 +28,7 @@ const InputFieldForm = ({ initialData, supportFile = false, onCancel, onSubmit,
         if (!result.success) {
           const issues = result.error.issues
           const firstIssue = issues[0]
-          const errorMessage = `"${firstIssue!.path.join('.')}" ${firstIssue!.message}`
+          const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
           toast.error(errorMessage)
           return errorMessage
         }
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
index 7e6baa42b1..49a1b9a284 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
@@ -21,7 +21,7 @@ const Options = ({ initialData, configurations, schema, CustomActions, onSubmit
         if (!result.success) {
           const issues = result.error.issues
           const firstIssue = issues[0]
-          const errorMessage = `Path: ${firstIssue!.path.join('.')} Error: ${firstIssue!.message}`
+          const errorMessage = `Path: ${firstIssue.path.join('.')} Error: ${firstIssue.message}`
           toast.error(errorMessage)
           return errorMessage
         }
@@ -41,7 +41,7 @@ const Options = ({ initialData, configurations, schema, CustomActions, onSubmit
         form.handleSubmit()
       }}
     >
-      <div className="flex flex-col gap-3 px-4 pt-3 pb-6">
+      <div className="flex flex-col gap-3 px-4 pb-6 pt-3">
         {configurations.map((config, index) => {
           const FieldComponent = BaseField({
             initialData,
diff --git a/web/app/components/snippets/__tests__/index.spec.tsx b/web/app/components/snippets/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..8d63394a82
--- /dev/null
+++ b/web/app/components/snippets/__tests__/index.spec.tsx
@@ -0,0 +1,139 @@
+import type { SnippetDetailPayload } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import SnippetPage from '..'
+
+const mockUseSnippetInit = vi.fn()
+const mockSetAppSidebarExpand = vi.fn()
+
+vi.mock('../hooks/use-snippet-init', () => ({
+  useSnippetInit: (snippetId: string) => mockUseSnippetInit(snippetId),
+}))
+
+vi.mock('../components/snippet-main', () => ({
+  default: ({ snippetId }: { snippetId: string }) => <div data-testid="snippet-main">{snippetId}</div>,
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+    push: vi.fn(),
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: { mobile: 'mobile', desktop: 'desktop' },
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-default-context">{children}</div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
+
+  return {
+    ...actual,
+    initialNodes: (nodes: unknown[]) => nodes,
+    initialEdges: (edges: unknown[]) => edges,
+  }
+})
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (modeState: string) => React.ReactNode
+    renderNavigation?: (modeState: string) => React.ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      <div data-testid="app-sidebar-header">{renderHeader?.('expand')}</div>
+      <div data-testid="app-sidebar-navigation">{renderNavigation?.('expand')}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name, onClick }: { name: string, onClick?: () => void }) => (
+    <button type="button" onClick={onClick}>{name}</button>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
+  default: () => <div data-testid="snippet-info" />,
+}))
+
+vi.mock('@/app/components/evaluation', () => ({
+  default: ({ resourceId }: { resourceId: string }) => <div data-testid="evaluation">{resourceId}</div>,
+}))
+
+const mockSnippetDetail: SnippetDetailPayload = {
+  snippet: {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'A static snippet mock.',
+    author: 'Evan',
+    updatedAt: 'Updated 2h ago',
+    usage: 'Used 19 times',
+    icon: '🪄',
+    iconBackground: '#E0EAFF',
+    status: 'Draft',
+  },
+  graph: {
+    viewport: { x: 0, y: 0, zoom: 1 },
+    nodes: [],
+    edges: [],
+  },
+  inputFields: [],
+  uiMeta: {
+    inputFieldCount: 0,
+    checklistCount: 0,
+    autoSavedAt: 'Auto-saved · a few seconds ago',
+  },
+}
+
+describe('SnippetPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSnippetInit.mockReturnValue({
+      data: mockSnippetDetail,
+      isLoading: false,
+    })
+  })
+
+  it('should render the orchestrate route shell with independent main content', () => {
+    render(<SnippetPage snippetId="snippet-1" />)
+
+    expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
+    expect(screen.getByTestId('snippet-info')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-default-context')).toBeInTheDocument()
+    expect(screen.getByTestId('snippet-main')).toHaveTextContent('snippet-1')
+  })
+
+  it('should render loading fallback when orchestrate data is unavailable', () => {
+    mockUseSnippetInit.mockReturnValue({
+      data: null,
+      isLoading: false,
+    })
+
+    render(<SnippetPage snippetId="missing-snippet" />)
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
new file mode 100644
index 0000000000..4fa34c39f4
--- /dev/null
+++ b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
@@ -0,0 +1,123 @@
+import type { SnippetDetailPayload } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import SnippetEvaluationPage from '../snippet-evaluation-page'
+
+const mockUseSnippetApiDetail = vi.fn()
+const mockGetSnippetDetailMock = vi.fn()
+const mockSetAppSidebarExpand = vi.fn()
+
+vi.mock('@/service/use-snippets', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/use-snippets')>()
+
+  return {
+    ...actual,
+    useSnippetApiDetail: (snippetId: string) => mockUseSnippetApiDetail(snippetId),
+    useUpdateSnippetMutation: () => ({
+      mutate: vi.fn(),
+      isPending: false,
+    }),
+    useExportSnippetMutation: () => ({
+      mutateAsync: vi.fn(),
+      isPending: false,
+    }),
+    useDeleteSnippetMutation: () => ({
+      mutate: vi.fn(),
+      isPending: false,
+    }),
+  }
+})
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+    push: vi.fn(),
+  }),
+}))
+
+vi.mock('@/service/use-snippets.mock', () => ({
+  getSnippetDetailMock: (snippetId: string) => mockGetSnippetDetailMock(snippetId),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: { mobile: 'mobile', desktop: 'desktop' },
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (modeState: string) => React.ReactNode
+    renderNavigation?: (modeState: string) => React.ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      <div data-testid="app-sidebar-header">{renderHeader?.('expand')}</div>
+      <div data-testid="app-sidebar-navigation">{renderNavigation?.('expand')}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name, onClick }: { name: string, onClick?: () => void }) => (
+    <button type="button" onClick={onClick}>{name}</button>
+  ),
+}))
+
+vi.mock('@/app/components/evaluation', () => ({
+  default: ({ resourceId }: { resourceId: string }) => <div data-testid="evaluation">{resourceId}</div>,
+}))
+
+const mockSnippetDetail: SnippetDetailPayload = {
+  snippet: {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'A static snippet mock.',
+    author: 'Evan',
+    updatedAt: '2024-03-24',
+    usage: '19',
+    icon: '🪄',
+    iconBackground: '#E0EAFF',
+  },
+  graph: {
+    nodes: [],
+    edges: [],
+    viewport: {
+      x: 0,
+      y: 0,
+      zoom: 1,
+    },
+  },
+  inputFields: [],
+  uiMeta: {
+    inputFieldCount: 0,
+    checklistCount: 0,
+    autoSavedAt: '2024-03-24 12:00',
+  },
+}
+
+describe('SnippetEvaluationPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSnippetApiDetail.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    })
+    mockGetSnippetDetailMock.mockReturnValue(mockSnippetDetail)
+  })
+
+  it('should render evaluation with mock snippet detail data', () => {
+    render(<SnippetEvaluationPage snippetId="snippet-1" />)
+
+    expect(mockGetSnippetDetailMock).toHaveBeenCalledWith('snippet-1')
+    expect(mockUseSnippetApiDetail).not.toHaveBeenCalled()
+    expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
+    expect(screen.getByTestId('evaluation')).toHaveTextContent('snippet-1')
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx b/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
new file mode 100644
index 0000000000..dd89fcf2e3
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/input-field-editor.spec.tsx
@@ -0,0 +1,80 @@
+import type { InputVar } from '@/models/pipeline'
+import { render, screen } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import SnippetInputFieldEditor from '../input-field-editor'
+
+const mockUseFloatingRight = vi.fn()
+
+vi.mock('@/app/components/rag-pipeline/components/panel/input-field/hooks', () => ({
+  useFloatingRight: (...args: unknown[]) => mockUseFloatingRight(...args),
+}))
+
+vi.mock('../input-field-form', () => ({
+  default: ({ isEditMode }: { isEditMode: boolean }) => (
+    <div data-testid="snippet-input-field-form">{isEditMode ? 'edit' : 'create'}</div>
+  ),
+}))
+
+const createField = (overrides: Partial<InputVar> = {}): InputVar => ({
+  type: PipelineInputVarType.textInput,
+  label: 'Blog URL',
+  variable: 'blog_url',
+  required: true,
+  options: [],
+  placeholder: 'Paste a source article URL',
+  max_length: 256,
+  ...overrides,
+})
+
+describe('SnippetInputFieldEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseFloatingRight.mockReturnValue({
+      floatingRight: false,
+      floatingRightWidth: 400,
+    })
+  })
+
+  // Verifies the default desktop layout keeps the editor inline with the panel.
+  describe('Rendering', () => {
+    it('should render the add title without floating positioning by default', () => {
+      render(
+        <SnippetInputFieldEditor
+          onClose={vi.fn()}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      const title = screen.getByText('datasetPipeline.inputFieldPanel.addInputField')
+      const editor = title.parentElement
+
+      expect(title).toBeInTheDocument()
+      expect(editor).not.toHaveClass('absolute')
+      expect(editor).toHaveStyle({ width: 'min(400px, calc(100vw - 24px))' })
+      expect(mockUseFloatingRight).toHaveBeenCalledWith(400)
+    })
+
+    it('should float over the panel when there is not enough room', () => {
+      mockUseFloatingRight.mockReturnValue({
+        floatingRight: true,
+        floatingRightWidth: 320,
+      })
+
+      render(
+        <SnippetInputFieldEditor
+          field={createField()}
+          onClose={vi.fn()}
+          onSubmit={vi.fn()}
+        />,
+      )
+
+      const title = screen.getByText('datasetPipeline.inputFieldPanel.editInputField')
+      const editor = title.parentElement
+
+      expect(title).toBeInTheDocument()
+      expect(editor).toHaveClass('absolute', 'right-0', 'z-[100]')
+      expect(editor).toHaveStyle({ width: 'min(320px, calc(100vw - 24px))' })
+      expect(screen.getByTestId('snippet-input-field-form')).toHaveTextContent('edit')
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx b/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
new file mode 100644
index 0000000000..c3c97047d9
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/publish-menu.spec.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import PublishMenu from '../publish-menu'
+
+describe('PublishMenu', () => {
+  it('should render the draft summary and publish shortcut', () => {
+    const { container } = render(
+      <PublishMenu
+        draftUpdatedAt={0}
+        publishedAt={0}
+        uiMeta={{
+          inputFieldCount: 1,
+          checklistCount: 2,
+          autoSavedAt: 'Auto-saved · a few seconds ago',
+        }}
+        onPublish={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('snippet.publishMenuCurrentDraft')).toBeInTheDocument()
+    expect(screen.getByText('Auto-saved · a few seconds ago')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'snippet.publishButton' })).toBeInTheDocument()
+    expect(container.querySelectorAll('.system-kbd')).toHaveLength(3)
+  })
+
+  it('should render published summary when a published version exists', () => {
+    render(
+      <PublishMenu
+        draftUpdatedAt={1_712_300_000_000}
+        publishedAt={1_712_345_678_000}
+        uiMeta={{
+          inputFieldCount: 1,
+          checklistCount: 2,
+          autoSavedAt: 'Auto-saved · a few seconds ago',
+        }}
+        onPublish={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('workflow.common.latestPublished')).toBeInTheDocument()
+    expect(screen.getByText(/workflow\.common\.publishedAt/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
new file mode 100644
index 0000000000..d7d1b2991a
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-create-card.spec.tsx
@@ -0,0 +1,107 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import SnippetCreateCard from '../snippet-create-card'
+
+const { mockPush, mockCreateMutate, mockToastSuccess, mockToastError } = vi.hoisted(() => ({
+  mockPush: vi.fn(),
+  mockCreateMutate: vi.fn(),
+  mockToastSuccess: vi.fn(),
+  mockToastError: vi.fn(),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: mockToastSuccess,
+    error: mockToastError,
+  },
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useCreateSnippetMutation: () => ({
+    mutate: mockCreateMutate,
+    isPending: false,
+  }),
+}))
+
+vi.mock('../snippet-import-dsl-dialog', () => ({
+  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess?: (snippetId: string) => void }) => {
+    if (!show)
+      return null
+
+    return (
+      <div data-testid="snippet-import-dsl-dialog">
+        <button type="button" onClick={() => onSuccess?.('snippet-imported')}>Complete Import</button>
+        <button type="button" onClick={onClose}>Close Import</button>
+      </div>
+    )
+  },
+}))
+
+describe('SnippetCreateCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Create From Blank', () => {
+    it('should open the create dialog and create a snippet from the modal', async () => {
+      mockCreateMutate.mockImplementation((_payload, options?: { onSuccess?: (snippet: { id: string }) => void }) => {
+        options?.onSuccess?.({ id: 'snippet-123' })
+      })
+
+      render(<SnippetCreateCard />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'snippet.createFromBlank' }))
+      expect(screen.getByText('workflow.snippet.createDialogTitle')).toBeInTheDocument()
+
+      fireEvent.change(screen.getByPlaceholderText('workflow.snippet.namePlaceholder'), {
+        target: { value: 'My Snippet' },
+      })
+      fireEvent.change(screen.getByPlaceholderText('workflow.snippet.descriptionPlaceholder'), {
+        target: { value: 'Useful snippet description' },
+      })
+      fireEvent.click(screen.getByRole('button', { name: /workflow\.snippet\.confirm/i }))
+
+      expect(mockCreateMutate).toHaveBeenCalledWith({
+        body: {
+          name: 'My Snippet',
+          description: 'Useful snippet description',
+          icon_info: {
+            icon: '🤖',
+            icon_type: 'emoji',
+            icon_background: '#FFEAD5',
+            icon_url: undefined,
+          },
+        },
+      }, expect.objectContaining({
+        onSuccess: expect.any(Function),
+        onError: expect.any(Function),
+      }))
+
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
+      })
+
+      expect(mockToastSuccess).toHaveBeenCalledWith('workflow.snippet.createSuccess')
+    })
+  })
+
+  describe('Import DSL', () => {
+    it('should open the import dialog and navigate when the import succeeds', async () => {
+      render(<SnippetCreateCard />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'app.importDSL' }))
+      expect(screen.getByTestId('snippet-import-dsl-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'Complete Import' }))
+
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-imported/orchestrate')
+      })
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx
new file mode 100644
index 0000000000..3202c3dc43
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-layout.spec.tsx
@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import type { SnippetDetail } from '@/models/snippet'
+import { render, screen } from '@testing-library/react'
+import SnippetLayout from '../snippet-layout'
+
+const mockSetAppSidebarExpand = vi.fn()
+const mockUseDocumentTitle = vi.fn()
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
+    setAppSidebarExpand: mockSetAppSidebarExpand,
+  }),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  default: () => 'desktop',
+  MediaType: {
+    mobile: 'mobile',
+    desktop: 'desktop',
+  },
+}))
+
+vi.mock('@/hooks/use-document-title', () => ({
+  default: (title: string) => mockUseDocumentTitle(title),
+}))
+
+vi.mock('@/app/components/app-sidebar', () => ({
+  default: ({
+    renderHeader,
+    renderNavigation,
+  }: {
+    renderHeader?: (mode: string) => ReactNode
+    renderNavigation?: (mode: string) => ReactNode
+  }) => (
+    <div data-testid="app-sidebar">
+      {renderHeader?.('expand')}
+      {renderNavigation?.('expand')}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/nav-link', () => ({
+  default: ({ name, href, active }: { name: string, href: string, active: boolean }) => (
+    <a
+      aria-current={active ? 'page' : undefined}
+      href={href}
+    >
+      {name}
+    </a>
+  ),
+}))
+
+vi.mock('@/app/components/app-sidebar/snippet-info', () => ({
+  default: ({ snippet }: { snippet: SnippetDetail }) => <div>{snippet.name}</div>,
+}))
+
+const createSnippet = (overrides: Partial<SnippetDetail> = {}): SnippetDetail => ({
+  id: 'snippet-1',
+  name: 'Snippet Title',
+  description: 'Snippet description',
+  author: 'tester',
+  updatedAt: '2026-04-15',
+  usage: '42',
+  icon: 'emoji',
+  iconBackground: '#ffffff',
+  ...overrides,
+})
+
+describe('SnippetLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  describe('Document title', () => {
+    it('should set the document title to the snippet name when snippet detail is available', () => {
+      render(
+        <SnippetLayout
+          snippetId="snippet-1"
+          snippet={createSnippet()}
+          section="orchestrate"
+        >
+          <div>content</div>
+        </SnippetLayout>,
+      )
+
+      expect(mockUseDocumentTitle).toHaveBeenCalledWith('Snippet Title')
+    })
+  })
+
+  describe('Navigation', () => {
+    it('should render snippet navigation links', () => {
+      render(
+        <SnippetLayout
+          snippetId="snippet-1"
+          snippet={createSnippet()}
+          section="evaluation"
+        >
+          <div>content</div>
+        </SnippetLayout>,
+      )
+
+      expect(screen.getByRole('link', { name: 'snippet.sectionOrchestrate' })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
+      expect(screen.getByRole('link', { name: 'snippet.sectionEvaluation' })).toHaveAttribute('href', '/snippets/snippet-1/evaluation')
+      expect(screen.getByRole('link', { name: 'snippet.sectionEvaluation' })).toHaveAttribute('aria-current', 'page')
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
new file mode 100644
index 0000000000..ed0ce3987d
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-main.spec.tsx
@@ -0,0 +1,312 @@
+import type { WorkflowProps } from '@/app/components/workflow'
+import type { SnippetDetailPayload, SnippetInputField } from '@/models/snippet'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import SnippetMain from '../snippet-main'
+
+const mockSyncInputFieldsDraft = vi.fn()
+const mockCloseEditor = vi.fn()
+const mockOpenEditor = vi.fn()
+const mockReset = vi.fn()
+const mockSetFields = vi.fn()
+const mockSetInputPanelOpen = vi.fn()
+const mockSetPublishMenuOpen = vi.fn()
+const mockToggleInputPanel = vi.fn()
+const mockTogglePublishMenu = vi.fn()
+const mockPublishSnippetMutateAsync = vi.fn()
+const mockFetchInspectVars = vi.fn()
+const mockHandleBackupDraft = vi.fn()
+const mockHandleLoadBackupDraft = vi.fn()
+const mockHandleRestoreFromPublishedWorkflow = vi.fn()
+const mockHandleRun = vi.fn()
+const mockHandleStartWorkflowRun = vi.fn()
+const mockHandleStopRun = vi.fn()
+const mockHandleWorkflowStartRunInWorkflow = vi.fn()
+const mockInspectVarsCrud = {
+  hasNodeInspectVars: vi.fn(),
+  hasSetInspectVar: vi.fn(),
+  fetchInspectVarValue: vi.fn(),
+  editInspectVarValue: vi.fn(),
+  renameInspectVarName: vi.fn(),
+  appendNodeInspectVars: vi.fn(),
+  deleteInspectVar: vi.fn(),
+  deleteNodeInspectorVars: vi.fn(),
+  deleteAllInspectorVars: vi.fn(),
+  isInspectVarEdited: vi.fn(),
+  resetToLastRunVar: vi.fn(),
+  invalidateSysVarValues: vi.fn(),
+  resetConversationVar: vi.fn(),
+  invalidateConversationVarValues: vi.fn(),
+}
+let capturedHooksStore: Record<string, unknown> | undefined
+let snippetDetailStoreState: {
+  editingField: SnippetInputField | null
+  fields: SnippetInputField[]
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  isPublishMenuOpen: boolean
+  closeEditor: typeof mockCloseEditor
+  openEditor: typeof mockOpenEditor
+  reset: typeof mockReset
+  setFields: typeof mockSetFields
+  setInputPanelOpen: typeof mockSetInputPanelOpen
+  setPublishMenuOpen: typeof mockSetPublishMenuOpen
+  toggleInputPanel: typeof mockToggleInputPanel
+  togglePublishMenu: typeof mockTogglePublishMenu
+}
+
+vi.mock('@/app/components/snippets/store', () => ({
+  useSnippetDetailStore: (selector: (state: typeof snippetDetailStoreState) => unknown) => selector(snippetDetailStoreState),
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  usePublishSnippetWorkflowMutation: () => ({
+    mutateAsync: mockPublishSnippetMutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-configs-map', () => ({
+  useConfigsMap: () => ({
+    flowId: 'snippet-1',
+    flowType: 'snippet',
+    fileSettings: {},
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars', () => ({
+  useSetWorkflowVarsWithValue: () => ({
+    fetchInspectVars: mockFetchInspectVars,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-inspect-vars-crud', () => ({
+  useInspectVarsCrud: () => mockInspectVarsCrud,
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: vi.fn(),
+    syncInputFieldsDraft: mockSyncInputFieldsDraft,
+    syncWorkflowDraftWhenPageClose: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-refresh-draft', () => ({
+  useSnippetRefreshDraft: () => ({
+    handleRefreshWorkflowDraft: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-run', () => ({
+  useSnippetRun: () => ({
+    handleBackupDraft: mockHandleBackupDraft,
+    handleLoadBackupDraft: mockHandleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow: mockHandleRestoreFromPublishedWorkflow,
+    handleRun: mockHandleRun,
+    handleStopRun: mockHandleStopRun,
+  }),
+}))
+
+vi.mock('@/app/components/snippets/hooks/use-snippet-start-run', () => ({
+  useSnippetStartRun: () => ({
+    handleStartWorkflowRun: mockHandleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow: mockHandleWorkflowStartRunInWorkflow,
+  }),
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+  WorkflowWithInnerContext: ({
+    children,
+    hooksStore,
+  }: {
+    children: React.ReactNode
+    hooksStore?: Record<string, unknown>
+  }) => {
+    capturedHooksStore = hooksStore
+
+    return (
+      <div data-testid="workflow-inner-context">{children}</div>
+    )
+  },
+}))
+
+vi.mock('@/app/components/snippets/components/snippet-children', () => ({
+  default: ({
+    onRemoveField,
+    onPublish,
+    onSubmitField,
+  }: {
+    onRemoveField: (index: number) => void
+    onPublish: () => void
+    onSubmitField: (field: SnippetInputField) => void
+  }) => (
+    <div>
+      <button type="button" onClick={() => onRemoveField(0)}>remove</button>
+      <button type="button" onClick={onPublish}>publish</button>
+      <button
+        type="button"
+        onClick={() => onSubmitField({
+          type: PipelineInputVarType.textInput,
+          label: 'New Field',
+          variable: 'new_field',
+          required: true,
+        })}
+      >
+        submit
+      </button>
+    </div>
+  ),
+}))
+
+const payload: SnippetDetailPayload = {
+  snippet: {
+    id: 'snippet-1',
+    name: 'Snippet',
+    description: 'desc',
+    author: '',
+    updatedAt: '2026-03-29 10:00',
+    usage: '0',
+    icon: '',
+    iconBackground: '',
+  },
+  graph: {
+    nodes: [],
+    edges: [],
+    viewport: { x: 0, y: 0, zoom: 1 },
+  },
+  inputFields: [
+    {
+      type: PipelineInputVarType.textInput,
+      label: 'Blog URL',
+      variable: 'blog_url',
+      required: true,
+    },
+  ],
+  uiMeta: {
+    inputFieldCount: 1,
+    checklistCount: 0,
+    autoSavedAt: '2026-03-29 10:00',
+  },
+}
+
+const renderSnippetMain = () => {
+  return render(
+    <SnippetMain
+      payload={payload}
+      snippetId="snippet-1"
+      nodes={[] as WorkflowProps['nodes']}
+      edges={[] as WorkflowProps['edges']}
+      viewport={{ x: 0, y: 0, zoom: 1 }}
+    />,
+  )
+}
+
+describe('SnippetMain', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSyncInputFieldsDraft.mockResolvedValue(undefined)
+    mockPublishSnippetMutateAsync.mockResolvedValue(undefined)
+    capturedHooksStore = undefined
+    snippetDetailStoreState = {
+      editingField: null,
+      fields: [...payload.inputFields],
+      isEditorOpen: false,
+      isInputPanelOpen: true,
+      isPublishMenuOpen: false,
+      closeEditor: mockCloseEditor,
+      openEditor: mockOpenEditor,
+      reset: mockReset,
+      setFields: mockSetFields,
+      setInputPanelOpen: mockSetInputPanelOpen,
+      setPublishMenuOpen: mockSetPublishMenuOpen,
+      toggleInputPanel: mockToggleInputPanel,
+      togglePublishMenu: mockTogglePublishMenu,
+    }
+  })
+
+  describe('Input Fields Sync', () => {
+    it('should sync draft input_fields when removing a field from the panel', async () => {
+      renderSnippetMain()
+
+      fireEvent.click(screen.getByRole('button', { name: 'remove' }))
+
+      await waitFor(() => {
+        expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([], {
+          onRefresh: expect.any(Function),
+        })
+      })
+    })
+
+    it('should sync draft input_fields when submitting a field from the editor', async () => {
+      renderSnippetMain()
+
+      fireEvent.click(screen.getByRole('button', { name: 'submit' }))
+
+      await waitFor(() => {
+        expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([
+          payload.inputFields[0],
+          {
+            type: PipelineInputVarType.textInput,
+            label: 'New Field',
+            variable: 'new_field',
+            required: true,
+          },
+        ], {
+          onRefresh: expect.any(Function),
+        })
+      })
+    })
+  })
+
+  describe('Publish', () => {
+    it('should call the publish mutation and close the publish menu', async () => {
+      renderSnippetMain()
+
+      fireEvent.click(screen.getByRole('button', { name: 'publish' }))
+
+      await waitFor(() => {
+        expect(mockPublishSnippetMutateAsync).toHaveBeenCalledWith({
+          params: { snippetId: 'snippet-1' },
+        })
+      })
+      expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe('Inspect Vars', () => {
+    it('should pass inspect vars handlers to WorkflowWithInnerContext', () => {
+      renderSnippetMain()
+
+      expect(capturedHooksStore?.fetchInspectVars).toBe(mockFetchInspectVars)
+      expect(capturedHooksStore?.hasNodeInspectVars).toBe(mockInspectVarsCrud.hasNodeInspectVars)
+      expect(capturedHooksStore?.hasSetInspectVar).toBe(mockInspectVarsCrud.hasSetInspectVar)
+      expect(capturedHooksStore?.fetchInspectVarValue).toBe(mockInspectVarsCrud.fetchInspectVarValue)
+      expect(capturedHooksStore?.editInspectVarValue).toBe(mockInspectVarsCrud.editInspectVarValue)
+      expect(capturedHooksStore?.renameInspectVarName).toBe(mockInspectVarsCrud.renameInspectVarName)
+      expect(capturedHooksStore?.appendNodeInspectVars).toBe(mockInspectVarsCrud.appendNodeInspectVars)
+      expect(capturedHooksStore?.deleteInspectVar).toBe(mockInspectVarsCrud.deleteInspectVar)
+      expect(capturedHooksStore?.deleteNodeInspectorVars).toBe(mockInspectVarsCrud.deleteNodeInspectorVars)
+      expect(capturedHooksStore?.deleteAllInspectorVars).toBe(mockInspectVarsCrud.deleteAllInspectorVars)
+      expect(capturedHooksStore?.isInspectVarEdited).toBe(mockInspectVarsCrud.isInspectVarEdited)
+      expect(capturedHooksStore?.resetToLastRunVar).toBe(mockInspectVarsCrud.resetToLastRunVar)
+      expect(capturedHooksStore?.invalidateSysVarValues).toBe(mockInspectVarsCrud.invalidateSysVarValues)
+      expect(capturedHooksStore?.resetConversationVar).toBe(mockInspectVarsCrud.resetConversationVar)
+      expect(capturedHooksStore?.invalidateConversationVarValues).toBe(mockInspectVarsCrud.invalidateConversationVarValues)
+    })
+  })
+
+  describe('Run Hooks', () => {
+    it('should pass snippet run handlers to WorkflowWithInnerContext', () => {
+      renderSnippetMain()
+
+      expect(capturedHooksStore?.handleBackupDraft).toBe(mockHandleBackupDraft)
+      expect(capturedHooksStore?.handleLoadBackupDraft).toBe(mockHandleLoadBackupDraft)
+      expect(capturedHooksStore?.handleRestoreFromPublishedWorkflow).toBe(mockHandleRestoreFromPublishedWorkflow)
+      expect(capturedHooksStore?.handleRun).toBe(mockHandleRun)
+      expect(capturedHooksStore?.handleStopRun).toBe(mockHandleStopRun)
+      expect(capturedHooksStore?.handleStartWorkflowRun).toBe(mockHandleStartWorkflowRun)
+      expect(capturedHooksStore?.handleWorkflowStartRunInWorkflow).toBe(mockHandleWorkflowStartRunInWorkflow)
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
new file mode 100644
index 0000000000..db8a333143
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/workflow-panel.spec.tsx
@@ -0,0 +1,52 @@
+import type { PanelProps } from '@/app/components/workflow/panel'
+import type { SnippetInputField } from '@/models/snippet'
+import { render, waitFor } from '@testing-library/react'
+import SnippetWorkflowPanel from '../workflow-panel'
+
+let capturedPanelProps: PanelProps | null = null
+
+vi.mock('@/app/components/workflow/panel', () => ({
+  default: (props: PanelProps) => {
+    capturedPanelProps = props
+    return <div data-testid="workflow-panel">{props.components?.left}</div>
+  },
+}))
+
+const defaultFields: SnippetInputField[] = []
+
+describe('SnippetWorkflowPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedPanelProps = null
+  })
+
+  // Verifies snippet panel wires version history support into the shared workflow panel.
+  describe('Rendering', () => {
+    it('should pass snippet version history panel props to the shared workflow panel', async () => {
+      render(
+        <SnippetWorkflowPanel
+          snippetId="snippet-1"
+          fields={defaultFields}
+          editingField={null}
+          isEditorOpen={false}
+          isInputPanelOpen={false}
+          onCloseInputPanel={vi.fn()}
+          onOpenEditor={vi.fn()}
+          onCloseEditor={vi.fn()}
+          onSubmitField={vi.fn()}
+          onRemoveField={vi.fn()}
+          onSortChange={vi.fn()}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(capturedPanelProps?.versionHistoryPanelProps?.getVersionListUrl).toBe('/snippets/snippet-1/workflows')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.deleteVersionUrl?.('version-1')).toBe('/snippets/snippet-1/workflows/version-1')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.restoreVersionUrl('version-1')).toBe('/snippets/snippet-1/workflows/version-1/restore')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.updateVersionUrl?.('version-1')).toBe('/snippets/snippet-1/workflows/version-1')
+        expect(capturedPanelProps?.versionHistoryPanelProps?.latestVersionId).toBe('')
+        expect(capturedPanelProps?.components?.right).toBeTruthy()
+      })
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
new file mode 100644
index 0000000000..f8f9f1daba
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-input-field-actions.spec.ts
@@ -0,0 +1,168 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { act, renderHook } from '@testing-library/react'
+import { toast } from '@/app/components/base/ui/toast'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetInputFieldActions } from '../use-snippet-input-field-actions'
+
+const mockSyncInputFieldsDraft = vi.fn()
+const mockCloseEditor = vi.fn()
+const mockOpenEditor = vi.fn()
+const mockSetFields = vi.fn()
+const mockSetInputPanelOpen = vi.fn()
+const mockToggleInputPanel = vi.fn()
+
+let snippetDetailStoreState: {
+  editingField: SnippetInputField | null
+  fields: SnippetInputField[]
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  closeEditor: typeof mockCloseEditor
+  openEditor: typeof mockOpenEditor
+  setFields: typeof mockSetFields
+  setInputPanelOpen: typeof mockSetInputPanelOpen
+  toggleInputPanel: typeof mockToggleInputPanel
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}))
+
+vi.mock('../../../hooks/use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    syncInputFieldsDraft: mockSyncInputFieldsDraft,
+  }),
+}))
+
+vi.mock('../../../store', () => ({
+  useSnippetDetailStore: (selector: (state: typeof snippetDetailStoreState) => unknown) => selector(snippetDetailStoreState),
+}))
+
+const createField = (overrides: Partial<SnippetInputField> = {}): SnippetInputField => ({
+  type: PipelineInputVarType.textInput,
+  label: 'Blog URL',
+  variable: 'blog_url',
+  required: true,
+  ...overrides,
+})
+
+describe('useSnippetInputFieldActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    snippetDetailStoreState = {
+      editingField: null,
+      fields: [],
+      isEditorOpen: false,
+      isInputPanelOpen: true,
+      closeEditor: mockCloseEditor,
+      openEditor: mockOpenEditor,
+      setFields: mockSetFields,
+      setInputPanelOpen: mockSetInputPanelOpen,
+      toggleInputPanel: mockToggleInputPanel,
+    }
+    mockSetFields.mockImplementation((fields: SnippetInputField[]) => {
+      snippetDetailStoreState.fields = fields
+    })
+    mockSyncInputFieldsDraft.mockResolvedValue(undefined)
+  })
+
+  describe('Field sync', () => {
+    it('should remove a field and sync the draft', () => {
+      snippetDetailStoreState.fields = [createField()]
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+      }))
+
+      act(() => {
+        result.current.handleRemoveField(0)
+      })
+
+      expect(mockSetFields).toHaveBeenCalledWith([])
+      expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([], {
+        onRefresh: expect.any(Function),
+      })
+    })
+
+    it('should append a new field and close the editor after syncing', () => {
+      snippetDetailStoreState.fields = [createField()]
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+      }))
+
+      act(() => {
+        result.current.handleSubmitField(createField({
+          label: 'Topic',
+          variable: 'topic',
+        }))
+      })
+
+      expect(mockSetFields).toHaveBeenCalledWith([
+        createField(),
+        createField({
+          label: 'Topic',
+          variable: 'topic',
+        }),
+      ])
+      expect(mockSyncInputFieldsDraft).toHaveBeenCalledWith([
+        createField(),
+        createField({
+          label: 'Topic',
+          variable: 'topic',
+        }),
+      ], {
+        onRefresh: expect.any(Function),
+      })
+      expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+    })
+
+    it('should reject duplicated variables without syncing', () => {
+      snippetDetailStoreState.fields = [createField()]
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+      }))
+
+      act(() => {
+        result.current.handleSubmitField(createField({
+          label: 'Duplicated',
+          variable: 'blog_url',
+        }))
+      })
+
+      expect(toast.error).toHaveBeenCalledWith('datasetPipeline.inputFieldPanel.error.variableDuplicate')
+      expect(mockSyncInputFieldsDraft).not.toHaveBeenCalled()
+      expect(mockCloseEditor).not.toHaveBeenCalled()
+      expect(mockSetFields).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Panel actions', () => {
+    it('should close the editor before toggling the input panel when the panel is open', () => {
+      snippetDetailStoreState.fields = [createField()]
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+      }))
+
+      act(() => {
+        result.current.handleToggleInputPanel()
+      })
+
+      expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+      expect(mockToggleInputPanel).toHaveBeenCalledTimes(1)
+    })
+
+    it('should close the input panel and clear the editor state', () => {
+      snippetDetailStoreState.fields = [createField()]
+      const { result } = renderHook(() => useSnippetInputFieldActions({
+        snippetId: 'snippet-1',
+      }))
+
+      act(() => {
+        result.current.handleCloseInputPanel()
+      })
+
+      expect(mockCloseEditor).toHaveBeenCalledTimes(1)
+      expect(mockSetInputPanelOpen).toHaveBeenCalledWith(false)
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
new file mode 100644
index 0000000000..d3d46e89cb
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/__tests__/use-snippet-publish.spec.ts
@@ -0,0 +1,134 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { toast } from '@/app/components/base/ui/toast'
+import { useSnippetPublish } from '../use-snippet-publish'
+
+const mockMutateAsync = vi.fn()
+const mockSetPublishMenuOpen = vi.fn()
+const mockUseKeyPress = vi.fn()
+const mockSetPublishedAt = vi.fn()
+
+let isPublishMenuOpen = false
+let isPending = false
+let shortcutHandler: ((event: KeyboardEvent) => void) | undefined
+
+vi.mock('ahooks', () => ({
+  useKeyPress: (...args: Parameters<typeof mockUseKeyPress>) => mockUseKeyPress(...args),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}))
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  usePublishSnippetWorkflowMutation: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => ({
+      setPublishedAt: mockSetPublishedAt,
+    }),
+  }),
+}))
+
+vi.mock('../../../store', () => ({
+  useSnippetDetailStore: (selector: (state: {
+    isPublishMenuOpen: boolean
+    setPublishMenuOpen: typeof mockSetPublishMenuOpen
+  }) => unknown) => selector({
+    isPublishMenuOpen,
+    setPublishMenuOpen: mockSetPublishMenuOpen,
+  }),
+}))
+
+describe('useSnippetPublish', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isPublishMenuOpen = false
+    isPending = false
+    shortcutHandler = undefined
+    mockMutateAsync.mockResolvedValue({ created_at: 1_712_345_678 })
+    mockUseKeyPress.mockImplementation((_key, handler) => {
+      shortcutHandler = handler
+    })
+  })
+
+  describe('Publish action', () => {
+    it('should publish the snippet, close the menu, and show success feedback', async () => {
+      const { result } = renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+      }))
+
+      await act(async () => {
+        await result.current.handlePublish()
+      })
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        params: { snippetId: 'snippet-1' },
+      })
+      expect(mockSetPublishedAt).toHaveBeenCalledWith(1_712_345_678)
+      expect(mockSetPublishMenuOpen).toHaveBeenCalledWith(false)
+      expect(toast.success).toHaveBeenCalledWith('snippet.publishSuccess')
+    })
+
+    it('should surface publish errors through toast feedback', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('publish failed'))
+
+      const { result } = renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+      }))
+
+      await act(async () => {
+        await result.current.handlePublish()
+      })
+
+      expect(toast.error).toHaveBeenCalledWith('publish failed')
+      expect(mockSetPublishMenuOpen).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Keyboard shortcut', () => {
+    it('should trigger publish on ctrl+shift+p in the orchestrate section', async () => {
+      renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+      }))
+
+      const event = new KeyboardEvent('keydown')
+      const preventDefault = vi.spyOn(event, 'preventDefault')
+
+      act(() => {
+        shortcutHandler?.(event)
+      })
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          params: { snippetId: 'snippet-1' },
+        })
+      })
+      expect(preventDefault).toHaveBeenCalledTimes(1)
+    })
+
+    it('should ignore the shortcut while publishing is pending', () => {
+      isPending = true
+      renderHook(() => useSnippetPublish({
+        snippetId: 'snippet-1',
+      }))
+
+      const event = new KeyboardEvent('keydown')
+      const preventDefault = vi.spyOn(event, 'preventDefault')
+
+      act(() => {
+        shortcutHandler?.(event)
+      })
+
+      expect(mockMutateAsync).not.toHaveBeenCalled()
+      expect(preventDefault).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
new file mode 100644
index 0000000000..503949004a
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/use-snippet-input-field-actions.ts
@@ -0,0 +1,96 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { toast } from '@/app/components/base/ui/toast'
+import { useNodesSyncDraft } from '../../hooks/use-nodes-sync-draft'
+import { useSnippetDetailStore } from '../../store'
+
+type UseSnippetInputFieldActionsOptions = {
+  snippetId: string
+}
+
+export const useSnippetInputFieldActions = ({
+  snippetId,
+}: UseSnippetInputFieldActionsOptions) => {
+  const { t } = useTranslation('snippet')
+  const { syncInputFieldsDraft } = useNodesSyncDraft(snippetId)
+  const {
+    editingField,
+    fields,
+    isEditorOpen,
+    isInputPanelOpen,
+    closeEditor,
+    openEditor,
+    setFields,
+    setInputPanelOpen,
+    toggleInputPanel,
+  } = useSnippetDetailStore(useShallow(state => ({
+    editingField: state.editingField,
+    fields: state.fields,
+    isEditorOpen: state.isEditorOpen,
+    isInputPanelOpen: state.isInputPanelOpen,
+    closeEditor: state.closeEditor,
+    openEditor: state.openEditor,
+    setFields: state.setFields,
+    setInputPanelOpen: state.setInputPanelOpen,
+    toggleInputPanel: state.toggleInputPanel,
+  })))
+
+  const handleSortChange = useCallback((newFields: SnippetInputField[]) => {
+    setFields(newFields)
+  }, [setFields])
+
+  const handleRemoveField = useCallback((index: number) => {
+    const nextFields = fields.filter((_, currentIndex) => currentIndex !== index)
+    setFields(nextFields)
+    void syncInputFieldsDraft(nextFields, {
+      onRefresh: setFields,
+    })
+  }, [fields, setFields, syncInputFieldsDraft])
+
+  const handleSubmitField = useCallback((field: SnippetInputField) => {
+    const originalVariable = editingField?.variable
+    const duplicated = fields.some(item => item.variable === field.variable && item.variable !== originalVariable)
+
+    if (duplicated) {
+      toast.error(t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }))
+      return
+    }
+
+    const nextFields = originalVariable
+      ? fields.map(item => item.variable === originalVariable ? field : item)
+      : [...fields, field]
+
+    setFields(nextFields)
+    void syncInputFieldsDraft(nextFields, {
+      onRefresh: setFields,
+    })
+    closeEditor()
+  }, [closeEditor, editingField?.variable, fields, setFields, syncInputFieldsDraft, t])
+
+  const handleToggleInputPanel = useCallback(() => {
+    if (isInputPanelOpen)
+      closeEditor()
+    toggleInputPanel()
+  }, [closeEditor, isInputPanelOpen, toggleInputPanel])
+
+  const handleCloseInputPanel = useCallback(() => {
+    closeEditor()
+    setInputPanelOpen(false)
+  }, [closeEditor, setInputPanelOpen])
+
+  return {
+    editingField,
+    fields,
+    isEditorOpen,
+    isInputPanelOpen,
+    openEditor,
+    closeEditor,
+    handleCloseInputPanel,
+    handleRemoveField,
+    handleSortChange,
+    handleSubmitField,
+    handleToggleInputPanel,
+  }
+}
diff --git a/web/app/components/snippets/components/hooks/use-snippet-publish.ts b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
new file mode 100644
index 0000000000..fc3db4d8f4
--- /dev/null
+++ b/web/app/components/snippets/components/hooks/use-snippet-publish.ts
@@ -0,0 +1,57 @@
+import { useKeyPress } from 'ahooks'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { toast } from '@/app/components/base/ui/toast'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
+import { usePublishSnippetWorkflowMutation } from '@/service/use-snippet-workflows'
+import { useSnippetDetailStore } from '../../store'
+
+type UseSnippetPublishOptions = {
+  snippetId: string
+}
+
+export const useSnippetPublish = ({
+  snippetId,
+}: UseSnippetPublishOptions) => {
+  const { t } = useTranslation('snippet')
+  const workflowStore = useWorkflowStore()
+  const publishSnippetMutation = usePublishSnippetWorkflowMutation(snippetId)
+  const {
+    isPublishMenuOpen,
+    setPublishMenuOpen,
+  } = useSnippetDetailStore(useShallow(state => ({
+    isPublishMenuOpen: state.isPublishMenuOpen,
+    setPublishMenuOpen: state.setPublishMenuOpen,
+  })))
+
+  const handlePublish = useCallback(async () => {
+    try {
+      const publishedWorkflow = await publishSnippetMutation.mutateAsync({
+        params: { snippetId },
+      })
+      workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
+      setPublishMenuOpen(false)
+      toast.success(t('publishSuccess'))
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('publishFailed'))
+    }
+  }, [publishSnippetMutation, setPublishMenuOpen, snippetId, t, workflowStore])
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (event) => {
+    if (publishSnippetMutation.isPending)
+      return
+
+    event.preventDefault()
+    void handlePublish()
+  }, { exactMatch: true, useCapture: true })
+
+  return {
+    handlePublish,
+    isPublishMenuOpen,
+    isPublishing: publishSnippetMutation.isPending,
+    setPublishMenuOpen,
+  }
+}
diff --git a/web/app/components/snippets/components/input-field-editor.tsx b/web/app/components/snippets/components/input-field-editor.tsx
new file mode 100644
index 0000000000..a50f7bd0a4
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-editor.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import type { SnippetInputField } from '@/models/snippet'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { convertFormDataToINputField, convertToInputFieldFormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/utils'
+import { useFloatingRight } from '@/app/components/rag-pipeline/components/panel/input-field/hooks'
+import InputFieldForm from './input-field-form'
+
+type SnippetInputFieldEditorProps = {
+  field?: SnippetInputField | null
+  onClose: () => void
+  onSubmit: (field: SnippetInputField) => void
+}
+
+const SnippetInputFieldEditor = ({
+  field,
+  onClose,
+  onSubmit,
+}: SnippetInputFieldEditorProps) => {
+  const { t } = useTranslation()
+  const { floatingRight, floatingRightWidth } = useFloatingRight(400)
+
+  const initialData = useMemo(() => {
+    return convertToInputFieldFormData(field || undefined)
+  }, [field])
+
+  const handleSubmit = useCallback((value: FormData) => {
+    onSubmit(convertFormDataToINputField(value))
+  }, [onSubmit])
+
+  return (
+    <div
+      className={cn(
+        'relative mr-1 flex h-fit max-h-full flex-col overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9',
+        'transition-all duration-300 ease-in-out',
+        floatingRight && 'absolute right-0 z-[100]',
+      )}
+      style={{
+        width: `min(${floatingRightWidth}px, calc(100vw - 24px))`,
+      }}
+    >
+      <div className="system-xl-semibold flex items-center pt-3.5 pr-11 pb-1 pl-4 text-text-primary">
+        {field ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
+      </div>
+      <button
+        type="button"
+        className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center"
+        onClick={onClose}
+      >
+        <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+      </button>
+      <InputFieldForm
+        initialData={initialData}
+        supportFile
+        onCancel={onClose}
+        onSubmit={handleSubmit}
+        isEditMode={!!field}
+      />
+    </div>
+  )
+}
+
+export default SnippetInputFieldEditor
diff --git a/web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts b/web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts
new file mode 100644
index 0000000000..178d4a136d
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/__tests__/hooks.spec.ts
@@ -0,0 +1,40 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetInputFieldConfigurations } from '../hooks'
+
+const mockUseConfigurations = vi.fn()
+
+vi.mock('@/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks', () => ({
+  useConfigurations: (...args: unknown[]) => mockUseConfigurations(...args),
+}))
+
+describe('useSnippetInputFieldConfigurations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should make text maxLength configuration optional for snippets only', () => {
+    mockUseConfigurations.mockReturnValue([
+      {
+        variable: 'maxLength',
+        required: true,
+        showConditions: [{ variable: 'type', value: PipelineInputVarType.textInput }],
+      },
+      {
+        variable: 'required',
+        required: true,
+        showConditions: [],
+      },
+    ])
+
+    const { result } = renderHook(() => useSnippetInputFieldConfigurations({
+      getFieldValue: vi.fn(),
+      setFieldValue: vi.fn(),
+      supportFile: true,
+    }))
+
+    expect(result.current[0].required).toBe(false)
+    expect(result.current[1].required).toBe(true)
+  })
+})
diff --git a/web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts b/web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts
new file mode 100644
index 0000000000..63a531a9d6
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/__tests__/schema.spec.ts
@@ -0,0 +1,51 @@
+import type { TFunction } from 'i18next'
+import { describe, expect, it, vi } from 'vitest'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { createSnippetInputFieldSchema, TEXT_MAX_LENGTH } from '../schema'
+
+vi.mock('@/config', () => ({
+  MAX_VAR_KEY_LENGTH: 30,
+}))
+
+const t: TFunction = ((key: string) => key) as unknown as TFunction
+
+describe('createSnippetInputFieldSchema', () => {
+  const defaultOptions = { maxFileUploadLimit: 10 }
+
+  it('should allow text-input maxLength to be omitted', () => {
+    const schema = createSnippetInputFieldSchema(PipelineInputVarType.textInput, t, defaultOptions)
+    const result = schema.safeParse({
+      type: 'text-input',
+      variable: 'text_var',
+      label: 'Text',
+      required: false,
+    })
+
+    expect(result.success).toBe(true)
+  })
+
+  it('should still reject text-input maxLength above the limit', () => {
+    const schema = createSnippetInputFieldSchema(PipelineInputVarType.textInput, t, defaultOptions)
+    const result = schema.safeParse({
+      type: 'text-input',
+      variable: 'text_var',
+      label: 'Text',
+      required: false,
+      maxLength: TEXT_MAX_LENGTH + 1,
+    })
+
+    expect(result.success).toBe(false)
+  })
+
+  it('should allow paragraph maxLength to be omitted', () => {
+    const schema = createSnippetInputFieldSchema(PipelineInputVarType.paragraph, t, defaultOptions)
+    const result = schema.safeParse({
+      type: 'paragraph',
+      variable: 'paragraph_var',
+      label: 'Paragraph',
+      required: false,
+    })
+
+    expect(result.success).toBe(true)
+  })
+})
diff --git a/web/app/components/snippets/components/input-field-form/hooks.ts b/web/app/components/snippets/components/input-field-form/hooks.ts
new file mode 100644
index 0000000000..d3a98198b1
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/hooks.ts
@@ -0,0 +1,30 @@
+import type { DeepKeys } from '@tanstack/react-form'
+import type { FormData } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import { useMemo } from 'react'
+import { useConfigurations } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks'
+import { PipelineInputVarType } from '@/models/pipeline'
+
+type UseSnippetInputFieldConfigurationsProps = {
+  getFieldValue: (fieldName: DeepKeys<FormData>) => unknown
+  setFieldValue: (fieldName: DeepKeys<FormData>, value: unknown) => void
+  supportFile: boolean
+}
+
+export const useSnippetInputFieldConfigurations = (props: UseSnippetInputFieldConfigurationsProps) => {
+  const configurations = useConfigurations(props)
+
+  return useMemo(() => {
+    return configurations.map((configuration) => {
+      const isTextMaxLengthField = configuration.variable === 'maxLength'
+        && configuration.showConditions?.some(condition => condition.value === PipelineInputVarType.textInput)
+
+      if (!isTextMaxLengthField)
+        return configuration
+
+      return {
+        ...configuration,
+        required: false,
+      }
+    })
+  }, [configurations])
+}
diff --git a/web/app/components/snippets/components/input-field-form/index.tsx b/web/app/components/snippets/components/input-field-form/index.tsx
new file mode 100644
index 0000000000..e5620c9299
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/index.tsx
@@ -0,0 +1,92 @@
+import type { FormData, InputFieldFormProps } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import type { MoreInfo } from '@/app/components/workflow/types'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
+import { useAppForm } from '@/app/components/base/form'
+import { Button } from '@/app/components/base/ui/button'
+import { toast } from '@/app/components/base/ui/toast'
+import HiddenFields from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields'
+import ShowAllSettings from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings'
+import { ChangeType } from '@/app/components/workflow/types'
+import { useFileUploadConfig } from '@/service/use-common'
+import InitialFields from './initial-fields'
+import { createSnippetInputFieldSchema } from './schema'
+
+const SnippetInputFieldForm = ({ initialData, supportFile = false, onCancel, onSubmit, isEditMode = true }: InputFieldFormProps) => {
+  const { t } = useTranslation()
+  const { data: fileUploadConfigResponse } = useFileUploadConfig()
+  const { maxFileUploadLimit } = useFileSizeLimit(fileUploadConfigResponse)
+  const inputFieldForm = useAppForm({
+    defaultValues: initialData,
+    validators: {
+      onSubmit: ({ value }) => {
+        const { type } = value
+        const schema = createSnippetInputFieldSchema(type, t, { maxFileUploadLimit })
+        const result = schema.safeParse(value)
+        if (!result.success) {
+          const issues = result.error.issues
+          const firstIssue = issues[0]
+          const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
+          toast.error(errorMessage)
+          return errorMessage
+        }
+        return undefined
+      },
+    },
+    onSubmit: ({ value }) => {
+      let moreInfo: MoreInfo | undefined
+      if (isEditMode && value.variable !== initialData?.variable) {
+        moreInfo = {
+          type: ChangeType.changeVarName,
+          payload: { beforeKey: initialData?.variable || '', afterKey: value.variable },
+        }
+      }
+      onSubmit(value as FormData, moreInfo)
+    },
+  })
+  const [showAllSettings, setShowAllSettings] = useState(false)
+  const InitialFieldsComp = InitialFields({
+    initialData,
+    supportFile,
+  })
+  const HiddenFieldsComp = HiddenFields({
+    initialData,
+  })
+  const handleShowAllSettings = useCallback(() => {
+    setShowAllSettings(true)
+  }, [])
+  const ShowAllSettingComp = ShowAllSettings({
+    initialData,
+    handleShowAllSettings,
+  })
+
+  return (
+    <form
+      className="w-full"
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        inputFieldForm.handleSubmit()
+      }}
+    >
+      <div className="flex flex-col gap-4 px-4 py-2">
+        <InitialFieldsComp form={inputFieldForm} />
+        <Divider type="horizontal" />
+        {!showAllSettings && (<ShowAllSettingComp form={inputFieldForm} />)}
+        {showAllSettings && (<HiddenFieldsComp form={inputFieldForm} />)}
+      </div>
+      <div className="flex items-center justify-end gap-x-2 p-4 pt-2">
+        <Button variant="secondary" onClick={onCancel}>
+          {t('operation.cancel', { ns: 'common' })}
+        </Button>
+        <inputFieldForm.AppForm>
+          <inputFieldForm.Actions />
+        </inputFieldForm.AppForm>
+      </div>
+    </form>
+  )
+}
+
+export default SnippetInputFieldForm
diff --git a/web/app/components/snippets/components/input-field-form/initial-fields.tsx b/web/app/components/snippets/components/input-field-form/initial-fields.tsx
new file mode 100644
index 0000000000..0028995d76
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/initial-fields.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { useCallback } from 'react'
+import { withForm } from '@/app/components/base/form'
+import InputField from '@/app/components/base/form/form-scenarios/input-field/field'
+import { useSnippetInputFieldConfigurations } from './hooks'
+
+type InitialFieldsProps = {
+  initialData?: Record<string, unknown>
+  supportFile: boolean
+}
+
+const InitialFields = ({
+  initialData,
+  supportFile,
+}: InitialFieldsProps) => withForm({
+  defaultValues: initialData,
+  // eslint-disable-next-line react/component-hook-factories
+  render: function Render({
+    form,
+  }) {
+    const getFieldValue = useCallback((fieldName: string) => {
+      return form.getFieldValue(fieldName)
+    }, [form])
+
+    const setFieldValue = useCallback((fieldName: string, value: unknown) => {
+      form.setFieldValue(fieldName, value)
+    }, [form])
+
+    const initialConfigurations = useSnippetInputFieldConfigurations({
+      getFieldValue,
+      setFieldValue,
+      supportFile,
+    })
+
+    return (
+      <>
+        {initialConfigurations.map((config) => {
+          const FieldComponent = InputField({
+            initialData,
+            config,
+          })
+          const key = `${config.variable}-${config.label}-${config.showConditions.map(condition => String(condition.value)).join('-') || 'default'}`
+          return <FieldComponent key={key} form={form} />
+        })}
+      </>
+    )
+  },
+})
+
+export default InitialFields
diff --git a/web/app/components/snippets/components/input-field-form/schema.ts b/web/app/components/snippets/components/input-field-form/schema.ts
new file mode 100644
index 0000000000..563e6ec5e9
--- /dev/null
+++ b/web/app/components/snippets/components/input-field-form/schema.ts
@@ -0,0 +1,95 @@
+import type { TFunction } from 'i18next'
+import type { SchemaOptions } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/types'
+import * as z from 'zod'
+import { InputTypeEnum } from '@/app/components/base/form/components/field/input-type-select/types'
+import { MAX_VAR_KEY_LENGTH } from '@/config'
+import { PipelineInputVarType } from '@/models/pipeline'
+
+export const TEXT_MAX_LENGTH = 256
+
+const TransferMethod = z.enum([
+  'all',
+  'local_file',
+  'remote_url',
+])
+
+const SupportedFileTypes = z.enum([
+  'image',
+  'document',
+  'video',
+  'audio',
+  'custom',
+])
+
+export const createSnippetInputFieldSchema = (type: PipelineInputVarType, t: TFunction, options: SchemaOptions) => {
+  const { maxFileUploadLimit } = options
+  const commonSchema = z.object({
+    type: InputTypeEnum,
+    variable: z.string().nonempty({
+      message: t('varKeyError.canNoBeEmpty', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }).max(MAX_VAR_KEY_LENGTH, {
+      message: t('varKeyError.tooLong', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }).regex(/^(?!\d)\w+/, {
+      message: t('varKeyError.notStartWithNumber', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }).regex(/^[a-z_]\w{0,29}$/i, {
+      message: t('varKeyError.notValid', { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
+    }),
+    label: z.string().nonempty({
+      message: t('variableConfig.errorMsg.labelNameRequired', { ns: 'appDebug' }),
+    }),
+    required: z.boolean(),
+    tooltips: z.string().optional(),
+  })
+
+  if (type === PipelineInputVarType.textInput || type === PipelineInputVarType.paragraph) {
+    return z.object({
+      maxLength: z.number().min(1).max(TEXT_MAX_LENGTH).optional(),
+      default: z.string().optional(),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.number) {
+    return z.object({
+      default: z.number().optional(),
+      unit: z.string().optional(),
+      placeholder: z.string().optional(),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.select) {
+    return z.object({
+      options: z.array(z.string()).nonempty({
+        message: t('variableConfig.errorMsg.atLeastOneOption', { ns: 'appDebug' }),
+      }).refine(
+        arr => new Set(arr).size === arr.length,
+        {
+          message: t('variableConfig.errorMsg.optionRepeat', { ns: 'appDebug' }),
+        },
+      ),
+      default: z.string().optional(),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.singleFile) {
+    return z.object({
+      allowedFileUploadMethods: z.array(TransferMethod),
+      allowedTypesAndExtensions: z.object({
+        allowedFileExtensions: z.array(z.string()).optional(),
+        allowedFileTypes: z.array(SupportedFileTypes),
+      }),
+    }).merge(commonSchema).passthrough()
+  }
+
+  if (type === PipelineInputVarType.multiFiles) {
+    return z.object({
+      allowedFileUploadMethods: z.array(TransferMethod),
+      allowedTypesAndExtensions: z.object({
+        allowedFileExtensions: z.array(z.string()).optional(),
+        allowedFileTypes: z.array(SupportedFileTypes),
+      }),
+      maxLength: z.number().min(1).max(maxFileUploadLimit),
+    }).merge(commonSchema).passthrough()
+  }
+
+  return commonSchema.passthrough()
+}
diff --git a/web/app/components/snippets/components/panel/index.tsx b/web/app/components/snippets/components/panel/index.tsx
new file mode 100644
index 0000000000..a87d59e03a
--- /dev/null
+++ b/web/app/components/snippets/components/panel/index.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import type { SortableItem } from '@/app/components/rag-pipeline/components/panel/input-field/field-list/types'
+import type { SnippetInputField } from '@/models/snippet'
+import { memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import FieldListContainer from '@/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container'
+
+type SnippetInputFieldPanelProps = {
+  fields: SnippetInputField[]
+  onClose: () => void
+  onAdd: () => void
+  onEdit: (field: SnippetInputField) => void
+  onRemove: (index: number) => void
+  onSortChange: (fields: SnippetInputField[]) => void
+}
+
+const toInputFields = (list: SortableItem[]) => {
+  return list.map((item) => {
+    const { id: _id, chosen: _chosen, selected: _selected, ...field } = item
+    return field
+  })
+}
+
+const SnippetInputFieldPanel = ({
+  fields,
+  onClose,
+  onAdd,
+  onEdit,
+  onRemove,
+  onSortChange,
+}: SnippetInputFieldPanelProps) => {
+  const { t } = useTranslation('snippet')
+
+  const handleRemove = useCallback((index: number) => {
+    onRemove(index)
+  }, [onRemove])
+
+  const handleEdit = useCallback((id: string) => {
+    const field = fields.find(item => item.variable === id)
+    if (field)
+      onEdit(field)
+  }, [fields, onEdit])
+
+  return (
+    <div className="mr-1 flex h-full w-[min(400px,calc(100vw-24px))] flex-col rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
+      <div className="flex items-start justify-between gap-3 px-4 pb-2 pt-4">
+        <div className="min-w-0">
+          <div className="text-text-primary system-xl-semibold">
+            {t('panelTitle')}
+          </div>
+          <div className="pt-1 text-text-tertiary system-sm-regular">
+            {t('panelDescription')}
+          </div>
+        </div>
+        <button
+          type="button"
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover"
+          onClick={onClose}
+        >
+          <span aria-hidden className="i-ri-close-line h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="px-4 pb-2">
+        <Button variant="primary" size="medium" className="gap-0.5 px-3" onClick={onAdd}>
+          <span aria-hidden className="i-ri-add-line h-4 w-4" />
+          {t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
+        </Button>
+      </div>
+
+      <div className="flex grow flex-col overflow-y-auto">
+        <FieldListContainer
+          className="flex flex-col gap-y-1 px-4 py-4"
+          inputFields={fields}
+          onListSortChange={list => onSortChange(toInputFields(list))}
+          onRemoveField={handleRemove}
+          onEditField={handleEdit}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default memo(SnippetInputFieldPanel)
diff --git a/web/app/components/snippets/components/publish-menu.tsx b/web/app/components/snippets/components/publish-menu.tsx
new file mode 100644
index 0000000000..d5af23f935
--- /dev/null
+++ b/web/app/components/snippets/components/publish-menu.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import type { SnippetDetailUIModel } from '@/models/snippet'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+
+const PublishMenu = ({
+  draftUpdatedAt,
+  publishedAt,
+  uiMeta,
+  onPublish,
+  isPublishing = false,
+}: {
+  draftUpdatedAt: number
+  publishedAt: number
+  uiMeta: SnippetDetailUIModel
+  onPublish: () => void
+  isPublishing?: boolean
+}) => {
+  const { t } = useTranslation('snippet')
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+
+  const hasPublishedVersion = Boolean(publishedAt)
+
+  return (
+    <div className="flex flex-col gap-3 px-4 pt-3 pb-4">
+      <div className="flex flex-col">
+        <div className="min-h-6 system-xs-medium-uppercase text-text-tertiary">
+          {hasPublishedVersion
+            ? t('common.latestPublished', { ns: 'workflow' })
+            : t('publishMenuCurrentDraft')}
+        </div>
+        <div className="system-sm-medium text-text-secondary">
+          {hasPublishedVersion
+            ? `${t('common.publishedAt', { ns: 'workflow' })} ${formatTimeFromNow(publishedAt)}`
+            : draftUpdatedAt
+              ? `${t('common.autoSaved', { ns: 'workflow' })} · ${formatTimeFromNow(draftUpdatedAt)}`
+              : uiMeta.autoSavedAt}
+        </div>
+      </div>
+      <Button
+        variant="primary"
+        loading={isPublishing}
+        disabled={isPublishing}
+        className="w-full justify-center gap-1.5"
+        onClick={onPublish}
+      >
+        <span>{t('publishButton')}</span>
+        <div aria-hidden="true">
+          <ShortcutsName
+            keys={['ctrl', 'shift', 'p']}
+            bgColor="white"
+          />
+        </div>
+      </Button>
+    </div>
+  )
+}
+
+export default PublishMenu
diff --git a/web/app/components/snippets/components/snippet-card.tsx b/web/app/components/snippets/components/snippet-card.tsx
new file mode 100644
index 0000000000..764dba66f4
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-card.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import type { SnippetListItem } from '@/types/snippet'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '@/app/components/base/app-icon'
+import Link from '@/next/link'
+
+type Props = {
+  snippet: SnippetListItem
+}
+
+const SnippetCard = ({ snippet }: Props) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <Link href={`/snippets/${snippet.id}/orchestrate`} className="group col-span-1">
+      <article className="relative inline-flex h-[160px] w-full flex-col rounded-xl border border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-lg">
+        {!snippet.is_published && (
+          <div className="absolute right-0 top-0 rounded-bl-lg rounded-tr-xl bg-background-default-dimmed px-2 py-1 text-[10px] font-medium uppercase leading-3 text-text-placeholder">
+            Draft
+          </div>
+        )}
+        <div className="flex h-[66px] items-center gap-3 px-[14px] pb-3 pt-[14px]">
+          <AppIcon
+            size="large"
+            iconType={snippet.icon_info.icon_type}
+            icon={snippet.icon_info.icon}
+            background={snippet.icon_info.icon_background}
+            imageUrl={snippet.icon_info.icon_url}
+          />
+          <div className="w-0 grow py-[1px]">
+            <div className="truncate text-sm font-semibold leading-5 text-text-secondary" title={snippet.name}>
+              {snippet.name}
+            </div>
+          </div>
+        </div>
+        <div className="h-[58px] px-[14px] text-xs leading-normal text-text-tertiary">
+          <div className="line-clamp-2" title={snippet.description}>
+            {snippet.description}
+          </div>
+        </div>
+        <div className="mt-auto flex items-center gap-1 px-[14px] pb-3 pt-2 text-xs leading-4 text-text-tertiary">
+          <span className="truncate">{snippet.author}</span>
+          <span>·</span>
+          <span className="truncate">{snippet.updated_at}</span>
+          {!snippet.is_published && (
+            <>
+              <span>·</span>
+              <span className="truncate">{t('usageCount', { count: snippet.use_count })}</span>
+            </>
+          )}
+        </div>
+      </article>
+    </Link>
+  )
+}
+
+export default SnippetCard
diff --git a/web/app/components/snippets/components/snippet-children.tsx b/web/app/components/snippets/components/snippet-children.tsx
new file mode 100644
index 0000000000..d6fc591b00
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-children.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import type { SnippetDetailUIModel, SnippetInputField } from '@/models/snippet'
+import SnippetInputFieldEditor from './input-field-editor'
+import SnippetInputFieldPanel from './panel'
+import SnippetHeader from './snippet-header'
+import SnippetWorkflowPanel from './workflow-panel'
+
+type SnippetChildrenProps = {
+  snippetId: string
+  fields: SnippetInputField[]
+  uiMeta: SnippetDetailUIModel
+  editingField: SnippetInputField | null
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  isPublishMenuOpen: boolean
+  isPublishing: boolean
+  onToggleInputPanel: () => void
+  onPublishMenuOpenChange: (open: boolean) => void
+  onCloseInputPanel: () => void
+  onPublish: () => void
+  onOpenEditor: (field?: SnippetInputField | null) => void
+  onCloseEditor: () => void
+  onSubmitField: (field: SnippetInputField) => void
+  onRemoveField: (index: number) => void
+  onSortChange: (fields: SnippetInputField[]) => void
+}
+
+const SnippetChildren = ({
+  snippetId,
+  fields,
+  uiMeta,
+  editingField,
+  isEditorOpen,
+  isInputPanelOpen,
+  isPublishMenuOpen,
+  isPublishing,
+  onToggleInputPanel,
+  onPublishMenuOpenChange,
+  onCloseInputPanel,
+  onPublish,
+  onOpenEditor,
+  onCloseEditor,
+  onSubmitField,
+  onRemoveField,
+  onSortChange,
+}: SnippetChildrenProps) => {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background-body to-transparent" />
+
+      <SnippetHeader
+        snippetId={snippetId}
+        inputFieldCount={fields.length}
+        uiMeta={uiMeta}
+        isPublishMenuOpen={isPublishMenuOpen}
+        isPublishing={isPublishing}
+        onToggleInputPanel={onToggleInputPanel}
+        onPublishMenuOpenChange={onPublishMenuOpenChange}
+        onPublish={onPublish}
+      />
+
+      <SnippetWorkflowPanel
+        snippetId={snippetId}
+        fields={fields}
+        editingField={editingField}
+        isEditorOpen={isEditorOpen}
+        isInputPanelOpen={isInputPanelOpen}
+        onCloseInputPanel={onCloseInputPanel}
+        onOpenEditor={onOpenEditor}
+        onCloseEditor={onCloseEditor}
+        onSubmitField={onSubmitField}
+        onRemoveField={onRemoveField}
+        onSortChange={onSortChange}
+      />
+
+      {(isInputPanelOpen || isEditorOpen) && (
+        <div className="pointer-events-none absolute bottom-1 right-1 top-14 z-30 flex justify-end">
+          <div className="pointer-events-auto flex h-full xl:hidden">
+            {isEditorOpen && (
+              <SnippetInputFieldEditor
+                field={editingField}
+                onClose={onCloseEditor}
+                onSubmit={onSubmitField}
+              />
+            )}
+            <SnippetInputFieldPanel
+              fields={fields}
+              onClose={onCloseInputPanel}
+              onAdd={() => onOpenEditor()}
+              onEdit={onOpenEditor}
+              onRemove={onRemoveField}
+              onSortChange={onSortChange}
+            />
+          </div>
+        </div>
+      )}
+
+    </>
+  )
+}
+
+export default SnippetChildren
diff --git a/web/app/components/snippets/components/snippet-create-card.tsx b/web/app/components/snippets/components/snippet-create-card.tsx
new file mode 100644
index 0000000000..9702c5a90e
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-create-card.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
+import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
+import { useRouter } from '@/next/navigation'
+import {
+  useCreateSnippetMutation,
+} from '@/service/use-snippets'
+import SnippetImportDSLDialog from './snippet-import-dsl-dialog'
+
+const SnippetCreateCard = () => {
+  const { t } = useTranslation('snippet')
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+  const [isImportDSLDialogOpen, setIsImportDSLDialogOpen] = useState(false)
+
+  const handleCreateFromBlank = () => {
+    setIsCreateDialogOpen(true)
+  }
+
+  const handleImportDSL = () => {
+    setIsImportDSLDialogOpen(true)
+  }
+
+  const handleCreateSnippet = ({
+    name,
+    description,
+    icon,
+  }: {
+    name: string
+    description: string
+    icon: AppIconSelection
+  }) => {
+    createSnippetMutation.mutate({
+      body: {
+        name,
+        description: description || undefined,
+        icon_info: {
+          icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+          icon_type: icon.type,
+          icon_background: icon.type === 'emoji' ? icon.background : undefined,
+          icon_url: icon.type === 'image' ? icon.url : undefined,
+        },
+      },
+    }, {
+      onSuccess: (snippet) => {
+        toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+        setIsCreateDialogOpen(false)
+        push(`/snippets/${snippet.id}/orchestrate`)
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('createFailed'))
+      },
+    })
+  }
+
+  return (
+    <>
+      <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg transition-opacity">
+        <div className="grow rounded-t-xl p-2">
+          <div className="px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary">{t('create')}</div>
+          <button
+            type="button"
+            className="mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={createSnippetMutation.isPending}
+            onClick={handleCreateFromBlank}
+          >
+            <span aria-hidden className="i-ri-sticky-note-add-line mr-2 h-4 w-4 shrink-0" />
+            {t('createFromBlank')}
+          </button>
+          <button
+            type="button"
+            className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+            onClick={handleImportDSL}
+          >
+            <span aria-hidden className="i-ri-file-upload-line mr-2 h-4 w-4 shrink-0" />
+            {t('importDSL', { ns: 'app' })}
+          </button>
+        </div>
+      </div>
+
+      {isCreateDialogOpen && (
+        <CreateSnippetDialog
+          isOpen={isCreateDialogOpen}
+          isSubmitting={createSnippetMutation.isPending}
+          onClose={() => setIsCreateDialogOpen(false)}
+          onConfirm={handleCreateSnippet}
+        />
+      )}
+
+      {isImportDSLDialogOpen && (
+        <SnippetImportDSLDialog
+          show={isImportDSLDialogOpen}
+          onClose={() => setIsImportDSLDialogOpen(false)}
+          onSuccess={(snippetId) => {
+            setIsImportDSLDialogOpen(false)
+            push(`/snippets/${snippetId}/orchestrate`)
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default SnippetCreateCard
diff --git a/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx b/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..65975726ad
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/__tests__/index.spec.tsx
@@ -0,0 +1,89 @@
+import type { HeaderProps } from '@/app/components/workflow/header'
+import type { SnippetDetailUIModel } from '@/models/snippet'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SnippetHeader from '..'
+
+vi.mock('@/app/components/workflow/header', () => ({
+  default: (props: HeaderProps) => {
+    const CustomRunMode = props.normal?.runAndHistoryProps?.components?.RunMode
+
+    return (
+      <div
+        data-testid="workflow-header"
+        data-show-env={String(props.normal?.controls?.showEnvButton ?? true)}
+        data-show-global-variable={String(props.normal?.controls?.showGlobalVariableButton ?? true)}
+        data-history-url={props.normal?.runAndHistoryProps?.viewHistoryProps?.historyUrl ?? ''}
+      >
+        {props.normal?.components?.left}
+        {CustomRunMode && <CustomRunMode text={props.normal?.runAndHistoryProps?.runButtonText} />}
+        {props.normal?.components?.middle}
+      </div>
+    )
+  },
+}))
+
+describe('SnippetHeader', () => {
+  const mockToggleInputPanel = vi.fn()
+  const mockPublishMenuOpenChange = vi.fn()
+  const mockPublish = vi.fn()
+  const uiMeta: SnippetDetailUIModel = {
+    inputFieldCount: 1,
+    checklistCount: 2,
+    autoSavedAt: 'Auto-saved · a few seconds ago',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Verifies the wrapper passes the expected workflow header configuration.
+  describe('Rendering', () => {
+    it('should configure workflow header slots and hide workflow-only controls', () => {
+      render(
+        <SnippetHeader
+          snippetId="snippet-1"
+          inputFieldCount={3}
+          uiMeta={uiMeta}
+          isPublishMenuOpen={false}
+          isPublishing={false}
+          onToggleInputPanel={mockToggleInputPanel}
+          onPublishMenuOpenChange={mockPublishMenuOpenChange}
+          onPublish={mockPublish}
+        />,
+      )
+
+      const header = screen.getByTestId('workflow-header')
+      expect(header).toHaveAttribute('data-show-env', 'false')
+      expect(header).toHaveAttribute('data-show-global-variable', 'false')
+      expect(header).toHaveAttribute('data-history-url', '/snippets/snippet-1/workflow-runs')
+      expect(screen.getByRole('button', { name: /snippet\.inputFieldButton/i })).toHaveTextContent('3')
+      expect(screen.getByRole('button', { name: /snippet\.publishButton/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /snippet\.testRunButton/i })).toBeInTheDocument()
+    })
+  })
+
+  // Verifies forwarded callbacks still drive the snippet-specific controls.
+  describe('User Interactions', () => {
+    it('should invoke the snippet callbacks when input and publish trigger are clicked', () => {
+      render(
+        <SnippetHeader
+          snippetId="snippet-1"
+          inputFieldCount={1}
+          uiMeta={uiMeta}
+          isPublishMenuOpen={false}
+          isPublishing={false}
+          onToggleInputPanel={mockToggleInputPanel}
+          onPublishMenuOpenChange={mockPublishMenuOpenChange}
+          onPublish={mockPublish}
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: /snippet\.inputFieldButton/i }))
+      fireEvent.click(screen.getByRole('button', { name: /snippet\.publishButton/i }))
+
+      expect(mockToggleInputPanel).toHaveBeenCalledTimes(1)
+      expect(mockPublishMenuOpenChange).toHaveBeenCalledTimes(1)
+      expect(mockPublishMenuOpenChange.mock.calls[0][0]).toBe(true)
+    })
+  })
+})
diff --git a/web/app/components/snippets/components/snippet-header/index.tsx b/web/app/components/snippets/components/snippet-header/index.tsx
new file mode 100644
index 0000000000..b7a0488f63
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/index.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import type { HeaderProps } from '@/app/components/workflow/header'
+import type { SnippetDetailUIModel } from '@/models/snippet'
+import {
+  memo,
+  useMemo,
+} from 'react'
+import Header from '@/app/components/workflow/header'
+import { useStore } from '@/app/components/workflow/store'
+import InputFieldButton from './input-field-button'
+import Publisher from './publisher'
+import RunMode from './run-mode'
+
+type SnippetHeaderProps = {
+  snippetId: string
+  inputFieldCount: number
+  uiMeta: SnippetDetailUIModel
+  isPublishMenuOpen: boolean
+  isPublishing: boolean
+  onToggleInputPanel: () => void
+  onPublishMenuOpenChange: (open: boolean) => void
+  onPublish: () => void
+}
+
+const SnippetHeader = ({
+  snippetId,
+  inputFieldCount,
+  uiMeta,
+  isPublishMenuOpen,
+  isPublishing,
+  onToggleInputPanel,
+  onPublishMenuOpenChange,
+  onPublish,
+}: SnippetHeaderProps) => {
+  const draftUpdatedAt = useStore(state => state.draftUpdatedAt)
+  const publishedAt = useStore(state => state.publishedAt)
+  const viewHistoryProps = useMemo(() => {
+    return {
+      historyUrl: `/snippets/${snippetId}/workflow-runs`,
+    }
+  }, [snippetId])
+
+  const headerProps: HeaderProps = useMemo(() => {
+    return {
+      normal: {
+        components: {
+          left: <InputFieldButton count={inputFieldCount} onClick={onToggleInputPanel} />,
+          middle: (
+            <Publisher
+              uiMeta={uiMeta}
+              draftUpdatedAt={draftUpdatedAt}
+              open={isPublishMenuOpen}
+              isPublishing={isPublishing}
+              onOpenChange={onPublishMenuOpenChange}
+              onPublish={onPublish}
+              publishedAt={publishedAt}
+            />
+          ),
+        },
+        controls: {
+          showEnvButton: false,
+          showGlobalVariableButton: false,
+        },
+        runAndHistoryProps: {
+          showRunButton: true,
+          viewHistoryProps,
+          components: {
+            RunMode,
+          },
+        },
+      },
+      viewHistory: {
+        viewHistoryProps,
+      },
+    }
+  }, [draftUpdatedAt, inputFieldCount, isPublishMenuOpen, isPublishing, onPublish, onPublishMenuOpenChange, onToggleInputPanel, publishedAt, uiMeta, viewHistoryProps])
+
+  return <Header {...headerProps} />
+}
+
+export default memo(SnippetHeader)
diff --git a/web/app/components/snippets/components/snippet-header/input-field-button.tsx b/web/app/components/snippets/components/snippet-header/input-field-button.tsx
new file mode 100644
index 0000000000..a30e5032c5
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/input-field-button.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type InputFieldButtonProps = {
+  count: number
+  onClick: () => void
+}
+
+const InputFieldButton = ({
+  count,
+  onClick,
+}: InputFieldButtonProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <button
+      type="button"
+      className="flex h-8 items-center gap-1 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 text-text-secondary shadow-xs backdrop-blur"
+      onClick={onClick}
+    >
+      <span aria-hidden className="i-custom-vender-workflow-input-field h-4 w-4 shrink-0" />
+      <span className="text-[13px] font-medium leading-4">{t('inputFieldButton')}</span>
+      <span className="rounded-md border border-divider-deep px-1 py-0.5 text-[10px] font-medium leading-3 text-text-tertiary">
+        {count}
+      </span>
+    </button>
+  )
+}
+
+export default memo(InputFieldButton)
diff --git a/web/app/components/snippets/components/snippet-header/publisher.tsx b/web/app/components/snippets/components/snippet-header/publisher.tsx
new file mode 100644
index 0000000000..b79079fa7e
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/publisher.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import type { SnippetDetailUIModel } from '@/models/snippet'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import PublishMenu from '../publish-menu'
+
+type PublisherProps = {
+  uiMeta: SnippetDetailUIModel
+  draftUpdatedAt: number
+  open: boolean
+  isPublishing: boolean
+  onOpenChange: (open: boolean) => void
+  onPublish: () => void
+  publishedAt: number
+}
+
+const Publisher = ({
+  uiMeta,
+  draftUpdatedAt,
+  open,
+  isPublishing,
+  onOpenChange,
+  onPublish,
+  publishedAt,
+}: PublisherProps) => {
+  const { t } = useTranslation('snippet')
+
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger className="flex items-center gap-1 rounded-lg bg-components-button-primary-bg px-3 py-2 text-white shadow-[0px_2px_2px_-1px_rgba(0,0,0,0.12),0px_1px_1px_-1px_rgba(0,0,0,0.12),0px_0px_0px_0.5px_rgba(9,9,11,0.05)]">
+        <span className="text-[13px] leading-4 font-medium">{t('publishButton')}</span>
+        <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={6}
+        popupClassName="w-80 !rounded-2xl !bg-components-panel-bg !p-0 !shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]"
+      >
+        <PublishMenu
+          draftUpdatedAt={draftUpdatedAt}
+          publishedAt={publishedAt}
+          uiMeta={uiMeta}
+          isPublishing={isPublishing}
+          onPublish={onPublish}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default memo(Publisher)
diff --git a/web/app/components/snippets/components/snippet-header/run-mode.tsx b/web/app/components/snippets/components/snippet-header/run-mode.tsx
new file mode 100644
index 0000000000..c8a9705360
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-header/run-mode.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { cn } from '@langgenius/dify-ui/cn'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useWorkflowRun, useWorkflowStartRun } from '@/app/components/workflow/hooks'
+import ShortcutsName from '@/app/components/workflow/shortcuts-name'
+import { useStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+type RunModeProps = {
+  text?: string
+}
+
+const RunMode = ({
+  text,
+}: RunModeProps) => {
+  const { t } = useTranslation('snippet')
+  const { handleWorkflowStartRunInWorkflow } = useWorkflowStartRun()
+  const { handleStopRun } = useWorkflowRun()
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+
+  const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
+
+  const handleStop = useCallback(() => {
+    handleStopRun(workflowRunningData?.task_id || '')
+  }, [handleStopRun, workflowRunningData?.task_id])
+
+  const { eventEmitter } = useEventEmitterContextContext()
+  eventEmitter?.useSubscription((v) => {
+    if (typeof v !== 'string' && v.type === EVENT_WORKFLOW_STOP)
+      handleStop()
+  })
+
+  return (
+    <div className="flex items-center gap-x-px">
+      <button
+        type="button"
+        className={cn(
+          'system-xs-medium flex h-7 items-center gap-x-1 rounded-md px-1.5 text-components-button-secondary-accent-text hover:bg-state-accent-hover',
+          isRunning && 'cursor-not-allowed rounded-l-md bg-state-accent-hover',
+        )}
+        onClick={handleWorkflowStartRunInWorkflow}
+        disabled={isRunning}
+      >
+        {isRunning
+          ? (
+              <>
+                <span aria-hidden className="mr-1 i-ri-loader-2-line size-4 animate-spin" />
+                {t('common.running', { ns: 'workflow' })}
+              </>
+            )
+          : (
+              <>
+                <span aria-hidden className="mr-1 i-ri-play-large-line size-4" />
+                {text ?? t('common.run', { ns: 'workflow' })}
+                <ShortcutsName keys={['alt', 'R']} textColor="secondary" />
+              </>
+            )}
+      </button>
+
+      {isRunning && (
+        <button
+          type="button"
+          className="flex size-7 items-center justify-center rounded-r-md bg-state-accent-active"
+          onClick={handleStop}
+        >
+          <span aria-hidden className="i-ri-stop-circle-line size-4 text-text-accent" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(RunMode)
diff --git a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
new file mode 100644
index 0000000000..f3d9bf05e1
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
@@ -0,0 +1,265 @@
+'use client'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useDebounceFn, useKeyPress } from 'ahooks'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
+import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  DSLImportMode,
+  DSLImportStatus,
+} from '@/models/app'
+import {
+  useConfirmSnippetImportMutation,
+  useImportSnippetDSLMutation,
+} from '@/service/use-snippets'
+import ShortcutsName from '../../workflow/shortcuts-name'
+
+type SnippetImportDSLDialogProps = {
+  show: boolean
+  onClose: () => void
+  onSuccess?: (snippetId: string) => void
+}
+
+const SnippetImportDSLTab = {
+  FromFile: 'from-file',
+  FromURL: 'from-url',
+} as const
+
+type SnippetImportDSLTabValue = typeof SnippetImportDSLTab[keyof typeof SnippetImportDSLTab]
+
+const SnippetImportDSLDialog = ({
+  show,
+  onClose,
+  onSuccess,
+}: SnippetImportDSLDialogProps) => {
+  const { t } = useTranslation()
+  const importSnippetDSLMutation = useImportSnippetDSLMutation()
+  const confirmSnippetImportMutation = useConfirmSnippetImportMutation()
+  const [currentFile, setCurrentFile] = useState<File>()
+  const [fileContent, setFileContent] = useState<string>()
+  const [currentTab, setCurrentTab] = useState<SnippetImportDSLTabValue>(SnippetImportDSLTab.FromFile)
+  const [dslUrlValue, setDslUrlValue] = useState('')
+  const [showVersionMismatchDialog, setShowVersionMismatchDialog] = useState(false)
+  const [versions, setVersions] = useState<{ importedVersion: string, systemVersion: string }>()
+  const [importId, setImportId] = useState<string>()
+
+  const isImporting = importSnippetDSLMutation.isPending || confirmSnippetImportMutation.isPending
+
+  const readFile = (file: File) => {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const content = event.target?.result
+      setFileContent(content as string)
+    }
+    reader.readAsText(file)
+  }
+
+  const handleFile = (file?: File) => {
+    setCurrentFile(file)
+    if (file)
+      readFile(file)
+    if (!file)
+      setFileContent('')
+  }
+
+  const completeImport = (snippetId?: string, status: string = DSLImportStatus.COMPLETED) => {
+    if (!snippetId) {
+      toast.error(t('importFailed', { ns: 'snippet' }))
+      return
+    }
+
+    if (status === DSLImportStatus.COMPLETED_WITH_WARNINGS)
+      toast.warning(t('newApp.appCreateDSLWarning', { ns: 'app' }))
+    else
+      toast.success(t('importSuccess', { ns: 'snippet' }))
+
+    onSuccess?.(snippetId)
+  }
+
+  const handleImportResponse = (response: {
+    id: string
+    status: string
+    snippet_id?: string
+    imported_dsl_version?: string
+    current_dsl_version?: string
+  }) => {
+    if (response.status === DSLImportStatus.COMPLETED || response.status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
+      completeImport(response.snippet_id, response.status)
+      return
+    }
+
+    if (response.status === DSLImportStatus.PENDING) {
+      setVersions({
+        importedVersion: response.imported_dsl_version ?? '',
+        systemVersion: response.current_dsl_version ?? '',
+      })
+      setImportId(response.id)
+      setShowVersionMismatchDialog(true)
+      return
+    }
+
+    toast.error(t('importFailed', { ns: 'snippet' }))
+  }
+
+  const handleCreate = () => {
+    if (currentTab === SnippetImportDSLTab.FromFile && !currentFile)
+      return
+    if (currentTab === SnippetImportDSLTab.FromURL && !dslUrlValue)
+      return
+
+    importSnippetDSLMutation.mutate({
+      mode: currentTab === SnippetImportDSLTab.FromFile ? DSLImportMode.YAML_CONTENT : DSLImportMode.YAML_URL,
+      yamlContent: currentTab === SnippetImportDSLTab.FromFile ? fileContent || '' : undefined,
+      yamlUrl: currentTab === SnippetImportDSLTab.FromURL ? dslUrlValue : undefined,
+    }, {
+      onSuccess: handleImportResponse,
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('importFailed', { ns: 'snippet' }))
+      },
+    })
+  }
+
+  const { run: handleCreateSnippet } = useDebounceFn(handleCreate, { wait: 300 })
+
+  const handleConfirmImport = () => {
+    if (!importId)
+      return
+
+    confirmSnippetImportMutation.mutate({
+      importId,
+    }, {
+      onSuccess: (response) => {
+        setShowVersionMismatchDialog(false)
+        completeImport(response.snippet_id)
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t('importFailed', { ns: 'snippet' }))
+      },
+    })
+  }
+
+  useKeyPress(['meta.enter', 'ctrl.enter'], () => {
+    if (!show || showVersionMismatchDialog || isImporting)
+      return
+
+    if ((currentTab === SnippetImportDSLTab.FromFile && currentFile) || (currentTab === SnippetImportDSLTab.FromURL && dslUrlValue))
+      handleCreateSnippet()
+  })
+
+  const buttonDisabled = useMemo(() => {
+    if (isImporting)
+      return true
+    if (currentTab === SnippetImportDSLTab.FromFile)
+      return !currentFile
+    return !dslUrlValue
+  }, [currentFile, currentTab, dslUrlValue, isImporting])
+
+  return (
+    <>
+      <Dialog open={show} onOpenChange={open => !open && onClose()}>
+        <DialogContent className="w-[520px] p-0">
+          <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
+              {t('importFromDSL', { ns: 'app' })}
+            </DialogTitle>
+            <DialogCloseButton className="top-6 right-5 h-8 w-8" />
+          </div>
+
+          <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
+            {[
+              { key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
+              { key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
+            ].map(tab => (
+              <button
+                key={tab.key}
+                type="button"
+                className={cn(
+                  'relative flex h-full cursor-pointer items-center',
+                  currentTab === tab.key && 'text-text-primary',
+                )}
+                onClick={() => setCurrentTab(tab.key)}
+              >
+                {tab.label}
+                {currentTab === tab.key && (
+                  <div className="absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600" />
+                )}
+              </button>
+            ))}
+          </div>
+
+          <div className="px-6 py-4">
+            {currentTab === SnippetImportDSLTab.FromFile && (
+              <Uploader
+                className="mt-0"
+                file={currentFile}
+                updateFile={handleFile}
+              />
+            )}
+            {currentTab === SnippetImportDSLTab.FromURL && (
+              <div>
+                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
+                <Input
+                  placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
+                  value={dslUrlValue}
+                  onChange={e => setDslUrlValue(e.target.value)}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end px-6 py-5">
+            <Button className="mr-2" disabled={isImporting} onClick={onClose}>
+              {t('newApp.Cancel', { ns: 'app' })}
+            </Button>
+            <Button
+              disabled={buttonDisabled}
+              variant="primary"
+              onClick={handleCreateSnippet}
+              className="gap-1"
+            >
+              <span>{t('newApp.Create', { ns: 'app' })}</span>
+              <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={showVersionMismatchDialog} onOpenChange={open => !open && setShowVersionMismatchDialog(false)}>
+        <DialogContent className="w-[480px]">
+          <div className="flex flex-col items-start gap-2 self-stretch pb-4">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
+              {t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
+            </DialogTitle>
+            <div className="system-md-regular flex grow flex-col text-text-secondary">
+              <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+              <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+              <br />
+              <div>
+                {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.importedVersion}</span>
+              </div>
+              <div>
+                {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.systemVersion}</span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-start justify-end gap-2 self-stretch pt-6">
+            <Button variant="secondary" disabled={isImporting} onClick={() => setShowVersionMismatchDialog(false)}>
+              {t('newApp.Cancel', { ns: 'app' })}
+            </Button>
+            <Button variant="primary" tone="destructive" disabled={isImporting} onClick={handleConfirmImport}>
+              {t('newApp.Confirm', { ns: 'app' })}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export default SnippetImportDSLDialog
diff --git a/web/app/components/snippets/components/snippet-layout.tsx b/web/app/components/snippets/components/snippet-layout.tsx
new file mode 100644
index 0000000000..2d03f3a065
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-layout.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
+import type { SnippetDetail, SnippetSection } from '@/models/snippet'
+import {
+  RiFlaskFill,
+  RiFlaskLine,
+  RiTerminalWindowFill,
+  RiTerminalWindowLine,
+} from '@remixicon/react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppSideBar from '@/app/components/app-sidebar'
+import NavLink from '@/app/components/app-sidebar/nav-link'
+import SnippetInfo from '@/app/components/app-sidebar/snippet-info'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+type SnippetLayoutProps = {
+  children: ReactNode
+  section: SnippetSection
+  snippet: SnippetDetail
+  snippetId: string
+}
+
+const ORCHESTRATE_ICONS: { normal: NavIcon, selected: NavIcon } = {
+  normal: RiTerminalWindowLine,
+  selected: RiTerminalWindowFill,
+}
+
+const EVALUATION_ICONS: { normal: NavIcon, selected: NavIcon } = {
+  normal: RiFlaskLine,
+  selected: RiFlaskFill,
+}
+
+const SnippetLayout = ({
+  children,
+  section,
+  snippet,
+  snippetId,
+}: SnippetLayoutProps) => {
+  const { t } = useTranslation('snippet')
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const setAppSidebarExpand = useAppStore(state => state.setAppSidebarExpand)
+
+  useDocumentTitle(snippet.name || t('typeLabel'))
+
+  useEffect(() => {
+    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+    const mode = isMobile ? 'collapse' : 'expand'
+    setAppSidebarExpand(isMobile ? mode : localeMode)
+  }, [isMobile, setAppSidebarExpand])
+
+  return (
+    <div className="relative flex h-full overflow-hidden bg-background-body">
+      <AppSideBar
+        navigation={[]}
+        renderHeader={mode => <SnippetInfo expand={mode === 'expand'} snippet={snippet} />}
+        renderNavigation={mode => (
+          <>
+            <NavLink
+              mode={mode}
+              name={t('sectionOrchestrate')}
+              iconMap={ORCHESTRATE_ICONS}
+              href={`/snippets/${snippetId}/orchestrate`}
+              active={section === 'orchestrate'}
+            />
+            <NavLink
+              mode={mode}
+              name={t('sectionEvaluation')}
+              iconMap={EVALUATION_ICONS}
+              href={`/snippets/${snippetId}/evaluation`}
+              active={section === 'evaluation'}
+            />
+          </>
+        )}
+      />
+
+      <div className="relative min-h-0 min-w-0 grow overflow-hidden">
+        <div className="absolute inset-0 min-h-0 min-w-0 overflow-hidden">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SnippetLayout
diff --git a/web/app/components/snippets/components/snippet-main.tsx b/web/app/components/snippets/components/snippet-main.tsx
new file mode 100644
index 0000000000..6dd75ac426
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-main.tsx
@@ -0,0 +1,225 @@
+'use client'
+
+import type { WorkflowProps } from '@/app/components/workflow'
+import type { SnippetDetailPayload } from '@/models/snippet'
+import {
+  useEffect,
+  useMemo,
+} from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import { useAvailableNodesMetaData } from '@/app/components/workflow-app/hooks'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useConfigsMap } from '../hooks/use-configs-map'
+import { useInspectVarsCrud } from '../hooks/use-inspect-vars-crud'
+import { useNodesSyncDraft } from '../hooks/use-nodes-sync-draft'
+import { useSnippetRefreshDraft } from '../hooks/use-snippet-refresh-draft'
+import { useSnippetRun } from '../hooks/use-snippet-run'
+import { useSnippetStartRun } from '../hooks/use-snippet-start-run'
+import { useSnippetDetailStore } from '../store'
+import { useSnippetInputFieldActions } from './hooks/use-snippet-input-field-actions'
+import { useSnippetPublish } from './hooks/use-snippet-publish'
+import SnippetChildren from './snippet-children'
+
+type SnippetMainProps = {
+  payload: SnippetDetailPayload
+  snippetId: string
+} & Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
+
+const SnippetMain = ({
+  payload,
+  snippetId,
+  nodes,
+  edges,
+  viewport,
+}: SnippetMainProps) => {
+  const { graph, uiMeta } = payload
+  const {
+    doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose,
+  } = useNodesSyncDraft(snippetId)
+  const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
+  const {
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStopRun,
+  } = useSnippetRun(snippetId)
+  const configsMap = useConfigsMap(snippetId)
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue({
+    ...configsMap,
+  })
+  const {
+    hasNodeInspectVars,
+    hasSetInspectVar,
+    fetchInspectVarValue,
+    editInspectVarValue,
+    renameInspectVarName,
+    appendNodeInspectVars,
+    deleteInspectVar,
+    deleteNodeInspectorVars,
+    deleteAllInspectorVars,
+    isInspectVarEdited,
+    resetToLastRunVar,
+    invalidateSysVarValues,
+    resetConversationVar,
+    invalidateConversationVarValues,
+  } = useInspectVarsCrud(snippetId)
+  const workflowAvailableNodesMetaData = useAvailableNodesMetaData()
+  const availableNodesMetaData = useMemo(() => {
+    const nodes = workflowAvailableNodesMetaData.nodes.filter(node =>
+      node.metaData.type !== BlockEnum.HumanInput && node.metaData.type !== BlockEnum.End)
+
+    if (!workflowAvailableNodesMetaData.nodesMap)
+      return { nodes }
+
+    const {
+      [BlockEnum.HumanInput]: _humanInput,
+      [BlockEnum.End]: _end,
+      ...nodesMap
+    } = workflowAvailableNodesMetaData.nodesMap
+
+    return {
+      nodes,
+      nodesMap,
+    }
+  }, [workflowAvailableNodesMetaData])
+  const {
+    reset,
+    setFields,
+  } = useSnippetDetailStore(useShallow(state => ({
+    reset: state.reset,
+    setFields: state.setFields,
+  })))
+  const {
+    editingField,
+    fields,
+    isEditorOpen,
+    isInputPanelOpen,
+    openEditor,
+    closeEditor,
+    handleCloseInputPanel,
+    handleRemoveField,
+    handleSortChange,
+    handleSubmitField,
+    handleToggleInputPanel,
+  } = useSnippetInputFieldActions({
+    snippetId,
+  })
+  const {
+    handlePublish,
+    isPublishMenuOpen,
+    isPublishing,
+    setPublishMenuOpen,
+  } = useSnippetPublish({
+    snippetId,
+  })
+  const {
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow,
+  } = useSnippetStartRun({
+    handleRun,
+    inputFields: fields,
+  })
+
+  useEffect(() => {
+    reset()
+  }, [reset, snippetId])
+
+  useEffect(() => {
+    setFields(payload.inputFields)
+  }, [payload.inputFields, setFields, snippetId])
+
+  const hooksStore = useMemo(() => {
+    return {
+      doSyncWorkflowDraft,
+      syncWorkflowDraftWhenPageClose,
+      handleRefreshWorkflowDraft,
+      handleBackupDraft,
+      handleLoadBackupDraft,
+      handleRestoreFromPublishedWorkflow,
+      handleRun,
+      handleStopRun,
+      handleStartWorkflowRun,
+      handleWorkflowStartRunInWorkflow,
+      availableNodesMetaData,
+      fetchInspectVars,
+      hasNodeInspectVars,
+      hasSetInspectVar,
+      fetchInspectVarValue,
+      editInspectVarValue,
+      renameInspectVarName,
+      appendNodeInspectVars,
+      deleteInspectVar,
+      deleteNodeInspectorVars,
+      deleteAllInspectorVars,
+      isInspectVarEdited,
+      resetToLastRunVar,
+      invalidateSysVarValues,
+      resetConversationVar,
+      invalidateConversationVarValues,
+      configsMap,
+    }
+  }, [
+    appendNodeInspectVars,
+    availableNodesMetaData,
+    configsMap,
+    deleteAllInspectorVars,
+    deleteInspectVar,
+    deleteNodeInspectorVars,
+    doSyncWorkflowDraft,
+    editInspectVarValue,
+    fetchInspectVarValue,
+    fetchInspectVars,
+    handleBackupDraft,
+    handleRefreshWorkflowDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStartWorkflowRun,
+    handleStopRun,
+    handleWorkflowStartRunInWorkflow,
+    hasNodeInspectVars,
+    hasSetInspectVar,
+    invalidateConversationVarValues,
+    invalidateSysVarValues,
+    isInspectVarEdited,
+    renameInspectVarName,
+    resetConversationVar,
+    resetToLastRunVar,
+    syncWorkflowDraftWhenPageClose,
+  ])
+
+  return (
+    <WorkflowWithInnerContext
+      nodes={nodes}
+      edges={edges}
+      viewport={viewport ?? graph.viewport}
+      hooksStore={hooksStore as any}
+    >
+      <SnippetChildren
+        snippetId={snippetId}
+        fields={fields}
+        uiMeta={uiMeta}
+        editingField={editingField}
+        isEditorOpen={isEditorOpen}
+        isInputPanelOpen={isInputPanelOpen}
+        isPublishMenuOpen={isPublishMenuOpen}
+        isPublishing={isPublishing}
+        onToggleInputPanel={handleToggleInputPanel}
+        onPublishMenuOpenChange={setPublishMenuOpen}
+        onCloseInputPanel={handleCloseInputPanel}
+        onPublish={handlePublish}
+        onOpenEditor={openEditor}
+        onCloseEditor={closeEditor}
+        onSubmitField={handleSubmitField}
+        onRemoveField={handleRemoveField}
+        onSortChange={handleSortChange}
+      />
+    </WorkflowWithInnerContext>
+  )
+}
+
+export default SnippetMain
diff --git a/web/app/components/snippets/components/snippet-run-panel.tsx b/web/app/components/snippets/components/snippet-run-panel.tsx
new file mode 100644
index 0000000000..cf9d91496c
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-run-panel.tsx
@@ -0,0 +1,293 @@
+'use client'
+
+import type { InputForm } from '@/app/components/base/chat/chat/type'
+import type { InputVar as WorkflowInputVar } from '@/app/components/workflow/types'
+import type { SnippetInputField } from '@/models/snippet'
+import copy from 'copy-to-clipboard'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
+import { getProcessedInputs } from '@/app/components/base/chat/chat/utils'
+import Loading from '@/app/components/base/loading'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  useWorkflowInteractions,
+  useWorkflowRun,
+} from '@/app/components/workflow/hooks'
+import FormItem from '@/app/components/workflow/nodes/_base/components/before-run-form/form-item'
+import ResultPanel from '@/app/components/workflow/run/result-panel'
+import ResultText from '@/app/components/workflow/run/result-text'
+import TracingPanel from '@/app/components/workflow/run/tracing-panel'
+import { useStore } from '@/app/components/workflow/store'
+import {
+  InputVarType,
+  WorkflowRunningStatus,
+} from '@/app/components/workflow/types'
+import { formatWorkflowRunIdentifier } from '@/app/components/workflow/utils'
+import { PipelineInputVarType } from '@/models/pipeline'
+
+type SnippetRunPanelProps = {
+  fields: SnippetInputField[]
+}
+
+type SnippetRunField = WorkflowInputVar & InputForm
+
+const PIPELINE_TO_WORKFLOW_INPUT_VAR_TYPE: Record<PipelineInputVarType, InputVarType> = {
+  [PipelineInputVarType.textInput]: InputVarType.textInput,
+  [PipelineInputVarType.paragraph]: InputVarType.paragraph,
+  [PipelineInputVarType.select]: InputVarType.select,
+  [PipelineInputVarType.number]: InputVarType.number,
+  [PipelineInputVarType.singleFile]: InputVarType.singleFile,
+  [PipelineInputVarType.multiFiles]: InputVarType.multiFiles,
+  [PipelineInputVarType.checkbox]: InputVarType.checkbox,
+}
+
+const buildPreviewFields = (fields: SnippetInputField[]): SnippetRunField[] => {
+  return fields.map(field => ({
+    type: PIPELINE_TO_WORKFLOW_INPUT_VAR_TYPE[field.type],
+    label: field.label,
+    variable: field.variable,
+    max_length: field.max_length,
+    default: field.default_value,
+    required: field.required,
+    options: field.options,
+    placeholder: field.placeholder,
+    unit: field.unit,
+    hide: false,
+    allowed_file_upload_methods: field.allowed_file_upload_methods,
+    allowed_file_types: field.allowed_file_types,
+    allowed_file_extensions: field.allowed_file_extensions,
+  }))
+}
+
+const buildInitialInputs = (fields: SnippetRunField[]) => {
+  return fields.reduce<Record<string, unknown>>((acc, field) => {
+    if (field.default !== undefined)
+      acc[field.variable] = field.default
+
+    return acc
+  }, {})
+}
+
+const SnippetRunPanel = ({
+  fields,
+}: SnippetRunPanelProps) => {
+  const { t } = useTranslation()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+  const { handleRun } = useWorkflowRun()
+  const { checkInputsForm } = useCheckInputsForms()
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+  const showInputsPanel = useStore(s => s.showInputsPanel)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const panelWidth = useStore(s => s.previewPanelWidth)
+  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
+
+  const previewFields = useMemo(() => buildPreviewFields(fields), [fields])
+  const initialInputs = useMemo(() => buildInitialInputs(previewFields), [previewFields])
+  const [inputOverrides, setInputOverrides] = useState<Record<string, unknown> | null>(null)
+  const [selectedTab, setSelectedTab] = useState<string | null>(null)
+  const [isResizing, setIsResizing] = useState(false)
+
+  const inputs = inputOverrides ?? initialInputs
+  const hasInputTab = showInputsPanel && previewFields.length > 0
+  const defaultTab = hasInputTab ? 'INPUT' : 'RESULT'
+  const shouldShowDetailByDefault = !!workflowRunningData
+    && (workflowRunningData.result.status === WorkflowRunningStatus.Succeeded || workflowRunningData.result.status === WorkflowRunningStatus.Failed)
+    && !workflowRunningData.resultText
+    && !workflowRunningData.result.files?.length
+  const currentTab = selectedTab ?? (shouldShowDetailByDefault ? 'DETAIL' : defaultTab)
+
+  const handleValueChange = useCallback((variable: string, value: unknown) => {
+    setInputOverrides(prev => ({
+      ...(prev ?? initialInputs),
+      [variable]: value,
+    }))
+  }, [initialInputs])
+
+  const handleSubmit = useCallback(() => {
+    if (!checkInputsForm(inputs, previewFields))
+      return
+
+    setSelectedTab('RESULT')
+    handleRun({
+      inputs: getProcessedInputs(inputs, previewFields),
+    })
+  }, [checkInputsForm, handleRun, inputs, previewFields])
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+  }, [])
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false)
+  }, [])
+
+  const resize = useCallback((e: MouseEvent) => {
+    if (!isResizing)
+      return
+
+    const newWidth = window.innerWidth - e.clientX
+    const reservedCanvasWidth = 400
+    const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
+
+    if (newWidth >= 400 && newWidth <= maxAllowed)
+      setPreviewPanelWidth(newWidth)
+  }, [isResizing, setPreviewPanelWidth, workflowCanvasWidth])
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize)
+    window.addEventListener('mouseup', stopResizing)
+    return () => {
+      window.removeEventListener('mousemove', resize)
+      window.removeEventListener('mouseup', stopResizing)
+    }
+  }, [resize, stopResizing])
+
+  return (
+    <div
+      className="relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
+      style={{ width: `${panelWidth}px` }}
+    >
+      <div
+        className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
+        onMouseDown={startResizing}
+      />
+      <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
+        {`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at, workflowRunningData?.result.status)}`}
+        <div className="cursor-pointer p-1" onClick={handleCancelDebugAndPreviewPanel}>
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </div>
+      </div>
+      <div className="relative flex grow flex-col">
+        <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
+          {hasInputTab && (
+            <div
+              className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'INPUT' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'}`}
+              onClick={() => setSelectedTab('INPUT')}
+            >
+              {t('input', { ns: 'runLog' })}
+            </div>
+          )}
+          <div
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'RESULT' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            onClick={() => workflowRunningData && setSelectedTab('RESULT')}
+          >
+            {t('result', { ns: 'runLog' })}
+          </div>
+          <div
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'DETAIL' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            onClick={() => workflowRunningData && setSelectedTab('DETAIL')}
+          >
+            {t('detail', { ns: 'runLog' })}
+          </div>
+          <div
+            className={`mr-6 cursor-pointer border-b-2 py-3 text-[13px] font-semibold leading-[18px] ${currentTab === 'TRACING' ? '!border-[rgb(21,94,239)] text-text-secondary' : 'border-transparent text-text-tertiary'} ${!workflowRunningData ? '!cursor-not-allowed opacity-30' : ''}`}
+            onClick={() => workflowRunningData && setSelectedTab('TRACING')}
+          >
+            {t('tracing', { ns: 'runLog' })}
+          </div>
+        </div>
+        <div className={`h-0 grow overflow-y-auto rounded-b-2xl ${(currentTab === 'RESULT' || currentTab === 'TRACING') ? '!bg-background-section-burn' : 'bg-components-panel-bg'}`}>
+          {currentTab === 'INPUT' && hasInputTab && (
+            <>
+              <div className="px-4 pb-2 pt-3">
+                {previewFields.map((field, index) => (
+                  <div
+                    key={field.variable}
+                    className="mb-2 last-of-type:mb-0"
+                  >
+                    <FormItem
+                      autoFocus={index === 0}
+                      className="!block"
+                      payload={field}
+                      value={inputs[field.variable]}
+                      onChange={value => handleValueChange(field.variable, value)}
+                    />
+                  </div>
+                ))}
+              </div>
+              <div className="flex items-center justify-between px-4 py-2">
+                <Button
+                  variant="primary"
+                  className="w-full"
+                  disabled={workflowRunningData?.result?.status === WorkflowRunningStatus.Running}
+                  onClick={handleSubmit}
+                >
+                  {t('singleRun.startRun', { ns: 'workflow' })}
+                </Button>
+              </div>
+            </>
+          )}
+          {currentTab === 'RESULT' && (
+            <div className="p-2">
+              <ResultText
+                isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
+                outputs={workflowRunningData?.resultText}
+                allFiles={workflowRunningData?.result?.files}
+                error={workflowRunningData?.result?.error}
+                onClick={() => setSelectedTab('DETAIL')}
+              />
+              {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData.resultText === 'string') && (
+                <Button
+                  className="mb-4 ml-4 space-x-1"
+                  onClick={() => {
+                    copy(workflowRunningData?.resultText || '')
+                    toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
+                  }}
+                >
+                  <span className="i-ri-clipboard-line h-3.5 w-3.5" />
+                  <div>{t('operation.copy', { ns: 'common' })}</div>
+                </Button>
+              )}
+            </div>
+          )}
+          {currentTab === 'DETAIL' && workflowRunningData?.result && (
+            <ResultPanel
+              inputs={workflowRunningData.result?.inputs}
+              inputs_truncated={workflowRunningData.result?.inputs_truncated}
+              process_data={workflowRunningData.result?.process_data}
+              process_data_truncated={workflowRunningData.result?.process_data_truncated}
+              outputs={workflowRunningData.result?.outputs}
+              outputs_truncated={workflowRunningData.result?.outputs_truncated}
+              outputs_full_content={workflowRunningData.result?.outputs_full_content}
+              status={workflowRunningData.result?.status || ''}
+              error={workflowRunningData.result?.error}
+              elapsed_time={workflowRunningData.result?.elapsed_time}
+              total_tokens={workflowRunningData.result?.total_tokens}
+              created_at={workflowRunningData.result?.created_at}
+              created_by={workflowRunningData.result?.created_by}
+              steps={workflowRunningData.result?.total_steps}
+              exceptionCounts={workflowRunningData.result?.exceptions_count}
+            />
+          )}
+          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
+            <div className="flex h-full items-center justify-center bg-components-panel-bg">
+              <Loading />
+            </div>
+          )}
+          {currentTab === 'TRACING' && (
+            <TracingPanel
+              className="bg-background-section-burn"
+              list={workflowRunningData?.tracing || []}
+            />
+          )}
+          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+            <div className="flex h-full items-center justify-center !bg-background-section-burn">
+              <Loading />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(SnippetRunPanel)
diff --git a/web/app/components/snippets/components/workflow-panel.tsx b/web/app/components/snippets/components/workflow-panel.tsx
new file mode 100644
index 0000000000..cb2f281c5d
--- /dev/null
+++ b/web/app/components/snippets/components/workflow-panel.tsx
@@ -0,0 +1,145 @@
+'use client'
+
+import type { PanelProps } from '@/app/components/workflow/panel'
+import type { SnippetInputField } from '@/models/snippet'
+import { memo, useMemo } from 'react'
+import Panel from '@/app/components/workflow/panel'
+import { useStore } from '@/app/components/workflow/store'
+import dynamic from '@/next/dynamic'
+import SnippetInputFieldEditor from './input-field-editor'
+import SnippetInputFieldPanel from './panel'
+
+const Record = dynamic(() => import('@/app/components/workflow/panel/record'), {
+  ssr: false,
+})
+const SnippetRunPanel = dynamic(() => import('./snippet-run-panel'), {
+  ssr: false,
+})
+
+type SnippetWorkflowPanelProps = {
+  snippetId: string
+  fields: SnippetInputField[]
+  editingField: SnippetInputField | null
+  isEditorOpen: boolean
+  isInputPanelOpen: boolean
+  onCloseInputPanel: () => void
+  onOpenEditor: (field?: SnippetInputField | null) => void
+  onCloseEditor: () => void
+  onSubmitField: (field: SnippetInputField) => void
+  onRemoveField: (index: number) => void
+  onSortChange: (fields: SnippetInputField[]) => void
+}
+
+const SnippetPanelOnLeft = ({
+  fields,
+  editingField,
+  isEditorOpen,
+  isInputPanelOpen,
+  onCloseInputPanel,
+  onOpenEditor,
+  onCloseEditor,
+  onSubmitField,
+  onRemoveField,
+  onSortChange,
+}: SnippetWorkflowPanelProps) => {
+  return (
+    <div className="hidden xl:flex">
+      {isEditorOpen && (
+        <SnippetInputFieldEditor
+          field={editingField}
+          onClose={onCloseEditor}
+          onSubmit={onSubmitField}
+        />
+      )}
+      {isInputPanelOpen && (
+        <SnippetInputFieldPanel
+          fields={fields}
+          onClose={onCloseInputPanel}
+          onAdd={() => onOpenEditor()}
+          onEdit={onOpenEditor}
+          onRemove={onRemoveField}
+          onSortChange={onSortChange}
+        />
+      )}
+    </div>
+  )
+}
+
+const SnippetPanelOnRight = ({
+  fields,
+}: Pick<SnippetWorkflowPanelProps, 'fields'>) => {
+  const historyWorkflowData = useStore(s => s.historyWorkflowData)
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
+
+  return (
+    <>
+      {historyWorkflowData && <Record />}
+      {showDebugAndPreviewPanel && <SnippetRunPanel fields={fields} />}
+    </>
+  )
+}
+
+const SnippetWorkflowPanel = ({
+  snippetId,
+  fields,
+  editingField,
+  isEditorOpen,
+  isInputPanelOpen,
+  onCloseInputPanel,
+  onOpenEditor,
+  onCloseEditor,
+  onSubmitField,
+  onRemoveField,
+  onSortChange,
+}: SnippetWorkflowPanelProps) => {
+  const versionHistoryPanelProps = useMemo(() => {
+    return {
+      getVersionListUrl: `/snippets/${snippetId}/workflows`,
+      deleteVersionUrl: (versionId: string) => `/snippets/${snippetId}/workflows/${versionId}`,
+      restoreVersionUrl: (versionId: string) => `/snippets/${snippetId}/workflows/${versionId}/restore`,
+      updateVersionUrl: (versionId: string) => `/snippets/${snippetId}/workflows/${versionId}`,
+      latestVersionId: '',
+    }
+  }, [snippetId])
+
+  const panelProps: PanelProps = useMemo(() => {
+    return {
+      components: {
+        left: (
+          <SnippetPanelOnLeft
+            snippetId={snippetId}
+            fields={fields}
+            editingField={editingField}
+            isEditorOpen={isEditorOpen}
+            isInputPanelOpen={isInputPanelOpen}
+            onCloseInputPanel={onCloseInputPanel}
+            onOpenEditor={onOpenEditor}
+            onCloseEditor={onCloseEditor}
+            onSubmitField={onSubmitField}
+            onRemoveField={onRemoveField}
+            onSortChange={onSortChange}
+          />
+        ),
+        right: <SnippetPanelOnRight fields={fields} />,
+      },
+      versionHistoryPanelProps,
+    }
+  }, [
+    editingField,
+    fields,
+    isEditorOpen,
+    isInputPanelOpen,
+    onCloseEditor,
+    onCloseInputPanel,
+    onOpenEditor,
+    onRemoveField,
+    onSortChange,
+    onSubmitField,
+    snippetId,
+    versionHistoryPanelProps,
+  ])
+
+  return <Panel {...panelProps} />
+}
+
+export default memo(SnippetWorkflowPanel)
diff --git a/web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts b/web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts
new file mode 100644
index 0000000000..69e264d0cc
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-inspect-vars-crud.spec.ts
@@ -0,0 +1,95 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useInspectVarsCrud } from '../use-inspect-vars-crud'
+
+const mockApis = {
+  hasNodeInspectVars: vi.fn(),
+  hasSetInspectVar: vi.fn(),
+  fetchInspectVarValue: vi.fn(),
+  editInspectVarValue: vi.fn(),
+  renameInspectVarName: vi.fn(),
+  appendNodeInspectVars: vi.fn(),
+  deleteInspectVar: vi.fn(),
+  deleteNodeInspectorVars: vi.fn(),
+  deleteAllInspectorVars: vi.fn(),
+  isInspectVarEdited: vi.fn(),
+  resetToLastRunVar: vi.fn(),
+  invalidateSysVarValues: vi.fn(),
+  resetConversationVar: vi.fn(),
+  invalidateConversationVarValues: vi.fn(),
+}
+
+const mockUseInspectVarsCrudCommon = vi.fn(() => mockApis)
+vi.mock('../../../workflow/hooks/use-inspect-vars-crud-common', () => ({
+  useInspectVarsCrudCommon: (...args: Parameters<typeof mockUseInspectVarsCrudCommon>) => mockUseInspectVarsCrudCommon(...args),
+}))
+
+const mockConfigsMap = {
+  flowId: 'snippet-123',
+  flowType: 'snippet',
+  fileSettings: {
+    image: { enabled: false },
+    fileUploadConfig: {},
+  },
+}
+
+vi.mock('../use-configs-map', () => ({
+  useConfigsMap: () => mockConfigsMap,
+}))
+
+describe('useInspectVarsCrud', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Composition', () => {
+    it('should pass configsMap to useInspectVarsCrudCommon', () => {
+      renderHook(() => useInspectVarsCrud('snippet-123'))
+
+      expect(mockUseInspectVarsCrudCommon).toHaveBeenCalledWith(
+        expect.objectContaining({
+          flowId: 'snippet-123',
+          flowType: 'snippet',
+        }),
+      )
+    })
+
+    it('should return all APIs from useInspectVarsCrudCommon', () => {
+      const { result } = renderHook(() => useInspectVarsCrud('snippet-123'))
+
+      expect(result.current.hasNodeInspectVars).toBe(mockApis.hasNodeInspectVars)
+      expect(result.current.fetchInspectVarValue).toBe(mockApis.fetchInspectVarValue)
+      expect(result.current.editInspectVarValue).toBe(mockApis.editInspectVarValue)
+      expect(result.current.deleteInspectVar).toBe(mockApis.deleteInspectVar)
+      expect(result.current.deleteAllInspectorVars).toBe(mockApis.deleteAllInspectorVars)
+      expect(result.current.resetToLastRunVar).toBe(mockApis.resetToLastRunVar)
+      expect(result.current.resetConversationVar).toBe(mockApis.resetConversationVar)
+    })
+  })
+
+  describe('API Surface', () => {
+    it('should expose all expected API methods', () => {
+      const { result } = renderHook(() => useInspectVarsCrud('snippet-123'))
+
+      const expectedKeys = [
+        'hasNodeInspectVars',
+        'hasSetInspectVar',
+        'fetchInspectVarValue',
+        'editInspectVarValue',
+        'renameInspectVarName',
+        'appendNodeInspectVars',
+        'deleteInspectVar',
+        'deleteNodeInspectorVars',
+        'deleteAllInspectorVars',
+        'isInspectVarEdited',
+        'resetToLastRunVar',
+        'invalidateSysVarValues',
+        'resetConversationVar',
+        'invalidateConversationVarValues',
+      ]
+
+      for (const key of expectedKeys)
+        expect(result.current).toHaveProperty(key)
+    })
+  })
+})
diff --git a/web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts b/web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts
new file mode 100644
index 0000000000..30c9a780fa
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-nodes-sync-draft.spec.ts
@@ -0,0 +1,163 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { act, renderHook } from '@testing-library/react'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetDetailStore } from '../../store'
+import { useNodesSyncDraft } from '../use-nodes-sync-draft'
+
+const mockGetNodes = vi.fn()
+const mockGetNodesReadOnly = vi.fn()
+const mockPostWithKeepalive = vi.fn()
+const mockSyncDraftWorkflow = vi.fn()
+const mockSetDraftUpdatedAt = vi.fn()
+const mockSetSyncWorkflowDraftHash = vi.fn()
+
+let reactFlowState: {
+  getNodes: typeof mockGetNodes
+  edges: Array<Record<string, unknown>>
+  transform: [number, number, number]
+}
+
+let workflowStoreState: {
+  syncWorkflowDraftHash: string | null
+  setDraftUpdatedAt: typeof mockSetDraftUpdatedAt
+  setSyncWorkflowDraftHash: typeof mockSetSyncWorkflowDraftHash
+}
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({ getState: () => reactFlowState }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-workflow', () => ({
+  useNodesReadOnly: () => ({ getNodesReadOnly: mockGetNodesReadOnly }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-serial-async-callback', () => ({
+  useSerialAsyncCallback: (fn: (...args: unknown[]) => Promise<void>, checkFn?: () => boolean) =>
+    (...args: unknown[]) => {
+      if (checkFn?.())
+        return
+
+      return fn(...args)
+    },
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => workflowStoreState,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    snippets: {
+      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+    },
+  },
+}))
+
+vi.mock('@/service/fetch', () => ({
+  postWithKeepalive: (...args: unknown[]) => mockPostWithKeepalive(...args),
+}))
+
+vi.mock('@/config', () => ({ API_PREFIX: '/api' }))
+
+vi.mock('../use-snippet-refresh-draft', () => ({
+  useSnippetRefreshDraft: () => ({
+    handleRefreshWorkflowDraft: vi.fn(),
+  }),
+}))
+
+const createInputField = (variable: string): SnippetInputField => ({
+  type: PipelineInputVarType.textInput,
+  label: variable,
+  variable,
+  required: false,
+})
+
+describe('snippet/use-nodes-sync-draft', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    reactFlowState = {
+      getNodes: mockGetNodes,
+      edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+      transform: [12, 24, 1.5],
+    }
+    workflowStoreState = {
+      syncWorkflowDraftHash: 'draft-hash',
+      setDraftUpdatedAt: mockSetDraftUpdatedAt,
+      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+    }
+    mockGetNodesReadOnly.mockReturnValue(false)
+    mockGetNodes.mockReturnValue([
+      { id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start', _temp: 'drop' } },
+    ])
+    mockSyncDraftWorkflow.mockResolvedValue({
+      hash: 'next-hash',
+      updated_at: 123,
+    })
+    useSnippetDetailStore.setState({
+      fields: [createInputField('topic')],
+    })
+  })
+
+  it('should include current input_fields when syncing the draft graph', async () => {
+    const { result } = renderHook(() => useNodesSyncDraft('snippet-1'))
+
+    await act(async () => {
+      await result.current.doSyncWorkflowDraft()
+    })
+
+    expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-1' },
+      body: {
+        graph: {
+          nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start' } }],
+          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+          viewport: { x: 12, y: 24, zoom: 1.5 },
+        },
+        input_fields: [createInputField('topic')],
+        hash: 'draft-hash',
+      },
+    })
+  })
+
+  it('should include the latest graph when syncing input fields', async () => {
+    const { result } = renderHook(() => useNodesSyncDraft('snippet-1'))
+    const nextFields = [createInputField('summary')]
+
+    await act(async () => {
+      await result.current.syncInputFieldsDraft(nextFields)
+    })
+
+    expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-1' },
+      body: {
+        graph: {
+          nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start' } }],
+          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+          viewport: { x: 12, y: 24, zoom: 1.5 },
+        },
+        input_fields: nextFields,
+        hash: 'draft-hash',
+      },
+    })
+  })
+
+  it('should send input_fields together with graph on page close', () => {
+    const { result } = renderHook(() => useNodesSyncDraft('snippet-1'))
+
+    act(() => {
+      result.current.syncWorkflowDraftWhenPageClose()
+    })
+
+    expect(mockPostWithKeepalive).toHaveBeenCalledWith('/api/snippets/snippet-1/workflows/draft', {
+      graph: {
+        nodes: [{ id: 'node-1', position: { x: 0, y: 0 }, data: { title: 'Start' } }],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: { stable: true } }],
+        viewport: { x: 12, y: 24, zoom: 1.5 },
+      },
+      input_fields: [createInputField('topic')],
+      hash: 'draft-hash',
+    })
+  })
+})
diff --git a/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
new file mode 100644
index 0000000000..cdf0b982b1
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-snippet-init.spec.ts
@@ -0,0 +1,235 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useSnippetInit } from '../use-snippet-init'
+
+const mockWorkflowStoreSetState = vi.fn()
+const mockSetPublishedAt = vi.fn()
+const mockSetDraftUpdatedAt = vi.fn()
+const mockSetSyncWorkflowDraftHash = vi.fn()
+const mockUseSnippetApiDetail = vi.fn()
+const mockUseSnippetDraftWorkflow = vi.fn()
+const mockUseSnippetDefaultBlockConfigs = vi.fn()
+const mockUseSnippetPublishedWorkflow = vi.fn()
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    setState: mockWorkflowStoreSetState,
+    getState: () => ({
+      setDraftUpdatedAt: mockSetDraftUpdatedAt,
+      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+      setPublishedAt: mockSetPublishedAt,
+    }),
+  }),
+}))
+
+vi.mock('@/service/use-snippets', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/use-snippets')>()
+
+  return {
+    ...actual,
+    useSnippetApiDetail: (snippetId: string) => mockUseSnippetApiDetail(snippetId),
+  }
+})
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetDraftWorkflow: (snippetId: string, onSuccess?: (data: { updated_at: number, hash: string }) => void) => mockUseSnippetDraftWorkflow(snippetId, onSuccess),
+  useSnippetDefaultBlockConfigs: (snippetId: string, onSuccess?: (data: unknown) => void) => mockUseSnippetDefaultBlockConfigs(snippetId, onSuccess),
+  useSnippetPublishedWorkflow: (snippetId: string, onSuccess?: (data: { created_at: number }) => void) => mockUseSnippetPublishedWorkflow(snippetId, onSuccess),
+}))
+
+describe('useSnippetInit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    mockUseSnippetApiDetail.mockReturnValue({
+      data: {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'A static snippet mock.',
+        type: 'node',
+        is_published: false,
+        version: '1',
+        use_count: 0,
+        icon_info: {
+          icon_type: null,
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+        },
+        input_fields: [],
+        created_at: 1_712_300_000,
+        updated_at: 1_712_300_000,
+        author: 'Evan',
+      },
+      error: null,
+      isLoading: false,
+    })
+    mockUseSnippetDraftWorkflow.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    })
+    mockUseSnippetDefaultBlockConfigs.mockReturnValue({
+      data: undefined,
+    })
+    mockUseSnippetPublishedWorkflow.mockReturnValue({
+      data: undefined,
+    })
+  })
+
+  it('should return snippet detail query result', () => {
+    const { result } = renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockUseSnippetApiDetail).toHaveBeenCalledWith('snippet-1')
+    expect(result.current.data?.snippet.id).toBe('snippet-1')
+    expect(result.current.data?.graph.viewport).toEqual({ x: 0, y: 0, zoom: 1 })
+    expect(result.current.isLoading).toBe(false)
+  })
+
+  it('should use draft input_fields for snippet inputs', () => {
+    mockUseSnippetApiDetail.mockReturnValue({
+      data: {
+        id: 'snippet-1',
+        name: 'Tone Rewriter',
+        description: 'A static snippet mock.',
+        type: 'node',
+        is_published: false,
+        version: '1',
+        use_count: 0,
+        icon_info: {
+          icon_type: null,
+          icon: '🪄',
+          icon_background: '#E0EAFF',
+        },
+        input_fields: [
+          {
+            label: 'Published field',
+            variable: 'published_field',
+            type: 'text-input',
+            required: true,
+          },
+        ],
+        created_at: 1_712_300_000,
+        updated_at: 1_712_300_000,
+        author: 'Evan',
+      },
+      error: null,
+      isLoading: false,
+    })
+    mockUseSnippetDraftWorkflow.mockReturnValue({
+      data: {
+        id: 'draft-1',
+        graph: {},
+        features: {},
+        input_fields: [
+          {
+            label: 'Draft field',
+            variable: 'draft_field',
+            type: 'text-input',
+            required: true,
+          },
+        ],
+        hash: 'draft-hash',
+        created_at: 1_712_300_000,
+        updated_at: 1_712_345_678,
+      },
+      isLoading: false,
+    })
+
+    const { result } = renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(result.current.data?.inputFields).toEqual([
+      {
+        label: 'Draft field',
+        variable: 'draft_field',
+        type: 'text-input',
+        required: true,
+      },
+    ])
+  })
+
+  it('should sync draft metadata into workflow store', () => {
+    mockUseSnippetDraftWorkflow.mockImplementation((_snippetId: string, onSuccess?: (data: { updated_at: number, hash: string }) => void) => {
+      onSuccess?.({
+        updated_at: 1_712_345_678,
+        hash: 'draft-hash',
+      })
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockSetDraftUpdatedAt).toHaveBeenCalledWith(1_712_345_678)
+    expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('draft-hash')
+  })
+
+  it('should normalize array default block configs into workflow store state', () => {
+    mockUseSnippetDefaultBlockConfigs.mockImplementation((_snippetId: string, onSuccess?: (data: unknown) => void) => {
+      onSuccess?.([
+        { type: 'llm', config: { model: 'gpt-4.1' } },
+        { type: 'code', config: { language: 'python3' } },
+      ])
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({
+      nodesDefaultConfigs: {
+        llm: { model: 'gpt-4.1' },
+        code: { language: 'python3' },
+      },
+    })
+  })
+
+  it('should keep object default block configs as-is', () => {
+    mockUseSnippetDefaultBlockConfigs.mockImplementation((_snippetId: string, onSuccess?: (data: unknown) => void) => {
+      onSuccess?.({
+        llm: { model: 'gpt-4.1' },
+      })
+      return { data: undefined, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({
+      nodesDefaultConfigs: {
+        llm: { model: 'gpt-4.1' },
+      },
+    })
+  })
+
+  it('should sync published created_at into workflow store', () => {
+    mockUseSnippetPublishedWorkflow.mockImplementation((_snippetId: string, onSuccess?: (data: { created_at: number }) => void) => {
+      onSuccess?.({
+        created_at: 1_712_345_678,
+      })
+      return { data: { created_at: 1_712_345_678 }, isLoading: false }
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockSetPublishedAt).toHaveBeenCalledWith(1_712_345_678)
+  })
+
+  it('should reset published metadata when the published workflow is unavailable', () => {
+    mockUseSnippetPublishedWorkflow.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    })
+
+    renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(mockSetPublishedAt).toHaveBeenCalledWith(0)
+  })
+
+  it('should stay loading while draft workflow is still fetching', () => {
+    mockUseSnippetDraftWorkflow.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    })
+
+    const { result } = renderHook(() => useSnippetInit('snippet-1'))
+
+    expect(result.current.data).toBeUndefined()
+    expect(result.current.isLoading).toBe(true)
+  })
+})
diff --git a/web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts b/web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts
new file mode 100644
index 0000000000..909110939a
--- /dev/null
+++ b/web/app/components/snippets/hooks/__tests__/use-snippet-start-run.spec.ts
@@ -0,0 +1,131 @@
+import type { SnippetInputField } from '@/models/snippet'
+import { renderHook } from '@testing-library/react'
+import { act } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useSnippetStartRun } from '../use-snippet-start-run'
+
+const mockWorkflowStoreGetState = vi.fn()
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: mockWorkflowStoreGetState,
+  }),
+}))
+
+const mockHandleCancelDebugAndPreviewPanel = vi.fn()
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useWorkflowInteractions: () => ({
+    handleCancelDebugAndPreviewPanel: mockHandleCancelDebugAndPreviewPanel,
+  }),
+}))
+
+const mockSetShowDebugAndPreviewPanel = vi.fn()
+const mockSetShowInputsPanel = vi.fn()
+const mockSetShowEnvPanel = vi.fn()
+const mockSetShowGlobalVariablePanel = vi.fn()
+const mockHandleRun = vi.fn()
+
+const inputFields: SnippetInputField[] = [
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Query',
+    variable: 'query',
+    required: true,
+  },
+]
+
+describe('useSnippetStartRun', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockWorkflowStoreGetState.mockReturnValue({
+      workflowRunningData: undefined,
+      showDebugAndPreviewPanel: false,
+      setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+      setShowInputsPanel: mockSetShowInputsPanel,
+      setShowEnvPanel: mockSetShowEnvPanel,
+      setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+    })
+  })
+
+  it('should open the debug panel and input form when snippet has input fields', () => {
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields,
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(true)
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it('should run immediately when snippet has no input fields', () => {
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields: [],
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(false)
+    expect(mockHandleRun).toHaveBeenCalledWith({ inputs: {} })
+  })
+
+  it('should close the panel when debug panel is already open', () => {
+    mockWorkflowStoreGetState.mockReturnValue({
+      workflowRunningData: undefined,
+      showDebugAndPreviewPanel: true,
+      setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+      setShowInputsPanel: mockSetShowInputsPanel,
+      setShowEnvPanel: mockSetShowEnvPanel,
+      setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+    })
+
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields,
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalled()
+  })
+
+  it('should do nothing when workflow is already running', () => {
+    mockWorkflowStoreGetState.mockReturnValue({
+      workflowRunningData: {
+        result: {
+          status: WorkflowRunningStatus.Running,
+        },
+      },
+      showDebugAndPreviewPanel: false,
+      setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+      setShowInputsPanel: mockSetShowInputsPanel,
+      setShowEnvPanel: mockSetShowEnvPanel,
+      setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+    })
+
+    const { result } = renderHook(() => useSnippetStartRun({
+      handleRun: mockHandleRun,
+      inputFields,
+    }))
+
+    act(() => {
+      result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowDebugAndPreviewPanel).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/snippets/hooks/use-configs-map.ts b/web/app/components/snippets/hooks/use-configs-map.ts
new file mode 100644
index 0000000000..7d5e2863a1
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-configs-map.ts
@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { useStore } from '@/app/components/workflow/store'
+import { Resolution, TransferMethod } from '@/types/app'
+import { FlowType } from '@/types/common'
+
+export const useConfigsMap = (snippetId: string) => {
+  const fileUploadConfig = useStore(s => s.fileUploadConfig)
+
+  return useMemo(() => {
+    return {
+      flowId: snippetId,
+      flowType: FlowType.snippet,
+      fileSettings: {
+        image: {
+          enabled: false,
+          detail: Resolution.high,
+          number_limits: 3,
+          transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+        },
+        fileUploadConfig,
+      },
+    }
+  }, [fileUploadConfig, snippetId])
+}
diff --git a/web/app/components/snippets/hooks/use-inspect-vars-crud.ts b/web/app/components/snippets/hooks/use-inspect-vars-crud.ts
new file mode 100644
index 0000000000..71ae6df068
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-inspect-vars-crud.ts
@@ -0,0 +1,13 @@
+import { useInspectVarsCrudCommon } from '../../workflow/hooks/use-inspect-vars-crud-common'
+import { useConfigsMap } from './use-configs-map'
+
+export const useInspectVarsCrud = (snippetId: string) => {
+  const configsMap = useConfigsMap(snippetId)
+  const apis = useInspectVarsCrudCommon({
+    ...configsMap,
+  })
+
+  return {
+    ...apis,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-nodes-sync-draft.ts b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
new file mode 100644
index 0000000000..1c3efb5647
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-nodes-sync-draft.ts
@@ -0,0 +1,178 @@
+import type { SyncDraftCallback } from '@/app/components/workflow/hooks-store'
+import type { SnippetInputField } from '@/models/snippet'
+import type { SnippetDraftSyncPayload, SnippetWorkflow } from '@/types/snippet'
+import { produce } from 'immer'
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { useSerialAsyncCallback } from '@/app/components/workflow/hooks/use-serial-async-callback'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks/use-workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { API_PREFIX } from '@/config'
+import { consoleClient } from '@/service/client'
+import { postWithKeepalive } from '@/service/fetch'
+import { useSnippetDetailStore } from '../store'
+import { useSnippetRefreshDraft } from './use-snippet-refresh-draft'
+
+const isSyncConflictError = (error: unknown): error is { bodyUsed: boolean, json: () => Promise<{ code?: string }> } => {
+  return !!error
+    && typeof error === 'object'
+    && 'bodyUsed' in error
+    && 'json' in error
+    && typeof error.json === 'function'
+}
+
+type SyncInputFieldsDraftCallback = SyncDraftCallback & {
+  onRefresh?: (inputFields: SnippetInputField[]) => void
+}
+
+export const useNodesSyncDraft = (snippetId: string) => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const { getNodesReadOnly } = useNodesReadOnly()
+  const { handleRefreshWorkflowDraft } = useSnippetRefreshDraft(snippetId)
+
+  const getInputFieldsSyncPayload = useCallback((inputFields?: SnippetInputField[]) => {
+    return {
+      input_fields: inputFields ?? useSnippetDetailStore.getState().fields,
+    }
+  }, [])
+
+  const getDraftSyncPayload = useCallback((inputFields?: SnippetInputField[]) => {
+    const {
+      getNodes,
+      edges,
+      transform,
+    } = store.getState()
+    const nodes = getNodes().filter(node => !node.data?._isTempNode)
+    const [x, y, zoom] = transform
+    if (!snippetId)
+      return null
+
+    const producedNodes = produce(nodes, (draft) => {
+      draft.forEach((node) => {
+        Object.keys(node.data).forEach((key) => {
+          if (key.startsWith('_'))
+            delete node.data[key]
+        })
+      })
+    })
+    const producedEdges = produce(edges.filter(edge => !edge.data?._isTemp), (draft) => {
+      draft.forEach((edge) => {
+        Object.keys(edge.data).forEach((key) => {
+          if (key.startsWith('_'))
+            delete edge.data[key]
+        })
+      })
+    })
+
+    return {
+      ...getInputFieldsSyncPayload(inputFields),
+      graph: {
+        nodes: producedNodes,
+        edges: producedEdges,
+        viewport: { x, y, zoom },
+      },
+    }
+  }, [getInputFieldsSyncPayload, snippetId, store])
+
+  const syncDraft = useCallback(async (
+    payload: Omit<SnippetDraftSyncPayload, 'hash'>,
+    notRefreshWhenSyncError?: boolean,
+    callback?: SyncDraftCallback,
+    onRefresh?: (draftWorkflow: SnippetWorkflow) => void,
+  ) => {
+    if (getNodesReadOnly())
+      return
+
+    if (!snippetId)
+      return
+
+    const {
+      setDraftUpdatedAt,
+      setSyncWorkflowDraftHash,
+      syncWorkflowDraftHash,
+    } = workflowStore.getState()
+
+    try {
+      const response = await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId },
+        body: {
+          ...payload,
+          hash: syncWorkflowDraftHash || undefined,
+        },
+      })
+
+      setSyncWorkflowDraftHash(response.hash)
+      setDraftUpdatedAt(response.updated_at)
+      callback?.onSuccess?.()
+    }
+    catch (error: unknown) {
+      if (isSyncConflictError(error) && !error.bodyUsed) {
+        error.json().then((err) => {
+          if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
+            handleRefreshWorkflowDraft(onRefresh)
+        })
+      }
+      callback?.onError?.()
+    }
+    finally {
+      callback?.onSettled?.()
+    }
+  }, [getNodesReadOnly, handleRefreshWorkflowDraft, snippetId, workflowStore])
+
+  const syncWorkflowDraftWhenPageClose = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    const draftPayload = getDraftSyncPayload()
+    if (!draftPayload)
+      return
+
+    const { syncWorkflowDraftHash } = workflowStore.getState()
+    postWithKeepalive(`${API_PREFIX}/snippets/${snippetId}/workflows/draft`, {
+      ...draftPayload,
+      hash: syncWorkflowDraftHash,
+    })
+  }, [getDraftSyncPayload, getNodesReadOnly, snippetId, workflowStore])
+
+  const performSync = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: SyncDraftCallback,
+  ) => {
+    const draftPayload = getDraftSyncPayload()
+    if (!draftPayload)
+      return
+
+    await syncDraft(draftPayload, notRefreshWhenSyncError, callback)
+  }, [getDraftSyncPayload, syncDraft])
+
+  const performInputFieldsSync = useCallback(async (
+    inputFields: SnippetInputField[],
+    callback?: SyncInputFieldsDraftCallback,
+  ) => {
+    const draftPayload = getDraftSyncPayload(inputFields)
+    if (!draftPayload)
+      return
+
+    await syncDraft(
+      draftPayload,
+      false,
+      callback,
+      (draftWorkflow) => {
+        const refreshedInputFields = Array.isArray(draftWorkflow.input_fields)
+          ? draftWorkflow.input_fields as SnippetInputField[]
+          : []
+        callback?.onRefresh?.(refreshedInputFields)
+      },
+    )
+  }, [getDraftSyncPayload, syncDraft])
+
+  const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
+  const syncInputFieldsDraft = useSerialAsyncCallback(performInputFieldsSync)
+
+  return {
+    doSyncWorkflowDraft,
+    syncInputFieldsDraft,
+    syncWorkflowDraftWhenPageClose,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-snippet-init.ts b/web/app/components/snippets/hooks/use-snippet-init.ts
new file mode 100644
index 0000000000..22e0c4a30d
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-init.ts
@@ -0,0 +1,89 @@
+import { useEffect, useMemo } from 'react'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import {
+  useSnippetDefaultBlockConfigs,
+  useSnippetDraftWorkflow,
+  useSnippetPublishedWorkflow,
+} from '@/service/use-snippet-workflows'
+import {
+  buildSnippetDetailPayload,
+  useSnippetApiDetail,
+} from '@/service/use-snippets'
+import { getSnippetDetailMock } from '@/service/use-snippets.mock'
+
+const normalizeNodesDefaultConfigs = (nodesDefaultConfigs: unknown) => {
+  if (!nodesDefaultConfigs || typeof nodesDefaultConfigs !== 'object')
+    return {}
+
+  if (!Array.isArray(nodesDefaultConfigs))
+    return nodesDefaultConfigs as Record<string, unknown>
+
+  return nodesDefaultConfigs.reduce((acc, item) => {
+    if (
+      item
+      && typeof item === 'object'
+      && 'type' in item
+      && 'config' in item
+      && typeof item.type === 'string'
+    ) {
+      acc[item.type] = item.config
+    }
+
+    return acc
+  }, {} as Record<string, unknown>)
+}
+
+const isNotFoundError = (error: unknown) => {
+  return !!error && typeof error === 'object' && 'status' in error && error.status === 404
+}
+
+export const useSnippetInit = (snippetId: string) => {
+  const workflowStore = useWorkflowStore()
+  const snippetApiDetail = useSnippetApiDetail(snippetId)
+  const draftWorkflowQuery = useSnippetDraftWorkflow(snippetId, (draftWorkflow) => {
+    const {
+      setDraftUpdatedAt,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+
+    setDraftUpdatedAt(draftWorkflow.updated_at)
+    setSyncWorkflowDraftHash(draftWorkflow.hash)
+  })
+  useSnippetDefaultBlockConfigs(snippetId, (nodesDefaultConfigs) => {
+    workflowStore.setState({
+      nodesDefaultConfigs: normalizeNodesDefaultConfigs(nodesDefaultConfigs),
+    })
+  })
+  const publishedWorkflowQuery = useSnippetPublishedWorkflow(snippetId, (publishedWorkflow) => {
+    workflowStore.getState().setPublishedAt(publishedWorkflow.created_at)
+  })
+
+  useEffect(() => {
+    if (publishedWorkflowQuery.isLoading)
+      return
+
+    workflowStore.getState().setPublishedAt(publishedWorkflowQuery.data?.created_at ?? 0)
+  }, [publishedWorkflowQuery.data?.created_at, publishedWorkflowQuery.isLoading, workflowStore])
+
+  const mockData = useMemo(() => getSnippetDetailMock(snippetId), [snippetId])
+  const shouldUseMockData = !snippetApiDetail.isLoading && !snippetApiDetail.data && !!mockData
+
+  const data = useMemo(() => {
+    if (snippetApiDetail.data && !draftWorkflowQuery.isLoading)
+      return buildSnippetDetailPayload(snippetApiDetail.data, draftWorkflowQuery.data)
+
+    if (shouldUseMockData)
+      return mockData
+
+    if (snippetApiDetail.error && isNotFoundError(snippetApiDetail.error))
+      return null
+
+    return undefined
+  }, [draftWorkflowQuery.data, draftWorkflowQuery.isLoading, mockData, shouldUseMockData, snippetApiDetail.data, snippetApiDetail.error])
+
+  return {
+    ...snippetApiDetail,
+    data,
+    isLoading: shouldUseMockData ? false : snippetApiDetail.isLoading || draftWorkflowQuery.isLoading,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
new file mode 100644
index 0000000000..33420911de
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-refresh-draft.ts
@@ -0,0 +1,52 @@
+import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
+import type { SnippetInputField } from '@/models/snippet'
+import type { SnippetWorkflow } from '@/types/snippet'
+import { useCallback } from 'react'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { consoleClient } from '@/service/client'
+import { useSnippetDetailStore } from '../store'
+
+export const useSnippetRefreshDraft = (snippetId: string) => {
+  const workflowStore = useWorkflowStore()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+
+  const handleRefreshWorkflowDraft = useCallback((onSuccess?: (draftWorkflow: SnippetWorkflow) => void) => {
+    const {
+      setDraftUpdatedAt,
+      setIsSyncingWorkflowDraft,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+
+    if (!snippetId)
+      return
+
+    setIsSyncingWorkflowDraft(true)
+    consoleClient.snippets.draftWorkflow({
+      params: { snippetId },
+    }).then((response) => {
+      const inputFields = Array.isArray(response.input_fields)
+        ? response.input_fields as SnippetInputField[]
+        : []
+
+      handleUpdateWorkflowCanvas({
+        ...response.graph,
+        nodes: response.graph?.nodes || [],
+        edges: response.graph?.edges || [],
+        viewport: response.graph?.viewport || { x: 0, y: 0, zoom: 1 },
+      } as WorkflowDataUpdater)
+      useSnippetDetailStore.setState({
+        fields: inputFields,
+      })
+      setSyncWorkflowDraftHash(response.hash)
+      setDraftUpdatedAt(response.updated_at)
+      onSuccess?.(response)
+    }).finally(() => {
+      setIsSyncingWorkflowDraft(false)
+    })
+  }, [handleUpdateWorkflowCanvas, snippetId, workflowStore])
+
+  return {
+    handleRefreshWorkflowDraft,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-snippet-run.ts b/web/app/components/snippets/hooks/use-snippet-run.ts
new file mode 100644
index 0000000000..3c8668270e
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-run.ts
@@ -0,0 +1,298 @@
+import type { IOtherOptions } from '@/service/base'
+import type { SnippetDraftRunPayload } from '@/types/snippet'
+import type { VersionHistory } from '@/types/workflow'
+import { produce } from 'immer'
+import { useCallback, useRef } from 'react'
+import {
+  useReactFlow,
+  useStoreApi,
+} from 'reactflow'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-interactions'
+import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { ssePost } from '@/service/base'
+import { useInvalidAllLastRun, useInvalidateWorkflowRunHistory } from '@/service/use-workflow'
+import { stopWorkflowRun } from '@/service/workflow'
+import { FlowType } from '@/types/common'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
+
+export const useSnippetRun = (snippetId: string) => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+  const reactflow = useReactFlow()
+  const { doSyncWorkflowDraft } = useNodesSyncDraft(snippetId)
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+
+  const {
+    handleWorkflowStarted,
+    handleWorkflowFinished,
+    handleWorkflowFailed,
+    handleWorkflowNodeStarted,
+    handleWorkflowNodeFinished,
+    handleWorkflowNodeIterationStarted,
+    handleWorkflowNodeIterationNext,
+    handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
+    handleWorkflowNodeRetry,
+    handleWorkflowAgentLog,
+    handleWorkflowTextChunk,
+    handleWorkflowTextReplace,
+  } = useWorkflowRunEvent()
+
+  const abortControllerRef = useRef<AbortController | null>(null)
+
+  const handleBackupDraft = useCallback(() => {
+    const {
+      getNodes,
+      edges,
+    } = store.getState()
+    const { getViewport } = reactflow
+    const {
+      backupDraft,
+      setBackupDraft,
+    } = workflowStore.getState()
+
+    if (!backupDraft) {
+      setBackupDraft({
+        nodes: getNodes(),
+        edges,
+        viewport: getViewport(),
+        environmentVariables: [],
+      })
+      doSyncWorkflowDraft()
+    }
+  }, [doSyncWorkflowDraft, reactflow, store, workflowStore])
+
+  const handleLoadBackupDraft = useCallback(() => {
+    const {
+      backupDraft,
+      setBackupDraft,
+      setEnvironmentVariables,
+    } = workflowStore.getState()
+
+    if (backupDraft) {
+      const {
+        nodes,
+        edges,
+        viewport,
+      } = backupDraft
+      handleUpdateWorkflowCanvas({
+        nodes,
+        edges,
+        viewport,
+      })
+      setEnvironmentVariables([])
+      setBackupDraft(undefined)
+    }
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
+  const invalidAllLastRun = useInvalidAllLastRun(FlowType.snippet, snippetId)
+  const invalidateRunHistory = useInvalidateWorkflowRunHistory()
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue({
+    flowType: FlowType.snippet,
+    flowId: snippetId,
+  })
+
+  const handleRun = useCallback(async (
+    params: SnippetDraftRunPayload,
+    callback?: IOtherOptions,
+  ) => {
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+    const newNodes = produce(getNodes(), (draft) => {
+      draft.forEach((node) => {
+        node.data.selected = false
+        node.data._runningStatus = undefined
+      })
+    })
+    setNodes(newNodes)
+    await doSyncWorkflowDraft()
+
+    const {
+      onWorkflowStarted,
+      onWorkflowFinished,
+      onNodeStarted,
+      onNodeFinished,
+      onIterationStart,
+      onIterationNext,
+      onIterationFinish,
+      onLoopStart,
+      onLoopNext,
+      onLoopFinish,
+      onNodeRetry,
+      onAgentLog,
+      onError,
+      ...restCallback
+    } = callback || {}
+    const runHistoryUrl = `/snippets/${snippetId}/workflow-runs`
+    workflowStore.setState({ historyWorkflowData: undefined })
+    const workflowContainer = document.getElementById('workflow-container')
+
+    const {
+      clientWidth,
+      clientHeight,
+    } = workflowContainer!
+
+    const url = `/snippets/${snippetId}/workflows/draft/run`
+
+    const {
+      setWorkflowRunningData,
+    } = workflowStore.getState()
+    setWorkflowRunningData({
+      result: {
+        inputs_truncated: false,
+        process_data_truncated: false,
+        outputs_truncated: false,
+        status: WorkflowRunningStatus.Running,
+      },
+      tracing: [],
+      resultText: '',
+    })
+
+    abortControllerRef.current?.abort()
+    abortControllerRef.current = null
+
+    ssePost(
+      url,
+      {
+        body: params,
+      },
+      {
+        getAbortController: (controller: AbortController) => {
+          abortControllerRef.current = controller
+        },
+        onWorkflowStarted: (params) => {
+          handleWorkflowStarted(params)
+          invalidateRunHistory(runHistoryUrl)
+
+          onWorkflowStarted?.(params)
+        },
+        onWorkflowFinished: (params) => {
+          handleWorkflowFinished(params)
+          invalidateRunHistory(runHistoryUrl)
+          fetchInspectVars({})
+          invalidAllLastRun()
+
+          onWorkflowFinished?.(params)
+        },
+        onError: (params) => {
+          handleWorkflowFailed()
+          invalidateRunHistory(runHistoryUrl)
+
+          onError?.(params)
+        },
+        onNodeStarted: (params) => {
+          handleWorkflowNodeStarted(
+            params,
+            {
+              clientWidth,
+              clientHeight,
+            },
+          )
+
+          onNodeStarted?.(params)
+        },
+        onNodeFinished: (params) => {
+          handleWorkflowNodeFinished(params)
+
+          onNodeFinished?.(params)
+        },
+        onIterationStart: (params) => {
+          handleWorkflowNodeIterationStarted(
+            params,
+            {
+              clientWidth,
+              clientHeight,
+            },
+          )
+
+          onIterationStart?.(params)
+        },
+        onIterationNext: (params) => {
+          handleWorkflowNodeIterationNext(params)
+
+          onIterationNext?.(params)
+        },
+        onIterationFinish: (params) => {
+          handleWorkflowNodeIterationFinished(params)
+
+          onIterationFinish?.(params)
+        },
+        onLoopStart: (params) => {
+          handleWorkflowNodeLoopStarted(
+            params,
+            {
+              clientWidth,
+              clientHeight,
+            },
+          )
+
+          onLoopStart?.(params)
+        },
+        onLoopNext: (params) => {
+          handleWorkflowNodeLoopNext(params)
+
+          onLoopNext?.(params)
+        },
+        onLoopFinish: (params) => {
+          handleWorkflowNodeLoopFinished(params)
+
+          onLoopFinish?.(params)
+        },
+        onNodeRetry: (params) => {
+          handleWorkflowNodeRetry(params)
+
+          onNodeRetry?.(params)
+        },
+        onAgentLog: (params) => {
+          handleWorkflowAgentLog(params)
+
+          onAgentLog?.(params)
+        },
+        onTextChunk: (params) => {
+          handleWorkflowTextChunk(params)
+        },
+        onTextReplace: (params) => {
+          handleWorkflowTextReplace(params)
+        },
+        ...restCallback,
+      },
+    )
+  }, [doSyncWorkflowDraft, fetchInspectVars, handleWorkflowAgentLog, handleWorkflowFailed, handleWorkflowFinished, handleWorkflowNodeFinished, handleWorkflowNodeIterationFinished, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationStarted, handleWorkflowNodeLoopFinished, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopStarted, handleWorkflowNodeRetry, handleWorkflowNodeStarted, handleWorkflowStarted, handleWorkflowTextChunk, handleWorkflowTextReplace, invalidAllLastRun, invalidateRunHistory, snippetId, store, workflowStore])
+
+  const handleStopRun = useCallback((taskId: string) => {
+    stopWorkflowRun(`/snippets/${snippetId}/workflow-runs/tasks/${taskId}/stop`)
+
+    if (abortControllerRef.current)
+      abortControllerRef.current.abort()
+
+    abortControllerRef.current = null
+  }, [snippetId])
+
+  const handleRestoreFromPublishedWorkflow = useCallback((publishedWorkflow: VersionHistory) => {
+    const nodes = publishedWorkflow.graph.nodes.map(node => ({ ...node, selected: false, data: { ...node.data, selected: false } }))
+    const edges = publishedWorkflow.graph.edges
+    const viewport = publishedWorkflow.graph.viewport!
+    handleUpdateWorkflowCanvas({
+      nodes,
+      edges,
+      viewport,
+    })
+
+    workflowStore.getState().setEnvironmentVariables([])
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
+  return {
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRun,
+    handleStopRun,
+    handleRestoreFromPublishedWorkflow,
+  }
+}
diff --git a/web/app/components/snippets/hooks/use-snippet-start-run.ts b/web/app/components/snippets/hooks/use-snippet-start-run.ts
new file mode 100644
index 0000000000..27051510b9
--- /dev/null
+++ b/web/app/components/snippets/hooks/use-snippet-start-run.ts
@@ -0,0 +1,60 @@
+import type { SnippetInputField } from '@/models/snippet'
+import type { SnippetDraftRunPayload } from '@/types/snippet'
+import { useCallback } from 'react'
+import { useWorkflowInteractions } from '@/app/components/workflow/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+
+type UseSnippetStartRunOptions = {
+  handleRun: (params: SnippetDraftRunPayload) => void
+  inputFields: SnippetInputField[]
+}
+
+export const useSnippetStartRun = ({
+  handleRun,
+  inputFields,
+}: UseSnippetStartRunOptions) => {
+  const workflowStore = useWorkflowStore()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+
+  const handleWorkflowStartRunInWorkflow = useCallback(() => {
+    const {
+      workflowRunningData,
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+      setShowEnvPanel,
+      setShowGlobalVariablePanel,
+    } = workflowStore.getState()
+
+    if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
+      return
+
+    setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
+
+    if (showDebugAndPreviewPanel) {
+      handleCancelDebugAndPreviewPanel()
+      return
+    }
+
+    setShowDebugAndPreviewPanel(true)
+
+    if (inputFields.length > 0) {
+      setShowInputsPanel(true)
+      return
+    }
+
+    setShowInputsPanel(false)
+    handleRun({ inputs: {} })
+  }, [handleCancelDebugAndPreviewPanel, handleRun, inputFields.length, workflowStore])
+
+  const handleStartWorkflowRun = useCallback(() => {
+    handleWorkflowStartRunInWorkflow()
+  }, [handleWorkflowStartRunInWorkflow])
+
+  return {
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow,
+  }
+}
diff --git a/web/app/components/snippets/index.tsx b/web/app/components/snippets/index.tsx
new file mode 100644
index 0000000000..a69dee643b
--- /dev/null
+++ b/web/app/components/snippets/index.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { useMemo } from 'react'
+import Loading from '@/app/components/base/loading'
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
+import WorkflowWithDefaultContext from '@/app/components/workflow'
+import { WorkflowContextProvider } from '@/app/components/workflow/context'
+import {
+  initialEdges,
+  initialNodes,
+} from '@/app/components/workflow/utils'
+import SnippetLayout from './components/snippet-layout'
+import SnippetMain from './components/snippet-main'
+import { useSnippetInit } from './hooks/use-snippet-init'
+
+type SnippetPageProps = {
+  snippetId: string
+}
+
+const SnippetPageLoading = () => {
+  return (
+    <div className="flex h-full items-center justify-center bg-background-body">
+      <Loading />
+    </div>
+  )
+}
+
+const SnippetPage = ({ snippetId }: SnippetPageProps) => {
+  const { data, isLoading } = useSnippetInit(snippetId)
+  const nodesData = useMemo(() => {
+    if (!data)
+      return []
+
+    return initialNodes(data.graph.nodes, data.graph.edges)
+  }, [data])
+  const edgesData = useMemo(() => {
+    if (!data)
+      return []
+
+    return initialEdges(data.graph.edges, data.graph.nodes)
+  }, [data])
+
+  if (!data || isLoading) {
+    return <SnippetPageLoading />
+  }
+
+  return (
+    <SnippetLayout
+      snippetId={snippetId}
+      snippet={data.snippet}
+      section="orchestrate"
+    >
+      <WorkflowWithDefaultContext
+        edges={edgesData}
+        nodes={nodesData}
+      >
+        <SnippetMain
+          key={snippetId}
+          snippetId={snippetId}
+          payload={data}
+          nodes={nodesData}
+          edges={edgesData}
+          viewport={data.graph.viewport}
+        />
+      </WorkflowWithDefaultContext>
+    </SnippetLayout>
+  )
+}
+
+const SnippetPageWrapper = ({ snippetId }: SnippetPageProps) => {
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref="/apps">
+      <WorkflowContextProvider>
+        <SnippetPage snippetId={snippetId} />
+      </WorkflowContextProvider>
+    </SnippetAndEvaluationPlanGuard>
+  )
+}
+
+export default SnippetPageWrapper
diff --git a/web/app/components/snippets/snippet-evaluation-page.tsx b/web/app/components/snippets/snippet-evaluation-page.tsx
new file mode 100644
index 0000000000..f6aeeef335
--- /dev/null
+++ b/web/app/components/snippets/snippet-evaluation-page.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useMemo } from 'react'
+import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
+import Evaluation from '@/app/components/evaluation'
+import { getSnippetDetailMock } from '@/service/use-snippets.mock'
+import SnippetLayout from './components/snippet-layout'
+
+type SnippetEvaluationPageProps = {
+  snippetId: string
+}
+
+const SnippetEvaluationPage = ({ snippetId }: SnippetEvaluationPageProps) => {
+  const mockSnippet = useMemo(() => getSnippetDetailMock(snippetId)?.snippet, [snippetId])
+  const snippet = mockSnippet
+
+  if (!snippet)
+    return null
+
+  return (
+    <SnippetAndEvaluationPlanGuard fallbackHref="/apps">
+      <SnippetLayout
+        snippetId={snippetId}
+        snippet={snippet}
+        section="evaluation"
+      >
+        <Evaluation resourceType="snippets" resourceId={snippetId} />
+      </SnippetLayout>
+    </SnippetAndEvaluationPlanGuard>
+  )
+}
+
+export default SnippetEvaluationPage
diff --git a/web/app/components/snippets/store/index.ts b/web/app/components/snippets/store/index.ts
new file mode 100644
index 0000000000..4dcd78c046
--- /dev/null
+++ b/web/app/components/snippets/store/index.ts
@@ -0,0 +1,48 @@
+'use client'
+
+import type { SnippetInputField, SnippetSection } from '@/models/snippet'
+import { create } from 'zustand'
+
+type SnippetDetailUIState = {
+  activeSection: SnippetSection
+  fields: SnippetInputField[]
+  isInputPanelOpen: boolean
+  isPublishMenuOpen: boolean
+  isPreviewMode: boolean
+  isEditorOpen: boolean
+  editingField: SnippetInputField | null
+  setActiveSection: (section: SnippetSection) => void
+  setFields: (fields: SnippetInputField[]) => void
+  setInputPanelOpen: (value: boolean) => void
+  toggleInputPanel: () => void
+  setPublishMenuOpen: (value: boolean) => void
+  togglePublishMenu: () => void
+  setPreviewMode: (value: boolean) => void
+  openEditor: (field?: SnippetInputField | null) => void
+  closeEditor: () => void
+  reset: () => void
+}
+
+const initialState = {
+  activeSection: 'orchestrate' as SnippetSection,
+  fields: [] as SnippetInputField[],
+  isInputPanelOpen: false,
+  isPublishMenuOpen: false,
+  isPreviewMode: false,
+  editingField: null,
+  isEditorOpen: false,
+}
+
+export const useSnippetDetailStore = create<SnippetDetailUIState>(set => ({
+  ...initialState,
+  setActiveSection: activeSection => set({ activeSection }),
+  setFields: fields => set({ fields }),
+  setInputPanelOpen: isInputPanelOpen => set({ isInputPanelOpen }),
+  toggleInputPanel: () => set(state => ({ isInputPanelOpen: !state.isInputPanelOpen, isPublishMenuOpen: false })),
+  setPublishMenuOpen: isPublishMenuOpen => set({ isPublishMenuOpen }),
+  togglePublishMenu: () => set(state => ({ isPublishMenuOpen: !state.isPublishMenuOpen })),
+  setPreviewMode: isPreviewMode => set({ isPreviewMode }),
+  openEditor: (editingField = null) => set({ editingField, isEditorOpen: true, isInputPanelOpen: true }),
+  closeEditor: () => set({ editingField: null, isEditorOpen: false }),
+  reset: () => set(initialState),
+}))
diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx
index e7d6a22d42..449f0b8b4a 100644
--- a/web/app/components/tools/marketplace/index.tsx
+++ b/web/app/components/tools/marketplace/index.tsx
@@ -37,50 +37,50 @@ const Marketplace = ({
 
   return (
     <>
-      <div className="sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle px-12 pt-2 pb-[14px]">
+      <div className="sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle px-12 pb-[14px] pt-2">
         {isMarketplaceArrowVisible && (
           <RiArrowUpDoubleLine
-            className="absolute top-2 left-1/2 z-10 h-4 w-4 -translate-x-1/2 cursor-pointer text-text-quaternary"
+            className="absolute left-1/2 top-2 z-10 h-4 w-4 -translate-x-1/2 cursor-pointer text-text-quaternary"
             onClick={showMarketplacePanel}
           />
         )}
-        <div className="pt-4 pb-3">
-          <div className="bg-linear-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text title-2xl-semi-bold text-transparent">
+        <div className="pb-3 pt-4">
+          <div className="title-2xl-semi-bold bg-linear-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent">
             {t('marketplace.moreFrom', { ns: 'plugin' })}
           </div>
-          <div className="flex items-center text-center body-md-regular text-text-tertiary">
+          <div className="body-md-regular flex items-center text-center text-text-tertiary">
             {t('marketplace.discover', { ns: 'plugin' })}
-            <span className="relative ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.models', { ns: 'plugin' })}
             </span>
             ,
-            <span className="relative ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.tools', { ns: 'plugin' })}
             </span>
             ,
-            <span className="relative ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.datasources', { ns: 'plugin' })}
             </span>
             ,
-            <span className="relative ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.triggers', { ns: 'plugin' })}
             </span>
             ,
-            <span className="relative ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.agents', { ns: 'plugin' })}
             </span>
             ,
-            <span className="relative mr-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.extensions', { ns: 'plugin' })}
             </span>
             {t('marketplace.and', { ns: 'plugin' })}
-            <span className="relative mr-1 ml-1 body-md-medium text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            <span className="body-md-medium relative ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
               {t('category.bundles', { ns: 'plugin' })}
             </span>
             {t('operation.in', { ns: 'common' })}
             <a
               href={getMarketplaceUrl('', { language: locale, q: searchPluginText, tags: filterPluginTags.join(','), theme })}
-              className="ml-1 flex items-center system-sm-medium text-text-accent"
+              className="system-sm-medium ml-1 flex items-center text-text-accent"
               target="_blank"
             >
               {t('marketplace.difyMarketplace', { ns: 'plugin' })}
@@ -92,7 +92,7 @@ const Marketplace = ({
       <div className="mt-[-14px] shrink-0 grow bg-background-default-subtle px-12 pb-2">
         {
           isLoading && page === 1 && (
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
               <Loading />
             </div>
           )
diff --git a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
index 5216e9eede..584c9d211a 100644
--- a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
@@ -199,22 +199,22 @@ describe('MCPDetailContent', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<MCPDetailContent {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('Test MCP Server'))!.toBeInTheDocument()
+      expect(screen.getByText('Test MCP Server')).toBeInTheDocument()
     })
 
     it('should display MCP name', () => {
       render(<MCPDetailContent {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('Test MCP Server'))!.toBeInTheDocument()
+      expect(screen.getByText('Test MCP Server')).toBeInTheDocument()
     })
 
     it('should display server identifier', () => {
       render(<MCPDetailContent {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('test-mcp'))!.toBeInTheDocument()
+      expect(screen.getByText('test-mcp')).toBeInTheDocument()
     })
 
     it('should display server URL', () => {
       render(<MCPDetailContent {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByText('https://example.com/mcp'))!.toBeInTheDocument()
+      expect(screen.getByText('https://example.com/mcp')).toBeInTheDocument()
     })
 
     it('should render close button', () => {
@@ -227,8 +227,7 @@ describe('MCPDetailContent', () => {
     it('should render operation dropdown', () => {
       render(<MCPDetailContent {...defaultProps} />, { wrapper: createWrapper() })
       // Operation dropdown trigger should be present
-      // Operation dropdown trigger should be present
-      expect(document.querySelector('button'))!.toBeInTheDocument()
+      expect(document.querySelector('button')).toBeInTheDocument()
     })
   })
 
@@ -239,7 +238,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.authorize'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.authorize')).toBeInTheDocument()
     })
 
     it('should show authorized button when authorized', () => {
@@ -248,7 +247,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.auth.authorized'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.auth.authorized')).toBeInTheDocument()
     })
 
     it('should show authorization required message when not authorized', () => {
@@ -257,7 +256,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.authorizingRequired'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.authorizingRequired')).toBeInTheDocument()
     })
 
     it('should show authorization tip', () => {
@@ -266,7 +265,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.authorizeTip'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.authorizeTip')).toBeInTheDocument()
     })
   })
 
@@ -277,7 +276,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.toolsEmpty'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.toolsEmpty')).toBeInTheDocument()
     })
 
     it('should show get tools button when empty', () => {
@@ -286,7 +285,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.getTools'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.getTools')).toBeInTheDocument()
     })
   })
 
@@ -295,7 +294,7 @@ describe('MCPDetailContent', () => {
       render(<MCPDetailContent {...defaultProps} />, { wrapper: createWrapper() })
       // Icon container should be present
       const iconContainer = document.querySelector('[class*="rounded-xl"][class*="border"]')
-      expect(iconContainer)!.toBeInTheDocument()
+      expect(iconContainer).toBeInTheDocument()
     })
   })
 
@@ -306,7 +305,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('Test MCP Server'))!.toBeInTheDocument()
+      expect(screen.getByText('Test MCP Server')).toBeInTheDocument()
     })
 
     it('should handle long MCP name', () => {
@@ -316,7 +315,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText(longName))!.toBeInTheDocument()
+      expect(screen.getByText(longName)).toBeInTheDocument()
     })
   })
 
@@ -333,8 +332,8 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tool1'))!.toBeInTheDocument()
-      expect(screen.getByText('tool2'))!.toBeInTheDocument()
+      expect(screen.getByText('tool1')).toBeInTheDocument()
+      expect(screen.getByText('tool2')).toBeInTheDocument()
     })
 
     it('should show single tool label when only one tool', () => {
@@ -346,7 +345,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.onlyTool'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.onlyTool')).toBeInTheDocument()
     })
 
     it('should show tools count when multiple tools', () => {
@@ -361,7 +360,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText(/tools.mcp.toolsNum/))!.toBeInTheDocument()
+      expect(screen.getByText(/tools.mcp.toolsNum/)).toBeInTheDocument()
     })
   })
 
@@ -376,7 +375,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.gettingTools'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.gettingTools')).toBeInTheDocument()
     })
 
     it('should show updating state when updating tools', () => {
@@ -389,7 +388,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.mcp.updateTools'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.mcp.updateTools')).toBeInTheDocument()
     })
 
     it('should show authorizing button when authorizing', () => {
@@ -465,7 +464,7 @@ describe('MCPDetailContent', () => {
       )
 
       const authorizeBtn = screen.getByText('tools.mcp.authorize')
-      expect(authorizeBtn.closest('button'))!.toBeDisabled()
+      expect(authorizeBtn.closest('button')).toBeDisabled()
     })
   })
 
@@ -484,7 +483,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(updateBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle')).toBeInTheDocument()
       })
     })
 
@@ -504,7 +503,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(updateBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle')).toBeInTheDocument()
       })
 
       // Confirm the update
@@ -542,7 +541,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(editBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('mcp-update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('mcp-update-modal')).toBeInTheDocument()
       })
     })
 
@@ -554,7 +553,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(editBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('mcp-update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('mcp-update-modal')).toBeInTheDocument()
       })
 
       // Close modal
@@ -575,7 +574,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(editBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('mcp-update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('mcp-update-modal')).toBeInTheDocument()
       })
 
       // Confirm form
@@ -602,7 +601,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(editBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('mcp-update-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('mcp-update-modal')).toBeInTheDocument()
       })
 
       // Confirm form
@@ -625,7 +624,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.delete'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
     })
 
@@ -637,7 +636,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.delete'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Cancel
@@ -657,7 +656,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.delete'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Confirm delete
@@ -679,7 +678,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.delete'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Confirm delete
@@ -744,7 +743,7 @@ describe('MCPDetailContent', () => {
       })
 
       // Get the callback function and call it
-      const oauthCallback = mockOpenOAuthPopup.mock.calls[0]![1]
+      const oauthCallback = mockOpenOAuthPopup.mock.calls[0][1]
       oauthCallback()
 
       await waitFor(() => {
@@ -766,7 +765,7 @@ describe('MCPDetailContent', () => {
 
       // Button should be disabled
       const authorizeBtn = screen.getByText('tools.mcp.authorize')
-      expect(authorizeBtn.closest('button'))!.toBeDisabled()
+      expect(authorizeBtn.closest('button')).toBeDisabled()
     })
   })
 
@@ -777,7 +776,7 @@ describe('MCPDetailContent', () => {
         <MCPDetailContent {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByText('tools.auth.authorized'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.auth.authorized')).toBeInTheDocument()
     })
 
     it('should call handleAuthorize when authorized button is clicked', async () => {
@@ -806,7 +805,7 @@ describe('MCPDetailContent', () => {
       )
 
       const authorizedBtn = screen.getByText('tools.auth.authorized')
-      expect(authorizedBtn.closest('button'))!.toBeDisabled()
+      expect(authorizedBtn.closest('button')).toBeDisabled()
     })
   })
 
@@ -826,7 +825,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(updateBtn)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle')).toBeInTheDocument()
       })
 
       // Cancel the update
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index 870e8adab1..1e3327232c 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -187,9 +187,9 @@ describe('ProviderDetail', () => {
           onRefreshData={mockOnRefreshData}
         />,
       )
-      expect(screen.getByTestId('title'))!.toHaveTextContent('Test Collection')
-      expect(screen.getByTestId('org-info'))!.toHaveTextContent('Test Author')
-      expect(screen.getByTestId('description'))!.toHaveTextContent('A test collection')
+      expect(screen.getByTestId('title')).toHaveTextContent('Test Collection')
+      expect(screen.getByTestId('org-info')).toHaveTextContent('Test Author')
+      expect(screen.getByTestId('description')).toHaveTextContent('A test collection')
     })
 
     it('shows loading state initially', () => {
@@ -200,7 +200,7 @@ describe('ProviderDetail', () => {
           onRefreshData={mockOnRefreshData}
         />,
       )
-      expect(screen.getByRole('status'))!.toBeInTheDocument()
+      expect(screen.getByRole('status')).toBeInTheDocument()
     })
 
     it('renders tool list after loading for builtIn type', async () => {
@@ -212,8 +212,8 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByTestId('tool-tool-1'))!.toBeInTheDocument()
-        expect(screen.getByTestId('tool-tool-2'))!.toBeInTheDocument()
+        expect(screen.getByTestId('tool-tool-1')).toBeInTheDocument()
+        expect(screen.getByTestId('tool-tool-2')).toBeInTheDocument()
       })
     })
 
@@ -239,7 +239,7 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
     })
 
@@ -252,7 +252,7 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.authorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.authorized')).toBeInTheDocument()
       })
     })
   })
@@ -273,7 +273,7 @@ describe('ProviderDetail', () => {
         expect(mockFetchCustomCollection).toHaveBeenCalledWith('test-collection')
       })
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
     })
   })
@@ -291,8 +291,8 @@ describe('ProviderDetail', () => {
         expect(mockFetchWorkflowToolDetail).toHaveBeenCalledWith('test-id')
       })
       await waitFor(() => {
-        expect(screen.getByText('tools.openInStudio'))!.toBeInTheDocument()
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.openInStudio')).toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
     })
   })
@@ -315,7 +315,7 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.unauthorized'))
       expect(mockSetShowModelModal).toHaveBeenCalled()
@@ -332,7 +332,7 @@ describe('ProviderDetail', () => {
         />,
       )
       const buttons = screen.getAllByRole('button')
-      fireEvent.click(buttons[0]!)
+      fireEvent.click(buttons[0])
       expect(mockOnHide).toHaveBeenCalled()
     })
   })
@@ -388,10 +388,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.unauthorized'))
-      expect(screen.getByTestId('config-credential'))!.toBeInTheDocument()
+      expect(screen.getByTestId('config-credential')).toBeInTheDocument()
     })
 
     it('saves credentials and refreshes data', async () => {
@@ -403,7 +403,7 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.unauthorized'))
       await act(async () => {
@@ -424,7 +424,7 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.unauthorized'))
       await act(async () => {
@@ -445,10 +445,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.authorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.authorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.authorized'))
-      expect(screen.getByTestId('config-credential'))!.toBeInTheDocument()
+      expect(screen.getByTestId('config-credential')).toBeInTheDocument()
     })
   })
 
@@ -467,10 +467,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.unauthorized'))
-      const call = mockSetShowModelModal.mock.calls[0]![0]
+      const call = mockSetShowModelModal.mock.calls[0][0]
       act(() => {
         call.onSaveCallback()
       })
@@ -497,7 +497,7 @@ describe('ProviderDetail', () => {
         expect(mockFetchCustomCollection).toHaveBeenCalled()
       })
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
     })
 
@@ -513,10 +513,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
-      expect(screen.getByTestId('edit-custom-modal'))!.toBeInTheDocument()
+      expect(screen.getByTestId('edit-custom-modal')).toBeInTheDocument()
       await act(async () => {
         fireEvent.click(screen.getByTestId('edit-save'))
       })
@@ -538,11 +538,11 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
       fireEvent.click(screen.getByTestId('edit-remove'))
-      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle')).toBeInTheDocument()
       await act(async () => {
         fireEvent.click(getDeleteConfirmButton())
       })
@@ -574,10 +574,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('query'))!.toBeInTheDocument()
-        expect(screen.getByText('string'))!.toBeInTheDocument()
-        expect(screen.getByText('Search query'))!.toBeInTheDocument()
-        expect(screen.getByText('limit'))!.toBeInTheDocument()
+        expect(screen.getByText('query')).toBeInTheDocument()
+        expect(screen.getByText('string')).toBeInTheDocument()
+        expect(screen.getByText('Search query')).toBeInTheDocument()
+        expect(screen.getByText('limit')).toBeInTheDocument()
       })
     })
 
@@ -590,10 +590,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
-      expect(screen.getByTestId('workflow-tool-modal'))!.toBeInTheDocument()
+      expect(screen.getByTestId('workflow-tool-modal')).toBeInTheDocument()
       await act(async () => {
         fireEvent.click(screen.getByTestId('wf-save'))
       })
@@ -612,11 +612,11 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
       fireEvent.click(screen.getByTestId('wf-remove'))
-      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle')).toBeInTheDocument()
       await act(async () => {
         fireEvent.click(getDeleteConfirmButton())
       })
@@ -637,10 +637,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.auth.unauthorized'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.auth.unauthorized')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.auth.unauthorized'))
-      expect(screen.getByTestId('config-credential'))!.toBeInTheDocument()
+      expect(screen.getByTestId('config-credential')).toBeInTheDocument()
       fireEvent.click(screen.getByTestId('credential-cancel'))
       expect(screen.queryByTestId('config-credential')).not.toBeInTheDocument()
     })
@@ -657,10 +657,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
-      expect(screen.getByTestId('edit-custom-modal'))!.toBeInTheDocument()
+      expect(screen.getByTestId('edit-custom-modal')).toBeInTheDocument()
       fireEvent.click(screen.getByTestId('edit-close'))
       expect(screen.queryByTestId('edit-custom-modal')).not.toBeInTheDocument()
     })
@@ -674,10 +674,10 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
-      expect(screen.getByTestId('workflow-tool-modal'))!.toBeInTheDocument()
+      expect(screen.getByTestId('workflow-tool-modal')).toBeInTheDocument()
       fireEvent.click(screen.getByTestId('wf-close'))
       expect(screen.queryByTestId('workflow-tool-modal')).not.toBeInTheDocument()
     })
@@ -696,11 +696,11 @@ describe('ProviderDetail', () => {
         />,
       )
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.editAction'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.editAction')).toBeInTheDocument()
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
       fireEvent.click(screen.getByTestId('edit-remove'))
-      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle')).toBeInTheDocument()
       fireEvent.click(getDeleteCancelButton())
       await waitFor(() => {
         expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
diff --git a/web/app/components/tools/workflow-tool/__tests__/method-selector.spec.tsx b/web/app/components/tools/workflow-tool/__tests__/method-selector.spec.tsx
index d1126bf762..4379bec035 100644
--- a/web/app/components/tools/workflow-tool/__tests__/method-selector.spec.tsx
+++ b/web/app/components/tools/workflow-tool/__tests__/method-selector.spec.tsx
@@ -26,28 +26,26 @@ describe('MethodSelector', () => {
       renderComponent()
 
       // Should display the current method text
-      // Should display the current method text
-      expect(screen.getByText('tools.createTool.toolInput.methodParameter'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodParameter')).toBeInTheDocument()
     })
 
     it('should render with llm value selected', () => {
       renderComponent({ value: 'llm' })
 
-      expect(screen.getByText('tools.createTool.toolInput.methodParameter'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodParameter')).toBeInTheDocument()
     })
 
     it('should render with form value selected', () => {
       renderComponent({ value: 'form' })
 
-      expect(screen.getByText('tools.createTool.toolInput.methodSetting'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodSetting')).toBeInTheDocument()
     })
 
     it('should render with undefined value', () => {
       renderComponent({ value: undefined })
 
       // When value is undefined, it should show the form method text (else branch)
-      // When value is undefined, it should show the form method text (else branch)
-      expect(screen.getByText('tools.createTool.toolInput.methodSetting'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodSetting')).toBeInTheDocument()
     })
 
     it('should render arrow down icon', () => {
@@ -55,7 +53,7 @@ describe('MethodSelector', () => {
 
       // The arrow icon is rendered with remixicon
       const arrowIcon = document.querySelector('.remixicon')
-      expect(arrowIcon)!.toBeInTheDocument()
+      expect(arrowIcon).toBeInTheDocument()
     })
   })
 
@@ -64,19 +62,19 @@ describe('MethodSelector', () => {
     it('should display methodParameter when value is llm', () => {
       renderComponent({ value: 'llm' })
 
-      expect(screen.getByText('tools.createTool.toolInput.methodParameter'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodParameter')).toBeInTheDocument()
     })
 
     it('should display methodSetting when value is form', () => {
       renderComponent({ value: 'form' })
 
-      expect(screen.getByText('tools.createTool.toolInput.methodSetting'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodSetting')).toBeInTheDocument()
     })
 
     it('should handle empty string value as non-llm', () => {
       renderComponent({ value: '' })
 
-      expect(screen.getByText('tools.createTool.toolInput.methodSetting'))!.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.toolInput.methodSetting')).toBeInTheDocument()
     })
   })
 
@@ -92,8 +90,8 @@ describe('MethodSelector', () => {
 
       // Dropdown should now show both options with tips
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip'))!.toBeInTheDocument()
-        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip')).toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip')).toBeInTheDocument()
       })
     })
 
@@ -108,12 +106,12 @@ describe('MethodSelector', () => {
 
       // Wait for dropdown to open
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip')).toBeInTheDocument()
       })
 
       // Click the llm option (by finding the method parameter option in dropdown)
       const llmOption = screen.getAllByText('tools.createTool.toolInput.methodParameter')[0]
-      await user.click(llmOption!)
+      await user.click(llmOption)
 
       expect(onChange).toHaveBeenCalledWith('llm')
     })
@@ -129,12 +127,12 @@ describe('MethodSelector', () => {
 
       // Wait for dropdown to open
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip')).toBeInTheDocument()
       })
 
       // Click the form option (by finding the method setting option in dropdown)
       const formOption = screen.getAllByText('tools.createTool.toolInput.methodSetting')[0]
-      await user.click(formOption!)
+      await user.click(formOption)
 
       expect(onChange).toHaveBeenCalledWith('form')
     })
@@ -148,7 +146,7 @@ describe('MethodSelector', () => {
       // First click - open
       await user.click(trigger)
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip')).toBeInTheDocument()
       })
 
       // Second click - close
@@ -165,7 +163,7 @@ describe('MethodSelector', () => {
       renderComponent()
 
       const trigger = document.querySelector('.hover\\:bg-background-section-burn')
-      expect(trigger)!.toBeInTheDocument()
+      expect(trigger).toBeInTheDocument()
     })
 
     it('should apply open state styles when dropdown is open', async () => {
@@ -177,7 +175,7 @@ describe('MethodSelector', () => {
 
       await waitFor(() => {
         const openTrigger = document.querySelector('.bg-background-section-burn\\!')
-        expect(openTrigger)!.toBeInTheDocument()
+        expect(openTrigger).toBeInTheDocument()
       })
     })
 
@@ -191,7 +189,7 @@ describe('MethodSelector', () => {
       await waitFor(() => {
         // Check icon should be visible for llm option
         const checkIcon = document.querySelector('.text-text-accent')
-        expect(checkIcon)!.toBeInTheDocument()
+        expect(checkIcon).toBeInTheDocument()
       })
     })
 
@@ -205,7 +203,7 @@ describe('MethodSelector', () => {
       await waitFor(() => {
         // Check icon should be visible for form option
         const checkIcon = document.querySelector('.text-text-accent')
-        expect(checkIcon)!.toBeInTheDocument()
+        expect(checkIcon).toBeInTheDocument()
       })
     })
   })
@@ -221,9 +219,8 @@ describe('MethodSelector', () => {
 
       await waitFor(() => {
         // Should show both option titles and descriptions
-        // Should show both option titles and descriptions
-        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip'))!.toBeInTheDocument()
-        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip')).toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip')).toBeInTheDocument()
       })
     })
 
@@ -236,9 +233,9 @@ describe('MethodSelector', () => {
 
       await waitFor(() => {
         const dropdown = document.querySelector('.w-\\[320px\\]')
-        expect(dropdown)!.toBeInTheDocument()
-        expect(dropdown)!.toHaveClass('rounded-lg')
-        expect(dropdown)!.toHaveClass('shadow-lg')
+        expect(dropdown).toBeInTheDocument()
+        expect(dropdown).toHaveClass('rounded-lg')
+        expect(dropdown).toHaveClass('shadow-lg')
       })
     })
 
@@ -270,8 +267,7 @@ describe('MethodSelector', () => {
       await user.click(trigger)
 
       // Should not crash and should be in a consistent state
-      // Should not crash and should be in a consistent state
-      expect(trigger)!.toBeInTheDocument()
+      expect(trigger).toBeInTheDocument()
     })
 
     it('should handle selecting the already selected value', async () => {
@@ -283,12 +279,12 @@ describe('MethodSelector', () => {
       await user.click(trigger)
 
       await waitFor(() => {
-        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip'))!.toBeInTheDocument()
+        expect(screen.getByText('tools.createTool.toolInput.methodParameterTip')).toBeInTheDocument()
       })
 
       // Click the llm option in the dropdown (the one with the tip text nearby)
       const llmOptionContainer = screen.getByText('tools.createTool.toolInput.methodParameterTip').closest('.cursor-pointer')
-      expect(llmOptionContainer)!.toBeInTheDocument()
+      expect(llmOptionContainer).toBeInTheDocument()
       await user.click(llmOptionContainer!)
 
       // Should call onChange
@@ -302,7 +298,7 @@ describe('MethodSelector', () => {
       renderComponent()
 
       const trigger = document.querySelector('.cursor-pointer')
-      expect(trigger)!.toBeInTheDocument()
+      expect(trigger).toBeInTheDocument()
     })
 
     it('should have clickable dropdown options', async () => {
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
index af38ca113f..479b95dcb6 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
@@ -2,8 +2,21 @@ import type { ReactNode } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { AppTypeEnum } from '@/types/app'
 import WorkflowOnboardingModal from '../index'
 
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 vi.mock('@/app/components/workflow/block-selector', () => ({
   default: function MockNodeSelector({
     open,
@@ -44,6 +57,7 @@ describe('WorkflowOnboardingModal', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
   })
 
   const renderComponent = (props = {}) => {
@@ -91,6 +105,15 @@ describe('WorkflowOnboardingModal', () => {
       expect(getTriggerHeading()).toBeInTheDocument()
     })
 
+    it('should hide the trigger starter in evaluation workflows', () => {
+      mockAppType.current = AppTypeEnum.EVALUATION
+
+      renderComponent()
+
+      expect(getUserInputHeading()).toBeInTheDocument()
+      expect(screen.queryByRole('heading', { name: 'workflow.onboarding.trigger' })).not.toBeInTheDocument()
+    })
+
     it('should render ESC tip when shown', () => {
       renderComponent({ isShow: true })
 
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx
index b2496f8714..36544b568c 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/start-node-selection-panel.spec.tsx
@@ -2,8 +2,21 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { AppTypeEnum } from '@/types/app'
 import StartNodeSelectionPanel from '../start-node-selection-panel'
 
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 // Mock NodeSelector component
 vi.mock('@/app/components/workflow/block-selector', () => ({
   default: function MockNodeSelector({
@@ -61,6 +74,7 @@ describe('StartNodeSelectionPanel', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
   })
 
   // Helper function to render component
@@ -96,6 +110,15 @@ describe('StartNodeSelectionPanel', () => {
       expect(screen.getByText('workflow.onboarding.triggerDescription')).toBeInTheDocument()
     })
 
+    it('should hide the trigger option in evaluation workflows', () => {
+      mockAppType.current = AppTypeEnum.EVALUATION
+
+      renderComponent()
+
+      expect(screen.queryByText('workflow.onboarding.trigger')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('node-selector')).not.toBeInTheDocument()
+    })
+
     it('should render node selector component', () => {
       // Arrange & Act
       renderComponent()
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
index 07eb8ffe3c..8b1ce699e7 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
@@ -30,7 +30,7 @@ const StartNodeOption: FC<StartNodeOptionProps> = ({
           <h3 className="text-text-primary">
             {title}
             {subtitle && (
-              <span className="system-md-regular text-text-quaternary">
+              <span className="text-text-quaternary system-md-regular">
                 {' '}
                 {subtitle}
               </span>
@@ -39,7 +39,7 @@ const StartNodeOption: FC<StartNodeOptionProps> = ({
         </div>
 
         <div className="h-12 leading-4">
-          <p className="system-xs-regular text-text-tertiary">
+          <p className="text-text-tertiary system-xs-regular">
             {description}
           </p>
         </div>
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
index b4a1cd135b..dfb36f5534 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
@@ -3,10 +3,12 @@ import type { FC } from 'react'
 import type { PluginDefaultValue } from '@/app/components/workflow/block-selector/types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { Home, TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 import NodeSelector from '@/app/components/workflow/block-selector'
 import { TabsEnum } from '@/app/components/workflow/block-selector/types'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { isEvaluationWorkflow } from '@/app/components/workflow/utils/evaluation-workflow'
 import StartNodeOption from './start-node-option'
 
 type StartNodeSelectionPanelProps = {
@@ -19,7 +21,9 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
   onSelectTrigger,
 }) => {
   const { t } = useTranslation()
+  const appType = useAppStore(s => s.appDetail?.type)
   const [showTriggerSelector, setShowTriggerSelector] = useState(false)
+  const isEvaluationWorkflowType = isEvaluationWorkflow(appType)
 
   const handleTriggerSelect = useCallback((nodeType: BlockEnum, toolConfig?: PluginDefaultValue) => {
     setShowTriggerSelector(false)
@@ -39,34 +43,36 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
         onClick={onSelectUserInput}
       />
 
-      <NodeSelector
-        open={showTriggerSelector}
-        onOpenChange={setShowTriggerSelector}
-        onSelect={handleTriggerSelect}
-        placement="right"
-        offset={-200}
-        noBlocks={true}
-        showStartTab={true}
-        defaultActiveTab={TabsEnum.Start}
-        forceShowStartContent={true}
-        availableBlocksTypes={[
-          BlockEnum.TriggerSchedule,
-          BlockEnum.TriggerWebhook,
-          BlockEnum.TriggerPlugin,
-        ]}
-        trigger={() => (
-          <StartNodeOption
-            icon={(
-              <div className="flex h-9 w-9 items-center justify-center rounded-[10px] border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
-                <TriggerAll className="h-5 w-5 text-white" />
-              </div>
-            )}
-            title={t('onboarding.trigger', { ns: 'workflow' })}
-            description={t('onboarding.triggerDescription', { ns: 'workflow' })}
-            onClick={() => setShowTriggerSelector(true)}
-          />
-        )}
-      />
+      {!isEvaluationWorkflowType && (
+        <NodeSelector
+          open={showTriggerSelector}
+          onOpenChange={setShowTriggerSelector}
+          onSelect={handleTriggerSelect}
+          placement="right"
+          offset={-200}
+          noBlocks={true}
+          showStartTab={true}
+          defaultActiveTab={TabsEnum.Start}
+          forceShowStartContent={true}
+          availableBlocksTypes={[
+            BlockEnum.TriggerSchedule,
+            BlockEnum.TriggerWebhook,
+            BlockEnum.TriggerPlugin,
+          ]}
+          trigger={() => (
+            <StartNodeOption
+              icon={(
+                <div className="flex h-9 w-9 items-center justify-center radius-lg border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
+                  <TriggerAll className="h-5 w-5 text-white" />
+                </div>
+              )}
+              title={t('onboarding.trigger', { ns: 'workflow' })}
+              description={t('onboarding.triggerDescription', { ns: 'workflow' })}
+              onClick={() => setShowTriggerSelector(true)}
+            />
+          )}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts
index c92e438cb3..8a645d1ff9 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts
@@ -1,13 +1,25 @@
 import { renderHook } from '@testing-library/react'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { AppTypeEnum } from '@/types/app'
 import { useAvailableNodesMetaData } from '../use-available-nodes-meta-data'
 
 const mockUseIsChatMode = vi.fn()
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
 
 vi.mock('@/app/components/workflow-app/hooks/use-is-chat-mode', () => ({
   useIsChatMode: () => mockUseIsChatMode(),
 }))
 
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `/docs${path}`,
 }))
@@ -15,6 +27,7 @@ vi.mock('@/context/i18n', () => ({
 describe('useAvailableNodesMetaData', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
   })
 
   it('should include chat-specific nodes and make the start node undeletable in chat mode', () => {
@@ -46,4 +59,18 @@ describe('useAvailableNodesMetaData', () => {
       title: 'workflow.blocks.start',
     })
   })
+
+  it('should exclude human input and trigger nodes in evaluation workflows', () => {
+    mockUseIsChatMode.mockReturnValue(false)
+    mockAppType.current = AppTypeEnum.EVALUATION
+
+    const { result } = renderHook(() => useAvailableNodesMetaData())
+
+    expect(result.current.nodesMap?.[BlockEnum.Start]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.End]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.HumanInput]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerWebhook]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerSchedule]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerPlugin]).toBeUndefined()
+  })
 })
diff --git a/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts b/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
index 0c5c1e4a40..33edaa2ed5 100644
--- a/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
+++ b/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
@@ -2,6 +2,7 @@ import type { AvailableNodesMetaData } from '@/app/components/workflow/hooks-sto
 import type { DocPathWithoutLang } from '@/types/doc-paths'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
 import AnswerDefault from '@/app/components/workflow/nodes/answer/default'
 import EndDefault from '@/app/components/workflow/nodes/end/default'
@@ -10,13 +11,16 @@ import TriggerPluginDefault from '@/app/components/workflow/nodes/trigger-plugin
 import TriggerScheduleDefault from '@/app/components/workflow/nodes/trigger-schedule/default'
 import TriggerWebhookDefault from '@/app/components/workflow/nodes/trigger-webhook/default'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { isEvaluationWorkflow, isEvaluationWorkflowRestrictedNodeType } from '@/app/components/workflow/utils/evaluation-workflow'
 import { useDocLink } from '@/context/i18n'
 import { useIsChatMode } from './use-is-chat-mode'
 
 export const useAvailableNodesMetaData = () => {
   const { t } = useTranslation()
   const isChatMode = useIsChatMode()
+  const appType = useAppStore(s => s.appDetail?.type)
   const docLink = useDocLink()
+  const isEvaluationWorkflowType = isEvaluationWorkflow(appType)
 
   const startNodeMetaData = useMemo(() => ({
     ...StartDefault,
@@ -26,20 +30,27 @@ export const useAvailableNodesMetaData = () => {
     },
   }), [isChatMode])
 
-  const mergedNodesMetaData = useMemo(() => [
-    ...WORKFLOW_COMMON_NODES,
-    startNodeMetaData,
-    ...(
-      isChatMode
-        ? [AnswerDefault]
-        : [
-            EndDefault,
-            TriggerWebhookDefault,
-            TriggerScheduleDefault,
-            TriggerPluginDefault,
-          ]
-    ),
-  ], [isChatMode, startNodeMetaData])
+  const mergedNodesMetaData = useMemo(() => {
+    const nodes = [
+      ...WORKFLOW_COMMON_NODES,
+      startNodeMetaData,
+      ...(
+        isChatMode
+          ? [AnswerDefault]
+          : [
+              EndDefault,
+              TriggerWebhookDefault,
+              TriggerScheduleDefault,
+              TriggerPluginDefault,
+            ]
+      ),
+    ]
+
+    if (!isEvaluationWorkflowType)
+      return nodes
+
+    return nodes.filter(node => !isEvaluationWorkflowRestrictedNodeType(node.metaData.type))
+  }, [isChatMode, isEvaluationWorkflowType, startNodeMetaData])
 
   const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
     const { metaData } = node
diff --git a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
index 1106cfcb75..efa6e2abbb 100644
--- a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
@@ -11,20 +11,53 @@ let latestNodes: Node[] = []
 let latestHistoryEvent: string | undefined
 const mockGetNodesReadOnly = vi.fn()
 const mockHandleNodesCopy = vi.fn()
-const mockHandleNodesDuplicate = vi.fn()
 const mockHandleNodesDelete = vi.fn()
+const mockHandleNodesDuplicate = vi.fn()
+const mockPush = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockCreateSnippetMutateAsync = vi.fn()
+const mockSyncDraftWorkflow = vi.fn()
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useCreateSnippetMutation: () => ({
+    mutateAsync: mockCreateSnippetMutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    snippets: {
+      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+    },
+  },
+}))
 
 vi.mock('../hooks', async () => {
   const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
   return {
     ...actual,
-    useNodesReadOnly: () => ({
-      getNodesReadOnly: mockGetNodesReadOnly,
-    }),
     useNodesInteractions: () => ({
       handleNodesCopy: mockHandleNodesCopy,
-      handleNodesDuplicate: mockHandleNodesDuplicate,
       handleNodesDelete: mockHandleNodesDelete,
+      handleNodesDuplicate: mockHandleNodesDuplicate,
+    }),
+    useNodesReadOnly: () => ({
+      getNodesReadOnly: mockGetNodesReadOnly,
     }),
   }
 })
@@ -82,8 +115,13 @@ describe('SelectionContextmenu', () => {
     mockGetNodesReadOnly.mockReset()
     mockGetNodesReadOnly.mockReturnValue(false)
     mockHandleNodesCopy.mockReset()
-    mockHandleNodesDuplicate.mockReset()
     mockHandleNodesDelete.mockReset()
+    mockHandleNodesDuplicate.mockReset()
+    mockPush.mockReset()
+    mockToastSuccess.mockReset()
+    mockToastError.mockReset()
+    mockCreateSnippetMutateAsync.mockReset()
+    mockSyncDraftWorkflow.mockReset()
   })
 
   it('should not render when selectionMenu is absent', () => {
@@ -98,6 +136,19 @@ describe('SelectionContextmenu', () => {
       createNode({ id: 'n2', selected: true, position: { x: 140, y: 0 }, width: 80, height: 40 }),
     ]
     const { store } = renderSelectionMenu({ nodes })
+    const container = document.querySelector('#workflow-container') as HTMLDivElement
+
+    vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+      x: 16,
+      y: 24,
+      left: 16,
+      top: 24,
+      right: 816,
+      bottom: 624,
+      width: 800,
+      height: 600,
+      toJSON: () => ({}),
+    })
 
     act(() => {
       store.setState({ selectionMenu: { clientX: 780, clientY: 590 } })
@@ -196,6 +247,107 @@ describe('SelectionContextmenu', () => {
     vi.useRealTimers()
   })
 
+  it('should render selection actions and delegate copy, duplicate, and delete', () => {
+    const nodes = [
+      createNode({ id: 'n1', selected: true, width: 40, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 80, y: 20 }, width: 40, height: 20 }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { clientX: 120, clientY: 120 } })
+    })
+
+    expect(screen.getByTestId('selection-contextmenu-item-copy')).toHaveTextContent('workflow.common.copy')
+    expect(screen.getByTestId('selection-contextmenu-item-duplicate')).toHaveTextContent('workflow.common.duplicate')
+    expect(screen.getByTestId('selection-contextmenu-item-delete')).toHaveTextContent('common.operation.delete')
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-copy'))
+
+    act(() => {
+      store.setState({ selectionMenu: { clientX: 120, clientY: 120 } })
+    })
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-duplicate'))
+
+    act(() => {
+      store.setState({ selectionMenu: { clientX: 120, clientY: 120 } })
+    })
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-delete'))
+
+    expect(mockHandleNodesCopy).toHaveBeenCalledTimes(1)
+    expect(mockHandleNodesDuplicate).toHaveBeenCalledTimes(1)
+    expect(mockHandleNodesDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('should create a snippet with the selected graph and redirect to the snippet detail page', async () => {
+    mockCreateSnippetMutateAsync.mockResolvedValue({ id: 'snippet-123' })
+    mockSyncDraftWorkflow.mockResolvedValue({ result: 'success' })
+
+    const nodes = [
+      createNode({ id: 'n1', selected: true, position: { x: 120, y: 60 }, width: 40, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 260, y: 120 }, width: 60, height: 30 }),
+      createNode({ id: 'n3', selected: false, position: { x: 500, y: 300 }, width: 40, height: 20 }),
+    ]
+    const edges = [
+      createEdge({ id: 'e1', source: 'n1', target: 'n2' }),
+      createEdge({ id: 'e2', source: 'n2', target: 'n3' }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes, edges })
+
+    act(() => {
+      store.setState({ selectionMenu: { clientX: 120, clientY: 120 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-createSnippet'))
+    fireEvent.change(screen.getByPlaceholderText('workflow.snippet.namePlaceholder'), {
+      target: { value: 'My snippet' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: /workflow\.snippet\.confirm/i }))
+
+    await waitFor(() => {
+      expect(mockCreateSnippetMutateAsync).toHaveBeenCalledWith({
+        body: expect.objectContaining({
+          name: 'My snippet',
+        }),
+      })
+    })
+
+    expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+      params: { snippetId: 'snippet-123' },
+      body: {
+        graph: {
+          nodes: [
+            expect.objectContaining({
+              id: 'n1',
+              position: { x: 0, y: 0 },
+              selected: false,
+              data: expect.objectContaining({ selected: false }),
+            }),
+            expect.objectContaining({
+              id: 'n2',
+              position: { x: 140, y: 60 },
+              selected: false,
+              data: expect.objectContaining({ selected: false }),
+            }),
+          ],
+          edges: [
+            expect.objectContaining({
+              id: 'e1',
+              source: 'n1',
+              target: 'n2',
+              selected: false,
+            }),
+          ],
+          viewport: { x: 0, y: 0, zoom: 1 },
+        },
+      },
+    })
+    expect(mockToastSuccess).toHaveBeenCalledWith('workflow.snippet.createSuccess')
+    expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
+  })
+
   it('should distribute selected nodes horizontally', async () => {
     const nodes = [
       createNode({ id: 'n1', selected: true, position: { x: 0, y: 10 }, width: 20, height: 20 }),
diff --git a/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx b/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx
index 2b28662b45..0ffe583bb1 100644
--- a/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/all-start-blocks.spec.tsx
@@ -8,7 +8,7 @@ import { useGetLanguage, useLocale } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
 import { useAllTriggerPlugins, useInvalidateAllTriggerPlugins } from '@/service/use-triggers'
-import { Theme } from '@/types/app'
+import { AppTypeEnum, Theme } from '@/types/app'
 import { defaultSystemFeatures } from '@/types/feature'
 import { useAvailableNodesMetaData } from '../../../workflow-app/hooks'
 import useNodes from '../../store/workflow/use-nodes'
@@ -19,6 +19,18 @@ vi.mock('@/context/global-public-context', () => ({
   useGlobalPublicStore: vi.fn(),
 }))
 
+const mockAppType = vi.hoisted<{ current?: string }>(() => ({
+  current: 'workflow',
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: mockAppType.current,
+    },
+  }),
+}))
+
 vi.mock('@/context/i18n', () => ({
   useGetLanguage: vi.fn(),
   useLocale: vi.fn(),
@@ -179,6 +191,7 @@ const createAvailableNodesMetaData = (): ReturnType<typeof useAvailableNodesMeta
 describe('AllStartBlocks', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockAppType.current = AppTypeEnum.WORKFLOW
     mockUseGlobalPublicStore.mockImplementation(selector => selector(createGlobalPublicStoreState(false)))
     mockUseGetLanguage.mockReturnValue('en_US')
     mockUseLocale.mockReturnValue('en_US')
@@ -238,6 +251,26 @@ describe('AllStartBlocks', () => {
 
       expect(await screen.findByRole('link', { name: /plugin\.findMoreInMarketplace/ })).toHaveAttribute('href', 'https://marketplace.test/start')
     })
+
+    it('should hide trigger options in evaluation workflows', async () => {
+      mockAppType.current = AppTypeEnum.EVALUATION
+
+      render(
+        <AllStartBlocks
+          searchText=""
+          onSelect={vi.fn()}
+          availableBlocksTypes={[BlockEnum.Start, BlockEnum.TriggerPlugin]}
+          allowUserInputSelection
+        />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('workflow.blocks.start')).toBeInTheDocument()
+      })
+
+      expect(screen.queryByText('Provider One')).not.toBeInTheDocument()
+      expect(screen.queryByText('workflow.tabs.allTriggers')).not.toBeInTheDocument()
+    })
   })
 
   // Empty filter states should surface the request-to-community fallback.
diff --git a/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx b/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
index 00972f808c..31754ce75b 100644
--- a/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/blocks.spec.tsx
@@ -1,11 +1,13 @@
 import type { NodeDefault } from '../../types'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { AppTypeEnum } from '@/types/app'
 import { BlockEnum } from '../../types'
 import Blocks from '../blocks'
 import { BlockClassificationEnum } from '../types'
 
 const runtimeState = vi.hoisted(() => ({
+  appType: 'workflow' as string | undefined,
   nodes: [] as Array<{ data: { type?: BlockEnum } }>,
 }))
 
@@ -17,6 +19,14 @@ vi.mock('reactflow', () => ({
   }),
 }))
 
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { type?: string } }) => unknown) => selector({
+    appDetail: {
+      type: runtimeState.appType,
+    },
+  }),
+}))
+
 const createBlock = (type: BlockEnum, title: string, classification = BlockClassificationEnum.Default): NodeDefault => ({
   metaData: {
     classification,
@@ -32,10 +42,31 @@ const createBlock = (type: BlockEnum, title: string, classification = BlockClass
 
 describe('Blocks', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
+    runtimeState.appType = AppTypeEnum.WORKFLOW
     runtimeState.nodes = []
   })
 
-  it('renders grouped blocks, filters duplicate knowledge-base nodes, and selects a block', async () => {
+  it('should hide human input blocks when the app is an evaluation workflow', () => {
+    runtimeState.appType = AppTypeEnum.EVALUATION
+
+    render(
+      <Blocks
+        searchText=""
+        onSelect={vi.fn()}
+        availableBlocksTypes={[BlockEnum.HumanInput, BlockEnum.LLM]}
+        blocks={[
+          createBlock(BlockEnum.HumanInput, 'Human Input'),
+          createBlock(BlockEnum.LLM, 'LLM'),
+        ]}
+      />,
+    )
+
+    expect(screen.queryByText('Human Input')).not.toBeInTheDocument()
+    expect(screen.getByText('LLM')).toBeInTheDocument()
+  })
+
+  it('should render grouped blocks, filter duplicate knowledge-base nodes, and select a block', async () => {
     const user = userEvent.setup()
     const onSelect = vi.fn()
 
@@ -64,7 +95,7 @@ describe('Blocks', () => {
     expect(onSelect).toHaveBeenCalledWith(BlockEnum.LLM)
   })
 
-  it('shows the empty state when no block matches the search', () => {
+  it('should show the empty state when no block matches the search text', () => {
     render(
       <Blocks
         searchText="missing"
diff --git a/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx b/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
index 6d27560802..67a271d49f 100644
--- a/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/hooks.spec.tsx
@@ -2,7 +2,21 @@ import { act, renderHook } from '@testing-library/react'
 import { useTabs, useToolTabs } from '../hooks'
 import { TabsEnum, ToolTypeEnum } from '../types'
 
+const mockCanAccessSnippetsAndEvaluation = vi.fn(() => true)
+
+vi.mock('@/hooks/use-snippet-and-evaluation-plan-access', () => ({
+  useSnippetAndEvaluationPlanAccess: () => ({
+    canAccess: mockCanAccessSnippetsAndEvaluation(),
+    isReady: true,
+  }),
+}))
+
 describe('block-selector hooks', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCanAccessSnippetsAndEvaluation.mockReturnValue(true)
+  })
+
   it('falls back to the first valid tab when the preferred start tab is disabled', () => {
     const { result } = renderHook(() => useTabs({
       noStart: false,
@@ -49,4 +63,12 @@ describe('block-selector hooks', () => {
     expect(visible.current.some(tab => tab.key === ToolTypeEnum.MCP)).toBe(true)
     expect(hidden.current.some(tab => tab.key === ToolTypeEnum.MCP)).toBe(false)
   })
+
+  it('hides the snippets tab when snippet access is unavailable', () => {
+    mockCanAccessSnippetsAndEvaluation.mockReturnValue(false)
+
+    const { result } = renderHook(() => useTabs({}))
+
+    expect(result.current.tabs.some(tab => tab.key === TabsEnum.Snippets)).toBe(false)
+  })
 })
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index 12f37122d9..be32afcce1 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -15,9 +15,11 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { Button } from '@/app/components/base/ui/button'
+import { filterEvaluationWorkflowRestrictedBlockTypes, isEvaluationWorkflow } from '@/app/components/workflow/utils/evaluation-workflow'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
@@ -54,13 +56,21 @@ const AllStartBlocks = ({
   const { t } = useTranslation()
   const [hasStartBlocksContent, setHasStartBlocksContent] = useState(false)
   const [hasPluginContent, setHasPluginContent] = useState(false)
+  const appType = useAppStore(s => s.appDetail?.type)
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   const pluginRef = useRef<ListRef>(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
 
-  const entryNodeTypes = availableBlocksTypes?.length
-    ? availableBlocksTypes
-    : ENTRY_NODE_TYPES
+  const entryNodeTypes = useMemo(() => {
+    const blockTypes = availableBlocksTypes?.length
+      ? availableBlocksTypes
+      : [...ENTRY_NODE_TYPES]
+
+    if (!isEvaluationWorkflow(appType))
+      return blockTypes
+
+    return filterEvaluationWorkflowRestrictedBlockTypes(blockTypes)
+  }, [appType, availableBlocksTypes])
   const enableTriggerPlugin = entryNodeTypes.includes(BlockEnumValue.TriggerPlugin)
   const { data: triggerProviders = [] } = useAllTriggerPlugins(enableTriggerPlugin)
   const providerMap = useMemo(() => {
@@ -94,7 +104,8 @@ const AllStartBlocks = ({
   const shouldShowFeatured = enableTriggerPlugin
     && enable_marketplace
     && !hasFilter
-  const shouldShowTriggerListTitle = hasStartBlocksContent || hasPluginContent
+  const hasTriggerOptions = entryNodeTypes.some(type => type !== BlockEnumValue.Start)
+  const shouldShowTriggerListTitle = hasTriggerOptions && (hasStartBlocksContent || hasPluginContent)
   const shouldShowMarketplaceFooter = enable_marketplace && !hasFilter
 
   const handleStartBlocksContentChange = useCallback((hasContent: boolean) => {
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index 7179a7c458..b152fd1afa 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -8,8 +8,10 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import Badge from '@/app/components/base/badge'
 import Tooltip from '@/app/components/base/tooltip'
+import { filterEvaluationWorkflowRestrictedBlockTypes, isEvaluationWorkflow } from '@/app/components/workflow/utils/evaluation-workflow'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import { BLOCK_CLASSIFICATIONS } from './constants'
@@ -29,7 +31,14 @@ const Blocks = ({
 }: BlocksProps) => {
   const { t } = useTranslation()
   const store = useStoreApi()
+  const appType = useAppStore(s => s.appDetail?.type)
   const blocksFromHooks = useBlocks()
+  const filteredAvailableBlocksTypes = useMemo(() => {
+    if (!isEvaluationWorkflow(appType))
+      return availableBlocksTypes
+
+    return filterEvaluationWorkflowRestrictedBlockTypes(availableBlocksTypes)
+  }, [appType, availableBlocksTypes])
 
   // Use external blocks if provided, otherwise fallback to hook-based blocks
   const blocks = blocksFromProps || blocksFromHooks.map(block => ({
@@ -57,7 +66,7 @@ const Blocks = ({
           return false
         }
 
-        return block.metaData.title.toLowerCase().includes(searchText.toLowerCase()) && availableBlocksTypes.includes(block.metaData.type)
+        return block.metaData.title.toLowerCase().includes(searchText.toLowerCase()) && filteredAvailableBlocksTypes.includes(block.metaData.type)
       })
 
       return {
@@ -65,7 +74,7 @@ const Blocks = ({
         [classification]: list,
       }
     }, {} as Record<string, typeof blocks>)
-  }, [blocks, searchText, availableBlocksTypes])
+  }, [blocks, filteredAvailableBlocksTypes, searchText])
   const isEmpty = Object.values(groups).every(list => !list.length)
 
   const renderGroup = useCallback((classification: BlockClassificationEnum) => {
diff --git a/web/app/components/workflow/block-selector/hooks.ts b/web/app/components/workflow/block-selector/hooks.ts
index c47f2fa75a..ac1026f96b 100644
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -5,6 +5,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
 import { BLOCKS } from './constants'
 import {
   TabsEnum,
@@ -29,6 +30,7 @@ export const useTabs = ({
   noStart = true,
   defaultActiveTab,
   hasUserInputNode = false,
+  disableStartTab = false,
   forceEnableStartTab = false, // When true, Start tab remains enabled even if trigger/user input nodes already exist.
 }: {
   noBlocks?: boolean
@@ -37,11 +39,16 @@ export const useTabs = ({
   noStart?: boolean
   defaultActiveTab?: TabsEnum
   hasUserInputNode?: boolean
+  disableStartTab?: boolean
   forceEnableStartTab?: boolean
 }) => {
   const { t } = useTranslation()
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
   const shouldShowStartTab = !noStart
-  const shouldDisableStartTab = !forceEnableStartTab && hasUserInputNode
+  const shouldDisableStartTab = disableStartTab || (!forceEnableStartTab && hasUserInputNode)
+  const startDisabledTip = disableStartTab
+    ? t('tabs.startNotSupportedTip', { ns: 'workflow' })
+    : t('tabs.startDisabledTip', { ns: 'workflow' })
   const tabs = useMemo(() => {
     const tabConfigs = [{
       key: TabsEnum.Blocks,
@@ -60,10 +67,15 @@ export const useTabs = ({
       name: t('tabs.start', { ns: 'workflow' }),
       show: shouldShowStartTab,
       disabled: shouldDisableStartTab,
+      disabledTip: shouldDisableStartTab ? startDisabledTip : undefined,
+    }, {
+      key: TabsEnum.Snippets,
+      name: t('tabs.snippets', { ns: 'workflow' }),
+      show: canAccessSnippetsAndEvaluation,
     }]
 
     return tabConfigs.filter(tab => tab.show)
-  }, [t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab])
+  }, [canAccessSnippetsAndEvaluation, t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab, startDisabledTip])
 
   const getValidTabKey = useCallback((targetKey?: TabsEnum) => {
     if (!targetKey)
@@ -89,6 +101,7 @@ export const useTabs = ({
       preferredOrder.push(TabsEnum.Sources)
     if (!noStart)
       preferredOrder.push(TabsEnum.Start)
+    preferredOrder.push(TabsEnum.Snippets)
 
     for (const tabKey of preferredOrder) {
       const validKey = getValidTabKey(tabKey)
diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index 96f5a98aed..34f286da89 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -15,6 +15,7 @@ import type {
 import {
   memo,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -29,9 +30,12 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { FlowType } from '@/types/common'
 import { BlockEnum, isTriggerNode } from '../types'
 import { useTabs } from './hooks'
+import Snippets from './snippets'
 import Tabs from './tabs'
 import { TabsEnum } from './types'
 
@@ -87,7 +91,9 @@ const NodeSelector: FC<NodeSelectorProps> = ({
 }) => {
   const { t } = useTranslation()
   const nodes = useNodes()
+  const flowType = useHooksStore(s => s.configsMap?.flowType)
   const [searchText, setSearchText] = useState('')
+  const [snippetsLoading, setSnippetsLoading] = useState(() => Boolean(openFromProps) && defaultActiveTab === TabsEnum.Snippets)
   const [tags, setTags] = useState<string[]>([])
   const [localOpen, setLocalOpen] = useState(false)
   // Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
@@ -119,16 +125,36 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   // Default rule: user input option is only available when no Start node nor Trigger node exists on canvas.
   const defaultAllowUserInputSelection = !hasUserInputNode && !hasTriggerNode
   const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
+  const disableStartTab = flowType === FlowType.snippet
+  const {
+    activeTab,
+    setActiveTab,
+    tabs,
+  } = useTabs({
+    noBlocks,
+    noSources: !dataSources.length,
+    noTools,
+    noStart: !showStartTab,
+    defaultActiveTab,
+    hasUserInputNode,
+    disableStartTab,
+    forceEnableStartTab,
+  })
   const open = openFromProps === undefined ? localOpen : openFromProps
   const handleOpenChange = useCallback((newOpen: boolean) => {
     setLocalOpen(newOpen)
 
-    if (!newOpen)
+    if (!newOpen) {
       setSearchText('')
+      setSnippetsLoading(false)
+    }
+    else if (activeTab === TabsEnum.Snippets) {
+      setSnippetsLoading(true)
+    }
 
     if (onOpenChange)
       onOpenChange(newOpen)
-  }, [onOpenChange])
+  }, [activeTab, onOpenChange])
   const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
     if (disabled)
       return
@@ -141,23 +167,24 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     onSelect(type, pluginDefaultValue)
   }, [handleOpenChange, onSelect])
 
-  const {
-    activeTab,
-    setActiveTab,
-    tabs,
-  } = useTabs({
-    noBlocks,
-    noSources: !dataSources.length,
-    noTools,
-    noStart: !showStartTab,
-    defaultActiveTab,
-    hasUserInputNode,
-    forceEnableStartTab,
-  })
-
   const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
     setActiveTab(newActiveTab)
-  }, [setActiveTab])
+    if (open && newActiveTab === TabsEnum.Snippets)
+      setSnippetsLoading(true)
+  }, [open, setActiveTab])
+
+  useEffect(() => {
+    if (!snippetsLoading)
+      return
+
+    const timer = window.setTimeout(() => {
+      setSnippetsLoading(false)
+    }, 200)
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [snippetsLoading])
 
   const searchPlaceholder = useMemo(() => {
     if (activeTab === TabsEnum.Start)
@@ -171,6 +198,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
 
     if (activeTab === TabsEnum.Sources)
       return t('tabs.searchDataSource', { ns: 'workflow' })
+    if (activeTab === TabsEnum.Snippets)
+      return t('tabs.searchSnippets', { ns: 'workflow' })
     return ''
   }, [activeTab, t])
 
@@ -257,6 +286,17 @@ const NodeSelector: FC<NodeSelectorProps> = ({
                     inputClassName="grow"
                   />
                 )}
+                {activeTab === TabsEnum.Snippets && (
+                  <Input
+                    showLeftIcon
+                    showClearIcon
+                    autoFocus
+                    value={searchText}
+                    placeholder={searchPlaceholder}
+                    onChange={e => setSearchText(e.target.value)}
+                    onClear={() => setSearchText('')}
+                  />
+                )}
               </div>
             )}
             onSelect={handleSelect}
@@ -268,6 +308,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
             noTools={noTools}
             onTagsChange={setTags}
             forceShowStartContent={forceShowStartContent}
+            snippetsElem={<Snippets loading={snippetsLoading} searchText={searchText} />}
           />
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..d0d489c215
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/index.spec.tsx
@@ -0,0 +1,161 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Snippets from '../index'
+
+const mockUseInfiniteSnippetList = vi.fn()
+const mockHandleInsertSnippet = vi.fn()
+const mockHandleCreateSnippet = vi.fn()
+const mockHandleOpenCreateSnippetDialog = vi.fn()
+const mockHandleCloseCreateSnippetDialog = vi.fn()
+
+vi.mock('ahooks', async () => {
+  const actual = await vi.importActual<typeof import('ahooks')>('ahooks')
+  return {
+    ...actual,
+    useInfiniteScroll: vi.fn(),
+  }
+})
+
+vi.mock('@/service/use-snippets', () => ({
+  useInfiniteSnippetList: (...args: unknown[]) => mockUseInfiniteSnippetList(...args),
+}))
+
+vi.mock('../use-insert-snippet', () => ({
+  useInsertSnippet: () => ({
+    handleInsertSnippet: mockHandleInsertSnippet,
+  }),
+}))
+
+vi.mock('../use-create-snippet', () => ({
+  useCreateSnippet: () => ({
+    createSnippetMutation: { isPending: false },
+    handleCloseCreateSnippetDialog: mockHandleCloseCreateSnippetDialog,
+    handleCreateSnippet: mockHandleCreateSnippet,
+    handleOpenCreateSnippetDialog: mockHandleOpenCreateSnippetDialog,
+    isCreateSnippetDialogOpen: false,
+    isCreatingSnippet: false,
+  }),
+}))
+
+vi.mock('../../../create-snippet-dialog', () => ({
+  default: ({ isOpen }: { isOpen: boolean }) => isOpen ? <div data-testid="create-snippet-dialog" /> : null,
+}))
+
+describe('Snippets', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseInfiniteSnippetList.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render loading skeleton when loading', () => {
+      const { container } = render(<Snippets loading searchText="" />)
+
+      expect(container.querySelectorAll('.bg-text-quaternary')).not.toHaveLength(0)
+    })
+
+    it('should render empty state when snippet list is empty', () => {
+      render(<Snippets searchText="" />)
+
+      expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
+    })
+
+    it('should render snippet rows from infinite list data', () => {
+      mockUseInfiniteSnippetList.mockReturnValue({
+        data: {
+          pages: [{
+            data: [{
+              id: 'snippet-1',
+              name: 'Customer Review',
+              description: 'Snippet description',
+              author: 'Evan',
+              type: 'group',
+              is_published: true,
+              version: '1.0.0',
+              use_count: 3,
+              icon_info: {
+                icon_type: 'emoji',
+                icon: '🧾',
+                icon_background: '#FFEAD5',
+                icon_url: '',
+              },
+              input_fields: [],
+              created_at: 1,
+              updated_at: 2,
+            }],
+          }],
+        },
+        isLoading: false,
+        isFetching: false,
+        isFetchingNextPage: false,
+        fetchNextPage: vi.fn(),
+        hasNextPage: false,
+      })
+
+      render(<Snippets searchText="customer" />)
+
+      expect(mockUseInfiniteSnippetList).toHaveBeenCalledWith({
+        page: 1,
+        limit: 30,
+        keyword: 'customer',
+        is_published: true,
+      })
+      expect(screen.getByText('Customer Review')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should delegate create action from empty state', () => {
+      render(<Snippets searchText="" />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'workflow.tabs.createSnippet' }))
+
+      expect(mockHandleOpenCreateSnippetDialog).toHaveBeenCalledTimes(1)
+    })
+
+    it('should delegate insert action when snippet item is clicked', () => {
+      mockUseInfiniteSnippetList.mockReturnValue({
+        data: {
+          pages: [{
+            data: [{
+              id: 'snippet-1',
+              name: 'Customer Review',
+              description: 'Snippet description',
+              author: 'Evan',
+              type: 'group',
+              is_published: true,
+              version: '1.0.0',
+              use_count: 3,
+              icon_info: {
+                icon_type: 'emoji',
+                icon: '🧾',
+                icon_background: '#FFEAD5',
+                icon_url: '',
+              },
+              input_fields: [],
+              created_at: 1,
+              updated_at: 2,
+            }],
+          }],
+        },
+        isLoading: false,
+        isFetching: false,
+        isFetchingNextPage: false,
+        fetchNextPage: vi.fn(),
+        hasNextPage: false,
+      })
+
+      render(<Snippets searchText="" />)
+
+      fireEvent.click(screen.getByText('Customer Review'))
+
+      expect(mockHandleInsertSnippet).toHaveBeenCalledWith('snippet-1')
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx
new file mode 100644
index 0000000000..ade2bd2d61
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-detail-card.spec.tsx
@@ -0,0 +1,64 @@
+import type { PublishedSnippetListItem } from '../snippet-detail-card'
+import { render, screen } from '@testing-library/react'
+import SnippetDetailCard from '../snippet-detail-card'
+
+const mockUseSnippetPublishedWorkflow = vi.fn()
+
+vi.mock('@/service/use-snippet-workflows', () => ({
+  useSnippetPublishedWorkflow: (...args: unknown[]) => mockUseSnippetPublishedWorkflow(...args),
+}))
+
+const createSnippet = (overrides: Partial<PublishedSnippetListItem> = {}): PublishedSnippetListItem => ({
+  id: 'snippet-1',
+  name: 'Customer Review',
+  description: 'Snippet description',
+  author: 'Evan',
+  type: 'group',
+  is_published: true,
+  use_count: 3,
+  icon_info: {
+    icon_type: 'emoji',
+    icon: '🧾',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  },
+  created_at: 1,
+  updated_at: 2,
+  ...overrides,
+})
+
+describe('SnippetDetailCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSnippetPublishedWorkflow.mockReturnValue({ data: undefined })
+  })
+
+  describe('Rendering', () => {
+    it('should render snippet summary information', () => {
+      render(<SnippetDetailCard snippet={createSnippet()} />)
+
+      expect(screen.getByText('Customer Review')).toBeInTheDocument()
+      expect(screen.getByText('Snippet description')).toBeInTheDocument()
+      expect(screen.getByText('Evan')).toBeInTheDocument()
+    })
+
+    it('should render unique block icons from published workflow graph', () => {
+      mockUseSnippetPublishedWorkflow.mockReturnValue({
+        data: {
+          graph: {
+            nodes: [
+              { data: { type: 'llm' } },
+              { data: { type: 'code' } },
+              { data: { type: 'llm' } },
+              { data: { type: 'unknown' } },
+            ],
+          },
+        },
+      })
+
+      const { container } = render(<SnippetDetailCard snippet={createSnippet()} />)
+
+      expect(container.querySelectorAll('[data-icon="Llm"], [data-icon="Code"]')).toHaveLength(2)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx
new file mode 100644
index 0000000000..1ab2f712bf
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-empty-state.spec.tsx
@@ -0,0 +1,31 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import SnippetEmptyState from '../snippet-empty-state'
+
+describe('SnippetEmptyState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render empty state copy and create action', () => {
+      const handleCreate = vi.fn()
+
+      render(<SnippetEmptyState onCreate={handleCreate} />)
+
+      expect(screen.getByText('workflow.tabs.noSnippetsFound')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'workflow.tabs.createSnippet' })).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCreate when create button is clicked', () => {
+      const handleCreate = vi.fn()
+
+      render(<SnippetEmptyState onCreate={handleCreate} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'workflow.tabs.createSnippet' }))
+
+      expect(handleCreate).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx
new file mode 100644
index 0000000000..0a1292a68e
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/snippet-list-item.spec.tsx
@@ -0,0 +1,85 @@
+import type { PublishedSnippetListItem } from '../snippet-detail-card'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SnippetListItem from '../snippet-list-item'
+
+const createSnippet = (overrides: Partial<PublishedSnippetListItem> = {}): PublishedSnippetListItem => ({
+  id: 'snippet-1',
+  name: 'Customer Review',
+  description: 'Snippet description',
+  author: 'Evan',
+  type: 'group',
+  is_published: true,
+  use_count: 3,
+  icon_info: {
+    icon_type: 'emoji',
+    icon: '🧾',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  },
+  created_at: 1,
+  updated_at: 2,
+  ...overrides,
+})
+
+describe('SnippetListItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render snippet name', () => {
+      render(
+        <SnippetListItem
+          snippet={createSnippet()}
+          isHovered={false}
+          onMouseEnter={vi.fn()}
+          onMouseLeave={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('Customer Review')).toBeInTheDocument()
+      expect(screen.queryByText('Evan')).not.toBeInTheDocument()
+    })
+
+    it('should render author when hovered', () => {
+      render(
+        <SnippetListItem
+          snippet={createSnippet()}
+          isHovered
+          onMouseEnter={vi.fn()}
+          onMouseLeave={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('Evan')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should forward click and hover handlers', () => {
+      const handleClick = vi.fn()
+      const handleMouseEnter = vi.fn()
+      const handleMouseLeave = vi.fn()
+
+      render(
+        <SnippetListItem
+          snippet={createSnippet()}
+          isHovered={false}
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />,
+      )
+
+      const item = screen.getByText('Customer Review').closest('div')!
+
+      fireEvent.mouseEnter(item)
+      fireEvent.mouseLeave(item)
+      fireEvent.click(item)
+
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1)
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx
new file mode 100644
index 0000000000..5d70d9c5c9
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/use-create-snippet.spec.tsx
@@ -0,0 +1,139 @@
+import { act, renderHook } from '@testing-library/react'
+import { useCreateSnippet } from '../use-create-snippet'
+
+const mockPush = vi.fn()
+const mockMutateAsync = vi.fn()
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+const mockSyncDraftWorkflow = vi.fn()
+
+vi.mock('@/next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+}))
+
+vi.mock('@/service/use-snippets', () => ({
+  useCreateSnippetMutation: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    snippets: {
+      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+    },
+  },
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+describe('useCreateSnippet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('State', () => {
+    it('should open and close create snippet dialog', () => {
+      const { result } = renderHook(() => useCreateSnippet())
+
+      act(() => {
+        result.current.handleOpenCreateSnippetDialog()
+      })
+      expect(result.current.isCreateSnippetDialogOpen).toBe(true)
+
+      act(() => {
+        result.current.handleCloseCreateSnippetDialog()
+      })
+      expect(result.current.isCreateSnippetDialogOpen).toBe(false)
+    })
+  })
+
+  describe('Create Flow', () => {
+    it('should create snippet, sync draft workflow, and navigate on success', async () => {
+      mockMutateAsync.mockResolvedValue({ id: 'snippet-123' })
+      mockSyncDraftWorkflow.mockResolvedValue(undefined)
+
+      const { result } = renderHook(() => useCreateSnippet())
+
+      act(() => {
+        result.current.handleOpenCreateSnippetDialog()
+      })
+
+      await act(async () => {
+        await result.current.handleCreateSnippet({
+          name: 'My snippet',
+          description: 'desc',
+          icon: {
+            type: 'emoji',
+            icon: '🤖',
+            background: '#FFEAD5',
+          },
+          graph: {
+            nodes: [],
+            edges: [],
+            viewport: { x: 0, y: 0, zoom: 1 },
+          },
+        })
+      })
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        body: {
+          name: 'My snippet',
+          description: 'desc',
+          icon_info: {
+            icon: '🤖',
+            icon_type: 'emoji',
+            icon_background: '#FFEAD5',
+            icon_url: undefined,
+          },
+        },
+      })
+      expect(mockSyncDraftWorkflow).toHaveBeenCalledWith({
+        params: { snippetId: 'snippet-123' },
+        body: {
+          graph: {
+            nodes: [],
+            edges: [],
+            viewport: { x: 0, y: 0, zoom: 1 },
+          },
+        },
+      })
+      expect(mockToastSuccess).toHaveBeenCalledWith('workflow.snippet.createSuccess')
+      expect(mockPush).toHaveBeenCalledWith('/snippets/snippet-123/orchestrate')
+      expect(result.current.isCreateSnippetDialogOpen).toBe(false)
+      expect(result.current.isCreatingSnippet).toBe(false)
+    })
+
+    it('should show error toast when create fails', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('create failed'))
+
+      const { result } = renderHook(() => useCreateSnippet())
+
+      await act(async () => {
+        await result.current.handleCreateSnippet({
+          name: 'My snippet',
+          description: '',
+          icon: {
+            type: 'emoji',
+            icon: '🤖',
+            background: '#FFEAD5',
+          },
+          graph: {
+            nodes: [],
+            edges: [],
+            viewport: { x: 0, y: 0, zoom: 1 },
+          },
+        })
+      })
+
+      expect(mockToastError).toHaveBeenCalledWith('create failed')
+      expect(result.current.isCreatingSnippet).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx b/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
new file mode 100644
index 0000000000..2f8864a411
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/__tests__/use-insert-snippet.spec.tsx
@@ -0,0 +1,130 @@
+import { act, renderHook } from '@testing-library/react'
+import { useInsertSnippet } from '../use-insert-snippet'
+
+const mockFetchQuery = vi.fn()
+const mockHandleSyncWorkflowDraft = vi.fn()
+const mockSaveStateToHistory = vi.fn()
+const mockToastError = vi.fn()
+const mockGetNodes = vi.fn()
+const mockSetNodes = vi.fn()
+const mockSetEdges = vi.fn()
+
+vi.mock('@tanstack/react-query', () => ({
+  useQueryClient: () => ({
+    fetchQuery: mockFetchQuery,
+  }),
+}))
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => ({
+      getNodes: mockGetNodes,
+      setNodes: mockSetNodes,
+      edges: [{ id: 'existing-edge', source: 'old', target: 'old-2' }],
+      setEdges: mockSetEdges,
+    }),
+  }),
+}))
+
+vi.mock('../../../hooks', () => ({
+  useNodesSyncDraft: () => ({
+    handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft,
+  }),
+  useWorkflowHistory: () => ({
+    saveStateToHistory: mockSaveStateToHistory,
+  }),
+  WorkflowHistoryEvent: {
+    NodePaste: 'NodePaste',
+  },
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+describe('useInsertSnippet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetNodes.mockReturnValue([
+      {
+        id: 'existing-node',
+        position: { x: 0, y: 0 },
+        data: { selected: true },
+      },
+    ])
+  })
+
+  describe('Insert Flow', () => {
+    it('should append remapped snippet graph into current workflow graph', async () => {
+      mockFetchQuery.mockResolvedValue({
+        graph: {
+          nodes: [
+            {
+              id: 'snippet-node-1',
+              position: { x: 10, y: 20 },
+              data: { selected: false, _children: [{ nodeId: 'snippet-node-2', nodeType: 'code' }] },
+            },
+            {
+              id: 'snippet-node-2',
+              parentId: 'snippet-node-1',
+              position: { x: 30, y: 40 },
+              data: { selected: false },
+            },
+          ],
+          edges: [
+            {
+              id: 'edge-1',
+              source: 'snippet-node-1',
+              sourceHandle: 'source',
+              target: 'snippet-node-2',
+              targetHandle: 'target',
+              data: {},
+            },
+          ],
+        },
+      })
+
+      const { result } = renderHook(() => useInsertSnippet())
+
+      await act(async () => {
+        await result.current.handleInsertSnippet('snippet-1')
+      })
+
+      expect(mockFetchQuery).toHaveBeenCalledTimes(1)
+      expect(mockSetNodes).toHaveBeenCalledTimes(1)
+      expect(mockSetEdges).toHaveBeenCalledTimes(1)
+
+      const nextNodes = mockSetNodes.mock.calls[0][0]
+      expect(nextNodes[0].selected).toBe(false)
+      expect(nextNodes[0].data.selected).toBe(false)
+      expect(nextNodes).toHaveLength(3)
+      expect(nextNodes[1].id).not.toBe('snippet-node-1')
+      expect(nextNodes[2].parentId).toBe(nextNodes[1].id)
+      expect(nextNodes[1].data._children[0].nodeId).toBe(nextNodes[2].id)
+
+      const nextEdges = mockSetEdges.mock.calls[0][0]
+      expect(nextEdges).toHaveLength(2)
+      expect(nextEdges[1].source).toBe(nextNodes[1].id)
+      expect(nextEdges[1].target).toBe(nextNodes[2].id)
+
+      expect(mockSaveStateToHistory).toHaveBeenCalledWith('NodePaste', {
+        nodeId: nextNodes[1].id,
+      })
+      expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show error toast when fetching snippet workflow fails', async () => {
+      mockFetchQuery.mockRejectedValue(new Error('insert failed'))
+
+      const { result } = renderHook(() => useInsertSnippet())
+
+      await act(async () => {
+        await result.current.handleInsertSnippet('snippet-1')
+      })
+
+      expect(mockToastError).toHaveBeenCalledWith('insert failed')
+    })
+  })
+})
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
new file mode 100644
index 0000000000..7c50644545
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -0,0 +1,179 @@
+import { cn } from '@langgenius/dify-ui/cn'
+import { useInfiniteScroll } from 'ahooks'
+import {
+  memo,
+  useDeferredValue,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import Loading from '@/app/components/base/loading'
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@/app/components/base/ui/scroll-area'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
+import { useInfiniteSnippetList } from '@/service/use-snippets'
+import CreateSnippetDialog from '../../create-snippet-dialog'
+import SnippetDetailCard from './snippet-detail-card'
+import SnippetEmptyState from './snippet-empty-state'
+import SnippetListItem from './snippet-list-item'
+import { useCreateSnippet } from './use-create-snippet'
+import { useInsertSnippet } from './use-insert-snippet'
+
+type SnippetsProps = {
+  loading?: boolean
+  searchText: string
+}
+
+const LoadingSkeleton = () => {
+  return (
+    <div className="relative overflow-hidden">
+      <div className="p-1">
+        {['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4'].map((key, index) => (
+          <div
+            key={key}
+            className={cn(
+              'flex items-center gap-1 px-3 py-1 opacity-20',
+              index === 3 && 'opacity-10',
+            )}
+          >
+            <div className="my-1 h-6 w-6 shrink-0 rounded-lg border-[0.5px] border-effects-icon-border bg-text-quaternary" />
+            <div className="min-w-0 flex-1 px-1 py-1">
+              <div className="h-2 w-[200px] rounded-[2px] bg-text-quaternary" />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-components-panel-bg-transparent to-background-default-subtle" />
+    </div>
+  )
+}
+
+const Snippets = ({
+  loading = false,
+  searchText,
+}: SnippetsProps) => {
+  const {
+    createSnippetMutation,
+    handleCloseCreateSnippetDialog,
+    handleCreateSnippet,
+    handleOpenCreateSnippetDialog,
+    isCreateSnippetDialogOpen,
+    isCreatingSnippet,
+  } = useCreateSnippet()
+  const { handleInsertSnippet } = useInsertSnippet()
+  const deferredSearchText = useDeferredValue(searchText)
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const [hoveredSnippetId, setHoveredSnippetId] = useState<string | null>(null)
+
+  const keyword = deferredSearchText.trim() || undefined
+
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteSnippetList({
+    page: 1,
+    limit: 30,
+    keyword,
+    is_published: true,
+  })
+
+  const snippets = useMemo(() => {
+    return (data?.pages ?? []).flatMap(({ data }) => data)
+  }, [data?.pages])
+
+  const isNoMore = hasNextPage === false
+
+  useInfiniteScroll(
+    async () => {
+      if (!hasNextPage || isFetchingNextPage)
+        return { list: [] }
+
+      await fetchNextPage()
+      return { list: [] }
+    },
+    {
+      target: viewportRef,
+      isNoMore: () => isNoMore,
+      reloadDeps: [isNoMore, isFetchingNextPage, keyword],
+    },
+  )
+
+  if (loading || isLoading || (isFetching && snippets.length === 0))
+    return <LoadingSkeleton />
+
+  return (
+    <>
+      {!snippets.length
+        ? (
+            <SnippetEmptyState onCreate={handleOpenCreateSnippetDialog} />
+          )
+        : (
+            <ScrollAreaRoot className="relative max-h-[480px] max-w-[500px] overflow-hidden">
+              <ScrollAreaViewport ref={viewportRef}>
+                <ScrollAreaContent className="p-1">
+                  {snippets.map((item) => {
+                    const row = (
+                      <SnippetListItem
+                        snippet={item}
+                        isHovered={hoveredSnippetId === item.id}
+                        onClick={() => handleInsertSnippet(item.id)}
+                        onMouseEnter={() => setHoveredSnippetId(item.id)}
+                        onMouseLeave={() => setHoveredSnippetId(current => current === item.id ? null : current)}
+                      />
+                    )
+
+                    if (!item.description)
+                      return <div key={item.id}>{row}</div>
+
+                    return (
+                      <Tooltip key={item.id}>
+                        <TooltipTrigger
+                          delay={0}
+                          render={row}
+                        />
+                        <TooltipContent
+                          placement="left-start"
+                          variant="plain"
+                          className="bg-transparent! p-0!"
+                        >
+                          <SnippetDetailCard snippet={item} />
+                        </TooltipContent>
+                      </Tooltip>
+                    )
+                  })}
+                  {isFetchingNextPage && (
+                    <div className="flex justify-center px-3 py-2">
+                      <Loading />
+                    </div>
+                  )}
+                </ScrollAreaContent>
+              </ScrollAreaViewport>
+              <ScrollAreaScrollbar orientation="vertical">
+                <ScrollAreaThumb />
+              </ScrollAreaScrollbar>
+            </ScrollAreaRoot>
+          )}
+      <CreateSnippetDialog
+        isOpen={isCreateSnippetDialogOpen}
+        isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
+        onClose={handleCloseCreateSnippetDialog}
+        onConfirm={handleCreateSnippet}
+      />
+    </>
+  )
+}
+
+export default memo(Snippets)
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx b/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
new file mode 100644
index 0000000000..1a3545a96f
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx
@@ -0,0 +1,92 @@
+import type { FC } from 'react'
+import type { SnippetListItem } from '@/types/snippet'
+import { useMemo } from 'react'
+import AppIcon from '@/app/components/base/app-icon'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import BlockIcon from '../../block-icon'
+import { BlockEnum } from '../../types'
+
+export type PublishedSnippetListItem = SnippetListItem
+
+type SnippetDetailCardProps = {
+  snippet: PublishedSnippetListItem
+}
+
+const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
+  snippet,
+}) => {
+  const { author, description, icon_info, name } = snippet
+  const { data: workflow } = useSnippetPublishedWorkflow(snippet.id)
+
+  const blockTypes = useMemo(() => {
+    const graph = workflow?.graph
+    if (!graph || typeof graph !== 'object')
+      return []
+
+    const graphRecord = graph as Record<string, unknown>
+    if (!Array.isArray(graphRecord.nodes))
+      return []
+
+    const availableBlockTypes = new Set(Object.values(BlockEnum))
+
+    return graphRecord.nodes.reduce<BlockEnum[]>((result, node) => {
+      if (!node || typeof node !== 'object')
+        return result
+
+      const nodeRecord = node as Record<string, unknown>
+      if (!nodeRecord.data || typeof nodeRecord.data !== 'object')
+        return result
+
+      const dataRecord = nodeRecord.data as Record<string, unknown>
+      const blockType = dataRecord.type
+      if (typeof blockType !== 'string' || !availableBlockTypes.has(blockType as BlockEnum))
+        return result
+
+      const normalizedBlockType = blockType as BlockEnum
+      if (!result.includes(normalizedBlockType))
+        result.push(normalizedBlockType)
+
+      return result
+    }, [])
+  }, [workflow?.graph])
+
+  return (
+    <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <AppIcon
+            size="tiny"
+            iconType={icon_info.icon_type}
+            icon={icon_info.icon}
+            background={icon_info.icon_background}
+            imageUrl={icon_info.icon_url}
+          />
+          <div className="text-text-primary system-md-medium">{name}</div>
+        </div>
+        {!!description && (
+          <div className="w-[200px] text-text-secondary system-xs-regular">
+            {description}
+          </div>
+        )}
+        {!!blockTypes.length && (
+          <div className="flex items-center gap-0.5 pt-1">
+            {blockTypes.map(blockType => (
+              <BlockIcon
+                key={blockType}
+                type={blockType}
+                size="sm"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {!!author && (
+        <div className="pt-3 text-text-tertiary system-xs-regular">
+          {author}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SnippetDetailCard
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
new file mode 100644
index 0000000000..91ae9ae1ae
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
@@ -0,0 +1,31 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
+
+type SnippetEmptyStateProps = {
+  onCreate: () => void
+}
+
+const SnippetEmptyState: FC<SnippetEmptyStateProps> = ({
+  onCreate,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex min-h-[480px] flex-col items-center justify-center gap-2 px-4">
+      <span className="i-custom-vender-line-others-search-menu h-8 w-8 text-text-tertiary" />
+      <div className="text-text-secondary system-sm-regular">
+        {t('tabs.noSnippetsFound', { ns: 'workflow' })}
+      </div>
+      <Button
+        variant="secondary-accent"
+        size="small"
+        onClick={onCreate}
+      >
+        {t('tabs.createSnippet', { ns: 'workflow' })}
+      </Button>
+    </div>
+  )
+}
+
+export default SnippetEmptyState
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
new file mode 100644
index 0000000000..fa4cd13b3b
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/snippet-list-item.tsx
@@ -0,0 +1,51 @@
+import type {
+  ComponentPropsWithoutRef,
+  Ref,
+} from 'react'
+import type { PublishedSnippetListItem } from './snippet-detail-card'
+import { cn } from '@langgenius/dify-ui/cn'
+import AppIcon from '@/app/components/base/app-icon'
+
+type SnippetListItemProps = {
+  isHovered: boolean
+  ref?: Ref<HTMLDivElement>
+  snippet: PublishedSnippetListItem
+} & ComponentPropsWithoutRef<'div'>
+
+const SnippetListItem = ({
+  isHovered,
+  snippet,
+  className,
+  ref,
+  ...props
+}: SnippetListItemProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3',
+        isHovered && 'bg-background-default-hover',
+        className,
+      )}
+      {...props}
+    >
+      <AppIcon
+        size="tiny"
+        iconType={snippet.icon_info.icon_type}
+        icon={snippet.icon_info.icon}
+        background={snippet.icon_info.icon_background}
+        imageUrl={snippet.icon_info.icon_url}
+      />
+      <div className="system-sm-medium min-w-0 text-text-secondary">
+        {snippet.name}
+      </div>
+      {isHovered && snippet.author && (
+        <div className="system-xs-regular ml-auto text-text-tertiary">
+          {snippet.author}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SnippetListItem
diff --git a/web/app/components/workflow/block-selector/snippets/use-create-snippet.ts b/web/app/components/workflow/block-selector/snippets/use-create-snippet.ts
new file mode 100644
index 0000000000..cfa2652921
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/use-create-snippet.ts
@@ -0,0 +1,71 @@
+import type { CreateSnippetDialogPayload } from '../../create-snippet-dialog'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
+import { useRouter } from '@/next/navigation'
+import { consoleClient } from '@/service/client'
+import { useCreateSnippetMutation } from '@/service/use-snippets'
+
+export const useCreateSnippet = () => {
+  const { t } = useTranslation()
+  const { push } = useRouter()
+  const createSnippetMutation = useCreateSnippetMutation()
+  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
+  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
+
+  const handleOpenCreateSnippetDialog = () => {
+    setIsCreateSnippetDialogOpen(true)
+  }
+
+  const handleCloseCreateSnippetDialog = () => {
+    setIsCreateSnippetDialogOpen(false)
+  }
+
+  const handleCreateSnippet = async ({
+    name,
+    description,
+    icon,
+    graph,
+  }: CreateSnippetDialogPayload) => {
+    setIsCreatingSnippet(true)
+
+    try {
+      const snippet = await createSnippetMutation.mutateAsync({
+        body: {
+          name,
+          description: description || undefined,
+          icon_info: {
+            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+            icon_type: icon.type,
+            icon_background: icon.type === 'emoji' ? icon.background : undefined,
+            icon_url: icon.type === 'image' ? icon.url : undefined,
+          },
+        },
+      })
+
+      await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId: snippet.id },
+        body: { graph },
+      })
+
+      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+      handleCloseCreateSnippetDialog()
+      push(`/snippets/${snippet.id}/orchestrate`)
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+    finally {
+      setIsCreatingSnippet(false)
+    }
+  }
+
+  return {
+    createSnippetMutation,
+    handleCloseCreateSnippetDialog,
+    handleCreateSnippet,
+    handleOpenCreateSnippetDialog,
+    isCreateSnippetDialogOpen,
+    isCreatingSnippet,
+  }
+}
diff --git a/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts b/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
new file mode 100644
index 0000000000..c143af9d6d
--- /dev/null
+++ b/web/app/components/workflow/block-selector/snippets/use-insert-snippet.ts
@@ -0,0 +1,143 @@
+import type { Edge, Node } from '../../types'
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useStoreApi } from 'reactflow'
+import { toast } from '@/app/components/base/ui/toast'
+import { consoleQuery } from '@/service/client'
+import { useNodesSyncDraft, useWorkflowHistory, WorkflowHistoryEvent } from '../../hooks'
+
+const getSnippetGraph = (graph: Record<string, unknown> | undefined) => {
+  if (!graph)
+    return { nodes: [] as Node[], edges: [] as Edge[] }
+
+  return {
+    nodes: Array.isArray(graph.nodes) ? graph.nodes as Node[] : [],
+    edges: Array.isArray(graph.edges) ? graph.edges as Edge[] : [],
+  }
+}
+
+const remapSnippetGraph = (currentNodes: Node[], snippetNodes: Node[], snippetEdges: Edge[]) => {
+  const existingIds = new Set(currentNodes.map(node => node.id))
+  const idMapping = new Map<string, string>()
+  const rootNodes = snippetNodes.filter(node => !node.parentId)
+  const minRootX = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.x)) : 0
+  const minRootY = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.y)) : 0
+  const currentMaxX = currentNodes.length
+    ? Math.max(...currentNodes.map((node) => {
+        const nodeX = node.positionAbsolute?.x ?? node.position.x
+        return nodeX + (node.width ?? 0)
+      }))
+    : 0
+  const currentMinY = currentNodes.length
+    ? Math.min(...currentNodes.map(node => node.positionAbsolute?.y ?? node.position.y))
+    : 0
+  const offsetX = (currentNodes.length ? currentMaxX + 80 : 80) - minRootX
+  const offsetY = (currentNodes.length ? currentMinY : 80) - minRootY
+
+  snippetNodes.forEach((node, index) => {
+    let nextId = `${node.id}-${Date.now()}-${index}`
+    while (existingIds.has(nextId))
+      nextId = `${nextId}-1`
+    existingIds.add(nextId)
+    idMapping.set(node.id, nextId)
+  })
+
+  const nodes = snippetNodes.map((node) => {
+    const nextParentId = node.parentId ? idMapping.get(node.parentId) : undefined
+    const isRootNode = !node.parentId
+
+    return {
+      ...node,
+      id: idMapping.get(node.id)!,
+      parentId: nextParentId,
+      position: isRootNode
+        ? {
+            x: node.position.x + offsetX,
+            y: node.position.y + offsetY,
+          }
+        : node.position,
+      positionAbsolute: node.positionAbsolute
+        ? (isRootNode
+            ? {
+                x: node.positionAbsolute.x + offsetX,
+                y: node.positionAbsolute.y + offsetY,
+              }
+            : node.positionAbsolute)
+        : undefined,
+      selected: true,
+      data: {
+        ...node.data,
+        selected: true,
+        _children: node.data._children?.map(child => ({
+          ...child,
+          nodeId: idMapping.get(child.nodeId) ?? child.nodeId,
+        })),
+      },
+    }
+  })
+
+  const edges = snippetEdges.map(edge => ({
+    ...edge,
+    id: `${idMapping.get(edge.source)}-${edge.sourceHandle}-${idMapping.get(edge.target)}-${edge.targetHandle}`,
+    source: idMapping.get(edge.source)!,
+    target: idMapping.get(edge.target)!,
+    selected: false,
+    data: edge.data
+      ? {
+          ...edge.data,
+          _connectedNodeIsSelected: true,
+        }
+      : edge.data,
+  }))
+
+  return { nodes, edges }
+}
+
+export const useInsertSnippet = () => {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const store = useStoreApi()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { saveStateToHistory } = useWorkflowHistory()
+
+  const handleInsertSnippet = useCallback(async (snippetId: string) => {
+    try {
+      const workflow = await queryClient.fetchQuery(consoleQuery.snippets.publishedWorkflow.queryOptions({
+        input: {
+          params: { snippetId },
+        },
+      }))
+      const { nodes: snippetNodes, edges: snippetEdges } = getSnippetGraph(workflow.graph)
+
+      if (!snippetNodes.length)
+        return
+
+      const { getNodes, setNodes, edges, setEdges } = store.getState()
+      const currentNodes = getNodes()
+      const remappedGraph = remapSnippetGraph(currentNodes, snippetNodes, snippetEdges)
+      const clearedNodes = currentNodes.map(node => ({
+        ...node,
+        selected: false,
+        data: {
+          ...node.data,
+          selected: false,
+        },
+      }))
+
+      setNodes([...clearedNodes, ...remappedGraph.nodes])
+      setEdges([...edges, ...remappedGraph.edges])
+      saveStateToHistory(WorkflowHistoryEvent.NodePaste, {
+        nodeId: remappedGraph.nodes[0]?.id,
+      })
+      handleSyncWorkflowDraft()
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+  }, [handleSyncWorkflowDraft, queryClient, saveStateToHistory, store, t])
+
+  return {
+    handleInsertSnippet,
+  }
+}
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 5605908b71..834c8d5957 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -34,12 +34,14 @@ type TabsProps = {
     key: TabsEnum
     name: string
     disabled?: boolean
+    disabledTip?: string
   }>
   filterElem: React.ReactNode
   noBlocks?: boolean
   noTools?: boolean
   forceShowStartContent?: boolean // Force show Start content even when noBlocks=true
   allowStartNodeSelection?: boolean // Allow user input option even when trigger node already exists (e.g. change-node flow or when no Start node yet).
+  snippetsElem?: React.ReactNode
 }
 
 const normalizeToolList = (list: ToolWithProvider[] | undefined, currentBasePath?: string) => {
@@ -173,6 +175,7 @@ const Tabs: FC<TabsProps> = ({
   noTools,
   forceShowStartContent = false,
   allowStartNodeSelection = false,
+  snippetsElem,
 }) => {
   const { t } = useTranslation()
   const { data: buildInTools } = useAllBuiltInTools()
@@ -223,7 +226,7 @@ const Tabs: FC<TabsProps> = ({
                   tab={tab}
                   activeTab={activeTab}
                   onActiveTabChange={onActiveTabChange}
-                  disabledTip={disabledTip}
+                  disabledTip={tab.disabledTip || disabledTip}
                 />
               ))
             }
@@ -289,6 +292,13 @@ const Tabs: FC<TabsProps> = ({
           />
         )
       }
+      {
+        activeTab === TabsEnum.Snippets && snippetsElem && (
+          <div className="border-t border-divider-subtle">
+            {snippetsElem}
+          </div>
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index dc6551c45c..572743eafa 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -7,6 +7,7 @@ export enum TabsEnum {
   Blocks = 'blocks',
   Tools = 'tools',
   Sources = 'sources',
+  Snippets = 'snippets',
 }
 
 export enum ToolTypeEnum {
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
new file mode 100644
index 0000000000..182fddfcf4
--- /dev/null
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -0,0 +1,199 @@
+'use client'
+
+import type { FC } from 'react'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { SnippetCanvasData } from '@/models/snippet'
+import { useKeyPress } from 'ahooks'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '@/app/components/base/app-icon'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
+import { Button } from '@/app/components/base/ui/button'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import { Dialog, DialogCloseButton, DialogContent, DialogPortal, DialogTitle } from '@/app/components/base/ui/dialog'
+import ShortcutsName from './shortcuts-name'
+
+export type CreateSnippetDialogPayload = {
+  name: string
+  description: string
+  icon: AppIconSelection
+  graph: SnippetCanvasData
+}
+
+type CreateSnippetDialogInitialValue = {
+  name?: string
+  description?: string
+  icon?: AppIconSelection
+}
+
+type CreateSnippetDialogProps = {
+  isOpen: boolean
+  selectedGraph?: SnippetCanvasData
+  onClose: () => void
+  onConfirm: (payload: CreateSnippetDialogPayload) => void
+  isSubmitting?: boolean
+  title?: string
+  confirmText?: string
+  initialValue?: CreateSnippetDialogInitialValue
+}
+
+const defaultIcon: AppIconSelection = {
+  type: 'emoji',
+  icon: '🤖',
+  background: '#FFEAD5',
+}
+
+const defaultGraph: SnippetCanvasData = {
+  nodes: [],
+  edges: [],
+  viewport: { x: 0, y: 0, zoom: 1 },
+}
+
+const CreateSnippetDialog: FC<CreateSnippetDialogProps> = ({
+  isOpen,
+  selectedGraph,
+  onClose,
+  onConfirm,
+  isSubmitting = false,
+  title,
+  confirmText,
+  initialValue,
+}) => {
+  const { t } = useTranslation()
+  const [name, setName] = useState(initialValue?.name ?? '')
+  const [description, setDescription] = useState(initialValue?.description ?? '')
+  const [icon, setIcon] = useState<AppIconSelection>(initialValue?.icon ?? defaultIcon)
+  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
+
+  const resetForm = useCallback(() => {
+    setName('')
+    setDescription('')
+    setIcon(defaultIcon)
+    setShowAppIconPicker(false)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    resetForm()
+    onClose()
+  }, [onClose, resetForm])
+
+  const handleConfirm = useCallback(() => {
+    const trimmedName = name.trim()
+    const trimmedDescription = description.trim()
+
+    if (!trimmedName)
+      return
+
+    const payload = {
+      name: trimmedName,
+      description: trimmedDescription,
+      icon,
+      graph: selectedGraph ?? defaultGraph,
+    }
+
+    onConfirm(payload)
+  }, [description, icon, name, onConfirm, selectedGraph])
+
+  useKeyPress(['meta.enter', 'ctrl.enter'], () => {
+    if (!isOpen)
+      return
+
+    if (isSubmitting)
+      return
+
+    handleConfirm()
+  })
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+        <DialogContent className="w-[520px] max-w-[520px] p-0">
+          <DialogCloseButton />
+
+          <div className="px-6 pt-6 pb-3">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
+              {title || t('snippet.createDialogTitle', { ns: 'workflow' })}
+            </DialogTitle>
+          </div>
+
+          <div className="space-y-4 px-6 py-2">
+            <div className="flex items-end gap-3">
+              <div className="flex-1 pb-0.5">
+                <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
+                  {t('snippet.nameLabel', { ns: 'workflow' })}
+                </div>
+                <Input
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  placeholder={t('snippet.namePlaceholder', { ns: 'workflow' }) || ''}
+                  disabled={isSubmitting}
+                  autoFocus
+                />
+              </div>
+
+              <AppIcon
+                size="xxl"
+                className="shrink-0 cursor-pointer"
+                iconType={icon.type}
+                icon={icon.type === 'emoji' ? icon.icon : icon.fileId}
+                background={icon.type === 'emoji' ? icon.background : undefined}
+                imageUrl={icon.type === 'image' ? icon.url : undefined}
+                onClick={() => setShowAppIconPicker(true)}
+              />
+            </div>
+
+            <div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
+                {t('snippet.descriptionLabel', { ns: 'workflow' })}
+              </div>
+              <Textarea
+                className="resize-none"
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                placeholder={t('snippet.descriptionPlaceholder', { ns: 'workflow' }) || ''}
+                disabled={isSubmitting}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-2 px-6 pt-5 pb-6">
+            <Button disabled={isSubmitting} onClick={handleClose}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button
+              variant="primary"
+              disabled={!name.trim() || isSubmitting}
+              loading={isSubmitting}
+              onClick={handleConfirm}
+            >
+              {confirmText || t('snippet.confirm', { ns: 'workflow' })}
+              <ShortcutsName className="ml-1" keys={['ctrl', 'enter']} bgColor="white" />
+            </Button>
+          </div>
+        </DialogContent>
+
+        <DialogPortal>
+          <div className="pointer-events-none fixed top-1/2 left-1/2 z-[1002] flex -translate-x-1/2 translate-y-[170px] items-center gap-1 body-xs-regular text-text-quaternary">
+            <span>{t('snippet.shortcuts.press', { ns: 'workflow' })}</span>
+            <ShortcutsName keys={['ctrl', 'enter']} textColor="secondary" />
+            <span>{t('snippet.shortcuts.toConfirm', { ns: 'workflow' })}</span>
+          </div>
+        </DialogPortal>
+      </Dialog>
+
+      {showAppIconPicker && (
+        <AppIconPicker
+          className="z-[1100]"
+          onSelect={(selection) => {
+            setIcon(selection)
+            setShowAppIconPicker(false)
+          }}
+          onClose={() => setShowAppIconPicker(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default CreateSnippetDialog
diff --git a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
index f04a160967..3422f5f78a 100644
--- a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
@@ -221,6 +221,20 @@ describe('Header layout components', () => {
       expect(store.getState().showChatVariablePanel).toBe(false)
       expect(store.getState().showGlobalVariablePanel).toBe(false)
     })
+
+    it('should hide env and global variable buttons when the controls are disabled', () => {
+      renderWorkflowComponent(
+        <HeaderInNormal
+          controls={{
+            showEnvButton: false,
+            showGlobalVariableButton: false,
+          }}
+        />,
+      )
+
+      expect(screen.queryByTestId('env-button')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('global-variable-button')).not.toBeInTheDocument()
+    })
   })
 
   describe('HeaderInRestoring', () => {
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
index 1d462bfc9c..40387d1e0e 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
@@ -41,7 +41,6 @@ vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
       return open ? <div>{children}</div> : null
     },
     DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    DropdownMenuLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => <div className={className}>{children}</div>,
     DropdownMenuGroupLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => <div className={className}>{children}</div>,
     DropdownMenuSeparator: ({ className }: { className?: string }) => <div className={className} data-testid="dropdown-separator" />,
     DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement>, className?: string }) => {
diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 60b4605d06..bc7707d164 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -29,10 +29,15 @@ export type HeaderInNormalProps = {
     middle?: React.ReactNode
     chatVariableTrigger?: React.ReactNode
   }
+  controls?: {
+    showEnvButton?: boolean
+    showGlobalVariableButton?: boolean
+  }
   runAndHistoryProps?: RunAndHistoryProps
 }
 const HeaderInNormal = ({
   components,
+  controls,
   runAndHistoryProps,
 }: HeaderInNormalProps) => {
   const workflowStore = useWorkflowStore()
@@ -48,6 +53,9 @@ const HeaderInNormal = ({
   const selectedNode = nodes.find(node => node.data.selected)
   const { handleBackupDraft } = useWorkflowRun()
   const { closeAllInputFieldPanels } = useInputFieldPanel()
+  const showEnvButton = controls?.showEnvButton !== false
+  const showGlobalVariableButton = controls?.showGlobalVariableButton !== false
+  const showContextButtons = !!components?.chatVariableTrigger || showEnvButton || showGlobalVariableButton
 
   const onStartRestoring = useCallback(() => {
     workflowStore.setState({ isRestoring: true })
@@ -77,11 +85,13 @@ const HeaderInNormal = ({
         {components?.left}
         <Divider type="vertical" className="mx-auto h-3.5" />
         <RunAndHistory {...runAndHistoryProps} />
-        <div className="shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]">
-          {components?.chatVariableTrigger}
-          <EnvButton disabled={nodesReadOnly} />
-          <GlobalVariableButton disabled={nodesReadOnly} />
-        </div>
+        {showContextButtons && (
+          <div className="shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]">
+            {components?.chatVariableTrigger}
+            {showEnvButton && <EnvButton disabled={nodesReadOnly} />}
+            {showGlobalVariableButton && <GlobalVariableButton disabled={nodesReadOnly} />}
+          </div>
+        )}
         {components?.middle}
         <VersionHistoryButton onClick={onStartRestoring} />
       </div>
diff --git a/web/app/components/workflow/header/running-title.tsx b/web/app/components/workflow/header/running-title.tsx
index e3e2ebab75..590c6cd329 100644
--- a/web/app/components/workflow/header/running-title.tsx
+++ b/web/app/components/workflow/header/running-title.tsx
@@ -15,7 +15,7 @@ const RunningTitle = () => {
       <ClockPlay className="mr-1 h-3 w-3 text-gray-500" />
       <span>{isChatMode ? `Test Chat${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}` : `Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}</span>
       <span className="mx-1">·</span>
-      <span className="ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/48 px-1 text-[10px] font-semibold text-indigo-600 uppercase">
+      <span className="ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/48 px-1 text-[10px] font-semibold uppercase text-indigo-600">
         {t('common.viewOnly', { ns: 'workflow' })}
       </span>
     </div>
diff --git a/web/app/components/workflow/header/test-run-menu.tsx b/web/app/components/workflow/header/test-run-menu.tsx
index 6540875e6b..5b86c3c3f5 100644
--- a/web/app/components/workflow/header/test-run-menu.tsx
+++ b/web/app/components/workflow/header/test-run-menu.tsx
@@ -1,7 +1,7 @@
 import type { ShortcutMapping } from './test-run-menu-helpers'
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { OptionRow, SingleOptionTrigger, useShortcutMenu } from './test-run-menu-helpers'
 
 export enum TriggerType {
@@ -155,9 +155,9 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
         popupClassName="w-[284px] p-1"
       >
         <DropdownMenuGroup>
-          <DropdownMenuLabel className="mb-1 px-3 pt-2 text-sm font-medium text-text-primary">
+          <DropdownMenuGroupLabel className="mb-1 px-3 pt-2 text-sm font-medium text-text-primary">
             {t('common.chooseStartNodeToRun', { ns: 'workflow' })}
-          </DropdownMenuLabel>
+          </DropdownMenuGroupLabel>
           <div>
             {hasUserInput && renderOption(options.userInput!)}
 
diff --git a/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts b/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts
index 193e4307de..90aa6290fa 100644
--- a/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-inspect-vars-crud.spec.ts
@@ -61,7 +61,22 @@ describe('useInspectVarsCrud', () => {
     })
   })
 
-  it('appends query/files system vars to start-node inspect vars and filters them from the system list', () => {
+  it('should pass the flow id to shared variable queries for app flows', () => {
+    renderWorkflowHook(() => useInspectVarsCrud(), {
+      hooksStoreProps: {
+        configsMap: {
+          flowId: 'app-1',
+          flowType: FlowType.appFlow,
+          fileSettings: {} as never,
+        },
+      },
+    })
+
+    expect(mockUseConversationVarValues).toHaveBeenCalledWith(FlowType.appFlow, 'app-1')
+    expect(mockUseSysVarValues).toHaveBeenCalledWith(FlowType.appFlow, 'app-1')
+  })
+
+  it('should append query and files vars to the start node and keep other system vars separate', () => {
     const hasNodeInspectVars = vi.fn(() => true)
     const deleteAllInspectorVars = vi.fn()
     const fetchInspectVarValue = vi.fn()
@@ -118,11 +133,11 @@ describe('useInspectVarsCrud', () => {
     expect(result.current.deleteAllInspectorVars).toBe(deleteAllInspectorVars)
   })
 
-  it('uses an empty flow id for rag pipeline conversation and system value queries', () => {
+  it('should use an empty flow id for shared variable queries in rag pipelines', () => {
     renderWorkflowHook(() => useInspectVarsCrud(), {
       hooksStoreProps: {
         configsMap: {
-          flowId: 'rag-flow',
+          flowId: 'pipeline-1',
           flowType: FlowType.ragPipeline,
           fileSettings: {} as never,
         },
@@ -132,4 +147,19 @@ describe('useInspectVarsCrud', () => {
     expect(mockUseConversationVarValues).toHaveBeenCalledWith(FlowType.ragPipeline, '')
     expect(mockUseSysVarValues).toHaveBeenCalledWith(FlowType.ragPipeline, '')
   })
+
+  it('should use an empty flow id for shared variable queries in snippets', () => {
+    renderWorkflowHook(() => useInspectVarsCrud(), {
+      hooksStoreProps: {
+        configsMap: {
+          flowId: 'snippet-1',
+          flowType: FlowType.snippet,
+          fileSettings: {} as never,
+        },
+      },
+    })
+
+    expect(mockUseConversationVarValues).toHaveBeenCalledWith(FlowType.snippet, '')
+    expect(mockUseSysVarValues).toHaveBeenCalledWith(FlowType.snippet, '')
+  })
 })
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index abafcfd8eb..99536653ce 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -187,18 +187,18 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
       let moreDataForCheckValid
       let usedVars: ValueSelector[] = []
 
-      if (node!.data.type === BlockEnum.Tool)
-        moreDataForCheckValid = getToolCheckParams(node!.data as ToolNodeType, buildInTools || [], customTools || [], workflowTools || [], language)
+      if (node.data.type === BlockEnum.Tool)
+        moreDataForCheckValid = getToolCheckParams(node.data as ToolNodeType, buildInTools || [], customTools || [], workflowTools || [], language)
 
-      if (node!.data.type === BlockEnum.DataSource)
-        moreDataForCheckValid = getDataSourceCheckParams(node!.data as DataSourceNodeType, dataSourceList || [], language)
+      if (node.data.type === BlockEnum.DataSource)
+        moreDataForCheckValid = getDataSourceCheckParams(node.data as DataSourceNodeType, dataSourceList || [], language)
 
-      if (node!.data.type === BlockEnum.TriggerPlugin)
-        moreDataForCheckValid = getTriggerCheckParams(node!.data as PluginTriggerNodeType, triggerPlugins, language)
+      if (node.data.type === BlockEnum.TriggerPlugin)
+        moreDataForCheckValid = getTriggerCheckParams(node.data as PluginTriggerNodeType, triggerPlugins, language)
 
-      const toolIcon = getToolIcon(node!.data)
-      if (node!.data.type === BlockEnum.Agent) {
-        const data = node!.data as AgentNodeType
+      const toolIcon = getToolIcon(node.data)
+      if (node.data.type === BlockEnum.Agent) {
+        const data = node.data as AgentNodeType
         const isReadyForCheckValid = !!strategyProviders
         const provider = strategyProviders?.find(provider => provider.declaration.identity.name === data.agent_strategy_provider_name)
         const strategy = provider?.declaration.strategies?.find(s => s.identity.name === data.agent_strategy_name)
@@ -210,13 +210,13 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
         }
       }
       else {
-        usedVars = getNodeUsedVars(node!).filter(v => v.length > 0)
+        usedVars = getNodeUsedVars(node).filter(v => v.length > 0)
       }
 
-      if (node!.type === CUSTOM_NODE) {
-        const checkData = getCheckData(node!.data)
-        const validator = nodesExtraData?.[node!.data.type as BlockEnum]?.checkValid
-        const isPluginMissing = isNodePluginMissing(node!.data, { builtInTools: buildInTools, customTools, workflowTools, mcpTools, triggerPlugins, dataSourceList })
+      if (node.type === CUSTOM_NODE) {
+        const checkData = getCheckData(node.data)
+        const validator = nodesExtraData?.[node.data.type as BlockEnum]?.checkValid
+        const isPluginMissing = isNodePluginMissing(node.data, { builtInTools: buildInTools, customTools, workflowTools, mcpTools, triggerPlugins, dataSourceList })
 
         const errorMessages: string[] = []
 
@@ -224,8 +224,8 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
           errorMessages.push(t('nodes.common.pluginNotInstalled', { ns: 'workflow' }))
         }
         else {
-          if (node!.data.type === BlockEnum.LLM) {
-            const modelProvider = (node!.data as CommonNodeType<{ model?: ModelConfig }>).model?.provider
+          if (node.data.type === BlockEnum.LLM) {
+            const modelProvider = (node.data as CommonNodeType<{ model?: ModelConfig }>).model?.provider
             const modelIssue = getLLMModelIssue({
               modelProvider,
               isModelProviderInstalled: isLLMModelProviderInstalled(modelProvider, installedPluginIds),
@@ -240,12 +240,12 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
               errorMessages.push(validationError)
           }
 
-          const availableVars = map[node!.id]!.availableVars
+          const availableVars = map[node.id].availableVars
           let hasInvalidVar = false
           for (const variable of usedVars) {
             if (hasInvalidVar)
               break
-            if (isSpecialVar(variable[0]!))
+            if (isSpecialVar(variable[0]))
               continue
             const usedNode = availableVars.find(v => v.nodeId === variable?.[0])
             if (!usedNode || !usedNode.vars.some(v => v.variable === variable?.[1]))
@@ -255,17 +255,17 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
             errorMessages.push(t('errorMsg.invalidVariable', { ns: 'workflow' }))
         }
 
-        const isStartNodeMeta = nodesExtraData?.[node!.data.type as BlockEnum]?.metaData.isStart ?? false
+        const isStartNodeMeta = nodesExtraData?.[node.data.type as BlockEnum]?.metaData.isStart ?? false
         const canSkipConnectionCheck = shouldCheckStartNode ? isStartNodeMeta : true
 
-        const isUnconnected = !validNodes.some(n => n.id === node!.id)
+        const isUnconnected = !validNodes.some(n => n.id === node.id)
         const shouldShowError = errorMessages.length > 0 || (isUnconnected && !canSkipConnectionCheck)
 
         if (shouldShowError) {
           list.push({
-            id: node!.id,
-            type: node!.data.type,
-            title: node!.data.title,
+            id: node.id,
+            type: node.data.type,
+            title: node.data.title,
             toolIcon,
             unConnected: isUnconnected && !canSkipConnectionCheck,
             errorMessages,
@@ -273,7 +273,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
             disableGoTo: isPluginMissing,
             isPluginMissing,
             pluginUniqueIdentifier: isPluginMissing
-              ? (node!.data as { plugin_unique_identifier?: string }).plugin_unique_identifier
+              ? (node.data as { plugin_unique_identifier?: string }).plugin_unique_identifier
               : undefined,
           })
         }
@@ -458,14 +458,14 @@ export const useChecklistBeforePublish = () => {
       const node = filteredNodes[i]
       let moreDataForCheckValid
       let usedVars: ValueSelector[] = []
-      if (node!.data.type === BlockEnum.Tool)
-        moreDataForCheckValid = getToolCheckParams(node!.data as ToolNodeType, buildInTools || [], customTools || [], workflowTools || [], language)
+      if (node.data.type === BlockEnum.Tool)
+        moreDataForCheckValid = getToolCheckParams(node.data as ToolNodeType, buildInTools || [], customTools || [], workflowTools || [], language)
 
-      if (node!.data.type === BlockEnum.DataSource)
-        moreDataForCheckValid = getDataSourceCheckParams(node!.data as DataSourceNodeType, dataSourceList || [], language)
+      if (node.data.type === BlockEnum.DataSource)
+        moreDataForCheckValid = getDataSourceCheckParams(node.data as DataSourceNodeType, dataSourceList || [], language)
 
-      if (node!.data.type === BlockEnum.Agent) {
-        const data = node!.data as AgentNodeType
+      if (node.data.type === BlockEnum.Agent) {
+        const data = node.data as AgentNodeType
         const isReadyForCheckValid = !!strategyProviders
         const provider = strategyProviders?.find(provider => provider.declaration.identity.name === data.agent_strategy_provider_name)
         const strategy = provider?.declaration.strategies?.find(s => s.identity.name === data.agent_strategy_name)
@@ -477,55 +477,55 @@ export const useChecklistBeforePublish = () => {
         }
       }
       else {
-        usedVars = getNodeUsedVars(node!).filter(v => v.length > 0)
+        usedVars = getNodeUsedVars(node).filter(v => v.length > 0)
       }
 
-      if (node!.data.type === BlockEnum.LLM) {
-        const modelProvider = (node!.data as CommonNodeType<{ model?: ModelConfig }>).model?.provider
+      if (node.data.type === BlockEnum.LLM) {
+        const modelProvider = (node.data as CommonNodeType<{ model?: ModelConfig }>).model?.provider
         const modelIssue = getLLMModelIssue({
           modelProvider,
           isModelProviderInstalled: isLLMModelProviderInstalled(modelProvider, installedPluginIds),
         })
         if (modelIssue === LLMModelIssueCode.providerPluginUnavailable) {
-          toast.error(`[${node!.data.title}] ${t('errorMsg.configureModel', { ns: 'workflow' })}`)
+          toast.error(`[${node.data.title}] ${t('errorMsg.configureModel', { ns: 'workflow' })}`)
           return false
         }
       }
 
-      const checkData = getCheckData(node!.data, datasets, embeddingProviderModelMap)
-      const { errorMessage } = nodesExtraData![node!.data.type as BlockEnum].checkValid(checkData, t, moreDataForCheckValid)
+      const checkData = getCheckData(node.data, datasets, embeddingProviderModelMap)
+      const { errorMessage } = nodesExtraData![node.data.type as BlockEnum].checkValid(checkData, t, moreDataForCheckValid)
 
       if (errorMessage) {
-        toast.error(`[${node!.data.title}] ${errorMessage}`)
+        toast.error(`[${node.data.title}] ${errorMessage}`)
         return false
       }
 
-      const availableVars = map[node!.id]!.availableVars
+      const availableVars = map[node.id].availableVars
 
       for (const variable of usedVars) {
-        const isSpecialVars = isSpecialVar(variable[0]!)
+        const isSpecialVars = isSpecialVar(variable[0])
         if (!isSpecialVars) {
           const usedNode = availableVars.find(v => v.nodeId === variable?.[0])
           if (usedNode) {
             const usedVar = usedNode.vars.find(v => v.variable === variable?.[1])
             if (!usedVar) {
-              toast.error(`[${node!.data.title}] ${t('errorMsg.invalidVariable', { ns: 'workflow' })}`)
+              toast.error(`[${node.data.title}] ${t('errorMsg.invalidVariable', { ns: 'workflow' })}`)
               return false
             }
           }
           else {
-            toast.error(`[${node!.data.title}] ${t('errorMsg.invalidVariable', { ns: 'workflow' })}`)
+            toast.error(`[${node.data.title}] ${t('errorMsg.invalidVariable', { ns: 'workflow' })}`)
             return false
           }
         }
       }
 
-      const isStartNodeMeta = nodesExtraData?.[node!.data.type as BlockEnum]?.metaData.isStart ?? false
+      const isStartNodeMeta = nodesExtraData?.[node.data.type as BlockEnum]?.metaData.isStart ?? false
       const canSkipConnectionCheck = shouldCheckStartNode ? isStartNodeMeta : true
-      const isUnconnected = !validNodes.some(n => n.id === node!.id)
+      const isUnconnected = !validNodes.some(n => n.id === node.id)
 
       if (isUnconnected && !canSkipConnectionCheck) {
-        toast.error(`[${node!.data.title}] ${t('common.needConnectTip', { ns: 'workflow' })}`)
+        toast.error(`[${node.data.title}] ${t('common.needConnectTip', { ns: 'workflow' })}`)
         return false
       }
     }
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
index 2a97019383..1bca16aea6 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -12,9 +12,10 @@ const varsAppendStartNodeKeys = ['query', 'files']
 const useInspectVarsCrud = () => {
   const partOfNodesWithInspectVars = useStore(s => s.nodesWithInspectVars)
   const configsMap = useHooksStore(s => s.configsMap)
-  const isRagPipeline = configsMap?.flowType === FlowType.ragPipeline
-  const { data: conversationVars } = useConversationVarValues(configsMap?.flowType, !isRagPipeline ? configsMap?.flowId : '')
-  const { data: allSystemVars } = useSysVarValues(configsMap?.flowType, !isRagPipeline ? configsMap?.flowId : '')
+  const shouldSkipSharedVariableQueries = configsMap?.flowType === FlowType.ragPipeline || configsMap?.flowType === FlowType.snippet
+  const variableFlowId = shouldSkipSharedVariableQueries ? '' : configsMap?.flowId
+  const { data: conversationVars } = useConversationVarValues(configsMap?.flowType, variableFlowId)
+  const { data: allSystemVars } = useSysVarValues(configsMap?.flowType, variableFlowId)
   const { varsAppendStartNode, systemVars } = (() => {
     if (allSystemVars?.length === 0)
       return { varsAppendStartNode: [], systemVars: [] }
diff --git a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
index 3de713c067..1cd18f2907 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
@@ -53,7 +53,7 @@ const TextEditor: FC<Props> = ({
           onChange={e => onChange(e.target.value)}
           onFocus={setIsFocus}
           onBlur={handleBlur}
-          className="h-full w-full resize-none border-none bg-transparent px-3 text-[13px] leading-[18px] font-normal text-gray-900 placeholder:text-gray-300 focus:outline-hidden"
+          className="h-full w-full resize-none border-none bg-transparent px-3 text-[13px] font-normal leading-[18px] text-gray-900 placeholder:text-gray-300 focus:outline-hidden"
           placeholder={placeholder}
           readOnly={readonly}
         />
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
index 4af622bb46..9884e85657 100644
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
@@ -27,9 +27,9 @@ const Placeholder = () => {
     >
       <div className="flex grow items-center">
         {t('nodes.tool.insertPlaceholder1', { ns: 'workflow' })}
-        <div className="mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
+        <div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray text-text-placeholder">/</div>
         <div
-          className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
+          className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
           onMouseDown={((e) => {
             e.preventDefault()
             e.stopPropagation()
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index c0a4f0b537..bc979eed60 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -2,17 +2,18 @@ import type {
   CommonNodeType,
   OnSelectBlock,
 } from '@/app/components/workflow/types'
+import { RiMoreFill } from '@remixicon/react'
 import { intersection } from 'es-toolkit/array'
 import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   useAvailableBlocks,
@@ -85,21 +86,18 @@ const Operator = ({
   } = useNodesInteractions()
 
   return (
-    <DropdownMenu
+    <PortalToFollowElem
+      placement="bottom-end"
+      offset={{ mainAxis: 4, crossAxis: -4 }}
       open={open}
       onOpenChange={onOpenChange}
     >
-      <DropdownMenuTrigger render={<div />}>
+      <PortalToFollowElemTrigger onClick={() => onOpenChange(!open)}>
         <Button className="h-6 w-6 p-0">
-          <span aria-hidden className="i-ri-more-fill h-4 w-4" />
+          <RiMoreFill className="h-4 w-4" />
         </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        placement="bottom-end"
-        sideOffset={4}
-        alignOffset={-4}
-        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
-      >
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-10">
         <div className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary shadow-lg">
           <div className="p-1">
             <ChangeItem
@@ -109,10 +107,7 @@ const Operator = ({
             />
             <div
               className="flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
-              onClick={() => {
-                onOpenChange(false)
-                handleNodeDisconnect(nodeId)
-              }}
+              onClick={() => handleNodeDisconnect(nodeId)}
             >
               {t('common.disconnect', { ns: 'workflow' })}
             </div>
@@ -120,17 +115,14 @@ const Operator = ({
           <div className="p-1">
             <div
               className="flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
-              onClick={() => {
-                onOpenChange(false)
-                handleNodeDelete(nodeId)
-              }}
+              onClick={() => handleNodeDelete(nodeId)}
             >
               {t('operation.delete', { ns: 'common' })}
             </div>
           </div>
         </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 2109365d75..173a084dcf 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -1,22 +1,23 @@
 import type { OffsetOptions } from '@floating-ui/react'
 import type { Node } from '@/app/components/workflow/types'
+import { RiMoreFill } from '@remixicon/react'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 import PanelOperatorPopup from './panel-operator-popup'
 
 type PanelOperatorProps = {
   id: string
   data: Node['data']
   triggerClassName?: string
-  offset?: OffsetOptions | number
+  offset?: OffsetOptions
   onOpenChange?: (open: boolean) => void
   inNode?: boolean
   showHelpLink?: boolean
@@ -33,14 +34,6 @@ const PanelOperator = ({
   showHelpLink = true,
 }: PanelOperatorProps) => {
   const [open, setOpen] = useState(false)
-  const sideOffset = typeof offset === 'number'
-    ? offset
-    : typeof offset === 'object' && offset && 'mainAxis' in offset && typeof offset.mainAxis === 'number'
-      ? offset.mainAxis
-      : 4
-  const alignOffset = typeof offset === 'object' && offset && 'crossAxis' in offset && typeof offset.crossAxis === 'number'
-    ? offset.crossAxis
-    : 0
 
   const handleOpenChange = useCallback((newOpen: boolean) => {
     setOpen(newOpen)
@@ -50,11 +43,13 @@ const PanelOperator = ({
   }, [onOpenChange])
 
   return (
-    <DropdownMenu
+    <PortalToFollowElem
+      placement="bottom-end"
+      offset={offset}
       open={open}
       onOpenChange={handleOpenChange}
     >
-      <DropdownMenuTrigger render={<div />}>
+      <PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
         <div
           className={`
             flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
@@ -63,23 +58,18 @@ const PanelOperator = ({
             ${triggerClassName}
           `}
         >
-          <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+          <RiMoreFill className="h-4 w-4 text-text-tertiary" />
         </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        placement="bottom-end"
-        sideOffset={sideOffset}
-        alignOffset={alignOffset}
-        popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
-      >
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-11">
         <PanelOperatorPopup
           id={id}
           data={data}
-          onClosePopup={() => handleOpenChange(false)}
+          onClosePopup={() => setOpen(false)}
           showHelpLink={showHelpLink}
         />
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
index d393896bec..db34c35c91 100644
--- a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
@@ -53,7 +53,7 @@ export const TitleInput = memo(({
       onChange={handleChange}
       onKeyDown={handleKeyDown}
       className={`
-        mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent bg-transparent px-1 system-xl-semibold text-text-primary
+        system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent bg-transparent px-1 text-text-primary
         outline-hidden focus:shadow-xs
       `}
       placeholder={t('common.addTitle', { ns: 'workflow' }) || ''}
@@ -83,8 +83,8 @@ export const DescriptionInput = memo(({
   return (
     <div
       className={`
-        group flex max-h-[60px] overflow-y-auto rounded-lg bg-components-panel-bg px-2
-        py-[5px] leading-0
+        leading-0 group flex max-h-[60px] overflow-y-auto rounded-lg bg-components-panel-bg
+        px-2 py-[5px]
         ${focus && 'shadow-xs!'}
       `}
     >
diff --git a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
index 41be240bda..c5ff2ba98b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx
@@ -57,7 +57,7 @@ const ConstantField: FC<Props> = ({
       {schema.type === FormTypeEnum.textNumber && (
         <input
           type="number"
-          className="h-8 w-full overflow-hidden rounded-lg bg-workflow-block-parma-bg p-2 text-[13px] leading-8 font-normal text-text-secondary placeholder:text-gray-400 focus:outline-hidden"
+          className="h-8 w-full overflow-hidden rounded-lg bg-workflow-block-parma-bg p-2 text-[13px] font-normal leading-8 text-text-secondary placeholder:text-gray-400 focus:outline-hidden"
           value={value}
           onChange={handleStaticChange}
           readOnly={readonly}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index a80d0b1ee2..79238aa6de 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -33,7 +33,7 @@ const OutputVarList: FC<Props> = ({
   const list = outputKeyOrders.map((key) => {
     return {
       variable: key,
-      variable_type: outputs[key]?.type!,
+      variable_type: outputs[key]?.type,
     }
   })
 
@@ -50,15 +50,15 @@ const OutputVarList: FC<Props> = ({
 
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
-      const oldKey = list[index]!.variable
+      const oldKey = list[index].variable
 
       replaceSpaceWithUnderscoreInVarNameInput(e.target)
       const newKey = e.target.value
 
-      validateVarInput(list.filter((_, itemIndex) => itemIndex !== index), newKey)
+      validateVarInput(list.toSpliced(index, 1), newKey)
 
       const newOutputs = produce(outputs, (draft) => {
-        draft[newKey] = draft[oldKey]!
+        draft[newKey] = draft[oldKey]
         // Only delete old key if no other entry shares this name
         if (!list.some((item, i) => i !== index && item.variable === oldKey))
           delete draft[oldKey]
@@ -69,9 +69,9 @@ const OutputVarList: FC<Props> = ({
 
   const handleVarTypeChange = useCallback((index: number) => {
     return (value: string) => {
-      const key = list[index]!.variable
+      const key = list[index].variable
       const newOutputs = produce(outputs, (draft) => {
-        draft[key]!.type = value as VarType
+        draft[key].type = value as VarType
       })
       onChange(newOutputs)
     }
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index b8ec03eb93..3caf1327c9 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -67,11 +67,11 @@ const VarList: FC<Props> = ({
 
       const newKey = e.target.value
 
-      validateVarInput(list.filter((_, itemIndex) => itemIndex !== index), newKey)
+      validateVarInput(list.toSpliced(index, 1), newKey)
 
-      onVarNameChange?.(list[index]!.variable, newKey)
+      onVarNameChange?.(list[index].variable, newKey)
       const newList = produce(list, (draft) => {
-        draft[index]!.variable = newKey
+        draft[index].variable = newKey
       })
       onChange(newList)
     }
@@ -81,26 +81,26 @@ const VarList: FC<Props> = ({
     return (value: ValueSelector | string, varKindType: VarKindType, varInfo?: Var) => {
       const newList = produce(list, (draft) => {
         if (!isSupportConstantValue || varKindType === VarKindType.variable) {
-          draft[index]!.value_selector = value as ValueSelector
-          draft[index]!.value_type = varInfo?.type
+          draft[index].value_selector = value as ValueSelector
+          draft[index].value_type = varInfo?.type
           if (isSupportConstantValue)
-            draft[index]!.variable_type = VarKindType.variable
+            draft[index].variable_type = VarKindType.variable
 
-          if (!draft[index]!.variable) {
+          if (!draft[index].variable) {
             const variables = draft.map(v => v.variable)
-            let newVarName = value[value.length - 1]!
+            let newVarName = value[value.length - 1]
             let count = 1
-            while (variables.includes(newVarName!)) {
+            while (variables.includes(newVarName)) {
               newVarName = `${value[value.length - 1]}_${count}`
               count++
             }
-            draft[index]!.variable = newVarName
+            draft[index].variable = newVarName
           }
         }
         else {
-          draft[index]!.variable_type = VarKindType.constant
-          draft[index]!.value_selector = value as ValueSelector
-          draft[index]!.value = value as string
+          draft[index].variable_type = VarKindType.constant
+          draft[index].value_selector = value as ValueSelector
+          draft[index].value = value as string
         }
       })
       onChange(newList)
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts b/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts
index 188084345e..a77af2daef 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts
@@ -51,7 +51,7 @@ function useOutputVarList<T>({
   } = useDebounceFn(
     (id: string, newName: string) => {
       const oldName = oldNameRecord.current[id]
-      renameInspectVarName(id, oldName!, newName)
+      renameInspectVarName(id, oldName, newName)
       delete oldNameRecord.current[id]
     },
     { wait: 500 },
@@ -73,9 +73,9 @@ function useOutputVarList<T>({
     }
 
     if (newKey) {
-      handleOutVarRenameChange(id, [id, outputKeyOrders[changedIndex!]!], [id, newKey])
+      handleOutVarRenameChange(id, [id, outputKeyOrders[changedIndex!]], [id, newKey])
       if (!(id in oldNameRecord.current))
-        oldNameRecord.current[id] = outputKeyOrders[changedIndex!]!
+        oldNameRecord.current[id] = outputKeyOrders[changedIndex!]
       renameInspectNameWithDebounce(id, newKey)
     }
     else if (changedIndex === undefined) {
@@ -126,7 +126,7 @@ function useOutputVarList<T>({
     hideRemoveVarConfirm()
   }, [deleteInspectVar, hideRemoveVarConfirm, id, nodesWithInspectVars, removeUsedVarInNodes, removedVar])
   const handleRemoveVariable = useCallback((index: number) => {
-    const key = outputKeyOrders[index]!
+    const key = outputKeyOrders[index]
 
     if (isVarUsedInNodes([id, key])) {
       showRemoveVarConfirm()
@@ -137,15 +137,15 @@ function useOutputVarList<T>({
     const newOutputKeyOrders = outputKeyOrders.filter((_, i) => i !== index)
     const newInputs = produce(inputs, (draft: any) => {
       // Only delete from outputs when no remaining entry shares this name
-      if (!newOutputKeyOrders.includes(key!))
-        delete draft[varKey][key!]
+      if (!newOutputKeyOrders.includes(key))
+        delete draft[varKey][key]
 
       if ((inputs as CodeNodeType).type === BlockEnum.Code && (inputs as CodeNodeType).error_strategy === ErrorHandleTypeEnum.defaultValue && varKey === 'outputs')
         draft.default_value = getDefaultValue(draft as any)
     })
     setInputs(newInputs)
     onOutputKeyOrdersChange(newOutputKeyOrders)
-    if (!newOutputKeyOrders.includes(key!)) {
+    if (!newOutputKeyOrders.includes(key)) {
       const varId = nodesWithInspectVars.find(node => node.nodeId === id)?.vars.find((varItem) => {
         return varItem.name === key
       })?.id
diff --git a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
index e29b1e42a3..f59de9e874 100644
--- a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
@@ -47,7 +47,6 @@ vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
       return open ? <div>{children}</div> : null
     },
     DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    DropdownMenuLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
     DropdownMenuGroupLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
     DropdownMenuSeparator: () => <div data-testid="dropdown-separator" />,
     DropdownMenuItem: ({
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index a22b8f5f3f..333aa5b2cd 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -3,14 +3,18 @@ import type { WriteMode } from '../types'
 import type { Item } from '../utils'
 import type { VarType } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  RiArrowDownSLine,
+  RiCheckLine,
+} from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
+  DropdownMenuGroupLabel,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
@@ -64,7 +68,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
             {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
           </span>
         </div>
-        <span aria-hidden className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary', disabled && 'text-components-input-text-placeholder', open && 'text-text-secondary')} />
+        <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
@@ -73,7 +77,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
         popupClassName={cn('w-[140px]', popupClassName)}
       >
         <DropdownMenuGroup>
-          <DropdownMenuLabel>{t('nodes.assigner.operations.title', { ns: 'workflow' })}</DropdownMenuLabel>
+          <DropdownMenuGroupLabel>{t('nodes.assigner.operations.title', { ns: 'workflow' })}</DropdownMenuGroupLabel>
           {items.map(item => (
             !isOperationItem(item)
               ? (
@@ -90,7 +94,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                     </div>
                     {item.value === value && (
                       <div className="flex items-center justify-center">
-                        <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                        <RiCheckLine className="h-4 w-4 text-text-accent" />
                       </div>
                     )}
                   </DropdownMenuItem>
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 97c88da18d..e40d6e2b6a 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -15,8 +15,8 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
   return (
     <div className="mb-1 px-3 py-1">
       <div className="flex items-center justify-start rounded-md bg-workflow-block-parma-bg p-1">
-        <div className="flex h-4 shrink-0 items-center rounded-sm bg-components-badge-white-to-dark px-1 text-xs font-semibold text-text-secondary uppercase">{method}</div>
-        <div className="w-0 grow pt-1 pl-1">
+        <div className="flex h-4 shrink-0 items-center rounded-sm bg-components-badge-white-to-dark px-1 text-xs font-semibold uppercase text-text-secondary">{method}</div>
+        <div className="w-0 grow pl-1 pt-1">
           <ReadonlyInputWithSelectVar
             className="text-text-secondary"
             value={url}
diff --git a/web/app/components/workflow/nodes/iteration-start/index.tsx b/web/app/components/workflow/nodes/iteration-start/index.tsx
index 90a57bef26..1cfa095bbc 100644
--- a/web/app/components/workflow/nodes/iteration-start/index.tsx
+++ b/web/app/components/workflow/nodes/iteration-start/index.tsx
@@ -29,7 +29,7 @@ export const IterationStartNodeDumb = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag relative top-[21px] left-[17px] z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
+    <div className="nodrag relative left-[17px] top-[21px] z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
       <Tooltip popupContent={t('blocks.iteration-start', { ns: 'workflow' })} asChild={false}>
         <div className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500">
           <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx
index 8505fe76f9..5fec9ad5b6 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx
@@ -40,12 +40,12 @@ const ConditionNumber = ({
   }, [onChange])
 
   return (
-    <div className="flex h-8 items-center pr-2 pl-1">
+    <div className="flex h-8 items-center pl-1 pr-2">
       <ConditionValueMethod
         valueMethod={valueMethod}
         onValueMethodChange={onValueMethodChange}
       />
-      <div className="mr-1.5 ml-1 h-4 w-px bg-divider-regular"></div>
+      <div className="ml-1 mr-1.5 h-4 w-px bg-divider-regular"></div>
       {
         valueMethod === 'variable' && !isCommonVariable && (
           <ConditionVariableSelector
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx
index 1a0a3e3067..b8085e9160 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx
@@ -40,12 +40,12 @@ const ConditionString = ({
   }, [onChange])
 
   return (
-    <div className="flex h-8 items-center pr-2 pl-1">
+    <div className="flex h-8 items-center pl-1 pr-2">
       <ConditionValueMethod
         valueMethod={valueMethod}
         onValueMethodChange={onValueMethodChange}
       />
-      <div className="mr-1.5 ml-1 h-4 w-px bg-divider-regular"></div>
+      <div className="ml-1 mr-1.5 h-4 w-px bg-divider-regular"></div>
       {
         valueMethod === 'variable' && !isCommonVariable && (
           <ConditionVariableSelector
diff --git a/web/app/components/workflow/nodes/loop-start/index.tsx b/web/app/components/workflow/nodes/loop-start/index.tsx
index a7bd18c7a5..c439516b47 100644
--- a/web/app/components/workflow/nodes/loop-start/index.tsx
+++ b/web/app/components/workflow/nodes/loop-start/index.tsx
@@ -29,7 +29,7 @@ export const LoopStartNodeDumb = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="nodrag relative top-[21px] left-[17px] z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
+    <div className="nodrag relative left-[17px] top-[21px] z-11 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg">
       <Tooltip popupContent={t('blocks.loop-start', { ns: 'workflow' })} asChild={false}>
         <div className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500">
           <RiHome5Fill className="h-3 w-3 text-text-primary-on-surface" />
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
index cc254d324e..859be28614 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
@@ -30,15 +30,15 @@ const Item: FC<Props> = ({
         <div className="flex items-center">
           <Variable02 className="h-3.5 w-3.5 text-text-accent-secondary" />
           <div className="ml-1 text-[13px] font-medium text-text-primary">{payload.name}</div>
-          <div className="ml-2 text-xs font-normal text-text-tertiary capitalize">{payload.type}</div>
+          <div className="ml-2 text-xs font-normal capitalize text-text-tertiary">{payload.type}</div>
         </div>
         {payload.required && (
-          <div className="text-xs leading-4 font-normal text-text-tertiary uppercase">{t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}</div>
+          <div className="text-xs font-normal uppercase leading-4 text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}</div>
         )}
       </div>
-      <div className="mt-0.5 text-xs leading-[18px] font-normal text-text-tertiary">{payload.description}</div>
+      <div className="mt-0.5 text-xs font-normal leading-[18px] text-text-tertiary">{payload.description}</div>
       <div
-        className="absolute top-0 right-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg bg-linear-to-l from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent pr-1 group-hover:flex"
+        className="absolute right-0 top-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg bg-linear-to-l from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent pr-1 group-hover:flex"
       >
         <div
           className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index 4f276d3535..4aea84b5ad 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
 
   return (
     <div className="mt-2">
-      <div className="space-y-4 px-4 pt-2 pb-3">
+      <div className="space-y-4 px-4 pb-3 pt-2">
         {/* Webhook URL Section */}
         <Field title={t(`${i18nPrefix}.webhookUrl`, { ns: 'workflow' })}>
           <div className="space-y-1">
@@ -138,7 +138,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
                   </div>
                 </Tooltip>
                 {isPrivateOrLocalAddress(inputs.webhook_debug_url) && (
-                  <div className="mt-1 px-0 py-[2px] system-xs-regular text-text-warning">
+                  <div className="mt-1 px-0 py-[2px] text-text-warning system-xs-regular">
                     {t(`${i18nPrefix}.debugUrlPrivateAddressWarning`, { ns: 'workflow' })}
                   </div>
                 )}
@@ -197,7 +197,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
         <Field title={t(`${i18nPrefix}.responseConfiguration`, { ns: 'workflow' })}>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <label className="system-sm-medium text-text-tertiary">
+              <label className="text-text-tertiary system-sm-medium">
                 {t(`${i18nPrefix}.statusCode`, { ns: 'workflow' })}
               </label>
               <NumberField
@@ -212,19 +212,20 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
                     handleStatusCodeChange(normalizeStatusCode(value ?? DEFAULT_STATUS_CODE))
                 }}
               >
-                <NumberFieldGroup>
+                <NumberFieldGroup size="regular">
                   <NumberFieldInput
+                    size="regular"
                     className="h-8"
                   />
                   <NumberFieldControls>
-                    <NumberFieldIncrement />
-                    <NumberFieldDecrement />
+                    <NumberFieldIncrement size="regular" />
+                    <NumberFieldDecrement size="regular" />
                   </NumberFieldControls>
                 </NumberFieldGroup>
               </NumberField>
             </div>
             <div>
-              <label className="mb-2 block system-sm-medium text-text-tertiary">
+              <label className="mb-2 block text-text-tertiary system-sm-medium">
                 {t(`${i18nPrefix}.responseBody`, { ns: 'workflow' })}
               </label>
               <ParagraphInput
diff --git a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
index b984ca18d6..c5aeabbaaa 100644
--- a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
+++ b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
@@ -156,7 +156,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     await user.click(screen.getByRole('button'))
-    await user.click(screen.getAllByText('workflow.common.exportPNG')[0]!)
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0])
 
     await waitFor(() => {
       expect(mockToPng).toHaveBeenCalledTimes(1)
@@ -184,7 +184,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     fireEvent.click(screen.getByRole('button'))
-    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1]!)
+    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1])
     await act(async () => {
       await vi.advanceTimersByTimeAsync(300)
     })
@@ -209,7 +209,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     await user.click(screen.getByRole('button'))
-    await user.click(screen.getAllByText(label)[0]!)
+    await user.click(screen.getAllByText(label)[0])
 
     await waitFor(() => {
       expect(exporter).toHaveBeenCalledTimes(1)
@@ -227,7 +227,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     fireEvent.click(screen.getByRole('button'))
-    fireEvent.click(screen.getAllByText('workflow.common.exportSVG')[1]!)
+    fireEvent.click(screen.getAllByText('workflow.common.exportSVG')[1])
     await act(async () => {
       await vi.advanceTimersByTimeAsync(300)
     })
@@ -248,7 +248,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     await user.click(screen.getByRole('button'))
-    await user.click(screen.getAllByText('workflow.common.exportPNG')[0]!)
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0])
 
     expect(mockToPng).not.toHaveBeenCalled()
     expect(mockDownloadUrl).not.toHaveBeenCalled()
@@ -261,7 +261,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     await user.click(screen.getByRole('button'))
-    await user.click(screen.getAllByText('workflow.common.exportPNG')[0]!)
+    await user.click(screen.getAllByText('workflow.common.exportPNG')[0])
 
     expect(mockToPng).not.toHaveBeenCalled()
     expect(mockDownloadUrl).not.toHaveBeenCalled()
@@ -274,7 +274,7 @@ describe('MoreActions', () => {
 
     await user.click(screen.getByRole('button'))
     mockGetNodesReadOnly.mockReturnValue(true)
-    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0]!)
+    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0])
 
     expect(mockToJpeg).not.toHaveBeenCalled()
     expect(mockDownloadUrl).not.toHaveBeenCalled()
@@ -288,7 +288,7 @@ describe('MoreActions', () => {
     render(<MoreActions />)
 
     await user.click(screen.getByRole('button'))
-    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0]!)
+    await user.click(screen.getAllByText('workflow.common.exportJPEG')[0])
 
     await waitFor(() => {
       expect(consoleErrorSpy).toHaveBeenCalledWith('Export image failed:', expect.any(Error))
@@ -297,7 +297,7 @@ describe('MoreActions', () => {
 
     mockToPng.mockResolvedValueOnce('data:image/png;base64,current')
     fireEvent.click(screen.getByRole('button'))
-    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1]!)
+    fireEvent.click(screen.getAllByText('workflow.common.exportPNG')[1])
     await waitFor(() => {
       expect(screen.getByTestId('image-preview')).toBeInTheDocument()
     })
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 14118b36c9..25f962a519 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -1,8 +1,15 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  RiCheckLine,
+  RiFullscreenLine,
+  RiZoomInLine,
+  RiZoomOutLine,
+} from '@remixicon/react'
 import {
   Fragment,
   memo,
+  useCallback,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,14 +17,14 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
+
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Divider from '../../base/divider'
 import {
   useNodesSyncDraft,
   useWorkflowReadOnly,
@@ -26,6 +33,8 @@ import ShortcutsName from '../shortcuts-name'
 import TipPopup from './tip-popup'
 
 enum ZoomType {
+  zoomIn = 'zoomIn',
+  zoomOut = 'zoomOut',
   zoomToFit = 'zoomToFit',
   zoomTo25 = 'zoomTo25',
   zoomTo50 = 'zoomTo50',
@@ -72,7 +81,7 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
   } = useWorkflowReadOnly()
   const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
-  const zoomOptions = [
+  const ZOOM_IN_OUT_OPTIONS = [
     [
       {
         key: ZoomType.zoomTo200,
@@ -126,8 +135,6 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
     if (workflowReadOnly)
       return
 
-    setOpen(false)
-
     if (type === ZoomType.zoomToFit)
       fitView()
 
@@ -166,134 +173,154 @@ const ZoomInOut: FC<ZoomInOutProps> = ({
     handleSyncWorkflowDraft()
   }
 
-  return (
-    <div className={`
-      h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg
-      p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]
-      hover:bg-state-base-hover
-      ${workflowReadOnly && 'cursor-not-allowed! opacity-50'}
-    `}
-    >
-      <div className="flex h-8 w-[98px] items-center justify-between rounded-lg">
-        <TipPopup
-          title={t('operator.zoomOut', { ns: 'workflow' })}
-          shortcuts={['ctrl', '-']}
-        >
-          <div
-            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
-            onClick={(e) => {
-              if (zoom <= 0.25)
-                return
+  const handleTrigger = useCallback(() => {
+    if (getWorkflowReadOnly())
+      return
 
-              e.stopPropagation()
-              zoomOut()
-            }}
-          >
-            <span aria-hidden className="i-ri-zoom-out-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
-          </div>
-        </TipPopup>
-        <DropdownMenu
-          open={open}
-          onOpenChange={setOpen}
+    setOpen(v => !v)
+  }, [getWorkflowReadOnly])
+
+  return (
+    <PortalToFollowElem
+      placement="top-start"
+      open={open}
+      onOpenChange={setOpen}
+      offset={{
+        mainAxis: 4,
+        crossAxis: -2,
+      }}
+    >
+      <PortalToFollowElemTrigger asChild>
+        <div className={`
+          h-9 cursor-pointer rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg
+          p-0.5 text-[13px] shadow-lg backdrop-blur-[5px]
+          hover:bg-state-base-hover
+          ${workflowReadOnly && 'cursor-not-allowed! opacity-50'}
+        `}
         >
-          <DropdownMenuTrigger
-            disabled={getWorkflowReadOnly()}
-            className={cn(
-              'flex h-8 w-[34px] items-center justify-center rounded-lg system-sm-medium text-text-tertiary hover:bg-black/5 hover:text-text-secondary',
-              open && 'bg-black/5 text-text-secondary',
-            )}
+          <div className={cn(
+            'flex h-8 w-[98px] items-center justify-between rounded-lg',
+          )}
           >
-            {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
-            %
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            placement="top-start"
-            sideOffset={4}
-            alignOffset={-2}
-            popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
-          >
-            <div className="w-[192px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
-              {zoomOptions.map((options, groupIndex) => (
-                <Fragment key={options[0]!.key}>
-                  {groupIndex !== 0 && (
-                    <DropdownMenuSeparator className="my-0" />
-                  )}
-                  <div className="p-1">
-                    {options.map(option => (
-                      <DropdownMenuItem
+            <TipPopup
+              title={t('operator.zoomOut', { ns: 'workflow' })}
+              shortcuts={['ctrl', '-']}
+            >
+              <div
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom <= 0.25 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+                onClick={(e) => {
+                  if (zoom <= 0.25)
+                    return
+
+                  e.stopPropagation()
+                  zoomOut()
+                }}
+              >
+                <RiZoomOutLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+              </div>
+            </TipPopup>
+            <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>
+              {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
+              %
+            </div>
+            <TipPopup
+              title={t('operator.zoomIn', { ns: 'workflow' })}
+              shortcuts={['ctrl', '+']}
+            >
+              <div
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+                onClick={(e) => {
+                  if (zoom >= 2)
+                    return
+
+                  e.stopPropagation()
+                  zoomIn()
+                }}
+              >
+                <RiZoomInLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
+              </div>
+            </TipPopup>
+          </div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-[60]">
+        <div className="w-[192px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+          {
+            ZOOM_IN_OUT_OPTIONS.map((options, i) => (
+              <Fragment key={i}>
+                {
+                  i !== 0 && (
+                    <Divider className="m-0" />
+                  )
+                }
+                <div className="p-1">
+                  {
+                    options.map(option => (
+                      <div
                         key={option.key}
-                        className="justify-between px-3 py-1.5 system-md-regular text-text-secondary"
-                        disabled={option.key === ZoomType.toggleUserComments && isCommentMode}
+                        className={cn(
+                          'flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pr-2 pl-3 system-md-regular text-text-secondary hover:bg-state-base-hover',
+                          option.key === ZoomType.toggleUserComments && isCommentMode && 'cursor-not-allowed opacity-50',
+                        )}
                         onClick={() => handleZoom(option.key)}
                       >
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center space-x-2">
                           {option.key === ZoomType.toggleUserComments && showUserComments && (
-                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                            <RiCheckLine className="h-4 w-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleUserComments && !showUserComments && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <div className="h-4 w-4" />
                           )}
                           {option.key === ZoomType.toggleUserCursors && showUserCursors && (
-                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                            <RiCheckLine className="h-4 w-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleUserCursors && !showUserCursors && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <div className="h-4 w-4" />
                           )}
                           {option.key === ZoomType.toggleMiniMap && showMiniMap && (
-                            <span aria-hidden className="i-ri-check-line h-4 w-4 text-text-accent" />
+                            <RiCheckLine className="h-4 w-4 text-text-accent" />
                           )}
                           {option.key === ZoomType.toggleMiniMap && !showMiniMap && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <div className="h-4 w-4" />
                           )}
                           {option.key === ZoomType.zoomToFit && (
-                            <span aria-hidden className="i-ri-fullscreen-line h-4 w-4 text-text-tertiary" />
+                            <RiFullscreenLine className="h-4 w-4 text-text-tertiary" />
                           )}
                           {option.key !== ZoomType.toggleUserComments
                             && option.key !== ZoomType.toggleUserCursors
                             && option.key !== ZoomType.toggleMiniMap
                             && option.key !== ZoomType.zoomToFit && (
-                            <span aria-hidden className="h-4 w-4" />
+                            <div className="h-4 w-4" />
                           )}
                           <span>{option.text}</span>
                         </div>
                         <div className="flex items-center space-x-0.5">
-                          {option.key === ZoomType.zoomToFit && (
-                            <ShortcutsName keys={['ctrl', '1']} />
-                          )}
-                          {option.key === ZoomType.zoomTo50 && (
-                            <ShortcutsName keys={['shift', '5']} />
-                          )}
-                          {option.key === ZoomType.zoomTo100 && (
-                            <ShortcutsName keys={['shift', '1']} />
-                          )}
+                          {
+                            option.key === ZoomType.zoomToFit && (
+                              <ShortcutsName keys={['ctrl', '1']} />
+                            )
+                          }
+                          {
+                            option.key === ZoomType.zoomTo50 && (
+                              <ShortcutsName keys={['shift', '5']} />
+                            )
+                          }
+                          {
+                            option.key === ZoomType.zoomTo100 && (
+                              <ShortcutsName keys={['shift', '1']} />
+                            )
+                          }
                         </div>
-                      </DropdownMenuItem>
-                    ))}
-                  </div>
-                </Fragment>
-              ))}
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <TipPopup
-          title={t('operator.zoomIn', { ns: 'workflow' })}
-          shortcuts={['ctrl', '+']}
-        >
-          <div
-            className={`flex h-8 w-8 items-center justify-center rounded-lg ${zoom >= 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
-            onClick={(e) => {
-              if (zoom >= 2)
-                return
-
-              e.stopPropagation()
-              zoomIn()
-            }}
-          >
-            <span aria-hidden className="i-ri-zoom-in-line h-4 w-4 text-text-tertiary hover:text-text-secondary" />
-          </div>
-        </TipPopup>
-      </div>
-    </div>
+                      </div>
+                    ))
+                  }
+                </div>
+              </Fragment>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
index cd8e8468a5..e2ee83cb06 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -97,7 +97,7 @@ const ObjectValueItem: FC<Props> = ({
       {/* Key */}
       <div className="w-[120px] border-r border-gray-200">
         <input
-          className="block h-7 w-full appearance-none px-2 system-xs-regular text-text-secondary caret-primary-600 outline-hidden placeholder:system-xs-regular placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
+          className="block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-hidden system-xs-regular placeholder:text-components-input-text-placeholder placeholder:system-xs-regular hover:bg-state-base-hover focus:bg-components-input-bg-active"
           placeholder={t('chatVariable.modal.objectKey', { ns: 'workflow' }) || ''}
           value={list[index].key}
           onChange={handleKeyChange(index)}
@@ -116,7 +116,7 @@ const ObjectValueItem: FC<Props> = ({
       {/* Value */}
       <div className="relative w-[230px]">
         <input
-          className="block h-7 w-full appearance-none px-2 system-xs-regular text-text-secondary caret-primary-600 outline-hidden placeholder:system-xs-regular placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
+          className="block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-hidden system-xs-regular placeholder:text-components-input-text-placeholder placeholder:system-xs-regular hover:bg-state-base-hover focus:bg-components-input-bg-active"
           placeholder={t('chatVariable.modal.objectValue', { ns: 'workflow' }) || ''}
           value={list[index].value}
           onChange={handleValueChange(index)}
@@ -126,7 +126,7 @@ const ObjectValueItem: FC<Props> = ({
         />
         {list.length > 1 && !isFocus && (
           <RemoveButton
-            className="absolute top-0.5 right-1 z-10 hidden group-hover:block"
+            className="absolute right-1 top-0.5 z-10 hidden group-hover:block"
             onClick={handleItemRemove(index)}
           />
         )}
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
index b1d9ef6ec5..2c393dea77 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -20,11 +20,11 @@ const MenuItem: FC<MenuItemProps> = ({
 }) => {
   return (
     <DropdownMenuItem
-      variant={isDestructive ? 'destructive' : 'default'}
       className={cn(
         'justify-between px-2 py-1.5',
         isDestructive && 'data-highlighted:bg-state-destructive-hover',
       )}
+      destructive={isDestructive}
       onClick={(event) => {
         event.stopPropagation()
         onClick(item.key)
diff --git a/web/app/components/workflow/run/utils/format-log/iteration/index.ts b/web/app/components/workflow/run/utils/format-log/iteration/index.ts
index 91235dd0fc..5bd6b822e0 100644
--- a/web/app/components/workflow/run/utils/format-log/iteration/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/iteration/index.ts
@@ -27,7 +27,7 @@ export function addChildrenToIterationNode(iterationNode: NodeTracing, childrenN
     if (!details[runIndex])
       details[runIndex] = []
 
-    details[runIndex]!.push(item)
+    details[runIndex].push(item)
     lastResolvedIndex = runIndex
   })
   return {
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index c82f431ddf..25cc50d569 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -1,27 +1,36 @@
-import type { Node } from './types'
+import type { CreateSnippetDialogPayload } from './create-snippet-dialog'
+import type { Edge, Node } from './types'
+import type { SnippetCanvasData } from '@/models/snippet'
 import { produce } from 'immer'
 import {
   memo,
   useCallback,
   useEffect,
   useMemo,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStore as useReactFlowStore } from 'reactflow'
+import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
 import {
   ContextMenu,
   ContextMenuContent,
-  ContextMenuGroup,
   ContextMenuItem,
-  ContextMenuLabel,
   ContextMenuSeparator,
 } from '@/app/components/base/ui/context-menu'
+import { toast } from '@/app/components/base/ui/toast'
+import { useSnippetAndEvaluationPlanAccess } from '@/hooks/use-snippet-and-evaluation-plan-access'
+import { useRouter } from '@/next/navigation'
+import { consoleClient } from '@/service/client'
+import { useCreateSnippetMutation } from '@/service/use-snippets'
+import { cn } from '@langgenius/dify-ui/cn'
+import CreateSnippetDialog from './create-snippet-dialog'
 import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { useNodesInteractions, useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
 import { useWorkflowHistory, WorkflowHistoryEvent } from './hooks/use-workflow-history'
 import ShortcutsName from './shortcuts-name'
 import { useStore, useWorkflowStore } from './store'
+import { BlockEnum, TRIGGER_NODE_TYPES } from './types'
 
 const AlignType = {
   Bottom: 'bottom',
@@ -43,37 +52,31 @@ type AlignBounds = {
   maxY: number
 }
 
-type MenuItem = {
+type AlignMenuItem = {
   alignType: AlignTypeValue
   icon: string
   iconClassName?: string
   translationKey: string
 }
 
-type MenuSection = {
-  titleKey: string
-  items: MenuItem[]
+type ActionMenuItem = {
+  action: 'copy' | 'createSnippet' | 'delete' | 'duplicate'
+  disabled?: boolean
+  shortcutKeys?: string[]
+  translationKey: string
 }
 
-const menuSections: MenuSection[] = [
-  {
-    titleKey: 'operator.vertical',
-    items: [
-      { alignType: AlignType.Top, icon: 'i-ri-align-top', translationKey: 'operator.alignTop' },
-      { alignType: AlignType.Middle, icon: 'i-ri-align-center', iconClassName: 'rotate-90', translationKey: 'operator.alignMiddle' },
-      { alignType: AlignType.Bottom, icon: 'i-ri-align-bottom', translationKey: 'operator.alignBottom' },
-      { alignType: AlignType.DistributeVertical, icon: 'i-ri-align-justify', iconClassName: 'rotate-90', translationKey: 'operator.distributeVertical' },
-    ],
-  },
-  {
-    titleKey: 'operator.horizontal',
-    items: [
-      { alignType: AlignType.Left, icon: 'i-ri-align-left', translationKey: 'operator.alignLeft' },
-      { alignType: AlignType.Center, icon: 'i-ri-align-center', translationKey: 'operator.alignCenter' },
-      { alignType: AlignType.Right, icon: 'i-ri-align-right', translationKey: 'operator.alignRight' },
-      { alignType: AlignType.DistributeHorizontal, icon: 'i-ri-align-justify', translationKey: 'operator.distributeHorizontal' },
-    ],
-  },
+const DEFAULT_SNIPPET_VIEWPORT: SnippetCanvasData['viewport'] = { x: 0, y: 0, zoom: 1 }
+
+const alignMenuItems: AlignMenuItem[] = [
+  { alignType: AlignType.Left, icon: 'i-ri-align-item-left-line', translationKey: 'operator.alignLeft' },
+  { alignType: AlignType.Center, icon: 'i-ri-align-item-horizontal-center-line', translationKey: 'operator.alignCenter' },
+  { alignType: AlignType.Right, icon: 'i-ri-align-item-right-line', translationKey: 'operator.alignRight' },
+  { alignType: AlignType.Top, icon: 'i-ri-align-item-top-line', translationKey: 'operator.alignTop' },
+  { alignType: AlignType.Middle, icon: 'i-ri-align-item-vertical-center-line', iconClassName: 'rotate-90', translationKey: 'operator.alignMiddle' },
+  { alignType: AlignType.Bottom, icon: 'i-ri-align-item-bottom-line', translationKey: 'operator.alignBottom' },
+  { alignType: AlignType.DistributeHorizontal, icon: 'i-ri-align-justify-line', translationKey: 'operator.distributeHorizontal' },
+  { alignType: AlignType.DistributeVertical, icon: 'i-ri-align-justify-line', iconClassName: 'rotate-90', translationKey: 'operator.distributeVertical' },
 ]
 
 const getAlignableNodes = (nodes: Node[], selectedNodes: Node[]) => {
@@ -182,8 +185,8 @@ const distributeNodes = (
   const lastNode = sortedNodes[sortedNodes.length - 1]
 
   const totalGap = isHorizontal
-    ? lastNode!.position.x + (lastNode!.width || 0) - firstNode!.position.x
-    : lastNode!.position.y + (lastNode!.height || 0) - firstNode!.position.y
+    ? lastNode.position.x + (lastNode.width || 0) - firstNode.position.x
+    : lastNode.position.y + (lastNode.height || 0) - firstNode.position.y
 
   const fixedSpace = sortedNodes.reduce((sum, node) =>
     sum + (isHorizontal ? (node.width || 0) : (node.height || 0)), 0)
@@ -194,12 +197,12 @@ const distributeNodes = (
 
   return produce(nodes, (draft) => {
     let currentPosition = isHorizontal
-      ? firstNode!.position.x + (firstNode!.width || 0)
-      : firstNode!.position.y + (firstNode!.height || 0)
+      ? firstNode.position.x + (firstNode.width || 0)
+      : firstNode.position.y + (firstNode.height || 0)
 
     for (let index = 1; index < sortedNodes.length - 1; index++) {
       const nodeToAlign = sortedNodes[index]
-      const currentNode = draft.find(node => node.id === nodeToAlign!.id)
+      const currentNode = draft.find(node => node.id === nodeToAlign.id)
       if (!currentNode)
         continue
 
@@ -208,25 +211,105 @@ const distributeNodes = (
         currentNode.position.x = nextX
         if (currentNode.positionAbsolute)
           currentNode.positionAbsolute.x = nextX
-        currentPosition = nextX + (nodeToAlign!.width || 0)
+        currentPosition = nextX + (nodeToAlign.width || 0)
       }
       else {
         const nextY = currentPosition + spacing
         currentNode.position.y = nextY
         if (currentNode.positionAbsolute)
           currentNode.positionAbsolute.y = nextY
-        currentPosition = nextY + (nodeToAlign!.height || 0)
+        currentPosition = nextY + (nodeToAlign.height || 0)
       }
     }
   })
 }
 
+const getSelectedSnippetGraph = (
+  nodes: Node[],
+  edges: Edge[],
+  selectedNodes: Node[],
+): SnippetCanvasData => {
+  const includedNodeIds = new Set(selectedNodes.map(node => node.id))
+
+  let shouldExpand = true
+  while (shouldExpand) {
+    shouldExpand = false
+
+    nodes.forEach((node) => {
+      if (!includedNodeIds.has(node.id))
+        return
+
+      if (node.parentId && !includedNodeIds.has(node.parentId)) {
+        includedNodeIds.add(node.parentId)
+        shouldExpand = true
+      }
+
+      node.data._children?.forEach((child) => {
+        if (!includedNodeIds.has(child.nodeId)) {
+          includedNodeIds.add(child.nodeId)
+          shouldExpand = true
+        }
+      })
+    })
+  }
+
+  const rootNodes = nodes.filter(node => includedNodeIds.has(node.id) && (!node.parentId || !includedNodeIds.has(node.parentId)))
+  const minRootX = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.x)) : 0
+  const minRootY = rootNodes.length ? Math.min(...rootNodes.map(node => node.position.y)) : 0
+
+  return {
+    nodes: nodes
+      .filter(node => includedNodeIds.has(node.id))
+      .map((node) => {
+        const isRootNode = !node.parentId || !includedNodeIds.has(node.parentId)
+        const nextPosition = isRootNode
+          ? { x: node.position.x - minRootX, y: node.position.y - minRootY }
+          : node.position
+
+        return {
+          ...node,
+          position: nextPosition,
+          positionAbsolute: node.positionAbsolute
+            ? (isRootNode
+                ? {
+                    x: node.positionAbsolute.x - minRootX,
+                    y: node.positionAbsolute.y - minRootY,
+                  }
+                : node.positionAbsolute)
+            : undefined,
+          selected: false,
+          data: {
+            ...node.data,
+            selected: false,
+            _children: node.data._children?.filter(child => includedNodeIds.has(child.nodeId)),
+          },
+        }
+      }),
+    edges: edges
+      .filter(edge => includedNodeIds.has(edge.source) && includedNodeIds.has(edge.target))
+      .map(edge => ({
+        ...edge,
+        selected: false,
+      })),
+    viewport: DEFAULT_SNIPPET_VIEWPORT,
+  }
+}
+
 const SelectionContextmenu = () => {
   const { t } = useTranslation()
+  const { push } = useRouter()
+  const { canAccess: canAccessSnippetsAndEvaluation } = useSnippetAndEvaluationPlanAccess()
+  const createSnippetMutation = useCreateSnippetMutation()
   const { getNodesReadOnly } = useNodesReadOnly()
-  const { handleSelectionContextmenuCancel } = useSelectionInteractions()
   const { handleNodesCopy, handleNodesDelete, handleNodesDuplicate } = useNodesInteractions()
+  const { handleSelectionContextmenuCancel } = useSelectionInteractions()
   const selectionMenu = useStore(s => s.selectionMenu)
+  const [isCreateSnippetDialogOpen, setIsCreateSnippetDialogOpen] = useState(false)
+  const [isCreatingSnippet, setIsCreatingSnippet] = useState(false)
+  const [selectedGraphSnapshot, setSelectedGraphSnapshot] = useState<SnippetCanvasData | undefined>()
+
+  // Access React Flow methods
+  const store = useStoreApi()
 
   // Access React Flow methods
   const workflowStore = useWorkflowStore()
@@ -258,20 +341,127 @@ const SelectionContextmenu = () => {
       handleSelectionContextmenuCancel()
   }, [selectionMenu, selectedNodes.length, handleSelectionContextmenuCancel])
 
-  const handleCopyNodes = useCallback(() => {
-    handleNodesCopy()
-    handleSelectionContextmenuCancel()
-  }, [handleNodesCopy, handleSelectionContextmenuCancel])
+  const isAddToSnippetDisabled = useMemo(() => {
+    return selectedNodes.some(node =>
+      node.data.type === BlockEnum.Start
+      || node.data.type === BlockEnum.End
+      || node.data.type === BlockEnum.HumanInput
+      || TRIGGER_NODE_TYPES.includes(node.data.type as typeof TRIGGER_NODE_TYPES[number]))
+  }, [selectedNodes])
 
-  const handleDuplicateNodes = useCallback(() => {
-    handleNodesDuplicate()
-    handleSelectionContextmenuCancel()
-  }, [handleNodesDuplicate, handleSelectionContextmenuCancel])
+  const handleOpenCreateSnippetDialog = useCallback(() => {
+    if (!canAccessSnippetsAndEvaluation || isAddToSnippetDisabled)
+      return
 
-  const handleDeleteNodes = useCallback(() => {
-    handleNodesDelete()
+    const nodes = store.getState().getNodes()
+    const { edges } = store.getState()
+
+    setSelectedGraphSnapshot(getSelectedSnippetGraph(nodes, edges, selectedNodes))
+    setIsCreateSnippetDialogOpen(true)
     handleSelectionContextmenuCancel()
-  }, [handleNodesDelete, handleSelectionContextmenuCancel])
+  }, [canAccessSnippetsAndEvaluation, handleSelectionContextmenuCancel, isAddToSnippetDisabled, selectedNodes, store])
+
+  const handleCloseCreateSnippetDialog = useCallback(() => {
+    setIsCreateSnippetDialogOpen(false)
+    setSelectedGraphSnapshot(undefined)
+  }, [])
+
+  const handleCreateSnippet = useCallback(async ({
+    name,
+    description,
+    icon,
+    graph,
+  }: CreateSnippetDialogPayload) => {
+    setIsCreatingSnippet(true)
+
+    try {
+      const snippet = await createSnippetMutation.mutateAsync({
+        body: {
+          name,
+          description: description || undefined,
+          icon_info: {
+            icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+            icon_type: icon.type,
+            icon_background: icon.type === 'emoji' ? icon.background : undefined,
+            icon_url: icon.type === 'image' ? icon.url : undefined,
+          },
+        },
+      })
+
+      await consoleClient.snippets.syncDraftWorkflow({
+        params: { snippetId: snippet.id },
+        body: { graph },
+      })
+
+      toast.success(t('snippet.createSuccess', { ns: 'workflow' }))
+      handleCloseCreateSnippetDialog()
+      push(`/snippets/${snippet.id}/orchestrate`)
+    }
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('createFailed', { ns: 'snippet' }))
+    }
+    finally {
+      setIsCreatingSnippet(false)
+    }
+  }, [createSnippetMutation, handleCloseCreateSnippetDialog, push, t])
+
+  const menuActions = useMemo<ActionMenuItem[]>(() => {
+    const nextActions: ActionMenuItem[] = []
+
+    if (canAccessSnippetsAndEvaluation) {
+      nextActions.push({
+        action: 'createSnippet',
+        disabled: isAddToSnippetDisabled,
+        translationKey: 'snippet.addToSnippet',
+      })
+    }
+
+    nextActions.push(
+      {
+        action: 'copy',
+        shortcutKeys: ['ctrl', 'c'],
+        translationKey: 'common.copy',
+      },
+      {
+        action: 'duplicate',
+        shortcutKeys: ['ctrl', 'd'],
+        translationKey: 'common.duplicate',
+      },
+      {
+        action: 'delete',
+        shortcutKeys: ['del'],
+        translationKey: 'operation.delete',
+      },
+    )
+
+    return nextActions
+  }, [canAccessSnippetsAndEvaluation, isAddToSnippetDisabled])
+
+  const getActionLabel = useCallback((translationKey: string) => {
+    if (translationKey === 'operation.delete')
+      return t(translationKey, { ns: 'common', defaultValue: translationKey })
+
+    return t(translationKey, { ns: 'workflow', defaultValue: translationKey })
+  }, [t])
+
+  const handleMenuAction = useCallback((action: ActionMenuItem['action']) => {
+    switch (action) {
+      case 'createSnippet':
+        handleOpenCreateSnippetDialog()
+        return
+      case 'copy':
+        handleSelectionContextmenuCancel()
+        handleNodesCopy()
+        return
+      case 'duplicate':
+        handleSelectionContextmenuCancel()
+        handleNodesDuplicate()
+        return
+      case 'delete':
+        handleSelectionContextmenuCancel()
+        handleNodesDelete()
+    }
+  }, [handleNodesCopy, handleNodesDelete, handleNodesDuplicate, handleOpenCreateSnippetDialog, handleSelectionContextmenuCancel])
 
   const handleAlignNodes = useCallback((alignType: AlignTypeValue) => {
     if (getNodesReadOnly() || selectedNodes.length <= 1) {
@@ -365,73 +555,74 @@ const SelectionContextmenu = () => {
     }
   }, [collaborativeWorkflow, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel])
 
-  if (!selectionMenu)
+  if ((!selectionMenu || !anchor) && !isCreateSnippetDialogOpen)
     return null
 
   return (
-    <ContextMenu
-      open
-      onOpenChange={(open) => {
-        if (!open)
-          handleSelectionContextmenuCancel()
-      }}
-    >
-      <ContextMenuContent
-        popupClassName="w-[240px]"
-        positionerProps={anchor ? { anchor } : undefined}
+    <div data-testid="selection-contextmenu">
+      <ContextMenu
+        open
+        onOpenChange={(open) => {
+          if (!open)
+            handleSelectionContextmenuCancel()
+        }}
       >
-        <ContextMenuGroup>
-          <ContextMenuItem
-            className="justify-between px-3 text-text-secondary"
-            data-testid="selection-contextmenu-item-copy"
-            onClick={handleCopyNodes}
-          >
-            <span>{t('common.copy', { defaultValue: 'common.copy', ns: 'workflow' })}</span>
-            <ShortcutsName keys={['ctrl', 'c']} />
-          </ContextMenuItem>
-          <ContextMenuItem
-            className="justify-between px-3 text-text-secondary"
-            data-testid="selection-contextmenu-item-duplicate"
-            onClick={handleDuplicateNodes}
-          >
-            <span>{t('common.duplicate', { defaultValue: 'common.duplicate', ns: 'workflow' })}</span>
-            <ShortcutsName keys={['ctrl', 'd']} />
-          </ContextMenuItem>
-        </ContextMenuGroup>
-        <ContextMenuSeparator />
-        <ContextMenuGroup>
-          <ContextMenuItem
-            className="justify-between px-3 text-text-secondary data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive"
-            data-testid="selection-contextmenu-item-delete"
-            onClick={handleDeleteNodes}
-          >
-            <span>{t('operation.delete', { defaultValue: 'operation.delete', ns: 'common' })}</span>
-            <ShortcutsName keys={['del']} />
-          </ContextMenuItem>
-        </ContextMenuGroup>
-        <ContextMenuSeparator />
-        {menuSections.map((section, sectionIndex) => (
-          <ContextMenuGroup key={section.titleKey}>
-            {sectionIndex > 0 && <ContextMenuSeparator />}
-            <ContextMenuLabel>
-              {t(section.titleKey, { defaultValue: section.titleKey, ns: 'workflow' })}
-            </ContextMenuLabel>
-            {section.items.map((item) => {
-              return (
-                <ContextMenuItem
-                  key={item.alignType}
-                  data-testid={`selection-contextmenu-item-${item.alignType}`}
-                  onClick={() => handleAlignNodes(item.alignType)}
-                >
-                  <span aria-hidden className={`${item.icon} h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
-                  {t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
-                </ContextMenuItem>
-              )
-            })}
-          </ContextMenuGroup>
-        ))}
-      </ContextMenuContent>
-    </ContextMenu>
+        <ContextMenuContent
+          positionerProps={anchor ? { anchor } : undefined}
+          popupClassName="w-[240px] py-0"
+        >
+          <div className="p-1">
+            {menuActions.map(item => (
+              <ContextMenuItem
+                key={item.action}
+                data-testid={`selection-contextmenu-item-${item.action}`}
+                disabled={item.disabled}
+                className={cn(
+                  'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] leading-5 font-normal text-text-secondary',
+                  item.action === 'delete' && 'data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive',
+                )}
+                onClick={() => handleMenuAction(item.action)}
+              >
+                <span>{getActionLabel(item.translationKey)}</span>
+                {item.shortcutKeys && (
+                  <ShortcutsName
+                    keys={item.shortcutKeys}
+                    textColor="secondary"
+                  />
+                )}
+              </ContextMenuItem>
+            ))}
+          </div>
+          <ContextMenuSeparator className="my-0" />
+          <div className="p-1.5">
+            <div className="flex items-center">
+              {alignMenuItems.map((item) => {
+                return (
+                  <ContextMenuItem
+                    key={item.alignType}
+                    aria-label={t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
+                    className="mx-0 h-8 w-8 justify-center rounded-md px-0 text-text-tertiary data-highlighted:bg-state-base-hover data-highlighted:text-text-secondary"
+                    data-testid={`selection-contextmenu-item-${item.alignType}`}
+                    onClick={() => handleAlignNodes(item.alignType)}
+                  >
+                    <span aria-hidden className={`${item.icon} h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
+                  </ContextMenuItem>
+                )
+              })}
+            </div>
+          </div>
+        </ContextMenuContent>
+      </ContextMenu>
+      {isCreateSnippetDialogOpen && (
+        <CreateSnippetDialog
+          isOpen={isCreateSnippetDialogOpen}
+          selectedGraph={selectedGraphSnapshot}
+          isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
+          onClose={handleCloseCreateSnippetDialog}
+          onConfirm={handleCreateSnippet}
+        />
+      )}
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/utils/evaluation-workflow.ts b/web/app/components/workflow/utils/evaluation-workflow.ts
new file mode 100644
index 0000000000..40d4b2fb65
--- /dev/null
+++ b/web/app/components/workflow/utils/evaluation-workflow.ts
@@ -0,0 +1,20 @@
+import { AppTypeEnum } from '@/types/app'
+import { BlockEnum, TRIGGER_NODE_TYPES } from '../types'
+
+const EVALUATION_WORKFLOW_RESTRICTED_NODE_TYPES = new Set<string>([
+  BlockEnum.HumanInput,
+  ...TRIGGER_NODE_TYPES,
+])
+
+export const isEvaluationWorkflow = (appType?: string) => appType === AppTypeEnum.EVALUATION
+
+export const isEvaluationWorkflowRestrictedNodeType = (nodeType?: string) => {
+  if (!nodeType)
+    return false
+
+  return EVALUATION_WORKFLOW_RESTRICTED_NODE_TYPES.has(nodeType)
+}
+
+export const filterEvaluationWorkflowRestrictedBlockTypes = (blockTypes: BlockEnum[]) => {
+  return blockTypes.filter(blockType => !isEvaluationWorkflowRestrictedNodeType(blockType))
+}
diff --git a/web/contract/console/apps.ts b/web/contract/console/apps.ts
index ff4f5096b2..54db29db19 100644
--- a/web/contract/console/apps.ts
+++ b/web/contract/console/apps.ts
@@ -1,4 +1,5 @@
 import type { WorkflowOnlineUsersResponse } from '@/models/app'
+import type { WorkflowTypeConversionTarget } from '@/types/workflow'
 import { type } from '@orpc/contract'
 import { base } from '../base'
 
@@ -14,6 +15,20 @@ export const appDeleteContract = base
   }>())
   .output(type<unknown>())
 
+export const appWorkflowTypeConvertContract = base
+  .route({
+    path: '/apps/{appId}/workflows/convert-type',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+    query: {
+      target_type: WorkflowTypeConversionTarget
+    }
+  }>())
+  .output(type<unknown>())
 export const workflowOnlineUsersContract = base
   .route({
     path: '/apps/workflows/online-users',
diff --git a/web/contract/console/evaluation.ts b/web/contract/console/evaluation.ts
new file mode 100644
index 0000000000..5daa973916
--- /dev/null
+++ b/web/contract/console/evaluation.ts
@@ -0,0 +1,334 @@
+import type {
+  AvailableEvaluationWorkflowsResponse,
+  EvaluationConfig,
+  EvaluationConfigData,
+  EvaluationFileInfo,
+  EvaluationLogsResponse,
+  EvaluationMetricsListResponse,
+  EvaluationMetricsMapResponse,
+  EvaluationNodeInfoRequest,
+  EvaluationNodeInfoResponse,
+  EvaluationRun,
+  EvaluationRunDetailResponse,
+  EvaluationRunRequest,
+  EvaluationTargetType,
+  EvaluationVersionDetailResponse,
+  EvaluationWorkflowAssociatedTargetsResponse,
+} from '@/types/evaluation'
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export const datasetEvaluationTemplateDownloadContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/template/download',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const datasetEvaluationConfigContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const saveDatasetEvaluationConfigContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation',
+    method: 'PUT',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+    body: EvaluationConfigData
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const startDatasetEvaluationRunContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+    body: EvaluationRunRequest
+  }>())
+  .output(type<EvaluationRun>())
+
+export const datasetEvaluationLogsContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/logs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationLogsResponse>())
+
+export const datasetEvaluationRunDetailContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/runs/{runId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+      runId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationRunDetailResponse>())
+
+export const cancelDatasetEvaluationRunContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/runs/{runId}/cancel',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+      runId: string
+    }
+  }>())
+  .output(type<EvaluationRun>())
+
+export const datasetEvaluationMetricsContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/metrics',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+    }
+  }>())
+  .output(type<EvaluationMetricsListResponse>())
+
+export const datasetEvaluationFileContract = base
+  .route({
+    path: '/datasets/{datasetId}/evaluation/files/{fileId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      datasetId: string
+      fileId: string
+    }
+  }>())
+  .output(type<EvaluationFileInfo>())
+
+export const evaluationTemplateDownloadContract = base
+  .route({
+    path: '/{targetType}/{targetId}/dataset-template/download',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const evaluationConfigContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const saveEvaluationConfigContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation',
+    method: 'PUT',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    body: EvaluationConfigData
+  }>())
+  .output(type<EvaluationConfig>())
+
+export const evaluationLogsContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/logs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationLogsResponse>())
+
+export const startEvaluationRunContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    body: EvaluationRunRequest
+  }>())
+  .output(type<EvaluationRun>())
+
+export const evaluationRunDetailContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/runs/{runId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+      runId: string
+    }
+    query: {
+      page?: number
+      page_size?: number
+    }
+  }>())
+  .output(type<EvaluationRunDetailResponse>())
+
+export const cancelEvaluationRunContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/runs/{runId}/cancel',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+      runId: string
+    }
+  }>())
+  .output(type<EvaluationRun>())
+
+export const evaluationMetricsContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/metrics',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+  }>())
+  .output(type<EvaluationMetricsMapResponse>())
+
+export const evaluationNodeInfoContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/node-info',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    body: EvaluationNodeInfoRequest
+  }>())
+  .output(type<EvaluationNodeInfoResponse>())
+
+export const availableEvaluationMetricsContract = base
+  .route({
+    path: '/evaluation/available-metrics',
+    method: 'GET',
+  })
+  .output(type<EvaluationMetricsListResponse>())
+
+export const availableEvaluationWorkflowsContract = base
+  .route({
+    path: '/workspaces/current/available-evaluation-workflows',
+    method: 'GET',
+  })
+  .input(type<{
+    query: {
+      page?: number
+      limit?: number
+      keyword?: string
+      user_id?: string
+    }
+  }>())
+  .output(type<AvailableEvaluationWorkflowsResponse>())
+
+export const evaluationWorkflowAssociatedTargetsContract = base
+  .route({
+    path: '/workspaces/current/evaluation-workflows/{workflowId}/associated-targets',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      workflowId: string
+    }
+  }>())
+  .output(type<EvaluationWorkflowAssociatedTargetsResponse>())
+
+export const evaluationFileContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/files/{fileId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+      fileId: string
+    }
+  }>())
+  .output(type<EvaluationFileInfo>())
+
+export const evaluationVersionDetailContract = base
+  .route({
+    path: '/{targetType}/{targetId}/evaluation/version',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      targetType: EvaluationTargetType
+      targetId: string
+    }
+    query: {
+      version: string
+    }
+  }>())
+  .output(type<EvaluationVersionDetailResponse>())
diff --git a/web/contract/console/snippets.ts b/web/contract/console/snippets.ts
new file mode 100644
index 0000000000..7fd096aa3a
--- /dev/null
+++ b/web/contract/console/snippets.ts
@@ -0,0 +1,343 @@
+import type {
+  CreateSnippetPayload,
+  IncrementSnippetUseCountResponse,
+  PublishSnippetWorkflowResponse,
+  Snippet,
+  SnippetDraftConfig,
+  SnippetDraftNodeRunPayload,
+  SnippetDraftRunPayload,
+  SnippetDraftSyncPayload,
+  SnippetDraftSyncResponse,
+  SnippetImportPayload,
+  SnippetIterationNodeRunPayload,
+  SnippetListResponse,
+  SnippetLoopNodeRunPayload,
+  SnippetWorkflow,
+  UpdateSnippetPayload,
+  WorkflowNodeExecution,
+  WorkflowNodeExecutionListResponse,
+  WorkflowRunDetail,
+  WorkflowRunPagination,
+} from '@/types/snippet'
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export const listCustomizedSnippetsContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets',
+    method: 'GET',
+  })
+  .input(type<{
+    query: {
+      page: number
+      limit: number
+      keyword?: string
+      creator_id?: string
+      is_published?: boolean
+    }
+  }>())
+  .output(type<SnippetListResponse>())
+
+export const createCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets',
+    method: 'POST',
+  })
+  .input(type<{
+    body: CreateSnippetPayload
+  }>())
+  .output(type<Snippet>())
+
+export const getCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<Snippet>())
+
+export const updateCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}',
+    method: 'PATCH',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    body: UpdateSnippetPayload
+  }>())
+  .output(type<Snippet>())
+
+export const deleteCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}',
+    method: 'DELETE',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const exportCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}/export',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    query: {
+      include_secret?: 'true' | 'false'
+    }
+  }>())
+  .output(type<string>())
+
+export const importCustomizedSnippetContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/imports',
+    method: 'POST',
+  })
+  .input(type<{
+    body: SnippetImportPayload
+  }>())
+  .output(type<unknown>())
+
+export const confirmSnippetImportContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/imports/{importId}/confirm',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      importId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const checkSnippetDependenciesContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}/check-dependencies',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const incrementSnippetUseCountContract = base
+  .route({
+    path: '/workspaces/current/customized-snippets/{snippetId}/use-count/increment',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<IncrementSnippetUseCountResponse>())
+
+export const getSnippetDraftWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<SnippetWorkflow>())
+
+export const syncSnippetDraftWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    body: SnippetDraftSyncPayload
+  }>())
+  .output(type<SnippetDraftSyncResponse>())
+
+export const getSnippetDraftConfigContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/config',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<SnippetDraftConfig>())
+
+export const getSnippetPublishedWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/publish',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<SnippetWorkflow>())
+
+export const publishSnippetWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/publish',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<PublishSnippetWorkflowResponse>())
+
+export const getSnippetDefaultBlockConfigsContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/default-workflow-block-configs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+  }>())
+  .output(type<unknown>())
+
+export const listSnippetWorkflowRunsContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    query: {
+      last_id?: string
+      limit?: number
+    }
+  }>())
+  .output(type<WorkflowRunPagination>())
+
+export const getSnippetWorkflowRunDetailContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs/{runId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      runId: string
+    }
+  }>())
+  .output(type<WorkflowRunDetail>())
+
+export const listSnippetWorkflowRunNodeExecutionsContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs/{runId}/node-executions',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      runId: string
+    }
+  }>())
+  .output(type<WorkflowNodeExecutionListResponse>())
+
+export const runSnippetDraftNodeContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/nodes/{nodeId}/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+    body: SnippetDraftNodeRunPayload
+  }>())
+  .output(type<WorkflowNodeExecution>())
+
+export const getSnippetDraftNodeLastRunContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/nodes/{nodeId}/last-run',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+  }>())
+  .output(type<WorkflowNodeExecution>())
+
+export const runSnippetDraftIterationNodeContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/iteration/nodes/{nodeId}/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+    body: SnippetIterationNodeRunPayload
+  }>())
+  .output(type<unknown>())
+
+export const runSnippetDraftLoopNodeContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/loop/nodes/{nodeId}/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      nodeId: string
+    }
+    body: SnippetLoopNodeRunPayload
+  }>())
+  .output(type<unknown>())
+
+export const runSnippetDraftWorkflowContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflows/draft/run',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+    }
+    body: SnippetDraftRunPayload
+  }>())
+  .output(type<unknown>())
+
+export const stopSnippetWorkflowTaskContract = base
+  .route({
+    path: '/snippets/{snippetId}/workflow-runs/tasks/{taskId}/stop',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      snippetId: string
+      taskId: string
+    }
+  }>())
+  .output(type<unknown>())
diff --git a/web/contract/router.ts b/web/contract/router.ts
index 45f514a820..f165729e54 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -1,7 +1,32 @@
 import type { InferContractRouterInputs } from '@orpc/contract'
 import { accountAvatarContract } from './console/account'
-import { appDeleteContract, workflowOnlineUsersContract } from './console/apps'
+import { appDeleteContract, appWorkflowTypeConvertContract, workflowOnlineUsersContract } from './console/apps'
 import { bindPartnerStackContract, invoicesContract } from './console/billing'
+import {
+  availableEvaluationMetricsContract,
+  availableEvaluationWorkflowsContract,
+  cancelDatasetEvaluationRunContract,
+  cancelEvaluationRunContract,
+  datasetEvaluationConfigContract,
+  datasetEvaluationFileContract,
+  datasetEvaluationLogsContract,
+  datasetEvaluationMetricsContract,
+  datasetEvaluationRunDetailContract,
+  datasetEvaluationTemplateDownloadContract,
+  evaluationConfigContract,
+  evaluationFileContract,
+  evaluationLogsContract,
+  evaluationMetricsContract,
+  evaluationNodeInfoContract,
+  evaluationRunDetailContract,
+  evaluationTemplateDownloadContract,
+  evaluationVersionDetailContract,
+  evaluationWorkflowAssociatedTargetsContract,
+  saveDatasetEvaluationConfigContract,
+  saveEvaluationConfigContract,
+  startDatasetEvaluationRunContract,
+  startEvaluationRunContract,
+} from './console/evaluation'
 import {
   exploreAppDetailContract,
   exploreAppsContract,
@@ -16,6 +41,33 @@ import {
 import { changePreferredProviderTypeContract, modelProvidersModelsContract } from './console/model-providers'
 import { notificationContract, notificationDismissContract } from './console/notification'
 import { pluginCheckInstalledContract, pluginLatestVersionsContract } from './console/plugins'
+import {
+  checkSnippetDependenciesContract,
+  confirmSnippetImportContract,
+  createCustomizedSnippetContract,
+  deleteCustomizedSnippetContract,
+  exportCustomizedSnippetContract,
+  getCustomizedSnippetContract,
+  getSnippetDefaultBlockConfigsContract,
+  getSnippetDraftConfigContract,
+  getSnippetDraftNodeLastRunContract,
+  getSnippetDraftWorkflowContract,
+  getSnippetPublishedWorkflowContract,
+  getSnippetWorkflowRunDetailContract,
+  importCustomizedSnippetContract,
+  incrementSnippetUseCountContract,
+  listCustomizedSnippetsContract,
+  listSnippetWorkflowRunNodeExecutionsContract,
+  listSnippetWorkflowRunsContract,
+  publishSnippetWorkflowContract,
+  runSnippetDraftIterationNodeContract,
+  runSnippetDraftLoopNodeContract,
+  runSnippetDraftNodeContract,
+  runSnippetDraftWorkflowContract,
+  stopSnippetWorkflowTaskContract,
+  syncSnippetDraftWorkflowContract,
+  updateCustomizedSnippetContract,
+} from './console/snippets'
 import { systemFeaturesContract } from './console/system'
 import {
   triggerOAuthConfigContract,
@@ -59,6 +111,7 @@ export const consoleRouterContract = {
   systemFeatures: systemFeaturesContract,
   apps: {
     deleteApp: appDeleteContract,
+    convertWorkflowType: appWorkflowTypeConvertContract,
     workflowOnlineUsers: workflowOnlineUsersContract,
   },
   explore: {
@@ -82,10 +135,64 @@ export const consoleRouterContract = {
     models: modelProvidersModelsContract,
     changePreferredProviderType: changePreferredProviderTypeContract,
   },
+  evaluation: {
+    templateDownload: evaluationTemplateDownloadContract,
+    config: evaluationConfigContract,
+    saveConfig: saveEvaluationConfigContract,
+    logs: evaluationLogsContract,
+    startRun: startEvaluationRunContract,
+    runDetail: evaluationRunDetailContract,
+    cancelRun: cancelEvaluationRunContract,
+    metrics: evaluationMetricsContract,
+    nodeInfo: evaluationNodeInfoContract,
+    availableMetrics: availableEvaluationMetricsContract,
+    availableWorkflows: availableEvaluationWorkflowsContract,
+    associatedTargets: evaluationWorkflowAssociatedTargetsContract,
+    file: evaluationFileContract,
+    versionDetail: evaluationVersionDetailContract,
+  },
+  datasetEvaluation: {
+    templateDownload: datasetEvaluationTemplateDownloadContract,
+    config: datasetEvaluationConfigContract,
+    saveConfig: saveDatasetEvaluationConfigContract,
+    startRun: startDatasetEvaluationRunContract,
+    logs: datasetEvaluationLogsContract,
+    runDetail: datasetEvaluationRunDetailContract,
+    cancelRun: cancelDatasetEvaluationRunContract,
+    metrics: datasetEvaluationMetricsContract,
+    file: datasetEvaluationFileContract,
+  },
   plugins: {
     checkInstalled: pluginCheckInstalledContract,
     latestVersions: pluginLatestVersionsContract,
   },
+  snippets: {
+    list: listCustomizedSnippetsContract,
+    create: createCustomizedSnippetContract,
+    detail: getCustomizedSnippetContract,
+    update: updateCustomizedSnippetContract,
+    delete: deleteCustomizedSnippetContract,
+    export: exportCustomizedSnippetContract,
+    import: importCustomizedSnippetContract,
+    confirmImport: confirmSnippetImportContract,
+    checkDependencies: checkSnippetDependenciesContract,
+    incrementUseCount: incrementSnippetUseCountContract,
+    draftWorkflow: getSnippetDraftWorkflowContract,
+    syncDraftWorkflow: syncSnippetDraftWorkflowContract,
+    draftConfig: getSnippetDraftConfigContract,
+    publishedWorkflow: getSnippetPublishedWorkflowContract,
+    publishWorkflow: publishSnippetWorkflowContract,
+    defaultBlockConfigs: getSnippetDefaultBlockConfigsContract,
+    workflowRuns: listSnippetWorkflowRunsContract,
+    workflowRunDetail: getSnippetWorkflowRunDetailContract,
+    workflowRunNodeExecutions: listSnippetWorkflowRunNodeExecutionsContract,
+    runDraftNode: runSnippetDraftNodeContract,
+    lastDraftNodeRun: getSnippetDraftNodeLastRunContract,
+    runDraftIterationNode: runSnippetDraftIterationNodeContract,
+    runDraftLoopNode: runSnippetDraftLoopNodeContract,
+    runDraftWorkflow: runSnippetDraftWorkflowContract,
+    stopWorkflowTask: stopSnippetWorkflowTaskContract,
+  },
   billing: {
     invoices: invoicesContract,
     bindPartnerStack: bindPartnerStackContract,
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
new file mode 100644
index 0000000000..d0edc5e802
--- /dev/null
+++ b/web/eslint-suppressions.json
@@ -0,0 +1,8297 @@
+{
+  ".storybook/utils/form-story-wrapper.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "__mocks__/zustand.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "__tests__/document-detail-navigation-fix.test.tsx": {
+    "no-console": {
+      "count": 10
+    }
+  },
+  "__tests__/document-list-sorting.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "__tests__/embedded-user-id-auth.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "__tests__/embedded-user-id-store.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "__tests__/goto-anything/command-selector.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "__tests__/i18n-upload-features.test.ts": {
+    "no-console": {
+      "count": 3
+    }
+  },
+  "__tests__/navigation-utils.test.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "__tests__/plugin-tool-workflow-error.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "__tests__/real-browser-flicker.test.tsx": {
+    "no-console": {
+      "count": 16
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "__tests__/unified-tags-logic.test.ts": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "__tests__/workflow-onboarding-integration.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx": {
+    "no-console": {
+      "count": 19
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/type.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/(commonLayout)/snippets/[snippetId]/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/(humanInputLayout)/form/[token]/form.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/(shareLayout)/components/authenticated-layout.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/(shareLayout)/components/splash.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/(shareLayout)/webapp-reset-password/layout.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/(shareLayout)/webapp-signin/page.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/account/(commonLayout)/account-page/email-change-modal.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/account/(commonLayout)/account-page/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/account/(commonLayout)/delete-account/components/feed-back.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/account/(commonLayout)/delete-account/components/verify-email.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/account/(commonLayout)/delete-account/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/account/oauth/authorize/layout.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/account/oauth/authorize/page.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app-sidebar/app-info/app-operations.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    }
+  },
+  "app/components/app-sidebar/app-sidebar-dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app-sidebar/basic.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/app-sidebar/dataset-info/dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app-sidebar/dataset-info/menu-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app-sidebar/dataset-sidebar-dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app-sidebar/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app-sidebar/toggle-button.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/annotation/add-annotation-modal/edit-item/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 7
+    }
+  },
+  "app/components/app/annotation/batch-add-annotation-modal/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/app/annotation/edit-annotation-modal/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/app/annotation/empty-element.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/app/annotation/header-opts/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/annotation/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/app/annotation/type.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/app/annotation/view-annotation-modal/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 5
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/app-access-control/specific-groups-or-members.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/app/app-publisher/features-wrapper.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/app/app-publisher/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/app/app-publisher/publish-with-multiple-model.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/app-publisher/version-info-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/base/group-name/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/base/var-highlight/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/base/warning-mask/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-prompt/advanced-prompt-input.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-prompt/simple-prompt-input.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/app/configuration/config-var/config-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/app/configuration/config-var/config-modal/type-select.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-var/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-var/input-type-icon.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-var/select-var-type.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-vision/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config-vision/param-config-content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/agent/agent-setting/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/agent/agent-setting/item-panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/agent/agent-tools/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 9
+    }
+  },
+  "app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx": {
+    "react-hooks/exhaustive-deps": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/app/configuration/config/assistant-type-picker/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/automatic/get-automatic-res.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/automatic/instruction-editor.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/automatic/prompt-res.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/automatic/res-placeholder.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/automatic/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/automatic/version-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/configuration/config/config-audio.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/config/config-document.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/context-var/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/context-var/var-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/params-config/config-content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/params-config/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/params-config/weighted-score.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/app/configuration/dataset-config/select-dataset/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/dataset-config/settings-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/debug/chat-user-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/debug/debug-with-multiple-model/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/app/configuration/debug/debug-with-single-model/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/app/configuration/debug/hooks.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/app/configuration/debug/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 11
+    }
+  },
+  "app/components/app/configuration/debug/types.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/configuration/prompt-value-panel/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/app/configuration/prompt-value-panel/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/create-app-dialog/app-list/sidebar.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/app/create-app-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/create-from-dsl-modal/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/app/duplicate-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/log/empty-element.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/app/log/filter.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/app/log/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/app/log/list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 6
+    },
+    "style/multiline-ternary": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/app/log/model-info.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/overview/app-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/overview/customize/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/app/overview/embedded/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/app/overview/settings/index.tsx": {
+    "no-restricted-imports": {
+      "count": 3
+    },
+    "react/set-state-in-effect": {
+      "count": 3
+    },
+    "regexp/no-unused-capturing-group": {
+      "count": 1
+    }
+  },
+  "app/components/app/overview/trigger-card.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/app/switch-app-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/app/text-generate/item/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/app/text-generate/item/result-tab.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/app/workflow-log/detail.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/app/workflow-log/filter.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/app/workflow-log/list.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/app/workflow-log/trigger-by-display.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/apps/app-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/apps/footer.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/apps/list.tsx": {
+    "react-hooks/exhaustive-deps": {
+      "count": 1
+    },
+    "react/unsupported-syntax": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/apps/new-app-card.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/action-button/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/base/agent-log-modal/detail.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/agent-log-modal/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/agent-log-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/agent-log-modal/result.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/agent-log-modal/tool-call.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/amplitude/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/amplitude/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/app-icon-picker/ImageInput.tsx": {
+    "react/no-create-ref": {
+      "count": 1
+    }
+  },
+  "app/components/base/app-icon/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/audio-btn/audio.ts": {
+    "node/prefer-global/buffer": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/audio-btn/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/audio-gallery/AudioPlayer.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/auto-height-textarea/index.stories.tsx": {
+    "no-console": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/auto-height-textarea/index.tsx": {
+    "react-hooks/rules-of-hooks": {
+      "count": 1
+    },
+    "react/rules-of-hooks": {
+      "count": 1
+    }
+  },
+  "app/components/base/badge/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/base/block-input/index.stories.tsx": {
+    "no-console": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/block-input/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "react/no-nested-component-definitions": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/carousel/index.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/chat-with-history/chat-wrapper.tsx": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/base/chat/chat-with-history/context.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/base/chat/chat-with-history/header-in-mobile.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/chat/chat-with-history/header/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/chat/chat-with-history/hooks.tsx": {
+    "react/set-state-in-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 18
+    }
+  },
+  "app/components/base/chat/chat-with-history/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat-with-history/inputs-form/content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat-with-history/sidebar/list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat-with-history/sidebar/operation.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/answer/agent-content.tsx": {
+    "style/multiline-ternary": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/answer/human-input-content/executed-action.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/chat/answer/human-input-content/tips.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/chat/answer/human-input-content/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/answer/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/answer/more.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/answer/operation.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/base/chat/chat/answer/workflow-process.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/chat-input-area/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/chat/check-input-forms-hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/citation/index.tsx": {
+    "react-hooks/exhaustive-deps": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/base/chat/chat/citation/popup.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 9
+    }
+  },
+  "app/components/base/chat/chat/citation/progress-tooltip.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/citation/tooltip.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/chat/hooks.ts": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 17
+    }
+  },
+  "app/components/base/chat/chat/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/chat/type.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/base/chat/chat/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/embedded-chatbot/chat-wrapper.tsx": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/base/chat/embedded-chatbot/context.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/base/chat/embedded-chatbot/header/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/chat/embedded-chatbot/hooks.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 3
+    },
+    "react/set-state-in-effect": {
+      "count": 6
+    }
+  },
+  "app/components/base/chat/embedded-chatbot/inputs-form/content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/chat/types.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/chat/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 10
+    }
+  },
+  "app/components/base/checkbox/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/chip/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/content-dialog/index.stories.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/content-dialog/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/copy-feedback/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/copy-icon/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/corner-label/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/date-and-time-picker/calendar/days-of-week.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/date-and-time-picker/date-picker/header.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/date-and-time-picker/date-picker/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 4
+    }
+  },
+  "app/components/base/date-and-time-picker/hooks.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 2
+    }
+  },
+  "app/components/base/date-and-time-picker/time-picker/header.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/date-and-time-picker/time-picker/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/base/date-and-time-picker/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/base/date-and-time-picker/utils/dayjs.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/date-and-time-picker/year-and-month-picker/header.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/dialog/index.stories.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/drawer-plus/index.stories.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    }
+  },
+  "app/components/base/effect/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/emoji-picker/Inner.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/emoji-picker/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/error-boundary/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 3
+    },
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/features/context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/type.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/features/new-feature-panel/conversation-opener/modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/feature-bar.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/feature-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/features/new-feature-panel/moderation/form-generation.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/moderation/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/features/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/file-icon/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/file-uploader/audio-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/file-uploader/dynamic-pdf-preview.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/file-uploader/file-list-in-log.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/no-missing-key": {
+      "count": 1
+    }
+  },
+  "app/components/base/file-uploader/hooks.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/file-uploader/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 5
+    }
+  },
+  "app/components/base/file-uploader/pdf-highlighter-adapter.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/file-uploader/pdf-preview.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/base/file-uploader/store.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 4
+    }
+  },
+  "app/components/base/file-uploader/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/base/file-uploader/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/file-uploader/video-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/form/components/base/base-field.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/form/components/base/base-form.tsx": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/base/form/components/base/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/form/components/field/variable-or-constant-input.tsx": {
+    "no-console": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/form/components/field/variable-selector.tsx": {
+    "no-console": {
+      "count": 1
+    }
+  },
+  "app/components/base/form/form-scenarios/base/field.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/form/form-scenarios/base/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/form/form-scenarios/demo/index.tsx": {
+    "no-console": {
+      "count": 2
+    }
+  },
+  "app/components/base/form/form-scenarios/input-field/field.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/form/form-scenarios/input-field/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/form/form-scenarios/node-panel/field.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/form/form-scenarios/node-panel/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/form/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/form/hooks/use-check-validated.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/form/hooks/use-get-validators.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/form/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 15
+    }
+  },
+  "app/components/base/form/utils/secret-input/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/ga/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/base/grid-mask/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/public/avatar/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/icons/src/public/billing/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/base/icons/src/public/common/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/base/icons/src/public/education/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/public/files/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 11
+    }
+  },
+  "app/components/base/icons/src/public/knowledge/dataset-card/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/base/icons/src/public/knowledge/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/base/icons/src/public/knowledge/online-drive/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/public/llm/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 9
+    }
+  },
+  "app/components/base/icons/src/public/other/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/base/icons/src/public/thought/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/public/tracing/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 21
+    }
+  },
+  "app/components/base/icons/src/vender/features/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 10
+    }
+  },
+  "app/components/base/icons/src/vender/knowledge/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 15
+    }
+  },
+  "app/components/base/icons/src/vender/line/alertsAndFeedback/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/icons/src/vender/line/arrows/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/base/icons/src/vender/line/communication/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/vender/line/development/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/icons/src/vender/line/editor/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/line/education/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/line/files/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/base/icons/src/vender/line/financeAndECommerce/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/base/icons/src/vender/line/general/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 12
+    }
+  },
+  "app/components/base/icons/src/vender/line/images/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/line/layout/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/line/mediaAndDevices/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/icons/src/vender/line/others/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 7
+    }
+  },
+  "app/components/base/icons/src/vender/line/time/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/icons/src/vender/other/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 8
+    }
+  },
+  "app/components/base/icons/src/vender/pipeline/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/vender/plugin/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/vender/solid/FinanceAndECommerce/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/solid/alertsAndFeedback/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/solid/arrows/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/vender/solid/communication/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/base/icons/src/vender/solid/development/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/base/icons/src/vender/solid/editor/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/solid/education/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/vender/solid/files/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/icons/src/vender/solid/general/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 11
+    }
+  },
+  "app/components/base/icons/src/vender/solid/mediaAndDevices/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/base/icons/src/vender/solid/security/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/solid/shapes/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/solid/users/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/system/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/icons/src/vender/workflow/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 30
+    }
+  },
+  "app/components/base/icons/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/image-uploader/__tests__/image-preview.spec.tsx": {
+    "erasable-syntax-only/parameter-properties": {
+      "count": 1
+    }
+  },
+  "app/components/base/image-uploader/audio-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/image-uploader/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/base/image-uploader/image-link-input.tsx": {
+    "regexp/no-unused-capturing-group": {
+      "count": 1
+    }
+  },
+  "app/components/base/image-uploader/image-list.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/image-uploader/image-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/image-uploader/image-preview.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 6
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/image-uploader/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/image-uploader/video-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/inline-delete-confirm/index.stories.tsx": {
+    "no-console": {
+      "count": 2
+    }
+  },
+  "app/components/base/input-with-copy/index.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/base/input/index.stories.tsx": {
+    "no-console": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/input/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/base/loading/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/logo/dify-logo.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/logo/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/base/markdown-blocks/audio-block.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/base/markdown-blocks/button.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/markdown-blocks/code-block.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/markdown-blocks/code-block.tsx": {
+    "react/set-state-in-effect": {
+      "count": 7
+    },
+    "ts/no-explicit-any": {
+      "count": 9
+    }
+  },
+  "app/components/base/markdown-blocks/form.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 3
+    }
+  },
+  "app/components/base/markdown-blocks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 10
+    }
+  },
+  "app/components/base/markdown-blocks/link.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/markdown-blocks/paragraph.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/markdown-blocks/plugin-img.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/base/markdown-blocks/plugin-paragraph.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/base/markdown-blocks/think-block.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/markdown-blocks/think-block.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/base/markdown-blocks/video-block.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/base/markdown/error-boundary.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/base/markdown/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/markdown/markdown-utils.ts": {
+    "regexp/no-unused-capturing-group": {
+      "count": 1
+    }
+  },
+  "app/components/base/mermaid/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/mermaid/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 7
+    },
+    "regexp/no-super-linear-backtracking": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/mermaid/utils.ts": {
+    "regexp/no-unused-capturing-group": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/base/message-log-modal/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/message-log-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/modal-like-wrap/index.stories.tsx": {
+    "no-console": {
+      "count": 3
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/modal/index.stories.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/modal/modal.stories.tsx": {
+    "no-console": {
+      "count": 4
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/new-audio-button/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/node-status/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/base/notion-connector/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    }
+  },
+  "app/components/base/notion-page-selector/credential-selector/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/notion-page-selector/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/notion-page-selector/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/base/pagination/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/pagination/index.tsx": {
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
+  "app/components/base/pagination/type.ts": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    }
+  },
+  "app/components/base/param-item/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/param-item/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/portal-to-follow-elem/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/portal-to-follow-elem/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/premium-badge/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/base/progress-bar/progress-circle.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/base/prompt-editor/plugins/component-picker-block/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/component-picker-block/menu.tsx": {
+    "erasable-syntax-only/parameter-properties": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx": {
+    "tailwindcss/no-duplicate-classes": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/context-block/component.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/context-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/current-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/error-message-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/history-block/component.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/history-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx": {
+    "react-hooks/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/hitl-input-block/variable-block.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/last-run-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/query-block/component.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-editor/plugins/query-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/request-url-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/update-block.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/variable-block/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "react-refresh/only-export-components": {
+      "count": 3
+    }
+  },
+  "app/components/base/prompt-editor/plugins/workflow-variable-block/node.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/prompt-log-modal/card.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-log-modal/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    }
+  },
+  "app/components/base/prompt-log-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/qrcode/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/qrcode/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/radio-card/index.stories.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/radio/component/group/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/radio/context/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/radio/index.stories.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/search-input/index.stories.tsx": {
+    "no-console": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/segmented-control/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/select/index.stories.tsx": {
+    "no-console": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/select/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "style/multiline-ternary": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/select/locale-signin.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/simple-pie-chart/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/skeleton/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/sort/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/sort/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/base/spinner/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/spinner/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/svg-gallery/index.tsx": {
+    "node/prefer-global/buffer": {
+      "count": 1
+    }
+  },
+  "app/components/base/svg/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/switch/index.stories.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/tab-header/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/tab-slider-new/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/tab-slider-plain/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/tab-slider/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/base/tab-slider/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/base/tag-input/index.stories.tsx": {
+    "no-console": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/tag-management/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/tag-management/panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/base/tag-management/tag-item-editor.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/tag-management/tag-remove-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/base/tag-management/trigger.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/tag/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/text-generation/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/text-generation/types.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/base/textarea/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/textarea/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/base/tooltip/index.stories.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/base/video-gallery/VideoPlayer.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/base/voice-input/index.stories.tsx": {
+    "no-console": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/voice-input/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/base/with-input-validation/index.stories.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "react/component-hook-factories": {
+      "count": 1
+    }
+  },
+  "app/components/base/with-input-validation/index.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/base/zendesk/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/billing/annotation-full/modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/billing/plan-upgrade-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/billing/plan/assets/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/billing/plan/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/billing/pricing/assets/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 12
+    }
+  },
+  "app/components/billing/pricing/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/billing/pricing/plans/cloud-plan-item/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 8
+    }
+  },
+  "app/components/billing/pricing/plans/cloud-plan-item/list/item/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/billing/pricing/plans/self-hosted-plan-item/list/item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/billing/pricing/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/billing/priority-label/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/billing/type.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 4
+    }
+  },
+  "app/components/billing/upgrade-btn/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/billing/usage-info/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/custom/custom-page/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/custom/custom-web-app-brand/components/powered-by-brand.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/chunk.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/common/document-picker/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/document-picker/preview-document-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/image-list/more.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/image-previewer/index.tsx": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/image-uploader/__tests__/store.spec.tsx": {
+    "react/error-boundaries": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/image-uploader/hooks/use-upload.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/image-uploader/store.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/common/retrieval-method-info/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/common/retrieval-param-config/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/footer.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/create-from-pipeline/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/list/customized-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/list/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/list/template-card/content.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/list/template-card/details/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create-from-pipeline/list/template-card/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/embedding-process/indexing-progress-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/empty-dataset-creation-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/file-preview/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/notion-page-preview/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/step-one/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/create/step-one/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/step-one/upgrade-card.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/step-two/components/general-chunking-options.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/step-two/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/create/step-two/components/indexing-mode-section.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/create/step-two/components/inputs.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/step-two/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/datasets/create/step-two/hooks/use-indexing-config.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/create/step-two/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    },
+    "react-hooks/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/step-two/preview-item/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/stop-embedding-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/website/base/checkbox-with-label.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/website/base/field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/website/base/input.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/website/firecrawl/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-console": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/create/website/firecrawl/options.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/website/jina-reader/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-console": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/create/website/jina-reader/options.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/create/website/watercrawl/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-console": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/create/website/watercrawl/options.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/components/document-list/components/document-table-row.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/components/document-list/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/components/document-list/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/documents/components/documents-header.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/components/list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/components/operations.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/components/rename-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/store/provider.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/store/slices/online-drive.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/preview/web-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/process-documents/form.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/steps/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/steps/preview-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/create-from-pipeline/types.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 9
+    }
+  },
+  "app/components/datasets/documents/detail/batch-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/common/chunk-content.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/common/empty.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 8
+    }
+  },
+  "app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/common/summary-status.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/documents/detail/completed/components/menu-bar.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/display-toggle.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 5
+    }
+  },
+  "app/components/datasets/documents/detail/completed/hooks/use-search-filter.ts": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/use-memo": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/segment-card/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/completed/status-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/context.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/embedding/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/documents/detail/embedding/components/status-header.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/documents/detail/embedding/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/embedding/skeleton/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/metadata/components/field-info.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 4
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/documents/detail/metadata/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/segment-add/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/documents/status-item/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/external-api/external-api-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/external-knowledge-base/create/InfoPanel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/extra-info/statistics.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/datasets/formatted-text/flavours/type.ts": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/components/child-chunks-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/components/chunk-detail-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/components/query-input/textarea.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/components/result-item-external.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/components/result-item-footer.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/components/score.tsx": {
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/hit-testing/index.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/list/dataset-card/operation-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/list/dataset-footer/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/list/new-dataset-card/option.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/hooks/use-metadata-document.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/metadata-dataset/create-content.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/metadata/metadata-dataset/field.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/metadata-dataset/select-metadata.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/metadata/metadata-document/field.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/metadata-document/info-group.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/metadata/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/datasets/rename-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/chunk-structure/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/form/components/external-knowledge-section.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/form/components/indexing-section.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/datasets/settings/index-method/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/index-method/keyword-number.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/permission-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/no-missing-key": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/permission-selector/permission-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/datasets/settings/summary-index-setting.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/develop/ApiServer.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/develop/code.tsx": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 9
+    }
+  },
+  "app/components/develop/md.tsx": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/develop/secret-key/input-copy.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/develop/secret-key/secret-key-generate.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/develop/secret-key/secret-key-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/evaluation/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/explore/app-card/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/explore/app-list/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/explore/banner/banner-item.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 3
+    }
+  },
+  "app/components/explore/banner/indicator-button.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/explore/create-app-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    },
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
+  "app/components/explore/installed-app/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/explore/item-operation/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/explore/try-app/app/chat.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/explore/try-app/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/explore/try-app/preview/basic-app-preview.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 2
+    }
+  },
+  "app/components/explore/try-app/tab.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/goto-anything/actions/commands/command-bus.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/goto-anything/actions/commands/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/goto-anything/actions/commands/registry.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/goto-anything/actions/commands/slash.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/goto-anything/actions/commands/types.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/goto-anything/actions/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/goto-anything/actions/types.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/goto-anything/command-selector.tsx": {
+    "react/unsupported-syntax": {
+      "count": 2
+    }
+  },
+  "app/components/goto-anything/components/footer.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/goto-anything/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/goto-anything/components/result-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/goto-anything/components/result-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/goto-anything/context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    }
+  },
+  "app/components/goto-anything/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 4
+    }
+  },
+  "app/components/goto-anything/hooks/use-goto-anything-results.ts": {
+    "@tanstack/query/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-about/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-dropdown/compliance.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/api-based-extension-page/modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/api-based-extension-page/selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/card.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/configure.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/hooks/use-marketplace-all-plugins.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/operator.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/header/account-setting/data-source-page-new/types.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/key-validator/KeyInput.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/key-validator/declarations.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/language-page/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/members-page/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 14
+    }
+  },
+  "app/components/header/account-setting/members-page/invite-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/members-page/operation/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/declarations.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 11
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/hooks.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 6
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/hooks/use-custom-models.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/hooks/use-model-form-schemas.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 7
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-modal/Form.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-modal/Input.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "unicorn/prefer-number-properties": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-modal/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-fallback-alert.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/header/account-setting/model-provider-page/utils.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/header/account-setting/plugin-page/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/header/app-nav/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/header-wrapper.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/header/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/header/license-env/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/header/plan-badge/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/base/badges/icon-with-tooltip.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/base/key-value-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/card/base/corner-mark.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/card/base/title.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/card/card-more-info.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/install-plugin/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/plugins/install-plugin/hooks/use-fold-anim-into.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/install-plugin/install-bundle/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/install-plugin/install-bundle/item/github-item.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/install-plugin/install-bundle/steps/hooks/use-install-multi-state.ts": {
+    "react-hooks/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/install-plugin/install-from-github/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/install-plugin/install-from-local-package/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/install-plugin/install-from-marketplace/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/marketplace/description/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 9
+    }
+  },
+  "app/components/plugins/marketplace/hooks.ts": {
+    "@tanstack/query/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/marketplace/list/list-wrapper.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/marketplace/search-box/tags-filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/marketplace/sort-dropdown/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-auth/authorize/api-key-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-auth/authorize/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-auth/authorized-in-node.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-auth/authorized/index.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-auth/authorized/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-auth/hooks/use-get-api.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-auth/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 12
+    },
+    "react-refresh/only-export-components": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-auth/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-auth/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/action-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/app-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/datasource-action-list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/detail-header.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/detail-header/components/header-modals.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/detail-header/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/detail-header/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/endpoint-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/endpoint-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/endpoint-modal.tsx": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/model-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/model-selector/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/strategy-detail.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/components/modal-steps.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    },
+    "no-restricted-imports": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/create/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/subscription-list/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 7
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-base-form.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/tool-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/plugins/plugin-item/action.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-item/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-mutation-model/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/context.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/debug-info.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/empty/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/filter-management/tag-filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/install-plugin-dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/plugin-page/plugin-info.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/plugins/plugin-page/plugin-tasks/components/plugin-section.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/plugin-page/plugin-tasks/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/readme-panel/index.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/readme-panel/store.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/reference-setting-modal/auto-update-setting/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/plugins/reference-setting-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/plugins/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 7
+    },
+    "ts/no-explicit-any": {
+      "count": 25
+    }
+  },
+  "app/components/plugins/update-plugin/from-market-place.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/chunk-card-list/q-a-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/editor/form/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/editor/form/initial-fields.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/editor/form/types.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/hooks.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/label-right-content/global-inputs.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/preview/data-source.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/input-field/preview/process-documents.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/header.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/preparation/footer-tips.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/preparation/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/result/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/panel/test-run/result/result-preview/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/publish-toast.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/rag-pipeline-children.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/rag-pipeline-main.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/components/update-dsl-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/components/version-mismatch-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 9
+    }
+  },
+  "app/components/rag-pipeline/hooks/use-DSL.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/hooks/use-input-fields.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/hooks/use-pipeline-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/rag-pipeline/hooks/use-pipeline-init.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/hooks/use-pipeline-run.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/store/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/rag-pipeline/utils/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/rag-pipeline/utils/nodes.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/share/text-generation/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/share/text-generation/info-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/share/text-generation/menu-dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/share/text-generation/no-data/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-empty-object-type": {
+      "count": 1
+    }
+  },
+  "app/components/share/text-generation/result/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/share/text-generation/run-batch/csv-download/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/share/text-generation/run-batch/csv-reader/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/share/text-generation/run-once/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/share/text-generation/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/share/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/signin/countdown.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/snippets/components/snippet-main.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/splash.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/edit-custom-collection-modal/get-schema.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/tools/edit-custom-collection-modal/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/tools/edit-custom-collection-modal/test-api.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/tools/labels/selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/marketplace/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 14
+    }
+  },
+  "app/components/tools/mcp/create-card.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/tools/mcp/detail/content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/tools/mcp/detail/operation-dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/mcp/detail/tool-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/mcp/mcp-server-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/tools/mcp/mcp-server-param-item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/tools/mcp/mcp-service-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/mcp/modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/mcp/provider-card.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/tools/mcp/sections/headers-section.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/tools/provider-list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/tools/provider/custom-create-card.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/tools/provider/empty.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/tools/setting/build-in/config-credentials.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/tools/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/tools/workflow-tool/confirm-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/workflow-tool/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/tools/workflow-tool/method-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow-app/components/workflow-children.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow-app/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 13
+    }
+  },
+  "app/components/workflow-app/hooks/use-DSL.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow-app/hooks/use-nodes-sync-draft.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow-app/hooks/use-workflow-init.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow-app/hooks/use-workflow-refresh-draft.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow-app/hooks/use-workflow-run.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow-app/hooks/use-workflow-template.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow-app/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow-app/store/workflow/workflow-slice.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/block-selector/all-start-blocks.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/blocks.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/featured-tools.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 6
+    },
+    "tailwindcss/no-duplicate-classes": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/block-selector/featured-triggers.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 6
+    },
+    "tailwindcss/no-duplicate-classes": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/block-selector/hooks.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/index-bar.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/main.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/market-place-plugin/action.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/market-place-plugin/item.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/rag-tool-recommendations/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/block-selector/start-blocks.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/block-selector/tabs.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/tool-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/tool/action-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/tool/tool.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/block-selector/trigger-plugin/action-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/trigger-plugin/item.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/block-selector/use-check-vertical-scrollbar.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/use-sticky-scroll.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/block-selector/view-type-select.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/candidate-node-main.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/comment/mention-input.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/comment/thread.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/datasets-detail-store/provider.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/dsl-export-confirm-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/editing-title.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/restoring-title.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/header/run-mode.tsx": {
+    "no-console": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/running-title.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/test-run-menu-helpers.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/test-run-menu.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/version-history-button.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/header/view-history.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/header/view-workflow-history.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks-store/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/hooks-store/provider.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks-store/store.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/hooks/__tests__/use-checklist.spec.ts": {
+    "react/error-boundaries": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 27
+    }
+  },
+  "app/components/workflow/hooks/use-checklist.ts": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/hooks/use-dynamic-test-run-options.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/hooks/use-helpline.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks/use-inspect-vars-crud-common.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks/use-nodes-interactions.ts": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/hooks/use-serial-async-callback.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks/use-workflow-interactions.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/hooks/use-workflow-run-event/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 19
+    }
+  },
+  "app/components/workflow/hooks/use-workflow-run-event/use-workflow-agent-log.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks/use-workflow-run-event/use-workflow-finished.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/hooks/use-workflow-search.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/hooks/use-workflow-variables.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/add-variable-popup-with-position.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/_base/components/agent-strategy.tsx": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 11
+    }
+  },
+  "app/components/workflow/nodes/_base/components/before-run-form/form.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/_base/components/before-run-form/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/collapse/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/config-vision.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/_base/components/editor/text-editor.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/entry-node-container.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/error-handle/default-value.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/error-handle/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/file-upload-setting.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/form-input-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/_base/components/form-input-type-switch.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/help-link.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/info-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/input-support-select-var.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/input-var-type-icon.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/layout/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 7
+    },
+    "react-refresh/only-export-components": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/memory-config.tsx": {
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/next-step/operator.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/node-control.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/node-handle.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/option-card.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/panel-operator/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/prompt/editor.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/selector.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/setting-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/switch-plugin-version.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/title-description-input.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/constant-field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/manage-input-field.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/match-schema-type.ts": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 32
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/var-list.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/variable-label/hooks.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/components/variable/variable-label/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/_base/components/workflow-panel/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 7
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 2
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/_base/components/workflow-panel/tab.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/hooks/use-one-step-run.ts": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 22
+    }
+  },
+  "app/components/workflow/nodes/_base/hooks/use-output-var-list.ts": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/hooks/use-var-list.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/_base/node-sections.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/_base/node.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/_base/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/agent/components/model-bar.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-empty-object-type": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/agent/components/tool-icon.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/agent/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/agent/node.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/agent/panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/agent/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/agent/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/agent/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/answer/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/answer/panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/components/operation-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/assigner/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/assigner/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/code/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/code/dependency-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/code/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/code/use-config.ts": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "regexp/no-useless-assertions": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/code/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/components.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/data-source-empty/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/data-source/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/data-source/hooks/use-before-run-form.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/data-source/hooks/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/data-source/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/data-source/panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/data-source/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/data-source/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/document-extractor/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/document-extractor/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/document-extractor/panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/document-extractor/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/end/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/end/node.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/http/components/authorization/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/http/components/curl-panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/http/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/http/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/http/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/http/use-config.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/http/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/form-content-preview.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/form-content.tsx": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "react/no-nested-component-definitions": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/human-input/panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/human-input/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-add.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-list/condition-input.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-number-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/components/condition-wrap.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/if-else/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/if-else/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/iteration-start/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/iteration/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/iteration/node.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/iteration/panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/iteration/use-config.ts": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/iteration/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/index-method.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hooks.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/type.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-barrel-files/no-barrel-files": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/knowledge-base/utils.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-variable-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/node.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/knowledge-retrieval/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/list-operator/components/filter-condition.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/list-operator/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/list-operator/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/list-operator/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/config-prompt-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/llm/components/config-prompt.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/assets/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx": {
+    "style/multiline-ternary": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/resolution-picker.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/components/structure-output.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/llm/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/llm/use-config.ts": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/llm/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 9
+    }
+  },
+  "app/components/workflow/nodes/llm/utils.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/loop-start/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-add.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-files-list-value.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-list/condition-input.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-list/condition-var-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-number-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/condition-wrap.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/loop/components/loop-variables/input-mode-selec.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/components/loop-variables/item.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/loop/components/loop-variables/variable-type-select.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/loop/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/loop/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx": {
+    "unused-imports/no-unused-vars": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/use-config.ts": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/parameter-extractor/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 9
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/components/class-item.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/components/class-list.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "react/unsupported-syntax": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/node.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/use-config.ts": {
+    "react/set-state-in-effect": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/question-classifier/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/nodes/start/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/start/panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/start/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/start/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/template-transform/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/template-transform/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/template-transform/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/nodes/tool/components/copy-id.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/tool/components/input-var-list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/tool/components/tool-form/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/tool/components/tool-form/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/tool/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/tool/hooks/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/tool/hooks/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/nodes/tool/output-schema-utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/tool/panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/tool/types.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 11
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/node.tsx": {
+    "react/unsupported-syntax": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/types.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/use-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-plugin/utils/form-helpers.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/components/frequency-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/components/next-execution-times.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/components/on-minute-selector.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/default.ts": {
+    "regexp/no-unused-capturing-group": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 10
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-schedule/panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-webhook/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-webhook/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/trigger-webhook/panel.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/nodes/trigger-webhook/utils/render-output-vars.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/utils.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/nodes/variable-assigner/default.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/nodes/variable-assigner/use-single-run-form-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/note-node/note-editor/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/note-node/note-editor/toolbar/command.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/note-node/note-editor/toolbar/operator.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/note-node/note-editor/utils.ts": {
+    "regexp/no-useless-quantifier": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/operator/add-block.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/operator/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/operator/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/operator/more-actions.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/operator/tip-popup.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/operator/zoom-in-out.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/chat-record/index.tsx": {
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/panel/chat-record/user-input.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    },
+    "unicorn/prefer-number-properties": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/panel/chat-variable-panel/type.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/comments-panel/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/panel/debug-and-preview/empty.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/debug-and-preview/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 12
+    }
+  },
+  "app/components/workflow/panel/debug-and-preview/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/env-panel/variable-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/human-input-form-list.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/inputs-panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/panel/record.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/version-history-panel/context-menu/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/version-history-panel/filter/filter-item.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/version-history-panel/filter/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/version-history-panel/loading/index.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/panel/workflow-preview.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/agent-log/agent-log-nav-more.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/agent-log/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/hooks.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/index.tsx": {
+    "react/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/iteration-log/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/iteration-log/iteration-log-trigger.tsx": {
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/loop-log/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/loop-log/loop-log-trigger.tsx": {
+    "unicorn/prefer-number-properties": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/meta.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 13
+    }
+  },
+  "app/components/workflow/run/node.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/output-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/run/result-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "app/components/workflow/run/result-text.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    },
+    "tailwindcss/no-unnecessary-whitespace": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/retry-log/index.tsx": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/retry-log/retry-result-panel.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/utils/format-log/agent/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 11
+    }
+  },
+  "app/components/workflow/run/utils/format-log/graph-to-log-struct.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/components/workflow/run/utils/format-log/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/run/utils/format-log/iteration/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/utils/format-log/loop/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/run/utils/format-log/parallel/index.ts": {
+    "no-console": {
+      "count": 4
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/store/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/store/workflow/debug/inspect-vars-slice.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/store/workflow/workflow-draft-slice.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/store/workflow/workflow-slice.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/types.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 16
+    },
+    "ts/no-empty-object-type": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "app/components/workflow/update-dsl-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/utils/data-source.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/utils/debug.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/utils/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 9
+    }
+  },
+  "app/components/workflow/utils/node-navigation.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/utils/node.ts": {
+    "regexp/no-super-linear-backtracking": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/utils/tool.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/utils/workflow-init.ts": {
+    "ts/no-explicit-any": {
+      "count": 12
+    }
+  },
+  "app/components/workflow/utils/workflow.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/variable-inspect/display-content.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/variable-inspect/group.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/variable-inspect/left.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/variable-inspect/listening.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/variable-inspect/panel.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/variable-inspect/right.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "app/components/workflow/variable-inspect/trigger.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/variable-inspect/utils.tsx": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/variable-inspect/value-content.tsx": {
+    "react/set-state-in-effect": {
+      "count": 5
+    },
+    "regexp/no-super-linear-backtracking": {
+      "count": 1
+    },
+    "regexp/no-unused-capturing-group": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/components/workflow/workflow-history-store.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 2
+    }
+  },
+  "app/components/workflow/workflow-preview/components/nodes/base.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/workflow-preview/components/nodes/constants.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/workflow-preview/components/nodes/if-else/node.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/workflow-preview/components/nodes/iteration-start/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/workflow-preview/components/nodes/loop-start/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/components/workflow/workflow-preview/components/zoom-in-out.tsx": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/education-apply/expire-notice-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/education-apply/hooks.ts": {
+    "react/set-state-in-effect": {
+      "count": 5
+    }
+  },
+  "app/education-apply/search-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/education-apply/verify-state-modal.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "app/forgot-password/ForgotPasswordForm.spec.tsx": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "app/init/InitPasswordPopup.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/install/installForm.spec.tsx": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "app/reset-password/layout.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/signin/_header.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/signin/components/mail-and-password-auth.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/signin/invite-settings/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "app/signin/layout.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/signin/one-more-step.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/signup/layout.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "app/signup/page.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "context/app-context-provider.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "context/external-api-panel-context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "context/external-knowledge-api-context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "context/global-public-context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 3
+    }
+  },
+  "context/hooks/use-trigger-events-limit-modal.ts": {
+    "react/set-state-in-effect": {
+      "count": 3
+    }
+  },
+  "context/modal-context-provider.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "context/modal-context.test.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "context/modal-context.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "context/provider-context-provider.tsx": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "context/web-app-context.tsx": {
+    "react-refresh/only-export-components": {
+      "count": 1
+    }
+  },
+  "hooks/use-async-window-open.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "hooks/use-format-time-from-now.spec.ts": {
+    "regexp/no-dupe-disjunctions": {
+      "count": 5
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "hooks/use-metadata.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "hooks/use-mitt.ts": {
+    "react/component-hook-factories": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "hooks/use-oauth.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "hooks/use-pay.tsx": {
+    "react/set-state-in-effect": {
+      "count": 4
+    }
+  },
+  "i18n-config/index.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "i18n-config/lib.client.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 1
+    }
+  },
+  "i18n/de-DE/billing.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/en-US/app-debug.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/fr-FR/app-debug.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/fr-FR/app.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/fr-FR/plugin-trigger.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/fr-FR/tools.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/fr-FR/workflow.json": {
+    "no-irregular-whitespace": {
+      "count": 2
+    }
+  },
+  "i18n/pt-BR/common.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "i18n/ru-RU/common.json": {
+    "no-irregular-whitespace": {
+      "count": 2
+    }
+  },
+  "i18n/uk-UA/app-debug.json": {
+    "no-irregular-whitespace": {
+      "count": 1
+    }
+  },
+  "models/access-control.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "models/app.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    }
+  },
+  "models/common.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "models/datasets.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 8
+    },
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "models/debug.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "models/log.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "models/pipeline.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 3
+    },
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "models/share.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "scripts/component-analyzer.js": {
+    "regexp/no-unused-capturing-group": {
+      "count": 6
+    }
+  },
+  "service/access-control.ts": {
+    "@tanstack/query/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "service/annotation.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "service/apps.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "service/base.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "service/common.ts": {
+    "ts/no-explicit-any": {
+      "count": 29
+    }
+  },
+  "service/datasets.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "service/debug.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "service/fetch.ts": {
+    "regexp/no-unused-capturing-group": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "service/knowledge/use-dataset.ts": {
+    "@tanstack/query/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "service/share.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "service/try-app.ts": {
+    "no-barrel-files/no-barrel-files": {
+      "count": 2
+    }
+  },
+  "service/use-apps.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "service/use-common.ts": {
+    "ts/no-empty-object-type": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "service/use-endpoints.ts": {
+    "ts/no-explicit-any": {
+      "count": 7
+    }
+  },
+  "service/use-flow.ts": {
+    "react/no-unnecessary-use-prefix": {
+      "count": 1
+    }
+  },
+  "service/use-pipeline.ts": {
+    "@tanstack/query/exhaustive-deps": {
+      "count": 1
+    }
+  },
+  "service/use-plugins-auth.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "service/use-plugins.ts": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "regexp/no-unused-capturing-group": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "service/use-tools.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "service/use-workflow.ts": {
+    "@tanstack/query/exhaustive-deps": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "service/utils.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "types/app.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 9
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "types/assets.d.ts": {
+    "ts/no-explicit-any": {
+      "count": 5
+    }
+  },
+  "types/common.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 1
+    }
+  },
+  "types/feature.ts": {
+    "erasable-syntax-only/enums": {
+      "count": 3
+    }
+  },
+  "types/lamejs.d.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "types/pipeline.tsx": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "types/react-18-input-autosize.d.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "types/workflow.ts": {
+    "ts/no-explicit-any": {
+      "count": 17
+    }
+  },
+  "utils/clipboard.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "utils/completion-params.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "utils/completion-params.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "utils/context.ts": {
+    "react/component-hook-factories": {
+      "count": 1
+    }
+  },
+  "utils/error-parser.ts": {
+    "no-console": {
+      "count": 1
+    },
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "utils/get-icon.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "utils/gtag.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  },
+  "utils/index.spec.ts": {
+    "test/no-identical-title": {
+      "count": 2
+    },
+    "ts/no-explicit-any": {
+      "count": 8
+    }
+  },
+  "utils/index.ts": {
+    "ts/no-explicit-any": {
+      "count": 3
+    }
+  },
+  "utils/mcp.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "utils/model-config.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 13
+    }
+  },
+  "utils/model-config.ts": {
+    "ts/no-explicit-any": {
+      "count": 6
+    }
+  },
+  "utils/navigation.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 4
+    }
+  },
+  "utils/tool-call.spec.ts": {
+    "ts/no-explicit-any": {
+      "count": 1
+    }
+  },
+  "utils/validators.ts": {
+    "ts/no-explicit-any": {
+      "count": 2
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index eab02ec664..0fe2a56c03 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -1,7 +1,6 @@
 // @ts-check
 
-import path from 'node:path'
-import antfu, { GLOB_MARKDOWN, GLOB_MARKDOWN_CODE, GLOB_TESTS, GLOB_TS, GLOB_TSX } from '@antfu/eslint-config'
+import antfu, { GLOB_MARKDOWN, GLOB_MARKDOWN_CODE, GLOB_TESTS, GLOB_TS, GLOB_TSX, isInEditorEnv, isInGitHooksOrLintStaged } from '@antfu/eslint-config'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import md from 'eslint-markdown'
 import tailwindcss from 'eslint-plugin-better-tailwindcss'
@@ -19,6 +18,12 @@ import {
 } from './eslint.constants.mjs'
 import dify from './plugins/eslint/index.js'
 
+// Enable Tailwind CSS IntelliSense mode for ESLint runs
+// See: tailwind-css-plugin.ts
+process.env.TAILWIND_MODE ??= 'ESLINT'
+
+const disableRuleAutoFix = !(isInEditorEnv() || isInGitHooksOrLintStaged())
+
 export default antfu(
   {
     react: {
@@ -27,6 +32,11 @@ export default antfu(
         'react/no-unnecessary-use-prefix': 'error',
       },
     },
+    nextjs: {
+      overrides: {
+        'next/no-img-element': 'off',
+      },
+    },
     ignores: ['public', 'types/doc-paths.ts', 'eslint-suppressions.json'],
     typescript: {
       overrides: {
@@ -124,8 +134,7 @@ export default antfu(
     },
     settings: {
       'better-tailwindcss': {
-        cwd: import.meta.dirname,
-        entryPoint: path.resolve(import.meta.dirname, './app/styles/globals.css'),
+        entryPoint: 'app/styles/globals.css',
       },
     },
   },
@@ -197,3 +206,10 @@ export default antfu(
     },
   },
 )
+  .disableRulesFix(disableRuleAutoFix
+    ? [
+        'tailwindcss/enforce-consistent-class-order',
+        'tailwindcss/no-duplicate-classes',
+        'tailwindcss/no-unnecessary-whitespace',
+      ]
+    : [])
diff --git a/web/hooks/use-snippet-and-evaluation-plan-access.ts b/web/hooks/use-snippet-and-evaluation-plan-access.ts
new file mode 100644
index 0000000000..984a30fced
--- /dev/null
+++ b/web/hooks/use-snippet-and-evaluation-plan-access.ts
@@ -0,0 +1,19 @@
+'use client'
+
+import { canAccessSnippetsAndEvaluation } from '@/app/components/billing/utils'
+import { useProviderContextSelector } from '@/context/provider-context'
+
+export const useSnippetAndEvaluationPlanAccess = () => {
+  const planType = useProviderContextSelector(state => state.plan.type)
+  const enableBilling = useProviderContextSelector(state => state.enableBilling)
+  const isFetchedPlan = useProviderContextSelector(state => state.isFetchedPlan)
+
+  return {
+    canAccess: canAccessSnippetsAndEvaluation({
+      enableBilling,
+      isFetchedPlan,
+      planType,
+    }),
+    isReady: !enableBilling || isFetchedPlan,
+  }
+}
diff --git a/web/i18n-config/resources.ts b/web/i18n-config/resources.ts
index 857440a1ee..3e537dc8d2 100644
--- a/web/i18n-config/resources.ts
+++ b/web/i18n-config/resources.ts
@@ -14,6 +14,7 @@ import type datasetPipeline from '../i18n/en-US/dataset-pipeline.json'
 import type datasetSettings from '../i18n/en-US/dataset-settings.json'
 import type dataset from '../i18n/en-US/dataset.json'
 import type education from '../i18n/en-US/education.json'
+import type evaluation from '../i18n/en-US/evaluation.json'
 import type explore from '../i18n/en-US/explore.json'
 import type layout from '../i18n/en-US/layout.json'
 import type login from '../i18n/en-US/login.json'
@@ -25,6 +26,7 @@ import type plugin from '../i18n/en-US/plugin.json'
 import type register from '../i18n/en-US/register.json'
 import type runLog from '../i18n/en-US/run-log.json'
 import type share from '../i18n/en-US/share.json'
+import type snippet from '../i18n/en-US/snippet.json'
 import type time from '../i18n/en-US/time.json'
 import type tools from '../i18n/en-US/tools.json'
 import type workflow from '../i18n/en-US/workflow.json'
@@ -47,6 +49,7 @@ export type Resources = {
   datasetPipeline: typeof datasetPipeline
   datasetSettings: typeof datasetSettings
   education: typeof education
+  evaluation: typeof evaluation
   explore: typeof explore
   layout: typeof layout
   login: typeof login
@@ -58,6 +61,7 @@ export type Resources = {
   register: typeof register
   runLog: typeof runLog
   share: typeof share
+  snippet: typeof snippet
   time: typeof time
   tools: typeof tools
   workflow: typeof workflow
@@ -80,6 +84,7 @@ export const namespaces = [
   'datasetPipeline',
   'datasetSettings',
   'education',
+  'evaluation',
   'explore',
   'layout',
   'login',
@@ -91,6 +96,7 @@ export const namespaces = [
   'register',
   'runLog',
   'share',
+  'snippet',
   'time',
   'tools',
   'workflow',
diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index 6b9d2b2f8c..ba0a937774 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "المحتوى المخزن",
   "chatVariable.updatedAt": "تم التحديث في ",
   "collaboration.historyAction.generic": "قام متعاون بعملية تراجع/إعادة",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "أضف تعليقًا",
   "comments.actions.deleteReply": "حذف الرد",
   "comments.actions.editComment": "تعديل التعليق",
   "comments.actions.editReply": "تعديل الرد",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "فشل حذف الإصدار",
   "versionHistory.action.deleteSuccess": "تم حذف الإصدار",
   "versionHistory.action.restoreFailure": "فشل استعادة الإصدار",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} يقوم بالاستعادة إلى الإصدار {{versionName}}...",
   "versionHistory.action.restoreSuccess": "تم استعادة الإصدار",
   "versionHistory.action.updateFailure": "فشل تحديث الإصدار",
   "versionHistory.action.updateSuccess": "تم تحديث الإصدار",
diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json
index 20a142431c..3394652b9b 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Gespeicherter Inhalt",
   "chatVariable.updatedAt": "Aktualisiert am ",
   "collaboration.historyAction.generic": "Ein Mitbearbeiter hat Rückgängig/Wiederholen ausgeführt",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Kommentar hinzufügen",
   "comments.actions.deleteReply": "Antwort löschen",
   "comments.actions.editComment": "Kommentar bearbeiten",
   "comments.actions.editReply": "Antwort bearbeiten",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Version löschen fehlgeschlagen",
   "versionHistory.action.deleteSuccess": "Version gelöscht",
   "versionHistory.action.restoreFailure": "Wiederherstellung der Version fehlgeschlagen",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} stellt Version {{versionName}} wieder her...",
   "versionHistory.action.restoreSuccess": "Version wiederhergestellt",
   "versionHistory.action.updateFailure": "Aktualisierung der Version fehlgeschlagen",
   "versionHistory.action.updateSuccess": "Version aktualisiert",
diff --git a/web/i18n/en-US/app-log.json b/web/i18n/en-US/app-log.json
index 3ffb8ba99e..7cd62958e4 100644
--- a/web/i18n/en-US/app-log.json
+++ b/web/i18n/en-US/app-log.json
@@ -54,6 +54,7 @@
   "table.empty.noOutput": "No output",
   "table.header.adminRate": "Op. Rate",
   "table.header.endUser": "End User or Account",
+  "table.header.evaluation": "EVALUATION",
   "table.header.input": "Input",
   "table.header.messageCount": "Message Count",
   "table.header.output": "Output",
diff --git a/web/i18n/en-US/app.json b/web/i18n/en-US/app.json
index 0ad608d53c..450608aa80 100644
--- a/web/i18n/en-US/app.json
+++ b/web/i18n/en-US/app.json
@@ -211,6 +211,13 @@
   "structOutput.required": "Required",
   "structOutput.structured": "Structured",
   "structOutput.structuredTip": "Structured Outputs is a feature that ensures the model will always generate responses that adhere to your supplied JSON Schema",
+  "studio.apps": "Apps",
+  "studio.filters.allCreators": "All creators",
+  "studio.filters.creators": "Creators",
+  "studio.filters.reset": "Reset",
+  "studio.filters.searchCreators": "Search creator...",
+  "studio.filters.types": "Types",
+  "studio.filters.you": "You",
   "switch": "Switch to Workflow Orchestrate",
   "switchLabel": "The app copy to be created",
   "switchStart": "Start switch",
diff --git a/web/i18n/en-US/common.json b/web/i18n/en-US/common.json
index d8a312d573..3c8e6a4731 100644
--- a/web/i18n/en-US/common.json
+++ b/web/i18n/en-US/common.json
@@ -93,6 +93,7 @@
   "apiBasedExtension.type": "Type",
   "appMenus.apiAccess": "API Access",
   "appMenus.apiAccessTip": "This knowledge base is accessible via the Service API",
+  "appMenus.evaluation": "Evaluation",
   "appMenus.logAndAnn": "Logs & Annotations",
   "appMenus.logs": "Logs",
   "appMenus.overview": "Monitoring",
@@ -152,6 +153,7 @@
   "dataSource.website.with": "With",
   "datasetMenus.documents": "Documents",
   "datasetMenus.emptyTip": "This Knowledge has not been integrated within any application. Please refer to the document for guidance.",
+  "datasetMenus.evaluation": "Evaluation",
   "datasetMenus.hitTesting": "Retrieval Testing",
   "datasetMenus.noRelatedApp": "No linked apps",
   "datasetMenus.pipeline": "Pipeline",
diff --git a/web/i18n/en-US/evaluation.json b/web/i18n/en-US/evaluation.json
new file mode 100644
index 0000000000..9802bc904c
--- /dev/null
+++ b/web/i18n/en-US/evaluation.json
@@ -0,0 +1,141 @@
+{
+  "batch.description": "Execute batch evaluations and track performance history.",
+  "batch.downloadTemplate": "Download Excel Template",
+  "batch.emptyHistory": "No test history yet.",
+  "batch.example": "Example:",
+  "batch.fileRequired": "Upload an evaluation dataset file before running the test.",
+  "batch.loadingInputFields": "Loading input fields...",
+  "batch.noInputFields": "No published start node input fields found.",
+  "batch.noticeDescription": "Configuration incomplete. Select the Judge Model and Metrics on the left to generate your batch test template.",
+  "batch.noticeTitle": "Quick start",
+  "batch.removeUploadedFile": "Remove uploaded file",
+  "batch.requirementsDescription": "The input variables required to run this batch test. Ensure your uploaded dataset matches these fields.",
+  "batch.requirementsTitle": "Data requirements",
+  "batch.run": "Run Test",
+  "batch.runFailed": "Failed to start batch test.",
+  "batch.runStarted": "Batch test started.",
+  "batch.status.failed": "Failed",
+  "batch.status.running": "Running",
+  "batch.status.success": "Success",
+  "batch.tabs.history": "Test History",
+  "batch.tabs.input-fields": "Input Fields",
+  "batch.title": "Batch Test",
+  "batch.uploadAndRun": "Upload & Run Test",
+  "batch.uploadDropzoneDownloadLink": "here",
+  "batch.uploadDropzoneDownloadPrefix": "Don't have the template? Download",
+  "batch.uploadDropzoneEmphasis": "filled",
+  "batch.uploadDropzonePrefix": "Drag and drop your",
+  "batch.uploadDropzoneSuffix": "Excel Template",
+  "batch.uploadError": "Failed to upload file.",
+  "batch.uploadHint": "Select a .csv or .xlsx file",
+  "batch.uploadTitle": "Upload test file",
+  "batch.uploading": "Uploading file...",
+  "batch.validation": "Complete the judge model, metrics, and custom mappings before running a batch test.",
+  "conditions.addCondition": "Add Condition",
+  "conditions.addGroup": "Add Condition Group",
+  "conditions.boolean.false": "False",
+  "conditions.boolean.true": "True",
+  "conditions.description": "Define additional rules for when results should pass or fail.",
+  "conditions.emptyDescription": "Add metrics above to configure pass/fail thresholds.",
+  "conditions.emptyTitle": "No conditions yet",
+  "conditions.fieldPlaceholder": "Select metric",
+  "conditions.groupLabel": "Group {{index}}",
+  "conditions.logical.and": "AND",
+  "conditions.logical.or": "OR",
+  "conditions.operators.contains": "Contains",
+  "conditions.operators.greater_or_equal": "Greater than or equal",
+  "conditions.operators.greater_than": "Greater than",
+  "conditions.operators.is": "Is",
+  "conditions.operators.is_empty": "Is empty",
+  "conditions.operators.is_not": "Is not",
+  "conditions.operators.is_not_empty": "Is not empty",
+  "conditions.operators.less_or_equal": "Less than or equal",
+  "conditions.operators.less_than": "Less than",
+  "conditions.operators.not_contains": "Does not contain",
+  "conditions.removeCondition": "Remove condition",
+  "conditions.removeGroup": "Remove condition group",
+  "conditions.selectFieldFirst": "Select a metric first",
+  "conditions.selectValue": "Choose a value",
+  "conditions.title": "Judgment Conditions",
+  "conditions.valuePlaceholder": "Enter a value",
+  "conditions.valueTypes.boolean": "Boolean",
+  "conditions.valueTypes.number": "Number",
+  "conditions.valueTypes.string": "String",
+  "config.saveFailed": "Failed to save evaluation configuration.",
+  "description": "Configure automated testing to grade your application's performance.",
+  "history.actions.downloadResultFile": "Download result",
+  "history.actions.downloadTestFile": "Download test file",
+  "history.actions.open": "Open history actions",
+  "history.columns.creator": "Creator",
+  "history.columns.status": "Status",
+  "history.columns.time": "Time",
+  "history.columns.version": "Version",
+  "history.creatorYou": "You",
+  "history.empty": "No test history yet",
+  "history.latestVersion": "Latest",
+  "history.searchPlaceholder": "Search",
+  "history.status.completed": "Completed",
+  "history.status.running": "Running",
+  "history.title": "Test History",
+  "judgeModel.description": "Choose the model used to score your evaluation results.",
+  "judgeModel.title": "Judge Model",
+  "metrics.add": "Add Metric",
+  "metrics.addCustom": "Add Custom Metrics",
+  "metrics.addNode": "Add Node",
+  "metrics.added": "Added",
+  "metrics.builtin.description.answerCorrectness": "Measures the factual accuracy and completeness of the model's answer relative to a ground-truth reference. It combines semantic similarity with key-fact coverage, so both meaning and content matter.",
+  "metrics.builtin.description.answerRelevancy": "Measures how well the model's response addresses the user's question. A high score means the answer stays on-topic; a low score indicates irrelevant content or a failure to answer the actual question.",
+  "metrics.builtin.description.contextPrecision": "Measures the proportion of retrieved context chunks that are actually relevant to the question (precision). A high score means the retrieval pipeline returns little noise.",
+  "metrics.builtin.description.contextRecall": "Measures the proportion of ground-truth information that is covered by the retrieved context chunks (recall). A high score means the retrieval pipeline does not miss important supporting evidence.",
+  "metrics.builtin.description.contextRelevance": "Measures how relevant each individual retrieved chunk is to the query. Similar to CONTEXT_PRECISION but evaluated at the chunk level rather than against a reference answer.",
+  "metrics.builtin.description.faithfulness": "Measures whether every claim in the model's response is grounded in the provided retrieved context. A high score means the answer contains no hallucinated content; each statement can be traced back to a passage in the context.",
+  "metrics.builtin.description.semanticSimilarity": "Measures the cosine similarity between the model's response and the reference answer in an embedding space. It evaluates whether the two texts convey the same meaning, independent of factual correctness.",
+  "metrics.builtin.description.taskCompletion": "Measures whether the agent ultimately achieves the user's stated goal. It evaluates the reasoning chain, intermediate steps, and final output holistically; a high score means the task was fully accomplished.",
+  "metrics.builtin.description.toolCorrectness": "Measures the correctness of the tool calls made by the agent during task execution: both the choice of tool and the arguments passed. A high score means the agent's tool-use strategy matches the expected behavior.",
+  "metrics.collapseNodes": "Collapse nodes",
+  "metrics.custom.description": "Select an evaluation workflow and map your variables before running tests.",
+  "metrics.custom.footerDescription": "Connect your published evaluation workflows",
+  "metrics.custom.footerTitle": "Custom metrics",
+  "metrics.custom.limitDescription": "Only one custom metric can be added.",
+  "metrics.custom.mappingTitle": "Variable Mapping",
+  "metrics.custom.mappingWarning": "Complete the workflow selection and each variable mapping to enable batch tests.",
+  "metrics.custom.outputPlaceholder": "Select an output variable",
+  "metrics.custom.outputTitle": "Output",
+  "metrics.custom.title": "Custom Evaluator",
+  "metrics.custom.warningBadge": "Needs setup",
+  "metrics.custom.workflowLabel": "Evaluation Workflow",
+  "metrics.custom.workflowPlaceholder": "Select a workflow",
+  "metrics.description": "Choose from built-in metrics like Groundedness and Correctness to evaluate your workflow outputs.",
+  "metrics.expandNodes": "Expand nodes",
+  "metrics.groups.operations": "Operations",
+  "metrics.groups.other": "Other",
+  "metrics.groups.quality": "Quality",
+  "metrics.noNodesInWorkflow": "No LLM nodes in this workflow",
+  "metrics.noResults": "No metrics or nodes were found",
+  "metrics.nodesAll": "All nodes",
+  "metrics.nodesLabel": "Node Scope",
+  "metrics.nodesSelected": "Selected nodes",
+  "metrics.remove": "Remove metric",
+  "metrics.searchNodeOrMetrics": "Search node or metrics",
+  "metrics.searchPlaceholder": "Search metrics",
+  "metrics.showLess": "Show less",
+  "metrics.showMore": "Show more",
+  "metrics.title": "Metrics",
+  "metrics.update": "Update",
+  "pipeline.passIf": "Pass if \u2265",
+  "pipeline.uploadAndRun": "Upload & Run Test",
+  "results.columns.actual": "Actual Result",
+  "results.columns.expected": "Expect Result",
+  "results.columns.query": "Query Content",
+  "results.empty": "No evaluation results yet.",
+  "results.export": "Export",
+  "results.loadFailed": "Failed to load evaluation results.",
+  "results.metricThreshold": "{{metric}} \u2265 {{threshold}}",
+  "results.noResult": "No Result",
+  "results.queryCount_one": "{{count}} query",
+  "results.queryCount_other": "{{count}} queries",
+  "results.status.failed": "Failed",
+  "results.status.passed": "Passed",
+  "results.title": "Test Details",
+  "title": "Evaluation"
+}
diff --git a/web/i18n/en-US/snippet.json b/web/i18n/en-US/snippet.json
new file mode 100644
index 0000000000..fda6980f69
--- /dev/null
+++ b/web/i18n/en-US/snippet.json
@@ -0,0 +1,37 @@
+{
+  "create": "CREATE SNIPPET",
+  "createFailed": "Failed to create snippet",
+  "createFromBlank": "Create from blank",
+  "defaultName": "Untitled Snippet",
+  "deleteConfirmContent": "Deleting this snippet is irreversible. Its draft workflow and published content will no longer be available.",
+  "deleteConfirmTitle": "Delete Snippet?",
+  "deleteFailed": "Failed to delete snippet",
+  "deleted": "Snippet deleted",
+  "editDialogTitle": "Edit Snippet Info",
+  "editDone": "Snippet info updated",
+  "editFailed": "Failed to update snippet info",
+  "exportFailed": "Export snippet failed.",
+  "importFailed": "Failed to import snippet DSL",
+  "importSuccess": "Snippet imported",
+  "inputFieldButton": "Input Field",
+  "menu.deleteSnippet": "Delete",
+  "menu.editInfo": "Edit Info",
+  "menu.exportSnippet": "Export Snippet",
+  "notFoundDescription": "The requested snippet mock was not found.",
+  "notFoundTitle": "Snippet not found",
+  "panelDescription": "Defines the input fields that allow the snippet to receive data from other nodes.",
+  "panelPrimaryGroup": "Core inputs",
+  "panelSecondaryGroup": "Optional inputs",
+  "panelTitle": "Input Field",
+  "publishButton": "Publish",
+  "publishFailed": "Failed to publish snippet",
+  "publishMenuCurrentDraft": "Current draft unpublished",
+  "publishSuccess": "Snippet published",
+  "save": "Save",
+  "sectionEvaluation": "Evaluation",
+  "sectionOrchestrate": "Orchestrate",
+  "testRunButton": "Test run",
+  "typeLabel": "Snippet",
+  "usageCount": "Used {{count}} times",
+  "variableInspect": "Variable Inspect"
+}
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index aaadce8814..86fe288b82 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -228,6 +228,8 @@
   "common.previewPlaceholder": "Enter content in the box below to start debugging the Chatbot",
   "common.processData": "Process Data",
   "common.publish": "Publish",
+  "common.publishAsEvaluationWorkflow": "Publish as Evaluation Workflow",
+  "common.publishAsStandardWorkflow": "Publish as Standard Workflow",
   "common.publishUpdate": "Publish Update",
   "common.published": "Published",
   "common.publishedAt": "Published",
@@ -243,6 +245,21 @@
   "common.searchVar": "Search variable",
   "common.setVarValuePlaceholder": "Set variable",
   "common.showRunHistory": "Show Run History",
+  "common.switchToEvaluationWorkflow": "Switch to Evaluation Workflow",
+  "common.switchToEvaluationWorkflowDisabledTip": "Evaluation workflows do not support Human Input nodes or Trigger start nodes.",
+  "common.switchToEvaluationWorkflowTip": "Turns this workflow into a custom evaluator for batch testing. Disables public Web App access.",
+  "common.switchToStandardWorkflow": "Switch to Standard Workflow",
+  "common.switchToStandardWorkflowConfirm.activeIn_one": "This evaluator is currently active in {{count}} configuration.",
+  "common.switchToStandardWorkflowConfirm.activeIn_other": "This evaluator is currently active in {{count}} configurations.",
+  "common.switchToStandardWorkflowConfirm.dependentWorkflows": "Dependent workflows",
+  "common.switchToStandardWorkflowConfirm.description": "Switching to a standard workflow will break these dependencies and may cause active batch tests to fail.",
+  "common.switchToStandardWorkflowConfirm.loadFailed": "Failed to load dependent workflows.",
+  "common.switchToStandardWorkflowConfirm.switch": "Switch",
+  "common.switchToStandardWorkflowConfirm.targetTypes.app": "Workflow",
+  "common.switchToStandardWorkflowConfirm.targetTypes.knowledge_base": "Knowledge Base",
+  "common.switchToStandardWorkflowConfirm.targetTypes.snippets": "Snippet",
+  "common.switchToStandardWorkflowConfirm.title": "Switch to Standard Workflow?",
+  "common.switchToStandardWorkflowTip": "Turns this evaluator back into a standard workflow and restores public Web App access.",
   "common.syncingData": "Syncing data, just a few seconds.",
   "common.tagBound": "Number of apps using this tag",
   "common.undo": "Undo",
@@ -1143,6 +1160,16 @@
   "singleRun.testRun": "Test Run",
   "singleRun.testRunIteration": "Test Run Iteration",
   "singleRun.testRunLoop": "Test Run Loop",
+  "snippet.addToSnippet": "Add to snippet",
+  "snippet.confirm": "Confirm",
+  "snippet.createDialogTitle": "Create Snippet",
+  "snippet.createSuccess": "Snippet created",
+  "snippet.descriptionLabel": "Description (Optional)",
+  "snippet.descriptionPlaceholder": "Briefly describe your snippet",
+  "snippet.nameLabel": "Snippet Name & Icon",
+  "snippet.namePlaceholder": "Snippet name",
+  "snippet.shortcuts.press": "Press",
+  "snippet.shortcuts.toConfirm": "to confirm",
   "tabs.-": "Default",
   "tabs.addAll": "Add all",
   "tabs.agent": "Agent Strategy",
@@ -1150,6 +1177,7 @@
   "tabs.allTool": "All",
   "tabs.allTriggers": "All triggers",
   "tabs.blocks": "Nodes",
+  "tabs.createSnippet": "Create a snippet",
   "tabs.customTool": "Custom",
   "tabs.featuredTools": "Featured",
   "tabs.hideActions": "Hide tools",
@@ -1159,19 +1187,23 @@
   "tabs.noFeaturedTriggers": "Discover more triggers in Marketplace",
   "tabs.noPluginsFound": "No plugins were found",
   "tabs.noResult": "No match found",
+  "tabs.noSnippetsFound": "No snippets were found",
   "tabs.plugin": "Plugin",
   "tabs.pluginByAuthor": "By {{author}}",
   "tabs.question-understand": "Question Understand",
   "tabs.requestToCommunity": "Requests to the community",
   "tabs.searchBlock": "Search node",
   "tabs.searchDataSource": "Search Data Source",
+  "tabs.searchSnippets": "Search snippets...",
   "tabs.searchTool": "Search tool",
   "tabs.searchTrigger": "Search triggers...",
   "tabs.showLessFeatured": "Show less",
   "tabs.showMoreFeatured": "Show more",
+  "tabs.snippets": "Snippets",
   "tabs.sources": "Sources",
   "tabs.start": "Start",
   "tabs.startDisabledTip": "Trigger node and user input node are mutually exclusive.",
+  "tabs.startNotSupportedTip": "The Start tab is not supported in snippets.",
   "tabs.tools": "Tools",
   "tabs.transform": "Transform",
   "tabs.usePlugin": "Select tool",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index 2b7ca99452..203d31bc57 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Contenido almacenado",
   "chatVariable.updatedAt": "Actualizado el ",
   "collaboration.historyAction.generic": "Un colaborador realizó deshacer/rehacer",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Añadir un comentario",
   "comments.actions.deleteReply": "Eliminar respuesta",
   "comments.actions.editComment": "Editar comentario",
   "comments.actions.editReply": "Editar respuesta",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Error al eliminar la versión",
   "versionHistory.action.deleteSuccess": "Versión eliminada",
   "versionHistory.action.restoreFailure": "Error al restaurar la versión",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} está restaurando a la versión {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versión restaurada",
   "versionHistory.action.updateFailure": "Error al actualizar la versión",
   "versionHistory.action.updateSuccess": "Versión actualizada",
diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index 7914b861ed..6b502a0318 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "محتوای ذخیره‌شده",
   "chatVariable.updatedAt": "به‌روزرسانی شده در ",
   "collaboration.historyAction.generic": "یک همکار عملیات برگرداندن/انجام مجدد را انجام داد",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "افزودن دیدگاه",
   "comments.actions.deleteReply": "حذف پاسخ",
   "comments.actions.editComment": "ویرایش دیدگاه",
   "comments.actions.editReply": "ویرایش پاسخ",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index d4fbd8f27a..106665d2bf 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Contenu stocké",
   "chatVariable.updatedAt": "Mis à jour le ",
   "collaboration.historyAction.generic": "Un collaborateur a effectué une annulation/une réexécution",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Ajouter un commentaire",
   "comments.actions.deleteReply": "Supprimer la réponse",
   "comments.actions.editComment": "Modifier le commentaire",
   "comments.actions.editReply": "Modifier la réponse",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Échec de la suppression de la version",
   "versionHistory.action.deleteSuccess": "Version supprimée",
   "versionHistory.action.restoreFailure": "Échec de la restauration de la version",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} restaure la version {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Version restaurée",
   "versionHistory.action.updateFailure": "Échec de la mise à jour de la version",
   "versionHistory.action.updateSuccess": "Version mise à jour",
diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json
index 5c3b6eb1f9..777711ef22 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "संग्रहीत सामग्री",
   "chatVariable.updatedAt": "अपडेट किया गया ",
   "collaboration.historyAction.generic": "एक सहयोगी ने Undo/Redo किया",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "टिप्पणी जोड़ें",
   "comments.actions.deleteReply": "जवाब हटाएं",
   "comments.actions.editComment": "टिप्पणी संपादित करें",
   "comments.actions.editReply": "जवाब संपादित करें",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "संस्करण को हटाने में विफल",
   "versionHistory.action.deleteSuccess": "संस्करण हटाया गया",
   "versionHistory.action.restoreFailure": "संस्करण को पुनर्स्थापित करने में विफल",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} संस्करण {{versionName}} को पुनर्स्थापित कर रहे हैं...",
   "versionHistory.action.restoreSuccess": "संस्करण पुनर्स्थापित किया गया",
   "versionHistory.action.updateFailure": "संस्करण अपडेट करने में विफल",
   "versionHistory.action.updateSuccess": "संस्करण अपडेट किया गया",
diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json
index 376227eedf..6150fc6505 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Konten yang disimpan",
   "chatVariable.updatedAt": "Diperbarui pada",
   "collaboration.historyAction.generic": "Seorang kolaborator melakukan urungkan/ulang",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Tambahkan komentar",
   "comments.actions.deleteReply": "Hapus balasan",
   "comments.actions.editComment": "Edit komentar",
   "comments.actions.editReply": "Edit balasan",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Gagal menghapus versi",
   "versionHistory.action.deleteSuccess": "Versi dihapus",
   "versionHistory.action.restoreFailure": "Gagal memulihkan versi",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} sedang memulihkan ke versi {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versi dipulihkan",
   "versionHistory.action.updateFailure": "Gagal memperbarui versi",
   "versionHistory.action.updateSuccess": "Versi diperbarui",
diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json
index 7bd102f745..533e6a1b7d 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Contenuto memorizzato",
   "chatVariable.updatedAt": "Aggiornato il ",
   "collaboration.historyAction.generic": "Un collaboratore ha eseguito annulla/ripristina",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Aggiungi un commento",
   "comments.actions.deleteReply": "Elimina risposta",
   "comments.actions.editComment": "Modifica commento",
   "comments.actions.editReply": "Modifica risposta",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Impossibile eliminare la versione",
   "versionHistory.action.deleteSuccess": "Versione eliminata",
   "versionHistory.action.restoreFailure": "Impossibile ripristinare la versione",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} sta ripristinando alla versione {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versione ripristinata",
   "versionHistory.action.updateFailure": "Impossibile aggiornare la versione",
   "versionHistory.action.updateSuccess": "Versione aggiornata",
diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json
index 9564abc43d..07aaa99132 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "保存内容",
   "chatVariable.updatedAt": "最終更新：",
   "collaboration.historyAction.generic": "共同編集者が元に戻す/やり直しを実行しました",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "コメントを追加",
   "comments.actions.deleteReply": "返信を削除",
   "comments.actions.editComment": "コメントを編集",
   "comments.actions.editReply": "返信を編集",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "削除に失敗しました",
   "versionHistory.action.deleteSuccess": "削除が完了しました",
   "versionHistory.action.restoreFailure": "復元に失敗しました",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} がバージョン {{versionName}} に復元中です...",
   "versionHistory.action.restoreSuccess": "復元が完了しました",
   "versionHistory.action.updateFailure": "更新に失敗しました",
   "versionHistory.action.updateSuccess": "更新が完了しました",
diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json
index 7dfeda4573..fcdf681ab1 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "저장된 내용",
   "chatVariable.updatedAt": "업데이트 시간: ",
   "collaboration.historyAction.generic": "공동 작업자가 실행 취소/다시 실행을 수행했습니다",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "댓글 추가",
   "comments.actions.deleteReply": "답글 삭제",
   "comments.actions.editComment": "댓글 편집",
   "comments.actions.editReply": "답글 편집",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "버전을 삭제하지 못했습니다.",
   "versionHistory.action.deleteSuccess": "버전 삭제됨",
   "versionHistory.action.restoreFailure": "버전을 복원하지 못했습니다.",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}}님이 버전 {{versionName}}로 복원하는 중입니다...",
   "versionHistory.action.restoreSuccess": "복원된 버전",
   "versionHistory.action.updateFailure": "버전 업데이트에 실패했습니다.",
   "versionHistory.action.updateSuccess": "버전이 업데이트되었습니다.",
diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json
index 852415b419..ce1438df6b 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Stored content",
   "chatVariable.updatedAt": "Updated at ",
   "collaboration.historyAction.generic": "Een medewerker heeft een ongedaan maken/opnieuw uitvoeren-actie uitgevoerd",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Voeg een reactie toe",
   "comments.actions.deleteReply": "Antwoord verwijderen",
   "comments.actions.editComment": "Reactie bewerken",
   "comments.actions.editReply": "Antwoord bewerken",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 996681f50b..23f3f2cebd 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Przechowywana zawartość",
   "chatVariable.updatedAt": "Zaktualizowano ",
   "collaboration.historyAction.generic": "Współpracownik wykonał cofnięcie/ponowienie",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Dodaj komentarz",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Edytuj komentarz",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Nie udało się usunąć wersji",
   "versionHistory.action.deleteSuccess": "Wersja usunięta",
   "versionHistory.action.restoreFailure": "Nie udało się przywrócić wersji",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} przywraca wersję {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Wersja przywrócona",
   "versionHistory.action.updateFailure": "Nie udało się zaktualizować wersji",
   "versionHistory.action.updateSuccess": "Wersja zaktualizowana",
diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json
index 74af4a8e62..963bb0c176 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Conteúdo armazenado",
   "chatVariable.updatedAt": "Atualizado em ",
   "collaboration.historyAction.generic": "Um colaborador realizou desfazer/refazer",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Adicionar comentário",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Editar comentário",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Falha ao deletar versão",
   "versionHistory.action.deleteSuccess": "Versão excluída",
   "versionHistory.action.restoreFailure": "Falha ao restaurar versão",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} está restaurando para a versão {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versão restaurada",
   "versionHistory.action.updateFailure": "Falha ao atualizar a versão",
   "versionHistory.action.updateSuccess": "Versão atualizada",
diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json
index 6c02f5fc3c..2550c6afd2 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Conținut stocat",
   "chatVariable.updatedAt": "Actualizat la ",
   "collaboration.historyAction.generic": "Un colaborator a efectuat anulare/refacere",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Adaugă un comentariu",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Editează comentariul",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Ștergerea versiunii a eșuat",
   "versionHistory.action.deleteSuccess": "Versiune ștearsă",
   "versionHistory.action.restoreFailure": "Restaurarea versiunii a eșuat",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} restaurează la versiunea {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Versiune restaurată",
   "versionHistory.action.updateFailure": "Actualizarea versiunii a eșuat",
   "versionHistory.action.updateSuccess": "Versiune actualizată",
diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json
index 87153206a9..a13a7afe28 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Сохраненный контент",
   "chatVariable.updatedAt": "Обновлено в ",
   "collaboration.historyAction.generic": "Участник выполнил отмену/повтор",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Добавить комментарий",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Редактировать комментарий",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Не удалось удалить версию",
   "versionHistory.action.deleteSuccess": "Версия удалена",
   "versionHistory.action.restoreFailure": "Не удалось восстановить версию",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} восстанавливает версию {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Версия восстановлена",
   "versionHistory.action.updateFailure": "Не удалось обновить версию",
   "versionHistory.action.updateSuccess": "Версия обновлена",
diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json
index 987d439f9a..deb71836b7 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Shranjena vsebina",
   "chatVariable.updatedAt": "Posodobljeno ob",
   "collaboration.historyAction.generic": "Sodelavec je izvedel razveljavitev/ponovitev",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Dodaj komentar",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Uredi komentar",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Brisanje različice ni uspelo",
   "versionHistory.action.deleteSuccess": "Različica izbrisana",
   "versionHistory.action.restoreFailure": "Obnavljanje različice ni uspelo",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} obnavlja različico {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Obnovljena različica",
   "versionHistory.action.updateFailure": "Posodobitev različice ni uspela",
   "versionHistory.action.updateSuccess": "Različica posodobljena",
diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json
index 424f510d4a..75c82b883d 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "เนื้อหาที่เก็บไว้",
   "chatVariable.updatedAt": "อัพเดทเมื่อ",
   "collaboration.historyAction.generic": "ผู้ร่วมงานได้ทำการยกเลิก/ทำซ้ำ",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "เพิ่มความคิดเห็น",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "แก้ไขความคิดเห็น",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "ลบเวอร์ชันไม่สำเร็จ",
   "versionHistory.action.deleteSuccess": "เวอร์ชันถูกลบ",
   "versionHistory.action.restoreFailure": "ไม่สามารถกู้คืนเวอร์ชันได้",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} กำลังกู้คืนไปยังเวอร์ชัน {{versionName}}...",
   "versionHistory.action.restoreSuccess": "เวอร์ชันที่กู้คืน",
   "versionHistory.action.updateFailure": "ไม่สามารถอัปเดตเวอร์ชันได้",
   "versionHistory.action.updateSuccess": "อัปเดตเวอร์ชัน",
diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json
index ce43144e5c..3943a3c067 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Depolanan içerik",
   "chatVariable.updatedAt": "Güncellenme zamanı: ",
   "collaboration.historyAction.generic": "Bir işbirlikçi geri alma/yeniden yapma gerçekleştirdi",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Yorum ekle",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Yorumu düzenle",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Versiyonu silme işlemi başarısız oldu",
   "versionHistory.action.deleteSuccess": "Sürüm silindi",
   "versionHistory.action.restoreFailure": "Sürümü geri yüklemekte başarısız olundu",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}}, {{versionName}} sürümüne geri dönüyor...",
   "versionHistory.action.restoreSuccess": "Sürüm geri yüklendi",
   "versionHistory.action.updateFailure": "Sürüm güncellenemedi",
   "versionHistory.action.updateSuccess": "Sürüm güncellendi",
diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json
index 76cd3eddee..088df91e32 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Збережений вміст",
   "chatVariable.updatedAt": "Оновлено ",
   "collaboration.historyAction.generic": "Співавтор виконав скасування/повторення",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Додати коментар",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Редагувати коментар",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Не вдалося видалити версію",
   "versionHistory.action.deleteSuccess": "Версія видалена",
   "versionHistory.action.restoreFailure": "Не вдалося відновити версію",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} відновлює до версії {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Версія відновлена",
   "versionHistory.action.updateFailure": "Не вдалося оновити версію",
   "versionHistory.action.updateSuccess": "Версія оновлена",
diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json
index 7750f0efb6..be1dc9cb9c 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "Nội dung đã lưu",
   "chatVariable.updatedAt": "Cập nhật lúc ",
   "collaboration.historyAction.generic": "Một cộng tác viên đã thực hiện hoàn tác/làm lại",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "Thêm bình luận",
   "comments.actions.deleteReply": "Delete reply",
   "comments.actions.editComment": "Chỉnh sửa bình luận",
   "comments.actions.editReply": "Edit reply",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "Xóa phiên bản thất bại",
   "versionHistory.action.deleteSuccess": "Phiên bản đã bị xóa",
   "versionHistory.action.restoreFailure": "Không thể khôi phục phiên bản",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} đang khôi phục về phiên bản {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Phiên bản đã được khôi phục",
   "versionHistory.action.updateFailure": "Cập nhật phiên bản không thành công",
   "versionHistory.action.updateSuccess": "Phiên bản đã được cập nhật",
diff --git a/web/i18n/zh-Hans/app-log.json b/web/i18n/zh-Hans/app-log.json
index ef043d1b70..0a825da172 100644
--- a/web/i18n/zh-Hans/app-log.json
+++ b/web/i18n/zh-Hans/app-log.json
@@ -54,6 +54,7 @@
   "table.empty.noOutput": "无输出",
   "table.header.adminRate": "管理员反馈",
   "table.header.endUser": "用户或账户",
+  "table.header.evaluation": "评测",
   "table.header.input": "输入",
   "table.header.messageCount": "消息数",
   "table.header.output": "输出",
diff --git a/web/i18n/zh-Hans/common.json b/web/i18n/zh-Hans/common.json
index 924142e36f..604c7181f4 100644
--- a/web/i18n/zh-Hans/common.json
+++ b/web/i18n/zh-Hans/common.json
@@ -93,6 +93,7 @@
   "apiBasedExtension.type": "类型",
   "appMenus.apiAccess": "访问 API",
   "appMenus.apiAccessTip": "此知识库可通过服务 API 访问",
+  "appMenus.evaluation": "评测",
   "appMenus.logAndAnn": "日志与标注",
   "appMenus.logs": "日志",
   "appMenus.overview": "监测",
@@ -152,6 +153,7 @@
   "dataSource.website.with": "使用",
   "datasetMenus.documents": "文档",
   "datasetMenus.emptyTip": "此知识尚未集成到任何应用程序中。请参阅文档以获取指导。",
+  "datasetMenus.evaluation": "评测",
   "datasetMenus.hitTesting": "召回测试",
   "datasetMenus.noRelatedApp": "无关联应用",
   "datasetMenus.pipeline": "流水线",
diff --git a/web/i18n/zh-Hans/evaluation.json b/web/i18n/zh-Hans/evaluation.json
new file mode 100644
index 0000000000..0f499426e4
--- /dev/null
+++ b/web/i18n/zh-Hans/evaluation.json
@@ -0,0 +1,135 @@
+{
+  "batch.description": "执行批量评测并追踪性能历史。",
+  "batch.downloadTemplate": "下载 Excel 模板",
+  "batch.emptyHistory": "还没有测试历史。",
+  "batch.example": "示例：",
+  "batch.fileRequired": "请先上传评估数据集文件，再运行测试。",
+  "batch.loadingInputFields": "正在加载输入字段...",
+  "batch.noInputFields": "未找到已发布 Start 节点的输入字段。",
+  "batch.noticeDescription": "配置尚未完成。请先在左侧选择判定模型和指标，以生成批量测试模板。",
+  "batch.noticeTitle": "快速开始",
+  "batch.removeUploadedFile": "移除已上传文件",
+  "batch.requirementsDescription": "运行此批量测试所需的输入变量。请确保上传的数据集包含这些字段。",
+  "batch.requirementsTitle": "数据要求",
+  "batch.run": "运行测试",
+  "batch.runFailed": "启动批量测试失败。",
+  "batch.runStarted": "批量测试已启动。",
+  "batch.status.failed": "失败",
+  "batch.status.running": "运行中",
+  "batch.status.success": "成功",
+  "batch.tabs.history": "测试历史",
+  "batch.tabs.input-fields": "输入字段",
+  "batch.title": "批量测试",
+  "batch.uploadAndRun": "上传并运行测试",
+  "batch.uploadDropzoneDownloadLink": "下载",
+  "batch.uploadDropzoneDownloadPrefix": "还没有模板？",
+  "batch.uploadDropzoneEmphasis": "已填写的",
+  "batch.uploadDropzonePrefix": "拖拽你的",
+  "batch.uploadDropzoneSuffix": "Excel 模板",
+  "batch.uploadError": "文件上传失败。",
+  "batch.uploadHint": "选择 .csv 或 .xlsx 文件",
+  "batch.uploadTitle": "上传测试文件",
+  "batch.uploading": "文件上传中...",
+  "batch.validation": "运行批量测试前，请先完成判定模型、指标和自定义映射配置。",
+  "conditions.addCondition": "添加条件",
+  "conditions.addGroup": "添加条件组",
+  "conditions.boolean.false": "否",
+  "conditions.boolean.true": "是",
+  "conditions.description": "定义额外规则，决定结果何时通过或失败。",
+  "conditions.emptyDescription": "请先添加上方指标，再配置通过 / 失败阈值。",
+  "conditions.emptyTitle": "还没有条件",
+  "conditions.fieldPlaceholder": "选择指标",
+  "conditions.groupLabel": "条件组 {{index}}",
+  "conditions.logical.and": "且",
+  "conditions.logical.or": "或",
+  "conditions.operators.contains": "包含",
+  "conditions.operators.greater_or_equal": "大于等于",
+  "conditions.operators.greater_than": "大于",
+  "conditions.operators.is": "等于",
+  "conditions.operators.is_empty": "为空",
+  "conditions.operators.is_not": "不等于",
+  "conditions.operators.is_not_empty": "不为空",
+  "conditions.operators.less_or_equal": "小于等于",
+  "conditions.operators.less_than": "小于",
+  "conditions.operators.not_contains": "不包含",
+  "conditions.removeCondition": "删除条件",
+  "conditions.removeGroup": "删除条件组",
+  "conditions.selectFieldFirst": "请先选择指标",
+  "conditions.selectValue": "选择值",
+  "conditions.title": "判定条件",
+  "conditions.valuePlaceholder": "输入值",
+  "conditions.valueTypes.boolean": "布尔",
+  "conditions.valueTypes.number": "数值",
+  "conditions.valueTypes.string": "文本",
+  "config.saveFailed": "保存评测配置失败。",
+  "description": "配置自动化测试，对应用表现进行评分。",
+  "history.actions.downloadResultFile": "下载结果文件",
+  "history.actions.downloadTestFile": "下载测试文件",
+  "history.actions.open": "打开历史记录操作",
+  "history.columns.creator": "创建人",
+  "history.columns.status": "状态",
+  "history.columns.time": "时间",
+  "history.columns.version": "版本",
+  "history.creatorYou": "你",
+  "history.empty": "还没有测试历史",
+  "history.latestVersion": "最新",
+  "history.searchPlaceholder": "搜索",
+  "history.status.completed": "已完成",
+  "history.status.running": "运行中",
+  "history.title": "测试历史",
+  "judgeModel.description": "选择用于打分和判定评测结果的模型。",
+  "judgeModel.title": "判定模型",
+  "metrics.add": "添加指标",
+  "metrics.addCustom": "添加自定义指标",
+  "metrics.addNode": "添加节点",
+  "metrics.added": "已添加",
+  "metrics.builtin.description.answerCorrectness": "衡量模型回答相对于标准答案的事实准确性与完整性。它结合了语义相似度与关键信息覆盖情况，因此不仅关注表达含义，也关注内容是否完整准确。",
+  "metrics.builtin.description.answerRelevancy": "衡量模型回答与用户问题的贴合程度。高分表示回答始终围绕问题展开；低分表示内容偏题，或没有真正回答用户的实际问题。",
+  "metrics.builtin.description.contextPrecision": "衡量检索出的上下文片段中，实际与问题相关的内容占比（Precision）。高分表示检索流程带回的噪声较少。",
+  "metrics.builtin.description.contextRecall": "衡量标准答案所需的真实信息，有多少被检索出的上下文片段覆盖到（Recall）。高分表示检索流程没有遗漏重要的支撑证据。",
+  "metrics.builtin.description.contextRelevance": "衡量每一个被检索出的上下文片段与查询的相关程度。它与 CONTEXT_PRECISION 类似，但评估粒度在单个 chunk 层面，而不是相对于参考答案整体评估。",
+  "metrics.builtin.description.faithfulness": "衡量模型回答中的每一个陈述，是否都能从提供的检索上下文中找到依据。高分表示回答中没有幻觉内容，每一条表述都可以追溯到上下文中的某个片段。",
+  "metrics.builtin.description.semanticSimilarity": "衡量模型回答与参考答案在向量语义空间中的余弦相似度。它评估的是两段文本是否表达了相同含义，而不直接判断事实是否正确。",
+  "metrics.builtin.description.taskCompletion": "衡量 Agent 是否最终完成了用户明确提出的目标。它会整体评估推理链路、中间步骤和最终输出；高分表示任务已被完整达成。",
+  "metrics.builtin.description.toolCorrectness": "衡量 Agent 在任务执行过程中发起的工具调用是否正确，包括工具选择本身以及传入参数是否合理。高分表示 Agent 的工具使用策略符合预期行为。",
+  "metrics.custom.description": "选择评测工作流并完成变量映射后即可运行测试。",
+  "metrics.custom.mappingTitle": "变量映射",
+  "metrics.custom.mappingWarning": "请先完成工作流选择和所有变量映射，再运行批量测试。",
+  "metrics.custom.title": "自定义评测器",
+  "metrics.custom.warningBadge": "待配置",
+  "metrics.custom.workflowLabel": "评测工作流",
+  "metrics.custom.workflowPlaceholder": "选择工作流",
+  "metrics.description": "从内置指标中选择，如 Groundedness 和 Correctness ，以评估您的工作流输出。",
+  "metrics.expandNodes": "展开节点",
+  "metrics.groups.operations": "运行",
+  "metrics.groups.other": "其他",
+  "metrics.groups.quality": "质量",
+  "metrics.noNodesInWorkflow": "当前工作流中没有 LLM 节点",
+  "metrics.noResults": "没有匹配的指标。",
+  "metrics.nodesAll": "全部节点",
+  "metrics.nodesLabel": "节点范围",
+  "metrics.nodesSelected": "已选节点",
+  "metrics.remove": "删除指标",
+  "metrics.searchNodeOrMetrics": "搜索节点或指标",
+  "metrics.searchPlaceholder": "搜索指标",
+  "metrics.showLess": "收起",
+  "metrics.showMore": "展开更多",
+  "metrics.title": "指标",
+  "metrics.update": "更新",
+  "pipeline.passIf": "通过条件 \u2265",
+  "pipeline.uploadAndRun": "上传并运行测试",
+  "results.columns.actual": "实际结果",
+  "results.columns.expected": "预期结果",
+  "results.columns.query": "Query 内容",
+  "results.empty": "还没有评测结果。",
+  "results.export": "导出",
+  "results.loadFailed": "加载评测结果失败。",
+  "results.metricThreshold": "{{metric}} \u2265 {{threshold}}",
+  "results.noResult": "无结果",
+  "results.queryCount_one": "{{count}} 条 query",
+  "results.queryCount_other": "{{count}} 条 query",
+  "results.status.failed": "失败",
+  "results.status.passed": "通过",
+  "results.title": "测试详情",
+  "title": "评测"
+}
diff --git a/web/i18n/zh-Hans/snippet.json b/web/i18n/zh-Hans/snippet.json
new file mode 100644
index 0000000000..b8ed686559
--- /dev/null
+++ b/web/i18n/zh-Hans/snippet.json
@@ -0,0 +1,37 @@
+{
+  "create": "创建 Snippet",
+  "createFailed": "创建 Snippet 失败",
+  "createFromBlank": "创建空白 Snippet",
+  "defaultName": "未命名 Snippet",
+  "deleteConfirmContent": "删除后不可恢复，草稿工作流和已发布内容都将无法继续使用。",
+  "deleteConfirmTitle": "删除 Snippet？",
+  "deleteFailed": "删除 Snippet 失败",
+  "deleted": "Snippet 已删除",
+  "editDialogTitle": "编辑 Snippet 信息",
+  "editDone": "Snippet 信息已更新",
+  "editFailed": "更新 Snippet 信息失败",
+  "exportFailed": "导出 Snippet 失败。",
+  "importFailed": "导入 Snippet DSL 失败",
+  "importSuccess": "Snippet 导入成功",
+  "inputFieldButton": "输入字段",
+  "menu.deleteSnippet": "删除",
+  "menu.editInfo": "编辑信息",
+  "menu.exportSnippet": "导出 Snippet",
+  "notFoundDescription": "未找到对应的 snippet 静态数据。",
+  "notFoundTitle": "未找到 Snippet",
+  "panelDescription": "定义允许 snippet 从其他节点接收数据的输入字段。",
+  "panelPrimaryGroup": "核心输入",
+  "panelSecondaryGroup": "可选输入",
+  "panelTitle": "输入字段",
+  "publishButton": "发布",
+  "publishFailed": "发布 Snippet 失败",
+  "publishMenuCurrentDraft": "当前草稿未发布",
+  "publishSuccess": "Snippet 已发布",
+  "save": "保存",
+  "sectionEvaluation": "评测",
+  "sectionOrchestrate": "编排",
+  "testRunButton": "测试运行",
+  "typeLabel": "Snippet",
+  "usageCount": "已使用 {{count}} 次",
+  "variableInspect": "变量查看"
+}
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index 2b6f4bcbe7..dab8d45e11 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "存储内容",
   "chatVariable.updatedAt": "更新时间 ",
   "collaboration.historyAction.generic": "协作者执行了撤销/重做操作",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "添加评论",
   "comments.actions.deleteReply": "删除回复",
   "comments.actions.editComment": "编辑评论",
   "comments.actions.editReply": "编辑回复",
@@ -228,6 +228,8 @@
   "common.previewPlaceholder": "在下面的框中输入内容开始调试聊天机器人",
   "common.processData": "数据处理",
   "common.publish": "发布",
+  "common.publishAsEvaluationWorkflow": "发布为评测工作流",
+  "common.publishAsStandardWorkflow": "发布为标准工作流",
   "common.publishUpdate": "发布更新",
   "common.published": "已发布",
   "common.publishedAt": "发布于",
@@ -243,6 +245,11 @@
   "common.searchVar": "搜索变量",
   "common.setVarValuePlaceholder": "设置变量值",
   "common.showRunHistory": "显示运行历史",
+  "common.switchToEvaluationWorkflow": "切换为评测工作流",
+  "common.switchToEvaluationWorkflowDisabledTip": "评测工作流不支持 Human Input 节点或 Trigger 开始节点。",
+  "common.switchToEvaluationWorkflowTip": "将当前工作流转换为批量测试用的自定义评测器，并禁用公开 Web App 访问。",
+  "common.switchToStandardWorkflow": "切换为标准工作流",
+  "common.switchToStandardWorkflowTip": "将当前评测器转换回标准工作流，并恢复公开 Web App 访问。",
   "common.syncingData": "同步数据中，只需几秒钟。",
   "common.tagBound": "使用此标签的应用数量",
   "common.undo": "撤销",
@@ -1143,6 +1150,16 @@
   "singleRun.testRun": "测试运行",
   "singleRun.testRunIteration": "测试运行迭代",
   "singleRun.testRunLoop": "测试运行循环",
+  "snippet.addToSnippet": "添加到 snippet",
+  "snippet.confirm": "确认",
+  "snippet.createDialogTitle": "创建 Snippet",
+  "snippet.createSuccess": "Snippet 已创建",
+  "snippet.descriptionLabel": "描述（可选）",
+  "snippet.descriptionPlaceholder": "简要描述你的 snippet",
+  "snippet.nameLabel": "Snippet 名称和图标",
+  "snippet.namePlaceholder": "Snippet 名称",
+  "snippet.shortcuts.press": "按下",
+  "snippet.shortcuts.toConfirm": "确认",
   "tabs.-": "默认",
   "tabs.addAll": "添加全部",
   "tabs.agent": "Agent 策略",
@@ -1150,6 +1167,7 @@
   "tabs.allTool": "全部",
   "tabs.allTriggers": "全部触发器",
   "tabs.blocks": "节点",
+  "tabs.createSnippet": "创建 snippet",
   "tabs.customTool": "自定义",
   "tabs.featuredTools": "精选推荐",
   "tabs.hideActions": "收起工具",
@@ -1159,19 +1177,23 @@
   "tabs.noFeaturedTriggers": "前往插件市场查看更多触发器",
   "tabs.noPluginsFound": "未找到插件",
   "tabs.noResult": "未找到匹配项",
+  "tabs.noSnippetsFound": "未找到 snippets",
   "tabs.plugin": "插件",
   "tabs.pluginByAuthor": "来自 {{author}}",
   "tabs.question-understand": "问题理解",
   "tabs.requestToCommunity": "向社区反馈",
   "tabs.searchBlock": "搜索节点",
   "tabs.searchDataSource": "搜索数据源",
+  "tabs.searchSnippets": "搜索 snippets...",
   "tabs.searchTool": "搜索工具",
   "tabs.searchTrigger": "搜索触发器...",
   "tabs.showLessFeatured": "收起",
   "tabs.showMoreFeatured": "查看更多",
+  "tabs.snippets": "Snippets",
   "tabs.sources": "数据源",
   "tabs.start": "开始",
   "tabs.startDisabledTip": "触发节点与用户输入节点互斥。",
+  "tabs.startNotSupportedTip": "Snippet 暂不支持 Start 标签。",
   "tabs.tools": "工具",
   "tabs.transform": "转换",
   "tabs.usePlugin": "选择工具",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 6b8ad06650..daf8baf8a8 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -110,7 +110,7 @@
   "chatVariable.storedContent": "已儲存內容",
   "chatVariable.updatedAt": "更新於 ",
   "collaboration.historyAction.generic": "協作者執行了復原/重做操作",
-  "comments.actions.addComment": "Add Comment",
+  "comments.actions.addComment": "新增評論",
   "comments.actions.deleteReply": "刪除回覆",
   "comments.actions.editComment": "編輯評論",
   "comments.actions.editReply": "編輯回覆",
@@ -1189,7 +1189,7 @@
   "versionHistory.action.deleteFailure": "無法刪除版本",
   "versionHistory.action.deleteSuccess": "版本已刪除",
   "versionHistory.action.restoreFailure": "無法恢復版本",
-  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
+  "versionHistory.action.restoreInProgress": "{{userName}} 正在還原至版本 {{versionName}}...",
   "versionHistory.action.restoreSuccess": "恢復版本",
   "versionHistory.action.updateFailure": "更新版本失敗",
   "versionHistory.action.updateSuccess": "版本已更新",
diff --git a/web/models/log.ts b/web/models/log.ts
index f9cb13ab8e..e41b66821f 100644
--- a/web/models/log.ts
+++ b/web/models/log.ts
@@ -257,6 +257,15 @@ export type EndUserInfo = {
   is_anonymous: boolean
   session_id: string
 }
+export type EvaluationLogItem = {
+  name: string
+  value: string | number | boolean
+  nodeInfo?: {
+    node_id: string
+    type: string
+    title: string
+  }
+}
 export type WorkflowAppLogDetail = {
   id: string
   workflow_run: WorkflowRunDetail
@@ -267,6 +276,7 @@ export type WorkflowAppLogDetail = {
   created_by_end_user?: EndUserInfo
   created_at: number
   read_at?: number
+  evaluation: EvaluationLogItem[]
 }
 export type WorkflowLogsResponse = {
   data: Array<WorkflowAppLogDetail>
diff --git a/web/models/snippet.ts b/web/models/snippet.ts
new file mode 100644
index 0000000000..5471782ab0
--- /dev/null
+++ b/web/models/snippet.ts
@@ -0,0 +1,50 @@
+import type { Viewport } from 'reactflow'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import type { InputVar } from '@/models/pipeline'
+
+export type SnippetSection = 'orchestrate' | 'evaluation'
+
+export type SnippetListItem = {
+  id: string
+  name: string
+  description: string
+  author: string
+  updatedAt: string
+  usage: string
+  icon: string
+  iconBackground: string
+  status?: string
+}
+
+export type SnippetDetail = {
+  id: string
+  name: string
+  description: string
+  author: string
+  updatedAt: string
+  usage: string
+  icon: string
+  iconBackground: string
+  status?: string
+}
+
+export type SnippetCanvasData = {
+  nodes: Node[]
+  edges: Edge[]
+  viewport: Viewport
+}
+
+export type SnippetInputField = InputVar
+
+export type SnippetDetailUIModel = {
+  inputFieldCount: number
+  checklistCount: number
+  autoSavedAt: string
+}
+
+export type SnippetDetailPayload = {
+  snippet: SnippetDetail
+  graph: SnippetCanvasData
+  inputFields: SnippetInputField[]
+  uiMeta: SnippetDetailUIModel
+}
diff --git a/web/service/__tests__/use-apps.spec.tsx b/web/service/__tests__/use-apps.spec.tsx
new file mode 100644
index 0000000000..cb46073ef2
--- /dev/null
+++ b/web/service/__tests__/use-apps.spec.tsx
@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { useConvertWorkflowTypeMutation } from '../use-apps'
+
+const {
+  invalidateQueries,
+  convertWorkflowTypeMutationFn,
+  convertWorkflowTypeMutationOptions,
+} = vi.hoisted(() => ({
+  invalidateQueries: vi.fn(),
+  convertWorkflowTypeMutationFn: vi.fn(),
+  convertWorkflowTypeMutationOptions: vi.fn(),
+}))
+
+vi.mock('@tanstack/react-query', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tanstack/react-query')>()
+
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries,
+    }),
+  }
+})
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {},
+  consoleQuery: {
+    apps: {
+      convertWorkflowType: {
+        mutationOptions: convertWorkflowTypeMutationOptions,
+      },
+    },
+  },
+}))
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+// Scenario: workflow type conversion forwards the expected API input and refreshes app caches.
+describe('useConvertWorkflowTypeMutation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    convertWorkflowTypeMutationFn.mockResolvedValue({})
+    convertWorkflowTypeMutationOptions.mockImplementation(options => ({
+      mutationFn: convertWorkflowTypeMutationFn,
+      onSuccess: options?.onSuccess,
+    }))
+  })
+
+  it('should convert workflow type and invalidate app queries when mutation succeeds', async () => {
+    // Arrange
+    const { result } = renderHook(() => useConvertWorkflowTypeMutation(), {
+      wrapper: createWrapper(),
+    })
+
+    // Act
+    await act(async () => {
+      result.current.mutate({
+        params: { appId: 'app-1' },
+        query: { target_type: 'evaluation' },
+      })
+    })
+
+    // Assert
+    await waitFor(() => {
+      expect(convertWorkflowTypeMutationFn).toHaveBeenCalledWith(
+        {
+          params: { appId: 'app-1' },
+          query: { target_type: 'evaluation' },
+        },
+        expect.any(Object),
+      )
+    })
+    await waitFor(() => {
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: ['apps', 'detail', 'app-1'],
+      })
+    })
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['apps', 'list'],
+    })
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['apps', 'full-list'],
+    })
+  })
+})
diff --git a/web/service/__tests__/use-snippet-workflows.spec.tsx b/web/service/__tests__/use-snippet-workflows.spec.tsx
new file mode 100644
index 0000000000..d39f27390b
--- /dev/null
+++ b/web/service/__tests__/use-snippet-workflows.spec.tsx
@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react'
+import type { SnippetWorkflow } from '@/types/snippet'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { get } from '../base'
+import { useSnippetDraftWorkflow } from '../use-snippet-workflows'
+
+const { draftWorkflowQueryOptions } = vi.hoisted(() => ({
+  draftWorkflowQueryOptions: vi.fn(),
+}))
+
+vi.mock('../base', () => ({
+  get: vi.fn(),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleQuery: {
+    snippets: {
+      draftWorkflow: {
+        queryOptions: draftWorkflowQueryOptions,
+      },
+    },
+  },
+}))
+
+const mockGet = vi.mocked(get)
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+describe('useSnippetDraftWorkflow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    draftWorkflowQueryOptions.mockReturnValue({
+      queryKey: ['console', 'snippets', 'draft-workflow', 'snippet-1'],
+      enabled: true,
+      queryFn: vi.fn(),
+    })
+  })
+
+  it('should fetch the draft workflow silently during initialization', async () => {
+    const onSuccess = vi.fn()
+    const draftWorkflow = {
+      hash: 'draft-hash',
+      updated_at: 1_712_345_678,
+    } as SnippetWorkflow
+
+    mockGet.mockResolvedValueOnce(draftWorkflow)
+
+    const { result } = renderHook(() => useSnippetDraftWorkflow('snippet-1', onSuccess), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(draftWorkflow)
+    })
+
+    expect(draftWorkflowQueryOptions).toHaveBeenCalledWith({
+      input: {
+        params: { snippetId: 'snippet-1' },
+      },
+      enabled: true,
+    })
+    expect(mockGet).toHaveBeenCalledWith('/snippets/snippet-1/workflows/draft', {}, { silent: true })
+    expect(onSuccess).toHaveBeenCalledWith(draftWorkflow)
+  })
+})
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index f28df7bd4b..7a49ea604f 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -30,6 +30,7 @@ type AppListParams = {
   name?: string
   mode?: AppModeEnum | 'all'
   tag_ids?: string[]
+  creator_id?: string
   is_created_by_me?: boolean
 }
 
@@ -55,6 +56,7 @@ const normalizeAppListParams = (params: AppListParams) => {
     name = '',
     mode,
     tag_ids,
+    creator_id,
     is_created_by_me,
   } = params
 
@@ -66,6 +68,7 @@ const normalizeAppListParams = (params: AppListParams) => {
     name,
     ...(safeMode && safeMode !== 'all' ? { mode: safeMode } : {}),
     ...(tag_ids?.length ? { tag_ids } : {}),
+    ...(creator_id ? { creator_id } : {}),
     ...(is_created_by_me ? { is_created_by_me } : {}),
   }
 }
@@ -148,6 +151,28 @@ export const useDeleteAppMutation = () => {
   })
 }
 
+export const useConvertWorkflowTypeMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.apps.convertWorkflowType.mutationOptions({
+      onSuccess: async (_, variables) => {
+        await Promise.all([
+          queryClient.invalidateQueries({
+            queryKey: [NAME_SPACE, 'detail', variables.params.appId],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: [NAME_SPACE, 'list'],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: useAppFullListKey,
+          }),
+        ])
+      },
+    }),
+  })
+}
+
 const useAppStatisticsQuery = <T>(metric: string, appId: string, params?: DateRangeParams) => {
   return useQuery<T>({
     queryKey: [NAME_SPACE, 'statistics', metric, appId, params],
diff --git a/web/service/use-evaluation.ts b/web/service/use-evaluation.ts
new file mode 100644
index 0000000000..f167a3ea40
--- /dev/null
+++ b/web/service/use-evaluation.ts
@@ -0,0 +1,134 @@
+import type { EvaluationResourceType } from '@/app/components/evaluation/types'
+import type { AvailableEvaluationWorkflowsResponse, EvaluationConfig } from '@/types/evaluation'
+import {
+  keepPreviousData,
+  skipToken,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { consoleClient, consoleQuery } from '@/service/client'
+
+type AvailableEvaluationWorkflowsParams = {
+  page?: number
+  limit?: number
+  keyword?: string
+  userId?: string
+}
+
+const normalizeAvailableEvaluationWorkflowsParams = (params: AvailableEvaluationWorkflowsParams = {}) => {
+  const page = params.page ?? 1
+  const limit = params.limit ?? 20
+  const keyword = params.keyword?.trim()
+  const userId = params.userId?.trim()
+
+  return {
+    page,
+    limit,
+    ...(keyword ? { keyword } : {}),
+    ...(userId ? { user_id: userId } : {}),
+  }
+}
+
+const getEvaluationConfigQueryOptions = (
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  return consoleQuery.evaluation.config.queryOptions({
+    input: {
+      params: {
+        targetType: resourceType,
+        targetId: resourceId,
+      },
+    },
+    enabled: !!resourceId,
+    refetchOnWindowFocus: false,
+  })
+}
+
+export const useEvaluationConfig = (
+  resourceType: EvaluationResourceType,
+  resourceId: string,
+) => {
+  return useQuery<EvaluationConfig>(getEvaluationConfigQueryOptions(resourceType, resourceId))
+}
+
+export const useAvailableEvaluationMetrics = (enabled = true) => {
+  return useQuery(consoleQuery.evaluation.availableMetrics.queryOptions({
+    enabled,
+  }))
+}
+
+export const useEvaluationWorkflowAssociatedTargets = (
+  workflowId: string | undefined,
+  options?: { enabled?: boolean },
+) => {
+  return useQuery(consoleQuery.evaluation.associatedTargets.queryOptions({
+    input: workflowId
+      ? {
+          params: {
+            workflowId,
+          },
+        }
+      : skipToken,
+    enabled: Boolean(workflowId) && (options?.enabled ?? true),
+    refetchOnWindowFocus: false,
+    retry: false,
+  }))
+}
+
+export const useEvaluationNodeInfoMutation = () => {
+  return useMutation(consoleQuery.evaluation.nodeInfo.mutationOptions())
+}
+
+export const useSaveEvaluationConfigMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(consoleQuery.evaluation.saveConfig.mutationOptions({
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.evaluation.config.key(),
+      })
+    },
+  }))
+}
+
+export const useStartEvaluationRunMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(consoleQuery.evaluation.startRun.mutationOptions({
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.evaluation.logs.key(),
+      })
+    },
+  }))
+}
+
+export const useAvailableEvaluationWorkflows = (
+  params: AvailableEvaluationWorkflowsParams = {},
+  options?: { enabled?: boolean },
+) => {
+  const queryParams = normalizeAvailableEvaluationWorkflowsParams(params)
+
+  return useInfiniteQuery<AvailableEvaluationWorkflowsResponse>({
+    queryKey: consoleQuery.evaluation.availableWorkflows.queryKey({
+      input: {
+        query: queryParams,
+      },
+    }),
+    queryFn: ({ pageParam = queryParams.page }) => {
+      return consoleClient.evaluation.availableWorkflows({
+        query: {
+          ...queryParams,
+          page: Number(pageParam),
+        },
+      })
+    },
+    getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : undefined,
+    initialPageParam: queryParams.page,
+    placeholderData: keepPreviousData,
+    ...options,
+  })
+}
diff --git a/web/service/use-snippet-workflows.ts b/web/service/use-snippet-workflows.ts
new file mode 100644
index 0000000000..8130e73752
--- /dev/null
+++ b/web/service/use-snippet-workflows.ts
@@ -0,0 +1,127 @@
+import type { SnippetWorkflow } from '@/types/snippet'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { consoleQuery } from '@/service/client'
+import { get } from './base'
+
+const isNotFoundError = (error: unknown) => {
+  return !!error && typeof error === 'object' && 'status' in error && error.status === 404
+}
+
+const invalidateSnippetWorkflowQueries = async (
+  queryClient: ReturnType<typeof useQueryClient>,
+  snippetId: string,
+) => {
+  await Promise.all([
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.draftWorkflow.queryKey({
+        input: {
+          params: { snippetId },
+        },
+      }),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.publishedWorkflow.queryKey({
+        input: {
+          params: { snippetId },
+        },
+      }),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.workflowRuns.key(),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: consoleQuery.snippets.lastDraftNodeRun.key(),
+    }),
+  ])
+}
+
+export const useSnippetDraftWorkflow = (
+  snippetId: string,
+  onSuccess?: (draftWorkflow: SnippetWorkflow) => void,
+) => {
+  const queryOptions = consoleQuery.snippets.draftWorkflow.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  })
+
+  return useQuery({
+    ...queryOptions,
+    queryFn: async () => {
+      try {
+        const draftWorkflow = await get<SnippetWorkflow>(`/snippets/${snippetId}/workflows/draft`, {}, { silent: true })
+        onSuccess?.(draftWorkflow)
+        return draftWorkflow
+      }
+      catch (error) {
+        if (isNotFoundError(error))
+          return undefined
+
+        throw error
+      }
+    },
+  })
+}
+
+export const useSnippetPublishedWorkflow = (
+  snippetId: string,
+  onSuccess?: (publishedWorkflow: SnippetWorkflow) => void,
+) => {
+  const queryOptions = consoleQuery.snippets.publishedWorkflow.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  })
+
+  return useQuery({
+    ...queryOptions,
+    queryFn: async (context) => {
+      try {
+        const publishedWorkflow = await queryOptions.queryFn(context)
+        onSuccess?.(publishedWorkflow)
+        return publishedWorkflow
+      }
+      catch (error) {
+        if (isNotFoundError(error))
+          return undefined
+
+        throw error
+      }
+    },
+  })
+}
+
+export const useSnippetDefaultBlockConfigs = (
+  snippetId: string,
+  onSuccess?: (nodesDefaultConfigs: unknown) => void,
+) => {
+  const queryOptions = consoleQuery.snippets.defaultBlockConfigs.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  })
+
+  return useQuery({
+    ...queryOptions,
+    queryFn: async (context) => {
+      const nodesDefaultConfigs = await queryOptions.queryFn(context)
+      onSuccess?.(nodesDefaultConfigs)
+      return nodesDefaultConfigs
+    },
+  })
+}
+
+export const usePublishSnippetWorkflowMutation = (snippetId: string) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.publishWorkflow.mutationOptions({
+      onSuccess: async () => {
+        await invalidateSnippetWorkflowQueries(queryClient, snippetId)
+      },
+    }),
+  })
+}
diff --git a/web/service/use-snippets.mock.ts b/web/service/use-snippets.mock.ts
new file mode 100644
index 0000000000..68c655b1f5
--- /dev/null
+++ b/web/service/use-snippets.mock.ts
@@ -0,0 +1,205 @@
+import type { Node } from '@/app/components/workflow/types'
+import type { SnippetDetailPayload, SnippetInputField, SnippetListItem } from '@/models/snippet'
+import codeDefault from '@/app/components/workflow/nodes/code/default'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import httpDefault from '@/app/components/workflow/nodes/http/default'
+import { Method } from '@/app/components/workflow/nodes/http/types'
+import llmDefault from '@/app/components/workflow/nodes/llm/default'
+import questionClassifierDefault from '@/app/components/workflow/nodes/question-classifier/default'
+import { BlockEnum, PromptRole } from '@/app/components/workflow/types'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { AppModeEnum } from '@/types/app'
+
+const getSnippetListMock = (): SnippetListItem[] => ([
+  {
+    id: 'snippet-1',
+    name: 'Tone Rewriter',
+    description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+    author: 'Evan',
+    updatedAt: 'Updated 2h ago',
+    usage: 'Used 19 times',
+    icon: '🪄',
+    iconBackground: '#E0EAFF',
+    status: 'Draft',
+  },
+])
+
+const createSnippetMock = (snippetId: string): SnippetListItem => ({
+  id: snippetId,
+  name: 'Tone Rewriter',
+  description: 'Rewrites rough drafts into a concise, professional tone for internal stakeholder updates.',
+  author: 'Evan',
+  updatedAt: 'Updated 2h ago',
+  usage: 'Used 19 times',
+  icon: '🪄',
+  iconBackground: '#E0EAFF',
+  status: 'Draft',
+})
+
+const getSnippetInputFieldsMock = (): SnippetInputField[] => ([
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Blog URL',
+    variable: 'blog_url',
+    required: true,
+    placeholder: 'Paste a source article URL',
+    options: [],
+    max_length: 256,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Target Platforms',
+    variable: 'platforms',
+    required: true,
+    placeholder: 'X, LinkedIn, Instagram',
+    options: [],
+    max_length: 128,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Tone',
+    variable: 'tone',
+    required: false,
+    placeholder: 'Concise and executive-ready',
+    options: [],
+    max_length: 48,
+  },
+  {
+    type: PipelineInputVarType.textInput,
+    label: 'Max Length',
+    variable: 'max_length',
+    required: false,
+    placeholder: 'Set an ideal output length',
+    options: [],
+    max_length: 48,
+  },
+])
+
+const getSnippetGraphMock = (): SnippetDetailPayload['graph'] => ({
+  viewport: { x: 120, y: 30, zoom: 0.9 },
+  nodes: [
+    {
+      id: 'question-classifier',
+      position: { x: 280, y: 208 },
+      data: {
+        ...questionClassifierDefault.defaultValue,
+        title: 'Question Classifier',
+        desc: 'After-sales related questions',
+        type: BlockEnum.QuestionClassifier,
+        query_variable_selector: ['sys', 'query'],
+        model: {
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.2,
+          },
+        },
+        classes: [
+          {
+            id: '1',
+            name: 'HTTP Request',
+          },
+          {
+            id: '2',
+            name: 'LLM',
+          },
+          {
+            id: '3',
+            name: 'Code',
+          },
+        ],
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'http-request',
+      position: { x: 670, y: 72 },
+      data: {
+        ...httpDefault.defaultValue,
+        title: 'HTTP Request',
+        desc: 'POST https://api.example.com/content/rewrite',
+        type: BlockEnum.HttpRequest,
+        method: Method.post,
+        url: 'https://api.example.com/content/rewrite',
+        headers: 'Content-Type: application/json',
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'llm',
+      position: { x: 670, y: 248 },
+      data: {
+        ...llmDefault.defaultValue,
+        title: 'LLM',
+        desc: 'GPT-4o',
+        type: BlockEnum.LLM,
+        model: {
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+          completion_params: {
+            temperature: 0.7,
+          },
+        },
+        prompt_template: [{
+          role: PromptRole.system,
+          text: 'Rewrite the content with the requested tone.',
+        }],
+      } as unknown as Node['data'],
+    },
+    {
+      id: 'code',
+      position: { x: 670, y: 424 },
+      data: {
+        ...codeDefault.defaultValue,
+        title: 'Code',
+        desc: 'Python',
+        type: BlockEnum.Code,
+        code_language: CodeLanguage.python3,
+        code: 'def main(text: str) -> dict:\n    return {"content": text.strip()}',
+      } as unknown as Node['data'],
+    },
+  ],
+  edges: [
+    {
+      id: 'edge-question-http',
+      source: 'question-classifier',
+      sourceHandle: '1',
+      target: 'http-request',
+      targetHandle: 'target',
+    },
+    {
+      id: 'edge-question-llm',
+      source: 'question-classifier',
+      sourceHandle: '2',
+      target: 'llm',
+      targetHandle: 'target',
+    },
+    {
+      id: 'edge-question-code',
+      source: 'question-classifier',
+      sourceHandle: '3',
+      target: 'code',
+      targetHandle: 'target',
+    },
+  ],
+})
+
+export const getSnippetDetailMock = (snippetId: string): SnippetDetailPayload | null => {
+  if (!snippetId)
+    return null
+
+  const snippet = getSnippetListMock().find(item => item.id === snippetId) ?? createSnippetMock(snippetId)
+
+  const inputFields = getSnippetInputFieldsMock()
+
+  return {
+    snippet,
+    graph: getSnippetGraphMock(),
+    inputFields,
+    uiMeta: {
+      inputFieldCount: inputFields.length,
+      checklistCount: 2,
+      autoSavedAt: 'Auto-saved · a few seconds ago',
+    },
+  }
+}
diff --git a/web/service/use-snippets.ts b/web/service/use-snippets.ts
new file mode 100644
index 0000000000..dffc3d6631
--- /dev/null
+++ b/web/service/use-snippets.ts
@@ -0,0 +1,252 @@
+import type {
+  SnippetCanvasData,
+  SnippetDetailPayload,
+  SnippetDetail as SnippetDetailUIModel,
+  SnippetInputField as SnippetInputFieldUIModel,
+  SnippetListItem as SnippetListItemUIModel,
+} from '@/models/snippet'
+import type {
+  Snippet as SnippetContract,
+  SnippetDSLImportResponse,
+  SnippetListResponse,
+  SnippetWorkflow,
+} from '@/types/snippet'
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { consoleClient, consoleQuery } from '@/service/client'
+
+type SnippetListParams = {
+  page?: number
+  limit?: number
+  keyword?: string
+  creator_id?: string
+  is_published?: boolean
+}
+
+type SnippetSummary = Pick<SnippetContract, 'id' | 'name' | 'description' | 'use_count' | 'icon_info' | 'updated_at'>
+
+const DEFAULT_SNIPPET_LIST_PARAMS = {
+  page: 1,
+  limit: 30,
+} satisfies Required<Pick<SnippetListParams, 'page' | 'limit'>>
+
+const DEFAULT_GRAPH: SnippetCanvasData = {
+  nodes: [],
+  edges: [],
+  viewport: { x: 0, y: 0, zoom: 1 },
+}
+
+const toMilliseconds = (timestamp?: number) => {
+  if (!timestamp)
+    return undefined
+
+  return timestamp > 1_000_000_000_000 ? timestamp : timestamp * 1000
+}
+
+const formatTimestamp = (timestamp?: number) => {
+  const milliseconds = toMilliseconds(timestamp)
+  if (!milliseconds)
+    return ''
+
+  return dayjs(milliseconds).format('YYYY-MM-DD HH:mm')
+}
+
+const getSnippetIcon = (iconInfo: SnippetContract['icon_info']) => {
+  return typeof iconInfo?.icon === 'string' ? iconInfo.icon : ''
+}
+
+const getSnippetIconBackground = (iconInfo: SnippetContract['icon_info']) => {
+  return typeof iconInfo?.icon_background === 'string' ? iconInfo.icon_background : ''
+}
+
+const toSnippetListItem = (snippet: SnippetSummary): SnippetListItemUIModel => {
+  return {
+    id: snippet.id,
+    name: snippet.name,
+    description: snippet.description,
+    author: '',
+    updatedAt: formatTimestamp(snippet.updated_at),
+    usage: String(snippet.use_count ?? 0),
+    icon: getSnippetIcon(snippet.icon_info),
+    iconBackground: getSnippetIconBackground(snippet.icon_info),
+    status: undefined,
+  }
+}
+
+const toSnippetDetail = (snippet: SnippetContract): SnippetDetailUIModel => {
+  return {
+    ...toSnippetListItem(snippet),
+  }
+}
+
+const toSnippetCanvasData = (workflow?: SnippetWorkflow): SnippetCanvasData => {
+  const graph = workflow?.graph
+
+  if (!graph || typeof graph !== 'object')
+    return DEFAULT_GRAPH
+
+  const graphRecord = graph as Record<string, unknown>
+
+  return {
+    nodes: Array.isArray(graphRecord.nodes) ? graphRecord.nodes as SnippetCanvasData['nodes'] : DEFAULT_GRAPH.nodes,
+    edges: Array.isArray(graphRecord.edges) ? graphRecord.edges as SnippetCanvasData['edges'] : DEFAULT_GRAPH.edges,
+    viewport: graphRecord.viewport && typeof graphRecord.viewport === 'object'
+      ? graphRecord.viewport as SnippetCanvasData['viewport']
+      : DEFAULT_GRAPH.viewport,
+  }
+}
+
+export const buildSnippetDetailPayload = (snippet: SnippetContract, workflow?: SnippetWorkflow): SnippetDetailPayload => {
+  const inputFields = Array.isArray(workflow?.input_fields)
+    ? workflow.input_fields as SnippetInputFieldUIModel[]
+    : []
+
+  return {
+    snippet: toSnippetDetail(snippet),
+    graph: toSnippetCanvasData(workflow),
+    inputFields,
+    uiMeta: {
+      inputFieldCount: inputFields.length,
+      checklistCount: 0,
+      autoSavedAt: formatTimestamp(workflow?.updated_at ?? snippet.updated_at),
+    },
+  }
+}
+
+const normalizeSnippetListParams = (params: SnippetListParams) => {
+  return {
+    page: params.page ?? DEFAULT_SNIPPET_LIST_PARAMS.page,
+    limit: params.limit ?? DEFAULT_SNIPPET_LIST_PARAMS.limit,
+    ...(params.keyword ? { keyword: params.keyword } : {}),
+    ...(params.creator_id ? { creator_id: params.creator_id } : {}),
+    ...(typeof params.is_published === 'boolean' ? { is_published: params.is_published } : {}),
+  }
+}
+
+const snippetListKey = (params: SnippetListParams) => ['snippets', 'list', params]
+
+export const useInfiniteSnippetList = (params: SnippetListParams = {}, options?: { enabled?: boolean }) => {
+  const normalizedParams = normalizeSnippetListParams(params)
+
+  return useInfiniteQuery<SnippetListResponse>({
+    queryKey: snippetListKey(normalizedParams),
+    queryFn: ({ pageParam = normalizedParams.page }) => {
+      return consoleClient.snippets.list({
+        query: {
+          ...normalizedParams,
+          page: pageParam as number,
+        },
+      })
+    },
+    getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : undefined,
+    initialPageParam: normalizedParams.page,
+    placeholderData: keepPreviousData,
+    ...options,
+  })
+}
+
+export const useSnippetApiDetail = (snippetId: string) => {
+  return useQuery(consoleQuery.snippets.detail.queryOptions({
+    input: {
+      params: { snippetId },
+    },
+    enabled: !!snippetId,
+  }))
+}
+
+export const useCreateSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation(consoleQuery.snippets.create.mutationOptions({
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.snippets.key(),
+      })
+    },
+  }))
+}
+
+export const useUpdateSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.update.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
+export const useDeleteSnippetMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...consoleQuery.snippets.delete.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: consoleQuery.snippets.key(),
+        })
+      },
+    }),
+  })
+}
+
+export const useExportSnippetMutation = () => {
+  return useMutation<string, Error, { snippetId: string, include?: boolean }>({
+    mutationFn: ({ snippetId, include = false }) => {
+      return consoleClient.snippets.export({
+        params: { snippetId },
+        query: { include_secret: include ? 'true' : 'false' },
+      })
+    },
+  })
+}
+
+export const useImportSnippetDSLMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation<SnippetDSLImportResponse, Error, { mode: 'yaml-content' | 'yaml-url', yamlContent?: string, yamlUrl?: string }>({
+    mutationFn: ({ mode, yamlContent, yamlUrl }) => {
+      return consoleClient.snippets.import({
+        body: {
+          mode,
+          yaml_content: yamlContent,
+          yaml_url: yamlUrl,
+        },
+      }) as Promise<SnippetDSLImportResponse>
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.snippets.key(),
+      })
+    },
+  })
+}
+
+export const useConfirmSnippetImportMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation<SnippetDSLImportResponse, Error, { importId: string }>({
+    mutationFn: ({ importId }) => {
+      return consoleClient.snippets.confirmImport({
+        params: {
+          importId,
+        },
+      }) as Promise<SnippetDSLImportResponse>
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: consoleQuery.snippets.key(),
+      })
+    },
+  })
+}
diff --git a/web/service/utils.ts b/web/service/utils.ts
index 6d0c3ca88e..7691ea4e71 100644
--- a/web/service/utils.ts
+++ b/web/service/utils.ts
@@ -3,6 +3,7 @@ import { FlowType } from '@/types/common'
 export const flowPrefixMap = {
   [FlowType.appFlow]: 'apps',
   [FlowType.ragPipeline]: 'rag/pipelines',
+  [FlowType.snippet]: 'snippets',
 }
 
 export const getFlowPrefix = (type?: FlowType) => {
diff --git a/web/types/app.ts b/web/types/app.ts
index b782a78730..ac4edfbbd2 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -10,43 +10,72 @@ import type {
 } from '@/models/datasets'
 import type { AnnotationReplyConfig, ChatPromptConfig, CompletionPromptConfig, DatasetConfigs, PromptMode } from '@/models/debug'
 
-export enum Theme {
-  light = 'light',
-  dark = 'dark',
-  system = 'system',
-}
+export type Theme = 'light' | 'dark' | 'system'
+export const Theme = {
+  light: 'light' as Theme,
+  dark: 'dark' as Theme,
+  system: 'system' as Theme,
+} as const
 
-export enum ModelModeType {
-  chat = 'chat',
-  completion = 'completion',
-  unset = '',
-}
+export type ModelModeType = 'chat' | 'completion' | ''
+export const ModelModeType = {
+  chat: 'chat' as ModelModeType,
+  completion: 'completion' as ModelModeType,
+  unset: '' as ModelModeType,
+} as const
 
-export enum RETRIEVE_TYPE {
-  oneWay = 'single',
-  multiWay = 'multiple',
-}
+export type RETRIEVE_TYPE = 'single' | 'multiple'
+export const RETRIEVE_TYPE = {
+  oneWay: 'single' as RETRIEVE_TYPE,
+  multiWay: 'multiple' as RETRIEVE_TYPE,
+} as const
 
-export enum RETRIEVE_METHOD {
-  semantic = 'semantic_search',
-  fullText = 'full_text_search',
-  hybrid = 'hybrid_search',
-  invertedIndex = 'invertedIndex',
-  keywordSearch = 'keyword_search',
-}
+export type RETRIEVE_METHOD
+  = | 'semantic_search'
+    | 'full_text_search'
+    | 'hybrid_search'
+    | 'invertedIndex'
+    | 'keyword_search'
+export const RETRIEVE_METHOD = {
+  semantic: 'semantic_search' as RETRIEVE_METHOD,
+  fullText: 'full_text_search' as RETRIEVE_METHOD,
+  hybrid: 'hybrid_search' as RETRIEVE_METHOD,
+  invertedIndex: 'invertedIndex' as RETRIEVE_METHOD,
+  keywordSearch: 'keyword_search' as RETRIEVE_METHOD,
+} as const
 
 /**
  * App modes
  */
-export enum AppModeEnum {
-  COMPLETION = 'completion',
-  WORKFLOW = 'workflow',
-  CHAT = 'chat',
-  ADVANCED_CHAT = 'advanced-chat',
-  AGENT_CHAT = 'agent-chat',
-}
+export type AppModeEnum
+  = | 'completion'
+    | 'workflow'
+    | 'chat'
+    | 'advanced-chat'
+    | 'agent-chat'
+export const AppModeEnum = {
+  COMPLETION: 'completion' as AppModeEnum,
+  WORKFLOW: 'workflow' as AppModeEnum,
+  CHAT: 'chat' as AppModeEnum,
+  ADVANCED_CHAT: 'advanced-chat' as AppModeEnum,
+  AGENT_CHAT: 'agent-chat' as AppModeEnum,
+} as const
 export const AppModes = [AppModeEnum.COMPLETION, AppModeEnum.WORKFLOW, AppModeEnum.CHAT, AppModeEnum.ADVANCED_CHAT, AppModeEnum.AGENT_CHAT] as const
 
+export type AppTypeEnum
+  = | 'workflow'
+    | 'chat'
+    | 'rag-pipeline'
+    | 'snippet'
+    | 'evaluation'
+export const AppTypeEnum = {
+  WORKFLOW: 'workflow' as AppTypeEnum,
+  CHAT: 'chat' as AppTypeEnum,
+  RAG_PIPELINE: 'rag-pipeline' as AppTypeEnum,
+  SNIPPET: 'snippet' as AppTypeEnum,
+  EVALUATION: 'evaluation' as AppTypeEnum,
+} as const
+
 /**
  * Variable type
  */
@@ -123,10 +152,11 @@ export type ToolItem = {
   }
 } | AgentTool
 
-export enum AgentStrategy {
-  functionCall = 'function_call',
-  react = 'react',
-}
+export type AgentStrategy = 'function_call' | 'react'
+export const AgentStrategy = {
+  functionCall: 'function_call' as AgentStrategy,
+  react: 'react' as AgentStrategy,
+} as const
 
 export type CompletionParams = {
   /** Maximum number of tokens in the answer message returned by Completion */
@@ -325,6 +355,8 @@ export type App = {
 
   /** Mode */
   mode: AppModeEnum
+  /** Type */
+  type?: AppTypeEnum
   /** Enable web app */
   enable_site: boolean
   /** Enable web API */
@@ -366,21 +398,24 @@ export type AppSSO = {
   enable_sso: boolean
 }
 
-export enum Resolution {
-  low = 'low',
-  high = 'high',
-}
+export type Resolution = 'low' | 'high'
+export const Resolution = {
+  low: 'low' as Resolution,
+  high: 'high' as Resolution,
+} as const
 
-export enum TransferMethod {
-  all = 'all',
-  local_file = 'local_file',
-  remote_url = 'remote_url',
-}
+export type TransferMethod = 'all' | 'local_file' | 'remote_url'
+export const TransferMethod = {
+  all: 'all' as TransferMethod,
+  local_file: 'local_file' as TransferMethod,
+  remote_url: 'remote_url' as TransferMethod,
+} as const
 
-export enum TtsAutoPlay {
-  enabled = 'enabled',
-  disabled = 'disabled',
-}
+export type TtsAutoPlay = 'enabled' | 'disabled'
+export const TtsAutoPlay = {
+  enabled: 'enabled' as TtsAutoPlay,
+  disabled: 'disabled' as TtsAutoPlay,
+} as const
 
 export const ALLOW_FILE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'webp', 'gif']
 
diff --git a/web/types/common.ts b/web/types/common.ts
index 19bc8acc8d..6c7cbebf20 100644
--- a/web/types/common.ts
+++ b/web/types/common.ts
@@ -1,4 +1,5 @@
 export enum FlowType {
   appFlow = 'appFlow',
   ragPipeline = 'ragPipeline',
+  snippet = 'snippet',
 }
diff --git a/web/types/evaluation.ts b/web/types/evaluation.ts
new file mode 100644
index 0000000000..543ade6b17
--- /dev/null
+++ b/web/types/evaluation.ts
@@ -0,0 +1,200 @@
+export type EvaluationTargetType = 'apps' | 'snippets' | 'datasets'
+
+export type EvaluationJudgmentConditionValue = string | string[] | boolean
+
+export type EvaluationJudgmentCondition = {
+  variable_selector?: string[]
+  comparison_operator?: string
+  value?: EvaluationJudgmentConditionValue
+}
+
+export type EvaluationJudgmentConfig = {
+  logical_operator?: 'and' | 'or'
+  conditions?: EvaluationJudgmentCondition[]
+}
+
+export type EvaluationConfig = {
+  evaluation_model: string | null
+  evaluation_model_provider: string | null
+  default_metrics?: EvaluationDefaultMetric[] | null
+  customized_metrics?: EvaluationCustomizedMetric | null
+  judgment_config?: EvaluationJudgmentConfig | null
+}
+
+export type NodeInfo = {
+  node_id: string
+  type: string
+  title: string
+}
+
+export type EvaluationDefaultMetric = {
+  metric?: string
+  value_type?: string
+  node_info_list?: NodeInfo[]
+}
+
+export type EvaluationCustomizedMetric = {
+  evaluation_workflow_id?: string
+  input_fields?: Record<string, string | null | undefined>
+  output_fields?: Array<{
+    variable?: string
+    value_type?: string
+  }>
+}
+
+export type EvaluationConfigData = {
+  evaluation_model?: string
+  evaluation_model_provider?: string
+  default_metrics?: EvaluationDefaultMetric[] | null
+  customized_metrics?: EvaluationCustomizedMetric | null
+  judgment_config?: EvaluationJudgmentConfig | null
+}
+
+export type EvaluationRunRequest = EvaluationConfigData & {
+  file_id: string
+}
+
+export type EvaluationRunStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
+
+export type EvaluationRun = {
+  id: string
+  tenant_id: string
+  target_type: string
+  target_id: string
+  evaluation_config_id: string
+  status: EvaluationRunStatus
+  dataset_file_id: string | null
+  result_file_id: string | null
+  total_items: number
+  completed_items: number
+  failed_items: number
+  progress: number
+  metrics_summary: Record<string, unknown>
+  error: string | null
+  created_by: string
+  started_at: number | null
+  completed_at: number | null
+  created_at: number
+}
+
+export type EvaluationLogFile = {
+  id: string
+  name: string
+}
+
+export type EvaluationLog = {
+  id?: string
+  run_id?: string
+  evaluation_run_id?: string
+  created_at: string
+  created_by: string
+  test_file: EvaluationLogFile
+  result_file: EvaluationLogFile | null
+  version: string
+}
+
+export type EvaluationRunMetric = {
+  name?: string
+  value?: unknown
+  details?: Record<string, unknown>
+}
+
+export type EvaluationRunItem = {
+  id: string
+  item_index: number
+  inputs: Record<string, unknown>
+  expected_output: string | null
+  actual_output: string | null
+  metrics: EvaluationRunMetric[]
+  judgment: Record<string, unknown>
+  metadata: Record<string, unknown>
+  error: string | null
+  overall_score: number | null
+}
+
+export type EvaluationLogsResponse = {
+  data: EvaluationLog[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export type EvaluationRunItemsPagination = {
+  data: EvaluationRunItem[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export type EvaluationRunDetailResponse = {
+  run: EvaluationRun
+  items: EvaluationRunItemsPagination
+}
+
+export type EvaluationMetricsMapResponse = {
+  metrics: Record<string, string[]>
+}
+
+export type EvaluationMetricsListResponse = {
+  metrics: string[]
+}
+
+export type EvaluationWorkflowOperator = {
+  id: string
+  name: string
+  email: string
+}
+
+export type AvailableEvaluationWorkflow = {
+  id: string
+  app_id: string
+  app_name: string
+  type: string
+  version: string
+  marked_name: string
+  marked_comment: string
+  hash: string
+  created_by: EvaluationWorkflowOperator
+  created_at: number
+  updated_by: EvaluationWorkflowOperator | null
+  updated_at: number
+}
+
+export type AvailableEvaluationWorkflowsResponse = {
+  items: AvailableEvaluationWorkflow[]
+  page: number
+  limit: number
+  has_more: boolean
+}
+
+export type EvaluationWorkflowAssociatedTargetType = 'app' | 'snippets' | 'knowledge_base'
+
+export type EvaluationWorkflowAssociatedTarget = {
+  target_type: EvaluationWorkflowAssociatedTargetType
+  target_id: string
+  target_name: string
+}
+
+export type EvaluationWorkflowAssociatedTargetsResponse = {
+  items: EvaluationWorkflowAssociatedTarget[]
+}
+
+export type EvaluationNodeInfoRequest = {
+  metrics?: string[]
+}
+
+export type EvaluationNodeInfoResponse = Record<string, NodeInfo[]>
+
+export type EvaluationFileInfo = {
+  id: string
+  name: string
+  size: number
+  extension: string
+  mime_type: string
+  created_at: number
+  download_url: string
+}
+
+export type EvaluationVersionDetailResponse = {
+  graph: Record<string, unknown>
+}
diff --git a/web/types/snippet.ts b/web/types/snippet.ts
new file mode 100644
index 0000000000..f0651c6ebf
--- /dev/null
+++ b/web/types/snippet.ts
@@ -0,0 +1,164 @@
+import type { AppIconType } from '@/types/app'
+
+export type SnippetType = 'node' | 'group'
+
+export type SnippetIconInfo = {
+  icon_type: AppIconType | null
+  icon: string
+  icon_background?: string
+  icon_url?: string
+}
+
+export type SnippetInputField = Record<string, unknown>
+
+export type Snippet = {
+  id: string
+  name: string
+  description: string
+  type: SnippetType
+  is_published: boolean
+  version: string
+  use_count: number
+  icon_info: SnippetIconInfo
+  input_fields: SnippetInputField[]
+  created_at: number
+  updated_at: number
+  author: string
+}
+
+export type SnippetListItem = Omit<Snippet, 'version' | 'input_fields'>
+
+export type SnippetListResponse = {
+  data: SnippetListItem[]
+  page: number
+  limit: number
+  total: number
+  has_more: boolean
+}
+
+export type CreateSnippetPayload = {
+  name: string
+  description?: string
+  type?: SnippetType
+  icon_info?: SnippetIconInfo
+  input_fields?: SnippetInputField[]
+}
+
+export type UpdateSnippetPayload = {
+  name?: string
+  description?: string
+  icon_info?: SnippetIconInfo
+}
+
+export type SnippetImportPayload = {
+  mode?: string
+  yaml_content?: string
+  yaml_url?: string
+  snippet_id?: string
+  name?: string
+  description?: string
+}
+
+export type SnippetDSLImportResponse = {
+  id: string
+  status: string
+  snippet_id?: string
+  current_dsl_version?: string
+  imported_dsl_version?: string
+  error: string
+}
+
+export type IncrementSnippetUseCountResponse = {
+  result: string
+  use_count: number
+}
+
+export type SnippetWorkflow = {
+  id: string
+  graph: Record<string, unknown>
+  features: Record<string, unknown>
+  input_fields?: SnippetInputField[]
+  hash: string
+  created_at: number
+  updated_at: number
+}
+
+export type SnippetDraftSyncPayload = {
+  graph?: Record<string, unknown>
+  hash?: string
+  environment_variables?: Record<string, unknown>[]
+  conversation_variables?: Record<string, unknown>[]
+  input_fields?: SnippetInputField[]
+}
+
+export type SnippetDraftSyncResponse = {
+  result: string
+  hash: string
+  updated_at: number
+}
+
+export type SnippetDraftConfig = {
+  parallel_depth_limit: number
+}
+
+export type PublishSnippetWorkflowResponse = {
+  result: string
+  created_at: number
+}
+
+export type WorkflowRunDetail = {
+  id: string
+  version: string
+  status: 'running' | 'succeeded' | 'failed' | 'stopped' | 'partial-succeeded'
+  elapsed_time: number
+  total_tokens: number
+  total_steps: number
+  created_at: number
+  finished_at: number
+  exceptions_count: number
+}
+
+export type WorkflowRunPagination = {
+  limit: number
+  has_more: boolean
+  data: WorkflowRunDetail[]
+}
+
+export type WorkflowNodeExecution = {
+  id: string
+  index: number
+  node_id: string
+  node_type: string
+  title: string
+  inputs: Record<string, unknown>
+  process_data: Record<string, unknown>
+  outputs: Record<string, unknown>
+  status: string
+  error: string
+  elapsed_time: number
+  created_at: number
+  finished_at: number
+}
+
+export type WorkflowNodeExecutionListResponse = {
+  data: WorkflowNodeExecution[]
+}
+
+export type SnippetDraftNodeRunPayload = {
+  inputs?: Record<string, unknown>
+  query?: string
+  files?: Record<string, unknown>[]
+}
+
+export type SnippetDraftRunPayload = {
+  inputs?: Record<string, unknown>
+  files?: Record<string, unknown>[]
+}
+
+export type SnippetIterationNodeRunPayload = {
+  inputs?: Record<string, unknown>
+}
+
+export type SnippetLoopNodeRunPayload = {
+  inputs?: Record<string, unknown>
+}
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index 9e7dfd7e7a..fc457e602e 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -427,6 +427,8 @@ export type PublishWorkflowParams = {
   releaseNotes: string
 }
 
+export type WorkflowTypeConversionTarget = 'workflow' | 'evaluation'
+
 export type UpdateWorkflowParams = {
   url: string
   title: string