diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 280a410d4f..48c5721be2 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -18,6 +18,7 @@ import type {
   Edge,
   Node,
 } from './types'
+import { WorkflowRunningStatus } from './types'
 import { WorkflowContextProvider } from './context'
 import {
   useEdgesInteractions,
@@ -93,7 +94,9 @@ const Workflow: FC<WorkflowProps> = memo(({
   const { isValidConnection } = useWorkflow()
 
   useOnViewportChange({
-    onEnd: () => handleSyncWorkflowDraft(),
+    onEnd: () => {
+      handleSyncWorkflowDraft()
+    },
   })
 
   useKeyPress('Backspace', handleEdgeDelete)
@@ -103,7 +106,7 @@ const Workflow: FC<WorkflowProps> = memo(({
       id='workflow-container'
       className={`
         relative w-full min-w-[960px] h-full bg-[#F0F2F7]
-        ${runningStatus && 'workflow-panel-animation'}
+        ${runningStatus === WorkflowRunningStatus.Running && 'workflow-panel-animation'}
         ${nodeAnimation && 'workflow-node-animation'}
       `}
     >
@@ -135,14 +138,14 @@ const Workflow: FC<WorkflowProps> = memo(({
         defaultViewport={viewport}
         multiSelectionKeyCode={null}
         deleteKeyCode={null}
-        panOnDrag={!runningStatus}
         nodesDraggable={!runningStatus}
         nodesConnectable={!runningStatus}
         nodesFocusable={!runningStatus}
         edgesFocusable={!runningStatus}
-        zoomOnPinch={!runningStatus}
-        zoomOnScroll={!runningStatus}
-        zoomOnDoubleClick={!runningStatus}
+        panOnDrag={runningStatus !== WorkflowRunningStatus.Running}
+        zoomOnPinch={runningStatus !== WorkflowRunningStatus.Running}
+        zoomOnScroll={runningStatus !== WorkflowRunningStatus.Running}
+        zoomOnDoubleClick={runningStatus !== WorkflowRunningStatus.Running}
         isValidConnection={isValidConnection}
       >
         <Background
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 0a4f09ae39..67f76aabc8 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -12,6 +12,7 @@ import {
 } from 'reactflow'
 import { useNodesSyncDraft } from '../hooks'
 import { useStore } from '../store'
+import { WorkflowRunningStatus } from '../types'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -63,7 +64,7 @@ const ZoomInOut: FC = () => {
   ]
 
   const handleZoom = (type: string) => {
-    if (runningStatus)
+    if (runningStatus === WorkflowRunningStatus.Running)
       return
     if (type === 'in')
       zoomIn()
@@ -84,7 +85,7 @@ const ZoomInOut: FC = () => {
   }
 
   const handleTrigger = useCallback(() => {
-    if (runningStatus)
+    if (runningStatus === WorkflowRunningStatus.Running)
       return
     setOpen(v => !v)
   }, [runningStatus])
@@ -103,7 +104,7 @@ const ZoomInOut: FC = () => {
         <div className={`
           flex items-center px-2 h-8 cursor-pointer text-[13px] hover:bg-gray-50 rounded-lg
           ${open && 'bg-gray-50'}
-          ${runningStatus && '!cursor-not-allowed opacity-50'}
+          ${runningStatus === WorkflowRunningStatus.Running && '!cursor-not-allowed opacity-50'}
         `}>
           <SearchLg className='mr-1 w-4 h-4' />
           <div className='w-[34px]'>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
diff --git a/web/app/components/workflow/panel/run-history.tsx b/web/app/components/workflow/panel/run-history.tsx
index 71f313694d..fcc3940f24 100644
--- a/web/app/components/workflow/panel/run-history.tsx
+++ b/web/app/components/workflow/panel/run-history.tsx
@@ -6,6 +6,7 @@ import { WorkflowRunningStatus } from '../types'
 import {
   useIsChatMode,
   useWorkflow,
+  useWorkflowRun,
 } from '../hooks'
 import { CheckCircle, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
@@ -22,6 +23,7 @@ const RunHistory = () => {
   const isChatMode = useIsChatMode()
   const { appDetail, setCurrentLogItem, setShowMessageLogModal } = useAppStore()
   const { formatTimeFromNow } = useWorkflow()
+  const { handleBackupDraft } = useWorkflowRun()
   const workflowStore = useWorkflowStore()
   const workflowRunId = useRunHistoryStore(state => state.workflowRunId)
   const { data: runList, isLoading: runListLoading } = useSWR((appDetail && !isChatMode) ? `/apps/${appDetail.id}/workflow-runs` : null, fetchWorkflowRunHistory)
@@ -69,12 +71,15 @@ const RunHistory = () => {
                 'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer',
                 item.id === workflowRunId && 'bg-primary-50',
               )}
-              onClick={() => workflowStore.setState({
-                currentSequenceNumber: item.sequence_number,
-                workflowRunId: item.id,
-                currentConversationID: item.conversation_id,
-                runningStatus: item.status as WorkflowRunningStatus,
-              })}
+              onClick={() => {
+                workflowStore.setState({
+                  currentSequenceNumber: item.sequence_number,
+                  workflowRunId: item.id,
+                  currentConversationID: item.conversation_id,
+                  runningStatus: item.status as WorkflowRunningStatus,
+                })
+                handleBackupDraft()
+              }}
             >
               {
                 !isChatMode && item.status === WorkflowRunningStatus.Failed && (