diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 26d24e8202..834bc0dc09 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -47,6 +47,8 @@ const Group = ({
   const isChatVar = varType === VarInInspectType.conversation
   const isSystem = varType === VarInInspectType.system
 
+  const visibleVarList = isEnv ? varList : varList.filter(v => v.visible)
+
   const handleSelectVar = (varItem: any, type?: string) => {
     if (type === VarInInspectType.environment) {
       handleSelect({
@@ -101,7 +103,7 @@ const Group = ({
         {nodeData?.isSingRunRunning && (
           <RiLoader2Line className='h-3 w-3 animate-spin text-text-accent' />
         )}
-        {(!nodeData || !nodeData.isSingRunRunning) && (
+        {(!nodeData || !nodeData.isSingRunRunning || visibleVarList.length > 0) && (
           <RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} onClick={() => setIsCollapsed(!isCollapsed)} />
         )}
         <div className='flex grow cursor-pointer items-center gap-1' onClick={() => setIsCollapsed(!isCollapsed)}>
@@ -141,7 +143,7 @@ const Group = ({
       {/* var item list */}
       {!isCollapsed && !nodeData?.isSingRunRunning && (
         <div className='px-0.5'>
-          {varList.length > 0 && varList.map(varItem => (
+          {visibleVarList.length > 0 && visibleVarList.map(varItem => (
             <div
               key={varItem.id}
               className={cn(
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index 7c582a416f..87d2eedc0c 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -11,6 +11,8 @@ import Left from './left'
 import Right from './right'
 import ActionButton from '@/app/components/base/action-button'
 import type { VarInInspect } from '@/types/workflow'
+import { VarInInspectType } from '@/types/workflow'
+
 import cn from '@/utils/classnames'
 
 export type currentVarType = {
@@ -27,9 +29,12 @@ const Panel: FC = () => {
   const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
   const [showLeftPanel, setShowLeftPanel] = useState(true)
-  const [currentNodeVar, setCurrentNodeVar] = useState<currentVarType>()
 
   const environmentVariables = useStore(s => s.environmentVariables)
+  const currentFocusNodeId = useStore(s => s.currentFocusNodeId)
+  const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
+  const [currentVarId, setCurrentVarId] = useState('')
+
   const {
     conversationVars,
     systemVars,
@@ -42,15 +47,87 @@ const Panel: FC = () => {
     return allVars.length === 0
   }, [environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
 
+  const currentNodeInfo = useMemo(() => {
+    if (!currentFocusNodeId) return
+    if (currentFocusNodeId === VarInInspectType.environment) {
+      const currentVar = environmentVariables.find(v => v.id === currentVarId)
+      const res = {
+        nodeId: VarInInspectType.environment,
+        title: VarInInspectType.environment,
+        nodeType: VarInInspectType.environment,
+      }
+      if (currentVar) {
+        return {
+          ...res,
+          var: {
+            ...currentVar,
+            type: VarInInspectType.environment,
+            visible: true,
+            ...(currentVar.value_type === 'secret' ? { value: '******************' } : {}),
+          },
+        }
+      }
+      return res
+    }
+    if (currentFocusNodeId === VarInInspectType.conversation) {
+      const currentVar = conversationVars.find(v => v.id === currentVarId)
+      const res = {
+        nodeId: VarInInspectType.conversation,
+        title: VarInInspectType.conversation,
+        nodeType: VarInInspectType.conversation,
+      }
+      if (currentVar) {
+        return {
+          ...res,
+          var: {
+            ...currentVar,
+            type: VarInInspectType.conversation,
+          },
+        }
+      }
+      return res
+    }
+    if (currentFocusNodeId === VarInInspectType.system) {
+      const currentVar = conversationVars.find(v => v.id === currentVarId)
+      const res = {
+        nodeId: VarInInspectType.system,
+        title: VarInInspectType.system,
+        nodeType: VarInInspectType.system,
+      }
+      if (currentVar) {
+        return {
+          ...res,
+          var: {
+            ...currentVar,
+            type: VarInInspectType.system,
+          },
+        }
+      }
+      return res
+    }
+    const targetNode = nodesWithInspectVars.find(node => node.nodeId === currentFocusNodeId)
+    if (!targetNode) return
+    const currentVar = targetNode.vars.find(v => v.id === currentVarId)
+    return {
+      nodeId: targetNode.nodeId,
+      nodeType: targetNode.nodeType,
+      title: targetNode.title,
+      isSingRunRunning: targetNode.isSingRunRunning,
+      isValueFetched: targetNode.isValueFetched,
+      ...(currentVar ? { var: currentVar } : {}),
+    }
+  }, [currentFocusNodeId, currentVarId, environmentVariables, conversationVars, systemVars, nodesWithInspectVars])
+
   const isCurrentNodeVarValueFetching = useMemo(() => {
-    if (!currentNodeVar) return false
-    const targetNode = nodesWithInspectVars.find(node => node.nodeId === currentNodeVar.nodeId)
+    if (!currentNodeInfo) return false
+    const targetNode = nodesWithInspectVars.find(node => node.nodeId === currentNodeInfo.nodeId)
     if (!targetNode) return false
     return !targetNode.isValueFetched
-  }, [currentNodeVar, nodesWithInspectVars])
+  }, [currentNodeInfo, nodesWithInspectVars])
 
   const handleNodeVarSelect = useCallback((node: currentVarType) => {
-    setCurrentNodeVar(node)
+    setCurrentFocusNodeId(node.nodeId)
+    setCurrentVarId(node.var.id)
     const targetNode = nodesWithInspectVars.find(n => n.nodeId === node.nodeId)
     if (targetNode && !targetNode.isValueFetched)
       fetchInspectVarValue([node.nodeId])
@@ -87,7 +164,7 @@ const Panel: FC = () => {
         )}
       >
         <Left
-          currentNodeVar={currentNodeVar}
+          currentNodeVar={currentNodeInfo as currentVarType}
           handleVarSelect={handleNodeVarSelect}
         />
       </div>
@@ -95,7 +172,7 @@ const Panel: FC = () => {
       <div className='w-0 grow'>
         <Right
           isValueFetching={isCurrentNodeVarValueFetching}
-          currentNodeVar={currentNodeVar}
+          currentNodeVar={currentNodeInfo as currentVarType}
           handleOpenMenu={() => setShowLeftPanel(true)}
         />
       </div>
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index 7be20b2b10..a799ac014a 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -388,6 +388,7 @@ export type VarInInspect = {
   value_type: VarType
   value: any
   edited: boolean
+  visible: boolean
 }
 
 export type NodeWithVar = {