diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts
index 0159ff9c7d..bd1d6e62ae 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts
@@ -16,6 +16,7 @@ import {
 } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import useFLow from '@/service/use-flow'
+import { useInvalidateSandboxFiles } from '@/service/use-sandbox-file'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
@@ -52,6 +53,7 @@ export const useInspectVarsCrudCommon = ({
   const { mutateAsync: doResetConversationVar } = useResetConversationVar(flowId)
   const { mutateAsync: doResetToLastRunValue } = useResetToLastRunValue(flowId)
   const invalidateSysVarValues = useInvalidateSysVarValues(flowId)
+  const invalidateSandboxFiles = useInvalidateSandboxFiles()
 
   const { mutateAsync: doDeleteAllInspectorVars } = useDeleteAllInspectorVars(flowId)
   const { mutate: doDeleteNodeInspectorVars } = useDeleteNodeInspectorVars(flowId)
@@ -221,9 +223,10 @@ export const useInspectVarsCrudCommon = ({
     await doDeleteAllInspectorVars()
     await invalidateConversationVarValues()
     await invalidateSysVarValues()
+    invalidateSandboxFiles()
     deleteAllInspectVars()
     handleEdgeCancelRunningStatus()
-  }, [doDeleteAllInspectorVars, invalidateConversationVarValues, invalidateSysVarValues, workflowStore, handleEdgeCancelRunningStatus])
+  }, [doDeleteAllInspectorVars, invalidateConversationVarValues, invalidateSysVarValues, invalidateSandboxFiles, workflowStore, handleEdgeCancelRunningStatus])
 
   const editInspectVarValue = useCallback(async (nodeId: string, varId: string, value: any) => {
     const { setInspectVarValue } = workflowStore.getState()
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index b14bbef16c..fabce360d3 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import { useSandboxFilesTree } from '@/service/use-sandbox-file'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { useStore } from '../store'
 import ArtifactsTab from './artifacts-tab'
@@ -12,6 +13,7 @@ import VariablesTab from './variables-tab'
 const VariablesPanel: FC<{ onClose: () => void }> = ({ onClose }) => {
   const { t } = useTranslation('workflow')
   const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
+  const appId = useStore(s => s.appId)
   const sandboxEnabled = useFeatures(s => s.features.sandbox?.enabled) ?? false
   const [activeTab, setActiveTab] = useState<InspectTab>(InspectTab.Variables)
 
@@ -26,12 +28,17 @@ const VariablesPanel: FC<{ onClose: () => void }> = ({ onClose }) => {
     return [...environmentVariables, ...conversationVars, ...systemVars, ...nodesWithInspectVars].length === 0
   }, [environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
 
+  const { hasFiles: hasArtifacts } = useSandboxFilesTree(appId, {
+    enabled: !!appId && sandboxEnabled,
+  })
+
   const handleClear = useCallback(() => {
     deleteAllInspectorVars()
     setCurrentFocusNodeId('')
   }, [deleteAllInspectorVars, setCurrentFocusNodeId])
 
-  const headerActions = resolvedTab === InspectTab.Variables && !isVariablesEmpty
+  const hasData = !isVariablesEmpty || hasArtifacts
+  const headerActions = hasData
     ? (
         <Button variant="ghost" size="small" onClick={handleClear}>
           {t('debug.variableInspect.clearAll')}