Merge remote-tracking branch 'myori/main' into feat/collaboration2

2026-05-03 08:58:09 +08:00 · 2026-01-17 10:22:41 +08:00
parent b549d669d6 c98870c3f4
commit fc291e4ca2
6266 changed files with 544217 additions and 224655 deletions
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'

 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
  const { theme } = useTheme()
@ -23,14 +23,14 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
  return (
    <Button
      className={cn(
-        'p-2',
-        theme === 'dark' && showChatVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        'rounded-lg border border-transparent p-2',
+        theme === 'dark' && showChatVariablePanel && 'border-black/5 bg-white/10 backdrop-blur-sm',
      )}
      disabled={disabled}
      onClick={handleClick}
-      variant='ghost'
+      variant="ghost"
    >
-      <BubbleX className='h-4 w-4 text-components-button-secondary-text' />
+      <BubbleX className="h-4 w-4 text-components-button-secondary-text" />
    </Button>
  )
 }
--- a/web/app/components/workflow/header/checklist.tsx
+++ b/web/app/components/workflow/header/checklist.tsx
@ -1,3 +1,12 @@
+import type { ChecklistItem } from '../hooks/use-checklist'
+import type {
+  BlockEnum,
+  CommonEdgeType,
+} from '../types'
+import {
+  RiCloseLine,
+  RiListCheck3,
+} from '@remixicon/react'
 import {
  memo,
  useState,
@ -5,58 +14,56 @@ import {
 import { useTranslation } from 'react-i18next'
 import {
  useEdges,
-  useNodes,
 } from 'reactflow'
+import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { IconR } from '@/app/components/base/icons/src/vender/line/arrows'
 import {
-  RiCloseLine,
-  RiListCheck3,
-} from '@remixicon/react'
-import BlockIcon from '../block-icon'
-import {
-  useChecklist,
-  useNodesInteractions,
-} from '../hooks'
-import type { ChecklistItem } from '../hooks/use-checklist'
-import type {
-  CommonEdgeType,
-  CommonNodeType,
-} from '../types'
-import cn from '@/utils/classnames'
+  ChecklistSquare,
+} from '@/app/components/base/icons/src/vender/line/general'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { cn } from '@/utils/classnames'
+import BlockIcon from '../block-icon'
 import {
-  ChecklistSquare,
-} from '@/app/components/base/icons/src/vender/line/general'
-import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { IconR } from '@/app/components/base/icons/src/vender/line/arrows'
-import type { BlockEnum } from '../types'
+  useChecklist,
+  useNodesInteractions,
+} from '../hooks'

 type WorkflowChecklistProps = {
  disabled: boolean
+  showGoTo?: boolean
+  onItemClick?: (item: ChecklistItem) => void
 }
 const WorkflowChecklist = ({
  disabled,
+  showGoTo = true,
+  onItemClick,
 }: WorkflowChecklistProps) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
-  const nodes = useNodes<CommonNodeType>()
  const edges = useEdges<CommonEdgeType>()
+  const nodes = useNodes()
  const needWarningNodes = useChecklist(nodes, edges)
  const { handleNodeSelect } = useNodesInteractions()

  const handleChecklistItemClick = (item: ChecklistItem) => {
-    if (!item.canNavigate)
+    const goToEnabled = showGoTo && item.canNavigate && !item.disableGoTo
+    if (!goToEnabled)
      return
-    handleNodeSelect(item.id)
+    if (onItemClick)
+      onItemClick(item)
+    else
+      handleNodeSelect(item.id)
    setOpen(false)
  }

  return (
    <PortalToFollowElem
-      placement='bottom-end'
+      placement="bottom-end"
      offset={{
        mainAxis: 12,
        crossAxis: 4,
@ -80,61 +87,64 @@ const WorkflowChecklist = ({
          </div>
          {
            !!needWarningNodes.length && (
-              <div 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-[#F79009] text-[11px] font-semibold text-white'>
+              <div 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-[#F79009] text-[11px] font-semibold text-white">
                {needWarningNodes.length}
              </div>
            )
          }
        </div>
      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[12]'>
+      <PortalToFollowElemContent className="z-[12]">
        <div
-          className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'
+          className="w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg"
          style={{
            maxHeight: 'calc(2 / 3 * 100vh)',
          }}
        >
-          <div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary'>
-            <div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div>
+          <div className="text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary">
+            <div className="grow">
+              {t('panel.checklist', { ns: 'workflow' })}
+              {needWarningNodes.length ? `(${needWarningNodes.length})` : ''}
+            </div>
            <div
-              className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
+              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center"
              onClick={() => setOpen(false)}
            >
-              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
            </div>
          </div>
-          <div className='pb-2'>
+          <div className="pb-2">
            {
              !!needWarningNodes.length && (
                <>
-                  <div className='px-4 pt-1 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div>
-                  <div className='px-4 py-2'>
+                  <div className="px-4 pt-1 text-xs text-text-tertiary">{t('panel.checklistTip', { ns: 'workflow' })}</div>
+                  <div className="px-4 py-2">
                    {
                      needWarningNodes.map(node => (
                        <div
                          key={node.id}
                          className={cn(
                            'group mb-2 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0',
-                            node.canNavigate ? 'cursor-pointer' : 'cursor-default opacity-80',
+                            showGoTo && node.canNavigate && !node.disableGoTo ? 'cursor-pointer' : 'cursor-default opacity-80',
                          )}
                          onClick={() => handleChecklistItemClick(node)}
                        >
-                          <div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'>
+                          <div className="flex h-9 items-center p-2 text-xs font-medium text-text-secondary">
                            <BlockIcon
                              type={node.type as BlockEnum}
-                              className='mr-1.5'
+                              className="mr-1.5"
                              toolIcon={node.toolIcon}
                            />
-                            <span className='grow truncate'>
+                            <span className="grow truncate">
                              {node.title}
                            </span>
                            {
-                              node.canNavigate && (
-                                <div className='flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
-                                  <span className='whitespace-nowrap text-xs font-medium leading-4 text-primary-600'>
-                                    {t('workflow.panel.goTo')}
+                              (showGoTo && node.canNavigate && !node.disableGoTo) && (
+                                <div className="flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                                  <span className="whitespace-nowrap text-xs font-medium leading-4 text-primary-600">
+                                    {t('panel.goTo', { ns: 'workflow' })}
                                  </span>
-                                  <IconR className='h-3.5 w-3.5 text-primary-600' />
+                                  <IconR className="h-3.5 w-3.5 text-primary-600" />
                                </div>
                              )
                            }
@ -147,19 +157,19 @@ const WorkflowChecklist = ({
                          >
                            {
                              node.unConnected && (
-                                <div className='px-3 py-1 first:pt-1.5 last:pb-1.5'>
-                                  <div className='flex text-xs leading-4 text-text-tertiary'>
-                                    <Warning className='mr-2 mt-[2px] h-3 w-3 text-[#F79009]' />
-                                    {t('workflow.common.needConnectTip')}
+                                <div className="px-3 py-1 first:pt-1.5 last:pb-1.5">
+                                  <div className="flex text-xs leading-4 text-text-tertiary">
+                                    <Warning className="mr-2 mt-[2px] h-3 w-3 text-[#F79009]" />
+                                    {t('common.needConnectTip', { ns: 'workflow' })}
                                  </div>
                                </div>
                              )
                            }
                            {
                              node.errorMessage && (
-                                <div className='px-3 py-1 first:pt-1.5 last:pb-1.5'>
-                                  <div className='flex text-xs leading-4 text-text-tertiary'>
-                                    <Warning className='mr-2 mt-[2px] h-3 w-3 text-[#F79009]' />
+                                <div className="px-3 py-1 first:pt-1.5 last:pb-1.5">
+                                  <div className="flex text-xs leading-4 text-text-tertiary">
+                                    <Warning className="mr-2 mt-[2px] h-3 w-3 text-[#F79009]" />
                                    {node.errorMessage}
                                  </div>
                                </div>
@ -175,9 +185,9 @@ const WorkflowChecklist = ({
            }
            {
              !needWarningNodes.length && (
-                <div className='mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary'>
-                  <ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-text-quaternary' />
-                  {t('workflow.panel.checklistResolved')}
+                <div className="mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary">
+                  <ChecklistSquare className="mx-auto mb-[5px] h-8 w-8 text-text-quaternary" />
+                  {t('panel.checklistResolved', { ns: 'workflow' })}
                </div>
              )
            }
--- a/web/app/components/workflow/header/editing-title.tsx
+++ b/web/app/components/workflow/header/editing-title.tsx
@ -1,7 +1,7 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useStore } from '@/app/components/workflow/store'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import useTimestamp from '@/hooks/use-timestamp'

 const EditingTitle = () => {
@ -18,21 +18,23 @@ const EditingTitle = () => {
      {
        !!draftUpdatedAt && (
          <>
-            {t('workflow.common.autoSaved')} {formatTime(draftUpdatedAt / 1000, 'HH:mm:ss')}
+            {t('common.autoSaved', { ns: 'workflow' })}
+            {' '}
+            {formatTime(draftUpdatedAt / 1000, 'HH:mm:ss')}
          </>
        )
      }
-      <span className='mx-1 flex items-center'>·</span>
+      <span className="mx-1 flex items-center">·</span>
      {
        publishedAt
-          ? `${t('workflow.common.published')} ${formatTimeFromNow(publishedAt)}`
-          : t('workflow.common.unpublished')
+          ? `${t('common.published', { ns: 'workflow' })} ${formatTimeFromNow(publishedAt)}`
+          : t('common.unpublished', { ns: 'workflow' })
      }
      {
        isSyncingWorkflowDraft && (
          <>
-            <span className='mx-1 flex items-center'>·</span>
-            {t('workflow.common.syncingData')}
+            <span className="mx-1 flex items-center">·</span>
+            {t('common.syncingData', { ns: 'workflow' })}
          </>
        )
      }
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@ -1,10 +1,10 @@
 import { memo } from 'react'
 import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
+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'
-import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
+import { cn } from '@/utils/classnames'

 const EnvButton = ({ disabled }: { disabled: boolean }) => {
  const { theme } = useTheme()
@ -26,14 +26,14 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
  return (
    <Button
      className={cn(
-        'p-2',
-        theme === 'dark' && showEnvPanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        'rounded-lg border border-transparent p-2',
+        theme === 'dark' && showEnvPanel && 'border-black/5 bg-white/10 backdrop-blur-sm',
      )}
-      variant='ghost'
+      variant="ghost"
      disabled={disabled}
      onClick={handleClick}
    >
-      <Env className='h-4 w-4 text-components-button-secondary-text' />
+      <Env className="h-4 w-4 text-components-button-secondary-text" />
    </Button>
  )
 }
--- 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 { memo } from 'react'
 import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
+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'
-import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
+import { cn } from '@/utils/classnames'

 const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
  const { theme } = useTheme()
@ -26,14 +26,14 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
  return (
    <Button
      className={cn(
-        'p-2',
-        theme === 'dark' && showGlobalVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        'rounded-lg border border-transparent p-2',
+        theme === 'dark' && showGlobalVariablePanel && 'border-black/5 bg-white/10 backdrop-blur-sm',
      )}
      disabled={disabled}
      onClick={handleClick}
-      variant='ghost'
+      variant="ghost"
    >
-      <GlobalVariable className='h-4 w-4 text-components-button-secondary-text' />
+      <GlobalVariable className="h-4 w-4 text-components-button-secondary-text" />
    </Button>
  )
 }
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@ -1,27 +1,27 @@
+import type { StartNodeType } from '../nodes/start/types'
+import type { RunAndHistoryProps } from './run-and-history'
 import {
  useCallback,
 } from 'react'
 import { useNodes } from 'reactflow'
-import {
-  useStore,
-  useWorkflowStore,
-} from '../store'
-import type { StartNodeType } from '../nodes/start/types'
+import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
+import Divider from '../../base/divider'
 import {
  useNodesInteractions,
  useNodesReadOnly,
  useWorkflowRun,
 } from '../hooks'
-import Divider from '../../base/divider'
-import type { RunAndHistoryProps } from './run-and-history'
-import RunAndHistory from './run-and-history'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../store'
 import EditingTitle from './editing-title'
 import EnvButton from './env-button'
-import VersionHistoryButton from './version-history-button'
-import OnlineUsers from './online-users'
-import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
-import ScrollToSelectedNodeButton from './scroll-to-selected-node-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'

 export type HeaderInNormalProps = {
  components?: {
@ -65,19 +65,19 @@ const HeaderInNormal = ({
  }, [workflowStore, handleBackupDraft, selectedNode, handleNodeSelect, setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel, setShowChatVariablePanel, setShowGlobalVariablePanel])

  return (
-    <div className='flex w-full items-center justify-between'>
+    <div className="flex w-full items-center justify-between">
      <div>
        <EditingTitle />
      </div>
      <div>
        <ScrollToSelectedNodeButton />
      </div>
-      <div className='flex items-center gap-2'>
+      <div className="flex items-center gap-2">
        <OnlineUsers />
        {components?.left}
-        <Divider type='vertical' className='mx-auto h-3.5' />
+        <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]'>
+        <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} />
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@ -1,8 +1,20 @@
+import { RiHistoryLine } from '@remixicon/react'
 import {
  useCallback,
 } from 'react'
-import { RiHistoryLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Button from '@/app/components/base/button'
+import useTheme from '@/hooks/use-theme'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
+import { cn } from '@/utils/classnames'
+import Toast from '../../base/toast'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
+import {
+  useNodesSyncDraft,
+  useWorkflowRun,
+} from '../hooks'
+import { useHooksStore } from '../hooks-store'
 import {
  useStore,
  useWorkflowStore,
@ -10,19 +22,7 @@ import {
 import {
  WorkflowVersion,
 } from '../types'
-import {
-  useNodesSyncDraft,
-  useWorkflowRun,
-} from '../hooks'
-import Toast from '../../base/toast'
 import RestoringTitle from './restoring-title'
-import Button from '@/app/components/base/button'
-import { useInvalidAllLastRun } from '@/service/use-workflow'
-import { useHooksStore } from '../hooks-store'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
-import { collaborationManager } from '../collaboration/core/collaboration-manager'

 export type HeaderInRestoringProps = {
  onRestoreSettled?: () => void
@ -61,7 +61,7 @@ const HeaderInRestoring = ({
      onSuccess: () => {
        Toast.notify({
          type: 'success',
-          message: t('workflow.versionHistory.action.restoreSuccess'),
+          message: t('versionHistory.action.restoreSuccess', { ns: 'workflow' }),
        })
        // Notify other collaboration clients about the workflow restore
        if (appDetail)
@ -70,7 +70,7 @@ const HeaderInRestoring = ({
      onError: () => {
        Toast.notify({
          type: 'error',
-          message: t('workflow.versionHistory.action.restoreFailure'),
+          message: t('versionHistory.action.restoreFailure', { ns: 'workflow' }),
        })
      },
      onSettled: () => {
@ -86,27 +86,28 @@ const HeaderInRestoring = ({
      <div>
        <RestoringTitle />
      </div>
-      <div className=' flex items-center justify-end gap-x-2'>
+      <div className=" flex items-center justify-end gap-x-2">
        <Button
          onClick={handleRestore}
          disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
-          variant='primary'
+          variant="primary"
          className={cn(
-            theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            'rounded-lg border border-transparent',
+            theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
          )}
        >
-          {t('workflow.common.restore')}
+          {t('common.restore', { ns: 'workflow' })}
        </Button>
        <Button
          onClick={handleCancelRestore}
          className={cn(
-            'text-components-button-secondary-accent-text',
-            theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            'rounded-lg border border-transparent text-components-button-secondary-accent-text',
+            theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
          )}
        >
-          <div className='flex items-center gap-x-0.5'>
-            <RiHistoryLine className='h-4 w-4' />
-            <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
+          <div className="flex items-center gap-x-0.5">
+            <RiHistoryLine className="h-4 w-4" />
+            <span className="px-0.5">{t('common.exitVersions', { ns: 'workflow' })}</span>
          </div>
        </Button>
      </div>
--- a/web/app/components/workflow/header/header-in-view-history.tsx
+++ b/web/app/components/workflow/header/header-in-view-history.tsx
@ -1,19 +1,19 @@
+import type { ViewHistoryProps } from './view-history'
 import {
  useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  useWorkflowStore,
-} from '../store'
+import Button from '@/app/components/base/button'
+import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import Divider from '../../base/divider'
 import {
  useWorkflowRun,
 } from '../hooks'
-import Divider from '../../base/divider'
+import {
+  useWorkflowStore,
+} from '../store'
 import RunningTitle from './running-title'
-import type { ViewHistoryProps } from './view-history'
 import ViewHistory from './view-history'
-import Button from '@/app/components/base/button'
-import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'

 export type HeaderInHistoryProps = {
  viewHistoryProps?: ViewHistoryProps
@ -38,15 +38,15 @@ const HeaderInHistory = ({
      <div>
        <RunningTitle />
      </div>
-      <div className='flex items-center space-x-2'>
+      <div className="flex items-center space-x-2">
        <ViewHistory {...viewHistoryProps} withText />
-        <Divider type='vertical' className='mx-auto h-3.5' />
+        <Divider type="vertical" className="mx-auto h-3.5" />
        <Button
-          variant='primary'
+          variant="primary"
          onClick={handleGoBackToEdit}
        >
-          <ArrowNarrowLeft className='mr-1 h-4 w-4' />
-          {t('workflow.common.goBackToEdit')}
+          <ArrowNarrowLeft className="mr-1 h-4 w-4" />
+          {t('common.goBackToEdit', { ns: 'workflow' })}
        </Button>
      </div>
    </>
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@ -1,13 +1,13 @@
+import type { HeaderInNormalProps } from './header-in-normal'
+import type { HeaderInRestoringProps } from './header-in-restoring'
+import type { HeaderInHistoryProps } from './header-in-view-history'
+import dynamic from 'next/dynamic'
 import { usePathname } from 'next/navigation'
 import {
  useWorkflowMode,
 } from '../hooks'
-import type { HeaderInNormalProps } from './header-in-normal'
-import HeaderInNormal from './header-in-normal'
-import type { HeaderInHistoryProps } from './header-in-view-history'
-import type { HeaderInRestoringProps } from './header-in-restoring'
 import { useStore } from '../store'
-import dynamic from 'next/dynamic'
+import HeaderInNormal from './header-in-normal'

 const HeaderInHistory = dynamic(() => import('./header-in-view-history'), {
  ssr: false,
@ -38,9 +38,9 @@ const Header = ({

  return (
    <div
-      className='absolute left-0 top-7 z-10 flex h-0 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3'
+      className="absolute left-0 top-7 z-10 flex h-0 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3"
    >
-      {(inWorkflowCanvas || isPipelineCanvas) && maximizeCanvas && <div className='h-14 w-[52px]' />}
+      {(inWorkflowCanvas || isPipelineCanvas) && maximizeCanvas && <div className="h-14 w-[52px]" />}
      {
        normal && (
          <HeaderInNormal
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@ -1,20 +1,20 @@
 'use client'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useEffect, useState } from 'react'
 import { useReactFlow } from 'reactflow'
 import Avatar from '@/app/components/base/avatar'
-import { useCollaboration } from '../collaboration/hooks/use-collaboration'
-import { useStore } from '../store'
-import cn from '@/utils/classnames'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { getUserColor } from '../collaboration/utils/user-color'
-import Tooltip from '@/app/components/base/tooltip'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import Tooltip from '@/app/components/base/tooltip'
 import { useAppContext } from '@/context/app-context'
 import { getAvatar } from '@/service/common'
+import { cn } from '@/utils/classnames'
+import { useCollaboration } from '../collaboration/hooks/use-collaboration'
+import { getUserColor } from '../collaboration/utils/user-color'
+import { useStore } from '../store'

 const useAvatarUrls = (users: any[]) => {
  const [avatarUrls, setAvatarUrls] = useState<Record<string, string>>({})
@ -81,7 +81,8 @@ const OnlineUsers = () => {
  // Function to jump to user's cursor position
  const jumpToUserCursor = (userId: string) => {
    const cursor = cursors[userId]
-    if (!cursor) return
+    if (!cursor)
+      return

    // Convert world coordinates to center the view on the cursor
    reactFlow.setCenter(cursor.x, cursor.y, { zoom: 1, duration: 800 })
@ -173,7 +174,8 @@ const OnlineUsers = () => {
                      visibleUsers.length > 0 && '-ml-1',
                    )}
                  >
-                    +{remainingCount}
+                    +
+                    {remainingCount}
                  </div>
                  <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
                </div>
--- a/web/app/components/workflow/header/restoring-title.tsx
+++ b/web/app/components/workflow/header/restoring-title.tsx
@ -1,9 +1,9 @@
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import useTimestamp from '@/hooks/use-timestamp'
 import { useStore } from '../store'
 import { WorkflowVersion } from '../types'
-import useTimestamp from '@/hooks/use-timestamp'

 const RestoringTitle = () => {
  const { t } = useTranslation()
@ -11,25 +11,25 @@ const RestoringTitle = () => {
  const { formatTime } = useTimestamp()
  const currentVersion = useStore(state => state.currentVersion)
  const isDraft = currentVersion?.version === WorkflowVersion.Draft
-  const publishStatus = isDraft ? t('workflow.common.unpublished') : t('workflow.common.published')
+  const publishStatus = isDraft ? t('common.unpublished', { ns: 'workflow' }) : t('common.published', { ns: 'workflow' })

  const versionName = useMemo(() => {
    if (isDraft)
-      return t('workflow.versionHistory.currentDraft')
-    return currentVersion?.marked_name || t('workflow.versionHistory.defaultName')
+      return t('versionHistory.currentDraft', { ns: 'workflow' })
+    return currentVersion?.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })
  }, [currentVersion, t, isDraft])

  return (
-    <div className='flex flex-col gap-y-0.5'>
-      <div className='flex items-center gap-x-1'>
-        <span className='system-sm-semibold text-text-primary'>
+    <div className="flex flex-col gap-y-0.5">
+      <div className="flex items-center gap-x-1">
+        <span className="system-sm-semibold text-text-primary">
          {versionName}
        </span>
-        <span className='system-2xs-medium-uppercase rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 text-text-accent-secondary'>
-          {t('workflow.common.viewOnly')}
+        <span className="system-2xs-medium-uppercase rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 text-text-accent-secondary">
+          {t('common.viewOnly', { ns: 'workflow' })}
        </span>
      </div>
-      <div className='system-xs-regular flex h-4 items-center gap-x-1 text-text-tertiary'>
+      <div className="system-xs-regular flex h-4 items-center gap-x-1 text-text-tertiary">
        {
          currentVersion && (
            <>
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@ -1,17 +1,17 @@
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
+import type { ViewHistoryProps } from './view-history'
 import {
  RiPlayLargeLine,
 } from '@remixicon/react'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
 import {
  useNodesReadOnly,
  useWorkflowStartRun,
 } from '../hooks'
-import type { ViewHistoryProps } from './view-history'
-import ViewHistory from './view-history'
 import Checklist from './checklist'
-import cn from '@/utils/classnames'
 import RunMode from './run-mode'
+import ViewHistory from './view-history'

 const PreviewMode = memo(() => {
  const { t } = useTranslation()
@ -25,8 +25,8 @@ const PreviewMode = memo(() => {
      )}
      onClick={() => handleWorkflowStartRunInChatflow()}
    >
-      <RiPlayLargeLine className='mr-1 h-4 w-4' />
-      {t('workflow.common.debugAndPreview')}
+      <RiPlayLargeLine className="mr-1 h-4 w-4" />
+      {t('common.debugAndPreview', { ns: 'workflow' })}
    </div>
  )
 })
@ -56,7 +56,7 @@ const RunAndHistory = ({
  const { RunMode: CustomRunMode } = components || {}

  return (
-    <div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
+    <div className="flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs">
      {
        showRunButton && (
          CustomRunMode ? <CustomRunMode text={runButtonText} /> : <RunMode text={runButtonText} />
@ -65,7 +65,7 @@ const RunAndHistory = ({
      {
        showPreviewButton && <PreviewMode />
      }
-      <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
+      <div className="mx-0.5 h-3.5 w-[1px] bg-divider-regular"></div>
      <ViewHistory {...viewHistoryProps} />
      <Checklist disabled={nodesReadOnly} />
    </div>
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@ -1,17 +1,20 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import type { TestRunMenuRef, TriggerOption } from './test-run-menu'
+import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
+import * as React from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { trackEvent } from '@/app/components/base/amplitude'
+import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { useToastContext } from '@/app/components/base/toast'
 import { useWorkflowRun, useWorkflowRunValidation, useWorkflowStartRun } from '@/app/components/workflow/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import cn from '@/utils/classnames'
-import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
-import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+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, { type TestRunMenuRef, type TriggerOption, TriggerType } from './test-run-menu'
-import { useToastContext } from '@/app/components/base/toast'
+import TestRunMenu, { TriggerType } from './test-run-menu'

 type RunModeProps = {
  text?: string
@ -63,28 +66,33 @@ const RunMode = ({
        isValid = false
    })
    if (!isValid) {
-      notify({ type: 'error', message: t('workflow.panel.checklistTip') })
+      notify({ type: 'error', message: t('panel.checklistTip', { ns: 'workflow' }) })
      return
    }

    if (option.type === TriggerType.UserInput) {
      handleWorkflowStartRunInWorkflow()
+      trackEvent('app_start_action_time', { action_type: 'user_input' })
    }
    else if (option.type === TriggerType.Schedule) {
      handleWorkflowTriggerScheduleRunInWorkflow(option.nodeId)
+      trackEvent('app_start_action_time', { action_type: 'schedule' })
    }
    else if (option.type === TriggerType.Webhook) {
      if (option.nodeId)
        handleWorkflowTriggerWebhookRunInWorkflow({ nodeId: option.nodeId })
+      trackEvent('app_start_action_time', { action_type: 'webhook' })
    }
    else if (option.type === TriggerType.Plugin) {
      if (option.nodeId)
        handleWorkflowTriggerPluginRunInWorkflow(option.nodeId)
+      trackEvent('app_start_action_time', { action_type: 'plugin' })
    }
    else if (option.type === TriggerType.All) {
      const targetNodeIds = option.relatedNodeIds?.filter(Boolean)
      if (targetNodeIds && targetNodeIds.length > 0)
        handleWorkflowRunAllTriggersInWorkflow(targetNodeIds)
+      trackEvent('app_start_action_time', { action_type: 'all' })
    }
    else {
      // Placeholder for trigger-specific execution logic for schedule, webhook, plugin types
@ -106,57 +114,57 @@ const RunMode = ({
  })

  return (
-    <div className='flex items-center gap-x-px'>
+    <div className="flex items-center gap-x-px">
      {
        isRunning
          ? (
-            <button
-              type='button'
-              className={cn(
-                'system-xs-medium flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent',
-              )}
-              disabled={true}
-            >
-              <RiLoader2Line className='mr-1 size-4 animate-spin' />
-              {isListening ? t('workflow.common.listening') : t('workflow.common.running')}
-            </button>
-          )
-          : (
-            <TestRunMenu
-              ref={testRunMenuRef}
-              options={dynamicOptions}
-              onSelect={handleTriggerSelect}
-            >
-              <div
+              <button
+                type="button"
                className={cn(
-                  'system-xs-medium flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent hover:bg-state-accent-hover',
+                  'system-xs-medium flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent',
                )}
-                style={{ userSelect: 'none' }}
+                disabled={true}
              >
-                <RiPlayLargeLine className='mr-1 size-4' />
-                {text ?? t('workflow.common.run')}
-                <div className='system-kbd flex items-center gap-x-0.5 text-text-tertiary'>
-                  <div className='flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray'>
-                    {getKeyboardKeyNameBySystem('alt')}
-                  </div>
-                  <div className='flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray'>
-                    R
+                <RiLoader2Line className="mr-1 size-4 animate-spin" />
+                {isListening ? t('common.listening', { ns: 'workflow' }) : t('common.running', { ns: 'workflow' })}
+              </button>
+            )
+          : (
+              <TestRunMenu
+                ref={testRunMenuRef}
+                options={dynamicOptions}
+                onSelect={handleTriggerSelect}
+              >
+                <div
+                  className={cn(
+                    'system-xs-medium flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent hover:bg-state-accent-hover',
+                  )}
+                  style={{ userSelect: 'none' }}
+                >
+                  <RiPlayLargeLine className="mr-1 size-4" />
+                  {text ?? t('common.run', { ns: 'workflow' })}
+                  <div className="system-kbd flex items-center gap-x-0.5 text-text-tertiary">
+                    <div className="flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray">
+                      {getKeyboardKeyNameBySystem('alt')}
+                    </div>
+                    <div className="flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray">
+                      R
+                    </div>
                  </div>
                </div>
-              </div>
-            </TestRunMenu>
-          )
+              </TestRunMenu>
+            )
      }
      {
        isRunning && (
          <button
-            type='button'
+            type="button"
            className={cn(
              'flex size-7 items-center justify-center rounded-r-md bg-state-accent-active',
            )}
            onClick={handleStop}
          >
-            <StopCircle className='size-4 text-text-accent' />
+            <StopCircle className="size-4 text-text-accent" />
          </button>
        )
      }
--- a/web/app/components/workflow/header/running-title.tsx
+++ b/web/app/components/workflow/header/running-title.tsx
@ -1,9 +1,9 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 import { useIsChatMode } from '../hooks'
 import { useStore } from '../store'
 import { formatWorkflowRunIdentifier } from '../utils'
-import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'

 const RunningTitle = () => {
  const { t } = useTranslation()
@ -11,12 +11,12 @@ const RunningTitle = () => {
  const historyWorkflowData = useStore(s => s.historyWorkflowData)

  return (
-    <div className='flex h-[18px] items-center text-xs text-gray-500'>
-      <ClockPlay className='mr-1 h-3 w-3 text-gray-500' />
+    <div className="flex h-[18px] items-center text-xs text-gray-500">
+      <ClockPlay className="mr-1 h-3 w-3 text-gray-500" />
      <span>{isChatMode ? `Test Chat${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}` : `Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}</span>
-      <span className='mx-1'>·</span>
-      <span className='ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/[0.48] px-1 text-[10px] font-semibold uppercase text-indigo-600'>
-        {t('workflow.common.viewOnly')}
+      <span className="mx-1">·</span>
+      <span className="ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/[0.48] px-1 text-[10px] font-semibold uppercase text-indigo-600">
+        {t('common.viewOnly', { ns: 'workflow' })}
      </span>
    </div>
  )
--- 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,10 +1,10 @@
 import type { FC } from 'react'
-import { useCallback } from 'react'
-import { useNodes } from 'reactflow'
-import { useTranslation } from 'react-i18next'
 import type { CommonNodeType } from '../types'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
+import { cn } from '@/utils/classnames'
 import { scrollToWorkflowNode } from '../utils/node-navigation'
-import cn from '@/utils/classnames'

 const ScrollToSelectedNodeButton: FC = () => {
  const { t } = useTranslation()
@ -12,7 +12,8 @@ const ScrollToSelectedNodeButton: FC = () => {
  const selectedNode = nodes.find(node => node.data.selected)

  const handleScrollToSelectedNode = useCallback(() => {
-    if (!selectedNode) return
+    if (!selectedNode)
+      return
    scrollToWorkflowNode(selectedNode.id)
  }, [selectedNode])

@ -26,7 +27,7 @@ const ScrollToSelectedNodeButton: FC = () => {
      )}
      onClick={handleScrollToSelectedNode}
    >
-      {t('workflow.panel.scrollToSelectedNode')}
+      {t('panel.scrollToSelectedNode', { ns: 'workflow' })}
    </div>
  )
 }
--- a/web/app/components/workflow/header/test-run-menu.tsx
+++ b/web/app/components/workflow/header/test-run-menu.tsx
@ -1,10 +1,9 @@
+import type { MouseEvent, MouseEventHandler, ReactElement } from 'react'
 import {
-  type MouseEvent,
-  type MouseEventHandler,
-  type ReactElement,
  cloneElement,
  forwardRef,
  isValidElement,
+
  useCallback,
  useEffect,
  useImperativeHandle,
@ -158,14 +157,14 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
    return (
      <div
        key={option.id}
-        className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
+        className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
        onClick={() => handleSelect(option)}
      >
-        <div className='flex min-w-0 flex-1 items-center'>
-          <div className='flex h-6 w-6 shrink-0 items-center justify-center'>
+        <div className="flex min-w-0 flex-1 items-center">
+          <div className="flex h-6 w-6 shrink-0 items-center justify-center">
            {option.icon}
          </div>
-          <span className='ml-2 truncate'>{option.name}</span>
+          <span className="ml-2 truncate">{option.name}</span>
        </div>
        {shortcutKey && (
          <ShortcutsName keys={[shortcutKey]} className="ml-2" textColor="secondary" />
@ -214,7 +213,7 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
    <PortalToFollowElem
      open={open}
      onOpenChange={setOpen}
-      placement='bottom-start'
+      placement="bottom-start"
      offset={{ mainAxis: 8, crossAxis: -4 }}
    >
      <PortalToFollowElemTrigger asChild onClick={() => setOpen(!open)}>
@ -222,16 +221,16 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
          {children}
        </div>
      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[12]'>
-        <div className='w-[284px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
-          <div className='mb-2 px-3 pt-2 text-sm font-medium text-text-primary'>
-            {t('workflow.common.chooseStartNodeToRun')}
+      <PortalToFollowElemContent className="z-[12]">
+        <div className="w-[284px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
+          <div className="mb-2 px-3 pt-2 text-sm font-medium text-text-primary">
+            {t('common.chooseStartNodeToRun', { ns: 'workflow' })}
          </div>
          <div>
            {hasUserInput && renderOption(options.userInput!)}

            {(hasTriggers || hasRunAll) && hasUserInput && (
-              <div className='mx-3 my-1 h-px bg-divider-subtle' />
+              <div className="mx-3 my-1 h-px bg-divider-subtle" />
            )}

            {hasRunAll && renderOption(options.runAll!)}
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@ -1,18 +1,18 @@
 import type { FC } from 'react'
-import { memo, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
  RiArrowGoBackLine,
  RiArrowGoForwardFill,
 } from '@remixicon/react'
-import TipPopup from '../operator/tip-popup'
-import Divider from '../../base/divider'
-import { useNodesReadOnly } from '@/app/components/workflow/hooks'
-import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
+import { memo, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
-import classNames from '@/utils/classnames'
+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'

-export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
+export type UndoRedoProps = { handleUndo: () => void, handleRedo: () => void }
 const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
  const { t } = useTranslation()
  const [buttonsDisabled, setButtonsDisabled] = useState({ undo: true, redo: true })
@ -43,35 +43,34 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
  const { nodesReadOnly } = useNodesReadOnly()

  return (
-    <div className='flex items-center space-x-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-lg backdrop-blur-[5px]'>
-      <TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
+    <div className="flex items-center space-x-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-lg backdrop-blur-[5px]">
+      <TipPopup title={t('common.undo', { ns: 'workflow' })!} shortcuts={['ctrl', 'z']}>
        <div
-          data-tooltip-id='workflow.undo'
+          data-tooltip-id="workflow.undo"
          className={
-            classNames('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)
-              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
+            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)
+            && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
+          }
          onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
        >
-          <RiArrowGoBackLine className='h-4 w-4' />
-        </div>
-      </TipPopup >
-      <TipPopup title={t('workflow.common.redo')!} shortcuts={['ctrl', 'y']}>
-        <div
-          data-tooltip-id='workflow.redo'
-          className={
-            classNames('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)
-              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
-            )}
-          onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
-        >
-          <RiArrowGoForwardFill className='h-4 w-4' />
+          <RiArrowGoBackLine className="h-4 w-4" />
        </div>
      </TipPopup>
-      <Divider type='vertical' className="mx-0.5 h-3.5" />
+      <TipPopup title={t('common.redo', { ns: 'workflow' })!} shortcuts={['ctrl', 'y']}>
+        <div
+          data-tooltip-id="workflow.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)
+            && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
+          }
+          onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
+        >
+          <RiArrowGoForwardFill className="h-4 w-4" />
+        </div>
+      </TipPopup>
+      <Divider type="vertical" className="mx-0.5 h-3.5" />
      <ViewWorkflowHistory />
-    </div >
+    </div>
  )
 }

--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@ -1,12 +1,14 @@
-import React, { type FC, useCallback } from 'react'
+import type { FC } from 'react'
 import { RiHistoryLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
 import { useKeyPress } from 'ahooks'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import useTheme from '@/hooks/use-theme'
+import { cn } from '@/utils/classnames'
 import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../utils'
-import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'

 type VersionHistoryButtonProps = {
  onClick: () => Promise<unknown> | unknown
@ -17,15 +19,15 @@ const VERSION_HISTORY_SHORTCUT = ['ctrl', '⇧', 'H']
 const PopupContent = React.memo(() => {
  const { t } = useTranslation()
  return (
-    <div className='flex items-center gap-x-1'>
-      <div className='system-xs-medium px-0.5 text-text-secondary'>
-        {t('workflow.common.versionHistory')}
+    <div className="flex items-center gap-x-1">
+      <div className="system-xs-medium px-0.5 text-text-secondary">
+        {t('common.versionHistory', { ns: 'workflow' })}
      </div>
-      <div className='flex items-center gap-x-0.5'>
+      <div className="flex items-center gap-x-0.5">
        {VERSION_HISTORY_SHORTCUT.map(key => (
          <span
            key={key}
-            className='system-kbd rounded-[4px] bg-components-kbd-bg-white px-[1px] text-text-tertiary'
+            className="system-kbd rounded-[4px] bg-components-kbd-bg-white px-[1px] text-text-tertiary"
          >
            {getKeyboardKeyNameBySystem(key)}
          </span>
@ -50,22 +52,24 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
    handleViewVersionHistory()
  }, { exactMatch: true, useCapture: true })

-  return <Tooltip
-    popupContent={<PopupContent />}
-    noDecoration
-    popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
-    shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5'
-  >
-    <Button
-      className={cn(
-        'p-2',
-        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
-      )}
-      onClick={handleViewVersionHistory}
+  return (
+    <Tooltip
+      popupContent={<PopupContent />}
+      noDecoration
+      popupClassName="rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
+    shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5"
    >
-      <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
-    </Button>
-  </Tooltip>
+      <Button
+        className={cn(
+          'rounded-lg border border-transparent p-2',
+          theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
+        )}
+        onClick={handleViewVersionHistory}
+      >
+        <RiHistoryLine className="h-4 w-4 text-components-button-secondary-text" />
+      </Button>
+    </Tooltip>
+  )
 }

 export default VersionHistoryButton
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@ -1,56 +1,51 @@
-import {
-  memo,
-  useState,
-} from 'react'
-import type { Fetcher } from 'swr'
-import useSWR from 'swr'
-import { useTranslation } from 'react-i18next'
-import { noop } from 'lodash-es'
 import {
  RiCheckboxCircleLine,
  RiCloseLine,
  RiErrorWarningLine,
 } from '@remixicon/react'
 import {
-  useIsChatMode,
-  useNodesInteractions,
-  useWorkflowInteractions,
-  useWorkflowRun,
-} from '../hooks'
-import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
-import { ControlMode, WorkflowRunningStatus } from '../types'
-import { formatWorkflowRunIdentifier } from '../utils'
-import cn from '@/utils/classnames'
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import {
+  ClockPlay,
+  ClockPlaySlim,
+} from '@/app/components/base/icons/src/vender/line/time'
+import Loading from '@/app/components/base/loading'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  ClockPlay,
-  ClockPlaySlim,
-} from '@/app/components/base/icons/src/vender/line/time'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import Loading from '@/app/components/base/loading'
+import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import {
  useStore,
  useWorkflowStore,
 } from '@/app/components/workflow/store'
-import type { WorkflowRunHistoryResponse } from '@/types/workflow'
-import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useWorkflowRunHistory } from '@/service/use-workflow'
+import { cn } from '@/utils/classnames'
+import {
+  useIsChatMode,
+  useNodesInteractions,
+  useWorkflowInteractions,
+  useWorkflowRun,
+} from '../hooks'
+import { ControlMode, WorkflowRunningStatus } from '../types'
+import { formatWorkflowRunIdentifier } from '../utils'

 export type ViewHistoryProps = {
  withText?: boolean
  onClearLogAndMessageModal?: () => void
  historyUrl?: string
-  historyFetcher?: Fetcher<WorkflowRunHistoryResponse, string>
 }
 const ViewHistory = ({
  withText,
  onClearLogAndMessageModal,
  historyUrl,
-  historyFetcher,
 }: ViewHistoryProps) => {
  const { t } = useTranslation()
  const isChatMode = useIsChatMode()
@ -68,11 +63,11 @@ const ViewHistory = ({
  const { handleBackupDraft } = useWorkflowRun()
  const { closeAllInputFieldPanels } = useInputFieldPanel()

-  const fetcher = historyFetcher ?? (noop as Fetcher<WorkflowRunHistoryResponse, string>)
+  const shouldFetchHistory = open && !!historyUrl
  const {
    data,
    isLoading,
-  } = useSWR((open && historyUrl && historyFetcher) ? historyUrl : null, fetcher)
+  } = useWorkflowRunHistory(historyUrl, shouldFetchHistory)

  return (
    (
@ -92,18 +87,19 @@ const ViewHistory = ({
                'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 shadow-xs',
                'cursor-pointer text-[13px] font-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover',
                open && 'bg-components-button-secondary-bg-hover',
-              )}>
+              )}
+              >
                <ClockPlay
-                  className={'mr-1 h-4 w-4'}
+                  className="mr-1 h-4 w-4"
                />
-                {t('workflow.common.showRunHistory')}
+                {t('common.showRunHistory', { ns: 'workflow' })}
              </div>
            )
          }
          {
            !withText && (
              <Tooltip
-                popupContent={t('workflow.common.viewRunHistory')}
+                popupContent={t('common.viewRunHistory', { ns: 'workflow' })}
              >
                <div
                  className={cn('group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
@ -117,41 +113,41 @@ const ViewHistory = ({
            )
          }
        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className='z-[12]'>
+        <PortalToFollowElemContent className="z-[12]">
          <div
-            className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
+            className="ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
            style={{
              maxHeight: 'calc(2 / 3 * 100vh)',
            }}
          >
-            <div className='sticky top-0 flex items-center justify-between bg-components-panel-bg px-4 pt-3 text-base font-semibold text-text-primary'>
-              <div className='grow'>{t('workflow.common.runHistory')}</div>
+            <div className="sticky top-0 flex items-center justify-between bg-components-panel-bg px-4 pt-3 text-base font-semibold text-text-primary">
+              <div className="grow">{t('common.runHistory', { ns: 'workflow' })}</div>
              <div
-                className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
+                className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center"
                onClick={() => {
                  onClearLogAndMessageModal?.()
                  setOpen(false)
                }}
              >
-                <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+                <RiCloseLine className="h-4 w-4 text-text-tertiary" />
              </div>
            </div>
            {
              isLoading && (
-                <div className='flex h-10 items-center justify-center'>
+                <div className="flex h-10 items-center justify-center">
                  <Loading />
                </div>
              )
            }
            {
              !isLoading && (
-                <div className='p-2'>
+                <div className="p-2">
                  {
                    !data?.data.length && (
-                      <div className='py-12'>
-                        <ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-text-quaternary' />
-                        <div className='text-center text-[13px] text-text-quaternary'>
-                          {t('workflow.common.notRunning')}
+                      <div className="py-12">
+                        <ClockPlaySlim className="mx-auto mb-2 h-8 w-8 text-text-quaternary" />
+                        <div className="text-center text-[13px] text-text-quaternary">
+                          {t('common.notRunning', { ns: 'workflow' })}
                        </div>
                      </div>
                    )
@ -180,17 +176,17 @@ const ViewHistory = ({
                      >
                        {
                          !isChatMode && item.status === WorkflowRunningStatus.Stopped && (
-                            <AlertTriangle className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]' />
+                            <AlertTriangle className="mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]" />
                          )
                        }
                        {
                          !isChatMode && item.status === WorkflowRunningStatus.Failed && (
-                            <RiErrorWarningLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]' />
+                            <RiErrorWarningLine className="mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]" />
                          )
                        }
                        {
                          !isChatMode && item.status === WorkflowRunningStatus.Succeeded && (
-                            <RiCheckboxCircleLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]' />
+                            <RiCheckboxCircleLine className="mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]" />
                          )
                        }
                        <div>
@ -202,8 +198,11 @@ const ViewHistory = ({
                          >
                            {`Test ${isChatMode ? 'Chat' : 'Run'}${formatWorkflowRunIdentifier(item.finished_at)}`}
                          </div>
-                          <div className='flex items-center text-xs leading-[18px] text-text-tertiary'>
-                            {item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
+                          <div className="flex items-center text-xs leading-[18px] text-text-tertiary">
+                            {item.created_by_account?.name}
+                            {' '}
+                            ·
+                            {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
                          </div>
                        </div>
                      </div>
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@ -1,31 +1,30 @@
+import type { WorkflowHistoryState } from '../workflow-history-store'
+import {
+  RiCloseLine,
+  RiHistoryLine,
+} from '@remixicon/react'
 import {
  memo,
  useCallback,
  useMemo,
  useState,
 } from 'react'
-import {
-  RiCloseLine,
-  RiHistoryLine,
-} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { useShallow } from 'zustand/react/shallow'
 import { useStoreApi } from 'reactflow'
-import {
-  useNodesReadOnly,
-  useWorkflowHistory,
-} from '../hooks'
-import TipPopup from '../operator/tip-popup'
-import type { WorkflowHistoryState } from '../workflow-history-store'
-import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
+import { useShallow } from 'zustand/react/shallow'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
+import Divider from '../../base/divider'
+import {
+  useNodesReadOnly,
+  useWorkflowHistory,
+} from '../hooks'
+import TipPopup from '../operator/tip-popup'

 type ChangeHistoryEntry = {
  label: string
@ -84,7 +83,7 @@ const ViewWorkflowHistory = () => {
      return

    const count = index < 0 ? index * -1 : index
-    return `${index > 0 ? t('workflow.changeHistory.stepForward', { count }) : t('workflow.changeHistory.stepBackward', { count })}`
+    return `${index > 0 ? t('changeHistory.stepForward', { ns: 'workflow', count }) : t('changeHistory.stepBackward', { ns: 'workflow', count })}`
  }, [t])

  const calculateChangeList: ChangeHistoryList = useMemo(() => {
@ -97,10 +96,12 @@ const ViewWorkflowHistory = () => {
        index: reverse ? list.length - 1 - index - startIndex : index - startIndex,
        state: {
          ...state,
-          workflowHistoryEventMeta: state.workflowHistoryEventMeta ? {
-            ...state.workflowHistoryEventMeta,
-            nodeTitle: state.workflowHistoryEventMeta.nodeTitle || targetTitle,
-          } : undefined,
+          workflowHistoryEventMeta: state.workflowHistoryEventMeta
+            ? {
+                ...state.workflowHistoryEventMeta,
+                nodeTitle: state.workflowHistoryEventMeta.nodeTitle || targetTitle,
+              }
+            : undefined,
        },
      }
    }).filter(Boolean)
@ -128,7 +129,7 @@ const ViewWorkflowHistory = () => {
  return (
    (
      <PortalToFollowElem
-        placement='bottom-end'
+        placement="bottom-end"
        offset={{
          mainAxis: 4,
          crossAxis: 131,
@ -138,14 +139,12 @@ const ViewWorkflowHistory = () => {
      >
        <PortalToFollowElemTrigger onClick={() => !nodesReadOnly && setOpen(v => !v)}>
          <TipPopup
-            title={t('workflow.changeHistory.title')}
+            title={t('changeHistory.title', { ns: 'workflow' })}
          >
            <div
              className={
-                classNames('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-                  open && 'bg-state-accent-active text-text-accent',
-                  nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
-                )}
+                cn('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', open && 'bg-state-accent-active text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
+              }
              onClick={() => {
                if (nodesReadOnly)
                  return
@ -153,110 +152,115 @@ const ViewWorkflowHistory = () => {
                setShowMessageLogModal(false)
              }}
            >
-              <RiHistoryLine className='h-4 w-4' />
+              <RiHistoryLine className="h-4 w-4" />
            </div>
          </TipPopup>
        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className='z-[12]'>
+        <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 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]"
          >
-            <div className='sticky top-0 flex items-center justify-between px-4 pt-3'>
-              <div className='system-mg-regular grow text-text-secondary'>{t('workflow.changeHistory.title')}</div>
+            <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>
              <div
-                className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
+                className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center"
                onClick={() => {
                  setCurrentLogItem()
                  setShowMessageLogModal(false)
                  setOpen(false)
                }}
              >
-                <RiCloseLine className='h-4 w-4 text-text-secondary' />
+                <RiCloseLine className="h-4 w-4 text-text-secondary" />
+              </div>
+            </div>
+            <div
+              className="overflow-y-auto p-2"
+              style={{
+                maxHeight: 'calc(1 / 2 * 100vh)',
+              }}
+            >
+              {
+                !calculateChangeList.statesCount && (
+                  <div className="py-12">
+                    <RiHistoryLine className="mx-auto mb-2 h-8 w-8 text-text-tertiary" />
+                    <div className="text-center text-[13px] text-text-tertiary">
+                      {t('changeHistory.placeholder', { ns: 'workflow' })}
+                    </div>
+                  </div>
+                )
+              }
+              <div className="flex flex-col">
+                {
+                  calculateChangeList.futureStates.map((item: ChangeHistoryEntry) => (
+                    <div
+                      key={item?.index}
+                      className={cn(
+                        'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] text-text-secondary hover:bg-state-base-hover',
+                        item?.index === currentHistoryStateIndex && 'bg-state-base-hover',
+                      )}
+                      onClick={() => {
+                        handleSetState(item)
+                        setOpen(false)
+                      }}
+                    >
+                      <div>
+                        <div
+                          className={cn(
+                            'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
+                          )}
+                        >
+                          {composeHistoryItemLabel(
+                            item?.state?.workflowHistoryEventMeta?.nodeTitle,
+                            item?.label || t('changeHistory.sessionStart', { ns: 'workflow' }),
+                          )}
+                          {' '}
+                          (
+                          {calculateStepLabel(item?.index)}
+                          {item?.index === currentHistoryStateIndex && t('changeHistory.currentState', { ns: 'workflow' })}
+                          )
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                }
+                {
+                  calculateChangeList.pastStates.map((item: ChangeHistoryEntry) => (
+                    <div
+                      key={item?.index}
+                      className={cn(
+                        'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover',
+                        item?.index === calculateChangeList.statesCount - 1 && 'bg-state-base-hover',
+                      )}
+                      onClick={() => {
+                        handleSetState(item)
+                        setOpen(false)
+                      }}
+                    >
+                      <div>
+                        <div
+                          className={cn(
+                            'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
+                          )}
+                        >
+                          {composeHistoryItemLabel(
+                            item?.state?.workflowHistoryEventMeta?.nodeTitle,
+                            item?.label || t('changeHistory.sessionStart', { ns: 'workflow' }),
+                          )}
+                          {' '}
+                          (
+                          {calculateStepLabel(item?.index)}
+                          )
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                }
              </div>
            </div>
-            {
-              (
-                <div
-                  className='overflow-y-auto p-2'
-                  style={{
-                    maxHeight: 'calc(1 / 2 * 100vh)',
-                  }}
-                >
-                  {
-                    !calculateChangeList.statesCount && (
-                      <div className='py-12'>
-                        <RiHistoryLine className='mx-auto mb-2 h-8 w-8 text-text-tertiary' />
-                        <div className='text-center text-[13px] text-text-tertiary'>
-                          {t('workflow.changeHistory.placeholder')}
-                        </div>
-                      </div>
-                    )
-                  }
-                  <div className='flex flex-col'>
-                    {
-                      calculateChangeList.futureStates.map((item: ChangeHistoryEntry) => (
-                        <div
-                          key={item?.index}
-                          className={cn(
-                            'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] text-text-secondary hover:bg-state-base-hover',
-                            item?.index === currentHistoryStateIndex && 'bg-state-base-hover',
-                          )}
-                          onClick={() => {
-                            handleSetState(item)
-                            setOpen(false)
-                          }}
-                        >
-                          <div>
-                            <div
-                              className={cn(
-                                'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
-                              )}
-                            >
-                              {composeHistoryItemLabel(
-                                item?.state?.workflowHistoryEventMeta?.nodeTitle,
-                                item?.label || t('workflow.changeHistory.sessionStart'),
-                              )} ({calculateStepLabel(item?.index)}{item?.index === currentHistoryStateIndex && t('workflow.changeHistory.currentState')})
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    }
-                    {
-                      calculateChangeList.pastStates.map((item: ChangeHistoryEntry) => (
-                        <div
-                          key={item?.index}
-                          className={cn(
-                            'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover',
-                            item?.index === calculateChangeList.statesCount - 1 && 'bg-state-base-hover',
-                          )}
-                          onClick={() => {
-                            handleSetState(item)
-                            setOpen(false)
-                          }}
-                        >
-                          <div>
-                            <div
-                              className={cn(
-                                'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
-                              )}
-                            >
-                              {composeHistoryItemLabel(
-                                item?.state?.workflowHistoryEventMeta?.nodeTitle,
-                                item?.label || t('workflow.changeHistory.sessionStart'),
-                              )} ({calculateStepLabel(item?.index)})
-                            </div>
-                          </div>
-                        </div>
-                      ))
-                    }
-                  </div>
-                </div>
-              )
-            }
            {
              !!calculateChangeList.statesCount && (
-                <div className='px-0.5'>
-                  <Divider className='m-0' />
+                <div className="px-0.5">
+                  <Divider className="m-0" />
                  <div
                    className={cn(
                      'my-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] text-text-secondary',
@ -273,16 +277,16 @@ const ViewWorkflowHistory = () => {
                          'flex items-center text-[13px] font-medium leading-[18px]',
                        )}
                      >
-                        {t('workflow.changeHistory.clearHistory')}
+                        {t('changeHistory.clearHistory', { ns: 'workflow' })}
                      </div>
                    </div>
                  </div>
                </div>
              )
            }
-            <div className="w-[240px] px-3 py-2 text-xs text-text-tertiary" >
-              <div className="mb-1 flex h-[22px] items-center font-medium uppercase">{t('workflow.changeHistory.hint')}</div>
-              <div className="mb-1 leading-[18px] text-text-tertiary">{t('workflow.changeHistory.hintText')}</div>
+            <div className="w-[240px] px-3 py-2 text-xs text-text-tertiary">
+              <div className="mb-1 flex h-[22px] items-center font-medium uppercase">{t('changeHistory.hint', { ns: 'workflow' })}</div>
+              <div className="mb-1 leading-[18px] text-text-tertiary">{t('changeHistory.hintText', { ns: 'workflow' })}</div>
            </div>
          </div>
        </PortalToFollowElemContent>