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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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/120] 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 50a55513d48309b156b945e0cdb54e51efb63988 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 15 Apr 2026 15:03:40 +0800
Subject: [PATCH 093/120] refactor(ui): decouple CSS dependencies and improve
 test quality (#35242)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../__tests__/automatic-btn.spec.tsx          |  16 --
 .../__tests__/cloud.spec.tsx                  |   6 -
 .../__tests__/index.spec.tsx                  |   6 -
 .../apikey-info-panel.test-utils.tsx          |  12 +-
 .../__tests__/index.spec.tsx                  |  43 -----
 .../notion-connector/__tests__/index.spec.tsx |   1 -
 .../ui/alert-dialog/__tests__/index.spec.tsx  |  10 +-
 .../components/base/ui/alert-dialog/index.tsx |   1 -
 web/app/components/base/ui/avatar/index.tsx   |   2 +-
 .../base/ui/button/__tests__/index.spec.tsx   |  66 +++++---
 web/app/components/base/ui/button/index.css   | 148 ------------------
 web/app/components/base/ui/button/index.tsx   |  86 ++++++++--
 .../base/ui/dialog/__tests__/index.spec.tsx   |  15 --
 web/app/components/base/ui/dialog/index.tsx   |   2 +-
 .../ui/dropdown-menu/__tests__/index.spec.tsx |  21 +--
 .../ui/number-field/__tests__/index.spec.tsx  |  12 --
 .../base/ui/popover/__tests__/index.spec.tsx  |  16 --
 web/app/components/base/ui/popover/index.tsx  |   2 +
 .../ui/scroll-area/__tests__/index.spec.tsx   |   5 +-
 .../components/base/ui/scroll-area/index.tsx  |   4 +-
 .../{index.module.css => scroll-area.css}     |  30 ++--
 .../base/ui/tooltip/__tests__/index.spec.tsx  |  11 +-
 .../template-card/__tests__/actions.spec.tsx  |  15 --
 .../__tests__/csv-uploader.spec.tsx           |  18 ---
 .../__tests__/modal.spec.tsx                  |  31 +---
 .../dataset-metadata-drawer.spec.tsx          |   7 +-
 .../__tests__/secret-key-button.spec.tsx      |  12 --
 .../__tests__/index.spec.tsx                  |   6 -
 .../__tests__/authorize-components.spec.tsx   |  42 -----
 .../__tests__/version-mismatch-modal.spec.tsx |  17 --
 .../confirm-modal/__tests__/index.spec.tsx    |  10 --
 web/app/styles/globals.css                    |   1 -
 web/eslint-suppressions.json                  |   5 -
 33 files changed, 166 insertions(+), 513 deletions(-)
 delete mode 100644 web/app/components/base/ui/button/index.css
 rename web/app/components/base/ui/scroll-area/{index.module.css => scroll-area.css} (57%)

diff --git a/web/app/components/app/configuration/config/automatic/__tests__/automatic-btn.spec.tsx b/web/app/components/app/configuration/config/automatic/__tests__/automatic-btn.spec.tsx
index b32c77ba21..218aa2732b 100644
--- a/web/app/components/app/configuration/config/automatic/__tests__/automatic-btn.spec.tsx
+++ b/web/app/components/app/configuration/config/automatic/__tests__/automatic-btn.spec.tsx
@@ -58,20 +58,4 @@ describe('AutomaticBtn', () => {
       expect(mockOnClick).toHaveBeenCalledTimes(3)
     })
   })
-
-  describe('Styling', () => {
-    it('should have secondary-accent variant', () => {
-      render(<AutomaticBtn onClick={mockOnClick} />)
-
-      const button = screen.getByRole('button')
-      expect(button.className).toContain('secondary-accent')
-    })
-
-    it('should have small size', () => {
-      render(<AutomaticBtn onClick={mockOnClick} />)
-
-      const button = screen.getByRole('button')
-      expect(button.className).toContain('small')
-    })
-  })
 })
diff --git a/web/app/components/app/overview/apikey-info-panel/__tests__/cloud.spec.tsx b/web/app/components/app/overview/apikey-info-panel/__tests__/cloud.spec.tsx
index 037803d355..e6abf54ac5 100644
--- a/web/app/components/app/overview/apikey-info-panel/__tests__/cloud.spec.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/__tests__/cloud.spec.tsx
@@ -95,12 +95,6 @@ describe('APIKeyInfoPanel - Cloud Edition', () => {
   })
 
   describe('Props and Styling', () => {
-    it('should render button with primary variant', () => {
-      scenarios.withAPIKeyNotSet()
-      const button = screen.getByRole('button')
-      expect(button).toHaveClass('btn-primary')
-    })
-
     it('should render panel container with correct classes', () => {
       const { container } = scenarios.withAPIKeyNotSet()
       const panel = container.firstChild as HTMLElement
diff --git a/web/app/components/app/overview/apikey-info-panel/__tests__/index.spec.tsx b/web/app/components/app/overview/apikey-info-panel/__tests__/index.spec.tsx
index d9c10b6ab9..7b3a12898a 100644
--- a/web/app/components/app/overview/apikey-info-panel/__tests__/index.spec.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/__tests__/index.spec.tsx
@@ -108,12 +108,6 @@ describe('APIKeyInfoPanel - Community Edition', () => {
   })
 
   describe('Props and Styling', () => {
-    it('should render button with primary variant', () => {
-      scenarios.withAPIKeyNotSet()
-      const button = screen.getByRole('button')
-      expect(button).toHaveClass('btn-primary')
-    })
-
     it('should render panel container with correct classes', () => {
       const { container } = scenarios.withAPIKeyNotSet()
       const panel = container.firstChild as HTMLElement
diff --git a/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
index 4bab54b711..5d3c008989 100644
--- a/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
@@ -1,7 +1,7 @@
 import type { RenderOptions } from '@testing-library/react'
 import type { Mock, MockedFunction } from 'vitest'
 import type { ModalContextState } from '@/context/modal-context'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { noop } from 'es-toolkit/function'
 import { defaultPlan } from '@/app/components/billing/config'
 import { useModalContext as actualUseModalContext } from '@/context/modal-context'
@@ -81,6 +81,8 @@ type APIKeyInfoPanelRenderOptions = {
   mockOverrides?: MockOverrides
 } & Omit<RenderOptions, 'wrapper'>
 
+const mainButtonName = /appOverview\.apiKeyInfo\.setAPIBtn/
+
 // Setup function to configure mocks
 function setupMocks(overrides: MockOverrides = {}) {
   mockUseProviderContext.mockReturnValue({
@@ -137,7 +139,7 @@ export const scenarios = {
 export const assertions = {
   // Should render main button
   shouldRenderMainButton: () => {
-    const button = document.querySelector('button.btn-primary')
+    const button = screen.getByRole('button', { name: mainButtonName })
     expect(button).toBeInTheDocument()
     return button
   },
@@ -174,9 +176,8 @@ export const assertions = {
 export const interactions = {
   // Click the main button
   clickMainButton: () => {
-    const button = document.querySelector('button.btn-primary')
-    if (button)
-      fireEvent.click(button)
+    const button = screen.getByRole('button', { name: mainButtonName })
+    fireEvent.click(button)
     return button
   },
 
@@ -191,6 +192,7 @@ export const interactions = {
 
 // Text content keys for assertions
 export const textKeys = {
+  button: mainButtonName,
   selfHost: {
     titleRow1: /appOverview\.apiKeyInfo\.selfHost\.title\.row1/,
     titleRow2: /appOverview\.apiKeyInfo\.selfHost\.title\.row2/,
diff --git a/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx b/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx
index 521988d3e6..176aa87786 100644
--- a/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx
+++ b/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx
@@ -84,49 +84,6 @@ describe('InlineDeleteConfirm', () => {
     })
   })
 
-  describe('Variant prop', () => {
-    it('should render with delete variant by default', () => {
-      const onConfirm = vi.fn()
-      const onCancel = vi.fn()
-      const { getByText } = render(
-        <InlineDeleteConfirm onConfirm={onConfirm} onCancel={onCancel} />,
-      )
-
-      const confirmButton = getByText('Yes').closest('button')
-      expect(confirmButton?.className).toContain('btn-destructive-primary')
-    })
-
-    it('should render without destructive class for warning variant', () => {
-      const onConfirm = vi.fn()
-      const onCancel = vi.fn()
-      const { getByText } = render(
-        <InlineDeleteConfirm
-          variant="warning"
-          onConfirm={onConfirm}
-          onCancel={onCancel}
-        />,
-      )
-
-      const confirmButton = getByText('Yes').closest('button')
-      expect(confirmButton?.className).not.toContain('btn-destructive-primary')
-    })
-
-    it('should render without destructive class for info variant', () => {
-      const onConfirm = vi.fn()
-      const onCancel = vi.fn()
-      const { getByText } = render(
-        <InlineDeleteConfirm
-          variant="info"
-          onConfirm={onConfirm}
-          onCancel={onCancel}
-        />,
-      )
-
-      const confirmButton = getByText('Yes').closest('button')
-      expect(confirmButton?.className).not.toContain('btn-destructive-primary')
-    })
-  })
-
   describe('Custom className', () => {
     it('should apply custom className to wrapper', () => {
       const onConfirm = vi.fn()
diff --git a/web/app/components/base/notion-connector/__tests__/index.spec.tsx b/web/app/components/base/notion-connector/__tests__/index.spec.tsx
index 578ffffdca..2fb4976b29 100644
--- a/web/app/components/base/notion-connector/__tests__/index.spec.tsx
+++ b/web/app/components/base/notion-connector/__tests__/index.spec.tsx
@@ -22,7 +22,6 @@ describe('NotionConnector', () => {
     })
 
     expect(button).toBeInTheDocument()
-    expect(button).toHaveClass('btn', 'btn-primary')
   })
 
   it('should trigger the onSetting callback when the real button is clicked', async () => {
diff --git a/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx b/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
index 3eec5f9f05..23fbcb19d6 100644
--- a/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
@@ -4,7 +4,6 @@ import {
   AlertDialog,
   AlertDialogActions,
   AlertDialogCancelButton,
-  AlertDialogClose,
   AlertDialogConfirmButton,
   AlertDialogContent,
   AlertDialogDescription,
@@ -70,14 +69,16 @@ describe('AlertDialog wrapper', () => {
   })
 
   describe('User Interactions', () => {
-    it('should open and close dialog when trigger and close are clicked', async () => {
+    it('should open and close dialog when trigger and cancel button are clicked', async () => {
       render(
         <AlertDialog>
           <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
           <AlertDialogContent>
             <AlertDialogTitle>Action Required</AlertDialogTitle>
             <AlertDialogDescription>Please confirm the action.</AlertDialogDescription>
-            <AlertDialogClose>Cancel</AlertDialogClose>
+            <AlertDialogActions>
+              <AlertDialogCancelButton>Cancel</AlertDialogCancelButton>
+            </AlertDialogActions>
           </AlertDialogContent>
         </AlertDialog>,
       )
@@ -109,8 +110,7 @@ describe('AlertDialog wrapper', () => {
 
       expect(screen.getByTestId('actions')).toHaveClass('flex', 'items-start', 'justify-end', 'gap-2', 'self-stretch', 'p-6', 'custom-actions')
       const confirmButton = screen.getByRole('button', { name: 'Confirm' })
-      expect(confirmButton).toHaveClass('btn-primary')
-      expect(confirmButton).toHaveClass('btn-destructive-primary')
+      expect(confirmButton).toHaveClass('bg-components-button-destructive-primary-bg')
     })
 
     it('should keep dialog open after confirm click and close via cancel helper', async () => {
diff --git a/web/app/components/base/ui/alert-dialog/index.tsx b/web/app/components/base/ui/alert-dialog/index.tsx
index c8e68260c0..f922a19847 100644
--- a/web/app/components/base/ui/alert-dialog/index.tsx
+++ b/web/app/components/base/ui/alert-dialog/index.tsx
@@ -10,7 +10,6 @@ export const AlertDialog = BaseAlertDialog.Root
 export const AlertDialogTrigger = BaseAlertDialog.Trigger
 export const AlertDialogTitle = BaseAlertDialog.Title
 export const AlertDialogDescription = BaseAlertDialog.Description
-export const AlertDialogClose = BaseAlertDialog.Close
 
 type AlertDialogContentProps = {
   children: React.ReactNode
diff --git a/web/app/components/base/ui/avatar/index.tsx b/web/app/components/base/ui/avatar/index.tsx
index 0842a1734d..f3bb5298b1 100644
--- a/web/app/components/base/ui/avatar/index.tsx
+++ b/web/app/components/base/ui/avatar/index.tsx
@@ -53,7 +53,7 @@ function AvatarImage({
 }: AvatarImageProps) {
   return (
     <BaseAvatar.Image
-      className={cn('inset-0 absolute size-full object-cover', className)}
+      className={cn('absolute inset-0 size-full object-cover', className)}
       {...props}
     />
   )
diff --git a/web/app/components/base/ui/button/__tests__/index.spec.tsx b/web/app/components/base/ui/button/__tests__/index.spec.tsx
index 656c344b1a..e7b9c92c91 100644
--- a/web/app/components/base/ui/button/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/button/__tests__/index.spec.tsx
@@ -1,8 +1,6 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { Button } from '../index'
 
-afterEach(cleanup)
-
 describe('Button', () => {
   describe('rendering', () => {
     it('renders children text', () => {
@@ -31,58 +29,79 @@ describe('Button', () => {
       expect(link).toHaveTextContent('Link')
       expect(link).toHaveAttribute('href', '/test')
     })
+
+    it('applies base layout classes', () => {
+      render(<Button>Click me</Button>)
+      const btn = screen.getByRole('button')
+      expect(btn).toHaveClass('inline-flex', 'justify-center', 'items-center', 'cursor-pointer')
+    })
   })
 
   describe('variants', () => {
     it('applies default secondary variant', () => {
       render(<Button>Click me</Button>)
-      expect(screen.getByRole('button').className).toContain('btn-secondary')
+      const btn = screen.getByRole('button')
+      expect(btn).toHaveClass('bg-components-button-secondary-bg', 'text-components-button-secondary-text')
     })
 
     it.each([
-      'primary',
-      'secondary',
-      'secondary-accent',
-      'ghost',
-      'ghost-accent',
-      'tertiary',
-    ] as const)('applies %s variant', (variant) => {
+      { variant: 'primary' as const, expectedClass: 'bg-components-button-primary-bg' },
+      { variant: 'secondary' as const, expectedClass: 'bg-components-button-secondary-bg' },
+      { variant: 'secondary-accent' as const, expectedClass: 'text-components-button-secondary-accent-text' },
+      { variant: 'ghost' as const, expectedClass: 'text-components-button-ghost-text' },
+      { variant: 'ghost-accent' as const, expectedClass: 'hover:bg-state-accent-hover' },
+      { variant: 'tertiary' as const, expectedClass: 'bg-components-button-tertiary-bg' },
+    ])('applies $variant variant', ({ variant, expectedClass }) => {
       render(<Button variant={variant}>Click me</Button>)
-      expect(screen.getByRole('button').className).toContain(`btn-${variant}`)
+      expect(screen.getByRole('button')).toHaveClass(expectedClass)
     })
 
     it('applies destructive tone with default variant', () => {
       render(<Button tone="destructive">Click me</Button>)
-      expect(screen.getByRole('button').className).toContain('btn-destructive-secondary')
+      expect(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-secondary-bg')
     })
 
     it('applies destructive tone with primary variant', () => {
       render(<Button variant="primary" tone="destructive">Click me</Button>)
-      expect(screen.getByRole('button').className).toContain('btn-destructive-primary')
+      expect(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-primary-bg')
+    })
+
+    it('applies destructive tone with tertiary variant', () => {
+      render(<Button variant="tertiary" tone="destructive">Click me</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-components-button-destructive-tertiary-bg')
+    })
+
+    it('applies destructive tone with ghost variant', () => {
+      render(<Button variant="ghost" tone="destructive">Click me</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-components-button-destructive-ghost-text')
     })
   })
 
   describe('sizes', () => {
     it('applies default medium size', () => {
       render(<Button>Click me</Button>)
-      expect(screen.getByRole('button').className).toContain('btn-medium')
+      expect(screen.getByRole('button')).toHaveClass('h-8', 'rounded-lg')
     })
 
-    it.each(['small', 'medium', 'large'] as const)('applies %s size', (size) => {
+    it.each([
+      { size: 'small' as const, expectedClass: 'h-6' },
+      { size: 'medium' as const, expectedClass: 'h-8' },
+      { size: 'large' as const, expectedClass: 'h-9' },
+    ])('applies $size size', ({ size, expectedClass }) => {
       render(<Button size={size}>Click me</Button>)
-      expect(screen.getByRole('button').className).toContain(`btn-${size}`)
+      expect(screen.getByRole('button')).toHaveClass(expectedClass)
     })
   })
 
   describe('loading', () => {
     it('shows spinner when loading', () => {
       render(<Button loading>Click me</Button>)
-      expect(screen.getByRole('button').querySelector('.animate-spin')).toBeInTheDocument()
+      expect(screen.getByRole('button').querySelector('[aria-hidden="true"]')).toBeInTheDocument()
     })
 
     it('hides spinner when not loading', () => {
       render(<Button loading={false}>Click me</Button>)
-      expect(screen.getByRole('button').querySelector('.animate-spin')).not.toBeInTheDocument()
+      expect(screen.getByRole('button').querySelector('[aria-hidden="true"]')).not.toBeInTheDocument()
     })
 
     it('auto-disables when loading', () => {
@@ -137,6 +156,15 @@ describe('Button', () => {
     })
   })
 
+  describe('className merging', () => {
+    it('merges custom className with variant classes', () => {
+      render(<Button className="custom-class">Click me</Button>)
+      const btn = screen.getByRole('button')
+      expect(btn).toHaveClass('custom-class')
+      expect(btn).toHaveClass('inline-flex')
+    })
+  })
+
   describe('ref forwarding', () => {
     it('forwards ref to the button element', () => {
       let buttonRef: HTMLButtonElement | null = null
diff --git a/web/app/components/base/ui/button/index.css b/web/app/components/base/ui/button/index.css
deleted file mode 100644
index eee8b7944b..0000000000
--- a/web/app/components/base/ui/button/index.css
+++ /dev/null
@@ -1,148 +0,0 @@
-@utility btn {
-  @apply inline-flex justify-center items-center cursor-pointer whitespace-nowrap
-    outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply cursor-not-allowed;
-  }
-}
-
-@utility btn-small {
-  @apply px-2 h-6 rounded-md text-xs font-medium;
-}
-
-@utility btn-medium {
-  @apply px-3.5 h-8 rounded-lg text-[13px] leading-4 font-medium;
-}
-
-@utility btn-large {
-  @apply px-4 h-9 rounded-[10px] text-sm font-semibold;
-}
-
-@utility btn-primary {
-  @apply shadow
-    bg-components-button-primary-bg
-    border-components-button-primary-border
-    hover:bg-components-button-primary-bg-hover
-    hover:border-components-button-primary-border-hover
-    text-components-button-primary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply shadow-none
-    bg-components-button-primary-bg-disabled
-    border-components-button-primary-border-disabled
-    text-components-button-primary-text-disabled;
-  }
-}
-
-@utility btn-secondary {
-  @apply border-[0.5px]
-    shadow-xs
-    backdrop-blur-[5px]
-    bg-components-button-secondary-bg
-    border-components-button-secondary-border
-    hover:bg-components-button-secondary-bg-hover
-    hover:border-components-button-secondary-border-hover
-    text-components-button-secondary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply backdrop-blur-xs
-    bg-components-button-secondary-bg-disabled
-    border-components-button-secondary-border-disabled
-    text-components-button-secondary-text-disabled;
-  }
-}
-
-@utility btn-secondary-accent {
-  @apply border-[0.5px]
-    shadow-xs
-    bg-components-button-secondary-bg
-    border-components-button-secondary-border
-    hover:bg-components-button-secondary-bg-hover
-    hover:border-components-button-secondary-border-hover
-    text-components-button-secondary-accent-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-secondary-bg-disabled
-    border-components-button-secondary-border-disabled
-    text-components-button-secondary-accent-text-disabled;
-  }
-}
-
-@utility btn-tertiary {
-  @apply bg-components-button-tertiary-bg
-    hover:bg-components-button-tertiary-bg-hover
-    text-components-button-tertiary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-tertiary-bg-disabled
-    text-components-button-tertiary-text-disabled;
-  }
-}
-
-@utility btn-ghost {
-  @apply hover:bg-components-button-ghost-bg-hover
-    text-components-button-ghost-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-ghost-text-disabled;
-  }
-}
-
-@utility btn-ghost-accent {
-  @apply hover:bg-state-accent-hover
-    text-components-button-secondary-accent-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-secondary-accent-text-disabled;
-  }
-}
-
-@utility btn-destructive-primary {
-  @apply bg-components-button-destructive-primary-bg
-    border-components-button-destructive-primary-border
-    hover:bg-components-button-destructive-primary-bg-hover
-    hover:border-components-button-destructive-primary-border-hover
-    text-components-button-destructive-primary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply shadow-none
-    bg-components-button-destructive-primary-bg-disabled
-    border-components-button-destructive-primary-border-disabled
-    text-components-button-destructive-primary-text-disabled;
-  }
-}
-
-@utility btn-destructive-secondary {
-  @apply bg-components-button-destructive-secondary-bg
-    border-components-button-destructive-secondary-border
-    hover:bg-components-button-destructive-secondary-bg-hover
-    hover:border-components-button-destructive-secondary-border-hover
-    text-components-button-destructive-secondary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-secondary-bg-disabled
-    border-components-button-destructive-secondary-border-disabled
-    text-components-button-destructive-secondary-text-disabled;
-  }
-}
-
-@utility btn-destructive-tertiary {
-  @apply bg-components-button-destructive-tertiary-bg
-    hover:bg-components-button-destructive-tertiary-bg-hover
-    text-components-button-destructive-tertiary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-tertiary-bg-disabled
-    text-components-button-destructive-tertiary-text-disabled;
-  }
-}
-
-@utility btn-destructive-ghost {
-  @apply hover:bg-components-button-destructive-ghost-bg-hover
-    text-components-button-destructive-ghost-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-destructive-ghost-text-disabled;
-  }
-}
diff --git a/web/app/components/base/ui/button/index.tsx b/web/app/components/base/ui/button/index.tsx
index 00bbe3c8b7..002213486b 100644
--- a/web/app/components/base/ui/button/index.tsx
+++ b/web/app/components/base/ui/button/index.tsx
@@ -5,21 +5,47 @@ import { cva } from 'class-variance-authority'
 import { cn } from '@/utils/classnames'
 
 const buttonVariants = cva(
-  'btn',
+  'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-[disabled]:cursor-not-allowed',
   {
     variants: {
       variant: {
-        'primary': 'btn-primary',
-        'secondary': 'btn-secondary',
-        'secondary-accent': 'btn-secondary-accent',
-        'ghost': 'btn-ghost',
-        'ghost-accent': 'btn-ghost-accent',
-        'tertiary': 'btn-tertiary',
+        'primary': [
+          'border-components-button-primary-border bg-components-button-primary-bg text-components-button-primary-text shadow',
+          'hover:border-components-button-primary-border-hover hover:bg-components-button-primary-bg-hover',
+          'data-[disabled]:border-components-button-primary-border-disabled data-[disabled]:bg-components-button-primary-bg-disabled data-[disabled]:text-components-button-primary-text-disabled data-[disabled]:shadow-none',
+        ],
+        'secondary': [
+          'border-[0.5px] shadow-xs backdrop-blur-[5px]',
+          'border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-text',
+          'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
+          'data-[disabled]:border-components-button-secondary-border-disabled data-[disabled]:bg-components-button-secondary-bg-disabled data-[disabled]:text-components-button-secondary-text-disabled data-[disabled]:backdrop-blur-xs',
+        ],
+        'secondary-accent': [
+          'border-[0.5px] shadow-xs',
+          'border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-accent-text',
+          'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
+          'data-[disabled]:border-components-button-secondary-border-disabled data-[disabled]:bg-components-button-secondary-bg-disabled data-[disabled]:text-components-button-secondary-accent-text-disabled',
+        ],
+        'tertiary': [
+          'bg-components-button-tertiary-bg text-components-button-tertiary-text',
+          'hover:bg-components-button-tertiary-bg-hover',
+          'data-[disabled]:bg-components-button-tertiary-bg-disabled data-[disabled]:text-components-button-tertiary-text-disabled',
+        ],
+        'ghost': [
+          'text-components-button-ghost-text',
+          'hover:bg-components-button-ghost-bg-hover',
+          'data-[disabled]:text-components-button-ghost-text-disabled',
+        ],
+        'ghost-accent': [
+          'text-components-button-secondary-accent-text',
+          'hover:bg-state-accent-hover',
+          'data-[disabled]:text-components-button-secondary-accent-text-disabled',
+        ],
       },
       size: {
-        small: 'btn-small',
-        medium: 'btn-medium',
-        large: 'btn-large',
+        small: 'h-6 rounded-md px-2 text-xs font-medium',
+        medium: 'h-8 rounded-lg px-3.5 text-[13px] leading-4 font-medium',
+        large: 'h-9 rounded-[10px] px-4 text-sm font-semibold',
       },
       tone: {
         default: '',
@@ -27,10 +53,42 @@ const buttonVariants = cva(
       },
     },
     compoundVariants: [
-      { variant: 'primary', tone: 'destructive', class: 'btn-destructive-primary' },
-      { variant: 'secondary', tone: 'destructive', class: 'btn-destructive-secondary' },
-      { variant: 'tertiary', tone: 'destructive', class: 'btn-destructive-tertiary' },
-      { variant: 'ghost', tone: 'destructive', class: 'btn-destructive-ghost' },
+      {
+        variant: 'primary',
+        tone: 'destructive',
+        class: [
+          'border-components-button-destructive-primary-border bg-components-button-destructive-primary-bg text-components-button-destructive-primary-text',
+          'hover:border-components-button-destructive-primary-border-hover hover:bg-components-button-destructive-primary-bg-hover',
+          'data-[disabled]:border-components-button-destructive-primary-border-disabled data-[disabled]:bg-components-button-destructive-primary-bg-disabled data-[disabled]:text-components-button-destructive-primary-text-disabled data-[disabled]:shadow-none',
+        ],
+      },
+      {
+        variant: 'secondary',
+        tone: 'destructive',
+        class: [
+          'border-components-button-destructive-secondary-border bg-components-button-destructive-secondary-bg text-components-button-destructive-secondary-text',
+          'hover:border-components-button-destructive-secondary-border-hover hover:bg-components-button-destructive-secondary-bg-hover',
+          'data-[disabled]:border-components-button-destructive-secondary-border-disabled data-[disabled]:bg-components-button-destructive-secondary-bg-disabled data-[disabled]:text-components-button-destructive-secondary-text-disabled',
+        ],
+      },
+      {
+        variant: 'tertiary',
+        tone: 'destructive',
+        class: [
+          'bg-components-button-destructive-tertiary-bg text-components-button-destructive-tertiary-text',
+          'hover:bg-components-button-destructive-tertiary-bg-hover',
+          'data-[disabled]:bg-components-button-destructive-tertiary-bg-disabled data-[disabled]:text-components-button-destructive-tertiary-text-disabled',
+        ],
+      },
+      {
+        variant: 'ghost',
+        tone: 'destructive',
+        class: [
+          'text-components-button-destructive-ghost-text',
+          'hover:bg-components-button-destructive-ghost-bg-hover',
+          'data-[disabled]:text-components-button-destructive-ghost-text-disabled',
+        ],
+      },
     ],
     defaultVariants: {
       variant: 'secondary',
diff --git a/web/app/components/base/ui/dialog/__tests__/index.spec.tsx b/web/app/components/base/ui/dialog/__tests__/index.spec.tsx
index 2e52bd547a..55f4e53288 100644
--- a/web/app/components/base/ui/dialog/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/dialog/__tests__/index.spec.tsx
@@ -1,15 +1,11 @@
-import { Dialog as BaseDialog } from '@base-ui/react/dialog'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import {
   Dialog,
-  DialogClose,
   DialogCloseButton,
   DialogContent,
   DialogDescription,
-  DialogPortal,
   DialogTitle,
-  DialogTrigger,
 } from '../index'
 
 describe('Dialog wrapper', () => {
@@ -86,15 +82,4 @@ describe('Dialog wrapper', () => {
       expect(onClick).not.toHaveBeenCalled()
     })
   })
-
-  describe('Exports', () => {
-    it('should map dialog aliases to the matching base dialog primitives', () => {
-      expect(Dialog).toBe(BaseDialog.Root)
-      expect(DialogTrigger).toBe(BaseDialog.Trigger)
-      expect(DialogTitle).toBe(BaseDialog.Title)
-      expect(DialogDescription).toBe(BaseDialog.Description)
-      expect(DialogClose).toBe(BaseDialog.Close)
-      expect(DialogPortal).toBe(BaseDialog.Portal)
-    })
-  })
 })
diff --git a/web/app/components/base/ui/dialog/index.tsx b/web/app/components/base/ui/dialog/index.tsx
index 5dcebfcac2..c1802806c9 100644
--- a/web/app/components/base/ui/dialog/index.tsx
+++ b/web/app/components/base/ui/dialog/index.tsx
@@ -12,10 +12,10 @@ import * as React from 'react'
 import { cn } from '@/utils/classnames'
 
 export const Dialog = BaseDialog.Root
+/** @public */
 export const DialogTrigger = BaseDialog.Trigger
 export const DialogTitle = BaseDialog.Title
 export const DialogDescription = BaseDialog.Description
-export const DialogClose = BaseDialog.Close
 export const DialogPortal = BaseDialog.Portal
 
 type DialogCloseButtonProps = Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Close>, 'children'>
diff --git a/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx b/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
index b6772e5ad0..93ceb911e7 100644
--- a/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
@@ -1,7 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import Link from '@/next/link'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,21 +12,6 @@ import {
   DropdownMenuTrigger,
 } from '../index'
 
-vi.mock('@/next/link', () => ({
-  default: ({
-    href,
-    children,
-    ...props
-  }: {
-    href: string
-    children?: ReactNode
-  } & Omit<ComponentPropsWithoutRef<'a'>, 'href'>) => (
-    <a href={href} {...props}>
-      {children}
-    </a>
-  ),
-}))
-
 describe('dropdown-menu wrapper', () => {
   describe('DropdownMenuContent', () => {
     it('should position content at bottom-end with default placement when props are omitted', () => {
@@ -295,13 +278,13 @@ describe('dropdown-menu wrapper', () => {
       expect(link).not.toHaveAttribute('closeOnClick')
     })
 
-    it('should preserve link semantics when render prop uses a custom link component', () => {
+    it('should preserve link semantics when render prop uses a custom anchor element', () => {
       render(
         <DropdownMenu open>
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuLinkItem
-              render={<Link href="/account" />}
+              render={<a href="/account" />}
               aria-label="account link"
             >
               Account settings
diff --git a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx b/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
index f988e2b312..abfee58302 100644
--- a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
@@ -6,7 +6,6 @@ import type {
   NumberFieldInputProps,
   NumberFieldUnitProps,
 } from '../index'
-import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
 import { render, screen } from '@testing-library/react'
 import {
   NumberField,
@@ -67,17 +66,6 @@ const renderNumberField = ({
 }
 
 describe('NumberField wrapper', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Export mapping should stay aligned with the Base UI primitive.
-  describe('Exports', () => {
-    it('should map NumberField to the matching base primitive root', () => {
-      expect(NumberField).toBe(BaseNumberField.Root)
-    })
-  })
-
   // Group and input wrappers should preserve the design-system variants and DOM defaults.
   describe('Group and input', () => {
     it('should apply regular group classes by default and merge custom className', () => {
diff --git a/web/app/components/base/ui/popover/__tests__/index.spec.tsx b/web/app/components/base/ui/popover/__tests__/index.spec.tsx
index 9d65f8c934..39fb3f3fac 100644
--- a/web/app/components/base/ui/popover/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/popover/__tests__/index.spec.tsx
@@ -1,12 +1,8 @@
-import { Popover as BasePopover } from '@base-ui/react/popover'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import {
   Popover,
-  PopoverClose,
   PopoverContent,
-  PopoverDescription,
-  PopoverTitle,
   PopoverTrigger,
 } from '..'
 
@@ -93,15 +89,3 @@ describe('PopoverContent', () => {
     })
   })
 })
-
-describe('Popover aliases', () => {
-  describe('Export mapping', () => {
-    it('should map aliases to the matching base popover primitives when wrapper exports are imported', () => {
-      expect(Popover).toBe(BasePopover.Root)
-      expect(PopoverTrigger).toBe(BasePopover.Trigger)
-      expect(PopoverClose).toBe(BasePopover.Close)
-      expect(PopoverTitle).toBe(BasePopover.Title)
-      expect(PopoverDescription).toBe(BasePopover.Description)
-    })
-  })
-})
diff --git a/web/app/components/base/ui/popover/index.tsx b/web/app/components/base/ui/popover/index.tsx
index 045d9066d3..08e3cf51e2 100644
--- a/web/app/components/base/ui/popover/index.tsx
+++ b/web/app/components/base/ui/popover/index.tsx
@@ -9,7 +9,9 @@ import { cn } from '@/utils/classnames'
 export const Popover = BasePopover.Root
 export const PopoverTrigger = BasePopover.Trigger
 export const PopoverClose = BasePopover.Close
+/** @public */
 export const PopoverTitle = BasePopover.Title
+/** @public */
 export const PopoverDescription = BasePopover.Description
 
 type PopoverContentProps = {
diff --git a/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx b/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
index 4945b7f805..0d37c30712 100644
--- a/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
@@ -9,7 +9,6 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from '../index'
-import styles from '../index.module.css'
 
 const renderScrollArea = (options: {
   rootClassName?: string
@@ -106,7 +105,7 @@ describe('scroll-area wrapper', () => {
         const thumb = screen.getByTestId('scroll-area-vertical-thumb')
 
         expect(scrollbar).toHaveAttribute('data-orientation', 'vertical')
-        expect(scrollbar).toHaveClass(styles.scrollbar)
+        expect(scrollbar).toHaveAttribute('data-dify-scrollbar')
         expect(scrollbar).toHaveClass(
           'flex',
           'overflow-clip',
@@ -144,7 +143,7 @@ describe('scroll-area wrapper', () => {
         const thumb = screen.getByTestId('scroll-area-horizontal-thumb')
 
         expect(scrollbar).toHaveAttribute('data-orientation', 'horizontal')
-        expect(scrollbar).toHaveClass(styles.scrollbar)
+        expect(scrollbar).toHaveAttribute('data-dify-scrollbar')
         expect(scrollbar).toHaveClass(
           'flex',
           'overflow-clip',
diff --git a/web/app/components/base/ui/scroll-area/index.tsx b/web/app/components/base/ui/scroll-area/index.tsx
index 34c5e69188..1533092b8a 100644
--- a/web/app/components/base/ui/scroll-area/index.tsx
+++ b/web/app/components/base/ui/scroll-area/index.tsx
@@ -3,7 +3,7 @@
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import styles from './index.module.css'
+import './scroll-area.css'
 
 export const ScrollAreaRoot = BaseScrollArea.Root
 type ScrollAreaRootProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Root>
@@ -25,7 +25,6 @@ type ScrollAreaProps = Omit<ScrollAreaRootProps, 'children'> & {
 }
 
 const scrollAreaScrollbarClassName = cn(
-  styles.scrollbar,
   'flex touch-none overflow-clip p-1 opacity-100 transition-opacity select-none motion-reduce:transition-none',
   'pointer-events-none data-hovering:pointer-events-auto',
   'data-scrolling:pointer-events-auto',
@@ -68,6 +67,7 @@ export function ScrollAreaScrollbar({
 }: ScrollAreaScrollbarProps) {
   return (
     <BaseScrollArea.Scrollbar
+      data-dify-scrollbar=""
       className={cn(scrollAreaScrollbarClassName, className)}
       {...props}
     />
diff --git a/web/app/components/base/ui/scroll-area/index.module.css b/web/app/components/base/ui/scroll-area/scroll-area.css
similarity index 57%
rename from web/app/components/base/ui/scroll-area/index.module.css
rename to web/app/components/base/ui/scroll-area/scroll-area.css
index a81fd3d3c2..7a33076acf 100644
--- a/web/app/components/base/ui/scroll-area/index.module.css
+++ b/web/app/components/base/ui/scroll-area/scroll-area.css
@@ -1,5 +1,5 @@
-.scrollbar::before,
-.scrollbar::after {
+[data-dify-scrollbar]::before,
+[data-dify-scrollbar]::after {
   content: '';
   position: absolute;
   z-index: 1;
@@ -9,7 +9,7 @@
   transition: opacity 150ms ease;
 }
 
-.scrollbar[data-orientation='vertical']::before {
+[data-dify-scrollbar][data-orientation='vertical']::before {
   left: 50%;
   top: 4px;
   width: 4px;
@@ -18,7 +18,7 @@
   background: linear-gradient(to bottom, var(--scroll-area-edge-hint-bg, var(--color-components-panel-bg)), transparent);
 }
 
-.scrollbar[data-orientation='vertical']::after {
+[data-dify-scrollbar][data-orientation='vertical']::after {
   left: 50%;
   bottom: 4px;
   width: 4px;
@@ -27,7 +27,7 @@
   background: linear-gradient(to top, var(--scroll-area-edge-hint-bg, var(--color-components-panel-bg)), transparent);
 }
 
-.scrollbar[data-orientation='horizontal']::before {
+[data-dify-scrollbar][data-orientation='horizontal']::before {
   top: 50%;
   left: 4px;
   width: 12px;
@@ -36,7 +36,7 @@
   background: linear-gradient(to right, var(--scroll-area-edge-hint-bg, var(--color-components-panel-bg)), transparent);
 }
 
-.scrollbar[data-orientation='horizontal']::after {
+[data-dify-scrollbar][data-orientation='horizontal']::after {
   top: 50%;
   right: 4px;
   width: 12px;
@@ -45,31 +45,31 @@
   background: linear-gradient(to left, var(--scroll-area-edge-hint-bg, var(--color-components-panel-bg)), transparent);
 }
 
-.scrollbar[data-orientation='vertical']:not([data-overflow-y-start])::before {
+[data-dify-scrollbar][data-orientation='vertical']:not([data-overflow-y-start])::before {
   opacity: 1;
 }
 
-.scrollbar[data-orientation='vertical']:not([data-overflow-y-end])::after {
+[data-dify-scrollbar][data-orientation='vertical']:not([data-overflow-y-end])::after {
   opacity: 1;
 }
 
-.scrollbar[data-orientation='horizontal']:not([data-overflow-x-start])::before {
+[data-dify-scrollbar][data-orientation='horizontal']:not([data-overflow-x-start])::before {
   opacity: 1;
 }
 
-.scrollbar[data-orientation='horizontal']:not([data-overflow-x-end])::after {
+[data-dify-scrollbar][data-orientation='horizontal']:not([data-overflow-x-end])::after {
   opacity: 1;
 }
 
-.scrollbar[data-hovering] > [data-orientation],
-.scrollbar[data-scrolling] > [data-orientation],
-.scrollbar > [data-orientation]:active {
+[data-dify-scrollbar][data-hovering] > [data-orientation],
+[data-dify-scrollbar][data-scrolling] > [data-orientation],
+[data-dify-scrollbar] > [data-orientation]:active {
   background-color: var(--scroll-area-thumb-bg-active, var(--color-state-base-handle-hover));
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .scrollbar::before,
-  .scrollbar::after {
+  [data-dify-scrollbar]::before,
+  [data-dify-scrollbar]::after {
     transition: none;
   }
 }
diff --git a/web/app/components/base/ui/tooltip/__tests__/index.spec.tsx b/web/app/components/base/ui/tooltip/__tests__/index.spec.tsx
index f1a96060d2..7feee4f8c3 100644
--- a/web/app/components/base/ui/tooltip/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/tooltip/__tests__/index.spec.tsx
@@ -1,7 +1,6 @@
-import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../index'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../index'
 
 describe('TooltipContent', () => {
   describe('Placement and offsets', () => {
@@ -105,11 +104,3 @@ describe('TooltipContent', () => {
     })
   })
 })
-
-describe('Tooltip aliases', () => {
-  it('should map alias exports to BaseTooltip components when wrapper exports are imported', () => {
-    expect(TooltipProvider).toBe(BaseTooltip.Provider)
-    expect(Tooltip).toBe(BaseTooltip.Root)
-    expect(TooltipTrigger).toBe(BaseTooltip.Trigger)
-  })
-})
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/actions.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/actions.spec.tsx
index 6dbfb42ec8..0ac767667e 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/actions.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/actions.spec.tsx
@@ -85,21 +85,6 @@ describe('Actions', () => {
     })
   })
 
-  // Button Variants Tests
-  describe('Button Variants', () => {
-    it('should have primary variant for choose button', () => {
-      render(<Actions {...defaultProps} />)
-      const chooseButton = screen.getByText(/operations\.choose/i).closest('button')
-      expect(chooseButton).toHaveClass('btn-primary')
-    })
-
-    it('should have secondary variant for details button', () => {
-      render(<Actions {...defaultProps} />)
-      const detailsButton = screen.getByText(/operations\.details/i).closest('button')
-      expect(detailsButton).toHaveClass('btn-secondary')
-    })
-  })
-
   describe('Layout', () => {
     it('should have absolute positioning', () => {
       const { container } = render(<Actions {...defaultProps} />)
diff --git a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
index 38169c1537..6e3ba6ab90 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
@@ -160,24 +160,6 @@ describe('CSVUploader', () => {
         expect(mockUpdateFile).toHaveBeenCalled()
       })
     })
-
-    it('should call updateFile with undefined when remove is clicked', () => {
-      const mockUpdateFile = vi.fn()
-      const mockFile: FileItem = {
-        fileID: 'file-1',
-        file: new File(['content'], 'test.csv', { type: 'text/csv' }) as CustomFile,
-        progress: 100,
-      }
-      const { container } = render(
-        <CSVUploader {...defaultProps} file={mockFile} updateFile={mockUpdateFile} />,
-      )
-
-      const deleteButton = container.querySelector('.cursor-pointer')
-      if (deleteButton)
-        fireEvent.click(deleteButton)
-
-      expect(mockUpdateFile).toHaveBeenCalledWith()
-    })
   })
 
   describe('Validation', () => {
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 c3b44ebd61..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
@@ -187,10 +187,7 @@ describe('EditMetadataBatchModal', () => {
       })
 
       // Find the primary save button (not the one in SelectMetadataModal)
-      const saveButtons = screen.getAllByText(/save/i)
-      const modalSaveButton = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
-      if (modalSaveButton)
-        fireEvent.click(modalSaveButton)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       expect(onSave).toHaveBeenCalled()
     })
@@ -443,13 +440,10 @@ describe('EditMetadataBatchModal', () => {
       })
 
       // Find the primary save button
-      const saveButtons = screen.getAllByText(/save/i)
-      const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
-      if (saveBtn) {
-        fireEvent.click(saveBtn)
-        fireEvent.click(saveBtn)
-        fireEvent.click(saveBtn)
-      }
+      const saveBtn = screen.getByRole('button', { name: 'common.operation.save' })
+      fireEvent.click(saveBtn)
+      fireEvent.click(saveBtn)
+      fireEvent.click(saveBtn)
 
       expect(onSave).toHaveBeenCalledTimes(3)
     })
@@ -462,10 +456,7 @@ describe('EditMetadataBatchModal', () => {
         expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
-      const saveButtons = screen.getAllByText(/save/i)
-      const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
-      if (saveBtn)
-        fireEvent.click(saveBtn)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       expect(onSave).toHaveBeenCalledWith(
         expect.any(Array),
@@ -486,10 +477,7 @@ describe('EditMetadataBatchModal', () => {
       if (checkboxContainer)
         fireEvent.click(checkboxContainer)
 
-      const saveButtons = screen.getAllByText(/save/i)
-      const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
-      if (saveBtn)
-        fireEvent.click(saveBtn)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       await waitFor(() => {
         expect(onSave).toHaveBeenCalledWith(
@@ -511,10 +499,7 @@ describe('EditMetadataBatchModal', () => {
       // Remove an item
       fireEvent.click(screen.getByTestId('remove-1'))
 
-      const saveButtons = screen.getAllByText(/save/i)
-      const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
-      if (saveBtn)
-        fireEvent.click(saveBtn)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       expect(onSave).toHaveBeenCalled()
       // The first argument should not contain the deleted item (id '1')
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
index 907174ab19..353a39450e 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
@@ -284,12 +284,7 @@ describe('DatasetMetadataDrawer', () => {
       fireEvent.change(inputs[0], { target: { value: 'renamed_field' } })
 
       // Find and click save button
-      const saveBtns = screen.getAllByText(/save/i)
-      const primaryBtn = saveBtns.find(btn =>
-        btn.closest('button')?.classList.contains('btn-primary'),
-      )
-      if (primaryBtn)
-        fireEvent.click(primaryBtn)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       await waitFor(() => {
         expect(onRename).toHaveBeenCalled()
diff --git a/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx b/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx
index 798d0dd16f..e5134b995d 100644
--- a/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx
+++ b/web/app/components/develop/secret-key/__tests__/secret-key-button.spec.tsx
@@ -139,18 +139,6 @@ describe('SecretKeyButton', () => {
       const button = screen.getByRole('button')
       expect(button.className).toContain('px-3')
     })
-
-    it('should have small size', () => {
-      render(<SecretKeyButton />)
-      const button = screen.getByRole('button')
-      expect(button.className).toContain('btn-small')
-    })
-
-    it('should have ghost variant', () => {
-      render(<SecretKeyButton />)
-      const button = screen.getByRole('button')
-      expect(button.className).toContain('btn-ghost')
-    })
   })
 
   describe('icon styling', () => {
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx
index 2cf83597ca..c1b27a2c04 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx
@@ -120,12 +120,6 @@ describe('SystemModel', () => {
     expect(screen.getByRole('button', { name: /system model settings/i })).toBeDisabled()
   })
 
-  it('should render the primary button variant when configuration is required', () => {
-    render(<SystemModel {...defaultProps} notConfigured />)
-
-    expect(screen.getByRole('button', { name: /system model settings/i })).toHaveClass('btn-primary')
-  })
-
   it('should close dialog when cancel is clicked', async () => {
     render(<SystemModel {...defaultProps} />)
     fireEvent.click(screen.getByRole('button', { name: /system model settings/i }))
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
index acb31cee5f..c495d5501a 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
@@ -156,29 +156,6 @@ describe('AddApiKeyButton', () => {
 
       expect(screen.getByRole('button')).toHaveTextContent('Custom API Key')
     })
-
-    it('should apply button variant', () => {
-      const pluginPayload = createPluginPayload()
-
-      render(
-        <AddApiKeyButton
-          pluginPayload={pluginPayload}
-          buttonVariant="primary"
-        />,
-        { wrapper: createWrapper() },
-      )
-
-      expect(screen.getByRole('button').className).toContain('btn-primary')
-    })
-
-    it('should use secondary-accent variant by default', () => {
-      const pluginPayload = createPluginPayload()
-
-      render(<AddApiKeyButton pluginPayload={pluginPayload} />, { wrapper: createWrapper() })
-
-      // Verify the default button has secondary-accent variant class
-      expect(screen.getByRole('button').className).toContain('btn-secondary-accent')
-    })
   })
 
   describe('Props Testing', () => {
@@ -372,25 +349,6 @@ describe('AddOAuthButton', () => {
 
       expect(screen.getByText('plugin.auth.setupOAuth')).toBeInTheDocument()
     })
-
-    it('should apply button variant to setup button', () => {
-      const pluginPayload = createPluginPayload()
-      mockGetPluginOAuthClientSchema.mockReturnValue({
-        schema: [],
-        is_oauth_custom_client_enabled: false,
-        is_system_oauth_params_exists: false,
-      })
-
-      render(
-        <AddOAuthButton
-          pluginPayload={pluginPayload}
-          buttonVariant="secondary"
-        />,
-        { wrapper: createWrapper() },
-      )
-
-      expect(screen.getByRole('button').className).toContain('btn-secondary')
-    })
   })
 
   describe('Rendering - Configured State', () => {
diff --git a/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
index 038362c7ce..56ed88e2ae 100644
--- a/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
@@ -88,23 +88,6 @@ describe('VersionMismatchModal', () => {
     })
   })
 
-  describe('button variants', () => {
-    it('should render cancel button with secondary variant', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      const cancelBtn = screen.getByRole('button', { name: /app\.newApp\.Cancel/ })
-      expect(cancelBtn).toHaveClass('btn-secondary')
-    })
-
-    it('should render confirm button with primary destructive variant', () => {
-      render(<VersionMismatchModal {...defaultProps} />)
-
-      const confirmBtn = screen.getByRole('button', { name: /app\.newApp\.Confirm/ })
-      expect(confirmBtn).toHaveClass('btn-primary')
-      expect(confirmBtn).toHaveClass('btn-destructive-primary')
-    })
-  })
-
   describe('edge cases', () => {
     it('should handle undefined versions gracefully', () => {
       render(<VersionMismatchModal {...defaultProps} versions={undefined} />)
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
index 2cbe98c7ab..c5bce8b663 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
@@ -157,16 +157,6 @@ describe('ConfirmModal', () => {
       // Act & Assert - This will fail the test if user.click throws an unhandled error
       await user.click(confirmButton)
     })
-
-    it('should have correct button variants', () => {
-      // Arrange & Act
-      renderComponent()
-
-      // Assert
-      const confirmButton = screen.getByText('common.operation.confirm')
-      expect(confirmButton).toHaveClass('btn-primary')
-      expect(confirmButton).toHaveClass('btn-destructive-primary')
-    })
   })
 
   // Edge Cases (REQUIRED)
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index ac6475a565..ec5dc86a89 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -8,7 +8,6 @@
 
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
-@import '../components/base/ui/button/index.css';
 @import '../components/base/modal/index.css' layer(base);
 @import '../components/base/premium-badge/index.css';
 @import '../components/base/segmented-control/index.css';
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 6968859c1e..2160c4bcf2 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -3309,11 +3309,6 @@
       "count": 1
     }
   },
-  "app/components/base/ui/avatar/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/video-gallery/VideoPlayer.tsx": {
     "react/set-state-in-effect": {
       "count": 1

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 094/120] 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 79332c0e5e8141d6120e17bf04ea5a59989b011e Mon Sep 17 00:00:00 2001
From: zyssyz123 <916125788@qq.com>
Date: Wed, 15 Apr 2026 15:50:52 +0800
Subject: [PATCH 095/120] =?UTF-8?q?fix:=20Change=20'commit'=20to=20'flush'?=
 =?UTF-8?q?=20to=20prevent=20subsequent=20transaction=20fai=E2=80=A6=20(#3?=
 =?UTF-8?q?5243)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/services/app_dsl_service.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/services/app_dsl_service.py b/api/services/app_dsl_service.py
index 87c28980ab..74b800606d 100644
--- a/api/services/app_dsl_service.py
+++ b/api/services/app_dsl_service.py
@@ -455,7 +455,7 @@ class AppDslService:
             app.updated_by = account.id
 
             self._session.add(app)
-            self._session.commit()
+            self._session.flush()
             app_was_created.send(app, account=account)
 
         # save dependencies

From 554232955468c996c3807601a4b016fa9dc3ad00 Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Wed, 15 Apr 2026 16:03:02 +0800
Subject: [PATCH 096/120] fix(dataset): fix dataset list overlay issue (#35244)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
---
 .../dataset-card/__tests__/index.spec.tsx     | 152 +-----------------
 .../__tests__/operations.spec.tsx             |  70 +++-----
 .../__tests__/corner-labels.spec.tsx          |   4 +-
 ....spec.tsx => operations-dropdown.spec.tsx} | 111 +++++++++----
 .../dataset-card/components/corner-labels.tsx |   4 +-
 .../components/operations-dropdown.tsx        |  68 ++++++++
 .../components/operations-popover.tsx         |  52 ------
 .../datasets/list/dataset-card/index.tsx      |   4 +-
 .../datasets/list/dataset-card/operations.tsx |  48 +++---
 web/app/components/datasets/list/index.tsx    |   7 +-
 web/eslint-suppressions.json                  |  13 --
 11 files changed, 198 insertions(+), 335 deletions(-)
 rename web/app/components/datasets/list/dataset-card/components/__tests__/{operations-popover.spec.tsx => operations-dropdown.spec.tsx} (51%)
 create mode 100644 web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
 delete mode 100644 web/app/components/datasets/list/dataset-card/components/operations-popover.tsx

diff --git a/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx b/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
index 21ddda5ce6..29139da114 100644
--- a/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
@@ -7,8 +7,6 @@ import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datase
 import DatasetCardFooter from '../components/dataset-card-footer'
 import Description from '../components/description'
 import DatasetCard from '../index'
-import OperationItem from '../operation-item'
-import Operations from '../operations'
 
 // Mock external hooks only
 vi.mock('@/hooks/use-format-time-from-now', () => ({
@@ -62,8 +60,8 @@ vi.mock('../components/tag-area', () => ({
     <div ref={ref} data-testid="tag-area" onClick={onClick} />
   )),
 }))
-vi.mock('../components/operations-popover', () => ({
-  default: () => <div data-testid="operations-popover" />,
+vi.mock('../components/operations-dropdown', () => ({
+  default: () => <div data-testid="operations-dropdown" />,
 }))
 
 // Factory function for DataSet mock data
@@ -233,152 +231,6 @@ describe('DatasetCard Integration', () => {
       })
     })
   })
-
-  // Integration tests for OperationItem component
-  describe('OperationItem', () => {
-    const MockIcon = ({ className }: { className?: string }) => (
-      <svg data-testid="mock-icon" className={className} />
-    )
-
-    describe('Rendering', () => {
-      it('should render icon and name', () => {
-        render(<OperationItem Icon={MockIcon as never} name="Edit" />)
-        expect(screen.getByText('Edit')).toBeInTheDocument()
-        expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
-      })
-    })
-
-    describe('User Interactions', () => {
-      it('should call handleClick when clicked', () => {
-        const handleClick = vi.fn()
-        render(<OperationItem Icon={MockIcon as never} name="Delete" handleClick={handleClick} />)
-
-        const item = screen.getByText('Delete').closest('div')
-        fireEvent.click(item!)
-
-        expect(handleClick).toHaveBeenCalledTimes(1)
-      })
-
-      it('should prevent default and stop propagation on click', () => {
-        const handleClick = vi.fn()
-        render(<OperationItem Icon={MockIcon as never} name="Action" handleClick={handleClick} />)
-
-        const item = screen.getByText('Action').closest('div')
-        const event = new MouseEvent('click', { bubbles: true, cancelable: true })
-        const preventDefaultSpy = vi.spyOn(event, 'preventDefault')
-        const stopPropagationSpy = vi.spyOn(event, 'stopPropagation')
-
-        item!.dispatchEvent(event)
-
-        expect(preventDefaultSpy).toHaveBeenCalled()
-        expect(stopPropagationSpy).toHaveBeenCalled()
-      })
-    })
-
-    describe('Edge Cases', () => {
-      it('should not throw when handleClick is undefined', () => {
-        render(<OperationItem Icon={MockIcon as never} name="No handler" />)
-        const item = screen.getByText('No handler').closest('div')
-        expect(() => {
-          fireEvent.click(item!)
-        }).not.toThrow()
-      })
-
-      it('should handle empty name', () => {
-        render(<OperationItem Icon={MockIcon as never} name="" />)
-        expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
-      })
-    })
-  })
-
-  // Integration tests for Operations component
-  describe('Operations', () => {
-    const defaultProps = {
-      showDelete: true,
-      showExportPipeline: true,
-      openRenameModal: vi.fn(),
-      handleExportPipeline: vi.fn(),
-      detectIsUsedByApp: vi.fn(),
-    }
-
-    describe('Rendering', () => {
-      it('should always render edit operation', () => {
-        render(<Operations {...defaultProps} />)
-        expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
-      })
-
-      it('should render export pipeline when showExportPipeline is true', () => {
-        render(<Operations {...defaultProps} showExportPipeline={true} />)
-        expect(screen.getByText(/exportPipeline/)).toBeInTheDocument()
-      })
-
-      it('should not render export pipeline when showExportPipeline is false', () => {
-        render(<Operations {...defaultProps} showExportPipeline={false} />)
-        expect(screen.queryByText(/exportPipeline/)).not.toBeInTheDocument()
-      })
-
-      it('should render delete when showDelete is true', () => {
-        render(<Operations {...defaultProps} showDelete={true} />)
-        expect(screen.getByText(/operation\.delete/)).toBeInTheDocument()
-      })
-
-      it('should not render delete when showDelete is false', () => {
-        render(<Operations {...defaultProps} showDelete={false} />)
-        expect(screen.queryByText(/operation\.delete/)).not.toBeInTheDocument()
-      })
-    })
-
-    describe('User Interactions', () => {
-      it('should call openRenameModal when edit is clicked', () => {
-        const openRenameModal = vi.fn()
-        render(<Operations {...defaultProps} openRenameModal={openRenameModal} />)
-
-        const editItem = screen.getByText(/operation\.edit/).closest('div')
-        fireEvent.click(editItem!)
-
-        expect(openRenameModal).toHaveBeenCalledTimes(1)
-      })
-
-      it('should call handleExportPipeline when export is clicked', () => {
-        const handleExportPipeline = vi.fn()
-        render(<Operations {...defaultProps} handleExportPipeline={handleExportPipeline} />)
-
-        const exportItem = screen.getByText(/exportPipeline/).closest('div')
-        fireEvent.click(exportItem!)
-
-        expect(handleExportPipeline).toHaveBeenCalledTimes(1)
-      })
-
-      it('should call detectIsUsedByApp when delete is clicked', () => {
-        const detectIsUsedByApp = vi.fn()
-        render(<Operations {...defaultProps} detectIsUsedByApp={detectIsUsedByApp} />)
-
-        const deleteItem = screen.getByText(/operation\.delete/).closest('div')
-        fireEvent.click(deleteItem!)
-
-        expect(detectIsUsedByApp).toHaveBeenCalledTimes(1)
-      })
-    })
-
-    describe('Edge Cases', () => {
-      it('should render only edit when both showDelete and showExportPipeline are false', () => {
-        render(<Operations {...defaultProps} showDelete={false} showExportPipeline={false} />)
-        expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
-        expect(screen.queryByText(/exportPipeline/)).not.toBeInTheDocument()
-        expect(screen.queryByText(/operation\.delete/)).not.toBeInTheDocument()
-      })
-
-      it('should render divider before delete section when showDelete is true', () => {
-        const { container } = render(<Operations {...defaultProps} showDelete={true} />)
-        expect(container.querySelector('.bg-divider-subtle')).toBeInTheDocument()
-      })
-
-      it('should not render divider when showDelete is false', () => {
-        const { container } = render(<Operations {...defaultProps} showDelete={false} />)
-        expect(container.querySelector('.bg-divider-subtle')).toBeNull()
-      })
-    })
-  })
 })
 
 describe('DatasetCard Component', () => {
diff --git a/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx b/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx
index edb54cba0c..a6765c0ebe 100644
--- a/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/__tests__/operations.spec.tsx
@@ -1,7 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
+import { DropdownMenu } from '@/app/components/base/ui/dropdown-menu'
 import Operations from '../operations'
 
+function renderInMenu(ui: React.ReactElement) {
+  return render(
+    <DropdownMenu open>
+      {ui}
+    </DropdownMenu>,
+  )
+}
+
 describe('Operations', () => {
   const defaultProps = {
     showDelete: true,
@@ -17,100 +26,65 @@ describe('Operations', () => {
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<Operations {...defaultProps} />)
-      // Edit operation should always be visible
+      renderInMenu(<Operations {...defaultProps} />)
       expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
     })
 
     it('should render edit operation', () => {
-      render(<Operations {...defaultProps} />)
+      renderInMenu(<Operations {...defaultProps} />)
       expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
     })
 
     it('should render export pipeline operation when showExportPipeline is true', () => {
-      render(<Operations {...defaultProps} showExportPipeline={true} />)
+      renderInMenu(<Operations {...defaultProps} showExportPipeline={true} />)
       expect(screen.getByText(/exportPipeline/)).toBeInTheDocument()
     })
 
     it('should not render export pipeline operation when showExportPipeline is false', () => {
-      render(<Operations {...defaultProps} showExportPipeline={false} />)
+      renderInMenu(<Operations {...defaultProps} showExportPipeline={false} />)
       expect(screen.queryByText(/exportPipeline/)).not.toBeInTheDocument()
     })
 
     it('should render delete operation when showDelete is true', () => {
-      render(<Operations {...defaultProps} showDelete={true} />)
+      renderInMenu(<Operations {...defaultProps} showDelete={true} />)
       expect(screen.getByText(/operation\.delete/)).toBeInTheDocument()
     })
 
     it('should not render delete operation when showDelete is false', () => {
-      render(<Operations {...defaultProps} showDelete={false} />)
+      renderInMenu(<Operations {...defaultProps} showDelete={false} />)
       expect(screen.queryByText(/operation\.delete/)).not.toBeInTheDocument()
     })
   })
 
-  describe('Props', () => {
-    it('should render divider when showDelete is true', () => {
-      const { container } = render(<Operations {...defaultProps} showDelete={true} />)
-      const divider = container.querySelector('.bg-divider-subtle')
-      expect(divider).toBeInTheDocument()
-    })
-
-    it('should not render divider when showDelete is false', () => {
-      const { container } = render(<Operations {...defaultProps} showDelete={false} />)
-      // Should not have the divider-subtle one (the separator before delete)
-      expect(container.querySelector('.bg-divider-subtle')).toBeNull()
-    })
-  })
-
   describe('User Interactions', () => {
     it('should call openRenameModal when edit is clicked', () => {
       const openRenameModal = vi.fn()
-      render(<Operations {...defaultProps} openRenameModal={openRenameModal} />)
-
-      const editItem = screen.getByText(/operation\.edit/).closest('div')
-      fireEvent.click(editItem!)
+      renderInMenu(<Operations {...defaultProps} openRenameModal={openRenameModal} />)
 
+      fireEvent.click(screen.getByText(/operation\.edit/))
       expect(openRenameModal).toHaveBeenCalledTimes(1)
     })
 
     it('should call handleExportPipeline when export is clicked', () => {
       const handleExportPipeline = vi.fn()
-      render(<Operations {...defaultProps} handleExportPipeline={handleExportPipeline} />)
-
-      const exportItem = screen.getByText(/exportPipeline/).closest('div')
-      fireEvent.click(exportItem!)
+      renderInMenu(<Operations {...defaultProps} handleExportPipeline={handleExportPipeline} />)
 
+      fireEvent.click(screen.getByText(/exportPipeline/))
       expect(handleExportPipeline).toHaveBeenCalledTimes(1)
     })
 
     it('should call detectIsUsedByApp when delete is clicked', () => {
       const detectIsUsedByApp = vi.fn()
-      render(<Operations {...defaultProps} detectIsUsedByApp={detectIsUsedByApp} />)
-
-      const deleteItem = screen.getByText(/operation\.delete/).closest('div')
-      fireEvent.click(deleteItem!)
+      renderInMenu(<Operations {...defaultProps} detectIsUsedByApp={detectIsUsedByApp} />)
 
+      fireEvent.click(screen.getByText(/operation\.delete/))
       expect(detectIsUsedByApp).toHaveBeenCalledTimes(1)
     })
   })
 
-  describe('Styles', () => {
-    it('should have correct container styling', () => {
-      const { container } = render(<Operations {...defaultProps} />)
-      const operationsContainer = container.firstChild
-      expect(operationsContainer).toHaveClass(
-        'relative',
-        'flex',
-        'w-full',
-        'flex-col',
-        'rounded-xl',
-      )
-    })
-  })
-
   describe('Edge Cases', () => {
     it('should render only edit when both showDelete and showExportPipeline are false', () => {
-      render(<Operations {...defaultProps} showDelete={false} showExportPipeline={false} />)
+      renderInMenu(<Operations {...defaultProps} showDelete={false} showExportPipeline={false} />)
       expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
       expect(screen.queryByText(/exportPipeline/)).not.toBeInTheDocument()
       expect(screen.queryByText(/operation\.delete/)).not.toBeInTheDocument()
diff --git a/web/app/components/datasets/list/dataset-card/components/__tests__/corner-labels.spec.tsx b/web/app/components/datasets/list/dataset-card/components/__tests__/corner-labels.spec.tsx
index 7fff6f4dc1..b68f018e72 100644
--- a/web/app/components/datasets/list/dataset-card/components/__tests__/corner-labels.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/__tests__/corner-labels.spec.tsx
@@ -80,7 +80,7 @@ describe('CornerLabels', () => {
       const dataset = createMockDataset({ embedding_available: false })
       const { container } = render(<CornerLabels dataset={dataset} />)
       const labelContainer = container.firstChild as HTMLElement
-      expect(labelContainer).toHaveClass('absolute', 'right-0', 'top-0', 'z-10')
+      expect(labelContainer).toHaveClass('absolute', 'right-0', 'top-0', 'z-5')
     })
 
     it('should have correct positioning for pipeline label', () => {
@@ -90,7 +90,7 @@ describe('CornerLabels', () => {
       })
       const { container } = render(<CornerLabels dataset={dataset} />)
       const labelContainer = container.firstChild as HTMLElement
-      expect(labelContainer).toHaveClass('absolute', 'right-0', 'top-0', 'z-10')
+      expect(labelContainer).toHaveClass('absolute', 'right-0', 'top-0', 'z-5')
     })
   })
 
diff --git a/web/app/components/datasets/list/dataset-card/components/__tests__/operations-popover.spec.tsx b/web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx
similarity index 51%
rename from web/app/components/datasets/list/dataset-card/components/__tests__/operations-popover.spec.tsx
rename to web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx
index 0d53bb1315..690e01113f 100644
--- a/web/app/components/datasets/list/dataset-card/components/__tests__/operations-popover.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/__tests__/operations-dropdown.spec.tsx
@@ -1,11 +1,11 @@
 import type { DataSet } from '@/models/datasets'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
-import OperationsPopover from '../operations-popover'
+import OperationsDropdown from '../operations-dropdown'
 
-describe('OperationsPopover', () => {
+describe('OperationsDropdown', () => {
   const createMockDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
     id: 'dataset-1',
     name: 'Test Dataset',
@@ -42,102 +42,143 @@ describe('OperationsPopover', () => {
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      const { container } = render(<OperationsPopover {...defaultProps} />)
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
       expect(container.firstChild).toBeInTheDocument()
     })
 
     it('should render the more icon button', () => {
-      const { container } = render(<OperationsPopover {...defaultProps} />)
-      const moreIcon = container.querySelector('svg')
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
+      const moreIcon = container.querySelector('.i-ri-more-fill')
       expect(moreIcon).toBeInTheDocument()
     })
 
     it('should render in hidden state initially (group-hover)', () => {
-      const { container } = render(<OperationsPopover {...defaultProps} />)
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
       const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('hidden', 'group-hover:block')
+      expect(wrapper).toHaveClass(
+        'invisible',
+        'pointer-events-none',
+        'group-hover:visible',
+        'group-hover:pointer-events-auto',
+      )
     })
   })
 
   describe('Props', () => {
     it('should show delete option when not workspace dataset operator', () => {
-      render(<OperationsPopover {...defaultProps} isCurrentWorkspaceDatasetOperator={false} />)
+      render(<OperationsDropdown {...defaultProps} isCurrentWorkspaceDatasetOperator={false} />)
 
       const triggerButton = document.querySelector('[class*="cursor-pointer"]')
       if (triggerButton)
         fireEvent.click(triggerButton)
-
-      // showDelete should be true (inverse of isCurrentWorkspaceDatasetOperator)
-      // This means delete operation will be visible
     })
 
     it('should hide delete option when is workspace dataset operator', () => {
-      render(<OperationsPopover {...defaultProps} isCurrentWorkspaceDatasetOperator={true} />)
+      render(<OperationsDropdown {...defaultProps} isCurrentWorkspaceDatasetOperator={true} />)
 
       const triggerButton = document.querySelector('[class*="cursor-pointer"]')
       if (triggerButton)
         fireEvent.click(triggerButton)
-
-      // showDelete should be false
     })
 
     it('should show export pipeline when runtime_mode is rag_pipeline', () => {
       const dataset = createMockDataset({ runtime_mode: 'rag_pipeline' })
-      render(<OperationsPopover {...defaultProps} dataset={dataset} />)
+      render(<OperationsDropdown {...defaultProps} dataset={dataset} />)
 
       const triggerButton = document.querySelector('[class*="cursor-pointer"]')
       if (triggerButton)
         fireEvent.click(triggerButton)
-
-      // showExportPipeline should be true
     })
 
     it('should hide export pipeline when runtime_mode is not rag_pipeline', () => {
       const dataset = createMockDataset({ runtime_mode: 'general' })
-      render(<OperationsPopover {...defaultProps} dataset={dataset} />)
+      render(<OperationsDropdown {...defaultProps} dataset={dataset} />)
 
       const triggerButton = document.querySelector('[class*="cursor-pointer"]')
       if (triggerButton)
         fireEvent.click(triggerButton)
-
-      // showExportPipeline should be false
     })
   })
 
   describe('Styles', () => {
     it('should have correct positioning styles', () => {
-      const { container } = render(<OperationsPopover {...defaultProps} />)
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
       const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('absolute', 'right-2', 'top-2', 'z-15')
+      expect(wrapper).toHaveClass('absolute', 'right-2', 'top-2', 'z-5')
+    })
+
+    it('should keep the trigger mounted when closed so menu exit animations retain an anchor', () => {
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
+      const wrapper = container.firstChild as HTMLElement
+      const trigger = container.querySelector('[aria-label="Dataset operations"]')
+
+      expect(wrapper).not.toHaveClass('hidden')
+      expect(trigger).toBeInTheDocument()
     })
 
     it('should have icon with correct size classes', () => {
-      const { container } = render(<OperationsPopover {...defaultProps} />)
-      const icon = container.querySelector('svg')
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
+      const icon = container.querySelector('.i-ri-more-fill')
       expect(icon).toHaveClass('h-5', 'w-5', 'text-text-tertiary')
     })
+
+    it('should have aria-label on trigger for accessibility', () => {
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
+      const trigger = container.querySelector('[aria-label="Dataset operations"]')
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should expose visible keyboard focus styles on the trigger', () => {
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
+      const trigger = container.querySelector('[aria-label="Dataset operations"]')
+      expect(trigger).toHaveClass(
+        'focus-visible:outline-hidden',
+        'focus-visible:ring-1',
+        'focus-visible:ring-inset',
+        'focus-visible:ring-components-input-border-hover',
+      )
+    })
+
+    it('should use a solid trigger background without backdrop blur on hover states', () => {
+      const { container } = render(<OperationsDropdown {...defaultProps} />)
+      const trigger = container.querySelector('[aria-label="Dataset operations"]')
+      expect(trigger).toHaveClass('bg-components-button-secondary-bg')
+      expect(trigger).not.toHaveClass('hover:backdrop-blur-[5px]', 'backdrop-blur-[5px]')
+    })
   })
 
   describe('User Interactions', () => {
+    it('should keep outside interactions available when the menu is open', () => {
+      const onOutsideClick = vi.fn()
+
+      render(
+        <div>
+          <button type="button" onClick={onOutsideClick}>Outside action</button>
+          <OperationsDropdown {...defaultProps} />
+        </div>,
+      )
+
+      fireEvent.click(screen.getByLabelText('Dataset operations'))
+      fireEvent.click(screen.getByRole('button', { name: 'Outside action' }))
+
+      expect(onOutsideClick).toHaveBeenCalledTimes(1)
+    })
+
     it('should pass openRenameModal to Operations', () => {
       const openRenameModal = vi.fn()
-      render(<OperationsPopover {...defaultProps} openRenameModal={openRenameModal} />)
-
-      // The openRenameModal should be passed to Operations component
-      expect(openRenameModal).not.toHaveBeenCalled() // Initially not called
+      render(<OperationsDropdown {...defaultProps} openRenameModal={openRenameModal} />)
+      expect(openRenameModal).not.toHaveBeenCalled()
     })
 
     it('should pass handleExportPipeline to Operations', () => {
       const handleExportPipeline = vi.fn()
-      render(<OperationsPopover {...defaultProps} handleExportPipeline={handleExportPipeline} />)
-
+      render(<OperationsDropdown {...defaultProps} handleExportPipeline={handleExportPipeline} />)
       expect(handleExportPipeline).not.toHaveBeenCalled()
     })
 
     it('should pass detectIsUsedByApp to Operations', () => {
       const detectIsUsedByApp = vi.fn()
-      render(<OperationsPopover {...defaultProps} detectIsUsedByApp={detectIsUsedByApp} />)
-
+      render(<OperationsDropdown {...defaultProps} detectIsUsedByApp={detectIsUsedByApp} />)
       expect(detectIsUsedByApp).not.toHaveBeenCalled()
     })
   })
@@ -145,13 +186,13 @@ describe('OperationsPopover', () => {
   describe('Edge Cases', () => {
     it('should handle dataset with external provider', () => {
       const dataset = createMockDataset({ provider: 'external' })
-      const { container } = render(<OperationsPopover {...defaultProps} dataset={dataset} />)
+      const { container } = render(<OperationsDropdown {...defaultProps} dataset={dataset} />)
       expect(container.firstChild).toBeInTheDocument()
     })
 
     it('should handle dataset with undefined runtime_mode', () => {
       const dataset = createMockDataset({ runtime_mode: undefined })
-      const { container } = render(<OperationsPopover {...defaultProps} dataset={dataset} />)
+      const { container } = render(<OperationsDropdown {...defaultProps} dataset={dataset} />)
       expect(container.firstChild).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/datasets/list/dataset-card/components/corner-labels.tsx b/web/app/components/datasets/list/dataset-card/components/corner-labels.tsx
index 03ca543ee7..2fbb840526 100644
--- a/web/app/components/datasets/list/dataset-card/components/corner-labels.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/corner-labels.tsx
@@ -14,7 +14,7 @@ const CornerLabels = ({ dataset }: CornerLabelsProps) => {
     return (
       <CornerLabel
         label={t('cornerLabel.unavailable', { ns: 'dataset' })}
-        className="absolute right-0 top-0 z-10"
+        className="absolute top-0 right-0 z-5"
         labelClassName="rounded-tr-xl"
       />
     )
@@ -24,7 +24,7 @@ const CornerLabels = ({ dataset }: CornerLabelsProps) => {
     return (
       <CornerLabel
         label={t('cornerLabel.pipeline', { ns: 'dataset' })}
-        className="absolute right-0 top-0 z-10"
+        className="absolute top-0 right-0 z-5"
         labelClassName="rounded-tr-xl"
       />
     )
diff --git a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
new file mode 100644
index 0000000000..37a73d5d8f
--- /dev/null
+++ b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
@@ -0,0 +1,68 @@
+import type { DataSet } from '@/models/datasets'
+import * as React from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { cn } from '@/utils/classnames'
+import Operations from '../operations'
+
+type OperationsDropdownProps = {
+  dataset: DataSet
+  isCurrentWorkspaceDatasetOperator: boolean
+  openRenameModal: () => void
+  handleExportPipeline: (include?: boolean) => void
+  detectIsUsedByApp: () => void
+}
+
+const OperationsDropdown = ({
+  dataset,
+  isCurrentWorkspaceDatasetOperator,
+  openRenameModal,
+  handleExportPipeline,
+  detectIsUsedByApp,
+}: OperationsDropdownProps) => {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div
+      className={cn(
+        'absolute top-2 right-2 z-5',
+        open
+          ? 'pointer-events-auto visible'
+          : 'pointer-events-none invisible group-hover:pointer-events-auto group-hover:visible',
+      )}
+      onClick={e => e.stopPropagation()}
+    >
+      <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger
+          className={cn(
+            'inline-flex size-9 cursor-pointer items-center justify-center radius-lg border-[0.5px]',
+            'border-components-actionbar-border bg-components-button-secondary-bg p-0 shadow-lg ring-2 shadow-shadow-shadow-5 ring-components-button-secondary-bg ring-inset',
+            'transition-colors hover:border-components-actionbar-border hover:bg-state-base-hover',
+            'focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden focus-visible:ring-inset',
+            open && 'bg-state-base-hover',
+          )}
+          aria-label="Dataset operations"
+        >
+          <span className="i-ri-more-fill h-5 w-5 text-text-tertiary" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          popupClassName="min-w-[186px]"
+        >
+          <Operations
+            showDelete={!isCurrentWorkspaceDatasetOperator}
+            showExportPipeline={dataset.runtime_mode === 'rag_pipeline'}
+            openRenameModal={openRenameModal}
+            handleExportPipeline={handleExportPipeline}
+            detectIsUsedByApp={detectIsUsedByApp}
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+export default React.memo(OperationsDropdown)
diff --git a/web/app/components/datasets/list/dataset-card/components/operations-popover.tsx b/web/app/components/datasets/list/dataset-card/components/operations-popover.tsx
deleted file mode 100644
index 643242a24f..0000000000
--- a/web/app/components/datasets/list/dataset-card/components/operations-popover.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { DataSet } from '@/models/datasets'
-import { RiMoreFill } from '@remixicon/react'
-import * as React from 'react'
-import CustomPopover from '@/app/components/base/popover'
-import { cn } from '@/utils/classnames'
-import Operations from '../operations'
-
-type OperationsPopoverProps = {
-  dataset: DataSet
-  isCurrentWorkspaceDatasetOperator: boolean
-  openRenameModal: () => void
-  handleExportPipeline: (include?: boolean) => void
-  detectIsUsedByApp: () => void
-}
-
-const OperationsPopover = ({
-  dataset,
-  isCurrentWorkspaceDatasetOperator,
-  openRenameModal,
-  handleExportPipeline,
-  detectIsUsedByApp,
-}: OperationsPopoverProps) => (
-  <div className="absolute right-2 top-2 z-15 hidden group-hover:block">
-    <CustomPopover
-      htmlContent={(
-        <Operations
-          showDelete={!isCurrentWorkspaceDatasetOperator}
-          showExportPipeline={dataset.runtime_mode === 'rag_pipeline'}
-          openRenameModal={openRenameModal}
-          handleExportPipeline={handleExportPipeline}
-          detectIsUsedByApp={detectIsUsedByApp}
-        />
-      )}
-      className="z-20 min-w-[186px]"
-      popupClassName="rounded-xl bg-none shadow-none ring-0 min-w-[186px]"
-      position="br"
-      trigger="click"
-      btnElement={(
-        <div className="flex size-8 items-center justify-center radius-lg hover:bg-state-base-hover">
-          <RiMoreFill className="h-5 w-5 text-text-tertiary" />
-        </div>
-      )}
-      btnClassName={open =>
-        cn(
-          'size-9 cursor-pointer justify-center radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0 shadow-lg shadow-shadow-shadow-5 ring-2 ring-inset ring-components-actionbar-bg hover:border-components-actionbar-border',
-          open ? 'border-components-actionbar-border bg-state-base-hover' : '',
-        )}
-    />
-  </div>
-)
-
-export default React.memo(OperationsPopover)
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index 2a22255eda..5bd032d151 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -9,7 +9,7 @@ import DatasetCardFooter from './components/dataset-card-footer'
 import DatasetCardHeader from './components/dataset-card-header'
 import DatasetCardModals from './components/dataset-card-modals'
 import Description from './components/description'
-import OperationsPopover from './components/operations-popover'
+import OperationsDropdown from './components/operations-dropdown'
 import TagArea from './components/tag-area'
 import { useDatasetCardState } from './hooks/use-dataset-card-state'
 
@@ -82,7 +82,7 @@ const DatasetCard = ({
           onClick={handleTagAreaClick}
         />
         <DatasetCardFooter dataset={dataset} />
-        <OperationsPopover
+        <OperationsDropdown
           dataset={dataset}
           isCurrentWorkspaceDatasetOperator={isCurrentWorkspaceDatasetOperator}
           openRenameModal={openRenameModal}
diff --git a/web/app/components/datasets/list/dataset-card/operations.tsx b/web/app/components/datasets/list/dataset-card/operations.tsx
index cc89015cbc..0deed2c4c9 100644
--- a/web/app/components/datasets/list/dataset-card/operations.tsx
+++ b/web/app/components/datasets/list/dataset-card/operations.tsx
@@ -1,8 +1,9 @@
-import { RiDeleteBinLine, RiEditLine, RiFileDownloadLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
-import OperationItem from './operation-item'
+import {
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '@/app/components/base/ui/dropdown-menu'
 
 type OperationsProps = {
   showDelete: boolean
@@ -22,34 +23,27 @@ const Operations = ({
   const { t } = useTranslation()
 
   return (
-    <div className="relative flex w-full flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5">
-      <div className="flex flex-col p-1">
-        <OperationItem
-          Icon={RiEditLine}
-          name={t('operation.edit', { ns: 'common' })}
-          handleClick={openRenameModal}
-        />
-        {showExportPipeline && (
-          <OperationItem
-            Icon={RiFileDownloadLine}
-            name={t('operations.exportPipeline', { ns: 'datasetPipeline' })}
-            handleClick={handleExportPipeline}
-          />
-        )}
-      </div>
+    <>
+      <DropdownMenuItem onClick={openRenameModal}>
+        <span aria-hidden className="i-ri-edit-line size-4 text-text-tertiary" />
+        {t('operation.edit', { ns: 'common' })}
+      </DropdownMenuItem>
+      {showExportPipeline && (
+        <DropdownMenuItem onClick={handleExportPipeline}>
+          <span aria-hidden className="i-ri-file-download-line size-4 text-text-tertiary" />
+          {t('operations.exportPipeline', { ns: 'datasetPipeline' })}
+        </DropdownMenuItem>
+      )}
       {showDelete && (
         <>
-          <Divider type="horizontal" className="my-0 bg-divider-subtle" />
-          <div className="flex flex-col p-1">
-            <OperationItem
-              Icon={RiDeleteBinLine}
-              name={t('operation.delete', { ns: 'common' })}
-              handleClick={detectIsUsedByApp}
-            />
-          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem destructive onClick={detectIsUsedByApp}>
+            <span aria-hidden className="i-ri-delete-bin-line size-4" />
+            {t('operation.delete', { ns: 'common' })}
+          </DropdownMenuItem>
         </>
       )}
-    </div>
+    </>
   )
 }
 
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
index fae469dc9e..ffc9950f46 100644
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@@ -5,7 +5,6 @@ import { useBoolean, useDebounceFn } from 'ahooks'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import Input from '@/app/components/base/input'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
@@ -85,11 +84,11 @@ const List = () => {
           }
           <div className="h-4 w-px bg-divider-regular" />
           <Button
-            className="shadows-shadow-xs gap-0.5"
+            className="gap-0.5 shadow-xs"
             onClick={() => setShowExternalApiPanel(true)}
           >
-            <ApiConnectionMod className="h-4 w-4 text-components-button-secondary-text" />
-            <div className="flex items-center justify-center gap-1 px-0.5 system-sm-medium text-components-button-secondary-text">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
+            <span className="i-custom-vender-solid-development-api-connection-mod h-4 w-4 text-components-button-secondary-text" />
+            <span className="flex items-center justify-center gap-1 px-0.5 system-sm-medium text-components-button-secondary-text">{t('externalAPIPanelTitle', { ns: 'dataset' })}</span>
           </Button>
         </div>
       </div>
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 2160c4bcf2..3b32e4e7e0 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -4503,11 +4503,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/list/dataset-card/components/corner-labels.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4526,14 +4521,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/list/dataset-card/components/operations-popover.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/list/dataset-card/components/tag-area.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1

From 98897a537987a2c5516cade2d70d298c718dec03 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 10:14:36 +0200
Subject: [PATCH 097/120] test: migrate webhook service additional mock tests
 to testcontainers (#35199)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../test_webhook_service_relationships.py     | 507 ++++++++++++++++++
 .../test_webhook_service_additional.py        | 385 +------------
 2 files changed, 510 insertions(+), 382 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py

diff --git a/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py b/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py
new file mode 100644
index 0000000000..ec10c51e04
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py
@@ -0,0 +1,507 @@
+from __future__ import annotations
+
+import json
+from types import SimpleNamespace
+from unittest.mock import MagicMock, patch
+from uuid import uuid4
+
+import pytest
+from sqlalchemy import select
+from sqlalchemy.orm import Session
+
+from core.trigger.constants import TRIGGER_WEBHOOK_NODE_TYPE
+from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models.enums import AppTriggerStatus, AppTriggerType
+from models.model import App
+from models.trigger import AppTrigger, WorkflowWebhookTrigger
+from models.workflow import Workflow
+from services.errors.app import QuotaExceededError
+from services.trigger.webhook_service import WebhookService
+
+
+class WebhookServiceRelationshipFactory:
+    @staticmethod
+    def create_account_and_tenant(db_session_with_containers: Session) -> tuple[Account, Tenant]:
+        account = Account(
+            name=f"Account {uuid4()}",
+            email=f"webhook-{uuid4()}@example.com",
+            password="hashed-password",
+            password_salt="salt",
+            interface_language="en-US",
+            timezone="UTC",
+        )
+        db_session_with_containers.add(account)
+        db_session_with_containers.commit()
+
+        tenant = Tenant(name=f"Tenant {uuid4()}", plan="basic", status="normal")
+        db_session_with_containers.add(tenant)
+        db_session_with_containers.commit()
+
+        join = TenantAccountJoin(
+            tenant_id=tenant.id,
+            account_id=account.id,
+            role=TenantAccountRole.OWNER,
+            current=True,
+        )
+        db_session_with_containers.add(join)
+        db_session_with_containers.commit()
+
+        account.current_tenant = tenant
+        return account, tenant
+
+    @staticmethod
+    def create_app(db_session_with_containers: Session, tenant: Tenant, account: Account) -> App:
+        app = App(
+            tenant_id=tenant.id,
+            name=f"Webhook App {uuid4()}",
+            description="",
+            mode="workflow",
+            icon_type="emoji",
+            icon="bot",
+            icon_background="#FFFFFF",
+            enable_site=False,
+            enable_api=True,
+            api_rpm=100,
+            api_rph=100,
+            is_demo=False,
+            is_public=False,
+            is_universal=False,
+            created_by=account.id,
+            updated_by=account.id,
+        )
+        db_session_with_containers.add(app)
+        db_session_with_containers.commit()
+        return app
+
+    @staticmethod
+    def create_workflow(
+        db_session_with_containers: Session,
+        *,
+        app: App,
+        account: Account,
+        node_ids: list[str],
+        version: str,
+    ) -> Workflow:
+        graph = {
+            "nodes": [
+                {
+                    "id": node_id,
+                    "data": {
+                        "type": TRIGGER_WEBHOOK_NODE_TYPE,
+                        "title": f"Webhook {node_id}",
+                        "method": "post",
+                        "content_type": "application/json",
+                        "headers": [],
+                        "params": [],
+                        "body": [],
+                        "status_code": 200,
+                        "response_body": '{"status": "ok"}',
+                        "timeout": 30,
+                    },
+                }
+                for node_id in node_ids
+            ],
+            "edges": [],
+        }
+
+        workflow = Workflow(
+            tenant_id=app.tenant_id,
+            app_id=app.id,
+            type="workflow",
+            graph=json.dumps(graph),
+            features=json.dumps({}),
+            created_by=account.id,
+            updated_by=account.id,
+            environment_variables=[],
+            conversation_variables=[],
+            version=version,
+        )
+        db_session_with_containers.add(workflow)
+        db_session_with_containers.commit()
+        return workflow
+
+    @staticmethod
+    def create_webhook_trigger(
+        db_session_with_containers: Session,
+        *,
+        app: App,
+        account: Account,
+        node_id: str,
+        webhook_id: str | None = None,
+    ) -> WorkflowWebhookTrigger:
+        webhook_trigger = WorkflowWebhookTrigger(
+            app_id=app.id,
+            node_id=node_id,
+            tenant_id=app.tenant_id,
+            webhook_id=webhook_id or uuid4().hex[:24],
+            created_by=account.id,
+        )
+        db_session_with_containers.add(webhook_trigger)
+        db_session_with_containers.commit()
+        return webhook_trigger
+
+    @staticmethod
+    def create_app_trigger(
+        db_session_with_containers: Session,
+        *,
+        app: App,
+        node_id: str,
+        status: AppTriggerStatus,
+    ) -> AppTrigger:
+        app_trigger = AppTrigger(
+            tenant_id=app.tenant_id,
+            app_id=app.id,
+            node_id=node_id,
+            trigger_type=AppTriggerType.TRIGGER_WEBHOOK,
+            provider_name="webhook",
+            title=f"Webhook {node_id}",
+            status=status,
+        )
+        db_session_with_containers.add(app_trigger)
+        db_session_with_containers.commit()
+        return app_trigger
+
+
+class TestWebhookServiceLookupWithContainers:
+    def test_get_webhook_trigger_and_workflow_raises_when_app_trigger_missing(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version="2026-04-14.001"
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+
+        with pytest.raises(ValueError, match="App trigger not found"):
+            WebhookService.get_webhook_trigger_and_workflow(webhook_trigger.webhook_id)
+
+    def test_get_webhook_trigger_and_workflow_raises_when_app_trigger_rate_limited(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version="2026-04-14.001"
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+        factory.create_app_trigger(
+            db_session_with_containers, app=app, node_id="node-1", status=AppTriggerStatus.RATE_LIMITED
+        )
+
+        with pytest.raises(ValueError, match="rate limited"):
+            WebhookService.get_webhook_trigger_and_workflow(webhook_trigger.webhook_id)
+
+    def test_get_webhook_trigger_and_workflow_raises_when_app_trigger_disabled(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version="2026-04-14.001"
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+        factory.create_app_trigger(
+            db_session_with_containers, app=app, node_id="node-1", status=AppTriggerStatus.DISABLED
+        )
+
+        with pytest.raises(ValueError, match="disabled"):
+            WebhookService.get_webhook_trigger_and_workflow(webhook_trigger.webhook_id)
+
+    def test_get_webhook_trigger_and_workflow_raises_when_workflow_missing(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+        factory.create_app_trigger(
+            db_session_with_containers, app=app, node_id="node-1", status=AppTriggerStatus.ENABLED
+        )
+
+        with pytest.raises(ValueError, match="Workflow not found"):
+            WebhookService.get_webhook_trigger_and_workflow(webhook_trigger.webhook_id)
+
+    def test_get_webhook_trigger_and_workflow_returns_debug_draft_workflow(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        factory.create_workflow(
+            db_session_with_containers,
+            app=app,
+            account=account,
+            node_ids=["published-node"],
+            version="2026-04-14.001",
+        )
+        draft_workflow = factory.create_workflow(
+            db_session_with_containers,
+            app=app,
+            account=account,
+            node_ids=["debug-node"],
+            version=Workflow.VERSION_DRAFT,
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="debug-node"
+        )
+
+        got_trigger, got_workflow, got_node_config = WebhookService.get_webhook_trigger_and_workflow(
+            webhook_trigger.webhook_id,
+            is_debug=True,
+        )
+
+        assert got_trigger.id == webhook_trigger.id
+        assert got_workflow.id == draft_workflow.id
+        assert got_node_config["id"] == "debug-node"
+
+
+class TestWebhookServiceTriggerExecutionWithContainers:
+    def test_trigger_workflow_execution_triggers_async_workflow_successfully(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        workflow = factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version="2026-04-14.001"
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+
+        end_user = SimpleNamespace(id=str(uuid4()))
+        webhook_data = {"body": {"value": 1}, "headers": {}, "query_params": {}, "files": {}, "method": "POST"}
+
+        with (
+            patch(
+                "services.trigger.webhook_service.EndUserService.get_or_create_end_user_by_type",
+                return_value=end_user,
+            ),
+            patch("services.trigger.webhook_service.QuotaType.TRIGGER.consume") as mock_consume,
+            patch("services.trigger.webhook_service.AsyncWorkflowService.trigger_workflow_async") as mock_trigger,
+        ):
+            WebhookService.trigger_workflow_execution(webhook_trigger, webhook_data, workflow)
+
+        mock_consume.assert_called_once_with(webhook_trigger.tenant_id)
+        mock_trigger.assert_called_once()
+        trigger_args = mock_trigger.call_args.args
+        assert trigger_args[1] is end_user
+        assert trigger_args[2].workflow_id == workflow.id
+        assert trigger_args[2].root_node_id == webhook_trigger.node_id
+
+    def test_trigger_workflow_execution_marks_tenant_rate_limited_when_quota_exceeded(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        workflow = factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version="2026-04-14.001"
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+
+        with (
+            patch(
+                "services.trigger.webhook_service.EndUserService.get_or_create_end_user_by_type",
+                return_value=SimpleNamespace(id=str(uuid4())),
+            ),
+            patch(
+                "services.trigger.webhook_service.QuotaType.TRIGGER.consume",
+                side_effect=QuotaExceededError(feature="trigger", tenant_id=tenant.id, required=1),
+            ),
+            patch(
+                "services.trigger.webhook_service.AppTriggerService.mark_tenant_triggers_rate_limited"
+            ) as mock_mark_rate_limited,
+        ):
+            with pytest.raises(QuotaExceededError):
+                WebhookService.trigger_workflow_execution(
+                    webhook_trigger,
+                    {"body": {}, "headers": {}, "query_params": {}, "files": {}, "method": "POST"},
+                    workflow,
+                )
+
+        mock_mark_rate_limited.assert_called_once_with(tenant.id)
+
+    def test_trigger_workflow_execution_logs_and_reraises_unexpected_errors(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        workflow = factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version="2026-04-14.001"
+        )
+        webhook_trigger = factory.create_webhook_trigger(
+            db_session_with_containers, app=app, account=account, node_id="node-1"
+        )
+
+        with (
+            patch(
+                "services.trigger.webhook_service.EndUserService.get_or_create_end_user_by_type",
+                side_effect=RuntimeError("boom"),
+            ),
+            patch("services.trigger.webhook_service.logger.exception") as mock_logger_exception,
+        ):
+            with pytest.raises(RuntimeError, match="boom"):
+                WebhookService.trigger_workflow_execution(
+                    webhook_trigger,
+                    {"body": {}, "headers": {}, "query_params": {}, "files": {}, "method": "POST"},
+                    workflow,
+                )
+
+        mock_logger_exception.assert_called_once()
+
+
+class TestWebhookServiceRelationshipSyncWithContainers:
+    def test_sync_webhook_relationships_raises_when_workflow_exceeds_node_limit(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        node_ids = [f"node-{index}" for index in range(WebhookService.MAX_WEBHOOK_NODES_PER_WORKFLOW + 1)]
+        workflow = factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=node_ids, version=Workflow.VERSION_DRAFT
+        )
+
+        with pytest.raises(ValueError, match="maximum webhook node limit"):
+            WebhookService.sync_webhook_relationships(app, workflow)
+
+    def test_sync_webhook_relationships_raises_when_lock_not_acquired(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        workflow = factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=["node-1"], version=Workflow.VERSION_DRAFT
+        )
+        lock = MagicMock()
+        lock.acquire.return_value = False
+
+        with patch("services.trigger.webhook_service.redis_client.lock", return_value=lock):
+            with pytest.raises(RuntimeError, match="Failed to acquire lock"):
+                WebhookService.sync_webhook_relationships(app, workflow)
+
+    def test_sync_webhook_relationships_creates_missing_records_and_deletes_stale_records(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        stale_trigger = factory.create_webhook_trigger(
+            db_session_with_containers,
+            app=app,
+            account=account,
+            node_id="node-stale",
+            webhook_id="stale-webhook-id-000001",
+        )
+        stale_trigger_id = stale_trigger.id
+        workflow = factory.create_workflow(
+            db_session_with_containers,
+            app=app,
+            account=account,
+            node_ids=["node-new"],
+            version=Workflow.VERSION_DRAFT,
+        )
+
+        with patch(
+            "services.trigger.webhook_service.WebhookService.generate_webhook_id", return_value="new-webhook-id-000001"
+        ):
+            WebhookService.sync_webhook_relationships(app, workflow)
+
+        db_session_with_containers.expire_all()
+        records = db_session_with_containers.scalars(
+            select(WorkflowWebhookTrigger).where(WorkflowWebhookTrigger.app_id == app.id)
+        ).all()
+
+        assert [record.node_id for record in records] == ["node-new"]
+        assert records[0].webhook_id == "new-webhook-id-000001"
+        assert db_session_with_containers.get(WorkflowWebhookTrigger, stale_trigger_id) is None
+
+    def test_sync_webhook_relationships_sets_redis_cache_for_new_record(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        workflow = factory.create_workflow(
+            db_session_with_containers,
+            app=app,
+            account=account,
+            node_ids=["node-cache"],
+            version=Workflow.VERSION_DRAFT,
+        )
+        cache_key = f"{WebhookService.__WEBHOOK_NODE_CACHE_KEY__}:{app.id}:node-cache"
+
+        with patch(
+            "services.trigger.webhook_service.WebhookService.generate_webhook_id", return_value="cache-webhook-id-00001"
+        ):
+            WebhookService.sync_webhook_relationships(app, workflow)
+
+        cached_payload = WebhookServiceRelationshipFactory._read_cache(cache_key)
+        assert cached_payload is not None
+        assert cached_payload["node_id"] == "node-cache"
+        assert cached_payload["webhook_id"] == "cache-webhook-id-00001"
+
+    def test_sync_webhook_relationships_logs_when_lock_release_fails(
+        self, db_session_with_containers: Session, flask_app_with_containers
+    ):
+        del flask_app_with_containers
+        factory = WebhookServiceRelationshipFactory
+        account, tenant = factory.create_account_and_tenant(db_session_with_containers)
+        app = factory.create_app(db_session_with_containers, tenant, account)
+        workflow = factory.create_workflow(
+            db_session_with_containers, app=app, account=account, node_ids=[], version=Workflow.VERSION_DRAFT
+        )
+        lock = MagicMock()
+        lock.acquire.return_value = True
+        lock.release.side_effect = RuntimeError("release failed")
+
+        with (
+            patch("services.trigger.webhook_service.redis_client.lock", return_value=lock),
+            patch("services.trigger.webhook_service.logger.exception") as mock_logger_exception,
+        ):
+            WebhookService.sync_webhook_relationships(app, workflow)
+
+        mock_logger_exception.assert_called_once()
+
+
+def _read_cache(cache_key: str) -> dict[str, str] | None:
+    from extensions.ext_redis import redis_client
+
+    cached = redis_client.get(cache_key)
+    if not cached:
+        return None
+    if isinstance(cached, bytes):
+        cached = cached.decode("utf-8")
+    return json.loads(cached)
+
+
+WebhookServiceRelationshipFactory._read_cache = staticmethod(_read_cache)
diff --git a/api/tests/unit_tests/services/test_webhook_service_additional.py b/api/tests/unit_tests/services/test_webhook_service_additional.py
index 92f8a3fcc0..8a7a463d33 100644
--- a/api/tests/unit_tests/services/test_webhook_service_additional.py
+++ b/api/tests/unit_tests/services/test_webhook_service_additional.py
@@ -1,5 +1,5 @@
 from types import SimpleNamespace
-from typing import Any, cast
+from typing import Any
 from unittest.mock import MagicMock
 
 import pytest
@@ -13,11 +13,6 @@ from core.workflow.nodes.trigger_webhook.entities import (
     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
 
@@ -39,156 +34,13 @@ class _FakeQuery:
         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))
-
-
-class TestWebhookServiceLookup:
-    def test_get_webhook_trigger_and_workflow_should_raise_when_webhook_not_found(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        fake_session = MagicMock()
-        fake_session.scalar.return_value = None
-        _patch_session(monkeypatch, fake_session)
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        got_trigger, got_workflow, got_node_config = WebhookService.get_webhook_trigger_and_workflow("webhook-1")
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        got_trigger, got_workflow, got_node_config = WebhookService.get_webhook_trigger_and_workflow(
-            "webhook-1",
-            is_debug=True,
-        )
-
-        assert got_trigger is webhook_trigger
-        assert got_workflow is workflow
-        assert got_node_config == {"data": {"mode": "debug"}}
+def _workflow_trigger(**kwargs: Any) -> Any:
+    return SimpleNamespace(**kwargs)
 
 
 class TestWebhookServiceExtractionFallbacks:
@@ -420,237 +272,6 @@ class TestWebhookServiceValidationAndConversion:
         assert result["webhook_body"] == {"b": 2}
 
 
-class TestWebhookServiceExecutionAndSync:
-    def test_trigger_workflow_execution_should_trigger_async_workflow_successfully(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        WebhookService.trigger_workflow_execution(webhook_trigger, webhook_data, workflow)
-
-        trigger_async_mock.assert_called_once()
-
-    def test_trigger_workflow_execution_should_mark_tenant_rate_limited_when_quota_exceeded(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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")),
-        )
-        quota_type = SimpleNamespace(
-            TRIGGER=SimpleNamespace(
-                consume=MagicMock(side_effect=QuotaExceededError(feature="trigger", tenant_id="tenant-1", required=1))
-            )
-        )
-        monkeypatch.setattr(service_module, "QuotaType", quota_type)
-        mark_rate_limited_mock = MagicMock()
-        monkeypatch.setattr(
-            service_module.AppTriggerService, "mark_tenant_triggers_rate_limited", mark_rate_limited_mock
-        )
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        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(self) -> None:
-        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)
-            ]
-        )
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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))
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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)
-
-        WebhookService.sync_webhook_relationships(app, workflow)
-
-        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(
-        self,
-        monkeypatch: pytest.MonkeyPatch,
-    ) -> None:
-        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())
-
-        WebhookService.sync_webhook_relationships(app, workflow)
-
-        assert logger_exception_mock.call_count == 1
-
-
 class TestWebhookServiceUtilities:
     def test_generate_webhook_response_should_fallback_when_response_body_is_not_json(self) -> None:
         node_config = {"data": {"status_code": 200, "response_body": "{bad-json"}}

From 9fd196642dea93038a598d58fc89ec1a5bd322db Mon Sep 17 00:00:00 2001
From: zyssyz123 <916125788@qq.com>
Date: Wed, 15 Apr 2026 16:46:25 +0800
Subject: [PATCH 098/120] feat: tidb endpoint (#35158)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 ...d_qdrant_endpoint_to_tidb_auth_bindings.py |  26 +++
 api/models/dataset.py                         |   1 +
 .../tidb_on_qdrant_vector.py                  |  33 ++-
 .../dify_vdb_tidb_on_qdrant/tidb_service.py   |  74 +++++-
 .../unit_tests/test_tidb_on_qdrant_vector.py  |  79 ++++++-
 .../tests/unit_tests/test_tidb_service.py     | 218 ++++++++++++++++++
 api/schedule/create_tidb_serverless_task.py   |   1 +
 7 files changed, 425 insertions(+), 7 deletions(-)
 create mode 100644 api/migrations/versions/2026_04_14_1500-8574b23a38fd_add_qdrant_endpoint_to_tidb_auth_bindings.py
 create mode 100644 api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_service.py

diff --git a/api/migrations/versions/2026_04_14_1500-8574b23a38fd_add_qdrant_endpoint_to_tidb_auth_bindings.py b/api/migrations/versions/2026_04_14_1500-8574b23a38fd_add_qdrant_endpoint_to_tidb_auth_bindings.py
new file mode 100644
index 0000000000..0e188ec080
--- /dev/null
+++ b/api/migrations/versions/2026_04_14_1500-8574b23a38fd_add_qdrant_endpoint_to_tidb_auth_bindings.py
@@ -0,0 +1,26 @@
+"""add qdrant_endpoint to tidb_auth_bindings
+
+Revision ID: 8574b23a38fd
+Revises: 6b5f9f8b1a2c
+Create Date: 2026-04-14 15:00:00.000000
+
+"""
+
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "8574b23a38fd"
+down_revision = "6b5f9f8b1a2c"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    with op.batch_alter_table("tidb_auth_bindings", schema=None) as batch_op:
+        batch_op.add_column(sa.Column("qdrant_endpoint", sa.String(length=512), nullable=True))
+
+
+def downgrade():
+    with op.batch_alter_table("tidb_auth_bindings", schema=None) as batch_op:
+        batch_op.drop_column("qdrant_endpoint")
diff --git a/api/models/dataset.py b/api/models/dataset.py
index 4540c29206..50301dd2d7 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -1305,6 +1305,7 @@ class TidbAuthBinding(TypeBase):
     )
     account: Mapped[str] = mapped_column(String(255), nullable=False)
     password: Mapped[str] = mapped_column(String(255), nullable=False)
+    qdrant_endpoint: Mapped[str | None] = mapped_column(String(512), nullable=True, default=None)
     created_at: Mapped[datetime] = mapped_column(
         DateTime, nullable=False, server_default=func.current_timestamp(), init=False
     )
diff --git a/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_on_qdrant_vector.py b/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_on_qdrant_vector.py
index bb8a580ebf..abca55f540 100644
--- a/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_on_qdrant_vector.py
+++ b/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_on_qdrant_vector.py
@@ -1,4 +1,5 @@
 import json
+import logging
 import os
 import uuid
 from collections.abc import Generator, Iterable, Sequence
@@ -7,6 +8,8 @@ from typing import TYPE_CHECKING, Any
 
 import httpx
 import qdrant_client
+
+logger = logging.getLogger(__name__)
 from flask import current_app
 from httpx import DigestAuth
 from pydantic import BaseModel
@@ -421,13 +424,16 @@ class TidbOnQdrantVector(BaseVector):
 
 class TidbOnQdrantVectorFactory(AbstractVectorFactory):
     def init_vector(self, dataset: Dataset, attributes: list, embeddings: Embeddings) -> TidbOnQdrantVector:
+        logger.info("init_vector: tenant_id=%s, dataset_id=%s", dataset.tenant_id, dataset.id)
         stmt = select(TidbAuthBinding).where(TidbAuthBinding.tenant_id == dataset.tenant_id)
         tidb_auth_binding = db.session.scalars(stmt).one_or_none()
         if not tidb_auth_binding:
+            logger.info("No existing TidbAuthBinding for tenant %s, acquiring lock", dataset.tenant_id)
             with redis_client.lock("create_tidb_serverless_cluster_lock", timeout=900):
                 stmt = select(TidbAuthBinding).where(TidbAuthBinding.tenant_id == dataset.tenant_id)
                 tidb_auth_binding = db.session.scalars(stmt).one_or_none()
                 if tidb_auth_binding:
+                    logger.info("Found binding after lock: cluster_id=%s", tidb_auth_binding.cluster_id)
                     TIDB_ON_QDRANT_API_KEY = f"{tidb_auth_binding.account}:{tidb_auth_binding.password}"
 
                 else:
@@ -437,11 +443,18 @@ class TidbOnQdrantVectorFactory(AbstractVectorFactory):
                         .limit(1)
                     )
                     if idle_tidb_auth_binding:
+                        logger.info(
+                            "Assigning idle cluster %s to tenant %s",
+                            idle_tidb_auth_binding.cluster_id,
+                            dataset.tenant_id,
+                        )
                         idle_tidb_auth_binding.active = True
                         idle_tidb_auth_binding.tenant_id = dataset.tenant_id
                         db.session.commit()
+                        tidb_auth_binding = idle_tidb_auth_binding
                         TIDB_ON_QDRANT_API_KEY = f"{idle_tidb_auth_binding.account}:{idle_tidb_auth_binding.password}"
                     else:
+                        logger.info("No idle clusters available, creating new cluster for tenant %s", dataset.tenant_id)
                         new_cluster = TidbService.create_tidb_serverless_cluster(
                             dify_config.TIDB_PROJECT_ID or "",
                             dify_config.TIDB_API_URL or "",
@@ -450,21 +463,39 @@ class TidbOnQdrantVectorFactory(AbstractVectorFactory):
                             dify_config.TIDB_PRIVATE_KEY or "",
                             dify_config.TIDB_REGION or "",
                         )
+                        logger.info(
+                            "New cluster created: cluster_id=%s, qdrant_endpoint=%s",
+                            new_cluster["cluster_id"],
+                            new_cluster.get("qdrant_endpoint"),
+                        )
                         new_tidb_auth_binding = TidbAuthBinding(
                             cluster_id=new_cluster["cluster_id"],
                             cluster_name=new_cluster["cluster_name"],
                             account=new_cluster["account"],
                             password=new_cluster["password"],
+                            qdrant_endpoint=new_cluster.get("qdrant_endpoint"),
                             tenant_id=dataset.tenant_id,
                             active=True,
                             status=TidbAuthBindingStatus.ACTIVE,
                         )
                         db.session.add(new_tidb_auth_binding)
                         db.session.commit()
+                        tidb_auth_binding = new_tidb_auth_binding
                         TIDB_ON_QDRANT_API_KEY = f"{new_tidb_auth_binding.account}:{new_tidb_auth_binding.password}"
         else:
+            logger.info("Existing binding found: cluster_id=%s", tidb_auth_binding.cluster_id)
             TIDB_ON_QDRANT_API_KEY = f"{tidb_auth_binding.account}:{tidb_auth_binding.password}"
 
+        qdrant_url = (
+            (tidb_auth_binding.qdrant_endpoint if tidb_auth_binding else None) or dify_config.TIDB_ON_QDRANT_URL or ""
+        )
+        logger.info(
+            "Using qdrant endpoint: %s (from_binding=%s, fallback_global=%s)",
+            qdrant_url,
+            tidb_auth_binding.qdrant_endpoint if tidb_auth_binding else None,
+            dify_config.TIDB_ON_QDRANT_URL,
+        )
+
         if dataset.index_struct_dict:
             class_prefix: str = dataset.index_struct_dict["vector_store"]["class_prefix"]
             collection_name = class_prefix
@@ -479,7 +510,7 @@ class TidbOnQdrantVectorFactory(AbstractVectorFactory):
             collection_name=collection_name,
             group_id=dataset.id,
             config=TidbOnQdrantConfig(
-                endpoint=dify_config.TIDB_ON_QDRANT_URL or "",
+                endpoint=qdrant_url,
                 api_key=TIDB_ON_QDRANT_API_KEY,
                 root_path=str(config.root_path),
                 timeout=dify_config.TIDB_ON_QDRANT_CLIENT_TIMEOUT,
diff --git a/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_service.py b/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_service.py
index 37114be6e7..ece061db67 100644
--- a/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_service.py
+++ b/api/providers/vdb/vdb-tidb-on-qdrant/src/dify_vdb_tidb_on_qdrant/tidb_service.py
@@ -1,3 +1,4 @@
+import logging
 import time
 import uuid
 from collections.abc import Sequence
@@ -12,6 +13,8 @@ from extensions.ext_redis import redis_client
 from models.dataset import TidbAuthBinding
 from models.enums import TidbAuthBindingStatus
 
+logger = logging.getLogger(__name__)
+
 # Reuse a pooled HTTP client for all TiDB Cloud requests to minimize connection churn
 _tidb_http_client: httpx.Client = get_pooled_http_client(
     "tidb:cloud",
@@ -20,6 +23,46 @@ _tidb_http_client: httpx.Client = get_pooled_http_client(
 
 
 class TidbService:
+    @staticmethod
+    def extract_qdrant_endpoint(cluster_response: dict) -> str | None:
+        """Extract the qdrant endpoint URL from a Get Cluster API response.
+
+        Reads ``endpoints.public.host`` (e.g. ``gateway01.xx.tidbcloud.com``),
+        prepends ``qdrant-`` and wraps it as an ``https://`` URL.
+        """
+        endpoints = cluster_response.get("endpoints") or {}
+        public = endpoints.get("public") or {}
+        host = public.get("host")
+        if host:
+            return f"https://qdrant-{host}"
+        return None
+
+    @staticmethod
+    def fetch_qdrant_endpoint(api_url: str, public_key: str, private_key: str, cluster_id: str) -> str | None:
+        """Call Get Cluster API and extract the qdrant endpoint.
+
+        Use ``extract_qdrant_endpoint`` instead when you already have
+        the cluster response to avoid a redundant API call.
+        """
+        try:
+            logger.info("Fetching qdrant endpoint for cluster %s", cluster_id)
+            cluster_response = TidbService.get_tidb_serverless_cluster(api_url, public_key, private_key, cluster_id)
+            if not cluster_response:
+                logger.warning("Empty response from Get Cluster API for cluster %s", cluster_id)
+                return None
+            qdrant_url = TidbService.extract_qdrant_endpoint(cluster_response)
+            if qdrant_url:
+                logger.info("Resolved qdrant endpoint for cluster %s: %s", cluster_id, qdrant_url)
+                return qdrant_url
+            logger.warning(
+                "No endpoints.public.host found for cluster %s, response keys: %s",
+                cluster_id,
+                list(cluster_response.keys()),
+            )
+        except Exception:
+            logger.exception("Failed to fetch qdrant endpoint for cluster %s", cluster_id)
+        return None
+
     @staticmethod
     def create_tidb_serverless_cluster(
         project_id: str, api_url: str, iam_url: str, public_key: str, private_key: str, region: str
@@ -57,6 +100,7 @@ class TidbService:
             "rootPassword": password,
         }
 
+        logger.info("Creating TiDB serverless cluster: display_name=%s, region=%s", display_name, region)
         response = _tidb_http_client.post(
             f"{api_url}/clusters", json=cluster_data, auth=DigestAuth(public_key, private_key)
         )
@@ -64,21 +108,39 @@ class TidbService:
         if response.status_code == 200:
             response_data = response.json()
             cluster_id = response_data["clusterId"]
+            logger.info("Cluster created, cluster_id=%s, waiting for ACTIVE state", cluster_id)
             retry_count = 0
             max_retries = 30
             while retry_count < max_retries:
                 cluster_response = TidbService.get_tidb_serverless_cluster(api_url, public_key, private_key, cluster_id)
                 if cluster_response["state"] == "ACTIVE":
                     user_prefix = cluster_response["userPrefix"]
+                    qdrant_endpoint = TidbService.extract_qdrant_endpoint(cluster_response)
+                    logger.info(
+                        "Cluster %s is ACTIVE, user_prefix=%s, qdrant_endpoint=%s",
+                        cluster_id,
+                        user_prefix,
+                        qdrant_endpoint,
+                    )
                     return {
                         "cluster_id": cluster_id,
                         "cluster_name": display_name,
                         "account": f"{user_prefix}.root",
                         "password": password,
+                        "qdrant_endpoint": qdrant_endpoint,
                     }
-                time.sleep(30)  # wait 30 seconds before retrying
+                logger.info(
+                    "Cluster %s state=%s, retry %d/%d",
+                    cluster_id,
+                    cluster_response["state"],
+                    retry_count + 1,
+                    max_retries,
+                )
+                time.sleep(30)
                 retry_count += 1
+            logger.error("Cluster %s did not become ACTIVE after %d retries", cluster_id, max_retries)
         else:
+            logger.error("Failed to create cluster: status=%d, body=%s", response.status_code, response.text)
             response.raise_for_status()
 
     @staticmethod
@@ -243,19 +305,29 @@ class TidbService:
         if response.status_code == 200:
             response_data = response.json()
             cluster_infos = []
+            logger.info("Batch created %d clusters", len(response_data.get("clusters", [])))
             for item in response_data["clusters"]:
                 cache_key = f"tidb_serverless_cluster_password:{item['displayName']}"
                 cached_password = redis_client.get(cache_key)
                 if not cached_password:
+                    logger.warning("No cached password for cluster %s, skipping", item["displayName"])
                     continue
+                qdrant_endpoint = TidbService.fetch_qdrant_endpoint(api_url, public_key, private_key, item["clusterId"])
+                logger.info(
+                    "Batch cluster %s: qdrant_endpoint=%s",
+                    item["clusterId"],
+                    qdrant_endpoint,
+                )
                 cluster_info = {
                     "cluster_id": item["clusterId"],
                     "cluster_name": item["displayName"],
                     "account": "root",
                     "password": cached_password.decode("utf-8"),
+                    "qdrant_endpoint": qdrant_endpoint,
                 }
                 cluster_infos.append(cluster_info)
             return cluster_infos
         else:
+            logger.error("Batch create failed: status=%d, body=%s", response.status_code, response.text)
             response.raise_for_status()
             return []
diff --git a/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_on_qdrant_vector.py b/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_on_qdrant_vector.py
index 3e9229fea5..76802de62e 100644
--- a/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_on_qdrant_vector.py
+++ b/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_on_qdrant_vector.py
@@ -114,14 +114,12 @@ class TestTidbOnQdrantVectorDeleteByIds:
 
         assert exc_info.value.status_code == 500
 
-    def test_delete_by_ids_with_large_batch(self, vector_instance):
-        """Test deletion with a large batch of IDs."""
-        # Create 1000 IDs
+    def test_delete_by_ids_with_exactly_1000(self, vector_instance):
+        """Test deletion with exactly 1000 IDs triggers a single batch."""
         ids = [f"doc_{i}" for i in range(1000)]
 
         vector_instance.delete_by_ids(ids)
 
-        # Verify single delete call with all IDs
         vector_instance._client.delete.assert_called_once()
         call_args = vector_instance._client.delete.call_args
 
@@ -129,11 +127,28 @@ class TestTidbOnQdrantVectorDeleteByIds:
         filter_obj = filter_selector.filter
         field_condition = filter_obj.must[0]
 
-        # Verify all 1000 IDs are in the batch
         assert len(field_condition.match.any) == 1000
         assert "doc_0" in field_condition.match.any
         assert "doc_999" in field_condition.match.any
 
+    def test_delete_by_ids_splits_into_batches(self, vector_instance):
+        """Test deletion with >1000 IDs triggers multiple batched calls."""
+        ids = [f"doc_{i}" for i in range(2500)]
+
+        vector_instance.delete_by_ids(ids)
+
+        assert vector_instance._client.delete.call_count == 3
+
+        batches = []
+        for call in vector_instance._client.delete.call_args_list:
+            filter_selector = call[1]["points_selector"]
+            field_condition = filter_selector.filter.must[0]
+            batches.append(field_condition.match.any)
+
+        assert len(batches[0]) == 1000
+        assert len(batches[1]) == 1000
+        assert len(batches[2]) == 500
+
     def test_delete_by_ids_filter_structure(self, vector_instance):
         """Test that the filter structure is correctly constructed."""
         ids = ["doc1", "doc2"]
@@ -157,3 +172,57 @@ class TestTidbOnQdrantVectorDeleteByIds:
         # Verify MatchAny structure
         assert isinstance(field_condition.match, rest.MatchAny)
         assert field_condition.match.any == ids
+
+
+class TestInitVectorEndpointSelection:
+    """Test that init_vector selects the correct qdrant endpoint.
+
+    We avoid importing the full module (which triggers Flask app context)
+    by testing the endpoint selection logic directly on TidbOnQdrantConfig.
+    """
+
+    def test_uses_binding_endpoint_when_present(self):
+        binding_endpoint = "https://qdrant-custom.tidb.com"
+        global_url = "https://qdrant-global.tidb.com"
+
+        qdrant_url = binding_endpoint or global_url or ""
+
+        assert qdrant_url == "https://qdrant-custom.tidb.com"
+        config = TidbOnQdrantConfig(endpoint=qdrant_url)
+        assert config.endpoint == "https://qdrant-custom.tidb.com"
+
+    def test_falls_back_to_global_when_binding_endpoint_is_none(self):
+        binding_endpoint = None
+        global_url = "https://qdrant-global.tidb.com"
+
+        qdrant_url = binding_endpoint or global_url or ""
+
+        assert qdrant_url == "https://qdrant-global.tidb.com"
+        config = TidbOnQdrantConfig(endpoint=qdrant_url)
+        assert config.endpoint == "https://qdrant-global.tidb.com"
+
+    def test_falls_back_to_empty_when_both_none(self):
+        binding_endpoint = None
+        global_url = None
+
+        qdrant_url = binding_endpoint or global_url or ""
+
+        assert qdrant_url == ""
+        config = TidbOnQdrantConfig(endpoint=qdrant_url)
+        assert config.endpoint == ""
+
+    def test_binding_endpoint_takes_precedence_over_global(self):
+        binding_endpoint = "https://qdrant-ap-southeast.tidb.com"
+        global_url = "https://qdrant-us-east.tidb.com"
+
+        qdrant_url = binding_endpoint or global_url or ""
+
+        assert qdrant_url == "https://qdrant-ap-southeast.tidb.com"
+
+    def test_empty_string_binding_endpoint_falls_back_to_global(self):
+        binding_endpoint = ""
+        global_url = "https://qdrant-global.tidb.com"
+
+        qdrant_url = binding_endpoint or global_url or ""
+
+        assert qdrant_url == "https://qdrant-global.tidb.com"
diff --git a/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_service.py b/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_service.py
new file mode 100644
index 0000000000..c1ffbacbbc
--- /dev/null
+++ b/api/providers/vdb/vdb-tidb-on-qdrant/tests/unit_tests/test_tidb_service.py
@@ -0,0 +1,218 @@
+from unittest.mock import MagicMock, patch
+
+import pytest
+from dify_vdb_tidb_on_qdrant.tidb_service import TidbService
+
+
+class TestExtractQdrantEndpoint:
+    """Unit tests for TidbService.extract_qdrant_endpoint."""
+
+    def test_returns_endpoint_when_host_present(self):
+        response = {"endpoints": {"public": {"host": "gateway01.us-east-1.tidbcloud.com", "port": 4000}}}
+        result = TidbService.extract_qdrant_endpoint(response)
+        assert result == "https://qdrant-gateway01.us-east-1.tidbcloud.com"
+
+    def test_returns_none_when_host_missing(self):
+        response = {"endpoints": {"public": {}}}
+        assert TidbService.extract_qdrant_endpoint(response) is None
+
+    def test_returns_none_when_public_missing(self):
+        response = {"endpoints": {}}
+        assert TidbService.extract_qdrant_endpoint(response) is None
+
+    def test_returns_none_when_endpoints_missing(self):
+        assert TidbService.extract_qdrant_endpoint({}) is None
+
+
+class TestFetchQdrantEndpoint:
+    """Unit tests for TidbService.fetch_qdrant_endpoint."""
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    def test_returns_endpoint_when_host_present(self, mock_get_cluster):
+        mock_get_cluster.return_value = {
+            "endpoints": {"public": {"host": "gateway01.us-east-1.tidbcloud.com", "port": 4000}}
+        }
+        result = TidbService.fetch_qdrant_endpoint("url", "pub", "priv", "c-123")
+        assert result == "https://qdrant-gateway01.us-east-1.tidbcloud.com"
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    def test_returns_none_when_cluster_response_is_none(self, mock_get_cluster):
+        mock_get_cluster.return_value = None
+        assert TidbService.fetch_qdrant_endpoint("url", "pub", "priv", "c-123") is None
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    def test_returns_none_when_host_missing(self, mock_get_cluster):
+        mock_get_cluster.return_value = {"endpoints": {"public": {}}}
+        assert TidbService.fetch_qdrant_endpoint("url", "pub", "priv", "c-123") is None
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    def test_returns_none_when_endpoints_missing(self, mock_get_cluster):
+        mock_get_cluster.return_value = {}
+        assert TidbService.fetch_qdrant_endpoint("url", "pub", "priv", "c-123") is None
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    def test_returns_none_on_exception(self, mock_get_cluster):
+        mock_get_cluster.side_effect = RuntimeError("network error")
+        assert TidbService.fetch_qdrant_endpoint("url", "pub", "priv", "c-123") is None
+
+
+class TestCreateTidbServerlessClusterQdrantEndpoint:
+    """Verify that create_tidb_serverless_cluster includes qdrant_endpoint in its result."""
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_result_contains_qdrant_endpoint(self, mock_config, mock_http, mock_get_cluster):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_http.post.return_value = MagicMock(status_code=200, json=lambda: {"clusterId": "c-1"})
+        mock_get_cluster.return_value = {
+            "state": "ACTIVE",
+            "userPrefix": "pfx",
+            "endpoints": {"public": {"host": "gw.tidbcloud.com", "port": 4000}},
+        }
+
+        result = TidbService.create_tidb_serverless_cluster("proj", "url", "iam", "pub", "priv", "us-east-1")
+
+        assert result is not None
+        assert result["qdrant_endpoint"] == "https://qdrant-gw.tidbcloud.com"
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_result_qdrant_endpoint_none_when_no_endpoints(self, mock_config, mock_http, mock_get_cluster):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_http.post.return_value = MagicMock(status_code=200, json=lambda: {"clusterId": "c-1"})
+        mock_get_cluster.return_value = {"state": "ACTIVE", "userPrefix": "pfx"}
+
+        result = TidbService.create_tidb_serverless_cluster("proj", "url", "iam", "pub", "priv", "us-east-1")
+
+        assert result is not None
+        assert result["qdrant_endpoint"] is None
+
+
+class TestBatchCreateTidbServerlessClusterQdrantEndpoint:
+    """Verify that batch_create includes qdrant_endpoint per cluster."""
+
+    @patch.object(TidbService, "fetch_qdrant_endpoint", return_value="https://qdrant-gw.tidbcloud.com")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.redis_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_batch_result_contains_qdrant_endpoint(self, mock_config, mock_http, mock_redis, mock_fetch_ep):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        cluster_name = "abc123"
+        mock_http.post.return_value = MagicMock(
+            status_code=200,
+            json=lambda: {"clusters": [{"clusterId": "c-1", "displayName": cluster_name}]},
+        )
+        mock_redis.setex = MagicMock()
+        mock_redis.get.return_value = b"password123"
+
+        result = TidbService.batch_create_tidb_serverless_cluster(
+            batch_size=1,
+            project_id="proj",
+            api_url="url",
+            iam_url="iam",
+            public_key="pub",
+            private_key="priv",
+            region="us-east-1",
+        )
+
+        assert len(result) == 1
+        assert result[0]["qdrant_endpoint"] == "https://qdrant-gw.tidbcloud.com"
+
+
+class TestCreateTidbServerlessClusterRetry:
+    """Cover retry/logging paths in create_tidb_serverless_cluster."""
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_polls_until_active(self, mock_config, mock_http, mock_get_cluster):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_http.post.return_value = MagicMock(status_code=200, json=lambda: {"clusterId": "c-1"})
+        mock_get_cluster.side_effect = [
+            {"state": "CREATING", "userPrefix": ""},
+            {"state": "ACTIVE", "userPrefix": "pfx", "endpoints": {"public": {"host": "gw.tidb.com"}}},
+        ]
+
+        with patch("dify_vdb_tidb_on_qdrant.tidb_service.time.sleep"):
+            result = TidbService.create_tidb_serverless_cluster("proj", "url", "iam", "pub", "priv", "us-east-1")
+
+        assert result is not None
+        assert result["qdrant_endpoint"] == "https://qdrant-gw.tidb.com"
+        assert mock_get_cluster.call_count == 2
+
+    @patch.object(TidbService, "get_tidb_serverless_cluster")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_returns_none_after_max_retries(self, mock_config, mock_http, mock_get_cluster):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_http.post.return_value = MagicMock(status_code=200, json=lambda: {"clusterId": "c-1"})
+        mock_get_cluster.return_value = {"state": "CREATING", "userPrefix": ""}
+
+        with patch("dify_vdb_tidb_on_qdrant.tidb_service.time.sleep"):
+            result = TidbService.create_tidb_serverless_cluster("proj", "url", "iam", "pub", "priv", "us-east-1")
+
+        assert result is None
+
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_raises_on_post_failure(self, mock_config, mock_http):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_response = MagicMock(status_code=400, text="Bad Request")
+        mock_response.raise_for_status.side_effect = Exception("HTTP 400")
+        mock_http.post.return_value = mock_response
+
+        with pytest.raises(Exception, match="HTTP 400"):
+            TidbService.create_tidb_serverless_cluster("proj", "url", "iam", "pub", "priv", "us-east-1")
+
+
+class TestBatchCreateEdgeCases:
+    """Cover logging/edge-case branches in batch_create."""
+
+    @patch.object(TidbService, "fetch_qdrant_endpoint", return_value=None)
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.redis_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_skips_cluster_when_no_cached_password(self, mock_config, mock_http, mock_redis, mock_fetch_ep):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_http.post.return_value = MagicMock(
+            status_code=200,
+            json=lambda: {"clusters": [{"clusterId": "c-1", "displayName": "name1"}]},
+        )
+        mock_redis.setex = MagicMock()
+        mock_redis.get.return_value = None
+
+        result = TidbService.batch_create_tidb_serverless_cluster(
+            batch_size=1,
+            project_id="proj",
+            api_url="url",
+            iam_url="iam",
+            public_key="pub",
+            private_key="priv",
+            region="us-east-1",
+        )
+
+        assert len(result) == 0
+        mock_fetch_ep.assert_not_called()
+
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.redis_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service._tidb_http_client")
+    @patch("dify_vdb_tidb_on_qdrant.tidb_service.dify_config")
+    def test_raises_on_post_failure(self, mock_config, mock_http, mock_redis):
+        mock_config.TIDB_SPEND_LIMIT = 10
+        mock_response = MagicMock(status_code=500, text="Server Error")
+        mock_response.raise_for_status.side_effect = Exception("HTTP 500")
+        mock_http.post.return_value = mock_response
+        mock_redis.setex = MagicMock()
+
+        with pytest.raises(Exception, match="HTTP 500"):
+            TidbService.batch_create_tidb_serverless_cluster(
+                batch_size=1,
+                project_id="proj",
+                api_url="url",
+                iam_url="iam",
+                public_key="pub",
+                private_key="priv",
+                region="us-east-1",
+            )
diff --git a/api/schedule/create_tidb_serverless_task.py b/api/schedule/create_tidb_serverless_task.py
index c4c203c150..e242b0c667 100644
--- a/api/schedule/create_tidb_serverless_task.py
+++ b/api/schedule/create_tidb_serverless_task.py
@@ -57,6 +57,7 @@ def create_clusters(batch_size):
                 cluster_name=new_cluster["cluster_name"],
                 account=new_cluster["account"],
                 password=new_cluster["password"],
+                qdrant_endpoint=new_cluster.get("qdrant_endpoint"),
                 active=False,
                 status=TidbAuthBindingStatus.CREATING,
             )

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 099/120] 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 fb17339d8989cc12fa3adbdac5f1c67565b74914 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Wed, 15 Apr 2026 16:59:31 +0800
Subject: [PATCH 100/120] feat(web): unify create_app tracking and persist
 external attribution (#35241)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
---
 .../__tests__/app-initializer.spec.tsx        | 197 ++++++++++++++
 .../create-app-attribution-bootstrap.spec.tsx |  97 +++++++
 .../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       |  10 +-
 .../components/apps/__tests__/index.spec.tsx  | 200 ++++++++++++++-
 web/app/components/apps/index.tsx             |  25 +-
 .../create-app-attribution-bootstrap.tsx      |  23 ++
 .../explore/app-list/__tests__/index.spec.tsx |  40 ++-
 web/app/components/explore/app-list/index.tsx |  25 +-
 web/app/layout.tsx                            |   2 +
 web/app/signup/set-password/page.tsx          |   2 +
 .../__tests__/create-app-tracking.spec.ts     | 189 ++++++++++++++
 web/utils/create-app-tracking.ts              | 240 ++++++++++++++++++
 17 files changed, 1045 insertions(+), 71 deletions(-)
 create mode 100644 web/app/components/__tests__/app-initializer.spec.tsx
 create mode 100644 web/app/components/__tests__/create-app-attribution-bootstrap.spec.tsx
 create mode 100644 web/app/components/create-app-attribution-bootstrap.tsx
 create mode 100644 web/utils/__tests__/create-app-tracking.spec.ts
 create mode 100644 web/utils/create-app-tracking.ts

diff --git a/web/app/components/__tests__/app-initializer.spec.tsx b/web/app/components/__tests__/app-initializer.spec.tsx
new file mode 100644
index 0000000000..b4c2d08f2e
--- /dev/null
+++ b/web/app/components/__tests__/app-initializer.spec.tsx
@@ -0,0 +1,197 @@
+import { screen, waitFor } from '@testing-library/react'
+import Cookies from 'js-cookie'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
+  EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
+} from '@/app/education-apply/constants'
+import { resolvePostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
+import { renderWithNuqs } from '@/test/nuqs-testing'
+import { fetchSetupStatusWithCache } from '@/utils/setup-status'
+import { AppInitializer } from '../app-initializer'
+
+const { mockSendGAEvent, mockTrackEvent } = vi.hoisted(() => ({
+  mockSendGAEvent: vi.fn(),
+  mockTrackEvent: vi.fn(),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  usePathname: vi.fn(),
+  useRouter: vi.fn(),
+  useSearchParams: vi.fn(),
+}))
+
+vi.mock('@/utils/setup-status', () => ({
+  fetchSetupStatusWithCache: vi.fn(),
+}))
+
+vi.mock('@/app/signin/utils/post-login-redirect', () => ({
+  resolvePostLoginRedirect: vi.fn(),
+}))
+
+vi.mock('@/utils/gtag', () => ({
+  sendGAEvent: (...args: unknown[]) => mockSendGAEvent(...args),
+}))
+
+vi.mock('../base/amplitude', () => ({
+  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+}))
+
+const mockUsePathname = vi.mocked(usePathname)
+const mockUseRouter = vi.mocked(useRouter)
+const mockUseSearchParams = vi.mocked(useSearchParams)
+const mockFetchSetupStatusWithCache = vi.mocked(fetchSetupStatusWithCache)
+const mockResolvePostLoginRedirect = vi.mocked(resolvePostLoginRedirect)
+const mockReplace = vi.fn()
+
+describe('AppInitializer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.unstubAllGlobals()
+    window.localStorage.clear()
+    window.sessionStorage.clear()
+    Cookies.remove('utm_info')
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockUsePathname.mockReturnValue('/apps')
+    mockUseRouter.mockReturnValue({ replace: mockReplace } as unknown as ReturnType<typeof useRouter>)
+    mockUseSearchParams.mockReturnValue(new URLSearchParams() as unknown as ReturnType<typeof useSearchParams>)
+    mockFetchSetupStatusWithCache.mockResolvedValue({ step: 'finished' })
+    mockResolvePostLoginRedirect.mockReturnValue(null)
+  })
+
+  it('renders children after setup checks finish', async () => {
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+    )
+
+    await waitFor(() => expect(screen.getByText('ready')).toBeInTheDocument())
+
+    expect(mockFetchSetupStatusWithCache).toHaveBeenCalledTimes(1)
+    expect(mockReplace).not.toHaveBeenCalledWith('/signin')
+  })
+
+  it('redirects to install when setup status loading fails', async () => {
+    mockFetchSetupStatusWithCache.mockRejectedValue(new Error('unauthorized'))
+
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+    )
+
+    await waitFor(() => expect(mockReplace).toHaveBeenCalledWith('/install'))
+    expect(screen.queryByText('ready')).not.toBeInTheDocument()
+  })
+
+  it('does not persist create app attribution from the url anymore', async () => {
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+    )
+
+    await waitFor(() => expect(screen.getByText('ready')).toBeInTheDocument())
+
+    expect(window.sessionStorage.getItem('create_app_external_attribution')).toBeNull()
+  })
+
+  it('tracks oauth registration with utm info and clears the cookie', async () => {
+    Cookies.set('utm_info', JSON.stringify({
+      utm_source: 'linkedin',
+      slug: 'agent-launch',
+    }))
+
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+      { searchParams: 'oauth_new_user=true' },
+    )
+
+    await waitFor(() => expect(screen.getByText('ready')).toBeInTheDocument())
+
+    expect(mockTrackEvent).toHaveBeenCalledWith('user_registration_success_with_utm', {
+      method: 'oauth',
+      utm_source: 'linkedin',
+      slug: 'agent-launch',
+    })
+    expect(mockSendGAEvent).toHaveBeenCalledWith('user_registration_success_with_utm', {
+      method: 'oauth',
+      utm_source: 'linkedin',
+      slug: 'agent-launch',
+    })
+    expect(mockReplace).toHaveBeenCalledWith('/apps')
+    expect(Cookies.get('utm_info')).toBeUndefined()
+  })
+
+  it('falls back to the base registration event when the oauth utm cookie is invalid', async () => {
+    Cookies.set('utm_info', '{invalid-json')
+
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+      { searchParams: 'oauth_new_user=true' },
+    )
+
+    await waitFor(() => expect(screen.getByText('ready')).toBeInTheDocument())
+
+    expect(mockTrackEvent).toHaveBeenCalledWith('user_registration_success', {
+      method: 'oauth',
+    })
+    expect(mockSendGAEvent).toHaveBeenCalledWith('user_registration_success', {
+      method: 'oauth',
+    })
+    expect(console.error).toHaveBeenCalled()
+    expect(Cookies.get('utm_info')).toBeUndefined()
+  })
+
+  it('stores the education verification flag in localStorage', async () => {
+    mockUseSearchParams.mockReturnValue(
+      new URLSearchParams(`action=${EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION}`) as unknown as ReturnType<typeof useSearchParams>,
+    )
+
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+    )
+
+    await waitFor(() => expect(screen.getByText('ready')).toBeInTheDocument())
+
+    expect(window.localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)).toBe('yes')
+  })
+
+  it('redirects to the resolved post-login url when one exists', async () => {
+    const mockLocationReplace = vi.fn()
+    vi.stubGlobal('location', { ...window.location, replace: mockLocationReplace })
+    mockResolvePostLoginRedirect.mockReturnValue('/explore')
+
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+    )
+
+    await waitFor(() => expect(mockLocationReplace).toHaveBeenCalledWith('/explore'))
+    expect(screen.queryByText('ready')).not.toBeInTheDocument()
+  })
+
+  it('redirects to signin when redirect resolution throws', async () => {
+    mockResolvePostLoginRedirect.mockImplementation(() => {
+      throw new Error('redirect resolution failed')
+    })
+
+    renderWithNuqs(
+      <AppInitializer>
+        <div>ready</div>
+      </AppInitializer>,
+    )
+
+    await waitFor(() => expect(mockReplace).toHaveBeenCalledWith('/signin'))
+    expect(screen.queryByText('ready')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/__tests__/create-app-attribution-bootstrap.spec.tsx b/web/app/components/__tests__/create-app-attribution-bootstrap.spec.tsx
new file mode 100644
index 0000000000..a6cdf2cbf6
--- /dev/null
+++ b/web/app/components/__tests__/create-app-attribution-bootstrap.spec.tsx
@@ -0,0 +1,97 @@
+import type { ReactElement, ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { runCreateAppAttributionBootstrap } from '@/utils/create-app-tracking'
+
+let mockIsProd = false
+let mockNonce: string | null = 'test-nonce'
+
+type BootstrapScriptProps = {
+  id?: string
+  strategy?: string
+  nonce?: string
+  children?: string
+}
+
+vi.mock('@/config', () => ({
+  get IS_PROD() { return mockIsProd },
+}))
+
+vi.mock('@/next/headers', () => ({
+  headers: vi.fn(() => ({
+    get: vi.fn((name: string) => {
+      if (name === 'x-nonce')
+        return mockNonce
+      return null
+    }),
+  })),
+}))
+
+const loadComponent = async () => {
+  const mod = await import('../create-app-attribution-bootstrap')
+  const rawExport = mod.default as unknown
+  const renderer: (() => Promise<ReactNode>) | undefined
+    = typeof rawExport === 'function' ? rawExport as () => Promise<ReactNode> : (rawExport as { type?: () => Promise<ReactNode> }).type
+
+  if (!renderer)
+    throw new Error('CreateAppAttributionBootstrap component is not callable in tests')
+
+  return renderer
+}
+
+const runBootstrapScript = () => {
+  runCreateAppAttributionBootstrap()
+}
+
+describe('CreateAppAttributionBootstrap', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetModules()
+    mockIsProd = false
+    mockNonce = 'test-nonce'
+    window.sessionStorage.clear()
+    window.history.replaceState({}, '', '/apps')
+  })
+
+  it('renders a beforeInteractive script element', async () => {
+    const renderComponent = await loadComponent()
+    const element = await renderComponent() as ReactElement<BootstrapScriptProps>
+
+    expect(element).toBeTruthy()
+    expect(element.props.id).toBe('create-app-attribution-bootstrap')
+    expect(element.props.strategy).toBe('beforeInteractive')
+    expect(element.props.children).toContain('window.sessionStorage.setItem')
+  })
+
+  it('uses the nonce header in production', async () => {
+    mockIsProd = true
+    mockNonce = 'prod-nonce'
+
+    const renderComponent = await loadComponent()
+    const element = await renderComponent() as ReactElement<BootstrapScriptProps>
+
+    expect(element.props.nonce).toBe('prod-nonce')
+  })
+
+  it('stores external attribution and clears only attribution params from the url', () => {
+    window.history.replaceState({}, '', '/apps?action=keep&utm_source=dify_blog&slug=get-started-with-dif#preview')
+
+    runBootstrapScript()
+
+    expect(window.sessionStorage.getItem('create_app_external_attribution')).toBe(JSON.stringify({
+      utmSource: 'blog',
+      utmCampaign: 'get-started-with-dif',
+    }))
+    expect(window.location.pathname).toBe('/apps')
+    expect(window.location.search).toBe('?action=keep')
+    expect(window.location.hash).toBe('#preview')
+  })
+
+  it('does nothing for invalid external sources', () => {
+    window.history.replaceState({}, '', '/apps?action=keep&utm_source=internal&slug=ignored')
+
+    runBootstrapScript()
+
+    expect(window.sessionStorage.getItem('create_app_external_attribution')).toBeNull()
+    expect(window.location.search).toBe('?action=keep&utm_source=internal&slug=ignored')
+  })
+})
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..d588610f71 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -6,7 +6,6 @@ import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { trackEvent } from '@/app/components/base/amplitude'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
@@ -27,6 +26,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 +112,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 +174,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..2e0d1bcc84 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,83 @@ 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, onCancel }: { onConfirm: () => void, onCancel: () => void }) => (
+    <div data-testid="dsl-confirm-modal">
+      <button data-testid="confirm-dsl" onClick={onConfirm}>Confirm DSL</button>
+      <button data-testid="cancel-dsl" onClick={onCancel}>Cancel DSL</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/service/explore', () => ({
+  fetchAppDetail: vi.fn(),
+}))
+
+vi.mock('@/utils/create-app-tracking', () => ({
+  trackCreateApp: (...args: unknown[]) => mockTrackCreateApp(...args),
 }))
 
 describe('Apps', () => {
@@ -59,6 +161,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 +226,82 @@ 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,
+        })
+      })
+    })
+
+    it('should track template preview creation after confirming a pending import', async () => {
+      mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onPending?: () => void }) => {
+        options.onPending?.()
+      })
+      mockHandleImportDSLConfirm.mockImplementation(async (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'))
+
+      fireEvent.click(await screen.findByTestId('confirm-dsl'))
+
+      await waitFor(() => {
+        expect(mockHandleImportDSLConfirm).toHaveBeenCalledTimes(1)
+        expect(mockTrackCreateApp).toHaveBeenCalledWith({
+          appMode: AppModeEnum.CHAT,
+        })
+      })
+    })
+
+    it('should close the dsl confirm modal when the pending import is canceled', async () => {
+      mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onPending?: () => void }) => {
+        options.onPending?.()
+      })
+
+      renderWithClient(<Apps />)
+
+      fireEvent.click(screen.getByTestId('open-preview'))
+      fireEvent.click(await screen.findByTestId('try-app-create'))
+      fireEvent.click(await screen.findByTestId('confirm-create'))
+
+      fireEvent.click(await screen.findByTestId('cancel-dsl'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('dsl-confirm-modal')).not.toBeInTheDocument()
+      })
+      expect(mockTrackCreateApp).not.toHaveBeenCalled()
+    })
+
+    it('should hide the create modal without tracking when the modal closes', async () => {
+      renderWithClient(<Apps />)
+
+      fireEvent.click(screen.getByTestId('open-preview'))
+      fireEvent.click(await screen.findByTestId('try-app-create'))
+
+      fireEvent.click(await screen.findByTestId('hide-create'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      })
+      expect(mockTrackCreateApp).not.toHaveBeenCalled()
+    })
   })
 
   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/create-app-attribution-bootstrap.tsx b/web/app/components/create-app-attribution-bootstrap.tsx
new file mode 100644
index 0000000000..fffc73f260
--- /dev/null
+++ b/web/app/components/create-app-attribution-bootstrap.tsx
@@ -0,0 +1,23 @@
+import { memo } from 'react'
+import { IS_PROD } from '@/config'
+import { headers } from '@/next/headers'
+import Script from '@/next/script'
+import { buildCreateAppAttributionBootstrapScript } from '@/utils/create-app-tracking'
+
+const CreateAppAttributionBootstrap = async () => {
+  const nonce = IS_PROD ? (await headers()).get('x-nonce') ?? '' : ''
+  /* v8 ignore next -- `nonce` is always a string (`''` or header value), so nullish fallback is unreachable in runtime. @preserve */
+  const scriptNonce = nonce ?? undefined
+
+  return (
+    <Script
+      id="create-app-attribution-bootstrap"
+      strategy="beforeInteractive"
+      nonce={scriptNonce}
+    >
+      {buildCreateAppAttributionBootstrapScript()}
+    </Script>
+  )
+}
+
+export default memo(CreateAppAttributionBootstrap)
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..67312f5ec3 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'))
@@ -317,6 +324,7 @@ describe('AppList', () => {
       await waitFor(() => {
         expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
       })
+      expect(mockTrackCreateApp).not.toHaveBeenCalled()
     })
 
     it('should close create modal on successful DSL import', async () => {
@@ -325,7 +333,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?.()
       })
@@ -345,7 +353,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 +393,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/layout.tsx b/web/app/layout.tsx
index 03107f5d15..63e506bd45 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -9,6 +9,7 @@ import { getLocaleOnServer } from '@/i18n-config/server'
 import { ToastHost } from './components/base/ui/toast'
 import { TooltipProvider } from './components/base/ui/tooltip'
 import PartnerStackCookieRecorder from './components/billing/partner-stack/cookie-recorder'
+import CreateAppAttributionBootstrap from './components/create-app-attribution-bootstrap'
 import { AgentationLoader } from './components/devtools/agentation-loader'
 import { ReactScanLoader } from './components/devtools/react-scan/loader'
 import { I18nServerProvider } from './components/provider/i18n-server'
@@ -47,6 +48,7 @@ const LocaleLayout = async ({
         <meta name="msapplication-TileColor" content="#1C64F2" />
         <meta name="msapplication-config" content="/browserconfig.xml" />
 
+        <CreateAppAttributionBootstrap />
         {/* <ReactGrabLoader /> */}
         <ReactScanLoader />
       </head>
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..b732d8d3b8
--- /dev/null
+++ b/web/utils/__tests__/create-app-tracking.spec.ts
@@ -0,0 +1,189 @@
+import Cookies from 'js-cookie'
+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('rememberCreateAppExternalAttribution', () => {
+    it('should ignore malformed utm cookies', () => {
+      vi.spyOn(Cookies, 'get').mockImplementation(((key?: string) => {
+        return key ? 'not-json' : {}
+      }) as typeof Cookies.get)
+
+      expect(rememberCreateAppExternalAttribution()).toBeNull()
+      expect(window.sessionStorage.getItem('create_app_external_attribution')).toBeNull()
+    })
+  })
+
+  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}$/),
+      })
+    })
+
+    it('should keep using remembered external attribution after navigating away from the original url', () => {
+      window.history.replaceState({}, '', '/apps?utm_source=linkedin&slug=agent-launch')
+
+      rememberCreateAppExternalAttribution({
+        searchParams: new URLSearchParams(window.location.search),
+      })
+
+      window.history.replaceState({}, '', '/explore')
+
+      trackCreateApp({ appMode: AppModeEnum.CHAT })
+
+      expect(amplitude.trackEvent).toHaveBeenCalledWith('create_app', {
+        source: 'external',
+        utm_source: 'linkedin',
+        utm_campaign: 'agent-launch',
+      })
+    })
+
+    it('should fall back to the original payload when window is unavailable', () => {
+      const originalWindow = globalThis.window
+
+      try {
+        Object.defineProperty(globalThis, 'window', {
+          configurable: true,
+          value: undefined,
+        })
+
+        trackCreateApp({ appMode: AppModeEnum.AGENT_CHAT })
+
+        expect(amplitude.trackEvent).toHaveBeenCalledWith('create_app', {
+          source: 'original',
+          app_mode: 'agent',
+          time: expect.stringMatching(/^\d{2}-\d{2}-\d{2}:\d{2}:\d{2}$/),
+        })
+      }
+      finally {
+        Object.defineProperty(globalThis, 'window', {
+          configurable: true,
+          value: originalWindow,
+        })
+      }
+    })
+  })
+})
diff --git a/web/utils/create-app-tracking.ts b/web/utils/create-app-tracking.ts
new file mode 100644
index 0000000000..f56e2c13fa
--- /dev/null
+++ b/web/utils/create-app-tracking.ts
@@ -0,0 +1,240 @@
+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 CREATE_APP_EXTERNAL_ATTRIBUTION_QUERY_KEYS = ['utm_source', 'utm_campaign', 'slug'] as const
+
+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 serializeBootstrapValue = (value: unknown) => {
+  return JSON.stringify(value).replace(/</g, '\\u003c')
+}
+
+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 runCreateAppAttributionBootstrap = (
+  sourceMap = EXTERNAL_UTM_SOURCE_MAP,
+  storageKey = CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY,
+  queryKeys = CREATE_APP_EXTERNAL_ATTRIBUTION_QUERY_KEYS,
+) => {
+  try {
+    if (typeof window === 'undefined' || !window.sessionStorage)
+      return
+
+    const searchParams = new URLSearchParams(window.location.search)
+    const rawSource = searchParams.get('utm_source')
+
+    if (!rawSource)
+      return
+
+    const normalizedSource = rawSource.trim().toLowerCase()
+    const mappedSource = sourceMap[normalizedSource as keyof typeof sourceMap]
+
+    if (!mappedSource)
+      return
+
+    const normalizedSlug = searchParams.get('slug')?.trim()
+    const normalizedCampaign = searchParams.get('utm_campaign')?.trim()
+    const utmCampaign = normalizedSlug || normalizedCampaign
+    const attribution = utmCampaign
+      ? { utmSource: mappedSource, utmCampaign }
+      : { utmSource: mappedSource }
+
+    window.sessionStorage.setItem(storageKey, JSON.stringify(attribution))
+
+    const nextSearchParams = new URLSearchParams(window.location.search)
+    let hasChanges = false
+
+    queryKeys.forEach((key) => {
+      if (!nextSearchParams.has(key))
+        return
+
+      nextSearchParams.delete(key)
+      hasChanges = true
+    })
+
+    if (!hasChanges)
+      return
+
+    const nextSearch = nextSearchParams.toString()
+    const nextUrl = `${window.location.pathname}${nextSearch ? `?${nextSearch}` : ''}${window.location.hash}`
+
+    try {
+      window.history.replaceState(window.history.state, '', nextUrl)
+    }
+    catch {}
+  }
+  catch {}
+}
+
+export const buildCreateAppAttributionBootstrapScript = () => {
+  return `(${runCreateAppAttributionBootstrap.toString()})(${serializeBootstrapValue(EXTERNAL_UTM_SOURCE_MAP)}, ${serializeBootstrapValue(CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY)}, ${serializeBootstrapValue(CREATE_APP_EXTERNAL_ATTRIBUTION_QUERY_KEYS)});`
+}
+
+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 => {
+  return parseJSONRecord(window.sessionStorage.getItem(CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY)) as ExternalCreateAppAttribution | null
+}
+
+const writeRememberedExternalCreateAppAttribution = (attribution: ExternalCreateAppAttribution) => {
+  window.sessionStorage.setItem(CREATE_APP_EXTERNAL_ATTRIBUTION_STORAGE_KEY, JSON.stringify(attribution))
+}
+
+const clearRememberedExternalCreateAppAttribution = () => {
+  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 && typeof window !== 'undefined')
+    writeRememberedExternalCreateAppAttribution(attribution)
+
+  return attribution
+}
+
+const resolveCurrentExternalCreateAppAttribution = () => {
+  if (typeof window === 'undefined')
+    return null
+
+  return 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 e3c2116501028ff0ce5c83217fdb59831744163d Mon Sep 17 00:00:00 2001
From: zyssyz123 <916125788@qq.com>
Date: Wed, 15 Apr 2026 17:18:29 +0800
Subject: [PATCH 101/120] fix: remove enable for get (#35245)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
---
 api/controllers/console/explore/trial.py      |  8 ++----
 .../controllers/console/explore/test_trial.py | 28 +++++++++----------
 web/service/try-app.spec.ts                   | 26 +++++++++++++++++
 web/service/try-app.ts                        | 10 ++++---
 4 files changed, 48 insertions(+), 24 deletions(-)
 create mode 100644 web/service/try-app.spec.ts

diff --git a/api/controllers/console/explore/trial.py b/api/controllers/console/explore/trial.py
index e432574434..0a3595454a 100644
--- a/api/controllers/console/explore/trial.py
+++ b/api/controllers/console/explore/trial.py
@@ -169,6 +169,7 @@ console_ns.schema_model(
 
 
 class TrialAppWorkflowRunApi(TrialAppResource):
+    @trial_feature_enable
     @console_ns.expect(console_ns.models[WorkflowRunRequest.__name__])
     def post(self, trial_app):
         """
@@ -210,6 +211,7 @@ class TrialAppWorkflowRunApi(TrialAppResource):
 
 
 class TrialAppWorkflowTaskStopApi(TrialAppResource):
+    @trial_feature_enable
     def post(self, trial_app, task_id: str):
         """
         Stop workflow task
@@ -290,7 +292,6 @@ class TrialChatApi(TrialAppResource):
 
 
 class TrialMessageSuggestedQuestionApi(TrialAppResource):
-    @trial_feature_enable
     def get(self, trial_app, message_id):
         app_model = trial_app
         app_mode = AppMode.value_of(app_model.mode)
@@ -470,7 +471,6 @@ class TrialCompletionApi(TrialAppResource):
 class TrialSitApi(Resource):
     """Resource for trial app sites."""
 
-    @trial_feature_enable
     @get_app_model_with_trial(None)
     def get(self, app_model):
         """Retrieve app site info.
@@ -492,7 +492,6 @@ class TrialSitApi(Resource):
 class TrialAppParameterApi(Resource):
     """Resource for app variables."""
 
-    @trial_feature_enable
     @get_app_model_with_trial(None)
     def get(self, app_model):
         """Retrieve app parameters."""
@@ -521,7 +520,6 @@ class TrialAppParameterApi(Resource):
 
 
 class AppApi(Resource):
-    @trial_feature_enable
     @get_app_model_with_trial(None)
     @marshal_with(app_detail_with_site_model)
     def get(self, app_model):
@@ -534,7 +532,6 @@ class AppApi(Resource):
 
 
 class AppWorkflowApi(Resource):
-    @trial_feature_enable
     @get_app_model_with_trial(None)
     @marshal_with(workflow_model)
     def get(self, app_model):
@@ -547,7 +544,6 @@ class AppWorkflowApi(Resource):
 
 
 class DatasetListApi(Resource):
-    @trial_feature_enable
     @get_app_model_with_trial(None)
     def get(self, app_model):
         page = request.args.get("page", default=1, type=int)
diff --git a/api/tests/unit_tests/controllers/console/explore/test_trial.py b/api/tests/unit_tests/controllers/console/explore/test_trial.py
index 04beb31389..a43c3ca47e 100644
--- a/api/tests/unit_tests/controllers/console/explore/test_trial.py
+++ b/api/tests/unit_tests/controllers/console/explore/test_trial.py
@@ -94,7 +94,7 @@ class TestTrialAppWorkflowRunApi:
 
         with app.test_request_context("/"):
             with pytest.raises(NotWorkflowAppError):
-                method(MagicMock(mode=AppMode.CHAT))
+                method(api, MagicMock(mode=AppMode.CHAT))
 
     def test_success(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -106,7 +106,7 @@ class TestTrialAppWorkflowRunApi:
             patch.object(module.AppGenerateService, "generate", return_value=MagicMock()),
             patch.object(module.RecommendedAppService, "add_trial_app_record"),
         ):
-            result = method(trial_app_workflow)
+            result = method(api, trial_app_workflow)
 
         assert result is not None
 
@@ -124,7 +124,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(ProviderNotInitializeError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
     def test_workflow_quota_exceeded(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -140,7 +140,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(ProviderQuotaExceededError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
     def test_workflow_model_not_support(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -156,7 +156,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(ProviderModelCurrentlyNotSupportError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
     def test_workflow_invoke_error(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -172,7 +172,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(CompletionRequestError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
     def test_workflow_rate_limit_error(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -188,7 +188,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(InvokeRateLimitHttpError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
     def test_workflow_value_error(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -204,7 +204,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(ValueError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
     def test_workflow_generic_exception(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowRunApi()
@@ -220,7 +220,7 @@ class TestTrialAppWorkflowRunApi:
             ),
         ):
             with pytest.raises(InternalServerError):
-                method(trial_app_workflow)
+                method(api, trial_app_workflow)
 
 
 class TestTrialChatApi:
@@ -566,7 +566,7 @@ class TestTrialMessageSuggestedQuestionApi:
 
         with app.test_request_context("/"):
             with pytest.raises(NotChatAppError):
-                method(api, MagicMock(mode="completion"), str(uuid4()))
+                method(MagicMock(mode="completion"), str(uuid4()))
 
     def test_success(self, app, trial_app_chat, account):
         api = module.TrialMessageSuggestedQuestionApi()
@@ -581,7 +581,7 @@ class TestTrialMessageSuggestedQuestionApi:
                 return_value=["q1", "q2"],
             ),
         ):
-            result = method(api, trial_app_chat, str(uuid4()))
+            result = method(trial_app_chat, str(uuid4()))
 
         assert result == {"data": ["q1", "q2"]}
 
@@ -599,7 +599,7 @@ class TestTrialMessageSuggestedQuestionApi:
             ),
         ):
             with pytest.raises(NotFound):
-                method(api, trial_app_chat, str(uuid4()))
+                method(trial_app_chat, str(uuid4()))
 
 
 class TestTrialAppParameterApi:
@@ -931,7 +931,7 @@ class TestTrialAppWorkflowTaskStopApi:
 
         with app.test_request_context("/"):
             with pytest.raises(NotWorkflowAppError):
-                method(trial_app_chat, str(uuid4()))
+                method(api, trial_app_chat, str(uuid4()))
 
     def test_success(self, app, trial_app_workflow, account):
         api = module.TrialAppWorkflowTaskStopApi()
@@ -944,7 +944,7 @@ class TestTrialAppWorkflowTaskStopApi:
             patch.object(module.AppQueueManager, "set_stop_flag_no_user_check") as mock_set_flag,
             patch.object(module.GraphEngineManager, "send_stop_command") as mock_send_cmd,
         ):
-            result = method(trial_app_workflow, task_id)
+            result = method(api, trial_app_workflow, task_id)
 
         assert result == {"result": "success"}
         mock_set_flag.assert_called_once_with(task_id)
diff --git a/web/service/try-app.spec.ts b/web/service/try-app.spec.ts
new file mode 100644
index 0000000000..9e9cd8d04a
--- /dev/null
+++ b/web/service/try-app.spec.ts
@@ -0,0 +1,26 @@
+import { get } from './base'
+import { fetchTryAppDatasets } from './try-app'
+
+vi.mock('./base', () => ({
+  get: vi.fn(),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    trialApps: {
+      info: vi.fn(),
+      workflows: vi.fn(),
+      parameters: vi.fn(),
+    },
+  },
+}))
+
+describe('fetchTryAppDatasets', () => {
+  it('serializes ids as repeated query params', async () => {
+    vi.mocked(get).mockResolvedValue({ data: [] })
+
+    await fetchTryAppDatasets('app-1', ['id-1', 'id-2'])
+
+    expect(get).toHaveBeenCalledWith('/trial-apps/app-1/datasets?ids=id-1&ids=id-2')
+  })
+})
diff --git a/web/service/try-app.ts b/web/service/try-app.ts
index 11aa638537..7b81e7c4fa 100644
--- a/web/service/try-app.ts
+++ b/web/service/try-app.ts
@@ -1,17 +1,19 @@
 import type { ChatConfig } from '@/app/components/base/chat/types'
 import type { DataSetListResponse } from '@/models/datasets'
 import type { TryAppFlowPreview, TryAppInfo } from '@/models/try-app'
+import qs from 'qs'
 import { consoleClient } from '@/service/client'
+import { get } from './base'
 
 export const fetchTryAppInfo = (appId: string): Promise<TryAppInfo> => {
   return consoleClient.trialApps.info({ params: { appId } })
 }
 
 export const fetchTryAppDatasets = (appId: string, ids: string[]): Promise<DataSetListResponse> => {
-  return consoleClient.trialApps.datasets({
-    params: { appId },
-    query: { ids },
-  })
+  const queryString = qs.stringify({ ids }, { indices: false })
+  const url = `/trial-apps/${encodeURIComponent(appId)}/datasets${queryString ? `?${queryString}` : ''}`
+
+  return get<DataSetListResponse>(url)
 }
 
 export const fetchTryAppFlowPreview = (appId: string): Promise<TryAppFlowPreview> => {

From fd71c56f16e12f6b903c0a8d0b25032d23104545 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 11:52:31 +0200
Subject: [PATCH 102/120] test: remove legacy storage key loader integration
 test (#35225)

---
 .../factories/test_storage_key_loader.py      | 375 ------------------
 1 file changed, 375 deletions(-)
 delete mode 100644 api/tests/integration_tests/factories/test_storage_key_loader.py

diff --git a/api/tests/integration_tests/factories/test_storage_key_loader.py b/api/tests/integration_tests/factories/test_storage_key_loader.py
deleted file mode 100644
index c1bb8e1245..0000000000
--- a/api/tests/integration_tests/factories/test_storage_key_loader.py
+++ /dev/null
@@ -1,375 +0,0 @@
-import unittest
-from datetime import UTC, datetime
-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 models import ToolFile, UploadFile
-from models.enums import CreatorUserRole
-
-
-@pytest.mark.usefixtures("flask_req_ctx")
-class TestStorageKeyLoader(unittest.TestCase):
-    """
-    Integration tests for StorageKeyLoader class.
-
-    Tests the batched loading of storage keys from the database for files
-    with different transfer methods: LOCAL_FILE, REMOTE_URL, and TOOL_FILE.
-    """
-
-    def setUp(self):
-        """Set up test data before each test method."""
-        self.session = db.session()
-        self.tenant_id = str(uuid4())
-        self.user_id = str(uuid4())
-        self.conversation_id = str(uuid4())
-
-        # Create test data that will be cleaned up after each test
-        self.test_upload_files = []
-        self.test_tool_files = []
-
-        # Create StorageKeyLoader instance
-        self.loader = StorageKeyLoader(
-            self.session,
-            self.tenant_id,
-            access_controller=DatabaseFileAccessController(),
-        )
-
-    def tearDown(self):
-        """Clean up test data after each test method."""
-        self.session.rollback()
-
-    def _create_upload_file(
-        self, file_id: str | None = None, storage_key: str | None = None, tenant_id: str | None = None
-    ) -> UploadFile:
-        """Helper method to create an UploadFile record for testing."""
-        if file_id is None:
-            file_id = str(uuid4())
-        if storage_key is None:
-            storage_key = f"test_storage_key_{uuid4()}"
-        if tenant_id is None:
-            tenant_id = self.tenant_id
-
-        upload_file = UploadFile(
-            tenant_id=tenant_id,
-            storage_type=StorageType.LOCAL,
-            key=storage_key,
-            name="test_file.txt",
-            size=1024,
-            extension=".txt",
-            mime_type="text/plain",
-            created_by_role=CreatorUserRole.ACCOUNT,
-            created_by=self.user_id,
-            created_at=datetime.now(UTC),
-            used=False,
-        )
-        upload_file.id = file_id
-
-        self.session.add(upload_file)
-        self.session.flush()
-        self.test_upload_files.append(upload_file)
-
-        return upload_file
-
-    def _create_tool_file(
-        self, file_id: str | None = None, file_key: str | None = None, tenant_id: str | None = None
-    ) -> ToolFile:
-        """Helper method to create a ToolFile record for testing."""
-        if file_id is None:
-            file_id = str(uuid4())
-        if file_key is None:
-            file_key = f"test_file_key_{uuid4()}"
-        if tenant_id is None:
-            tenant_id = self.tenant_id
-
-        tool_file = ToolFile(
-            user_id=self.user_id,
-            tenant_id=tenant_id,
-            conversation_id=self.conversation_id,
-            file_key=file_key,
-            mimetype="text/plain",
-            original_url="http://example.com/file.txt",
-            name="test_tool_file.txt",
-            size=2048,
-        )
-        tool_file.id = file_id
-        self.session.add(tool_file)
-        self.session.flush()
-        self.test_tool_files.append(tool_file)
-
-        return tool_file
-
-    def _create_file(self, related_id: str, transfer_method: FileTransferMethod, tenant_id: str | None = None) -> File:
-        """Helper method to create a File object for testing."""
-        if tenant_id is None:
-            tenant_id = self.tenant_id
-
-        # Set related_id for LOCAL_FILE and TOOL_FILE transfer methods
-        file_related_id = None
-        remote_url = None
-
-        if transfer_method in (FileTransferMethod.LOCAL_FILE, FileTransferMethod.TOOL_FILE):
-            file_related_id = related_id
-        elif transfer_method == FileTransferMethod.REMOTE_URL:
-            remote_url = "https://example.com/test_file.txt"
-            file_related_id = related_id
-
-        return File(
-            id=str(uuid4()),  # Generate new UUID for File.id
-            tenant_id=tenant_id,
-            type=FileType.DOCUMENT,
-            transfer_method=transfer_method,
-            related_id=file_related_id,
-            remote_url=remote_url,
-            filename="test_file.txt",
-            extension=".txt",
-            mime_type="text/plain",
-            size=1024,
-            storage_key="initial_key",
-        )
-
-    def test_load_storage_keys_local_file(self):
-        """Test loading storage keys for LOCAL_FILE transfer method."""
-        # Create test data
-        upload_file = self._create_upload_file()
-        file = self._create_file(related_id=upload_file.id, transfer_method=FileTransferMethod.LOCAL_FILE)
-
-        # Load storage keys
-        self.loader.load_storage_keys([file])
-
-        # Verify storage key was loaded correctly
-        assert file._storage_key == upload_file.key
-
-    def test_load_storage_keys_remote_url(self):
-        """Test loading storage keys for REMOTE_URL transfer method."""
-        # Create test data
-        upload_file = self._create_upload_file()
-        file = self._create_file(related_id=upload_file.id, transfer_method=FileTransferMethod.REMOTE_URL)
-
-        # Load storage keys
-        self.loader.load_storage_keys([file])
-
-        # Verify storage key was loaded correctly
-        assert file._storage_key == upload_file.key
-
-    def test_load_storage_keys_tool_file(self):
-        """Test loading storage keys for TOOL_FILE transfer method."""
-        # Create test data
-        tool_file = self._create_tool_file()
-        file = self._create_file(related_id=tool_file.id, transfer_method=FileTransferMethod.TOOL_FILE)
-
-        # Load storage keys
-        self.loader.load_storage_keys([file])
-
-        # Verify storage key was loaded correctly
-        assert file._storage_key == tool_file.file_key
-
-    def test_load_storage_keys_mixed_methods(self):
-        """Test batch loading with mixed transfer methods."""
-        # Create test data for different transfer methods
-        upload_file1 = self._create_upload_file()
-        upload_file2 = self._create_upload_file()
-        tool_file = self._create_tool_file()
-
-        file1 = self._create_file(related_id=upload_file1.id, transfer_method=FileTransferMethod.LOCAL_FILE)
-        file2 = self._create_file(related_id=upload_file2.id, transfer_method=FileTransferMethod.REMOTE_URL)
-        file3 = self._create_file(related_id=tool_file.id, transfer_method=FileTransferMethod.TOOL_FILE)
-
-        files = [file1, file2, file3]
-
-        # Load storage keys
-        self.loader.load_storage_keys(files)
-
-        # Verify all storage keys were loaded correctly
-        assert file1._storage_key == upload_file1.key
-        assert file2._storage_key == upload_file2.key
-        assert file3._storage_key == tool_file.file_key
-
-    def test_load_storage_keys_empty_list(self):
-        """Test with empty file list."""
-        # Should not raise any exceptions
-        self.loader.load_storage_keys([])
-
-    def test_load_storage_keys_ignores_legacy_file_tenant_id(self):
-        """Legacy file tenant_id should not override the loader tenant scope."""
-        upload_file = self._create_upload_file()
-        file = self._create_file(
-            related_id=upload_file.id, transfer_method=FileTransferMethod.LOCAL_FILE, tenant_id=str(uuid4())
-        )
-
-        self.loader.load_storage_keys([file])
-
-        assert file._storage_key == upload_file.key
-
-    def test_load_storage_keys_missing_file_id(self):
-        """Test with None file.related_id."""
-        # Create a file with valid parameters first, then manually set related_id to None
-        file = self._create_file(related_id=str(uuid4()), transfer_method=FileTransferMethod.LOCAL_FILE)
-        file.related_id = None
-
-        # Should raise ValueError for None file related_id
-        with pytest.raises(ValueError) as context:
-            self.loader.load_storage_keys([file])
-
-        assert str(context.value) == "file id should not be None."
-
-    def test_load_storage_keys_nonexistent_upload_file_records(self):
-        """Test with missing UploadFile database records."""
-        # Create file with non-existent upload file id
-        non_existent_id = str(uuid4())
-        file = self._create_file(related_id=non_existent_id, transfer_method=FileTransferMethod.LOCAL_FILE)
-
-        # Should raise ValueError for missing record
-        with pytest.raises(ValueError):
-            self.loader.load_storage_keys([file])
-
-    def test_load_storage_keys_nonexistent_tool_file_records(self):
-        """Test with missing ToolFile database records."""
-        # Create file with non-existent tool file id
-        non_existent_id = str(uuid4())
-        file = self._create_file(related_id=non_existent_id, transfer_method=FileTransferMethod.TOOL_FILE)
-
-        # Should raise ValueError for missing record
-        with pytest.raises(ValueError):
-            self.loader.load_storage_keys([file])
-
-    def test_load_storage_keys_invalid_uuid(self):
-        """Test with invalid UUID format."""
-        # Create a file with valid parameters first, then manually set invalid related_id
-        file = self._create_file(related_id=str(uuid4()), transfer_method=FileTransferMethod.LOCAL_FILE)
-        file.related_id = "invalid-uuid-format"
-
-        # Should raise ValueError for invalid UUID
-        with pytest.raises(ValueError):
-            self.loader.load_storage_keys([file])
-
-    def test_load_storage_keys_batch_efficiency(self):
-        """Test batched operations use efficient queries."""
-        # Create multiple files of different types
-        upload_files = [self._create_upload_file() for _ in range(3)]
-        tool_files = [self._create_tool_file() for _ in range(2)]
-
-        files = []
-        files.extend(
-            [self._create_file(related_id=uf.id, transfer_method=FileTransferMethod.LOCAL_FILE) for uf in upload_files]
-        )
-        files.extend(
-            [self._create_file(related_id=tf.id, transfer_method=FileTransferMethod.TOOL_FILE) for tf in tool_files]
-        )
-
-        # Mock the session to count queries
-        with patch.object(self.session, "scalars", wraps=self.session.scalars) as mock_scalars:
-            self.loader.load_storage_keys(files)
-
-            # Should make exactly 2 queries (one for upload_files, one for tool_files)
-            assert mock_scalars.call_count == 2
-
-        # Verify all storage keys were loaded correctly
-        for i, file in enumerate(files[:3]):
-            assert file._storage_key == upload_files[i].key
-        for i, file in enumerate(files[3:]):
-            assert file._storage_key == tool_files[i].file_key
-
-    def test_load_storage_keys_tenant_isolation(self):
-        """Test that tenant isolation works correctly."""
-        # Create files for different tenants
-        other_tenant_id = str(uuid4())
-
-        # Create upload file for current tenant
-        upload_file_current = self._create_upload_file()
-        file_current = self._create_file(
-            related_id=upload_file_current.id, transfer_method=FileTransferMethod.LOCAL_FILE
-        )
-
-        # Create upload file for other tenant (but don't add to cleanup list)
-        upload_file_other = UploadFile(
-            tenant_id=other_tenant_id,
-            storage_type=StorageType.LOCAL,
-            key="other_tenant_key",
-            name="other_file.txt",
-            size=1024,
-            extension=".txt",
-            mime_type="text/plain",
-            created_by_role=CreatorUserRole.ACCOUNT,
-            created_by=self.user_id,
-            created_at=datetime.now(UTC),
-            used=False,
-        )
-        upload_file_other.id = str(uuid4())
-        self.session.add(upload_file_other)
-        self.session.flush()
-
-        # Create file for other tenant but try to load with current tenant's loader
-        file_other = self._create_file(
-            related_id=upload_file_other.id, transfer_method=FileTransferMethod.LOCAL_FILE, tenant_id=other_tenant_id
-        )
-
-        # Should raise ValueError due to tenant mismatch
-        with pytest.raises(ValueError) as context:
-            self.loader.load_storage_keys([file_other])
-
-        assert "Upload file not found for id:" in str(context.value)
-
-        # Current tenant's file should still work
-        self.loader.load_storage_keys([file_current])
-        assert file_current._storage_key == upload_file_current.key
-
-    def test_load_storage_keys_mixed_tenant_batch(self):
-        """Test batch with mixed tenant files (should fail on first mismatch)."""
-        # Create files for current tenant
-        upload_file_current = self._create_upload_file()
-        file_current = self._create_file(
-            related_id=upload_file_current.id, transfer_method=FileTransferMethod.LOCAL_FILE
-        )
-
-        # Create file for different tenant
-        other_tenant_id = str(uuid4())
-        file_other = self._create_file(
-            related_id=str(uuid4()), transfer_method=FileTransferMethod.LOCAL_FILE, tenant_id=other_tenant_id
-        )
-
-        # Should raise ValueError on tenant mismatch
-        with pytest.raises(ValueError) as context:
-            self.loader.load_storage_keys([file_current, file_other])
-
-        assert "Upload file not found for id:" in str(context.value)
-
-    def test_load_storage_keys_duplicate_file_ids(self):
-        """Test handling of duplicate file IDs in the batch."""
-        # Create upload file
-        upload_file = self._create_upload_file()
-
-        # Create two File objects with same related_id
-        file1 = self._create_file(related_id=upload_file.id, transfer_method=FileTransferMethod.LOCAL_FILE)
-        file2 = self._create_file(related_id=upload_file.id, transfer_method=FileTransferMethod.LOCAL_FILE)
-
-        # Should handle duplicates gracefully
-        self.loader.load_storage_keys([file1, file2])
-
-        # Both files should have the same storage key
-        assert file1._storage_key == upload_file.key
-        assert file2._storage_key == upload_file.key
-
-    def test_load_storage_keys_session_isolation(self):
-        """Test that the loader uses the provided session correctly."""
-        # Create test data
-        upload_file = self._create_upload_file()
-        file = self._create_file(related_id=upload_file.id, transfer_method=FileTransferMethod.LOCAL_FILE)
-
-        # Create loader with different session (same underlying connection)
-
-        with Session(bind=db.engine) as other_session:
-            other_loader = StorageKeyLoader(
-                other_session,
-                self.tenant_id,
-                access_controller=DatabaseFileAccessController(),
-            )
-            with pytest.raises(ValueError):
-                other_loader.load_storage_keys([file])

From 2f33867d072a0561118a2a52cd2b84476a58d60b Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 11:53:42 +0200
Subject: [PATCH 103/120] test: remove legacy trigger provider permissions test
 (#35227)

---
 .../test_trigger_provider_permissions.py      | 244 ------------------
 1 file changed, 244 deletions(-)
 delete mode 100644 api/tests/integration_tests/controllers/console/workspace/test_trigger_provider_permissions.py

diff --git a/api/tests/integration_tests/controllers/console/workspace/test_trigger_provider_permissions.py b/api/tests/integration_tests/controllers/console/workspace/test_trigger_provider_permissions.py
deleted file mode 100644
index e55c12e678..0000000000
--- a/api/tests/integration_tests/controllers/console/workspace/test_trigger_provider_permissions.py
+++ /dev/null
@@ -1,244 +0,0 @@
-"""Integration tests for Trigger Provider subscription permission verification."""
-
-import uuid
-from unittest import mock
-
-import pytest
-from flask.testing import FlaskClient
-
-from controllers.console.workspace import trigger_providers as trigger_providers_api
-from libs.datetime_utils import naive_utc_now
-from models import Tenant
-from models.account import Account, TenantAccountJoin, TenantAccountRole
-
-
-class TestTriggerProviderSubscriptionPermissions:
-    """Test permission verification for Trigger Provider subscription endpoints."""
-
-    @pytest.fixture
-    def mock_account(self, monkeypatch: pytest.MonkeyPatch):
-        """Create a mock Account for testing."""
-
-        account = Account(name="Test User", email="test@example.com")
-        account.id = str(uuid.uuid4())
-        account.last_active_at = naive_utc_now()
-        account.created_at = naive_utc_now()
-        account.updated_at = naive_utc_now()
-
-        # Create mock tenant
-        tenant = Tenant(name="Test Tenant")
-        tenant.id = str(uuid.uuid4())
-
-        mock_session_instance = mock.Mock()
-
-        mock_tenant_join = TenantAccountJoin(role=TenantAccountRole.OWNER)
-        monkeypatch.setattr(mock_session_instance, "scalar", mock.Mock(return_value=mock_tenant_join))
-
-        mock_scalars_result = mock.Mock()
-        mock_scalars_result.one.return_value = tenant
-        monkeypatch.setattr(mock_session_instance, "scalars", mock.Mock(return_value=mock_scalars_result))
-
-        mock_session_context = mock.Mock()
-        mock_session_context.__enter__.return_value = mock_session_instance
-        monkeypatch.setattr("models.account.Session", lambda _, expire_on_commit: mock_session_context)
-
-        account.current_tenant = tenant
-        account.current_tenant_id = tenant.id
-        return account
-
-    @pytest.mark.parametrize(
-        ("role", "list_status", "get_status", "update_status", "create_status", "build_status", "delete_status"),
-        [
-            # Admin/Owner can do everything
-            (TenantAccountRole.OWNER, 200, 200, 200, 200, 200, 200),
-            (TenantAccountRole.ADMIN, 200, 200, 200, 200, 200, 200),
-            # Editor can list, get, update (parameters), but not create, build, or delete
-            (TenantAccountRole.EDITOR, 200, 200, 200, 403, 403, 403),
-            # Normal user cannot do anything
-            (TenantAccountRole.NORMAL, 403, 403, 403, 403, 403, 403),
-            # Dataset operator cannot do anything
-            (TenantAccountRole.DATASET_OPERATOR, 403, 403, 403, 403, 403, 403),
-        ],
-    )
-    def test_trigger_subscription_permissions(
-        self,
-        test_client: FlaskClient,
-        auth_header,
-        monkeypatch,
-        mock_account,
-        role: TenantAccountRole,
-        list_status: int,
-        get_status: int,
-        update_status: int,
-        create_status: int,
-        build_status: int,
-        delete_status: int,
-    ):
-        """Test that different roles have appropriate permissions for trigger subscription operations."""
-        # Set user role
-        mock_account.role = role
-
-        # Mock current user
-        monkeypatch.setattr(trigger_providers_api, "current_user", mock_account)
-
-        # Mock AccountService.load_user to prevent authentication issues
-        from services.account_service import AccountService
-
-        mock_load_user = mock.Mock(return_value=mock_account)
-        monkeypatch.setattr(AccountService, "load_user", mock_load_user)
-
-        # Test data
-        provider = "some_provider/some_trigger"
-        subscription_builder_id = str(uuid.uuid4())
-        subscription_id = str(uuid.uuid4())
-
-        # Mock service methods
-        mock_list_subscriptions = mock.Mock(return_value=[])
-        monkeypatch.setattr(
-            "services.trigger.trigger_provider_service.TriggerProviderService.list_trigger_provider_subscriptions",
-            mock_list_subscriptions,
-        )
-
-        mock_get_subscription_builder = mock.Mock(return_value={"id": subscription_builder_id})
-        monkeypatch.setattr(
-            "services.trigger.trigger_subscription_builder_service.TriggerSubscriptionBuilderService.get_subscription_builder_by_id",
-            mock_get_subscription_builder,
-        )
-
-        mock_update_subscription_builder = mock.Mock(return_value={"id": subscription_builder_id})
-        monkeypatch.setattr(
-            "services.trigger.trigger_subscription_builder_service.TriggerSubscriptionBuilderService.update_trigger_subscription_builder",
-            mock_update_subscription_builder,
-        )
-
-        mock_create_subscription_builder = mock.Mock(return_value={"id": subscription_builder_id})
-        monkeypatch.setattr(
-            "services.trigger.trigger_subscription_builder_service.TriggerSubscriptionBuilderService.create_trigger_subscription_builder",
-            mock_create_subscription_builder,
-        )
-
-        mock_update_and_build_builder = mock.Mock()
-        monkeypatch.setattr(
-            "services.trigger.trigger_subscription_builder_service.TriggerSubscriptionBuilderService.update_and_build_builder",
-            mock_update_and_build_builder,
-        )
-
-        mock_delete_provider = mock.Mock()
-        mock_delete_plugin_trigger = mock.Mock()
-        mock_db_session = mock.Mock()
-        mock_db_session.commit = mock.Mock()
-
-        def mock_session_func(engine=None):
-            return mock_session_context
-
-        mock_session_context = mock.Mock()
-        mock_session_context.__enter__.return_value = mock_db_session
-        mock_session_context.__exit__.return_value = None
-
-        monkeypatch.setattr("services.trigger.trigger_provider_service.Session", mock_session_func)
-        monkeypatch.setattr("services.trigger.trigger_subscription_operator_service.Session", mock_session_func)
-
-        monkeypatch.setattr(
-            "services.trigger.trigger_provider_service.TriggerProviderService.delete_trigger_provider",
-            mock_delete_provider,
-        )
-        monkeypatch.setattr(
-            "services.trigger.trigger_subscription_operator_service.TriggerSubscriptionOperatorService.delete_plugin_trigger_by_subscription",
-            mock_delete_plugin_trigger,
-        )
-
-        # Test 1: List subscriptions (should work for Editor, Admin, Owner)
-        response = test_client.get(
-            f"/console/api/workspaces/current/trigger-provider/{provider}/subscriptions/list",
-            headers=auth_header,
-        )
-        assert response.status_code == list_status
-
-        # Test 2: Get subscription builder (should work for Editor, Admin, Owner)
-        response = test_client.get(
-            f"/console/api/workspaces/current/trigger-provider/{provider}/subscriptions/builder/{subscription_builder_id}",
-            headers=auth_header,
-        )
-        assert response.status_code == get_status
-
-        # Test 3: Update subscription builder parameters (should work for Editor, Admin, Owner)
-        response = test_client.post(
-            f"/console/api/workspaces/current/trigger-provider/{provider}/subscriptions/builder/update/{subscription_builder_id}",
-            headers=auth_header,
-            json={"parameters": {"webhook_url": "https://example.com/webhook"}},
-        )
-        assert response.status_code == update_status
-
-        # Test 4: Create subscription builder (should only work for Admin, Owner)
-        response = test_client.post(
-            f"/console/api/workspaces/current/trigger-provider/{provider}/subscriptions/builder/create",
-            headers=auth_header,
-            json={"credential_type": "api_key"},
-        )
-        assert response.status_code == create_status
-
-        # Test 5: Build/activate subscription (should only work for Admin, Owner)
-        response = test_client.post(
-            f"/console/api/workspaces/current/trigger-provider/{provider}/subscriptions/builder/build/{subscription_builder_id}",
-            headers=auth_header,
-            json={"name": "Test Subscription"},
-        )
-        assert response.status_code == build_status
-
-        # Test 6: Delete subscription (should only work for Admin, Owner)
-        response = test_client.post(
-            f"/console/api/workspaces/current/trigger-provider/{subscription_id}/subscriptions/delete",
-            headers=auth_header,
-        )
-        assert response.status_code == delete_status
-
-    @pytest.mark.parametrize(
-        ("role", "status"),
-        [
-            (TenantAccountRole.OWNER, 200),
-            (TenantAccountRole.ADMIN, 200),
-            # Editor should be able to access logs for debugging
-            (TenantAccountRole.EDITOR, 200),
-            (TenantAccountRole.NORMAL, 403),
-            (TenantAccountRole.DATASET_OPERATOR, 403),
-        ],
-    )
-    def test_trigger_subscription_logs_permissions(
-        self,
-        test_client: FlaskClient,
-        auth_header,
-        monkeypatch,
-        mock_account,
-        role: TenantAccountRole,
-        status: int,
-    ):
-        """Test that different roles have appropriate permissions for accessing subscription logs."""
-        # Set user role
-        mock_account.role = role
-
-        # Mock current user
-        monkeypatch.setattr(trigger_providers_api, "current_user", mock_account)
-
-        # Mock AccountService.load_user to prevent authentication issues
-        from services.account_service import AccountService
-
-        mock_load_user = mock.Mock(return_value=mock_account)
-        monkeypatch.setattr(AccountService, "load_user", mock_load_user)
-
-        # Test data
-        provider = "some_provider/some_trigger"
-        subscription_builder_id = str(uuid.uuid4())
-
-        # Mock service method
-        mock_list_logs = mock.Mock(return_value=[])
-        monkeypatch.setattr(
-            "services.trigger.trigger_subscription_builder_service.TriggerSubscriptionBuilderService.list_logs",
-            mock_list_logs,
-        )
-
-        # Test access to logs
-        response = test_client.get(
-            f"/console/api/workspaces/current/trigger-provider/{provider}/subscriptions/builder/logs/{subscription_builder_id}",
-            headers=auth_header,
-        )
-        assert response.status_code == status

From e5bd18132c2f285cd8a77e8d134e55654c6682ce Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 11:53:46 +0200
Subject: [PATCH 104/120] test: remove legacy jinja2 code executor integration
 test (#35222)

---
 .../nodes/code_executor/test_code_jinja2.py   | 95 -------------------
 1 file changed, 95 deletions(-)
 delete mode 100644 api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py

diff --git a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py b/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
deleted file mode 100644
index c8eb9ec3e4..0000000000
--- a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
+++ /dev/null
@@ -1,95 +0,0 @@
-import base64
-
-from core.helper.code_executor.code_executor import CodeExecutor, CodeLanguage
-from core.helper.code_executor.jinja2.jinja2_transformer import Jinja2TemplateTransformer
-
-CODE_LANGUAGE = CodeLanguage.JINJA2
-
-
-def test_jinja2():
-    """Test basic Jinja2 template rendering."""
-    template = "Hello {{template}}"
-    # Template must be base64 encoded to match the new safe embedding approach
-    template_b64 = base64.b64encode(template.encode("utf-8")).decode("utf-8")
-    inputs = base64.b64encode(b'{"template": "World"}').decode("utf-8")
-    code = (
-        Jinja2TemplateTransformer.get_runner_script()
-        .replace(Jinja2TemplateTransformer._template_b64_placeholder, template_b64)
-        .replace(Jinja2TemplateTransformer._inputs_placeholder, inputs)
-    )
-    result = CodeExecutor.execute_code(
-        language=CODE_LANGUAGE, preload=Jinja2TemplateTransformer.get_preload_script(), code=code
-    )
-    assert result == "<<RESULT>>Hello World<<RESULT>>\n"
-
-
-def test_jinja2_with_code_template():
-    """Test template rendering via the high-level workflow API."""
-    result = CodeExecutor.execute_workflow_code_template(
-        language=CODE_LANGUAGE, code="Hello {{template}}", inputs={"template": "World"}
-    )
-    assert result == {"result": "Hello World"}
-
-
-def test_jinja2_get_runner_script():
-    """Test that runner script contains required placeholders."""
-    runner_script = Jinja2TemplateTransformer.get_runner_script()
-    assert runner_script.count(Jinja2TemplateTransformer._template_b64_placeholder) == 1
-    assert runner_script.count(Jinja2TemplateTransformer._inputs_placeholder) == 1
-    assert runner_script.count(Jinja2TemplateTransformer._result_tag) == 2
-
-
-def test_jinja2_template_with_special_characters():
-    """
-    Test that templates with special characters (quotes, newlines) render correctly.
-    This is a regression test for issue #26818 where textarea pre-fill values
-    containing special characters would break template rendering.
-    """
-    # Template with triple quotes, single quotes, double quotes, and newlines
-    template = """<html>
-<body>
-    <input value="{{ task.get('Task ID', '') }}"/>
-    <textarea>{{ task.get('Issues', 'No issues reported') }}</textarea>
-    <p>Status: "{{ status }}"</p>
-    <pre>'''code block'''</pre>
-</body>
-</html>"""
-    inputs = {"task": {"Task ID": "TASK-123", "Issues": "Line 1\nLine 2\nLine 3"}, "status": "completed"}
-
-    result = CodeExecutor.execute_workflow_code_template(language=CODE_LANGUAGE, code=template, inputs=inputs)
-
-    # Verify the template rendered correctly with all special characters
-    output = result["result"]
-    assert 'value="TASK-123"' in output
-    assert "<textarea>Line 1\nLine 2\nLine 3</textarea>" in output
-    assert 'Status: "completed"' in output
-    assert "'''code block'''" in output
-
-
-def test_jinja2_template_with_html_textarea_prefill():
-    """
-    Specific test for HTML textarea with Jinja2 variable pre-fill.
-    Verifies fix for issue #26818.
-    """
-    template = "<textarea name='notes'>{{ notes }}</textarea>"
-    notes_content = "This is a multi-line note.\nWith special chars: 'single' and \"double\" quotes."
-    inputs = {"notes": notes_content}
-
-    result = CodeExecutor.execute_workflow_code_template(language=CODE_LANGUAGE, code=template, inputs=inputs)
-
-    expected_output = f"<textarea name='notes'>{notes_content}</textarea>"
-    assert result["result"] == expected_output
-
-
-def test_jinja2_assemble_runner_script_encodes_template():
-    """Test that assemble_runner_script properly base64 encodes the template."""
-    template = "Hello {{ name }}!"
-    inputs = {"name": "World"}
-
-    script = Jinja2TemplateTransformer.assemble_runner_script(template, inputs)
-
-    # The template should be base64 encoded in the script
-    template_b64 = base64.b64encode(template.encode("utf-8")).decode("utf-8")
-    assert template_b64 in script
-    # The raw template should NOT appear in the script (it's encoded)
-    assert "Hello {{ name }}!" not in script

From 425457cb16845819d028775d45e3172cf6fa6003 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 11:53:53 +0200
Subject: [PATCH 105/120] test: remove legacy workflow draft variable api test
 (#35226)

---
 .../app/test_workflow_draft_variable.py       | 47 -------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 api/tests/integration_tests/controllers/console/app/test_workflow_draft_variable.py

diff --git a/api/tests/integration_tests/controllers/console/app/test_workflow_draft_variable.py b/api/tests/integration_tests/controllers/console/app/test_workflow_draft_variable.py
deleted file mode 100644
index 038f37af5f..0000000000
--- a/api/tests/integration_tests/controllers/console/app/test_workflow_draft_variable.py
+++ /dev/null
@@ -1,47 +0,0 @@
-import uuid
-from unittest import mock
-
-from controllers.console.app import workflow_draft_variable as draft_variable_api
-from controllers.console.app import wraps
-from factories.variable_factory import build_segment
-from models import App, AppMode
-from models.workflow import WorkflowDraftVariable
-from services.workflow_draft_variable_service import WorkflowDraftVariableList, WorkflowDraftVariableService
-
-
-def _get_mock_srv_class() -> type[WorkflowDraftVariableService]:
-    return mock.create_autospec(WorkflowDraftVariableService)
-
-
-class TestWorkflowDraftNodeVariableListApi:
-    def test_get(self, test_client, auth_header, monkeypatch):
-        srv_class = _get_mock_srv_class()
-        mock_app_model: App = App()
-        mock_app_model.id = str(uuid.uuid4())
-        test_node_id = "test_node_id"
-        mock_app_model.mode = AppMode.ADVANCED_CHAT
-        mock_load_app_model = mock.Mock(return_value=mock_app_model)
-
-        monkeypatch.setattr(draft_variable_api, "WorkflowDraftVariableService", srv_class)
-        monkeypatch.setattr(wraps, "_load_app_model", mock_load_app_model)
-
-        var1 = WorkflowDraftVariable.new_node_variable(
-            app_id="test_app_1",
-            node_id="test_node_1",
-            name="str_var",
-            value=build_segment("str_value"),
-            node_execution_id=str(uuid.uuid4()),
-        )
-        srv_instance = mock.create_autospec(WorkflowDraftVariableService, instance=True)
-        srv_class.return_value = srv_instance
-        srv_instance.list_node_variables.return_value = WorkflowDraftVariableList(variables=[var1])
-
-        response = test_client.get(
-            f"/console/api/apps/{mock_app_model.id}/workflows/draft/nodes/{test_node_id}/variables",
-            headers=auth_header,
-        )
-        assert response.status_code == 200
-        response_dict = response.json
-        assert isinstance(response_dict, dict)
-        assert "items" in response_dict
-        assert len(response_dict["items"]) == 1

From dbceb3067e5c1ce177bf60ec8617b53e2d831ac3 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Wed, 15 Apr 2026 02:57:27 -0700
Subject: [PATCH 106/120] refactor(api): migrate console tag responses from
 marshal_with to BaseModel (#35208)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 api/controllers/console/tag/tags.py           | 56 +++++++++++++------
 .../controllers/console/tag/test_tags.py      | 26 ++++++++-
 2 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/api/controllers/console/tag/tags.py b/api/controllers/console/tag/tags.py
index 39b84d3869..614bf03ea5 100644
--- a/api/controllers/console/tag/tags.py
+++ b/api/controllers/console/tag/tags.py
@@ -1,13 +1,14 @@
 from typing import Literal
 
 from flask import request
-from flask_restx import Namespace, Resource, fields, marshal_with
-from pydantic import BaseModel, Field
+from flask_restx import Resource
+from pydantic import BaseModel, Field, field_validator
 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, edit_permission_required, setup_required
+from fields.base import ResponseModel
 from libs.login import current_account_with_tenant, login_required
 from models.enums import TagType
 from services.tag_service import (
@@ -18,17 +19,6 @@ from services.tag_service import (
     UpdateTagPayload,
 )
 
-dataset_tag_fields = {
-    "id": fields.String,
-    "name": fields.String,
-    "type": fields.String,
-    "binding_count": fields.String,
-}
-
-
-def build_dataset_tag_fields(api_or_ns: Namespace):
-    return api_or_ns.model("DataSetTag", dataset_tag_fields)
-
 
 class TagBasePayload(BaseModel):
     name: str = Field(description="Tag name", min_length=1, max_length=50)
@@ -52,12 +42,36 @@ class TagListQueryParam(BaseModel):
     keyword: str | None = Field(None, description="Search keyword")
 
 
+class TagResponse(ResponseModel):
+    id: str
+    name: str
+    type: str | None = None
+    binding_count: str | None = None
+
+    @field_validator("type", mode="before")
+    @classmethod
+    def normalize_type(cls, value: TagType | str | None) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, TagType):
+            return value.value
+        return value
+
+    @field_validator("binding_count", mode="before")
+    @classmethod
+    def normalize_binding_count(cls, value: int | str | None) -> str | None:
+        if value is None:
+            return None
+        return str(value)
+
+
 register_schema_models(
     console_ns,
     TagBasePayload,
     TagBindingPayload,
     TagBindingRemovePayload,
     TagListQueryParam,
+    TagResponse,
 )
 
 
@@ -69,14 +83,18 @@ class TagListApi(Resource):
     @console_ns.doc(
         params={"type": 'Tag type filter. Can be "knowledge" or "app".', "keyword": "Search keyword for tag name."}
     )
-    @marshal_with(dataset_tag_fields)
+    @console_ns.doc(responses={200: ("Success", [console_ns.models[TagResponse.__name__]])})
     def get(self):
         _, current_tenant_id = current_account_with_tenant()
         raw_args = request.args.to_dict()
         param = TagListQueryParam.model_validate(raw_args)
         tags = TagService.get_tags(param.type, current_tenant_id, param.keyword)
 
-        return tags, 200
+        serialized_tags = [
+            TagResponse.model_validate(tag, from_attributes=True).model_dump(mode="json") for tag in tags
+        ]
+
+        return serialized_tags, 200
 
     @console_ns.expect(console_ns.models[TagBasePayload.__name__])
     @setup_required
@@ -91,7 +109,9 @@ class TagListApi(Resource):
         payload = TagBasePayload.model_validate(console_ns.payload or {})
         tag = TagService.save_tags(SaveTagPayload(name=payload.name, type=payload.type))
 
-        response = {"id": tag.id, "name": tag.name, "type": tag.type, "binding_count": 0}
+        response = TagResponse.model_validate(
+            {"id": tag.id, "name": tag.name, "type": tag.type, "binding_count": 0}
+        ).model_dump(mode="json")
 
         return response, 200
 
@@ -114,7 +134,9 @@ class TagUpdateDeleteApi(Resource):
 
         binding_count = TagService.get_tag_binding_count(tag_id)
 
-        response = {"id": tag.id, "name": tag.name, "type": tag.type, "binding_count": binding_count}
+        response = TagResponse.model_validate(
+            {"id": tag.id, "name": tag.name, "type": tag.type, "binding_count": binding_count}
+        ).model_dump(mode="json")
 
         return response, 200
 
diff --git a/api/tests/unit_tests/controllers/console/tag/test_tags.py b/api/tests/unit_tests/controllers/console/tag/test_tags.py
index e89b89c8b1..2be5a21f28 100644
--- a/api/tests/unit_tests/controllers/console/tag/test_tags.py
+++ b/api/tests/unit_tests/controllers/console/tag/test_tags.py
@@ -1,9 +1,11 @@
+from types import SimpleNamespace
 from unittest.mock import MagicMock, PropertyMock, patch
 
 import pytest
 from flask import Flask
 from werkzeug.exceptions import Forbidden
 
+import controllers.console.tag.tags as module
 from controllers.console import console_ns
 from controllers.console.tag.tags import (
     TagBindingCreateApi,
@@ -83,13 +85,20 @@ class TestTagListApi:
                 ),
                 patch(
                     "controllers.console.tag.tags.TagService.get_tags",
-                    return_value=[{"id": "1", "name": "tag"}],
+                    return_value=[
+                        SimpleNamespace(
+                            id="1",
+                            name="tag",
+                            type=TagType.KNOWLEDGE,
+                            binding_count=1,
+                        )
+                    ],
                 ),
             ):
                 result, status = method(api)
 
         assert status == 200
-        assert isinstance(result, list)
+        assert result == [{"id": "1", "name": "tag", "type": "knowledge", "binding_count": "1"}]
 
     def test_post_success(self, app, admin_user, tag, payload_patch):
         api = TagListApi()
@@ -113,6 +122,7 @@ class TestTagListApi:
 
         assert status == 200
         assert result["name"] == "test-tag"
+        assert result["binding_count"] == "0"
 
     def test_post_forbidden(self, app, readonly_user, payload_patch):
         api = TagListApi()
@@ -158,7 +168,7 @@ class TestTagUpdateDeleteApi:
                 result, status = method(api, "tag-1")
 
         assert status == 200
-        assert result["binding_count"] == 3
+        assert result["binding_count"] == "3"
 
     def test_patch_forbidden(self, app, readonly_user, payload_patch):
         api = TagUpdateDeleteApi()
@@ -277,3 +287,13 @@ class TestTagBindingDeleteApi:
             ):
                 with pytest.raises(Forbidden):
                     method(api)
+
+
+class TestTagResponseModel:
+    def test_tag_response_normalizes_enum_type(self):
+        payload = module.TagResponse.model_validate(
+            {"id": "tag-1", "name": "tag", "type": TagType.KNOWLEDGE, "binding_count": 1}
+        ).model_dump(mode="json")
+
+        assert payload["type"] == "knowledge"
+        assert payload["binding_count"] == "1"

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 107/120] 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 af7d5e60b47503a0c5c3751fa783d63654644a21 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 15 Apr 2026 21:11:20 +0800
Subject: [PATCH 108/120] feat(ui): scaffold @langgenius/dify-ui and migrate
 design tokens (#35256)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 packages/dify-ui/AGENTS.md                    |   27 +
 packages/dify-ui/package.json                 |   24 +
 .../dify-ui/src/cn.ts                         |    0
 packages/dify-ui/src/styles/styles.css        |    3 +
 packages/dify-ui/src/styles/utilities.css     |  272 ++
 packages/dify-ui/src/tailwind-preset.ts       |   87 +
 {web => packages/dify-ui/src}/themes/dark.css |    0
 .../dify-ui/src}/themes/light.css             |    0
 .../src}/themes/tailwind-theme-var-define.ts  |    0
 packages/dify-ui/tsconfig.json                |   18 +
 pnpm-lock.yaml                                |   85 +-
 pnpm-workspace.yaml                           |   85 +-
 web/AGENTS.md                                 |    4 +
 web/README.md                                 |    2 -
 .../plugins/plugin-auth-flow.test.tsx         |    2 +-
 .../plugins/plugin-card-rendering.test.tsx    |    2 +-
 .../tool-browsing-and-filtering.test.tsx      |    2 +-
 .../tools/tool-provider-detail-flow.test.tsx  |    2 +-
 .../(appDetailLayout)/[appId]/layout-main.tsx |    2 +-
 .../time-range-picker/date-picker.tsx         |    4 +-
 .../time-range-picker/range-selector.tsx      |    8 +-
 .../overview/tracing/config-button.tsx        |    2 +-
 .../[appId]/overview/tracing/config-popup.tsx |    8 +-
 .../[appId]/overview/tracing/field.tsx        |    2 +-
 .../[appId]/overview/tracing/panel.tsx        |   12 +-
 .../overview/tracing/provider-panel.tsx       |    6 +-
 .../[appId]/overview/tracing/tracing-icon.tsx |    4 +-
 .../[datasetId]/layout-main.tsx               |    2 +-
 .../(humanInputLayout)/form/[token]/form.tsx  |   14 +-
 .../webapp-reset-password/layout.tsx          |    6 +-
 .../set-password/page.tsx                     |    2 +-
 .../(shareLayout)/webapp-signin/layout.tsx    |    4 +-
 .../webapp-signin/normalForm.tsx              |   24 +-
 web/app/account/(commonLayout)/avatar.tsx     |    4 +-
 web/app/account/oauth/authorize/layout.tsx    |    6 +-
 web/app/activate/activateForm.tsx             |    6 +-
 web/app/activate/page.tsx                     |    2 +-
 .../text-squeeze-fix-verification.spec.tsx    |    2 +-
 .../app-sidebar/app-info/app-info-trigger.tsx |    6 +-
 .../app-sidebar/app-info/app-operations.tsx   |    2 +-
 .../app-sidebar/app-sidebar-dropdown.tsx      |   12 +-
 .../app-sidebar/dataset-info/dropdown.tsx     |    2 +-
 .../app-sidebar/dataset-info/index.tsx        |   12 +-
 .../app-sidebar/dataset-sidebar-dropdown.tsx  |   14 +-
 web/app/components/app-sidebar/index.tsx      |    4 +-
 .../components/app-sidebar/nav-link/index.tsx |    8 +-
 .../components/app-sidebar/toggle-button.tsx  |    2 +-
 .../app/annotation/batch-action.tsx           |    4 +-
 .../csv-uploader.tsx                          |    2 +-
 .../edit-annotation-modal/edit-item/index.tsx |    2 +-
 .../app/annotation/header-opts/index.tsx      |    4 +-
 web/app/components/app/annotation/index.tsx   |    6 +-
 web/app/components/app/annotation/list.tsx    |   18 +-
 .../view-annotation-modal/index.tsx           |   22 +-
 .../access-control-dialog.tsx                 |    4 +-
 .../access-control-item.tsx                   |    4 +-
 .../add-member-or-group-pop.tsx               |    2 +-
 .../app/app-publisher/suggested-action.tsx    |    4 +-
 .../base/feature-panel/index.tsx              |    4 +-
 .../base/operation-btn/index.tsx              |    4 +-
 .../base/warning-mask/has-not-set-api.tsx     |   10 +-
 .../config-prompt/advanced-prompt-input.tsx   |    2 +-
 .../config-prompt/message-type-selector.tsx   |    8 +-
 .../prompt-editor-height-resize-wrap.tsx      |    2 +-
 .../config-prompt/simple-prompt-input.tsx     |    8 +-
 .../config-var/config-modal/field.tsx         |    6 +-
 .../config-var/config-modal/form-fields.tsx   |    2 +-
 .../config-var/config-modal/type-select.tsx   |    2 +-
 .../config-var/config-select/index.tsx        |    8 +-
 .../app/configuration/config-var/index.tsx    |    2 +-
 .../config-var/select-type-item/index.tsx     |    4 +-
 .../app/configuration/config-var/var-item.tsx |   12 +-
 .../app/configuration/config-vision/index.tsx |   12 +-
 .../config-vision/param-config.tsx            |    2 +-
 .../config/agent/agent-setting/item-panel.tsx |    4 +-
 .../config/agent/agent-tools/index.tsx        |    2 +-
 .../agent-tools/setting-built-in-tool.tsx     |    2 +-
 .../config/assistant-type-picker/index.tsx    |   20 +-
 .../config/automatic/idea-output.tsx          |    6 +-
 .../config/automatic/instruction-editor.tsx   |   10 +-
 .../config/automatic/prompt-toast.tsx         |    4 +-
 .../config/automatic/version-selector.tsx     |   10 +-
 .../dataset-config/card-item/index.tsx        |    4 +-
 .../dataset-config/context-var/index.tsx      |    4 +-
 .../dataset-config/context-var/var-picker.tsx |   10 +-
 .../configuration/dataset-config/index.tsx    |    4 +-
 .../params-config/config-content.tsx          |   22 +-
 .../dataset-config/params-config/index.tsx    |    2 +-
 .../dataset-config/select-dataset/index.tsx   |    2 +-
 .../dataset-config/settings-modal/index.tsx   |    2 +-
 .../settings-modal/retrieval-section.tsx      |   10 +-
 .../configuration/debug/chat-user-input.tsx   |    6 +-
 .../app/configuration/debug/index.tsx         |    4 +-
 .../prompt-value-panel/index.tsx              |    2 +-
 .../app/create-app-dialog/app-card/index.tsx  |    4 +-
 .../app/create-app-dialog/app-list/index.tsx  |    6 +-
 .../create-app-dialog/app-list/sidebar.tsx    |    4 +-
 .../components/app/create-app-modal/index.tsx |    4 +-
 .../app/create-from-dsl-modal/index.tsx       |    2 +-
 .../app/create-from-dsl-modal/uploader.tsx    |   10 +-
 .../components/app/duplicate-modal/index.tsx  |    2 +-
 .../components/app/in-site-message/index.tsx  |    2 +-
 .../components/app/log-annotation/index.tsx   |    2 +-
 web/app/components/app/log/list.tsx           |   38 +-
 web/app/components/app/log/model-info.tsx     |    8 +-
 web/app/components/app/log/var-panel.tsx      |   14 +-
 .../app/overview/apikey-info-panel/index.tsx  |    2 +-
 .../app/overview/embedded/index.tsx           |   10 +-
 .../app/overview/settings/index.tsx           |    2 +-
 .../components/app/switch-app-modal/index.tsx |    4 +-
 .../app/text-generate/item/action-groups.tsx  |    6 +-
 .../app/text-generate/item/index.tsx          |   10 +-
 .../app/text-generate/item/workflow-body.tsx  |    2 +-
 .../app/text-generate/saved-items/index.tsx   |    8 +-
 .../saved-items/no-data/index.tsx             |    2 +-
 .../components/app/type-selector/index.tsx    |   10 +-
 web/app/components/app/workflow-log/list.tsx  |   28 +-
 web/app/components/apps/app-card.tsx          |   22 +-
 web/app/components/apps/list.tsx              |   18 +-
 web/app/components/apps/new-app-card.tsx      |   10 +-
 .../components/base/action-button/index.tsx   |    2 +-
 .../base/agent-log-modal/detail.tsx           |    6 +-
 .../components/base/agent-log-modal/index.tsx |    4 +-
 .../base/agent-log-modal/iteration.tsx        |    6 +-
 .../base/agent-log-modal/tool-call.tsx        |    8 +-
 web/app/components/base/alert.tsx             |    4 +-
 web/app/components/base/answer-icon/index.tsx |    2 +-
 .../base/app-icon-picker/ImageInput.tsx       |    6 +-
 .../components/base/app-icon-picker/index.tsx |    2 +-
 .../base/app-icon/__tests__/index.spec.tsx    |    6 +-
 web/app/components/base/app-icon/index.tsx    |   34 +-
 web/app/components/base/app-unavailable.tsx   |    4 +-
 .../base/audio-gallery/AudioPlayer.tsx        |   10 +-
 .../base/auto-height-textarea/index.tsx       |    4 +-
 web/app/components/base/badge.tsx             |    6 +-
 web/app/components/base/badge/index.tsx       |    2 +-
 web/app/components/base/block-input/index.tsx |    4 +-
 web/app/components/base/carousel/index.tsx    |    2 +-
 .../chat/chat-with-history/chat-wrapper.tsx   |    4 +-
 .../chat/chat-with-history/header/index.tsx   |    2 +-
 .../chat-with-history/header/operation.tsx    |   10 +-
 .../base/chat/chat-with-history/index.tsx     |    2 +-
 .../chat-with-history/inputs-form/content.tsx |    2 +-
 .../chat-with-history/inputs-form/index.tsx   |    2 +-
 .../chat/chat-with-history/sidebar/index.tsx  |    4 +-
 .../chat/chat-with-history/sidebar/item.tsx   |    4 +-
 .../chat-with-history/sidebar/operation.tsx   |    8 +-
 .../base/chat/chat/answer/basic-content.tsx   |    2 +-
 .../human-input-content/content-wrapper.tsx   |    4 +-
 .../human-input-content/expiration-time.tsx   |    4 +-
 .../base/chat/chat/answer/index.tsx           |   10 +-
 .../base/chat/chat/answer/operation.tsx       |   14 +-
 .../chat/chat/answer/suggested-questions.tsx  |    4 +-
 .../base/chat/chat/answer/tool-detail.tsx     |   16 +-
 .../chat/chat/answer/workflow-process.tsx     |   16 +-
 .../base/chat/chat/chat-input-area/index.tsx  |    8 +-
 .../chat/chat/chat-input-area/operation.tsx   |    2 +-
 web/app/components/base/chat/chat/index.tsx   |    2 +-
 .../base/chat/chat/loading-anim/index.tsx     |    2 +-
 .../components/base/chat/chat/log/index.tsx   |    2 +-
 .../components/base/chat/chat/question.tsx    |    4 +-
 .../chat/embedded-chatbot/chat-wrapper.tsx    |    6 +-
 .../chat/embedded-chatbot/header/index.tsx    |    4 +-
 .../base/chat/embedded-chatbot/index.tsx      |    2 +-
 .../embedded-chatbot/inputs-form/content.tsx  |    8 +-
 .../embedded-chatbot/inputs-form/index.tsx    |    2 +-
 .../inputs-form/view-form-dropdown.tsx        |    4 +-
 .../components/base/checkbox-list/index.tsx   |    2 +-
 web/app/components/base/checkbox/index.tsx    |    4 +-
 web/app/components/base/chip/index.tsx        |    4 +-
 .../components/base/content-dialog/index.tsx  |    4 +-
 .../components/base/corner-label/index.tsx    |    2 +-
 .../date-and-time-picker/calendar/item.tsx    |    6 +-
 .../common/option-list-item.tsx               |    4 +-
 .../date-picker/footer.tsx                    |    2 +-
 .../date-picker/index.tsx                     |    8 +-
 .../time-picker/index.tsx                     |   10 +-
 .../time-picker/options.tsx                   |    6 +-
 .../year-and-month-picker/options.tsx         |    4 +-
 web/app/components/base/dialog/index.tsx      |    6 +-
 web/app/components/base/divider/index.tsx     |    2 +-
 web/app/components/base/drawer-plus/index.tsx |    8 +-
 web/app/components/base/drawer/index.tsx      |    2 +-
 web/app/components/base/dropdown/index.tsx    |    2 +-
 web/app/components/base/effect/index.tsx      |    2 +-
 .../components/base/emoji-picker/Inner.tsx    |   10 +-
 .../components/base/emoji-picker/index.tsx    |    2 +-
 .../base/encrypted-bottom/index.tsx           |    4 +-
 .../components/base/error-boundary/index.tsx  |    2 +-
 .../conversation-opener/modal.tsx             |    2 +-
 .../new-feature-panel/dialog-wrapper.tsx      |    6 +-
 .../new-feature-panel/feature-bar.tsx         |    2 +-
 .../moderation/moderation-setting-modal.tsx   |    2 +-
 .../text-to-speech/param-config-content.tsx   |   18 +-
 web/app/components/base/file-thumb/index.tsx  |    4 +-
 .../file-from-link-or-local/index.tsx         |    2 +-
 .../base/file-uploader/file-image-render.tsx  |    2 +-
 .../base/file-uploader/file-list-in-log.tsx   |    8 +-
 .../base/file-uploader/file-type-icon.tsx     |    2 +-
 .../file-uploader-in-attachment/file-item.tsx |    8 +-
 .../file-uploader-in-attachment/index.tsx     |    2 +-
 .../file-uploader-in-chat-input/file-item.tsx |    2 +-
 .../file-uploader-in-chat-input/file-list.tsx |    2 +-
 .../file-uploader-in-chat-input/index.tsx     |    2 +-
 .../base/form/components/base/base-field.tsx  |   10 +-
 .../base/form/components/base/base-form.tsx   |    2 +-
 .../base/form/components/field/checkbox.tsx   |    4 +-
 .../form/components/field/custom-select.tsx   |    2 +-
 .../base/form/components/field/file-types.tsx |    2 +-
 .../form/components/field/file-uploader.tsx   |    2 +-
 .../field/input-type-select/index.tsx         |    2 +-
 .../field/input-type-select/trigger.tsx       |    2 +-
 .../field/mixed-variable-text-input/index.tsx |    2 +-
 .../form/components/field/number-input.tsx    |    2 +-
 .../form/components/field/number-slider.tsx   |    4 +-
 .../base/form/components/field/options.tsx    |    2 +-
 .../base/form/components/field/select.tsx     |    2 +-
 .../base/form/components/field/text-area.tsx  |    2 +-
 .../base/form/components/field/text.tsx       |    2 +-
 .../form/components/field/upload-method.tsx   |    2 +-
 .../field/variable-or-constant-input.tsx      |    2 +-
 .../components/field/variable-selector.tsx    |    2 +-
 .../components/base/form/components/label.tsx |    6 +-
 .../fullscreen-modal/__tests__/index.spec.tsx |    4 +-
 .../base/fullscreen-modal/index.tsx           |    8 +-
 web/app/components/base/grid-mask/index.tsx   |    2 +-
 .../icons/src/image/llm/BaichuanTextCn.tsx    |    2 +-
 .../base/icons/src/image/llm/Minimax.tsx      |    2 +-
 .../base/icons/src/image/llm/MinimaxText.tsx  |    2 +-
 .../base/icons/src/image/llm/Tongyi.tsx       |    2 +-
 .../base/icons/src/image/llm/TongyiText.tsx   |    2 +-
 .../base/icons/src/image/llm/TongyiTextCn.tsx |    2 +-
 .../base/icons/src/image/llm/Wxyy.tsx         |    2 +-
 .../base/icons/src/image/llm/WxyyText.tsx     |    2 +-
 .../base/icons/src/image/llm/WxyyTextCn.tsx   |    2 +-
 .../components/base/image-gallery/index.tsx   |    2 +-
 .../image-uploader/chat-image-uploader.tsx    |    4 +-
 .../base/image-uploader/image-list.tsx        |    7 +-
 .../base/inline-delete-confirm/index.tsx      |    4 +-
 .../components/base/input-with-copy/index.tsx |    6 +-
 .../base/input/__tests__/index.spec.tsx       |    6 +-
 web/app/components/base/input/index.tsx       |   16 +-
 .../base/linked-apps-panel/index.tsx          |    6 +-
 web/app/components/base/list-empty/index.tsx  |   14 +-
 web/app/components/base/loading/index.tsx     |    2 +-
 web/app/components/base/logo/dify-logo.tsx    |    2 +-
 .../base/logo/logo-embedded-chat-header.tsx   |    2 +-
 web/app/components/base/logo/logo-site.tsx    |    2 +-
 .../base/markdown-blocks/button.tsx           |    2 +-
 .../base/markdown-blocks/think-block.tsx      |    4 +-
 .../components/with-icon-card-item.tsx        |    4 +-
 .../components/with-icon-card-list.tsx        |    2 +-
 web/app/components/base/markdown/index.tsx    |    2 +-
 web/app/components/base/mermaid/index.tsx     |    4 +-
 .../base/message-log-modal/index.tsx          |    6 +-
 .../components/base/modal-like-wrap/index.tsx |    2 +-
 web/app/components/base/modal/index.css       |    7 -
 web/app/components/base/modal/index.tsx       |    2 +-
 web/app/components/base/modal/modal.tsx       |    2 +-
 web/app/components/base/node-status/index.tsx |    2 +-
 .../base/notion-connector/index.tsx           |    2 +-
 web/app/components/base/notion-icon/index.tsx |    2 +-
 .../page-selector/page-row.tsx                |    2 +-
 .../search-input/index.tsx                    |    4 +-
 web/app/components/base/pagination/index.tsx  |    6 +-
 .../components/base/pagination/pagination.tsx |    2 +-
 web/app/components/base/popover/index.tsx     |    2 +-
 .../base/portal-to-follow-elem/index.tsx      |    2 +-
 .../premium-badge/__tests__/index.spec.tsx    |    2 +-
 .../components/base/premium-badge/index.css   |   10 +-
 .../components/base/premium-badge/index.tsx   |    6 +-
 .../base/progress-bar/progress-circle.tsx     |    2 +-
 .../components/base/prompt-editor/index.tsx   |    2 +-
 .../plugins/current-block/component.tsx       |    6 +-
 .../plugins/draggable-plugin/index.tsx        |    8 +-
 .../plugins/error-message-block/component.tsx |    6 +-
 .../plugins/hitl-input-block/component-ui.tsx |    6 +-
 .../plugins/hitl-input-block/input-field.tsx  |    4 +-
 .../plugins/hitl-input-block/pre-populate.tsx |    4 +-
 .../plugins/hitl-input-block/tag-label.tsx    |    4 +-
 .../plugins/hitl-input-block/type-switch.tsx  |    4 +-
 .../plugins/last-run-block/component.tsx      |    6 +-
 .../prompt-editor/plugins/placeholder.tsx     |    4 +-
 .../plugins/request-url-block/component.tsx   |    6 +-
 .../plugins/shortcuts-popup-plugin/index.tsx  |    2 +-
 .../prompt-editor/prompt-editor-content.tsx   |    2 +-
 web/app/components/base/radio-card/index.tsx  |    6 +-
 .../base/radio-card/simple/index.tsx          |    6 +-
 .../base/radio/component/group/index.tsx      |    2 +-
 .../base/radio/component/radio/index.tsx      |    2 +-
 web/app/components/base/radio/ui.tsx          |    2 +-
 .../components/base/search-input/index.tsx    |    6 +-
 .../__tests__/index.spec.tsx                  |    4 +-
 .../base/segmented-control/index.css          |   36 +-
 .../base/segmented-control/index.tsx          |   26 +-
 web/app/components/base/select/custom.tsx     |    6 +-
 web/app/components/base/select/index.tsx      |   16 +-
 web/app/components/base/select/pure.tsx       |    8 +-
 .../base/simple-pie-chart/index.tsx           |    2 +-
 web/app/components/base/skeleton/index.tsx    |    2 +-
 web/app/components/base/sort/index.tsx        |    4 +-
 web/app/components/base/svg/index.tsx         |    2 +-
 .../base/switch/__tests__/index.spec.tsx      |    6 +-
 web/app/components/base/switch/index.tsx      |   10 +-
 web/app/components/base/switch/skeleton.tsx   |    6 +-
 web/app/components/base/tab-header/index.tsx  |    4 +-
 .../components/base/tab-slider-new/index.tsx  |    4 +-
 .../base/tab-slider-plain/index.tsx           |    4 +-
 web/app/components/base/tab-slider/index.tsx  |    8 +-
 web/app/components/base/tag-input/index.tsx   |    6 +-
 .../components/base/tag-management/filter.tsx |   12 +-
 .../base/tag-management/selector.tsx          |    2 +-
 .../base/tag-management/tag-item-editor.tsx   |    6 +-
 .../base/tag-management/tag-remove-modal.tsx  |    2 +-
 web/app/components/base/tag/index.tsx         |    2 +-
 web/app/components/base/textarea/index.tsx    |    2 +-
 web/app/components/base/theme-switcher.tsx    |    4 +-
 .../components/base/timezone-label/index.tsx  |    4 +-
 web/app/components/base/tooltip/index.tsx     |    4 +-
 .../components/base/ui/alert-dialog/index.tsx |    2 +-
 web/app/components/base/ui/avatar/index.tsx   |    2 +-
 web/app/components/base/ui/button/index.tsx   |    2 +-
 .../components/base/ui/context-menu/index.tsx |    2 +-
 web/app/components/base/ui/dialog/index.tsx   |    2 +-
 .../base/ui/dropdown-menu/index.tsx           |    2 +-
 .../ui/number-field/__tests__/index.spec.tsx  |    4 +-
 .../base/ui/number-field/index.stories.tsx    |    2 +-
 .../components/base/ui/number-field/index.tsx |    6 +-
 web/app/components/base/ui/popover/index.tsx  |    2 +-
 .../ui/scroll-area/__tests__/index.spec.tsx   |    4 +-
 .../base/ui/scroll-area/index.stories.tsx     |   20 +-
 .../components/base/ui/scroll-area/index.tsx  |    4 +-
 web/app/components/base/ui/select/index.tsx   |    4 +-
 web/app/components/base/ui/slider/index.tsx   |    2 +-
 web/app/components/base/ui/toast/index.tsx    |    2 +-
 web/app/components/base/ui/tooltip/index.tsx  |    2 +-
 web/app/components/base/voice-input/index.tsx |    6 +-
 .../billing/annotation-full/index.tsx         |    4 +-
 .../billing/annotation-full/modal.tsx         |    4 +-
 .../billing/apps-full-in-dialog/index.tsx     |    2 +-
 .../billing/header-billing-btn/index.tsx      |    2 +-
 web/app/components/billing/pricing/footer.tsx |    2 +-
 web/app/components/billing/pricing/header.tsx |    2 +-
 .../billing/pricing/plan-switcher/tab.tsx     |    2 +-
 .../pricing/plans/cloud-plan-item/button.tsx  |    4 +-
 .../cloud-plan-item/list/item/tooltip.tsx     |    4 +-
 .../plans/self-hosted-plan-item/button.tsx    |    6 +-
 .../plans/self-hosted-plan-item/index.tsx     |   18 +-
 .../billing/priority-label/index.tsx          |    4 +-
 .../components/billing/progress-bar/index.tsx |   10 +-
 .../trigger-events-limit-modal/index.tsx      |    2 +-
 .../components/billing/usage-info/index.tsx   |    8 +-
 .../billing/vector-space-full/index.tsx       |    4 +-
 .../components/chat-preview-card.tsx          |    2 +-
 .../components/workflow-preview-card.tsx      |    2 +-
 .../custom/custom-web-app-brand/index.tsx     |    2 +-
 .../datasets/common/credential-icon.tsx       |    4 +-
 .../common/document-picker/document-list.tsx  |    2 +-
 .../datasets/common/document-picker/index.tsx |    6 +-
 .../preview-document-picker.tsx               |    8 +-
 .../status-with-action.tsx                    |    4 +-
 .../datasets/common/image-list/index.tsx      |    2 +-
 .../datasets/common/image-previewer/index.tsx |    2 +-
 .../image-uploader-in-chunk/image-input.tsx   |    6 +-
 .../image-uploader-in-chunk/index.tsx         |    2 +-
 .../index.tsx                                 |    2 +-
 .../common/retrieval-param-config/index.tsx   |   14 +-
 .../__tests__/index.spec.tsx                  |    4 +-
 .../create-from-dsl-modal/tab/item.tsx        |    4 +-
 .../create-from-dsl-modal/uploader.tsx        |    8 +-
 .../create-from-pipeline/list/create-card.tsx |    6 +-
 .../details/chunk-structure-card.tsx          |    4 +-
 .../indexing-progress-item.tsx                |    8 +-
 .../empty-dataset-creation-modal/index.tsx    |    2 +-
 .../datasets/create/file-preview/index.tsx    |    2 +-
 .../components/upload-dropzone.tsx            |    4 +-
 .../datasets/create/file-uploader/index.tsx   |    4 +-
 .../create/notion-page-preview/index.tsx      |    2 +-
 .../components/data-source-type-selector.tsx  |    2 +-
 .../datasets/create/step-one/index.tsx        |    2 +-
 .../datasets/create/step-three/index.tsx      |   10 +-
 .../components/indexing-mode-section.tsx      |    2 +-
 .../step-two/components/option-card.tsx       |    8 +-
 .../step-two/components/preview-panel.tsx     |    2 +-
 .../datasets/create/step-two/index.tsx        |    4 +-
 .../create/step-two/language-select/index.tsx |    4 +-
 .../datasets/create/stepper/step.tsx          |    4 +-
 .../create/stop-embedding-modal/index.tsx     |    2 +-
 .../datasets/create/top-bar/index.tsx         |    6 +-
 .../website/base/checkbox-with-label.tsx      |    2 +-
 .../website/base/crawled-result-item.tsx      |    2 +-
 .../create/website/base/crawled-result.tsx    |    2 +-
 .../create/website/base/error-message.tsx     |    4 +-
 .../datasets/create/website/base/field.tsx    |    2 +-
 .../datasets/create/website/base/header.tsx   |    2 +-
 .../create/website/base/options-wrap.tsx      |    6 +-
 .../create/website/firecrawl/options.tsx      |    2 +-
 .../datasets/create/website/index.tsx         |   16 +-
 .../create/website/jina-reader/options.tsx    |    4 +-
 .../datasets/create/website/no-data.tsx       |    2 +-
 .../datasets/create/website/preview.tsx       |    4 +-
 .../create/website/watercrawl/options.tsx     |    4 +-
 .../document-list/components/sort-header.tsx  |    4 +-
 .../document-list/components/utils.tsx        |    2 +-
 .../documents/components/operations.tsx       |    2 +-
 .../data-source-options/datasource-icon.tsx   |    2 +-
 .../data-source-options/option-card.tsx       |    6 +-
 .../base/credential-selector/trigger.tsx      |    4 +-
 .../local-file/components/file-list-item.tsx  |    2 +-
 .../local-file/components/upload-dropzone.tsx |    4 +-
 .../online-drive/connect/index.tsx            |    2 +-
 .../file-list/header/breadcrumbs/bucket.tsx   |    4 +-
 .../file-list/header/breadcrumbs/drive.tsx    |    2 +-
 .../header/breadcrumbs/dropdown/index.tsx     |    2 +-
 .../file-list/header/breadcrumbs/item.tsx     |    4 +-
 .../file-list/list/empty-folder.tsx           |    2 +-
 .../file-list/list/empty-search-result.tsx    |    2 +-
 .../online-drive/file-list/list/file-icon.tsx |    2 +-
 .../online-drive/file-list/list/index.tsx     |    2 +-
 .../online-drive/file-list/list/item.tsx      |    6 +-
 .../base/checkbox-with-label.tsx              |    2 +-
 .../base/crawled-result-item.tsx              |    2 +-
 .../website-crawl/base/crawled-result.tsx     |    4 +-
 .../website-crawl/base/crawling.tsx           |    6 +-
 .../website-crawl/base/error-message.tsx      |    2 +-
 .../website-crawl/base/options/index.tsx      |    2 +-
 .../processing/embedding-process/index.tsx    |    2 +-
 .../create-from-pipeline/processing/index.tsx |    6 +-
 .../create-from-pipeline/step-indicator.tsx   |    2 +-
 .../detail/batch-modal/csv-uploader.tsx       |    2 +-
 .../detail/completed/child-segment-detail.tsx |    8 +-
 .../detail/completed/child-segment-list.tsx   |   10 +-
 .../detail/completed/common/add-another.tsx   |    2 +-
 .../detail/completed/common/batch-action.tsx  |    6 +-
 .../detail/completed/common/chunk-content.tsx |    6 +-
 .../detail/completed/common/drawer.tsx        |    2 +-
 .../completed/common/full-screen-drawer.tsx   |    4 +-
 .../detail/completed/common/keywords.tsx      |    2 +-
 .../completed/common/segment-index-tag.tsx    |    2 +-
 .../detail/completed/common/summary-label.tsx |    4 +-
 .../detail/completed/common/summary-text.tsx  |    4 +-
 .../documents/detail/completed/common/tag.tsx |    2 +-
 .../components/segment-list-content.tsx       |    2 +-
 .../detail/completed/new-child-segment.tsx    |   12 +-
 .../completed/segment-card/chunk-content.tsx  |    6 +-
 .../detail/completed/segment-card/index.tsx   |    4 +-
 .../detail/completed/segment-detail.tsx       |    8 +-
 .../documents/detail/document-title.tsx       |    2 +-
 .../embedding/components/progress-bar.tsx     |    2 +-
 .../datasets/documents/detail/index.tsx       |    8 +-
 .../metadata/components/doc-type-selector.tsx |    2 +-
 .../detail/metadata/components/field-info.tsx |    2 +-
 .../datasets/documents/detail/new-segment.tsx |   12 +-
 .../documents/detail/segment-add/index.tsx    |   22 +-
 .../datasets/documents/status-item/index.tsx  |    2 +-
 .../external-api/external-api-modal/Form.tsx  |    4 +-
 .../external-api/external-api-panel/index.tsx |    2 +-
 .../create/RetrievalSettings.tsx              |    2 +-
 .../datasets/extra-info/api-access/card.tsx   |    4 +-
 .../datasets/extra-info/api-access/index.tsx  |    6 +-
 .../datasets/extra-info/service-api/index.tsx |    4 +-
 .../formatted-text/flavours/edit-slice.tsx    |    2 +-
 .../formatted-text/flavours/shared.tsx        |    8 +-
 .../datasets/formatted-text/formatted.tsx     |    2 +-
 .../components/chunk-detail-modal.tsx         |   12 +-
 .../hit-testing/components/empty-records.tsx  |    4 +-
 .../datasets/hit-testing/components/mask.tsx  |    2 +-
 .../components/query-input/index.tsx          |    4 +-
 .../components/query-input/textarea.tsx       |   12 +-
 .../hit-testing/components/records.tsx        |    8 +-
 .../components/result-item-external.tsx       |    6 +-
 .../components/result-item-meta.tsx           |    2 +-
 .../hit-testing/components/result-item.tsx    |    4 +-
 .../datasets/hit-testing/components/score.tsx |    4 +-
 .../components/datasets/hit-testing/index.tsx |    8 +-
 .../components/dataset-card-footer.tsx        |    4 +-
 .../components/dataset-card-header.tsx        |   20 +-
 .../dataset-card/components/description.tsx   |    4 +-
 .../components/operations-dropdown.tsx        |    4 +-
 .../list/dataset-card/components/tag-area.tsx |    4 +-
 .../datasets/metadata/add-metadata-button.tsx |    2 +-
 .../datasets/metadata/base/date-picker.tsx    |    4 +-
 .../metadata/edit-metadata-batch/add-row.tsx  |    2 +-
 .../metadata/edit-metadata-batch/edit-row.tsx |    4 +-
 .../edit-metadata-batch/input-combined.tsx    |    6 +-
 .../input-has-set-multiple-value.tsx          |    8 +-
 .../metadata/edit-metadata-batch/label.tsx    |    4 +-
 .../dataset-metadata-drawer.tsx               |    4 +-
 .../metadata/metadata-document/index.tsx      |    2 +-
 .../metadata/metadata-document/info-group.tsx |    8 +-
 .../components/datasets/preview/container.tsx |    6 +-
 .../components/datasets/preview/header.tsx    |    4 +-
 .../datasets/rename-modal/index.tsx           |    2 +-
 .../datasets/settings/index-method/index.tsx  |    2 +-
 .../datasets/settings/option-card.tsx         |    6 +-
 .../settings/permission-selector/index.tsx    |   18 +-
 .../permission-selector/member-item.tsx       |    8 +-
 web/app/components/develop/code.tsx           |   12 +-
 web/app/components/develop/doc.tsx            |    4 +-
 web/app/components/develop/md.tsx             |    4 +-
 web/app/components/develop/tag.tsx            |    4 +-
 web/app/components/develop/toc-panel.tsx      |   10 +-
 web/app/components/explore/app-card/index.tsx |    2 +-
 web/app/components/explore/app-list/index.tsx |    2 +-
 .../components/explore/banner/banner-item.tsx |   18 +-
 .../explore/banner/indicator-button.tsx       |    4 +-
 web/app/components/explore/category.tsx       |    4 +-
 .../explore/item-operation/index.tsx          |    4 +-
 .../explore/sidebar/app-nav-item/index.tsx    |    6 +-
 web/app/components/explore/sidebar/index.tsx  |   18 +-
 .../explore/sidebar/no-apps/index.tsx         |    6 +-
 .../explore/try-app/__tests__/index.spec.tsx  |    2 +-
 .../explore/try-app/app-info/index.tsx        |    4 +-
 .../components/explore/try-app/app/chat.tsx   |    4 +-
 .../explore/try-app/app/text-generation.tsx   |    8 +-
 web/app/components/explore/try-app/index.tsx  |    2 +-
 .../try-app/preview/flow-app-preview.tsx      |    2 +-
 .../actions/__tests__/knowledge.spec.ts       |    2 +-
 .../components/goto-anything/actions/app.tsx  |    2 +-
 .../goto-anything/actions/knowledge.tsx       |    2 +-
 .../header/account-dropdown/index.tsx         |   16 +-
 .../account-dropdown/menu-item-content.tsx    |    2 +-
 .../workplace-selector/index.tsx              |   16 +-
 .../Integrations-page/index.tsx               |    6 +-
 .../api-based-extension-page/empty.tsx        |    6 +-
 .../header/account-setting/collapse/index.tsx |    4 +-
 .../data-source-page-new/card.tsx             |    2 +-
 .../install-from-marketplace.tsx              |    8 +-
 .../data-source-page-new/item.tsx             |    2 +-
 .../header/account-setting/index.tsx          |    2 +-
 .../edit-workspace-modal/index.tsx            |    2 +-
 .../members-page/invite-modal/index.tsx       |    2 +-
 .../invite-modal/role-selector.tsx            |   10 +-
 .../members-page/operation/index.tsx          |   18 +-
 .../operation/transfer-ownership.tsx          |    8 +-
 .../member-selector.tsx                       |   14 +-
 .../header/account-setting/menu-dialog.tsx    |    6 +-
 .../model-provider-page/index.tsx             |   18 +-
 .../install-from-marketplace.tsx              |    8 +-
 .../add-credential-in-load-balancing.tsx      |    4 +-
 .../model-auth/add-custom-model.tsx           |    2 +-
 .../model-auth/authorized/credential-item.tsx |    6 +-
 .../model-auth/authorized/index.tsx           |    2 +-
 .../model-auth/config-model.tsx               |    2 +-
 .../manage-custom-model-credentials.tsx       |    2 +-
 .../switch-credential-in-load-balancing.tsx   |    2 +-
 .../model-provider-page/model-badge/index.tsx |    4 +-
 .../model-provider-page/model-icon/index.tsx  |    2 +-
 .../model-provider-page/model-modal/Form.tsx  |   22 +-
 .../model-provider-page/model-name/index.tsx  |    4 +-
 .../agent-model-trigger.tsx                   |    4 +-
 .../model-parameter-modal/index.tsx           |   16 +-
 .../model-parameter-modal/parameter-item.tsx  |   14 +-
 .../model-parameter-modal/trigger.tsx         |   10 +-
 .../model-selector/feature-icon.tsx           |    2 +-
 .../model-selector/model-selector-trigger.tsx |    8 +-
 .../model-selector/popup-item.tsx             |   14 +-
 .../model-selector/popup.tsx                  |    6 +-
 .../provider-added-card/index.tsx             |   18 +-
 .../model-auth-dropdown/api-key-section.tsx   |    2 +-
 .../credits-exhausted-alert.tsx               |   14 +-
 .../usage-priority-section.tsx                |   10 +-
 .../provider-added-card/model-list-item.tsx   |    6 +-
 .../model-load-balancing-configs.tsx          |    6 +-
 .../model-load-balancing-modal.tsx            |    2 +-
 .../provider-added-card/priority-selector.tsx |    2 +-
 .../provider-card-actions.tsx                 |    2 +-
 .../provider-added-card/quota-panel.tsx       |   10 +-
 .../provider-added-card/system-quota-card.tsx |    2 +-
 .../provider-icon/index.tsx                   |    4 +-
 web/app/components/header/app-back/index.tsx  |    6 +-
 .../components/header/app-selector/index.tsx  |   12 +-
 .../components/header/explore-nav/index.tsx   |    2 +-
 web/app/components/header/header-wrapper.tsx  |    4 +-
 web/app/components/header/indicator/index.tsx |    2 +-
 web/app/components/header/nav/index.tsx       |    4 +-
 .../header/nav/nav-selector/index.tsx         |   14 +-
 .../components/header/plugins-nav/index.tsx   |    6 +-
 web/app/components/header/tools-nav/index.tsx |    2 +-
 .../plugins/base/badges/icon-with-tooltip.tsx |    2 +-
 .../plugins/base/deprecation-notice.tsx       |    6 +-
 .../plugins/base/key-value-item.tsx           |    6 +-
 .../card/base/__tests__/placeholder.spec.tsx  |    2 +-
 .../plugins/card/base/card-icon.tsx           |    2 +-
 .../plugins/card/base/description.tsx         |    2 +-
 .../components/plugins/card/base/org-info.tsx |    8 +-
 .../plugins/card/base/placeholder.tsx         |    4 +-
 web/app/components/plugins/card/index.tsx     |    6 +-
 .../install-plugin/base/loading-error.tsx     |    8 +-
 .../install-plugin/install-bundle/index.tsx   |    6 +-
 .../install-from-github/index.tsx             |    8 +-
 .../install-from-local-package/index.tsx      |    6 +-
 .../install-from-marketplace/index.tsx        |    6 +-
 .../plugins/marketplace/empty/index.tsx       |   16 +-
 .../plugins/marketplace/list/index.tsx        |    2 +-
 .../marketplace/list/list-with-collection.tsx |    4 +-
 .../marketplace/plugin-type-switch.tsx        |    4 +-
 .../search-box/__tests__/index.spec.tsx       |    2 +-
 .../plugins/marketplace/search-box/index.tsx  |   10 +-
 .../search-box/trigger/marketplace.tsx        |    6 +-
 .../search-box/trigger/tool-selector.tsx      |   10 +-
 .../sticky-search-and-switch-wrapper.tsx      |    2 +-
 .../__tests__/add-oauth-button.spec.tsx       |    2 +-
 .../authorize/add-oauth-button.tsx            |    2 +-
 .../plugins/plugin-auth/authorize/index.tsx   |    4 +-
 .../authorized-in-data-source-node.tsx        |    2 +-
 .../plugin-auth/authorized-in-node.tsx        |    2 +-
 .../plugins/plugin-auth/authorized/index.tsx  |    2 +-
 .../plugins/plugin-auth/authorized/item.tsx   |    4 +-
 .../plugin-auth/plugin-auth-in-agent.tsx      |    2 +-
 .../plugins/plugin-auth/plugin-auth.tsx       |    2 +-
 .../__tests__/detail-header.spec.tsx          |    2 +-
 .../__tests__/endpoint-list.spec.tsx          |    2 +-
 .../__tests__/index.spec.tsx                  |    2 +-
 .../__tests__/operation-dropdown.spec.tsx     |    2 +-
 .../__tests__/strategy-detail.spec.tsx        |    2 +-
 .../__tests__/strategy-item.spec.tsx          |    2 +-
 .../__tests__/app-trigger.spec.tsx            |    2 +-
 .../app-selector/app-inputs-panel.tsx         |    4 +-
 .../app-selector/app-trigger.tsx              |    6 +-
 .../detail-header/index.tsx                   |    2 +-
 .../plugin-detail-panel/endpoint-card.tsx     |    2 +-
 .../plugin-detail-panel/endpoint-list.tsx     |   10 +-
 .../plugin-detail-panel/endpoint-modal.tsx    |    2 +-
 .../plugins/plugin-detail-panel/index.tsx     |    4 +-
 .../model-selector/index.tsx                  |    4 +-
 .../model-selector/llm-params-panel.tsx       |    4 +-
 .../multiple-tool-selector/index.tsx          |   10 +-
 .../operation-dropdown.tsx                    |    2 +-
 .../plugin-detail-panel/strategy-detail.tsx   |   18 +-
 .../plugin-detail-panel/strategy-item.tsx     |    6 +-
 .../subscription-list/create/index.tsx        |    2 +-
 .../subscription-list/list-view.tsx           |    2 +-
 .../subscription-list/log-viewer.tsx          |   10 +-
 .../subscription-list/selector-entry.tsx      |    4 +-
 .../subscription-list/selector-view.tsx       |    6 +-
 .../subscription-list/subscription-card.tsx   |    6 +-
 .../__tests__/tool-credentials-form.spec.tsx  |    2 +-
 .../components/reasoning-config-form.tsx      |   12 +-
 .../components/tool-credentials-form.tsx      |    2 +-
 .../tool-selector/components/tool-item.tsx    |    2 +-
 .../tool-selector/components/tool-trigger.tsx |    6 +-
 .../tool-selector/index.tsx                   |    4 +-
 .../__tests__/event-detail-drawer.spec.tsx    |    2 +-
 .../trigger/__tests__/event-list.spec.tsx     |    2 +-
 .../trigger/event-detail-drawer.tsx           |   18 +-
 .../trigger/event-list.tsx                    |   10 +-
 .../components/plugins/plugin-item/index.tsx  |   18 +-
 .../__tests__/category-filter.spec.tsx        |    2 +-
 .../filter-management/category-filter.tsx     |    8 +-
 .../filter-management/tag-filter.tsx          |   12 +-
 .../components/plugins/plugin-page/index.tsx  |    2 +-
 .../plugin-page/install-plugin-dropdown.tsx   |    2 +-
 .../components/task-status-indicator.tsx      |    4 +-
 web/app/components/plugins/provider-card.tsx  |    2 +-
 .../readme-panel/__tests__/entrance.spec.tsx  |    2 +-
 .../plugins/readme-panel/entrance.tsx         |    6 +-
 .../components/plugins/readme-panel/index.tsx |    6 +-
 .../auto-update-setting/index.tsx             |    6 +-
 .../no-data-placeholder.tsx                   |    4 +-
 .../no-plugin-selected.tsx                    |    2 +-
 .../auto-update-setting/plugins-picker.tsx    |    2 +-
 .../auto-update-setting/plugins-selected.tsx  |    2 +-
 .../auto-update-setting/tool-picker.tsx       |    2 +-
 .../plugins/reference-setting-modal/label.tsx |    4 +-
 .../update-plugin/from-market-place.tsx       |    2 +-
 .../update-plugin/plugin-version-picker.tsx   |    8 +-
 .../components/chunk-card-list/index.tsx      |    2 +-
 .../panel/input-field/editor/index.tsx        |    6 +-
 .../input-field/field-list/field-item.tsx     |    8 +-
 .../field-list/field-list-container.tsx       |    2 +-
 .../panel/input-field/field-list/index.tsx    |    2 +-
 .../components/panel/input-field/index.tsx    |    2 +-
 .../panel/input-field/preview/index.tsx       |    2 +-
 .../data-source-options/option-card.tsx       |    6 +-
 .../test-run/preparation/step-indicator.tsx   |    2 +-
 .../panel/test-run/result/tabs/tab.tsx        |    4 +-
 .../__tests__/run-mode.spec.tsx               |    2 +-
 .../publisher/__tests__/popup.spec.tsx        |    2 +-
 .../rag-pipeline-header/publisher/popup.tsx   |    2 +-
 .../rag-pipeline-header/run-mode.tsx          |    4 +-
 .../share/text-generation/index.tsx           |    2 +-
 .../share/text-generation/info-modal.tsx      |    6 +-
 .../share/text-generation/menu-dropdown.tsx   |   10 +-
 .../run-batch/csv-reader/index.tsx            |    4 +-
 .../share/text-generation/run-batch/index.tsx |    2 +-
 .../run-batch/res-download/index.tsx          |    2 +-
 .../share/text-generation/run-once/index.tsx  |    4 +-
 .../text-generation-result-panel.tsx          |   14 +-
 .../text-generation-sidebar.tsx               |    8 +-
 .../config-credentials.tsx                    |    2 +-
 .../edit-custom-collection-modal/index.tsx    |    2 +-
 web/app/components/tools/labels/filter.tsx    |   10 +-
 web/app/components/tools/labels/selector.tsx  |    6 +-
 .../components/tools/mcp/detail/content.tsx   |    2 +-
 .../tools/mcp/detail/list-loading.tsx         |    2 +-
 .../tools/mcp/detail/operation-dropdown.tsx   |    6 +-
 .../tools/mcp/detail/provider-detail.tsx      |    4 +-
 .../components/tools/mcp/detail/tool-item.tsx |   12 +-
 .../components/tools/mcp/headers-input.tsx    |    2 +-
 web/app/components/tools/mcp/index.tsx        |    4 +-
 .../components/tools/mcp/mcp-server-modal.tsx |    2 +-
 .../components/tools/mcp/mcp-service-card.tsx |    2 +-
 web/app/components/tools/mcp/modal.tsx        |    2 +-
 .../components/tools/mcp/provider-card.tsx    |    2 +-
 .../mcp/sections/authentication-section.tsx   |    4 +-
 web/app/components/tools/provider-list.tsx    |    8 +-
 web/app/components/tools/provider/detail.tsx  |    4 +-
 web/app/components/tools/provider/empty.tsx   |    4 +-
 .../components/tools/provider/tool-item.tsx   |    6 +-
 .../setting/build-in/config-credentials.tsx   |    2 +-
 .../tools/workflow-tool/configure-button.tsx  |    2 +-
 .../workflow-tool/confirm-modal/index.tsx     |    2 +-
 .../components/tools/workflow-tool/index.tsx  |    2 +-
 .../tools/workflow-tool/method-selector.tsx   |   12 +-
 .../workflow-header/features-trigger.tsx      |    2 +-
 .../start-node-selection-panel.tsx            |    4 +-
 web/app/components/workflow/block-icon.tsx    |    2 +-
 .../block-selector/all-start-blocks.tsx       |    2 +-
 .../workflow/block-selector/all-tools.tsx     |    2 +-
 .../workflow/block-selector/data-sources.tsx  |    6 +-
 .../workflow/block-selector/index-bar.tsx     |    4 +-
 .../market-place-plugin/action.tsx            |    2 +-
 .../market-place-plugin/item.tsx              |   12 +-
 .../market-place-plugin/list.tsx              |   10 +-
 .../rag-tool-recommendations/list.tsx         |    2 +-
 .../workflow/block-selector/tabs.tsx          |    4 +-
 .../workflow/block-selector/tool-picker.tsx   |    2 +-
 .../block-selector/tool/action-item.tsx       |    8 +-
 .../workflow/block-selector/tool/tool.tsx     |    6 +-
 .../workflow/block-selector/tools.tsx         |    2 +-
 .../trigger-plugin/action-item.tsx            |    8 +-
 .../block-selector/trigger-plugin/item.tsx    |    6 +-
 .../block-selector/view-type-select.tsx       |    4 +-
 web/app/components/workflow/custom-edge.tsx   |    2 +-
 .../workflow/dsl-export-confirm-modal.tsx     |    4 +-
 .../workflow/header/chat-variable-button.tsx  |    2 +-
 .../workflow/header/checklist/index.tsx       |   14 +-
 .../header/checklist/item-indicator.tsx       |    2 +-
 .../workflow/header/checklist/node-group.tsx  |    8 +-
 .../header/checklist/plugin-group.tsx         |    2 +-
 .../components/workflow/header/env-button.tsx |    2 +-
 .../header/global-variable-button.tsx         |    2 +-
 .../workflow/header/header-in-restoring.tsx   |    2 +-
 .../workflow/header/run-and-history.tsx       |    2 +-
 .../components/workflow/header/run-mode.tsx   |    6 +-
 .../header/scroll-to-selected-node-button.tsx |    4 +-
 .../components/workflow/header/undo-redo.tsx  |    6 +-
 .../header/version-history-button.tsx         |    2 +-
 .../workflow/header/view-history.tsx          |   14 +-
 .../workflow/header/view-workflow-history.tsx |   10 +-
 web/app/components/workflow/index.tsx         |    2 +-
 .../nodes/_base/components/add-button.tsx     |    2 +-
 .../components/agent-strategy-selector.tsx    |    4 +-
 .../components/before-run-form/form-item.tsx  |   10 +-
 .../_base/components/before-run-form/form.tsx |    2 +-
 .../components/before-run-form/index.tsx      |    2 +-
 .../components/code-generator-button.tsx      |    2 +-
 .../nodes/_base/components/collapse/index.tsx |    2 +-
 .../nodes/_base/components/editor/base.tsx    |    4 +-
 .../code-editor/editor-support-vars.tsx       |    2 +-
 .../components/editor/code-editor/index.tsx   |    4 +-
 .../error-handle/error-handle-on-node.tsx     |    4 +-
 .../error-handle/fail-branch-card.tsx         |    6 +-
 .../workflow/nodes/_base/components/field.tsx |    6 +-
 .../nodes/_base/components/file-type-item.tsx |    8 +-
 .../_base/components/form-input-boolean.tsx   |   10 +-
 .../components/form-input-item.sections.tsx   |    6 +-
 .../_base/components/form-input-item.tsx      |    2 +-
 .../components/form-input-type-switch.tsx     |    4 +-
 .../workflow/nodes/_base/components/group.tsx |    4 +-
 .../components/input-support-select-var.tsx   |    4 +-
 .../components/install-plugin-button.tsx      |    2 +-
 .../nodes/_base/components/layout/box.tsx     |    2 +-
 .../_base/components/layout/field-title.tsx   |    6 +-
 .../nodes/_base/components/layout/group.tsx   |    2 +-
 .../components/list-no-data-placeholder.tsx   |    2 +-
 .../nodes/_base/components/memory-config.tsx  |    6 +-
 .../mixed-variable-text-input/index.tsx       |    2 +-
 .../_base/components/next-step/container.tsx  |    6 +-
 .../nodes/_base/components/next-step/item.tsx |    2 +-
 .../nodes/_base/components/node-handle.tsx    |    8 +-
 .../nodes/_base/components/node-resizer.tsx   |    4 +-
 .../_base/components/node-status-icon.tsx     |    2 +-
 .../nodes/_base/components/option-card.tsx    |    6 +-
 .../nodes/_base/components/output-vars.tsx    |    6 +-
 .../nodes/_base/components/prompt/editor.tsx  |   12 +-
 .../readonly-input-with-select-var.tsx        |    4 +-
 .../_base/components/retry/retry-on-node.tsx  |    4 +-
 .../nodes/_base/components/selector.tsx       |    8 +-
 .../nodes/_base/components/setting-item.tsx   |    8 +-
 .../workflow/nodes/_base/components/split.tsx |    2 +-
 .../components/support-var-input/index.tsx    |    2 +-
 .../components/switch-plugin-version.tsx      |    2 +-
 .../object-child-tree-panel/picker/field.tsx  |    6 +-
 .../object-child-tree-panel/picker/index.tsx  |    6 +-
 .../object-child-tree-panel/show/field.tsx    |   14 +-
 .../tree-indent-line.tsx                      |    4 +-
 .../_base/components/variable/var-list.tsx    |    4 +-
 .../variable/var-reference-picker.trigger.tsx |    4 +-
 .../variable/var-reference-picker.tsx         |    2 +-
 .../variable/var-reference-vars.tsx           |   24 +-
 .../components/variable/var-type-picker.tsx   |    4 +-
 .../variable-label/base/variable-icon.tsx     |    2 +-
 .../variable-label/base/variable-label.tsx    |    6 +-
 .../variable-label/base/variable-name.tsx     |    4 +-
 .../variable-icon-with-color.tsx              |    2 +-
 .../variable-label-in-editor.tsx              |    2 +-
 .../variable-label/variable-label-in-node.tsx |    2 +-
 .../variable-label/variable-label-in-text.tsx |    2 +-
 .../_base/components/workflow-panel/index.tsx |   20 +-
 .../workflow-panel/trigger-subscription.tsx   |    2 +-
 .../components/workflow/nodes/_base/node.tsx  |   10 +-
 .../nodes/agent/components/tool-icon.tsx      |    6 +-
 .../components/operation-selector.tsx         |   10 +-
 .../nodes/data-source-empty/index.tsx         |    2 +-
 .../nodes/http/components/api-input.tsx       |    6 +-
 .../http/components/authorization/index.tsx   |    2 +-
 .../components/authorization/radio-group.tsx  |    6 +-
 .../nodes/http/components/edit-body/index.tsx |    4 +-
 .../key-value/key-value-edit/index.tsx        |    6 +-
 .../key-value/key-value-edit/input-item.tsx   |    4 +-
 .../key-value/key-value-edit/item.tsx         |    4 +-
 .../components/workflow/nodes/http/panel.tsx  |    6 +-
 .../components/button-style-dropdown.tsx      |    2 +-
 .../delivery-method/email-configure-modal.tsx |    4 +-
 .../components/delivery-method/index.tsx      |    2 +-
 .../delivery-method/mail-body-input.tsx       |    2 +-
 .../delivery-method/method-item.tsx           |    6 +-
 .../delivery-method/method-selector.tsx       |   46 +-
 .../delivery-method/recipient/email-input.tsx |    4 +-
 .../delivery-method/recipient/email-item.tsx  |    4 +-
 .../delivery-method/recipient/index.tsx       |   12 +-
 .../delivery-method/recipient/member-list.tsx |    8 +-
 .../recipient/member-selector.tsx             |    2 +-
 .../delivery-method/test-email-sender.tsx     |    2 +-
 .../delivery-method/upgrade-modal.tsx         |    2 +-
 .../human-input/components/form-content.tsx   |   10 +-
 .../nodes/human-input/components/timeout.tsx  |    8 +-
 .../components/variable-in-markdown.tsx       |    2 +-
 .../workflow/nodes/human-input/node.tsx       |   14 +-
 .../workflow/nodes/human-input/panel.tsx      |    4 +-
 .../condition-list/condition-item.tsx         |   10 +-
 .../condition-list/condition-operator.tsx     |    2 +-
 .../components/condition-list/index.tsx       |   10 +-
 .../components/condition-number-input.tsx     |    2 +-
 .../if-else/components/condition-wrap.tsx     |    4 +-
 .../workflow/nodes/iteration/add-block.tsx    |    8 +-
 .../workflow/nodes/iteration/node.tsx         |    2 +-
 .../components/chunk-structure/hooks.tsx      |    2 +-
 .../chunk-structure/instruction/index.tsx     |   10 +-
 .../components/index-method.tsx               |    4 +-
 .../knowledge-base/components/option-card.tsx |   10 +-
 .../search-method-option.tsx                  |    8 +-
 .../workflow/nodes/knowledge-base/node.tsx    |    8 +-
 .../condition-list/condition-date.tsx         |    6 +-
 .../condition-list/condition-item.tsx         |    8 +-
 .../condition-list/condition-operator.tsx     |    2 +-
 .../condition-list/condition-value-method.tsx |    2 +-
 .../metadata/condition-list/index.tsx         |   10 +-
 .../components/metadata/metadata-icon.tsx     |    2 +-
 .../components/retrieval-config.tsx           |    2 +-
 .../components/extract-input.tsx              |    4 +-
 .../components/filter-condition.tsx           |    2 +-
 .../list-operator/components/limit-config.tsx |    2 +-
 .../components/sub-variable-picker.tsx        |    6 +-
 .../nodes/llm/components/config-prompt.tsx    |    4 +-
 .../json-schema-config-modal/code-editor.tsx  |    6 +-
 .../error-message.tsx                         |    4 +-
 .../json-importer.tsx                         |    2 +-
 .../json-schema-config.tsx                    |    2 +-
 .../json-schema-generator/index.tsx           |    2 +-
 .../schema-editor.tsx                         |    4 +-
 .../edit-card/auto-width-input.tsx            |    6 +-
 .../visual-editor/edit-card/index.tsx         |    8 +-
 .../visual-editor/edit-card/type-selector.tsx |    4 +-
 .../visual-editor/index.tsx                   |    2 +-
 .../visual-editor/schema-node.tsx             |    2 +-
 .../llm/components/prompt-generator-btn.tsx   |    2 +-
 .../nodes/llm/components/structure-output.tsx |    4 +-
 .../workflow/nodes/loop/add-block.tsx         |   10 +-
 .../condition-list/condition-item.tsx         |    8 +-
 .../condition-list/condition-operator.tsx     |    2 +-
 .../loop/components/condition-list/index.tsx  |   10 +-
 .../components/condition-number-input.tsx     |    2 +-
 .../nodes/loop/components/condition-wrap.tsx  |    4 +-
 .../loop/components/loop-variables/empty.tsx  |    2 +-
 .../components/loop-variables/form-item.tsx   |    2 +-
 .../workflow/nodes/loop/insert-block.tsx      |    4 +-
 .../components/workflow/nodes/loop/node.tsx   |    2 +-
 .../extract-parameter/import-from-tool.tsx    |    2 +-
 .../components/class-list.tsx                 |    8 +-
 .../nodes/start/components/var-item.tsx       |    2 +-
 .../nodes/start/components/var-list.tsx       |    6 +-
 .../nodes/tool/components/input-var-list.tsx  |    2 +-
 .../mixed-variable-text-input/index.tsx       |    2 +-
 .../mixed-variable-text-input/placeholder.tsx |    6 +-
 .../components/workflow/nodes/tool/node.tsx   |    8 +-
 .../components/generic-table.tsx              |   16 +-
 .../components/paragraph-input.tsx            |    8 +-
 .../components/add-variable/index.tsx         |    2 +-
 .../components/node-group-item.tsx            |    8 +-
 .../components/node-variable-item.tsx         |    4 +-
 .../nodes/variable-assigner/panel.tsx         |    2 +-
 .../components/workflow/note-node/index.tsx   |    4 +-
 .../plugins/link-editor-plugin/component.tsx  |    2 +-
 .../note-editor/toolbar/color-picker.tsx      |    6 +-
 .../note-node/note-editor/toolbar/command.tsx |    2 +-
 .../toolbar/font-size-selector.tsx            |    6 +-
 .../note-editor/toolbar/operator.tsx          |    2 +-
 .../workflow/operator/add-block.tsx           |    2 +-
 .../components/workflow/operator/control.tsx  |    2 +-
 .../workflow/operator/more-actions.tsx        |   14 +-
 .../workflow/operator/zoom-in-out.tsx         |    8 +-
 .../components/workflow/panel-contextmenu.tsx |    2 +-
 .../components/array-bool-list.tsx            |    2 +-
 .../components/variable-item.tsx              |   10 +-
 .../components/variable-modal.sections.tsx    |    2 +-
 .../components/variable-modal.tsx             |    2 +-
 .../components/variable-type-select.tsx       |   12 +-
 .../panel/chat-variable-panel/index.tsx       |   26 +-
 .../conversation-variable-modal.tsx           |   18 +-
 .../panel/debug-and-preview/index.tsx         |    8 +-
 .../panel/debug-and-preview/user-input.tsx    |    4 +-
 .../workflow/panel/env-panel/env-item.tsx     |   14 +-
 .../workflow/panel/env-panel/index.tsx        |    8 +-
 .../panel/env-panel/variable-modal.tsx        |    8 +-
 .../panel/global-variable-panel/index.tsx     |    8 +-
 .../panel/global-variable-panel/item.tsx      |    8 +-
 web/app/components/workflow/panel/index.tsx   |    4 +-
 .../context-menu/menu-item.tsx                |    6 +-
 .../version-history-panel/filter/index.tsx    |    4 +-
 .../version-history-panel/loading/item.tsx    |    6 +-
 .../version-history-item.tsx                  |   16 +-
 .../workflow/panel/workflow-preview.tsx       |    2 +-
 .../workflow/run/agent-log/agent-log-item.tsx |    4 +-
 .../run/agent-log/agent-log-trigger.tsx       |   10 +-
 web/app/components/workflow/run/index.tsx     |    8 +-
 .../iteration-log/iteration-result-panel.tsx  |    6 +-
 .../run/loop-log/loop-result-panel.tsx        |    4 +-
 .../workflow/run/loop-result-panel.tsx        |   10 +-
 web/app/components/workflow/run/node.tsx      |   16 +-
 .../workflow/run/status-container.tsx         |    6 +-
 web/app/components/workflow/run/status.tsx    |   18 +-
 .../components/workflow/run/tracing-panel.tsx |    6 +-
 .../components/workflow/shortcuts-name.tsx    |    4 +-
 .../components/workflow/simple-node/index.tsx |    6 +-
 .../variable-inspect/display-content.tsx      |   10 +-
 .../workflow/variable-inspect/empty.tsx       |    4 +-
 .../workflow/variable-inspect/group.tsx       |    2 +-
 .../workflow/variable-inspect/index.tsx       |    2 +-
 .../variable-inspect/large-data-alert.tsx     |    6 +-
 .../workflow/variable-inspect/left.tsx        |    2 +-
 .../workflow/variable-inspect/listening.tsx   |    2 +-
 .../workflow/variable-inspect/panel.tsx       |   10 +-
 .../workflow/variable-inspect/right.tsx       |   12 +-
 .../workflow/variable-inspect/trigger.tsx     |   10 +-
 .../value-content-sections.tsx                |    4 +-
 .../variable-inspect/value-content.tsx        |    2 +-
 .../components/error-handle-on-node.tsx       |    4 +-
 .../components/node-handle.tsx                |    6 +-
 .../components/nodes/base.tsx                 |   12 +-
 .../components/nodes/iteration/node.tsx       |    2 +-
 .../components/nodes/loop/node.tsx            |    2 +-
 .../components/note-node/index.tsx            |    2 +-
 .../components/zoom-in-out.tsx                |    6 +-
 .../workflow/workflow-preview/index.tsx       |    2 +-
 web/app/education-apply/role-selector.tsx     |    6 +-
 .../forgot-password/ChangePasswordForm.tsx    |    6 +-
 web/app/forgot-password/page.tsx              |    2 +-
 web/app/init/page.tsx                         |    2 +-
 web/app/install/installForm.tsx               |    6 +-
 web/app/install/page.tsx                      |    2 +-
 web/app/reset-password/layout.tsx             |    6 +-
 web/app/reset-password/set-password/page.tsx  |    2 +-
 web/app/signin/components/social-auth.tsx     |    2 +-
 web/app/signin/layout.tsx                     |    6 +-
 web/app/signin/normal-form.tsx                |    2 +-
 web/app/signin/split.tsx                      |    2 +-
 web/app/signup/layout.tsx                     |    6 +-
 web/app/signup/set-password/page.tsx          |    2 +-
 web/app/styles/globals.css                    |  849 +------
 web/app/styles/markdown.css                   |    3 +-
 web/docs/test.md                              |    2 -
 web/eslint-suppressions.json                  | 2200 -----------------
 web/package.json                              |    3 +-
 web/scripts/gen-icons.mjs                     |    2 +-
 web/tailwind-common-config.ts                 |   86 +-
 web/themes/markdown-light.css                 |   44 -
 .../{markdown-dark.css => markdown.css}       |    1 +
 990 files changed, 3065 insertions(+), 5786 deletions(-)
 create mode 100644 packages/dify-ui/AGENTS.md
 create mode 100644 packages/dify-ui/package.json
 rename web/utils/classnames.ts => packages/dify-ui/src/cn.ts (100%)
 create mode 100644 packages/dify-ui/src/styles/styles.css
 create mode 100644 packages/dify-ui/src/styles/utilities.css
 create mode 100644 packages/dify-ui/src/tailwind-preset.ts
 rename {web => packages/dify-ui/src}/themes/dark.css (100%)
 rename {web => packages/dify-ui/src}/themes/light.css (100%)
 rename {web => packages/dify-ui/src}/themes/tailwind-theme-var-define.ts (100%)
 create mode 100644 packages/dify-ui/tsconfig.json
 delete mode 100644 web/app/components/base/modal/index.css
 delete mode 100644 web/themes/markdown-light.css
 rename web/themes/{markdown-dark.css => markdown.css} (98%)

diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md
new file mode 100644
index 0000000000..6875f8b4e9
--- /dev/null
+++ b/packages/dify-ui/AGENTS.md
@@ -0,0 +1,27 @@
+# @langgenius/dify-ui
+
+This package provides shared design tokens (colors, shadows, typography), the `cn()` utility, and a Tailwind CSS preset consumed by `web/`.
+
+## Border Radius: Figma Token → Tailwind Class Mapping
+
+The Figma design system uses `--radius/*` tokens whose scale is **offset by one step** from Tailwind CSS v4 defaults. When translating Figma specs to code, always use this mapping — never use `radius-*` as a CSS class, and never extend `borderRadius` in the preset.
+
+| Figma Token | Value | Tailwind Class |
+|---|---|---|
+| `--radius/2xs` | 2px | `rounded-xs` |
+| `--radius/xs` | 4px | `rounded-sm` |
+| `--radius/sm` | 6px | `rounded-md` |
+| `--radius/md` | 8px | `rounded-lg` |
+| `--radius/lg` | 10px | `rounded-[10px]` |
+| `--radius/xl` | 12px | `rounded-xl` |
+| `--radius/2xl` | 16px | `rounded-2xl` |
+| `--radius/3xl` | 20px | `rounded-[20px]` |
+| `--radius/6xl` | 28px | `rounded-[28px]` |
+| `--radius/full` | 999px | `rounded-full` |
+
+### Rules
+
+- **Do not** add custom `borderRadius` values to `tailwind-preset.ts`. We use Tailwind v4 defaults and arbitrary values (`rounded-[Npx]`) for sizes without a standard equivalent.
+- **Do not** use `radius-*` as CSS class names. The old `@utility radius-*` definitions have been removed.
+- When the Figma MCP returns `rounded-[var(--radius/sm, 6px)]`, convert it to the standard Tailwind class from the table above (e.g. `rounded-md`).
+- For values without a standard Tailwind equivalent (10px, 20px, 28px), use arbitrary values like `rounded-[10px]`.
diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json
new file mode 100644
index 0000000000..d8314a6be3
--- /dev/null
+++ b/packages/dify-ui/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@langgenius/dify-ui",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./styles.css": "./src/styles/styles.css",
+    "./tailwind-preset": {
+      "import": "./src/tailwind-preset.ts",
+      "types": "./src/tailwind-preset.ts"
+    },
+    "./cn": {
+      "import": "./src/cn.ts",
+      "types": "./src/cn.ts"
+    }
+  },
+  "dependencies": {
+    "clsx": "catalog:",
+    "tailwind-merge": "catalog:"
+  },
+  "devDependencies": {
+    "tailwindcss": "catalog:"
+  }
+}
diff --git a/web/utils/classnames.ts b/packages/dify-ui/src/cn.ts
similarity index 100%
rename from web/utils/classnames.ts
rename to packages/dify-ui/src/cn.ts
diff --git a/packages/dify-ui/src/styles/styles.css b/packages/dify-ui/src/styles/styles.css
new file mode 100644
index 0000000000..a712e9c5db
--- /dev/null
+++ b/packages/dify-ui/src/styles/styles.css
@@ -0,0 +1,3 @@
+@import '../themes/light.css' layer(base);
+@import '../themes/dark.css' layer(base);
+@import './utilities.css';
diff --git a/packages/dify-ui/src/styles/utilities.css b/packages/dify-ui/src/styles/utilities.css
new file mode 100644
index 0000000000..69b15d4c10
--- /dev/null
+++ b/packages/dify-ui/src/styles/utilities.css
@@ -0,0 +1,272 @@
+@utility system-kbd {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@utility system-2xs-regular-uppercase {
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 12px;
+}
+
+@utility system-2xs-regular {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 12px;
+}
+
+@utility system-2xs-medium {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px;
+}
+
+@utility system-2xs-medium-uppercase {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 12px;
+}
+
+@utility system-2xs-semibold-uppercase {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 12px;
+}
+
+@utility system-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+@utility system-xs-regular-uppercase {
+  font-size: 12px;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 16px;
+}
+
+@utility system-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@utility system-xs-medium-uppercase {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 16px;
+}
+
+@utility system-xs-semibold {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+@utility system-xs-semibold-uppercase {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 16px;
+}
+
+@utility system-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+@utility system-sm-medium {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@utility system-sm-medium-uppercase {
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 16px;
+}
+
+@utility system-sm-semibold {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+@utility system-sm-semibold-uppercase {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 16px;
+}
+
+@utility system-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+@utility system-md-medium {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+@utility system-md-semibold {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+@utility system-md-semibold-uppercase {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 20px;
+}
+
+@utility system-xl-medium {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+@utility system-xl-semibold {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+@utility code-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+@utility code-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+@utility code-sm-semibold {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+@utility body-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+@utility body-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@utility body-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+@utility body-sm-medium {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@utility body-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+@utility body-md-medium {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+@utility body-lg-regular {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+@utility body-2xl-regular {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+@utility title-xs-semi-bold {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+@utility title-sm-semi-bold {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+}
+
+@utility title-md-semi-bold {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+@utility title-lg-bold {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+@utility title-xl-semi-bold {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+@utility title-2xl-semi-bold {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+@utility title-3xl-semi-bold {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+@utility title-3xl-bold {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+@utility title-4xl-semi-bold {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+@utility title-5xl-bold {
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.2;
+}
diff --git a/packages/dify-ui/src/tailwind-preset.ts b/packages/dify-ui/src/tailwind-preset.ts
new file mode 100644
index 0000000000..2dbf4781b0
--- /dev/null
+++ b/packages/dify-ui/src/tailwind-preset.ts
@@ -0,0 +1,87 @@
+import tailwindThemeVarDefine from './themes/tailwind-theme-var-define'
+
+const difyUIPreset = {
+  theme: {
+    extend: {
+      colors: {
+        gray: {
+          25: '#fcfcfd',
+          50: '#f9fafb',
+          100: '#f2f4f7',
+          200: '#eaecf0',
+          300: '#d0d5dd',
+          400: '#98a2b3',
+          500: '#667085',
+          600: '#344054',
+          700: '#475467',
+          800: '#1d2939',
+          900: '#101828',
+        },
+        primary: {
+          25: '#f5f8ff',
+          50: '#eff4ff',
+          100: '#d1e0ff',
+          200: '#b2ccff',
+          300: '#84adff',
+          400: '#528bff',
+          500: '#2970ff',
+          600: '#155eef',
+          700: '#004eeb',
+          800: '#0040c1',
+          900: '#00359e',
+        },
+        blue: {
+          500: '#E1EFFE',
+        },
+        green: {
+          50: '#F3FAF7',
+          100: '#DEF7EC',
+          800: '#03543F',
+        },
+        yellow: {
+          100: '#FDF6B2',
+          800: '#723B13',
+        },
+        purple: {
+          50: '#F6F5FF',
+          200: '#DCD7FE',
+        },
+        indigo: {
+          25: '#F5F8FF',
+          50: '#EEF4FF',
+          100: '#E0EAFF',
+          300: '#A4BCFD',
+          400: '#8098F9',
+          600: '#444CE7',
+          800: '#2D31A6',
+        },
+        ...tailwindThemeVarDefine,
+      },
+      boxShadow: {
+        'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+        'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)',
+        'sm-no-bottom': '0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10)',
+        'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)',
+        'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
+        'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)',
+        '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)',
+        '3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)',
+        'status-indicator-green-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-success-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
+        'status-indicator-warning-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-warning-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
+        'status-indicator-red-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
+        'status-indicator-blue-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
+        'status-indicator-gray-shadow': '0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
+      },
+      opacity: {
+        2: '0.02',
+        8: '0.08',
+      },
+      fontSize: {
+        '2xs': '0.625rem',
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default difyUIPreset
diff --git a/web/themes/dark.css b/packages/dify-ui/src/themes/dark.css
similarity index 100%
rename from web/themes/dark.css
rename to packages/dify-ui/src/themes/dark.css
diff --git a/web/themes/light.css b/packages/dify-ui/src/themes/light.css
similarity index 100%
rename from web/themes/light.css
rename to packages/dify-ui/src/themes/light.css
diff --git a/web/themes/tailwind-theme-var-define.ts b/packages/dify-ui/src/themes/tailwind-theme-var-define.ts
similarity index 100%
rename from web/themes/tailwind-theme-var-define.ts
rename to packages/dify-ui/src/themes/tailwind-theme-var-define.ts
diff --git a/packages/dify-ui/tsconfig.json b/packages/dify-ui/tsconfig.json
new file mode 100644
index 0000000000..3e912baba0
--- /dev/null
+++ b/packages/dify-ui/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4444981601..094faf78cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -599,6 +599,19 @@ importers:
         specifier: 'catalog:'
         version: 0.1.16(@types/node@25.6.0)(@voidzero-dev/vite-plus-core@0.1.16(@types/node@25.6.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3))(happy-dom@20.9.0)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
 
+  packages/dify-ui:
+    dependencies:
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 3.5.0
+    devDependencies:
+      tailwindcss:
+        specifier: 'catalog:'
+        version: 4.2.2
+
   packages/iconify-collections:
     devDependencies:
       iconify-import-svg:
@@ -739,9 +752,6 @@ importers:
       client-only:
         specifier: 'catalog:'
         version: 0.0.1
-      clsx:
-        specifier: 'catalog:'
-        version: 2.1.1
       cmdk:
         specifier: 'catalog:'
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -922,9 +932,6 @@ importers:
       string-ts:
         specifier: 'catalog:'
         version: 2.3.1
-      tailwind-merge:
-        specifier: 'catalog:'
-        version: 3.5.0
       tldts:
         specifier: 'catalog:'
         version: 7.0.28
@@ -971,6 +978,9 @@ importers:
       '@iconify-json/ri':
         specifier: 'catalog:'
         version: 1.2.10
+      '@langgenius/dify-ui':
+        specifier: workspace:*
+        version: link:../packages/dify-ui
       '@mdx-js/loader':
         specifier: 'catalog:'
         version: 3.1.1(webpack@5.105.4(uglify-js@3.19.3))
@@ -1126,7 +1136,7 @@ importers:
         version: 4.12.12
       knip:
         specifier: 'catalog:'
-        version: 6.4.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+        version: 6.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
       postcss:
         specifier: 'catalog:'
         version: 8.5.9
@@ -1553,14 +1563,17 @@ packages:
     peerDependencies:
       tailwindcss: '*'
 
-  '@emnapi/core@1.9.1':
-    resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
 
   '@emnapi/runtime@1.9.1':
     resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==}
 
-  '@emnapi/wasi-threads@1.2.0':
-    resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
   '@emoji-mart/data@1.2.1':
     resolution: {integrity: sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==}
@@ -8007,6 +8020,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@2.1.0:
     resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
     engines: {node: ^20.0.0 || >=22.0.0}
@@ -9153,9 +9170,9 @@ snapshots:
       '@iconify/utils': 3.1.0
       tailwindcss: 4.2.2
 
-  '@emnapi/core@1.9.1':
+  '@emnapi/core@1.9.2':
     dependencies:
-      '@emnapi/wasi-threads': 1.2.0
+      '@emnapi/wasi-threads': 1.2.1
       tslib: 2.8.1
     optional: true
 
@@ -9164,7 +9181,12 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/wasi-threads@1.2.0':
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -9944,10 +9966,10 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
     dependencies:
-      '@emnapi/core': 1.9.1
-      '@emnapi/runtime': 1.9.1
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -10120,9 +10142,9 @@ snapshots:
   '@oxc-parser/binding-openharmony-arm64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.121.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@oxc-parser/binding-wasm32-wasi@0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -10191,9 +10213,9 @@ snapshots:
   '@oxc-resolver/binding-openharmony-arm64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -11758,7 +11780,7 @@ snapshots:
       debug: 4.4.3(supports-color@8.1.1)
       minimatch: 10.2.4
       semver: 7.7.4
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
       ts-api-utils: 2.5.0(typescript@6.0.2)
       typescript: 6.0.2
     transitivePeerDependencies:
@@ -14140,7 +14162,7 @@ snapshots:
 
   khroma@2.1.0: {}
 
-  knip@6.4.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1):
+  knip@6.4.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
     dependencies:
       '@nodelib/fs.walk': 1.2.8
       fast-glob: 3.3.3
@@ -14148,8 +14170,8 @@ snapshots:
       get-tsconfig: 4.13.7
       jiti: 2.6.1
       minimist: 1.2.8
-      oxc-parser: 0.121.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
-      oxc-resolver: 11.19.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      oxc-parser: 0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      oxc-resolver: 11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
       picocolors: 1.1.1
       picomatch: 4.0.4
       smol-toml: 1.6.1
@@ -15056,7 +15078,7 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  oxc-parser@0.121.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1):
+  oxc-parser@0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
     dependencies:
       '@oxc-project/types': 0.121.0
     optionalDependencies:
@@ -15076,7 +15098,7 @@ snapshots:
       '@oxc-parser/binding-linux-x64-gnu': 0.121.0
       '@oxc-parser/binding-linux-x64-musl': 0.121.0
       '@oxc-parser/binding-openharmony-arm64': 0.121.0
-      '@oxc-parser/binding-wasm32-wasi': 0.121.0(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      '@oxc-parser/binding-wasm32-wasi': 0.121.0(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
       '@oxc-parser/binding-win32-arm64-msvc': 0.121.0
       '@oxc-parser/binding-win32-ia32-msvc': 0.121.0
       '@oxc-parser/binding-win32-x64-msvc': 0.121.0
@@ -15084,7 +15106,7 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
-  oxc-resolver@11.19.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1):
+  oxc-resolver@11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
     optionalDependencies:
       '@oxc-resolver/binding-android-arm-eabi': 11.19.1
       '@oxc-resolver/binding-android-arm64': 11.19.1
@@ -15102,7 +15124,7 @@ snapshots:
       '@oxc-resolver/binding-linux-x64-gnu': 11.19.1
       '@oxc-resolver/binding-linux-x64-musl': 11.19.1
       '@oxc-resolver/binding-openharmony-arm64': 11.19.1
-      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
       '@oxc-resolver/binding-win32-arm64-msvc': 11.19.1
       '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
       '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
@@ -16241,6 +16263,11 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
   tinypool@2.1.0: {}
 
   tinyrainbow@2.0.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 98f1fcfa86..cd72c6bc0e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,57 +1,22 @@
-catalogMode: prefer
-trustPolicy: no-downgrade
-trustPolicyExclude:
-  - chokidar@4.0.3
-  - reselect@5.1.1
-  - semver@6.3.1
-blockExoticSubdeps: true
-strictDepBuilds: true
-allowBuilds:
-  "@parcel/watcher": false
-  canvas: false
-  esbuild: false
-  sharp: false
 packages:
   - web
   - e2e
   - sdks/nodejs-client
   - packages/*
-overrides:
-  "@lexical/code": npm:lexical-code-no-prism@0.41.0
-  "@monaco-editor/loader": 1.7.0
-  brace-expansion@>=2.0.0 <2.0.3: 2.0.3
-  canvas: ^3.2.2
-  dompurify@>=3.1.3 <=3.3.1: 3.3.2
-  esbuild@<0.27.2: 0.27.2
-  flatted@<=3.4.1: 3.4.2
-  glob@>=10.2.0 <10.5.0: 11.1.0
-  is-core-module: npm:@nolyfill/is-core-module@^1.0.39
-  lodash@>=4.0.0 <= 4.17.23: 4.18.0
-  lodash-es@>=4.0.0 <= 4.17.23: 4.18.0
-  picomatch@<2.3.2: 2.3.2
-  picomatch@>=4.0.0 <4.0.4: 4.0.4
-  rollup@>=4.0.0 <4.59.0: 4.59.0
-  safe-buffer: ^5.2.1
-  safer-buffer: npm:@nolyfill/safer-buffer@^1.0.44
-  side-channel: npm:@nolyfill/side-channel@^1.0.44
-  smol-toml@<1.6.1: 1.6.1
-  solid-js: 1.9.11
-  string-width: ~8.2.0
-  svgo@>=3.0.0 <3.3.3: 3.3.3
-  tar@<=7.5.10: 7.5.11
-  undici@>=7.0.0 <7.24.0: 7.24.0
-  vite: npm:@voidzero-dev/vite-plus-core@0.1.16
-  vitest: npm:@voidzero-dev/vite-plus-test@0.1.16
-  yaml@>=2.0.0 <2.8.3: 2.8.3
-  yauzl@<3.2.1: 3.2.1
+allowBuilds:
+  "@parcel/watcher": false
+  canvas: false
+  esbuild: false
+  sharp: false
+blockExoticSubdeps: true
 catalog:
   "@amplitude/analytics-browser": 2.39.0
   "@amplitude/plugin-session-replay-browser": 1.27.7
   "@antfu/eslint-config": 8.2.0
   "@base-ui/react": 1.4.0
-  "@date-fns/tz": 1.4.1
   "@chromatic-com/storybook": 5.1.2
   "@cucumber/cucumber": 12.8.0
+  "@date-fns/tz": 1.4.1
   "@egoist/tailwindcss-icons": 1.9.2
   "@emoji-mart/data": 1.2.1
   "@eslint-react/eslint-plugin": 3.0.0
@@ -107,6 +72,7 @@ catalog:
   "@testing-library/jest-dom": 6.9.1
   "@testing-library/react": 16.3.2
   "@testing-library/user-event": 14.6.1
+  '@tsdown/css': 0.21.8
   "@tsslint/cli": 3.0.3
   "@tsslint/compat-eslint": 3.0.3
   "@tsslint/config": 3.0.3
@@ -230,3 +196,38 @@ catalog:
   zod: 4.3.6
   zundo: 2.3.0
   zustand: 5.0.12
+catalogMode: prefer
+overrides:
+  "@lexical/code": npm:lexical-code-no-prism@0.41.0
+  "@monaco-editor/loader": 1.7.0
+  brace-expansion@>=2.0.0 <2.0.3: 2.0.3
+  canvas: ^3.2.2
+  dompurify@>=3.1.3 <=3.3.1: 3.3.2
+  esbuild@<0.27.2: 0.27.2
+  flatted@<=3.4.1: 3.4.2
+  glob@>=10.2.0 <10.5.0: 11.1.0
+  is-core-module: npm:@nolyfill/is-core-module@^1.0.39
+  lodash-es@>=4.0.0 <= 4.17.23: 4.18.0
+  lodash@>=4.0.0 <= 4.17.23: 4.18.0
+  picomatch@<2.3.2: 2.3.2
+  picomatch@>=4.0.0 <4.0.4: 4.0.4
+  rollup@>=4.0.0 <4.59.0: 4.59.0
+  safe-buffer: ^5.2.1
+  safer-buffer: npm:@nolyfill/safer-buffer@^1.0.44
+  side-channel: npm:@nolyfill/side-channel@^1.0.44
+  smol-toml@<1.6.1: 1.6.1
+  solid-js: 1.9.11
+  string-width: ~8.2.0
+  svgo@>=3.0.0 <3.3.3: 3.3.3
+  tar@<=7.5.10: 7.5.11
+  undici@>=7.0.0 <7.24.0: 7.24.0
+  vite: npm:@voidzero-dev/vite-plus-core@0.1.16
+  vitest: npm:@voidzero-dev/vite-plus-test@0.1.16
+  yaml@>=2.0.0 <2.8.3: 2.8.3
+  yauzl@<3.2.1: 3.2.1
+strictDepBuilds: true
+trustPolicy: no-downgrade
+trustPolicyExclude:
+  - chokidar@4.0.3
+  - reselect@5.1.1
+  - semver@6.3.1
diff --git a/web/AGENTS.md b/web/AGENTS.md
index 97f74441a7..4a705bf4b8 100644
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -12,6 +12,10 @@
 
 - `frontend-query-mutation` is the source of truth for Dify frontend contracts, query and mutation call-site patterns, conditional queries, invalidation, and mutation error handling.
 
+## Design Token Mapping
+
+- When translating Figma designs to code, read `../packages/dify-ui/AGENTS.md` for the Figma `--radius/*` token to Tailwind `rounded-*` class mapping. The two scales are offset by one step.
+
 ## Automated Test Generation
 
 - Use `./docs/test.md` as the canonical instruction set for generating frontend automated tests.
diff --git a/web/README.md b/web/README.md
index 2d69a94dbd..382c804264 100644
--- a/web/README.md
+++ b/web/README.md
@@ -136,7 +136,6 @@ pnpm -C web test
 
 If you are not familiar with writing tests, refer to:
 
-- [classnames.spec.ts] - Utility function test example
 - [index.spec.tsx] - Component test example
 
 ### Analyze Component Complexity
@@ -166,7 +165,6 @@ The Dify community can be found on [Discord community], where you can ask questi
 [Storybook]: https://storybook.js.org
 [Vite+]: https://viteplus.dev
 [Vitest]: https://vitest.dev
-[classnames.spec.ts]: ./utils/classnames.spec.ts
 [index.spec.tsx]: ./app/components/base/button/index.spec.tsx
 [pnpm]: https://pnpm.io
 [vinext]: https://github.com/cloudflare/vinext
diff --git a/web/__tests__/plugins/plugin-auth-flow.test.tsx b/web/__tests__/plugins/plugin-auth-flow.test.tsx
index a2ec8703ca..c4d28e3f34 100644
--- a/web/__tests__/plugins/plugin-auth-flow.test.tsx
+++ b/web/__tests__/plugins/plugin-auth-flow.test.tsx
@@ -31,7 +31,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/__tests__/plugins/plugin-card-rendering.test.tsx b/web/__tests__/plugins/plugin-card-rendering.test.tsx
index 5bd7f0c8bf..fb0163f344 100644
--- a/web/__tests__/plugins/plugin-card-rendering.test.tsx
+++ b/web/__tests__/plugins/plugin-card-rendering.test.tsx
@@ -32,7 +32,7 @@ vi.mock('@/types/app', async () => {
   return vi.importActual<typeof import('@/types/app')>('@/types/app')
 })
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(a => typeof a === 'string' && a).join(' '),
 }))
 
diff --git a/web/__tests__/tools/tool-browsing-and-filtering.test.tsx b/web/__tests__/tools/tool-browsing-and-filtering.test.tsx
index dbefb1fdc3..aa8f59ca31 100644
--- a/web/__tests__/tools/tool-browsing-and-filtering.test.tsx
+++ b/web/__tests__/tools/tool-browsing-and-filtering.test.tsx
@@ -226,7 +226,7 @@ vi.mock('@/app/components/tools/mcp', () => ({
   default: () => <div data-testid="mcp-list">MCP List</div>,
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/__tests__/tools/tool-provider-detail-flow.test.tsx b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
index ce5ffe531e..c52871c946 100644
--- a/web/__tests__/tools/tool-provider-detail-flow.test.tsx
+++ b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
@@ -112,7 +112,7 @@ vi.mock('@/service/use-tools', () => ({
   useInvalidateAllWorkflowTools: () => vi.fn(),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index d3f15bdf46..8a1a6fd131 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDashboard2Fill,
   RiDashboard2Line,
@@ -28,7 +29,6 @@ import dynamic from '@/next/dynamic'
 import { usePathname, useRouter } from '@/next/navigation'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
 const TagManagementModal = dynamic(() => import('@/app/components/base/tag-management'), {
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index 368c3dcfc3..dbc429cbdc 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -2,6 +2,7 @@
 import type { Dayjs } from 'dayjs'
 import type { FC } from 'react'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { noop } from 'es-toolkit/function'
@@ -9,7 +10,6 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import Picker from '@/app/components/base/date-and-time-picker/date-picker'
 import { useLocale } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { formatToLocalTime } from '@/utils/format'
 
 type Props = {
@@ -30,7 +30,7 @@ const DatePicker: FC<Props> = ({
 
   const renderDate = useCallback(({ value, handleClickTrigger, isOpen }: TriggerProps) => {
     return (
-      <div className={cn('system-sm-regular flex h-7 cursor-pointer items-center rounded-lg px-1 text-components-input-text-filled hover:bg-state-base-hover', isOpen && 'bg-state-base-hover')} onClick={handleClickTrigger}>
+      <div className={cn('flex h-7 cursor-pointer items-center rounded-lg px-1 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover', isOpen && 'bg-state-base-hover')} onClick={handleClickTrigger}>
         {value ? formatToLocalTime(value, locale, 'MMM D') : ''}
       </div>
     )
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index a4bf025139..a89b77e9e3 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import type { PeriodParamsWithTimeRange, TimeRange } from '@/app/components/app/overview/app-chart'
 import type { Item } from '@/app/components/base/select'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SimpleSelect } from '@/app/components/base/select'
-import { cn } from '@/utils/classnames'
 
 const today = dayjs()
 
@@ -44,7 +44,7 @@ const RangeSelector: FC<Props> = ({
 
   const renderTrigger = useCallback((item: Item | null, isOpen: boolean) => {
     return (
-      <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pl-3 pr-2', isOpen && 'bg-state-base-hover-alt')}>
+      <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pr-2 pl-3', isOpen && 'bg-state-base-hover-alt')}>
         <div className="system-sm-regular text-components-input-text-filled">{isCustomRange ? t('filter.period.custom', { ns: 'appLog' }) : item?.name}</div>
         <RiArrowDownSLine className={cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')} />
       </div>
@@ -57,13 +57,13 @@ const RangeSelector: FC<Props> = ({
         {selected && (
           <span
             className={cn(
-              'absolute left-2 top-[9px] flex items-center  text-text-accent',
+              'absolute top-[9px] left-2 flex items-center text-text-accent',
             )}
           >
             <RiCheckLine className="h-4 w-4" aria-hidden="true" />
           </span>
         )}
-        <span className={cn('system-md-regular block truncate')}>{item.name}</span>
+        <span className={cn('block truncate system-md-regular')}>{item.name}</span>
       </>
     )
   }, [])
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
index 17ca5d78cf..29de1a1eae 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { PopupProps } from './config-popup'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import {
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import ConfigPopup from './config-popup'
 
 type Props = {
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
index 138d238b47..15b81e1ad6 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC, JSX } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -9,7 +10,6 @@ import Divider from '@/app/components/base/divider'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import ProviderConfigModal from './provider-config-modal'
 import ProviderPanel from './provider-panel'
 import TracingIcon from './tracing-icon'
@@ -331,7 +331,7 @@ const ConfigPopup: FC<PopupProps> = ({
         </div>
         <div className="flex items-center">
           <Indicator color={enabled ? 'green' : 'gray'} />
-          <div className={cn('system-xs-semibold-uppercase ml-1 text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
+          <div className={cn('ml-1 system-xs-semibold-uppercase text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
             {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`, { ns: 'app' })}
           </div>
           {!readOnly && (
@@ -350,7 +350,7 @@ const ConfigPopup: FC<PopupProps> = ({
         </div>
       </div>
 
-      <div className="system-xs-regular mt-2 text-text-tertiary">
+      <div className="mt-2 system-xs-regular text-text-tertiary">
         {t(`${I18N_PREFIX}.tracingDescription`, { ns: 'app' })}
       </div>
       <Divider className="my-3" />
@@ -379,7 +379,7 @@ const ConfigPopup: FC<PopupProps> = ({
                 <div className="mt-2 max-h-40 space-y-2 overflow-y-auto">
                   {configuredProviderPanel()}
                 </div>
-                <div className="system-xs-medium-uppercase mt-3 text-text-tertiary">{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`, { ns: 'app' })}</div>
+                <div className="mt-3 system-xs-medium-uppercase text-text-tertiary">{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`, { ns: 'app' })}</div>
                 <div className="mt-2 max-h-40 space-y-2 overflow-y-auto">
                   {moreProviderPanel()}
                 </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
index 7c47249830..2b56ecfeea 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Input from '@/app/components/base/input'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 239427159c..9c42f85825 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
 import type { TracingStatus } from '@/models/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownDoubleLine,
   RiEqualizer2Line,
@@ -18,7 +19,6 @@ import Indicator from '@/app/components/header/indicator'
 import { useAppContext } from '@/context/app-context'
 import { usePathname } from '@/next/navigation'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
-import { cn } from '@/utils/classnames'
 import ConfigButton from './config-button'
 import TracingIcon from './tracing-icon'
 import { TracingProvider } from './type'
@@ -247,11 +247,11 @@ const Panel: FC = () => {
         >
           <div
             className={cn(
-              'flex cursor-pointer select-none items-center rounded-xl border-l-[0.5px] border-t border-effects-highlight bg-background-default-dodge p-2 shadow-xs hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',
+              'flex cursor-pointer items-center rounded-xl border-t border-l-[0.5px] border-effects-highlight bg-background-default-dodge p-2 shadow-xs select-none hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',
             )}
           >
             <TracingIcon size="md" />
-            <div className="system-sm-semibold mx-2 text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
+            <div className="mx-2 system-sm-semibold text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
             <div className="rounded-md p-1">
               <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
             </div>
@@ -286,12 +286,12 @@ const Panel: FC = () => {
         >
           <div
             className={cn(
-              'flex cursor-pointer select-none items-center rounded-xl border-l-[0.5px] border-t border-effects-highlight bg-background-default-dodge p-2 shadow-xs hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',
+              'flex cursor-pointer items-center rounded-xl border-t border-l-[0.5px] border-effects-highlight bg-background-default-dodge p-2 shadow-xs select-none hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',
             )}
           >
-            <div className="ml-4 mr-1 flex items-center">
+            <div className="mr-1 ml-4 flex items-center">
               <Indicator color={enabled ? 'green' : 'gray'} />
-              <div className="system-xs-semibold-uppercase ml-1.5 text-text-tertiary">
+              <div className="ml-1.5 system-xs-semibold-uppercase text-text-tertiary">
                 {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`, { ns: 'app' })}
               </div>
             </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
index 076a5cd7d8..ed7f4ab962 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AliyunIconBig, ArizeIconBig, DatabricksIconBig, LangfuseIconBig, LangsmithIconBig, MlflowIconBig, OpikIconBig, PhoenixIconBig, TencentIconBig, WeaveIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Eye as View } from '@/app/components/base/icons/src/vender/solid/general'
-import { cn } from '@/utils/classnames'
 import { TracingProvider } from './type'
 
 const I18N_PREFIX = 'tracing'
@@ -82,7 +82,7 @@ const ProviderPanel: FC<Props> = ({
       <div className="flex items-center justify-between space-x-1">
         <div className="flex items-center">
           <Icon className="h-6" />
-          {isChosen && <div className="system-2xs-medium-uppercase ml-1 flex h-4 items-center radius-xs border border-text-accent-secondary px-1 text-text-accent-secondary">{t(`${I18N_PREFIX}.inUse`, { ns: 'app' })}</div>}
+          {isChosen && <div className="ml-1 flex h-4 items-center rounded-sm border border-text-accent-secondary px-1 system-2xs-medium-uppercase text-text-accent-secondary">{t(`${I18N_PREFIX}.inUse`, { ns: 'app' })}</div>}
         </div>
         {!readOnly && (
           <div className="flex items-center justify-between space-x-1">
@@ -102,7 +102,7 @@ const ProviderPanel: FC<Props> = ({
           </div>
         )}
       </div>
-      <div className="system-xs-regular mt-2 text-text-tertiary">
+      <div className="mt-2 system-xs-regular text-text-tertiary">
         {t(`${I18N_PREFIX}.${type}.description`, { ns: 'app' })}
       </div>
     </div>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
index 9bf1ddc50d..cdc0f753a6 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -10,7 +10,7 @@ type Props = {
 }
 
 const sizeClassMap = {
-  lg: 'w-9 h-9 p-2 radius-lg',
+  lg: 'w-9 h-9 p-2 rounded-[10px]',
   md: 'w-6 h-6 p-1 rounded-lg',
 }
 
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 092e47278f..ba3272c1a7 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { RemixiconComponentType } from '@remixicon/react'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Fill,
   RiEqualizer2Line,
@@ -24,7 +25,6 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { usePathname } from '@/next/navigation'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
-import { cn } from '@/utils/classnames'
 
 type IAppDetailLayoutProps = {
   children: React.ReactNode
diff --git a/web/app/(humanInputLayout)/form/[token]/form.tsx b/web/app/(humanInputLayout)/form/[token]/form.tsx
index 898dab8f4a..be30585101 100644
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -3,6 +3,7 @@ import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { SiteInfo } from '@/models/share'
 import type { HumanInputFormError } from '@/service/use-share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckboxCircleFill,
   RiErrorWarningFill,
@@ -22,7 +23,6 @@ import { Button } from '@/app/components/base/ui/button'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useParams } from '@/next/navigation'
 import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
-import { cn } from '@/utils/classnames'
 
 export type FormData = {
   site: { site: SiteInfo }
@@ -101,7 +101,7 @@ const FormContent = () => {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
-          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
             </div>
@@ -129,7 +129,7 @@ const FormContent = () => {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
-          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
             </div>
@@ -157,7 +157,7 @@ const FormContent = () => {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
-          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
             </div>
@@ -185,7 +185,7 @@ const FormContent = () => {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
-          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
             </div>
@@ -211,7 +211,7 @@ const FormContent = () => {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
         <div className="max-w-[640px] min-w-[480px]">
-          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
             </div>
@@ -248,7 +248,7 @@ const FormContent = () => {
         <div className="grow system-xl-semibold text-text-primary">{site.title}</div>
       </div>
       <div className="h-0 w-full grow overflow-y-auto">
-        <div className="border-components-divider-subtle radius-3xl border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-xs">
+        <div className="border-components-divider-subtle rounded-[20px] border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-xs">
           {contentList.map((content, index) => (
             <ContentItem
               key={index}
diff --git a/web/app/(shareLayout)/webapp-reset-password/layout.tsx b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
index a71317c8b9..1a035bfb44 100644
--- a/web/app/(shareLayout)/webapp-reset-password/layout.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
@@ -1,8 +1,8 @@
 'use client'
-import Header from '@/app/signin/_header'
+import { cn } from '@langgenius/dify-ui/cn'
 
+import Header from '@/app/signin/_header'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 
 export default function SignInLayout({ children }: any) {
   const { systemFeatures } = useGlobalPublicStore()
@@ -24,7 +24,7 @@ export default function SignInLayout({ children }: any) {
             </div>
           </div>
           {!systemFeatures.branding.enabled && (
-            <div className="system-xs-regular px-8 py-6 text-text-tertiary">
+            <div className="px-8 py-6 system-xs-regular text-text-tertiary">
               ©
               {' '}
               {new Date().getFullYear()}
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index 5b89084ea1..df102e609a 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
@@ -9,7 +10,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { changeWebAppPasswordWithToken } from '@/service/common'
-import { cn } from '@/utils/classnames'
 
 const ChangePasswordForm = () => {
   const { t } = useTranslation()
diff --git a/web/app/(shareLayout)/webapp-signin/layout.tsx b/web/app/(shareLayout)/webapp-signin/layout.tsx
index 21cb0e1f57..5451b45194 100644
--- a/web/app/(shareLayout)/webapp-signin/layout.tsx
+++ b/web/app/(shareLayout)/webapp-signin/layout.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { PropsWithChildren } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { cn } from '@/utils/classnames'
 
 export default function SignInLayout({ children }: PropsWithChildren) {
   const { t } = useTranslation()
@@ -21,7 +21,7 @@ export default function SignInLayout({ children }: PropsWithChildren) {
             </div>
           </div>
           {systemFeatures.branding.enabled === false && (
-            <div className="system-xs-regular px-8 py-6 text-text-tertiary">
+            <div className="px-8 py-6 system-xs-regular text-text-tertiary">
               ©
               {' '}
               {new Date().getFullYear()}
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index ed97e64806..436c7e64bb 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -8,7 +9,6 @@ import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { LicenseStatus } from '@/types/feature'
-import { cn } from '@/utils/classnames'
 import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
 import SSOAuth from './components/sso-auth'
@@ -58,10 +58,10 @@ const NormalForm = () => {
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
             <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
               <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
+            <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -74,10 +74,10 @@ const NormalForm = () => {
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
             <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
               <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
+            <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -90,10 +90,10 @@ const NormalForm = () => {
           <div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
             <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
               <RiContractLine className="h-5 w-5" />
-              <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
+              <RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
+            <p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -105,7 +105,7 @@ const NormalForm = () => {
       <div className="mx-auto mt-8 w-full">
         <div className="mx-auto w-full">
           <h2 className="title-4xl-semi-bold text-text-primary">{systemFeatures.branding.enabled ? t('pageTitleForE', { ns: 'login' }) : t('pageTitle', { ns: 'login' })}</h2>
-          <p className="body-md-regular mt-2 text-text-tertiary">{t('welcome', { ns: 'login' })}</p>
+          <p className="mt-2 body-md-regular text-text-tertiary">{t('welcome', { ns: 'login' })}</p>
         </div>
         <div className="relative">
           <div className="mt-6 flex flex-col gap-3">
@@ -122,7 +122,7 @@ const NormalForm = () => {
                 <div className="h-px w-full bg-linear-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
               </div>
               <div className="relative flex justify-center">
-                <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('or', { ns: 'login' })}</span>
+                <span className="px-2 system-xs-medium-uppercase text-text-tertiary">{t('or', { ns: 'login' })}</span>
               </div>
             </div>
           )}
@@ -159,7 +159,7 @@ const NormalForm = () => {
                   <RiDoorLockLine className="h-5 w-5" />
                 </div>
                 <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
-                <p className="system-xs-regular mt-1 text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>
+                <p className="mt-1 system-xs-regular text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>
               </div>
               <div className="relative my-2 py-2">
                 <div className="absolute inset-0 flex items-center" aria-hidden="true">
@@ -170,7 +170,7 @@ const NormalForm = () => {
           )}
           {!systemFeatures.branding.enabled && (
             <>
-              <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+              <div className="mt-2 block w-full system-xs-regular text-text-tertiary">
                 {t('tosDesc', { ns: 'login' })}
               &nbsp;
                 <Link
@@ -192,7 +192,7 @@ const NormalForm = () => {
                 </Link>
               </div>
               {IS_CE_EDITION && (
-                <div className="w-hull system-xs-regular mt-2 block text-text-tertiary">
+                <div className="w-hull mt-2 block system-xs-regular text-text-tertiary">
                   {t('goToInit', { ns: 'login' })}
               &nbsp;
                   <Link
diff --git a/web/app/account/(commonLayout)/avatar.tsx b/web/app/account/(commonLayout)/avatar.tsx
index b81c96df74..538e09b0fd 100644
--- a/web/app/account/(commonLayout)/avatar.tsx
+++ b/web/app/account/(commonLayout)/avatar.tsx
@@ -44,7 +44,7 @@ export default function AppSelector() {
               <MenuButton
                 className={`
                     p-1x inline-flex
-                    items-center radius-3xl text-sm
+                    items-center rounded-[20px] text-sm
                     text-text-primary
                     mobile:px-1
                     ${open && 'bg-components-panel-bg-blur'}
@@ -64,7 +64,7 @@ export default function AppSelector() {
             >
               <MenuItems
                 className="
-                    absolute -right-2 -top-1 w-60 max-w-80
+                    absolute -top-1 -right-2 w-60 max-w-80
                     origin-top-right divide-y divide-divider-subtle rounded-lg bg-components-panel-bg-blur
                     shadow-lg
                   "
diff --git a/web/app/account/oauth/authorize/layout.tsx b/web/app/account/oauth/authorize/layout.tsx
index 7f6b270b45..9460e7fc54 100644
--- a/web/app/account/oauth/authorize/layout.tsx
+++ b/web/app/account/oauth/authorize/layout.tsx
@@ -1,12 +1,12 @@
 'use client'
-import Loading from '@/app/components/base/loading'
+import { cn } from '@langgenius/dify-ui/cn'
 
+import Loading from '@/app/components/base/loading'
 import Header from '@/app/signin/_header'
 import { AppContextProvider } from '@/context/app-context-provider'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useIsLogin } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 
 export default function SignInLayout({ children }: any) {
   const { systemFeatures } = useGlobalPublicStore()
@@ -38,7 +38,7 @@ export default function SignInLayout({ children }: any) {
             </div>
           </div>
           {systemFeatures.branding.enabled === false && (
-            <div className="px-8 py-6 text-text-tertiary system-xs-regular">
+            <div className="px-8 py-6 system-xs-regular text-text-tertiary">
               ©
               {' '}
               {new Date().getFullYear()}
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 62dd7f885f..9b0a5f5b21 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -1,13 +1,13 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { Button } from '@/app/components/base/ui/button'
-import useDocumentTitle from '@/hooks/use-document-title'
 
+import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { useInvitationCheck } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 
 const ActivateForm = () => {
   useDocumentTitle('')
@@ -55,7 +55,7 @@ const ActivateForm = () => {
       {checkRes && !checkRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center radius-3xl border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
             <h2 className="text-[32px] font-bold text-text-primary">{t('invalid', { ns: 'login' })}</h2>
           </div>
           <div className="mx-auto mt-6 w-full">
diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index 5852ef54e4..e7ab413005 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -1,7 +1,7 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 import Header from '../signin/_header'
 import ActivateForm from './activateForm'
 
diff --git a/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx b/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx
index a3868a8330..b8a06e6697 100644
--- a/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx
@@ -12,7 +12,7 @@ vi.mock('@/next/navigation', () => ({
 }))
 
 // Mock classnames utility
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   default: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/app-sidebar/app-info/app-info-trigger.tsx b/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
index 07a41124e3..0e0d085e30 100644
--- a/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
@@ -1,8 +1,8 @@
 import type { App, AppSSO } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import AppIcon from '../../base/app-icon'
 import { getAppModeLabel } from './app-mode-labels'
 
@@ -52,9 +52,9 @@ const AppInfoTrigger = ({ appDetail, expand, onClick }: AppInfoTriggerProps) =>
         {expand && (
           <div className="flex flex-col items-start gap-1">
             <div className="flex w-full">
-              <div className="truncate whitespace-nowrap text-text-secondary system-md-semibold">{appDetail.name}</div>
+              <div className="truncate system-md-semibold whitespace-nowrap text-text-secondary">{appDetail.name}</div>
             </div>
-            <div className="whitespace-nowrap text-text-tertiary system-2xs-medium-uppercase">
+            <div className="system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary">
               {getAppModeLabel(appDetail.mode, t)}
             </div>
           </div>
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 95ede2decf..a3e67c8a59 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -188,7 +188,7 @@ const AppOperations = ({
               </Button>
             </PortalToFollowElemTrigger>
             <PortalToFollowElemContent className="z-30">
-              <div className="flex min-w-[264px] flex-col radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
+              <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" />
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index d1a3ec935b..361fc94d69 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -1,4 +1,5 @@
 import type { NavIcon } from './nav-link'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
   RiMenuLine,
@@ -13,7 +14,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useAppContext } from '@/context/app-context'
-import { cn } from '@/utils/classnames'
 import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
 import AppInfo from './app-info'
@@ -50,7 +50,7 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
 
   return (
     <>
-      <div className="fixed left-2 top-2 z-20">
+      <div className="fixed top-2 left-2 z-20">
         <PortalToFollowElem
           open={open}
           onOpenChange={setOpen}
@@ -60,7 +60,7 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
           }}
         >
           <PortalToFollowElemTrigger onClick={handleTrigger}>
-            <div className={cn('flex cursor-pointer items-center radius-lg 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')}>
+            <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}
@@ -97,16 +97,16 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
                   </div>
                   <div className="flex flex-col items-start gap-1">
                     <div className="flex w-full">
-                      <div className="truncate text-text-secondary system-md-semibold">{appDetail.name}</div>
+                      <div className="truncate system-md-semibold text-text-secondary">{appDetail.name}</div>
                     </div>
-                    <div className="text-text-tertiary system-2xs-medium-uppercase">{getAppModeLabel(appDetail.mode, t)}</div>
+                    <div className="system-2xs-medium-uppercase text-text-tertiary">{getAppModeLabel(appDetail.mode, t)}</div>
                   </div>
                 </div>
               </div>
               <div className="px-4">
                 <Divider bgStyle="gradient" />
               </div>
-              <nav className="space-y-0.5 px-3 pb-6 pt-4">
+              <nav className="space-y-0.5 px-3 pt-4 pb-6">
                 {navigation.map((item, index) => {
                   return (
                     <NavLink key={index} mode="expand" iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 33092865f8..9abebfcc88 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -1,4 +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'
@@ -11,7 +12,6 @@ import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
 import { datasetDetailQueryKeyPrefix, useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
-import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
diff --git a/web/app/components/app-sidebar/dataset-info/index.tsx b/web/app/components/app-sidebar/dataset-info/index.tsx
index e46c4e4085..02b2251eb8 100644
--- a/web/app/components/app-sidebar/dataset-info/index.tsx
+++ b/web/app/components/app-sidebar/dataset-info/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { DOC_FORM_TEXT } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import AppIcon from '../../base/app-icon'
 import Effect from '../../base/effect'
 import Dropdown from './dropdown'
@@ -36,7 +36,7 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
   return (
     <div className={cn('relative flex flex-col', expand ? '' : 'p-1')}>
       {expand && (
-        <Effect className="-left-5 top-[-22px] opacity-15" />
+        <Effect className="top-[-22px] -left-5 opacity-15" />
       )}
 
       <div className="flex flex-col gap-2 p-2">
@@ -57,19 +57,19 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
           )}
         </div>
         {!expand && (
-          <div className="-mb-2 -mt-1 flex items-center justify-center">
+          <div className="-mt-1 -mb-2 flex items-center justify-center">
             <Dropdown expand={false} />
           </div>
         )}
         {expand && (
           <div className="flex flex-col gap-y-1 pb-0.5">
             <div
-              className="truncate text-text-secondary system-md-semibold"
+              className="truncate system-md-semibold text-text-secondary"
               title={dataset.name}
             >
               {dataset.name}
             </div>
-            <div className="text-text-tertiary system-2xs-medium-uppercase">
+            <div className="system-2xs-medium-uppercase text-text-tertiary">
               {isExternalProvider && t('externalTag', { ns: 'dataset' })}
               {!!(!isExternalProvider && isPipelinePublished && dataset.doc_form && dataset.indexing_technique) && (
                 <div className="flex items-center gap-x-2">
@@ -79,7 +79,7 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
               )}
             </div>
             {!!dataset.description && (
-              <p className="line-clamp-3 text-text-tertiary system-xs-regular first-letter:capitalize">
+              <p className="line-clamp-3 system-xs-regular text-text-tertiary first-letter:capitalize">
                 {dataset.description}
               </p>
             )}
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index 6512cb830b..de2563b377 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -1,5 +1,6 @@
 import type { NavIcon } from './nav-link'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiMenuLine,
 } from '@remixicon/react'
@@ -15,7 +16,6 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { DOC_FORM_TEXT } from '@/models/datasets'
 import { useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
-import { cn } from '@/utils/classnames'
 import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
 import Effect from '../base/effect'
@@ -65,7 +65,7 @@ const DatasetSidebarDropdown = ({
 
   return (
     <>
-      <div className="fixed left-2 top-2 z-20">
+      <div className="fixed top-2 left-2 z-20">
         <PortalToFollowElem
           open={open}
           onOpenChange={setOpen}
@@ -77,7 +77,7 @@ const DatasetSidebarDropdown = ({
           <PortalToFollowElemTrigger onClick={handleTrigger}>
             <div
               className={cn(
-                'flex cursor-pointer items-center radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
+                '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',
               )}
             >
@@ -93,7 +93,7 @@ const DatasetSidebarDropdown = ({
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className="z-50">
             <div className="relative w-[216px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg">
-              <Effect className="-left-5 top-[-22px] opacity-15" />
+              <Effect className="top-[-22px] -left-5 opacity-15" />
               <div className="flex flex-col gap-y-2 p-4">
                 <div className="flex items-center justify-between">
                   <AppIcon
@@ -107,12 +107,12 @@ const DatasetSidebarDropdown = ({
                 </div>
                 <div className="flex flex-col gap-y-1 pb-0.5">
                   <div
-                    className="truncate text-text-secondary system-md-semibold"
+                    className="truncate system-md-semibold text-text-secondary"
                     title={dataset.name}
                   >
                     {dataset.name}
                   </div>
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">
                     {isExternalProvider && t('externalTag', { ns: 'dataset' })}
                     {!!(!isExternalProvider && dataset.doc_form && dataset.indexing_technique) && (
                       <div className="flex items-center gap-x-2">
@@ -123,7 +123,7 @@ const DatasetSidebarDropdown = ({
                   </div>
                 </div>
                 {!!dataset.description && (
-                  <p className="line-clamp-3 text-text-tertiary system-xs-regular first-letter:capitalize">
+                  <p className="line-clamp-3 system-xs-regular text-text-tertiary first-letter:capitalize">
                     {dataset.description}
                   </p>
                 )}
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index f86cd617e3..716b73abf5 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -1,4 +1,5 @@
 import type { NavIcon } from './nav-link'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useHover, useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -7,7 +8,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { usePathname } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import Divider from '../base/divider'
 import { getKeyboardKeyCodeBySystem } from '../workflow/utils'
 import AppInfo from './app-info'
@@ -124,7 +124,7 @@ const AppDetailNav = ({
         />
         {!isMobile && isHoveringSidebar && (
           <ToggleButton
-            className="absolute -right-3 top-[-3.5px] z-20"
+            className="absolute top-[-3.5px] -right-3 z-20"
             expand={expand}
             handleToggle={handleToggle}
           />
diff --git a/web/app/components/app-sidebar/nav-link/index.tsx b/web/app/components/app-sidebar/nav-link/index.tsx
index cf986a7407..a2f737da16 100644
--- a/web/app/components/app-sidebar/nav-link/index.tsx
+++ b/web/app/components/app-sidebar/nav-link/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { RemixiconComponentType } from '@remixicon/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Link from '@/next/link'
 import { useSelectedLayoutSegment } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<
   React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
@@ -54,7 +54,7 @@ const NavLink = ({
         key={name}
         type="button"
         disabled
-        className={cn('flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 system-sm-medium hover:bg-components-menu-item-bg-hover', 'pl-3 pr-1')}
+        className={cn('flex h-8 cursor-not-allowed items-center rounded-lg system-sm-medium text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover', 'pr-1 pl-3')}
         title={mode === 'collapse' ? name : ''}
         aria-disabled
       >
@@ -75,8 +75,8 @@ const NavLink = ({
       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')}
+        ? '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')}
       title={mode === 'collapse' ? name : ''}
     >
       {renderIcon()}
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 8c17f7ad88..5800ff2263 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import Tooltip from '../base/tooltip'
 import ShortcutsName from '../workflow/shortcuts-name'
 
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index e59e57b392..da7d0c70dd 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -12,7 +13,6 @@ import {
   AlertDialogContent,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'batchAction'
 
@@ -47,7 +47,7 @@ const BatchAction: FC<IBatchActionProps> = ({
   }
   return (
     <div className={cn('pointer-events-none flex w-full justify-center', className)}>
-      <div className="pointer-events-auto flex items-center gap-x-1 radius-lg border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]">
+      <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]">
         <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
           <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface">
             {selectedIds.length}
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index 9978887820..02dcf27aea 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 
 export type Props = {
   file: File | undefined
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index 152724e0e9..4a62569816 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 export enum EditItemType {
   Query = 'query',
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 9dfb3bad42..101898b87e 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { AnnotationItemBasic } from '../type'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiDeleteBinLine,
@@ -18,10 +19,9 @@ import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vend
 import CustomPopover from '@/app/components/base/popover'
 import { Button } from '@/app/components/base/ui/button'
 import { useLocale } from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n-config/language'
 
+import { LanguagesSupported } from '@/i18n-config/language'
 import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
-import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
 import AddAnnotationModal from '../add-annotation-modal'
 import BatchAddModal from '../batch-add-annotation-modal'
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 17ec32dc23..b922421849 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -4,6 +4,7 @@ import type { QueryParam } from './filter'
 import type { AnnotationItem, AnnotationItemBasic } from './type'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
 import * as React from 'react'
@@ -22,7 +23,6 @@ import { useProviderContext } from '@/context/provider-context'
 import { addAnnotation, delAnnotation, delAnnotations, fetchAnnotationConfig as doFetchAnnotationConfig, editAnnotation, fetchAnnotationList, queryAnnotationJobStatus, updateAnnotationScore, updateAnnotationStatus } from '@/service/annotation'
 import { AppModeEnum } from '@/types/app'
 import { sleep } from '@/utils'
-import { cn } from '@/utils/classnames'
 import EmptyElement from './empty-element'
 import Filter from './filter'
 import HeaderOpts from './header-opts'
@@ -144,7 +144,7 @@ const Annotation: FC<Props> = (props) => {
 
   return (
     <div className="flex h-full flex-col">
-      <p className="text-text-tertiary system-sm-regular">{t('description', { ns: 'appLog' })}</p>
+      <p className="system-sm-regular text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
       <div className="relative flex h-full flex-1 flex-col py-4">
         <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
           <div className="flex items-center space-x-2">
@@ -152,7 +152,7 @@ const Annotation: FC<Props> = (props) => {
               <>
                 <div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex h-7 items-center space-x-1 rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2')}>
                   <MessageFast className="h-4 w-4 text-util-colors-indigo-indigo-600" />
-                  <div className="text-text-primary system-sm-medium">{t('name', { ns: 'appAnnotation' })}</div>
+                  <div className="system-sm-medium text-text-primary">{t('name', { ns: 'appAnnotation' })}</div>
                   <Switch
                     key={controlRefreshSwitch}
                     value={annotationConfig?.enabled ?? false}
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 75818f731c..caad4dd523 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationItem } from './type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
@@ -8,7 +9,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Checkbox from '@/app/components/base/checkbox'
 import useTimestamp from '@/hooks/use-timestamp'
-import { cn } from '@/utils/classnames'
 import BatchAction from './batch-action'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
 
@@ -60,7 +60,7 @@ const List: FC<Props> = ({
         <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
-              <td className="w-12 whitespace-nowrap rounded-l-lg bg-background-section-burn px-2">
+              <td className="w-12 rounded-l-lg bg-background-section-burn px-2 whitespace-nowrap">
                 <Checkbox
                   className="mr-2"
                   checked={isAllSelected}
@@ -68,11 +68,11 @@ const List: FC<Props> = ({
                   onCheck={handleSelectAll}
                 />
               </td>
-              <td className="w-5 whitespace-nowrap bg-background-section-burn pl-2 pr-1">{t('table.header.question', { ns: 'appAnnotation' })}</td>
-              <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.answer', { ns: 'appAnnotation' })}</td>
-              <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.createdAt', { ns: 'appAnnotation' })}</td>
-              <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.hits', { ns: 'appAnnotation' })}</td>
-              <td className="w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.actions', { ns: 'appAnnotation' })}</td>
+              <td className="w-5 bg-background-section-burn pr-1 pl-2 whitespace-nowrap">{t('table.header.question', { ns: 'appAnnotation' })}</td>
+              <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.answer', { ns: 'appAnnotation' })}</td>
+              <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.createdAt', { ns: 'appAnnotation' })}</td>
+              <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.hits', { ns: 'appAnnotation' })}</td>
+              <td className="w-[96px] rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.actions', { ns: 'appAnnotation' })}</td>
             </tr>
           </thead>
           <tbody className="system-sm-regular text-text-secondary">
@@ -99,13 +99,13 @@ const List: FC<Props> = ({
                   />
                 </td>
                 <td
-                  className="max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2"
+                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                   title={item.question}
                 >
                   {item.question}
                 </td>
                 <td
-                  className="max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2"
+                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                   title={item.answer}
                 >
                   {item.answer}
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index d9ebe093f5..8a5b53aa87 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationItem, HitHistoryItem } from '../type'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,7 +21,6 @@ import {
 import { APP_PAGE_LIMIT } from '@/config'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchHitHistoryList } from '@/service/annotation'
-import { cn } from '@/utils/classnames'
 import EditItem, { EditItemType } from '../edit-annotation-modal/edit-item'
 import HitHistoryNoData from './hit-history-no-data'
 
@@ -146,12 +146,12 @@ const ViewAnnotationModal: FC<Props> = ({
           <table className={cn('w-full min-w-[440px] 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">{t('hitHistoryTable.query', { ns: 'appAnnotation' })}</td>
-                <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('hitHistoryTable.match', { ns: 'appAnnotation' })}</td>
-                <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('hitHistoryTable.response', { ns: 'appAnnotation' })}</td>
-                <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('hitHistoryTable.source', { ns: 'appAnnotation' })}</td>
-                <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('hitHistoryTable.score', { ns: 'appAnnotation' })}</td>
-                <td className="w-[160px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('hitHistoryTable.time', { ns: 'appAnnotation' })}</td>
+                <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap">{t('hitHistoryTable.query', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('hitHistoryTable.match', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('hitHistoryTable.response', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('hitHistoryTable.source', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('hitHistoryTable.score', { ns: 'appAnnotation' })}</td>
+                <td className="w-[160px] rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('hitHistoryTable.time', { ns: 'appAnnotation' })}</td>
               </tr>
             </thead>
             <tbody className="system-sm-regular text-text-secondary">
@@ -161,19 +161,19 @@ const ViewAnnotationModal: FC<Props> = ({
                   className="cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover"
                 >
                   <td
-                    className="max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2"
+                    className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                     title={item.question}
                   >
                     {item.question}
                   </td>
                   <td
-                    className="max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2"
+                    className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                     title={item.match}
                   >
                     {item.match}
                   </td>
                   <td
-                    className="max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2"
+                    className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
                     title={item.response}
                   >
                     {item.response}
@@ -250,7 +250,7 @@ const ViewAnnotationModal: FC<Props> = ({
         )}
         foot={id
           ? (
-              <div className="system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary">
+              <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                 <div
                   className="flex cursor-pointer items-center space-x-2 pl-3"
                   onClick={() => setShowModal(true)}
diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index dd7c74e233..bbf5329c9d 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { Fragment, useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
@@ -46,7 +46,7 @@ const AccessControlDialog = ({
             leaveTo="opacity-0 scale-95"
           >
             <Dialog.Panel className={cn('relative h-auto min-h-[323px] w-[600px] overflow-y-auto rounded-2xl bg-components-panel-bg p-0 shadow-xl transition-all', className)}>
-              <div onClick={() => close()} className="absolute right-5 top-5 z-10 flex h-8 w-8 cursor-pointer items-center justify-center">
+              <div onClick={() => close()} className="absolute top-5 right-5 z-10 flex h-8 w-8 cursor-pointer items-center justify-center">
                 <RiCloseLine className="h-5 w-5 text-text-tertiary" />
               </div>
               {children}
diff --git a/web/app/components/app/app-access-control/access-control-item.tsx b/web/app/components/app/app-access-control/access-control-item.tsx
index da6e69c42e..cc2cf94f0c 100644
--- a/web/app/components/app/app-access-control/access-control-item.tsx
+++ b/web/app/components/app/app-access-control/access-control-item.tsx
@@ -13,7 +13,7 @@ const AccessControlItem: FC<AccessControlItemProps> = ({ type, children }) => {
   if (currentMenu !== type) {
     return (
       <div
-        className="cursor-pointer radius-lg border
+        className="cursor-pointer rounded-[10px] border
       border-components-option-card-option-border bg-components-option-card-option-bg
       hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover"
         onClick={() => setCurrentMenu(type)}
@@ -24,7 +24,7 @@ const AccessControlItem: FC<AccessControlItemProps> = ({ type, children }) => {
   }
 
   return (
-    <div className="radius-lg border-[1.5px]
+    <div className="rounded-[10px] border-[1.5px]
   border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-sm"
     >
       {children}
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index f4c960f1bf..f457e3a2c4 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
 import { FloatingOverlay } from '@floating-ui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -10,7 +11,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { useSelector } from '@/context/app-context'
 import { SubjectType } from '@/models/access-control'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
-import { cn } from '@/utils/classnames'
 import useAccessControlStore from '../../../../context/access-control-store'
 import Checkbox from '../../base/checkbox'
 import Input from '../../base/input'
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 56879d8fea..db13364eb9 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,6 +1,6 @@
 import type { HTMLProps, PropsWithChildren } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import { cn } from '@/utils/classnames'
 
 type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
   icon?: React.ReactNode
@@ -24,7 +24,7 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
       {...props}
     >
       <div className="relative h-4 w-4">{icon}</div>
-      <div className="system-sm-medium shrink grow basis-0">{children}</div>
+      <div className="shrink grow basis-0 system-sm-medium">{children}</div>
       <RiArrowRightUpLine className="h-3.5 w-3.5" />
     </a>
   )
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index 77ee7bc8dd..806de18412 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type IFeaturePanelProps = {
   className?: string
@@ -23,7 +23,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
+    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
       {/* Header */}
       <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')} data-testid="feature-panel-header">
         <div className="flex h-8 items-center justify-between">
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index e3bdfd01ba..52b2be6494 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiEditLine,
@@ -7,7 +8,6 @@ import {
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type IOperationBtnProps = {
   className?: string
@@ -30,7 +30,7 @@ const OperationBtn: FC<IOperationBtnProps> = ({
   const { t } = useTranslation()
   return (
     <div
-      className={cn('flex h-7 cursor-pointer select-none items-center space-x-1 rounded-md px-3 text-text-secondary hover:bg-state-base-hover', className)}
+      className={cn('flex h-7 cursor-pointer items-center space-x-1 rounded-md px-3 text-text-secondary select-none hover:bg-state-base-hover', className)}
       onClick={onClick}
     >
       <div>
diff --git a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
index 25587c5e58..6d234c6a9c 100644
--- a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
@@ -15,21 +15,21 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
   return (
     <div className="flex grow flex-col items-center justify-center pb-[120px]">
       <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
-        <div className="flex h-10 w-10 items-center justify-center radius-lg">
-          <div className="flex h-full w-full items-center justify-center overflow-hidden radius-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
+        <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
+          <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
             <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
           </div>
         </div>
         <div className="flex flex-col gap-1">
-          <div className="text-text-secondary system-md-semibold">{t('noModelProviderConfigured', { ns: 'appDebug' })}</div>
-          <div className="text-text-tertiary system-xs-regular">{t('noModelProviderConfiguredTip', { ns: 'appDebug' })}</div>
+          <div className="system-md-semibold text-text-secondary">{t('noModelProviderConfigured', { ns: 'appDebug' })}</div>
+          <div className="system-xs-regular text-text-tertiary">{t('noModelProviderConfiguredTip', { ns: 'appDebug' })}</div>
         </div>
         <button
           type="button"
           className="flex w-fit items-center gap-1 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 shadow-xs backdrop-blur-[5px]"
           onClick={onSetting}
         >
-          <span className="text-components-button-secondary-accent-text system-sm-medium">{t('manageModels', { ns: 'appDebug' })}</span>
+          <span className="system-sm-medium text-components-button-secondary-accent-text">{t('manageModels', { ns: 'appDebug' })}</span>
           <span className="i-ri-arrow-right-line h-4 w-4 text-components-button-secondary-accent-text" />
         </button>
       </div>
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 2cd33759f8..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
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptRole, PromptVariable } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiErrorWarningFill,
@@ -30,7 +31,6 @@ import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { getNewVar, getVars } from '@/utils/var'
 import ConfirmAddVar from './confirm-add-var'
 import MessageTypeSelector from './message-type-selector'
diff --git a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
index 0b404eea90..41e16abe92 100644
--- a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
+++ b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean, useClickAway } from 'ahooks'
 import * as React from 'react'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { PromptRole } from '@/models/debug'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   value: PromptRole
@@ -25,10 +25,10 @@ const MessageTypeSelector: FC<Props> = ({
     <div className="relative left-[-8px]" ref={ref}>
       <div
         onClick={toggleShow}
-        className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pl-1.5 pr-1 text-indigo-800')}
+        className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pr-1 pl-1.5 text-indigo-800')}
       >
         <div className="text-sm font-semibold uppercase">{value}</div>
-        <ChevronSelectorVertical className="h-3 w-3 " />
+        <ChevronSelectorVertical className="h-3 w-3" />
       </div>
       {showOption && (
         <div className="absolute top-[30px] z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
@@ -39,7 +39,7 @@ const MessageTypeSelector: FC<Props> = ({
                 setHide()
                 onChange(type)
               }}
-              className="flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium uppercase text-text-secondary hover:bg-state-base-hover"
+              className="flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover"
             >
               {type}
             </div>
diff --git a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
index 0320169676..ac8029a2e7 100644
--- a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
+++ b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
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 da1949af60..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
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
 import type { GenRes } from '@/service/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -28,7 +29,6 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { getNewVar, getVars } from '@/utils/var'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
@@ -179,14 +179,14 @@ const Prompt: FC<ISimplePromptInput> = ({
     <div className={cn('relative rounded-xl bg-linear-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
       <div className="rounded-xl bg-background-section-burn">
         {!noTitle && (
-          <div className="flex h-11 items-center justify-between pl-3 pr-2.5">
+          <div className="flex h-11 items-center justify-between pr-2.5 pl-3">
             <div className="flex items-center space-x-1">
-              <div className="h2 text-text-secondary system-sm-semibold-uppercase">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
+              <div className="system-sm-semibold-uppercase text-text-secondary">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
               {!readonly && (
                 <Tooltip>
                   <TooltipTrigger
                     render={(
-                      <span className="i-ri-question-line ml-1 h-4 w-4 shrink-0 text-text-quaternary" />
+                      <span className="ml-1 i-ri-question-line h-4 w-4 shrink-0 text-text-quaternary" />
                     )}
                   />
                   <TooltipContent>
diff --git a/web/app/components/app/configuration/config-var/config-modal/field.tsx b/web/app/components/app/configuration/config-var/config-modal/field.tsx
index f9ef303252..6ed837812b 100644
--- a/web/app/components/app/configuration/config-var/config-modal/field.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/field.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -20,10 +20,10 @@ const Field: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className={cn(className)}>
-      <div className="leading-8! text-text-secondary system-sm-semibold">
+      <div className="system-sm-semibold leading-8! text-text-secondary">
         {title}
         {isOptional && (
-          <span className="ml-1 text-text-tertiary system-xs-regular">
+          <span className="ml-1 system-xs-regular text-text-tertiary">
             (
             {t('variableConfig.optional', { ns: 'appDebug' })}
             )
diff --git a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
index c2a02f4710..fa318ae35d 100644
--- a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
@@ -206,7 +206,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
             value={jsonSchemaStr}
             onChange={onJSONSchemaChange}
             noWrapper
-            className="h-[80px] overflow-y-auto radius-lg bg-components-input-bg-normal p-1"
+            className="h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
             placeholder={<div className="whitespace-pre">{jsonConfigPlaceHolder}</div>}
           />
         </Field>
diff --git a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
index 00720b0579..5fd7c88b82 100644
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { InputVarType } from '@/app/components/workflow/types'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import Badge from '@/app/components/base/badge'
@@ -12,7 +13,6 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import { cn } from '@/utils/classnames'
 
 export type Item = {
   value: InputVarType
diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx
index 6a5b12c417..24bc3b4a06 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
-import { cn } from '@/utils/classnames'
 
 export type Options = string[]
 type IConfigSelectProps = {
@@ -63,13 +63,13 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                       return item
                     }))
                   }}
-                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-hidden"
+                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
                 <div
                   role="button"
-                  className="absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+                  className="absolute top-1/2 right-1.5 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
                   onClick={() => {
                     onChange(options.filter((_, i) => index !== i))
                     setDeletingID(null)
@@ -87,7 +87,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
 
       <div
         onClick={() => { onChange([...options, '']) }}
-        className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3  text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
+        className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
       >
         <RiAddLine className="h-4 w-4" />
         <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 1c25d06f10..951680c035 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -4,6 +4,7 @@ import type { InputVar } from '@/app/components/workflow/types'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -27,7 +28,6 @@ import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { getNewVar, hasDuplicateStr } from '@/utils/var'
 import Panel from '../base/feature-panel'
 import EditModal from './config-modal'
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index 7385dfd4c8..d65f5fa174 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import type { InputVarType } from '@/app/components/workflow/types'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
-import { cn } from '@/utils/classnames'
 
 type ISelectTypeItemProps = {
   type: InputVarType
@@ -33,7 +33,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
     <div
       className={cn(
         'flex h-[58px] flex-col items-center justify-center space-y-1 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary',
-        selected ? 'system-xs-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs' : ' system-xs-regular cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+        selected ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-xs-medium shadow-xs' : 'cursor-pointer system-xs-regular hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
       )}
       onClick={onClick}
     >
diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index b26249dac8..80c0bf6ac6 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { IInputTypeIconProps } from './input-type-icon'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiDraggable,
@@ -10,7 +11,6 @@ import * as React from 'react'
 import { useState } from 'react'
 import Badge from '@/app/components/base/badge'
 import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development'
-import { cn } from '@/utils/classnames'
 import IconTypeIcon from './input-type-icon'
 
 type ItemProps = {
@@ -39,22 +39,22 @@ const VarItem: FC<ItemProps> = ({
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
-    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed', className)}>
+    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-3 pl-2.5 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed', className)}>
       <VarIcon className={cn('mr-1 h-4 w-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
       {canDrag && (
-        <RiDraggable className="absolute left-3 top-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
+        <RiDraggable className="absolute top-3 left-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
       )}
       <div className="flex w-0 grow items-center">
         <div className="truncate" title={`${name} · ${label}`}>
           <span className="system-sm-medium text-text-secondary">{name}</span>
-          <span className="system-xs-regular px-1 text-text-quaternary">·</span>
+          <span className="px-1 system-xs-regular text-text-quaternary">·</span>
           <span className="system-xs-medium text-text-tertiary">{label}</span>
         </div>
       </div>
       <div className="shrink-0">
         <div className={cn('flex items-center', !readonly && 'group-hover:hidden')}>
           {required && <Badge text="required" />}
-          <span className="system-xs-regular pl-2 pr-1 text-text-tertiary">{type}</span>
+          <span className="pr-1 pl-2 system-xs-regular text-text-tertiary">{type}</span>
           <IconTypeIcon type={type as IInputTypeIconProps['type']} className="text-text-tertiary" />
         </div>
         <div className={cn('hidden items-center justify-end rounded-lg', !readonly && 'group-hover:flex')}>
@@ -66,7 +66,7 @@ const VarItem: FC<ItemProps> = ({
           </div>
           <div
             data-testid="var-item-delete-btn"
-            className="flex h-6 w-6 cursor-pointer items-center  justify-center text-text-tertiary hover:text-text-destructive"
+            className="flex h-6 w-6 cursor-pointer items-center justify-center text-text-tertiary hover:text-text-destructive"
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx
index e04be8597b..aec8d808c1 100644
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -16,7 +17,6 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 // import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import ConfigContext from '@/context/debug-configuration'
 import { Resolution } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import ParamConfig from './param-config'
 
 const ConfigVision: FC = () => {
@@ -62,14 +62,14 @@ const ConfigVision: FC = () => {
     return null
 
   return (
-    <div className="mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-2">
+    <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
           <Vision className="h-4 w-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">
-        <div className="system-sm-semibold mr-1 text-text-secondary">{t('vision.name', { ns: 'appDebug' })}</div>
+        <div className="mr-1 system-sm-semibold text-text-secondary">{t('vision.name', { ns: 'appDebug' })}</div>
         <Tooltip
           popupContent={(
             <div className="w-[180px]">
@@ -100,7 +100,7 @@ const ConfigVision: FC = () => {
                     selected={file?.image?.detail === Resolution.high}
                     onSelect={noop}
                     className={cn(
-                      'cursor-not-allowed rounded-lg px-3  hover:shadow-none',
+                      'cursor-not-allowed rounded-lg px-3 hover:shadow-none',
                       file?.image?.detail !== Resolution.high && 'hover:border-components-option-card-option-border',
                     )}
                   />
@@ -109,7 +109,7 @@ const ConfigVision: FC = () => {
                     selected={file?.image?.detail === Resolution.low}
                     onSelect={noop}
                     className={cn(
-                      'cursor-not-allowed rounded-lg px-3  hover:shadow-none',
+                      'cursor-not-allowed rounded-lg px-3 hover:shadow-none',
                       file?.image?.detail !== Resolution.low && 'hover:border-components-option-card-option-border',
                     )}
                   />
@@ -119,7 +119,7 @@ const ConfigVision: FC = () => {
           : (
               <>
                 <ParamConfig />
-                <div className="ml-1 mr-3 h-3.5 w-px bg-divider-regular"></div>
+                <div className="mr-3 ml-1 h-3.5 w-px bg-divider-regular"></div>
                 <Switch
                   value={isImageEnabled}
                   onChange={handleChange}
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 887ebed2a0..ded130ba7a 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiSettings2Line } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import ParamConfigContent from './param-config-content'
 
 const ParamsConfig: FC = () => {
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 92d3239608..56f1863ec1 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -23,7 +23,7 @@ const ItemPanel: FC<Props> = ({
     <div className={cn(className, 'flex h-12 items-center justify-between rounded-lg bg-background-section-burn px-3')}>
       <div className="flex items-center">
         {icon}
-        <div className="ml-3 mr-1 text-sm font-semibold leading-6 text-text-secondary">{name}</div>
+        <div className="mr-1 ml-3 text-sm leading-6 font-semibold text-text-secondary">{name}</div>
         <Tooltip
           popupContent={(
             <div className="w-[180px]">
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 16212afa73..87546b94b4 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -4,6 +4,7 @@ import type { Collection } from '@/app/components/tools/types'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AgentTool } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEqualizer2Line,
@@ -32,7 +33,6 @@ import ConfigContext from '@/context/debug-configuration'
 import { useMittContextSelector } from '@/context/mitt-context'
 import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import { canFindTool } from '@/utils'
-import { cn } from '@/utils/classnames'
 import { useFormattingChangedDispatcher } from '../../../debug/hooks'
 import SettingBuiltInTool from './setting-built-in-tool'
 
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index 757465b5ee..ae9ec962c7 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Collection, Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -28,7 +29,6 @@ import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-for
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   showBackButton?: boolean
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
index 27adbf253e..df0baa2f36 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
@@ -15,7 +16,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Radio from '@/app/components/base/radio/ui'
-import { cn } from '@/utils/classnames'
 import AgentSetting from '../agent/agent-setting'
 
 type Props = {
@@ -45,15 +45,15 @@ const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description,
       onClick={() => !disabled && onClick(value)}
     >
       <div className="flex items-center justify-between">
-        <div className="flex items-center ">
+        <div className="flex items-center">
           <div className="mr-3 rounded-lg bg-indigo-50 p-1">
             <Icon className="h-4 w-4 text-indigo-600" />
           </div>
-          <div className="text-sm font-medium leading-5 text-gray-900">{text}</div>
+          <div className="text-sm leading-5 font-medium text-gray-900">{text}</div>
         </div>
         <Radio isChecked={isChecked} />
       </div>
-      <div className="ml-9 text-xs font-normal leading-[18px] text-gray-500">{description}</div>
+      <div className="ml-9 text-xs leading-[18px] font-normal text-gray-500">{description}</div>
     </div>
   )
 }
@@ -84,7 +84,7 @@ const AssistantTypePicker: FC<Props> = ({
     <>
       <div className="my-4 h-px bg-gray-100"></div>
       <div
-        className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'rounded-xl bg-gray-50 p-3 pr-4 ')}
+        className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'rounded-xl bg-gray-50 p-3 pr-4')}
         onClick={() => {
           if (isAgent) {
             setOpen(false)
@@ -93,15 +93,15 @@ const AssistantTypePicker: FC<Props> = ({
         }}
       >
         <div className="flex items-center justify-between">
-          <div className="flex items-center ">
+          <div className="flex items-center">
             <div className="mr-3 rounded-lg bg-gray-200 p-1 group-hover:bg-white">
               <Settings04 className="h-4 w-4 text-gray-600 group-hover:text-[#155EEF]" />
             </div>
-            <div className="text-sm font-medium leading-5 text-gray-900 group-hover:text-[#155EEF]">{t('agent.setting.name', { ns: 'appDebug' })}</div>
+            <div className="text-sm leading-5 font-medium text-gray-900 group-hover:text-[#155EEF]">{t('agent.setting.name', { ns: 'appDebug' })}</div>
           </div>
           <ArrowUpRight className="h-4 w-4 text-gray-500 group-hover:text-[#155EEF]" />
         </div>
-        <div className="ml-9 text-xs font-normal leading-[18px] text-gray-500">{t('agent.setting.description', { ns: 'appDebug' })}</div>
+        <div className="ml-9 text-xs leading-[18px] font-normal text-gray-500">{t('agent.setting.description', { ns: 'appDebug' })}</div>
       </div>
     </>
   )
@@ -117,7 +117,7 @@ const AssistantTypePicker: FC<Props> = ({
         }}
       >
         <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-          <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer select-none items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600')}>
+          <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')}>
             {isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
             <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
             <RiArrowDownSLine className="h-3 w-3" />
@@ -125,7 +125,7 @@ const AssistantTypePicker: FC<Props> = ({
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{ zIndex: 1000 }}>
           <div className="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg">
-            <div className="mb-2 text-sm font-semibold leading-5 text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
+            <div className="mb-2 text-sm leading-5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
             <SelectItem
               Icon={BubbleText}
               value="chat"
diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
index 4972708d09..16be6d9176 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Textarea from '@/app/components/base/textarea'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'generate'
 
@@ -27,10 +27,10 @@ const IdeaOutput: FC<Props> = ({
   return (
     <div className="mt-4 text-[0px]">
       <div
-        className="mb-1.5 flex  cursor-pointer items-center text-sm font-medium leading-5 text-text-primary"
+        className="mb-1.5 flex cursor-pointer items-center text-sm leading-5 font-medium text-text-primary"
         onClick={toggleFoldIdeaOutput}
       >
-        <div className="system-sm-semibold-uppercase mr-1 text-text-secondary">{t(`${i18nPrefix}.idealOutput`, { ns: 'appDebug' })}</div>
+        <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.idealOutput`, { ns: 'appDebug' })}</div>
         <div className="system-xs-regular text-text-tertiary">
           (
           {t(`${i18nPrefix}.optional`, { ns: 'appDebug' })}
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 94a8d2480a..5596b335df 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { GeneratorType } from './types'
 import type { Node, NodeOutPutVar, ValueSelector } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
@@ -9,7 +10,6 @@ import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-edito
 import { Type } from '@/app/components/workflow/nodes/llm/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   editorKey: string
@@ -45,7 +45,7 @@ const InstructionEditor: FC<Props> = ({
   const isCode = generatorType === 'code'
   const placeholder = isCode
     ? (
-        <div className="system-sm-regular whitespace-break-spaces leading-6! text-text-placeholder">
+        <div className="system-sm-regular leading-6! whitespace-break-spaces text-text-placeholder">
           {t(`${i18nPrefix}.codeGenInstructionPlaceHolderLine`, { ns: 'appDebug' })}
         </div>
       )
@@ -67,7 +67,7 @@ const InstructionEditor: FC<Props> = ({
   return (
     <div className="relative">
       <PromptEditor
-        wrapperClassName="border border-components-input-bg-normal! bg-components-input-bg-normal hover:border-components-input-bg-hover! radius-lg px-4 pt-3"
+        wrapperClassName="border border-components-input-bg-normal! bg-components-input-bg-normal hover:border-components-input-bg-hover! rounded-[10px] px-4 pt-3"
         key={editorKey}
         instanceId={editorKey}
         placeholder={placeholder}
@@ -109,9 +109,9 @@ const InstructionEditor: FC<Props> = ({
         editable
         isSupportFileVar={false}
       />
-      <div className="system-xs-regular absolute bottom-0 left-4 flex h-8 items-center space-x-0.5 text-components-input-text-placeholder">
+      <div className="absolute bottom-0 left-4 flex h-8 items-center space-x-0.5 system-xs-regular text-components-input-text-placeholder">
         <span>{t('generate.press', { ns: 'appDebug' })}</span>
-        <span className="system-kbd flex h-4 w-3.5 items-center justify-center radius-xs bg-components-kbd-bg-gray text-text-placeholder">/</span>
+        <span className="flex h-4 w-3.5 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</span>
         <span>{t('generate.to', { ns: 'appDebug' })}</span>
         <span onClick={handleInsertVariable} className="ml-1! cursor-pointer hover:border-b hover:border-dotted hover:border-text-tertiary hover:text-text-tertiary">{t('generate.insertContext', { ns: 'appDebug' })}</span>
       </div>
diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index cd99e8e999..8a17e6b0ce 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiSparklingFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Markdown } from '@/app/components/base/markdown'
-import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
 type Props = {
@@ -43,7 +43,7 @@ const PromptToast = ({
         <RiArrowDownSLine className={cn('size-4 cursor-pointer text-text-tertiary', isFold && '-rotate-90')} onClick={toggleFold} />
       </div>
       {!isFold && (
-        <div className="pb-4 pr-4">
+        <div className="pr-4 pb-4">
           <Markdown className="text-sm!" content={message} />
         </div>
       )}
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index c345410c34..25846e9b54 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type VersionSelectorProps = {
   versionLen: number
@@ -52,14 +52,14 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
         asChild
       >
 
-        <div className={cn('system-xs-medium flex items-center text-text-tertiary', isOpen && 'text-text-secondary', moreThanOneVersion && 'cursor-pointer')}>
+        <div className={cn('flex items-center system-xs-medium text-text-tertiary', isOpen && 'text-text-secondary', moreThanOneVersion && 'cursor-pointer')}>
           <div>
             {t('generate.version', { ns: 'appDebug' })}
             {' '}
             {value + 1}
             {isLatest && ` · ${t('generate.latest', { ns: 'appDebug' })}`}
           </div>
-          {moreThanOneVersion && <RiArrowDownSLine className="size-3 " />}
+          {moreThanOneVersion && <RiArrowDownSLine className="size-3" />}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={cn(
@@ -71,7 +71,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
             'w-[208px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg',
           )}
         >
-          <div className={cn('system-xs-medium-uppercase flex h-[22px] items-center px-3 pl-3 text-text-tertiary')}>
+          <div className={cn('flex h-[22px] items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary')}>
             {t('generate.versions', { ns: 'appDebug' })}
           </div>
           {
@@ -79,7 +79,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
               <div
                 key={option.value}
                 className={cn(
-                  'system-sm-medium flex h-7 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover',
+                  'flex h-7 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary hover:bg-state-base-hover',
                 )}
                 title={option.label}
                 onClick={() => {
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index ac38c50e59..8eb856feb3 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -14,7 +15,6 @@ import Badge from '@/app/components/base/badge'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import { cn } from '@/utils/classnames'
 import SettingsModal from '../settings-modal'
 
 type ItemProps = {
@@ -68,7 +68,7 @@ const Item: FC<ItemProps> = ({
           background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
           imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
         />
-        <div className="system-sm-medium w-0 grow truncate text-text-secondary" title={config.name}>{config.name}</div>
+        <div className="w-0 grow truncate system-sm-medium text-text-secondary" title={config.name}>{config.name}</div>
       </div>
       <div className="ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex">
         {
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
index 41b839681b..634277c469 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { Props } from './var-picker'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import VarPicker from './var-picker'
 
 const ContextVar: FC<Props> = (props) => {
@@ -14,7 +14,7 @@ const ContextVar: FC<Props> = (props) => {
   const currItem = options.find(item => item.value === value)
   const notSetVar = !currItem
   return (
-    <div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3 ')}>
+    <div className={cn(notSetVar ? 'rounded-br-xl rounded-bl-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3')}>
       <div className="flex shrink-0 items-center space-x-1">
         <div className="p-1">
           <BracketsX className="h-4 w-4 text-text-accent" />
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
index d5c8ef4682..d29b2e34df 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { IInputTypeIconProps } from '@/app/components/app/configuration/config-var/input-type-icon'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type Option = { name: string, value: string, type: string }
 export type Props = {
@@ -57,11 +57,11 @@ const VarPicker: FC<Props> = ({
       <PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}>
         <div className={cn(
           className,
-          notSetVar ? 'border-[#FEDF89] bg-[#FFFCF5] text-[#DC6803]' : ' border-components-button-secondary-border text-text-accent hover:bg-components-button-secondary-bg',
+          notSetVar ? 'border-[#FEDF89] bg-[#FFFCF5] text-[#DC6803]' : 'border-components-button-secondary-border text-text-accent hover:bg-components-button-secondary-bg',
           open ? 'bg-components-button-secondary-bg' : 'bg-transparent',
           `
-          flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg border  px-2 text-[13px]
-          font-medium  shadow-xs
+          flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg border px-2 text-[13px]
+          font-medium shadow-xs
           `,
         )}
         >
@@ -82,7 +82,7 @@ const VarPicker: FC<Props> = ({
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
         {options.length > 0
           ? (
-              <div className="max-h-[50vh] w-[240px] overflow-y-auto rounded-lg  border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
+              <div className="max-h-[50vh] w-[240px] overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
                 {options.map(({ name, value, type }, index) => (
                   <div
                     key={index}
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 6de77cad9e..a89725419e 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -8,6 +8,7 @@ import type {
   MetadataFilteringModeEnum,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { intersectionBy } from 'es-toolkit/compat'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -30,7 +31,6 @@ import {
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { hasEditPermissionForDataset } from '@/utils/permission'
 import FeaturePanel from '../base/feature-panel'
 import OperationBtn from '../base/operation-btn'
@@ -291,7 +291,7 @@ const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
           )
         : (
             <div className="mt-1 px-3 pb-3">
-              <div className="pb-1 pt-2 text-xs text-text-tertiary">{t('feature.dataSet.noData', { ns: 'appDebug' })}</div>
+              <div className="pt-2 pb-1 text-xs text-text-tertiary">{t('feature.dataSet.noData', { ns: 'appDebug' })}</div>
             </div>
           )}
 
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index 00fa66c426..47ece57eb0 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -9,6 +9,7 @@ import type {
 import type {
   DatasetConfigs,
 } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
@@ -24,7 +25,6 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowledge-retrieval/hooks'
 import { RerankingModeEnum } from '@/models/datasets'
 import { RETRIEVE_TYPE } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import WeightedScore from './weighted-score'
 
 type Props = {
@@ -188,14 +188,14 @@ const ConfigContent: FC<Props> = ({
 
   return (
     <div>
-      <div className="text-text-primary system-xl-semibold">{t('retrievalSettings', { ns: 'dataset' })}</div>
-      <div className="text-text-tertiary system-xs-regular">
+      <div className="system-xl-semibold text-text-primary">{t('retrievalSettings', { ns: 'dataset' })}</div>
+      <div className="system-xs-regular text-text-tertiary">
         {t('defaultRetrievalTip', { ns: 'dataset' })}
       </div>
       {type === RETRIEVE_TYPE.multiWay && (
         <>
           <div className="my-2 flex flex-col items-center py-1">
-            <div className="mb-2 mr-2 shrink-0 text-text-secondary system-xs-semibold-uppercase">
+            <div className="mr-2 mb-2 shrink-0 system-xs-semibold-uppercase text-text-secondary">
               {t('rerankSettings', { ns: 'dataset' })}
             </div>
             <Divider bgStyle="gradient" className="m-0 h-px!" />
@@ -203,21 +203,21 @@ const ConfigContent: FC<Props> = ({
           {
             selectedDatasetsMode.inconsistentEmbeddingModel
             && (
-              <div className="mt-4 text-text-warning system-xs-medium">
+              <div className="mt-4 system-xs-medium text-text-warning">
                 {t('inconsistentEmbeddingModelTip', { ns: 'dataset' })}
               </div>
             )
           }
           {
             selectedDatasetsMode.mixtureInternalAndExternal && (
-              <div className="mt-4 text-text-warning system-xs-medium">
+              <div className="mt-4 system-xs-medium text-text-warning">
                 {t('mixtureInternalAndExternalTip', { ns: 'dataset' })}
               </div>
             )
           }
           {
             selectedDatasetsMode.allExternal && (
-              <div className="mt-4 text-text-warning system-xs-medium">
+              <div className="mt-4 system-xs-medium text-text-warning">
                 {t('allExternalTip', { ns: 'dataset' })}
               </div>
             )
@@ -225,7 +225,7 @@ const ConfigContent: FC<Props> = ({
           {
             selectedDatasetsMode.mixtureHighQualityAndEconomic
             && (
-              <div className="mt-4 text-text-warning system-xs-medium">
+              <div className="mt-4 system-xs-medium text-text-warning">
                 {t('mixtureHighQualityAndEconomicTip', { ns: 'dataset' })}
               </div>
             )
@@ -238,7 +238,7 @@ const ConfigContent: FC<Props> = ({
                     <div
                       key={option.value}
                       className={cn(
-                        'flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary system-sm-medium',
+                        'flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg system-sm-medium text-text-secondary',
                         selectedRerankMode === option.value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
                       )}
                       onClick={() => handleRerankModeChange(option.value)}
@@ -272,7 +272,7 @@ const ConfigContent: FC<Props> = ({
                       />
                     )
                   }
-                  <div className="ml-1 leading-[32px] text-text-secondary system-sm-semibold">{t('modelProvider.rerankModel.key', { ns: 'common' })}</div>
+                  <div className="ml-1 system-sm-semibold leading-[32px] text-text-secondary">{t('modelProvider.rerankModel.key', { ns: 'common' })}</div>
                   <Tooltip
                     popupContent={(
                       <div className="w-[200px]">
@@ -362,7 +362,7 @@ const ConfigContent: FC<Props> = ({
       {isInWorkflow && type === RETRIEVE_TYPE.oneWay && (
         <div className="mt-4">
           <div className="flex items-center space-x-0.5">
-            <div className="text-[13px] font-medium leading-[32px] text-text-primary">{t('modelProvider.systemReasoningModel.key', { ns: 'common' })}</div>
+            <div className="text-[13px] leading-[32px] font-medium text-text-primary">{t('modelProvider.systemReasoningModel.key', { ns: 'common' })}</div>
             <Tooltip
               popupContent={t('modelProvider.systemReasoningModel.tip', { ns: 'common' })}
             />
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index 5c40afba9f..ce78ad6e99 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +17,6 @@ import {
 import ConfigContext from '@/context/debug-configuration'
 import { RerankingModeEnum } from '@/models/datasets'
 import { RETRIEVE_TYPE } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import ConfigContent from './config-content'
 
 type ParamsConfigProps = {
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index 21ed5134b0..ff371fc2df 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useInfiniteScroll } from 'ahooks'
 import * as React from 'react'
 import { useMemo, useRef, useState } from 'react'
@@ -15,7 +16,6 @@ import FeatureIcon from '@/app/components/header/account-setting/model-provider-
 import { useKnowledge } from '@/hooks/use-knowledge'
 import Link from '@/next/link'
 import { useInfiniteDatasets } from '@/service/knowledge/use-dataset'
-import { cn } from '@/utils/classnames'
 
 type ISelectDataSetProps = {
   isShow: boolean
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index dc8823cacb..872d081307 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { Member } from '@/models/common'
 import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { isEqual } from 'es-toolkit/predicate'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -25,7 +26,6 @@ import { useModalContext } from '@/context/modal-context'
 import { DatasetPermission } from '@/models/datasets'
 import { updateDatasetSetting } from '@/service/datasets'
 import { useMembers } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import { RetrievalChangeTip, RetrievalSection } from './retrieval-section'
 
 type SettingsModalProps = {
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
index 6d478de908..c67c50f1d1 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
 import type { DocPathWithoutLang } from '@/types/doc-paths'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
@@ -10,7 +11,6 @@ import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/ec
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import RetrievalSettings from '@/app/components/datasets/external-knowledge-base/create/RetrievalSettings'
-import { cn } from '@/utils/classnames'
 
 type CommonSectionProps = {
   rowClass: string
@@ -58,7 +58,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
       <div className="w-full max-w-[480px]">
         <div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
           <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
-          <div className="system-sm-medium overflow-hidden text-ellipsis text-text-secondary">
+          <div className="overflow-hidden system-sm-medium text-ellipsis text-text-secondary">
             {currentDataset?.external_knowledge_info.external_knowledge_api_name}
           </div>
           <div className="system-xs-regular text-text-tertiary">·</div>
@@ -102,7 +102,7 @@ const InternalRetrievalSection: FC<InternalRetrievalSectionProps> = ({
     <div className={cn(labelClass, 'w-auto min-w-[168px]')}>
       <div>
         <div className="system-sm-semibold text-text-secondary">{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
-        <div className="text-xs font-normal leading-[18px] text-text-tertiary">
+        <div className="text-xs leading-[18px] font-normal text-text-tertiary">
           <a target="_blank" rel="noopener noreferrer" href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')} className="text-text-accent">{t('form.retrievalSetting.learnMore', { ns: 'datasetSettings' })}</a>
           {t('form.retrievalSetting.description', { ns: 'datasetSettings' })}
         </div>
@@ -198,10 +198,10 @@ export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
     return null
 
   return (
-    <div className="absolute bottom-[76px] left-[30px] right-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg">
+    <div className="absolute right-[30px] bottom-[76px] left-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg">
       <div className="flex items-center">
         <AlertTriangle className="mr-1 h-3 w-3 text-[#F79009]" />
-        <div className="text-xs font-medium leading-[18px] text-gray-700">{message}</div>
+        <div className="text-xs leading-[18px] font-medium text-gray-700">{message}</div>
       </div>
       <button
         type="button"
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index 114a9f8f62..b1285b712c 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -1,4 +1,5 @@
 import type { Inputs } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import ConfigContext from '@/context/debug-configuration'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   inputs: Inputs
@@ -67,7 +67,7 @@ const ChatUserInput = ({
 
   return (
     <div className={cn('z-1 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
-      <div className="px-4 pb-4 pt-3">
+      <div className="px-4 pt-3 pb-4">
         {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
           <div
             key={key}
@@ -75,7 +75,7 @@ const ChatUserInput = ({
           >
             <div>
               {type !== 'checkbox' && (
-                <div className="system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary">
+                <div className="mb-1 flex h-6 items-center gap-1 system-sm-semibold text-text-secondary">
                   <div className="truncate">{name || key}</div>
                   {!required && <span className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</span>}
                 </div>
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 8bd8acadb5..88bca7111c 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -511,8 +511,8 @@ const Debug: FC<IDebug> = ({
             {modelConfig.provider && isAPIKeySet && !modelConfig.model_id && (
               <div className="flex grow flex-col items-center justify-center pb-[120px]">
                 <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
-                  <div className="flex h-10 w-10 items-center justify-center radius-lg">
-                    <div className="flex h-full w-full items-center justify-center overflow-hidden radius-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
+                    <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
                       <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
                     </div>
                   </div>
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 24397128c6..a9df145ca1 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Inputs } from '@/models/debug'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiArrowRightSLine,
@@ -22,7 +23,6 @@ import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum, ModelModeType } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 export type IPromptValuePanelProps = {
   appType: AppModeEnum
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index 2674d3ab1e..9241461608 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { App } from '@/models/explore'
 import { PlusIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiInformation2Line } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import { Button } from '@/app/components/base/ui/button'
 import AppListContext from '@/context/app-list-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 import { AppTypeIcon, AppTypeLabel } from '../../type-selector'
 
 type AppCardProps = {
@@ -45,7 +45,7 @@ const AppCard = ({
             imageUrl={appBasicInfo.icon_url}
           />
           <AppTypeIcon
-            wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 radius-xs border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
+            wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
             className="h-3 w-3"
             type={appBasicInfo.mode}
           />
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 daf49115c8..19089d6364 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
@@ -2,6 +2,7 @@
 
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { App } from '@/models/explore'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiRobot2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
@@ -23,7 +24,6 @@ import { fetchAppDetail } from '@/service/explore'
 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'
@@ -183,7 +183,7 @@ const Apps = ({
         <div className="h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2">
           {searchFilteredList && searchFilteredList.length > 0 && (
             <>
-              <div className="pb-1 pt-4">
+              <div className="pt-4 pb-1">
                 {searchKeywords
                   ? <p className="title-md-semi-bold text-text-tertiary">{searchFilteredList.length > 1 ? t('newApp.foundResults', { ns: 'app', count: searchFilteredList.length }) : t('newApp.foundResult', { ns: 'app', count: searchFilteredList.length })}</p>
                   : (
@@ -194,7 +194,7 @@ const Apps = ({
               </div>
               <div
                 className={cn(
-                  'grid shrink-0 grid-cols-1 content-start gap-3 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
+                  'grid shrink-0 grid-cols-1 content-start gap-3 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
                 )}
               >
                 {searchFilteredList.map(app => (
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index ced14465c1..128e597259 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiStickyNoteAddLine, RiThumbUpLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { cn } from '@/utils/classnames'
 
 export enum AppCategories {
   RECOMMENDED = 'Recommended',
@@ -22,7 +22,7 @@ export default function Sidebar({ current, categories, onClick, onCreateFromBlan
       <ul className="pt-0.5">
         <CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
       </ul>
-      <div className="system-xs-medium-uppercase mb-0.5 mt-3 px-3 pb-1 pt-2 text-text-tertiary">{t('newAppFromTemplate.byCategories', { ns: 'app' })}</div>
+      <div className="mt-3 mb-0.5 px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{t('newAppFromTemplate.byCategories', { ns: 'app' })}</div>
       <ul className="flex grow flex-col gap-0.5">
         {categories.map(category => (<CategoryItem key={category} category={category} active={current === category} onClick={onClick} />))}
       </ul>
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 61681892d2..073107755f 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -1,8 +1,9 @@
 'use client'
 
 import type { AppIconSelection } from '../../base/app-icon-picker'
-import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
+import { cn } from '@langgenius/dify-ui/cn'
 
+import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -23,7 +24,6 @@ import { useRouter } from '@/next/navigation'
 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'
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 d588610f71..d4b857ee6b 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { MouseEventHandler } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -25,7 +26,6 @@ import {
   importDSLConfirm,
 } 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'
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index 7480da4b5f..1daa7e9f7b 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiUploadCloud2Line,
@@ -10,7 +11,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 
 type Props = {
@@ -107,7 +107,7 @@ const Uploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex h-12 items-center radius-lg border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
+          <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
               <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
               <div className="text-text-tertiary">
@@ -115,7 +115,7 @@ const Uploader: FC<Props> = ({
                 <span className="cursor-pointer pl-1 text-text-accent" onClick={selectHandle}>{t('dslUploader.browse', { ns: 'app' })}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
           </div>
         )}
         {file && (
@@ -124,8 +124,8 @@ const Uploader: FC<Props> = ({
               <YamlIcon className="h-6 w-6 shrink-0" />
             </div>
             <div className="flex grow flex-col items-start gap-0.5 py-1 pr-2">
-              <span className="font-inter max-w-[calc(100%-30px)] overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium leading-4 text-text-secondary">{file.name}</span>
-              <div className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] font-medium uppercase leading-3 text-text-tertiary">
+              <span className="font-inter max-w-[calc(100%-30px)] overflow-hidden text-[12px] leading-4 font-medium text-ellipsis whitespace-nowrap text-text-secondary">{file.name}</span>
+              <div className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase">
                 <span>{displayName}</span>
                 <span className="text-text-quaternary">·</span>
                 <span>{formatFileSize(file.size)}</span>
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 2fe1d2124d..c28ead7821 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { AppIconType } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -12,7 +13,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import AppIconPicker from '../../base/app-icon-picker'
 
 export type DuplicateAppModalProps = {
diff --git a/web/app/components/app/in-site-message/index.tsx b/web/app/components/app/in-site-message/index.tsx
index fd7ced191e..5482086483 100644
--- a/web/app/components/app/in-site-message/index.tsx
+++ b/web/app/components/app/in-site-message/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect, useMemo, useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type InSiteMessageAction = 'link' | 'close'
 type InSiteMessageButtonType = 'primary' | 'default'
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index c5c21289df..857b306f10 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import { useRouter } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   pageType: PageType
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 01621e0d2a..551bae0212 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -8,6 +8,7 @@ import {
   HandThumbDownIcon,
   HandThumbUpIcon,
 } from '@heroicons/react/24/outline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiEditFill } from '@remixicon/react'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
@@ -38,7 +39,6 @@ import { fetchChatMessages, updateLogMessageAnnotations, updateLogMessageFeedbac
 import { AppSourceType } from '@/service/share'
 import { useChatConversationDetail, useCompletionConversationDetail } from '@/service/use-log'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import PromptLogModal from '../../base/prompt-log-modal'
 import Indicator from '../../header/indicator'
 import {
@@ -404,11 +404,11 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
   return (
     <div ref={ref} className="flex h-full flex-col rounded-xl border-[0.5px] border-components-panel-border">
       {/* Panel Header */}
-      <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3">
+      <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pt-3 pr-3 pb-2 pl-4">
         <div className="shrink-0">
-          <div className="mb-0.5 text-text-primary system-xs-semibold-uppercase">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
+          <div className="mb-0.5 system-xs-semibold-uppercase text-text-primary">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
           {isChatMode && (
-            <div className="flex items-center text-text-secondary system-2xs-regular-uppercase">
+            <div className="flex items-center system-2xs-regular-uppercase text-text-secondary">
               <Tooltip
                 popupContent={detail.id}
               >
@@ -418,7 +418,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             </div>
           )}
           {!isChatMode && (
-            <div className="text-text-secondary system-2xs-regular-uppercase">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+            <div className="system-2xs-regular-uppercase text-text-secondary">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
           )}
         </div>
         <div className="flex grow flex-wrap items-center justify-end gap-y-1">
@@ -444,7 +444,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           ? (
               <div className="px-6 py-4">
                 <div className="flex h-[18px] items-center space-x-3">
-                  <div className="text-text-tertiary system-xs-semibold-uppercase">{t('table.header.output', { ns: 'appLog' })}</div>
+                  <div className="system-xs-semibold-uppercase text-text-tertiary">{t('table.header.output', { ns: 'appLog' })}</div>
                   <div
                     className="h-px grow"
                     style={{
@@ -536,7 +536,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
               </div>
               {hasMore && (
                 <div className="py-3 text-center">
-                  <div className="text-text-tertiary system-xs-regular">
+                  <div className="system-xs-regular text-text-tertiary">
                     {t('detail.loading', { ns: 'appLog' })}
                     ...
                   </div>
@@ -778,7 +778,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         )}
         popupClassName={(isHighlight && !isChatMode) ? '' : 'hidden!'}
       >
-        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular')}>
+        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden system-sm-regular text-ellipsis whitespace-nowrap')}>
           {value || '-'}
         </div>
       </Tooltip>
@@ -791,20 +791,20 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
   return (
     <div className="relative mt-2 grow overflow-x-auto">
       <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-        <thead className="text-text-tertiary system-xs-medium-uppercase">
+        <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">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.endUser', { ns: 'appLog' })}</td>
-            {isChatflow && <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">{isChatMode ? t('table.header.messageCount', { ns: 'appLog' }) : t('table.header.output', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.userRate', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.adminRate', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.updatedTime', { ns: 'appLog' })}</td>
-            <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.time', { ns: 'appLog' })}</td>
+            <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">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.endUser', { ns: 'appLog' })}</td>
+            {isChatflow && <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">{isChatMode ? t('table.header.messageCount', { ns: 'appLog' }) : t('table.header.output', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.userRate', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.adminRate', { ns: 'appLog' })}</td>
+            <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.updatedTime', { ns: 'appLog' })}</td>
+            <td className="rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.time', { ns: 'appLog' })}</td>
           </tr>
         </thead>
-        <tbody className="text-text-secondary system-sm-regular">
+        <tbody className="system-sm-regular text-text-secondary">
           {logs.data.map((log: any) => {
             const { endUser, isLeftEmpty, isRightEmpty, leftValue, rightValue } = getConversationRowValues({
               isChatMode,
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index 035f50d165..5fe0eb590b 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiInformation2Line,
 } from '@remixicon/react'
@@ -13,7 +14,6 @@ import {
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
-import { cn } from '@/utils/classnames'
 
 const PARAM_MAP = {
   temperature: 'Temperature',
@@ -57,7 +57,7 @@ const ModelInfo: FC<Props> = ({
 
   return (
     <div className={cn('flex items-center rounded-lg')}>
-      <div className="mr-px flex h-8 shrink-0 items-center gap-1 rounded-l-lg bg-components-input-bg-normal pl-1.5 pr-2">
+      <div className="mr-px flex h-8 shrink-0 items-center gap-1 rounded-l-lg bg-components-input-bg-normal pr-2 pl-1.5">
         <ModelIcon
           className="h-5! w-5!"
           provider={currentProvider}
@@ -88,8 +88,8 @@ const ModelInfo: FC<Props> = ({
             </div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className="z-1002">
-            <div className="relative w-[280px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-4 pb-2 pt-3 shadow-xl">
-              <div className="system-sm-semibold-uppercase mb-1 h-6 text-text-secondary">{t('detail.modelParams', { ns: 'appLog' })}</div>
+            <div className="relative w-[280px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-2 shadow-xl">
+              <div className="mb-1 h-6 system-sm-semibold-uppercase text-text-secondary">{t('detail.modelParams', { ns: 'appLog' })}</div>
               <div className="py-1">
                 {['temperature', 'top_p', 'presence_penalty', 'max_tokens', 'stop'].map((param: string, index: number) => {
                   return (
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index 5e0e20e1b4..7e75f54a0a 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/web/app/components/app/log/var-panel.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiArrowRightSLine,
@@ -10,7 +11,6 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   varList: { label: string, value: string }[]
@@ -26,13 +26,13 @@ const VarPanel: FC<Props> = ({
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
 
   return (
-    <div className="radius-lg border border-divider-subtle bg-chat-bubble-bg">
+    <div className="rounded-[10px] border border-divider-subtle bg-chat-bubble-bg">
       <div
-        className={cn('flex cursor-pointer items-center gap-1 border-b border-divider-subtle px-3 pb-2 pt-2.5 text-text-secondary', isCollapse && 'border-0 pb-2.5')}
+        className={cn('flex cursor-pointer items-center gap-1 border-b border-divider-subtle px-3 pt-2.5 pb-2 text-text-secondary', isCollapse && 'border-0 pb-2.5')}
         onClick={toggleCollapse}
       >
         <Variable02 className="h-4 w-4" />
-        <div className="system-md-medium grow">{t('detail.variables', { ns: 'appLog' })}</div>
+        <div className="grow system-md-medium">{t('detail.variables', { ns: 'appLog' })}</div>
         {
           isCollapse
             ? <RiArrowRightSLine className="h-4 w-4" />
@@ -42,19 +42,19 @@ const VarPanel: FC<Props> = ({
       {!isCollapse && (
         <div className="flex max-h-[500px] flex-col gap-2 overflow-y-auto p-3">
           {varList.map(({ label, value }, index) => (
-            <div key={index} className="system-xs-medium flex py-2">
+            <div key={index} className="flex py-2 system-xs-medium">
               <div className="flex w-[128px] shrink-0 text-text-accent">
                 <span className="shrink-0 opacity-60">{'{{'}</span>
                 <span className="truncate">{label}</span>
                 <span className="shrink-0 opacity-60">{'}}'}</span>
               </div>
-              <div className="whitespace-pre-wrap pl-2.5 text-text-secondary">{value}</div>
+              <div className="pl-2.5 whitespace-pre-wrap text-text-secondary">{value}</div>
             </div>
           ))}
 
           {message_files.length > 0 && (
             <div className="mt-1 flex py-2">
-              <div className="system-xs-medium w-[128px] shrink-0 text-text-tertiary">{t('detail.uploadImages', { ns: 'appLog' })}</div>
+              <div className="w-[128px] shrink-0 system-xs-medium text-text-tertiary">{t('detail.uploadImages', { ns: 'appLog' })}</div>
               <div className="flex space-x-2">
                 {message_files.map((url, index) => (
                   <div
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index e8071ff7ae..9df9204183 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
@@ -10,7 +11,6 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { IS_CE_EDITION } from '@/config'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 
 const APIKeyInfoPanel: FC = () => {
   const isCloud = !IS_CE_EDITION
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index d9d954051b..547d80f0fe 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -1,4 +1,5 @@
 import type { SiteInfo } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiClipboardFill,
   RiClipboardLine,
@@ -13,7 +14,6 @@ import Modal from '@/app/components/base/modal'
 import Tooltip from '@/app/components/base/tooltip'
 import { IS_CE_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import style from './style.module.css'
 
@@ -139,7 +139,7 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
       wrapperClassName={className}
       closable={true}
     >
-      <div className="system-sm-medium mb-4 mt-8 text-text-primary">
+      <div className="mt-8 mb-4 system-sm-medium text-text-primary">
         {t(`${prefixEmbedded}.explanation`, { ns: 'appOverview' })}
       </div>
       <div className="flex flex-wrap items-center justify-between gap-y-2">
@@ -165,13 +165,13 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
         <div className="mt-6 w-full">
           <div className={cn('inline-flex w-full items-center justify-center gap-2 rounded-lg py-3', 'shrink-0 cursor-pointer bg-primary-600 text-white hover:bg-primary-600/75 hover:shadow-sm')}>
             <div className={`relative h-4 w-4 ${style.pluginInstallIcon}`}></div>
-            <div className="font-['Inter'] text-sm font-medium leading-tight text-white" onClick={navigateToChromeUrl}>{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
+            <div className="font-['Inter'] text-sm leading-tight font-medium text-white" onClick={navigateToChromeUrl}>{t(`${prefixEmbedded}.chromePlugin`, { ns: 'appOverview' })}</div>
           </div>
         </div>
       )}
       <div className={cn('inline-flex w-full flex-col items-start justify-start rounded-lg border-[0.5px] border-components-panel-border bg-background-section', 'mt-6')}>
-        <div className="inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg bg-background-section-burn py-1  pl-3 pr-1">
-          <div className="system-sm-medium shrink-0 grow text-text-secondary">
+        <div className="inline-flex items-center justify-start gap-2 self-stretch rounded-t-lg bg-background-section-burn py-1 pr-1 pl-3">
+          <div className="shrink-0 grow system-sm-medium text-text-secondary">
             {t(`${prefixEmbedded}.${option}`, { ns: 'appOverview' })}
           </div>
           <Tooltip
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 131a0f9fd5..e94977ed9f 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -27,7 +28,6 @@ import { useProviderContext } from '@/context/provider-context'
 import { languages } from '@/i18n-config/language'
 import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type ISettingsModalProps = {
   isChat: boolean
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index aa7f1974ec..272214c5ee 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useState } from 'react'
@@ -11,7 +12,6 @@ import Checkbox from '@/app/components/base/checkbox'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -21,6 +21,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -30,7 +31,6 @@ import { useRouter } from '@/next/navigation'
 import { deleteApp, switchApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
-import { cn } from '@/utils/classnames'
 import AppIconPicker from '../../base/app-icon-picker'
 
 type SwitchAppModalProps = {
diff --git a/web/app/components/app/text-generate/item/action-groups.tsx b/web/app/components/app/text-generate/item/action-groups.tsx
index 783d488a78..9d9ba6daa3 100644
--- a/web/app/components/app/text-generate/item/action-groups.tsx
+++ b/web/app/components/app/text-generate/item/action-groups.tsx
@@ -72,7 +72,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
   return (
     <>
       {!isInWebApp && (appSourceType !== AppSourceTypeEnum.installedApp) && !isResponding && (
-        <div className="ml-1 flex items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
+        <div className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
           <ActionButton
             aria-label={t('operation.log', { ns: 'common' })}
             disabled={isError || !messageId}
@@ -83,7 +83,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
           </ActionButton>
         </div>
       )}
-      <div className="ml-1 flex items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
+      <div className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
         {moreLikeThis && !isTryApp && (
           <ActionButton
             aria-label={t('feature.moreLikeThis.title', { ns: 'appDebug' })}
@@ -139,7 +139,7 @@ const GenerationActionGroups: FC<GenerationActionGroupsProps> = ({
         )}
       </div>
       {(supportFeedback || isInWebApp) && !isWorkflow && !isTryApp && !isError && messageId && (
-        <div className="ml-1 flex items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
+        <div className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
           {!feedback?.rating && (
             <>
               <ActionButton
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 7eb7c9ad2b..a6f5e6875b 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { FeedbackType } from '@/app/components/base/chat/chat/type'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 import type { SiteInfo } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiPlayList2Line,
   RiSparklingFill,
@@ -20,7 +21,6 @@ import { useParams } from '@/next/navigation'
 import { fetchTextGenerationMessage } from '@/service/debug'
 import { AppSourceType, fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
 import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
-import { cn } from '@/utils/classnames'
 import GenerationActionGroups from './action-groups'
 import {
   buildPromptLogItem,
@@ -213,7 +213,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 workflowProcessData={workflowProcessData}
               />
               {!workflowProcessData && taskId && (
-                <div className={cn('system-2xs-medium-uppercase sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary', isError && 'text-text-destructive')}>
+                <div className={cn('sticky top-0 left-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 system-2xs-medium-uppercase text-text-accent-secondary', isError && 'text-text-destructive')}>
                   <RiPlayList2Line className="mr-1 h-3 w-3" />
                   <span>{t('generation.execution', { ns: 'share' })}</span>
                   <span className="px-1">·</span>
@@ -221,7 +221,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 </div>
               )}
               {isError && (
-                <div className="body-lg-regular p-4 pt-0 text-text-quaternary">{t('generation.batchFailed.outputPlaceholder', { ns: 'share' })}</div>
+                <div className="p-4 pt-0 body-lg-regular text-text-quaternary">{t('generation.batchFailed.outputPlaceholder', { ns: 'share' })}</div>
               )}
               {!workflowProcessData && !isError && (typeof content === 'string') && (
                 <div className={cn('p-4', taskId && 'pt-0')}>
@@ -231,7 +231,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             </div>
             {/* meta data */}
             <div className={cn(
-              'system-xs-regular relative mt-1 h-4 px-4 text-text-quaternary',
+              'relative mt-1 h-4 px-4 system-xs-regular text-text-quaternary',
               isMobile && ((childMessageId || isQuerying) && depth < MAX_GENERATION_DEPTH) && 'pl-10',
             )}
             >
@@ -243,7 +243,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 </span>
               )}
               {/* action buttons */}
-              <div className="absolute bottom-1 right-2 flex items-center">
+              <div className="absolute right-2 bottom-1 flex items-center">
                 <GenerationActionGroups
                   appSourceType={appSourceType}
                   content={content}
diff --git a/web/app/components/app/text-generate/item/workflow-body.tsx b/web/app/components/app/text-generate/item/workflow-body.tsx
index 96c27dd803..d5a076ace9 100644
--- a/web/app/components/app/text-generate/item/workflow-body.tsx
+++ b/web/app/components/app/text-generate/item/workflow-body.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 import type { SiteInfo } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiPlayList2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import HumanInputFilledFormList from '@/app/components/base/chat/chat/answer/human-input-filled-form-list'
 import HumanInputFormList from '@/app/components/base/chat/chat/answer/human-input-form-list'
 import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow-process'
-import { cn } from '@/utils/classnames'
 import ResultTab from './result-tab'
 import { getGenerationTaskLabel } from './utils'
 
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index a7f52f1884..605461dbd7 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { SavedMessage } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiClipboardLine,
   RiDeleteBinLine,
@@ -12,7 +13,6 @@ import ActionButton from '@/app/components/base/action-button'
 import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 import NoData from './no-data'
 
 export type ISavedItemsProps = {
@@ -48,15 +48,15 @@ const SavedItems: FC<ISavedItemsProps> = ({
                   >
                     <Markdown content={answer} />
                   </div>
-                  <div className="system-xs-regular mt-1 h-4 px-4 text-text-quaternary">
+                  <div className="mt-1 h-4 px-4 system-xs-regular text-text-quaternary">
                     <span>
                       {answer.length}
                       {' '}
                       {t('unit.char', { ns: 'common' })}
                     </span>
                   </div>
-                  <div className="absolute bottom-1 right-2">
-                    <div className="ml-1 flex items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
+                  <div className="absolute right-2 bottom-1">
+                    <div className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs">
                       {isShowTextToSpeech && <NewAudioButton value={answer} />}
                       <ActionButton onClick={() => {
                         copy(answer)
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
index cf7c9b6f89..2bf6e9b20a 100644
--- a/web/app/components/app/text-generate/saved-items/no-data/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
@@ -19,7 +19,7 @@ const NoData: FC<INoDataProps> = ({
 
   return (
     <div className="rounded-xl bg-background-section-burn p-6">
-      <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
+      <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
         <RiBookmark3Line className="h-4 w-4 text-text-accent" />
       </div>
       <div className="mt-3">
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index cb4db155d4..6b8f8985c2 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCloseCircleFill, RiExchange2Fill, RiFilter3Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
@@ -9,7 +10,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type AppSelectorProps = {
   value: Array<AppModeEnum>
@@ -44,7 +44,7 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
           <button
             type="button"
             aria-label={t('operation.clear', { ns: 'common' })}
-            className="group absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2"
+            className="group absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2"
             onClick={() => onChange([])}
           >
             <RiCloseCircleFill
@@ -137,7 +137,7 @@ function AppTypeSelectTrigger({ values }: { readonly values: AppSelectorProps['v
       )}
       >
         <RiFilter3Line className="h-4 w-4 text-text-tertiary" />
-        <div className="system-sm-medium min-w-[65px] grow text-center text-text-tertiary">{t('typeSelector.all', { ns: 'app' })}</div>
+        <div className="min-w-[65px] grow text-center system-sm-medium text-text-tertiary">{t('typeSelector.all', { ns: 'app' })}</div>
         <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
       </div>
     )
@@ -175,14 +175,14 @@ function AppTypeSelectorItem({ checked, type, onClick }: AppTypeSelectorItemProp
     <li>
       <button
         type="button"
-        className="flex w-full items-center space-x-2 rounded-lg py-1 pl-2 pr-1 text-left hover:bg-state-base-hover"
+        className="flex w-full items-center space-x-2 rounded-lg py-1 pr-1 pl-2 text-left hover:bg-state-base-hover"
         aria-pressed={checked}
         onClick={onClick}
       >
         <span
           aria-hidden="true"
           className={cn(
-            'flex h-4 w-4 shrink-0 items-center justify-center radius-xs shadow-xs shadow-shadow-shadow-3',
+            'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3',
             checked
               ? 'bg-components-checkbox-bg text-components-checkbox-icon'
               : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked',
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 18ec914c7d..e514962d9b 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -3,6 +3,7 @@ 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'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import Indicator from '@/app/components/header/indicator'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import DetailPanel from './detail'
 import TriggerByDisplay from './trigger-by-display'
 
@@ -59,7 +59,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 +67,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 +75,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 +83,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 +91,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 +99,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>
@@ -121,8 +121,8 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
       <table className={cn('mt-2 w-full min-w-[440px] 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
@@ -130,11 +130,11 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
                 />
               </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={cn('bg-background-section-burn py-1.5 pl-3 whitespace-nowrap', !isWorkflow ? 'rounded-r-lg' : '')}>{t('table.header.user', { 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">
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 1cc504d746..f4136b5270 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -6,6 +6,7 @@ import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useId, useMemo, useState } from 'react'
@@ -42,7 +43,6 @@ import { useDeleteAppMutation } from '@/service/use-apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
-import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
 import { formatTime } from '@/utils/time'
 import { basePath } from '@/utils/var'
@@ -281,14 +281,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     return (
       <div className="relative flex w-full flex-col py-1" onMouseLeave={onMouseLeave}>
         <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickSettings}>
-          <span className="text-text-secondary system-sm-regular">{t('editApp', { ns: 'app' })}</span>
+          <span className="system-sm-regular text-text-secondary">{t('editApp', { ns: 'app' })}</span>
         </button>
         <Divider className="my-1" />
         <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickDuplicate}>
-          <span className="text-text-secondary system-sm-regular">{t('duplicate', { ns: 'app' })}</span>
+          <span className="system-sm-regular text-text-secondary">{t('duplicate', { ns: 'app' })}</span>
         </button>
         <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickExport}>
-          <span className="text-text-secondary system-sm-regular">{t('export', { ns: 'app' })}</span>
+          <span className="system-sm-regular text-text-secondary">{t('export', { ns: 'app' })}</span>
         </button>
         {(app.mode === AppModeEnum.COMPLETION || app.mode === AppModeEnum.CHAT) && (
           <>
@@ -309,7 +309,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   <>
                     <Divider className="my-1" />
                     <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickInstalledApp}>
-                      <span className="text-text-secondary system-sm-regular">{t('openInExplore', { ns: 'app' })}</span>
+                      <span className="system-sm-regular text-text-secondary">{t('openInExplore', { ns: 'app' })}</span>
                     </button>
                   </>
                 )
@@ -317,7 +317,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   <>
                     <Divider className="my-1" />
                     <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickInstalledApp}>
-                      <span className="text-text-secondary system-sm-regular">{t('openInExplore', { ns: 'app' })}</span>
+                      <span className="system-sm-regular text-text-secondary">{t('openInExplore', { ns: 'app' })}</span>
                     </button>
                   </>
                 )
@@ -339,7 +339,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           className="group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover"
           onClick={onClickDelete}
         >
-          <span className="text-text-secondary system-sm-regular group-hover:text-text-destructive">
+          <span className="system-sm-regular text-text-secondary group-hover:text-text-destructive">
             {t('operation.delete', { ns: 'common' })}
           </span>
         </button>
@@ -369,7 +369,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         }}
         className="group relative col-span-1 inline-flex h-[160px] cursor-pointer flex-col rounded-xl border border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg"
       >
-        <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]">
+        <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pt-[14px] pb-3">
           <div className="relative shrink-0">
             <AppIcon
               size="large"
@@ -381,10 +381,10 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             <AppTypeIcon type={app.mode} wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm" className="h-3 w-3" />
           </div>
           <div className="w-0 grow py-px">
-            <div className="flex items-center text-sm font-semibold leading-5 text-text-secondary">
+            <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
               <div className="truncate" title={app.name}>{app.name}</div>
             </div>
-            <div className="flex items-center gap-1 text-[10px] font-medium leading-[18px] text-text-tertiary">
+            <div className="flex items-center gap-1 text-[10px] leading-[18px] font-medium text-text-tertiary">
               <div className="truncate" title={app.author_name}>{app.author_name}</div>
               <div>·</div>
               <div className="truncate" title={EditTimeText}>{EditTimeText}</div>
@@ -421,7 +421,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             {app.description}
           </div>
         </div>
-        <div className="absolute bottom-1 left-0 right-0 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1">
+        <div className="absolute right-0 bottom-1 left-0 flex h-[42px] shrink-0 items-center pt-1 pr-[6px] pb-[6px] pl-[14px]">
           {isCurrentWorkspaceEditor && (
             <>
               <div
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 2ef344f816..5e15102a49 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -17,7 +18,6 @@ import { CheckModal } from '@/hooks/use-pay'
 import dynamic from '@/next/dynamic'
 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 Empty from './empty'
@@ -115,12 +115,12 @@ const List: FC<Props> = ({
 
   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]" /> },
+    { 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]" /> },
   ]
 
   useEffect(() => {
@@ -195,7 +195,7 @@ const List: FC<Props> = ({
           </div>
         )}
 
-        <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">
           <TabSliderNew
             value={activeTab}
             onChange={(nextValue) => {
@@ -223,7 +223,7 @@ const List: FC<Props> = ({
           </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',
+          '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',
         )}
         >
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
index 31a374f6f7..fa9d1ac952 100644
--- a/web/app/components/apps/new-app-card.tsx
+++ b/web/app/components/apps/new-app-card.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,7 +14,6 @@ import {
   useRouter,
   useSearchParams,
 } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 
 const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), {
   ssr: false,
@@ -74,19 +74,19 @@ const CreateAppCard = ({
       )}
     >
       <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('createApp', { ns: 'app' })}</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" onClick={() => setShowNewAppModal(true)}>
+        <div className="px-6 pt-2 pb-1 text-xs leading-[18px] font-medium text-text-tertiary">{t('createApp', { ns: 'app' })}</div>
+        <button type="button" className="mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary" onClick={() => setShowNewAppModal(true)}>
           <FilePlus01 className="mr-2 h-4 w-4 shrink-0" />
           {t('newApp.startFromBlank', { ns: 'app' })}
         </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={() => setShowNewAppTemplateDialog(true)}>
+        <button type="button" className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary" onClick={() => setShowNewAppTemplateDialog(true)}>
           <FilePlus02 className="mr-2 h-4 w-4 shrink-0" />
           {t('newApp.startFromTemplate', { ns: 'app' })}
         </button>
         <button
           type="button"
           onClick={() => setShowCreateFromDSLModal(true)}
-          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"
+          className="flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
         >
           <FileArrow01 className="mr-2 h-4 w-4 shrink-0" />
           {t('importDSL', { ns: 'app' })}
diff --git a/web/app/components/base/action-button/index.tsx b/web/app/components/base/action-button/index.tsx
index d182193b00..ec84fa06d8 100644
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -1,8 +1,8 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { CSSProperties } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 enum ActionButtonState {
   Destructive = 'destructive',
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 45f34c9711..8080c52c46 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentIteration, AgentLogDetailResponse } from '@/models/log'
+import { cn } from '@langgenius/dify-ui/cn'
 import { uniq } from 'es-toolkit/array'
 import { flatten } from 'es-toolkit/compat'
 import * as React from 'react'
@@ -11,7 +12,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
 import { toast } from '@/app/components/base/ui/toast'
 import { fetchAgentLogDetail } from '@/service/log'
-import { cn } from '@/utils/classnames'
 import ResultPanel from './result'
 import TracingPanel from './tracing'
 
@@ -67,10 +67,10 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({ activeTab = 'DETAIL', convers
     <div className="relative flex grow flex-col">
       {/* tab */}
       <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-regular px-4">
-        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'DETAIL'} onClick={() => switchTab('DETAIL')}>
+        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary', currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'DETAIL'} onClick={() => switchTab('DETAIL')}>
           {t('detail', { ns: 'runLog' })}
         </div>
-        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'TRACING'} onClick={() => switchTab('TRACING')}>
+        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary', currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'TRACING'} onClick={() => switchTab('TRACING')}>
           {t('tracing', { ns: 'runLog' })}
         </div>
       </div>
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index 6d41273e30..0739d0774a 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { useClickAway } from 'ahooks'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import AgentLogDetail from './detail'
 
 type AgentLogModalProps = {
@@ -46,7 +46,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
       ref={ref}
     >
       <h1 className="text-md shrink-0 px-4 py-1 font-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
-      <span className="absolute right-3 top-4 z-20 cursor-pointer p-1" onClick={onCancel}>
+      <span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onCancel}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <AgentLogDetail
diff --git a/web/app/components/base/agent-log-modal/iteration.tsx b/web/app/components/base/agent-log-modal/iteration.tsx
index 85e782436c..ebfb863f6f 100644
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentIteration } from '@/models/log'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import { cn } from '@/utils/classnames'
 import ToolCall from './tool-call'
 
 type Props = {
@@ -19,10 +19,10 @@ const Iteration: FC<Props> = ({ iterationInfo, isFinal, index }) => {
     <div className={cn('px-4 py-2')}>
       <div className="flex items-center">
         {isFinal && (
-          <div className="mr-3 shrink-0 text-xs font-semibold leading-[18px] text-text-tertiary">{t('agentLogDetail.finalProcessing', { ns: 'appLog' })}</div>
+          <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary">{t('agentLogDetail.finalProcessing', { ns: 'appLog' })}</div>
         )}
         {!isFinal && (
-          <div className="mr-3 shrink-0 text-xs font-semibold leading-[18px] text-text-tertiary">{`${t('agentLogDetail.iteration', { ns: 'appLog' }).toUpperCase()} ${index}`}</div>
+          <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary">{`${t('agentLogDetail.iteration', { ns: 'appLog' }).toUpperCase()} ${index}`}</div>
         )}
         <Divider bgStyle="gradient" className="mx-0 h-px grow" />
       </div>
diff --git a/web/app/components/base/agent-log-modal/tool-call.tsx b/web/app/components/base/agent-log-modal/tool-call.tsx
index 4751978575..2059adf618 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { ToolCall } from '@/models/log'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckboxCircleLine,
   RiErrorWarningLine,
@@ -10,10 +11,9 @@ import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows
 import BlockIcon from '@/app/components/workflow/block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import { BlockEnum } from '@/app/components/workflow/types'
 
+import { BlockEnum } from '@/app/components/workflow/types'
 import { useLocale } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   toolCall: ToolCall
@@ -51,7 +51,7 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
       <div className={cn('group rounded-2xl border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md')}>
         <div
           className={cn(
-            'flex cursor-pointer items-center py-3 pl-[6px] pr-3',
+            'flex cursor-pointer items-center py-3 pr-3 pl-[6px]',
             !collapseState && 'pb-2!',
           )}
           onClick={() => setCollapseState(!collapseState)}
@@ -65,7 +65,7 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
           <BlockIcon className={cn('mr-2 shrink-0')} type={isLLM ? BlockEnum.LLM : BlockEnum.Tool} toolIcon={toolCall.tool_icon} />
           <div
             className={cn(
-              'grow truncate text-[13px] font-semibold leading-[16px] text-text-secondary',
+              'grow truncate text-[13px] leading-[16px] font-semibold text-text-secondary',
             )}
             title={toolName}
           >
diff --git a/web/app/components/base/alert.tsx b/web/app/components/base/alert.tsx
index 93e9d22e51..8dfe0e4ff5 100644
--- a/web/app/components/base/alert.tsx
+++ b/web/app/components/base/alert.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import {
   memo,
 } from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   type?: 'info'
@@ -37,7 +37,7 @@ const Alert: React.FC<Props> = ({
           <span className="i-ri-information-2-fill text-text-accent" data-testid="info-icon" />
         </div>
         <div className="p-1">
-          <div className="text-text-secondary system-xs-regular" data-testid="msg-container">
+          <div className="system-xs-regular text-text-secondary" data-testid="msg-container">
             {message}
           </div>
         </div>
diff --git a/web/app/components/base/answer-icon/index.tsx b/web/app/components/base/answer-icon/index.tsx
index 1ae1b4f076..36dd83be72 100644
--- a/web/app/components/base/answer-icon/index.tsx
+++ b/web/app/components/base/answer-icon/index.tsx
@@ -3,8 +3,8 @@
 import type { FC } from 'react'
 import type { AppIconType } from '@/types/app'
 import data from '@emoji-mart/data'
+import { cn } from '@langgenius/dify-ui/cn'
 import { init } from 'emoji-mart'
-import { cn } from '@/utils/classnames'
 
 init({ data })
 
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index 21ceae0fcf..92a3f8a9f6 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -2,12 +2,12 @@
 
 import type { ChangeEvent, FC } from 'react'
 import type { Area, CropperProps } from 'react-easy-crop'
+import { cn } from '@langgenius/dify-ui/cn'
 import { createRef, useEffect, useState } from 'react'
 import Cropper from 'react-easy-crop'
 import { useTranslation } from 'react-i18next'
-import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
 
-import { cn } from '@/utils/classnames'
+import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
 import { ImagePlus } from '../icons/src/vender/line/images'
 import { useDraggableUploader } from './hooks'
 import { checkIsAnimatedImage } from './utils'
@@ -73,7 +73,7 @@ const ImageInput: FC<UploaderProps> = ({
   const handleShowImage = () => {
     if (isAnimatedImage) {
       return (
-        // eslint-disable-next-line next/no-img-element
+
         <img src={inputImage?.url} alt="" data-testid="animated-image" />
       )
     }
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 7df6699f40..f90d78a983 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -2,13 +2,13 @@ import type { FC } from 'react'
 import type { Area } from 'react-easy-crop'
 import type { OnImageInput } from './ImageInput'
 import type { AppIconType, ImageFile } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiImageCircleAiLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
-import { cn } from '@/utils/classnames'
 import Divider from '../divider'
 import EmojiPickerInner from '../emoji-picker/Inner'
 import { useLocalFileUploader } from '../image-uploader/hooks'
diff --git a/web/app/components/base/app-icon/__tests__/index.spec.tsx b/web/app/components/base/app-icon/__tests__/index.spec.tsx
index f408e95862..4bbea1e0ae 100644
--- a/web/app/components/base/app-icon/__tests__/index.spec.tsx
+++ b/web/app/components/base/app-icon/__tests__/index.spec.tsx
@@ -66,7 +66,7 @@ describe('AppIcon', () => {
 
   it('applies size classes correctly', () => {
     const { container: xsContainer } = render(<AppIcon size="xs" />)
-    expect(xsContainer.firstChild).toHaveClass('w-4 h-4 radius-xs')
+    expect(xsContainer.firstChild).toHaveClass('w-4 h-4 rounded-sm')
 
     const { container: tinyContainer } = render(<AppIcon size="tiny" />)
     expect(tinyContainer.firstChild).toHaveClass('w-6 h-6 rounded-md')
@@ -75,10 +75,10 @@ describe('AppIcon', () => {
     expect(smallContainer.firstChild).toHaveClass('w-8 h-8 rounded-lg')
 
     const { container: mediumContainer } = render(<AppIcon size="medium" />)
-    expect(mediumContainer.firstChild).toHaveClass('w-9 h-9 radius-lg')
+    expect(mediumContainer.firstChild).toHaveClass('w-9 h-9 rounded-[10px]')
 
     const { container: largeContainer } = render(<AppIcon size="large" />)
-    expect(largeContainer.firstChild).toHaveClass('w-10 h-10 radius-lg')
+    expect(largeContainer.firstChild).toHaveClass('w-10 h-10 rounded-[10px]')
 
     const { container: xlContainer } = render(<AppIcon size="xl" />)
     expect(xlContainer.firstChild).toHaveClass('w-12 h-12 rounded-xl')
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index d4eaeb69d9..5c15179446 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { AppIconType } from '@/types/app'
 import data from '@emoji-mart/data'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
 import { cva } from 'class-variance-authority'
 import { init } from 'emoji-mart'
 import * as React from 'react'
 import { useRef } from 'react'
-import { cn } from '@/utils/classnames'
 
 init({ data })
 
@@ -26,17 +26,17 @@ type AppIconProps = {
   onClick?: () => void
 }
 const appIconVariants = cva(
-  'flex items-center justify-center relative grow-0 shrink-0 overflow-hidden leading-none border-[0.5px] border-divider-regular',
+  'relative flex shrink-0 grow-0 items-center justify-center overflow-hidden border-[0.5px] border-divider-regular leading-none',
   {
     variants: {
       size: {
-        xs: 'w-4 h-4 text-xs radius-xs',
-        tiny: 'w-6 h-6 text-base rounded-md',
-        small: 'w-8 h-8 text-xl rounded-lg',
-        medium: 'w-9 h-9 text-[22px] radius-lg',
-        large: 'w-10 h-10 text-[24px] radius-lg',
-        xl: 'w-12 h-12 text-[28px] rounded-xl',
-        xxl: 'w-14 h-14 text-[32px] rounded-2xl',
+        xs: 'h-4 w-4 rounded-sm text-xs',
+        tiny: 'h-6 w-6 rounded-md text-base',
+        small: 'h-8 w-8 rounded-lg text-xl',
+        medium: 'h-9 w-9 rounded-[10px] text-[22px]',
+        large: 'h-10 w-10 rounded-[10px] text-[24px]',
+        xl: 'h-12 w-12 rounded-xl text-[28px]',
+        xxl: 'h-14 w-14 rounded-2xl text-[32px]',
       },
       rounded: {
         true: 'rounded-full',
@@ -49,17 +49,17 @@ const appIconVariants = cva(
   },
 )
 const EditIconWrapperVariants = cva(
-  'absolute left-0 top-0 z-10 flex items-center justify-center bg-background-overlay-alt',
+  'absolute top-0 left-0 z-10 flex items-center justify-center bg-background-overlay-alt',
   {
     variants: {
       size: {
-        xs: 'w-4 h-4 radius-xs',
-        tiny: 'w-6 h-6 rounded-md',
-        small: 'w-8 h-8 rounded-lg',
-        medium: 'w-9 h-9 radius-lg',
-        large: 'w-10 h-10 radius-lg',
-        xl: 'w-12 h-12 rounded-xl',
-        xxl: 'w-14 h-14 rounded-2xl',
+        xs: 'h-4 w-4 rounded-sm',
+        tiny: 'h-6 w-6 rounded-md',
+        small: 'h-8 w-8 rounded-lg',
+        medium: 'h-9 w-9 rounded-[10px]',
+        large: 'h-10 w-10 rounded-[10px]',
+        xl: 'h-12 w-12 rounded-xl',
+        xxl: 'h-14 w-14 rounded-2xl',
       },
       rounded: {
         true: 'rounded-full',
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index 3a7593b0f7..a51496d236 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type IAppUnavailableProps = {
   code?: number | string
@@ -22,7 +22,7 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
   return (
     <div className={cn('flex h-screen w-screen items-center justify-center', className)}>
       <h1
-        className="mr-5 h-[50px] shrink-0 pr-5 text-[24px] font-medium leading-[50px]"
+        className="mr-5 h-[50px] shrink-0 pr-5 text-[24px] leading-[50px] font-medium"
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
         }}
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index b1189bf314..9174b13356 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type AudioPlayerProps = {
   src?: string // Keep backward compatibility
@@ -240,7 +240,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
     }
   }, [duration])
   return (
-    <div className="flex h-9 min-w-[240px] max-w-[420px] items-center gap-2 radius-lg border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-xs">
+    <div className="flex h-9 max-w-[420px] min-w-[240px] items-center gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-xs">
       <audio ref={audioRef} src={src} preload="auto" data-testid="audio-player">
         {/* If srcs array is provided, render multiple source elements */}
         {srcs && srcs.map((srcUrl, index) => (<source key={index} src={srcUrl} />))}
@@ -253,12 +253,12 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       <div className={cn(isAudioAvailable && 'grow')} hidden={!isAudioAvailable}>
         <div className="flex h-8 items-center justify-center">
           <canvas ref={canvasRef} data-testid="waveform-canvas" className="relative flex h-6 w-full grow cursor-pointer items-center justify-center" onClick={handleCanvasInteraction} onMouseMove={handleMouseMove} onMouseDown={handleCanvasInteraction} onTouchMove={handleMouseMove} onTouchStart={handleCanvasInteraction} />
-          <div className="inline-flex min-w-[50px] items-center justify-center text-text-accent-secondary system-xs-medium">
-            <span className="radius-lg px-0.5 py-1">{formatTime(duration)}</span>
+          <div className="inline-flex min-w-[50px] items-center justify-center system-xs-medium text-text-accent-secondary">
+            <span className="rounded-[10px] px-0.5 py-1">{formatTime(duration)}</span>
           </div>
         </div>
       </div>
-      <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-text-quaternary" hidden={isAudioAvailable}>{t('operation.audioSourceUnavailable', { ns: 'common' })}</div>
+      <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center text-text-quaternary" hidden={isAudioAvailable}>{t('operation.audioSourceUnavailable', { ns: 'common' })}</div>
     </div>
   )
 }
diff --git a/web/app/components/base/auto-height-textarea/index.tsx b/web/app/components/base/auto-height-textarea/index.tsx
index 43241812fa..e409b71e69 100644
--- a/web/app/components/base/auto-height-textarea/index.tsx
+++ b/web/app/components/base/auto-height-textarea/index.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect, useRef } from 'react'
 import { sleep } from '@/utils'
-import { cn } from '@/utils/classnames'
 
 type IProps = {
   placeholder?: string
@@ -69,7 +69,7 @@ const AutoHeightTextarea = (
     (
       <div className={`relative ${wrapperClassName}`}>
         <div
-          className={cn(className, 'invisible overflow-y-auto whitespace-pre-wrap  break-all')}
+          className={cn(className, 'invisible overflow-y-auto break-all whitespace-pre-wrap')}
           style={{
             minHeight,
             maxHeight,
diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index c9c013211e..b2cbbe0292 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 
 type BadgeProps = {
   className?: string
@@ -20,13 +20,13 @@ const Badge = ({
   return (
     <div
       className={cn(
-        'relative inline-flex h-5 items-center whitespace-nowrap rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary',
+        'relative inline-flex h-5 items-center rounded-[5px] border border-divider-deep px-[5px] leading-3 whitespace-nowrap text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
     >
       {hasRedCornerMark && (
-        <div className="absolute right-[-2px] top-[-2px] h-1.5 w-1.5 radius-2xs border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-sm">
+        <div className="absolute top-[-2px] right-[-2px] h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-sm">
         </div>
       )}
       {children || text}
diff --git a/web/app/components/base/badge/index.tsx b/web/app/components/base/badge/index.tsx
index 62029c3058..f245306048 100644
--- a/web/app/components/base/badge/index.tsx
+++ b/web/app/components/base/badge/index.tsx
@@ -1,8 +1,8 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { CSSProperties, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 enum BadgeState {
   Warning = 'warning',
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index cf832d9f94..3a467e97dc 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { ChangeEvent, FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 import VarHighlight from '../../app/configuration/base/var-highlight'
 import { toast } from '../ui/toast'
@@ -63,7 +63,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   }, [isEditing])
 
   const style = cn({
-    'block h-full w-full break-all border-0 px-4 py-2 text-sm text-gray-900 outline-0': true,
+    'block h-full w-full border-0 px-4 py-2 text-sm break-all text-gray-900 outline-0': true,
     'block-input--editing': isEditing,
   })
 
diff --git a/web/app/components/base/carousel/index.tsx b/web/app/components/base/carousel/index.tsx
index 5c31776ae9..52486b9751 100644
--- a/web/app/components/base/carousel/index.tsx
+++ b/web/app/components/base/carousel/index.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
 import type { UseEmblaCarouselType } from 'embla-carousel-react'
+import { cn } from '@langgenius/dify-ui/cn'
 import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 9c3a7cc8f7..1b59618c8c 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -5,6 +5,7 @@ import type {
   ChatItemInTree,
   OnSend,
 } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import AppIcon from '@/app/components/base/app-icon'
@@ -22,7 +23,6 @@ import {
 } from '@/service/share'
 import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { formatBooleanInputs } from '@/utils/model-config'
 import Chat from '../chat'
 import { useChat } from '../chat/hooks'
@@ -265,7 +265,7 @@ const ChatWrapper = () => {
               imageUrl={appData?.site.icon_url}
             />
             <div className="w-0 grow">
-              <div className="body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary">
+              <div className="grow rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary">
                 <Markdown content={welcomeMessage.content} />
                 <SuggestedQuestions item={welcomeMessage} />
               </div>
diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx
index 3b8ef471c8..b0361c69a6 100644
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@@ -1,4 +1,5 @@
 import type { ConversationItem } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditBoxLine,
   RiLayoutRight2Line,
@@ -20,7 +21,6 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
-import { cn } from '@/utils/classnames'
 import {
   useChatWithHistoryContext,
 } from '../context'
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 eb0ec76043..d61af1f6a1 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,6 +1,7 @@
 'use client'
 import type { Placement } from '@floating-ui/react'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   title: string
@@ -46,23 +46,23 @@ const Operation: FC<Props> = ({
       >
         <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 " />
+          <RiArrowDownSLine className="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('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
+          <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('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
+            <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('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete}>
+            <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>
           )}
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
index 562502a573..41cdeaa919 100644
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { InstalledApp } from '@/models/explore'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useEffect,
   useState,
@@ -8,7 +9,6 @@ import {
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { cn } from '@/utils/classnames'
 import { useThemeContext } from '../embedded-chatbot/theme/theme-context'
 import ChatWrapper from './chat-wrapper'
 import {
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
index b2f1892387..127cf2c252 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@@ -125,7 +125,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={v => handleFormChange(form.variable, v)}
               noWrapper
-              className="bg h-[80px] overflow-y-auto radius-lg bg-components-input-bg-normal p-1"
+              className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
               placeholder={
                 <div className="whitespace-pre">{form.json_schema}</div>
               }
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index 2da6b9f8e0..def5545a3f 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import Divider from '@/app/components/base/divider'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { useChatWithHistoryContext } from '../context'
 
 type Props = {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 919ddba551..1627d5890c 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -1,4 +1,5 @@
 import type { ConversationItem } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditBoxLine,
   RiExpandRightLine,
@@ -14,7 +15,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -24,9 +24,9 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 import { useChatWithHistoryContext } from '../context'
 
 type Props = {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
index 6be21846b1..54eb6bd6d6 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { ConversationItem } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useHover } from 'ahooks'
 import {
   memo,
   useRef,
 } from 'react'
 import Operation from '@/app/components/base/chat/chat-with-history/sidebar/operation'
-import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   isPin?: boolean
@@ -31,7 +31,7 @@ const Item: FC<ItemProps> = ({
       ref={ref}
       key={item.id}
       className={cn(
-        'system-sm-medium group flex cursor-pointer rounded-lg p-1 pl-3 text-components-menu-item-text hover:bg-state-base-hover',
+        'group flex cursor-pointer rounded-lg p-1 pl-3 system-sm-medium text-components-menu-item-text hover:bg-state-base-hover',
         isSelected && 'bg-state-accent-active text-text-accent hover:bg-state-accent-active',
       )}
       onClick={() => onChangeConversation(item.id)}
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 711238c2d0..18ff3e4d62 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,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -13,7 +14,6 @@ import { useEffect, useRef, 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 { cn } from '@/utils/classnames'
 
 type Props = {
   isActive?: boolean
@@ -77,19 +77,19 @@ const Operation: FC<Props> = ({
             e.stopPropagation()
           }}
         >
-          <div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={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('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
+            <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('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete}>
+            <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>
diff --git a/web/app/components/base/chat/chat/answer/basic-content.tsx b/web/app/components/base/chat/chat/answer/basic-content.tsx
index b75ec55fdb..962966c8d5 100644
--- a/web/app/components/base/chat/chat/answer/basic-content.tsx
+++ b/web/app/components/base/chat/chat/answer/basic-content.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { ChatItem } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { Markdown } from '@/app/components/base/markdown'
-import { cn } from '@/utils/classnames'
 
 type BasicContentProps = {
   item: ChatItem
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
index 85d8affb71..e5449ba84f 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type ContentWrapperProps = {
   nodeTitle: string
@@ -34,7 +34,7 @@ const ContentWrapper = ({
         <BlockIcon type={BlockEnum.HumanInput} className="shrink-0" />
         {/* node name */}
         <div
-          className="grow truncate text-text-primary system-sm-semibold-uppercase"
+          className="grow truncate system-sm-semibold-uppercase text-text-primary"
           title={nodeTitle}
         >
           {nodeTitle}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
index c3a2f2fdfa..4ccac9477f 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
@@ -1,7 +1,7 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { useLocale } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { getRelativeTime, isRelativeTimeSameOrAfter } from './utils'
 
 type ExpirationTimeProps = {
@@ -20,7 +20,7 @@ const ExpirationTime = ({
     <div
       data-testid="expiration-time"
       className={cn(
-        'mt-1 flex items-center gap-x-1 text-text-tertiary system-xs-regular',
+        'mt-1 flex items-center gap-x-1 system-xs-regular text-text-tertiary',
         !isSameOrAfter && 'text-text-warning',
       )}
     >
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index fb3e94ed00..8b7d4a7167 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -7,6 +7,7 @@ import type {
   ChatItem,
 } from '../../types'
 import type { AppData } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
@@ -14,7 +15,6 @@ import AnswerIcon from '@/app/components/base/answer-icon'
 import Citation from '@/app/components/base/chat/chat/citation'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import { FileList } from '@/app/components/base/file-uploader'
-import { cn } from '@/utils/classnames'
 import ContentSwitch from '../content-switch'
 import { useChatContext } from '../context'
 import AgentContent from './agent-content'
@@ -146,7 +146,7 @@ const Answer: FC<AnswerProps> = ({
         <div className="relative h-10 w-10 shrink-0">
           {answerIcon || <AnswerIcon />}
           {responding && (
-            <div className="absolute left-[-3px] top-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs">
+            <div className="absolute top-[-3px] left-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs">
               <LoadingAnim type="avatar" />
             </div>
           )}
@@ -158,7 +158,7 @@ const Answer: FC<AnswerProps> = ({
           <div className={cn('group relative pr-10', chatAnswerContainerInner)} data-testid="chat-answer-container-humaninput">
             <div
               ref={humanInputFormContainerRef}
-              className={cn('relative inline-block w-full max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary body-lg-regular')}
+              className={cn('relative inline-block w-full max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary')}
             >
               {
                 !responding && contentIsEmpty && !hasAgentThoughts && (
@@ -227,7 +227,7 @@ const Answer: FC<AnswerProps> = ({
             <div className="absolute -top-2 left-6 h-3 w-0.5 bg-chat-answer-human-input-form-divider-bg" />
             <div
               ref={contentRef}
-              className="relative inline-block w-full max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary body-lg-regular"
+              className="relative inline-block w-full max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary"
             >
               {
                 !responding && (
@@ -322,7 +322,7 @@ const Answer: FC<AnswerProps> = ({
           <div className={cn('group relative pr-10', chatAnswerContainerInner)} data-testid="chat-answer-container-inner">
             <div
               ref={contentRef}
-              className={cn('relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary body-lg-regular', workflowProcess && 'w-full')}
+              className={cn('relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary', workflowProcess && 'w-full')}
             >
               {
                 !responding && (
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 398aa47e76..5a2cccb1e9 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -3,6 +3,7 @@ import type {
   ChatItem,
   Feedback,
 } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -19,7 +20,6 @@ import NewAudioButton from '@/app/components/base/new-audio-button'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 import { useChatContext } from '../context'
 
 type OperationProps = {
@@ -165,8 +165,8 @@ const Operation: FC<OperationProps> = ({
       <div
         className={cn(
           'absolute flex justify-end gap-1',
-          hasWorkflowProcess && '-bottom-4 right-2',
-          !positionRight && '-bottom-4 right-2',
+          hasWorkflowProcess && 'right-2 -bottom-4',
+          !positionRight && 'right-2 -bottom-4',
           !hasWorkflowProcess && positionRight && 'top-[9px]!',
         )}
         style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
@@ -174,7 +174,7 @@ const Operation: FC<OperationProps> = ({
       >
         {shouldShowUserFeedbackBar && !humanInputFormDataList?.length && (
           <div className={cn(
-            'ml-1 items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs',
+            'ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs',
             hasUserFeedback ? 'flex' : 'hidden group-hover:flex',
           )}
           >
@@ -214,7 +214,7 @@ const Operation: FC<OperationProps> = ({
         )}
         {shouldShowAdminFeedbackBar && !humanInputFormDataList?.length && (
           <div className={cn(
-            'ml-1 items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs',
+            'ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs',
             (hasAdminFeedback || hasUserFeedback) ? 'flex' : 'hidden group-hover:flex',
           )}
           >
@@ -290,7 +290,7 @@ const Operation: FC<OperationProps> = ({
           </div>
         )}
         {!isOpeningStatement && (
-          <div className="ml-1 hidden items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs group-hover:flex" data-testid="operation-actions">
+          <div className="ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs group-hover:flex" data-testid="operation-actions">
             {(config?.text_to_speech?.enabled && !humanInputFormDataList?.length) && (
               <NewAudioButton
                 id={id}
@@ -353,7 +353,7 @@ const Operation: FC<OperationProps> = ({
         >
           <div className="space-y-3">
             <div>
-              <label className="mb-2 block text-text-secondary system-sm-semibold">
+              <label className="mb-2 block system-sm-semibold text-text-secondary">
                 {t('feedback.content', { ns: 'common' }) || 'Feedback Content'}
               </label>
               <Textarea
diff --git a/web/app/components/base/chat/chat/answer/suggested-questions.tsx b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
index ff462f09a0..e102936b8c 100644
--- a/web/app/components/base/chat/chat/answer/suggested-questions.tsx
+++ b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { ChatItem } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import { useChatContext } from '../context'
 
 type SuggestedQuestionsProps = {
@@ -26,7 +26,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
         <div
           key={index}
           className={cn(
-            'mr-1 mt-1 inline-flex max-w-full shrink-0 cursor-pointer flex-wrap rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3.5 py-2 text-components-button-secondary-accent-text shadow-xs system-sm-medium last:mr-0 hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
+            'mt-1 mr-1 inline-flex max-w-full shrink-0 cursor-pointer flex-wrap rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3.5 py-2 system-sm-medium text-components-button-secondary-accent-text shadow-xs last:mr-0 hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
             readonly && 'pointer-events-none opacity-50',
           )}
           onClick={() => !readonly && onSend?.(question)}
diff --git a/web/app/components/base/chat/chat/answer/tool-detail.tsx b/web/app/components/base/chat/chat/answer/tool-detail.tsx
index 0480262ab7..72b522ae17 100644
--- a/web/app/components/base/chat/chat/answer/tool-detail.tsx
+++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx
@@ -1,4 +1,5 @@
 import type { ToolInfoInThought } from '../type'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiArrowRightSLine,
@@ -7,7 +8,6 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type ToolDetailProps = {
   payload: ToolInfoInThought
@@ -30,7 +30,7 @@ const ToolDetail = ({
     >
       <div
         className={cn(
-          'system-xs-medium flex cursor-pointer items-center px-2.5 py-2 text-text-tertiary',
+          'flex cursor-pointer items-center px-2.5 py-2 system-xs-medium text-text-tertiary',
           expand && 'pb-1.5',
         )}
         onClick={() => setExpand(!expand)}
@@ -45,19 +45,19 @@ const ToolDetail = ({
       {
         expand && (
           <>
-            <div className="mx-1 mb-0.5 radius-lg bg-components-panel-on-panel-item-bg text-text-secondary">
-              <div className="system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1">
+            <div className="mx-1 mb-0.5 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary">
+              <div className="flex h-7 items-center justify-between px-2 pt-1 system-xs-semibold-uppercase">
                 {t('thought.requestTitle', { ns: 'tools' })}
               </div>
-              <div className="code-xs-regular wrap-break-word px-3 pb-2 pt-1">
+              <div className="px-3 pt-1 pb-2 code-xs-regular wrap-break-word">
                 {input}
               </div>
             </div>
-            <div className="mx-1 mb-1 radius-lg bg-components-panel-on-panel-item-bg text-text-secondary">
-              <div className="system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1">
+            <div className="mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary">
+              <div className="flex h-7 items-center justify-between px-2 pt-1 system-xs-semibold-uppercase">
                 {t('thought.responseTitle', { ns: 'tools' })}
               </div>
-              <div className="code-xs-regular wrap-break-word px-3 pb-2 pt-1">
+              <div className="px-3 pt-1 pb-2 code-xs-regular wrap-break-word">
                 {output}
               </div>
             </div>
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.tsx b/web/app/components/base/chat/chat/answer/workflow-process.tsx
index cab841d192..fb67fe80ff 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -1,5 +1,6 @@
 import type { ChatItem, WorkflowProcess } from '../../types'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useEffect,
   useState,
@@ -7,7 +8,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type WorkflowProcessProps = {
   data: WorkflowProcess
@@ -43,7 +43,7 @@ const WorkflowProcessItem = ({
     <div
       className={cn(
         '-mx-1 rounded-xl px-2.5',
-        collapse ? 'border-l-[0.25px] border-components-panel-border py-[7px]' : 'border-[0.5px] border-components-panel-border-subtle px-1 pb-1 pt-[7px]',
+        collapse ? 'border-l-[0.25px] border-components-panel-border py-[7px]' : 'border-[0.5px] border-components-panel-border-subtle px-1 pt-[7px] pb-1',
         running && !collapse && 'bg-background-section-burn',
         succeeded && !collapse && 'bg-state-success-hover',
         failed && !collapse && 'bg-state-destructive-hover',
@@ -62,7 +62,7 @@ const WorkflowProcessItem = ({
         {
           running && (
             <div
-              className="i-ri-loader-2-line mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary"
+              className="mr-1 i-ri-loader-2-line h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary"
               data-testid="status-icon-running"
             />
           )
@@ -70,7 +70,7 @@ const WorkflowProcessItem = ({
         {
           succeeded && (
             <div
-              className="i-custom-vender-solid-general-check-circle mr-1 h-3.5 w-3.5 shrink-0 text-text-success"
+              className="mr-1 i-custom-vender-solid-general-check-circle h-3.5 w-3.5 shrink-0 text-text-success"
               data-testid="status-icon-success"
             />
           )
@@ -78,7 +78,7 @@ const WorkflowProcessItem = ({
         {
           failed && (
             <div
-              className="i-ri-error-warning-fill mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive"
+              className="mr-1 i-ri-error-warning-fill h-3.5 w-3.5 shrink-0 text-text-destructive"
               data-testid="status-icon-failed"
             />
           )
@@ -86,18 +86,18 @@ const WorkflowProcessItem = ({
         {
           paused && (
             <div
-              className="i-ri-pause-circle-fill mr-1 h-3.5 w-3.5 shrink-0 text-text-warning-secondary"
+              className="mr-1 i-ri-pause-circle-fill h-3.5 w-3.5 shrink-0 text-text-warning-secondary"
               data-testid="status-icon-paused"
             />
           )
         }
         <div
-          className={cn('text-text-secondary system-xs-medium', !collapse && 'grow')}
+          className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}
           data-testid="workflow-process-title"
         >
           {!collapse ? t('common.workflowProcess', { ns: 'workflow' }) : latestNode?.title}
         </div>
-        <div className={cn('i-ri-arrow-right-s-line ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
+        <div className={cn('ml-1 i-ri-arrow-right-s-line h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
       </div>
       {
         !collapse && (
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 0ea928d6d6..f6a2b66c3b 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -2,6 +2,7 @@ import type { Theme } from '../../embedded-chatbot/theme/theme-context'
 import type { EnableType, OnSend } from '../../types'
 import type { InputForm } from '../type'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { decode } from 'html-entities'
 import Recorder from 'js-audio-recorder'
@@ -15,7 +16,6 @@ import { FileContextProvider, useFileStore } from '@/app/components/base/file-up
 import { toast } from '@/app/components/base/ui/toast'
 import VoiceInput from '@/app/components/base/voice-input'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useCheckInputsForms } from '../check-input-forms-hooks'
 import { useTextAreaHeight } from './hooks'
 import Operation from './operation'
@@ -139,14 +139,14 @@ const ChatInputArea = ({ readonly, botName, showFeatureBar, showFileUpload, feat
   return (
     <>
       <div className={cn('relative z-10 overflow-hidden rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md', isDragActive && 'border border-dashed border-components-option-card-option-selected-border', disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none')}>
-        <div className="relative max-h-[158px] overflow-y-auto overflow-x-hidden px-[9px] pt-[9px]">
+        <div className="relative max-h-[158px] overflow-x-hidden overflow-y-auto px-[9px] pt-[9px]">
           <FileListInChatInput fileConfig={visionConfig!} />
           <div ref={wrapperRef} className="flex items-center justify-between">
             <div className="relative flex w-full grow items-center">
-              <div ref={textValueRef} className="pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6 body-lg-regular">
+              <div ref={textValueRef} className="pointer-events-none invisible absolute h-auto w-auto p-1 body-lg-regular leading-6 whitespace-pre">
                 {query}
               </div>
-              <Textarea ref={ref => textareaRef.current = ref as any} className={cn('w-full resize-none bg-transparent p-1 leading-6 text-text-primary outline-none body-lg-regular')} placeholder={decode(t(readonly ? 'chat.inputDisabledPlaceholder' : 'chat.inputPlaceholder', { ns: 'common', botName }) || '')} autoFocus minRows={1} value={query} onChange={e => handleQueryChange(e.target.value)} onKeyDown={handleKeyDown} onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd} onPaste={handleClipboardPasteFile} onDragEnter={handleDragFileEnter} onDragLeave={handleDragFileLeave} onDragOver={handleDragFileOver} onDrop={handleDropFile} readOnly={readonly} />
+              <Textarea ref={ref => textareaRef.current = ref as any} className={cn('w-full resize-none bg-transparent p-1 body-lg-regular leading-6 text-text-primary outline-none')} placeholder={decode(t(readonly ? 'chat.inputDisabledPlaceholder' : 'chat.inputPlaceholder', { ns: 'common', botName }) || '')} autoFocus minRows={1} value={query} onChange={e => handleQueryChange(e.target.value)} onKeyDown={handleKeyDown} onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd} onPaste={handleClipboardPasteFile} onDragEnter={handleDragFileEnter} onDragLeave={handleDragFileLeave} onDragOver={handleDragFileOver} onDrop={handleDropFile} readOnly={readonly} />
             </div>
             {!isMultipleLine && operation}
           </div>
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 2b60457c80..c94c47a25b 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -4,6 +4,7 @@ import type {
   EnableType,
 } from '../../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiMicLine,
   RiSendPlane2Fill,
@@ -13,7 +14,6 @@ import { memo } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type OperationProps = {
   readonly?: boolean
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 55b6193bd1..0343366a7f 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -13,12 +13,12 @@ import type {
 import type { InputForm } from './type'
 import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import Answer from './answer'
 import ChatInputArea from './chat-input-area'
 import ChatLogModals from './chat-log-modals'
diff --git a/web/app/components/base/chat/chat/loading-anim/index.tsx b/web/app/components/base/chat/chat/loading-anim/index.tsx
index 6ba37288e7..a352e1ec7d 100644
--- a/web/app/components/base/chat/chat/loading-anim/index.tsx
+++ b/web/app/components/base/chat/chat/loading-anim/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
 type ILoadingAnimProps = {
diff --git a/web/app/components/base/chat/chat/log/index.tsx b/web/app/components/base/chat/chat/log/index.tsx
index 5e5f271a1e..a997ec4350 100644
--- a/web/app/components/base/chat/chat/log/index.tsx
+++ b/web/app/components/base/chat/chat/log/index.tsx
@@ -19,7 +19,7 @@ const Log: FC<LogProps> = ({
 
   return (
     <div
-      className="ml-1 flex items-center gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs"
+      className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs"
       onClick={(e) => {
         e.stopPropagation()
         e.nativeEvent.stopImmediatePropagation()
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 67056f99dd..f585ea0573 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -4,6 +4,7 @@ import type {
 } from 'react'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import type { ChatItem } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -18,7 +19,6 @@ import { FileList } from '@/app/components/base/file-uploader'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import ActionButton from '../../action-button'
 import { toast } from '../../ui/toast'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
@@ -164,7 +164,7 @@ const Question: FC<QuestionProps> = ({
         <div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}>
           <div
             data-testid="action-container"
-            className="absolute hidden gap-0.5 radius-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs group-hover:flex"
+            className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-xs group-hover:flex"
             style={{ right: contentWidth + 8 }}
           >
             <ActionButton
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index 451f566505..b63784cc34 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -5,6 +5,7 @@ import type {
   ChatItemInTree,
   OnSend,
 } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import AppIcon from '@/app/components/base/app-icon'
@@ -23,7 +24,6 @@ import {
 } from '@/service/share'
 import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import Chat from '../chat'
 import { useChat } from '../chat/hooks'
 import { getLastAnswer, isValidGeneratedAnswer } from '../utils'
@@ -262,7 +262,7 @@ const ChatWrapper = () => {
               background={appData?.site.icon_background}
               imageUrl={appData?.site.icon_url}
             />
-            <div className="grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary body-lg-regular">
+            <div className="grow rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary">
               <Markdown content={welcomeMessage.content} />
               <SuggestedQuestions item={welcomeMessage} />
             </div>
@@ -280,7 +280,7 @@ const ChatWrapper = () => {
           imageUrl={appData?.site.icon_url}
         />
         <div className="max-w-[768px] px-4">
-          <Markdown className="text-text-tertiary! body-2xl-regular!" content={welcomeMessage.content} />
+          <Markdown className="body-2xl-regular! text-text-tertiary!" content={welcomeMessage.content} />
         </div>
       </div>
     )
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
index 7b1fb46fa0..aeec29a477 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { Theme } from '../theme/theme-context'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import Divider from '@/app/components/base/divider'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Tooltip from '@/app/components/base/tooltip'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 import { isClient } from '@/utils/client'
 import {
   useEmbeddedChatbotContext,
@@ -94,7 +94,7 @@ const Header: FC<IHeaderProps> = ({
                 )}
                 data-testid="webapp-brand"
               >
-                <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
+                <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
                 {
                   systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                     ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index 3def406d53..7c0f2feb7a 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { AppData } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useEffect,
 } from 'react'
@@ -13,7 +14,6 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { AppSourceType } from '@/service/share'
-import { cn } from '@/utils/classnames'
 import {
   EmbeddedChatbotContext,
   useEmbeddedChatbotContext,
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index b8510c98d3..2ce40480c3 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -48,9 +48,9 @@ const InputsFormContent = ({ showTip }: Props) => {
         <div key={form.variable} className="space-y-1" data-testid={`inputs-form-item-${form.variable}`}>
           {form.type !== InputVarType.checkbox && (
             <div className="flex h-6 items-center gap-1">
-              <div className="text-text-secondary system-md-semibold">{form.label}</div>
+              <div className="system-md-semibold text-text-secondary">{form.label}</div>
               {!form.required && (
-                <div className="text-text-tertiary system-xs-regular">{t('panel.optional', { ns: 'workflow' })}</div>
+                <div className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</div>
               )}
             </div>
           )}
@@ -125,7 +125,7 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={v => handleFormChange(form.variable, v)}
               noWrapper
-              className="h-[80px] overflow-y-auto radius-lg bg-components-input-bg-normal p-1"
+              className="h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
               placeholder={
                 <div className="whitespace-pre">{form.json_schema}</div>
               }
@@ -134,7 +134,7 @@ const InputsFormContent = ({ showTip }: Props) => {
         </div>
       ))}
       {showTip && (
-        <div className="text-text-tertiary system-xs-regular">{t('chat.chatFormTip', { ns: 'share' })}</div>
+        <div className="system-xs-regular text-text-tertiary">{t('chat.chatFormTip', { ns: 'share' })}</div>
       )}
     </div>
   )
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 430e83478e..77b47bb1c4 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import Divider from '@/app/components/base/divider'
 import { Button } from '@/app/components/base/ui/button'
 import { AppSourceType } from '@/service/share'
-import { cn } from '@/utils/classnames'
 import { useEmbeddedChatbotContext } from '../context'
 
 type Props = {
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index 98d7149284..68cddb97b0 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   iconColor?: string
@@ -42,7 +42,7 @@ const ViewFormDropdown = ({
         >
           <div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4">
             <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
-            <div className="grow text-text-secondary system-xl-semibold">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+            <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           </div>
           <div className="p-6">
             <InputsFormContent />
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index 61947ad769..80ebbc435c 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
@@ -7,7 +8,6 @@ import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
 import { Button } from '@/app/components/base/ui/button'
 import SearchMenu from '@/assets/search-menu.svg'
-import { cn } from '@/utils/classnames'
 
 type CheckboxListOption = {
   label: string
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index 02e4e5b89f..1abf142a70 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import IndeterminateIcon from './assets/indeterminate-icon'
 
 type CheckboxProps = {
@@ -29,7 +29,7 @@ const Checkbox = ({
     <div
       id={id}
       className={cn(
-        'flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center radius-xs shadow-xs shadow-shadow-shadow-3',
+        'flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3',
         checkClassName,
         disabled && disabledClassName,
         className,
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index 46272cfcb9..50f4744b07 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import {
@@ -6,7 +7,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 export type Item = {
   value: number | string
@@ -97,7 +97,7 @@ const Chip: FC<Props> = ({
                     setOpen(false)
                   }}
                 >
-                  <div title={item.name} className="system-sm-medium grow truncate text-text-secondary">{item.name}</div>
+                  <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
                   {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
                 </div>
               ))}
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
index 814e3c2287..db48a9cb8f 100644
--- a/web/app/components/base/content-dialog/index.tsx
+++ b/web/app/components/base/content-dialog/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Transition, TransitionChild } from '@headlessui/react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type ContentDialogProps = {
   className?: string
@@ -19,7 +19,7 @@ const ContentDialog = ({
     <Transition
       show={show}
       as="div"
-      className="absolute left-0 top-0 z-30 box-border h-full w-full p-2"
+      className="absolute top-0 left-0 z-30 box-border h-full w-full p-2"
     >
       <TransitionChild>
         <div
diff --git a/web/app/components/base/corner-label/index.tsx b/web/app/components/base/corner-label/index.tsx
index 21ad00bb77..9c5aba0a1b 100644
--- a/web/app/components/base/corner-label/index.tsx
+++ b/web/app/components/base/corner-label/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Corner } from '../icons/src/vender/solid/shapes'
 
 type CornerLabelProps = {
diff --git a/web/app/components/base/date-and-time-picker/calendar/item.tsx b/web/app/components/base/date-and-time-picker/calendar/item.tsx
index f79fed0879..4a486131db 100644
--- a/web/app/components/base/date-and-time-picker/calendar/item.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/item.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { CalendarItemProps } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import dayjs from '../utils/dayjs'
 
 const Item: FC<CalendarItemProps> = ({
@@ -19,9 +19,9 @@ const Item: FC<CalendarItemProps> = ({
       type="button"
       onClick={() => !isDisabled && onClick(date)}
       className={cn(
-        'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
+        'relative flex items-center justify-center rounded-lg px-1 py-2 system-sm-medium',
         isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
-        isSelected ? 'system-sm-medium bg-components-button-primary-bg text-components-button-primary-text' : 'hover:bg-state-base-hover',
+        isSelected ? 'bg-components-button-primary-bg system-sm-medium text-components-button-primary-text' : 'hover:bg-state-base-hover',
         isDisabled && 'cursor-not-allowed text-text-quaternary hover:bg-transparent',
       )}
     >
diff --git a/web/app/components/base/date-and-time-picker/common/option-list-item.tsx b/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
index 040f30f686..31b303df1f 100644
--- a/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
+++ b/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
-import { cn } from '@/utils/classnames'
 
 type OptionListItemProps = {
   isSelected: boolean
@@ -26,7 +26,7 @@ const OptionListItem: FC<OptionListItemProps> = ({
     <li
       ref={listItemRef}
       className={cn(
-        'system-xs-medium flex cursor-pointer items-center justify-center rounded-md px-1.5 py-1 text-components-button-ghost-text',
+        'flex cursor-pointer items-center justify-center rounded-md px-1.5 py-1 system-xs-medium text-components-button-ghost-text',
         isSelected ? 'bg-components-button-ghost-bg-hover' : 'hover:bg-components-button-ghost-bg-hover',
       )}
       onClick={() => {
diff --git a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
index 237282c348..ee94fdbf20 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { DatePickerFooterProps } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiTimeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { ViewType } from '../types'
 
 const Footer: FC<DatePickerFooterProps> = ({
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index b1303e5f58..9c84e4c096 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -1,5 +1,6 @@
 import type { Dayjs } from 'dayjs'
 import type { DatePickerProps, Period } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import Calendar from '../calendar'
 import TimePickerHeader from '../time-picker/header'
 import TimePickerOptions from '../time-picker/options'
@@ -232,14 +232,14 @@ const DatePicker = ({
                 data-testid="date-picker-trigger"
               >
                 <input
-                  className="flex-1 cursor-pointer appearance-none truncate bg-transparent p-1 text-components-input-text-filled
-            outline-hidden system-xs-regular placeholder:text-components-input-text-placeholder"
+                  className="flex-1 cursor-pointer appearance-none truncate bg-transparent p-1 system-xs-regular
+            text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder"
                   readOnly
                   value={isOpen ? '' : displayValue}
                   placeholder={placeholderDate}
                 />
                 <span className={cn('i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedDate)) && 'group-hover:hidden')} />
-                <span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedDate)) && 'hover:text-text-secondary group-hover:inline-block')} onClick={handleClear} data-testid="date-picker-clear-button" />
+                <span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block hover:text-text-secondary')} onClick={handleClear} data-testid="date-picker-clear-button" />
               </div>
             )}
       </PortalToFollowElemTrigger>
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index ff3bb459e1..e07ea177a5 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -1,5 +1,6 @@
 import type { Dayjs } from 'dayjs'
 import type { TimePickerProps } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import TimezoneLabel from '@/app/components/base/timezone-label'
-import { cn } from '@/utils/classnames'
 import { Period } from '../types'
 import dayjs, {
   getDateWithTimezone,
@@ -199,8 +199,8 @@ const TimePicker = ({
 
   const inputElem = (
     <input
-      className="flex-1 cursor-pointer select-none appearance-none truncate bg-transparent p-1 text-components-input-text-filled
-            outline-hidden system-xs-regular placeholder:text-components-input-text-placeholder"
+      className="flex-1 cursor-pointer appearance-none truncate bg-transparent p-1 system-xs-regular text-components-input-text-filled
+            outline-hidden select-none placeholder:text-components-input-text-placeholder"
       readOnly
       value={isOpen ? '' : displayValue}
       placeholder={placeholderDate}
@@ -230,10 +230,10 @@ const TimePicker = ({
               >
                 {inputElem}
                 {showTimezone && timezone && (
-                  <TimezoneLabel timezone={timezone} inline className="shrink-0 select-none text-xs" />
+                  <TimezoneLabel timezone={timezone} inline className="shrink-0 text-xs select-none" />
                 )}
                 <span className={cn('i-ri-time-line h-4 w-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:hidden')} />
-                <span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'hover:text-text-secondary group-hover:inline-block')} role="button" aria-label={t('operation.clear', { ns: 'common' })} onClick={handleClear} />
+                <span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:inline-block hover:text-text-secondary')} role="button" aria-label={t('operation.clear', { ns: 'common' })} onClick={handleClear} />
               </div>
             )}
       </PortalToFollowElemTrigger>
diff --git a/web/app/components/base/date-and-time-picker/time-picker/options.tsx b/web/app/components/base/date-and-time-picker/time-picker/options.tsx
index a4117f03fb..6f6e5e9c68 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/options.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/options.tsx
@@ -16,7 +16,7 @@ const Options: FC<TimeOptionsProps> = ({
   return (
     <div className="grid grid-cols-3 gap-x-1 p-2">
       {/* Hour */}
-      <ul className="no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
+      <ul className="scrollbar-none flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
         {
           hourOptions.map((hour) => {
             const isSelected = selectedTime?.format('hh') === hour
@@ -33,7 +33,7 @@ const Options: FC<TimeOptionsProps> = ({
         }
       </ul>
       {/* Minute */}
-      <ul className="no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
+      <ul className="scrollbar-none flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
         {
           (minuteFilter ? minuteFilter(minuteOptions) : minuteOptions).map((minute) => {
             const isSelected = selectedTime?.format('mm') === minute
@@ -50,7 +50,7 @@ const Options: FC<TimeOptionsProps> = ({
         }
       </ul>
       {/* Period */}
-      <ul className="no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
+      <ul className="scrollbar-none flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
         {
           periodOptions.map((period) => {
             const isSelected = selectedTime?.format('A') === period
diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx
index 9b0d602a3e..2288925579 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx
@@ -16,7 +16,7 @@ const Options: FC<YearAndMonthPickerOptionsProps> = ({
   return (
     <div className="grid grid-cols-2 gap-x-1 p-2">
       {/* Month Picker */}
-      <ul className="no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
+      <ul className="scrollbar-none flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
         {
           months.map((month, index) => {
             const isSelected = selectedMonth === index
@@ -33,7 +33,7 @@ const Options: FC<YearAndMonthPickerOptionsProps> = ({
         }
       </ul>
       {/* Year Picker */}
-      <ul className="no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
+      <ul className="scrollbar-none flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]">
         {
           yearOptions.map((year) => {
             const isSelected = selectedYear === year
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
index 571898cd57..84d0c9b999 100644
--- a/web/app/components/base/dialog/index.tsx
+++ b/web/app/components/base/dialog/index.tsx
@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react'
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Fragment, useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 // https://headlessui.com/react/dialog
 
@@ -45,7 +45,7 @@ const CustomDialog = ({
                 {Boolean(title) && (
                   <DialogTitle
                     as={titleAs || 'h3'}
-                    className={cn('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
+                    className={cn('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
                   >
                     {title}
                   </DialogTitle>
@@ -54,7 +54,7 @@ const CustomDialog = ({
                   {children}
                 </div>
                 {Boolean(footer) && (
-                  <div className={cn('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
+                  <div className={cn('flex items-center justify-end gap-2 px-6 pt-3 pb-6', footerClassName)}>
                     {footer}
                   </div>
                 )}
diff --git a/web/app/components/base/divider/index.tsx b/web/app/components/base/divider/index.tsx
index b096844079..50c719e923 100644
--- a/web/app/components/base/divider/index.tsx
+++ b/web/app/components/base/divider/index.tsx
@@ -1,8 +1,8 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { CSSProperties, FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 const dividerVariants = cva('', {
   variants: {
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
index fcfee41cc0..261022669b 100644
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useRef } from 'react'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   isShow: boolean
@@ -62,7 +62,7 @@ const DrawerPlus: FC<Props> = ({
       positionCenter={positionCenter}
       dialogClassName={dialogClassName}
       dialogBackdropClassName={dialogBackdropClassName}
-      panelClassName={cn('mx-2 mb-3 mt-16 rounded-xl p-0! sm:mr-2', panelClassName, maxWidthClassName)}
+      panelClassName={cn('mx-2 mt-16 mb-3 rounded-xl p-0! sm:mr-2', panelClassName, maxWidthClassName)}
     >
       <div
         className={cn(contentClassName, 'flex w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl')}
@@ -72,7 +72,7 @@ const DrawerPlus: FC<Props> = ({
         ref={ref}
       >
         <div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
-          <div className="flex h-6 items-center justify-between pl-6 pr-5">
+          <div className="flex h-6 items-center justify-between pr-5 pl-6">
             <div className="system-xl-semibold text-text-primary">
               {title}
             </div>
@@ -86,7 +86,7 @@ const DrawerPlus: FC<Props> = ({
             </div>
           </div>
           {titleDescription && (
-            <div className="system-xs-regular pl-6 pr-10 text-text-tertiary">
+            <div className="pr-10 pl-6 system-xs-regular text-text-tertiary">
               {titleDescription}
             </div>
           )}
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 76025085aa..2ca2f090ef 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 export type IDrawerProps = {
   title?: string
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
index d83a97ce25..f9a19f34ea 100644
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -1,5 +1,6 @@
 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'
@@ -10,7 +11,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 export type Item = {
   value: string | number
diff --git a/web/app/components/base/effect/index.tsx b/web/app/components/base/effect/index.tsx
index dd3415dc07..f3c2e3c3de 100644
--- a/web/app/components/base/effect/index.tsx
+++ b/web/app/components/base/effect/index.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type EffectProps = {
   className?: string
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index e682ca7a08..e2595c5efb 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -5,12 +5,12 @@ import data from '@emoji-mart/data'
 import {
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { init } from 'emoji-mart'
 import * as React from 'react'
 import { useState } from 'react'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import { cn } from '@/utils/classnames'
 import { searchEmoji } from '@/utils/emoji'
 
 init({ data })
@@ -92,11 +92,11 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
       </div>
       <Divider className="my-3" />
 
-      <div className="max-h-[200px] w-full overflow-y-auto overflow-x-hidden px-3">
+      <div className="max-h-[200px] w-full overflow-x-hidden overflow-y-auto px-3">
         {isSearching && (
           <>
             <div key="category-search" className="flex flex-col">
-              <p className="mb-1 text-text-primary system-xs-medium-uppercase">Search</p>
+              <p className="mb-1 system-xs-medium-uppercase text-text-primary">Search</p>
               <div className="grid h-full w-full grid-cols-8 gap-1">
                 {searchedEmojis.map((emoji: string, index: number) => {
                   return (
@@ -121,7 +121,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
         {categories.map((category, index: number) => {
           return (
             <div key={`category-${index}`} className="flex flex-col">
-              <p className="mb-1 text-text-primary system-xs-medium-uppercase">{category.id}</p>
+              <p className="mb-1 system-xs-medium-uppercase text-text-primary">{category.id}</p>
               <div className="grid h-full w-full grid-cols-8 gap-1">
                 {category.emojis.map((emoji, index: number) => {
                   return (
@@ -147,7 +147,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
 
       {/* Color Select */}
       <div className={cn('flex items-center justify-between p-3 pb-0')}>
-        <p className="mb-2 text-text-primary system-xs-medium-uppercase">Choose Style</p>
+        <p className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
         {showStyleColors
           ? <span className="i-heroicons-chevron-down h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />
           : <span className="i-heroicons-chevron-up h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />}
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 6213b61226..92ee4935be 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import EmojiPickerInner from './Inner'
 
 type IEmojiPickerProps = {
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index 5f35433612..5a76de75ef 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -1,8 +1,8 @@
 import type { I18nKeysWithPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiLock2Fill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 
 type EncryptedKey = I18nKeysWithPrefix<'common', 'provider.encrypted.'>
 
@@ -20,7 +20,7 @@ export const EncryptedBottom = (props: Props) => {
   const { frontTextKey = DEFAULT_FRONT_KEY, backTextKey = DEFAULT_BACK_KEY, className } = props
 
   return (
-    <div className={cn('system-xs-regular flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary', className)}>
+    <div className={cn('flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary', className)}>
       <RiLock2Fill className="mx-1 h-3 w-3 text-text-quaternary" />
       {t(frontTextKey, { ns: 'common' })}
       <Link
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index 639599c6f6..607494eab5 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { ErrorInfo, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAlertLine, RiBugLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { IS_DEV } from '@/config'
-import { cn } from '@/utils/classnames'
 
 type ErrorBoundaryState = {
   hasError: boolean
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 6c12907196..556e5b88c0 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -1,6 +1,7 @@
 import type { OpeningStatement } from '@/app/components/base/features/types'
 import type { InputVar } from '@/app/components/workflow/types'
 import type { PromptVariable } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -14,7 +15,6 @@ import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { checkKeys, getNewVar } from '@/utils/var'
 
 type OpeningSettingModalProps = {
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
index 75d1a61dc9..d3e0814777 100644
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Fragment, useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
@@ -33,11 +33,11 @@ const DialogWrapper = ({
         </TransitionChild>
 
         <div className="fixed inset-0">
-          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pr-2 pt-[64px]')} data-testid="dialog-layout-container">
+          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')} data-testid="dialog-layout-container">
             <TransitionChild>
               <DialogPanel className={cn(
                 'relative flex h-0 w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle shadow-xl transition-all',
-                inWorkflow ? 'rounded-l-2xl border-b-[0.5px] border-l-[0.5px] border-t-[0.5px]' : 'rounded-2xl border-[0.5px]',
+                inWorkflow ? 'rounded-l-2xl border-t-[0.5px] border-b-[0.5px] border-l-[0.5px]' : 'rounded-2xl border-[0.5px]',
                 'data-closed:scale-95 data-closed:opacity-0',
                 'data-enter:scale-100 data-enter:opacity-100 data-enter:duration-300 data-enter:ease-out',
                 'data-leave:scale-95 data-leave:opacity-0 data-leave:duration-200 data-leave:ease-in',
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index b537002133..dac4612677 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
@@ -7,7 +8,6 @@ import VoiceSettings from '@/app/components/base/features/new-feature-panel/text
 import { Citations, ContentModeration, FolderUpload, LoveMessage, MessageFast, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   isChatMode?: boolean
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 8a6862eb82..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
@@ -1,6 +1,7 @@
 import type { ChangeEvent, FC } from 'react'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,7 +16,6 @@ import { useDocLink, useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n-config/language'
 import { useCodeBasedExtensions, useModelProviders } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import FormGeneration from './form-generation'
 import ModerationContent from './moderation-content'
 
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 0784c69130..3bc41b23cc 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -2,6 +2,7 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { Item } from '@/app/components/base/select'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { Fragment } from 'react'
@@ -15,7 +16,6 @@ import { languages } from '@/i18n-config/language'
 import { usePathname } from '@/next/navigation'
 import { useAppVoices } from '@/service/use-apps'
 import { TtsAutoPlay } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type VoiceParamConfigProps = {
   onClose: () => void
@@ -65,7 +65,7 @@ const VoiceParamConfig = ({
   return (
     <>
       <div className="mb-4 flex items-center justify-between">
-        <div className="text-text-primary system-xl-semibold">{t('voice.voiceSettings.title', { ns: 'appDebug' })}</div>
+        <div className="system-xl-semibold text-text-primary">{t('voice.voiceSettings.title', { ns: 'appDebug' })}</div>
         <div
           className="cursor-pointer p-1"
           role="button"
@@ -83,7 +83,7 @@ const VoiceParamConfig = ({
         </div>
       </div>
       <div className="mb-3">
-        <div className="mb-1 flex items-center py-1 text-text-secondary system-sm-semibold">
+        <div className="mb-1 flex items-center py-1 system-sm-semibold text-text-secondary">
           {t('voice.voiceSettings.language', { ns: 'appDebug' })}
           <Tooltip
             popupContent={(
@@ -107,7 +107,7 @@ const VoiceParamConfig = ({
         >
           <div className="relative h-8">
             <ListboxButton
-              className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-hidden group-hover:bg-state-base-hover sm:text-sm sm:leading-6"
+              className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pr-10 pl-3 group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden sm:text-sm sm:leading-6"
             >
               <span className={cn('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
                 {languageItem?.name
@@ -131,7 +131,7 @@ const VoiceParamConfig = ({
                 {languages.map(item => (
                   <ListboxOption
                     key={item.value}
-                    className="relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-active:bg-state-base-active"
+                    className="relative cursor-pointer rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover data-active:bg-state-base-active"
                     value={item}
                     disabled={false}
                   >
@@ -159,7 +159,7 @@ const VoiceParamConfig = ({
         </Listbox>
       </div>
       <div className="mb-3">
-        <div className="mb-1 py-1 text-text-secondary system-sm-semibold">
+        <div className="mb-1 py-1 system-sm-semibold text-text-secondary">
           {t('voice.voiceSettings.voice', { ns: 'appDebug' })}
         </div>
         <div className="flex items-center gap-1">
@@ -174,7 +174,7 @@ const VoiceParamConfig = ({
           >
             <div className="relative h-8 grow">
               <ListboxButton
-                className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-hidden group-hover:bg-state-base-hover sm:text-sm sm:leading-6"
+                className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pr-10 pl-3 group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden sm:text-sm sm:leading-6"
               >
                 <span
                   className={cn('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}
@@ -198,7 +198,7 @@ const VoiceParamConfig = ({
                   {voiceItems?.map((item: Item) => (
                     <ListboxOption
                       key={item.value}
-                      className="relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-active:bg-state-base-active"
+                      className="relative cursor-pointer rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover data-active:bg-state-base-active"
                       value={item}
                       disabled={false}
                     >
@@ -233,7 +233,7 @@ const VoiceParamConfig = ({
         </div>
       </div>
       <div>
-        <div className="mb-1 py-1 text-text-secondary system-sm-semibold">
+        <div className="mb-1 py-1 system-sm-semibold text-text-secondary">
           {t('voice.voiceSettings.autoPlay', { ns: 'appDebug' })}
         </div>
         <Switch
diff --git a/web/app/components/base/file-thumb/index.tsx b/web/app/components/base/file-thumb/index.tsx
index 09f88d5d3b..960d39d948 100644
--- a/web/app/components/base/file-thumb/index.tsx
+++ b/web/app/components/base/file-thumb/index.tsx
@@ -1,15 +1,15 @@
 import type { VariantProps } from 'class-variance-authority'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 import { FileTypeIcon } from '../file-uploader'
 import { getFileAppearanceType } from '../file-uploader/utils'
 import Tooltip from '../tooltip'
 import ImageRender from './image-render'
 
 const FileThumbVariants = cva(
-  'flex items-center justify-center cursor-pointer',
+  'flex cursor-pointer items-center justify-center',
   {
     variants: {
       size: {
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index f07119311b..872526f1ae 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -1,4 +1,5 @@
 import type { FileUpload } from '@/app/components/base/features/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import {
   memo,
@@ -11,7 +12,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { FILE_URL_REGEX } from '../constants'
 import FileInput from '../file-input'
 import { useFile } from '../hooks'
diff --git a/web/app/components/base/file-uploader/file-image-render.tsx b/web/app/components/base/file-uploader/file-image-render.tsx
index f295c9fc04..3119fb083b 100644
--- a/web/app/components/base/file-uploader/file-image-render.tsx
+++ b/web/app/components/base/file-uploader/file-image-render.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type FileImageRenderProps = {
   imageUrl: string
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index 4a9cb6029b..14dd171b59 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -1,11 +1,11 @@
 import type { FileEntity } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import FileImageRender from './file-image-render'
 import FileTypeIcon from './file-type-icon'
 import FileItem from './file-uploader-in-attachment/file-item'
@@ -39,7 +39,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
     <div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-t border-divider-subtle', noPadding && 'p-0!')}>
       <div className="flex justify-between gap-1">
         {expanded && (
-          <div className="system-xs-semibold-uppercase grow cursor-pointer py-1 text-text-secondary" onClick={() => setExpanded(!expanded)}>{t('runDetail.fileListLabel', { ns: 'appLog' })}</div>
+          <div className="grow cursor-pointer py-1 system-xs-semibold-uppercase text-text-secondary" onClick={() => setExpanded(!expanded)}>{t('runDetail.fileListLabel', { ns: 'appLog' })}</div>
         )}
         {!expanded && (
           <div className="flex gap-1">
@@ -85,8 +85,8 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
       {expanded && (
         <div className="flex flex-col gap-3">
           {fileList.map(item => (
-            <div key={item.varName} className="system-xs-regular flex flex-col gap-1">
-              <div className="py-1 text-text-tertiary ">{item.varName}</div>
+            <div key={item.varName} className="flex flex-col gap-1 system-xs-regular">
+              <div className="py-1 text-text-tertiary">{item.varName}</div>
               {item.list.map(file => (
                 <FileItem
                   key={file.id}
diff --git a/web/app/components/base/file-uploader/file-type-icon.tsx b/web/app/components/base/file-uploader/file-type-icon.tsx
index e3133216d6..54f3f294c6 100644
--- a/web/app/components/base/file-uploader/file-type-icon.tsx
+++ b/web/app/components/base/file-uploader/file-type-icon.tsx
@@ -1,4 +1,5 @@
 import type { FileAppearanceType } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiFile3Fill,
   RiFileCodeFill,
@@ -14,7 +15,6 @@ import {
   RiMarkdownFill,
 } from '@remixicon/react'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import { FileAppearanceTypeEnum } from './types'
 
 const FILE_TYPE_ICON_MAP = {
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
index f8015aa7c7..4c23533d6f 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@@ -1,4 +1,5 @@
 import type { FileEntity } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiDownloadLine,
@@ -14,7 +15,6 @@ import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
 import FileImageRender from '../file-image-render'
@@ -80,12 +80,12 @@ const FileInAttachmentItem = ({
         </div>
         <div className="mr-1 w-0 grow">
           <div
-            className="system-xs-medium mb-0.5 flex items-center truncate text-text-secondary"
+            className="mb-0.5 flex items-center truncate system-xs-medium text-text-secondary"
             title={file.name}
           >
             <div className="truncate">{name}</div>
           </div>
-          <div className="system-2xs-medium-uppercase flex items-center text-text-tertiary">
+          <div className="flex items-center system-2xs-medium-uppercase text-text-tertiary">
             {
               ext && (
                 <span>{ext.toLowerCase()}</span>
@@ -93,7 +93,7 @@ const FileInAttachmentItem = ({
             }
             {
               ext && (
-                <span className="system-2xs-medium mx-1">•</span>
+                <span className="mx-1 system-2xs-medium">•</span>
               )
             }
             {
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index bc41a94d86..ba308642c2 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -1,5 +1,6 @@
 import type { FileEntity } from '../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiLink,
   RiUploadCloud2Line,
@@ -10,7 +11,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
 import FileInput from '../file-input'
 import { useFile } from '../hooks'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index 5b326e35bc..34056a85d5 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -1,4 +1,5 @@
 import type { FileEntity } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
@@ -6,7 +7,6 @@ import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
 import VideoPreview from '@/app/components/base/file-uploader/video-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
 import FileTypeIcon from '../file-type-icon'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
index 8f5ee0ff96..207aaf3c3f 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
@@ -1,7 +1,7 @@
 import type { FileEntity } from '../types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { useFile } from '../hooks'
 import { useStore } from '../store'
 import FileImageItem from './file-image-item'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index 08bb8b45d1..14a424d4f2 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -1,4 +1,5 @@
 import type { FileUpload } from '@/app/components/base/features/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAttachmentLine,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import {
 } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
 
 type FileUploaderInChatInputProps = {
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index 21fba08447..b1e17bdefc 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -1,5 +1,6 @@
 import type { AnyFieldApi } from '@tanstack/react-form'
 import type { FieldState, FormSchema, TypeWithI18N } from '@/app/components/base/form/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useStore } from '@tanstack/react-form'
 import {
   isValidElement,
@@ -17,7 +18,6 @@ import PureSelect from '@/app/components/base/select/pure'
 import Tooltip from '@/app/components/base/tooltip'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
-import { cn } from '@/utils/classnames'
 
 const getExtraProps = (type: FormTypeEnum) => {
   switch (type) {
@@ -281,7 +281,7 @@ const BaseField = ({
                     <div
                       key={option.value}
                       className={cn(
-                        'hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 flex-1 grow cursor-pointer items-center justify-center gap-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular',
+                        'hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 flex-1 grow cursor-pointer items-center justify-center gap-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary',
                         value === option.value && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs',
                         disabled && 'cursor-not-allowed opacity-50',
                         inputClassName,
@@ -327,21 +327,21 @@ const BaseField = ({
         </div>
       </div>
       {description && (
-        <div className="mt-4 text-text-tertiary system-xs-regular">
+        <div className="mt-4 system-xs-regular text-text-tertiary">
           {translatedDescription}
         </div>
       )}
       {
         url && (
           <a
-            className="mt-4 flex items-center text-text-accent system-xs-regular"
+            className="mt-4 flex items-center system-xs-regular text-text-accent"
             href={url}
             target="_blank"
           >
             <span className="break-all">
               {translatedHelp}
             </span>
-            <div className="i-ri-external-link-line ml-1 h-3 w-3 shrink-0" />
+            <div className="ml-1 i-ri-external-link-line h-3 w-3 shrink-0" />
           </a>
         )
       }
diff --git a/web/app/components/base/form/components/base/base-form.tsx b/web/app/components/base/form/components/base/base-form.tsx
index 8c81caa42d..84374b11b0 100644
--- a/web/app/components/base/form/components/base/base-form.tsx
+++ b/web/app/components/base/form/components/base/base-form.tsx
@@ -6,6 +6,7 @@ import type {
   BaseFieldProps,
 } from '.'
 import type { FieldState, FormRef, FormSchema, SetFieldsParam } from '@/app/components/base/form/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useForm,
   useStore,
@@ -26,7 +27,6 @@ import {
   FormItemValidateStatusEnum,
 
 } from '@/app/components/base/form/types'
-import { cn } from '@/utils/classnames'
 import {
   BaseField,
 } from '.'
diff --git a/web/app/components/base/form/components/field/checkbox.tsx b/web/app/components/base/form/components/field/checkbox.tsx
index a926830b75..cd5b95f2fa 100644
--- a/web/app/components/base/form/components/field/checkbox.tsx
+++ b/web/app/components/base/form/components/field/checkbox.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useFieldContext } from '../..'
 import Checkbox from '../../../checkbox'
 
@@ -27,7 +27,7 @@ const CheckboxField = ({
       <label
         htmlFor={field.name}
         className={cn(
-          'system-sm-medium grow cursor-pointer pt-1 text-text-secondary',
+          'grow cursor-pointer pt-1 system-sm-medium text-text-secondary',
           labelClassName,
         )}
         onClick={() => {
diff --git a/web/app/components/base/form/components/field/custom-select.tsx b/web/app/components/base/form/components/field/custom-select.tsx
index 08e2cdc437..5808d4004d 100644
--- a/web/app/components/base/form/components/field/custom-select.tsx
+++ b/web/app/components/base/form/components/field/custom-select.tsx
@@ -1,6 +1,6 @@
 import type { CustomSelectProps, Option } from '../../../select/custom'
 import type { LabelProps } from '../label'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useFieldContext } from '../..'
 import CustomSelect from '../../../select/custom'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/file-types.tsx b/web/app/components/base/form/components/field/file-types.tsx
index 242339e6cc..a87f495735 100644
--- a/web/app/components/base/form/components/field/file-types.tsx
+++ b/web/app/components/base/form/components/field/file-types.tsx
@@ -1,8 +1,8 @@
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback } from 'react'
 import FileTypeItem from '@/app/components/workflow/nodes/_base/components/file-type-item'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Label from '../label'
 
diff --git a/web/app/components/base/form/components/field/file-uploader.tsx b/web/app/components/base/form/components/field/file-uploader.tsx
index b498cfb951..1e835768c5 100644
--- a/web/app/components/base/form/components/field/file-uploader.tsx
+++ b/web/app/components/base/form/components/field/file-uploader.tsx
@@ -1,8 +1,8 @@
 import type { FileUploaderInAttachmentWrapperProps } from '../../../file-uploader/file-uploader-in-attachment'
 import type { FileEntity } from '../../../file-uploader/types'
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import FileUploaderInAttachmentWrapper from '../../../file-uploader/file-uploader-in-attachment'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/input-type-select/index.tsx b/web/app/components/base/form/components/field/input-type-select/index.tsx
index 868625aae7..5e150240f6 100644
--- a/web/app/components/base/form/components/field/input-type-select/index.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/index.tsx
@@ -1,8 +1,8 @@
 import type { CustomSelectProps } from '../../../../select/custom'
 import type { LabelProps } from '../../label'
 import type { FileTypeSelectOption, InputType } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../../..'
 import CustomSelect from '../../../../select/custom'
 import Label from '../../label'
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index c03beeb472..c2b61ca547 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -1,9 +1,9 @@
 import type { FileTypeSelectOption } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import { cn } from '@/utils/classnames'
 
 type TriggerProps = {
   option: FileTypeSelectOption | undefined
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
index 23bfd4d19d..2f47cb1a0f 100644
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
 } from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import { cn } from '@/utils/classnames'
 import Placeholder from './placeholder'
 
 type MixedVariableTextInputProps = {
diff --git a/web/app/components/base/form/components/field/number-input.tsx b/web/app/components/base/form/components/field/number-input.tsx
index fc874a0c2b..fde6463731 100644
--- a/web/app/components/base/form/components/field/number-input.tsx
+++ b/web/app/components/base/form/components/field/number-input.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import type { NumberFieldInputProps, NumberFieldRootProps, NumberFieldSize } from '../../../ui/number-field'
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import {
   NumberField,
diff --git a/web/app/components/base/form/components/field/number-slider.tsx b/web/app/components/base/form/components/field/number-slider.tsx
index 0db18a0a62..5bd66e2fde 100644
--- a/web/app/components/base/form/components/field/number-slider.tsx
+++ b/web/app/components/base/form/components/field/number-slider.tsx
@@ -1,7 +1,7 @@
 import type { LabelProps } from '../label'
 import type { InputNumberWithSliderProps } from '@/app/components/workflow/nodes/_base/components/input-number-with-slider'
+import { cn } from '@langgenius/dify-ui/cn'
 import InputNumberWithSlider from '@/app/components/workflow/nodes/_base/components/input-number-with-slider'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Label from '../label'
 
@@ -30,7 +30,7 @@ const NumberSliderField = ({
           {...(labelOptions ?? {})}
         />
         {description && (
-          <div className="body-xs-regular pb-0.5 text-text-tertiary">
+          <div className="pb-0.5 body-xs-regular text-text-tertiary">
             {description}
           </div>
         )}
diff --git a/web/app/components/base/form/components/field/options.tsx b/web/app/components/base/form/components/field/options.tsx
index 99c89eec47..8cd8c1c6f7 100644
--- a/web/app/components/base/form/components/field/options.tsx
+++ b/web/app/components/base/form/components/field/options.tsx
@@ -1,7 +1,7 @@
 import type { LabelProps } from '../label'
 import type { Options } from '@/app/components/app/configuration/config-var/config-select'
+import { cn } from '@langgenius/dify-ui/cn'
 import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Label from '../label'
 
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index 00ba728755..77405fdca6 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -1,6 +1,6 @@
 import type { Option, PureSelectProps } from '../../../select/pure'
 import type { LabelProps } from '../label'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useFieldContext } from '../..'
 import PureSelect from '../../../select/pure'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/text-area.tsx b/web/app/components/base/form/components/field/text-area.tsx
index 295482e56a..86c2527bda 100644
--- a/web/app/components/base/form/components/field/text-area.tsx
+++ b/web/app/components/base/form/components/field/text-area.tsx
@@ -1,7 +1,7 @@
 import type { TextareaProps } from '../../../textarea'
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Textarea from '../../../textarea'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/text.tsx b/web/app/components/base/form/components/field/text.tsx
index c9b46919a4..3e75e19c22 100644
--- a/web/app/components/base/form/components/field/text.tsx
+++ b/web/app/components/base/form/components/field/text.tsx
@@ -1,7 +1,7 @@
 import type { InputProps } from '../../../input'
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Input from '../../../input'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/upload-method.tsx b/web/app/components/base/form/components/field/upload-method.tsx
index 6d7c91092f..24083706c7 100644
--- a/web/app/components/base/form/components/field/upload-method.tsx
+++ b/web/app/components/base/form/components/field/upload-method.tsx
@@ -1,9 +1,9 @@
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Label from '../label'
 
diff --git a/web/app/components/base/form/components/field/variable-or-constant-input.tsx b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
index 82073ce020..04ecf99330 100644
--- a/web/app/components/base/form/components/field/variable-or-constant-input.tsx
+++ b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
@@ -1,12 +1,12 @@
 import type { ChangeEvent } from 'react'
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
 import Input from '@/app/components/base/input'
 import SegmentedControl from '@/app/components/base/segmented-control'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
-import { cn } from '@/utils/classnames'
 import Label from '../label'
 
 type VariableOrConstantInputFieldProps = {
diff --git a/web/app/components/base/form/components/field/variable-selector.tsx b/web/app/components/base/form/components/field/variable-selector.tsx
index a0c22029aa..aeb687c004 100644
--- a/web/app/components/base/form/components/field/variable-selector.tsx
+++ b/web/app/components/base/form/components/field/variable-selector.tsx
@@ -1,6 +1,6 @@
 import type { LabelProps } from '../label'
+import { cn } from '@langgenius/dify-ui/cn'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
-import { cn } from '@/utils/classnames'
 import Label from '../label'
 
 type VariableOrConstantInputFieldProps = {
diff --git a/web/app/components/base/form/components/label.tsx b/web/app/components/base/form/components/label.tsx
index d62b985ab1..cd23043593 100644
--- a/web/app/components/base/form/components/label.tsx
+++ b/web/app/components/base/form/components/label.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import Tooltip from '../../tooltip'
 
 export type LabelProps = {
@@ -30,8 +30,8 @@ const Label = ({
       >
         {label}
       </label>
-      {!isRequired && showOptional && <div className="system-xs-regular ml-1 text-text-tertiary">{t('label.optional', { ns: 'common' })}</div>}
-      {isRequired && <div className="system-xs-regular ml-1 text-text-destructive-secondary">*</div>}
+      {!isRequired && showOptional && <div className="ml-1 system-xs-regular text-text-tertiary">{t('label.optional', { ns: 'common' })}</div>}
+      {isRequired && <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>}
       {tooltip && (
         <Tooltip
           popupContent={
diff --git a/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx b/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx
index 8affae3d57..f238ea79f7 100644
--- a/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx
@@ -50,7 +50,7 @@ describe('FullScreenModal Component', () => {
       await screen.findByRole('dialog')
       const element = document.querySelector('.custom-wrapper-class')
       expect(element).toBeInTheDocument()
-      expect(element).toHaveClass('modal-dialog')
+      expect(element).toHaveClass('relative', 'z-50')
     })
 
     it('should apply className to the inner panel', async () => {
@@ -154,7 +154,7 @@ describe('FullScreenModal Component', () => {
         </FullScreenModal>,
       )
 
-      const dialog = document.querySelector('.modal-dialog')
+      const dialog = document.querySelector('.relative.z-50')
       if (dialog) {
         await user.click(dialog)
         expect(onClose).toHaveBeenCalled()
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
index a9e153799e..95f593ec3d 100644
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ b/web/app/components/base/fullscreen-modal/index.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLargeLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import { cn } from '@/utils/classnames'
 
 type IModal = {
   className?: string
@@ -26,7 +26,7 @@ export default function FullScreenModal({
 }: IModal) {
   return (
     <Transition show={open} appear>
-      <Dialog as="div" className={cn('modal-dialog', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={cn('relative z-50', wrapperClassName)} onClose={onClose}>
         <TransitionChild>
           <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]', 'duration-300 ease-in data-closed:opacity-0', 'data-enter:opacity-100', 'data-leave:opacity-0')} />
         </TransitionChild>
@@ -44,8 +44,8 @@ export default function FullScreenModal({
                 {closable
                   && (
                     <div
-                      className="absolute right-3 top-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center
-                  radius-lg bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover"
+                      className="absolute top-3 right-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center
+                  rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover"
                       onClick={(e) => {
                         e.stopPropagation()
                         onClose()
diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx
index 105bf04edb..fa446a2b7d 100644
--- a/web/app/components/base/grid-mask/index.tsx
+++ b/web/app/components/base/grid-mask/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import Style from './style.module.css'
 
 type GridMaskProps = {
diff --git a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
index dba4597d8c..997efd51be 100644
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './BaichuanTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/Minimax.tsx b/web/app/components/base/icons/src/image/llm/Minimax.tsx
index 2776863e34..70e7f609f8 100644
--- a/web/app/components/base/icons/src/image/llm/Minimax.tsx
+++ b/web/app/components/base/icons/src/image/llm/Minimax.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './Minimax.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
index c222ffcccf..3b4bf56004 100644
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
+++ b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './MinimaxText.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/Tongyi.tsx b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
index 90dfe297c4..de59f86e3a 100644
--- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx
+++ b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './Tongyi.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/TongyiText.tsx b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
index 6793503d76..b38d801fa4 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './TongyiText.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
index 02faefe1ae..2a427bb4bd 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './TongyiTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/Wxyy.tsx b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
index 789fa8392c..a146250f10 100644
--- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx
+++ b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './Wxyy.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/WxyyText.tsx b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
index 2c7f9e95fd..8007ee27a3 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './WxyyText.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
index 027ab4ffd4..835ce6737b 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
@@ -1,8 +1,8 @@
 // GENERATE BY script
 // DON NOT EDIT IT MANUALLY
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './WxyyTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index 44b77afe68..3e9d030831 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
 type Props = {
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.tsx b/web/app/components/base/image-uploader/chat-image-uploader.tsx
index 0604f93a8a..b2f6a106c6 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { ImageFile, VisionSettings } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import ImageLinkInput from './image-link-input'
 import Uploader from './uploader'
 
@@ -107,7 +107,7 @@ const UploaderButton: FC<UploaderButtonProps> = ({
                       hovering && 'bg-primary-50',
                     )}
                   >
-                    <span className="i-custom-vender-line-general-upload-03 mr-1 h-4 w-4" />
+                    <span className="mr-1 i-custom-vender-line-general-upload-03 h-4 w-4" />
                     {t('imageUploader.uploadFromComputer', { ns: 'common' })}
                   </div>
                 )}
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index a951680b3f..c6cb977bb3 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -1,13 +1,12 @@
-/* eslint-disable next/no-img-element */
 import type { FC } from 'react'
 import type { ImageFile } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import Tooltip from '@/app/components/base/tooltip'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type ImageListProps = {
   list: ImageFile[]
@@ -61,7 +60,7 @@ const ImageList: FC<ImageListProps> = ({
                 )}
               </div>
               {item.progress > -1 && (
-                <span className="absolute left-[50%] top-[50%] z-1 translate-x-[-50%] translate-y-[-50%] text-sm text-white mix-blend-lighten">
+                <span className="absolute top-[50%] left-[50%] z-1 translate-x-[-50%] translate-y-[-50%] text-sm text-white mix-blend-lighten">
                   {item.progress}
                   %
                 </span>
@@ -113,7 +112,7 @@ const ImageList: FC<ImageListProps> = ({
             <button
               type="button"
               className={cn(
-                'absolute -right-[9px] -top-[9px] z-10 h-[18px] w-[18px] items-center justify-center',
+                'absolute -top-[9px] -right-[9px] z-10 h-[18px] w-[18px] items-center justify-center',
                 'rounded-2xl shadow-lg hover:bg-state-base-hover',
                 item.progress === -1 ? 'flex' : 'hidden group-hover:flex',
               )}
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index b2f1242da8..0dccdcf0f5 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type InlineDeleteConfirmProps = {
   title?: string
@@ -35,7 +35,7 @@ const InlineDeleteConfirm: FC<InlineDeleteConfirmProps> = ({
       aria-describedby="inline-delete-confirm-description"
       className={cn(
         'flex w-[120px] flex-col justify-center gap-1.5',
-        'radius-lg border-[0.5px] border-components-panel-border-subtle',
+        'rounded-[10px] border-[0.5px] border-components-panel-border-subtle',
         'bg-components-panel-bg-blur px-2 pt-1.5 pb-2',
         'backdrop-blur-[10px]',
         'shadow-lg',
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 33db47baaa..2da2e547c2 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { InputProps } from '../input'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useClipboard } from '@/hooks/use-clipboard'
-import { cn } from '@/utils/classnames'
 import ActionButton from '../action-button'
 import Tooltip from '../tooltip'
 
@@ -50,7 +50,7 @@ const InputWithCopy = React.forwardRef<HTMLInputElement, InputWithCopyProps>((
         ref={ref}
         className={cn(
           'w-full appearance-none border border-transparent bg-components-input-bg-normal py-[7px] text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
-          'px-3 system-sm-regular radius-md',
+          'rounded-lg px-3 system-sm-regular',
           showCopyButton && 'pr-8',
           inputProps.disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
           inputProps.className,
@@ -60,7 +60,7 @@ const InputWithCopy = React.forwardRef<HTMLInputElement, InputWithCopyProps>((
       />
       {showCopyButton && (
         <div
-          className="absolute right-2 top-1/2 -translate-y-1/2"
+          className="absolute top-1/2 right-2 -translate-y-1/2"
           onMouseLeave={reset}
           data-testid="copy-button-wrapper"
         >
diff --git a/web/app/components/base/input/__tests__/index.spec.tsx b/web/app/components/base/input/__tests__/index.spec.tsx
index ab8f66067f..1c50454962 100644
--- a/web/app/components/base/input/__tests__/index.spec.tsx
+++ b/web/app/components/base/input/__tests__/index.spec.tsx
@@ -14,21 +14,21 @@ describe('Input component', () => {
     it('should return correct classes for regular size', () => {
       const result = inputVariants({ size: 'regular' })
       expect(result).toContain('px-3')
-      expect(result).toContain('radius-md')
+      expect(result).toContain('rounded-lg')
       expect(result).toContain('system-sm-regular')
     })
 
     it('should return correct classes for large size', () => {
       const result = inputVariants({ size: 'large' })
       expect(result).toContain('px-4')
-      expect(result).toContain('radius-lg')
+      expect(result).toContain('rounded-[10px]')
       expect(result).toContain('system-md-regular')
     })
 
     it('should use regular size as default', () => {
       const result = inputVariants({})
       expect(result).toContain('px-3')
-      expect(result).toContain('radius-md')
+      expect(result).toContain('rounded-lg')
       expect(result).toContain('system-sm-regular')
     })
   })
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index 96dd78e10f..d41cd2c0cf 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -1,10 +1,10 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { ChangeEventHandler, CSSProperties, FocusEventHandler } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { CopyFeedbackNew } from '../copy-feedback'
 
 export const inputVariants = cva(
@@ -12,8 +12,8 @@ export const inputVariants = cva(
   {
     variants: {
       size: {
-        regular: 'px-3 system-sm-regular radius-md',
-        large: 'px-4 system-md-regular radius-lg',
+        regular: 'rounded-lg px-3 system-sm-regular',
+        large: 'rounded-[10px] px-4 system-md-regular',
       },
     },
     defaultVariants: {
@@ -82,7 +82,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   }
   return (
     <div className={cn('relative w-full', wrapperClassName)}>
-      {showLeftIcon && <span className={cn('i-ri-search-line absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
+      {showLeftIcon && <span className={cn('absolute top-1/2 left-2 i-ri-search-line h-4 w-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
       <input
         ref={ref}
         style={styleCss}
@@ -110,7 +110,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
       />
       {!!(showClearIcon && value && !disabled && !destructive) && (
         <div
-          className={cn('group absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer p-px')}
+          className={cn('group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer p-px')}
           onClick={onClear}
           data-testid="input-clear"
         >
@@ -118,10 +118,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
         </div>
       )}
       {destructive && (
-        <span className="i-ri-error-warning-line absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />
+        <span className="absolute top-1/2 right-2 i-ri-error-warning-line h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />
       )}
       {showCopyIcon && (
-        <div className={cn('group absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer')}>
+        <div className={cn('group absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer')}>
           <CopyFeedbackNew
             content={String(value ?? '')}
             className="h-7! w-7! hover:bg-transparent"
@@ -130,7 +130,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
       )}
       {
         unit && (
-          <div className="absolute right-2 top-1/2 -translate-y-1/2 text-text-tertiary system-sm-regular">
+          <div className="absolute top-1/2 right-2 -translate-y-1/2 system-sm-regular text-text-tertiary">
             {unit}
           </div>
         )
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index 1ce76e0647..8503a7bdfb 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { RelatedApp } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import * as React from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type ILikedItemProps = {
   appStatus?: boolean
@@ -32,9 +32,9 @@ const LikedItem = ({
         <div className={cn('relative h-6 w-6 rounded-md')}>
           <AppIcon size="tiny" iconType={detail.icon_type} icon={detail.icon} background={detail.icon_background} imageUrl={detail.icon_url} />
         </div>
-        {!isMobile && <div className={cn(' system-sm-medium ml-2 truncate text-text-primary')}>{detail?.name || '--'}</div>}
+        {!isMobile && <div className={cn('ml-2 truncate system-sm-medium text-text-primary')}>{detail?.name || '--'}</div>}
       </div>
-      <div className="system-2xs-medium-uppercase shrink-0 text-text-tertiary group-hover/link-item:hidden">{appTypeMap[detail.mode]}</div>
+      <div className="shrink-0 system-2xs-medium-uppercase text-text-tertiary group-hover/link-item:hidden">{appTypeMap[detail.mode]}</div>
       <RiArrowRightUpLine className="hidden h-4 w-4 text-text-tertiary group-hover/link-item:block" />
     </Link>
   )
diff --git a/web/app/components/base/list-empty/index.tsx b/web/app/components/base/list-empty/index.tsx
index 8c30439298..ac1b019e5c 100644
--- a/web/app/components/base/list-empty/index.tsx
+++ b/web/app/components/base/list-empty/index.tsx
@@ -16,16 +16,16 @@ const ListEmpty = ({
   icon,
 }: ListEmptyProps) => {
   return (
-    <div className="flex w-[320px] flex-col items-start gap-2 radius-lg bg-workflow-process-bg p-4">
-      <div className="flex h-10 w-10 items-center justify-center gap-2 radius-lg">
-        <div className="relative flex grow items-center justify-center gap-2 self-stretch radius-lg border-[0.5px]
+    <div className="flex w-[320px] flex-col items-start gap-2 rounded-[10px] bg-workflow-process-bg p-4">
+      <div className="flex h-10 w-10 items-center justify-center gap-2 rounded-[10px]">
+        <div className="relative flex grow items-center justify-center gap-2 self-stretch rounded-[10px] border-[0.5px]
           border-components-card-border bg-components-card-bg p-1 shadow-lg"
         >
           {icon || <Variable02 className="h-5 w-5 shrink-0 text-text-accent" />}
-          <VerticalLine className="absolute -right-px top-1/2 -translate-y-1/4" />
-          <VerticalLine className="absolute -left-px top-1/2 -translate-y-1/4" />
-          <HorizontalLine className="absolute left-3/4 top-0 -translate-x-1/4 -translate-y-1/2" />
-          <HorizontalLine className="absolute left-3/4 top-full -translate-x-1/4 -translate-y-1/2" />
+          <VerticalLine className="absolute top-1/2 -right-px -translate-y-1/4" />
+          <VerticalLine className="absolute top-1/2 -left-px -translate-y-1/4" />
+          <HorizontalLine className="absolute top-0 left-3/4 -translate-x-1/4 -translate-y-1/2" />
+          <HorizontalLine className="absolute top-full left-3/4 -translate-x-1/4 -translate-y-1/2" />
         </div>
       </div>
       <div className="flex flex-col items-start gap-1 self-stretch">
diff --git a/web/app/components/base/loading/index.tsx b/web/app/components/base/loading/index.tsx
index a946edf36c..f66ba3511d 100644
--- a/web/app/components/base/loading/index.tsx
+++ b/web/app/components/base/loading/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import './style.css'
 
 type ILoadingProps = {
diff --git a/web/app/components/base/logo/dify-logo.tsx b/web/app/components/base/logo/dify-logo.tsx
index 26718cbbeb..0250e8c913 100644
--- a/web/app/components/base/logo/dify-logo.tsx
+++ b/web/app/components/base/logo/dify-logo.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 
 export type LogoStyle = 'default' | 'monochromeWhite'
diff --git a/web/app/components/base/logo/logo-embedded-chat-header.tsx b/web/app/components/base/logo/logo-embedded-chat-header.tsx
index 845b2f0fc2..311cf912d2 100644
--- a/web/app/components/base/logo/logo-embedded-chat-header.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-header.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { basePath } from '@/utils/var'
 
 type LogoEmbeddedChatHeaderProps = {
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index edf6045513..be3d2b31dd 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { basePath } from '@/utils/var'
 
 type LogoSiteProps = {
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 72f5dbc7f8..055835b503 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { isValidUrl } from './utils'
 
 const MarkdownButton = ({ node }: any) => {
diff --git a/web/app/components/base/markdown-blocks/think-block.tsx b/web/app/components/base/markdown-blocks/think-block.tsx
index 184ed89274..f666d3a218 100644
--- a/web/app/components/base/markdown-blocks/think-block.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { useChatContext } from '../chat/chat/context'
 
 const hasEndThink = (children: any): boolean => {
@@ -90,7 +90,7 @@ const ThinkBlock = ({ children, ...props }: ThinkBlockProps) => {
       className={cn('group', className)}
       open={isComplete ? open : true}
     >
-      <summary className="flex cursor-pointer select-none list-none items-center whitespace-nowrap pl-2 font-bold text-text-secondary">
+      <summary className="flex cursor-pointer list-none items-center pl-2 font-bold whitespace-nowrap text-text-secondary select-none">
         <div className="flex shrink-0 items-center">
           <svg
             className="mr-2 h-3 w-3 transition-transform duration-500 group-open:rotate-90"
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
index 8e5870ddeb..d73279f912 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
+++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import type { WithIconCardItemProps } from './markdown-with-directive-schema'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type WithIconItemProps = WithIconCardItemProps & {
   children?: ReactNode
@@ -18,7 +18,7 @@ function WithIconCardItem({ icon, children, className, iconAlt }: WithIconItemPr
         width={40}
         height={40}
       />
-      <div className="min-w-0 grow overflow-hidden text-text-secondary system-sm-medium [&_p]:m-0! [&_p]:block [&_p]:w-full [&_p]:overflow-hidden [&_p]:text-ellipsis [&_p]:whitespace-nowrap">
+      <div className="min-w-0 grow overflow-hidden system-sm-medium text-text-secondary [&_p]:m-0! [&_p]:block [&_p]:w-full [&_p]:overflow-hidden [&_p]:text-ellipsis [&_p]:whitespace-nowrap">
         {children}
       </div>
     </div>
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-list.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-list.tsx
index 750bfe5dc9..1d2b0e8064 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-list.tsx
+++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-list.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import type { WithIconCardListProps } from './markdown-with-directive-schema'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type WithIconListProps = WithIconCardListProps & {
   children?: ReactNode
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index c50d2b2523..56ea08b7f9 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -1,8 +1,8 @@
 import type { SimplePluginInfo, StreamdownWrapperProps } from './streamdown-wrapper'
+import { cn } from '@langgenius/dify-ui/cn'
 import { flow } from 'es-toolkit/compat'
 import { memo, useMemo } from 'react'
 import dynamic from '@/next/dynamic'
-import { cn } from '@/utils/classnames'
 import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
 
 const StreamdownWrapper = dynamic(() => import('./streamdown-wrapper'), { ssr: false })
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index eed5a35693..9af1024ba9 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -1,4 +1,5 @@
 import type { MermaidConfig } from 'mermaid'
+import { cn } from '@langgenius/dify-ui/cn'
 import mermaid from 'mermaid'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -6,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import {
   cleanUpSvgCode,
   isMermaidCodeComplete,
@@ -481,7 +481,7 @@ const Flowchart = (props: FlowchartProps) => {
   // Style classes for look options
   const getLookButtonClass = (lookType: 'classic' | 'handDrawn') => {
     return cn(
-      'mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary system-sm-medium',
+      'mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg system-sm-medium text-text-secondary',
       look === lookType && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
       currentTheme === Theme.dark && 'border-slate-600 bg-slate-800 text-slate-300',
       look === lookType && currentTheme === Theme.dark && 'border-blue-500 bg-slate-700 text-white',
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index a1bc791f39..2d8d1dec66 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { useClickAway } from 'ahooks'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/app/store'
 import Run from '@/app/components/workflow/run'
-import { cn } from '@/utils/classnames'
 
 type MessageLogModalProps = {
   currentLogItem?: IChatItem
@@ -57,8 +57,8 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
       }}
       ref={ref}
     >
-      <h1 className="shrink-0 px-4 py-1 text-text-primary system-xl-semibold">{t('runDetail.title', { ns: 'appLog' })}</h1>
-      <span className="absolute right-3 top-4 z-20 cursor-pointer p-1" onClick={onCancel} data-testid="close-button">
+      <h1 className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.title', { ns: 'appLog' })}</h1>
+      <span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onCancel} data-testid="close-button">
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <Run
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
index f105ac4b67..8665e54941 100644
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   title: string
diff --git a/web/app/components/base/modal/index.css b/web/app/components/base/modal/index.css
deleted file mode 100644
index 3787da28f4..0000000000
--- a/web/app/components/base/modal/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.modal-dialog {
-  @apply relative z-50;
-}
-
-.modal-panel {
-  @apply w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all;
-}
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 8107718b29..9238f4a8ca 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -4,9 +4,9 @@
  * See: https://github.com/langgenius/dify/issues/32767
  */
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { Fragment } from 'react'
-import { cn } from '@/utils/classnames'
 // https://headlessui.com/react/dialog
 
 type IModal = {
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index e649ebe41e..8d046adf71 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -4,6 +4,7 @@
  * See: https://github.com/langgenius/dify/issues/32767
  */
 import type { ButtonProps } from '@/app/components/base/ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import {
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type ModalProps = {
   onClose?: () => void
diff --git a/web/app/components/base/node-status/index.tsx b/web/app/components/base/node-status/index.tsx
index 1616f350b0..398e2cf142 100644
--- a/web/app/components/base/node-status/index.tsx
+++ b/web/app/components/base/node-status/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { VariantProps } from 'class-variance-authority'
 import type { CSSProperties } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiErrorWarningFill } from '@remixicon/react'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
-import { cn } from '@/utils/classnames'
 
 export enum NodeStatusEnum {
   warning = 'warning',
diff --git a/web/app/components/base/notion-connector/index.tsx b/web/app/components/base/notion-connector/index.tsx
index c8df7d074e..2187b19e8a 100644
--- a/web/app/components/base/notion-connector/index.tsx
+++ b/web/app/components/base/notion-connector/index.tsx
@@ -13,7 +13,7 @@ const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
 
   return (
     <div className="flex flex-col items-start rounded-2xl bg-workflow-process-bg p-6">
-      <div className="mb-2 h-12 w-12 radius-lg border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5">
+      <div className="mb-2 h-12 w-12 rounded-[10px] border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5">
         <Notion className="size-6" />
       </div>
       <div className="mb-1 flex flex-col gap-y-1 pt-1 pb-3">
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index a272a9369c..62fcef1dc1 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -1,6 +1,6 @@
 import type { DataSourceNotionPage } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiFileTextLine } from '@remixicon/react'
-import { cn } from '@/utils/classnames'
 
 type IconTypes = 'workspace' | 'page'
 type NotionIconProps = {
diff --git a/web/app/components/base/notion-page-selector/page-selector/page-row.tsx b/web/app/components/base/notion-page-selector/page-selector/page-row.tsx
index 849c8507a8..156dfe8e66 100644
--- a/web/app/components/base/notion-page-selector/page-selector/page-row.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/page-row.tsx
@@ -1,12 +1,12 @@
 import type { CSSProperties } from 'react'
 import type { NotionPageRow as NotionPageRowData, NotionPageSelectionMode } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Radio from '@/app/components/base/radio/ui'
-import { cn } from '@/utils/classnames'
 
 type NotionPageRowProps = {
   checked: boolean
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index ea0ea3ecf7..55bf506ce6 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type SearchInputProps = {
   value: string
@@ -26,7 +26,7 @@ const SearchInput = ({
       className={cn('flex h-8 w-[200px] items-center rounded-lg bg-components-input-bg-normal p-2')}
       data-testid="notion-search-input-container"
     >
-      <div className="i-ri-search-line mr-0.5 h-4 w-4 shrink-0 text-components-input-text-placeholder" />
+      <div className="mr-0.5 i-ri-search-line h-4 w-4 shrink-0 text-components-input-text-placeholder" />
       <input
         className="min-w-0 grow appearance-none border-0 bg-transparent px-1 text-[13px] leading-[16px] text-components-input-text-filled outline-0 placeholder:text-components-input-text-placeholder"
         value={value}
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index 95485c4efb..815e825c8d 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { Pagination } from './pagination'
 
 export type Props = {
@@ -98,7 +98,7 @@ const CustomizedPagination: FC<Props> = ({
       truncableClassName="flex items-center justify-center w-8 px-1 py-2 system-sm-medium text-text-tertiary"
       truncableText="..."
     >
-      <div className="flex items-center gap-0.5 radius-lg bg-background-section-burn p-0.5">
+      <div className="flex items-center gap-0.5 rounded-[10px] bg-background-section-burn p-0.5">
         <Pagination.PrevButton
           as={<div></div>}
           disabled={current === 0}
@@ -160,7 +160,7 @@ const CustomizedPagination: FC<Props> = ({
         <div className="flex shrink-0 items-center gap-2">
           <div className="w-[51px] shrink-0 text-end system-2xs-regular-uppercase text-text-tertiary">{showPerPageTip ? t('pagination.perPage', { ns: 'common' }) : ''}</div>
           <div
-            className="flex items-center gap-px radius-lg bg-components-segmented-control-bg-normal p-0.5"
+            className="flex items-center gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5"
             onMouseEnter={() => setShowPerPageTip(true)}
             onMouseLeave={() => setShowPerPageTip(false)}
           >
diff --git a/web/app/components/base/pagination/pagination.tsx b/web/app/components/base/pagination/pagination.tsx
index 9ce128e497..21d3d721c2 100644
--- a/web/app/components/base/pagination/pagination.tsx
+++ b/web/app/components/base/pagination/pagination.tsx
@@ -4,9 +4,9 @@ import type {
   IPaginationProps,
   PageButtonProps,
 } from './type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import usePagination from './hook'
 
 const defaultState: IPagination = {
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index b2edb0c1af..d07f8c9a41 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -1,6 +1,6 @@
 import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cloneElement, Fragment, isValidElement, useRef } from 'react'
-import { cn } from '@/utils/classnames'
 
 export type HtmlContentProps = {
   open?: boolean
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index 932eceee2b..b3772122f8 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -28,9 +28,9 @@ import {
   useRole,
 } from '@floating-ui/react'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 export type PortalToFollowElemOptions = {
   /*
diff --git a/web/app/components/base/premium-badge/__tests__/index.spec.tsx b/web/app/components/base/premium-badge/__tests__/index.spec.tsx
index d107c07e52..c3eb31c72e 100644
--- a/web/app/components/base/premium-badge/__tests__/index.spec.tsx
+++ b/web/app/components/base/premium-badge/__tests__/index.spec.tsx
@@ -30,7 +30,7 @@ describe('PremiumBadge', () => {
     )
     const badge = screen.getByText('Premium')
     expect(badge).toBeInTheDocument()
-    expect(badge).toHaveClass('allowHover')
+    expect(badge).toHaveClass('pb-allow-hover')
   })
 
   it('applies custom styles', () => {
diff --git a/web/app/components/base/premium-badge/index.css b/web/app/components/base/premium-badge/index.css
index 040df8fdc6..f192a51e57 100644
--- a/web/app/components/base/premium-badge/index.css
+++ b/web/app/components/base/premium-badge/index.css
@@ -3,7 +3,7 @@
   background-clip: padding-box, border-box;
 }
 
-@utility allowHover {
+@utility pb-allow-hover {
   @apply cursor-pointer;
   &.premium-badge-blue:hover {
     @apply bg-util-colors-blue-blue-300;
@@ -65,7 +65,7 @@
       var(--color-premium-badge-border-highlight-color) 0%,
       #155aef 100%
     );
-  &.allowHover:hover {
+  &.pb-allow-hover:hover {
     @apply bg-util-colors-blue-blue-300;
     background-image:
       linear-gradient(90deg, #296dffe6 0%, #004aebe6 100%),
@@ -86,7 +86,7 @@
       var(--color-premium-badge-border-highlight-color) 0%,
       #6172f3 100%
     );
-  &.allowHover:hover {
+  &.pb-allow-hover:hover {
     @apply bg-util-colors-indigo-indigo-300;
     background-image:
       linear-gradient(90deg, #6172f3e6 0%, #2d31a6e6 100%),
@@ -107,7 +107,7 @@
       var(--color-premium-badge-border-highlight-color) 0%,
       #676f83 100%
     );
-  &.allowHover:hover {
+  &.pb-allow-hover:hover {
     @apply bg-util-colors-gray-gray-300;
     background-image:
       linear-gradient(90deg, #676f83e6 0%, #354052e6 100%),
@@ -128,7 +128,7 @@
       var(--color-premium-badge-border-highlight-color) 0%,
       #e62e05 100%
     );
-  &.allowHover:hover {
+  &.pb-allow-hover:hover {
     @apply bg-util-colors-orange-orange-300;
     background-image:
       linear-gradient(90deg, #ff4405e6 0%, #b93815e6 100%),
diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx
index 1ffff2f7a9..42ce158606 100644
--- a/web/app/components/base/premium-badge/index.tsx
+++ b/web/app/components/base/premium-badge/index.tsx
@@ -1,9 +1,9 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { CSSProperties, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
-import { cn } from '@/utils/classnames'
 
 const PremiumBadgeVariants = cva(
   'premium-badge',
@@ -21,7 +21,7 @@ const PremiumBadgeVariants = cva(
         orange: 'premium-badge-orange',
       },
       allowHover: {
-        true: 'allowHover',
+        true: 'pb-allow-hover',
         false: '',
       },
     },
@@ -58,7 +58,7 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({
     >
       {children}
       <Highlight
-        className={cn('absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80', size === 's' ? 'h-[18px] w-12' : 'h-6 w-12')}
+        className={cn('absolute top-0 right-1/2 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80', size === 's' ? 'h-[18px] w-12' : 'h-6 w-12')}
       />
     </div>
   )
diff --git a/web/app/components/base/progress-bar/progress-circle.tsx b/web/app/components/base/progress-bar/progress-circle.tsx
index 1123e412e3..85113277c8 100644
--- a/web/app/components/base/progress-bar/progress-circle.tsx
+++ b/web/app/components/base/progress-bar/progress-circle.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 
 type ProgressCircleProps = {
   className?: string
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 6f6da6901b..3cc0e25016 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -20,6 +20,7 @@ import type {
   VariableBlockType,
   WorkflowVariableBlockType,
 } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { CodeNode } from '@lexical/code'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import {
@@ -29,7 +30,6 @@ import {
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { cn } from '@/utils/classnames'
 import {
   UPDATE_DATASETS_EVENT_EMITTER,
   UPDATE_HISTORY_EVENT_EMITTER,
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
index 01c89f4ddb..89df071410 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
-import { cn } from '@/utils/classnames'
 import { CurrentBlockNode, DELETE_CURRENT_BLOCK_COMMAND } from '.'
 import { CodeAssistant, MagicEdit } from '../../../icons/src/vender/line/general'
 import { useSelectOrDelete } from '../../hooks'
@@ -28,8 +28,8 @@ const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] text-util-colors-violet-violet-600 hover:border-state-accent-solid hover:bg-state-accent-hover',
-        isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
+        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border pr-[3px] pl-0.5 text-util-colors-violet-violet-600 select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
+        isSelected ? 'border-state-accent-solid bg-state-accent-hover' : 'border-components-panel-border-subtle bg-components-badge-white-to-dark',
       )}
       onClick={(e) => {
         e.stopPropagation()
diff --git a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
index a2ec14bada..8b7c690d30 100644
--- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
@@ -1,8 +1,8 @@
 import type { JSX } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { DraggableBlockPlugin_EXPERIMENTAL } from '@lexical/react/LexicalDraggableBlockPlugin'
 import { useEffect, useRef, useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu'
 
@@ -60,7 +60,7 @@ export default function DraggableBlockPlugin({
       menuComponent={
         isSupportDrag
           ? (
-              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-2.5 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')} data-testid="draggable-menu">
+              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute top-4 right-2.5 cursor-grab opacity-0 will-change-transform active:cursor-move')} data-testid="draggable-menu">
                 <span className="i-ri-draggable size-3.5 text-text-tertiary" data-testid="draggable-menu-icon" />
               </div>
             )
@@ -69,12 +69,12 @@ export default function DraggableBlockPlugin({
       targetLineComponent={(
         <div
           ref={targetLineRef}
-          className="pointer-events-none absolute left-[-21px] top-0 opacity-0 will-change-transform"
+          className="pointer-events-none absolute top-0 left-[-21px] opacity-0 will-change-transform"
           data-testid="draggable-target-line"
           // style={{ width: 500 }} // width not worked here
         >
           <div
-            className="absolute -right-10 left-0 top-0 h-[2px] bg-text-accent-secondary"
+            className="absolute top-0 -right-10 left-0 h-[2px] bg-text-accent-secondary"
           >
           </div>
         </div>
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
index 97992d2301..fe862111b5 100644
--- a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
-import { cn } from '@/utils/classnames'
 import { DELETE_ERROR_MESSAGE_COMMAND, ErrorMessageBlockNode } from '.'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 import { useSelectOrDelete } from '../../hooks'
@@ -24,8 +24,8 @@ const ErrorMessageBlockComponent: FC<Props> = ({
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] text-util-colors-orange-dark-orange-dark-600 hover:border-state-accent-solid hover:bg-state-accent-hover',
-        isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
+        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border pr-[3px] pl-0.5 text-util-colors-orange-dark-orange-dark-600 select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
+        isSelected ? 'border-state-accent-solid bg-state-accent-hover' : 'border-components-panel-border-subtle bg-components-badge-white-to-dark',
       )}
       onClick={(e) => {
         e.stopPropagation()
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index a4f5554352..9a752062ea 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -102,9 +102,9 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
 
   return (
     <div
-      className="group relative flex h-8 w-full select-none items-center radius-md border-[1.5px] border-components-input-border-active bg-background-default-hover pl-1.5 pr-0.5"
+      className="group relative flex h-8 w-full items-center rounded-lg border-[1.5px] border-components-input-border-active bg-background-default-hover pr-0.5 pl-1.5 select-none"
     >
-      <div className="absolute left-2.5 top-[-12px]">
+      <div className="absolute top-[-12px] left-2.5">
         <div className="absolute bottom-1 h-[1.5px] w-full bg-background-default-subtle"></div>
         <div className="relative flex items-center space-x-0.5 px-1 text-text-accent-light-mode-only">
           <VariableX className="size-3" />
@@ -126,7 +126,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
             />
           )}
           {!isDefaultValueVariable && (
-            <div className="max-w-full truncate text-components-input-text-filled system-xs-medium">{formInput.default?.value}</div>
+            <div className="max-w-full truncate system-xs-medium text-components-input-text-filled">{formInput.default?.value}</div>
           )}
         </div>
 
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index 8a791dc7fc..93e6610d12 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -142,8 +142,8 @@ const InputField: React.FC<InputFieldProps> = ({
                 onClick={handleSave}
               >
                 <span className="mr-1">{t(`${i18nPrefix}.insert`, { ns: 'workflow' })}</span>
-                <span className="mr-0.5 flex h-4 items-center radius-xs bg-components-kbd-bg-white px-1 system-kbd">{getKeyboardKeyNameBySystem('ctrl')}</span>
-                <span className="flex h-4 items-center radius-xs bg-components-kbd-bg-white px-1 system-kbd">↩︎</span>
+                <span className="mr-0.5 flex h-4 items-center rounded-sm bg-components-kbd-bg-white px-1 system-kbd">{getKeyboardKeyNameBySystem('ctrl')}</span>
+                <span className="flex h-4 items-center rounded-sm bg-components-kbd-bg-white px-1 system-kbd">↩︎</span>
               </Button>
             )}
 
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
index bbcf5485b9..9f4b789b53 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import Textarea from '../../../textarea'
 import TagLabel from './tag-label'
 import TypeSwitch from './type-switch'
@@ -41,7 +41,7 @@ const Placeholder = ({
 }: PlaceholderProps) => {
   const { t } = useTranslation()
   return (
-    <div className="system-sm-regular mt-1 h-[80px] rounded-lg bg-components-input-bg-normal px-3 pt-2 text-text-tertiary">
+    <div className="mt-1 h-[80px] rounded-lg bg-components-input-bg-normal px-3 pt-2 system-sm-regular text-text-tertiary">
       <div className="flex flex-wrap items-center leading-5">
         <Trans
           i18nKey={`${i18nPrefix}.prePopulateFieldPlaceholder`}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
index c414db866d..6516b7041d 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
@@ -25,7 +25,7 @@ const TagLabel: FC<Props> = ({
       onClick={onClick}
     >
       <Icon className="size-3.5" />
-      <div className="system-xs-medium ">{children}</div>
+      <div className="system-xs-medium">{children}</div>
     </div>
   )
 }
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
index 667f0605e8..86ab518fc5 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
@@ -18,7 +18,7 @@ const TypeSwitch: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
+    <div className={cn('inline-flex h-6 cursor-pointer items-center space-x-1 rounded-md pr-2 pl-1.5 text-text-tertiary select-none hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
       <Variable02 className="size-3.5" />
       <div className="system-xs-medium">{t(`nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`, { ns: 'workflow' })}</div>
     </div>
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
index cbe56d95f9..c0fa8364b7 100644
--- a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
-import { cn } from '@/utils/classnames'
 import { DELETE_LAST_RUN_COMMAND, LastRunBlockNode } from '.'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 import { useSelectOrDelete } from '../../hooks'
@@ -24,8 +24,8 @@ const LastRunBlockComponent: FC<Props> = ({
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] text-text-accent hover:border-state-accent-solid hover:bg-state-accent-hover',
-        isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
+        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border pr-[3px] pl-0.5 text-text-accent select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
+        isSelected ? 'border-state-accent-solid bg-state-accent-hover' : 'border-components-panel-border-subtle bg-components-badge-white-to-dark',
       )}
       onClick={(e) => {
         e.stopPropagation()
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index 077516cb8b..700d0a2f6a 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 const Placeholder = ({
   compact,
@@ -16,7 +16,7 @@ const Placeholder = ({
 
   return (
     <div className={cn(
-      'pointer-events-none absolute left-0 top-0 h-full w-full select-none text-sm text-components-input-text-placeholder',
+      'pointer-events-none absolute top-0 left-0 h-full w-full text-sm text-components-input-text-placeholder select-none',
       compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
       className,
     )}
diff --git a/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx b/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
index 65912061b5..469225d4de 100644
--- a/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiGlobalLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
 
-import { cn } from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
 import { useSelectOrDelete } from '../../hooks'
 import { DELETE_REQUEST_URL_BLOCK_COMMAND } from './index'
 
@@ -19,7 +19,7 @@ const RequestURLBlockComponent: FC<RequestURLBlockComponentProps> = ({
   return (
     <div
       className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border border-components-panel-border-subtle bg-components-badge-white-to-dark px-1 hover:border-[#7839ee]',
+        'group/wrap relative mx-0.5 flex h-[18px] items-center rounded-[5px] border border-components-panel-border-subtle bg-components-badge-white-to-dark px-1 select-none hover:border-[#7839ee]',
         isSelected && 'border-[#7839ee]! hover:border-[#7839ee]!',
       )}
       ref={ref}
diff --git a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
index 88cd6b7a98..2dedc9768b 100644
--- a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
@@ -7,6 +7,7 @@ import {
   size,
   useFloating,
 } from '@floating-ui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import {
   $getSelection,
@@ -20,7 +21,6 @@ import {
   useState,
 } from 'react'
 import { createPortal } from 'react-dom'
-import { cn } from '@/utils/classnames'
 
 export const SHORTCUTS_EMPTY_CONTENT = 'shortcuts_empty_content'
 
diff --git a/web/app/components/base/prompt-editor/prompt-editor-content.tsx b/web/app/components/base/prompt-editor/prompt-editor-content.tsx
index 07db69cfc8..28a0863284 100644
--- a/web/app/components/base/prompt-editor/prompt-editor-content.tsx
+++ b/web/app/components/base/prompt-editor/prompt-editor-content.tsx
@@ -17,13 +17,13 @@ import type {
   VariableBlockType,
   WorkflowVariableBlockType,
 } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import ComponentPickerBlock from './plugins/component-picker-block'
 import {
   ContextBlock,
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 4ed1d45ed0..87e2c96258 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -42,11 +42,11 @@ const RadioCard: FC<Props> = ({
           {icon}
         </div>
         <div className="grow">
-          <div className="system-sm-semibold mb-1 text-text-secondary">{title}</div>
+          <div className="mb-1 system-sm-semibold text-text-secondary">{title}</div>
           <div className="system-xs-regular text-text-tertiary">{description}</div>
         </div>
         {!noRadio && (
-          <div className="absolute right-3 top-3">
+          <div className="absolute top-3 right-3">
             <div className={cn(
               'h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
               isChosen && 'border-[5px] border-components-radio-border-checked',
diff --git a/web/app/components/base/radio-card/simple/index.tsx b/web/app/components/base/radio-card/simple/index.tsx
index d5f2f0ab9c..237af7a596 100644
--- a/web/app/components/base/radio-card/simple/index.tsx
+++ b/web/app/components/base/radio-card/simple/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
 type Props = {
@@ -32,10 +32,10 @@ const RadioCard: FC<Props> = ({
         {icon}
         <div>
           <div className="flex items-center justify-between">
-            <div className="text-sm font-medium leading-5 text-gray-900">{title}</div>
+            <div className="text-sm leading-5 font-medium text-gray-900">{title}</div>
             <div className={s.radio}></div>
           </div>
-          <div className="text-xs font-normal leading-[18px] text-gray-500">{description}</div>
+          <div className="text-xs leading-[18px] font-normal text-gray-500">{description}</div>
         </div>
       </div>
       {extra}
diff --git a/web/app/components/base/radio/component/group/index.tsx b/web/app/components/base/radio/component/group/index.tsx
index aff9e5e3c6..bcfc025ece 100644
--- a/web/app/components/base/radio/component/group/index.tsx
+++ b/web/app/components/base/radio/component/group/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
 
diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index 34226f0390..de040b2365 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useId } from 'react'
 import { useContext } from 'use-context-selector'
-import { cn } from '@/utils/classnames'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
 
diff --git a/web/app/components/base/radio/ui.tsx b/web/app/components/base/radio/ui.tsx
index e836dddc96..7c5f4225a4 100644
--- a/web/app/components/base/radio/ui.tsx
+++ b/web/app/components/base/radio/ui.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   isChecked: boolean
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index 090406543b..34599b9b30 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type SearchInputProps = {
   placeholder?: string
@@ -41,8 +41,8 @@ const SearchInput: FC<SearchInputProps> = ({
         type="text"
         name="query"
         className={cn(
-          'system-sm-regular caret-#295EFF block h-[18px] grow appearance-none border-0 bg-transparent text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder',
-          white && 'bg-white! placeholder:text-gray-400! hover:bg-white! group-hover:bg-white!',
+          'caret-#295EFF block h-[18px] grow appearance-none border-0 bg-transparent system-sm-regular text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder',
+          white && 'bg-white! group-hover:bg-white! placeholder:text-gray-400! hover:bg-white!',
         )}
         placeholder={placeholder || t('operation.search', { ns: 'common' })!}
         value={isComposing.current ? compositionValue : value}
diff --git a/web/app/components/base/segmented-control/__tests__/index.spec.tsx b/web/app/components/base/segmented-control/__tests__/index.spec.tsx
index 8cf2906921..fd01b62764 100644
--- a/web/app/components/base/segmented-control/__tests__/index.spec.tsx
+++ b/web/app/components/base/segmented-control/__tests__/index.spec.tsx
@@ -49,7 +49,7 @@ describe('SegmentedControl', () => {
     render(<SegmentedControl options={options} value="option2" onChange={onSelectMock} />)
 
     const selectedOption = screen.getByText('Option 2').closest('button')
-    expect(selectedOption).toHaveClass('active')
+    expect(selectedOption).toHaveClass('sc-active')
   })
 
   it('calls onChange when an option is clicked', () => {
@@ -74,7 +74,7 @@ describe('SegmentedControl', () => {
 
     const optionElement = screen.getByText('Option 2').closest('button')
     expect(optionElement).toHaveAttribute('disabled')
-    expect(optionElement).toHaveClass('disabled')
+    expect(optionElement).toHaveClass('sc-disabled')
 
     fireEvent.click(screen.getByText('Option 3'))
     expect(onSelectMock).toHaveBeenCalledWith('option3')
diff --git a/web/app/components/base/segmented-control/index.css b/web/app/components/base/segmented-control/index.css
index bc027ddeff..c0fbc914b6 100644
--- a/web/app/components/base/segmented-control/index.css
+++ b/web/app/components/base/segmented-control/index.css
@@ -5,7 +5,7 @@
 @utility segmented-control-regular {
   @apply rounded-lg;
 
-  &.padding {
+  &.sc-padding {
     @apply p-0.5;
   }
 }
@@ -13,12 +13,12 @@
 @utility segmented-control-large {
   @apply rounded-lg;
 
-  &.padding {
+  &.sc-padding {
     @apply p-0.5;
   }
 }
 
-@utility padding {
+@utility sc-padding {
   &.segmented-control-large {
     @apply p-0.5;
   }
@@ -35,12 +35,12 @@
 @utility segmented-control-small {
   @apply rounded-md;
 
-  &.padding {
+  &.sc-padding {
     @apply p-px;
   }
 }
 
-@utility no-padding {
+@utility sc-no-padding {
   @apply border-[0.5px] border-divider-subtle;
 }
 
@@ -64,46 +64,46 @@
   @apply cursor-not-allowed text-text-disabled;
 }
 
-@utility default {
+@utility sc-default {
   @apply hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary;
 }
 
-@utility active {
+@utility sc-active {
   @apply border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3 text-text-secondary;
 
-  &.accent {
+  &.sc-accent {
     @apply text-text-accent;
   }
 
-  &.accent-light {
+  &.sc-accent-light {
     @apply text-text-accent-light-mode-only;
   }
 }
 
-@utility disabled {
+@utility sc-disabled {
   @apply cursor-not-allowed text-text-disabled hover:text-text-disabled bg-transparent hover:bg-transparent;
 }
 
-@utility accent {
-  &.active {
+@utility sc-accent {
+  &.sc-active {
     @apply text-text-accent;
   }
 }
 
-@utility accent-light {
-  &.active {
+@utility sc-accent-light {
+  &.sc-active {
     @apply text-text-accent-light-mode-only;
   }
 }
 
-@utility item-text-regular {
+@utility sc-item-text-regular {
   @apply p-0.5;
 }
 
-@utility item-text-small {
+@utility sc-item-text-small {
   @apply p-0.5 pr-1;
 }
 
-@utility item-text-large {
+@utility sc-item-text-large {
   @apply px-0.5;
-}
\ No newline at end of file
+}
diff --git a/web/app/components/base/segmented-control/index.tsx b/web/app/components/base/segmented-control/index.tsx
index d0521cb26a..1f0d09472f 100644
--- a/web/app/components/base/segmented-control/index.tsx
+++ b/web/app/components/base/segmented-control/index.tsx
@@ -1,8 +1,8 @@
 import type { RemixiconComponentType } from '@remixicon/react'
 import type { VariantProps } from 'class-variance-authority'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import Divider from '../divider'
 
 type SegmentedControlOption<T> = {
@@ -32,8 +32,8 @@ const SegmentedControlVariants = cva(
         large: 'segmented-control-large',
       },
       padding: {
-        none: 'no-padding',
-        with: 'padding',
+        none: 'sc-no-padding',
+        with: 'sc-padding',
       },
     },
     defaultVariants: {
@@ -54,8 +54,8 @@ const SegmentedControlItemVariants = cva(
       },
       activeState: {
         default: '',
-        accent: 'accent',
-        accentLight: 'accent-light',
+        accent: 'sc-accent',
+        accentLight: 'sc-accent-light',
       },
     },
     defaultVariants: {
@@ -66,13 +66,13 @@ const SegmentedControlItemVariants = cva(
 )
 
 const ItemTextWrapperVariants = cva(
-  'item-text',
+  '',
   {
     variants: {
       size: {
-        regular: 'item-text-regular',
-        small: 'item-text-small',
-        large: 'item-text-large',
+        regular: 'sc-item-text-regular',
+        small: 'sc-item-text-small',
+        large: 'sc-item-text-large',
       },
     },
     defaultVariants: {
@@ -113,10 +113,10 @@ export const SegmentedControl = <T extends string | number | symbol>({
             type="button"
             key={String(option.value)}
             className={cn(
-              isSelected ? 'active' : 'default',
+              isSelected ? 'sc-active' : 'sc-default',
               SegmentedControlItemVariants({ size, activeState: isSelected ? activeState : 'default' }),
               isSelected && activeClassName,
-              disabled && 'disabled',
+              disabled && 'sc-disabled',
               btnClassName,
             )}
             onClick={() => {
@@ -130,14 +130,14 @@ export const SegmentedControl = <T extends string | number | symbol>({
               <div className={cn('inline-flex items-center gap-x-1', ItemTextWrapperVariants({ size }))}>
                 <span>{text}</span>
                 {!!(count && size === 'large') && (
-                  <div className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase">
+                  <div className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] system-2xs-medium-uppercase text-text-tertiary">
                     {count}
                   </div>
                 )}
               </div>
             )}
             {!isLast && !isSelected && !isNextSelected && (
-              <div data-testid={`segmented-control-divider-${index}`} className="absolute -right-px top-0 flex h-full items-center">
+              <div data-testid={`segmented-control-divider-${index}`} className="absolute top-0 -right-px flex h-full items-center">
                 <Divider type="vertical" className="mx-0 h-3.5" />
               </div>
             )}
diff --git a/web/app/components/base/select/custom.tsx b/web/app/components/base/select/custom.tsx
index 36a6cef3a7..dbf4995c22 100644
--- a/web/app/components/base/select/custom.tsx
+++ b/web/app/components/base/select/custom.tsx
@@ -1,6 +1,7 @@
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiCheckLine,
@@ -15,7 +16,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 export type Option = {
   label: string
@@ -94,7 +94,7 @@ const CustomSelect = <T extends Option>({
       >
         <div
           className={cn(
-            'system-sm-regular group flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 text-components-input-text-filled hover:bg-state-base-hover-alt',
+            'group flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover-alt',
             mergedOpen && 'bg-state-base-hover-alt',
             triggerClassName,
           )}
@@ -137,7 +137,7 @@ const CustomSelect = <T extends Option>({
                 <div
                   key={option.value}
                   className={cn(
-                    'system-sm-medium flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover',
+                    'flex h-8 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary hover:bg-state-base-hover',
                     popupItemClassName,
                   )}
                   title={option.label}
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 70ed726c38..bd9cc7af04 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -7,6 +7,7 @@
 import type { FC } from 'react'
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
 import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
@@ -16,7 +17,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import Badge from '../badge/index'
 
 const defaultItems = [
@@ -113,7 +113,7 @@ const Select: FC<ISelectProps> = ({
           {allowSearch
             ? (
                 <ComboboxInput
-                  className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-hidden group-hover:bg-state-base-hover sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+                  className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pr-10 pl-3 shadow-sm group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                   onChange={(event) => {
                     if (!disabled)
                       setQuery(event.target.value)
@@ -129,7 +129,7 @@ const Select: FC<ISelectProps> = ({
                         setOpen(!open)
                     }
                   }
-                  className={cn(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-hidden group-hover:bg-state-base-hover sm:text-sm sm:leading-6`, optionClassName)}
+                  className={cn(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pr-10 pl-3 shadow-sm group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden sm:text-sm sm:leading-6`, optionClassName)}
                 >
                   <div className="w-0 grow truncate text-left" title={selectedItem?.name}>{selectedItem?.name}</div>
                 </ComboboxButton>
@@ -154,7 +154,7 @@ const Select: FC<ISelectProps> = ({
                 key={item.value}
                 value={item}
                 className={({ active }: { active: boolean }) =>
-                  cn('relative cursor-default select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover', active ? 'bg-state-base-hover' : '', optionClassName)}
+                  cn('relative cursor-default rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover', active ? 'bg-state-base-hover' : '', optionClassName)}
               >
                 {({ /* active, */ selected }) => (
                   <>
@@ -239,9 +239,9 @@ const SimpleSelect: FC<ISelectProps> = ({
               onClick={() => {
                 onOpenChange?.(open)
               }}
-              className={cn(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-hidden group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}
+              className={cn(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pr-10 pl-3 group-hover/simple-select:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt focus-visible:outline-hidden sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}
             >
-              <span className={cn('block truncate text-left text-components-input-text-filled system-sm-regular', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
+              <span className={cn('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
               <span className="absolute inset-y-0 right-0 flex items-center pr-2">
                 {isLoading
                   ? <RiLoader4Line className="h-3.5 w-3.5 animate-spin text-text-secondary" />
@@ -282,7 +282,7 @@ const SimpleSelect: FC<ISelectProps> = ({
                 item.isGroup ? (
                   <div
                     key={item.value}
-                    className="select-none px-3 py-1.5 text-xs font-medium uppercase tracking-wide text-text-tertiary"
+                    className="px-3 py-1.5 text-xs font-medium tracking-wide text-text-tertiary uppercase select-none"
                   >
                     {item.name}
                   </div>
@@ -290,7 +290,7 @@ const SimpleSelect: FC<ISelectProps> = ({
                   <ListboxOption
                     key={item.value}
                     className={
-                      cn('relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover', optionClassName)
+                      cn('relative cursor-pointer rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover', optionClassName)
                     }
                     value={item}
                     disabled={item.disabled || disabled}
diff --git a/web/app/components/base/select/pure.tsx b/web/app/components/base/select/pure.tsx
index 83ab673f37..aba2ae8da5 100644
--- a/web/app/components/base/select/pure.tsx
+++ b/web/app/components/base/select/pure.tsx
@@ -1,6 +1,7 @@
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiCheckLine,
@@ -16,7 +17,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 export type Option = {
   label: string
@@ -118,7 +118,7 @@ const PureSelect = (props: PureSelectProps) => {
       >
         <div
           className={cn(
-            'system-sm-regular group flex h-8 items-center rounded-lg bg-components-input-bg-normal px-2 text-components-input-text-filled',
+            'group flex h-8 items-center rounded-lg bg-components-input-bg-normal px-2 system-sm-regular text-components-input-text-filled',
             !disabled && 'cursor-pointer hover:bg-state-base-hover-alt',
             disabled && 'cursor-not-allowed opacity-50',
             mergedOpen && !disabled && 'bg-state-base-hover-alt',
@@ -153,7 +153,7 @@ const PureSelect = (props: PureSelectProps) => {
           {
             popupTitle && (
               <div className={cn(
-                'system-xs-medium-uppercase flex h-[22px] items-center px-3 text-text-tertiary',
+                'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
                 popupTitleClassName,
               )}
               >
@@ -166,7 +166,7 @@ const PureSelect = (props: PureSelectProps) => {
               <div
                 key={option.value}
                 className={cn(
-                  'system-sm-medium flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover',
+                  'flex h-8 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary hover:bg-state-base-hover',
                   popupItemClassName,
                 )}
                 title={option.label}
diff --git a/web/app/components/base/simple-pie-chart/index.tsx b/web/app/components/base/simple-pie-chart/index.tsx
index 0baa785438..b17edcb1a5 100644
--- a/web/app/components/base/simple-pie-chart/index.tsx
+++ b/web/app/components/base/simple-pie-chart/index.tsx
@@ -1,8 +1,8 @@
 import type { EChartsOption } from 'echarts'
 import type { CSSProperties } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import ReactECharts from 'echarts-for-react'
 import { memo, useMemo } from 'react'
-import { cn } from '@/utils/classnames'
 import style from './index.module.css'
 
 export type SimplePieChartProps = {
diff --git a/web/app/components/base/skeleton/index.tsx b/web/app/components/base/skeleton/index.tsx
index 83b9c158f7..a943711113 100644
--- a/web/app/components/base/skeleton/index.tsx
+++ b/web/app/components/base/skeleton/index.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type SkeletonProps = ComponentProps<'div'>
 
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 901d353ec2..ef9aebb0d7 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine, RiSortAsc, RiSortDesc } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type Item = {
   value: number | string
@@ -72,7 +72,7 @@ const Sort: FC<Props> = ({
                       setOpen(false)
                     }}
                   >
-                    <div title={item.name} className="system-sm-medium grow truncate text-text-secondary">{item.name}</div>
+                    <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
                     {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
                   </div>
                 ))}
diff --git a/web/app/components/base/svg/index.tsx b/web/app/components/base/svg/index.tsx
index 4ebfa5f3d0..2cfc0d9416 100644
--- a/web/app/components/base/svg/index.tsx
+++ b/web/app/components/base/svg/index.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import ActionButton from '../action-button'
 import s from './style.module.css'
 
diff --git a/web/app/components/base/switch/__tests__/index.spec.tsx b/web/app/components/base/switch/__tests__/index.spec.tsx
index 6a938e793d..f29832f736 100644
--- a/web/app/components/base/switch/__tests__/index.spec.tsx
+++ b/web/app/components/base/switch/__tests__/index.spec.tsx
@@ -68,7 +68,7 @@ describe('Switch', () => {
   it('should apply correct size classes', () => {
     const { rerender } = render(<Switch value={false} size="xs" />)
     const switchElement = screen.getByRole('switch')
-    expect(switchElement).toHaveClass('h-2.5', 'w-3.5', 'radius-2xs')
+    expect(switchElement).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
 
     rerender(<Switch value={false} size="sm" />)
     expect(switchElement).toHaveClass('h-3', 'w-5')
@@ -186,10 +186,10 @@ describe('SwitchSkeleton', () => {
   it('should apply correct skeleton size classes', () => {
     const { rerender } = render(<SwitchSkeleton size="xs" data-testid="s" />)
     const el = screen.getByTestId('s')
-    expect(el).toHaveClass('h-2.5', 'w-3.5', 'radius-2xs')
+    expect(el).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
 
     rerender(<SwitchSkeleton size="lg" data-testid="s" />)
-    expect(el).toHaveClass('h-5', 'w-9', 'radius-sm')
+    expect(el).toHaveClass('h-5', 'w-9', 'rounded-md')
   })
 
   it('should apply custom className to skeleton', () => {
diff --git a/web/app/components/base/switch/index.tsx b/web/app/components/base/switch/index.tsx
index be0c97aacd..80f7c23817 100644
--- a/web/app/components/base/switch/index.tsx
+++ b/web/app/components/base/switch/index.tsx
@@ -2,9 +2,9 @@
 
 import type { VariantProps } from 'class-variance-authority'
 import { Switch as BaseSwitch } from '@base-ui/react/switch'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 const switchRootStateClassName = 'bg-components-toggle-bg-unchecked hover:bg-components-toggle-bg-unchecked-hover data-checked:bg-components-toggle-bg data-checked:hover:bg-components-toggle-bg-hover data-disabled:cursor-not-allowed data-disabled:bg-components-toggle-bg-unchecked-disabled data-disabled:hover:bg-components-toggle-bg-unchecked-disabled data-disabled:data-checked:bg-components-toggle-bg-disabled data-disabled:data-checked:hover:bg-components-toggle-bg-disabled'
 
@@ -13,10 +13,10 @@ const switchRootVariants = cva(
   {
     variants: {
       size: {
-        xs: 'h-2.5 w-3.5 radius-2xs p-0.5',
+        xs: 'h-2.5 w-3.5 rounded-xs p-0.5',
         sm: 'h-3 w-5 rounded-[3.5px] p-0.5',
         md: 'h-4 w-7 rounded-[5px] p-0.5',
-        lg: 'h-5 w-9 radius-sm p-[3px]',
+        lg: 'h-5 w-9 rounded-md p-[3px]',
       },
     },
     defaultVariants: {
@@ -31,9 +31,9 @@ const switchThumbVariants = cva(
     variants: {
       size: {
         xs: 'h-1.5 w-1 rounded-[1px] data-checked:translate-x-1.5',
-        sm: 'h-2 w-[7px] radius-2xs data-checked:translate-x-[9px]',
+        sm: 'h-2 w-[7px] rounded-xs data-checked:translate-x-[9px]',
         md: 'h-3 w-2.5 rounded-[3px] data-checked:translate-x-[14px]',
-        lg: 'size-3.5 radius-xs data-checked:translate-x-4',
+        lg: 'size-3.5 rounded-sm data-checked:translate-x-4',
       },
     },
     defaultVariants: {
diff --git a/web/app/components/base/switch/skeleton.tsx b/web/app/components/base/switch/skeleton.tsx
index 91b264d8c1..f9306445cb 100644
--- a/web/app/components/base/switch/skeleton.tsx
+++ b/web/app/components/base/switch/skeleton.tsx
@@ -1,16 +1,16 @@
 import type { SwitchSize } from './index'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
-import { cn } from '@/utils/classnames'
 
 const skeletonVariants = cva(
   'bg-text-quaternary opacity-20',
   {
     variants: {
       size: {
-        xs: 'h-2.5 w-3.5 radius-2xs',
+        xs: 'h-2.5 w-3.5 rounded-xs',
         sm: 'h-3 w-5 rounded-[3.5px]',
         md: 'h-4 w-7 rounded-[5px]',
-        lg: 'h-5 w-9 radius-sm',
+        lg: 'h-5 w-9 rounded-md',
       },
     },
     defaultVariants: {
diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx
index e5f0556644..dd72fd964b 100644
--- a/web/app/components/base/tab-header/index.tsx
+++ b/web/app/components/base/tab-header/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Item = {
   id: string
@@ -34,7 +34,7 @@ const TabHeader: FC<ITabHeaderProps> = ({
       key={id}
       data-testid={`tab-header-item-${id}`}
       className={cn(
-        'relative flex cursor-pointer items-center border-b-2 border-transparent pb-2 pt-2.5 system-md-semibold',
+        'relative flex cursor-pointer items-center border-b-2 border-transparent pt-2.5 pb-2 system-md-semibold',
         id === value ? cn('border-components-tab-active text-text-primary', activeItemClassName) : 'text-text-tertiary',
         disabled && 'cursor-not-allowed opacity-30',
         itemWrapClassName,
diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx
index 96b97a55f6..6f8a905f95 100644
--- a/web/app/components/base/tab-slider-new/index.tsx
+++ b/web/app/components/base/tab-slider-new/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type Option = {
   value: string
@@ -29,7 +29,7 @@ const TabSliderNew: FC<TabSliderProps> = ({
           data-testid={`tab-item-${option.value}`}
           onClick={() => onChange(option.value)}
           className={cn(
-            'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover',
+            'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] leading-[18px] font-medium text-text-tertiary hover:bg-state-base-hover',
             value === option.value && 'border-components-main-nav-nav-button-border bg-state-base-hover text-components-main-nav-nav-button-text-active shadow-xs',
           )}
         >
diff --git a/web/app/components/base/tab-slider-plain/index.tsx b/web/app/components/base/tab-slider-plain/index.tsx
index 106d234016..5db3d416c9 100644
--- a/web/app/components/base/tab-slider-plain/index.tsx
+++ b/web/app/components/base/tab-slider-plain/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Option = {
   value: string
@@ -43,7 +43,7 @@ const Item: FC<ItemProps> = ({
       {isActive && (
         <div
           data-testid="tab-active-indicator"
-          className="absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600"
+          className="absolute right-0 bottom-0 left-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600"
         >
         </div>
       )}
diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx
index 6ba410995b..7cb4e6628b 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect, useState } from 'react'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { useInstalledPluginList } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 
 type Option = {
   value: string
@@ -48,11 +48,11 @@ const TabSlider: FC<TabSliderProps> = ({
   return (
     <div
       data-testid="tab-slider-container"
-      className={cn(className, 'relative inline-flex items-center justify-center radius-lg bg-components-segmented-control-bg-normal p-0.5')}
+      className={cn(className, 'relative inline-flex items-center justify-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5')}
     >
       <div
         data-testid="tab-slider-bg"
-        className="shadows-shadow-xs absolute bottom-0.5 left-0 right-0 top-0.5 radius-lg bg-components-panel-bg transition-transform duration-300 ease-in-out"
+        className="shadows-shadow-xs absolute top-0.5 right-0 bottom-0.5 left-0 rounded-[10px] bg-components-panel-bg transition-transform duration-300 ease-in-out"
         style={sliderStyle}
       />
       {options.map((option, index) => (
@@ -61,7 +61,7 @@ const TabSlider: FC<TabSliderProps> = ({
           key={option.value}
           data-testid={`tab-item-${option.value}`}
           className={cn(
-            'relative z-10 flex cursor-pointer items-center justify-center gap-1 radius-lg px-2.5 py-1.5 transition-colors duration-300 ease-in-out',
+            'relative z-10 flex cursor-pointer items-center justify-center gap-1 rounded-[10px] px-2.5 py-1.5 transition-colors duration-300 ease-in-out',
             'system-md-semibold',
             index === activeIndex
               ? 'text-text-primary'
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index f98922ec8d..e4e3cc2528 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -1,9 +1,9 @@
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import _AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 // CJS/ESM interop: Turbopack may resolve the module namespace object instead of the default export
 // eslint-disable-next-line ts/no-explicit-any
 const AutosizeInput = ('default' in (_AutosizeInput as any) ? (_AutosizeInput as any).default : _AutosizeInput) as typeof _AutosizeInput
@@ -64,11 +64,11 @@ const TagInput: FC<TagInputProps> = ({ items, onChange, disableAdd, disableRemov
   return (
     <div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'rounded-lg bg-components-input-bg-normal pb-1 pl-1' : '')}>
       {(items || []).map((item, index) => (
-        <div key={item} className={cn('mr-1 mt-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pl-1.5 pr-1 text-text-secondary system-xs-regular')}>
+        <div key={item} className={cn('mt-1 mr-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pr-1 pl-1.5 system-xs-regular text-text-secondary')}>
           {item}
           {!disableRemove && (
             <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={() => handleRemove(index)}>
-              <span className="i-ri-close-line ml-0.5 h-3.5 w-3.5 text-text-tertiary" data-testid="remove-tag" />
+              <span className="ml-0.5 i-ri-close-line h-3.5 w-3.5 text-text-tertiary" data-testid="remove-tag" />
             </div>
           )}
         </div>
diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index 1ad17d2681..30eba33e27 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMount } from 'ahooks'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { fetchTagList } from '@/service/tag'
-import { cn } from '@/utils/classnames'
 
 import { useStore as useTagStore } from './store'
 
@@ -66,7 +66,7 @@ const TagFilter: FC<TagFilterProps> = ({
             <button
               type="button"
               className={cn(
-                'flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-left',
+                'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-left select-none',
                 !!value.length && 'pr-6 shadow-xs',
               )}
             >
@@ -78,7 +78,7 @@ const TagFilter: FC<TagFilterProps> = ({
                 {!!value.length && currentTag?.name}
               </div>
               {value.length > 1 && (
-                <div className="shrink-0 text-xs font-medium leading-[18px] text-text-tertiary">{`+${value.length - 1}`}</div>
+                <div className="shrink-0 text-xs leading-[18px] font-medium text-text-tertiary">{`+${value.length - 1}`}</div>
               )}
               {!value.length && (
                 <div className="shrink-0 p-px">
@@ -91,7 +91,7 @@ const TagFilter: FC<TagFilterProps> = ({
         {!!value.length && (
           <button
             type="button"
-            className="group/clear absolute right-2 top-1/2 -translate-y-1/2 p-px"
+            className="group/clear absolute top-1/2 right-2 -translate-y-1/2 p-px"
             onClick={() => onChange([])}
             data-testid="tag-filter-clear-button"
           >
@@ -117,7 +117,7 @@ const TagFilter: FC<TagFilterProps> = ({
               {filteredTagList.map(tag => (
                 <div
                   key={tag.id}
-                  className="flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 select-none hover:bg-state-base-hover"
                   onClick={() => selectTag(tag)}
                 >
                   <div title={tag.name} className="grow truncate text-sm leading-5 text-text-tertiary">{tag.name}</div>
@@ -134,7 +134,7 @@ const TagFilter: FC<TagFilterProps> = ({
             <div className="border-t-[0.5px] border-divider-regular" />
             <div className="p-1">
               <div
-                className="flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover"
+                className="flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 select-none hover:bg-state-base-hover"
                 onClick={() => {
                   setShowTagManagementModal(true)
                   setOpen(false)
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index 32779262fa..9b478086ce 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo } from 'react'
 import CustomPopover from '@/app/components/base/popover'
 import { fetchTagList } from '@/service/tag'
-import { cn } from '@/utils/classnames'
 import Panel from './panel'
 import { useStore as useTagStore } from './store'
 import Trigger from './trigger'
diff --git a/web/app/components/base/tag-management/tag-item-editor.tsx b/web/app/components/base/tag-management/tag-item-editor.tsx
index c7baedf6c9..80555221e6 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,7 +16,6 @@ import {
 } from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { deleteTag, updateTag } from '@/service/tag'
-import { cn } from '@/utils/classnames'
 import { useStore as useTagStore } from './store'
 
 type TagItemEditorProps = {
@@ -99,14 +99,14 @@ const TagItemEditor: FC<TagItemEditorProps> = ({ tag }) => {
   }, { wait: 200 })
   return (
     <>
-      <div className={cn('flex shrink-0 items-center gap-0.5 rounded-lg border border-components-panel-border py-1 pl-2 pr-1 text-sm leading-5 text-text-secondary')}>
+      <div className={cn('flex shrink-0 items-center gap-0.5 rounded-lg border border-components-panel-border py-1 pr-1 pl-2 text-sm leading-5 text-text-secondary')}>
         {!isEditing && (
           <>
             <div className="text-sm leading-5 text-text-secondary">
               {tag.name}
             </div>
             <Tooltip popupContent={<div>{t('common.tagBound', { ns: 'workflow' })}</div>} needsDelay>
-              <div className="leading-4.5 shrink-0 px-1 text-sm font-medium text-text-tertiary">{tag.binding_count}</div>
+              <div className="shrink-0 px-1 text-sm leading-4.5 font-medium text-text-tertiary">{tag.binding_count}</div>
             </Tooltip>
             <div className="group/edit shrink-0 cursor-pointer rounded-md p-1 hover:bg-state-base-hover" onClick={() => setIsEditing(true)}>
               <span className="i-ri-edit-line h-3 w-3 text-text-tertiary group-hover/edit:text-text-secondary" data-testid="tag-item-editor-edit-button" />
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 31b6174d66..41ac072850 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { Tag } from '@/app/components/base/tag-management/constant'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type TagRemoveModalProps = {
   show: boolean
diff --git a/web/app/components/base/tag/index.tsx b/web/app/components/base/tag/index.tsx
index dee85c998c..d76784caab 100644
--- a/web/app/components/base/tag/index.tsx
+++ b/web/app/components/base/tag/index.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ITagProps = {
   children: string | React.ReactNode
diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
index d991acb28b..f5a8dd87f2 100644
--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -1,8 +1,8 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { CSSProperties } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 const textareaVariants = cva(
   '',
diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx
index a6b6972210..0f8212348e 100644
--- a/web/app/components/base/theme-switcher.tsx
+++ b/web/app/components/base/theme-switcher.tsx
@@ -1,6 +1,6 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTheme } from 'next-themes'
-import { cn } from '@/utils/classnames'
 
 type Theme = 'light' | 'dark' | 'system'
 
@@ -12,7 +12,7 @@ export default function ThemeSwitcher() {
   }
 
   return (
-    <div className="flex items-center radius-lg bg-components-segmented-control-bg-normal p-0.5">
+    <div className="flex items-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5">
       <button
         type="button"
         className={cn(
diff --git a/web/app/components/base/timezone-label/index.tsx b/web/app/components/base/timezone-label/index.tsx
index 385e4c782a..90b69348b3 100644
--- a/web/app/components/base/timezone-label/index.tsx
+++ b/web/app/components/base/timezone-label/index.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
-import { cn } from '@/utils/classnames'
 
 type TimezoneLabelProps = {
   /** IANA timezone identifier (e.g., 'Asia/Shanghai', 'America/New_York') */
@@ -43,7 +43,7 @@ const TimezoneLabel: React.FC<TimezoneLabelProps> = ({
   return (
     <span
       className={cn(
-        'text-text-tertiary system-sm-regular',
+        'system-sm-regular text-text-tertiary',
         inline && 'text-text-quaternary',
         className,
       )}
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index da373dea83..ab5dbf1710 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -6,12 +6,12 @@
  */
 import type { OffsetOptions, Placement } from '@floating-ui/react'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiQuestionLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { tooltipManager } from './TooltipManager'
 
 type TooltipProps = {
@@ -135,7 +135,7 @@ const Tooltip: FC<TooltipProps> = ({
         {!!popupContent && (
           <div
             className={cn(
-              !noDecoration && 'relative max-w-[300px] wrap-break-word rounded-md bg-components-panel-bg px-3 py-2 text-left text-text-tertiary shadow-lg system-xs-regular',
+              !noDecoration && 'relative max-w-[300px] rounded-md bg-components-panel-bg px-3 py-2 text-left system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
               popupClassName,
             )}
             onMouseEnter={() => {
diff --git a/web/app/components/base/ui/alert-dialog/index.tsx b/web/app/components/base/ui/alert-dialog/index.tsx
index f922a19847..e591fed2a3 100644
--- a/web/app/components/base/ui/alert-dialog/index.tsx
+++ b/web/app/components/base/ui/alert-dialog/index.tsx
@@ -2,9 +2,9 @@
 
 import type { ButtonProps } from '@/app/components/base/ui/button'
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 export const AlertDialog = BaseAlertDialog.Root
 export const AlertDialogTrigger = BaseAlertDialog.Trigger
diff --git a/web/app/components/base/ui/avatar/index.tsx b/web/app/components/base/ui/avatar/index.tsx
index f3bb5298b1..18f040ff00 100644
--- a/web/app/components/base/ui/avatar/index.tsx
+++ b/web/app/components/base/ui/avatar/index.tsx
@@ -1,7 +1,7 @@
 import type { ImageLoadingStatus } from '@base-ui/react/avatar'
 import type * as React from 'react'
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 const avatarSizeClasses = {
   'xxs': { root: 'size-4', text: 'text-[7px]' },
diff --git a/web/app/components/base/ui/button/index.tsx b/web/app/components/base/ui/button/index.tsx
index 002213486b..73d5ecc3c9 100644
--- a/web/app/components/base/ui/button/index.tsx
+++ b/web/app/components/base/ui/button/index.tsx
@@ -1,8 +1,8 @@
 import type { Button as BaseButtonNS } from '@base-ui/react/button'
 import type { VariantProps } from 'class-variance-authority'
 import { Button as BaseButton } from '@base-ui/react/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
-import { cn } from '@/utils/classnames'
 
 const buttonVariants = cva(
   'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-[disabled]:cursor-not-allowed',
diff --git a/web/app/components/base/ui/context-menu/index.tsx b/web/app/components/base/ui/context-menu/index.tsx
index 4e164b08b9..663f09e96e 100644
--- a/web/app/components/base/ui/context-menu/index.tsx
+++ b/web/app/components/base/ui/context-menu/index.tsx
@@ -2,6 +2,7 @@
 
 import type { Placement } from '@/app/components/base/ui/placement'
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import {
   menuBackdropClassName,
@@ -13,7 +14,6 @@ import {
   menuSeparatorClassName,
 } from '@/app/components/base/ui/menu-shared'
 import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
 
 export const ContextMenu = BaseContextMenu.Root
 export const ContextMenuTrigger = BaseContextMenu.Trigger
diff --git a/web/app/components/base/ui/dialog/index.tsx b/web/app/components/base/ui/dialog/index.tsx
index c1802806c9..a5ccfa1272 100644
--- a/web/app/components/base/ui/dialog/index.tsx
+++ b/web/app/components/base/ui/dialog/index.tsx
@@ -8,8 +8,8 @@
 //   above the dialog backdrop instead of being clipped by it.
 
 import { Dialog as BaseDialog } from '@base-ui/react/dialog'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 export const Dialog = BaseDialog.Root
 /** @public */
diff --git a/web/app/components/base/ui/dropdown-menu/index.tsx b/web/app/components/base/ui/dropdown-menu/index.tsx
index da3cd2f95c..83c34ecf27 100644
--- a/web/app/components/base/ui/dropdown-menu/index.tsx
+++ b/web/app/components/base/ui/dropdown-menu/index.tsx
@@ -2,6 +2,7 @@
 
 import type { Placement } from '@/app/components/base/ui/placement'
 import { Menu } from '@base-ui/react/menu'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import {
   menuGroupLabelClassName,
@@ -12,7 +13,6 @@ import {
   menuSeparatorClassName,
 } from '@/app/components/base/ui/menu-shared'
 import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
 
 export const DropdownMenu = Menu.Root
 export const DropdownMenuTrigger = Menu.Trigger
diff --git a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx b/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
index abfee58302..003191dd56 100644
--- a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
@@ -77,7 +77,7 @@ describe('NumberField wrapper', () => {
 
       const group = screen.getByTestId('group')
 
-      expect(group).toHaveClass('radius-md')
+      expect(group).toHaveClass('rounded-lg')
       expect(group).toHaveClass('custom-group')
     })
 
@@ -94,7 +94,7 @@ describe('NumberField wrapper', () => {
       const group = screen.getByTestId('group')
       const input = screen.getByTestId('input')
 
-      expect(group).toHaveClass('radius-lg')
+      expect(group).toHaveClass('rounded-[10px]')
       expect(input).toHaveClass('px-4')
       expect(input).toHaveClass('py-2')
     })
diff --git a/web/app/components/base/ui/number-field/index.stories.tsx b/web/app/components/base/ui/number-field/index.stories.tsx
index 35a2567e87..f0b55764e4 100644
--- a/web/app/components/base/ui/number-field/index.stories.tsx
+++ b/web/app/components/base/ui/number-field/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useId, useState } from 'react'
-import { cn } from '@/utils/classnames'
 import {
   NumberField,
   NumberFieldControls,
diff --git a/web/app/components/base/ui/number-field/index.tsx b/web/app/components/base/ui/number-field/index.tsx
index 7d4c43b815..fdc4054e1f 100644
--- a/web/app/components/base/ui/number-field/index.tsx
+++ b/web/app/components/base/ui/number-field/index.tsx
@@ -2,9 +2,9 @@
 
 import type { VariantProps } from 'class-variance-authority'
 import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 export const NumberField = BaseNumberField.Root
 export type NumberFieldRootProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.Root>
@@ -21,8 +21,8 @@ export const numberFieldGroupVariants = cva(
   {
     variants: {
       size: {
-        regular: 'radius-md',
-        large: 'radius-lg',
+        regular: 'rounded-lg',
+        large: 'rounded-[10px]',
       },
     },
     defaultVariants: {
diff --git a/web/app/components/base/ui/popover/index.tsx b/web/app/components/base/ui/popover/index.tsx
index 08e3cf51e2..4383112a4b 100644
--- a/web/app/components/base/ui/popover/index.tsx
+++ b/web/app/components/base/ui/popover/index.tsx
@@ -2,9 +2,9 @@
 
 import type { Placement } from '@/app/components/base/ui/placement'
 import { Popover as BasePopover } from '@base-ui/react/popover'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
 
 export const Popover = BasePopover.Root
 export const PopoverTrigger = BasePopover.Trigger
diff --git a/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx b/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
index 0d37c30712..7696a9be29 100644
--- a/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/scroll-area/__tests__/index.spec.tsx
@@ -126,7 +126,7 @@ describe('scroll-area wrapper', () => {
         expect(thumb).toHaveAttribute('data-orientation', 'vertical')
         expect(thumb).toHaveClass(
           'shrink-0',
-          'radius-xs',
+          'rounded-sm',
           'bg-state-base-handle',
           'transition-[background-color]',
           'motion-reduce:transition-none',
@@ -164,7 +164,7 @@ describe('scroll-area wrapper', () => {
         expect(thumb).toHaveAttribute('data-orientation', 'horizontal')
         expect(thumb).toHaveClass(
           'shrink-0',
-          'radius-xs',
+          'rounded-sm',
           'bg-state-base-handle',
           'transition-[background-color]',
           'motion-reduce:transition-none',
diff --git a/web/app/components/base/ui/scroll-area/index.stories.tsx b/web/app/components/base/ui/scroll-area/index.stories.tsx
index 2d8697d944..4166f0b66a 100644
--- a/web/app/components/base/ui/scroll-area/index.stories.tsx
+++ b/web/app/components/base/ui/scroll-area/index.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import AppIcon from '@/app/components/base/app-icon'
-import { cn } from '@/utils/classnames'
 import {
   ScrollAreaContent,
   ScrollAreaCorner,
@@ -35,7 +35,7 @@ const labelClassName = 'text-text-tertiary system-xs-medium-uppercase tracking-[
 const titleClassName = 'system-sm-semibold text-text-primary'
 const bodyClassName = 'system-sm-regular text-text-secondary'
 const insetScrollAreaClassName = 'h-full p-1'
-const insetViewportClassName = 'radius-3xl bg-components-panel-bg'
+const insetViewportClassName = 'rounded-[20px] bg-components-panel-bg'
 const insetScrollbarClassName = 'data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1'
 const storyButtonClassName = 'flex w-full items-center justify-between gap-3 rounded-xl border border-divider-subtle bg-components-panel-bg-alt px-3 py-2.5 text-left text-text-secondary transition-colors hover:bg-state-base-hover focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-components-input-border-hover motion-reduce:transition-none'
 const sidebarScrollAreaClassName = 'h-full'
@@ -123,7 +123,7 @@ const StoryCard = ({
   className?: string
   children: ReactNode
 }) => (
-  <section className={cn('min-w-0 radius-6xl border border-divider-subtle bg-background-body p-5', className)}>
+  <section className={cn('min-w-0 rounded-[28px] border border-divider-subtle bg-background-body p-5', className)}>
     <div className="space-y-1">
       <div className={labelClassName}>{eyebrow}</div>
       <h3 className="system-md-semibold text-pretty text-text-primary">{title}</h3>
@@ -312,7 +312,7 @@ const ScrollbarStatePane = ({
   }, [initialPosition, viewportId])
 
   return (
-    <div className="min-w-0 radius-6xl border border-divider-subtle bg-background-body p-5">
+    <div className="min-w-0 rounded-[28px] border border-divider-subtle bg-background-body p-5">
       <div className="space-y-1">
         <div className={labelClassName}>{eyebrow}</div>
         <div className="system-md-semibold text-text-primary">{title}</div>
@@ -320,7 +320,7 @@ const ScrollbarStatePane = ({
       </div>
       <div className="mt-4 min-w-0 rounded-[24px] border border-divider-subtle bg-components-panel-bg p-3">
         <ScrollAreaRoot className="h-[320px] p-1">
-          <ScrollAreaViewport id={viewportId} className="radius-3xl bg-components-panel-bg">
+          <ScrollAreaViewport id={viewportId} className="rounded-[20px] bg-components-panel-bg">
             <ScrollAreaContent className="min-w-0 space-y-2 p-4 pr-6">
               {scrollbarShowcaseRows.map(item => (
                 <article key={item.title} className="min-w-0 rounded-xl border border-divider-subtle bg-components-panel-bg-alt p-3">
@@ -340,7 +340,7 @@ const ScrollbarStatePane = ({
 }
 
 const HorizontalScrollbarShowcasePane = () => (
-  <div className="min-w-0 radius-6xl border border-divider-subtle bg-background-body p-5">
+  <div className="min-w-0 rounded-[28px] border border-divider-subtle bg-background-body p-5">
     <div className="space-y-1">
       <div className={labelClassName}>Horizontal</div>
       <div className="system-md-semibold text-text-primary">Horizontal track reference</div>
@@ -348,7 +348,7 @@ const HorizontalScrollbarShowcasePane = () => (
     </div>
     <div className="mt-4 min-w-0 rounded-[24px] border border-divider-subtle bg-components-panel-bg p-3">
       <ScrollAreaRoot className="h-[240px] p-1">
-        <ScrollAreaViewport className="radius-3xl bg-components-panel-bg">
+        <ScrollAreaViewport className="rounded-[20px] bg-components-panel-bg">
           <ScrollAreaContent className="min-h-full min-w-max space-y-4 p-4 pb-6">
             <div className="space-y-1">
               <div className="system-sm-semibold text-text-primary">Horizontal scrollbar</div>
@@ -373,10 +373,10 @@ const HorizontalScrollbarShowcasePane = () => (
 )
 
 const OverlayPane = () => (
-  <div className="flex h-[420px] min-w-0 items-center justify-center radius-6xl bg-[radial-gradient(circle_at_top,rgba(21,90,239,0.12),transparent_45%),linear-gradient(180deg,rgba(16,24,40,0.03),transparent)] p-6">
+  <div className="flex h-[420px] min-w-0 items-center justify-center rounded-[28px] bg-[radial-gradient(circle_at_top,rgba(21,90,239,0.12),transparent_45%),linear-gradient(180deg,rgba(16,24,40,0.03),transparent)] p-6">
     <div className={cn(blurPanelClassName, 'w-full max-w-[360px]')}>
       <ScrollAreaRoot className="h-[320px] p-1">
-        <ScrollAreaViewport className="overscroll-contain radius-3xl bg-components-panel-bg-blur">
+        <ScrollAreaViewport className="overscroll-contain rounded-[20px] bg-components-panel-bg-blur">
           <ScrollAreaContent className="space-y-2 p-3 pr-6">
             <div className="sticky top-0 z-10 rounded-xl border border-divider-subtle bg-components-panel-bg-blur px-3 py-3 backdrop-blur-[6px]">
               <div className={labelClassName}>Overlay palette</div>
@@ -452,7 +452,7 @@ const ExploreSidebarWebAppsPane = () => {
 
   return (
     <div className="w-full max-w-[272px] rounded-[26px] border border-divider-subtle bg-background-body p-3 shadow-lg shadow-shadow-shadow-5">
-      <div className="space-y-5 radius-3xl bg-background-default-subtle p-3">
+      <div className="space-y-5 rounded-[20px] bg-background-default-subtle p-3">
         <div className="text-text-accent">
           <div className="flex h-8 items-center gap-2 rounded-lg bg-state-base-active px-2">
             <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
diff --git a/web/app/components/base/ui/scroll-area/index.tsx b/web/app/components/base/ui/scroll-area/index.tsx
index 1533092b8a..242f735054 100644
--- a/web/app/components/base/ui/scroll-area/index.tsx
+++ b/web/app/components/base/ui/scroll-area/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import './scroll-area.css'
 
 export const ScrollAreaRoot = BaseScrollArea.Root
@@ -33,7 +33,7 @@ const scrollAreaScrollbarClassName = cn(
 )
 
 const scrollAreaThumbClassName = cn(
-  'shrink-0 radius-xs bg-state-base-handle transition-[background-color] motion-reduce:transition-none',
+  'shrink-0 rounded-sm bg-state-base-handle transition-[background-color] motion-reduce:transition-none',
   'data-[orientation=vertical]:w-1',
   'data-[orientation=horizontal]:h-1',
 )
diff --git a/web/app/components/base/ui/select/index.tsx b/web/app/components/base/ui/select/index.tsx
index 964bd79e08..1d50c36a0a 100644
--- a/web/app/components/base/ui/select/index.tsx
+++ b/web/app/components/base/ui/select/index.tsx
@@ -3,10 +3,10 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { Placement } from '@/app/components/base/ui/placement'
 import { Select as BaseSelect } from '@base-ui/react/select'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
 
 export const Select = BaseSelect.Root
 export const SelectValue = BaseSelect.Value
@@ -24,7 +24,7 @@ const selectTriggerVariants = cva(
       size: {
         small: 'h-6 gap-px rounded-md px-[5px] py-0 system-xs-regular',
         regular: 'h-8 gap-0.5 rounded-lg px-2 py-1 system-sm-regular',
-        large: 'h-9 gap-0.5 radius-lg px-2.5 py-1 system-md-regular',
+        large: 'h-9 gap-0.5 rounded-[10px] px-2.5 py-1 system-md-regular',
       },
       variant: {
         default: '',
diff --git a/web/app/components/base/ui/slider/index.tsx b/web/app/components/base/ui/slider/index.tsx
index 9470e7051d..931c4e88be 100644
--- a/web/app/components/base/ui/slider/index.tsx
+++ b/web/app/components/base/ui/slider/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { Slider as BaseSlider } from '@base-ui/react/slider'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type SliderRootProps = BaseSlider.Root.Props<number>
 type SliderThumbProps = BaseSlider.Thumb.Props
diff --git a/web/app/components/base/ui/toast/index.tsx b/web/app/components/base/ui/toast/index.tsx
index f07815f3a6..1f9fea5173 100644
--- a/web/app/components/base/ui/toast/index.tsx
+++ b/web/app/components/base/ui/toast/index.tsx
@@ -7,7 +7,7 @@ import type {
 } from '@base-ui/react/toast'
 import type { ReactNode } from 'react'
 import { Toast as BaseToast } from '@base-ui/react/toast'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type ToastData = Record<string, never>
 type ToastToneStyle = {
diff --git a/web/app/components/base/ui/tooltip/index.tsx b/web/app/components/base/ui/tooltip/index.tsx
index 0887506863..9053864eff 100644
--- a/web/app/components/base/ui/tooltip/index.tsx
+++ b/web/app/components/base/ui/tooltip/index.tsx
@@ -2,9 +2,9 @@
 
 import type { Placement } from '@/app/components/base/ui/placement'
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
 
 type TooltipContentVariant = 'default' | 'plain'
 
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 9ae390a3ca..91b746bcda 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useRafInterval } from 'ahooks'
 import Recorder from 'js-audio-recorder'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, usePathname } from '@/next/navigation'
 import { AppSourceType, audioToText } from '@/service/share'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 import { convertToMp3 } from './utils'
 
@@ -161,10 +161,10 @@ const VoiceInput = ({
 
   return (
     <div className={cn(s.wrapper, 'absolute inset-0 rounded-xl')}>
-      <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pl-[14.5px] pr-[6.5px]">
+      <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pr-[6.5px] pl-[14.5px]">
         <canvas id="voice-input-record" className="absolute bottom-0 left-0 h-4 w-full" />
         {
-          startConvert && <div className="i-ri-loader-2-line mr-2 h-4 w-4 animate-spin text-primary-700" data-testid="voice-input-loader" />
+          startConvert && <div className="mr-2 i-ri-loader-2-line h-4 w-4 animate-spin text-primary-700" data-testid="voice-input-loader" />
         }
         <div className="grow">
           {
diff --git a/web/app/components/billing/annotation-full/index.tsx b/web/app/components/billing/annotation-full/index.tsx
index a542c9bd81..10b186da3d 100644
--- a/web/app/components/billing/annotation-full/index.tsx
+++ b/web/app/components/billing/annotation-full/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import GridMask from '@/app/components/base/grid-mask'
-import { cn } from '@/utils/classnames'
 import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
 import Usage from './usage'
@@ -15,7 +15,7 @@ const AnnotationFull: FC = () => {
     <GridMask wrapperClassName="rounded-lg" canvasClassName="rounded-lg" gradientClassName="rounded-lg">
       <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-3.5 py-4 shadow-md transition-all duration-200 ease-in-out">
         <div className="flex items-center justify-between">
-          <div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
+          <div className={cn(s.textGradient, 'text-base leading-[24px] font-semibold')}>
             <div>{t('annotatedResponse.fullTipLine1', { ns: 'billing' })}</div>
             <div>{t('annotatedResponse.fullTipLine2', { ns: 'billing' })}</div>
           </div>
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index 70a76e612a..4308cad160 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import GridMask from '@/app/components/base/grid-mask'
-import { cn } from '@/utils/classnames'
 import Modal from '../../base/modal'
 import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
@@ -29,7 +29,7 @@ const AnnotationFullModal: FC<Props> = ({
       <GridMask wrapperClassName="rounded-lg" canvasClassName="rounded-lg" gradientClassName="rounded-lg">
         <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out">
           <div className="flex items-center justify-between">
-            <div className={cn(s.textGradient, 'text-[18px] font-semibold leading-[27px]')}>
+            <div className={cn(s.textGradient, 'text-[18px] leading-[27px] font-semibold')}>
               <div>{t('annotatedResponse.fullTipLine1', { ns: 'billing' })}</div>
               <div>{t('annotatedResponse.fullTipLine2', { ns: 'billing' })}</div>
             </div>
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index 2c2d5b95fd..e981bf74eb 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
@@ -8,7 +9,6 @@ import { Plan } from '@/app/components/billing/type'
 import { mailToSupport } from '@/app/components/header/utils/util'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
 
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
index 862093c210..4091dca4cb 100644
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ b/web/app/components/billing/header-billing-btn/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import { Plan } from '../type'
 import UpgradeBtn from '../upgrade-btn'
 
diff --git a/web/app/components/billing/pricing/footer.tsx b/web/app/components/billing/pricing/footer.tsx
index 234189d171..7abf73179f 100644
--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -1,8 +1,8 @@
 import type { Category } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { CategoryEnum } from './types'
 
 type FooterProps = {
diff --git a/web/app/components/billing/pricing/header.tsx b/web/app/components/billing/pricing/header.tsx
index 46078ae95e..8ece685a58 100644
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { DialogDescription, DialogTitle } from '@/app/components/base/ui/dialog'
-import { cn } from '@/utils/classnames'
 import DifyLogo from '../../base/logo/dify-logo'
 import styles from './header.module.css'
 
diff --git a/web/app/components/billing/pricing/plan-switcher/tab.tsx b/web/app/components/billing/pricing/plan-switcher/tab.tsx
index db1632e8df..ca73936264 100644
--- a/web/app/components/billing/pricing/plan-switcher/tab.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/tab.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 type TabProps<T> = {
   Icon: React.ComponentType<{ isActive: boolean }>
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
index 9cdef8e333..8115646748 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
@@ -1,7 +1,7 @@
 import type { BasicPlan } from '../../../type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { Plan } from '../../../type'
 
 const BUTTON_CLASSNAME = {
@@ -37,7 +37,7 @@ const Button = ({
       type="button"
       disabled={isPlanDisabled}
       className={cn(
-        'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
+        'flex items-center gap-x-2 py-3 pr-4 pl-5 system-xl-semibold',
         BUTTON_CLASSNAME[plan].btnClassname,
         isPlanDisabled && BUTTON_CLASSNAME[plan].btnDisabledClassname,
         isPlanDisabled && 'cursor-not-allowed',
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
index 0b24936be0..fe6aa9c2cb 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
@@ -12,10 +12,10 @@ const Tooltip = ({
     return null
   return (
     <div className="group relative z-10 size-[18px] overflow-visible">
-      <div className="system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block">
+      <div className="absolute right-0 bottom-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] system-xs-regular text-text-primary-on-surface group-hover:block">
         {content}
       </div>
-      <div className="flex h-full w-full items-center justify-center radius-xs bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static">
+      <div className="flex h-full w-full items-center justify-center rounded-sm bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static">
         <RiInfoI className="size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface" data-testid="tooltip-icon" />
       </div>
     </div>
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
index 9412b87a6a..040e85e354 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
@@ -5,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { SelfHostedPlan } from '../../../type'
 
 const BUTTON_CLASSNAME = {
@@ -35,7 +35,7 @@ const Button = ({
     <button
       type="button"
       className={cn(
-        'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
+        'flex items-center gap-x-2 py-3 pr-4 pl-5 system-xl-semibold',
         BUTTON_CLASSNAME[plan],
         isPremiumPlan && 'py-2',
       )}
@@ -44,7 +44,7 @@ const Button = ({
       <div className="flex grow items-center gap-x-2">
         <span>{t(`${i18nPrefix}.btnText`, { ns: 'billing' })}</span>
         {isPremiumPlan && (
-          <span className="pb-px pt-[7px]">
+          <span className="pt-[7px] pb-px">
             <AwsMarketplace className="h-6" />
           </span>
         )}
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index e377dcb0d8..fa6e9a45c9 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
-import { cn } from '@/utils/classnames'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
 import { SelfHostedPlan } from '../../../type'
 import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
@@ -23,7 +23,7 @@ const STYLE_MAP = {
     icon: <Premium />,
     bg: 'bg-billing-plan-card-premium-bg opacity-10',
     noise: (
-      <div className="absolute -top-12 left-0 right-0 -z-10">
+      <div className="absolute -top-12 right-0 left-0 -z-10">
         <PremiumNoise />
       </div>
     ),
@@ -32,7 +32,7 @@ const STYLE_MAP = {
     icon: <Enterprise />,
     bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
     noise: (
-      <div className="absolute -top-12 left-0 right-0 -z-10">
+      <div className="absolute -top-12 right-0 left-0 -z-10">
         <EnterpriseNoise />
       </div>
     ),
@@ -81,15 +81,15 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
         <div className="flex flex-col gap-y-6 px-1 pt-10">
           {STYLE_MAP[plan].icon}
           <div className="flex min-h-[104px] flex-col gap-y-2">
-            <div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name`, { ns: 'billing' })}</div>
-            <div className="line-clamp-2 text-text-secondary system-md-regular">{t(`${i18nPrefix}.description`, { ns: 'billing' })}</div>
+            <div className="text-[30px] leading-[1.2] font-medium text-text-primary">{t(`${i18nPrefix}.name`, { ns: 'billing' })}</div>
+            <div className="line-clamp-2 system-md-regular text-text-secondary">{t(`${i18nPrefix}.description`, { ns: 'billing' })}</div>
           </div>
         </div>
         {/* Price */}
-        <div className="flex items-end gap-x-2 px-1 pb-8 pt-4">
-          <div className="shrink-0 text-text-primary title-4xl-semi-bold">{t(`${i18nPrefix}.price`, { ns: 'billing' })}</div>
+        <div className="flex items-end gap-x-2 px-1 pt-4 pb-8">
+          <div className="shrink-0 title-4xl-semi-bold text-text-primary">{t(`${i18nPrefix}.price`, { ns: 'billing' })}</div>
           {!isFreePlan && (
-            <span className="pb-0.5 text-text-tertiary system-md-regular">
+            <span className="pb-0.5 system-md-regular text-text-tertiary">
               {t(`${i18nPrefix}.priceTip`, { ns: 'billing' })}
             </span>
           )}
@@ -110,7 +110,7 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
               <GoogleCloud />
             </div>
           </div>
-          <span className="text-text-tertiary system-xs-regular">
+          <span className="system-xs-regular text-text-tertiary">
             {t('plans.premium.comingSoon', { ns: 'billing' })}
           </span>
         </div>
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 1d130c8b32..8940b38382 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAedFill } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import {
   DocumentProcessingPriority,
   Plan,
@@ -49,7 +49,7 @@ const PriorityLabel = ({ className }: PriorityLabelProps) => {
     >
       <div
         className={cn(
-          'system-2xs-medium ml-1 inline-flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary',
+          'ml-1 inline-flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] system-2xs-medium text-text-accent-secondary',
           className,
         )}
       >
diff --git a/web/app/components/billing/progress-bar/index.tsx b/web/app/components/billing/progress-bar/index.tsx
index 180447b3d4..dfc2bf6fa9 100644
--- a/web/app/components/billing/progress-bar/index.tsx
+++ b/web/app/components/billing/progress-bar/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type ProgressBarProps = {
   percent: number
@@ -15,20 +15,20 @@ const ProgressBar = ({
 }: ProgressBarProps) => {
   if (indeterminate) {
     return (
-      <div className="overflow-hidden radius-sm bg-components-progress-bar-bg">
+      <div className="overflow-hidden rounded-md bg-components-progress-bar-bg">
         <div
           data-testid="billing-progress-bar-indeterminate"
-          className={cn('h-1 radius-sm bg-progress-bar-indeterminate-stripe', indeterminateFull ? 'w-full' : 'w-[30px]')}
+          className={cn('h-1 rounded-md bg-progress-bar-indeterminate-stripe', indeterminateFull ? 'w-full' : 'w-[30px]')}
         />
       </div>
     )
   }
 
   return (
-    <div className="overflow-hidden radius-sm bg-components-progress-bar-bg">
+    <div className="overflow-hidden rounded-md bg-components-progress-bar-bg">
       <div
         data-testid="billing-progress-bar"
-        className={cn('h-1 radius-sm', color)}
+        className={cn('h-1 rounded-md', color)}
         style={{
           width: `${Math.min(percent, 100)}%`,
         }}
diff --git a/web/app/components/billing/trigger-events-limit-modal/index.tsx b/web/app/components/billing/trigger-events-limit-modal/index.tsx
index e837a3859d..5debb5cb57 100644
--- a/web/app/components/billing/trigger-events-limit-modal/index.tsx
+++ b/web/app/components/billing/trigger-events-limit-modal/index.tsx
@@ -35,7 +35,7 @@ const TriggerEventsLimitModal: FC<Props> = ({
       description={t('triggerLimitModal.description', { ns: 'billing' })}
       extraInfo={(
         <UsageInfo
-          className="mt-4 w-full radius-xl bg-components-panel-on-panel-item-bg"
+          className="mt-4 w-full rounded-xl bg-components-panel-on-panel-item-bg"
           Icon={TriggerAll}
           name={t('triggerLimitModal.usageTitle', { ns: 'billing' })}
           usage={usage}
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index f820b85eab..a88523c4a5 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { ComponentType, FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { NUM_INFINITE } from '../config'
 import ProgressBar from '../progress-bar'
 
@@ -71,14 +71,14 @@ const UsageInfo: FC<Props> = ({
   const renderRightInfo = () => {
     if (resetText) {
       return (
-        <div className="system-xs-regular ml-auto flex-1 text-right text-text-tertiary">
+        <div className="ml-auto flex-1 text-right system-xs-regular text-text-tertiary">
           {resetText}
         </div>
       )
     }
     if (showUnit) {
       return (
-        <div className="system-xs-medium ml-auto text-text-tertiary">
+        <div className="ml-auto system-xs-medium text-text-tertiary">
           {unit}
         </div>
       )
@@ -193,7 +193,7 @@ const UsageInfo: FC<Props> = ({
           />
         )}
       </div>
-      <div className="system-md-semibold flex items-center gap-1 text-text-primary">
+      <div className="flex items-center gap-1 system-md-semibold text-text-primary">
         {renderUsageWithTooltip()}
         {renderRightInfo()}
       </div>
diff --git a/web/app/components/billing/vector-space-full/index.tsx b/web/app/components/billing/vector-space-full/index.tsx
index 717684696a..6c900d2113 100644
--- a/web/app/components/billing/vector-space-full/index.tsx
+++ b/web/app/components/billing/vector-space-full/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import GridMask from '@/app/components/base/grid-mask'
-import { cn } from '@/utils/classnames'
 import UpgradeBtn from '../upgrade-btn'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
 import s from './style.module.css'
@@ -15,7 +15,7 @@ const VectorSpaceFull: FC = () => {
     <GridMask wrapperClassName="border border-gray-200 rounded-xl" canvasClassName="rounded-xl" gradientClassName="rounded-xl">
       <div className="px-6 py-5">
         <div className="flex items-center justify-between">
-          <div className={cn(s.textGradient, 'text-base font-semibold leading-[24px]')}>
+          <div className={cn(s.textGradient, 'text-base leading-[24px] font-semibold')}>
             <div>{t('vectorSpace.fullTip', { ns: 'billing' })}</div>
             <div>{t('vectorSpace.fullSolution', { ns: 'billing' })}</div>
           </div>
diff --git a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
index 491e57563d..c92ef14c9f 100644
--- a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import PoweredByBrand from './powered-by-brand'
 
 type ChatPreviewCardProps = {
diff --git a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
index 3d2eccab60..0b9b61d94c 100644
--- a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import PoweredByBrand from './powered-by-brand'
 
 type WorkflowPreviewCardProps = {
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 0972066b00..fecc630422 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Switch from '@/app/components/base/switch'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import ChatPreviewCard from './components/chat-preview-card'
 import WorkflowPreviewCard from './components/workflow-preview-card'
 import useWebAppBrand from './hooks/use-web-app-brand'
diff --git a/web/app/components/datasets/common/credential-icon.tsx b/web/app/components/datasets/common/credential-icon.tsx
index a5eb6bfdb6..f993eca585 100644
--- a/web/app/components/datasets/common/credential-icon.tsx
+++ b/web/app/components/datasets/common/credential-icon.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 type CredentialIconProps = {
   avatarUrl?: string
@@ -59,7 +59,7 @@ export const CredentialIcon: React.FC<CredentialIconProps> = ({
       )}
       style={{ width: `${size}px`, height: `${size}px` }}
     >
-      <span className="bg-linear-to-b from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text text-[13px] font-semibold leading-[1.2] text-transparent opacity-90">
+      <span className="bg-linear-to-b from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text text-[13px] leading-[1.2] font-semibold text-transparent opacity-90">
         {firstLetter}
       </span>
     </div>
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index 574792ee14..d2d8d1966c 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { DocumentItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 import FileIcon from '../document-file-icon'
 
 type Props = {
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index b564b4d2b1..d0e389255a 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DocumentItem, ParentMode, SimpleDocumentDetail } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -16,7 +17,6 @@ import {
 import SearchInput from '@/app/components/base/search-input'
 import { ChunkingMode } from '@/models/datasets'
 import { useDocumentList } from '@/service/knowledge/use-document'
-import { cn } from '@/utils/classnames'
 import FileIcon from '../document-file-icon'
 import DocumentList from './document-list'
 
@@ -83,9 +83,9 @@ const DocumentPicker: FC<Props> = ({
       placement="bottom-start"
     >
       <PortalToFollowElemTrigger onClick={togglePopup}>
-        <div className={cn('ml-1 flex cursor-pointer select-none items-center rounded-lg px-2 py-0.5 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+        <div className={cn('ml-1 flex cursor-pointer items-center rounded-lg px-2 py-0.5 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           <FileIcon name={name} extension={extension} size="xl" />
-          <div className="ml-1 mr-0.5 flex flex-col items-start">
+          <div className="mr-0.5 ml-1 flex flex-col items-start">
             <div className="flex items-center space-x-0.5">
               <span className={cn('system-md-semibold text-text-primary')}>
                 {' '}
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index dea0693983..03ee13b513 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DocumentItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -12,7 +13,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import FileIcon from '../document-file-icon'
 import DocumentList from './document-list'
 
@@ -52,11 +52,11 @@ const PreviewDocumentPicker: FC<Props> = ({
       offset={4}
     >
       <PortalToFollowElemTrigger onClick={togglePopup}>
-        <div className={cn('flex h-6 select-none items-center rounded-md px-1 hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
+        <div className={cn('flex h-6 items-center rounded-md px-1 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
           <FileIcon name={name} extension={extension} size="lg" />
           <div className="ml-1 flex flex-col items-start">
             <div className="flex items-center space-x-0.5">
-              <span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}>
+              <span className={cn('max-w-[200px] truncate system-md-semibold text-text-primary')}>
                 {' '}
                 {name || '--'}
               </span>
@@ -67,7 +67,7 @@ const PreviewDocumentPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-11">
         <div className="w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
-          {files?.length > 1 && <div className="system-xs-medium-uppercase flex h-8 items-center pl-2 text-text-tertiary">{t('preprocessDocument', { ns: 'dataset', num: files.length })}</div>}
+          {files?.length > 1 && <div className="flex h-8 items-center pl-2 system-xs-medium-uppercase text-text-tertiary">{t('preprocessDocument', { ns: 'dataset', num: files.length })}</div>}
           {files?.length > 0
             ? (
                 <DocumentList
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index 002a2323a7..3c2536fa5e 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAlertFill, RiCheckboxCircleFill, RiErrorWarningFill, RiInformation2Fill } from '@remixicon/react'
 import * as React from 'react'
 import Divider from '@/app/components/base/divider'
-import { cn } from '@/utils/classnames'
 
 type Status = 'success' | 'error' | 'warning' | 'info'
 type Props = {
@@ -46,7 +46,7 @@ const StatusAction: FC<Props> = ({
 }) => {
   const { Icon, color } = getIcon(type)
   return (
-    <div className="relative flex h-[34px] items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2 pr-3 shadow-xs">
+    <div className="relative flex h-[34px] items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pr-3 pl-2 shadow-xs">
       <div className={
         `absolute inset-0 rounded-lg opacity-40 ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
         || (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
diff --git a/web/app/components/datasets/common/image-list/index.tsx b/web/app/components/datasets/common/image-list/index.tsx
index 48a990f94d..b04dd5afbd 100644
--- a/web/app/components/datasets/common/image-list/index.tsx
+++ b/web/app/components/datasets/common/image-list/index.tsx
@@ -1,8 +1,8 @@
 import type { ImageInfo } from '../image-previewer'
 import type { FileEntity } from '@/app/components/base/file-thumb'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo, useState } from 'react'
 import FileThumb from '@/app/components/base/file-thumb'
-import { cn } from '@/utils/classnames'
 import ImagePreviewer from '../image-previewer'
 import More from './more'
 
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index 64af3f80df..f899dcb33d 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -159,7 +159,7 @@ const ImagePreviewer = ({
         <Button
           variant="tertiary"
           onClick={onClose}
-          className="size-9 radius-lg p-0"
+          className="size-9 rounded-[10px] p-0"
           size="large"
         >
           <RiCloseLine className="size-5" />
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
index 8779f1c74d..ad4f1899d5 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { ACCEPT_TYPES } from '../constants'
 import { useUpload } from '../hooks/use-upload'
 
@@ -32,11 +32,11 @@ const ImageUploader = () => {
       <div
         ref={dropRef}
         className={cn(
-          'relative flex h-16 flex-col items-center justify-center gap-1 radius-lg border border-dashed border-components-dropzone-border bg-components-dropzone-bg px-4 py-3 text-text-tertiary',
+          'relative flex h-16 flex-col items-center justify-center gap-1 rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg px-4 py-3 text-text-tertiary',
           dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
         )}
       >
-        <div className="system-sm-medium flex items-center justify-center gap-x-2 text-text-secondary">
+        <div className="flex items-center justify-center gap-x-2 system-sm-medium text-text-secondary">
           <RiUploadCloud2Line className="size-5 text-text-tertiary" />
           <div>
             <span>{t('imageUploader.button', { ns: 'dataset' })}</span>
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
index ba2ede9f08..bfb4e654b2 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
@@ -1,8 +1,8 @@
 import type { FileEntity } from '../types'
 import type { ImageInfo } from '@/app/components/datasets/common/image-previewer'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import ImagePreviewer from '@/app/components/datasets/common/image-previewer'
-import { cn } from '@/utils/classnames'
 import { useUpload } from '../hooks/use-upload'
 import {
   FileContextProvider,
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
index 0c4da5a7e4..4cdff95fc4 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
@@ -1,12 +1,12 @@
 import type { FileEntity } from '../types'
 import type { ImageInfo } from '@/app/components/datasets/common/image-previewer'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useCallback,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import ImagePreviewer from '@/app/components/datasets/common/image-previewer'
-import { cn } from '@/utils/classnames'
 import { useUpload } from '../hooks/use-upload'
 import {
   FileContextProvider,
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index acb77acfa6..c0cfe186a1 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -1,8 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { RetrievalConfig } from '@/types/app'
-import * as React from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 
+import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import WeightedScore from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
@@ -22,7 +23,6 @@ import {
   WeightedScoreEnum,
 } from '@/models/datasets'
 import { RETRIEVE_METHOD } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import ProgressIndicator from '../../create/assets/progress-indicator.svg'
 import Reranking from '../../create/assets/rerank.svg'
 
@@ -126,7 +126,7 @@ const RetrievalParamConfig: FC<Props> = ({
               />
             )}
             <div className="flex items-center">
-              <span className="mr-0.5 text-text-secondary system-sm-semibold">{t('modelProvider.rerankModel.key', { ns: 'common' })}</span>
+              <span className="mr-0.5 system-sm-semibold text-text-secondary">{t('modelProvider.rerankModel.key', { ns: 'common' })}</span>
               <Tooltip
                 popupContent={
                   <div className="w-[200px]">{t('modelProvider.rerankModel.tip', { ns: 'common' })}</div>
@@ -152,11 +152,11 @@ const RetrievalParamConfig: FC<Props> = ({
                 />
                 {showMultiModalTip && (
                   <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-                    <div className="absolute bottom-0 left-0 right-0 top-0 bg-dataset-warning-message-bg opacity-40" />
+                    <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40" />
                     <div className="p-1">
                       <AlertTriangle className="size-4 text-text-warning-secondary" />
                     </div>
-                    <span className="text-text-primary system-xs-medium">
+                    <span className="system-xs-medium text-text-primary">
                       {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
                     </span>
                   </div>
@@ -276,11 +276,11 @@ const RetrievalParamConfig: FC<Props> = ({
                   />
                   {showMultiModalTip && (
                     <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-                      <div className="absolute bottom-0 left-0 right-0 top-0 bg-dataset-warning-message-bg opacity-40" />
+                      <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40" />
                       <div className="p-1">
                         <AlertTriangle className="size-4 text-text-warning-secondary" />
                       </div>
-                      <span className="text-text-primary system-xs-medium">
+                      <span className="system-xs-medium text-text-primary">
                         {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
                       </span>
                     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
index 3a0d5f6d63..8ad70696fe 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -1512,7 +1512,7 @@ describe('Uploader', () => {
       })
 
       // The dragRef div appears when dragging is true
-      const dragRefDiv = document.querySelector('[class*="absolute left-0 top-0"]')
+      const dragRefDiv = document.querySelector('[class*="absolute top-0 left-0"]')
       expect(dragRefDiv).toBeInTheDocument()
 
       // When dragLeave happens on the dragRef element, setDragging(false) is called
@@ -1688,7 +1688,7 @@ describe('Uploader', () => {
       })
 
       // Now the dragRef div should exist
-      const dragRefDiv = document.querySelector('[class*="absolute left-0 top-0"]')
+      const dragRefDiv = document.querySelector('[class*="absolute top-0 left-0"]')
 
       // When dragEnter happens on dragRef itself, setDragging should NOT be called
       if (dragRefDiv) {
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
index 87af4714bd..0dd0454eb2 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   isActive: boolean
@@ -15,7 +15,7 @@ const Item = ({
   return (
     <div
       className={cn(
-        'system-md-semibold relative flex h-full cursor-pointer items-center text-text-tertiary',
+        'relative flex h-full cursor-pointer items-center system-md-semibold text-text-tertiary',
         isActive && 'text-text-primary',
       )}
       onClick={onClick}
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index 7089c8293a..69b8d07ce8 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiNodeTree, RiUploadCloud2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 
 type Props = {
@@ -95,7 +95,7 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
                 </span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
           </div>
         )}
         {file && (
@@ -104,10 +104,10 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
               <RiNodeTree className="h-6 w-6 shrink-0 text-text-secondary" />
             </div>
             <div className="flex grow flex-col items-start gap-0.5 py-1 pr-2">
-              <span className="font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium leading-4 text-text-secondary">
+              <span className="font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-[12px] leading-4 font-medium text-ellipsis whitespace-nowrap text-text-secondary">
                 {file.name}
               </span>
-              <div className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] font-medium uppercase leading-3 text-text-tertiary">
+              <div className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase">
                 <span>PIPELINE</span>
                 <span className="text-text-quaternary">·</span>
                 <span>{formatFileSize(file.size)}</span>
diff --git a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
index 78b1949c5e..3d75a31a3b 100644
--- a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
@@ -40,14 +40,14 @@ const CreateCard = () => {
       onClick={handleCreate}
     >
       <div className="flex items-center gap-x-3 p-4 pb-2">
-        <div className="flex size-10 shrink-0 items-center justify-center radius-lg border border-dashed border-divider-regular bg-background-section group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
+        <div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] border border-dashed border-divider-regular bg-background-section group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
           <RiAddCircleLine className="size-5 text-text-quaternary group-hover:text-text-accent" />
         </div>
-        <div className="system-md-semibold truncate text-text-primary">
+        <div className="truncate system-md-semibold text-text-primary">
           {t('creation.createFromScratch.title', { ns: 'datasetPipeline' })}
         </div>
       </div>
-      <p className="system-xs-regular line-clamp-3 px-4 py-1 text-text-tertiary">
+      <p className="line-clamp-3 px-4 py-1 system-xs-regular text-text-tertiary">
         {t('creation.createFromScratch.description', { ns: 'datasetPipeline' })}
       </p>
     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
index 4a6efa29a2..217313c7c4 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
@@ -1,6 +1,6 @@
 import type { Option } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { EffectColor } from './types'
 
 const HEADER_EFFECT_MAP: Record<EffectColor, string> = {
@@ -35,7 +35,7 @@ const ChunkStructureCard = ({
     )}
     >
       <div className={cn(
-        'absolute -left-1 -top-1 size-14 rounded-full blur-[80px]',
+        'absolute -top-1 -left-1 size-14 rounded-full blur-[80px]',
         `${HEADER_EFFECT_MAP[effectColor]}`,
       )}
       />
diff --git a/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx b/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx
index f3bac20bbe..ef54bddfc5 100644
--- a/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx
+++ b/web/app/components/datasets/create/embedding-process/indexing-progress-item.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { IndexingStatusResponse } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckboxCircleFill,
   RiErrorWarningFill,
@@ -8,7 +9,6 @@ import NotionIcon from '@/app/components/base/notion-icon'
 import Tooltip from '@/app/components/base/tooltip'
 import PriorityLabel from '@/app/components/billing/priority-label'
 import { DataSourceType } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import DocumentFileIcon from '../../common/document-file-icon'
 import { getFileType, getSourcePercent, isSourceEmbedding } from './utils'
 
@@ -92,18 +92,18 @@ const IndexingProgressItem: FC<IndexingProgressItemProps> = ({
     >
       {isEmbedding && (
         <div
-          className="absolute left-0 top-0 h-full min-w-0.5 border-r-2 border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
+          className="absolute top-0 left-0 h-full min-w-0.5 border-r-2 border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
           style={{ width: `${percent}%` }}
         />
       )}
-      <div className="z-1 flex h-full items-center gap-1 pl-[6px] pr-2">
+      <div className="z-1 flex h-full items-center gap-1 pr-2 pl-[6px]">
         <SourceTypeIcon
           sourceType={sourceType}
           name={name}
           notionIcon={notionIcon}
         />
         <div className="flex w-0 grow items-center gap-1" title={name}>
-          <div className="system-xs-medium truncate text-text-secondary">
+          <div className="truncate system-xs-medium text-text-secondary">
             {name}
           </div>
           {enableBilling && <PriorityLabel className="ml-0" />}
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 2f42b8acdf..581082ca75 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +11,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index 77af5edeed..2b4041eaf2 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { CustomFile as File } from '@/models/datasets'
 import { XMarkIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { fetchFilePreview } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx b/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx
index 9fa577dace..2a2a40d5b8 100644
--- a/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx
+++ b/web/app/components/datasets/create/file-uploader/components/upload-dropzone.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { RefObject } from 'react'
 import type { FileUploadConfig } from '../hooks/use-file-upload'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 export type UploadDropzoneProps = {
   dropRef: RefObject<HTMLDivElement | null>
@@ -75,7 +75,7 @@ const UploadDropzone = ({
             totalCount: fileUploadConfig.file_upload_limit,
           })}
         </div>
-        {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+        {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
       </div>
     </>
   )
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index b649554a12..0bf9c3c052 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import FileListItem from './components/file-list-item'
 import UploadDropzone from './components/upload-dropzone'
 import { useFileUpload } from './hooks/use-file-upload'
@@ -51,7 +51,7 @@ const FileUploader = ({
 
   return (
     <div className="mb-5 w-[640px]">
-      <div className={cn('mb-1 text-sm font-semibold leading-6 text-text-secondary', titleClassName)}>
+      <div className={cn('mb-1 text-sm leading-6 font-semibold text-text-secondary', titleClassName)}>
         {t('stepOne.uploader.title', { ns: 'datasetCreation' })}
       </div>
 
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index fb6cd09a55..116090413a 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { NotionPage } from '@/models/common'
 import { XMarkIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { fetchNotionPagePreview } from '@/service/datasets'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/step-one/components/data-source-type-selector.tsx b/web/app/components/datasets/create/step-one/components/data-source-type-selector.tsx
index 6bdc2ace56..27763af352 100644
--- a/web/app/components/datasets/create/step-one/components/data-source-type-selector.tsx
+++ b/web/app/components/datasets/create/step-one/components/data-source-type-selector.tsx
@@ -1,10 +1,10 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import { DataSourceType } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import s from '../index.module.css'
 
 type DataSourceTypeSelectorProps = {
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index dcce072588..821e190b2d 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -3,6 +3,7 @@
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
 import type { DataSourceProvider, NotionPage } from '@/models/common'
 import type { CrawlOptions, CrawlResultItem, FileItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiFolder6Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useCallback, useMemo } from 'react'
@@ -14,7 +15,6 @@ import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import { DataSourceType } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
 import FileUploader from '../file-uploader'
 import Website from '../website'
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index ac0522b6a0..6d9a306bf6 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -35,7 +35,7 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
   return (
     <div className="flex h-full max-h-full w-full justify-center overflow-y-auto">
       <div className="h-full max-w-[960px] shrink-0 grow overflow-y-auto px-14 sm:px-16">
-        <div className="mx-auto max-w-[640px] pb-8 pt-10">
+        <div className="mx-auto max-w-[640px] pt-10 pb-8">
           {!datasetId && (
             <>
               <div className="flex flex-col gap-y-1 pb-3">
@@ -52,10 +52,10 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
                   className="shrink-0"
                 />
                 <div className="flex grow flex-col gap-y-1">
-                  <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+                  <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
                     {t('stepThree.label', { ns: 'datasetCreation' })}
                   </div>
-                  <div className="system-sm-regular w-full truncate rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled">
+                  <div className="w-full truncate rounded-lg bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled">
                     <span className="px-1">{datasetName || creationCache?.dataset?.name}</span>
                   </div>
                 </div>
@@ -79,9 +79,9 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
         </div>
       </div>
       {!isMobile && (
-        <div className="shrink-0 pr-8 pt-[88px] text-xs">
+        <div className="shrink-0 pt-[88px] pr-8 text-xs">
           <div className="flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6 text-text-tertiary">
-            <div className="flex size-10 items-center justify-center radius-lg bg-components-card-bg shadow-lg">
+            <div className="flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg">
               <RiBookOpenLine className="size-5 text-text-accent" />
             </div>
             <div className="text-base font-semibold text-text-secondary">{t('stepThree.sideTipTitle', { ns: 'datasetCreation' })}</div>
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
index 7048b0d460..156cb922b3 100644
--- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
+++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
@@ -3,6 +3,7 @@
 import type { FC } from 'react'
 import type { DefaultModel, Model } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { RetrievalConfig } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import CustomDialog from '@/app/components/base/dialog'
@@ -16,7 +17,6 @@ import ModelSelector from '@/app/components/header/account-setting/model-provide
 import { useDocLink } from '@/context/i18n'
 import { ChunkingMode } from '@/models/datasets'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { indexMethodIcon } from '../../icons'
 import { IndexingType } from '../hooks'
 import s from '../index.module.css'
diff --git a/web/app/components/datasets/create/step-two/components/option-card.tsx b/web/app/components/datasets/create/step-two/components/option-card.tsx
index 320c7be44f..5334feaac8 100644
--- a/web/app/components/datasets/create/step-two/components/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/components/option-card.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
@@ -22,7 +22,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   return (
     <div className={cn('relative flex h-full overflow-hidden rounded-t-xl', isActive && activeClassName, !disabled && 'cursor-pointer')}>
       <div className="relative flex size-14 items-center justify-center overflow-hidden">
-        {isActive && effectImg && <img src={effectImg} className="absolute left-0 top-0 h-full w-full" alt="" width={56} height={56} />}
+        {isActive && effectImg && <img src={effectImg} className="absolute top-0 left-0 h-full w-full" alt="" width={56} height={56} />}
         <div className="p-1">
           <div className="flex size-8 justify-center rounded-lg border border-components-panel-border-subtle bg-background-default-dodge p-1.5 shadow-md">
             {icon}
@@ -33,8 +33,8 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
         className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
       />
       <div className="flex-1 space-y-0.5 py-3 pr-4">
-        <div className="text-text-secondary system-md-semibold">{title}</div>
-        <div className="text-text-tertiary system-xs-regular">{description}</div>
+        <div className="system-md-semibold text-text-secondary">{title}</div>
+        <div className="system-xs-regular text-text-tertiary">{description}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/create/step-two/components/preview-panel.tsx b/web/app/components/datasets/create/step-two/components/preview-panel.tsx
index 5cb33f2d6d..254a28619c 100644
--- a/web/app/components/datasets/create/step-two/components/preview-panel.tsx
+++ b/web/app/components/datasets/create/step-two/components/preview-panel.tsx
@@ -3,6 +3,7 @@
 import type { FC } from 'react'
 import type { ParentChildConfig } from '../hooks'
 import type { DataSourceType, FileIndexingEstimateResponse } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiSearchEyeLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import FloatRightContainer from '@/app/components/base/float-right-container'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
 import { FULL_DOC_PREVIEW_LENGTH } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import { ChunkContainer, QAPreview } from '../../../chunk'
 import PreviewDocumentPicker from '../../../common/document-picker/preview-document-picker'
 import SummaryLabel from '../../../documents/detail/completed/common/summary-label'
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 44eceaaad3..16e14e35f6 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from 'react'
 import type { StepTwoProps } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
@@ -13,7 +14,6 @@ import { LanguagesSupported } from '@/i18n-config/language'
 import { DataSourceProvider } from '@/models/common'
 import { ChunkingMode, ProcessMode } from '@/models/datasets'
 import { useFetchDefaultProcessRule } from '@/service/knowledge/use-create-dataset'
-import { cn } from '@/utils/classnames'
 import { GeneralChunkingOptions, IndexingModeSection, ParentChildOptions, PreviewPanel, StepTwoFooter } from './components'
 import { IndexingType, MAXIMUM_CHUNK_TOKEN_LENGTH, useDocumentCreation, useIndexingConfig, useIndexingEstimate, usePreviewState, useSegmentationState } from './hooks'
 
@@ -197,7 +197,7 @@ const StepTwo: FC<StepTwoProps> = ({
   return (
     <div className="flex h-full w-full">
       <div className={cn('relative h-full w-1/2 overflow-y-auto py-6', isMobile ? 'px-4' : 'px-12')}>
-        <div className="system-md-semibold mb-1 text-text-secondary">{t('stepTwo.segmentation', { ns: 'datasetCreation' })}</div>
+        <div className="mb-1 system-md-semibold text-text-secondary">{t('stepTwo.segmentation', { ns: 'datasetCreation' })}</div>
         {showGeneralOption && (
           <GeneralChunkingOptions
             segmentIdentifier={segmentation.segmentIdentifier}
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 321751cd51..4a7683576f 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import * as React from 'react'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n-config/language'
-import { cn } from '@/utils/classnames'
 
 export type ILanguageSelectProps = {
   currentLanguage: string
@@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
       btnElement={(
         <div className={cn('inline-flex items-center gap-x-px', disabled && 'cursor-not-allowed')}>
           <span className={cn(
-            'system-xs-semibold px-[3px] text-components-button-tertiary-text',
+            'px-[3px] system-xs-semibold text-components-button-tertiary-text',
             disabled ? 'text-components-button-tertiary-text-disabled' : '',
           )}
           >
diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index a2a824f737..a29790afec 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 export type Step = {
   name: string
@@ -23,7 +23,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
             ? 'w-5 border border-text-quaternary'
             : 'w-5 border border-divider-deep')}
       >
-        <div className={cn('system-2xs-semibold-uppercase text-center', isActive
+        <div className={cn('text-center system-2xs-semibold-uppercase', isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
               ? 'text-text-tertiary'
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index 6de5e5413f..ac9be31199 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index ba4c49e300..43b07e5fb1 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { StepperProps } from '../stepper'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { Stepper } from '../stepper'
 
 export type TopBarProps = Pick<StepperProps, 'activeIndex'> & {
@@ -28,7 +28,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
 
   return (
     <div className={cn('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
-      <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
+      <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pr-6 pl-2">
         <div className="p-2">
           <RiArrowLeftLine className="size-4 text-text-primary" />
         </div>
@@ -36,7 +36,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
           {t('steps.header.fallbackRoute', { ns: 'datasetCreation' })}
         </p>
       </Link>
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <Stepper
           steps={Array.from({ length: 3 }, (_, i) => ({
             name: t(STEP_T_MAP[(i + 1) as keyof typeof STEP_T_MAP], { ns: 'datasetCreation' }),
diff --git a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
index 182645d5bc..686976826d 100644
--- a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index 7c635de380..273fe72abe 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   payload: CrawlResultItemType
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index 058727e0b1..0f72cc5172 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlResultItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
 
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index 97b18d00c1..6b530192fb 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -22,7 +22,7 @@ const ErrorMessage: FC<Props> = ({
         <div className="system-md-medium text-text-warning">{title}</div>
       </div>
       {errorMsg && (
-        <div className="system-xs-regular mt-1 pl-6 text-text-secondary">{errorMsg}</div>
+        <div className="mt-1 pl-6 system-xs-regular text-text-secondary">{errorMsg}</div>
       )}
     </div>
   )
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 43f9e4bb37..860f934da2 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import Input from './input'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/base/header.tsx b/web/app/components/datasets/create/website/base/header.tsx
index 0d32b9dfdb..b72d117968 100644
--- a/web/app/components/datasets/create/website/base/header.tsx
+++ b/web/app/components/datasets/create/website/base/header.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import Divider from '@/app/components/base/divider'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type HeaderProps = {
   isInPipeline?: boolean
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index fde518d7a1..37e09db338 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
-import { cn } from '@/utils/classnames'
 
 const I18N_PREFIX = 'stepOne.website'
 
@@ -35,12 +35,12 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className="flex h-[26px] cursor-pointer select-none items-center gap-x-1 py-1"
+        className="flex h-[26px] cursor-pointer items-center gap-x-1 py-1 select-none"
         onClick={foldToggle}
       >
         <div className="flex grow items-center">
           <RiEqualizer2Line className="mr-1 h-4 w-4 text-text-secondary" />
-          <span className="text-[13px] font-semibold uppercase leading-[16px] text-text-secondary">{t(`${I18N_PREFIX}.options`, { ns: 'datasetCreation' })}</span>
+          <span className="text-[13px] leading-[16px] font-semibold text-text-secondary uppercase">{t(`${I18N_PREFIX}.options`, { ns: 'datasetCreation' })}</span>
         </div>
         <ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 shrink-0 text-text-tertiary')} />
       </div>
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index 3bfe055823..e4ce8b56a2 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlOptions } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
 
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index 1457aa7ea2..5e6fce527d 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import { useModalContext } from '@/context/modal-context'
 import { DataSourceProvider } from '@/models/common'
-import { cn } from '@/utils/classnames'
 import Firecrawl from './firecrawl'
 import s from './index.module.css'
 import JinaReader from './jina-reader'
@@ -60,7 +60,7 @@ const Website: FC<Props> = ({
   return (
     <div>
       <div className="mb-4">
-        <div className="system-md-medium mb-2 text-text-secondary">
+        <div className="mb-2 system-md-medium text-text-secondary">
           {t('stepOne.website.chooseProvider', { ns: 'datasetCreation' })}
         </div>
         <div className="flex space-x-2">
@@ -68,8 +68,8 @@ const Website: FC<Props> = ({
             <button
               type="button"
               className={cn('flex items-center justify-center rounded-lg px-4 py-2', selectedProvider === DataSourceProvider.jinaReader
-                ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
-                : `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
+                ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary'
+                : `border border-components-option-card-option-border bg-components-option-card-option-bg system-sm-regular text-text-secondary
                 hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`)}
               onClick={() => {
                 setSelectedProvider(DataSourceProvider.jinaReader)
@@ -84,8 +84,8 @@ const Website: FC<Props> = ({
             <button
               type="button"
               className={cn('rounded-lg px-4 py-2', selectedProvider === DataSourceProvider.fireCrawl
-                ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
-                : `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
+                ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary'
+                : `border border-components-option-card-option-border bg-components-option-card-option-bg system-sm-regular text-text-secondary
                 hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`)}
               onClick={() => {
                 setSelectedProvider(DataSourceProvider.fireCrawl)
@@ -99,8 +99,8 @@ const Website: FC<Props> = ({
             <button
               type="button"
               className={cn('flex items-center justify-center rounded-lg px-4 py-2', selectedProvider === DataSourceProvider.waterCrawl
-                ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
-                : `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
+                ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary'
+                : `border border-components-option-card-option-border bg-components-option-card-option-bg system-sm-regular text-text-secondary
                 hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`)}
               onClick={() => {
                 setSelectedProvider(DataSourceProvider.waterCrawl)
diff --git a/web/app/components/datasets/create/website/jina-reader/options.tsx b/web/app/components/datasets/create/website/jina-reader/options.tsx
index 11a90b4d90..a0ea118fe9 100644
--- a/web/app/components/datasets/create/website/jina-reader/options.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/options.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlOptions } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
 
@@ -32,7 +32,7 @@ const Options: FC<Props> = ({
     }
   }, [payload, onChange])
   return (
-    <div className={cn(className, ' space-y-2')}>
+    <div className={cn(className, 'space-y-2')}>
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.crawlSubPage`, { ns: 'datasetCreation' })}
         isChecked={payload.crawl_sub_pages}
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 612507d76f..9bf2c91ec7 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -57,7 +57,7 @@ const NoData: FC<Props> = ({
   return (
     <>
       <div className="mt-4 max-w-[640px] rounded-2xl bg-workflow-process-bg p-6">
-        <div className="flex h-12 w-12 items-center justify-center radius-lg border-[0.5px]
+        <div className="flex h-12 w-12 items-center justify-center rounded-[10px] border-[0.5px]
           border-components-card-border bg-components-card-bg shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]"
         >
           {currentProvider.emoji}
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index d521b435a2..a46437325f 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { CrawlResultItem } from '@/models/datasets'
 import { XMarkIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import s from '../file-preview/index.module.css'
 
 type IProps = {
@@ -29,7 +29,7 @@ const WebsitePreview = ({
         <div className="title-sm-semi-bold wrap-break-word text-text-primary">
           {payload.title}
         </div>
-        <div className="system-xs-medium truncate text-text-tertiary" title={payload.source_url}>{payload.source_url}</div>
+        <div className="truncate system-xs-medium text-text-tertiary" title={payload.source_url}>{payload.source_url}</div>
       </div>
       <div className={cn(s.previewContent, 'body-md-regular')}>
         <div className={cn(s.fileContent)}>{payload.markdown}</div>
diff --git a/web/app/components/datasets/create/website/watercrawl/options.tsx b/web/app/components/datasets/create/website/watercrawl/options.tsx
index 7521cd5764..999bb3c61d 100644
--- a/web/app/components/datasets/create/website/watercrawl/options.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/options.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { CrawlOptions } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
 
@@ -32,7 +32,7 @@ const Options: FC<Props> = ({
     }
   }, [payload, onChange])
   return (
-    <div className={cn(className, ' space-y-2')}>
+    <div className={cn(className, 'space-y-2')}>
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.crawlSubPage`, { ns: 'datasetCreation' })}
         isChecked={payload.crawl_sub_pages}
diff --git a/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx b/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx
index 1d693565cb..a8843b505f 100644
--- a/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/sort-header.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { SortField, SortOrder } from '../hooks'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type SortHeaderProps = {
   field: Exclude<SortField, null>
@@ -30,7 +30,7 @@ const SortHeader: FC<SortHeaderProps> = React.memo(({
       {label}
       <span
         className={cn(
-          'i-ri-arrow-down-line ml-0.5 h-3 w-3 transition-all',
+          'ml-0.5 i-ri-arrow-down-line h-3 w-3 transition-all',
           isActive ? 'text-text-tertiary' : 'text-text-disabled',
           isActive && !isDesc ? 'rotate-180' : '',
         )}
diff --git a/web/app/components/datasets/documents/components/document-list/components/utils.tsx b/web/app/components/datasets/documents/components/document-list/components/utils.tsx
index 4cb652108d..ddcc1c767e 100644
--- a/web/app/components/datasets/documents/components/document-list/components/utils.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/utils.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import s from '../../../style.module.css'
 
 export const renderTdValue = (value: string | number | null, isEmptyStyle = false): ReactNode => {
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index b4b8cbfdb4..f585ab4654 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -1,6 +1,7 @@
 import type { OperationName } from '../types'
 import type { CommonResponse } from '@/models/common'
 import type { DocumentDownloadResponse } from '@/service/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArchive2Line, RiDeleteBinLine, RiDownload2Line, RiEditLine, RiEqualizer2Line, RiLoopLeftLine, RiMoreFill, RiPauseCircleLine, RiPlayCircleLine } from '@remixicon/react'
 import { useBoolean, useDebounceFn } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -27,7 +28,6 @@ import { DataSourceType, DocumentActionType } from '@/models/datasets'
 import { useRouter } from '@/next/navigation'
 import { useDocumentArchive, useDocumentDelete, useDocumentDisable, useDocumentDownload, useDocumentEnable, useDocumentPause, useDocumentResume, useDocumentSummary, useDocumentUnArchive, useSyncDocument, useSyncWebsite } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import s from '../style.module.css'
 import RenameModal from './rename-modal'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
index d081cabb66..2ed589faf9 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 
 type DatasourceIconProps = {
   size?: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
index b938afa950..8efd2df646 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
@@ -1,6 +1,6 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import DatasourceIcon from './datasource-icon'
 import { useDatasourceIcon } from './hooks'
 
@@ -24,7 +24,7 @@ const OptionCard = ({
       className={cn(
         'flex cursor-pointer items-center gap-2 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-3 shadow-shadow-shadow-3',
         selected
-          ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-inset ring-components-option-card-option-selected-border'
+          ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-components-option-card-option-selected-border ring-inset'
           : 'hover:bg-components-option-card-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs',
       )}
       onClick={onClick}
@@ -33,7 +33,7 @@ const OptionCard = ({
         <DatasourceIcon iconUrl={iconUrl} />
       </div>
       <div
-        className={cn('system-sm-medium line-clamp-2 grow text-text-secondary', selected && 'text-text-primary')}
+        className={cn('line-clamp-2 grow system-sm-medium text-text-secondary', selected && 'text-text-primary')}
         title={label}
       >
         {label}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
index ed68eaef5d..980a7ff1dd 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
@@ -1,8 +1,8 @@
 import type { DataSourceCredential } from '@/types/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { CredentialIcon } from '@/app/components/datasets/common/credential-icon'
-import { cn } from '@/utils/classnames'
 
 type TriggerProps = {
   currentCredential: DataSourceCredential | undefined
@@ -31,7 +31,7 @@ const Trigger = ({
         size={20}
       />
       <div className="flex grow items-center gap-x-1 overflow-hidden">
-        <span className="system-md-semibold grow truncate text-text-secondary">
+        <span className="grow truncate system-md-semibold text-text-secondary">
           {name}
         </span>
         <RiArrowDownSLine className="size-4 shrink-0 text-text-secondary" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
index 4338dd05d4..9bad3f3102 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
@@ -1,4 +1,5 @@
 import type { CustomFile as File, FileItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiErrorWarningFill } from '@remixicon/react'
 import { useMemo } from 'react'
 import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
@@ -6,7 +7,6 @@ import { getFileType } from '@/app/components/datasets/common/image-uploader/uti
 import useTheme from '@/hooks/use-theme'
 import dynamic from '@/next/dynamic'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 import { PROGRESS_ERROR } from '../constants'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx
index 66bf42d365..32aee588df 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent, RefObject } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type FileUploadConfig = {
   file_size_limit: number
@@ -74,7 +74,7 @@ const UploadDropzone = ({
             totalCount: fileUploadConfig.file_upload_limit,
           })}
         </div>
-        {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+        {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
       </div>
     </>
   )
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
index 19ec906688..5b1b0a6b1a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
@@ -20,7 +20,7 @@ const Connect = ({
 
   return (
     <div className="flex flex-col items-start gap-y-2 rounded-xl bg-workflow-process-bg p-6">
-      <div className="flex size-12 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5">
+      <div className="flex size-12 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5">
         <BlockIcon
           type={BlockEnum.DataSource}
           toolIcon={toolIcon}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
index b98568e3d0..003aee6542 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 type BucketProps = {
   bucketName: string
@@ -55,7 +55,7 @@ const Bucket = ({
       >
         {bucketName}
       </button>
-      {showSeparator && <span className="system-xs-regular shrink-0 text-divider-deep">/</span>}
+      {showSeparator && <span className="shrink-0 system-xs-regular text-divider-deep">/</span>}
     </>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
index c7b37eb51a..69daea1ab4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type DriveProps = {
   breadcrumbs: string[]
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 6d8e93b6b5..7178b45b34 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,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -6,7 +7,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import Menu from './menu'
 
 type DropdownProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
index 1bf32ab769..6af4628b80 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 type BreadcrumbItemProps = {
   name: string
@@ -39,7 +39,7 @@ const BreadcrumbItem = ({
       >
         {name}
       </button>
-      {showSeparator && <span className="system-xs-regular shrink-0 text-divider-deep">/</span>}
+      {showSeparator && <span className="shrink-0 system-xs-regular text-divider-deep">/</span>}
     </>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-folder.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-folder.tsx
index 46e6beaa97..d61587b141 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-folder.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-folder.tsx
@@ -5,7 +5,7 @@ const EmptyFolder = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="flex size-full items-center justify-center radius-lg bg-background-section px-1 py-1.5">
+    <div className="flex size-full items-center justify-center rounded-[10px] bg-background-section px-1 py-1.5">
       <span className="system-xs-regular text-text-tertiary">{t('onlineDrive.emptyFolder', { ns: 'datasetPipeline' })}</span>
     </div>
   )
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
index 2269e33679..ca110d3694 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
@@ -15,7 +15,7 @@ const EmptySearchResult = ({
   const { t } = useTranslation()
 
   return (
-    <div className="flex size-full flex-col items-center justify-center gap-y-2 radius-lg bg-background-section p-6">
+    <div className="flex size-full flex-col items-center justify-center gap-y-2 rounded-[10px] bg-background-section p-6">
       <SearchMenu className="size-8 text-text-tertiary" />
       <div className="system-sm-regular text-text-secondary">
         {t('onlineDrive.emptySearchResult', { ns: 'datasetPipeline' })}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
index ee87390892..81a6df9ec6 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { BucketsBlue, Folder } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import { OnlineDriveFileType } from '@/models/pipeline'
-import { cn } from '@/utils/classnames'
 import { getFileType } from './utils'
 
 type FileIconProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx
index c45dc4718d..f0245cc9a4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx
@@ -72,7 +72,7 @@ const List = ({
         )
       }
       {fileList.length > 0 && (
-        <div className="flex h-full flex-col gap-y-px overflow-y-auto radius-lg bg-background-section px-1 py-1.5">
+        <div className="flex h-full flex-col gap-y-px overflow-y-auto rounded-[10px] bg-background-section px-1 py-1.5">
           {
             fileList.map((file) => {
               const isSelected = selectedFileIds.includes(file.id)
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
index 2ea2dd4903..5018806265 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
@@ -1,12 +1,12 @@
 import type { Placement } from '@floating-ui/react'
 import type { OnlineDriveFile } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Radio from '@/app/components/base/radio/ui'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 import FileIcon from './file-icon'
 
@@ -91,13 +91,13 @@ const Item = ({
         >
           <FileIcon type={type} fileName={name} className="shrink-0 transform-gpu" />
           <span
-            className="grow truncate text-text-secondary system-sm-medium"
+            className="grow truncate system-sm-medium text-text-secondary"
             title={name}
           >
             {name}
           </span>
           {!isFolder && typeof size === 'number' && (
-            <span className="shrink-0 text-text-tertiary system-xs-regular">{formatFileSize(size)}</span>
+            <span className="shrink-0 system-xs-regular text-text-tertiary">{formatFileSize(size)}</span>
           )}
         </div>
       </Wrapper>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
index 17dfa37569..23dbea51a9 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 type CheckboxWithLabelProps = {
   className?: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
index 3da0e50357..664a251e25 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Radio from '@/app/components/base/radio/ui'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type CrawledResultItemProps = {
   payload: CrawlResultItemType
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
index b6dc4bcddf..8cd9a46054 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { CrawlResultItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
 
@@ -64,7 +64,7 @@ const CrawledResult = ({
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)}>
-      <div className="system-sm-medium pt-2 text-text-primary">
+      <div className="pt-2 system-sm-medium text-text-primary">
         {t(`${I18N_PREFIX}.scrapTimeInfo`, {
           ns: 'datasetCreation',
           total: list.length,
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
index 0f963c6486..0667a2dc91 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
@@ -1,7 +1,7 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type CrawlingProps = {
   className?: string
@@ -31,7 +31,7 @@ const Item = React.memo(({
   return (
     <div className="flex gap-x-2 px-2 py-[5px]">
       <div className="py-0.5">
-        <Block className="size-4 radius-xs" />
+        <Block className="size-4 rounded-sm" />
       </div>
       <div className="flex grow flex-col">
         <div className="flex h-5 w-full items-center">
@@ -74,7 +74,7 @@ const Crawling = ({
       </div>
       <div className="overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg">
         <div className="flex items-center gap-x-2 px-4 py-2">
-          <Block className="size-4 radius-xs" />
+          <Block className="size-4 rounded-sm" />
           <Block className="h-2.5 w-14 rounded-xs" />
         </div>
         <div className="flex flex-col gap-px border-t border-divider-subtle bg-background-default-subtle p-2">
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
index 191847fa8d..dd52c027fb 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ErrorMessageProps = {
   className?: string
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 48aae23492..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
@@ -1,4 +1,5 @@
 import type { RAGPipelineVariables } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'
@@ -11,7 +12,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useConfigurations, useInitialData } from '@/app/components/rag-pipeline/hooks/use-input-fields'
 import { CrawlStep } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 
 const I18N_PREFIX = 'stepOne.website'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index 86de5ee45e..c03fc8aba2 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -2,6 +2,7 @@ import type { IndexingType } from '@/app/components/datasets/create/step-two'
 import type { IndexingStatusResponse } from '@/models/datasets'
 import type { InitialDocumentDetail } from '@/models/pipeline'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAedFill,
   RiArrowRightLine,
@@ -28,7 +29,6 @@ import Link from '@/next/link'
 import { useRouter } from '@/next/navigation'
 import { useIndexingStatusBatch, useProcessRule } from '@/service/knowledge/use-dataset'
 import { useInvalidDocumentList } from '@/service/knowledge/use-document'
-import { cn } from '@/utils/classnames'
 import RuleDetail from './rule-detail'
 
 type EmbeddingProcessProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
index bcdafb5294..2f5946240e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/index.tsx
@@ -24,7 +24,7 @@ const Processing = ({
 
   return (
     <div className="flex h-full w-full justify-center overflow-hidden">
-      <div className="h-full w-3/5 overflow-y-auto pb-8 pt-10">
+      <div className="h-full w-3/5 overflow-y-auto pt-10 pb-8">
         <div className="max-w-[640px]">
           <EmbeddingProcess
             datasetId={datasetId!}
@@ -35,9 +35,9 @@ const Processing = ({
           />
         </div>
       </div>
-      <div className="w-2/5 pr-8 pt-[88px]">
+      <div className="w-2/5 pt-[88px] pr-8">
         <div className="flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6">
-          <div className="flex size-10 items-center justify-center radius-lg bg-components-card-bg shadow-lg shadow-shadow-shadow-5">
+          <div className="flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg shadow-shadow-shadow-5">
             <RiBookOpenLine className="size-5 text-text-accent" />
           </div>
           <div className="flex flex-col gap-y-2">
diff --git a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
index 755526df79..fa5c48efed 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 export type Step = {
   label: string
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index c6e1a63bd3..1d26877b77 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { FileItem } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -14,7 +15,6 @@ import useTheme from '@/hooks/use-theme'
 import { upload } from '@/service/base'
 import { useFileUploadConfig } from '@/service/use-common'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   file: FileItem | undefined
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
index 08956e3224..88767d628f 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail, ChunkingMode } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
   RiCollapseDiagonalLine,
@@ -10,7 +11,6 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { formatTime } from '@/utils/time'
 import ActionButtons from './common/action-buttons'
@@ -74,7 +74,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
 
   return (
     <div className="flex h-full flex-col">
-      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pr-4 pl-6' : 'pt-3 pr-3 pl-4')}>
         <div className="flex flex-col">
           <div className="system-xl-semibold text-text-primary">{t('segment.editChildChunk', { ns: 'datasetDocuments' })}</div>
           <div className="flex items-center gap-x-2">
@@ -96,7 +96,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
                 loading={loading}
                 isChildChunk={true}
               />
-              <Divider type="vertical" className="ml-4 mr-2 h-3.5 bg-divider-regular" />
+              <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
           <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
@@ -108,7 +108,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
         </div>
       </div>
       <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+        <div className={cn('h-full overflow-hidden break-all whitespace-pre-line', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={docForm}
             question={content}
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
index 6860966fc1..05d1294d2a 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { EditSlice } from '../../../formatted-text/flavours/edit-slice'
 import { FormattedText } from '../../../formatted-text/formatted'
@@ -150,15 +150,15 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
     <div className={cn(
       'flex flex-col',
       contentOpacity,
-      isParagraphMode ? 'pb-2 pt-1' : 'grow px-3',
+      isParagraphMode ? 'pt-1 pb-2' : 'grow px-3',
       isFullDocMode && isLoading && 'overflow-y-hidden',
     )}
     >
       {isFullDocMode && <Divider type="horizontal" className="my-1 h-px bg-divider-subtle" />}
-      <div className={cn('flex items-center justify-between', isFullDocMode && 'sticky -top-2 left-0 bg-background-default pb-3 pt-2')}>
+      <div className={cn('flex items-center justify-between', isFullDocMode && 'sticky -top-2 left-0 bg-background-default pt-2 pb-3')}>
         <div
           className={cn(
-            'flex h-7 items-center rounded-lg pl-1 pr-3',
+            'flex h-7 items-center rounded-lg pr-3 pl-1',
             isParagraphMode && 'cursor-pointer',
             isParagraphMode && collapsed && 'bg-dataset-child-chunk-expand-btn-bg',
             isFullDocMode && 'pl-0',
@@ -174,7 +174,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
           <button
             type="button"
             className={cn(
-              'system-xs-semibold-uppercase px-1.5 py-1 text-components-button-secondary-accent-text',
+              'px-1.5 py-1 system-xs-semibold-uppercase text-components-button-secondary-accent-text',
               hoverVisibleClass,
               isFullDocMode && isLoading && 'text-components-button-secondary-accent-text-disabled',
             )}
diff --git a/web/app/components/datasets/documents/detail/completed/common/add-another.tsx b/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
index f6255dc96c..253b9bd7b1 100644
--- a/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import { cn } from '@/utils/classnames'
 
 type AddAnotherProps = {
   className?: string
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 5ecf95b59c..5912907765 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine, RiDownload2Line, RiDraftLine, RiRefreshLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -15,8 +15,8 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CE_EDITION } from '@/config'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'batchAction'
 type IBatchActionProps = {
@@ -62,7 +62,7 @@ const BatchAction: FC<IBatchActionProps> = ({
   }
   return (
     <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
-      <div className="pointer-events-auto flex items-center gap-x-1 radius-lg border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
+      <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
         <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
           <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
             {selectedIds.length}
diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index f55b403e57..84dc1feeba 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -1,10 +1,10 @@
 import type { ComponentProps, FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Markdown } from '@/app/components/base/markdown'
 import { ChunkingMode } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 
 type IContentProps = ComponentProps<'textarea'>
 
@@ -125,7 +125,7 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
         containerRef={containerRef}
         labelRef={labelRef}
       />
-      <div className="mb-1 mt-6 text-xs font-medium text-text-tertiary">ANSWER</div>
+      <div className="mt-6 mb-1 text-xs font-medium text-text-tertiary">ANSWER</div>
       <AutoResizeTextArea
         className="text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]"
         value={answer}
@@ -185,7 +185,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
 
   return (
     <Textarea
-      className="body-md-regular h-full w-full pb-6 tracking-[-0.07px] text-text-secondary caret-[#295EFF]"
+      className="h-full w-full pb-6 body-md-regular tracking-[-0.07px] text-text-secondary caret-[#295EFF]"
       value={question}
       placeholder={t('segment.contentPlaceholder', { ns: 'datasetDocuments' }) || ''}
       onChange={e => onQuestionChange(e.target.value)}
diff --git a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
index 4bf71de89c..47b381e0ff 100644
--- a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import { cn } from '@/utils/classnames'
 import { useSegmentListContext } from '..'
 
 type DrawerProps = {
diff --git a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
index de817b8d07..01cc264a76 100644
--- a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import Drawer from './drawer'
 
 type IFullScreenDrawerProps = {
@@ -28,7 +28,7 @@ const FullScreenDrawer = ({
       panelClassName={cn(
         fullScreen
           ? 'w-full'
-          : 'w-[568px] pb-2 pr-2 pt-16',
+          : 'w-[568px] pt-16 pr-2 pb-2',
       )}
       panelContentClassName={cn(
         'bg-components-panel-bg',
diff --git a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
index 94a0702640..df700d67a5 100644
--- a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { SegmentDetailModel } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import TagInput from '@/app/components/base/tag-input'
-import { cn } from '@/utils/classnames'
 
 type IKeywordsProps = {
   segInfo?: Partial<SegmentDetailModel> & { id: string }
diff --git a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
index e6129c806d..a35f6e9140 100644
--- a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { Chunk } from '@/app/components/base/icons/src/vender/knowledge'
-import { cn } from '@/utils/classnames'
 
 type ISegmentIndexTagProps = {
   positionId?: string | number
diff --git a/web/app/components/datasets/documents/detail/completed/common/summary-label.tsx b/web/app/components/datasets/documents/detail/completed/common/summary-label.tsx
index 78d83cf1e4..859f08d3d8 100644
--- a/web/app/components/datasets/documents/detail/completed/common/summary-label.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/summary-label.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type SummaryLabelProps = {
   summary?: string
@@ -14,7 +14,7 @@ const SummaryLabel = ({
 
   return (
     <div className={cn('space-y-1', className)}>
-      <div className="system-xs-medium-uppercase mt-2 flex items-center justify-between text-text-tertiary">
+      <div className="mt-2 flex items-center justify-between system-xs-medium-uppercase text-text-tertiary">
         {t('segment.summary', { ns: 'datasetDocuments' })}
         <div className="ml-2 h-px grow bg-divider-regular"></div>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/summary-text.tsx b/web/app/components/datasets/documents/detail/completed/common/summary-text.tsx
index 8eaf3b7bf5..60217355ad 100644
--- a/web/app/components/datasets/documents/detail/completed/common/summary-text.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/summary-text.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
-import { cn } from '@/utils/classnames'
 
 type SummaryTextProps = {
   value?: string
@@ -20,7 +20,7 @@ const SummaryText = ({
       <div className="system-xs-medium-uppercase text-text-tertiary">{t('segment.summary', { ns: 'datasetDocuments' })}</div>
       <Textarea
         className={cn(
-          'body-sm-regular w-full resize-none bg-transparent leading-6 text-text-secondary outline-hidden',
+          'w-full resize-none bg-transparent body-sm-regular leading-6 text-text-secondary outline-hidden',
         )}
         placeholder={t('segment.summaryPlaceholder', { ns: 'datasetDocuments' })}
         minRows={1}
diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
index f78cbf1c3f..98c7df7fca 100644
--- a/web/app/components/datasets/documents/detail/completed/common/tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 const Tag = ({ text, className }: { text: string, className?: string }) => {
   return (
diff --git a/web/app/components/datasets/documents/detail/completed/components/segment-list-content.tsx b/web/app/components/datasets/documents/detail/completed/components/segment-list-content.tsx
index 78159a5cf6..116ba38856 100644
--- a/web/app/components/datasets/documents/detail/completed/components/segment-list-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/components/segment-list-content.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import ChildSegmentList from '../child-segment-list'
 import SegmentCard from '../segment-card'
 import SegmentList from '../segment-list'
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index c8bad5d2ec..68efea843b 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail, SegmentUpdater } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import { ChunkingMode } from '@/models/datasets'
 import { useParams } from '@/next/navigation'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { useDocumentContext } from '../context'
 import ActionButtons from './common/action-buttons'
@@ -88,13 +88,13 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
 
   return (
     <div className="flex h-full flex-col">
-      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pr-4 pl-6' : 'pt-3 pr-3 pl-4')}>
         <div className="flex flex-col">
-          <div className="text-text-primary system-xl-semibold">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
+          <div className="system-xl-semibold text-text-primary">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChildChunk', { ns: 'datasetDocuments' }) as string} />
             <Dot />
-            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
+            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">
@@ -108,7 +108,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
                 actionType="add"
                 isChildChunk={true}
               />
-              <Divider type="vertical" className="ml-4 mr-2 h-3.5 bg-divider-regular" />
+              <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
           <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
@@ -120,7 +120,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
         </div>
       </div>
       <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+        <div className={cn('h-full overflow-hidden break-all whitespace-pre-line', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={ChunkingMode.parentChild}
             question={content}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index 4843b61e6b..8bb818acb2 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { SegmentListContextValue } from '..'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { Markdown } from '@/app/components/base/markdown'
-import { cn } from '@/utils/classnames'
 import { useSegmentListContext } from '..'
 
 type ChunkContentProps = {
@@ -29,7 +29,7 @@ const ChunkContent: FC<ChunkContentProps> = ({
     return (
       <div className={className}>
         <div className="flex gap-x-1">
-          <div className="w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary">Q</div>
+          <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">Q</div>
           <Markdown
             className={cn('body-md-regular text-text-secondary', isCollapsed ? 'line-clamp-2' : 'line-clamp-20')}
             content={content}
@@ -37,7 +37,7 @@ const ChunkContent: FC<ChunkContentProps> = ({
           />
         </div>
         <div className="flex gap-x-1">
-          <div className="w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary">A</div>
+          <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">A</div>
           <Markdown
             className={cn('body-md-regular text-text-secondary', isCollapsed ? 'line-clamp-2' : 'line-clamp-20')}
             content={answer}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index df35b9b5f3..31d894f109 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
@@ -18,7 +19,6 @@ import {
 } from '@/app/components/base/ui/alert-dialog'
 import ImageList from '@/app/components/datasets/common/image-list'
 import { ChunkingMode } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { isAfter } from '@/utils/time'
 import StatusItem from '../../../status-item'
@@ -177,7 +177,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                 <div className="flex items-center">
                   <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
                   {embeddingAvailable && (
-                    <div className="absolute -top-2 -right-2.5 z-20 hidden items-center gap-x-0.5 radius-lg border-[0.5px]
+                    <div className="absolute -top-2 -right-2.5 z-20 hidden items-center gap-x-0.5 rounded-[10px] border-[0.5px]
                       border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-md backdrop-blur-[5px] group-hover/card:flex"
                     >
                       {!archived && (
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index d999ed25e7..91174c1bf6 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { SegmentDetailModel } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
   RiCollapseDiagonalLine,
@@ -16,7 +17,6 @@ import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { ChunkingMode } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { useDocumentContext } from '../context'
 import ActionButtons from './common/action-buttons'
@@ -137,7 +137,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
     <div className="flex h-full flex-col">
       <div className={cn(
         'flex shrink-0 items-center justify-between',
-        fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3',
+        fullScreen ? 'border border-divider-subtle py-3 pr-4 pl-6' : 'pt-3 pr-3 pl-4',
       )}
       >
         <div className="flex flex-col">
@@ -158,7 +158,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
                 loading={loading}
                 showRegenerationButton={runtimeMode === 'general'}
               />
-              <Divider type="vertical" className="ml-4 mr-2 h-3.5 bg-divider-regular" />
+              <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
           <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
@@ -180,7 +180,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
       )}
       >
         <div className={cn(
-          isEditMode ? 'overflow-hidden whitespace-pre-line break-all' : 'overflow-y-auto',
+          isEditMode ? 'overflow-hidden break-all whitespace-pre-line' : 'overflow-y-auto',
           fullScreen ? 'w-1/2' : 'h-0 grow',
         )}
         >
diff --git a/web/app/components/datasets/documents/detail/document-title.tsx b/web/app/components/datasets/documents/detail/document-title.tsx
index 2190338ab2..d5bf5345ae 100644
--- a/web/app/components/datasets/documents/detail/document-title.tsx
+++ b/web/app/components/datasets/documents/detail/document-title.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useRouter } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import DocumentPicker from '../../common/document-picker'
 
 type DocumentTitleProps = {
diff --git a/web/app/components/datasets/documents/detail/embedding/components/progress-bar.tsx b/web/app/components/datasets/documents/detail/embedding/components/progress-bar.tsx
index 19c6493922..881b7dc0e2 100644
--- a/web/app/components/datasets/documents/detail/embedding/components/progress-bar.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/components/progress-bar.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ProgressBarProps = {
   percent: number
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index d72b870bde..be72975099 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSourceInfo, DocumentDisplayStatus, FileItem, FullDocumentDetail, LegacyDataSourceInfo } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +17,6 @@ import { useRouter, useSearchParams } from '@/next/navigation'
 import { useDocumentDetail, useDocumentMetadata, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useCheckSegmentBatchImportProgress, useChildSegmentListKey, useSegmentBatchImport, useSegmentListKey } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
-import { cn } from '@/utils/classnames'
 import Operations from '../components/operations'
 import StatusItem from '../status-item'
 import BatchModal from './batch-modal'
@@ -195,7 +195,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
   return (
     <DocumentContext.Provider value={contextValue}>
       <div className="flex h-full flex-col bg-background-default">
-        <div className="flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pl-3 pr-4">
+        <div className="flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pr-4 pl-3">
           <button
             type="button"
             data-testid="document-detail-back-button"
@@ -270,7 +270,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
           {isDetailLoading
             ? <Loading type="app" />
             : (
-                <div className={cn('flex h-full min-w-0 grow flex-col', !embedding && isFullDocMode && 'relative pl-11 pr-11 pt-4', !embedding && !isFullDocMode && 'relative pl-5 pr-11 pt-3')}>
+                <div className={cn('flex h-full min-w-0 grow flex-col', !embedding && isFullDocMode && 'relative pt-4 pr-11 pl-11', !embedding && !isFullDocMode && 'relative pt-3 pr-11 pl-5')}>
                   {embedding
                     ? (
                         <Embedding
@@ -292,7 +292,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
               )}
           <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassName="justify-start!" footer={null}>
             <Metadata
-              className="mr-2 mt-3"
+              className="mt-3 mr-2"
               datasetId={datasetId}
               documentId={documentId}
               docDetail={docDetail}
diff --git a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
index c65fbeb886..8e3857c492 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { DocType } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Radio from '@/app/components/base/radio'
 import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import s from '../style.module.css'
 
 const TypeIcon: FC<{ iconName: string, className?: string }> = ({ iconName, className = '' }) => {
diff --git a/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx b/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
index db477cab21..3accf42a35 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC, ReactNode } from 'react'
 import type { inputType } from '@/hooks/use-metadata'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
 import Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
 import { getTextWidthWithCanvas } from '@/utils'
-import { cn } from '@/utils/classnames'
 import s from '../style.module.css'
 
 type FieldInfoProps = {
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index f7942df29e..35f3eacfc8 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { SegmentUpdater } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
 import { useParams } from '@/next/navigation'
 import { useAddSegment } from '@/service/knowledge/use-segment'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { IndexingType } from '../../create/step-two'
 import { useSegmentListContext } from './completed'
@@ -117,16 +117,16 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   return (
     <div className="flex h-full flex-col">
       <div
-        className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
+        className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pr-4 pl-6' : 'pt-3 pr-3 pl-4')}
       >
         <div className="flex flex-col">
-          <div className="text-text-primary system-xl-semibold">
+          <div className="system-xl-semibold text-text-primary">
             {t('segment.addChunk', { ns: 'datasetDocuments' })}
           </div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChunk', { ns: 'datasetDocuments' })!} />
             <Dot />
-            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
+            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">
@@ -139,7 +139,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
                 loading={loading}
                 actionType="add"
               />
-              <Divider type="vertical" className="ml-4 mr-2 h-3.5 bg-divider-regular" />
+              <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
           <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
@@ -151,7 +151,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
         </div>
       </div>
       <div className={cn('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
-        <div className={cn('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
+        <div className={cn('overflow-hidden break-all whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
           <ChunkContent
             docForm={docForm}
             question={question}
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index dbd9f0b5e5..cffeaa9263 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiArrowDownSLine,
@@ -15,7 +16,6 @@ import Popover from '@/app/components/base/popover'
 import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 import { Plan } from '@/app/components/billing/type'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 
 type ISegmentAddProps = {
   importStatus: ProcessStatus | string | undefined
@@ -71,33 +71,33 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
             bg-components-progress-bar-border px-2.5 py-2 text-components-button-secondary-accent-text
             shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
           >
-            <div className={cn('absolute left-0 top-0 z-0 h-full border-r-[1.5px] border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
+            <div className={cn('absolute top-0 left-0 z-0 h-full border-r-[1.5px] border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
             <RiLoader2Line className="mr-1 h-4 w-4 animate-spin" />
-            <span className="system-sm-medium z-10 pr-0.5">{t('list.batchModal.processing', { ns: 'datasetDocuments' })}</span>
+            <span className="z-10 pr-0.5 system-sm-medium">{t('list.batchModal.processing', { ns: 'datasetDocuments' })}</span>
           </div>
         )}
         {importStatus === ProcessStatus.COMPLETED && (
           <div className="relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]">
             <div className="inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-success">
               <CheckCircle className="mr-1 h-4 w-4" />
-              <span className="system-sm-medium pr-0.5">{t('list.batchModal.completed', { ns: 'datasetDocuments' })}</span>
+              <span className="pr-0.5 system-sm-medium">{t('list.batchModal.completed', { ns: 'datasetDocuments' })}</span>
             </div>
             <div className="m-1 inline-flex items-center">
-              <span className="system-xs-medium cursor-pointer rounded-md px-1.5 py-1 text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover" onClick={clearProcessStatus}>{t('list.batchModal.ok', { ns: 'datasetDocuments' })}</span>
+              <span className="cursor-pointer rounded-md px-1.5 py-1 system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover" onClick={clearProcessStatus}>{t('list.batchModal.ok', { ns: 'datasetDocuments' })}</span>
             </div>
-            <div className="absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-process-success-bg opacity-40" />
+            <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-process-success-bg opacity-40" />
           </div>
         )}
         {importStatus === ProcessStatus.ERROR && (
           <div className="relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]">
             <div className="inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-destructive">
               <RiErrorWarningFill className="mr-1 h-4 w-4" />
-              <span className="system-sm-medium pr-0.5">{t('list.batchModal.error', { ns: 'datasetDocuments' })}</span>
+              <span className="pr-0.5 system-sm-medium">{t('list.batchModal.error', { ns: 'datasetDocuments' })}</span>
             </div>
             <div className="m-1 inline-flex items-center">
-              <span className="system-xs-medium cursor-pointer rounded-md px-1.5 py-1 text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover" onClick={clearProcessStatus}>{t('list.batchModal.ok', { ns: 'datasetDocuments' })}</span>
+              <span className="cursor-pointer rounded-md px-1.5 py-1 system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover" onClick={clearProcessStatus}>{t('list.batchModal.ok', { ns: 'datasetDocuments' })}</span>
             </div>
-            <div className="absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-process-error-bg opacity-40" />
+            <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-process-error-bg opacity-40" />
           </div>
         )}
       </>
@@ -118,7 +118,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
         disabled={embedding}
       >
         <RiAddLine className={cn('h-4 w-4', textColor)} />
-        <span className={cn('ml-0.5 px-0.5 text-[13px] font-medium capitalize leading-[16px]', textColor)}>
+        <span className={cn('ml-0.5 px-0.5 text-[13px] leading-[16px] font-medium capitalize', textColor)}>
           {t('list.action.addButton', { ns: 'datasetDocuments' })}
         </span>
       </button>
@@ -131,7 +131,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
           <div className="w-full p-1">
             <button
               type="button"
-              className="system-md-regular flex w-full items-center rounded-lg px-2 py-1.5 text-text-secondary"
+              className="flex w-full items-center rounded-lg px-2 py-1.5 system-md-regular text-text-secondary"
               onClick={withNeedUpgradeCheck(showBatchModal)}
             >
               {t('list.action.batchAdd', { ns: 'datasetDocuments' })}
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 3e6f31b40a..aac7d1e4cf 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -2,6 +2,7 @@ import type { OperationName } from '../types'
 import type { ColorMap, IndicatorProps } from '@/app/components/header/indicator'
 import type { CommonResponse } from '@/models/common'
 import type { DocumentDisplayStatus } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useMemo } from 'react'
@@ -12,7 +13,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
-import { cn } from '@/utils/classnames'
 import s from '../style.module.css'
 import { useIndexStatus } from './hooks'
 
diff --git a/web/app/components/datasets/external-api/external-api-modal/Form.tsx b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
index cd2f02ea8b..5f1ba03bff 100644
--- a/web/app/components/datasets/external-api/external-api-modal/Form.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBookOpenLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { useDocLink } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 
 type FormProps = {
   className?: string
@@ -60,7 +60,7 @@ const Form: FC<FormProps> = React.memo(({
               href={docLink('/use-dify/knowledge/external-knowledge-api') || '/'}
               target="_blank"
               rel="noopener noreferrer"
-              className="body-xs-regular flex items-center text-text-accent"
+              className="flex items-center body-xs-regular text-text-accent"
             >
               <RiBookOpenLine className="mr-1 h-3 w-3 text-text-accent" />
               {t('externalAPIPanelDocumentation', { ns: 'dataset' })}
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index 7d240d0820..93ccdd3c4e 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiBookOpenLine,
@@ -11,7 +12,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
-import { cn } from '@/utils/classnames'
 import ExternalKnowledgeAPICard from '../external-knowledge-api-card'
 
 type ExternalAPIPanelProps = {
diff --git a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
index 43d20827be..35d6172028 100644
--- a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
-import { cn } from '@/utils/classnames'
 
 type RetrievalSettingsProps = {
   topK: number
diff --git a/web/app/components/datasets/extra-info/api-access/card.tsx b/web/app/components/datasets/extra-info/api-access/card.tsx
index eee586ff8e..9679efefda 100644
--- a/web/app/components/datasets/extra-info/api-access/card.tsx
+++ b/web/app/components/datasets/extra-info/api-access/card.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine, RiBookOpenLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -9,7 +10,6 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
 import Link from '@/next/link'
 import { useDisableDatasetServiceApi, useEnableDatasetServiceApi } from '@/service/knowledge/use-dataset'
-import { cn } from '@/utils/classnames'
 
 type CardProps = {
   apiEnabled: boolean
@@ -79,7 +79,7 @@ const Card = ({
           className="flex h-8 items-center space-x-[7px] rounded-lg px-2 text-text-tertiary hover:bg-state-base-hover"
         >
           <RiBookOpenLine className="size-3.5 shrink-0" />
-          <div className="system-sm-regular grow truncate">
+          <div className="grow truncate system-sm-regular">
             {t('overview.apiInfo.doc', { ns: 'appOverview' })}
           </div>
           <RiArrowRightUpLine className="size-3.5 shrink-0" />
diff --git a/web/app/components/datasets/extra-info/api-access/index.tsx b/web/app/components/datasets/extra-info/api-access/index.tsx
index dbd16bba6c..57db1f2e9a 100644
--- a/web/app/components/datasets/extra-info/api-access/index.tsx
+++ b/web/app/components/datasets/extra-info/api-access/index.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import Card from './card'
 
 type ApiAccessProps = {
@@ -45,9 +45,9 @@ const ApiAccess = ({
           )}
           >
             <ApiAggregate className="size-4 shrink-0 text-text-secondary" />
-            {expand && <div className="system-sm-medium grow text-text-secondary">{t('appMenus.apiAccess', { ns: 'common' })}</div>}
+            {expand && <div className="grow system-sm-medium text-text-secondary">{t('appMenus.apiAccess', { ns: 'common' })}</div>}
             <Indicator
-              className={cn('shrink-0', !expand && 'absolute -right-px -top-px')}
+              className={cn('shrink-0', !expand && 'absolute -top-px -right-px')}
               color={apiEnabled ? 'green' : 'yellow'}
             />
           </div>
diff --git a/web/app/components/datasets/extra-info/service-api/index.tsx b/web/app/components/datasets/extra-info/service-api/index.tsx
index 3a46321d2d..33a6d32251 100644
--- a/web/app/components/datasets/extra-info/service-api/index.tsx
+++ b/web/app/components/datasets/extra-info/service-api/index.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import Card from './card'
 
 type ServiceApiProps = {
@@ -46,7 +46,7 @@ const ServiceApi = ({
                 apiBaseUrl ? 'green' : 'yellow'
               }
             />
-            <div className="system-sm-medium grow text-text-secondary">{t('serviceApi.title', { ns: 'dataset' })}</div>
+            <div className="grow system-sm-medium text-text-secondary">{t('serviceApi.title', { ns: 'dataset' })}</div>
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-10">
diff --git a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
index d0fcd3a6c6..2c0f08a8d0 100644
--- a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
@@ -2,10 +2,10 @@ import type { OffsetOptions } from '@floating-ui/react'
 import type { FC, ReactNode } from 'react'
 import type { SliceProps } from './type'
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useDismiss, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { useState } from 'react'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { cn } from '@/utils/classnames'
 import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared'
 
 type EditSliceProps = SliceProps<{
diff --git a/web/app/components/datasets/formatted-text/flavours/shared.tsx b/web/app/components/datasets/formatted-text/flavours/shared.tsx
index 4f68177ea3..10137d3936 100644
--- a/web/app/components/datasets/formatted-text/flavours/shared.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/shared.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 const baseStyle = 'py-[3px]'
 
@@ -16,7 +16,7 @@ export const SliceContainer: FC<SliceContainerProps> = (
     <span
       {...rest}
       ref={ref}
-      className={cn('group mr-1 select-none align-bottom text-sm', className)}
+      className={cn('group mr-1 align-bottom text-sm select-none', className)}
     />
   )
 }
@@ -35,7 +35,7 @@ export const SliceLabel: FC<SliceLabelProps> = (
     <span
       {...rest}
       ref={ref}
-      className={cn(baseStyle, 'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface', className)}
+      className={cn(baseStyle, 'bg-state-base-hover-alt px-1 text-text-tertiary uppercase group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface', className)}
     >
       <span className={cn('text-nowrap', labelInnerClassName)}>
         {children}
@@ -58,7 +58,7 @@ export const SliceContent: FC<SliceContentProps> = (
     <span
       {...rest}
       ref={ref}
-      className={cn(baseStyle, 'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary', className)}
+      className={cn(baseStyle, 'bg-state-base-hover px-1 leading-7 break-all whitespace-pre-line group-hover:bg-state-accent-hover-alt group-hover:text-text-primary', className)}
     >
       {children}
     </span>
diff --git a/web/app/components/datasets/formatted-text/formatted.tsx b/web/app/components/datasets/formatted-text/formatted.tsx
index 21036ac6f3..0938ec223d 100644
--- a/web/app/components/datasets/formatted-text/formatted.tsx
+++ b/web/app/components/datasets/formatted-text/formatted.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type FormattedTextProps = ComponentProps<'p'>
 
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index 998d4265f7..ee0d949a7e 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import type { HitTesting } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { Markdown } from '@/app/components/base/markdown'
 import Modal from '@/app/components/base/modal'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
-import { cn } from '@/utils/classnames'
 import ImageList from '../../common/image-list'
 import Dot from '../../documents/detail/completed/common/dot'
 import { SegmentIndexTag } from '../../documents/detail/completed/common/segment-index-tag'
@@ -89,14 +89,14 @@ const ChunkDetailModal = ({
             {answer && (
               <div className="break-all">
                 <div className="flex gap-x-1">
-                  <div className="w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary">Q</div>
-                  <div className={cn('body-md-regular line-clamp-20 text-text-secondary')}>
+                  <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">Q</div>
+                  <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
                     {content}
                   </div>
                 </div>
                 <div className="flex gap-x-1">
-                  <div className="w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary">A</div>
-                  <div className={cn('body-md-regular line-clamp-20 text-text-secondary')}>
+                  <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">A</div>
+                  <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
                     {answer}
                   </div>
                 </div>
@@ -115,7 +115,7 @@ const ChunkDetailModal = ({
               )}
               {showKeywords && (
                 <div className="flex flex-col gap-y-1">
-                  <div className="text-xs font-medium uppercase text-text-tertiary">{t(`${i18nPrefix}keyword`, { ns: 'datasetHitTesting' })}</div>
+                  <div className="text-xs font-medium text-text-tertiary uppercase">{t(`${i18nPrefix}keyword`, { ns: 'datasetHitTesting' })}</div>
                   <div className="flex flex-wrap gap-x-2">
                     {keywords.map(keyword => (
                       <Tag key={keyword} text={keyword} />
diff --git a/web/app/components/datasets/hit-testing/components/empty-records.tsx b/web/app/components/datasets/hit-testing/components/empty-records.tsx
index 180b45a077..110112e81c 100644
--- a/web/app/components/datasets/hit-testing/components/empty-records.tsx
+++ b/web/app/components/datasets/hit-testing/components/empty-records.tsx
@@ -6,10 +6,10 @@ const EmptyRecords = () => {
   const { t } = useTranslation()
   return (
     <div className="rounded-2xl bg-workflow-process-bg p-5">
-      <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
+      <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
         <RiHistoryLine className="h-5 w-5 text-text-tertiary" />
       </div>
-      <div className="my-2 text-[13px] font-medium leading-4 text-text-tertiary">{t('noRecentTip', { ns: 'datasetHitTesting' })}</div>
+      <div className="my-2 text-[13px] leading-4 font-medium text-text-tertiary">{t('noRecentTip', { ns: 'datasetHitTesting' })}</div>
     </div>
   )
 }
diff --git a/web/app/components/datasets/hit-testing/components/mask.tsx b/web/app/components/datasets/hit-testing/components/mask.tsx
index 4510e38430..bdab61f2f7 100644
--- a/web/app/components/datasets/hit-testing/components/mask.tsx
+++ b/web/app/components/datasets/hit-testing/components/mask.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type MaskProps = {
   className?: string
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index b2b07c9f04..cd0cfe984e 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -10,6 +10,7 @@ import type {
   Query,
 } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
   RiPlayCircleLine,
@@ -24,7 +25,6 @@ import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { RETRIEVE_METHOD } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import Textarea from './textarea'
 
 type QueryInputProps = {
@@ -203,7 +203,7 @@ const QueryInput = ({
 
   return (
     <div className={cn('relative flex h-80 shrink-0 flex-col overflow-hidden rounded-xl bg-linear-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
-      <div className="flex h-full flex-col overflow-hidden radius-lg bg-background-section-burn">
+      <div className="flex h-full flex-col overflow-hidden rounded-[10px] bg-background-section-burn">
         <div className="relative flex shrink-0 items-center justify-between p-1.5 pb-1 pl-3">
           <span className="system-sm-semibold-uppercase text-text-secondary">
             {t('input.title', { ns: 'datasetHitTesting' })}
diff --git a/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx b/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
index 7f54e6ccbf..eec34630db 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
@@ -1,9 +1,9 @@
 import type { ChangeEvent } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Corner } from '@/app/components/base/icons/src/vender/solid/shapes'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 type TextareaProps = {
   text: string
@@ -18,17 +18,17 @@ const Textarea = ({
 
   return (
     <div className={cn(
-      'relative flex-1 overflow-hidden rounded-t-[10px] border-t-[0.5px] border-components-panel-border-subtle bg-background-default px-4 pb-0 pt-3',
+      'relative flex-1 overflow-hidden rounded-t-[10px] border-t-[0.5px] border-components-panel-border-subtle bg-background-default px-4 pt-3 pb-0',
       text.length > 200 && 'border-state-destructive-active',
     )}
     >
       <textarea
-        className="system-md-regular h-full w-full resize-none border-none bg-transparent text-text-secondary caret-[#295EFF] placeholder:text-components-input-text-placeholder focus-visible:outline-hidden"
+        className="h-full w-full resize-none border-none bg-transparent system-md-regular text-text-secondary caret-[#295EFF] placeholder:text-components-input-text-placeholder focus-visible:outline-hidden"
         value={text}
         onChange={handleTextChange}
         placeholder={t('input.placeholder', { ns: 'datasetHitTesting' }) as string}
       />
-      <div className="absolute right-0 top-0 flex items-center">
+      <div className="absolute top-0 right-0 flex items-center">
         <Corner className={cn(
           'text-background-section-burn',
           text.length > 200 && 'text-util-colors-red-red-100',
@@ -40,7 +40,7 @@ const Textarea = ({
                 popupContent={t('input.countWarning', { ns: 'datasetHitTesting' })}
               >
                 <div
-                  className={cn('system-2xs-medium-uppercase bg-util-colors-red-red-100 py-1 pr-2 text-util-colors-red-red-600')}
+                  className={cn('bg-util-colors-red-red-100 py-1 pr-2 system-2xs-medium-uppercase text-util-colors-red-red-600')}
                 >
                   {`${text.length}/200`}
                 </div>
@@ -49,7 +49,7 @@ const Textarea = ({
           : (
               <div
                 className={cn(
-                  'system-2xs-medium-uppercase bg-background-section-burn py-1 pr-2 text-text-tertiary',
+                  'bg-background-section-burn py-1 pr-2 system-2xs-medium-uppercase text-text-tertiary',
                 )}
               >
                 {`${text.length}/200`}
diff --git a/web/app/components/datasets/hit-testing/components/records.tsx b/web/app/components/datasets/hit-testing/components/records.tsx
index 64adf82eef..cce831c2b5 100644
--- a/web/app/components/datasets/hit-testing/components/records.tsx
+++ b/web/app/components/datasets/hit-testing/components/records.tsx
@@ -1,10 +1,10 @@
 import type { Attachment, HitTestingRecord, Query } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiApps2Line, RiArrowDownLine, RiFocus2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useTimestamp from '@/hooks/use-timestamp'
-import { cn } from '@/utils/classnames'
 import ImageList from '../../common/image-list'
 
 type RecordsProps = {
@@ -47,11 +47,11 @@ const Records = ({
 
   return (
     <div className="grow overflow-y-auto">
-      <table className="w-full border-collapse border-0 text-[13px] leading-4 text-text-secondary ">
-        <thead className="sticky top-0 h-7 text-xs  font-medium uppercase leading-7 text-text-tertiary backdrop-blur-[5px]">
+      <table className="w-full border-collapse border-0 text-[13px] leading-4 text-text-secondary">
+        <thead className="sticky top-0 h-7 text-xs leading-7 font-medium text-text-tertiary uppercase backdrop-blur-[5px]">
           <tr>
             <td className="rounded-l-lg bg-background-section-burn pl-3">{t('table.header.queryContent', { ns: 'datasetHitTesting' })}</td>
-            <td className="w-[128px]  bg-background-section-burn pl-3">{t('table.header.source', { ns: 'datasetHitTesting' })}</td>
+            <td className="w-[128px] bg-background-section-burn pl-3">{t('table.header.source', { ns: 'datasetHitTesting' })}</td>
             <td className="w-48 rounded-r-lg bg-background-section-burn pl-3">
               <div
                 className="flex cursor-pointer items-center"
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index dd370ccd14..68e9930665 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { ExternalKnowledgeBaseHitTesting } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import Modal from '@/app/components/base/modal'
-import { cn } from '@/utils/classnames'
 import ResultItemFooter from './result-item-footer'
 import ResultItemMeta from './result-item-meta'
 
@@ -31,7 +31,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
 
       {/* Main */}
       <div className="mt-1 px-3">
-        <div className="body-md-regular line-clamp-2 break-all text-text-primary">{content}</div>
+        <div className="line-clamp-2 body-md-regular break-all text-text-primary">{content}</div>
       </div>
 
       {/* Foot */}
@@ -47,7 +47,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
         >
           <div className="mt-4 flex-1">
             <ResultItemMeta labelPrefix="Chunk" positionId={positionId} wordCount={content.length} score={score} />
-            <div className={cn('body-md-regular mt-2 break-all text-text-secondary', 'h-[min(539px,80vh)] overflow-y-auto')}>
+            <div className={cn('mt-2 body-md-regular break-all text-text-secondary', 'h-[min(539px,80vh)] overflow-y-auto')}>
               {content}
             </div>
           </div>
diff --git a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
index be22e228b7..dc017df4eb 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import Dot from '../../documents/detail/completed/common/dot'
 import { SegmentIndexTag } from '../../documents/detail/completed/common/segment-index-tag'
 import Score from './score'
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index 54bea820b7..ccf05f9f93 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import type { HitTesting } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import { Markdown } from '@/app/components/base/markdown'
 import SummaryLabel from '@/app/components/datasets/documents/detail/completed/common/summary-label'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils/extension-to-file-type'
-import { cn } from '@/utils/classnames'
 import ImageList from '../../common/image-list'
 import ChildChunkItem from './child-chunks-item'
 import ChunkDetailModal from './chunk-detail-modal'
@@ -72,7 +72,7 @@ const ResultItem = ({
         {isParentChildRetrieval && (
           <div className="mt-1">
             <div
-              className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-0.5 rounded-lg text-text-secondary', isFold && 'bg-workflow-process-bg pl-1')}
+              className={cn('inline-flex h-6 cursor-pointer items-center space-x-0.5 rounded-lg text-text-secondary select-none', isFold && 'bg-workflow-process-bg pl-1')}
               onClick={(e) => {
                 e.stopPropagation()
                 toggleFold()
diff --git a/web/app/components/datasets/hit-testing/components/score.tsx b/web/app/components/datasets/hit-testing/components/score.tsx
index ed5496740d..3cdad3f152 100644
--- a/web/app/components/datasets/hit-testing/components/score.tsx
+++ b/web/app/components/datasets/hit-testing/components/score.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   value: number | null
@@ -16,7 +16,7 @@ const Score: FC<Props> = ({
     return null
   return (
     <div className={cn('relative items-center overflow-hidden border border-components-progress-bar-border px-[5px]', besideChunkName ? 'h-[20.5px] border-l-0' : 'h-[20px] rounded-md')}>
-      <div className={cn('absolute left-0 top-0 h-full border-r-[1.5px] border-components-progress-brand-progress bg-util-colors-blue-brand-blue-brand-100', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
+      <div className={cn('absolute top-0 left-0 h-full border-r-[1.5px] border-components-progress-brand-progress bg-util-colors-blue-brand-blue-brand-100', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
       <div className={cn('relative flex h-full items-center space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
         <div className="system-2xs-medium-uppercase">score</div>
         <div className="system-xs-semibold">{value?.toFixed(2)}</div>
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index bd16324f96..ec9100bb97 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -9,6 +9,7 @@ import type {
   Query,
 } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -26,7 +27,6 @@ import {
   useExternalKnowledgeBaseHitTesting,
   useHitTesting,
 } from '@/service/knowledge/use-hit-testing'
-import { cn } from '@/utils/classnames'
 import { CardSkelton } from '../documents/detail/completed/skeleton/general-list-skeleton'
 import EmptyRecords from './components/empty-records'
 import QueryInput from './components/query-input'
@@ -74,7 +74,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
 
   const renderHitResults = (results: HitTesting[] | ExternalKnowledgeBaseHitTesting[]) => (
     <div className="flex h-full flex-col rounded-tl-2xl bg-background-body px-4 py-3">
-      <div className="mb-2 shrink-0 pl-2 font-semibold leading-6 text-text-primary">
+      <div className="mb-2 shrink-0 pl-2 leading-6 font-semibold text-text-primary">
         {t('hit.title', { ns: 'datasetHitTesting', num: results.length })}
       </div>
       <div className="grow space-y-2 overflow-y-auto">
@@ -118,7 +118,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
       <div className="flex min-w-0 flex-1 flex-col py-3">
         <div className="mb-4 flex flex-col justify-center">
           <h1 className="text-base font-semibold text-text-primary">{t('title', { ns: 'datasetHitTesting' })}</h1>
-          <p className="mt-0.5 text-[13px] font-normal leading-4 text-text-tertiary">{t('desc', { ns: 'datasetHitTesting' })}</p>
+          <p className="mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary">{t('desc', { ns: 'datasetHitTesting' })}</p>
         </div>
         <QueryInput
           key={queryInputKey}
@@ -136,7 +136,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
           hitTestingMutation={hitTestingMutation}
           externalKnowledgeBaseHitTestingMutation={externalKnowledgeBaseHitTestingMutation}
         />
-        <div className="mb-3 mt-6 text-base font-semibold text-text-primary">{t('records', { ns: 'datasetHitTesting' })}</div>
+        <div className="mt-6 mb-3 text-base font-semibold text-text-primary">{t('records', { ns: 'datasetHitTesting' })}</div>
         {isRecordsLoading && (
           <div className="flex-1"><Loading type="app" /></div>
         )}
diff --git a/web/app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx b/web/app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx
index 854f34f49c..49dcade8f3 100644
--- a/web/app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx
@@ -1,11 +1,11 @@
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiFileTextFill, RiRobot2Fill } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
-import { cn } from '@/utils/classnames'
 
 const EXTERNAL_PROVIDER = 'external'
 
@@ -35,7 +35,7 @@ const DatasetCardFooter = ({ dataset }: DatasetCardFooterProps) => {
   return (
     <div
       className={cn(
-        'flex items-center gap-x-3 px-4 pb-3 pt-2 text-text-tertiary',
+        'flex items-center gap-x-3 px-4 pt-2 pb-3 text-text-tertiary',
         !dataset.embedding_available && 'opacity-30',
       )}
     >
diff --git a/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx b/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx
index 4a76e6da1c..66349df4c9 100644
--- a/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx
@@ -1,4 +1,5 @@
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,7 +7,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 
 const EXTERNAL_PROVIDER = 'external'
 
@@ -31,7 +31,7 @@ const DocModeInfo = ({
 
   if (isExternalProvider) {
     return (
-      <div className="system-2xs-medium-uppercase flex items-center gap-x-3 text-text-tertiary">
+      <div className="flex items-center gap-x-3 system-2xs-medium-uppercase text-text-tertiary">
         <span>{t('externalKnowledgeBase', { ns: 'dataset' })}</span>
       </div>
     )
@@ -48,10 +48,10 @@ const DocModeInfo = ({
     : ''
 
   return (
-    <div className="system-2xs-medium-uppercase flex items-center gap-x-3 text-text-tertiary">
+    <div className="flex items-center gap-x-3 system-2xs-medium-uppercase text-text-tertiary">
       {!!dataset.doc_form && (
         <span
-          className="min-w-0 max-w-full truncate"
+          className="max-w-full min-w-0 truncate"
           title={t(`chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`, { ns: 'dataset' })}
         >
           {t(`chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`, { ns: 'dataset' })}
@@ -59,7 +59,7 @@ const DocModeInfo = ({
       )}
       {dataset.indexing_technique && indexingText && (
         <span
-          className="min-w-0 max-w-full truncate"
+          className="max-w-full min-w-0 truncate"
           title={indexingText}
         >
           {indexingText}
@@ -67,7 +67,7 @@ const DocModeInfo = ({
       )}
       {dataset.is_multimodal && (
         <span
-          className="min-w-0 max-w-full truncate"
+          className="max-w-full min-w-0 truncate"
           title={t('multimodal', { ns: 'dataset' })}
         >
           {t('multimodal', { ns: 'dataset' })}
@@ -108,7 +108,7 @@ const DatasetCardHeader = ({ dataset }: DatasetCardHeaderProps) => {
   )
 
   return (
-    <div className={cn('flex items-center gap-x-3 px-4 pb-2 pt-4', !dataset.embedding_available && 'opacity-30')}>
+    <div className={cn('flex items-center gap-x-3 px-4 pt-4 pb-2', !dataset.embedding_available && 'opacity-30')}>
       <div className="relative shrink-0">
         <AppIcon
           size="large"
@@ -118,19 +118,19 @@ const DatasetCardHeader = ({ dataset }: DatasetCardHeaderProps) => {
           imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
         />
         {(isShowChunkingModeIcon || isExternalProvider) && (
-          <div className="absolute -bottom-1 -right-1 z-5">
+          <div className="absolute -right-1 -bottom-1 z-5">
             <Icon className="size-4" />
           </div>
         )}
       </div>
       <div className="flex grow flex-col gap-y-1 overflow-hidden py-px">
         <div
-          className="system-md-semibold truncate text-text-secondary"
+          className="truncate system-md-semibold text-text-secondary"
           title={dataset.name}
         >
           {dataset.name}
         </div>
-        <div className="flex items-center gap-1 text-[10px] font-medium leading-[18px] text-text-tertiary">
+        <div className="flex items-center gap-1 text-[10px] leading-[18px] font-medium text-text-tertiary">
           <div className="truncate" title={dataset.author_name}>{dataset.author_name}</div>
           <div>·</div>
           <div className="truncate" title={editTimeText}>{editTimeText}</div>
diff --git a/web/app/components/datasets/list/dataset-card/components/description.tsx b/web/app/components/datasets/list/dataset-card/components/description.tsx
index 79604e92ab..44b0559eef 100644
--- a/web/app/components/datasets/list/dataset-card/components/description.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/description.tsx
@@ -1,6 +1,6 @@
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type DescriptionProps = {
   dataset: DataSet
@@ -8,7 +8,7 @@ type DescriptionProps = {
 
 const Description = ({ dataset }: DescriptionProps) => (
   <div
-    className={cn('system-xs-regular line-clamp-2 h-10 px-4 py-1 text-text-tertiary', !dataset.embedding_available && 'opacity-30')}
+    className={cn('line-clamp-2 h-10 px-4 py-1 system-xs-regular text-text-tertiary', !dataset.embedding_available && 'opacity-30')}
     title={dataset.description}
   >
     {dataset.description}
diff --git a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
index 37a73d5d8f..22ba673717 100644
--- a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
@@ -1,11 +1,11 @@
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
-import { cn } from '@/utils/classnames'
 import Operations from '../operations'
 
 type OperationsDropdownProps = {
@@ -38,7 +38,7 @@ const OperationsDropdown = ({
       <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger
           className={cn(
-            'inline-flex size-9 cursor-pointer items-center justify-center radius-lg border-[0.5px]',
+            'inline-flex size-9 cursor-pointer items-center justify-center rounded-[10px] border-[0.5px]',
             'border-components-actionbar-border bg-components-button-secondary-bg p-0 shadow-lg ring-2 shadow-shadow-shadow-5 ring-components-button-secondary-bg ring-inset',
             'transition-colors hover:border-components-actionbar-border hover:bg-state-base-hover',
             'focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden focus-visible:ring-inset',
diff --git a/web/app/components/datasets/list/dataset-card/components/tag-area.tsx b/web/app/components/datasets/list/dataset-card/components/tag-area.tsx
index 4ab51b09d5..2c8d6aa73a 100644
--- a/web/app/components/datasets/list/dataset-card/components/tag-area.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/tag-area.tsx
@@ -1,8 +1,8 @@
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import TagSelector from '@/app/components/base/tag-management/selector'
-import { cn } from '@/utils/classnames'
 
 type TagAreaProps = {
   dataset: DataSet
@@ -44,7 +44,7 @@ const TagArea = React.forwardRef<HTMLDivElement, TagAreaProps>(({
     </div>
     <div
       className={cn(
-        'absolute right-0 top-0 z-5 h-full w-20 bg-tag-selector-mask-bg group-hover:bg-tag-selector-mask-hover-bg',
+        'absolute top-0 right-0 z-5 h-full w-20 bg-tag-selector-mask-bg group-hover:bg-tag-selector-mask-hover-bg',
         isHoveringTagSelector && 'hidden',
       )}
     />
diff --git a/web/app/components/datasets/metadata/add-metadata-button.tsx b/web/app/components/datasets/metadata/add-metadata-button.tsx
index 47f50cdecc..8bf1c92023 100644
--- a/web/app/components/datasets/metadata/add-metadata-button.tsx
+++ b/web/app/components/datasets/metadata/add-metadata-button.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index aa9ff2d694..79c61469de 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -1,4 +1,5 @@
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCalendarLine,
   RiCloseCircleFill,
@@ -9,7 +10,6 @@ import { useTranslation } from 'react-i18next'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -47,7 +47,7 @@ const WrappedDatePicker = ({
         </div>
         <RiCloseCircleFill
           className={cn(
-            'hidden h-4 w-4 cursor-pointer hover:text-components-input-text-filled group-hover:block',
+            'hidden h-4 w-4 cursor-pointer group-hover:block hover:text-components-input-text-filled',
             value && 'text-text-quaternary',
           )}
           onClick={() => handleDateChange()}
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
index 20fad9769a..38b9bb29db 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { MetadataItemWithEdit } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiIndeterminateCircleLine } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import InputCombined from './input-combined'
 import Label from './label'
 
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
index 1fdf8c2ef7..32e6714656 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { MetadataItemWithEdit } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import { UpdateType } from '../types'
 import EditedBeacon from './edited-beacon'
 import InputCombined from './input-combined'
@@ -49,7 +49,7 @@ const EditMetadatabatchItem: FC<Props> = ({
         className={
           cn(
             'cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive',
-            isDeleted && 'cursor-default bg-state-destructive-hover  text-text-destructive',
+            isDeleted && 'cursor-default bg-state-destructive-hover text-text-destructive',
           )
         }
         onClick={() => onRemove(payload.id)}
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
index 87db148202..f60f2705a9 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Input from '@/app/components/base/input'
 import {
@@ -10,7 +11,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/app/components/base/ui/number-field'
-import { cn } from '@/utils/classnames'
 import Datepicker from '../base/date-picker'
 import { DataType } from '../types'
 
@@ -55,8 +55,8 @@ const InputCombined: FC<Props> = ({
               className={cn(className, 'rounded-l-md')}
             />
             <NumberFieldControls className="overflow-hidden">
-              <NumberFieldIncrement size="regular" className="pb-0 pt-0" />
-              <NumberFieldDecrement size="regular" className="pb-0 pt-0" />
+              <NumberFieldIncrement size="regular" className="pt-0 pb-0" />
+              <NumberFieldDecrement size="regular" className="pt-0 pb-0" />
             </NumberFieldControls>
           </NumberFieldGroup>
         </NumberField>
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
index edccb9a59d..337bd47ab0 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   onClear: () => void
@@ -17,12 +17,12 @@ const InputHasSetMultipleValue: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className="h-6 grow rounded-md bg-components-input-bg-normal p-0.5 text-[0]">
-      <div className={cn('inline-flex h-5 items-center space-x-0.5 rounded-[5px] border-[0.5px] border-components-panel-border bg-components-badge-white-to-dark pl-1.5 pr-0.5 shadow-xs', readOnly && 'pr-1.5')}>
+      <div className={cn('inline-flex h-5 items-center space-x-0.5 rounded-[5px] border-[0.5px] border-components-panel-border bg-components-badge-white-to-dark pr-0.5 pl-1.5 shadow-xs', readOnly && 'pr-1.5')}>
         <div className="system-xs-regular text-text-secondary">{t('metadata.batchEditMetadata.multipleValue', { ns: 'dataset' })}</div>
         {!readOnly && (
-          <div className="cursor-pointer radius-xs p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary">
+          <div className="cursor-pointer rounded-sm p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary">
             <RiCloseLine
-              className="size-3.5 "
+              className="size-3.5"
               onClick={onClear}
             />
           </div>
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
index 08f886be18..186334e511 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   isDeleted?: boolean
@@ -16,7 +16,7 @@ const Label: FC<Props> = ({
 }) => {
   return (
     <div className={cn(
-      'system-xs-medium w-[136px] shrink-0 truncate text-text-tertiary',
+      'w-[136px] shrink-0 truncate system-xs-medium text-text-tertiary',
       isDeleted && 'text-text-quaternary line-through',
       className,
     )}
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index f2abf609a2..0b0fc20ffe 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import { useBoolean, useHover } from 'ahooks'
 import * as React from 'react'
@@ -11,7 +12,6 @@ import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -21,9 +21,9 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
-import { cn } from '@/utils/classnames'
 import { getIcon } from '../utils/get-icon'
 import Field from './field'
 
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 28c4f9a2ed..6fb069dd02 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { FullDocumentDetail } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import useMetadataDocument from '../hooks/use-metadata-document'
 import InfoGroup from './info-group'
 import NoData from './no-data'
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 0b21d607bd..6447185758 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { MetadataItemWithValue } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useRouter } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import AddMetadataButton from '../add-metadata-button'
 import InputCombined from '../edit-metadata-batch/input-combined'
 import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
@@ -85,7 +85,7 @@ const InfoGroup: FC<Props> = ({
               onSave={data => onAdd?.(data)}
               onManage={handleMangeMetadata}
             />
-            {list.length > 0 && <Divider className="my-3 " bgStyle="gradient" />}
+            {list.length > 0 && <Divider className="my-3" bgStyle="gradient" />}
           </div>
         )}
         {list.map((item, i) => (
@@ -99,12 +99,12 @@ const InfoGroup: FC<Props> = ({
                       value={item.value}
                       onChange={value => onChange?.({ ...item, value })}
                     />
-                    <div className="shrink-0 cursor-pointer rounded-md p-1  text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive">
+                    <div className="shrink-0 cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive">
                       <RiDeleteBinLine className="size-4" onClick={() => onDelete?.(item)} />
                     </div>
                   </div>
                 )
-              : (<div className="system-xs-regular py-1 text-text-secondary">{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : item.value}</div>)}
+              : (<div className="py-1 system-xs-regular text-text-secondary">{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : item.value}</div>)}
           </Field>
         ))}
       </div>
diff --git a/web/app/components/datasets/preview/container.tsx b/web/app/components/datasets/preview/container.tsx
index ed63bbc8c5..742c1e2ac1 100644
--- a/web/app/components/datasets/preview/container.tsx
+++ b/web/app/components/datasets/preview/container.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type PreviewContainerProps = ComponentProps<'div'> & {
   header: ReactNode
@@ -14,9 +14,9 @@ const PreviewContainer: FC<PreviewContainerProps> = (props) => {
       <div
         {...rest}
         ref={ref}
-        className={cn('flex h-full w-full flex-col rounded-tl-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5')}
+        className={cn('flex h-full w-full flex-col rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5')}
       >
-        <header className="border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4">
+        <header className="border-b border-divider-subtle pt-4 pr-4 pb-3 pl-5">
           {header}
         </header>
         <main className={cn('w-full grow overflow-y-auto px-6 py-5', mainClassName)}>
diff --git a/web/app/components/datasets/preview/header.tsx b/web/app/components/datasets/preview/header.tsx
index 2da4e497a4..3646c96f49 100644
--- a/web/app/components/datasets/preview/header.tsx
+++ b/web/app/components/datasets/preview/header.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type PreviewHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
   title: string
@@ -13,7 +13,7 @@ export const PreviewHeader: FC<PreviewHeaderProps> = (props) => {
       className={cn(className)}
     >
       <div
-        className="system-2xs-semibold-uppercase mb-1 px-1 uppercase text-text-accent"
+        className="mb-1 px-1 system-2xs-semibold-uppercase text-text-accent uppercase"
       >
         {title}
       </div>
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 422851be24..acfca2bbbc 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -2,6 +2,7 @@
 import type { MouseEventHandler } from 'react'
 import type { AppIconSelection } from '../../base/app-icon-picker'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useRef, useState } from 'react'
@@ -12,7 +13,6 @@ import Textarea from '@/app/components/base/textarea'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { updateDatasetSetting } from '@/service/datasets'
-import { cn } from '@/utils/classnames'
 import AppIcon from '../../base/app-icon'
 import AppIconPicker from '../../base/app-icon-picker'
 
diff --git a/web/app/components/datasets/settings/index-method/index.tsx b/web/app/components/datasets/settings/index-method/index.tsx
index a50cc92e32..7e925b869c 100644
--- a/web/app/components/datasets/settings/index-method/index.tsx
+++ b/web/app/components/datasets/settings/index-method/index.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useHover } from 'ahooks'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { IndexingType } from '../../create/step-two'
 import { EffectColor } from '../chunk-structure/types'
 import OptionCard from '../option-card'
diff --git a/web/app/components/datasets/settings/option-card.tsx b/web/app/components/datasets/settings/option-card.tsx
index d40a72ca44..1d27925217 100644
--- a/web/app/components/datasets/settings/option-card.tsx
+++ b/web/app/components/datasets/settings/option-card.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import { cn } from '@/utils/classnames'
 import { ArrowShape } from '../../base/icons/src/vender/knowledge'
 import { EffectColor } from './chunk-structure/types'
 
@@ -70,7 +70,7 @@ const OptionCard = <T,>({
         {
           effectColor && showEffectColor && (
             <div className={cn(
-              'absolute left-[-2px] top-[-2px] h-14 w-14 rounded-full blur-[80px]',
+              'absolute top-[-2px] left-[-2px] h-14 w-14 rounded-full blur-[80px]',
               `${HEADER_EFFECT_MAP[effectColor]}`,
             )}
             />
@@ -112,7 +112,7 @@ const OptionCard = <T,>({
       {
         !!(children && showChildren) && (
           <div className="relative rounded-b-xl bg-components-panel-bg p-4">
-            <ArrowShape className="absolute left-[14px] top-[-11px] size-4 text-components-panel-bg" />
+            <ArrowShape className="absolute top-[-11px] left-[14px] size-4 text-components-panel-bg" />
             {children}
           </div>
         )
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index cdf13e4b32..a7182d8f79 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -1,4 +1,5 @@
 import type { Member } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiGroup2Line, RiLock2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
@@ -13,7 +14,6 @@ import {
 import { Avatar } from '@/app/components/base/ui/avatar'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { DatasetPermission } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import MemberItem from './member-item'
 import Item from './permission-item'
 
@@ -108,7 +108,7 @@ const PermissionSelector = ({
                   <div className="flex size-6 shrink-0 items-center justify-center">
                     <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="xs" />
                   </div>
-                  <div className="system-sm-regular grow p-1 text-components-input-text-filled">
+                  <div className="grow p-1 system-sm-regular text-components-input-text-filled">
                     {t('form.permissionsOnlyMe', { ns: 'datasetSettings' })}
                   </div>
                 </>
@@ -120,7 +120,7 @@ const PermissionSelector = ({
                   <div className="flex size-6 shrink-0 items-center justify-center">
                     <RiGroup2Line className="size-4 text-text-secondary" />
                   </div>
-                  <div className="system-sm-regular grow p-1 text-components-input-text-filled">
+                  <div className="grow p-1 system-sm-regular text-components-input-text-filled">
                     {t('form.permissionsAllMember', { ns: 'datasetSettings' })}
                   </div>
                 </>
@@ -145,13 +145,13 @@ const PermissionSelector = ({
                           <Avatar
                             avatar={selectedMembers[0].avatar_url}
                             name={selectedMembers[0].name}
-                            className="absolute left-0 top-0 z-0"
+                            className="absolute top-0 left-0 z-0"
                             size="xxs"
                           />
                           <Avatar
                             avatar={selectedMembers[1].avatar_url}
                             name={selectedMembers[1].name}
-                            className="absolute bottom-0 right-0 z-10"
+                            className="absolute right-0 bottom-0 z-10"
                             size="xxs"
                           />
                         </>
@@ -160,7 +160,7 @@ const PermissionSelector = ({
                   </div>
                   <div
                     title={selectedMemberNames}
-                    className="system-sm-regular grow truncate p-1 text-components-input-text-filled"
+                    className="grow truncate p-1 system-sm-regular text-components-input-text-filled"
                   >
                     {selectedMemberNames}
                   </div>
@@ -212,8 +212,8 @@ const PermissionSelector = ({
               />
             </div>
             {isPartialMembers && (
-              <div className="max-h-[360px] overflow-y-auto border-t border-divider-regular pb-1 pl-1 pr-1">
-                <div className="sticky left-0 top-0 z-10 bg-components-panel-on-panel-item-bg p-2 pb-1">
+              <div className="max-h-[360px] overflow-y-auto border-t border-divider-regular pr-1 pb-1 pl-1">
+                <div className="sticky top-0 left-0 z-10 bg-components-panel-on-panel-item-bg p-2 pb-1">
                   <Input
                     showLeftIcon
                     showClearIcon
@@ -247,7 +247,7 @@ const PermissionSelector = ({
                   ))}
                   {
                     !showMe && filteredMemberList.length === 0 && (
-                      <div className="system-xs-regular flex items-center justify-center whitespace-pre-wrap px-1 py-6 text-center text-text-tertiary">
+                      <div className="flex items-center justify-center px-1 py-6 text-center system-xs-regular whitespace-pre-wrap text-text-tertiary">
                         {t('form.onSearchResults', { ns: 'datasetSettings' })}
                       </div>
                     )
diff --git a/web/app/components/datasets/settings/permission-selector/member-item.tsx b/web/app/components/datasets/settings/permission-selector/member-item.tsx
index a28ba7ff74..52afd410f1 100644
--- a/web/app/components/datasets/settings/permission-selector/member-item.tsx
+++ b/web/app/components/datasets/settings/permission-selector/member-item.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type MemberItemProps = {
   leftIcon: React.ReactNode
@@ -24,12 +24,12 @@ const MemberItem = ({
 
   return (
     <div
-      className="flex cursor-pointer items-center gap-2 rounded-lg py-1 pl-2 pr-[10px] hover:bg-state-base-hover"
+      className="flex cursor-pointer items-center gap-2 rounded-lg py-1 pr-[10px] pl-2 hover:bg-state-base-hover"
       onClick={onClick}
     >
       {leftIcon}
       <div className="grow">
-        <div className="system-sm-medium truncate text-text-secondary">
+        <div className="truncate system-sm-medium text-text-secondary">
           {name}
           {isMe && (
             <span className="system-xs-regular text-text-tertiary">
@@ -37,7 +37,7 @@ const MemberItem = ({
             </span>
           )}
         </div>
-        <div className="system-xs-regular truncate text-text-tertiary">{email}</div>
+        <div className="truncate system-xs-regular text-text-tertiary">{email}</div>
       </div>
       {isSelected && <RiCheckLine className={cn('size-4 shrink-0 text-text-accent', isMe && 'opacity-30')} />}
     </div>
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 8424655752..59d6c94e5d 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Children,
   createContext,
@@ -9,7 +10,6 @@ import {
   useRef,
   useState,
 } from 'react'
-import { cn } from '@/utils/classnames'
 import { writeTextToClipboard } from '@/utils/clipboard'
 import { Tag } from './tag'
 
@@ -50,9 +50,9 @@ function CopyButton({ code }: { code: string }) {
   return (
     <button
       type="button"
-      className={cn('group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur-sm transition focus:opacity-100 group-hover:opacity-100', copied
-        ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-        : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5')}
+      className={cn('group/button absolute top-1.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100', copied
+        ? 'bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset'
+        : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5')}
       onClick={() => {
         writeTextToClipboard(code).then(() => {
           setCopyCount(count => count + 1)
@@ -81,7 +81,7 @@ function CodePanelHeader({ tag, label }: { tag?: string, label?: string }) {
     return null
 
   return (
-    <div className="border-b-white/7.5 bg-white/2.5 dark:bg-white/1 flex h-9 items-center gap-2 border-y border-t-transparent bg-zinc-900 px-4 dark:border-b-white/5">
+    <div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
       {tag && (
         <div className="dark flex">
           <Tag variant="small">{tag}</Tag>
@@ -116,7 +116,7 @@ function CodePanel({ tag, label, children, targetCode }: ICodePanelProps) {
   const child = Children.toArray(children)[0] as ReactElement<any>
 
   return (
-    <div className="dark:bg-white/2.5 group">
+    <div className="group dark:bg-white/2.5">
       <CodePanelHeader
         tag={tag}
         label={label}
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index 2f6a069b45..2ebce59b54 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { ComponentType } from 'react'
 import type { App, AppSSO } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useLocale } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { getDocLanguage } from '@/i18n-config/language'
 import { AppModeEnum, Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useDocToc } from './hooks/use-doc-toc'
 import TemplateEn from './template/template.en.mdx'
 import TemplateJa from './template/template.ja.mdx'
@@ -78,7 +78,7 @@ const Doc = ({ appDetail }: IDocProps) => {
 
   return (
     <div className="flex">
-      <div className={`fixed right-20 top-32 z-10 transition-all duration-150 ease-out ${isTocExpanded ? 'w-[280px]' : 'w-11'}`}>
+      <div className={`fixed top-32 right-20 z-10 transition-all duration-150 ease-out ${isTocExpanded ? 'w-[280px]' : 'w-11'}`}>
         <TocPanel
           toc={toc}
           activeSection={activeSection}
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index 11d7b0eed3..d19e10b35b 100644
--- a/web/app/components/develop/md.tsx
+++ b/web/app/components/develop/md.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { PropsWithChildren } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type IChildrenProps = {
   children: React.ReactNode
@@ -45,7 +45,7 @@ export const Heading = function H2({
     <>
       <span id={name?.replace(/^#/, '')} className="relative -top-28" />
       <div className="flex items-center gap-x-3">
-        <span className={`rounded-lg px-1.5 font-mono text-[0.625rem] font-semibold leading-6 ring-1 ring-inset ${style}`}>{method}</span>
+        <span className={`rounded-lg px-1.5 font-mono text-[0.625rem] leading-6 font-semibold ring-1 ring-inset ${style}`}>{method}</span>
         {/* <span className="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600"></span> */}
         <span className="font-mono text-xs text-zinc-400">{url}</span>
       </div>
diff --git a/web/app/components/develop/tag.tsx b/web/app/components/develop/tag.tsx
index a0d7b3088c..3178046338 100644
--- a/web/app/components/develop/tag.tsx
+++ b/web/app/components/develop/tag.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 const variantStyles = {
   medium: 'rounded-lg px-1.5 ring-1 ring-inset',
@@ -53,7 +53,7 @@ export function Tag({
 }: ITagProps) {
   return (
     <span
-      className={cn('font-mono text-[0.625rem] font-semibold leading-6', variantStyles[variant], colorStyles[color][variant])}
+      className={cn('font-mono text-[0.625rem] leading-6 font-semibold', variantStyles[variant], colorStyles[color][variant])}
     >
       {children}
     </span>
diff --git a/web/app/components/develop/toc-panel.tsx b/web/app/components/develop/toc-panel.tsx
index c2b59c6e9e..c9087a7f25 100644
--- a/web/app/components/develop/toc-panel.tsx
+++ b/web/app/components/develop/toc-panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { TocItem } from './hooks/use-doc-toc'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type TocPanelProps = {
   toc: TocItem[]
@@ -30,7 +30,7 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
   return (
     <nav className="toc flex max-h-[calc(100vh-150px)] w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-background-default-hover shadow-xl">
       <div className="relative z-10 flex items-center justify-between border-b border-components-panel-border-subtle bg-background-default-hover px-4 py-2.5">
-        <span className="text-xs font-medium uppercase tracking-wide text-text-tertiary">
+        <span className="text-xs font-medium tracking-wide text-text-tertiary uppercase">
           {t('develop.toc', { ns: 'appApi' })}
         </span>
         <button
@@ -43,8 +43,8 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
         </button>
       </div>
 
-      <div className="from-components-panel-border-subtle/20 pointer-events-none absolute left-0 right-0 top-[41px] z-10 h-2 bg-linear-to-b to-transparent"></div>
-      <div className="pointer-events-none absolute left-0 right-0 top-[43px] z-10 h-3 bg-linear-to-b from-background-default-hover to-transparent"></div>
+      <div className="pointer-events-none absolute top-[41px] right-0 left-0 z-10 h-2 bg-linear-to-b from-components-panel-border-subtle/20 to-transparent"></div>
+      <div className="pointer-events-none absolute top-[43px] right-0 left-0 z-10 h-3 bg-linear-to-b from-background-default-hover to-transparent"></div>
 
       <div className="relative flex-1 overflow-y-auto px-3 py-3 pt-1">
         {toc.length === 0
@@ -88,7 +88,7 @@ const TocPanel = ({ toc, activeSection, isTocExpanded, onToggle, onItemClick }:
             )}
       </div>
 
-      <div className="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-4 rounded-b-xl bg-linear-to-t from-background-default-hover to-transparent"></div>
+      <div className="pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-4 rounded-b-xl bg-linear-to-t from-background-default-hover to-transparent"></div>
     </nav>
   )
 }
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index ac2397f6ab..d88eddc2cf 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -2,13 +2,13 @@
 import type { App } from '@/models/explore'
 import type { TryAppSelection } from '@/types/try-app'
 import { PlusIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiInformation2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { AppTypeIcon } from '../../app/type-selector'
 
 export type AppCardProps = {
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index f52fa44c4f..b0e20c531a 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -3,6 +3,7 @@
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { App } from '@/models/explore'
 import type { TryAppSelection } from '@/types/try-app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import { useQueryState } from 'nuqs'
 import * as React from 'react'
@@ -25,7 +26,6 @@ import {
 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'
diff --git a/web/app/components/explore/banner/banner-item.tsx b/web/app/components/explore/banner/banner-item.tsx
index 9082e2abe8..46b2f4a9a2 100644
--- a/web/app/components/explore/banner/banner-item.tsx
+++ b/web/app/components/explore/banner/banner-item.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
 import type { FC } from 'react'
 import type { Banner } from '@/models/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { useCarousel } from '@/app/components/base/carousel'
-import { cn } from '@/utils/classnames'
 import { IndicatorButton } from './indicator-button'
 
 type BannerItemProps = {
@@ -130,28 +130,28 @@ export const BannerItem: FC<BannerItemProps> = ({
     >
       {/* Left content area */}
       <div className="min-w-0 flex-1">
-        <div className="flex h-full flex-col gap-3 py-6 pl-8 pr-0">
+        <div className="flex h-full flex-col gap-3 py-6 pr-0 pl-8">
           {/* Text section */}
           <div className="flex min-h-24 flex-wrap items-end gap-1 py-1">
             {/* Title area */}
             <div
               ref={textAreaRef}
-              className="flex min-w-[480px] max-w-[680px] flex-[1_0_0] flex-col pr-4"
+              className="flex max-w-[680px] min-w-[480px] flex-[1_0_0] flex-col pr-4"
               style={responsiveStyle}
             >
-              <p className="title-4xl-semi-bold line-clamp-1 text-dify-logo-blue">
+              <p className="line-clamp-1 title-4xl-semi-bold text-dify-logo-blue">
                 {category}
               </p>
-              <p className="title-4xl-semi-bold line-clamp-2 text-dify-logo-black">
+              <p className="line-clamp-2 title-4xl-semi-bold text-dify-logo-black">
                 {title}
               </p>
             </div>
             {/* Description area */}
             <div
-              className="min-w-60 max-w-[600px] flex-[1_0_0] self-end overflow-hidden py-1 pr-4"
+              className="max-w-[600px] min-w-60 flex-[1_0_0] self-end overflow-hidden py-1 pr-4"
               style={responsiveStyle}
             >
-              <p className="body-sm-regular line-clamp-4 overflow-hidden text-text-tertiary">
+              <p className="line-clamp-4 overflow-hidden body-sm-regular text-text-tertiary">
                 {description}
               </p>
             </div>
@@ -161,7 +161,7 @@ export const BannerItem: FC<BannerItemProps> = ({
           <div className="flex items-center gap-1">
             {/* View more button */}
             <div
-              className="flex min-w-[480px] max-w-[680px] flex-[1_0_0] items-center gap-[6px] py-1 pr-8"
+              className="flex max-w-[680px] min-w-[480px] flex-[1_0_0] items-center gap-[6px] py-1 pr-8"
               style={viewMoreStyle}
             >
               <div className="flex h-4 w-4 items-center justify-center rounded-full bg-text-accent p-[2px]">
@@ -198,7 +198,7 @@ export const BannerItem: FC<BannerItemProps> = ({
       </div>
 
       {/* Right image area */}
-      <div className="absolute right-0 top-0 flex h-full items-center p-2">
+      <div className="absolute top-0 right-0 flex h-full items-center p-2">
         <img
           src={imgSrc}
           alt={title}
diff --git a/web/app/components/explore/banner/indicator-button.tsx b/web/app/components/explore/banner/indicator-button.tsx
index f813ee1f4b..23595f70b9 100644
--- a/web/app/components/explore/banner/indicator-button.tsx
+++ b/web/app/components/explore/banner/indicator-button.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 type IndicatorButtonProps = {
   index: number
@@ -77,7 +77,7 @@ export const IndicatorButton: FC<IndicatorButtonProps> = ({
     <button
       onClick={handleClick}
       className={cn(
-        'system-2xs-semibold-uppercase relative flex h-[18px] w-[20px] items-center justify-center rounded-[7px] border border-divider-subtle p-[2px] text-center transition-colors',
+        'relative flex h-[18px] w-[20px] items-center justify-center rounded-[7px] border border-divider-subtle p-[2px] text-center system-2xs-semibold-uppercase transition-colors',
         isActive
           ? 'bg-text-primary text-components-panel-on-panel-item-bg'
           : 'bg-components-panel-on-panel-item-bg text-text-tertiary hover:text-text-secondary',
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index bcc1451253..de0f5967e4 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { AppCategory } from '@/models/explore'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import exploreI18n from '@/i18n/en-US/explore.json'
-import { cn } from '@/utils/classnames'
 
 type ICategoryProps = {
   className?: string
@@ -29,7 +29,7 @@ const Category: FC<ICategoryProps> = ({
   const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
 
   const itemClassName = (isSelected: boolean) => cn(
-    'system-sm-medium flex h-7 cursor-pointer items-center rounded-lg border border-transparent  px-3 text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active',
+    'flex h-7 cursor-pointer items-center rounded-lg border border-transparent px-3 system-sm-medium text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active',
     isSelected && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text-active shadow-xs',
   )
 
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index a0f59c269d..94eed731fa 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -8,9 +9,8 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
-import { cn } from '@/utils/classnames'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { Pin02 } from '../../base/icons/src/vender/line/general'
 import s from './style.module.css'
 
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index 338f47c88f..c2156d9dec 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { AppIconType } from '@/types/app'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useHover } from 'ahooks'
 import * as React from 'react'
 import { useRef } from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 import ItemOperation from '@/app/components/explore/item-operation'
 import { useRouter } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 
 type IAppNavItemProps = {
   isMobile: boolean
@@ -46,7 +46,7 @@ export default function AppNavItem({
     <div
       ref={ref}
       key={id}
-      className={cn('system-sm-medium flex h-8 items-center justify-between rounded-lg px-2 text-sm font-normal text-components-menu-item-text mobile:justify-center mobile:px-1', isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover')}
+      className={cn('flex h-8 items-center justify-between rounded-lg px-2 system-sm-medium text-sm font-normal text-components-menu-item-text mobile:justify-center mobile:px-1', isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover')}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
@@ -56,7 +56,7 @@ export default function AppNavItem({
         <>
           <div className="flex w-0 grow items-center space-x-2">
             <AppIcon size="tiny" iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />
-            <div className="system-sm-regular truncate text-components-menu-item-text" title={name}>{name}</div>
+            <div className="truncate system-sm-regular text-components-menu-item-text" title={name}>{name}</div>
           </div>
           <div className="h-6 shrink-0" onClick={e => e.stopPropagation()}>
             <ItemOperation
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 5253dc71a6..85602a6bcc 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
@@ -19,7 +20,6 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Link from '@/next/link'
 import { useSelectedLayoutSegments } from '@/next/navigation'
 import { useGetInstalledApps, useUninstallApp, useUpdateAppPinStatus } from '@/service/use-explore'
-import { cn } from '@/utils/classnames'
 import Item from './app-nav-item'
 import NoApps from './no-apps'
 
@@ -96,7 +96,7 @@ const SideBar = () => {
           <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
             <span aria-hidden="true" className="i-ri-apps-fill size-3.5 text-components-avatar-shape-fill-stop-100" />
           </div>
-          {!isMobile && !isFold && <div className={cn('truncate', isDiscoverySelected ? 'text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-regular')}>{t('sidebar.title', { ns: 'explore' })}</div>}
+          {!isMobile && !isFold && <div className={cn('truncate', isDiscoverySelected ? 'system-sm-semibold text-components-menu-item-text-active' : 'system-sm-regular text-components-menu-item-text')}>{t('sidebar.title', { ns: 'explore' })}</div>}
         </Link>
       </div>
 
@@ -109,7 +109,7 @@ const SideBar = () => {
 
       {installedApps.length > 0 && (
         <div className="mt-5 flex min-h-0 flex-1 flex-col">
-          {!isMobile && !isFold && <p id={webAppsLabelId} className="mb-1.5 break-all pl-2 uppercase text-text-tertiary system-xs-medium-uppercase mobile:px-0">{t('sidebar.webApps', { ns: 'explore' })}</p>}
+          {!isMobile && !isFold && <p id={webAppsLabelId} className="mb-1.5 pl-2 system-xs-medium-uppercase break-all text-text-tertiary uppercase mobile:px-0">{t('sidebar.webApps', { ns: 'explore' })}</p>}
           {shouldUseExpandedScrollArea
             ? (
                 <div className="min-h-0 flex-1">
@@ -124,7 +124,7 @@ const SideBar = () => {
               )
             : (
                 <div
-                  className="h-full min-h-0 flex-1 space-y-0.5 overflow-y-auto overflow-x-hidden"
+                  className="h-full min-h-0 flex-1 space-y-0.5 overflow-x-hidden overflow-y-auto"
                 >
                   {installedAppItems}
                 </div>
@@ -133,11 +133,11 @@ const SideBar = () => {
       )}
 
       {!isMobile && (
-        <div className="mt-auto flex pb-3 pt-3">
+        <div className="mt-auto flex pt-3 pb-3">
           <button
             type="button"
             aria-label={isFold ? t('sidebar.expandSidebar', { ns: 'layout' }) : t('sidebar.collapseSidebar', { ns: 'layout' })}
-            className="flex size-8 items-center justify-center rounded-lg text-text-tertiary transition-colors hover:bg-state-base-hover focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-components-input-border-hover"
+            className="flex size-8 items-center justify-center rounded-lg text-text-tertiary transition-colors hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden focus-visible:ring-inset"
             onClick={toggleIsFold}
           >
             {isFold
@@ -151,11 +151,11 @@ const SideBar = () => {
 
       <AlertDialog open={showConfirm} onOpenChange={setShowConfirm}>
         <AlertDialogContent>
-          <div className="flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6">
-            <AlertDialogTitle className="w-full text-text-primary title-2xl-semi-bold">
+          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
+            <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
               {t('sidebar.delete.title', { ns: 'explore' })}
             </AlertDialogTitle>
-            <AlertDialogDescription className="w-full whitespace-pre-wrap wrap-break-word text-text-tertiary system-md-regular">
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
               {t('sidebar.delete.content', { ns: 'explore' })}
             </AlertDialogDescription>
           </div>
diff --git a/web/app/components/explore/sidebar/no-apps/index.tsx b/web/app/components/explore/sidebar/no-apps/index.tsx
index f2f406008b..eafe958684 100644
--- a/web/app/components/explore/sidebar/no-apps/index.tsx
+++ b/web/app/components/explore/sidebar/no-apps/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
 const i18nPrefix = 'sidebar.noApps'
@@ -17,8 +17,8 @@ const NoApps: FC = () => {
   return (
     <div className="rounded-xl bg-background-default-subtle p-4">
       <div className={cn('h-[35px] w-[86px] bg-contain bg-center bg-no-repeat', theme === Theme.dark ? s.dark : s.light)}></div>
-      <div className="system-sm-semibold mt-2 text-text-secondary">{t(`${i18nPrefix}.title`, { ns: 'explore' })}</div>
-      <div className="system-xs-regular my-1 text-text-tertiary">{t(`${i18nPrefix}.description`, { ns: 'explore' })}</div>
+      <div className="mt-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.title`, { ns: 'explore' })}</div>
+      <div className="my-1 system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.description`, { ns: 'explore' })}</div>
       <a className="system-xs-regular text-text-accent" target="_blank" rel="noopener noreferrer" href={docLink('/use-dify/publish/README')}>{t(`${i18nPrefix}.learnMore`, { ns: 'explore' })}</a>
     </div>
   )
diff --git a/web/app/components/explore/try-app/__tests__/index.spec.tsx b/web/app/components/explore/try-app/__tests__/index.spec.tsx
index 66f25ac16b..be6c6ea8e2 100644
--- a/web/app/components/explore/try-app/__tests__/index.spec.tsx
+++ b/web/app/components/explore/try-app/__tests__/index.spec.tsx
@@ -246,7 +246,7 @@ describe('TryApp (main index.tsx)', () => {
       await waitFor(() => {
         const buttons = document.body.querySelectorAll('button')
         const closeButton = Array.from(buttons).find(btn =>
-          btn.querySelector('svg') || btn.className.includes('radius-lg'),
+          btn.querySelector('svg') || btn.className.includes('rounded-[10px]'),
         )
         expect(closeButton).toBeInTheDocument()
 
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index de8e317a6b..441fabca82 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { TryAppInfo } from '@/service/try-app'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import useGetRequirements from './use-get-requirements'
 
 type Props = {
@@ -30,7 +30,7 @@ const RequirementIcon: FC<RequirementIconProps> = ({ iconUrl }) => {
 
   if (hasLoadError) {
     return (
-      <div className="flex size-5 items-center justify-center overflow-hidden radius-sm border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
+      <div className="flex size-5 items-center justify-center overflow-hidden rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
         <div className="i-custom-public-other-default-tool-icon size-3 text-text-tertiary" />
       </div>
     )
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index a0c2336c87..3430752cc0 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -4,6 +4,7 @@ import type {
   EmbeddedChatbotContextValue,
 } from '@/app/components/base/chat/embedded-chatbot/context'
 import type { TryAppInfo } from '@/service/try-app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiResetLeftLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -23,7 +24,6 @@ import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs
 import Tooltip from '@/app/components/base/tooltip'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { AppSourceType } from '@/service/share'
-import { cn } from '@/utils/classnames'
 import { useThemeContext } from '../../../base/chat/embedded-chatbot/theme/theme-context'
 
 type Props = {
@@ -74,7 +74,7 @@ const TryApp: FC<Props> = ({
               background={appDetail.site.icon_background}
               imageUrl={appDetail.site.icon_url}
             />
-            <div className="system-md-semibold grow truncate text-text-primary" title={appDetail.name}>{appDetail.name}</div>
+            <div className="grow truncate system-md-semibold text-text-primary" title={appDetail.name}>{appDetail.name}</div>
           </div>
           <div className="flex items-center gap-1">
             {currentConversationId && (
diff --git a/web/app/components/explore/try-app/app/text-generation.tsx b/web/app/components/explore/try-app/app/text-generation.tsx
index fc8ec95712..5a51199d86 100644
--- a/web/app/components/explore/try-app/app/text-generation.tsx
+++ b/web/app/components/explore/try-app/app/text-generation.tsx
@@ -4,6 +4,7 @@ import type { InputValueTypes, Task } from '../../../share/text-generation/types
 import type { MoreLikeThisConfig, PromptConfig, TextToSpeechConfig } from '@/models/debug'
 import type { AppData, CustomConfigValueType, SiteInfo } from '@/models/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -20,7 +21,6 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { AppSourceType } from '@/service/share'
 import { useGetTryAppParams } from '@/service/use-try-app'
 import { Resolution, TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import RunOnce from '../../../share/text-generation/run-once'
 
@@ -199,7 +199,7 @@ const TextGeneration: FC<Props> = ({
       )}
       >
         {/* Header */}
-        <div className={cn('shrink-0 space-y-4 pb-2', isPC ? ' p-8 pb-0' : 'p-4 pb-0')}>
+        <div className={cn('shrink-0 space-y-4 pb-2', isPC ? 'p-8 pb-0' : 'p-4 pb-0')}>
           <div className="flex items-center gap-3">
             <AppIcon
               size={isPC ? 'large' : 'small'}
@@ -208,7 +208,7 @@ const TextGeneration: FC<Props> = ({
               background={siteInfo.icon_background || appDefaultIconBackground}
               imageUrl={siteInfo.icon_url}
             />
-            <div className="system-md-semibold grow truncate text-text-secondary">{siteInfo.title}</div>
+            <div className="grow truncate system-md-semibold text-text-secondary">{siteInfo.title}</div>
           </div>
           {siteInfo.description && (
             <div className="system-xs-regular text-text-tertiary">{siteInfo.description}</div>
@@ -241,7 +241,7 @@ const TextGeneration: FC<Props> = ({
             className={cn(
               isShowResultPanel
                 ? 'flex items-center justify-center p-2 pt-6'
-                : 'absolute left-0 top-0 z-10 flex w-full items-center justify-center px-2 pb-[57px] pt-[3px]',
+                : 'absolute top-0 left-0 z-10 flex w-full items-center justify-center px-2 pt-[3px] pb-[57px]',
             )}
             onClick={() => {
               if (isShowResultPanel)
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 19fccc72ab..644047d06f 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -67,7 +67,7 @@ const TryApp: FC<Props> = ({
             <Button
               size="large"
               variant="tertiary"
-              className="flex size-7 items-center justify-center radius-lg p-0 text-components-button-tertiary-text"
+              className="flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text"
               onClick={onClose}
             >
               <span className="i-ri-close-line size-5" />
diff --git a/web/app/components/explore/try-app/preview/flow-app-preview.tsx b/web/app/components/explore/try-app/preview/flow-app-preview.tsx
index ba64aecfba..bb7ddfff91 100644
--- a/web/app/components/explore/try-app/preview/flow-app-preview.tsx
+++ b/web/app/components/explore/try-app/preview/flow-app-preview.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Loading from '@/app/components/base/loading'
 import WorkflowPreview from '@/app/components/workflow/workflow-preview'
 import { useGetTryAppFlowPreview } from '@/service/use-try-app'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   appId: string
diff --git a/web/app/components/goto-anything/actions/__tests__/knowledge.spec.ts b/web/app/components/goto-anything/actions/__tests__/knowledge.spec.ts
index 0d78e6cd41..55592cd487 100644
--- a/web/app/components/goto-anything/actions/__tests__/knowledge.spec.ts
+++ b/web/app/components/goto-anything/actions/__tests__/knowledge.spec.ts
@@ -5,7 +5,7 @@ vi.mock('@/service/datasets', () => ({
   fetchDatasets: vi.fn(),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: string[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/goto-anything/actions/app.tsx b/web/app/components/goto-anything/actions/app.tsx
index ce384f4019..b14d8b58fe 100644
--- a/web/app/components/goto-anything/actions/app.tsx
+++ b/web/app/components/goto-anything/actions/app.tsx
@@ -39,7 +39,7 @@ const appIcon = (app: App) => (
       imageUrl={app.icon_url}
     />
     <AppTypeIcon
-      wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 radius-xs border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
+      wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
       className="h-3 w-3"
       type={app.mode}
     />
diff --git a/web/app/components/goto-anything/actions/knowledge.tsx b/web/app/components/goto-anything/actions/knowledge.tsx
index 9531a3551f..6b3d5ca78d 100644
--- a/web/app/components/goto-anything/actions/knowledge.tsx
+++ b/web/app/components/goto-anything/actions/knowledge.tsx
@@ -1,7 +1,7 @@
 import type { ActionItem, KnowledgeSearchResult } from './types'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { fetchDatasets } from '@/service/datasets'
-import { cn } from '@/utils/classnames'
 import { Folder } from '../../base/icons/src/vender/solid/files'
 
 const EXTERNAL_PROVIDER = 'external' as const
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 442554615b..8552852b81 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { MouseEventHandler, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
@@ -19,7 +20,6 @@ import { env } from '@/env'
 import Link from '@/next/link'
 import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import AccountAbout from '../account-about'
 import GithubStar from '../github-star'
 import Indicator from '../indicator'
@@ -138,7 +138,7 @@ export default function AppSelector() {
       <DropdownMenu open={isAccountMenuOpen} onOpenChange={setIsAccountMenuOpen}>
         <DropdownMenuTrigger
           aria-label={t('account.account', { ns: 'common' })}
-          className={cn('inline-flex items-center radius-3xl p-0.5 hover:bg-background-default-dodge', isAccountMenuOpen && 'bg-background-default-dodge')}
+          className={cn('inline-flex items-center rounded-[20px] p-0.5 hover:bg-background-default-dodge', isAccountMenuOpen && 'bg-background-default-dodge')}
         >
           <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="lg" />
         </DropdownMenuTrigger>
@@ -147,18 +147,18 @@ export default function AppSelector() {
           popupClassName="w-60 max-w-80 bg-components-panel-bg-blur! py-0! backdrop-blur-xs"
         >
           <DropdownMenuGroup className="py-1">
-            <div className="mx-1 flex flex-nowrap items-center py-2 pl-3 pr-2">
+            <div className="mx-1 flex flex-nowrap items-center py-2 pr-2 pl-3">
               <div className="grow">
-                <div className="break-all text-text-primary system-md-medium">
+                <div className="system-md-medium break-all text-text-primary">
                   {userProfile.name}
                   {isEducationAccount && (
                     <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
-                      <span aria-hidden className="i-ri-graduation-cap-fill mr-1 h-3 w-3" />
+                      <span aria-hidden className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
                       <span className="system-2xs-medium">EDU</span>
                     </PremiumBadge>
                   )}
                 </div>
-                <div className="break-all text-text-tertiary system-xs-regular">{userProfile.email}</div>
+                <div className="system-xs-regular break-all text-text-tertiary">{userProfile.email}</div>
               </div>
               <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="lg" />
             </div>
@@ -202,7 +202,7 @@ export default function AppSelector() {
                   trailing={(
                     <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
                       <span aria-hidden className="i-ri-star-line size-3 shrink-0 text-text-tertiary" />
-                      <GithubStar className="text-text-tertiary system-2xs-medium-uppercase" />
+                      <GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
                     </div>
                   )}
                 />
@@ -217,7 +217,7 @@ export default function AppSelector() {
                       }}
                       trailing={(
                         <div className="flex shrink-0 items-center">
-                          <div className="mr-2 text-text-tertiary system-xs-regular">{langGeniusVersionInfo.current_version}</div>
+                          <div className="mr-2 system-xs-regular text-text-tertiary">{langGeniusVersionInfo.current_version}</div>
                           <Indicator color={langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                         </div>
                       )}
diff --git a/web/app/components/header/account-dropdown/menu-item-content.tsx b/web/app/components/header/account-dropdown/menu-item-content.tsx
index 3a5e0211ed..bf8b1e283e 100644
--- a/web/app/components/header/account-dropdown/menu-item-content.tsx
+++ b/web/app/components/header/account-dropdown/menu-item-content.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 const menuLabelClassName = 'min-w-0 grow truncate px-1 text-text-secondary system-md-regular'
 const menuLeadingIconClassName = 'size-4 shrink-0 text-text-tertiary'
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 6248a8418a..70d4384c45 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -1,5 +1,6 @@
 import type { Plan } from '@/app/components/billing/type'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 
 const WorkplaceSelector = () => {
@@ -36,10 +36,10 @@ const WorkplaceSelector = () => {
               `)}
           >
             <div className="mr-1.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px] max-[800px]:mr-0">
-              <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
+              <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle leading-6 font-semibold text-shadow-shadow-1 uppercase opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
             </div>
             <div className="flex min-w-0 items-center">
-              <div className="min-w-0 max-w-[149px] truncate text-text-secondary system-sm-medium max-[800px]:hidden">{currentWorkspace?.name}</div>
+              <div className="max-w-[149px] min-w-0 truncate system-sm-medium text-text-secondary max-[800px]:hidden">{currentWorkspace?.name}</div>
               <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-secondary" />
             </div>
           </MenuButton>
@@ -52,15 +52,15 @@ const WorkplaceSelector = () => {
                   `)}
             >
               <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg">
-                <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
-                  <span className="flex-1 text-text-tertiary system-xs-medium-uppercase">{t('userProfile.workspace', { ns: 'common' })}</span>
+                <div className="flex items-start self-stretch px-3 pt-1 pb-0.5">
+                  <span className="flex-1 system-xs-medium-uppercase text-text-tertiary">{t('userProfile.workspace', { ns: 'common' })}</span>
                 </div>
                 {workspaces.map(workspace => (
-                  <div className="flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover" key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+                  <div className="flex items-center gap-2 self-stretch rounded-lg py-1 pr-2 pl-3 hover:bg-state-base-hover" key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
                     <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]">
-                      <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{workspace?.name[0]?.toLocaleUpperCase()}</span>
+                      <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle leading-6 font-semibold text-shadow-shadow-1 uppercase opacity-90">{workspace?.name[0]?.toLocaleUpperCase()}</span>
                     </div>
-                    <div className="line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary system-md-regular">{workspace.name}</div>
+                    <div className="line-clamp-1 grow cursor-pointer overflow-hidden system-md-regular text-ellipsis text-text-secondary">{workspace.name}</div>
                     <PlanBadge plan={workspace.plan as Plan} />
                   </div>
                 ))}
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
index 29d0d9fcd3..6d8c7a769c 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
 import { useAccountIntegrates } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
 const titleClassName = `
@@ -40,8 +40,8 @@ export default function IntegrationsPage() {
               <div key={integrate.provider} className="mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2">
                 <div className={cn('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
                 <div className="grow">
-                  <div className="text-sm font-medium leading-[21px] text-gray-800">{info.name}</div>
-                  <div className="text-xs font-normal leading-[18px] text-gray-500">{info.description}</div>
+                  <div className="text-sm leading-[21px] font-medium text-gray-800">{info.name}</div>
+                  <div className="text-xs leading-[18px] font-normal text-gray-500">{info.description}</div>
                 </div>
                 {
                   !integrate.is_bound && (
diff --git a/web/app/components/header/account-setting/api-based-extension-page/empty.tsx b/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
index ca2763e98c..94a0b52a04 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/empty.tsx
@@ -11,12 +11,12 @@ const Empty = () => {
 
   return (
     <div className="mb-2 rounded-xl bg-background-section p-6">
-      <div className="mb-3 flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
         <RiPuzzle2Line className="h-5 w-5 text-text-accent" />
       </div>
-      <div className="system-sm-medium mb-1 text-text-secondary">{t('apiBasedExtension.title', { ns: 'common' })}</div>
+      <div className="mb-1 system-sm-medium text-text-secondary">{t('apiBasedExtension.title', { ns: 'common' })}</div>
       <a
-        className="system-xs-regular flex items-center text-text-accent"
+        className="flex items-center system-xs-regular text-text-accent"
         href={docLink('/use-dify/workspace/api-extension/api-extension')}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index 7c66256fe5..f7cf1edcc8 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -1,6 +1,6 @@
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 export type IItem = {
   key: string
@@ -26,7 +26,7 @@ const Collapse = ({
 
   return (
     <div className={cn('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
-      <div className="flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px] text-text-secondary" onClick={toggle}>
+      <div className="flex cursor-pointer items-center justify-between px-3 py-2 text-xs leading-[18px] font-medium text-text-secondary" onClick={toggle}>
         {title}
         {
           open
diff --git a/web/app/components/header/account-setting/data-source-page-new/card.tsx b/web/app/components/header/account-setting/data-source-page-new/card.tsx
index 0f7a11f61f..9e8a54eeb2 100644
--- a/web/app/components/header/account-setting/data-source-page-new/card.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/card.tsx
@@ -164,7 +164,7 @@ const Card = ({
       {
         !credentials_list.length && (
           <div className="p-3 pt-1">
-            <div className="flex h-10 items-center justify-center radius-lg bg-background-section system-xs-regular text-text-tertiary">
+            <div className="flex h-10 items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary">
               {t('auth.emptyAuth', { ns: 'plugin' })}
             </div>
           </div>
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
index d9c342b4d6..d952559fbf 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
@@ -1,4 +1,5 @@
 import type { Plugin } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiArrowRightUpLine,
@@ -15,7 +16,6 @@ import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
   useMarketplaceAllPlugins,
@@ -48,13 +48,13 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="mt-4! h-px" />
       <div className="flex items-center justify-between">
-        <div className="system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary" onClick={() => setCollapse(!collapse)}>
+        <div className="flex cursor-pointer items-center gap-1 system-md-semibold text-text-primary" onClick={() => setCollapse(!collapse)}>
           <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
           {t('modelProvider.installDataSourceProvider', { ns: 'common' })}
         </div>
         <div className="mb-2 flex items-center pt-2">
-          <span className="system-sm-regular pr-1 text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
-          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="system-sm-medium inline-flex items-center text-text-accent">
+          <span className="pr-1 system-sm-regular text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
+          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center system-sm-medium text-text-accent">
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
             <RiArrowRightUpLine className="h-4 w-4" />
           </Link>
diff --git a/web/app/components/header/account-setting/data-source-page-new/item.tsx b/web/app/components/header/account-setting/data-source-page-new/item.tsx
index 9983a22b2c..658d685ab2 100644
--- a/web/app/components/header/account-setting/data-source-page-new/item.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/item.tsx
@@ -30,7 +30,7 @@ const Item = ({
         renaming && (
           <div className="flex w-full items-center space-x-1">
             <Input
-              wrapperClassName="grow radius-sm"
+              wrapperClassName="grow rounded-md"
               className="h-6"
               value={renameValue}
               onChange={e => setRenameValue(e.target.value)}
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index d061efb9c6..64dff27cf6 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SearchInput from '@/app/components/base/search-input'
@@ -15,7 +16,6 @@ import MenuDialog from '@/app/components/header/account-setting/menu-dialog'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { cn } from '@/utils/classnames'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page-new'
 import LanguagePage from './language-page'
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 93acf76d00..b4dbe243cf 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
@@ -7,7 +8,6 @@ import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/com
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
-import { cn } from '@/utils/classnames'
 
 type IEditWorkspaceModalProps = {
   onCancel: () => void
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 4d22c97259..e90455f2d4 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { RoleKey } from './role-selector'
 import type { InvitationResult } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { inviteMember } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import RoleSelector from './role-selector'
 import 'react-multi-email/dist/style.css'
 
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index 5d9b80bd1e..68cec4fe71 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -6,7 +7,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 
 const roleI18nKeyMap = {
   normal: 'members.normal',
@@ -62,7 +62,7 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               {value === 'normal' && (
                 <div
                   data-testid="role-option-check"
-                  className="i-custom-vender-line-general-check absolute left-0 top-0.5 h-4 w-4 text-text-accent"
+                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                 />
               )}
             </div>
@@ -81,7 +81,7 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               {value === 'editor' && (
                 <div
                   data-testid="role-option-check"
-                  className="i-custom-vender-line-general-check absolute left-0 top-0.5 h-4 w-4 text-text-accent"
+                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                 />
               )}
             </div>
@@ -100,7 +100,7 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               {value === 'admin' && (
                 <div
                   data-testid="role-option-check"
-                  className="i-custom-vender-line-general-check absolute left-0 top-0.5 h-4 w-4 text-text-accent"
+                  className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                 />
               )}
             </div>
@@ -120,7 +120,7 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
                 {value === 'dataset_operator' && (
                   <div
                     data-testid="role-option-check"
-                    className="i-custom-vender-line-general-check absolute left-0 top-0.5 h-4 w-4 text-text-accent"
+                    className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                   />
                 )}
               </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 d8d61ecdc8..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,13 +1,13 @@
 '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 { 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'
-import { cn } from '@/utils/classnames'
 
 type IOperationProps = {
   member: Member
@@ -76,7 +76,7 @@ const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
   return (
     <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 text-text-secondary system-sm-regular hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+        <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>
@@ -87,21 +87,21 @@ const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
             {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="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
-                  : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />}
+                  ? <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="whitespace-nowrap text-text-secondary system-sm-semibold">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
-                  <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</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="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
+              <div className="mt-[2px] mr-1 h-4 w-4 text-text-accent" />
               <div>
-                <div className="whitespace-nowrap text-text-secondary system-sm-semibold">{t('members.removeFromTeam', { ns: 'common' })}</div>
-                <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t('members.removeFromTeamTip', { ns: 'common' })}</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>
             </div>
           </div>
diff --git a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
index bc5b2a66c1..b485aed704 100644
--- a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
@@ -1,5 +1,6 @@
 'use client'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
@@ -9,7 +10,6 @@ import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkspacePermissions } from '@/service/use-workspace'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   onOperate: () => void
@@ -25,7 +25,7 @@ const TransferOwnership = ({ onOperate }: Props) => {
       return <Loading />
     }
     if (!workspacePermissions || workspacePermissions.allow_owner_transfer !== true) {
-      return <span className="system-sm-regular px-3 text-text-secondary">{t('members.owner', { ns: 'common' })}</span>
+      return <span className="px-3 system-sm-regular text-text-secondary">{t('members.owner', { ns: 'common' })}</span>
     }
   }
 
@@ -34,7 +34,7 @@ const TransferOwnership = ({ onOperate }: Props) => {
       {
         ({ open }) => (
           <>
-            <MenuButton className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+            <MenuButton 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')}>
               {t('members.owner', { ns: 'common' })}
               <RiArrowDownSLine className={cn('h-4 w-4 group-hover:block', open ? 'block' : 'hidden')} />
             </MenuButton>
@@ -48,7 +48,7 @@ const TransferOwnership = ({ onOperate }: Props) => {
               leaveTo="transform opacity-0 scale-95"
             >
               <MenuItems
-                className={cn('absolute right-0 top-[52px] z-10 origin-top-right rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs')}
+                className={cn('absolute top-[52px] right-0 z-10 origin-top-right rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs')}
               >
                 <div className="p-1">
                   <MenuItem>
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
index 59e69b92e2..713104fcc3 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,6 @@ import Input from '@/app/components/base/input'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { Avatar } from '@/app/components/base/ui/avatar'
 import { useMembers } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   value?: any
@@ -65,13 +65,13 @@ const MemberSelector: FC<Props> = ({
           className={cn('group flex cursor-pointer items-center gap-1.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt')}
         >
           {!currentValue && (
-            <div className="grow p-1 text-components-input-text-placeholder system-sm-regular">{t('members.transferModal.transferPlaceholder', { ns: 'common' })}</div>
+            <div className="grow p-1 system-sm-regular text-components-input-text-placeholder">{t('members.transferModal.transferPlaceholder', { ns: 'common' })}</div>
           )}
           {currentValue && (
             <>
               <Avatar avatar={currentValue.avatar_url} size="sm" name={currentValue.name} />
-              <div className="grow truncate text-text-secondary system-sm-medium">{currentValue.name}</div>
-              <div className="text-text-quaternary system-xs-regular">{currentValue.email}</div>
+              <div className="grow truncate system-sm-medium text-text-secondary">{currentValue.name}</div>
+              <div className="system-xs-regular text-text-quaternary">{currentValue.email}</div>
             </>
           )}
           <div className={cn('i-ri-arrow-down-s-line h-4 w-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
@@ -92,15 +92,15 @@ const MemberSelector: FC<Props> = ({
               <div
                 key={account.id}
                 data-testid="member-selector-item"
-                className="flex cursor-pointer items-center gap-2 rounded-lg py-1 pl-2 pr-3 hover:bg-state-base-hover"
+                className="flex cursor-pointer items-center gap-2 rounded-lg py-1 pr-3 pl-2 hover:bg-state-base-hover"
                 onClick={() => {
                   onSelect(account.id)
                   setOpen(false)
                 }}
               >
                 <Avatar avatar={account.avatar_url} size="sm" name={account.name} />
-                <div className="grow truncate text-text-secondary system-sm-medium">{account.name}</div>
-                <div className="text-text-quaternary system-xs-regular">{account.email}</div>
+                <div className="grow truncate system-sm-medium text-text-secondary">{account.name}</div>
+                <div className="system-xs-regular text-text-quaternary">{account.email}</div>
               </div>
             ))}
           </div>
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index 354e57650c..ae2be362fb 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback } from 'react'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
-import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
@@ -29,11 +29,11 @@ const MenuDialog = ({
       <DialogContent
         overlayClassName="bg-transparent"
         className={cn(
-          'left-0 top-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-background-sidenav-bg p-0 shadow-none backdrop-blur-md',
+          'top-0 left-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-background-sidenav-bg p-0 shadow-none backdrop-blur-md',
           className,
         )}
       >
-        <div className="absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg" />
+        <div className="absolute top-0 right-0 h-full w-1/2 bg-components-panel-bg" />
         {children}
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index cea67e54ff..06ab1776cb 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -2,6 +2,7 @@ import type {
   ModelProvider,
 } from './declarations'
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useQuery } from '@tanstack/react-query'
 import { useDebounce } from 'ahooks'
 import { useMemo } from 'react'
@@ -11,7 +12,6 @@ import { IS_CLOUD_EDITION } from '@/config'
 import { useSystemFeaturesQuery } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { consoleQuery } from '@/service/client'
-import { cn } from '@/utils/classnames'
 import {
   CustomConfigurationStatusEnum,
   ModelTypeEnum,
@@ -132,15 +132,15 @@ const ModelProviderPage = ({ searchText }: Props) => {
   return (
     <div className="relative -mt-2 pt-1">
       <div className={cn('mb-2 flex items-center')}>
-        <div className="grow text-text-primary system-md-semibold">{t('modelProvider.models', { ns: 'common' })}</div>
+        <div className="grow system-md-semibold text-text-primary">{t('modelProvider.models', { ns: 'common' })}</div>
         <div className={cn(
           'relative flex shrink-0 items-center justify-end gap-2 rounded-lg border border-transparent p-px',
           showWarning && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
         )}
         >
-          {showWarning && <div className="absolute bottom-0 left-0 right-0 top-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
+          {showWarning && <div className="absolute top-0 right-0 bottom-0 left-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
           {showWarning && (
-            <div className="flex items-center gap-1 text-text-primary system-xs-medium">
+            <div className="flex items-center gap-1 system-xs-medium text-text-primary">
               <span className="i-ri-alert-fill h-4 w-4 text-text-warning-secondary" />
               <span className="max-w-[460px] truncate" title={t(warningTextKey, { ns: 'common' })}>{t(warningTextKey, { ns: 'common' })}</span>
             </div>
@@ -158,12 +158,12 @@ const ModelProviderPage = ({ searchText }: Props) => {
       </div>
       {IS_CLOUD_EDITION && <QuotaPanel providers={providers} />}
       {!filteredConfiguredProviders?.length && (
-        <div className="mb-2 radius-lg bg-workflow-process-bg p-4">
-          <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-sm">
+        <div className="mb-2 rounded-[10px] bg-workflow-process-bg p-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-sm">
             <span className="i-ri-brain-line h-5 w-5 text-text-primary" />
           </div>
-          <div className="mt-2 text-text-secondary system-sm-medium">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
-          <div className="mt-1 text-text-tertiary system-xs-regular">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
+          <div className="mt-2 system-sm-medium text-text-secondary">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
+          <div className="mt-1 system-xs-regular text-text-tertiary">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
         </div>
       )}
       {!!filteredConfiguredProviders?.length && (
@@ -179,7 +179,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
       )}
       {!!filteredNotConfiguredProviders?.length && (
         <>
-          <div className="mb-2 flex items-center pt-2 text-text-primary system-md-semibold">{t('modelProvider.toBeConfigured', { ns: 'common' })}</div>
+          <div className="mb-2 flex items-center pt-2 system-md-semibold text-text-primary">{t('modelProvider.toBeConfigured', { ns: 'common' })}</div>
           <div className="relative">
             {filteredNotConfiguredProviders?.map(provider => (
               <ProviderAddedCard
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
index 02da58dba7..dd4784916f 100644
--- a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
@@ -2,6 +2,7 @@ import type {
   ModelProvider,
 } from './declarations'
 import type { Plugin } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTheme } from 'next-themes'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +11,6 @@ import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
   useMarketplaceAllPlugins,
@@ -45,7 +45,7 @@ const InstallFromMarketplace = ({
       <div className="flex items-center justify-between">
         <button
           type="button"
-          className="flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-left text-text-primary system-md-semibold"
+          className="flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-left system-md-semibold text-text-primary"
           onClick={() => setCollapse(prev => !prev)}
           aria-expanded={!collapse}
         >
@@ -53,12 +53,12 @@ const InstallFromMarketplace = ({
           {t('modelProvider.installProvider', { ns: 'common' })}
         </button>
         <div className="mb-2 flex items-center pt-2">
-          <span className="pr-1 text-text-tertiary system-sm-regular">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
+          <span className="pr-1 system-sm-regular text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
           <Link
             target="_blank"
             rel="noopener noreferrer"
             href={getMarketplaceUrl('', { theme })}
-            className="inline-flex items-center text-text-accent system-sm-medium"
+            className="inline-flex items-center system-sm-medium text-text-accent"
           >
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
             <span className="i-ri-arrow-right-up-line h-4 w-4" />
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
index 31f3ecda94..79e4bb9b3f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
@@ -5,6 +5,7 @@ import type {
   ModelCredential,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import {
   memo,
@@ -13,7 +14,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { Authorized } from '@/app/components/header/account-setting/model-provider-page/model-auth'
-import { cn } from '@/utils/classnames'
 
 type AddCredentialInLoadBalancingProps = {
   provider: ModelProvider
@@ -47,7 +47,7 @@ const AddCredentialInLoadBalancing = ({
   const renderTrigger = useCallback((open?: boolean) => {
     const Item = (
       <div className={cn(
-        'system-sm-medium flex h-8 items-center rounded-lg px-3 text-text-accent hover:bg-state-base-hover',
+        'flex h-8 items-center rounded-lg px-3 system-sm-medium text-text-accent hover:bg-state-base-hover',
         open && 'bg-state-base-hover',
       )}
       >
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index 08ca3acee9..50ea37e45e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -3,6 +3,7 @@ import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddCircleFill,
   RiAddLine,
@@ -23,7 +24,6 @@ import {
   Button,
 } from '@/app/components/base/ui/button'
 import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { cn } from '@/utils/classnames'
 import ModelIcon from '../model-icon'
 import { useAuth } from './hooks/use-auth'
 import { useCanAddedModels } from './hooks/use-custom-models'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
index 95f84e5908..94b3ab2bc8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
@@ -1,4 +1,5 @@
 import type { Credential } from '../../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useMemo,
@@ -8,7 +9,6 @@ import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 
 type CredentialItemProps = {
   credential: Credential
@@ -71,9 +71,9 @@ const CredentialItem = ({
             </div>
           )
         }
-        <Indicator className="ml-2 mr-1.5 shrink-0" />
+        <Indicator className="mr-1.5 ml-2 shrink-0" />
         <div
-          className="truncate text-text-secondary system-md-regular"
+          className="truncate system-md-regular text-text-secondary"
           title={credential.credential_name}
         >
           {credential.credential_name}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index d1a2bc1f89..9c0d6577ef 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -9,6 +9,7 @@ import type {
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -33,7 +34,6 @@ import {
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { useAuth } from '../hooks'
 import AuthorizedItem from './authorized-item'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
index e4e7fae3f5..42f4b68026 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
   RiScales3Line,
@@ -6,7 +7,6 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 
 type ConfigModelProps = {
   onClick?: () => void
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
index cb238f87be..6737a6ffff 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
@@ -2,6 +2,7 @@ import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
@@ -14,7 +15,6 @@ import {
   ConfigurationMethodEnum,
   ModelModalModeEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { cn } from '@/utils/classnames'
 import Authorized from './authorized'
 import {
   useCustomModels,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index e6ce8f80bb..af374b8588 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -4,6 +4,7 @@ import type {
   CustomModel,
   ModelProvider,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   memo,
@@ -15,7 +16,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import Authorized from './authorized'
 
 type SwitchCredentialInLoadBalancingProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
index cb641ec0fb..4f9fe389d6 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type ModelBadgeProps = {
   className?: string
@@ -10,7 +10,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('inline-flex h-[18px] shrink-0 items-center justify-center whitespace-nowrap rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase', className)}>
+    <div className={cn('inline-flex h-[18px] shrink-0 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary', className)}>
       {children}
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index 997b3aa818..1203019fa0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -3,12 +3,12 @@ import type {
   Model,
   ModelProvider,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { OpenaiYellow } from '@/app/components/base/icons/src/public/llm'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import useTheme from '@/hooks/use-theme'
 import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useLanguage } from '../hooks'
 
 type ModelIconProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index f87e42f5d0..fc1397ee32 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -12,6 +12,7 @@ import type {
 import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
@@ -22,7 +23,6 @@ import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/mo
 import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
-import { cn } from '@/utils/classnames'
 import { ValidatingTip } from '../../key-validator/ValidateStatus'
 import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
@@ -161,7 +161,7 @@ function Form<
       const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
             {required && (
               <span className="ml-1 text-red-500">*</span>
@@ -204,7 +204,7 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
             {required && (
               <span className="ml-1 text-red-500">*</span>
@@ -230,7 +230,7 @@ function Form<
               >
                 <RadioE isChecked={value[variable] === option.value} />
 
-                <div className="text-text-secondary system-sm-regular">{option.label[language] || option.label.en_US}</div>
+                <div className="system-sm-regular text-text-secondary">{option.label[language] || option.label.en_US}</div>
               </div>
             ))}
           </div>
@@ -255,7 +255,7 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
 
             {required && (
@@ -296,9 +296,9 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className="flex items-center justify-between py-2 text-text-secondary system-sm-semibold">
+          <div className="flex items-center justify-between py-2 system-sm-semibold text-text-secondary">
             <div className="flex items-center space-x-2">
-              <span className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>{label[language] || label.en_US}</span>
+              <span className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>{label[language] || label.en_US}</span>
               {required && (
                 <span className="ml-1 text-red-500">*</span>
               )}
@@ -327,7 +327,7 @@ function Form<
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
             {required && (
               <span className="ml-1 text-red-500">*</span>
@@ -359,7 +359,7 @@ function Form<
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
             {required && (
               <span className="ml-1 text-red-500">*</span>
@@ -423,7 +423,7 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
             {required && (
               <span className="ml-1 text-red-500">*</span>
@@ -452,7 +452,7 @@ function Form<
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-text-secondary system-sm-semibold')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
             {required && (
               <span className="ml-1 text-red-500">*</span>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index 3186e28e2e..f1c206ca83 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react'
 import type { ModelItem } from '../declarations'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLanguage } from '../hooks'
 import ModelBadge from '../model-badge'
 import FeatureIcon from '../model-selector/feature-icon'
@@ -39,7 +39,7 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div className={cn('flex items-center gap-0.5 overflow-hidden truncate text-ellipsis text-components-input-text-filled system-sm-regular', className)}>
+    <div className={cn('flex items-center gap-0.5 truncate overflow-hidden system-sm-regular text-ellipsis text-components-input-text-filled', className)}>
       <div
         className="truncate"
         title={modelItem.label[language] || modelItem.label.en_US}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
index 16d94958f8..37a1f3de7d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@@ -3,6 +3,7 @@ import type {
   ModelItem,
   ModelProvider,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +11,6 @@ import Loading from '@/app/components/base/loading'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { useProviderContext } from '@/context/provider-context'
 import { useInvalidateInstalledPluginList, useModelInList, usePluginInfo } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import {
   CustomConfigurationStatusEnum,
   ModelTypeEnum,
@@ -139,7 +139,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
         : (
             <>
               <div className="flex grow items-center gap-1 p-1 pl-2">
-                <span className="system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap text-components-input-text-placeholder">
+                <span className="overflow-hidden system-sm-regular text-ellipsis whitespace-nowrap text-components-input-text-placeholder">
                   {t('nodes.agent.configureModel', { ns: 'workflow' })}
                 </span>
               </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index 22f354e645..38b343bc19 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -13,6 +13,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -25,7 +26,6 @@ import {
 } from '@/app/components/base/ui/popover'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
 import { useModelParameterRules } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '../hooks'
@@ -175,16 +175,16 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
         popupClassName={cn(popupClassName, 'w-[400px] rounded-2xl')}
         positionerProps={!renderTrigger ? { anchor: settingsIconRef } : undefined}
       >
-        <div className="relative px-3 pb-1 pt-3.5">
-          <div className="pl-1 pr-8 text-text-primary system-xl-semibold">
+        <div className="relative px-3 pt-3.5 pb-1">
+          <div className="pr-8 pl-1 system-xl-semibold text-text-primary">
             {t('modelProvider.modelSettings', { ns: 'common' })}
           </div>
-          <PopoverClose className="absolute right-2.5 top-2.5 flex items-center justify-center rounded-lg p-1.5 hover:bg-state-base-hover">
+          <PopoverClose className="absolute top-2.5 right-2.5 flex items-center justify-center rounded-lg p-1.5 hover:bg-state-base-hover">
             <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
           </PopoverClose>
         </div>
         <div className="max-h-[420px] overflow-y-auto">
-          <div className="px-4 pb-4 pt-2">
+          <div className="px-4 pt-2 pb-4">
             <ModelSelector
               defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
               modelList={activeTextGenerationModelList}
@@ -194,9 +194,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           </div>
           {
             !!parameterRules.length && (
-              <div className="flex flex-col gap-2 border-t border-divider-subtle px-4 pb-4 pt-3">
+              <div className="flex flex-col gap-2 border-t border-divider-subtle px-4 pt-3 pb-4">
                 <div className="flex items-center gap-1">
-                  <div className="flex flex-1 items-center text-text-secondary system-sm-semibold-uppercase">{t('modelProvider.parameters', { ns: 'common' })}</div>
+                  <div className="flex flex-1 items-center system-sm-semibold-uppercase text-text-secondary">{t('modelProvider.parameters', { ns: 'common' })}</div>
                   {
                     PROVIDER_WITH_PRESET_TONE.includes(provider) && (
                       <PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -235,7 +235,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
         </div>
         {!hideDebugWithMultipleModel && (
           <div
-            className="flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent system-sm-regular"
+            className="flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 system-sm-regular text-text-accent"
             onClick={() => onDebugWithMultipleModelChange?.()}
           >
             {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
index fc2cbe0179..78c7b68d46 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -3,6 +3,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
@@ -13,7 +14,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Slider } from '@/app/components/base/ui/slider'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
 
@@ -177,7 +177,7 @@ function ParameterItem({
           )}
           <input
             ref={numberInputRef}
-            className="ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-hidden system-sm-regular"
+            className="ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 system-sm-regular text-components-input-text-filled outline-hidden"
             type="number"
             max={parameterRule.max}
             min={parameterRule.min}
@@ -205,7 +205,7 @@ function ParameterItem({
           )}
           <input
             ref={numberInputRef}
-            className="ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-hidden system-sm-regular"
+            className="ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 system-sm-regular text-components-input-text-filled outline-hidden"
             type="number"
             max={parameterRule.max}
             min={parameterRule.min}
@@ -252,7 +252,7 @@ function ParameterItem({
 
       return (
         <input
-          className={cn(isInWorkflow ? 'w-[150px]' : 'w-full', 'ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 text-components-input-text-filled outline-hidden system-sm-regular')}
+          className={cn(isInWorkflow ? 'w-[150px]' : 'w-full', 'ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 system-sm-regular text-components-input-text-filled outline-hidden')}
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -281,7 +281,7 @@ function ParameterItem({
 
       return (
         <textarea
-          className="ml-4 h-20 w-full rounded-lg bg-components-input-bg-normal px-1 text-components-input-text-filled system-sm-regular"
+          className="ml-4 h-20 w-full rounded-lg bg-components-input-bg-normal px-1 system-sm-regular text-components-input-text-filled"
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -339,7 +339,7 @@ function ParameterItem({
             )
           }
           <div
-            className="mr-0.5 truncate text-text-secondary system-xs-regular"
+            className="mr-0.5 truncate system-xs-regular text-text-secondary"
             title={sliderLabel}
           >
             {sliderLabel}
@@ -363,7 +363,7 @@ function ParameterItem({
         </div>
         {
           parameterRule.type === 'tag' && (
-            <div className={cn(!isInWorkflow && 'w-[150px]', 'text-text-tertiary system-xs-regular')}>
+            <div className={cn(!isInWorkflow && 'w-[150px]', 'system-xs-regular text-text-tertiary')}>
               {parameterRule?.tagPlaceholder?.[language]}
             </div>
           )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index 289a08e89e..06823d1a74 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -4,10 +4,10 @@ import type {
   ModelItem,
   ModelProvider,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { useCredentialPanelState } from '../provider-added-card/use-credential-panel-state'
@@ -54,7 +54,7 @@ const Trigger: FC<TriggerProps> = ({
           'relative flex h-8 min-w-[296px] cursor-pointer items-center rounded-lg px-2',
           isInWorkflow
             ? 'border border-text-warning bg-state-warning-hover pr-[30px]'
-            : 'border border-text-warning bg-state-warning-hover ring-inset ring-text-warning hover:ring-[0.5px]',
+            : 'border border-text-warning bg-state-warning-hover ring-text-warning ring-inset hover:ring-[0.5px]',
         )}
       >
         <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center">
@@ -65,7 +65,7 @@ const Trigger: FC<TriggerProps> = ({
         <div className="mr-1 flex-1 truncate text-[13px] font-normal text-text-secondary">
           {t('workflow:errorMsg.configureModel')}
         </div>
-        <span className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary', isInWorkflow && 'absolute right-2 top-[9px] h-3.5 w-3.5')} />
+        <span className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary', isInWorkflow && 'absolute top-[9px] right-2 h-3.5 w-3.5')} />
       </div>
     )
   }
@@ -99,7 +99,7 @@ const Trigger: FC<TriggerProps> = ({
                       <div className="flex shrink-0 items-center pr-0.5">
                         <div className="flex min-w-[20px] shrink-0 items-center justify-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
                           <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
-                          <span className="whitespace-nowrap text-text-warning system-xs-medium">
+                          <span className="system-xs-medium whitespace-nowrap text-text-warning">
                             {badgeLabel}
                           </span>
                         </div>
@@ -115,7 +115,7 @@ const Trigger: FC<TriggerProps> = ({
                 <div className="flex shrink-0 items-center pr-0.5">
                   <div className="flex min-w-[20px] shrink-0 items-center justify-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
                     <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
-                    <span className="whitespace-nowrap text-text-warning system-xs-medium">
+                    <span className="system-xs-medium whitespace-nowrap text-text-warning">
                       {badgeLabel}
                     </span>
                   </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
index 72c010e6af..a2a357abb5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiFileTextLine,
   RiFilmAiLine,
@@ -7,7 +8,6 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import {
   ModelFeatureEnum,
   ModelFeatureTextEnum,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
index 75dbd6559c..d43324ca12 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
@@ -4,10 +4,10 @@ import type {
   Model,
   ModelItem,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import {
   DERIVED_MODEL_STATUS_BADGE_I18N,
   DERIVED_MODEL_STATUS_TOOLTIP_I18N,
@@ -110,7 +110,7 @@ const ModelSelectorTrigger: FC<ModelSelectorTriggerProps> = ({
           />
         )}
         {isDeprecated && (
-          <div className="grow truncate text-components-input-text-filled system-sm-regular">
+          <div className="grow truncate system-sm-regular text-components-input-text-filled">
             {defaultModel.model}
           </div>
         )}
@@ -132,7 +132,7 @@ const ModelSelectorTrigger: FC<ModelSelectorTriggerProps> = ({
                   )}
                 >
                   <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
-                  <span className="whitespace-nowrap text-text-warning system-xs-medium">
+                  <span className="system-xs-medium whitespace-nowrap text-text-warning">
                     {statusLabel}
                   </span>
                 </div>
@@ -152,7 +152,7 @@ const ModelSelectorTrigger: FC<ModelSelectorTriggerProps> = ({
               render={(
                 <div className="flex shrink-0 items-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
                   <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
-                  <span className="whitespace-nowrap text-text-warning system-xs-medium">
+                  <span className="system-xs-medium whitespace-nowrap text-text-warning">
                     {deprecatedStatusLabel}
                   </span>
                 </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index 5fb1135039..d1ad017455 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -4,6 +4,7 @@ import type {
   Model,
   ModelItem,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CreditsCoin } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
@@ -15,7 +16,6 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import {
   ConfigurationMethodEnum,
   ModelFeatureEnum,
@@ -114,7 +114,7 @@ const PopupItem: FC<PopupItemProps> = ({
         <Popover open={dropdownOpen} onOpenChange={setDropdownOpen}>
           <PopoverTrigger
             render={(
-              <button type="button" className="flex cursor-pointer items-center rounded-md px-1.5 py-1 text-text-tertiary system-xs-medium hover:bg-components-button-ghost-bg-hover">
+              <button type="button" className="flex cursor-pointer items-center rounded-md px-1.5 py-1 system-xs-medium text-text-tertiary hover:bg-components-button-ghost-bg-hover">
                 {isUsingCredits
                   ? (
                       hasCredits
@@ -134,13 +134,13 @@ const PopupItem: FC<PopupItemProps> = ({
                   : credentialName
                     ? (
                         <>
-                          <span className={cn('h-1.5 w-1.5 shrink-0 radius-2xs border', isApiKeyActive ? 'border-components-badge-status-light-success-border-inner bg-components-badge-status-light-success-bg' : 'border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg')} />
+                          <span className={cn('h-1.5 w-1.5 shrink-0 rounded-xs border', isApiKeyActive ? 'border-components-badge-status-light-success-border-inner bg-components-badge-status-light-success-bg' : 'border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg')} />
                           <span className="ml-1 text-text-tertiary">{credentialName}</span>
                         </>
                       )
                     : (
                         <>
-                          <span className="h-1.5 w-1.5 shrink-0 radius-2xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg" />
+                          <span className="h-1.5 w-1.5 shrink-0 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg" />
                           <span className="ml-1 text-text-tertiary">{t('modelProvider.selector.configureRequired', { ns: 'common' })}</span>
                         </>
                       )}
@@ -175,7 +175,7 @@ const PopupItem: FC<PopupItemProps> = ({
                     modelName={modelItem.model}
                   />
                   <ModelName
-                    className={cn('text-text-secondary system-sm-medium', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
+                    className={cn('system-sm-medium text-text-secondary', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
                     modelItem={modelItem}
                   />
                 </div>
@@ -209,7 +209,7 @@ const PopupItem: FC<PopupItemProps> = ({
                   provider={model}
                   modelName={modelItem.model}
                 />
-                <div className="text-wrap wrap-break-word text-text-primary system-md-medium">{modelItem.label[language] || modelItem.label.en_US}</div>
+                <div className="system-md-medium text-wrap wrap-break-word text-text-primary">{modelItem.label[language] || modelItem.label.en_US}</div>
               </div>
               <div className="flex flex-wrap gap-1">
                 {!!modelItem.model_type && (
@@ -232,7 +232,7 @@ const PopupItem: FC<PopupItemProps> = ({
                 && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature))
                 && (
                   <div className="pt-2">
-                    <div className="mb-1 text-text-tertiary system-2xs-medium-uppercase">{t('model.capabilities', { ns: 'common' })}</div>
+                    <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary">{t('model.capabilities', { ns: 'common' })}</div>
                     <div className="flex flex-wrap gap-1">
                       {modelItem.features?.map(feature => (
                         <FeatureIcon
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 6aaa71059e..b40bc53a65 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -5,6 +5,7 @@ import type {
   ModelItem,
 } from '../declarations'
 import type { ModelProviderQuotaGetPaid } from '@/types/model-provider'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTheme } from 'next-themes'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +17,6 @@ import { useSystemFeaturesQuery } from '@/context/global-public-context'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import { supportFunctionCall } from '@/utils/tool-call'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -237,8 +237,8 @@ const Popup: FC<PopupProps> = ({
           ))
         }
         {!filteredModelList.length && !installedModelList.length && (
-          <div className="flex flex-col gap-2 radius-lg bg-linear-to-r from-state-base-hover to-background-gradient-mask-transparent p-4">
-            <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]">
+          <div className="flex flex-col gap-2 rounded-[10px] bg-linear-to-r from-state-base-hover to-background-gradient-mask-transparent p-4">
+            <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]">
               <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
             </div>
             <div className="flex flex-col gap-1">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index 183b15be33..c0bbab04f3 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -5,6 +5,7 @@ import type {
 import type { ModelProviderQuotaGetPaid } from '../utils'
 import type { PluginDetail } from '@/app/components/plugins/types'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useQuery } from '@tanstack/react-query'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +17,6 @@ import { IS_CE_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { consoleQuery } from '@/service/client'
-import { cn } from '@/utils/classnames'
 import { useModelProviderListExpanded, useSetModelProviderListExpanded } from '../atoms'
 import { ConfigurationMethodEnum } from '../declarations'
 import ModelBadge from '../model-badge'
@@ -96,8 +96,8 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
         currentProviderName === 'langgenius/anthropic/anthropic' && 'bg-third-party-model-bg-anthropic',
       )}
     >
-      <div className="flex rounded-t-xl py-2 pl-3 pr-2">
-        <div className="grow px-1 pb-0.5 pt-1">
+      <div className="flex rounded-t-xl py-2 pr-2 pl-3">
+        <div className="grow px-1 pt-1 pb-0.5">
           <div className="mb-2 flex items-center gap-1">
             <ProviderIcon provider={provider} />
             {pluginDetail && (
@@ -123,12 +123,12 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
       </div>
       {
         showCollapsedSection && (
-          <div className="group flex items-center justify-between border-t border-t-divider-subtle py-1.5 pl-2 pr-[11px] text-text-tertiary system-xs-medium">
+          <div className="group flex items-center justify-between border-t border-t-divider-subtle py-1.5 pr-[11px] pl-2 system-xs-medium text-text-tertiary">
             {(showModelProvider || !notConfigured) && (
               <button
                 type="button"
                 data-testid="show-models-button"
-                className="flex h-6 items-center rounded-lg pl-1 pr-1.5 hover:bg-components-button-ghost-bg-hover"
+                className="flex h-6 items-center rounded-lg pr-1.5 pl-1 hover:bg-components-button-ghost-bg-hover"
                 aria-label={t('modelProvider.showModels', { ns: 'common' })}
                 onClick={handleOpenModelList}
               >
@@ -140,15 +140,15 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
                 {!loading && <div className="i-ri-arrow-right-s-line h-4 w-4" />}
                 {
                   loading && (
-                    <div className="i-ri-loader-2-line ml-0.5 h-3 w-3 animate-spin" />
+                    <div className="ml-0.5 i-ri-loader-2-line h-3 w-3 animate-spin" />
                   )
                 }
               </button>
             )}
             {!showModelProvider && notConfigured && (
-              <div className="flex h-6 items-center pl-1 pr-1.5">
-                <div className="i-ri-information-2-fill mr-1 h-4 w-4 text-text-accent" />
-                <span className="text-text-secondary system-xs-medium">{t('modelProvider.configureTip', { ns: 'common' })}</span>
+              <div className="flex h-6 items-center pr-1.5 pl-1">
+                <div className="mr-1 i-ri-information-2-fill h-4 w-4 text-text-accent" />
+                <span className="system-xs-medium text-text-secondary">{t('modelProvider.configureTip', { ns: 'common' })}</span>
               </div>
             )}
             {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
index 9dde65fd44..e6f5e51d61 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
@@ -31,7 +31,7 @@ function ApiKeySection({
   if (!credentials.length) {
     return (
       <div className="flex flex-col gap-2 p-2">
-        <div className="radius-lg bg-linear-to-r from-state-base-hover to-transparent p-4">
+        <div className="rounded-[10px] bg-linear-to-r from-state-base-hover to-transparent p-4">
           <div className="flex flex-col gap-1">
             <div className="system-sm-medium text-text-secondary">
               {t('modelProvider.card.noApiKeysTitle', { ns: 'common' })}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
index 4858c05af2..53abe1211d 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx
@@ -24,12 +24,12 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
   const usagePercent = totalCredits > 0 ? Math.min((usedCredits / totalCredits) * 100, 100) : 100
 
   return (
-    <div className="mx-2 mb-1 mt-0.5 rounded-lg bg-background-section-burn p-3">
+    <div className="mx-2 mt-0.5 mb-1 rounded-lg bg-background-section-burn p-3">
       <div className="flex flex-col gap-1">
-        <div className="text-text-primary system-sm-medium">
+        <div className="system-sm-medium text-text-primary">
           {t(titleKey, { ns: 'common' })}
         </div>
-        <div className="text-text-tertiary system-xs-regular">
+        <div className="system-xs-regular text-text-tertiary">
           <Trans
             i18nKey={descriptionKey}
             ns="common"
@@ -37,7 +37,7 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
               upgradeLink: (
                 <button
                   type="button"
-                  className="cursor-pointer border-0 bg-transparent p-0 text-left text-text-accent system-xs-medium"
+                  className="cursor-pointer border-0 bg-transparent p-0 text-left system-xs-medium text-text-accent"
                   onClick={() => setShowPricingModal()}
                 />
               ),
@@ -47,10 +47,10 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
       </div>
       <div className="mt-3 flex flex-col gap-1">
         <div className="flex items-center justify-between">
-          <span className="text-text-tertiary system-xs-medium">
+          <span className="system-xs-medium text-text-tertiary">
             {t('modelProvider.card.usageLabel', { ns: 'common' })}
           </span>
-          <div className="flex items-center gap-0.5 text-text-tertiary system-xs-regular">
+          <div className="flex items-center gap-0.5 system-xs-regular text-text-tertiary">
             <CreditsCoin className="h-3 w-3" />
             <span>
               {formatNumber(usedCredits)}
@@ -59,7 +59,7 @@ export default function CreditsExhaustedAlert({ hasApiKeyFallback }: CreditsExha
             </span>
           </div>
         </div>
-        <div className="h-1 overflow-hidden radius-sm bg-components-progress-error-bg">
+        <div className="h-1 overflow-hidden rounded-md bg-components-progress-error-bg">
           <div
             className="h-full rounded-l-[6px] bg-components-progress-error-progress"
             style={{ width: `${usagePercent}%` }}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
index 2a07a1d7a7..638f9d605b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
@@ -1,7 +1,7 @@
 import type { UsagePriority } from '../use-credential-panel-state'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 import { PreferredProviderTypeEnum } from '../../declarations'
 
 type UsagePrioritySectionProps = {
@@ -28,7 +28,7 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
           <span className="i-ri-arrow-up-double-line block h-4 w-4 text-text-tertiary" />
         </div>
         <div className="flex min-w-0 flex-1 items-center gap-0.5 py-0.5">
-          <span className="truncate text-text-secondary system-sm-medium">
+          <span className="truncate system-sm-medium text-text-secondary">
             {t('modelProvider.card.usagePriority', { ns: 'common' })}
           </span>
           <Tooltip>
@@ -52,10 +52,10 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
               key={option.key}
               type="button"
               className={cn(
-                'shrink-0 whitespace-nowrap rounded-md px-2 py-1 text-center transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-button-primary-border disabled:opacity-50',
+                'shrink-0 rounded-md px-2 py-1 text-center whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-components-button-primary-border focus-visible:outline-hidden disabled:opacity-50',
                 selectedKey === option.key
-                  ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-panel-bg text-text-primary shadow-xs system-xs-medium'
-                  : 'border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary system-xs-regular hover:bg-components-option-card-option-bg-hover',
+                  ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-panel-bg system-xs-medium text-text-primary shadow-xs'
+                  : 'border border-components-option-card-option-border bg-components-option-card-option-bg system-xs-regular text-text-secondary hover:bg-components-option-card-option-bg-hover',
               )}
               disabled={disabled}
               onClick={() => onSelect(option.key)}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 469557b92d..4604faa9dd 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -1,4 +1,5 @@
 import type { ModelItem, ModelProvider } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDebounceFn } from 'ahooks'
 import { memo, useCallback } from 'react'
@@ -12,7 +13,6 @@ import { useAppContext } from '@/context/app-context'
 import { useProviderContext, useProviderContextSelector } from '@/context/provider-context'
 import { consoleQuery } from '@/service/client'
 import { disableModel, enableModel } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import { ModelStatusEnum } from '../declarations'
 import { useUpdateModelList } from '../hooks'
 import { ConfigModel } from '../model-auth'
@@ -66,7 +66,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onChange, onModifyLoad
   return (
     <div
       key={`${model.model}-${model.fetch_from}`}
-      className={cn('group flex h-8 items-center rounded-lg pl-2 pr-2.5', isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover', model.deprecated && 'opacity-60')}
+      className={cn('group flex h-8 items-center rounded-lg pr-2.5 pl-2', isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover', model.deprecated && 'opacity-60')}
     >
       <ModelIcon
         className="mr-2 shrink-0"
@@ -74,7 +74,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onChange, onModifyLoad
         modelName={model.model}
       />
       <ModelName
-        className="grow text-text-secondary system-md-regular"
+        className="grow system-md-regular text-text-secondary"
         modelItem={model}
         showModelType
         showMode
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 997ba402cd..020abfdf96 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -8,6 +8,7 @@ import type {
   ModelLoadBalancingConfigEntry,
   ModelProvider,
 } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge/index'
@@ -19,7 +20,6 @@ import s from '@/app/components/custom/style.module.css'
 import { AddCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { IS_CE_EDITION } from '@/config'
 import { useProviderContextSelector } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import Indicator from '../../../indicator'
 import { ConfigurationMethodEnum } from '../declarations'
 import CooldownTimer from './cooldown-timer'
@@ -145,7 +145,7 @@ const ModelLoadBalancingConfigs = ({
         onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
         data-testid="load-balancing-main-panel"
       >
-        <div className="flex select-none items-center gap-2 px-[15px] py-3">
+        <div className="flex items-center gap-2 px-[15px] py-3 select-none">
           <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-util-colors-indigo-indigo-100 bg-util-colors-indigo-indigo-50 text-util-colors-blue-blue-600">
             <div className="i-custom-vender-line-financeandecommerce-balance h-4 w-4" />
           </div>
@@ -264,7 +264,7 @@ const ModelLoadBalancingConfigs = ({
         <GridMask canvasClassName="rounded-xl!">
           <div className="mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md">
             <div
-              className={cn('text-gradient text-sm font-semibold leading-tight', s.textGradient)}
+              className={cn('text-gradient text-sm leading-tight font-semibold', s.textGradient)}
             >
               {t('modelProvider.upgradeForLoadBalancing', { ns: 'common' })}
             </div>
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 4c8c718ac2..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
@@ -1,4 +1,5 @@
 import type { Credential, CustomConfigurationModelFixedFields, ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
@@ -15,7 +16,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useGetModelCredential, useUpdateModelLoadBalancingConfig } from '@/service/use-models'
-import { cn } from '@/utils/classnames'
 import { ConfigurationMethodEnum, FormTypeEnum } from '../declarations'
 import { useRefreshModel } from '../hooks'
 import { useAuth } from '../model-auth/hooks/use-auth'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index 052fc5c3d3..e71a219dcd 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckLine,
   RiMoreFill,
@@ -7,7 +8,6 @@ import {
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { PreferredProviderTypeEnum } from '../declarations'
 
 type SelectorProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index 2d9e2a52aa..2269354825 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
@@ -12,7 +13,6 @@ import { PluginSource } from '@/app/components/plugins/types'
 import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
 import { useLocale } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 
 type Props = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 2fa5243d88..03d7c28a88 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { ModelProvider } from '../declarations'
 import type { Plugin } from '@/app/components/plugins/types'
 import type { ModelProviderQuotaGetPaid } from '@/types/model-provider'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -11,7 +12,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/u
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { useSystemFeaturesQuery } from '@/context/global-public-context'
 import useTimestamp from '@/hooks/use-timestamp'
-import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { PreferredProviderTypeEnum } from '../declarations'
 import { useMarketplaceAllPlugins } from '../hooks'
@@ -89,7 +89,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
 
   return (
     <div className={cn(
-      'relative my-2 min-w-[72px] shrink-0 overflow-hidden rounded-xl border-[0.5px] pb-2.5 pl-4 pr-2.5 pt-3 shadow-xs',
+      'relative my-2 min-w-[72px] shrink-0 overflow-hidden rounded-xl border-[0.5px] pt-3 pr-2.5 pb-2.5 pl-4 shadow-xs',
       isExhausted
         ? 'border-state-destructive-border hover:bg-state-destructive-hover'
         : 'border-components-panel-border bg-third-party-model-bg-default',
@@ -97,7 +97,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
     >
       <div className={cn('pointer-events-none absolute inset-0', styles.gridBg)} />
       <div className="relative">
-        <div className="mb-2 flex h-4 items-center text-text-tertiary system-xs-medium-uppercase">
+        <div className="mb-2 flex h-4 items-center system-xs-medium-uppercase text-text-tertiary">
           {t('modelProvider.quota', { ns: 'common' })}
           <Tooltip>
             <TooltipTrigger
@@ -117,8 +117,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1 text-xs text-text-tertiary">
             {credits > 0
-              ? <span className="mr-0.5 text-text-secondary system-xl-semibold">{formatNumber(credits)}</span>
-              : <span className="mr-0.5 text-text-destructive system-xl-semibold">{t('modelProvider.card.quotaExhausted', { ns: 'common' })}</span>}
+              ? <span className="mr-0.5 system-xl-semibold text-text-secondary">{formatNumber(credits)}</span>
+              : <span className="mr-0.5 system-xl-semibold text-text-destructive">{t('modelProvider.card.quotaExhausted', { ns: 'common' })}</span>}
             {nextCreditResetDate
               ? (
                   <>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
index 41b0acd8cf..ecf1e52b4c 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { createContext, use } from 'react'
-import { cn } from '@/utils/classnames'
 import styles from './quota-panel.module.css'
 
 type Variant = 'default' | 'destructive'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index 3a76464307..89e9ee8dd7 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import type { ModelProvider } from '../declarations'
+import { cn } from '@langgenius/dify-ui/cn'
 import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
 import { Openai } from '@/app/components/base/icons/src/vender/other'
 import useTheme from '@/hooks/use-theme'
 import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useLanguage } from '../hooks'
 
 type ProviderIconProps = {
@@ -48,7 +48,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
         )}
         className="h-6 w-6"
       />
-      <div className="text-text-primary system-md-semibold">
+      <div className="system-md-semibold text-text-primary">
         {renderI18nObject(provider.label, language)}
       </div>
     </div>
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
index bbffc76f19..7cf121aa4e 100644
--- a/web/app/components/header/app-back/index.tsx
+++ b/web/app/components/header/app-back/index.tsx
@@ -2,10 +2,10 @@
 
 import type { AppDetailResponse } from '@/models/app'
 import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type IAppBackProps = {
   curApp: AppDetailResponse
@@ -18,8 +18,8 @@ export default function AppBack({ curApp }: IAppBackProps) {
   return (
     <div
       className={cn(`
-        flex h-7 cursor-pointer items-center radius-lg
-        pl-2.5 pr-2 font-semibold
+        flex h-7 cursor-pointer items-center rounded-[10px]
+        pr-2 pl-2.5 font-semibold
         text-[#1C64F2]
         ${curApp && 'hover:bg-[#EBF5FF]'}
       `)}
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index 5d196bc773..52e60de2b4 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -34,7 +34,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
           <MenuButton
             className="
               inline-flex h-7 w-full items-center justify-center
-              radius-lg pl-2 pr-2.5 text-[14px] font-semibold
+              rounded-[10px] pr-2.5 pl-2 text-[14px] font-semibold
               text-[#1C64F2] hover:bg-[#EBF5FF]
             "
           >
@@ -56,7 +56,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
         >
           <MenuItems
             className="
-              absolute -left-11 right-0 mt-1.5 w-60 max-w-80
+              absolute right-0 -left-11 mt-1.5 w-60 max-w-80
               origin-top-right divide-y divide-gray-100 rounded-lg bg-white
               shadow-lg
             "
@@ -71,9 +71,9 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
                         onClick={() =>
                           router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)}
                       >
-                        <div className="relative mr-2 h-6 w-6 radius-sm bg-[#D5F5F6]">
+                        <div className="relative mr-2 h-6 w-6 rounded-md bg-[#D5F5F6]">
                           <AppIcon size="tiny" />
-                          <div className="absolute -bottom-0.5 -right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-sm bg-white">
+                          <div className="absolute -right-0.5 -bottom-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-sm bg-white">
                             <Indicator />
                           </div>
                         </div>
@@ -92,8 +92,8 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
                   >
                     <div
                       className="
-                      ml-4 mr-2 flex
-                      h-6 w-6 items-center justify-center radius-sm border-[0.5px]
+                      mr-2 ml-4 flex
+                      h-6 w-6 items-center justify-center rounded-md border-[0.5px]
                       border-dashed border-gray-200 bg-gray-100
                     "
                     >
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index 9931690e83..d8bbc014b9 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiPlanetFill,
   RiPlanetLine,
@@ -7,7 +8,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
 import { useSelectedLayoutSegment } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 
 type ExploreNavProps = {
   className?: string
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index c90f01a6b6..1379d176e0 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { usePathname } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
 type HeaderWrapperProps = {
@@ -28,7 +28,7 @@ const HeaderWrapper = ({
   })
 
   return (
-    <div className={cn('sticky left-0 right-0 top-0 z-30 flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col', s.header, isBordered ? 'border-b border-divider-regular' : '', hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden')}>
+    <div className={cn('sticky top-0 right-0 left-0 z-30 flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col', s.header, isBordered ? 'border-b border-divider-regular' : '', hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden')}>
       {children}
     </div>
   )
diff --git a/web/app/components/header/indicator/index.tsx b/web/app/components/header/indicator/index.tsx
index 6495a1137b..c60ebcb7bd 100644
--- a/web/app/components/header/indicator/index.tsx
+++ b/web/app/components/header/indicator/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 export type IndicatorProps = {
   color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index da8ddc7536..766aca14e3 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 
 import type { INavSelectorProps } from './nav-selector'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import Link from '@/next/link'
 import { useSelectedLayoutSegment } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import NavSelector from './nav-selector'
 
 type INavProps = {
@@ -53,7 +53,7 @@ const Nav = ({
               return
             setAppDetail()
           }}
-          className={cn('flex h-7 cursor-pointer items-center radius-lg px-2.5', isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text', curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover')}
+          className={cn('flex h-7 cursor-pointer items-center rounded-[10px] px-2.5', isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text', curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover')}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         >
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 76d25c1cad..285639adf7 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { AppIconType, AppModeEnum } from '@/types/app'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiArrowDownSLine,
@@ -16,7 +17,6 @@ import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 
 export type NavItem = {
   id: string
@@ -58,7 +58,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
       {({ open }) => (
         <>
           <MenuButton className={cn(
-            'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center radius-lg pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active',
+            'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center rounded-[10px] pr-2.5 pl-2 text-[14px] font-semibold text-components-main-nav-nav-button-text-active',
             open && 'bg-components-main-nav-nav-button-bg-active',
           )}
           >
@@ -70,7 +70,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
           </MenuButton>
           <MenuItems
             className="
-              absolute -left-11 right-0 mt-1.5 w-60 max-w-80
+              absolute right-0 -left-11 mt-1.5 w-60 max-w-80
               origin-top-right divide-y divide-divider-regular rounded-lg bg-components-panel-bg-blur
               shadow-lg
             "
@@ -119,10 +119,10 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                 <div
                   onClick={() => onCreate('')}
                   className={cn(
-                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover ',
+                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover',
                   )}
                 >
-                  <div className="flex h-6 w-6 shrink-0 items-center justify-center radius-sm border-[0.5px] border-divider-regular bg-background-default">
+                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-background-default">
                     <RiAddLine className="h-4 w-4 text-text-primary" />
                   </div>
                   <div className="grow text-left text-[14px] font-normal text-text-secondary">{createText}</div>
@@ -139,7 +139,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                         open && 'bg-state-base-hover!',
                       )}
                       >
-                        <div className="flex h-6 w-6 shrink-0 items-center justify-center radius-sm border-[0.5px] border-divider-regular bg-background-default">
+                        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-background-default">
                           <RiAddLine className="h-4 w-4 text-text-primary" />
                         </div>
                         <div className="grow text-left text-[14px] font-normal text-text-secondary">{createText}</div>
@@ -156,7 +156,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                       leaveTo="transform opacity-0 scale-95"
                     >
                       <MenuItems className={cn(
-                        'absolute right-[-198px] top-[3px] z-10 min-w-[200px] rounded-lg bg-components-panel-bg-blur shadow-lg',
+                        'absolute top-[3px] right-[-198px] z-10 min-w-[200px] rounded-lg bg-components-panel-bg-blur shadow-lg',
                       )}
                       >
                         <div className="p-1">
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index 578060ffa4..dee8fa26fa 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Indicator from '@/app/components/header/indicator'
 import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
 import Link from '@/next/link'
 import { useSelectedLayoutSegment } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import DownloadingIcon from './downloading-icon'
 
 type PluginsNavProps = {
@@ -33,13 +33,13 @@ const PluginsNav = ({
       )}
     >
       <div
-        className={cn('system-sm-medium relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5', activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md', !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
+        className={cn('relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5 system-sm-medium', activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md', !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
       >
         {
           (isFailed || isInstallingWithError) && !activated && (
             <Indicator
               color="red"
-              className="absolute -left-px -top-px"
+              className="absolute -top-px -left-px"
             />
           )
         }
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index 141b576a4c..06d19382ac 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiHammerFill,
   RiHammerLine,
@@ -7,7 +8,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
 import { useSelectedLayoutSegment } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 
 type ToolsNavProps = {
   className?: string
diff --git a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
index fc2aaaa572..faabd545fd 100644
--- a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
+++ b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type IconWithTooltipProps = {
   className?: string
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 647c98c36c..3f7561fed0 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import { useTranslation } from '#i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAlertFill } from '@remixicon/react'
 import { camelCase } from 'es-toolkit/string'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { Trans } from 'react-i18next'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 
 type DeprecationNoticeProps = {
   status: 'deleted' | 'active'
@@ -62,11 +62,11 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
         innerWrapperClassName,
       )}
       >
-        <div className="absolute left-0 top-0 -z-10 h-full w-full bg-toast-warning-bg opacity-40" />
+        <div className="absolute top-0 left-0 -z-10 h-full w-full bg-toast-warning-bg opacity-40" />
         <div className={cn('flex size-6 shrink-0 items-center justify-center', iconWrapperClassName)}>
           <RiAlertFill className="size-4 text-text-warning-secondary" />
         </div>
-        <div className={cn('system-xs-regular grow py-1 text-text-primary', textClassName)}>
+        <div className={cn('grow py-1 system-xs-regular text-text-primary', textClassName)}>
           {
             hasValidDeprecatedReason && alternativePluginId && (
               <Trans
diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index 26ec1684c2..1ba8e8caf9 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiClipboardLine,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import { cn } from '@/utils/classnames'
 import { CopyCheck } from '../../base/icons/src/vender/line/files'
 import Tooltip from '../../base/tooltip'
 
@@ -49,9 +49,9 @@ const KeyValueItem: FC<Props> = ({
 
   return (
     <div className="flex items-center gap-1">
-      <span className={cn('system-xs-medium flex flex-col items-start justify-center text-text-tertiary', labelWidthClassName)}>{label}</span>
+      <span className={cn('flex flex-col items-start justify-center system-xs-medium text-text-tertiary', labelWidthClassName)}>{label}</span>
       <div className="flex items-center justify-center gap-0.5">
-        <span className={cn(valueMaxWidthClassName, ' system-xs-medium truncate text-text-secondary')}>
+        <span className={cn(valueMaxWidthClassName, 'truncate system-xs-medium text-text-secondary')}>
           {maskedValue || value}
         </span>
         <Tooltip popupContent={t(`operation.${isCopied ? 'copied' : 'copy'}`, { ns: 'common' })} position="top">
diff --git a/web/app/components/plugins/card/base/__tests__/placeholder.spec.tsx b/web/app/components/plugins/card/base/__tests__/placeholder.spec.tsx
index 076f4d69dd..e5dc9e2270 100644
--- a/web/app/components/plugins/card/base/__tests__/placeholder.spec.tsx
+++ b/web/app/components/plugins/card/base/__tests__/placeholder.spec.tsx
@@ -10,7 +10,7 @@ vi.mock('../../../../base/icons/src/vender/other', () => ({
   Group: ({ className }: { className: string }) => <span data-testid="group-icon" className={className} />,
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index 55b6e8cc62..5e3eebab20 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -1,7 +1,7 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckLine, RiCloseLine } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
-import { cn } from '@/utils/classnames'
 import { shouldUseMcpIcon } from '@/utils/mcp'
 
 const iconSizeMap = {
diff --git a/web/app/components/plugins/card/base/description.tsx b/web/app/components/plugins/card/base/description.tsx
index 79e77c7e6f..ff43f491dd 100644
--- a/web/app/components/plugins/card/base/description.tsx
+++ b/web/app/components/plugins/card/base/description.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 475b877198..ac1b670204 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type Props = {
   className?: string
@@ -17,11 +17,11 @@ const OrgInfo = ({
     <div className={cn('flex h-4 items-center space-x-0.5', className)}>
       {orgName && (
         <>
-          <span className="system-xs-regular shrink-0 text-text-tertiary">{orgName}</span>
-          <span className="system-xs-regular shrink-0 text-text-quaternary">/</span>
+          <span className="shrink-0 system-xs-regular text-text-tertiary">{orgName}</span>
+          <span className="shrink-0 system-xs-regular text-text-quaternary">/</span>
         </>
       )}
-      <span className={cn('system-xs-regular w-0 shrink-0 grow truncate text-text-tertiary', packageNameClassName)}>
+      <span className={cn('w-0 shrink-0 grow truncate system-xs-regular text-text-tertiary', packageNameClassName)}>
         {packageName}
       </span>
     </div>
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index 306bd928e0..1a1a58673e 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
-import { cn } from '@/utils/classnames'
 import { Group } from '../../../base/icons/src/vender/other'
 import Title from './title'
 
@@ -20,7 +20,7 @@ const Placeholder = ({
     <div className={wrapClassName}>
       <SkeletonRow>
         <div
-          className="flex h-10 w-10 items-center justify-center gap-2 radius-lg border-[0.5px]
+          className="flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
               border-components-panel-border bg-background-default p-1 backdrop-blur-xs"
         >
           <div className="flex h-5 w-5 items-center justify-center">
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 2d48985f92..9f9b89cbbf 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { Plugin } from '../types'
 import { useTranslation } from '#i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAlertFill } from '@remixicon/react'
 import * as React from 'react'
 import { useSelector } from '@/context/app-context'
@@ -10,7 +11,6 @@ import {
   renderI18nObject,
 } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import Partner from '../base/badges/partner'
 import Verified from '../base/badges/verified'
 import Icon from '../card/base/card-icon'
@@ -106,9 +106,9 @@ const Card = ({
       </div>
       {limitedInstall
         && (
-          <div className="relative flex h-8 items-center gap-x-2 px-3 after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0 after:bg-toast-warning-bg after:opacity-40">
+          <div className="relative flex h-8 items-center gap-x-2 px-3 after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-toast-warning-bg after:opacity-40">
             <RiAlertFill className="h-3 w-3 shrink-0 text-text-warning-secondary" />
-            <p className="z-10 grow text-text-secondary system-xs-regular">
+            <p className="z-10 grow system-xs-regular text-text-secondary">
               {t('installModal.installWarning', { ns: 'plugin' })}
             </p>
           </div>
diff --git a/web/app/components/plugins/install-plugin/base/loading-error.tsx b/web/app/components/plugins/install-plugin/base/loading-error.tsx
index 00b4659d05..6750936773 100644
--- a/web/app/components/plugins/install-plugin/base/loading-error.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading-error.tsx
@@ -19,21 +19,21 @@ const LoadingError: FC = () => {
       <div className="hover-bg-components-panel-on-panel-item-bg relative grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs">
         <div className="flex">
           <div
-            className="relative flex h-10 w-10 items-center justify-center gap-2 radius-lg border-[0.5px]
+            className="relative flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
               border-state-destructive-border bg-state-destructive-hover p-1 backdrop-blur-xs"
           >
             <div className="flex h-5 w-5 items-center justify-center">
               <Group className="text-text-quaternary" />
             </div>
-            <div className="absolute bottom-[-4px] right-[-4px] rounded-full border-2 border-components-panel-bg bg-state-destructive-solid">
+            <div className="absolute right-[-4px] bottom-[-4px] rounded-full border-2 border-components-panel-bg bg-state-destructive-solid">
               <RiCloseLine className="h-3 w-3 text-text-primary-on-surface" />
             </div>
           </div>
           <div className="ml-3 grow">
-            <div className="system-md-semibold flex h-5 items-center text-text-destructive">
+            <div className="flex h-5 items-center system-md-semibold text-text-destructive">
               {t('installModal.pluginLoadError', { ns: 'plugin' })}
             </div>
-            <div className="system-xs-regular mt-0.5 text-text-tertiary">
+            <div className="mt-0.5 system-xs-regular text-text-tertiary">
               {t('installModal.pluginLoadErrorDesc', { ns: 'plugin' })}
             </div>
           </div>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 63416e6ae0..6d2b476c51 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { Dependency } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { cn } from '@/utils/classnames'
 import { InstallStep } from '../../types'
 import useHideLogic from '../hooks/use-hide-logic'
 import ReadyToInstall from './ready-to-install'
@@ -56,8 +56,8 @@ const InstallBundle: FC<Props> = ({
       className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
       closable
     >
-      <div className="flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-        <div className="title-2xl-semi-bold self-stretch text-text-primary">
+      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+        <div className="self-stretch title-2xl-semi-bold text-text-primary">
           {getTitle()}
         </div>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index c7ace3d94f..f1e4d1b9bf 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -3,13 +3,13 @@
 import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types'
 import type { Item } from '@/app/components/base/select'
 import type { InstallState } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import { toast } from '@/app/components/base/ui/toast'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
-import { cn } from '@/utils/classnames'
 import { InstallStepFromGitHub } from '../../types'
 import Installed from '../base/installed'
 import { fetchReleases } from '../hooks'
@@ -163,12 +163,12 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
         border-components-panel-border bg-components-panel-bg p-0`)}
       closable
     >
-      <div className="flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
+      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
         <div className="flex grow flex-col items-start gap-1">
-          <div className="self-stretch text-text-primary title-2xl-semi-bold">
+          <div className="self-stretch title-2xl-semi-bold text-text-primary">
             {getTitle()}
           </div>
-          <div className="self-stretch text-text-tertiary system-xs-regular">
+          <div className="self-stretch system-xs-regular text-text-tertiary">
             {!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('installFromGitHub.installNote', { ns: 'plugin' })}
           </div>
         </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index d1d1eb26b7..94504acd98 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { Dependency, PluginDeclaration } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
-import { cn } from '@/utils/classnames'
 import { InstallStep } from '../../types'
 import useHideLogic from '../hooks/use-hide-logic'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
@@ -92,8 +92,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
       closable
     >
-      <div className="flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-        <div className="title-2xl-semi-bold self-stretch text-text-primary">
+      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+        <div className="self-stretch title-2xl-semi-bold text-text-primary">
           {getTitle()}
         </div>
       </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index 72b28bc46c..128b49fcae 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import { cn } from '@/utils/classnames'
 import { InstallStep } from '../../types'
 import Installed from '../base/installed'
 import useHideLogic from '../hooks/use-hide-logic'
@@ -77,8 +77,8 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
       className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
       closable
     >
-      <div className="flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-        <div className="title-2xl-semi-bold self-stretch text-text-primary">
+      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+        <div className="self-stretch title-2xl-semi-bold text-text-primary">
           {getTitle()}
         </div>
       </div>
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index db453a23a4..bff77b5d8e 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from '#i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Group } from '@/app/components/base/icons/src/vender/other'
-import { cn } from '@/utils/classnames'
 import Line from './line'
 
 type Props = {
@@ -26,7 +26,7 @@ const Empty = ({
           <div
             key={index}
             className={cn(
-              'mb-3 mr-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
+              'mr-3 mb-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
               index % 4 === 3 && 'mr-0',
               index > 11 && 'mb-0',
               lightCard && 'bg-background-default-lighter opacity-75',
@@ -43,15 +43,15 @@ const Empty = ({
           </div>
         )
       }
-      <div className="absolute left-1/2 top-1/2 z-2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center">
+      <div className="absolute top-1/2 left-1/2 z-2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center">
         <div className="relative mb-3 flex h-14 w-14 items-center justify-center rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg">
           <Group className="h-5 w-5 text-text-primary" />
-          <Line className="absolute -right-px top-1/2 -translate-y-1/2" />
-          <Line className="absolute -left-px top-1/2 -translate-y-1/2" />
-          <Line className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90" />
-          <Line className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90" />
+          <Line className="absolute top-1/2 -right-px -translate-y-1/2" />
+          <Line className="absolute top-1/2 -left-px -translate-y-1/2" />
+          <Line className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
+          <Line className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
         </div>
-        <div className="system-md-regular text-center text-text-tertiary">
+        <div className="text-center system-md-regular text-text-tertiary">
           {text || t('marketplace.noPluginFound', { ns: 'plugin' })}
         </div>
       </div>
diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index 4ce7272e80..734bbbbf13 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { Plugin } from '../../types'
 import type { MarketplaceCollection } from '../types'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import Empty from '../empty'
 import CardWrapper from './card-wrapper'
 import ListWithCollection from './list-with-collection'
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index 264227b666..21094f39a5 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -3,9 +3,9 @@
 import type { MarketplaceCollection } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { useLocale, useTranslation } from '#i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { getLanguage } from '@/i18n-config/language'
-import { cn } from '@/utils/classnames'
 import { useMarketplaceMoreClick } from '../atoms'
 import CardWrapper from './card-wrapper'
 
@@ -45,7 +45,7 @@ const ListWithCollection = ({
               {
                 collection.searchable && (
                   <div
-                    className="system-xs-medium flex cursor-pointer items-center text-text-accent "
+                    className="flex cursor-pointer items-center system-xs-medium text-text-accent"
                     onClick={() => onMoreClick(collection.search_params)}
                   >
                     {t('marketplace.viewMore', { ns: 'plugin' })}
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index 6473e8bd87..d9f305db72 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { ActivePluginType } from './constants'
 import { useTranslation } from '#i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArchive2Line,
   RiBrain2Line,
@@ -11,7 +12,6 @@ import {
 } from '@remixicon/react'
 import { useSetAtom } from 'jotai'
 import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/plugin'
-import { cn } from '@/utils/classnames'
 import { searchModeAtom, useActivePluginType } from './atoms'
 import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
 
@@ -83,7 +83,7 @@ const PluginTypeSwitch = ({
           <div
             key={option.value}
             className={cn(
-              'system-md-medium flex h-8 cursor-pointer items-center rounded-xl border border-transparent px-3 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+              'flex h-8 cursor-pointer items-center rounded-xl border border-transparent px-3 system-md-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               activePluginType === option.value && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active! text-components-main-nav-nav-button-text-active! shadow-xs',
             )}
             onClick={() => {
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 2e0f85b9ef..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
@@ -142,7 +142,7 @@ describe('SearchBox', () => {
       )
 
       // In non-marketplace mode, search icon appears first
-      expect(container.querySelector('.radius-md')).toBeInTheDocument()
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument()
     })
 
     it('should render placeholder correctly', () => {
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index ee06aebbd6..64f03f1da3 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -1,8 +1,8 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiCloseLine, RiSearchLine } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
-import { cn } from '@/utils/classnames'
 import TagsFilter from './tags-filter'
 
 type SearchBoxProps = {
@@ -37,7 +37,7 @@ const SearchBox = ({
       className={cn('z-11 flex items-center', wrapperClassName)}
     >
       <div className={
-        cn('flex items-center', usedInMarketplace && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md', !usedInMarketplace && 'radius-md border border-transparent bg-components-input-bg-normal focus-within:border-components-input-border-active hover:border-components-input-border-hover', inputClassName)
+        cn('flex items-center', usedInMarketplace && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md', !usedInMarketplace && 'rounded-lg border border-transparent bg-components-input-bg-normal focus-within:border-components-input-border-active hover:border-components-input-border-hover', inputClassName)
       }
       >
         {
@@ -52,7 +52,7 @@ const SearchBox = ({
               <div className="flex grow items-center gap-x-2 p-1">
                 <input
                   className={cn(
-                    'body-md-medium inline-block grow appearance-none bg-transparent text-text-secondary outline-hidden',
+                    'inline-block grow appearance-none bg-transparent body-md-medium text-text-secondary outline-hidden',
                   )}
                   value={search}
                   onChange={(e) => {
@@ -77,12 +77,12 @@ const SearchBox = ({
         {
           !usedInMarketplace && (
             <>
-              <div className="flex grow items-center py-[7px] pl-2 pr-3">
+              <div className="flex grow items-center py-[7px] pr-3 pl-2">
                 <RiSearchLine className="size-4 text-components-input-text-placeholder" />
                 <input
                   autoFocus={autoFocus}
                   className={cn(
-                    'system-sm-regular ml-1.5 mr-1 inline-block grow appearance-none bg-transparent text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder',
+                    'mr-1 ml-1.5 inline-block grow appearance-none bg-transparent system-sm-regular text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder',
                     search && 'mr-2',
                   )}
                   value={search}
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
index e387d52d0e..414216c532 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
@@ -1,8 +1,8 @@
 import type { Tag } from '../../../hooks'
 import { useTranslation } from '#i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type MarketplaceTriggerProps = {
   selectedTagsLength: number
@@ -24,7 +24,7 @@ const MarketplaceTrigger = ({
   return (
     <div
       className={cn(
-        'flex h-8 cursor-pointer select-none items-center rounded-lg px-2 py-1 text-text-tertiary',
+        'flex h-8 cursor-pointer items-center rounded-lg px-2 py-1 text-text-tertiary select-none',
         !!selectedTagsLength && 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3',
         open && !selectedTagsLength && 'bg-state-base-hover',
       )}
@@ -32,7 +32,7 @@ const MarketplaceTrigger = ({
       <div className="p-0.5">
         <RiFilter3Line className={cn('size-4', !!selectedTagsLength && 'text-text-secondary')} />
       </div>
-      <div className="system-sm-medium flex items-center gap-x-1 p-1">
+      <div className="flex items-center gap-x-1 p-1 system-sm-medium">
         {
           !selectedTagsLength && <span>{t('allTags', { ns: 'pluginTags' })}</span>
         }
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
index 4e1fbebd46..6c733ea546 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
@@ -1,7 +1,7 @@
 import type { Tag } from '../../../hooks'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseCircleFill, RiPriceTag3Line } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ToolSelectorTriggerProps = {
   selectedTagsLength: number
@@ -20,9 +20,9 @@ const ToolSelectorTrigger = ({
 }: ToolSelectorTriggerProps) => {
   return (
     <div className={cn(
-      'flex h-7 cursor-pointer select-none items-center rounded-md p-0.5 text-text-tertiary',
-      !selectedTagsLength && 'py-1 pl-1.5 pr-2',
-      !!selectedTagsLength && 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg py-0.5 pl-1 pr-1.5 shadow-xs shadow-shadow-shadow-3',
+      'flex h-7 cursor-pointer items-center rounded-md p-0.5 text-text-tertiary select-none',
+      !selectedTagsLength && 'py-1 pr-2 pl-1.5',
+      !!selectedTagsLength && 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg py-0.5 pr-1.5 pl-1 shadow-xs shadow-shadow-shadow-3',
       open && !selectedTagsLength && 'bg-state-base-hover',
     )}
     >
@@ -31,7 +31,7 @@ const ToolSelectorTrigger = ({
       </div>
       {
         !!selectedTagsLength && (
-          <div className="system-sm-medium flex items-center gap-x-0.5 px-0.5 py-1">
+          <div className="flex items-center gap-x-0.5 px-0.5 py-1 system-sm-medium">
             <span className="text-text-secondary">
               {tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',')}
             </span>
diff --git a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
index 4da3844c0a..099564c425 100644
--- a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import PluginTypeSwitch from './plugin-type-switch'
 import SearchBoxWrapper from './search-box/search-box-wrapper'
 
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx
index 46d57a8ab3..f39148afc8 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx
@@ -42,7 +42,7 @@ vi.mock('@/app/components/base/form/types', () => ({
   FormTypeEnum: { radio: 'radio' },
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index fa094e467d..31e87564e7 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -1,6 +1,7 @@
 import type { PluginPayload } from '../types'
 import type { FormSchema } from '@/app/components/base/form/types'
 import type { ButtonProps } from '@/app/components/base/ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiClipboardLine,
   RiEqualizer2Line,
@@ -19,7 +20,6 @@ import { FormTypeEnum } from '@/app/components/base/form/types'
 import { Button } from '@/app/components/base/ui/button'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { openOAuthPopup } from '@/hooks/use-oauth'
-import { cn } from '@/utils/classnames'
 import {
   useGetPluginOAuthClientSchemaHook,
   useGetPluginOAuthUrlHook,
diff --git a/web/app/components/plugins/plugin-auth/authorize/index.tsx b/web/app/components/plugins/plugin-auth/authorize/index.tsx
index 1dbd41b985..fe82498fad 100644
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@@ -1,13 +1,13 @@
 import type { PluginPayload } from '../types'
 import type { AddApiKeyButtonProps } from './add-api-key-button'
 import type { AddOAuthButtonProps } from './add-oauth-button'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import AddApiKeyButton from './add-api-key-button'
 import AddOAuthButton from './add-oauth-button'
 
@@ -118,7 +118,7 @@ const Authorize = ({
         }
         {
           showDivider && canOAuth && canApiKey && (
-            <div className="system-2xs-medium-uppercase flex shrink-0 flex-col items-center justify-between text-text-tertiary">
+            <div className="flex shrink-0 flex-col items-center justify-between system-2xs-medium-uppercase text-text-tertiary">
               <div className="h-2 w-px bg-divider-subtle"></div>
               or
               <div className="h-2 w-px bg-divider-subtle"></div>
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
index 0e111d6237..548b1fb175 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import {
   memo,
@@ -5,7 +6,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 
 type AuthorizedInDataSourceNodeProps = {
   authorizationsNum: number
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index d7c52322e0..048bbf3e8f 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -2,6 +2,7 @@ import type {
   Credential,
   PluginPayload,
 } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   memo,
@@ -11,7 +12,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import {
   Authorized,
   usePluginAuth,
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index dc905d9f8c..4729909a1f 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -2,6 +2,7 @@ import type { Credential, PluginPayload } from '../types'
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
@@ -28,7 +29,6 @@ import {
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import Authorize from '../authorize'
 import ApiKeyModal from '../authorize/api-key-modal'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index 3efad1ae48..82e3fc4563 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -1,4 +1,5 @@
 import type { Credential } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckLine,
   RiDeleteBinLine,
@@ -17,7 +18,6 @@ import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import { CredentialTypeEnum } from '../types'
 
 type ItemProps = {
@@ -79,7 +79,7 @@ const Item = ({
         renaming && (
           <div className="flex w-full items-center space-x-1">
             <Input
-              wrapperClassName="grow radius-sm"
+              wrapperClassName="grow rounded-md"
               className="h-6"
               value={renameValue}
               onChange={e => setRenameValue(e.target.value)}
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index fb7b81195e..f54093f0f9 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -2,6 +2,7 @@ import type {
   Credential,
   PluginPayload,
 } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   memo,
@@ -11,7 +12,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 import Authorize from './authorize'
 import Authorized from './authorized'
 import { usePluginAuth } from './hooks/use-plugin-auth'
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth.tsx b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
index 23834d3078..2ddb03fae1 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
@@ -1,6 +1,6 @@
 import type { PluginPayload } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import Authorize from './authorize'
 import Authorized from './authorized'
 import { usePluginAuth } from './hooks/use-plugin-auth'
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 e0aa13948b..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
@@ -144,7 +144,7 @@ vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (obj: Record<string, string>) => obj?.en_US || '',
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
index 8f26aa6c5a..50d63742ac 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
@@ -7,7 +7,7 @@ vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `https://docs.example.com${path}`,
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/index.spec.tsx
index c3989ab71f..3467aad066 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/index.spec.tsx
@@ -119,7 +119,7 @@ vi.mock('../../readme-panel/entrance', () => ({
 }))
 
 // Mock classnames utility
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx
index b8d84763df..fa3d6f2266 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx
@@ -10,7 +10,7 @@ vi.mock('@/context/global-public-context', () => ({
     selector({ systemFeatures: { enable_marketplace: true } }),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx
index 6203545943..350bf6956b 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-detail.spec.tsx
@@ -7,7 +7,7 @@ vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (obj: Record<string, string>) => obj?.en_US || '',
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-item.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-item.spec.tsx
index 31afeaf9f1..f96f6adb78 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-item.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/strategy-item.spec.tsx
@@ -7,7 +7,7 @@ vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (obj: Record<string, string>) => obj?.en_US || '',
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-trigger.spec.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-trigger.spec.tsx
index d52a62a2ee..1b6ac7f1f0 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-trigger.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-trigger.spec.tsx
@@ -6,7 +6,7 @@ vi.mock('@/app/components/base/app-icon', () => ({
   default: ({ size }: { size: string }) => <div data-testid="app-icon" data-size={size} />,
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index 8e7affad8e..b525cb9b2f 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
 import { useAppInputsFormSchema } from '@/app/components/plugins/plugin-detail-panel/app-selector/hooks/use-app-inputs-form-schema'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   value?: {
@@ -37,7 +37,7 @@ const AppInputsPanel = ({
     <div className={cn('flex max-h-[240px] flex-col rounded-b-2xl border-t border-divider-subtle pb-4')}>
       {isLoading && <div className="pt-3"><Loading type="app" /></div>}
       {!isLoading && (
-        <div className="system-sm-semibold mb-2 mt-3 flex h-6 shrink-0 items-center px-4 text-text-secondary">
+        <div className="mt-3 mb-2 flex h-6 shrink-0 items-center px-4 system-sm-semibold text-text-secondary">
           {t('appSelector.params', { ns: 'app' })}
         </div>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
index c83e1bea88..aacafb3c31 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   open: boolean
@@ -36,10 +36,10 @@ const AppTrigger = ({
         />
       )}
       {appDetail && (
-        <div title={appDetail.name} className="system-sm-medium grow text-components-input-text-filled">{appDetail.name}</div>
+        <div title={appDetail.name} className="grow system-sm-medium text-components-input-text-filled">{appDetail.name}</div>
       )}
       {!appDetail && (
-        <div className="system-sm-regular grow truncate text-components-input-text-placeholder">{t('appSelector.placeholder', { ns: 'app' })}</div>
+        <div className="grow truncate system-sm-regular text-components-input-text-placeholder">{t('appSelector.placeholder', { ns: 'app' })}</div>
       )}
       <RiArrowDownSLine className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
     </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index 63716a4dc2..5a89afa2c9 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { PluginDetail } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
@@ -15,7 +16,6 @@ import { useAppContext } from '@/context/app-context'
 import { useGetLanguage, useLocale } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { useAllToolProviders } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import { AutoUpdateLine } from '../../../base/icons/src/vender/system'
 import Verified from '../../base/badges/verified'
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index 679801a56a..c0e8e56144 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -152,7 +152,7 @@ const EndpointCard = ({
 
   return (
     <div className="rounded-xl bg-background-section-burn p-0.5">
-      <div className="group radius-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-2.5 pl-3">
+      <div className="group rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-2.5 pl-3">
         <div className="flex items-center">
           <div className="mb-1 flex h-6 grow items-center gap-1 system-md-semibold text-text-secondary">
             <RiLoginCircleLine className="h-4 w-4" />
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index 67301120ed..c3c09db786 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -1,4 +1,5 @@
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiApps2AddLine,
@@ -18,7 +19,6 @@ import {
   useEndpointList,
   useInvalidateEndpointList,
 } from '@/service/use-endpoints'
-import { cn } from '@/utils/classnames'
 import EndpointCard from './endpoint-card'
 import EndpointModal from './endpoint-modal'
 import { NAME_FIELD } from './utils'
@@ -64,7 +64,7 @@ const EndpointList = ({ detail }: Props) => {
 
   return (
     <div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
-      <div className="mb-1 flex h-6 items-center justify-between text-text-secondary system-sm-semibold-uppercase">
+      <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
         <div className="flex items-center gap-0.5">
           {t('detailPanel.endpoints', { ns: 'plugin' })}
           <Tooltip
@@ -75,13 +75,13 @@ const EndpointList = ({ detail }: Props) => {
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
                   <RiApps2AddLine className="h-4 w-4 text-text-tertiary" />
                 </div>
-                <div className="text-text-tertiary system-xs-regular">{t('detailPanel.endpointsTip', { ns: 'plugin' })}</div>
+                <div className="system-xs-regular text-text-tertiary">{t('detailPanel.endpointsTip', { ns: 'plugin' })}</div>
                 <a
                   href={docLink('/develop-plugin/getting-started/getting-started-dify-plugin')}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <div className="inline-flex cursor-pointer items-center gap-1 text-text-accent system-xs-regular">
+                  <div className="inline-flex cursor-pointer items-center gap-1 system-xs-regular text-text-accent">
                     <RiBookOpenLine className="h-3 w-3" />
                     {t('detailPanel.endpointsDocLink', { ns: 'plugin' })}
                   </div>
@@ -95,7 +95,7 @@ const EndpointList = ({ detail }: Props) => {
         </ActionButton>
       </div>
       {data.endpoints.length === 0 && (
-        <div className="mb-1 flex justify-center radius-lg bg-background-section p-3 text-text-tertiary system-xs-regular">{t('detailPanel.endpointsEmpty', { ns: 'plugin' })}</div>
+        <div className="mb-1 flex justify-center rounded-[10px] bg-background-section p-3 system-xs-regular text-text-tertiary">{t('detailPanel.endpointsEmpty', { ns: 'plugin' })}</div>
       )}
       <div className="flex flex-col gap-2">
         {data.endpoints.map((item, index) => (
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 467ff43f57..4c694d4293 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { FormSchema } from '../../base/form/types'
 import type { PluginDetail } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import { cn } from '@/utils/classnames'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 5e8009307f..3041d2e2a6 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect } from 'react'
 import Drawer from '@/app/components/base/drawer'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { cn } from '@/utils/classnames'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 import ActionList from './action-list'
 import AgentStrategyList from './agent-strategy-list'
@@ -59,7 +59,7 @@ const PluginDetailPanel: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       {detail && (
         <>
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index 33e9912f87..5f5c0494a9 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -8,6 +8,7 @@ import type {
   ModelFeatureEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -24,7 +25,6 @@ import AgentModelTrigger from '@/app/components/header/account-setting/model-pro
 import Trigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import { fetchAndMergeValidCompletionParams } from '@/utils/completion-params'
 import LLMParamsPanel from './llm-params-panel'
 import TTSParamsPanel from './tts-params-panel'
@@ -229,7 +229,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
         >
           <div className="max-h-[420px] overflow-y-auto p-4 pt-3">
             <div className="relative">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">
+              <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">
                 {t('modelProvider.model', { ns: 'common' }).toLocaleUpperCase()}
               </div>
               <ModelSelector
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
index 58cdb0946f..d699621c22 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
@@ -3,6 +3,7 @@ import type {
   ModelParameterRule,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { ParameterValue } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import ParameterItem from '@/app/components/header/account-setting/model-provide
 import PresetsParameter from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
 import { useModelParameterRules } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   isAdvancedMode: boolean
@@ -74,7 +74,7 @@ const LLMParamsPanel = ({
   return (
     <>
       <div className="mb-2 flex items-center justify-between">
-        <div className={cn('system-sm-semibold flex h-6 items-center text-text-secondary')}>{t('modelProvider.parameters', { ns: 'common' })}</div>
+        <div className={cn('flex h-6 items-center system-sm-semibold text-text-secondary')}>{t('modelProvider.parameters', { ns: 'common' })}</div>
         {
           PROVIDER_WITH_PRESET_TONE.includes(provider) && (
             <PresetsParameter onSelect={handleSelectPresetParameter} />
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index 69c6b89646..723560832a 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -1,6 +1,7 @@
 import type { Node } from 'reactflow'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiQuestionLine,
@@ -14,7 +15,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import { useAllMCPTools } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   disabled?: boolean
@@ -109,7 +109,7 @@ const MultipleToolSelector = ({
           className={cn('relative flex grow items-center gap-0.5', supportCollapse && 'cursor-pointer')}
           onClick={handleCollapse}
         >
-          <div className="system-sm-semibold-uppercase flex h-6 items-center text-text-secondary">{label}</div>
+          <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">{label}</div>
           {required && <div className="text-red-500">*</div>}
           {tooltip && (
             <Tooltip
@@ -129,11 +129,11 @@ const MultipleToolSelector = ({
         </div>
         {value.length > 0 && (
           <>
-            <div className="system-xs-medium flex items-center gap-1 text-text-tertiary">
+            <div className="flex items-center gap-1 system-xs-medium text-text-tertiary">
               <span>{`${enabledCount}/${value.length}`}</span>
               <span>{t('agent.tools.enabled', { ns: 'appDebug' })}</span>
             </div>
-            <Divider type="vertical" className="ml-3 mr-1 h-3" />
+            <Divider type="vertical" className="mr-1 ml-3 h-3" />
           </>
         )}
         {!disabled && (
@@ -152,7 +152,7 @@ const MultipleToolSelector = ({
       {!collapse && (
         <>
           {value.length === 0 && (
-            <div className="system-xs-regular flex justify-center radius-lg bg-background-section p-3 text-text-tertiary">{t('detailPanel.toolSelector.empty', { ns: 'plugin' })}</div>
+            <div className="flex justify-center rounded-[10px] bg-background-section p-3 system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.empty', { ns: 'plugin' })}</div>
           )}
           {value.length > 0 && value.map((item, index) => (
             <div className="mb-1" key={index}>
diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
index b056f97793..6724228313 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Placement } from '@/app/components/base/ui/placement'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -11,7 +12,6 @@ import {
   DropdownMenuTrigger,
 } from '@/app/components/base/ui/dropdown-menu'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 import { PluginSource } from '../types'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index 9adf5f3b07..8fda455b26 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -4,6 +4,7 @@ import type {
   StrategyDetail as StrategyDetailType,
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -18,7 +19,6 @@ import Icon from '@/app/components/plugins/card/base/card-icon'
 import Description from '@/app/components/plugins/card/base/description'
 import { API_PREFIX } from '@/config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   provider: {
@@ -81,18 +81,18 @@ const StrategyDetail: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <>
         {/* header */}
         <div className="relative border-b border-divider-subtle p-4 pb-3">
-          <div className="absolute right-3 top-3">
+          <div className="absolute top-3 right-3">
             <ActionButton onClick={onHide}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
           <div
-            className="system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary"
+            className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
             onClick={onHide}
           >
             <RiArrowLeftLine className="h-4 w-4" />
@@ -102,13 +102,13 @@ const StrategyDetail: FC<Props> = ({
             <Icon size="tiny" className="h-6 w-6" src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
             <div className="">{getValueFromI18nObject(provider.label)}</div>
           </div>
-          <div className="system-md-semibold mt-1 text-text-primary">{getValueFromI18nObject(detail.identity.label)}</div>
+          <div className="mt-1 system-md-semibold text-text-primary">{getValueFromI18nObject(detail.identity.label)}</div>
           <Description className="mt-3" text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
         </div>
         {/* form */}
         <div className="h-full">
           <div className="flex h-full flex-col overflow-y-auto">
-            <div className="system-sm-semibold-uppercase p-4 pb-1 text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
+            <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
             <div className="px-4">
               {detail.parameters.length > 0 && (
                 <div className="space-y-1 py-2">
@@ -124,7 +124,7 @@ const StrategyDetail: FC<Props> = ({
                         )}
                       </div>
                       {item.human_description && (
-                        <div className="system-xs-regular mt-0.5 text-text-tertiary">
+                        <div className="mt-0.5 system-xs-regular text-text-tertiary">
                           {getValueFromI18nObject(item.human_description)}
                         </div>
                       )}
@@ -138,7 +138,7 @@ const StrategyDetail: FC<Props> = ({
                 <div className="px-4">
                   <Divider className="mt-2!" />
                 </div>
-                <div className="system-sm-semibold-uppercase p-4 pb-1 text-text-primary">OUTPUT</div>
+                <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">OUTPUT</div>
                 {outputSchema.length > 0 && (
                   <div className="space-y-1 px-4 py-2">
                     {outputSchema.map((outputItem, index) => (
@@ -148,7 +148,7 @@ const StrategyDetail: FC<Props> = ({
                           <div className="system-xs-regular text-text-tertiary">{outputItem.type}</div>
                         </div>
                         {outputItem.description && (
-                          <div className="system-xs-regular mt-0.5 text-text-tertiary">
+                          <div className="mt-0.5 system-xs-regular text-text-tertiary">
                             {outputItem.description}
                           </div>
                         )}
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
index 280f1bce49..b04250efc8 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
@@ -3,10 +3,10 @@ import type {
   StrategyDetail,
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import { cn } from '@/utils/classnames'
 import StrategyDetailPanel from './strategy-detail'
 
 type Props = {
@@ -35,8 +35,8 @@ const StrategyItem = ({
         className={cn('bg-components-panel-item-bg mb-2 cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover')}
         onClick={() => setShowDetail(true)}
       >
-        <div className="system-md-semibold pb-0.5 text-text-secondary">{getValueFromI18nObject(detail.identity.label)}</div>
-        <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
+        <div className="pb-0.5 system-md-semibold text-text-secondary">{getValueFromI18nObject(detail.identity.label)}</div>
+        <div className="line-clamp-2 system-xs-regular text-text-tertiary" title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
       </div>
       {showDetail && (
         <StrategyDetailPanel
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index db4ce41d40..73b28bd60e 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -1,5 +1,6 @@
 import type { Option } from '@/app/components/base/select/custom'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useCallback, useMemo, useState } from 'react'
@@ -12,7 +13,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
-import { cn } from '@/utils/classnames'
 import { SupportedCreationMethods } from '../../../types'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index 252caad91d..c78cda7a13 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
 import SubscriptionCard from './subscription-card'
 import { useSubscriptionList } from './use-subscription-list'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
index 6ccab000c4..1960103822 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { TriggerLogEntity } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiArrowRightSLine,
@@ -14,7 +15,6 @@ import { useTranslation } from 'react-i18next'
 import { toast } from '@/app/components/base/ui/toast'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   logs: TriggerLogEntity[]
@@ -96,8 +96,8 @@ const LogViewer = ({ logs, className }: Props) => {
             <RiFileCopyLine className="h-4 w-4 text-text-tertiary" />
           </button>
         </div>
-        <div className="px-2 pb-2 pt-1">
-          <pre className="code-xs-regular whitespace-pre-wrap break-all text-text-secondary">
+        <div className="px-2 pt-1 pb-2">
+          <pre className="code-xs-regular break-all whitespace-pre-wrap text-text-secondary">
             {String(parsedData)}
           </pre>
         </div>
@@ -127,7 +127,7 @@ const LogViewer = ({ logs, className }: Props) => {
             )}
           >
             {isError && (
-              <div className="pointer-events-none absolute left-0 top-0 h-7 w-[179px]">
+              <div className="pointer-events-none absolute top-0 left-0 h-7 w-[179px]">
                 <svg xmlns="http://www.w3.org/2000/svg" width="179" height="28" viewBox="0 0 179 28" fill="none" className="h-full w-full">
                   <g filter="url(#filter0_f_error_glow)">
                     <circle cx="27" cy="14" r="32" fill="#F04438" fillOpacity="0.25" />
@@ -147,7 +147,7 @@ const LogViewer = ({ logs, className }: Props) => {
               onClick={() => toggleLogExpansion(logId)}
               className={cn(
                 'flex w-full items-center justify-between px-2 py-1.5 text-left',
-                isExpanded ? 'pb-1 pt-2' : 'min-h-7',
+                isExpanded ? 'pt-2 pb-1' : 'min-h-7',
               )}
             >
               <div className="flex items-center gap-0">
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index 42c7676b42..5f755ff634 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { SimpleSubscription } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { SubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
-import { cn } from '@/utils/classnames'
 import { SubscriptionListMode } from './types'
 import { useSubscriptionList } from './use-subscription-list'
 
@@ -76,7 +76,7 @@ const SubscriptionTriggerButton: React.FC<SubscriptionTriggerButtonProps> = ({
       onClick={onClick}
     >
       <RiWebhookLine className={cn('h-3.5 w-3.5 shrink-0 text-text-secondary', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')} />
-      <span className={cn('system-xs-medium truncate text-components-button-ghost-text', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')}>
+      <span className={cn('truncate system-xs-medium text-components-button-ghost-text', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')}>
         {statusConfig.label}
       </span>
       <RiArrowDownSLine
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
index f2e77e3ada..2e08e02252 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckLine, RiDeleteBinLine, RiWebhookLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
 import { DeleteConfirm } from './delete-confirm'
 import { useSubscriptionList } from './use-subscription-list'
@@ -28,7 +28,7 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
   return (
     <div className="w-[320px] p-1">
       {subscriptionCount > 0 && (
-        <div className="ml-7 mr-1.5 flex h-8 items-center justify-between">
+        <div className="mr-1.5 ml-7 flex h-8 items-center justify-between">
           <div className="flex shrink-0 items-center gap-1">
             <span className="system-sm-semibold-uppercase text-text-secondary">
               {t('subscription.listNum', { ns: 'pluginTrigger', num: subscriptionCount })}
@@ -71,7 +71,7 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
                 e.stopPropagation()
                 setDeletedSubscription(subscription)
               }}
-              className="subscription-delete-btn hidden shrink-0 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:flex"
+              className="subscription-delete-btn hidden shrink-0 text-text-tertiary group-hover:flex hover:bg-state-destructive-hover hover:text-text-destructive"
             >
               <RiDeleteBinLine className="size-4" />
             </ActionButton>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
index 217b11f466..84e9b61173 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -10,7 +11,6 @@ import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { DeleteConfirm } from './delete-confirm'
 import { EditModal } from './edit'
 
@@ -74,12 +74,12 @@ const SubscriptionCard = ({ data, pluginDetail }: Props) => {
             )}
             position="left"
           >
-            <div className="system-xs-regular flex-1 truncate text-text-tertiary">
+            <div className="flex-1 truncate system-xs-regular text-text-tertiary">
               {data.endpoint}
             </div>
           </Tooltip>
           <div className="mx-2 text-xs text-text-tertiary opacity-30">·</div>
-          <div className="system-xs-regular shrink-0 text-text-tertiary">
+          <div className="shrink-0 system-xs-regular text-text-tertiary">
             {data.workflows_in_use > 0 ? t('subscription.list.item.usedByNum', { ns: 'pluginTrigger', num: data.workflows_in_use }) : t('subscription.list.item.noUsed', { ns: 'pluginTrigger' })}
           </div>
         </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
index e1b8ca86fe..bd2bc0dd5c 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
@@ -6,7 +6,7 @@ vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (obj: Record<string, string> | string) => typeof obj === 'string' ? obj : obj?.en_US || '',
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
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 1edc147370..c651405009 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
@@ -6,6 +6,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightUpLine,
   RiBracesLine,
@@ -28,7 +29,6 @@ import VarReferencePicker from '@/app/components/workflow/nodes/_base/components
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
-import { cn } from '@/utils/classnames'
 import {
   createPickerProps,
   getFieldFlags,
@@ -159,14 +159,14 @@ const ReasoningConfigForm: React.FC<Props> = ({
 
     return (
       <div key={variable} className="space-y-0.5">
-        <div className="system-sm-semibold flex items-center justify-between py-2 text-text-secondary">
+        <div className="flex items-center justify-between py-2 system-sm-semibold text-text-secondary">
           <div className="flex items-center">
-            <span className={cn('code-sm-semibold max-w-[140px] truncate text-text-secondary')} title={fieldTitle}>{fieldTitle}</span>
+            <span className={cn('max-w-[140px] truncate code-sm-semibold text-text-secondary')} title={fieldTitle}>{fieldTitle}</span>
             {required && (
               <span className="ml-1 text-red-500">*</span>
             )}
             {tooltipContent}
-            <span className="system-xs-regular mx-1 text-text-quaternary">·</span>
+            <span className="mx-1 system-xs-regular text-text-quaternary">·</span>
             <span className="system-xs-regular text-text-tertiary">{resolveTargetVarType(type)}</span>
             {isShowJSONEditor && (
               <Tooltip
@@ -178,7 +178,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 asChild={false}
               >
                 <div
-                  className="ml-0.5 cursor-pointer radius-xs p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                  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)}
                 >
                   <RiBracesLine className="size-3.5" />
@@ -187,7 +187,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
             )}
 
           </div>
-          <div className="flex cursor-pointer items-center gap-1 radius-sm border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover" onClick={() => handleAutomatic(variable, !auto, type)}>
+          <div className="flex cursor-pointer items-center gap-1 rounded-md border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover" onClick={() => handleAutomatic(variable, !auto, type)}>
             <span className="system-xs-medium text-text-secondary">{t('detailPanel.toolSelector.auto', { ns: 'plugin' })}</span>
             <Switch
               size="xs"
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
index 997d2ac131..90893c88ec 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Collection } from '@/app/components/tools/types'
 import type { ToolCredentialFormSchema } from '@/app/components/tools/utils/to-form-schema'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightUpLine,
 } from '@remixicon/react'
@@ -15,7 +16,6 @@ import Form from '@/app/components/header/account-setting/model-provider-page/mo
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   collection: Collection
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index 440a27bc21..52ef1819e2 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEqualizer2Line,
@@ -19,7 +20,6 @@ import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/compo
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   icon?: string | { content?: string, background?: string }
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
index 453520df01..7b7fe38a36 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiEqualizer2Line,
@@ -8,7 +9,6 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   open: boolean
@@ -44,10 +44,10 @@ const ToolTrigger = ({
         </div>
       )}
       {value?.tool_name && (
-        <div className="system-sm-medium grow text-components-input-text-filled">{value.tool_name}</div>
+        <div className="grow system-sm-medium text-components-input-text-filled">{value.tool_name}</div>
       )}
       {!value?.provider_name && (
-        <div className="system-sm-regular grow text-components-input-text-placeholder">
+        <div className="grow system-sm-regular text-components-input-text-placeholder">
           {!isConfigure ? t('detailPanel.toolSelector.placeholder', { ns: 'plugin' }) : t('detailPanel.configureTool', { ns: 'plugin' })}
         </div>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 5a0d5daa55..b5e69ce254 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -7,6 +7,7 @@ import type { FC } from 'react'
 import type { Node } from 'reactflow'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -16,7 +17,6 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { CollectionType } from '@/app/components/tools/types'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import {
   ToolAuthorizationSection,
   ToolBaseForm,
@@ -192,7 +192,7 @@ const ToolSelector: FC<Props> = ({
         )}
         >
           {/* Header */}
-          <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">
+          <div className="px-4 pt-3.5 pb-1 system-xl-semibold text-text-primary">
             {t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}
           </div>
 
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx
index a4414adb59..a04aba3e57 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-detail-drawer.spec.tsx
@@ -8,7 +8,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
   useLanguage: () => 'en_US',
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-list.spec.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-list.spec.tsx
index 3ecd248544..bed27c0292 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-list.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/__tests__/event-list.spec.tsx
@@ -7,7 +7,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
   useLanguage: () => 'en_US',
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
index 72f79230d2..bacb7bbd66 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
@@ -3,6 +3,7 @@ import type { TFunction } from 'i18next'
 import type { FC } from 'react'
 import type { TriggerEvent } from '@/app/components/plugins/types'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -17,7 +18,6 @@ import Description from '@/app/components/plugins/card/base/description'
 import OrgInfo from '@/app/components/plugins/card/base/org-info'
 import { triggerEventParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import Field from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field'
-import { cn } from '@/utils/classnames'
 
 type EventDetailDrawerProps = {
   eventInfo: TriggerEvent
@@ -88,16 +88,16 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <div className="relative border-b border-divider-subtle p-4 pb-3">
-        <div className="absolute right-3 top-3">
+        <div className="absolute top-3 right-3">
           <ActionButton onClick={onClose}>
             <RiCloseLine className="h-4 w-4" />
           </ActionButton>
         </div>
         <div
-          className="system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary"
+          className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
           onClick={onClose}
         >
           <RiArrowLeftLine className="h-4 w-4" />
@@ -111,10 +111,10 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
             packageName={providerInfo.name.split('/').pop() || ''}
           />
         </div>
-        <div className="system-md-semibold mt-1 text-text-primary">{eventInfo?.identity?.label[language]}</div>
-        <Description className="mb-2 mt-3 h-auto" text={eventInfo.description[language]} descriptionLineRows={2}></Description>
+        <div className="mt-1 system-md-semibold text-text-primary">{eventInfo?.identity?.label[language]}</div>
+        <Description className="mt-3 mb-2 h-auto" text={eventInfo.description[language]} descriptionLineRows={2}></Description>
       </div>
-      <div className="flex h-full flex-col gap-2 overflow-y-auto px-4 pb-2 pt-4">
+      <div className="flex h-full flex-col gap-2 overflow-y-auto px-4 pt-4 pb-2">
         <div className="system-sm-semibold-uppercase text-text-secondary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
         {parametersSchemas.length > 0
           ? (
@@ -130,7 +130,7 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
                     )}
                   </div>
                   {item.description && (
-                    <div className="system-xs-regular mt-0.5 text-text-tertiary">
+                    <div className="mt-0.5 system-xs-regular text-text-tertiary">
                       {item.description?.[language]}
                     </div>
                   )}
@@ -138,7 +138,7 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
               ))
             )
           : <div className="system-xs-regular text-text-tertiary">{t('events.item.noParameters', { ns: 'pluginTrigger' })}</div>}
-        <Divider className="mb-2 mt-1 h-px" />
+        <Divider className="mt-1 mb-2 h-px" />
         <div className="flex flex-col gap-2">
           <div className="system-sm-semibold-uppercase text-text-secondary">{t('events.output', { ns: 'pluginTrigger' })}</div>
           <div className="relative left-[-7px]">
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
index d03183d434..398dc7dbf2 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
@@ -1,10 +1,10 @@
 import type { TriggerEvent } from '@/app/components/plugins/types'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useTriggerProviderInfo } from '@/service/use-triggers'
-import { cn } from '@/utils/classnames'
 import { usePluginStore } from '../store'
 import { EventDetailDrawer } from './event-detail-drawer'
 
@@ -25,8 +25,8 @@ const TriggerEventCard = ({ eventInfo, providerInfo }: TriggerEventCardProps) =>
         className={cn('bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover')}
         onClick={() => setShowDetail(true)}
       >
-        <div className="system-md-semibold pb-0.5 text-text-secondary">{title}</div>
-        <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={descriptionText}>{descriptionText}</div>
+        <div className="pb-0.5 system-md-semibold text-text-secondary">{title}</div>
+        <div className="line-clamp-2 system-xs-regular text-text-tertiary" title={descriptionText}>{descriptionText}</div>
       </div>
       {showDetail && (
         <EventDetailDrawer
@@ -50,9 +50,9 @@ export const TriggerEventsList = () => {
     return null
 
   return (
-    <div className="px-4 pb-4 pt-2">
+    <div className="px-4 pt-2 pb-4">
       <div className="mb-1 py-1">
-        <div className="system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary">
+        <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
           {t('events.actionNum', { ns: 'pluginTrigger', num: triggerEvents.length, event: t(`events.${triggerEvents.length > 1 ? 'events' : 'event'}`, { ns: 'pluginTrigger' }) })}
         </div>
       </div>
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 70a4c90fef..ad03c002d8 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { PluginDetail } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -18,7 +19,6 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 import { isEqualOrLaterThanVersion } from '@/utils/semver'
 import { getMarketplaceUrl } from '@/utils/var'
 import Badge from '../../base/badge'
@@ -154,7 +154,7 @@ const PluginItem: FC<Props> = ({
           </div>
         </div>
       </div>
-      <div className="mb-1 mt-1.5 flex h-4 items-center gap-x-2 px-4">
+      <div className="mt-1.5 mb-1 flex h-4 items-center gap-x-2 px-4">
         {/* Organization & Name */}
         <div className="flex grow items-center overflow-hidden">
           <OrgInfo
@@ -164,8 +164,8 @@ const PluginItem: FC<Props> = ({
           />
           {category === PluginCategoryEnum.extension && (
             <>
-              <div className="mx-2 text-text-quaternary system-xs-regular">·</div>
-              <div className="flex items-center gap-x-1 overflow-hidden text-text-tertiary system-xs-regular">
+              <div className="mx-2 system-xs-regular text-text-quaternary">·</div>
+              <div className="flex items-center gap-x-1 overflow-hidden system-xs-regular text-text-tertiary">
                 <RiLoginCircleLine className="size-3 shrink-0" />
                 <span
                   className="truncate"
@@ -183,7 +183,7 @@ const PluginItem: FC<Props> = ({
             && (
               <>
                 <a href={`https://github.com/${meta!.repo}`} target="_blank" className="flex items-center gap-1">
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">{t('from', { ns: 'plugin' })}</div>
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">{t('from', { ns: 'plugin' })}</div>
                   <div className="flex items-center space-x-0.5 text-text-secondary">
                     <Github className="h-3 w-3" />
                     <div className="system-2xs-semibold-uppercase">GitHub</div>
@@ -196,7 +196,7 @@ const PluginItem: FC<Props> = ({
             && (
               <>
                 <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="flex items-center gap-0.5">
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">
                     {t('from', { ns: 'plugin' })}
                     {' '}
                     <span className="text-text-secondary">marketplace</span>
@@ -210,7 +210,7 @@ const PluginItem: FC<Props> = ({
               <>
                 <div className="flex items-center gap-1">
                   <RiHardDrive3Line className="h-3 w-3 text-text-tertiary" />
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">Local Plugin</div>
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">Local Plugin</div>
                 </div>
               </>
             )}
@@ -219,7 +219,7 @@ const PluginItem: FC<Props> = ({
               <>
                 <div className="flex items-center gap-1">
                   <RiBugLine className="h-3 w-3 text-text-warning" />
-                  <div className="text-text-warning system-2xs-medium-uppercase">Debugging Plugin</div>
+                  <div className="system-2xs-medium-uppercase text-text-warning">Debugging Plugin</div>
                 </div>
               </>
             )}
@@ -236,7 +236,7 @@ const PluginItem: FC<Props> = ({
       </div>
       {/* BG Effect for Deprecated Plugin */}
       {source === PluginSource.marketplace && enable_marketplace && isDeprecated && (
-        <div className="absolute bottom-[-71px] right-[-45px] z-0 size-40 bg-components-badge-status-light-warning-halo opacity-60 blur-[120px]" />
+        <div className="absolute right-[-45px] bottom-[-71px] z-0 size-40 bg-components-badge-status-light-warning-halo opacity-60 blur-[120px]" />
       )}
     </div>
   )
diff --git a/web/app/components/plugins/plugin-page/filter-management/__tests__/category-filter.spec.tsx b/web/app/components/plugins/plugin-page/filter-management/__tests__/category-filter.spec.tsx
index 6c20bb0b28..051d16792a 100644
--- a/web/app/components/plugins/plugin-page/filter-management/__tests__/category-filter.spec.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/__tests__/category-filter.spec.tsx
@@ -14,7 +14,7 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
   ),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
index 81b7f6cb82..f6ace774e8 100644
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiCloseCircleFill,
@@ -13,7 +14,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { useCategories } from '../../hooks'
 
 type CategoriesFilterProps = {
@@ -54,7 +54,7 @@ const CategoriesFilter = ({
         )}
         >
           <div className={cn(
-            'system-sm-medium flex items-center p-1',
+            'flex items-center p-1 system-sm-medium',
           )}
           >
             {
@@ -65,7 +65,7 @@ const CategoriesFilter = ({
             }
             {
               selectedTagsLength > 2 && (
-                <div className="system-xs-medium ml-1 text-text-tertiary">
+                <div className="ml-1 system-xs-medium text-text-tertiary">
                   +
                   {selectedTagsLength - 2}
                 </div>
@@ -114,7 +114,7 @@ const CategoriesFilter = ({
                     className="mr-1"
                     checked={value.includes(option.name)}
                   />
-                  <div className="system-sm-medium px-1 text-text-secondary">
+                  <div className="px-1 system-sm-medium text-text-secondary">
                     {option.label}
                   </div>
                 </div>
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index 5206070a90..e245895b3b 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
   RiCloseCircleFill,
@@ -13,7 +14,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { useTags } from '../../hooks'
 
 type TagsFilterProps = {
@@ -48,13 +48,13 @@ const TagsFilter = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex h-8 cursor-pointer select-none items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
+          'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary select-none hover:bg-state-base-hover-alt',
           selectedTagsLength && 'text-text-secondary',
           open && 'bg-state-base-hover',
         )}
         >
           <div className={cn(
-            'system-sm-medium flex items-center p-1',
+            'flex items-center p-1 system-sm-medium',
           )}
           >
             {
@@ -65,7 +65,7 @@ const TagsFilter = ({
             }
             {
               selectedTagsLength > 2 && (
-                <div className="system-xs-medium ml-1 text-text-tertiary">
+                <div className="ml-1 system-xs-medium text-text-tertiary">
                   +
                   {selectedTagsLength - 2}
                 </div>
@@ -102,14 +102,14 @@ const TagsFilter = ({
               filteredOptions.map(option => (
                 <div
                   key={option.name}
-                  className="flex h-7 cursor-pointer select-none items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
+                  className="flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 select-none hover:bg-state-base-hover"
                   onClick={() => handleCheck(option.name)}
                 >
                   <Checkbox
                     className="mr-1"
                     checked={value.includes(option.name)}
                   />
-                  <div className="system-sm-medium px-1 text-text-secondary">
+                  <div className="px-1 system-sm-medium text-text-secondary">
                     {option.label}
                   </div>
                 </div>
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 2de6b9228a..05a6dd26e3 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -2,6 +2,7 @@
 
 import type { Dependency, PluginDeclaration, PluginManifestInMarket } from '../types'
 import type { PluginPageTab } from './context'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiBookOpenLine,
   RiDragDropLine,
@@ -23,7 +24,6 @@ import { usePluginInstallation } from '@/hooks/use-query-params'
 import Link from '@/next/link'
 import { fetchBundleInfoFromMarketPlace, fetchManifestFromMarketPlace } from '@/service/plugins'
 import { sleep } from '@/utils'
-import { cn } from '@/utils/classnames'
 import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
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 6ba782783c..4bfe495b93 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useRef, useState } from 'react'
@@ -17,7 +18,6 @@ import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-f
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   onSwitchToMarketplaceTab: () => void
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx
index 5d5ef91478..d1de645f7b 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCheckboxCircleFill,
   RiErrorWarningFill,
@@ -7,7 +8,6 @@ import {
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import Tooltip from '@/app/components/base/tooltip'
 import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon'
-import { cn } from '@/utils/classnames'
 
 type TaskStatusIndicatorProps = {
   tip: string
@@ -66,7 +66,7 @@ const TaskStatusIndicator: FC<TaskStatusIndicatorProps> = ({
             )}
 
         {/* Status Indicator Badge */}
-        <div className="absolute -right-1 -top-1">
+        <div className="absolute -top-1 -right-1">
           {(isInstalling || isInstallingWithSuccess) && (
             <ProgressCircle
               percentage={(totalPluginsLength > 0 ? successPluginsLength / totalPluginsLength : 0) * 100}
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index f87a742e1d..7f07699771 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Plugin } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useTheme } from 'next-themes'
@@ -12,7 +13,6 @@ import InstallFromMarketplace from '@/app/components/plugins/install-plugin/inst
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useLocale } from '@/context/i18n'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import { cn } from '@/utils/classnames'
 import Badge from '../base/badge'
 import Icon from './card/base/card-icon'
 import Description from './card/base/description'
diff --git a/web/app/components/plugins/readme-panel/__tests__/entrance.spec.tsx b/web/app/components/plugins/readme-panel/__tests__/entrance.spec.tsx
index f1e3c548de..59051d4623 100644
--- a/web/app/components/plugins/readme-panel/__tests__/entrance.spec.tsx
+++ b/web/app/components/plugins/readme-panel/__tests__/entrance.spec.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/plugins/readme-panel/entrance.tsx b/web/app/components/plugins/readme-panel/entrance.tsx
index 132328e04d..2d8188874d 100644
--- a/web/app/components/plugins/readme-panel/entrance.tsx
+++ b/web/app/components/plugins/readme-panel/entrance.tsx
@@ -1,8 +1,8 @@
 import type { PluginDetail } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBookReadLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { BUILTIN_TOOLS_ARRAY } from './constants'
 import { ReadmeShowType, useReadmePanelStore } from './store'
 
@@ -28,7 +28,7 @@ export const ReadmeEntrance = ({
     return null
 
   return (
-    <div className={cn('flex flex-col items-start justify-center gap-2 pb-4 pt-0', showType === ReadmeShowType.drawer && 'px-4', className)}>
+    <div className={cn('flex flex-col items-start justify-center gap-2 pt-0 pb-4', showType === ReadmeShowType.drawer && 'px-4', className)}>
       {!showShortTip && (
         <div className="relative h-1 w-8 shrink-0">
           <div className="h-px w-full bg-divider-regular"></div>
@@ -42,7 +42,7 @@ export const ReadmeEntrance = ({
         <div className="relative flex h-3 w-3 items-center justify-center overflow-hidden">
           <RiBookReadLine className="h-3 w-3" />
         </div>
-        <span className="text-xs font-normal leading-4">
+        <span className="text-xs leading-4 font-normal">
           {!showShortTip ? t('readmeInfo.needHelpCheckReadme', { ns: 'plugin' }) : t('readmeInfo.title', { ns: 'plugin' })}
         </span>
       </button>
diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx
index 182da360c4..0ed17aec28 100644
--- a/web/app/components/plugins/readme-panel/index.tsx
+++ b/web/app/components/plugins/readme-panel/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBookReadLine, RiCloseLine } from '@remixicon/react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { usePluginReadme } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import DetailHeader from '../plugin-detail-panel/detail-header'
 import { ReadmeShowType, useReadmePanelStore } from './store'
 
@@ -37,7 +37,7 @@ const ReadmePanel: FC = () => {
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center gap-1">
             <RiBookReadLine className="h-3 w-3 text-text-tertiary" />
-            <span className="text-xs font-medium uppercase text-text-tertiary">
+            <span className="text-xs font-medium text-text-tertiary uppercase">
               {t('readmeInfo.title', { ns: 'plugin' })}
             </span>
           </div>
@@ -90,7 +90,7 @@ const ReadmePanel: FC = () => {
         <div className="fixed inset-0 z-1002 flex justify-start" onClick={onClose}>
           <div
             className={cn(
-              'pointer-events-auto mb-2 ml-2 mr-2 mt-16 w-[600px] max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl',
+              'pointer-events-auto mt-16 mr-2 mb-2 ml-2 w-[600px] max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl',
             )}
             onClick={(event) => {
               event.stopPropagation()
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index 6ff391b417..dc5d376eb3 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { AutoUpdateConfig } from './types'
 import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiTimeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
@@ -12,7 +13,6 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { useAppContext } from '@/context/app-context'
 import { useModalContextSelector } from '@/context/modal-context'
-import { cn } from '@/utils/classnames'
 import Label from '../label'
 import PluginsPicker from './plugins-picker'
 import StrategyPicker from './strategy-picker'
@@ -33,7 +33,7 @@ const SettingTimeZone: FC<{
 }) => {
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
   return (
-    <span className="body-xs-regular cursor-pointer text-text-accent" onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}>{children}</span>
+    <span className="cursor-pointer body-xs-regular text-text-accent" onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}>{children}</span>
   )
 }
 const AutoUpdateSetting: FC<Props> = ({
@@ -149,7 +149,7 @@ const AutoUpdateSetting: FC<Props> = ({
                   renderTrigger={renderTimePickerTrigger}
                   placement="bottom-end"
                 />
-                <div className="body-xs-regular mt-1 text-right text-text-tertiary">
+                <div className="mt-1 text-right body-xs-regular text-text-tertiary">
                   <Trans
                     i18nKey={`${i18nPrefix}.changeTimezone`}
                     ns="plugin"
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
index 922e63a32f..5cec7d3730 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { Group } from '@/app/components/base/icons/src/vender/other'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className: string
@@ -22,7 +22,7 @@ const NoDataPlaceholder: FC<Props> = ({
     <div className={cn('flex items-center justify-center', className)}>
       <div className="flex flex-col items-center">
         {icon}
-        <div className="system-sm-regular mt-2 text-text-tertiary">{text}</div>
+        <div className="mt-2 system-sm-regular text-text-tertiary">{text}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx
index 72d0e6262c..ccd0423fc3 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx
@@ -14,7 +14,7 @@ const NoPluginSelected: FC<Props> = ({
   const { t } = useTranslation()
   const text = `${t(`autoUpdate.upgradeModePlaceholder.${updateMode === AUTO_UPDATE_MODE.partial ? 'partial' : 'exclude'}`, { ns: 'plugin' })}`
   return (
-    <div className="system-xs-regular radius-lg border border-components-option-card-option-border bg-background-section p-3 text-center text-text-tertiary">
+    <div className="rounded-[10px] border border-components-option-card-option-border bg-background-section p-3 text-center system-xs-regular text-text-tertiary">
       {text}
     </div>
   )
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
index f02e0c4d1d..c0dbbea5c6 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -34,7 +34,7 @@ const PluginsPicker: FC<Props> = ({
     set: setToolPicker,
   }] = useBoolean(false)
   return (
-    <div className="mt-2 radius-lg bg-background-section-burn p-2.5">
+    <div className="mt-2 rounded-[10px] bg-background-section-burn p-2.5">
       {hasSelected
         ? (
             <div className="flex justify-between text-text-tertiary">
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
index 0284ec8a7f..cdb07b8874 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { MARKETPLACE_API_PREFIX } from '@/config'
-import { cn } from '@/utils/classnames'
 
 const MAX_DISPLAY_COUNT = 14
 type Props = {
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index ef24f9c7df..975dd2217e 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { ActivePluginType } from '../../marketplace/constants'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import { useInstalledPluginList } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/constants'
 import { PluginSource } from '../../types'
 import NoDataPlaceholder from './no-data-placeholder'
diff --git a/web/app/components/plugins/reference-setting-modal/label.tsx b/web/app/components/plugins/reference-setting-modal/label.tsx
index 720361d79a..ad833cb30e 100644
--- a/web/app/components/plugins/reference-setting-modal/label.tsx
+++ b/web/app/components/plugins/reference-setting-modal/label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   label: string
@@ -18,7 +18,7 @@ const Label: FC<Props> = ({
         <span className="system-sm-semibold text-text-secondary">{label}</span>
       </div>
       {description && (
-        <div className="body-xs-regular mt-1 text-text-tertiary">
+        <div className="mt-1 body-xs-regular text-text-tertiary">
           {description}
         </div>
       )}
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index 3d674cf9d4..bde5051808 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { UpdateFromMarketPlacePayload } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,7 +19,6 @@ import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-
 import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
 import { updateFromMarketPlace } from '@/service/plugins'
 import { useInvalidateReferenceSettings, usePluginTaskList, useRemoveAutoUpgrade } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import useGetIcon from '../install-plugin/base/use-get-icon'
 import { TaskStatus } from '../types'
 import DowngradeWarningModal from './downgrade-warning'
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index b7709b9e4d..0266c05069 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Placement } from '@/app/components/base/ui/placement'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,6 @@ import {
 } from '@/app/components/base/ui/popover'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useVersionListOfPlugin } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import { isEarlierThanVersion } from '@/utils/semver'
 
 type Props = {
@@ -86,7 +86,7 @@ const PluginVersionPicker: FC<Props> = ({
         alignOffset={alignOffset}
         popupClassName="relative w-[209px] bg-components-panel-bg-blur p-1 backdrop-blur-xs"
       >
-        <div className="px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium-uppercase">
+        <div className="px-3 pt-1 pb-0.5 system-xs-medium-uppercase text-text-tertiary">
           {t('detailPanel.switchVersion', { ns: 'plugin' })}
         </div>
         <div className="relative max-h-[224px] overflow-y-auto">
@@ -104,10 +104,10 @@ const PluginVersionPicker: FC<Props> = ({
               })}
             >
               <div className="flex grow items-center">
-                <div className="text-text-secondary system-sm-medium">{version.version}</div>
+                <div className="system-sm-medium text-text-secondary">{version.version}</div>
                 {currentVersion === version.version && <Badge className="ml-1" text="CURRENT" />}
               </div>
-              <div className="shrink-0 text-text-tertiary system-xs-regular">{formatDate(version.created_at, format)}</div>
+              <div className="shrink-0 system-xs-regular text-text-tertiary">{formatDate(version.created_at, format)}</div>
             </div>
           ))}
         </div>
diff --git a/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx b/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
index 176298b2e8..d22c2a727c 100644
--- a/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
@@ -1,8 +1,8 @@
 import type { ChunkInfo, GeneralChunk, GeneralChunks, ParentChildChunk, ParentChildChunks, QAChunk, QAChunks } from './types'
 import type { ParentMode } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { ChunkingMode } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import ChunkCard from './chunk-card'
 
 type ChunkCardListProps = {
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
index 5bfd13c66e..6bd21866db 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
@@ -1,10 +1,10 @@
 import type { FormData } from './form/types'
 import type { MoreInfo } from '@/app/components/workflow/types'
 import type { InputVar } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { useFloatingRight } from '../hooks'
 import InputFieldForm from './form'
 import { convertFormDataToINputField, convertToInputFieldFormData } from './utils'
@@ -44,13 +44,13 @@ const InputFieldEditorPanel = ({
         width: `${floatingRightWidth}px`,
       }}
     >
-      <div className="system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary">
+      <div className="flex items-center pt-3.5 pr-11 pb-1 pl-4 system-xl-semibold text-text-primary">
         {initialData ? t('inputFieldPanel.editInputField', { ns: 'datasetPipeline' }) : t('inputFieldPanel.addInputField', { ns: 'datasetPipeline' })}
       </div>
       <button
         type="button"
         data-testid="input-field-editor-close-btn"
-        className="absolute right-2.5 top-2.5 flex size-8 items-center justify-center"
+        className="absolute top-2.5 right-2.5 flex size-8 items-center justify-center"
         onClick={onClose}
       >
         <RiCloseLine className="size-4 text-text-tertiary" />
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
index bc1a9afbb8..a4cc03b8ab 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { InputVarType } from '@/app/components/workflow/types'
 import type { InputVar } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiDraggable,
@@ -14,7 +15,6 @@ import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
-import { cn } from '@/utils/classnames'
 
 type FieldItemProps = {
   readonly?: boolean
@@ -68,16 +68,16 @@ const FieldItem = ({
         }
         <div
           title={payload.variable}
-          className="system-sm-medium max-w-[130px] shrink-0 truncate text-text-secondary"
+          className="max-w-[130px] shrink-0 truncate system-sm-medium text-text-secondary"
         >
           {payload.variable}
         </div>
         {payload.label && (
           <>
-            <div className="system-xs-regular shrink-0 text-text-quaternary">·</div>
+            <div className="shrink-0 system-xs-regular text-text-quaternary">·</div>
             <div
               title={payload.label}
-              className="system-xs-medium grow truncate text-text-tertiary"
+              className="grow truncate system-xs-medium text-text-tertiary"
             >
               {payload.label}
             </div>
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
index a14af1f704..e99a815f0a 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
@@ -1,5 +1,6 @@
 import type { SortableItem } from './types'
 import type { InputVar } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { isEqual } from 'es-toolkit/predicate'
 import {
   memo,
@@ -7,7 +8,6 @@ import {
   useMemo,
 } from 'react'
 import { ReactSortable } from 'react-sortablejs'
-import { cn } from '@/utils/classnames'
 import FieldItem from './field-item'
 
 type FieldListContainerProps = {
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
index f43f3aaf18..64b05f762d 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
@@ -1,10 +1,10 @@
 import type { InputVar } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
-import { cn } from '@/utils/classnames'
 import FieldListContainer from './field-list-container'
 import { useFieldList } from './hooks'
 
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index 3ac7dbc342..3939413c80 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -1,6 +1,7 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { Node } from '@/app/components/workflow/types'
 import type { InputVar, RAGPipelineVariables } from '@/models/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiEyeLine } from '@remixicon/react'
 import {
   memo,
@@ -17,7 +18,6 @@ import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import FieldList from './field-list'
 import FooterTip from './footer-tip'
 import Datasource from './label-right-content/datasource'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
index 7d5338b84e..5f0813dc78 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
@@ -1,11 +1,11 @@
 import type { Datasource } from '../../test-run/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Divider from '@/app/components/base/divider'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
-import { cn } from '@/utils/classnames'
 import { useFloatingRight } from '../hooks'
 import DataSource from './data-source'
 import ProcessDocuments from './process-documents'
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
index 7198d4d988..c4f6a4e1c0 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
@@ -1,10 +1,10 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type OptionCardProps = {
   label: string
@@ -32,7 +32,7 @@ const OptionCard = ({
       className={cn(
         'flex cursor-pointer flex-col gap-1 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-2.5 shadow-shadow-shadow-3',
         selected
-          ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-inset ring-components-option-card-option-selected-border'
+          ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-components-option-card-option-selected-border ring-inset'
           : 'hover:bg-components-option-card-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs',
       )}
       onClick={handleClickCard}
@@ -44,7 +44,7 @@ const OptionCard = ({
         />
       </div>
       <div
-        className={cn('system-sm-medium line-clamp-2 grow text-text-secondary', selected && 'text-text-primary')}
+        className={cn('line-clamp-2 grow system-sm-medium text-text-secondary', selected && 'text-text-primary')}
         title={label}
       >
         {label}
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
index 93c4af8047..75c8a6e150 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
@@ -1,6 +1,6 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Divider from '@/app/components/base/divider'
-import { cn } from '@/utils/classnames'
 
 type Step = {
   label: string
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
index 550759c4f4..77deed0546 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
@@ -1,7 +1,7 @@
 import type { WorkflowRunningData } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 type TabProps = {
   isActive: boolean
@@ -20,7 +20,7 @@ const Tab = ({ isActive, label, value, workflowRunningData, onClick }: TabProps)
     <button
       type="button"
       className={cn(
-        'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
+        'cursor-pointer border-b-2 border-transparent py-3 system-sm-semibold-uppercase text-text-tertiary',
         isActive && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
         !workflowRunningData && 'cursor-not-allowed! opacity-30',
       )}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/run-mode.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/run-mode.spec.tsx
index 9ac47aae02..42e158b66a 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/run-mode.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/run-mode.spec.tsx
@@ -53,7 +53,7 @@ vi.mock('@/context/event-emitter', () => ({
   }),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: unknown[]) => args.filter(a => typeof a === 'string').join(' '),
 }))
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index a0076996a3..77d264ec7a 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -165,7 +165,7 @@ vi.mock('@/service/use-workflow', () => ({
   }),
 }))
 
-vi.mock('@/utils/classnames', () => ({
+vi.mock('@langgenius/dify-ui/cn', () => ({
   cn: (...args: string[]) => args.filter(Boolean).join(' '),
 }))
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 70961c5ff9..d34971ddcc 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -1,5 +1,6 @@
 import type { IconInfo } from '@/models/datasets'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine, RiHammerLine, RiPlayCircleLine, RiTerminalBoxLine } from '@remixicon/react'
 import { useBoolean, useKeyPress } from 'ahooks'
 import { memo, useCallback, useState } from 'react'
@@ -35,7 +36,6 @@ import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
 import { publishedPipelineInfoQueryKeyPrefix, useInvalidCustomizedTemplateList, usePublishAsCustomizedPipeline } from '@/service/use-pipeline'
 import { usePublishWorkflow } from '@/service/use-workflow'
-import { cn } from '@/utils/classnames'
 import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
index 81389e51b4..5326e3b0f5 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiDatabase2Line, RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -9,7 +10,6 @@ import { useStore, useWorkflowStore } 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
@@ -49,7 +49,7 @@ const RunMode = ({
       <button
         type="button"
         className={cn(
-          'system-xs-medium flex h-7 items-center gap-x-1 px-1.5 text-text-accent hover:bg-state-accent-hover',
+          'flex h-7 items-center gap-x-1 px-1.5 system-xs-medium text-text-accent hover:bg-state-accent-hover',
           isDisabled && 'cursor-not-allowed bg-state-accent-hover',
           isDisabled ? 'rounded-l-md' : 'rounded-md',
         )}
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index a6b54137f1..afdd5b0c81 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { InputValueTypes, TextGenerationRunControl } from './types'
 import type { InstalledApp } from '@/models/explore'
 import type { VisionFile } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +11,6 @@ import Loading from '@/app/components/base/loading'
 import { toast } from '@/app/components/base/ui/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useSearchParams } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import { useTextGenerationAppState } from './hooks/use-text-generation-app-state'
 import { useTextGenerationBatch } from './hooks/use-text-generation-batch'
 import TextGenerationResultPanel from './text-generation-result-panel'
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
index 8f0d551fa6..29471548ef 100644
--- a/web/app/components/share/text-generation/info-modal.tsx
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -1,9 +1,9 @@
 import type { SiteInfo } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 import Modal from '@/app/components/base/modal'
 import { appDefaultIconBackground } from '@/config'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   data?: SiteInfo
@@ -20,10 +20,10 @@ const InfoModal = ({
     <Modal
       isShow={isShow}
       onClose={onClose}
-      className="min-w-[400px] max-w-[400px] p-0!"
+      className="max-w-[400px] min-w-[400px] p-0!"
       closable
     >
-      <div className={cn('flex flex-col items-center gap-4 px-4 pb-8 pt-10')}>
+      <div className={cn('flex flex-col items-center gap-4 px-4 pt-10 pb-8')}>
         <AppIcon
           size="xxl"
           iconType={data?.icon_type}
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index 32f3a76e3d..bc8323676c 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -2,6 +2,7 @@
 import type { Placement } from '@floating-ui/react'
 import type { FC } from 'react'
 import type { SiteInfo } from '@/models/share'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEqualizer2Line,
 } from '@remixicon/react'
@@ -19,7 +20,6 @@ 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 { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
 import InfoModal from './info-modal'
 
@@ -85,7 +85,7 @@ const MenuDropdown: FC<Props> = ({
         <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('system-md-regular flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary')}>
+              <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>
@@ -93,7 +93,7 @@ const MenuDropdown: FC<Props> = ({
             <Divider type="horizontal" className="my-0" />
             <div className="p-1">
               {data?.privacy_policy && (
-                <a href={data.privacy_policy} target="_blank" className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">
+                <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>
               )}
@@ -102,7 +102,7 @@ const MenuDropdown: FC<Props> = ({
                   handleTrigger()
                   setShow(true)
                 }}
-                className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
+                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>
@@ -111,7 +111,7 @@ const MenuDropdown: FC<Props> = ({
               <div className="p-1">
                 <div
                   onClick={handleLogout}
-                  className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
+                  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>
diff --git a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
index 299e35bdaa..33af235f5c 100644
--- a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,6 @@ import {
   useCSVReader,
 } from 'react-papaparse'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   onParsed: (data: string[][]) => void
@@ -42,7 +42,7 @@ const CSVReader: FC<Props> = ({
           <div
             {...getRootProps()}
             className={cn(
-              'system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg',
+              'flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg system-sm-regular',
               acceptedFile && 'border-solid border-components-panel-border bg-components-panel-on-panel-item-bg px-6 hover:border-components-panel-bg-blur hover:bg-components-panel-on-panel-item-bg-hover',
               zoneHover && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
             )}
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index d6e4ed8a86..153cb181f1 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiLoader2Line,
   RiPlayLargeLine,
@@ -8,7 +9,6 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { cn } from '@/utils/classnames'
 import CSVDownload from './csv-download'
 import CSVReader from './csv-reader'
 
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index d6f521029e..7bb3336f13 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDownloadLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import {
 } from 'react-papaparse'
 import ActionButton from '@/app/components/base/action-button'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type IResDownloadProps = {
   isMobile: boolean
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 53f11c5910..4e66614825 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -4,6 +4,7 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { PromptConfig } from '@/models/debug'
 import type { SiteInfo } from '@/models/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiLoader2Line,
   RiPlayLargeLine,
@@ -22,7 +23,6 @@ import BoolInput from '@/app/components/workflow/nodes/_base/components/before-r
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { cn } from '@/utils/classnames'
 
 type IRunOnceProps = {
   siteInfo: SiteInfo
@@ -197,7 +197,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                         value={inputs[item.key] as string}
                         onChange={(value) => { handleInputsChange({ ...inputsRef.current, [item.key]: value }) }}
                         noWrapper
-                        className="bg h-[80px] overflow-y-auto radius-lg bg-components-input-bg-normal p-1"
+                        className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
                         placeholder={
                           <div className="whitespace-pre">{typeof item.json_schema === 'string' ? item.json_schema : JSON.stringify(item.json_schema || '', null, 2)}</div>
                         }
diff --git a/web/app/components/share/text-generation/text-generation-result-panel.tsx b/web/app/components/share/text-generation/text-generation-result-panel.tsx
index 1b7d46b4fe..bcd38e563a 100644
--- a/web/app/components/share/text-generation/text-generation-result-panel.tsx
+++ b/web/app/components/share/text-generation/text-generation-result-panel.tsx
@@ -4,10 +4,10 @@ import type { PromptConfig } from '@/models/debug'
 import type { SiteInfo } from '@/models/share'
 import type { AppSourceType } from '@/service/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import Res from '@/app/components/share/text-generation/result'
-import { cn } from '@/utils/classnames'
 import ResDownload from './run-batch/res-download'
 import { TaskStatus } from './types'
 
@@ -125,7 +125,7 @@ const TextGenerationResultPanel: FC<TextGenerationResultPanelProps> = ({
           className={cn(
             isShowResultPanel
               ? 'flex items-center justify-center p-2 pt-6'
-              : 'absolute left-0 top-0 z-10 flex w-full items-center justify-center px-2 pb-[57px] pt-[3px]',
+              : 'absolute top-0 left-0 z-10 flex w-full items-center justify-center px-2 pt-[3px] pb-[57px]',
           )}
           onClick={() => {
             if (isShowResultPanel)
@@ -151,11 +151,11 @@ const TextGenerationResultPanel: FC<TextGenerationResultPanelProps> = ({
         {isCallBatchAPI && (
           <div
             className={cn(
-              'flex shrink-0 items-center justify-between px-14 pb-2 pt-9',
-              !isPC && 'px-4 pb-1 pt-3',
+              'flex shrink-0 items-center justify-between px-14 pt-9 pb-2',
+              !isPC && 'px-4 pt-3 pb-1',
             )}
           >
-            <div className="text-text-primary system-md-semibold-uppercase">{t('generation.executions', { ns: 'share', num: allTaskList.length })}</div>
+            <div className="system-md-semibold-uppercase text-text-primary">{t('generation.executions', { ns: 'share', num: allTaskList.length })}</div>
             {allSuccessTaskList.length > 0 && (
               <ResDownload
                 isMobile={!isPC}
@@ -182,9 +182,9 @@ const TextGenerationResultPanel: FC<TextGenerationResultPanelProps> = ({
         {isCallBatchAPI && allFailedTaskList.length > 0 && (
           <div className="absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-xs">
             <span aria-hidden className="i-ri-error-warning-fill h-4 w-4 text-text-destructive" />
-            <div className="text-text-secondary system-sm-medium">{t('generation.batchFailed.info', { ns: 'share', num: allFailedTaskList.length })}</div>
+            <div className="system-sm-medium text-text-secondary">{t('generation.batchFailed.info', { ns: 'share', num: allFailedTaskList.length })}</div>
             <div className="h-3.5 w-px bg-divider-regular"></div>
-            <div onClick={handleRetryAllFailedTask} className="cursor-pointer text-text-accent system-sm-semibold-uppercase">{t('generation.batchFailed.retry', { ns: 'share' })}</div>
+            <div onClick={handleRetryAllFailedTask} className="cursor-pointer system-sm-semibold-uppercase text-text-accent">{t('generation.batchFailed.retry', { ns: 'share' })}</div>
           </div>
         )}
       </div>
diff --git a/web/app/components/share/text-generation/text-generation-sidebar.tsx b/web/app/components/share/text-generation/text-generation-sidebar.tsx
index bf6f4b04a8..b711fafb67 100644
--- a/web/app/components/share/text-generation/text-generation-sidebar.tsx
+++ b/web/app/components/share/text-generation/text-generation-sidebar.tsx
@@ -4,6 +4,7 @@ import type { PromptConfig, SavedMessage, TextToSpeechConfig } from '@/models/de
 import type { SiteInfo } from '@/models/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
 import type { SystemFeatures } from '@/types/feature'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import SavedItems from '@/app/components/app/text-generate/saved-items'
 import AppIcon from '@/app/components/base/app-icon'
@@ -11,7 +12,6 @@ import Badge from '@/app/components/base/badge'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { appDefaultIconBackground } from '@/config'
 import { AccessMode } from '@/models/access-control'
-import { cn } from '@/utils/classnames'
 import TabHeader from '../../base/tab-header'
 import MenuDropdown from './menu-dropdown'
 import RunBatch from './run-batch'
@@ -87,11 +87,11 @@ const TextGenerationSidebar: FC<TextGenerationSidebarProps> = ({
             background={siteInfo.icon_background || appDefaultIconBackground}
             imageUrl={siteInfo.icon_url}
           />
-          <div className="grow truncate text-text-secondary system-md-semibold">{siteInfo.title}</div>
+          <div className="grow truncate system-md-semibold text-text-secondary">{siteInfo.title}</div>
           <MenuDropdown hideLogout={isInstalledApp || accessMode === AccessMode.PUBLIC} data={siteInfo} />
         </div>
         {siteInfo.description && (
-          <div className="text-text-tertiary system-xs-regular">{siteInfo.description}</div>
+          <div className="system-xs-regular text-text-tertiary">{siteInfo.description}</div>
         )}
         <TabHeader
           items={[
@@ -162,7 +162,7 @@ const TextGenerationSidebar: FC<TextGenerationSidebarProps> = ({
             !isPC && resultExisted && 'rounded-b-2xl border-b-[0.5px] border-divider-regular',
           )}
         >
-          <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
+          <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
           {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
             ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
             : customConfig?.replace_webapp_logo
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index f1a52e5447..533466387c 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Credential } from '@/app/components/tools/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Drawer from '@/app/components/base/drawer-plus'
@@ -9,7 +10,6 @@ import Radio from '@/app/components/base/radio/ui'
 import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   positionCenter?: boolean
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 6a15010189..189e93f73b 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiSettings2Line } from '@remixicon/react'
 import { useDebounce, useGetState } from 'ahooks'
 import { produce } from 'immer'
@@ -16,7 +17,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import { parseParamsSchema } from '@/service/tools'
-import { cn } from '@/utils/classnames'
 import { LinkExternal02 } from '../../base/icons/src/vender/line/general'
 import { AuthHeaderPrefix, AuthType } from '../types'
 import ConfigCredentials from './config-credentials'
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 63d183e3f6..6405673eec 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { Label } from '@/app/components/tools/labels/constant'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,7 +14,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import { useTags } from '@/app/components/plugins/hooks'
-import { cn } from '@/utils/classnames'
 
 type LabelFilterProps = {
   value: string[]
@@ -53,7 +53,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
       <div className="relative">
         <PopoverTrigger
           className={cn(
-            'flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-left hover:bg-components-input-bg-hover',
+            'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 text-left select-none hover:bg-components-input-bg-hover',
             !!value.length && 'pr-6 shadow-xs',
           )}
         >
@@ -65,7 +65,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
             {!!value.length && currentLabel?.label}
           </div>
           {value.length > 1 && (
-            <div className="shrink-0 text-xs font-medium leading-[18px] text-text-tertiary">{`+${value.length - 1}`}</div>
+            <div className="shrink-0 text-xs leading-[18px] font-medium text-text-tertiary">{`+${value.length - 1}`}</div>
           )}
           {!value.length && (
             <div className="shrink-0 p-px">
@@ -77,7 +77,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
           <button
             type="button"
             aria-label={t('operation.clear', { ns: 'common' })}
-            className="group/clear absolute right-2 top-1/2 -translate-y-1/2 p-px"
+            className="group/clear absolute top-1/2 right-2 -translate-y-1/2 p-px"
             data-testid="label-filter-clear-button"
             onClick={() => onChange([])}
           >
@@ -104,7 +104,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
                 <button
                   key={label.name}
                   type="button"
-                  className="flex w-full select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 text-left hover:bg-state-base-hover"
+                  className="flex w-full items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 text-left select-none hover:bg-state-base-hover"
                   onClick={() => selectLabel(label)}
                 >
                   <div title={label.label} className="grow truncate text-sm leading-5 text-text-secondary">{label.label}</div>
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index ee3c9b1b4f..830b4d7aaf 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { Label } from '@/app/components/tools/labels/constant'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -14,7 +15,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useTags } from '@/app/components/plugins/hooks'
-import { cn } from '@/utils/classnames'
 
 type LabelSelectorProps = {
   value: string[]
@@ -81,7 +81,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-1040">
-          <div className="relative w-[591px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg  backdrop-blur-[5px]">
+          <div className="relative w-[591px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
             <div className="border-b-[0.5px] border-divider-regular p-2">
               <Input
                 showLeftIcon
@@ -95,7 +95,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
               {filteredLabelList.map(label => (
                 <div
                   key={label.name}
-                  className="flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover"
                   onClick={() => selectLabel(label)}
                 >
                   <Checkbox
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 5c26bdcb7d..d9ea302cbb 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { ToolWithProvider } from '../../../workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
   RiLoader2Line,
@@ -35,7 +36,6 @@ import {
   useUpdateMCP,
   useUpdateMCPTools,
 } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import MCPModal from '../modal'
 import ListLoading from './list-loading'
 import OperationDropdown from './operation-dropdown'
diff --git a/web/app/components/tools/mcp/detail/list-loading.tsx b/web/app/components/tools/mcp/detail/list-loading.tsx
index e19901b46e..841846326d 100644
--- a/web/app/components/tools/mcp/detail/list-loading.tsx
+++ b/web/app/components/tools/mcp/detail/list-loading.tsx
@@ -1,6 +1,6 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 const ListLoading = () => {
   return (
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index 0912c3b5a7..4f5468aebc 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -14,7 +15,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   inCard?: boolean
@@ -69,7 +69,7 @@ const OperationDropdown: FC<Props> = ({
             }}
           >
             <RiEditLine className="h-4 w-4 text-text-tertiary" />
-            <div className="system-md-regular ml-2 text-text-secondary">{t('mcp.operation.edit', { ns: 'tools' })}</div>
+            <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"
@@ -79,7 +79,7 @@ const OperationDropdown: FC<Props> = ({
             }}
           >
             <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive-secondary" />
-            <div className="system-md-regular ml-2 text-text-secondary group-hover:text-text-destructive">{t('mcp.operation.remove', { ns: 'tools' })}</div>
+            <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>
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index 02a3c519d9..7b2d351637 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import type { ToolWithProvider } from '../../../workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Drawer from '@/app/components/base/drawer'
-import { cn } from '@/utils/classnames'
 import MCPDetailContent from './content'
 
 type Props = {
@@ -38,7 +38,7 @@ const MCPDetailPanel: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       {detail && (
         <MCPDetailContent
diff --git a/web/app/components/tools/mcp/detail/tool-item.tsx b/web/app/components/tools/mcp/detail/tool-item.tsx
index 299bcec023..4101fa2078 100644
--- a/web/app/components/tools/mcp/detail/tool-item.tsx
+++ b/web/app/components/tools/mcp/detail/tool-item.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { Tool } from '@/app/components/tools/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   tool: Tool
@@ -26,7 +26,7 @@ const MCPToolItem = ({
 
     return (
       <div className="mt-2">
-        <div className="title-xs-semi-bold mb-1 text-text-primary">
+        <div className="mb-1 title-xs-semi-bold text-text-primary">
           {t('mcp.toolItem.parameters', { ns: 'tools' })}
           :
         </div>
@@ -36,7 +36,7 @@ const MCPToolItem = ({
             return (
               <li key={parameter.name} className="pl-2">
                 <span className="system-xs-regular font-bold text-text-secondary">{parameter.name}</span>
-                <span className="system-xs-regular mr-1 text-text-tertiary">
+                <span className="mr-1 system-xs-regular text-text-tertiary">
                   (
                   {parameter.type}
                   ):
@@ -57,7 +57,7 @@ const MCPToolItem = ({
       popupClassName="p-0! px-4! py-3.5! w-[360px]! border-[0.5px]! border-components-panel-border! rounded-xl! shadow-lg!"
       popupContent={(
         <div>
-          <div className="title-xs-semi-bold mb-1 text-text-primary">{tool.label[language]}</div>
+          <div className="mb-1 title-xs-semi-bold text-text-primary">{tool.label[language]}</div>
           <div className="body-xs-regular text-text-secondary">{tool.description[language]}</div>
           {renderParameters()}
         </div>
@@ -66,8 +66,8 @@ const MCPToolItem = ({
       <div
         className={cn('bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover')}
       >
-        <div className="system-md-semibold pb-0.5 text-text-secondary">{tool.label[language]}</div>
-        <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={tool.description[language]}>{tool.description[language]}</div>
+        <div className="pb-0.5 system-md-semibold text-text-secondary">{tool.label[language]}</div>
+        <div className="line-clamp-2 system-xs-regular text-text-tertiary" title={tool.description[language]}>{tool.description[language]}</div>
       </div>
     </Tooltip>
   )
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index 382115efe4..bfaf6bd5d2 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine, RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,7 +7,6 @@ import { v4 as uuid } from 'uuid'
 import ActionButton from '@/app/components/base/action-button'
 import Input from '@/app/components/base/input'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 export type HeaderItem = {
   id: string
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 1fe3d9d525..f4b4b44c88 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo, useState } from 'react'
 import {
   useAllToolProviders,
 } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import NewMCPCard from './create-card'
 import MCPDetailPanel from './detail/provider-detail'
 import MCPCard from './provider-card'
@@ -67,7 +67,7 @@ const MCPList = ({
     <>
       <div
         className={cn(
-          'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
+          'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pt-2 pb-4 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
           !list.length && 'h-[calc(100vh-136px)] overflow-hidden',
         )}
       >
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 4c8b45d1c9..383f6ec2b8 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -2,6 +2,7 @@
 import type {
   MCPServerDetail,
 } from '@/app/components/tools/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,7 +16,6 @@ import {
   useInvalidateMCPServerDetail,
   useUpdateMCPServer,
 } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 
 type ModalProps = {
   appID: string
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 3de157e4ac..51b84f9461 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -3,6 +3,7 @@ import type { TFunction } from 'i18next'
 import type { FC, ReactNode } from 'react'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -24,7 +25,6 @@ import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
 import { useDocLink } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { useMCPServiceCardState } from './hooks/use-mcp-service-card'
 
 // Sub-components
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 64298178bc..8d8d8755d3 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiEditLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
 import { noop } from 'es-toolkit/function'
@@ -16,7 +17,6 @@ import TabSlider from '@/app/components/base/tab-slider'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { MCPAuthMethod } from '@/app/components/tools/types'
-import { cn } from '@/utils/classnames'
 import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
 import { isValidServerID, isValidUrl, useMCPModalForm } from './hooks/use-mcp-modal-form'
 import AuthenticationSection from './sections/authentication-section'
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 35b7e9f849..ea0a7f8172 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { ToolWithProvider } from '../../workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiHammerFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useCallback, useState } from 'react'
@@ -17,7 +18,6 @@ import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useAppContext } from '@/context/app-context'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import OperationDropdown from './detail/operation-dropdown'
 import MCPModal from './modal'
 
diff --git a/web/app/components/tools/mcp/sections/authentication-section.tsx b/web/app/components/tools/mcp/sections/authentication-section.tsx
index 439793eb02..d2cb28b003 100644
--- a/web/app/components/tools/mcp/sections/authentication-section.tsx
+++ b/web/app/components/tools/mcp/sections/authentication-section.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
 import Input from '@/app/components/base/input'
 import Switch from '@/app/components/base/switch'
 import { API_PREFIX } from '@/config'
-import { cn } from '@/utils/classnames'
 
 type AuthenticationSectionProps = {
   isDynamicRegistration: boolean
@@ -42,7 +42,7 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
             <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-text-warning" />
             <div className="system-xs-regular text-text-secondary">
               <div className="mb-1">{t('mcp.modal.redirectUrlWarning', { ns: 'tools' })}</div>
-              <code className="system-xs-medium block break-all rounded-sm bg-state-warning-active px-2 py-1 text-text-secondary">
+              <code className="block rounded-sm bg-state-warning-active px-2 py-1 system-xs-medium break-all text-text-secondary">
                 {`${API_PREFIX}/mcp/oauth/callback`}
               </code>
             </div>
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 3501726cd0..7d400b7cf7 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { Collection } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,7 +18,6 @@ import WorkflowToolEmpty from '@/app/components/tools/provider/empty'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useCheckInstalled, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useAllToolProviders } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import Marketplace from './marketplace'
 import { useMarketplace } from './marketplace/hooks'
 import MCPList from './mcp'
@@ -126,7 +126,7 @@ const ProviderList = () => {
           className="relative flex grow flex-col overflow-y-auto bg-background-body"
         >
           <div className={cn(
-            'sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]',
+            'sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pt-4 pb-2 leading-[56px]',
             currentProviderId && 'pr-6',
           )}
           >
@@ -157,7 +157,7 @@ const ProviderList = () => {
           </div>
           {activeTab !== 'mcp' && (
             <div className={cn(
-              'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+              'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
               !filteredCollectionList.length && activeTab === 'workflow' && 'grow',
             )}
             >
@@ -187,7 +187,7 @@ const ProviderList = () => {
                   />
                 </div>
               ))}
-              {!filteredCollectionList.length && activeTab === 'workflow' && <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"><WorkflowToolEmpty type={getToolType(activeTab)} /></div>}
+              {!filteredCollectionList.length && activeTab === 'workflow' && <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"><WorkflowToolEmpty type={getToolType(activeTab)} /></div>}
             </div>
           )}
           {!filteredCollectionList.length && activeTab === 'builtin' && (
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 5d191468c5..7f24a6ec52 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import type { WorkflowToolModalPayload } from '@/app/components/tools/workflow-tool'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
 } from '@remixicon/react'
@@ -34,8 +35,8 @@ import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import { useAppContext } from '@/context/app-context'
 import { useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
-import { useProviderContext } from '@/context/provider-context'
 
+import { useProviderContext } from '@/context/provider-context'
 import { getLanguage } from '@/i18n-config/language'
 import {
   deleteWorkflowTool,
@@ -51,7 +52,6 @@ import {
   updateCustomCollection,
 } from '@/service/tools'
 import { useInvalidateAllWorkflowTools } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
 import ToolItem from './tool-item'
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index 725b171deb..ca64cf0da0 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
 import { ToolTypeEnum } from '../../workflow/block-selector/types'
 
@@ -38,7 +38,7 @@ const Empty = ({
   return (
     <div className="flex flex-col items-center justify-center">
       <NoToolPlaceholder className={theme === 'dark' ? 'invert' : ''} />
-      <div className="mb-1 mt-2 text-[13px] font-medium leading-[18px] text-text-primary">
+      <div className="mt-2 mb-1 text-[13px] leading-[18px] font-medium text-text-primary">
         {(hasTitle && renderType) ? t(`addToolModal.${renderType}.title`, { ns: 'tools' }) : 'No tools available'}
       </div>
       {!!(!isAgent && hasTitle && renderType) && (
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index 6b626dc4fd..83ffd465db 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { Collection, Tool } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   disabled?: boolean
@@ -32,8 +32,8 @@ const ToolItem = ({
         className={cn('bg-components-panel-item-bg cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover', disabled && 'cursor-not-allowed! opacity-50')}
         onClick={() => !disabled && setShowDetail(true)}
       >
-        <div className="system-md-semibold pb-0.5 text-text-secondary">{tool.label[language]}</div>
-        <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={tool.description[language]}>{tool.description[language]}</div>
+        <div className="pb-0.5 system-md-semibold text-text-secondary">{tool.label[language]}</div>
+        <div className="line-clamp-2 system-xs-regular text-text-tertiary" title={tool.description[language]}>{tool.description[language]}</div>
       </div>
       {showDetail && (
         <SettingBuiltInTool
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 0969153383..258de72492 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Collection } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -13,7 +14,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
-import { cn } from '@/utils/classnames'
 import { addDefaultValue, toolCredentialToFormSchemas } from '../../utils/to-form-schema'
 
 type Props = {
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index 557f442d79..f1a48cc75b 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -2,13 +2,13 @@
 import type { Emoji } from '@/app/components/tools/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
-import { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
 import { useConfigureButton } from './hooks/use-configure-button'
 
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index ff78cc017d..6eeaa86dff 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type ConfirmModalProps = {
   show: boolean
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index aa99d2aa27..c9f1989139 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiErrorWarningLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -17,7 +18,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
 import MethodSelector from '@/app/components/tools/workflow-tool/method-selector'
-import { cn } from '@/utils/classnames'
 import {
   buildWorkflowToolRequestPayload,
   getReservedWorkflowOutputParameters,
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 6bfe301079..a4979fb01f 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type MethodSelectorProps = {
   value?: string
@@ -47,23 +47,23 @@ const MethodSelector: FC<MethodSelectorProps> = ({
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-1040">
-          <div className="relative w-[320px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg  backdrop-blur-xs">
+          <div className="relative w-[320px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
             <div className="p-1">
-              <div className="cursor-pointer rounded-lg py-2.5 pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => onChange('llm')}>
+              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => onChange('llm')}>
                 <div className="item-center flex gap-1">
                   <div className="h-4 w-4 shrink-0">
                     {value === 'llm' && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
                   </div>
-                  <div className="text-[13px] font-medium leading-[18px] text-text-secondary">{t('createTool.toolInput.methodParameter', { ns: 'tools' })}</div>
+                  <div className="text-[13px] leading-[18px] font-medium text-text-secondary">{t('createTool.toolInput.methodParameter', { ns: 'tools' })}</div>
                 </div>
                 <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">{t('createTool.toolInput.methodParameterTip', { ns: 'tools' })}</div>
               </div>
-              <div className="cursor-pointer rounded-lg py-2.5 pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => onChange('form')}>
+              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => onChange('form')}>
                 <div className="item-center flex gap-1">
                   <div className="h-4 w-4 shrink-0">
                     {value === 'form' && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
                   </div>
-                  <div className="text-[13px] font-medium leading-[18px] text-text-secondary">{t('createTool.toolInput.methodSetting', { ns: 'tools' })}</div>
+                  <div className="text-[13px] leading-[18px] font-medium text-text-secondary">{t('createTool.toolInput.methodSetting', { ns: 'tools' })}</div>
                 </div>
                 <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">{t('createTool.toolInput.methodSettingTip', { ns: 'tools' })}</div>
               </div>
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 7842e01ef2..5ce30d0701 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -5,6 +5,7 @@ import type {
   Node,
 } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiApps2AddLine } from '@remixicon/react'
 import {
   memo,
@@ -42,7 +43,6 @@ import useTheme from '@/hooks/use-theme'
 import { fetchAppDetail } from '@/service/apps'
 import { useInvalidateAppTriggers } from '@/service/use-tools'
 import { useInvalidateAppWorkflow, usePublishWorkflow, useResetWorkflowVersionHistory } from '@/service/use-workflow'
-import { cn } from '@/utils/classnames'
 
 const FeaturesTrigger = () => {
   const { t } = useTranslation()
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..b4a1cd135b 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
@@ -30,7 +30,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
     <div className="grid grid-cols-2 gap-4">
       <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">
+          <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">
             <Home className="h-5 w-5 text-white" />
           </div>
         )}
@@ -57,7 +57,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
         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">
+              <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>
             )}
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 92227fa66e..86cc42a392 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 import {
@@ -28,7 +29,6 @@ import {
   WebhookLine,
 } from '@/app/components/base/icons/src/vender/workflow'
 import { API_PREFIX } from '@/config'
-import { cn } from '@/utils/classnames'
 import { BlockEnum } from './types'
 
 type BlockIconProps = {
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 c9848fc7c5..12f37122d9 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -5,6 +5,7 @@ import type {
 import type { BlockEnum, OnSelectBlock } from '../types'
 import type { ListRef } from './market-place-plugin/list'
 import type { TriggerDefaultValue, TriggerWithProvider } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import {
   useCallback,
@@ -21,7 +22,6 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
 import { useAllTriggerPlugins, useInvalidateAllTriggerPlugins } from '@/service/use-triggers'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '../../plugins/types'
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 7c06e7d968..303e98071f 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -11,6 +11,7 @@ import type {
 import type { ToolDefaultValue, ToolValue } from './types'
 import type { ListProps, ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,7 +22,6 @@ import PluginList from '@/app/components/workflow/block-selector/market-place-pl
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetLanguage } from '@/context/i18n'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '../../plugins/types'
diff --git a/web/app/components/workflow/block-selector/data-sources.tsx b/web/app/components/workflow/block-selector/data-sources.tsx
index 5204f4e86c..71003ed5f3 100644
--- a/web/app/components/workflow/block-selector/data-sources.tsx
+++ b/web/app/components/workflow/block-selector/data-sources.tsx
@@ -4,6 +4,7 @@ import type {
 } from '../types'
 import type { DataSourceDefaultValue, ToolDefaultValue } from './types'
 import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useCallback,
   useEffect,
@@ -13,7 +14,6 @@ import {
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetLanguage } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '../../plugins/types'
 import { BlockEnum } from '../types'
@@ -95,10 +95,10 @@ const DataSources = ({
   }, [searchText, enable_marketplace])
 
   return (
-    <div className={cn('w-[400px] min-w-0 max-w-full', className)}>
+    <div className={cn('w-[400px] max-w-full min-w-0', className)}>
       <div
         ref={wrapElemRef}
-        className="max-h-[464px] overflow-y-auto overflow-x-hidden"
+        className="max-h-[464px] overflow-x-hidden overflow-y-auto"
         onScroll={pluginRef.current?.handleScroll}
       >
         <Tools
diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index 6b7a1af936..ec03223238 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -1,7 +1,7 @@
 import type { FC, RefObject } from 'react'
 import type { ToolWithProvider } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { pinyin } from 'pinyin-pro'
-import { cn } from '@/utils/classnames'
 import { CollectionType } from '../../tools/types'
 
 export const CUSTOM_GROUP_NAME = '@@@custom@@@'
@@ -87,7 +87,7 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
   }
   return (
     <div className={cn('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
-      <div className={cn('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
+      <div className={cn('absolute top-0 left-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
       {letters.map(letter => (
         <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
           {letter}
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 e9639e30b6..4ae623ffc1 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,5 +1,6 @@
 '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'
@@ -14,7 +15,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useDownloadPlugin } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
 
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index 0fb28f8a25..84ef3c29c1 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { Plugin } from '@/app/components/plugins/types.ts'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { useLocale } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 
 import { formatNumber } from '@/utils/format'
 import Action from './action'
@@ -35,23 +35,23 @@ const Item: FC<Props> = ({
   }] = useBoolean(false)
 
   return (
-    <div className="group/plugin flex rounded-lg py-1 pl-3 pr-1 hover:bg-state-base-hover">
+    <div className="group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover">
       <div
         className="relative h-6 w-6 shrink-0 rounded-md border-[0.5px] border-components-panel-border-subtle bg-contain bg-center bg-no-repeat"
         style={{ backgroundImage: `url(${payload.icon})` }}
       />
       <div className="ml-2 flex w-0 grow">
         <div className="w-0 grow">
-          <div className="system-sm-medium h-4 truncate leading-4 text-text-primary ">{getLocalizedText(payload.label)}</div>
-          <div className="system-xs-regular h-5 truncate leading-5 text-text-tertiary">{getLocalizedText(payload.brief)}</div>
-          <div className="system-xs-regular flex space-x-1 text-text-tertiary">
+          <div className="h-4 truncate system-sm-medium leading-4 text-text-primary">{getLocalizedText(payload.label)}</div>
+          <div className="h-5 truncate system-xs-regular leading-5 text-text-tertiary">{getLocalizedText(payload.brief)}</div>
+          <div className="flex space-x-1 system-xs-regular text-text-tertiary">
             <div>{payload.org}</div>
             <div>·</div>
             <div>{t('install', { ns: 'plugin', num: formatNumber(payload.install_count || 0) })}</div>
           </div>
         </div>
         {/* Action */}
-        <div className={cn(!open ? 'hidden' : 'flex', 'system-xs-medium h-4 items-center space-x-1 text-components-button-secondary-accent-text group-hover/plugin:flex')}>
+        <div className={cn(!open ? 'hidden' : 'flex', 'h-4 items-center space-x-1 system-xs-medium text-components-button-secondary-accent-text group-hover/plugin:flex')}>
           <div
             className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover"
             onClick={showInstallModal}
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 967b2e92da..cddc928b19 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { RefObject } from 'react'
 import type { Plugin, PluginCategoryEnum } from '@/app/components/plugins/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
@@ -79,7 +79,7 @@ const List = ({
 
     return (
       <Link
-        className="system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg"
+        className="sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 system-sm-medium text-text-accent-light-mode-only shadow-lg"
         href={getMarketplaceUrl('', { category })}
         target="_blank"
       >
@@ -95,7 +95,7 @@ const List = ({
     <>
       {hasRes && (
         <div
-          className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
+          className={cn('sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 system-sm-medium text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
           onClick={handleHeadClick}
         >
           <span>{t('fromMarketplace', { ns: 'plugin' })}</span>
@@ -119,12 +119,12 @@ const List = ({
           />
         ))}
         {hasRes && (
-          <div className="mb-3 mt-2 flex items-center justify-center space-x-2">
+          <div className="mt-2 mb-3 flex items-center justify-center space-x-2">
             <div className="h-[2px] w-[90px] bg-linear-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
             <Link
               href={urlWithSearchText}
               target="_blank"
-              className="system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only"
+              className="flex h-4 shrink-0 items-center system-sm-medium text-text-accent-light-mode-only"
             >
               <RiSearchLine className="mr-0.5 h-3 w-3" />
               <span>{t('searchInMarketplace', { ns: 'plugin' })}</span>
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
index 2ee454e848..87e4863414 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
@@ -2,9 +2,9 @@ import type { BlockEnum, ToolWithProvider } from '../../types'
 import type { ToolDefaultValue } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useMemo, useRef } from 'react'
 import { useGetLanguage } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import { groupItems } from '../index-bar'
 import ToolListFlatView from '../tool/tool-list-flat-view/list'
 import ToolListTreeView from '../tool/tool-list-tree-view/list'
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 7038460c84..5605908b71 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -5,13 +5,13 @@ import type {
   OnSelectBlock,
   ToolWithProvider,
 } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
 import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools, useInvalidateAllBuiltInTools } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import { useWorkflowStore } from '../store'
 import AllStartBlocks from './all-start-blocks'
@@ -215,7 +215,7 @@ const Tabs: FC<TabsProps> = ({
     <div onClick={e => e.stopPropagation()}>
       {
         !noBlocks && (
-          <div className="relative flex bg-background-section-burn pl-1 pt-1">
+          <div className="relative flex bg-background-section-burn pt-1 pl-1">
             {
               tabs.map(tab => (
                 <TabHeaderItem
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 888a7403e6..a509dd9723 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -7,6 +7,7 @@ import type { FC } from 'react'
 import type { ToolDefaultValue, ToolValue } from './types'
 import type { CustomCollectionBackend } from '@/app/components/tools/types'
 import type { BlockEnum, OnSelectBlock } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
@@ -35,7 +36,6 @@ import {
   useInvalidateAllMCPTools,
   useInvalidateAllWorkflowTools,
 } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   panelClassName?: string
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index a24f9d4c45..723bcf5434 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { ToolWithProvider } from '../../types'
 import type { ToolDefaultValue } from '../types'
 import type { Tool } from '@/app/components/tools/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import { useGetLanguage } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import BlockIcon from '../../block-icon'
 import { BlockEnum } from '../../types'
@@ -78,7 +78,7 @@ const ToolItem: FC<Props> = ({
     >
       <div
         key={payload.name}
-        className="flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover"
+        className="flex cursor-pointer items-center justify-between rounded-lg pr-1 pl-[21px] hover:bg-state-base-hover"
         onClick={() => {
           if (disabled)
             return
@@ -111,11 +111,11 @@ const ToolItem: FC<Props> = ({
           })
         }}
       >
-        <div className={cn('truncate border-l-2 border-divider-subtle py-2 pl-4 text-text-secondary system-sm-medium')}>
+        <div className={cn('truncate border-l-2 border-divider-subtle py-2 pl-4 system-sm-medium text-text-secondary')}>
           <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
         </div>
         {isAdded && (
-          <div className="mr-4 text-text-tertiary system-xs-regular">{t('addToolModal.added', { ns: 'tools' })}</div>
+          <div className="mr-4 system-xs-regular text-text-tertiary">{t('addToolModal.added', { ns: 'tools' })}</div>
         )}
       </div>
     </Tooltip>
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index b20818fdaa..5abc750fed 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { Tool as ToolType } from '../../../tools/types'
 import type { ToolWithProvider } from '../../types'
 import type { ToolDefaultValue, ToolValue } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
 import * as React from 'react'
@@ -13,7 +14,6 @@ import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/co
 import { useGetLanguage } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import { CollectionType } from '../../../tools/types'
 import BlockIcon from '../../block-icon'
@@ -178,7 +178,7 @@ const Tool: FC<Props> = ({
     >
       <div className={cn(className)}>
         <div
-          className="group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover"
+          className="group/item flex w-full cursor-pointer items-center justify-between rounded-lg pr-1 pl-3 select-none hover:bg-state-base-hover"
           onClick={() => {
             if (hasAction) {
               setFold(!isFold)
@@ -219,7 +219,7 @@ const Tool: FC<Props> = ({
             <div className="ml-2 flex w-0 grow items-center text-sm text-text-primary">
               <span className="max-w-[250px] truncate">{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
               {isFlatView && groupName && (
-                <span className="system-xs-regular ml-2 shrink-0 text-text-quaternary">{groupName}</span>
+                <span className="ml-2 shrink-0 system-xs-regular text-text-quaternary">{groupName}</span>
               )}
               {isMCPTool && <Mcp className="ml-2 size-3.5 shrink-0 text-text-quaternary" />}
             </div>
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index d174252823..8c281e3529 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -1,9 +1,9 @@
 import type { BlockEnum, ToolWithProvider } from '../types'
 import type { ToolDefaultValue, ToolTypeEnum, ToolValue } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useMemo, useRef } from 'react'
 import Empty from '@/app/components/tools/provider/empty'
 import { useGetLanguage } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import IndexBar, { groupItems } from './index-bar'
 import ToolListFlatView from './tool/tool-list-flat-view/list'
 import ToolListTreeView from './tool/tool-list-tree-view/list'
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
index 4bf3a3db17..34ee744414 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { TriggerDefaultValue, TriggerWithProvider } from '../types'
 import type { Event } from '@/app/components/tools/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import { useGetLanguage } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import BlockIcon from '../../block-icon'
 import { BlockEnum } from '../../types'
 
@@ -49,7 +49,7 @@ const TriggerPluginActionItem: FC<Props> = ({
     >
       <div
         key={payload.name}
-        className="flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover"
+        className="flex cursor-pointer items-center justify-between rounded-lg pr-1 pl-[21px] hover:bg-state-base-hover"
         onClick={() => {
           if (disabled)
             return
@@ -77,11 +77,11 @@ const TriggerPluginActionItem: FC<Props> = ({
           })
         }}
       >
-        <div className={cn('truncate border-l-2 border-divider-subtle py-2 pl-4 text-text-secondary system-sm-medium')}>
+        <div className={cn('truncate border-l-2 border-divider-subtle py-2 pl-4 system-sm-medium text-text-secondary')}>
           <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
         </div>
         {isAdded && (
-          <div className="mr-4 text-text-tertiary system-xs-regular">{t('addToolModal.added', { ns: 'tools' })}</div>
+          <div className="mr-4 system-xs-regular text-text-tertiary">{t('addToolModal.added', { ns: 'tools' })}</div>
         )}
       </div>
     </Tooltip>
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
index c60c5a764f..35230810b8 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { TriggerDefaultValue, TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo, useRef } from 'react'
@@ -11,7 +12,6 @@ import { BlockEnum } from '@/app/components/workflow/types'
 import { useGetLanguage } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import TriggerPluginActionItem from './action-item'
 
@@ -94,7 +94,7 @@ const TriggerPluginItem: FC<Props> = ({
     >
       <div className={cn(className)}>
         <div
-          className="group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover"
+          className="group/item flex w-full cursor-pointer items-center justify-between rounded-lg pr-1 pl-3 select-none hover:bg-state-base-hover"
           onClick={() => {
             if (hasAction) {
               setFold(!isFold)
@@ -133,7 +133,7 @@ const TriggerPluginItem: FC<Props> = ({
             />
             <div className="ml-2 flex min-w-0 flex-1 items-center text-sm text-text-primary">
               <span className="max-w-[200px] truncate">{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
-              <span className="system-xs-regular ml-2 truncate text-text-quaternary">{groupName}</span>
+              <span className="ml-2 truncate system-xs-regular text-text-quaternary">{groupName}</span>
             </div>
           </div>
 
diff --git a/web/app/components/workflow/block-selector/view-type-select.tsx b/web/app/components/workflow/block-selector/view-type-select.tsx
index c81d09c6dd..58dbb2cb32 100644
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiNodeTree, RiSortAlphabetAsc } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 export enum ViewType {
   flat = 'flat',
@@ -47,7 +47,7 @@ const ViewTypeSelect: FC<Props> = ({
         }
         onClick={handleChange(ViewType.tree)}
       >
-        <RiNodeTree className="h-4 w-4 " />
+        <RiNodeTree className="h-4 w-4" />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index c76e44e47a..db5b84455c 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -3,6 +3,7 @@ import type {
   Edge,
   OnSelectBlock,
 } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { intersection } from 'es-toolkit/array'
 import {
   memo,
@@ -17,7 +18,6 @@ import {
   Position,
 } from 'reactflow'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
-import { cn } from '@/utils/classnames'
 import BlockSelector from './block-selector'
 import { ITERATION_CHILDREN_Z_INDEX, LOOP_CHILDREN_Z_INDEX } from './constants'
 import CustomEdgeLinearGradientRender from './custom-edge-linear-gradient-render'
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index 2fb856ea93..b256f8bd9f 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiLock2Line } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import Checkbox from '@/app/components/base/checkbox'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 export type DSLExportConfirmModalProps = {
   envList: EnvironmentVariable[]
@@ -42,7 +42,7 @@ const DSLExportConfirmModal = ({
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <div className="relative">
-        <table className="w-full border-separate border-spacing-0 radius-md border border-divider-regular shadow-xs">
+        <table className="w-full border-separate border-spacing-0 rounded-lg border border-divider-regular shadow-xs">
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
               <td width={220} className="h-7 border-r border-b border-divider-regular pl-3">{t('env.export.name', { ns: 'workflow' })}</td>
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 82837274b4..63ac90aad6 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx
index 0b5a0c0dc1..83384c5583 100644
--- a/web/app/components/workflow/header/checklist/index.tsx
+++ b/web/app/components/workflow/header/checklist/index.tsx
@@ -2,6 +2,7 @@ import type { ChecklistItem } from '../../hooks/use-checklist'
 import type {
   CommonEdgeType,
 } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useMemo,
@@ -18,7 +19,6 @@ import {
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
-import { cn } from '@/utils/classnames'
 import {
   useChecklist,
   useNodesInteractions,
@@ -84,7 +84,7 @@ const WorkflowChecklist = ({
               />
             </span>
             {!!needWarningNodes.length && (
-              <span className="absolute -right-1.5 -top-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
+              <span className="absolute -top-1.5 -right-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
                 {needWarningNodes.length}
               </span>
             )}
@@ -101,15 +101,15 @@ const WorkflowChecklist = ({
           className="overflow-y-auto"
           style={{ maxHeight: 'calc(2 / 3 * 100vh)' }}
         >
-          <div className="flex flex-col gap-0.5 px-3 pb-1 pt-3.5">
+          <div className="flex flex-col gap-0.5 px-3 pt-3.5 pb-1">
             <div className="flex items-start px-1">
               <div className="min-w-0 grow pr-8">
-                <h2 className="text-base font-semibold leading-6 text-text-primary">
+                <h2 className="text-base leading-6 font-semibold text-text-primary">
                   {t('panel.checklist', { ns: 'workflow' })}
                   {needWarningNodes.length > 0 && `(${needWarningNodes.length})`}
                 </h2>
               </div>
-              <PopoverClose className="-mr-0.5 -mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg">
+              <PopoverClose className="-mt-0.5 -mr-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg">
                 <span className="i-ri-close-line size-4 text-text-tertiary" />
               </PopoverClose>
             </div>
@@ -122,7 +122,7 @@ const WorkflowChecklist = ({
 
           {needWarningNodes.length > 0
             ? (
-                <div className="flex flex-col gap-1 px-4 pb-4 pt-1">
+                <div className="flex flex-col gap-1 px-4 pt-1 pb-4">
                   {pluginItems.length > 0 && (
                     <ChecklistPluginGroup items={pluginItems} />
                   )}
@@ -138,7 +138,7 @@ const WorkflowChecklist = ({
               )
             : (
                 <div className="mx-4 mb-3 rounded-lg py-4 text-center text-xs text-text-tertiary">
-                  <span className="i-custom-vender-line-general-checklist-square mx-auto mb-[5px] block h-8 w-8 text-text-quaternary" />
+                  <span className="mx-auto mb-[5px] i-custom-vender-line-general-checklist-square block h-8 w-8 text-text-quaternary" />
                   {t('panel.checklistResolved', { ns: 'workflow' })}
                 </div>
               )}
diff --git a/web/app/components/workflow/header/checklist/item-indicator.tsx b/web/app/components/workflow/header/checklist/item-indicator.tsx
index 7c26cddffd..7d3d4d1524 100644
--- a/web/app/components/workflow/header/checklist/item-indicator.tsx
+++ b/web/app/components/workflow/header/checklist/item-indicator.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type ItemIndicatorProps = {
   className?: string
diff --git a/web/app/components/workflow/header/checklist/node-group.tsx b/web/app/components/workflow/header/checklist/node-group.tsx
index 128226af19..e914fd38f7 100644
--- a/web/app/components/workflow/header/checklist/node-group.tsx
+++ b/web/app/components/workflow/header/checklist/node-group.tsx
@@ -1,8 +1,8 @@
 import type { ChecklistItem } from '../../hooks/use-checklist'
 import type { BlockEnum } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import BlockIcon from '../../block-icon'
 import { ItemIndicator } from './item-indicator'
 
@@ -33,14 +33,14 @@ export const ChecklistNodeGroup = memo(({
   }, [item.errorMessages, item.unConnected, t])
 
   return (
-    <div className="overflow-clip radius-lg bg-components-panel-on-panel-item-bg">
+    <div className="overflow-clip rounded-[10px] bg-components-panel-on-panel-item-bg">
       <div className="flex items-center gap-2 px-2 pt-2">
         <BlockIcon
           type={item.type as BlockEnum}
           size="sm"
           toolIcon={item.toolIcon}
         />
-        <span className="min-w-0 grow truncate text-sm font-medium leading-5 text-text-primary">
+        <span className="min-w-0 grow truncate text-sm leading-5 font-medium text-text-primary">
           {item.title}
         </span>
       </div>
@@ -60,7 +60,7 @@ export const ChecklistNodeGroup = memo(({
             </span>
             {goToEnabled && (
               <div className="flex shrink-0 items-center gap-0.5 pr-0.5 opacity-0 transition-opacity duration-150 group-hover/item:opacity-100">
-                <span className="whitespace-nowrap text-xs font-medium leading-4 text-text-accent">
+                <span className="text-xs leading-4 font-medium whitespace-nowrap text-text-accent">
                   {t('panel.goToFix', { ns: 'workflow' })}
                 </span>
                 <span className="i-ri-arrow-right-line size-3.5 text-text-accent" />
diff --git a/web/app/components/workflow/header/checklist/plugin-group.tsx b/web/app/components/workflow/header/checklist/plugin-group.tsx
index 75c36bf78e..2c532f1ac4 100644
--- a/web/app/components/workflow/header/checklist/plugin-group.tsx
+++ b/web/app/components/workflow/header/checklist/plugin-group.tsx
@@ -54,7 +54,7 @@ export const ChecklistPluginGroup = memo(({
   }
 
   return (
-    <div className="overflow-clip radius-lg bg-components-panel-on-panel-item-bg">
+    <div className="overflow-clip rounded-[10px] bg-components-panel-on-panel-item-bg">
       <div className="flex items-center gap-2 px-2 pt-2">
         <div className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-icon-bg-midnight-solid shadow-xs">
           <span className="i-ri-download-line size-3.5 text-white" />
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 2de3743178..98ab6ba537 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index 5d9dcaa590..63a4a427b6 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
 import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 
 const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index cc0934ca30..7ba7d3235e 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiHistoryLine } from '@remixicon/react'
 import {
   useCallback,
@@ -8,7 +9,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { useInvalidAllLastRun, useRestoreWorkflow } from '@/service/use-workflow'
 import { getFlowPrefix } from '@/service/utils'
-import { cn } from '@/utils/classnames'
 import {
   useWorkflowRefreshDraft,
   useWorkflowRun,
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index d1fb1c37de..89fcdadb4b 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -1,10 +1,10 @@
 import type { ViewHistoryProps } from './view-history'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiPlayLargeLine,
 } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import {
   useNodesReadOnly,
   useWorkflowStartRun,
diff --git a/web/app/components/workflow/header/run-mode.tsx b/web/app/components/workflow/header/run-mode.tsx
index 8f802fcec5..d98b4d6b18 100644
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@@ -1,4 +1,5 @@
 import type { TestRunMenuRef, TriggerOption } from './test-run-menu'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef } from 'react'
@@ -12,7 +13,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'
 import { useDynamicTestRunOptions } from '../hooks/use-dynamic-test-run-options'
 import TestRunMenu, { TriggerType } from './test-run-menu'
 
@@ -113,7 +113,7 @@ const RunMode = ({
               <button
                 type="button"
                 className={cn(
-                  'flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent system-xs-medium',
+                  'flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 system-xs-medium text-text-accent',
                 )}
                 disabled={true}
               >
@@ -129,7 +129,7 @@ const RunMode = ({
               >
                 <div
                   className={cn(
-                    'flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent system-xs-medium hover:bg-state-accent-hover',
+                    'flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 system-xs-medium text-text-accent hover:bg-state-accent-hover',
                   )}
                   style={{ userSelect: 'none' }}
                 >
diff --git a/web/app/components/workflow/header/scroll-to-selected-node-button.tsx b/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
index 9e0aadca25..a1b0fa6570 100644
--- a/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
+++ b/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { CommonNodeType } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import { cn } from '@/utils/classnames'
 import { scrollToWorkflowNode } from '../utils/node-navigation'
 
 const ScrollToSelectedNodeButton: FC = () => {
@@ -16,7 +16,7 @@ const ScrollToSelectedNodeButton: FC = () => {
   return (
     <div
       className={cn(
-        'flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-xs transition-colors duration-200 system-xs-medium hover:text-text-accent',
+        'flex h-6 cursor-pointer items-center justify-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 system-xs-medium whitespace-nowrap text-text-tertiary shadow-lg backdrop-blur-xs transition-colors duration-200 hover:text-text-accent',
       )}
       onClick={() => scrollToWorkflowNode(selectedNode.id)}
     >
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index 9cab254016..6312815d1f 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks'
-import { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
 import TipPopup from '../operator/tip-popup'
 import { useWorkflowHistoryStore } from '../workflow-history-store'
@@ -35,7 +35,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           data-tooltip-id="workflow.undo"
           disabled={nodesReadOnly || buttonsDisabled.undo}
           className={
-            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
+            cn('flex h-8 w-8 cursor-pointer items-center rounded-md px-1.5 system-sm-medium text-text-tertiary select-none hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
             && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
           }
           onClick={handleUndo}
@@ -50,7 +50,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           data-tooltip-id="workflow.redo"
           disabled={nodesReadOnly || buttonsDisabled.redo}
           className={
-            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
+            cn('flex h-8 w-8 cursor-pointer items-center rounded-md px-1.5 system-sm-medium text-text-tertiary select-none hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
             && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
           }
           onClick={handleRedo}
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 5f162e36da..ef79c4e411 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiHistoryLine } from '@remixicon/react'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
@@ -6,7 +7,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import useTheme from '@/hooks/use-theme'
-import { cn } from '@/utils/classnames'
 import Tooltip from '../../base/tooltip'
 import ShortcutsName from '../shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '../utils'
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 752f6735e3..3f98f6cb6c 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useState,
@@ -17,7 +18,6 @@ import {
 } from '@/app/components/workflow/store'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useWorkflowRunHistory } from '@/service/use-workflow'
-import { cn } from '@/utils/classnames'
 import {
   useIsChatMode,
   useNodesInteractions,
@@ -82,7 +82,7 @@ const ViewHistory = ({
                   open && 'bg-components-button-secondary-bg-hover',
                 )}
               >
-                <span className="i-custom-vender-line-time-clock-play mr-1 h-4 w-4" />
+                <span className="mr-1 i-custom-vender-line-time-clock-play h-4 w-4" />
                 {t('common.showRunHistory', { ns: 'workflow' })}
               </button>
             )
@@ -140,7 +140,7 @@ const ViewHistory = ({
                   {
                     !data?.data.length && (
                       <div className="py-12">
-                        <span className="i-custom-vender-line-time-clock-play-slim mx-auto mb-2 h-8 w-8 text-text-quaternary" />
+                        <span className="mx-auto mb-2 i-custom-vender-line-time-clock-play-slim h-8 w-8 text-text-quaternary" />
                         <div className="text-center text-[13px] text-text-quaternary">
                           {t('common.notRunning', { ns: 'workflow' })}
                         </div>
@@ -171,23 +171,23 @@ const ViewHistory = ({
                       >
                         {
                           !isChatMode && [WorkflowRunningStatus.Stopped, WorkflowRunningStatus.Paused].includes(item.status) && (
-                            <span className="i-custom-vender-line-alertsAndFeedback-alert-triangle mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]" />
+                            <span className="mt-0.5 mr-1.5 i-custom-vender-line-alertsAndFeedback-alert-triangle h-3.5 w-3.5 text-[#F79009]" />
                           )
                         }
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Failed && (
-                            <span className="i-ri-error-warning-line mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]" />
+                            <span className="mt-0.5 mr-1.5 i-ri-error-warning-line h-3.5 w-3.5 text-[#F04438]" />
                           )
                         }
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Succeeded && (
-                            <span className="i-ri-checkbox-circle-line mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]" />
+                            <span className="mt-0.5 mr-1.5 i-ri-checkbox-circle-line h-3.5 w-3.5 text-[#12B76A]" />
                           )
                         }
                         <div>
                           <div
                             className={cn(
-                              'flex items-center text-[13px] font-medium leading-[18px] text-text-primary',
+                              'flex items-center text-[13px] leading-[18px] font-medium text-text-primary',
                               item.id === historyWorkflowData?.id && 'text-text-accent',
                             )}
                           >
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index add0a99959..45b0284931 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -1,4 +1,5 @@
 import type { WorkflowHistoryState } from '../workflow-history-store'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
   RiHistoryLine,
@@ -18,7 +19,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
 import {
   useNodesReadOnly,
@@ -158,7 +158,7 @@ const ViewWorkflowHistory = () => {
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-12">
           <div
-            className="ml-2 flex min-w-[240px] max-w-[360px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]"
+            className="ml-2 flex max-w-[360px] min-w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]"
           >
             <div className="sticky top-0 flex items-center justify-between px-4 pt-3">
               <div className="system-mg-regular grow text-text-secondary">{t('changeHistory.title', { ns: 'workflow' })}</div>
@@ -206,7 +206,7 @@ const ViewWorkflowHistory = () => {
                       <div>
                         <div
                           className={cn(
-                            'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
+                            'flex items-center text-[13px] leading-[18px] font-medium text-text-secondary',
                           )}
                         >
                           {composeHistoryItemLabel(
@@ -239,7 +239,7 @@ const ViewWorkflowHistory = () => {
                       <div>
                         <div
                           className={cn(
-                            'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
+                            'flex items-center text-[13px] leading-[18px] font-medium text-text-secondary',
                           )}
                         >
                           {composeHistoryItemLabel(
@@ -274,7 +274,7 @@ const ViewWorkflowHistory = () => {
                     <div>
                       <div
                         className={cn(
-                          'flex items-center text-[13px] font-medium leading-[18px]',
+                          'flex items-center text-[13px] leading-[18px] font-medium',
                         )}
                       >
                         {t('changeHistory.clearHistory', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index f467a51160..41c244c6c2 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -10,6 +10,7 @@ import type {
   Node,
 } from './types'
 import type { VarInInspect } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useEventListener,
 } from 'ahooks'
@@ -53,7 +54,6 @@ import {
   useAllWorkflowTools,
 } from '@/service/use-tools'
 import { fetchAllInspectVars } from '@/service/workflow'
-import { cn } from '@/utils/classnames'
 import CandidateNode from './candidate-node'
 import {
   CUSTOM_EDGE,
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index ff18957abf..cd32ee0dc6 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
 } from '@remixicon/react'
 import * as React from 'react'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index b91bf52b4f..489c69412a 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -3,6 +3,7 @@ import type { ToolWithProvider } from '../../../types'
 import type { Strategy } from './agent-strategy'
 import type { StrategyPluginDetail } from '@/app/components/plugins/types'
 import type { ListProps, ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,7 +19,6 @@ import PluginList from '@/app/components/workflow/block-selector/market-place-pl
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useStrategyProviders } from '@/service/use-strategy'
-import { cn } from '@/utils/classnames'
 import Tools from '../../../block-selector/tools'
 import ViewTypeSelect, { ViewType } from '../../../block-selector/view-type-select'
 import { useStrategyInfo } from '../../agent/use-config'
@@ -155,7 +155,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
     <PortalToFollowElem open={open} onOpenChange={setOpen} placement="bottom">
       <PortalToFollowElemTrigger className="w-full">
         <div
-          className="flex h-8 w-full select-none items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 hover:bg-state-base-hover-alt"
+          className="flex h-8 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 select-none hover:bg-state-base-hover-alt"
           onClick={() => setOpen(o => !o)}
         >
           { }
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index c8809280ec..595b38c7e2 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { InputVar } from '../../../../types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -21,7 +22,6 @@ import Textarea from '@/app/components/base/textarea'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { useHooksStore } from '@/app/components/workflow/hooks-store'
 import { Resolution, TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { BlockEnum, InputVarType, SupportUploadFileTypes } from '../../../../types'
 import { CodeLanguage } from '../../../code/types'
 import CodeEditor from '../editor/code-editor'
@@ -124,19 +124,19 @@ const FormItem: FC<Props> = ({
   return (
     <div className={cn(className)}>
       {!isArrayLikeType && !isBooleanType && (
-        <div className="mb-1 flex h-6 items-center gap-1 text-text-secondary system-sm-semibold">
+        <div className="mb-1 flex h-6 items-center gap-1 system-sm-semibold text-text-secondary">
           <div className="truncate">
             {typeof payload.label === 'object' ? nodeKey : payload.label}
           </div>
           {payload.hide === true
             ? (
-                <span className="text-text-tertiary system-xs-regular">
+                <span className="system-xs-regular text-text-tertiary">
                   {t('panel.optional_and_hidden', { ns: 'workflow' })}
                 </span>
               )
             : (
                 !payload.required && (
-                  <span className="text-text-tertiary system-xs-regular">
+                  <span className="system-xs-regular text-text-tertiary">
                     {t('panel.optional', { ns: 'workflow' })}
                   </span>
                 )
@@ -215,7 +215,7 @@ const FormItem: FC<Props> = ({
             language={CodeLanguage.json}
             onChange={onChange}
             noWrapper
-            className="bg h-[80px] overflow-y-auto radius-lg bg-components-input-bg-normal p-1"
+            className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
             placeholder={
               <div className="whitespace-pre">{jsonSchemaPlaceholder}</div>
             }
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index 6baa4098fb..a57428e79c 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { InputVar } from '../../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { InputVarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import FormItem from './form-item'
 
 export type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index 08836cbd50..f42046a2ad 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -5,6 +5,7 @@ import type { Emoji } from '@/app/components/tools/types'
 import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
 import type { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { HumanInputFormData } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,7 +14,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import SingleRunForm from '@/app/components/workflow/nodes/human-input/components/single-run-form'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import Form from './form'
 import {
   buildSubmitData,
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 96b9fe7a84..24faccb110 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { CodeLanguage } from '../../code/types'
 import type { GenRes } from '@/service/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -9,7 +10,6 @@ import { GetCodeGeneratorResModal } from '@/app/components/app/configuration/con
 import { ActionButton } from '@/app/components/base/action-button'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 2c2b9eb861..7f29d92ebd 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo, useState } from 'react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import { cn } from '@/utils/classnames'
 
 export { default as FieldCollapse } from './field-collapse'
 
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index c0545ff01c..9c4799a23d 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { CodeLanguage } from '../../../code/types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
@@ -14,7 +15,6 @@ import {
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
-import { cn } from '@/utils/classnames'
 import CodeGeneratorButton from '../code-generator-button'
 import ToggleExpandBtn from '../toggle-expand-btn'
 import Wrap from './wrap'
@@ -85,7 +85,7 @@ const Base: FC<Props> = ({
   return (
     <Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
       <div ref={ref} className={cn(className, isExpand ? 'h-full border-0' : 'rounded-lg border', !isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
-        <div className="flex h-7 items-center justify-between pl-3 pr-2 pt-1">
+        <div className="flex h-7 items-center justify-between pt-1 pr-2 pl-3">
           <div className="system-xs-semibold-uppercase text-text-secondary">{title}</div>
           <div
             className="flex items-center"
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index 346ee7efe6..7e79738b10 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { Props as EditorProps } from '.'
 import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
-import { cn } from '@/utils/classnames'
 import Editor from '.'
 
 const TO_WINDOW_OFFSET = 8
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 90573de611..5649afaca4 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import Editor, { loader } from '@monaco-editor/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -10,7 +11,6 @@ import {
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import Base from '../base'
 import './style.css'
@@ -167,7 +167,7 @@ const CodeEditor: FC<Props> = ({
         }}
         onMount={handleEditorDidMount}
       />
-      {!outPutValue && !isFocus && <div className="pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-components-input-text-placeholder">{placeholder}</div>}
+      {!outPutValue && !isFocus && <div className="pointer-events-none absolute top-0 left-[36px] text-[13px] leading-[18px] font-normal text-components-input-text-placeholder">{placeholder}</div>}
     </>
   )
 
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
index f6883137c5..de722991f6 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
@@ -1,9 +1,9 @@
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useUpdateNodeInternals } from 'reactflow'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { NodeSourceHandle } from '../node-handle'
 import { ErrorHandleTypeEnum } from './types'
 
@@ -25,7 +25,7 @@ const ErrorHandleOnNode = ({
     return null
 
   return (
-    <div className="relative px-3 pb-2 pt-1">
+    <div className="relative px-3 pt-1 pb-2">
       <div className={cn(
         'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-[5px]',
         data._runningStatus === NodeRunningStatus.Exception && 'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
index cc1fbc64d8..62fcb5352c 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
@@ -8,11 +8,11 @@ const FailBranchCard = () => {
 
   return (
     <div className="px-4 pt-2">
-      <div className="radius-lg bg-workflow-process-bg p-4">
-        <div className="mb-2 flex h-8 w-8 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg">
+      <div className="rounded-[10px] bg-workflow-process-bg p-4">
+        <div className="mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg">
           <RiMindMap className="h-5 w-5 text-text-tertiary" />
         </div>
-        <div className="system-sm-medium mb-1 text-text-secondary">
+        <div className="mb-1 system-sm-medium text-text-secondary">
           {t('nodes.common.errorHandle.failBranch.customize', { ns: 'workflow' })}
         </div>
         <div className="system-xs-regular text-text-tertiary">
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 3caa107c79..6c8e26758a 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -43,9 +43,9 @@ const Field: FC<Props> = ({
         className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}
       >
         <div className="flex h-6 items-center">
-          <div className={cn('relative', isSubTitle ? 'text-text-tertiary system-xs-medium-uppercase' : 'text-text-secondary system-sm-semibold-uppercase')}>
+          <div className={cn('relative', isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>
             {warningDot && (
-              <span className="absolute -left-[9px] top-1/2 size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
+              <span className="absolute top-1/2 -left-[9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
             )}
             {title}
             {' '}
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index aa73260af6..e4e1f53fc9 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -8,7 +9,6 @@ import Checkbox from '@/app/components/base/checkbox'
 import { FileTypeIcon } from '@/app/components/base/file-uploader'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import TagInput from '@/app/components/base/tag-input'
-import { cn } from '@/utils/classnames'
 import { SupportUploadFileTypes } from '../../../types'
 
 type Props = {
@@ -37,7 +37,7 @@ const FileTypeItem: FC<Props> = ({
   return (
     <div
       className={cn(
-        'cursor-pointer select-none rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg',
+        'cursor-pointer rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg select-none',
         !isCustomSelected && 'px-3 py-2',
         selected && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg',
         !selected && 'hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover',
@@ -49,7 +49,7 @@ const FileTypeItem: FC<Props> = ({
             <div>
               <div className="flex items-center border-b border-divider-subtle p-3 pb-2">
                 <FileTypeIcon className="shrink-0" type={type} size="lg" />
-                <div className="system-sm-medium mx-2 grow text-text-primary">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
+                <div className="mx-2 grow system-sm-medium text-text-primary">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
                 <Checkbox className="shrink-0" checked={selected} />
               </div>
               <div className="p-3" onClick={e => e.stopPropagation()}>
@@ -66,7 +66,7 @@ const FileTypeItem: FC<Props> = ({
               <FileTypeIcon className="shrink-0" type={type} size="lg" />
               <div className="mx-2 grow">
                 <div className="system-sm-medium text-text-primary">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
-                <div className="system-2xs-regular-uppercase mt-1 text-text-tertiary">{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('variableConfig.file.custom.description', { ns: 'appDebug' })}</div>
+                <div className="mt-1 system-2xs-regular-uppercase text-text-tertiary">{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('variableConfig.file.custom.description', { ns: 'appDebug' })}</div>
               </div>
               <Checkbox className="shrink-0" checked={selected} />
             </div>
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
index f5f82f8a71..6873d4f11d 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type Props = {
   value: boolean
@@ -15,9 +15,9 @@ const FormInputBoolean: FC<Props> = ({
     <div className="flex w-full space-x-1">
       <div
         className={cn(
-          'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+          'flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
           !value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-          value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+          value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
         )}
         onClick={() => onChange(true)}
       >
@@ -25,9 +25,9 @@ const FormInputBoolean: FC<Props> = ({
       </div>
       <div
         className={cn(
-          'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+          'flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
           value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-          !value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+          !value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
         )}
         onClick={() => onChange(false)}
       >
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx
index e44e4cf8e7..84cfb4629d 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.sections.tsx
@@ -4,10 +4,10 @@ import type { FC, ReactElement } from 'react'
 import type { SelectItem } from './form-input-item.helpers'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import { cn } from '@/utils/classnames'
 
 type MultiSelectFieldProps = {
   disabled: boolean
@@ -64,7 +64,7 @@ export const MultiSelectField: FC<MultiSelectFieldProps> = ({
   return (
     <Listbox multiple value={value} onChange={onChange} disabled={disabled}>
       <div className="group/simple-select relative h-8 grow">
-        <ListboxButton className="flex h-full w-full cursor-pointer items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-hidden group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6">
+        <ListboxButton className="flex h-full w-full cursor-pointer items-center rounded-lg border-0 bg-components-input-bg-normal pr-10 pl-3 group-hover/simple-select:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt focus-visible:outline-hidden sm:text-sm sm:leading-6">
           <span className={textClassName}>
             {renderLabel()}
           </span>
@@ -78,7 +78,7 @@ export const MultiSelectField: FC<MultiSelectFieldProps> = ({
               key={item.value}
               value={item.value}
               className={({ focus }) =>
-                cn('relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover', focus && 'bg-state-base-hover')}
+                cn('relative cursor-pointer rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover', focus && 'bg-state-base-hover')}
             >
               {({ selected }) => (
                 <>
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
index 3cc29995b8..d2e22075e7 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -5,6 +5,7 @@ import type { CredentialFormSchema, FormOption, FormTypeEnum } from '@/app/compo
 import type { Event, Tool } from '@/app/components/tools/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect, useMemo, useState } from 'react'
 import CheckboxList from '@/app/components/base/checkbox-list'
 import Input from '@/app/components/base/input'
@@ -19,7 +20,6 @@ import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/compone
 import { VarType } from '@/app/components/workflow/types'
 import { useFetchDynamicOptions } from '@/service/use-plugins'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
-import { cn } from '@/utils/classnames'
 import { VarKindType } from '../types'
 import FormInputBoolean from './form-input-boolean'
 import {
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
index 6a42637a59..b87b2b533a 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditLine,
 } from '@remixicon/react'
@@ -7,7 +8,6 @@ import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import Tooltip from '@/app/components/base/tooltip'
 import { VarType } from '@/app/components/workflow/nodes/tool/types'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   value: VarType
@@ -20,7 +20,7 @@ const FormInputTypeSwitch: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className="inline-flex h-8 shrink-0 gap-px radius-lg bg-components-segmented-control-bg-normal p-0.5">
+    <div className="inline-flex h-8 shrink-0 gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5">
       <Tooltip
         popupContent={value === VarType.variable ? '' : t('nodes.common.typeSwitch.variable', { ns: 'workflow' })}
       >
diff --git a/web/app/components/workflow/nodes/_base/components/group.tsx b/web/app/components/workflow/nodes/_base/components/group.tsx
index 3e14b96363..9db006561f 100644
--- a/web/app/components/workflow/nodes/_base/components/group.tsx
+++ b/web/app/components/workflow/nodes/_base/components/group.tsx
@@ -1,12 +1,12 @@
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 
 type GroupLabelProps = ComponentProps<'div'>
 
 export const GroupLabel: FC<GroupLabelProps> = (props) => {
   const { children, className, ...rest } = props
   return (
-    <div {...rest} className={cn('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
+    <div {...rest} className={cn('mb-1 system-2xs-medium-uppercase text-text-tertiary', className)}>
       {children}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 9940eb7ed6..8a09cd9366 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -4,6 +4,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -14,7 +15,6 @@ import PromptEditor from '@/app/components/base/prompt-editor'
 import Tooltip from '@/app/components/base/tooltip'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   instanceId?: string
@@ -118,7 +118,7 @@ const Editor: FC<Props> = ({
         {/* to patch Editor not support dynamic change editable status */}
         {readOnly && <div className="absolute inset-0 z-10"></div>}
         {isFocus && (
-          <div className={cn('absolute z-10', insertVarTipToLeft ? 'left-[-12px] top-1.5' : 'right-1 top-[-9px]')}>
+          <div className={cn('absolute z-10', insertVarTipToLeft ? 'top-1.5 left-[-12px]' : 'top-[-9px] right-1')}>
             <Tooltip
               popupContent={`${t('common.insertVarTip', { ns: 'workflow' })}`}
             >
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
index 21d4ade6ae..f6e5434a2d 100644
--- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
@@ -1,4 +1,5 @@
 import type { ComponentProps, MouseEventHandler } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,7 +7,6 @@ import { Button } from '@/app/components/base/ui/button'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { TaskStatus } from '@/app/components/plugins/types'
 import { useCheckInstalled, useInstallPackageFromMarketPlace } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 
 type InstallPluginButtonProps = Omit<ComponentProps<typeof Button>, 'children' | 'loading'> & {
   uniqueIdentifier: string
diff --git a/web/app/components/workflow/nodes/_base/components/layout/box.tsx b/web/app/components/workflow/nodes/_base/components/layout/box.tsx
index 62e709efc6..467e40a1f7 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/box.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/box.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 
 export type BoxProps = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
index 6df6946988..5a478c25d3 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useState,
 } from 'react'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 
 export type FieldTitleProps = {
   title?: string
@@ -42,10 +42,10 @@ export const FieldTitle = memo(({
           }
         }}
       >
-        <div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
+        <div className="flex items-center system-sm-semibold-uppercase text-text-secondary">
           <span className="relative">
             {warningDot && (
-              <span className="absolute -left-[9px] top-1/2 size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
+              <span className="absolute top-1/2 -left-[9px] size-[5px] -translate-y-1/2 rounded-full bg-text-warning-secondary" />
             )}
             {title}
           </span>
diff --git a/web/app/components/workflow/nodes/_base/components/layout/group.tsx b/web/app/components/workflow/nodes/_base/components/layout/group.tsx
index 6e35cb7b69..16b8c5072c 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/group.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/group.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 
 export type GroupProps = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
index 32092b97d7..cc801378b2 100644
--- a/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
+++ b/web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
@@ -10,7 +10,7 @@ const ListNoDataPlaceholder: FC<Props> = ({
   children,
 }) => {
   return (
-    <div className="system-xs-regular flex min-h-[42px] w-full items-center justify-center radius-lg bg-background-section text-text-tertiary">
+    <div className="flex min-h-[42px] w-full items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary">
       {children}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index 9ee522e54f..02d3550626 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Memory } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -9,7 +10,6 @@ import Input from '@/app/components/base/input'
 import Switch from '@/app/components/base/switch'
 import { Slider } from '@/app/components/base/ui/slider'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-import { cn } from '@/utils/classnames'
 import { MemoryRole } from '../../../types'
 
 const i18nPrefix = 'nodes.common.memory'
@@ -154,7 +154,7 @@ const MemoryConfig: FC<Props> = ({
                   size="md"
                   disabled={readonly}
                 />
-                <div className="text-text-tertiary system-xs-medium-uppercase">{t(`${i18nPrefix}.windowSize`, { ns: 'workflow' })}</div>
+                <div className="system-xs-medium-uppercase text-text-tertiary">{t(`${i18nPrefix}.windowSize`, { ns: 'workflow' })}</div>
               </div>
               <div className="flex h-8 items-center space-x-2">
                 <Slider
@@ -183,7 +183,7 @@ const MemoryConfig: FC<Props> = ({
             </div>
             {canSetRoleName && (
               <div className="mt-4">
-                <div className="text-xs font-medium uppercase leading-6 text-text-tertiary">{t(`${i18nPrefix}.conversationRoleName`, { ns: 'workflow' })}</div>
+                <div className="text-xs leading-6 font-medium text-text-tertiary uppercase">{t(`${i18nPrefix}.conversationRoleName`, { ns: 'workflow' })}</div>
                 <div className="mt-1 space-y-2">
                   <RoleItem
                     readonly={readonly}
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
index 4fe0dc8cb5..ac2ee98c76 100644
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
@@ -2,13 +2,13 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import Placeholder from './placeholder'
 
 type MixedVariableTextInputProps = {
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
index fe573f14a5..6f374d58ae 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
@@ -2,7 +2,7 @@ import type {
   CommonNodeType,
   Node,
 } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import Add from './add'
 import Item from './item'
 
@@ -25,7 +25,7 @@ const Container = ({
 }: ContainerProps) => {
   return (
     <div className={cn(
-      'space-y-0.5 radius-lg bg-background-section-burn p-0.5',
+      'space-y-0.5 rounded-[10px] bg-background-section-burn p-0.5',
       isFailBranch && 'border-[0.5px] border-state-warning-hover-alt bg-state-warning-hover',
     )}
     >
@@ -33,7 +33,7 @@ const Container = ({
         branchName && (
           <div
             className={cn(
-              'system-2xs-semibold-uppercase flex items-center truncate px-2 text-text-tertiary',
+              'flex items-center truncate px-2 system-2xs-semibold-uppercase text-text-tertiary',
               isFailBranch && 'text-text-warning',
             )}
             title={branchName}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index 023f210108..eca48d85fd 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -1,6 +1,7 @@
 import type {
   CommonNodeType,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
@@ -14,7 +15,6 @@ import {
   useNodesReadOnly,
   useToolIcon,
 } from '@/app/components/workflow/hooks'
-import { cn } from '@/utils/classnames'
 import Operator from './operator'
 
 type ItemProps = {
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 578d8b27e8..0bcdfc0f46 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -1,6 +1,7 @@
 import type { MouseEvent } from 'react'
 import type { PluginDefaultValue } from '../../../block-selector/types'
 import type { Node } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
@@ -12,7 +13,6 @@ import {
   Handle,
   Position,
 } from 'reactflow'
-import { cn } from '@/utils/classnames'
 import BlockSelector from '../../../block-selector'
 import {
   useAvailableBlocks,
@@ -79,7 +79,7 @@ export const NodeTargetHandle = memo(({
         position={Position.Left}
         className={cn(
           'z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
-          'after:absolute after:left-1.5 after:top-1 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
+          'after:absolute after:top-1 after:left-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
           'transition-all hover:scale-125',
           data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
           data._runningStatus === NodeRunningStatus.Failed && 'after:bg-workflow-link-line-error-handle',
@@ -190,7 +190,7 @@ export const NodeSourceHandle = memo(({
       position={Position.Right}
       className={cn(
         'group/handle z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
-        'after:absolute after:right-1.5 after:top-1 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
+        'after:absolute after:top-1 after:right-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
         'transition-all hover:scale-125',
         data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
         data._runningStatus === NodeRunningStatus.Failed && 'after:bg-workflow-link-line-error-handle',
@@ -203,7 +203,7 @@ export const NodeSourceHandle = memo(({
     >
       <div className="absolute -top-1 left-1/2 hidden -translate-x-1/2 -translate-y-full rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg group-hover/handle:block">
         <div className="system-xs-regular text-text-tertiary">
-          <div className=" whitespace-nowrap">
+          <div className="whitespace-nowrap">
             <span className="system-xs-medium text-text-secondary">{t('common.parallelTip.click.title', { ns: 'workflow' })}</span>
             {t('common.parallelTip.click.desc', { ns: 'workflow' })}
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
index c9be0f4d0f..398796f617 100644
--- a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
@@ -1,11 +1,11 @@
 import type { OnResize } from 'reactflow'
 import type { CommonNodeType } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
 } from 'react'
 import { NodeResizeControl } from 'reactflow'
-import { cn } from '@/utils/classnames'
 import { useNodesInteractions } from '../../../hooks'
 
 const Icon = () => {
@@ -52,7 +52,7 @@ const NodeResizer = ({
         minHeight={minHeight}
         maxWidth={maxWidth}
       >
-        <div className="absolute bottom-px right-px">{icon}</div>
+        <div className="absolute right-px bottom-px">{icon}</div>
       </NodeResizeControl>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
index 26fc3352b7..4ee20b5d11 100644
--- a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAlertFill,
   RiCheckboxCircleFill,
   RiErrorWarningLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import { cn } from '@/utils/classnames'
 
 type NodeStatusIconProps = {
   status: string
diff --git a/web/app/components/workflow/nodes/_base/components/option-card.tsx b/web/app/components/workflow/nodes/_base/components/option-card.tsx
index d9deb2ab7b..dd8ad51437 100644
--- a/web/app/components/workflow/nodes/_base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/option-card.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { VariantProps } from 'class-variance-authority'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { useCallback } from 'react'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 
 const variants = cva([], {
   variants: {
@@ -48,9 +48,9 @@ const OptionCard: FC<Props> = ({
   return (
     <div
       className={cn(
-        'system-sm-regular flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+        'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
         (!selected && !disabled) && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-        selected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+        selected && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
         disabled && 'text-text-disabled',
         variants({ align }),
         className,
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index d23cdee3a8..c5a25f140d 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
-import { cn } from '@/utils/classnames'
 import TreeIndentLine from './variable/object-child-tree-panel/tree-indent-line'
 
 type Props = {
@@ -60,10 +60,10 @@ export const VarItem: FC<VarItemProps> = ({
         <div className="flex">
           <div className="flex items-center leading-[18px]">
             <div className="code-sm-semibold text-text-secondary">{name}</div>
-            <div className="system-xs-regular ml-2 text-text-tertiary">{type}</div>
+            <div className="ml-2 system-xs-regular text-text-tertiary">{type}</div>
           </div>
         </div>
-        <div className="system-xs-regular mt-0.5 text-text-tertiary">
+        <div className="mt-0.5 system-xs-regular text-text-tertiary">
           {description}
           {subItems && (
             <div className="ml-2 border-l border-gray-200 pl-2">
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 49c9a4fa69..e85c40c19e 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -6,6 +6,7 @@ import type {
   NodeOutPutVar,
   Variable,
 } from '../../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -14,8 +15,8 @@ import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
 
+import ActionButton from '@/app/components/base/action-button'
 import {
   Copy,
   CopyCheck,
@@ -32,7 +33,6 @@ import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/to
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import { useStore } from '@/app/components/workflow/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { cn } from '@/utils/classnames'
 import { BlockEnum, EditionType } from '../../../../types'
 import { CodeLanguage } from '../../../code/types'
 import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
@@ -158,9 +158,9 @@ const Editor: FC<Props> = ({
     <Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}>
       <div ref={ref} className={cn(isFocus ? (gradientBorder && 'bg-linear-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2') : 'bg-transparent', isExpand && 'h-full', 'rounded-[9px]! p-0.5', containerClassName)}>
         <div className={cn(isFocus ? 'bg-background-default' : 'bg-components-input-bg-normal', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}>
-          <div className={cn('flex items-center justify-between pl-3 pr-2 pt-1', headerClassName)}>
+          <div className={cn('flex items-center justify-between pt-1 pr-2 pl-3', headerClassName)}>
             <div className="flex gap-2">
-              <div className={cn('text-xs font-semibold uppercase leading-4 text-text-secondary', titleClassName)}>
+              <div className={cn('text-xs leading-4 font-semibold text-text-secondary uppercase', titleClassName)}>
                 {title}
                 {' '}
                 {required && <span className="text-text-destructive">*</span>}
@@ -168,7 +168,7 @@ const Editor: FC<Props> = ({
               {!!titleTooltip && <Tooltip popupContent={titleTooltip} />}
             </div>
             <div className="flex items-center">
-              <div className="text-xs font-medium leading-[18px] text-text-tertiary">{value?.length || 0}</div>
+              <div className="text-xs leading-[18px] font-medium text-text-tertiary">{value?.length || 0}</div>
               {isSupportPromptGenerator && (
                 <PromptGeneratorBtn
                   nodeId={nodeId!}
@@ -180,7 +180,7 @@ const Editor: FC<Props> = ({
                 />
               )}
 
-              <div className="ml-2 mr-2 h-3 w-px bg-divider-regular"></div>
+              <div className="mr-2 ml-2 h-3 w-px bg-divider-regular"></div>
               {/* Operations */}
               <div className="flex items-center space-x-[2px]">
                 {isSupportJinja && (
diff --git a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index b9a980ae01..bba7cfa7fc 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import {
   VariableLabelInText,
 } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
-import { cn } from '@/utils/classnames'
 import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { getNodeInfoById, isSystemVar } from './variable/utils'
@@ -60,7 +60,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
   })()
 
   return (
-    <div className={cn('break-all text-xs', className)}>
+    <div className={cn('text-xs break-all', className)}>
       {res}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
index c88baf4413..4ff699fb88 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
@@ -1,4 +1,5 @@
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAlertFill,
   RiCheckboxCircleFill,
@@ -7,7 +8,6 @@ import {
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type RetryOnNodeProps = Pick<Node, 'id' | 'data'>
 const RetryOnNode = ({
@@ -40,7 +40,7 @@ const RetryOnNode = ({
   return (
     <div className="mb-1 px-3">
       <div className={cn(
-        'system-xs-medium-uppercase flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-[5px] py-1 text-text-tertiary',
+        'flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-[5px] py-1 system-xs-medium-uppercase text-text-tertiary',
         isRunning && 'border-state-accent-active bg-state-accent-hover text-text-accent',
         isSuccessful && 'border-state-success-active bg-state-success-hover text-text-success',
         (isException || isFailed) && 'border-state-warning-active bg-state-warning-hover text-text-warning',
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index 60498a4a6a..52508acf85 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean, useClickAway } from 'ahooks'
 import * as React from 'react'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import { cn } from '@/utils/classnames'
 
 type Item = {
   value: string
@@ -66,15 +66,15 @@ const TypeSelector: FC<Props> = ({
         : (
             <div
               onClick={toggleShow}
-              className={cn(showOption && 'bg-state-base-hover', 'flex h-5 cursor-pointer items-center rounded-md pl-1 pr-0.5 text-xs font-semibold text-text-secondary hover:bg-state-base-hover')}
+              className={cn(showOption && 'bg-state-base-hover', 'flex h-5 cursor-pointer items-center rounded-md pr-0.5 pl-1 text-xs font-semibold text-text-secondary hover:bg-state-base-hover')}
             >
               <div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-text-tertiary', triggerClassName)}>{!noValue ? item?.label : placeholder}</div>
-              {!readonly && <DropDownIcon className="h-3 w-3 " />}
+              {!readonly && <DropDownIcon className="h-3 w-3" />}
             </div>
           )}
 
       {(showOption && !readonly) && (
-        <div className={cn('absolute top-[24px] z-10 w-[120px]  select-none rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg', popupClassName)}>
+        <div className={cn('absolute top-[24px] z-10 w-[120px] rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg select-none', popupClassName)}>
           {list.map(item => (
             <div
               key={item.value}
diff --git a/web/app/components/workflow/nodes/_base/components/setting-item.tsx b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
index 92be07e2d3..feea50cd18 100644
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -1,8 +1,8 @@
 import type { ComponentProps, PropsWithChildren, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import { cn } from '@/utils/classnames'
 
 type SettingItemProps = PropsWithChildren<{
   label: string
@@ -15,15 +15,15 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
   const needTooltip = ['error', 'warning'].includes(status as any)
   return (
     <div className="relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal">
-      <div className={cn('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
+      <div className={cn('max-w-full shrink-0 truncate system-xs-medium-uppercase text-text-tertiary', !!children && 'max-w-[100px]')}>
         {label}
       </div>
       <Tooltip popupContent={tooltip} disabled={!needTooltip}>
-        <div className="system-xs-medium truncate text-right text-text-secondary">
+        <div className="truncate text-right system-xs-medium text-text-secondary">
           {children}
         </div>
       </Tooltip>
-      {indicator && <Indicator color={indicator} className="absolute -right-0.5 -top-0.5" />}
+      {indicator && <Indicator color={indicator} className="absolute -top-0.5 -right-0.5" />}
     </div>
   )
 })
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
index 5cb5153c95..65c5e4ad69 100644
--- a/web/app/components/workflow/nodes/_base/components/split.tsx
+++ b/web/app/components/workflow/nodes/_base/components/split.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index 377e1d8bc5..77dd9d4c37 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   isFocus?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index d73baf3271..f279b55d03 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { FC, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowLeftRightLine, RiExternalLinkLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useCallback, useState } from 'react'
@@ -14,7 +15,6 @@ import PluginMutationModel from '@/app/components/plugins/plugin-mutation-model'
 import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
 import Link from '@/next/link'
 import { useCheckInstalled, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 
 type SwitchPluginVersionProps = {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index 3a748a131b..717d8afbe7 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { Field as FieldType } from '../../../../../llm/types'
 import type { ValueSelector } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
 import TreeIndentLine from '../tree-indent-line'
@@ -49,11 +49,11 @@ const Field: FC<Props> = ({
               ? (
                   <RiMoreFill className="h-3 w-3 text-text-tertiary" />
                 )
-              : (<div className={cn('system-sm-medium h-6 w-0 grow truncate leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
+              : (<div className={cn('h-6 w-0 grow truncate system-sm-medium leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
 
           </div>
           {depth < MAX_DEPTH + 1 && (
-            <div className="system-xs-regular ml-2 shrink-0 text-text-tertiary">{getFieldType(payload)}</div>
+            <div className="ml-2 shrink-0 system-xs-regular text-text-tertiary">{getFieldType(payload)}</div>
           )}
         </div>
       </Tooltip>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
index b29b1a6992..5cfb96fee4 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import type { StructuredOutput } from '../../../../../llm/types'
 import type { ValueSelector } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useHover } from 'ahooks'
 import * as React from 'react'
 import { useRef } from 'react'
-import { cn } from '@/utils/classnames'
 import Field from './field'
 
 type Props = {
@@ -47,13 +47,13 @@ export const PickerPanelMain: FC<Props> = ({
         <div className="flex">
           {root.nodeName && (
             <>
-              <div className="system-sm-medium max-w-[100px] truncate text-text-tertiary">{root.nodeName}</div>
+              <div className="max-w-[100px] truncate system-sm-medium text-text-tertiary">{root.nodeName}</div>
               <div className="system-sm-medium text-text-tertiary">.</div>
             </>
           )}
           <div className="system-sm-medium text-text-secondary">{root.attrName}</div>
         </div>
-        <div className="system-xs-regular ml-2 truncate text-text-tertiary" title={root.attrAlias || 'object'}>{root.attrAlias || 'object'}</div>
+        <div className="ml-2 truncate system-xs-regular text-text-tertiary" title={root.attrAlias || 'object'}>{root.attrAlias || 'object'}</div>
       </div>
       {fieldNames.map(name => (
         <Field
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index b5f2a6067c..863ec66eab 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { Field as FieldType } from '../../../../../llm/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDropDownLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
 import TreeIndentLine from '../tree-indent-line'
@@ -40,25 +40,25 @@ const Field: FC<Props> = ({
           <div className="relative flex select-none">
             {hasChildren && (
               <RiArrowDropDownLine
-                className={cn('absolute left-[-18px] top-[50%] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary', fold && 'rotate-270 text-text-accent')}
+                className={cn('absolute top-[50%] left-[-18px] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary', fold && 'rotate-270 text-text-accent')}
                 onClick={toggleFold}
               />
             )}
-            <div className={cn('system-sm-medium ml-[7px] h-6 truncate leading-6 text-text-secondary', isRoot && rootClassName)}>{name}</div>
-            <div className="system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary">
+            <div className={cn('ml-[7px] h-6 truncate system-sm-medium leading-6 text-text-secondary', isRoot && rootClassName)}>{name}</div>
+            <div className="ml-3 shrink-0 system-xs-regular leading-6 text-text-tertiary">
               {getFieldType(payload)}
               {(payload.schemaType && payload.schemaType !== 'file' && ` (${payload.schemaType})`)}
             </div>
-            {required && <div className="system-2xs-medium-uppercase ml-3 leading-6 text-text-warning">{t('structOutput.required', { ns: 'app' })}</div>}
+            {required && <div className="ml-3 system-2xs-medium-uppercase leading-6 text-text-warning">{t('structOutput.required', { ns: 'app' })}</div>}
           </div>
           {payload.description && (
             <div className="ml-[7px] flex">
-              <div className="system-xs-regular w-0 grow truncate text-text-tertiary">{payload.description}</div>
+              <div className="w-0 grow truncate system-xs-regular text-text-tertiary">{payload.description}</div>
             </div>
           )}
           {hasEnum && (
             <div className="ml-[7px] flex">
-              <div className="system-xs-regular w-0 grow text-text-quaternary">
+              <div className="w-0 grow system-xs-regular text-text-quaternary">
                 {payload.enum!.map((value, index) => (
                   <span key={index}>
                     {typeof value === 'string' ? `"${value}"` : value}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index 786875ddd1..c7e30adc59 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   depth?: number
@@ -16,7 +16,7 @@ const TreeIndentLine: FC<Props> = ({
   return (
     <div className={cn('flex', className)}>
       {depthArray.map(d => (
-        <div key={d} className={cn('ml-2.5 mr-2.5 w-px bg-divider-regular')}></div>
+        <div key={d} className={cn('mr-2.5 ml-2.5 w-px bg-divider-regular')}></div>
       ))}
     </div>
   )
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 931df92aca..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
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { ValueSelector, Var, Variable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDraggable } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import { produce } from 'immer'
@@ -12,7 +13,6 @@ import { v4 as uuid4 } from 'uuid'
 import Input from '@/app/components/base/input'
 import { toast } from '@/app/components/base/ui/toast'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
-import { cn } from '@/utils/classnames'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 import RemoveButton from '../remove-button'
 import VarReferencePicker from './var-reference-picker'
@@ -160,7 +160,7 @@ const VarList: FC<Props> = ({
             )}
             {canDrag && (
               <RiDraggable className={cn(
-                'handle absolute -left-4 top-2.5 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                'handle absolute top-2.5 -left-4 hidden h-3 w-3 cursor-pointer text-text-quaternary',
                 'group-hover:block',
               )}
               />
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index 32ff6a4627..e29c582838 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -6,6 +6,7 @@ import type { CredentialFormSchema, CredentialFormSchemaSelect } from '@/app/com
 import type { Tool } from '@/app/components/tools/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { Node, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCloseLine, RiErrorWarningFill, RiLoader4Line, RiMoreLine } from '@remixicon/react'
 import Badge from '@/app/components/base/badge'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
@@ -14,7 +15,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/u
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
-import { cn } from '@/utils/classnames'
 import RemoveButton from '../remove-button'
 import ConstantField from './constant-field'
 
@@ -149,7 +149,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                         <TypeSelector
                           noLeft
                           trigger={(
-                            <div className="flex h-8 items-center radius-md bg-components-input-bg-normal px-2">
+                            <div className="flex h-8 items-center rounded-lg bg-components-input-bg-normal px-2">
                               <div className="mr-1 system-sm-regular text-components-input-text-filled">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
                               <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
                             </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 015bdf63b6..47bc60e22b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -4,6 +4,7 @@ import type { CredentialFormSchema, CredentialFormSchemaSelect, FormOption } fro
 import type { Tool } from '@/app/components/tools/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { CommonNodeType, Node, NodeOutPutVar, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -30,7 +31,6 @@ import { useStore as useWorkflowStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import { useFetchDynamicOptions } from '@/service/use-plugins'
-import { cn } from '@/utils/classnames'
 import useAvailableVarList from '../../hooks/use-available-var-list'
 import { removeFileVars, varTypeToStructType } from './utils'
 import VarFullPathPanel from './var-full-path-panel'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index c85ffc3f33..5c67723d78 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { StructuredOutput } from '../../../llm/types'
 import type { Field } from '@/app/components/workflow/nodes/llm/types'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useHover } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -20,7 +21,6 @@ import {
 import PickerStructurePanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { Type } from '../../../llm/types'
 import ManageInputField from './manage-input-field'
 import { varTypeToStructType } from './utils'
@@ -177,7 +177,7 @@ const Item: FC<ItemProps> = ({
         <div
           ref={itemRef}
           className={cn(
-            (isObj || isStructureOutput) ? ' pr-1' : 'pr-[18px]',
+            (isObj || isStructureOutput) ? 'pr-1' : 'pr-[18px]',
             isHovering && ((isObj || isStructureOutput) ? 'bg-components-panel-on-panel-item-bg-hover' : 'bg-state-base-hover'),
             'relative flex h-6 w-full cursor-pointer items-center rounded-md pl-3',
             className,
@@ -200,19 +200,19 @@ const Item: FC<ItemProps> = ({
             {isFlat && flatVarIcon}
 
             {!isEnv && !isChatVar && !isRagVariable && (
-              <div title={itemData.variable} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{varName}</div>
+              <div title={itemData.variable} className="ml-1 w-0 grow truncate system-sm-medium text-text-secondary">{varName}</div>
             )}
             {isEnv && (
-              <div title={itemData.variable} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{itemData.variable.replace('env.', '')}</div>
+              <div title={itemData.variable} className="ml-1 w-0 grow truncate system-sm-medium text-text-secondary">{itemData.variable.replace('env.', '')}</div>
             )}
             {isChatVar && (
-              <div title={itemData.des} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{itemData.variable.replace('conversation.', '')}</div>
+              <div title={itemData.des} className="ml-1 w-0 grow truncate system-sm-medium text-text-secondary">{itemData.variable.replace('conversation.', '')}</div>
             )}
             {isRagVariable && (
-              <div title={itemData.des} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{itemData.variable.split('.').slice(-1)[0]}</div>
+              <div title={itemData.des} className="ml-1 w-0 grow truncate system-sm-medium text-text-secondary">{itemData.variable.split('.').slice(-1)[0]}</div>
             )}
           </div>
-          <div className="ml-1 shrink-0 text-xs font-normal capitalize text-text-tertiary">{(preferSchemaType && itemData.schemaType) ? itemData.schemaType : itemData.type}</div>
+          <div className="ml-1 shrink-0 text-xs font-normal text-text-tertiary capitalize">{(preferSchemaType && itemData.schemaType) ? itemData.schemaType : itemData.type}</div>
           {
             (isObj || isStructureOutput) && (
               <ChevronRight className={cn('ml-0.5 h-3 w-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
@@ -290,7 +290,7 @@ const VarReferenceVars: FC<Props> = ({
       {
         !hideSearch && (
           <>
-            <div className={cn('var-search-input-wrapper mx-2 mb-2 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
+            <div className={cn('var-search-input-wrapper mx-2 mt-2 mb-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
               <Input
                 className="var-search-input"
                 showLeftIcon
@@ -324,7 +324,7 @@ const VarReferenceVars: FC<Props> = ({
                   <div key={i} className={cn(!item.isFlat && 'mt-3', i === 0 && item.isFlat && 'mt-2')}>
                     {!item.isFlat && (
                       <div
-                        className="system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary"
+                        className="truncate px-3 system-xs-medium-uppercase leading-[22px] text-text-tertiary"
                         title={item.title}
                       >
                         {item.title}
@@ -349,10 +349,10 @@ const VarReferenceVars: FC<Props> = ({
                       />
                     ))}
                     {item.isFlat && !filteredVars[i + 1]?.isFlat && !!filteredVars.find(item => !item.isFlat) && (
-                      <div className="relative mt-[14px] flex  items-center space-x-1">
+                      <div className="relative mt-[14px] flex items-center space-x-1">
                         <div className="h-0 w-3 shrink-0 border border-divider-subtle"></div>
                         <div className="system-2xs-semibold-uppercase text-text-tertiary">{t('debug.lastOutput', { ns: 'workflow' })}</div>
-                        <div className="h-0  shrink-0 grow border border-divider-subtle"></div>
+                        <div className="h-0 shrink-0 grow border border-divider-subtle"></div>
                       </div>
                     )}
                   </div>
@@ -360,7 +360,7 @@ const VarReferenceVars: FC<Props> = ({
               }
             </div>
           )
-        : <div className="mt-2 pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500">{t('common.noVar', { ns: 'workflow' })}</div>}
+        : <div className="mt-2 pl-3 text-xs leading-[18px] font-medium text-gray-500 uppercase">{t('common.noVar', { ns: 'workflow' })}</div>}
       {
         showManageInputField && (
           <ManageInputField
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 3af95587cb..6d3cfe7cfb 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -10,7 +11,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -57,7 +57,7 @@ const VarReferencePicker: FC<Props> = ({
             {TYPES.map(type => (
               <div
                 key={type}
-                className="flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-text-primary hover:bg-state-base-hover"
+                className="flex h-[30px] cursor-pointer items-center justify-between rounded-lg pr-2 pl-3 text-[13px] text-text-primary hover:bg-state-base-hover"
                 onClick={handleChange(type)}
               >
                 <div className="w-0 grow truncate capitalize">{type}</div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
index c515cd9e7a..d1c1d8ff1f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
@@ -1,6 +1,6 @@
 import type { VarInInspectType } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import { useVarIcon } from '../hooks'
 
 export type VariableIconProps = {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
index 35ef72eb0b..6ee0d63830 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -1,9 +1,9 @@
 import type { VariablePayload } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { capitalize } from 'es-toolkit/string'
 import { memo } from 'react'
 import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
-import { cn } from '@/utils/classnames'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar } from '../../utils'
 import { useVarColor } from '../hooks'
 import VariableIcon from './variable-icon'
@@ -46,7 +46,7 @@ const VariableLabel = ({
         notShowFullPath && (
           <>
             <span className="i-ri-more-line h-3 w-3 shrink-0 text-text-secondary" />
-            <div className="shrink-0 text-divider-deep system-xs-regular">/</div>
+            <div className="shrink-0 system-xs-regular text-divider-deep">/</div>
           </>
         )
       }
@@ -61,7 +61,7 @@ const VariableLabel = ({
       />
       {
         !!variableType && (
-          <div className="shrink-0 text-text-tertiary system-xs-regular">
+          <div className="shrink-0 system-xs-regular text-text-tertiary">
             {capitalize(variableType)}
           </div>
         )
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
index d3d9b6bbcf..aa1c7090fd 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import { useVarName } from '../hooks'
 
 type VariableNameProps = {
@@ -17,7 +17,7 @@ const VariableName = ({
   return (
     <div
       className={cn(
-        'system-xs-medium truncate',
+        'truncate system-xs-medium',
         className,
       )}
       title={varName}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
index bbe580e79e..c766d3c719 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
@@ -1,6 +1,6 @@
 import type { VariableIconProps } from './base/variable-icon'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import VariableIcon from './base/variable-icon'
 import { useVarColor } from './hooks'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
index ba1c0bc820..17cf938d5b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
@@ -1,6 +1,6 @@
 import type { VariablePayload } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import VariableLabel from './base/variable-label'
 import { useVarBgColorInEditor } from './hooks'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
index a71962f7a0..f778dbeddf 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
@@ -1,6 +1,6 @@
 import type { VariablePayload } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import VariableLabel from './base/variable-label'
 
 const VariableLabelInNode = (variablePayload: VariablePayload) => {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
index 776bc8c0ed..b25997e64e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
@@ -1,6 +1,6 @@
 import type { VariablePayload } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import VariableLabel from './base/variable-label'
 
 const VariableLabelInText = (variablePayload: VariablePayload) => {
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index ec1fac0353..3179d7a981 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -1,6 +1,7 @@
 import type { FC, ReactNode } from 'react'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
   RiPlayLargeLine,
@@ -60,7 +61,6 @@ import { useModalContext } from '@/context/modal-context'
 import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
 import { FlowType } from '@/types/common'
-import { cn } from '@/utils/classnames'
 import { useResizePanel } from '../../hooks/use-resize-panel'
 import BeforeRunForm from '../before-run-form'
 import PanelWrap from '../before-run-form/panel-wrap'
@@ -352,7 +352,7 @@ const BasePanel: FC<BasePanelProps> = ({
   if (logParams.showSpecialResultPanel) {
     return (
       <div className={cn(
-        'relative mr-1  h-full',
+        'relative mr-1 h-full',
       )}
       >
         <div
@@ -392,7 +392,7 @@ const BasePanel: FC<BasePanelProps> = ({
 
     return (
       <div className={cn(
-        'relative mr-1  h-full',
+        'relative mr-1 h-full',
       )}
       >
         <div
@@ -437,7 +437,7 @@ const BasePanel: FC<BasePanelProps> = ({
     >
       <div
         ref={triggerRef}
-        className="absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center"
+        className="absolute top-0 -left-1 flex h-full w-1 cursor-col-resize resize-x items-center justify-center"
       >
         <div className="h-10 w-0.5 rounded-xs bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid"></div>
       </div>
@@ -449,7 +449,7 @@ const BasePanel: FC<BasePanelProps> = ({
         }}
       >
         <div className="sticky top-0 z-10 shrink-0 border-b-[0.5px] border-divider-regular bg-components-panel-bg">
-          <div className="flex items-center px-4 pb-1 pt-4">
+          <div className="flex items-center px-4 pt-4 pb-1">
             <BlockIcon
               className="mr-1 shrink-0"
               type={data.type}
@@ -514,7 +514,7 @@ const BasePanel: FC<BasePanelProps> = ({
                   detail: currToolCollection as any,
                 }}
               >
-                <div className="flex items-center justify-between pl-4 pr-3">
+                <div className="flex items-center justify-between pr-3 pl-4">
                   <Tab
                     value={tabType}
                     onChange={setTabType}
@@ -539,7 +539,7 @@ const BasePanel: FC<BasePanelProps> = ({
                 onJumpToDataSourcePage={handleJumpToDataSourcePage}
                 isAuthorized={currentDataSource.is_authorized}
               >
-                <div className="flex items-center justify-between pl-4 pr-3">
+                <div className="flex items-center justify-between pr-3 pl-4">
                   <Tab
                     value={tabType}
                     onChange={setTabType}
@@ -567,7 +567,7 @@ const BasePanel: FC<BasePanelProps> = ({
           }
           {
             !needsToolAuth && !currentDataSource && !currentTriggerPlugin && (
-              <div className="flex items-center justify-between pl-4 pr-3">
+              <div className="flex items-center justify-between pr-3 pl-4">
                 <Tab
                   value={tabType}
                   onChange={setTabType}
@@ -613,10 +613,10 @@ const BasePanel: FC<BasePanelProps> = ({
             {
               !!availableNextBlocks.length && (
                 <div className="border-t-[0.5px] border-divider-regular p-4">
-                  <div className="system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary">
+                  <div className="mb-1 flex items-center system-sm-semibold-uppercase text-text-secondary">
                     {t('panel.nextStep', { ns: 'workflow' }).toLocaleUpperCase()}
                   </div>
-                  <div className="system-xs-regular mb-2 text-text-tertiary">
+                  <div className="mb-2 system-xs-regular text-text-tertiary">
                     {t('panel.addNextStep', { ns: 'workflow' })}
                   </div>
                   <NextStep selectedNode={selectedNode} />
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
index a6dd65ea81..317f4853ac 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
+import { cn } from '@langgenius/dify-ui/cn'
 import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
 import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
 import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
-import { cn } from '@/utils/classnames'
 
 type TriggerSubscriptionProps = {
   subscriptionIdSelected?: string
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index b331354ec5..0c38cd716e 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -3,6 +3,7 @@ import type {
   ReactElement,
 } from 'react'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   cloneElement,
   memo,
@@ -23,7 +24,6 @@ import {
   NodeRunningStatus,
 } from '@/app/components/workflow/types'
 import { hasErrorHandleNode, hasRetryNode } from '@/app/components/workflow/utils'
-import { cn } from '@/utils/classnames'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
 import EntryNodeContainer, { StartNodeTypeEnum } from './components/entry-node-container'
 import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
@@ -106,7 +106,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       return (
         <div
           className={cn(
-            'mr-2 text-text-tertiary system-xs-medium',
+            'mr-2 system-xs-medium text-text-tertiary',
             data._runningStatus === NodeRunningStatus.Running && 'text-text-accent',
           )}
         >
@@ -147,7 +147,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       {
         data.type === BlockEnum.DataSource && (
           <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
-            <div className="flex h-5 items-center px-2.5 text-text-tertiary system-2xs-semibold-uppercase">
+            <div className="flex h-5 items-center px-2.5 system-2xs-semibold-uppercase text-text-tertiary">
               {t('blocks.datasource', { ns: 'workflow' })}
             </div>
           </div>
@@ -221,7 +221,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           )
         }
         <div className={cn(
-          'flex items-center rounded-t-2xl px-3 pb-2 pt-3',
+          'flex items-center rounded-t-2xl px-3 pt-3 pb-2',
           isContainerNode(data.type) && 'bg-transparent',
         )}
         >
@@ -233,7 +233,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           />
           <div
             title={data.title}
-            className="mr-1 flex grow items-center truncate text-text-primary system-sm-semibold-uppercase"
+            className="mr-1 flex grow items-center truncate system-sm-semibold-uppercase text-text-primary"
           >
             <div>
               {data.title}
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index ef786d1574..b545c2f370 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
@@ -5,7 +6,6 @@ import { Group } from '@/app/components/base/icons/src/vender/other'
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
 
 type Status = 'not-installed' | 'not-authorized' | undefined
@@ -72,7 +72,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
         className={cn('relative')}
         ref={containerRef}
       >
-        <div className="flex size-5 items-center justify-center overflow-hidden radius-sm border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
+        <div className="flex size-5 items-center justify-center overflow-hidden rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
           {(() => {
             if (iconFetchError || !icon)
               return <Group className="h-3 w-3 opacity-35" />
@@ -98,7 +98,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
             return <Group className="h-3 w-3 opacity-35" />
           })()}
         </div>
-        {indicator && <Indicator color={indicator} className="absolute -right-px -top-px" />}
+        {indicator && <Indicator color={indicator} className="absolute -top-px -right-px" />}
       </div>
     </Tooltip>
   )
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 6f6730f5bb..8bce904b74 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 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,
@@ -14,7 +15,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { getOperationItems, isOperationItem } from '../utils'
 
 type OperationSelectorProps = {
@@ -63,7 +63,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
         >
           <div className="flex items-center p-1">
             <span
-              className={`system-sm-regular overflow-hidden truncate text-ellipsis
+              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' })}
@@ -76,8 +76,8 @@ const OperationSelector: FC<OperationSelectorProps> = ({
       <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 pb-0.5 pt-1">
-              <div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t('nodes.assigner.operations.title', { ns: 'workflow' })}</div>
+            <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)
@@ -94,7 +94,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                       }}
                     >
                       <div className="flex min-h-5 grow items-center gap-1 px-1">
-                        <span className="system-sm-medium flex grow text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
+                        <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">
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index ba896316b3..a3248b3545 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -1,4 +1,5 @@
 import type { NodeProps } from 'reactflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import {
   memo,
@@ -7,7 +8,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import { cn } from '@/utils/classnames'
 import { useReplaceDataSourceNode } from './hooks'
 
 const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 04d1957db8..b78ef3026a 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { Var } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
-import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import Selector from '../../_base/components/selector'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
@@ -48,14 +48,14 @@ const ApiInput: FC<Props> = ({
   })
 
   return (
-    <div className="flex items-start  space-x-1">
+    <div className="flex items-start space-x-1">
       <Selector
         value={method}
         onChange={onMethodChange}
         options={MethodOptions}
         trigger={(
           <div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')}>
-            <div className="w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-text-primary">{method}</div>
+            <div className="w-12 pl-0.5 text-xs leading-[18px] font-medium text-text-primary uppercase">{method}</div>
             {!readonly && <RiArrowDownSLine className="ml-1 h-3.5 w-3.5 text-text-secondary" />}
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 439d62c922..f44cbe6025 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Authorization as AuthorizationPayloadType } from '../../types'
 import type { Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -12,7 +13,6 @@ import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { APIType, AuthorizationType } from '../../types'
 import RadioGroup from './radio-group'
 
diff --git a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
index 48ad4066b9..6af508ead2 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
-import { cn } from '@/utils/classnames'
 
 type Option = {
   value: string
@@ -22,9 +22,9 @@ const Item: FC<ItemProps> = ({
   return (
     <div
       className={cn(
-        'system-sm-regular flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+        'flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
         !isSelected && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-        isSelected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+        isSelected && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
       )}
       onClick={onClick}
     >
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 7e44ad5aeb..5f3294903b 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { Body, BodyPayload, KeyValue as KeyValueType } from '../../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { uniqueId } from 'es-toolkit/compat'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import VarReferencePicker from '../../../_base/components/variable/var-reference-picker'
 import useAvailableVarList from '../../../_base/hooks/use-available-var-list'
 import { BodyPayloadValueType, BodyType } from '../../types'
@@ -146,7 +146,7 @@ const EditBody: FC<Props> = ({
               onChange={handleTypeChange}
               disabled={readonly}
             />
-            <div className="text-[13px] font-normal leading-[18px] text-text-secondary">{bodyTextMap[t]}</div>
+            <div className="text-[13px] leading-[18px] font-normal text-text-secondary">{bodyTextMap[t]}</div>
           </label>
         ))}
       </div>
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 55ccee4068..2a4b6b23b6 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { KeyValue } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import KeyValueItem from './item'
 
 const i18nPrefix = 'nodes.http'
@@ -58,10 +58,10 @@ const KeyValueList: FC<Props> = ({
 
   return (
     <div className="overflow-hidden rounded-lg border border-divider-regular">
-      <div className={cn('flex h-7 items-center leading-7 text-text-tertiary system-xs-medium-uppercase')}>
+      <div className={cn('flex h-7 items-center system-xs-medium-uppercase leading-7 text-text-tertiary')}>
         <div className={cn('flex h-full items-center border-r border-divider-regular pl-3', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`, { ns: 'workflow' })}</div>
         {isSupportFile && <div className="flex h-full w-[70px] shrink-0 items-center border-r border-divider-regular pl-3">{t(`${i18nPrefix}.type`, { ns: 'workflow' })}</div>}
-        <div className={cn('flex h-full items-center justify-between pl-3 pr-1', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`, { ns: 'workflow' })}</div>
+        <div className={cn('flex h-full items-center justify-between pr-1 pl-3', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`, { ns: 'workflow' })}</div>
       </div>
       {
         list.map((item, index) => (
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 65bc1c57c7..6fa83dac52 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
 
 type Props = {
@@ -102,7 +102,7 @@ const InputItem: FC<Props> = ({
           )}
       {hasRemove && !isFocus && (
         <RemoveButton
-          className="absolute right-1 top-0.5 hidden group-hover:block"
+          className="absolute top-0.5 right-1 hidden group-hover:block"
           onClick={handleRemove}
         />
       )}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index 51d887d344..f2fc2e9e1c 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { KeyValue } from '../../../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalSelect } from '@/app/components/base/select'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import VarReferencePicker from '../../../../_base/components/variable/var-reference-picker'
 import InputItem from './input-item'
 // import Input from '@/app/components/base/input'
@@ -97,7 +97,7 @@ const KeyValueItem: FC<Props> = ({
             )
           : (
               <input
-                className="system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-transparent outline-hidden hover:bg-components-input-bg-hover focus:ring-0"
+                className="appearance-none rounded-none border-none bg-transparent system-sm-regular outline-hidden hover:bg-components-input-bg-hover focus:bg-gray-100! focus:ring-0"
                 value={payload.key}
                 onChange={e => handleChange('key')(e.target.value)}
               />
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 7926d52fc7..905e5212af 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { HttpNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FileArrow01 } from '@/app/components/base/icons/src/vender/line/files'
@@ -9,7 +10,6 @@ import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import { cn } from '@/utils/classnames'
 import ApiInput from './components/api-input'
 import AuthorizationModal from './components/authorization'
 import CurlPanel from './components/curl-panel'
@@ -64,7 +64,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
             <div className="flex">
               <div
                 onClick={showAuthorization}
-                className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2')}
               >
                 {!readOnly && <Settings01 className="h-3 w-3 text-text-tertiary" />}
                 <div className="text-xs font-medium text-text-tertiary">
@@ -74,7 +74,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
               </div>
               <div
                 onClick={showCurlPanel}
-                className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2')}
               >
                 {!readOnly && <FileArrow01 className="h-3 w-3 text-text-tertiary" />}
                 <div className="text-xs font-medium text-text-tertiary">
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index ae739e2baa..363e0070c0 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiFontSize,
 } from '@remixicon/react'
@@ -11,7 +12,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { UserActionButtonType } from '../types'
 
 const i18nPrefix = 'nodes.humanInput'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
index a5956db6c6..0d8f51868a 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
@@ -123,8 +123,8 @@ const EmailConfigureModal = ({
           />
         </div>
         <Divider className="my-0! mt-5! h-px!" />
-        <div className="flex items-start justify-between gap-2 radius-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 pl-2.5 shadow-xs">
-          <div className="radius-xs border border-divider-regular bg-components-icon-bg-orange-dark-solid p-0.5">
+        <div className="flex items-start justify-between gap-2 rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 pl-2.5 shadow-xs">
+          <div className="rounded-sm border border-divider-regular bg-components-icon-bg-orange-dark-solid p-0.5">
             <RiBugLine className="h-3.5 w-3.5 text-text-primary-on-surface" />
           </div>
           <div className="grow space-y-1">
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
index 03ae7ccf61..aa5fd77d0e 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
@@ -86,7 +86,7 @@ const DeliveryMethodForm: React.FC<Props> = ({
         )}
       </div>
       {!value.length && (
-        <div className="system-xs-regular flex items-center justify-center radius-lg bg-background-section p-3 text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emptyTip`, { ns: 'workflow' })}</div>
+        <div className="flex items-center justify-center rounded-[10px] bg-background-section p-3 system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emptyTip`, { ns: 'workflow' })}</div>
       )}
       {value.length > 0 && (
         <div className="space-y-1">
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx
index 8e127d932e..8dddb94d6e 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx
@@ -2,11 +2,11 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import Placeholder from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type MailBodyInputProps = {
   readOnly?: boolean
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
index 3afe390d1d..c1ffe2976b 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -4,6 +4,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
   RiEqualizer2Line,
@@ -20,7 +21,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
-import { cn } from '@/utils/classnames'
 import { DeliveryMethodType } from '../../types'
 import EmailConfigureModal from './email-configure-modal'
 import TestEmailSender from './test-email-sender'
@@ -95,12 +95,12 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
       >
         <div className="flex items-center gap-1.5">
           {method.type === DeliveryMethodType.WebApp && (
-            <div className="radius-xs border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5">
+            <div className="rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5">
               <RiRobot2Fill className="h-3.5 w-3.5 text-text-primary-on-surface" />
             </div>
           )}
           {method.type === DeliveryMethodType.Email && (
-            <div className="radius-xs border border-divider-regular bg-components-icon-bg-blue-solid p-0.5">
+            <div className="rounded-sm border border-divider-regular bg-components-icon-bg-blue-solid p-0.5">
               <RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
             </div>
           )}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
index 82838b0677..16c2345549 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DeliveryMethod } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiDiscordFill,
@@ -23,7 +24,6 @@ import useWorkflowNodes from '@/app/components/workflow/store/workflow/use-nodes
 import { isTriggerWorkflow } from '@/app/components/workflow/utils/workflow-entry'
 import { IS_CE_EDITION } from '@/config'
 import { useProviderContextSelector } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
 import { DeliveryMethodType } from '../../types'
 
 const i18nPrefix = 'nodes.humanInput'
@@ -102,18 +102,18 @@ const MethodSelector: FC<MethodSelectorProps> = ({
                 })
               }}
             >
-              <div className={cn('radius-xs border border-divider-regular bg-components-icon-bg-indigo-solid p-1', webAppDeliveryInfo.disabled && 'opacity-50')}>
+              <div className={cn('rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-1', webAppDeliveryInfo.disabled && 'opacity-50')}>
                 <RiRobot2Fill className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', webAppDeliveryInfo.disabled && 'opacity-50')}>
-                <div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`, { ns: 'workflow' })}</div>
-                <div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.description`, { ns: 'workflow' })}</div>
+                <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`, { ns: 'workflow' })}</div>
+                <div className="truncate system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.description`, { ns: 'workflow' })}</div>
               </div>
               {webAppDeliveryInfo.added && (
-                <div className="system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
+                <div className="absolute top-[13px] right-[12px] system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
               )}
               {webAppDeliveryInfo.isTriggerMode && !webAppDeliveryInfo.added && (
-                <div className="system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.notAvailableInTriggerMode`, { ns: 'workflow' })}</div>
+                <div className="absolute top-[13px] right-[12px] system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.notAvailableInTriggerMode`, { ns: 'workflow' })}</div>
               )}
             </div>
             <div
@@ -137,32 +137,32 @@ const MethodSelector: FC<MethodSelectorProps> = ({
             >
               <div
                 className={cn(
-                  'radius-xs border border-divider-regular bg-components-icon-bg-blue-solid p-1',
+                  'rounded-sm border border-divider-regular bg-components-icon-bg-blue-solid p-1',
                   emailDeliveryInfo.added && 'opacity-50',
                 )}
               >
                 <RiMailSendFill className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', emailDeliveryInfo.added && 'opacity-50')}>
-                <div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.email.title`, { ns: 'workflow' })}</div>
-                <div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.email.description`, { ns: 'workflow' })}</div>
+                <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.email.title`, { ns: 'workflow' })}</div>
+                <div className="truncate system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.email.description`, { ns: 'workflow' })}</div>
               </div>
               {emailDeliveryInfo.added && (
-                <div className="system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
+                <div className="absolute top-[13px] right-[12px] system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
               )}
             </div>
             {/* Slack */}
             <div
               className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', 'cursor-not-allowed bg-transparent hover:bg-transparent')}
             >
-              <div className={cn('radius-xs border border-divider-regular bg-background-default-dodge p-1', 'opacity-50')}>
+              <div className={cn('rounded-sm border border-divider-regular bg-background-default-dodge p-1', 'opacity-50')}>
                 <Slack className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', 'opacity-50')}>
-                <div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.slack.title`, { ns: 'workflow' })}</div>
-                <div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.slack.description`, { ns: 'workflow' })}</div>
+                <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.slack.title`, { ns: 'workflow' })}</div>
+                <div className="truncate system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.slack.description`, { ns: 'workflow' })}</div>
               </div>
-              <div className="absolute right-[8px] top-[8px]">
+              <div className="absolute top-[8px] right-[8px]">
                 <Badge className="h-4">COMING SOON</Badge>
               </div>
             </div>
@@ -170,14 +170,14 @@ const MethodSelector: FC<MethodSelectorProps> = ({
             <div
               className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', 'cursor-not-allowed bg-transparent hover:bg-transparent')}
             >
-              <div className={cn('radius-xs border border-divider-regular bg-background-default-dodge p-1', 'opacity-50')}>
+              <div className={cn('rounded-sm border border-divider-regular bg-background-default-dodge p-1', 'opacity-50')}>
                 <Teams className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', 'opacity-50')}>
-                <div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.teams.title`, { ns: 'workflow' })}</div>
-                <div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.teams.description`, { ns: 'workflow' })}</div>
+                <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.teams.title`, { ns: 'workflow' })}</div>
+                <div className="truncate system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.teams.description`, { ns: 'workflow' })}</div>
               </div>
-              <div className="absolute right-[8px] top-[8px]">
+              <div className="absolute top-[8px] right-[8px]">
                 <Badge className="h-4">COMING SOON</Badge>
               </div>
             </div>
@@ -185,14 +185,14 @@ const MethodSelector: FC<MethodSelectorProps> = ({
             <div
               className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', 'cursor-not-allowed bg-transparent hover:bg-transparent')}
             >
-              <div className={cn('radius-xs border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', 'opacity-50')}>
+              <div className={cn('rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', 'opacity-50')}>
                 <RiDiscordFill className="h-5 w-5 text-text-primary-on-surface" />
               </div>
               <div className={cn('p-1', 'opacity-50')}>
-                <div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.discord.title`, { ns: 'workflow' })}</div>
-                <div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.discord.description`, { ns: 'workflow' })}</div>
+                <div className="mb-0.5 truncate system-sm-medium text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.discord.title`, { ns: 'workflow' })}</div>
+                <div className="truncate system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.discord.description`, { ns: 'workflow' })}</div>
               </div>
-              <div className="absolute right-[8px] top-[8px]">
+              <div className="absolute top-[8px] right-[8px]">
                 <Badge className="h-4">COMING SOON</Badge>
               </div>
             </div>
@@ -201,7 +201,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
         {!IS_CE_EDITION && (
           <div className="mt-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
             <div className="flex items-center gap-2 px-4 py-3">
-              <div className={cn('radius-xs border border-divider-regular bg-components-icon-bg-midnight-solid p-1')}>
+              <div className={cn('rounded-sm border border-divider-regular bg-components-icon-bg-midnight-solid p-1')}>
                 <RiLightbulbFlashFill className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className="system-sm-regular text-text-secondary">
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
index 9d34e6f2af..99192ae580 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
@@ -1,5 +1,6 @@
 import type { Recipient as RecipientItem } from '../../../types'
 import type { Member } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import EmailItem from './email-item'
 import MemberList from './member-list'
 
@@ -153,7 +153,7 @@ const EmailInput = ({
             <PortalToFollowElemTrigger className="block h-6 min-w-[166px]">
               <input
                 ref={inputRef}
-                className="system-sm-regular h-6 min-w-[166px] appearance-none bg-transparent p-1 text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder"
+                className="h-6 min-w-[166px] appearance-none bg-transparent p-1 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder"
                 placeholder={placeholder}
                 onFocus={() => setIsFocus(true)}
                 onBlur={handleInputBlur}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
index 465e2b7d40..8d370266b0 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
@@ -1,10 +1,10 @@
 import type { Recipient as RecipientItem } from '../../../types'
 import type { Member } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseCircleFill, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/ui/avatar'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   email: string
@@ -35,7 +35,7 @@ const EmailItem = ({
         <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
       )}
       {!isError && <Avatar avatar={data.avatar_url} size="xxs" name={data.name || data.email} />}
-      <div title={data.email} className="system-xs-regular max-w-[500px] truncate text-text-primary">
+      <div title={data.email} className="max-w-[500px] truncate system-xs-regular text-text-primary">
         {email === data.email ? data.name : data.email}
         {email === data.email && <span className="system-xs-regular text-text-tertiary">{t('members.you', { ns: 'common' })}</span>}
       </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
index cd44572c1a..e69b2ba245 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
@@ -1,4 +1,5 @@
 import type { RecipientData, Recipient as RecipientItem } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiGroupLine } from '@remixicon/react'
 import { produce } from 'immer'
 import { memo } from 'react'
@@ -6,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import Switch from '@/app/components/base/switch'
 import { useAppContext } from '@/context/app-context'
 import { useMembers } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import EmailInput from './email-input'
 import MemberSelector from './member-selector'
 
@@ -61,8 +61,8 @@ const Recipient = ({
 
   return (
     <div className="space-y-1">
-      <div className="radius-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs">
-        <div className="flex h-10 items-center justify-between pl-3 pr-1">
+      <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs">
+        <div className="flex h-10 items-center justify-between pr-1 pl-3">
           <div className="flex grow items-center gap-2">
             <RiGroupLine className="h-4 w-4 text-text-secondary" />
             <div className="system-sm-medium text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.title`, { ns: 'workflow' })}</div>
@@ -85,11 +85,11 @@ const Recipient = ({
           onAdd={handleEmailAdd}
         />
       </div>
-      <div className="flex h-10 items-center gap-2 radius-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs">
+      <div className="flex h-10 items-center gap-2 rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pr-3 pl-2.5 shadow-xs">
         <div className="flex h-5 w-5 items-center justify-center rounded-xl bg-components-icon-bg-blue-solid text-[14px]">
-          <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>
+          <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>
         </div>
-        <div className={cn('system-sm-medium grow text-text-secondary')}>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.allMembers`, { workspaceName: currentWorkspace.name.replace(/'/g, '’'), ns: 'workflow' })}</div>
+        <div className={cn('grow system-sm-medium text-text-secondary')}>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.allMembers`, { workspaceName: currentWorkspace.name.replace(/'/g, '’'), ns: 'workflow' })}</div>
         <Switch
           value={data.whole_workspace}
           onChange={checked => onChange({ ...data, whole_workspace: checked })}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
index 2a7b9b0707..c80c22639e 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { Recipient } from '@/app/components/workflow/nodes/human-input/types'
 import type { Member } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { Avatar } from '@/app/components/base/ui/avatar'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'nodes.humanInput'
 
@@ -56,7 +56,7 @@ const MemberList: FC<Props> = ({ searchValue, list, value, onSearchChange, onSel
             <div
               key={account.id}
               className={cn(
-                'group flex cursor-pointer items-center gap-2 rounded-lg py-1 pl-2 pr-3 hover:bg-state-base-hover',
+                'group flex cursor-pointer items-center gap-2 rounded-lg py-1 pr-3 pl-2 hover:bg-state-base-hover',
                 value.some(item => item.user_id === account.id) && 'bg-transparent hover:bg-transparent',
               )}
               onClick={() => {
@@ -69,13 +69,13 @@ const MemberList: FC<Props> = ({ searchValue, list, value, onSearchChange, onSel
               <div className={cn('grow', value.some(item => item.user_id === account.id) && 'opacity-50')}>
                 <div className="system-sm-medium text-text-secondary">
                   {account.name}
-                  {account.status === 'pending' && <span className="system-xs-medium ml-1 text-text-warning">{t('members.pending', { ns: 'common' })}</span>}
+                  {account.status === 'pending' && <span className="ml-1 system-xs-medium text-text-warning">{t('members.pending', { ns: 'common' })}</span>}
                   {email === account.email && <span className="system-xs-regular text-text-tertiary">{t('members.you', { ns: 'common' })}</span>}
                 </div>
                 <div className="system-xs-regular text-text-tertiary">{account.email}</div>
               </div>
               {!value.some(item => item.user_id === account.id) && (
-                <div className="system-xs-medium hidden text-text-accent group-hover:block">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.add`, { ns: 'workflow' })}</div>
+                <div className="hidden system-xs-medium text-text-accent group-hover:block">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.add`, { ns: 'workflow' })}</div>
               )}
               {value.some(item => item.user_id === account.id) && (
                 <div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.added`, { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
index 27cf28c962..827e02c8bb 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Recipient } from '@/app/components/workflow/nodes/human-input/types'
 import type { Member } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiContactsBookLine,
 } from '@remixicon/react'
@@ -9,7 +10,6 @@ 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 { cn } from '@/utils/classnames'
 import MemberList from './member-list'
 
 const i18nPrefix = 'nodes.humanInput'
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
index 9045a4d2a6..7ff44542b3 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
@@ -4,6 +4,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowRightSFill, RiCloseLine } from '@remixicon/react'
 import { noop, unionBy } from 'es-toolkit/compat'
 import { memo, useCallback, useMemo, useState } from 'react'
@@ -24,7 +25,6 @@ import { InputVarType, VarType } from '@/app/components/workflow/types'
 import { useAppContext } from '@/context/app-context'
 import { useMembers } from '@/service/use-common'
 import { useTestEmailSender } from '@/service/use-workflow'
-import { cn } from '@/utils/classnames'
 import { isOutput } from '../../utils'
 import EmailInput from './recipient/email-input'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
index 6d78bec6ae..c7b46732d0 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiMailSendFill,
 } from '@remixicon/react'
@@ -8,7 +9,6 @@ import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { Button } from '@/app/components/base/ui/button'
 import { useModalContextSelector } from '@/context/modal-context'
-import { cn } from '@/utils/classnames'
 
 type UpgradeModalProps = {
   isShow: boolean
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content.tsx b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
index 8dedc38ce8..3a27904e7d 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content.tsx
@@ -3,13 +3,13 @@ import type { LexicalCommand } from 'lexical'
 import type { FC } from 'react'
 import type { FormInputItem } from '../types'
 import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_HITL_INPUT_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/hitl-input-block'
-import { cn } from '@/utils/classnames'
 import { useWorkflowVariableType } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { isMac } from '../../../utils'
@@ -31,7 +31,7 @@ type FormContentProps = {
 }
 
 const Key: FC<{ children: React.ReactNode, className?: string }> = ({ children, className }) => {
-  return <span className={cn('system-kbd mx-0.5 inline-flex size-4 items-center justify-center radius-xs bg-components-kbd-bg-gray text-text-placeholder ', className)}>{children}</span>
+  return <span className={cn('mx-0.5 inline-flex size-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder', className)}>{children}</span>
 }
 
 const CtrlKey: FC = () => {
@@ -107,7 +107,7 @@ const FormContent: FC<FormContentProps> = ({
   return (
     <div
       className={cn(
-        'flex grow flex-col radius-lg border border-components-input-bg-normal bg-components-input-bg-normal pt-1',
+        'flex grow flex-col rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal pt-1',
         isFocus && 'border-components-input-border-active bg-components-input-bg-active',
         !isFocus && 'pb-[32px]',
         readonly && 'pointer-events-none',
@@ -118,7 +118,7 @@ const FormContent: FC<FormContentProps> = ({
           key={editorKey}
           value={value}
           onChange={onChange}
-          className={cn('min-h-[80px] ', isExpand && 'h-full')}
+          className={cn('min-h-[80px]', isExpand && 'h-full')}
           onFocus={setFocus}
           onBlur={setBlur}
           placeholder={t('nodes.humanInput.formContent.placeholder', { ns: 'workflow' })}
@@ -156,7 +156,7 @@ const FormContent: FC<FormContentProps> = ({
         />
       </div>
       {isFocus && (
-        <div className="system-xs-regular flex h-8 shrink-0 items-center px-3 text-components-input-text-placeholder">
+        <div className="flex h-8 shrink-0 items-center px-3 system-xs-regular text-components-input-text-placeholder">
           <Trans
             i18nKey="nodes.humanInput.formContent.hotkeyTip"
             ns="workflow"
diff --git a/web/app/components/workflow/nodes/human-input/components/timeout.tsx b/web/app/components/workflow/nodes/human-input/components/timeout.tsx
index f212f9d0e3..682a56a002 100644
--- a/web/app/components/workflow/nodes/human-input/components/timeout.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/timeout.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'nodes.humanInput'
 
@@ -38,7 +38,7 @@ const TimeoutInput: FC<Props> = ({
         onChange={handleValueChange}
         disabled={readonly}
       />
-      <div className="flex items-center gap-0.5 radius-lg bg-components-segmented-control-bg-normal p-0.5">
+      <div className="flex items-center gap-0.5 rounded-[10px] bg-components-segmented-control-bg-normal p-0.5">
         <div
           className={cn(
             'rounded-lg px-2 py-1 text-text-tertiary',
@@ -48,7 +48,7 @@ const TimeoutInput: FC<Props> = ({
           )}
           onClick={() => !readonly && onChange({ timeout, unit: 'day' })}
         >
-          <div className="system-sm-medium p-0.5">{t(`${i18nPrefix}.timeout.days`, { ns: 'workflow' })}</div>
+          <div className="p-0.5 system-sm-medium">{t(`${i18nPrefix}.timeout.days`, { ns: 'workflow' })}</div>
         </div>
         <div
           className={cn(
@@ -59,7 +59,7 @@ const TimeoutInput: FC<Props> = ({
           )}
           onClick={() => !readonly && onChange({ timeout, unit: 'hour' })}
         >
-          <div className="system-sm-medium p-0.5">{t(`${i18nPrefix}.timeout.hours`, { ns: 'workflow' })}</div>
+          <div className="p-0.5 system-sm-medium">{t(`${i18nPrefix}.timeout.hours`, { ns: 'workflow' })}</div>
         </div>
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
index 0861a7cbb2..a09dc287b4 100644
--- a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
@@ -137,7 +137,7 @@ export const Note: React.FC<{ defaultInput: FormInputItemDefault, nodeName: (nod
   const path = `{{#${defaultInput.selector.join('.')}#}}`
   const newPath = path ? replaceNodeIdsWithNames(path, nodeName) : path
   return (
-    <div className="my-3 radius-lg bg-components-input-bg-normal px-2.5 py-2">
+    <div className="my-3 rounded-[10px] bg-components-input-bg-normal px-2.5 py-2">
       {isVariable ? <Variable path={newPath} /> : <span>{defaultInput.value}</span>}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/human-input/node.tsx b/web/app/components/workflow/nodes/human-input/node.tsx
index 33ac33e10d..9777811579 100644
--- a/web/app/components/workflow/nodes/human-input/node.tsx
+++ b/web/app/components/workflow/nodes/human-input/node.tsx
@@ -23,21 +23,21 @@ const Node: FC<NodeProps<HumanInputNodeType>> = (props) => {
     <>
       {deliveryMethods.length > 0 && (
         <div className="space-y-0.5 py-1">
-          <div className="system-2xs-medium-uppercase px-2.5 py-0.5 text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.title`, { ns: 'workflow' })}</div>
+          <div className="px-2.5 py-0.5 system-2xs-medium-uppercase text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.title`, { ns: 'workflow' })}</div>
           <div className="space-y-0.5 px-2.5">
             {deliveryMethods.map(method => (
-              <div key={method.type} className="flex items-center gap-1 radius-sm bg-workflow-block-parma-bg p-1">
+              <div key={method.type} className="flex items-center gap-1 rounded-md bg-workflow-block-parma-bg p-1">
                 {method.type === DeliveryMethodType.WebApp && (
-                  <div className="radius-xs border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5">
+                  <div className="rounded-sm border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5">
                     <RiRobot2Fill className="h-3.5 w-3.5 text-text-primary-on-surface" />
                   </div>
                 )}
                 {method.type === DeliveryMethodType.Email && (
-                  <div className="radius-xs border border-divider-regular bg-components-icon-bg-blue-solid p-0.5">
+                  <div className="rounded-sm border border-divider-regular bg-components-icon-bg-blue-solid p-0.5">
                     <RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
                   </div>
                 )}
-                <span className="system-xs-regular capitalize text-text-secondary">{method.type}</span>
+                <span className="system-xs-regular text-text-secondary capitalize">{method.type}</span>
               </div>
             ))}
           </div>
@@ -48,7 +48,7 @@ const Node: FC<NodeProps<HumanInputNodeType>> = (props) => {
           <>
             {userActions.map(userAction => (
               <div key={userAction.id} className="relative flex flex-row-reverse items-center px-4 py-1">
-                <span className="system-xs-semibold-uppercase truncate text-text-secondary">{userAction.id}</span>
+                <span className="truncate system-xs-semibold-uppercase text-text-secondary">{userAction.id}</span>
                 <NodeSourceHandle
                   {...props}
                   handleId={userAction.id}
@@ -59,7 +59,7 @@ const Node: FC<NodeProps<HumanInputNodeType>> = (props) => {
           </>
         )}
         <div className="relative flex flex-row-reverse items-center px-4 py-1">
-          <div className="system-xs-semibold-uppercase truncate text-text-secondary">Timeout</div>
+          <div className="truncate system-xs-semibold-uppercase text-text-secondary">Timeout</div>
           <NodeSourceHandle
             {...props}
             handleId="__timeout"
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 24e2d6c8dc..846b135fcf 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { HumanInputNodeType } from './types'
 import type { NodePanelProps, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiClipboardLine,
@@ -23,7 +24,6 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { useStore } from '@/app/components/workflow/store'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import DeliveryMethod from './components/delivery-method'
 import FormContent from './components/form-content'
 import FormContentPreview from './components/form-content-preview'
@@ -179,7 +179,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           )}
         </div>
         {!inputs.user_actions.length && (
-          <div className="flex items-center justify-center radius-lg bg-background-section p-3 system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.userActions.emptyTip`, { ns: 'workflow' })}</div>
+          <div className="flex items-center justify-center rounded-[10px] bg-background-section p-3 system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.userActions.emptyTip`, { ns: 'workflow' })}</div>
         )}
         {inputs.user_actions.length > 0 && (
           <div className="space-y-2">
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index e943efa848..133577613d 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -14,6 +14,7 @@ import type {
   ValueSelector,
   Var,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { produce } from 'immer'
 import {
@@ -28,15 +29,14 @@ import { useIsChatMode } from '@/app/components/workflow/hooks/use-workflow'
 import { getVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
 import { useWorkflowStore } from '@/app/components/workflow/store'
-import { VarType } from '@/app/components/workflow/types'
 
+import { VarType } from '@/app/components/workflow/types'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
   useAllMCPTools,
   useAllWorkflowTools,
 } from '@/service/use-tools'
-import { cn } from '@/utils/classnames'
 import useMatchSchemaType from '../../../_base/components/variable/use-match-schema-type'
 import { FILE_TYPE_OPTIONS, SUB_VARIABLES, TRANSFER_METHOD } from '../../../constants'
 import {
@@ -281,11 +281,11 @@ const ConditionItem = ({
                             <div className="flex cursor-pointer justify-start">
                               <div className="inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs">
                                 <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
-                                <div className="system-xs-medium ml-0.5 truncate">{item?.name}</div>
+                                <div className="ml-0.5 truncate system-xs-medium">{item?.name}</div>
                               </div>
                             </div>
                           )
-                        : <div className="system-sm-regular text-left text-components-input-text-placeholder">{t('placeholder.select', { ns: 'common' })}</div>
+                        : <div className="text-left system-sm-regular text-components-input-text-placeholder">{t('placeholder.select', { ns: 'common' })}</div>
                     )}
                     hideChecked
                   />
@@ -388,7 +388,7 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className="ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+        className="mt-1 ml-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index 43fc5c391a..998cc48205 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -1,5 +1,6 @@
 import type { ComparisonOperator } from '../../types'
 import type { VarType } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   useMemo,
@@ -12,7 +13,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
 const i18nPrefix = 'nodes.ifElse'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index bda775e21c..180c72b3e2 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -4,9 +4,9 @@ import type {
   NodeOutPutVar,
   Var,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiLoopLeftLine } from '@remixicon/react'
 import { useCallback, useMemo } from 'react'
-import { cn } from '@/utils/classnames'
 import {
 
   LogicalOperator,
@@ -82,15 +82,15 @@ const ConditionList = ({
       {
         conditions.length > 1 && (
           <div className={cn(
-            'absolute bottom-0 left-0 top-0 w-[60px]',
+            'absolute top-0 bottom-0 left-0 w-[60px]',
             isSubVariable && logical_operator === LogicalOperator.and && 'left-[-10px]',
             isSubVariable && logical_operator === LogicalOperator.or && 'left-[-18px]',
           )}
           >
-            <div className="absolute bottom-4 left-[46px] top-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
-            <div className="absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
+            <div className="absolute top-4 bottom-4 left-[46px] w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
+            <div className="absolute top-1/2 right-0 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
             <div
-              className="absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs"
+              className="absolute top-1/2 right-1 flex h-[21px] -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs select-none"
               onClick={doToggleConditionLogicalOperator}
             >
               {logical_operator.toUpperCase()}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index be4df1501d..7bcb4137b5 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -2,6 +2,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { capitalize } from 'es-toolkit/string'
@@ -21,7 +22,6 @@ import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
-import { cn } from '@/utils/classnames'
 import VariableTag from '../../_base/components/variable-tag'
 import { VarType as NumberVarType } from '../../tool/types'
 
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index e03e43ea70..1744ee6490 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, handleRemoveSubVariableCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
   RiDeleteBinLine,
@@ -14,7 +15,6 @@ import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { PortalSelect as Select } from '@/app/components/base/select'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import { SUB_VARIABLES } from '../../constants'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
@@ -97,7 +97,7 @@ const ConditionWrap: FC<Props> = ({
             <div key={item.case_id}>
               <div
                 className={cn(
-                  'group relative radius-lg bg-components-panel-bg',
+                  'group relative rounded-[10px] bg-components-panel-bg',
                   willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
                   !isSubVariable && 'min-h-[40px] px-3 py-1',
                   isSubVariable && 'px-1 py-2',
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index 33ae932e00..c33b1269eb 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -2,6 +2,7 @@ import type { IterationNodeType } from './types'
 import type {
   OnSelectBlock,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -14,7 +15,6 @@ import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import {
   useAvailableBlocks,
   useNodesInteractions,
@@ -49,7 +49,7 @@ const AddBlock = ({
   const renderTriggerElement = useCallback((open: boolean) => {
     return (
       <div className={cn(
-        'system-sm-medium relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover',
+        'relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 system-sm-medium text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover',
         `${nodesReadOnly && 'cursor-not-allowed! bg-components-button-secondary-bg-disabled'}`,
         open && 'bg-components-button-secondary-bg-hover',
       )}
@@ -61,9 +61,9 @@ const AddBlock = ({
   }, [nodesReadOnly, t])
 
   return (
-    <div className="absolute left-14 top-7 z-10 flex h-8 items-center">
+    <div className="absolute top-7 left-14 z-10 flex h-8 items-center">
       <div className="group/insert relative h-0.5 w-16 bg-gray-300">
-        <div className="absolute right-0 top-1/2 h-2 w-0.5 -translate-y-1/2 bg-primary-500"></div>
+        <div className="absolute top-1/2 right-0 h-2 w-0.5 -translate-y-1/2 bg-primary-500"></div>
       </div>
       <BlockSelector
         disabled={nodesReadOnly}
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 91a08d2984..9524ee62fe 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { IterationNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useEffect,
@@ -13,7 +14,6 @@ import {
   useViewport,
 } from 'reactflow'
 import { toast } from '@/app/components/base/ui/toast'
-import { cn } from '@/utils/classnames'
 import { IterationStartNodeDumb } from '../iteration-start'
 import AddBlock from './add-block'
 import { useNodeIterationInteractions } from './use-interactions'
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
index b0bd05dae4..a28c651894 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
@@ -1,11 +1,11 @@
 import type { Option } from './type'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import {
   GeneralChunk,
   ParentChildChunk,
   QuestionAndAnswer,
 } from '@/app/components/base/icons/src/vender/knowledge'
-import { cn } from '@/utils/classnames'
 import { ChunkStructureEnum } from '../../types'
 
 export const useChunkStructure = () => {
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
index 692fb70e94..df82994bd0 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
@@ -1,8 +1,8 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AddChunks } from '@/app/components/base/icons/src/vender/knowledge'
 import { useDocLink } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import Line from './line'
 
 type InstructionProps = {
@@ -16,13 +16,13 @@ const Instruction = ({
   const docLink = useDocLink()
 
   return (
-    <div className={cn('flex flex-col gap-y-2 overflow-hidden radius-lg bg-workflow-process-bg p-4', className)}>
-      <div className="relative flex size-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]">
+    <div className={cn('flex flex-col gap-y-2 overflow-hidden rounded-[10px] bg-workflow-process-bg p-4', className)}>
+      <div className="relative flex size-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]">
         <AddChunks className="size-5 text-text-accent" />
-        <Line className="absolute -left-px bottom-[-76px]" type="vertical" />
+        <Line className="absolute bottom-[-76px] -left-px" type="vertical" />
         <Line className="absolute -right-px bottom-[-76px]" type="vertical" />
         <Line className="absolute -top-px right-[-184px]" type="horizontal" />
-        <Line className="absolute -bottom-px right-[-184px]" type="horizontal" />
+        <Line className="absolute right-[-184px] -bottom-px" type="horizontal" />
       </div>
       <div className="flex flex-col gap-y-1">
         <div className="system-sm-medium text-text-secondary">
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
index a223c5ab24..12cc0f1eb5 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiQuestionLine } from '@remixicon/react'
 import {
   memo,
@@ -12,7 +13,6 @@ import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
 import { Slider } from '@/app/components/base/ui/slider'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
-import { cn } from '@/utils/classnames'
 import {
   ChunkStructureEnum,
   IndexMethodEnum,
@@ -94,7 +94,7 @@ const IndexMethod = ({
             >
               <div className="flex items-center">
                 <div className="flex grow items-center">
-                  <div className="truncate text-text-secondary system-xs-medium">
+                  <div className="truncate system-xs-medium text-text-secondary">
                     {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
                   </div>
                   <Tooltip
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
index bf72af2fd0..56ce356295 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useMemo,
@@ -13,7 +14,6 @@ import {
   OptionCardEffectTeal,
 } from '@/app/components/base/icons/src/public/knowledge'
 import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
-import { cn } from '@/utils/classnames'
 
 const HEADER_EFFECT_MAP: Record<string, ReactNode> = {
   'blue': <OptionCardEffectBlue />,
@@ -65,7 +65,7 @@ const OptionCard = memo(({
     if (effectColor) {
       return (
         <div className={cn(
-          'absolute left-[-2px] top-[-2px] hidden h-14 w-14 rounded-full',
+          'absolute top-[-2px] left-[-2px] hidden h-14 w-14 rounded-full',
           'group-hover:block',
           isActive && 'block',
         )}
@@ -108,7 +108,7 @@ const OptionCard = memo(({
         }
         <div className="grow py-1 pt-px">
           <div className="flex items-center">
-            <div className="system-sm-medium flex grow items-center text-text-secondary">
+            <div className="flex grow items-center system-sm-medium text-text-secondary">
               {title}
               {
                 isRecommended && (
@@ -131,7 +131,7 @@ const OptionCard = memo(({
           </div>
           {
             description && (
-              <div className="system-xs-regular mt-1 text-text-tertiary">
+              <div className="mt-1 system-xs-regular text-text-tertiary">
                 {description}
               </div>
             )
@@ -141,7 +141,7 @@ const OptionCard = memo(({
       {
         !!(children && isActive) && (
           <div className="relative rounded-b-xl bg-components-panel-bg p-3">
-            <ArrowShape className="absolute left-[14px] top-[-11px] h-4 w-4 text-components-panel-bg" />
+            <ArrowShape className="absolute top-[-11px] left-[14px] h-4 w-4 text-components-panel-bg" />
             {children}
           </div>
         )
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
index c7addde4c5..52b8debd45 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
@@ -7,6 +7,7 @@ import type {
   HybridSearchModeOption,
   Option,
 } from './type'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
@@ -18,7 +19,6 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/aler
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { DEFAULT_WEIGHTED_SCORE } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import {
   HybridSearchModeEnum,
   RetrievalSearchMethodEnum,
@@ -166,7 +166,7 @@ const SearchMethodOption = ({
             <div>
               {
                 showRerankModelSelectorSwitch && (
-                  <div className="mb-1 flex items-center text-text-secondary system-sm-semibold">
+                  <div className="mb-1 flex items-center system-sm-semibold text-text-secondary">
                     <Switch
                       className="mr-1"
                       value={rerankingModelEnabled ?? false}
@@ -188,11 +188,11 @@ const SearchMethodOption = ({
               />
               {showMultiModalTip && (
                 <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-                  <div className="absolute bottom-0 left-0 right-0 top-0 bg-dataset-warning-message-bg opacity-40" />
+                  <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40" />
                   <div className="p-1">
                     <AlertTriangle className="size-4 text-text-warning-secondary" />
                   </div>
-                  <span className="text-text-primary system-xs-medium">
+                  <span className="system-xs-medium text-text-primary">
                     {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
                   </span>
                 </div>
diff --git a/web/app/components/workflow/nodes/knowledge-base/node.tsx b/web/app/components/workflow/nodes/knowledge-base/node.tsx
index 25ee30be84..3f8f3554af 100644
--- a/web/app/components/workflow/nodes/knowledge-base/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/node.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { KnowledgeBaseNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useQuery } from '@tanstack/react-query'
 import {
   memo,
@@ -16,7 +17,6 @@ import {
   useModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { consoleQuery } from '@/service/client'
-import { cn } from '@/utils/classnames'
 import { useEmbeddingModelStatus } from './hooks/use-embedding-model-status'
 import { useSettingsDisplay } from './hooks/use-settings-display'
 import {
@@ -48,7 +48,7 @@ const SettingRow = memo(({
           : 'bg-workflow-block-parma-bg',
       )}
     >
-      <div className="mr-2 shrink-0 text-text-tertiary system-xs-medium-uppercase">
+      <div className="mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary">
         {label}
       </div>
       <div
@@ -172,8 +172,8 @@ const Node: FC<NodeProps<KnowledgeBaseNodeType>> = ({ data }) => {
     return (
       <div className="mb-1 space-y-0.5 px-3 py-1">
         <div className="flex h-6 items-center rounded-md border-[0.5px] border-state-warning-active bg-state-warning-hover px-1.5">
-          <span className="mr-1 size-[4px] shrink-0 radius-2xs bg-text-warning-secondary" />
-          <div className="grow truncate text-text-warning system-xs-medium" title={validationIssueMessage}>
+          <span className="mr-1 size-[4px] shrink-0 rounded-xs bg-text-warning-secondary" />
+          <div className="grow truncate system-xs-medium text-text-warning" title={validationIssueMessage}>
             {validationIssueMessage}
           </div>
         </div>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
index b34093b7b0..fe4c086cb4 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
@@ -1,4 +1,5 @@
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCalendarLine,
   RiCloseCircleFill,
@@ -8,7 +9,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import { useAppContext } from '@/context/app-context'
-import { cn } from '@/utils/classnames'
 
 type ConditionDateProps = {
   value?: number
@@ -35,7 +35,7 @@ const ConditionDate = ({
       <div className="group flex items-center" onClick={handleClickTrigger}>
         <div
           className={cn(
-            'system-sm-regular mr-0.5 flex h-6 grow cursor-pointer items-center px-1',
+            'mr-0.5 flex h-6 grow cursor-pointer items-center px-1 system-sm-regular',
             value ? 'text-text-secondary' : 'text-text-tertiary',
           )}
         >
@@ -49,7 +49,7 @@ const ConditionDate = ({
           !!value && (
             <RiCloseCircleFill
               className={cn(
-                'hidden h-4 w-4 shrink-0 cursor-pointer hover:text-components-input-text-filled group-hover:block',
+                'hidden h-4 w-4 shrink-0 cursor-pointer group-hover:block hover:text-components-input-text-filled',
                 value && 'text-text-quaternary',
               )}
               onClick={(e) => {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
index 214b05cc47..46f03d0c77 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
@@ -5,6 +5,7 @@ import type {
   MetadataFilteringCondition,
   MetadataShape,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -14,7 +15,6 @@ import {
   useState,
 } from 'react'
 import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import { cn } from '@/utils/classnames'
 import MetadataIcon from '../metadata-icon'
 import ConditionDate from './condition-date'
 import ConditionNumber from './condition-number'
@@ -133,11 +133,11 @@ const ConditionItem = ({
       >
         <div className="flex items-center p-1">
           <div className="w-0 grow">
-            <div className="flex h-6 min-w-0 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pl-1 pr-1.5 shadow-xs">
+            <div className="flex h-6 min-w-0 items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark pr-1.5 pl-1 shadow-xs">
               <div className="mr-0.5 p-px">
                 <MetadataIcon type={currentMetadata?.type} className="h-3 w-3" />
               </div>
-              <div className="system-xs-medium mr-0.5 min-w-0 flex-1 truncate text-text-secondary">{currentMetadata?.name}</div>
+              <div className="mr-0.5 min-w-0 flex-1 truncate system-xs-medium text-text-secondary">{currentMetadata?.name}</div>
               <div className="system-xs-regular text-text-tertiary">{currentMetadata?.type}</div>
             </div>
           </div>
@@ -191,7 +191,7 @@ const ConditionItem = ({
         </div>
       </div>
       <div
-        className="ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+        className="mt-1 ml-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index 550142db96..d6828a5392 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -2,6 +2,7 @@ import type {
   ComparisonOperator,
   MetadataFilteringVariableType,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   useMemo,
@@ -14,7 +15,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import {
   getOperators,
   isComparisonOperatorNeedTranslate,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index b24a41589a..b69bd05cdd 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { capitalize } from 'es-toolkit/string'
 import { useState } from 'react'
@@ -7,7 +8,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 
 export type ConditionValueMethodProps = {
   valueMethod?: string
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
index 163d1084d2..e554ba6c8c 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
@@ -1,7 +1,7 @@
 import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiLoopLeftLine } from '@remixicon/react'
 import { LogicalOperator } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import { cn } from '@/utils/classnames'
 import ConditionItem from './condition-item'
 
 type ConditionListProps = {
@@ -33,13 +33,13 @@ const ConditionList = ({
       {
         conditions.length > 1 && (
           <div className={cn(
-            'absolute bottom-0 left-0 top-0 w-[44px]',
+            'absolute top-0 bottom-0 left-0 w-[44px]',
           )}
           >
-            <div className="absolute bottom-4 right-1 top-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
-            <div className="absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
+            <div className="absolute top-4 right-1 bottom-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
+            <div className="absolute top-1/2 right-0 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
             <div
-              className="absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs"
+              className="absolute top-1/2 right-1 flex h-[21px] -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs select-none"
               onClick={() => handleToggleConditionLogicalOperator()}
             >
               {logical_operator.toUpperCase()}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
index 803a836142..4bf403d0d3 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiHashtag,
   RiTextSnippet,
@@ -5,7 +6,6 @@ import {
 } from '@remixicon/react'
 import { memo } from 'react'
 import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import { cn } from '@/utils/classnames'
 
 type MetadataIconProps = {
   type?: MetadataFilteringVariableType
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index ec5399974b..3f8198a822 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -5,6 +5,7 @@ import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
@@ -18,7 +19,6 @@ import {
 import { Button } from '@/app/components/base/ui/button'
 import { DATASET_DEFAULT } from '@/config'
 import { RETRIEVE_TYPE } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   payload: {
diff --git a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
index 3c07bf7934..a5b91ec199 100644
--- a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { Var } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
-import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 
 type Props = {
@@ -33,7 +33,7 @@ const ExtractInput: FC<Props> = ({
   })
 
   return (
-    <div className="flex items-start  space-x-1">
+    <div className="flex items-start space-x-1">
       <Input
         instanceId="http-extract-number"
         className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index b1f74a15e0..71d6bf2a08 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Condition } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,7 +10,6 @@ import Input from '@/app/components/workflow/nodes/_base/components/input-suppor
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from '@/app/components/workflow/nodes/constants'
 import { getConditionValueAsString } from '@/app/components/workflow/nodes/utils'
-import { cn } from '@/utils/classnames'
 import BoolValue from '../../../panel/chat-variable-panel/components/bool-value'
 import { VarType } from '../../../types'
 import ConditionOperator from '../../if-else/components/condition-list/condition-operator'
diff --git a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
index 964366b325..210f9dd911 100644
--- a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { Limit } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-import { cn } from '@/utils/classnames'
 import InputNumberWithSlider from '../../_base/components/input-number-with-slider'
 
 const i18nPrefix = 'nodes.listFilter'
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index c9a98abed4..22c6eea5a2 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { Item } from '@/app/components/base/select'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { SimpleSelect as Select } from '@/app/components/base/select'
-import { cn } from '@/utils/classnames'
 import { SUB_VARIABLES } from '../../constants'
 
 type Props = {
@@ -59,12 +59,12 @@ const SubVariablePicker: FC<Props> = ({
                   <div className="flex cursor-pointer justify-start">
                     <div className="inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs">
                       <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
-                      <div className="system-xs-medium ml-0.5 truncate">{item?.name}</div>
+                      <div className="ml-0.5 truncate system-xs-medium">{item?.name}</div>
                     </div>
                   </div>
                 )
               : (
-                  <div className="system-sm-regular flex pl-1 text-components-input-text-placeholder  group-hover/sub-variable-picker:text-text-tertiary">
+                  <div className="flex pl-1 system-sm-regular text-components-input-text-placeholder group-hover/sub-variable-picker:text-text-tertiary">
                     <Variable02 className="mr-1 h-4 w-4 shrink-0" />
                     <span>{t('placeholder.select', { ns: 'common' })}</span>
                   </div>
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 5b28c9b48f..c7fc141113 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { ModelConfig, PromptItem, ValueSelector, Var, Variable } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -10,7 +11,6 @@ import { v4 as uuid4 } from 'uuid'
 import { DragHandle } from '@/app/components/base/icons/src/vender/line/others'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
-import { cn } from '@/utils/classnames'
 import { useWorkflowStore } from '../../../store'
 import { EditionType, PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
@@ -182,7 +182,7 @@ const ConfigPrompt: FC<Props> = ({
                       })()
                       return (
                         <div key={item.id || index} className="group relative">
-                          {canDrag && <DragHandle className="absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-text-quaternary group-hover:block" />}
+                          {canDrag && <DragHandle className="absolute top-2 left-[-14px] hidden h-3.5 w-3.5 text-text-quaternary group-hover:block" />}
                           <ConfigPromptItem
                             instanceId={item.role === PromptRole.system ? `${nodeId}-chat-workflow-llm-prompt-editor` : `${nodeId}-chat-workflow-llm-prompt-editor-${index}`}
                             className={cn(canDrag && 'handle')}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
index 710225e6e4..35521dbe5c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Editor } from '@monaco-editor/react'
 import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
@@ -8,7 +9,6 @@ import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type CodeEditorProps = {
   value: string
@@ -116,8 +116,8 @@ const CodeEditor: FC<CodeEditorProps> = ({
   return (
     <div className={cn('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
       {!hideTopMenu && (
-        <div className="flex items-center justify-between pl-2 pr-1 pt-1">
-          <div className="system-xs-semibold-uppercase py-0.5 text-text-secondary">
+        <div className="flex items-center justify-between pt-1 pr-1 pl-2">
+          <div className="py-0.5 system-xs-semibold-uppercase text-text-secondary">
             <span className="px-1 py-0.5">JSON</span>
           </div>
           <div className="flex items-center gap-x-0.5">
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
index b5fcb3ad48..7a4e1c1169 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ErrorMessageProps = {
   message: string
@@ -14,7 +14,7 @@ const ErrorMessage: FC<ErrorMessageProps> = ({
   return (
     <div className={cn('mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2', className)}>
       <RiErrorWarningFill className="h-4 w-4 shrink-0 text-text-destructive" />
-      <div className="system-xs-medium max-h-12 grow overflow-y-auto whitespace-pre-line wrap-break-word text-text-primary">
+      <div className="max-h-12 grow overflow-y-auto system-xs-medium wrap-break-word whitespace-pre-line text-text-primary">
         {message}
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 840e293cd7..8864b52735 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -6,7 +7,6 @@ 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 { JSON_SCHEMA_MAX_DEPTH } from '@/config'
-import { cn } from '@/utils/classnames'
 import { checkJsonDepth } from '../../utils'
 import CodeEditor from './code-editor'
 import ErrorMessage from './error-message'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index b84e87269f..e09f6a59fc 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { SchemaRoot } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
-import { cn } from '@/utils/classnames'
 import { SegmentedControl } from '../../../../../base/segmented-control'
 import { Type } from '../../types'
 import {
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index 122da26cb7..7b908bafd6 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { CompletionParams, Model } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import {
@@ -15,7 +16,6 @@ import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/com
 import useTheme from '@/hooks/use-theme'
 import { useGenerateStructuredOutputRules } from '@/service/use-common'
 import { ModelModeType, Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useMittContext } from '../visual-editor/context'
 import { useVisualEditorStore } from '../visual-editor/store'
 import { SchemaGeneratorDark, SchemaGeneratorLight } from './assets'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
index fc95b4a998..88585570eb 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import LargeDataAlert from '@/app/components/workflow/variable-inspect/large-data-alert'
-import { cn } from '@/utils/classnames'
 import CodeEditor from './code-editor'
 
 type SchemaEditorProps = {
@@ -35,7 +35,7 @@ const SchemaEditor: FC<SchemaEditorProps> = ({
       hideTopMenu={hideTopMenu}
       onFocus={onFocus}
       onBlur={onBlur}
-      topContent={isTruncated && <LargeDataAlert className="mx-1 mb-3 mt-[-4px]" />}
+      topContent={isTruncated && <LargeDataAlert className="mx-1 mt-[-4px] mb-3" />}
     />
   )
 }
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
index 9428f9dbb2..dd28c29f13 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
-import { cn } from '@/utils/classnames'
 
 type AutoWidthInputProps = {
   value: string
@@ -48,7 +48,7 @@ const AutoWidthInput: FC<AutoWidthInputProps> = ({
       {/* Hidden measurement span */}
       <span
         ref={textRef}
-        className="system-sm-semibold invisible absolute left-0 top-0 -z-10 whitespace-pre px-1"
+        className="invisible absolute top-0 left-0 -z-10 px-1 system-sm-semibold whitespace-pre"
         aria-hidden="true"
       >
         {value || placeholder}
@@ -58,7 +58,7 @@ const AutoWidthInput: FC<AutoWidthInputProps> = ({
       <input
         value={value}
         className={cn(
-          'system-sm-semibold placeholder:system-sm-semibold h-5 rounded-[5px] border border-transparent px-1',
+          'h-5 rounded-[5px] border border-transparent px-1 system-sm-semibold placeholder:system-sm-semibold',
           'py-px text-text-primary caret-[#295EFF] shadow-shadow-shadow-3 outline-hidden',
           'placeholder:text-text-placeholder hover:bg-state-base-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
           className,
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
index bb3700192d..5650c65641 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -2,13 +2,13 @@ import type { FC } from 'react'
 import type { SchemaEnumType } from '../../../../types'
 import type { AdvancedOptionsType } from './advanced-options'
 import type { TypeItem } from './type-selector'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useUnmount } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
-import { cn } from '@/utils/classnames'
 import { ArrayType, Type } from '../../../../types'
 import { useMittContext } from '../context'
 import { useVisualEditorStore } from '../store'
@@ -218,7 +218,7 @@ const EditCard: FC<EditCardProps> = ({
 
   return (
     <div className="flex flex-col rounded-lg bg-components-panel-bg py-0.5 shadow-sm shadow-shadow-shadow-4">
-      <div className="flex h-6 items-center pl-1 pr-0.5">
+      <div className="flex h-6 items-center pr-0.5 pl-1">
         <div className="flex grow items-center gap-x-1">
           <AutoWidthInput
             value={currentFields.name}
@@ -236,7 +236,7 @@ const EditCard: FC<EditCardProps> = ({
           />
           {
             currentFields.required && (
-              <div className="system-2xs-medium-uppercase px-1 py-0.5 text-text-warning">
+              <div className="px-1 py-0.5 system-2xs-medium-uppercase text-text-warning">
                 {t('nodes.llm.jsonSchema.required', { ns: 'workflow' })}
               </div>
             )
@@ -269,7 +269,7 @@ const EditCard: FC<EditCardProps> = ({
         <div className={cn('flex', isAdvancedEditing ? 'p-2 pt-1' : 'px-2 pb-1')}>
           <input
             value={currentFields.description}
-            className="system-xs-regular placeholder:system-xs-regular h-4 w-full p-0 text-text-tertiary caret-[#295EFF] outline-hidden placeholder:text-text-placeholder"
+            className="h-4 w-full p-0 system-xs-regular text-text-tertiary caret-[#295EFF] outline-hidden placeholder:system-xs-regular placeholder:text-text-placeholder"
             placeholder={t('nodes.llm.jsonSchema.descriptionPlaceholder', { ns: 'workflow' })}
             onChange={handleDescriptionChange}
             onBlur={handleDescriptionBlur}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 375cdca09c..213b6895d3 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { ArrayType, Type } from '../../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import { useState } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 export type TypeItem = {
   value: Type | ArrayType
@@ -57,7 +57,7 @@ const TypeSelector: FC<TypeSelectorProps> = ({
                   setOpen(false)
                 }}
               >
-                <span className="system-sm-medium px-1 text-text-secondary">{item.text}</span>
+                <span className="px-1 system-sm-medium text-text-secondary">{item.text}</span>
                 {isSelected && <RiCheckLine className="h-4 w-4 text-text-accent" />}
               </div>
             )
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
index fc4d0ec106..f7897796d5 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useSchemaNodeOperations } from './hooks'
 import SchemaNode from './schema-node'
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 0fdf5b4349..73744db4c9 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { Field } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDropDownLine, RiArrowDropRightLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import Divider from '@/app/components/base/divider'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
-import { cn } from '@/utils/classnames'
 import { Type } from '../../../types'
 import { getFieldType, getHasChildren } from '../../../utils'
 import AddField from './add-field'
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index da272b4b14..05f84da78d 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { ModelConfig } from '@/app/components/workflow/types'
 import type { GenRes } from '@/service/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -9,7 +10,6 @@ import GetAutomaticResModal from '@/app/components/app/configuration/config/auto
 import { ActionButton } from '@/app/components/base/action-button'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index d60af7bf55..884c638110 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { SchemaRoot, StructuredOutput } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -8,7 +9,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
-import { cn } from '@/utils/classnames'
 import { Type } from '../types'
 import JsonSchemaConfigModal from './json-schema-config-modal'
 
@@ -58,7 +58,7 @@ const StructureOutput: FC<Props> = ({
             />
           )
         : (
-            <div className="mt-1.5 flex h-10 cursor-pointer items-center justify-center radius-lg bg-background-section system-xs-regular text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
+            <div className="mt-1.5 flex h-10 cursor-pointer items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
           )}
 
       {showConfig && (
diff --git a/web/app/components/workflow/nodes/loop/add-block.tsx b/web/app/components/workflow/nodes/loop/add-block.tsx
index eed2399304..bed2bf20ae 100644
--- a/web/app/components/workflow/nodes/loop/add-block.tsx
+++ b/web/app/components/workflow/nodes/loop/add-block.tsx
@@ -2,6 +2,7 @@ import type { LoopNodeType } from './types'
 import type {
   OnSelectBlock,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -11,11 +12,10 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import BlockSelector from '@/app/components/workflow/block-selector'
+
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-
-import { cn } from '@/utils/classnames'
 import {
   useAvailableBlocks,
   useNodesInteractions,
@@ -50,7 +50,7 @@ const AddBlock = ({
   const renderTriggerElement = useCallback((open: boolean) => {
     return (
       <div className={cn(
-        'system-sm-medium relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover',
+        'relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 system-sm-medium text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover',
         `${nodesReadOnly && 'cursor-not-allowed! bg-components-button-secondary-bg-disabled'}`,
         open && 'bg-components-button-secondary-bg-hover',
       )}
@@ -62,9 +62,9 @@ const AddBlock = ({
   }, [nodesReadOnly, t])
 
   return (
-    <div className="absolute left-14 top-7 z-10 flex h-8 items-center">
+    <div className="absolute top-7 left-14 z-10 flex h-8 items-center">
       <div className="group/insert relative h-0.5 w-16 bg-gray-300">
-        <div className="absolute right-0 top-1/2 h-2 w-0.5 -translate-y-1/2 bg-primary-500"></div>
+        <div className="absolute top-1/2 right-0 h-2 w-0.5 -translate-y-1/2 bg-primary-500"></div>
       </div>
       <BlockSelector
         disabled={nodesReadOnly}
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
index 0b6698d830..a9f3b75fb9 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
@@ -14,6 +14,7 @@ import type {
   ValueSelector,
   Var,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { produce } from 'immer'
 import {
@@ -26,7 +27,6 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import {
   ComparisonOperator,
 } from '../../types'
@@ -228,11 +228,11 @@ const ConditionItem = ({
                             <div className="flex cursor-pointer justify-start">
                               <div className="inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs">
                                 <Variable02 className="h-3.5 w-3.5 shrink-0 text-text-accent" />
-                                <div className="system-xs-medium ml-0.5 truncate">{item?.name}</div>
+                                <div className="ml-0.5 truncate system-xs-medium">{item?.name}</div>
                               </div>
                             </div>
                           )
-                        : <div className="system-sm-regular text-left text-components-input-text-placeholder">{t('placeholder.select', { ns: 'common' })}</div>
+                        : <div className="text-left system-sm-regular text-components-input-text-placeholder">{t('placeholder.select', { ns: 'common' })}</div>
                     )}
                     hideChecked
                   />
@@ -332,7 +332,7 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className="ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+        className="mt-1 ml-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index 8ec128a2e6..9380282b54 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -1,5 +1,6 @@
 import type { ComparisonOperator } from '../../types'
 import type { VarType } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   useMemo,
@@ -12,7 +13,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
 const i18nPrefix = 'nodes.ifElse'
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
index 8fca606f58..db1e57f4e7 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
@@ -3,9 +3,9 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiLoopLeftLine } from '@remixicon/react'
 import { useCallback, useMemo } from 'react'
-import { cn } from '@/utils/classnames'
 import {
 
   LogicalOperator,
@@ -75,15 +75,15 @@ const ConditionList = ({
       {
         conditions.length > 1 && (
           <div className={cn(
-            'absolute bottom-0 left-0 top-0 w-[60px]',
+            'absolute top-0 bottom-0 left-0 w-[60px]',
             isSubVariable && logicalOperator === LogicalOperator.and && 'left-[-10px]',
             isSubVariable && logicalOperator === LogicalOperator.or && 'left-[-18px]',
           )}
           >
-            <div className="absolute bottom-4 left-[46px] top-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
-            <div className="absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
+            <div className="absolute top-4 bottom-4 left-[46px] w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep"></div>
+            <div className="absolute top-1/2 right-0 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg"></div>
             <div
-              className="absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs"
+              className="absolute top-1/2 right-1 flex h-[21px] -translate-y-1/2 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs select-none"
               onClick={() => doToggleConditionLogicalOperator(conditionId)}
             >
               {!!logicalOperator && logicalOperator.toUpperCase()}
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index be4df1501d..7bcb4137b5 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -2,6 +2,7 @@ import type {
   NodeOutPutVar,
   ValueSelector,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { capitalize } from 'es-toolkit/string'
@@ -21,7 +22,6 @@ import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
-import { cn } from '@/utils/classnames'
 import VariableTag from '../../_base/components/variable-tag'
 import { VarType as NumberVarType } from '../../tool/types'
 
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index aa52956470..50e3fd248e 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import type { Condition, HandleAddCondition, HandleAddSubVariableCondition, HandleRemoveCondition, handleRemoveSubVariableCondition, HandleToggleConditionLogicalOperator, HandleToggleSubVariableConditionLogicalOperator, HandleUpdateCondition, HandleUpdateSubVariableCondition, LogicalOperator } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -10,7 +11,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalSelect as Select } from '@/app/components/base/select'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import { SUB_VARIABLES } from './../default'
@@ -75,7 +75,7 @@ const ConditionWrap: FC<Props> = ({
       <div>
         <div
           className={cn(
-            'group relative radius-lg bg-components-panel-bg',
+            'group relative rounded-[10px] bg-components-panel-bg',
             !isSubVariable && 'min-h-[40px] px-3 py-1',
             isSubVariable && 'px-1 py-2',
           )}
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/empty.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/empty.tsx
index 7d5d81b2fb..35ed0e5da7 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/empty.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/empty.tsx
@@ -4,7 +4,7 @@ const Empty = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="system-xs-regular flex h-10 items-center justify-center radius-lg bg-background-section text-text-tertiary">
+    <div className="flex h-10 items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary">
       {t('nodes.loop.setLoopVariables', { ns: 'workflow' })}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
index 8a535ff0c7..548f873164 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
@@ -117,7 +117,7 @@ const FormItem = ({
         value_type === ValueType.constant
         && (var_type === VarType.object || var_type === VarType.arrayString || var_type === VarType.arrayNumber || var_type === VarType.arrayObject)
         && (
-          <div className="w-full radius-lg bg-components-input-bg-normal py-2 pl-3 pr-1" style={{ height: editorMinHeight }}>
+          <div className="w-full rounded-[10px] bg-components-input-bg-normal py-2 pr-1 pl-3" style={{ height: editorMinHeight }}>
             <CodeEditor
               value={value}
               isExpand
diff --git a/web/app/components/workflow/nodes/loop/insert-block.tsx b/web/app/components/workflow/nodes/loop/insert-block.tsx
index 274163c5fd..a993f54b41 100644
--- a/web/app/components/workflow/nodes/loop/insert-block.tsx
+++ b/web/app/components/workflow/nodes/loop/insert-block.tsx
@@ -2,12 +2,12 @@ import type {
   BlockEnum,
   OnSelectBlock,
 } from '../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
   useState,
 } from 'react'
-import { cn } from '@/utils/classnames'
 import BlockSelector from '../../block-selector'
 import { useNodesInteractions } from '../../hooks'
 
@@ -42,7 +42,7 @@ const InsertBlock = ({
     <div
       className={cn(
         'nopan nodrag',
-        'absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 group-hover/insert:block',
+        'absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 group-hover/insert:block',
         open && 'block!',
       )}
     >
diff --git a/web/app/components/workflow/nodes/loop/node.tsx b/web/app/components/workflow/nodes/loop/node.tsx
index 83e4d93175..ee63696f51 100644
--- a/web/app/components/workflow/nodes/loop/node.tsx
+++ b/web/app/components/workflow/nodes/loop/node.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { LoopNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useEffect,
@@ -10,7 +11,6 @@ import {
   useNodesInitialized,
   useViewport,
 } from 'reactflow'
-import { cn } from '@/utils/classnames'
 import { LoopStartNodeDumb } from '../loop-start'
 import AddBlock from './add-block'
 
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index e1c9fe945a..3770d442fc 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -7,6 +7,7 @@ import type {
   ToolDefaultValue,
 } from '@/app/components/workflow/block-selector/types'
 import type { BlockEnum } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
@@ -20,7 +21,6 @@ import {
   useAllWorkflowTools,
 } from '@/service/use-tools'
 import { canFindTool } from '@/utils'
-import { cn } from '@/utils/classnames'
 import BlockSelector from '../../../../block-selector'
 
 const i18nPrefix = 'nodes.parameterExtractor'
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index 2c477eb46f..55dbb43cc8 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDraggable } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -10,7 +11,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import { cn } from '@/utils/classnames'
 import { useEdgesInteractions } from '../../../hooks'
 import AddButton from '../../_base/components/add-button'
 import Item from './class-item'
@@ -89,7 +89,7 @@ const ClassList: FC<Props> = ({
   return (
     <>
       <div className="mb-2 flex items-center justify-between" onClick={handleCollapse}>
-        <div className="flex cursor-pointer items-center text-xs font-semibold uppercase text-text-secondary">
+        <div className="flex cursor-pointer items-center text-xs font-semibold text-text-secondary uppercase">
           {t(`${i18nPrefix}.class`, { ns: 'workflow' })}
           {' '}
           <span className="text-text-destructive">*</span>
@@ -130,7 +130,7 @@ const ClassList: FC<Props> = ({
                   <div
                     key={item.id}
                     className={cn(
-                      'group relative radius-lg bg-components-panel-bg',
+                      'group relative rounded-[10px] bg-components-panel-bg',
                       `-ml-${HANDLE_SIDE_WIDTH} min-h-[40px] px-0 py-0`,
                     )}
                     style={{
@@ -141,7 +141,7 @@ const ClassList: FC<Props> = ({
                     <div>
                       {canDrag && (
                         <RiDraggable className={cn(
-                          'handle absolute left-2 top-3 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+                          'handle absolute top-3 left-2 hidden h-3 w-3 cursor-pointer text-text-tertiary',
                           'group-hover:block',
                         )}
                         />
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index 64fd1804b0..8cb7f8acf6 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -13,7 +14,6 @@ import ConfigVarModal from '@/app/components/app/configuration/config-var/config
 import Badge from '@/app/components/base/badge'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
-import { cn } from '@/utils/classnames'
 import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index a6158864ac..ac29aae3e8 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDraggable } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -9,7 +10,6 @@ import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { hasDuplicateStr } from '@/utils/var'
 import VarItem from './var-item'
 
@@ -79,7 +79,7 @@ const VarList: FC<Props> = ({
 
   if (list.length === 0) {
     return (
-      <div className="flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary">
+      <div className="flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs leading-[18px] font-normal text-text-tertiary">
         {t('nodes.start.noVarTip', { ns: 'workflow' })}
       </div>
     )
@@ -109,7 +109,7 @@ const VarList: FC<Props> = ({
           />
           {canDrag && (
             <RiDraggable className={cn(
-              'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+              'handle absolute top-2.5 left-3 hidden h-3 w-3 cursor-pointer text-text-tertiary',
               'group-hover:block',
             )}
             />
diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index 33bac7866c..f24b0cfef3 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -4,6 +4,7 @@ import type { ToolVarInputs } from '../types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -17,7 +18,6 @@ import Input from '@/app/components/workflow/nodes/_base/components/input-suppor
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { VarType as VarKindType } from '../types'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
index ceef2c3489..758cc033e2 100644
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
@@ -2,6 +2,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
 } from 'react'
@@ -9,7 +10,6 @@ import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import Placeholder from './placeholder'
 
 type MixedVariableTextInputProps = {
diff --git a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
index 9a4d5279fd..1287fd7a21 100644
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { $insertNodes, FOCUS_COMMAND } from 'lexical'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
-import { cn } from '@/utils/classnames'
 
 type PlaceholderProps = {
   disableVariableInsertion?: boolean
@@ -38,9 +38,9 @@ const Placeholder = ({ disableVariableInsertion = false, hideBadge = false }: Pl
         {t('nodes.tool.insertPlaceholder1', { ns: 'workflow' })}
         {(!disableVariableInsertion) && (
           <>
-            <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="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-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
+              className="cursor-pointer system-sm-regular 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/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index 56c7f92ec4..fa6fea24c2 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -35,7 +35,7 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
   return (
     <div className="relative mb-1 px-3 py-1">
       {showInstallButton && (
-        <div className="pointer-events-auto absolute right-3 top-[-32px] z-40">
+        <div className="pointer-events-auto absolute top-[-32px] right-3 z-40">
           <InstallPluginButton
             size="small"
             className="font-medium! text-text-accent!"
@@ -53,7 +53,7 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
         <div className="space-y-0.5" aria-disabled={shouldDim}>
           {hasConfigs && toolConfigs.map(key => (
             <div key={key} className="flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary">
-              <div title={key} className="max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary">
+              <div title={key} className="max-w-[100px] shrink-0 truncate text-xs font-medium text-text-tertiary uppercase">
                 {key}
               </div>
               {typeof tool_configurations[key].value === 'string' && (
@@ -75,8 +75,8 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
           ))}
           {showAuthorizationWarning && (
             <div className="flex h-6 items-center rounded-md border-[0.5px] border-state-warning-active bg-state-warning-hover px-1.5">
-              <span className="mr-1 size-[4px] shrink-0 radius-2xs bg-text-warning-secondary" />
-              <div className="grow truncate text-text-warning system-xs-medium" title={t('nodes.tool.authorizationRequired', { ns: 'workflow' })}>
+              <span className="mr-1 size-[4px] shrink-0 rounded-xs bg-text-warning-secondary" />
+              <div className="grow truncate system-xs-medium text-text-warning" title={t('nodes.tool.authorizationRequired', { ns: 'workflow' })}>
                 {t('nodes.tool.authorizationRequired', { ns: 'workflow' })}
               </div>
             </div>
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
index fb28750d72..7b1e096708 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC, ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
-import { cn } from '@/utils/classnames'
 import { replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 
 // Tiny utility to judge whether a cell value is effectively present
@@ -117,7 +117,7 @@ const renderInputCell = (
       className={cn(
         'h-6 rounded-none border-0 bg-transparent px-0 py-0 shadow-none',
         'hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent',
-        'text-text-secondary system-sm-regular placeholder:text-text-quaternary',
+        'system-sm-regular text-text-secondary placeholder:text-text-quaternary',
       )}
     />
   )
@@ -140,8 +140,8 @@ const renderSelectCell = (
       notClearable={true}
       wrapperClassName="h-6 w-full min-w-0"
       className={cn(
-        'h-6 rounded-none bg-transparent pl-0 pr-6 text-text-secondary',
-        'hover:bg-transparent focus-visible:bg-transparent group-hover/simple-select:bg-transparent',
+        'h-6 rounded-none bg-transparent pr-6 pl-0 text-text-secondary',
+        'group-hover/simple-select:bg-transparent hover:bg-transparent focus-visible:bg-transparent',
       )}
       optionWrapClassName="w-26 min-w-26 z-60 -ml-3"
     />
@@ -248,7 +248,7 @@ const GenericTable: FC<GenericTableProps> = ({
     return (
       <div className="rounded-lg border border-divider-regular">
         {showHeader && (
-          <div className="flex h-7 items-center leading-7 text-text-tertiary system-xs-medium-uppercase">
+          <div className="flex h-7 items-center system-xs-medium-uppercase leading-7 text-text-tertiary">
             {columns.map((column, index) => (
               <div
                 key={column.key}
@@ -296,7 +296,7 @@ const GenericTable: FC<GenericTableProps> = ({
                   </div>
                 ))}
                 {!readonly && dataIndex !== null && hasContent && (
-                  <div className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100">
+                  <div className="absolute top-1/2 right-2 -translate-y-1/2 opacity-0 group-hover:opacity-100">
                     <button
                       type="button"
                       onClick={() => removeRow(dataIndex)}
@@ -322,12 +322,12 @@ const GenericTable: FC<GenericTableProps> = ({
   return (
     <div className={className}>
       <div className="mb-3 flex items-center justify-between">
-        <h4 className="text-text-secondary system-sm-semibold-uppercase">{title}</h4>
+        <h4 className="system-sm-semibold-uppercase text-text-secondary">{title}</h4>
       </div>
 
       {showPlaceholder
         ? (
-            <div className="flex h-7 items-center justify-center rounded-lg border border-divider-regular bg-components-panel-bg text-xs font-normal leading-[18px] text-text-quaternary">
+            <div className="flex h-7 items-center justify-center rounded-lg border border-divider-regular bg-components-panel-bg text-xs leading-[18px] font-normal text-text-quaternary">
               {placeholder}
             </div>
           )
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
index d3bba18351..df81da7d6e 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useRef } from 'react'
-import { cn } from '@/utils/classnames'
 
 type ParagraphInputProps = {
   value: string
@@ -25,13 +25,13 @@ const ParagraphInput: FC<ParagraphInputProps> = ({
   const lineCount = Math.max(3, lines.length)
 
   return (
-    <div className={cn('rounded-xl bg-components-input-bg-normal px-3 pb-2 pt-3', className)}>
+    <div className={cn('rounded-xl bg-components-input-bg-normal px-3 pt-3 pb-2', className)}>
       <div className="relative">
-        <div className="pointer-events-none absolute left-0 top-0 flex flex-col">
+        <div className="pointer-events-none absolute top-0 left-0 flex flex-col">
           {Array.from({ length: lineCount }, (_, index) => (
             <span
               key={index}
-              className="flex h-[20px] select-none items-center font-mono text-xs leading-[20px] text-text-quaternary"
+              className="flex h-[20px] items-center font-mono text-xs leading-[20px] text-text-quaternary select-none"
             >
               {String(index + 1).padStart(2, '0')}
             </span>
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
index b49344c562..e674a5f169 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
@@ -4,6 +4,7 @@ import type {
   ValueSelector,
   Var,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useCallback,
@@ -16,7 +17,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import AddVariablePopup from '@/app/components/workflow/nodes/_base/components/add-variable-popup'
-import { cn } from '@/utils/classnames'
 import { useVariableAssigner } from '../../hooks'
 
 type AddVariableProps = {
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
index 8cf78af7bb..32a6af9eef 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -4,6 +4,7 @@ import type {
   VarType,
 } from '../../../types'
 import type { VariableAssignerNodeType } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useMemo,
@@ -15,7 +16,6 @@ import {
   VariableLabelInNode,
 } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
-import { cn } from '@/utils/classnames'
 import { useStore } from '../../../store'
 import { BlockEnum } from '../../../types'
 import {
@@ -83,7 +83,7 @@ const NodeGroupItem = ({
   return (
     <div
       className={cn(
-        'relative rounded-lg border-[1.5px] border-transparent px-1.5 pb-1.5 pt-1',
+        'relative rounded-lg border-[1.5px] border-transparent px-1.5 pt-1 pb-1.5',
         showSelectionBorder && 'border-dashed! border-divider-subtle! bg-state-base-hover',
         showSelectedBorder && 'border-text-accent! bg-util-colors-blue-blue-50!',
       )}
@@ -102,7 +102,7 @@ const NodeGroupItem = ({
         </span>
         <div className="flex items-center">
           <span className="ml-2 shrink-0">{item.type}</span>
-          <div className="ml-2 mr-1 h-2.5 w-px bg-divider-regular"></div>
+          <div className="mr-1 ml-2 h-2.5 w-px bg-divider-regular"></div>
           <AddVariable
             availableVars={availableVars}
             variableAssignerNodeId={item.variableAssignerNodeId}
@@ -115,7 +115,7 @@ const NodeGroupItem = ({
         !item.variables.length && (
           <div
             className={cn(
-              'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-[10px] font-normal uppercase text-text-tertiary',
+              'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-[10px] font-normal text-text-tertiary uppercase',
               (showSelectedBorder || showSelectionBorder) && 'bg-black/[0.02]!',
             )}
           >
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
index b3c2c7662a..70f3885055 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -1,5 +1,6 @@
 import type { Node, ValueSelector } from '@/app/components/workflow/types'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useMemo,
@@ -12,7 +13,6 @@ import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { isConversationVar, isENV, isRagVariableVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import { cn } from '@/utils/classnames'
 
 type NodeVariableItemProps = {
   node: Node
@@ -80,7 +80,7 @@ const NodeVariableItem = ({
     return (
       <div
         className={cn(
-          'system-xs-medium ml-0.5 shrink truncate text-text-accent',
+          'ml-0.5 shrink truncate system-xs-medium text-text-accent',
           isEnv && 'text-text-primary',
           isException && 'text-text-warning',
           isChatVar && 'text-util-colors-teal-teal-700',
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index d7bf571efd..2e88b3149e 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -1,13 +1,13 @@
 import type { FC } from 'react'
 import type { VariableAssignerNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Switch from '@/app/components/base/switch'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import { cn } from '@/utils/classnames'
 import Field from '../_base/components/field'
 import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
 import VarGroupItem from './components/var-group-item'
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index eaeed77338..bfaadff387 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -1,12 +1,12 @@
 import type { NodeProps } from 'reactflow'
 import type { NoteNodeType } from './types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useClickAway } from 'ahooks'
 import {
   memo,
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import {
   useNodeDataUpdate,
   useNodesInteractions,
@@ -95,7 +95,7 @@ const NoteNode = ({
           </div>
           {
             data.selected && !data._isTempNode && (
-              <div className="absolute left-1/2 top-[-41px] -translate-x-1/2">
+              <div className="absolute top-[-41px] left-1/2 -translate-x-1/2">
                 <NoteEditorToolbar
                   theme={theme}
                   onThemeChange={handleThemeChange}
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index 38ef5fb901..c67b658de6 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -5,6 +5,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiEditLine,
   RiExternalLinkLine,
@@ -19,7 +20,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
-import { cn } from '@/utils/classnames'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
 
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
index f88848ad9d..da5b1d3b9a 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useState,
@@ -7,7 +8,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { THEME_MAP } from '../../constants'
 import { NoteTheme } from '../../types'
 
@@ -91,14 +91,14 @@ const ColorPicker = ({
               >
                 <div
                   className={cn(
-                    'absolute left-1/2 top-1/2 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] group-hover:block',
+                    'absolute top-1/2 left-1/2 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] group-hover:block',
                     color.outer,
                   )}
                 >
                 </div>
                 <div
                   className={cn(
-                    'absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-black/5',
+                    'absolute top-1/2 left-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-black/5',
                     color.inner,
                   )}
                 >
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
index 5ca76aa84f..ab4bf8c7bb 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiBold,
   RiItalic,
@@ -11,7 +12,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
 import { useStore } from '../store'
 import { useCommand } from './hooks'
 
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
index 2380776577..a217d7de72 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiFontSize } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { useFontSize } from './hooks'
 
 const FontSizeSelector = () => {
@@ -42,7 +42,7 @@ const FontSizeSelector = () => {
     >
       <PortalToFollowElemTrigger onClick={() => handleOpenFontSizeSelector(!fontSizeSelectorShow)}>
         <div className={cn(
-          'flex h-8 cursor-pointer items-center rounded-md pl-2 pr-1.5 text-[13px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          'flex h-8 cursor-pointer items-center rounded-md pr-1.5 pl-2 text-[13px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
         )}
         >
@@ -56,7 +56,7 @@ const FontSizeSelector = () => {
             FONT_SIZE_LIST.map(font => (
               <div
                 key={font.key}
-                className="flex h-8 cursor-pointer items-center justify-between rounded-md pl-3 pr-2 hover:bg-state-base-hover"
+                className="flex h-8 cursor-pointer items-center justify-between rounded-md pr-2 pl-3 hover:bg-state-base-hover"
                 onClick={(e) => {
                   e.stopPropagation()
                   handleFontSize(font.key)
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index 9b2fae349c..8b86d537c9 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiMoreFill } from '@remixicon/react'
 import {
   memo,
@@ -11,7 +12,6 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import Switch from '@/app/components/base/switch'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
-import { cn } from '@/utils/classnames'
 
 export type OperatorProps = {
   onCopy: () => void
diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
index a5930f6c60..8cb358151a 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -2,6 +2,7 @@ import type { OffsetOptions } from '@floating-ui/react'
 import type {
   OnSelectBlock,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddCircleFill } from '@remixicon/react'
 import {
   memo,
@@ -15,7 +16,6 @@ import {
   BlockEnum,
 } from '@/app/components/workflow/types'
 import { FlowType } from '@/types/common'
-import { cn } from '@/utils/classnames'
 import {
   useAvailableBlocks,
   useIsChatMode,
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index ce4de19870..cf99c08fd4 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -1,4 +1,5 @@
 import type { MouseEvent } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAspectRatioFill,
   RiAspectRatioLine,
@@ -11,7 +12,6 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
 import {
   useNodesReadOnly,
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 7e6617e84b..5e71cc658b 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiExportLine, RiMoreFill } from '@remixicon/react'
 import { toJpeg, toPng, toSvg } from 'html-to-image'
 import {
@@ -18,7 +19,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { useNodesReadOnly } from '../hooks'
 import TipPopup from './tip-popup'
@@ -203,19 +203,19 @@ const MoreActions: FC = () => {
                 {t('common.currentView', { ns: 'workflow' })}
               </div>
               <div
-                className="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
+                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="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
+                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="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
+                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' })}
@@ -227,19 +227,19 @@ const MoreActions: FC = () => {
                 {t('common.currentWorkflow', { ns: 'workflow' })}
               </div>
               <div
-                className="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
+                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="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
+                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="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
+                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' })}
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 803914fe73..fec23b6b11 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiZoomInLine,
   RiZoomOutLine,
@@ -14,13 +15,12 @@ import {
   useReactFlow,
   useViewport,
 } from 'reactflow'
+
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-
-import { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
 import {
   useNodesSyncDraft,
@@ -158,7 +158,7 @@ const ZoomInOut: FC = () => {
                 <RiZoomOutLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
               </div>
             </TipPopup>
-            <div onClick={handleTrigger} className={cn('system-sm-medium w-[34px] text-text-tertiary hover:text-text-secondary')}>
+            <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>
               {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
               %
             </div>
@@ -197,7 +197,7 @@ const ZoomInOut: FC = () => {
                     options.map(option => (
                       <div
                         key={option.key}
-                        className="system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2 text-text-secondary hover:bg-state-base-hover"
+                        className="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"
                         onClick={() => handleZoom(option.key)}
                       >
                         <span>{option.text}</span>
diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
index 7b11cbc37f..06b4426615 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -1,10 +1,10 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useClickAway } from 'ahooks'
 import {
   memo,
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import Divider from '../base/divider'
 import {
   useDSL,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index a44bd014f8..8a896b0913 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -7,7 +8,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
-import { cn } from '@/utils/classnames'
 import BoolValue from './bool-value'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
index 58548e3084..5b59738d4d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -1,9 +1,9 @@
 import type { ConversationVariable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import { capitalize } from 'es-toolkit/string'
 import { memo, useState } from 'react'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
-import { cn } from '@/utils/classnames'
 
 type VariableItemProps = {
   item: ConversationVariable
@@ -19,7 +19,7 @@ const VariableItem = ({
   const [destructive, setDestructive] = useState(false)
   return (
     <div className={cn(
-      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'mb-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}
     >
@@ -30,11 +30,11 @@ const VariableItem = ({
           <div className="system-xs-medium text-text-tertiary">{capitalize(item.value_type)}</div>
         </div>
         <div className="flex shrink-0 items-center gap-1 text-text-tertiary">
-          <div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
+          <div className="cursor-pointer rounded-lg p-1 hover:bg-state-base-hover hover:text-text-secondary">
             <RiEditLine className="h-4 w-4" onClick={() => onEdit(item)} />
           </div>
           <div
-            className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
+            className="cursor-pointer rounded-lg p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
             onMouseOver={() => setDestructive(true)}
             onMouseOut={() => setDestructive(false)}
           >
@@ -42,7 +42,7 @@ const VariableItem = ({
           </div>
         </div>
       </div>
-      <div className="system-xs-regular truncate text-text-tertiary">{item.description}</div>
+      <div className="truncate system-xs-regular text-text-tertiary">{item.description}</div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
index 2a5c71d4b9..e1ebe1306d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
@@ -178,7 +178,7 @@ export const ValueSection = ({
         />
       )}
       {editInJSON && (
-        <div className="w-full radius-lg bg-components-input-bg-normal py-2 pr-1 pl-3" style={{ height: editorMinHeight }}>
+        <div className="w-full rounded-[10px] bg-components-input-bg-normal py-2 pr-1 pl-3" style={{ height: editorMinHeight }}>
           <CodeEditor
             isExpand
             noWrapper
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 4742eb0f36..70191b035d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -1,5 +1,6 @@
 import type { ToastPayload } from './variable-modal.helpers'
 import type { ConversationVariable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,7 +8,6 @@ import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 import { useWorkflowStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 import { replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 import { useVariableModalState } from './use-variable-modal-state'
 import {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
index dc7bef64eb..94a0100de2 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
@@ -7,7 +8,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   inCell?: boolean
@@ -35,14 +35,14 @@ const VariableTypeSelector = ({
       <PortalToFollowElemTrigger className="w-full" onClick={() => setOpen(v => !v)}>
         <div className={cn(
           'flex w-full cursor-pointer items-center px-2',
-          !inCell && 'radius-md bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
+          !inCell && 'rounded-lg bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
           inCell && 'py-0.5 hover:bg-state-base-hover',
           open && !inCell && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
           open && inCell && 'bg-state-base-hover hover:bg-state-base-hover',
         )}
         >
           <div className={cn(
-            'system-sm-regular grow truncate p-1 text-components-input-text-filled',
+            'grow truncate p-1 system-sm-regular text-components-input-text-filled',
             inCell && 'system-xs-regular text-text-secondary',
           )}
           >
@@ -52,17 +52,17 @@ const VariableTypeSelector = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={cn('z-11 w-full', popupClassName)}>
-        <div className="radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
+        <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {list.map((item: any) => (
             <div
               key={item}
-              className="radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover"
+              className="flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 hover:bg-state-base-hover"
               onClick={() => {
                 onSelect(item)
                 setOpen(false)
               }}
             >
-              <div className="system-md-regular grow truncate text-text-secondary">{item}</div>
+              <div className="grow truncate system-md-regular text-text-secondary">{item}</div>
               {value === item && <RiCheckLine className="h-4 w-4 text-text-accent" />}
             </div>
           ))}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index f0ecef4467..e1676978fc 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -1,6 +1,7 @@
 import type {
   ConversationVariable,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBookOpenLine, RiCloseLine } from '@remixicon/react'
 import {
   memo,
@@ -21,7 +22,6 @@ import VariableItem from '@/app/components/workflow/panel/chat-variable-panel/co
 import VariableModalTrigger from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const ChatVariablePanel = () => {
@@ -126,7 +126,7 @@ const ChatVariablePanel = () => {
         'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+      <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {t('chatVariable.panelTitle', { ns: 'workflow' })}
         <div className="flex items-center gap-1">
           <ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
@@ -141,14 +141,14 @@ const ChatVariablePanel = () => {
         </div>
       </div>
       {showTip && (
-        <div className="shrink-0 px-3 pb-2 pt-2.5">
-          <div className="radius-2xl relative bg-background-section-burn p-3">
-            <div className="system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary">TIPS</div>
-            <div className="system-sm-regular mb-4 mt-1 text-text-secondary">
+        <div className="shrink-0 px-3 pt-2.5 pb-2">
+          <div className="relative rounded-2xl bg-background-section-burn p-3">
+            <div className="inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] system-2xs-medium-uppercase text-text-tertiary">TIPS</div>
+            <div className="mt-1 mb-4 system-sm-regular text-text-secondary">
               {t('chatVariable.panelDescription', { ns: 'workflow' })}
             </div>
             <div className="flex items-center gap-2">
-              <div className="radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
+              <div className="flex flex-col rounded-[10px] border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
                 <BubbleX className="mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700" />
                 <div className="system-xs-semibold text-text-secondary">conversation_var</div>
                 <div className="system-2xs-regular text-text-tertiary">String</div>
@@ -157,26 +157,26 @@ const ChatVariablePanel = () => {
                 <div className="mb-2 flex items-center gap-2 py-1">
                   <div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
                     <LongArrowLeft className="h-2 grow text-text-quaternary" />
-                    <div className="system-2xs-medium shrink-0 text-text-tertiary">WRITE</div>
+                    <div className="shrink-0 system-2xs-medium text-text-tertiary">WRITE</div>
                   </div>
                   <BlockIcon className="shrink-0" type={BlockEnum.Assigner} />
-                  <div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.assigner', { ns: 'workflow' })}</div>
+                  <div className="grow truncate system-xs-semibold text-text-secondary">{t('blocks.assigner', { ns: 'workflow' })}</div>
                 </div>
                 <div className="flex items-center gap-2 py-1">
                   <div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
-                    <div className="system-2xs-medium shrink-0 text-text-tertiary">READ</div>
+                    <div className="shrink-0 system-2xs-medium text-text-tertiary">READ</div>
                     <LongArrowRight className="h-2 grow text-text-quaternary" />
                   </div>
                   <BlockIcon className="shrink-0" type={BlockEnum.LLM} />
-                  <div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.llm', { ns: 'workflow' })}</div>
+                  <div className="grow truncate system-xs-semibold text-text-secondary">{t('blocks.llm', { ns: 'workflow' })}</div>
                 </div>
               </div>
             </div>
-            <div className="absolute right-[38px] top-[-4px] z-10 h-3 w-3 rotate-45 bg-background-section-burn" />
+            <div className="absolute top-[-4px] right-[38px] z-10 h-3 w-3 rotate-45 bg-background-section-burn" />
           </div>
         </div>
       )}
-      <div className="shrink-0 px-4 pb-3 pt-2">
+      <div className="shrink-0 px-4 pt-2 pb-3">
         <VariableModalTrigger
           open={showVariableModal}
           setOpen={setShowVariableModal}
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 028543d481..f6cfa21ab9 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -2,6 +2,7 @@
 import type {
   ConversationVariable,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import { useMount } from 'ahooks'
 import copy from 'copy-to-clipboard'
@@ -22,7 +23,6 @@ import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel
 import { useStore } from '@/app/components/workflow/store'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   conversationID: string
@@ -81,18 +81,18 @@ const ConversationVariableModal = ({
       onClose={noop}
       className={cn('h-[640px] w-[920px] max-w-[920px] p-0')}
     >
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <div className="flex h-full w-full">
         {/* LEFT */}
         <div className="flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
-          <div className="system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5 text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
+          <div className="shrink-0 pt-5 pr-4 pb-3 pl-5 system-xl-semibold text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
           <div className="grow overflow-y-auto px-3 py-2">
             {varList.map(chatVar => (
-              <div key={chatVar.id} className={cn('radius-md group mb-0.5 flex cursor-pointer items-center p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+              <div key={chatVar.id} className={cn('group mb-0.5 flex cursor-pointer items-center rounded-lg p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
                 <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
-                <div title={chatVar.name} className={cn('system-sm-medium truncate text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
+                <div title={chatVar.name} className={cn('truncate system-sm-medium text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
               </div>
             ))}
           </div>
@@ -107,7 +107,7 @@ const ConversationVariableModal = ({
           </div>
           <div className="flex h-0 grow flex-col p-4 pt-2">
             <div className="mb-2 flex shrink-0 items-center gap-2">
-              <div className="system-xs-medium-uppercase shrink-0 text-text-tertiary">{t('chatVariable.storedContent', { ns: 'workflow' }).toLocaleUpperCase()}</div>
+              <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('chatVariable.storedContent', { ns: 'workflow' }).toLocaleUpperCase()}</div>
               <div
                 className="h-px grow"
                 style={{
@@ -116,7 +116,7 @@ const ConversationVariableModal = ({
               >
               </div>
               {!!latestValueTimestampMap[currentVar.id] && (
-                <div className="system-xs-regular shrink-0 text-text-tertiary">
+                <div className="shrink-0 system-xs-regular text-text-tertiary">
                   {t('chatVariable.updatedAt', { ns: 'workflow' })}
                   {formatTime(latestValueTimestampMap[currentVar.id], t('dateTimeFormat', { ns: 'appLog' }) as string)}
                 </div>
@@ -125,7 +125,7 @@ const ConversationVariableModal = ({
             <div className="grow overflow-y-auto">
               {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
                 <div className="flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2">
-                  <div className="flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1">
+                  <div className="flex h-7 shrink-0 items-center justify-between pt-1 pr-2 pl-3">
                     <div className="system-xs-semibold text-text-secondary">JSON</div>
                     <div className="flex items-center p-1">
                       {!isCopied
@@ -150,7 +150,7 @@ const ConversationVariableModal = ({
                 </div>
               )}
               {(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
-                <div className="system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-4 py-3 text-components-input-text-filled">{latestValueMap[currentVar.id] || ''}</div>
+                <div className="h-full overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-4 py-3 system-md-regular text-components-input-text-filled">{latestValueMap[currentVar.id] || ''}</div>
               )}
             </div>
           </div>
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index cf1118cd90..de572eb584 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -1,5 +1,6 @@
 import type { StartNodeType } from '../../nodes/start/types'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import { debounce } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
@@ -18,7 +19,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
 import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
 import { useStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 import {
   useWorkflowInteractions,
 } from '../../hooks'
@@ -85,7 +85,7 @@ const DebugAndPreview = () => {
     <div className="relative h-full">
       <div
         ref={triggerRef}
-        className="absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center"
+        className="absolute top-0 -left-1 flex h-full w-1 cursor-col-resize resize-x items-center justify-center"
       >
         <div className="h-10 w-0.5 rounded-xs bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid"></div>
       </div>
@@ -96,7 +96,7 @@ const DebugAndPreview = () => {
         )}
         style={{ width: `${panelWidth}px` }}
       >
-        <div className="system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary">
+        <div className="flex shrink-0 items-center justify-between px-4 pt-3 pb-2 system-xl-semibold text-text-primary">
           <div className="h-8">{t('common.debugAndPreview', { ns: 'workflow' }).toLocaleUpperCase()}</div>
           <div className="flex items-center gap-1">
             <Tooltip
@@ -115,7 +115,7 @@ const DebugAndPreview = () => {
                     <RiEqualizer2Line className="h-4 w-4" />
                   </ActionButton>
                 </Tooltip>
-                {expanded && <div className="absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
+                {expanded && <div className="absolute right-[5px] bottom-[-17px] z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
               </div>
             )}
             <div className="mx-3 h-3.5 w-px bg-divider-regular"></div>
diff --git a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
index 2832a8e248..35b0a4d36a 100644
--- a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
@@ -1,9 +1,9 @@
 import type { StartNodeType } from '../../nodes/start/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
 } from 'react'
 import { useNodes } from 'reactflow'
-import { cn } from '@/utils/classnames'
 import FormItem from '../../nodes/_base/components/before-run-form/form-item'
 import {
   useStore,
@@ -36,7 +36,7 @@ const UserInput = () => {
 
   return (
     <div className={cn('relative z-1 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
-      <div className="px-4 pb-4 pt-3">
+      <div className="px-4 pt-3 pb-4">
         {visibleVariables.map((variable, index) => (
           <div
             key={variable.variable}
diff --git a/web/app/components/workflow/panel/env-panel/env-item.tsx b/web/app/components/workflow/panel/env-panel/env-item.tsx
index 26696daad0..441364896f 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -1,10 +1,10 @@
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
 import { capitalize } from 'es-toolkit/string'
 import { memo, useState } from 'react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 
 type EnvItemProps = {
   env: EnvironmentVariable
@@ -22,7 +22,7 @@ const EnvItem = ({
 
   return (
     <div className={cn(
-      'radius-md group mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'group mb-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}
     >
@@ -35,11 +35,11 @@ const EnvItem = ({
             {env.value_type === 'secret' && <RiLock2Line className="h-3 w-3 text-text-tertiary" />}
           </div>
           <div className="flex shrink-0 items-center gap-1 text-text-tertiary">
-            <div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
+            <div className="cursor-pointer rounded-lg p-1 hover:bg-state-base-hover hover:text-text-secondary">
               <RiEditLine className="h-4 w-4" onClick={() => onEdit(env)} />
             </div>
             <div
-              className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
+              className="cursor-pointer rounded-lg p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
               onMouseOver={() => setDestructive(true)}
               onMouseOut={() => setDestructive(false)}
             >
@@ -47,13 +47,13 @@ const EnvItem = ({
             </div>
           </div>
         </div>
-        <div className="system-xs-regular truncate text-text-tertiary">{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+        <div className="truncate system-xs-regular text-text-tertiary">{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
       </div>
       {env.description && (
         <>
           <div className="h-[0.5px] bg-divider-subtle" />
-          <div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent', destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover')}>
-            <div className="system-xs-regular truncate text-text-tertiary">{env.description}</div>
+          <div className={cn('rounded-br-[8px] rounded-bl-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent', destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover')}>
+            <div className="truncate system-xs-regular text-text-tertiary">{env.description}</div>
           </div>
         </>
       )}
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 324552ebd9..af8273c8ef 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -1,6 +1,7 @@
 import type {
   EnvironmentVariable,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import {
   memo,
@@ -17,7 +18,6 @@ import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/node
 import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
 import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
 import { useStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 
 const HIDDEN_SECRET_VALUE = '[__HIDDEN__]'
 
@@ -189,7 +189,7 @@ const EnvPanel = () => {
         'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+      <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {t('env.envPanelTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
@@ -201,8 +201,8 @@ const EnvPanel = () => {
           </div>
         </div>
       </div>
-      <div className="system-sm-regular shrink-0 px-4 py-1 text-text-tertiary">{t('env.envDescription', { ns: 'workflow' })}</div>
-      <div className="shrink-0 px-4 pb-3 pt-2">
+      <div className="shrink-0 px-4 py-1 system-sm-regular text-text-tertiary">{t('env.envDescription', { ns: 'workflow' })}</div>
+      <div className="shrink-0 px-4 pt-2 pb-3">
         <VariableTrigger
           open={showVariableModal}
           setOpen={setShowVariableModal}
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index cd8b3b5103..e824dd9f08 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -1,4 +1,5 @@
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect } from 'react'
@@ -9,7 +10,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 
 type ModalPropsType = {
@@ -101,7 +101,7 @@ const VariableModal = ({
           <div className="flex gap-2">
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'string' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => setType('string')}
@@ -110,7 +110,7 @@ const VariableModal = ({
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => {
@@ -123,7 +123,7 @@ const VariableModal = ({
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => setType('secret')}
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
index 4eb5be0399..4b498419da 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -1,13 +1,13 @@
 import type { GlobalVariable } from '../../types'
 
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCloseLine } from '@remixicon/react'
 import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStore } from '@/app/components/workflow/store'
 
-import { cn } from '@/utils/classnames'
+import { useStore } from '@/app/components/workflow/store'
 import { isInWorkflowPage } from '../../constants'
 import { useIsChatMode } from '../../hooks'
 import Item from './item'
@@ -66,7 +66,7 @@ const Panel = () => {
         'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+      <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {t('globalVar.title', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
@@ -77,7 +77,7 @@ const Panel = () => {
           </div>
         </div>
       </div>
-      <div className="system-sm-regular shrink-0 px-4 py-1 text-text-tertiary">{t('globalVar.description', { ns: 'workflow' })}</div>
+      <div className="shrink-0 px-4 py-1 system-sm-regular text-text-tertiary">{t('globalVar.description', { ns: 'workflow' })}</div>
 
       <div className="mt-4 grow overflow-y-auto rounded-b-2xl px-4">
         {globalVariableList.map(item => (
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index 83c0df7758..543adc5d6f 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -1,9 +1,9 @@
 import type { GlobalVariable } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { capitalize } from 'es-toolkit/string'
-import { memo } from 'react'
 
+import { memo } from 'react'
 import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   payload: GlobalVariable
@@ -14,7 +14,7 @@ const Item = ({
 }: Props) => {
   return (
     <div className={cn(
-      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'mb-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
     )}
     >
       <div className="flex items-center justify-between">
@@ -27,7 +27,7 @@ const Item = ({
           <div className="system-xs-medium text-text-tertiary">{capitalize(payload.value_type)}</div>
         </div>
       </div>
-      <div className="system-xs-regular mt-1.5 truncate text-text-tertiary">{payload.description}</div>
+      <div className="mt-1.5 truncate system-xs-regular text-text-tertiary">{payload.description}</div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 2f362e5d43..7c8e4e4ed3 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel'
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useCallback, useEffect, useRef } from 'react'
 import { useStore as useReactflow } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import dynamic from '@/next/dynamic'
-import { cn } from '@/utils/classnames'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
 import EnvPanel from './env-panel'
@@ -127,7 +127,7 @@ const Panel: FC<PanelProps> = ({
     <div
       ref={rightPanelRef}
       tabIndex={-1}
-      className={cn('absolute bottom-1 right-0 top-14 z-10 flex outline-hidden')}
+      className={cn('absolute top-14 right-0 bottom-1 z-10 flex outline-hidden')}
       key={`${isRestoring}`}
     >
       {components?.left}
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 938b8089ca..5a3f21272f 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
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { VersionHistoryContextMenuOptions } from '../../../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type MenuItemProps = {
   item: {
@@ -20,7 +20,7 @@ const MenuItem: FC<MenuItemProps> = ({
   return (
     <div
       className={cn(
-        'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 ',
+        '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',
       )}
       onClick={() => {
@@ -28,7 +28,7 @@ const MenuItem: FC<MenuItemProps> = ({
       }}
     >
       <div className={cn(
-        'system-md-regular flex-1 text-text-primary',
+        'flex-1 system-md-regular text-text-primary',
         isDestructive && 'hover:text-text-destructive',
       )}
       >
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
index 040ede3c21..f48804d921 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiFilter3Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -8,7 +9,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
 import { WorkflowVersionFilterOptions } from '../../../types'
 import FilterItem from './filter-item'
 import FilterSwitch from './filter-switch'
@@ -53,7 +53,7 @@ const Filter: FC<FilterProps> = ({
             isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
           )}
         >
-          <RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
+          <RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : 'text-text-tertiary')} />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-12">
diff --git a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
index 898b14fad9..bdf6dd47b8 100644
--- a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   titleWidth: string
@@ -17,8 +17,8 @@ const Item: FC<ItemProps> = ({
 }) => {
   return (
     <div className="relative flex gap-x-1 p-2">
-      {!isLast && <div className="absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
-      <div className=" flex h-5 w-[18px] shrink-0 items-center justify-center">
+      {!isLast && <div className="absolute top-6 left-4 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
+      <div className="flex h-5 w-[18px] shrink-0 items-center justify-center">
         <div className="h-2 w-2 rounded-lg border-2 border-text-quaternary" />
       </div>
       <div className="flex grow flex-col gap-y-0.5">
diff --git a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
index d862609821..bd0a967c49 100644
--- a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
@@ -1,10 +1,10 @@
 import type { VersionHistoryContextMenuOptions } from '../../types'
 import type { VersionHistory } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import dayjs from 'dayjs'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 import { WorkflowVersion } from '../../types'
 import ContextMenu from './context-menu'
 
@@ -82,8 +82,8 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
         setOpen(true)
       }}
     >
-      {!isLast && <div className="absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
-      <div className=" flex h-5 w-[18px] shrink-0 items-center justify-center">
+      {!isLast && <div className="absolute top-6 left-4 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle" />}
+      <div className="flex h-5 w-[18px] shrink-0 items-center justify-center">
         <div className={cn(
           'h-2 w-2 rounded-lg border-2',
           isSelected ? 'border-text-accent' : 'border-text-quaternary',
@@ -93,15 +93,15 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
       <div className="flex grow flex-col gap-y-0.5 overflow-hidden">
         <div className="mr-6 flex h-5 items-center gap-x-1">
           <div className={cn(
-            'system-sm-semibold truncate py-px',
+            'truncate py-px system-sm-semibold',
             isSelected ? 'text-text-accent' : 'text-text-secondary',
           )}
           >
             {isDraft ? t('versionHistory.currentDraft', { ns: 'workflow' }) : item.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}
           </div>
           {isLatest && (
-            <div className="system-2xs-medium-uppercase flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary
-            bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary"
+            <div className="flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary bg-components-badge-bg-dimm
+            px-[5px] system-2xs-medium-uppercase text-text-accent-secondary"
             >
               {t('versionHistory.latest', { ns: 'workflow' })}
             </div>
@@ -116,7 +116,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
         }
         {
           !isDraft && (
-            <div className="system-xs-regular truncate text-text-tertiary">
+            <div className="truncate system-xs-regular text-text-tertiary">
               {`${formatTime(item.created_at)} · ${item.created_by.name}`}
             </div>
           )
@@ -124,7 +124,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
       </div>
       {/* Context Menu */}
       {!isDraft && isHovering && (
-        <div className="absolute right-1 top-1">
+        <div className="absolute top-1 right-1">
           <ContextMenu
             isShowDelete={!isLatest}
             isNamedVersion={!!item.marked_name}
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index e144e04b3e..e28c494b20 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import copy from 'copy-to-clipboard'
 import {
   memo,
@@ -10,7 +11,6 @@ import Loading from '@/app/components/base/loading'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { submitHumanInputForm } from '@/service/workflow'
-import { cn } from '@/utils/classnames'
 import {
   useWorkflowInteractions,
 } from '../hooks'
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index 7c572c59aa..e1714c5f35 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -1,4 +1,5 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightSLine,
   RiListView,
@@ -14,7 +15,6 @@ import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/
 import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type AgentLogItemProps = {
   item: AgentLogItemWithChildren
@@ -54,7 +54,7 @@ const AgentLogItem = ({
   }, [status])
 
   return (
-    <div className="radius-lg border-[0.5px] border-components-panel-border bg-background-default">
+    <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default">
       <div
         className={cn(
           'flex cursor-pointer items-center pt-2 pr-3 pb-2 pl-1.5',
diff --git a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
index ed6de1b9ef..a9d432d1c9 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
@@ -19,24 +19,24 @@ const AgentLogTrigger = ({
 
   return (
     <div
-      className="cursor-pointer radius-lg bg-components-button-tertiary-bg"
+      className="cursor-pointer rounded-[10px] bg-components-button-tertiary-bg"
       onClick={() => {
         onShowAgentOrToolLog({ message_id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)
       }}
     >
-      <div className="system-2xs-medium-uppercase flex items-center px-3 pt-2 text-text-tertiary">
+      <div className="flex items-center px-3 pt-2 system-2xs-medium-uppercase text-text-tertiary">
         {t('nodes.agent.strategy.label', { ns: 'workflow' })}
       </div>
-      <div className="flex items-center pb-1.5 pl-3 pr-2 pt-1">
+      <div className="flex items-center pt-1 pr-2 pb-1.5 pl-3">
         {
           agentStrategy && (
-            <div className="system-xs-medium grow text-text-secondary">
+            <div className="grow system-xs-medium text-text-secondary">
               {agentStrategy}
             </div>
           )
         }
         <div
-          className="system-xs-regular-uppercase flex shrink-0 cursor-pointer items-center px-px text-text-tertiary"
+          className="flex shrink-0 cursor-pointer items-center px-px system-xs-regular-uppercase text-text-tertiary"
         >
           {t('detail', { ns: 'runLog' })}
           <RiArrowRightLine className="ml-0.5 h-3.5 w-3.5" />
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 417d38657e..bd71b662f5 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import type { NodeTracing } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { toast } from '@/app/components/base/ui/toast'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
-import { cn } from '@/utils/classnames'
 import { useStore } from '../store'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
@@ -116,7 +116,7 @@ const RunPanel: FC<RunProps> = ({
         {!hideResult && (
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 system-sm-semibold-uppercase text-text-tertiary',
               currentTab === 'RESULT' && 'border-util-colors-blue-brand-blue-brand-600! text-text-primary',
             )}
             onClick={() => switchTab('RESULT')}
@@ -126,7 +126,7 @@ const RunPanel: FC<RunProps> = ({
         )}
         <div
           className={cn(
-            'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
+            'mr-6 cursor-pointer border-b-2 border-transparent py-3 system-sm-semibold-uppercase text-text-tertiary',
             currentTab === 'DETAIL' && 'border-util-colors-blue-brand-blue-brand-600! text-text-primary',
           )}
           onClick={() => switchTab('DETAIL')}
@@ -135,7 +135,7 @@ const RunPanel: FC<RunProps> = ({
         </div>
         <div
           className={cn(
-            'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
+            'mr-6 cursor-pointer border-b-2 border-transparent py-3 system-sm-semibold-uppercase text-text-tertiary',
             currentTab === 'TRACING' && 'border-util-colors-blue-brand-blue-brand-600! text-text-primary',
           )}
           onClick={() => switchTab('TRACING')}
diff --git a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index 98dfe2b2ca..b37bc2735b 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowLeftLine,
   RiArrowRightSLine,
@@ -13,7 +14,6 @@ import { useTranslation } from 'react-i18next'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'singleRun'
 
@@ -92,7 +92,7 @@ const IterationResultPanel: FC<Props> = ({
             <div
               className={cn(
                 'flex w-full cursor-pointer items-center justify-between px-3',
-                expandedIterations[index] ? 'pb-2 pt-3' : 'py-3',
+                expandedIterations[index] ? 'pt-3 pb-2' : 'py-3',
                 'rounded-xl text-left',
               )}
               onClick={() => toggleIteration(index)}
@@ -101,7 +101,7 @@ const IterationResultPanel: FC<Props> = ({
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
                   <Iteration className="h-3 w-3 text-text-primary-on-surface" />
                 </div>
-                <span className="system-sm-semibold-uppercase grow text-text-primary">
+                <span className="grow system-sm-semibold-uppercase text-text-primary">
                   {t(`${i18nPrefix}.iteration`, { ns: 'workflow' })}
                   {' '}
                   {index + 1}
diff --git a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
index b2d627fb01..574658838e 100644
--- a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { LoopDurationMap, LoopVariableMap, NodeTracing } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowLeftLine,
   RiArrowRightSLine,
@@ -15,7 +16,6 @@ import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'singleRun'
 
@@ -69,7 +69,7 @@ const LoopResultPanel: FC<Props> = ({
       return <RiErrorWarningLine className="h-4 w-4 text-text-destructive" />
 
     if (isRunning)
-      return <RiLoader2Line className="text-primary-600 h-3.5 w-3.5 animate-spin" />
+      return <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-primary-600" />
 
     return (
       <>
diff --git a/web/app/components/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
index 987222f024..bd391266c3 100644
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { NodeTracing } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightSLine,
   RiCloseLine,
@@ -9,7 +10,6 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import { cn } from '@/utils/classnames'
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
 import TracingPanel from './tracing-panel'
 
@@ -40,9 +40,9 @@ const LoopResultPanel: FC<Props> = ({
 
   const main = (
     <>
-      <div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
+      <div className={cn(!noWrap && 'shrink-0', 'px-4 pt-3')}>
         <div className="flex h-8 shrink-0 items-center justify-between">
-          <div className="system-xl-semibold truncate text-text-primary">
+          <div className="truncate system-xl-semibold text-text-primary">
             {t(`${i18nPrefix}.testRunLoop`, { ns: 'workflow' }) }
           </div>
           <div className="ml-2 shrink-0 cursor-pointer p-1" onClick={onHide}>
@@ -61,7 +61,7 @@ const LoopResultPanel: FC<Props> = ({
             <div
               className={cn(
                 'flex w-full cursor-pointer items-center justify-between px-3',
-                expandedLoops[index] ? 'pb-2 pt-3' : 'py-3',
+                expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
                 'rounded-xl text-left',
               )}
               onClick={() => toggleLoop(index)}
@@ -70,7 +70,7 @@ const LoopResultPanel: FC<Props> = ({
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
                   <Loop className="h-3 w-3 text-text-primary-on-surface" />
                 </div>
-                <span className="system-sm-semibold-uppercase grow text-text-primary">
+                <span className="grow system-sm-semibold-uppercase text-text-primary">
                   {t(`${i18nPrefix}.loop`, { ns: 'workflow' })}
                   {' '}
                   {index + 1}
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 5b3f7345a0..6f8897e788 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -7,6 +7,7 @@ import type {
   LoopVariableMap,
   NodeTracing,
 } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAlertFill,
   RiArrowRightSLine,
@@ -24,7 +25,6 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { hasRetryNode } from '@/app/components/workflow/utils'
 import { useDocLink } from '@/context/i18n'
-import { cn } from '@/utils/classnames'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import LargeDataAlert from '../variable-inspect/large-data-alert'
@@ -114,10 +114,10 @@ const NodePanel: FC<Props> = ({
 
   return (
     <div className={cn('px-2 py-1', className)}>
-      <div className="group radius-lg border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md">
+      <div className="group rounded-[10px] border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md">
         <div
           className={cn(
-            'flex cursor-pointer items-center pl-1 pr-3',
+            'flex cursor-pointer items-center pr-3 pl-1',
             hideInfo ? 'py-2 pl-2' : 'py-1.5',
             !collapseState && (hideInfo ? 'pb-1!' : 'pb-1.5!'),
           )}
@@ -138,7 +138,7 @@ const NodePanel: FC<Props> = ({
             }
           >
             <div className={cn(
-              'system-xs-semibold-uppercase grow truncate text-text-secondary',
+              'grow truncate system-xs-semibold-uppercase text-text-secondary',
               hideInfo && 'text-xs!',
             )}
             >
@@ -146,7 +146,7 @@ const NodePanel: FC<Props> = ({
             </div>
           </Tooltip>
           {!['running', 'paused'].includes(nodeInfo.status) && !hideInfo && (
-            <div className="system-xs-regular shrink-0 text-text-tertiary">
+            <div className="shrink-0 system-xs-regular text-text-tertiary">
               {nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}
               {`${getTime(nodeInfo.elapsed_time || 0)}`}
             </div>
@@ -167,7 +167,7 @@ const NodePanel: FC<Props> = ({
             <RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
           )}
           {nodeInfo.status === 'running' && (
-            <div className="flex shrink-0 items-center text-[13px] font-medium leading-[16px] text-text-accent">
+            <div className="flex shrink-0 items-center text-[13px] leading-[16px] font-medium text-text-accent">
               <span className="mr-2 text-xs font-normal">Running</span>
               <RiLoader2Line className="h-3.5 w-3.5 animate-spin" />
             </div>
@@ -247,7 +247,7 @@ const NodePanel: FC<Props> = ({
                   language={CodeLanguage.json}
                   value={nodeInfo.inputs}
                   isJSONStringifyBeauty
-                  footer={nodeInfo.inputs_truncated && <LargeDataAlert textHasNoExport className="mx-1 mb-1 mt-2 h-7" />}
+                  footer={nodeInfo.inputs_truncated && <LargeDataAlert textHasNoExport className="mx-1 mt-2 mb-1 h-7" />}
                 />
               </div>
             )}
@@ -271,7 +271,7 @@ const NodePanel: FC<Props> = ({
                   value={nodeInfo.outputs}
                   isJSONStringifyBeauty
                   tip={<ErrorHandleTip type={nodeInfo.execution_metadata?.error_strategy} />}
-                  footer={nodeInfo.outputs_truncated && <LargeDataAlert textHasNoExport downloadUrl={nodeInfo.outputs_full_content?.download_url} className="mx-1 mb-1 mt-2 h-7" />}
+                  footer={nodeInfo.outputs_truncated && <LargeDataAlert textHasNoExport downloadUrl={nodeInfo.outputs_full_content?.download_url} className="mx-1 mt-2 mb-1 h-7" />}
                 />
               </div>
             )}
diff --git a/web/app/components/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx
index 8a8e613301..b8a70be95c 100644
--- a/web/app/components/workflow/run/status-container.tsx
+++ b/web/app/components/workflow/run/status-container.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   status: string
@@ -18,7 +18,7 @@ const StatusContainer: FC<Props> = ({
   return (
     <div
       className={cn(
-        'relative break-all rounded-lg border px-3 py-2.5 system-xs-regular',
+        'relative rounded-lg border px-3 py-2.5 system-xs-regular break-all',
         status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
         status === 'succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
         status === 'succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
@@ -40,7 +40,7 @@ const StatusContainer: FC<Props> = ({
       )}
     >
       <div className={cn(
-        'absolute left-0 top-0 h-[50px] w-[65%] bg-no-repeat',
+        'absolute top-0 left-0 h-[50px] w-[65%] bg-no-repeat',
         theme === Theme.light && 'bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]',
         theme === Theme.dark && 'bg-[url(~@/app/components/workflow/run/assets/highlight-dark.svg)]',
       )}
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index 233c6207a9..667e0236a3 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Indicator from '@/app/components/header/indicator'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { useDocLink } from '@/context/i18n'
 import { useWorkflowPausedDetails } from '@/service/use-log'
-import { cn } from '@/utils/classnames'
 
 type ResultProps = {
   status: string
@@ -99,10 +99,10 @@ const StatusPanel: FC<ResultProps> = ({
           status === 'partial-succeeded' && 'min-w-[140px]',
         )}
         >
-          <div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('resultPanel.status', { ns: 'runLog' })}</div>
+          <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary">{t('resultPanel.status', { ns: 'runLog' })}</div>
           <div
             className={cn(
-              'system-xs-semibold-uppercase flex items-center gap-1',
+              'flex items-center gap-1 system-xs-semibold-uppercase',
               status === 'succeeded' && 'text-util-colors-green-green-600',
               status === 'partial-succeeded' && 'text-util-colors-green-green-600',
               status === 'failed' && 'text-util-colors-red-red-600',
@@ -155,8 +155,8 @@ const StatusPanel: FC<ResultProps> = ({
           </div>
         </div>
         <div className="max-w-[152px] flex-[33%]">
-          <div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('resultPanel.time', { ns: 'runLog' })}</div>
-          <div className="system-sm-medium flex items-center gap-1 text-text-secondary">
+          <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary">{t('resultPanel.time', { ns: 'runLog' })}</div>
+          <div className="flex items-center gap-1 system-sm-medium text-text-secondary">
             {(status === 'running' || status === 'paused') && (
               <div className="h-2 w-16 animate-pulse rounded-xs bg-text-quaternary" />
             )}
@@ -166,8 +166,8 @@ const StatusPanel: FC<ResultProps> = ({
           </div>
         </div>
         <div className="flex-[33%]">
-          <div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('resultPanel.tokens', { ns: 'runLog' })}</div>
-          <div className="system-sm-medium flex items-center gap-1 text-text-secondary">
+          <div className="mb-1 system-2xs-medium-uppercase text-text-tertiary">{t('resultPanel.tokens', { ns: 'runLog' })}</div>
+          <div className="flex items-center gap-1 system-sm-medium text-text-secondary">
             {(status === 'running' || status === 'paused') && (
               <div className="h-2 w-20 animate-pulse rounded-xs bg-text-quaternary" />
             )}
@@ -223,13 +223,13 @@ const StatusPanel: FC<ResultProps> = ({
       {status === 'paused' && (
         <>
           <div className="my-2 h-[0.5px] bg-divider-deep" />
-          <div className="system-xs-medium flex flex-col gap-y-2">
+          <div className="flex flex-col gap-y-2 system-xs-medium">
             <div className="flex flex-col gap-y-0.5">
               <div className="system-2xs-medium-uppercase text-text-tertiary">{t('nodes.humanInput.log.reason', { ns: 'workflow' })}</div>
               {
                 pausedReasons.length > 0
                   ? pausedReasons.map(reason => (
-                      <div className="system-xs-medium truncate text-text-secondary" key={reason}>{reason}</div>
+                      <div className="truncate system-xs-medium text-text-secondary" key={reason}>{reason}</div>
                     ))
                   : (
                       <div className="h-2 w-20 animate-pulse rounded-xs bg-text-quaternary" />
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 9ac2f08f62..9b4295d1fe 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { NodeTracing } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import {
   useCallback,
@@ -8,7 +9,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import formatNodeList from '@/app/components/workflow/run/utils/format-log'
-import { cn } from '@/utils/classnames'
 import { getHoveredParallelId } from './get-hovered-parallel-id'
 import { useLogs } from './hooks'
 import NodePanel from './node'
@@ -106,7 +106,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
                 ? <span aria-hidden className="i-ri-arrow-down-s-line h-3 w-3" />
                 : <span aria-hidden className="i-ri-menu-4-line h-3 w-3 text-text-tertiary" />}
             </button>
-            <div className="flex items-center text-text-secondary system-xs-semibold-uppercase">
+            <div className="flex items-center system-xs-semibold-uppercase text-text-secondary">
               <span>{parallelDetail.parallelTitle}</span>
             </div>
             <div
@@ -117,7 +117,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
           </div>
           <div className={`relative pl-2 ${isCollapsed ? 'hidden' : ''}`}>
             <div className={cn(
-              'absolute bottom-0 left-[5px] top-0 w-[2px]',
+              'absolute top-0 bottom-0 left-[5px] w-[2px]',
               isHovered ? 'bg-text-accent-secondary' : 'bg-divider-subtle',
             )}
             >
diff --git a/web/app/components/workflow/shortcuts-name.tsx b/web/app/components/workflow/shortcuts-name.tsx
index 7c1fb2305f..70084977e8 100644
--- a/web/app/components/workflow/shortcuts-name.tsx
+++ b/web/app/components/workflow/shortcuts-name.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
-import { cn } from '@/utils/classnames'
 import { getKeyboardKeyNameBySystem } from './utils'
 
 type ShortcutsNameProps = {
@@ -25,7 +25,7 @@ const ShortcutsName = ({
           <div
             key={key}
             className={cn(
-              'system-kbd flex h-4 min-w-4 items-center justify-center radius-xs px-1 capitalize',
+              'flex h-4 min-w-4 items-center justify-center rounded-sm px-1 system-kbd capitalize',
               bgColor === 'gray' && 'bg-components-kbd-bg-gray',
               bgColor === 'white' && 'bg-components-kbd-bg-white text-text-primary-on-surface',
               textColor === 'secondary' && 'text-text-tertiary',
diff --git a/web/app/components/workflow/simple-node/index.tsx b/web/app/components/workflow/simple-node/index.tsx
index c0870dd2fc..c039d9f7e0 100644
--- a/web/app/components/workflow/simple-node/index.tsx
+++ b/web/app/components/workflow/simple-node/index.tsx
@@ -4,6 +4,7 @@ import type {
 import type {
   NodeProps,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiAlertFill,
   RiCheckboxCircleFill,
@@ -25,7 +26,6 @@ import {
 import {
   NodeRunningStatus,
 } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type SimpleNodeProps = NodeProps
 
@@ -94,7 +94,7 @@ const SimpleNode: FC<SimpleNodeProps> = ({
           )
         }
         <div className={cn(
-          'flex items-center rounded-t-2xl px-3 pb-2 pt-3',
+          'flex items-center rounded-t-2xl px-3 pt-3 pb-2',
         )}
         >
           <BlockIcon
@@ -104,7 +104,7 @@ const SimpleNode: FC<SimpleNodeProps> = ({
           />
           <div
             title={data.title}
-            className="system-sm-semibold-uppercase mr-1 flex grow items-center truncate text-text-primary"
+            className="mr-1 flex grow items-center truncate system-sm-semibold-uppercase text-text-primary"
           >
             <div>
               {data.title}
diff --git a/web/app/components/workflow/variable-inspect/display-content.tsx b/web/app/components/workflow/variable-inspect/display-content.tsx
index 8a340d208b..2edd84d0de 100644
--- a/web/app/components/workflow/variable-inspect/display-content.tsx
+++ b/web/app/components/workflow/variable-inspect/display-content.tsx
@@ -1,6 +1,7 @@
 import type { VarType } from '../types'
 import type { ChunkInfo } from '@/app/components/rag-pipeline/components/chunk-card-list/types'
 import type { ParentMode } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiBracesLine, RiEyeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
@@ -11,7 +12,6 @@ import Textarea from '@/app/components/base/textarea'
 import { ChunkCardList } from '@/app/components/rag-pipeline/components/chunk-card-list'
 import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
 import { ChunkingMode } from '@/models/datasets'
-import { cn } from '@/utils/classnames'
 import { PreviewType, ViewMode } from './types'
 
 type DisplayContentProps = {
@@ -52,15 +52,15 @@ const DisplayContent = (props: DisplayContentProps) => {
   }, [previewType, schemaType, jsonString])
 
   return (
-    <div className={cn('flex h-full flex-col radius-lg bg-components-input-bg-normal', isFocused && 'bg-components-input-bg-active outline-solid outline-1 outline-components-input-border-active', className)}>
+    <div className={cn('flex h-full flex-col rounded-[10px] bg-components-input-bg-normal', isFocused && 'bg-components-input-bg-active outline-1 outline-components-input-border-active outline-solid', className)}>
       <div className="flex shrink-0 items-center justify-end p-1">
         {previewType === PreviewType.Markdown && (
-          <div className="system-xs-semibold-uppercase flex grow items-center px-2 py-0.5 text-text-secondary">
+          <div className="flex grow items-center px-2 py-0.5 system-xs-semibold-uppercase text-text-secondary">
             {previewType.toUpperCase()}
           </div>
         )}
         {previewType === PreviewType.Chunks && (
-          <div className="system-xs-semibold-uppercase flex grow items-center px-2 py-0.5 text-text-secondary">
+          <div className="flex grow items-center px-2 py-0.5 system-xs-semibold-uppercase text-text-secondary">
             {varType.toUpperCase()}
             {schemaType ? `(${schemaType})` : ''}
           </div>
@@ -79,7 +79,7 @@ const DisplayContent = (props: DisplayContentProps) => {
           className="shrink-0"
         />
       </div>
-      <div className="flex flex-1 overflow-auto rounded-b-[10px] pl-3 pr-1">
+      <div className="flex flex-1 overflow-auto rounded-b-[10px] pr-1 pl-3">
         {viewMode === ViewMode.Code && (
           previewType === PreviewType.Markdown
             ? (
diff --git a/web/app/components/workflow/variable-inspect/empty.tsx b/web/app/components/workflow/variable-inspect/empty.tsx
index 59e33cdb02..b456acc222 100644
--- a/web/app/components/workflow/variable-inspect/empty.tsx
+++ b/web/app/components/workflow/variable-inspect/empty.tsx
@@ -9,14 +9,14 @@ const Empty: FC = () => {
 
   return (
     <div className="flex h-full flex-col gap-3 rounded-xl bg-background-section p-8">
-      <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-xs">
+      <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-xs">
         <Variable02 className="h-5 w-5 text-text-accent" />
       </div>
       <div className="flex flex-col gap-1">
         <div className="system-sm-semibold text-text-secondary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
         <div className="system-xs-regular text-text-tertiary">{t('debug.variableInspect.emptyTip', { ns: 'workflow' })}</div>
         <a
-          className="system-xs-regular cursor-pointer text-text-accent"
+          className="cursor-pointer system-xs-regular text-text-accent"
           href={docLink('/use-dify/debug/variable-inspect')}
           target="_blank"
           rel="noopener noreferrer"
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 5941ddae59..7d94226786 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -1,5 +1,6 @@
 import type { currentVarType } from './panel'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowRightSLine,
   RiDeleteBinLine,
@@ -15,7 +16,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 import { VarInInspectType } from '@/types/workflow'
-import { cn } from '@/utils/classnames'
 import { useToolIcon } from '../hooks'
 
 type Props = {
diff --git a/web/app/components/workflow/variable-inspect/index.tsx b/web/app/components/workflow/variable-inspect/index.tsx
index 01388b4005..08314a1836 100644
--- a/web/app/components/workflow/variable-inspect/index.tsx
+++ b/web/app/components/workflow/variable-inspect/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { debounce } from 'es-toolkit/compat'
 import {
   useCallback,
   useMemo,
 } from 'react'
-import { cn } from '@/utils/classnames'
 import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
 import { useStore } from '../store'
 import Panel from './panel'
diff --git a/web/app/components/workflow/variable-inspect/large-data-alert.tsx b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
index 183c79e7d7..47e05dd267 100644
--- a/web/app/components/workflow/variable-inspect/large-data-alert.tsx
+++ b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiInformation2Fill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   textHasNoExport?: boolean
@@ -22,10 +22,10 @@ const LargeDataAlert: FC<Props> = ({
     <div className={cn('flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-2 shadow-xs', className)}>
       <div className="flex h-full w-0 grow items-center space-x-1">
         <RiInformation2Fill className="size-4 shrink-0 text-text-accent" />
-        <div className="system-xs-regular w-0 grow truncate text-text-primary">{text}</div>
+        <div className="w-0 grow truncate system-xs-regular text-text-primary">{text}</div>
       </div>
       {downloadUrl && (
-        <div className="system-xs-medium-uppercase ml-1 shrink-0 cursor-pointer text-text-accent">{t('debug.variableInspect.export', { ns: 'workflow' })}</div>
+        <div className="ml-1 shrink-0 cursor-pointer system-xs-medium-uppercase text-text-accent">{t('debug.variableInspect.export', { ns: 'workflow' })}</div>
       )}
     </div>
   )
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index b59096f338..f3450cea13 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -1,11 +1,11 @@
 import type { currentVarType } from './panel'
 
 import type { VarInInspect } from '@/types/workflow'
+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 { VarInInspectType } from '@/types/workflow'
-import { cn } from '@/utils/classnames'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { useNodesInteractions } from '../hooks/use-nodes-interactions'
 import { useStore } from '../store'
diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx
index 4cdc0f348d..4559665ffa 100644
--- a/web/app/components/workflow/variable-inspect/listening.tsx
+++ b/web/app/components/workflow/variable-inspect/listening.tsx
@@ -191,7 +191,7 @@ const Listening: FC<ListeningProps> = ({
             <button
               type="button"
               aria-label={t('nodes.triggerWebhook.debugUrlCopy', { ns: 'workflow' }) || ''}
-              className={`inline-flex items-center radius-sm border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-2 focus-visible:outline-components-panel-border focus-visible:outline-solid ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
+              className={`inline-flex items-center rounded-md border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-2 focus-visible:outline-components-panel-border focus-visible:outline-solid ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
               onClick={() => {
                 copy(webhookDebugUrl)
                 setDebugUrlCopied(true)
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index 5558b5ee38..462f9ba4e1 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { NodeProps } from '../types'
 import type { VarInInspect } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiCloseLine,
 } from '@remixicon/react'
@@ -10,7 +11,6 @@ import ActionButton from '@/app/components/base/action-button'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { VarInInspectType } from '@/types/workflow'
-import { cn } from '@/utils/classnames'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import useMatchSchemaType from '../nodes/_base/components/variable/use-match-schema-type'
 
@@ -160,7 +160,7 @@ const Panel: FC = () => {
   if (isListening) {
     return (
       <div className={cn('flex h-full flex-col')}>
-        <div className="flex shrink-0 items-center justify-between pl-4 pr-2 pt-2">
+        <div className="flex shrink-0 items-center justify-between pt-2 pr-2 pl-4">
           <div className="system-sm-semibold-uppercase text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
           <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
             <RiCloseLine className="h-4 w-4" />
@@ -178,7 +178,7 @@ const Panel: FC = () => {
   if (isEmpty) {
     return (
       <div className={cn('flex h-full flex-col')}>
-        <div className="flex shrink-0 items-center justify-between pl-4 pr-2 pt-2">
+        <div className="flex shrink-0 items-center justify-between pt-2 pr-2 pl-4">
           <div className="system-sm-semibold-uppercase text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
           <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
             <RiCloseLine className="h-4 w-4" />
@@ -194,13 +194,13 @@ const Panel: FC = () => {
   return (
     <div className={cn('relative flex h-full')}>
       {/* left */}
-      {bottomPanelWidth < 488 && showLeftPanel && <div className="absolute left-0 top-0 h-full w-full" onClick={() => setShowLeftPanel(false)}></div>}
+      {bottomPanelWidth < 488 && showLeftPanel && <div className="absolute top-0 left-0 h-full w-full" onClick={() => setShowLeftPanel(false)}></div>}
       <div
         className={cn(
           'w-60 shrink-0 border-r border-divider-burn',
           bottomPanelWidth < 488
             ? showLeftPanel
-              ? 'absolute left-0 top-0 z-10 h-full w-[217px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs'
+              ? 'absolute top-0 left-0 z-10 h-full w-[217px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs'
               : 'hidden'
             : 'block',
         )}
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index 0a9618454e..10ca0804ea 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -1,5 +1,6 @@
 import type { currentVarType } from './panel'
 import type { GenRes } from '@/service/debug'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiArrowGoBackLine,
   RiCloseLine,
@@ -22,7 +23,6 @@ import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/com
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { AppModeEnum } from '@/types/app'
 import { VarInInspectType } from '@/types/workflow'
-import { cn } from '@/utils/classnames'
 import GetCodeGeneratorResModal from '../../app/configuration/config/code-generator/get-code-generator-res'
 import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '../../base/prompt-editor/plugins/update-block'
 import { useNodesInteractions, useToolIcon } from '../hooks'
@@ -192,12 +192,12 @@ const Right = ({
                       size="xs"
                       toolIcon={toolIcon}
                     />
-                    <div className="system-sm-regular shrink-0 text-text-secondary">{currentNodeVar.title}</div>
-                    <div className="system-sm-regular shrink-0 text-text-quaternary">/</div>
+                    <div className="shrink-0 system-sm-regular text-text-secondary">{currentNodeVar.title}</div>
+                    <div className="shrink-0 system-sm-regular text-text-quaternary">/</div>
                   </>
                 )}
-              <div title={currentNodeVar.var.name} className="system-sm-semibold truncate text-text-secondary">{currentNodeVar.var.name}</div>
-              <div className="system-xs-medium ml-1 shrink-0 space-x-2 text-text-tertiary">
+              <div title={currentNodeVar.var.name} className="truncate system-sm-semibold text-text-secondary">{currentNodeVar.var.name}</div>
+              <div className="ml-1 shrink-0 space-x-2 system-xs-medium text-text-tertiary">
                 <span>{`${currentNodeVar.var.value_type}${displaySchemaType}`}</span>
                 {isTruncated && (
                   <>
@@ -240,7 +240,7 @@ const Right = ({
               )}
               {!isTruncated && currentNodeVar.var.edited && (
                 <Badge>
-                  <span className="ml-[2.5px] mr-[4.5px] h-[3px] w-[3px] rounded-sm bg-text-accent-secondary"></span>
+                  <span className="mr-[4.5px] ml-[2.5px] h-[3px] w-[3px] rounded-sm bg-text-accent-secondary"></span>
                   <span className="system-2xs-semibold-uupercase">{t('debug.variableInspect.edited', { ns: 'workflow' })}</span>
                 </Badge>
               )}
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index 6588d21fbe..b61d424b32 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { CommonNodeType } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiLoader2Line, RiStopCircleFill } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import { NodeRunningStatus, 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'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { useNodesReadOnly } from '../hooks/use-workflow'
 import { useStore } from '../store'
@@ -64,7 +64,7 @@ const VariableInspectTrigger: FC = () => {
     <div className={cn('flex items-center gap-1')}>
       {!isRunning && !currentVars.length && (
         <div
-          className={cn('system-2xs-semibold-uppercase flex h-5 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-tertiary shadow-lg backdrop-blur-xs hover:bg-background-default-hover', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
+          className={cn('flex h-5 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 system-2xs-semibold-uppercase text-text-tertiary shadow-lg backdrop-blur-xs hover:bg-background-default-hover', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
           onClick={() => {
             if (getNodesReadOnly())
               return
@@ -77,7 +77,7 @@ const VariableInspectTrigger: FC = () => {
       {!isRunning && currentVars.length > 0 && (
         <>
           <div
-            className={cn('system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
+            className={cn('flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 system-xs-medium text-text-accent shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
             onClick={() => {
               if (getNodesReadOnly())
                 return
@@ -87,7 +87,7 @@ const VariableInspectTrigger: FC = () => {
             {t('debug.variableInspect.trigger.cached', { ns: 'workflow' })}
           </div>
           <div
-            className={cn('system-xs-medium flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 text-text-tertiary shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent hover:text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
+            className={cn('flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 system-xs-medium text-text-tertiary shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent hover:text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
             onClick={() => {
               if (getNodesReadOnly())
                 return
@@ -101,7 +101,7 @@ const VariableInspectTrigger: FC = () => {
       {isRunning && (
         <>
           <div
-            className="system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent"
+            className="flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 system-xs-medium text-text-accent shadow-lg backdrop-blur-xs hover:bg-components-actionbar-bg-accent"
             onClick={() => setShowVariableInspectPanel(true)}
           >
             <RiLoader2Line className="h-4 w-4 animate-spin" />
diff --git a/web/app/components/workflow/variable-inspect/value-content-sections.tsx b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
index 4e619777a4..b1682ce990 100644
--- a/web/app/components/workflow/variable-inspect/value-content-sections.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
@@ -1,6 +1,7 @@
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { FileUploadConfigResponse } from '@/models/common'
 import type { VarInInspect } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import Textarea from '@/app/components/base/textarea'
@@ -8,7 +9,6 @@ import ErrorMessage from '@/app/components/workflow/nodes/llm/components/json-sc
 import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
-import { cn } from '@/utils/classnames'
 import { PreviewMode } from '../../base/features/types'
 import BoolValue from '../panel/chat-variable-panel/components/bool-value'
 import DisplayContent from './display-content'
@@ -32,7 +32,7 @@ export const TextEditorSection = ({
 }: TextEditorSectionProps) => {
   return (
     <>
-      {isTruncated && <LargeDataAlert className="absolute left-3 right-3 top-1" />}
+      {isTruncated && <LargeDataAlert className="absolute top-1 right-3 left-3" />}
       {currentVar.value_type === 'string'
         ? (
             <DisplayContent
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 43111fde29..aaff853fc6 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -1,10 +1,10 @@
 import type { VarInInspect } from '@/types/workflow'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { getProcessedFiles } from '@/app/components/base/file-uploader/utils'
 import { useStore } from '@/app/components/workflow/store'
-import { cn } from '@/utils/classnames'
 import BoolValue from '../panel/chat-variable-panel/components/bool-value'
 import {
   BoolArraySection,
diff --git a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
index b310d0495b..eabe143e88 100644
--- a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
@@ -1,10 +1,10 @@
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useUpdateNodeInternals } from 'reactflow'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 import { NodeSourceHandle } from './node-handle'
 
 type ErrorHandleOnNodeProps = Pick<Node, 'id' | 'data'>
@@ -25,7 +25,7 @@ const ErrorHandleOnNode = ({
     return null
 
   return (
-    <div className="relative px-3 pb-2 pt-1">
+    <div className="relative px-3 pt-1 pb-2">
       <div className={cn(
         'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-[5px]',
         data._runningStatus === NodeRunningStatus.Exception && 'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
diff --git a/web/app/components/workflow/workflow-preview/components/node-handle.tsx b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
index c148c4d270..7c9c8f39f0 100644
--- a/web/app/components/workflow/workflow-preview/components/node-handle.tsx
+++ b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
@@ -1,4 +1,5 @@
 import type { Node } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
 } from 'react'
@@ -9,7 +10,6 @@ import {
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-import { cn } from '@/utils/classnames'
 
 type NodeHandleProps = {
   handleId: string
@@ -31,7 +31,7 @@ export const NodeTargetHandle = memo(({
         position={Position.Left}
         className={cn(
           'z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
-          'after:absolute after:left-1.5 after:top-1 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
+          'after:absolute after:top-1 after:left-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
           'transition-all hover:scale-125',
           !connected && 'after:opacity-0',
           (data.type === BlockEnum.Start
@@ -61,7 +61,7 @@ export const NodeSourceHandle = memo(({
       position={Position.Right}
       className={cn(
         'group/handle z-1 h-4! w-4! rounded-none! border-none! bg-transparent! outline-hidden!',
-        'after:absolute after:right-1.5 after:top-1 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
+        'after:absolute after:top-1 after:right-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
         'transition-all hover:scale-125',
         !connected && 'after:opacity-0',
         handleClassName,
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
index 32af00a7cf..34c8d753ce 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
@@ -5,6 +5,7 @@ import type { IterationNodeType } from '@/app/components/workflow/nodes/iteratio
 import type {
   NodeProps,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   cloneElement,
   memo,
@@ -16,7 +17,6 @@ import {
   BlockEnum,
 } from '@/app/components/workflow/types'
 import { hasErrorHandleNode } from '@/app/components/workflow/utils'
-import { cn } from '@/utils/classnames'
 import ErrorHandleOnNode from '../error-handle-on-node'
 import {
   NodeSourceHandle,
@@ -58,7 +58,7 @@ const BaseCard = ({
         }}
       >
         <div className={cn(
-          'flex items-center rounded-t-2xl px-3 pb-2 pt-3',
+          'flex items-center rounded-t-2xl px-3 pt-3 pb-2',
         )}
         >
           <NodeTargetHandle
@@ -84,7 +84,7 @@ const BaseCard = ({
           />
           <div
             title={data.title}
-            className="system-sm-semibold-uppercase mr-1 flex grow items-center truncate text-text-primary"
+            className="mr-1 flex grow items-center truncate system-sm-semibold-uppercase text-text-primary"
           >
             <div>
               {data.title}
@@ -100,7 +100,7 @@ const BaseCard = ({
                   </div>
                 )}
                 >
-                  <div className="system-2xs-medium-uppercase ml-1 flex items-center justify-center rounded-[5px] border border-text-warning px-[5px] py-[3px] text-text-warning ">
+                  <div className="ml-1 flex items-center justify-center rounded-[5px] border border-text-warning px-[5px] py-[3px] system-2xs-medium-uppercase text-text-warning">
                     {t('nodes.iteration.parallelModeUpper', { ns: 'workflow' })}
                   </div>
                 </Tooltip>
@@ -115,7 +115,7 @@ const BaseCard = ({
         }
         {
           (data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && children && (
-            <div className="h-[calc(100%-42px)] w-full grow pb-1 pl-1 pr-1">
+            <div className="h-[calc(100%-42px)] w-full grow pr-1 pb-1 pl-1">
               {cloneElement(children, { id, data })}
             </div>
           )
@@ -130,7 +130,7 @@ const BaseCard = ({
         }
         {
           data.desc && data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop && (
-            <div className="system-xs-regular whitespace-pre-line wrap-break-word px-3 pb-2 pt-1 text-text-tertiary">
+            <div className="px-3 pt-1 pb-2 system-xs-regular wrap-break-word whitespace-pre-line text-text-tertiary">
               {data.desc}
             </div>
           )
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
index 55c7afb890..ae9a86cab7 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
 } from 'react'
@@ -8,7 +9,6 @@ import {
   Background,
   useViewport,
 } from 'reactflow'
-import { cn } from '@/utils/classnames'
 
 const Node: FC<NodeProps<IterationNodeType>> = ({
   id,
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
index 930a85be1b..9ad06da20a 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { LoopNodeType } from '@/app/components/workflow/nodes/loop/types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useEffect,
@@ -10,7 +11,6 @@ import {
   useNodesInitialized,
   useViewport,
 } from 'reactflow'
-import { cn } from '@/utils/classnames'
 import { useNodeLoopInteractions } from './hooks'
 
 const Node: FC<NodeProps<LoopNodeType>> = ({
diff --git a/web/app/components/workflow/workflow-preview/components/note-node/index.tsx b/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
index 3b6fcbd360..38dee9d6d0 100644
--- a/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
+++ b/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
@@ -1,5 +1,6 @@
 import type { NodeProps } from 'reactflow'
 import type { NoteNodeType } from '@/app/components/workflow/note-node/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   memo,
   useRef,
@@ -10,7 +11,6 @@ import {
   NoteEditor,
   NoteEditorContextProvider,
 } from '@/app/components/workflow/note-node/note-editor'
-import { cn } from '@/utils/classnames'
 
 const NoteNode = ({
   data,
diff --git a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
index 5ff89717aa..7a81bccc50 100644
--- a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
+++ b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   RiZoomInLine,
   RiZoomOutLine,
@@ -22,7 +23,6 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import TipPopup from '@/app/components/workflow/operator/tip-popup'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
-import { cn } from '@/utils/classnames'
 
 enum ZoomType {
   zoomIn = 'zoomIn',
@@ -140,7 +140,7 @@ const ZoomInOut: FC = () => {
                 <RiZoomOutLine className="h-4 w-4 text-text-tertiary hover:text-text-secondary" />
               </div>
             </TipPopup>
-            <div onClick={handleTrigger} className={cn('system-sm-medium w-[34px] text-text-tertiary hover:text-text-secondary')}>
+            <div onClick={handleTrigger} className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>
               {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
               %
             </div>
@@ -179,7 +179,7 @@ const ZoomInOut: FC = () => {
                     options.map(option => (
                       <div
                         key={option.key}
-                        className="system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2 text-text-secondary hover:bg-state-base-hover"
+                        className="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"
                         onClick={() => handleZoom(option.key)}
                       >
                         <span>{option.text}</span>
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index 3ce11be162..1a2b0419dd 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -9,6 +9,7 @@ import type {
   Edge,
   Node,
 } from '@/app/components/workflow/types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   useCallback,
   useState,
@@ -35,7 +36,6 @@ import {
   initialEdges,
   initialNodes,
 } from '@/app/components/workflow/utils/workflow-init'
-import { cn } from '@/utils/classnames'
 import CustomEdge from './components/custom-edge'
 import CustomNode from './components/nodes'
 import IterationStartNode from './components/nodes/iteration-start'
diff --git a/web/app/education-apply/role-selector.tsx b/web/app/education-apply/role-selector.tsx
index 7b3b64936a..35e7c0644c 100644
--- a/web/app/education-apply/role-selector.tsx
+++ b/web/app/education-apply/role-selector.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
 
 type RoleSelectorProps = {
   onChange: (value: string) => void
@@ -32,13 +32,13 @@ const RoleSelector = ({
         options.map(option => (
           <div
             key={option.key}
-            className="system-md-regular mr-6 flex h-5 cursor-pointer items-center text-text-primary"
+            className="mr-6 flex h-5 cursor-pointer items-center system-md-regular text-text-primary"
             onClick={() => onChange(option.key)}
           >
             <div
               className={cn(
                 'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
-                option.key === value && 'border-[5px] border-components-radio-border-checked ',
+                option.key === value && 'border-[5px] border-components-radio-border-checked',
               )}
             >
             </div>
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index 4d859eddaf..bf262181a9 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -1,5 +1,6 @@
 'use client'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
@@ -9,7 +10,6 @@ import { validPassword } from '@/config'
 import { useSearchParams } from '@/next/navigation'
 import { changePasswordWithToken } from '@/service/common'
 import { useVerifyForgotPasswordToken } from '@/service/use-common'
-import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import Input from '../components/base/input'
 
@@ -82,7 +82,7 @@ const ChangePasswordForm = () => {
       {(isTokenMissing || (verifyTokenRes && !verifyTokenRes.is_valid)) && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center radius-3xl border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
             <h2 className="text-[32px] font-bold text-text-primary">{t('invalid', { ns: 'login' })}</h2>
           </div>
           <div className="mx-auto mt-6 w-full">
@@ -150,7 +150,7 @@ const ChangePasswordForm = () => {
       {verifyTokenRes && verifyTokenRes.is_valid && showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center radius-3xl border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               <CheckCircleIcon className="h-10 w-10 text-[#039855]" />
             </div>
             <h2 className="text-[32px] font-bold text-text-primary">
diff --git a/web/app/forgot-password/page.tsx b/web/app/forgot-password/page.tsx
index 7014b9e5b6..b2ac8d2640 100644
--- a/web/app/forgot-password/page.tsx
+++ b/web/app/forgot-password/page.tsx
@@ -1,10 +1,10 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import ChangePasswordForm from '@/app/forgot-password/ChangePasswordForm'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useSearchParams } from '@/next/navigation'
-import { cn } from '@/utils/classnames'
 import Header from '../signin/_header'
 import ForgotPasswordForm from './ForgotPasswordForm'
 
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index 7c1d849bdd..e6dc3ebec0 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -1,5 +1,5 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 import InitPasswordPopup from './InitPasswordPopup'
 
 const Install = () => {
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 268471a12b..c068548561 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -1,8 +1,9 @@
 'use client'
 import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'
+import { cn } from '@langgenius/dify-ui/cn'
 import { useStore } from '@tanstack/react-form'
-import * as React from 'react'
 
+import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
@@ -12,12 +13,11 @@ import Input from '@/app/components/base/input'
 import { Button } from '@/app/components/base/ui/button'
 import { validPassword } from '@/config'
 import { LICENSE_LINK } from '@/constants/link'
-import useDocumentTitle from '@/hooks/use-document-title'
 
+import useDocumentTitle from '@/hooks/use-document-title'
 import Link from '@/next/link'
 import { useRouter } from '@/next/navigation'
 import { fetchInitValidateStatus, fetchSetupStatus, login, setup } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import { encryptPassword as encodePassword } from '@/utils/encryption'
 import Loading from '../components/base/loading'
 
diff --git a/web/app/install/page.tsx b/web/app/install/page.tsx
index db30d5bc5a..b5d92a3298 100644
--- a/web/app/install/page.tsx
+++ b/web/app/install/page.tsx
@@ -1,7 +1,7 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { cn } from '@/utils/classnames'
 import Header from '../signin/_header'
 import InstallForm from './installForm'
 
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index d9b665501d..e9909fe438 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
-import { useGlobalPublicStore } from '@/context/global-public-context'
+import { cn } from '@langgenius/dify-ui/cn'
 
-import { cn } from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import Header from '../signin/_header'
 
 export default function SignInLayout({ children }: any) {
@@ -24,7 +24,7 @@ export default function SignInLayout({ children }: any) {
             </div>
           </div>
           {!systemFeatures.branding.enabled && (
-            <div className="system-xs-regular px-8 py-6 text-text-tertiary">
+            <div className="px-8 py-6 system-xs-regular text-text-tertiary">
               ©
               {' '}
               {new Date().getFullYear()}
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index e40e1e5e6c..7277b6d30c 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
@@ -9,7 +10,6 @@ import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { changePasswordWithToken } from '@/service/common'
-import { cn } from '@/utils/classnames'
 
 const ChangePasswordForm = () => {
   const { t } = useTranslation()
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 0e3883ea73..6eb9d62703 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -1,9 +1,9 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/base/ui/button'
 import { API_PREFIX } from '@/config'
 import { useSearchParams } from '@/next/navigation'
 import { getPurifyHref } from '@/utils'
-import { cn } from '@/utils/classnames'
 import style from '../page.module.css'
 
 type SocialAuthProps = {
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index 4a1a2f4f58..ed32727ae2 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -1,8 +1,8 @@
 'use client'
-import { useGlobalPublicStore } from '@/context/global-public-context'
+import { cn } from '@langgenius/dify-ui/cn'
 
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { cn } from '@/utils/classnames'
 import Header from './_header'
 
 export default function SignInLayout({ children }: any) {
@@ -19,7 +19,7 @@ export default function SignInLayout({ children }: any) {
             </div>
           </div>
           {systemFeatures.branding.enabled === false && (
-            <div className="system-xs-regular px-8 py-6 text-text-tertiary">
+            <div className="px-8 py-6 system-xs-regular text-text-tertiary">
               ©
               {' '}
               {new Date().getFullYear()}
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 18887b0c9b..4fd0eabf66 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -10,7 +11,6 @@ import { useRouter, useSearchParams } from '@/next/navigation'
 import { invitationCheck } from '@/service/common'
 import { useIsLogin } from '@/service/use-common'
 import { LicenseStatus } from '@/types/feature'
-import { cn } from '@/utils/classnames'
 import Loading from '../components/base/loading'
 import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
diff --git a/web/app/signin/split.tsx b/web/app/signin/split.tsx
index 370f108421..708baac003 100644
--- a/web/app/signin/split.tsx
+++ b/web/app/signin/split.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/signup/layout.tsx b/web/app/signup/layout.tsx
index 6728b66115..16c5fcefd2 100644
--- a/web/app/signup/layout.tsx
+++ b/web/app/signup/layout.tsx
@@ -1,9 +1,9 @@
 'use client'
-import Header from '@/app/signin/_header'
+import { cn } from '@langgenius/dify-ui/cn'
 
+import Header from '@/app/signin/_header'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { cn } from '@/utils/classnames'
 
 export default function RegisterLayout({ children }: any) {
   const { systemFeatures } = useGlobalPublicStore()
@@ -19,7 +19,7 @@ export default function RegisterLayout({ children }: any) {
             </div>
           </div>
           {systemFeatures.branding.enabled === false && (
-            <div className="system-xs-regular px-8 py-6 text-text-tertiary">
+            <div className="px-8 py-6 system-xs-regular text-text-tertiary">
               ©
               {' '}
               {new Date().getFullYear()}
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 4a662e0623..ffecd0bc0c 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { MailRegisterResponse } from '@/service/use-common'
+import { cn } from '@langgenius/dify-ui/cn'
 import Cookies from 'js-cookie'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +11,6 @@ import { toast } from '@/app/components/base/ui/toast'
 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'
 
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index ec5dc86a89..17a44fd1f0 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -1,14 +1,12 @@
 @import './preflight.css' layer(base);
 
-@import '../../themes/light.css' layer(base);
-@import '../../themes/dark.css' layer(base);
+@import '@langgenius/dify-ui/styles.css';
 @import '../../themes/manual-light.css' layer(base);
 @import '../../themes/manual-dark.css' layer(base);
 @import './monaco-sticky-fix.css' layer(base);
 
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
-@import '../components/base/modal/index.css' layer(base);
 @import '../components/base/premium-badge/index.css';
 @import '../components/base/segmented-control/index.css';
 
@@ -34,709 +32,6 @@
   }
 }
 
-@utility system-kbd {
-  /* font define start */
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-regular-uppercase {
-  font-size: 10px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-regular {
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-medium {
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-medium-uppercase {
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-semibold-uppercase {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-xs-regular {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-regular-uppercase {
-  font-size: 12px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-medium {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-medium-uppercase {
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-semibold {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-semibold-uppercase {
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-regular {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-medium {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-medium-uppercase {
-  font-size: 13px;
-  font-weight: 500;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-semibold {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-semibold-uppercase {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-md-regular {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-md-medium {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-md-semibold {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-md-semibold-uppercase {
-  font-size: 14px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-xl-regular {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility system-xl-medium {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility system-xl-semibold {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility code-xs-regular {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-xs-semibold {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-sm-regular {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-sm-semibold {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-md-regular {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-md-semibold {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility body-xs-light {
-  font-size: 12px;
-  font-weight: 300;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-xs-regular {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-xs-medium {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-sm-light {
-  font-size: 13px;
-  font-weight: 300;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-sm-regular {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-sm-medium {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-md-light {
-  font-size: 14px;
-  font-weight: 300;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-md-regular {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-md-medium {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-lg-light {
-  font-size: 15px;
-  font-weight: 300;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-lg-regular {
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-lg-medium {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-xl-regular {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility body-xl-medium {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility body-xl-light {
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility body-2xl-light {
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility body-2xl-regular {
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility body-2xl-medium {
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility title-xs-semi-bold {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-xs-bold {
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-sm-semi-bold {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-sm-bold {
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-md-semi-bold {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility title-md-bold {
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility title-lg-semi-bold {
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-lg-bold {
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-xl-semi-bold {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-xl-bold {
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-2xl-semi-bold {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-2xl-bold {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-3xl-semi-bold {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-3xl-bold {
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-4xl-semi-bold {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-4xl-bold {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-5xl-semi-bold {
-  font-size: 30px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-5xl-bold {
-  font-size: 30px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-6xl-semi-bold {
-  font-size: 36px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-6xl-bold {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-7xl-semi-bold {
-  font-size: 48px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-7xl-bold {
-  font-size: 48px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-8xl-semi-bold {
-  font-size: 60px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-8xl-bold {
-  font-size: 60px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility radius-2xs {
-  /* font define end */
-
-  /* border radius start */
-  border-radius: 2px;
-
-  /* border radius end */
-}
-
-@utility radius-xs {
-  border-radius: 4px;
-
-  /* border radius end */
-}
-
-@utility radius-sm {
-  border-radius: 6px;
-
-  /* border radius end */
-}
-
-@utility radius-md {
-  border-radius: 8px;
-
-  /* border radius end */
-}
-
-@utility radius-lg {
-  border-radius: 10px;
-
-  /* border radius end */
-}
-
-@utility radius-xl {
-  border-radius: 12px;
-
-  /* border radius end */
-}
-
-@utility radius-2xl {
-  border-radius: 16px;
-
-  /* border radius end */
-}
-
-@utility radius-3xl {
-  border-radius: 20px;
-
-  /* border radius end */
-}
-
-@utility radius-4xl {
-  border-radius: 24px;
-
-  /* border radius end */
-}
-
-@utility radius-5xl {
-  border-radius: 24px;
-
-  /* border radius end */
-}
-
-@utility radius-6xl {
-  border-radius: 28px;
-
-  /* border radius end */
-}
-
-@utility radius-7xl {
-  border-radius: 32px;
-
-  /* border radius end */
-}
-
-@utility radius-8xl {
-  border-radius: 40px;
-
-  /* border radius end */
-}
-
-@utility radius-9xl {
-  border-radius: 48px;
-
-  /* border radius end */
-}
-
-@utility radius-full {
-  border-radius: 64px;
-
-  /* border radius end */
-}
-
-@utility no-scrollbar {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-@utility no-spinner {
-  /* Hide arrows from number input */
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  -moz-appearance: textfield;
-}
-
 @layer components {
   html {
     color-scheme: light;
@@ -750,137 +45,9 @@
     transition: none !important;
   }
 
-  :root {
-    --max-width: 1100px;
-    --border-radius: 12px;
-    --font-mono:
-      ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-      'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-      'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
-
-    --primary-glow: conic-gradient(
-      from 180deg at 50% 50%,
-      #16abff33 0deg,
-      #0885ff33 55deg,
-      #54d6ff33 120deg,
-      #0071ff33 160deg,
-      transparent 360deg
-    );
-    --secondary-glow: radial-gradient(
-      rgba(255, 255, 255, 1),
-      rgba(255, 255, 255, 0)
-    );
-
-    --tile-start-rgb: 239, 245, 249;
-    --tile-end-rgb: 228, 232, 233;
-    --tile-border: conic-gradient(
-      #00000080,
-      #00000040,
-      #00000030,
-      #00000020,
-      #00000010,
-      #00000010,
-      #00000080
-    );
-
-    --callout-rgb: 238, 240, 241;
-    --callout-border-rgb: 172, 175, 176;
-    --card-rgb: 180, 185, 188;
-    --card-border-rgb: 131, 134, 135;
-  }
-
-  /* @media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(to bottom right,
-        rgba(1, 65, 255, 0),
-        rgba(1, 65, 255, 0),
-        rgba(1, 65, 255, 0.3));
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(#ffffff80,
-        #ffffff40,
-        #ffffff30,
-        #ffffff20,
-        #ffffff10,
-        #ffffff10,
-        #ffffff80);
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-} */
-
-  * {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-  }
-
-  html,
-  body {
-    max-width: 100vw;
-    overflow: hidden;
-  }
-
-  body {
-    color: rgb(var(--foreground-rgb));
-    user-select: none;
-    /* background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb)); */
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-    outline: none;
-  }
-
-  /* @media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-} */
-
-  /* CSS Utils */
-  .h1 {
-    padding-bottom: 1.5rem;
-    line-height: 1.5;
-    font-size: 1.125rem;
-    color: #111928;
-  }
-
-  .h2 {
-    font-size: 14px;
-    font-weight: 500;
-    color: #111928;
-    line-height: 1.5;
-  }
-
   [class*='code-'] {
     @apply font-mono;
   }
-}
-
-@layer components {
-  .link {
-    @apply text-blue-600 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
-  }
 
   .text-gradient {
     background: linear-gradient(91.58deg, #2250f2 -29.55%, #0ebcf3 75.22%);
@@ -890,20 +57,6 @@
     text-fill-color: transparent;
   }
 
-  /* overwrite paging active dark model style  */
-  [class*='style_paginatio'] li .text-primary-600 {
-    color: rgb(28 100 242);
-    background-color: rgb(235 245 255);
-  }
-
-  /* support safari 14 and below */
-  .inset-0 {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
   [data-theme='dark'] [data-hide-on-theme='dark'],
   [data-theme='light'] [data-hide-on-theme='light'] {
     display: none;
diff --git a/web/app/styles/markdown.css b/web/app/styles/markdown.css
index bd4d413b27..c4ccf82297 100644
--- a/web/app/styles/markdown.css
+++ b/web/app/styles/markdown.css
@@ -1,5 +1,4 @@
-@import '../../themes/markdown-light.css';
-@import '../../themes/markdown-dark.css';
+@import '../../themes/markdown.css';
 
 .markdown-body {
   -ms-text-size-adjust: 100%;
diff --git a/web/docs/test.md b/web/docs/test.md
index bc1546a991..58acccec2a 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -520,7 +520,6 @@ const element = await screen.findByText('Async Content')
 
 Test examples in the project:
 
-- [classnames.spec.ts] - Utility function tests
 - [index.spec.tsx] - Component tests
 
 ## Resources
@@ -540,5 +539,4 @@ Test examples in the project:
 [Testing Library Best Practices]: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
 [Vitest Documentation]: https://vitest.dev/guide
 [Vitest Mocking Guide]: https://vitest.dev/guide/mocking.html
-[classnames.spec.ts]: ../utils/classnames.spec.ts
 [index.spec.tsx]: ../app/components/base/button/index.spec.tsx
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 3b32e4e7e0..0fdabf34df 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -88,20 +88,9 @@
       "count": 2
     }
   },
-  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx": {
@@ -120,14 +109,6 @@
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
@@ -139,9 +120,6 @@
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -180,9 +158,6 @@
     }
   },
   "app/(shareLayout)/webapp-reset-password/layout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -192,16 +167,6 @@
       "count": 2
     }
   },
-  "app/(shareLayout)/webapp-signin/layout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/(shareLayout)/webapp-signin/normalForm.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 11
-    }
-  },
   "app/(shareLayout)/webapp-signin/page.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -220,11 +185,6 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/avatar.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/account/(commonLayout)/delete-account/components/feed-back.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -241,9 +201,6 @@
     }
   },
   "app/account/oauth/authorize/layout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -253,11 +210,6 @@
       "count": 1
     }
   },
-  "app/components/app-sidebar/app-info/app-info-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/app-sidebar/app-info/app-operations.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -269,9 +221,6 @@
   "app/components/app-sidebar/app-sidebar-dropdown.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/app-sidebar/basic.tsx": {
@@ -290,11 +239,6 @@
       "count": 1
     }
   },
-  "app/components/app-sidebar/dataset-info/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/app-sidebar/dataset-info/menu-item.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -303,24 +247,13 @@
   "app/components/app-sidebar/dataset-sidebar-dropdown.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app-sidebar/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/app-sidebar/nav-link/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/app-sidebar/toggle-button.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -398,18 +331,10 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
   },
-  "app/components/app/annotation/list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
   "app/components/app/annotation/type.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -422,18 +347,10 @@
     "react/set-state-in-effect": {
       "count": 5
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/app/app-access-control/access-control-dialog.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/app-access-control/add-member-or-group-pop.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -465,41 +382,21 @@
       "count": 1
     }
   },
-  "app/components/app/app-publisher/suggested-action.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/app-publisher/version-info-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/app/configuration/base/feature-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/base/group-name/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/app/configuration/base/operation-btn/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/has-not-set-api.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/app/configuration/base/warning-mask/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -518,27 +415,11 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config-prompt/message-type-selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config-prompt/simple-prompt-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/app/configuration/config-var/config-modal/field.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/app/configuration/config-var/config-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -552,14 +433,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config-var/config-select/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config-var/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -570,14 +443,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config-var/select-type-item/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config-var/select-var-type.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -586,23 +451,9 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config-var/var-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config-vision/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
     }
   },
   "app/components/app/configuration/config-vision/param-config-content.tsx": {
@@ -632,9 +483,6 @@
   "app/components/app/configuration/config/agent/agent-setting/item-panel.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/configuration/config/agent/agent-tools/index.tsx": {
@@ -660,12 +508,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -681,18 +523,7 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config/automatic/idea-output.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config/automatic/instruction-editor.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -707,11 +538,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config/automatic/prompt-toast.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config/automatic/res-placeholder.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -725,12 +551,6 @@
   "app/components/app/configuration/config/automatic/version-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
@@ -760,34 +580,17 @@
       "count": 3
     }
   },
-  "app/components/app/configuration/dataset-config/card-item/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/dataset-config/context-var/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/app/configuration/dataset-config/context-var/var-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 4
     }
   },
   "app/components/app/configuration/dataset-config/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -795,9 +598,6 @@
   "app/components/app/configuration/dataset-config/params-config/config-content.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
     }
   },
   "app/components/app/configuration/dataset-config/params-config/index.tsx": {
@@ -827,9 +627,6 @@
     }
   },
   "app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -837,9 +634,6 @@
   "app/components/app/configuration/debug/chat-user-input.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx": {
@@ -906,20 +700,12 @@
       "count": 1
     }
   },
-  "app/components/app/create-app-dialog/app-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/app/create-app-dialog/app-list/sidebar.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/create-app-modal/index.tsx": {
@@ -949,11 +735,6 @@
       "count": 2
     }
   },
-  "app/components/app/create-from-dsl-modal/uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/app/duplicate-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -987,9 +768,6 @@
     "style/multiline-ternary": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 18
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -998,18 +776,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/app/log/var-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/app/overview/app-card.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1029,12 +799,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/app/overview/settings/index.tsx": {
@@ -1060,17 +824,11 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "perfectionist/sort-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
   },
   "app/components/app/text-generate/item/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -1086,16 +844,6 @@
       "count": 2
     }
   },
-  "app/components/app/text-generate/saved-items/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/app/type-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/app/workflow-log/detail.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1112,9 +860,6 @@
   "app/components/app/workflow-log/list.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 13
     }
   },
   "app/components/app/workflow-log/trigger-by-display.tsx": {
@@ -1135,9 +880,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -1153,9 +895,6 @@
     },
     "react/unsupported-syntax": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
     }
   },
   "app/components/apps/new-app-card.tsx": {
@@ -1165,9 +904,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1181,9 +917,6 @@
     }
   },
   "app/components/base/agent-log-modal/detail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1199,14 +932,6 @@
   "app/components/base/agent-log-modal/index.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/agent-log-modal/iteration.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/agent-log-modal/result.tsx": {
@@ -1218,18 +943,10 @@
     }
   },
   "app/components/base/agent-log-modal/tool-call.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/base/alert.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/amplitude/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -1250,16 +967,6 @@
       "count": 1
     }
   },
-  "app/components/base/app-icon/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 16
-    }
-  },
-  "app/components/base/app-unavailable.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/audio-btn/audio.ts": {
     "node/prefer-global/buffer": {
       "count": 1
@@ -1274,9 +981,6 @@
     }
   },
   "app/components/base/audio-gallery/AudioPlayer.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -1295,17 +999,6 @@
     },
     "react/rules-of-hooks": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/badge.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/badge/index.tsx": {
@@ -1333,9 +1026,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/carousel/index.tsx": {
@@ -1350,9 +1040,6 @@
     }
   },
   "app/components/base/chat/chat-with-history/chat-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 7
     }
@@ -1380,14 +1067,6 @@
       "count": 2
     }
   },
-  "app/components/base/chat/chat-with-history/header/operation.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/chat-with-history/hooks.tsx": {
     "react/set-state-in-effect": {
       "count": 4
@@ -1414,16 +1093,6 @@
       "count": 1
     }
   },
-  "app/components/base/chat/chat-with-history/sidebar/index.tsx": {
-    "perfectionist/sort-imports": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat-with-history/sidebar/item.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
@@ -1432,9 +1101,6 @@
   "app/components/base/chat/chat-with-history/sidebar/operation.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx": {
@@ -1450,21 +1116,11 @@
       "count": 1
     }
   },
-  "app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "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/expiration-time.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/chat/answer/human-input-content/tips.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
@@ -1479,9 +1135,6 @@
     "react/set-state-in-effect": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1494,33 +1147,14 @@
   "app/components/base/chat/chat/answer/operation.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/chat/chat/answer/suggested-questions.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/chat/chat/answer/tool-detail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/base/chat/chat/answer/workflow-process.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
     }
   },
   "app/components/base/chat/chat/chat-input-area/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -1580,9 +1214,6 @@
     }
   },
   "app/components/base/chat/embedded-chatbot/chat-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 7
     }
@@ -1595,9 +1226,6 @@
   "app/components/base/chat/embedded-chatbot/header/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/chat/embedded-chatbot/hooks.tsx": {
@@ -1612,18 +1240,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/types.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -1643,9 +1263,6 @@
     }
   },
   "app/components/base/chip/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -1655,11 +1272,6 @@
       "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
@@ -1680,16 +1292,6 @@
       "count": 1
     }
   },
-  "app/components/base/date-and-time-picker/calendar/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/date-and-time-picker/common/option-list-item.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
@@ -1698,9 +1300,6 @@
   "app/components/base/date-and-time-picker/date-picker/index.tsx": {
     "react/set-state-in-effect": {
       "count": 4
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/date-and-time-picker/hooks.ts": {
@@ -1716,9 +1315,6 @@
   "app/components/base/date-and-time-picker/time-picker/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/base/date-and-time-picker/types.ts": {
@@ -1741,21 +1337,11 @@
       "count": 1
     }
   },
-  "app/components/base/dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/drawer-plus/index.stories.tsx": {
     "react/component-hook-factories": {
       "count": 1
     }
   },
-  "app/components/base/drawer-plus/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/effect/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -1764,9 +1350,6 @@
   "app/components/base/emoji-picker/Inner.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/base/emoji-picker/index.tsx": {
@@ -1774,11 +1357,6 @@
       "count": 1
     }
   },
-  "app/components/base/encrypted-bottom/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/error-boundary/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -1846,11 +1424,6 @@
       "count": 1
     }
   },
-  "app/components/base/features/new-feature-panel/dialog-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/features/new-feature-panel/feature-bar.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1903,9 +1476,6 @@
   "app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
     }
   },
   "app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx": {
@@ -1926,11 +1496,6 @@
       "count": 1
     }
   },
-  "app/components/base/file-thumb/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/file-uploader/audio-preview.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1947,17 +1512,6 @@
     },
     "react/no-missing-key": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/base/file-uploader/hooks.ts": {
@@ -2010,9 +1564,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -2027,11 +1578,6 @@
       "count": 2
     }
   },
-  "app/components/base/form/components/field/checkbox.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -2040,11 +1586,6 @@
       "count": 1
     }
   },
-  "app/components/base/form/components/field/number-slider.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/form/components/field/variable-or-constant-input.tsx": {
     "no-console": {
       "count": 2
@@ -2058,11 +1599,6 @@
       "count": 1
     }
   },
-  "app/components/base/form/components/label.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/form/form-scenarios/base/field.tsx": {
     "react/component-hook-factories": {
       "count": 1
@@ -2144,11 +1680,6 @@
       "count": 2
     }
   },
-  "app/components/base/fullscreen-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/ga/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -2407,11 +1938,6 @@
       "count": 1
     }
   },
-  "app/components/base/image-uploader/chat-image-uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/image-uploader/hooks.ts": {
     "ts/no-explicit-any": {
       "count": 4
@@ -2430,9 +1956,6 @@
   "app/components/base/image-uploader/image-list.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/image-uploader/image-preview.tsx": {
@@ -2464,9 +1987,6 @@
   "app/components/base/input-with-copy/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/input/index.stories.tsx": {
@@ -2480,22 +2000,6 @@
   "app/components/base/input/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
-  "app/components/base/linked-apps-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/list-empty/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/base/loading/index.stories.tsx": {
@@ -2575,9 +2079,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -2587,11 +2088,6 @@
       "count": 5
     }
   },
-  "app/components/base/markdown-with-directive/components/with-icon-card-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/markdown/error-boundary.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -2619,9 +2115,6 @@
     "regexp/no-super-linear-backtracking": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2646,9 +2139,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2710,11 +2200,6 @@
       "count": 1
     }
   },
-  "app/components/base/notion-page-selector/search-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/pagination/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -2763,11 +2248,6 @@
       "count": 3
     }
   },
-  "app/components/base/premium-badge/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/progress-bar/progress-circle.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -2820,14 +2300,6 @@
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/current-block/component.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    }
-  },
   "app/components/base/prompt-editor/plugins/current-block/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -2837,21 +2309,10 @@
     }
   },
   "app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/error-message-block/component.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    }
-  },
   "app/components/base/prompt-editor/plugins/error-message-block/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -2879,9 +2340,6 @@
   "app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx": {
     "react-hooks/exhaustive-deps": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx": {
@@ -2902,34 +2360,11 @@
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "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/component.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    }
-  },
   "app/components/base/prompt-editor/plugins/last-run-block/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -2938,11 +2373,6 @@
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/placeholder.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/prompt-editor/plugins/query-block/component.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -2956,11 +2386,6 @@
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/request-url-block/component.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/prompt-editor/plugins/request-url-block/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -3033,16 +2458,6 @@
       "count": 1
     }
   },
-  "app/components/base/radio-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/radio-card/simple/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/radio/component/group/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -3066,26 +2481,11 @@
       "count": 1
     }
   },
-  "app/components/base/search-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/segmented-control/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/base/segmented-control/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/select/custom.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/select/index.stories.tsx": {
     "no-console": {
       "count": 4
@@ -3101,9 +2501,6 @@
     "style/multiline-ternary": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -3113,11 +2510,6 @@
       "count": 1
     }
   },
-  "app/components/base/select/pure.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/simple-pie-chart/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3134,9 +2526,6 @@
     }
   },
   "app/components/base/sort/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -3171,31 +2560,16 @@
       "count": 1
     }
   },
-  "app/components/base/tab-header/index.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-new/index.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-plain/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/tab-slider/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3204,9 +2578,6 @@
   "app/components/base/tab-slider/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/tag-input/index.stories.tsx": {
@@ -3217,16 +2588,6 @@
       "count": 1
     }
   },
-  "app/components/base/tag-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/tag-management/filter.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/base/tag-management/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3251,9 +2612,6 @@
   "app/components/base/tag-management/tag-item-editor.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/tag-management/tag-remove-modal.tsx": {
@@ -3294,21 +2652,11 @@
       "count": 1
     }
   },
-  "app/components/base/timezone-label/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/tooltip/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
     }
   },
-  "app/components/base/tooltip/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/video-gallery/VideoPlayer.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3325,11 +2673,6 @@
       "count": 1
     }
   },
-  "app/components/base/voice-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/voice-input/utils.ts": {
     "ts/no-explicit-any": {
       "count": 4
@@ -3356,17 +2699,9 @@
       "count": 4
     }
   },
-  "app/components/billing/annotation-full/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/billing/annotation-full/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/billing/plan-upgrade-modal/index.tsx": {
@@ -3405,11 +2740,6 @@
       "count": 1
     }
   },
-  "app/components/billing/pricing/plans/cloud-plan-item/button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/billing/pricing/plans/cloud-plan-item/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 8
@@ -3420,21 +2750,6 @@
       "count": 1
     }
   },
-  "app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
   "app/components/billing/pricing/plans/self-hosted-plan-item/list/item.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3448,9 +2763,6 @@
   "app/components/billing/priority-label/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/billing/type.ts": {
@@ -3466,14 +2778,6 @@
   "app/components/billing/usage-info/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/billing/vector-space-full/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/custom/custom-page/index.tsx": {
@@ -3491,30 +2795,14 @@
       "count": 2
     }
   },
-  "app/components/datasets/common/credential-icon.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/document-picker/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/common/document-picker/preview-document-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/datasets/common/document-status-with-action/status-with-action.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/common/image-list/more.tsx": {
@@ -3537,11 +2825,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-input.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3563,9 +2846,6 @@
   "app/components/datasets/common/retrieval-param-config/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx": {
@@ -3596,16 +2876,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/create-from-pipeline/footer.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -3616,11 +2886,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create-from-pipeline/list/create-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create-from-pipeline/list/customized-list.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3641,11 +2906,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3669,9 +2929,6 @@
   "app/components/datasets/create/embedding-process/indexing-progress-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/datasets/create/empty-dataset-creation-modal/index.tsx": {
@@ -3684,16 +2941,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/file-uploader/components/upload-dropzone.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/create/file-uploader/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/notion-page-preview/index.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3717,11 +2964,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/step-three/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/create/step-two/components/general-chunking-options.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3742,11 +2984,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/step-two/components/option-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/create/step-two/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -3766,17 +3003,11 @@
     },
     "react-hooks/exhaustive-deps": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/create/step-two/language-select/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/create/step-two/preview-item/index.tsx": {
@@ -3790,31 +3021,16 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/stepper/step.tsx": {
-    "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/top-bar/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create/website/base/checkbox-with-label.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/create/website/base/error-message.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/website/base/field.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3825,11 +3041,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/base/options-wrap.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create/website/firecrawl/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3849,11 +3060,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
   "app/components/datasets/create/website/jina-reader/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3869,18 +3075,10 @@
     }
   },
   "app/components/datasets/create/website/jina-reader/options.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/datasets/create/website/preview.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/website/watercrawl/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3896,9 +3094,6 @@
     }
   },
   "app/components/datasets/create/website/watercrawl/options.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -3913,11 +3108,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/documents/components/document-list/components/sort-header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/components/document-list/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 4
@@ -3943,11 +3133,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3963,21 +3148,11 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.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/local-file/components/upload-dropzone.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3991,9 +3166,6 @@
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx": {
@@ -4011,17 +3183,9 @@
       "count": 2
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx": {
@@ -4049,11 +3213,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4102,11 +3261,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/processing/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/steps/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -4135,27 +3289,9 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/child-segment-detail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/datasets/documents/detail/completed/child-segment-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/datasets/documents/detail/completed/common/batch-action.tsx": {
-    "perfectionist/sort-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/completed/common/chunk-content.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/detail/completed/common/empty.tsx": {
@@ -4163,31 +3299,16 @@
       "count": 8
     }
   },
-  "app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/common/summary-label.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/completed/common/summary-status.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/common/summary-text.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/completed/components/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -4227,26 +3348,11 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/new-child-segment.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/documents/detail/completed/segment-card/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/segment-detail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4297,11 +3403,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4325,11 +3426,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/new-segment.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/datasets/documents/detail/segment-add/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -4339,9 +3435,6 @@
     },
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
     }
   },
   "app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx": {
@@ -4362,11 +3455,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/external-api/external-api-modal/Form.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/external-api/external-api-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -4393,25 +3481,14 @@
       "count": 4
     }
   },
-  "app/components/datasets/extra-info/api-access/card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/extra-info/api-access/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/extra-info/service-api/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/extra-info/statistics.tsx": {
@@ -4422,11 +3499,6 @@
       "count": 4
     }
   },
-  "app/components/datasets/formatted-text/flavours/shared.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/formatted-text/flavours/type.ts": {
     "ts/no-empty-object-type": {
       "count": 1
@@ -4443,38 +3515,16 @@
   "app/components/datasets/hit-testing/components/chunk-detail-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/datasets/hit-testing/components/empty-records.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/hit-testing/components/query-input/textarea.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/datasets/hit-testing/components/records.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 3
     }
   },
   "app/components/datasets/hit-testing/components/result-item-external.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/hit-testing/components/result-item-footer.tsx": {
@@ -4482,15 +3532,7 @@
       "count": 1
     }
   },
-  "app/components/datasets/hit-testing/components/result-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/hit-testing/components/score.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -4498,32 +3540,11 @@
   "app/components/datasets/hit-testing/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/list/dataset-card/components/dataset-card-header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    }
-  },
-  "app/components/datasets/list/dataset-card/components/description.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/list/dataset-card/components/tag-area.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/list/dataset-card/hooks/use-dataset-card-state.ts": {
@@ -4546,42 +3567,16 @@
       "count": 1
     }
   },
-  "app/components/datasets/metadata/base/date-picker.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "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": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/metadata/edit-metadata-batch/label.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -4613,9 +3608,6 @@
   "app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "perfectionist/sort-imports": {
-      "count": 1
     }
   },
   "app/components/datasets/metadata/metadata-dataset/field.tsx": {
@@ -4647,12 +3639,6 @@
   "app/components/datasets/metadata/metadata-document/info-group.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
     }
   },
   "app/components/datasets/metadata/types.ts": {
@@ -4660,16 +3646,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/preview/container.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/datasets/preview/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/rename-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4703,25 +3679,12 @@
       "count": 1
     }
   },
-  "app/components/datasets/settings/option-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/settings/permission-selector/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
     "react/no-missing-key": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
-  "app/components/datasets/settings/permission-selector/member-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/datasets/settings/permission-selector/permission-item.tsx": {
@@ -4743,9 +3706,6 @@
     }
   },
   "app/components/develop/code.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-empty-object-type": {
       "count": 1
     },
@@ -4753,15 +3713,7 @@
       "count": 9
     }
   },
-  "app/components/develop/doc.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/develop/md.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-empty-object-type": {
       "count": 1
     },
@@ -4790,25 +3742,12 @@
       "count": 1
     }
   },
-  "app/components/develop/tag.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/develop/toc-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "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
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
     }
   },
   "app/components/explore/banner/indicator-button.tsx": {
@@ -4817,17 +3756,6 @@
     },
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/explore/category.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/explore/create-app-modal/index.tsx": {
@@ -4854,35 +3782,9 @@
       "count": 1
     }
   },
-  "app/components/explore/sidebar/app-nav-item/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/explore/sidebar/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    }
-  },
-  "app/components/explore/sidebar/no-apps/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/explore/try-app/app/chat.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/explore/try-app/app/text-generation.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/explore/try-app/index.tsx": {
@@ -4997,26 +3899,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-dropdown/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/header/account-dropdown/workplace-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
-  "app/components/header/account-setting/Integrations-page/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/header/account-setting/api-based-extension-page/empty.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/api-based-extension-page/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5030,11 +3912,6 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/collapse/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/data-source-page-new/card.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -5056,9 +3933,6 @@
     }
   },
   "app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -5109,11 +3983,6 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/members-page/invite-modal/role-selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5122,14 +3991,6 @@
   "app/components/header/account-setting/members-page/operation/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
-  "app/components/header/account-setting/members-page/operation/transfer-ownership.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx": {
@@ -5147,18 +4008,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/header/account-setting/menu-dialog.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/declarations.ts": {
     "erasable-syntax-only/enums": {
       "count": 11
@@ -5175,20 +4028,7 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -5203,11 +4043,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -5262,18 +4097,10 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-badge/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-modal/Form.tsx": {
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
-    },
     "ts/no-explicit-any": {
       "count": 6
     }
@@ -5291,26 +4118,11 @@
       "count": 5
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-name/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "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/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5319,11 +4131,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5335,26 +4142,11 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "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/model-selector/model-selector-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5363,16 +4155,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "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
@@ -5383,17 +4165,9 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx": {
@@ -5405,9 +4179,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -5431,16 +4202,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/header/account-setting/model-provider-page/provider-icon/index.tsx": {
-    "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
@@ -5451,11 +4212,6 @@
       "count": 4
     }
   },
-  "app/components/header/app-back/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/app-nav/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
@@ -5464,15 +4220,7 @@
       "count": 1
     }
   },
-  "app/components/header/app-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/header/header-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -5487,43 +4235,19 @@
       "count": 3
     }
   },
-  "app/components/header/nav/nav-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/header/plan-badge/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/header/plugins-nav/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/base/badges/icon-with-tooltip.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/plugins/base/deprecation-notice.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/base/key-value-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/plugins/card/base/corner-mark.tsx": {
@@ -5534,11 +4258,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/card/base/org-info.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/plugins/card/base/title.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5549,16 +4268,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/plugins/install-plugin/base/loading-error.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/plugins/install-plugin/hooks.ts": {
     "ts/no-explicit-any": {
       "count": 4
@@ -5578,9 +4287,6 @@
     },
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/install-plugin/install-bundle/item/github-item.tsx": {
@@ -5597,9 +4303,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -5615,9 +4318,6 @@
   "app/components/plugins/install-plugin/install-from-local-package/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx": {
@@ -5628,9 +4328,6 @@
   "app/components/plugins/install-plugin/install-from-marketplace/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/marketplace/description/index.tsx": {
@@ -5638,39 +4335,16 @@
       "count": 9
     }
   },
-  "app/components/plugins/marketplace/empty/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
   "app/components/plugins/marketplace/hooks.ts": {
     "@tanstack/query/exhaustive-deps": {
       "count": 1
     }
   },
-  "app/components/plugins/marketplace/list/list-with-collection.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/plugins/marketplace/list/list-wrapper.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/plugins/marketplace/plugin-type-switch.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/plugins/marketplace/search-box/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/plugins/marketplace/search-box/tags-filter.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5679,16 +4353,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/marketplace/search-box/trigger/marketplace.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/plugins/marketplace/sort-dropdown/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5713,9 +4377,6 @@
   "app/components/plugins/plugin-auth/authorize/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx": {
@@ -5805,11 +4466,6 @@
       "count": 8
     }
   },
-  "app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5818,11 +4474,6 @@
       "count": 3
     }
   },
-  "app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-detail-panel/app-selector/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5876,9 +4527,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -5888,11 +4536,6 @@
       "count": 7
     }
   },
-  "app/components/plugins/plugin-detail-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/plugin-detail-panel/model-list.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -5902,18 +4545,10 @@
     }
   },
   "app/components/plugins/plugin-detail-panel/model-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -5926,26 +4561,15 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
   "app/components/plugins/plugin-detail-panel/strategy-detail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/plugins/plugin-detail-panel/strategy-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6016,9 +4640,6 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -6026,25 +4647,16 @@
   "app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/types.ts": {
@@ -6060,9 +4672,6 @@
   "app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx": {
@@ -6083,11 +4692,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -6096,24 +4700,13 @@
   "app/components/plugins/plugin-detail-panel/tool-selector/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
   },
-  "app/components/plugins/plugin-detail-panel/trigger/event-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/plugins/plugin-item/action.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6123,9 +4716,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6153,17 +4743,11 @@
   "app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/plugins/plugin-page/filter-management/tag-filter.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/plugins/plugin-page/index.tsx": {
@@ -6197,9 +4781,6 @@
   "app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/plugin-tasks/index.tsx": {
@@ -6207,17 +4788,9 @@
       "count": 1
     }
   },
-  "app/components/plugins/readme-panel/entrance.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/readme-panel/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/readme-panel/store.ts": {
@@ -6225,21 +4798,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6268,11 +4826,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/reference-setting-modal/label.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 7
@@ -6286,11 +4839,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/update-plugin/plugin-version-picker.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/rag-pipeline/components/chunk-card-list/q-a-item.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -6333,16 +4881,6 @@
       "count": 1
     }
   },
-  "app/components/rag-pipeline/components/panel/input-field/editor/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/rag-pipeline/components/panel/input-field/hooks.ts": {
     "react/set-state-in-effect": {
       "count": 1
@@ -6373,11 +4911,6 @@
       "count": 2
     }
   },
-  "app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.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
@@ -6416,11 +4949,6 @@
       "count": 4
     }
   },
-  "app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6442,9 +4970,6 @@
     }
   },
   "app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6522,9 +5047,6 @@
   "app/components/share/text-generation/info-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/share/text-generation/menu-dropdown.tsx": {
@@ -6533,9 +5055,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/share/text-generation/no-data/index.tsx": {
@@ -6557,9 +5076,6 @@
     }
   },
   "app/components/share/text-generation/run-batch/csv-reader/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -6575,16 +5091,6 @@
       "count": 3
     }
   },
-  "app/components/share/text-generation/text-generation-result-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/share/text-generation/text-generation-sidebar.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/share/text-generation/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -6623,20 +5129,9 @@
       "count": 1
     }
   },
-  "app/components/tools/labels/filter.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/tools/labels/selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/tools/marketplace/index.tsx": {
@@ -6663,27 +5158,11 @@
   "app/components/tools/mcp/detail/operation-dropdown.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/tools/mcp/detail/provider-detail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/tools/mcp/detail/tool-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/tools/mcp/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/tools/mcp/mcp-server-modal.tsx": {
@@ -6714,20 +5193,12 @@
       "count": 3
     }
   },
-  "app/components/tools/mcp/sections/authentication-section.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/tools/mcp/sections/headers-section.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
   "app/components/tools/provider-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6738,18 +5209,10 @@
     }
   },
   "app/components/tools/provider/empty.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/tools/provider/tool-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/tools/setting/build-in/config-credentials.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -6776,12 +5239,6 @@
   "app/components/tools/workflow-tool/method-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow-app/components/workflow-children.tsx": {
@@ -6857,11 +5314,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/block-selector/data-sources.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/block-selector/featured-tools.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6904,9 +5356,6 @@
   "app/components/workflow/block-selector/index-bar.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/block-selector/main.tsx": {
@@ -6925,17 +5374,6 @@
   "app/components/workflow/block-selector/market-place-plugin/item.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/block-selector/market-place-plugin/list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/block-selector/rag-tool-recommendations/index.tsx": {
@@ -6962,9 +5400,6 @@
   "app/components/workflow/block-selector/tabs.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/block-selector/tool-picker.tsx": {
@@ -6975,9 +5410,6 @@
   "app/components/workflow/block-selector/tool/action-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx": {
@@ -6988,18 +5420,12 @@
   "app/components/workflow/block-selector/tool/tool.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/block-selector/trigger-plugin/action-item.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7008,9 +5434,6 @@
     "react/set-state-in-effect": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7036,9 +5459,6 @@
     },
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/candidate-node-main.tsx": {
@@ -7061,16 +5481,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/header/checklist/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/workflow/header/checklist/node-group.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/header/editing-title.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -7090,9 +5500,6 @@
     "no-console": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7102,11 +5509,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/header/scroll-to-selected-node-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/header/test-run-menu-helpers.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -7123,11 +5525,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/header/undo-redo.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/header/version-history-button.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7136,18 +5533,12 @@
   "app/components/workflow/header/view-history.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/workflow/header/view-workflow-history.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7259,9 +5650,6 @@
     "no-restricted-imports": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -7283,9 +5671,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 11
     }
@@ -7323,11 +5708,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/editor/base.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -7340,9 +5720,6 @@
     "react-refresh/only-export-components": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 6
     }
@@ -7371,11 +5748,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7394,11 +5766,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/error-handle/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -7410,14 +5777,6 @@
   "app/components/workflow/nodes/_base/components/field.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/workflow/nodes/_base/components/file-type-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/_base/components/file-upload-setting.tsx": {
@@ -7425,16 +5784,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/form-input-boolean.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/workflow/nodes/_base/components/form-input-item.sections.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/_base/components/form-input-item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7448,11 +5797,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/group.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/help-link.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7467,9 +5811,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7479,11 +5820,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/layout/field-title.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/_base/components/layout/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 7
@@ -7492,11 +5828,6 @@
       "count": 7
     }
   },
-  "app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
@@ -7508,9 +5839,6 @@
     }
   },
   "app/components/workflow/nodes/_base/components/memory-config.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -7528,11 +5856,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/next-step/container.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/next-step/operator.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7546,30 +5869,11 @@
   "app/components/workflow/nodes/_base/components/node-handle.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/nodes/_base/components/node-resizer.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/option-card.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/nodes/_base/components/output-vars.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/_base/components/panel-operator/index.tsx": {
@@ -7581,38 +5885,21 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
   },
   "app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
     }
   },
   "app/components/workflow/nodes/_base/components/selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -7621,9 +5908,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7659,24 +5943,6 @@
   "app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/variable/utils.ts": {
@@ -7695,9 +5961,6 @@
   "app/components/workflow/nodes/_base/components/variable/var-list.tsx": {
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx": {
@@ -7714,30 +5977,11 @@
   "app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx": {
@@ -7762,12 +6006,6 @@
     "react/set-state-in-effect": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 6
     }
@@ -7831,9 +6069,6 @@
     }
   },
   "app/components/workflow/nodes/_base/node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7863,9 +6098,6 @@
     },
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/agent/default.ts": {
@@ -7914,9 +6146,6 @@
   "app/components/workflow/nodes/assigner/components/operation-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/assigner/default.ts": {
@@ -8072,59 +6301,30 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/http/components/api-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/http/components/authorization/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/workflow/nodes/http/components/authorization/radio-group.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/http/components/curl-panel.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/workflow/nodes/http/components/edit-body/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "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": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -8139,11 +6339,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/nodes/http/panel.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/http/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 5
@@ -8175,9 +6370,6 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx": {
@@ -8188,32 +6380,11 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 16
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx": {
@@ -8249,31 +6420,15 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/workflow/nodes/human-input/components/timeout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx": {
     "react-refresh/only-export-components": {
       "count": 2
     }
   },
-  "app/components/workflow/nodes/human-input/node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/workflow/nodes/human-input/panel.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8305,9 +6460,6 @@
   "app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx": {
@@ -8320,11 +6472,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/if-else/components/condition-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/workflow/nodes/if-else/components/condition-number-input.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8363,11 +6510,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/iteration/add-block.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow/nodes/iteration/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -8396,11 +6538,6 @@
       "count": 6
     }
   },
-  "app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8409,14 +6546,6 @@
   "app/components/workflow/nodes/knowledge-base/components/index-method.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/nodes/knowledge-base/components/option-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hooks.tsx": {
@@ -8432,9 +6561,6 @@
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx": {
@@ -8450,11 +6576,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/nodes/knowledge-base/node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/knowledge-base/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -8499,15 +6620,7 @@
       "count": 4
     }
   },
-  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -8540,11 +6653,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8599,11 +6707,6 @@
       "count": 5
     }
   },
-  "app/components/workflow/nodes/list-operator/components/extract-input.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/list-operator/components/filter-condition.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8616,12 +6719,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -8656,9 +6753,6 @@
     "react/unsupported-syntax": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -8667,18 +6761,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
   },
-  "app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8723,11 +6809,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 5
@@ -8751,22 +6832,11 @@
   "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
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts": {
@@ -8823,11 +6893,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/loop/add-block.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow/nodes/loop/components/condition-add.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8849,9 +6914,6 @@
   "app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx": {
@@ -8864,11 +6926,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/loop/components/condition-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/workflow/nodes/loop/components/condition-number-input.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8879,15 +6936,7 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/loop/components/loop-variables/empty.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -8912,11 +6961,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/loop/insert-block.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/loop/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -8992,9 +7036,6 @@
     },
     "react/unsupported-syntax": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/question-classifier/default.ts": {
@@ -9023,11 +7064,6 @@
       "count": 8
     }
   },
-  "app/components/workflow/nodes/start/components/var-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/start/node.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -9088,9 +7124,6 @@
     }
   },
   "app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -9123,11 +7156,6 @@
       "count": 6
     }
   },
-  "app/components/workflow/nodes/tool/node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow/nodes/tool/output-schema-utils.ts": {
     "ts/no-explicit-any": {
       "count": 4
@@ -9236,14 +7264,6 @@
   "app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
-  "app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/trigger-webhook/default.ts": {
@@ -9279,16 +7299,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
@@ -9310,11 +7320,6 @@
       "count": 5
     }
   },
-  "app/components/workflow/note-node/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/note-node/note-editor/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -9331,9 +7336,6 @@
     },
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/note-node/note-editor/toolbar/command.tsx": {
@@ -9344,9 +7346,6 @@
   "app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/note-node/note-editor/toolbar/operator.tsx": {
@@ -9377,9 +7376,6 @@
   "app/components/workflow/operator/more-actions.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/workflow/operator/tip-popup.tsx": {
@@ -9393,9 +7389,6 @@
     },
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/panel/chat-record/index.tsx": {
@@ -9443,11 +7436,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -9457,18 +7445,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
   },
-  "app/components/workflow/panel/chat-variable-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 12
-    }
-  },
   "app/components/workflow/panel/chat-variable-panel/type.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -9483,9 +7463,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -9503,24 +7480,6 @@
   "app/components/workflow/panel/debug-and-preview/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/workflow/panel/debug-and-preview/user-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/panel/env-panel/env-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
-  "app/components/workflow/panel/env-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/panel/env-panel/variable-modal.tsx": {
@@ -9539,26 +7498,11 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/global-variable-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/panel/global-variable-panel/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/panel/human-input-form-list.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/workflow/panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/inputs-panel.tsx": {
     "ts/no-explicit-any": {
       "count": 4
@@ -9574,14 +7518,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -9600,9 +7536,6 @@
   "app/components/workflow/panel/version-history-panel/filter/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/panel/version-history-panel/index.tsx": {
@@ -9615,27 +7548,11 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/version-history-panel/loading/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/workflow/panel/version-history-panel/version-history-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/workflow-preview.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -9646,11 +7563,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/run/agent-log/agent-log-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/workflow/run/agent-log/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -9664,9 +7576,6 @@
   "app/components/workflow/run/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/run/iteration-log/index.tsx": {
@@ -9679,11 +7588,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/run/iteration-log/iteration-result-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/run/loop-log/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -9694,19 +7598,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/run/loop-log/loop-result-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/run/loop-result-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/run/meta.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 13
@@ -9718,9 +7609,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/workflow/run/output-panel.tsx": {
@@ -9760,21 +7648,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/run/status-container.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/run/status.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
-  "app/components/workflow/run/tracing-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/run/utils/format-log/agent/index.ts": {
     "ts/no-explicit-any": {
       "count": 11
@@ -9808,16 +7681,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/shortcuts-name.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/simple-node/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/store/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -9898,18 +7761,10 @@
     }
   },
   "app/components/workflow/variable-inspect/display-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/workflow/variable-inspect/empty.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/variable-inspect/group.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -9918,11 +7773,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/variable-inspect/large-data-alert.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/variable-inspect/left.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -9937,9 +7787,6 @@
     }
   },
   "app/components/workflow/variable-inspect/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -9948,9 +7795,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -9959,9 +7803,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -9971,11 +7812,6 @@
       "count": 2
     }
   },
-  "app/components/workflow/variable-inspect/value-content-sections.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/variable-inspect/value-content.tsx": {
     "react/set-state-in-effect": {
       "count": 5
@@ -9995,25 +7831,9 @@
       "count": 2
     }
   },
-  "app/components/workflow/workflow-preview/components/error-handle-on-node.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/workflow-preview/components/node-handle.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/workflow-preview/components/nodes/base.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/workflow-preview/components/nodes/constants.ts": {
@@ -10042,9 +7862,6 @@
     },
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/education-apply/expire-notice-modal.tsx": {
@@ -10057,14 +7874,6 @@
       "count": 5
     }
   },
-  "app/education-apply/role-selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/education-apply/search-input.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -10097,9 +7906,6 @@
     }
   },
   "app/reset-password/layout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10120,9 +7926,6 @@
     }
   },
   "app/signin/layout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10136,9 +7939,6 @@
     }
   },
   "app/signup/layout.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
diff --git a/web/package.json b/web/package.json
index 8bc31dce31..5fb0f4a400 100644
--- a/web/package.json
+++ b/web/package.json
@@ -86,7 +86,6 @@
     "ahooks": "catalog:",
     "class-variance-authority": "catalog:",
     "client-only": "catalog:",
-    "clsx": "catalog:",
     "cmdk": "catalog:",
     "copy-to-clipboard": "catalog:",
     "cron-parser": "catalog:",
@@ -147,7 +146,6 @@
     "std-semver": "catalog:",
     "streamdown": "catalog:",
     "string-ts": "catalog:",
-    "tailwind-merge": "catalog:",
     "tldts": "catalog:",
     "unist-util-visit": "catalog:",
     "use-context-selector": "catalog:",
@@ -165,6 +163,7 @@
     "@hono/node-server": "catalog:",
     "@iconify-json/heroicons": "catalog:",
     "@iconify-json/ri": "catalog:",
+    "@langgenius/dify-ui": "workspace:*",
     "@mdx-js/loader": "catalog:",
     "@mdx-js/react": "catalog:",
     "@mdx-js/rollup": "catalog:",
diff --git a/web/scripts/gen-icons.mjs b/web/scripts/gen-icons.mjs
index 183cef6960..4fb5ce5840 100644
--- a/web/scripts/gen-icons.mjs
+++ b/web/scripts/gen-icons.mjs
@@ -115,7 +115,7 @@ const generateImageComponent = async (entry, relativeSegments) => {
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import { cn } from '@/utils/classnames'
+import { cn } from '@langgenius/dify-ui/cn'
 import s from './<%= fileName %>.module.css'
 
 const Icon = (
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index db50f2457b..0ebcfd8a71 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -1,100 +1,21 @@
 import { icons as customPublicIcons } from '@dify/iconify-collections/custom-public'
 import { icons as customVenderIcons } from '@dify/iconify-collections/custom-vender'
 import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
+import difyUIPreset from '@langgenius/dify-ui/tailwind-preset'
 import tailwindTypography from '@tailwindcss/typography'
-import tailwindThemeVarDefine from './themes/tailwind-theme-var-define'
 import typography from './typography.js'
 
 const config = {
+  presets: [difyUIPreset],
   theme: {
     typography,
     extend: {
-      colors: {
-        gray: {
-          25: '#fcfcfd',
-          50: '#f9fafb',
-          100: '#f2f4f7',
-          200: '#eaecf0',
-          300: '#d0d5dd',
-          400: '#98a2b3',
-          500: '#667085',
-          700: '#475467',
-          600: '#344054',
-          800: '#1d2939',
-          900: '#101828',
-        },
-        primary: {
-          25: '#f5f8ff',
-          50: '#eff4ff',
-          100: '#d1e0ff',
-          200: '#b2ccff',
-          300: '#84adff',
-          400: '#528bff',
-          500: '#2970ff',
-          600: '#155eef',
-          700: '#004eeb',
-          800: '#0040c1',
-          900: '#00359e',
-        },
-        blue: {
-          500: '#E1EFFE',
-        },
-        green: {
-          50: '#F3FAF7',
-          100: '#DEF7EC',
-          800: '#03543F',
-
-        },
-        yellow: {
-          100: '#FDF6B2',
-          800: '#723B13',
-        },
-        purple: {
-          50: '#F6F5FF',
-          200: '#DCD7FE',
-        },
-        indigo: {
-          25: '#F5F8FF',
-          50: '#EEF4FF',
-          100: '#E0EAFF',
-          300: '#A4BCFD',
-          400: '#8098F9',
-          600: '#444CE7',
-          800: '#2D31A6',
-        },
-        ...tailwindThemeVarDefine,
-      },
       screens: {
         'mobile': '100px',
-        // => @media (min-width: 100px) { ... }
-        'tablet': '640px', // 391
-        // => @media (min-width: 600px) { ... }
+        'tablet': '640px',
         'pc': '769px',
-        // => @media (min-width: 769px) { ... }
         '2k': '2560px',
       },
-      boxShadow: {
-        'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
-        'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)',
-        'sm-no-bottom': '0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10)',
-        'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)',
-        'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
-        'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)',
-        '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)',
-        '3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)',
-        'status-indicator-green-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-success-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
-        'status-indicator-warning-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-warning-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
-        'status-indicator-red-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
-        'status-indicator-blue-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
-        'status-indicator-gray-shadow': '0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
-      },
-      opacity: {
-        2: '0.02',
-        8: '0.08',
-      },
-      fontSize: {
-        '2xs': '0.625rem',
-      },
       backgroundColor: {
         'background-gradient-bg-fill-chat-bubble-bg-3': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-3)',
       },
@@ -162,7 +83,6 @@ const config = {
       },
     }),
   ],
-  // https://github.com/tailwindlabs/tailwindcss/discussions/5969
   corePlugins: {
     preflight: false,
   },
diff --git a/web/themes/markdown-light.css b/web/themes/markdown-light.css
deleted file mode 100644
index 7399325884..0000000000
--- a/web/themes/markdown-light.css
+++ /dev/null
@@ -1,44 +0,0 @@
-html[data-theme="light"] {
-    --color-prettylights-syntax-comment: #6e7781;
-    --color-prettylights-syntax-constant: #0550ae;
-    --color-prettylights-syntax-entity: #8250df;
-    --color-prettylights-syntax-storage-modifier-import: #24292f;
-    --color-prettylights-syntax-entity-tag: #116329;
-    --color-prettylights-syntax-keyword: #cf222e;
-    --color-prettylights-syntax-string: #0a3069;
-    --color-prettylights-syntax-variable: #953800;
-    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
-    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
-    --color-prettylights-syntax-carriage-return-bg: #cf222e;
-    --color-prettylights-syntax-string-regexp: #116329;
-    --color-prettylights-syntax-markup-list: #3b2300;
-    --color-prettylights-syntax-markup-heading: #0550ae;
-    --color-prettylights-syntax-markup-italic: #24292f;
-    --color-prettylights-syntax-markup-bold: #24292f;
-    --color-prettylights-syntax-markup-deleted-text: #82071e;
-    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
-    --color-prettylights-syntax-markup-inserted-text: #116329;
-    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
-    --color-prettylights-syntax-markup-changed-text: #953800;
-    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
-    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
-    --color-prettylights-syntax-meta-diff-range: #8250df;
-    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
-    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
-    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: transparent;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
-  }
diff --git a/web/themes/markdown-dark.css b/web/themes/markdown.css
similarity index 98%
rename from web/themes/markdown-dark.css
rename to web/themes/markdown.css
index 3dc4728490..a26f7582d5 100644
--- a/web/themes/markdown-dark.css
+++ b/web/themes/markdown.css
@@ -1,3 +1,4 @@
+html[data-theme="light"],
 html[data-theme="dark"] {
     --color-prettylights-syntax-comment: #6e7781;
     --color-prettylights-syntax-constant: #0550ae;

From e6b8cbe657abb309b2158e3d94b4b356500a0920 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:46:50 +0800
Subject: [PATCH 109/120] fix(web): include dify-ui workspace package in docker
 install filter (#35268)

---
 web/Dockerfile | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/Dockerfile b/web/Dockerfile
index 4971f86f97..8bf016c1ba 100644
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -30,9 +30,8 @@ COPY packages /app/packages
 # Use packageManager from package.json
 RUN corepack install
 
-# Install only the web workspace to keep image builds from pulling in
-# unrelated workspace dependencies such as e2e tooling.
-RUN VITE_GIT_HOOKS=0 pnpm install --filter ./web... --frozen-lockfile
+# Install workspace dependencies for the Docker build environment.
+RUN VITE_GIT_HOOKS=0 pnpm install --frozen-lockfile
 
 # build resources
 FROM base AS builder

From 538093855b3ca179e42dacc5a2e86d0b2242030b Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 15 Apr 2026 23:47:59 +0800
Subject: [PATCH 110/120] refactor(web): align Switch API with Base UI naming
 convention (#35269)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 .../[appId]/overview/tracing/config-popup.tsx |  4 +-
 web/app/components/app/annotation/index.tsx   |  4 +-
 .../app/configuration/config-vision/index.tsx |  4 +-
 .../config/agent/agent-tools/index.tsx        |  4 +-
 .../app/configuration/config/config-audio.tsx | 10 +--
 .../configuration/config/config-document.tsx  | 10 +--
 .../params-config/config-content.tsx          |  4 +-
 .../overview/__tests__/trigger-card.spec.tsx  |  6 +-
 web/app/components/app/overview/app-card.tsx  |  4 +-
 .../app/overview/settings/index.tsx           | 14 ++--
 .../components/app/overview/trigger-card.tsx  | 16 ++--
 .../new-feature-panel/feature-card.tsx        |  8 +-
 .../moderation/moderation-content.tsx         |  8 +-
 .../text-to-speech/param-config-content.tsx   |  4 +-
 web/app/components/base/param-item/index.tsx  |  6 +-
 .../base/switch/__tests__/index.spec.tsx      | 76 +++++++++----------
 .../components/base/switch/index.stories.tsx  | 56 +++++++-------
 web/app/components/base/switch/index.tsx      | 14 ++--
 .../plan-switcher/plan-range-switcher.tsx     |  6 +-
 .../custom/custom-web-app-brand/index.tsx     |  4 +-
 .../__tests__/index.spec.tsx                  |  6 +-
 .../common/retrieval-param-config/index.tsx   |  4 +-
 .../documents/components/operations.tsx       |  6 +-
 .../detail/completed/segment-card/index.tsx   |  4 +-
 .../datasets/documents/status-item/index.tsx  |  2 +-
 .../datasets/extra-info/api-access/card.tsx   |  4 +-
 .../dataset-metadata-drawer.tsx               |  4 +-
 .../settings/summary-index-setting.tsx        | 34 ++++-----
 .../explore/create-app-modal/index.tsx        |  4 +-
 .../model-parameter-modal/parameter-item.tsx  |  4 +-
 .../provider-added-card/model-list-item.tsx   |  6 +-
 .../model-load-balancing-configs.tsx          |  8 +-
 .../plugin-detail-panel/endpoint-card.tsx     |  4 +-
 .../__tests__/reasoning-config-form.spec.tsx  |  6 +-
 .../components/reasoning-config-form.tsx      |  4 +-
 .../tool-selector/components/tool-item.tsx    |  4 +-
 .../components/tools/mcp/mcp-service-card.tsx |  2 +-
 .../mcp/sections/authentication-section.tsx   |  4 +-
 .../nodes/_base/components/config-vision.tsx  |  2 +-
 .../nodes/_base/components/memory-config.tsx  |  8 +-
 .../nodes/_base/components/prompt/editor.tsx  |  4 +-
 .../_base/components/retry/retry-on-panel.tsx | 10 +--
 .../components/workflow/nodes/http/panel.tsx  |  4 +-
 .../delivery-method/email-configure-modal.tsx |  4 +-
 .../delivery-method/method-item.tsx           |  4 +-
 .../recipient/__tests__/index.spec.tsx        |  6 +-
 .../delivery-method/recipient/index.tsx       |  4 +-
 .../workflow/nodes/iteration/panel.tsx        | 10 +--
 .../search-method-option.tsx                  |  4 +-
 .../top-k-and-score-threshold.tsx             |  8 +-
 .../list-operator/__tests__/panel.spec.tsx    |  8 +-
 .../__tests__/limit-config.spec.tsx           |  8 +-
 .../list-operator/components/limit-config.tsx |  4 +-
 .../workflow/nodes/list-operator/panel.tsx    | 12 +--
 .../edit-card/required-switch.tsx             |  2 +-
 .../llm/components/panel-output-section.tsx   |  4 +-
 .../components/reasoning-format-config.tsx    |  4 +-
 .../components/extract-parameter/update.tsx   |  2 +-
 .../nodes/variable-assigner/panel.tsx         |  4 +-
 .../note-editor/toolbar/operator.tsx          |  4 +-
 .../filter/filter-switch.tsx                  |  6 +-
 web/eslint-suppressions.json                  | 45 -----------
 62 files changed, 249 insertions(+), 294 deletions(-)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
index 15b81e1ad6..3efd58ac40 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
@@ -94,8 +94,8 @@ const ConfigPopup: FC<PopupProps> = ({
   const switchContent = (
     <Switch
       className="ml-3"
-      value={enabled}
-      onChange={onStatusChange}
+      checked={enabled}
+      onCheckedChange={onStatusChange}
       disabled={providerAllNotConfigured}
     />
   )
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index b922421849..419aaba25d 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -155,9 +155,9 @@ const Annotation: FC<Props> = (props) => {
                   <div className="system-sm-medium text-text-primary">{t('name', { ns: 'appAnnotation' })}</div>
                   <Switch
                     key={controlRefreshSwitch}
-                    value={annotationConfig?.enabled ?? false}
+                    checked={annotationConfig?.enabled ?? false}
                     size="md"
-                    onChange={async (value) => {
+                    onCheckedChange={async (value) => {
                       if (value) {
                         if (isAnnotationFull) {
                           setIsShowAnnotationFullModal(true)
diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx
index aec8d808c1..e1fd88eb3f 100644
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -121,8 +121,8 @@ const ConfigVision: FC = () => {
                 <ParamConfig />
                 <div className="mr-3 ml-1 h-3.5 w-px bg-divider-regular"></div>
                 <Switch
-                  value={isImageEnabled}
-                  onChange={handleChange}
+                  checked={isImageEnabled}
+                  onCheckedChange={handleChange}
                   size="md"
                 />
               </>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 87546b94b4..4f60bc9310 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -298,10 +298,10 @@ const AgentTools: FC = () => {
                 <div className={cn(item.isDeleted && 'opacity-50')}>
                   {!item.notAuthor && (
                     <Switch
-                      value={item.isDeleted ? false : item.enabled}
+                      checked={item.isDeleted ? false : item.enabled}
                       disabled={item.isDeleted || readonly}
                       size="md"
-                      onChange={(enabled) => {
+                      onCheckedChange={(enabled) => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           (draft.agentConfig.tools[index] as any).enabled = enabled
                         })
diff --git a/web/app/components/app/configuration/config/config-audio.tsx b/web/app/components/app/configuration/config/config-audio.tsx
index 6303a00748..15a52610e6 100644
--- a/web/app/components/app/configuration/config/config-audio.tsx
+++ b/web/app/components/app/configuration/config/config-audio.tsx
@@ -49,14 +49,14 @@ const ConfigAudio: FC = () => {
     return null
 
   return (
-    <div className="mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] bg-background-section-burn p-2">
+    <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
           <Microphone01 className="h-4 w-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">
-        <div className="system-sm-semibold mr-1 text-text-secondary">{t('feature.audioUpload.title', { ns: 'appDebug' })}</div>
+        <div className="mr-1 system-sm-semibold text-text-secondary">{t('feature.audioUpload.title', { ns: 'appDebug' })}</div>
         <Tooltip
           popupContent={(
             <div className="w-[180px]">
@@ -67,10 +67,10 @@ const ConfigAudio: FC = () => {
       </div>
       {!readonly && (
         <div className="flex shrink-0 items-center">
-          <div className="ml-1 mr-3 h-3.5 w-px bg-divider-subtle"></div>
+          <div className="mr-3 ml-1 h-3.5 w-px bg-divider-subtle"></div>
           <Switch
-            value={isAudioEnabled}
-            onChange={handleChange}
+            checked={isAudioEnabled}
+            onCheckedChange={handleChange}
             size="md"
           />
         </div>
diff --git a/web/app/components/app/configuration/config/config-document.tsx b/web/app/components/app/configuration/config/config-document.tsx
index 3cfeaa2710..859fd39426 100644
--- a/web/app/components/app/configuration/config/config-document.tsx
+++ b/web/app/components/app/configuration/config/config-document.tsx
@@ -49,14 +49,14 @@ const ConfigDocument: FC = () => {
     return null
 
   return (
-    <div className="mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] bg-background-section-burn p-2">
+    <div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
       <div className="shrink-0 p-1">
         <div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
           <Document className="h-4 w-4 text-text-primary-on-surface" />
         </div>
       </div>
       <div className="flex grow items-center">
-        <div className="system-sm-semibold mr-1 text-text-secondary">{t('feature.documentUpload.title', { ns: 'appDebug' })}</div>
+        <div className="mr-1 system-sm-semibold text-text-secondary">{t('feature.documentUpload.title', { ns: 'appDebug' })}</div>
         <Tooltip
           popupContent={(
             <div className="w-[180px]">
@@ -67,10 +67,10 @@ const ConfigDocument: FC = () => {
       </div>
       {!readonly && (
         <div className="flex shrink-0 items-center">
-          <div className="ml-1 mr-3 h-3.5 w-px bg-divider-subtle"></div>
+          <div className="mr-3 ml-1 h-3.5 w-px bg-divider-subtle"></div>
           <Switch
-            value={isDocumentEnabled}
-            onChange={handleChange}
+            checked={isDocumentEnabled}
+            onCheckedChange={handleChange}
             size="md"
           />
         </div>
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index 47ece57eb0..f712d7017a 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -267,8 +267,8 @@ const ConfigContent: FC<Props> = ({
                     canManuallyToggleRerank && (
                       <Switch
                         size="md"
-                        value={showRerankModel ?? false}
-                        onChange={handleManuallyToggleRerank}
+                        checked={showRerankModel ?? false}
+                        onCheckedChange={handleManuallyToggleRerank}
                       />
                     )
                   }
diff --git a/web/app/components/app/overview/__tests__/trigger-card.spec.tsx b/web/app/components/app/overview/__tests__/trigger-card.spec.tsx
index 2a1cd6d43b..d51a23bb05 100644
--- a/web/app/components/app/overview/__tests__/trigger-card.spec.tsx
+++ b/web/app/components/app/overview/__tests__/trigger-card.spec.tsx
@@ -74,12 +74,12 @@ vi.mock('@/app/components/workflow/block-icon', () => ({
 }))
 
 vi.mock('@/app/components/base/switch', () => ({
-  default: ({ defaultValue, onChange, disabled }: { defaultValue: boolean, onChange: (v: boolean) => void, disabled: boolean }) => (
+  default: ({ checked, onCheckedChange, disabled }: { checked: boolean, onCheckedChange: (v: boolean) => void, disabled: boolean }) => (
     <button
       data-testid="switch"
-      data-checked={defaultValue ? 'true' : 'false'}
+      data-checked={checked ? 'true' : 'false'}
       data-disabled={disabled ? 'true' : 'false'}
-      onClick={() => onChange(!defaultValue)}
+      onClick={() => onCheckedChange(!checked)}
     >
       Switch
     </button>
diff --git a/web/app/components/app/overview/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index 1b2fa2a6e8..f02929c823 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -180,7 +180,7 @@ function AppCard({
 
   return (
     <div
-      className={`${isInPanel ? 'border-l-[0.5px] border-t' : 'border-[0.5px] shadow-xs'} w-full max-w-full rounded-xl border-effects-highlight ${className ?? ''} ${cardState.isMinimalState ? 'h-12' : ''}`}
+      className={`${isInPanel ? 'border-t border-l-[0.5px]' : 'border-[0.5px] shadow-xs'} w-full max-w-full rounded-xl border-effects-highlight ${className ?? ''} ${cardState.isMinimalState ? 'h-12' : ''}`}
     >
       <div className={`${customBgColor ?? 'bg-background-default'} relative rounded-xl ${triggerModeDisabled ? 'opacity-60' : ''}`}>
         {triggerModeDisabled && (
@@ -247,7 +247,7 @@ function AppCard({
               offset={24}
             >
               <div>
-                <Switch value={cardState.runningStatus} onChange={onChangeStatus} disabled={cardState.toggleDisabled} />
+                <Switch checked={cardState.runningStatus} onCheckedChange={onChangeStatus} disabled={cardState.toggleDisabled} />
               </div>
             </Tooltip>
           </div>
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index e94977ed9f..d719d035e0 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -293,8 +293,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className="flex items-center justify-between">
                 <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
-                  value={inputInfo.use_icon_as_answer_icon}
-                  onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
+                  checked={inputInfo.use_icon_as_answer_icon}
+                  onCheckedChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
                 />
               </div>
               <p className="pb-0.5 body-xs-regular text-text-tertiary">{t('answerIcon.description', { ns: 'app' })}</p>
@@ -327,7 +327,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                 />
                 <div className="flex items-center justify-between">
                   <p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
-                  <Switch value={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
+                  <Switch checked={inputInfo.chatColorThemeInverted} onCheckedChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
                 </div>
               </div>
             </div>
@@ -338,8 +338,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
               <Switch
                 disabled={!(appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT)}
-                value={inputInfo.show_workflow_steps}
-                onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
+                checked={inputInfo.show_workflow_steps}
+                onCheckedChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
               />
             </div>
             <p className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
@@ -392,8 +392,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   >
                     <Switch
                       disabled={!webappCopyrightEnabled}
-                      value={inputInfo.copyrightSwitchValue}
-                      onChange={v => setInputInfo({ ...inputInfo, copyrightSwitchValue: v })}
+                      checked={inputInfo.copyrightSwitchValue}
+                      onCheckedChange={v => setInputInfo({ ...inputInfo, copyrightSwitchValue: v })}
                     />
                   </Tooltip>
                 </div>
diff --git a/web/app/components/app/overview/trigger-card.tsx b/web/app/components/app/overview/trigger-card.tsx
index 53301a353a..aa1190cde3 100644
--- a/web/app/components/app/overview/trigger-card.tsx
+++ b/web/app/components/app/overview/trigger-card.tsx
@@ -34,12 +34,12 @@ const getTriggerIcon = (trigger: AppTrigger, triggerPlugins: any[]) => {
   const getStatusDot = () => {
     if (status === 'enabled') {
       return (
-        <div className="absolute -left-0.5 -top-0.5 h-1.5 w-1.5 rounded-xs border border-black/15 bg-green-500" />
+        <div className="absolute -top-0.5 -left-0.5 h-1.5 w-1.5 rounded-xs border border-black/15 bg-green-500" />
       )
     }
     else {
       return (
-        <div className="absolute -left-0.5 -top-0.5 h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow" />
+        <div className="absolute -top-0.5 -left-0.5 h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow" />
       )
     }
   }
@@ -141,7 +141,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
 
   if (isLoading) {
     return (
-      <div className="w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight">
+      <div className="w-full max-w-full rounded-xl border-t border-l-[0.5px] border-effects-highlight">
         <div className="rounded-xl bg-background-default">
           <div className="flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] border-divider-subtle p-3">
             <div className="h-6 w-full animate-pulse rounded-sm bg-components-input-bg-normal"></div>
@@ -152,7 +152,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
   }
 
   return (
-    <div className="w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight">
+    <div className="w-full max-w-full rounded-xl border-t border-l-[0.5px] border-effects-highlight">
       <div className="rounded-xl bg-background-default">
         <div className="flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] border-divider-subtle p-3">
           <div className="flex w-full items-center gap-3 self-stretch">
@@ -161,7 +161,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                 <TriggerAll className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className="group w-full">
-                <div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
+                <div className="min-w-0 overflow-hidden system-md-semibold break-normal text-ellipsis text-text-secondary group-hover:text-text-primary">
                   {triggerCount > 0
                     ? t('overview.triggerInfo.triggersAdded', { ns: 'appOverview', count: triggerCount })
                     : t('overview.triggerInfo.noTriggerAdded', { ns: 'appOverview' })}
@@ -179,7 +179,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                   <div className="shrink-0">
                     {getTriggerIcon(trigger, triggerPlugins || [])}
                   </div>
-                  <div className="system-sm-medium min-w-0 flex-1 truncate text-text-secondary">
+                  <div className="min-w-0 flex-1 truncate system-sm-medium text-text-secondary">
                     {trigger.title}
                   </div>
                 </div>
@@ -192,8 +192,8 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                 </div>
                 <div className="shrink-0">
                   <Switch
-                    value={trigger.status === 'enabled'}
-                    onChange={enabled => onToggleTrigger(trigger, enabled)}
+                    checked={trigger.status === 'enabled'}
+                    onCheckedChange={enabled => onToggleTrigger(trigger, enabled)}
                     disabled={!isCurrentWorkspaceEditor}
                   />
                 </div>
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index 23f140ba54..adc33011d9 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -32,13 +32,13 @@ const FeatureCard = ({
 }: Props) => {
   return (
     <div
-      className="mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-3"
+      className="mb-1 rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn p-3"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       <div className="mb-2 flex items-center gap-2">
         {icon}
-        <div className="system-sm-semibold flex grow items-center text-text-secondary">
+        <div className="flex grow items-center system-sm-semibold text-text-secondary">
           {title}
           {tooltip && (
             <Tooltip
@@ -48,10 +48,10 @@ const FeatureCard = ({
             </Tooltip>
           )}
         </div>
-        <Switch disabled={disabled} className="shrink-0" onChange={state => onChange?.(state)} value={value} />
+        <Switch disabled={disabled} className="shrink-0" onCheckedChange={state => onChange?.(state)} checked={value} />
       </div>
       {description && (
-        <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{description}</div>
+        <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{description}</div>
       )}
       {children}
     </div>
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
index 5374611330..39cc8d88db 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
@@ -38,14 +38,14 @@ const ModerationContent: FC<ModerationContentProps> = ({
             }
             <Switch
               size="lg"
-              value={config.enabled}
-              onChange={v => handleConfigChange('enabled', v)}
+              checked={config.enabled}
+              onCheckedChange={v => handleConfigChange('enabled', v)}
             />
           </div>
         </div>
         {
           config.enabled && showPreset && (
-            <div className="rounded-lg bg-components-panel-bg px-3 pb-3 pt-1">
+            <div className="rounded-lg bg-components-panel-bg px-3 pt-1 pb-3">
               <div className="flex h-8 items-center justify-between text-[13px] font-medium text-text-secondary">
                 {t('feature.moderation.modal.content.preset', { ns: 'appDebug' })}
                 <span className="text-xs font-normal text-text-tertiary">{t('feature.moderation.modal.content.supportMarkdown', { ns: 'appDebug' })}</span>
@@ -57,7 +57,7 @@ const ModerationContent: FC<ModerationContentProps> = ({
                   placeholder={t('feature.moderation.modal.content.placeholder', { ns: 'appDebug' }) || ''}
                   onChange={e => handleConfigChange('preset_response', e.target.value)}
                 />
-                <div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
+                <div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
                   <span>{(config.preset_response || '').length}</span>
                   /
                   <span className="text-text-tertiary">100</span>
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 3bc41b23cc..0b22e7c12f 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -238,8 +238,8 @@ const VoiceParamConfig = ({
         </div>
         <Switch
           className="shrink-0"
-          value={text2speech?.autoPlay === TtsAutoPlay.enabled}
-          onChange={(value: boolean) => {
+          checked={text2speech?.autoPlay === TtsAutoPlay.enabled}
+          onCheckedChange={(value: boolean) => {
             handleChange({
               autoPlay: value ? TtsAutoPlay.enabled : TtsAutoPlay.disabled,
             })
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index 56999fc6ea..fcd0517630 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -37,13 +37,13 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             <Switch
               size="md"
               className="mr-2"
-              value={enable}
-              onChange={async (val) => {
+              checked={enable}
+              onCheckedChange={async (val) => {
                 onSwitchChange?.(id, val)
               }}
             />
           )}
-          <span className="mr-1 text-text-secondary system-sm-semibold">{name}</span>
+          <span className="mr-1 system-sm-semibold text-text-secondary">{name}</span>
           {!noTooltip && (
             <Tooltip
               triggerClassName="w-4 h-4 shrink-0"
diff --git a/web/app/components/base/switch/__tests__/index.spec.tsx b/web/app/components/base/switch/__tests__/index.spec.tsx
index f29832f736..0d46095ebd 100644
--- a/web/app/components/base/switch/__tests__/index.spec.tsx
+++ b/web/app/components/base/switch/__tests__/index.spec.tsx
@@ -7,86 +7,86 @@ import { SwitchSkeleton } from '../skeleton'
 const getThumb = (switchElement: HTMLElement) => switchElement.querySelector('span')
 
 describe('Switch', () => {
-  it('should render in unchecked state when value is false', () => {
-    render(<Switch value={false} />)
+  it('should render in unchecked state when checked is false', () => {
+    render(<Switch checked={false} />)
     const switchElement = screen.getByRole('switch')
     expect(switchElement).toBeInTheDocument()
     expect(switchElement).toHaveAttribute('aria-checked', 'false')
     expect(switchElement).not.toHaveAttribute('data-checked')
   })
 
-  it('should render in checked state when value is true', () => {
-    render(<Switch value={true} />)
+  it('should render in checked state when checked is true', () => {
+    render(<Switch checked={true} />)
     const switchElement = screen.getByRole('switch')
     expect(switchElement).toHaveAttribute('aria-checked', 'true')
     expect(switchElement).toHaveAttribute('data-checked', '')
   })
 
-  it('should call onChange with next value when clicked', async () => {
-    const onChange = vi.fn()
+  it('should call onCheckedChange with next value when clicked', async () => {
+    const onCheckedChange = vi.fn()
     const user = userEvent.setup()
-    render(<Switch value={false} onChange={onChange} />)
+    render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
 
     const switchElement = screen.getByRole('switch')
 
     await user.click(switchElement)
-    expect(onChange).toHaveBeenCalledWith(true)
-    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+    expect(onCheckedChange).toHaveBeenCalledTimes(1)
 
     expect(switchElement).toHaveAttribute('aria-checked', 'false')
   })
 
-  it('should work in controlled mode with value prop', async () => {
-    const onChange = vi.fn()
+  it('should work in controlled mode with checked prop', async () => {
+    const onCheckedChange = vi.fn()
     const user = userEvent.setup()
-    const { rerender } = render(<Switch value={false} onChange={onChange} />)
+    const { rerender } = render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
     const switchElement = screen.getByRole('switch')
 
     expect(switchElement).toHaveAttribute('aria-checked', 'false')
 
     await user.click(switchElement)
-    expect(onChange).toHaveBeenCalledWith(true)
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
     expect(switchElement).toHaveAttribute('aria-checked', 'false')
 
-    rerender(<Switch value={true} onChange={onChange} />)
+    rerender(<Switch checked={true} onCheckedChange={onCheckedChange} />)
     expect(switchElement).toHaveAttribute('aria-checked', 'true')
   })
 
-  it('should not call onChange when disabled', async () => {
-    const onChange = vi.fn()
+  it('should not call onCheckedChange when disabled', async () => {
+    const onCheckedChange = vi.fn()
     const user = userEvent.setup()
-    render(<Switch value={false} disabled onChange={onChange} />)
+    render(<Switch checked={false} disabled onCheckedChange={onCheckedChange} />)
 
     const switchElement = screen.getByRole('switch')
     expect(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
     expect(switchElement).toHaveAttribute('data-disabled', '')
 
     await user.click(switchElement)
-    expect(onChange).not.toHaveBeenCalled()
+    expect(onCheckedChange).not.toHaveBeenCalled()
   })
 
   it('should apply correct size classes', () => {
-    const { rerender } = render(<Switch value={false} size="xs" />)
+    const { rerender } = render(<Switch checked={false} size="xs" />)
     const switchElement = screen.getByRole('switch')
     expect(switchElement).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
 
-    rerender(<Switch value={false} size="sm" />)
+    rerender(<Switch checked={false} size="sm" />)
     expect(switchElement).toHaveClass('h-3', 'w-5')
 
-    rerender(<Switch value={false} size="md" />)
+    rerender(<Switch checked={false} size="md" />)
     expect(switchElement).toHaveClass('h-4', 'w-7')
 
-    rerender(<Switch value={false} size="lg" />)
+    rerender(<Switch checked={false} size="lg" />)
     expect(switchElement).toHaveClass('h-5', 'w-9')
   })
 
   it('should apply custom className', () => {
-    render(<Switch value={false} className="custom-test-class" />)
+    render(<Switch checked={false} className="custom-test-class" />)
     expect(screen.getByRole('switch')).toHaveClass('custom-test-class')
   })
 
   it('should expose checked state styling hooks on the root and thumb', () => {
-    const { rerender } = render(<Switch value={false} />)
+    const { rerender } = render(<Switch checked={false} />)
     const switchElement = screen.getByRole('switch')
     const thumb = getThumb(switchElement)
 
@@ -94,13 +94,13 @@ describe('Switch', () => {
     expect(thumb).toHaveClass('data-checked:translate-x-[14px]')
     expect(thumb).not.toHaveAttribute('data-checked')
 
-    rerender(<Switch value={true} />)
+    rerender(<Switch checked={true} />)
     expect(switchElement).toHaveAttribute('data-checked', '')
     expect(thumb).toHaveAttribute('data-checked', '')
   })
 
   it('should expose disabled state styling hooks instead of relying on opacity', () => {
-    const { rerender } = render(<Switch value={false} disabled />)
+    const { rerender } = render(<Switch checked={false} disabled />)
     const switchElement = screen.getByRole('switch')
 
     expect(switchElement).toHaveClass(
@@ -109,28 +109,28 @@ describe('Switch', () => {
     )
     expect(switchElement).toHaveAttribute('data-disabled', '')
 
-    rerender(<Switch value={true} disabled />)
+    rerender(<Switch checked={true} disabled />)
     expect(switchElement).toHaveAttribute('data-disabled', '')
     expect(switchElement).toHaveAttribute('data-checked', '')
   })
 
   it('should have focus-visible ring-3 styles', () => {
-    render(<Switch value={false} />)
+    render(<Switch checked={false} />)
     const switchElement = screen.getByRole('switch')
     expect(switchElement).toHaveClass('focus-visible:ring-2')
   })
 
   it('should respect prefers-reduced-motion', () => {
-    render(<Switch value={false} />)
+    render(<Switch checked={false} />)
     const switchElement = screen.getByRole('switch')
     expect(switchElement).toHaveClass('motion-reduce:transition-none')
   })
 
   describe('loading state', () => {
     it('should render as disabled when loading', async () => {
-      const onChange = vi.fn()
+      const onCheckedChange = vi.fn()
       const user = userEvent.setup()
-      render(<Switch value={false} loading onChange={onChange} />)
+      render(<Switch checked={false} loading onCheckedChange={onCheckedChange} />)
 
       const switchElement = screen.getByRole('switch')
       expect(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
@@ -138,32 +138,32 @@ describe('Switch', () => {
       expect(switchElement).toHaveAttribute('data-disabled', '')
 
       await user.click(switchElement)
-      expect(onChange).not.toHaveBeenCalled()
+      expect(onCheckedChange).not.toHaveBeenCalled()
     })
 
     it('should show spinner icon for md and lg sizes', () => {
-      const { rerender, container } = render(<Switch value={false} loading size="md" />)
+      const { rerender, container } = render(<Switch checked={false} loading size="md" />)
       expect(container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
 
-      rerender(<Switch value={false} loading size="lg" />)
+      rerender(<Switch checked={false} loading size="lg" />)
       expect(container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
     })
 
     it('should not show spinner for xs and sm sizes', () => {
-      const { rerender, container } = render(<Switch value={false} loading size="xs" />)
+      const { rerender, container } = render(<Switch checked={false} loading size="xs" />)
       expect(container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
 
-      rerender(<Switch value={false} loading size="sm" />)
+      rerender(<Switch checked={false} loading size="sm" />)
       expect(container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
     })
 
     it('should apply disabled data-state hooks when loading', () => {
-      const { rerender } = render(<Switch value={false} loading />)
+      const { rerender } = render(<Switch checked={false} loading />)
       const switchElement = screen.getByRole('switch')
 
       expect(switchElement).toHaveAttribute('data-disabled', '')
 
-      rerender(<Switch value={true} loading />)
+      rerender(<Switch checked={true} loading />)
       expect(switchElement).toHaveAttribute('data-disabled', '')
       expect(switchElement).toHaveAttribute('data-checked', '')
     })
diff --git a/web/app/components/base/switch/index.stories.tsx b/web/app/components/base/switch/index.stories.tsx
index 141b815ab1..1b3a52dcc4 100644
--- a/web/app/components/base/switch/index.stories.tsx
+++ b/web/app/components/base/switch/index.stories.tsx
@@ -16,7 +16,7 @@ const meta = {
   },
   tags: ['autodocs'],
   args: {
-    value: false,
+    checked: false,
   },
   argTypes: {
     size: {
@@ -24,7 +24,7 @@ const meta = {
       options: ['xs', 'sm', 'md', 'lg'],
       description: 'Switch size',
     },
-    value: {
+    checked: {
       control: 'boolean',
       description: 'Checked state (controlled)',
     },
@@ -43,14 +43,14 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 const SwitchDemo = (args: any) => {
-  const [enabled, setEnabled] = useState(args.value ?? false)
+  const [enabled, setEnabled] = useState(args.checked ?? false)
 
   return (
     <div className="flex items-center justify-center gap-3">
       <Switch
         {...args}
-        value={enabled}
-        onChange={setEnabled}
+        checked={enabled}
+        onCheckedChange={setEnabled}
       />
       <span className="text-sm text-gray-700">
         {enabled ? 'On' : 'Off'}
@@ -63,7 +63,7 @@ export const Default: Story = {
   render: args => <SwitchDemo {...args} />,
   args: {
     size: 'md',
-    value: false,
+    checked: false,
     disabled: false,
   },
 }
@@ -72,7 +72,7 @@ export const DefaultOn: Story = {
   render: args => <SwitchDemo {...args} />,
   args: {
     size: 'md',
-    value: true,
+    checked: true,
     disabled: false,
   },
 }
@@ -81,7 +81,7 @@ export const DisabledOff: Story = {
   render: args => <SwitchDemo {...args} />,
   args: {
     size: 'md',
-    value: false,
+    checked: false,
     disabled: true,
   },
 }
@@ -90,7 +90,7 @@ export const DisabledOn: Story = {
   render: args => <SwitchDemo {...args} />,
   args: {
     size: 'md',
-    value: true,
+    checked: true,
     disabled: true,
   },
 }
@@ -116,20 +116,20 @@ const AllStatesDemo = () => {
               <td className="py-3 font-medium text-gray-900">{size}</td>
               <td className="py-3">
                 <div className="flex gap-2">
-                  <Switch size={size} value={false} onChange={() => {}} />
-                  <Switch size={size} value={true} onChange={() => {}} />
+                  <Switch size={size} checked={false} onCheckedChange={() => {}} />
+                  <Switch size={size} checked={true} onCheckedChange={() => {}} />
                 </div>
               </td>
               <td className="py-3">
                 <div className="flex gap-2">
-                  <Switch size={size} value={false} disabled />
-                  <Switch size={size} value={true} disabled />
+                  <Switch size={size} checked={false} disabled />
+                  <Switch size={size} checked={true} disabled />
                 </div>
               </td>
               <td className="py-3">
                 <div className="flex gap-2">
-                  <Switch size={size} value={false} loading />
-                  <Switch size={size} value={true} loading />
+                  <Switch size={size} checked={false} loading />
+                  <Switch size={size} checked={true} loading />
                 </div>
               </td>
               <td className="py-3">
@@ -165,19 +165,19 @@ const SizeComparisonDemo = () => {
   return (
     <div className="flex flex-col items-center space-y-4">
       <div className="flex items-center gap-3">
-        <Switch size="xs" value={states.xs} onChange={v => setStates({ ...states, xs: v })} />
+        <Switch size="xs" checked={states.xs} onCheckedChange={v => setStates({ ...states, xs: v })} />
         <span className="text-sm text-gray-700">Extra Small (xs) — 14×10</span>
       </div>
       <div className="flex items-center gap-3">
-        <Switch size="sm" value={states.sm} onChange={v => setStates({ ...states, sm: v })} />
+        <Switch size="sm" checked={states.sm} onCheckedChange={v => setStates({ ...states, sm: v })} />
         <span className="text-sm text-gray-700">Small (sm) — 20×12</span>
       </div>
       <div className="flex items-center gap-3">
-        <Switch size="md" value={states.md} onChange={v => setStates({ ...states, md: v })} />
+        <Switch size="md" checked={states.md} onCheckedChange={v => setStates({ ...states, md: v })} />
         <span className="text-sm text-gray-700">Regular (md) — 28×16</span>
       </div>
       <div className="flex items-center gap-3">
-        <Switch size="lg" value={states.lg} onChange={v => setStates({ ...states, lg: v })} />
+        <Switch size="lg" checked={states.lg} onCheckedChange={v => setStates({ ...states, lg: v })} />
         <span className="text-sm text-gray-700">Large (lg) — 36×20</span>
       </div>
     </div>
@@ -201,27 +201,27 @@ const LoadingDemo = () => {
       </button>
       <div className="space-y-3">
         <div className="flex items-center gap-3">
-          <Switch size="lg" value={false} loading={loading} />
+          <Switch size="lg" checked={false} loading={loading} />
           <span className="text-sm text-gray-700">Large unchecked</span>
         </div>
         <div className="flex items-center gap-3">
-          <Switch size="lg" value={true} loading={loading} />
+          <Switch size="lg" checked={true} loading={loading} />
           <span className="text-sm text-gray-700">Large checked</span>
         </div>
         <div className="flex items-center gap-3">
-          <Switch size="md" value={false} loading={loading} />
+          <Switch size="md" checked={false} loading={loading} />
           <span className="text-sm text-gray-700">Regular unchecked</span>
         </div>
         <div className="flex items-center gap-3">
-          <Switch size="md" value={true} loading={loading} />
+          <Switch size="md" checked={true} loading={loading} />
           <span className="text-sm text-gray-700">Regular checked</span>
         </div>
         <div className="flex items-center gap-3">
-          <Switch size="sm" value={false} loading={loading} />
+          <Switch size="sm" checked={false} loading={loading} />
           <span className="text-sm text-gray-700">Small (no spinner)</span>
         </div>
         <div className="flex items-center gap-3">
-          <Switch size="xs" value={false} loading={loading} />
+          <Switch size="xs" checked={false} loading={loading} />
           <span className="text-sm text-gray-700">Extra Small (no spinner)</span>
         </div>
       </div>
@@ -280,9 +280,9 @@ const MutationLoadingDemo = () => {
         </div>
         <Switch
           size="lg"
-          value={enabled}
+          checked={enabled}
           loading={isPending}
-          onChange={handleChange}
+          onCheckedChange={handleChange}
           aria-label="Enable Auto Retry"
         />
       </div>
@@ -348,7 +348,7 @@ export const Playground: Story = {
   render: args => <SwitchDemo {...args} />,
   args: {
     size: 'md',
-    value: false,
+    checked: false,
     disabled: false,
     loading: false,
   },
diff --git a/web/app/components/base/switch/index.tsx b/web/app/components/base/switch/index.tsx
index 80f7c23817..942a2291d0 100644
--- a/web/app/components/base/switch/index.tsx
+++ b/web/app/components/base/switch/index.tsx
@@ -62,8 +62,8 @@ const spinnerSizeConfig: Partial<Record<SwitchSize, {
 }
 
 type SwitchProps = {
-  'value': boolean
-  'onChange'?: (value: boolean) => void
+  'checked': boolean
+  'onCheckedChange'?: (checked: boolean) => void
   'size'?: SwitchSize
   'disabled'?: boolean
   'loading'?: boolean
@@ -75,8 +75,8 @@ type SwitchProps = {
 
 const Switch = ({
   ref,
-  value,
-  onChange,
+  checked,
+  onCheckedChange,
   size = 'md',
   disabled = false,
   loading = false,
@@ -93,8 +93,8 @@ const Switch = ({
   return (
     <BaseSwitch.Root
       ref={ref}
-      checked={value}
-      onCheckedChange={checked => onChange?.(checked)}
+      checked={checked}
+      onCheckedChange={value => onCheckedChange?.(value)}
       disabled={isDisabled}
       aria-busy={loading || undefined}
       aria-label={ariaLabel}
@@ -111,7 +111,7 @@ const Switch = ({
               className={cn(
                 'absolute top-1/2 -translate-x-1/2 -translate-y-1/2',
                 spinner.icon,
-                value ? spinner.checkedPosition : spinner.uncheckedPosition,
+                checked ? spinner.checkedPosition : spinner.uncheckedPosition,
               )}
               aria-hidden="true"
             >
diff --git a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
index b2a1ae3bf5..55700385d9 100644
--- a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
@@ -24,12 +24,12 @@ const PlanRangeSwitcher: FC<PlanRangeSwitcherProps> = ({
     <div className="flex items-center justify-end gap-x-3 pr-5">
       <Switch
         size="lg"
-        value={value === PlanRange.yearly}
-        onChange={(v) => {
+        checked={value === PlanRange.yearly}
+        onCheckedChange={(v) => {
           onChange(v ? PlanRange.yearly : PlanRange.monthly)
         }}
       />
-      <span className="text-text-tertiary system-md-regular">
+      <span className="system-md-regular text-text-tertiary">
         {t('plansCommon.annualBilling', { ns: 'billing', percent: 17 })}
       </span>
     </div>
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index fecc630422..5dbb76f8c6 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -35,9 +35,9 @@ const CustomWebAppBrand = () => {
         {t('webapp.removeBrand', { ns: 'custom' })}
         <Switch
           size="lg"
-          value={webappBrandRemoved ?? false}
+          checked={webappBrandRemoved ?? false}
           disabled={isSandbox || !isCurrentWorkspaceManager}
-          onChange={handleSwitch}
+          onCheckedChange={handleSwitch}
         />
       </div>
       <div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>
diff --git a/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx b/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
index db6086ca34..f5c85b518e 100644
--- a/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
@@ -123,11 +123,11 @@ vi.mock('@/app/components/base/radio-card', () => ({
 }))
 
 vi.mock('@/app/components/base/switch', () => ({
-  default: ({ value, onChange }: { value: boolean, onChange?: (v: boolean) => void }) => (
+  default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange?: (v: boolean) => void }) => (
     <button
       data-testid="rerank-switch"
-      data-checked={value}
-      onClick={() => onChange?.(!value)}
+      data-checked={checked}
+      onClick={() => onCheckedChange?.(!checked)}
     >
       Switch
     </button>
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index c0cfe186a1..5fbe1db5b1 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -121,8 +121,8 @@ const RetrievalParamConfig: FC<Props> = ({
             {canToggleRerankModalEnable && (
               <Switch
                 size="md"
-                value={value.reranking_enable}
-                onChange={handleToggleRerankEnable}
+                checked={value.reranking_enable}
+                onCheckedChange={handleToggleRerankEnable}
               />
             )}
             <div className="flex items-center">
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index f585ab4654..e2bd6f7c92 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -154,18 +154,18 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
   }, [datasetId, downloadDocument, id, isDownloading, name, t])
   return (
     <div className="flex items-center" onClick={e => e.stopPropagation()}>
-      {isListScene && !embeddingAvailable && (<Switch value={false} onChange={noop} disabled={true} size="md" />)}
+      {isListScene && !embeddingAvailable && (<Switch checked={false} onCheckedChange={noop} disabled={true} size="md" />)}
       {isListScene && embeddingAvailable && (
         <>
           {archived
             ? (
                 <Tooltip popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })} popupClassName="!font-semibold">
                   <div>
-                    <Switch value={false} onChange={noop} disabled={true} size="md" />
+                    <Switch checked={false} onCheckedChange={noop} disabled={true} size="md" />
                   </div>
                 </Tooltip>
               )
-            : <Switch value={enabled} onChange={v => handleSwitch(v ? 'enable' : 'disable')} size="md" />}
+            : <Switch checked={enabled} onCheckedChange={v => handleSwitch(v ? 'enable' : 'disable')} size="md" />}
           <Divider className="!mr-2 !ml-4 !h-3" type="vertical" />
         </>
       )}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index 31d894f109..c39c8ba10f 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -223,8 +223,8 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                         <Switch
                           size="md"
                           disabled={archived || detail?.status !== 'completed'}
-                          value={enabled}
-                          onChange={async (val) => {
+                          checked={enabled}
+                          onCheckedChange={async (val) => {
                             await onChangeSwitch?.(val, id)
                           }}
                         />
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index aac7d1e4cf..362db58a90 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -85,7 +85,7 @@ const StatusItem = ({ status, reverse = false, scene = 'list', textCls = '', err
       {scene === 'detail' && (
         <div className="ml-1.5 flex items-center justify-between">
           <Tooltip popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })} popupClassName="text-text-secondary system-xs-medium" disabled={!archived}>
-            <Switch value={archived ? false : enabled} onChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')} disabled={embedding || archived} size="md" />
+            <Switch checked={archived ? false : enabled} onCheckedChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')} disabled={embedding || archived} size="md" />
           </Tooltip>
         </div>
       )}
diff --git a/web/app/components/datasets/extra-info/api-access/card.tsx b/web/app/components/datasets/extra-info/api-access/card.tsx
index 9679efefda..0229922848 100644
--- a/web/app/components/datasets/extra-info/api-access/card.tsx
+++ b/web/app/components/datasets/extra-info/api-access/card.tsx
@@ -60,8 +60,8 @@ const Card = ({
               </div>
             </div>
             <Switch
-              value={apiEnabled}
-              onChange={onToggle}
+              checked={apiEnabled}
+              onCheckedChange={onToggle}
               disabled={!isCurrentWorkspaceManager}
             />
           </div>
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 0b0fc20ffe..421babfb91 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -211,8 +211,8 @@ const DatasetMetadataDrawer: FC<Props> = ({
 
         <div className="mt-3 flex h-6 items-center">
           <Switch
-            value={isBuiltInEnabled}
-            onChange={onIsBuiltInEnabledChange}
+            checked={isBuiltInEnabled}
+            onCheckedChange={onIsBuiltInEnabledChange}
           />
           <div className="mr-0.5 ml-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={<div className="max-w-[100px]">{t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}</div>} />
diff --git a/web/app/components/datasets/settings/summary-index-setting.tsx b/web/app/components/datasets/settings/summary-index-setting.tsx
index 8ddae1d1fc..0a25f820c5 100644
--- a/web/app/components/datasets/settings/summary-index-setting.tsx
+++ b/web/app/components/datasets/settings/summary-index-setting.tsx
@@ -63,7 +63,7 @@ const SummaryIndexSetting = ({
     return (
       <div>
         <div className="flex h-6 items-center justify-between">
-          <div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
+          <div className="flex items-center system-sm-semibold-uppercase text-text-secondary">
             {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
             <Tooltip
               triggerClassName="ml-1 h-4 w-4 shrink-0"
@@ -72,15 +72,15 @@ const SummaryIndexSetting = ({
             </Tooltip>
           </div>
           <Switch
-            value={summaryIndexSetting?.enable ?? false}
-            onChange={handleSummaryIndexEnableChange}
+            checked={summaryIndexSetting?.enable ?? false}
+            onCheckedChange={handleSummaryIndexEnableChange}
             size="md"
           />
         </div>
         {
           summaryIndexSetting?.enable && (
             <div>
-              <div className="mb-1.5 mt-2 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="mt-2 mb-1.5 flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
                 {t('form.summaryModel', { ns: 'datasetSettings' })}
               </div>
               <ModelSelector
@@ -90,7 +90,7 @@ const SummaryIndexSetting = ({
                 readonly={readonly}
                 showDeprecatedWarnIcon
               />
-              <div className="mt-3 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="mt-3 flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
                 {t('form.summaryInstructions', { ns: 'datasetSettings' })}
               </div>
               <Textarea
@@ -111,23 +111,23 @@ const SummaryIndexSetting = ({
       <div className="space-y-4">
         <div className="flex gap-x-1">
           <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-            <div className="text-text-secondary system-sm-semibold">
+            <div className="system-sm-semibold text-text-secondary">
               {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
             </div>
           </div>
           <div className="py-1.5">
-            <div className="flex items-center text-text-secondary system-sm-semibold">
+            <div className="flex items-center system-sm-semibold text-text-secondary">
               <Switch
                 className="mr-2"
-                value={summaryIndexSetting?.enable ?? false}
-                onChange={handleSummaryIndexEnableChange}
+                checked={summaryIndexSetting?.enable ?? false}
+                onCheckedChange={handleSummaryIndexEnableChange}
                 size="md"
               />
               {
                 summaryIndexSetting?.enable ? t('list.status.enabled', { ns: 'datasetDocuments' }) : t('list.status.disabled', { ns: 'datasetDocuments' })
               }
             </div>
-            <div className="mt-2 text-text-tertiary system-sm-regular">
+            <div className="mt-2 system-sm-regular text-text-tertiary">
               {
                 summaryIndexSetting?.enable && t('form.summaryAutoGenTip', { ns: 'datasetSettings' })
               }
@@ -142,7 +142,7 @@ const SummaryIndexSetting = ({
             <>
               <div className="flex gap-x-1">
                 <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="text-text-tertiary system-sm-medium">
+                  <div className="system-sm-medium text-text-tertiary">
                     {t('form.summaryModel', { ns: 'datasetSettings' })}
                   </div>
                 </div>
@@ -159,7 +159,7 @@ const SummaryIndexSetting = ({
               </div>
               <div className="flex">
                 <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="text-text-tertiary system-sm-medium">
+                  <div className="system-sm-medium text-text-tertiary">
                     {t('form.summaryInstructions', { ns: 'datasetSettings' })}
                   </div>
                 </div>
@@ -184,11 +184,11 @@ const SummaryIndexSetting = ({
       <div className="flex h-6 items-center">
         <Switch
           className="mr-2"
-          value={summaryIndexSetting?.enable ?? false}
-          onChange={handleSummaryIndexEnableChange}
+          checked={summaryIndexSetting?.enable ?? false}
+          onCheckedChange={handleSummaryIndexEnableChange}
           size="md"
         />
-        <div className="text-text-secondary system-sm-semibold">
+        <div className="system-sm-semibold text-text-secondary">
           {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
         </div>
       </div>
@@ -196,7 +196,7 @@ const SummaryIndexSetting = ({
         summaryIndexSetting?.enable && (
           <>
             <div>
-              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
+              <div className="mb-1.5 flex h-6 items-center system-sm-medium text-text-secondary">
                 {t('form.summaryModel', { ns: 'datasetSettings' })}
               </div>
               <ModelSelector
@@ -209,7 +209,7 @@ const SummaryIndexSetting = ({
               />
             </div>
             <div>
-              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
+              <div className="mb-1.5 flex h-6 items-center system-sm-medium text-text-secondary">
                 {t('form.summaryInstructions', { ns: 'datasetSettings' })}
               </div>
               <Textarea
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 8f12409442..ebfb562b0c 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -166,8 +166,8 @@ const CreateAppModal = ({
               <div className="flex items-center justify-between">
                 <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
-                  value={useIconAsAnswerIcon}
-                  onChange={v => setUseIconAsAnswerIcon(v)}
+                  checked={useIconAsAnswerIcon}
+                  onCheckedChange={v => setUseIconAsAnswerIcon(v)}
                 />
               </div>
               <p className="body-xs-regular text-text-tertiary">{t('answerIcon.descriptionInExplore', { ns: 'app' })}</p>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
index 78c7b68d46..7732ba5a8c 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -331,8 +331,8 @@ function ParameterItem({
             !parameterRule.required && parameterRule.name !== 'stop' && (
               <div className="mr-2 w-7">
                 <Switch
-                  value={!isNullOrUndefined(value)}
-                  onChange={handleSwitch}
+                  checked={!isNullOrUndefined(value)}
+                  onCheckedChange={handleSwitch}
                   size="md"
                 />
               </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 4604faa9dd..d8f0b5928c 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -108,16 +108,16 @@ const ModelListItem = ({ model, provider, isConfigurable, onChange, onModifyLoad
                   }
                   offset={{ mainAxis: 4 }}
                 >
-                  <Switch value={false} disabled size="md" />
+                  <Switch checked={false} disabled size="md" />
                 </Tooltip>
               )
             : (isCurrentWorkspaceManager && (
                 <Switch
                   className="ml-2"
-                  value={model?.status === ModelStatusEnum.active}
+                  checked={model?.status === ModelStatusEnum.active}
                   disabled={![ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status)}
                   size="md"
-                  onChange={onEnablingStateChange}
+                  onCheckedChange={onEnablingStateChange}
                 />
               ))
         }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 020abfdf96..7fd1618d64 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -163,11 +163,11 @@ const ModelLoadBalancingConfigs = ({
           {
             withSwitch && (
               <Switch
-                value={Boolean(draftConfig.enabled)}
+                checked={Boolean(draftConfig.enabled)}
                 size="lg"
                 className="ml-3 justify-self-end"
                 disabled={!modelLoadBalancingEnabled && !draftConfig.enabled}
-                onChange={value => toggleModalBalancing(value)}
+                onCheckedChange={value => toggleModalBalancing(value)}
                 data-testid="load-balancing-switch-main"
               />
             )
@@ -225,10 +225,10 @@ const ModelLoadBalancingConfigs = ({
                         <>
                           <span className="mr-2 h-3 border-r border-r-divider-subtle" />
                           <Switch
-                            value={credential?.not_allowed_to_use ? false : Boolean(config.enabled)}
+                            checked={credential?.not_allowed_to_use ? false : Boolean(config.enabled)}
                             size="md"
                             className="justify-self-end"
-                            onChange={value => toggleConfigEntryEnabled(index, value)}
+                            onCheckedChange={value => toggleConfigEntryEnabled(index, value)}
                             disabled={credential?.not_allowed_to_use}
                             data-testid={`load-balancing-switch-${config.id || index}`}
                           />
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index c0e8e56144..a8729763ec 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -196,8 +196,8 @@ const EndpointCard = ({
         )}
         <Switch
           className="ml-3"
-          value={active}
-          onChange={handleSwitch}
+          checked={active}
+          onCheckedChange={handleSwitch}
           size="sm"
         />
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
index f64d396d07..b4bfd22405 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
@@ -31,9 +31,9 @@ vi.mock('@/app/components/base/select', () => ({
 }))
 
 vi.mock('@/app/components/base/switch', () => ({
-  default: ({ value, onChange }: { value: boolean, onChange: (value: boolean) => void }) => (
-    <button data-testid="auto-switch" onClick={() => onChange(!value)}>
-      {value ? 'on' : 'off'}
+  default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (checked: boolean) => void }) => (
+    <button data-testid="auto-switch" onClick={() => onCheckedChange(!checked)}>
+      {checked ? 'on' : 'off'}
     </button>
   ),
 }))
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 c651405009..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
@@ -191,8 +191,8 @@ const ReasoningConfigForm: React.FC<Props> = ({
             <span className="system-xs-medium text-text-secondary">{t('detailPanel.toolSelector.auto', { ns: 'plugin' })}</span>
             <Switch
               size="xs"
-              value={!!auto}
-              onChange={val => handleAutomatic(variable, val, type)}
+              checked={!!auto}
+              onCheckedChange={val => handleAutomatic(variable, val, type)}
             />
           </div>
         </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index 52ef1819e2..3ba30790af 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -120,8 +120,8 @@ const ToolItem = ({
         <div className="mr-1" onClick={e => e.stopPropagation()}>
           <Switch
             size="md"
-            value={switchValue ?? false}
-            onChange={onSwitchChange}
+            checked={switchValue ?? false}
+            onCheckedChange={onSwitchChange}
           />
         </div>
       )}
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 51b84f9461..877fcd1ce7 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -258,7 +258,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
                 offset={24}
               >
                 <div>
-                  <Switch value={activated} onChange={onChangeStatus} disabled={toggleDisabled} />
+                  <Switch checked={activated} onCheckedChange={onChangeStatus} disabled={toggleDisabled} />
                 </div>
               </Tooltip>
             </div>
diff --git a/web/app/components/tools/mcp/sections/authentication-section.tsx b/web/app/components/tools/mcp/sections/authentication-section.tsx
index d2cb28b003..157ed66b79 100644
--- a/web/app/components/tools/mcp/sections/authentication-section.tsx
+++ b/web/app/components/tools/mcp/sections/authentication-section.tsx
@@ -32,8 +32,8 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
         <div className="mb-1 flex h-6 items-center">
           <Switch
             className="mr-2"
-            value={isDynamicRegistration}
-            onChange={onDynamicRegistrationChange}
+            checked={isDynamicRegistration}
+            onCheckedChange={onDynamicRegistrationChange}
           />
           <span className="system-sm-medium text-text-secondary">{t('mcp.modal.useDynamicClientRegistration', { ns: 'tools' })}</span>
         </div>
diff --git a/web/app/components/workflow/nodes/_base/components/config-vision.tsx b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
index 65a179fddd..109650cf51 100644
--- a/web/app/components/workflow/nodes/_base/components/config-vision.tsx
+++ b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
@@ -65,7 +65,7 @@ const ConfigVision: FC<Props> = ({
           popupContent={t('vision.onlySupportVisionModelTip', { ns: 'appDebug' })!}
           disabled={isVisionModel}
         >
-          <Switch disabled={readOnly || !isVisionModel} size="md" value={!isVisionModel ? false : enabled} onChange={onEnabledChange} />
+          <Switch disabled={readOnly || !isVisionModel} size="md" checked={!isVisionModel ? false : enabled} onCheckedChange={onEnabledChange} />
         </Tooltip>
       )}
     >
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index 02d3550626..15254ad4f4 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -136,8 +136,8 @@ const MemoryConfig: FC<Props> = ({
         tooltip={t(`${i18nPrefix}.memoryTip`, { ns: 'workflow' })!}
         operations={(
           <Switch
-            value={!!payload}
-            onChange={handleMemoryEnabledChange}
+            checked={!!payload}
+            onCheckedChange={handleMemoryEnabledChange}
             size="md"
             disabled={readonly}
           />
@@ -149,8 +149,8 @@ const MemoryConfig: FC<Props> = ({
             <div className="flex justify-between">
               <div className="flex h-8 items-center space-x-2">
                 <Switch
-                  value={payload?.window?.enabled}
-                  onChange={handleWindowEnabledChange}
+                  checked={payload?.window?.enabled}
+                  onCheckedChange={handleWindowEnabledChange}
                   size="md"
                   disabled={readonly}
                 />
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index e85c40c19e..bf153b273e 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -196,8 +196,8 @@ const Editor: FC<Props> = ({
                       <Jinja className="h-3 w-6 text-text-quaternary" />
                       <Switch
                         size="sm"
-                        value={editionType === EditionType.jinja2}
-                        onChange={(checked) => {
+                        checked={editionType === EditionType.jinja2}
+                        onCheckedChange={(checked) => {
                           onEditionTypeChange?.(checked ? EditionType.jinja2 : EditionType.basic)
                         }}
                       />
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
index f96d54bcc4..c80c69a757 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
@@ -55,18 +55,18 @@ const RetryOnPanel = ({
       <div className="pt-2">
         <div className="flex h-10 items-center justify-between px-4 py-2">
           <div className="flex items-center">
-            <div className="mr-0.5 text-text-secondary system-sm-semibold-uppercase">{t('nodes.common.retry.retryOnFailure', { ns: 'workflow' })}</div>
+            <div className="mr-0.5 system-sm-semibold-uppercase text-text-secondary">{t('nodes.common.retry.retryOnFailure', { ns: 'workflow' })}</div>
           </div>
           <Switch
-            value={retry_config?.retry_enabled ?? false}
-            onChange={v => handleRetryEnabledChange(v)}
+            checked={retry_config?.retry_enabled ?? false}
+            onCheckedChange={v => handleRetryEnabledChange(v)}
           />
         </div>
         {
           retry_config?.retry_enabled && (
             <div className="px-4 pb-2">
               <div className="mb-1 flex w-full items-center">
-                <div className="mr-2 grow text-text-secondary system-xs-medium-uppercase">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
+                <div className="mr-2 grow system-xs-medium-uppercase text-text-secondary">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
                 <Slider
                   className="mr-3 w-[108px]"
                   value={retry_config?.max_retries || 3}
@@ -88,7 +88,7 @@ const RetryOnPanel = ({
                 />
               </div>
               <div className="flex items-center">
-                <div className="mr-2 grow text-text-secondary system-xs-medium-uppercase">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
+                <div className="mr-2 grow system-xs-medium-uppercase text-text-secondary">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
                 <Slider
                   className="mr-3 w-[108px]"
                   value={retry_config?.retry_interval || 1000}
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 905e5212af..7eb8ef897e 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -131,8 +131,8 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           tooltip={t(`${i18nPrefix}.verifySSL.warningTooltip`, { ns: 'workflow' })}
           operations={(
             <Switch
-              value={!!inputs.ssl_verify}
-              onChange={handleSSLVerifyChange}
+              checked={!!inputs.ssl_verify}
+              onCheckedChange={handleSSLVerifyChange}
               size="md"
               disabled={readOnly}
             />
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
index 0d8f51868a..1d77248037 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
@@ -140,8 +140,8 @@ const EmailConfigureModal = ({
             </div>
           </div>
           <Switch
-            value={debugMode}
-            onChange={checked => setDebugMode(checked)}
+            checked={debugMode}
+            onCheckedChange={checked => setDebugMode(checked)}
           />
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
index c1ffe2976b..eae2e293e1 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -160,8 +160,8 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
           )}
           {(method.config || method.type === DeliveryMethodType.WebApp) && (
             <Switch
-              value={method.enabled}
-              onChange={handleEnableStatusChange}
+              checked={method.enabled}
+              onCheckedChange={handleEnableStatusChange}
               disabled={readonly}
             />
           )}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
index 96cfc10c23..7fe768781b 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
@@ -20,10 +20,10 @@ vi.mock('@/service/use-common', () => ({
 vi.mock('@/app/components/base/switch', () => ({
   __esModule: true,
   default: (props: {
-    value: boolean
-    onChange: (value: boolean) => void
+    checked: boolean
+    onCheckedChange: (value: boolean) => void
   }) => (
-    <button type="button" onClick={() => props.onChange(!props.value)}>
+    <button type="button" onClick={() => props.onCheckedChange(!props.checked)}>
       toggle-workspace
     </button>
   ),
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
index e69b2ba245..36483d33d6 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
@@ -91,8 +91,8 @@ const Recipient = ({
         </div>
         <div className={cn('grow system-sm-medium text-text-secondary')}>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.allMembers`, { workspaceName: currentWorkspace.name.replace(/'/g, '’'), ns: 'workflow' })}</div>
         <Switch
-          value={data.whole_workspace}
-          onChange={checked => onChange({ ...data, whole_workspace: checked })}
+          checked={data.whole_workspace}
+          onCheckedChange={checked => onChange({ ...data, whole_workspace: checked })}
         />
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 3d927c3603..7128c2d4b4 100644
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@@ -51,13 +51,13 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
   } = useConfig(id, data)
 
   return (
-    <div className="pb-2 pt-2">
+    <div className="pt-2 pb-2">
       <div className="space-y-4 px-4 pb-4">
         <Field
           title={t(`${i18nPrefix}.input`, { ns: 'workflow' })}
           required
           operations={(
-            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary system-2xs-medium-uppercase">Array</div>
+            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">Array</div>
           )}
         >
           <VarReferencePicker
@@ -76,7 +76,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
           title={t(`${i18nPrefix}.output`, { ns: 'workflow' })}
           required
           operations={(
-            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary system-2xs-medium-uppercase">Array</div>
+            <div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">Array</div>
           )}
         >
           <VarReferencePicker
@@ -92,7 +92,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
       </div>
       <div className="px-4 pb-2">
         <Field title={t(`${i18nPrefix}.parallelMode`, { ns: 'workflow' })} tooltip={<div className="w-[230px]">{t(`${i18nPrefix}.parallelPanelDesc`, { ns: 'workflow' })}</div>} inline>
-          <Switch value={inputs.is_parallel} onChange={changeParallel} />
+          <Switch checked={inputs.is_parallel} onCheckedChange={changeParallel} />
         </Field>
       </div>
       {
@@ -131,7 +131,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
           tooltip={<div className="w-[230px]">{t(`${i18nPrefix}.flattenOutputDesc`, { ns: 'workflow' })}</div>}
           inline
         >
-          <Switch value={inputs.flatten_output} onChange={changeFlattenOutput} />
+          <Switch checked={inputs.flatten_output} onCheckedChange={changeFlattenOutput} />
         </Field>
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
index 52b8debd45..fe1d863944 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
@@ -169,8 +169,8 @@ const SearchMethodOption = ({
                   <div className="mb-1 flex items-center system-sm-semibold text-text-secondary">
                     <Switch
                       className="mr-1"
-                      value={rerankingModelEnabled ?? false}
-                      onChange={onRerankingModelEnabledChange}
+                      checked={rerankingModelEnabled ?? false}
+                      onCheckedChange={onRerankingModelEnabledChange}
                       disabled={readonly}
                     />
                     {t('modelProvider.rerankModel.key', { ns: 'common' })}
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
index a94d95024d..08ead860c7 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
@@ -57,7 +57,7 @@ const TopKAndScoreThreshold = ({
   return (
     <div className="grid grid-cols-2 gap-4">
       <div>
-        <div className="mb-0.5 flex h-6 items-center text-text-secondary system-xs-medium">
+        <div className="mb-0.5 flex h-6 items-center system-xs-medium text-text-secondary">
           {t('datasetConfig.top_k', { ns: 'appDebug' })}
           <Tooltip
             triggerClassName="ml-0.5 shrink-0 w-3.5 h-3.5"
@@ -87,11 +87,11 @@ const TopKAndScoreThreshold = ({
             <div className="mb-0.5 flex h-6 items-center">
               <Switch
                 className="mr-2"
-                value={isScoreThresholdEnabled ?? false}
-                onChange={onScoreThresholdEnabledChange}
+                checked={isScoreThresholdEnabled ?? false}
+                onCheckedChange={onScoreThresholdEnabledChange}
                 disabled={readonly}
               />
-              <div className="grow truncate text-text-secondary system-sm-medium">
+              <div className="grow truncate system-sm-medium text-text-secondary">
                 {t('datasetConfig.score_threshold', { ns: 'appDebug' })}
               </div>
               <Tooltip
diff --git a/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
index 04cc2522d1..9e5147bc92 100644
--- a/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
@@ -25,18 +25,18 @@ vi.mock('../use-config', () => ({
 vi.mock('@/app/components/base/switch', () => ({
   __esModule: true,
   default: (props: {
-    value?: boolean
+    checked?: boolean
     disabled?: boolean
-    onChange: (value: boolean) => void
+    onCheckedChange: (value: boolean) => void
   }) => {
     mockSwitch(props)
     return (
       <button
         type="button"
         role="switch"
-        aria-checked={props.value}
+        aria-checked={props.checked}
         disabled={props.disabled}
-        onClick={() => props.onChange(!props.value)}
+        onClick={() => props.onCheckedChange(!props.checked)}
       >
         {props.disabled ? 'switch:disabled' : 'switch:enabled'}
       </button>
diff --git a/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx b/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
index 0e236e7a8c..0e502381c8 100644
--- a/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
@@ -3,8 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import LimitConfig from '../limit-config'
 
 type MockSwitchProps = {
-  value: boolean
-  onChange: (value: boolean) => void
+  checked: boolean
+  onCheckedChange: (value: boolean) => void
   disabled?: boolean
 }
 
@@ -25,9 +25,9 @@ vi.mock('@/app/components/base/switch', () => ({
     return (
       <button
         type="button"
-        onClick={() => !props.disabled && props.onChange(!props.value)}
+        onClick={() => !props.disabled && props.onCheckedChange(!props.checked)}
       >
-        {`switch:${props.value}`}
+        {`switch:${props.checked}`}
       </button>
     )
   },
diff --git a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
index 210f9dd911..564f969bb4 100644
--- a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
@@ -56,8 +56,8 @@ const LimitConfig: FC<Props> = ({
         title={t(`${i18nPrefix}.limit`, { ns: 'workflow' })}
         operations={(
           <Switch
-            value={payload.enabled}
-            onChange={handleLimitEnabledChange}
+            checked={payload.enabled}
+            onCheckedChange={handleLimitEnabledChange}
             size="md"
             disabled={readonly}
           />
diff --git a/web/app/components/workflow/nodes/list-operator/panel.tsx b/web/app/components/workflow/nodes/list-operator/panel.tsx
index e9adff8047..e308191e67 100644
--- a/web/app/components/workflow/nodes/list-operator/panel.tsx
+++ b/web/app/components/workflow/nodes/list-operator/panel.tsx
@@ -65,8 +65,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           title={t(`${i18nPrefix}.filterCondition`, { ns: 'workflow' })}
           operations={(
             <Switch
-              value={inputs.filter_by?.enabled}
-              onChange={handleFilterEnabledChange}
+              checked={inputs.filter_by?.enabled}
+              onCheckedChange={handleFilterEnabledChange}
               size="md"
               disabled={readOnly}
             />
@@ -90,8 +90,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           title={t(`${i18nPrefix}.extractsCondition`, { ns: 'workflow' })}
           operations={(
             <Switch
-              value={inputs.extract_by?.enabled}
-              onChange={handleExtractsEnabledChange}
+              checked={inputs.extract_by?.enabled}
+              onCheckedChange={handleExtractsEnabledChange}
               size="md"
               disabled={readOnly}
             />
@@ -123,8 +123,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           title={t(`${i18nPrefix}.orderBy`, { ns: 'workflow' })}
           operations={(
             <Switch
-              value={inputs.order_by?.enabled}
-              onChange={handleOrderByEnabledChange}
+              checked={inputs.order_by?.enabled}
+              onCheckedChange={handleOrderByEnabledChange}
               size="md"
               disabled={readOnly}
             />
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
index 712ce8f62e..9d5a5c1fed 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
@@ -17,7 +17,7 @@ const RequiredSwitch: FC<RequiredSwitchProps> = ({
   return (
     <div className="flex items-center gap-x-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter px-1.5 py-1">
       <span className="system-2xs-medium-uppercase text-text-secondary">{t('nodes.llm.jsonSchema.required', { ns: 'workflow' })}</span>
-      <Switch size="xs" value={defaultValue} onChange={toggleRequired} />
+      <Switch size="xs" checked={defaultValue} onCheckedChange={toggleRequired} />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
index 64aeb2417c..a70f035728 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
@@ -74,8 +74,8 @@ const PanelOutputSection: FC<Props> = ({
             </Tooltip>
             <Switch
               className="ml-2"
-              value={!!inputs.structured_output_enabled}
-              onChange={handleStructureOutputEnableChange}
+              checked={!!inputs.structured_output_enabled}
+              onCheckedChange={handleStructureOutputEnableChange}
               size="md"
               disabled={readOnly}
             />
diff --git a/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx b/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
index 7e6ddd0282..c9177e2d64 100644
--- a/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
@@ -24,8 +24,8 @@ const ReasoningFormatConfig: FC<ReasoningFormatConfigProps> = ({
       operations={(
         // ON = separated, OFF = tagged
         <Switch
-          value={value === 'separated'}
-          onChange={enabled => onChange(enabled ? 'separated' : 'tagged')}
+          checked={value === 'separated'}
+          onCheckedChange={enabled => onChange(enabled ? 'separated' : 'tagged')}
           size="md"
           disabled={readonly}
           key={value}
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 6de836be22..d3a3a39b60 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -169,7 +169,7 @@ const AddExtractParameter: FC<Props> = ({
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}>
                 <>
                   <div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
-                  <Switch size="lg" value={param.required ?? false} onChange={handleParamChange('required')} />
+                  <Switch size="lg" checked={param.required ?? false} onCheckedChange={handleParamChange('required')} />
                 </>
               </Field>
             </div>
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index 2e88b3149e..922db3dcc3 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -90,8 +90,8 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
           tooltip={t(`${i18nPrefix}.aggregationGroupTip`, { ns: 'workflow' })!}
           operations={(
             <Switch
-              value={isEnableGroup}
-              onChange={handleGroupEnabledChange}
+              checked={isEnableGroup}
+              onCheckedChange={handleGroupEnabledChange}
               size="md"
               disabled={readOnly}
             />
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index 8b86d537c9..35ddef865f 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -80,8 +80,8 @@ const Operator = ({
               <div>{t('nodes.note.editor.showAuthor', { ns: 'workflow' })}</div>
               <Switch
                 size="lg"
-                value={showAuthor}
-                onChange={onShowAuthorChange}
+                checked={showAuthor}
+                onCheckedChange={onShowAuthorChange}
               />
             </div>
           </div>
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx b/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
index 866e61730b..1df519d0f3 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
@@ -17,12 +17,12 @@ const FilterSwitch: FC<FilterSwitchProps> = ({
   return (
     <div className="flex items-center p-1">
       <div className="flex w-full items-center gap-x-1 px-2 py-1.5">
-        <div className="system-md-regular flex-1 px-1 text-text-secondary">
+        <div className="flex-1 px-1 system-md-regular text-text-secondary">
           {t('versionHistory.filter.onlyShowNamedVersions', { ns: 'workflow' })}
         </div>
         <Switch
-          value={enabled}
-          onChange={v => handleSwitch(v)}
+          checked={enabled}
+          onCheckedChange={v => handleSwitch(v)}
           size="md"
           className="shrink-0"
         />
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 0fdabf34df..ea12a80ecf 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -567,17 +567,11 @@
   "app/components/app/configuration/config/config-audio.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/app/configuration/config/config-document.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/app/configuration/dataset-config/context-var/index.tsx": {
@@ -783,9 +777,6 @@
   "app/components/app/overview/app-card.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/overview/customize/index.tsx": {
@@ -813,9 +804,6 @@
     }
   },
   "app/components/app/overview/trigger-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1433,9 +1421,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -1460,11 +1445,6 @@
       "count": 1
     }
   },
-  "app/components/base/features/new-feature-panel/moderation/moderation-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2223,9 +2203,6 @@
   "app/components/base/param-item/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/popover/index.stories.tsx": {
@@ -2735,9 +2712,6 @@
     },
     "react-refresh/only-export-components": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/billing/pricing/plans/cloud-plan-item/index.tsx": {
@@ -3695,9 +3669,6 @@
   "app/components/datasets/settings/summary-index-setting.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 11
     }
   },
   "app/components/develop/ApiServer.tsx": {
@@ -5894,11 +5865,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow/nodes/_base/components/selector.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -6523,9 +6489,6 @@
   "app/components/workflow/nodes/iteration/panel.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/workflow/nodes/iteration/use-config.ts": {
@@ -6566,9 +6529,6 @@
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/knowledge-base/components/retrieval-setting/type.ts": {
@@ -7528,11 +7488,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/version-history-panel/filter/index.tsx": {
     "no-restricted-imports": {
       "count": 1

From e6b5923ff1389a5bda2471b6ba596b360de4493c Mon Sep 17 00:00:00 2001
From: Tim Ren <137012659+xr843@users.noreply.github.com>
Date: Wed, 15 Apr 2026 23:52:38 +0800
Subject: [PATCH 111/120] test(types): replace Account/Tenant status string
 literals with enum values (#35267)

Co-authored-by: xr843 <xianren843@protonmail.com>
---
 ...test_chat_conversation_status_count_api.py |  4 ++--
 .../controllers/console/helpers.py            |  4 ++--
 .../layers/test_pause_state_persist_layer.py  |  6 +++---
 .../test_human_input_form_repository_impl.py  | 13 ++++++++++---
 .../test_human_input_resume_node_execution.py |  6 +++---
 .../services/test_account_service.py          |  8 ++++----
 .../test_dataset_service_update_dataset.py    | 13 ++++++++++---
 .../tasks/test_document_indexing_sync_task.py |  6 +++---
 .../test_workflow_pause_integration.py        | 10 +++++-----
 .../console/test_workspace_account.py         |  4 ++--
 .../controllers/inner_api/app/test_dsl.py     |  5 +++--
 .../inner_api/workspace/test_workspace.py     |  5 +++--
 .../controllers/service_api/app/test_app.py   | 19 ++++++++++---------
 .../services/test_account_service.py          |  8 ++++----
 14 files changed, 64 insertions(+), 47 deletions(-)

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 5cc458fe2e..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
@@ -12,7 +12,7 @@ from constants import HEADER_NAME_CSRF_TOKEN
 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
-from models.account import AccountStatus, TenantAccountRole
+from models.account import AccountStatus, TenantAccountRole, TenantStatus
 from models.enums import ConversationFromSource, CreatorUserRole
 from models.model import App, AppMode, Conversation, Message
 from models.workflow import WorkflowRun
@@ -30,7 +30,7 @@ def _create_account_and_tenant(db_session: Session) -> tuple[Account, Tenant]:
     db_session.add(account)
     db_session.commit()
 
-    tenant = Tenant(name="Test Tenant", status="normal")
+    tenant = Tenant(name="Test Tenant", status=TenantStatus.NORMAL)
     db_session.add(tenant)
     db_session.commit()
 
diff --git a/api/tests/test_containers_integration_tests/controllers/console/helpers.py b/api/tests/test_containers_integration_tests/controllers/console/helpers.py
index 9e2084f393..a8ecf94da1 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/helpers.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/helpers.py
@@ -11,7 +11,7 @@ from constants import HEADER_NAME_CSRF_TOKEN
 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
-from models.account import AccountStatus, TenantAccountRole
+from models.account import AccountStatus, TenantAccountRole, TenantStatus
 from models.model import App, AppMode
 from services.account_service import AccountService
 
@@ -37,7 +37,7 @@ def create_console_account_and_tenant(db_session: Session) -> tuple[Account, Ten
     db_session.add(account)
     db_session.commit()
 
-    tenant = Tenant(name="Test Tenant", status="normal")
+    tenant = Tenant(name="Test Tenant", status=TenantStatus.NORMAL)
     db_session.add(tenant)
     db_session.commit()
 
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 c9ee67863d..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
@@ -88,11 +88,11 @@ class TestPauseStatePersistenceLayerTestContainers:
     def setup_test_data(self, db_session_with_containers, file_service, workflow_run_service):
         """Set up test data for each test method using TestContainers."""
         # Create test tenant and account
-        from models.account import Tenant, TenantAccountJoin, TenantAccountRole
+        from models.account import AccountStatus, Tenant, TenantAccountJoin, TenantAccountRole, TenantStatus
 
         tenant = Tenant(
             name="Test Tenant",
-            status="normal",
+            status=TenantStatus.NORMAL,
         )
         db_session_with_containers.add(tenant)
         db_session_with_containers.commit()
@@ -101,7 +101,7 @@ class TestPauseStatePersistenceLayerTestContainers:
             email="test@example.com",
             name="Test User",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         db_session_with_containers.add(account)
         db_session_with_containers.commit()
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 13caad799e..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
@@ -18,7 +18,14 @@ from core.workflow.human_input_compat import (
     MemberRecipient,
     WebAppDeliveryMethod,
 )
-from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models.account import (
+    Account,
+    AccountStatus,
+    Tenant,
+    TenantAccountJoin,
+    TenantAccountRole,
+    TenantStatus,
+)
 from models.human_input import (
     EmailExternalRecipientPayload,
     EmailMemberRecipientPayload,
@@ -29,7 +36,7 @@ from models.human_input import (
 
 
 def _create_tenant_with_members(session: Session, member_emails: list[str]) -> tuple[Tenant, list[Account]]:
-    tenant = Tenant(name="Test Tenant", status="normal")
+    tenant = Tenant(name="Test Tenant", status=TenantStatus.NORMAL)
     session.add(tenant)
     session.flush()
 
@@ -39,7 +46,7 @@ def _create_tenant_with_members(session: Session, member_emails: list[str]) -> t
             email=email,
             name=f"Member {index}",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         session.add(account)
         session.flush()
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 0a9b476afc..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
@@ -29,7 +29,7 @@ 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 Tenant, TenantAccountJoin, TenantAccountRole
+from models.account import AccountStatus, Tenant, TenantAccountJoin, TenantAccountRole, TenantStatus
 from models.enums import CreatorUserRole, WorkflowRunTriggeredFrom
 from models.model import App, AppMode, IconType
 from models.workflow import Workflow, WorkflowNodeExecutionModel, WorkflowNodeExecutionTriggeredFrom, WorkflowRun
@@ -175,7 +175,7 @@ class TestHumanInputResumeNodeExecutionIntegration:
     def setup_test_data(self, db_session_with_containers: Session):
         tenant = Tenant(
             name="Test Tenant",
-            status="normal",
+            status=TenantStatus.NORMAL,
         )
         db_session_with_containers.add(tenant)
         db_session_with_containers.commit()
@@ -184,7 +184,7 @@ class TestHumanInputResumeNodeExecutionIntegration:
             email="test@example.com",
             name="Test User",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         db_session_with_containers.add(account)
         db_session_with_containers.commit()
diff --git a/api/tests/test_containers_integration_tests/services/test_account_service.py b/api/tests/test_containers_integration_tests/services/test_account_service.py
index cc9596d15f..9a53ff087c 100644
--- a/api/tests/test_containers_integration_tests/services/test_account_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_account_service.py
@@ -9,7 +9,7 @@ from werkzeug.exceptions import Unauthorized
 
 from configs import dify_config
 from controllers.console.error import AccountNotFound, NotAllowedCreateWorkspace
-from models import AccountStatus, TenantAccountJoin
+from models import AccountStatus, TenantAccountJoin, TenantStatus
 from services.account_service import AccountService, RegisterService, TenantService, TokenPair
 from services.errors.account import (
     AccountAlreadyInTenantError,
@@ -2851,7 +2851,7 @@ class TestRegisterService:
             interface_language="en-US",
             password=existing_pending_member_password,
         )
-        existing_account.status = "pending"
+        existing_account.status = AccountStatus.PENDING
 
         db_session_with_containers.commit()
 
@@ -2941,7 +2941,7 @@ class TestRegisterService:
             interface_language="en-US",
             password=already_in_tenant_password,
         )
-        existing_account.status = "active"
+        existing_account.status = AccountStatus.ACTIVE
 
         db_session_with_containers.commit()
 
@@ -3331,7 +3331,7 @@ class TestRegisterService:
         TenantService.create_tenant_member(tenant, account, role="normal")
 
         # Change tenant status to non-normal
-        tenant.status = "archive"
+        tenant.status = TenantStatus.ARCHIVE
 
         db_session_with_containers.commit()
 
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 2a2d86a8a6..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
@@ -7,7 +7,14 @@ 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 models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models.account import (
+    Account,
+    AccountStatus,
+    Tenant,
+    TenantAccountJoin,
+    TenantAccountRole,
+    TenantStatus,
+)
 from models.dataset import Dataset, ExternalKnowledgeApis, ExternalKnowledgeBindings
 from models.enums import DataSourceType
 from services.dataset_service import DatasetService
@@ -26,12 +33,12 @@ class DatasetUpdateTestDataFactory:
             email=f"{uuid4()}@example.com",
             name=f"user-{uuid4()}",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         db_session_with_containers.add(account)
         db_session_with_containers.commit()
 
-        tenant = Tenant(name=f"tenant-{account.id}", status="normal")
+        tenant = Tenant(name=f"tenant-{account.id}", status=TenantStatus.NORMAL)
         db_session_with_containers.add(tenant)
         db_session_with_containers.commit()
 
diff --git a/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py b/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py
index d94c1fdf24..b6e7e6e5c9 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py
@@ -16,7 +16,7 @@ from sqlalchemy import delete, func, select, update
 
 from core.indexing_runner import DocumentIsPausedError, IndexingRunner
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
-from models import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models import Account, AccountStatus, Tenant, TenantAccountJoin, TenantAccountRole, TenantStatus
 from models.dataset import Dataset, Document, DocumentSegment
 from models.enums import DataSourceType, DocumentCreatedFrom, IndexingStatus, SegmentStatus
 from tasks.document_indexing_sync_task import document_indexing_sync_task
@@ -31,12 +31,12 @@ class DocumentIndexingSyncTaskTestDataFactory:
             email=f"{uuid4()}@example.com",
             name=f"user-{uuid4()}",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         db_session_with_containers.add(account)
         db_session_with_containers.flush()
 
-        tenant = Tenant(name=f"tenant-{account.id}", status="normal")
+        tenant = Tenant(name=f"tenant-{account.id}", status=TenantStatus.NORMAL)
         db_session_with_containers.add(tenant)
         db_session_with_containers.flush()
 
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 4bc022c415..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
@@ -33,7 +33,7 @@ from extensions.ext_storage import storage
 from libs.datetime_utils import naive_utc_now
 from models import Account
 from models import WorkflowPause as WorkflowPauseModel
-from models.account import Tenant, TenantAccountJoin, TenantAccountRole
+from models.account import AccountStatus, Tenant, TenantAccountJoin, TenantAccountRole, TenantStatus
 from models.model import UploadFile
 from models.workflow import Workflow, WorkflowRun
 from repositories.sqlalchemy_api_workflow_run_repository import (
@@ -181,7 +181,7 @@ class TestWorkflowPauseIntegration:
 
         tenant = Tenant(
             name="Test Tenant",
-            status="normal",
+            status=TenantStatus.NORMAL,
         )
         db_session_with_containers.add(tenant)
         db_session_with_containers.commit()
@@ -190,7 +190,7 @@ class TestWorkflowPauseIntegration:
             email="test@example.com",
             name="Test User",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         db_session_with_containers.add(account)
         db_session_with_containers.commit()
@@ -696,7 +696,7 @@ class TestWorkflowPauseIntegration:
 
         tenant2 = Tenant(
             name="Test Tenant 2",
-            status="normal",
+            status=TenantStatus.NORMAL,
         )
         self.session.add(tenant2)
         self.session.commit()
@@ -705,7 +705,7 @@ class TestWorkflowPauseIntegration:
             email="test2@example.com",
             name="Test User 2",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         self.session.add(account2)
         self.session.commit()
diff --git a/api/tests/unit_tests/controllers/console/test_workspace_account.py b/api/tests/unit_tests/controllers/console/test_workspace_account.py
index dd643faac9..c513be950b 100644
--- a/api/tests/unit_tests/controllers/console/test_workspace_account.py
+++ b/api/tests/unit_tests/controllers/console/test_workspace_account.py
@@ -11,7 +11,7 @@ from controllers.console.workspace.account import (
     ChangeEmailSendEmailApi,
     CheckEmailUnique,
 )
-from models import Account
+from models import Account, AccountStatus
 from services.account_service import AccountService
 
 
@@ -33,7 +33,7 @@ def _build_account(email: str, account_id: str = "acc", tenant: object | None =
     account = Account(name=account_id, email=email)
     account.email = email
     account.id = account_id
-    account.status = "active"
+    account.status = AccountStatus.ACTIVE
     account._current_tenant = tenant_obj
     return account
 
diff --git a/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py b/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py
index b7419009f0..71381e6a2b 100644
--- a/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py
+++ b/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py
@@ -18,6 +18,7 @@ from controllers.inner_api.app.dsl import (
     InnerAppDSLImportPayload,
     _get_active_account,
 )
+from models.account import AccountStatus
 from services.app_dsl_service import ImportStatus
 
 
@@ -63,7 +64,7 @@ class TestGetActiveAccount:
     @patch("controllers.inner_api.app.dsl.db")
     def test_returns_active_account(self, mock_db):
         mock_account = MagicMock()
-        mock_account.status = "active"
+        mock_account.status = AccountStatus.ACTIVE
         mock_db.session.scalar.return_value = mock_account
 
         result = _get_active_account("user@example.com")
@@ -74,7 +75,7 @@ class TestGetActiveAccount:
     @patch("controllers.inner_api.app.dsl.db")
     def test_returns_none_for_inactive_account(self, mock_db):
         mock_account = MagicMock()
-        mock_account.status = "banned"
+        mock_account.status = AccountStatus.BANNED
         mock_db.session.scalar.return_value = mock_account
 
         result = _get_active_account("banned@example.com")
diff --git a/api/tests/unit_tests/controllers/inner_api/workspace/test_workspace.py b/api/tests/unit_tests/controllers/inner_api/workspace/test_workspace.py
index 56a8f94963..7d2193adc6 100644
--- a/api/tests/unit_tests/controllers/inner_api/workspace/test_workspace.py
+++ b/api/tests/unit_tests/controllers/inner_api/workspace/test_workspace.py
@@ -20,6 +20,7 @@ from controllers.inner_api.workspace.workspace import (
     WorkspaceCreatePayload,
     WorkspaceOwnerlessPayload,
 )
+from models.account import TenantStatus
 
 
 class TestWorkspaceCreatePayload:
@@ -98,7 +99,7 @@ class TestEnterpriseWorkspace:
         mock_tenant.id = "tenant-id"
         mock_tenant.name = "My Workspace"
         mock_tenant.plan = "sandbox"
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
         mock_tenant.created_at = now
         mock_tenant.updated_at = now
         mock_tenant_svc.create_tenant.return_value = mock_tenant
@@ -162,7 +163,7 @@ class TestEnterpriseWorkspaceNoOwnerEmail:
         mock_tenant.name = "My Workspace"
         mock_tenant.encrypt_public_key = "pub-key"
         mock_tenant.plan = "sandbox"
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
         mock_tenant.custom_config = None
         mock_tenant.created_at = now
         mock_tenant.updated_at = now
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_app.py b/api/tests/unit_tests/controllers/service_api/app/test_app.py
index 1507bf7a5f..f48ace427d 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_app.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_app.py
@@ -10,6 +10,7 @@ from flask import Flask
 
 from controllers.service_api.app.app import AppInfoApi, AppMetaApi, AppParameterApi
 from controllers.service_api.app.error import AppUnavailableError
+from models.account import TenantStatus
 from models.model import App, AppMode
 from tests.unit_tests.conftest import setup_mock_tenant_account_query
 
@@ -62,7 +63,7 @@ class TestAppParameterApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         # Mock DB queries for app and tenant
         mock_db.session.get.side_effect = [
@@ -110,7 +111,7 @@ class TestAppParameterApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app_model,
@@ -151,7 +152,7 @@ class TestAppParameterApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app_model,
@@ -190,7 +191,7 @@ class TestAppParameterApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app_model,
@@ -253,7 +254,7 @@ class TestAppMetaApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app_model,
@@ -321,7 +322,7 @@ class TestAppInfoApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app_model,
@@ -378,7 +379,7 @@ class TestAppInfoApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app,
@@ -424,7 +425,7 @@ class TestAppInfoApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app,
@@ -476,7 +477,7 @@ class TestAppInfoApi:
         mock_validate_token.return_value = mock_api_token
 
         mock_tenant = Mock()
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         mock_db.session.get.side_effect = [
             mock_app,
diff --git a/api/tests/unit_tests/services/test_account_service.py b/api/tests/unit_tests/services/test_account_service.py
index eeb5d178ec..c4f5f57153 100644
--- a/api/tests/unit_tests/services/test_account_service.py
+++ b/api/tests/unit_tests/services/test_account_service.py
@@ -5,7 +5,7 @@ from unittest.mock import MagicMock, patch
 import pytest
 
 from configs import dify_config
-from models.account import Account, AccountStatus
+from models.account import Account, AccountStatus, TenantStatus
 from services.account_service import AccountService, RegisterService, TenantService
 from services.errors.account import (
     AccountAlreadyInTenantError,
@@ -1697,7 +1697,7 @@ class TestRegisterService:
         # Setup test data
         mock_tenant = MagicMock()
         mock_tenant.id = "tenant-456"
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
         mock_account = TestAccountAssociatedDataFactory.create_account_mock(
             account_id="user-123", email="test@example.com"
         )
@@ -1759,7 +1759,7 @@ class TestRegisterService:
         # Setup test data
         mock_tenant = MagicMock()
         mock_tenant.id = "tenant-456"
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
 
         # Mock Redis data
         invitation_data = {
@@ -1784,7 +1784,7 @@ class TestRegisterService:
         # Setup test data
         mock_tenant = MagicMock()
         mock_tenant.id = "tenant-456"
-        mock_tenant.status = "normal"
+        mock_tenant.status = TenantStatus.NORMAL
         mock_account = TestAccountAssociatedDataFactory.create_account_mock(
             account_id="different-user-456", email="test@example.com"
         )

From cf4d7afb9ccb9bab8f4cdaad726d15331fbe0ea7 Mon Sep 17 00:00:00 2001
From: 99 <wh2099@pm.me>
Date: Thu, 16 Apr 2026 00:53:41 +0800
Subject: [PATCH 112/120] chore(api): prune redundant direct dependency
 declarations (#35272)

---
 api/pyproject.toml | 236 +++++++++++++------------------
 api/uv.lock        | 344 ++++++++++++---------------------------------
 2 files changed, 188 insertions(+), 392 deletions(-)

diff --git a/api/pyproject.toml b/api/pyproject.toml
index f22bafb03a..76b6cf8d99 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -4,92 +4,52 @@ version = "1.13.3"
 requires-python = "~=3.12.0"
 
 dependencies = [
-    "aliyun-log-python-sdk~=0.9.44",
-    "arize-phoenix-otel~=0.15.0",
-    "azure-identity==1.25.3",
-    "beautifulsoup4==4.14.3",
-    "boto3==1.42.88",
-    "bs4~=0.0.1",
-    "cachetools~=7.0.5",
-    "celery~=5.6.3",
-    "charset-normalizer>=3.4.7",
-    "flask~=3.1.3",
-    "flask-compress>=1.24,<1.25",
-    "flask-cors~=6.0.2",
-    "flask-login~=0.6.3",
-    "flask-migrate~=4.1.0",
-    "flask-orjson~=2.0.0",
-    "flask-sqlalchemy~=3.1.1",
-    "gevent~=26.4.0",
-    "gmpy2~=2.3.0",
-    "google-api-core>=2.30.3",
-    "google-api-python-client==2.194.0",
-    "google-auth>=2.49.2",
-    "google-auth-httplib2==0.3.1",
-    "google-cloud-aiplatform>=1.147.0",
-    "googleapis-common-protos>=1.74.0",
-    "graphon>=0.1.2",
-    "gunicorn~=25.3.0",
-    "httpx[socks]~=0.28.1",
-    "jieba==0.42.1",
-    "json-repair>=0.59.2",
-    "langfuse>=4.2.0,<5.0.0",
-    "langsmith~=0.7.30",
-    "markdown~=3.10.2",
-    "mlflow-skinny>=3.11.1",
-    "numpy~=2.4.4",
-    "openpyxl~=3.1.5",
-    "opik~=1.11.2",
-    "litellm==1.83.0",                                    # Pinned to avoid madoka dependency issue
-    "opentelemetry-api==1.41.0",
-    "opentelemetry-distro==0.62b0",
-    "opentelemetry-exporter-otlp==1.41.0",
-    "opentelemetry-exporter-otlp-proto-common==1.41.0",
-    "opentelemetry-exporter-otlp-proto-grpc==1.41.0",
-    "opentelemetry-exporter-otlp-proto-http==1.41.0",
-    "opentelemetry-instrumentation==0.62b0",
-    "opentelemetry-instrumentation-celery==0.62b0",
-    "opentelemetry-instrumentation-flask==0.62b0",
-    "opentelemetry-instrumentation-httpx==0.62b0",
-    "opentelemetry-instrumentation-redis==0.62b0",
-    "opentelemetry-instrumentation-sqlalchemy==0.62b0",
-    "opentelemetry-propagator-b3==1.41.0",
-    "opentelemetry-proto==1.41.0",
-    "opentelemetry-sdk==1.41.0",
-    "opentelemetry-semantic-conventions==0.62b0",
-    "opentelemetry-util-http==0.62b0",
-    "pandas[excel,output-formatting,performance]~=3.0.2",
-    "psycogreen~=1.0.2",
-    "psycopg2-binary~=2.9.11",
-    "pycryptodome==3.23.0",
-    "pydantic~=2.12.5",
-    "pydantic-settings~=2.13.1",
-    "pyjwt~=2.12.1",
-    "pypdfium2==5.6.0",
-    "python-docx~=1.2.0",
-    "python-dotenv==1.2.2",
-    "pyyaml~=6.0.1",
-    "readabilipy~=0.3.0",
-    "redis[hiredis]~=7.4.0",
-    "resend~=2.27.0",
-    "sentry-sdk[flask]~=2.57.0",
-    "sqlalchemy~=2.0.49",
-    "starlette==1.0.0",
-    "tiktoken~=0.12.0",
-    "transformers~=5.3.0",
-    "unstructured[docx,epub,md,ppt,pptx]~=0.21.5",
-    "pypandoc~=1.13",
-    "yarl~=1.23.0",
-    "sseclient-py~=1.9.0",
-    "httpx-sse~=0.4.0",
-    "sendgrid~=6.12.5",
-    "flask-restx~=1.3.2",
-    "packaging~=26.0",
+    # Legacy: mature and widely deployed
+    "bleach>=6.3.0",
+    "boto3>=1.42.88",
+    "celery>=5.6.3",
     "croniter>=6.2.2",
-    "apscheduler>=3.11.2",
-    "weave>=0.52.36",
-    "fastopenapi[flask]>=0.7.0",
-    "bleach~=6.3.0",
+    "flask-cors>=6.0.2",
+    "gevent>=26.4.0",
+    "gmpy2>=2.3.0",
+    "google-api-python-client>=2.194.0",
+    "gunicorn>=25.3.0",
+    "psycogreen>=1.0.2",
+    "psycopg2-binary>=2.9.11",
+    "redis[hiredis]>=7.4.0",
+    "sendgrid>=6.12.5",
+
+    # Stable: production-proven, cap below the next major
+    "aliyun-log-python-sdk>=0.9.44,<1.0.0",
+    "azure-identity>=1.25.3,<2.0.0",
+    "flask-compress>=1.24,<2.0.0",
+    "flask-login>=0.6.3,<1.0.0",
+    "flask-migrate>=4.1.0,<5.0.0",
+    "flask-orjson>=2.0.0,<3.0.0",
+    "flask-restx>=1.3.2,<2.0.0",
+    "google-cloud-aiplatform>=1.147.0,<2.0.0",
+    "httpx[socks]>=0.28.1,<1.0.0",
+    "langfuse>=4.2.0,<5.0.0",
+    "langsmith>=0.7.30,<1.0.0",
+    "mlflow-skinny>=3.11.1,<4.0.0",
+    "opentelemetry-distro>=0.62b0,<1.0.0",
+    "opentelemetry-instrumentation-celery>=0.62b0,<1.0.0",
+    "opentelemetry-instrumentation-flask>=0.62b0,<1.0.0",
+    "opentelemetry-instrumentation-httpx>=0.62b0,<1.0.0",
+    "opentelemetry-instrumentation-redis>=0.62b0,<1.0.0",
+    "opentelemetry-instrumentation-sqlalchemy>=0.62b0,<1.0.0",
+    "opentelemetry-propagator-b3>=1.41.0,<2.0.0",
+    "readabilipy>=0.3.0,<1.0.0",
+    "resend>=2.27.0,<3.0.0",
+    "weave>=0.52.36,<1.0.0",
+
+    # Emerging: newer and fast-moving, use compatible pins
+    "arize-phoenix-otel~=0.15.0",
+    "fastopenapi[flask]~=0.7.0",
+    "graphon~=0.1.2",
+    "httpx-sse~=0.4.0",
+    "json-repair~=0.59.2",
+    "opik~=1.11.2",
 ]
 # Before adding new dependency, consider place it in
 # alphabet order (a-z) and suitable group.
@@ -147,46 +107,46 @@ override-dependencies = [
 # Required for development and running tests
 ############################################################
 dev = [
-    "coverage~=7.13.4",
-    "dotenv-linter~=0.7.0",
-    "faker~=40.13.0",
-    "lxml-stubs~=0.5.1",
-    "basedpyright~=1.39.0",
-    "ruff~=0.15.10",
-    "pytest~=9.0.3",
-    "pytest-benchmark~=5.2.3",
-    "pytest-cov~=7.1.0",
-    "pytest-env~=1.6.0",
-    "pytest-mock~=3.15.1",
-    "testcontainers~=4.14.2",
-    "types-aiofiles~=25.1.0",
-    "types-beautifulsoup4~=4.12.0",
-    "types-cachetools~=6.2.0",
-    "types-colorama~=0.4.15",
-    "types-defusedxml~=0.7.0",
-    "types-deprecated~=1.3.1",
-    "types-docutils~=0.22.3",
-    "types-flask-cors~=6.0.0",
-    "types-flask-migrate~=4.1.0",
-    "types-gevent~=26.4.0",
-    "types-greenlet~=3.4.0",
-    "types-html5lib~=1.1.11",
-    "types-markdown~=3.10.2",
-    "types-oauthlib~=3.3.0",
-    "types-objgraph~=3.6.0",
-    "types-olefile~=0.47.0",
-    "types-openpyxl~=3.1.5",
-    "types-pexpect~=4.9.0",
-    "types-protobuf~=7.34.1",
-    "types-psutil~=7.2.2",
-    "types-psycopg2~=2.9.21",
-    "types-pygments~=2.20.0",
-    "types-pymysql~=1.1.0",
-    "types-python-dateutil~=2.9.0",
-    "types-pywin32~=311.0.0",
-    "types-pyyaml~=6.0.12",
-    "types-regex~=2026.4.4",
-    "types-shapely~=2.1.0",
+    "coverage>=7.13.4",
+    "dotenv-linter>=0.7.0",
+    "faker>=20.1.0",
+    "lxml-stubs>=0.5.1",
+    "basedpyright>=1.39.0",
+    "ruff>=0.15.10",
+    "pytest>=9.0.3",
+    "pytest-benchmark>=5.2.3",
+    "pytest-cov>=7.1.0",
+    "pytest-env>=1.6.0",
+    "pytest-mock>=3.15.1",
+    "testcontainers>=4.14.2",
+    "types-aiofiles>=25.1.0",
+    "types-beautifulsoup4>=4.12.0",
+    "types-cachetools>=6.2.0",
+    "types-colorama>=0.4.15",
+    "types-defusedxml>=0.7.0",
+    "types-deprecated>=1.3.1",
+    "types-docutils>=0.22.3",
+    "types-flask-cors>=6.0.0",
+    "types-flask-migrate>=4.1.0",
+    "types-gevent>=26.4.0",
+    "types-greenlet>=3.4.0",
+    "types-html5lib>=1.1.11",
+    "types-markdown>=3.10.2",
+    "types-oauthlib>=3.3.0",
+    "types-objgraph>=3.6.0",
+    "types-olefile>=0.47.0",
+    "types-openpyxl>=3.1.5",
+    "types-pexpect>=4.9.0",
+    "types-protobuf>=7.34.1",
+    "types-psutil>=7.2.2",
+    "types-psycopg2>=2.9.21",
+    "types-pygments>=2.20.0",
+    "types-pymysql>=1.1.0",
+    "types-python-dateutil>=2.9.0",
+    "types-pywin32>=311.0.0",
+    "types-pyyaml>=6.0.12",
+    "types-regex>=2026.4.4",
+    "types-shapely>=2.1.0",
     "types-simplejson>=3.20.0.20260408",
     "types-six>=1.17.0.20260408",
     "types-tensorflow>=2.18.0.20260408",
@@ -198,19 +158,19 @@ dev = [
     "types_pyOpenSSL>=24.1.0",
     "types_cffi>=2.0.0.20260408",
     "types_setuptools>=82.0.0.20260408",
-    "pandas-stubs~=3.0.0",
+    "pandas-stubs>=3.0.0",
     "scipy-stubs>=1.15.3.0",
     "types-python-http-client>=3.3.7.20260408",
     "import-linter>=2.3",
     "types-redis>=4.6.0.20241004",
     "celery-types>=0.23.0",
-    "mypy~=1.20.1",
+    "mypy>=1.20.1",
     # "locust>=2.40.4",  # Temporarily removed due to compatibility issues. Uncomment when resolved.
     "sseclient-py>=1.8.0",
     "pytest-timeout>=2.4.0",
     "pytest-xdist>=3.8.0",
     "pyrefly>=0.60.0",
-    "xinference-client~=2.4.0",
+    "xinference-client>=2.4.0",
 ]
 
 ############################################################
@@ -218,21 +178,21 @@ dev = [
 # Required for storage clients
 ############################################################
 storage = [
-    "azure-storage-blob==12.28.0",
-    "bce-python-sdk~=0.9.69",
-    "cos-python-sdk-v5==1.9.41",
-    "esdk-obs-python==3.26.2",
+    "azure-storage-blob>=12.28.0",
+    "bce-python-sdk>=0.9.69",
+    "cos-python-sdk-v5>=1.9.41",
+    "esdk-obs-python>=3.22.2",
     "google-cloud-storage>=3.10.1",
-    "opendal~=0.46.0",
-    "oss2==2.19.1",
-    "supabase~=2.18.1",
-    "tos~=2.9.0",
+    "opendal>=0.46.0",
+    "oss2>=2.19.1",
+    "supabase>=2.18.1",
+    "tos>=2.9.0",
 ]
 
 ############################################################
 # [ Tools ] dependency group
 ############################################################
-tools = ["cloudscraper~=1.2.71", "nltk~=3.9.1"]
+tools = ["cloudscraper>=1.2.71", "nltk>=3.9.1"]
 
 ############################################################
 # [ VDB ] workspace plugins — hollow packages under providers/vdb/*
@@ -302,7 +262,7 @@ vdb-vastbase = ["dify-vdb-vastbase"]
 vdb-vikingdb = ["dify-vdb-vikingdb"]
 vdb-weaviate = ["dify-vdb-weaviate"]
 # Optional client used by some tests / integrations (not a vector backend plugin)
-vdb-xinference = ["xinference-client~=2.4.0"]
+vdb-xinference = ["xinference-client>=2.4.0"]
 
 [tool.pyrefly]
 project-includes = ["."]
diff --git a/api/uv.lock b/api/uv.lock
index 9ed8d16107..5250a614b6 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -643,24 +643,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/57/b7/f4a051cefaf76930c77558b31646bcce7e9b3fbdcbc89e4073783e961519/botocore_stubs-1.41.3-py3-none-any.whl", hash = "sha256:6ab911bd9f7256f1dcea2e24a4af7ae0f9f07e83d0a760bba37f028f4a2e5589", size = 66749, upload-time = "2025-11-24T20:29:26.142Z" },
 ]
 
-[[package]]
-name = "bottleneck"
-version = "1.6.0"
-source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "numpy" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/14/d8/6d641573e210768816023a64966d66463f2ce9fc9945fa03290c8a18f87c/bottleneck-1.6.0.tar.gz", hash = "sha256:028d46ee4b025ad9ab4d79924113816f825f62b17b87c9e1d0d8ce144a4a0e31", size = 104311, upload-time = "2025-09-08T16:30:38.617Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/8d/72/7e3593a2a3dd69ec831a9981a7b1443647acb66a5aec34c1620a5f7f8498/bottleneck-1.6.0-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:3bb16a16a86a655fdbb34df672109a8a227bb5f9c9cf5bb8ae400a639bc52fa3", size = 100515, upload-time = "2025-09-08T16:29:55.141Z" },
-    { url = "https://files.pythonhosted.org/packages/b5/d4/e7bbea08f4c0f0bab819d38c1a613da5f194fba7b19aae3e2b3a27e78886/bottleneck-1.6.0-cp312-cp312-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:0fbf5d0787af9aee6cef4db9cdd14975ce24bd02e0cc30155a51411ebe2ff35f", size = 377451, upload-time = "2025-09-08T16:29:56.718Z" },
-    { url = "https://files.pythonhosted.org/packages/fe/80/a6da430e3b1a12fd85f9fe90d3ad8fe9a527ecb046644c37b4b3f4baacfc/bottleneck-1.6.0-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:d08966f4a22384862258940346a72087a6f7cebb19038fbf3a3f6690ee7fd39f", size = 368303, upload-time = "2025-09-08T16:29:57.834Z" },
-    { url = "https://files.pythonhosted.org/packages/30/11/abd30a49f3251f4538430e5f876df96f2b39dabf49e05c5836820d2c31fe/bottleneck-1.6.0-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:604f0b898b43b7bc631c564630e936a8759d2d952641c8b02f71e31dbcd9deaa", size = 361232, upload-time = "2025-09-08T16:29:59.104Z" },
-    { url = "https://files.pythonhosted.org/packages/1d/ac/1c0e09d8d92b9951f675bd42463ce76c3c3657b31c5bf53ca1f6dd9eccff/bottleneck-1.6.0-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:d33720bad761e642abc18eda5f188ff2841191c9f63f9d0c052245decc0faeb9", size = 373234, upload-time = "2025-09-08T16:30:00.488Z" },
-    { url = "https://files.pythonhosted.org/packages/fb/ea/382c572ae3057ba885d484726bb63629d1f63abedf91c6cd23974eb35a9b/bottleneck-1.6.0-cp312-cp312-win32.whl", hash = "sha256:a1e5907ec2714efbe7075d9207b58c22ab6984a59102e4ecd78dced80dab8374", size = 108020, upload-time = "2025-09-08T16:30:01.773Z" },
-    { url = "https://files.pythonhosted.org/packages/48/ad/d71da675eef85ac153eef5111ca0caa924548c9591da00939bcabba8de8e/bottleneck-1.6.0-cp312-cp312-win_amd64.whl", hash = "sha256:81e3822499f057a917b7d3972ebc631ac63c6bbcc79ad3542a66c4c40634e3a6", size = 113493, upload-time = "2025-09-08T16:30:02.872Z" },
-]
-
 [[package]]
 name = "brotli"
 version = "1.2.0"
@@ -695,18 +677,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/07/6b/6e92009df3b8b7272f85a0992b306b61c34b7ea1c4776643746e61c380ac/brotlicffi-1.2.0.0-cp38-abi3-win_amd64.whl", hash = "sha256:f139a7cdfe4ae7859513067b736eb44d19fae1186f9e99370092f6915216451b", size = 378586, upload-time = "2025-11-21T18:17:50.531Z" },
 ]
 
-[[package]]
-name = "bs4"
-version = "0.0.2"
-source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "beautifulsoup4" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/c9/aa/4acaf814ff901145da37332e05bb510452ebed97bc9602695059dd46ef39/bs4-0.0.2.tar.gz", hash = "sha256:a48685c58f50fe127722417bae83fe6badf500d54b55f7e39ffe43b798653925", size = 698, upload-time = "2024-01-17T18:15:47.371Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/51/bb/bf7aab772a159614954d84aa832c129624ba6c32faa559dfb200a534e50b/bs4-0.0.2-py2.py3-none-any.whl", hash = "sha256:abf8742c0805ef7f662dce4b51cca104cffe52b835238afc169142ab9b3fbccc", size = 1189, upload-time = "2024-01-17T18:15:48.613Z" },
-]
-
 [[package]]
 name = "build"
 version = "1.3.0"
@@ -1306,91 +1276,46 @@ version = "1.13.3"
 source = { virtual = "." }
 dependencies = [
     { name = "aliyun-log-python-sdk" },
-    { name = "apscheduler" },
     { name = "arize-phoenix-otel" },
     { name = "azure-identity" },
-    { name = "beautifulsoup4" },
     { name = "bleach" },
     { name = "boto3" },
-    { name = "bs4" },
-    { name = "cachetools" },
     { name = "celery" },
-    { name = "charset-normalizer" },
     { name = "croniter" },
     { name = "fastopenapi", extra = ["flask"] },
-    { name = "flask" },
     { name = "flask-compress" },
     { name = "flask-cors" },
     { name = "flask-login" },
     { name = "flask-migrate" },
     { name = "flask-orjson" },
     { name = "flask-restx" },
-    { name = "flask-sqlalchemy" },
     { name = "gevent" },
     { name = "gmpy2" },
-    { name = "google-api-core" },
     { name = "google-api-python-client" },
-    { name = "google-auth" },
-    { name = "google-auth-httplib2" },
     { name = "google-cloud-aiplatform" },
-    { name = "googleapis-common-protos" },
     { name = "graphon" },
     { name = "gunicorn" },
     { name = "httpx", extra = ["socks"] },
     { name = "httpx-sse" },
-    { name = "jieba" },
     { name = "json-repair" },
     { name = "langfuse" },
     { name = "langsmith" },
-    { name = "litellm" },
-    { name = "markdown" },
     { name = "mlflow-skinny" },
-    { name = "numpy" },
-    { name = "openpyxl" },
-    { name = "opentelemetry-api" },
     { name = "opentelemetry-distro" },
-    { name = "opentelemetry-exporter-otlp" },
-    { name = "opentelemetry-exporter-otlp-proto-common" },
-    { name = "opentelemetry-exporter-otlp-proto-grpc" },
-    { name = "opentelemetry-exporter-otlp-proto-http" },
-    { name = "opentelemetry-instrumentation" },
     { name = "opentelemetry-instrumentation-celery" },
     { name = "opentelemetry-instrumentation-flask" },
     { name = "opentelemetry-instrumentation-httpx" },
     { name = "opentelemetry-instrumentation-redis" },
     { name = "opentelemetry-instrumentation-sqlalchemy" },
     { name = "opentelemetry-propagator-b3" },
-    { name = "opentelemetry-proto" },
-    { name = "opentelemetry-sdk" },
-    { name = "opentelemetry-semantic-conventions" },
-    { name = "opentelemetry-util-http" },
     { name = "opik" },
-    { name = "packaging" },
-    { name = "pandas", extra = ["excel", "output-formatting", "performance"] },
     { name = "psycogreen" },
     { name = "psycopg2-binary" },
-    { name = "pycryptodome" },
-    { name = "pydantic" },
-    { name = "pydantic-settings" },
-    { name = "pyjwt" },
-    { name = "pypandoc" },
-    { name = "pypdfium2" },
-    { name = "python-docx" },
-    { name = "python-dotenv" },
-    { name = "pyyaml" },
     { name = "readabilipy" },
     { name = "redis", extra = ["hiredis"] },
     { name = "resend" },
     { name = "sendgrid" },
-    { name = "sentry-sdk", extra = ["flask"] },
-    { name = "sqlalchemy" },
-    { name = "sseclient-py" },
-    { name = "starlette" },
-    { name = "tiktoken" },
-    { name = "transformers" },
-    { name = "unstructured", extra = ["docx", "epub", "md", "ppt", "pptx"] },
     { name = "weave" },
-    { name = "yarl" },
 ]
 
 [package.dev-dependencies]
@@ -1602,174 +1527,129 @@ vdb-xinference = [
 
 [package.metadata]
 requires-dist = [
-    { name = "aliyun-log-python-sdk", specifier = "~=0.9.44" },
-    { name = "apscheduler", specifier = ">=3.11.2" },
+    { name = "aliyun-log-python-sdk", specifier = ">=0.9.44,<1.0.0" },
     { name = "arize-phoenix-otel", specifier = "~=0.15.0" },
-    { name = "azure-identity", specifier = "==1.25.3" },
-    { name = "beautifulsoup4", specifier = "==4.14.3" },
-    { name = "bleach", specifier = "~=6.3.0" },
-    { name = "boto3", specifier = "==1.42.88" },
-    { name = "bs4", specifier = "~=0.0.1" },
-    { name = "cachetools", specifier = "~=7.0.5" },
-    { name = "celery", specifier = "~=5.6.3" },
-    { name = "charset-normalizer", specifier = ">=3.4.7" },
+    { name = "azure-identity", specifier = ">=1.25.3,<2.0.0" },
+    { name = "bleach", specifier = ">=6.3.0" },
+    { name = "boto3", specifier = ">=1.42.88" },
+    { name = "celery", specifier = ">=5.6.3" },
     { name = "croniter", specifier = ">=6.2.2" },
-    { name = "fastopenapi", extras = ["flask"], specifier = ">=0.7.0" },
-    { name = "flask", specifier = "~=3.1.3" },
-    { name = "flask-compress", specifier = ">=1.24,<1.25" },
-    { name = "flask-cors", specifier = "~=6.0.2" },
-    { name = "flask-login", specifier = "~=0.6.3" },
-    { name = "flask-migrate", specifier = "~=4.1.0" },
-    { name = "flask-orjson", specifier = "~=2.0.0" },
-    { name = "flask-restx", specifier = "~=1.3.2" },
-    { name = "flask-sqlalchemy", specifier = "~=3.1.1" },
-    { name = "gevent", specifier = "~=26.4.0" },
-    { name = "gmpy2", specifier = "~=2.3.0" },
-    { name = "google-api-core", specifier = ">=2.30.3" },
-    { name = "google-api-python-client", specifier = "==2.194.0" },
-    { name = "google-auth", specifier = ">=2.49.2" },
-    { name = "google-auth-httplib2", specifier = "==0.3.1" },
-    { name = "google-cloud-aiplatform", specifier = ">=1.147.0" },
-    { name = "googleapis-common-protos", specifier = ">=1.74.0" },
-    { name = "graphon", specifier = ">=0.1.2" },
-    { name = "gunicorn", specifier = "~=25.3.0" },
-    { name = "httpx", extras = ["socks"], specifier = "~=0.28.1" },
+    { name = "fastopenapi", extras = ["flask"], specifier = "~=0.7.0" },
+    { name = "flask-compress", specifier = ">=1.24,<2.0.0" },
+    { name = "flask-cors", specifier = ">=6.0.2" },
+    { name = "flask-login", specifier = ">=0.6.3,<1.0.0" },
+    { name = "flask-migrate", specifier = ">=4.1.0,<5.0.0" },
+    { name = "flask-orjson", specifier = ">=2.0.0,<3.0.0" },
+    { name = "flask-restx", specifier = ">=1.3.2,<2.0.0" },
+    { name = "gevent", specifier = ">=26.4.0" },
+    { name = "gmpy2", specifier = ">=2.3.0" },
+    { name = "google-api-python-client", specifier = ">=2.194.0" },
+    { name = "google-cloud-aiplatform", specifier = ">=1.147.0,<2.0.0" },
+    { name = "graphon", specifier = "~=0.1.2" },
+    { name = "gunicorn", specifier = ">=25.3.0" },
+    { name = "httpx", extras = ["socks"], specifier = ">=0.28.1,<1.0.0" },
     { name = "httpx-sse", specifier = "~=0.4.0" },
-    { name = "jieba", specifier = "==0.42.1" },
-    { name = "json-repair", specifier = ">=0.59.2" },
+    { name = "json-repair", specifier = "~=0.59.2" },
     { name = "langfuse", specifier = ">=4.2.0,<5.0.0" },
-    { name = "langsmith", specifier = "~=0.7.30" },
-    { name = "litellm", specifier = "==1.83.0" },
-    { name = "markdown", specifier = "~=3.10.2" },
-    { name = "mlflow-skinny", specifier = ">=3.11.1" },
-    { name = "numpy", specifier = "~=2.4.4" },
-    { name = "openpyxl", specifier = "~=3.1.5" },
-    { name = "opentelemetry-api", specifier = "==1.41.0" },
-    { name = "opentelemetry-distro", specifier = "==0.62b0" },
-    { name = "opentelemetry-exporter-otlp", specifier = "==1.41.0" },
-    { name = "opentelemetry-exporter-otlp-proto-common", specifier = "==1.41.0" },
-    { name = "opentelemetry-exporter-otlp-proto-grpc", specifier = "==1.41.0" },
-    { name = "opentelemetry-exporter-otlp-proto-http", specifier = "==1.41.0" },
-    { name = "opentelemetry-instrumentation", specifier = "==0.62b0" },
-    { name = "opentelemetry-instrumentation-celery", specifier = "==0.62b0" },
-    { name = "opentelemetry-instrumentation-flask", specifier = "==0.62b0" },
-    { name = "opentelemetry-instrumentation-httpx", specifier = "==0.62b0" },
-    { name = "opentelemetry-instrumentation-redis", specifier = "==0.62b0" },
-    { name = "opentelemetry-instrumentation-sqlalchemy", specifier = "==0.62b0" },
-    { name = "opentelemetry-propagator-b3", specifier = "==1.41.0" },
-    { name = "opentelemetry-proto", specifier = "==1.41.0" },
-    { name = "opentelemetry-sdk", specifier = "==1.41.0" },
-    { name = "opentelemetry-semantic-conventions", specifier = "==0.62b0" },
-    { name = "opentelemetry-util-http", specifier = "==0.62b0" },
+    { name = "langsmith", specifier = ">=0.7.30,<1.0.0" },
+    { name = "mlflow-skinny", specifier = ">=3.11.1,<4.0.0" },
+    { name = "opentelemetry-distro", specifier = ">=0.62b0,<1.0.0" },
+    { name = "opentelemetry-instrumentation-celery", specifier = ">=0.62b0,<1.0.0" },
+    { name = "opentelemetry-instrumentation-flask", specifier = ">=0.62b0,<1.0.0" },
+    { name = "opentelemetry-instrumentation-httpx", specifier = ">=0.62b0,<1.0.0" },
+    { name = "opentelemetry-instrumentation-redis", specifier = ">=0.62b0,<1.0.0" },
+    { name = "opentelemetry-instrumentation-sqlalchemy", specifier = ">=0.62b0,<1.0.0" },
+    { name = "opentelemetry-propagator-b3", specifier = ">=1.41.0,<2.0.0" },
     { name = "opik", specifier = "~=1.11.2" },
-    { name = "packaging", specifier = "~=26.0" },
-    { name = "pandas", extras = ["excel", "output-formatting", "performance"], specifier = "~=3.0.2" },
-    { name = "psycogreen", specifier = "~=1.0.2" },
-    { name = "psycopg2-binary", specifier = "~=2.9.11" },
-    { name = "pycryptodome", specifier = "==3.23.0" },
-    { name = "pydantic", specifier = "~=2.12.5" },
-    { name = "pydantic-settings", specifier = "~=2.13.1" },
-    { name = "pyjwt", specifier = "~=2.12.1" },
-    { name = "pypandoc", specifier = "~=1.13" },
-    { name = "pypdfium2", specifier = "==5.6.0" },
-    { name = "python-docx", specifier = "~=1.2.0" },
-    { name = "python-dotenv", specifier = "==1.2.2" },
-    { name = "pyyaml", specifier = "~=6.0.1" },
-    { name = "readabilipy", specifier = "~=0.3.0" },
-    { name = "redis", extras = ["hiredis"], specifier = "~=7.4.0" },
-    { name = "resend", specifier = "~=2.27.0" },
-    { name = "sendgrid", specifier = "~=6.12.5" },
-    { name = "sentry-sdk", extras = ["flask"], specifier = "~=2.57.0" },
-    { name = "sqlalchemy", specifier = "~=2.0.49" },
-    { name = "sseclient-py", specifier = "~=1.9.0" },
-    { name = "starlette", specifier = "==1.0.0" },
-    { name = "tiktoken", specifier = "~=0.12.0" },
-    { name = "transformers", specifier = "~=5.3.0" },
-    { name = "unstructured", extras = ["docx", "epub", "md", "ppt", "pptx"], specifier = "~=0.21.5" },
-    { name = "weave", specifier = ">=0.52.36" },
-    { name = "yarl", specifier = "~=1.23.0" },
+    { name = "psycogreen", specifier = ">=1.0.2" },
+    { name = "psycopg2-binary", specifier = ">=2.9.11" },
+    { name = "readabilipy", specifier = ">=0.3.0,<1.0.0" },
+    { name = "redis", extras = ["hiredis"], specifier = ">=7.4.0" },
+    { name = "resend", specifier = ">=2.27.0,<3.0.0" },
+    { name = "sendgrid", specifier = ">=6.12.5" },
+    { name = "weave", specifier = ">=0.52.36,<1.0.0" },
 ]
 
 [package.metadata.requires-dev]
 dev = [
-    { name = "basedpyright", specifier = "~=1.39.0" },
+    { name = "basedpyright", specifier = ">=1.39.0" },
     { name = "boto3-stubs", specifier = ">=1.42.88" },
     { name = "celery-types", specifier = ">=0.23.0" },
-    { name = "coverage", specifier = "~=7.13.4" },
-    { name = "dotenv-linter", specifier = "~=0.7.0" },
-    { name = "faker", specifier = "~=40.13.0" },
+    { name = "coverage", specifier = ">=7.13.4" },
+    { name = "dotenv-linter", specifier = ">=0.7.0" },
+    { name = "faker", specifier = ">=20.1.0" },
     { name = "hypothesis", specifier = ">=6.151.12" },
     { name = "import-linter", specifier = ">=2.3" },
-    { name = "lxml-stubs", specifier = "~=0.5.1" },
-    { name = "mypy", specifier = "~=1.20.1" },
-    { name = "pandas-stubs", specifier = "~=3.0.0" },
+    { name = "lxml-stubs", specifier = ">=0.5.1" },
+    { name = "mypy", specifier = ">=1.20.1" },
+    { name = "pandas-stubs", specifier = ">=3.0.0" },
     { name = "pyrefly", specifier = ">=0.60.0" },
-    { name = "pytest", specifier = "~=9.0.3" },
-    { name = "pytest-benchmark", specifier = "~=5.2.3" },
-    { name = "pytest-cov", specifier = "~=7.1.0" },
-    { name = "pytest-env", specifier = "~=1.6.0" },
-    { name = "pytest-mock", specifier = "~=3.15.1" },
+    { name = "pytest", specifier = ">=9.0.3" },
+    { name = "pytest-benchmark", specifier = ">=5.2.3" },
+    { name = "pytest-cov", specifier = ">=7.1.0" },
+    { name = "pytest-env", specifier = ">=1.6.0" },
+    { name = "pytest-mock", specifier = ">=3.15.1" },
     { name = "pytest-timeout", specifier = ">=2.4.0" },
     { name = "pytest-xdist", specifier = ">=3.8.0" },
-    { name = "ruff", specifier = "~=0.15.10" },
+    { name = "ruff", specifier = ">=0.15.10" },
     { name = "scipy-stubs", specifier = ">=1.15.3.0" },
     { name = "sseclient-py", specifier = ">=1.8.0" },
-    { name = "testcontainers", specifier = "~=4.14.2" },
-    { name = "types-aiofiles", specifier = "~=25.1.0" },
-    { name = "types-beautifulsoup4", specifier = "~=4.12.0" },
-    { name = "types-cachetools", specifier = "~=6.2.0" },
+    { name = "testcontainers", specifier = ">=4.14.2" },
+    { name = "types-aiofiles", specifier = ">=25.1.0" },
+    { name = "types-beautifulsoup4", specifier = ">=4.12.0" },
+    { name = "types-cachetools", specifier = ">=6.2.0" },
     { name = "types-cffi", specifier = ">=2.0.0.20260408" },
-    { name = "types-colorama", specifier = "~=0.4.15" },
-    { name = "types-defusedxml", specifier = "~=0.7.0" },
-    { name = "types-deprecated", specifier = "~=1.3.1" },
-    { name = "types-docutils", specifier = "~=0.22.3" },
-    { name = "types-flask-cors", specifier = "~=6.0.0" },
-    { name = "types-flask-migrate", specifier = "~=4.1.0" },
-    { name = "types-gevent", specifier = "~=26.4.0" },
-    { name = "types-greenlet", specifier = "~=3.4.0" },
-    { name = "types-html5lib", specifier = "~=1.1.11" },
+    { name = "types-colorama", specifier = ">=0.4.15" },
+    { name = "types-defusedxml", specifier = ">=0.7.0" },
+    { name = "types-deprecated", specifier = ">=1.3.1" },
+    { name = "types-docutils", specifier = ">=0.22.3" },
+    { name = "types-flask-cors", specifier = ">=6.0.0" },
+    { name = "types-flask-migrate", specifier = ">=4.1.0" },
+    { name = "types-gevent", specifier = ">=26.4.0" },
+    { name = "types-greenlet", specifier = ">=3.4.0" },
+    { name = "types-html5lib", specifier = ">=1.1.11" },
     { name = "types-jmespath", specifier = ">=1.1.0.20260408" },
-    { name = "types-markdown", specifier = "~=3.10.2" },
-    { name = "types-oauthlib", specifier = "~=3.3.0" },
-    { name = "types-objgraph", specifier = "~=3.6.0" },
-    { name = "types-olefile", specifier = "~=0.47.0" },
-    { name = "types-openpyxl", specifier = "~=3.1.5" },
-    { name = "types-pexpect", specifier = "~=4.9.0" },
-    { name = "types-protobuf", specifier = "~=7.34.1" },
-    { name = "types-psutil", specifier = "~=7.2.2" },
-    { name = "types-psycopg2", specifier = "~=2.9.21" },
-    { name = "types-pygments", specifier = "~=2.20.0" },
-    { name = "types-pymysql", specifier = "~=1.1.0" },
+    { name = "types-markdown", specifier = ">=3.10.2" },
+    { name = "types-oauthlib", specifier = ">=3.3.0" },
+    { name = "types-objgraph", specifier = ">=3.6.0" },
+    { name = "types-olefile", specifier = ">=0.47.0" },
+    { name = "types-openpyxl", specifier = ">=3.1.5" },
+    { name = "types-pexpect", specifier = ">=4.9.0" },
+    { name = "types-protobuf", specifier = ">=7.34.1" },
+    { name = "types-psutil", specifier = ">=7.2.2" },
+    { name = "types-psycopg2", specifier = ">=2.9.21" },
+    { name = "types-pygments", specifier = ">=2.20.0" },
+    { name = "types-pymysql", specifier = ">=1.1.0" },
     { name = "types-pyopenssl", specifier = ">=24.1.0" },
-    { name = "types-python-dateutil", specifier = "~=2.9.0" },
+    { name = "types-python-dateutil", specifier = ">=2.9.0" },
     { name = "types-python-http-client", specifier = ">=3.3.7.20260408" },
-    { name = "types-pywin32", specifier = "~=311.0.0" },
-    { name = "types-pyyaml", specifier = "~=6.0.12" },
+    { name = "types-pywin32", specifier = ">=311.0.0" },
+    { name = "types-pyyaml", specifier = ">=6.0.12" },
     { name = "types-redis", specifier = ">=4.6.0.20241004" },
-    { name = "types-regex", specifier = "~=2026.4.4" },
+    { name = "types-regex", specifier = ">=2026.4.4" },
     { name = "types-setuptools", specifier = ">=82.0.0.20260408" },
-    { name = "types-shapely", specifier = "~=2.1.0" },
+    { name = "types-shapely", specifier = ">=2.1.0" },
     { name = "types-simplejson", specifier = ">=3.20.0.20260408" },
     { name = "types-six", specifier = ">=1.17.0.20260408" },
     { name = "types-tensorflow", specifier = ">=2.18.0.20260408" },
     { name = "types-tqdm", specifier = ">=4.67.3.20260408" },
     { name = "types-ujson", specifier = ">=5.10.0" },
-    { name = "xinference-client", specifier = "~=2.4.0" },
+    { name = "xinference-client", specifier = ">=2.4.0" },
 ]
 storage = [
-    { name = "azure-storage-blob", specifier = "==12.28.0" },
-    { name = "bce-python-sdk", specifier = "~=0.9.69" },
-    { name = "cos-python-sdk-v5", specifier = "==1.9.41" },
-    { name = "esdk-obs-python", specifier = "==3.26.2" },
+    { name = "azure-storage-blob", specifier = ">=12.28.0" },
+    { name = "bce-python-sdk", specifier = ">=0.9.69" },
+    { name = "cos-python-sdk-v5", specifier = ">=1.9.41" },
+    { name = "esdk-obs-python", specifier = ">=3.22.2" },
     { name = "google-cloud-storage", specifier = ">=3.10.1" },
-    { name = "opendal", specifier = "~=0.46.0" },
-    { name = "oss2", specifier = "==2.19.1" },
-    { name = "supabase", specifier = "~=2.18.1" },
-    { name = "tos", specifier = "~=2.9.0" },
+    { name = "opendal", specifier = ">=0.46.0" },
+    { name = "oss2", specifier = ">=2.19.1" },
+    { name = "supabase", specifier = ">=2.18.1" },
+    { name = "tos", specifier = ">=2.9.0" },
 ]
 tools = [
-    { name = "cloudscraper", specifier = "~=1.2.71" },
-    { name = "nltk", specifier = "~=3.9.1" },
+    { name = "cloudscraper", specifier = ">=1.2.71" },
+    { name = "nltk", specifier = ">=3.9.1" },
 ]
 vdb-alibabacloud-mysql = [{ name = "dify-vdb-alibabacloud-mysql", editable = "providers/vdb/vdb-alibabacloud-mysql" }]
 vdb-all = [
@@ -1833,7 +1713,7 @@ vdb-upstash = [{ name = "dify-vdb-upstash", editable = "providers/vdb/vdb-upstas
 vdb-vastbase = [{ name = "dify-vdb-vastbase", editable = "providers/vdb/vdb-vastbase" }]
 vdb-vikingdb = [{ name = "dify-vdb-vikingdb", editable = "providers/vdb/vdb-vikingdb" }]
 vdb-weaviate = [{ name = "dify-vdb-weaviate", editable = "providers/vdb/vdb-weaviate" }]
-vdb-xinference = [{ name = "xinference-client", specifier = "~=2.4.0" }]
+vdb-xinference = [{ name = "xinference-client", specifier = ">=2.4.0" }]
 
 [[package]]
 name = "dify-vdb-alibabacloud-mysql"
@@ -3996,25 +3876,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/7d/86/db87a5393f1b1fabef53ac3ba4e6b938bb27e40a04ad7cc512098fcae032/numba-0.65.0-cp312-cp312-win_amd64.whl", hash = "sha256:59bb9f2bb9f1238dfd8e927ba50645c18ae769fef4f3d58ea0ea22a2683b91f5", size = 2749979, upload-time = "2026-04-01T03:51:37.88Z" },
 ]
 
-[[package]]
-name = "numexpr"
-version = "2.14.1"
-source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "numpy" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/cb/2f/fdba158c9dbe5caca9c3eca3eaffffb251f2fb8674bf8e2d0aed5f38d319/numexpr-2.14.1.tar.gz", hash = "sha256:4be00b1086c7b7a5c32e31558122b7b80243fe098579b170967da83f3152b48b", size = 119400, upload-time = "2025-10-13T16:17:27.351Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/9d/20/c473fc04a371f5e2f8c5749e04505c13e7a8ede27c09e9f099b2ad6f43d6/numexpr-2.14.1-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:91ebae0ab18c799b0e6b8c5a8d11e1fa3848eb4011271d99848b297468a39430", size = 162790, upload-time = "2025-10-13T16:16:34.903Z" },
-    { url = "https://files.pythonhosted.org/packages/45/93/b6760dd1904c2a498e5f43d1bb436f59383c3ddea3815f1461dfaa259373/numexpr-2.14.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:47041f2f7b9e69498fb311af672ba914a60e6e6d804011caacb17d66f639e659", size = 152196, upload-time = "2025-10-13T16:16:36.593Z" },
-    { url = "https://files.pythonhosted.org/packages/72/94/cc921e35593b820521e464cbbeaf8212bbdb07f16dc79fe283168df38195/numexpr-2.14.1-cp312-cp312-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:d686dfb2c1382d9e6e0ee0b7647f943c1886dba3adbf606c625479f35f1956c1", size = 452468, upload-time = "2025-10-13T16:13:29.531Z" },
-    { url = "https://files.pythonhosted.org/packages/d9/43/560e9ba23c02c904b5934496486d061bcb14cd3ebba2e3cf0e2dccb6c22b/numexpr-2.14.1-cp312-cp312-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:eee6d4fbbbc368e6cdd0772734d6249128d957b3b8ad47a100789009f4de7083", size = 443631, upload-time = "2025-10-13T16:15:02.473Z" },
-    { url = "https://files.pythonhosted.org/packages/7b/6c/78f83b6219f61c2c22d71ab6e6c2d4e5d7381334c6c29b77204e59edb039/numexpr-2.14.1-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:3a2839efa25f3c8d4133252ea7342d8f81226c7c4dda81f97a57e090b9d87a48", size = 1417670, upload-time = "2025-10-13T16:13:33.464Z" },
-    { url = "https://files.pythonhosted.org/packages/0e/bb/1ccc9dcaf46281568ce769888bf16294c40e98a5158e4b16c241de31d0d3/numexpr-2.14.1-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:9f9137f1351b310436662b5dc6f4082a245efa8950c3b0d9008028df92fefb9b", size = 1466212, upload-time = "2025-10-13T16:15:12.828Z" },
-    { url = "https://files.pythonhosted.org/packages/31/9f/203d82b9e39dadd91d64bca55b3c8ca432e981b822468dcef41a4418626b/numexpr-2.14.1-cp312-cp312-win32.whl", hash = "sha256:36f8d5c1bd1355df93b43d766790f9046cccfc1e32b7c6163f75bcde682cda07", size = 166996, upload-time = "2025-10-13T16:17:10.369Z" },
-    { url = "https://files.pythonhosted.org/packages/1f/67/ffe750b5452eb66de788c34e7d21ec6d886abb4d7c43ad1dc88ceb3d998f/numexpr-2.14.1-cp312-cp312-win_amd64.whl", hash = "sha256:fdd886f4b7dbaf167633ee396478f0d0aa58ea2f9e7ccc3c6431019623e8d68f", size = 160187, upload-time = "2025-10-13T16:17:11.974Z" },
-]
-
 [[package]]
 name = "numpy"
 version = "2.4.4"
@@ -4629,15 +4490,6 @@ excel = [
     { name = "xlrd" },
     { name = "xlsxwriter" },
 ]
-output-formatting = [
-    { name = "jinja2" },
-    { name = "tabulate" },
-]
-performance = [
-    { name = "bottleneck" },
-    { name = "numba" },
-    { name = "numexpr" },
-]
 
 [[package]]
 name = "pandas-stubs"
@@ -5879,13 +5731,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/c9/64/982e07b93219cb52e1cca5d272cb579e2f3eb001956c9e7a9a6d106c9473/sentry_sdk-2.57.0-py2.py3-none-any.whl", hash = "sha256:812c8bf5ff3d2f0e89c82f5ce80ab3a6423e102729c4706af7413fd1eb480585", size = 456489, upload-time = "2026-03-31T09:39:27.524Z" },
 ]
 
-[package.optional-dependencies]
-flask = [
-    { name = "blinker" },
-    { name = "flask" },
-    { name = "markupsafe" },
-]
-
 [[package]]
 name = "setuptools"
 version = "80.9.0"
@@ -6200,15 +6045,6 @@ 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 53a22aa41bea9910434ba41b2122a894239a026d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Thu, 16 Apr 2026 10:21:04 +0800
Subject: [PATCH 113/120] feat: collaboration (#30781)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
---
 .vscode/launch.json.template                  |   15 +-
 api/.env.example                              |    3 +
 api/.vscode/launch.json.example               |   18 +-
 api/app.py                                    |   29 +-
 api/app_factory.py                            |   10 +-
 api/configs/feature/__init__.py               |    8 +
 api/controllers/console/__init__.py           |    4 +
 api/controllers/console/app/workflow.py       |   99 +
 .../console/app/workflow_comment.py           |  335 ++++
 .../console/app/workflow_draft_variable.py    |   75 +
 api/controllers/console/socketio/__init__.py  |    1 +
 api/controllers/console/socketio/workflow.py  |  108 ++
 api/controllers/console/workspace/account.py  |   18 +
 api/docker/entrypoint.sh                      |    8 +-
 api/extensions/ext_socketio.py                |    5 +
 api/fields/online_user_fields.py              |   16 +
 api/fields/workflow_comment_fields.py         |   96 +
 api/libs/email_i18n.py                        |   13 +
 ...27822d22895_add_workflow_comments_table.py |   90 +
 api/models/__init__.py                        |    8 +
 api/models/comment.py                         |  218 +++
 api/models/workflow.py                        |    2 +-
 api/pyproject.toml                            |    4 +-
 .../workflow_collaboration_repository.py      |  147 ++
 api/services/feature_service.py               |    2 +
 .../workflow_collaboration_service.py         |  295 +++
 api/services/workflow_comment_service.py      |  564 ++++++
 api/services/workflow_service.py              |   82 +
 api/tasks/mail_workflow_comment_task.py       |   65 +
 ...rkflow_comment_mention_template_en-US.html |  119 ++
 ...rkflow_comment_mention_template_zh-CN.html |  119 ++
 ...rkflow_comment_mention_template_en-US.html |  119 ++
 ...rkflow_comment_mention_template_zh-CN.html |  119 ++
 api/tests/integration_tests/conftest.py       |    2 +-
 .../conftest.py                               |    2 +-
 .../services/test_feature_service.py          |    4 +
 .../controllers/console/app/test_workflow.py  |   85 +
 .../console/app/test_workflow_comment_api.py  |  201 ++
 api/tests/unit_tests/libs/test_email_i18n.py  |    1 +
 .../unit_tests/models/test_comment_models.py  |  100 +
 .../test_workflow_collaboration_repository.py |  121 ++
 .../test_workflow_collaboration_service.py    |  608 ++++++
 .../services/test_workflow_comment_service.py |  578 ++++++
 .../services/test_workflow_service.py         |   75 +-
 api/uv.lock                                   |   78 +-
 docker/.env.example                           |    7 +
 docker/docker-compose-template.yaml           |    1 +
 docker/docker-compose.yaml                    |    3 +
 docker/nginx/conf.d/default.conf.template     |    8 +
 .../assets/public/common/enter-key.svg        |    4 +
 .../assets/public/other/comment.svg           |    3 +
 pnpm-lock.yaml                                |   89 +
 pnpm-workspace.yaml                           |    2 +
 web/.env.example                              |    2 +
 .../app/app-access-control-flow.test.tsx      |   36 +-
 web/__tests__/app/app-publisher-flow.test.tsx |   40 +-
 .../apps/app-list-browsing-flow.test.tsx      |    4 +
 web/__tests__/apps/create-app-flow.test.tsx   |    4 +
 .../[appId]/overview/card-view.tsx            |   44 +-
 .../tracing/provider-config-modal.tsx         |    2 +-
 .../__tests__/use-app-info-actions.spec.ts    |   74 +
 .../app-info/use-app-info-actions.ts          |   57 +-
 .../__tests__/access-control-dialog.spec.tsx  |    1 -
 .../__tests__/index.spec.tsx                  |    1 -
 .../app-publisher/__tests__/index.spec.tsx    |    5 +
 .../app/app-publisher/features-wrapper.tsx    |    7 +-
 .../components/app/app-publisher/index.tsx    |   59 +-
 .../configuration/hooks/use-configuration.ts  |   63 +-
 .../create-app-modal/__tests__/index.spec.tsx |   10 +-
 .../components/apps/__tests__/list.spec.tsx   |   15 +-
 web/app/components/apps/app-card.tsx          |   64 +-
 web/app/components/apps/list.tsx              |   61 +-
 .../header/__tests__/index.spec.tsx           |    1 +
 .../components/base/content-dialog/index.tsx  |    2 +-
 .../icons/src/public/common/EnterKey.json     |   36 +
 .../base/icons/src/public/common/EnterKey.tsx |   20 +
 .../base/icons/src/public/other/Comment.json  |   26 +
 .../base/icons/src/public/other/Comment.tsx   |   20 +
 .../base/icons/src/public/other/index.ts      |    2 +-
 .../__tests__/plugin-paragraph.spec.tsx       |    1 -
 .../prompt-editor/__tests__/index.spec.tsx    |    4 +
 .../components/base/prompt-editor/index.tsx   |   31 +
 .../prompt-editor/plugins/update-block.tsx    |    8 +-
 .../base/ui/avatar/__tests__/index.spec.tsx   |   19 +-
 .../base/ui/avatar/index.stories.tsx          |   26 +-
 web/app/components/base/ui/avatar/index.tsx   |   32 +-
 .../base/user-avatar-list/index.tsx           |   99 +
 .../document-list/__tests__/index.spec.tsx    |   10 +
 .../__tests__/use-dataset-card-state.spec.ts  |    4 +-
 .../develop/secret-key/secret-key-modal.tsx   |    2 +-
 .../account-setting/__tests__/index.spec.tsx  |   36 +
 .../mcp/__tests__/mcp-service-card.spec.tsx   |   43 +
 .../components/tools/mcp/mcp-server-modal.tsx |   19 +
 .../components/tools/mcp/mcp-service-card.tsx |   69 +-
 .../__tests__/workflow-main.spec.tsx          |  208 ++-
 .../workflow-header/features-trigger.tsx      |    9 +-
 .../workflow-app/components/workflow-main.tsx |  171 +-
 .../components/workflow-panel.tsx             |    3 +
 .../__tests__/use-nodes-sync-draft.spec.ts    |   61 +
 .../hooks/use-nodes-sync-draft.ts             |   62 +-
 web/app/components/workflow-app/index.tsx     |   15 +-
 .../workflow/__tests__/features.spec.tsx      |   48 +-
 .../__tests__/panel-contextmenu.spec.tsx      |   18 +
 .../__tests__/update-dsl-modal.spec.tsx       |    9 +
 .../__tests__/workflow-edge-events.spec.tsx   |  239 +++
 .../workflow/candidate-node-main.tsx          |   10 +-
 .../collaboration/components/user-cursors.tsx |   78 +
 ...laboration-manager.logs-and-events.spec.ts |  398 ++++
 ...llaboration-manager.merge-behavior.test.ts |  331 ++++
 ...n-manager.socket-and-subscriptions.spec.ts | 1136 +++++++++++
 .../__tests__/collaboration-manager.test.ts   |  763 ++++++++
 .../core/__tests__/crdt-provider.test.ts      |  138 ++
 .../core/__tests__/event-emitter.test.ts      |   93 +
 .../core/__tests__/websocket-manager.test.ts  |  161 ++
 .../core/collaboration-manager.ts             | 1658 +++++++++++++++++
 .../collaboration/core/crdt-provider.ts       |   41 +
 .../collaboration/core/event-emitter.ts       |   51 +
 .../collaboration/core/websocket-manager.ts   |  157 ++
 .../hooks/__tests__/use-collaboration.spec.ts |  151 ++
 .../collaboration/hooks/use-collaboration.ts  |  150 ++
 .../services/__tests__/cursor-service.spec.ts |   86 +
 .../collaboration/services/cursor-service.ts  |   90 +
 .../collaboration/types/collaboration.ts      |   92 +
 .../workflow/collaboration/types/websocket.ts |   15 +
 .../collaboration/utils/user-color.ts         |   12 +
 .../components/workflow/comment-manager.tsx   |   55 +
 .../workflow/comment/comment-icon.spec.tsx    |  148 ++
 .../workflow/comment/comment-icon.tsx         |  269 +++
 .../workflow/comment/comment-input.spec.tsx   |  109 ++
 .../workflow/comment/comment-input.tsx        |  184 ++
 .../workflow/comment/comment-preview.spec.tsx |   86 +
 .../workflow/comment/comment-preview.tsx      |   59 +
 .../workflow/comment/cursor.spec.tsx          |   56 +
 .../components/workflow/comment/cursor.tsx    |   29 +
 .../workflow/comment/mention-input.spec.tsx   |  151 ++
 .../workflow/comment/mention-input.tsx        |  661 +++++++
 .../workflow/comment/thread.spec.tsx          |  291 +++
 .../components/workflow/comment/thread.tsx    |  765 ++++++++
 web/app/components/workflow/custom-edge.tsx   |    7 +-
 web/app/components/workflow/features.tsx      |   49 +-
 .../__tests__/header-in-restoring.spec.tsx    |    4 +
 .../header/__tests__/header-layouts.spec.tsx  |   22 +-
 .../header/__tests__/undo-redo.spec.tsx       |   17 +-
 .../workflow/header/header-in-normal.tsx      |    2 +
 .../workflow/header/header-in-restoring.tsx   |   66 +-
 .../workflow/header/online-users.tsx          |  251 +++
 .../components/workflow/header/undo-redo.tsx  |    2 +-
 .../workflow/header/view-workflow-history.tsx |   16 +-
 .../__tests__/use-leader-restore.spec.ts      |  262 +++
 .../__tests__/use-nodes-interactions.spec.ts  |  475 ++++-
 .../use-selection-interactions.spec.ts        |    5 +
 .../__tests__/use-workflow-comment.spec.ts    |  404 ++++
 web/app/components/workflow/hooks/index.ts    |    2 +
 .../hooks/use-auto-generate-webhook-url.ts    |   14 +-
 .../hooks/use-collaborative-workflow.ts       |   85 +
 .../workflow/hooks/use-edges-interactions.ts  |   54 +-
 .../workflow/hooks/use-leader-restore.ts      |  160 ++
 .../workflow/hooks/use-node-data-update.ts    |   15 +-
 .../workflow/hooks/use-nodes-interactions.ts  |  192 +-
 .../hooks/use-selection-interactions.ts       |   19 +-
 .../workflow/hooks/use-shortcuts.ts           |   20 +
 .../workflow/hooks/use-workflow-comment.ts    |  581 ++++++
 .../workflow/hooks/use-workflow-organize.ts   |   12 +-
 .../hooks/use-workflow-panel-interactions.ts  |   12 +
 .../components/workflow/hooks/use-workflow.ts |  124 +-
 web/app/components/workflow/index.tsx         |  294 ++-
 .../nodes/_base/__tests__/node.spec.tsx       |   34 +
 .../form-input-item.branches.spec.tsx         |   12 +
 .../__tests__/form-input-item.spec.tsx        |   12 +
 .../_base/components/error-handle/hooks.ts    |   11 +-
 .../components/title-description-input.tsx    |   22 +-
 .../variable/__tests__/utils.spec.ts          |  159 ++
 .../var-reference-picker.branches.spec.tsx    |   13 +
 .../__tests__/var-reference-picker.spec.tsx   |   13 +
 .../nodes/_base/components/variable/utils.ts  |  122 +-
 .../_base/components/workflow-panel/index.tsx |   53 +
 .../hooks/__tests__/use-node-crud.spec.ts     |   87 +
 .../nodes/_base/hooks/use-node-crud.ts        |   12 +-
 .../components/workflow/nodes/_base/node.tsx  |   50 +-
 .../__tests__/use-config.helpers.spec.ts      |   16 +
 .../assigner/__tests__/use-config.spec.tsx    |   20 +
 .../var-list/__tests__/index.spec.tsx         |   13 +
 .../nodes/assigner/use-config.helpers.ts      |    3 +-
 .../workflow/nodes/assigner/utils.ts          |   43 +-
 .../workflow/nodes/data-source-empty/hooks.ts |   18 +-
 .../nodes/http/hooks/use-key-value-list.ts    |   44 +-
 .../workflow/nodes/iteration/node.tsx         |    2 +-
 .../nodes/iteration/use-interactions.ts       |   27 +-
 .../nodes/llm/__tests__/panel.spec.tsx        |   20 +
 .../components/loop-variables/form-item.tsx   |    5 +-
 .../components/workflow/nodes/loop/node.tsx   |    2 +-
 .../workflow/nodes/loop/use-config.ts         |    4 +
 .../workflow/nodes/loop/use-interactions.ts   |   30 +-
 .../extract-parameter/__tests__/list.spec.tsx |   38 +-
 .../__tests__/update.spec.tsx                 |    8 +-
 .../components/__tests__/integration.spec.tsx |    8 +-
 .../__tests__/parameter-table.spec.tsx        |   30 +-
 .../workflow/nodes/trigger-webhook/panel.tsx  |    2 +
 .../note-node/note-editor/context.tsx         |   73 +-
 .../components/workflow/operator/control.tsx  |   22 +-
 .../components/workflow/operator/index.tsx    |   59 +-
 .../workflow/operator/zoom-in-out.tsx         |  107 +-
 .../components/workflow/panel-contextmenu.tsx |   23 +
 .../__tests__/index.spec.tsx                  |   27 +-
 .../panel/chat-variable-panel/index.tsx       |  129 +-
 .../comments-panel/__tests__/index.spec.tsx   |  167 ++
 .../workflow/panel/comments-panel/index.tsx   |  205 ++
 .../panel/env-panel/__tests__/index.spec.tsx  |   17 +
 .../workflow/panel/env-panel/index.tsx        |  120 +-
 .../panel/version-history-panel/index.tsx     |   55 +-
 .../workflow/selection-contextmenu.tsx        |   46 +-
 .../store/__tests__/workflow-store.spec.ts    |    4 +-
 .../workflow/__tests__/workflow-slice.spec.ts |    8 +-
 .../workflow/store/workflow/comment-slice.ts  |   58 +
 .../workflow/store/workflow/index.ts          |    4 +
 .../workflow/store/workflow/panel-slice.ts    |   16 +
 .../workflow/store/workflow/workflow-slice.ts |   33 +-
 web/app/components/workflow/style.css         |    6 +
 web/app/components/workflow/types.ts          |    1 +
 .../components/workflow/update-dsl-modal.tsx  |    2 +
 .../variable-inspect/__tests__/panel.spec.tsx |   20 +-
 web/config/index.ts                           |    4 +
 web/contract/console/account.ts               |   14 +
 web/contract/console/apps.ts                  |   13 +
 web/contract/console/workflow-comment.ts      |  253 +++
 web/contract/console/workflow.ts              |   80 +
 web/contract/router.ts                        |   21 +-
 web/docker/entrypoint.sh                      |    1 +
 web/env.ts                                    |    2 +
 web/eslint-suppressions.json                  |   55 +-
 web/i18n/ar-TN/workflow.json                  |   34 +
 web/i18n/de-DE/workflow.json                  |   34 +
 web/i18n/en-US/workflow.json                  |   34 +
 web/i18n/es-ES/workflow.json                  |   34 +
 web/i18n/fa-IR/workflow.json                  |   33 +
 web/i18n/fr-FR/workflow.json                  |   34 +
 web/i18n/hi-IN/workflow.json                  |   34 +
 web/i18n/id-ID/workflow.json                  |   34 +
 web/i18n/it-IT/workflow.json                  |   34 +
 web/i18n/ja-JP/workflow.json                  |   34 +
 web/i18n/ko-KR/workflow.json                  |   34 +
 web/i18n/nl-NL/workflow.json                  |    8 +
 web/i18n/pl-PL/workflow.json                  |   34 +
 web/i18n/pt-BR/workflow.json                  |   34 +
 web/i18n/ro-RO/workflow.json                  |   34 +
 web/i18n/ru-RU/workflow.json                  |   34 +
 web/i18n/sl-SI/workflow.json                  |   34 +
 web/i18n/th-TH/workflow.json                  |   34 +
 web/i18n/tr-TR/workflow.json                  |   34 +
 web/i18n/uk-UA/workflow.json                  |   34 +
 web/i18n/vi-VN/workflow.json                  |   34 +
 web/i18n/zh-Hans/workflow.json                |   34 +
 web/i18n/zh-Hant/workflow.json                |   34 +
 web/models/app.ts                             |   14 +
 web/package.json                              |    2 +
 web/proxy.ts                                  |    2 +-
 web/service/apps.ts                           |   29 +-
 web/service/common.ts                         |    5 +
 web/service/workflow-comment.ts               |  103 +
 web/service/workflow.ts                       |   36 +-
 web/types/feature.ts                          |    2 +
 web/vite.config.ts                            |    4 +
 262 files changed, 21060 insertions(+), 798 deletions(-)
 create mode 100644 api/controllers/console/app/workflow_comment.py
 create mode 100644 api/controllers/console/socketio/__init__.py
 create mode 100644 api/controllers/console/socketio/workflow.py
 create mode 100644 api/extensions/ext_socketio.py
 create mode 100644 api/fields/online_user_fields.py
 create mode 100644 api/fields/workflow_comment_fields.py
 create mode 100644 api/migrations/versions/2026_04_15_1726-227822d22895_add_workflow_comments_table.py
 create mode 100644 api/models/comment.py
 create mode 100644 api/repositories/workflow_collaboration_repository.py
 create mode 100644 api/services/workflow_collaboration_service.py
 create mode 100644 api/services/workflow_comment_service.py
 create mode 100644 api/tasks/mail_workflow_comment_task.py
 create mode 100644 api/templates/without-brand/workflow_comment_mention_template_en-US.html
 create mode 100644 api/templates/without-brand/workflow_comment_mention_template_zh-CN.html
 create mode 100644 api/templates/workflow_comment_mention_template_en-US.html
 create mode 100644 api/templates/workflow_comment_mention_template_zh-CN.html
 create mode 100644 api/tests/unit_tests/controllers/console/app/test_workflow_comment_api.py
 create mode 100644 api/tests/unit_tests/models/test_comment_models.py
 create mode 100644 api/tests/unit_tests/repositories/test_workflow_collaboration_repository.py
 create mode 100644 api/tests/unit_tests/services/test_workflow_collaboration_service.py
 create mode 100644 api/tests/unit_tests/services/test_workflow_comment_service.py
 create mode 100644 packages/iconify-collections/assets/public/common/enter-key.svg
 create mode 100644 packages/iconify-collections/assets/public/other/comment.svg
 create mode 100644 web/app/components/base/icons/src/public/common/EnterKey.json
 create mode 100644 web/app/components/base/icons/src/public/common/EnterKey.tsx
 create mode 100644 web/app/components/base/icons/src/public/other/Comment.json
 create mode 100644 web/app/components/base/icons/src/public/other/Comment.tsx
 create mode 100644 web/app/components/base/user-avatar-list/index.tsx
 create mode 100644 web/app/components/workflow/collaboration/components/user-cursors.tsx
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts
 create mode 100644 web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts
 create mode 100644 web/app/components/workflow/collaboration/core/collaboration-manager.ts
 create mode 100644 web/app/components/workflow/collaboration/core/crdt-provider.ts
 create mode 100644 web/app/components/workflow/collaboration/core/event-emitter.ts
 create mode 100644 web/app/components/workflow/collaboration/core/websocket-manager.ts
 create mode 100644 web/app/components/workflow/collaboration/hooks/__tests__/use-collaboration.spec.ts
 create mode 100644 web/app/components/workflow/collaboration/hooks/use-collaboration.ts
 create mode 100644 web/app/components/workflow/collaboration/services/__tests__/cursor-service.spec.ts
 create mode 100644 web/app/components/workflow/collaboration/services/cursor-service.ts
 create mode 100644 web/app/components/workflow/collaboration/types/collaboration.ts
 create mode 100644 web/app/components/workflow/collaboration/types/websocket.ts
 create mode 100644 web/app/components/workflow/collaboration/utils/user-color.ts
 create mode 100644 web/app/components/workflow/comment-manager.tsx
 create mode 100644 web/app/components/workflow/comment/comment-icon.spec.tsx
 create mode 100644 web/app/components/workflow/comment/comment-icon.tsx
 create mode 100644 web/app/components/workflow/comment/comment-input.spec.tsx
 create mode 100644 web/app/components/workflow/comment/comment-input.tsx
 create mode 100644 web/app/components/workflow/comment/comment-preview.spec.tsx
 create mode 100644 web/app/components/workflow/comment/comment-preview.tsx
 create mode 100644 web/app/components/workflow/comment/cursor.spec.tsx
 create mode 100644 web/app/components/workflow/comment/cursor.tsx
 create mode 100644 web/app/components/workflow/comment/mention-input.spec.tsx
 create mode 100644 web/app/components/workflow/comment/mention-input.tsx
 create mode 100644 web/app/components/workflow/comment/thread.spec.tsx
 create mode 100644 web/app/components/workflow/comment/thread.tsx
 create mode 100644 web/app/components/workflow/header/online-users.tsx
 create mode 100644 web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts
 create mode 100644 web/app/components/workflow/hooks/__tests__/use-workflow-comment.spec.ts
 create mode 100644 web/app/components/workflow/hooks/use-collaborative-workflow.ts
 create mode 100644 web/app/components/workflow/hooks/use-leader-restore.ts
 create mode 100644 web/app/components/workflow/hooks/use-workflow-comment.ts
 create mode 100644 web/app/components/workflow/nodes/_base/components/variable/__tests__/utils.spec.ts
 create mode 100644 web/app/components/workflow/nodes/_base/hooks/__tests__/use-node-crud.spec.ts
 create mode 100644 web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
 create mode 100644 web/app/components/workflow/panel/comments-panel/index.tsx
 create mode 100644 web/app/components/workflow/store/workflow/comment-slice.ts
 create mode 100644 web/contract/console/account.ts
 create mode 100644 web/contract/console/workflow-comment.ts
 create mode 100644 web/contract/console/workflow.ts
 create mode 100644 web/service/workflow-comment.ts

diff --git a/.vscode/launch.json.template b/.vscode/launch.json.template
index c3e2c50c52..2611b75c6c 100644
--- a/.vscode/launch.json.template
+++ b/.vscode/launch.json.template
@@ -2,21 +2,10 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Python: Flask API",
+            "name": "Python: API (gevent)",
             "type": "debugpy",
             "request": "launch",
-            "module": "flask",
-            "env": {
-                "FLASK_APP": "app.py",
-                "FLASK_ENV": "development"
-            },
-            "args": [
-                "run",
-                "--host=0.0.0.0",
-                "--port=5001",
-                "--no-debugger",
-                "--no-reload"
-            ],
+            "program": "${workspaceFolder}/api/app.py",
             "jinja": true,
             "justMyCode": true,
             "cwd": "${workspaceFolder}/api",
diff --git a/api/.env.example b/api/.env.example
index beb820e797..7455d4a0e9 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -33,6 +33,9 @@ TRIGGER_URL=http://localhost:5001
 # The time in seconds after the signature is rejected
 FILES_ACCESS_TIMEOUT=300
 
+# Collaboration mode toggle
+ENABLE_COLLABORATION_MODE=false
+
 # Access token expiration time in minutes
 ACCESS_TOKEN_EXPIRE_MINUTES=60
 
diff --git a/api/.vscode/launch.json.example b/api/.vscode/launch.json.example
index 6bdfa2c039..1001559176 100644
--- a/api/.vscode/launch.json.example
+++ b/api/.vscode/launch.json.example
@@ -3,29 +3,21 @@
     "compounds": [
         {
             "name": "Launch Flask and Celery",
-            "configurations": ["Python: Flask", "Python: Celery"]
+            "configurations": ["Python: API (gevent)", "Python: Celery"]
         }
     ],
     "configurations": [
         {
-            "name": "Python: Flask",
-            "consoleName": "Flask",
+            "name": "Python: API (gevent)",
+            "consoleName": "API",
             "type": "debugpy",
             "request": "launch",
             "python": "${workspaceFolder}/.venv/bin/python",
             "cwd": "${workspaceFolder}",
             "envFile": ".env",
-            "module": "flask",
+            "program": "${workspaceFolder}/app.py",
             "justMyCode": true,
-            "jinja": true,
-            "env": {
-                "FLASK_APP": "app.py",
-                "GEVENT_SUPPORT": "True"
-            },
-            "args": [
-                "run",
-                "--port=5001"
-            ]
+            "jinja": true
         },
         {
             "name": "Python: Celery",
diff --git a/api/app.py b/api/app.py
index c018c8a045..e53b037be5 100644
--- a/api/app.py
+++ b/api/app.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import logging
 import sys
 from typing import TYPE_CHECKING, cast
 
@@ -9,17 +10,35 @@ if TYPE_CHECKING:
     celery: Celery
 
 
+HOST = "0.0.0.0"
+PORT = 5001
+logger = logging.getLogger(__name__)
+
+
 def is_db_command() -> bool:
     if len(sys.argv) > 1 and sys.argv[0].endswith("flask") and sys.argv[1] == "db":
         return True
     return False
 
 
+def log_startup_banner(host: str, port: int) -> None:
+    debugger_attached = sys.gettrace() is not None
+    logger.info("Serving Dify API via gevent WebSocket server")
+    logger.info("Bound to http://%s:%s", host, port)
+    logger.info("Debugger attached: %s", "on" if debugger_attached else "off")
+    logger.info("Press CTRL+C to quit")
+
+
 # create app
+flask_app = None
+socketio_app = None
+
 if is_db_command():
     from app_factory import create_migrations_app
 
     app = create_migrations_app()
+    socketio_app = app
+    flask_app = app
 else:
     # Gunicorn and Celery handle monkey patching automatically in production by
     # specifying the `gevent` worker class. Manual monkey patching is not required here.
@@ -30,8 +49,14 @@ else:
 
     from app_factory import create_app
 
-    app = create_app()
+    socketio_app, flask_app = create_app()
+    app = flask_app
     celery = cast("Celery", app.extensions["celery"])
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=5001)
+    from gevent import pywsgi
+    from geventwebsocket.handler import WebSocketHandler  # type: ignore[reportMissingTypeStubs]
+
+    log_startup_banner(HOST, PORT)
+    server = pywsgi.WSGIServer((HOST, PORT), socketio_app, handler_class=WebSocketHandler)
+    server.serve_forever()
diff --git a/api/app_factory.py b/api/app_factory.py
index 76838f9925..48e50ceae9 100644
--- a/api/app_factory.py
+++ b/api/app_factory.py
@@ -1,6 +1,7 @@
 import logging
 import time
 
+import socketio  # type: ignore[reportMissingTypeStubs]
 from flask import request
 from opentelemetry.trace import get_current_span
 from opentelemetry.trace.span import INVALID_SPAN_ID, INVALID_TRACE_ID
@@ -10,6 +11,7 @@ from contexts.wrapper import RecyclableContextVar
 from controllers.console.error import UnauthorizedAndForceLogout
 from core.logging.context import init_request_context
 from dify_app import DifyApp
+from extensions.ext_socketio import sio
 from services.enterprise.enterprise_service import EnterpriseService
 from services.feature_service import LicenseStatus
 
@@ -122,14 +124,18 @@ def create_flask_app_with_configs() -> DifyApp:
     return dify_app
 
 
-def create_app() -> DifyApp:
+def create_app() -> tuple[socketio.WSGIApp, DifyApp]:
     start_time = time.perf_counter()
     app = create_flask_app_with_configs()
     initialize_extensions(app)
+
+    sio.app = app
+    socketio_app = socketio.WSGIApp(sio, app)
+
     end_time = time.perf_counter()
     if dify_config.DEBUG:
         logger.info("Finished create_app (%s ms)", round((end_time - start_time) * 1000, 2))
-    return app
+    return socketio_app, app
 
 
 def initialize_extensions(app: DifyApp):
diff --git a/api/configs/feature/__init__.py b/api/configs/feature/__init__.py
index d37cff63e9..ae49ae47d0 100644
--- a/api/configs/feature/__init__.py
+++ b/api/configs/feature/__init__.py
@@ -1274,6 +1274,13 @@ class PositionConfig(BaseSettings):
         return {item.strip() for item in self.POSITION_TOOL_EXCLUDES.split(",") if item.strip() != ""}
 
 
+class CollaborationConfig(BaseSettings):
+    ENABLE_COLLABORATION_MODE: bool = Field(
+        description="Whether to enable collaboration mode features across the workspace",
+        default=False,
+    )
+
+
 class LoginConfig(BaseSettings):
     ENABLE_EMAIL_CODE_LOGIN: bool = Field(
         description="whether to enable email code login",
@@ -1399,6 +1406,7 @@ class FeatureConfig(
     WorkflowConfig,
     WorkflowNodeExecutionConfig,
     WorkspaceConfig,
+    CollaborationConfig,
     LoginConfig,
     AccountConfig,
     SwaggerUIConfig,
diff --git a/api/controllers/console/__init__.py b/api/controllers/console/__init__.py
index d624b10b22..980e828945 100644
--- a/api/controllers/console/__init__.py
+++ b/api/controllers/console/__init__.py
@@ -65,6 +65,7 @@ from .app import (
     statistic,
     workflow,
     workflow_app_log,
+    workflow_comment,
     workflow_draft_variable,
     workflow_run,
     workflow_statistic,
@@ -116,6 +117,7 @@ from .explore import (
     saved_message,
     trial,
 )
+from .socketio import workflow as socketio_workflow  # pyright: ignore[reportUnusedImport]
 
 # Import tag controllers
 from .tag import tags
@@ -201,6 +203,7 @@ __all__ = [
     "saved_message",
     "setup",
     "site",
+    "socketio_workflow",
     "spec",
     "statistic",
     "tags",
@@ -211,6 +214,7 @@ __all__ = [
     "website",
     "workflow",
     "workflow_app_log",
+    "workflow_comment",
     "workflow_draft_variable",
     "workflow_run",
     "workflow_statistic",
diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index 5e6ff87d62..cca4bbee1e 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -7,6 +7,7 @@ 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
@@ -39,6 +40,7 @@ from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 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 libs import helper
 from libs.datetime_utils import naive_utc_now
@@ -47,6 +49,7 @@ 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 repositories.workflow_collaboration_repository import WORKFLOW_ONLINE_USERS_PREFIX
 from services.app_generate_service import AppGenerateService
 from services.errors.app import IsDraftWorkflowError, WorkflowHashNotEqualError, WorkflowNotFoundError
 from services.errors.llm import InvokeRateLimitError
@@ -57,6 +60,7 @@ _file_access_controller = DatabaseFileAccessController()
 LISTENING_RETRY_IN = 2000
 DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 RESTORE_SOURCE_WORKFLOW_MUST_BE_PUBLISHED_MESSAGE = "source workflow must be published"
+MAX_WORKFLOW_ONLINE_USERS_QUERY_IDS = 50
 
 # Register models for flask_restx to avoid dict type issues in Swagger
 # Register in dependency order: base models first, then dependent models
@@ -150,6 +154,14 @@ class ConvertToWorkflowPayload(BaseModel):
     icon_background: str | None = None
 
 
+class WorkflowFeaturesPayload(BaseModel):
+    features: dict[str, Any] = Field(..., description="Workflow feature configuration")
+
+
+class WorkflowOnlineUsersQuery(BaseModel):
+    app_ids: str = Field(..., description="Comma-separated app IDs")
+
+
 class DraftWorkflowTriggerRunPayload(BaseModel):
     node_id: str
 
@@ -173,6 +185,8 @@ reg(DefaultBlockConfigQuery)
 reg(ConvertToWorkflowPayload)
 reg(WorkflowListQuery)
 reg(WorkflowUpdatePayload)
+reg(WorkflowFeaturesPayload)
+reg(WorkflowOnlineUsersQuery)
 reg(DraftWorkflowTriggerRunPayload)
 reg(DraftWorkflowTriggerRunAllPayload)
 
@@ -931,6 +945,32 @@ class ConvertToWorkflowApi(Resource):
         }
 
 
+@console_ns.route("/apps/<uuid:app_id>/workflows/draft/features")
+class WorkflowFeaturesApi(Resource):
+    """Update draft workflow features."""
+
+    @console_ns.expect(console_ns.models[WorkflowFeaturesPayload.__name__])
+    @console_ns.doc("update_workflow_features")
+    @console_ns.doc(description="Update draft workflow features")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.response(200, "Workflow features updated successfully")
+    @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 = WorkflowFeaturesPayload.model_validate(console_ns.payload or {})
+        features = args.features
+
+        workflow_service = WorkflowService()
+        workflow_service.update_draft_workflow_features(app_model=app_model, features=features, account=current_user)
+
+        return {"result": "success"}
+
+
 @console_ns.route("/apps/<uuid:app_id>/workflows")
 class PublishedAllWorkflowApi(Resource):
     @console_ns.expect(console_ns.models[WorkflowListQuery.__name__])
@@ -1340,3 +1380,62 @@ class DraftWorkflowTriggerRunAllApi(Resource):
                     "status": "error",
                 }
             ), 400
+
+
+@console_ns.route("/apps/workflows/online-users")
+class WorkflowOnlineUsersApi(Resource):
+    @console_ns.expect(console_ns.models[WorkflowOnlineUsersQuery.__name__])
+    @console_ns.doc("get_workflow_online_users")
+    @console_ns.doc(description="Get workflow online users")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @marshal_with(online_user_list_fields)
+    def get(self):
+        args = WorkflowOnlineUsersQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+
+        app_ids = list(dict.fromkeys(app_id.strip() for app_id in args.app_ids.split(",") if app_id.strip()))
+        if len(app_ids) > MAX_WORKFLOW_ONLINE_USERS_QUERY_IDS:
+            raise BadRequest(f"Maximum {MAX_WORKFLOW_ONLINE_USERS_QUERY_IDS} app_ids are allowed per request.")
+
+        if not app_ids:
+            return {"data": []}
+
+        _, current_tenant_id = current_account_with_tenant()
+        workflow_service = WorkflowService()
+        accessible_app_ids = workflow_service.get_accessible_app_ids(app_ids, current_tenant_id)
+
+        results = []
+        for app_id in app_ids:
+            if app_id not in accessible_app_ids:
+                continue
+
+            users_json = redis_client.hgetall(f"{WORKFLOW_ONLINE_USERS_PREFIX}{app_id}")
+
+            users = []
+            for _, user_info_json in users_json.items():
+                try:
+                    user_info = json.loads(user_info_json)
+                except Exception:
+                    continue
+
+                if not isinstance(user_info, dict):
+                    continue
+
+                avatar = user_info.get("avatar")
+                if isinstance(avatar, str) and avatar and not avatar.startswith(("http://", "https://")):
+                    try:
+                        user_info["avatar"] = file_helpers.get_signed_file_url(avatar)
+                    except Exception as exc:
+                        logger.warning(
+                            "Failed to sign workflow online user avatar; using original value. "
+                            "app_id=%s avatar=%s error=%s",
+                            app_id,
+                            avatar,
+                            exc,
+                        )
+
+                users.append(user_info)
+            results.append({"app_id": app_id, "users": users})
+
+        return {"data": results}
diff --git a/api/controllers/console/app/workflow_comment.py b/api/controllers/console/app/workflow_comment.py
new file mode 100644
index 0000000000..e7c3e982a6
--- /dev/null
+++ b/api/controllers/console/app/workflow_comment.py
@@ -0,0 +1,335 @@
+import logging
+
+from flask_restx import Resource, marshal_with
+from pydantic import BaseModel, Field, TypeAdapter
+
+from controllers.common.schema import register_schema_models
+from controllers.console import console_ns
+from controllers.console.app.wraps import get_app_model
+from controllers.console.wraps import account_initialization_required, edit_permission_required, setup_required
+from fields.member_fields import AccountWithRole
+from fields.workflow_comment_fields import (
+    workflow_comment_basic_fields,
+    workflow_comment_create_fields,
+    workflow_comment_detail_fields,
+    workflow_comment_reply_create_fields,
+    workflow_comment_reply_update_fields,
+    workflow_comment_resolve_fields,
+    workflow_comment_update_fields,
+)
+from libs.login import current_user, login_required
+from models import App
+from services.account_service import TenantService
+from services.workflow_comment_service import WorkflowCommentService
+
+logger = logging.getLogger(__name__)
+DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
+
+
+class WorkflowCommentCreatePayload(BaseModel):
+    content: str = Field(..., description="Comment content")
+    position_x: float = Field(..., description="Comment X position")
+    position_y: float = Field(..., description="Comment Y position")
+    mentioned_user_ids: list[str] = Field(default_factory=list, description="Mentioned user IDs")
+
+
+class WorkflowCommentUpdatePayload(BaseModel):
+    content: str = Field(..., description="Comment content")
+    position_x: float | None = Field(default=None, description="Comment X position")
+    position_y: float | None = Field(default=None, description="Comment Y position")
+    mentioned_user_ids: list[str] | None = Field(
+        default=None,
+        description="Mentioned user IDs. Omit to keep existing mentions.",
+    )
+
+
+class WorkflowCommentReplyPayload(BaseModel):
+    content: str = Field(..., description="Reply content")
+    mentioned_user_ids: list[str] = Field(default_factory=list, description="Mentioned user IDs")
+
+
+class WorkflowCommentMentionUsersPayload(BaseModel):
+    users: list[AccountWithRole]
+
+
+for model in (
+    WorkflowCommentCreatePayload,
+    WorkflowCommentUpdatePayload,
+    WorkflowCommentReplyPayload,
+):
+    console_ns.schema_model(model.__name__, model.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
+register_schema_models(console_ns, AccountWithRole, WorkflowCommentMentionUsersPayload)
+
+workflow_comment_basic_model = console_ns.model("WorkflowCommentBasic", workflow_comment_basic_fields)
+workflow_comment_detail_model = console_ns.model("WorkflowCommentDetail", workflow_comment_detail_fields)
+workflow_comment_create_model = console_ns.model("WorkflowCommentCreate", workflow_comment_create_fields)
+workflow_comment_update_model = console_ns.model("WorkflowCommentUpdate", workflow_comment_update_fields)
+workflow_comment_resolve_model = console_ns.model("WorkflowCommentResolve", workflow_comment_resolve_fields)
+workflow_comment_reply_create_model = console_ns.model(
+    "WorkflowCommentReplyCreate", workflow_comment_reply_create_fields
+)
+workflow_comment_reply_update_model = console_ns.model(
+    "WorkflowCommentReplyUpdate", workflow_comment_reply_update_fields
+)
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflow/comments")
+class WorkflowCommentListApi(Resource):
+    """API for listing and creating workflow comments."""
+
+    @console_ns.doc("list_workflow_comments")
+    @console_ns.doc(description="Get all comments for a workflow")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.response(200, "Comments retrieved successfully", workflow_comment_basic_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_basic_model, envelope="data")
+    def get(self, app_model: App):
+        """Get all comments for a workflow."""
+        comments = WorkflowCommentService.get_comments(tenant_id=current_user.current_tenant_id, app_id=app_model.id)
+
+        return comments
+
+    @console_ns.doc("create_workflow_comment")
+    @console_ns.doc(description="Create a new workflow comment")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.expect(console_ns.models[WorkflowCommentCreatePayload.__name__])
+    @console_ns.response(201, "Comment created successfully", workflow_comment_create_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_create_model)
+    @edit_permission_required
+    def post(self, app_model: App):
+        """Create a new workflow comment."""
+        payload = WorkflowCommentCreatePayload.model_validate(console_ns.payload or {})
+
+        result = WorkflowCommentService.create_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            created_by=current_user.id,
+            content=payload.content,
+            position_x=payload.position_x,
+            position_y=payload.position_y,
+            mentioned_user_ids=payload.mentioned_user_ids,
+        )
+
+        return result, 201
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflow/comments/<string:comment_id>")
+class WorkflowCommentDetailApi(Resource):
+    """API for managing individual workflow comments."""
+
+    @console_ns.doc("get_workflow_comment")
+    @console_ns.doc(description="Get a specific workflow comment")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID"})
+    @console_ns.response(200, "Comment retrieved successfully", workflow_comment_detail_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_detail_model)
+    def get(self, app_model: App, comment_id: str):
+        """Get a specific workflow comment."""
+        comment = WorkflowCommentService.get_comment(
+            tenant_id=current_user.current_tenant_id, app_id=app_model.id, comment_id=comment_id
+        )
+
+        return comment
+
+    @console_ns.doc("update_workflow_comment")
+    @console_ns.doc(description="Update a workflow comment")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID"})
+    @console_ns.expect(console_ns.models[WorkflowCommentUpdatePayload.__name__])
+    @console_ns.response(200, "Comment updated successfully", workflow_comment_update_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_update_model)
+    @edit_permission_required
+    def put(self, app_model: App, comment_id: str):
+        """Update a workflow comment."""
+        payload = WorkflowCommentUpdatePayload.model_validate(console_ns.payload or {})
+
+        result = WorkflowCommentService.update_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            user_id=current_user.id,
+            content=payload.content,
+            position_x=payload.position_x,
+            position_y=payload.position_y,
+            mentioned_user_ids=payload.mentioned_user_ids,
+        )
+
+        return result
+
+    @console_ns.doc("delete_workflow_comment")
+    @console_ns.doc(description="Delete a workflow comment")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID"})
+    @console_ns.response(204, "Comment deleted successfully")
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @edit_permission_required
+    def delete(self, app_model: App, comment_id: str):
+        """Delete a workflow comment."""
+        WorkflowCommentService.delete_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            user_id=current_user.id,
+        )
+
+        return {"result": "success"}, 204
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflow/comments/<string:comment_id>/resolve")
+class WorkflowCommentResolveApi(Resource):
+    """API for resolving and reopening workflow comments."""
+
+    @console_ns.doc("resolve_workflow_comment")
+    @console_ns.doc(description="Resolve a workflow comment")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID"})
+    @console_ns.response(200, "Comment resolved successfully", workflow_comment_resolve_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_resolve_model)
+    @edit_permission_required
+    def post(self, app_model: App, comment_id: str):
+        """Resolve a workflow comment."""
+        comment = WorkflowCommentService.resolve_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            user_id=current_user.id,
+        )
+
+        return comment
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflow/comments/<string:comment_id>/replies")
+class WorkflowCommentReplyApi(Resource):
+    """API for managing comment replies."""
+
+    @console_ns.doc("create_workflow_comment_reply")
+    @console_ns.doc(description="Add a reply to a workflow comment")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID"})
+    @console_ns.expect(console_ns.models[WorkflowCommentReplyPayload.__name__])
+    @console_ns.response(201, "Reply created successfully", workflow_comment_reply_create_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_reply_create_model)
+    @edit_permission_required
+    def post(self, app_model: App, comment_id: str):
+        """Add a reply to a workflow comment."""
+        # Validate comment access first
+        WorkflowCommentService.validate_comment_access(
+            comment_id=comment_id, tenant_id=current_user.current_tenant_id, app_id=app_model.id
+        )
+
+        payload = WorkflowCommentReplyPayload.model_validate(console_ns.payload or {})
+
+        result = WorkflowCommentService.create_reply(
+            comment_id=comment_id,
+            content=payload.content,
+            created_by=current_user.id,
+            mentioned_user_ids=payload.mentioned_user_ids,
+        )
+
+        return result, 201
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflow/comments/<string:comment_id>/replies/<string:reply_id>")
+class WorkflowCommentReplyDetailApi(Resource):
+    """API for managing individual comment replies."""
+
+    @console_ns.doc("update_workflow_comment_reply")
+    @console_ns.doc(description="Update a comment reply")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID", "reply_id": "Reply ID"})
+    @console_ns.expect(console_ns.models[WorkflowCommentReplyPayload.__name__])
+    @console_ns.response(200, "Reply updated successfully", workflow_comment_reply_update_model)
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @marshal_with(workflow_comment_reply_update_model)
+    @edit_permission_required
+    def put(self, app_model: App, comment_id: str, reply_id: str):
+        """Update a comment reply."""
+        # Validate comment access first
+        WorkflowCommentService.validate_comment_access(
+            comment_id=comment_id, tenant_id=current_user.current_tenant_id, app_id=app_model.id
+        )
+
+        payload = WorkflowCommentReplyPayload.model_validate(console_ns.payload or {})
+
+        reply = WorkflowCommentService.update_reply(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            reply_id=reply_id,
+            user_id=current_user.id,
+            content=payload.content,
+            mentioned_user_ids=payload.mentioned_user_ids,
+        )
+
+        return reply
+
+    @console_ns.doc("delete_workflow_comment_reply")
+    @console_ns.doc(description="Delete a comment reply")
+    @console_ns.doc(params={"app_id": "Application ID", "comment_id": "Comment ID", "reply_id": "Reply ID"})
+    @console_ns.response(204, "Reply deleted successfully")
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    @edit_permission_required
+    def delete(self, app_model: App, comment_id: str, reply_id: str):
+        """Delete a comment reply."""
+        # Validate comment access first
+        WorkflowCommentService.validate_comment_access(
+            comment_id=comment_id, tenant_id=current_user.current_tenant_id, app_id=app_model.id
+        )
+
+        WorkflowCommentService.delete_reply(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            reply_id=reply_id,
+            user_id=current_user.id,
+        )
+
+        return {"result": "success"}, 204
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflow/comments/mention-users")
+class WorkflowCommentMentionUsersApi(Resource):
+    """API for getting mentionable users for workflow comments."""
+
+    @console_ns.doc("workflow_comment_mention_users")
+    @console_ns.doc(description="Get all users in current tenant for mentions")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.response(
+        200, "Mentionable users retrieved successfully", console_ns.models[WorkflowCommentMentionUsersPayload.__name__]
+    )
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model()
+    def get(self, app_model: App):
+        """Get all users in current tenant for mentions."""
+        members = TenantService.get_tenant_members(current_user.current_tenant)
+        users = TypeAdapter(list[AccountWithRole]).validate_python(members, from_attributes=True)
+        response = WorkflowCommentMentionUsersPayload(users=users)
+        return response.model_dump(mode="json"), 200
diff --git a/api/controllers/console/app/workflow_draft_variable.py b/api/controllers/console/app/workflow_draft_variable.py
index 657e794ac4..640189b070 100644
--- a/api/controllers/console/app/workflow_draft_variable.py
+++ b/api/controllers/console/app/workflow_draft_variable.py
@@ -22,6 +22,7 @@ from controllers.web.error import InvalidArgumentError, NotFoundError
 from core.app.file_access import DatabaseFileAccessController
 from core.workflow.variable_prefixes import CONVERSATION_VARIABLE_NODE_ID, SYSTEM_VARIABLE_NODE_ID
 from extensions.ext_database import db
+from factories import variable_factory
 from factories.file_factory import build_from_mapping, build_from_mappings
 from factories.variable_factory import build_segment_with_type
 from libs.login import current_user, login_required
@@ -45,6 +46,16 @@ class WorkflowDraftVariableUpdatePayload(BaseModel):
     value: Any | None = Field(default=None, description="Variable value")
 
 
+class ConversationVariableUpdatePayload(BaseModel):
+    conversation_variables: list[dict[str, Any]] = Field(
+        ..., description="Conversation variables for the draft workflow"
+    )
+
+
+class EnvironmentVariableUpdatePayload(BaseModel):
+    environment_variables: list[dict[str, Any]] = Field(..., description="Environment variables for the draft workflow")
+
+
 console_ns.schema_model(
     WorkflowDraftVariableListQuery.__name__,
     WorkflowDraftVariableListQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
@@ -53,6 +64,14 @@ console_ns.schema_model(
     WorkflowDraftVariableUpdatePayload.__name__,
     WorkflowDraftVariableUpdatePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
 )
+console_ns.schema_model(
+    ConversationVariableUpdatePayload.__name__,
+    ConversationVariableUpdatePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+)
+console_ns.schema_model(
+    EnvironmentVariableUpdatePayload.__name__,
+    EnvironmentVariableUpdatePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+)
 
 
 def _convert_values_to_json_serializable_object(value: Segment):
@@ -510,6 +529,34 @@ class ConversationVariableCollectionApi(Resource):
         db.session.commit()
         return _get_variable_list(app_model, CONVERSATION_VARIABLE_NODE_ID)
 
+    @console_ns.expect(console_ns.models[ConversationVariableUpdatePayload.__name__])
+    @console_ns.doc("update_conversation_variables")
+    @console_ns.doc(description="Update conversation variables for workflow draft")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.response(200, "Conversation variables updated successfully")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    @get_app_model(mode=AppMode.ADVANCED_CHAT)
+    def post(self, app_model: App):
+        payload = ConversationVariableUpdatePayload.model_validate(console_ns.payload or {})
+
+        workflow_service = WorkflowService()
+
+        conversation_variables_list = payload.conversation_variables
+        conversation_variables = [
+            variable_factory.build_conversation_variable_from_mapping(obj) for obj in conversation_variables_list
+        ]
+
+        workflow_service.update_draft_workflow_conversation_variables(
+            app_model=app_model,
+            account=current_user,
+            conversation_variables=conversation_variables,
+        )
+
+        return {"result": "success"}
+
 
 @console_ns.route("/apps/<uuid:app_id>/workflows/draft/system-variables")
 class SystemVariableCollectionApi(Resource):
@@ -561,3 +608,31 @@ class EnvironmentVariableCollectionApi(Resource):
             )
 
         return {"items": env_vars_list}
+
+    @console_ns.expect(console_ns.models[EnvironmentVariableUpdatePayload.__name__])
+    @console_ns.doc("update_environment_variables")
+    @console_ns.doc(description="Update environment variables for workflow draft")
+    @console_ns.doc(params={"app_id": "Application ID"})
+    @console_ns.response(200, "Environment variables updated successfully")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @edit_permission_required
+    @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
+    def post(self, app_model: App):
+        payload = EnvironmentVariableUpdatePayload.model_validate(console_ns.payload or {})
+
+        workflow_service = WorkflowService()
+
+        environment_variables_list = payload.environment_variables
+        environment_variables = [
+            variable_factory.build_environment_variable_from_mapping(obj) for obj in environment_variables_list
+        ]
+
+        workflow_service.update_draft_workflow_environment_variables(
+            app_model=app_model,
+            account=current_user,
+            environment_variables=environment_variables,
+        )
+
+        return {"result": "success"}
diff --git a/api/controllers/console/socketio/__init__.py b/api/controllers/console/socketio/__init__.py
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/api/controllers/console/socketio/__init__.py
@@ -0,0 +1 @@
+
diff --git a/api/controllers/console/socketio/workflow.py b/api/controllers/console/socketio/workflow.py
new file mode 100644
index 0000000000..b4f03593fd
--- /dev/null
+++ b/api/controllers/console/socketio/workflow.py
@@ -0,0 +1,108 @@
+import logging
+from collections.abc import Callable
+from typing import cast
+
+from flask import Request as FlaskRequest
+
+from extensions.ext_socketio import sio
+from libs.passport import PassportService
+from libs.token import extract_access_token
+from repositories.workflow_collaboration_repository import WorkflowCollaborationRepository
+from services.account_service import AccountService
+from services.workflow_collaboration_service import WorkflowCollaborationService
+
+repository = WorkflowCollaborationRepository()
+collaboration_service = WorkflowCollaborationService(repository, sio)
+
+
+def _sio_on(event: str) -> Callable[[Callable[..., object]], Callable[..., object]]:
+    return cast(Callable[[Callable[..., object]], Callable[..., object]], sio.on(event))
+
+
+@_sio_on("connect")
+def socket_connect(sid, environ, auth):
+    """
+    WebSocket connect event, do authentication here.
+    """
+    try:
+        request_environ = FlaskRequest(environ)
+        token = extract_access_token(request_environ)
+    except Exception:
+        logging.exception("Failed to extract token")
+        token = None
+
+    if not token:
+        logging.warning("Socket connect rejected: missing token (sid=%s)", sid)
+        return False
+
+    try:
+        decoded = PassportService().verify(token)
+        user_id = decoded.get("user_id")
+        if not user_id:
+            logging.warning("Socket connect rejected: missing user_id (sid=%s)", sid)
+            return False
+
+        with sio.app.app_context():
+            user = AccountService.load_logged_in_account(account_id=user_id)
+            if not user:
+                logging.warning("Socket connect rejected: user not found (user_id=%s, sid=%s)", user_id, sid)
+                return False
+            if not user.has_edit_permission:
+                logging.warning("Socket connect rejected: no edit permission (user_id=%s, sid=%s)", user_id, sid)
+                return False
+
+            collaboration_service.save_socket_identity(sid, user)
+            return True
+
+    except Exception:
+        logging.exception("Socket authentication failed")
+        return False
+
+
+@_sio_on("user_connect")
+def handle_user_connect(sid, data):
+    """
+    Handle user connect event. Each session (tab) is treated as an independent collaborator.
+    """
+    workflow_id = data.get("workflow_id")
+    if not workflow_id:
+        return {"msg": "workflow_id is required"}, 400
+
+    result = collaboration_service.authorize_and_join_workflow_room(workflow_id, sid)
+    if not result:
+        return {"msg": "unauthorized"}, 401
+
+    user_id, is_leader = result
+    return {"msg": "connected", "user_id": user_id, "sid": sid, "isLeader": is_leader}
+
+
+@_sio_on("disconnect")
+def handle_disconnect(sid):
+    """
+    Handle session disconnect event. Remove the specific session from online users.
+    """
+    collaboration_service.disconnect_session(sid)
+
+
+@_sio_on("collaboration_event")
+def handle_collaboration_event(sid, data):
+    """
+    Handle general collaboration events, include:
+    1. mouse_move
+    2. vars_and_features_update
+    3. sync_request (ask leader to update graph)
+    4. app_state_update
+    5. mcp_server_update
+    6. workflow_update
+    7. comments_update
+    8. node_panel_presence
+    """
+    return collaboration_service.relay_collaboration_event(sid, data)
+
+
+@_sio_on("graph_event")
+def handle_graph_event(sid, data):
+    """
+    Handle graph events - simple broadcast relay.
+    """
+    return collaboration_service.relay_graph_event(sid, data)
diff --git a/api/controllers/console/workspace/account.py b/api/controllers/console/workspace/account.py
index 582c38052e..9de56acc4d 100644
--- a/api/controllers/console/workspace/account.py
+++ b/api/controllers/console/workspace/account.py
@@ -6,6 +6,7 @@ from typing import Any, Literal
 import pytz
 from flask import request
 from flask_restx import Resource
+from graphon.file import helpers as file_helpers
 from pydantic import BaseModel, Field, field_validator, model_validator
 from sqlalchemy import select
 
@@ -75,6 +76,10 @@ class AccountAvatarPayload(BaseModel):
     avatar: str
 
 
+class AccountAvatarQuery(BaseModel):
+    avatar: str = Field(..., description="Avatar file ID")
+
+
 class AccountInterfaceLanguagePayload(BaseModel):
     interface_language: str
 
@@ -160,6 +165,7 @@ def reg(cls: type[BaseModel]):
 reg(AccountInitPayload)
 reg(AccountNamePayload)
 reg(AccountAvatarPayload)
+reg(AccountAvatarQuery)
 reg(AccountInterfaceLanguagePayload)
 reg(AccountInterfaceThemePayload)
 reg(AccountTimezonePayload)
@@ -309,6 +315,18 @@ class AccountNameApi(Resource):
 
 @console_ns.route("/account/avatar")
 class AccountAvatarApi(Resource):
+    @console_ns.expect(console_ns.models[AccountAvatarQuery.__name__])
+    @console_ns.doc("get_account_avatar")
+    @console_ns.doc(description="Get account avatar url")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self):
+        args = AccountAvatarQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+
+        avatar_url = file_helpers.get_signed_file_url(args.avatar)
+        return {"avatar_url": avatar_url}
+
     @console_ns.expect(console_ns.models[AccountAvatarPayload.__name__])
     @setup_required
     @login_required
diff --git a/api/docker/entrypoint.sh b/api/docker/entrypoint.sh
index 6b904b7d0d..48533efe66 100755
--- a/api/docker/entrypoint.sh
+++ b/api/docker/entrypoint.sh
@@ -119,14 +119,16 @@ elif [[ "${MODE}" == "job" ]]; then
 
 else
   if [[ "${DEBUG}" == "true" ]]; then
-    exec flask run --host=${DIFY_BIND_ADDRESS:-0.0.0.0} --port=${DIFY_PORT:-5001} --debug
+    export HOST=${DIFY_BIND_ADDRESS:-0.0.0.0}
+    export PORT=${DIFY_PORT:-5001}
+    exec python -m app
   else
     exec gunicorn \
       --bind "${DIFY_BIND_ADDRESS:-0.0.0.0}:${DIFY_PORT:-5001}" \
       --workers ${SERVER_WORKER_AMOUNT:-1} \
-      --worker-class ${SERVER_WORKER_CLASS:-gevent} \
+      --worker-class ${SERVER_WORKER_CLASS:-geventwebsocket.gunicorn.workers.GeventWebSocketWorker} \
       --worker-connections ${SERVER_WORKER_CONNECTIONS:-10} \
       --timeout ${GUNICORN_TIMEOUT:-200} \
-      app:app
+      app:socketio_app
   fi
 fi
diff --git a/api/extensions/ext_socketio.py b/api/extensions/ext_socketio.py
new file mode 100644
index 0000000000..5ed82bac8d
--- /dev/null
+++ b/api/extensions/ext_socketio.py
@@ -0,0 +1,5 @@
+import socketio  # type: ignore[reportMissingTypeStubs]
+
+from configs import dify_config
+
+sio = socketio.Server(async_mode="gevent", cors_allowed_origins=dify_config.CONSOLE_CORS_ALLOW_ORIGINS)
diff --git a/api/fields/online_user_fields.py b/api/fields/online_user_fields.py
new file mode 100644
index 0000000000..bdbe19679c
--- /dev/null
+++ b/api/fields/online_user_fields.py
@@ -0,0 +1,16 @@
+from flask_restx import fields
+
+online_user_partial_fields = {
+    "user_id": fields.String,
+    "username": fields.String,
+    "avatar": fields.String,
+}
+
+workflow_online_users_fields = {
+    "app_id": fields.String,
+    "users": fields.List(fields.Nested(online_user_partial_fields)),
+}
+
+online_user_list_fields = {
+    "data": fields.List(fields.Nested(workflow_online_users_fields)),
+}
diff --git a/api/fields/workflow_comment_fields.py b/api/fields/workflow_comment_fields.py
new file mode 100644
index 0000000000..c708dd3460
--- /dev/null
+++ b/api/fields/workflow_comment_fields.py
@@ -0,0 +1,96 @@
+from flask_restx import fields
+
+from libs.helper import AvatarUrlField, TimestampField
+
+# basic account fields for comments
+account_fields = {
+    "id": fields.String,
+    "name": fields.String,
+    "email": fields.String,
+    "avatar_url": AvatarUrlField,
+}
+
+# Comment mention fields
+workflow_comment_mention_fields = {
+    "mentioned_user_id": fields.String,
+    "mentioned_user_account": fields.Nested(account_fields, allow_null=True),
+    "reply_id": fields.String,
+}
+
+# Comment reply fields
+workflow_comment_reply_fields = {
+    "id": fields.String,
+    "content": fields.String,
+    "created_by": fields.String,
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
+    "created_at": TimestampField,
+}
+
+# Basic comment fields (for list views)
+workflow_comment_basic_fields = {
+    "id": fields.String,
+    "position_x": fields.Float,
+    "position_y": fields.Float,
+    "content": fields.String,
+    "created_by": fields.String,
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
+    "created_at": TimestampField,
+    "updated_at": TimestampField,
+    "resolved": fields.Boolean,
+    "resolved_at": TimestampField,
+    "resolved_by": fields.String,
+    "resolved_by_account": fields.Nested(account_fields, allow_null=True),
+    "reply_count": fields.Integer,
+    "mention_count": fields.Integer,
+    "participants": fields.List(fields.Nested(account_fields)),
+}
+
+# Detailed comment fields (for single comment view)
+workflow_comment_detail_fields = {
+    "id": fields.String,
+    "position_x": fields.Float,
+    "position_y": fields.Float,
+    "content": fields.String,
+    "created_by": fields.String,
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
+    "created_at": TimestampField,
+    "updated_at": TimestampField,
+    "resolved": fields.Boolean,
+    "resolved_at": TimestampField,
+    "resolved_by": fields.String,
+    "resolved_by_account": fields.Nested(account_fields, allow_null=True),
+    "replies": fields.List(fields.Nested(workflow_comment_reply_fields)),
+    "mentions": fields.List(fields.Nested(workflow_comment_mention_fields)),
+}
+
+# Comment creation response fields (simplified)
+workflow_comment_create_fields = {
+    "id": fields.String,
+    "created_at": TimestampField,
+}
+
+# Comment update response fields (simplified)
+workflow_comment_update_fields = {
+    "id": fields.String,
+    "updated_at": TimestampField,
+}
+
+# Comment resolve response fields
+workflow_comment_resolve_fields = {
+    "id": fields.String,
+    "resolved": fields.Boolean,
+    "resolved_at": TimestampField,
+    "resolved_by": fields.String,
+}
+
+# Reply creation response fields (simplified)
+workflow_comment_reply_create_fields = {
+    "id": fields.String,
+    "created_at": TimestampField,
+}
+
+# Reply update response fields
+workflow_comment_reply_update_fields = {
+    "id": fields.String,
+    "updated_at": TimestampField,
+}
diff --git a/api/libs/email_i18n.py b/api/libs/email_i18n.py
index 0828cf80bf..1519f07bb1 100644
--- a/api/libs/email_i18n.py
+++ b/api/libs/email_i18n.py
@@ -37,6 +37,7 @@ class EmailType(StrEnum):
     ENTERPRISE_CUSTOM = auto()
     QUEUE_MONITOR_ALERT = auto()
     DOCUMENT_CLEAN_NOTIFY = auto()
+    WORKFLOW_COMMENT_MENTION = auto()
     EMAIL_REGISTER = auto()
     EMAIL_REGISTER_WHEN_ACCOUNT_EXIST = auto()
     RESET_PASSWORD_WHEN_ACCOUNT_NOT_EXIST_NO_REGISTER = auto()
@@ -453,6 +454,18 @@ def create_default_email_config() -> EmailI18nConfig:
                 branded_template_path="clean_document_job_mail_template_zh-CN.html",
             ),
         },
+        EmailType.WORKFLOW_COMMENT_MENTION: {
+            EmailLanguage.EN_US: EmailTemplate(
+                subject="You were mentioned in a workflow comment",
+                template_path="workflow_comment_mention_template_en-US.html",
+                branded_template_path="without-brand/workflow_comment_mention_template_en-US.html",
+            ),
+            EmailLanguage.ZH_HANS: EmailTemplate(
+                subject="你在工作流评论中被提及",
+                template_path="workflow_comment_mention_template_zh-CN.html",
+                branded_template_path="without-brand/workflow_comment_mention_template_zh-CN.html",
+            ),
+        },
         EmailType.TRIGGER_EVENTS_LIMIT_SANDBOX: {
             EmailLanguage.EN_US: EmailTemplate(
                 subject="You’ve reached your Sandbox Trigger Events limit",
diff --git a/api/migrations/versions/2026_04_15_1726-227822d22895_add_workflow_comments_table.py b/api/migrations/versions/2026_04_15_1726-227822d22895_add_workflow_comments_table.py
new file mode 100644
index 0000000000..0548c932b5
--- /dev/null
+++ b/api/migrations/versions/2026_04_15_1726-227822d22895_add_workflow_comments_table.py
@@ -0,0 +1,90 @@
+"""Add workflow comments table
+
+Revision ID: 227822d22895
+Revises: 8574b23a38fd
+Create Date: 2025-08-22 17:26:15.255980
+
+"""
+from alembic import op
+import models as models
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '227822d22895'
+down_revision = '8574b23a38fd'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('workflow_comments',
+    sa.Column('id', models.types.StringUUID(), nullable=False),
+    sa.Column('tenant_id', models.types.StringUUID(), nullable=False),
+    sa.Column('app_id', models.types.StringUUID(), nullable=False),
+    sa.Column('position_x', sa.Float(), nullable=False),
+    sa.Column('position_y', sa.Float(), nullable=False),
+    sa.Column('content', sa.Text(), nullable=False),
+    sa.Column('created_by', models.types.StringUUID(), nullable=False),
+    sa.Column('created_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('updated_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('resolved', sa.Boolean(), server_default=sa.text('false'), nullable=False),
+    sa.Column('resolved_at', sa.DateTime(), nullable=True),
+    sa.Column('resolved_by', models.types.StringUUID(), nullable=True),
+    sa.PrimaryKeyConstraint('id', name='workflow_comments_pkey')
+    )
+    with op.batch_alter_table('workflow_comments', schema=None) as batch_op:
+        batch_op.create_index('workflow_comments_app_idx', ['tenant_id', 'app_id'], unique=False)
+        batch_op.create_index('workflow_comments_created_at_idx', ['created_at'], unique=False)
+
+    op.create_table('workflow_comment_replies',
+    sa.Column('id', models.types.StringUUID(), nullable=False),
+    sa.Column('comment_id', models.types.StringUUID(), nullable=False),
+    sa.Column('content', sa.Text(), nullable=False),
+    sa.Column('created_by', models.types.StringUUID(), nullable=False),
+    sa.Column('created_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('updated_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.ForeignKeyConstraint(['comment_id'], ['workflow_comments.id'], name=op.f('workflow_comment_replies_comment_id_fkey'), ondelete='CASCADE'),
+    sa.PrimaryKeyConstraint('id', name='workflow_comment_replies_pkey')
+    )
+    with op.batch_alter_table('workflow_comment_replies', schema=None) as batch_op:
+        batch_op.create_index('comment_replies_comment_idx', ['comment_id'], unique=False)
+        batch_op.create_index('comment_replies_created_at_idx', ['created_at'], unique=False)
+
+    op.create_table('workflow_comment_mentions',
+    sa.Column('id', models.types.StringUUID(), nullable=False),
+    sa.Column('comment_id', models.types.StringUUID(), nullable=False),
+    sa.Column('reply_id', models.types.StringUUID(), nullable=True),
+    sa.Column('mentioned_user_id', models.types.StringUUID(), nullable=False),
+    sa.ForeignKeyConstraint(['comment_id'], ['workflow_comments.id'], name=op.f('workflow_comment_mentions_comment_id_fkey'), ondelete='CASCADE'),
+    sa.ForeignKeyConstraint(['reply_id'], ['workflow_comment_replies.id'], name=op.f('workflow_comment_mentions_reply_id_fkey'), ondelete='CASCADE'),
+    sa.PrimaryKeyConstraint('id', name='workflow_comment_mentions_pkey')
+    )
+    with op.batch_alter_table('workflow_comment_mentions', schema=None) as batch_op:
+        batch_op.create_index('comment_mentions_comment_idx', ['comment_id'], unique=False)
+        batch_op.create_index('comment_mentions_reply_idx', ['reply_id'], unique=False)
+        batch_op.create_index('comment_mentions_user_idx', ['mentioned_user_id'], unique=False)
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('workflow_comment_mentions', schema=None) as batch_op:
+        batch_op.drop_index('comment_mentions_user_idx')
+        batch_op.drop_index('comment_mentions_reply_idx')
+        batch_op.drop_index('comment_mentions_comment_idx')
+
+    op.drop_table('workflow_comment_mentions')
+    with op.batch_alter_table('workflow_comment_replies', schema=None) as batch_op:
+        batch_op.drop_index('comment_replies_created_at_idx')
+        batch_op.drop_index('comment_replies_comment_idx')
+
+    op.drop_table('workflow_comment_replies')
+    with op.batch_alter_table('workflow_comments', schema=None) as batch_op:
+        batch_op.drop_index('workflow_comments_created_at_idx')
+        batch_op.drop_index('workflow_comments_app_idx')
+
+    op.drop_table('workflow_comments')
+    # ### end Alembic commands ###
diff --git a/api/models/__init__.py b/api/models/__init__.py
index fcae07f948..85be9ca3bd 100644
--- a/api/models/__init__.py
+++ b/api/models/__init__.py
@@ -9,6 +9,11 @@ from .account import (
     TenantStatus,
 )
 from .api_based_extension import APIBasedExtension, APIBasedExtensionPoint
+from .comment import (
+    WorkflowComment,
+    WorkflowCommentMention,
+    WorkflowCommentReply,
+)
 from .dataset import (
     AppDatasetJoin,
     Dataset,
@@ -208,6 +213,9 @@ __all__ = [
     "WorkflowAppLog",
     "WorkflowAppLogCreatedFrom",
     "WorkflowArchiveLog",
+    "WorkflowComment",
+    "WorkflowCommentMention",
+    "WorkflowCommentReply",
     "WorkflowNodeExecutionModel",
     "WorkflowNodeExecutionOffload",
     "WorkflowNodeExecutionTriggeredFrom",
diff --git a/api/models/comment.py b/api/models/comment.py
new file mode 100644
index 0000000000..308339e6f6
--- /dev/null
+++ b/api/models/comment.py
@@ -0,0 +1,218 @@
+"""Workflow comment models."""
+
+from datetime import datetime
+from typing import Optional
+
+from sqlalchemy import Index, func
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+
+from .account import Account
+from .base import Base
+from .engine import db
+from .types import StringUUID
+
+
+class WorkflowComment(Base):
+    """Workflow comment model for canvas commenting functionality.
+
+    Comments are associated with apps rather than specific workflow versions,
+    since an app has only one draft workflow at a time and comments should persist
+    across workflow version changes.
+
+    Attributes:
+        id: Comment ID
+        tenant_id: Workspace ID
+        app_id: App ID (primary association, comments belong to apps)
+        position_x: X coordinate on canvas
+        position_y: Y coordinate on canvas
+        content: Comment content
+        created_by: Creator account ID
+        created_at: Creation time
+        updated_at: Last update time
+        resolved: Whether comment is resolved
+        resolved_at: Resolution time
+        resolved_by: Resolver account ID
+    """
+
+    __tablename__ = "workflow_comments"
+    __table_args__ = (
+        db.PrimaryKeyConstraint("id", name="workflow_comments_pkey"),
+        Index("workflow_comments_app_idx", "tenant_id", "app_id"),
+        Index("workflow_comments_created_at_idx", "created_at"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    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)
+    position_y: Mapped[float] = mapped_column(db.Float)
+    content: Mapped[str] = mapped_column(db.Text, nullable=False)
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    created_at: Mapped[datetime] = mapped_column(db.DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_at: Mapped[datetime] = mapped_column(
+        db.DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+    resolved: Mapped[bool] = mapped_column(db.Boolean, nullable=False, server_default=db.text("false"))
+    resolved_at: Mapped[datetime | None] = mapped_column(db.DateTime)
+    resolved_by: Mapped[str | None] = mapped_column(StringUUID)
+
+    # Relationships
+    replies: Mapped[list["WorkflowCommentReply"]] = relationship(
+        "WorkflowCommentReply", back_populates="comment", cascade="all, delete-orphan"
+    )
+    mentions: Mapped[list["WorkflowCommentMention"]] = relationship(
+        "WorkflowCommentMention", back_populates="comment", cascade="all, delete-orphan"
+    )
+
+    @property
+    def created_by_account(self):
+        """Get creator account."""
+        if hasattr(self, "_created_by_account_cache"):
+            return self._created_by_account_cache
+        return db.session.get(Account, self.created_by)
+
+    def cache_created_by_account(self, account: Account | None) -> None:
+        """Cache creator account to avoid extra queries."""
+        self._created_by_account_cache = account
+
+    @property
+    def resolved_by_account(self):
+        """Get resolver account."""
+        if hasattr(self, "_resolved_by_account_cache"):
+            return self._resolved_by_account_cache
+        if self.resolved_by:
+            return db.session.get(Account, self.resolved_by)
+        return None
+
+    def cache_resolved_by_account(self, account: Account | None) -> None:
+        """Cache resolver account to avoid extra queries."""
+        self._resolved_by_account_cache = account
+
+    @property
+    def reply_count(self):
+        """Get reply count."""
+        return len(self.replies)
+
+    @property
+    def mention_count(self):
+        """Get mention count."""
+        return len(self.mentions)
+
+    @property
+    def participants(self):
+        """Get all participants (creator + repliers + mentioned users)."""
+        participant_ids: set[str] = set()
+        participants: list[Account] = []
+
+        # Use account properties to reuse preloaded caches and avoid hidden N+1.
+        if self.created_by not in participant_ids:
+            participant_ids.add(self.created_by)
+            created_by_account = self.created_by_account
+            if created_by_account:
+                participants.append(created_by_account)
+
+        for reply in self.replies:
+            if reply.created_by in participant_ids:
+                continue
+            participant_ids.add(reply.created_by)
+            reply_account = reply.created_by_account
+            if reply_account:
+                participants.append(reply_account)
+
+        for mention in self.mentions:
+            if mention.mentioned_user_id in participant_ids:
+                continue
+            participant_ids.add(mention.mentioned_user_id)
+            mentioned_account = mention.mentioned_user_account
+            if mentioned_account:
+                participants.append(mentioned_account)
+
+        return participants
+
+
+class WorkflowCommentReply(Base):
+    """Workflow comment reply model.
+
+    Attributes:
+        id: Reply ID
+        comment_id: Parent comment ID
+        content: Reply content
+        created_by: Creator account ID
+        created_at: Creation time
+    """
+
+    __tablename__ = "workflow_comment_replies"
+    __table_args__ = (
+        db.PrimaryKeyConstraint("id", name="workflow_comment_replies_pkey"),
+        Index("comment_replies_comment_idx", "comment_id"),
+        Index("comment_replies_created_at_idx", "created_at"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    comment_id: Mapped[str] = mapped_column(
+        StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
+    )
+    content: Mapped[str] = mapped_column(db.Text, nullable=False)
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    created_at: Mapped[datetime] = mapped_column(db.DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_at: Mapped[datetime] = mapped_column(
+        db.DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+    # Relationships
+    comment: Mapped["WorkflowComment"] = relationship("WorkflowComment", back_populates="replies")
+
+    @property
+    def created_by_account(self):
+        """Get creator account."""
+        if hasattr(self, "_created_by_account_cache"):
+            return self._created_by_account_cache
+        return db.session.get(Account, self.created_by)
+
+    def cache_created_by_account(self, account: Account | None) -> None:
+        """Cache creator account to avoid extra queries."""
+        self._created_by_account_cache = account
+
+
+class WorkflowCommentMention(Base):
+    """Workflow comment mention model.
+
+    Mentions are only for internal accounts since end users
+    cannot access workflow canvas and commenting features.
+
+    Attributes:
+        id: Mention ID
+        comment_id: Parent comment ID
+        mentioned_user_id: Mentioned account ID
+    """
+
+    __tablename__ = "workflow_comment_mentions"
+    __table_args__ = (
+        db.PrimaryKeyConstraint("id", name="workflow_comment_mentions_pkey"),
+        Index("comment_mentions_comment_idx", "comment_id"),
+        Index("comment_mentions_reply_idx", "reply_id"),
+        Index("comment_mentions_user_idx", "mentioned_user_id"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuidv7()"))
+    comment_id: Mapped[str] = mapped_column(
+        StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
+    )
+    reply_id: Mapped[str | None] = mapped_column(
+        StringUUID, db.ForeignKey("workflow_comment_replies.id", ondelete="CASCADE"), nullable=True
+    )
+    mentioned_user_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+
+    # Relationships
+    comment: Mapped["WorkflowComment"] = relationship("WorkflowComment", back_populates="mentions")
+    reply: Mapped[Optional["WorkflowCommentReply"]] = relationship("WorkflowCommentReply")
+
+    @property
+    def mentioned_user_account(self):
+        """Get mentioned account."""
+        if hasattr(self, "_mentioned_user_account_cache"):
+            return self._mentioned_user_account_cache
+        return db.session.get(Account, self.mentioned_user_id)
+
+    def cache_mentioned_user_account(self, account: Account | None) -> None:
+        """Cache mentioned account to avoid extra queries."""
+        self._mentioned_user_account_cache = account
diff --git a/api/models/workflow.py b/api/models/workflow.py
index 63abf8c3b6..d688043920 100644
--- a/api/models/workflow.py
+++ b/api/models/workflow.py
@@ -490,7 +490,7 @@ class Workflow(Base):  # bug
 
         :return: hash
         """
-        entity = {"graph": self.graph_dict, "features": self.features_dict}
+        entity = {"graph": self.graph_dict}
 
         return helper.generate_text_hash(json.dumps(entity, sort_keys=True))
 
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 76b6cf8d99..80f1b42a73 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -11,13 +11,16 @@ dependencies = [
     "croniter>=6.2.2",
     "flask-cors>=6.0.2",
     "gevent>=26.4.0",
+    "gevent-websocket>=0.10.1",
     "gmpy2>=2.3.0",
     "google-api-python-client>=2.194.0",
     "gunicorn>=25.3.0",
     "psycogreen>=1.0.2",
     "psycopg2-binary>=2.9.11",
+    "python-socketio>=5.13.0",
     "redis[hiredis]>=7.4.0",
     "sendgrid>=6.12.5",
+    "sseclient-py>=1.8.0",
 
     # Stable: production-proven, cap below the next major
     "aliyun-log-python-sdk>=0.9.44,<1.0.0",
@@ -166,7 +169,6 @@ dev = [
     "celery-types>=0.23.0",
     "mypy>=1.20.1",
     # "locust>=2.40.4",  # Temporarily removed due to compatibility issues. Uncomment when resolved.
-    "sseclient-py>=1.8.0",
     "pytest-timeout>=2.4.0",
     "pytest-xdist>=3.8.0",
     "pyrefly>=0.60.0",
diff --git a/api/repositories/workflow_collaboration_repository.py b/api/repositories/workflow_collaboration_repository.py
new file mode 100644
index 0000000000..000f80496d
--- /dev/null
+++ b/api/repositories/workflow_collaboration_repository.py
@@ -0,0 +1,147 @@
+from __future__ import annotations
+
+import json
+from typing import TypedDict
+
+from extensions.ext_redis import redis_client
+
+SESSION_STATE_TTL_SECONDS = 3600
+WORKFLOW_ONLINE_USERS_PREFIX = "workflow_online_users:"
+WORKFLOW_LEADER_PREFIX = "workflow_leader:"
+WS_SID_MAP_PREFIX = "ws_sid_map:"
+
+
+class WorkflowSessionInfo(TypedDict):
+    user_id: str
+    username: str
+    avatar: str | None
+    sid: str
+    connected_at: int
+
+
+class SidMapping(TypedDict):
+    workflow_id: str
+    user_id: str
+
+
+class WorkflowCollaborationRepository:
+    def __init__(self) -> None:
+        self._redis = redis_client
+
+    def __repr__(self) -> str:
+        return f"{self.__class__.__name__}(redis_client={self._redis})"
+
+    @staticmethod
+    def workflow_key(workflow_id: str) -> str:
+        return f"{WORKFLOW_ONLINE_USERS_PREFIX}{workflow_id}"
+
+    @staticmethod
+    def leader_key(workflow_id: str) -> str:
+        return f"{WORKFLOW_LEADER_PREFIX}{workflow_id}"
+
+    @staticmethod
+    def sid_key(sid: str) -> str:
+        return f"{WS_SID_MAP_PREFIX}{sid}"
+
+    @staticmethod
+    def _decode(value: str | bytes | None) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, bytes):
+            return value.decode("utf-8")
+        return value
+
+    def refresh_session_state(self, workflow_id: str, sid: str) -> None:
+        workflow_key = self.workflow_key(workflow_id)
+        sid_key = self.sid_key(sid)
+        if self._redis.exists(workflow_key):
+            self._redis.expire(workflow_key, SESSION_STATE_TTL_SECONDS)
+        if self._redis.exists(sid_key):
+            self._redis.expire(sid_key, SESSION_STATE_TTL_SECONDS)
+
+    def set_session_info(self, workflow_id: str, session_info: WorkflowSessionInfo) -> None:
+        workflow_key = self.workflow_key(workflow_id)
+        self._redis.hset(workflow_key, session_info["sid"], json.dumps(session_info))
+        self._redis.set(
+            self.sid_key(session_info["sid"]),
+            json.dumps({"workflow_id": workflow_id, "user_id": session_info["user_id"]}),
+            ex=SESSION_STATE_TTL_SECONDS,
+        )
+        self.refresh_session_state(workflow_id, session_info["sid"])
+
+    def get_sid_mapping(self, sid: str) -> SidMapping | None:
+        raw = self._redis.get(self.sid_key(sid))
+        if not raw:
+            return None
+        value = self._decode(raw)
+        if not value:
+            return None
+        try:
+            return json.loads(value)
+        except (TypeError, json.JSONDecodeError):
+            return None
+
+    def delete_session(self, workflow_id: str, sid: str) -> None:
+        self._redis.hdel(self.workflow_key(workflow_id), sid)
+        self._redis.delete(self.sid_key(sid))
+
+    def session_exists(self, workflow_id: str, sid: str) -> bool:
+        return bool(self._redis.hexists(self.workflow_key(workflow_id), sid))
+
+    def sid_mapping_exists(self, sid: str) -> bool:
+        return bool(self._redis.exists(self.sid_key(sid)))
+
+    def get_session_sids(self, workflow_id: str) -> list[str]:
+        raw_sids = self._redis.hkeys(self.workflow_key(workflow_id))
+        decoded_sids: list[str] = []
+        for sid in raw_sids:
+            decoded = self._decode(sid)
+            if decoded:
+                decoded_sids.append(decoded)
+        return decoded_sids
+
+    def list_sessions(self, workflow_id: str) -> list[WorkflowSessionInfo]:
+        sessions_json = self._redis.hgetall(self.workflow_key(workflow_id))
+        users: list[WorkflowSessionInfo] = []
+
+        for session_info_json in sessions_json.values():
+            value = self._decode(session_info_json)
+            if not value:
+                continue
+            try:
+                session_info = json.loads(value)
+            except (TypeError, json.JSONDecodeError):
+                continue
+
+            if not isinstance(session_info, dict):
+                continue
+            if "user_id" not in session_info or "username" not in session_info or "sid" not in session_info:
+                continue
+
+            users.append(
+                {
+                    "user_id": str(session_info["user_id"]),
+                    "username": str(session_info["username"]),
+                    "avatar": session_info.get("avatar"),
+                    "sid": str(session_info["sid"]),
+                    "connected_at": int(session_info.get("connected_at") or 0),
+                }
+            )
+
+        return users
+
+    def get_current_leader(self, workflow_id: str) -> str | None:
+        raw = self._redis.get(self.leader_key(workflow_id))
+        return self._decode(raw)
+
+    def set_leader_if_absent(self, workflow_id: str, sid: str) -> bool:
+        return bool(self._redis.set(self.leader_key(workflow_id), sid, nx=True, ex=SESSION_STATE_TTL_SECONDS))
+
+    def set_leader(self, workflow_id: str, sid: str) -> None:
+        self._redis.set(self.leader_key(workflow_id), sid, ex=SESSION_STATE_TTL_SECONDS)
+
+    def delete_leader(self, workflow_id: str) -> None:
+        self._redis.delete(self.leader_key(workflow_id))
+
+    def expire_leader(self, workflow_id: str) -> None:
+        self._redis.expire(self.leader_key(workflow_id), SESSION_STATE_TTL_SECONDS)
diff --git a/api/services/feature_service.py b/api/services/feature_service.py
index df653e0ba7..d0d3fbd66b 100644
--- a/api/services/feature_service.py
+++ b/api/services/feature_service.py
@@ -164,6 +164,7 @@ class SystemFeatureModel(BaseModel):
     enable_email_code_login: bool = False
     enable_email_password_login: bool = True
     enable_social_oauth_login: bool = False
+    enable_collaboration_mode: bool = False
     is_allow_register: bool = False
     is_allow_create_workspace: bool = False
     is_email_setup: bool = False
@@ -244,6 +245,7 @@ class FeatureService:
         system_features.enable_email_code_login = dify_config.ENABLE_EMAIL_CODE_LOGIN
         system_features.enable_email_password_login = dify_config.ENABLE_EMAIL_PASSWORD_LOGIN
         system_features.enable_social_oauth_login = dify_config.ENABLE_SOCIAL_OAUTH_LOGIN
+        system_features.enable_collaboration_mode = dify_config.ENABLE_COLLABORATION_MODE
         system_features.is_allow_register = dify_config.ALLOW_REGISTER
         system_features.is_allow_create_workspace = dify_config.ALLOW_CREATE_WORKSPACE
         system_features.is_email_setup = dify_config.MAIL_TYPE is not None and dify_config.MAIL_TYPE != ""
diff --git a/api/services/workflow_collaboration_service.py b/api/services/workflow_collaboration_service.py
new file mode 100644
index 0000000000..cf2f509052
--- /dev/null
+++ b/api/services/workflow_collaboration_service.py
@@ -0,0 +1,295 @@
+from __future__ import annotations
+
+import logging
+import time
+from collections.abc import Mapping
+
+from sqlalchemy import select
+
+from core.db.session_factory import session_factory
+from models.account import Account
+from models.model import App
+from repositories.workflow_collaboration_repository import WorkflowCollaborationRepository, WorkflowSessionInfo
+
+logger = logging.getLogger(__name__)
+
+
+class WorkflowCollaborationService:
+    def __init__(self, repository: WorkflowCollaborationRepository, socketio) -> None:
+        self._repository = repository
+        self._socketio = socketio
+
+    def __repr__(self) -> str:
+        return f"{self.__class__.__name__}(repository={self._repository})"
+
+    def save_socket_identity(self, sid: str, user: Account) -> None:
+        """Persist the authenticated console user on the raw socket session."""
+        self._socketio.save_session(
+            sid,
+            {
+                "user_id": user.id,
+                "username": user.name,
+                "avatar": user.avatar,
+                "tenant_id": user.current_tenant_id,
+            },
+        )
+
+    def authorize_and_join_workflow_room(self, workflow_id: str, sid: str) -> tuple[str, bool] | None:
+        """
+        Join a collaboration room only after validating the socket session and tenant-scoped app access.
+
+        The Socket.IO payload still calls the room key `workflow_id`, but the identifier is the workflow app's
+        `App.id`. Returning `None` lets the controller reject the join before any Redis or room state is created.
+        """
+        session = self._socketio.get_session(sid)
+        user_id = session.get("user_id")
+        tenant_id = session.get("tenant_id")
+        if not user_id or not tenant_id:
+            return None
+
+        if not self._can_access_workflow(workflow_id, str(tenant_id)):
+            logger.warning(
+                "Workflow collaboration join rejected: workflow_id=%s tenant_id=%s user_id=%s sid=%s",
+                workflow_id,
+                tenant_id,
+                user_id,
+                sid,
+            )
+            return None
+
+        session_info: WorkflowSessionInfo = {
+            "user_id": str(user_id),
+            "username": str(session.get("username", "Unknown")),
+            "avatar": session.get("avatar"),
+            "sid": sid,
+            "connected_at": int(time.time()),
+        }
+
+        self._repository.set_session_info(workflow_id, session_info)
+
+        leader_sid = self.get_or_set_leader(workflow_id, sid)
+        is_leader = leader_sid == sid
+
+        self._socketio.enter_room(sid, workflow_id)
+        self.broadcast_online_users(workflow_id)
+
+        self._socketio.emit("status", {"isLeader": is_leader}, room=sid)
+
+        return str(user_id), is_leader
+
+    def _can_access_workflow(self, workflow_id: str, tenant_id: str) -> bool:
+        """Check room access without relying on Flask's app-context-bound scoped session."""
+        with session_factory.create_session() as session:
+            app_id = session.scalar(select(App.id).where(App.id == workflow_id, App.tenant_id == tenant_id).limit(1))
+        return app_id is not None
+
+    def disconnect_session(self, sid: str) -> None:
+        mapping = self._repository.get_sid_mapping(sid)
+        if not mapping:
+            return
+
+        workflow_id = mapping["workflow_id"]
+        self._repository.delete_session(workflow_id, sid)
+
+        self.handle_leader_disconnect(workflow_id, sid)
+        self.broadcast_online_users(workflow_id)
+
+    def relay_collaboration_event(self, sid: str, data: Mapping[str, object]) -> tuple[dict[str, str], int]:
+        mapping = self._repository.get_sid_mapping(sid)
+        if not mapping:
+            return {"msg": "unauthorized"}, 401
+
+        workflow_id = mapping["workflow_id"]
+        user_id = mapping["user_id"]
+        self.refresh_session_state(workflow_id, sid)
+
+        event_type = data.get("type")
+        event_data = data.get("data")
+        timestamp = data.get("timestamp", int(time.time()))
+
+        if not event_type:
+            return {"msg": "invalid event type"}, 400
+
+        if event_type == "sync_request":
+            leader_sid = self._repository.get_current_leader(workflow_id)
+            target_sid: str | None
+            if leader_sid and self.is_session_active(workflow_id, leader_sid):
+                target_sid = leader_sid
+            else:
+                if leader_sid:
+                    self._repository.delete_leader(workflow_id)
+                target_sid = self._select_graph_leader(workflow_id, preferred_sid=sid)
+                if target_sid:
+                    self._repository.set_leader(workflow_id, target_sid)
+                    self.broadcast_leader_change(workflow_id, target_sid)
+
+            if not target_sid:
+                return {"msg": "no_active_leader"}, 200
+
+            self._socketio.emit(
+                "collaboration_update",
+                {"type": event_type, "userId": user_id, "data": event_data, "timestamp": timestamp},
+                room=target_sid,
+            )
+
+            return {"msg": "sync_request_forwarded"}, 200
+
+        self._socketio.emit(
+            "collaboration_update",
+            {"type": event_type, "userId": user_id, "data": event_data, "timestamp": timestamp},
+            room=workflow_id,
+            skip_sid=sid,
+        )
+
+        return {"msg": "event_broadcasted"}, 200
+
+    def relay_graph_event(self, sid: str, data: object) -> tuple[dict[str, str], int]:
+        mapping = self._repository.get_sid_mapping(sid)
+        if not mapping:
+            return {"msg": "unauthorized"}, 401
+
+        workflow_id = mapping["workflow_id"]
+        self.refresh_session_state(workflow_id, sid)
+
+        self._socketio.emit("graph_update", data, room=workflow_id, skip_sid=sid)
+
+        return {"msg": "graph_update_broadcasted"}, 200
+
+    def get_or_set_leader(self, workflow_id: str, sid: str) -> str:
+        current_leader = self._repository.get_current_leader(workflow_id)
+
+        if current_leader:
+            if self.is_session_active(workflow_id, current_leader):
+                return current_leader
+            self._repository.delete_session(workflow_id, current_leader)
+            self._repository.delete_leader(workflow_id)
+
+        was_set = self._repository.set_leader_if_absent(workflow_id, sid)
+
+        if was_set:
+            if current_leader:
+                self.broadcast_leader_change(workflow_id, sid)
+            return sid
+
+        current_leader = self._repository.get_current_leader(workflow_id)
+        if current_leader:
+            return current_leader
+
+        return sid
+
+    def handle_leader_disconnect(self, workflow_id: str, disconnected_sid: str) -> None:
+        current_leader = self._repository.get_current_leader(workflow_id)
+        if not current_leader:
+            return
+
+        if current_leader != disconnected_sid:
+            return
+
+        new_leader_sid = self._select_graph_leader(workflow_id)
+        if new_leader_sid:
+            self._repository.set_leader(workflow_id, new_leader_sid)
+            self.broadcast_leader_change(workflow_id, new_leader_sid)
+        else:
+            self._repository.delete_leader(workflow_id)
+
+    def broadcast_leader_change(self, workflow_id: str, new_leader_sid: str | None) -> None:
+        for sid in self._repository.get_session_sids(workflow_id):
+            try:
+                is_leader = new_leader_sid is not None and sid == new_leader_sid
+                self._socketio.emit("status", {"isLeader": is_leader}, room=sid)
+            except Exception:
+                logging.exception("Failed to emit leader status to session %s", sid)
+
+    def get_current_leader(self, workflow_id: str) -> str | None:
+        return self._repository.get_current_leader(workflow_id)
+
+    def _prune_inactive_sessions(self, workflow_id: str) -> list[WorkflowSessionInfo]:
+        """Remove inactive sessions from storage and return active sessions only."""
+        sessions = self._repository.list_sessions(workflow_id)
+        if not sessions:
+            return []
+
+        active_sessions: list[WorkflowSessionInfo] = []
+        stale_sids: list[str] = []
+        for session in sessions:
+            sid = session["sid"]
+            if self.is_session_active(workflow_id, sid):
+                active_sessions.append(session)
+            else:
+                stale_sids.append(sid)
+
+        for sid in stale_sids:
+            self._repository.delete_session(workflow_id, sid)
+
+        return active_sessions
+
+    def broadcast_online_users(self, workflow_id: str) -> None:
+        users = self._prune_inactive_sessions(workflow_id)
+        users.sort(key=lambda x: x.get("connected_at") or 0)
+
+        leader_sid = self.get_current_leader(workflow_id)
+        previous_leader = leader_sid
+        active_sids = {user["sid"] for user in users}
+        if leader_sid and leader_sid not in active_sids:
+            self._repository.delete_leader(workflow_id)
+            leader_sid = None
+
+        if not leader_sid and users:
+            leader_sid = self._select_graph_leader(workflow_id)
+            if leader_sid:
+                self._repository.set_leader(workflow_id, leader_sid)
+
+        if leader_sid != previous_leader:
+            self.broadcast_leader_change(workflow_id, leader_sid)
+
+        self._socketio.emit(
+            "online_users",
+            {"workflow_id": workflow_id, "users": users, "leader": leader_sid},
+            room=workflow_id,
+        )
+
+    def refresh_session_state(self, workflow_id: str, sid: str) -> None:
+        self._repository.refresh_session_state(workflow_id, sid)
+        self._ensure_leader(workflow_id, sid)
+
+    def _ensure_leader(self, workflow_id: str, sid: str) -> None:
+        current_leader = self._repository.get_current_leader(workflow_id)
+        if current_leader and self.is_session_active(workflow_id, current_leader):
+            self._repository.expire_leader(workflow_id)
+            return
+
+        if current_leader:
+            self._repository.delete_leader(workflow_id)
+
+        self._repository.set_leader(workflow_id, sid)
+        self.broadcast_leader_change(workflow_id, sid)
+
+    def _select_graph_leader(self, workflow_id: str, preferred_sid: str | None = None) -> str | None:
+        session_sids = [
+            session["sid"]
+            for session in self._repository.list_sessions(workflow_id)
+            if session.get("graph_active", True) and self.is_session_active(workflow_id, session["sid"])
+        ]
+        if not session_sids:
+            return None
+        if preferred_sid and preferred_sid in session_sids:
+            return preferred_sid
+        return session_sids[0]
+
+    def is_session_active(self, workflow_id: str, sid: str) -> bool:
+        if not sid:
+            return False
+
+        try:
+            if not self._socketio.manager.is_connected(sid, "/"):
+                return False
+        except AttributeError:
+            return False
+
+        if not self._repository.session_exists(workflow_id, sid):
+            return False
+
+        if not self._repository.sid_mapping_exists(sid):
+            return False
+
+        return True
diff --git a/api/services/workflow_comment_service.py b/api/services/workflow_comment_service.py
new file mode 100644
index 0000000000..ff47e4f253
--- /dev/null
+++ b/api/services/workflow_comment_service.py
@@ -0,0 +1,564 @@
+import logging
+from collections.abc import Sequence
+
+from sqlalchemy import desc, select
+from sqlalchemy.orm import Session, selectinload
+from werkzeug.exceptions import Forbidden, NotFound
+
+from configs import dify_config
+from extensions.ext_database import db
+from libs.datetime_utils import naive_utc_now
+from libs.helper import uuid_value
+from models import App, TenantAccountJoin, WorkflowComment, WorkflowCommentMention, WorkflowCommentReply
+from models.account import Account
+from tasks.mail_workflow_comment_task import send_workflow_comment_mention_email_task
+
+logger = logging.getLogger(__name__)
+
+
+class WorkflowCommentService:
+    """Service for managing workflow comments."""
+
+    @staticmethod
+    def _validate_content(content: str) -> None:
+        if len(content.strip()) == 0:
+            raise ValueError("Comment content cannot be empty")
+
+        if len(content) > 1000:
+            raise ValueError("Comment content cannot exceed 1000 characters")
+
+    @staticmethod
+    def _filter_valid_mentioned_user_ids(
+        mentioned_user_ids: Sequence[str], *, session: Session, tenant_id: str
+    ) -> list[str]:
+        """Return deduplicated UUID user IDs that belong to the tenant, preserving input order."""
+        unique_user_ids: list[str] = []
+        seen: set[str] = set()
+        for user_id in mentioned_user_ids:
+            if not isinstance(user_id, str):
+                continue
+            if not uuid_value(user_id):
+                continue
+            if user_id in seen:
+                continue
+            seen.add(user_id)
+            unique_user_ids.append(user_id)
+        if not unique_user_ids:
+            return []
+
+        tenant_member_ids = {
+            str(account_id)
+            for account_id in session.scalars(
+                select(TenantAccountJoin.account_id).where(
+                    TenantAccountJoin.tenant_id == tenant_id,
+                    TenantAccountJoin.account_id.in_(unique_user_ids),
+                )
+            ).all()
+        }
+
+        return [user_id for user_id in unique_user_ids if user_id in tenant_member_ids]
+
+    @staticmethod
+    def _format_comment_excerpt(content: str, max_length: int = 200) -> str:
+        """Trim comment content for email display."""
+        trimmed = content.strip()
+        if len(trimmed) <= max_length:
+            return trimmed
+        if max_length <= 3:
+            return trimmed[:max_length]
+        return f"{trimmed[: max_length - 3].rstrip()}..."
+
+    @staticmethod
+    def _build_mention_email_payloads(
+        session: Session,
+        tenant_id: str,
+        app_id: str,
+        mentioner_id: str,
+        mentioned_user_ids: Sequence[str],
+        content: str,
+    ) -> list[dict[str, str]]:
+        """Prepare email payloads for mentioned users, including workflow app link."""
+        if not mentioned_user_ids:
+            return []
+
+        candidate_user_ids = [user_id for user_id in mentioned_user_ids if user_id != mentioner_id]
+        if not candidate_user_ids:
+            return []
+
+        app_name_value = session.scalar(select(App.name).where(App.id == app_id, App.tenant_id == tenant_id))
+        app_name = app_name_value if isinstance(app_name_value, str) and app_name_value else "Dify app"
+        commenter_name_value = session.scalar(select(Account.name).where(Account.id == mentioner_id))
+        commenter_name = (
+            commenter_name_value if isinstance(commenter_name_value, str) and commenter_name_value else "Dify user"
+        )
+        comment_excerpt = WorkflowCommentService._format_comment_excerpt(content)
+        base_url = dify_config.CONSOLE_WEB_URL.rstrip("/")
+        app_url = f"{base_url}/app/{app_id}/workflow"
+
+        accounts = session.scalars(
+            select(Account)
+            .join(TenantAccountJoin, TenantAccountJoin.account_id == Account.id)
+            .where(TenantAccountJoin.tenant_id == tenant_id, Account.id.in_(candidate_user_ids))
+        ).all()
+
+        payloads: list[dict[str, str]] = []
+        for account in accounts:
+            email = account.email
+            if not isinstance(email, str) or not email:
+                continue
+            mentioned_name = account.name if isinstance(account.name, str) and account.name else email
+            language = (
+                account.interface_language
+                if isinstance(account.interface_language, str) and account.interface_language
+                else "en-US"
+            )
+            payloads.append(
+                {
+                    "language": language,
+                    "to": email,
+                    "mentioned_name": mentioned_name,
+                    "commenter_name": commenter_name,
+                    "app_name": app_name,
+                    "comment_content": comment_excerpt,
+                    "app_url": app_url,
+                }
+            )
+        return payloads
+
+    @staticmethod
+    def _dispatch_mention_emails(payloads: Sequence[dict[str, str]]) -> None:
+        """Enqueue mention notification emails."""
+        for payload in payloads:
+            send_workflow_comment_mention_email_task.delay(**payload)
+
+    @staticmethod
+    def get_comments(tenant_id: str, app_id: str) -> Sequence[WorkflowComment]:
+        """Get all comments for a workflow."""
+        with Session(db.engine) as session:
+            # Get all comments with eager loading
+            stmt = (
+                select(WorkflowComment)
+                .options(selectinload(WorkflowComment.replies), selectinload(WorkflowComment.mentions))
+                .where(WorkflowComment.tenant_id == tenant_id, WorkflowComment.app_id == app_id)
+                .order_by(desc(WorkflowComment.created_at))
+            )
+
+            comments = session.scalars(stmt).all()
+
+            # Batch preload all Account objects to avoid N+1 queries
+            WorkflowCommentService._preload_accounts(session, comments)
+
+            return comments
+
+    @staticmethod
+    def _preload_accounts(session: Session, comments: Sequence[WorkflowComment]) -> None:
+        """Batch preload Account objects for comments, replies, and mentions."""
+        # Collect all user IDs
+        user_ids: set[str] = set()
+        for comment in comments:
+            user_ids.add(comment.created_by)
+            if comment.resolved_by:
+                user_ids.add(comment.resolved_by)
+            user_ids.update(reply.created_by for reply in comment.replies)
+            user_ids.update(mention.mentioned_user_id for mention in comment.mentions)
+
+        if not user_ids:
+            return
+
+        # Batch query all accounts
+        accounts = session.scalars(select(Account).where(Account.id.in_(user_ids))).all()
+        account_map = {str(account.id): account for account in accounts}
+
+        # Cache accounts on objects
+        for comment in comments:
+            comment.cache_created_by_account(account_map.get(comment.created_by))
+            comment.cache_resolved_by_account(account_map.get(comment.resolved_by) if comment.resolved_by else None)
+            for reply in comment.replies:
+                reply.cache_created_by_account(account_map.get(reply.created_by))
+            for mention in comment.mentions:
+                mention.cache_mentioned_user_account(account_map.get(mention.mentioned_user_id))
+
+    @staticmethod
+    def get_comment(tenant_id: str, app_id: str, comment_id: str, session: Session | None = None) -> WorkflowComment:
+        """Get a specific comment."""
+
+        def _get_comment(session: Session) -> WorkflowComment:
+            stmt = (
+                select(WorkflowComment)
+                .options(selectinload(WorkflowComment.replies), selectinload(WorkflowComment.mentions))
+                .where(
+                    WorkflowComment.id == comment_id,
+                    WorkflowComment.tenant_id == tenant_id,
+                    WorkflowComment.app_id == app_id,
+                )
+            )
+            comment = session.scalar(stmt)
+
+            if not comment:
+                raise NotFound("Comment not found")
+
+            # Preload accounts to avoid N+1 queries
+            WorkflowCommentService._preload_accounts(session, [comment])
+
+            return comment
+
+        if session is not None:
+            return _get_comment(session)
+        else:
+            with Session(db.engine, expire_on_commit=False) as session:
+                return _get_comment(session)
+
+    @staticmethod
+    def create_comment(
+        tenant_id: str,
+        app_id: str,
+        created_by: str,
+        content: str,
+        position_x: float,
+        position_y: float,
+        mentioned_user_ids: list[str] | None = None,
+    ) -> dict:
+        """Create a new workflow comment and send mention notification emails."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine) as session:
+            comment = WorkflowComment(
+                tenant_id=tenant_id,
+                app_id=app_id,
+                position_x=position_x,
+                position_y=position_y,
+                content=content,
+                created_by=created_by,
+            )
+
+            session.add(comment)
+            session.flush()  # Get the comment ID for mentions
+
+            # Create mentions if specified
+            mentioned_user_ids = WorkflowCommentService._filter_valid_mentioned_user_ids(
+                mentioned_user_ids or [],
+                session=session,
+                tenant_id=tenant_id,
+            )
+            for user_id in mentioned_user_ids:
+                mention = WorkflowCommentMention(
+                    comment_id=comment.id,
+                    reply_id=None,  # This is a comment mention, not reply mention
+                    mentioned_user_id=user_id,
+                )
+                session.add(mention)
+
+            mention_email_payloads = WorkflowCommentService._build_mention_email_payloads(
+                session=session,
+                tenant_id=tenant_id,
+                app_id=app_id,
+                mentioner_id=created_by,
+                mentioned_user_ids=mentioned_user_ids,
+                content=content,
+            )
+
+            session.commit()
+            WorkflowCommentService._dispatch_mention_emails(mention_email_payloads)
+
+            # Return only what we need - id and created_at
+            return {"id": comment.id, "created_at": comment.created_at}
+
+    @staticmethod
+    def update_comment(
+        tenant_id: str,
+        app_id: str,
+        comment_id: str,
+        user_id: str,
+        content: str,
+        position_x: float | None = None,
+        position_y: float | None = None,
+        mentioned_user_ids: list[str] | None = None,
+    ) -> dict:
+        """Update a workflow comment and notify newly mentioned users.
+
+        `mentioned_user_ids=None` means "leave mentions unchanged".
+        Passing an explicit list replaces the existing comment mentions, including clearing them with `[]`.
+        """
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            # Get comment with validation
+            stmt = select(WorkflowComment).where(
+                WorkflowComment.id == comment_id,
+                WorkflowComment.tenant_id == tenant_id,
+                WorkflowComment.app_id == app_id,
+            )
+            comment = session.scalar(stmt)
+
+            if not comment:
+                raise NotFound("Comment not found")
+
+            # Only the creator can update the comment
+            if comment.created_by != user_id:
+                raise Forbidden("Only the comment creator can update it")
+
+            # Update comment fields
+            comment.content = content
+            if position_x is not None:
+                comment.position_x = position_x
+            if position_y is not None:
+                comment.position_y = position_y
+
+            mention_email_payloads: list[dict[str, str]] = []
+            if mentioned_user_ids is not None:
+                # Replace comment mentions only when the client explicitly sends the mention list.
+                existing_mentions = session.scalars(
+                    select(WorkflowCommentMention).where(
+                        WorkflowCommentMention.comment_id == comment.id,
+                        WorkflowCommentMention.reply_id.is_(None),  # Only comment mentions, not reply mentions
+                    )
+                ).all()
+                existing_mentioned_user_ids = {mention.mentioned_user_id for mention in existing_mentions}
+                for mention in existing_mentions:
+                    session.delete(mention)
+
+                filtered_mentioned_user_ids = WorkflowCommentService._filter_valid_mentioned_user_ids(
+                    mentioned_user_ids,
+                    session=session,
+                    tenant_id=tenant_id,
+                )
+                new_mentioned_user_ids = [
+                    mentioned_user_id
+                    for mentioned_user_id in filtered_mentioned_user_ids
+                    if mentioned_user_id not in existing_mentioned_user_ids
+                ]
+                for mentioned_user_id in filtered_mentioned_user_ids:
+                    mention = WorkflowCommentMention(
+                        comment_id=comment.id,
+                        reply_id=None,  # This is a comment mention
+                        mentioned_user_id=mentioned_user_id,
+                    )
+                    session.add(mention)
+
+                mention_email_payloads = WorkflowCommentService._build_mention_email_payloads(
+                    session=session,
+                    tenant_id=tenant_id,
+                    app_id=app_id,
+                    mentioner_id=user_id,
+                    mentioned_user_ids=new_mentioned_user_ids,
+                    content=content,
+                )
+
+            session.commit()
+            WorkflowCommentService._dispatch_mention_emails(mention_email_payloads)
+
+            return {"id": comment.id, "updated_at": comment.updated_at}
+
+    @staticmethod
+    def delete_comment(tenant_id: str, app_id: str, comment_id: str, user_id: str) -> None:
+        """Delete a workflow comment."""
+        with Session(db.engine, expire_on_commit=False) as session:
+            comment = WorkflowCommentService.get_comment(tenant_id, app_id, comment_id, session)
+
+            # Only the creator can delete the comment
+            if comment.created_by != user_id:
+                raise Forbidden("Only the comment creator can delete it")
+
+            # Delete associated mentions (both comment and reply mentions)
+            mentions = session.scalars(
+                select(WorkflowCommentMention).where(WorkflowCommentMention.comment_id == comment_id)
+            ).all()
+            for mention in mentions:
+                session.delete(mention)
+
+            # Delete associated replies
+            replies = session.scalars(
+                select(WorkflowCommentReply).where(WorkflowCommentReply.comment_id == comment_id)
+            ).all()
+            for reply in replies:
+                session.delete(reply)
+
+            session.delete(comment)
+            session.commit()
+
+    @staticmethod
+    def resolve_comment(tenant_id: str, app_id: str, comment_id: str, user_id: str) -> WorkflowComment:
+        """Resolve a workflow comment."""
+        with Session(db.engine, expire_on_commit=False) as session:
+            comment = WorkflowCommentService.get_comment(tenant_id, app_id, comment_id, session)
+            if comment.resolved:
+                return comment
+
+            comment.resolved = True
+            comment.resolved_at = naive_utc_now()
+            comment.resolved_by = user_id
+            session.commit()
+
+        return comment
+
+    @staticmethod
+    def create_reply(
+        comment_id: str, content: str, created_by: str, mentioned_user_ids: list[str] | None = None
+    ) -> dict:
+        """Add a reply to a workflow comment and notify mentioned users."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            # Check if comment exists
+            comment = session.get(WorkflowComment, comment_id)
+            if not comment:
+                raise NotFound("Comment not found")
+
+            reply = WorkflowCommentReply(comment_id=comment_id, content=content, created_by=created_by)
+
+            session.add(reply)
+            session.flush()  # Get the reply ID for mentions
+
+            # Create mentions if specified
+            mentioned_user_ids = WorkflowCommentService._filter_valid_mentioned_user_ids(
+                mentioned_user_ids or [],
+                session=session,
+                tenant_id=comment.tenant_id,
+            )
+            for user_id in mentioned_user_ids:
+                # Create mention linking to specific reply
+                mention = WorkflowCommentMention(comment_id=comment_id, reply_id=reply.id, mentioned_user_id=user_id)
+                session.add(mention)
+
+            mention_email_payloads = WorkflowCommentService._build_mention_email_payloads(
+                session=session,
+                tenant_id=comment.tenant_id,
+                app_id=comment.app_id,
+                mentioner_id=created_by,
+                mentioned_user_ids=mentioned_user_ids,
+                content=content,
+            )
+
+            session.commit()
+            WorkflowCommentService._dispatch_mention_emails(mention_email_payloads)
+
+            return {"id": reply.id, "created_at": reply.created_at}
+
+    @staticmethod
+    def _get_reply_in_comment_scope(
+        *,
+        session: Session,
+        tenant_id: str,
+        app_id: str,
+        comment_id: str,
+        reply_id: str,
+    ) -> WorkflowCommentReply:
+        """Get a reply scoped to tenant/app/comment to prevent cross-thread mutations."""
+        stmt = (
+            select(WorkflowCommentReply)
+            .join(WorkflowComment, WorkflowComment.id == WorkflowCommentReply.comment_id)
+            .where(
+                WorkflowCommentReply.id == reply_id,
+                WorkflowCommentReply.comment_id == comment_id,
+                WorkflowComment.tenant_id == tenant_id,
+                WorkflowComment.app_id == app_id,
+            )
+            .limit(1)
+        )
+        reply = session.scalar(stmt)
+        if not reply:
+            raise NotFound("Reply not found")
+        return reply
+
+    @staticmethod
+    def update_reply(
+        tenant_id: str,
+        app_id: str,
+        comment_id: str,
+        reply_id: str,
+        user_id: str,
+        content: str,
+        mentioned_user_ids: list[str] | None = None,
+    ) -> dict:
+        """Update a comment reply and notify newly mentioned users."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            reply = WorkflowCommentService._get_reply_in_comment_scope(
+                session=session,
+                tenant_id=tenant_id,
+                app_id=app_id,
+                comment_id=comment_id,
+                reply_id=reply_id,
+            )
+
+            # Only the creator can update the reply
+            if reply.created_by != user_id:
+                raise Forbidden("Only the reply creator can update it")
+
+            reply.content = content
+
+            # Update mentions - first remove existing mentions for this reply
+            existing_mentions = session.scalars(
+                select(WorkflowCommentMention).where(WorkflowCommentMention.reply_id == reply.id)
+            ).all()
+            existing_mentioned_user_ids = {mention.mentioned_user_id for mention in existing_mentions}
+            for mention in existing_mentions:
+                session.delete(mention)
+
+            # Add mentions
+            raw_mentioned_user_ids = mentioned_user_ids or []
+            comment = session.get(WorkflowComment, reply.comment_id)
+            mentioned_user_ids = []
+            if comment:
+                mentioned_user_ids = WorkflowCommentService._filter_valid_mentioned_user_ids(
+                    raw_mentioned_user_ids,
+                    session=session,
+                    tenant_id=comment.tenant_id,
+                )
+            new_mentioned_user_ids = [
+                user_id for user_id in mentioned_user_ids if user_id not in existing_mentioned_user_ids
+            ]
+            for user_id_str in mentioned_user_ids:
+                mention = WorkflowCommentMention(
+                    comment_id=reply.comment_id, reply_id=reply.id, mentioned_user_id=user_id_str
+                )
+                session.add(mention)
+
+            mention_email_payloads: list[dict[str, str]] = []
+            if comment:
+                mention_email_payloads = WorkflowCommentService._build_mention_email_payloads(
+                    session=session,
+                    tenant_id=comment.tenant_id,
+                    app_id=comment.app_id,
+                    mentioner_id=user_id,
+                    mentioned_user_ids=new_mentioned_user_ids,
+                    content=content,
+                )
+
+            session.commit()
+            session.refresh(reply)  # Refresh to get updated timestamp
+            WorkflowCommentService._dispatch_mention_emails(mention_email_payloads)
+
+            return {"id": reply.id, "updated_at": reply.updated_at}
+
+    @staticmethod
+    def delete_reply(tenant_id: str, app_id: str, comment_id: str, reply_id: str, user_id: str) -> None:
+        """Delete a comment reply."""
+        with Session(db.engine, expire_on_commit=False) as session:
+            reply = WorkflowCommentService._get_reply_in_comment_scope(
+                session=session,
+                tenant_id=tenant_id,
+                app_id=app_id,
+                comment_id=comment_id,
+                reply_id=reply_id,
+            )
+
+            # Only the creator can delete the reply
+            if reply.created_by != user_id:
+                raise Forbidden("Only the reply creator can delete it")
+
+            # Delete associated mentions first
+            mentions = session.scalars(
+                select(WorkflowCommentMention).where(WorkflowCommentMention.reply_id == reply_id)
+            ).all()
+            for mention in mentions:
+                session.delete(mention)
+
+            session.delete(reply)
+            session.commit()
+
+    @staticmethod
+    def validate_comment_access(comment_id: str, tenant_id: str, app_id: str) -> WorkflowComment:
+        """Validate that a comment belongs to the specified tenant and app."""
+        return WorkflowCommentService.get_comment(tenant_id, app_id, comment_id)
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index 0e1864ce9a..55a93c33b1 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -199,6 +199,16 @@ class WorkflowService:
 
         return workflow
 
+    def get_accessible_app_ids(self, app_ids: Sequence[str], tenant_id: str) -> set[str]:
+        """
+        Return app IDs that belong to the given tenant.
+        """
+        if not app_ids:
+            return set()
+
+        stmt = select(App.id).where(App.id.in_(app_ids), App.tenant_id == tenant_id)
+        return {str(app_id) for app_id in db.session.scalars(stmt).all()}
+
     def get_all_published_workflow(
         self,
         *,
@@ -296,6 +306,78 @@ class WorkflowService:
         # return draft workflow
         return workflow
 
+    def update_draft_workflow_environment_variables(
+        self,
+        *,
+        app_model: App,
+        environment_variables: Sequence[VariableBase],
+        account: Account,
+    ):
+        """
+        Update draft workflow environment variables
+        """
+        # fetch draft workflow by app_model
+        workflow = self.get_draft_workflow(app_model=app_model)
+
+        if not workflow:
+            raise ValueError("No draft workflow found.")
+
+        workflow.environment_variables = environment_variables
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        # commit db session changes
+        db.session.commit()
+
+    def update_draft_workflow_conversation_variables(
+        self,
+        *,
+        app_model: App,
+        conversation_variables: Sequence[VariableBase],
+        account: Account,
+    ):
+        """
+        Update draft workflow conversation variables
+        """
+        # fetch draft workflow by app_model
+        workflow = self.get_draft_workflow(app_model=app_model)
+
+        if not workflow:
+            raise ValueError("No draft workflow found.")
+
+        workflow.conversation_variables = conversation_variables
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        # commit db session changes
+        db.session.commit()
+
+    def update_draft_workflow_features(
+        self,
+        *,
+        app_model: App,
+        features: dict,
+        account: Account,
+    ):
+        """
+        Update draft workflow features
+        """
+        # fetch draft workflow by app_model
+        workflow = self.get_draft_workflow(app_model=app_model)
+
+        if not workflow:
+            raise ValueError("No draft workflow found.")
+
+        # validate features structure
+        self.validate_features_structure(app_model=app_model, features=features)
+
+        workflow.features = json.dumps(features)
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        # commit db session changes
+        db.session.commit()
+
     def restore_published_workflow_to_draft(
         self,
         *,
diff --git a/api/tasks/mail_workflow_comment_task.py b/api/tasks/mail_workflow_comment_task.py
new file mode 100644
index 0000000000..36d51f0514
--- /dev/null
+++ b/api/tasks/mail_workflow_comment_task.py
@@ -0,0 +1,65 @@
+import logging
+import time
+
+import click
+from celery import shared_task
+
+from extensions.ext_mail import mail
+from libs.email_i18n import EmailType, get_email_i18n_service
+
+logger = logging.getLogger(__name__)
+
+
+@shared_task(queue="mail")
+def send_workflow_comment_mention_email_task(
+    language: str,
+    to: str,
+    mentioned_name: str,
+    commenter_name: str,
+    app_name: str,
+    comment_content: str,
+    app_url: str,
+):
+    """
+    Send workflow comment mention email with internationalization support.
+
+    Args:
+        language: Language code for email localization
+        to: Recipient email address
+        mentioned_name: Name of the mentioned user
+        commenter_name: Name of the comment author
+        app_name: Name of the app where the comment was made
+        comment_content: Comment content excerpt
+        app_url: Link to the app workflow page
+    """
+    if not mail.is_inited():
+        return
+
+    logger.info(click.style(f"Start workflow comment mention mail to {to}", fg="green"))
+    start_at = time.perf_counter()
+
+    try:
+        email_service = get_email_i18n_service()
+        email_service.send_email(
+            email_type=EmailType.WORKFLOW_COMMENT_MENTION,
+            language_code=language,
+            to=to,
+            template_context={
+                "to": to,
+                "mentioned_name": mentioned_name,
+                "commenter_name": commenter_name,
+                "app_name": app_name,
+                "comment_content": comment_content,
+                "app_url": app_url,
+            },
+        )
+
+        end_at = time.perf_counter()
+        logger.info(
+            click.style(
+                f"Send workflow comment mention mail to {to} succeeded: latency: {end_at - start_at}",
+                fg="green",
+            )
+        )
+    except Exception:
+        logger.exception("workflow comment mention email to %s failed", to)
diff --git a/api/templates/without-brand/workflow_comment_mention_template_en-US.html b/api/templates/without-brand/workflow_comment_mention_template_en-US.html
new file mode 100644
index 0000000000..1ef8fe4e3f
--- /dev/null
+++ b/api/templates/without-brand/workflow_comment_mention_template_en-US.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      line-height: 16pt;
+      color: #101828;
+      background-color: #e9ebf0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .container {
+      width: 504px;
+      min-height: 374px;
+      margin: 40px auto;
+      padding: 0 48px;
+      background-color: #fcfcfd;
+      border-radius: 16px;
+      border: 1px solid #ffffff;
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
+    }
+
+    .header {
+      padding-top: 36px;
+      padding-bottom: 24px;
+    }
+
+    .header img {
+      max-width: 63px;
+      height: auto;
+    }
+
+    .title {
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
+      font-size: 24px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%;
+    }
+
+    .description {
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 8px;
+    }
+
+    .content2 {
+      margin: 0;
+      padding-bottom: 16px;
+    }
+
+    .comment-box {
+      margin-bottom: 16px;
+      padding: 12px 16px;
+      border-radius: 12px;
+      background-color: #f2f4f7;
+    }
+
+    .comment-text {
+      margin: 0;
+      color: #101828;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .tips {
+      margin: 0;
+      padding-bottom: 24px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="header">
+      <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
+    </div>
+    <p class="title">You were mentioned in a workflow comment</p>
+    <div class="description">
+      <p class="content1">Hi {{ mentioned_name }},</p>
+      <p class="content2">{{ commenter_name }} mentioned you in {{ app_name }}.</p>
+    </div>
+    <div class="comment-box">
+      <p class="comment-text">{{ comment_content }}</p>
+    </div>
+    <p class="tips"><a href="{{ app_url }}" style="color: #155AEF; text-decoration: none;">Open {{ application_title }}</a> to reply to the comment.</p>
+  </div>
+</body>
+
+</html>
diff --git a/api/templates/without-brand/workflow_comment_mention_template_zh-CN.html b/api/templates/without-brand/workflow_comment_mention_template_zh-CN.html
new file mode 100644
index 0000000000..8b9b2dbe71
--- /dev/null
+++ b/api/templates/without-brand/workflow_comment_mention_template_zh-CN.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      line-height: 16pt;
+      color: #101828;
+      background-color: #e9ebf0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .container {
+      width: 504px;
+      min-height: 374px;
+      margin: 40px auto;
+      padding: 0 48px;
+      background-color: #fcfcfd;
+      border-radius: 16px;
+      border: 1px solid #ffffff;
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
+    }
+
+    .header {
+      padding-top: 36px;
+      padding-bottom: 24px;
+    }
+
+    .header img {
+      max-width: 63px;
+      height: auto;
+    }
+
+    .title {
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
+      font-size: 24px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%;
+    }
+
+    .description {
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 8px;
+    }
+
+    .content2 {
+      margin: 0;
+      padding-bottom: 16px;
+    }
+
+    .comment-box {
+      margin-bottom: 16px;
+      padding: 12px 16px;
+      border-radius: 12px;
+      background-color: #f2f4f7;
+    }
+
+    .comment-text {
+      margin: 0;
+      color: #101828;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .tips {
+      margin: 0;
+      padding-bottom: 24px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="header">
+      <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
+    </div>
+    <p class="title">你在工作流评论中被提及</p>
+    <div class="description">
+      <p class="content1">你好，{{ mentioned_name }}：</p>
+      <p class="content2">{{ commenter_name }} 在 {{ app_name }} 中提及了你。</p>
+    </div>
+    <div class="comment-box">
+      <p class="comment-text">{{ comment_content }}</p>
+    </div>
+    <p class="tips">请在 <a href="{{ app_url }}" style="color: #155AEF; text-decoration: none;">{{ application_title }}</a> 中查看并回复此评论。</p>
+  </div>
+</body>
+
+</html>
diff --git a/api/templates/workflow_comment_mention_template_en-US.html b/api/templates/workflow_comment_mention_template_en-US.html
new file mode 100644
index 0000000000..1ef8fe4e3f
--- /dev/null
+++ b/api/templates/workflow_comment_mention_template_en-US.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      line-height: 16pt;
+      color: #101828;
+      background-color: #e9ebf0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .container {
+      width: 504px;
+      min-height: 374px;
+      margin: 40px auto;
+      padding: 0 48px;
+      background-color: #fcfcfd;
+      border-radius: 16px;
+      border: 1px solid #ffffff;
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
+    }
+
+    .header {
+      padding-top: 36px;
+      padding-bottom: 24px;
+    }
+
+    .header img {
+      max-width: 63px;
+      height: auto;
+    }
+
+    .title {
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
+      font-size: 24px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%;
+    }
+
+    .description {
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 8px;
+    }
+
+    .content2 {
+      margin: 0;
+      padding-bottom: 16px;
+    }
+
+    .comment-box {
+      margin-bottom: 16px;
+      padding: 12px 16px;
+      border-radius: 12px;
+      background-color: #f2f4f7;
+    }
+
+    .comment-text {
+      margin: 0;
+      color: #101828;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .tips {
+      margin: 0;
+      padding-bottom: 24px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="header">
+      <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
+    </div>
+    <p class="title">You were mentioned in a workflow comment</p>
+    <div class="description">
+      <p class="content1">Hi {{ mentioned_name }},</p>
+      <p class="content2">{{ commenter_name }} mentioned you in {{ app_name }}.</p>
+    </div>
+    <div class="comment-box">
+      <p class="comment-text">{{ comment_content }}</p>
+    </div>
+    <p class="tips"><a href="{{ app_url }}" style="color: #155AEF; text-decoration: none;">Open {{ application_title }}</a> to reply to the comment.</p>
+  </div>
+</body>
+
+</html>
diff --git a/api/templates/workflow_comment_mention_template_zh-CN.html b/api/templates/workflow_comment_mention_template_zh-CN.html
new file mode 100644
index 0000000000..8b9b2dbe71
--- /dev/null
+++ b/api/templates/workflow_comment_mention_template_zh-CN.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      line-height: 16pt;
+      color: #101828;
+      background-color: #e9ebf0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .container {
+      width: 504px;
+      min-height: 374px;
+      margin: 40px auto;
+      padding: 0 48px;
+      background-color: #fcfcfd;
+      border-radius: 16px;
+      border: 1px solid #ffffff;
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
+    }
+
+    .header {
+      padding-top: 36px;
+      padding-bottom: 24px;
+    }
+
+    .header img {
+      max-width: 63px;
+      height: auto;
+    }
+
+    .title {
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
+      font-size: 24px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%;
+    }
+
+    .description {
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 8px;
+    }
+
+    .content2 {
+      margin: 0;
+      padding-bottom: 16px;
+    }
+
+    .comment-box {
+      margin-bottom: 16px;
+      padding: 12px 16px;
+      border-radius: 12px;
+      background-color: #f2f4f7;
+    }
+
+    .comment-text {
+      margin: 0;
+      color: #101828;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .tips {
+      margin: 0;
+      padding-bottom: 24px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.07px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="header">
+      <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
+    </div>
+    <p class="title">你在工作流评论中被提及</p>
+    <div class="description">
+      <p class="content1">你好，{{ mentioned_name }}：</p>
+      <p class="content2">{{ commenter_name }} 在 {{ app_name }} 中提及了你。</p>
+    </div>
+    <div class="comment-box">
+      <p class="comment-text">{{ comment_content }}</p>
+    </div>
+    <p class="tips">请在 <a href="{{ app_url }}" style="color: #155AEF; text-decoration: none;">{{ application_title }}</a> 中查看并回复此评论。</p>
+  </div>
+</body>
+
+</html>
diff --git a/api/tests/integration_tests/conftest.py b/api/tests/integration_tests/conftest.py
index b2e8dda443..09078d196d 100644
--- a/api/tests/integration_tests/conftest.py
+++ b/api/tests/integration_tests/conftest.py
@@ -48,7 +48,7 @@ os.environ["OPENDAL_FS_ROOT"] = "/tmp/dify-storage"
 os.environ.setdefault("STORAGE_TYPE", "opendal")
 os.environ.setdefault("OPENDAL_SCHEME", "fs")
 
-_CACHED_APP = create_app()
+_SIO_APP, _CACHED_APP = create_app()
 
 
 @pytest.fixture(scope="session")
diff --git a/api/tests/test_containers_integration_tests/conftest.py b/api/tests/test_containers_integration_tests/conftest.py
index ef74893f07..66a25e5daf 100644
--- a/api/tests/test_containers_integration_tests/conftest.py
+++ b/api/tests/test_containers_integration_tests/conftest.py
@@ -369,7 +369,7 @@ def _create_app_with_containers() -> Flask:
 
     # Create and configure the Flask application
     logger.info("Initializing Flask application...")
-    app = create_app()
+    sio_app, app = create_app()
     logger.info("Flask application created successfully")
 
     # Initialize database schema
diff --git a/api/tests/test_containers_integration_tests/services/test_feature_service.py b/api/tests/test_containers_integration_tests/services/test_feature_service.py
index b3e7dd2a59..315936d721 100644
--- a/api/tests/test_containers_integration_tests/services/test_feature_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_feature_service.py
@@ -274,6 +274,7 @@ class TestFeatureService:
             mock_config.ENABLE_EMAIL_CODE_LOGIN = True
             mock_config.ENABLE_EMAIL_PASSWORD_LOGIN = True
             mock_config.ENABLE_SOCIAL_OAUTH_LOGIN = False
+            mock_config.ENABLE_COLLABORATION_MODE = True
             mock_config.ALLOW_REGISTER = False
             mock_config.ALLOW_CREATE_WORKSPACE = False
             mock_config.MAIL_TYPE = "smtp"
@@ -298,6 +299,7 @@ class TestFeatureService:
         # Verify authentication settings
         assert result.enable_email_code_login is True
         assert result.enable_email_password_login is False
+        assert result.enable_collaboration_mode is True
         assert result.is_allow_register is False
         assert result.is_allow_create_workspace is False
 
@@ -401,6 +403,7 @@ class TestFeatureService:
             mock_config.ENABLE_EMAIL_CODE_LOGIN = True
             mock_config.ENABLE_EMAIL_PASSWORD_LOGIN = True
             mock_config.ENABLE_SOCIAL_OAUTH_LOGIN = False
+            mock_config.ENABLE_COLLABORATION_MODE = False
             mock_config.ALLOW_REGISTER = True
             mock_config.ALLOW_CREATE_WORKSPACE = True
             mock_config.MAIL_TYPE = "smtp"
@@ -422,6 +425,7 @@ class TestFeatureService:
             assert result.enable_email_code_login is True
             assert result.enable_email_password_login is True
             assert result.enable_social_oauth_login is False
+            assert result.enable_collaboration_mode is False
             assert result.is_allow_register is True
             assert result.is_allow_create_workspace is True
             assert result.is_email_setup is True
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow.py b/api/tests/unit_tests/controllers/console/app/test_workflow.py
index f32d0ef0ec..9f20886a81 100644
--- a/api/tests/unit_tests/controllers/console/app/test_workflow.py
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import json
 from datetime import datetime
 from types import SimpleNamespace
 from unittest.mock import Mock
@@ -347,3 +348,87 @@ def test_advanced_chat_run_conversation_not_exists(app, monkeypatch: pytest.Monk
     ):
         with pytest.raises(NotFound):
             handler(api, app_model=SimpleNamespace(id="app"))
+
+
+def test_workflow_online_users_filters_inaccessible_workflow(app, monkeypatch: pytest.MonkeyPatch) -> None:
+    app_id_1 = "11111111-1111-1111-1111-111111111111"
+    app_id_2 = "22222222-2222-2222-2222-222222222222"
+    signed_avatar_url = "https://files.example.com/signed/avatar-1"
+    sign_avatar = Mock(return_value=signed_avatar_url)
+    monkeypatch.setattr(workflow_module, "current_account_with_tenant", lambda: (SimpleNamespace(), "tenant-1"))
+    monkeypatch.setattr(
+        workflow_module,
+        "WorkflowService",
+        lambda: SimpleNamespace(get_accessible_app_ids=lambda app_ids, tenant_id: {app_id_1}),
+    )
+    monkeypatch.setattr(workflow_module.file_helpers, "get_signed_file_url", sign_avatar)
+
+    workflow_module.redis_client.hgetall.side_effect = lambda key: (
+        {
+            b"sid-1": json.dumps(
+                {
+                    "user_id": "u-1",
+                    "username": "Alice",
+                    "avatar": "avatar-file-id",
+                    "sid": "sid-1",
+                }
+            )
+        }
+        if key == f"{workflow_module.WORKFLOW_ONLINE_USERS_PREFIX}{app_id_1}"
+        else {}
+    )
+
+    api = workflow_module.WorkflowOnlineUsersApi()
+    handler = _unwrap(api.get)
+
+    with app.test_request_context(
+        f"/apps/workflows/online-users?app_ids={app_id_1},{app_id_2}",
+        method="GET",
+    ):
+        response = handler(api)
+
+    assert response == {
+        "data": [
+            {
+                "app_id": app_id_1,
+                "users": [
+                    {
+                        "user_id": "u-1",
+                        "username": "Alice",
+                        "avatar": signed_avatar_url,
+                        "sid": "sid-1",
+                    }
+                ],
+            }
+        ]
+    }
+    workflow_module.redis_client.hgetall.assert_called_once_with(
+        f"{workflow_module.WORKFLOW_ONLINE_USERS_PREFIX}{app_id_1}"
+    )
+    sign_avatar.assert_called_once_with("avatar-file-id")
+
+
+def test_workflow_online_users_rejects_excessive_workflow_ids(app, monkeypatch: pytest.MonkeyPatch) -> None:
+    monkeypatch.setattr(workflow_module, "current_account_with_tenant", lambda: (SimpleNamespace(), "tenant-1"))
+    accessible_app_ids = Mock(return_value=set())
+    monkeypatch.setattr(
+        workflow_module,
+        "WorkflowService",
+        lambda: SimpleNamespace(get_accessible_app_ids=accessible_app_ids),
+    )
+
+    excessive_ids = ",".join(f"wf-{index}" for index in range(workflow_module.MAX_WORKFLOW_ONLINE_USERS_QUERY_IDS + 1))
+
+    api = workflow_module.WorkflowOnlineUsersApi()
+    handler = _unwrap(api.get)
+
+    with app.test_request_context(
+        f"/apps/workflows/online-users?app_ids={excessive_ids}",
+        method="GET",
+    ):
+        with pytest.raises(HTTPException) as exc:
+            handler(api)
+
+    assert exc.value.code == 400
+    assert "Maximum" in exc.value.description
+    accessible_app_ids.assert_not_called()
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow_comment_api.py b/api/tests/unit_tests/controllers/console/app/test_workflow_comment_api.py
new file mode 100644
index 0000000000..85afcf0e60
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow_comment_api.py
@@ -0,0 +1,201 @@
+from __future__ import annotations
+
+from contextlib import nullcontext
+from dataclasses import dataclass
+from datetime import datetime
+from types import SimpleNamespace
+from unittest.mock import MagicMock, PropertyMock, patch
+
+import pytest
+from flask import Flask
+from werkzeug.exceptions import Forbidden
+
+from controllers.console import console_ns
+from controllers.console import wraps as console_wraps
+from controllers.console.app import workflow_comment as workflow_comment_module
+from controllers.console.app import wraps as app_wraps
+from libs import login as login_lib
+from models.account import Account, AccountStatus, TenantAccountRole
+
+
+def _make_account(role: TenantAccountRole) -> Account:
+    account = Account(name="tester", email="tester@example.com")
+    account.status = AccountStatus.ACTIVE
+    account.role = role
+    account.id = "account-123"  # type: ignore[assignment]
+    account._current_tenant = SimpleNamespace(id="tenant-123")  # type: ignore[attr-defined]
+    account._get_current_object = lambda: account  # type: ignore[attr-defined]
+    return account
+
+
+def _make_app() -> SimpleNamespace:
+    return SimpleNamespace(id="app-123", tenant_id="tenant-123", status="normal", mode="workflow")
+
+
+def _patch_console_guards(monkeypatch: pytest.MonkeyPatch, account: Account, app_model: SimpleNamespace) -> None:
+    monkeypatch.setattr(login_lib.dify_config, "LOGIN_DISABLED", True)
+    monkeypatch.setattr(login_lib, "current_user", account)
+    monkeypatch.setattr(login_lib, "current_account_with_tenant", lambda: (account, account.current_tenant_id))
+    monkeypatch.setattr(login_lib, "check_csrf_token", lambda *_, **__: None)
+    monkeypatch.setattr(console_wraps, "current_account_with_tenant", lambda: (account, account.current_tenant_id))
+    monkeypatch.setattr(console_wraps.dify_config, "EDITION", "CLOUD")
+    monkeypatch.setattr(app_wraps, "current_account_with_tenant", lambda: (account, account.current_tenant_id))
+    monkeypatch.setattr(app_wraps, "_load_app_model", lambda _app_id: app_model)
+    monkeypatch.setattr(workflow_comment_module, "current_user", account)
+
+
+def _patch_write_services(monkeypatch: pytest.MonkeyPatch) -> None:
+    for method_name in (
+        "create_comment",
+        "update_comment",
+        "delete_comment",
+        "resolve_comment",
+        "validate_comment_access",
+        "create_reply",
+        "update_reply",
+        "delete_reply",
+    ):
+        monkeypatch.setattr(workflow_comment_module.WorkflowCommentService, method_name, MagicMock())
+
+
+def _patch_payload(payload: dict[str, object] | None):
+    if payload is None:
+        return nullcontext()
+    return patch.object(
+        type(console_ns),
+        "payload",
+        new_callable=PropertyMock,
+        return_value=payload,
+    )
+
+
+@dataclass(frozen=True)
+class WriteCase:
+    resource_cls: type
+    method_name: str
+    path: str
+    kwargs: dict[str, str]
+    payload: dict[str, object] | None = None
+
+
+@pytest.mark.parametrize(
+    "case",
+    [
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentListApi,
+            method_name="post",
+            path="/console/api/apps/app-123/workflow/comments",
+            kwargs={"app_id": "app-123"},
+            payload={"content": "hello", "position_x": 1.0, "position_y": 2.0, "mentioned_user_ids": []},
+        ),
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentDetailApi,
+            method_name="put",
+            path="/console/api/apps/app-123/workflow/comments/comment-1",
+            kwargs={"app_id": "app-123", "comment_id": "comment-1"},
+            payload={"content": "hello", "position_x": 1.0, "position_y": 2.0, "mentioned_user_ids": []},
+        ),
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentDetailApi,
+            method_name="delete",
+            path="/console/api/apps/app-123/workflow/comments/comment-1",
+            kwargs={"app_id": "app-123", "comment_id": "comment-1"},
+        ),
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentResolveApi,
+            method_name="post",
+            path="/console/api/apps/app-123/workflow/comments/comment-1/resolve",
+            kwargs={"app_id": "app-123", "comment_id": "comment-1"},
+        ),
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentReplyApi,
+            method_name="post",
+            path="/console/api/apps/app-123/workflow/comments/comment-1/replies",
+            kwargs={"app_id": "app-123", "comment_id": "comment-1"},
+            payload={"content": "reply", "mentioned_user_ids": []},
+        ),
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentReplyDetailApi,
+            method_name="put",
+            path="/console/api/apps/app-123/workflow/comments/comment-1/replies/reply-1",
+            kwargs={"app_id": "app-123", "comment_id": "comment-1", "reply_id": "reply-1"},
+            payload={"content": "reply", "mentioned_user_ids": []},
+        ),
+        WriteCase(
+            resource_cls=workflow_comment_module.WorkflowCommentReplyDetailApi,
+            method_name="delete",
+            path="/console/api/apps/app-123/workflow/comments/comment-1/replies/reply-1",
+            kwargs={"app_id": "app-123", "comment_id": "comment-1", "reply_id": "reply-1"},
+        ),
+    ],
+)
+def test_write_endpoints_require_edit_permission(app: Flask, monkeypatch: pytest.MonkeyPatch, case: WriteCase) -> None:
+    app.config.setdefault("RESTX_MASK_HEADER", "X-Fields")
+    account = _make_account(TenantAccountRole.NORMAL)
+    app_model = _make_app()
+    _patch_console_guards(monkeypatch, account, app_model)
+    _patch_write_services(monkeypatch)
+
+    with app.test_request_context(case.path, method=case.method_name.upper(), json=case.payload):
+        with _patch_payload(case.payload):
+            handler = getattr(case.resource_cls(), case.method_name)
+            with pytest.raises(Forbidden):
+                handler(**case.kwargs)
+
+
+def test_create_comment_allows_editor(app: Flask, monkeypatch: pytest.MonkeyPatch) -> None:
+    app.config.setdefault("RESTX_MASK_HEADER", "X-Fields")
+    account = _make_account(TenantAccountRole.EDITOR)
+    app_model = _make_app()
+    _patch_console_guards(monkeypatch, account, app_model)
+
+    create_comment_mock = MagicMock(return_value={"id": "comment-1"})
+    monkeypatch.setattr(workflow_comment_module.WorkflowCommentService, "create_comment", create_comment_mock)
+    payload = {"content": "hello", "position_x": 1.0, "position_y": 2.0, "mentioned_user_ids": []}
+
+    with app.test_request_context("/console/api/apps/app-123/workflow/comments", method="POST", json=payload):
+        with _patch_payload(payload):
+            result = workflow_comment_module.WorkflowCommentListApi().post(app_id="app-123")
+
+    if isinstance(result, tuple):
+        response = result[0]
+    else:
+        response = result
+    assert response["id"] == "comment-1"
+    create_comment_mock.assert_called_once_with(
+        tenant_id="tenant-123",
+        app_id="app-123",
+        created_by="account-123",
+        content="hello",
+        position_x=1.0,
+        position_y=2.0,
+        mentioned_user_ids=[],
+    )
+
+
+def test_update_comment_omits_mentions_when_payload_does_not_include_them(
+    app: Flask, monkeypatch: pytest.MonkeyPatch
+) -> None:
+    app.config.setdefault("RESTX_MASK_HEADER", "X-Fields")
+    account = _make_account(TenantAccountRole.EDITOR)
+    app_model = _make_app()
+    _patch_console_guards(monkeypatch, account, app_model)
+
+    update_comment_mock = MagicMock(return_value={"id": "comment-1", "updated_at": datetime(2024, 1, 1, 12, 0, 0)})
+    monkeypatch.setattr(workflow_comment_module.WorkflowCommentService, "update_comment", update_comment_mock)
+    payload = {"content": "hello", "position_x": 10.0, "position_y": 20.0}
+
+    with app.test_request_context("/console/api/apps/app-123/workflow/comments/comment-1", method="PUT", json=payload):
+        with _patch_payload(payload):
+            workflow_comment_module.WorkflowCommentDetailApi().put(app_id="app-123", comment_id="comment-1")
+
+    update_comment_mock.assert_called_once_with(
+        tenant_id="tenant-123",
+        app_id="app-123",
+        comment_id="comment-1",
+        user_id="account-123",
+        content="hello",
+        position_x=10.0,
+        position_y=20.0,
+        mentioned_user_ids=None,
+    )
diff --git a/api/tests/unit_tests/libs/test_email_i18n.py b/api/tests/unit_tests/libs/test_email_i18n.py
index 962a36fe03..b4c0eaf7ee 100644
--- a/api/tests/unit_tests/libs/test_email_i18n.py
+++ b/api/tests/unit_tests/libs/test_email_i18n.py
@@ -503,6 +503,7 @@ class TestEmailI18nIntegration:
             EmailType.ACCOUNT_DELETION_VERIFICATION,
             EmailType.QUEUE_MONITOR_ALERT,
             EmailType.DOCUMENT_CLEAN_NOTIFY,
+            EmailType.WORKFLOW_COMMENT_MENTION,
         ]
 
         for email_type in expected_types:
diff --git a/api/tests/unit_tests/models/test_comment_models.py b/api/tests/unit_tests/models/test_comment_models.py
new file mode 100644
index 0000000000..277335cbef
--- /dev/null
+++ b/api/tests/unit_tests/models/test_comment_models.py
@@ -0,0 +1,100 @@
+from unittest.mock import Mock, patch
+
+from models.comment import WorkflowComment, WorkflowCommentMention, WorkflowCommentReply
+
+
+def test_workflow_comment_account_properties_and_cache() -> None:
+    comment = WorkflowComment(created_by="user-1", resolved_by="user-2", content="hello", position_x=1, position_y=2)
+    created_account = Mock(id="user-1")
+    resolved_account = Mock(id="user-2")
+
+    with patch("models.comment.db.session.get", side_effect=[created_account, resolved_account]) as get_mock:
+        assert comment.created_by_account is created_account
+        assert comment.resolved_by_account is resolved_account
+        assert get_mock.call_count == 2
+
+    comment.cache_created_by_account(created_account)
+    comment.cache_resolved_by_account(resolved_account)
+    with patch("models.comment.db.session.get") as get_mock:
+        assert comment.created_by_account is created_account
+        assert comment.resolved_by_account is resolved_account
+        get_mock.assert_not_called()
+
+    comment_without_resolver = WorkflowComment(
+        created_by="user-1",
+        resolved_by=None,
+        content="hello",
+        position_x=1,
+        position_y=2,
+    )
+    with patch("models.comment.db.session.get") as get_mock:
+        assert comment_without_resolver.resolved_by_account is None
+        get_mock.assert_not_called()
+
+
+def test_workflow_comment_counts_and_participants() -> None:
+    reply_1 = WorkflowCommentReply(comment_id="comment-1", content="reply-1", created_by="user-2")
+    reply_2 = WorkflowCommentReply(comment_id="comment-1", content="reply-2", created_by="user-2")
+    mention_1 = WorkflowCommentMention(comment_id="comment-1", mentioned_user_id="user-3")
+    mention_2 = WorkflowCommentMention(comment_id="comment-1", mentioned_user_id="user-4")
+    comment = WorkflowComment(created_by="user-1", resolved_by=None, content="hello", position_x=1, position_y=2)
+    comment.replies = [reply_1, reply_2]
+    comment.mentions = [mention_1, mention_2]
+
+    account_1 = Mock(id="user-1")
+    account_2 = Mock(id="user-2")
+    account_3 = Mock(id="user-3")
+    account_map = {
+        "user-1": account_1,
+        "user-2": account_2,
+        "user-3": account_3,
+        "user-4": None,
+    }
+
+    with patch("models.comment.db.session.get", side_effect=lambda _model, user_id: account_map[user_id]) as get_mock:
+        participants = comment.participants
+
+    assert comment.reply_count == 2
+    assert comment.mention_count == 2
+    assert set(participants) == {account_1, account_2, account_3}
+    assert get_mock.call_count == 4
+
+
+def test_workflow_comment_participants_use_cached_accounts() -> None:
+    reply = WorkflowCommentReply(comment_id="comment-1", content="reply-1", created_by="user-2")
+    mention = WorkflowCommentMention(comment_id="comment-1", mentioned_user_id="user-3")
+    comment = WorkflowComment(created_by="user-1", resolved_by=None, content="hello", position_x=1, position_y=2)
+    comment.replies = [reply]
+    comment.mentions = [mention]
+
+    account_1 = Mock(id="user-1")
+    account_2 = Mock(id="user-2")
+    account_3 = Mock(id="user-3")
+    comment.cache_created_by_account(account_1)
+    reply.cache_created_by_account(account_2)
+    mention.cache_mentioned_user_account(account_3)
+
+    with patch("models.comment.db.session.get") as get_mock:
+        participants = comment.participants
+
+    assert set(participants) == {account_1, account_2, account_3}
+    get_mock.assert_not_called()
+
+
+def test_reply_and_mention_account_properties_and_cache() -> None:
+    reply = WorkflowCommentReply(comment_id="comment-1", content="reply", created_by="user-1")
+    mention = WorkflowCommentMention(comment_id="comment-1", mentioned_user_id="user-2")
+    reply_account = Mock(id="user-1")
+    mention_account = Mock(id="user-2")
+
+    with patch("models.comment.db.session.get", side_effect=[reply_account, mention_account]) as get_mock:
+        assert reply.created_by_account is reply_account
+        assert mention.mentioned_user_account is mention_account
+        assert get_mock.call_count == 2
+
+    reply.cache_created_by_account(reply_account)
+    mention.cache_mentioned_user_account(mention_account)
+    with patch("models.comment.db.session.get") as get_mock:
+        assert reply.created_by_account is reply_account
+        assert mention.mentioned_user_account is mention_account
+        get_mock.assert_not_called()
diff --git a/api/tests/unit_tests/repositories/test_workflow_collaboration_repository.py b/api/tests/unit_tests/repositories/test_workflow_collaboration_repository.py
new file mode 100644
index 0000000000..1f47e8b692
--- /dev/null
+++ b/api/tests/unit_tests/repositories/test_workflow_collaboration_repository.py
@@ -0,0 +1,121 @@
+import json
+from unittest.mock import Mock
+
+import pytest
+
+from repositories import workflow_collaboration_repository as repo_module
+from repositories.workflow_collaboration_repository import WorkflowCollaborationRepository
+
+
+class TestWorkflowCollaborationRepository:
+    @pytest.fixture
+    def mock_redis(self, monkeypatch: pytest.MonkeyPatch) -> Mock:
+        mock_redis = Mock()
+        monkeypatch.setattr(repo_module, "redis_client", mock_redis)
+        return mock_redis
+
+    def test_get_sid_mapping_returns_mapping(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.get.return_value = b'{"workflow_id":"wf-1","user_id":"u-1"}'
+        repository = WorkflowCollaborationRepository()
+
+        # Act
+        result = repository.get_sid_mapping("sid-1")
+
+        # Assert
+        assert result == {"workflow_id": "wf-1", "user_id": "u-1"}
+
+    def test_list_sessions_filters_invalid_entries(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.hgetall.return_value = {
+            b"sid-1": b'{"user_id":"u-1","username":"Jane","sid":"sid-1","connected_at":2}',
+            b"sid-2": b'{"username":"Missing","sid":"sid-2"}',
+            b"sid-3": b"not-json",
+        }
+        repository = WorkflowCollaborationRepository()
+
+        # Act
+        result = repository.list_sessions("wf-1")
+
+        # Assert
+        assert result == [
+            {
+                "user_id": "u-1",
+                "username": "Jane",
+                "avatar": None,
+                "sid": "sid-1",
+                "connected_at": 2,
+            }
+        ]
+
+    def test_set_session_info_persists_payload(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.exists.return_value = True
+        repository = WorkflowCollaborationRepository()
+        payload = {
+            "user_id": "u-1",
+            "username": "Jane",
+            "avatar": None,
+            "sid": "sid-1",
+            "connected_at": 1,
+        }
+
+        # Act
+        repository.set_session_info("wf-1", payload)
+
+        # Assert
+        assert mock_redis.hset.called
+        workflow_key, sid, session_json = mock_redis.hset.call_args.args
+        assert workflow_key == "workflow_online_users:wf-1"
+        assert sid == "sid-1"
+        assert json.loads(session_json)["user_id"] == "u-1"
+        assert mock_redis.set.called
+
+    def test_refresh_session_state_expires_keys(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.exists.return_value = True
+        repository = WorkflowCollaborationRepository()
+
+        # Act
+        repository.refresh_session_state("wf-1", "sid-1")
+
+        # Assert
+        assert mock_redis.expire.call_count == 2
+
+    def test_get_current_leader_decodes_bytes(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.get.return_value = b"sid-1"
+        repository = WorkflowCollaborationRepository()
+
+        # Act
+        result = repository.get_current_leader("wf-1")
+
+        # Assert
+        assert result == "sid-1"
+
+    def test_set_leader_if_absent_uses_nx(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.set.return_value = True
+        repository = WorkflowCollaborationRepository()
+
+        # Act
+        result = repository.set_leader_if_absent("wf-1", "sid-1")
+
+        # Assert
+        assert result is True
+        _key, _value = mock_redis.set.call_args.args
+        assert _key == "workflow_leader:wf-1"
+        assert _value == "sid-1"
+        assert mock_redis.set.call_args.kwargs["nx"] is True
+        assert "ex" in mock_redis.set.call_args.kwargs
+
+    def test_get_session_sids_decodes(self, mock_redis: Mock) -> None:
+        # Arrange
+        mock_redis.hkeys.return_value = [b"sid-1", "sid-2"]
+        repository = WorkflowCollaborationRepository()
+
+        # Act
+        result = repository.get_session_sids("wf-1")
+
+        # Assert
+        assert result == ["sid-1", "sid-2"]
diff --git a/api/tests/unit_tests/services/test_workflow_collaboration_service.py b/api/tests/unit_tests/services/test_workflow_collaboration_service.py
new file mode 100644
index 0000000000..8a6addfece
--- /dev/null
+++ b/api/tests/unit_tests/services/test_workflow_collaboration_service.py
@@ -0,0 +1,608 @@
+from unittest.mock import Mock, patch
+
+import pytest
+
+from repositories.workflow_collaboration_repository import WorkflowCollaborationRepository
+from services.workflow_collaboration_service import WorkflowCollaborationService
+
+
+class TestWorkflowCollaborationService:
+    @pytest.fixture
+    def service(self) -> tuple[WorkflowCollaborationService, Mock, Mock]:
+        repository = Mock(spec=WorkflowCollaborationRepository)
+        socketio = Mock()
+        return WorkflowCollaborationService(repository, socketio), repository, socketio
+
+    def test_authorize_and_join_workflow_room_returns_leader_status(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, socketio = service
+        socketio.get_session.return_value = {
+            "user_id": "u-1",
+            "username": "Jane",
+            "avatar": None,
+            "tenant_id": "t-1",
+        }
+
+        with (
+            patch.object(collaboration_service, "_can_access_workflow", return_value=True),
+            patch.object(collaboration_service, "get_or_set_leader", return_value="sid-1"),
+            patch.object(collaboration_service, "broadcast_online_users"),
+        ):
+            # Act
+            result = collaboration_service.authorize_and_join_workflow_room("wf-1", "sid-1")
+
+        # Assert
+        assert result == ("u-1", True)
+        repository.set_session_info.assert_called_once()
+        socketio.enter_room.assert_called_once_with("sid-1", "wf-1")
+        socketio.emit.assert_called_once_with("status", {"isLeader": True}, room="sid-1")
+
+    def test_authorize_and_join_workflow_room_returns_none_when_missing_user(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, _repository, socketio = service
+        socketio.get_session.return_value = {}
+
+        # Act
+        result = collaboration_service.authorize_and_join_workflow_room("wf-1", "sid-1")
+
+        # Assert
+        assert result is None
+
+    def test_authorize_and_join_workflow_room_returns_none_when_missing_tenant(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        socketio.get_session.return_value = {"user_id": "u-1", "username": "Jane", "avatar": None}
+
+        result = collaboration_service.authorize_and_join_workflow_room("wf-1", "sid-1")
+
+        assert result is None
+        repository.set_session_info.assert_not_called()
+        socketio.enter_room.assert_not_called()
+        socketio.emit.assert_not_called()
+
+    def test_authorize_and_join_workflow_room_returns_none_when_workflow_is_not_accessible(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        socketio.get_session.return_value = {
+            "user_id": "u-1",
+            "username": "Jane",
+            "avatar": None,
+            "tenant_id": "t-1",
+        }
+
+        with patch.object(collaboration_service, "_can_access_workflow", return_value=False):
+            result = collaboration_service.authorize_and_join_workflow_room("wf-1", "sid-1")
+
+        assert result is None
+        repository.set_session_info.assert_not_called()
+        socketio.enter_room.assert_not_called()
+        socketio.emit.assert_not_called()
+
+    def test_repr_and_save_socket_identity(self, service: tuple[WorkflowCollaborationService, Mock, Mock]) -> None:
+        collaboration_service, _repository, socketio = service
+        user = Mock()
+        user.id = "u-1"
+        user.name = "Jane"
+        user.avatar = "avatar.png"
+        user.current_tenant_id = "t-1"
+
+        assert "WorkflowCollaborationService" in repr(collaboration_service)
+
+        collaboration_service.save_socket_identity("sid-1", user)
+
+        socketio.save_session.assert_called_once_with(
+            "sid-1",
+            {"user_id": "u-1", "username": "Jane", "avatar": "avatar.png", "tenant_id": "t-1"},
+        )
+
+    def test_can_access_workflow_uses_session_factory(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, _repository, _socketio = service
+        session = Mock()
+        session.scalar.return_value = "wf-1"
+        session_context = Mock()
+        session_context.__enter__ = Mock(return_value=session)
+        session_context.__exit__ = Mock(return_value=False)
+
+        with patch(
+            "services.workflow_collaboration_service.session_factory.create_session",
+            return_value=session_context,
+        ):
+            result = collaboration_service._can_access_workflow("wf-1", "tenant-1")
+
+        assert result is True
+        session.scalar.assert_called_once()
+
+    def test_relay_collaboration_event_unauthorized(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_sid_mapping.return_value = None
+
+        # Act
+        result = collaboration_service.relay_collaboration_event("sid-1", {})
+
+        # Assert
+        assert result == ({"msg": "unauthorized"}, 401)
+
+    def test_relay_collaboration_event_emits_update(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+        payload = {"type": "mouse_move", "data": {"x": 1}, "timestamp": 123}
+
+        # Act
+        result = collaboration_service.relay_collaboration_event("sid-1", payload)
+
+        # Assert
+        assert result == ({"msg": "event_broadcasted"}, 200)
+        socketio.emit.assert_called_once_with(
+            "collaboration_update",
+            {"type": "mouse_move", "userId": "u-1", "data": {"x": 1}, "timestamp": 123},
+            room="wf-1",
+            skip_sid="sid-1",
+        )
+
+    def test_relay_collaboration_event_requires_event_type(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, _socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+
+        result = collaboration_service.relay_collaboration_event("sid-1", {"data": {"x": 1}})
+
+        assert result == ({"msg": "invalid event type"}, 400)
+
+    def test_relay_collaboration_event_sync_request_forwards_to_active_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+        repository.get_current_leader.return_value = "sid-leader"
+        payload = {"type": "sync_request", "data": {"reason": "join"}, "timestamp": 123}
+
+        with (
+            patch.object(collaboration_service, "refresh_session_state"),
+            patch.object(collaboration_service, "is_session_active", return_value=True),
+        ):
+            result = collaboration_service.relay_collaboration_event("sid-1", payload)
+
+        assert result == ({"msg": "sync_request_forwarded"}, 200)
+        socketio.emit.assert_called_once_with(
+            "collaboration_update",
+            {"type": "sync_request", "userId": "u-1", "data": {"reason": "join"}, "timestamp": 123},
+            room="sid-leader",
+        )
+        repository.set_leader.assert_not_called()
+
+    def test_relay_collaboration_event_sync_request_reelects_active_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+        repository.get_current_leader.return_value = "sid-old"
+        repository.list_sessions.return_value = [
+            {
+                "user_id": "u-2",
+                "username": "B",
+                "avatar": None,
+                "sid": "sid-2",
+                "connected_at": 1,
+                "graph_active": True,
+            },
+            {
+                "user_id": "u-3",
+                "username": "C",
+                "avatar": None,
+                "sid": "sid-3",
+                "connected_at": 2,
+                "graph_active": True,
+            },
+        ]
+        payload = {"type": "sync_request", "data": {"reason": "join"}, "timestamp": 123}
+
+        def _is_session_active(_workflow_id: str, session_sid: str) -> bool:
+            return session_sid != "sid-old"
+
+        with (
+            patch.object(collaboration_service, "refresh_session_state"),
+            patch.object(collaboration_service, "broadcast_leader_change") as broadcast_leader_change,
+            patch.object(collaboration_service, "is_session_active", side_effect=_is_session_active),
+        ):
+            result = collaboration_service.relay_collaboration_event("sid-2", payload)
+
+        assert result == ({"msg": "sync_request_forwarded"}, 200)
+        repository.delete_leader.assert_called_once_with("wf-1")
+        repository.set_leader.assert_called_once_with("wf-1", "sid-2")
+        broadcast_leader_change.assert_called_once_with("wf-1", "sid-2")
+        socketio.emit.assert_called_once_with(
+            "collaboration_update",
+            {"type": "sync_request", "userId": "u-1", "data": {"reason": "join"}, "timestamp": 123},
+            room="sid-2",
+        )
+
+    def test_relay_collaboration_event_sync_request_returns_when_no_active_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+        repository.get_current_leader.return_value = "sid-old"
+        repository.list_sessions.return_value = []
+        payload = {"type": "sync_request", "data": {"reason": "join"}, "timestamp": 123}
+
+        with (
+            patch.object(collaboration_service, "refresh_session_state"),
+            patch.object(collaboration_service, "is_session_active", return_value=False),
+        ):
+            result = collaboration_service.relay_collaboration_event("sid-2", payload)
+
+        assert result == ({"msg": "no_active_leader"}, 200)
+        repository.delete_leader.assert_called_once_with("wf-1")
+        socketio.emit.assert_not_called()
+
+    def test_relay_graph_event_unauthorized(self, service: tuple[WorkflowCollaborationService, Mock, Mock]) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_sid_mapping.return_value = None
+
+        # Act
+        result = collaboration_service.relay_graph_event("sid-1", {"nodes": []})
+
+        # Assert
+        assert result == ({"msg": "unauthorized"}, 401)
+
+    def test_disconnect_session_no_mapping(self, service: tuple[WorkflowCollaborationService, Mock, Mock]) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_sid_mapping.return_value = None
+
+        # Act
+        collaboration_service.disconnect_session("sid-1")
+
+        # Assert
+        repository.delete_session.assert_not_called()
+
+    def test_disconnect_session_cleans_up(self, service: tuple[WorkflowCollaborationService, Mock, Mock]) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+
+        with (
+            patch.object(collaboration_service, "handle_leader_disconnect") as handle_leader_disconnect,
+            patch.object(collaboration_service, "broadcast_online_users") as broadcast_online_users,
+        ):
+            # Act
+            collaboration_service.disconnect_session("sid-1")
+
+        # Assert
+        repository.delete_session.assert_called_once_with("wf-1", "sid-1")
+        handle_leader_disconnect.assert_called_once_with("wf-1", "sid-1")
+        broadcast_online_users.assert_called_once_with("wf-1")
+
+    def test_get_or_set_leader_returns_active_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = "sid-1"
+
+        with patch.object(collaboration_service, "is_session_active", return_value=True):
+            # Act
+            result = collaboration_service.get_or_set_leader("wf-1", "sid-2")
+
+        # Assert
+        assert result == "sid-1"
+        repository.set_leader_if_absent.assert_not_called()
+
+    def test_get_or_set_leader_replaces_dead_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = "sid-1"
+        repository.set_leader_if_absent.return_value = True
+        repository.list_sessions.return_value = [
+            {
+                "user_id": "u-2",
+                "username": "B",
+                "avatar": None,
+                "sid": "sid-2",
+                "connected_at": 1,
+                "graph_active": True,
+            }
+        ]
+
+        with (
+            patch.object(collaboration_service, "is_session_active", side_effect=lambda _wf, sid: sid != "sid-1"),
+            patch.object(collaboration_service, "broadcast_leader_change") as broadcast_leader_change,
+        ):
+            # Act
+            result = collaboration_service.get_or_set_leader("wf-1", "sid-2")
+
+        # Assert
+        assert result == "sid-2"
+        repository.delete_session.assert_called_once_with("wf-1", "sid-1")
+        repository.delete_leader.assert_called_once_with("wf-1")
+        broadcast_leader_change.assert_called_once_with("wf-1", "sid-2")
+
+    def test_get_or_set_leader_falls_back_to_existing(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.side_effect = [None, "sid-3"]
+        repository.set_leader_if_absent.return_value = False
+        repository.list_sessions.return_value = [
+            {
+                "user_id": "u-2",
+                "username": "B",
+                "avatar": None,
+                "sid": "sid-2",
+                "connected_at": 1,
+                "graph_active": True,
+            }
+        ]
+
+        # Act
+        result = collaboration_service.get_or_set_leader("wf-1", "sid-2")
+
+        # Assert
+        assert result == "sid-3"
+
+    def test_get_or_set_leader_returns_sid_when_leader_still_missing(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.side_effect = [None, None]
+        repository.set_leader_if_absent.return_value = False
+
+        result = collaboration_service.get_or_set_leader("wf-1", "sid-2")
+
+        assert result == "sid-2"
+
+    def test_handle_leader_disconnect_elects_new(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = "sid-1"
+        repository.list_sessions.return_value = [
+            {
+                "user_id": "u-2",
+                "username": "B",
+                "avatar": None,
+                "sid": "sid-2",
+                "connected_at": 1,
+                "graph_active": True,
+            }
+        ]
+
+        with (
+            patch.object(collaboration_service, "is_session_active", return_value=True),
+            patch.object(collaboration_service, "broadcast_leader_change") as broadcast_leader_change,
+        ):
+            # Act
+            collaboration_service.handle_leader_disconnect("wf-1", "sid-1")
+
+        # Assert
+        repository.set_leader.assert_called_once_with("wf-1", "sid-2")
+        broadcast_leader_change.assert_called_once_with("wf-1", "sid-2")
+
+    def test_handle_leader_disconnect_clears_when_empty(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = "sid-1"
+        repository.list_sessions.return_value = []
+
+        # Act
+        collaboration_service.handle_leader_disconnect("wf-1", "sid-1")
+
+        # Assert
+        repository.delete_leader.assert_called_once_with("wf-1")
+
+    def test_handle_leader_disconnect_ignores_non_leader_or_missing_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, _socketio = service
+
+        repository.get_current_leader.return_value = None
+        collaboration_service.handle_leader_disconnect("wf-1", "sid-1")
+
+        repository.get_current_leader.return_value = "sid-leader"
+        collaboration_service.handle_leader_disconnect("wf-1", "sid-other")
+
+        repository.set_leader.assert_not_called()
+        repository.delete_leader.assert_not_called()
+
+    def test_broadcast_leader_change_logs_emit_errors(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        repository.get_session_sids.return_value = ["sid-1", "sid-2"]
+        socketio.emit.side_effect = [RuntimeError("boom"), None]
+
+        with patch("services.workflow_collaboration_service.logging.exception") as exception_mock:
+            collaboration_service.broadcast_leader_change("wf-1", "sid-2")
+
+        assert exception_mock.call_count == 1
+
+    def test_broadcast_online_users_sorts_and_emits(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, socketio = service
+        repository.list_sessions.return_value = [
+            {"user_id": "u-1", "username": "A", "avatar": None, "sid": "sid-1", "connected_at": 3},
+            {"user_id": "u-2", "username": "B", "avatar": None, "sid": "sid-2", "connected_at": 1},
+        ]
+        repository.get_current_leader.return_value = "sid-1"
+
+        with patch.object(collaboration_service, "is_session_active", return_value=True):
+            # Act
+            collaboration_service.broadcast_online_users("wf-1")
+
+        # Assert
+        socketio.emit.assert_called_once_with(
+            "online_users",
+            {
+                "workflow_id": "wf-1",
+                "users": [
+                    {"user_id": "u-2", "username": "B", "avatar": None, "sid": "sid-2", "connected_at": 1},
+                    {"user_id": "u-1", "username": "A", "avatar": None, "sid": "sid-1", "connected_at": 3},
+                ],
+                "leader": "sid-1",
+            },
+            room="wf-1",
+        )
+
+    def test_broadcast_online_users_reassigns_missing_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, socketio = service
+        users = [{"user_id": "u-2", "username": "B", "avatar": None, "sid": "sid-2", "connected_at": 1}]
+        repository.get_current_leader.return_value = "sid-old"
+
+        with (
+            patch.object(collaboration_service, "_prune_inactive_sessions", return_value=users),
+            patch.object(collaboration_service, "_select_graph_leader", return_value="sid-2"),
+            patch.object(collaboration_service, "broadcast_leader_change") as broadcast_leader_change,
+        ):
+            collaboration_service.broadcast_online_users("wf-1")
+
+        repository.delete_leader.assert_called_once_with("wf-1")
+        repository.set_leader.assert_called_once_with("wf-1", "sid-2")
+        broadcast_leader_change.assert_called_once_with("wf-1", "sid-2")
+        socketio.emit.assert_called_once_with(
+            "online_users",
+            {"workflow_id": "wf-1", "users": users, "leader": "sid-2"},
+            room="wf-1",
+        )
+
+    def test_refresh_session_state_expires_active_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = "sid-1"
+
+        with patch.object(collaboration_service, "is_session_active", return_value=True):
+            # Act
+            collaboration_service.refresh_session_state("wf-1", "sid-1")
+
+        # Assert
+        repository.refresh_session_state.assert_called_once_with("wf-1", "sid-1")
+        repository.expire_leader.assert_called_once_with("wf-1")
+        repository.set_leader.assert_not_called()
+
+    def test_refresh_session_state_sets_leader_when_missing(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        # Arrange
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = None
+        repository.list_sessions.return_value = [
+            {
+                "user_id": "u-2",
+                "username": "B",
+                "avatar": None,
+                "sid": "sid-2",
+                "connected_at": 1,
+                "graph_active": True,
+            }
+        ]
+
+        with (
+            patch.object(collaboration_service, "is_session_active", return_value=True),
+            patch.object(collaboration_service, "broadcast_leader_change") as broadcast_leader_change,
+        ):
+            # Act
+            collaboration_service.refresh_session_state("wf-1", "sid-2")
+
+        # Assert
+        repository.set_leader.assert_called_once_with("wf-1", "sid-2")
+        broadcast_leader_change.assert_called_once_with("wf-1", "sid-2")
+
+    def test_refresh_session_state_replaces_inactive_existing_leader(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, _socketio = service
+        repository.get_current_leader.return_value = "sid-old"
+
+        with (
+            patch.object(collaboration_service, "is_session_active", return_value=False),
+            patch.object(collaboration_service, "broadcast_leader_change") as broadcast_leader_change,
+        ):
+            collaboration_service.refresh_session_state("wf-1", "sid-new")
+
+        repository.delete_leader.assert_called_once_with("wf-1")
+        repository.set_leader.assert_called_once_with("wf-1", "sid-new")
+        broadcast_leader_change.assert_called_once_with("wf-1", "sid-new")
+
+    def test_relay_graph_event_emits_update(self, service: tuple[WorkflowCollaborationService, Mock, Mock]) -> None:
+        # Arrange
+        collaboration_service, repository, socketio = service
+        repository.get_sid_mapping.return_value = {"workflow_id": "wf-1", "user_id": "u-1"}
+
+        # Act
+        result = collaboration_service.relay_graph_event("sid-1", {"nodes": []})
+
+        # Assert
+        assert result == ({"msg": "graph_update_broadcasted"}, 200)
+        repository.refresh_session_state.assert_called_once_with("wf-1", "sid-1")
+        socketio.emit.assert_called_once_with("graph_update", {"nodes": []}, room="wf-1", skip_sid="sid-1")
+
+    def test_prune_inactive_sessions_handles_empty_and_removes_stale(
+        self, service: tuple[WorkflowCollaborationService, Mock, Mock]
+    ) -> None:
+        collaboration_service, repository, _socketio = service
+        repository.list_sessions.return_value = []
+        assert collaboration_service._prune_inactive_sessions("wf-1") == []
+
+        active = {"sid": "sid-1", "user_id": "u-1", "connected_at": 1}
+        stale = {"sid": "sid-2", "user_id": "u-2", "connected_at": 2}
+        repository.list_sessions.return_value = [active, stale]
+
+        with patch.object(
+            collaboration_service,
+            "is_session_active",
+            side_effect=lambda _workflow_id, sid: sid == "sid-1",
+        ):
+            users = collaboration_service._prune_inactive_sessions("wf-1")
+
+        assert users == [active]
+        repository.delete_session.assert_called_with("wf-1", "sid-2")
+
+    def test_is_session_active_guard_branches(self, service: tuple[WorkflowCollaborationService, Mock, Mock]) -> None:
+        collaboration_service, repository, socketio = service
+        socketio.manager.is_connected.return_value = True
+        repository.session_exists.return_value = True
+        repository.sid_mapping_exists.return_value = True
+
+        assert collaboration_service.is_session_active("wf-1", "") is False
+
+        socketio.manager.is_connected.return_value = False
+        assert collaboration_service.is_session_active("wf-1", "sid-1") is False
+
+        socketio.manager.is_connected.side_effect = AttributeError("missing manager")
+        assert collaboration_service.is_session_active("wf-1", "sid-1") is False
+        socketio.manager.is_connected.side_effect = None
+
+        socketio.manager.is_connected.return_value = True
+        repository.session_exists.return_value = False
+        assert collaboration_service.is_session_active("wf-1", "sid-1") is False
+
+        repository.session_exists.return_value = True
+        repository.sid_mapping_exists.return_value = False
+        assert collaboration_service.is_session_active("wf-1", "sid-1") is False
diff --git a/api/tests/unit_tests/services/test_workflow_comment_service.py b/api/tests/unit_tests/services/test_workflow_comment_service.py
new file mode 100644
index 0000000000..e6db068e07
--- /dev/null
+++ b/api/tests/unit_tests/services/test_workflow_comment_service.py
@@ -0,0 +1,578 @@
+from unittest.mock import MagicMock, Mock, patch
+
+import pytest
+from werkzeug.exceptions import Forbidden, NotFound
+
+from services import workflow_comment_service as service_module
+from services.workflow_comment_service import WorkflowCommentService
+
+
+@pytest.fixture
+def mock_session(monkeypatch: pytest.MonkeyPatch) -> Mock:
+    session = Mock()
+    context_manager = MagicMock()
+    context_manager.__enter__.return_value = session
+    context_manager.__exit__.return_value = False
+    mock_db = MagicMock()
+    mock_db.engine = Mock()
+    empty_scalars = Mock()
+    empty_scalars.all.return_value = []
+    session.scalars.return_value = empty_scalars
+    monkeypatch.setattr(service_module, "Session", Mock(return_value=context_manager))
+    monkeypatch.setattr(service_module, "db", mock_db)
+    monkeypatch.setattr(service_module.send_workflow_comment_mention_email_task, "delay", Mock())
+    return session
+
+
+def _mock_scalars(result_list: list[object]) -> Mock:
+    scalars = Mock()
+    scalars.all.return_value = result_list
+    return scalars
+
+
+class TestWorkflowCommentService:
+    def test_validate_content_rejects_empty(self) -> None:
+        with pytest.raises(ValueError):
+            WorkflowCommentService._validate_content("   ")
+
+    def test_validate_content_rejects_too_long(self) -> None:
+        with pytest.raises(ValueError):
+            WorkflowCommentService._validate_content("a" * 1001)
+
+    def test_filter_valid_mentioned_user_ids_filters_by_tenant_and_preserves_order(self, mock_session: Mock) -> None:
+        tenant_member_1 = "123e4567-e89b-12d3-a456-426614174000"
+        tenant_member_2 = "123e4567-e89b-12d3-a456-426614174002"
+        non_tenant_member = "123e4567-e89b-12d3-a456-426614174001"
+        mock_session.scalars.return_value = _mock_scalars([tenant_member_1, tenant_member_2])
+
+        result = WorkflowCommentService._filter_valid_mentioned_user_ids(
+            [
+                tenant_member_1,
+                "",
+                123,  # type: ignore[list-item]
+                tenant_member_1,
+                non_tenant_member,
+                tenant_member_2,
+            ],
+            session=mock_session,
+            tenant_id="tenant-1",
+        )
+
+        assert result == [
+            tenant_member_1,
+            tenant_member_2,
+        ]
+
+    def test_format_comment_excerpt_handles_short_and_long_limits(self) -> None:
+        assert WorkflowCommentService._format_comment_excerpt("  hello  ", max_length=10) == "hello"
+        assert WorkflowCommentService._format_comment_excerpt("abcdefghijk", max_length=3) == "abc"
+        assert WorkflowCommentService._format_comment_excerpt("  abcdefghijk  ", max_length=8) == "abcde..."
+
+    def test_build_mention_email_payloads_returns_empty_for_no_candidates(self, mock_session: Mock) -> None:
+        assert (
+            WorkflowCommentService._build_mention_email_payloads(
+                session=mock_session,
+                tenant_id="tenant-1",
+                app_id="app-1",
+                mentioner_id="user-1",
+                mentioned_user_ids=[],
+                content="hello",
+            )
+            == []
+        )
+        assert (
+            WorkflowCommentService._build_mention_email_payloads(
+                session=mock_session,
+                tenant_id="tenant-1",
+                app_id="app-1",
+                mentioner_id="user-1",
+                mentioned_user_ids=["user-1"],
+                content="hello",
+            )
+            == []
+        )
+
+    def test_dispatch_mention_emails_enqueues_each_payload(self) -> None:
+        delay_mock = Mock()
+        with patch.object(service_module.send_workflow_comment_mention_email_task, "delay", delay_mock):
+            WorkflowCommentService._dispatch_mention_emails(
+                [
+                    {"to": "a@example.com"},
+                    {"to": "b@example.com"},
+                ]
+            )
+
+        assert delay_mock.call_count == 2
+
+    def test_build_mention_email_payloads_skips_accounts_without_email(self, mock_session: Mock) -> None:
+        account_without_email = Mock()
+        account_without_email.email = None
+        account_without_email.name = "No Email"
+        account_without_email.interface_language = "en-US"
+
+        account_with_email = Mock()
+        account_with_email.email = "user@example.com"
+        account_with_email.name = ""
+        account_with_email.interface_language = None
+
+        mock_session.scalar.side_effect = ["My App", "Commenter"]
+        mock_session.scalars.return_value = _mock_scalars([account_without_email, account_with_email])
+
+        payloads = WorkflowCommentService._build_mention_email_payloads(
+            session=mock_session,
+            tenant_id="tenant-1",
+            app_id="app-1",
+            mentioner_id="user-1",
+            mentioned_user_ids=["user-2"],
+            content="hello",
+        )
+        expected_app_url = f"{service_module.dify_config.CONSOLE_WEB_URL.rstrip('/')}/app/app-1/workflow"
+
+        assert payloads == [
+            {
+                "language": "en-US",
+                "to": "user@example.com",
+                "mentioned_name": "user@example.com",
+                "commenter_name": "Commenter",
+                "app_name": "My App",
+                "comment_content": "hello",
+                "app_url": expected_app_url,
+            }
+        ]
+
+    def test_create_comment_creates_mentions(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.id = "comment-1"
+        comment.created_at = "ts"
+
+        with (
+            patch.object(service_module, "WorkflowComment", return_value=comment),
+            patch.object(service_module, "WorkflowCommentMention", return_value=Mock()),
+            patch.object(WorkflowCommentService, "_filter_valid_mentioned_user_ids", return_value=["user-2"]),
+        ):
+            result = WorkflowCommentService.create_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                created_by="user-1",
+                content="hello",
+                position_x=1.0,
+                position_y=2.0,
+                mentioned_user_ids=["user-2", "bad-id"],
+            )
+
+        assert result == {"id": "comment-1", "created_at": "ts"}
+        assert mock_session.add.call_args_list[0].args[0] is comment
+        assert mock_session.add.call_count == 2
+        mock_session.commit.assert_called_once()
+
+    def test_update_comment_raises_not_found(self, mock_session: Mock) -> None:
+        mock_session.scalar.return_value = None
+
+        with pytest.raises(NotFound):
+            WorkflowCommentService.update_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                user_id="user-1",
+                content="hello",
+            )
+
+    def test_update_comment_raises_forbidden(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.created_by = "owner"
+        mock_session.scalar.return_value = comment
+
+        with pytest.raises(Forbidden):
+            WorkflowCommentService.update_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                user_id="intruder",
+                content="hello",
+            )
+
+    def test_update_comment_replaces_mentions(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.id = "comment-1"
+        comment.created_by = "owner"
+        mock_session.scalar.return_value = comment
+
+        existing_mentions = [Mock(), Mock()]
+        mock_session.scalars.return_value = _mock_scalars(existing_mentions)
+
+        with patch.object(WorkflowCommentService, "_filter_valid_mentioned_user_ids", return_value=["user-2"]):
+            result = WorkflowCommentService.update_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                user_id="owner",
+                content="updated",
+                mentioned_user_ids=["user-2", "bad-id"],
+            )
+
+        assert result == {"id": "comment-1", "updated_at": comment.updated_at}
+        assert mock_session.delete.call_count == 2
+        assert mock_session.add.call_count == 1
+        mock_session.commit.assert_called_once()
+
+    def test_update_comment_preserves_mentions_when_mentioned_user_ids_omitted(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.id = "comment-1"
+        comment.created_by = "owner"
+        mock_session.scalar.return_value = comment
+
+        with (
+            patch.object(WorkflowCommentService, "_filter_valid_mentioned_user_ids") as filter_mentions_mock,
+            patch.object(WorkflowCommentService, "_build_mention_email_payloads") as build_payloads_mock,
+            patch.object(WorkflowCommentService, "_dispatch_mention_emails") as dispatch_mock,
+        ):
+            result = WorkflowCommentService.update_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                user_id="owner",
+                content="updated",
+            )
+
+        assert result == {"id": "comment-1", "updated_at": comment.updated_at}
+        mock_session.delete.assert_not_called()
+        mock_session.add.assert_not_called()
+        filter_mentions_mock.assert_not_called()
+        build_payloads_mock.assert_not_called()
+        dispatch_mock.assert_called_once_with([])
+        mock_session.commit.assert_called_once()
+
+    def test_update_comment_clears_mentions_when_empty_list_provided(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.id = "comment-1"
+        comment.created_by = "owner"
+        mock_session.scalar.return_value = comment
+
+        existing_mentions = [Mock(), Mock()]
+        mock_session.scalars.return_value = _mock_scalars(existing_mentions)
+
+        with patch.object(WorkflowCommentService, "_filter_valid_mentioned_user_ids", return_value=[]):
+            result = WorkflowCommentService.update_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                user_id="owner",
+                content="updated",
+                mentioned_user_ids=[],
+            )
+
+        assert result == {"id": "comment-1", "updated_at": comment.updated_at}
+        assert mock_session.delete.call_count == 2
+        mock_session.add.assert_not_called()
+        mock_session.commit.assert_called_once()
+
+    def test_update_comment_notifies_only_new_mentions(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.id = "comment-1"
+        comment.created_by = "owner"
+        mock_session.scalar.return_value = comment
+
+        existing_mention = Mock()
+        existing_mention.mentioned_user_id = "user-2"
+        mock_session.scalars.return_value = _mock_scalars([existing_mention])
+
+        with (
+            patch.object(
+                WorkflowCommentService,
+                "_filter_valid_mentioned_user_ids",
+                return_value=["user-2", "user-3"],
+            ),
+            patch.object(
+                WorkflowCommentService,
+                "_build_mention_email_payloads",
+                return_value=[],
+            ) as build_payloads_mock,
+            patch.object(WorkflowCommentService, "_dispatch_mention_emails") as dispatch_mock,
+        ):
+            WorkflowCommentService.update_comment(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                user_id="owner",
+                content="updated",
+                mentioned_user_ids=["user-2", "user-3"],
+            )
+
+        assert build_payloads_mock.call_args.kwargs["mentioned_user_ids"] == ["user-3"]
+        dispatch_mock.assert_called_once_with([])
+
+    def test_get_comments_preloads_related_accounts(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.created_by = "user-1"
+        comment.resolved_by = "user-2"
+        reply = Mock()
+        reply.created_by = "user-3"
+        mention = Mock()
+        mention.mentioned_user_id = "user-4"
+        comment.replies = [reply]
+        comment.mentions = [mention]
+        comment.cache_created_by_account = Mock()
+        comment.cache_resolved_by_account = Mock()
+        reply.cache_created_by_account = Mock()
+        mention.cache_mentioned_user_account = Mock()
+
+        account_1 = Mock()
+        account_1.id = "user-1"
+        account_2 = Mock()
+        account_2.id = "user-2"
+        account_3 = Mock()
+        account_3.id = "user-3"
+        account_4 = Mock()
+        account_4.id = "user-4"
+
+        mock_session.scalars.side_effect = [
+            _mock_scalars([comment]),
+            _mock_scalars([account_1, account_2, account_3, account_4]),
+        ]
+
+        result = WorkflowCommentService.get_comments("tenant-1", "app-1")
+
+        assert result == [comment]
+        comment.cache_created_by_account.assert_called_once_with(account_1)
+        comment.cache_resolved_by_account.assert_called_once_with(account_2)
+        reply.cache_created_by_account.assert_called_once_with(account_3)
+        mention.cache_mentioned_user_account.assert_called_once_with(account_4)
+
+    def test_preload_accounts_returns_early_for_empty_comments(self, mock_session: Mock) -> None:
+        WorkflowCommentService._preload_accounts(mock_session, [])
+
+        mock_session.scalars.assert_not_called()
+
+    def test_get_comment_raises_not_found_with_provided_session(self) -> None:
+        session = Mock()
+        session.scalar.return_value = None
+
+        with pytest.raises(NotFound):
+            WorkflowCommentService.get_comment("tenant-1", "app-1", "comment-1", session=session)
+
+    def test_get_comment_uses_context_manager_when_session_not_provided(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.created_by = "user-1"
+        comment.resolved_by = None
+        comment.replies = []
+        comment.mentions = []
+        comment.cache_created_by_account = Mock()
+        comment.cache_resolved_by_account = Mock()
+        mock_session.scalar.return_value = comment
+        mock_session.scalars.return_value = _mock_scalars([])
+
+        result = WorkflowCommentService.get_comment("tenant-1", "app-1", "comment-1")
+
+        assert result is comment
+        comment.cache_created_by_account.assert_called_once()
+        comment.cache_resolved_by_account.assert_called_once_with(None)
+
+    def test_delete_comment_raises_forbidden(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.created_by = "owner"
+
+        with patch.object(WorkflowCommentService, "get_comment", return_value=comment):
+            with pytest.raises(Forbidden):
+                WorkflowCommentService.delete_comment("tenant-1", "app-1", "comment-1", "intruder")
+
+    def test_delete_comment_removes_related_entities(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.created_by = "owner"
+
+        mentions = [Mock(), Mock()]
+        replies = [Mock()]
+        mock_session.scalars.side_effect = [_mock_scalars(mentions), _mock_scalars(replies)]
+
+        with patch.object(WorkflowCommentService, "get_comment", return_value=comment):
+            WorkflowCommentService.delete_comment("tenant-1", "app-1", "comment-1", "owner")
+
+        assert mock_session.delete.call_count == 4
+        mock_session.commit.assert_called_once()
+
+    def test_resolve_comment_sets_fields(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.resolved = False
+        comment.resolved_at = None
+        comment.resolved_by = None
+
+        with (
+            patch.object(WorkflowCommentService, "get_comment", return_value=comment),
+            patch.object(service_module, "naive_utc_now", return_value="now"),
+        ):
+            result = WorkflowCommentService.resolve_comment("tenant-1", "app-1", "comment-1", "user-1")
+
+        assert result is comment
+        assert comment.resolved is True
+        assert comment.resolved_at == "now"
+        assert comment.resolved_by == "user-1"
+        mock_session.commit.assert_called_once()
+
+    def test_resolve_comment_noop_when_already_resolved(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.resolved = True
+
+        with patch.object(WorkflowCommentService, "get_comment", return_value=comment):
+            result = WorkflowCommentService.resolve_comment("tenant-1", "app-1", "comment-1", "user-1")
+
+        assert result is comment
+        mock_session.commit.assert_not_called()
+
+    def test_create_reply_requires_comment(self, mock_session: Mock) -> None:
+        mock_session.get.return_value = None
+
+        with pytest.raises(NotFound):
+            WorkflowCommentService.create_reply("comment-1", "hello", "user-1")
+
+    def test_create_reply_creates_mentions(self, mock_session: Mock) -> None:
+        mock_session.get.return_value = Mock()
+        reply = Mock()
+        reply.id = "reply-1"
+        reply.created_at = "ts"
+
+        with (
+            patch.object(service_module, "WorkflowCommentReply", return_value=reply),
+            patch.object(service_module, "WorkflowCommentMention", return_value=Mock()),
+            patch.object(WorkflowCommentService, "_filter_valid_mentioned_user_ids", return_value=["user-2"]),
+        ):
+            result = WorkflowCommentService.create_reply(
+                comment_id="comment-1",
+                content="hello",
+                created_by="user-1",
+                mentioned_user_ids=["user-2", "bad-id"],
+            )
+
+        assert result == {"id": "reply-1", "created_at": "ts"}
+        assert mock_session.add.call_count == 2
+        mock_session.commit.assert_called_once()
+
+    def test_update_reply_raises_not_found(self, mock_session: Mock) -> None:
+        mock_session.scalar.return_value = None
+
+        with pytest.raises(NotFound):
+            WorkflowCommentService.update_reply(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                reply_id="reply-1",
+                user_id="user-1",
+                content="hello",
+            )
+
+    def test_update_reply_raises_forbidden(self, mock_session: Mock) -> None:
+        reply = Mock()
+        reply.created_by = "owner"
+        mock_session.scalar.return_value = reply
+
+        with pytest.raises(Forbidden):
+            WorkflowCommentService.update_reply(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                reply_id="reply-1",
+                user_id="intruder",
+                content="hello",
+            )
+
+    def test_update_reply_replaces_mentions(self, mock_session: Mock) -> None:
+        reply = Mock()
+        reply.id = "reply-1"
+        reply.comment_id = "comment-1"
+        reply.created_by = "owner"
+        reply.updated_at = "updated"
+        mock_session.scalar.return_value = reply
+        mock_session.scalars.return_value = _mock_scalars([Mock()])
+        comment = Mock()
+        comment.tenant_id = "tenant-1"
+        comment.app_id = "app-1"
+        mock_session.get.return_value = comment
+
+        with patch.object(WorkflowCommentService, "_filter_valid_mentioned_user_ids", return_value=["user-2"]):
+            result = WorkflowCommentService.update_reply(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                reply_id="reply-1",
+                user_id="owner",
+                content="new",
+                mentioned_user_ids=["user-2", "bad-id"],
+            )
+
+        assert result == {"id": "reply-1", "updated_at": "updated"}
+        assert mock_session.delete.call_count == 1
+        assert mock_session.add.call_count == 1
+        mock_session.commit.assert_called_once()
+        mock_session.refresh.assert_called_once_with(reply)
+
+    def test_update_comment_updates_position_coordinates_when_provided(self, mock_session: Mock) -> None:
+        comment = Mock()
+        comment.id = "comment-1"
+        comment.created_by = "owner"
+        comment.position_x = 1.0
+        comment.position_y = 2.0
+        mock_session.scalar.return_value = comment
+        mock_session.scalars.return_value = _mock_scalars([])
+
+        WorkflowCommentService.update_comment(
+            tenant_id="tenant-1",
+            app_id="app-1",
+            comment_id="comment-1",
+            user_id="owner",
+            content="updated",
+            position_x=10.5,
+            position_y=20.5,
+            mentioned_user_ids=[],
+        )
+
+        assert comment.position_x == 10.5
+        assert comment.position_y == 20.5
+
+    def test_delete_reply_raises_forbidden(self, mock_session: Mock) -> None:
+        reply = Mock()
+        reply.created_by = "owner"
+        mock_session.scalar.return_value = reply
+
+        with pytest.raises(Forbidden):
+            WorkflowCommentService.delete_reply(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                reply_id="reply-1",
+                user_id="intruder",
+            )
+
+    def test_delete_reply_raises_not_found(self, mock_session: Mock) -> None:
+        mock_session.scalar.return_value = None
+
+        with pytest.raises(NotFound):
+            WorkflowCommentService.delete_reply(
+                tenant_id="tenant-1",
+                app_id="app-1",
+                comment_id="comment-1",
+                reply_id="reply-1",
+                user_id="owner",
+            )
+
+    def test_delete_reply_removes_mentions(self, mock_session: Mock) -> None:
+        reply = Mock()
+        reply.created_by = "owner"
+        mock_session.scalar.return_value = reply
+        mock_session.scalars.return_value = _mock_scalars([Mock(), Mock()])
+
+        WorkflowCommentService.delete_reply(
+            tenant_id="tenant-1",
+            app_id="app-1",
+            comment_id="comment-1",
+            reply_id="reply-1",
+            user_id="owner",
+        )
+
+        assert mock_session.delete.call_count == 3
+        mock_session.commit.assert_called_once()
+
+    def test_validate_comment_access_delegates_to_get_comment(self) -> None:
+        comment = Mock()
+        with patch.object(WorkflowCommentService, "get_comment", return_value=comment) as get_comment_mock:
+            result = WorkflowCommentService.validate_comment_access("comment-1", "tenant-1", "app-1")
+
+        assert result is comment
+        get_comment_mock.assert_called_once_with("tenant-1", "app-1", "comment-1")
diff --git a/api/tests/unit_tests/services/test_workflow_service.py b/api/tests/unit_tests/services/test_workflow_service.py
index 7906daacfc..351f6ffb5f 100644
--- a/api/tests/unit_tests/services/test_workflow_service.py
+++ b/api/tests/unit_tests/services/test_workflow_service.py
@@ -12,7 +12,7 @@ This test suite covers:
 import json
 import uuid
 from typing import Any, cast
-from unittest.mock import ANY, MagicMock, patch
+from unittest.mock import ANY, MagicMock, Mock, patch
 
 import pytest
 from graphon.entities import WorkflowNodeExecution
@@ -713,6 +713,79 @@ class TestWorkflowService:
         with pytest.raises(ValueError, match="Invalid app mode"):
             workflow_service.validate_features_structure(app, features)
 
+    # ==================== Draft Workflow Variable Update Tests ====================
+    # These tests verify updating draft workflow environment/conversation variables
+
+    def test_update_draft_workflow_environment_variables_updates_workflow(self, workflow_service, mock_db_session):
+        """Test update_draft_workflow_environment_variables updates draft fields."""
+        app = TestWorkflowAssociatedDataFactory.create_app_mock()
+        account = TestWorkflowAssociatedDataFactory.create_account_mock()
+        workflow = TestWorkflowAssociatedDataFactory.create_workflow_mock()
+        variables = [Mock()]
+
+        with (
+            patch.object(workflow_service, "get_draft_workflow", return_value=workflow),
+            patch("services.workflow_service.naive_utc_now", return_value="now"),
+        ):
+            workflow_service.update_draft_workflow_environment_variables(
+                app_model=app,
+                environment_variables=variables,
+                account=account,
+            )
+
+        assert workflow.environment_variables == variables
+        assert workflow.updated_by == account.id
+        assert workflow.updated_at == "now"
+        mock_db_session.session.commit.assert_called_once()
+
+    def test_update_draft_workflow_environment_variables_raises_when_missing(self, workflow_service):
+        """Test update_draft_workflow_environment_variables raises when draft missing."""
+        app = TestWorkflowAssociatedDataFactory.create_app_mock()
+        account = TestWorkflowAssociatedDataFactory.create_account_mock()
+
+        with patch.object(workflow_service, "get_draft_workflow", return_value=None):
+            with pytest.raises(ValueError, match="No draft workflow found."):
+                workflow_service.update_draft_workflow_environment_variables(
+                    app_model=app,
+                    environment_variables=[],
+                    account=account,
+                )
+
+    def test_update_draft_workflow_conversation_variables_updates_workflow(self, workflow_service, mock_db_session):
+        """Test update_draft_workflow_conversation_variables updates draft fields."""
+        app = TestWorkflowAssociatedDataFactory.create_app_mock()
+        account = TestWorkflowAssociatedDataFactory.create_account_mock()
+        workflow = TestWorkflowAssociatedDataFactory.create_workflow_mock()
+        variables = [Mock()]
+
+        with (
+            patch.object(workflow_service, "get_draft_workflow", return_value=workflow),
+            patch("services.workflow_service.naive_utc_now", return_value="now"),
+        ):
+            workflow_service.update_draft_workflow_conversation_variables(
+                app_model=app,
+                conversation_variables=variables,
+                account=account,
+            )
+
+        assert workflow.conversation_variables == variables
+        assert workflow.updated_by == account.id
+        assert workflow.updated_at == "now"
+        mock_db_session.session.commit.assert_called_once()
+
+    def test_update_draft_workflow_conversation_variables_raises_when_missing(self, workflow_service):
+        """Test update_draft_workflow_conversation_variables raises when draft missing."""
+        app = TestWorkflowAssociatedDataFactory.create_app_mock()
+        account = TestWorkflowAssociatedDataFactory.create_account_mock()
+
+        with patch.object(workflow_service, "get_draft_workflow", return_value=None):
+            with pytest.raises(ValueError, match="No draft workflow found."):
+                workflow_service.update_draft_workflow_conversation_variables(
+                    app_model=app,
+                    conversation_variables=[],
+                    account=account,
+                )
+
     # ==================== Publish Workflow Tests ====================
     # These tests verify creating published versions from draft workflows
 
diff --git a/api/uv.lock b/api/uv.lock
index 5250a614b6..87588493ee 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -537,6 +537,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/1a/39/47f9197bdd44df24d67ac8893641e16f386c984a0619ef2ee4c51fbbc019/beautifulsoup4-4.14.3-py3-none-any.whl", hash = "sha256:0918bfe44902e6ad8d57732ba310582e98da931428d231a5ecb9e7c703a735bb", size = 107721, upload-time = "2025-11-30T15:08:24.087Z" },
 ]
 
+[[package]]
+name = "bidict"
+version = "0.23.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/9a/6e/026678aa5a830e07cd9498a05d3e7e650a4f56a42f267a53d22bcda1bdc9/bidict-0.23.1.tar.gz", hash = "sha256:03069d763bc387bbd20e7d49914e75fc4132a41937fa3405417e1a5a2d006d71", size = 29093, upload-time = "2024-02-18T19:09:05.748Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/99/37/e8730c3587a65eb5645d4aba2d27aae48e8003614d6aaf15dda67f702f1f/bidict-0.23.1-py3-none-any.whl", hash = "sha256:5dae8d4d79b552a71cbabc7deb25dfe8ce710b17ff41711e13010ead2abfc3e5", size = 32764, upload-time = "2024-02-18T19:09:04.156Z" },
+]
+
 [[package]]
 name = "billiard"
 version = "4.2.3"
@@ -1290,6 +1299,7 @@ dependencies = [
     { name = "flask-orjson" },
     { name = "flask-restx" },
     { name = "gevent" },
+    { name = "gevent-websocket" },
     { name = "gmpy2" },
     { name = "google-api-python-client" },
     { name = "google-cloud-aiplatform" },
@@ -1311,10 +1321,12 @@ dependencies = [
     { name = "opik" },
     { name = "psycogreen" },
     { name = "psycopg2-binary" },
+    { name = "python-socketio" },
     { name = "readabilipy" },
     { name = "redis", extra = ["hiredis"] },
     { name = "resend" },
     { name = "sendgrid" },
+    { name = "sseclient-py" },
     { name = "weave" },
 ]
 
@@ -1341,7 +1353,6 @@ dev = [
     { name = "pytest-xdist" },
     { name = "ruff" },
     { name = "scipy-stubs" },
-    { name = "sseclient-py" },
     { name = "testcontainers" },
     { name = "types-aiofiles" },
     { name = "types-beautifulsoup4" },
@@ -1542,6 +1553,7 @@ requires-dist = [
     { name = "flask-orjson", specifier = ">=2.0.0,<3.0.0" },
     { name = "flask-restx", specifier = ">=1.3.2,<2.0.0" },
     { name = "gevent", specifier = ">=26.4.0" },
+    { name = "gevent-websocket", specifier = ">=0.10.1" },
     { name = "gmpy2", specifier = ">=2.3.0" },
     { name = "google-api-python-client", specifier = ">=2.194.0" },
     { name = "google-cloud-aiplatform", specifier = ">=1.147.0,<2.0.0" },
@@ -1563,10 +1575,12 @@ requires-dist = [
     { name = "opik", specifier = "~=1.11.2" },
     { name = "psycogreen", specifier = ">=1.0.2" },
     { name = "psycopg2-binary", specifier = ">=2.9.11" },
+    { name = "python-socketio", specifier = ">=5.13.0" },
     { name = "readabilipy", specifier = ">=0.3.0,<1.0.0" },
     { name = "redis", extras = ["hiredis"], specifier = ">=7.4.0" },
     { name = "resend", specifier = ">=2.27.0,<3.0.0" },
     { name = "sendgrid", specifier = ">=6.12.5" },
+    { name = "sseclient-py", specifier = ">=1.8.0" },
     { name = "weave", specifier = ">=0.52.36,<1.0.0" },
 ]
 
@@ -1593,7 +1607,6 @@ dev = [
     { name = "pytest-xdist", specifier = ">=3.8.0" },
     { name = "ruff", specifier = ">=0.15.10" },
     { name = "scipy-stubs", specifier = ">=1.15.3.0" },
-    { name = "sseclient-py", specifier = ">=1.8.0" },
     { name = "testcontainers", specifier = ">=4.14.2" },
     { name = "types-aiofiles", specifier = ">=25.1.0" },
     { name = "types-beautifulsoup4", specifier = ">=4.12.0" },
@@ -2464,6 +2477,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/f6/df/7875e08b06a95f4577b71708ec470d029fadf873a66eb813a2861d79dfb5/gevent-26.4.0-cp312-cp312-win_amd64.whl", hash = "sha256:1c737e6ac6ce1398df0e3f41c58d982e397c993cbe73ac05b7edbe39e128c9cb", size = 1680530, upload-time = "2026-04-08T23:15:38.714Z" },
 ]
 
+[[package]]
+name = "gevent-websocket"
+version = "0.10.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "gevent" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/98/d2/6fa19239ff1ab072af40ebf339acd91fb97f34617c2ee625b8e34bf42393/gevent-websocket-0.10.1.tar.gz", hash = "sha256:7eaef32968290c9121f7c35b973e2cc302ffb076d018c9068d2f5ca8b2d85fb0", size = 18366, upload-time = "2017-03-12T22:46:05.68Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7b/84/2dc373eb6493e00c884cc11e6c059ec97abae2678d42f06bf780570b0193/gevent_websocket-0.10.1-py3-none-any.whl", hash = "sha256:17b67d91282f8f4c973eba0551183fc84f56f1c90c8f6b6b30256f31f66f5242", size = 22987, upload-time = "2017-03-12T22:46:03.611Z" },
+]
+
 [[package]]
 name = "gitdb"
 version = "4.0.12"
@@ -5313,6 +5338,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/0b/d7/1959b9648791274998a9c3526f6d0ec8fd2233e4d4acce81bbae76b44b2a/python_dotenv-1.2.2-py3-none-any.whl", hash = "sha256:1d8214789a24de455a8b8bd8ae6fe3c6b69a5e3d64aa8a8e5d68e694bbcb285a", size = 22101, upload-time = "2026-03-01T16:00:25.09Z" },
 ]
 
+[[package]]
+name = "python-engineio"
+version = "4.13.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "simple-websocket" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/34/12/bdef9dbeedbe2cdeba2a2056ad27b1fb081557d34b69a97f574843462cae/python_engineio-4.13.1.tar.gz", hash = "sha256:0a853fcef52f5b345425d8c2b921ac85023a04dfcf75d7b74696c61e940fd066", size = 92348, upload-time = "2026-02-06T23:38:06.12Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/aa/54/0cce26da03a981f949bb8449c9778537f75f5917c172e1d2992ff25cb57d/python_engineio-4.13.1-py3-none-any.whl", hash = "sha256:f32ad10589859c11053ad7d9bb3c9695cdf862113bfb0d20bc4d890198287399", size = 59847, upload-time = "2026-02-06T23:38:04.861Z" },
+]
+
 [[package]]
 name = "python-http-client"
 version = "3.3.7"
@@ -5369,6 +5406,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/d9/4f/00be2196329ebbff56ce564aa94efb0fbc828d00de250b1980de1a34ab49/python_pptx-1.0.2-py3-none-any.whl", hash = "sha256:160838e0b8565a8b1f67947675886e9fea18aa5e795db7ae531606d68e785cba", size = 472788, upload-time = "2024-08-07T17:33:28.192Z" },
 ]
 
+[[package]]
+name = "python-socketio"
+version = "5.16.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "bidict" },
+    { name = "python-engineio" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/59/81/cf8284f45e32efa18d3848ed82cdd4dcc1b657b082458fbe01ad3e1f2f8d/python_socketio-5.16.1.tar.gz", hash = "sha256:f863f98eacce81ceea2e742f6388e10ca3cdd0764be21d30d5196470edf5ea89", size = 128508, upload-time = "2026-02-06T23:42:07Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/07/c7/deb8c5e604404dbf10a3808a858946ca3547692ff6316b698945bb72177e/python_socketio-5.16.1-py3-none-any.whl", hash = "sha256:a3eb1702e92aa2f2b5d3ba00261b61f062cce51f1cfb6900bf3ab4d1934d2d35", size = 82054, upload-time = "2026-02-06T23:42:05.772Z" },
+]
+
 [[package]]
 name = "pytz"
 version = "2025.2"
@@ -5749,6 +5799,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e0/f9/0595336914c5619e5f28a1fb793285925a8cd4b432c9da0a987836c7f822/shellingham-1.5.4-py2.py3-none-any.whl", hash = "sha256:7ecfff8f2fd72616f7481040475a65b2bf8af90a56c89140852d1120324e8686", size = 9755, upload-time = "2023-10-24T04:13:38.866Z" },
 ]
 
+[[package]]
+name = "simple-websocket"
+version = "1.1.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "wsproto" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b0/d4/bfa032f961103eba93de583b161f0e6a5b63cebb8f2c7d0c6e6efe1e3d2e/simple_websocket-1.1.0.tar.gz", hash = "sha256:7939234e7aa067c534abdab3a9ed933ec9ce4691b0713c78acb195560aa52ae4", size = 17300, upload-time = "2024-10-10T22:39:31.412Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/52/59/0782e51887ac6b07ffd1570e0364cf901ebc36345fea669969d2084baebb/simple_websocket-1.1.0-py3-none-any.whl", hash = "sha256:4af6069630a38ed6c561010f0e11a5bc0d4ca569b36306eb257cd9a192497c8c", size = 13842, upload-time = "2024-10-10T22:39:29.645Z" },
+]
+
 [[package]]
 name = "six"
 version = "1.17.0"
@@ -7185,6 +7247,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/ff/21/abdedb4cdf6ff41ebf01a74087740a709e2edb146490e4d9beea054b0b7a/wrapt-1.16.0-py3-none-any.whl", hash = "sha256:6906c4100a8fcbf2fa735f6059214bb13b97f75b1a61777fcf6432121ef12ef1", size = 23362, upload-time = "2023-11-09T06:33:28.271Z" },
 ]
 
+[[package]]
+name = "wsproto"
+version = "1.3.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "h11" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c7/79/12135bdf8b9c9367b8701c2c19a14c913c120b882d50b014ca0d38083c2c/wsproto-1.3.2.tar.gz", hash = "sha256:b86885dcf294e15204919950f666e06ffc6c7c114ca900b060d6e16293528294", size = 50116, upload-time = "2025-11-20T18:18:01.871Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/a4/f5/10b68b7b1544245097b2a1b8238f66f2fc6dcaeb24ba5d917f52bd2eed4f/wsproto-1.3.2-py3-none-any.whl", hash = "sha256:61eea322cdf56e8cc904bd3ad7573359a242ba65688716b0710a5eb12beab584", size = 24405, upload-time = "2025-11-20T18:18:00.454Z" },
+]
+
 [[package]]
 name = "xinference-client"
 version = "2.4.0"
diff --git a/docker/.env.example b/docker/.env.example
index 856b04a3df..8176155698 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -132,6 +132,10 @@ MIGRATION_ENABLED=true
 # The default value is 300 seconds.
 FILES_ACCESS_TIMEOUT=300
 
+# Collaboration mode toggle
+# To open collaboration features, you also need to set SERVER_WORKER_CLASS=geventwebsocket.gunicorn.workers.GeventWebSocketWorker
+ENABLE_COLLABORATION_MODE=false
+
 # Access token expiration time in minutes
 ACCESS_TOKEN_EXPIRE_MINUTES=60
 
@@ -167,6 +171,7 @@ SERVER_WORKER_AMOUNT=1
 # Modifying it may also decrease throughput.
 #
 # It is strongly discouraged to change this parameter.
+# If enable collaboration mode, it must be set to geventwebsocket.gunicorn.workers.GeventWebSocketWorker
 SERVER_WORKER_CLASS=gevent
 
 # Default number of worker connections, the default is 10.
@@ -428,6 +433,8 @@ CONSOLE_CORS_ALLOW_ORIGINS=*
 COOKIE_DOMAIN=
 # When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1.
 NEXT_PUBLIC_COOKIE_DOMAIN=
+# WebSocket server URL. 
+NEXT_PUBLIC_SOCKET_URL=ws://localhost
 NEXT_PUBLIC_BATCH_CONCURRENCY=5
 
 # ------------------------------
diff --git a/docker/docker-compose-template.yaml b/docker/docker-compose-template.yaml
index 4f4b3851f6..888f96332c 100644
--- a/docker/docker-compose-template.yaml
+++ b/docker/docker-compose-template.yaml
@@ -159,6 +159,7 @@ services:
       APP_API_URL: ${APP_API_URL:-}
       AMPLITUDE_API_KEY: ${AMPLITUDE_API_KEY:-}
       NEXT_PUBLIC_COOKIE_DOMAIN: ${NEXT_PUBLIC_COOKIE_DOMAIN:-}
+      NEXT_PUBLIC_SOCKET_URL: ${NEXT_PUBLIC_SOCKET_URL:-ws://localhost}
       SENTRY_DSN: ${WEB_SENTRY_DSN:-}
       NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
       EXPERIMENTAL_ENABLE_VINEXT: ${EXPERIMENTAL_ENABLE_VINEXT:-false}
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index c1ddba4f80..a10fdf77c6 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -34,6 +34,7 @@ x-shared-env: &shared-api-worker-env
   OPENAI_API_BASE: ${OPENAI_API_BASE:-https://api.openai.com/v1}
   MIGRATION_ENABLED: ${MIGRATION_ENABLED:-true}
   FILES_ACCESS_TIMEOUT: ${FILES_ACCESS_TIMEOUT:-300}
+  ENABLE_COLLABORATION_MODE: ${ENABLE_COLLABORATION_MODE:-false}
   ACCESS_TOKEN_EXPIRE_MINUTES: ${ACCESS_TOKEN_EXPIRE_MINUTES:-60}
   REFRESH_TOKEN_EXPIRE_DAYS: ${REFRESH_TOKEN_EXPIRE_DAYS:-30}
   APP_DEFAULT_ACTIVE_REQUESTS: ${APP_DEFAULT_ACTIVE_REQUESTS:-0}
@@ -119,6 +120,7 @@ x-shared-env: &shared-api-worker-env
   CONSOLE_CORS_ALLOW_ORIGINS: ${CONSOLE_CORS_ALLOW_ORIGINS:-*}
   COOKIE_DOMAIN: ${COOKIE_DOMAIN:-}
   NEXT_PUBLIC_COOKIE_DOMAIN: ${NEXT_PUBLIC_COOKIE_DOMAIN:-}
+  NEXT_PUBLIC_SOCKET_URL: ${NEXT_PUBLIC_SOCKET_URL:-ws://localhost}
   NEXT_PUBLIC_BATCH_CONCURRENCY: ${NEXT_PUBLIC_BATCH_CONCURRENCY:-5}
   STORAGE_TYPE: ${STORAGE_TYPE:-opendal}
   OPENDAL_SCHEME: ${OPENDAL_SCHEME:-fs}
@@ -878,6 +880,7 @@ services:
       APP_API_URL: ${APP_API_URL:-}
       AMPLITUDE_API_KEY: ${AMPLITUDE_API_KEY:-}
       NEXT_PUBLIC_COOKIE_DOMAIN: ${NEXT_PUBLIC_COOKIE_DOMAIN:-}
+      NEXT_PUBLIC_SOCKET_URL: ${NEXT_PUBLIC_SOCKET_URL:-ws://localhost}
       SENTRY_DSN: ${WEB_SENTRY_DSN:-}
       NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
       EXPERIMENTAL_ENABLE_VINEXT: ${EXPERIMENTAL_ENABLE_VINEXT:-false}
diff --git a/docker/nginx/conf.d/default.conf.template b/docker/nginx/conf.d/default.conf.template
index 1d63c1b97d..94a748290f 100644
--- a/docker/nginx/conf.d/default.conf.template
+++ b/docker/nginx/conf.d/default.conf.template
@@ -14,6 +14,14 @@ server {
       include proxy.conf;
     }
 
+    location /socket.io/ {
+      proxy_pass http://api:5001;
+      include proxy.conf;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_cache_bypass $http_upgrade;
+    }
+
     location /v1 {
       proxy_pass http://api:5001;
       include proxy.conf;
diff --git a/packages/iconify-collections/assets/public/common/enter-key.svg b/packages/iconify-collections/assets/public/common/enter-key.svg
new file mode 100644
index 0000000000..edfddfc188
--- /dev/null
+++ b/packages/iconify-collections/assets/public/common/enter-key.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z" fill="white" fill-opacity="0.12"/>
+<path d="M3.42756 8.7358V7.62784H10.8764C11.2003 7.62784 11.4957 7.5483 11.7628 7.3892C12.0298 7.23011 12.2415 7.01705 12.3977 6.75C12.5568 6.48295 12.6364 6.1875 12.6364 5.86364C12.6364 5.53977 12.5568 5.24574 12.3977 4.98153C12.2386 4.71449 12.0256 4.50142 11.7585 4.34233C11.4943 4.18324 11.2003 4.10369 10.8764 4.10369H10.3991V3H10.8764C11.4048 3 11.8849 3.12926 12.3168 3.38778C12.7486 3.64631 13.0938 3.99148 13.3523 4.4233C13.6108 4.85511 13.7401 5.33523 13.7401 5.86364C13.7401 6.25852 13.6648 6.62926 13.5142 6.97585C13.3665 7.32244 13.1619 7.62784 12.9006 7.89205C12.6392 8.15625 12.3352 8.36364 11.9886 8.5142C11.642 8.66193 11.2713 8.7358 10.8764 8.7358H3.42756ZM6.16761 12.0554L2.29403 8.18182L6.16761 4.30824L6.9304 5.07102L3.81534 8.18182L6.9304 11.2926L6.16761 12.0554Z" fill="white"/>
+</svg>
diff --git a/packages/iconify-collections/assets/public/other/comment.svg b/packages/iconify-collections/assets/public/other/comment.svg
new file mode 100644
index 0000000000..0f0609f0b6
--- /dev/null
+++ b/packages/iconify-collections/assets/public/other/comment.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
+<path d="M12.3334 4C12.3334 2.52725 11.1395 1.33333 9.66671 1.33333H4.33337C2.86062 1.33333 1.66671 2.52724 1.66671 4V10.6667H9.66671C11.1395 10.6667 12.3334 9.47274 12.3334 8V4ZM7.66671 6.66667V8H4.33337V6.66667H7.66671ZM9.66671 4V5.33333H4.33337V4H9.66671ZM13.6667 8C13.6667 10.2091 11.8758 12 9.66671 12H0.333374V4C0.333374 1.79086 2.12424 0 4.33337 0H9.66671C11.8758 0 13.6667 1.79086 13.6667 4V8Z" fill="currentColor"/>
+</svg>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 094faf78cb..8d6dfa8b2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -384,6 +384,9 @@ catalogs:
     lexical:
       specifier: 0.43.0
       version: 0.43.0
+    loro-crdt:
+      specifier: 1.10.8
+      version: 1.10.8
     mermaid:
       specifier: 11.14.0
       version: 11.14.0
@@ -471,6 +474,9 @@ catalogs:
     shiki:
       specifier: 4.0.2
       version: 4.0.2
+    socket.io-client:
+      specifier: 4.8.3
+      version: 4.8.3
     sortablejs:
       specifier: 1.15.7
       version: 1.15.7
@@ -839,6 +845,9 @@ importers:
       lexical:
         specifier: 'catalog:'
         version: 0.43.0
+      loro-crdt:
+        specifier: 'catalog:'
+        version: 1.10.8
       mermaid:
         specifier: 'catalog:'
         version: 11.14.0
@@ -920,6 +929,9 @@ importers:
       shiki:
         specifier: 'catalog:'
         version: 4.0.2
+      socket.io-client:
+        specifier: 'catalog:'
+        version: 4.8.3
       sortablejs:
         specifier: 'catalog:'
         version: 1.15.7
@@ -3544,6 +3556,9 @@ packages:
     resolution: {integrity: sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==}
     engines: {node: '>=18'}
 
+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
   '@solid-primitives/event-listener@2.4.5':
     resolution: {integrity: sha512-nwRV558mIabl4yVAhZKY8cb6G+O1F0M6Z75ttTu5hk+SxdOnKSGj+eetDIu7Oax1P138ZdUU01qnBPR8rnxaEA==}
     peerDependencies:
@@ -5500,6 +5515,13 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  engine.io-client@6.6.4:
+    resolution: {integrity: sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==}
+
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
   enhanced-resolve@5.20.1:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
@@ -6624,6 +6646,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loro-crdt@1.10.8:
+    resolution: {integrity: sha512-GvH8fSJST1VDHRGzlQml80pBYoFbIP4ULeV1S8fD4ffmA8m+icoPORyVUW2AkJBY3dxKIcMMn0WqaJmpCmnbkQ==}
+
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
@@ -7763,6 +7788,14 @@ packages:
     resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
     engines: {node: '>= 18'}
 
+  socket.io-client@4.8.3:
+    resolution: {integrity: sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io-parser@4.2.6:
+    resolution: {integrity: sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==}
+    engines: {node: '>=10.0.0'}
+
   solid-js@1.9.11:
     resolution: {integrity: sha512-WEJtcc5mkh/BnHA6Yrg4whlF8g6QwpmXXRg4P2ztPmcKeHHlH4+djYecBLhSpecZY2RRECXYUwIc/C2r3yzQ4Q==}
 
@@ -8490,6 +8523,18 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   ws@8.20.0:
     resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
     engines: {node: '>=10.0.0'}
@@ -8518,6 +8563,10 @@ packages:
     resolution: {integrity: sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==}
     engines: {node: '>=8.0'}
 
+  xmlhttprequest-ssl@2.1.2:
+    resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
+    engines: {node: '>=0.4.0'}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -10902,6 +10951,8 @@ snapshots:
 
   '@sindresorhus/base62@1.0.0': {}
 
+  '@socket.io/component-emitter@3.1.2': {}
+
   '@solid-primitives/event-listener@2.4.5(solid-js@1.9.11)':
     dependencies:
       '@solid-primitives/utils': 6.4.0(solid-js@1.9.11)
@@ -12966,6 +13017,20 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  engine.io-client@6.6.4:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3(supports-color@8.1.1)
+      engine.io-parser: 5.2.3
+      ws: 8.18.3
+      xmlhttprequest-ssl: 2.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  engine.io-parser@5.2.3: {}
+
   enhanced-resolve@5.20.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -14310,6 +14375,8 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loro-crdt@1.10.8: {}
+
   loupe@3.2.1: {}
 
   lower-case@2.0.2:
@@ -16002,6 +16069,24 @@ snapshots:
 
   smol-toml@1.6.1: {}
 
+  socket.io-client@4.8.3:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3(supports-color@8.1.1)
+      engine.io-client: 6.6.4
+      socket.io-parser: 4.2.6
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.6:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3(supports-color@8.1.1)
+    transitivePeerDependencies:
+      - supports-color
+
   solid-js@1.9.11:
     dependencies:
       csstype: 3.2.3
@@ -16776,6 +16861,8 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@8.18.3: {}
+
   ws@8.20.0: {}
 
   wsl-utils@0.1.0:
@@ -16791,6 +16878,8 @@ snapshots:
 
   xmlbuilder@15.1.1: {}
 
+  xmlhttprequest-ssl@2.1.2: {}
+
   yallist@3.1.1: {}
 
   yallist@5.0.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index cd72c6bc0e..1e142fc3b5 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -142,6 +142,7 @@ catalog:
   ky: 2.0.0
   lamejs: 1.2.1
   lexical: 0.43.0
+  loro-crdt: 1.10.8
   mermaid: 11.14.0
   mime: 4.1.0
   mitt: 3.0.1
@@ -172,6 +173,7 @@ catalog:
   scheduler: 0.27.0
   sharp: 0.34.5
   shiki: 4.0.2
+  socket.io-client: 4.8.3
   sortablejs: 1.15.7
   std-semver: 1.0.8
   storybook: 10.3.5
diff --git a/web/.env.example b/web/.env.example
index 93cbc22fc8..643aba482e 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -14,6 +14,8 @@ NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
 NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
 # When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1.
 NEXT_PUBLIC_COOKIE_DOMAIN=
+# WebSocket server URL.
+NEXT_PUBLIC_SOCKET_URL=ws://localhost:5001
 
 # Dev-only Hono proxy targets.
 # The frontend keeps requesting http://localhost:5001 directly,
diff --git a/web/__tests__/app/app-access-control-flow.test.tsx b/web/__tests__/app/app-access-control-flow.test.tsx
index 49443eb4ec..63f7fd0378 100644
--- a/web/__tests__/app/app-access-control-flow.test.tsx
+++ b/web/__tests__/app/app-access-control-flow.test.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import AppPublisher from '@/app/components/app/app-publisher'
@@ -23,6 +24,27 @@ let mockAppDetail: {
   }
 } | null = null
 
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  })
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  const queryClient = createTestQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
@@ -76,6 +98,18 @@ vi.mock('@/app/components/app/overview/embedded', () => ({
   default: () => null,
 }))
 
+vi.mock('@/app/components/workflow/collaboration/core/websocket-manager', () => ({
+  webSocketClient: {
+    getSocket: vi.fn(() => null),
+  },
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    onAppPublishUpdate: vi.fn(() => vi.fn()),
+  },
+}))
+
 vi.mock('@/app/components/app/app-access-control', () => ({
   default: ({
     onConfirm,
@@ -115,7 +149,7 @@ describe('App Access Control Flow', () => {
   })
 
   it('refreshes app detail after confirming access control updates', async () => {
-    render(<AppPublisher publishedAt={1700000000} />)
+    renderWithQueryClient(<AppPublisher publishedAt={1700000000} />)
 
     fireEvent.click(screen.getByRole('button', { name: 'workflow.common.publish' }))
     fireEvent.click(screen.getByText('app.accessControlDialog.accessItems.specific'))
diff --git a/web/__tests__/app/app-publisher-flow.test.tsx b/web/__tests__/app/app-publisher-flow.test.tsx
index 5c330cf71e..4f24fc310c 100644
--- a/web/__tests__/app/app-publisher-flow.test.tsx
+++ b/web/__tests__/app/app-publisher-flow.test.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import AppPublisher from '@/app/components/app/app-publisher'
@@ -27,6 +28,27 @@ let mockAppDetail: {
   }
 } | null = null
 
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  })
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  const queryClient = createTestQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
@@ -106,6 +128,18 @@ vi.mock('@/app/components/app/overview/embedded', () => ({
   ),
 }))
 
+vi.mock('@/app/components/workflow/collaboration/core/websocket-manager', () => ({
+  webSocketClient: {
+    getSocket: vi.fn(() => null),
+  },
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    onAppPublishUpdate: vi.fn(() => vi.fn()),
+  },
+}))
+
 vi.mock('@/app/components/app/app-access-control', () => ({
   default: () => <div data-testid="app-access-control" />,
 }))
@@ -183,7 +217,7 @@ describe('App Publisher Flow', () => {
   it('publishes from the summary panel and tracks the publish event', async () => {
     const onPublish = vi.fn().mockResolvedValue(undefined)
 
-    render(
+    renderWithQueryClient(
       <AppPublisher
         publishedAt={1700000000}
         onPublish={onPublish}
@@ -210,7 +244,7 @@ describe('App Publisher Flow', () => {
   })
 
   it('opens embedded modal and resolves the installed explore target', async () => {
-    render(<AppPublisher publishedAt={1700000000} />)
+    renderWithQueryClient(<AppPublisher publishedAt={1700000000} />)
 
     fireEvent.click(screen.getByText('common.publish'))
     fireEvent.click(screen.getByText('common.embedIntoSite'))
@@ -231,7 +265,7 @@ describe('App Publisher Flow', () => {
       installed_apps: [],
     })
 
-    render(<AppPublisher publishedAt={1700000000} />)
+    renderWithQueryClient(<AppPublisher publishedAt={1700000000} />)
 
     fireEvent.click(screen.getByText('common.publish'))
     fireEvent.click(screen.getByText('common.openInExplore'))
diff --git a/web/__tests__/apps/app-list-browsing-flow.test.tsx b/web/__tests__/apps/app-list-browsing-flow.test.tsx
index 1be7e56086..a5ed79a7bd 100644
--- a/web/__tests__/apps/app-list-browsing-flow.test.tsx
+++ b/web/__tests__/apps/app-list-browsing-flow.test.tsx
@@ -93,6 +93,10 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/service/apps', () => ({
+  fetchWorkflowOnlineUsers: vi.fn().mockResolvedValue({}),
+}))
+
 vi.mock('@/service/use-apps', () => ({
   useInfiniteAppList: () => ({
     data: { pages: mockPages },
diff --git a/web/__tests__/apps/create-app-flow.test.tsx b/web/__tests__/apps/create-app-flow.test.tsx
index bc1f7a3a06..9abc870ecf 100644
--- a/web/__tests__/apps/create-app-flow.test.tsx
+++ b/web/__tests__/apps/create-app-flow.test.tsx
@@ -80,6 +80,10 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/service/apps', () => ({
+  fetchWorkflowOnlineUsers: vi.fn().mockResolvedValue({}),
+}))
+
 vi.mock('@/service/use-apps', () => ({
   useInfiniteAppList: () => ({
     data: { pages: mockPages },
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
index fb2edf0102..289e50c257 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
@@ -5,7 +5,8 @@ import type { BlockEnum } from '@/app/components/workflow/types'
 import type { UpdateAppSiteCodeResponse } from '@/models/app'
 import type { App } from '@/types/app'
 import type { I18nKeysByPrefix } from '@/types/i18n'
-import { useCallback, useMemo } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppCard from '@/app/components/app/overview/app-card'
 import TriggerCard from '@/app/components/app/overview/trigger-card'
@@ -13,6 +14,8 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
 import { toast } from '@/app/components/base/ui/toast'
 import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 import { isTriggerNode } from '@/app/components/workflow/types'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import {
@@ -72,25 +75,56 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
     ? buildTriggerModeMessage(t('mcp.server.title', { ns: 'tools' }))
     : null
 
-  const updateAppDetail = async () => {
+  const updateAppDetail = useCallback(async () => {
     try {
       const res = await fetchAppDetail({ url: '/apps', id: appId })
       setAppDetail({ ...res })
     }
-    catch (error) { console.error(error) }
-  }
+    catch (error) {
+      console.error(error)
+    }
+  }, [appId, setAppDetail])
 
   const handleCallbackResult = (err: Error | null, message?: I18nKeysByPrefix<'common', 'actionMsg.'>) => {
     const type = err ? 'error' : 'success'
 
     message ||= (type === 'success' ? 'modifiedSuccessfully' : 'modifiedUnsuccessfully')
 
-    if (type === 'success')
+    if (type === 'success') {
       updateAppDetail()
 
+      // Emit collaboration event to notify other clients of app state changes
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'app_state_update',
+          data: { timestamp: Date.now() },
+          timestamp: Date.now(),
+        })
+      }
+    }
+
     toast(t(`actionMsg.${message}`, { ns: 'common' }) as string, { type })
   }
 
+  // Listen for collaborative app state updates from other clients
+  useEffect(() => {
+    if (!appId)
+      return
+
+    const unsubscribe = collaborationManager.onAppStateUpdate(async () => {
+      try {
+        // Update app detail when other clients modify app state
+        await updateAppDetail()
+      }
+      catch (error) {
+        console.error('app state update failed:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId, updateAppDetail])
+
   const onChangeSiteStatus = async (value: boolean) => {
     const [err] = await asyncRunSafe<App>(
       updateAppSiteStatus({
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index c63d482c8f..6ff8725f63 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -12,7 +12,6 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -22,6 +21,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
 import { docURL } from './config'
diff --git a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
index d5eaa4bfe4..5b10b4c32b 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
+++ b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
@@ -20,8 +20,11 @@ const mockUpdateAppInfo = vi.fn()
 const mockCopyApp = vi.fn()
 const mockExportAppConfig = vi.fn()
 const mockDeleteApp = vi.fn()
+const mockFetchAppDetail = vi.fn()
 const mockFetchWorkflowDraft = vi.fn()
 const mockDownloadBlob = vi.fn()
+const mockGetSocket = vi.fn()
+const mockOnAppMetaUpdate = vi.fn()
 
 let mockAppDetail: Record<string, unknown> | undefined = {
   id: 'app-1',
@@ -68,6 +71,7 @@ vi.mock('@/service/apps', () => ({
   copyApp: (...args: unknown[]) => mockCopyApp(...args),
   exportAppConfig: (...args: unknown[]) => mockExportAppConfig(...args),
   deleteApp: (...args: unknown[]) => mockDeleteApp(...args),
+  fetchAppDetail: (...args: unknown[]) => mockFetchAppDetail(...args),
 }))
 
 vi.mock('@/service/workflow', () => ({
@@ -82,6 +86,18 @@ vi.mock('@/utils/app-redirection', () => ({
   getRedirection: vi.fn(),
 }))
 
+vi.mock('@/app/components/workflow/collaboration/core/websocket-manager', () => ({
+  webSocketClient: {
+    getSocket: (...args: unknown[]) => mockGetSocket(...args),
+  },
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    onAppMetaUpdate: (...args: unknown[]) => mockOnAppMetaUpdate(...args),
+  },
+}))
+
 vi.mock('@/config', () => ({
   NEED_REFRESH_APP_LIST_KEY: 'test-refresh-key',
 }))
@@ -89,6 +105,8 @@ vi.mock('@/config', () => ({
 describe('useAppInfoActions', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockOnAppMetaUpdate.mockReturnValue(() => {})
+    mockGetSocket.mockReturnValue(null)
     mockAppDetail = {
       id: 'app-1',
       name: 'Test App',
@@ -191,6 +209,35 @@ describe('useAppInfoActions', () => {
       expect(toastMocks.call).toHaveBeenCalledWith({ type: 'success', message: 'app.editDone' })
     })
 
+    it('should emit app_meta_update after successful edit when collaboration socket exists', async () => {
+      const updatedApp = { ...mockAppDetail, name: 'Updated' }
+      const socket = { emit: vi.fn() }
+      mockUpdateAppInfo.mockResolvedValue(updatedApp)
+      mockGetSocket.mockReturnValue(socket)
+
+      const { result } = renderHook(() => useAppInfoActions({}))
+
+      await act(async () => {
+        await result.current.onEdit({
+          name: 'Updated',
+          icon_type: 'emoji',
+          icon: '🤖',
+          icon_background: '#fff',
+          description: '',
+          use_icon_as_answer_icon: false,
+        })
+      })
+      await new Promise(resolve => setTimeout(resolve, 0))
+
+      expect(mockGetSocket).toHaveBeenCalledWith('app-1')
+      expect(socket.emit).toHaveBeenCalledWith(
+        'collaboration_event',
+        expect.objectContaining({
+          type: 'app_meta_update',
+        }),
+      )
+    })
+
     it('should notify error on edit failure', async () => {
       mockUpdateAppInfo.mockRejectedValue(new Error('fail'))
 
@@ -502,4 +549,31 @@ describe('useAppInfoActions', () => {
       })
     })
   })
+
+  describe('collaboration app meta updates', () => {
+    it('should refresh app detail when receiving app_meta_update', async () => {
+      const updated = { ...mockAppDetail, name: 'Remote Updated' }
+      const unsubscribe = vi.fn()
+      let onUpdate: (() => Promise<void>) | undefined
+
+      mockOnAppMetaUpdate.mockImplementation((callback: () => Promise<void>) => {
+        onUpdate = callback
+        return unsubscribe
+      })
+      mockFetchAppDetail.mockResolvedValue(updated)
+
+      const { unmount } = renderHook(() => useAppInfoActions({}))
+      await new Promise(resolve => setTimeout(resolve, 0))
+
+      await act(async () => {
+        await onUpdate?.()
+      })
+
+      expect(mockFetchAppDetail).toHaveBeenCalledWith({ url: '/apps', id: 'app-1' })
+      expect(mockSetAppDetail).toHaveBeenCalledWith(updated)
+
+      unmount()
+      expect(unsubscribe).toHaveBeenCalled()
+    })
+  })
 })
diff --git a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
index 8b559f7bba..3192d48f81 100644
--- a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
+++ b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
@@ -1,14 +1,14 @@
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { toast } from '@/app/components/base/ui/toast'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { useRouter } from '@/next/navigation'
-import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
+import { copyApp, deleteApp, exportAppConfig, fetchAppDetail, updateAppInfo } from '@/service/apps'
 import { useInvalidateAppList } from '@/service/use-apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
@@ -47,6 +47,56 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
     setActiveModal(null)
   }, [])
 
+  const emitAppMetaUpdate = useCallback(() => {
+    if (!appDetail?.id)
+      return
+
+    void import('@/app/components/workflow/collaboration/core/websocket-manager')
+      .then(({ webSocketClient }) => {
+        const socket = webSocketClient.getSocket(appDetail.id)
+        if (!socket)
+          return
+        socket.emit('collaboration_event', {
+          type: 'app_meta_update',
+          data: { timestamp: Date.now() },
+          timestamp: Date.now(),
+        })
+      })
+      .catch(() => {})
+  }, [appDetail?.id])
+
+  useEffect(() => {
+    if (!appDetail?.id)
+      return
+
+    let unsubscribe: (() => void) | null = null
+    let disposed = false
+
+    void import('@/app/components/workflow/collaboration/core/collaboration-manager')
+      .then(({ collaborationManager }) => {
+        if (disposed)
+          return
+
+        unsubscribe = collaborationManager.onAppMetaUpdate(async () => {
+          try {
+            const res = await fetchAppDetail({ url: '/apps', id: appDetail.id })
+            if (disposed)
+              return
+            setAppDetail({ ...res })
+          }
+          catch (error) {
+            console.error('failed to refresh app detail from collaboration update:', error)
+          }
+        })
+      })
+      .catch(() => {})
+
+    return () => {
+      disposed = true
+      unsubscribe?.()
+    }
+  }, [appDetail?.id, setAppDetail])
+
   const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
     icon_type,
@@ -72,11 +122,12 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
       closeModal()
       toast(t('editDone', { ns: 'app' }), { type: 'success' })
       setAppDetail(app)
+      emitAppMetaUpdate()
     }
     catch {
       toast(t('editFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [appDetail, closeModal, setAppDetail, t])
+  }, [appDetail, closeModal, setAppDetail, t, emitAppMetaUpdate])
 
   const onCopy: DuplicateAppModalProps['onConfirm'] = useCallback(async ({
     name,
diff --git a/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx
index 5c7d2f2dc0..9b3dd8ee05 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable ts/no-explicit-any */
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import AccessControlDialog from '../access-control-dialog'
 
diff --git a/web/app/components/app/app-access-control/__tests__/index.spec.tsx b/web/app/components/app/app-access-control/__tests__/index.spec.tsx
index f2fa09f98a..612d17d88a 100644
--- a/web/app/components/app/app-access-control/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/index.spec.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable ts/no-explicit-any */
 import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { toast } from '@/app/components/base/ui/toast'
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..1e29e44c82 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -15,6 +15,7 @@ const mockOpenAsyncWindow = vi.fn()
 const mockFetchInstalledAppList = vi.fn()
 const mockFetchAppDetailDirect = vi.fn()
 const mockToastError = vi.fn()
+const mockInvalidateAppWorkflow = vi.fn()
 
 const sectionProps = vi.hoisted(() => ({
   summary: null as null | Record<string, any>,
@@ -88,6 +89,10 @@ vi.mock('@/service/apps', () => ({
   fetchAppDetailDirect: (...args: unknown[]) => mockFetchAppDetailDirect(...args),
 }))
 
+vi.mock('@/service/use-workflow', () => ({
+  useInvalidateAppWorkflow: () => mockInvalidateAppWorkflow,
+}))
+
 vi.mock('@/app/components/base/ui/toast', () => ({
   toast: {
     error: (...args: unknown[]) => mockToastError(...args),
diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx
index 6a5c9582a7..47ce63645c 100644
--- a/web/app/components/app/app-publisher/features-wrapper.tsx
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@@ -1,6 +1,7 @@
 import type { AppPublisherProps } from '@/app/components/app/app-publisher'
 import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
 import type { FileUpload } from '@/app/components/base/features/types'
+import type { PublishWorkflowParams } from '@/types/workflow'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -21,7 +22,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { Resolution } from '@/types/app'
 
 type Props = Omit<AppPublisherProps, 'onPublish'> & {
-  onPublish?: (modelAndParameter?: ModelAndParameter, features?: any) => Promise<any> | any
+  onPublish?: (params?: ModelAndParameter | PublishWorkflowParams, features?: any) => Promise<any> | any
   publishedConfig?: any
   resetAppConfig?: () => void
 }
@@ -70,8 +71,8 @@ const FeaturesWrappedAppPublisher = (props: Props) => {
     setRestoreConfirmOpen(false)
   }, [featuresStore, props])
 
-  const handlePublish = useCallback((modelAndParameter?: ModelAndParameter) => {
-    return props.onPublish?.(modelAndParameter, features)
+  const handlePublish = useCallback((params?: ModelAndParameter | PublishWorkflowParams) => {
+    return props.onPublish?.(params, features)
   }, [features, props])
 
   return (
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 9c50a98124..07bd04b954 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -1,10 +1,12 @@
 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 { useKeyPress } from 'ahooks'
 import {
   memo,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -19,6 +21,9 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+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'
@@ -26,6 +31,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 { useInvalidateAppWorkflow } from '@/service/use-workflow'
+import { fetchPublishedWorkflow } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import { toast } from '../../base/ui/toast'
@@ -97,6 +104,7 @@ const AppPublisher = ({
 
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
 
+  const workflowStore = useContext(WorkflowContext)
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(s => s.setAppDetail)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -108,6 +116,7 @@ const AppPublisher = ({
 
   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)
+  const invalidateAppWorkflow = useInvalidateAppWorkflow()
   const openAsyncWindow = useAsyncWindowOpen()
 
   const isAppAccessSet = useMemo(() => isPublisherAccessConfigured(appDetail, appAccessSubjects), [appAccessSubjects, appDetail])
@@ -135,12 +144,35 @@ const AppPublisher = ({
     try {
       await onPublish?.(params)
       setPublished(true)
+
+      const appId = appDetail?.id
+      const socket = appId ? webSocketClient.getSocket(appId) : null
+      if (appId)
+        invalidateAppWorkflow(appId)
+      else
+        console.warn('[app-publisher] missing appId, skip workflow invalidate and socket emit')
+      if (socket) {
+        const timestamp = Date.now()
+        socket.emit('collaboration_event', {
+          type: 'app_publish_update',
+          data: {
+            action: 'published',
+            timestamp,
+          },
+          timestamp,
+        })
+      }
+      else if (appId) {
+        console.warn('[app-publisher] socket not ready, skip collaboration_event emit', { appId })
+      }
+
       trackEvent('app_published_time', { action_mode: 'app', app_id: appDetail?.id, app_name: appDetail?.name })
     }
-    catch {
+    catch (error) {
+      console.warn('[app-publisher] publish failed', error)
       setPublished(false)
     }
-  }, [appDetail, onPublish])
+  }, [appDetail, onPublish, invalidateAppWorkflow])
 
   const handleRestore = useCallback(async () => {
     try {
@@ -199,6 +231,29 @@ const AppPublisher = ({
     handlePublish()
   }, { exactMatch: true, useCapture: true })
 
+  useEffect(() => {
+    const appId = appDetail?.id
+    if (!appId)
+      return
+
+    const unsubscribe = collaborationManager.onAppPublishUpdate((update: CollaborationUpdate) => {
+      const action = typeof update.data.action === 'string' ? update.data.action : undefined
+      if (action === 'published') {
+        invalidateAppWorkflow(appId)
+        fetchPublishedWorkflow(`/apps/${appId}/workflows/publish`)
+          .then((publishedWorkflow) => {
+            if (publishedWorkflow?.created_at)
+              workflowStore?.getState().setPublishedAt(publishedWorkflow.created_at)
+          })
+          .catch((error) => {
+            console.warn('[app-publisher] refresh published workflow failed', error)
+          })
+      }
+    })
+
+    return unsubscribe
+  }, [appDetail?.id, invalidateAppWorkflow, workflowStore])
+
   const hasPublishedVersion = !!publishedAt
   const workflowToolMessage = !hasPublishedVersion || !workflowToolAvailable
     ? t('common.workflowAsToolDisabledHint', { ns: 'workflow' })
diff --git a/web/app/components/app/configuration/hooks/use-configuration.ts b/web/app/components/app/configuration/hooks/use-configuration.ts
index f2f708ad52..943642b545 100644
--- a/web/app/components/app/configuration/hooks/use-configuration.ts
+++ b/web/app/components/app/configuration/hooks/use-configuration.ts
@@ -21,6 +21,7 @@ import type {
   TextToSpeechConfig,
 } from '@/models/debug'
 import type { VisionSettings } from '@/types/app'
+import type { PublishWorkflowParams } from '@/types/workflow'
 import { useBoolean, useGetState } from 'ahooks'
 import { clone } from 'es-toolkit/object'
 import { produce } from 'immer'
@@ -480,34 +481,40 @@ export const useConfiguration = (): ConfigurationViewModel => {
     resolvedModelModeType,
   ])
 
-  const onPublish = useCallback(async (modelAndParameter?: ModelAndParameter, features?: FeaturesData) => createPublishHandler({
-    appId,
-    chatPromptConfig,
-    citationConfig,
-    completionParamsState,
-    completionPromptConfig,
-    contextVar,
-    contextVarEmpty,
-    dataSets,
-    datasetConfigs,
-    externalDataToolsConfig,
-    hasSetBlockStatus,
-    introduction,
-    isAdvancedMode,
-    isFunctionCall,
-    mode,
-    modelConfig,
-    moreLikeThisConfig,
-    promptEmpty,
-    promptMode,
-    resolvedModelModeType,
-    setCanReturnToSimpleMode,
-    setPublishedConfig,
-    speechToTextConfig,
-    suggestedQuestionsAfterAnswerConfig,
-    t,
-    textToSpeechConfig,
-  })(updateAppModelConfig, modelAndParameter, features), [
+  const onPublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams, features?: FeaturesData) => {
+    const modelAndParameter = params && 'model' in params && 'provider' in params && 'parameters' in params
+      ? params
+      : undefined
+
+    return createPublishHandler({
+      appId,
+      chatPromptConfig,
+      citationConfig,
+      completionParamsState,
+      completionPromptConfig,
+      contextVar,
+      contextVarEmpty,
+      dataSets,
+      datasetConfigs,
+      externalDataToolsConfig,
+      hasSetBlockStatus,
+      introduction,
+      isAdvancedMode,
+      isFunctionCall,
+      mode,
+      modelConfig,
+      moreLikeThisConfig,
+      promptEmpty,
+      promptMode,
+      resolvedModelModeType,
+      setCanReturnToSimpleMode,
+      setPublishedConfig,
+      speechToTextConfig,
+      suggestedQuestionsAfterAnswerConfig,
+      t,
+      textToSpeechConfig,
+    })(updateAppModelConfig, modelAndParameter, features)
+  }, [
     appId,
     chatPromptConfig,
     citationConfig,
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 3e06b89f0e..305b90981b 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,6 +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 { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -121,7 +121,6 @@ const renderModal = () => {
 
 describe('CreateAppModal', () => {
   const mockSetItem = vi.fn()
-  const originalLocalStorage = window.localStorage
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -153,13 +152,6 @@ describe('CreateAppModal', () => {
     })
   })
 
-  afterAll(() => {
-    Object.defineProperty(window, 'localStorage', {
-      value: originalLocalStorage,
-      writable: true,
-    })
-  })
-
   it('creates an app, notifies success, and fires callbacks', async () => {
     const mockApp: Partial<App> = { id: 'app-1', mode: AppModeEnum.ADVANCED_CHAT }
     mockCreateApp.mockResolvedValue(mockApp as App)
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index 877c392e6d..9b82648986 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -116,9 +116,13 @@ vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([{ id: 'tag-1', name: 'Test Tag', type: 'app' }]),
 }))
 
-vi.mock('@/config', () => ({
-  NEED_REFRESH_APP_LIST_KEY: 'needRefreshAppList',
-}))
+vi.mock('@/config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config')>()
+  return {
+    ...actual,
+    NEED_REFRESH_APP_LIST_KEY: 'needRefreshAppList',
+  }
+})
 
 vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
@@ -386,10 +390,11 @@ describe('List', () => {
 
   describe('Edge Cases', () => {
     it('should handle multiple renders without issues', () => {
-      const { rerender } = renderWithNuqs(<List />)
+      const { unmount } = renderWithNuqs(<List />)
       expect(screen.getByText('app.types.all')).toBeInTheDocument()
 
-      rerender(<List />)
+      unmount()
+      renderList()
       expect(screen.getByText('app.types.all')).toBeInTheDocument()
     })
 
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index f4136b5270..d48372bdf0 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -5,6 +5,7 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import type { WorkflowOnlineUser } from '@/models/app'
 import type { App } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
@@ -28,6 +29,7 @@ import {
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -65,10 +67,11 @@ const AccessControl = dynamic(() => import('@/app/components/app/app-access-cont
 
 type AppCardProps = {
   app: App
+  onlineUsers?: WorkflowOnlineUser[]
   onRefresh?: () => void
 }
 
-const AppCard = ({ app, onRefresh }: AppCardProps) => {
+const AppCard = ({ app, onlineUsers = [], onRefresh }: AppCardProps) => {
   const { t } = useTranslation()
   const deleteAppNameInputId = useId()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -360,6 +363,20 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     return `${t('segment.editedAt', { ns: 'datasetDocuments' })} ${timeText}`
   }, [app.updated_at, app.created_at, t])
 
+  const onlinePresenceUsers = useMemo(() => {
+    return onlineUsers
+      .map((user, index) => {
+        const id = user.user_id || user.sid || `${app.id}-online-${index}`
+        const name = user.username || user.user_id || user.sid || `${index + 1}`
+        return {
+          id,
+          name,
+          avatar_url: user.avatar || null,
+        }
+      })
+      .filter(user => Boolean(user.id))
+  }, [app.id, onlineUsers])
+
   return (
     <>
       <div
@@ -390,27 +407,32 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               <div className="truncate" title={EditTimeText}>{EditTimeText}</div>
             </div>
           </div>
-          <div className="flex h-5 w-5 shrink-0 items-center justify-center">
-            {app.access_mode === AccessMode.PUBLIC && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
-                <RiGlobalLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
-            )}
-            {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
-                <RiLockLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
-            )}
-            {app.access_mode === AccessMode.ORGANIZATION && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
-                <RiBuildingLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
-            )}
-            {app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
-                <RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
+          <div className="flex h-full shrink-0 flex-col items-end justify-between py-px">
+            {onlinePresenceUsers.length > 0 && (
+              <UserAvatarList users={onlinePresenceUsers} size="xxs" maxVisible={3} className="justify-end" />
             )}
+            <div className="flex h-5 w-5 items-center justify-center">
+              {app.access_mode === AccessMode.PUBLIC && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
+                  <RiGlobalLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+              {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
+                  <RiLockLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+              {app.access_mode === AccessMode.ORGANIZATION && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
+                  <RiBuildingLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+              {app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
+                  <RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+            </div>
           </div>
         </div>
         <div className="title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary">
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 5e15102a49..a898e682f5 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -1,10 +1,11 @@
 'use client'
 
 import type { FC } from 'react'
+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, useRef, useState } from 'react'
+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'
@@ -16,6 +17,7 @@ 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 { fetchWorkflowOnlineUsers } from '@/service/apps'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum, AppModes } from '@/types/app'
 import AppCard from './app-card'
@@ -68,6 +70,7 @@ const List: FC<Props> = ({
   const containerRef = useRef<HTMLDivElement>(null)
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [droppedDSLFile, setDroppedDSLFile] = useState<File | undefined>()
+  const [workflowOnlineUsersMap, setWorkflowOnlineUsersMap] = useState<Record<string, WorkflowOnlineUser[]>>({})
   const setKeywords = useCallback((keywords: string) => {
     setQuery(prev => ({ ...prev, keywords }))
   }, [setQuery])
@@ -183,6 +186,53 @@ const List: FC<Props> = ({
   }, [isCreatedByMe, setQuery])
 
   const pages = data?.pages ?? []
+  const appIds = useMemo(() => {
+    const ids = new Set<string>()
+    pages.forEach((page) => {
+      page.data?.forEach((app) => {
+        if (app.id)
+          ids.add(app.id)
+      })
+    })
+    return Array.from(ids)
+  }, [pages])
+
+  const refreshWorkflowOnlineUsers = useCallback(async () => {
+    if (!systemFeatures.enable_collaboration_mode) {
+      setWorkflowOnlineUsersMap({})
+      return
+    }
+
+    if (!appIds.length) {
+      setWorkflowOnlineUsersMap({})
+      return
+    }
+
+    try {
+      const onlineUsersMap = await fetchWorkflowOnlineUsers({ appIds })
+      setWorkflowOnlineUsersMap(onlineUsersMap)
+    }
+    catch {
+      setWorkflowOnlineUsersMap({})
+    }
+  }, [appIds, systemFeatures.enable_collaboration_mode])
+
+  useEffect(() => {
+    void refreshWorkflowOnlineUsers()
+  }, [refreshWorkflowOnlineUsers])
+
+  useEffect(() => {
+    if (!systemFeatures.enable_collaboration_mode)
+      return
+
+    const timer = window.setInterval(() => {
+      void refetch()
+      void refreshWorkflowOnlineUsers()
+    }, 10000)
+
+    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)
@@ -191,7 +241,7 @@ 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>
         )}
 
@@ -242,7 +292,12 @@ const List: FC<Props> = ({
 
             if (hasAnyApp) {
               return pages.flatMap(({ data: apps }) => apps).map(app => (
-                <AppCard key={app.id} app={app} onRefresh={refetch} />
+                <AppCard
+                  key={app.id}
+                  app={app}
+                  onlineUsers={workflowOnlineUsersMap[app.id] ?? []}
+                  onRefresh={refetch}
+                />
               ))
             }
 
diff --git a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
index 5236beda60..51aa8a9b0c 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
@@ -83,6 +83,7 @@ describe('EmbeddedChatbot Header', () => {
       allow_email_code_login: false,
       allow_email_password_login: false,
     },
+    enable_collaboration_mode: false,
     enable_trial_app: false,
     enable_explore_banner: false,
   }
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
index db48a9cb8f..7348879111 100644
--- a/web/app/components/base/content-dialog/index.tsx
+++ b/web/app/components/base/content-dialog/index.tsx
@@ -19,7 +19,7 @@ const ContentDialog = ({
     <Transition
       show={show}
       as="div"
-      className="absolute top-0 left-0 z-30 box-border h-full w-full p-2"
+      className="absolute left-0 top-0 z-[70] box-border h-full w-full p-2"
     >
       <TransitionChild>
         <div
diff --git a/web/app/components/base/icons/src/public/common/EnterKey.json b/web/app/components/base/icons/src/public/common/EnterKey.json
new file mode 100644
index 0000000000..1c2b0903ee
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/EnterKey.json
@@ -0,0 +1,36 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 16 16",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
+          "fill": "white",
+          "fill-opacity": "0.12"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M3.42756 8.7358V7.62784H10.8764C11.2003 7.62784 11.4957 7.5483 11.7628 7.3892C12.0298 7.23011 12.2415 7.01705 12.3977 6.75C12.5568 6.48295 12.6364 6.1875 12.6364 5.86364C12.6364 5.53977 12.5568 5.24574 12.3977 4.98153C12.2386 4.71449 12.0256 4.50142 11.7585 4.34233C11.4943 4.18324 11.2003 4.10369 10.8764 4.10369H10.3991V3H10.8764C11.4048 3 11.8849 3.12926 12.3168 3.38778C12.7486 3.64631 13.0938 3.99148 13.3523 4.4233C13.6108 4.85511 13.7401 5.33523 13.7401 5.86364C13.7401 6.25852 13.6648 6.62926 13.5142 6.97585C13.3665 7.32244 13.1619 7.62784 12.9006 7.89205C12.6392 8.15625 12.3352 8.36364 11.9886 8.5142C11.642 8.66193 11.2713 8.7358 10.8764 8.7358H3.42756ZM6.16761 12.0554L2.29403 8.18182L6.16761 4.30824L6.9304 5.07102L3.81534 8.18182L6.9304 11.2926L6.16761 12.0554Z",
+          "fill": "white"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "EnterKey"
+}
diff --git a/web/app/components/base/icons/src/public/common/EnterKey.tsx b/web/app/components/base/icons/src/public/common/EnterKey.tsx
new file mode 100644
index 0000000000..2bf2d4fb19
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/EnterKey.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './EnterKey.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'EnterKey'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/other/Comment.json b/web/app/components/base/icons/src/public/other/Comment.json
new file mode 100644
index 0000000000..780ddc4cf5
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/Comment.json
@@ -0,0 +1,26 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "14",
+      "height": "12",
+      "viewBox": "0 0 14 12",
+      "fill": "none"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M12.3334 4C12.3334 2.52725 11.1395 1.33333 9.66671 1.33333H4.33337C2.86062 1.33333 1.66671 2.52724 1.66671 4V10.6667H9.66671C11.1395 10.6667 12.3334 9.47274 12.3334 8V4ZM7.66671 6.66667V8H4.33337V6.66667H7.66671ZM9.66671 4V5.33333H4.33337V4H9.66671ZM13.6667 8C13.6667 10.2091 11.8758 12 9.66671 12H0.333374V4C0.333374 1.79086 2.12424 0 4.33337 0H9.66671C11.8758 0 13.6667 1.79086 13.6667 4V8Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "Comment"
+}
diff --git a/web/app/components/base/icons/src/public/other/Comment.tsx b/web/app/components/base/icons/src/public/other/Comment.tsx
new file mode 100644
index 0000000000..887754e48e
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/Comment.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './Comment.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Comment'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/other/index.ts b/web/app/components/base/icons/src/public/other/index.ts
index a8f91dd98b..167218e524 100644
--- a/web/app/components/base/icons/src/public/other/index.ts
+++ b/web/app/components/base/icons/src/public/other/index.ts
@@ -1,5 +1,5 @@
+export { default as Comment } from './Comment'
 export { default as DefaultToolIcon } from './DefaultToolIcon'
-
 export { default as Message3Fill } from './Message3Fill'
 export { default as RowStruct } from './RowStruct'
 export { default as Slack } from './Slack'
diff --git a/web/app/components/base/markdown-blocks/__tests__/plugin-paragraph.spec.tsx b/web/app/components/base/markdown-blocks/__tests__/plugin-paragraph.spec.tsx
index b18ac1cdcc..1d3a1c34f0 100644
--- a/web/app/components/base/markdown-blocks/__tests__/plugin-paragraph.spec.tsx
+++ b/web/app/components/base/markdown-blocks/__tests__/plugin-paragraph.spec.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable next/no-img-element */
 import type { ExtraProps } from 'streamdown'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/web/app/components/base/prompt-editor/__tests__/index.spec.tsx b/web/app/components/base/prompt-editor/__tests__/index.spec.tsx
index 93812bcd2a..9d75b9e061 100644
--- a/web/app/components/base/prompt-editor/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-editor/__tests__/index.spec.tsx
@@ -31,6 +31,9 @@ const mocks = vi.hoisted(() => {
       registerNodeTransform: vi.fn(() => vi.fn()),
       dispatchCommand: vi.fn(),
       getRootElement: vi.fn(() => rootElement),
+      getEditorState: vi.fn(() => ({
+        read: (fn: () => boolean) => fn(),
+      })),
       parseEditorState: vi.fn(() => ({ state: 'parsed' })),
       setEditorState: vi.fn(),
       focus: vi.fn(),
@@ -66,6 +69,7 @@ vi.mock('lexical', async (importOriginal) => {
       getChildren: () => mocks.rootLines.map(line => ({
         getTextContent: () => line,
       })),
+      getAllTextNodes: () => [],
     }),
     TextNode: class TextNode {
       __text: string
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 3cc0e25016..fce70d2781 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -23,6 +23,7 @@ import type {
 import { cn } from '@langgenius/dify-ui/cn'
 import { CodeNode } from '@lexical/code'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import {
   $getRoot,
   TextNode,
@@ -67,6 +68,35 @@ import {
 import PromptEditorContent from './prompt-editor-content'
 import { textToEditorState } from './utils'
 
+const ValueSyncPlugin: FC<{ value?: string }> = ({ value }) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (value === undefined)
+      return
+
+    const incomingValue = value ?? ''
+    const shouldUpdate = editor.getEditorState().read(() => {
+      const currentText = $getRoot().getChildren().map(node => node.getTextContent()).join('\n')
+      return currentText !== incomingValue
+    })
+
+    if (!shouldUpdate)
+      return
+
+    const editorState = editor.parseEditorState(textToEditorState(incomingValue))
+    editor.setEditorState(editorState)
+    editor.update(() => {
+      $getRoot().getAllTextNodes().forEach((node) => {
+        if (node instanceof CustomTextNode)
+          node.markDirty()
+      })
+    })
+  }, [editor, value])
+
+  return null
+}
+
 export type PromptEditorProps = {
   instanceId?: string
   compact?: boolean
@@ -208,6 +238,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           floatingAnchorElem={floatingAnchorElem}
           onEditorChange={handleEditorChange}
         />
+        <ValueSyncPlugin value={value} />
       </div>
     </LexicalComposer>
   )
diff --git a/web/app/components/base/prompt-editor/plugins/update-block.tsx b/web/app/components/base/prompt-editor/plugins/update-block.tsx
index 2d83573b1f..e67b027be7 100644
--- a/web/app/components/base/prompt-editor/plugins/update-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/update-block.tsx
@@ -1,5 +1,5 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { $insertNodes } from 'lexical'
+import { $getRoot, $insertNodes } from 'lexical'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { textToEditorState } from '../utils'
 import { CustomTextNode } from './custom-text/node'
@@ -20,6 +20,12 @@ const UpdateBlock = ({
     if (v.type === PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER && v.instanceId === instanceId) {
       const editorState = editor.parseEditorState(textToEditorState(v.payload))
       editor.setEditorState(editorState)
+      editor.update(() => {
+        $getRoot().getAllTextNodes().forEach((node) => {
+          if (node instanceof CustomTextNode)
+            node.markDirty()
+        })
+      })
     }
   })
 
diff --git a/web/app/components/base/ui/avatar/__tests__/index.spec.tsx b/web/app/components/base/ui/avatar/__tests__/index.spec.tsx
index 8be3f8bf0f..8a384139c2 100644
--- a/web/app/components/base/ui/avatar/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/avatar/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { Avatar } from '..'
+import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from '..'
 
 describe('Avatar', () => {
   describe('Rendering', () => {
@@ -60,6 +60,23 @@ describe('Avatar', () => {
     })
   })
 
+  describe('Primitives', () => {
+    it('should support composed avatar usage through exported primitives', () => {
+      render(
+        <AvatarRoot size="sm" data-testid="avatar-root">
+          <AvatarImage src="https://example.com/avatar.jpg" alt="Jane Doe" />
+          <AvatarFallback size="sm" style={{ backgroundColor: 'rgb(1, 2, 3)' }}>
+            J
+          </AvatarFallback>
+        </AvatarRoot>,
+      )
+
+      expect(screen.getByTestId('avatar-root')).toHaveClass('size-6')
+      expect(screen.getByText('J')).toBeInTheDocument()
+      expect(screen.getByText('J')).toHaveStyle({ backgroundColor: 'rgb(1, 2, 3)' })
+    })
+  })
+
   describe('Edge Cases', () => {
     it('should handle empty string name gracefully', () => {
       const { container } = render(<Avatar name="" avatar={null} />)
diff --git a/web/app/components/base/ui/avatar/index.stories.tsx b/web/app/components/base/ui/avatar/index.stories.tsx
index bf4da697db..abb3c99771 100644
--- a/web/app/components/base/ui/avatar/index.stories.tsx
+++ b/web/app/components/base/ui/avatar/index.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Avatar } from '.'
+import { Avatar, AvatarFallback, AvatarRoot } from '.'
 
 const meta = {
   title: 'Base/Data Display/Avatar',
@@ -84,3 +84,27 @@ export const AllFallbackSizes: Story = {
     </div>
   ),
 }
+
+export const ComposedFallback: Story = {
+  render: () => (
+    <AvatarRoot size="xl">
+      <AvatarFallback size="xl" style={{ backgroundColor: '#2563eb' }}>
+        C
+      </AvatarFallback>
+    </AvatarRoot>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<AvatarRoot size="xl">
+  <AvatarFallback size="xl" style={{ backgroundColor: '#2563eb' }}>
+    C
+  </AvatarFallback>
+</AvatarRoot>
+        `.trim(),
+      },
+    },
+  },
+}
diff --git a/web/app/components/base/ui/avatar/index.tsx b/web/app/components/base/ui/avatar/index.tsx
index 18f040ff00..1587dd2d33 100644
--- a/web/app/components/base/ui/avatar/index.tsx
+++ b/web/app/components/base/ui/avatar/index.tsx
@@ -28,7 +28,7 @@ type AvatarRootProps = React.ComponentPropsWithRef<typeof BaseAvatar.Root> & {
   size?: AvatarSize
 }
 
-function AvatarRoot({
+export function AvatarRoot({
   size = 'md',
   className,
   ...props
@@ -45,25 +45,11 @@ function AvatarRoot({
   )
 }
 
-type AvatarImageProps = React.ComponentPropsWithRef<typeof BaseAvatar.Image>
-
-function AvatarImage({
-  className,
-  ...props
-}: AvatarImageProps) {
-  return (
-    <BaseAvatar.Image
-      className={cn('absolute inset-0 size-full object-cover', className)}
-      {...props}
-    />
-  )
-}
-
 type AvatarFallbackProps = React.ComponentPropsWithRef<typeof BaseAvatar.Fallback> & {
   size?: AvatarSize
 }
 
-function AvatarFallback({
+export function AvatarFallback({
   size = 'md',
   className,
   ...props
@@ -80,6 +66,20 @@ function AvatarFallback({
   )
 }
 
+type AvatarImageProps = React.ComponentPropsWithRef<typeof BaseAvatar.Image>
+
+export function AvatarImage({
+  className,
+  ...props
+}: AvatarImageProps) {
+  return (
+    <BaseAvatar.Image
+      className={cn('absolute inset-0 size-full object-cover', className)}
+      {...props}
+    />
+  )
+}
+
 export const Avatar = ({
   name,
   avatar,
diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
new file mode 100644
index 0000000000..fc2ce60572
--- /dev/null
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -0,0 +1,99 @@
+import type { FC } from 'react'
+import type { AvatarSize } from '@/app/components/base/ui/avatar'
+import { memo } from 'react'
+import { AvatarFallback, AvatarImage, AvatarRoot } from '@/app/components/base/ui/avatar'
+import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
+import { useAppContext } from '@/context/app-context'
+
+type User = {
+  id: string
+  name: string
+  avatar_url?: string | null
+}
+
+type UserAvatarListProps = {
+  users: User[]
+  maxVisible?: number
+  size?: AvatarSize
+  className?: string
+  showCount?: boolean
+}
+
+const avatarSizeToPx: Record<AvatarSize, number> = {
+  'xxs': 16,
+  'xs': 20,
+  'sm': 24,
+  'md': 32,
+  'lg': 36,
+  'xl': 40,
+  '2xl': 48,
+  '3xl': 64,
+}
+
+export const UserAvatarList: FC<UserAvatarListProps> = memo(({
+  users,
+  maxVisible = 3,
+  size = 'sm',
+  className = '',
+  showCount = true,
+}) => {
+  const { userProfile } = useAppContext()
+  if (!users.length)
+    return null
+
+  const shouldShowCount = showCount && users.length > maxVisible
+  const actualMaxVisible = shouldShowCount ? Math.max(1, maxVisible - 1) : maxVisible
+  const visibleUsers = users.slice(0, actualMaxVisible)
+  const remainingCount = users.length - actualMaxVisible
+
+  const currentUserId = userProfile?.id
+
+  return (
+    <div className={`flex items-center -space-x-1 ${className}`}>
+      {visibleUsers.map((user, index) => {
+        const isCurrentUser = user.id === currentUserId
+        const userColor = isCurrentUser ? undefined : getUserColor(user.id)
+        return (
+          <div
+            key={`${user.id}-${index}`}
+            className="relative"
+            style={{ zIndex: visibleUsers.length - index }}
+          >
+            <AvatarRoot size={size} className="ring-2 ring-components-panel-bg">
+              {user.avatar_url && (
+                <AvatarImage
+                  src={user.avatar_url}
+                  alt={user.name}
+                />
+              )}
+              <AvatarFallback
+                size={size}
+                style={userColor ? { backgroundColor: userColor } : undefined}
+              >
+                {user.name?.[0]?.toLocaleUpperCase()}
+              </AvatarFallback>
+            </AvatarRoot>
+          </div>
+        )
+      },
+
+      )}
+      {shouldShowCount && remainingCount > 0 && (
+        <div className="relative shrink-0" style={{ zIndex: 0 }}>
+          <div
+            className="inline-flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
+            style={{
+              width: avatarSizeToPx[size],
+              height: avatarSizeToPx[size],
+            }}
+          >
+            +
+            {remainingCount}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+})
+
+UserAvatarList.displayName = 'UserAvatarList'
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 48e6b58766..478302d983 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
@@ -21,6 +21,16 @@ vi.mock('@/context/dataset-detail', () => ({
     selector({ dataset: { doc_form: ChunkingMode.text } }),
 }))
 
+vi.mock('@/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata', () => ({
+  default: () => ({
+    isShowEditModal: false,
+    showEditModal: vi.fn(),
+    hideEditModal: vi.fn(),
+    originalList: [],
+    handleSave: vi.fn(),
+  }),
+}))
+
 const createTestQueryClient = () => new QueryClient({
   defaultOptions: {
     queries: { retry: false, gcTime: 0 },
diff --git a/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts b/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts
index f29d85b460..935f1329d1 100644
--- a/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts
+++ b/web/app/components/datasets/list/dataset-card/hooks/__tests__/use-dataset-card-state.spec.ts
@@ -157,7 +157,7 @@ describe('useDatasetCardState', () => {
       expect(result.current.modalState.showRenameModal).toBe(false)
     })
 
-    it('should close confirm delete modal when closeConfirmDelete is called', () => {
+    it('should close confirm delete modal when closeConfirmDelete is called', async () => {
       const dataset = createMockDataset()
       const { result } = renderHook(() =>
         useDatasetCardState({ dataset, onSuccess: vi.fn() }),
@@ -168,7 +168,7 @@ describe('useDatasetCardState', () => {
         result.current.detectIsUsedByApp()
       })
 
-      waitFor(() => {
+      await waitFor(() => {
         expect(result.current.modalState.showConfirmDelete).toBe(true)
       })
 
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index dbd27606be..58895b26d6 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -10,7 +10,6 @@ import ActionButton from '@/app/components/base/action-button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import { Button } from '@/app/components/base/ui/button'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -20,6 +19,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
diff --git a/web/app/components/header/account-setting/__tests__/index.spec.tsx b/web/app/components/header/account-setting/__tests__/index.spec.tsx
index 279af0b114..d4e093bd30 100644
--- a/web/app/components/header/account-setting/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/__tests__/index.spec.tsx
@@ -47,6 +47,36 @@ vi.mock('@/hooks/use-breakpoints', () => ({
   default: vi.fn(),
 }))
 
+vi.mock('@/context/global-public-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/global-public-context')>()
+  const systemFeatures = {
+    ...actual.useGlobalPublicStore.getState().systemFeatures,
+    webapp_auth: {
+      ...actual.useGlobalPublicStore.getState().systemFeatures.webapp_auth,
+      enabled: true,
+    },
+    branding: {
+      ...actual.useGlobalPublicStore.getState().systemFeatures.branding,
+      enabled: false,
+    },
+    enable_marketplace: true,
+    enable_collaboration_mode: false,
+  }
+
+  return {
+    ...actual,
+    useGlobalPublicStore: (selector: (state: Record<string, unknown>) => unknown) => selector({
+      systemFeatures,
+    }),
+    useSystemFeaturesQuery: () => ({
+      data: systemFeatures,
+      isPending: false,
+      isLoading: false,
+      isFetching: false,
+    }),
+  }
+})
+
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useDefaultModel: vi.fn(() => ({ data: null, isLoading: false })),
   useUpdateDefaultModel: vi.fn(() => ({ trigger: vi.fn() })),
@@ -54,6 +84,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
   useInvalidateDefaultModel: vi.fn(() => vi.fn()),
   useModelList: vi.fn(() => ({ data: [], isLoading: false })),
   useSystemDefaultModelAndModelList: vi.fn(() => [null, vi.fn()]),
+  useMarketplaceAllPlugins: vi.fn(() => ({ plugins: [], isLoading: false })),
 }))
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/atoms', () => ({
@@ -70,6 +101,11 @@ vi.mock('@/service/use-common', () => ({
   useProviderContext: vi.fn(),
 }))
 
+vi.mock('@/app/components/billing/billing-page', () => ({
+  __esModule: true,
+  default: () => <div data-testid="billing-page" />,
+}))
+
 const baseAppContextValue: AppContextValue = {
   userProfile: {
     id: '1',
diff --git a/web/app/components/tools/mcp/__tests__/mcp-service-card.spec.tsx b/web/app/components/tools/mcp/__tests__/mcp-service-card.spec.tsx
index d408b3092e..62c6d5f3f6 100644
--- a/web/app/components/tools/mcp/__tests__/mcp-service-card.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/mcp-service-card.spec.tsx
@@ -26,6 +26,23 @@ const mockHandleGenCode = vi.fn()
 const mockOpenConfirmDelete = vi.fn()
 const mockCloseConfirmDelete = vi.fn()
 const mockOpenServerModal = vi.fn()
+const mockOnMcpServerUpdate = vi.hoisted(() => vi.fn())
+const mockUnsubscribeMcpServerUpdate = vi.hoisted(() => vi.fn())
+const invalidateMCPServerDetailFns = vi.hoisted(() => [] as Array<ReturnType<typeof vi.fn>>)
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    onMcpServerUpdate: mockOnMcpServerUpdate,
+  },
+}))
+
+vi.mock('@/service/use-tools', () => ({
+  useInvalidateMCPServerDetail: () => {
+    const invalidateFn = vi.fn()
+    invalidateMCPServerDetailFns.push(invalidateFn)
+    return invalidateFn
+  },
+}))
 
 type MockHookState = {
   genLoading: boolean
@@ -106,12 +123,15 @@ describe('MCPServiceCard', () => {
 
   beforeEach(() => {
     mockHookState = createDefaultHookState()
+    invalidateMCPServerDetailFns.length = 0
     mockHandleStatusChange.mockClear().mockResolvedValue({ activated: true })
     mockHandleServerModalHide.mockClear().mockReturnValue({ shouldDeactivate: false })
     mockHandleGenCode.mockClear()
     mockOpenConfirmDelete.mockClear()
     mockCloseConfirmDelete.mockClear()
     mockOpenServerModal.mockClear()
+    mockUnsubscribeMcpServerUpdate.mockClear()
+    mockOnMcpServerUpdate.mockReset().mockReturnValue(mockUnsubscribeMcpServerUpdate)
   })
 
   describe('Rendering', () => {
@@ -431,4 +451,27 @@ describe('MCPServiceCard', () => {
       expect(screen.getByRole('switch')).toBeInTheDocument()
     })
   })
+
+  describe('Collaboration Sync', () => {
+    it('should keep a stable MCP update subscription across rerenders and invalidate with the latest callback', async () => {
+      let mcpUpdateHandler: ((payload: unknown) => void) | undefined
+      mockOnMcpServerUpdate.mockImplementation((handler: (payload: unknown) => void) => {
+        mcpUpdateHandler = handler
+        return mockUnsubscribeMcpServerUpdate
+      })
+
+      const wrapper = createWrapper()
+      const { rerender } = render(<MCPServiceCard appInfo={createMockAppInfo()} />, { wrapper })
+
+      rerender(<MCPServiceCard appInfo={createMockAppInfo()} />)
+
+      expect(mockOnMcpServerUpdate).toHaveBeenCalledTimes(1)
+      expect(invalidateMCPServerDetailFns).toHaveLength(2)
+
+      mcpUpdateHandler?.({ type: 'mcp_server_update' })
+
+      expect(invalidateMCPServerDetailFns[0]).not.toHaveBeenCalled()
+      expect(invalidateMCPServerDetailFns[1]).toHaveBeenCalledWith('app-123')
+    })
+  })
 })
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 383f6ec2b8..e9eb1d8043 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -11,6 +11,7 @@ import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
 import { Button } from '@/app/components/base/ui/button'
 import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 import {
   useCreateMCPServer,
   useInvalidateMCPServerDetail,
@@ -59,6 +60,22 @@ const MCPServerModal = ({
     return res
   }
 
+  const emitMcpServerUpdate = (action: 'created' | 'updated') => {
+    const socket = webSocketClient.getSocket(appID)
+    if (!socket)
+      return
+
+    const timestamp = Date.now()
+    socket.emit('collaboration_event', {
+      type: 'mcp_server_update',
+      data: {
+        action,
+        timestamp,
+      },
+      timestamp,
+    })
+  }
+
   const submit = async () => {
     if (!data) {
       const payload: any = {
@@ -71,6 +88,7 @@ const MCPServerModal = ({
 
       await createMCPServer(payload)
       invalidateMCPServerDetail(appID)
+      emitMcpServerUpdate('created')
       onHide()
     }
     else {
@@ -83,6 +101,7 @@ const MCPServerModal = ({
       payload.description = description
       await updateMCPServer(payload)
       invalidateMCPServerDetail(appID)
+      emitMcpServerUpdate('updated')
       onHide()
     }
   }
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 877fcd1ce7..33036969d8 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -1,11 +1,12 @@
 'use client'
 import type { TFunction } from 'i18next'
 import type { FC, ReactNode } from 'react'
+import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
@@ -24,7 +25,9 @@ import {
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import { useDocLink } from '@/context/i18n'
+import { useInvalidateMCPServerDetail } from '@/service/use-tools'
 import { useMCPServiceCardState } from './hooks/use-mcp-service-card'
 
 // Sub-components
@@ -171,6 +174,12 @@ const MCPServiceCard: FC<IAppCardProps> = ({
   const { t } = useTranslation()
   const docLink = useDocLink()
   const appId = appInfo.id
+  const invalidateMCPServerDetail = useInvalidateMCPServerDetail()
+  const invalidateMCPServerDetailRef = useRef(invalidateMCPServerDetail)
+
+  useEffect(() => {
+    invalidateMCPServerDetailRef.current = invalidateMCPServerDetail
+  }, [invalidateMCPServerDetail])
 
   const {
     genLoading,
@@ -199,6 +208,28 @@ const MCPServiceCard: FC<IAppCardProps> = ({
   const [pendingStatus, setPendingStatus] = useState<boolean | null>(null)
   const activated = pendingStatus ?? serverActivated
 
+  const emitMcpServerUpdate = async (data: Record<string, unknown>) => {
+    try {
+      const { webSocketClient } = await import('@/app/components/workflow/collaboration/core/websocket-manager')
+      const socket = webSocketClient.getSocket(appId)
+      if (!socket)
+        return
+
+      const timestamp = Date.now()
+      socket.emit('collaboration_event', {
+        type: 'mcp_server_update',
+        data: {
+          ...data,
+          timestamp,
+        },
+        timestamp,
+      })
+    }
+    catch (error) {
+      console.error('MCP collaboration event emit failed:', error)
+    }
+  }
+
   const onChangeStatus = async (state: boolean) => {
     setPendingStatus(state)
     const result = await handleStatusChange(state)
@@ -206,6 +237,15 @@ const MCPServiceCard: FC<IAppCardProps> = ({
       // Server modal was opened instead, clear pending status
       setPendingStatus(null)
     }
+
+    if (result.activated !== state)
+      return
+
+    // Emit collaboration event to notify other clients of MCP server status change
+    void emitMcpServerUpdate({
+      action: 'statusChanged',
+      status: state ? 'active' : 'inactive',
+    })
   }
 
   const onServerModalHide = () => {
@@ -215,10 +255,35 @@ const MCPServiceCard: FC<IAppCardProps> = ({
   }
 
   const onConfirmRegenerate = () => {
-    handleGenCode()
     closeConfirmDelete()
+
+    void (async () => {
+      await handleGenCode()
+
+      // Emit collaboration event to notify other clients of MCP server code changes
+      await emitMcpServerUpdate({
+        action: 'codeRegenerated',
+      })
+    })()
   }
 
+  // Listen for collaborative MCP server updates from other clients
+  useEffect(() => {
+    if (!appId)
+      return
+
+    const unsubscribe = collaborationManager.onMcpServerUpdate((_update: CollaborationUpdate) => {
+      try {
+        invalidateMCPServerDetailRef.current(appId)
+      }
+      catch (error) {
+        console.error('MCP server update failed:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId])
+
   if (isLoading)
     return null
 
diff --git a/web/app/components/workflow-app/components/__tests__/workflow-main.spec.tsx b/web/app/components/workflow-app/components/__tests__/workflow-main.spec.tsx
index 250b87069f..d16da63b93 100644
--- a/web/app/components/workflow-app/components/__tests__/workflow-main.spec.tsx
+++ b/web/app/components/workflow-app/components/__tests__/workflow-main.spec.tsx
@@ -1,11 +1,17 @@
 import type { ReactNode } from 'react'
 import type { WorkflowProps } from '@/app/components/workflow'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 import WorkflowMain from '../workflow-main'
 
 const mockSetFeatures = vi.fn()
 const mockSetConversationVariables = vi.fn()
 const mockSetEnvironmentVariables = vi.fn()
+const mockHandleUpdateWorkflowCanvas = vi.hoisted(() => vi.fn())
+const mockFetchWorkflowDraft = vi.hoisted(() => vi.fn())
+const mockOnVarsAndFeaturesUpdate = vi.hoisted(() => vi.fn())
+const mockOnWorkflowUpdate = vi.hoisted(() => vi.fn())
+const mockOnSyncRequest = vi.hoisted(() => vi.fn())
 
 const hookFns = {
   doSyncWorkflowDraft: vi.fn(),
@@ -43,9 +49,24 @@ const hookFns = {
   invalidateConversationVarValues: vi.fn(),
 }
 
+const collaborationRuntime = vi.hoisted(() => ({
+  startCursorTracking: vi.fn(),
+  stopCursorTracking: vi.fn(),
+  onlineUsers: [] as Array<{ user_id: string, username: string, avatar: string, sid: string }>,
+  cursors: {} as Record<string, { x: number, y: number, userId: string, timestamp: number }>,
+  isConnected: false,
+  isEnabled: false,
+}))
+
+const collaborationListeners = vi.hoisted(() => ({
+  varsAndFeaturesUpdate: null as null | ((update: unknown) => void | Promise<void>),
+  workflowUpdate: null as null | (() => void | Promise<void>),
+  syncRequest: null as null | (() => void),
+}))
+
 let capturedContextProps: Record<string, unknown> | null = null
 
-type MockWorkflowWithInnerContextProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport' | 'onWorkflowDataUpdate'> & {
+type MockWorkflowWithInnerContextProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport' | 'onWorkflowDataUpdate' | 'cursors' | 'myUserId' | 'onlineUsers'> & {
   hooksStore?: Record<string, unknown>
   children?: ReactNode
 }
@@ -59,6 +80,9 @@ vi.mock('@/app/components/base/features/hooks', () => ({
 }))
 
 vi.mock('@/app/components/workflow/store', () => ({
+  useStore: <T,>(selector: (state: { appId: string }) => T) => selector({
+    appId: 'app-1',
+  }),
   useWorkflowStore: () => ({
     getState: () => ({
       setConversationVariables: mockSetConversationVariables,
@@ -67,6 +91,53 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
+vi.mock('reactflow', () => ({
+  useReactFlow: () => ({
+    getNodes: () => [],
+    setNodes: vi.fn(),
+    getEdges: () => [],
+    setEdges: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/workflow/collaboration/hooks/use-collaboration', () => ({
+  useCollaboration: () => ({
+    startCursorTracking: collaborationRuntime.startCursorTracking,
+    stopCursorTracking: collaborationRuntime.stopCursorTracking,
+    onlineUsers: collaborationRuntime.onlineUsers,
+    cursors: collaborationRuntime.cursors,
+    isConnected: collaborationRuntime.isConnected,
+    isEnabled: collaborationRuntime.isEnabled,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-workflow-interactions', () => ({
+  useWorkflowUpdate: () => ({
+    handleUpdateWorkflowCanvas: mockHandleUpdateWorkflowCanvas,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    onVarsAndFeaturesUpdate: mockOnVarsAndFeaturesUpdate.mockImplementation((handler: (update: unknown) => void | Promise<void>) => {
+      collaborationListeners.varsAndFeaturesUpdate = handler
+      return vi.fn()
+    }),
+    onWorkflowUpdate: mockOnWorkflowUpdate.mockImplementation((handler: () => void | Promise<void>) => {
+      collaborationListeners.workflowUpdate = handler
+      return vi.fn()
+    }),
+    onSyncRequest: mockOnSyncRequest.mockImplementation((handler: () => void) => {
+      collaborationListeners.syncRequest = handler
+      return vi.fn()
+    }),
+  },
+}))
+
+vi.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: (...args: unknown[]) => mockFetchWorkflowDraft(...args),
+}))
+
 vi.mock('@/app/components/workflow', () => ({
   WorkflowWithInnerContext: ({
     nodes,
@@ -74,6 +145,9 @@ vi.mock('@/app/components/workflow', () => ({
     viewport,
     onWorkflowDataUpdate,
     hooksStore,
+    cursors,
+    myUserId,
+    onlineUsers,
     children,
   }: MockWorkflowWithInnerContextProps) => {
     capturedContextProps = {
@@ -81,15 +155,32 @@ vi.mock('@/app/components/workflow', () => ({
       edges,
       viewport,
       hooksStore,
+      cursors,
+      myUserId,
+      onlineUsers,
     }
     return (
       <div data-testid="workflow-inner-context">
         <button
           type="button"
           onClick={() => onWorkflowDataUpdate?.({
-            features: { file: { enabled: true } },
-            conversation_variables: [{ id: 'conversation-1' }],
-            environment_variables: [{ id: 'env-1' }],
+            nodes: [],
+            edges: [],
+            features: { file_upload: { enabled: true } },
+            conversation_variables: [{
+              id: 'conversation-1',
+              name: 'conversation-1',
+              value_type: ChatVarType.String,
+              value: '',
+              description: '',
+            }],
+            environment_variables: [{
+              id: 'env-1',
+              name: 'env-1',
+              value: '',
+              value_type: 'string',
+              description: '',
+            }],
           })}
         >
           update-workflow-data
@@ -97,14 +188,22 @@ vi.mock('@/app/components/workflow', () => ({
         <button
           type="button"
           onClick={() => onWorkflowDataUpdate?.({
-            conversation_variables: [{ id: 'conversation-only' }],
+            nodes: [],
+            edges: [],
+            conversation_variables: [{
+              id: 'conversation-only',
+              name: 'conversation-only',
+              value_type: ChatVarType.String,
+              value: '',
+              description: '',
+            }],
           })}
         >
           update-conversation-only
         </button>
         <button
           type="button"
-          onClick={() => onWorkflowDataUpdate?.({})}
+          onClick={() => onWorkflowDataUpdate?.({ nodes: [], edges: [] })}
         >
           update-empty-payload
         </button>
@@ -169,6 +268,16 @@ describe('WorkflowMain', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     capturedContextProps = null
+    collaborationRuntime.startCursorTracking.mockReset()
+    collaborationRuntime.stopCursorTracking.mockReset()
+    collaborationRuntime.onlineUsers = []
+    collaborationRuntime.cursors = {}
+    collaborationRuntime.isConnected = false
+    collaborationRuntime.isEnabled = false
+    collaborationListeners.varsAndFeaturesUpdate = null
+    collaborationListeners.workflowUpdate = null
+    collaborationListeners.syncRequest = null
+    mockFetchWorkflowDraft.mockReset()
   })
 
   it('should render the inner workflow context with children and forwarded graph props', () => {
@@ -204,9 +313,11 @@ describe('WorkflowMain', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /update-workflow-data/i }))
 
-    expect(mockSetFeatures).toHaveBeenCalledWith({ file: { enabled: true } })
-    expect(mockSetConversationVariables).toHaveBeenCalledWith([{ id: 'conversation-1' }])
-    expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([{ id: 'env-1' }])
+    expect(mockSetFeatures).toHaveBeenCalledWith(expect.objectContaining({
+      file: expect.objectContaining({ enabled: true }),
+    }))
+    expect(mockSetConversationVariables).toHaveBeenCalledWith([expect.objectContaining({ id: 'conversation-1' })])
+    expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([expect.objectContaining({ id: 'env-1' })])
   })
 
   it('should only update the workflow store slices present in the payload', () => {
@@ -220,7 +331,7 @@ describe('WorkflowMain', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /update-conversation-only/i }))
 
-    expect(mockSetConversationVariables).toHaveBeenCalledWith([{ id: 'conversation-only' }])
+    expect(mockSetConversationVariables).toHaveBeenCalledWith([expect.objectContaining({ id: 'conversation-only' })])
     expect(mockSetFeatures).not.toHaveBeenCalled()
     expect(mockSetEnvironmentVariables).not.toHaveBeenCalled()
   })
@@ -274,4 +385,79 @@ describe('WorkflowMain', () => {
       configsMap: { flowId: 'app-1', flowType: 'app-flow', fileSettings: { enabled: true } },
     })
   })
+
+  it('passes collaboration props and tracks cursors when collaboration is enabled', () => {
+    collaborationRuntime.isEnabled = true
+    collaborationRuntime.isConnected = true
+    collaborationRuntime.onlineUsers = [{ user_id: 'u-1', username: 'Alice', avatar: '', sid: 'sid-1' }]
+    collaborationRuntime.cursors = {
+      'current-user': { x: 1, y: 2, userId: 'current-user', timestamp: 1 },
+      'user-other': { x: 20, y: 30, userId: 'user-other', timestamp: 2 },
+    }
+
+    const { unmount } = render(
+      <WorkflowMain
+        nodes={[]}
+        edges={[]}
+        viewport={{ x: 0, y: 0, zoom: 1 }}
+      />,
+    )
+
+    expect(collaborationRuntime.startCursorTracking).toHaveBeenCalled()
+    expect(capturedContextProps).toMatchObject({
+      myUserId: 'current-user',
+      onlineUsers: [{ user_id: 'u-1' }],
+      cursors: {
+        'user-other': expect.objectContaining({ userId: 'user-other' }),
+      },
+    })
+
+    unmount()
+    expect(collaborationRuntime.stopCursorTracking).toHaveBeenCalled()
+  })
+
+  it('subscribes collaboration listeners and handles sync/workflow update callbacks', async () => {
+    collaborationRuntime.isEnabled = true
+    mockFetchWorkflowDraft.mockResolvedValue({
+      features: {
+        file_upload: { enabled: true },
+        opening_statement: 'hello',
+      },
+      conversation_variables: [],
+      environment_variables: [],
+      graph: {
+        nodes: [{ id: 'n-1' }],
+        edges: [{ id: 'e-1' }],
+        viewport: { x: 3, y: 4, zoom: 1.2 },
+      },
+    })
+
+    render(
+      <WorkflowMain
+        nodes={[]}
+        edges={[]}
+        viewport={{ x: 0, y: 0, zoom: 1 }}
+      />,
+    )
+
+    expect(mockOnVarsAndFeaturesUpdate).toHaveBeenCalled()
+    expect(mockOnWorkflowUpdate).toHaveBeenCalled()
+    expect(mockOnSyncRequest).toHaveBeenCalled()
+
+    collaborationListeners.syncRequest?.()
+    expect(hookFns.doSyncWorkflowDraft).toHaveBeenCalled()
+
+    await collaborationListeners.varsAndFeaturesUpdate?.({})
+    await collaborationListeners.workflowUpdate?.()
+
+    await waitFor(() => {
+      expect(mockFetchWorkflowDraft).toHaveBeenCalledWith('/apps/app-1/workflows/draft')
+      expect(mockSetFeatures).toHaveBeenCalled()
+      expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+        nodes: [{ id: 'n-1' }],
+        edges: [{ id: 'e-1' }],
+        viewport: { x: 3, y: 4, zoom: 1.2 },
+      })
+    })
+  })
 })
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 5ce30d0701..94e487ba57 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -1,3 +1,4 @@
+import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type {
@@ -143,7 +144,8 @@ const FeaturesTrigger = () => {
   const needWarningNodes = useChecklist(nodes, edges)
 
   const updatePublishedWorkflow = useInvalidateAppWorkflow()
-  const onPublish = useCallback(async (params?: PublishWorkflowParams) => {
+  const onPublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams) => {
+    const publishParams = params && 'title' in params ? params : undefined
     // First check if there are any items in the checklist
     // if (!validateBeforeRun())
     //   throw new Error('Checklist has unresolved items')
@@ -157,10 +159,9 @@ const FeaturesTrigger = () => {
     if (await handleCheckBeforePublish()) {
       const res = await publishWorkflow({
         url: `/apps/${appID}/workflows/publish`,
-        title: params?.title || '',
-        releaseNotes: params?.releaseNotes || '',
+        title: publishParams?.title || '',
+        releaseNotes: publishParams?.releaseNotes || '',
       })
-
       if (res) {
         toast.success(t('api.actionSuccess', { ns: 'common' }))
         updatePublishedWorkflow(appID!)
diff --git a/web/app/components/workflow-app/components/workflow-main.tsx b/web/app/components/workflow-app/components/workflow-main.tsx
index 38a044f088..957344a1da 100644
--- a/web/app/components/workflow-app/components/workflow-main.tsx
+++ b/web/app/components/workflow-app/components/workflow-main.tsx
@@ -1,11 +1,25 @@
+import type { Features as FeaturesData } from '@/app/components/base/features/types'
 import type { WorkflowProps } from '@/app/components/workflow'
+import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
+import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store/store'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import type { FetchWorkflowDraftResponse } from '@/types/workflow'
 import {
   useCallback,
+  useEffect,
   useMemo,
+  useRef,
 } from 'react'
+import { useReactFlow } from 'reactflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
-import { useWorkflowStore } from '@/app/components/workflow/store'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-interactions'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { fetchWorkflowDraft } from '@/service/workflow'
 import {
   useAvailableNodesMetaData,
   useConfigsMap,
@@ -21,6 +35,7 @@ import {
 import WorkflowChildren from './workflow-children'
 
 type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
+type WorkflowDataUpdatePayload = Pick<FetchWorkflowDraftResponse, 'features' | 'conversation_variables' | 'environment_variables'>
 const WorkflowMain = ({
   nodes,
   edges,
@@ -28,8 +43,48 @@ const WorkflowMain = ({
 }: WorkflowMainProps) => {
   const featuresStore = useFeaturesStore()
   const workflowStore = useWorkflowStore()
+  const appId = useStore(s => s.appId)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const reactFlow = useReactFlow()
 
-  const handleWorkflowDataUpdate = useCallback((payload: any) => {
+  const reactFlowStore = useMemo(() => ({
+    getState: () => ({
+      getNodes: () => reactFlow.getNodes(),
+      setNodes: (nodesToSet: Node[]) => reactFlow.setNodes(nodesToSet),
+      getEdges: () => reactFlow.getEdges(),
+      setEdges: (edgesToSet: Edge[]) => reactFlow.setEdges(edgesToSet),
+    }),
+  }), [reactFlow])
+  const {
+    startCursorTracking,
+    stopCursorTracking,
+    onlineUsers,
+    cursors,
+    isConnected,
+    isEnabled: isCollaborationEnabled,
+  } = useCollaboration(appId || '', reactFlowStore)
+  const myUserId = useMemo(
+    () => (isCollaborationEnabled && isConnected ? 'current-user' : null),
+    [isCollaborationEnabled, isConnected],
+  )
+
+  const filteredCursors = Object.fromEntries(
+    Object.entries(cursors).filter(([userId]) => userId !== myUserId),
+  )
+
+  useEffect(() => {
+    if (!isCollaborationEnabled)
+      return
+
+    if (containerRef.current)
+      startCursorTracking(containerRef as React.RefObject<HTMLElement>, reactFlow)
+
+    return () => {
+      stopCursorTracking()
+    }
+  }, [startCursorTracking, stopCursorTracking, reactFlow, isCollaborationEnabled])
+
+  const handleWorkflowDataUpdate = useCallback((payload: WorkflowDataUpdatePayload) => {
     const {
       features,
       conversation_variables,
@@ -38,7 +93,33 @@ const WorkflowMain = ({
     if (features && featuresStore) {
       const { setFeatures } = featuresStore.getState()
 
-      setFeatures(features)
+      const transformedFeatures: FeaturesData = {
+        file: {
+          image: {
+            enabled: !!features.file_upload?.image?.enabled,
+            number_limits: features.file_upload?.image?.number_limits || 3,
+            transfer_methods: features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
+          },
+          enabled: !!(features.file_upload?.enabled || features.file_upload?.image?.enabled),
+          allowed_file_types: features.file_upload?.allowed_file_types || [SupportUploadFileTypes.image],
+          allowed_file_extensions: features.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
+          allowed_file_upload_methods: features.file_upload?.allowed_file_upload_methods || features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
+          number_limits: features.file_upload?.number_limits || features.file_upload?.image?.number_limits || 3,
+        },
+        opening: {
+          enabled: !!features.opening_statement,
+          opening_statement: features.opening_statement,
+          suggested_questions: features.suggested_questions,
+        },
+        suggested: features.suggested_questions_after_answer || { enabled: false },
+        speech2text: features.speech_to_text || { enabled: false },
+        text2speech: features.text_to_speech || { enabled: false },
+        citation: features.retriever_resource || { enabled: false },
+        moderation: features.sensitive_word_avoidance || { enabled: false },
+        annotationReply: features.annotation_reply || { enabled: false },
+      }
+
+      setFeatures(transformedFeatures)
     }
     if (conversation_variables) {
       const { setConversationVariables } = workflowStore.getState()
@@ -55,6 +136,7 @@ const WorkflowMain = ({
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft()
   const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
   const {
     handleBackupDraft,
     handleLoadBackupDraft,
@@ -62,6 +144,64 @@ const WorkflowMain = ({
     handleRun,
     handleStopRun,
   } = useWorkflowRun()
+
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled)
+      return
+
+    const unsubscribe = collaborationManager.onVarsAndFeaturesUpdate(async (_update: CollaborationUpdate) => {
+      try {
+        const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
+        handleWorkflowDataUpdate(response)
+      }
+      catch (error) {
+        console.error('workflow vars and features update failed:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId, handleWorkflowDataUpdate, isCollaborationEnabled])
+
+  // Listen for workflow updates from other users
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled)
+      return
+
+    const unsubscribe = collaborationManager.onWorkflowUpdate(async () => {
+      try {
+        const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
+
+        // Handle features, variables etc.
+        handleWorkflowDataUpdate(response)
+
+        // Update workflow canvas (nodes, edges, viewport)
+        if (response.graph) {
+          handleUpdateWorkflowCanvas({
+            nodes: response.graph.nodes || [],
+            edges: response.graph.edges || [],
+            viewport: response.graph.viewport || { x: 0, y: 0, zoom: 1 },
+          })
+        }
+      }
+      catch (error) {
+        console.error('Failed to fetch updated workflow:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId, handleWorkflowDataUpdate, handleUpdateWorkflowCanvas, isCollaborationEnabled])
+
+  // Listen for sync requests from other users (only processed by leader)
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled)
+      return
+
+    const unsubscribe = collaborationManager.onSyncRequest(() => {
+      doSyncWorkflowDraft()
+    })
+
+    return unsubscribe
+  }, [appId, doSyncWorkflowDraft, isCollaborationEnabled])
   const {
     handleStartWorkflowRun,
     handleWorkflowStartRunInChatflow,
@@ -79,6 +219,7 @@ const WorkflowMain = ({
   } = useDSL()
 
   const configsMap = useConfigsMap()
+
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
     ...configsMap,
   })
@@ -176,15 +317,23 @@ const WorkflowMain = ({
   ])
 
   return (
-    <WorkflowWithInnerContext
-      nodes={nodes}
-      edges={edges}
-      viewport={viewport}
-      onWorkflowDataUpdate={handleWorkflowDataUpdate}
-      hooksStore={hooksStore as any}
+    <div
+      ref={containerRef}
+      className="relative h-full w-full"
     >
-      <WorkflowChildren />
-    </WorkflowWithInnerContext>
+      <WorkflowWithInnerContext
+        nodes={nodes}
+        edges={edges}
+        viewport={viewport}
+        onWorkflowDataUpdate={handleWorkflowDataUpdate}
+        hooksStore={hooksStore as unknown as Partial<HooksStoreShape>}
+        cursors={filteredCursors}
+        myUserId={myUserId}
+        onlineUsers={onlineUsers}
+      >
+        <WorkflowChildren />
+      </WorkflowWithInnerContext>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow-app/components/workflow-panel.tsx b/web/app/components/workflow-app/components/workflow-panel.tsx
index 4b145339d7..1a9a76d946 100644
--- a/web/app/components/workflow-app/components/workflow-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-panel.tsx
@@ -6,6 +6,7 @@ import {
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Panel from '@/app/components/workflow/panel'
+import CommentsPanel from '@/app/components/workflow/panel/comments-panel'
 import { useStore } from '@/app/components/workflow/store'
 import dynamic from '@/next/dynamic'
 import {
@@ -67,6 +68,7 @@ const WorkflowPanelOnRight = () => {
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
+  const controlMode = useStore(s => s.controlMode)
 
   return (
     <>
@@ -100,6 +102,7 @@ const WorkflowPanelOnRight = () => {
           <GlobalVariablePanel />
         )
       }
+      {controlMode === 'comment' && <CommentsPanel />}
     </>
   )
 }
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-nodes-sync-draft.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-nodes-sync-draft.spec.ts
index c9fa535d51..1a8a7d3a59 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-nodes-sync-draft.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-nodes-sync-draft.spec.ts
@@ -8,6 +8,10 @@ const mockPostWithKeepalive = vi.fn()
 const mockSetSyncWorkflowDraftHash = vi.fn()
 const mockSetDraftUpdatedAt = vi.fn()
 const mockGetNodesReadOnly = vi.fn()
+const mockCollaborationIsConnected = vi.fn()
+const mockCollaborationGetIsLeader = vi.fn()
+const mockCollaborationEmitSyncRequest = vi.fn()
+let isCollaborationEnabled = false
 
 let reactFlowState: {
   getNodes: typeof mockGetNodes
@@ -57,6 +61,23 @@ vi.mock('@/app/components/workflow/hooks/use-workflow', () => ({
   useNodesReadOnly: () => ({ getNodesReadOnly: mockGetNodesReadOnly }),
 }))
 
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    isConnected: (...args: unknown[]) => mockCollaborationIsConnected(...args),
+    getIsLeader: (...args: unknown[]) => mockCollaborationGetIsLeader(...args),
+    emitSyncRequest: (...args: unknown[]) => mockCollaborationEmitSyncRequest(...args),
+  },
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (state: { systemFeatures: { enable_collaboration_mode: boolean } }) => unknown) =>
+    selector({
+      systemFeatures: {
+        enable_collaboration_mode: isCollaborationEnabled,
+      },
+    }),
+}))
+
 vi.mock('@/app/components/workflow/hooks/use-serial-async-callback', () => ({
   useSerialAsyncCallback: (fn: (...args: unknown[]) => Promise<void>, checkFn: () => boolean) =>
     (...args: unknown[]) => {
@@ -109,6 +130,9 @@ describe('useNodesSyncDraft — handleRefreshWorkflowDraft(true) on 409', () =>
     mockGetNodesReadOnly.mockReturnValue(false)
     mockGetNodes.mockReturnValue([{ id: 'n1', position: { x: 0, y: 0 }, data: { type: 'start' } }])
     mockSyncWorkflowDraft.mockResolvedValue({ hash: 'new', updated_at: 1 })
+    mockCollaborationIsConnected.mockReturnValue(false)
+    mockCollaborationGetIsLeader.mockReturnValue(true)
+    isCollaborationEnabled = false
   })
 
   it('should call handleRefreshWorkflowDraft(true) — not updating canvas — on draft_workflow_not_sync', async () => {
@@ -261,4 +285,41 @@ describe('useNodesSyncDraft — handleRefreshWorkflowDraft(true) on 409', () =>
       hash: 'hash-123',
     }))
   })
+
+  it('should emit sync request instead of syncing when current user is collaboration follower', async () => {
+    isCollaborationEnabled = true
+    mockCollaborationIsConnected.mockReturnValue(true)
+    mockCollaborationGetIsLeader.mockReturnValue(false)
+    const callbacks = {
+      onSuccess: vi.fn(),
+      onError: vi.fn(),
+      onSettled: vi.fn(),
+    }
+
+    const { result } = renderHook(() => useNodesSyncDraft())
+
+    await act(async () => {
+      await result.current.doSyncWorkflowDraft(false, callbacks)
+    })
+
+    expect(mockCollaborationEmitSyncRequest).toHaveBeenCalled()
+    expect(mockSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(callbacks.onSuccess).not.toHaveBeenCalled()
+    expect(callbacks.onError).not.toHaveBeenCalled()
+    expect(callbacks.onSettled).toHaveBeenCalled()
+  })
+
+  it('should skip keepalive sync on page close when current user is collaboration follower', () => {
+    isCollaborationEnabled = true
+    mockCollaborationIsConnected.mockReturnValue(true)
+    mockCollaborationGetIsLeader.mockReturnValue(false)
+
+    const { result } = renderHook(() => useNodesSyncDraft())
+
+    act(() => {
+      result.current.syncWorkflowDraftWhenPageClose()
+    })
+
+    expect(mockPostWithKeepalive).not.toHaveBeenCalled()
+  })
 })
diff --git a/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts
index 5f61997d9f..42946e14a8 100644
--- a/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts
@@ -1,12 +1,15 @@
 import type { SyncDraftCallback } from '@/app/components/workflow/hooks-store'
+import type { WorkflowDraftFeaturesPayload } from '@/service/workflow'
 import { produce } from 'immer'
 import { useCallback } from 'react'
 import { useStoreApi } from 'reactflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 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 { useGlobalPublicStore } from '@/context/global-public-context'
 import { postWithKeepalive } from '@/service/fetch'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useWorkflowRefreshDraft } from '.'
@@ -17,6 +20,7 @@ export const useNodesSyncDraft = () => {
   const featuresStore = useFeaturesStore()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
   const getPostParams = useCallback(() => {
     const {
@@ -54,7 +58,16 @@ export const useNodesSyncDraft = () => {
         })
       })
     })
-    const viewport = { x, y, zoom }
+    const featuresPayload: WorkflowDraftFeaturesPayload = {
+      opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+      suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
+      suggested_questions_after_answer: features.suggested,
+      text_to_speech: features.text2speech,
+      speech_to_text: features.speech2text,
+      retriever_resource: features.citation,
+      sensitive_word_avoidance: features.moderation,
+      file_upload: features.file,
+    }
 
     return {
       url: `/apps/${appId}/workflows/draft`,
@@ -62,33 +75,37 @@ export const useNodesSyncDraft = () => {
         graph: {
           nodes: producedNodes,
           edges: producedEdges,
-          viewport,
-        },
-        features: {
-          opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
-          suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
-          suggested_questions_after_answer: features.suggested,
-          text_to_speech: features.text2speech,
-          speech_to_text: features.speech2text,
-          retriever_resource: features.citation,
-          sensitive_word_avoidance: features.moderation,
-          file_upload: features.file,
+          viewport: {
+            x,
+            y,
+            zoom,
+          },
         },
+        features: featuresPayload,
         environment_variables: environmentVariables,
         conversation_variables: conversationVariables,
         hash: syncWorkflowDraftHash,
+        ...(isCollaborationEnabled ? { _is_collaborative: true } : {}),
       },
     }
-  }, [store, featuresStore, workflowStore])
+  }, [store, featuresStore, workflowStore, isCollaborationEnabled])
 
   const syncWorkflowDraftWhenPageClose = useCallback(() => {
     if (getNodesReadOnly())
       return
+
+    const isFollower = isCollaborationEnabled
+      && collaborationManager.isConnected()
+      && !collaborationManager.getIsLeader()
+
+    if (isFollower)
+      return
+
     const postParams = getPostParams()
 
     if (postParams)
       postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
-  }, [getPostParams, getNodesReadOnly])
+  }, [getPostParams, getNodesReadOnly, isCollaborationEnabled])
 
   const performSync = useCallback(async (
     notRefreshWhenSyncError?: boolean,
@@ -97,7 +114,16 @@ export const useNodesSyncDraft = () => {
     if (getNodesReadOnly())
       return
 
-    // Get base params without hash
+    const isFollower = isCollaborationEnabled
+      && collaborationManager.isConnected()
+      && !collaborationManager.getIsLeader()
+
+    if (isFollower) {
+      collaborationManager.emitSyncRequest()
+      callback?.onSettled?.()
+      return
+    }
+
     const baseParams = getPostParams()
     if (!baseParams)
       return
@@ -108,15 +134,13 @@ export const useNodesSyncDraft = () => {
     } = workflowStore.getState()
 
     try {
-      // IMPORTANT: Get the LATEST hash right before sending the request
-      // This ensures that even if queued, each request uses the most recent hash
       const latestHash = workflowStore.getState().syncWorkflowDraftHash
 
       const postParams = {
         ...baseParams,
         params: {
           ...baseParams.params,
-          hash: latestHash || null, // null for first-time, otherwise use latest hash
+          hash: latestHash || null,
         },
       }
 
@@ -137,7 +161,7 @@ export const useNodesSyncDraft = () => {
     finally {
       callback?.onSettled?.()
     }
-  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft])
+  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft, isCollaborationEnabled])
 
   const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
 
diff --git a/web/app/components/workflow-app/index.tsx b/web/app/components/workflow-app/index.tsx
index 57bff3fa6e..e6fdf0ddc6 100644
--- a/web/app/components/workflow-app/index.tsx
+++ b/web/app/components/workflow-app/index.tsx
@@ -78,15 +78,18 @@ const WorkflowAppWithAdditionalContext = () => {
   }, [workflowStore])
 
   const nodesData = useMemo(() => {
-    if (data)
-      return initialNodes(data.graph.nodes, data.graph.edges)
-
+    if (data) {
+      const processedNodes = initialNodes(data.graph.nodes, data.graph.edges)
+      return processedNodes
+    }
     return []
   }, [data])
-  const edgesData = useMemo(() => {
-    if (data)
-      return initialEdges(data.graph.edges, data.graph.nodes)
 
+  const edgesData = useMemo(() => {
+    if (data) {
+      const processedEdges = initialEdges(data.graph.edges, data.graph.nodes)
+      return processedEdges
+    }
     return []
   }, [data])
 
diff --git a/web/app/components/workflow/__tests__/features.spec.tsx b/web/app/components/workflow/__tests__/features.spec.tsx
index 8be40faea9..632a4c4e0b 100644
--- a/web/app/components/workflow/__tests__/features.spec.tsx
+++ b/web/app/components/workflow/__tests__/features.spec.tsx
@@ -8,8 +8,25 @@ import { InputVarType } from '../types'
 import { createStartNode } from './fixtures'
 import { renderWorkflowFlowComponent } from './workflow-test-env'
 
-const mockHandleSyncWorkflowDraft = vi.fn()
 const mockHandleAddVariable = vi.fn()
+const mockUpdateFeatures = vi.fn()
+const mockFeaturesStore = {
+  getState: () => ({
+    features: {
+      opening: {
+        enabled: false,
+        opening_statement: '',
+        suggested_questions: [],
+      },
+      suggested: false,
+      text2speech: false,
+      speech2text: false,
+      citation: false,
+      moderation: false,
+      file: false,
+    },
+  }),
+}
 
 let mockIsChatMode = true
 let mockNodesReadOnly = false
@@ -22,9 +39,6 @@ vi.mock('../hooks', async () => {
     useNodesReadOnly: () => ({
       nodesReadOnly: mockNodesReadOnly,
     }),
-    useNodesSyncDraft: () => ({
-      handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft,
-    }),
   }
 })
 
@@ -34,6 +48,14 @@ vi.mock('../nodes/start/use-config', () => ({
   }),
 }))
 
+vi.mock('@/service/workflow', () => ({
+  updateFeatures: (...args: unknown[]) => mockUpdateFeatures(...args),
+}))
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeaturesStore: () => mockFeaturesStore,
+}))
+
 vi.mock('@/app/components/base/features/new-feature-panel', () => ({
   default: ({
     show,
@@ -112,21 +134,29 @@ const DelayedFeatures = () => {
   return <Features />
 }
 
-const renderFeatures = (options?: Omit<Parameters<typeof renderWorkflowFlowComponent>[1], 'nodes' | 'edges'>) =>
-  renderWorkflowFlowComponent(
+const renderFeatures = (options?: Omit<NonNullable<Parameters<typeof renderWorkflowFlowComponent>[1]>, 'nodes' | 'edges'>) => {
+  const mergedInitialStoreState = {
+    appId: 'app-1',
+    ...(options?.initialStoreState || {}),
+  }
+
+  return renderWorkflowFlowComponent(
     <DelayedFeatures />,
     {
       nodes: [startNode],
       edges: [],
       ...options,
+      initialStoreState: mergedInitialStoreState,
     },
   )
+}
 
 describe('Features', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsChatMode = true
     mockNodesReadOnly = false
+    mockUpdateFeatures.mockResolvedValue(undefined)
   })
 
   describe('Rendering', () => {
@@ -146,8 +176,10 @@ describe('Features', () => {
 
       await user.click(screen.getByRole('button', { name: 'open features' }))
 
-      expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(1)
-      expect(store.getState().showFeaturesPanel).toBe(true)
+      await vi.waitFor(() => {
+        expect(mockUpdateFeatures).toHaveBeenCalledTimes(1)
+        expect(store.getState().showFeaturesPanel).toBe(true)
+      })
     })
 
     it('should close the workflow feature panel and transform required prompt variables', async () => {
diff --git a/web/app/components/workflow/__tests__/panel-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/panel-contextmenu.spec.tsx
index 914c1be617..7a02781c17 100644
--- a/web/app/components/workflow/__tests__/panel-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/panel-contextmenu.spec.tsx
@@ -8,6 +8,7 @@ const mockUseStore = vi.hoisted(() => vi.fn())
 const mockUseNodesInteractions = vi.hoisted(() => vi.fn())
 const mockUsePanelInteractions = vi.hoisted(() => vi.fn())
 const mockUseWorkflowStartRun = vi.hoisted(() => vi.fn())
+const mockUseWorkflowMoveMode = vi.hoisted(() => vi.fn())
 const mockUseOperator = vi.hoisted(() => vi.fn())
 const mockUseDSL = vi.hoisted(() => vi.fn())
 
@@ -23,6 +24,9 @@ vi.mock('@/app/components/workflow/store', () => ({
   useStore: (selector: (state: {
     panelMenu?: { left: number, top: number }
     clipboardElements: unknown[]
+    pendingComment: null | { pageX: number, pageY: number, elementX: number, elementY: number }
+    setCommentPlacing: (placing: boolean) => void
+    setCommentQuickAdd: (quickAdd: boolean) => void
     setShowImportDSLModal: (visible: boolean) => void
   }) => unknown) => mockUseStore(selector),
 }))
@@ -31,6 +35,7 @@ vi.mock('@/app/components/workflow/hooks', () => ({
   useNodesInteractions: () => mockUseNodesInteractions(),
   usePanelInteractions: () => mockUsePanelInteractions(),
   useWorkflowStartRun: () => mockUseWorkflowStartRun(),
+  useWorkflowMoveMode: () => mockUseWorkflowMoveMode(),
   useDSL: () => mockUseDSL(),
 }))
 
@@ -62,14 +67,18 @@ describe('PanelContextmenu', () => {
   const mockHandleAddNote = vi.fn()
   const mockExportCheck = vi.fn()
   const mockSetShowImportDSLModal = vi.fn()
+  const mockSetCommentPlacing = vi.fn()
+  const mockSetCommentQuickAdd = vi.fn()
   let panelMenu: { left: number, top: number } | undefined
   let clipboardElements: unknown[]
+  let pendingComment: null | { pageX: number, pageY: number, elementX: number, elementY: number }
   let clickAwayHandler: (() => void) | undefined
 
   beforeEach(() => {
     vi.clearAllMocks()
     panelMenu = undefined
     clipboardElements = []
+    pendingComment = null
     clickAwayHandler = undefined
 
     mockUseClickAway.mockImplementation((handler: () => void) => {
@@ -81,10 +90,16 @@ describe('PanelContextmenu', () => {
     mockUseStore.mockImplementation((selector: (state: {
       panelMenu?: { left: number, top: number }
       clipboardElements: unknown[]
+      pendingComment: null | { pageX: number, pageY: number, elementX: number, elementY: number }
+      setCommentPlacing: (placing: boolean) => void
+      setCommentQuickAdd: (quickAdd: boolean) => void
       setShowImportDSLModal: (visible: boolean) => void
     }) => unknown) => selector({
       panelMenu,
       clipboardElements,
+      pendingComment,
+      setCommentPlacing: mockSetCommentPlacing,
+      setCommentQuickAdd: mockSetCommentQuickAdd,
       setShowImportDSLModal: mockSetShowImportDSLModal,
     }))
     mockUseNodesInteractions.mockReturnValue({
@@ -96,6 +111,9 @@ describe('PanelContextmenu', () => {
     mockUseWorkflowStartRun.mockReturnValue({
       handleStartWorkflowRun: mockHandleStartWorkflowRun,
     })
+    mockUseWorkflowMoveMode.mockReturnValue({
+      isCommentModeAvailable: false,
+    })
     mockUseOperator.mockReturnValue({
       handleAddNote: mockHandleAddNote,
     })
diff --git a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
index 961ab6ddb4..d56cf80779 100644
--- a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
@@ -17,6 +17,7 @@ class MockFileReader {
 
 vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
 const mockEmit = vi.fn()
+const mockEmitWorkflowUpdate = vi.hoisted(() => vi.fn())
 
 vi.mock('@/app/components/base/ui/toast', () => ({
   toast: {
@@ -39,6 +40,12 @@ vi.mock('@/service/workflow', () => ({
   fetchWorkflowDraft: (path: string) => mockFetchWorkflowDraft(path),
 }))
 
+vi.mock('../collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    emitWorkflowUpdate: mockEmitWorkflowUpdate,
+  },
+}))
+
 const mockHandleCheckPluginDependencies = vi.fn()
 vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
   usePluginDependencies: () => ({
@@ -138,6 +145,7 @@ describe('UpdateDSLModal', () => {
     expect(mockEmit).toHaveBeenCalledWith(expect.objectContaining({
       type: 'WORKFLOW_DATA_UPDATE',
     }))
+    expect(mockEmitWorkflowUpdate).toHaveBeenCalledWith('app-1')
     expect(defaultProps.onImport).toHaveBeenCalledTimes(1)
     expect(defaultProps.onCancel).toHaveBeenCalledTimes(1)
   })
@@ -187,6 +195,7 @@ describe('UpdateDSLModal', () => {
     await waitFor(() => {
       expect(mockImportDSLConfirm).toHaveBeenCalledWith({ import_id: 'import-2' })
     })
+    expect(mockEmitWorkflowUpdate).toHaveBeenCalledWith('app-1')
   })
 
   it('should open the pending modal after the timeout and allow dismissing it', async () => {
diff --git a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
index 7ad6d0c13d..586a3c930e 100644
--- a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
+++ b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
@@ -5,6 +5,7 @@ import { BaseEdge, internalsSymbol, Position, ReactFlowProvider, useStoreApi } f
 import { FlowType } from '@/types/common'
 import { WORKFLOW_DATA_UPDATE } from '../constants'
 import { Workflow } from '../index'
+import { ControlMode } from '../types'
 import { renderWorkflowComponent } from './workflow-test-env'
 
 type WorkflowUpdateEvent = {
@@ -23,6 +24,32 @@ const reactFlowBridge = vi.hoisted(() => ({
   store: null as null | ReturnType<typeof useStoreApi>,
 }))
 
+const collaborationBridge = vi.hoisted(() => ({
+  graphImportHandler: null as null | ((payload: { nodes: Node[], edges: Edge[] }) => void),
+  historyActionHandler: null as null | ((payload: unknown) => void),
+}))
+
+const toastInfoMock = vi.hoisted(() => vi.fn())
+
+const workflowCommentState = vi.hoisted(() => ({
+  comments: [] as Array<Record<string, unknown>>,
+  pendingComment: null as null | { elementX: number, elementY: number },
+  activeComment: null as null | Record<string, unknown>,
+  activeCommentLoading: false,
+  replySubmitting: false,
+  replyUpdating: false,
+  handleCommentSubmit: vi.fn(),
+  handleCommentCancel: vi.fn(),
+  handleCommentIconClick: vi.fn(),
+  handleActiveCommentClose: vi.fn(),
+  handleCommentResolve: vi.fn(),
+  handleCommentDelete: vi.fn(async () => {}),
+  handleCommentReply: vi.fn(),
+  handleCommentReplyUpdate: vi.fn(),
+  handleCommentReplyDelete: vi.fn(async () => {}),
+  handleCommentPositionUpdate: vi.fn(),
+}))
+
 const workflowHookMocks = vi.hoisted(() => ({
   handleNodeDragStart: vi.fn(),
   handleNodeDrag: vi.fn(),
@@ -110,6 +137,12 @@ vi.mock('@/next/dynamic', () => ({
   default: () => () => null,
 }))
 
+vi.mock('@/next/navigation', () => ({
+  useParams: () => ({
+    appId: 'app-1',
+  }),
+}))
+
 vi.mock('@/context/event-emitter', () => ({
   useEventEmitterContextContext: () => ({
     eventEmitter: {
@@ -131,6 +164,109 @@ vi.mock('@/service/workflow', () => ({
   fetchAllInspectVars: vi.fn().mockResolvedValue([]),
 }))
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    info: toastInfoMock,
+  },
+}))
+
+vi.mock('../collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    onGraphImport: (handler: (payload: { nodes: Node[], edges: Edge[] }) => void) => {
+      collaborationBridge.graphImportHandler = handler
+      return vi.fn()
+    },
+    onHistoryAction: (handler: (payload: unknown) => void) => {
+      collaborationBridge.historyActionHandler = handler
+      return vi.fn()
+    },
+  },
+}))
+
+vi.mock('../comment-manager', () => ({
+  default: () => <div data-testid="comment-manager" />,
+}))
+
+vi.mock('../comment/cursor', () => ({
+  CommentCursor: () => <div data-testid="comment-cursor" />,
+}))
+
+vi.mock('../comment/comment-input', () => ({
+  CommentInput: ({ disabled, onCancel }: { disabled?: boolean, onCancel?: () => void }) => (
+    <button
+      type="button"
+      data-testid={disabled ? 'comment-input-preview' : 'comment-input-active'}
+      onClick={onCancel}
+    >
+      comment-input
+    </button>
+  ),
+}))
+
+vi.mock('../comment/comment-icon', () => ({
+  CommentIcon: ({
+    comment,
+    onClick,
+    onPositionUpdate,
+  }: {
+    comment: { id: string }
+    onClick?: () => void
+    onPositionUpdate?: (position: { elementX: number, elementY: number }) => void
+  }) => (
+    <button
+      type="button"
+      data-testid={`comment-icon-${comment.id}`}
+      onClick={() => {
+        onClick?.()
+        onPositionUpdate?.({ elementX: 1, elementY: 2 })
+      }}
+    >
+      icon
+    </button>
+  ),
+}))
+
+vi.mock('../comment/thread', () => ({
+  CommentThread: ({
+    onDelete,
+    onReplyDelete,
+    onNext,
+  }: {
+    onDelete?: () => void
+    onReplyDelete?: (replyId: string) => void
+    onNext?: () => void
+  }) => (
+    <div data-testid="comment-thread">
+      <button type="button" onClick={onDelete}>delete-thread</button>
+      <button type="button" onClick={() => onReplyDelete?.('reply-1')}>delete-reply</button>
+      <button type="button" onClick={onNext}>next-comment</button>
+    </div>
+  ),
+}))
+
+vi.mock('../hooks/use-workflow-comment', () => ({
+  useWorkflowComment: () => workflowCommentState,
+}))
+
+vi.mock('../base/confirm', () => ({
+  default: ({
+    isShow,
+    onConfirm,
+    onCancel,
+  }: {
+    isShow: boolean
+    onConfirm: () => void
+    onCancel: () => void
+  }) => isShow
+    ? (
+        <div data-testid="confirm-dialog">
+          <button type="button" onClick={onConfirm}>confirm</button>
+          <button type="button" onClick={onCancel}>cancel</button>
+        </div>
+      )
+    : null,
+}))
+
 vi.mock('../candidate-node', () => ({
   default: () => null,
 }))
@@ -254,6 +390,7 @@ vi.mock('../hooks', () => ({
   useWorkflowRefreshDraft: () => ({
     handleRefreshWorkflowDraft: vi.fn(),
   }),
+  useLeaderRestoreListener: vi.fn(),
 }))
 
 vi.mock('../hooks/use-workflow-search', () => ({
@@ -329,6 +466,14 @@ describe('Workflow edge event wiring', () => {
     vi.clearAllMocks()
     eventEmitterState.subscription = null
     reactFlowBridge.store = null
+    collaborationBridge.graphImportHandler = null
+    collaborationBridge.historyActionHandler = null
+    workflowCommentState.comments = []
+    workflowCommentState.pendingComment = null
+    workflowCommentState.activeComment = null
+    workflowCommentState.activeCommentLoading = false
+    workflowCommentState.replySubmitting = false
+    workflowCommentState.replyUpdating = false
   })
 
   it('should forward pane, node and edge-change events to workflow handlers when emitted by the canvas', async () => {
@@ -450,4 +595,98 @@ describe('Workflow edge event wiring', () => {
 
     expect(onConfirm).toHaveBeenCalledTimes(1)
   })
+
+  it('should sync graph import events and show history action toast', async () => {
+    renderSubject()
+
+    const importedNodes = [createInitializedNode('node-3', 480, 'Workflow node node-3')] as unknown as Node[]
+
+    act(() => {
+      collaborationBridge.graphImportHandler?.({
+        nodes: importedNodes,
+        edges: [],
+      })
+      collaborationBridge.historyActionHandler?.({ action: 'undo' })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Workflow node node-3')).toBeInTheDocument()
+      expect(toastInfoMock).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should render comment overlays and execute comment actions in comment mode', async () => {
+    workflowCommentState.comments = [
+      { id: 'comment-1', resolved: false },
+      { id: 'comment-2', resolved: false },
+    ]
+    workflowCommentState.activeComment = { id: 'comment-1', resolved: false }
+    workflowCommentState.pendingComment = { elementX: 20, elementY: 30 }
+
+    const { container, store } = renderSubject({
+      initialStoreState: {
+        controlMode: ControlMode.Comment,
+        showUserComments: true,
+        showResolvedComments: false,
+        isCommentPlacing: true,
+        pendingComment: null,
+        isCommentPreviewHovering: true,
+        mousePosition: {
+          pageX: 100,
+          pageY: 120,
+          elementX: 40,
+          elementY: 60,
+        },
+      },
+    })
+
+    const pane = getPane(container)
+    act(() => {
+      fireEvent.mouseMove(pane, { clientX: 150, clientY: 180 })
+    })
+
+    expect(screen.getByTestId('comment-cursor')).toBeInTheDocument()
+    expect(screen.getByTestId('comment-input-preview')).toBeInTheDocument()
+    expect(screen.getByTestId('comment-input-active')).toBeInTheDocument()
+    expect(screen.getByTestId('comment-icon-comment-1')).toBeInTheDocument()
+    expect(screen.getByTestId('comment-icon-comment-2')).toBeInTheDocument()
+    expect(screen.getByTestId('comment-thread')).toBeInTheDocument()
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'next-comment' }))
+    })
+    expect(workflowCommentState.handleCommentIconClick).toHaveBeenCalledWith({ id: 'comment-2', resolved: false })
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'delete-thread' }))
+    })
+    expect(store.getState().showConfirm).toBeDefined()
+
+    await act(async () => {
+      await store.getState().showConfirm?.onConfirm()
+    })
+    expect(workflowCommentState.handleCommentDelete).toHaveBeenCalledWith('comment-1')
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'delete-reply' }))
+    })
+    expect(store.getState().showConfirm).toBeDefined()
+    await act(async () => {
+      await store.getState().showConfirm?.onConfirm()
+    })
+    expect(workflowCommentState.handleCommentReplyDelete).toHaveBeenCalledWith('comment-1', 'reply-1')
+
+    const wheelEvent = new WheelEvent('wheel', {
+      cancelable: true,
+      ctrlKey: true,
+    })
+    act(() => {
+      window.dispatchEvent(wheelEvent)
+    })
+
+    const gestureEvent = new Event('gesturestart', { cancelable: true })
+    act(() => {
+      window.dispatchEvent(gestureEvent)
+    })
+  })
 })
diff --git a/web/app/components/workflow/candidate-node-main.tsx b/web/app/components/workflow/candidate-node-main.tsx
index 9df5510627..a3a62345ff 100644
--- a/web/app/components/workflow/candidate-node-main.tsx
+++ b/web/app/components/workflow/candidate-node-main.tsx
@@ -11,9 +11,9 @@ import {
 } from 'react'
 import {
   useReactFlow,
-  useStoreApi,
   useViewport,
 } from 'reactflow'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { CUSTOM_NODE } from './constants'
 import { useAutoGenerateWebhookUrl, useNodesInteractions, useNodesSyncDraft, useWorkflowHistory, WorkflowHistoryEvent } from './hooks'
 import CustomNode from './nodes'
@@ -32,7 +32,6 @@ type Props = {
 const CandidateNodeMain: FC<Props> = ({
   candidateNode,
 }) => {
-  const store = useStoreApi()
   const reactflow = useReactFlow()
   const workflowStore = useWorkflowStore()
   const mousePosition = useStore(s => s.mousePosition)
@@ -41,15 +40,12 @@ const CandidateNodeMain: FC<Props> = ({
   const { saveStateToHistory } = useWorkflowHistory()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const autoGenerateWebhookUrl = useAutoGenerateWebhookUrl()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   useEventListener('click', (e) => {
     e.preventDefault()
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
     const { screenToFlowPosition } = reactflow
-    const nodes = getNodes()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
     const newNodes = produce(nodes, (draft) => {
       draft.push({
diff --git a/web/app/components/workflow/collaboration/components/user-cursors.tsx b/web/app/components/workflow/collaboration/components/user-cursors.tsx
new file mode 100644
index 0000000000..4fbf491d0e
--- /dev/null
+++ b/web/app/components/workflow/collaboration/components/user-cursors.tsx
@@ -0,0 +1,78 @@
+import type { FC } from 'react'
+import type { CursorPosition, OnlineUser } from '@/app/components/workflow/collaboration/types/collaboration'
+import { useViewport } from 'reactflow'
+import { getUserColor } from '../utils/user-color'
+
+type UserCursorsProps = {
+  cursors: Record<string, CursorPosition>
+  myUserId: string | null
+  onlineUsers: OnlineUser[]
+}
+
+const UserCursors: FC<UserCursorsProps> = ({
+  cursors,
+  myUserId,
+  onlineUsers,
+}) => {
+  const viewport = useViewport()
+
+  const convertToScreenCoordinates = (cursor: CursorPosition) => {
+    // Convert world coordinates to screen coordinates using current viewport
+    const screenX = cursor.x * viewport.zoom + viewport.x
+    const screenY = cursor.y * viewport.zoom + viewport.y
+
+    return { x: screenX, y: screenY }
+  }
+  return (
+    <>
+      {Object.entries(cursors || {}).map(([userId, cursor]) => {
+        if (userId === myUserId)
+          return null
+
+        const userInfo = onlineUsers.find(user => user.user_id === userId)
+        const userName = userInfo?.username || `User ${userId.slice(-4)}`
+        const userColor = getUserColor(userId)
+        const screenPos = convertToScreenCoordinates(cursor)
+
+        return (
+          <div
+            key={userId}
+            className="pointer-events-none absolute z-[8] transition-all duration-150 ease-out"
+            style={{
+              left: screenPos.x,
+              top: screenPos.y,
+            }}
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="drop-shadow-md"
+            >
+              <path
+                d="M5 3L5 15L8 11.5L11 16L13 15L10 10.5L14 10.5L5 3Z"
+                fill={userColor}
+                stroke="white"
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+              />
+            </svg>
+
+            <div
+              className="absolute top-4 left-4 max-w-[120px] overflow-hidden rounded px-1.5 py-0.5 text-[11px] font-medium text-ellipsis whitespace-nowrap text-white shadow-sm"
+              style={{
+                backgroundColor: userColor,
+              }}
+            >
+              {userName}
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default UserCursors
diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts
new file mode 100644
index 0000000000..89888bf1cb
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts
@@ -0,0 +1,398 @@
+import type { LoroMap } from 'loro-crdt'
+import type { OnlineUser, RestoreRequestData } from '../../types/collaboration'
+import type { NoteNodeType } from '@/app/components/workflow/note-node/types'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import { LoroDoc } from 'loro-crdt'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { CollaborationManager } from '../collaboration-manager'
+import { webSocketClient } from '../websocket-manager'
+
+type ReactFlowStore = {
+  getState: () => {
+    getNodes: () => Node[]
+    setNodes: (nodes: Node[]) => void
+    getEdges: () => Edge[]
+    setEdges: (edges: Edge[]) => void
+  }
+}
+
+type UndoManagerLike = {
+  canUndo: () => boolean
+  canRedo: () => boolean
+  undo: () => boolean
+  redo: () => boolean
+  clear: () => void
+}
+
+type CollaborationManagerInternals = {
+  doc: LoroDoc | null
+  nodesMap: LoroMap | null
+  edgesMap: LoroMap | null
+  undoManager: UndoManagerLike | null
+  currentAppId: string | null
+  reactFlowStore: ReactFlowStore | null
+  leaderId: string | null
+  isLeader: boolean
+  graphViewActive: boolean | null
+  pendingInitialSync: boolean
+  onlineUsers: OnlineUser[]
+  graphImportLogs: unknown[]
+  setNodesAnomalyLogs: unknown[]
+  graphSyncDiagnostics: unknown[]
+  pendingImportLog: unknown | null
+}
+
+const getManagerInternals = (manager: CollaborationManager): CollaborationManagerInternals =>
+  manager as unknown as CollaborationManagerInternals
+
+const createNode = (id: string): Node => ({
+  id,
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.Start,
+    title: `Node-${id}`,
+    desc: '',
+  },
+})
+
+const createEdge = (id: string, source: string, target: string): Edge => ({
+  id,
+  source,
+  target,
+  type: 'default',
+  data: {
+    sourceType: BlockEnum.Start,
+    targetType: BlockEnum.End,
+  },
+})
+
+const createRestoreRequestData = (): RestoreRequestData => ({
+  versionId: 'version-1',
+  versionName: 'Version One',
+  initiatorUserId: 'user-1',
+  initiatorName: 'Alice',
+  graphData: {
+    nodes: [createNode('n-restore')],
+    edges: [],
+    viewport: { x: 1, y: 2, zoom: 0.5 },
+  },
+})
+
+const setupManagerWithDoc = () => {
+  const manager = new CollaborationManager()
+  const doc = new LoroDoc()
+  const internals = getManagerInternals(manager)
+  internals.doc = doc
+  internals.nodesMap = doc.getMap('nodes')
+  internals.edgesMap = doc.getMap('edges')
+  return { manager, internals }
+}
+
+describe('CollaborationManager logs and event helpers', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('refreshGraphSynchronously emits merged graph with local selected node state', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const node = createNode('n-1')
+    const edge = createEdge('e-1', 'n-1', 'n-2')
+
+    manager.setNodes([], [node])
+    manager.setEdges([], [edge])
+
+    internals.reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [{
+          ...node,
+          data: {
+            ...node.data,
+            selected: true,
+          },
+        }],
+        setNodes: vi.fn(),
+        getEdges: () => [edge],
+        setEdges: vi.fn(),
+      }),
+    }
+
+    const graphPayloads: Array<{ nodes: Node[], edges: Edge[] }> = []
+    manager.onGraphImport((graph) => {
+      graphPayloads.push(graph)
+    })
+
+    manager.refreshGraphSynchronously()
+
+    expect(graphPayloads).toHaveLength(1)
+    const payload = graphPayloads[0]
+    if (!payload)
+      throw new Error('graph import payload should exist')
+    expect(payload.nodes).toHaveLength(1)
+    expect(payload.edges).toHaveLength(1)
+    expect(payload.nodes[0]?.data.selected).toBe(true)
+  })
+
+  it('seeds the full reactflow graph before applying a partial local node update to an empty CRDT', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const startNode = createNode('n-start')
+    const noteNode: Node<NoteNodeType> = {
+      id: 'n-note',
+      type: 'custom-note',
+      position: { x: 100, y: 100 },
+      data: {
+        type: BlockEnum.Start,
+        title: '',
+        desc: '',
+        text: 'note',
+        theme: 'yellow',
+        author: 'Dify',
+        showAuthor: true,
+      },
+    }
+    const edge = createEdge('e-start-note', 'n-start', 'n-note')
+
+    const oldNodes = [startNode, noteNode]
+    const nextNodes: Node[] = [
+      startNode,
+      {
+        ...noteNode,
+        data: {
+          ...noteNode.data,
+          selected: true,
+        },
+      },
+    ]
+
+    internals.reactFlowStore = {
+      getState: () => ({
+        getNodes: () => oldNodes,
+        setNodes: vi.fn(),
+        getEdges: () => [edge],
+        setEdges: vi.fn(),
+      }),
+    }
+
+    manager.setNodes(oldNodes, nextNodes, 'test:partial-note-update')
+
+    expect(manager.getNodes().map(node => node.id).sort()).toEqual(['n-note', 'n-start'])
+    expect(manager.getEdges().map(currentEdge => currentEdge.id)).toEqual(['e-start-note'])
+  })
+
+  it('clearGraphImportLog clears logs and pending import snapshot', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    internals.graphImportLogs = [{ id: 1 }]
+    internals.setNodesAnomalyLogs = [{ id: 2 }]
+    internals.graphSyncDiagnostics = [{ id: 3 }]
+    internals.pendingImportLog = { id: 4 }
+
+    manager.clearGraphImportLog()
+
+    expect(manager.getGraphImportLog()).toEqual([])
+    expect(internals.setNodesAnomalyLogs).toEqual([])
+    expect(internals.graphSyncDiagnostics).toEqual([])
+    expect(internals.pendingImportLog).toBeNull()
+  })
+
+  it('downloadGraphImportLog exports a JSON snapshot and triggers browser download', async () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const node = createNode('n-export')
+    const edge = createEdge('e-export', 'n-export', 'n-target')
+
+    manager.setNodes([], [node])
+    manager.setEdges([], [edge])
+
+    internals.currentAppId = 'app-export'
+    internals.leaderId = 'leader-1'
+    internals.isLeader = true
+    internals.graphViewActive = true
+    internals.pendingInitialSync = false
+    internals.onlineUsers = [{ user_id: 'u-1', username: 'Alice', avatar: '', sid: 'sid-1' }]
+    internals.graphImportLogs = [{ timestamp: 1 }]
+    internals.setNodesAnomalyLogs = [{ timestamp: 2 }]
+    internals.graphSyncDiagnostics = [{ timestamp: 3 }]
+    internals.reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [createNode('rf-1'), createNode('rf-2')],
+        setNodes: vi.fn(),
+        getEdges: () => [createEdge('rf-e', 'rf-1', 'rf-2')],
+        setEdges: vi.fn(),
+      }),
+    }
+
+    const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:workflow-log')
+    const revokeObjectURLSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+    const anchor = document.createElement('a')
+    const clickSpy = vi.spyOn(anchor, 'click').mockImplementation(() => {})
+    const originalCreateElement = document.createElement.bind(document)
+    const createElementSpy = vi.spyOn(document, 'createElement').mockImplementation((tagName: string): HTMLElement => {
+      if (tagName === 'a')
+        return anchor
+      return originalCreateElement(tagName)
+    })
+
+    manager.downloadGraphImportLog()
+
+    expect(createObjectURLSpy).toHaveBeenCalledTimes(1)
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+    expect(anchor.download).toContain('workflow-graph-import-log-app-export-')
+    expect(anchor.download).toMatch(/\.json$/)
+    expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:workflow-log')
+
+    const blobArg = createObjectURLSpy.mock.calls[0]?.[0]
+    expect(blobArg).toBeInstanceOf(Blob)
+    const payload = JSON.parse(await (blobArg as Blob).text()) as {
+      appId: string | null
+      summary: {
+        logCount: number
+        setNodesAnomalyCount: number
+        syncDiagnosticCount: number
+        onlineUsersCount: number
+        crdtCounts: { nodes: number, edges: number }
+        reactFlowCounts: { nodes: number, edges: number }
+      }
+    }
+
+    expect(payload.appId).toBe('app-export')
+    expect(payload.summary.logCount).toBe(1)
+    expect(payload.summary.setNodesAnomalyCount).toBe(1)
+    expect(payload.summary.syncDiagnosticCount).toBe(1)
+    expect(payload.summary.onlineUsersCount).toBe(1)
+    expect(payload.summary.crdtCounts).toEqual({ nodes: 1, edges: 1 })
+    expect(payload.summary.reactFlowCounts).toEqual({ nodes: 2, edges: 1 })
+
+    createElementSpy.mockRestore()
+    clickSpy.mockRestore()
+  })
+
+  it('emits collaboration events only when current app is connected', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const sendSpy = vi.spyOn(
+      manager as unknown as { sendCollaborationEvent: (payload: unknown) => void },
+      'sendCollaborationEvent',
+    ).mockImplementation(() => {})
+    const isConnectedSpy = vi.spyOn(webSocketClient, 'isConnected').mockReturnValue(false)
+
+    manager.emitCommentsUpdate('app-1')
+    manager.emitHistoryAction('undo')
+    manager.emitRestoreRequest(createRestoreRequestData())
+    manager.emitRestoreIntent({
+      versionId: 'version-1',
+      versionName: 'Version One',
+      initiatorUserId: 'u-1',
+      initiatorName: 'Alice',
+    })
+    manager.emitRestoreComplete({ versionId: 'version-1', success: true })
+    expect(sendSpy).not.toHaveBeenCalled()
+
+    internals.currentAppId = 'app-1'
+
+    manager.emitCommentsUpdate('app-1')
+    manager.emitHistoryAction('undo')
+    manager.emitRestoreRequest(createRestoreRequestData())
+    expect(sendSpy).not.toHaveBeenCalled()
+
+    isConnectedSpy.mockReturnValue(true)
+    manager.emitCommentsUpdate('app-1')
+    manager.emitHistoryAction('redo')
+    manager.emitRestoreRequest(createRestoreRequestData())
+    manager.emitRestoreIntent({
+      versionId: 'version-2',
+      initiatorUserId: 'u-2',
+      initiatorName: 'Bob',
+    })
+    manager.emitRestoreComplete({ versionId: 'version-2', success: false, error: 'failed' })
+
+    const eventTypes = sendSpy.mock.calls.map(call => (
+      (call[0] as { type: string }).type
+    ))
+    expect(eventTypes).toEqual([
+      'comments_update',
+      'workflow_history_action',
+      'workflow_restore_request',
+      'workflow_restore_intent',
+      'workflow_restore_complete',
+    ])
+  })
+
+  it('returns leader state through public getters', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    internals.leaderId = 'leader-123'
+    internals.isLeader = true
+
+    expect(manager.getLeaderId()).toBe('leader-123')
+    expect(manager.getIsLeader()).toBe(true)
+  })
+
+  it('undo and redo apply CRDT graph to ReactFlow store and emit undo/redo state', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const updatedNode = createNode('n-after-undo-redo')
+    const updatedEdge = createEdge('e-after-undo-redo', 'n-after-undo-redo', 'n-target')
+    internals.nodesMap?.set(updatedNode.id, updatedNode as unknown as Record<string, unknown>)
+    internals.edgesMap?.set(updatedEdge.id, updatedEdge as unknown as Record<string, unknown>)
+
+    const setNodesSpy = vi.fn()
+    const setEdgesSpy = vi.fn()
+    internals.reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [createNode('old-node')],
+        setNodes: setNodesSpy,
+        getEdges: () => [createEdge('old-edge', 'old-node', 'old-target')],
+        setEdges: setEdgesSpy,
+      }),
+    }
+
+    const undoManager: UndoManagerLike = {
+      canUndo: vi.fn(() => true),
+      canRedo: vi.fn(() => true),
+      undo: vi.fn(() => true),
+      redo: vi.fn(() => true),
+      clear: vi.fn(),
+    }
+    internals.undoManager = undoManager
+
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((callback: FrameRequestCallback) => {
+      callback(0)
+      return 1
+    })
+
+    const historyStates: Array<{ canUndo: boolean, canRedo: boolean }> = []
+    manager.onUndoRedoStateChange((state) => {
+      historyStates.push(state)
+    })
+
+    expect(manager.undo()).toBe(true)
+    expect(manager.redo()).toBe(true)
+    expect(setNodesSpy).toHaveBeenCalledTimes(2)
+    expect(setEdgesSpy).toHaveBeenCalledTimes(2)
+    expect(historyStates).toEqual([
+      { canUndo: true, canRedo: true },
+      { canUndo: true, canRedo: true },
+    ])
+
+    rafSpy.mockRestore()
+  })
+
+  it('exposes undo stack state helpers and supports clearing the stack', () => {
+    const { manager, internals } = setupManagerWithDoc()
+
+    expect(manager.canUndo()).toBe(false)
+    expect(manager.canRedo()).toBe(false)
+    expect(manager.undo()).toBe(false)
+    expect(manager.redo()).toBe(false)
+
+    const undoManager: UndoManagerLike = {
+      canUndo: vi.fn(() => false),
+      canRedo: vi.fn(() => true),
+      undo: vi.fn(() => false),
+      redo: vi.fn(() => false),
+      clear: vi.fn(),
+    }
+    internals.undoManager = undoManager
+
+    expect(manager.canUndo()).toBe(false)
+    expect(manager.canRedo()).toBe(true)
+    manager.clearUndoStack()
+    expect(undoManager.clear).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts
new file mode 100644
index 0000000000..1368851783
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts
@@ -0,0 +1,331 @@
+import type { LoroMap } from 'loro-crdt/base64'
+import type { Node } from '@/app/components/workflow/types'
+import { LoroDoc } from 'loro-crdt/base64'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { CollaborationManager } from '../collaboration-manager'
+
+const NODE_ID = 'node-1'
+const LLM_NODE_ID = 'llm-node'
+const PARAM_NODE_ID = 'parameter-node'
+
+type WorkflowVariable = {
+  variable: string
+  label: string
+  type: string
+  required: boolean
+  default: string
+  max_length: number
+  placeholder: string
+  options: string[]
+  hint: string
+}
+
+type PromptTemplateItem = {
+  id: string
+  role: string
+  text: string
+}
+
+type ParameterItem = {
+  description: string
+  name: string
+  required: boolean
+  type: string
+}
+
+type StartNodeData = {
+  variables: WorkflowVariable[]
+}
+
+type LLMNodeData = {
+  model: {
+    mode: string
+    name: string
+    provider: string
+    completion_params: {
+      temperature: number
+    }
+  }
+  context: {
+    enabled: boolean
+    variable_selector: string[]
+  }
+  vision: {
+    enabled: boolean
+  }
+  prompt_template: PromptTemplateItem[]
+}
+
+type ParameterExtractorNodeData = {
+  model: {
+    mode: string
+    name: string
+    provider: string
+    completion_params: {
+      temperature: number
+    }
+  }
+  parameters: ParameterItem[]
+  query: unknown[]
+  reasoning_mode: string
+  vision: {
+    enabled: boolean
+  }
+}
+
+type CollaborationManagerInternals = {
+  doc: LoroDoc
+  nodesMap: LoroMap
+  edgesMap: LoroMap
+  syncNodes: (oldNodes: Node[], newNodes: Node[]) => void
+}
+
+const createNode = (variables: string[]): Node<StartNodeData> => ({
+  id: NODE_ID,
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.Start,
+    title: 'Start',
+    desc: '',
+    variables: variables.map(name => ({
+      variable: name,
+      label: name,
+      type: 'text-input',
+      required: true,
+      default: '',
+      max_length: 48,
+      placeholder: '',
+      options: [],
+      hint: '',
+    })),
+  },
+})
+
+const createLLMNode = (templates: PromptTemplateItem[]): Node<LLMNodeData> => ({
+  id: LLM_NODE_ID,
+  type: 'custom',
+  position: { x: 200, y: 200 },
+  data: {
+    type: BlockEnum.LLM,
+    title: 'LLM',
+    desc: '',
+    selected: false,
+    model: {
+      mode: 'chat',
+      name: 'gemini-2.5-pro',
+      provider: 'langgenius/gemini/google',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    context: {
+      enabled: false,
+      variable_selector: [],
+    },
+    vision: {
+      enabled: false,
+    },
+    prompt_template: templates,
+  },
+})
+
+const createParameterExtractorNode = (parameters: ParameterItem[]): Node<ParameterExtractorNodeData> => ({
+  id: PARAM_NODE_ID,
+  type: 'custom',
+  position: { x: 400, y: 120 },
+  data: {
+    type: BlockEnum.ParameterExtractor,
+    title: 'ParameterExtractor',
+    desc: '',
+    selected: true,
+    model: {
+      mode: 'chat',
+      name: '',
+      provider: '',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    query: [],
+    reasoning_mode: 'prompt',
+    parameters,
+    vision: {
+      enabled: false,
+    },
+  },
+})
+
+const getManagerInternals = (manager: CollaborationManager): CollaborationManagerInternals =>
+  manager as unknown as CollaborationManagerInternals
+
+const getManager = (doc: LoroDoc) => {
+  const manager = new CollaborationManager()
+  const internals = getManagerInternals(manager)
+  internals.doc = doc
+  internals.nodesMap = doc.getMap('nodes')
+  internals.edgesMap = doc.getMap('edges')
+  return manager
+}
+
+const deepClone = <T>(value: T): T => JSON.parse(JSON.stringify(value))
+
+const syncNodes = (manager: CollaborationManager, previous: Node[], next: Node[]) => {
+  const internals = getManagerInternals(manager)
+  internals.syncNodes(previous, next)
+}
+
+const exportNodes = (manager: CollaborationManager) => manager.getNodes()
+
+describe('Loro merge behavior smoke test', () => {
+  it('inspects concurrent edits after merge', () => {
+    const docA = new LoroDoc()
+    const managerA = getManager(docA)
+    syncNodes(managerA, [], [createNode(['a'])])
+
+    const snapshot = docA.export({ mode: 'snapshot' })
+
+    const docB = LoroDoc.fromSnapshot(snapshot)
+    const managerB = getManager(docB)
+
+    syncNodes(managerA, [createNode(['a'])], [createNode(['a', 'b'])])
+    syncNodes(managerB, [createNode(['a'])], [createNode(['a', 'c'])])
+
+    const updateForA = docB.export({ mode: 'update', from: docA.version() })
+    docA.import(updateForA)
+
+    const updateForB = docA.export({ mode: 'update', from: docB.version() })
+    docB.import(updateForB)
+
+    const finalA = exportNodes(managerA)
+    const finalB = exportNodes(managerB)
+    expect(finalA.length).toBe(1)
+    expect(finalB.length).toBe(1)
+  })
+
+  it('merges prompt template insertions and edits across replicas', () => {
+    const baseTemplate = [
+      {
+        id: 'system-1',
+        role: 'system',
+        text: 'base instruction',
+      },
+    ]
+
+    const docA = new LoroDoc()
+    const managerA = getManager(docA)
+    syncNodes(managerA, [], [createLLMNode(deepClone(baseTemplate))])
+
+    const snapshot = docA.export({ mode: 'snapshot' })
+    const docB = LoroDoc.fromSnapshot(snapshot)
+    const managerB = getManager(docB)
+
+    const additionTemplate = [
+      ...baseTemplate,
+      {
+        id: 'user-1',
+        role: 'user',
+        text: 'hello from docA',
+      },
+    ]
+    syncNodes(managerA, [createLLMNode(deepClone(baseTemplate))], [createLLMNode(deepClone(additionTemplate))])
+
+    const editedTemplate = [
+      {
+        id: 'system-1',
+        role: 'system',
+        text: 'updated by docB',
+      },
+    ]
+    syncNodes(managerB, [createLLMNode(deepClone(baseTemplate))], [createLLMNode(deepClone(editedTemplate))])
+
+    const updateForA = docB.export({ mode: 'update', from: docA.version() })
+    docA.import(updateForA)
+
+    const updateForB = docA.export({ mode: 'update', from: docB.version() })
+    docB.import(updateForB)
+
+    const finalA = exportNodes(managerA).find(node => node.id === LLM_NODE_ID) as Node<LLMNodeData> | undefined
+    const finalB = exportNodes(managerB).find(node => node.id === LLM_NODE_ID) as Node<LLMNodeData> | undefined
+
+    expect(finalA).toBeDefined()
+    expect(finalB).toBeDefined()
+
+    const expectedTemplates = [
+      {
+        id: 'system-1',
+        role: 'system',
+        text: 'updated by docB',
+      },
+      {
+        id: 'user-1',
+        role: 'user',
+        text: 'hello from docA',
+      },
+    ]
+
+    expect(finalA!.data.prompt_template).toEqual(expectedTemplates)
+    expect(finalB!.data.prompt_template).toEqual(expectedTemplates)
+  })
+
+  it('converges when parameter lists are edited concurrently', () => {
+    const baseParameters = [
+      { description: 'bb', name: 'aa', required: false, type: 'string' },
+      { description: 'dd', name: 'cc', required: false, type: 'string' },
+    ]
+
+    const docA = new LoroDoc()
+    const managerA = getManager(docA)
+    syncNodes(managerA, [], [createParameterExtractorNode(deepClone(baseParameters))])
+
+    const snapshot = docA.export({ mode: 'snapshot' })
+    const docB = LoroDoc.fromSnapshot(snapshot)
+    const managerB = getManager(docB)
+
+    const docAUpdate = [
+      { description: 'bb updated by A', name: 'aa', required: true, type: 'string' },
+      { description: 'dd', name: 'cc', required: false, type: 'string' },
+      { description: 'new from A', name: 'ee', required: false, type: 'number' },
+    ]
+    syncNodes(
+      managerA,
+      [createParameterExtractorNode(deepClone(baseParameters))],
+      [createParameterExtractorNode(deepClone(docAUpdate))],
+    )
+
+    const docBUpdate = [
+      { description: 'bb', name: 'aa', required: false, type: 'string' },
+      { description: 'dd updated by B', name: 'cc', required: true, type: 'string' },
+    ]
+    syncNodes(
+      managerB,
+      [createParameterExtractorNode(deepClone(baseParameters))],
+      [createParameterExtractorNode(deepClone(docBUpdate))],
+    )
+
+    const updateForA = docB.export({ mode: 'update', from: docA.version() })
+    docA.import(updateForA)
+
+    const updateForB = docA.export({ mode: 'update', from: docB.version() })
+    docB.import(updateForB)
+
+    const finalA = exportNodes(managerA).find(node => node.id === PARAM_NODE_ID) as
+      | Node<ParameterExtractorNodeData>
+      | undefined
+    const finalB = exportNodes(managerB).find(node => node.id === PARAM_NODE_ID) as
+      | Node<ParameterExtractorNodeData>
+      | undefined
+
+    expect(finalA).toBeDefined()
+    expect(finalB).toBeDefined()
+
+    const expectedParameters = [
+      { description: 'bb updated by A', name: 'aa', required: true, type: 'string' },
+      { description: 'dd updated by B', name: 'cc', required: true, type: 'string' },
+      { description: 'new from A', name: 'ee', required: false, type: 'number' },
+    ]
+
+    expect(finalA!.data.parameters).toEqual(expectedParameters)
+    expect(finalB!.data.parameters).toEqual(expectedParameters)
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts
new file mode 100644
index 0000000000..6768e5b4e2
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts
@@ -0,0 +1,1136 @@
+import type { Socket } from 'socket.io-client'
+import type {
+  CollaborationUpdate,
+  NodePanelPresenceMap,
+  OnlineUser,
+  RestoreCompleteData,
+  RestoreIntentData,
+} from '../../types/collaboration'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import { LoroDoc, LoroMap } from 'loro-crdt'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { CollaborationManager } from '../collaboration-manager'
+import { webSocketClient } from '../websocket-manager'
+
+type ReactFlowStore = {
+  getState: () => {
+    getNodes: () => Node[]
+    setNodes: (nodes: Node[]) => void
+    getEdges: () => Edge[]
+    setEdges: (edges: Edge[]) => void
+  }
+}
+
+type LoroSubscribeEvent = {
+  by?: string
+}
+
+type UndoManagerLike = {
+  canUndo: () => boolean
+  canRedo: () => boolean
+  undo: () => boolean
+  redo: () => boolean
+  clear: () => void
+}
+
+type MockSocket = {
+  id: string
+  connected: boolean
+  emit: ReturnType<typeof vi.fn>
+  on: ReturnType<typeof vi.fn>
+  off: ReturnType<typeof vi.fn>
+  trigger: (event: string, ...args: unknown[]) => void
+}
+
+type CollaborationManagerInternals = {
+  doc: LoroDoc | null
+  nodesMap: LoroMap | null
+  edgesMap: LoroMap | null
+  undoManager: UndoManagerLike | null
+  activeConnections: Set<string>
+  currentAppId: string | null
+  reactFlowStore: ReactFlowStore | null
+  eventEmitter: {
+    emit: (event: string, ...args: unknown[]) => void
+  }
+  isUndoRedoInProgress: boolean
+  isLeader: boolean
+  leaderId: string | null
+  pendingInitialSync: boolean
+  pendingGraphImportEmit: boolean
+  rejoinInProgress: boolean
+  onlineUsers: OnlineUser[]
+  nodePanelPresence: NodePanelPresenceMap
+  cursors: Record<string, { x: number, y: number, userId: string, timestamp: number }>
+  graphSyncDiagnostics: unknown[]
+  setNodesAnomalyLogs: unknown[]
+  handleSessionUnauthorized: () => void
+  forceDisconnect: () => void
+  setupSocketEventListeners: (socket: Socket) => void
+  setupSubscriptions: () => void
+  scheduleGraphImportEmit: () => void
+  emitGraphResyncRequest: () => void
+  broadcastCurrentGraph: () => void
+  requestInitialSyncIfNeeded: () => void
+  cleanupNodePanelPresence: (activeClientIds: Set<string>) => void
+  recordGraphSyncDiagnostic: (
+    stage: 'nodes_subscribe' | 'edges_subscribe' | 'nodes_import_apply' | 'edges_import_apply' | 'schedule_graph_import_emit' | 'graph_import_emit' | 'start_import_log' | 'finalize_import_log',
+    status: 'triggered' | 'skipped' | 'applied' | 'queued' | 'emitted' | 'snapshot',
+    reason?: string,
+    details?: Record<string, unknown>,
+  ) => void
+  captureSetNodesAnomaly: (oldNodes: Node[], newNodes: Node[], source: string) => void
+}
+
+const getManagerInternals = (manager: CollaborationManager): CollaborationManagerInternals =>
+  manager as unknown as CollaborationManagerInternals
+
+const createNode = (id: string, title = `Node-${id}`): Node => ({
+  id,
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.Start,
+    title,
+    desc: '',
+  },
+})
+
+const createEdge = (id: string, source: string, target: string): Edge => ({
+  id,
+  source,
+  target,
+  type: 'custom',
+  data: {
+    sourceType: BlockEnum.Start,
+    targetType: BlockEnum.End,
+  },
+})
+
+const createMockSocket = (id = 'socket-1'): MockSocket => {
+  const handlers = new Map<string, (...args: unknown[]) => void>()
+
+  return {
+    id,
+    connected: true,
+    emit: vi.fn(),
+    on: vi.fn((event: string, handler: (...args: unknown[]) => void) => {
+      handlers.set(event, handler)
+    }),
+    off: vi.fn(),
+    trigger: (event: string, ...args: unknown[]) => {
+      const handler = handlers.get(event)
+      if (handler)
+        handler(...args)
+    },
+  }
+}
+
+const setupManagerWithDoc = () => {
+  const manager = new CollaborationManager()
+  const doc = new LoroDoc()
+  const internals = getManagerInternals(manager)
+  internals.doc = doc
+  internals.nodesMap = doc.getMap('nodes')
+  internals.edgesMap = doc.getMap('edges')
+  return { manager, internals }
+}
+
+describe('CollaborationManager socket and subscription behavior', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('emits cursor/sync/workflow events via collaboration_event when connected', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-connected')
+
+    internals.currentAppId = 'app-1'
+    vi.spyOn(webSocketClient, 'isConnected').mockReturnValue(true)
+    vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(socket as unknown as Socket)
+
+    manager.emitCursorMove({ x: 11, y: 22, userId: 'u-1', timestamp: Date.now() })
+    manager.emitSyncRequest()
+    manager.emitWorkflowUpdate('wf-1')
+
+    expect(socket.emit).toHaveBeenCalledTimes(3)
+    const payloads = socket.emit.mock.calls.map(call => call[1] as { type: string, data: Record<string, unknown> })
+    expect(payloads.map(item => item.type)).toEqual(['mouse_move', 'sync_request', 'workflow_update'])
+    expect(payloads[0]?.data).toMatchObject({ x: 11, y: 22 })
+    expect(payloads[2]?.data).toMatchObject({ appId: 'wf-1' })
+  })
+
+  it('tries to rejoin on unauthorized and forces disconnect on unauthorized ack', () => {
+    const { internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-rejoin')
+    const getSocketSpy = vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(socket as unknown as Socket)
+    const forceDisconnectSpy = vi.spyOn(internals, 'forceDisconnect').mockImplementation(() => undefined)
+
+    internals.currentAppId = 'app-rejoin'
+    internals.rejoinInProgress = true
+    internals.handleSessionUnauthorized()
+    expect(socket.emit).not.toHaveBeenCalled()
+
+    internals.rejoinInProgress = false
+    internals.handleSessionUnauthorized()
+    expect(socket.emit).toHaveBeenCalledWith(
+      'user_connect',
+      { workflow_id: 'app-rejoin' },
+      expect.any(Function),
+    )
+
+    const ack = socket.emit.mock.calls[0]?.[2] as ((...ackArgs: unknown[]) => void) | undefined
+    expect(ack).toBeDefined()
+    ack?.({ msg: 'unauthorized' })
+
+    expect(forceDisconnectSpy).toHaveBeenCalledTimes(1)
+    expect(internals.rejoinInProgress).toBe(false)
+    expect(getSocketSpy).toHaveBeenCalled()
+  })
+
+  it('routes collaboration_update payloads to corresponding event channels', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-events')
+
+    const broadcastSpy = vi.spyOn(internals, 'broadcastCurrentGraph').mockImplementation(() => undefined)
+    internals.isLeader = true
+    internals.setupSocketEventListeners(socket as unknown as Socket)
+
+    const varsFeatureHandler = vi.fn()
+    const appStateHandler = vi.fn()
+    const appMetaHandler = vi.fn()
+    const appPublishHandler = vi.fn()
+    const mcpHandler = vi.fn()
+    const workflowUpdateHandler = vi.fn()
+    const commentsHandler = vi.fn()
+    const restoreRequestHandler = vi.fn()
+    const restoreIntentHandler = vi.fn()
+    const restoreCompleteHandler = vi.fn()
+    const historyHandler = vi.fn()
+    const syncRequestHandler = vi.fn()
+    let latestPresence: NodePanelPresenceMap | null = null
+    let latestCursors: Record<string, unknown> | null = null
+
+    manager.onVarsAndFeaturesUpdate(varsFeatureHandler)
+    manager.onAppStateUpdate(appStateHandler)
+    manager.onAppMetaUpdate(appMetaHandler)
+    manager.onAppPublishUpdate(appPublishHandler)
+    manager.onMcpServerUpdate(mcpHandler)
+    manager.onWorkflowUpdate(workflowUpdateHandler)
+    manager.onCommentsUpdate(commentsHandler)
+    manager.onRestoreRequest(restoreRequestHandler)
+    manager.onRestoreIntent(restoreIntentHandler)
+    manager.onRestoreComplete(restoreCompleteHandler)
+    manager.onHistoryAction(historyHandler)
+    manager.onSyncRequest(syncRequestHandler)
+    manager.onNodePanelPresenceUpdate((presence) => {
+      latestPresence = presence
+    })
+    manager.onCursorUpdate((cursors) => {
+      latestCursors = cursors as Record<string, unknown>
+    })
+
+    const baseUpdate: Pick<CollaborationUpdate, 'userId' | 'timestamp'> = {
+      userId: 'u-1',
+      timestamp: 1000,
+    }
+
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'mouse_move',
+      data: { x: 1, y: 2 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'vars_and_features_update',
+      data: { value: 1 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'app_state_update',
+      data: { value: 2 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'app_meta_update',
+      data: { value: 3 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'app_publish_update',
+      data: { value: 4 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'mcp_server_update',
+      data: { value: 5 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'workflow_update',
+      data: { appId: 'wf', timestamp: 9 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'comments_update',
+      data: { appId: 'wf', timestamp: 10 },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'node_panel_presence',
+      data: {
+        nodeId: 'n-1',
+        action: 'open',
+        user: { userId: 'u-1', username: 'Alice' },
+        clientId: 'socket-events',
+        timestamp: 11,
+      },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'sync_request',
+      data: {},
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'graph_resync_request',
+      data: {},
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'workflow_restore_request',
+      data: { versionId: 'v1', initiatorUserId: 'u-1', initiatorName: 'Alice', graphData: { nodes: [], edges: [] } } as unknown as Record<string, unknown>,
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'workflow_restore_intent',
+      data: { versionId: 'v1', initiatorUserId: 'u-1', initiatorName: 'Alice' } as unknown as Record<string, unknown>,
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'workflow_restore_complete',
+      data: { versionId: 'v1', success: true } as unknown as Record<string, unknown>,
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'workflow_history_action',
+      data: { action: 'undo' },
+    } satisfies CollaborationUpdate)
+    socket.trigger('collaboration_update', {
+      ...baseUpdate,
+      type: 'workflow_history_action',
+      data: {},
+    } satisfies CollaborationUpdate)
+
+    expect(latestCursors).toMatchObject({
+      'u-1': { x: 1, y: 2, userId: 'u-1' },
+    })
+    expect(varsFeatureHandler).toHaveBeenCalledTimes(1)
+    expect(appStateHandler).toHaveBeenCalledTimes(1)
+    expect(appMetaHandler).toHaveBeenCalledTimes(1)
+    expect(appPublishHandler).toHaveBeenCalledTimes(1)
+    expect(mcpHandler).toHaveBeenCalledTimes(1)
+    expect(workflowUpdateHandler).toHaveBeenCalledWith({ appId: 'wf', timestamp: 9 })
+    expect(commentsHandler).toHaveBeenCalledWith({ appId: 'wf', timestamp: 10 })
+    expect(latestPresence).toMatchObject({ 'n-1': { 'socket-events': { userId: 'u-1' } } })
+    expect(syncRequestHandler).toHaveBeenCalledTimes(1)
+    expect(broadcastSpy).toHaveBeenCalledTimes(1)
+    expect(restoreRequestHandler).toHaveBeenCalledTimes(1)
+    expect(restoreIntentHandler).toHaveBeenCalledWith({ versionId: 'v1', initiatorUserId: 'u-1', initiatorName: 'Alice' } satisfies RestoreIntentData)
+    expect(restoreCompleteHandler).toHaveBeenCalledWith({ versionId: 'v1', success: true } satisfies RestoreCompleteData)
+    expect(historyHandler).toHaveBeenCalledWith({ action: 'undo', userId: 'u-1' })
+  })
+
+  it('processes online_users/status/connect/disconnect/error socket events', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-state')
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    const emitGraphResyncRequestSpy = vi.spyOn(internals, 'emitGraphResyncRequest').mockImplementation(() => undefined)
+
+    internals.cursors = {
+      stale: {
+        x: 1,
+        y: 1,
+        userId: 'offline-user',
+        timestamp: 1,
+      },
+    }
+    internals.nodePanelPresence = {
+      'n-1': {
+        'offline-client': {
+          userId: 'offline-user',
+          username: 'Offline',
+          clientId: 'offline-client',
+          timestamp: 1,
+        },
+      },
+    }
+
+    internals.setupSocketEventListeners(socket as unknown as Socket)
+
+    const onlineUsersHandler = vi.fn()
+    const leaderChangeHandler = vi.fn()
+    const stateChanges: Array<{ isConnected: boolean, disconnectReason?: string, error?: string }> = []
+    manager.onOnlineUsersUpdate(onlineUsersHandler)
+    manager.onLeaderChange(leaderChangeHandler)
+    manager.onStateChange((state) => {
+      stateChanges.push(state as { isConnected: boolean, disconnectReason?: string, error?: string })
+    })
+
+    socket.trigger('online_users', { users: 'invalid-structure' })
+    expect(warnSpy).toHaveBeenCalled()
+
+    socket.trigger('online_users', {
+      users: [{
+        user_id: 'online-user',
+        username: 'Alice',
+        avatar: '',
+        sid: 'socket-state',
+      }],
+      leader: 'leader-1',
+    })
+
+    expect(onlineUsersHandler).toHaveBeenCalledWith([{
+      user_id: 'online-user',
+      username: 'Alice',
+      avatar: '',
+      sid: 'socket-state',
+    } satisfies OnlineUser])
+    expect(internals.cursors).toEqual({})
+    expect(internals.nodePanelPresence).toEqual({})
+    expect(internals.leaderId).toBe('leader-1')
+
+    socket.trigger('status', { isLeader: 'invalid' })
+    expect(warnSpy).toHaveBeenCalled()
+
+    internals.pendingInitialSync = true
+    internals.isLeader = false
+    socket.trigger('status', { isLeader: false })
+    expect(emitGraphResyncRequestSpy).toHaveBeenCalledTimes(1)
+    expect(internals.pendingInitialSync).toBe(false)
+
+    socket.trigger('status', { isLeader: true })
+    expect(leaderChangeHandler).toHaveBeenCalledWith(true)
+
+    socket.trigger('connect')
+    socket.trigger('disconnect', 'transport close')
+    socket.trigger('connect_error', new Error('connect failed'))
+    socket.trigger('error', new Error('generic socket error'))
+
+    expect(stateChanges).toEqual([
+      { isConnected: true },
+      { isConnected: false, disconnectReason: 'transport close' },
+      { isConnected: false, error: 'connect failed' },
+    ])
+    expect(errorSpy).toHaveBeenCalled()
+  })
+
+  it('removes stale node panel viewers by inactive client even when the same user is still online in another tab', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-tab-b')
+
+    internals.nodePanelPresence = {
+      'n-1': {
+        'socket-tab-a': {
+          userId: 'u-1',
+          username: 'Alice',
+          clientId: 'socket-tab-a',
+          timestamp: 1,
+        },
+        'socket-tab-b': {
+          userId: 'u-1',
+          username: 'Alice',
+          clientId: 'socket-tab-b',
+          timestamp: 2,
+        },
+      },
+    }
+
+    const presenceUpdates: NodePanelPresenceMap[] = []
+    manager.onNodePanelPresenceUpdate((presence) => {
+      presenceUpdates.push(presence)
+    })
+
+    internals.setupSocketEventListeners(socket as unknown as Socket)
+
+    socket.trigger('online_users', {
+      users: [{
+        user_id: 'u-1',
+        username: 'Alice',
+        avatar: '',
+        sid: 'socket-tab-b',
+      }],
+    })
+
+    expect(internals.nodePanelPresence).toEqual({
+      'n-1': {
+        'socket-tab-b': {
+          userId: 'u-1',
+          username: 'Alice',
+          clientId: 'socket-tab-b',
+          timestamp: 2,
+        },
+      },
+    })
+    expect(presenceUpdates.at(-1)).toEqual({
+      'n-1': {
+        'socket-tab-b': {
+          userId: 'u-1',
+          username: 'Alice',
+          clientId: 'socket-tab-b',
+          timestamp: 2,
+        },
+      },
+    })
+  })
+
+  it('setupSubscriptions applies import updates and emits merged graph payload', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((callback: FrameRequestCallback) => {
+      callback(0)
+      return 1
+    })
+    const initialNode = {
+      ...createNode('n-1', 'Initial'),
+      data: {
+        ...createNode('n-1', 'Initial').data,
+        selected: false,
+      },
+    }
+    const remoteNode = {
+      ...initialNode,
+      data: {
+        ...initialNode.data,
+        title: 'RemoteTitle',
+      },
+    }
+    const edge = createEdge('e-1', 'n-1', 'n-2')
+
+    manager.setNodes([], [initialNode])
+    manager.setEdges([], [edge])
+    manager.setNodes([initialNode], [remoteNode])
+
+    let reactFlowNodes: Node[] = [{
+      ...initialNode,
+      data: ({
+        ...initialNode.data,
+        selected: true,
+        _localMeta: 'keep-me',
+      } as Node['data'] & Record<string, unknown>),
+    }]
+    let reactFlowEdges: Edge[] = [edge]
+    const setNodesSpy = vi.fn((nodes: Node[]) => {
+      reactFlowNodes = nodes
+    })
+    const setEdgesSpy = vi.fn((edges: Edge[]) => {
+      reactFlowEdges = edges
+    })
+    internals.reactFlowStore = {
+      getState: () => ({
+        getNodes: () => reactFlowNodes,
+        setNodes: setNodesSpy,
+        getEdges: () => reactFlowEdges,
+        setEdges: setEdgesSpy,
+      }),
+    }
+
+    let nodesSubscribeHandler: (event: LoroSubscribeEvent) => void = () => {}
+    let edgesSubscribeHandler: (event: LoroSubscribeEvent) => void = () => {}
+    vi.spyOn(internals.nodesMap as object as { subscribe: (handler: (event: LoroSubscribeEvent) => void) => void }, 'subscribe')
+      .mockImplementation((handler: (event: LoroSubscribeEvent) => void) => {
+        nodesSubscribeHandler = handler
+      })
+    vi.spyOn(internals.edgesMap as object as { subscribe: (handler: (event: LoroSubscribeEvent) => void) => void }, 'subscribe')
+      .mockImplementation((handler: (event: LoroSubscribeEvent) => void) => {
+        edgesSubscribeHandler = handler
+      })
+
+    const importedGraphs: Array<{ nodes: Node[], edges: Edge[] }> = []
+    manager.onGraphImport((payload) => {
+      importedGraphs.push(payload)
+    })
+
+    internals.setupSubscriptions()
+    nodesSubscribeHandler({ by: 'local' })
+    nodesSubscribeHandler({ by: 'import' })
+    edgesSubscribeHandler({ by: 'import' })
+
+    expect(setNodesSpy).toHaveBeenCalled()
+    expect(setEdgesSpy).toHaveBeenCalled()
+    expect(importedGraphs.length).toBeGreaterThan(0)
+    const importedGraph = importedGraphs.at(-1)
+    if (!importedGraph)
+      throw new Error('imported graph should exist')
+    expect(importedGraph.nodes[0]?.data).toMatchObject({
+      title: 'RemoteTitle',
+      selected: true,
+      _localMeta: 'keep-me',
+    })
+
+    internals.pendingGraphImportEmit = true
+    internals.scheduleGraphImportEmit()
+    expect(internals.pendingGraphImportEmit).toBe(true)
+
+    internals.reactFlowStore = null
+    nodesSubscribeHandler({ by: 'import' })
+
+    rafSpy.mockRestore()
+  })
+
+  it('respects diagnostic and anomaly log limits', () => {
+    const { internals } = setupManagerWithDoc()
+    const oldNode = createNode('old')
+
+    for (let i = 0; i < 401; i += 1) {
+      internals.recordGraphSyncDiagnostic('nodes_subscribe', 'triggered', undefined, { index: i })
+    }
+    for (let i = 0; i < 101; i += 1) {
+      internals.captureSetNodesAnomaly([oldNode], [], `source-${i}`)
+    }
+
+    expect(internals.graphSyncDiagnostics).toHaveLength(400)
+    expect(internals.setNodesAnomalyLogs).toHaveLength(100)
+
+    // no anomaly should be recorded when node count and start node invariants are unchanged
+    const beforeLength = internals.setNodesAnomalyLogs.length
+    internals.captureSetNodesAnomaly([oldNode], [createNode('old')], 'no-op')
+    expect(internals.setNodesAnomalyLogs).toHaveLength(beforeLength)
+  })
+
+  it('guards graph resync emission and graph snapshot broadcast', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-resync')
+    const sendGraphEventSpy = vi.spyOn(
+      manager as unknown as { sendGraphEvent: (payload: Uint8Array) => void },
+      'sendGraphEvent',
+    ).mockImplementation(() => undefined)
+
+    internals.currentAppId = null
+    vi.spyOn(webSocketClient, 'isConnected').mockReturnValue(false)
+    vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(socket as unknown as Socket)
+    internals.emitGraphResyncRequest()
+    expect(socket.emit).not.toHaveBeenCalled()
+
+    internals.currentAppId = 'app-graph'
+    vi.spyOn(webSocketClient, 'isConnected').mockReturnValue(true)
+    internals.emitGraphResyncRequest()
+    expect(socket.emit).toHaveBeenCalledWith(
+      'collaboration_event',
+      expect.objectContaining({ type: 'graph_resync_request' }),
+      expect.any(Function),
+    )
+
+    internals.doc = null
+    internals.broadcastCurrentGraph()
+    expect(sendGraphEventSpy).not.toHaveBeenCalled()
+
+    const doc = new LoroDoc()
+    internals.doc = doc
+    internals.nodesMap = doc.getMap('nodes')
+    internals.edgesMap = doc.getMap('edges')
+    internals.broadcastCurrentGraph()
+    expect(sendGraphEventSpy).not.toHaveBeenCalled()
+
+    manager.setNodes([], [createNode('n-broadcast')])
+    internals.broadcastCurrentGraph()
+    expect(sendGraphEventSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('covers connect lifecycle branches including reconnect and force disconnect cleanup', async () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-connect')
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+    const disconnectSpy = vi.spyOn(webSocketClient, 'disconnect').mockImplementation(() => undefined)
+    vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(socket as unknown as Socket)
+    vi.spyOn(webSocketClient, 'connect').mockReturnValue(socket as unknown as Socket)
+
+    manager.init('app-1', undefined as unknown as ReactFlowStore)
+    expect(warnSpy).toHaveBeenCalledWith(
+      'CollaborationManager.init called without reactFlowStore, deferring to connect()',
+    )
+
+    const reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [],
+        setNodes: vi.fn(),
+        getEdges: () => [],
+        setEdges: vi.fn(),
+      }),
+    }
+
+    const eventEmitSpy = vi.spyOn(internals.eventEmitter, 'emit')
+
+    const firstConnectionId = await manager.connect('app-1', reactFlowStore)
+    expect(firstConnectionId).toBeTruthy()
+    expect(internals.currentAppId).toBe('app-1')
+    expect(internals.activeConnections.size).toBe(1)
+
+    const secondConnectionId = await manager.connect('app-1')
+    expect(secondConnectionId).toBeTruthy()
+    expect(disconnectSpy).not.toHaveBeenCalled()
+
+    await manager.connect('app-2', reactFlowStore)
+    expect(disconnectSpy).toHaveBeenCalledWith('app-1')
+    expect(internals.currentAppId).toBe('app-2')
+
+    internals.isLeader = true
+    manager.disconnect(secondConnectionId)
+    manager.disconnect(firstConnectionId)
+    expect(disconnectSpy).toHaveBeenCalledWith('app-2')
+    expect(eventEmitSpy).toHaveBeenCalledWith('leaderChange', false)
+    expect(internals.currentAppId).toBeNull()
+    expect(internals.activeConnections.size).toBe(0)
+  })
+
+  it('covers setNodes/setEdges guards and destroy delegation', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const destroyDisconnectSpy = vi.spyOn(
+      manager as unknown as { disconnect: () => void },
+      'disconnect',
+    ).mockImplementation(() => undefined)
+
+    manager.setNodes([], [createNode('n-guard')])
+    manager.setEdges([], [createEdge('e-guard', 'n-a', 'n-b')])
+
+    const commitSpy = vi.fn()
+    internals.doc = { commit: commitSpy } as unknown as LoroDoc
+    const syncNodesSpy = vi.spyOn(
+      internals as unknown as { syncNodes: (oldNodes: Node[], newNodes: Node[]) => void },
+      'syncNodes',
+    ).mockImplementation(() => undefined)
+    const syncEdgesSpy = vi.spyOn(
+      internals as unknown as { syncEdges: (oldEdges: Edge[], newEdges: Edge[]) => void },
+      'syncEdges',
+    ).mockImplementation(() => undefined)
+
+    internals.isUndoRedoInProgress = true
+    manager.setNodes([], [createNode('n-skip')])
+    manager.setEdges([], [createEdge('e-skip', 'n-a', 'n-b')])
+
+    internals.isUndoRedoInProgress = false
+    manager.setNodes([], [createNode('n-apply')])
+    manager.setEdges([], [createEdge('e-apply', 'n-a', 'n-b')])
+
+    expect(syncNodesSpy).toHaveBeenCalledTimes(1)
+    expect(syncEdgesSpy).toHaveBeenCalledTimes(1)
+    expect(commitSpy).toHaveBeenCalledTimes(2)
+
+    manager.destroy()
+    expect(destroyDisconnectSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('covers emit guards and node panel presence local updates', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-presence')
+    const sendSpy = vi.spyOn(
+      manager as unknown as { sendCollaborationEvent: (payload: unknown) => void },
+      'sendCollaborationEvent',
+    ).mockImplementation(() => undefined)
+    const isConnectedSpy = vi.spyOn(webSocketClient, 'isConnected').mockReturnValue(false)
+    const getSocketSpy = vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(null)
+
+    manager.emitCursorMove({ x: 1, y: 1, userId: 'u-1', timestamp: 1 })
+    manager.emitSyncRequest()
+    manager.emitWorkflowUpdate('app-1')
+    manager.emitNodePanelPresence('node-1', true, { userId: 'u-1', username: 'Alice' })
+    expect(sendSpy).not.toHaveBeenCalled()
+
+    internals.currentAppId = 'app-1'
+    isConnectedSpy.mockReturnValue(true)
+    manager.emitCursorMove({ x: 2, y: 2, userId: 'u-2', timestamp: 2 })
+    expect(sendSpy).not.toHaveBeenCalled()
+
+    getSocketSpy.mockReturnValue(socket as unknown as Socket)
+    manager.emitNodePanelPresence('', true, { userId: 'u-3', username: 'Bob' })
+    manager.emitNodePanelPresence('node-2', true, { userId: '', username: 'Bob' })
+    expect(sendSpy).not.toHaveBeenCalled()
+
+    let latestPresence: NodePanelPresenceMap | null = null
+    manager.onNodePanelPresenceUpdate((presence) => {
+      latestPresence = presence
+    })
+    manager.emitNodePanelPresence('node-3', true, { userId: 'u-4', username: 'Carol' })
+
+    expect(sendSpy).toHaveBeenCalledTimes(1)
+    expect(latestPresence).toMatchObject({
+      'node-3': {
+        'socket-presence': {
+          userId: 'u-4',
+        },
+      },
+    })
+  })
+
+  it('covers merge/import log helper branches and log cap', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [{ ...createNode('local-node'), selected: true }],
+        setNodes: vi.fn(),
+        getEdges: () => [],
+        setEdges: vi.fn(),
+      }),
+    }
+    internals.reactFlowStore = reactFlowStore
+
+    const helperInternals = internals as unknown as {
+      mergeLocalNodeState: (nodes: Node[]) => Node[]
+      snapshotReactFlowGraph: () => { nodes: Node[], edges: Edge[] }
+      startImportLog: (source: 'nodes' | 'edges') => void
+      finalizeImportLog: () => void
+    }
+
+    const merged = helperInternals.mergeLocalNodeState([createNode('remote-node')])
+    expect(merged[0]?.id).toBe('remote-node')
+
+    const mergedWithLocalSelection = helperInternals.mergeLocalNodeState([createNode('local-node')])
+    expect(mergedWithLocalSelection[0]?.data.selected).toBe(true)
+
+    internals.reactFlowStore = null
+    const snapshot = helperInternals.snapshotReactFlowGraph()
+    expect(snapshot).toEqual({ nodes: manager.getNodes(), edges: manager.getEdges() })
+
+    helperInternals.startImportLog('nodes')
+    helperInternals.startImportLog('edges')
+    helperInternals.finalizeImportLog()
+    helperInternals.finalizeImportLog()
+
+    for (let i = 0; i < 25; i += 1) {
+      helperInternals.startImportLog('nodes')
+      helperInternals.finalizeImportLog()
+    }
+
+    expect(manager.getGraphImportLog()).toHaveLength(20)
+  })
+
+  it('covers socket handler catch branches and initial sync leader short-circuit', () => {
+    const { internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-catch')
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    const cleanupSpy = vi.spyOn(internals, 'cleanupNodePanelPresence').mockImplementation(() => {
+      throw new Error('cleanup-failed')
+    })
+
+    internals.setupSocketEventListeners(socket as unknown as Socket)
+    socket.trigger('online_users', {
+      users: [{
+        user_id: 'u-1',
+        username: 'Alice',
+        avatar: '',
+        sid: 'socket-catch',
+      }],
+    })
+    expect(cleanupSpy).toHaveBeenCalled()
+
+    const requestSyncSpy = vi.spyOn(internals, 'requestInitialSyncIfNeeded').mockImplementationOnce(() => {
+      throw new Error('status-failed')
+    })
+    socket.trigger('status', { isLeader: false })
+    expect(requestSyncSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+
+    const resyncSpy = vi.spyOn(internals, 'emitGraphResyncRequest').mockImplementation(() => undefined)
+    internals.pendingInitialSync = true
+    internals.isLeader = true
+    internals.requestInitialSyncIfNeeded()
+    expect(internals.pendingInitialSync).toBe(false)
+    expect(resyncSpy).not.toHaveBeenCalled()
+  })
+
+  it('covers graph broadcast guard and error path', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const socket = createMockSocket('socket-broadcast')
+    const sendGraphEventSpy = vi.spyOn(
+      manager as unknown as { sendGraphEvent: (payload: Uint8Array) => void },
+      'sendGraphEvent',
+    ).mockImplementation(() => undefined)
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+
+    internals.currentAppId = 'app-broadcast'
+    const isConnectedSpy = vi.spyOn(webSocketClient, 'isConnected').mockReturnValue(false)
+    const getSocketSpy = vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(null)
+    internals.broadcastCurrentGraph()
+    expect(sendGraphEventSpy).not.toHaveBeenCalled()
+
+    isConnectedSpy.mockReturnValue(true)
+    internals.broadcastCurrentGraph()
+    expect(sendGraphEventSpy).not.toHaveBeenCalled()
+
+    const doc = new LoroDoc()
+    internals.doc = doc
+    internals.nodesMap = doc.getMap('nodes')
+    internals.edgesMap = doc.getMap('edges')
+    manager.setNodes([], [createNode('node-error')])
+    getSocketSpy.mockReturnValue(socket as unknown as Socket)
+    vi.spyOn(internals.doc, 'export').mockImplementation(() => {
+      throw new Error('export-failed')
+    })
+
+    internals.broadcastCurrentGraph()
+    expect(sendGraphEventSpy).not.toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalledWith('Failed to broadcast graph snapshot:', expect.any(Error))
+  })
+
+  it('covers private guard branches for socket helpers and container migration', async () => {
+    const manager = new CollaborationManager()
+    const internals = getManagerInternals(manager)
+    const socket = createMockSocket('socket-private')
+    const getSocketSpy = vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(null)
+    vi.spyOn(webSocketClient, 'connect').mockReturnValue(socket as unknown as Socket)
+
+    type PrivateInternals = {
+      getActiveSocket: () => Socket | null
+      sendCollaborationEvent: (payload: CollaborationUpdate) => void
+      sendGraphEvent: (payload: Uint8Array) => void
+      getNodeContainer: (nodeId: string) => LoroMap
+      populateNodeContainer: (container: LoroMap, node: Node) => void
+      mergeLocalNodeState: (nodes: Node[]) => Node[]
+      requestInitialSyncIfNeeded: () => void
+    }
+    const privateInternals = internals as unknown as PrivateInternals
+
+    expect(privateInternals.getActiveSocket()).toBeNull()
+    privateInternals.sendCollaborationEvent({
+      type: 'sync_request',
+      data: {},
+      timestamp: Date.now(),
+      userId: 'u-1',
+    } satisfies CollaborationUpdate)
+    privateInternals.sendGraphEvent(new Uint8Array([1, 2]))
+
+    internals.currentAppId = 'app-private'
+    expect(privateInternals.getActiveSocket()).toBeNull()
+
+    getSocketSpy.mockReturnValue(socket as unknown as Socket)
+    privateInternals.sendCollaborationEvent({
+      type: 'sync_request',
+      data: {},
+      timestamp: Date.now(),
+      userId: 'u-1',
+    } satisfies CollaborationUpdate)
+    privateInternals.sendGraphEvent(new Uint8Array([3, 4]))
+    expect(socket.emit).toHaveBeenCalled()
+
+    expect(() => privateInternals.getNodeContainer('no-map')).toThrow('Nodes map not initialized')
+
+    const doc = new LoroDoc()
+    internals.doc = doc
+    internals.nodesMap = doc.getMap('nodes')
+    internals.edgesMap = doc.getMap('edges')
+    internals.nodesMap.set('legacy-node', {
+      id: 'legacy-node',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: {
+        type: BlockEnum.Start,
+        title: 'Legacy',
+        desc: '',
+      },
+    } as unknown as Record<string, unknown>)
+    privateInternals.getNodeContainer('legacy-node')
+
+    const modernContainer = privateInternals.getNodeContainer('modern-node')
+    const dataContainer = modernContainer.setContainer('data', new LoroMap()) as LoroMap
+    dataContainer.set('_internal_only', 'do-not-sync')
+    privateInternals.populateNodeContainer(modernContainer, createNode('modern-node'))
+
+    const noLocalState = privateInternals.mergeLocalNodeState([createNode('no-local')])
+    expect(noLocalState[0]?.id).toBe('no-local')
+
+    internals.pendingInitialSync = false
+    const resyncSpy = vi.spyOn(internals, 'emitGraphResyncRequest').mockImplementation(() => undefined)
+    privateInternals.requestInitialSyncIfNeeded()
+    expect(resyncSpy).not.toHaveBeenCalled()
+
+    const reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [],
+        setNodes: vi.fn(),
+        getEdges: () => [],
+        setEdges: vi.fn(),
+      }),
+    }
+    manager.init('app-init-with-store', reactFlowStore)
+    await manager.connect('app-no-store')
+    await manager.connect('app-no-store', reactFlowStore)
+    expect(internals.reactFlowStore).toBe(reactFlowStore)
+  })
+
+  it('covers undo/redo and sync negative branches', () => {
+    const { manager, internals } = setupManagerWithDoc()
+    const undoManager = {
+      canUndo: vi.fn(() => true),
+      canRedo: vi.fn(() => true),
+      undo: vi.fn(() => false),
+      redo: vi.fn(() => false),
+      clear: vi.fn(),
+    }
+    internals.undoManager = undoManager
+    internals.reactFlowStore = null
+
+    expect(manager.undo()).toBe(false)
+    expect(manager.redo()).toBe(false)
+
+    undoManager.canUndo.mockReturnValue(false)
+    undoManager.canRedo.mockReturnValue(false)
+    expect(manager.undo()).toBe(false)
+    expect(manager.redo()).toBe(false)
+
+    internals.undoManager = null
+    manager.clearUndoStack()
+
+    const privateInternals = internals as unknown as {
+      syncNodes: (oldNodes: Node[], newNodes: Node[]) => void
+      syncEdges: (oldEdges: Edge[], newEdges: Edge[]) => void
+    }
+
+    const oldNode = createNode('old-node')
+    internals.doc = null
+    internals.nodesMap = null
+    privateInternals.syncNodes([oldNode], [])
+
+    const doc = new LoroDoc()
+    internals.doc = doc
+    internals.nodesMap = doc.getMap('nodes')
+    internals.edgesMap = doc.getMap('edges')
+
+    privateInternals.syncNodes([], [oldNode])
+    privateInternals.syncNodes([oldNode], [])
+    privateInternals.syncNodes([oldNode], [oldNode])
+    privateInternals.syncNodes([createNode('old-node')], [createNode('old-node')])
+
+    internals.edgesMap = null
+    privateInternals.syncEdges([createEdge('e-old', 'a', 'b')], [])
+  })
+
+  it('covers import subscription skip branches', () => {
+    const { internals } = setupManagerWithDoc()
+    const reactFlowStore = {
+      getState: () => ({
+        getNodes: () => [],
+        setNodes: vi.fn(),
+        getEdges: () => [],
+        setEdges: vi.fn(),
+      }),
+    }
+    internals.reactFlowStore = reactFlowStore
+
+    let nodesHandler: (event: LoroSubscribeEvent) => void = () => {}
+    let edgesHandler: (event: LoroSubscribeEvent) => void = () => {}
+    vi.spyOn(internals.nodesMap as object as { subscribe: (handler: (event: LoroSubscribeEvent) => void) => void }, 'subscribe')
+      .mockImplementation((handler: (event: LoroSubscribeEvent) => void) => {
+        nodesHandler = handler
+      })
+    vi.spyOn(internals.edgesMap as object as { subscribe: (handler: (event: LoroSubscribeEvent) => void) => void }, 'subscribe')
+      .mockImplementation((handler: (event: LoroSubscribeEvent) => void) => {
+        edgesHandler = handler
+      })
+
+    internals.setupSubscriptions()
+    internals.isUndoRedoInProgress = true
+    nodesHandler({ by: 'import' })
+    edgesHandler({ by: 'import' })
+
+    internals.isUndoRedoInProgress = false
+    edgesHandler({ by: 'local' })
+    internals.reactFlowStore = null
+    edgesHandler({ by: 'import' })
+  })
+
+  it('covers missing-doc guards and unauthorized rejoin early returns', () => {
+    const manager = new CollaborationManager()
+    const internals = getManagerInternals(manager)
+    const getSocketSpy = vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(null)
+
+    manager.setNodes([], [createNode('doc-missing-node')])
+    manager.setEdges([], [createEdge('doc-missing-edge', 'a', 'b')])
+    expect(manager.getNodes()).toEqual([])
+
+    internals.handleSessionUnauthorized()
+    internals.currentAppId = 'app-unauthorized'
+    internals.handleSessionUnauthorized()
+    expect(getSocketSpy).toHaveBeenCalled()
+  })
+
+  it('covers undo manager push/pop metadata path with real connect flow', async () => {
+    const manager = new CollaborationManager()
+    const internals = getManagerInternals(manager)
+    const socket = createMockSocket('socket-undo-pop')
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((callback: FrameRequestCallback) => {
+      callback(0)
+      return 1
+    })
+    vi.useFakeTimers()
+    vi.spyOn(webSocketClient, 'connect').mockReturnValue(socket as unknown as Socket)
+    vi.spyOn(webSocketClient, 'disconnect').mockImplementation(() => undefined)
+    vi.spyOn(webSocketClient, 'getSocket').mockReturnValue(socket as unknown as Socket)
+
+    let nodes: Node[] = [
+      {
+        ...createNode('undo-node-1'),
+        data: {
+          ...createNode('undo-node-1').data,
+          selected: true,
+        },
+      },
+      createNode('undo-node-2'),
+    ]
+    let edges: Edge[] = []
+    const setNodesSpy = vi.fn((nextNodes: Node[]) => {
+      nodes = nextNodes
+    })
+    const setEdgesSpy = vi.fn((nextEdges: Edge[]) => {
+      edges = nextEdges
+    })
+    const reactFlowStore = {
+      getState: () => ({
+        getNodes: () => nodes,
+        setNodes: setNodesSpy,
+        getEdges: () => edges,
+        setEdges: setEdgesSpy,
+      }),
+    }
+
+    const undoStateSpy = vi.fn()
+    manager.onUndoRedoStateChange(undoStateSpy)
+
+    const connectionId = await manager.connect('app-undo-pop', reactFlowStore)
+    manager.setNodes([], nodes)
+    const nextNodes = nodes.map((node) => {
+      if (node.id === 'undo-node-1') {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            selected: false,
+          },
+        }
+      }
+      if (node.id === 'undo-node-2') {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            selected: true,
+          },
+        }
+      }
+      return node
+    })
+    manager.setNodes(nodes, nextNodes)
+    nodes = nextNodes
+
+    expect(manager.canUndo()).toBe(true)
+    expect(manager.undo()).toBe(true)
+
+    vi.runAllTimers()
+    expect(setNodesSpy).toHaveBeenCalled()
+    expect(undoStateSpy).toHaveBeenCalled()
+
+    manager.disconnect(connectionId)
+    expect(internals.isUndoRedoInProgress).toBe(false)
+    vi.useRealTimers()
+    rafSpy.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts
new file mode 100644
index 0000000000..957ef76e86
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts
@@ -0,0 +1,763 @@
+import type { LoroMap } from 'loro-crdt/base64'
+import type {
+  NodePanelPresenceMap,
+  NodePanelPresenceUser,
+} from '@/app/components/workflow/collaboration/types/collaboration'
+import type { CommonNodeType, Edge, Node } from '@/app/components/workflow/types'
+import { LoroDoc } from 'loro-crdt/base64'
+import { Position } from 'reactflow'
+import { CollaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+const NODE_ID = '1760342909316'
+
+type WorkflowVariable = {
+  default: string
+  hint: string
+  label: string
+  max_length: number
+  options: string[]
+  placeholder: string
+  required: boolean
+  type: string
+  variable: string
+}
+
+type PromptTemplateItem = {
+  id: string
+  role: string
+  text: string
+}
+
+type ParameterItem = {
+  description: string
+  name: string
+  required: boolean
+  type: string
+}
+
+type NodePanelPresenceEventData = {
+  nodeId: string
+  action: 'open' | 'close'
+  user: NodePanelPresenceUser
+  clientId: string
+  timestamp?: number
+}
+
+type StartNodeData = {
+  variables: WorkflowVariable[]
+}
+
+type LLMNodeData = {
+  context: {
+    enabled: boolean
+    variable_selector: string[]
+  }
+  model: {
+    mode: string
+    name: string
+    provider: string
+    completion_params: {
+      temperature: number
+    }
+  }
+  prompt_template: PromptTemplateItem[]
+  vision: {
+    enabled: boolean
+  }
+}
+
+type ParameterExtractorNodeData = {
+  model: {
+    mode: string
+    name: string
+    provider: string
+    completion_params: {
+      temperature: number
+    }
+  }
+  parameters: ParameterItem[]
+  query: unknown[]
+  reasoning_mode: string
+  vision: {
+    enabled: boolean
+  }
+}
+
+type LLMNodeDataWithUnknownTemplate = Omit<LLMNodeData, 'prompt_template'> & {
+  prompt_template: unknown
+}
+
+type ManagerDoc = LoroDoc | { commit: () => void }
+
+type CollaborationManagerInternals = {
+  doc: ManagerDoc
+  nodesMap: LoroMap
+  edgesMap: LoroMap
+  syncNodes: (oldNodes: Node[], newNodes: Node[]) => void
+  syncEdges: (oldEdges: Edge[], newEdges: Edge[]) => void
+  applyNodePanelPresenceUpdate: (update: NodePanelPresenceEventData) => void
+  forceDisconnect: () => void
+  activeConnections: Set<string>
+  isUndoRedoInProgress: boolean
+}
+
+const createVariable = (name: string, overrides: Partial<WorkflowVariable> = {}): WorkflowVariable => ({
+  default: '',
+  hint: '',
+  label: name,
+  max_length: 48,
+  options: [],
+  placeholder: '',
+  required: true,
+  type: 'text-input',
+  variable: name,
+  ...overrides,
+})
+
+const deepClone = <T>(value: T): T => JSON.parse(JSON.stringify(value))
+
+const createNodeSnapshot = (variableNames: string[]): Node<StartNodeData> => ({
+  id: NODE_ID,
+  type: 'custom',
+  position: { x: 0, y: 24 },
+  positionAbsolute: { x: 0, y: 24 },
+  height: 88,
+  width: 242,
+  selected: true,
+  selectable: true,
+  draggable: true,
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+  data: {
+    selected: true,
+    title: '开始',
+    desc: '',
+    type: BlockEnum.Start,
+    variables: variableNames.map(name => createVariable(name)),
+  },
+})
+
+const LLM_NODE_ID = 'llm-node'
+const PARAM_NODE_ID = 'param-extractor-node'
+
+const createLLMNodeSnapshot = (promptTemplates: PromptTemplateItem[]): Node<LLMNodeData> => ({
+  id: LLM_NODE_ID,
+  type: 'custom',
+  position: { x: 200, y: 120 },
+  positionAbsolute: { x: 200, y: 120 },
+  height: 320,
+  width: 460,
+  selected: false,
+  selectable: true,
+  draggable: true,
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+  data: {
+    type: BlockEnum.LLM,
+    title: 'LLM',
+    desc: '',
+    selected: false,
+    context: {
+      enabled: false,
+      variable_selector: [],
+    },
+    model: {
+      mode: 'chat',
+      name: 'gemini-2.5-pro',
+      provider: 'langgenius/gemini/google',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    vision: {
+      enabled: false,
+    },
+    prompt_template: promptTemplates,
+  },
+})
+
+const createParameterExtractorNodeSnapshot = (parameters: ParameterItem[]): Node<ParameterExtractorNodeData> => ({
+  id: PARAM_NODE_ID,
+  type: 'custom',
+  position: { x: 420, y: 220 },
+  positionAbsolute: { x: 420, y: 220 },
+  height: 260,
+  width: 420,
+  selected: true,
+  selectable: true,
+  draggable: true,
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+  data: {
+    type: BlockEnum.ParameterExtractor,
+    title: '参数提取器',
+    desc: '',
+    selected: true,
+    model: {
+      mode: 'chat',
+      name: '',
+      provider: '',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    reasoning_mode: 'prompt',
+    parameters,
+    query: [],
+    vision: {
+      enabled: false,
+    },
+  },
+})
+
+const getVariables = (node: Node): string[] => {
+  const data = node.data as CommonNodeType<{ variables?: WorkflowVariable[] }>
+  const variables = data.variables ?? []
+  return variables.map(item => item.variable)
+}
+
+const getVariableObject = (node: Node, name: string): WorkflowVariable | undefined => {
+  const data = node.data as CommonNodeType<{ variables?: WorkflowVariable[] }>
+  const variables = data.variables ?? []
+  return variables.find(item => item.variable === name)
+}
+
+const getPromptTemplates = (node: Node): PromptTemplateItem[] => {
+  const data = node.data as CommonNodeType<{ prompt_template?: PromptTemplateItem[] }>
+  return data.prompt_template ?? []
+}
+
+const getParameters = (node: Node): ParameterItem[] => {
+  const data = node.data as CommonNodeType<{ parameters?: ParameterItem[] }>
+  return data.parameters ?? []
+}
+
+const getManagerInternals = (manager: CollaborationManager): CollaborationManagerInternals =>
+  manager as unknown as CollaborationManagerInternals
+
+const setupManager = (): { manager: CollaborationManager, internals: CollaborationManagerInternals } => {
+  const manager = new CollaborationManager()
+  const doc = new LoroDoc()
+  const internals = getManagerInternals(manager)
+  internals.doc = doc
+  internals.nodesMap = doc.getMap('nodes')
+  internals.edgesMap = doc.getMap('edges')
+  return { manager, internals }
+}
+
+describe('CollaborationManager syncNodes', () => {
+  let manager: CollaborationManager
+  let internals: CollaborationManagerInternals
+
+  beforeEach(() => {
+    const setup = setupManager()
+    manager = setup.manager
+    internals = setup.internals
+
+    const initialNode = createNodeSnapshot(['a'])
+    internals.syncNodes([], [deepClone(initialNode)])
+  })
+
+  it('updates collaborators map when a single client adds a variable', () => {
+    const base = [createNodeSnapshot(['a'])]
+    const next = [createNodeSnapshot(['a', 'b'])]
+
+    internals.syncNodes(base, next)
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    expect(stored).toBeDefined()
+    expect(getVariables(stored!)).toEqual(['a', 'b'])
+  })
+
+  it('applies the latest parallel additions derived from the same base snapshot', () => {
+    const base = [createNodeSnapshot(['a'])]
+    const userA = [createNodeSnapshot(['a', 'b'])]
+    const userB = [createNodeSnapshot(['a', 'c'])]
+
+    internals.syncNodes(base, userA)
+
+    const afterUserA = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    expect(getVariables(afterUserA!)).toEqual(['a', 'b'])
+
+    internals.syncNodes(base, userB)
+
+    const finalNode = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    const finalVariables = getVariables(finalNode!)
+
+    expect(finalVariables).toEqual(['a', 'c'])
+  })
+
+  it('prefers the incoming mutation when the same variable is edited concurrently', () => {
+    const base = [createNodeSnapshot(['a'])]
+    const userA = [
+      {
+        ...createNodeSnapshot(['a']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a', { label: 'A from userA', hint: 'hintA' }),
+          ],
+        },
+      },
+    ]
+    const userB = [
+      {
+        ...createNodeSnapshot(['a']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a', { label: 'A from userB', hint: 'hintB' }),
+          ],
+        },
+      },
+    ]
+
+    internals.syncNodes(base, userA)
+    internals.syncNodes(base, userB)
+
+    const finalNode = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    const finalVariable = getVariableObject(finalNode!, 'a')
+
+    expect(finalVariable?.label).toBe('A from userB')
+    expect(finalVariable?.hint).toBe('hintB')
+  })
+
+  it('reflects the last writer when concurrent removal and edits happen', () => {
+    const base = [createNodeSnapshot(['a', 'b'])]
+    internals.syncNodes([], [deepClone(base[0])])
+    const userA = [
+      {
+        ...createNodeSnapshot(['a']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a', { label: 'A after deletion' }),
+          ],
+        },
+      },
+    ]
+    const userB = [
+      {
+        ...createNodeSnapshot(['a', 'b']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a'),
+            createVariable('b', { label: 'B edited but should vanish' }),
+          ],
+        },
+      },
+    ]
+
+    internals.syncNodes(base, userA)
+    internals.syncNodes(base, userB)
+
+    const finalNode = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    const finalVariables = getVariables(finalNode!)
+    expect(finalVariables).toEqual(['a', 'b'])
+    expect(getVariableObject(finalNode!, 'b')).toBeDefined()
+  })
+
+  it('synchronizes prompt_template list updates across collaborators', () => {
+    const { manager: promptManager, internals: promptInternals } = setupManager()
+
+    const baseTemplate = [
+      {
+        id: 'abcfa5f9-3c44-4252-aeba-4b6eaf0acfc4',
+        role: 'system',
+        text: 'avc',
+      },
+    ]
+
+    const baseNode = createLLMNodeSnapshot(baseTemplate)
+    promptInternals.syncNodes([], [deepClone(baseNode)])
+
+    const updatedTemplates = [
+      ...baseTemplate,
+      {
+        id: 'user-1',
+        role: 'user',
+        text: 'hello world',
+      },
+    ]
+
+    const updatedNode = createLLMNodeSnapshot(updatedTemplates)
+    promptInternals.syncNodes([deepClone(baseNode)], [deepClone(updatedNode)])
+
+    const stored = (promptManager.getNodes() as Node[]).find(node => node.id === LLM_NODE_ID)
+    expect(stored).toBeDefined()
+
+    const storedTemplates = getPromptTemplates(stored!)
+    expect(storedTemplates).toHaveLength(2)
+    expect(storedTemplates[0]).toEqual(baseTemplate[0])
+    expect(storedTemplates[1]).toEqual(updatedTemplates[1])
+
+    const editedTemplates = [
+      {
+        id: 'abcfa5f9-3c44-4252-aeba-4b6eaf0acfc4',
+        role: 'system',
+        text: 'updated system prompt',
+      },
+    ]
+    const editedNode = createLLMNodeSnapshot(editedTemplates)
+
+    promptInternals.syncNodes([deepClone(updatedNode)], [deepClone(editedNode)])
+
+    const final = (promptManager.getNodes() as Node[]).find(node => node.id === LLM_NODE_ID)
+    const finalTemplates = getPromptTemplates(final!)
+    expect(finalTemplates).toHaveLength(1)
+    expect(finalTemplates[0].text).toBe('updated system prompt')
+  })
+
+  it('keeps parameter list in sync when nodes add, edit, or remove parameters', () => {
+    const { manager: parameterManager, internals: parameterInternals } = setupManager()
+
+    const baseParameters: ParameterItem[] = [
+      { description: 'bb', name: 'aa', required: false, type: 'string' },
+      { description: 'dd', name: 'cc', required: false, type: 'string' },
+    ]
+
+    const baseNode = createParameterExtractorNodeSnapshot(baseParameters)
+    parameterInternals.syncNodes([], [deepClone(baseNode)])
+
+    const updatedParameters: ParameterItem[] = [
+      ...baseParameters,
+      { description: 'ff', name: 'ee', required: true, type: 'number' },
+    ]
+
+    const updatedNode = createParameterExtractorNodeSnapshot(updatedParameters)
+    parameterInternals.syncNodes([deepClone(baseNode)], [deepClone(updatedNode)])
+
+    const stored = (parameterManager.getNodes() as Node[]).find(node => node.id === PARAM_NODE_ID)
+    expect(stored).toBeDefined()
+    expect(getParameters(stored!)).toEqual(updatedParameters)
+
+    const editedParameters: ParameterItem[] = [
+      { description: 'bb edited', name: 'aa', required: true, type: 'string' },
+    ]
+    const editedNode = createParameterExtractorNodeSnapshot(editedParameters)
+
+    parameterInternals.syncNodes([deepClone(updatedNode)], [deepClone(editedNode)])
+
+    const final = (parameterManager.getNodes() as Node[]).find(node => node.id === PARAM_NODE_ID)
+    expect(getParameters(final!)).toEqual(editedParameters)
+  })
+
+  it('handles nodes without data gracefully', () => {
+    const emptyNode: Node = {
+      id: 'empty-node',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: undefined as unknown as CommonNodeType<Record<string, never>>,
+    }
+
+    internals.syncNodes([], [deepClone(emptyNode)])
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === 'empty-node')
+    expect(stored).toBeDefined()
+    expect(stored?.data).toEqual({})
+  })
+
+  it('preserves CRDT list instances when synchronizing parsed state back into the manager', () => {
+    const { manager: promptManager, internals: promptInternals } = setupManager()
+
+    const base = createLLMNodeSnapshot([
+      { id: 'system', role: 'system', text: 'base' },
+    ])
+    promptInternals.syncNodes([], [deepClone(base)])
+
+    const storedBefore = promptManager.getNodes().find(node => node.id === LLM_NODE_ID) as Node<LLMNodeData> | undefined
+    expect(storedBefore).toBeDefined()
+    const firstTemplate = storedBefore?.data.prompt_template?.[0]
+    expect(firstTemplate?.text).toBe('base')
+
+    // simulate consumer mutating the plain JSON array and syncing back
+    const baseNode = storedBefore!
+    const mutatedNode = deepClone(baseNode)
+    mutatedNode.data.prompt_template.push({
+      id: 'user',
+      role: 'user',
+      text: 'mutated',
+    })
+
+    promptInternals.syncNodes([baseNode], [mutatedNode])
+
+    const storedAfter = promptManager.getNodes().find(node => node.id === LLM_NODE_ID) as Node<LLMNodeData> | undefined
+    const templatesAfter = storedAfter?.data.prompt_template
+    expect(Array.isArray(templatesAfter)).toBe(true)
+    expect(templatesAfter).toHaveLength(2)
+  })
+
+  it('reuses CRDT list when syncing parameters repeatedly', () => {
+    const { manager: parameterManager, internals: parameterInternals } = setupManager()
+
+    const initialParameters: ParameterItem[] = [
+      { description: 'desc', name: 'param', required: false, type: 'string' },
+    ]
+    const node = createParameterExtractorNodeSnapshot(initialParameters)
+    parameterInternals.syncNodes([], [deepClone(node)])
+
+    const stored = parameterManager.getNodes().find(n => n.id === PARAM_NODE_ID) as Node<ParameterExtractorNodeData>
+    const mutatedNode = deepClone(stored)
+    mutatedNode.data.parameters[0].description = 'updated'
+
+    parameterInternals.syncNodes([stored], [mutatedNode])
+
+    const storedAfter = parameterManager.getNodes().find(n => n.id === PARAM_NODE_ID) as
+      | Node<ParameterExtractorNodeData>
+      | undefined
+    const params = storedAfter?.data.parameters ?? []
+    expect(params).toHaveLength(1)
+    expect(params[0].description).toBe('updated')
+  })
+
+  it('filters out transient/private data keys while keeping allowlisted ones', () => {
+    const nodeWithPrivate: Node<{ _foo: string, variables: WorkflowVariable[] }> = {
+      id: 'private-node',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: {
+        type: BlockEnum.Start,
+        title: 'private',
+        desc: '',
+        _foo: 'should disappear',
+        _children: [{ nodeId: 'child-a', nodeType: BlockEnum.Start }],
+        selected: true,
+        variables: [],
+      },
+    }
+
+    internals.syncNodes([], [deepClone(nodeWithPrivate)])
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === 'private-node')!
+    const storedData = stored.data as CommonNodeType<{ _foo?: string }>
+    expect(storedData._foo).toBeUndefined()
+    expect(storedData._children).toEqual([{ nodeId: 'child-a', nodeType: BlockEnum.Start }])
+    expect(storedData.selected).toBeUndefined()
+  })
+
+  it('removes list fields when they are omitted in the update snapshot', () => {
+    const baseNode = createNodeSnapshot(['alpha'])
+    internals.syncNodes([], [deepClone(baseNode)])
+
+    const withoutVariables: Node<StartNodeData> = {
+      ...deepClone(baseNode),
+      data: {
+        ...deepClone(baseNode).data,
+      },
+    }
+    delete (withoutVariables.data as CommonNodeType<{ variables?: WorkflowVariable[] }>).variables
+
+    internals.syncNodes([deepClone(baseNode)], [withoutVariables])
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)!
+    const storedData = stored.data as CommonNodeType<{ variables?: WorkflowVariable[] }>
+    expect(storedData.variables).toBeUndefined()
+  })
+
+  it('treats non-array list inputs as empty lists during synchronization', () => {
+    const { manager: promptManager, internals: promptInternals } = setupManager()
+
+    const nodeWithInvalidTemplate = createLLMNodeSnapshot([])
+    promptInternals.syncNodes([], [deepClone(nodeWithInvalidTemplate)])
+
+    const mutated = deepClone(nodeWithInvalidTemplate) as Node<LLMNodeDataWithUnknownTemplate>
+    mutated.data.prompt_template = 'not-an-array'
+
+    promptInternals.syncNodes([deepClone(nodeWithInvalidTemplate)], [mutated])
+
+    const stored = promptManager.getNodes().find(node => node.id === LLM_NODE_ID) as Node<LLMNodeData>
+    expect(Array.isArray(stored.data.prompt_template)).toBe(true)
+    expect(stored.data.prompt_template).toHaveLength(0)
+  })
+
+  it('updates edges map when edges are added, modified, and removed', () => {
+    const { manager: edgeManager } = setupManager()
+
+    const edge: Edge = {
+      id: 'edge-1',
+      source: 'node-a',
+      target: 'node-b',
+      type: 'default',
+      data: {
+        sourceType: BlockEnum.Start,
+        targetType: BlockEnum.LLM,
+        _waitingRun: false,
+      },
+    }
+
+    edgeManager.setEdges([], [edge])
+    expect(edgeManager.getEdges()).toHaveLength(1)
+    const storedEdge = edgeManager.getEdges()[0]!
+    expect(storedEdge.data).toBeDefined()
+    expect(storedEdge.data!._waitingRun).toBe(false)
+
+    const updatedEdge: Edge = {
+      ...edge,
+      data: {
+        sourceType: BlockEnum.Start,
+        targetType: BlockEnum.LLM,
+        _waitingRun: true,
+      },
+    }
+    edgeManager.setEdges([edge], [updatedEdge])
+    expect(edgeManager.getEdges()).toHaveLength(1)
+    const updatedStoredEdge = edgeManager.getEdges()[0]!
+    expect(updatedStoredEdge.data).toBeDefined()
+    expect(updatedStoredEdge.data!._waitingRun).toBe(true)
+
+    edgeManager.setEdges([updatedEdge], [])
+    expect(edgeManager.getEdges()).toHaveLength(0)
+  })
+})
+
+describe('CollaborationManager public API wrappers', () => {
+  let manager: CollaborationManager
+  let internals: CollaborationManagerInternals
+  const baseNodes: Node[] = []
+  const updatedNodes: Node[] = [
+    {
+      id: 'new-node',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: {
+        type: BlockEnum.Start,
+        title: 'New node',
+        desc: '',
+      },
+    },
+  ]
+  const baseEdges: Edge[] = []
+  const updatedEdges: Edge[] = [
+    {
+      id: 'edge-1',
+      source: 'source',
+      target: 'target',
+      type: 'default',
+      data: {
+        sourceType: BlockEnum.Start,
+        targetType: BlockEnum.End,
+      },
+    },
+  ]
+
+  beforeEach(() => {
+    manager = new CollaborationManager()
+    internals = getManagerInternals(manager)
+  })
+
+  it('setNodes delegates to syncNodes and commits the CRDT document', () => {
+    const commit = vi.fn()
+    internals.doc = { commit }
+    const syncSpy = vi.spyOn(internals, 'syncNodes').mockImplementation(() => undefined)
+
+    manager.setNodes(baseNodes, updatedNodes)
+
+    expect(syncSpy).toHaveBeenCalledWith(baseNodes, updatedNodes)
+    expect(commit).toHaveBeenCalled()
+    syncSpy.mockRestore()
+  })
+
+  it('setNodes skips syncing when undo/redo replay is running', () => {
+    const commit = vi.fn()
+    internals.doc = { commit }
+    internals.isUndoRedoInProgress = true
+    const syncSpy = vi.spyOn(internals, 'syncNodes').mockImplementation(() => undefined)
+
+    manager.setNodes(baseNodes, updatedNodes)
+
+    expect(syncSpy).not.toHaveBeenCalled()
+    expect(commit).not.toHaveBeenCalled()
+    syncSpy.mockRestore()
+  })
+
+  it('setEdges delegates to syncEdges and commits the CRDT document', () => {
+    const commit = vi.fn()
+    internals.doc = { commit }
+    const syncSpy = vi.spyOn(internals, 'syncEdges').mockImplementation(() => undefined)
+
+    manager.setEdges(baseEdges, updatedEdges)
+
+    expect(syncSpy).toHaveBeenCalledWith(baseEdges, updatedEdges)
+    expect(commit).toHaveBeenCalled()
+    syncSpy.mockRestore()
+  })
+
+  it('disconnect tears down the collaboration state only when last connection closes', () => {
+    const forceSpy = vi.spyOn(internals, 'forceDisconnect').mockImplementation(() => undefined)
+    internals.activeConnections.add('conn-a')
+    internals.activeConnections.add('conn-b')
+
+    manager.disconnect('conn-a')
+    expect(forceSpy).not.toHaveBeenCalled()
+
+    manager.disconnect('conn-b')
+    expect(forceSpy).toHaveBeenCalledTimes(1)
+    forceSpy.mockRestore()
+  })
+
+  it('applyNodePanelPresenceUpdate keeps a client visible on a single node at a time', () => {
+    const updates: NodePanelPresenceMap[] = []
+    manager.onNodePanelPresenceUpdate((presence) => {
+      updates.push(presence)
+    })
+
+    const user: NodePanelPresenceUser = { userId: 'user-1', username: 'Dana' }
+
+    internals.applyNodePanelPresenceUpdate({
+      nodeId: 'node-a',
+      action: 'open',
+      user,
+      clientId: 'client-1',
+      timestamp: 100,
+    })
+
+    internals.applyNodePanelPresenceUpdate({
+      nodeId: 'node-b',
+      action: 'open',
+      user,
+      clientId: 'client-1',
+      timestamp: 200,
+    })
+
+    const finalSnapshot = updates[updates.length - 1]!
+    expect(finalSnapshot).toEqual({
+      'node-b': {
+        'client-1': {
+          userId: 'user-1',
+          username: 'Dana',
+          clientId: 'client-1',
+          timestamp: 200,
+        },
+      },
+    })
+  })
+
+  it('applyNodePanelPresenceUpdate clears node entries when last viewer closes the panel', () => {
+    const updates: NodePanelPresenceMap[] = []
+    manager.onNodePanelPresenceUpdate((presence) => {
+      updates.push(presence)
+    })
+
+    const user: NodePanelPresenceUser = { userId: 'user-2', username: 'Kai' }
+
+    internals.applyNodePanelPresenceUpdate({
+      nodeId: 'node-a',
+      action: 'open',
+      user,
+      clientId: 'client-9',
+      timestamp: 300,
+    })
+
+    internals.applyNodePanelPresenceUpdate({
+      nodeId: 'node-a',
+      action: 'close',
+      user,
+      clientId: 'client-9',
+      timestamp: 301,
+    })
+
+    expect(updates[updates.length - 1]).toEqual({})
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts b/web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts
new file mode 100644
index 0000000000..613c2d1b75
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts
@@ -0,0 +1,138 @@
+import type { LoroDoc } from 'loro-crdt/base64'
+import type { Socket } from 'socket.io-client'
+import { CRDTProvider } from '../crdt-provider'
+
+type FakeDocEvent = {
+  by: string
+}
+
+type FakeDoc = {
+  export: ReturnType<typeof vi.fn>
+  import: ReturnType<typeof vi.fn>
+  subscribe: ReturnType<typeof vi.fn>
+  trigger: (event: FakeDocEvent) => void
+}
+
+const createFakeDoc = (): FakeDoc => {
+  let handler: ((payload: FakeDocEvent) => void) | null = null
+
+  const exportFn = vi.fn(() => new Uint8Array([1, 2, 3]))
+  const importFn = vi.fn()
+  const subscribeFn = vi.fn((cb: (payload: FakeDocEvent) => void) => {
+    handler = cb
+  })
+
+  return {
+    export: exportFn,
+    import: importFn,
+    subscribe: subscribeFn,
+    trigger: (event: FakeDocEvent) => {
+      handler?.(event)
+    },
+  }
+}
+
+type MockSocket = {
+  trigger: (event: string, ...args: unknown[]) => void
+  emit: ReturnType<typeof vi.fn>
+  on: ReturnType<typeof vi.fn>
+  off: ReturnType<typeof vi.fn>
+}
+
+const createMockSocket = (): MockSocket => {
+  const handlers = new Map<string, (...args: unknown[]) => void>()
+
+  const socket: MockSocket = {
+    emit: vi.fn(),
+    on: vi.fn((event: string, handler: (...args: unknown[]) => void) => {
+      handlers.set(event, handler)
+    }),
+    off: vi.fn((event: string) => {
+      handlers.delete(event)
+    }),
+    trigger: (event: string, ...args: unknown[]) => {
+      const handler = handlers.get(event)
+      if (handler)
+        handler(...args)
+    },
+  }
+
+  return socket
+}
+
+describe('CRDTProvider', () => {
+  it('emits graph_event when local changes happen', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket as unknown as Socket, doc as unknown as LoroDoc)
+    expect(provider).toBeInstanceOf(CRDTProvider)
+
+    doc.trigger({ by: 'local' })
+
+    expect(socket.emit).toHaveBeenCalledWith(
+      'graph_event',
+      expect.any(Uint8Array),
+      expect.any(Function),
+    )
+    expect(doc.export).toHaveBeenCalledWith({ mode: 'update' })
+  })
+
+  it('ignores non-local events', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket as unknown as Socket, doc as unknown as LoroDoc)
+
+    doc.trigger({ by: 'remote' })
+
+    expect(socket.emit).not.toHaveBeenCalled()
+    provider.destroy()
+  })
+
+  it('imports remote updates on graph_update', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket as unknown as Socket, doc as unknown as LoroDoc)
+
+    const payload = new Uint8Array([9, 9, 9])
+    socket.trigger('graph_update', payload)
+
+    expect(doc.import).toHaveBeenCalledWith(expect.any(Uint8Array))
+    expect(Array.from(doc.import.mock.calls[0][0])).toEqual([9, 9, 9])
+    provider.destroy()
+  })
+
+  it('removes graph_update listener on destroy', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket as unknown as Socket, doc as unknown as LoroDoc)
+    provider.destroy()
+
+    expect(socket.off).toHaveBeenCalledWith('graph_update')
+  })
+
+  it('logs an error when graph_update import fails but continues operating', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+    doc.import.mockImplementation(() => {
+      throw new Error('boom')
+    })
+
+    const provider = new CRDTProvider(socket as unknown as Socket, doc as unknown as LoroDoc)
+
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+
+    socket.trigger('graph_update', new Uint8Array([1]))
+    expect(errorSpy).toHaveBeenCalledWith('Error importing graph update:', expect.any(Error))
+
+    doc.import.mockReset()
+    socket.trigger('graph_update', new Uint8Array([2, 3]))
+    expect(doc.import).toHaveBeenCalled()
+
+    provider.destroy()
+    errorSpy.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts b/web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts
new file mode 100644
index 0000000000..19c4990856
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts
@@ -0,0 +1,93 @@
+import { EventEmitter } from '../event-emitter'
+
+describe('EventEmitter', () => {
+  it('registers and invokes handlers via on/emit', () => {
+    const emitter = new EventEmitter()
+    const handler = vi.fn()
+
+    emitter.on('test', handler)
+    emitter.emit('test', { value: 42 })
+
+    expect(handler).toHaveBeenCalledWith({ value: 42 })
+  })
+
+  it('removes specific handler with off', () => {
+    const emitter = new EventEmitter()
+    const handlerA = vi.fn()
+    const handlerB = vi.fn()
+
+    emitter.on('test', handlerA)
+    emitter.on('test', handlerB)
+
+    emitter.off('test', handlerA)
+    emitter.emit('test', 'payload')
+
+    expect(handlerA).not.toHaveBeenCalled()
+    expect(handlerB).toHaveBeenCalledWith('payload')
+  })
+
+  it('clears all listeners when off is called without handler', () => {
+    const emitter = new EventEmitter()
+    const handlerA = vi.fn()
+    const handlerB = vi.fn()
+
+    emitter.on('trigger', handlerA)
+    emitter.on('trigger', handlerB)
+
+    emitter.off('trigger')
+    emitter.emit('trigger', 'payload')
+
+    expect(handlerA).not.toHaveBeenCalled()
+    expect(handlerB).not.toHaveBeenCalled()
+    expect(emitter.getListenerCount('trigger')).toBe(0)
+  })
+
+  it('removeAllListeners clears every registered event', () => {
+    const emitter = new EventEmitter()
+    emitter.on('one', vi.fn())
+    emitter.on('two', vi.fn())
+
+    emitter.removeAllListeners()
+
+    expect(emitter.getListenerCount('one')).toBe(0)
+    expect(emitter.getListenerCount('two')).toBe(0)
+  })
+
+  it('returns an unsubscribe function from on', () => {
+    const emitter = new EventEmitter()
+    const handler = vi.fn()
+
+    const unsubscribe = emitter.on('detach', handler)
+    unsubscribe()
+
+    emitter.emit('detach', 'value')
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('continues emitting when a handler throws', () => {
+    const emitter = new EventEmitter()
+    const errorHandler = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    const failingHandler = vi.fn(() => {
+      throw new Error('boom')
+    })
+    const succeedingHandler = vi.fn()
+
+    emitter.on('safe', failingHandler)
+    emitter.on('safe', succeedingHandler)
+
+    emitter.emit('safe', 7)
+
+    expect(failingHandler).toHaveBeenCalledWith(7)
+    expect(succeedingHandler).toHaveBeenCalledWith(7)
+    expect(errorHandler).toHaveBeenCalledWith(
+      expect.stringContaining('Error in event handler for safe:'),
+      expect.any(Error),
+    )
+
+    errorHandler.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts b/web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts
new file mode 100644
index 0000000000..b9982164c5
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts
@@ -0,0 +1,161 @@
+type MockSocket = {
+  trigger: (event: string, ...args: unknown[]) => void
+  emit: ReturnType<typeof vi.fn>
+  on: ReturnType<typeof vi.fn>
+  disconnect: ReturnType<typeof vi.fn>
+  connected: boolean
+}
+
+type IoOptions = {
+  auth?: unknown
+  path?: string
+  transports?: string[]
+  withCredentials?: boolean
+}
+
+const ioMock = vi.hoisted(() => vi.fn())
+
+vi.mock('socket.io-client', () => ({
+  io: (...args: Parameters<typeof ioMock>) => ioMock(...args),
+}))
+
+const createMockSocket = (id: string): MockSocket => {
+  const handlers = new Map<string, (...args: unknown[]) => void>()
+
+  const socket: MockSocket & { id: string } = {
+    id,
+    connected: true,
+    emit: vi.fn(),
+    disconnect: vi.fn(() => {
+      socket.connected = false
+    }),
+    on: vi.fn((event: string, handler: (...args: unknown[]) => void) => {
+      handlers.set(event, handler)
+    }),
+    trigger: (event: string, ...args: unknown[]) => {
+      const handler = handlers.get(event)
+      if (handler)
+        handler(...args)
+    },
+  }
+
+  return socket
+}
+
+describe('WebSocketClient', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    ioMock.mockReset()
+  })
+
+  it('connects with default url and registers base listeners', async () => {
+    const mockSocket = createMockSocket('socket-fallback')
+    ioMock.mockImplementation(() => mockSocket)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    const socket = client.connect('app-1')
+
+    expect(ioMock).toHaveBeenCalledWith(
+      'ws://localhost:5001',
+      expect.objectContaining({
+        path: '/socket.io',
+        transports: ['websocket'],
+        withCredentials: true,
+      }),
+    )
+    expect(socket).toBe(mockSocket)
+    expect(mockSocket.on).toHaveBeenCalledWith('connect', expect.any(Function))
+    expect(mockSocket.on).toHaveBeenCalledWith('disconnect', expect.any(Function))
+    expect(mockSocket.on).toHaveBeenCalledWith('connect_error', expect.any(Function))
+  })
+
+  it('reuses existing connected socket and avoids duplicate connections', async () => {
+    const mockSocket = createMockSocket('socket-reuse')
+    ioMock.mockImplementation(() => mockSocket)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+
+    const first = client.connect('app-reuse')
+    const second = client.connect('app-reuse')
+
+    expect(ioMock).toHaveBeenCalledTimes(1)
+    expect(second).toBe(first)
+  })
+
+  it('emits user_connect on connect without auth payload', async () => {
+    const mockSocket = createMockSocket('socket-auth')
+    ioMock.mockImplementation((url: string, options: IoOptions) => {
+      expect(options.auth).toBeUndefined()
+      return mockSocket
+    })
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-auth')
+
+    const connectHandler = mockSocket.on.mock.calls.find(call => call[0] === 'connect')?.[1] as () => void
+    expect(connectHandler).toBeDefined()
+    connectHandler()
+
+    expect(mockSocket.emit).toHaveBeenCalledWith(
+      'user_connect',
+      { workflow_id: 'app-auth' },
+      expect.any(Function),
+    )
+  })
+
+  it('disconnects a specific app and clears internal maps', async () => {
+    const mockSocket = createMockSocket('socket-disconnect-one')
+    ioMock.mockImplementation(() => mockSocket)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-disconnect')
+
+    expect(client.isConnected('app-disconnect')).toBe(true)
+    client.disconnect('app-disconnect')
+
+    expect(mockSocket.disconnect).toHaveBeenCalled()
+    expect(client.getSocket('app-disconnect')).toBeNull()
+    expect(client.isConnected('app-disconnect')).toBe(false)
+  })
+
+  it('disconnects all apps when no id is provided', async () => {
+    const socketA = createMockSocket('socket-a')
+    const socketB = createMockSocket('socket-b')
+    ioMock.mockImplementationOnce(() => socketA).mockImplementationOnce(() => socketB)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-a')
+    client.connect('app-b')
+
+    client.disconnect()
+
+    expect(socketA.disconnect).toHaveBeenCalled()
+    expect(socketB.disconnect).toHaveBeenCalled()
+    expect(client.getConnectedApps()).toEqual([])
+  })
+
+  it('reports connected apps, sockets, and debug info correctly', async () => {
+    const socketA = createMockSocket('socket-debug-a')
+    const socketB = createMockSocket('socket-debug-b')
+    socketB.connected = false
+    ioMock.mockImplementationOnce(() => socketA).mockImplementationOnce(() => socketB)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-a')
+    client.connect('app-b')
+
+    expect(client.getConnectedApps()).toEqual(['app-a'])
+
+    const debugInfo = client.getDebugInfo()
+    expect(debugInfo).toMatchObject({
+      'app-a': { connected: true, socketId: 'socket-debug-a' },
+      'app-b': { connected: false, socketId: 'socket-debug-b' },
+    })
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/collaboration-manager.ts b/web/app/components/workflow/collaboration/core/collaboration-manager.ts
new file mode 100644
index 0000000000..5000886222
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/collaboration-manager.ts
@@ -0,0 +1,1658 @@
+'use client'
+
+import type { Value } from 'loro-crdt'
+import type { Socket } from 'socket.io-client'
+import type {
+  CommonNodeType,
+  Edge,
+  Node,
+} from '../../types'
+import type {
+  CollaborationState,
+  CollaborationUpdate,
+  CursorPosition,
+  NodePanelPresenceMap,
+  NodePanelPresenceUser,
+  OnlineUser,
+  RestoreCompleteData,
+  RestoreIntentData,
+  RestoreRequestData,
+} from '../types/collaboration'
+import { cloneDeep } from 'es-toolkit/object'
+import { isEqual } from 'es-toolkit/predicate'
+import { LoroDoc, LoroList, LoroMap, UndoManager } from 'loro-crdt'
+import { CRDTProvider } from './crdt-provider'
+import { EventEmitter } from './event-emitter'
+import { emitWithAuthGuard, webSocketClient } from './websocket-manager'
+
+type NodePanelPresenceEventData = {
+  nodeId: string
+  action: 'open' | 'close'
+  user: NodePanelPresenceUser
+  clientId: string
+  timestamp: number
+}
+
+type ReactFlowStore = {
+  getState: () => {
+    getNodes: () => Node[]
+    setNodes: (nodes: Node[]) => void
+    getEdges: () => Edge[]
+    setEdges: (edges: Edge[]) => void
+  }
+}
+
+type CollaborationEventPayload = {
+  type: CollaborationUpdate['type']
+  data: Record<string, unknown>
+  timestamp: number
+  userId?: string
+}
+
+type LoroSubscribeEvent = {
+  by?: string
+}
+
+type LoroContainer = {
+  kind?: () => string
+  getAttached?: () => unknown
+}
+
+type GraphImportLogEntry = {
+  timestamp: number
+  appId: string | null
+  sources: Array<'nodes' | 'edges'>
+  before: {
+    nodes: Node[]
+    edges: Edge[]
+  }
+  after: {
+    nodes: Node[]
+    edges: Edge[]
+  }
+  meta: {
+    leaderId: string | null
+    isLeader: boolean
+    graphViewActive: boolean | null
+    pendingInitialSync: boolean
+  }
+}
+
+type SetNodesAnomalyReason = 'node_count_decrease' | 'start_removed'
+
+type SetNodesAnomalyLogEntry = {
+  timestamp: number
+  appId: string | null
+  source: string
+  reasons: SetNodesAnomalyReason[]
+  oldCount: number
+  newCount: number
+  removedNodeIds: string[]
+  oldStartNodeIds: string[]
+  newStartNodeIds: string[]
+  oldNodeIds: string[]
+  newNodeIds: string[]
+  visibilityState: DocumentVisibilityState | 'unknown'
+  meta: {
+    leaderId: string | null
+    isLeader: boolean
+    graphViewActive: boolean | null
+    pendingInitialSync: boolean
+    isConnected: boolean
+  }
+}
+
+type GraphSyncDiagnosticStage
+  = | 'nodes_subscribe'
+    | 'edges_subscribe'
+    | 'nodes_import_apply'
+    | 'edges_import_apply'
+    | 'schedule_graph_import_emit'
+    | 'graph_import_emit'
+    | 'start_import_log'
+    | 'finalize_import_log'
+
+type GraphSyncDiagnosticEvent = {
+  timestamp: number
+  appId: string | null
+  stage: GraphSyncDiagnosticStage
+  status: 'triggered' | 'skipped' | 'applied' | 'queued' | 'emitted' | 'snapshot'
+  reason?: string
+  details?: Record<string, unknown>
+  meta: {
+    leaderId: string | null
+    isLeader: boolean
+    isUndoRedoInProgress: boolean
+    pendingInitialSync: boolean
+    pendingGraphImportEmit: boolean
+    isConnected: boolean
+  }
+}
+
+const GRAPH_IMPORT_LOG_LIMIT = 20
+const SET_NODES_ANOMALY_LOG_LIMIT = 100
+const GRAPH_SYNC_DIAGNOSTIC_LOG_LIMIT = 400
+
+const toLoroValue = (value: unknown): Value => cloneDeep(value) as Value
+const toLoroRecord = (value: unknown): Record<string, Value> => cloneDeep(value) as Record<string, Value>
+export class CollaborationManager {
+  private doc: LoroDoc | null = null
+  private undoManager: UndoManager | null = null
+  private provider: CRDTProvider | null = null
+  private nodesMap: LoroMap<Record<string, Value>> | null = null
+  private edgesMap: LoroMap<Record<string, Value>> | null = null
+  private eventEmitter = new EventEmitter()
+  private currentAppId: string | null = null
+  private reactFlowStore: ReactFlowStore | null = null
+  private isLeader = false
+  private leaderId: string | null = null
+  private onlineUsers: OnlineUser[] = []
+  private cursors: Record<string, CursorPosition> = {}
+  private nodePanelPresence: NodePanelPresenceMap = {}
+  private activeConnections = new Set<string>()
+  private isUndoRedoInProgress = false
+  private pendingInitialSync = false
+  private rejoinInProgress = false
+  private pendingGraphImportEmit = false
+  private graphViewActive: boolean | null = null
+  private graphImportLogs: GraphImportLogEntry[] = []
+  private setNodesAnomalyLogs: SetNodesAnomalyLogEntry[] = []
+  private graphSyncDiagnostics: GraphSyncDiagnosticEvent[] = []
+  private pendingImportLog: {
+    timestamp: number
+    sources: Set<'nodes' | 'edges'>
+    before: {
+      nodes: Node[]
+      edges: Edge[]
+    }
+  } | null = null
+
+  private getActiveSocket(): Socket | null {
+    if (!this.currentAppId)
+      return null
+    return webSocketClient.getSocket(this.currentAppId)
+  }
+
+  private handleSessionUnauthorized = (): void => {
+    if (this.rejoinInProgress)
+      return
+    if (!this.currentAppId)
+      return
+
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    this.rejoinInProgress = true
+    console.warn('Collaboration session expired, attempting to rejoin workflow.')
+    emitWithAuthGuard(
+      socket,
+      'user_connect',
+      { workflow_id: this.currentAppId },
+      {
+        onAck: () => {
+          this.rejoinInProgress = false
+        },
+        onUnauthorized: () => {
+          this.rejoinInProgress = false
+          console.error('Rejoin failed due to authorization error, forcing disconnect.')
+          this.forceDisconnect()
+        },
+      },
+    )
+  }
+
+  private sendCollaborationEvent(payload: CollaborationEventPayload): void {
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    emitWithAuthGuard(socket, 'collaboration_event', payload, { onUnauthorized: this.handleSessionUnauthorized })
+  }
+
+  private sendGraphEvent(payload: Uint8Array): void {
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    emitWithAuthGuard(socket, 'graph_event', payload, { onUnauthorized: this.handleSessionUnauthorized })
+  }
+
+  private getNodeContainer(nodeId: string): LoroMap<Record<string, Value>> {
+    if (!this.nodesMap)
+      throw new Error('Nodes map not initialized')
+
+    let container = this.nodesMap.get(nodeId) as unknown
+
+    const isMapContainer = (value: unknown): value is LoroMap<Record<string, Value>> & LoroContainer => {
+      return !!value && typeof (value as LoroContainer).kind === 'function' && (value as LoroContainer).kind?.() === 'Map'
+    }
+
+    if (!container || !isMapContainer(container)) {
+      const previousValue = container
+      const newContainer = this.nodesMap.setContainer(nodeId, new LoroMap())
+      const attached = (newContainer as LoroContainer).getAttached?.() ?? newContainer
+      container = attached
+      if (previousValue && typeof previousValue === 'object')
+        this.populateNodeContainer(container as LoroMap<Record<string, Value>>, previousValue as Node)
+    }
+    else {
+      const attached = (container as LoroContainer).getAttached?.() ?? container
+      container = attached
+    }
+
+    return container as LoroMap<Record<string, Value>>
+  }
+
+  private ensureDataContainer(nodeContainer: LoroMap<Record<string, Value>>): LoroMap<Record<string, Value>> {
+    let dataContainer = nodeContainer.get('data') as unknown
+
+    if (!dataContainer || typeof (dataContainer as LoroContainer).kind !== 'function' || (dataContainer as LoroContainer).kind?.() !== 'Map')
+      dataContainer = nodeContainer.setContainer('data', new LoroMap())
+
+    const attached = (dataContainer as LoroContainer).getAttached?.() ?? dataContainer
+    return attached as LoroMap<Record<string, Value>>
+  }
+
+  private ensureList(nodeContainer: LoroMap<Record<string, Value>>, key: string): LoroList<unknown> {
+    const dataContainer = this.ensureDataContainer(nodeContainer)
+    let list = dataContainer.get(key) as unknown
+
+    if (!list || typeof (list as LoroContainer).kind !== 'function' || (list as LoroContainer).kind?.() !== 'List')
+      list = dataContainer.setContainer(key, new LoroList())
+
+    const attached = (list as LoroContainer).getAttached?.() ?? list
+    return attached as LoroList<unknown>
+  }
+
+  private exportNode(nodeId: string): Node {
+    const container = this.getNodeContainer(nodeId)
+    const json = container.toJSON() as Node
+    return {
+      ...json,
+      data: json.data || {},
+    }
+  }
+
+  private populateNodeContainer(container: LoroMap<Record<string, Value>>, node: Node): void {
+    const listFields = new Set(['variables', 'prompt_template', 'parameters'])
+    container.set('id', node.id)
+    container.set('type', node.type)
+    container.set('position', toLoroValue(node.position))
+    container.set('sourcePosition', node.sourcePosition)
+    container.set('targetPosition', node.targetPosition)
+
+    if (node.width === undefined)
+      container.delete('width')
+    else container.set('width', node.width)
+
+    if (node.height === undefined)
+      container.delete('height')
+    else container.set('height', node.height)
+
+    if (node.selected === undefined)
+      container.delete('selected')
+    else container.set('selected', node.selected)
+
+    const optionalProps: Array<keyof Node> = [
+      'parentId',
+      'positionAbsolute',
+      'extent',
+      'zIndex',
+      'draggable',
+      'selectable',
+      'dragHandle',
+      'dragging',
+      'connectable',
+      'expandParent',
+      'focusable',
+      'hidden',
+      'style',
+      'className',
+      'ariaLabel',
+      'resizing',
+      'deletable',
+    ]
+
+    optionalProps.forEach((prop) => {
+      const value = node[prop]
+      if (value === undefined)
+        container.delete(prop as string)
+      else
+        container.set(prop as string, toLoroValue(value))
+    })
+
+    const dataContainer = this.ensureDataContainer(container)
+    const handledKeys = new Set<string>()
+
+    Object.entries(node.data || {}).forEach(([key, value]) => {
+      if (!this.shouldSyncDataKey(key))
+        return
+      handledKeys.add(key)
+
+      if (listFields.has(key))
+        this.syncList(container, key, Array.isArray(value) ? value : [])
+      else
+        dataContainer.set(key, toLoroValue(value))
+    })
+
+    const existingData = dataContainer.toJSON() || {}
+    Object.keys(existingData).forEach((key) => {
+      if (!this.shouldSyncDataKey(key))
+        return
+      if (handledKeys.has(key))
+        return
+
+      dataContainer.delete(key)
+    })
+  }
+
+  private shouldSyncDataKey(key: string): boolean {
+    const syncDataAllowList = new Set(['_children', '_connectedSourceHandleIds', '_connectedTargetHandleIds', '_targetBranches'])
+    return (syncDataAllowList.has(key) || !key.startsWith('_')) && key !== 'selected'
+  }
+
+  private syncList(nodeContainer: LoroMap<Record<string, Value>>, key: string, desired: Array<unknown>): void {
+    const list = this.ensureList(nodeContainer, key)
+    const current = list.toJSON() as Array<unknown>
+    const target = Array.isArray(desired) ? desired : []
+    const minLength = Math.min(current.length, target.length)
+
+    for (let i = 0; i < minLength; i += 1) {
+      if (!isEqual(current[i], target[i])) {
+        list.delete(i, 1)
+        list.insert(i, cloneDeep(target[i]))
+      }
+    }
+
+    if (current.length > target.length) {
+      list.delete(target.length, current.length - target.length)
+    }
+    else if (target.length > current.length) {
+      for (let i = current.length; i < target.length; i += 1)
+        list.insert(i, cloneDeep(target[i]))
+    }
+  }
+
+  private getNodePanelPresenceSnapshot(): NodePanelPresenceMap {
+    const snapshot: NodePanelPresenceMap = {}
+    Object.entries(this.nodePanelPresence).forEach(([nodeId, viewers]) => {
+      snapshot[nodeId] = { ...viewers }
+    })
+    return snapshot
+  }
+
+  private applyNodePanelPresenceUpdate(update: NodePanelPresenceEventData): void {
+    const { nodeId, action, clientId, user, timestamp } = update
+
+    if (action === 'open') {
+      // ensure a client only appears on a single node at a time
+      Object.entries(this.nodePanelPresence).forEach(([id, viewers]) => {
+        if (viewers[clientId]) {
+          delete viewers[clientId]
+          if (Object.keys(viewers).length === 0)
+            delete this.nodePanelPresence[id]
+        }
+      })
+
+      if (!this.nodePanelPresence[nodeId])
+        this.nodePanelPresence[nodeId] = {}
+
+      this.nodePanelPresence[nodeId][clientId] = {
+        ...user,
+        clientId,
+        timestamp: timestamp || Date.now(),
+      }
+    }
+    else {
+      const viewers = this.nodePanelPresence[nodeId]
+      if (viewers) {
+        delete viewers[clientId]
+        if (Object.keys(viewers).length === 0)
+          delete this.nodePanelPresence[nodeId]
+      }
+    }
+
+    this.eventEmitter.emit('nodePanelPresence', this.getNodePanelPresenceSnapshot())
+  }
+
+  private cleanupNodePanelPresence(activeClientIds: Set<string>): void {
+    let hasChanges = false
+
+    Object.entries(this.nodePanelPresence).forEach(([nodeId, viewers]) => {
+      Object.keys(viewers).forEach((clientId) => {
+        const clientActive = activeClientIds.has(clientId)
+
+        if (!clientActive) {
+          delete viewers[clientId]
+          hasChanges = true
+        }
+      })
+
+      if (Object.keys(viewers).length === 0)
+        delete this.nodePanelPresence[nodeId]
+    })
+
+    if (hasChanges)
+      this.eventEmitter.emit('nodePanelPresence', this.getNodePanelPresenceSnapshot())
+  }
+
+  init = (appId: string, reactFlowStore: ReactFlowStore): void => {
+    if (!reactFlowStore) {
+      console.warn('CollaborationManager.init called without reactFlowStore, deferring to connect()')
+      return
+    }
+    this.connect(appId, reactFlowStore)
+  }
+
+  setNodes = (oldNodes: Node[], newNodes: Node[], source = 'collaboration-manager:setNodes'): void => {
+    if (!this.doc)
+      return
+
+    // Don't track operations during undo/redo to prevent loops
+    if (this.isUndoRedoInProgress)
+      return
+
+    this.seedCrdtGraphFromReactFlowIfNeeded()
+    this.captureSetNodesAnomaly(oldNodes, newNodes, source)
+    this.syncNodes(oldNodes, newNodes)
+    this.doc.commit()
+  }
+
+  setEdges = (oldEdges: Edge[], newEdges: Edge[]): void => {
+    if (!this.doc)
+      return
+
+    // Don't track operations during undo/redo to prevent loops
+    if (this.isUndoRedoInProgress)
+      return
+
+    this.seedCrdtGraphFromReactFlowIfNeeded()
+    this.syncEdges(oldEdges, newEdges)
+    this.doc.commit()
+  }
+
+  destroy = (): void => {
+    this.disconnect()
+  }
+
+  async connect(appId: string, reactFlowStore?: ReactFlowStore): Promise<string> {
+    const connectionId = Math.random().toString(36).substring(2, 11)
+
+    this.activeConnections.add(connectionId)
+
+    if (this.currentAppId === appId && this.doc) {
+      // Already connected to the same app, only update store if provided and we don't have one
+      if (reactFlowStore && !this.reactFlowStore)
+        this.reactFlowStore = reactFlowStore
+
+      return connectionId
+    }
+
+    // Only disconnect if switching to a different app
+    if (this.currentAppId && this.currentAppId !== appId)
+      this.forceDisconnect()
+
+    this.currentAppId = appId
+    // Only set store if provided
+    if (reactFlowStore)
+      this.reactFlowStore = reactFlowStore
+
+    const socket = webSocketClient.connect(appId)
+
+    // Setup event listeners BEFORE any other operations
+    this.setupSocketEventListeners(socket)
+
+    this.doc = new LoroDoc()
+    this.nodesMap = this.doc.getMap('nodes') as LoroMap<Record<string, Value>>
+    this.edgesMap = this.doc.getMap('edges') as LoroMap<Record<string, Value>>
+
+    // Initialize UndoManager for collaborative undo/redo
+    this.undoManager = new UndoManager(this.doc, {
+      maxUndoSteps: 100,
+      mergeInterval: 500, // Merge operations within 500ms
+      excludeOriginPrefixes: [], // Don't exclude anything - let UndoManager track all local operations
+      onPush: (_isUndo, _range, _event) => {
+        // Store current selection state when an operation is pushed
+        const selectedNode = this.reactFlowStore?.getState().getNodes().find((n: Node) => n.data?.selected)
+
+        // Emit event to update UI button states when new operation is pushed
+        setTimeout(() => {
+          this.eventEmitter.emit('undoRedoStateChange', {
+            canUndo: this.undoManager?.canUndo() || false,
+            canRedo: this.undoManager?.canRedo() || false,
+          })
+        }, 0)
+
+        return {
+          value: {
+            selectedNodeId: selectedNode?.id || null,
+            timestamp: Date.now(),
+          },
+          cursors: [],
+        }
+      },
+      onPop: (_isUndo, value, _counterRange) => {
+        // Restore selection state when undoing/redoing
+        if (value?.value && typeof value.value === 'object' && 'selectedNodeId' in value.value && this.reactFlowStore) {
+          const selectedNodeId = (value.value as { selectedNodeId?: string | null }).selectedNodeId
+          if (selectedNodeId) {
+            const state = this.reactFlowStore.getState()
+            const { setNodes } = state
+            const nodes = state.getNodes()
+            const newNodes = nodes.map((n: Node) => ({
+              ...n,
+              data: {
+                ...n.data,
+                selected: n.id === selectedNodeId,
+              },
+            }))
+            this.captureSetNodesAnomaly(nodes, newNodes, 'reactflow-native:undo-redo-selection-restore')
+            setNodes(newNodes)
+          }
+        }
+      },
+    })
+
+    this.provider = new CRDTProvider(socket, this.doc, this.handleSessionUnauthorized)
+
+    this.setupSubscriptions()
+
+    // Force user_connect if already connected
+    if (socket.connected)
+      emitWithAuthGuard(socket, 'user_connect', { workflow_id: appId }, { onUnauthorized: this.handleSessionUnauthorized })
+
+    return connectionId
+  }
+
+  disconnect = (connectionId?: string): void => {
+    if (connectionId)
+      this.activeConnections.delete(connectionId)
+
+    // Only disconnect when no more connections
+    if (this.activeConnections.size === 0)
+      this.forceDisconnect()
+  }
+
+  private forceDisconnect = (): void => {
+    if (this.currentAppId)
+      webSocketClient.disconnect(this.currentAppId)
+
+    this.provider?.destroy()
+    this.undoManager = null
+    this.doc = null
+    this.provider = null
+    this.nodesMap = null
+    this.edgesMap = null
+    this.currentAppId = null
+    this.reactFlowStore = null
+    this.cursors = {}
+    this.onlineUsers = []
+    this.nodePanelPresence = {}
+    this.isUndoRedoInProgress = false
+    this.rejoinInProgress = false
+    this.clearGraphImportLog()
+
+    // Only reset leader status when actually disconnecting
+    const wasLeader = this.isLeader
+    this.isLeader = false
+    this.leaderId = null
+
+    if (wasLeader)
+      this.eventEmitter.emit('leaderChange', false)
+
+    this.activeConnections.clear()
+    this.eventEmitter.removeAllListeners()
+  }
+
+  isConnected(): boolean {
+    return this.currentAppId ? webSocketClient.isConnected(this.currentAppId) : false
+  }
+
+  getNodes(): Node[] {
+    if (!this.nodesMap)
+      return []
+    return Array.from(this.nodesMap.keys()).map(id => this.exportNode(id as string))
+  }
+
+  getEdges(): Edge[] {
+    return this.edgesMap ? Array.from(this.edgesMap.values()) as Edge[] : []
+  }
+
+  emitCursorMove(position: CursorPosition): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    this.sendCollaborationEvent({
+      type: 'mouse_move',
+      userId: socket.id,
+      data: { x: position.x, y: position.y },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitSyncRequest(): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'sync_request',
+      data: { timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitWorkflowUpdate(appId: string): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'workflow_update',
+      data: { appId, timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitNodePanelPresence(nodeId: string, isOpen: boolean, user: NodePanelPresenceUser): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    const socket = this.getActiveSocket()
+    if (!socket || !nodeId || !user?.userId)
+      return
+
+    const payload: NodePanelPresenceEventData = {
+      nodeId,
+      action: isOpen ? 'open' : 'close',
+      user,
+      clientId: socket.id as string,
+      timestamp: Date.now(),
+    }
+
+    this.sendCollaborationEvent({
+      type: 'node_panel_presence',
+      data: payload,
+      timestamp: payload.timestamp,
+    })
+
+    this.applyNodePanelPresenceUpdate(payload)
+  }
+
+  onSyncRequest(callback: () => void): () => void {
+    return this.eventEmitter.on('syncRequest', callback)
+  }
+
+  onGraphImport(callback: (payload: { nodes: Node[], edges: Edge[] }) => void): () => void {
+    return this.eventEmitter.on('graphImport', callback)
+  }
+
+  onStateChange(callback: (state: Partial<CollaborationState>) => void): () => void {
+    return this.eventEmitter.on('stateChange', callback)
+  }
+
+  onCursorUpdate(callback: (cursors: Record<string, CursorPosition>) => void): () => void {
+    return this.eventEmitter.on('cursors', callback)
+  }
+
+  onOnlineUsersUpdate(callback: (users: OnlineUser[]) => void): () => void {
+    return this.eventEmitter.on('onlineUsers', callback)
+  }
+
+  onWorkflowUpdate(callback: (update: { appId: string, timestamp: number }) => void): () => void {
+    return this.eventEmitter.on('workflowUpdate', callback)
+  }
+
+  onVarsAndFeaturesUpdate(callback: (update: CollaborationUpdate) => void): () => void {
+    return this.eventEmitter.on('varsAndFeaturesUpdate', callback)
+  }
+
+  onAppStateUpdate(callback: (update: CollaborationUpdate) => void): () => void {
+    return this.eventEmitter.on('appStateUpdate', callback)
+  }
+
+  onAppPublishUpdate(callback: (update: CollaborationUpdate) => void): () => void {
+    return this.eventEmitter.on('appPublishUpdate', callback)
+  }
+
+  onAppMetaUpdate(callback: (update: CollaborationUpdate) => void): () => void {
+    return this.eventEmitter.on('appMetaUpdate', callback)
+  }
+
+  onMcpServerUpdate(callback: (update: CollaborationUpdate) => void): () => void {
+    return this.eventEmitter.on('mcpServerUpdate', callback)
+  }
+
+  onNodePanelPresenceUpdate(callback: (presence: NodePanelPresenceMap) => void): () => void {
+    const off = this.eventEmitter.on('nodePanelPresence', callback)
+    callback(this.getNodePanelPresenceSnapshot())
+    return off
+  }
+
+  onLeaderChange(callback: (isLeader: boolean) => void): () => void {
+    return this.eventEmitter.on('leaderChange', callback)
+  }
+
+  onCommentsUpdate(callback: (update: { appId: string, timestamp: number }) => void): () => void {
+    return this.eventEmitter.on('commentsUpdate', callback)
+  }
+
+  emitCommentsUpdate(appId: string): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'comments_update',
+      data: { appId, timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitHistoryAction(action: 'undo' | 'redo' | 'jump'): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'workflow_history_action',
+      data: { action },
+      timestamp: Date.now(),
+    })
+  }
+
+  onUndoRedoStateChange(callback: (state: { canUndo: boolean, canRedo: boolean }) => void): () => void {
+    return this.eventEmitter.on('undoRedoStateChange', callback)
+  }
+
+  onHistoryAction(callback: (payload: { action: 'undo' | 'redo' | 'jump', userId?: string }) => void): () => void {
+    return this.eventEmitter.on('historyAction', callback)
+  }
+
+  emitRestoreRequest(data: RestoreRequestData): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'workflow_restore_request',
+      data: data as unknown as Record<string, unknown>,
+      timestamp: Date.now(),
+    })
+  }
+
+  emitRestoreIntent(data: RestoreIntentData): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'workflow_restore_intent',
+      data: data as unknown as Record<string, unknown>,
+      timestamp: Date.now(),
+    })
+  }
+
+  emitRestoreComplete(data: RestoreCompleteData): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'workflow_restore_complete',
+      data: data as unknown as Record<string, unknown>,
+      timestamp: Date.now(),
+    })
+  }
+
+  onRestoreRequest(callback: (data: RestoreRequestData) => void): () => void {
+    return this.eventEmitter.on('restoreRequest', callback)
+  }
+
+  onRestoreIntent(callback: (data: RestoreIntentData) => void): () => void {
+    return this.eventEmitter.on('restoreIntent', callback)
+  }
+
+  onRestoreComplete(callback: (data: RestoreCompleteData) => void): () => void {
+    return this.eventEmitter.on('restoreComplete', callback)
+  }
+
+  getLeaderId(): string | null {
+    return this.leaderId
+  }
+
+  getIsLeader(): boolean {
+    return this.isLeader
+  }
+
+  // Collaborative undo/redo methods
+  undo(): boolean {
+    if (!this.undoManager)
+      return false
+
+    const canUndo = this.undoManager.canUndo()
+    if (canUndo) {
+      this.isUndoRedoInProgress = true
+      const result = this.undoManager.undo()
+
+      // After undo, manually update React state from CRDT without triggering collaboration
+      const reactFlowStore = this.reactFlowStore
+      if (result && reactFlowStore) {
+        requestAnimationFrame(() => {
+          // Get ReactFlow's native setters, not the collaborative ones
+          const state = reactFlowStore.getState()
+          const previousNodes = state.getNodes()
+          const updatedNodes = Array.from(this.nodesMap?.values() || []) as Node[]
+          const updatedEdges = Array.from(this.edgesMap?.values() || []) as Edge[]
+          // Call ReactFlow's native setters directly to avoid triggering collaboration
+          this.captureSetNodesAnomaly(previousNodes, updatedNodes, 'reactflow-native:undo-apply')
+          state.setNodes(updatedNodes)
+          state.setEdges(updatedEdges)
+
+          this.isUndoRedoInProgress = false
+
+          // Emit event to update UI button states
+          this.eventEmitter.emit('undoRedoStateChange', {
+            canUndo: this.undoManager?.canUndo() || false,
+            canRedo: this.undoManager?.canRedo() || false,
+          })
+        })
+      }
+      else {
+        this.isUndoRedoInProgress = false
+      }
+
+      return result
+    }
+
+    return false
+  }
+
+  redo(): boolean {
+    if (!this.undoManager)
+      return false
+
+    const canRedo = this.undoManager.canRedo()
+    if (canRedo) {
+      this.isUndoRedoInProgress = true
+      const result = this.undoManager.redo()
+
+      // After redo, manually update React state from CRDT without triggering collaboration
+      const reactFlowStore = this.reactFlowStore
+      if (result && reactFlowStore) {
+        requestAnimationFrame(() => {
+          // Get ReactFlow's native setters, not the collaborative ones
+          const state = reactFlowStore.getState()
+          const previousNodes = state.getNodes()
+          const updatedNodes = Array.from(this.nodesMap?.values() || []) as Node[]
+          const updatedEdges = Array.from(this.edgesMap?.values() || []) as Edge[]
+          // Call ReactFlow's native setters directly to avoid triggering collaboration
+          this.captureSetNodesAnomaly(previousNodes, updatedNodes, 'reactflow-native:redo-apply')
+          state.setNodes(updatedNodes)
+          state.setEdges(updatedEdges)
+
+          this.isUndoRedoInProgress = false
+
+          // Emit event to update UI button states
+          this.eventEmitter.emit('undoRedoStateChange', {
+            canUndo: this.undoManager?.canUndo() || false,
+            canRedo: this.undoManager?.canRedo() || false,
+          })
+        })
+      }
+      else {
+        this.isUndoRedoInProgress = false
+      }
+
+      return result
+    }
+
+    return false
+  }
+
+  canUndo(): boolean {
+    if (!this.undoManager)
+      return false
+    return this.undoManager.canUndo()
+  }
+
+  canRedo(): boolean {
+    if (!this.undoManager)
+      return false
+    return this.undoManager.canRedo()
+  }
+
+  clearUndoStack(): void {
+    if (!this.undoManager)
+      return
+    this.undoManager.clear()
+  }
+
+  private syncNodes(oldNodes: Node[], newNodes: Node[]): void {
+    if (!this.nodesMap || !this.doc)
+      return
+
+    const oldNodesMap = new Map(oldNodes.map(node => [node.id, node]))
+    const newNodesMap = new Map(newNodes.map(node => [node.id, node]))
+
+    oldNodes.forEach((oldNode) => {
+      if (!newNodesMap.has(oldNode.id)) {
+        this.nodesMap?.delete(oldNode.id)
+      }
+    })
+
+    newNodes.forEach((newNode) => {
+      const oldNode = oldNodesMap.get(newNode.id)
+      if (oldNode && oldNode === newNode)
+        return
+      if (oldNode && isEqual(oldNode, newNode))
+        return
+
+      const nodeContainer = this.getNodeContainer(newNode.id)
+      this.populateNodeContainer(nodeContainer, newNode)
+    })
+  }
+
+  private syncEdges(oldEdges: Edge[], newEdges: Edge[]): void {
+    if (!this.edgesMap)
+      return
+
+    const oldEdgesMap = new Map(oldEdges.map(edge => [edge.id, edge]))
+    const newEdgesMap = new Map(newEdges.map(edge => [edge.id, edge]))
+
+    oldEdges.forEach((oldEdge) => {
+      if (!newEdgesMap.has(oldEdge.id)) {
+        this.edgesMap?.delete(oldEdge.id)
+      }
+    })
+
+    newEdges.forEach((newEdge) => {
+      const oldEdge = oldEdgesMap.get(newEdge.id)
+      if (!oldEdge || !isEqual(oldEdge, newEdge)) {
+        const clonedEdge = toLoroRecord(newEdge)
+        this.edgesMap?.set(newEdge.id, clonedEdge)
+      }
+    })
+  }
+
+  private setupSubscriptions(): void {
+    this.nodesMap?.subscribe((event: LoroSubscribeEvent) => {
+      const reactFlowStore = this.reactFlowStore
+      const eventBy = event.by ?? 'unknown'
+      this.recordGraphSyncDiagnostic(
+        'nodes_subscribe',
+        'triggered',
+        undefined,
+        {
+          eventBy,
+          hasReactFlowStore: Boolean(reactFlowStore),
+        },
+      )
+
+      if (eventBy !== 'import') {
+        this.recordGraphSyncDiagnostic('nodes_subscribe', 'skipped', 'event_by_not_import', { eventBy })
+        return
+      }
+
+      if (!reactFlowStore) {
+        this.recordGraphSyncDiagnostic('nodes_subscribe', 'skipped', 'reactflow_store_missing')
+        return
+      }
+
+      // Don't update React nodes during undo/redo to prevent loops
+      if (this.isUndoRedoInProgress) {
+        this.recordGraphSyncDiagnostic('nodes_subscribe', 'skipped', 'undo_redo_in_progress')
+        return
+      }
+
+      this.recordGraphSyncDiagnostic('nodes_subscribe', 'queued', 'raf_scheduled')
+      requestAnimationFrame(() => {
+        const state = reactFlowStore.getState()
+        const previousNodes: Node[] = state.getNodes()
+        const previousEdges: Edge[] = state.getEdges()
+        this.startImportLog('nodes', { nodes: previousNodes, edges: previousEdges })
+        const previousNodeMap = new Map(previousNodes.map(node => [node.id, node]))
+        const selectedIds = new Set(
+          previousNodes
+            .filter(node => node.data?.selected)
+            .map(node => node.id),
+        )
+
+        this.pendingInitialSync = false
+
+        const updatedNodes = Array
+          .from(this.nodesMap?.keys() || [])
+          .map((nodeId) => {
+            const node = this.exportNode(nodeId as string)
+            const clonedNode: Node = {
+              ...node,
+              data: {
+                ...(node.data || {}),
+              },
+            }
+            const clonedNodeData = clonedNode.data as (CommonNodeType & Record<string, unknown>)
+            // Keep the previous node's private data properties (starting with _)
+            const previousNode = previousNodeMap.get(clonedNode.id)
+            if (previousNode?.data) {
+              const previousData = previousNode.data as Record<string, unknown>
+              Object.entries(previousData)
+                .filter(([key]) => key.startsWith('_'))
+                .forEach(([key, value]) => {
+                  if (!(key in clonedNodeData))
+                    clonedNodeData[key] = value
+                })
+            }
+
+            if (selectedIds.has(clonedNode.id))
+              clonedNode.data.selected = true
+
+            return clonedNode
+          })
+
+        // Call ReactFlow's native setter directly to avoid triggering collaboration
+        this.captureSetNodesAnomaly(previousNodes, updatedNodes, 'reactflow-native:import-nodes-map-subscribe')
+        state.setNodes(updatedNodes)
+        this.recordGraphSyncDiagnostic(
+          'nodes_import_apply',
+          'applied',
+          undefined,
+          {
+            eventBy,
+            previousNodeCount: previousNodes.length,
+            updatedNodeCount: updatedNodes.length,
+            previousEdgeCount: previousEdges.length,
+            selectedCount: selectedIds.size,
+          },
+        )
+
+        this.scheduleGraphImportEmit()
+      })
+    })
+
+    this.edgesMap?.subscribe((event: LoroSubscribeEvent) => {
+      const reactFlowStore = this.reactFlowStore
+      const eventBy = event.by ?? 'unknown'
+      this.recordGraphSyncDiagnostic(
+        'edges_subscribe',
+        'triggered',
+        undefined,
+        {
+          eventBy,
+          hasReactFlowStore: Boolean(reactFlowStore),
+        },
+      )
+
+      if (eventBy !== 'import') {
+        this.recordGraphSyncDiagnostic('edges_subscribe', 'skipped', 'event_by_not_import', { eventBy })
+        return
+      }
+
+      if (!reactFlowStore) {
+        this.recordGraphSyncDiagnostic('edges_subscribe', 'skipped', 'reactflow_store_missing')
+        return
+      }
+
+      // Don't update React edges during undo/redo to prevent loops
+      if (this.isUndoRedoInProgress) {
+        this.recordGraphSyncDiagnostic('edges_subscribe', 'skipped', 'undo_redo_in_progress')
+        return
+      }
+
+      this.recordGraphSyncDiagnostic('edges_subscribe', 'queued', 'raf_scheduled')
+      requestAnimationFrame(() => {
+        // Get ReactFlow's native setters, not the collaborative ones
+        const state = reactFlowStore.getState()
+        const previousNodes = state.getNodes()
+        const previousEdges = state.getEdges()
+        this.startImportLog('edges', { nodes: previousNodes, edges: previousEdges })
+        const updatedEdges = Array.from(this.edgesMap?.values() || []) as Edge[]
+
+        this.pendingInitialSync = false
+
+        // Call ReactFlow's native setter directly to avoid triggering collaboration
+        state.setEdges(updatedEdges)
+        this.recordGraphSyncDiagnostic(
+          'edges_import_apply',
+          'applied',
+          undefined,
+          {
+            eventBy,
+            previousNodeCount: previousNodes.length,
+            previousEdgeCount: previousEdges.length,
+            updatedEdgeCount: updatedEdges.length,
+          },
+        )
+
+        this.scheduleGraphImportEmit()
+      })
+    })
+  }
+
+  private scheduleGraphImportEmit(): void {
+    if (this.pendingGraphImportEmit) {
+      this.recordGraphSyncDiagnostic(
+        'schedule_graph_import_emit',
+        'skipped',
+        'already_pending',
+      )
+      return
+    }
+
+    this.recordGraphSyncDiagnostic('schedule_graph_import_emit', 'queued')
+    this.pendingGraphImportEmit = true
+    requestAnimationFrame(() => {
+      const beforeFinalizeNodes = this.getNodes().length
+      const beforeFinalizeEdges = this.getEdges().length
+      this.pendingGraphImportEmit = false
+      this.finalizeImportLog()
+      const mergedNodes = this.mergeLocalNodeState(this.getNodes())
+      const mergedEdges = this.getEdges()
+      this.recordGraphSyncDiagnostic(
+        'graph_import_emit',
+        'emitted',
+        undefined,
+        {
+          mergedNodeCount: mergedNodes.length,
+          mergedEdgeCount: mergedEdges.length,
+          crdtNodeCountBeforeFinalize: beforeFinalizeNodes,
+          crdtEdgeCountBeforeFinalize: beforeFinalizeEdges,
+        },
+      )
+      this.eventEmitter.emit('graphImport', {
+        nodes: mergedNodes,
+        edges: mergedEdges,
+      })
+    })
+  }
+
+  refreshGraphSynchronously(): void {
+    const mergedNodes = this.mergeLocalNodeState(this.getNodes())
+    this.eventEmitter.emit('graphImport', {
+      nodes: mergedNodes,
+      edges: this.getEdges(),
+    })
+  }
+
+  private mergeLocalNodeState(nodes: Node[]): Node[] {
+    const reactFlowStore = this.reactFlowStore
+    const state = reactFlowStore?.getState()
+    const localNodes = state?.getNodes() || []
+
+    if (localNodes.length === 0)
+      return nodes
+
+    const localNodesMap = new Map(localNodes.map(node => [node.id, node]))
+    return nodes.map((node) => {
+      const localNode = localNodesMap.get(node.id)
+      if (!localNode)
+        return node
+
+      const nextNode = cloneDeep(node)
+      const nextData = { ...(nextNode.data || {}) } as Node['data']
+      const nextDataRecord = nextData as Record<string, unknown>
+      const localData = localNode.data as Record<string, unknown> | undefined
+
+      if (localData) {
+        Object.entries(localData).forEach(([key, value]) => {
+          if (key === 'selected' || key.startsWith('_'))
+            nextDataRecord[key] = value
+        })
+      }
+
+      if (!Object.prototype.hasOwnProperty.call(nextDataRecord, 'selected') && localNode.selected !== undefined)
+        nextDataRecord.selected = localNode.selected
+
+      nextNode.data = nextData
+      return nextNode
+    })
+  }
+
+  getGraphImportLog(): GraphImportLogEntry[] {
+    return cloneDeep(this.graphImportLogs)
+  }
+
+  clearGraphImportLog(): void {
+    this.graphImportLogs = []
+    this.setNodesAnomalyLogs = []
+    this.graphSyncDiagnostics = []
+    this.pendingImportLog = null
+  }
+
+  downloadGraphImportLog(): void {
+    const reactFlowState = this.reactFlowStore?.getState()
+    const payload = {
+      appId: this.currentAppId,
+      generatedAt: new Date().toISOString(),
+      entries: this.graphImportLogs,
+      setNodesAnomalies: this.setNodesAnomalyLogs,
+      syncDiagnostics: this.graphSyncDiagnostics,
+      summary: {
+        logCount: this.graphImportLogs.length,
+        setNodesAnomalyCount: this.setNodesAnomalyLogs.length,
+        syncDiagnosticCount: this.graphSyncDiagnostics.length,
+        leaderId: this.leaderId,
+        isLeader: this.isLeader,
+        graphViewActive: this.graphViewActive,
+        pendingInitialSync: this.pendingInitialSync,
+        isConnected: this.isConnected(),
+        hasDoc: Boolean(this.doc),
+        hasReactFlowStore: Boolean(this.reactFlowStore),
+        onlineUsersCount: this.onlineUsers.length,
+        crdtCounts: {
+          nodes: this.getNodes().length,
+          edges: this.getEdges().length,
+        },
+        reactFlowCounts: {
+          nodes: reactFlowState?.getNodes().length ?? 0,
+          edges: reactFlowState?.getEdges().length ?? 0,
+        },
+      },
+    }
+    const stamp = new Date().toISOString().replace(/[:.]/g, '-')
+    const appSuffix = this.currentAppId ?? 'unknown'
+    const fileName = `workflow-graph-import-log-${appSuffix}-${stamp}.json`
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = fileName
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  private recordGraphSyncDiagnostic(
+    stage: GraphSyncDiagnosticStage,
+    status: GraphSyncDiagnosticEvent['status'],
+    reason?: string,
+    details?: Record<string, unknown>,
+  ): void {
+    const entry: GraphSyncDiagnosticEvent = {
+      timestamp: Date.now(),
+      appId: this.currentAppId,
+      stage,
+      status,
+      reason,
+      details,
+      meta: {
+        leaderId: this.leaderId,
+        isLeader: this.isLeader,
+        isUndoRedoInProgress: this.isUndoRedoInProgress,
+        pendingInitialSync: this.pendingInitialSync,
+        pendingGraphImportEmit: this.pendingGraphImportEmit,
+        isConnected: this.isConnected(),
+      },
+    }
+
+    this.graphSyncDiagnostics.push(entry)
+    if (this.graphSyncDiagnostics.length > GRAPH_SYNC_DIAGNOSTIC_LOG_LIMIT)
+      this.graphSyncDiagnostics.splice(0, this.graphSyncDiagnostics.length - GRAPH_SYNC_DIAGNOSTIC_LOG_LIMIT)
+  }
+
+  private captureSetNodesAnomaly(oldNodes: Node[], newNodes: Node[], source: string): void {
+    const oldNodeIds = oldNodes.map(node => node.id)
+    const newNodeIds = newNodes.map(node => node.id)
+    const newNodeIdSet = new Set(newNodeIds)
+    const removedNodeIds = oldNodeIds.filter(nodeId => !newNodeIdSet.has(nodeId))
+
+    const oldStartNodeIds = oldNodes
+      .filter(node => (node.data as CommonNodeType | undefined)?.type === 'start')
+      .map(node => node.id)
+    const newStartNodeIds = newNodes
+      .filter(node => (node.data as CommonNodeType | undefined)?.type === 'start')
+      .map(node => node.id)
+
+    const reasons: SetNodesAnomalyReason[] = []
+    if (newNodes.length < oldNodes.length)
+      reasons.push('node_count_decrease')
+    if (oldStartNodeIds.length > 0 && newStartNodeIds.length === 0)
+      reasons.push('start_removed')
+
+    if (!reasons.length)
+      return
+
+    const entry: SetNodesAnomalyLogEntry = {
+      timestamp: Date.now(),
+      appId: this.currentAppId,
+      source,
+      reasons,
+      oldCount: oldNodes.length,
+      newCount: newNodes.length,
+      removedNodeIds,
+      oldStartNodeIds,
+      newStartNodeIds,
+      oldNodeIds,
+      newNodeIds,
+      visibilityState: typeof document === 'undefined' ? 'unknown' : document.visibilityState,
+      meta: {
+        leaderId: this.leaderId,
+        isLeader: this.isLeader,
+        graphViewActive: this.graphViewActive,
+        pendingInitialSync: this.pendingInitialSync,
+        isConnected: this.isConnected(),
+      },
+    }
+    this.setNodesAnomalyLogs.push(entry)
+    if (this.setNodesAnomalyLogs.length > SET_NODES_ANOMALY_LOG_LIMIT)
+      this.setNodesAnomalyLogs.splice(0, this.setNodesAnomalyLogs.length - SET_NODES_ANOMALY_LOG_LIMIT)
+  }
+
+  private snapshotReactFlowGraph(): { nodes: Node[], edges: Edge[] } {
+    if (!this.reactFlowStore) {
+      return {
+        nodes: this.getNodes(),
+        edges: this.getEdges(),
+      }
+    }
+
+    const state = this.reactFlowStore.getState()
+    return {
+      nodes: cloneDeep(state.getNodes()),
+      edges: cloneDeep(state.getEdges()),
+    }
+  }
+
+  private startImportLog(source: 'nodes' | 'edges', before?: { nodes: Node[], edges: Edge[] }): void {
+    if (!this.pendingImportLog) {
+      const snapshot = before ?? this.snapshotReactFlowGraph()
+      this.pendingImportLog = {
+        timestamp: Date.now(),
+        sources: new Set([source]),
+        before: {
+          nodes: cloneDeep(snapshot.nodes),
+          edges: cloneDeep(snapshot.edges),
+        },
+      }
+      this.recordGraphSyncDiagnostic(
+        'start_import_log',
+        'snapshot',
+        'created',
+        {
+          source,
+          beforeNodes: snapshot.nodes.length,
+          beforeEdges: snapshot.edges.length,
+        },
+      )
+      return
+    }
+    this.pendingImportLog.sources.add(source)
+    this.recordGraphSyncDiagnostic(
+      'start_import_log',
+      'snapshot',
+      'merged_source',
+      {
+        source,
+        sourceCount: this.pendingImportLog.sources.size,
+      },
+    )
+  }
+
+  private finalizeImportLog(): void {
+    if (!this.pendingImportLog) {
+      this.recordGraphSyncDiagnostic('finalize_import_log', 'skipped', 'no_pending_import')
+      return
+    }
+
+    const afterSnapshot = this.snapshotReactFlowGraph()
+    const entry: GraphImportLogEntry = {
+      timestamp: this.pendingImportLog.timestamp,
+      appId: this.currentAppId,
+      sources: Array.from(this.pendingImportLog.sources),
+      before: {
+        nodes: this.pendingImportLog.before.nodes,
+        edges: this.pendingImportLog.before.edges,
+      },
+      after: {
+        nodes: cloneDeep(afterSnapshot.nodes),
+        edges: cloneDeep(afterSnapshot.edges),
+      },
+      meta: {
+        leaderId: this.leaderId,
+        isLeader: this.isLeader,
+        graphViewActive: this.graphViewActive,
+        pendingInitialSync: this.pendingInitialSync,
+      },
+    }
+
+    this.graphImportLogs.push(entry)
+    this.recordGraphSyncDiagnostic(
+      'finalize_import_log',
+      'snapshot',
+      undefined,
+      {
+        sources: entry.sources,
+        beforeNodes: entry.before.nodes.length,
+        beforeEdges: entry.before.edges.length,
+        afterNodes: entry.after.nodes.length,
+        afterEdges: entry.after.edges.length,
+      },
+    )
+    if (this.graphImportLogs.length > GRAPH_IMPORT_LOG_LIMIT)
+      this.graphImportLogs.splice(0, this.graphImportLogs.length - GRAPH_IMPORT_LOG_LIMIT)
+    this.pendingImportLog = null
+  }
+
+  private setupSocketEventListeners(socket: Socket): void {
+    socket.on('collaboration_update', (update: CollaborationUpdate) => {
+      if (update.type === 'mouse_move') {
+        // Update cursor state for this user
+        const data = update.data as { x: number, y: number }
+        this.cursors[update.userId] = {
+          x: data.x,
+          y: data.y,
+          userId: update.userId,
+          timestamp: update.timestamp,
+        }
+
+        this.eventEmitter.emit('cursors', { ...this.cursors })
+      }
+      else if (update.type === 'vars_and_features_update') {
+        this.eventEmitter.emit('varsAndFeaturesUpdate', update)
+      }
+      else if (update.type === 'app_state_update') {
+        this.eventEmitter.emit('appStateUpdate', update)
+      }
+      else if (update.type === 'app_meta_update') {
+        this.eventEmitter.emit('appMetaUpdate', update)
+      }
+      else if (update.type === 'app_publish_update') {
+        this.eventEmitter.emit('appPublishUpdate', update)
+      }
+      else if (update.type === 'mcp_server_update') {
+        this.eventEmitter.emit('mcpServerUpdate', update)
+      }
+      else if (update.type === 'workflow_update') {
+        this.eventEmitter.emit('workflowUpdate', update.data)
+      }
+      else if (update.type === 'comments_update') {
+        this.eventEmitter.emit('commentsUpdate', update.data)
+      }
+      else if (update.type === 'node_panel_presence') {
+        this.applyNodePanelPresenceUpdate(update.data as NodePanelPresenceEventData)
+      }
+      else if (update.type === 'sync_request') {
+        // Only process if we are the leader
+        if (this.isLeader)
+          this.eventEmitter.emit('syncRequest', {})
+      }
+      else if (update.type === 'graph_resync_request') {
+        if (this.isLeader)
+          this.broadcastCurrentGraph()
+      }
+      else if (update.type === 'workflow_restore_request') {
+        if (this.isLeader)
+          this.eventEmitter.emit('restoreRequest', update.data as RestoreRequestData)
+      }
+      else if (update.type === 'workflow_restore_intent') {
+        this.eventEmitter.emit('restoreIntent', update.data as RestoreIntentData)
+      }
+      else if (update.type === 'workflow_restore_complete') {
+        this.eventEmitter.emit('restoreComplete', update.data as RestoreCompleteData)
+      }
+      else if (update.type === 'workflow_history_action') {
+        const data = update.data as { action?: 'undo' | 'redo' | 'jump' } | undefined
+        if (data?.action)
+          this.eventEmitter.emit('historyAction', { action: data.action, userId: update.userId })
+      }
+    })
+
+    socket.on('online_users', (data: { users: OnlineUser[], leader?: string }) => {
+      try {
+        if (!data || !Array.isArray(data.users)) {
+          console.warn('Invalid online_users data structure:', data)
+          return
+        }
+
+        const onlineUserIds = new Set(data.users.map((user: OnlineUser) => user.user_id))
+        const onlineClientIds = new Set(
+          data.users
+            .map((user: OnlineUser) => user.sid)
+            .filter((sid): sid is string => typeof sid === 'string' && sid.length > 0),
+        )
+
+        // Remove cursors for offline users
+        Object.keys(this.cursors).forEach((userId) => {
+          if (!onlineUserIds.has(userId))
+            delete this.cursors[userId]
+        })
+
+        this.cleanupNodePanelPresence(onlineClientIds)
+
+        // Update leader information
+        if (data.leader && typeof data.leader === 'string')
+          this.leaderId = data.leader
+
+        this.onlineUsers = data.users
+        this.eventEmitter.emit('onlineUsers', data.users)
+        this.eventEmitter.emit('cursors', { ...this.cursors })
+      }
+      catch (error) {
+        console.error('Error processing online_users update:', error)
+      }
+    })
+
+    socket.on('status', (data: { isLeader: boolean }) => {
+      try {
+        if (!data || typeof data.isLeader !== 'boolean') {
+          console.warn('Invalid status data:', data)
+          return
+        }
+
+        const wasLeader = this.isLeader
+        this.isLeader = data.isLeader
+
+        if (this.isLeader) {
+          this.seedCrdtGraphFromReactFlowIfNeeded()
+          this.pendingInitialSync = false
+        }
+        else {
+          this.requestInitialSyncIfNeeded()
+        }
+
+        if (wasLeader !== this.isLeader)
+          this.eventEmitter.emit('leaderChange', this.isLeader)
+      }
+      catch (error) {
+        console.error('Error processing status update:', error)
+      }
+    })
+
+    socket.on('connect', () => {
+      this.eventEmitter.emit('stateChange', { isConnected: true })
+      this.pendingInitialSync = true
+    })
+
+    socket.on('disconnect', (reason) => {
+      this.cursors = {}
+      this.onlineUsers = []
+      this.isLeader = false
+      this.leaderId = null
+      this.pendingInitialSync = false
+      this.eventEmitter.emit('stateChange', { isConnected: false, disconnectReason: reason })
+      this.eventEmitter.emit('onlineUsers', [])
+      this.eventEmitter.emit('cursors', {})
+    })
+
+    socket.on('connect_error', (error: Error) => {
+      console.error('WebSocket connection error:', error)
+      this.eventEmitter.emit('stateChange', { isConnected: false, error: error.message })
+    })
+
+    socket.on('error', (error: Error) => {
+      console.error('WebSocket error:', error)
+    })
+  }
+
+  // We currently only relay CRDT updates; the server doesn't persist them.
+  // When a follower joins mid-session, it might miss earlier broadcasts and render stale data.
+  // This lightweight checkpoint asks the leader to rebroadcast the latest graph snapshot once.
+  private requestInitialSyncIfNeeded(): void {
+    if (!this.pendingInitialSync)
+      return
+    if (this.isLeader) {
+      this.pendingInitialSync = false
+      return
+    }
+
+    this.emitGraphResyncRequest()
+    this.pendingInitialSync = false
+  }
+
+  private emitGraphResyncRequest(): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+
+    this.sendCollaborationEvent({
+      type: 'graph_resync_request',
+      data: { timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  private seedCrdtGraphFromReactFlowIfNeeded(): void {
+    if (!this.doc)
+      return
+    if (!this.reactFlowStore)
+      return
+
+    // CRDT may still be empty when the canvas was initially loaded from HTTP draft data
+    // before collaboration finished connecting, and no local mutation has been written yet.
+    // Seed once from the current ReactFlow graph so leader resync can broadcast a full snapshot.
+    if (this.getNodes().length > 0 || this.getEdges().length > 0)
+      return
+
+    const state = this.reactFlowStore.getState()
+    const nodes = state.getNodes()
+    const edges = state.getEdges()
+
+    if (!nodes.length && !edges.length)
+      return
+
+    this.syncNodes([], nodes)
+    this.syncEdges([], edges)
+    this.doc.commit()
+  }
+
+  private broadcastCurrentGraph(): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId))
+      return
+    if (!this.doc)
+      return
+
+    const socket = webSocketClient.getSocket(this.currentAppId)
+    if (!socket)
+      return
+
+    try {
+      this.seedCrdtGraphFromReactFlowIfNeeded()
+
+      if (this.getNodes().length === 0 && this.getEdges().length === 0)
+        return
+
+      const snapshot = this.doc.export({ mode: 'snapshot' })
+      this.sendGraphEvent(snapshot)
+    }
+    catch (error) {
+      console.error('Failed to broadcast graph snapshot:', error)
+    }
+  }
+}
+
+export const collaborationManager = new CollaborationManager()
diff --git a/web/app/components/workflow/collaboration/core/crdt-provider.ts b/web/app/components/workflow/collaboration/core/crdt-provider.ts
new file mode 100644
index 0000000000..53528c9170
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/crdt-provider.ts
@@ -0,0 +1,41 @@
+'use client'
+
+import type { LoroDoc } from 'loro-crdt'
+import type { Socket } from 'socket.io-client'
+import { emitWithAuthGuard } from './websocket-manager'
+
+export class CRDTProvider {
+  private doc: LoroDoc
+  private socket: Socket
+  private onUnauthorized?: () => void
+
+  constructor(socket: Socket, doc: LoroDoc, onUnauthorized?: () => void) {
+    this.socket = socket
+    this.doc = doc
+    this.onUnauthorized = onUnauthorized
+    this.setupEventListeners()
+  }
+
+  private setupEventListeners(): void {
+    this.doc.subscribe((event: { by?: string }) => {
+      if (event.by === 'local') {
+        const update = this.doc.export({ mode: 'update' })
+        emitWithAuthGuard(this.socket, 'graph_event', update, { onUnauthorized: this.onUnauthorized })
+      }
+    })
+
+    this.socket.on('graph_update', (updateData: Uint8Array) => {
+      try {
+        const data = new Uint8Array(updateData)
+        this.doc.import(data)
+      }
+      catch (error) {
+        console.error('Error importing graph update:', error)
+      }
+    })
+  }
+
+  destroy(): void {
+    this.socket.off('graph_update')
+  }
+}
diff --git a/web/app/components/workflow/collaboration/core/event-emitter.ts b/web/app/components/workflow/collaboration/core/event-emitter.ts
new file mode 100644
index 0000000000..c562ae3083
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/event-emitter.ts
@@ -0,0 +1,51 @@
+type EventHandler<T = unknown> = (data: T) => void
+
+export class EventEmitter {
+  private events: Map<string, Set<EventHandler<unknown>>> = new Map()
+
+  on<T = unknown>(event: string, handler: EventHandler<T>): () => void {
+    if (!this.events.has(event))
+      this.events.set(event, new Set())
+
+    this.events.get(event)!.add(handler as EventHandler<unknown>)
+
+    return () => this.off(event, handler)
+  }
+
+  off<T = unknown>(event: string, handler?: EventHandler<T>): void {
+    if (!this.events.has(event))
+      return
+
+    const handlers = this.events.get(event)!
+    if (handler)
+      handlers.delete(handler as EventHandler<unknown>)
+    else
+      handlers.clear()
+
+    if (handlers.size === 0)
+      this.events.delete(event)
+  }
+
+  emit<T = unknown>(event: string, data: T): void {
+    if (!this.events.has(event))
+      return
+
+    const handlers = this.events.get(event)!
+    handlers.forEach((handler) => {
+      try {
+        handler(data)
+      }
+      catch (error) {
+        console.error(`Error in event handler for ${event}:`, error)
+      }
+    })
+  }
+
+  removeAllListeners(): void {
+    this.events.clear()
+  }
+
+  getListenerCount(event: string): number {
+    return this.events.get(event)?.size || 0
+  }
+}
diff --git a/web/app/components/workflow/collaboration/core/websocket-manager.ts b/web/app/components/workflow/collaboration/core/websocket-manager.ts
new file mode 100644
index 0000000000..62ffe2cf0c
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/websocket-manager.ts
@@ -0,0 +1,157 @@
+import type { Socket } from 'socket.io-client'
+import type { DebugInfo, WebSocketConfig } from '../types/websocket'
+import { io } from 'socket.io-client'
+import { SOCKET_URL } from '@/config'
+
+type AckArgs = unknown[]
+
+const isUnauthorizedAck = (...ackArgs: AckArgs): boolean => {
+  const [first, second] = ackArgs
+
+  if (second === 401 || first === 401)
+    return true
+
+  if (first && typeof first === 'object' && 'msg' in first) {
+    const message = (first as { msg?: unknown }).msg
+    return message === 'unauthorized'
+  }
+
+  return false
+}
+
+export type EmitAckOptions = {
+  onAck?: (...ackArgs: AckArgs) => void
+  onUnauthorized?: (...ackArgs: AckArgs) => void
+}
+
+export const emitWithAuthGuard = (
+  socket: Socket | null | undefined,
+  event: string,
+  payload: unknown,
+  options?: EmitAckOptions,
+): void => {
+  if (!socket)
+    return
+
+  socket.emit(
+    event,
+    payload,
+    (...ackArgs: AckArgs) => {
+      options?.onAck?.(...ackArgs)
+      if (isUnauthorizedAck(...ackArgs))
+        options?.onUnauthorized?.(...ackArgs)
+    },
+  )
+}
+
+export class WebSocketClient {
+  private connections: Map<string, Socket> = new Map()
+  private connecting: Set<string> = new Set()
+  private readonly url: string
+  private readonly transports: WebSocketConfig['transports']
+  private readonly withCredentials?: boolean
+
+  constructor(config: WebSocketConfig = {}) {
+    this.url = SOCKET_URL
+    this.transports = config.transports || ['websocket']
+    this.withCredentials = config.withCredentials !== false
+  }
+
+  connect(appId: string): Socket {
+    const existingSocket = this.connections.get(appId)
+    if (existingSocket?.connected)
+      return existingSocket
+
+    if (this.connecting.has(appId)) {
+      const pendingSocket = this.connections.get(appId)
+      if (pendingSocket)
+        return pendingSocket
+    }
+
+    if (existingSocket && !existingSocket.connected) {
+      existingSocket.disconnect()
+      this.connections.delete(appId)
+    }
+
+    this.connecting.add(appId)
+
+    const socketOptions: {
+      path: string
+      transports: WebSocketConfig['transports']
+      withCredentials?: boolean
+    } = {
+      path: '/socket.io',
+      transports: this.transports,
+      withCredentials: this.withCredentials,
+    }
+
+    const socket = io(this.url, socketOptions)
+
+    this.connections.set(appId, socket)
+    this.setupBaseEventListeners(socket, appId)
+
+    return socket
+  }
+
+  disconnect(appId?: string): void {
+    if (appId) {
+      const socket = this.connections.get(appId)
+      if (socket) {
+        socket.disconnect()
+        this.connections.delete(appId)
+        this.connecting.delete(appId)
+      }
+    }
+    else {
+      this.connections.forEach(socket => socket.disconnect())
+      this.connections.clear()
+      this.connecting.clear()
+    }
+  }
+
+  getSocket(appId: string): Socket | null {
+    return this.connections.get(appId) || null
+  }
+
+  isConnected(appId: string): boolean {
+    return this.connections.get(appId)?.connected || false
+  }
+
+  getConnectedApps(): string[] {
+    const connectedApps: string[] = []
+    this.connections.forEach((socket, appId) => {
+      if (socket.connected)
+        connectedApps.push(appId)
+    })
+    return connectedApps
+  }
+
+  getDebugInfo(): DebugInfo {
+    const info: DebugInfo = {}
+    this.connections.forEach((socket, appId) => {
+      info[appId] = {
+        connected: socket.connected,
+        connecting: this.connecting.has(appId),
+        socketId: socket.id,
+      }
+    })
+    return info
+  }
+
+  private setupBaseEventListeners(socket: Socket, appId: string): void {
+    socket.on('connect', () => {
+      this.connecting.delete(appId)
+      emitWithAuthGuard(socket, 'user_connect', { workflow_id: appId })
+    })
+
+    socket.on('disconnect', () => {
+      this.connecting.delete(appId)
+    })
+
+    socket.on('connect_error', () => {
+      this.connecting.delete(appId)
+    })
+  }
+}
+
+export const webSocketClient = new WebSocketClient()
diff --git a/web/app/components/workflow/collaboration/hooks/__tests__/use-collaboration.spec.ts b/web/app/components/workflow/collaboration/hooks/__tests__/use-collaboration.spec.ts
new file mode 100644
index 0000000000..0f8a9e2c9a
--- /dev/null
+++ b/web/app/components/workflow/collaboration/hooks/__tests__/use-collaboration.spec.ts
@@ -0,0 +1,151 @@
+import type { CursorPosition, NodePanelPresenceMap, OnlineUser } from '../../types/collaboration'
+import { renderHook, waitFor } from '@testing-library/react'
+import { useCollaboration } from '../use-collaboration'
+
+type HookReactFlowStore = NonNullable<Parameters<typeof useCollaboration>[1]>
+type HookReactFlowInstance = Parameters<ReturnType<typeof useCollaboration>['startCursorTracking']>[1]
+
+const mockConnect = vi.hoisted(() => vi.fn())
+const mockDisconnect = vi.hoisted(() => vi.fn())
+const mockIsConnected = vi.hoisted(() => vi.fn(() => true))
+const mockEmitCursorMove = vi.hoisted(() => vi.fn())
+const mockGetLeaderId = vi.hoisted(() => vi.fn(() => 'leader-1'))
+
+let onStateChangeCallback: ((state: { isConnected?: boolean, disconnectReason?: string, error?: string }) => void) | null = null
+let onCursorCallback: ((cursors: Record<string, CursorPosition>) => void) | null = null
+let onUsersCallback: ((users: OnlineUser[]) => void) | null = null
+let onPresenceCallback: ((presence: NodePanelPresenceMap) => void) | null = null
+let onLeaderCallback: ((isLeader: boolean) => void) | null = null
+
+const unsubscribeState = vi.hoisted(() => vi.fn())
+const unsubscribeCursor = vi.hoisted(() => vi.fn())
+const unsubscribeUsers = vi.hoisted(() => vi.fn())
+const unsubscribePresence = vi.hoisted(() => vi.fn())
+const unsubscribeLeader = vi.hoisted(() => vi.fn())
+
+let isCollaborationEnabled = true
+
+const mockStartTracking = vi.hoisted(() => vi.fn())
+const mockStopTracking = vi.hoisted(() => vi.fn())
+const cursorServiceInstances: Array<{ startTracking: typeof mockStartTracking, stopTracking: typeof mockStopTracking }> = []
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (state: { systemFeatures: { enable_collaboration_mode: boolean } }) => boolean) =>
+    selector({ systemFeatures: { enable_collaboration_mode: isCollaborationEnabled } }),
+}))
+
+vi.mock('../../core/collaboration-manager', () => ({
+  collaborationManager: {
+    connect: (...args: unknown[]) => mockConnect(...args),
+    disconnect: (...args: unknown[]) => mockDisconnect(...args),
+    isConnected: () => mockIsConnected(),
+    emitCursorMove: (...args: unknown[]) => mockEmitCursorMove(...args),
+    getLeaderId: () => mockGetLeaderId(),
+    onStateChange: (callback: (state: { isConnected?: boolean, disconnectReason?: string, error?: string }) => void) => {
+      onStateChangeCallback = callback
+      return unsubscribeState
+    },
+    onCursorUpdate: (callback: (cursors: Record<string, CursorPosition>) => void) => {
+      onCursorCallback = callback
+      return unsubscribeCursor
+    },
+    onOnlineUsersUpdate: (callback: (users: OnlineUser[]) => void) => {
+      onUsersCallback = callback
+      return unsubscribeUsers
+    },
+    onNodePanelPresenceUpdate: (callback: (presence: NodePanelPresenceMap) => void) => {
+      onPresenceCallback = callback
+      return unsubscribePresence
+    },
+    onLeaderChange: (callback: (isLeader: boolean) => void) => {
+      onLeaderCallback = callback
+      return unsubscribeLeader
+    },
+  },
+}))
+
+vi.mock('../../services/cursor-service', () => ({
+  CursorService: class {
+    startTracking = mockStartTracking
+    stopTracking = mockStopTracking
+    constructor() {
+      cursorServiceInstances.push({ startTracking: this.startTracking, stopTracking: this.stopTracking })
+    }
+  },
+}))
+
+describe('useCollaboration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    onStateChangeCallback = null
+    onCursorCallback = null
+    onUsersCallback = null
+    onPresenceCallback = null
+    onLeaderCallback = null
+    isCollaborationEnabled = true
+    cursorServiceInstances.length = 0
+    mockConnect.mockResolvedValue('conn-1')
+    mockIsConnected.mockReturnValue(true)
+  })
+
+  it('connects, reacts to manager updates, and disconnects on unmount', async () => {
+    const reactFlowStore: HookReactFlowStore = {
+      getState: vi.fn(),
+    }
+    const { result, unmount } = renderHook(() => useCollaboration('app-1', reactFlowStore))
+
+    await waitFor(() => {
+      expect(mockConnect).toHaveBeenCalledWith('app-1', reactFlowStore)
+    })
+
+    onStateChangeCallback?.({ isConnected: true })
+    onUsersCallback?.([{ user_id: 'u1', username: 'U1', avatar: '', sid: 'sid-1' } as OnlineUser])
+    onCursorCallback?.({ u1: { x: 10, y: 20, userId: 'u1', timestamp: 1 } })
+    onPresenceCallback?.({ nodeA: { sid1: { userId: 'u1', username: 'U1', clientId: 'sid1', timestamp: 1 } } })
+    onLeaderCallback?.(true)
+
+    await waitFor(() => {
+      expect(result.current.isConnected).toBe(true)
+      expect(result.current.onlineUsers).toHaveLength(1)
+      expect(result.current.cursors.u1?.x).toBe(10)
+      expect(result.current.nodePanelPresence.nodeA).toBeDefined()
+      expect(result.current.isLeader).toBe(true)
+      expect(result.current.leaderId).toBe('leader-1')
+    })
+
+    const ref = { current: document.createElement('div') }
+    const reactFlowInstance: HookReactFlowInstance = {
+      getZoom: () => 1,
+      getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+    } as HookReactFlowInstance
+    result.current.startCursorTracking(ref, reactFlowInstance)
+    expect(mockStartTracking).toHaveBeenCalledTimes(1)
+    const emitPosition = mockStartTracking.mock.calls[0]?.[1] as ((position: CursorPosition) => void)
+    emitPosition({ x: 1, y: 2, userId: 'u1', timestamp: 2 })
+    expect(mockEmitCursorMove).toHaveBeenCalledWith({ x: 1, y: 2, userId: 'u1', timestamp: 2 })
+
+    result.current.stopCursorTracking()
+    expect(mockStopTracking).toHaveBeenCalled()
+
+    unmount()
+    expect(unsubscribeState).toHaveBeenCalled()
+    expect(unsubscribeCursor).toHaveBeenCalled()
+    expect(unsubscribeUsers).toHaveBeenCalled()
+    expect(unsubscribePresence).toHaveBeenCalled()
+    expect(unsubscribeLeader).toHaveBeenCalled()
+    expect(mockDisconnect).toHaveBeenCalledWith('conn-1')
+  })
+
+  it('does not connect or start cursor tracking when collaboration is disabled', async () => {
+    isCollaborationEnabled = false
+    const { result } = renderHook(() => useCollaboration('app-1'))
+
+    await waitFor(() => {
+      expect(mockConnect).not.toHaveBeenCalled()
+      expect(result.current.isEnabled).toBe(false)
+    })
+
+    result.current.startCursorTracking({ current: document.createElement('div') })
+    expect(mockStartTracking).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/hooks/use-collaboration.ts b/web/app/components/workflow/collaboration/hooks/use-collaboration.ts
new file mode 100644
index 0000000000..b24d9faea8
--- /dev/null
+++ b/web/app/components/workflow/collaboration/hooks/use-collaboration.ts
@@ -0,0 +1,150 @@
+import type { ReactFlowInstance } from 'reactflow'
+import type {
+  CollaborationState,
+  CursorPosition,
+  NodePanelPresenceMap,
+  OnlineUser,
+} from '../types/collaboration'
+import { useEffect, useRef, useState } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { collaborationManager } from '../core/collaboration-manager'
+import { CursorService } from '../services/cursor-service'
+
+type CollaborationViewState = {
+  isConnected: boolean
+  onlineUsers: OnlineUser[]
+  cursors: Record<string, CursorPosition>
+  nodePanelPresence: NodePanelPresenceMap
+  isLeader: boolean
+}
+
+type ReactFlowStore = NonNullable<Parameters<typeof collaborationManager.connect>[1]>
+
+const initialState: CollaborationViewState = {
+  isConnected: false,
+  onlineUsers: [],
+  cursors: {},
+  nodePanelPresence: {},
+  isLeader: false,
+}
+
+export function useCollaboration(appId: string, reactFlowStore?: ReactFlowStore) {
+  const [state, setState] = useState<CollaborationViewState>(initialState)
+
+  const cursorServiceRef = useRef<CursorService | null>(null)
+  const lastDisconnectReasonRef = useRef<string | null>(null)
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled) {
+      Promise.resolve().then(() => {
+        setState(initialState)
+      })
+      return
+    }
+
+    let connectionId: string | null = null
+    let isUnmounted = false
+
+    if (!cursorServiceRef.current)
+      cursorServiceRef.current = new CursorService()
+
+    const initCollaboration = async () => {
+      try {
+        const id = await collaborationManager.connect(appId, reactFlowStore)
+        if (isUnmounted) {
+          collaborationManager.disconnect(id)
+          return
+        }
+        connectionId = id
+        setState(prev => ({ ...prev, isConnected: collaborationManager.isConnected() }))
+      }
+      catch (error) {
+        console.error('Failed to initialize collaboration:', error)
+      }
+    }
+
+    initCollaboration()
+
+    const unsubscribeStateChange = collaborationManager.onStateChange((newState: Partial<CollaborationState>) => {
+      if (newState.isConnected === false)
+        lastDisconnectReasonRef.current = newState.disconnectReason || newState.error || null
+      if (newState.isConnected === true)
+        lastDisconnectReasonRef.current = null
+
+      if (newState.isConnected === undefined)
+        return
+
+      setState(prev => ({ ...prev, isConnected: newState.isConnected ?? prev.isConnected }))
+    })
+
+    const unsubscribeCursors = collaborationManager.onCursorUpdate((cursors: Record<string, CursorPosition>) => {
+      setState(prev => ({ ...prev, cursors }))
+    })
+
+    const unsubscribeUsers = collaborationManager.onOnlineUsersUpdate((users: OnlineUser[]) => {
+      setState(prev => ({ ...prev, onlineUsers: users }))
+    })
+
+    const unsubscribeNodePanelPresence = collaborationManager.onNodePanelPresenceUpdate((presence: NodePanelPresenceMap) => {
+      setState(prev => ({ ...prev, nodePanelPresence: presence }))
+    })
+
+    const unsubscribeLeaderChange = collaborationManager.onLeaderChange((isLeader: boolean) => {
+      setState(prev => ({ ...prev, isLeader }))
+    })
+
+    return () => {
+      isUnmounted = true
+      unsubscribeStateChange()
+      unsubscribeCursors()
+      unsubscribeUsers()
+      unsubscribeNodePanelPresence()
+      unsubscribeLeaderChange()
+      cursorServiceRef.current?.stopTracking()
+      if (connectionId)
+        collaborationManager.disconnect(connectionId)
+    }
+  }, [appId, reactFlowStore, isCollaborationEnabled])
+
+  const prevIsConnected = useRef(false)
+  useEffect(() => {
+    if (prevIsConnected.current && !state.isConnected) {
+      const reason = lastDisconnectReasonRef.current
+      if (reason)
+        console.warn('WebSocket disconnected:', reason)
+      else
+        console.warn('WebSocket disconnected.')
+    }
+    prevIsConnected.current = state.isConnected || false
+  }, [state.isConnected])
+
+  const startCursorTracking = (containerRef: React.RefObject<HTMLElement>, reactFlowInstance?: ReactFlowInstance) => {
+    if (!isCollaborationEnabled || !cursorServiceRef.current)
+      return
+
+    if (cursorServiceRef.current) {
+      cursorServiceRef.current.startTracking(containerRef, (position) => {
+        collaborationManager.emitCursorMove(position)
+      }, reactFlowInstance)
+    }
+  }
+
+  const stopCursorTracking = () => {
+    cursorServiceRef.current?.stopTracking()
+  }
+
+  const result = {
+    isConnected: state.isConnected || false,
+    onlineUsers: state.onlineUsers || [],
+    cursors: state.cursors || {},
+    nodePanelPresence: state.nodePanelPresence || {},
+    isLeader: state.isLeader || false,
+    leaderId: collaborationManager.getLeaderId(),
+    isEnabled: isCollaborationEnabled,
+    startCursorTracking,
+    stopCursorTracking,
+  }
+
+  return result
+}
diff --git a/web/app/components/workflow/collaboration/services/__tests__/cursor-service.spec.ts b/web/app/components/workflow/collaboration/services/__tests__/cursor-service.spec.ts
new file mode 100644
index 0000000000..239435bec0
--- /dev/null
+++ b/web/app/components/workflow/collaboration/services/__tests__/cursor-service.spec.ts
@@ -0,0 +1,86 @@
+import type { ReactFlowInstance } from 'reactflow'
+import { CursorService } from '../cursor-service'
+
+describe('CursorService', () => {
+  let service: CursorService
+  let container: HTMLDivElement
+  let now = 0
+
+  beforeEach(() => {
+    service = new CursorService()
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+      x: 10,
+      y: 20,
+      top: 20,
+      left: 10,
+      right: 410,
+      bottom: 220,
+      width: 400,
+      height: 200,
+      toJSON: () => ({}),
+    } as DOMRect)
+    now = 1000
+    vi.spyOn(Date, 'now').mockImplementation(() => now)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    container.remove()
+  })
+
+  it('emits transformed positions with throttle and distance guard', () => {
+    const onEmit = vi.fn()
+    const reactFlow = {
+      getViewport: () => ({ x: 5, y: 10, zoom: 2 }),
+      getZoom: () => 2,
+    } as unknown as ReactFlowInstance
+
+    service.startTracking({ current: container }, onEmit, reactFlow)
+
+    container.dispatchEvent(new MouseEvent('mousemove', { clientX: 30, clientY: 50 }))
+    expect(onEmit).toHaveBeenCalledTimes(1)
+    expect(onEmit).toHaveBeenLastCalledWith(expect.objectContaining({
+      x: 7.5,
+      y: 10,
+      timestamp: 1000,
+    }))
+
+    now = 1100
+    container.dispatchEvent(new MouseEvent('mousemove', { clientX: 40, clientY: 60 }))
+    expect(onEmit).toHaveBeenCalledTimes(1)
+
+    now = 1401
+    container.dispatchEvent(new MouseEvent('mousemove', { clientX: 33, clientY: 53 }))
+    expect(onEmit).toHaveBeenCalledTimes(1)
+
+    now = 1800
+    container.dispatchEvent(new MouseEvent('mousemove', { clientX: 60, clientY: 90 }))
+    expect(onEmit).toHaveBeenCalledTimes(2)
+    expect(onEmit).toHaveBeenLastCalledWith(expect.objectContaining({
+      x: 22.5,
+      y: 30,
+      timestamp: 1800,
+    }))
+  })
+
+  it('stops tracking and forwards cursor updates to registered handler', () => {
+    const onEmit = vi.fn()
+    const onCursorUpdate = vi.fn()
+    service.startTracking({ current: container }, onEmit)
+    service.setCursorUpdateHandler(onCursorUpdate)
+
+    service.updateCursors({
+      u1: { x: 1, y: 2, userId: 'u1', timestamp: 1 },
+    })
+    expect(onCursorUpdate).toHaveBeenCalledWith({
+      u1: { x: 1, y: 2, userId: 'u1', timestamp: 1 },
+    })
+
+    service.stopTracking()
+    now = 2000
+    container.dispatchEvent(new MouseEvent('mousemove', { clientX: 40, clientY: 60 }))
+    expect(onEmit).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/services/cursor-service.ts b/web/app/components/workflow/collaboration/services/cursor-service.ts
new file mode 100644
index 0000000000..7af6f2f27f
--- /dev/null
+++ b/web/app/components/workflow/collaboration/services/cursor-service.ts
@@ -0,0 +1,90 @@
+import type { RefObject } from 'react'
+import type { ReactFlowInstance } from 'reactflow'
+import type { CursorPosition } from '../types/collaboration'
+
+const CURSOR_MIN_MOVE_DISTANCE = 10
+const CURSOR_THROTTLE_MS = 300
+
+export class CursorService {
+  private containerRef: RefObject<HTMLElement> | null = null
+  private reactFlowInstance: ReactFlowInstance | null = null
+  private isTracking = false
+  private onCursorUpdate: ((cursors: Record<string, CursorPosition>) => void) | null = null
+  private onEmitPosition: ((position: CursorPosition) => void) | null = null
+  private lastEmitTime = 0
+  private lastPosition: { x: number, y: number } | null = null
+
+  startTracking(
+    containerRef: RefObject<HTMLElement>,
+    onEmitPosition: (position: CursorPosition) => void,
+    reactFlowInstance?: ReactFlowInstance,
+  ): void {
+    if (this.isTracking)
+      this.stopTracking()
+
+    this.containerRef = containerRef
+    this.onEmitPosition = onEmitPosition
+    this.reactFlowInstance = reactFlowInstance || null
+    this.isTracking = true
+
+    if (containerRef.current)
+      containerRef.current.addEventListener('mousemove', this.handleMouseMove)
+  }
+
+  stopTracking(): void {
+    if (this.containerRef?.current)
+      this.containerRef.current.removeEventListener('mousemove', this.handleMouseMove)
+
+    this.containerRef = null
+    this.reactFlowInstance = null
+    this.onEmitPosition = null
+    this.isTracking = false
+    this.lastPosition = null
+  }
+
+  setCursorUpdateHandler(handler: (cursors: Record<string, CursorPosition>) => void): void {
+    this.onCursorUpdate = handler
+  }
+
+  updateCursors(cursors: Record<string, CursorPosition>): void {
+    if (this.onCursorUpdate)
+      this.onCursorUpdate(cursors)
+  }
+
+  private handleMouseMove = (event: MouseEvent): void => {
+    if (!this.containerRef?.current || !this.onEmitPosition)
+      return
+
+    const rect = this.containerRef.current.getBoundingClientRect()
+    let x = event.clientX - rect.left
+    let y = event.clientY - rect.top
+
+    // Transform coordinates to ReactFlow world coordinates if ReactFlow instance is available
+    if (this.reactFlowInstance) {
+      const viewport = this.reactFlowInstance.getViewport()
+      // Convert screen coordinates to world coordinates
+      // World coordinates = (screen coordinates - viewport translation) / zoom
+      x = (x - viewport.x) / viewport.zoom
+      y = (y - viewport.y) / viewport.zoom
+    }
+
+    // Always emit cursor position (remove boundary check since world coordinates can be negative)
+    const now = Date.now()
+    const timeThrottled = now - this.lastEmitTime > CURSOR_THROTTLE_MS
+    const minDistance = CURSOR_MIN_MOVE_DISTANCE / (this.reactFlowInstance?.getZoom() || 1)
+    const distanceThrottled = !this.lastPosition
+      || (Math.abs(x - this.lastPosition.x) > minDistance)
+      || (Math.abs(y - this.lastPosition.y) > minDistance)
+
+    if (timeThrottled && distanceThrottled) {
+      this.lastPosition = { x, y }
+      this.lastEmitTime = now
+      this.onEmitPosition({
+        x,
+        y,
+        userId: '',
+        timestamp: now,
+      })
+    }
+  }
+}
diff --git a/web/app/components/workflow/collaboration/types/collaboration.ts b/web/app/components/workflow/collaboration/types/collaboration.ts
new file mode 100644
index 0000000000..ae355a7b51
--- /dev/null
+++ b/web/app/components/workflow/collaboration/types/collaboration.ts
@@ -0,0 +1,92 @@
+import type { Viewport } from 'reactflow'
+import type { ConversationVariable, Edge, EnvironmentVariable, Node } from '../../types'
+import type { Features } from '@/app/components/base/features/types'
+
+export type OnlineUser = {
+  user_id: string
+  username: string
+  avatar: string
+  sid: string
+}
+
+export type CursorPosition = {
+  x: number
+  y: number
+  userId: string
+  timestamp: number
+}
+
+export type NodePanelPresenceUser = {
+  userId: string
+  username: string
+  avatar?: string | null
+}
+
+export type NodePanelPresenceInfo = NodePanelPresenceUser & {
+  clientId: string
+  timestamp: number
+}
+
+export type NodePanelPresenceMap = Record<string, Record<string, NodePanelPresenceInfo>>
+
+export type CollaborationState = {
+  appId: string
+  isConnected: boolean
+  onlineUsers: OnlineUser[]
+  cursors: Record<string, CursorPosition>
+  nodePanelPresence: NodePanelPresenceMap
+  disconnectReason?: string
+  error?: string
+}
+
+export type CollaborationEventType
+  = | 'mouse_move'
+    | 'vars_and_features_update'
+    | 'sync_request'
+    | 'app_state_update'
+    | 'app_meta_update'
+    | 'mcp_server_update'
+    | 'workflow_update'
+    | 'comments_update'
+    | 'node_panel_presence'
+    | 'app_publish_update'
+    | 'graph_resync_request'
+    | 'workflow_restore_request'
+    | 'workflow_restore_intent'
+    | 'workflow_restore_complete'
+    | 'workflow_history_action'
+
+export type CollaborationUpdate = {
+  type: CollaborationEventType
+  userId: string
+  data: Record<string, unknown>
+  timestamp: number
+}
+
+export type RestoreRequestData = {
+  versionId: string
+  versionName?: string
+  initiatorUserId: string
+  initiatorName: string
+  graphData: {
+    nodes: Node[]
+    edges: Edge[]
+    viewport?: Viewport
+  }
+  features?: Features
+  environmentVariables?: EnvironmentVariable[]
+  conversationVariables?: ConversationVariable[]
+}
+
+export type RestoreIntentData = {
+  versionId: string
+  versionName?: string
+  initiatorUserId: string
+  initiatorName: string
+}
+
+export type RestoreCompleteData = {
+  versionId: string
+  success: boolean
+  error?: string
+}
diff --git a/web/app/components/workflow/collaboration/types/websocket.ts b/web/app/components/workflow/collaboration/types/websocket.ts
new file mode 100644
index 0000000000..dd89df323f
--- /dev/null
+++ b/web/app/components/workflow/collaboration/types/websocket.ts
@@ -0,0 +1,15 @@
+export type WebSocketConfig = {
+  token?: string
+  transports?: string[]
+  withCredentials?: boolean
+}
+
+export type ConnectionInfo = {
+  connected: boolean
+  connecting: boolean
+  socketId?: string
+}
+
+export type DebugInfo = {
+  [appId: string]: ConnectionInfo
+}
diff --git a/web/app/components/workflow/collaboration/utils/user-color.ts b/web/app/components/workflow/collaboration/utils/user-color.ts
new file mode 100644
index 0000000000..51aee6a038
--- /dev/null
+++ b/web/app/components/workflow/collaboration/utils/user-color.ts
@@ -0,0 +1,12 @@
+/**
+ * Generate a consistent color for a user based on their ID
+ * Used for cursor colors and avatar backgrounds
+ */
+export const getUserColor = (id: string): string => {
+  const colors = ['#155AEF', '#0BA5EC', '#444CE7', '#7839EE', '#4CA30D', '#0E9384', '#DD2590', '#FF4405', '#D92D20', '#F79009', '#828DAD']
+  const hash = id.split('').reduce((a, b) => {
+    a = ((a << 5) - a) + b.charCodeAt(0)
+    return a & a
+  }, 0)
+  return colors[Math.abs(hash) % colors.length]
+}
diff --git a/web/app/components/workflow/comment-manager.tsx b/web/app/components/workflow/comment-manager.tsx
new file mode 100644
index 0000000000..41175ae04d
--- /dev/null
+++ b/web/app/components/workflow/comment-manager.tsx
@@ -0,0 +1,55 @@
+import { useEventListener } from 'ahooks'
+import { useWorkflowComment } from './hooks/use-workflow-comment'
+import { useWorkflowStore } from './store'
+
+const CommentManager = () => {
+  const workflowStore = useWorkflowStore()
+  const { handleCreateComment, handleCommentCancel } = useWorkflowComment()
+
+  useEventListener('click', (e) => {
+    const { controlMode, mousePosition, pendingComment, isCommentPlacing } = workflowStore.getState()
+    const target = e.target as HTMLElement
+    const isInDropdown = target.closest('[data-mention-dropdown]')
+    const isInCommentInput = target.closest('[data-comment-input]')
+    const isOnCanvasPane = target.closest('.react-flow__pane')
+
+    if (isCommentPlacing) {
+      if (!isInDropdown && !isInCommentInput && isOnCanvasPane) {
+        e.preventDefault()
+        e.stopPropagation()
+        workflowStore.setState({
+          pendingComment: mousePosition,
+          isCommentPlacing: false,
+        })
+      }
+      return
+    }
+
+    if (controlMode === 'comment') {
+      // Only when clicking on the React Flow canvas pane (background),
+      // and not inside comment input or its dropdown
+      if (!isInDropdown && !isInCommentInput && isOnCanvasPane) {
+        e.preventDefault()
+        e.stopPropagation()
+        if (pendingComment)
+          handleCommentCancel()
+        else
+          handleCreateComment(mousePosition)
+      }
+    }
+  })
+
+  useEventListener('contextmenu', () => {
+    const { isCommentPlacing } = workflowStore.getState()
+    if (!isCommentPlacing)
+      return
+    workflowStore.setState({
+      isCommentPlacing: false,
+      isCommentQuickAdd: false,
+    })
+  })
+
+  return null
+}
+
+export default CommentManager
diff --git a/web/app/components/workflow/comment/comment-icon.spec.tsx b/web/app/components/workflow/comment/comment-icon.spec.tsx
new file mode 100644
index 0000000000..aee8c64fa3
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-icon.spec.tsx
@@ -0,0 +1,148 @@
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { CommentIcon } from './comment-icon'
+
+type Position = { x: number, y: number }
+
+let mockUserId = 'user-1'
+
+const mockFlowToScreenPosition = vi.fn((position: Position) => position)
+const mockScreenToFlowPosition = vi.fn((position: Position) => position)
+
+vi.mock('reactflow', () => ({
+  useReactFlow: () => ({
+    flowToScreenPosition: mockFlowToScreenPosition,
+    screenToFlowPosition: mockScreenToFlowPosition,
+  }),
+  useViewport: () => ({
+    x: 0,
+    y: 0,
+    zoom: 1,
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: {
+      id: mockUserId,
+      name: 'User',
+      avatar_url: 'avatar',
+    },
+  }),
+}))
+
+vi.mock('@/app/components/base/user-avatar-list', () => ({
+  UserAvatarList: ({ users }: { users: Array<{ id: string }> }) => (
+    <div data-testid="avatar-list">{users.map(user => user.id).join(',')}</div>
+  ),
+}))
+
+vi.mock('./comment-preview', () => ({
+  default: ({ onClick }: { onClick?: () => void }) => (
+    <button type="button" data-testid="comment-preview" onClick={onClick}>
+      Preview
+    </button>
+  ),
+}))
+
+const createComment = (overrides: Partial<WorkflowCommentList> = {}): WorkflowCommentList => ({
+  id: 'comment-1',
+  position_x: 0,
+  position_y: 0,
+  content: 'Hello',
+  created_by: 'user-1',
+  created_by_account: {
+    id: 'user-1',
+    name: 'Alice',
+    email: 'alice@example.com',
+  },
+  created_at: 1,
+  updated_at: 2,
+  resolved: false,
+  mention_count: 0,
+  reply_count: 0,
+  participants: [],
+  ...overrides,
+})
+
+describe('CommentIcon', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUserId = 'user-1'
+  })
+
+  it('toggles preview on hover when inactive', () => {
+    const comment = createComment()
+    const { container } = render(
+      <CommentIcon comment={comment} onClick={vi.fn()} isActive={false} />,
+    )
+    const marker = container.querySelector('[data-role="comment-marker"]') as HTMLElement
+    const hoverTarget = marker.firstElementChild as HTMLElement
+
+    fireEvent.mouseEnter(hoverTarget)
+    expect(screen.getByTestId('comment-preview')).toBeInTheDocument()
+
+    fireEvent.mouseLeave(hoverTarget)
+    expect(screen.queryByTestId('comment-preview')).not.toBeInTheDocument()
+  })
+
+  it('calls onPositionUpdate after dragging by author', () => {
+    const comment = createComment({ position_x: 0, position_y: 0 })
+    const onClick = vi.fn()
+    const onPositionUpdate = vi.fn()
+    const { container } = render(
+      <CommentIcon
+        comment={comment}
+        onClick={onClick}
+        onPositionUpdate={onPositionUpdate}
+      />,
+    )
+    const marker = container.querySelector('[data-role="comment-marker"]') as HTMLElement
+
+    fireEvent.pointerDown(marker, {
+      pointerId: 1,
+      button: 0,
+      clientX: 100,
+      clientY: 100,
+    })
+    fireEvent.pointerMove(marker, {
+      pointerId: 1,
+      clientX: 110,
+      clientY: 110,
+    })
+    fireEvent.pointerUp(marker, {
+      pointerId: 1,
+      clientX: 110,
+      clientY: 110,
+    })
+
+    expect(mockScreenToFlowPosition).toHaveBeenCalledWith({ x: 10, y: 10 })
+    expect(onPositionUpdate).toHaveBeenCalledWith({ x: 10, y: 10 })
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('calls onClick for non-author clicks', () => {
+    mockUserId = 'user-2'
+    const comment = createComment()
+    const onClick = vi.fn()
+    const { container } = render(
+      <CommentIcon comment={comment} onClick={onClick} isActive={false} />,
+    )
+    const marker = container.querySelector('[data-role="comment-marker"]') as HTMLElement
+
+    fireEvent.pointerDown(marker, {
+      pointerId: 1,
+      button: 0,
+      clientX: 50,
+      clientY: 60,
+    })
+    fireEvent.pointerUp(marker, {
+      pointerId: 1,
+      clientX: 50,
+      clientY: 60,
+    })
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
new file mode 100644
index 0000000000..7f005f3465
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -0,0 +1,269 @@
+'use client'
+
+import type { FC, PointerEvent as ReactPointerEvent } from 'react'
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
+import { useReactFlow, useViewport } from 'reactflow'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import { useAppContext } from '@/context/app-context'
+import CommentPreview from './comment-preview'
+
+type CommentIconProps = {
+  comment: WorkflowCommentList
+  onClick: () => void
+  isActive?: boolean
+  onPositionUpdate?: (position: { x: number, y: number }) => void
+}
+
+export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isActive = false, onPositionUpdate }) => {
+  const { flowToScreenPosition, screenToFlowPosition } = useReactFlow()
+  const viewport = useViewport()
+  const { userProfile } = useAppContext()
+  const isAuthor = comment.created_by_account?.id === userProfile?.id
+  const [showPreview, setShowPreview] = useState(false)
+  const [dragPosition, setDragPosition] = useState<{ x: number, y: number } | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStateRef = useRef<{
+    offsetX: number
+    offsetY: number
+    startX: number
+    startY: number
+    hasMoved: boolean
+  } | null>(null)
+
+  const workflowContainerRect = typeof document !== 'undefined'
+    ? document.getElementById('workflow-container')?.getBoundingClientRect()
+    : null
+  const containerLeft = workflowContainerRect?.left ?? 0
+  const containerTop = workflowContainerRect?.top ?? 0
+
+  const screenPosition = useMemo(() => {
+    return flowToScreenPosition({
+      x: comment.position_x,
+      y: comment.position_y,
+    })
+  }, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
+
+  const effectiveScreenPosition = dragPosition ?? screenPosition
+  const canvasPosition = useMemo(() => ({
+    x: effectiveScreenPosition.x - containerLeft,
+    y: effectiveScreenPosition.y - containerTop,
+  }), [effectiveScreenPosition.x, effectiveScreenPosition.y, containerLeft, containerTop])
+  const cursorClass = useMemo(() => {
+    if (!isAuthor)
+      return 'cursor-pointer'
+    if (isActive)
+      return isDragging ? 'cursor-grabbing' : ''
+    return isDragging ? 'cursor-grabbing' : 'cursor-pointer'
+  }, [isActive, isAuthor, isDragging])
+
+  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0)
+      return
+
+    event.stopPropagation()
+    event.preventDefault()
+
+    if (!isAuthor) {
+      if (event.currentTarget.dataset.role !== 'comment-preview')
+        setShowPreview(false)
+      return
+    }
+
+    dragStateRef.current = {
+      offsetX: event.clientX - screenPosition.x,
+      offsetY: event.clientY - screenPosition.y,
+      startX: event.clientX,
+      startY: event.clientY,
+      hasMoved: false,
+    }
+
+    setDragPosition(screenPosition)
+    setIsDragging(false)
+
+    if (event.currentTarget.dataset.role !== 'comment-preview')
+      setShowPreview(false)
+
+    if (event.currentTarget.setPointerCapture)
+      event.currentTarget.setPointerCapture(event.pointerId)
+  }, [isAuthor, screenPosition])
+
+  const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current
+    if (!dragState)
+      return
+
+    event.stopPropagation()
+    event.preventDefault()
+
+    const nextX = event.clientX - dragState.offsetX
+    const nextY = event.clientY - dragState.offsetY
+
+    if (!dragState.hasMoved) {
+      const distance = Math.hypot(event.clientX - dragState.startX, event.clientY - dragState.startY)
+      if (distance > 4) {
+        dragState.hasMoved = true
+        setIsDragging(true)
+      }
+    }
+
+    setDragPosition({ x: nextX, y: nextY })
+  }, [])
+
+  const finishDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current
+    if (!dragState)
+      return false
+
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId))
+      event.currentTarget.releasePointerCapture(event.pointerId)
+
+    dragStateRef.current = null
+    setDragPosition(null)
+    setIsDragging(false)
+    return dragState.hasMoved
+  }, [])
+
+  const handlePointerUp = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+
+    const finalScreenPosition = dragPosition ?? screenPosition
+    const didDrag = finishDrag(event)
+
+    setShowPreview(false)
+
+    if (didDrag) {
+      if (onPositionUpdate) {
+        const flowPosition = screenToFlowPosition({
+          x: finalScreenPosition.x,
+          y: finalScreenPosition.y,
+        })
+        onPositionUpdate(flowPosition)
+      }
+    }
+    else if (!isActive) {
+      onClick()
+    }
+  }, [dragPosition, finishDrag, isActive, onClick, onPositionUpdate, screenPosition, screenToFlowPosition])
+
+  const handlePointerCancel = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+    finishDrag(event)
+  }, [finishDrag])
+
+  const handleMouseEnter = useCallback(() => {
+    if (isActive || isDragging)
+      return
+    setShowPreview(true)
+  }, [isActive, isDragging])
+
+  const handleMouseLeave = useCallback(() => {
+    setShowPreview(false)
+  }, [])
+
+  const participants = useMemo(() => {
+    const list = comment.participants ?? []
+    const author = comment.created_by_account
+    if (!author)
+      return [...list]
+    const rest = list.filter(user => user.id !== author.id)
+    return [author, ...rest]
+  }, [comment.created_by_account, comment.participants])
+
+  // Calculate dynamic width based on number of participants
+  const participantCount = participants.length
+  const maxVisible = Math.min(3, participantCount)
+  const showCount = participantCount > 3
+  const avatarSize = 24
+  const avatarSpacing = 4 // -space-x-1 is about 4px overlap
+
+  // Width calculation: first avatar + (additional avatars * (size - spacing)) + padding
+  const dynamicWidth = Math.max(40, // minimum width
+    8 + avatarSize + Math.max(0, (showCount ? 2 : maxVisible - 1)) * (avatarSize - avatarSpacing) + 8)
+
+  const pointerEventHandlers = useMemo(() => ({
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+  }), [handlePointerCancel, handlePointerDown, handlePointerMove, handlePointerUp])
+
+  return (
+    <>
+      <div
+        className="absolute z-10"
+        style={{
+          left: canvasPosition.x,
+          top: canvasPosition.y,
+          transform: 'translate(-50%, -50%)',
+        }}
+        data-role="comment-marker"
+        {...pointerEventHandlers}
+      >
+        <div
+          className={cursorClass}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <div
+            className="relative h-10 rounded-tl-full rounded-tr-full rounded-br-full"
+            style={{ width: dynamicWidth }}
+          >
+            <div className={`absolute inset-[6px] overflow-hidden rounded-tl-full rounded-tr-full rounded-br-full border bg-components-panel-bg transition-shadow ${
+              isActive
+                ? 'border-primary-500 ring-1 ring-primary-500'
+                : 'border-components-panel-border'
+            }`}
+            >
+              <div className="flex h-full w-full items-center justify-center px-1">
+                <UserAvatarList
+                  users={participants}
+                  maxVisible={3}
+                  size="sm"
+                  className="-translate-y-[1.5px]"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Preview panel */}
+      {showPreview && !isActive && (
+        <div
+          className="absolute z-20"
+          style={{
+            left: (effectiveScreenPosition.x - containerLeft) - dynamicWidth / 2,
+            top: (effectiveScreenPosition.y - containerTop) + 20,
+            transform: 'translateY(-100%)',
+          }}
+          data-role="comment-preview"
+          {...pointerEventHandlers}
+          onMouseEnter={() => setShowPreview(true)}
+          onMouseLeave={() => setShowPreview(false)}
+        >
+          <CommentPreview
+            comment={comment}
+            onClick={() => {
+              setShowPreview(false)
+              onClick()
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+}, (prevProps, nextProps) => {
+  return (
+    prevProps.comment.id === nextProps.comment.id
+    && prevProps.comment.position_x === nextProps.comment.position_x
+    && prevProps.comment.position_y === nextProps.comment.position_y
+    && prevProps.onClick === nextProps.onClick
+    && prevProps.isActive === nextProps.isActive
+    && prevProps.onPositionUpdate === nextProps.onPositionUpdate
+  )
+})
+
+CommentIcon.displayName = 'CommentIcon'
diff --git a/web/app/components/workflow/comment/comment-input.spec.tsx b/web/app/components/workflow/comment/comment-input.spec.tsx
new file mode 100644
index 0000000000..41e583aeed
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-input.spec.tsx
@@ -0,0 +1,109 @@
+import type { FC } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { CommentInput } from './comment-input'
+
+type MentionInputProps = {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+  placeholder?: string
+  disabled?: boolean
+  autoFocus?: boolean
+  className?: string
+}
+
+const stableT = (key: string, options?: { ns?: string }) => (
+  options?.ns ? `${options.ns}.${key}` : key
+)
+
+let mentionInputProps: MentionInputProps | null = null
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: stableT,
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: {
+      id: 'user-1',
+      name: 'Alice',
+      avatar_url: 'avatar',
+    },
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/avatar', () => ({
+  Avatar: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
+  default: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
+}))
+
+vi.mock('./mention-input', () => ({
+  MentionInput: ((props: MentionInputProps) => {
+    mentionInputProps = props
+    return (
+      <button
+        type="button"
+        data-testid="mention-input"
+        onClick={() => props.onSubmit('Hello', ['user-2'])}
+      >
+        MentionInput
+      </button>
+    )
+  }) as FC<MentionInputProps>,
+}))
+
+describe('CommentInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mentionInputProps = null
+  })
+
+  it('passes translated placeholder to mention input', () => {
+    render(
+      <CommentInput
+        position={{ x: 0, y: 0 }}
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(mentionInputProps?.placeholder).toBe('workflow.comments.placeholder.add')
+    expect(mentionInputProps?.autoFocus).toBe(true)
+    expect(mentionInputProps?.disabled).toBe(false)
+  })
+
+  it('calls onCancel when Escape is pressed', () => {
+    const onCancel = vi.fn()
+
+    render(
+      <CommentInput
+        position={{ x: 0, y: 0 }}
+        onSubmit={vi.fn()}
+        onCancel={onCancel}
+      />,
+    )
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('forwards mention submit to onSubmit', () => {
+    const onSubmit = vi.fn()
+
+    render(
+      <CommentInput
+        position={{ x: 0, y: 0 }}
+        onSubmit={onSubmit}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByTestId('mention-input'))
+
+    expect(onSubmit).toHaveBeenCalledWith('Hello', ['user-2'])
+  })
+})
diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
new file mode 100644
index 0000000000..51cef610c4
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -0,0 +1,184 @@
+import type { FC, PointerEvent as ReactPointerEvent } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Avatar } from '@/app/components/base/ui/avatar'
+import { useAppContext } from '@/context/app-context'
+import { MentionInput } from './mention-input'
+
+type CommentInputProps = {
+  position: { x: number, y: number }
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+  onCancel: () => void
+  autoFocus?: boolean
+  disabled?: boolean
+  onPositionChange?: (position: {
+    pageX: number
+    pageY: number
+    elementX: number
+    elementY: number
+  }) => void
+}
+
+export const CommentInput: FC<CommentInputProps> = memo(({
+  position,
+  onSubmit,
+  onCancel,
+  autoFocus = true,
+  disabled = false,
+  onPositionChange,
+}) => {
+  const [content, setContent] = useState('')
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const dragStateRef = useRef<{
+    pointerId: number | null
+    startPointerX: number
+    startPointerY: number
+    startX: number
+    startY: number
+    active: boolean
+  } & {
+    endHandler?: (event: PointerEvent) => void
+  }>({
+    pointerId: null,
+    startPointerX: 0,
+    startPointerY: 0,
+    startX: 0,
+    startY: 0,
+    active: false,
+    endHandler: undefined,
+  })
+
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onCancel()
+      }
+    }
+
+    document.addEventListener('keydown', handleGlobalKeyDown, true)
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown, true)
+    }
+  }, [onCancel])
+
+  const handleMentionSubmit = useCallback((content: string, mentionedUserIds: string[]) => {
+    onSubmit(content, mentionedUserIds)
+    setContent('')
+  }, [onSubmit])
+
+  const handleDragPointerMove = useCallback((event: PointerEvent) => {
+    const state = dragStateRef.current
+    if (!state.active || (state.pointerId !== null && event.pointerId !== state.pointerId))
+      return
+    if (!onPositionChange)
+      return
+    event.preventDefault()
+    const deltaX = event.clientX - state.startPointerX
+    const deltaY = event.clientY - state.startPointerY
+    onPositionChange({
+      pageX: event.clientX,
+      pageY: event.clientY,
+      elementX: state.startX + deltaX,
+      elementY: state.startY + deltaY,
+    })
+  }, [onPositionChange])
+
+  const stopDragging = useCallback((event?: PointerEvent) => {
+    const state = dragStateRef.current
+    if (!state.active)
+      return
+    if (event && state.pointerId !== null && event.pointerId !== state.pointerId)
+      return
+    state.active = false
+    state.pointerId = null
+    window.removeEventListener('pointermove', handleDragPointerMove)
+    if (state.endHandler) {
+      window.removeEventListener('pointerup', state.endHandler)
+      window.removeEventListener('pointercancel', state.endHandler)
+      state.endHandler = undefined
+    }
+  }, [handleDragPointerMove])
+
+  const handleDragPointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0)
+      return
+    event.stopPropagation()
+    event.preventDefault()
+    if (!onPositionChange)
+      return
+    const endHandler = (pointerEvent: PointerEvent) => {
+      stopDragging(pointerEvent)
+    }
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startPointerX: event.clientX,
+      startPointerY: event.clientY,
+      startX: position.x,
+      startY: position.y,
+      active: true,
+      endHandler,
+    }
+    window.addEventListener('pointermove', handleDragPointerMove, { passive: false })
+    window.addEventListener('pointerup', endHandler)
+    window.addEventListener('pointercancel', endHandler)
+  }, [handleDragPointerMove, onPositionChange, position.x, position.y, stopDragging])
+
+  useEffect(() => () => {
+    stopDragging()
+  }, [stopDragging])
+
+  return (
+    <div
+      className={cn(
+        'absolute z-[60] w-96',
+        disabled && 'pointer-events-none opacity-80',
+      )}
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+      data-comment-input
+    >
+      <div className="flex items-center gap-3">
+        <div
+          className="relative shrink-0 cursor-move"
+          onPointerDown={handleDragPointerDown}
+        >
+          <div className="relative aspect-square h-8 w-8 shrink-0 rounded-tl-full rounded-tr-full rounded-br-full bg-primary-500 p-[2px]">
+            <div className="flex size-full items-center justify-center overflow-hidden rounded-tl-full rounded-tr-full rounded-br-full bg-components-panel-bg-blur p-[2px]">
+              <Avatar
+                avatar={userProfile.avatar_url}
+                name={userProfile.name}
+                size="sm"
+                className="block size-full rounded-full"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'relative z-10 flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[4px] shadow-md',
+          )}
+        >
+          <div className="relative pt-[4px] pl-[9px]">
+            <MentionInput
+              value={content}
+              onChange={setContent}
+              onSubmit={handleMentionSubmit}
+              placeholder={t('comments.placeholder.add', { ns: 'workflow' })}
+              autoFocus={autoFocus}
+              disabled={disabled}
+              className="relative"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+CommentInput.displayName = 'CommentInput'
diff --git a/web/app/components/workflow/comment/comment-preview.spec.tsx b/web/app/components/workflow/comment/comment-preview.spec.tsx
new file mode 100644
index 0000000000..d411c67ecd
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-preview.spec.tsx
@@ -0,0 +1,86 @@
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import CommentPreview from './comment-preview'
+
+type UserProfile = WorkflowCommentList['created_by_account']
+
+const mockSetHovering = vi.fn()
+let capturedUsers: UserProfile[] = []
+
+vi.mock('@/app/components/base/user-avatar-list', () => ({
+  UserAvatarList: ({ users }: { users: UserProfile[] }) => {
+    capturedUsers = users
+    return <div data-testid="avatar-list">{users.map(user => user.id).join(',')}</div>
+  },
+}))
+
+vi.mock('@/hooks/use-format-time-from-now', () => ({
+  useFormatTimeFromNow: () => ({
+    formatTimeFromNow: (value: number) => `time:${value}`,
+  }),
+}))
+
+vi.mock('../store', () => ({
+  useStore: (selector: (state: { setCommentPreviewHovering: (value: boolean) => void }) => unknown) =>
+    selector({ setCommentPreviewHovering: mockSetHovering }),
+}))
+
+const createComment = (overrides: Partial<WorkflowCommentList> = {}): WorkflowCommentList => {
+  const author = { id: 'user-1', name: 'Alice', email: 'alice@example.com' }
+  const participant = { id: 'user-2', name: 'Bob', email: 'bob@example.com' }
+
+  return {
+    id: 'comment-1',
+    position_x: 0,
+    position_y: 0,
+    content: 'Hello',
+    created_by: author.id,
+    created_by_account: author,
+    created_at: 1,
+    updated_at: 10,
+    resolved: false,
+    mention_count: 0,
+    reply_count: 0,
+    participants: [author, participant],
+    ...overrides,
+  }
+}
+
+describe('CommentPreview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedUsers = []
+  })
+
+  it('orders participants with author first and formats time', () => {
+    const comment = createComment()
+
+    render(<CommentPreview comment={comment} />)
+
+    expect(capturedUsers.map(user => user.id)).toEqual(['user-1', 'user-2'])
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+    expect(screen.getByText('time:10000')).toBeInTheDocument()
+  })
+
+  it('updates hover state on enter and leave', () => {
+    const comment = createComment()
+    const { container } = render(<CommentPreview comment={comment} />)
+    const root = container.firstElementChild as HTMLElement
+
+    fireEvent.mouseEnter(root)
+    fireEvent.mouseLeave(root)
+
+    expect(mockSetHovering).toHaveBeenCalledWith(true)
+    expect(mockSetHovering).toHaveBeenCalledWith(false)
+  })
+
+  it('clears hover state on unmount', () => {
+    const comment = createComment()
+    const { unmount } = render(<CommentPreview comment={comment} />)
+
+    unmount()
+
+    expect(mockSetHovering).toHaveBeenCalledWith(false)
+  })
+})
diff --git a/web/app/components/workflow/comment/comment-preview.tsx b/web/app/components/workflow/comment/comment-preview.tsx
new file mode 100644
index 0000000000..5985ed848b
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-preview.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import type { FC } from 'react'
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { memo, useEffect, useMemo } from 'react'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useStore } from '../store'
+
+type CommentPreviewProps = {
+  comment: WorkflowCommentList
+  onClick?: () => void
+}
+
+const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+  const setCommentPreviewHovering = useStore(s => s.setCommentPreviewHovering)
+  const participants = useMemo(() => {
+    const list = comment.participants ?? []
+    const author = comment.created_by_account
+    if (!author)
+      return [...list]
+    const rest = list.filter(user => user.id !== author.id)
+    return [author, ...rest]
+  }, [comment.created_by_account, comment.participants])
+  useEffect(() => () => {
+    setCommentPreviewHovering(false)
+  }, [setCommentPreviewHovering])
+
+  return (
+    <div
+      className="w-80 cursor-pointer rounded-3xl rounded-bl-[3px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4 shadow-lg backdrop-blur-[10px] transition-colors hover:bg-components-panel-on-panel-item-bg-hover"
+      onClick={onClick}
+      onMouseEnter={() => setCommentPreviewHovering(true)}
+      onMouseLeave={() => setCommentPreviewHovering(false)}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <UserAvatarList
+          users={participants}
+          maxVisible={3}
+          size="sm"
+        />
+      </div>
+
+      <div className="mb-2 flex items-start">
+        <div className="flex min-w-0 items-center gap-2">
+          <div className="truncate system-sm-medium text-text-primary">{comment.created_by_account.name}</div>
+          <div className="shrink-0 system-2xs-regular text-text-tertiary">
+            {formatTimeFromNow(comment.updated_at * 1000)}
+          </div>
+        </div>
+      </div>
+
+      <div className="system-sm-regular break-words text-text-secondary">{comment.content}</div>
+    </div>
+  )
+}
+
+export default memo(CommentPreview)
diff --git a/web/app/components/workflow/comment/cursor.spec.tsx b/web/app/components/workflow/comment/cursor.spec.tsx
new file mode 100644
index 0000000000..c6cd64c0aa
--- /dev/null
+++ b/web/app/components/workflow/comment/cursor.spec.tsx
@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ControlMode } from '../types'
+import { CommentCursor } from './cursor'
+
+const mockState = {
+  controlMode: ControlMode.Pointer,
+  isCommentPlacing: false,
+  mousePosition: {
+    elementX: 10,
+    elementY: 20,
+  },
+}
+
+vi.mock('@/app/components/base/icons/src/public/other', () => ({
+  Comment: (props: { className?: string }) => <svg data-testid="comment-icon" {...props} />,
+}))
+
+vi.mock('../store', () => ({
+  useStore: (selector: (state: typeof mockState) => unknown) => selector(mockState),
+}))
+
+describe('CommentCursor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders nothing when not in comment mode', () => {
+    mockState.controlMode = ControlMode.Pointer
+
+    render(<CommentCursor />)
+
+    expect(screen.queryByTestId('comment-icon')).not.toBeInTheDocument()
+  })
+
+  it('renders at current mouse position when in comment mode', () => {
+    mockState.controlMode = ControlMode.Comment
+    mockState.isCommentPlacing = false
+
+    render(<CommentCursor />)
+
+    const icon = screen.getByTestId('comment-icon')
+    const container = icon.parentElement as HTMLElement
+
+    expect(container).toHaveStyle({ left: '10px', top: '20px' })
+  })
+
+  it('renders nothing when comment is in placing mode', () => {
+    mockState.controlMode = ControlMode.Comment
+    mockState.isCommentPlacing = true
+
+    render(<CommentCursor />)
+
+    expect(screen.queryByTestId('comment-icon')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/workflow/comment/cursor.tsx b/web/app/components/workflow/comment/cursor.tsx
new file mode 100644
index 0000000000..02f09f7d92
--- /dev/null
+++ b/web/app/components/workflow/comment/cursor.tsx
@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import { Comment } from '@/app/components/base/icons/src/public/other'
+import { useStore } from '../store'
+import { ControlMode } from '../types'
+
+export const CommentCursor: FC = memo(() => {
+  const controlMode = useStore(s => s.controlMode)
+  const mousePosition = useStore(s => s.mousePosition)
+  const isCommentPlacing = useStore(s => s.isCommentPlacing)
+
+  if (controlMode !== ControlMode.Comment || isCommentPlacing)
+    return null
+
+  return (
+    <div
+      className="pointer-events-none absolute z-50 flex h-6 w-6 items-center justify-center"
+      style={{
+        left: mousePosition.elementX,
+        top: mousePosition.elementY,
+        transform: 'translate(-50%, -50%)',
+      }}
+    >
+      <Comment className="text-text-primary" />
+    </div>
+  )
+})
+
+CommentCursor.displayName = 'CommentCursor'
diff --git a/web/app/components/workflow/comment/mention-input.spec.tsx b/web/app/components/workflow/comment/mention-input.spec.tsx
new file mode 100644
index 0000000000..5ff211d1f2
--- /dev/null
+++ b/web/app/components/workflow/comment/mention-input.spec.tsx
@@ -0,0 +1,151 @@
+import type { UserProfile } from '@/service/workflow-comment'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { useState } from 'react'
+import { MentionInput } from './mention-input'
+
+const mockFetchMentionableUsers = vi.hoisted(() => vi.fn())
+const mockSetMentionableUsersLoading = vi.hoisted(() => vi.fn())
+const mockSetMentionableUsersCache = vi.hoisted(() => vi.fn())
+
+const mentionStoreState = vi.hoisted(() => ({
+  mentionableUsersCache: {} as Record<string, UserProfile[]>,
+  mentionableUsersLoading: {} as Record<string, boolean>,
+  setMentionableUsersLoading: (appId: string, loading: boolean) => {
+    mockSetMentionableUsersLoading(appId, loading)
+    mentionStoreState.mentionableUsersLoading[appId] = loading
+  },
+  setMentionableUsersCache: (appId: string, users: UserProfile[]) => {
+    mockSetMentionableUsersCache(appId, users)
+    mentionStoreState.mentionableUsersCache[appId] = users
+  },
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+  }),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useParams: () => ({ appId: 'app-1' }),
+}))
+
+vi.mock('@/service/workflow-comment', () => ({
+  fetchMentionableUsers: (...args: unknown[]) => mockFetchMentionableUsers(...args),
+}))
+
+vi.mock('../store', () => ({
+  useStore: (selector: (state: typeof mentionStoreState) => unknown) => selector(mentionStoreState),
+  useWorkflowStore: () => ({
+    getState: () => mentionStoreState,
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/avatar', () => ({
+  Avatar: ({ name }: { name: string }) => <div data-testid="mention-avatar">{name}</div>,
+}))
+
+const mentionUsers: UserProfile[] = [
+  {
+    id: 'user-2',
+    name: 'Alice',
+    email: 'alice@example.com',
+    avatar_url: 'alice.png',
+  },
+  {
+    id: 'user-3',
+    name: 'Bob',
+    email: 'bob@example.com',
+    avatar_url: 'bob.png',
+  },
+]
+
+function ControlledMentionInput({
+  onSubmit,
+}: {
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+}) {
+  const [value, setValue] = useState('')
+  return (
+    <MentionInput
+      value={value}
+      onChange={setValue}
+      onSubmit={onSubmit}
+    />
+  )
+}
+
+describe('MentionInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mentionStoreState.mentionableUsersCache = {}
+    mentionStoreState.mentionableUsersLoading = {}
+    mockFetchMentionableUsers.mockResolvedValue(mentionUsers)
+  })
+
+  it('loads mentionable users when cache is empty', async () => {
+    render(
+      <MentionInput
+        value=""
+        onChange={vi.fn()}
+        onSubmit={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => {
+      expect(mockFetchMentionableUsers).toHaveBeenCalledWith('app-1')
+    })
+
+    expect(mockSetMentionableUsersLoading).toHaveBeenCalledWith('app-1', true)
+    expect(mockSetMentionableUsersCache).toHaveBeenCalledWith('app-1', mentionUsers)
+    expect(mockSetMentionableUsersLoading).toHaveBeenCalledWith('app-1', false)
+  })
+
+  it('selects a mention and submits with mentioned user ids', async () => {
+    mentionStoreState.mentionableUsersCache['app-1'] = mentionUsers
+    const onSubmit = vi.fn()
+
+    render(<ControlledMentionInput onSubmit={onSubmit} />)
+
+    const textarea = screen.getByPlaceholderText('workflow.comments.placeholder.add') as HTMLTextAreaElement
+    textarea.focus()
+    textarea.setSelectionRange(4, 4)
+    fireEvent.change(textarea, { target: { value: '@Ali' } })
+
+    await waitFor(() => {
+      expect(screen.getByText('alice@example.com')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByText('alice@example.com'))
+    fireEvent.change(textarea, { target: { value: '@Alice hi' } })
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith('@Alice hi', ['user-2'])
+    })
+  })
+
+  it('supports editing mode cancel and save actions', async () => {
+    mentionStoreState.mentionableUsersCache['app-1'] = mentionUsers
+    const onSubmit = vi.fn()
+    const onCancel = vi.fn()
+
+    render(
+      <MentionInput
+        value="  updated reply  "
+        onChange={vi.fn()}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        isEditing
+      />,
+    )
+
+    fireEvent.click(screen.getByText('common.operation.cancel'))
+    expect(onCancel).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(screen.getByText('common.operation.save'))
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith('updated reply', [])
+    })
+  })
+})
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
new file mode 100644
index 0000000000..ac708b979d
--- /dev/null
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -0,0 +1,661 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { UserProfile } from '@/service/workflow-comment'
+import { cn } from '@langgenius/dify-ui/cn'
+import { RiArrowUpLine, RiAtLine, RiLoader2Line } from '@remixicon/react'
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import Textarea from 'react-textarea-autosize'
+import EnterKey from '@/app/components/base/icons/src/public/common/EnterKey'
+import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
+import { useParams } from '@/next/navigation'
+import { fetchMentionableUsers } from '@/service/workflow-comment'
+import { useStore, useWorkflowStore } from '../store'
+
+type MentionInputProps = {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+  onCancel?: () => void
+  placeholder?: string
+  disabled?: boolean
+  loading?: boolean
+  className?: string
+  isEditing?: boolean
+  autoFocus?: boolean
+}
+
+const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder,
+  disabled = false,
+  loading = false,
+  className,
+  isEditing = false,
+  autoFocus = false,
+}, forwardedRef) => {
+  const params = useParams()
+  const { t } = useTranslation()
+  const appId = params.appId as string
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const highlightContentRef = useRef<HTMLDivElement>(null)
+  const actionContainerRef = useRef<HTMLDivElement | null>(null)
+  const actionRightRef = useRef<HTMLDivElement | null>(null)
+  const baseTextareaHeightRef = useRef<number | null>(null)
+
+  // Expose textarea ref to parent component
+  useImperativeHandle(forwardedRef, () => textareaRef.current!, [])
+
+  const workflowStore = useWorkflowStore()
+  const mentionUsersFromStore = useStore(state => (
+    appId ? state.mentionableUsersCache[appId] : undefined
+  ))
+  const mentionUsers = mentionUsersFromStore ?? []
+
+  const [showMentionDropdown, setShowMentionDropdown] = useState(false)
+  const [mentionQuery, setMentionQuery] = useState('')
+  const [mentionPosition, setMentionPosition] = useState(0)
+  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0)
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([])
+  const resolvedPlaceholder = placeholder ?? t('comments.placeholder.add', { ns: 'workflow' })
+  const BASE_PADDING = 4
+  const [shouldReserveButtonGap, setShouldReserveButtonGap] = useState(isEditing)
+  const [shouldReserveHorizontalSpace, setShouldReserveHorizontalSpace] = useState(() => !isEditing)
+  const [paddingRight, setPaddingRight] = useState(() => BASE_PADDING + (isEditing ? 0 : 48))
+  const [paddingBottom, setPaddingBottom] = useState(() => BASE_PADDING + (isEditing ? 32 : 0))
+
+  const mentionNameList = useMemo(() => {
+    const names = mentionUsers
+      .map(user => user.name?.trim())
+      .filter((name): name is string => Boolean(name))
+
+    const uniqueNames = Array.from(new Set(names))
+    uniqueNames.sort((a, b) => b.length - a.length)
+    return uniqueNames
+  }, [mentionUsers])
+
+  const highlightedValue = useMemo<ReactNode>(() => {
+    if (!value)
+      return ''
+
+    if (mentionNameList.length === 0)
+      return value
+
+    const segments: ReactNode[] = []
+    let cursor = 0
+    let hasMention = false
+
+    while (cursor < value.length) {
+      let nextMatchStart = -1
+      let matchedName = ''
+
+      for (const name of mentionNameList) {
+        const searchStart = value.indexOf(`@${name}`, cursor)
+        if (searchStart === -1)
+          continue
+
+        const previousChar = searchStart > 0 ? value[searchStart - 1] : ''
+        if (searchStart > 0 && !/\s/.test(previousChar))
+          continue
+
+        if (
+          nextMatchStart === -1
+          || searchStart < nextMatchStart
+          || (searchStart === nextMatchStart && name.length > matchedName.length)
+        ) {
+          nextMatchStart = searchStart
+          matchedName = name
+        }
+      }
+
+      if (nextMatchStart === -1)
+        break
+
+      if (nextMatchStart > cursor)
+        segments.push(<span key={`text-${cursor}`}>{value.slice(cursor, nextMatchStart)}</span>)
+
+      const mentionEnd = nextMatchStart + matchedName.length + 1
+      segments.push(
+        <span key={`mention-${nextMatchStart}`} className="text-primary-600">
+          {value.slice(nextMatchStart, mentionEnd)}
+        </span>,
+      )
+
+      hasMention = true
+      cursor = mentionEnd
+    }
+
+    if (!hasMention)
+      return value
+
+    if (cursor < value.length)
+      segments.push(<span key={`text-${cursor}`}>{value.slice(cursor)}</span>)
+
+    return segments
+  }, [value, mentionNameList])
+
+  const loadMentionableUsers = useCallback(async () => {
+    if (!appId)
+      return
+
+    const state = workflowStore.getState()
+    if (state.mentionableUsersCache[appId] !== undefined)
+      return
+
+    if (state.mentionableUsersLoading[appId])
+      return
+
+    state.setMentionableUsersLoading(appId, true)
+    try {
+      const users = await fetchMentionableUsers(appId)
+      workflowStore.getState().setMentionableUsersCache(appId, users)
+    }
+    catch (error) {
+      console.error('Failed to load mentionable users:', error)
+    }
+    finally {
+      workflowStore.getState().setMentionableUsersLoading(appId, false)
+    }
+  }, [appId, workflowStore])
+
+  useEffect(() => {
+    loadMentionableUsers()
+  }, [loadMentionableUsers])
+  const syncHighlightScroll = useCallback(() => {
+    const textarea = textareaRef.current
+    const highlightContent = highlightContentRef.current
+    if (!textarea || !highlightContent)
+      return
+
+    const { scrollTop, scrollLeft } = textarea
+    highlightContent.style.transform = `translate(${-scrollLeft}px, ${-scrollTop}px)`
+  }, [])
+
+  const evaluateContentLayout = useCallback(() => {
+    const textarea = textareaRef.current
+    if (!textarea)
+      return
+
+    const extraBottom = Math.max(0, paddingBottom - BASE_PADDING)
+    const effectiveClientHeight = textarea.clientHeight - extraBottom
+
+    if (baseTextareaHeightRef.current === null)
+      baseTextareaHeightRef.current = effectiveClientHeight
+
+    const baseHeight = baseTextareaHeightRef.current ?? effectiveClientHeight
+    const hasMultiline = effectiveClientHeight > baseHeight + 1
+    const shouldReserveVertical = isEditing ? true : hasMultiline
+
+    setShouldReserveButtonGap(shouldReserveVertical)
+    setShouldReserveHorizontalSpace(!hasMultiline)
+  }, [isEditing, paddingBottom])
+
+  const updateLayoutPadding = useCallback(() => {
+    const actionEl = actionContainerRef.current
+    const rect = actionEl?.getBoundingClientRect()
+    const rightRect = actionRightRef.current?.getBoundingClientRect()
+    let actionWidth = 0
+    if (rightRect)
+      actionWidth = Math.ceil(rightRect.width)
+    else if (rect)
+      actionWidth = Math.ceil(rect.width)
+
+    const actionHeight = rect ? Math.ceil(rect.height) : 0
+    const fallbackWidth = Math.max(0, paddingRight - BASE_PADDING)
+    const fallbackHeight = Math.max(0, paddingBottom - BASE_PADDING)
+    const effectiveWidth = actionWidth > 0 ? actionWidth : fallbackWidth
+    const effectiveHeight = actionHeight > 0 ? actionHeight : fallbackHeight
+
+    const nextRight = BASE_PADDING + (shouldReserveHorizontalSpace ? effectiveWidth : 0)
+    const nextBottom = BASE_PADDING + (shouldReserveButtonGap ? effectiveHeight : 0)
+
+    setPaddingRight(prev => (prev === nextRight ? prev : nextRight))
+    setPaddingBottom(prev => (prev === nextBottom ? prev : nextBottom))
+  }, [shouldReserveButtonGap, shouldReserveHorizontalSpace, paddingRight, paddingBottom])
+
+  const setActionContainerRef = useCallback((node: HTMLDivElement | null) => {
+    actionContainerRef.current = node
+
+    if (!isEditing)
+      actionRightRef.current = node
+    else if (!node)
+      actionRightRef.current = null
+
+    if (node && typeof window !== 'undefined')
+      window.requestAnimationFrame(() => updateLayoutPadding())
+  }, [isEditing, updateLayoutPadding])
+
+  const setActionRightRef = useCallback((node: HTMLDivElement | null) => {
+    actionRightRef.current = node
+
+    if (node && typeof window !== 'undefined')
+      window.requestAnimationFrame(() => updateLayoutPadding())
+  }, [updateLayoutPadding])
+
+  useLayoutEffect(() => {
+    syncHighlightScroll()
+  }, [value, syncHighlightScroll])
+
+  useLayoutEffect(() => {
+    Promise.resolve().then(() => {
+      evaluateContentLayout()
+    })
+  }, [value, evaluateContentLayout])
+
+  useLayoutEffect(() => {
+    Promise.resolve().then(() => {
+      updateLayoutPadding()
+    })
+  }, [updateLayoutPadding, isEditing, shouldReserveButtonGap])
+
+  useEffect(() => {
+    const handleResize = () => {
+      evaluateContentLayout()
+      updateLayoutPadding()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [evaluateContentLayout, updateLayoutPadding])
+
+  useEffect(() => {
+    Promise.resolve().then(() => {
+      baseTextareaHeightRef.current = null
+      evaluateContentLayout()
+      setShouldReserveHorizontalSpace(!isEditing)
+    })
+  }, [isEditing, evaluateContentLayout])
+
+  const filteredMentionUsers = useMemo(() => {
+    if (!mentionQuery)
+      return mentionUsers
+    return mentionUsers.filter(user =>
+      user.name.toLowerCase().includes(mentionQuery.toLowerCase())
+      || user.email.toLowerCase().includes(mentionQuery.toLowerCase()),
+    )
+  }, [mentionUsers, mentionQuery])
+
+  const shouldDisableMentionButton = useMemo(() => {
+    if (showMentionDropdown)
+      return true
+
+    const textarea = textareaRef.current
+    if (!textarea)
+      return false
+
+    const cursorPosition = textarea.selectionStart || 0
+    const textBeforeCursor = value.slice(0, cursorPosition)
+    return /@\w*$/.test(textBeforeCursor)
+  }, [showMentionDropdown, value])
+
+  const dropdownPosition = useMemo(() => {
+    if (!showMentionDropdown || !textareaRef.current)
+      return { x: 0, y: 0, placement: 'bottom' as const }
+
+    const textareaRect = textareaRef.current.getBoundingClientRect()
+    const dropdownHeight = 160 // max-h-40 = 10rem = 160px
+    const viewportHeight = window.innerHeight
+    const spaceBelow = viewportHeight - textareaRect.bottom
+    const spaceAbove = textareaRect.top
+
+    const shouldPlaceAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow
+
+    return {
+      x: textareaRect.left,
+      y: shouldPlaceAbove ? textareaRect.top - 4 : textareaRect.bottom + 4,
+      placement: shouldPlaceAbove ? 'top' as const : 'bottom' as const,
+    }
+  }, [showMentionDropdown])
+
+  const handleContentChange = useCallback((newValue: string) => {
+    onChange(newValue)
+
+    setTimeout(() => {
+      const cursorPosition = textareaRef.current?.selectionStart || 0
+      const textBeforeCursor = newValue.slice(0, cursorPosition)
+      const mentionMatch = textBeforeCursor.match(/@(\w*)$/)
+
+      if (mentionMatch) {
+        setMentionQuery(mentionMatch[1])
+        setMentionPosition(cursorPosition - mentionMatch[0].length)
+        setShowMentionDropdown(true)
+        setSelectedMentionIndex(0)
+      }
+      else {
+        setShowMentionDropdown(false)
+      }
+
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          evaluateContentLayout()
+          syncHighlightScroll()
+        })
+      }
+    }, 0)
+  }, [onChange, evaluateContentLayout, syncHighlightScroll])
+
+  const handleMentionButtonClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const textarea = textareaRef.current
+    if (!textarea)
+      return
+
+    const cursorPosition = textarea.selectionStart || 0
+    const textBeforeCursor = value.slice(0, cursorPosition)
+
+    if (showMentionDropdown)
+      return
+
+    if (/@\w*$/.test(textBeforeCursor))
+      return
+
+    const newContent = `${value.slice(0, cursorPosition)}@${value.slice(cursorPosition)}`
+
+    onChange(newContent)
+
+    setTimeout(() => {
+      const newCursorPos = cursorPosition + 1
+      textarea.setSelectionRange(newCursorPos, newCursorPos)
+      textarea.focus()
+
+      setMentionQuery('')
+      setMentionPosition(cursorPosition)
+      setShowMentionDropdown(true)
+      setSelectedMentionIndex(0)
+
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          evaluateContentLayout()
+          syncHighlightScroll()
+        })
+      }
+    }, 0)
+  }, [value, onChange, evaluateContentLayout, syncHighlightScroll, showMentionDropdown])
+
+  const insertMention = useCallback((user: UserProfile) => {
+    const textarea = textareaRef.current
+    if (!textarea)
+      return
+
+    const beforeMention = value.slice(0, mentionPosition)
+    const afterMention = value.slice(textarea.selectionStart || 0)
+
+    const needsSpaceBefore = mentionPosition > 0 && !/\s/.test(value[mentionPosition - 1])
+    const prefix = needsSpaceBefore ? ' ' : ''
+    const newContent = `${beforeMention}${prefix}@${user.name} ${afterMention}`
+
+    onChange(newContent)
+    setShowMentionDropdown(false)
+
+    const newMentionedUserIds = [...mentionedUserIds, user.id]
+    setMentionedUserIds(newMentionedUserIds)
+
+    setTimeout(() => {
+      const extraSpace = needsSpaceBefore ? 1 : 0
+      const newCursorPos = mentionPosition + extraSpace + user.name.length + 2 // (space) + @ + name + space
+      textarea.setSelectionRange(newCursorPos, newCursorPos)
+      textarea.focus()
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          evaluateContentLayout()
+          syncHighlightScroll()
+        })
+      }
+    }, 0)
+  }, [value, mentionPosition, onChange, mentionedUserIds, evaluateContentLayout, syncHighlightScroll])
+
+  const handleSubmit = useCallback(async (e?: React.MouseEvent) => {
+    if (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    if (value.trim()) {
+      try {
+        await onSubmit(value.trim(), mentionedUserIds)
+        setMentionedUserIds([])
+        setShowMentionDropdown(false)
+      }
+      catch (error) {
+        console.error('Failed to submit', error)
+      }
+    }
+  }, [value, mentionedUserIds, onSubmit])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    // Ignore key events during IME composition (e.g., Chinese, Japanese input)
+    if (e.nativeEvent.isComposing)
+      return
+
+    if (showMentionDropdown) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setSelectedMentionIndex(prev =>
+          prev < filteredMentionUsers.length - 1 ? prev + 1 : 0,
+        )
+      }
+      else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setSelectedMentionIndex(prev =>
+          prev > 0 ? prev - 1 : filteredMentionUsers.length - 1,
+        )
+      }
+      else if (e.key === 'Enter') {
+        e.preventDefault()
+        if (filteredMentionUsers[selectedMentionIndex])
+          insertMention(filteredMentionUsers[selectedMentionIndex])
+
+        return
+      }
+      else if (e.key === 'Escape') {
+        e.preventDefault()
+        setShowMentionDropdown(false)
+        return
+      }
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey && !showMentionDropdown) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }, [showMentionDropdown, filteredMentionUsers, selectedMentionIndex, insertMention, handleSubmit])
+
+  const resetMentionState = useCallback(() => {
+    setMentionedUserIds([])
+    setShowMentionDropdown(false)
+    setMentionQuery('')
+    setMentionPosition(0)
+    setSelectedMentionIndex(0)
+  }, [])
+
+  useEffect(() => {
+    if (!value) {
+      Promise.resolve().then(() => {
+        resetMentionState()
+      })
+    }
+  }, [value, resetMentionState])
+
+  useEffect(() => {
+    if (autoFocus && textareaRef.current) {
+      const textarea = textareaRef.current
+      setTimeout(() => {
+        textarea.focus()
+        const length = textarea.value.length
+        textarea.setSelectionRange(length, length)
+      }, 0)
+    }
+  }, [autoFocus])
+
+  return (
+    <>
+      <div className={cn('relative flex items-center', className)}>
+        <div
+          aria-hidden
+          className={cn(
+            'inset-0 pointer-events-none absolute z-0 overflow-hidden p-1 leading-6 break-words whitespace-pre-wrap',
+            'body-lg-regular text-text-primary',
+          )}
+          style={{ paddingRight, paddingBottom }}
+        >
+          <div
+            ref={highlightContentRef}
+            className="min-h-full"
+            style={{ willChange: 'transform' }}
+          >
+            {highlightedValue}
+
+          </div>
+        </div>
+        <Textarea
+          ref={textareaRef}
+          className={cn(
+            'relative z-10 w-full resize-none bg-transparent p-1 body-lg-regular leading-6 text-transparent caret-primary-500 outline-none',
+            'placeholder:text-text-tertiary',
+          )}
+          style={{ paddingRight, paddingBottom }}
+          placeholder={resolvedPlaceholder}
+          autoFocus={autoFocus}
+          minRows={isEditing ? 4 : 1}
+          maxRows={4}
+          value={value}
+          disabled={disabled || loading}
+          onChange={e => handleContentChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onScroll={syncHighlightScroll}
+        />
+
+        {!isEditing && (
+          <div
+            ref={setActionContainerRef}
+            className="absolute right-1 bottom-0 z-20 flex items-end gap-1"
+          >
+            <div
+              className={cn(
+                'z-20 flex h-8 w-8 items-center justify-center rounded-lg transition-opacity',
+                shouldDisableMentionButton
+                  ? 'cursor-not-allowed opacity-40'
+                  : 'cursor-pointer hover:bg-state-base-hover',
+              )}
+              onClick={shouldDisableMentionButton ? undefined : handleMentionButtonClick}
+            >
+              <RiAtLine className="h-4 w-4 text-text-tertiary" />
+            </div>
+            <Button
+              className="z-20 ml-2 w-8 px-0"
+              variant="primary"
+              disabled={!value.trim() || disabled || loading}
+              onClick={handleSubmit}
+            >
+              {loading
+                ? <RiLoader2Line className="h-4 w-4 animate-spin text-components-button-primary-text" />
+                : <RiArrowUpLine className="h-4 w-4 text-components-button-primary-text" />}
+            </Button>
+          </div>
+        )}
+
+        {isEditing && (
+          <div
+            ref={setActionContainerRef}
+            className="absolute right-1 bottom-0 left-1 z-20 flex items-end justify-between"
+          >
+            <div
+              className={cn(
+                'z-20 flex h-8 w-8 items-center justify-center rounded-lg transition-opacity',
+                shouldDisableMentionButton
+                  ? 'cursor-not-allowed opacity-40'
+                  : 'cursor-pointer hover:bg-state-base-hover',
+              )}
+              onClick={shouldDisableMentionButton ? undefined : handleMentionButtonClick}
+            >
+              <RiAtLine className="h-4 w-4 text-text-tertiary" />
+            </div>
+            <div
+              ref={setActionRightRef}
+              className="flex items-center gap-2"
+            >
+              <Button variant="secondary" size="small" onClick={onCancel} disabled={loading}>
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <Button
+                variant="primary"
+                size="small"
+                disabled={loading || !value.trim()}
+                onClick={() => handleSubmit()}
+                className="gap-1"
+              >
+                {loading && <RiLoader2Line className="mr-1 h-3.5 w-3.5 animate-spin" />}
+                <span>{t('operation.save', { ns: 'common' })}</span>
+                {!loading && (
+                  <EnterKey className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {showMentionDropdown && filteredMentionUsers.length > 0 && typeof document !== 'undefined' && createPortal(
+        <div
+          className="fixed z-[9999] max-h-[248px] w-[280px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg/95 shadow-lg backdrop-blur-[10px]"
+          style={{
+            left: dropdownPosition.x,
+            [dropdownPosition.placement === 'top' ? 'bottom' : 'top']: dropdownPosition.placement === 'top'
+              ? window.innerHeight - dropdownPosition.y
+              : dropdownPosition.y,
+          }}
+          data-mention-dropdown
+        >
+          {filteredMentionUsers.map((user, index) => (
+            <div
+              key={user.id}
+              className={cn(
+                'flex cursor-pointer items-center gap-2 rounded-md py-1 pr-3 pl-2 hover:bg-state-base-hover',
+                index === selectedMentionIndex && 'bg-state-base-hover',
+              )}
+              onClick={() => insertMention(user)}
+            >
+              <Avatar
+                avatar={user.avatar_url || null}
+                name={user.name}
+                size="sm"
+                className="shrink-0"
+              />
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-sm font-medium text-text-primary">
+                  {user.name}
+                </div>
+                <div className="truncate text-xs text-text-tertiary">
+                  {user.email}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  )
+})
+
+MentionInputInner.displayName = 'MentionInputInner'
+
+export const MentionInput = memo(MentionInputInner)
diff --git a/web/app/components/workflow/comment/thread.spec.tsx b/web/app/components/workflow/comment/thread.spec.tsx
new file mode 100644
index 0000000000..40e522d4b7
--- /dev/null
+++ b/web/app/components/workflow/comment/thread.spec.tsx
@@ -0,0 +1,291 @@
+import type { WorkflowCommentDetail } from '@/service/workflow-comment'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { CommentThread } from './thread'
+
+const mockSetCommentPreviewHovering = vi.hoisted(() => vi.fn())
+const mockFlowToScreenPosition = vi.hoisted(() => vi.fn(({ x, y }: { x: number, y: number }) => ({ x, y })))
+
+const storeState = vi.hoisted(() => ({
+  mentionableUsersCache: {
+    'app-1': [
+      { id: 'user-1', name: 'Alice', email: 'alice@example.com', avatar_url: 'alice.png' },
+      { id: 'user-2', name: 'Bob', email: 'bob@example.com', avatar_url: 'bob.png' },
+    ],
+  } as Record<string, Array<{ id: string, name: string, email: string, avatar_url: string }>>,
+  setCommentPreviewHovering: (...args: unknown[]) => mockSetCommentPreviewHovering(...args),
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+  }),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useParams: () => ({ appId: 'app-1' }),
+}))
+
+vi.mock('@/hooks/use-format-time-from-now', () => ({
+  useFormatTimeFromNow: () => ({
+    formatTimeFromNow: () => 'just now',
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: {
+      id: 'user-1',
+      name: 'Alice',
+      avatar_url: 'alice.png',
+    },
+  }),
+}))
+
+vi.mock('reactflow', () => ({
+  useReactFlow: () => ({
+    flowToScreenPosition: mockFlowToScreenPosition,
+  }),
+  useViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+}))
+
+vi.mock('../store', () => ({
+  useStore: (selector: (state: typeof storeState) => unknown) => selector(storeState),
+}))
+
+vi.mock('@/app/components/workflow/collaboration/utils/user-color', () => ({
+  getUserColor: () => '#22c55e',
+}))
+
+vi.mock('@/app/components/base/divider', () => ({
+  default: () => <div data-testid="divider" />,
+}))
+
+vi.mock('@/app/components/base/inline-delete-confirm', () => ({
+  default: ({ onConfirm }: { onConfirm: () => void }) => (
+    <button type="button" data-testid="confirm-delete-reply" onClick={onConfirm}>
+      confirm delete
+    </button>
+  ),
+}))
+
+vi.mock('@/app/components/base/ui/avatar', () => ({
+  Avatar: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
+  AvatarRoot: ({ children }: { children: React.ReactNode }) => <div data-testid="avatar-root">{children}</div>,
+  AvatarImage: ({ alt }: { alt: string }) => <div data-testid="avatar-image">{alt}</div>,
+  AvatarFallback: ({ children }: { children: React.ReactNode }) => <div data-testid="avatar-fallback">{children}</div>,
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children, ...props }: React.ComponentProps<'button'>) => (
+    <button type="button" {...props}>{children}</button>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+vi.mock('@/app/components/base/ui/tooltip', () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({
+    children,
+    render,
+    ...props
+  }: React.ComponentProps<'button'> & { children?: React.ReactNode, render?: React.ReactNode }) => {
+    if (render)
+      return <>{render}</>
+
+    return <button type="button" {...props}>{children}</button>
+  },
+  TooltipContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('./mention-input', () => ({
+  MentionInput: ({
+    placeholder,
+    value,
+    onSubmit,
+    onCancel,
+  }: {
+    placeholder?: string
+    value: string
+    onSubmit: (content: string, mentionedUserIds: string[]) => void
+    onCancel?: () => void
+  }) => (
+    <div>
+      <button
+        type="button"
+        onClick={() => onSubmit(value || `content:${placeholder ?? 'default'}`, ['user-2'])}
+      >
+        {`submit-${placeholder ?? 'default'}`}
+      </button>
+      {onCancel && (
+        <button type="button" onClick={onCancel}>
+          {`cancel-${placeholder ?? 'default'}`}
+        </button>
+      )}
+    </div>
+  ),
+}))
+
+const createComment = (): WorkflowCommentDetail => ({
+  id: 'comment-1',
+  position_x: 120,
+  position_y: 80,
+  content: '@Alice original comment',
+  created_by: 'user-1',
+  created_by_account: {
+    id: 'user-1',
+    name: 'Alice',
+    email: 'alice@example.com',
+    avatar_url: 'alice.png',
+  },
+  created_at: 1,
+  updated_at: 2,
+  resolved: false,
+  mentions: [],
+  replies: [{
+    id: 'reply-1',
+    content: 'first reply',
+    created_by: 'user-1',
+    created_by_account: {
+      id: 'user-1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      avatar_url: 'alice.png',
+    },
+    created_at: 2,
+  }],
+})
+
+describe('CommentThread', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = ''
+    const workflowContainer = document.createElement('div')
+    workflowContainer.id = 'workflow-container'
+    document.body.appendChild(workflowContainer)
+  })
+
+  it('triggers header actions and closes on Escape', () => {
+    const onClose = vi.fn()
+    const onDelete = vi.fn()
+    const onResolve = vi.fn()
+    const onPrev = vi.fn()
+    const onNext = vi.fn()
+
+    render(
+      <CommentThread
+        comment={createComment()}
+        onClose={onClose}
+        onDelete={onDelete}
+        onResolve={onResolve}
+        onPrev={onPrev}
+        onNext={onNext}
+        canGoPrev
+        canGoNext
+      />,
+    )
+
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.deleteComment'))
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.resolveComment'))
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.previousComment'))
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.nextComment'))
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.closeComment'))
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(onDelete).toHaveBeenCalledTimes(1)
+    expect(onResolve).toHaveBeenCalledTimes(1)
+    expect(onPrev).toHaveBeenCalledTimes(1)
+    expect(onNext).toHaveBeenCalledTimes(1)
+    expect(onClose).toHaveBeenCalledTimes(2)
+  })
+
+  it('does not nest header action buttons inside tooltip trigger buttons', () => {
+    const { container } = render(
+      <CommentThread
+        comment={createComment()}
+        onClose={vi.fn()}
+        onDelete={vi.fn()}
+        onResolve={vi.fn()}
+        onPrev={vi.fn()}
+        onNext={vi.fn()}
+        canGoPrev
+        canGoNext
+      />,
+    )
+
+    expect(container.querySelector('button button')).toBeNull()
+  })
+
+  it('supports editing the root comment when the current user owns the thread', async () => {
+    const onCommentEdit = vi.fn()
+
+    render(
+      <CommentThread
+        comment={createComment()}
+        onClose={vi.fn()}
+        onCommentEdit={onCommentEdit}
+      />,
+    )
+
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.commentActions'))
+    fireEvent.click(screen.getByText('workflow.comments.actions.editComment'))
+    fireEvent.click(screen.getByText('submit-workflow.comments.placeholder.editComment'))
+
+    await waitFor(() => {
+      expect(onCommentEdit).toHaveBeenCalledWith('@Alice original comment', ['user-2'])
+    })
+  })
+
+  it('submits reply and updates preview hovering state on mouse enter/leave', async () => {
+    const onReply = vi.fn()
+    const { container } = render(
+      <CommentThread
+        comment={createComment()}
+        onClose={vi.fn()}
+        onReply={onReply}
+      />,
+    )
+
+    fireEvent.mouseEnter(container.firstElementChild as Element)
+    fireEvent.mouseLeave(container.firstElementChild as Element)
+
+    expect(mockSetCommentPreviewHovering).toHaveBeenNthCalledWith(1, true)
+    expect(mockSetCommentPreviewHovering).toHaveBeenNthCalledWith(2, false)
+
+    fireEvent.click(screen.getByText('submit-workflow.comments.placeholder.reply'))
+
+    await waitFor(() => {
+      expect(onReply).toHaveBeenCalledWith('content:workflow.comments.placeholder.reply', ['user-2'])
+    })
+  })
+
+  it('supports editing and direct deleting an existing reply', async () => {
+    const onReplyEdit = vi.fn()
+    const onReplyDeleteDirect = vi.fn()
+
+    render(
+      <CommentThread
+        comment={createComment()}
+        onClose={vi.fn()}
+        onReplyEdit={onReplyEdit}
+        onReplyDeleteDirect={onReplyDeleteDirect}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('workflow.comments.actions.editReply'))
+    fireEvent.click(screen.getByText('submit-workflow.comments.placeholder.editReply'))
+
+    await waitFor(() => {
+      expect(onReplyEdit).toHaveBeenCalledWith('reply-1', 'first reply', ['user-2'])
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('workflow.comments.actions.deleteReply')).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByText('workflow.comments.actions.deleteReply'))
+    fireEvent.click(screen.getByTestId('confirm-delete-reply'))
+
+    expect(onReplyDeleteDirect).toHaveBeenCalledWith('reply-1')
+  })
+})
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
new file mode 100644
index 0000000000..3e449b66e5
--- /dev/null
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -0,0 +1,765 @@
+'use client'
+
+import type { FC, ReactNode } from 'react'
+import type { WorkflowCommentDetail, WorkflowCommentDetailReply } from '@/service/workflow-comment'
+import { cn } from '@langgenius/dify-ui/cn'
+import { RiArrowDownSLine, RiArrowUpSLine, RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine, RiDeleteBinLine, RiMoreFill } from '@remixicon/react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useReactFlow, useViewport } from 'reactflow'
+import Divider from '@/app/components/base/divider'
+import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
+import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from '@/app/components/base/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
+import { useAppContext } from '@/context/app-context'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useParams } from '@/next/navigation'
+import { useStore } from '../store'
+import { MentionInput } from './mention-input'
+
+type CommentThreadProps = {
+  comment: WorkflowCommentDetail
+  loading?: boolean
+  replySubmitting?: boolean
+  replyUpdating?: boolean
+  onClose: () => void
+  onDelete?: () => void
+  onResolve?: () => void
+  onPrev?: () => void
+  onNext?: () => void
+  canGoPrev?: boolean
+  canGoNext?: boolean
+  onCommentEdit?: (content: string, mentionedUserIds?: string[]) => Promise<void> | void
+  onReply?: (content: string, mentionedUserIds?: string[]) => Promise<void> | void
+  onReplyEdit?: (replyId: string, content: string, mentionedUserIds?: string[]) => Promise<void> | void
+  onReplyDelete?: (replyId: string) => void
+  onReplyDeleteDirect?: (replyId: string) => Promise<void> | void
+}
+
+const ThreadMessage: FC<{
+  authorId: string
+  authorName: string
+  avatarUrl?: string | null
+  createdAt: number
+  content: string
+  mentionableNames: string[]
+  className?: string
+}> = ({ authorId, authorName, avatarUrl, createdAt, content, mentionableNames, className }) => {
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+  const { userProfile } = useAppContext()
+  const currentUserId = userProfile?.id
+  const isCurrentUser = authorId === currentUserId
+  const userColor = isCurrentUser ? undefined : getUserColor(authorId)
+
+  const highlightedContent = useMemo<ReactNode>(() => {
+    if (!content)
+      return ''
+
+    // Extract valid user names from mentionableNames, sorted by length (longest first)
+    const normalizedNames = Array.from(new Set(mentionableNames
+      .map(name => name.trim())
+      .filter(Boolean)))
+    normalizedNames.sort((a, b) => b.length - a.length)
+
+    if (normalizedNames.length === 0)
+      return content
+
+    const segments: ReactNode[] = []
+    let hasMention = false
+    let cursor = 0
+
+    while (cursor < content.length) {
+      let nextMatchStart = -1
+      let matchedName = ''
+
+      for (const name of normalizedNames) {
+        const searchStart = content.indexOf(`@${name}`, cursor)
+        if (searchStart === -1)
+          continue
+
+        const previousChar = searchStart > 0 ? content[searchStart - 1] : ''
+        if (searchStart > 0 && !/\s/.test(previousChar))
+          continue
+
+        if (
+          nextMatchStart === -1
+          || searchStart < nextMatchStart
+          || (searchStart === nextMatchStart && name.length > matchedName.length)
+        ) {
+          nextMatchStart = searchStart
+          matchedName = name
+        }
+      }
+
+      if (nextMatchStart === -1)
+        break
+
+      if (nextMatchStart > cursor)
+        segments.push(<span key={`text-${cursor}`}>{content.slice(cursor, nextMatchStart)}</span>)
+
+      const mentionEnd = nextMatchStart + matchedName.length + 1
+      segments.push(
+        <span key={`mention-${nextMatchStart}`} className="text-primary-600">
+          {content.slice(nextMatchStart, mentionEnd)}
+        </span>,
+      )
+      hasMention = true
+      cursor = mentionEnd
+    }
+
+    if (!hasMention)
+      return content
+
+    if (cursor < content.length)
+      segments.push(<span key={`text-${cursor}`}>{content.slice(cursor)}</span>)
+
+    return segments
+  }, [content, mentionableNames])
+
+  return (
+    <div className={cn('flex gap-3 pt-1', className)}>
+      <div className="shrink-0">
+        <AvatarRoot size="sm" className={cn('h-8 w-8 rounded-full')}>
+          {avatarUrl && (
+            <AvatarImage
+              src={avatarUrl}
+              alt={authorName}
+            />
+          )}
+          <AvatarFallback
+            size="sm"
+            style={userColor ? { backgroundColor: userColor } : undefined}
+          >
+            {authorName?.[0]?.toLocaleUpperCase()}
+          </AvatarFallback>
+        </AvatarRoot>
+      </div>
+      <div className="min-w-0 flex-1 pb-4 text-text-primary last:pb-0">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <span className="system-sm-medium text-text-primary">{authorName}</span>
+          <span className="system-2xs-regular text-text-tertiary">{formatTimeFromNow(createdAt * 1000)}</span>
+        </div>
+        <div className="mt-1 system-sm-regular break-words whitespace-pre-wrap text-text-secondary">
+          {highlightedContent}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const CommentThread: FC<CommentThreadProps> = memo(({
+  comment,
+  loading = false,
+  replySubmitting = false,
+  replyUpdating = false,
+  onClose,
+  onDelete,
+  onResolve,
+  onPrev,
+  onNext,
+  canGoPrev,
+  canGoNext,
+  onCommentEdit,
+  onReply,
+  onReplyEdit,
+  onReplyDelete,
+  onReplyDeleteDirect,
+}) => {
+  const params = useParams()
+  const appId = params.appId as string
+  const { flowToScreenPosition } = useReactFlow()
+  const viewport = useViewport()
+  const { userProfile } = useAppContext()
+  const { t } = useTranslation()
+  const [replyContent, setReplyContent] = useState('')
+  const [editingCommentContent, setEditingCommentContent] = useState('')
+  const [activeReplyMenuId, setActiveReplyMenuId] = useState<string | null>(null)
+  const [editingReply, setEditingReply] = useState<{ id: string, content: string }>({ id: '', content: '' })
+  const [deletingReplyId, setDeletingReplyId] = useState<string | null>(null)
+  const [isCommentEditing, setIsCommentEditing] = useState(false)
+  const [isSubmittingEdit, setIsSubmittingEdit] = useState(false)
+
+  // Focus management refs
+  const replyInputRef = useRef<HTMLTextAreaElement>(null)
+  const threadRef = useRef<HTMLDivElement>(null)
+
+  // Get mentionable users from store
+  const mentionUsersFromStore = useStore(state => (
+    appId ? state.mentionableUsersCache[appId] : undefined
+  ))
+  const mentionUsers = mentionUsersFromStore ?? []
+  const setCommentPreviewHovering = useStore(state => state.setCommentPreviewHovering)
+
+  // Extract all mentionable names for highlighting
+  const mentionableNames = useMemo(() => {
+    const names = mentionUsers
+      .map(user => user.name?.trim())
+      .filter((name): name is string => Boolean(name))
+    return Array.from(new Set(names))
+  }, [mentionUsers])
+
+  useEffect(() => {
+    Promise.resolve().then(() => {
+      setReplyContent('')
+      setEditingCommentContent('')
+      setIsCommentEditing(false)
+      setEditingReply({ id: '', content: '' })
+      setActiveReplyMenuId(null)
+      setDeletingReplyId(null)
+    })
+  }, [comment.id])
+
+  useEffect(() => () => {
+    setCommentPreviewHovering(false)
+  }, [setCommentPreviewHovering])
+
+  // P0: Auto-focus reply input when thread opens or comment changes
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (replyInputRef.current && !editingReply.id && !isCommentEditing && onReply)
+        replyInputRef.current.focus()
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [comment.id, editingReply.id, isCommentEditing, onReply])
+
+  // P2: Handle Esc key to close thread
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't intercept if actively editing a reply
+      if (editingReply.id || isCommentEditing)
+        return
+
+      // Don't intercept if mention dropdown is open (let MentionInput handle it)
+      if (document.querySelector('[data-mention-dropdown]'))
+        return
+
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [onClose, editingReply.id, isCommentEditing])
+
+  const handleReplySubmit = useCallback(async (content: string, mentionedUserIds: string[]) => {
+    if (!onReply || replySubmitting)
+      return
+
+    setReplyContent('')
+
+    try {
+      await onReply(content, mentionedUserIds)
+
+      // P0: Restore focus to reply input after successful submission
+      setTimeout(() => {
+        replyInputRef.current?.focus()
+      }, 0)
+    }
+    catch (error) {
+      console.error('Failed to send reply', error)
+      setReplyContent(content)
+    }
+  }, [onReply, replySubmitting])
+
+  const screenPosition = useMemo(() => {
+    return flowToScreenPosition({
+      x: comment.position_x,
+      y: comment.position_y,
+    })
+  }, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
+  const workflowContainerRect = typeof document !== 'undefined'
+    ? document.getElementById('workflow-container')?.getBoundingClientRect()
+    : null
+  const containerLeft = workflowContainerRect?.left ?? 0
+  const containerTop = workflowContainerRect?.top ?? 0
+  const canvasPosition = useMemo(() => ({
+    x: screenPosition.x - containerLeft,
+    y: screenPosition.y - containerTop,
+  }), [screenPosition.x, screenPosition.y, containerLeft, containerTop])
+
+  const handleStartEdit = useCallback((reply: WorkflowCommentDetailReply) => {
+    setEditingReply({ id: reply.id, content: reply.content })
+    setIsCommentEditing(false)
+    setActiveReplyMenuId(null)
+  }, [])
+
+  const handleStartCommentEdit = useCallback(() => {
+    setEditingCommentContent(comment.content)
+    setEditingReply({ id: '', content: '' })
+    setIsCommentEditing(true)
+    setActiveReplyMenuId(null)
+  }, [comment.content])
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingReply({ id: '', content: '' })
+
+    // P1: Restore focus to reply input after canceling edit
+    setTimeout(() => {
+      replyInputRef.current?.focus()
+    }, 0)
+  }, [])
+
+  const handleCancelCommentEdit = useCallback(() => {
+    setEditingCommentContent('')
+    setIsCommentEditing(false)
+
+    setTimeout(() => {
+      replyInputRef.current?.focus()
+    }, 0)
+  }, [])
+
+  const handleCommentEditSubmit = useCallback(async (content: string, mentionedUserIds: string[]) => {
+    if (!onCommentEdit)
+      return
+    const trimmed = content.trim()
+    if (!trimmed)
+      return
+
+    setIsSubmittingEdit(true)
+    try {
+      await onCommentEdit(trimmed, mentionedUserIds)
+      setEditingCommentContent('')
+      setIsCommentEditing(false)
+
+      setTimeout(() => {
+        replyInputRef.current?.focus()
+      }, 0)
+    }
+    catch (error) {
+      console.error('Failed to edit comment', error)
+    }
+    finally {
+      setIsSubmittingEdit(false)
+    }
+  }, [onCommentEdit])
+
+  const handleEditSubmit = useCallback(async (content: string, mentionedUserIds: string[]) => {
+    if (!onReplyEdit || !editingReply)
+      return
+    const trimmed = content.trim()
+    if (!trimmed)
+      return
+
+    setIsSubmittingEdit(true)
+    try {
+      await onReplyEdit(editingReply.id, trimmed, mentionedUserIds)
+      setEditingReply({ id: '', content: '' })
+
+      // P1: Restore focus to reply input after saving edit
+      setTimeout(() => {
+        replyInputRef.current?.focus()
+      }, 0)
+    }
+    catch (error) {
+      console.error('Failed to edit reply', error)
+    }
+    finally {
+      setIsSubmittingEdit(false)
+    }
+  }, [editingReply, onReplyEdit])
+
+  const replies = comment.replies || []
+  const isOwnComment = comment.created_by_account?.id === userProfile?.id
+  const messageListRef = useRef<HTMLDivElement>(null)
+  const previousReplyCountRef = useRef<number | undefined>(undefined)
+  const previousCommentIdRef = useRef<string | undefined>(undefined)
+
+  // Close dropdown when scrolling
+  useEffect(() => {
+    const container = messageListRef.current
+    if (!container || !activeReplyMenuId)
+      return
+
+    const handleScroll = () => {
+      setActiveReplyMenuId(null)
+    }
+
+    container.addEventListener('scroll', handleScroll)
+    return () => container.removeEventListener('scroll', handleScroll)
+  }, [activeReplyMenuId])
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    const container = messageListRef.current
+    if (!container)
+      return
+
+    const isFirstRender = previousCommentIdRef.current === undefined
+    const isNewComment = comment.id !== previousCommentIdRef.current
+    const hasNewReply = previousReplyCountRef.current !== undefined
+      && replies.length > previousReplyCountRef.current
+
+    // Scroll on first render, new comment, or new reply
+    if (isFirstRender || isNewComment || hasNewReply) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: 'smooth',
+      })
+    }
+
+    previousCommentIdRef.current = comment.id
+    previousReplyCountRef.current = replies.length
+  }, [comment.id, replies.length])
+
+  return (
+    <div
+      className="absolute z-50 w-[360px] max-w-[360px]"
+      style={{
+        left: canvasPosition.x + 40,
+        top: canvasPosition.y,
+        transform: 'translateY(-20%)',
+      }}
+      onMouseEnter={() => setCommentPreviewHovering(true)}
+      onMouseLeave={() => setCommentPreviewHovering(false)}
+    >
+      <div
+        ref={threadRef}
+        className="relative flex h-[360px] flex-col overflow-hidden rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="comment-thread-title"
+      >
+        <div className="flex items-center justify-between rounded-t-2xl border-b border-components-panel-border bg-components-panel-bg-blur px-4 py-3">
+          <div
+            id="comment-thread-title"
+            className="font-semibold text-text-primary uppercase"
+          >
+            {t('comments.panelTitle', { ns: 'workflow' })}
+          </div>
+          <div className="flex items-center gap-1">
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <button
+                    type="button"
+                    disabled={loading}
+                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    onClick={onDelete}
+                    aria-label={t('comments.aria.deleteComment', { ns: 'workflow' })}
+                  >
+                    <RiDeleteBinLine className="h-4 w-4" />
+                  </button>
+                )}
+              />
+              <TooltipContent placement="top" className="!px-2 !py-1.5">
+                {t('comments.aria.deleteComment', { ns: 'workflow' })}
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <button
+                    type="button"
+                    disabled={comment.resolved || loading}
+                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    onClick={onResolve}
+                    aria-label={t('comments.aria.resolveComment', { ns: 'workflow' })}
+                  >
+                    {comment.resolved ? <RiCheckboxCircleFill className="h-4 w-4" /> : <RiCheckboxCircleLine className="h-4 w-4" />}
+                  </button>
+                )}
+              />
+              <TooltipContent placement="top" className="!px-2 !py-1.5">
+                {t('comments.aria.resolveComment', { ns: 'workflow' })}
+              </TooltipContent>
+            </Tooltip>
+            <Divider type="vertical" className="h-3.5" />
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <button
+                    type="button"
+                    disabled={!canGoPrev || loading}
+                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    onClick={onPrev}
+                    aria-label={t('comments.aria.previousComment', { ns: 'workflow' })}
+                  >
+                    <RiArrowUpSLine className="h-4 w-4" />
+                  </button>
+                )}
+              />
+              <TooltipContent placement="top" className="!px-2 !py-1.5">
+                {t('comments.aria.previousComment', { ns: 'workflow' })}
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <button
+                    type="button"
+                    disabled={!canGoNext || loading}
+                    className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                    onClick={onNext}
+                    aria-label={t('comments.aria.nextComment', { ns: 'workflow' })}
+                  >
+                    <RiArrowDownSLine className="h-4 w-4" />
+                  </button>
+                )}
+              />
+              <TooltipContent placement="top" className="!px-2 !py-1.5">
+                {t('comments.aria.nextComment', { ns: 'workflow' })}
+              </TooltipContent>
+            </Tooltip>
+            <button
+              type="button"
+              className="flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+              onClick={onClose}
+              aria-label={t('comments.aria.closeComment', { ns: 'workflow' })}
+            >
+              <RiCloseLine className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+        <div
+          ref={messageListRef}
+          className="relative mt-2 flex-1 overflow-y-auto px-4 pb-4"
+        >
+          <div className="group relative -mx-4 rounded-lg px-4 py-2 transition-colors hover:bg-components-panel-on-panel-item-bg-hover">
+            {isOwnComment && !isCommentEditing && (
+              <div
+                className={cn(
+                  'absolute top-1 right-1 gap-1',
+                  activeReplyMenuId === comment.id ? 'flex' : 'hidden group-hover:flex',
+                )}
+              >
+                <DropdownMenu
+                  open={activeReplyMenuId === comment.id}
+                  onOpenChange={open => setActiveReplyMenuId(open ? comment.id : null)}
+                >
+                  <DropdownMenuTrigger
+                    className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                    aria-label={t('comments.aria.commentActions', { ns: 'workflow' })}
+                  >
+                    <RiMoreFill className="h-4 w-4" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    placement="bottom-end"
+                    sideOffset={4}
+                    popupClassName="z-[100] w-36 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[10px]"
+                  >
+                    <button
+                      className="flex w-full items-center justify-start rounded-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleStartCommentEdit()
+                      }}
+                    >
+                      {t('comments.actions.editComment', { ns: 'workflow' })}
+                    </button>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
+            {isCommentEditing
+              ? (
+                  <div className="flex gap-3 pt-1">
+                    <div className="shrink-0">
+                      <Avatar
+                        name={comment.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
+                        avatar={comment.created_by_account?.avatar_url || null}
+                        size="sm"
+                        className="h-8 w-8 rounded-full"
+                      />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1 shadow-md backdrop-blur-[10px]">
+                        <MentionInput
+                          value={editingCommentContent}
+                          onChange={setEditingCommentContent}
+                          onSubmit={handleCommentEditSubmit}
+                          onCancel={handleCancelCommentEdit}
+                          placeholder={t('comments.placeholder.editComment', { ns: 'workflow' })}
+                          disabled={loading}
+                          loading={isSubmittingEdit}
+                          isEditing={true}
+                          className="system-sm-regular"
+                          autoFocus
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )
+              : (
+                  <ThreadMessage
+                    authorId={comment.created_by_account?.id || ''}
+                    authorName={comment.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
+                    avatarUrl={comment.created_by_account?.avatar_url || null}
+                    createdAt={comment.created_at}
+                    content={comment.content}
+                    mentionableNames={mentionableNames}
+                  />
+                )}
+          </div>
+          {replies.length > 0 && (
+            <div className="mt-2 space-y-3 pt-3">
+              {replies.map((reply) => {
+                const isReplyEditing = editingReply?.id === reply.id
+                const isOwnReply = reply.created_by_account?.id === userProfile?.id
+                return (
+                  <div
+                    key={reply.id}
+                    className="group relative -mx-4 rounded-lg px-4 py-2 transition-colors hover:bg-components-panel-on-panel-item-bg-hover"
+                  >
+                    {isOwnReply && !isReplyEditing && (
+                      <div
+                        className={cn(
+                          'absolute top-1 right-1 gap-1',
+                          activeReplyMenuId === reply.id ? 'flex' : 'hidden group-hover:flex',
+                        )}
+                        data-reply-menu
+                      >
+                        <DropdownMenu
+                          open={activeReplyMenuId === reply.id}
+                          onOpenChange={(open) => {
+                            if (!open)
+                              setDeletingReplyId(null)
+                            setActiveReplyMenuId(open ? reply.id : null)
+                          }}
+                        >
+                          <DropdownMenuTrigger
+                            className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                            aria-label={t('comments.aria.replyActions', { ns: 'workflow' })}
+                          >
+                            <RiMoreFill className="h-4 w-4" />
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent
+                            placement="bottom-end"
+                            sideOffset={4}
+                            popupClassName="z-[100] w-36 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[10px]"
+                            data-reply-menu
+                          >
+                            <div className={cn(deletingReplyId === reply.id ? 'hidden' : 'block')}>
+                              <button
+                                className="flex w-full items-center justify-start rounded-t-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleStartEdit(reply)
+                                }}
+                              >
+                                {t('comments.actions.editReply', { ns: 'workflow' })}
+                              </button>
+                              <button
+                                className="text-negative flex w-full items-center justify-start rounded-b-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  e.preventDefault()
+                                  if (onReplyDeleteDirect) {
+                                    setDeletingReplyId(reply.id)
+                                  }
+                                  else {
+                                    setActiveReplyMenuId(null)
+                                    onReplyDelete?.(reply.id)
+                                  }
+                                }}
+                              >
+                                {t('comments.actions.deleteReply', { ns: 'workflow' })}
+                              </button>
+                            </div>
+
+                            <div className={cn(deletingReplyId === reply.id ? 'block' : 'hidden')}>
+                              <InlineDeleteConfirm
+                                title={t('comments.actions.deleteReply', { ns: 'workflow' })}
+                                onConfirm={() => {
+                                  setDeletingReplyId(null)
+                                  setActiveReplyMenuId(null)
+                                  onReplyDeleteDirect?.(reply.id)
+                                }}
+                                onCancel={() => {
+                                  setDeletingReplyId(null)
+                                }}
+                                className="m-0 w-full border-0 shadow-none"
+                              />
+                            </div>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    )}
+                    {isReplyEditing
+                      ? (
+                          <div className="flex gap-3 pt-1">
+                            <div className="shrink-0">
+                              <Avatar
+                                name={reply.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
+                                avatar={reply.created_by_account?.avatar_url || null}
+                                size="sm"
+                                className="h-8 w-8 rounded-full"
+                              />
+                            </div>
+                            <div className="min-w-0 flex-1">
+                              <div className="rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1 shadow-md backdrop-blur-[10px]">
+                                <MentionInput
+                                  value={editingReply?.content ?? ''}
+                                  onChange={newContent => setEditingReply(prev => prev ? { ...prev, content: newContent } : prev)}
+                                  onSubmit={handleEditSubmit}
+                                  onCancel={handleCancelEdit}
+                                  placeholder={t('comments.placeholder.editReply', { ns: 'workflow' })}
+                                  disabled={loading}
+                                  loading={replyUpdating || isSubmittingEdit}
+                                  isEditing={true}
+                                  className="system-sm-regular"
+                                  autoFocus
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      : (
+                          <ThreadMessage
+                            authorId={reply.created_by_account?.id || ''}
+                            authorName={reply.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
+                            avatarUrl={reply.created_by_account?.avatar_url || null}
+                            createdAt={reply.created_at}
+                            content={reply.content}
+                            mentionableNames={mentionableNames}
+                          />
+                        )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+        {loading && (
+          <div className="inset-0 absolute z-30 flex items-center justify-center bg-components-panel-bg/70 text-sm text-text-tertiary">
+            {t('comments.loading', { ns: 'workflow' })}
+          </div>
+        )}
+        {onReply && (
+          <div className="border-t border-components-panel-border px-4 py-3">
+            <div className="flex items-center gap-3">
+              <Avatar
+                avatar={userProfile?.avatar_url || null}
+                name={userProfile?.name || t('you', { ns: 'common' })}
+                size="sm"
+                className="h-8 w-8"
+              />
+              <div className="flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-[2px] shadow-sm">
+                <MentionInput
+                  ref={replyInputRef}
+                  value={replyContent}
+                  onChange={setReplyContent}
+                  onSubmit={handleReplySubmit}
+                  placeholder={t('comments.placeholder.reply', { ns: 'workflow' })}
+                  disabled={loading}
+                  loading={replySubmitting}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+})
+
+CommentThread.displayName = 'CommentThread'
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index db5b84455c..af0fb19e6b 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -55,6 +55,7 @@ const CustomEdge = ({
     curvature: 0.16,
   })
   const [open, setOpen] = useState(false)
+  const [isTriggerHovered, setIsTriggerHovered] = useState(false)
   const { handleNodeAdd } = useNodesInteractions()
   const { availablePrevBlocks } = useAvailableBlocks((data as Edge['data'])!.targetType, (data as Edge['data'])?.isInIteration || (data as Edge['data'])?.isInLoop)
   const { availableNextBlocks } = useAvailableBlocks((data as Edge['data'])!.sourceType, (data as Edge['data'])?.isInIteration || (data as Edge['data'])?.isInLoop)
@@ -142,8 +143,8 @@ const CustomEdge = ({
       <EdgeLabelRenderer>
         <div
           className={cn(
-            'nopan nodrag hover:scale-125',
-            data?._hovering ? 'block' : 'hidden',
+            'nopan nodrag',
+            (data?._hovering || isTriggerHovered) ? 'block' : 'hidden',
             open && 'block!',
             data.isInIteration && `z-[${ITERATION_CHILDREN_Z_INDEX}]`,
             data.isInLoop && `z-[${LOOP_CHILDREN_Z_INDEX}]`,
@@ -154,6 +155,8 @@ const CustomEdge = ({
             pointerEvents: 'all',
             opacity: data._waitingRun ? 0.7 : 1,
           }}
+          onMouseEnter={() => setIsTriggerHovered(true)}
+          onMouseLeave={() => setIsTriggerHovered(false)}
         >
           <BlockSelector
             open={open}
diff --git a/web/app/components/workflow/features.tsx b/web/app/components/workflow/features.tsx
index 08c79a497a..56b8b79ced 100644
--- a/web/app/components/workflow/features.tsx
+++ b/web/app/components/workflow/features.tsx
@@ -1,16 +1,19 @@
 import type { StartNodeType } from './nodes/start/types'
 import type { CommonNodeType, InputVar, Node } from './types'
 import type { PromptVariable } from '@/models/debug'
+import type { WorkflowDraftFeaturesPayload } from '@/service/workflow'
 import {
   memo,
   useCallback,
 } from 'react'
 import { useNodes } from 'reactflow'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { updateFeatures } from '@/service/workflow'
 import {
   useIsChatMode,
   useNodesReadOnly,
-  useNodesSyncDraft,
 } from './hooks'
 import useConfig from './nodes/start/use-config'
 import { useStore } from './store'
@@ -18,11 +21,11 @@ import { InputVarType } from './types'
 
 const Features = () => {
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
+  const appId = useStore(s => s.appId)
   const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const featuresStore = useFeaturesStore()
   const nodes = useNodes<CommonNodeType>()
-
   const startNode = nodes.find(node => node.data.type === 'start')
   const { id, data } = startNode as Node<StartNodeType>
   const { handleAddVariable } = useConfig(id, data)
@@ -40,10 +43,44 @@ const Features = () => {
     handleAddVariable(startNodeVariable)
   }
 
-  const handleFeaturesChange = useCallback(() => {
-    handleSyncWorkflowDraft()
+  const handleFeaturesChange = useCallback(async () => {
+    if (!appId || !featuresStore)
+      return
+
+    try {
+      const currentFeatures = featuresStore.getState().features
+
+      // Transform features to match the expected server format (same as doSyncWorkflowDraft)
+      const transformedFeatures: WorkflowDraftFeaturesPayload = {
+        opening_statement: currentFeatures.opening?.enabled ? (currentFeatures.opening?.opening_statement || '') : '',
+        suggested_questions: currentFeatures.opening?.enabled ? (currentFeatures.opening?.suggested_questions || []) : [],
+        suggested_questions_after_answer: currentFeatures.suggested,
+        text_to_speech: currentFeatures.text2speech,
+        speech_to_text: currentFeatures.speech2text,
+        retriever_resource: currentFeatures.citation,
+        sensitive_word_avoidance: currentFeatures.moderation,
+        file_upload: currentFeatures.file,
+      }
+
+      await updateFeatures({
+        appId,
+        features: transformedFeatures,
+      })
+
+      // Emit update event to other connected clients
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+    }
+    catch (error) {
+      console.error('Failed to update features:', error)
+    }
+
     setShowFeaturesPanel(true)
-  }, [handleSyncWorkflowDraft, setShowFeaturesPanel])
+  }, [appId, featuresStore, setShowFeaturesPanel])
 
   return (
     <NewFeaturePanel
diff --git a/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx b/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx
index 6fa934b57d..60d55a931c 100644
--- a/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx
@@ -9,6 +9,7 @@ const mockRestoreWorkflow = vi.fn()
 const mockInvalidAllLastRun = vi.fn()
 const mockHandleLoadBackupDraft = vi.fn()
 const mockHandleRefreshWorkflowDraft = vi.fn()
+const mockRequestRestore = vi.fn()
 
 vi.mock('@/hooks/use-theme', () => ({
   default: () => ({
@@ -42,6 +43,9 @@ vi.mock('../../hooks', () => ({
   useWorkflowRefreshDraft: () => ({
     handleRefreshWorkflowDraft: mockHandleRefreshWorkflowDraft,
   }),
+  useLeaderRestore: () => ({
+    requestRestore: mockRequestRestore,
+  }),
 }))
 
 const createVersion = (overrides: Partial<VersionHistory> = {}): VersionHistory => ({
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..f04a160967 100644
--- a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx
@@ -14,7 +14,7 @@ const mockHandleNodeSelect = vi.fn()
 const mockHandleRefreshWorkflowDraft = vi.fn()
 const mockCloseAllInputFieldPanels = vi.fn()
 const mockInvalidAllLastRun = vi.fn()
-const mockRestoreWorkflow = vi.fn()
+const mockRequestRestore = vi.fn()
 const mockNotify = vi.fn()
 const mockRunAndHistory = vi.fn()
 const mockViewHistory = vi.fn()
@@ -33,6 +33,9 @@ vi.mock('../../hooks', () => ({
     handleBackupDraft: mockHandleBackupDraft,
     handleLoadBackupDraft: mockHandleLoadBackupDraft,
   }),
+  useLeaderRestore: () => ({
+    requestRestore: mockRequestRestore,
+  }),
   useNodesSyncDraft: () => ({
     handleSyncWorkflowDraft: vi.fn(),
   }),
@@ -55,9 +58,6 @@ vi.mock('@/hooks/use-theme', () => ({
 
 vi.mock('@/service/use-workflow', () => ({
   useInvalidAllLastRun: () => mockInvalidAllLastRun,
-  useRestoreWorkflow: () => ({
-    mutateAsync: mockRestoreWorkflow,
-  }),
 }))
 
 vi.mock('@/app/components/base/ui/toast', () => ({
@@ -77,6 +77,10 @@ vi.mock('../scroll-to-selected-node-button', () => ({
   default: () => <div>scroll-button</div>,
 }))
 
+vi.mock('../online-users', () => ({
+  default: () => <div data-testid="online-users" />,
+}))
+
 vi.mock('../env-button', () => ({
   default: ({ disabled }: { disabled: boolean }) => <div data-testid="env-button">{`${disabled}`}</div>,
 }))
@@ -162,7 +166,13 @@ describe('Header layout components', () => {
     mockNodesReadOnly = false
     mockTheme = 'light'
     mockUseNodes.mockReturnValue([])
-    mockRestoreWorkflow.mockResolvedValue(undefined)
+    mockRequestRestore.mockImplementation((_payload: unknown, callbacks?: {
+      onSuccess?: () => void
+      onSettled?: () => void
+    }) => {
+      callbacks?.onSuccess?.()
+      callbacks?.onSettled?.()
+    })
   })
 
   describe('HeaderInNormal', () => {
@@ -267,7 +277,7 @@ describe('Header layout components', () => {
       fireEvent.click(screen.getByRole('button', { name: 'workflow.common.restore' }))
 
       await waitFor(() => {
-        expect(mockRestoreWorkflow).toHaveBeenCalledWith('/apps/flow-1/workflows/version-1/restore')
+        expect(mockRequestRestore).toHaveBeenCalledTimes(1)
         expect(store.getState().showWorkflowVersionHistoryPanel).toBe(false)
         expect(store.getState().isRestoring).toBe(false)
         expect(store.getState().backupDraft).toBeUndefined()
diff --git a/web/app/components/workflow/header/__tests__/undo-redo.spec.tsx b/web/app/components/workflow/header/__tests__/undo-redo.spec.tsx
index 767de6a6a8..9afe3efd60 100644
--- a/web/app/components/workflow/header/__tests__/undo-redo.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/undo-redo.spec.tsx
@@ -1,17 +1,11 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import UndoRedo from '../undo-redo'
 
-type TemporalSnapshot = {
-  pastStates: unknown[]
-  futureStates: unknown[]
-}
-
 const mockUnsubscribe = vi.fn()
-const mockTemporalSubscribe = vi.fn()
 const mockHandleUndo = vi.fn()
 const mockHandleRedo = vi.fn()
 
-let latestTemporalListener: ((state: TemporalSnapshot) => void) | undefined
+let latestTemporalListener: ((state: { pastStates: unknown[], futureStates: unknown[] }) => void) | undefined
 let mockNodesReadOnly = false
 
 vi.mock('@/app/components/workflow/header/view-workflow-history', () => ({
@@ -28,7 +22,10 @@ vi.mock('@/app/components/workflow/workflow-history-store', () => ({
   useWorkflowHistoryStore: () => ({
     store: {
       temporal: {
-        subscribe: mockTemporalSubscribe,
+        subscribe: (listener: (state: { pastStates: unknown[], futureStates: unknown[] }) => void) => {
+          latestTemporalListener = listener
+          return mockUnsubscribe
+        },
       },
     },
     shortcutsEnabled: true,
@@ -49,10 +46,6 @@ describe('UndoRedo', () => {
     vi.clearAllMocks()
     mockNodesReadOnly = false
     latestTemporalListener = undefined
-    mockTemporalSubscribe.mockImplementation((listener: (state: TemporalSnapshot) => void) => {
-      latestTemporalListener = listener
-      return mockUnsubscribe
-    })
   })
 
   it('enables undo and redo when history exists and triggers the callbacks', () => {
diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 52ffee4ed5..60b4605d06 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -18,6 +18,7 @@ import {
 import EditingTitle from './editing-title'
 import EnvButton from './env-button'
 import GlobalVariableButton from './global-variable-button'
+import OnlineUsers from './online-users'
 import RunAndHistory from './run-and-history'
 import ScrollToSelectedNodeButton from './scroll-to-selected-node-button'
 import VersionHistoryButton from './version-history-button'
@@ -72,6 +73,7 @@ const HeaderInNormal = ({
         <ScrollToSelectedNodeButton />
       </div>
       <div className="flex items-center gap-2">
+        <OnlineUsers />
         {components?.left}
         <Divider type="vertical" className="mx-auto h-3.5" />
         <RunAndHistory {...runAndHistoryProps} />
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index 7ba7d3235e..e6ad4123ed 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -4,12 +4,14 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
 import useTheme from '@/hooks/use-theme'
-import { useInvalidAllLastRun, useRestoreWorkflow } from '@/service/use-workflow'
-import { getFlowPrefix } from '@/service/utils'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
 import {
+  useLeaderRestore,
   useWorkflowRefreshDraft,
   useWorkflowRun,
 } from '../hooks'
@@ -32,6 +34,8 @@ const HeaderInRestoring = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
+  const userProfile = useAppContextSelector(s => s.userProfile)
+  const featuresStore = useFeaturesStore()
   const configsMap = useHooksStore(s => s.configsMap)
   const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId)
   const {
@@ -43,8 +47,8 @@ const HeaderInRestoring = ({
   const {
     handleLoadBackupDraft,
   } = useWorkflowRun()
+  const { requestRestore } = useLeaderRestore()
   const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
-  const { mutateAsync: restoreWorkflow } = useRestoreWorkflow()
   const canRestore = !!currentVersion?.id && !!configsMap?.flowId && currentVersion.version !== WorkflowVersion.Draft
 
   const handleCancelRestore = useCallback(() => {
@@ -53,29 +57,47 @@ const HeaderInRestoring = ({
     setShowWorkflowVersionHistoryPanel(false)
   }, [workflowStore, handleLoadBackupDraft, setShowWorkflowVersionHistoryPanel])
 
-  const handleRestore = useCallback(async () => {
-    if (!canRestore)
+  const handleRestore = useCallback(() => {
+    if (!canRestore || !currentVersion)
       return
 
     setShowWorkflowVersionHistoryPanel(false)
-    const restoreUrl = `/${getFlowPrefix(configsMap.flowType)}/${configsMap.flowId}/workflows/${currentVersion.id}/restore`
+    workflowStore.setState({ isRestoring: false })
+    workflowStore.setState({ backupDraft: undefined })
 
-    try {
-      await restoreWorkflow(restoreUrl)
-      workflowStore.setState({ isRestoring: false })
-      workflowStore.setState({ backupDraft: undefined })
-      handleRefreshWorkflowDraft()
-      toast.success(t('versionHistory.action.restoreSuccess', { ns: 'workflow' }))
-      deleteAllInspectVars()
-      invalidAllLastRun()
-    }
-    catch {
-      toast.error(t('versionHistory.action.restoreFailure', { ns: 'workflow' }))
-    }
-    finally {
-      onRestoreSettled?.()
-    }
-  }, [canRestore, currentVersion?.id, configsMap, setShowWorkflowVersionHistoryPanel, workflowStore, restoreWorkflow, handleRefreshWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled])
+    const { graph } = currentVersion
+    const features = featuresStore?.getState().features
+    const environmentVariables = currentVersion.environment_variables || []
+    const conversationVariables = currentVersion.conversation_variables || []
+
+    requestRestore({
+      versionId: currentVersion.id,
+      versionName: currentVersion.marked_name,
+      initiatorUserId: userProfile.id,
+      initiatorName: userProfile.name,
+      graphData: {
+        nodes: graph.nodes,
+        edges: graph.edges,
+        viewport: graph.viewport,
+      },
+      features,
+      environmentVariables,
+      conversationVariables,
+    }, {
+      onSuccess: () => {
+        handleRefreshWorkflowDraft()
+        toast.success(t('versionHistory.action.restoreSuccess', { ns: 'workflow' }))
+        deleteAllInspectVars()
+        invalidAllLastRun()
+      },
+      onError: () => {
+        toast.error(t('versionHistory.action.restoreFailure', { ns: 'workflow' }))
+      },
+      onSettled: () => {
+        onRestoreSettled?.()
+      },
+    })
+  }, [canRestore, currentVersion, setShowWorkflowVersionHistoryPanel, workflowStore, featuresStore, requestRestore, userProfile, handleRefreshWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled])
 
   return (
     <>
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
new file mode 100644
index 0000000000..cce2af0cdc
--- /dev/null
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -0,0 +1,251 @@
+'use client'
+import type { OnlineUser } from '../collaboration/types/collaboration'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useReactFlow } from 'reactflow'
+import { AvatarFallback, AvatarImage, AvatarRoot } from '@/app/components/base/ui/avatar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { useAppContext } from '@/context/app-context'
+import { getAvatar } from '@/service/common'
+import { useCollaboration } from '../collaboration/hooks/use-collaboration'
+import { getUserColor } from '../collaboration/utils/user-color'
+import { useStore } from '../store'
+
+const useAvatarUrls = (users: OnlineUser[]) => {
+  const [avatarUrls, setAvatarUrls] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    const fetchAvatars = async () => {
+      const newAvatarUrls: Record<string, string> = {}
+
+      await Promise.all(
+        users.map(async (user) => {
+          if (user.avatar) {
+            try {
+              const response = await getAvatar({ avatar: user.avatar })
+              newAvatarUrls[user.sid] = response.avatar_url
+            }
+            catch (error) {
+              console.error('Failed to fetch avatar:', error)
+              newAvatarUrls[user.sid] = user.avatar
+            }
+          }
+        }),
+      )
+
+      setAvatarUrls(newAvatarUrls)
+    }
+
+    if (users.length > 0)
+      fetchAvatars()
+  }, [users])
+
+  return avatarUrls
+}
+
+const OnlineUsers = () => {
+  const { t } = useTranslation()
+  const appId = useStore(s => s.appId)
+  const { onlineUsers, cursors, isEnabled: isCollaborationEnabled } = useCollaboration(appId as string)
+  const { userProfile } = useAppContext()
+  const reactFlow = useReactFlow()
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const avatarUrls = useAvatarUrls(onlineUsers || [])
+
+  const currentUserId = userProfile?.id
+  const fallbackUsername = t('comments.fallback.user', { ns: 'workflow' })
+  const currentUserSuffix = t('members.you', { ns: 'common' })
+
+  const renderDisplayName = (
+    user: OnlineUser,
+    baseClassName: string,
+    suffixClassName: string,
+  ) => {
+    const baseName = user.username || fallbackUsername
+    const isCurrentUser = user.user_id === currentUserId
+
+    return (
+      <span className={cn('inline-flex items-center gap-1', baseClassName)}>
+        <span>{baseName}</span>
+        {isCurrentUser && (
+          <span className={suffixClassName}>
+            {currentUserSuffix}
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  // Function to jump to user's cursor position
+  const jumpToUserCursor = (userId: string) => {
+    const cursor = cursors[userId]
+    if (!cursor)
+      return
+
+    // Convert world coordinates to center the view on the cursor
+    reactFlow.setCenter(cursor.x, cursor.y, { zoom: 1, duration: 800 })
+  }
+
+  if (!isCollaborationEnabled || !onlineUsers || onlineUsers.length === 0)
+    return null
+
+  // Display logic:
+  // 1-3 users: show all avatars
+  // 4+ users: show 2 avatars + count + arrow
+  const shouldShowCount = onlineUsers.length >= 4
+  const maxVisible = shouldShowCount ? 2 : 3
+  const visibleUsers = onlineUsers.slice(0, maxVisible)
+  const remainingCount = onlineUsers.length - maxVisible
+
+  const getAvatarUrl = (user: OnlineUser) => {
+    return avatarUrls[user.sid] || user.avatar
+  }
+
+  const hasCounter = remainingCount > 0
+
+  return (
+    <div
+      className={cn(
+        'flex h-8 items-center rounded-full border-[0.5px] border-components-panel-border',
+        'bg-components-panel-bg py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]',
+        hasCounter ? 'min-w-[87px] gap-px pr-1.5 pl-1' : 'gap-1 px-1.5',
+      )}
+    >
+      <div className="flex h-6 items-center">
+        <div className="flex items-center">
+          {visibleUsers.map((user, index) => {
+            const isCurrentUser = user.user_id === currentUserId
+            const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+            const avatarUrl = getAvatarUrl(user)
+            const displayName = user.username || fallbackUsername
+            return (
+              <Tooltip key={`${user.sid}-${index}`}>
+                <TooltipTrigger>
+                  <div
+                    className={cn(
+                      'relative flex size-6 items-center justify-center',
+                      index > 0 && '-ml-1.5',
+                      !isCurrentUser && 'cursor-pointer transition-transform hover:scale-110',
+                    )}
+                    style={{ zIndex: visibleUsers.length - index }}
+                    onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
+                  >
+                    <AvatarRoot size="sm" className="ring-1 ring-components-panel-bg">
+                      {avatarUrl && (
+                        <AvatarImage
+                          src={avatarUrl}
+                          alt={displayName}
+                        />
+                      )}
+                      <AvatarFallback
+                        size="sm"
+                        style={userColor ? { backgroundColor: userColor } : undefined}
+                      >
+                        {displayName?.[0]?.toLocaleUpperCase()}
+                      </AvatarFallback>
+                    </AvatarRoot>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  placement="bottom"
+                  sideOffset={4}
+                  className="flex h-[28px] w-[85px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
+                >
+                  {renderDisplayName(
+                    user,
+                    'system-xs-medium text-text-secondary',
+                    'text-text-quaternary',
+                  )}
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
+          {remainingCount > 0 && (
+            <Popover open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <PopoverTrigger
+                render={(
+                  <div className="flex items-center gap-1">
+                    <div
+                      className={cn(
+                        'flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-[10px] leading-[12px] font-semibold text-white uppercase ring-1 ring-components-panel-bg select-none',
+                        visibleUsers.length > 0 && '-ml-1',
+                      )}
+                    >
+                      +
+                      {remainingCount}
+                    </div>
+                    <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
+                  </div>
+                )}
+              />
+              <PopoverContent
+                placement="bottom-start"
+                sideOffset={8}
+                alignOffset={-48}
+                className="z-[9999]"
+                popupClassName={cn(
+                  'mt-1.5 flex max-h-[200px] w-[240px] flex-col overflow-y-auto',
+                  'rounded-xl border-[0.5px] border-components-panel-border',
+                  'bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]',
+                )}
+              >
+                {onlineUsers.map((user) => {
+                  const isCurrentUser = user.user_id === currentUserId
+                  const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+                  const avatarUrl = getAvatarUrl(user)
+                  const displayName = user.username || fallbackUsername
+                  return (
+                    <div
+                      key={user.sid}
+                      className={cn(
+                        'flex items-center gap-2 rounded-lg px-3 py-1.5',
+                        !isCurrentUser && 'cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover',
+                      )}
+                      onClick={() => {
+                        if (!isCurrentUser) {
+                          jumpToUserCursor(user.user_id)
+                          setDropdownOpen(false)
+                        }
+                      }}
+                    >
+                      <div className="relative">
+                        <AvatarRoot size="sm">
+                          {avatarUrl && (
+                            <AvatarImage
+                              src={avatarUrl}
+                              alt={displayName}
+                            />
+                          )}
+                          <AvatarFallback
+                            size="sm"
+                            style={userColor ? { backgroundColor: userColor } : undefined}
+                          >
+                            {displayName?.[0]?.toLocaleUpperCase()}
+                          </AvatarFallback>
+                        </AvatarRoot>
+                      </div>
+                      {renderDisplayName(
+                        user,
+                        'system-xs-medium text-text-secondary',
+                        'text-text-tertiary',
+                      )}
+                    </div>
+                  )
+                })}
+              </PopoverContent>
+            </Popover>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OnlineUsers
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index 6312815d1f..51a0f3642f 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -4,9 +4,9 @@ import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks'
+import { useWorkflowHistoryStore } from '@/app/components/workflow/workflow-history-store'
 import Divider from '../../base/divider'
 import TipPopup from '../operator/tip-popup'
-import { useWorkflowHistoryStore } from '../workflow-history-store'
 
 type UndoRedoProps = { handleUndo: () => void, handleRedo: () => void }
 const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 45b0284931..9f70187941 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -11,7 +11,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStoreApi } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
@@ -20,10 +19,12 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Divider from '../../base/divider'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
 import {
   useNodesReadOnly,
   useWorkflowHistory,
 } from '../hooks'
+import { useCollaborativeWorkflow } from '../hooks/use-collaborative-workflow'
 import TipPopup from '../operator/tip-popup'
 
 type ChangeHistoryEntry = {
@@ -48,7 +49,7 @@ const ViewWorkflowHistory = () => {
     setCurrentLogItem: state.setCurrentLogItem,
     setShowMessageLogModal: state.setShowMessageLogModal,
   })))
-  const reactFlowStore = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { store, getHistoryLabel } = useWorkflowHistory()
 
   const { pastStates, futureStates, undo, redo, clear } = store.temporal.getState()
@@ -60,7 +61,6 @@ const ViewWorkflowHistory = () => {
   }, [clear])
 
   const handleSetState = useCallback(({ index }: ChangeHistoryEntry) => {
-    const { setEdges, setNodes } = reactFlowStore.getState()
     const diff = currentHistoryStateIndex + index
     if (diff === 0)
       return
@@ -74,9 +74,13 @@ const ViewWorkflowHistory = () => {
     if (edges.length === 0 && nodes.length === 0)
       return
 
-    setEdges(edges)
-    setNodes(nodes)
-  }, [currentHistoryStateIndex, reactFlowStore, redo, store, undo])
+    const shouldBroadcast = collaborationManager.isConnected()
+    const { setEdges, setNodes } = collaborativeWorkflow.getState()
+    setEdges(edges, shouldBroadcast)
+    setNodes(nodes, shouldBroadcast, 'history:jump')
+    if (collaborationManager.isConnected())
+      collaborationManager.emitHistoryAction('jump')
+  }, [collaborativeWorkflow, currentHistoryStateIndex, redo, store, undo])
 
   const calculateStepLabel = useCallback((index: number) => {
     if (!index)
diff --git a/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts b/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts
new file mode 100644
index 0000000000..5837f1484d
--- /dev/null
+++ b/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts
@@ -0,0 +1,262 @@
+import type { RestoreIntentData, RestoreRequestData } from '../../collaboration/types/collaboration'
+import type { SyncDraftCallback } from '../../hooks-store/store'
+import type { Edge, Node } from '../../types'
+import { act, renderHook } from '@testing-library/react'
+import { ChatVarType } from '../../panel/chat-variable-panel/type'
+import { useLeaderRestore, useLeaderRestoreListener } from '../use-leader-restore'
+
+const mockSetViewport = vi.hoisted(() => vi.fn())
+const mockSetFeatures = vi.hoisted(() => vi.fn())
+const mockSetEnvironmentVariables = vi.hoisted(() => vi.fn())
+const mockSetConversationVariables = vi.hoisted(() => vi.fn())
+const mockDoSyncWorkflowDraft = vi.hoisted(() => vi.fn())
+const mockToastInfo = vi.hoisted(() => vi.fn())
+
+const mockEmitRestoreIntent = vi.hoisted(() => vi.fn())
+const mockEmitRestoreComplete = vi.hoisted(() => vi.fn())
+const mockEmitWorkflowUpdate = vi.hoisted(() => vi.fn())
+const mockEmitRestoreRequest = vi.hoisted(() => vi.fn())
+const mockIsConnected = vi.hoisted(() => vi.fn())
+const mockGetIsLeader = vi.hoisted(() => vi.fn())
+const mockSetNodes = vi.hoisted(() => vi.fn())
+const mockSetEdges = vi.hoisted(() => vi.fn())
+const mockRefreshGraphSynchronously = vi.hoisted(() => vi.fn())
+const mockGetNodes = vi.hoisted(() => vi.fn(() => [{ id: 'old-node' } as unknown as Node]))
+const mockGetEdges = vi.hoisted(() => vi.fn(() => [{ id: 'old-edge' } as unknown as Edge]))
+
+let restoreCompleteCallback: ((data: { versionId: string, success: boolean }) => void) | null = null
+let restoreRequestCallback: ((data: RestoreRequestData) => void) | null = null
+let restoreIntentCallback: ((data: RestoreIntentData) => void) | null = null
+
+const unsubscribeRestoreComplete = vi.hoisted(() => vi.fn())
+const unsubscribeRestoreRequest = vi.hoisted(() => vi.fn())
+const unsubscribeRestoreIntent = vi.hoisted(() => vi.fn())
+
+let isCollaborationEnabled = true
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string, userName?: string, versionName?: string }) => {
+      const ns = options?.ns ? `${options.ns}.` : ''
+      const extra = options?.userName ? `:${options.userName}:${options.versionName}` : ''
+      return `${ns}${key}${extra}`
+    },
+  }),
+}))
+
+vi.mock('reactflow', () => ({
+  useReactFlow: () => ({
+    setViewport: mockSetViewport,
+  }),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: {
+    getState: () => ({
+      appDetail: { id: 'app-1' },
+    }),
+  },
+}))
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeaturesStore: () => ({
+    getState: () => ({
+      setFeatures: mockSetFeatures,
+    }),
+  }),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    info: (...args: unknown[]) => mockToastInfo(...args),
+  },
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (state: { systemFeatures: { enable_collaboration_mode: boolean } }) => boolean) =>
+    selector({ systemFeatures: { enable_collaboration_mode: isCollaborationEnabled } }),
+}))
+
+vi.mock('../../store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => ({
+      setEnvironmentVariables: mockSetEnvironmentVariables,
+      setConversationVariables: mockSetConversationVariables,
+    }),
+  }),
+}))
+
+vi.mock('../use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: (...args: unknown[]) => mockDoSyncWorkflowDraft(...args),
+  }),
+}))
+
+vi.mock('../../collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    emitRestoreIntent: (...args: unknown[]) => mockEmitRestoreIntent(...args),
+    emitRestoreComplete: (...args: unknown[]) => mockEmitRestoreComplete(...args),
+    emitWorkflowUpdate: (...args: unknown[]) => mockEmitWorkflowUpdate(...args),
+    emitRestoreRequest: (...args: unknown[]) => mockEmitRestoreRequest(...args),
+    isConnected: (...args: unknown[]) => mockIsConnected(...args),
+    getIsLeader: (...args: unknown[]) => mockGetIsLeader(...args),
+    setNodes: (...args: unknown[]) => mockSetNodes(...args),
+    setEdges: (...args: unknown[]) => mockSetEdges(...args),
+    refreshGraphSynchronously: (...args: unknown[]) => mockRefreshGraphSynchronously(...args),
+    getNodes: () => mockGetNodes(),
+    getEdges: () => mockGetEdges(),
+    onRestoreComplete: (callback: (data: { versionId: string, success: boolean }) => void) => {
+      restoreCompleteCallback = callback
+      return unsubscribeRestoreComplete
+    },
+    onRestoreRequest: (callback: (data: RestoreRequestData) => void) => {
+      restoreRequestCallback = callback
+      return unsubscribeRestoreRequest
+    },
+    onRestoreIntent: (callback: (data: RestoreIntentData) => void) => {
+      restoreIntentCallback = callback
+      return unsubscribeRestoreIntent
+    },
+  },
+}))
+
+describe('useLeaderRestore', () => {
+  const restoreData: RestoreRequestData = {
+    versionId: 'v-1',
+    versionName: 'Version One',
+    initiatorUserId: 'u-1',
+    initiatorName: 'Alice',
+    features: { moreLikeThis: { enabled: true } },
+    environmentVariables: [{ id: 'env-1', name: 'A', value: '1', value_type: ChatVarType.String, description: '' }],
+    conversationVariables: [{ id: 'conv-1', name: 'B', value: '2', value_type: ChatVarType.String, description: '' }],
+    graphData: {
+      nodes: [{ id: 'new-node' } as unknown as Node],
+      edges: [{ id: 'new-edge' } as unknown as Edge],
+      viewport: { x: 1, y: 2, zoom: 0.5 },
+    },
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    restoreCompleteCallback = null
+    restoreRequestCallback = null
+    restoreIntentCallback = null
+    isCollaborationEnabled = true
+    mockIsConnected.mockReturnValue(true)
+    mockGetIsLeader.mockReturnValue(false)
+    mockDoSyncWorkflowDraft.mockImplementation((_sync: boolean, callbacks?: SyncDraftCallback) => {
+      callbacks?.onSuccess?.()
+      callbacks?.onSettled?.()
+    })
+  })
+
+  it('performs restore locally when collaboration is disabled', async () => {
+    isCollaborationEnabled = false
+    const onSuccess = vi.fn()
+    const onSettled = vi.fn()
+
+    const { result } = renderHook(() => useLeaderRestore())
+
+    await act(async () => {
+      result.current.requestRestore(restoreData, { onSuccess, onSettled })
+    })
+
+    expect(mockEmitRestoreIntent).toHaveBeenCalledWith(expect.objectContaining({
+      versionId: 'v-1',
+      initiatorName: 'Alice',
+    }))
+    expect(mockSetFeatures).toHaveBeenCalledWith({ moreLikeThis: { enabled: true } })
+    expect(mockSetEnvironmentVariables).toHaveBeenCalled()
+    expect(mockSetConversationVariables).toHaveBeenCalled()
+    expect(mockSetNodes).toHaveBeenCalledWith([{ id: 'old-node' }], [{ id: 'new-node' }], 'leader-restore:apply-graph')
+    expect(mockSetEdges).toHaveBeenCalledWith([{ id: 'old-edge' }], [{ id: 'new-edge' }])
+    expect(mockRefreshGraphSynchronously).toHaveBeenCalled()
+    expect(mockSetViewport).toHaveBeenCalledWith({ x: 1, y: 2, zoom: 0.5 })
+    expect(mockEmitRestoreComplete).toHaveBeenCalledWith({ versionId: 'v-1', success: true })
+    expect(mockEmitWorkflowUpdate).toHaveBeenCalledWith('app-1')
+    expect(onSuccess).toHaveBeenCalled()
+    expect(onSettled).toHaveBeenCalled()
+  })
+
+  it('emits restore request and resolves callbacks from restore-complete events', async () => {
+    isCollaborationEnabled = true
+    mockIsConnected.mockReturnValue(true)
+    mockGetIsLeader.mockReturnValue(false)
+    const onSuccess = vi.fn()
+    const onError = vi.fn()
+    const onSettled = vi.fn()
+
+    const { result } = renderHook(() => useLeaderRestore())
+
+    act(() => {
+      result.current.requestRestore(restoreData, { onSuccess, onError, onSettled })
+    })
+
+    expect(mockEmitRestoreRequest).toHaveBeenCalledWith(restoreData)
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+
+    act(() => {
+      restoreCompleteCallback?.({ versionId: 'v-1', success: true })
+    })
+    expect(onSuccess).toHaveBeenCalledTimes(1)
+    expect(onSettled).toHaveBeenCalledTimes(1)
+
+    act(() => {
+      result.current.requestRestore(restoreData, { onSuccess, onError, onSettled })
+      restoreCompleteCallback?.({ versionId: 'v-1', success: false })
+    })
+    expect(onError).toHaveBeenCalledTimes(1)
+    expect(onSettled).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('useLeaderRestoreListener', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    restoreRequestCallback = null
+    restoreIntentCallback = null
+    mockDoSyncWorkflowDraft.mockImplementation((_sync: boolean, callbacks?: SyncDraftCallback) => {
+      callbacks?.onSuccess?.()
+      callbacks?.onSettled?.()
+    })
+  })
+
+  it('shows restore notifications for request and intent events', () => {
+    const { unmount } = renderHook(() => useLeaderRestoreListener())
+
+    act(() => {
+      restoreRequestCallback?.({
+        ...{
+          versionId: 'v-2',
+          versionName: 'Version Two',
+          initiatorUserId: 'u-2',
+          initiatorName: 'Bob',
+          graphData: { nodes: [], edges: [] },
+        },
+      })
+    })
+
+    expect(mockToastInfo).toHaveBeenCalledWith(
+      'workflow.versionHistory.action.restoreInProgress:Bob:Version Two',
+      { timeout: 3000 },
+    )
+    expect(mockEmitRestoreIntent).toHaveBeenCalled()
+
+    act(() => {
+      restoreIntentCallback?.({
+        versionId: 'v-3',
+        versionName: 'Version Three',
+        initiatorUserId: 'u-3',
+        initiatorName: 'Carol',
+      })
+    })
+    expect(mockToastInfo).toHaveBeenCalledWith(
+      'workflow.versionHistory.action.restoreInProgress:Carol:Version Three',
+      { timeout: 3000 },
+    )
+
+    unmount()
+    expect(unsubscribeRestoreRequest).toHaveBeenCalled()
+    expect(unsubscribeRestoreIntent).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts b/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
index 35a309902e..2310df53b7 100644
--- a/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
@@ -3,13 +3,17 @@ import { act } from '@testing-library/react'
 import { createEdge, createNode } from '../../__tests__/fixtures'
 import { resetReactFlowMockState, rfState } from '../../__tests__/reactflow-mock-state'
 import { renderWorkflowHook } from '../../__tests__/workflow-test-env'
-import { BlockEnum } from '../../types'
+import { collaborationManager } from '../../collaboration/core/collaboration-manager'
+import { BlockEnum, ControlMode } from '../../types'
 import { useNodesInteractions } from '../use-nodes-interactions'
 
 const mockHandleSyncWorkflowDraft = vi.hoisted(() => vi.fn())
 const mockSaveStateToHistory = vi.hoisted(() => vi.fn())
 const mockUndo = vi.hoisted(() => vi.fn())
 const mockRedo = vi.hoisted(() => vi.fn())
+const runtimeNodesMetaDataMap = vi.hoisted(() => ({
+  value: {} as Record<string, unknown>,
+}))
 
 const runtimeState = vi.hoisted(() => ({
   nodesReadOnly: false,
@@ -45,7 +49,7 @@ vi.mock('../use-helpline', () => ({
 
 vi.mock('../use-nodes-meta-data', () => ({
   useNodesMetaData: () => ({
-    nodesMap: {},
+    nodesMap: runtimeNodesMetaDataMap.value,
   }),
 }))
 
@@ -114,6 +118,7 @@ describe('useNodesInteractions', () => {
     ]
     rfState.nodes = currentNodes as unknown as typeof rfState.nodes
     rfState.edges = currentEdges as unknown as typeof rfState.edges
+    runtimeNodesMetaDataMap.value = {}
   })
 
   it('persists node drags only when the node position actually changes', () => {
@@ -202,4 +207,470 @@ describe('useNodesInteractions', () => {
     expect(rfState.setNodes).not.toHaveBeenCalled()
     expect(rfState.setEdges).not.toHaveBeenCalled()
   })
+
+  it('broadcasts history undo/redo actions to collaborators when connected', () => {
+    const historyNodes = [
+      createNode({
+        id: 'history-node-2',
+        data: {
+          type: BlockEnum.End,
+          title: 'History End',
+          desc: '',
+        },
+      }),
+    ]
+    const historyEdges = [
+      createEdge({
+        id: 'history-edge-2',
+        source: 'history-node-2',
+        target: 'node-1',
+      }),
+    ]
+    const isConnectedSpy = vi.spyOn(collaborationManager, 'isConnected').mockReturnValue(true)
+    const emitHistoryActionSpy = vi.spyOn(collaborationManager, 'emitHistoryAction').mockImplementation(() => undefined)
+    const collabSetNodesSpy = vi.spyOn(collaborationManager, 'setNodes').mockImplementation(() => undefined)
+    const collabSetEdgesSpy = vi.spyOn(collaborationManager, 'setEdges').mockImplementation(() => undefined)
+
+    const { result } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: historyNodes,
+        edges: historyEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleHistoryBack()
+      result.current.handleHistoryForward()
+    })
+
+    expect(collabSetNodesSpy).toHaveBeenCalledTimes(2)
+    expect(collabSetEdgesSpy).toHaveBeenCalledTimes(2)
+    expect(emitHistoryActionSpy).toHaveBeenNthCalledWith(1, 'undo')
+    expect(emitHistoryActionSpy).toHaveBeenNthCalledWith(2, 'redo')
+    expect(isConnectedSpy).toHaveBeenCalled()
+  })
+
+  it('does not broadcast history changes when collaboration is disconnected', () => {
+    const historyNodes = [
+      createNode({
+        id: 'history-node-3',
+        data: {
+          type: BlockEnum.End,
+          title: 'History End',
+          desc: '',
+        },
+      }),
+    ]
+    const historyEdges = [
+      createEdge({
+        id: 'history-edge-3',
+        source: 'history-node-3',
+        target: 'node-1',
+      }),
+    ]
+    vi.spyOn(collaborationManager, 'isConnected').mockReturnValue(false)
+    const emitHistoryActionSpy = vi.spyOn(collaborationManager, 'emitHistoryAction').mockImplementation(() => undefined)
+    const collabSetNodesSpy = vi.spyOn(collaborationManager, 'setNodes').mockImplementation(() => undefined)
+    const collabSetEdgesSpy = vi.spyOn(collaborationManager, 'setEdges').mockImplementation(() => undefined)
+
+    const { result } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: historyNodes,
+        edges: historyEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleHistoryBack()
+      result.current.handleHistoryForward()
+    })
+
+    expect(collabSetNodesSpy).not.toHaveBeenCalled()
+    expect(collabSetEdgesSpy).not.toHaveBeenCalled()
+    expect(emitHistoryActionSpy).not.toHaveBeenCalled()
+  })
+
+  it('ignores node click selection in comment control mode', () => {
+    const { result } = renderWorkflowHook(() => useNodesInteractions(), {
+      initialStoreState: {
+        controlMode: ControlMode.Comment,
+      },
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleNodeClick({} as never, currentNodes[0] as Node)
+    })
+
+    expect(rfState.setNodes).not.toHaveBeenCalled()
+    expect(rfState.setEdges).not.toHaveBeenCalled()
+  })
+
+  it('updates entering states on node enter and clears them on leave using collaborative workflow state', () => {
+    currentNodes = [
+      createNode({
+        id: 'from-node',
+        data: {
+          type: BlockEnum.Code,
+          title: 'From',
+          desc: '',
+        },
+      }),
+      createNode({
+        id: 'to-node',
+        position: { x: 120, y: 120 },
+        data: {
+          type: BlockEnum.Code,
+          title: 'To',
+          desc: '',
+        },
+      }),
+    ]
+    currentEdges = [
+      createEdge({
+        id: 'edge-from-to',
+        source: 'from-node',
+        target: 'to-node',
+      }),
+    ]
+    rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+    rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+    const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+    store.setState({
+      connectingNodePayload: {
+        nodeId: 'from-node',
+        handleType: 'source',
+        handleId: 'source',
+      } as never,
+    })
+
+    act(() => {
+      result.current.handleNodeEnter({} as never, currentNodes[1] as Node)
+      result.current.handleNodeLeave({} as never, currentNodes[1] as Node)
+    })
+
+    expect(rfState.setNodes).toHaveBeenCalled()
+    expect(rfState.setEdges).toHaveBeenCalled()
+  })
+
+  it('stores connecting payload from collaborative nodes when connect starts', () => {
+    const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleNodeConnectStart(
+        {} as never,
+        {
+          nodeId: 'node-1',
+          handleType: 'source',
+          handleId: 'source',
+        } as never,
+      )
+    })
+
+    expect(store.getState().connectingNodePayload).toMatchObject({
+      nodeId: 'node-1',
+      handleType: 'source',
+      handleId: 'source',
+    })
+  })
+
+  it('returns early for node add/change when metadata for node type is missing', () => {
+    const { result } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleNodeAdd(
+        {
+          nodeType: BlockEnum.Code,
+        },
+        { prevNodeId: 'node-1' },
+      )
+      result.current.handleNodeChange('node-1', BlockEnum.Answer, 'source')
+    })
+
+    expect(rfState.setNodes).not.toHaveBeenCalled()
+    expect(rfState.setEdges).not.toHaveBeenCalled()
+  })
+
+  it('cancels selection state with collaborative nodes snapshot', () => {
+    currentNodes = [
+      createNode({
+        id: 'selected-node',
+        data: {
+          type: BlockEnum.Code,
+          title: 'Selected',
+          desc: '',
+          selected: true,
+        },
+      }),
+    ]
+    rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+
+    const { result } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleNodesCancelSelected()
+    })
+
+    expect(rfState.setNodes).toHaveBeenCalledTimes(1)
+    const nodesArg = rfState.setNodes.mock.calls[0]?.[0] as Node[]
+    expect(nodesArg[0]?.data.selected).toBe(false)
+  })
+
+  it('skips clipboard copy when bundled/selected nodes have no metadata', () => {
+    currentNodes = [
+      createNode({
+        id: 'bundled-node',
+        data: {
+          type: BlockEnum.Code,
+          title: 'Bundled',
+          desc: '',
+          _isBundled: true,
+        },
+      }),
+      createNode({
+        id: 'selected-node',
+        position: { x: 100, y: 0 },
+        data: {
+          type: BlockEnum.Code,
+          title: 'Selected',
+          desc: '',
+          selected: true,
+        },
+      }),
+    ]
+    rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+
+    const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleNodesCopy()
+    })
+
+    expect(store.getState().clipboardElements).toEqual([])
+  })
+
+  it('loads nodes/edges from collaborative state for delete, disconnect, dim and undim actions', () => {
+    currentNodes = [
+      createNode({
+        id: 'node-a',
+        data: {
+          type: BlockEnum.Code,
+          title: 'A',
+          desc: '',
+          selected: true,
+        },
+      }),
+      createNode({
+        id: 'node-b',
+        position: { x: 160, y: 0 },
+        data: {
+          type: BlockEnum.Code,
+          title: 'B',
+          desc: '',
+        },
+      }),
+    ]
+    currentEdges = [
+      createEdge({
+        id: 'edge-a-b',
+        source: 'node-a',
+        target: 'node-b',
+      }),
+    ]
+    rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+    rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+    const { result } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+
+    act(() => {
+      result.current.handleNodesDelete()
+      result.current.handleNodeDisconnect('node-a')
+      result.current.dimOtherNodes()
+      result.current.undimAllNodes()
+    })
+
+    expect(rfState.setNodes).toHaveBeenCalled()
+    expect(rfState.setEdges).toHaveBeenCalled()
+  })
+
+  it('reads collaborative nodes when dragging/selecting/connecting nodes', () => {
+    currentNodes = [
+      createNode({
+        id: 'drag-node-1',
+        data: {
+          type: BlockEnum.Code,
+          title: 'Drag1',
+          desc: '',
+          selected: true,
+        },
+      }),
+      createNode({
+        id: 'drag-node-2',
+        position: { x: 180, y: 0 },
+        data: {
+          type: BlockEnum.Code,
+          title: 'Drag2',
+          desc: '',
+        },
+      }),
+    ]
+    currentEdges = [
+      createEdge({
+        id: 'drag-edge',
+        source: 'drag-node-1',
+        target: 'drag-node-2',
+      }),
+    ]
+    rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+    rfState.edges = currentEdges as unknown as typeof rfState.edges
+
+    const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: currentEdges,
+      },
+    })
+    store.setState({
+      connectingNodePayload: {
+        nodeId: 'drag-node-1',
+        handleType: 'source',
+        handleId: 'source',
+      } as never,
+      enteringNodePayload: {
+        nodeId: 'drag-node-2',
+      } as never,
+    })
+
+    act(() => {
+      result.current.handleNodeDrag(
+        { stopPropagation: vi.fn() } as never,
+        currentNodes[0] as Node,
+        currentNodes as Node[],
+      )
+      result.current.handleNodeSelect('drag-node-2')
+      result.current.handleNodeConnect({
+        source: 'drag-node-1',
+        target: 'drag-node-2',
+        sourceHandle: 'source',
+        targetHandle: 'target',
+      })
+      result.current.handleNodeConnectEnd({ clientX: 0, clientY: 0 } as never)
+    })
+
+    expect(rfState.setNodes).toHaveBeenCalled()
+    expect(rfState.setEdges).toHaveBeenCalled()
+  })
+
+  it('uses metadata defaults during add/change/paste and reads collaborative nodes on resize', () => {
+    runtimeNodesMetaDataMap.value = {
+      [BlockEnum.Code]: {
+        defaultValue: {
+          type: BlockEnum.Code,
+          title: 'Code',
+          desc: '',
+        },
+        metaData: {
+          isSingleton: false,
+        },
+      },
+      [BlockEnum.Answer]: {
+        defaultValue: {
+          type: BlockEnum.Answer,
+          title: 'Answer',
+          desc: '',
+        },
+        metaData: {
+          isSingleton: false,
+        },
+      },
+    }
+
+    currentNodes = [
+      createNode({
+        id: 'meta-node-1',
+        data: {
+          type: BlockEnum.Code,
+          title: 'Meta',
+          desc: '',
+          selected: false,
+        },
+      }),
+    ]
+    rfState.nodes = currentNodes as unknown as typeof rfState.nodes
+    rfState.edges = []
+
+    const { result, store } = renderWorkflowHook(() => useNodesInteractions(), {
+      historyStore: {
+        nodes: currentNodes,
+        edges: [],
+      },
+    })
+    store.setState({
+      clipboardElements: [
+        createNode({
+          id: 'clipboard-node',
+          data: {
+            type: BlockEnum.Code,
+            title: 'Clipboard',
+            desc: '',
+          },
+        }),
+      ] as never,
+      mousePosition: {
+        pageX: 60,
+        pageY: 80,
+      } as never,
+    })
+
+    act(() => {
+      result.current.handleNodeAdd(
+        { nodeType: BlockEnum.Code },
+        { prevNodeId: 'meta-node-1' },
+      )
+      result.current.handleNodeChange('meta-node-1', BlockEnum.Answer, 'source')
+      result.current.handleNodesPaste()
+      result.current.handleNodeResize('meta-node-1', {
+        x: 0,
+        y: 0,
+        width: 260,
+        height: 140,
+      } as never)
+    })
+
+    expect(rfState.setNodes).toHaveBeenCalled()
+  })
 })
diff --git a/web/app/components/workflow/hooks/__tests__/use-selection-interactions.spec.ts b/web/app/components/workflow/hooks/__tests__/use-selection-interactions.spec.ts
index 5f584f33d7..495cbc1582 100644
--- a/web/app/components/workflow/hooks/__tests__/use-selection-interactions.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-selection-interactions.spec.ts
@@ -4,6 +4,7 @@ import { act, waitFor } from '@testing-library/react'
 import { useEdges, useNodes, useStoreApi } from 'reactflow'
 import { createEdge, createNode } from '../../__tests__/fixtures'
 import { renderWorkflowFlowHook } from '../../__tests__/workflow-test-env'
+import { collaborationManager } from '../../collaboration/core/collaboration-manager'
 import { useSelectionInteractions } from '../use-selection-interactions'
 
 type BundledState = {
@@ -126,6 +127,7 @@ describe('useSelectionInteractions', () => {
   })
 
   it('handleSelectionDrag should sync node positions', async () => {
+    const setNodesSpy = vi.spyOn(collaborationManager, 'setNodes')
     const { result, store } = renderSelectionInteractions()
     const draggedNodes = [
       { id: 'n1', position: { x: 50, y: 60 }, data: {} },
@@ -136,6 +138,9 @@ describe('useSelectionInteractions', () => {
     })
 
     expect(store.getState().nodeAnimation).toBe(false)
+    expect(setNodesSpy).toHaveBeenCalledOnce()
+    expect(setNodesSpy.mock.calls[0]?.[2]).toBe('use-selection-interactions:handleSelectionDrag')
+    expect(setNodesSpy.mock.calls[0]?.[1].find(node => node.id === 'n1')?.position).toEqual({ x: 50, y: 60 })
 
     await waitFor(() => {
       expect(result.current.nodes.find(node => node.id === 'n1')?.position).toEqual({ x: 50, y: 60 })
diff --git a/web/app/components/workflow/hooks/__tests__/use-workflow-comment.spec.ts b/web/app/components/workflow/hooks/__tests__/use-workflow-comment.spec.ts
new file mode 100644
index 0000000000..5745603a5e
--- /dev/null
+++ b/web/app/components/workflow/hooks/__tests__/use-workflow-comment.spec.ts
@@ -0,0 +1,404 @@
+import type { WorkflowCommentDetail, WorkflowCommentList } from '@/service/workflow-comment'
+import { act, waitFor } from '@testing-library/react'
+import { renderWorkflowHook } from '../../__tests__/workflow-test-env'
+import { ControlMode } from '../../types'
+import { useWorkflowComment } from '../use-workflow-comment'
+
+const mockScreenToFlowPosition = vi.hoisted(() => vi.fn(({ x, y }: { x: number, y: number }) => ({ x: x - 90, y: y - 180 })))
+const mockSetCenter = vi.hoisted(() => vi.fn())
+const mockGetNodes = vi.hoisted(() => vi.fn(() => []))
+
+const mockCreateWorkflowComment = vi.hoisted(() => vi.fn())
+const mockCreateWorkflowCommentReply = vi.hoisted(() => vi.fn())
+const mockDeleteWorkflowComment = vi.hoisted(() => vi.fn())
+const mockDeleteWorkflowCommentReply = vi.hoisted(() => vi.fn())
+const mockFetchWorkflowComment = vi.hoisted(() => vi.fn())
+const mockFetchWorkflowComments = vi.hoisted(() => vi.fn())
+const mockResolveWorkflowComment = vi.hoisted(() => vi.fn())
+const mockUpdateWorkflowComment = vi.hoisted(() => vi.fn())
+const mockUpdateWorkflowCommentReply = vi.hoisted(() => vi.fn())
+
+const mockEmitCommentsUpdate = vi.hoisted(() => vi.fn())
+const mockUnsubscribeCommentsUpdate = vi.hoisted(() => vi.fn())
+const commentsUpdateState = vi.hoisted(() => ({
+  handler: undefined as undefined | (() => void),
+}))
+
+const globalFeatureState = vi.hoisted(() => ({
+  enableCollaboration: true,
+}))
+
+vi.mock('reactflow', () => ({
+  useReactFlow: () => ({
+    screenToFlowPosition: mockScreenToFlowPosition,
+    setCenter: mockSetCenter,
+    getNodes: mockGetNodes,
+  }),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useParams: () => ({ appId: 'app-1' }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: {
+      id: 'user-1',
+      name: 'Alice',
+      email: 'alice@example.com',
+      avatar_url: 'alice.png',
+    },
+  }),
+}))
+
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (state: { systemFeatures: { enable_collaboration_mode: boolean } }) => unknown) => selector({
+    systemFeatures: {
+      enable_collaboration_mode: globalFeatureState.enableCollaboration,
+    },
+  }),
+}))
+
+vi.mock('@/service/workflow-comment', () => ({
+  createWorkflowComment: (...args: unknown[]) => mockCreateWorkflowComment(...args),
+  createWorkflowCommentReply: (...args: unknown[]) => mockCreateWorkflowCommentReply(...args),
+  deleteWorkflowComment: (...args: unknown[]) => mockDeleteWorkflowComment(...args),
+  deleteWorkflowCommentReply: (...args: unknown[]) => mockDeleteWorkflowCommentReply(...args),
+  fetchWorkflowComment: (...args: unknown[]) => mockFetchWorkflowComment(...args),
+  fetchWorkflowComments: (...args: unknown[]) => mockFetchWorkflowComments(...args),
+  resolveWorkflowComment: (...args: unknown[]) => mockResolveWorkflowComment(...args),
+  updateWorkflowComment: (...args: unknown[]) => mockUpdateWorkflowComment(...args),
+  updateWorkflowCommentReply: (...args: unknown[]) => mockUpdateWorkflowCommentReply(...args),
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    emitCommentsUpdate: (...args: unknown[]) => mockEmitCommentsUpdate(...args),
+    onCommentsUpdate: (handler: () => void) => {
+      commentsUpdateState.handler = handler
+      return mockUnsubscribeCommentsUpdate
+    },
+  },
+}))
+
+const baseComment = (): WorkflowCommentList => ({
+  id: 'comment-1',
+  position_x: 10,
+  position_y: 20,
+  content: 'hello',
+  created_by: 'user-1',
+  created_by_account: {
+    id: 'user-1',
+    name: 'Alice',
+    email: 'alice@example.com',
+    avatar_url: 'alice.png',
+  },
+  created_at: 100,
+  updated_at: 100,
+  resolved: false,
+  mention_count: 0,
+  reply_count: 0,
+  participants: [],
+})
+
+const baseCommentDetail = (): WorkflowCommentDetail => ({
+  id: 'comment-1',
+  position_x: 10,
+  position_y: 20,
+  content: 'hello',
+  created_by: 'user-1',
+  created_by_account: {
+    id: 'user-1',
+    name: 'Alice',
+    email: 'alice@example.com',
+    avatar_url: 'alice.png',
+  },
+  created_at: 100,
+  updated_at: 100,
+  resolved: false,
+  mentions: [],
+  replies: [],
+})
+
+describe('useWorkflowComment', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    commentsUpdateState.handler = undefined
+    globalFeatureState.enableCollaboration = true
+
+    mockFetchWorkflowComments.mockResolvedValue([])
+    mockFetchWorkflowComment.mockResolvedValue(baseCommentDetail())
+    mockCreateWorkflowComment.mockResolvedValue({
+      id: 'comment-2',
+      created_at: '1700000000',
+    })
+    mockUpdateWorkflowComment.mockResolvedValue({})
+  })
+
+  it('loads comment list on mount when collaboration is enabled', async () => {
+    const comment = baseComment()
+    mockFetchWorkflowComments.mockResolvedValue([comment])
+
+    const { store } = renderWorkflowHook(() => useWorkflowComment())
+
+    await waitFor(() => {
+      expect(mockFetchWorkflowComments).toHaveBeenCalledWith('app-1')
+    })
+
+    expect(store.getState().comments).toEqual([comment])
+    expect(store.getState().commentsLoading).toBe(false)
+  })
+
+  it('does not load comment list when collaboration is disabled', async () => {
+    globalFeatureState.enableCollaboration = false
+
+    renderWorkflowHook(() => useWorkflowComment())
+
+    await Promise.resolve()
+
+    expect(mockFetchWorkflowComments).not.toHaveBeenCalled()
+  })
+
+  it('creates a comment, updates local cache, and emits collaboration sync', async () => {
+    const { result, store } = renderWorkflowHook(() => useWorkflowComment(), {
+      initialStoreState: {
+        comments: [],
+        pendingComment: { pageX: 100, pageY: 200, elementX: 10, elementY: 20 },
+        isCommentQuickAdd: true,
+        mentionableUsersCache: {
+          'app-1': [{
+            id: 'user-2',
+            name: 'Bob',
+            email: 'bob@example.com',
+            avatar_url: 'bob.png',
+          }],
+        },
+      },
+    })
+
+    await act(async () => {
+      await result.current.handleCommentSubmit('new message', ['user-2'])
+    })
+
+    expect(mockCreateWorkflowComment).toHaveBeenCalledWith('app-1', {
+      position_x: 10,
+      position_y: 20,
+      content: 'new message',
+      mentioned_user_ids: ['user-2'],
+    })
+    expect(mockEmitCommentsUpdate).toHaveBeenCalledWith('app-1')
+
+    const comments = store.getState().comments
+    expect(comments).toHaveLength(1)
+    expect(comments[0]).toMatchObject({
+      id: 'comment-2',
+      content: 'new message',
+      position_x: 10,
+      position_y: 20,
+      mention_count: 1,
+      reply_count: 0,
+    })
+    expect(comments[0]?.participants.map(p => p.id)).toEqual(['user-1', 'user-2'])
+    expect(store.getState().commentDetailCache['comment-2']).toMatchObject({
+      content: 'new message',
+      position_x: 10,
+      position_y: 20,
+    })
+    expect(store.getState().pendingComment).toBeNull()
+    expect(store.getState().isCommentQuickAdd).toBe(false)
+  })
+
+  it('rolls back optimistic position update when API update fails', async () => {
+    const comment = baseComment()
+    const commentDetail = baseCommentDetail()
+    mockUpdateWorkflowComment.mockRejectedValue(new Error('update failed'))
+
+    const { result, store } = renderWorkflowHook(() => useWorkflowComment(), {
+      initialStoreState: {
+        comments: [comment],
+        activeCommentId: comment.id,
+        activeCommentDetail: commentDetail,
+        commentDetailCache: {
+          [comment.id]: commentDetail,
+        },
+      },
+    })
+
+    await act(async () => {
+      await result.current.handleCommentPositionUpdate(comment.id, { x: 300, y: 400 })
+    })
+
+    expect(mockUpdateWorkflowComment).toHaveBeenCalledWith('app-1', comment.id, {
+      content: 'hello',
+      position_x: 300,
+      position_y: 400,
+    })
+    expect(mockEmitCommentsUpdate).not.toHaveBeenCalled()
+    expect(store.getState().comments[0]).toMatchObject({
+      position_x: 10,
+      position_y: 20,
+    })
+    expect(store.getState().commentDetailCache[comment.id]).toMatchObject({
+      position_x: 10,
+      position_y: 20,
+    })
+  })
+
+  it('refreshes comments and active detail when collaboration update event arrives', async () => {
+    const comment = baseComment()
+    const detail = {
+      ...baseCommentDetail(),
+      content: 'updated by another user',
+    }
+    mockFetchWorkflowComments.mockResolvedValue([comment])
+    mockFetchWorkflowComment.mockResolvedValue({ data: detail })
+
+    const { unmount } = renderWorkflowHook(() => useWorkflowComment(), {
+      initialStoreState: {
+        activeCommentId: comment.id,
+      },
+    })
+
+    await waitFor(() => {
+      expect(commentsUpdateState.handler).toBeTypeOf('function')
+    })
+
+    await act(async () => {
+      commentsUpdateState.handler?.()
+    })
+
+    await waitFor(() => {
+      expect(mockFetchWorkflowComment).toHaveBeenCalledWith('app-1', comment.id)
+    })
+    expect(mockFetchWorkflowComments).toHaveBeenCalledTimes(2)
+
+    unmount()
+    expect(mockUnsubscribeCommentsUpdate).toHaveBeenCalledTimes(1)
+  })
+
+  it('focuses comment thread, loads detail, and updates navigation/create/close states', async () => {
+    const commentA = baseComment()
+    const commentB: WorkflowCommentList = {
+      ...baseComment(),
+      id: 'comment-2',
+      content: 'second',
+      position_x: 50,
+      position_y: 80,
+    }
+    mockGetNodes.mockReturnValue([{ id: 'node-1', data: { selected: true } }] as never)
+    mockFetchWorkflowComment.mockResolvedValue({
+      ...baseCommentDetail(),
+      id: commentB.id,
+      content: 'second detail',
+      position_x: commentB.position_x,
+      position_y: commentB.position_y,
+    })
+
+    const { result, store } = renderWorkflowHook(() => useWorkflowComment(), {
+      initialStoreState: {
+        comments: [commentA, commentB],
+        commentDetailCache: {
+          [commentA.id]: baseCommentDetail(),
+        },
+        rightPanelWidth: 800,
+        nodePanelWidth: 300,
+        controlMode: ControlMode.Comment,
+        activeCommentId: commentA.id,
+        pendingComment: { pageX: 1, pageY: 2, elementX: 3, elementY: 4 },
+      },
+    })
+
+    await act(async () => {
+      await result.current.handleCommentNavigate('next')
+    })
+
+    await waitFor(() => {
+      expect(store.getState().activeCommentId).toBe(commentB.id)
+    })
+    expect(mockSetCenter).toHaveBeenCalledWith(
+      502,
+      80,
+      { zoom: 1, duration: 600 },
+    )
+
+    act(() => {
+      result.current.handleCreateComment({
+        pageX: 300,
+        pageY: 400,
+        elementX: 30,
+        elementY: 40,
+      })
+    })
+    expect(store.getState().pendingComment).toEqual({
+      pageX: 300,
+      pageY: 400,
+      elementX: 30,
+      elementY: 40,
+    })
+
+    act(() => {
+      result.current.handleActiveCommentClose()
+    })
+    expect(store.getState().activeCommentId).toBeNull()
+    expect(store.getState().activeCommentDetail).toBeNull()
+    expect(store.getState().activeCommentDetailLoading).toBe(false)
+  })
+
+  it('runs resolve, delete, and reply lifecycle handlers with collaboration sync', async () => {
+    const commentA = baseComment()
+    const commentB: WorkflowCommentList = {
+      ...baseComment(),
+      id: 'comment-2',
+      content: 'fallback',
+      position_x: 33,
+      position_y: 55,
+    }
+    mockFetchWorkflowComments.mockResolvedValue([commentB])
+    mockFetchWorkflowComment.mockResolvedValue({
+      ...baseCommentDetail(),
+      id: commentB.id,
+      content: 'fallback detail',
+      position_x: commentB.position_x,
+      position_y: commentB.position_y,
+    })
+
+    const { result, store } = renderWorkflowHook(() => useWorkflowComment(), {
+      initialStoreState: {
+        comments: [commentA, commentB],
+        activeCommentId: commentA.id,
+      },
+    })
+
+    await act(async () => {
+      await result.current.handleCommentResolve(commentA.id)
+    })
+
+    expect(mockResolveWorkflowComment).toHaveBeenCalledWith('app-1', commentA.id)
+
+    await act(async () => {
+      await result.current.handleCommentReply(commentA.id, '  new reply  ', ['user-2'])
+      await result.current.handleCommentReplyUpdate(commentA.id, 'reply-1', '  edited reply  ', ['user-2'])
+      await result.current.handleCommentReplyDelete(commentA.id, 'reply-1')
+    })
+
+    expect(mockCreateWorkflowCommentReply).toHaveBeenCalledWith('app-1', commentA.id, {
+      content: 'new reply',
+      mentioned_user_ids: ['user-2'],
+    })
+    expect(mockUpdateWorkflowCommentReply).toHaveBeenCalledWith('app-1', commentA.id, 'reply-1', {
+      content: 'edited reply',
+      mentioned_user_ids: ['user-2'],
+    })
+    expect(mockDeleteWorkflowCommentReply).toHaveBeenCalledWith('app-1', commentA.id, 'reply-1')
+
+    await act(async () => {
+      await result.current.handleCommentDelete(commentA.id)
+    })
+
+    expect(mockDeleteWorkflowComment).toHaveBeenCalledWith('app-1', commentA.id)
+    await waitFor(() => {
+      expect(store.getState().activeCommentId).toBe(commentB.id)
+    })
+    expect(mockEmitCommentsUpdate).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/workflow/hooks/index.ts b/web/app/components/workflow/hooks/index.ts
index 2d4369568f..d3e9a38bff 100644
--- a/web/app/components/workflow/hooks/index.ts
+++ b/web/app/components/workflow/hooks/index.ts
@@ -4,6 +4,7 @@ export * from './use-checklist'
 export * from './use-DSL'
 export * from './use-edges-interactions'
 export * from './use-inspect-vars-crud'
+export * from './use-leader-restore'
 export * from './use-node-data-update'
 export * from './use-nodes-interactions'
 export * from './use-nodes-meta-data'
@@ -15,6 +16,7 @@ export * from './use-set-workflow-vars-with-value'
 export * from './use-shortcuts'
 export * from './use-tool-icon'
 export * from './use-workflow'
+export * from './use-workflow-comment'
 export * from './use-workflow-history'
 export * from './use-workflow-interactions'
 export * from './use-workflow-mode'
diff --git a/web/app/components/workflow/hooks/use-auto-generate-webhook-url.ts b/web/app/components/workflow/hooks/use-auto-generate-webhook-url.ts
index a046346e6b..84dda1087d 100644
--- a/web/app/components/workflow/hooks/use-auto-generate-webhook-url.ts
+++ b/web/app/components/workflow/hooks/use-auto-generate-webhook-url.ts
@@ -1,20 +1,20 @@
 import { produce } from 'immer'
 import { useCallback } from 'react'
-import { useStoreApi } from 'reactflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { fetchWebhookUrl } from '@/service/apps'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 
 export const useAutoGenerateWebhookUrl = () => {
-  const reactFlowStore = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   return useCallback(async (nodeId: string) => {
     const appId = useAppStore.getState().appDetail?.id
     if (!appId)
       return
 
-    const { getNodes } = reactFlowStore.getState()
-    const node = getNodes().find(n => n.id === nodeId)
+    const { nodes } = collaborativeWorkflow.getState()
+    const node = nodes.find(n => n.id === nodeId)
     if (!node || node.data.type !== BlockEnum.TriggerWebhook)
       return
 
@@ -23,9 +23,9 @@ export const useAutoGenerateWebhookUrl = () => {
 
     try {
       const response = await fetchWebhookUrl({ appId, nodeId })
-      const { getNodes: getLatestNodes, setNodes } = reactFlowStore.getState()
+      const { nodes: latestNodes, setNodes } = collaborativeWorkflow.getState()
       let hasUpdated = false
-      const updatedNodes = produce(getLatestNodes(), (draft) => {
+      const updatedNodes = produce(latestNodes, (draft) => {
         const targetNode = draft.find(n => n.id === nodeId)
         if (!targetNode || targetNode.data.type !== BlockEnum.TriggerWebhook)
           return
@@ -44,5 +44,5 @@ export const useAutoGenerateWebhookUrl = () => {
     catch (error: unknown) {
       console.error('Failed to auto-generate webhook URL:', error)
     }
-  }, [reactFlowStore])
+  }, [collaborativeWorkflow])
 }
diff --git a/web/app/components/workflow/hooks/use-collaborative-workflow.ts b/web/app/components/workflow/hooks/use-collaborative-workflow.ts
new file mode 100644
index 0000000000..c3d4ddc294
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-collaborative-workflow.ts
@@ -0,0 +1,85 @@
+import type { Edge, Node } from '../types'
+import { useCallback, useMemo } from 'react'
+import { useStoreApi } from 'reactflow'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
+
+const sanitizeNodeForBroadcast = (node: Node): Node => {
+  if (!node.data)
+    return node
+
+  if (!Object.prototype.hasOwnProperty.call(node.data, 'selected'))
+    return node
+
+  const sanitizedData = { ...node.data }
+  delete (sanitizedData as Record<string, unknown>).selected
+
+  return {
+    ...node,
+    data: sanitizedData,
+  }
+}
+
+const sanitizeEdgeForBroadcast = (edge: Edge): Edge => {
+  if (!edge.data)
+    return edge
+
+  if (!Object.prototype.hasOwnProperty.call(edge.data, '_connectedNodeIsSelected'))
+    return edge
+
+  const sanitizedData = { ...edge.data }
+  delete (sanitizedData as Record<string, unknown>)._connectedNodeIsSelected
+
+  return {
+    ...edge,
+    data: sanitizedData,
+  }
+}
+
+export const useCollaborativeWorkflow = () => {
+  const store = useStoreApi()
+  const { setNodes: collabSetNodes, setEdges: collabSetEdges } = collaborationManager
+
+  const setNodes = useCallback((newNodes: Node[], shouldBroadcast: boolean = true, source = 'use-collaborative-workflow:setNodes') => {
+    const { getNodes, setNodes: reactFlowSetNodes } = store.getState()
+    if (shouldBroadcast) {
+      const oldNodes = getNodes()
+      collabSetNodes(
+        oldNodes.map(sanitizeNodeForBroadcast),
+        newNodes.map(sanitizeNodeForBroadcast),
+        source,
+      )
+    }
+    reactFlowSetNodes(newNodes)
+  }, [store, collabSetNodes])
+
+  const setEdges = useCallback((newEdges: Edge[], shouldBroadcast: boolean = true) => {
+    const { edges, setEdges: reactFlowSetEdges } = store.getState()
+    if (shouldBroadcast) {
+      collabSetEdges(
+        edges.map(sanitizeEdgeForBroadcast),
+        newEdges.map(sanitizeEdgeForBroadcast),
+      )
+    }
+
+    reactFlowSetEdges(newEdges)
+  }, [store, collabSetEdges])
+
+  const collaborativeStore = useCallback(() => {
+    const state = store.getState()
+    return {
+
+      nodes: state.getNodes(),
+      edges: state.edges,
+
+      setNodes,
+      setEdges,
+
+    }
+  }, [store, setNodes, setEdges])
+
+  return useMemo(() => ({
+    getState: collaborativeStore,
+    setNodes,
+    setEdges,
+  }), [collaborativeStore, setEdges, setNodes])
+}
diff --git a/web/app/components/workflow/hooks/use-edges-interactions.ts b/web/app/components/workflow/hooks/use-edges-interactions.ts
index 60685081a1..75486608dc 100644
--- a/web/app/components/workflow/hooks/use-edges-interactions.ts
+++ b/web/app/components/workflow/hooks/use-edges-interactions.ts
@@ -4,10 +4,9 @@ import type {
 } from 'reactflow'
 import { produce } from 'immer'
 import { useCallback } from 'react'
-import {
-  useStoreApi,
-} from 'reactflow'
+import { useStoreApi } from 'reactflow'
 import { useWorkflowStore } from '../store'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 import {
   applyConnectedHandleNodeData,
   buildContextMenuEdges,
@@ -22,24 +21,24 @@ import { useWorkflowHistory, WorkflowHistoryEvent } from './use-workflow-history
 
 export const useEdgesInteractions = () => {
   const store = useStoreApi()
-  const workflowStore = useWorkflowStore()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { saveStateToHistory } = useWorkflowHistory()
+  const workflowStore = useWorkflowStore()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const deleteEdgeById = useCallback((edgeId: string) => {
     const {
-      getNodes,
+      nodes,
       setNodes,
       edges,
       setEdges,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
     const currentEdgeIndex = edges.findIndex(edge => edge.id === edgeId)
 
     if (currentEdgeIndex < 0)
       return
     const currentEdge = edges[currentEdgeIndex]
-    const nodes = getNodes()
     const newNodes = applyConnectedHandleNodeData(nodes, [{ type: 'remove', edge: currentEdge }])
     setNodes(newNodes)
     const newEdges = produce(edges, (draft) => {
@@ -50,46 +49,39 @@ export const useEdgesInteractions = () => {
       workflowStore.setState({ edgeMenu: undefined })
     handleSyncWorkflowDraft()
     saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
-  }, [store, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
+  }, [collaborativeWorkflow, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgeEnter = useCallback<EdgeMouseHandler>((_, edge) => {
     if (getNodesReadOnly())
       return
 
-    const {
-      edges,
-      setEdges,
-    } = store.getState()
+    const { edges, setEdges } = store.getState()
     setEdges(updateEdgeHoverState(edges, edge.id, true))
-  }, [store, getNodesReadOnly])
+  }, [getNodesReadOnly, store])
 
   const handleEdgeLeave = useCallback<EdgeMouseHandler>((_, edge) => {
     if (getNodesReadOnly())
       return
 
-    const {
-      edges,
-      setEdges,
-    } = store.getState()
+    const { edges, setEdges } = store.getState()
     setEdges(updateEdgeHoverState(edges, edge.id, false))
-  }, [store, getNodesReadOnly])
+  }, [getNodesReadOnly, store])
 
   const handleEdgeDeleteByDeleteBranch = useCallback((nodeId: string, branchId: string) => {
     if (getNodesReadOnly())
       return
 
     const {
-      getNodes,
+      nodes,
       setNodes,
       edges,
       setEdges,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
     const edgeWillBeDeleted = edges.filter(edge => edge.source === nodeId && edge.sourceHandle === branchId)
 
     if (!edgeWillBeDeleted.length)
       return
 
-    const nodes = getNodes()
     const newNodes = applyConnectedHandleNodeData(
       nodes,
       edgeWillBeDeleted.map(edge => ({ type: 'remove' as const, edge })),
@@ -107,19 +99,19 @@ export const useEdgesInteractions = () => {
     }
     handleSyncWorkflowDraft()
     saveStateToHistory(WorkflowHistoryEvent.EdgeDeleteByDeleteBranch)
-  }, [getNodesReadOnly, store, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
+  }, [getNodesReadOnly, collaborativeWorkflow, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgeDelete = useCallback(() => {
     if (getNodesReadOnly())
       return
-    const { edges } = store.getState()
+    const { edges } = collaborativeWorkflow.getState()
     const currentEdge = edges.find(edge => edge.selected)
 
     if (!currentEdge)
       return
 
     deleteEdgeById(currentEdge.id)
-  }, [deleteEdgeById, getNodesReadOnly, store])
+  }, [deleteEdgeById, getNodesReadOnly, collaborativeWorkflow])
 
   const handleEdgeDeleteById = useCallback((edgeId: string) => {
     if (getNodesReadOnly())
@@ -135,16 +127,15 @@ export const useEdgesInteractions = () => {
     const {
       edges,
       setEdges,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
     setEdges(updateEdgeSelectionState(edges, changes))
-  }, [store, getNodesReadOnly])
+  }, [collaborativeWorkflow, getNodesReadOnly])
 
   const handleEdgeSourceHandleChange = useCallback((nodeId: string, oldHandleId: string, newHandleId: string) => {
     if (getNodesReadOnly())
       return
 
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
-    const nodes = getNodes()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
 
     // Find edges connected to the old handle
     const affectedEdges = edges.filter(
@@ -182,7 +173,7 @@ export const useEdgesInteractions = () => {
     }
     handleSyncWorkflowDraft()
     saveStateToHistory(WorkflowHistoryEvent.EdgeSourceHandleChange)
-  }, [getNodesReadOnly, store, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
+  }, [getNodesReadOnly, collaborativeWorkflow, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgeContextMenu = useCallback<EdgeMouseHandler>((e, edge) => {
     if (getNodesReadOnly())
@@ -190,9 +181,8 @@ export const useEdgesInteractions = () => {
 
     e.preventDefault()
 
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
     setEdges(buildContextMenuEdges(edges, edge.id))
-    const nodes = getNodes()
     if (nodes.some(node => node.data.selected || node.selected || node.data._isBundled)) {
       setNodes(clearNodeSelectionState(nodes))
     }
@@ -207,7 +197,7 @@ export const useEdgesInteractions = () => {
         edgeId: edge.id,
       },
     })
-  }, [store, workflowStore, getNodesReadOnly])
+  }, [collaborativeWorkflow, workflowStore, getNodesReadOnly])
 
   return {
     handleEdgeEnter,
diff --git a/web/app/components/workflow/hooks/use-leader-restore.ts b/web/app/components/workflow/hooks/use-leader-restore.ts
new file mode 100644
index 0000000000..048bb932e0
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-leader-restore.ts
@@ -0,0 +1,160 @@
+import type { RestoreCompleteData, RestoreIntentData, RestoreRequestData } from '../collaboration/types/collaboration'
+import type { SyncCallback } from './use-nodes-sync-draft'
+import { useCallback, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useReactFlow } from 'reactflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { toast } from '@/app/components/base/ui/toast'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
+import { useWorkflowStore } from '../store'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
+
+type RestoreCallbacks = SyncCallback
+
+const usePerformRestore = () => {
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const appDetail = useAppStore.getState().appDetail
+  const featuresStore = useFeaturesStore()
+  const workflowStore = useWorkflowStore()
+  const reactflow = useReactFlow()
+
+  return useCallback((data: RestoreRequestData, callbacks?: RestoreCallbacks) => {
+    collaborationManager.emitRestoreIntent({
+      versionId: data.versionId,
+      versionName: data.versionName,
+      initiatorUserId: data.initiatorUserId,
+      initiatorName: data.initiatorName,
+    })
+
+    if (data.features && featuresStore) {
+      const { setFeatures } = featuresStore.getState()
+      setFeatures(data.features)
+    }
+
+    if (data.environmentVariables) {
+      workflowStore.getState().setEnvironmentVariables(data.environmentVariables)
+    }
+
+    if (data.conversationVariables) {
+      workflowStore.getState().setConversationVariables(data.conversationVariables)
+    }
+
+    const { nodes, edges, viewport } = data.graphData
+    const currentNodes = collaborationManager.getNodes()
+    const currentEdges = collaborationManager.getEdges()
+
+    collaborationManager.setNodes(currentNodes, nodes, 'leader-restore:apply-graph')
+    collaborationManager.setEdges(currentEdges, edges)
+    collaborationManager.refreshGraphSynchronously()
+
+    if (viewport)
+      reactflow.setViewport(viewport)
+
+    doSyncWorkflowDraft(false, {
+      onSuccess: () => {
+        collaborationManager.emitRestoreComplete({
+          versionId: data.versionId,
+          success: true,
+        })
+
+        if (appDetail)
+          collaborationManager.emitWorkflowUpdate(appDetail.id)
+
+        callbacks?.onSuccess?.()
+      },
+      onError: () => {
+        collaborationManager.emitRestoreComplete({
+          versionId: data.versionId,
+          success: false,
+          error: 'Failed to sync restore to server',
+        })
+        callbacks?.onError?.()
+      },
+      onSettled: () => {
+        callbacks?.onSettled?.()
+      },
+    })
+  }, [appDetail, doSyncWorkflowDraft, featuresStore, reactflow, workflowStore])
+}
+
+export const useLeaderRestoreListener = () => {
+  const { t } = useTranslation()
+  const performRestore = usePerformRestore()
+
+  useEffect(() => {
+    const unsubscribe = collaborationManager.onRestoreRequest((data: RestoreRequestData) => {
+      toast.info(t('versionHistory.action.restoreInProgress', {
+        ns: 'workflow',
+        userName: data.initiatorName,
+        versionName: data.versionName || data.versionId,
+      }), { timeout: 3000 })
+      performRestore(data)
+    })
+
+    return unsubscribe
+  }, [performRestore, t])
+
+  useEffect(() => {
+    const unsubscribe = collaborationManager.onRestoreIntent((data: RestoreIntentData) => {
+      toast.info(t('versionHistory.action.restoreInProgress', {
+        ns: 'workflow',
+        userName: data.initiatorName,
+        versionName: data.versionName || data.versionId,
+      }), { timeout: 3000 })
+    })
+
+    return unsubscribe
+  }, [t])
+}
+
+export const useLeaderRestore = () => {
+  const performRestore = usePerformRestore()
+  const pendingCallbacksRef = useRef<{
+    versionId: string
+    callbacks: RestoreCallbacks | null
+  } | null>(null)
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+
+  const requestRestore = useCallback((data: RestoreRequestData, callbacks?: RestoreCallbacks) => {
+    if (!isCollaborationEnabled || !collaborationManager.isConnected() || collaborationManager.getIsLeader()) {
+      performRestore(data, callbacks)
+      return
+    }
+
+    pendingCallbacksRef.current = {
+      versionId: data.versionId,
+      callbacks: callbacks || null,
+    }
+    collaborationManager.emitRestoreRequest(data)
+  }, [isCollaborationEnabled, performRestore])
+
+  useEffect(() => {
+    const unsubscribe = collaborationManager.onRestoreComplete((data: RestoreCompleteData) => {
+      const pending = pendingCallbacksRef.current
+      if (!pending || pending.versionId !== data.versionId)
+        return
+
+      const callbacks = pending.callbacks
+      if (!callbacks) {
+        pendingCallbacksRef.current = null
+        return
+      }
+
+      if (data.success)
+        callbacks.onSuccess?.()
+      else
+        callbacks.onError?.()
+
+      callbacks.onSettled?.()
+      pendingCallbacksRef.current = null
+    })
+
+    return unsubscribe
+  }, [])
+
+  return {
+    requestRestore,
+  }
+}
diff --git a/web/app/components/workflow/hooks/use-node-data-update.ts b/web/app/components/workflow/hooks/use-node-data-update.ts
index e40b467db2..e3ee645543 100644
--- a/web/app/components/workflow/hooks/use-node-data-update.ts
+++ b/web/app/components/workflow/hooks/use-node-data-update.ts
@@ -1,33 +1,30 @@
 import type { SyncCallback } from './use-nodes-sync-draft'
 import { produce } from 'immer'
 import { useCallback } from 'react'
-import { useStoreApi } from 'reactflow'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useNodesReadOnly } from './use-workflow'
 
 type NodeDataUpdatePayload = {
   id: string
-  data: Record<string, any>
+  data: Record<string, unknown>
 }
 
 export const useNodeDataUpdate = () => {
-  const store = useStoreApi()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleNodeDataUpdate = useCallback(({ id, data }: NodeDataUpdatePayload) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-    const newNodes = produce(getNodes(), (draft) => {
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
+    const newNodes = produce(nodes, (draft) => {
       const currentNode = draft.find(node => node.id === id)!
 
       if (currentNode)
         currentNode.data = { ...currentNode.data, ...data }
     })
     setNodes(newNodes)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeDataUpdateWithSyncDraft = useCallback((
     payload: NodeDataUpdatePayload,
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 66237b7203..7c97025fd6 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -20,8 +20,8 @@ import {
   getConnectedEdges,
   getOutgoers,
   useReactFlow,
-  useStoreApi,
 } from 'reactflow'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
 import {
   CUSTOM_EDGE,
   ITERATION_CHILDREN_Z_INDEX,
@@ -39,7 +39,8 @@ import { CUSTOM_LOOP_START_NODE } from '../nodes/loop-start/constants'
 import { useNodeLoopInteractions } from '../nodes/loop/use-interactions'
 import { CUSTOM_NOTE_NODE } from '../note-node/constants'
 import { useWorkflowStore } from '../store'
-import { BlockEnum, isTriggerNode } from '../types'
+import { BlockEnum, ControlMode, isTriggerNode } from '../types'
+
 import {
   generateNewNode,
   genNewNodeTitleFromOld,
@@ -50,6 +51,7 @@ import {
 } from '../utils'
 import { useWorkflowHistoryStore } from '../workflow-history-store'
 import { useAutoGenerateWebhookUrl } from './use-auto-generate-webhook-url'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 import { useHelpline } from './use-helpline'
 import useInspectVarsCrud from './use-inspect-vars-crud'
 import { useNodesMetaData } from './use-nodes-meta-data'
@@ -75,7 +77,7 @@ const ENTRY_NODE_WRAPPER_OFFSET = {
 
 export const useNodesInteractions = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
   const { store: workflowHistoryStore } = useWorkflowHistoryStore()
@@ -94,7 +96,11 @@ export const useNodesInteractions = () => {
   })
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
-  const { saveStateToHistory, undo, redo } = useWorkflowHistory()
+  const {
+    saveStateToHistory,
+    undo,
+    redo,
+  } = useWorkflowHistory()
   const autoGenerateWebhookUrl = useAutoGenerateWebhookUrl()
 
   const handleNodeDragStart = useCallback<NodeDragHandler>(
@@ -137,10 +143,9 @@ export const useNodesInteractions = () => {
       if (node.type === CUSTOM_LOOP_START_NODE)
         return
 
-      const { getNodes, setNodes } = store.getState()
       e.stopPropagation()
 
-      const nodes = getNodes()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
 
       const { restrictPosition } = handleNodeIterationChildDrag(node)
       const { restrictPosition: restrictLoopPosition }
@@ -203,13 +208,7 @@ export const useNodesInteractions = () => {
       })
       setNodes(newNodes)
     },
-    [
-      getNodesReadOnly,
-      store,
-      handleNodeIterationChildDrag,
-      handleNodeLoopChildDrag,
-      handleSetHelpline,
-    ],
+    [getNodesReadOnly, collaborativeWorkflow, handleNodeIterationChildDrag, handleNodeLoopChildDrag, handleSetHelpline],
   )
 
   const handleNodeDragStop = useCallback<NodeDragHandler>(
@@ -261,11 +260,11 @@ export const useNodesInteractions = () => {
         return
       }
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
-      const { connectingNodePayload, setEnteringNodePayload }
-        = workflowStore.getState()
-
+      const { nodes, edges, setNodes, setEdges } = collaborativeWorkflow.getState()
+      const {
+        connectingNodePayload,
+        setEnteringNodePayload,
+      } = workflowStore.getState()
       if (connectingNodePayload) {
         if (connectingNodePayload.nodeId === node.id)
           return
@@ -305,7 +304,7 @@ export const useNodesInteractions = () => {
               }
             })
           })
-          setNodes(newNodes)
+          setNodes(newNodes, false)
         }
       }
       const newEdges = produce(edges, (draft) => {
@@ -317,9 +316,9 @@ export const useNodesInteractions = () => {
             currentEdge.data._connectedNodeIsHovering = true
         })
       })
-      setEdges(newEdges)
+      setEdges(newEdges, false)
     },
-    [store, workflowStore, getNodesReadOnly],
+    [collaborativeWorkflow, workflowStore, getNodesReadOnly],
   )
 
   const handleNodeLeave = useCallback<NodeMouseHandler>(
@@ -343,21 +342,21 @@ export const useNodesInteractions = () => {
 
       const { setEnteringNodePayload } = workflowStore.getState()
       setEnteringNodePayload(undefined)
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const newNodes = produce(getNodes(), (draft) => {
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
+      const newNodes = produce(nodes, (draft) => {
         draft.forEach((node) => {
           node.data._isEntering = false
         })
       })
-      setNodes(newNodes)
+      setNodes(newNodes, false)
       const newEdges = produce(edges, (draft) => {
         draft.forEach((edge) => {
           edge.data._connectedNodeIsHovering = false
         })
       })
-      setEdges(newEdges)
+      setEdges(newEdges, false)
     },
-    [store, workflowStore, getNodesReadOnly],
+    [collaborativeWorkflow, workflowStore, getNodesReadOnly],
   )
 
   const handleNodeSelect = useCallback(
@@ -368,9 +367,7 @@ export const useNodesInteractions = () => {
     ) => {
       if (initShowLastRunTab)
         workflowStore.setState({ initShowLastRunTab: true })
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const selectedNode = nodes.find(node => node.data.selected)
 
       if (!cancelSelection && selectedNode?.id === nodeId)
@@ -383,7 +380,7 @@ export const useNodesInteractions = () => {
           else node.data.selected = false
         })
       })
-      setNodes(newNodes)
+      setNodes(newNodes, false)
 
       const connectedEdges = getConnectedEdges(
         [{ id: nodeId } as Node],
@@ -405,15 +402,16 @@ export const useNodesInteractions = () => {
           }
         })
       })
-      setEdges(newEdges)
-
-      handleSyncWorkflowDraft()
+      setEdges(newEdges, false)
     },
-    [store, handleSyncWorkflowDraft],
+    [collaborativeWorkflow],
   )
 
   const handleNodeClick = useCallback<NodeMouseHandler>(
     (_, node) => {
+      const { controlMode } = workflowStore.getState()
+      if (controlMode === ControlMode.Comment)
+        return
       if (node.type === CUSTOM_ITERATION_START_NODE)
         return
       if (node.type === CUSTOM_LOOP_START_NODE)
@@ -422,7 +420,7 @@ export const useNodesInteractions = () => {
         return
       handleNodeSelect(node.id)
     },
-    [handleNodeSelect],
+    [handleNodeSelect, workflowStore],
   )
 
   const handleNodeConnect = useCallback<OnConnect>(
@@ -432,8 +430,7 @@ export const useNodesInteractions = () => {
       if (getNodesReadOnly())
         return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, edges, setNodes, setEdges } = collaborativeWorkflow.getState()
       const targetNode = nodes.find(node => node.id === target!)
       const sourceNode = nodes.find(node => node.id === source!)
 
@@ -514,7 +511,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       workflowStore,
       handleSyncWorkflowDraft,
       saveStateToHistory,
@@ -528,8 +525,8 @@ export const useNodesInteractions = () => {
 
       if (nodeId && handleType) {
         const { setConnectingNodePayload } = workflowStore.getState()
-        const { getNodes } = store.getState()
-        const node = getNodes().find(n => n.id === nodeId)!
+        const { nodes } = collaborativeWorkflow.getState()
+        const node = nodes.find(n => n.id === nodeId)!
 
         if (node.type === CUSTOM_NOTE_NODE)
           return
@@ -550,7 +547,7 @@ export const useNodesInteractions = () => {
         })
       }
     },
-    [store, workflowStore, getNodesReadOnly],
+    [collaborativeWorkflow, workflowStore, getNodesReadOnly],
   )
 
   const handleNodeConnectEnd = useCallback<OnConnectEnd>(
@@ -568,8 +565,7 @@ export const useNodesInteractions = () => {
         const { setShowAssignVariablePopup, hoveringAssignVariableGroupId }
           = workflowStore.getState()
         const { screenToFlowPosition } = reactflow
-        const { getNodes, setNodes } = store.getState()
-        const nodes = getNodes()
+        const { nodes, setNodes } = collaborativeWorkflow.getState()
         const fromHandleType = connectingNodePayload.handleType
         const fromHandleId = connectingNodePayload.handleId
         const fromNode = nodes.find(
@@ -627,19 +623,16 @@ export const useNodesInteractions = () => {
       setConnectingNodePayload(undefined)
       setEnteringNodePayload(undefined)
     },
-    [store, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow],
+    [collaborativeWorkflow, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow],
   )
 
   const { deleteNodeInspectorVars } = useInspectVarsCrud()
-
   const handleNodeDelete = useCallback(
     (nodeId: string) => {
       if (getNodesReadOnly())
         return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
       const currentNode = nodes[currentNodeIndex]
 
@@ -772,7 +765,7 @@ export const useNodesInteractions = () => {
         })
         draft.splice(currentNodeIndex, 1)
       })
-      setNodes(newNodes)
+      setNodes(newNodes, true, 'nodes:perform-batch-cascade-delete')
       const newEdges = produce(edges, (draft) => {
         return draft.filter(
           edge =>
@@ -797,7 +790,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       handleSyncWorkflowDraft,
       saveStateToHistory,
       workflowStore,
@@ -820,12 +813,14 @@ export const useNodesInteractions = () => {
       if (getNodesReadOnly())
         return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const nodesWithSameType = nodes.filter(
         node => node.data.type === nodeType,
       )
-      const { defaultValue } = nodesMetaDataMap![nodeType]
+      const nodeMetaData = nodesMetaDataMap?.[nodeType]
+      if (!nodeMetaData)
+        return
+      const { defaultValue } = nodeMetaData
       const { newNode, newIterationStartNode, newLoopStartNode }
         = generateNewNode({
           type: getNodeCustomTypeByNodeDataType(nodeType),
@@ -1364,7 +1359,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       handleSyncWorkflowDraft,
       saveStateToHistory,
       workflowStore,
@@ -1383,14 +1378,16 @@ export const useNodesInteractions = () => {
       if (getNodesReadOnly())
         return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const currentNode = nodes.find(node => node.id === currentNodeId)!
       const connectedEdges = getConnectedEdges([currentNode], edges)
       const nodesWithSameType = nodes.filter(
         node => node.data.type === nodeType,
       )
-      const { defaultValue } = nodesMetaDataMap![nodeType]
+      const nodeMetaData = nodesMetaDataMap?.[nodeType]
+      if (!nodeMetaData)
+        return
+      const { defaultValue } = nodeMetaData
       const {
         newNode: newCurrentNode,
         newIterationStartNode,
@@ -1600,7 +1597,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       handleSyncWorkflowDraft,
       saveStateToHistory,
       nodesMetaDataMap,
@@ -1609,16 +1606,14 @@ export const useNodesInteractions = () => {
   )
 
   const handleNodesCancelSelected = useCallback(() => {
-    const { getNodes, setNodes } = store.getState()
-
-    const nodes = getNodes()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const newNodes = produce(nodes, (draft) => {
       draft.forEach((node) => {
         node.data.selected = false
       })
     })
     setNodes(newNodes)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeContextMenu = useCallback(
     (e: MouseEvent, node: Node) => {
@@ -1661,9 +1656,7 @@ export const useNodesInteractions = () => {
 
       const { setClipboardElements } = workflowStore.getState()
 
-      const { getNodes } = store.getState()
-
-      const nodes = getNodes()
+      const { nodes } = collaborativeWorkflow.getState()
 
       if (nodeId) {
         // If nodeId is provided, copy that specific node
@@ -1687,7 +1680,9 @@ export const useNodesInteractions = () => {
             return false
           if (node.type === CUSTOM_NOTE_NODE)
             return true
-          const { metaData } = nodesMetaDataMap![node.data.type as BlockEnum]
+          const metaData = nodesMetaDataMap?.[node.data.type as BlockEnum]?.metaData
+          if (!metaData)
+            return false
           if (metaData.isSingleton)
             return false
           return !node.data.isInIteration && !node.data.isInLoop
@@ -1703,7 +1698,9 @@ export const useNodesInteractions = () => {
             return false
           if (node.type === CUSTOM_NOTE_NODE)
             return true
-          const { metaData } = nodesMetaDataMap![node.data.type as BlockEnum]
+          const metaData = nodesMetaDataMap?.[node.data.type as BlockEnum]?.metaData
+          if (!metaData)
+            return false
           return !metaData.isSingleton
         })
 
@@ -1711,7 +1708,7 @@ export const useNodesInteractions = () => {
           setClipboardElements([selectedNode])
       }
     },
-    [getNodesReadOnly, store, workflowStore],
+    [getNodesReadOnly, collaborativeWorkflow, workflowStore],
   )
 
   const handleNodesPaste = useCallback(() => {
@@ -1720,11 +1717,10 @@ export const useNodesInteractions = () => {
 
     const { clipboardElements, mousePosition } = workflowStore.getState()
 
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
 
     const nodesToPaste: Node[] = []
     const edgesToPaste: Edge[] = []
-    const nodes = getNodes()
 
     if (clipboardElements.length) {
       const { x, y } = getTopLeftNodePosition(clipboardElements)
@@ -1740,12 +1736,15 @@ export const useNodesInteractions = () => {
       const parentChildrenToAppend: { parentId: string, childId: string, childType: BlockEnum }[] = []
       clipboardElements.forEach((nodeToPaste, index) => {
         const nodeType = nodeToPaste.data.type
+        const nodeDefaultValue = nodeToPaste.type !== CUSTOM_NOTE_NODE
+          ? nodesMetaDataMap?.[nodeType]?.defaultValue
+          : undefined
 
         const { newNode, newIterationStartNode, newLoopStartNode }
           = generateNewNode({
             type: nodeToPaste.type,
             data: {
-              ...(nodeToPaste.type !== CUSTOM_NOTE_NODE && nodesMetaDataMap![nodeType].defaultValue),
+              ...(nodeDefaultValue || {}),
               ...nodeToPaste.data,
               selected: false,
               _isBundled: false,
@@ -1946,7 +1945,7 @@ export const useNodesInteractions = () => {
   }, [
     getNodesReadOnly,
     workflowStore,
-    store,
+    collaborativeWorkflow,
     reactflow,
     saveStateToHistory,
     handleSyncWorkflowDraft,
@@ -1970,9 +1969,8 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
-    const { getNodes, edges } = store.getState()
+    const { nodes, edges } = collaborativeWorkflow.getState()
 
-    const nodes = getNodes()
     const bundledNodes = nodes.filter(
       node => node.data._isBundled,
     )
@@ -1993,17 +1991,16 @@ export const useNodesInteractions = () => {
 
     if (selectedNode)
       handleNodeDelete(selectedNode.id)
-  }, [store, getNodesReadOnly, handleNodeDelete])
+  }, [collaborativeWorkflow, getNodesReadOnly, handleNodeDelete])
 
   const handleNodeResize = useCallback(
     (nodeId: string, params: ResizeParamsWithDirection) => {
       if (getNodesReadOnly())
         return
 
-      const { getNodes, setNodes } = store.getState()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
       const { x, y, width, height } = params
 
-      const nodes = getNodes()
       const currentNode = nodes.find(n => n.id === nodeId)!
       const childrenNodes = nodes.filter(n =>
         currentNode.data._children?.find((c: any) => c.nodeId === n.id),
@@ -2064,7 +2061,7 @@ export const useNodesInteractions = () => {
       handleSyncWorkflowDraft()
       saveStateToHistory(WorkflowHistoryEvent.NodeResize, { nodeId })
     },
-    [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory],
+    [getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory],
   )
 
   const handleNodeDisconnect = useCallback(
@@ -2072,8 +2069,7 @@ export const useNodesInteractions = () => {
       if (getNodesReadOnly())
         return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const currentNode = nodes.find(node => node.id === nodeId)!
       const connectedEdges = getConnectedEdges([currentNode], edges)
       const nodesConnectedSourceOrTargetHandleIdsMap
@@ -2104,26 +2100,28 @@ export const useNodesInteractions = () => {
       handleSyncWorkflowDraft()
       saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
     },
-    [store, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory],
+    [collaborativeWorkflow, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory],
   )
 
   const handleHistoryBack = useCallback(() => {
     if (getNodesReadOnly() || getWorkflowReadOnly())
       return
 
-    const { setEdges, setNodes } = store.getState()
     undo()
-
     const { edges, nodes } = workflowHistoryStore.getState()
     if (edges.length === 0 && nodes.length === 0)
       return
+    const { setNodes, setEdges } = collaborativeWorkflow.getState()
 
-    setEdges(edges)
-    setNodes(nodes)
+    const shouldBroadcast = collaborationManager.isConnected()
+    setEdges(edges, shouldBroadcast)
+    setNodes(nodes, shouldBroadcast, 'nodes:history-back')
+    if (shouldBroadcast)
+      collaborationManager.emitHistoryAction('undo')
     workflowStore.setState({ edgeMenu: undefined })
   }, [
+    collaborativeWorkflow,
     workflowStore,
-    store,
     undo,
     workflowHistoryStore,
     getNodesReadOnly,
@@ -2134,19 +2132,21 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly() || getWorkflowReadOnly())
       return
 
-    const { setEdges, setNodes } = store.getState()
     redo()
-
     const { edges, nodes } = workflowHistoryStore.getState()
     if (edges.length === 0 && nodes.length === 0)
       return
+    const { setNodes, setEdges } = collaborativeWorkflow.getState()
 
-    setEdges(edges)
-    setNodes(nodes)
+    const shouldBroadcast = collaborationManager.isConnected()
+    setEdges(edges, shouldBroadcast)
+    setNodes(nodes, shouldBroadcast, 'nodes:history-forward')
+    if (shouldBroadcast)
+      collaborationManager.emitHistoryAction('redo')
     workflowStore.setState({ edgeMenu: undefined })
   }, [
+    collaborativeWorkflow,
     redo,
-    store,
     workflowStore,
     workflowHistoryStore,
     getNodesReadOnly,
@@ -2158,8 +2158,7 @@ export const useNodesInteractions = () => {
   const dimOtherNodes = useCallback(() => {
     if (isDimming)
       return
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
-    const nodes = getNodes()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
 
     const selectedNode = nodes.find(n => n.data.selected)
     if (!selectedNode)
@@ -2258,12 +2257,11 @@ export const useNodesInteractions = () => {
       draft.push(...tempEdges)
     })
     setEdges(newEdges)
-  }, [isDimming, store])
+  }, [isDimming, collaborativeWorkflow])
 
   /** Restore all nodes to full opacity */
   const undimAllNodes = useCallback(() => {
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
-    const nodes = getNodes()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
     setIsDimming(false)
 
     const newNodes = produce(nodes, (draft) => {
@@ -2283,7 +2281,7 @@ export const useNodesInteractions = () => {
       },
     )
     setEdges(newEdges)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   return {
     handleNodeDragStart,
diff --git a/web/app/components/workflow/hooks/use-selection-interactions.ts b/web/app/components/workflow/hooks/use-selection-interactions.ts
index 793897a1af..c97a62a340 100644
--- a/web/app/components/workflow/hooks/use-selection-interactions.ts
+++ b/web/app/components/workflow/hooks/use-selection-interactions.ts
@@ -9,10 +9,14 @@ import {
 } from 'react'
 import { useStoreApi } from 'reactflow'
 import { useWorkflowStore } from '../store'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
+import { useNodesReadOnly } from './use-workflow'
 
 export const useSelectionInteractions = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
+  const { getNodesReadOnly } = useNodesReadOnly()
 
   const handleSelectionStart = useCallback(() => {
     const {
@@ -81,15 +85,14 @@ export const useSelectionInteractions = () => {
   }, [store])
 
   const handleSelectionDrag = useCallback((_: MouseEvent, nodesWithDrag: Node[]) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-
     workflowStore.setState({
       nodeAnimation: false,
     })
-    const nodes = getNodes()
+
+    if (getNodesReadOnly())
+      return
+
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const newNodes = produce(nodes, (draft) => {
       draft.forEach((node) => {
         const dragNode = nodesWithDrag.find(n => n.id === node.id)
@@ -98,8 +101,8 @@ export const useSelectionInteractions = () => {
           node.position = dragNode.position
       })
     })
-    setNodes(newNodes)
-  }, [store, workflowStore])
+    setNodes(newNodes, true, 'use-selection-interactions:handleSelectionDrag')
+  }, [collaborativeWorkflow, getNodesReadOnly, workflowStore])
 
   const handleSelectionCancel = useCallback(() => {
     const {
diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts
index 1b3d141d8d..8ba7fa4602 100644
--- a/web/app/components/workflow/hooks/use-shortcuts.ts
+++ b/web/app/components/workflow/hooks/use-shortcuts.ts
@@ -10,6 +10,7 @@ import {
   useWorkflowMoveMode,
   useWorkflowOrganize,
 } from '.'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
 import { useWorkflowStore } from '../store'
 import {
   getKeyboardKeyCodeBySystem,
@@ -35,6 +36,8 @@ export const useShortcuts = (): void => {
   const {
     handleModeHand,
     handleModePointer,
+    handleModeComment,
+    isCommentModeAvailable,
   } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
@@ -151,6 +154,16 @@ export const useShortcuts = (): void => {
     useCapture: true,
   })
 
+  useKeyPress('c', (e) => {
+    if (shouldHandleShortcut(e) && isCommentModeAvailable) {
+      e.preventDefault()
+      handleModeComment()
+    }
+  }, {
+    exactMatch: true,
+    useCapture: true,
+  })
+
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.o`, (e) => {
     if (shouldHandleShortcut(e)) {
       e.preventDefault()
@@ -223,6 +236,13 @@ export const useShortcuts = (): void => {
     useCapture: true,
   })
 
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.l`, (e) => {
+    if (shouldHandleShortcut(e)) {
+      e.preventDefault()
+      collaborationManager.downloadGraphImportLog()
+    }
+  }, { exactMatch: true, useCapture: true })
+
   // Shift ↓
   useKeyPress(
     'shift',
diff --git a/web/app/components/workflow/hooks/use-workflow-comment.ts b/web/app/components/workflow/hooks/use-workflow-comment.ts
new file mode 100644
index 0000000000..be50654fd3
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-workflow-comment.ts
@@ -0,0 +1,581 @@
+import type { UserProfile, WorkflowCommentDetail, WorkflowCommentList } from '@/service/workflow-comment'
+import { useCallback, useEffect, useRef } from 'react'
+import { useReactFlow } from 'reactflow'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useParams } from '@/next/navigation'
+import { createWorkflowComment, createWorkflowCommentReply, deleteWorkflowComment, deleteWorkflowCommentReply, fetchWorkflowComment, fetchWorkflowComments, resolveWorkflowComment, updateWorkflowComment, updateWorkflowCommentReply } from '@/service/workflow-comment'
+import { useStore } from '../store'
+import { ControlMode } from '../types'
+
+const EMPTY_USERS: UserProfile[] = []
+type CommentDetailResponse = WorkflowCommentDetail | { data: WorkflowCommentDetail }
+
+const getCommentDetail = (response: CommentDetailResponse): WorkflowCommentDetail => {
+  if ('data' in response)
+    return response.data
+  return response
+}
+
+export const useWorkflowComment = () => {
+  const params = useParams()
+  const appId = params.appId as string
+  const reactflow = useReactFlow()
+  const controlMode = useStore(s => s.controlMode)
+  const pendingComment = useStore(s => s.pendingComment)
+  const setPendingComment = useStore(s => s.setPendingComment)
+  const isCommentQuickAdd = useStore(s => s.isCommentQuickAdd)
+  const setCommentQuickAdd = useStore(s => s.setCommentQuickAdd)
+  const isCommentPlacing = useStore(s => s.isCommentPlacing)
+  const setActiveCommentId = useStore(s => s.setActiveCommentId)
+  const activeCommentId = useStore(s => s.activeCommentId)
+  const comments = useStore(s => s.comments)
+  const setComments = useStore(s => s.setComments)
+  const loading = useStore(s => s.commentsLoading)
+  const setCommentsLoading = useStore(s => s.setCommentsLoading)
+  const activeComment = useStore(s => s.activeCommentDetail)
+  const setActiveComment = useStore(s => s.setActiveCommentDetail)
+  const activeCommentLoading = useStore(s => s.activeCommentDetailLoading)
+  const setActiveCommentLoading = useStore(s => s.setActiveCommentDetailLoading)
+  const replySubmitting = useStore(s => s.replySubmitting)
+  const setReplySubmitting = useStore(s => s.setReplySubmitting)
+  const replyUpdating = useStore(s => s.replyUpdating)
+  const setReplyUpdating = useStore(s => s.setReplyUpdating)
+  const commentDetailCache = useStore(s => s.commentDetailCache)
+  const setCommentDetailCache = useStore(s => s.setCommentDetailCache)
+  const rightPanelWidth = useStore(s => s.rightPanelWidth)
+  const nodePanelWidth = useStore(s => s.nodePanelWidth)
+  const mentionableUsers = useStore(state => (
+    appId ? state.mentionableUsersCache[appId] ?? EMPTY_USERS : EMPTY_USERS
+  ))
+  const { userProfile } = useAppContext()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+  const commentDetailCacheRef = useRef<Record<string, WorkflowCommentDetail>>(commentDetailCache)
+  const activeCommentIdRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    activeCommentIdRef.current = activeCommentId ?? null
+  }, [activeCommentId])
+
+  useEffect(() => {
+    commentDetailCacheRef.current = commentDetailCache
+  }, [commentDetailCache])
+
+  const refreshActiveComment = useCallback(async (commentId: string) => {
+    if (!appId)
+      return
+
+    const detailResponse = await fetchWorkflowComment(appId, commentId) as CommentDetailResponse
+    const detail = getCommentDetail(detailResponse)
+
+    commentDetailCacheRef.current = {
+      ...commentDetailCacheRef.current,
+      [commentId]: detail,
+    }
+    setCommentDetailCache(commentDetailCacheRef.current)
+    setActiveComment(detail)
+  }, [appId, setActiveComment, setCommentDetailCache])
+
+  const loadComments = useCallback(async () => {
+    if (!appId || !isCollaborationEnabled)
+      return
+
+    setCommentsLoading(true)
+    try {
+      const commentsData = await fetchWorkflowComments(appId)
+      setComments(commentsData)
+    }
+    catch (error) {
+      console.error('Failed to fetch comments:', error)
+    }
+    finally {
+      setCommentsLoading(false)
+    }
+  }, [appId, isCollaborationEnabled, setComments, setCommentsLoading])
+
+  // Setup collaboration
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled)
+      return
+
+    const unsubscribe = collaborationManager.onCommentsUpdate(() => {
+      loadComments()
+      if (activeCommentIdRef.current)
+        refreshActiveComment(activeCommentIdRef.current)
+    })
+
+    return unsubscribe
+  }, [appId, isCollaborationEnabled, loadComments, refreshActiveComment])
+
+  useEffect(() => {
+    loadComments()
+  }, [loadComments])
+
+  const handleCommentSubmit = useCallback(async (content: string, mentionedUserIds: string[] = []) => {
+    if (!pendingComment)
+      return
+
+    if (!appId) {
+      console.error('AppId is missing')
+      return
+    }
+
+    try {
+      // Convert screen position to flow position when submitting
+      const { screenToFlowPosition } = reactflow
+      const flowPosition = screenToFlowPosition({
+        x: pendingComment.pageX,
+        y: pendingComment.pageY,
+      })
+
+      const newComment = await createWorkflowComment(appId, {
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
+        content,
+        mentioned_user_ids: mentionedUserIds,
+      })
+
+      const createdAt = Number(newComment.created_at)
+      const createdAtSeconds = Number.isNaN(createdAt)
+        ? Math.floor(Date.parse(newComment.created_at) / 1000)
+        : createdAt
+      const createdByAccount = {
+        id: userProfile?.id ?? '',
+        name: userProfile?.name ?? '',
+        email: userProfile?.email ?? '',
+        avatar_url: userProfile?.avatar_url || userProfile?.avatar || undefined,
+      }
+      const mentionedUsers = mentionedUserIds
+        .map(mentionedId => mentionableUsers.find(user => user.id === mentionedId))
+        .filter((user): user is NonNullable<typeof user> => Boolean(user))
+      const uniqueParticipantsMap = new Map<string, typeof createdByAccount>()
+      if (createdByAccount.id)
+        uniqueParticipantsMap.set(createdByAccount.id, createdByAccount)
+      for (const user of mentionedUsers) {
+        if (!uniqueParticipantsMap.has(user.id)) {
+          uniqueParticipantsMap.set(user.id, {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            avatar_url: user.avatar_url,
+          })
+        }
+      }
+      const participants = Array.from(uniqueParticipantsMap.values())
+
+      const composedComment: WorkflowCommentList = {
+        id: newComment.id,
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
+        content,
+        created_by: createdByAccount.id,
+        created_by_account: createdByAccount,
+        created_at: createdAtSeconds,
+        updated_at: createdAtSeconds,
+        resolved: false,
+        mention_count: mentionedUserIds.length,
+        reply_count: 0,
+        participants,
+      }
+
+      const composedDetail: WorkflowCommentDetail = {
+        id: newComment.id,
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
+        content,
+        created_by: createdByAccount.id,
+        created_by_account: createdByAccount,
+        created_at: createdAtSeconds,
+        updated_at: createdAtSeconds,
+        resolved: false,
+        replies: [],
+        mentions: mentionedUserIds.map(mentionedId => ({
+          mentioned_user_id: mentionedId,
+          mentioned_user_account: mentionableUsers.find(user => user.id === mentionedId) ?? null,
+          reply_id: null,
+        })),
+      }
+
+      setComments([...comments, composedComment])
+      commentDetailCacheRef.current = {
+        ...commentDetailCacheRef.current,
+        [newComment.id]: composedDetail,
+      }
+      setCommentDetailCache(commentDetailCacheRef.current)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      setPendingComment(null)
+      setCommentQuickAdd(false)
+    }
+    catch (error) {
+      console.error('Failed to create comment:', error)
+      setPendingComment(null)
+      setCommentQuickAdd(false)
+    }
+  }, [appId, pendingComment, setPendingComment, setCommentQuickAdd, reactflow, comments, setComments, userProfile, setCommentDetailCache, mentionableUsers])
+
+  const handleCommentCancel = useCallback(() => {
+    setPendingComment(null)
+    setCommentQuickAdd(false)
+  }, [setPendingComment, setCommentQuickAdd])
+
+  useEffect(() => {
+    if (controlMode !== ControlMode.Comment && !isCommentQuickAdd)
+      setPendingComment(null)
+  }, [controlMode, isCommentQuickAdd, setPendingComment])
+
+  useEffect(() => {
+    if (!pendingComment && !isCommentPlacing && isCommentQuickAdd)
+      setCommentQuickAdd(false)
+  }, [isCommentPlacing, isCommentQuickAdd, pendingComment, setCommentQuickAdd])
+
+  const handleCommentIconClick = useCallback(async (comment: WorkflowCommentList) => {
+    setPendingComment(null)
+
+    activeCommentIdRef.current = comment.id
+    setActiveCommentId(comment.id)
+
+    const cachedDetail = commentDetailCacheRef.current[comment.id]
+    setActiveComment(cachedDetail || comment)
+
+    const hasSelectedNode = reactflow.getNodes().some(node => node.data?.selected)
+    const commentPanelWidth = controlMode === ControlMode.Comment ? 420 : 0
+    const fallbackPanelWidth = (hasSelectedNode ? nodePanelWidth : 0) + commentPanelWidth
+    const effectivePanelWidth = Math.max(rightPanelWidth ?? 0, fallbackPanelWidth)
+
+    const baseHorizontalOffsetPx = 220
+    const panelCompensationPx = effectivePanelWidth / 2
+    const desiredHorizontalOffsetPx = baseHorizontalOffsetPx + panelCompensationPx
+    const maxOffset = Math.max(0, (window.innerWidth / 2) - 60)
+    const horizontalOffsetPx = Math.min(desiredHorizontalOffsetPx, maxOffset)
+
+    reactflow.setCenter(
+      comment.position_x + horizontalOffsetPx,
+      comment.position_y,
+      { zoom: 1, duration: 600 },
+    )
+
+    if (!appId)
+      return
+
+    setActiveCommentLoading(!cachedDetail)
+
+    try {
+      const detailResponse = await fetchWorkflowComment(appId, comment.id) as CommentDetailResponse
+      const detail = getCommentDetail(detailResponse)
+
+      commentDetailCacheRef.current = {
+        ...commentDetailCacheRef.current,
+        [comment.id]: detail,
+      }
+      setCommentDetailCache(commentDetailCacheRef.current)
+
+      if (activeCommentIdRef.current === comment.id)
+        setActiveComment(detail)
+    }
+    catch (e) {
+      console.warn('Failed to load workflow comment detail', e)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [
+    appId,
+    controlMode,
+    nodePanelWidth,
+    reactflow,
+    rightPanelWidth,
+    setActiveComment,
+    setActiveCommentId,
+    setActiveCommentLoading,
+    setCommentDetailCache,
+    setPendingComment,
+  ])
+
+  const handleCommentResolve = useCallback(async (commentId: string) => {
+    if (!appId)
+      return
+
+    setActiveCommentLoading(true)
+    try {
+      await resolveWorkflowComment(appId, commentId)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to resolve comment:', error)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setActiveCommentLoading])
+
+  const handleCommentDelete = useCallback(async (commentId: string) => {
+    if (!appId)
+      return
+
+    setActiveCommentLoading(true)
+    try {
+      await deleteWorkflowComment(appId, commentId)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      const updatedCache = { ...commentDetailCacheRef.current }
+      delete updatedCache[commentId]
+      commentDetailCacheRef.current = updatedCache
+      setCommentDetailCache(updatedCache)
+
+      const currentComments = comments.filter(c => c.id !== commentId)
+      const commentIndex = comments.findIndex(c => c.id === commentId)
+      const fallbackTarget = commentIndex >= 0 ? comments[commentIndex + 1] ?? comments[commentIndex - 1] : undefined
+
+      await loadComments()
+
+      if (fallbackTarget) {
+        handleCommentIconClick(fallbackTarget)
+      }
+      else if (currentComments.length > 0) {
+        const nextComment = currentComments[0]
+        handleCommentIconClick(nextComment)
+      }
+      else {
+        setActiveComment(null)
+        setActiveCommentId(null)
+        activeCommentIdRef.current = null
+      }
+    }
+    catch (error) {
+      console.error('Failed to delete comment:', error)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [appId, comments, handleCommentIconClick, loadComments, setActiveComment, setActiveCommentId, setActiveCommentLoading, setCommentDetailCache])
+
+  const handleCommentPositionUpdate = useCallback(async (commentId: string, position: { x: number, y: number }) => {
+    if (!appId)
+      return
+
+    const targetComment = comments.find(c => c.id === commentId)
+    if (!targetComment)
+      return
+
+    const nextPosition = {
+      position_x: position.x,
+      position_y: position.y,
+    }
+
+    const previousComments = comments
+    const updatedComments = comments.map(c =>
+      c.id === commentId
+        ? { ...c, ...nextPosition }
+        : c,
+    )
+    setComments(updatedComments)
+
+    const cachedDetail = commentDetailCacheRef.current[commentId]
+    const updatedDetail = cachedDetail ? { ...cachedDetail, ...nextPosition } : null
+    if (updatedDetail) {
+      commentDetailCacheRef.current = {
+        ...commentDetailCacheRef.current,
+        [commentId]: updatedDetail,
+      }
+      setCommentDetailCache(commentDetailCacheRef.current)
+
+      if (activeCommentIdRef.current === commentId)
+        setActiveComment(updatedDetail)
+    }
+    else if (activeComment?.id === commentId) {
+      setActiveComment({ ...activeComment, ...nextPosition })
+    }
+
+    try {
+      await updateWorkflowComment(appId, commentId, {
+        content: targetComment.content,
+        position_x: nextPosition.position_x,
+        position_y: nextPosition.position_y,
+      })
+      collaborationManager.emitCommentsUpdate(appId)
+    }
+    catch (error) {
+      console.error('Failed to update comment position:', error)
+      setComments(previousComments)
+
+      if (cachedDetail) {
+        commentDetailCacheRef.current = {
+          ...commentDetailCacheRef.current,
+          [commentId]: cachedDetail,
+        }
+        setCommentDetailCache(commentDetailCacheRef.current)
+
+        if (activeCommentIdRef.current === commentId)
+          setActiveComment(cachedDetail)
+      }
+      else if (activeComment?.id === commentId) {
+        setActiveComment(activeComment)
+      }
+    }
+  }, [activeComment, appId, comments, setComments, setCommentDetailCache, setActiveComment])
+
+  const handleCommentUpdate = useCallback(async (commentId: string, content: string, mentionedUserIds: string[] = []) => {
+    if (!appId)
+      return
+    const trimmed = content.trim()
+    if (!trimmed)
+      return
+
+    const targetComment = comments.find(c => c.id === commentId)
+    const targetDetail = commentDetailCacheRef.current[commentId]
+      ?? (activeCommentIdRef.current === commentId ? activeComment : null)
+    const positionX = targetDetail?.position_x ?? targetComment?.position_x
+    const positionY = targetDetail?.position_y ?? targetComment?.position_y
+
+    if (positionX === undefined || positionY === undefined)
+      return
+
+    try {
+      await updateWorkflowComment(appId, commentId, {
+        content: trimmed,
+        position_x: positionX,
+        position_y: positionY,
+        mentioned_user_ids: mentionedUserIds,
+      })
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to update comment:', error)
+    }
+  }, [activeComment, appId, comments, loadComments, refreshActiveComment])
+
+  const handleCommentReply = useCallback(async (commentId: string, content: string, mentionedUserIds: string[] = []) => {
+    if (!appId)
+      return
+    const trimmed = content.trim()
+    if (!trimmed)
+      return
+
+    setReplySubmitting(true)
+    try {
+      await createWorkflowCommentReply(appId, commentId, { content: trimmed, mentioned_user_ids: mentionedUserIds })
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to create reply:', error)
+    }
+    finally {
+      setReplySubmitting(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setReplySubmitting])
+
+  const handleCommentReplyUpdate = useCallback(async (commentId: string, replyId: string, content: string, mentionedUserIds: string[] = []) => {
+    if (!appId)
+      return
+    const trimmed = content.trim()
+    if (!trimmed)
+      return
+
+    setReplyUpdating(true)
+    try {
+      await updateWorkflowCommentReply(appId, commentId, replyId, { content: trimmed, mentioned_user_ids: mentionedUserIds })
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to update reply:', error)
+    }
+    finally {
+      setReplyUpdating(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setReplyUpdating])
+
+  const handleCommentReplyDelete = useCallback(async (commentId: string, replyId: string) => {
+    if (!appId)
+      return
+
+    setActiveCommentLoading(true)
+    try {
+      await deleteWorkflowCommentReply(appId, commentId, replyId)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to delete reply:', error)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setActiveCommentLoading])
+
+  const handleCommentNavigate = useCallback((direction: 'prev' | 'next') => {
+    const currentId = activeCommentIdRef.current
+    if (!currentId)
+      return
+    const idx = comments.findIndex(c => c.id === currentId)
+    if (idx === -1)
+      return
+    const target = direction === 'prev' ? comments[idx - 1] : comments[idx + 1]
+    if (target)
+      handleCommentIconClick(target)
+  }, [comments, handleCommentIconClick])
+
+  const handleActiveCommentClose = useCallback(() => {
+    setActiveComment(null)
+    setActiveCommentLoading(false)
+    setActiveCommentId(null)
+    activeCommentIdRef.current = null
+  }, [setActiveComment, setActiveCommentId, setActiveCommentLoading])
+
+  const handleCreateComment = useCallback((mousePosition: {
+    pageX: number
+    pageY: number
+    elementX: number
+    elementY: number
+  }) => {
+    if (controlMode === ControlMode.Comment)
+      setPendingComment(mousePosition)
+  }, [controlMode, setPendingComment])
+
+  return {
+    comments,
+    loading,
+    pendingComment,
+    activeComment,
+    activeCommentLoading,
+    replySubmitting,
+    replyUpdating,
+    handleCommentSubmit,
+    handleCommentCancel,
+    handleCommentIconClick,
+    handleActiveCommentClose,
+    handleCommentResolve,
+    handleCommentDelete,
+    handleCommentNavigate,
+    handleCommentUpdate,
+    handleCommentReply,
+    handleCommentReplyUpdate,
+    handleCommentReplyDelete,
+    handleCommentPositionUpdate,
+    refreshActiveComment,
+    handleCreateComment,
+    loadComments,
+  }
+}
diff --git a/web/app/components/workflow/hooks/use-workflow-organize.ts b/web/app/components/workflow/hooks/use-workflow-organize.ts
index 1acaa07fbc..897963eca8 100644
--- a/web/app/components/workflow/hooks/use-workflow-organize.ts
+++ b/web/app/components/workflow/hooks/use-workflow-organize.ts
@@ -1,10 +1,11 @@
 import { useCallback } from 'react'
-import { useReactFlow, useStoreApi } from 'reactflow'
+import { useReactFlow } from 'reactflow'
 import { useWorkflowStore } from '../store'
 import {
   getLayoutByELK,
   getLayoutForChildNodes,
 } from '../utils/elk-layout'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useNodesReadOnly } from './use-workflow'
 import { useWorkflowHistory, WorkflowHistoryEvent } from './use-workflow-history'
@@ -17,7 +18,7 @@ import {
 
 export const useWorkflowOrganize = () => {
   const workflowStore = useWorkflowStore()
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const reactflow = useReactFlow()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { saveStateToHistory } = useWorkflowHistory()
@@ -29,11 +30,10 @@ export const useWorkflowOrganize = () => {
 
     workflowStore.setState({ nodeAnimation: true })
     const {
-      getNodes,
+      nodes,
       edges,
       setNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    } = collaborativeWorkflow.getState()
     const parentNodes = getLayoutContainerNodes(nodes)
 
     const childLayoutEntries = await Promise.all(
@@ -63,7 +63,7 @@ export const useWorkflowOrganize = () => {
     setTimeout(() => {
       handleSyncWorkflowDraft()
     })
-  }, [getNodesReadOnly, handleSyncWorkflowDraft, reactflow, saveStateToHistory, store, workflowStore])
+  }, [getNodesReadOnly, handleSyncWorkflowDraft, reactflow, saveStateToHistory, collaborativeWorkflow, workflowStore])
 
   return {
     handleLayout,
diff --git a/web/app/components/workflow/hooks/use-workflow-panel-interactions.ts b/web/app/components/workflow/hooks/use-workflow-panel-interactions.ts
index 3092a664df..62628c533e 100644
--- a/web/app/components/workflow/hooks/use-workflow-panel-interactions.ts
+++ b/web/app/components/workflow/hooks/use-workflow-panel-interactions.ts
@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useStore, useWorkflowStore } from '../store'
 import { ControlMode } from '../types'
 import { useEdgesInteractionsWithoutSync } from './use-edges-interactions-without-sync'
@@ -29,6 +30,7 @@ export const useWorkflowMoveMode = () => {
   const setControlMode = useStore(s => s.setControlMode)
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleSelectionCancel } = useSelectionInteractions()
+  const isCommentModeAvailable = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
   const handleModePointer = useCallback(() => {
     if (getNodesReadOnly())
@@ -45,8 +47,18 @@ export const useWorkflowMoveMode = () => {
     handleSelectionCancel()
   }, [getNodesReadOnly, handleSelectionCancel, setControlMode])
 
+  const handleModeComment = useCallback(() => {
+    if (getNodesReadOnly() || !isCommentModeAvailable)
+      return
+
+    setControlMode(ControlMode.Comment)
+    handleSelectionCancel()
+  }, [getNodesReadOnly, handleSelectionCancel, isCommentModeAvailable, setControlMode])
+
   return {
     handleModePointer,
     handleModeHand,
+    handleModeComment,
+    isCommentModeAvailable,
   }
 }
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index 0c6aa7466e..02353bb951 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -16,9 +16,9 @@ import {
 import {
   getIncomers,
   getOutgoers,
-  useStoreApi,
 } from 'reactflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { CUSTOM_ITERATION_START_NODE } from '@/app/components/workflow/nodes/iteration-start/constants'
 import { CUSTOM_LOOP_START_NODE } from '@/app/components/workflow/nodes/loop-start/constants'
 import { AppModeEnum } from '@/types/app'
@@ -27,8 +27,8 @@ import {
   SUPPORT_OUTPUT_VARS_NODE,
 } from '../constants'
 import { findUsedVarNodes, getNodeOutputVars, updateNodeVars } from '../nodes/_base/components/variable/utils'
-import { CUSTOM_NOTE_NODE } from '../note-node/constants'
 
+import { CUSTOM_NOTE_NODE } from '../note-node/constants'
 import {
   useStore,
   useWorkflowStore,
@@ -40,6 +40,7 @@ import {
   getWorkflowEntryNode,
   isWorkflowEntryNode,
 } from '../utils/workflow-entry'
+
 import { useAvailableBlocks } from './use-available-blocks'
 
 export const useIsChatMode = () => {
@@ -49,26 +50,18 @@ export const useIsChatMode = () => {
 }
 
 export const useWorkflow = () => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { getAvailableBlocks } = useAvailableBlocks()
   const { nodesMap } = useNodesMetaData()
 
   const getNodeById = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
     return currentNode
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getTreeLeafNodes = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
-    // let startNode = getWorkflowEntryNode(nodes)
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
 
     let startNodes = nodes.filter(node => nodesMap?.[node.data.type as BlockEnum]?.metaData.isStart) || []
@@ -111,14 +104,11 @@ export const useWorkflow = () => {
     return uniqBy(list, 'id').filter((item: Node) => {
       return SUPPORT_OUTPUT_VARS_NODE.includes(item.data.type)
     })
-  }, [store, nodesMap])
+  }, [collaborativeWorkflow, nodesMap])
 
   const getBeforeNodesInSameBranch = useCallback((nodeId: string, newNodes?: Node[], newEdges?: Edge[]) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = newNodes || getNodes()
+    const { nodes: oldNodes, edges } = collaborativeWorkflow.getState()
+    const nodes = newNodes || oldNodes
     const currentNode = nodes.find(node => node.id === nodeId)
 
     const list: Node[] = []
@@ -161,14 +151,11 @@ export const useWorkflow = () => {
     }
 
     return []
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getBeforeNodesInSameBranchIncludeParent = useCallback((nodeId: string, newNodes?: Node[], newEdges?: Edge[]) => {
     const nodes = getBeforeNodesInSameBranch(nodeId, newNodes, newEdges)
-    const {
-      getNodes,
-    } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes } = collaborativeWorkflow.getState()
     const node = allNodes.find(n => n.id === nodeId)
     const parentNodeId = node?.parentId
     const parentNode = allNodes.find(n => n.id === parentNodeId)
@@ -176,14 +163,10 @@ export const useWorkflow = () => {
       nodes.push(parentNode)
 
     return nodes
-  }, [getBeforeNodesInSameBranch, store])
+  }, [getBeforeNodesInSameBranch, collaborativeWorkflow])
 
   const getAfterNodesInSameBranch = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)!
 
     if (!currentNode)
@@ -207,40 +190,29 @@ export const useWorkflow = () => {
     })
 
     return uniqBy(list, 'id')
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getBeforeNodeById = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const node = nodes.find(node => node.id === nodeId)!
 
     return getIncomers(node, nodes, edges)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getIterationNodeChildren = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return nodes.filter(node => node.parentId === nodeId)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getLoopNodeChildren = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return nodes.filter(node => node.parentId === nodeId)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const isFromStartNode = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
 
     if (!currentNode)
@@ -263,11 +235,10 @@ export const useWorkflow = () => {
     }
 
     return checkPreviousNodes(currentNode)
-  }, [store, getBeforeNodeById])
+  }, [collaborativeWorkflow, getBeforeNodeById])
 
   const handleOutVarRenameChange = useCallback((nodeId: string, oldValeSelector: ValueSelector, newVarSelector: ValueSelector) => {
-    const { getNodes, setNodes } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes, setNodes } = collaborativeWorkflow.getState()
     const affectedNodes = findUsedVarNodes(oldValeSelector, allNodes)
     if (affectedNodes.length > 0) {
       const newNodes = allNodes.map((node) => {
@@ -278,7 +249,7 @@ export const useWorkflow = () => {
       })
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const isVarUsedInNodes = useCallback((varSelector: ValueSelector) => {
     const nodeId = varSelector[0]
@@ -289,11 +260,11 @@ export const useWorkflow = () => {
 
   const removeUsedVarInNodes = useCallback((varSelector: ValueSelector) => {
     const nodeId = varSelector[0]
-    const { getNodes, setNodes } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const afterNodes = getAfterNodesInSameBranch(nodeId)
     const effectNodes = findUsedVarNodes(varSelector, afterNodes)
     if (effectNodes.length > 0) {
-      const newNodes = getNodes().map((node) => {
+      const newNodes = nodes.map((node) => {
         if (effectNodes.find(n => n.id === node.id))
           return updateNodeVars(node, varSelector, [])
 
@@ -301,7 +272,7 @@ export const useWorkflow = () => {
       })
       setNodes(newNodes)
     }
-  }, [getAfterNodesInSameBranch, store])
+  }, [getAfterNodesInSameBranch, collaborativeWorkflow])
 
   const isNodeVarsUsedInNodes = useCallback((node: Node, isChatMode: boolean) => {
     const outputVars = getNodeOutputVars(node, isChatMode)
@@ -312,11 +283,7 @@ export const useWorkflow = () => {
   }, [isVarUsedInNodes])
 
   const getRootNodesById = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
 
     const rootNodes: Node[] = []
@@ -356,7 +323,7 @@ export const useWorkflow = () => {
       return uniqBy(rootNodes, 'id')
 
     return []
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getStartNodes = useCallback((nodes: Node[], currentNode?: Node) => {
     const { id, parentId } = currentNode || {}
@@ -382,11 +349,7 @@ export const useWorkflow = () => {
   }, [nodesMap, getRootNodesById])
 
   const isValidConnection = useCallback(({ source, sourceHandle: _sourceHandle, target }: Connection) => {
-    const {
-      edges,
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const sourceNode: Node = nodes.find(node => node.id === source)!
     const targetNode: Node = nodes.find(node => node.id === target)!
 
@@ -422,14 +385,13 @@ export const useWorkflow = () => {
     }
 
     return !hasCycle(targetNode)
-  }, [store, getAvailableBlocks])
+  }, [collaborativeWorkflow, getAvailableBlocks])
 
   const getNode = useCallback((nodeId?: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return nodes.find(node => node.id === nodeId) || getWorkflowEntryNode(nodes)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   return {
     getNodeById,
@@ -499,13 +461,10 @@ export const useNodesReadOnly = () => {
 }
 
 export const useIsNodeInIteration = (iterationId: string) => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const isNodeInIteration = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const node = nodes.find(node => node.id === nodeId)
 
     if (!node)
@@ -515,20 +474,17 @@ export const useIsNodeInIteration = (iterationId: string) => {
       return true
 
     return false
-  }, [iterationId, store])
+  }, [iterationId, collaborativeWorkflow])
   return {
     isNodeInIteration,
   }
 }
 
 export const useIsNodeInLoop = (loopId: string) => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const isNodeInLoop = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const node = nodes.find(node => node.id === nodeId)
 
     if (!node)
@@ -538,7 +494,7 @@ export const useIsNodeInLoop = (loopId: string) => {
       return true
 
     return false
-  }, [loopId, store])
+  }, [loopId, collaborativeWorkflow])
   return {
     isNodeInLoop,
   }
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 41c244c6c2..71d9366552 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -4,9 +4,13 @@ import type { FC } from 'react'
 import type {
   Viewport,
 } from 'reactflow'
+import type { CursorPosition, OnlineUser } from './collaboration/types/collaboration'
 import type { Shape as HooksStoreShape } from './hooks-store'
+import type { WorkflowSliceShape } from './store/workflow/workflow-slice'
 import type {
+  ConversationVariable,
   Edge,
+  EnvironmentVariable,
   Node,
 } from './types'
 import type { VarInInspect } from '@/types/workflow'
@@ -17,6 +21,7 @@ import {
 import { isEqual } from 'es-toolkit/predicate'
 import { setAutoFreeze } from 'immer'
 import {
+  Fragment,
   memo,
   useCallback,
   useEffect,
@@ -45,6 +50,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import { IS_DEV } from '@/config'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
@@ -55,6 +61,13 @@ import {
 } from '@/service/use-tools'
 import { fetchAllInspectVars } from '@/service/workflow'
 import CandidateNode from './candidate-node'
+import UserCursors from './collaboration/components/user-cursors'
+import { collaborationManager } from './collaboration/core/collaboration-manager'
+import CommentManager from './comment-manager'
+import { CommentIcon } from './comment/comment-icon'
+import { CommentInput } from './comment/comment-input'
+import { CommentCursor } from './comment/cursor'
+import { CommentThread } from './comment/thread'
 import {
   CUSTOM_EDGE,
   CUSTOM_NODE,
@@ -68,6 +81,7 @@ import EdgeContextmenu from './edge-contextmenu'
 import HelpLine from './help-line'
 import {
   useEdgesInteractions,
+  useLeaderRestoreListener,
   useNodesInteractions,
   useNodesReadOnly,
   useNodesSyncDraft,
@@ -80,6 +94,7 @@ import {
   useWorkflowRefreshDraft,
 } from './hooks'
 import { HooksStoreContextProvider, useHooksStore } from './hooks-store'
+import { useWorkflowComment } from './hooks/use-workflow-comment'
 import { useWorkflowSearch } from './hooks/use-workflow-search'
 import NodeContextmenu from './node-contextmenu'
 import CustomNode from './nodes'
@@ -124,24 +139,73 @@ const edgeTypes = {
   [CUSTOM_EDGE]: CustomEdge,
 }
 
+type WorkflowDataUpdatePayload = {
+  nodes: Node[]
+  edges: Edge[]
+  viewport?: Viewport
+  hash?: string
+  features?: unknown
+  conversation_variables?: ConversationVariable[]
+  environment_variables?: EnvironmentVariable[]
+}
+
 export type WorkflowProps = {
   nodes: Node[]
   edges: Edge[]
   viewport?: Viewport
   children?: React.ReactNode
-  onWorkflowDataUpdate?: (v: any) => void
+  onWorkflowDataUpdate?: (v: WorkflowDataUpdatePayload) => void
+  cursors?: Record<string, CursorPosition>
+  myUserId?: string | null
+  onlineUsers?: OnlineUser[]
 }
+
+const CommentPlacementPreview = memo(({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+  onCancel: () => void
+}) => {
+  const isCommentPlacing = useStore(s => s.isCommentPlacing)
+  const pendingComment = useStore(s => s.pendingComment)
+  const mousePosition = useStore(s => s.mousePosition)
+
+  if (!isCommentPlacing || pendingComment)
+    return null
+
+  return (
+    <CommentInput
+      position={{
+        x: mousePosition.elementX,
+        y: mousePosition.elementY,
+      }}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      autoFocus={false}
+      disabled
+    />
+  )
+})
+
+CommentPlacementPreview.displayName = 'CommentPlacementPreview'
+
 export const Workflow: FC<WorkflowProps> = memo(({
   nodes: originalNodes,
   edges: originalEdges,
   viewport,
   children,
   onWorkflowDataUpdate,
+  cursors,
+  myUserId,
+  onlineUsers,
 }) => {
   const { t } = useTranslation()
   const workflowContainerRef = useRef<HTMLDivElement>(null)
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
+  const store = useStoreApi()
+  const [isMouseOverCanvas, setIsMouseOverCanvas] = useState(false)
   const [nodes, setNodes] = useNodesState(originalNodes)
   const [edges, setEdges] = useEdgesState(originalEdges)
   const controlMode = useStore(s => s.controlMode)
@@ -196,6 +260,24 @@ export const Workflow: FC<WorkflowProps> = memo(({
   useEffect(() => {
     setNodesOnlyChangeWithData(currentNodes as Node[])
   }, [currentNodes, setNodesOnlyChangeWithData])
+  useEffect(() => {
+    return collaborationManager.onGraphImport(({ nodes: importedNodes, edges: importedEdges }) => {
+      if (!isEqual(nodes, importedNodes)) {
+        setNodes(importedNodes)
+        store.getState().setNodes(importedNodes)
+      }
+      if (!isEqual(edges, importedEdges)) {
+        setEdges(importedEdges)
+        store.getState().setEdges(importedEdges)
+      }
+    })
+  }, [edges, nodes, setEdges, setNodes, store])
+
+  useEffect(() => {
+    return collaborationManager.onHistoryAction((_) => {
+      toast.info(t('collaboration.historyAction.generic', { ns: 'workflow' }))
+    })
+  }, [t])
   const {
     handleSyncWorkflowDraft,
     syncWorkflowDraftWhenPageClose,
@@ -203,8 +285,50 @@ export const Workflow: FC<WorkflowProps> = memo(({
   const { workflowReadOnly } = useWorkflowReadOnly()
   const { nodesReadOnly } = useNodesReadOnly()
   const { eventEmitter } = useEventEmitterContextContext()
+  const {
+    comments,
+    pendingComment,
+    activeComment,
+    activeCommentLoading,
+    replySubmitting,
+    replyUpdating,
+    handleCommentSubmit,
+    handleCommentCancel,
+    handleCommentIconClick,
+    handleActiveCommentClose,
+    handleCommentResolve,
+    handleCommentDelete,
+    handleCommentUpdate,
+    handleCommentReply,
+    handleCommentReplyUpdate,
+    handleCommentReplyDelete,
+    handleCommentPositionUpdate,
+  } = useWorkflowComment()
+  const showUserComments = useStore(s => s.showUserComments)
+  const showUserCursors = useStore(s => s.showUserCursors)
+  const showResolvedComments = useStore(s => s.showResolvedComments)
+  const isCommentPreviewHovering = useStore(s => s.isCommentPreviewHovering)
+  const isCommentPlacing = useStore(s => s.isCommentPlacing)
+  const setCommentPlacing = useStore(s => s.setCommentPlacing)
+  const setCommentQuickAdd = useStore(s => s.setCommentQuickAdd)
+  const setPendingCommentState = useStore(s => s.setPendingComment)
+  const isCommentInputActive = Boolean(pendingComment) || isCommentPlacing
+  const visibleComments = useMemo(() => {
+    if (showResolvedComments)
+      return comments
+    return comments.filter(comment => !comment.resolved)
+  }, [comments, showResolvedComments])
+  const handleVisibleCommentNavigate = useCallback((direction: 'prev' | 'next') => {
+    if (!activeComment)
+      return
+    const idx = visibleComments.findIndex(comment => comment.id === activeComment.id)
+    if (idx === -1)
+      return
+    const target = direction === 'prev' ? visibleComments[idx - 1] : visibleComments[idx + 1]
+    if (target)
+      handleCommentIconClick(target)
+  }, [activeComment, handleCommentIconClick, visibleComments])
 
-  const store = useStoreApi()
   eventEmitter?.useSubscription((v: any) => {
     if (v.type === WORKFLOW_DATA_UPDATE) {
       setNodes(v.payload.nodes)
@@ -238,6 +362,16 @@ export const Workflow: FC<WorkflowProps> = memo(({
     }
   }, [handleSyncWorkflowDraft])
 
+  const handlePendingCommentPositionChange = useCallback((position: NonNullable<WorkflowSliceShape['pendingComment']>) => {
+    setPendingCommentState(position)
+  }, [setPendingCommentState])
+
+  const handleCommentPlacementCancel = useCallback(() => {
+    setPendingCommentState(null)
+    setCommentPlacing(false)
+    setCommentQuickAdd(false)
+  }, [setCommentPlacing, setCommentQuickAdd, setPendingCommentState])
+
   const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
   const handleSyncWorkflowDraftWhenPageClose = useCallback(() => {
     if (document.visibilityState === 'hidden') {
@@ -261,6 +395,33 @@ export const Workflow: FC<WorkflowProps> = memo(({
     syncWorkflowDraftWhenPageClose()
   }, [syncWorkflowDraftWhenPageClose])
 
+  // Optimized comment deletion using showConfirm
+  const handleCommentDeleteClick = useCallback((commentId: string) => {
+    if (!showConfirm) {
+      setShowConfirm({
+        title: t('comments.confirm.deleteThreadTitle', { ns: 'workflow' }),
+        desc: t('comments.confirm.deleteThreadDesc', { ns: 'workflow' }),
+        onConfirm: async () => {
+          await handleCommentDelete(commentId)
+          setShowConfirm(undefined)
+        },
+      })
+    }
+  }, [showConfirm, setShowConfirm, handleCommentDelete, t])
+
+  const handleCommentReplyDeleteClick = useCallback((commentId: string, replyId: string) => {
+    if (!showConfirm) {
+      setShowConfirm({
+        title: t('comments.confirm.deleteReplyTitle', { ns: 'workflow' }),
+        desc: t('comments.confirm.deleteReplyDesc', { ns: 'workflow' }),
+        onConfirm: async () => {
+          await handleCommentReplyDelete(commentId, replyId)
+          setShowConfirm(undefined)
+        },
+      })
+    }
+  }, [showConfirm, setShowConfirm, handleCommentReplyDelete, t])
+
   useEffect(() => {
     document.addEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)
     window.addEventListener('beforeunload', handleBeforeUnload)
@@ -293,9 +454,43 @@ export const Workflow: FC<WorkflowProps> = memo(({
           elementY: e.clientY - containerClientRect.top,
         },
       })
+      const target = e.target as HTMLElement
+      const onPane = !!target?.closest('.react-flow__pane')
+      setIsMouseOverCanvas(onPane)
     }
   })
 
+  // Prevent browser zoom interactions from hijacking gestures meant for the workflow canvas
+  useEffect(() => {
+    const preventBrowserZoom = (event: WheelEvent) => {
+      if (!isCommentPreviewHovering && !isCommentInputActive)
+        return
+
+      if (event.ctrlKey || event.metaKey)
+        event.preventDefault()
+    }
+
+    const preventGestureZoom = (event: Event) => {
+      if (!isCommentPreviewHovering && !isCommentInputActive)
+        return
+
+      event.preventDefault()
+    }
+
+    window.addEventListener('wheel', preventBrowserZoom, { passive: false })
+    const gestureEvents: Array<'gesturestart' | 'gesturechange' | 'gestureend'> = ['gesturestart', 'gesturechange', 'gestureend']
+    gestureEvents.forEach((eventName) => {
+      window.addEventListener(eventName, preventGestureZoom, { passive: false })
+    })
+
+    return () => {
+      window.removeEventListener('wheel', preventBrowserZoom)
+      gestureEvents.forEach((eventName) => {
+        window.removeEventListener(eventName, preventGestureZoom)
+      })
+    }
+  }, [isCommentPreviewHovering, isCommentInputActive])
+
   const {
     handleNodeDragStart,
     handleNodeDrag,
@@ -339,6 +534,8 @@ export const Workflow: FC<WorkflowProps> = memo(({
   // Initialize workflow node search functionality
   useWorkflowSearch()
 
+  useLeaderRestoreListener()
+
   // Set up scroll to node event listener using the utility function
   useEffect(() => {
     return setupScrollToNodeListener(nodes, reactflow)
@@ -393,7 +590,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
     <div
       id="workflow-container"
       className={cn(
-        'relative h-full w-full min-w-[960px]',
+        'relative h-full w-full min-w-[960px] overflow-hidden',
         workflowReadOnly && 'workflow-panel-animation',
         nodeAnimation && 'workflow-node-animation',
       )}
@@ -401,6 +598,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
     >
       <SyncingDataModal />
       <CandidateNode />
+      <CommentManager />
       <div
         className="pointer-events-none absolute top-0 left-0 z-10 flex w-12 items-center justify-center p-1 pl-2"
         style={{ height: controlHeight }}
@@ -433,12 +631,80 @@ export const Workflow: FC<WorkflowProps> = memo(({
           </AlertDialogActions>
         </AlertDialogContent>
       </AlertDialog>
+      {controlMode === ControlMode.Comment && isMouseOverCanvas && (
+        <CommentCursor />
+      )}
+      <CommentPlacementPreview
+        onSubmit={handleCommentSubmit}
+        onCancel={handleCommentPlacementCancel}
+      />
+      {pendingComment && (
+        <CommentInput
+          position={{
+            x: pendingComment.elementX,
+            y: pendingComment.elementY,
+          }}
+          onSubmit={handleCommentSubmit}
+          onCancel={handleCommentCancel}
+          onPositionChange={handlePendingCommentPositionChange}
+        />
+      )}
+      {visibleComments.map((comment, index) => {
+        const isActive = activeComment?.id === comment.id
+
+        if (isActive && activeComment) {
+          const canGoPrev = index > 0
+          const canGoNext = index < visibleComments.length - 1
+          return (
+            <Fragment key={comment.id}>
+              <CommentIcon
+                key={`${comment.id}-icon`}
+                comment={comment}
+                onClick={() => handleCommentIconClick(comment)}
+                isActive={true}
+                onPositionUpdate={position => handleCommentPositionUpdate(comment.id, position)}
+              />
+              <CommentThread
+                key={`${comment.id}-thread`}
+                comment={activeComment}
+                loading={activeCommentLoading}
+                replySubmitting={replySubmitting}
+                replyUpdating={replyUpdating}
+                onClose={handleActiveCommentClose}
+                onResolve={() => handleCommentResolve(comment.id)}
+                onDelete={() => handleCommentDeleteClick(comment.id)}
+                onCommentEdit={(content, ids) => handleCommentUpdate(comment.id, content, ids ?? [])}
+                onPrev={canGoPrev ? () => handleVisibleCommentNavigate('prev') : undefined}
+                onNext={canGoNext ? () => handleVisibleCommentNavigate('next') : undefined}
+                onReply={(content, ids) => handleCommentReply(comment.id, content, ids ?? [])}
+                onReplyEdit={(replyId, content, ids) => handleCommentReplyUpdate(comment.id, replyId, content, ids ?? [])}
+                onReplyDelete={replyId => handleCommentReplyDeleteClick(comment.id, replyId)}
+                onReplyDeleteDirect={replyId => handleCommentReplyDelete(comment.id, replyId)}
+                canGoPrev={canGoPrev}
+                canGoNext={canGoNext}
+              />
+            </Fragment>
+          )
+        }
+
+        return (showUserComments || controlMode === ControlMode.Comment)
+          ? (
+              <CommentIcon
+                key={comment.id}
+                comment={comment}
+                onClick={() => handleCommentIconClick(comment)}
+                onPositionUpdate={position => handleCommentPositionUpdate(comment.id, position)}
+              />
+            )
+          : null
+      })}
       {children}
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         nodes={nodes}
         edges={edges}
+        className={controlMode === ControlMode.Comment ? 'comment-mode-flow' : ''}
         onNodeDragStart={handleNodeDragStart}
         onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}
@@ -464,7 +730,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
         defaultViewport={viewport}
         multiSelectionKeyCode={null}
         deleteKeyCode={null}
-        nodesDraggable={!nodesReadOnly}
+        nodesDraggable={!nodesReadOnly && controlMode !== ControlMode.Comment}
         nodesConnectable={!nodesReadOnly}
         nodesFocusable={!nodesReadOnly}
         edgesFocusable={!nodesReadOnly}
@@ -485,6 +751,13 @@ export const Workflow: FC<WorkflowProps> = memo(({
           className="bg-workflow-canvas-workflow-bg"
           color="var(--color-workflow-canvas-workflow-dot-color)"
         />
+        {showUserCursors && cursors && (
+          <UserCursors
+            cursors={cursors}
+            myUserId={myUserId || null}
+            onlineUsers={onlineUsers || []}
+          />
+        )}
       </ReactFlow>
     </div>
   )
@@ -492,14 +765,25 @@ export const Workflow: FC<WorkflowProps> = memo(({
 
 type WorkflowWithInnerContextProps = WorkflowProps & {
   hooksStore?: Partial<HooksStoreShape>
+  cursors?: Record<string, CursorPosition>
+  myUserId?: string | null
+  onlineUsers?: OnlineUser[]
 }
 export const WorkflowWithInnerContext = memo(({
   hooksStore,
+  cursors,
+  myUserId,
+  onlineUsers,
   ...restProps
 }: WorkflowWithInnerContextProps) => {
   return (
     <HooksStoreContextProvider {...hooksStore}>
-      <Workflow {...restProps} />
+      <Workflow
+        {...restProps}
+        cursors={cursors}
+        myUserId={myUserId}
+        onlineUsers={onlineUsers}
+      />
     </HooksStoreContextProvider>
   )
 })
diff --git a/web/app/components/workflow/nodes/_base/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/_base/__tests__/node.spec.tsx
index a7f88e983e..e6ddbdc442 100644
--- a/web/app/components/workflow/nodes/_base/__tests__/node.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/__tests__/node.spec.tsx
@@ -10,12 +10,17 @@ const mockUseNodePluginInstallation = vi.fn()
 const mockHandleNodeIterationChildSizeChange = vi.fn()
 const mockHandleNodeLoopChildSizeChange = vi.fn()
 const mockUseNodeResizeObserver = vi.fn()
+const mockUseCollaboration = vi.fn()
 
 vi.mock('@/app/components/workflow/hooks', () => ({
   useNodesReadOnly: () => ({ nodesReadOnly: false }),
   useToolIcon: () => undefined,
 }))
 
+vi.mock('@/app/components/workflow/collaboration/hooks/use-collaboration', () => ({
+  useCollaboration: (...args: unknown[]) => mockUseCollaboration(...args),
+}))
+
 vi.mock('@/app/components/workflow/hooks/use-inspect-vars-crud', () => ({
   default: () => ({
     hasNodeInspectVars: mockHasNodeInspectVars,
@@ -98,6 +103,7 @@ describe('BaseNode', () => {
     vi.clearAllMocks()
     mockHasNodeInspectVars.mockReturnValue(false)
     mockUseNodeResizeObserver.mockReset()
+    mockUseCollaboration.mockReturnValue({ nodePanelPresence: {} })
     mockUseNodePluginInstallation.mockReturnValue({
       shouldDim: false,
       isChecking: false,
@@ -215,4 +221,32 @@ describe('BaseNode', () => {
     expect(mockHandleNodeLoopChildSizeChange).toHaveBeenCalledWith('node-2')
     expect(mockUseNodeResizeObserver).toHaveBeenCalledTimes(2)
   })
+
+  it('should keep viewer avatars outside the truncated title area', () => {
+    const longTitle = 'This is a very long node title that should truncate before it clips the viewer avatars'
+    mockUseCollaboration.mockReturnValue({
+      nodePanelPresence: {
+        'node-1': {
+          'client-1': {
+            userId: 'viewer-1',
+            username: 'Zed',
+            avatar: null,
+            clientId: 'client-1',
+            timestamp: Date.now(),
+          },
+        },
+      },
+    })
+
+    renderWorkflowComponent(
+      <BaseNode id="node-1" data={toNodeData(createData({ title: longTitle }))}>
+        <div>Body</div>
+      </BaseNode>,
+    )
+
+    const titleContainer = screen.getByTitle(longTitle)
+    expect(titleContainer).toHaveClass('min-w-0', 'grow', 'truncate')
+    expect(titleContainer?.nextElementSibling).toHaveClass('shrink-0')
+    expect(screen.getByText('Z')).toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.branches.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.branches.spec.tsx
index 49de788314..6ce294d7f3 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.branches.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.branches.spec.tsx
@@ -32,6 +32,18 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => mockTriggerDynamicOptionsState,
 }))
 
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useIsChatMode: () => false,
+  useWorkflow: () => ({
+    getTreeLeafNodes: () => [],
+    getNodeById: () => undefined,
+    getBeforeNodesInSameBranchIncludeParent: () => [],
+  }),
+  useWorkflowVariables: () => ({
+    getNodeAvailableVars: () => [],
+  }),
+}))
+
 vi.mock('@/app/components/plugins/plugin-detail-panel/app-selector', () => ({
   default: ({ onSelect }: { onSelect: (value: string) => void }) => (
     <button onClick={() => onSelect('app-1')}>app-selector</button>
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.spec.tsx
index 49fa4ea29f..b8ba298caf 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.spec.tsx
@@ -6,6 +6,18 @@ import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__
 import { VarKindType } from '../../types'
 import FormInputItem from '../form-input-item'
 
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useIsChatMode: () => false,
+  useWorkflow: () => ({
+    getTreeLeafNodes: () => [],
+    getNodeById: () => undefined,
+    getBeforeNodesInSameBranchIncludeParent: () => [],
+  }),
+  useWorkflowVariables: () => ({
+    getNodeAvailableVars: () => [],
+  }),
+}))
+
 const createSchema = (
   overrides: Partial<CredentialFormSchema & {
     _type?: FormTypeEnum
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts b/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts
index 86f07c8d1e..810d6bf0d4 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts
@@ -30,8 +30,15 @@ export const useDefaultValue = (
     const index = default_value.findIndex(form => form.key === key)
 
     if (index > -1) {
-      const newDefaultValue = [...default_value]
-      newDefaultValue[index].value = value
+      const newDefaultValue = default_value.map((form) => {
+        if (form.key !== key)
+          return form
+        // clone the entry so we do not mutate the original reference (which would block CRDT diffs)
+        return {
+          ...form,
+          value,
+        }
+      })
       handleNodeDataUpdateWithSyncDraft({
         id,
         data: {
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 467e326c66..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
@@ -1,6 +1,7 @@
 import {
   memo,
   useCallback,
+  useEffect,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -28,10 +29,29 @@ export const TitleInput = memo(({
     onBlur(localValue)
   }
 
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalValue(e.target.value)
+  }, [])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      ;(e.target as HTMLInputElement).blur()
+    }
+  }, [])
+
+  // Sync local state with incoming collaborative updates so remote title edits appear immediately.
+  useEffect(() => {
+    Promise.resolve().then(() => {
+      setLocalValue(value)
+    })
+  }, [value])
+
   return (
     <input
       value={localValue}
-      onChange={e => setLocalValue(e.target.value)}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
       className={`
         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
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/utils.spec.ts b/web/app/components/workflow/nodes/_base/components/variable/__tests__/utils.spec.ts
new file mode 100644
index 0000000000..010fad6afa
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/utils.spec.ts
@@ -0,0 +1,159 @@
+import type { AnswerNodeType } from '@/app/components/workflow/nodes/answer/types'
+import type { HumanInputNodeType } from '@/app/components/workflow/nodes/human-input/types'
+import type { LLMNodeType } from '@/app/components/workflow/nodes/llm/types'
+import type { Node, PromptItem } from '@/app/components/workflow/types'
+import { describe, expect, it } from 'vitest'
+import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/types'
+import { BlockEnum, EditionType, PromptRole } from '@/app/components/workflow/types'
+import { AppModeEnum } from '@/types/app'
+import { getNodeUsedVars, updateNodeVars } from '../utils'
+
+const createNode = <T>(data: Node<T>['data']): Node<T> => ({
+  id: 'node-1',
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data,
+})
+
+const createPromptItem = (overrides: Partial<PromptItem> = {}): PromptItem => ({
+  role: PromptRole.user,
+  text: '',
+  ...overrides,
+})
+
+const createLLMNodeData = (promptTemplate: PromptItem[]): LLMNodeType => ({
+  type: BlockEnum.LLM,
+  title: 'LLM',
+  desc: '',
+  model: {
+    provider: 'provider',
+    name: 'model',
+    mode: AppModeEnum.CHAT,
+    completion_params: {},
+  },
+  prompt_template: promptTemplate,
+  context: {
+    enabled: false,
+    variable_selector: [],
+  },
+  vision: {
+    enabled: false,
+  },
+})
+
+describe('variable utils', () => {
+  describe('getNodeUsedVars', () => {
+    it('should read variables from llm jinja prompt text', () => {
+      const node = createNode<LLMNodeType>(
+        createLLMNodeData([
+          createPromptItem({
+            edition_type: EditionType.jinja2,
+            jinja2_text: 'Hello {{#env.API_KEY#}}',
+          }),
+        ]),
+      )
+
+      expect(getNodeUsedVars(node)).toContainEqual(['env', 'API_KEY'])
+    })
+
+    it('should read variables from human input email body', () => {
+      const node = createNode<HumanInputNodeType>({
+        type: BlockEnum.HumanInput,
+        title: 'Human Input',
+        desc: '',
+        form_content: '',
+        inputs: [],
+        user_actions: [],
+        timeout: 1,
+        timeout_unit: 'day',
+        delivery_methods: [
+          {
+            id: 'email',
+            type: DeliveryMethodType.Email,
+            enabled: true,
+            config: {
+              recipients: { whole_workspace: true, items: [] },
+              subject: 'Subject {{#conversation.memory#}}',
+              body: 'Body {{#env.API_KEY#}}',
+              debug_mode: false,
+            },
+          },
+        ],
+      })
+
+      expect(getNodeUsedVars(node)).toEqual(
+        expect.arrayContaining([
+          ['env', 'API_KEY'],
+        ]),
+      )
+    })
+  })
+
+  describe('updateNodeVars', () => {
+    it('should replace answer prompt references', () => {
+      const node = createNode<AnswerNodeType>({
+        type: BlockEnum.Answer,
+        title: 'Answer',
+        desc: '',
+        answer: 'Answer {{#env.API_KEY#}}',
+        variables: [],
+      })
+
+      const updatedNode = updateNodeVars(node, ['env', 'API_KEY'], ['env', 'RENAMED_KEY'])
+
+      expect((updatedNode.data as AnswerNodeType).answer).toBe('Answer {{#env.RENAMED_KEY#}}')
+    })
+
+    it('should replace llm jinja prompt references', () => {
+      const node = createNode<LLMNodeType>(
+        createLLMNodeData([
+          createPromptItem({
+            text: '{{#env.API_KEY#}}',
+            edition_type: EditionType.jinja2,
+            jinja2_text: 'Hello {{#env.API_KEY#}}',
+          }),
+        ]),
+      )
+
+      const updatedNode = updateNodeVars(node, ['env', 'API_KEY'], ['env', 'RENAMED_KEY'])
+
+      expect(((updatedNode.data as LLMNodeType).prompt_template as PromptItem[])[0]).toMatchObject({
+        text: '{{#env.RENAMED_KEY#}}',
+        jinja2_text: 'Hello {{#env.RENAMED_KEY#}}',
+      })
+    })
+
+    it('should replace human input email template references', () => {
+      const node = createNode<HumanInputNodeType>({
+        type: BlockEnum.HumanInput,
+        title: 'Human Input',
+        desc: '',
+        form_content: '',
+        inputs: [],
+        user_actions: [],
+        timeout: 1,
+        timeout_unit: 'day',
+        delivery_methods: [
+          {
+            id: 'email',
+            type: DeliveryMethodType.Email,
+            enabled: true,
+            config: {
+              recipients: { whole_workspace: true, items: [] },
+              subject: 'Subject {{#conversation.memory#}}',
+              body: 'Body {{#env.API_KEY#}}',
+              debug_mode: false,
+            },
+          },
+        ],
+      })
+
+      const updatedNode = updateNodeVars(node, ['env', 'API_KEY'], ['env', 'RENAMED_KEY'])
+
+      expect((updatedNode.data as HumanInputNodeType).delivery_methods[0]?.config).toMatchObject({
+        subject: 'Subject {{#conversation.memory#}}',
+        body: 'Body {{#env.RENAMED_KEY#}}',
+      })
+    })
+  })
+})
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx
index 6f35e5cae7..2844f683c0 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx
@@ -20,6 +20,19 @@ vi.mock('@/service/use-plugins', () => ({
   }),
 }))
 
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useIsChatMode: () => false,
+  useWorkflow: () => ({
+    getTreeLeafNodes: () => [],
+    getNodeById: () => undefined,
+    getBeforeNodesInSameBranchIncludeParent: () => [],
+  }),
+  useWorkflowVariables: () => ({
+    getNodeAvailableVars: () => [],
+    getCurrentVariableType: () => undefined,
+  }),
+}))
+
 vi.mock('../var-reference-popup', () => ({
   default: ({
     onChange,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx
index f6f18ca5cf..b915201ca4 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx
@@ -6,6 +6,19 @@ import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__
 import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
 import VarReferencePicker from '../var-reference-picker'
 
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useIsChatMode: () => false,
+  useWorkflow: () => ({
+    getTreeLeafNodes: () => [],
+    getNodeById: () => undefined,
+    getBeforeNodesInSameBranchIncludeParent: () => [],
+  }),
+  useWorkflowVariables: () => ({
+    getNodeAvailableVars: () => [],
+    getCurrentVariableType: () => undefined,
+  }),
+}))
+
 describe('VarReferencePicker', () => {
   const startNode = createStartNode({
     id: 'start-node',
diff --git a/web/app/components/workflow/nodes/_base/components/variable/utils.ts b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
index d476a21568..c131427648 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/utils.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
@@ -27,11 +27,11 @@ import type {
   EnvironmentVariable,
   Node,
   NodeOutPutVar,
+  PromptItem,
   ToolWithProvider,
   ValueSelector,
   Var,
 } from '@/app/components/workflow/types'
-import type { PromptItem } from '@/models/debug'
 import type { RAGPipelineVariable } from '@/models/pipeline'
 import type { SchemaTypeDefinition } from '@/service/use-common'
 import { uniq } from 'es-toolkit/array'
@@ -53,6 +53,7 @@ import {
 } from '@/app/components/workflow/constants'
 import DataSourceNodeDefault from '@/app/components/workflow/nodes/data-source/default'
 import HumanInputNodeDefault from '@/app/components/workflow/nodes/human-input/default'
+import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/types'
 import ToolNodeDefault from '@/app/components/workflow/nodes/tool/default'
 import PluginTriggerNodeDefault from '@/app/components/workflow/nodes/trigger-plugin/default'
 import {
@@ -1310,6 +1311,25 @@ const replaceOldVarInText = (
   )
 }
 
+const getPromptItemTexts = (prompt: PromptItem): string[] => {
+  const texts = [prompt.text]
+  if (prompt.jinja2_text)
+    texts.push(prompt.jinja2_text)
+  return texts.filter((text): text is string => !!text)
+}
+
+const replaceOldVarInPromptItem = (
+  prompt: PromptItem,
+  oldVar: ValueSelector,
+  newVar: ValueSelector,
+): PromptItem => ({
+  ...prompt,
+  text: replaceOldVarInText(prompt.text, oldVar, newVar),
+  ...(prompt.jinja2_text !== undefined
+    ? { jinja2_text: replaceOldVarInText(prompt.jinja2_text, oldVar, newVar) }
+    : {}),
+})
+
 export const getNodeUsedVars = (node: Node): ValueSelector[] => {
   const { data } = node
   const { type } = data
@@ -1331,12 +1351,12 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => {
       let prompts: string[] = []
       if (isChatModel) {
         prompts
-          = (payload.prompt_template as PromptItem[])?.map(p => p.text) || []
+          = (payload.prompt_template as PromptItem[])?.flatMap(getPromptItemTexts) || []
         if (payload.memory?.query_prompt_template)
           prompts.push(payload.memory.query_prompt_template)
       }
       else {
-        prompts = [(payload.prompt_template as PromptItem).text]
+        prompts = getPromptItemTexts(payload.prompt_template as PromptItem)
       }
 
       const inputVars: ValueSelector[] = matchNotSystemVars(prompts)
@@ -1505,7 +1525,12 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => {
     case BlockEnum.HumanInput: {
       const payload = data as HumanInputNodeType
       const formContent = payload.form_content
-      res = matchNotSystemVars([formContent])
+      const mailTemplates = payload.delivery_methods.flatMap((method) => {
+        if (method.type !== DeliveryMethodType.Email || !method.config)
+          return []
+        return [method.config.body]
+      })
+      res = matchNotSystemVars([formContent, ...mailTemplates])
       break
     }
   }
@@ -1651,6 +1676,11 @@ export const updateNodeVars = (
       }
       case BlockEnum.Answer: {
         const payload = data as AnswerNodeType
+        payload.answer = replaceOldVarInText(
+          payload.answer,
+          oldVarSelector,
+          newVarSelector,
+        )
         if (payload.variables) {
           payload.variables = payload.variables.map((v) => {
             if (v.value_selector.join('.') === oldVarSelector.join('.'))
@@ -1666,16 +1696,7 @@ export const updateNodeVars = (
         if (isChatModel) {
           payload.prompt_template = (
             payload.prompt_template as PromptItem[]
-          ).map((prompt) => {
-            return {
-              ...prompt,
-              text: replaceOldVarInText(
-                prompt.text,
-                oldVarSelector,
-                newVarSelector,
-              ),
-            }
-          })
+          ).map(prompt => replaceOldVarInPromptItem(prompt, oldVarSelector, newVarSelector))
           if (payload.memory?.query_prompt_template) {
             payload.memory.query_prompt_template = replaceOldVarInText(
               payload.memory.query_prompt_template,
@@ -1685,14 +1706,11 @@ export const updateNodeVars = (
           }
         }
         else {
-          payload.prompt_template = {
-            ...payload.prompt_template,
-            text: replaceOldVarInText(
-              (payload.prompt_template as PromptItem).text,
-              oldVarSelector,
-              newVarSelector,
-            ),
-          }
+          payload.prompt_template = replaceOldVarInPromptItem(
+            payload.prompt_template as PromptItem,
+            oldVarSelector,
+            newVarSelector,
+          )
         }
         if (
           payload.context?.variable_selector?.join('.')
@@ -1780,6 +1798,10 @@ export const updateNodeVars = (
           oldVarSelector,
           newVarSelector,
         )
+        payload.classes = payload.classes.map(topic => ({
+          ...topic,
+          name: replaceOldVarInText(topic.name, oldVarSelector, newVarSelector),
+        }))
         break
       }
       case BlockEnum.HttpRequest: {
@@ -1889,6 +1911,46 @@ export const updateNodeVars = (
         }
         break
       }
+      case BlockEnum.Agent: {
+        const payload = data as AgentNodeType
+        if (payload.agent_parameters) {
+          Object.keys(payload.agent_parameters).forEach((key) => {
+            const value = payload.agent_parameters![key]
+            const { type } = value
+
+            if (
+              type === ToolVarType.variable
+              && Array.isArray(value.value)
+              && value.value.join('.') === oldVarSelector.join('.')
+            ) {
+              payload.agent_parameters![key] = {
+                ...value,
+                value: newVarSelector,
+              }
+            }
+
+            if (type === ToolVarType.mixed && typeof value.value === 'string') {
+              payload.agent_parameters![key] = {
+                ...value,
+                value: replaceOldVarInText(
+                  value.value,
+                  oldVarSelector,
+                  newVarSelector,
+                ),
+              }
+            }
+          })
+        }
+
+        if (payload.memory?.query_prompt_template) {
+          payload.memory.query_prompt_template = replaceOldVarInText(
+            payload.memory.query_prompt_template,
+            oldVarSelector,
+            newVarSelector,
+          )
+        }
+        break
+      }
       case BlockEnum.VariableAssigner: {
         const payload = data as VariableAssignerNodeType
         if (payload.variables) {
@@ -1954,6 +2016,22 @@ export const updateNodeVars = (
           oldVarSelector,
           newVarSelector,
         )
+        payload.delivery_methods = payload.delivery_methods.map((method) => {
+          if (method.type !== DeliveryMethodType.Email || !method.config)
+            return method
+
+          return {
+            ...method,
+            config: {
+              ...method.config,
+              body: replaceOldVarInText(
+                method.config.body,
+                oldVarSelector,
+                newVarSelector,
+              ),
+            },
+          }
+        })
         break
       }
     }
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 3179d7a981..4a1019954d 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -22,6 +22,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import {
@@ -34,6 +35,8 @@ import {
 import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/store'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import BlockIcon from '@/app/components/workflow/block-icon'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
 import {
   useAvailableBlocks,
   useNodeDataUpdate,
@@ -57,6 +60,7 @@ import {
   hasRetryNode,
   isSupportCustomRunForm,
 } from '@/app/components/workflow/utils'
+import { useAppContext } from '@/context/app-context'
 import { useModalContext } from '@/context/modal-context'
 import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
@@ -97,11 +101,51 @@ const BasePanel: FC<BasePanelProps> = ({
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
+  const appId = useStore(s => s.appId)
+  const { userProfile } = useAppContext()
+  const { isConnected, nodePanelPresence } = useCollaboration(appId as string)
   const { showMessageLogModal } = useAppStore(useShallow(state => ({
     showMessageLogModal: state.showMessageLogModal,
   })))
   const isSingleRunning = data._singleRunningStatus === NodeRunningStatus.Running
 
+  const currentUserPresence = useMemo(() => {
+    const userId = userProfile?.id || ''
+    const username = userProfile?.name || userProfile?.email || 'User'
+    const avatar = userProfile?.avatar_url || userProfile?.avatar || null
+
+    return {
+      userId,
+      username,
+      avatar,
+    }
+  }, [userProfile?.avatar, userProfile?.avatar_url, userProfile?.email, userProfile?.id, userProfile?.name])
+
+  useEffect(() => {
+    if (!isConnected || !currentUserPresence.userId)
+      return
+
+    collaborationManager.emitNodePanelPresence(id, true, currentUserPresence)
+
+    return () => {
+      collaborationManager.emitNodePanelPresence(id, false, currentUserPresence)
+    }
+  }, [id, isConnected, currentUserPresence])
+
+  const viewingUsers = useMemo(() => {
+    const presence = nodePanelPresence?.[id]
+    if (!presence)
+      return []
+
+    return Object.values(presence)
+      .filter(viewer => viewer.userId && viewer.userId !== currentUserPresence.userId)
+      .map(viewer => ({
+        id: viewer.userId,
+        name: viewer.username,
+        avatar_url: viewer.avatar || null,
+      }))
+  }, [currentUserPresence.userId, id, nodePanelPresence])
+
   const showSingleRunPanel = useStore(s => s.showSingleRunPanel)
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const nodePanelWidth = useStore(s => s.nodePanelWidth)
@@ -460,6 +504,15 @@ const BasePanel: FC<BasePanelProps> = ({
               value={data.title || ''}
               onBlur={handleTitleBlur}
             />
+            {viewingUsers.length > 0 && (
+              <div className="ml-3 shrink-0">
+                <UserAvatarList
+                  users={viewingUsers}
+                  maxVisible={3}
+                  size="sm"
+                />
+              </div>
+            )}
             <div className="flex shrink-0 items-center text-text-tertiary">
               {
                 isSupportSingleRun && !nodesReadOnly && (
diff --git a/web/app/components/workflow/nodes/_base/hooks/__tests__/use-node-crud.spec.ts b/web/app/components/workflow/nodes/_base/hooks/__tests__/use-node-crud.spec.ts
new file mode 100644
index 0000000000..1ad0c38e8a
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/hooks/__tests__/use-node-crud.spec.ts
@@ -0,0 +1,87 @@
+import type { CommonNodeType } from '@/app/components/workflow/types'
+import { renderHook } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import useNodeCrud from '../use-node-crud'
+
+const mockHandleNodeDataUpdateWithSyncDraft = vi.hoisted(() => ({
+  current: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodeDataUpdate: () => ({
+    handleNodeDataUpdateWithSyncDraft: mockHandleNodeDataUpdateWithSyncDraft.current,
+  }),
+}))
+
+type TestNodeData = CommonNodeType<{
+  value: string
+}>
+
+const createData = (value = 'initial'): TestNodeData => ({
+  type: BlockEnum.LLM,
+  title: 'Test Node',
+  desc: '',
+  value,
+})
+
+describe('useNodeCrud', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockHandleNodeDataUpdateWithSyncDraft.current = vi.fn()
+  })
+
+  it('keeps setInputs stable across rerenders when id does not change', () => {
+    const { result, rerender } = renderHook(
+      ({ id, data }) => useNodeCrud(id, data),
+      {
+        initialProps: {
+          id: 'node-1',
+          data: createData(),
+        },
+      },
+    )
+
+    const firstSetInputs = result.current.setInputs
+
+    rerender({
+      id: 'node-1',
+      data: createData('updated'),
+    })
+
+    expect(result.current.setInputs).toBe(firstSetInputs)
+  })
+
+  it('forwards node data updates with the current node id and latest updater', () => {
+    const { result, rerender } = renderHook(
+      ({ id, data }) => useNodeCrud(id, data),
+      {
+        initialProps: {
+          id: 'node-1',
+          data: createData(),
+        },
+      },
+    )
+
+    result.current.setInputs(createData('changed'))
+
+    expect(mockHandleNodeDataUpdateWithSyncDraft.current).toHaveBeenCalledWith({
+      id: 'node-1',
+      data: createData('changed'),
+    })
+
+    const nextUpdater = vi.fn()
+    mockHandleNodeDataUpdateWithSyncDraft.current = nextUpdater
+
+    rerender({
+      id: 'node-1',
+      data: createData('changed'),
+    })
+
+    result.current.setInputs(createData('latest'))
+
+    expect(nextUpdater).toHaveBeenCalledWith({
+      id: 'node-1',
+      data: createData('latest'),
+    })
+  })
+})
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-node-crud.ts b/web/app/components/workflow/nodes/_base/hooks/use-node-crud.ts
index d1741f0bbb..fad9aa9c5e 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-node-crud.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-node-crud.ts
@@ -1,15 +1,21 @@
 import type { CommonNodeType } from '@/app/components/workflow/types'
+import { useCallback, useEffect, useRef } from 'react'
 import { useNodeDataUpdate } from '@/app/components/workflow/hooks'
 
 const useNodeCrud = <T>(id: string, data: CommonNodeType<T>) => {
   const { handleNodeDataUpdateWithSyncDraft } = useNodeDataUpdate()
+  const updateRef = useRef(handleNodeDataUpdateWithSyncDraft)
 
-  const setInputs = (newInputs: CommonNodeType<T>) => {
-    handleNodeDataUpdateWithSyncDraft({
+  useEffect(() => {
+    updateRef.current = handleNodeDataUpdateWithSyncDraft
+  }, [handleNodeDataUpdateWithSyncDraft])
+
+  const setInputs = useCallback((newInputs: CommonNodeType<T>) => {
+    updateRef.current({
       id,
       data: newInputs,
     })
-  }
+  }, [id])
 
   return {
     inputs: data,
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 0c38cd716e..ed83c58b6e 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -11,19 +11,24 @@ import {
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { ToolTypeEnum } from '@/app/components/workflow/block-selector/types'
+import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
 import { useNodesReadOnly, useToolIcon } from '@/app/components/workflow/hooks'
 import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
 import { useNodePluginInstallation } from '@/app/components/workflow/hooks/use-node-plugin-installation'
 import { useNodeIterationInteractions } from '@/app/components/workflow/nodes/iteration/use-interactions'
 import { useNodeLoopInteractions } from '@/app/components/workflow/nodes/loop/use-interactions'
 import CopyID from '@/app/components/workflow/nodes/tool/components/copy-id'
+import { useStore } from '@/app/components/workflow/store'
 import {
   BlockEnum,
+  ControlMode,
   NodeRunningStatus,
 } from '@/app/components/workflow/types'
 import { hasErrorHandleNode, hasRetryNode } from '@/app/components/workflow/utils'
+import { useAppContext } from '@/context/app-context'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
 import EntryNodeContainer, { StartNodeTypeEnum } from './components/entry-node-container'
 import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
@@ -70,6 +75,36 @@ const BaseNode: FC<BaseNodeProps> = ({
   const { handleNodeIterationChildSizeChange } = useNodeIterationInteractions()
   const { handleNodeLoopChildSizeChange } = useNodeLoopInteractions()
   const toolIcon = useToolIcon(data)
+  const { userProfile } = useAppContext()
+  const appId = useStore(s => s.appId)
+  const { nodePanelPresence } = useCollaboration(appId as string)
+  const controlMode = useStore(s => s.controlMode)
+
+  const currentUserPresence = useMemo(() => {
+    const userId = userProfile?.id || ''
+    const username = userProfile?.name || userProfile?.email || 'User'
+    const avatar = userProfile?.avatar_url || userProfile?.avatar || null
+
+    return {
+      userId,
+      username,
+      avatar,
+    }
+  }, [userProfile?.avatar, userProfile?.avatar_url, userProfile?.email, userProfile?.id, userProfile?.name])
+
+  const viewingUsers = useMemo(() => {
+    const presence = nodePanelPresence?.[id]
+    if (!presence)
+      return []
+
+    return Object.values(presence)
+      .filter(viewer => viewer.userId && viewer.userId !== currentUserPresence.userId)
+      .map(viewer => ({
+        id: viewer.userId,
+        name: viewer.username,
+        avatar_url: viewer.avatar || null,
+      }))
+  }, [currentUserPresence.userId, id, nodePanelPresence])
   const { shouldDim: pluginDimmed, isChecking: pluginIsChecking, isMissing: pluginIsMissing, canInstall: pluginCanInstall, uniqueIdentifier: pluginUniqueIdentifier } = useNodePluginInstallation(data)
   const pluginInstallLocked = !pluginIsChecking && pluginIsMissing && pluginCanInstall && Boolean(pluginUniqueIdentifier)
 
@@ -157,6 +192,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         className={cn(
           'group relative pb-1 shadow-xs',
           'rounded-[15px] border border-transparent',
+          (controlMode === ControlMode.Comment) && 'hover:cursor-none',
           !isContainerNode(data.type) && 'w-[240px] bg-workflow-block-bg',
           isContainerNode(data.type) && 'flex h-full w-full flex-col border-workflow-block-border bg-workflow-block-bg-transparent',
           !data._runningStatus && 'hover:shadow-lg',
@@ -232,12 +268,20 @@ const BaseNode: FC<BaseNodeProps> = ({
             toolIcon={toolIcon}
           />
           <div
-            title={data.title}
-            className="mr-1 flex grow items-center truncate system-sm-semibold-uppercase text-text-primary"
+            className="mr-1 flex min-w-0 grow items-center system-sm-semibold-uppercase text-text-primary"
           >
-            <div>
+            <div title={data.title} className="min-w-0 grow truncate">
               {data.title}
             </div>
+            {viewingUsers.length > 0 && (
+              <div className="ml-3 shrink-0">
+                <UserAvatarList
+                  users={viewingUsers}
+                  maxVisible={3}
+                  size="sm"
+                />
+              </div>
+            )}
           </div>
           <NodeHeaderMeta
             data={data}
diff --git a/web/app/components/workflow/nodes/assigner/__tests__/use-config.helpers.spec.ts b/web/app/components/workflow/nodes/assigner/__tests__/use-config.helpers.spec.ts
index 427fcd32c8..1a2beeff5b 100644
--- a/web/app/components/workflow/nodes/assigner/__tests__/use-config.helpers.spec.ts
+++ b/web/app/components/workflow/nodes/assigner/__tests__/use-config.helpers.spec.ts
@@ -65,4 +65,20 @@ describe('assigner use-config helpers', () => {
     expect(updateOperationItems(legacyInputs, nextItems).items).toEqual(nextItems)
     expect(legacyInputs.items).toHaveLength(1)
   })
+
+  it('sanitizes variable-selector items restored from collaboration payloads', () => {
+    const dirtyItems = [{
+      variable_selector: null as unknown as AssignerNodeType['items'][number]['variable_selector'],
+      input_type: AssignerNodeInputType.variable,
+      operation: WriteMode.overwrite,
+      value: null,
+    }]
+
+    expect(updateOperationItems(createInputs('2'), dirtyItems).items).toEqual([{
+      variable_selector: [],
+      input_type: AssignerNodeInputType.variable,
+      operation: WriteMode.overwrite,
+      value: [],
+    }])
+  })
 })
diff --git a/web/app/components/workflow/nodes/assigner/__tests__/use-config.spec.tsx b/web/app/components/workflow/nodes/assigner/__tests__/use-config.spec.tsx
index 60bd1dd0f7..b24473bbd9 100644
--- a/web/app/components/workflow/nodes/assigner/__tests__/use-config.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/__tests__/use-config.spec.tsx
@@ -95,4 +95,24 @@ describe('useConfig', () => {
     expect(result.current.filterToAssignedVar({ type: VarType.string } as never, VarType.arrayString, WriteMode.append)).toBe(true)
     expect(result.current.filterToAssignedVar({ type: VarType.number } as never, VarType.arrayString, WriteMode.append)).toBe(false)
   })
+
+  it('should normalize collaboration-restored null selectors before exposing inputs', () => {
+    const dirtyPayload = createPayload({
+      version: '2',
+      items: [createOperation({
+        variable_selector: null as unknown as AssignerNodeOperation['variable_selector'],
+        input_type: AssignerNodeInputType.variable,
+        value: null,
+      })],
+    })
+
+    const { result } = renderHook(() => useConfig('assigner-node', dirtyPayload))
+
+    expect(result.current.inputs.items).toEqual([expect.objectContaining({
+      variable_selector: [],
+      input_type: AssignerNodeInputType.variable,
+      operation: WriteMode.overwrite,
+      value: [],
+    })])
+  })
 })
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx
index f7408ab814..37d2de8d80 100644
--- a/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx
@@ -7,6 +7,19 @@ import { BlockEnum, VarType } from '@/app/components/workflow/types'
 import { AssignerNodeInputType, WriteMode } from '../../../types'
 import VarList from '../index'
 
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useIsChatMode: () => false,
+  useWorkflow: () => ({
+    getTreeLeafNodes: () => [],
+    getNodeById: () => undefined,
+    getBeforeNodesInSameBranchIncludeParent: () => [],
+  }),
+  useWorkflowVariables: () => ({
+    getNodeAvailableVars: () => [],
+    getCurrentVariableType: () => undefined,
+  }),
+}))
+
 const sourceNode = createNode({
   id: 'node-a',
   data: {
diff --git a/web/app/components/workflow/nodes/assigner/use-config.helpers.ts b/web/app/components/workflow/nodes/assigner/use-config.helpers.ts
index 1bd3ac6d35..ef8ad5520c 100644
--- a/web/app/components/workflow/nodes/assigner/use-config.helpers.ts
+++ b/web/app/components/workflow/nodes/assigner/use-config.helpers.ts
@@ -3,6 +3,7 @@ import type { AssignerNodeOperation, AssignerNodeType } from './types'
 import { produce } from 'immer'
 import { VarType } from '../../types'
 import { WriteMode } from './types'
+import { normalizeOperationItems } from './utils'
 
 export const filterVarByType = (varType: VarType) => {
   return (variable: Var) => {
@@ -86,5 +87,5 @@ export const updateOperationItems = (
   inputs: AssignerNodeType,
   items: AssignerNodeOperation[],
 ) => produce(inputs, (draft) => {
-  draft.items = [...items]
+  draft.items = normalizeOperationItems(items)
 })
diff --git a/web/app/components/workflow/nodes/assigner/utils.ts b/web/app/components/workflow/nodes/assigner/utils.ts
index 0702a15409..f891504258 100644
--- a/web/app/components/workflow/nodes/assigner/utils.ts
+++ b/web/app/components/workflow/nodes/assigner/utils.ts
@@ -1,4 +1,4 @@
-import type { AssignerNodeType } from './types'
+import type { AssignerNodeOperation, AssignerNodeType } from './types'
 import type { I18nKeysByPrefix } from '@/types/i18n'
 import { AssignerNodeInputType, WriteMode } from './types'
 
@@ -62,18 +62,49 @@ const convertOldWriteMode = (oldMode: string): WriteMode => {
   }
 }
 
+const normalizeVariableSelector = (value: unknown) => {
+  return Array.isArray(value) ? value : []
+}
+
+export const normalizeOperationItems = (items: unknown): AssignerNodeOperation[] => {
+  if (!Array.isArray(items))
+    return []
+
+  return items.map((item) => {
+    const operationItem = (item || {}) as Partial<AssignerNodeOperation>
+    const inputType = operationItem.input_type === AssignerNodeInputType.constant
+      ? AssignerNodeInputType.constant
+      : AssignerNodeInputType.variable
+
+    return {
+      variable_selector: normalizeVariableSelector(operationItem.variable_selector),
+      input_type: inputType,
+      operation: Object.values(WriteMode).includes(operationItem.operation as WriteMode)
+        ? operationItem.operation as WriteMode
+        : WriteMode.overwrite,
+      value: inputType === AssignerNodeInputType.variable
+        ? normalizeVariableSelector(operationItem.value)
+        : operationItem.value,
+    }
+  })
+}
+
 export const convertV1ToV2 = (payload: any): AssignerNodeType => {
-  if (payload.version === '2' && payload.items)
-    return payload as AssignerNodeType
+  if (payload.version === '2' && payload.items) {
+    return {
+      ...payload,
+      items: normalizeOperationItems(payload.items),
+    } as AssignerNodeType
+  }
 
   return {
+    ...payload,
     version: '2',
-    items: [{
+    items: normalizeOperationItems([{
       variable_selector: payload.assigned_variable_selector || [],
       input_type: AssignerNodeInputType.variable,
       operation: convertOldWriteMode(payload.write_mode),
       value: payload.input_variable_selector || [],
-    }],
-    ...payload,
+    }]),
   }
 }
diff --git a/web/app/components/workflow/nodes/data-source-empty/hooks.ts b/web/app/components/workflow/nodes/data-source-empty/hooks.ts
index 93191b0261..b3c33d699e 100644
--- a/web/app/components/workflow/nodes/data-source-empty/hooks.ts
+++ b/web/app/components/workflow/nodes/data-source-empty/hooks.ts
@@ -1,12 +1,12 @@
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { produce } from 'immer'
 import { useCallback } from 'react'
-import { useStoreApi } from 'reactflow'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { generateNewNode } from '@/app/components/workflow/utils'
 
 export const useReplaceDataSourceNode = (id: string) => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
   const handleReplaceNode = useCallback<OnSelectBlock>((
@@ -14,17 +14,17 @@ export const useReplaceDataSourceNode = (id: string) => {
     pluginDefaultValue,
   ) => {
     const {
-      getNodes,
+      nodes,
       setNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    } = collaborativeWorkflow.getState()
     const emptyNodeIndex = nodes.findIndex(node => node.id === id)
 
     if (emptyNodeIndex < 0)
       return
-    const {
-      defaultValue,
-    } = nodesMetaDataMap![type]
+    const nodeMetaData = nodesMetaDataMap?.[type]
+    if (!nodeMetaData)
+      return
+    const { defaultValue } = nodeMetaData
     const emptyNode = nodes[emptyNodeIndex]
     const { newNode } = generateNewNode({
       data: {
@@ -43,7 +43,7 @@ export const useReplaceDataSourceNode = (id: string) => {
       return draft.filter(node => !node.data._isTempNode)
     })
     setNodes(newNodesWithoutTempNodes)
-  }, [])
+  }, [collaborativeWorkflow, id, nodesMetaDataMap])
 
   return {
     handleReplaceNode,
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
index 650ae47156..f48738b059 100644
--- a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -15,30 +15,50 @@ const strToKeyValueList = (value: string) => {
   })
 }
 
+const normalizeList = (items: KeyValue[]) => {
+  return items.map(item => ({
+    ...item,
+    id: item.id || uniqueId(UNIQUE_ID_PREFIX),
+  }))
+}
+
+const stringifyList = (items: KeyValue[], noFilter?: boolean) => {
+  const source = noFilter ? items : items.filter(item => item.key && item.value)
+  return source.map(item => `${item.key}:${item.value}`).join('\n')
+}
+
 const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
   const [list, doSetList] = useState<KeyValue[]>(() => value ? strToKeyValueList(value) : [])
-  const setList = (l: KeyValue[]) => {
-    doSetList(l.map((item) => {
-      return {
-        ...item,
-        id: item.id || uniqueId(UNIQUE_ID_PREFIX),
-      }
-    }))
-  }
-  useEffect(() => {
+  const setList = useCallback((nextList: KeyValue[]) => {
+    const normalized = normalizeList(nextList)
+    doSetList(normalized)
     if (noFilter)
       return
-    const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}:${item.value}`).join('\n')
+
+    const newValue = stringifyList(normalized, noFilter)
     if (newValue !== value)
       onChange(newValue)
-  }, [list, noFilter])
+  }, [noFilter, onChange, value])
+
+  useEffect(() => {
+    Promise.resolve().then(() => {
+      doSetList((prev) => {
+        const targetItems = value ? strToKeyValueList(value) : []
+        const currentValue = stringifyList(prev, noFilter)
+        const targetValue = stringifyList(targetItems, noFilter)
+        if (currentValue === targetValue)
+          return prev
+        return normalizeList(targetItems)
+      })
+    })
+  }, [value, noFilter])
   const addItem = useCallback(() => {
     setList([...list, {
       id: uniqueId(UNIQUE_ID_PREFIX),
       key: '',
       value: '',
     }])
-  }, [list])
+  }, [list, setList])
 
   const [isKeyValueEdit, {
     toggle: toggleIsKeyValueEdit,
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 9524ee62fe..ad9cb3b0fe 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -57,7 +57,7 @@ const Node: FC<NodeProps<IterationNodeType>> = ({
         )
       }
       {
-        data._children!.length === 1 && (
+        data._children?.length === 1 && (
           <AddBlock
             iterationNodeId={id}
             iterationNodeData={data}
diff --git a/web/app/components/workflow/nodes/iteration/use-interactions.ts b/web/app/components/workflow/nodes/iteration/use-interactions.ts
index 1f1954a112..bc89040865 100644
--- a/web/app/components/workflow/nodes/iteration/use-interactions.ts
+++ b/web/app/components/workflow/nodes/iteration/use-interactions.ts
@@ -6,8 +6,8 @@ import type {
 import { produce } from 'immer'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStoreApi } from 'reactflow'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import {
   generateNewNode,
   getNodeCustomTypeByNodeDataType,
@@ -23,16 +23,12 @@ import {
 
 export const useNodeIterationInteractions = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleNodeIterationRerender = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
 
-    const nodes = getNodes()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const childrenNodes = nodes.filter(n => n.parentId === nodeId)
     const resize = getIterationContainerResize(currentNode, getIterationContainerBounds(childrenNodes))
@@ -55,30 +51,27 @@ export const useNodeIterationInteractions = () => {
 
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeIterationChildDrag = useCallback((node: Node) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return {
       restrictPosition: getRestrictedIterationPosition(node, nodes.find(n => n.id === node.parentId)),
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeIterationChildSizeChange = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const parentId = currentNode.parentId
 
     if (parentId)
       handleNodeIterationRerender(parentId)
-  }, [store, handleNodeIterationRerender])
+  }, [collaborativeWorkflow, handleNodeIterationRerender])
 
   const handleNodeIterationChildrenCopy = useCallback((nodeId: string, newNodeId: string, idMapping: Record<string, string>) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const childrenNodes = getIterationChildren(nodes, nodeId)
     const newIdMapping = { ...idMapping }
     const childNodeTypeCount: ChildNodeTypeCount = {}
@@ -110,7 +103,7 @@ export const useNodeIterationInteractions = () => {
       copyChildren,
       newIdMapping,
     }
-  }, [nodesMetaDataMap, store, t])
+  }, [nodesMetaDataMap, collaborativeWorkflow, t])
 
   return {
     handleNodeIterationRerender,
diff --git a/web/app/components/workflow/nodes/llm/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/llm/__tests__/panel.spec.tsx
index 42eff04e68..af4803a1a1 100644
--- a/web/app/components/workflow/nodes/llm/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/llm/__tests__/panel.spec.tsx
@@ -26,10 +26,30 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-param
   default: () => <div data-testid="model-parameter-modal" />,
 }))
 
+vi.mock('../_base/components/config-vision', () => ({
+  default: () => null,
+}))
+
 vi.mock('../../_base/components/variable/var-reference-picker', () => ({
   default: () => null,
 }))
 
+vi.mock('../components/config-prompt', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/panel-memory-section', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/panel-output-section', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/reasoning-format-config', () => ({
+  default: () => null,
+}))
+
 type MockUseConfigReturn = ReturnType<typeof mockUseConfig>
 
 const createMockModelProvider = (provider: string): ModelProvider => ({
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
index 548f873164..df913e6d2c 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
@@ -41,6 +41,9 @@ const FormItem = ({
 }: FormItemProps) => {
   const { t } = useTranslation()
   const { value_type, var_type, value } = item
+  const normalizedVarValue = useMemo(() => {
+    return Array.isArray(value) ? value : []
+  }, [value])
 
   const handleInputChange = useCallback((e: any) => {
     onChange(e.target.value)
@@ -79,7 +82,7 @@ const FormItem = ({
             readonly={false}
             nodeId={nodeId}
             isShowNodeName
-            value={value}
+            value={normalizedVarValue}
             onChange={handleChange}
             filterVar={filterVar}
             placeholder={t('nodes.assigner.setParameter', { ns: 'workflow' }) as string}
diff --git a/web/app/components/workflow/nodes/loop/node.tsx b/web/app/components/workflow/nodes/loop/node.tsx
index ee63696f51..ab47c11892 100644
--- a/web/app/components/workflow/nodes/loop/node.tsx
+++ b/web/app/components/workflow/nodes/loop/node.tsx
@@ -47,7 +47,7 @@ const Node: FC<NodeProps<LoopNodeType>> = ({
         )
       }
       {
-        data._children!.length === 1 && (
+        data._children?.length === 1 && (
           <AddBlock
             loopNodeId={id}
             loopNodeData={data}
diff --git a/web/app/components/workflow/nodes/loop/use-config.ts b/web/app/components/workflow/nodes/loop/use-config.ts
index 8c39cfbfc6..b6e4bc235a 100644
--- a/web/app/components/workflow/nodes/loop/use-config.ts
+++ b/web/app/components/workflow/nodes/loop/use-config.ts
@@ -11,6 +11,7 @@ import type {
 } from './types'
 import {
   useCallback,
+  useEffect,
   useRef,
 } from 'react'
 import { useStore } from '@/app/components/workflow/store'
@@ -52,6 +53,9 @@ const useConfig = (id: string, payload: LoopNodeType) => {
 
   const { inputs, setInputs } = useNodeCrud<LoopNodeType>(id, payload)
   const inputsRef = useRef(inputs)
+  useEffect(() => {
+    inputsRef.current = inputs
+  }, [inputs])
   const handleInputsChange = useCallback((newInputs: LoopNodeType) => {
     inputsRef.current = newInputs
     setInputs(newInputs)
diff --git a/web/app/components/workflow/nodes/loop/use-interactions.ts b/web/app/components/workflow/nodes/loop/use-interactions.ts
index 5b01460778..ed4c608f14 100644
--- a/web/app/components/workflow/nodes/loop/use-interactions.ts
+++ b/web/app/components/workflow/nodes/loop/use-interactions.ts
@@ -4,8 +4,8 @@ import type {
 } from '../../types'
 import { produce } from 'immer'
 import { useCallback } from 'react'
-import { useStoreApi } from 'reactflow'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import {
   generateNewNode,
   getNodeCustomTypeByNodeDataType,
@@ -19,16 +19,11 @@ import {
 } from './use-interactions.helpers'
 
 export const useNodeLoopInteractions = () => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
   const handleNodeLoopRerender = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-
-    const nodes = getNodes()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const childrenNodes = nodes.filter(n => n.parentId === nodeId)
     const resize = getContainerResize(currentNode, getContainerBounds(childrenNodes))
@@ -51,36 +46,33 @@ export const useNodeLoopInteractions = () => {
 
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeLoopChildDrag = useCallback((node: Node) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return {
       restrictPosition: getRestrictedLoopPosition(node, nodes.find(n => n.id === node.parentId)),
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeLoopChildSizeChange = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const parentId = currentNode.parentId
 
     if (parentId)
       handleNodeLoopRerender(parentId)
-  }, [store, handleNodeLoopRerender])
+  }, [collaborativeWorkflow, handleNodeLoopRerender])
 
   const handleNodeLoopChildrenCopy = useCallback((nodeId: string, newNodeId: string, idMapping: Record<string, string>) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const childrenNodes = getLoopChildren(nodes, nodeId)
     const newIdMapping = { ...idMapping }
 
     const copyChildren = childrenNodes.map((child, index) => {
       const childNodeType = child.data.type as BlockEnum
-      const { defaultValue } = nodesMetaDataMap![childNodeType]
+      const defaultValue = nodesMetaDataMap?.[childNodeType]?.defaultValue ?? {}
       const nodesWithSameType = nodes.filter(node => node.data.type === childNodeType)
       const childCopy = buildLoopChildCopy({
         child,
@@ -103,7 +95,7 @@ export const useNodeLoopInteractions = () => {
       copyChildren,
       newIdMapping,
     }
-  }, [store, nodesMetaDataMap])
+  }, [collaborativeWorkflow, nodesMetaDataMap])
 
   return {
     handleNodeLoopRerender,
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx
index 019bfc9ecb..207d4f93a9 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ParamType } from '../../../types'
 import List from '../list'
@@ -34,7 +34,7 @@ describe('parameter-extractor/extract-parameter/list', () => {
   it.skip('edits and deletes parameters through the real item and modal flow', async () => {
     const user = userEvent.setup()
     const handleChange = vi.fn()
-    const { container, rerender } = render(
+    const { rerender } = render(
       <List
         readonly={false}
         list={[createParam()]}
@@ -42,19 +42,33 @@ describe('parameter-extractor/extract-parameter/list', () => {
       />,
     )
 
-    const editAndDeleteButtons = container.querySelectorAll('.cursor-pointer.rounded-md.p-1')
+    const cityLabel = screen.getByText('city')
+    const cityRow = cityLabel.closest('.group.relative')
+    if (!cityRow)
+      throw new Error('Failed to locate city row')
+    const editAndDeleteButtons = cityRow.querySelectorAll('.cursor-pointer.rounded-md.p-1')
     fireEvent.click(editAndDeleteButtons[0] as HTMLElement)
-    fireEvent.change(screen.getByDisplayValue('city'), { target: { value: 'city_name' } })
-    fireEvent.change(screen.getByDisplayValue('City name'), { target: { value: 'Updated city description' } })
-    await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+    await screen.findByRole('dialog')
+    const dialog = screen.getAllByRole('dialog').at(-1)!
+    fireEvent.change(
+      within(dialog).getByPlaceholderText('workflow.nodes.parameterExtractor.addExtractParameterContent.namePlaceholder'),
+      { target: { value: 'cityname' } },
+    )
+    fireEvent.change(
+      within(dialog).getByPlaceholderText('workflow.nodes.parameterExtractor.addExtractParameterContent.descriptionPlaceholder'),
+      { target: { value: 'Updated city description' } },
+    )
+    fireEvent.click(within(dialog).getByRole('button', { name: 'common.operation.save' }))
 
     await waitFor(() => {
-      expect(handleChange.mock.lastCall).toEqual([[{
-        name: 'city_name',
+      expect(handleChange).toHaveBeenCalled()
+      expect(handleChange.mock.lastCall?.[0]).toEqual([{
+        name: 'cityname',
         type: ParamType.string,
         description: 'Updated city description',
         required: false,
-      }], undefined])
+      }])
     })
 
     handleChange.mockClear()
@@ -67,7 +81,11 @@ describe('parameter-extractor/extract-parameter/list', () => {
       />,
     )
 
-    const deleteButtons = container.querySelectorAll('.cursor-pointer.rounded-md.p-1')
+    const budgetLabel = screen.getByText('budget')
+    const budgetRow = budgetLabel.closest('.group.relative')
+    if (!budgetRow)
+      throw new Error('Failed to locate budget row')
+    const deleteButtons = budgetRow.querySelectorAll('.cursor-pointer.rounded-md.p-1')
     fireEvent.click(deleteButtons[1] as HTMLElement)
 
     expect(handleChange).toHaveBeenCalledWith([])
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
index 3d17557c1d..7e6c7f22dc 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
@@ -123,7 +123,9 @@ describe('parameter-extractor/extract-parameter/update', () => {
     await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
     expect(handleSave).not.toHaveBeenCalled()
-    expect(mockToast.error).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(mockToast.error).toHaveBeenCalled()
+    })
   })
 
   it('requires options before saving a select parameter', async () => {
@@ -145,6 +147,8 @@ describe('parameter-extractor/extract-parameter/update', () => {
     await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
     expect(handleSave).not.toHaveBeenCalled()
-    expect(mockToast.error).toHaveBeenCalled()
+    await waitFor(() => {
+      expect(mockToast.error).toHaveBeenCalled()
+    })
   })
 })
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx
index 1007c44963..95ce746037 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx
@@ -45,12 +45,8 @@ describe('trigger-schedule components', () => {
 
       const trigger = screen.getByRole('button', { name: 'workflow.nodes.triggerSchedule.frequency.daily' })
       await user.click(trigger)
-
-      await waitFor(() => {
-        expect(trigger).toHaveAttribute('aria-expanded', 'true')
-      })
-
-      await user.click(await screen.findByText('workflow.nodes.triggerSchedule.frequency.weekly'))
+      await user.keyboard('{ArrowDown}')
+      await user.keyboard('{Enter}')
 
       await waitFor(() => {
         expect(onChange).toHaveBeenCalledWith('weekly')
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/__tests__/parameter-table.spec.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/__tests__/parameter-table.spec.tsx
index f9fde7bb5f..47da11f650 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/__tests__/parameter-table.spec.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/__tests__/parameter-table.spec.tsx
@@ -1,17 +1,26 @@
 import type { WebhookParameter } from '../../types'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { VarType } from '@/app/components/workflow/types'
 import ParameterTable from '../parameter-table'
 
-const selectOption = async (triggerName: string, optionName: string) => {
-  await act(async () => {
-    fireEvent.click(screen.getAllByRole('button', { name: triggerName })[0])
-  })
+const selectOption = async ({
+  rowKey,
+  triggerName,
+}: {
+  rowKey: string
+  triggerName: string
+}) => {
+  const user = userEvent.setup()
+  const rowInput = screen.getByDisplayValue(rowKey)
+  const row = rowInput.closest('[style*="min-height"]')
+  if (!(row instanceof HTMLElement))
+    throw new Error('Failed to locate parameter table row')
 
-  await act(async () => {
-    fireEvent.click(await screen.findByRole('option', { name: optionName }))
-  })
+  const selectButton = within(row).getByRole('button', { name: triggerName })
+  await user.click(selectButton)
+  await user.keyboard('{ArrowDown}')
+  await user.keyboard('{Enter}')
 }
 
 describe('trigger-webhook/parameter-table', () => {
@@ -33,7 +42,10 @@ describe('trigger-webhook/parameter-table', () => {
       />,
     )
 
-    await selectOption('String', 'Number')
+    await selectOption({
+      rowKey: 'page',
+      triggerName: 'String',
+    })
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith([{
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index 5410a005f7..4aea84b5ad 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -85,6 +85,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
             <div className="flex gap-1" style={{ height: '32px' }}>
               <div className="w-26 shrink-0">
                 <SimpleSelect
+                  key={`${id}-method-${inputs.method}`}
                   items={HTTP_METHODS}
                   defaultValue={inputs.method}
                   onSelect={item => handleMethodChange(item.value as HttpMethod)}
@@ -150,6 +151,7 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
         <Field title={t(`${i18nPrefix}.contentType`, { ns: 'workflow' })}>
           <div className="w-full">
             <SimpleSelect
+              key={`${id}-content-type-${inputs.content_type}`}
               items={CONTENT_TYPES}
               defaultValue={inputs.content_type}
               onSelect={item => handleContentTypeChange(item.value as string)}
diff --git a/web/app/components/workflow/note-node/note-editor/context.tsx b/web/app/components/workflow/note-node/note-editor/context.tsx
index 362693f4a4..ec60dd0733 100644
--- a/web/app/components/workflow/note-node/note-editor/context.tsx
+++ b/web/app/components/workflow/note-node/note-editor/context.tsx
@@ -6,19 +6,70 @@ import {
   ListNode,
 } from '@lexical/list'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $getRoot } from 'lexical'
 import {
   createContext,
   memo,
+  useEffect,
   useRef,
 } from 'react'
 import { createNoteEditorStore } from './store'
 import theme from './theme'
 
+const NoteEditorContentSynchronizer = ({ value }: { value?: string }) => {
+  const [editor] = useLexicalComposerContext()
+  const lastSyncedValueRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const normalizedValue = normalizeEditorState(value)
+    if (normalizedValue === lastSyncedValueRef.current)
+      return
+
+    const currentSerializedState = JSON.stringify(editor.getEditorState().toJSON())
+    if (normalizedValue === currentSerializedState) {
+      lastSyncedValueRef.current = normalizedValue
+      return
+    }
+
+    if (!normalizedValue) {
+      let hasContent = false
+      editor.getEditorState().read(() => {
+        hasContent = !$getRoot().isEmpty()
+      })
+
+      if (!hasContent) {
+        lastSyncedValueRef.current = normalizedValue
+        return
+      }
+
+      editor.update(() => {
+        const root = $getRoot()
+        root.clear()
+        root.select()
+      })
+      lastSyncedValueRef.current = normalizedValue
+      return
+    }
+
+    try {
+      const nextState = editor.parseEditorState(normalizedValue)
+      editor.setEditorState(nextState)
+      lastSyncedValueRef.current = normalizedValue
+    }
+    catch {
+      lastSyncedValueRef.current = ''
+    }
+  }, [editor, value])
+
+  return null
+}
+
 type NoteEditorStore = ReturnType<typeof createNoteEditorStore>
 const NoteEditorContext = createContext<NoteEditorStore | null>(null)
 
 type NoteEditorContextProviderProps = {
-  value: string
+  value?: string
   children: React.JSX.Element | string | (React.JSX.Element | string)[]
   editable?: boolean
 }
@@ -34,7 +85,8 @@ export const NoteEditorContextProvider = memo(({
 
   let initialValue = null
   try {
-    initialValue = JSON.parse(value)
+    if (value)
+      initialValue = JSON.parse(value)
   }
   catch {
 
@@ -58,6 +110,7 @@ export const NoteEditorContextProvider = memo(({
   return (
     <NoteEditorContext.Provider value={storeRef.current}>
       <LexicalComposer initialConfig={{ ...initialConfig }}>
+        <NoteEditorContentSynchronizer value={value} />
         {children}
       </LexicalComposer>
     </NoteEditorContext.Provider>
@@ -66,3 +119,19 @@ export const NoteEditorContextProvider = memo(({
 NoteEditorContextProvider.displayName = 'NoteEditorContextProvider'
 
 export default NoteEditorContext
+
+function normalizeEditorState(value?: string): string {
+  if (!value)
+    return ''
+
+  try {
+    const parsed = JSON.parse(value)
+    if (!parsed || typeof parsed !== 'object' || !parsed.root)
+      return ''
+
+    return JSON.stringify(parsed)
+  }
+  catch {
+    return ''
+  }
+}
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index cf99c08fd4..07cec0360e 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -12,6 +12,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Comment } from '@/app/components/base/icons/src/public/other'
 import Divider from '../../base/divider'
 import {
   useNodesReadOnly,
@@ -32,7 +33,12 @@ const Control = () => {
   const { t } = useTranslation()
   const controlMode = useStore(s => s.controlMode)
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
-  const { handleModePointer, handleModeHand } = useWorkflowMoveMode()
+  const {
+    handleModePointer,
+    handleModeHand,
+    handleModeComment,
+    isCommentModeAvailable,
+  } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleAddNote } = useOperator()
   const {
@@ -88,6 +94,20 @@ const Control = () => {
           <RiHand className="h-4 w-4" />
         </div>
       </TipPopup>
+      {isCommentModeAvailable && (
+        <TipPopup title={t('common.commentMode', { ns: 'workflow' })} shortcuts={['c']}>
+          <div
+            className={cn(
+              'ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+              controlMode === ControlMode.Comment ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+              `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+            )}
+            onClick={handleModeComment}
+          >
+            <Comment className="h-4 w-4" />
+          </div>
+        </TipPopup>
+      )}
       <Divider className="my-1 w-3.5" />
       <TipPopup title={t('panel.organizeBlocks', { ns: 'workflow' })} shortcuts={['ctrl', 'o']}>
         <div
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index 89330b8a8c..e41d506022 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -1,8 +1,9 @@
 import type { Node } from 'reactflow'
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
 import { useStore } from '../store'
+import { ControlMode } from '../types'
 import VariableInspectPanel from '../variable-inspect'
 import VariableTrigger from '../variable-inspect/trigger'
 import ZoomInOut from './zoom-in-out'
@@ -14,6 +15,26 @@ type OperatorProps = {
 
 const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   const bottomPanelRef = useRef<HTMLDivElement>(null)
+  const [showMiniMap, setShowMiniMap] = useState(true)
+  const showUserCursors = useStore(s => s.showUserCursors)
+  const setShowUserCursors = useStore(s => s.setShowUserCursors)
+  const showUserComments = useStore(s => s.showUserComments)
+  const setShowUserComments = useStore(s => s.setShowUserComments)
+  const controlMode = useStore(s => s.controlMode)
+  const isCommentMode = controlMode === ControlMode.Comment
+
+  const handleToggleMiniMap = useCallback(() => {
+    setShowMiniMap(prev => !prev)
+  }, [])
+
+  const handleToggleUserCursors = useCallback(() => {
+    setShowUserCursors(!showUserCursors)
+  }, [showUserCursors, setShowUserCursors])
+
+  const handleToggleUserComments = useCallback(() => {
+    setShowUserComments(!showUserComments)
+  }, [showUserComments, setShowUserComments])
+
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const rightPanelWidth = useStore(s => s.rightPanelWidth)
   const setBottomPanelWidth = useStore(s => s.setBottomPanelWidth)
@@ -51,7 +72,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   return (
     <div
       ref={bottomPanelRef}
-      className="absolute bottom-0 left-0 right-0 z-10 px-1"
+      className="absolute bottom-0 left-0 right-0 z-[60] px-1"
       style={
         {
           width: bottomPanelWidth,
@@ -64,20 +85,30 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
         </div>
         <VariableTrigger />
         <div className="relative">
-          <MiniMap
-            pannable
-            zoomable
-            style={{
-              width: 102,
-              height: 72,
-            }}
-            maskColor="var(--color-workflow-minimap-bg)"
-            nodeClassName={getMiniMapNodeClassName}
-            nodeStrokeWidth={3}
-            className="!absolute bottom-10! z-9 m-0! h-[73px]! w-[103px]! rounded-lg! border-[0.5px]!
+          {showMiniMap && (
+            <MiniMap
+              pannable
+              zoomable
+              style={{
+                width: 102,
+                height: 72,
+              }}
+              maskColor="var(--color-workflow-minimap-bg)"
+              nodeClassName={getMiniMapNodeClassName}
+              nodeStrokeWidth={3}
+              className="!absolute bottom-10! z-9 m-0! h-[73px]! w-[103px]! rounded-lg! border-[0.5px]!
             border-divider-subtle! bg-background-default-subtle! shadow-md! shadow-shadow-shadow-5!"
+            />
+          )}
+          <ZoomInOut
+            showMiniMap={showMiniMap}
+            onToggleMiniMap={handleToggleMiniMap}
+            showUserCursors={showUserCursors}
+            onToggleUserCursors={handleToggleUserCursors}
+            showUserComments={showUserComments}
+            onToggleUserComments={handleToggleUserComments}
+            isCommentMode={isCommentMode}
           />
-          <ZoomInOut />
         </div>
       </div>
       <VariableInspectPanel />
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index fec23b6b11..25f962a519 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
+  RiCheckLine,
+  RiFullscreenLine,
   RiZoomInLine,
   RiZoomOutLine,
 } from '@remixicon/react'
@@ -21,6 +23,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import Divider from '../../base/divider'
 import {
   useNodesSyncDraft,
@@ -38,9 +41,30 @@ enum ZoomType {
   zoomTo75 = 'zoomTo75',
   zoomTo100 = 'zoomTo100',
   zoomTo200 = 'zoomTo200',
+  toggleUserComments = 'toggleUserComments',
+  toggleUserCursors = 'toggleUserCursors',
+  toggleMiniMap = 'toggleMiniMap',
 }
 
-const ZoomInOut: FC = () => {
+type ZoomInOutProps = {
+  showMiniMap?: boolean
+  onToggleMiniMap?: () => void
+  showUserCursors?: boolean
+  onToggleUserCursors?: () => void
+  showUserComments?: boolean
+  onToggleUserComments?: () => void
+  isCommentMode?: boolean
+}
+
+const ZoomInOut: FC<ZoomInOutProps> = ({
+  showMiniMap = true,
+  onToggleMiniMap,
+  showUserCursors = true,
+  onToggleUserCursors,
+  showUserComments = true,
+  onToggleUserComments,
+  isCommentMode = false,
+}) => {
   const { t } = useTranslation()
   const {
     zoomIn,
@@ -55,6 +79,7 @@ const ZoomInOut: FC = () => {
     workflowReadOnly,
     getWorkflowReadOnly,
   } = useWorkflowReadOnly()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
   const ZOOM_IN_OUT_OPTIONS = [
     [
@@ -78,13 +103,32 @@ const ZoomInOut: FC = () => {
         key: ZoomType.zoomTo25,
         text: '25%',
       },
-    ],
-    [
       {
         key: ZoomType.zoomToFit,
         text: t('operator.zoomToFit', { ns: 'workflow' }),
       },
     ],
+    isCollaborationEnabled
+      ? [
+          {
+            key: ZoomType.toggleUserComments,
+            text: t('operator.showUserComments', { ns: 'workflow' }),
+          },
+          {
+            key: ZoomType.toggleUserCursors,
+            text: t('operator.showUserCursors', { ns: 'workflow' }),
+          },
+          {
+            key: ZoomType.toggleMiniMap,
+            text: t('operator.showMiniMap', { ns: 'workflow' }),
+          },
+        ]
+      : [
+          {
+            key: ZoomType.toggleMiniMap,
+            text: t('operator.showMiniMap', { ns: 'workflow' }),
+          },
+        ],
   ]
 
   const handleZoom = (type: string) => {
@@ -109,6 +153,23 @@ const ZoomInOut: FC = () => {
     if (type === ZoomType.zoomTo200)
       zoomTo(2)
 
+    if (type === ZoomType.toggleUserComments) {
+      if (!isCommentMode)
+        onToggleUserComments?.()
+
+      return
+    }
+
+    if (type === ZoomType.toggleUserCursors) {
+      onToggleUserCursors?.()
+      return
+    }
+
+    if (type === ZoomType.toggleMiniMap) {
+      onToggleMiniMap?.()
+      return
+    }
+
     handleSyncWorkflowDraft()
   }
 
@@ -182,8 +243,8 @@ const ZoomInOut: FC = () => {
           </div>
         </div>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
-        <div className="w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+      <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}>
@@ -197,10 +258,42 @@ const ZoomInOut: FC = () => {
                     options.map(option => (
                       <div
                         key={option.key}
-                        className="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"
+                        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)}
                       >
-                        <span>{option.text}</span>
+                        <div className="flex items-center space-x-2">
+                          {option.key === ZoomType.toggleUserComments && showUserComments && (
+                            <RiCheckLine className="h-4 w-4 text-text-accent" />
+                          )}
+                          {option.key === ZoomType.toggleUserComments && !showUserComments && (
+                            <div className="h-4 w-4" />
+                          )}
+                          {option.key === ZoomType.toggleUserCursors && showUserCursors && (
+                            <RiCheckLine className="h-4 w-4 text-text-accent" />
+                          )}
+                          {option.key === ZoomType.toggleUserCursors && !showUserCursors && (
+                            <div className="h-4 w-4" />
+                          )}
+                          {option.key === ZoomType.toggleMiniMap && showMiniMap && (
+                            <RiCheckLine className="h-4 w-4 text-text-accent" />
+                          )}
+                          {option.key === ZoomType.toggleMiniMap && !showMiniMap && (
+                            <div className="h-4 w-4" />
+                          )}
+                          {option.key === ZoomType.zoomToFit && (
+                            <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 && (
+                            <div className="h-4 w-4" />
+                          )}
+                          <span>{option.text}</span>
+                        </div>
                         <div className="flex items-center space-x-0.5">
                           {
                             option.key === ZoomType.zoomToFit && (
diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
index 06b4426615..ffe88d3dc9 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -10,6 +10,7 @@ import {
   useDSL,
   useNodesInteractions,
   usePanelInteractions,
+  useWorkflowMoveMode,
   useWorkflowStartRun,
 } from './hooks'
 import AddBlock from './operator/add-block'
@@ -23,10 +24,14 @@ const PanelContextmenu = () => {
   const panelMenu = useStore(s => s.panelMenu)
   const clipboardElements = useStore(s => s.clipboardElements)
   const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal)
+  const pendingComment = useStore(s => s.pendingComment)
+  const setCommentPlacing = useStore(s => s.setCommentPlacing)
+  const setCommentQuickAdd = useStore(s => s.setCommentQuickAdd)
   const { handleNodesPaste } = useNodesInteractions()
   const { handlePaneContextmenuCancel } = usePanelInteractions()
   const { handleStartWorkflowRun } = useWorkflowStartRun()
   const { handleAddNote } = useOperator()
+  const { isCommentModeAvailable } = useWorkflowMoveMode()
   const { exportCheck } = useDSL()
 
   useClickAway(() => {
@@ -73,6 +78,24 @@ const PanelContextmenu = () => {
         >
           {t('nodes.note.addNote', { ns: 'workflow' })}
         </div>
+        {isCommentModeAvailable && (
+          <div
+            className={cn(
+              'flex h-8 items-center justify-between rounded-lg px-3 text-sm text-text-secondary',
+              pendingComment ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-state-base-hover',
+            )}
+            onClick={(e) => {
+              e.stopPropagation()
+              if (pendingComment)
+                return
+              setCommentQuickAdd(true)
+              setCommentPlacing(true)
+              handlePaneContextmenuCancel()
+            }}
+          >
+            {t('comments.actions.addComment', { ns: 'workflow' })}
+          </div>
+        )}
         <div
           className="flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover"
           onClick={() => {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx b/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx
index 722c0c280e..a12ede5aa5 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/__tests__/index.spec.tsx
@@ -6,8 +6,10 @@ import { ChatVarType } from '../type'
 
 type MockWorkflowStoreState = {
   setShowChatVariablePanel: (value: boolean) => void
+  appId: string
   conversationVariables: ConversationVariable[]
   setConversationVariables: (value: ConversationVariable[]) => void
+  setControlPromptEditorRerenderKey: (value: number) => void
 }
 
 type MockFlowStore = {
@@ -17,10 +19,9 @@ type MockFlowStore = {
 
 const mockSetShowChatVariablePanel = vi.fn()
 const mockSetConversationVariables = vi.fn()
-const mockDoSyncWorkflowDraft = vi.fn((_sync: boolean, options?: { onSuccess?: () => void }) => {
-  options?.onSuccess?.()
-})
+const mockSetControlPromptEditorRerenderKey = vi.fn()
 const mockInvalidateConversationVarValues = vi.fn()
+const mockUpdateConversationVariables = vi.fn().mockResolvedValue(undefined)
 const mockFindUsedVarNodes = vi.fn<(selector: string[], nodes: Node[]) => Node[]>()
 const mockUpdateNodeVars = vi.fn<(node: Node, current: string[], next: string[]) => Node>()
 
@@ -62,15 +63,15 @@ vi.mock('reactflow', () => ({
 vi.mock('@/app/components/workflow/store', () => ({
   useStore: <T,>(selector: (state: MockWorkflowStoreState) => T) => selector({
     setShowChatVariablePanel: mockSetShowChatVariablePanel,
+    appId: 'app-1',
     conversationVariables: mockConversationVariables,
     setConversationVariables: mockSetConversationVariables,
+    setControlPromptEditorRerenderKey: mockSetControlPromptEditorRerenderKey,
   }),
 }))
 
-vi.mock('@/app/components/workflow/hooks/use-nodes-sync-draft', () => ({
-  useNodesSyncDraft: () => ({
-    doSyncWorkflowDraft: mockDoSyncWorkflowDraft,
-  }),
+vi.mock('@/service/workflow', () => ({
+  updateConversationVariables: (...args: unknown[]) => mockUpdateConversationVariables(...args),
 }))
 
 vi.mock('../../../hooks/use-inspect-vars-crud', () => ({
@@ -175,6 +176,7 @@ describe('ChatVariablePanel', () => {
     vi.clearAllMocks()
     mockConversationVariables = [createConversationVariable()]
     mockFlowNodes = [createNode('node-1'), createNode('node-2')]
+    mockUpdateConversationVariables.mockResolvedValue(undefined)
     mockFindUsedVarNodes.mockReturnValue([])
     mockUpdateNodeVars.mockImplementation((node: Node) => node)
   })
@@ -207,9 +209,15 @@ describe('ChatVariablePanel', () => {
         expect.objectContaining({ id: 'var-added', name: 'fresh_var' }),
         createConversationVariable(),
       ])
+      expect(mockUpdateConversationVariables).toHaveBeenCalledWith({
+        appId: 'app-1',
+        conversationVariables: [
+          expect.objectContaining({ id: 'var-added', name: 'fresh_var' }),
+          createConversationVariable(),
+        ],
+      })
+      expect(mockInvalidateConversationVarValues).toHaveBeenCalledTimes(1)
     })
-    expect(mockDoSyncWorkflowDraft).toHaveBeenCalledTimes(1)
-    expect(mockInvalidateConversationVarValues).toHaveBeenCalledTimes(1)
   })
 
   it('should rename existing variables and update affected node references', async () => {
@@ -234,6 +242,7 @@ describe('ChatVariablePanel', () => {
       ['conversation', 'conversation_var_next'],
     )
     expect(mockSetNodes).toHaveBeenCalledWith([updatedNode, createNode('node-2')])
+    expect(mockSetControlPromptEditorRerenderKey).toHaveBeenCalled()
   })
 
   it('should require confirmation before deleting variables referenced by workflow nodes', async () => {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index e1676978fc..dcaeb1829a 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -9,38 +9,31 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  useStoreApi,
-} from 'reactflow'
+
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { BubbleX, LongArrowLeft, LongArrowRight } from '@/app/components/base/icons/src/vender/line/others'
 import BlockIcon from '@/app/components/workflow/block-icon'
-import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import VariableItem from '@/app/components/workflow/panel/chat-variable-panel/components/variable-item'
 import VariableModalTrigger from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { updateConversationVariables } from '@/service/workflow'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const ChatVariablePanel = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
   const updateChatVarList = useStore(s => s.setConversationVariables)
-  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const setControlPromptEditorRerenderKey = useStore(s => s.setControlPromptEditorRerenderKey)
+  const appId = useStore(s => s.appId) as string
   const {
     invalidateConversationVarValues,
   } = useInspectVarsCrud()
-  const handleVarChanged = useCallback(() => {
-    doSyncWorkflowDraft(false, {
-      onSuccess() {
-        invalidateConversationVarValues()
-      },
-    })
-  }, [doSyncWorkflowDraft, invalidateConversationVarValues])
 
   const [showTip, setShowTip] = useState(true)
   const [showVariableModal, setShowVariableModal] = useState(false)
@@ -48,40 +41,63 @@ const ChatVariablePanel = () => {
 
   const [showRemoveVarConfirm, setShowRemoveConfirm] = useState(false)
   const [cacheForDelete, setCacheForDelete] = useState<ConversationVariable>()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const getEffectedNodes = useCallback((chatVar: ConversationVariable) => {
-    const { getNodes } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes } = collaborativeWorkflow.getState()
     return findUsedVarNodes(
       ['conversation', chatVar.name],
       allNodes,
     )
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const removeUsedVarInNodes = useCallback((chatVar: ConversationVariable) => {
-    const { getNodes, setNodes } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const effectedNodes = getEffectedNodes(chatVar)
-    const newNodes = getNodes().map((node) => {
+    const newNodes = nodes.map((node) => {
       if (effectedNodes.find(n => n.id === node.id))
         return updateNodeVars(node, ['conversation', chatVar.name], [])
 
       return node
     })
     setNodes(newNodes)
-  }, [getEffectedNodes, store])
+  }, [getEffectedNodes, collaborativeWorkflow])
 
   const handleEdit = (chatVar: ConversationVariable) => {
     setCurrentVar(chatVar)
     setShowVariableModal(true)
   }
 
-  const handleDelete = useCallback((chatVar: ConversationVariable) => {
+  const handleDelete = useCallback(async (chatVar: ConversationVariable) => {
     removeUsedVarInNodes(chatVar)
-    updateChatVarList(varList.filter(v => v.id !== chatVar.id))
+    const newVarList = varList.filter(v => v.id !== chatVar.id)
+    updateChatVarList(newVarList)
     setCacheForDelete(undefined)
     setShowRemoveConfirm(false)
-    handleVarChanged()
-  }, [handleVarChanged, removeUsedVarInNodes, updateChatVarList, varList])
+
+    // Use new dedicated conversation variables API instead of workflow draft sync
+    try {
+      await updateConversationVariables({
+        appId,
+        conversationVariables: newVarList,
+      })
+
+      // Emit update event to other connected clients
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+
+      invalidateConversationVarValues()
+    }
+    catch (error) {
+      console.error('Failed to update conversation variables:', error)
+      // Revert local state on error
+      updateChatVarList(varList)
+    }
+  }, [removeUsedVarInNodes, updateChatVarList, varList, appId, invalidateConversationVarValues])
 
   const deleteCheck = useCallback((chatVar: ConversationVariable) => {
     const effectedNodes = getEffectedNodes(chatVar)
@@ -95,30 +111,77 @@ const ChatVariablePanel = () => {
   }, [getEffectedNodes, handleDelete])
 
   const handleSave = useCallback(async (chatVar: ConversationVariable) => {
-    // add chatVar
+    let newList: ConversationVariable[]
+
     if (!currentVar) {
-      const newList = [chatVar, ...varList]
+      // Adding new conversation variable
+      newList = [chatVar, ...varList]
       updateChatVarList(newList)
-      handleVarChanged()
+
+      // Use new dedicated conversation variables API
+      try {
+        await updateConversationVariables({
+          appId,
+          conversationVariables: newList,
+        })
+
+        const socket = webSocketClient.getSocket(appId)
+        if (socket) {
+          socket.emit('collaboration_event', {
+            type: 'vars_and_features_update',
+          })
+        }
+
+        invalidateConversationVarValues()
+      }
+      catch (error) {
+        console.error('Failed to update conversation variables:', error)
+        // Revert local state on error
+        updateChatVarList(varList)
+      }
       return
     }
-    // edit chatVar
-    const newList = varList.map(v => v.id === currentVar.id ? chatVar : v)
+
+    // Updating existing conversation variable
+    newList = varList.map(v => v.id === currentVar.id ? chatVar : v)
     updateChatVarList(newList)
-    // side effects of rename env
+
+    // side effects of rename conversation variable
     if (currentVar.name !== chatVar.name) {
-      const { getNodes, setNodes } = store.getState()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
       const effectedNodes = getEffectedNodes(currentVar)
-      const newNodes = getNodes().map((node) => {
+      const newNodes = nodes.map((node) => {
         if (effectedNodes.find(n => n.id === node.id))
           return updateNodeVars(node, ['conversation', currentVar.name], ['conversation', chatVar.name])
 
         return node
       })
       setNodes(newNodes)
+      setControlPromptEditorRerenderKey(Date.now())
     }
-    handleVarChanged()
-  }, [currentVar, getEffectedNodes, handleVarChanged, store, updateChatVarList, varList])
+
+    // Use new dedicated conversation variables API
+    try {
+      await updateConversationVariables({
+        appId,
+        conversationVariables: newList,
+      })
+
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+
+      invalidateConversationVarValues()
+    }
+    catch (error) {
+      console.error('Failed to update conversation variables:', error)
+      // Revert local state on error
+      updateChatVarList(varList)
+    }
+  }, [currentVar, getEffectedNodes, collaborativeWorkflow, updateChatVarList, varList, appId, invalidateConversationVarValues, setControlPromptEditorRerenderKey])
 
   return (
     <div
diff --git a/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx b/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..5abacd6035
--- /dev/null
+++ b/web/app/components/workflow/panel/comments-panel/__tests__/index.spec.tsx
@@ -0,0 +1,167 @@
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CommentsPanel from '../index'
+
+const mockHandleCommentIconClick = vi.hoisted(() => vi.fn())
+const mockLoadComments = vi.hoisted(() => vi.fn())
+const mockSetActiveCommentId = vi.hoisted(() => vi.fn())
+const mockSetControlMode = vi.hoisted(() => vi.fn())
+const mockSetShowResolvedComments = vi.hoisted(() => vi.fn())
+const mockResolveWorkflowComment = vi.hoisted(() => vi.fn())
+const mockEmitCommentsUpdate = vi.hoisted(() => vi.fn())
+
+const commentFixtures: WorkflowCommentList[] = [
+  {
+    id: 'c-1',
+    position_x: 10,
+    position_y: 20,
+    created_by: 'user-1',
+    created_by_account: { id: 'user-1', name: 'Alice', email: 'alice@example.com', avatar_url: '' },
+    content: 'my open thread',
+    created_at: 1,
+    updated_at: 2,
+    resolved: false,
+    mention_count: 0,
+    reply_count: 2,
+    participants: [],
+  },
+  {
+    id: 'c-2',
+    position_x: 30,
+    position_y: 40,
+    created_by: 'user-2',
+    created_by_account: { id: 'user-2', name: 'Bob', email: 'bob@example.com', avatar_url: '' },
+    content: 'others resolved thread',
+    created_at: 3,
+    updated_at: 4,
+    resolved: true,
+    mention_count: 0,
+    reply_count: 0,
+    participants: [],
+  },
+]
+
+type WorkflowStoreSelectionState = {
+  activeCommentId: string | null
+  setActiveCommentId: (value: string | null) => void
+  setControlMode: (value: unknown) => void
+  showResolvedComments: boolean
+  setShowResolvedComments: (value: boolean) => void
+}
+
+const storeState = {
+  activeCommentId: null as string | null,
+  showResolvedComments: true,
+}
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+  }),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useParams: () => ({ appId: 'app-1' }),
+}))
+
+vi.mock('@/hooks/use-format-time-from-now', () => ({
+  useFormatTimeFromNow: () => ({
+    formatTimeFromNow: () => 'just now',
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: { id: 'user-1' },
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: WorkflowStoreSelectionState) => unknown) => selector({
+    activeCommentId: storeState.activeCommentId,
+    setActiveCommentId: (...args: unknown[]) => mockSetActiveCommentId(...args),
+    setControlMode: (...args: unknown[]) => mockSetControlMode(...args),
+    showResolvedComments: storeState.showResolvedComments,
+    setShowResolvedComments: (...args: unknown[]) => mockSetShowResolvedComments(...args),
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-workflow-comment', () => ({
+  useWorkflowComment: () => ({
+    comments: commentFixtures,
+    loading: false,
+    loadComments: (...args: unknown[]) => mockLoadComments(...args),
+    handleCommentIconClick: (...args: unknown[]) => mockHandleCommentIconClick(...args),
+  }),
+}))
+
+vi.mock('@/service/workflow-comment', () => ({
+  resolveWorkflowComment: (...args: unknown[]) => mockResolveWorkflowComment(...args),
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/collaboration-manager', () => ({
+  collaborationManager: {
+    emitCommentsUpdate: (...args: unknown[]) => mockEmitCommentsUpdate(...args),
+  },
+}))
+
+vi.mock('@/app/components/base/user-avatar-list', () => ({
+  UserAvatarList: () => <div data-testid="user-avatar-list" />,
+}))
+
+vi.mock('@/app/components/base/switch', () => ({
+  default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (value: boolean) => void }) => (
+    <button type="button" data-testid="show-resolved-switch" onClick={() => onCheckedChange(!checked)}>
+      toggle
+    </button>
+  ),
+}))
+
+describe('CommentsPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    storeState.activeCommentId = null
+    storeState.showResolvedComments = true
+    mockResolveWorkflowComment.mockResolvedValue({})
+    mockLoadComments.mockResolvedValue(undefined)
+  })
+
+  it('filters comments and selects a thread', () => {
+    render(<CommentsPanel />)
+
+    expect(screen.getByText('my open thread')).toBeInTheDocument()
+    expect(screen.getByText('others resolved thread')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.filterComments'))
+    fireEvent.click(screen.getByText('workflow.comments.filter.onlyYourThreads'))
+    expect(screen.queryByText('others resolved thread')).not.toBeInTheDocument()
+    expect(screen.getByText('my open thread')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('my open thread'))
+    expect(mockHandleCommentIconClick).toHaveBeenCalledWith(expect.objectContaining({ id: 'c-1' }))
+  })
+
+  it('resolves a comment and syncs list refresh', async () => {
+    const { container } = render(<CommentsPanel />)
+    const resolveIcons = container.querySelectorAll('.h-4.w-4.cursor-pointer.text-text-tertiary')
+    expect(resolveIcons.length).toBeGreaterThan(0)
+
+    fireEvent.click(resolveIcons[0]!)
+
+    await waitFor(() => {
+      expect(mockResolveWorkflowComment).toHaveBeenCalledWith('app-1', 'c-1')
+      expect(mockEmitCommentsUpdate).toHaveBeenCalledWith('app-1')
+      expect(mockLoadComments).toHaveBeenCalled()
+      expect(mockSetActiveCommentId).toHaveBeenCalledWith('c-1')
+    })
+  })
+
+  it('toggles show-resolved state from filter panel switch', () => {
+    render(<CommentsPanel />)
+
+    fireEvent.click(screen.getByLabelText('workflow.comments.aria.filterComments'))
+    fireEvent.click(screen.getByTestId('show-resolved-switch'))
+
+    expect(mockSetShowResolvedComments).toHaveBeenCalledWith(false)
+  })
+})
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
new file mode 100644
index 0000000000..36e1aef833
--- /dev/null
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -0,0 +1,205 @@
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { cn } from '@langgenius/dify-ui/cn'
+import { RiCheckboxCircleFill, RiCheckboxCircleLine, RiCheckLine, RiCloseLine, RiFilter3Line } from '@remixicon/react'
+import { memo, useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import Switch from '@/app/components/base/switch'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useWorkflowComment } from '@/app/components/workflow/hooks/use-workflow-comment'
+import { useStore } from '@/app/components/workflow/store'
+import { ControlMode } from '@/app/components/workflow/types'
+import { useAppContext } from '@/context/app-context'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useParams } from '@/next/navigation'
+import { resolveWorkflowComment } from '@/service/workflow-comment'
+
+const CommentsPanel = () => {
+  const { t } = useTranslation()
+  const activeCommentId = useStore(s => s.activeCommentId)
+  const setActiveCommentId = useStore(s => s.setActiveCommentId)
+  const setControlMode = useStore(s => s.setControlMode)
+  const showResolvedComments = useStore(s => s.showResolvedComments)
+  const setShowResolvedComments = useStore(s => s.setShowResolvedComments)
+  const { comments, loading, loadComments, handleCommentIconClick } = useWorkflowComment()
+  const params = useParams()
+  const appId = params.appId as string
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+
+  const [showOnlyMine, setShowOnlyMine] = useState(false)
+  const [showFilter, setShowFilter] = useState(false)
+
+  const handleSelect = useCallback((comment: WorkflowCommentList) => {
+    handleCommentIconClick(comment)
+  }, [handleCommentIconClick])
+
+  const { userProfile } = useAppContext()
+
+  const filteredSorted = useMemo(() => {
+    let data = comments
+    if (!showResolvedComments)
+      data = data.filter(c => !c.resolved)
+    if (showOnlyMine)
+      data = data.filter(c => c.created_by === userProfile?.id)
+    return data
+  }, [comments, showOnlyMine, showResolvedComments, userProfile?.id])
+
+  const handleResolve = useCallback(async (comment: WorkflowCommentList) => {
+    if (comment.resolved)
+      return
+    if (!appId)
+      return
+    try {
+      await resolveWorkflowComment(appId, comment.id)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await loadComments()
+      setActiveCommentId(comment.id)
+    }
+    catch (e) {
+      console.error('Resolve comment failed', e)
+    }
+  }, [appId, loadComments, setActiveCommentId])
+
+  const hasActiveFilter = showOnlyMine || !showResolvedComments
+
+  return (
+    <div className={cn('relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg')}>
+      <div className="flex items-center justify-between p-4 pb-2">
+        <div className="system-xl-semibold leading-6 font-semibold text-text-primary">{t('comments.panelTitle', { ns: 'workflow' })}</div>
+        <div className="relative flex items-center gap-2">
+          <button
+            className={cn(
+              'group flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-accent-active',
+              hasActiveFilter && 'bg-state-accent-active',
+            )}
+            aria-label={t('comments.aria.filterComments', { ns: 'workflow' })}
+            onClick={() => setShowFilter(v => !v)}
+          >
+            <RiFilter3Line className={cn(
+              'h-4 w-4 text-text-secondary group-hover:text-text-accent',
+              hasActiveFilter && 'text-text-accent',
+            )}
+            />
+          </button>
+          {showFilter && (
+            <div className="absolute top-9 right-10 z-50 min-w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[10px]">
+              <button
+                className={cn('flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', !showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => {
+                  setShowOnlyMine(false)
+                  setShowFilter(false)
+                }}
+              >
+                <span className="text-text-secondary">{t('comments.filter.all', { ns: 'workflow' })}</span>
+                {!showOnlyMine && <RiCheckLine className="text-primary-600 h-4 w-4" />}
+              </button>
+              <button
+                className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => {
+                  setShowOnlyMine(true)
+                  setShowFilter(false)
+                }}
+              >
+                <span className="text-text-secondary">{t('comments.filter.onlyYourThreads', { ns: 'workflow' })}</span>
+                {showOnlyMine && <RiCheckLine className="text-primary-600 h-4 w-4" />}
+              </button>
+              <Divider type="horizontal" className="my-1" />
+              <div
+                className="flex w-full items-center justify-between rounded-md px-2 py-2"
+                onClick={(e) => {
+                  e.stopPropagation()
+                }}
+              >
+                <span className="text-sm text-text-secondary">{t('comments.filter.showResolved', { ns: 'workflow' })}</span>
+                <Switch
+                  size="md"
+                  checked={showResolvedComments}
+                  onCheckedChange={(checked: boolean) => {
+                    setShowResolvedComments(checked)
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          <Divider type="vertical" className="h-3.5" />
+          <div
+            className="flex h-6 w-6 cursor-pointer items-center justify-center"
+            onClick={() => {
+              setControlMode(ControlMode.Pointer)
+              setActiveCommentId(null)
+            }}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          </div>
+        </div>
+      </div>
+      <div className="grow overflow-y-auto px-1">
+        {filteredSorted.map((c) => {
+          const isActive = activeCommentId === c.id
+          return (
+            <div
+              key={c.id}
+              className={cn('group mb-2 cursor-pointer rounded-xl bg-components-panel-bg p-3 transition-colors hover:bg-components-panel-on-panel-item-bg-hover', isActive && 'bg-components-panel-on-panel-item-bg-hover')}
+              onClick={() => handleSelect(c)}
+            >
+              <div className="min-w-0">
+                <div className="mb-1 flex items-center justify-between">
+                  <UserAvatarList
+                    users={c.participants}
+                    maxVisible={3}
+                    size="sm"
+                  />
+                  <div className="ml-2 flex items-center">
+                    {c.resolved
+                      ? (
+                          <RiCheckboxCircleFill className="h-4 w-4 text-text-secondary" />
+                        )
+                      : (
+                          <RiCheckboxCircleLine
+                            className="h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              handleResolve(c)
+                            }}
+                          />
+                        )}
+                  </div>
+                </div>
+                {/* Header row: creator + time */}
+                <div className="flex items-start">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <div className="truncate system-sm-medium text-text-primary">{c.created_by_account.name}</div>
+                    <div className="shrink-0 system-2xs-regular text-text-tertiary">
+                      {formatTimeFromNow(c.updated_at * 1000)}
+                    </div>
+                  </div>
+                </div>
+                {/* Content */}
+                <div className="mt-1 line-clamp-3 system-sm-regular break-words text-text-secondary">{c.content}</div>
+                {/* Footer */}
+                {c.reply_count > 0 && (
+                  <div className="mt-2 flex items-center justify-between">
+                    <div className="system-2xs-regular text-text-tertiary">
+                      {c.reply_count}
+                      {' '}
+                      {t('comments.reply', { ns: 'workflow' })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+        {!loading && filteredSorted.length === 0 && (
+          <div className="mt-6 text-center system-sm-regular text-text-tertiary">{t('comments.noComments', { ns: 'workflow' })}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default memo(CommentsPanel)
diff --git a/web/app/components/workflow/panel/env-panel/__tests__/index.spec.tsx b/web/app/components/workflow/panel/env-panel/__tests__/index.spec.tsx
index 0beae8b4b5..69b60e6259 100644
--- a/web/app/components/workflow/panel/env-panel/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/panel/env-panel/__tests__/index.spec.tsx
@@ -19,6 +19,8 @@ const {
   mockFindUsedVarNodes,
   mockUpdateNodeVars,
   mockVariableTriggerState,
+  mockUpdateEnvironmentVariables,
+  mockGetSocket,
 } = vi.hoisted(() => ({
   mockDoSyncWorkflowDraft: vi.fn(() => Promise.resolve()),
   mockGetNodes: vi.fn<() => MockWorkflowNode[]>(() => []),
@@ -34,6 +36,8 @@ const {
   mockVariableTriggerState: {
     savePayload: undefined as EnvironmentVariable | undefined,
   },
+  mockUpdateEnvironmentVariables: vi.fn<(payload: { appId: string, environmentVariables: EnvironmentVariable[] }) => Promise<unknown>>(() => Promise.resolve({})),
+  mockGetSocket: vi.fn<(appId: string) => { emit: (event: string, payload: unknown) => void } | null>(() => null),
 }))
 
 vi.mock('@/app/components/workflow/hooks/use-nodes-sync-draft', () => ({
@@ -56,6 +60,16 @@ vi.mock('@/app/components/workflow/nodes/_base/components/variable/utils', () =>
   updateNodeVars: mockUpdateNodeVars,
 }))
 
+vi.mock('@/service/workflow', () => ({
+  updateEnvironmentVariables: (payload: { appId: string, environmentVariables: EnvironmentVariable[] }) => mockUpdateEnvironmentVariables(payload),
+}))
+
+vi.mock('@/app/components/workflow/collaboration/core/websocket-manager', () => ({
+  webSocketClient: {
+    getSocket: (appId: string) => mockGetSocket(appId),
+  },
+}))
+
 vi.mock('@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm', () => ({
   default: ({
     isShow,
@@ -171,6 +185,8 @@ describe('EnvPanel container', () => {
     mockGetNodes.mockReturnValue([])
     mockFindUsedVarNodes.mockReturnValue([])
     mockVariableTriggerState.savePayload = undefined
+    mockUpdateEnvironmentVariables.mockResolvedValue({})
+    mockGetSocket.mockReturnValue(null)
   })
 
   it('should close the panel from the header action', async () => {
@@ -317,6 +333,7 @@ describe('EnvPanel container', () => {
       }),
       expect.objectContaining({ id: 'node-2' }),
     ])
+    expect(store.getState().controlPromptEditorRerenderKey).toBeGreaterThan(0)
   })
 
   it('should convert edited plain variables into secrets and store the masked secret value', async () => {
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index af8273c8ef..58427576ad 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -9,9 +9,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  useStoreApi,
-} from 'reactflow'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
@@ -31,44 +29,103 @@ const sanitizeSecretValue = (env: EnvironmentVariable) => {
     : env
 }
 
+const removeSecretFromMap = (secretMap: Record<string, string>, envId: string) => {
+  const nextSecretMap = { ...secretMap }
+  delete nextSecretMap[envId]
+  return nextSecretMap
+}
+
 const useEnvPanelActions = ({
-  store,
+  collaborativeWorkflow,
+  appId,
   envSecrets,
   updateEnvList,
   setEnvSecrets,
+  setControlPromptEditorRerenderKey,
   doSyncWorkflowDraft,
 }: {
-  store: ReturnType<typeof useStoreApi>
+  collaborativeWorkflow: ReturnType<typeof useCollaborativeWorkflow>
+  appId: string
   envSecrets: Record<string, string>
   updateEnvList: (envList: EnvironmentVariable[]) => void
   setEnvSecrets: (envSecrets: Record<string, string>) => void
+  setControlPromptEditorRerenderKey: (controlPromptEditorRerenderKey: number) => void
   doSyncWorkflowDraft: () => Promise<void>
 }) => {
+  const emitVarsAndFeaturesUpdate = useCallback(async () => {
+    try {
+      const { webSocketClient } = await import('@/app/components/workflow/collaboration/core/websocket-manager')
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+    }
+    catch (error) {
+      console.error('Failed to emit vars_and_features_update event:', error)
+    }
+  }, [appId])
+
+  const persistEnvironmentVariables = useCallback(async (nextEnvList: EnvironmentVariable[]) => {
+    try {
+      const { updateEnvironmentVariables } = await import('@/service/workflow')
+      await updateEnvironmentVariables({
+        appId,
+        environmentVariables: nextEnvList,
+      })
+      await emitVarsAndFeaturesUpdate()
+      return true
+    }
+    catch (error) {
+      console.error('Failed to update environment variables:', error)
+      return false
+    }
+  }, [appId, emitVarsAndFeaturesUpdate])
+
   const getAffectedNodes = useCallback((env: EnvironmentVariable) => {
-    const allNodes = store.getState().getNodes()
+    const { nodes: allNodes } = collaborativeWorkflow.getState()
     return findUsedVarNodes(
       ['env', env.name],
       allNodes,
     )
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const updateAffectedNodes = useCallback((currentEnv: EnvironmentVariable, nextSelector: string[]) => {
-    const { getNodes, setNodes } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const affectedNodes = getAffectedNodes(currentEnv)
-    const nextNodes = getNodes().map((node) => {
+    const nextNodes = nodes.map((node) => {
       if (affectedNodes.find(affectedNode => affectedNode.id === node.id))
         return updateNodeVars(node, ['env', currentEnv.name], nextSelector)
 
       return node
     })
     setNodes(nextNodes)
-  }, [getAffectedNodes, store])
+    setControlPromptEditorRerenderKey(Date.now())
+  }, [collaborativeWorkflow, getAffectedNodes, setControlPromptEditorRerenderKey])
 
-  const syncEnvList = useCallback(async (nextEnvList: EnvironmentVariable[]) => {
+  const syncEnvList = useCallback(async (
+    nextEnvList: EnvironmentVariable[],
+    options?: {
+      syncDraft?: boolean
+    },
+  ) => {
     updateEnvList(nextEnvList)
-    await doSyncWorkflowDraft()
+    const shouldSyncDraft = options?.syncDraft ?? true
+
+    let persisted = false
+    if (shouldSyncDraft) {
+      const syncDraftPromise = doSyncWorkflowDraft()
+      persisted = await persistEnvironmentVariables(nextEnvList)
+      await syncDraftPromise
+    }
+    else {
+      persisted = await persistEnvironmentVariables(nextEnvList)
+    }
+
     updateEnvList(nextEnvList.map(sanitizeSecretValue))
-  }, [doSyncWorkflowDraft, updateEnvList])
+    return persisted
+  }, [doSyncWorkflowDraft, persistEnvironmentVariables, updateEnvList])
 
   const saveSecretValue = useCallback((env: EnvironmentVariable) => {
     setEnvSecrets({
@@ -78,9 +135,7 @@ const useEnvPanelActions = ({
   }, [envSecrets, setEnvSecrets])
 
   const removeEnvSecret = useCallback((envId: string) => {
-    const nextSecrets = { ...envSecrets }
-    delete nextSecrets[envId]
-    setEnvSecrets(nextSecrets)
+    setEnvSecrets(removeSecretFromMap(envSecrets, envId))
   }, [envSecrets, setEnvSecrets])
 
   return {
@@ -94,12 +149,14 @@ const useEnvPanelActions = ({
 
 const EnvPanel = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const envList = useStore(s => s.environmentVariables) as EnvironmentVariable[]
   const envSecrets = useStore(s => s.envSecrets)
   const updateEnvList = useStore(s => s.setEnvironmentVariables)
   const setEnvSecrets = useStore(s => s.setEnvSecrets)
+  const setControlPromptEditorRerenderKey = useStore(s => s.setControlPromptEditorRerenderKey)
+  const appId = useStore(s => s.appId) as string
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
   const {
     getAffectedNodes,
@@ -108,10 +165,12 @@ const EnvPanel = () => {
     saveSecretValue,
     removeEnvSecret,
   } = useEnvPanelActions({
-    store,
+    collaborativeWorkflow,
+    appId,
     envSecrets,
     updateEnvList,
     setEnvSecrets,
+    setControlPromptEditorRerenderKey,
     doSyncWorkflowDraft,
   })
 
@@ -126,15 +185,15 @@ const EnvPanel = () => {
     setShowVariableModal(true)
   }
 
-  const handleDelete = useCallback((env: EnvironmentVariable) => {
-    updateAffectedNodes(env, [])
-    updateEnvList(envList.filter(e => e.id !== env.id))
+  const handleDelete = useCallback(async (env: EnvironmentVariable) => {
+    const nextEnvList = envList.filter(e => e.id !== env.id)
     setCacheForDelete(undefined)
     setShowRemoveVarConfirm(false)
-    doSyncWorkflowDraft()
+    updateAffectedNodes(env, [])
     if (env.value_type === 'secret')
       removeEnvSecret(env.id)
-  }, [doSyncWorkflowDraft, envList, removeEnvSecret, updateAffectedNodes, updateEnvList])
+    await syncEnvList(nextEnvList)
+  }, [envList, removeEnvSecret, syncEnvList, updateAffectedNodes])
 
   const deleteCheck = useCallback((env: EnvironmentVariable) => {
     const affectedNodes = getAffectedNodes(env)
@@ -152,7 +211,6 @@ const EnvPanel = () => {
     if (!currentVar) {
       if (env.value_type === 'secret')
         saveSecretValue(env)
-
       await syncEnvList([env, ...envList])
       return
     }
@@ -167,17 +225,23 @@ const EnvPanel = () => {
           newEnv = sanitizeSecretValue(env)
         }
       }
+      else {
+        removeEnvSecret(currentVar.id)
+      }
     }
     else if (env.value_type === 'secret') {
       saveSecretValue(env)
     }
 
-    const newList = envList.map(e => e.id === currentVar.id ? newEnv : e)
-    if (currentVar.name !== env.name)
+    const nextEnvList = envList.map(e => e.id === currentVar.id ? newEnv : e)
+    const hasEnvNameChanged = currentVar.name !== env.name
+    if (hasEnvNameChanged)
       updateAffectedNodes(currentVar, ['env', env.name])
 
-    await syncEnvList(newList)
-  }, [currentVar, envList, envSecrets, saveSecretValue, syncEnvList, updateAffectedNodes])
+    const persisted = await syncEnvList(nextEnvList, { syncDraft: hasEnvNameChanged })
+    if (!persisted && !hasEnvNameChanged)
+      await doSyncWorkflowDraft()
+  }, [currentVar, doSyncWorkflowDraft, envList, envSecrets, removeEnvSecret, saveSecretValue, syncEnvList, updateAffectedNodes])
 
   const handleVariableModalClose = () => {
     setCurrentVar(undefined)
diff --git a/web/app/components/workflow/panel/version-history-panel/index.tsx b/web/app/components/workflow/panel/version-history-panel/index.tsx
index e6b3731ddd..22caa14201 100644
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@@ -31,6 +31,7 @@ export type VersionHistoryPanelProps = {
   updateVersionUrl?: (versionId: string) => string
   latestVersionId?: string
 }
+
 export const VersionHistoryPanel = ({
   getVersionListUrl,
   deleteVersionUrl,
@@ -142,11 +143,56 @@ export const VersionHistoryPanel = ({
     }
   }, [])
 
+  const emitRestoreIntent = useCallback(async (item: VersionHistory) => {
+    try {
+      const { collaborationManager } = await import('../../collaboration/core/collaboration-manager')
+      collaborationManager.emitRestoreIntent({
+        versionId: item.id,
+        versionName: item.marked_name,
+        initiatorUserId: userProfile.id,
+        initiatorName: userProfile.name,
+      })
+    }
+    catch (error) {
+      console.error('Failed to emit restore intent:', error)
+    }
+  }, [userProfile.id, userProfile.name])
+
+  const emitRestoreComplete = useCallback(async (item: VersionHistory, success: boolean, errorMessage?: string) => {
+    try {
+      const { collaborationManager } = await import('../../collaboration/core/collaboration-manager')
+      collaborationManager.emitRestoreComplete({
+        versionId: item.id,
+        success,
+        ...(errorMessage ? { error: errorMessage } : {}),
+      })
+    }
+    catch (error) {
+      console.error('Failed to emit restore complete:', error)
+    }
+  }, [])
+
+  const emitWorkflowUpdate = useCallback(async () => {
+    try {
+      const appId = configsMap?.flowId
+      if (!appId)
+        return
+
+      const { collaborationManager } = await import('../../collaboration/core/collaboration-manager')
+      collaborationManager.emitWorkflowUpdate(appId)
+    }
+    catch (error) {
+      console.error('Failed to emit workflow update:', error)
+    }
+  }, [configsMap?.flowId])
+
   const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
   const { mutateAsync: restoreWorkflow } = useRestoreWorkflow()
 
   const handleRestore = useCallback(async (item: VersionHistory) => {
     setShowWorkflowVersionHistoryPanel(false)
+    await emitRestoreIntent(item)
+
     try {
       await restoreWorkflow(restoreVersionUrl(item.id))
       setCurrentVersion(item)
@@ -156,14 +202,17 @@ export const VersionHistoryPanel = ({
       toast.success(t('versionHistory.action.restoreSuccess', { ns: 'workflow' }))
       deleteAllInspectVars()
       invalidAllLastRun()
+      await emitRestoreComplete(item, true)
+      await emitWorkflowUpdate()
     }
     catch {
       toast.error(t('versionHistory.action.restoreFailure', { ns: 'workflow' }))
+      await emitRestoreComplete(item, false, 'restore failed')
     }
     finally {
       resetWorkflowVersionHistory()
     }
-  }, [setShowWorkflowVersionHistoryPanel, setCurrentVersion, workflowStore, restoreWorkflow, restoreVersionUrl, handleRefreshWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, resetWorkflowVersionHistory])
+  }, [setShowWorkflowVersionHistoryPanel, emitRestoreIntent, restoreWorkflow, restoreVersionUrl, setCurrentVersion, workflowStore, handleRefreshWorkflowDraft, t, deleteAllInspectVars, invalidAllLastRun, emitRestoreComplete, emitWorkflowUpdate, resetWorkflowVersionHistory])
 
   const { mutateAsync: deleteWorkflow } = useDeleteWorkflow()
 
@@ -210,7 +259,7 @@ export const VersionHistoryPanel = ({
   return (
     <div className="flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5">
       <div className="flex items-center gap-x-2 px-4 pt-3">
-        <div className="system-xl-semibold flex-1 py-1 text-text-primary">{t('versionHistory.title', { ns: 'workflow' })}</div>
+        <div className="flex-1 py-1 system-xl-semibold text-text-primary">{t('versionHistory.title', { ns: 'workflow' })}</div>
         <Filter
           filterValue={filterValue}
           isOnlyShowNamedVersions={isOnlyShowNamedVersions}
@@ -266,7 +315,7 @@ export const VersionHistoryPanel = ({
                   ? <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-text-accent" />
                   : <RiArrowDownDoubleLine className="h-3.5 w-3.5 text-text-accent" />}
               </div>
-              <div className="system-xs-medium-uppercase py-px text-text-accent">
+              <div className="py-px system-xs-medium-uppercase text-text-accent">
                 {t('common.loadMore', { ns: 'workflow' })}
               </div>
             </div>
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 8c6304ba95..06abad65e5 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -7,7 +7,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
+import { useStore as useReactFlowStore } from 'reactflow'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -16,6 +16,7 @@ import {
   ContextMenuItem,
   ContextMenuSeparator,
 } from '@/app/components/base/ui/context-menu'
+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'
@@ -226,8 +227,12 @@ const SelectionContextmenu = () => {
   const { handleSelectionContextmenuCancel } = useSelectionInteractions()
   const { handleNodesCopy, handleNodesDelete, handleNodesDuplicate } = useNodesInteractions()
   const selectionMenu = useStore(s => s.selectionMenu)
-  const store = useStoreApi()
+
+  // Access React Flow methods
   const workflowStore = useWorkflowStore()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
+
+  // Get selected nodes for alignment logic
   const selectedNodes = useReactFlowStore(state =>
     state.getNodes().filter(node => node.selected),
   )
@@ -276,7 +281,33 @@ const SelectionContextmenu = () => {
 
     workflowStore.setState({ nodeAnimation: false })
 
-    const nodes = store.getState().getNodes()
+    // Get all current nodes
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
+
+    // Get all selected nodes
+    const selectedNodeIds = selectedNodes.map(node => node.id)
+
+    // Find container nodes and their children
+    // Container nodes (like Iteration and Loop) have child nodes that should not be aligned independently
+    // when the container is selected. This prevents child nodes from being moved outside their containers.
+    const childNodeIds = new Set<string>()
+
+    nodes.forEach((node) => {
+      // Check if this is a container node (Iteration or Loop)
+      if (node.data._children && node.data._children.length > 0) {
+        // If container node is selected, add its children to the exclusion set
+        if (selectedNodeIds.includes(node.id)) {
+          // Add all its children to the childNodeIds set
+          node.data._children.forEach((child: { nodeId: string, nodeType: string }) => {
+            childNodeIds.add(child.nodeId)
+          })
+        }
+      }
+    })
+
+    // Filter out child nodes from the alignment operation
+    // Only align nodes that are selected AND are not children of container nodes
+    // This ensures container nodes can be aligned while their children stay in the same relative position
     const nodesToAlign = getAlignableNodes(nodes, selectedNodes)
 
     if (nodesToAlign.length <= 1) {
@@ -293,7 +324,7 @@ const SelectionContextmenu = () => {
     if (alignType === AlignType.DistributeHorizontal || alignType === AlignType.DistributeVertical) {
       const distributedNodes = distributeNodes(nodesToAlign, nodes, alignType)
       if (distributedNodes) {
-        store.getState().setNodes(distributedNodes)
+        setNodes(distributedNodes)
         handleSelectionContextmenuCancel()
 
         const { setHelpLineHorizontal, setHelpLineVertical } = workflowStore.getState()
@@ -318,7 +349,10 @@ const SelectionContextmenu = () => {
     })
 
     try {
-      store.getState().setNodes(newNodes)
+      // Directly use setNodes to update nodes - consistent with handleNodeDrag
+      setNodes(newNodes)
+
+      // Close popup
       handleSelectionContextmenuCancel()
       const { setHelpLineHorizontal, setHelpLineVertical } = workflowStore.getState()
       setHelpLineHorizontal()
@@ -329,7 +363,7 @@ const SelectionContextmenu = () => {
     catch (err) {
       console.error('Failed to update nodes:', err)
     }
-  }, [store, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel])
+  }, [collaborativeWorkflow, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel])
 
   if (!selectionMenu)
     return null
diff --git a/web/app/components/workflow/store/__tests__/workflow-store.spec.ts b/web/app/components/workflow/store/__tests__/workflow-store.spec.ts
index ee820b22bf..6edc3dc316 100644
--- a/web/app/components/workflow/store/__tests__/workflow-store.spec.ts
+++ b/web/app/components/workflow/store/__tests__/workflow-store.spec.ts
@@ -173,9 +173,9 @@ describe('createWorkflowStore', () => {
       expect(store.getState().controlMode).toBe('pointer')
     })
 
-    it('should default controlMode to hand when localStorage has no value', () => {
+    it('should default controlMode to pointer when localStorage has no value', () => {
       const store = createStore()
-      expect(store.getState().controlMode).toBe('hand')
+      expect(store.getState().controlMode).toBe('pointer')
     })
 
     it('should read panelWidth from localStorage', () => {
diff --git a/web/app/components/workflow/store/workflow/__tests__/workflow-slice.spec.ts b/web/app/components/workflow/store/workflow/__tests__/workflow-slice.spec.ts
index 8c8b40caf7..1149ea3e44 100644
--- a/web/app/components/workflow/store/workflow/__tests__/workflow-slice.spec.ts
+++ b/web/app/components/workflow/store/workflow/__tests__/workflow-slice.spec.ts
@@ -8,15 +8,15 @@ describe('createWorkflowSlice', () => {
     localStorage.clear()
   })
 
-  it('defaults to hand mode until a persisted pointer mode is present', () => {
+  it('defaults to pointer mode and restores persisted control mode', () => {
     const defaultStore = createStore(createWorkflowSlice)
 
-    expect(defaultStore.getState().controlMode).toBe('hand')
+    expect(defaultStore.getState().controlMode).toBe('pointer')
 
-    localStorage.setItem('workflow-operation-mode', 'pointer')
+    localStorage.setItem('workflow-operation-mode', 'hand')
     const persistedStore = createStore(createWorkflowSlice)
 
-    expect(persistedStore.getState().controlMode).toBe('pointer')
+    expect(persistedStore.getState().controlMode).toBe('hand')
   })
 
   it('persists control mode updates and stores run state payloads', () => {
diff --git a/web/app/components/workflow/store/workflow/comment-slice.ts b/web/app/components/workflow/store/workflow/comment-slice.ts
new file mode 100644
index 0000000000..cc7605c285
--- /dev/null
+++ b/web/app/components/workflow/store/workflow/comment-slice.ts
@@ -0,0 +1,58 @@
+import type { StateCreator } from 'zustand'
+import type { UserProfile, WorkflowCommentDetail, WorkflowCommentList } from '@/service/workflow-comment'
+
+export type CommentSliceShape = {
+  comments: WorkflowCommentList[]
+  setComments: (comments: WorkflowCommentList[]) => void
+  commentsLoading: boolean
+  setCommentsLoading: (loading: boolean) => void
+  showResolvedComments: boolean
+  setShowResolvedComments: (showResolved: boolean) => void
+  activeCommentDetail: WorkflowCommentDetail | null
+  setActiveCommentDetail: (comment: WorkflowCommentDetail | null) => void
+  activeCommentDetailLoading: boolean
+  setActiveCommentDetailLoading: (loading: boolean) => void
+  replySubmitting: boolean
+  setReplySubmitting: (loading: boolean) => void
+  replyUpdating: boolean
+  setReplyUpdating: (loading: boolean) => void
+  commentDetailCache: Record<string, WorkflowCommentDetail>
+  setCommentDetailCache: (cache: Record<string, WorkflowCommentDetail>) => void
+  mentionableUsersCache: Record<string, UserProfile[]>
+  setMentionableUsersCache: (appId: string, users: UserProfile[]) => void
+  mentionableUsersLoading: Record<string, boolean>
+  setMentionableUsersLoading: (appId: string, loading: boolean) => void
+}
+
+export const createCommentSlice: StateCreator<CommentSliceShape> = set => ({
+  comments: [],
+  setComments: comments => set({ comments }),
+  commentsLoading: false,
+  setCommentsLoading: commentsLoading => set({ commentsLoading }),
+  showResolvedComments: false,
+  setShowResolvedComments: showResolvedComments => set({ showResolvedComments }),
+  activeCommentDetail: null,
+  setActiveCommentDetail: activeCommentDetail => set({ activeCommentDetail }),
+  activeCommentDetailLoading: false,
+  setActiveCommentDetailLoading: activeCommentDetailLoading => set({ activeCommentDetailLoading }),
+  replySubmitting: false,
+  setReplySubmitting: replySubmitting => set({ replySubmitting }),
+  replyUpdating: false,
+  setReplyUpdating: replyUpdating => set({ replyUpdating }),
+  commentDetailCache: {},
+  setCommentDetailCache: commentDetailCache => set({ commentDetailCache }),
+  mentionableUsersCache: {},
+  setMentionableUsersCache: (appId, users) => set(state => ({
+    mentionableUsersCache: {
+      ...state.mentionableUsersCache,
+      [appId]: users,
+    },
+  })),
+  mentionableUsersLoading: {},
+  setMentionableUsersLoading: (appId, loading) => set(state => ({
+    mentionableUsersLoading: {
+      ...state.mentionableUsersLoading,
+      [appId]: loading,
+    },
+  })),
+})
diff --git a/web/app/components/workflow/store/workflow/index.ts b/web/app/components/workflow/store/workflow/index.ts
index c2c0c00201..4bbe117b7b 100644
--- a/web/app/components/workflow/store/workflow/index.ts
+++ b/web/app/components/workflow/store/workflow/index.ts
@@ -2,6 +2,7 @@ import type {
   StateCreator,
 } from 'zustand'
 import type { ChatVariableSliceShape } from './chat-variable-slice'
+import type { CommentSliceShape } from './comment-slice'
 import type { InspectVarsSliceShape } from './debug/inspect-vars-slice'
 import type { EnvVariableSliceShape } from './env-variable-slice'
 import type { FormSliceShape } from './form-slice'
@@ -23,6 +24,7 @@ import {
 import { createStore } from 'zustand/vanilla'
 import { WorkflowContext } from '@/app/components/workflow/context'
 import { createChatVariableSlice } from './chat-variable-slice'
+import { createCommentSlice } from './comment-slice'
 import { createInspectVarsSlice } from './debug/inspect-vars-slice'
 import { createEnvVariableSlice } from './env-variable-slice'
 import { createFormSlice } from './form-slice'
@@ -53,6 +55,7 @@ export type Shape
     & VersionSliceShape
     & WorkflowDraftSliceShape
     & WorkflowSliceShape
+    & CommentSliceShape
     & InspectVarsSliceShape
     & LayoutSliceShape
     & SliceFromInjection
@@ -74,6 +77,7 @@ export const createWorkflowStore = (params: CreateWorkflowStoreParams) => {
     ...createHistorySlice(...args),
     ...createNodeSlice(...args),
     ...createPanelSlice(...args),
+    ...createCommentSlice(...args),
     ...createToolSlice(...args),
     ...createVersionSlice(...args),
     ...createWorkflowDraftSlice(...args),
diff --git a/web/app/components/workflow/store/workflow/panel-slice.ts b/web/app/components/workflow/store/workflow/panel-slice.ts
index 83292ff77e..e84d33a1eb 100644
--- a/web/app/components/workflow/store/workflow/panel-slice.ts
+++ b/web/app/components/workflow/store/workflow/panel-slice.ts
@@ -10,6 +10,12 @@ export type PanelSliceShape = {
   setShowInputsPanel: (showInputsPanel: boolean) => void
   showDebugAndPreviewPanel: boolean
   setShowDebugAndPreviewPanel: (showDebugAndPreviewPanel: boolean) => void
+  showCommentsPanel: boolean
+  setShowCommentsPanel: (showCommentsPanel: boolean) => void
+  showUserComments: boolean
+  setShowUserComments: (showUserComments: boolean) => void
+  showUserCursors: boolean
+  setShowUserCursors: (showUserCursors: boolean) => void
   panelMenu?: {
     top: number
     left: number
@@ -30,6 +36,8 @@ export type PanelSliceShape = {
   setShowVariableInspectPanel: (showVariableInspectPanel: boolean) => void
   initShowLastRunTab: boolean
   setInitShowLastRunTab: (initShowLastRunTab: boolean) => void
+  activeCommentId?: string | null
+  setActiveCommentId: (commentId: string | null) => void
 }
 
 export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
@@ -42,6 +50,12 @@ export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   setShowInputsPanel: showInputsPanel => set(() => ({ showInputsPanel })),
   showDebugAndPreviewPanel: false,
   setShowDebugAndPreviewPanel: showDebugAndPreviewPanel => set(() => ({ showDebugAndPreviewPanel })),
+  showCommentsPanel: false,
+  setShowCommentsPanel: showCommentsPanel => set(() => ({ showCommentsPanel })),
+  showUserComments: true,
+  setShowUserComments: showUserComments => set(() => ({ showUserComments })),
+  showUserCursors: true,
+  setShowUserCursors: showUserCursors => set(() => ({ showUserCursors })),
   panelMenu: undefined,
   setPanelMenu: panelMenu => set(() => ({ panelMenu })),
   selectionMenu: undefined,
@@ -52,4 +66,6 @@ export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   setShowVariableInspectPanel: showVariableInspectPanel => set(() => ({ showVariableInspectPanel })),
   initShowLastRunTab: false,
   setInitShowLastRunTab: initShowLastRunTab => set(() => ({ initShowLastRunTab })),
+  activeCommentId: null,
+  setActiveCommentId: (commentId: string | null) => set(() => ({ activeCommentId: commentId })),
 })
diff --git a/web/app/components/workflow/store/workflow/workflow-slice.ts b/web/app/components/workflow/store/workflow/workflow-slice.ts
index 5a479d3e44..c3b41f06a2 100644
--- a/web/app/components/workflow/store/workflow/workflow-slice.ts
+++ b/web/app/components/workflow/store/workflow/workflow-slice.ts
@@ -13,6 +13,13 @@ type PreviewRunningData = WorkflowRunningData & {
   extraContentAndFormData?: Record<string, any>
 }
 
+type MousePosition = {
+  pageX: number
+  pageY: number
+  elementX: number
+  elementY: number
+}
+
 export type WorkflowSliceShape = {
   workflowRunningData?: PreviewRunningData
   setWorkflowRunningData: (workflowData: PreviewRunningData) => void
@@ -32,8 +39,16 @@ export type WorkflowSliceShape = {
   setSelection: (selection: WorkflowSliceShape['selection']) => void
   bundleNodeSize: { width: number, height: number } | null
   setBundleNodeSize: (bundleNodeSize: WorkflowSliceShape['bundleNodeSize']) => void
-  controlMode: 'pointer' | 'hand'
+  controlMode: 'pointer' | 'hand' | 'comment'
   setControlMode: (controlMode: WorkflowSliceShape['controlMode']) => void
+  pendingComment: MousePosition | null
+  setPendingComment: (pendingComment: WorkflowSliceShape['pendingComment']) => void
+  isCommentPlacing: boolean
+  setCommentPlacing: (isCommentPlacing: boolean) => void
+  isCommentQuickAdd: boolean
+  setCommentQuickAdd: (isCommentQuickAdd: boolean) => void
+  isCommentPreviewHovering: boolean
+  setCommentPreviewHovering: (hovering: boolean) => void
   mousePosition: { pageX: number, pageY: number, elementX: number, elementY: number }
   setMousePosition: (mousePosition: WorkflowSliceShape['mousePosition']) => void
   showConfirm?: { title: string, desc?: string, onConfirm: () => void }
@@ -65,13 +80,27 @@ export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
   setSelection: selection => set(() => ({ selection })),
   bundleNodeSize: null,
   setBundleNodeSize: bundleNodeSize => set(() => ({ bundleNodeSize })),
-  controlMode: localStorage.getItem('workflow-operation-mode') === 'pointer' ? 'pointer' : 'hand',
+  controlMode: (() => {
+    const storedControlMode = localStorage.getItem('workflow-operation-mode')
+    if (storedControlMode === 'pointer' || storedControlMode === 'hand' || storedControlMode === 'comment')
+      return storedControlMode
+
+    return 'pointer'
+  })(),
   setControlMode: (controlMode) => {
     set(() => ({ controlMode }))
     localStorage.setItem('workflow-operation-mode', controlMode)
   },
+  pendingComment: null,
+  setPendingComment: pendingComment => set(() => ({ pendingComment })),
+  isCommentPlacing: false,
+  setCommentPlacing: isCommentPlacing => set(() => ({ isCommentPlacing })),
+  isCommentQuickAdd: false,
+  setCommentQuickAdd: isCommentQuickAdd => set(() => ({ isCommentQuickAdd })),
   mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
   setMousePosition: mousePosition => set(() => ({ mousePosition })),
+  isCommentPreviewHovering: false,
+  setCommentPreviewHovering: hovering => set(() => ({ isCommentPreviewHovering: hovering })),
   showConfirm: undefined,
   setShowConfirm: showConfirm => set(() => ({ showConfirm })),
   controlPromptEditorRerenderKey: 0,
diff --git a/web/app/components/workflow/style.css b/web/app/components/workflow/style.css
index 9d88ac2644..e0ad764986 100644
--- a/web/app/components/workflow/style.css
+++ b/web/app/components/workflow/style.css
@@ -6,6 +6,12 @@
   transition: transform 0.2s ease-in-out;
 }
 
+/* Comment mode cursor override */
+.comment-mode-flow .react-flow__pane,
+.comment-mode-flow .react-flow__viewport {
+  cursor: none !important;
+}
+
 #workflow-container .react-flow__nodesselection-rect {
   border: 1px solid #528BFF;
   background: rgba(21, 94, 239, 0.05);
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index a770616d5d..efd21e099c 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -61,6 +61,7 @@ export enum BlockEnum {
 export enum ControlMode {
   Pointer = 'pointer',
   Hand = 'hand',
+  Comment = 'comment',
 }
 export enum ErrorHandleMode {
   Terminated = 'terminated',
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 98176033c9..04d687ce73 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -29,6 +29,7 @@ import {
   importDSLConfirm,
 } from '@/service/apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
+import { collaborationManager } from './collaboration/core/collaboration-manager'
 import { WORKFLOW_DATA_UPDATE } from './constants'
 import {
   getImportNotificationPayload,
@@ -113,6 +114,7 @@ const UpdateDSLModal = ({
     }
 
     await handleWorkflowUpdate(appId)
+    collaborationManager.emitWorkflowUpdate(appId)
     onImport?.()
     const payload = getImportNotificationPayload(status, t)
     toast[payload.type](payload.message, payload.children ? { description: payload.children } : undefined)
diff --git a/web/app/components/workflow/variable-inspect/__tests__/panel.spec.tsx b/web/app/components/workflow/variable-inspect/__tests__/panel.spec.tsx
index 2bd1fbb00f..cafed9ce4e 100644
--- a/web/app/components/workflow/variable-inspect/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/variable-inspect/__tests__/panel.spec.tsx
@@ -57,16 +57,16 @@ vi.mock('../../hooks/use-nodes-interactions', () => ({
   }),
 }))
 
-vi.mock('../../hooks', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../hooks')>()
-  return {
-    ...actual,
-    useNodesInteractions: () => ({
-      handleNodeSelect: mockHandleNodeSelect,
-    }),
-    useToolIcon: () => '',
-  }
-})
+vi.mock('../../hooks', () => ({
+  useNodesInteractions: () => ({
+    handleNodeSelect: mockHandleNodeSelect,
+  }),
+  useToolIcon: () => '',
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-tool-icon', () => ({
+  useGetToolIcon: () => () => '',
+}))
 
 vi.mock('../../nodes/_base/hooks/use-node-crud', () => ({
   default: () => ({
diff --git a/web/config/index.ts b/web/config/index.ts
index 63967763f6..15999a56e6 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -116,6 +116,10 @@ const COOKIE_DOMAIN = getStringConfig(
   env.NEXT_PUBLIC_COOKIE_DOMAIN,
   '',
 ).trim()
+export const SOCKET_URL = getStringConfig(
+  env.NEXT_PUBLIC_SOCKET_URL,
+  'ws://localhost:5001',
+).trim()
 
 export const BATCH_CONCURRENCY = env.NEXT_PUBLIC_BATCH_CONCURRENCY
 
diff --git a/web/contract/console/account.ts b/web/contract/console/account.ts
new file mode 100644
index 0000000000..a8a468c40d
--- /dev/null
+++ b/web/contract/console/account.ts
@@ -0,0 +1,14 @@
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export const accountAvatarContract = base
+  .route({
+    path: '/account/avatar',
+    method: 'GET',
+  })
+  .input(type<{
+    query: {
+      avatar: string
+    }
+  }>())
+  .output(type<{ avatar_url: string }>())
diff --git a/web/contract/console/apps.ts b/web/contract/console/apps.ts
index 4fbcfec0cf..ff4f5096b2 100644
--- a/web/contract/console/apps.ts
+++ b/web/contract/console/apps.ts
@@ -1,3 +1,4 @@
+import type { WorkflowOnlineUsersResponse } from '@/models/app'
 import { type } from '@orpc/contract'
 import { base } from '../base'
 
@@ -12,3 +13,15 @@ export const appDeleteContract = base
     }
   }>())
   .output(type<unknown>())
+
+export const workflowOnlineUsersContract = base
+  .route({
+    path: '/apps/workflows/online-users',
+    method: 'GET',
+  })
+  .input(type<{
+    query: {
+      app_ids: string
+    }
+  }>())
+  .output(type<WorkflowOnlineUsersResponse>())
diff --git a/web/contract/console/workflow-comment.ts b/web/contract/console/workflow-comment.ts
new file mode 100644
index 0000000000..06defa31af
--- /dev/null
+++ b/web/contract/console/workflow-comment.ts
@@ -0,0 +1,253 @@
+import type { CommonResponse } from '@/models/common'
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export type UserProfile = {
+  id: string
+  name: string
+  email: string
+  avatar_url?: string
+}
+
+export type WorkflowCommentList = {
+  id: string
+  position_x: number
+  position_y: number
+  content: string
+  created_by: string
+  created_by_account: UserProfile
+  created_at: number
+  updated_at: number
+  resolved: boolean
+  resolved_by?: string
+  resolved_by_account?: UserProfile
+  resolved_at?: number
+  mention_count: number
+  reply_count: number
+  participants: UserProfile[]
+}
+
+export type WorkflowCommentDetailMention = {
+  mentioned_user_id: string
+  mentioned_user_account?: UserProfile | null
+  reply_id: string | null
+}
+
+export type WorkflowCommentDetailReply = {
+  id: string
+  content: string
+  created_by: string
+  created_by_account?: UserProfile | null
+  created_at: number
+}
+
+export type WorkflowCommentDetail = {
+  id: string
+  position_x: number
+  position_y: number
+  content: string
+  created_by: string
+  created_by_account: UserProfile
+  created_at: number
+  updated_at: number
+  resolved: boolean
+  resolved_by?: string
+  resolved_by_account?: UserProfile
+  resolved_at?: number
+  replies: WorkflowCommentDetailReply[]
+  mentions: WorkflowCommentDetailMention[]
+}
+
+export type WorkflowCommentCreateRes = {
+  id: string
+  created_at: string
+}
+
+export type WorkflowCommentUpdateRes = {
+  id: string
+  updated_at: string
+}
+
+export type WorkflowCommentResolveRes = {
+  id: string
+  resolved: boolean
+  resolved_by: string
+  resolved_at: number
+}
+
+export type WorkflowCommentReplyCreateRes = {
+  id: string
+  created_at: string
+}
+
+export type WorkflowCommentReplyUpdateRes = {
+  id: string
+  updated_at: string
+}
+
+export type CreateCommentParams = {
+  position_x: number
+  position_y: number
+  content: string
+  mentioned_user_ids?: string[]
+}
+
+export type UpdateCommentParams = {
+  content: string
+  position_x?: number
+  position_y?: number
+  mentioned_user_ids?: string[]
+}
+
+export type CreateReplyParams = {
+  content: string
+  mentioned_user_ids?: string[]
+}
+
+const workflowCommentListContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+  }>())
+  .output(type<{ data: WorkflowCommentList[] }>())
+
+const workflowCommentCreateContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+    body: CreateCommentParams
+  }>())
+  .output(type<WorkflowCommentCreateRes>())
+
+const workflowCommentDetailContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+    }
+  }>())
+  .output(type<WorkflowCommentDetail>())
+
+const workflowCommentUpdateContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}',
+    method: 'PUT',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+    }
+    body: UpdateCommentParams
+  }>())
+  .output(type<WorkflowCommentUpdateRes>())
+
+const workflowCommentDeleteContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}',
+    method: 'DELETE',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+    }
+  }>())
+  .output(type<CommonResponse>())
+
+const workflowCommentResolveContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}/resolve',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+    }
+  }>())
+  .output(type<WorkflowCommentResolveRes>())
+
+const workflowCommentReplyCreateContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}/replies',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+    }
+    body: CreateReplyParams
+  }>())
+  .output(type<WorkflowCommentReplyCreateRes>())
+
+const workflowCommentReplyUpdateContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}/replies/{replyId}',
+    method: 'PUT',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+      replyId: string
+    }
+    body: CreateReplyParams
+  }>())
+  .output(type<WorkflowCommentReplyUpdateRes>())
+
+const workflowCommentReplyDeleteContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/{commentId}/replies/{replyId}',
+    method: 'DELETE',
+  })
+  .input(type<{
+    params: {
+      appId: string
+      commentId: string
+      replyId: string
+    }
+  }>())
+  .output(type<CommonResponse>())
+
+const workflowCommentMentionUsersContract = base
+  .route({
+    path: '/apps/{appId}/workflow/comments/mention-users',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+  }>())
+  .output(type<{ users: UserProfile[] }>())
+
+export const workflowCommentContracts = {
+  list: workflowCommentListContract,
+  create: workflowCommentCreateContract,
+  detail: workflowCommentDetailContract,
+  update: workflowCommentUpdateContract,
+  delete: workflowCommentDeleteContract,
+  resolve: workflowCommentResolveContract,
+  mentionUsers: workflowCommentMentionUsersContract,
+  replies: {
+    create: workflowCommentReplyCreateContract,
+    update: workflowCommentReplyUpdateContract,
+    delete: workflowCommentReplyDeleteContract,
+  },
+}
diff --git a/web/contract/console/workflow.ts b/web/contract/console/workflow.ts
new file mode 100644
index 0000000000..2c70a58e25
--- /dev/null
+++ b/web/contract/console/workflow.ts
@@ -0,0 +1,80 @@
+import type {
+  FileUpload,
+  RetrieverResource,
+  SensitiveWordAvoidance,
+  SpeechToText,
+  SuggestedQuestionsAfterAnswer,
+  TextToSpeech,
+} from '@/app/components/base/features/types'
+import type { ConversationVariable, EnvironmentVariable } from '@/app/components/workflow/types'
+import type { CommonResponse } from '@/models/common'
+import { type } from '@orpc/contract'
+import { base } from '../base'
+
+export type WorkflowDraftFeaturesPayload = {
+  opening_statement: string
+  suggested_questions: string[]
+  suggested_questions_after_answer?: SuggestedQuestionsAfterAnswer
+  text_to_speech?: TextToSpeech
+  speech_to_text?: SpeechToText
+  retriever_resource?: RetrieverResource
+  sensitive_word_avoidance?: SensitiveWordAvoidance
+  file_upload?: FileUpload
+}
+
+export const workflowDraftEnvironmentVariablesContract = base
+  .route({
+    path: '/apps/{appId}/workflows/draft/environment-variables',
+    method: 'GET',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+  }>())
+  .output(type<{ items: EnvironmentVariable[] }>())
+
+export const workflowDraftUpdateEnvironmentVariablesContract = base
+  .route({
+    path: '/apps/{appId}/workflows/draft/environment-variables',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+    body: {
+      environment_variables: EnvironmentVariable[]
+    }
+  }>())
+  .output(type<CommonResponse>())
+
+export const workflowDraftUpdateConversationVariablesContract = base
+  .route({
+    path: '/apps/{appId}/workflows/draft/conversation-variables',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+    body: {
+      conversation_variables: ConversationVariable[]
+    }
+  }>())
+  .output(type<CommonResponse>())
+
+export const workflowDraftUpdateFeaturesContract = base
+  .route({
+    path: '/apps/{appId}/workflows/draft/features',
+    method: 'POST',
+  })
+  .input(type<{
+    params: {
+      appId: string
+    }
+    body: {
+      features: WorkflowDraftFeaturesPayload
+    }
+  }>())
+  .output(type<CommonResponse>())
diff --git a/web/contract/router.ts b/web/contract/router.ts
index eec3966ad1..45f514a820 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -1,5 +1,6 @@
 import type { InferContractRouterInputs } from '@orpc/contract'
-import { appDeleteContract } from './console/apps'
+import { accountAvatarContract } from './console/account'
+import { appDeleteContract, workflowOnlineUsersContract } from './console/apps'
 import { bindPartnerStackContract, invoicesContract } from './console/billing'
 import {
   exploreAppDetailContract,
@@ -34,6 +35,13 @@ import {
   triggerSubscriptionVerifyContract,
 } from './console/trigger'
 import { trialAppDatasetsContract, trialAppInfoContract, trialAppParametersContract, trialAppWorkflowsContract } from './console/try-app'
+import {
+  workflowDraftEnvironmentVariablesContract,
+  workflowDraftUpdateConversationVariablesContract,
+  workflowDraftUpdateEnvironmentVariablesContract,
+  workflowDraftUpdateFeaturesContract,
+} from './console/workflow'
+import { workflowCommentContracts } from './console/workflow-comment'
 import { collectionPluginsContract, collectionsContract, searchAdvancedContract } from './marketplace'
 
 export const marketplaceRouterContract = {
@@ -45,9 +53,13 @@ export const marketplaceRouterContract = {
 export type MarketPlaceInputs = InferContractRouterInputs<typeof marketplaceRouterContract>
 
 export const consoleRouterContract = {
+  account: {
+    avatar: accountAvatarContract,
+  },
   systemFeatures: systemFeaturesContract,
   apps: {
     deleteApp: appDeleteContract,
+    workflowOnlineUsers: workflowOnlineUsersContract,
   },
   explore: {
     apps: exploreAppsContract,
@@ -78,6 +90,13 @@ export const consoleRouterContract = {
     invoices: invoicesContract,
     bindPartnerStack: bindPartnerStackContract,
   },
+  workflowDraft: {
+    environmentVariables: workflowDraftEnvironmentVariablesContract,
+    updateEnvironmentVariables: workflowDraftUpdateEnvironmentVariablesContract,
+    updateConversationVariables: workflowDraftUpdateConversationVariablesContract,
+    updateFeatures: workflowDraftUpdateFeaturesContract,
+  },
+  workflowComments: workflowCommentContracts,
   notification: notificationContract,
   notificationDismiss: notificationDismissContract,
   triggers: {
diff --git a/web/docker/entrypoint.sh b/web/docker/entrypoint.sh
index 3e42d48d0c..a0b456dc9f 100755
--- a/web/docker/entrypoint.sh
+++ b/web/docker/entrypoint.sh
@@ -19,6 +19,7 @@ export NEXT_PUBLIC_API_PREFIX=${CONSOLE_API_URL}/console/api
 export NEXT_PUBLIC_PUBLIC_API_PREFIX=${APP_API_URL}/api
 export NEXT_PUBLIC_MARKETPLACE_API_PREFIX=${MARKETPLACE_API_URL}/api/v1
 export NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=${MARKETPLACE_URL}
+export NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}
 export NEXT_PUBLIC_COOKIE_DOMAIN=${NEXT_PUBLIC_COOKIE_DOMAIN}
 
 export NEXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
diff --git a/web/env.ts b/web/env.ts
index 3623b68462..0c2868be5c 100644
--- a/web/env.ts
+++ b/web/env.ts
@@ -116,6 +116,7 @@ const clientSchema = {
    */
   NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
   NEXT_PUBLIC_SITE_ABOUT: z.string().optional(),
+  NEXT_PUBLIC_SOCKET_URL: z.string().optional(),
   NEXT_PUBLIC_SUPPORT_EMAIL_ADDRESS: z.email().optional(),
   NEXT_PUBLIC_SUPPORT_MAIL_LOGIN: coercedBoolean.default(false),
   /**
@@ -186,6 +187,7 @@ export const env = createEnv({
     NEXT_PUBLIC_PUBLIC_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX : getRuntimeEnvFromBody('publicApiPrefix'),
     NEXT_PUBLIC_SENTRY_DSN: isServer ? process.env.NEXT_PUBLIC_SENTRY_DSN : getRuntimeEnvFromBody('sentryDsn'),
     NEXT_PUBLIC_SITE_ABOUT: isServer ? process.env.NEXT_PUBLIC_SITE_ABOUT : getRuntimeEnvFromBody('siteAbout'),
+    NEXT_PUBLIC_SOCKET_URL: isServer ? process.env.NEXT_PUBLIC_SOCKET_URL : getRuntimeEnvFromBody('socketUrl'),
     NEXT_PUBLIC_SUPPORT_EMAIL_ADDRESS: isServer ? process.env.NEXT_PUBLIC_SUPPORT_EMAIL_ADDRESS : getRuntimeEnvFromBody('supportEmailAddress'),
     NEXT_PUBLIC_SUPPORT_MAIL_LOGIN: isServer ? process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN : getRuntimeEnvFromBody('supportMailLogin'),
     NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS: isServer ? process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS : getRuntimeEnvFromBody('textGenerationTimeoutMs'),
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index ea12a80ecf..a5fdb872f9 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -114,9 +114,6 @@
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "perfectionist/sort-imports": {
-      "count": 1
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
@@ -883,6 +880,9 @@
     },
     "react/unsupported-syntax": {
       "count": 2
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
     }
   },
   "app/components/apps/new-app-card.tsx": {
@@ -1260,6 +1260,11 @@
       "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
@@ -1720,7 +1725,7 @@
   },
   "app/components/base/icons/src/public/other/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 5
+      "count": 6
     }
   },
   "app/components/base/icons/src/public/thought/index.ts": {
@@ -3708,9 +3713,6 @@
   "app/components/develop/secret-key/secret-key-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "perfectionist/sort-imports": {
-      "count": 1
     }
   },
   "app/components/explore/banner/banner-item.tsx": {
@@ -5217,11 +5219,6 @@
       "count": 3
     }
   },
-  "app/components/workflow-app/components/workflow-main.tsx": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -5437,6 +5434,16 @@
       "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
@@ -5536,7 +5543,7 @@
   },
   "app/components/workflow/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 25
+      "count": 27
     }
   },
   "app/components/workflow/hooks/use-checklist.ts": {
@@ -5562,11 +5569,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/hooks/use-node-data-update.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "app/components/workflow/hooks/use-nodes-interactions.ts": {
     "ts/no-explicit-any": {
       "count": 8
@@ -5609,7 +5611,7 @@
   },
   "app/components/workflow/index.tsx": {
     "ts/no-explicit-any": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/add-variable-popup-with-position.tsx": {
@@ -6939,6 +6941,11 @@
       "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
@@ -7414,6 +7421,11 @@
       "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
@@ -7493,11 +7505,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/version-history-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/panel/version-history-panel/loading/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index 56192350c3..6b9d2b2f8c 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "متغيرات المحادثة",
   "chatVariable.storedContent": "المحتوى المخزن",
   "chatVariable.updatedAt": "تم التحديث في ",
+  "collaboration.historyAction.generic": "قام متعاون بعملية تراجع/إعادة",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "حذف الرد",
+  "comments.actions.editComment": "تعديل التعليق",
+  "comments.actions.editReply": "تعديل الرد",
+  "comments.aria.closeComment": "إغلاق التعليق",
+  "comments.aria.commentActions": "إجراءات التعليق",
+  "comments.aria.deleteComment": "حذف المناقشة",
+  "comments.aria.filterComments": "تصفية التعليقات",
+  "comments.aria.nextComment": "التعليق التالي",
+  "comments.aria.previousComment": "التعليق السابق",
+  "comments.aria.replyActions": "إجراءات الرد",
+  "comments.aria.resolveComment": "حلّ",
+  "comments.confirm.deleteReplyDesc": "سيتم حذف هذا الرد نهائيًا.",
+  "comments.confirm.deleteReplyTitle": "حذف هذا الرد؟",
+  "comments.confirm.deleteThreadDesc": "سيؤدي هذا الإجراء إلى حذف المناقشة وجميع الردود نهائيًا ولا يمكن التراجع عنه.",
+  "comments.confirm.deleteThreadTitle": "حذف هذه المناقشة؟",
+  "comments.fallback.user": "مستخدم",
+  "comments.filter.all": "الكل",
+  "comments.filter.onlyYourThreads": "مناقشاتك فقط",
+  "comments.filter.showResolved": "إظهار المحلولة",
+  "comments.loading": "جارٍ التحميل…",
+  "comments.noComments": "لا توجد تعليقات بعد",
+  "comments.panelTitle": "التعليقات",
+  "comments.placeholder.add": "أضف تعليقًا",
+  "comments.placeholder.editComment": "تعديل التعليق",
+  "comments.placeholder.editReply": "تعديل الرد",
+  "comments.placeholder.reply": "رد",
+  "comments.reply": "رد",
   "common.ImageUploadLegacyTip": "يمكنك الآن إنشاء متغيرات نوع الملف في نموذج البداية. لن ندعم ميزة تحميل الصور في المستقبل. ",
   "common.accessAPIReference": "الوصول إلى مرجع API",
   "common.addBlock": "إضافة عقدة",
@@ -122,6 +151,7 @@
   "common.branch": "فرع",
   "common.chooseDSL": "اختر ملف DSL",
   "common.chooseStartNodeToRun": "اختر عقدة البداية للتشغيل",
+  "common.commentMode": "وضع التعليقات",
   "common.configure": "تكوين",
   "common.configureRequired": "التكوين مطلوب",
   "common.conversationLog": "سجل المحادثة",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "توزيع عمودي",
   "operator.horizontal": "أفقي",
   "operator.selectionAlignment": "محاذاة التحديد",
+  "operator.showMiniMap": "الخريطة المصغرة",
+  "operator.showUserComments": "التعليقات",
+  "operator.showUserCursors": "مؤشرات المتعاونين",
   "operator.vertical": "عمودي",
   "operator.zoomIn": "تكبير",
   "operator.zoomOut": "تصغير",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "فشل حذف الإصدار",
   "versionHistory.action.deleteSuccess": "تم حذف الإصدار",
   "versionHistory.action.restoreFailure": "فشل استعادة الإصدار",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 75cb0d30ca..20a142431c 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Gesprächsvariablen",
   "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.deleteReply": "Antwort löschen",
+  "comments.actions.editComment": "Kommentar bearbeiten",
+  "comments.actions.editReply": "Antwort bearbeiten",
+  "comments.aria.closeComment": "Kommentar schließen",
+  "comments.aria.commentActions": "Kommentaraktionen",
+  "comments.aria.deleteComment": "Kommentar löschen",
+  "comments.aria.filterComments": "Kommentare filtern",
+  "comments.aria.nextComment": "Nächster Kommentar",
+  "comments.aria.previousComment": "Vorheriger Kommentar",
+  "comments.aria.replyActions": "Antwortaktionen",
+  "comments.aria.resolveComment": "Kommentar abschließen",
+  "comments.confirm.deleteReplyDesc": "Diese Antwort wird dauerhaft entfernt.",
+  "comments.confirm.deleteReplyTitle": "Diese Antwort löschen?",
+  "comments.confirm.deleteThreadDesc": "Dadurch werden der Thread und alle Antworten dauerhaft gelöscht. Dies kann nicht rückgängig gemacht werden.",
+  "comments.confirm.deleteThreadTitle": "Diesen Thread löschen?",
+  "comments.fallback.user": "Benutzer",
+  "comments.filter.all": "Alle",
+  "comments.filter.onlyYourThreads": "Nur deine Threads",
+  "comments.filter.showResolved": "Gelöste anzeigen",
+  "comments.loading": "Laden…",
+  "comments.noComments": "Noch keine Kommentare",
+  "comments.panelTitle": "Kommentar",
+  "comments.placeholder.add": "Kommentar hinzufügen",
+  "comments.placeholder.editComment": "Kommentar bearbeiten",
+  "comments.placeholder.editReply": "Antwort bearbeiten",
+  "comments.placeholder.reply": "Antworten",
+  "comments.reply": "Antworten",
   "common.ImageUploadLegacyTip": "Sie können jetzt Dateitypvariablen im Startformular erstellen. Wir werden die Funktion zum Hochladen von Bildern in Zukunft nicht mehr unterstützen.",
   "common.accessAPIReference": "API-Referenz aufrufen",
   "common.addBlock": "Knoten hinzufügen",
@@ -122,6 +151,7 @@
   "common.branch": "ZWEIG",
   "common.chooseDSL": "Wählen Sie eine DSL(yml)-Datei",
   "common.chooseStartNodeToRun": "Wählen Sie den Startknoten zum Ausführen",
+  "common.commentMode": "Kommentar-Modus",
   "common.configure": "Konfigurieren",
   "common.configureRequired": "Konfiguration erforderlich",
   "common.conversationLog": "Konversationsprotokoll",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Vertikal verteilen",
   "operator.horizontal": "Horizontal",
   "operator.selectionAlignment": "Ausrichtung der Auswahl",
+  "operator.showMiniMap": "Minikarte",
+  "operator.showUserComments": "Kommentare",
+  "operator.showUserCursors": "Cursor von Mitarbeitenden",
   "operator.vertical": "Vertikal",
   "operator.zoomIn": "Vergrößern",
   "operator.zoomOut": "Verkleinern",
@@ -1156,6 +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.restoreSuccess": "Version wiederhergestellt",
   "versionHistory.action.updateFailure": "Aktualisierung der Version fehlgeschlagen",
   "versionHistory.action.updateSuccess": "Version aktualisiert",
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 42522950b8..aaadce8814 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Conversation Variables",
   "chatVariable.storedContent": "Stored content",
   "chatVariable.updatedAt": "Updated at ",
+  "collaboration.historyAction.generic": "A collaborator performed an undo/redo action",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Edit comment",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Comment actions",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Filter comments",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "All",
+  "comments.filter.onlyYourThreads": "Only your threads",
+  "comments.filter.showResolved": "Show resolved",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Edit comment",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "You can now create file type variables in the start form. We will no longer support the image upload feature in the future. ",
   "common.accessAPIReference": "Access API Reference",
   "common.addBlock": "Add Node",
@@ -122,6 +151,7 @@
   "common.branch": "BRANCH",
   "common.chooseDSL": "Choose DSL file",
   "common.chooseStartNodeToRun": "Choose the start node to run",
+  "common.commentMode": "Comment Mode",
   "common.configure": "Configure",
   "common.configureRequired": "Configure Required",
   "common.conversationLog": "Conversation Log",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Space Vertically",
   "operator.horizontal": "Horizontal",
   "operator.selectionAlignment": "Selection Alignment",
+  "operator.showMiniMap": "Minimap",
+  "operator.showUserComments": "Comments",
+  "operator.showUserCursors": "Collaborator cursors",
   "operator.vertical": "Vertical",
   "operator.zoomIn": "Zoom In",
   "operator.zoomOut": "Zoom Out",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "Failed to delete version",
   "versionHistory.action.deleteSuccess": "Version deleted",
   "versionHistory.action.restoreFailure": "Failed to restore version",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Version restored",
   "versionHistory.action.updateFailure": "Failed to update version",
   "versionHistory.action.updateSuccess": "Version updated",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index 5545707b4f..2b7ca99452 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Variables de Conversación",
   "chatVariable.storedContent": "Contenido almacenado",
   "chatVariable.updatedAt": "Actualizado el ",
+  "collaboration.historyAction.generic": "Un colaborador realizó deshacer/rehacer",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Eliminar respuesta",
+  "comments.actions.editComment": "Editar comentario",
+  "comments.actions.editReply": "Editar respuesta",
+  "comments.aria.closeComment": "Cerrar comentario",
+  "comments.aria.commentActions": "Acciones del comentario",
+  "comments.aria.deleteComment": "Eliminar comentario",
+  "comments.aria.filterComments": "Filtrar comentarios",
+  "comments.aria.nextComment": "Comentario siguiente",
+  "comments.aria.previousComment": "Comentario anterior",
+  "comments.aria.replyActions": "Acciones de respuesta",
+  "comments.aria.resolveComment": "Resolver comentario",
+  "comments.confirm.deleteReplyDesc": "Esta respuesta se eliminará de forma permanente.",
+  "comments.confirm.deleteReplyTitle": "¿Eliminar esta respuesta?",
+  "comments.confirm.deleteThreadDesc": "Esta acción eliminará permanentemente la conversación y todas sus respuestas. No se puede deshacer.",
+  "comments.confirm.deleteThreadTitle": "¿Eliminar esta conversación?",
+  "comments.fallback.user": "Usuario",
+  "comments.filter.all": "Todos",
+  "comments.filter.onlyYourThreads": "Solo tus hilos",
+  "comments.filter.showResolved": "Mostrar resueltos",
+  "comments.loading": "Cargando…",
+  "comments.noComments": "Aún no hay comentarios",
+  "comments.panelTitle": "Comentario",
+  "comments.placeholder.add": "Añadir un comentario",
+  "comments.placeholder.editComment": "Editar comentario",
+  "comments.placeholder.editReply": "Editar respuesta",
+  "comments.placeholder.reply": "Responder",
+  "comments.reply": "Responder",
   "common.ImageUploadLegacyTip": "Ahora puede crear variables de tipo de archivo en el formulario de inicio. Ya no admitiremos la función de carga de imágenes en el futuro.",
   "common.accessAPIReference": "Acceder a la referencia de la API",
   "common.addBlock": "Agregar nodo",
@@ -122,6 +151,7 @@
   "common.branch": "RAMA",
   "common.chooseDSL": "Elegir archivo DSL (yml)",
   "common.chooseStartNodeToRun": "Elige el nodo de inicio para ejecutar",
+  "common.commentMode": "Modo de comentarios",
   "common.configure": "Configurar",
   "common.configureRequired": "Configuración requerida",
   "common.conversationLog": "Registro de conversación",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Espaciar verticalmente",
   "operator.horizontal": "Horizontal",
   "operator.selectionAlignment": "Alineación de selección",
+  "operator.showMiniMap": "Minimapa",
+  "operator.showUserComments": "Comentarios",
+  "operator.showUserCursors": "Cursores de colaboradores",
   "operator.vertical": "Vertical",
   "operator.zoomIn": "Acercar",
   "operator.zoomOut": "Alejar",
@@ -1156,6 +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.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 fbe6685681..3dfaff292e 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "متغیرهای مکالمه",
   "chatVariable.storedContent": "محتوای ذخیره‌شده",
   "chatVariable.updatedAt": "به‌روزرسانی شده در ",
+  "collaboration.historyAction.generic": "یک همکار عملیات برگرداندن/انجام مجدد را انجام داد",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "حذف پاسخ",
+  "comments.actions.editComment": "ویرایش دیدگاه",
+  "comments.actions.editReply": "ویرایش پاسخ",
+  "comments.aria.closeComment": "بستن دیدگاه",
+  "comments.aria.commentActions": "عملیات دیدگاه",
+  "comments.aria.deleteComment": "حذف دیدگاه",
+  "comments.aria.filterComments": "فیلتر دیدگاه‌ها",
+  "comments.aria.nextComment": "دیدگاه بعدی",
+  "comments.aria.previousComment": "دیدگاه قبلی",
+  "comments.aria.replyActions": "عملیات پاسخ",
+  "comments.aria.resolveComment": "حل‌کردن دیدگاه",
+  "comments.confirm.deleteReplyDesc": "این پاسخ برای همیشه حذف خواهد شد.",
+  "comments.confirm.deleteReplyTitle": "این پاسخ حذف شود؟",
+  "comments.confirm.deleteThreadDesc": "این عملیات گفتگو و تمام پاسخ‌های آن را برای همیشه حذف می‌کند و قابل بازگردانی نیست.",
+  "comments.confirm.deleteThreadTitle": "این گفتگو حذف شود؟",
+  "comments.fallback.user": "کاربر",
+  "comments.filter.all": "همه",
+  "comments.filter.onlyYourThreads": "فقط رشته‌های شما",
+  "comments.filter.showResolved": "نمایش حل‌شده‌ها",
+  "comments.loading": "در حال بارگذاری…",
+  "comments.noComments": "هنوز دیدگاهی ثبت نشده است",
+  "comments.panelTitle": "دیدگاه",
+  "comments.placeholder.add": "افزودن دیدگاه",
+  "comments.placeholder.editComment": "ویرایش دیدگاه",
+  "comments.placeholder.editReply": "ویرایش پاسخ",
+  "comments.placeholder.reply": "پاسخ",
+  "comments.reply": "پاسخ",
   "common.ImageUploadLegacyTip": "اکنون می‌توانید متغیرهای نوع فایل را در فرم شروع ایجاد کنید. پشتیبانی از ویژگی قدیمی آپلود تصویر به‌زودی متوقف خواهد شد.",
   "common.accessAPIReference": "دسترسی به مستندات API",
   "common.addBlock": "افزودن گره",
@@ -122,6 +151,7 @@
   "common.branch": "شاخه",
   "common.chooseDSL": "انتخاب فایل DSL (yml)",
   "common.chooseStartNodeToRun": "گره شروع را برای اجرا انتخاب کنید",
+  "common.commentMode": "حالت نظرات",
   "common.configure": "پیکربندی",
   "common.configureRequired": "پیکربندی الزامی است",
   "common.conversationLog": "لاگ مکالمات",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "توزیع عمودی",
   "operator.horizontal": "افقی",
   "operator.selectionAlignment": "تراز انتخاب",
+  "operator.showMiniMap": "نقشه کوچک",
+  "operator.showUserComments": "نظرات",
+  "operator.showUserCursors": "نشانگرهای همکاران",
   "operator.vertical": "عمودی",
   "operator.zoomIn": "بزرگ‌نمایی",
   "operator.zoomOut": "کوچک‌نمایی",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index b7f7048ad2..d4fbd8f27a 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Variables de Conversation",
   "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.deleteReply": "Supprimer la réponse",
+  "comments.actions.editComment": "Modifier le commentaire",
+  "comments.actions.editReply": "Modifier la réponse",
+  "comments.aria.closeComment": "Fermer le commentaire",
+  "comments.aria.commentActions": "Actions du commentaire",
+  "comments.aria.deleteComment": "Supprimer le commentaire",
+  "comments.aria.filterComments": "Filtrer les commentaires",
+  "comments.aria.nextComment": "Commentaire suivant",
+  "comments.aria.previousComment": "Commentaire précédent",
+  "comments.aria.replyActions": "Actions de réponse",
+  "comments.aria.resolveComment": "Résoudre le commentaire",
+  "comments.confirm.deleteReplyDesc": "Cette réponse sera supprimée définitivement.",
+  "comments.confirm.deleteReplyTitle": "Supprimer cette réponse ?",
+  "comments.confirm.deleteThreadDesc": "Cette action supprimera définitivement la conversation et toutes ses réponses. Cette opération est irréversible.",
+  "comments.confirm.deleteThreadTitle": "Supprimer cette conversation ?",
+  "comments.fallback.user": "Utilisateur",
+  "comments.filter.all": "Tous",
+  "comments.filter.onlyYourThreads": "Seulement vos fils",
+  "comments.filter.showResolved": "Afficher les résolus",
+  "comments.loading": "Chargement…",
+  "comments.noComments": "Aucun commentaire pour l’instant",
+  "comments.panelTitle": "Commentaire",
+  "comments.placeholder.add": "Ajouter un commentaire",
+  "comments.placeholder.editComment": "Modifier le commentaire",
+  "comments.placeholder.editReply": "Modifier la réponse",
+  "comments.placeholder.reply": "Répondre",
+  "comments.reply": "Répondre",
   "common.ImageUploadLegacyTip": "Vous pouvez désormais créer des variables de type de fichier dans le formulaire de démarrage. À l’avenir, nous ne prendrons plus en charge la fonctionnalité de téléchargement d’images.",
   "common.accessAPIReference": "Accéder à la référence API",
   "common.addBlock": "Ajouter un nœud",
@@ -122,6 +151,7 @@
   "common.branch": "BRANCHE",
   "common.chooseDSL": "Choisir le fichier DSL(yml)",
   "common.chooseStartNodeToRun": "Choisissez le nœud de départ pour lancer",
+  "common.commentMode": "Mode commentaires",
   "common.configure": "Configurer",
   "common.configureRequired": "Configuration requise",
   "common.conversationLog": "Journal de conversation",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Répartir verticalement",
   "operator.horizontal": "Horizontal",
   "operator.selectionAlignment": "Alignement de la sélection",
+  "operator.showMiniMap": "Mini-carte",
+  "operator.showUserComments": "Commentaires",
+  "operator.showUserCursors": "Curseurs des collaborateurs",
   "operator.vertical": "Vertical",
   "operator.zoomIn": "Zoomer",
   "operator.zoomOut": "Dézoomer",
@@ -1156,6 +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.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 9166eb43d8..5c3b6eb1f9 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "वार्तालाप चर",
   "chatVariable.storedContent": "संग्रहीत सामग्री",
   "chatVariable.updatedAt": "अपडेट किया गया ",
+  "collaboration.historyAction.generic": "एक सहयोगी ने Undo/Redo किया",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "जवाब हटाएं",
+  "comments.actions.editComment": "टिप्पणी संपादित करें",
+  "comments.actions.editReply": "जवाब संपादित करें",
+  "comments.aria.closeComment": "टिप्पणी बंद करें",
+  "comments.aria.commentActions": "टिप्पणी क्रियाएं",
+  "comments.aria.deleteComment": "टिप्पणी हटाएं",
+  "comments.aria.filterComments": "टिप्पणियाँ फ़िल्टर करें",
+  "comments.aria.nextComment": "अगली टिप्पणी",
+  "comments.aria.previousComment": "पिछली टिप्पणी",
+  "comments.aria.replyActions": "जवाब क्रियाएं",
+  "comments.aria.resolveComment": "टिप्पणी समाधान करें",
+  "comments.confirm.deleteReplyDesc": "यह जवाब हमेशा के लिए हटा दिया जाएगा।",
+  "comments.confirm.deleteReplyTitle": "इस जवाब को हटाएं?",
+  "comments.confirm.deleteThreadDesc": "यह क्रिया थ्रेड और उसकी सभी प्रतिक्रियाओं को स्थायी रूप से हटा देगी। इसे पूर्ववत नहीं किया जा सकता।",
+  "comments.confirm.deleteThreadTitle": "इस थ्रेड को हटाएं?",
+  "comments.fallback.user": "उपयोगकर्ता",
+  "comments.filter.all": "सभी",
+  "comments.filter.onlyYourThreads": "केवल आपके थ्रेड",
+  "comments.filter.showResolved": "समाधान किए गए दिखाएँ",
+  "comments.loading": "लोड हो रहा है…",
+  "comments.noComments": "अभी तक कोई टिप्पणी नहीं",
+  "comments.panelTitle": "टिप्पणी",
+  "comments.placeholder.add": "टिप्पणी जोड़ें",
+  "comments.placeholder.editComment": "टिप्पणी संपादित करें",
+  "comments.placeholder.editReply": "जवाब संपादित करें",
+  "comments.placeholder.reply": "जवाब दें",
+  "comments.reply": "जवाब दें",
   "common.ImageUploadLegacyTip": "अब आप प्रारंभ प्रपत्र में फ़ाइल प्रकार चर बना सकते हैं। हम अब भविष्य में छवि अपलोड सुविधा का समर्थन नहीं करेंगे।",
   "common.accessAPIReference": "एपीआई संदर्भ तक पहुंचें",
   "common.addBlock": "नोड जोड़ें",
@@ -122,6 +151,7 @@
   "common.branch": "शाखा",
   "common.chooseDSL": "डीएसएल (वाईएमएल) फ़ाइल चुनें",
   "common.chooseStartNodeToRun": "चलाने के लिए प्रारंभ नोड चुनें",
+  "common.commentMode": "टिप्पणी मोड",
   "common.configure": "कॉन्फ़िगर करें",
   "common.configureRequired": "कॉन्फ़िगरेशन आवश्यक",
   "common.conversationLog": "वार्तालाप लॉग",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "ऊर्ध्वाधर रूप से वितरित करें",
   "operator.horizontal": "क्षैतिज",
   "operator.selectionAlignment": "चयन संरेखण",
+  "operator.showMiniMap": "मिनी मानचित्र",
+  "operator.showUserComments": "टिप्पणियाँ",
+  "operator.showUserCursors": "सहयोगी कर्सर",
   "operator.vertical": "ऊर्ध्वाधर",
   "operator.zoomIn": "ज़ूम इन",
   "operator.zoomOut": "ज़ूम आउट",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "संस्करण को हटाने में विफल",
   "versionHistory.action.deleteSuccess": "संस्करण हटाया गया",
   "versionHistory.action.restoreFailure": "संस्करण को पुनर्स्थापित करने में विफल",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 7e72577e3b..376227eedf 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Variabel Percakapan",
   "chatVariable.storedContent": "Konten yang disimpan",
   "chatVariable.updatedAt": "Diperbarui pada",
+  "collaboration.historyAction.generic": "Seorang kolaborator melakukan urungkan/ulang",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Hapus balasan",
+  "comments.actions.editComment": "Edit komentar",
+  "comments.actions.editReply": "Edit balasan",
+  "comments.aria.closeComment": "Tutup komentar",
+  "comments.aria.commentActions": "Aksi komentar",
+  "comments.aria.deleteComment": "Hapus komentar",
+  "comments.aria.filterComments": "Filter komentar",
+  "comments.aria.nextComment": "Komentar berikutnya",
+  "comments.aria.previousComment": "Komentar sebelumnya",
+  "comments.aria.replyActions": "Aksi balasan",
+  "comments.aria.resolveComment": "Selesaikan komentar",
+  "comments.confirm.deleteReplyDesc": "Balasan ini akan dihapus secara permanen.",
+  "comments.confirm.deleteReplyTitle": "Hapus balasan ini?",
+  "comments.confirm.deleteThreadDesc": "Tindakan ini akan menghapus percakapan dan semua balasannya secara permanen. Tidak dapat dibatalkan.",
+  "comments.confirm.deleteThreadTitle": "Hapus percakapan ini?",
+  "comments.fallback.user": "Pengguna",
+  "comments.filter.all": "Semua",
+  "comments.filter.onlyYourThreads": "Hanya thread Anda",
+  "comments.filter.showResolved": "Tampilkan yang diselesaikan",
+  "comments.loading": "Memuat…",
+  "comments.noComments": "Belum ada komentar",
+  "comments.panelTitle": "Komentar",
+  "comments.placeholder.add": "Tambahkan komentar",
+  "comments.placeholder.editComment": "Edit komentar",
+  "comments.placeholder.editReply": "Edit balasan",
+  "comments.placeholder.reply": "Balas",
+  "comments.reply": "Balas",
   "common.ImageUploadLegacyTip": "Anda sekarang dapat membuat variabel jenis file di formulir awal. Kami tidak akan lagi mendukung fitur unggah gambar di masa mendatang.",
   "common.accessAPIReference": "Referensi API Akses",
   "common.addBlock": "Tambahkan Node",
@@ -122,6 +151,7 @@
   "common.branch": "CABANG",
   "common.chooseDSL": "Pilih file DSL",
   "common.chooseStartNodeToRun": "Pilih node awal untuk dijalankan",
+  "common.commentMode": "Mode komentar",
   "common.configure": "Konfigurasikan",
   "common.configureRequired": "Konfigurasi yang Diperlukan",
   "common.conversationLog": "Log Percakapan",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Ruang Secara Vertikal",
   "operator.horizontal": "Horisontal",
   "operator.selectionAlignment": "Perataan Seleksi",
+  "operator.showMiniMap": "Peta mini",
+  "operator.showUserComments": "Komentar",
+  "operator.showUserCursors": "Kursor kolaborator",
   "operator.vertical": "Vertikal",
   "operator.zoomIn": "Perbesar",
   "operator.zoomOut": "Perkecil",
@@ -1156,6 +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.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 2fde43f694..7bd102f745 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Variabili di Conversazione",
   "chatVariable.storedContent": "Contenuto memorizzato",
   "chatVariable.updatedAt": "Aggiornato il ",
+  "collaboration.historyAction.generic": "Un collaboratore ha eseguito annulla/ripristina",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Elimina risposta",
+  "comments.actions.editComment": "Modifica commento",
+  "comments.actions.editReply": "Modifica risposta",
+  "comments.aria.closeComment": "Chiudi commento",
+  "comments.aria.commentActions": "Azioni del commento",
+  "comments.aria.deleteComment": "Elimina commento",
+  "comments.aria.filterComments": "Filtra commenti",
+  "comments.aria.nextComment": "Commento successivo",
+  "comments.aria.previousComment": "Commento precedente",
+  "comments.aria.replyActions": "Azioni di risposta",
+  "comments.aria.resolveComment": "Risolvi commento",
+  "comments.confirm.deleteReplyDesc": "Questa risposta verrà rimossa definitivamente.",
+  "comments.confirm.deleteReplyTitle": "Eliminare questa risposta?",
+  "comments.confirm.deleteThreadDesc": "Questa azione eliminerà in modo permanente la conversazione e tutte le risposte. Non sarà possibile annullare.",
+  "comments.confirm.deleteThreadTitle": "Eliminare questa conversazione?",
+  "comments.fallback.user": "Utente",
+  "comments.filter.all": "Tutti",
+  "comments.filter.onlyYourThreads": "Solo i tuoi thread",
+  "comments.filter.showResolved": "Mostra risolti",
+  "comments.loading": "Caricamento…",
+  "comments.noComments": "Ancora nessun commento",
+  "comments.panelTitle": "Commento",
+  "comments.placeholder.add": "Aggiungi un commento",
+  "comments.placeholder.editComment": "Modifica commento",
+  "comments.placeholder.editReply": "Modifica risposta",
+  "comments.placeholder.reply": "Rispondi",
+  "comments.reply": "Rispondi",
   "common.ImageUploadLegacyTip": "Ora è possibile creare variabili di tipo file nel modulo iniziale. In futuro non supporteremo più la funzione di caricamento delle immagini.",
   "common.accessAPIReference": "Accedi alla Riferimento API",
   "common.addBlock": "Aggiungi nodo",
@@ -122,6 +151,7 @@
   "common.branch": "RAMO",
   "common.chooseDSL": "Scegli file DSL(yml)",
   "common.chooseStartNodeToRun": "Scegli il nodo di partenza da eseguire",
+  "common.commentMode": "Modalità commenti",
   "common.configure": "Configura",
   "common.configureRequired": "Configurazione Richiesta",
   "common.conversationLog": "Registro conversazioni",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Spazia verticalmente",
   "operator.horizontal": "Orizzontale",
   "operator.selectionAlignment": "Allineamento della selezione",
+  "operator.showMiniMap": "Mini mappa",
+  "operator.showUserComments": "Commenti",
+  "operator.showUserCursors": "Cursori dei collaboratori",
   "operator.vertical": "Verticale",
   "operator.zoomIn": "Zoom In",
   "operator.zoomOut": "Zoom Out",
@@ -1156,6 +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.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 11cf9caa34..9564abc43d 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "会話変数",
   "chatVariable.storedContent": "保存内容",
   "chatVariable.updatedAt": "最終更新：",
+  "collaboration.historyAction.generic": "共同編集者が元に戻す/やり直しを実行しました",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "返信を削除",
+  "comments.actions.editComment": "コメントを編集",
+  "comments.actions.editReply": "返信を編集",
+  "comments.aria.closeComment": "コメントを閉じる",
+  "comments.aria.commentActions": "コメントアクション",
+  "comments.aria.deleteComment": "スレッドを削除",
+  "comments.aria.filterComments": "コメントを絞り込む",
+  "comments.aria.nextComment": "次のコメント",
+  "comments.aria.previousComment": "前のコメント",
+  "comments.aria.replyActions": "返信アクション",
+  "comments.aria.resolveComment": "解決",
+  "comments.confirm.deleteReplyDesc": "この返信は完全に削除されます。",
+  "comments.confirm.deleteReplyTitle": "この返信を削除しますか？",
+  "comments.confirm.deleteThreadDesc": "この操作によりスレッドとその返信がすべて完全に削除され、元に戻せません。",
+  "comments.confirm.deleteThreadTitle": "このスレッドを削除しますか？",
+  "comments.fallback.user": "ユーザー",
+  "comments.filter.all": "すべて",
+  "comments.filter.onlyYourThreads": "自分のスレッドのみ",
+  "comments.filter.showResolved": "解決済みを表示",
+  "comments.loading": "読み込み中…",
+  "comments.noComments": "まだコメントがありません",
+  "comments.panelTitle": "コメント",
+  "comments.placeholder.add": "コメントを追加",
+  "comments.placeholder.editComment": "コメントを編集",
+  "comments.placeholder.editReply": "返信を編集",
+  "comments.placeholder.reply": "返信",
+  "comments.reply": "返信",
   "common.ImageUploadLegacyTip": "開始フォームでファイル型変数が作成可能になりました。画像アップロード機能は今後サポート終了となります。",
   "common.accessAPIReference": "API リファレンス",
   "common.addBlock": "ブロックを追加",
@@ -122,6 +151,7 @@
   "common.branch": "ブランチ",
   "common.chooseDSL": "DSL(yml) ファイルを選択",
   "common.chooseStartNodeToRun": "実行する開始ノードを選択",
+  "common.commentMode": "コメントモード",
   "common.configure": "設定",
   "common.configureRequired": "設定が必要",
   "common.conversationLog": "会話ログ",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "垂直方向に等間隔配置",
   "operator.horizontal": "水平",
   "operator.selectionAlignment": "選択の整列",
+  "operator.showMiniMap": "ミニマップ",
+  "operator.showUserComments": "コメント",
+  "operator.showUserCursors": "協働者のカーソル",
   "operator.vertical": "垂直",
   "operator.zoomIn": "拡大",
   "operator.zoomOut": "縮小",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "削除に失敗しました",
   "versionHistory.action.deleteSuccess": "削除が完了しました",
   "versionHistory.action.restoreFailure": "復元に失敗しました",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 c93f417361..7dfeda4573 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "대화 변수",
   "chatVariable.storedContent": "저장된 내용",
   "chatVariable.updatedAt": "업데이트 시간: ",
+  "collaboration.historyAction.generic": "공동 작업자가 실행 취소/다시 실행을 수행했습니다",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "답글 삭제",
+  "comments.actions.editComment": "댓글 편집",
+  "comments.actions.editReply": "답글 편집",
+  "comments.aria.closeComment": "댓글 닫기",
+  "comments.aria.commentActions": "댓글 작업",
+  "comments.aria.deleteComment": "댓글 삭제",
+  "comments.aria.filterComments": "댓글 필터",
+  "comments.aria.nextComment": "다음 댓글",
+  "comments.aria.previousComment": "이전 댓글",
+  "comments.aria.replyActions": "답글 작업",
+  "comments.aria.resolveComment": "댓글 해결",
+  "comments.confirm.deleteReplyDesc": "이 답글은 영구적으로 삭제됩니다.",
+  "comments.confirm.deleteReplyTitle": "이 답글을 삭제하시겠습니까?",
+  "comments.confirm.deleteThreadDesc": "이 작업을 수행하면 스레드와 모든 답글이 영구적으로 삭제되며 되돌릴 수 없습니다.",
+  "comments.confirm.deleteThreadTitle": "이 스레드를 삭제하시겠습니까?",
+  "comments.fallback.user": "사용자",
+  "comments.filter.all": "전체",
+  "comments.filter.onlyYourThreads": "내 스레드만",
+  "comments.filter.showResolved": "해결됨 표시",
+  "comments.loading": "불러오는 중…",
+  "comments.noComments": "아직 댓글이 없습니다",
+  "comments.panelTitle": "댓글",
+  "comments.placeholder.add": "댓글 추가",
+  "comments.placeholder.editComment": "댓글 편집",
+  "comments.placeholder.editReply": "답글 편집",
+  "comments.placeholder.reply": "답글",
+  "comments.reply": "답글",
   "common.ImageUploadLegacyTip": "이제 시작 양식에서 파일 형식 변수를 만들 수 있습니다. 앞으로 이미지 업로드 기능은 더 이상 지원되지 않습니다.",
   "common.accessAPIReference": "API 참조 접근",
   "common.addBlock": "노드 추가",
@@ -122,6 +151,7 @@
   "common.branch": "브랜치",
   "common.chooseDSL": "DSL(yml) 파일 선택",
   "common.chooseStartNodeToRun": "실행할 시작 노드를 선택하세요",
+  "common.commentMode": "댓글 모드",
   "common.configure": "구성",
   "common.configureRequired": "구성 필요",
   "common.conversationLog": "대화 로그",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "수직 등간격",
   "operator.horizontal": "가로",
   "operator.selectionAlignment": "선택 정렬",
+  "operator.showMiniMap": "미니맵",
+  "operator.showUserComments": "댓글",
+  "operator.showUserCursors": "협업자 커서",
   "operator.vertical": "세로",
   "operator.zoomIn": "확대",
   "operator.zoomOut": "축소",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "버전을 삭제하지 못했습니다.",
   "versionHistory.action.deleteSuccess": "버전 삭제됨",
   "versionHistory.action.restoreFailure": "버전을 복원하지 못했습니다.",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 4a6ccd8937..4976e3a577 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -109,6 +109,14 @@
   "chatVariable.panelTitle": "Conversation Variables",
   "chatVariable.storedContent": "Stored content",
   "chatVariable.updatedAt": "Updated at ",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.editComment": "Reactie bewerken",
+  "comments.aria.commentActions": "Reactieacties",
+  "comments.aria.filterComments": "Reacties filteren",
+  "comments.filter.all": "Alles",
+  "comments.filter.onlyYourThreads": "Alleen jouw threads",
+  "comments.filter.showResolved": "Opgeloste tonen",
+  "comments.placeholder.editComment": "Reactie bewerken",
   "common.ImageUploadLegacyTip": "You can now create file type variables in the start form. We will no longer support the image upload feature in the future. ",
   "common.accessAPIReference": "Access API Reference",
   "common.addBlock": "Add Node",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 57aa50dd4e..996681f50b 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Zmienne Konwersacji",
   "chatVariable.storedContent": "Przechowywana zawartość",
   "chatVariable.updatedAt": "Zaktualizowano ",
+  "collaboration.historyAction.generic": "Współpracownik wykonał cofnięcie/ponowienie",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Edytuj komentarz",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Akcje komentarza",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Filtruj komentarze",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Wszystkie",
+  "comments.filter.onlyYourThreads": "Tylko twoje wątki",
+  "comments.filter.showResolved": "Pokaż rozwiązane",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Edytuj komentarz",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Teraz można tworzyć zmienne typu pliku w formularzu startowym. W przyszłości nie będziemy już obsługiwać funkcji przesyłania obrazów.",
   "common.accessAPIReference": "Uzyskaj dostęp do dokumentacji API",
   "common.addBlock": "Dodaj węzeł",
@@ -122,6 +151,7 @@
   "common.branch": "GAŁĄŹ",
   "common.chooseDSL": "Wybierz plik DSL(yml)",
   "common.chooseStartNodeToRun": "Wybierz węzeł początkowy, aby uruchomić",
+  "common.commentMode": "Tryb komentarzy",
   "common.configure": "Skonfiguruj",
   "common.configureRequired": "Wymagana konfiguracja",
   "common.conversationLog": "Dziennik rozmów",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Rozmieść pionowo",
   "operator.horizontal": "Poziomy",
   "operator.selectionAlignment": "Wyrównanie zaznaczenia",
+  "operator.showMiniMap": "Minimapa",
+  "operator.showUserComments": "Komentarze",
+  "operator.showUserCursors": "Kursory współpracowników",
   "operator.vertical": "Pionowy",
   "operator.zoomIn": "Powiększ",
   "operator.zoomOut": "Pomniejsz",
@@ -1156,6 +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.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 a0635ad814..74af4a8e62 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Variáveis de Conversação",
   "chatVariable.storedContent": "Conteúdo armazenado",
   "chatVariable.updatedAt": "Atualizado em ",
+  "collaboration.historyAction.generic": "Um colaborador realizou desfazer/refazer",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Editar comentário",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Ações do comentário",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Filtrar comentários",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Todos",
+  "comments.filter.onlyYourThreads": "Apenas seus tópicos",
+  "comments.filter.showResolved": "Mostrar resolvidos",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Editar comentário",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Agora você pode criar variáveis de tipo de arquivo no formulário inicial. Não daremos mais suporte ao recurso de upload de imagens no futuro.",
   "common.accessAPIReference": "Acessar referência da API",
   "common.addBlock": "Adicionar Nó",
@@ -122,6 +151,7 @@
   "common.branch": "RAMIFICAÇÃO",
   "common.chooseDSL": "Escolha o arquivo DSL(yml)",
   "common.chooseStartNodeToRun": "Escolha o nó inicial para executar",
+  "common.commentMode": "Modo de comentários",
   "common.configure": "Configurar",
   "common.configureRequired": "Configuração necessária",
   "common.conversationLog": "Registro de conversa",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Distribuir verticalmente",
   "operator.horizontal": "Horizontal",
   "operator.selectionAlignment": "Alinhamento de seleção",
+  "operator.showMiniMap": "Minimapa",
+  "operator.showUserComments": "Comentários",
+  "operator.showUserCursors": "Cursores dos colaboradores",
   "operator.vertical": "Vertical",
   "operator.zoomIn": "Aproximar",
   "operator.zoomOut": "Afastar",
@@ -1156,6 +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.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 58a0786894..6c02f5fc3c 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Variabile de Conversație",
   "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.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Editează comentariul",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Acțiuni comentariu",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Filtrează comentariile",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Toate",
+  "comments.filter.onlyYourThreads": "Doar discuțiile tale",
+  "comments.filter.showResolved": "Afișează rezolvatele",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Editează comentariul",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Acum puteți crea variabile de tip de fișier în formularul de pornire. Nu vom mai accepta funcția de încărcare a imaginilor în viitor.",
   "common.accessAPIReference": "Accesează referința API",
   "common.addBlock": "Adaugă nod",
@@ -122,6 +151,7 @@
   "common.branch": "RAMURĂ",
   "common.chooseDSL": "Alegeți fișierul DSL(yml)",
   "common.chooseStartNodeToRun": "Alegeți nodul de start pentru a rula",
+  "common.commentMode": "Mod comentarii",
   "common.configure": "Configurează",
   "common.configureRequired": "Configurare necesară",
   "common.conversationLog": "Jurnal conversație",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Distribuie vertical",
   "operator.horizontal": "Orizontal",
   "operator.selectionAlignment": "Alinierea selecției",
+  "operator.showMiniMap": "Mini-hartă",
+  "operator.showUserComments": "Comentarii",
+  "operator.showUserCursors": "Cursoarele colaboratorilor",
   "operator.vertical": "Vertical",
   "operator.zoomIn": "Mărește",
   "operator.zoomOut": "Micșorează",
@@ -1156,6 +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.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 585c9fae93..87153206a9 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Переменные разговора",
   "chatVariable.storedContent": "Сохраненный контент",
   "chatVariable.updatedAt": "Обновлено в ",
+  "collaboration.historyAction.generic": "Участник выполнил отмену/повтор",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Редактировать комментарий",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Действия с комментарием",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Фильтровать комментарии",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Все",
+  "comments.filter.onlyYourThreads": "Только ваши треды",
+  "comments.filter.showResolved": "Показывать решённые",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Редактировать комментарий",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Теперь вы можете создавать переменные типа файла в стартовой форме. В будущем мы больше не будем поддерживать функцию загрузки изображений.",
   "common.accessAPIReference": "Доступ к справочнику API",
   "common.addBlock": "Добавить узел",
@@ -122,6 +151,7 @@
   "common.branch": "ВЕТКА",
   "common.chooseDSL": "Выберите файл DSL(yml)",
   "common.chooseStartNodeToRun": "Выберите начальный узел для запуска",
+  "common.commentMode": "Режим комментариев",
   "common.configure": "Настроить",
   "common.configureRequired": "Требуется настройка",
   "common.conversationLog": "Журнал разговоров",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Распределить по вертикали",
   "operator.horizontal": "Горизонтальный",
   "operator.selectionAlignment": "Выравнивание выделения",
+  "operator.showMiniMap": "Мини-карта",
+  "operator.showUserComments": "Комментарии",
+  "operator.showUserCursors": "Курсоры участников",
   "operator.vertical": "Вертикальный",
   "operator.zoomIn": "Увеличить",
   "operator.zoomOut": "Уменьшить",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "Не удалось удалить версию",
   "versionHistory.action.deleteSuccess": "Версия удалена",
   "versionHistory.action.restoreFailure": "Не удалось восстановить версию",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 f29c211ed8..987d439f9a 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Pogovor Spremenljivke",
   "chatVariable.storedContent": "Shranjena vsebina",
   "chatVariable.updatedAt": "Posodobljeno ob",
+  "collaboration.historyAction.generic": "Sodelavec je izvedel razveljavitev/ponovitev",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Uredi komentar",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Dejanja komentarja",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Filtriraj komentarje",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Vsi",
+  "comments.filter.onlyYourThreads": "Samo tvoje niti",
+  "comments.filter.showResolved": "Prikaži razrešene",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Uredi komentar",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Zdaj lahko v začetni obliki ustvarite spremenljivke datotečnega tipa. V prihodnje ne bomo več podpirali funkcije nalaganja slik.",
   "common.accessAPIReference": "Dostop do referenčnega API-ja",
   "common.addBlock": "Dodaj vozlišče",
@@ -122,6 +151,7 @@
   "common.branch": "VEJA",
   "common.chooseDSL": "Izberi DSL datoteko",
   "common.chooseStartNodeToRun": "Izberite začetno vozlišče za zagon",
+  "common.commentMode": "Način komentarjev",
   "common.configure": "Konfiguriraj",
   "common.configureRequired": "Konfigurirajte zahteve",
   "common.conversationLog": "Pogovor Log",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Razporedi navpično",
   "operator.horizontal": "Vodoraven",
   "operator.selectionAlignment": "Poravnava izbora",
+  "operator.showMiniMap": "Mini zemljevid",
+  "operator.showUserComments": "Komentarji",
+  "operator.showUserCursors": "Kazalci sodelavcev",
   "operator.vertical": "Navpičen",
   "operator.zoomIn": "Zoom in",
   "operator.zoomOut": "Zoomirati ven",
@@ -1156,6 +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.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 130e2c0269..424f510d4a 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "ตัวแปรการสนทนา",
   "chatVariable.storedContent": "เนื้อหาที่เก็บไว้",
   "chatVariable.updatedAt": "อัพเดทเมื่อ",
+  "collaboration.historyAction.generic": "ผู้ร่วมงานได้ทำการยกเลิก/ทำซ้ำ",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "แก้ไขความคิดเห็น",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "การดำเนินการความคิดเห็น",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "กรองความคิดเห็น",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "ทั้งหมด",
+  "comments.filter.onlyYourThreads": "เฉพาะเธรดของคุณ",
+  "comments.filter.showResolved": "แสดงที่แก้ไขแล้ว",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "แก้ไขความคิดเห็น",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "ตอนนี้คุณสามารถสร้างตัวแปรชนิดไฟล์ในฟอร์มเริ่มต้นได้แล้ว เราจะไม่รองรับฟีเจอร์การอัปโหลดรูปภาพอีกต่อไปในอนาคต",
   "common.accessAPIReference": "การอ้างอิง API การเข้าถึง",
   "common.addBlock": "เพิ่มโนด",
@@ -122,6 +151,7 @@
   "common.branch": "กิ่ง",
   "common.chooseDSL": "เลือกไฟล์ DSL",
   "common.chooseStartNodeToRun": "เลือกโหนดเริ่มต้นเพื่อรัน",
+  "common.commentMode": "โหมดความคิดเห็น",
   "common.configure": "กําหนดค่า",
   "common.configureRequired": "กําหนดค่าที่จําเป็น",
   "common.conversationLog": "บันทึกการสนทนา",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "ระยะห่างแนวตั้ง",
   "operator.horizontal": "แนวนอน",
   "operator.selectionAlignment": "การจัดตําแหน่งการเลือก",
+  "operator.showMiniMap": "แผนที่ย่อ",
+  "operator.showUserComments": "ความคิดเห็น",
+  "operator.showUserCursors": "เคอร์เซอร์ของผู้ร่วมงาน",
   "operator.vertical": "แนวตั้ง",
   "operator.zoomIn": "ซูมเข้า",
   "operator.zoomOut": "ซูมออก",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "ลบเวอร์ชันไม่สำเร็จ",
   "versionHistory.action.deleteSuccess": "เวอร์ชันถูกลบ",
   "versionHistory.action.restoreFailure": "ไม่สามารถกู้คืนเวอร์ชันได้",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 c6893cfb84..ce43144e5c 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Konuşma Değişkenleri",
   "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.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Yorumu düzenle",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Yorum işlemleri",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Yorumları filtrele",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Tümü",
+  "comments.filter.onlyYourThreads": "Yalnızca senin başlıkların",
+  "comments.filter.showResolved": "Çözülenleri göster",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Yorumu düzenle",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Artık başlangıç formunda dosya türü değişkenleri oluşturabilirsiniz. Gelecekte resim yükleme özelliğini artık desteklemeyeceğiz.",
   "common.accessAPIReference": "API Referansına Eriş",
   "common.addBlock": "Düğüm Ekle",
@@ -122,6 +151,7 @@
   "common.branch": "DAL",
   "common.chooseDSL": "DSL(yml) dosyasını seçin",
   "common.chooseStartNodeToRun": "Çalıştırmak için başlangıç düğümünü seçin",
+  "common.commentMode": "Yorum modu",
   "common.configure": "Yapılandır",
   "common.configureRequired": "Yapılandırma Gerekli",
   "common.conversationLog": "Konuşma Günlüğü",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Dikey Dağıt",
   "operator.horizontal": "Yatay",
   "operator.selectionAlignment": "Seçim Hizalama",
+  "operator.showMiniMap": "Mini harita",
+  "operator.showUserComments": "Yorumlar",
+  "operator.showUserCursors": "İşbirlikçi imleçleri",
   "operator.vertical": "Dikey",
   "operator.zoomIn": "Yakınlaştır",
   "operator.zoomOut": "Uzaklaştır",
@@ -1156,6 +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.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 90ee940ae7..76cd3eddee 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Змінні розмови",
   "chatVariable.storedContent": "Збережений вміст",
   "chatVariable.updatedAt": "Оновлено ",
+  "collaboration.historyAction.generic": "Співавтор виконав скасування/повторення",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Редагувати коментар",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Дії з коментарем",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Фільтрувати коментарі",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Усі",
+  "comments.filter.onlyYourThreads": "Лише ваші треди",
+  "comments.filter.showResolved": "Показувати вирішені",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Редагувати коментар",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Тепер ви можете створювати змінні типу файлу у початковій формі. У майбутньому ми більше не підтримуватимемо функцію завантаження зображень.",
   "common.accessAPIReference": "Доступ до довідника API",
   "common.addBlock": "Додати вузол",
@@ -122,6 +151,7 @@
   "common.branch": "ГІЛКА",
   "common.chooseDSL": "Виберіть файл DSL(yml)",
   "common.chooseStartNodeToRun": "Виберіть початковий вузол для запуску",
+  "common.commentMode": "Режим коментарів",
   "common.configure": "Налаштувати",
   "common.configureRequired": "Потрібна конфігурація",
   "common.conversationLog": "Журнал розмов",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Розподілити по вертикалі",
   "operator.horizontal": "Горизонтальний",
   "operator.selectionAlignment": "Вирівнювання вибору",
+  "operator.showMiniMap": "Мінікарта",
+  "operator.showUserComments": "Коментарі",
+  "operator.showUserCursors": "Курсори співучасників",
   "operator.vertical": "Вертикальний",
   "operator.zoomIn": "Збільшити",
   "operator.zoomOut": "Зменшити",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "Не вдалося видалити версію",
   "versionHistory.action.deleteSuccess": "Версія видалена",
   "versionHistory.action.restoreFailure": "Не вдалося відновити версію",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{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 6ba72b8b3d..7750f0efb6 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "Biến Hội Thoại",
   "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.deleteReply": "Delete reply",
+  "comments.actions.editComment": "Chỉnh sửa bình luận",
+  "comments.actions.editReply": "Edit reply",
+  "comments.aria.closeComment": "Close comment",
+  "comments.aria.commentActions": "Thao tác bình luận",
+  "comments.aria.deleteComment": "Delete thread",
+  "comments.aria.filterComments": "Lọc bình luận",
+  "comments.aria.nextComment": "Next comment",
+  "comments.aria.previousComment": "Previous comment",
+  "comments.aria.replyActions": "Reply actions",
+  "comments.aria.resolveComment": "Resolve",
+  "comments.confirm.deleteReplyDesc": "This reply will be removed permanently.",
+  "comments.confirm.deleteReplyTitle": "Delete this reply?",
+  "comments.confirm.deleteThreadDesc": "This action will permanently delete the thread and all its replies. This cannot be undone.",
+  "comments.confirm.deleteThreadTitle": "Delete this thread?",
+  "comments.fallback.user": "User",
+  "comments.filter.all": "Tất cả",
+  "comments.filter.onlyYourThreads": "Chỉ chuỗi của bạn",
+  "comments.filter.showResolved": "Hiển thị đã giải quyết",
+  "comments.loading": "Loading…",
+  "comments.noComments": "No comments yet",
+  "comments.panelTitle": "Comment",
+  "comments.placeholder.add": "Add a comment",
+  "comments.placeholder.editComment": "Chỉnh sửa bình luận",
+  "comments.placeholder.editReply": "Edit reply",
+  "comments.placeholder.reply": "Reply",
+  "comments.reply": "Reply",
   "common.ImageUploadLegacyTip": "Bây giờ bạn có thể tạo các biến loại tệp trong biểu mẫu bắt đầu. Chúng tôi sẽ không còn hỗ trợ tính năng tải lên hình ảnh trong tương lai.",
   "common.accessAPIReference": "Truy cập tài liệu API",
   "common.addBlock": "Thêm Node",
@@ -122,6 +151,7 @@
   "common.branch": "NHÁNH",
   "common.chooseDSL": "Chọn tệp DSL(yml)",
   "common.chooseStartNodeToRun": "Chọn nút bắt đầu để chạy",
+  "common.commentMode": "Chế độ bình luận",
   "common.configure": "Cấu hình",
   "common.configureRequired": "Yêu cầu cấu hình",
   "common.conversationLog": "Nhật ký cuộc trò chuyện",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "Phân bố theo chiều dọc",
   "operator.horizontal": "Ngang",
   "operator.selectionAlignment": "Căn chỉnh lựa chọn",
+  "operator.showMiniMap": "Bản đồ nhỏ",
+  "operator.showUserComments": "Bình luận",
+  "operator.showUserCursors": "Con trỏ của cộng tác viên",
   "operator.vertical": "Dọc",
   "operator.zoomIn": "Phóng to",
   "operator.zoomOut": "Thu nhỏ",
@@ -1156,6 +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.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 c02cad5145..2b6f4bcbe7 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "会话变量",
   "chatVariable.storedContent": "存储内容",
   "chatVariable.updatedAt": "更新时间 ",
+  "collaboration.historyAction.generic": "协作者执行了撤销/重做操作",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "删除回复",
+  "comments.actions.editComment": "编辑评论",
+  "comments.actions.editReply": "编辑回复",
+  "comments.aria.closeComment": "关闭评论",
+  "comments.aria.commentActions": "评论操作",
+  "comments.aria.deleteComment": "删除讨论",
+  "comments.aria.filterComments": "筛选评论",
+  "comments.aria.nextComment": "下一条评论",
+  "comments.aria.previousComment": "上一条评论",
+  "comments.aria.replyActions": "回复操作",
+  "comments.aria.resolveComment": "解决",
+  "comments.confirm.deleteReplyDesc": "此回复将被永久删除。",
+  "comments.confirm.deleteReplyTitle": "删除此回复？",
+  "comments.confirm.deleteThreadDesc": "此操作会永久删除该讨论及其所有回复，且无法恢复。",
+  "comments.confirm.deleteThreadTitle": "删除此讨论？",
+  "comments.fallback.user": "用户",
+  "comments.filter.all": "全部",
+  "comments.filter.onlyYourThreads": "仅看你的讨论",
+  "comments.filter.showResolved": "显示已解决",
+  "comments.loading": "加载中…",
+  "comments.noComments": "暂无评论",
+  "comments.panelTitle": "评论",
+  "comments.placeholder.add": "添加评论",
+  "comments.placeholder.editComment": "编辑评论",
+  "comments.placeholder.editReply": "编辑回复",
+  "comments.placeholder.reply": "回复",
+  "comments.reply": "回复",
   "common.ImageUploadLegacyTip": "现在可以在 start 表单中创建文件类型变量。未来我们将不继续支持图片上传功能。",
   "common.accessAPIReference": "访问 API",
   "common.addBlock": "添加节点",
@@ -122,6 +151,7 @@
   "common.branch": "分支",
   "common.chooseDSL": "选择 DSL(yml) 文件",
   "common.chooseStartNodeToRun": "选择启动节点进行运行",
+  "common.commentMode": "评论模式",
   "common.configure": "配置",
   "common.configureRequired": "需要进行配置",
   "common.conversationLog": "对话记录",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "垂直等间距",
   "operator.horizontal": "水平方向",
   "operator.selectionAlignment": "选择对齐",
+  "operator.showMiniMap": "小地图",
+  "operator.showUserComments": "评论",
+  "operator.showUserCursors": "协作者光标",
   "operator.vertical": "垂直方向",
   "operator.zoomIn": "放大",
   "operator.zoomOut": "缩小",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "删除失败",
   "versionHistory.action.deleteSuccess": "版本已删除",
   "versionHistory.action.restoreFailure": "回滚失败",
+  "versionHistory.action.restoreInProgress": "{{userName}} 正在回滚到版本 {{versionName}}...",
   "versionHistory.action.restoreSuccess": "回滚成功",
   "versionHistory.action.updateFailure": "更新失败",
   "versionHistory.action.updateSuccess": "版本信息已更新",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 5c7c9cfc95..6b8ad06650 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -109,6 +109,35 @@
   "chatVariable.panelTitle": "對話變數",
   "chatVariable.storedContent": "已儲存內容",
   "chatVariable.updatedAt": "更新於 ",
+  "collaboration.historyAction.generic": "協作者執行了復原/重做操作",
+  "comments.actions.addComment": "Add Comment",
+  "comments.actions.deleteReply": "刪除回覆",
+  "comments.actions.editComment": "編輯評論",
+  "comments.actions.editReply": "編輯回覆",
+  "comments.aria.closeComment": "關閉評論",
+  "comments.aria.commentActions": "評論操作",
+  "comments.aria.deleteComment": "刪除評論",
+  "comments.aria.filterComments": "篩選評論",
+  "comments.aria.nextComment": "下一則評論",
+  "comments.aria.previousComment": "上一則評論",
+  "comments.aria.replyActions": "回覆操作",
+  "comments.aria.resolveComment": "解決評論",
+  "comments.confirm.deleteReplyDesc": "此回覆將被永久刪除。",
+  "comments.confirm.deleteReplyTitle": "刪除此回覆？",
+  "comments.confirm.deleteThreadDesc": "此操作會永久刪除該討論串及其所有回覆，且無法復原。",
+  "comments.confirm.deleteThreadTitle": "刪除此討論串？",
+  "comments.fallback.user": "使用者",
+  "comments.filter.all": "全部",
+  "comments.filter.onlyYourThreads": "僅看你的討論串",
+  "comments.filter.showResolved": "顯示已解決",
+  "comments.loading": "載入中…",
+  "comments.noComments": "暫無評論",
+  "comments.panelTitle": "評論",
+  "comments.placeholder.add": "新增評論",
+  "comments.placeholder.editComment": "編輯評論",
+  "comments.placeholder.editReply": "編輯回覆",
+  "comments.placeholder.reply": "回覆",
+  "comments.reply": "回覆",
   "common.ImageUploadLegacyTip": "現在，您可以在起始表單中創建檔案類型變數。我們將來不再支持圖片上傳功能。",
   "common.accessAPIReference": "訪問 API",
   "common.addBlock": "新增節點",
@@ -122,6 +151,7 @@
   "common.branch": "分支",
   "common.chooseDSL": "選擇 DSL（yml）檔",
   "common.chooseStartNodeToRun": "選擇要執行的起始節點",
+  "common.commentMode": "評論模式",
   "common.configure": "配置",
   "common.configureRequired": "需要進行配置",
   "common.conversationLog": "對話記錄",
@@ -1065,6 +1095,9 @@
   "operator.distributeVertical": "垂直等間距",
   "operator.horizontal": "水平",
   "operator.selectionAlignment": "選擇對齊",
+  "operator.showMiniMap": "小地圖",
+  "operator.showUserComments": "評論",
+  "operator.showUserCursors": "協作者游標",
   "operator.vertical": "垂直",
   "operator.zoomIn": "放大",
   "operator.zoomOut": "縮小",
@@ -1156,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "無法刪除版本",
   "versionHistory.action.deleteSuccess": "版本已刪除",
   "versionHistory.action.restoreFailure": "無法恢復版本",
+  "versionHistory.action.restoreInProgress": "{{userName}} is restoring to version {{versionName}}...",
   "versionHistory.action.restoreSuccess": "恢復版本",
   "versionHistory.action.updateFailure": "更新版本失敗",
   "versionHistory.action.updateSuccess": "版本已更新",
diff --git a/web/models/app.ts b/web/models/app.ts
index 1a04565035..af8238fc55 100644
--- a/web/models/app.ts
+++ b/web/models/app.ts
@@ -104,6 +104,20 @@ export type AppVoicesListResponse = [{
   value: string
 }]
 
+export type WorkflowOnlineUser = {
+  user_id?: string
+  username?: string
+  avatar?: string | null
+  sid?: string
+}
+
+export type WorkflowOnlineUsersResponse = {
+  data: Record<string, WorkflowOnlineUser[]> | Array<{
+    app_id: string
+    users: WorkflowOnlineUser[]
+  }>
+}
+
 export type TracingStatus = {
   enabled: boolean
   tracing_provider: TracingProvider | null
diff --git a/web/package.json b/web/package.json
index 5fb0f4a400..72af940479 100644
--- a/web/package.json
+++ b/web/package.json
@@ -115,6 +115,7 @@
     "ky": "catalog:",
     "lamejs": "catalog:",
     "lexical": "catalog:",
+    "loro-crdt": "catalog:",
     "mermaid": "catalog:",
     "mime": "catalog:",
     "mitt": "catalog:",
@@ -142,6 +143,7 @@
     "scheduler": "catalog:",
     "sharp": "catalog:",
     "shiki": "catalog:",
+    "socket.io-client": "catalog:",
     "sortablejs": "catalog:",
     "std-semver": "catalog:",
     "streamdown": "catalog:",
diff --git a/web/proxy.ts b/web/proxy.ts
index af9b290025..983713fd0e 100644
--- a/web/proxy.ts
+++ b/web/proxy.ts
@@ -37,7 +37,7 @@ export function proxy(request: NextRequest) {
   const cspHeader = `
     default-src 'self' ${scheme_source} ${csp} ${whiteList};
     connect-src 'self' ${scheme_source} ${csp} ${whiteList};
-    script-src 'self' ${scheme_source} ${csp} ${whiteList};
+    script-src 'self' 'wasm-unsafe-eval' ${scheme_source} ${csp} ${whiteList};
     style-src 'self' 'unsafe-inline' ${scheme_source} ${whiteList};
     worker-src 'self' ${scheme_source} ${csp} ${whiteList};
     media-src 'self' ${scheme_source} ${csp} ${whiteList};
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 5698d11e9d..b6a5386fe0 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -1,13 +1,40 @@
 import type { TracingProvider } from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/type'
-import type { AppDetailResponse, AppListResponse, CreateApiKeyResponse, DSLImportMode, DSLImportResponse, TracingConfig, TracingStatus, UpdateAppModelConfigResponse, UpdateAppSiteCodeResponse, WebhookTriggerResponse } from '@/models/app'
+import type { AppDetailResponse, AppListResponse, CreateApiKeyResponse, DSLImportMode, DSLImportResponse, TracingConfig, TracingStatus, UpdateAppModelConfigResponse, UpdateAppSiteCodeResponse, WebhookTriggerResponse, WorkflowOnlineUser } from '@/models/app'
 import type { CommonResponse } from '@/models/common'
 import type { AppIconType, AppModeEnum, ModelConfig } from '@/types/app'
 import { del, get, patch, post, put } from './base'
+import { consoleClient } from './client'
 
 export const fetchAppList = ({ url, params }: { url: string, params?: Record<string, any> }): Promise<AppListResponse> => {
   return get<AppListResponse>(url, { params })
 }
 
+export const fetchWorkflowOnlineUsers = async ({ appIds }: { appIds: string[] }): Promise<Record<string, WorkflowOnlineUser[]>> => {
+  if (!appIds.length)
+    return {}
+
+  const response = await consoleClient.apps.workflowOnlineUsers({
+    query: { app_ids: appIds.join(',') },
+  })
+
+  if (!response?.data)
+    return {}
+
+  if (Array.isArray(response.data)) {
+    return response.data.reduce<Record<string, WorkflowOnlineUser[]>>((acc, item) => {
+      if (item?.app_id)
+        acc[item.app_id] = item.users || []
+      return acc
+    }, {})
+  }
+
+  return Object.entries(response.data).reduce<Record<string, WorkflowOnlineUser[]>>((acc, [appId, users]) => {
+    if (appId)
+      acc[appId] = users || []
+    return acc
+  }, {})
+}
+
 export const fetchAppDetail = ({ url, id }: { url: string, id: string }): Promise<AppDetailResponse> => {
   return get<AppDetailResponse>(`${url}/${id}`)
 }
diff --git a/web/service/common.ts b/web/service/common.ts
index 3d9c05e75b..d2fcf8c823 100644
--- a/web/service/common.ts
+++ b/web/service/common.ts
@@ -383,3 +383,8 @@ export const resetEmail = (body: { new_email: string, token: string }): Promise<
 
 export const checkEmailExisted = (body: { email: string }): Promise<CommonResponse> =>
   post<CommonResponse>('/account/change-email/check-email-unique', { body }, { silent: true })
+
+export const getAvatar = async ({ avatar }: { avatar: string }): Promise<{ avatar_url: string }> => {
+  const { consoleClient } = await import('./client')
+  return consoleClient.account.avatar({ query: { avatar } })
+}
diff --git a/web/service/workflow-comment.ts b/web/service/workflow-comment.ts
new file mode 100644
index 0000000000..a8debbfd15
--- /dev/null
+++ b/web/service/workflow-comment.ts
@@ -0,0 +1,103 @@
+import type {
+  CreateCommentParams as ContractCreateCommentParams,
+  CreateReplyParams as ContractCreateReplyParams,
+  UpdateCommentParams as ContractUpdateCommentParams,
+  UserProfile as ContractUserProfile,
+  WorkflowCommentCreateRes as ContractWorkflowCommentCreateRes,
+  WorkflowCommentDetail as ContractWorkflowCommentDetail,
+  WorkflowCommentDetailReply as ContractWorkflowCommentDetailReply,
+  WorkflowCommentList as ContractWorkflowCommentList,
+  WorkflowCommentReplyCreateRes as ContractWorkflowCommentReplyCreateRes,
+  WorkflowCommentReplyUpdateRes as ContractWorkflowCommentReplyUpdateRes,
+  WorkflowCommentResolveRes as ContractWorkflowCommentResolveRes,
+  WorkflowCommentUpdateRes as ContractWorkflowCommentUpdateRes,
+} from '@/contract/console/workflow-comment'
+import type { CommonResponse } from '@/models/common'
+import { consoleClient } from './client'
+
+type CreateCommentParams = ContractCreateCommentParams
+type CreateReplyParams = ContractCreateReplyParams
+type UpdateCommentParams = ContractUpdateCommentParams
+export type UserProfile = ContractUserProfile
+type WorkflowCommentCreateRes = ContractWorkflowCommentCreateRes
+export type WorkflowCommentDetail = ContractWorkflowCommentDetail
+export type WorkflowCommentDetailReply = ContractWorkflowCommentDetailReply
+export type WorkflowCommentList = ContractWorkflowCommentList
+type WorkflowCommentReplyCreateRes = ContractWorkflowCommentReplyCreateRes
+type WorkflowCommentReplyUpdateRes = ContractWorkflowCommentReplyUpdateRes
+type WorkflowCommentResolveRes = ContractWorkflowCommentResolveRes
+type WorkflowCommentUpdateRes = ContractWorkflowCommentUpdateRes
+
+export const fetchWorkflowComments = async (appId: string): Promise<WorkflowCommentList[]> => {
+  const response = await consoleClient.workflowComments.list({
+    params: { appId },
+  })
+  return response.data
+}
+
+export const createWorkflowComment = async (appId: string, params: CreateCommentParams): Promise<WorkflowCommentCreateRes> => {
+  return consoleClient.workflowComments.create({
+    params: { appId },
+    body: params,
+  })
+}
+
+export const fetchWorkflowComment = async (appId: string, commentId: string): Promise<WorkflowCommentDetail> => {
+  return consoleClient.workflowComments.detail({
+    params: { appId, commentId },
+  })
+}
+
+export const updateWorkflowComment = async (appId: string, commentId: string, params: UpdateCommentParams): Promise<WorkflowCommentUpdateRes> => {
+  return consoleClient.workflowComments.update({
+    params: { appId, commentId },
+    body: params,
+  })
+}
+
+export const deleteWorkflowComment = async (appId: string, commentId: string): Promise<CommonResponse> => {
+  return consoleClient.workflowComments.delete({
+    params: { appId, commentId },
+  })
+}
+
+export const resolveWorkflowComment = async (appId: string, commentId: string): Promise<WorkflowCommentResolveRes> => {
+  return consoleClient.workflowComments.resolve({
+    params: { appId, commentId },
+  })
+}
+
+export const createWorkflowCommentReply = async (appId: string, commentId: string, params: CreateReplyParams): Promise<WorkflowCommentReplyCreateRes> => {
+  return consoleClient.workflowComments.replies.create({
+    params: { appId, commentId },
+    body: params,
+  })
+}
+
+export const updateWorkflowCommentReply = async (appId: string, commentId: string, replyId: string, params: CreateReplyParams): Promise<WorkflowCommentReplyUpdateRes> => {
+  return consoleClient.workflowComments.replies.update({
+    params: {
+      appId,
+      commentId,
+      replyId,
+    },
+    body: params,
+  })
+}
+
+export const deleteWorkflowCommentReply = async (appId: string, commentId: string, replyId: string): Promise<CommonResponse> => {
+  return consoleClient.workflowComments.replies.delete({
+    params: {
+      appId,
+      commentId,
+      replyId,
+    },
+  })
+}
+
+export const fetchMentionableUsers = async (appId: string) => {
+  const response = await consoleClient.workflowComments.mentionUsers({
+    params: { appId },
+  })
+  return response.users
+}
diff --git a/web/service/workflow.ts b/web/service/workflow.ts
index 3164e87db6..2db8dffe53 100644
--- a/web/service/workflow.ts
+++ b/web/service/workflow.ts
@@ -1,4 +1,5 @@
-import type { BlockEnum } from '@/app/components/workflow/types'
+import type { BlockEnum, ConversationVariable, EnvironmentVariable } from '@/app/components/workflow/types'
+import type { WorkflowDraftFeaturesPayload as ContractWorkflowDraftFeaturesPayload } from '@/contract/console/workflow'
 import type { CommonResponse } from '@/models/common'
 import type { FlowType } from '@/types/common'
 import type {
@@ -9,8 +10,11 @@ import type {
   VarInInspect,
 } from '@/types/workflow'
 import { get, post } from './base'
+import { consoleClient } from './client'
 import { getFlowPrefix } from './utils'
 
+export type WorkflowDraftFeaturesPayload = ContractWorkflowDraftFeaturesPayload
+
 export const fetchWorkflowDraft = (url: string) => {
   return get(url, {}, { silent: true }) as Promise<FetchWorkflowDraftResponse>
 }
@@ -96,6 +100,36 @@ export const fetchNodeInspectVars = async (flowType: FlowType, flowId: string, n
   return items
 }
 
+export const updateEnvironmentVariables = ({ appId, environmentVariables }: {
+  appId: string
+  environmentVariables: EnvironmentVariable[]
+}) => {
+  return consoleClient.workflowDraft.updateEnvironmentVariables({
+    params: { appId },
+    body: { environment_variables: environmentVariables },
+  })
+}
+
+export const updateConversationVariables = ({ appId, conversationVariables }: {
+  appId: string
+  conversationVariables: ConversationVariable[]
+}) => {
+  return consoleClient.workflowDraft.updateConversationVariables({
+    params: { appId },
+    body: { conversation_variables: conversationVariables },
+  })
+}
+
+export const updateFeatures = ({ appId, features }: {
+  appId: string
+  features: ContractWorkflowDraftFeaturesPayload
+}) => {
+  return consoleClient.workflowDraft.updateFeatures({
+    params: { appId },
+    body: { features },
+  })
+}
+
 export const submitHumanInputForm = (token: string, data: {
   inputs: Record<string, string>
   action: string
diff --git a/web/types/feature.ts b/web/types/feature.ts
index a5c12a453e..5abfb1e1a0 100644
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@@ -42,6 +42,7 @@ export type SystemFeatures = {
   enable_email_code_login: boolean
   enable_email_password_login: boolean
   enable_social_oauth_login: boolean
+  enable_collaboration_mode: boolean
   is_allow_create_workspace: boolean
   is_allow_register: boolean
   is_email_setup: boolean
@@ -81,6 +82,7 @@ export const defaultSystemFeatures: SystemFeatures = {
   enable_email_code_login: false,
   enable_email_password_login: false,
   enable_social_oauth_login: false,
+  enable_collaboration_mode: false,
   is_allow_create_workspace: false,
   is_allow_register: false,
   is_email_setup: false,
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 723f3f4c78..d17a6d4045 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -60,6 +60,10 @@ export default defineConfig(({ mode }) => {
           ],
     resolve: {
       tsconfigPaths: true,
+      alias: [
+        // Use the base64 build in Vite-based pipelines (vinext/vitest) to avoid wasm loader incompatibilities.
+        { find: /^loro-crdt$/, replacement: 'loro-crdt/base64' },
+      ],
     },
 
     // vinext related config

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 114/120] 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 8baa864c35df88d1cf2360d00d545fc1a7aa0101 Mon Sep 17 00:00:00 2001
From: wangxiaolei <fatelei@gmail.com>
Date: Thu, 16 Apr 2026 10:40:14 +0800
Subject: [PATCH 115/120] fix: add miss celery queue (#35282)

---
 .devcontainer/post_create_command.sh | 2 +-
 api/docker/entrypoint.sh             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.devcontainer/post_create_command.sh b/.devcontainer/post_create_command.sh
index b92d4c35a8..7460636824 100755
--- a/.devcontainer/post_create_command.sh
+++ b/.devcontainer/post_create_command.sh
@@ -7,7 +7,7 @@ cd web && pnpm install
 pipx install uv
 
 echo "alias start-api=\"cd $WORKSPACE_ROOT/api && uv run python -m flask run --host 0.0.0.0 --port=5001 --debug\"" >> ~/.bashrc
-echo "alias start-worker=\"cd $WORKSPACE_ROOT/api && uv run python -m celery -A app.celery worker -P threads -c 1 --loglevel INFO -Q dataset,dataset_summary,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention\"" >> ~/.bashrc
+echo "alias start-worker=\"cd $WORKSPACE_ROOT/api && uv run python -m celery -A app.celery worker -P threads -c 1 --loglevel INFO -Q dataset,dataset_summary,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_publisher,trigger_refresh_executor,retention\"" >> ~/.bashrc
 echo "alias start-web=\"cd $WORKSPACE_ROOT/web && pnpm dev:inspect\"" >> ~/.bashrc
 echo "alias start-web-prod=\"cd $WORKSPACE_ROOT/web && pnpm build && pnpm start\"" >> ~/.bashrc
 echo "alias start-containers=\"cd $WORKSPACE_ROOT/docker && docker-compose -f docker-compose.middleware.yaml -p dify --env-file middleware.env up -d\"" >> ~/.bashrc
diff --git a/api/docker/entrypoint.sh b/api/docker/entrypoint.sh
index 48533efe66..fc118df5bc 100755
--- a/api/docker/entrypoint.sh
+++ b/api/docker/entrypoint.sh
@@ -35,10 +35,10 @@ if [[ "${MODE}" == "worker" ]]; then
   if [[ -z "${CELERY_QUEUES}" ]]; then
     if [[ "${EDITION}" == "CLOUD" ]]; then
       # Cloud edition: separate queues for dataset and trigger tasks
-      DEFAULT_QUEUES="api_token,dataset,dataset_summary,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention,workflow_based_app_execution"
+      DEFAULT_QUEUES="api_token,dataset,dataset_summary,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_publisher,trigger_refresh_executor,retention,workflow_based_app_execution"
     else
       # Community edition (SELF_HOSTED): dataset, pipeline and workflow have separate queues
-      DEFAULT_QUEUES="api_token,dataset,dataset_summary,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention,workflow_based_app_execution"
+      DEFAULT_QUEUES="api_token,dataset,dataset_summary,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_publisher,trigger_refresh_executor,retention,workflow_based_app_execution"
     fi
   else
     DEFAULT_QUEUES="${CELERY_QUEUES}"

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 116/120] 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 665978a6028f276c3c87598266ae4d50e14c3aca Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 16 Apr 2026 11:52:40 +0800
Subject: [PATCH 117/120] chore(i18n): sync translations with en-US (#35283)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
---
 web/i18n/fa-IR/workflow.json |  1 +
 web/i18n/nl-NL/workflow.json | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index 3dfaff292e..7914b861ed 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -1189,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "حذف نسخه ناموفق بود",
   "versionHistory.action.deleteSuccess": "نسخه حذف شد",
   "versionHistory.action.restoreFailure": "بازیابی نسخه ناموفق بود",
+  "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 4976e3a577..852415b419 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -109,14 +109,35 @@
   "chatVariable.panelTitle": "Conversation Variables",
   "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.deleteReply": "Antwoord verwijderen",
   "comments.actions.editComment": "Reactie bewerken",
+  "comments.actions.editReply": "Antwoord bewerken",
+  "comments.aria.closeComment": "Reactie sluiten",
   "comments.aria.commentActions": "Reactieacties",
+  "comments.aria.deleteComment": "Thread verwijderen",
   "comments.aria.filterComments": "Reacties filteren",
+  "comments.aria.nextComment": "Volgende reactie",
+  "comments.aria.previousComment": "Vorige reactie",
+  "comments.aria.replyActions": "Antwoordacties",
+  "comments.aria.resolveComment": "Oplossen",
+  "comments.confirm.deleteReplyDesc": "Dit antwoord wordt permanent verwijderd.",
+  "comments.confirm.deleteReplyTitle": "Dit antwoord verwijderen?",
+  "comments.confirm.deleteThreadDesc": "Deze actie verwijdert de thread en alle antwoorden permanent. Dit kan niet ongedaan worden gemaakt.",
+  "comments.confirm.deleteThreadTitle": "Deze thread verwijderen?",
+  "comments.fallback.user": "Gebruiker",
   "comments.filter.all": "Alles",
   "comments.filter.onlyYourThreads": "Alleen jouw threads",
   "comments.filter.showResolved": "Opgeloste tonen",
+  "comments.loading": "Laden\u2026",
+  "comments.noComments": "Nog geen reacties",
+  "comments.panelTitle": "Reactie",
+  "comments.placeholder.add": "Voeg een reactie toe",
   "comments.placeholder.editComment": "Reactie bewerken",
+  "comments.placeholder.editReply": "Antwoord bewerken",
+  "comments.placeholder.reply": "Antwoord",
+  "comments.reply": "Antwoord",
   "common.ImageUploadLegacyTip": "You can now create file type variables in the start form. We will no longer support the image upload feature in the future. ",
   "common.accessAPIReference": "Access API Reference",
   "common.addBlock": "Add Node",
@@ -130,6 +151,7 @@
   "common.branch": "BRANCH",
   "common.chooseDSL": "Choose DSL file",
   "common.chooseStartNodeToRun": "Choose the start node to run",
+  "common.commentMode": "Opmerkingsmodus",
   "common.configure": "Configure",
   "common.configureRequired": "Configure Required",
   "common.conversationLog": "Conversation Log",
@@ -1073,6 +1095,9 @@
   "operator.distributeVertical": "Space Vertically",
   "operator.horizontal": "Horizontal",
   "operator.selectionAlignment": "Selection Alignment",
+  "operator.showMiniMap": "Minimap",
+  "operator.showUserComments": "Reacties",
+  "operator.showUserCursors": "Cursor van medewerker",
   "operator.vertical": "Vertical",
   "operator.zoomIn": "Zoom In",
   "operator.zoomOut": "Zoom Out",
@@ -1164,6 +1189,7 @@
   "versionHistory.action.deleteFailure": "Failed to delete version",
   "versionHistory.action.deleteSuccess": "Version deleted",
   "versionHistory.action.restoreFailure": "Failed to restore version",
+  "versionHistory.action.restoreInProgress": "{{userName}} herstelt naar versie {{versionName}}...",
   "versionHistory.action.restoreSuccess": "Version restored",
   "versionHistory.action.updateFailure": "Failed to update version",
   "versionHistory.action.updateSuccess": "Version updated",

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 118/120] 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 119/120] 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 120/120] 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
       }