diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index fc9e994c9c..9a3d3317aa 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -1,58 +1,86 @@
 import type { FC } from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { RiLoader2Line, RiStopCircleFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import { useStore } from '../store'
+import useCurrentVars from '../hooks/use-current-vars'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 const VariableInspectTrigger: FC = () => {
+  const { t } = useTranslation()
+
   const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
 
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+  const isRunning = useMemo(() => {
+    if (!workflowRunningData)
+      return false
+    if (workflowRunningData.result.status === WorkflowRunningStatus.Running)
+      return true
+    return (workflowRunningData.tracing || []).some(tracingData => tracingData.status === NodeRunningStatus.Running)
+  }, [workflowRunningData])
+
+  const {
+    currentVars,
+    clearCurrentVars,
+  } = useCurrentVars()
+
+  // ##TODD stop handle
+
   if (showVariableInspectPanel)
     return null
 
   return (
     <div className={cn('flex items-center gap-1')}>
-      {/* view button */}
-      <div
-        className='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-sm hover:bg-background-default-hover'
-        onClick={() => setShowVariableInspectPanel(true)}
-      >
-        Variable inspect
-      </div>
-      {/* caching button */}
-      <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-sm hover:bg-components-actionbar-bg-accent'
-        onClick={() => setShowVariableInspectPanel(true)}
-      >
-        <RiLoader2Line className='h-4 w-4' />
-        <span className='text-text-accent'>Caching running status</span>
-      </div>
-      {/* stop button */}
-      <Tooltip
-        popupContent={'Stop run'}
-      >
+      {!isRunning && !currentVars.length && (
         <div
-          className='flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
-          // onClick={() => {}}
+          className='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-sm hover:bg-background-default-hover'
+          onClick={() => setShowVariableInspectPanel(true)}
         >
-          <RiStopCircleFill className='h-4 w-4 text-text-accent' />
+          {t('workflow.debug.variableInspect.trigger.normal')}
         </div>
-      </Tooltip>
-      {/* finish button */}
-      <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-sm hover:bg-components-actionbar-bg-accent'
-        onClick={() => setShowVariableInspectPanel(true)}
-      >
-        View cached variables
-      </div>
-      {/* clear button */}
-      <div
-        className='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-sm hover:bg-components-actionbar-bg-accent hover:text-text-accent'
-        // onClick={() => {}}
-      >
-        Clear
-      </div>
+      )}
+      {!isRunning && currentVars.length > 0 && (
+        <>
+          <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-sm hover:bg-components-actionbar-bg-accent'
+            onClick={() => setShowVariableInspectPanel(true)}
+          >
+            {t('workflow.debug.variableInspect.trigger.cached')}
+            </div>
+          <div
+            className='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-sm hover:bg-components-actionbar-bg-accent hover:text-text-accent'
+            onClick={clearCurrentVars}
+          >
+            {t('workflow.debug.variableInspect.trigger.clear')}
+          </div>
+        </>
+      )}
+      {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-sm hover:bg-components-actionbar-bg-accent'
+            onClick={() => setShowVariableInspectPanel(true)}
+          >
+            <RiLoader2Line className='h-4 w-4' />
+            <span className='text-text-accent'>{t('workflow.debug.variableInspect.trigger.running')}</span>
+          </div>
+          <Tooltip
+            popupContent={t('workflow.debug.variableInspect.trigger.stop')}
+          >
+            <div
+              className='flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
+              // onClick={() => {}}
+            >
+              <RiStopCircleFill className='h-4 w-4 text-text-accent' />
+            </div>
+          </Tooltip>
+        </>
+      )}
     </div>
   )
 }
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 179dae24e1..8cbfc41f40 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -914,6 +914,15 @@ const translation = {
       description: 'The results of the last run will be displayed here',
       runThisNode: 'Run this node',
     },
+    variableInspect: {
+      trigger: {
+        normal: 'Variable Inspect',
+        running: 'Caching running status',
+        stop: 'Stop run',
+        cached: 'View cached variables',
+        clear: 'Clear',
+      },
+    },
   },
 }
 
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 4406dc6253..00855f908d 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -915,6 +915,15 @@ const translation = {
       description: '上次运行的结果将显示在这里',
       runThisNode: '运行此节点',
     },
+    variableInspect: {
+      trigger: {
+        normal: '变量检查',
+        running: '缓存中',
+        stop: '停止运行',
+        cached: '查看缓存',
+        clear: '清除',
+      },
+    },
   },
 }