diff --git a/web/app/components/workflow/hooks/use-current-vars.ts b/web/app/components/workflow/hooks/use-current-vars.ts
deleted file mode 100644
index eeddb9728b..0000000000
--- a/web/app/components/workflow/hooks/use-current-vars.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useWorkflowStore } from '../store'
-const useCurrentVars = () => {
-  const workflowStore = useWorkflowStore()
-  const {
-    nodesWithInspectVars: currentNodes,
-    getInspectVar: getCurrentVar,
-    setInspectVar: setCurrentVar,
-    clearInspectVars: clearCurrentVars,
-    clearNodeInspectVars: clearCurrentNodeVars,
-    getLastRunVar,
-    getLastRunInfos,
-  } = workflowStore.getState()
-
-  const isVarChanged = (nodeId: string, key: string) => {
-    return getCurrentVar(nodeId, key) !== getLastRunVar(nodeId, key)
-  }
-
-  const resetToLastRunVar = (nodeId: string, key: string) => {
-    const lastRunVar = getLastRunVar(nodeId, key)
-    if (lastRunVar)
-      setCurrentVar(nodeId, key, lastRunVar)
-  }
-
-  return {
-    currentVars: currentNodes,
-    getLastRunInfos,
-    isVarChanged,
-    clearCurrentVars,
-    clearCurrentNodeVars,
-    setCurrentVar,
-    resetToLastRunVar,
-  }
-}
-
-export default useCurrentVars
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
new file mode 100644
index 0000000000..0aaf0a762e
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -0,0 +1,81 @@
+import { useWorkflowStore } from '../store'
+import { BlockEnum, type ValueSelector, type VarType } from '../types'
+const useCurrentVars = () => {
+  const workflowStore = useWorkflowStore()
+  const {
+    conversationVars,
+    nodesWithInspectVars,
+    getInspectVar,
+    setInspectVar,
+    deleteAllInspectVars: deleteAllInspectVarsInStore,
+    deleteNodeInspectVars: deleteNodeInspectVarsInStore,
+    getLastRunVar,
+  } = workflowStore.getState()
+
+  // rag flow don't have start node
+  const startNode = nodesWithInspectVars.find(node => node.nodeType === BlockEnum.Start)
+  const systemVars = startNode?.vars.filter(varItem => varItem.selector[0] === 'sys')
+
+  const fetchInspectVarValue = (selector: ValueSelector) => {
+    const nodeId = selector[0]
+    const isSystemVar = selector[1] === 'sys'
+    const isConversationVar = selector[1] === 'conversation'
+    console.log(nodeId, isSystemVar, isConversationVar)
+    // fetch values under nodeId. system var and conversation var has different fetch method
+  }
+
+  const editInspectVarValue = (varId: string, value: any) => {
+    console.log('edit var', varId, value)
+    // call api and update store
+  }
+
+  const editInspectVarSelector = (varId: string, selector: ValueSelector) => {
+    console.log('edit var selector', varId, selector)
+    // call api and update store
+  }
+
+  const editInspectVarValueType = (varId: string, valueType: VarType) => {
+    console.log('edit var value type', varId, valueType)
+  }
+
+  const deleteInspectVar = async (varId: string) => {
+    console.log('delete var', varId)
+  }
+
+  const deleteNodeInspectorVars = async (nodeId: string) => {
+    // todo fetch api
+    deleteNodeInspectVarsInStore(nodeId)
+  }
+
+  const deleteAllInspectorVars = async () => {
+    // todo fetch api
+    deleteAllInspectVarsInStore()
+  }
+
+  const isInspectVarEdited = (nodeId: string, key: string) => {
+    return getInspectVar(nodeId, key) !== getLastRunVar(nodeId, key)
+  }
+
+  const resetToLastRunVar = (nodeId: string, key: string) => {
+    const lastRunVar = getLastRunVar(nodeId, key)
+    if (lastRunVar)
+      setInspectVar(nodeId, key, lastRunVar)
+  }
+
+  return {
+    conversationVars,
+    systemVars,
+    nodesWithInspectVars,
+    fetchInspectVarValue,
+    editInspectVarValue,
+    editInspectVarSelector,
+    editInspectVarValueType,
+    deleteInspectVar,
+    deleteNodeInspectorVars,
+    deleteAllInspectorVars,
+    isInspectVarEdited,
+    resetToLastRunVar,
+  }
+}
+
+export default useCurrentVars
diff --git a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
index 85a2f1d234..dbc747c375 100644
--- a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
+++ b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
@@ -11,10 +11,10 @@ type InspectVarsState = {
 type InspectVarsActions = {
   setCurrentFocusNodeId: (nodeId: string | null) => void
   setNodesWithInspectVars: (payload: NodeWithVar[]) => void
-  clearInspectVars: () => void
+  deleteAllInspectVars: () => void
   getAllInspectVars: () => NodeWithVar[]
   setNodeInspectVars: (nodeId: string, payload: NodeWithVar) => void
-  clearNodeInspectVars: (nodeId: string) => void
+  deleteNodeInspectVars: (nodeId: string) => void
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
   hasNodeInspectVars: (nodeId: string) => boolean
   setInspectVar: (nodeId: string, name: string, value: any) => void
@@ -41,7 +41,7 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
     getAllInspectVars: () => {
       return get().nodesWithInspectVars
     },
-    clearInspectVars: () => {
+    deleteAllInspectVars: () => {
       set(() => ({
         nodesWithInspectVars: [],
       }))
@@ -62,7 +62,7 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
         }
       })
     },
-    clearNodeInspectVars: (nodeId) => {
+    deleteNodeInspectVars: (nodeId) => {
       set(produce((state: InspectVarsSliceShape) => {
         const nodes = state.nodesWithInspectVars.filter(node => node.nodeId !== nodeId)
         state.nodesWithInspectVars = nodes
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index bbb58e0bbb..635b3b59a9 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -13,7 +13,7 @@ import Button from '@/app/components/base/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import useCurrentVars from '../hooks/use-current-vars'
+import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import cn from '@/utils/classnames'
 
 type Props = {
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index 07f381d941..2ce95044b8 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../store'
 import { BlockEnum } from '../types'
-import useCurrentVars from '../hooks/use-current-vars'
+import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import Empty from './empty'
 import ValueContent from './value-content'
 import ActionButton from '@/app/components/base/action-button'
@@ -65,29 +65,29 @@ const Right = ({ handleOpenMenu }: Props) => {
           </ActionButton>
         )}
         <div className='flex w-0 grow items-center gap-1'>
-        {current && (
-          <>
-            {current.type === 'environment' && (
-              <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />
-            )}
-            {current.type === 'conversation' && (
-              <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-            )}
-            {current.type === 'node' && (
-              <>
-                <BlockIcon
-                  className='shrink-0'
-                  type={BlockEnum.LLM}
-                  size='xs'
-                />
-                <div className='system-sm-regular shrink-0 text-text-secondary'>LLM</div>
-                <div className='system-sm-regular shrink-0 text-text-quaternary'>/</div>
-              </>
-            )}
-            <div title={current.name} className='system-sm-semibold truncate text-text-secondary'>{current.name}</div>
-            <div className='system-xs-medium ml-1 shrink-0 text-text-tertiary'>{current.var_type}</div>
-          </>
-        )}
+          {current && (
+            <>
+              {current.type === 'environment' && (
+                <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />
+              )}
+              {current.type === 'conversation' && (
+                <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
+              )}
+              {current.type === 'node' && (
+                <>
+                  <BlockIcon
+                    className='shrink-0'
+                    type={BlockEnum.LLM}
+                    size='xs'
+                  />
+                  <div className='system-sm-regular shrink-0 text-text-secondary'>LLM</div>
+                  <div className='system-sm-regular shrink-0 text-text-quaternary'>/</div>
+                </>
+              )}
+              <div title={current.name} className='system-sm-semibold truncate text-text-secondary'>{current.name}</div>
+              <div className='system-xs-medium ml-1 shrink-0 text-text-tertiary'>{current.var_type}</div>
+            </>
+          )}
         </div>
         <div className='flex shrink-0 items-center gap-1'>
           {current && (
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index 9a3d3317aa..5c6872d1e1 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -4,7 +4,7 @@ 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 useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
@@ -25,7 +25,7 @@ const VariableInspectTrigger: FC = () => {
   }, [workflowRunningData])
 
   const {
-    currentVars,
+    nodesWithInspectVars: currentVars,
     clearCurrentVars,
   } = useCurrentVars()
 
@@ -51,7 +51,7 @@ const VariableInspectTrigger: FC = () => {
             onClick={() => setShowVariableInspectPanel(true)}
           >
             {t('workflow.debug.variableInspect.trigger.cached')}
-            </div>
+          </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}
@@ -74,7 +74,7 @@ const VariableInspectTrigger: FC = () => {
           >
             <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={() => {}}
+            // onClick={() => {}}
             >
               <RiStopCircleFill className='h-4 w-4 text-text-accent' />
             </div>
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index 5cb4044a9e..b5d84e0704 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -394,4 +394,6 @@ export type NodeWithVar = {
   nodeType: BlockEnum
   title: string
   vars: VarInInspect[]
+  isFetchingValues?: boolean
+  isSingRunRunning: boolean
 }