From c56533bb23474eebeaf75f30be3fdb8e2fcae339 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 5 Nov 2024 11:03:27 -0500
Subject: [PATCH] Workflow Management Reworked (#1406)

* Merge temp userfile

Basic migration

Remove deprecated isFavourite

Rename

nit

nit

Rework open/load

Refactor save

Refactor delete

Remove workflow dep on manager

WIP

Change map to record

Fix directory

nit

isActive

Move

nit

Add unload

Add close workflow

Remove workflowManager.closeWorkflow

nit

Remove workflowManager.storePrompt

move from commandStore

move more from commandStore

nit

Use workflowservice

nit

nit

implement setWorkflow

nit

Remove workflows.ts

Fix strict errors

nit

nit

Resolves circular dep

nit

nit

Fix workflow switching

Add openworkflowPaths

Fix store

Fix key

Serialize by default

Fix proxy

nit

Update path

Proper sync

Fix tabs

WIP

nit

Resolve merge conflict

Fix userfile store tests

Update jest test

Update tabs

patch tests

Fix changeTracker init

Move insert to service

nit

Fix insert

nit

Handle bookmark rename

Refactor tests

Add delete workflow

Add test on deleting workflow

Add closeWorkflow tests

nit

* Fix path

* Move load next/previous

* Move logic from store to service

* nit

* nit

* nit

* nit

* nit

* Add ChangeTracker.initialState

* ChangeTracker load/unload

* Remove app.changeWorkflow

* Hook to app.ts

* Changetracker restore

* nit

* nit

* nit

* Add debug logs

* Remove unnecessary checkState on graphLoad

* nit

* Fix strict

* Fix temp workflow name

* Track ismodified

* Fix reactivity

* nit

* Fix graph equal

* nit

* update test

* nit

* nit

* Fix modified state

* nit

* Fix modified state

* Sidebar force close

* tabs force close

* Fix save

* Add load remote workflow test

* Force save

* Add save test

* nit

* Correctly handle delete last opened workflow

* nit

* Fix workflow rename

* Fix save

* Fix tests

* Fix strict

* Update playwright tests

* Fix filename conflict handling

* nit

* Merge temporary and persisted ref

* Update playwright expectations

* nit

* nit

* Fix saveAs

* Add playwright test

* nit
---
 browser_tests/actionbar.spec.ts               |   4 +-
 browser_tests/browserTabTitle.spec.ts         |  18 +-
 browser_tests/fixtures/components/Topbar.ts   |   8 +
 browser_tests/menu.spec.ts                    |  19 +-
 src/components/BrowserTabTitle.vue            |   4 +-
 src/components/graph/GraphCanvas.vue          |   6 +-
 .../sidebar/tabs/WorkflowsSidebarTab.vue      |  42 +-
 .../tabs/workflows/WorkflowTreeLeaf.vue       |   3 +-
 src/components/topbar/WorkflowTabs.vue        |  38 +-
 src/scripts/app.ts                            | 118 +++--
 src/scripts/changeTracker.ts                  | 154 ++++---
 src/scripts/defaultGraph.ts                   |  13 +
 src/scripts/pnginfo.ts                        |   1 +
 src/scripts/ui/components/asyncDialog.ts      |  10 +-
 src/scripts/utils.ts                          |   2 +-
 src/scripts/workflows.ts                      | 430 ------------------
 src/services/workflowService.ts               | 241 +++++++++-
 src/stores/commandStore.ts                    |  39 +-
 src/stores/executionStore.ts                  |   2 +-
 src/stores/userFileStore.ts                   | 169 +++----
 src/stores/workflowStore.ts                   | 363 +++++++++++++--
 src/stores/workspaceStore.ts                  |   3 +
 src/utils/formatUtil.ts                       |  55 +++
 src/utils/syncUtil.ts                         |  45 ++
 src/views/GraphView.vue                       |  10 -
 .../tests/fast/store/userFileStore.test.ts    |  29 +-
 .../tests/fast/store/workflowStore.test.ts    | 358 +++++++++++++++
 tests-ui/tests/globalSetup.ts                 |   9 +-
 28 files changed, 1409 insertions(+), 784 deletions(-)
 delete mode 100644 src/scripts/workflows.ts
 create mode 100644 src/utils/syncUtil.ts
 create mode 100644 tests-ui/tests/fast/store/workflowStore.test.ts

diff --git a/browser_tests/actionbar.spec.ts b/browser_tests/actionbar.spec.ts
index 96a2d3a72..b85e284f8 100644
--- a/browser_tests/actionbar.spec.ts
+++ b/browser_tests/actionbar.spec.ts
@@ -52,7 +52,9 @@ test.describe('Actionbar', () => {
           (n) => n.type === 'EmptyLatentImage'
         )
         node.widgets[0].value = value
-        window['app'].workflowManager.activeWorkflow.changeTracker.checkState()
+        window[
+          'app'
+        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
       }, value)
     }
 
diff --git a/browser_tests/browserTabTitle.spec.ts b/browser_tests/browserTabTitle.spec.ts
index b5c02812a..43439bbd9 100644
--- a/browser_tests/browserTabTitle.spec.ts
+++ b/browser_tests/browserTabTitle.spec.ts
@@ -9,24 +9,22 @@ test.describe('Browser tab title', () => {
 
     test('Can display workflow name', async ({ comfyPage }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].workflowManager.activeWorkflow.name
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
       })
-      // Note: unsaved workflow name is always prepended with "*".
-      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
     })
 
-    // Broken by https://github.com/Comfy-Org/ComfyUI_frontend/pull/893
-    // Release blocker for v1.3.0
+    // Failing on CI
+    // Cannot reproduce locally
     test.skip('Can display workflow name with unsaved changes', async ({
       comfyPage
     }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].workflowManager.activeWorkflow.name
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
       })
-      // Note: unsaved workflow name is always prepended with "*".
-      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
 
-      await comfyPage.menu.saveWorkflow('test')
+      await comfyPage.menu.topbar.saveWorkflow('test')
       expect(await comfyPage.page.title()).toBe('test - ComfyUI')
 
       const textBox = comfyPage.widgetTextBox
@@ -36,7 +34,7 @@ test.describe('Browser tab title', () => {
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {
-        window['app'].workflowManager.activeWorkflow.delete()
+        return window['app'].extensionManager.workflow.activeWorkflow.delete()
       })
     })
   })
diff --git a/browser_tests/fixtures/components/Topbar.ts b/browser_tests/fixtures/components/Topbar.ts
index fc0692b66..bc64fea1d 100644
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -36,6 +36,14 @@ export class Topbar {
     await this.page.waitForTimeout(300)
   }
 
+  async saveWorkflowAs(workflowName: string) {
+    await this.triggerTopbarCommand(['Workflow', 'Save As'])
+    await this.page.locator('.p-dialog-content input').fill(workflowName)
+    await this.page.keyboard.press('Enter')
+    // Wait for the dialog to close.
+    await this.page.waitForTimeout(300)
+  }
+
   async triggerTopbarCommand(path: string[]) {
     if (path.length < 2) {
       throw new Error('Path is too short')
diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index 5b2f33dfa..adf509238 100644
--- a/browser_tests/menu.spec.ts
+++ b/browser_tests/menu.spec.ts
@@ -392,7 +392,7 @@ test.describe('Menu', () => {
       await tab.newBlankWorkflowButton.click()
       expect(await tab.getOpenedWorkflowNames()).toEqual([
         '*Unsaved Workflow.json',
-        '*Unsaved Workflow (2).json'
+        'Unsaved Workflow (2).json'
       ])
     })
 
@@ -411,6 +411,19 @@ test.describe('Menu', () => {
       )
     })
 
+    test('Can save workflow as', async ({ comfyPage }) => {
+      await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
+      await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
+
+      await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
+    })
+
     test('Does not report warning when switching between opened workflows', async ({
       comfyPage
     }) => {
@@ -441,7 +454,7 @@ test.describe('Menu', () => {
       await closeButton.click()
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      ).toEqual(['*Unsaved Workflow (2).json'])
+      ).toEqual(['Unsaved Workflow.json'])
     })
   })
 
@@ -466,7 +479,7 @@ test.describe('Menu', () => {
       expect(await comfyPage.menu.topbar.getTabNames()).toEqual([workflowName])
       await comfyPage.menu.topbar.closeWorkflowTab(workflowName)
       expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
-        'Unsaved Workflow (2)'
+        'Unsaved Workflow'
       ])
     })
   })
diff --git a/src/components/BrowserTabTitle.vue b/src/components/BrowserTabTitle.vue
index 34cd792a7..33647e2f6 100644
--- a/src/components/BrowserTabTitle.vue
+++ b/src/components/BrowserTabTitle.vue
@@ -26,10 +26,10 @@ const betaMenuEnabled = computed(
 
 const workflowStore = useWorkflowStore()
 const isUnsavedText = computed(() =>
-  workflowStore.activeWorkflow?.unsaved ? ' *' : ''
+  workflowStore.activeWorkflow?.isModified ? ' *' : ''
 )
 const workflowNameText = computed(() => {
-  const workflowName = workflowStore.activeWorkflow?.name
+  const workflowName = workflowStore.activeWorkflow?.filename
   return workflowName
     ? isUnsavedText.value + workflowName + TITLE_SUFFIX
     : DEFAULT_TITLE
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 2e993e329..5465e4410 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -55,6 +55,7 @@ import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import { usePragmaticDroppable } from '@/hooks/dndHooks'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { setStorageValue } from '@/scripts/utils'
+import { ChangeTracker } from '@/scripts/changeTracker'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -147,7 +148,7 @@ const workflowStore = useWorkflowStore()
 watchEffect(() => {
   if (workflowStore.activeWorkflow) {
     const workflow = workflowStore.activeWorkflow
-    setStorageValue('Comfy.PreviousWorkflow', workflow.path ?? workflow.name)
+    setStorageValue('Comfy.PreviousWorkflow', workflow.key)
   }
 })
 
@@ -222,6 +223,9 @@ onMounted(async () => {
   comfyApp.vueAppReady = true
 
   workspaceStore.spinner = true
+  // ChangeTracker needs to be initialized before setup, as it will overwrite
+  // some listeners of litegraph canvas.
+  ChangeTracker.init(comfyApp)
   await comfyApp.setup(canvasRef.value)
   canvasStore.canvas = comfyApp.canvas
   workspaceStore.spinner = false
diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 5c1388689..df8c6e90f 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -43,20 +43,22 @@
           <TextDivider text="Open" type="dashed" class="ml-2" />
           <TreeExplorer
             :roots="renderTreeNode(workflowStore.openWorkflowsTree).children"
-            v-model:selectionKeys="selectionKeys"
+            :selectionKeys="selectionKeys"
           >
             <template #node="{ node }">
               <TreeExplorerTreeNode :node="node">
                 <template #before-label="{ node }">
-                  <span v-if="node.data.unsaved">*</span>
+                  <span v-if="node.data.isModified">*</span>
                 </template>
                 <template #actions="{ node }">
                   <Button
                     icon="pi pi-times"
                     text
-                    severity="secondary"
+                    :severity="
+                      workspaceStore.shiftDown ? 'danger' : 'secondary'
+                    "
                     size="small"
-                    @click.stop="app.workflowManager.closeWorkflow(node.data)"
+                    @click.stop="handleCloseWorkflow(node.data)"
                   />
                 </template>
               </TreeExplorerTreeNode>
@@ -112,16 +114,17 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import Button from 'primevue/button'
 import TextDivider from '@/components/common/TextDivider.vue'
-import { app } from '@/scripts/app'
 import { computed, nextTick, ref } from 'vue'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import type { TreeNode } from 'primevue/treenode'
 import { TreeExplorerNode } from '@/types/treeExplorerTypes'
-import { ComfyWorkflow } from '@/scripts/workflows'
+import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useI18n } from 'vue-i18n'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import { useSettingStore } from '@/stores/settingStore'
+import { workflowService } from '@/services/workflowService'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 const settingStore = useSettingStore()
 const workflowTabsPosition = computed(() =>
@@ -144,7 +147,7 @@ const handleSearch = (query: string) => {
   }
   const lowerQuery = query.toLocaleLowerCase()
   filteredWorkflows.value = workflowStore.workflows.filter((workflow) => {
-    return workflow.name.toLocaleLowerCase().includes(lowerQuery)
+    return workflow.path.toLocaleLowerCase().includes(lowerQuery)
   })
   nextTick(() => {
     expandNode(filteredRoot.value)
@@ -152,12 +155,20 @@ const handleSearch = (query: string) => {
 }
 
 const commandStore = useCommandStore()
-
 const workflowStore = useWorkflowStore()
+const workspaceStore = useWorkspaceStore()
 const { t } = useI18n()
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
+const handleCloseWorkflow = (workflow?: ComfyWorkflow) => {
+  if (workflow) {
+    workflowService.closeWorkflow(workflow, {
+      warnIfUnsaved: !workspaceStore.shiftDown
+    })
+  }
+}
+
 const renderTreeNode = (node: TreeNode): TreeExplorerNode<ComfyWorkflow> => {
   const children = node.children?.map(renderTreeNode)
 
@@ -168,8 +179,7 @@ const renderTreeNode = (node: TreeNode): TreeExplorerNode<ComfyWorkflow> => {
     e: MouseEvent
   ) => {
     if (node.leaf) {
-      const workflow = node.data
-      workflow.load()
+      workflowService.openWorkflow(workflow)
     } else {
       toggleNodeOnEvent(e, node)
     }
@@ -181,14 +191,12 @@ const renderTreeNode = (node: TreeNode): TreeExplorerNode<ComfyWorkflow> => {
           node: TreeExplorerNode<ComfyWorkflow>,
           newName: string
         ) => {
-          const workflow = node.data
-          await workflow.rename(newName)
+          await workflowService.renameWorkflow(workflow, newName)
         },
         handleDelete: workflow.isTemporary
           ? undefined
-          : (node: TreeExplorerNode<ComfyWorkflow>) => {
-              const workflow = node.data
-              workflow.delete()
+          : () => {
+              workflowService.deleteWorkflow(workflow)
             },
         contextMenuItems: (node: TreeExplorerNode<ComfyWorkflow>) => {
           return [
@@ -197,7 +205,7 @@ const renderTreeNode = (node: TreeNode): TreeExplorerNode<ComfyWorkflow> => {
               icon: 'pi pi-file-export',
               command: () => {
                 const workflow = node.data
-                workflow.insert()
+                workflowService.insertWorkflow(workflow)
               }
             }
           ]
@@ -216,6 +224,6 @@ const renderTreeNode = (node: TreeNode): TreeExplorerNode<ComfyWorkflow> => {
 }
 
 const selectionKeys = computed(() => ({
-  [`root/${workflowStore.activeWorkflow?.name}.json`]: true
+  [`root/${workflowStore.activeWorkflow?.key}`]: true
 }))
 </script>
diff --git a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
index ede1faee7..020ffa0bb 100644
--- a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
+++ b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
@@ -15,8 +15,7 @@
 <script setup lang="ts">
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import Button from 'primevue/button'
-import { useWorkflowBookmarkStore } from '@/stores/workflowStore'
-import { ComfyWorkflow } from '@/scripts/workflows'
+import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { computed } from 'vue'
 
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 512d22357..2084bce45 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -11,12 +11,16 @@
     <template #option="{ option }">
       <span
         class="workflow-label text-sm max-w-[150px] truncate inline-block"
-        v-tooltip="option.tooltip"
+        v-tooltip.bottom="option.workflow.key"
       >
-        {{ option.label }}
+        {{ option.workflow.filename }}
       </span>
       <div class="relative">
-        <span class="status-indicator" v-if="option.unsaved">•</span>
+        <span
+          class="status-indicator"
+          v-if="!workspaceStore.shiftDown && option.workflow.isModified"
+          >•</span
+        >
         <Button
           class="close-button p-0 w-auto"
           icon="pi pi-times"
@@ -31,35 +35,31 @@
 </template>
 
 <script setup lang="ts">
-import { app } from '@/scripts/app'
-import { ComfyWorkflow } from '@/scripts/workflows'
+import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import SelectButton from 'primevue/selectbutton'
 import Button from 'primevue/button'
 import { computed } from 'vue'
+import { workflowService } from '@/services/workflowService'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 const props = defineProps<{
   class?: string
 }>()
 
+const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
+
 interface WorkflowOption {
-  label: string
-  tooltip: string
   value: string
-  unsaved: boolean
+  workflow: ComfyWorkflow
 }
 
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
-  label: workflow.name,
-  tooltip: workflow.path,
-  value: workflow.key,
-  unsaved: workflow.unsaved
+  value: workflow.path,
+  workflow
 })
 
-const optionToWorkflow = (option: WorkflowOption): ComfyWorkflow =>
-  workflowStore.workflowLookup[option.value]
-
 const options = computed<WorkflowOption[]>(() =>
   workflowStore.openWorkflows.map(workflowToOption)
 )
@@ -78,13 +78,13 @@ const onWorkflowChange = (option: WorkflowOption) => {
     return
   }
 
-  const workflow = optionToWorkflow(option)
-  workflow.load()
+  workflowService.openWorkflow(option.workflow)
 }
 
 const onCloseWorkflow = (option: WorkflowOption) => {
-  const workflow = optionToWorkflow(option)
-  app.workflowManager.closeWorkflow(workflow)
+  workflowService.closeWorkflow(option.workflow, {
+    warnIfUnsaved: !workspaceStore.shiftDown
+  })
 }
 </script>
 
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index cb89b9e8d..6ec48b2b1 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -25,7 +25,7 @@ import { ComfyNodeDef, StatusWsMessageStatus } from '@/types/apiTypes'
 import { adjustColor, ColorAdjustOptions } from '@/utils/colorUtil'
 import { ComfyAppMenu } from './ui/menu/index'
 import { getStorageValue } from './utils'
-import { ComfyWorkflowManager, ComfyWorkflow } from './workflows'
+import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import {
   LGraphCanvas,
   LGraph,
@@ -58,6 +58,7 @@ import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { shallowReactive } from 'vue'
 import { type IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
+import { workflowService } from '@/services/workflowService'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -141,7 +142,6 @@ export class ComfyApp {
   multiUserServer: boolean
   ctx: CanvasRenderingContext2D
   widgets: Record<string, ComfyWidgetConstructor>
-  workflowManager: ComfyWorkflowManager
   bodyTop: HTMLElement
   bodyLeft: HTMLElement
   bodyRight: HTMLElement
@@ -170,7 +170,6 @@ export class ComfyApp {
     this.vueAppReady = false
     this.ui = new ComfyUI(this)
     this.logging = new ComfyLogging(this)
-    this.workflowManager = new ComfyWorkflowManager(this)
     this.bodyTop = $el('div.comfyui-body-top', { parent: document.body })
     this.bodyLeft = $el('div.comfyui-body-left', { parent: document.body })
     this.bodyRight = $el('div.comfyui-body-right', { parent: document.body })
@@ -1789,7 +1788,7 @@ export class ComfyApp {
     this.resizeCanvas()
 
     await Promise.all([
-      this.workflowManager.loadWorkflows(),
+      useWorkspaceStore().workflow.syncWorkflows(),
       this.ui.settings.load()
     ])
     await this.#loadExtensions()
@@ -2160,21 +2159,6 @@ export class ComfyApp {
     })
   }
 
-  async changeWorkflow(callback, workflow = null) {
-    try {
-      this.workflowManager.activeWorkflow?.changeTracker?.store()
-    } catch (error) {
-      console.error(error)
-    }
-    await callback()
-    try {
-      this.workflowManager.setWorkflow(workflow)
-      this.workflowManager.activeWorkflow?.track()
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
   async loadGraphData(
     graphData?: ComfyWorkflowJSON,
     clean: boolean = true,
@@ -2198,12 +2182,6 @@ export class ComfyApp {
       graphData = structuredClone(graphData)
     }
 
-    try {
-      this.workflowManager.setWorkflow(workflow)
-    } catch (error) {
-      console.error(error)
-    }
-
     if (useSettingStore().get('Comfy.Validation.Workflows')) {
       // TODO: Show validation error in a dialog.
       const validatedGraphData = await validateComfyWorkflow(
@@ -2217,6 +2195,8 @@ export class ComfyApp {
       graphData = validatedGraphData ?? graphData
     }
 
+    workflowService.beforeLoadNewGraph()
+
     const missingNodeTypes: MissingNodeType[] = []
     const missingModels = []
     await this.#invokeExtensionsAsync(
@@ -2270,12 +2250,6 @@ export class ComfyApp {
         this.canvas.ds.offset = graphData.extra.ds.offset
         this.canvas.ds.scale = graphData.extra.ds.scale
       }
-
-      try {
-        this.workflowManager.activeWorkflow?.track()
-      } catch (error) {
-        // TODO: Do we want silently fail here?
-      }
     } catch (error) {
       let errorHint = []
       // Try extracting filename to see if it was caused by an extension script
@@ -2384,6 +2358,8 @@ export class ComfyApp {
       this.#showMissingModelsError(missingModels, paths)
     }
     await this.#invokeExtensionsAsync('afterConfigureGraph', missingNodeTypes)
+    // @ts-expect-error zod types issue. Will be fixed after we enable ts-strict
+    workflowService.afterLoadNewGraph(workflow, this.graph.serialize())
     requestAnimationFrame(() => {
       this.graph.setDirtyCanvas(true, true)
     })
@@ -2602,9 +2578,11 @@ export class ComfyApp {
               this.canvas.draw(true, true)
             } else {
               try {
-                this.workflowManager.storePrompt({
+                useExecutionStore().storePrompt({
                   id: res.prompt_id,
-                  nodes: Object.keys(p.output)
+                  nodes: Object.keys(p.output),
+                  workflow: useWorkspaceStore().workflow
+                    .activeWorkflow as ComfyWorkflow
                 })
               } catch (error) {}
             }
@@ -2678,9 +2656,12 @@ export class ComfyApp {
       } else if (pngInfo?.prompt) {
         this.loadApiJson(JSON.parse(pngInfo.prompt), fileName)
       } else if (pngInfo?.parameters) {
-        this.changeWorkflow(() => {
-          importA1111(this.graph, pngInfo.parameters)
-        }, fileName)
+        // Note: Not putting this in `importA1111` as it is mostly not used
+        // by external callers, and `importA1111` has no access to `app`.
+        workflowService.beforeLoadNewGraph()
+        importA1111(this.graph, pngInfo.parameters)
+        // @ts-expect-error zod type issue on ComfyWorkflowJSON. Should be resolved after enabling ts-strict globally.
+        workflowService.afterLoadNewGraph(fileName, this.serializeGraph())
       } else {
         this.showErrorOnFileLoad(file)
       }
@@ -2764,6 +2745,8 @@ export class ComfyApp {
   }
 
   loadApiJson(apiData, fileName: string) {
+    workflowService.beforeLoadNewGraph()
+
     const missingNodeTypes = Object.values(apiData).filter(
       // @ts-expect-error
       (n) => !LiteGraph.registered_node_types[n.class_type]
@@ -2786,40 +2769,38 @@ export class ComfyApp {
       app.graph.add(node)
     }
 
-    this.changeWorkflow(() => {
-      for (const id of ids) {
-        const data = apiData[id]
-        const node = app.graph.getNodeById(id)
-        for (const input in data.inputs ?? {}) {
-          const value = data.inputs[input]
-          if (value instanceof Array) {
-            const [fromId, fromSlot] = value
-            const fromNode = app.graph.getNodeById(fromId)
-            let toSlot = node.inputs?.findIndex((inp) => inp.name === input)
-            if (toSlot == null || toSlot === -1) {
-              try {
-                // Target has no matching input, most likely a converted widget
-                const widget = node.widgets?.find((w) => w.name === input)
-                // @ts-expect-error
-                if (widget && node.convertWidgetToInput?.(widget)) {
-                  toSlot = node.inputs?.length - 1
-                }
-              } catch (error) {}
-            }
-            if (toSlot != null || toSlot !== -1) {
-              fromNode.connect(fromSlot, node, toSlot)
-            }
-          } else {
-            const widget = node.widgets?.find((w) => w.name === input)
-            if (widget) {
-              widget.value = value
-              widget.callback?.(value)
-            }
+    for (const id of ids) {
+      const data = apiData[id]
+      const node = app.graph.getNodeById(id)
+      for (const input in data.inputs ?? {}) {
+        const value = data.inputs[input]
+        if (value instanceof Array) {
+          const [fromId, fromSlot] = value
+          const fromNode = app.graph.getNodeById(fromId)
+          let toSlot = node.inputs?.findIndex((inp) => inp.name === input)
+          if (toSlot == null || toSlot === -1) {
+            try {
+              // Target has no matching input, most likely a converted widget
+              const widget = node.widgets?.find((w) => w.name === input)
+              // @ts-expect-error
+              if (widget && node.convertWidgetToInput?.(widget)) {
+                toSlot = node.inputs?.length - 1
+              }
+            } catch (error) {}
+          }
+          if (toSlot != null || toSlot !== -1) {
+            fromNode.connect(fromSlot, node, toSlot)
+          }
+        } else {
+          const widget = node.widgets?.find((w) => w.name === input)
+          if (widget) {
+            widget.value = value
+            widget.callback?.(value)
           }
         }
       }
-      app.graph.arrange()
-    }, fileName)
+    }
+    app.graph.arrange()
 
     for (const id of ids) {
       const data = apiData[id]
@@ -2854,6 +2835,9 @@ export class ComfyApp {
     }
 
     app.graph.arrange()
+
+    // @ts-expect-error zod type issue on ComfyWorkflowJSON. Should be resolved after enabling ts-strict globally.
+    workflowService.afterLoadNewGraph(fileName, this.serializeGraph())
   }
 
   /**
diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts
index 18376a125..84acf5c87 100644
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -1,34 +1,62 @@
 import type { ComfyApp } from './app'
 import { api } from './api'
-import { clone } from './utils'
 import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
-import { ComfyWorkflow } from './workflows'
-import type { ComfyWorkflowJSON } from '@/types/comfyWorkflow'
+import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { LGraphNode } from '@comfyorg/litegraph'
-import { ExecutedWsMessage } from '@/types/apiTypes'
+import type { ComfyWorkflowJSON } from '@/types/comfyWorkflow'
+import type { ExecutedWsMessage } from '@/types/apiTypes'
 import { useExecutionStore } from '@/stores/executionStore'
+import _ from 'lodash'
+
+function clone(obj: any) {
+  try {
+    if (typeof structuredClone !== 'undefined') {
+      return structuredClone(obj)
+    }
+  } catch (error) {
+    // structuredClone is stricter than using JSON.parse/stringify so fallback to that
+  }
+
+  return JSON.parse(JSON.stringify(obj))
+}
 
 export class ChangeTracker {
   static MAX_HISTORY = 50
-  #app?: ComfyApp
+  /**
+   * The active state of the workflow.
+   */
+  activeState: ComfyWorkflowJSON
   undoQueue: ComfyWorkflowJSON[] = []
   redoQueue: ComfyWorkflowJSON[] = []
-  activeState: ComfyWorkflowJSON | null = null
-  isOurLoad: boolean = false
   changeCount: number = 0
 
   ds?: { scale: number; offset: [number, number] }
   nodeOutputs?: Record<string, any>
 
+  static app?: ComfyApp
   get app(): ComfyApp {
-    // Global tracker has #app set, while other trackers have workflow bounded
-    return this.#app ?? this.workflow.manager.app
+    return ChangeTracker.app!
   }
 
-  constructor(public workflow: ComfyWorkflow) {}
+  constructor(
+    /**
+     * The workflow that this change tracker is tracking
+     */
+    public workflow: ComfyWorkflow,
+    /**
+     * The initial state of the workflow
+     */
+    public initialState: ComfyWorkflowJSON
+  ) {
+    this.activeState = initialState
+  }
 
-  #setApp(app: ComfyApp) {
-    this.#app = app
+  /**
+   * Save the current state as the initial state.
+   */
+  reset(state?: ComfyWorkflowJSON) {
+    this.activeState = state ?? this.activeState
+    this.initialState = this.activeState
   }
 
   store() {
@@ -48,10 +76,22 @@ export class ChangeTracker {
     }
   }
 
+  updateModified() {
+    // Get the workflow from the store as ChangeTracker is raw object, i.e.
+    // `this.workflow` is not reactive.
+    const workflow = useWorkflowStore().getWorkflowByPath(this.workflow.path)
+    if (workflow) {
+      workflow.isModified = !ChangeTracker.graphEqual(
+        this.initialState,
+        this.activeState
+      )
+    }
+  }
+
   checkState() {
     if (!this.app.graph || this.changeCount) return
-
-    const currentState = this.app.graph.serialize()
+    // @ts-expect-error zod types issue. Will be fixed after we enable ts-strict
+    const currentState = this.app.graph.serialize() as ComfyWorkflowJSON
     if (!this.activeState) {
       this.activeState = clone(currentState)
       return
@@ -63,10 +103,10 @@ export class ChangeTracker {
       }
       this.activeState = clone(currentState)
       this.redoQueue.length = 0
-      this.workflow.unsaved = true
       api.dispatchEvent(
         new CustomEvent('graphChanged', { detail: this.activeState })
       )
+      this.updateModified()
     }
   }
 
@@ -74,12 +114,12 @@ export class ChangeTracker {
     const prevState = source.pop()
     if (prevState) {
       target.push(this.activeState!)
-      this.isOurLoad = true
       await this.app.loadGraphData(prevState, false, false, this.workflow, {
         showMissingModelsDialog: false,
         showMissingNodesDialog: false
       })
       this.activeState = prevState
+      this.updateModified()
     }
   }
 
@@ -114,21 +154,11 @@ export class ChangeTracker {
   }
 
   static init(app: ComfyApp) {
-    const changeTracker = () =>
-      app.workflowManager.activeWorkflow?.changeTracker ?? globalTracker
-    globalTracker.#setApp(app)
+    const getCurrentChangeTracker = () =>
+      useWorkflowStore().activeWorkflow?.changeTracker
+    const checkState = () => getCurrentChangeTracker()?.checkState()
 
-    const loadGraphData = app.loadGraphData
-    app.loadGraphData = async function (...args) {
-      const v = await loadGraphData.apply(this, args)
-      const ct = changeTracker()
-      if (ct.isOurLoad) {
-        ct.isOurLoad = false
-      } else {
-        ct.checkState()
-      }
-      return v
-    }
+    ChangeTracker.app = app
 
     let keyIgnored = false
     window.addEventListener(
@@ -160,12 +190,15 @@ export class ChangeTracker {
             e.key === 'Meta'
           if (keyIgnored) return
 
+          const changeTracker = getCurrentChangeTracker()
+          if (!changeTracker) return
+
           // Check if this is a ctrl+z ctrl+y
-          if (await changeTracker().undoRedo(e)) return
+          if (await changeTracker.undoRedo(e)) return
 
           // If our active element is some type of input then handle changes after they're done
           if (ChangeTracker.bindInput(app, bindInputEl)) return
-          changeTracker().checkState()
+          changeTracker.checkState()
         })
       },
       true
@@ -174,35 +207,35 @@ export class ChangeTracker {
     window.addEventListener('keyup', (e) => {
       if (keyIgnored) {
         keyIgnored = false
-        changeTracker().checkState()
+        checkState()
       }
     })
 
     // Handle clicking DOM elements (e.g. widgets)
     window.addEventListener('mouseup', () => {
-      changeTracker().checkState()
+      checkState()
     })
 
     // Handle prompt queue event for dynamic widget changes
     api.addEventListener('promptQueued', () => {
-      changeTracker().checkState()
+      checkState()
     })
 
     api.addEventListener('graphCleared', () => {
-      changeTracker().checkState()
+      checkState()
     })
 
     // Handle litegraph clicks
     const processMouseUp = LGraphCanvas.prototype.processMouseUp
     LGraphCanvas.prototype.processMouseUp = function (e) {
       const v = processMouseUp.apply(this, [e])
-      changeTracker().checkState()
+      checkState()
       return v
     }
     const processMouseDown = LGraphCanvas.prototype.processMouseDown
     LGraphCanvas.prototype.processMouseDown = function (e) {
       const v = processMouseDown.apply(this, [e])
-      changeTracker().checkState()
+      checkState()
       return v
     }
 
@@ -216,7 +249,7 @@ export class ChangeTracker {
     ) {
       const extendedCallback = (v: any) => {
         callback(v)
-        changeTracker().checkState()
+        checkState()
       }
       return prompt.apply(this, [title, value, extendedCallback, event])
     }
@@ -225,7 +258,7 @@ export class ChangeTracker {
     const close = LiteGraph.ContextMenu.prototype.close
     LiteGraph.ContextMenu.prototype.close = function (e: MouseEvent) {
       const v = close.apply(this, [e])
-      changeTracker().checkState()
+      checkState()
       return v
     }
 
@@ -234,10 +267,7 @@ export class ChangeTracker {
     LiteGraph.LGraph.prototype.onNodeAdded = function (node: LGraphNode) {
       const v = onNodeAdded?.apply(this, [node])
       if (!app?.configuringGraph) {
-        const ct = changeTracker()
-        if (!ct.isOurLoad) {
-          ct.checkState()
-        }
+        checkState()
       }
       return v
     }
@@ -246,9 +276,9 @@ export class ChangeTracker {
     document.addEventListener('litegraph:canvas', (e: Event) => {
       const detail = (e as CustomEvent).detail
       if (detail.subType === 'before-change') {
-        changeTracker().beforeChange()
+        getCurrentChangeTracker()?.beforeChange()
       } else if (detail.subType === 'after-change') {
-        changeTracker().afterChange()
+        getCurrentChangeTracker()?.afterChange()
       }
     })
 
@@ -290,7 +320,7 @@ export class ChangeTracker {
       const htmlElement = activeEl as HTMLElement
       if (`on${evt}` in htmlElement) {
         const listener = () => {
-          app.workflowManager.activeWorkflow?.changeTracker?.checkState()
+          useWorkflowStore().activeWorkflow?.changeTracker?.checkState?.()
           htmlElement.removeEventListener(evt, listener)
         }
         htmlElement.addEventListener(evt, listener)
@@ -300,28 +330,24 @@ export class ChangeTracker {
     return false
   }
 
-  static graphEqual(a: any, b: any, path = '') {
+  static graphEqual(a: ComfyWorkflowJSON, b: ComfyWorkflowJSON) {
     if (a === b) return true
 
     if (typeof a == 'object' && a && typeof b == 'object' && b) {
-      const keys = Object.getOwnPropertyNames(a)
-
-      if (keys.length != Object.getOwnPropertyNames(b).length) {
+      // Compare nodes ignoring order
+      if (
+        !_.isEqualWith(a.nodes, b.nodes, (arrA, arrB) => {
+          if (Array.isArray(arrA) && Array.isArray(arrB)) {
+            return _.isEqual(new Set(arrA), new Set(arrB))
+          }
+        })
+      ) {
         return false
       }
 
-      for (const key of keys) {
-        let av = a[key]
-        let bv = b[key]
-        if (!path && key === 'nodes') {
-          // Nodes need to be sorted as the order changes when selecting nodes
-          av = [...av].sort((a, b) => a.id - b.id)
-          bv = [...bv].sort((a, b) => a.id - b.id)
-        } else if (path === 'extra.ds') {
-          // Ignore view changes
-          continue
-        }
-        if (!ChangeTracker.graphEqual(av, bv, path + (path ? '.' : '') + key)) {
+      // Compare other properties normally
+      for (const key of ['links', 'groups']) {
+        if (!_.isEqual(a[key], b[key])) {
           return false
         }
       }
@@ -332,5 +358,3 @@ export class ChangeTracker {
     return false
   }
 }
-
-export const globalTracker = new ChangeTracker({} as ComfyWorkflow)
diff --git a/src/scripts/defaultGraph.ts b/src/scripts/defaultGraph.ts
index ebf7c5b10..cf92584ee 100644
--- a/src/scripts/defaultGraph.ts
+++ b/src/scripts/defaultGraph.ts
@@ -135,3 +135,16 @@ export const defaultGraph: ComfyWorkflowJSON = {
   extra: {},
   version: 0.4
 }
+
+export const defaultGraphJSON = JSON.stringify(defaultGraph)
+
+export const blankGraph: ComfyWorkflowJSON = {
+  last_node_id: 0,
+  last_link_id: 0,
+  nodes: [],
+  links: [],
+  groups: [],
+  config: {},
+  extra: {},
+  version: 0.4
+}
diff --git a/src/scripts/pnginfo.ts b/src/scripts/pnginfo.ts
index 3473cce2b..3509a39fb 100644
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -3,6 +3,7 @@ import { LiteGraph } from '@comfyorg/litegraph'
 import { api } from './api'
 import { getFromPngFile } from './metadata/png'
 import { getFromFlacFile } from './metadata/flac'
+import { workflowService } from '@/services/workflowService'
 
 // Original functions left in for backwards compatibility
 export function getPngMetadata(file: File): Promise<Record<string, string>> {
diff --git a/src/scripts/ui/components/asyncDialog.ts b/src/scripts/ui/components/asyncDialog.ts
index 8023c492d..6cbc6af84 100644
--- a/src/scripts/ui/components/asyncDialog.ts
+++ b/src/scripts/ui/components/asyncDialog.ts
@@ -52,7 +52,15 @@ export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
     super.close()
   }
 
-  static async prompt({ title = null, message, actions }) {
+  static async prompt({
+    title = null,
+    message,
+    actions
+  }: {
+    title: string | null
+    message: string
+    actions: Array<string | { value?: any; text: string }>
+  }) {
     const dialog = new ComfyAsyncDialog(actions)
     const content = [$el('span', message)]
     if (title) {
diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts
index e3205ce74..39758fdee 100644
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -28,7 +28,7 @@ function formatDate(text: string, date: Date) {
   })
 }
 
-export function clone(obj) {
+export function clone(obj: any) {
   try {
     if (typeof structuredClone !== 'undefined') {
       return structuredClone(obj)
diff --git a/src/scripts/workflows.ts b/src/scripts/workflows.ts
deleted file mode 100644
index 009cb353f..000000000
--- a/src/scripts/workflows.ts
+++ /dev/null
@@ -1,430 +0,0 @@
-// @ts-strict-ignore
-import type { ComfyApp } from './app'
-import { api } from './api'
-import { ChangeTracker } from './changeTracker'
-import { ComfyAsyncDialog } from './ui/components/asyncDialog'
-import { LGraphCanvas, LGraph } from '@comfyorg/litegraph'
-import { appendJsonExt, trimJsonExt } from '@/utils/formatUtil'
-import {
-  useWorkflowStore,
-  useWorkflowBookmarkStore
-} from '@/stores/workflowStore'
-import { useExecutionStore } from '@/stores/executionStore'
-import { markRaw, toRaw } from 'vue'
-import { UserDataFullInfo } from '@/types/apiTypes'
-import { useToastStore } from '@/stores/toastStore'
-import { showPromptDialog } from '@/services/dialogService'
-
-export class ComfyWorkflowManager extends EventTarget {
-  executionStore: ReturnType<typeof useExecutionStore> | null
-  workflowStore: ReturnType<typeof useWorkflowStore> | null
-  workflowBookmarkStore: ReturnType<typeof useWorkflowBookmarkStore> | null
-
-  app: ComfyApp
-  #unsavedCount = 0
-
-  get workflowLookup(): Record<string, ComfyWorkflow> {
-    return this.workflowStore?.workflowLookup ?? {}
-  }
-
-  get workflows(): ComfyWorkflow[] {
-    return this.workflowStore?.workflows ?? []
-  }
-
-  get openWorkflows(): ComfyWorkflow[] {
-    return (this.workflowStore?.openWorkflows ?? []) as ComfyWorkflow[]
-  }
-
-  get _activeWorkflow(): ComfyWorkflow | null {
-    if (!this.app.vueAppReady) return null
-    return this.workflowStore!.activeWorkflow as ComfyWorkflow | null
-  }
-
-  set _activeWorkflow(workflow: ComfyWorkflow | null) {
-    if (!this.app.vueAppReady) return
-    this.workflowStore!.activeWorkflow = workflow ? workflow : null
-  }
-
-  get activeWorkflow(): ComfyWorkflow | null {
-    return this._activeWorkflow ?? this.openWorkflows[0]
-  }
-
-  get activePromptId() {
-    return this.executionStore?.activePromptId
-  }
-
-  get activePrompt() {
-    return this.executionStore?.activePrompt
-  }
-
-  constructor(app: ComfyApp) {
-    super()
-    this.app = app
-    ChangeTracker.init(app)
-  }
-
-  async loadWorkflows() {
-    try {
-      const [files, _] = await Promise.all([
-        api.listUserDataFullInfo('workflows'),
-        this.workflowBookmarkStore?.loadBookmarks()
-      ])
-
-      files.forEach((file: UserDataFullInfo) => {
-        let workflow = this.workflowLookup[file.path]
-        if (!workflow) {
-          workflow = new ComfyWorkflow(this, file.path, file.path.split('/'))
-          this.workflowLookup[workflow.path] = workflow
-        }
-      })
-    } catch (error) {
-      useToastStore().addAlert(
-        'Error loading workflows: ' + (error.message ?? error)
-      )
-    }
-  }
-
-  createTemporary(path?: string): ComfyWorkflow {
-    const workflow = new ComfyWorkflow(
-      this,
-      path ??
-        `Unsaved Workflow${
-          this.#unsavedCount++ ? ` (${this.#unsavedCount})` : ''
-        }`
-    )
-    this.workflowLookup[workflow.key] = workflow
-    return workflow
-  }
-
-  /**
-   * @param {string | ComfyWorkflow | null} workflow
-   */
-  setWorkflow(workflow) {
-    if (workflow && typeof workflow === 'string') {
-      const found = this.workflows.find((w) => w.path === workflow)
-      if (found) {
-        workflow = found
-        workflow.unsaved = !workflow
-      }
-    }
-
-    if (!workflow || typeof workflow === 'string') {
-      workflow = this.createTemporary(workflow)
-    }
-
-    if (!workflow.isOpen) {
-      // Opening a new workflow
-      workflow.track()
-    }
-
-    this._activeWorkflow = workflow
-
-    this.dispatchEvent(new CustomEvent('changeWorkflow'))
-  }
-
-  storePrompt({ nodes, id }) {
-    this.executionStore?.storePrompt({
-      nodes,
-      id,
-      workflow: this.activeWorkflow
-    })
-  }
-
-  async closeWorkflow(workflow: ComfyWorkflow, warnIfUnsaved: boolean = true) {
-    if (!workflow.isOpen) {
-      return true
-    }
-    if (workflow.unsaved && warnIfUnsaved) {
-      const res = await ComfyAsyncDialog.prompt({
-        title: 'Save Changes?',
-        message: `Do you want to save changes to "${workflow.path ?? workflow.name}" before closing?`,
-        actions: ['Yes', 'No', 'Cancel']
-      })
-      if (res === 'Yes') {
-        const active = this.activeWorkflow
-        if (active !== workflow) {
-          // We need to switch to the workflow to save it
-          await workflow.load()
-        }
-
-        if (!(await workflow.save())) {
-          // Save was canceled, restore the previous workflow
-          if (active !== workflow) {
-            await active.load()
-          }
-          return
-        }
-      } else if (res === 'Cancel') {
-        return
-      }
-    }
-    workflow.changeTracker = null
-    workflow.isOpen = false
-    if (this.openWorkflows.length > 0) {
-      this._activeWorkflow = this.openWorkflows[0]
-      await this._activeWorkflow.load()
-    } else {
-      // Load default
-      await this.app.loadGraphData()
-    }
-  }
-}
-
-export class ComfyWorkflow {
-  name: string
-  path: string | null
-  pathParts: string[] | null
-  unsaved = false
-  // Raw
-  manager: ComfyWorkflowManager
-  changeTracker: ChangeTracker | null = null
-  isOpen: boolean = false
-
-  get isTemporary() {
-    return !this.path
-  }
-
-  get isPersisted() {
-    return !this.isTemporary
-  }
-
-  get key() {
-    return this.pathParts?.join('/') ?? this.name + '.json'
-  }
-
-  get isBookmarked() {
-    return this.manager.workflowBookmarkStore?.isBookmarked(this.path) ?? false
-  }
-
-  constructor(
-    manager: ComfyWorkflowManager,
-    path: string,
-    pathParts?: string[]
-  ) {
-    this.manager = markRaw(manager)
-    if (pathParts) {
-      this.updatePath(path, pathParts)
-    } else {
-      this.name = path
-      this.unsaved = true
-    }
-  }
-
-  private updatePath(path: string, pathParts: string[]) {
-    this.path = path
-
-    if (!pathParts) {
-      if (!path.includes('\\')) {
-        pathParts = path.split('/')
-      } else {
-        pathParts = path.split('\\')
-      }
-    }
-
-    this.pathParts = pathParts
-    this.name = trimJsonExt(pathParts[pathParts.length - 1])
-  }
-
-  async getWorkflowData() {
-    const resp = await api.getUserData('workflows/' + this.path)
-    if (resp.status !== 200) {
-      useToastStore().addAlert(
-        `Error loading workflow file '${this.path}': ${resp.status} ${resp.statusText}`
-      )
-      return
-    }
-    return await resp.json()
-  }
-
-  async load() {
-    if (this.isOpen) {
-      await this.manager.app.loadGraphData(
-        this.changeTracker.activeState,
-        true,
-        true,
-        this,
-        {
-          showMissingModelsDialog: false,
-          showMissingNodesDialog: false
-        }
-      )
-    } else {
-      const data = await this.getWorkflowData()
-      if (!data) return
-      await this.manager.app.loadGraphData(data, true, true, this)
-    }
-  }
-
-  async save(saveAs = false) {
-    const createNewFile = !this.path || saveAs
-    return !!(await this._save(
-      createNewFile ? null : this.path,
-      /* overwrite */ !createNewFile
-    ))
-  }
-
-  async favorite(value: boolean) {
-    try {
-      if (this.isBookmarked === value) return
-      this.manager.workflowBookmarkStore?.setBookmarked(this.path, value)
-      this.manager.dispatchEvent(new CustomEvent('favorite', { detail: this }))
-    } catch (error) {
-      useToastStore().addAlert(
-        'Error favoriting workflow ' +
-          this.path +
-          '\n' +
-          (error.message ?? error)
-      )
-    }
-  }
-
-  async rename(path: string) {
-    path = appendJsonExt(path)
-    let resp = await api.moveUserData(
-      'workflows/' + this.path,
-      'workflows/' + path
-    )
-
-    if (resp.status === 409) {
-      if (
-        !confirm(
-          `Workflow '${path}' already exists, do you want to overwrite it?`
-        )
-      )
-        return resp
-      resp = await api.moveUserData(
-        'workflows/' + this.path,
-        'workflows/' + path,
-        { overwrite: true }
-      )
-    }
-
-    if (resp.status !== 200) {
-      useToastStore().addAlert(
-        `Error renaming workflow file '${this.path}': ${resp.status} ${resp.statusText}`
-      )
-      return
-    }
-
-    if (this.isBookmarked) {
-      await this.favorite(false)
-    }
-    path = (await resp.json()).substring('workflows/'.length)
-    this.updatePath(path, null)
-    if (this.isBookmarked) {
-      await this.favorite(true)
-    }
-    this.manager.dispatchEvent(new CustomEvent('rename', { detail: this }))
-  }
-
-  async insert() {
-    const data = await this.getWorkflowData()
-    if (!data) return
-
-    const old = localStorage.getItem('litegrapheditor_clipboard')
-    const graph = new LGraph(data)
-    const canvas = new LGraphCanvas(null, graph, {
-      skip_events: true,
-      skip_render: true
-    })
-    canvas.selectNodes()
-    canvas.copyToClipboard()
-    this.manager.app.canvas.pasteFromClipboard()
-    localStorage.setItem('litegrapheditor_clipboard', old)
-  }
-
-  async delete() {
-    // TODO: fix delete of current workflow - should mark workflow as unsaved and when saving use old name by default
-
-    if (this.isBookmarked) {
-      await this.favorite(false)
-    }
-    const resp = await api.deleteUserData('workflows/' + this.path)
-    if (resp.status !== 204) {
-      useToastStore().addAlert(
-        `Error removing user data file '${this.path}': ${resp.status} ${resp.statusText}`
-      )
-    }
-
-    this.unsaved = true
-    this.path = null
-    this.pathParts = null
-    this.manager.workflows.splice(this.manager.workflows.indexOf(this), 1)
-    this.manager.dispatchEvent(new CustomEvent('delete', { detail: this }))
-  }
-
-  track() {
-    if (this.changeTracker) {
-      this.changeTracker.restore()
-    } else {
-      this.changeTracker = markRaw(new ChangeTracker(this))
-    }
-    this.isOpen = true
-  }
-
-  private async _save(path: string | null, overwrite: boolean) {
-    if (!path) {
-      path = await showPromptDialog({
-        title: 'Save workflow',
-        message: 'Enter the filename:',
-        defaultValue: trimJsonExt(this.path) ?? this.name ?? 'workflow'
-      })
-      if (!path) return
-    }
-
-    path = appendJsonExt(path)
-
-    const workflow = this.manager.app.serializeGraph()
-    const json = JSON.stringify(workflow, null, 2)
-    let resp = await api.storeUserData('workflows/' + path, json, {
-      stringify: false,
-      throwOnError: false,
-      overwrite
-    })
-    if (resp.status === 409) {
-      if (
-        !confirm(
-          `Workflow '${path}' already exists, do you want to overwrite it?`
-        )
-      )
-        return
-      resp = await api.storeUserData('workflows/' + path, json, {
-        stringify: false
-      })
-    }
-
-    if (resp.status !== 200) {
-      useToastStore().addAlert(
-        `Error saving workflow '${this.path}': ${resp.status} ${resp.statusText}`
-      )
-      return
-    }
-
-    path = (await resp.json()).substring('workflows/'.length)
-
-    if (!this.path) {
-      // Saved new workflow, patch this instance
-      const oldKey = this.key
-      this.updatePath(path, null)
-
-      // Update workflowLookup: change the key from the old unsaved path to the new saved path
-      delete this.manager.workflowStore.workflowLookup[oldKey]
-      this.manager.workflowStore.workflowLookup[this.key] = this
-
-      await this.manager.loadWorkflows()
-      this.unsaved = false
-      this.manager.dispatchEvent(new CustomEvent('rename', { detail: this }))
-    } else if (path !== this.path) {
-      // Saved as, open the new copy
-      await this.manager.loadWorkflows()
-      const workflow = this.manager.workflowLookup[path]
-      await workflow.load()
-    } else {
-      // Normal save
-      this.unsaved = false
-      this.manager.dispatchEvent(new CustomEvent('save', { detail: this }))
-    }
-
-    return true
-  }
-}
diff --git a/src/services/workflowService.ts b/src/services/workflowService.ts
index f07b0523a..a412f10bf 100644
--- a/src/services/workflowService.ts
+++ b/src/services/workflowService.ts
@@ -1,8 +1,15 @@
 import { downloadBlob } from '@/scripts/utils'
 import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { ComfyAsyncDialog } from '@/scripts/ui/components/asyncDialog'
+import { useWorkflowStore, ComfyWorkflow } from '@/stores/workflowStore'
 import { showPromptDialog } from './dialogService'
 import { app } from '@/scripts/app'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { LGraphCanvas } from '@comfyorg/litegraph'
+import { toRaw } from 'vue'
+import { ComfyWorkflowJSON } from '@/types/comfyWorkflow'
+import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
+import { appendJsonExt } from '@/utils/formatUtil'
 
 async function getFilename(defaultName: string): Promise<string | null> {
   if (useSettingStore().get('Comfy.PromptFilename')) {
@@ -20,14 +27,20 @@ async function getFilename(defaultName: string): Promise<string | null> {
   return defaultName
 }
 
+// TODO(huchenlei): Auto Error Handling for all methods.
 export const workflowService = {
+  /**
+   * Export the current workflow as a JSON file
+   * @param filename The filename to save the workflow as
+   * @param promptProperty The property of the prompt to export
+   */
   async exportWorkflow(
     filename: string,
     promptProperty: 'workflow' | 'output'
   ): Promise<void> {
     const workflow = useWorkflowStore().activeWorkflow
     if (workflow?.path) {
-      filename = workflow.name
+      filename = workflow.filename
     }
     const p = await app.graphToPrompt()
     const json = JSON.stringify(p[promptProperty], null, 2)
@@ -35,5 +48,229 @@ export const workflowService = {
     const file = await getFilename(filename)
     if (!file) return
     downloadBlob(file, blob)
+  },
+  /**
+   * Save a workflow as a new file
+   * @param workflow The workflow to save
+   */
+  async saveWorkflowAs(workflow: ComfyWorkflow) {
+    const newFilename = await showPromptDialog({
+      title: 'Save workflow',
+      message: 'Enter the filename:',
+      defaultValue: workflow.filename
+    })
+    if (!newFilename) return
+
+    if (workflow.isTemporary) {
+      await this.renameWorkflow(workflow, newFilename)
+      await useWorkflowStore().saveWorkflow(workflow)
+    } else {
+      const tempWorkflow = useWorkflowStore().createTemporary(
+        (workflow.directory + '/' + appendJsonExt(newFilename)).substring(
+          'workflows/'.length
+        ),
+        workflow.activeState as ComfyWorkflowJSON
+      )
+      await this.openWorkflow(tempWorkflow)
+      await useWorkflowStore().saveWorkflow(tempWorkflow)
+    }
+  },
+
+  /**
+   * Save a workflow
+   * @param workflow The workflow to save
+   */
+  async saveWorkflow(workflow: ComfyWorkflow) {
+    if (workflow.isTemporary) {
+      await this.saveWorkflowAs(workflow)
+    } else {
+      await useWorkflowStore().saveWorkflow(workflow)
+    }
+  },
+
+  /**
+   * Load the default workflow
+   */
+  async loadDefaultWorkflow() {
+    await app.loadGraphData(defaultGraph)
+  },
+
+  /**
+   * Load a blank workflow
+   */
+  async loadBlankWorkflow() {
+    await app.loadGraphData(blankGraph)
+  },
+
+  async openWorkflow(workflow: ComfyWorkflow) {
+    if (useWorkflowStore().isActive(workflow)) return
+
+    const loadFromRemote = !workflow.isLoaded
+    if (loadFromRemote) {
+      await workflow.load()
+    }
+
+    await app.loadGraphData(
+      toRaw(workflow.activeState) as ComfyWorkflowJSON,
+      /* clean=*/ true,
+      /* restore_view=*/ true,
+      workflow,
+      {
+        showMissingModelsDialog: loadFromRemote,
+        showMissingNodesDialog: loadFromRemote
+      }
+    )
+  },
+
+  /**
+   * Close a workflow with confirmation if there are unsaved changes
+   * @param workflow The workflow to close
+   * @returns true if the workflow was closed, false if the user cancelled
+   */
+  async closeWorkflow(
+    workflow: ComfyWorkflow,
+    options: { warnIfUnsaved: boolean } = { warnIfUnsaved: true }
+  ): Promise<void> {
+    if (!workflow.isLoaded) {
+      return
+    }
+
+    if (workflow.isModified && options.warnIfUnsaved) {
+      const res = (await ComfyAsyncDialog.prompt({
+        title: 'Save Changes?',
+        message: `Do you want to save changes to "${workflow.path}" before closing?`,
+        actions: ['Yes', 'No', 'Cancel']
+      })) as 'Yes' | 'No' | 'Cancel'
+
+      if (res === 'Yes') {
+        await this.saveWorkflow(workflow)
+      } else if (res === 'Cancel') {
+        return
+      }
+    }
+
+    const workflowStore = useWorkflowStore()
+    // If this is the last workflow, create a new default temporary workflow
+    if (workflowStore.openWorkflows.length === 1) {
+      await this.loadDefaultWorkflow()
+    }
+    // If this is the active workflow, load the next workflow
+    if (workflowStore.isActive(workflow)) {
+      await this.loadNextOpenedWorkflow()
+    }
+
+    await workflowStore.closeWorkflow(workflow)
+  },
+
+  async renameWorkflow(workflow: ComfyWorkflow, newName: string) {
+    await useWorkflowStore().renameWorkflow(workflow, newName)
+  },
+
+  async deleteWorkflow(workflow: ComfyWorkflow) {
+    const workflowStore = useWorkflowStore()
+    if (workflowStore.isOpen(workflow)) {
+      await this.closeWorkflow(workflow)
+    }
+    await workflowStore.deleteWorkflow(workflow)
+  },
+
+  /**
+   * This method is called before loading a new graph.
+   * There are 3 major functions that loads a new graph to the graph editor:
+   * 1. loadGraphData
+   * 2. loadApiJson
+   * 3. importA1111
+   *
+   * This function is used to save the current workflow states before loading
+   * a new graph.
+   */
+  beforeLoadNewGraph() {
+    // Use workspaceStore here as it is patched in jest tests.
+    const workflowStore = useWorkspaceStore().workflow
+    const activeWorkflow = workflowStore.activeWorkflow
+    if (activeWorkflow) {
+      activeWorkflow.changeTracker.store()
+    }
+  },
+
+  /**
+   * Set the active workflow after the new graph is loaded.
+   *
+   * The call relationship is
+   * workflowService.openWorkflow -> app.loadGraphData -> workflowService.afterLoadNewGraph
+   * app.loadApiJson -> workflowService.afterLoadNewGraph
+   * app.importA1111 -> workflowService.afterLoadNewGraph
+   *
+   * @param value The value to set as the active workflow.
+   * @param workflowData The initial workflow data loaded to the graph editor.
+   */
+  async afterLoadNewGraph(
+    value: string | ComfyWorkflow | null,
+    workflowData: ComfyWorkflowJSON
+  ) {
+    // Use workspaceStore here as it is patched in jest tests.
+    const workflowStore = useWorkspaceStore().workflow
+    if (typeof value === 'string') {
+      const workflow = workflowStore.getWorkflowByPath(
+        'workflows/' + appendJsonExt(value)
+      )
+      if (workflow?.isPersisted) {
+        const loadedWorkflow = await workflowStore.openWorkflow(workflow)
+        loadedWorkflow.changeTracker.restore()
+        loadedWorkflow.changeTracker.reset(workflowData)
+        return
+      }
+    }
+
+    if (value === null || typeof value === 'string') {
+      const path = value as string | null
+      const tempWorkflow = workflowStore.createTemporary(
+        path ? appendJsonExt(path) : undefined,
+        workflowData
+      )
+      await workflowStore.openWorkflow(tempWorkflow)
+      return
+    }
+
+    // value is a ComfyWorkflow.
+    const loadedWorkflow = await workflowStore.openWorkflow(value)
+    loadedWorkflow.changeTracker.reset(workflowData)
+    loadedWorkflow.changeTracker.restore()
+  },
+
+  /**
+   * Insert the given workflow into the current graph editor.
+   */
+  async insertWorkflow(workflow: ComfyWorkflow) {
+    const loadedWorkflow = await workflow.load()
+    const data = loadedWorkflow.initialState
+    const old = localStorage.getItem('litegrapheditor_clipboard')
+    // @ts-expect-error: zod issue. Should be fixed after enable ts-strict globally
+    const graph = new LGraph(data)
+    const canvasElement = document.createElement('canvas')
+    const canvas = new LGraphCanvas(canvasElement, graph, {
+      skip_events: true,
+      skip_render: true
+    })
+    canvas.selectNodes()
+    canvas.copyToClipboard()
+    app.canvas.pasteFromClipboard()
+    if (old !== null) {
+      localStorage.setItem('litegrapheditor_clipboard', old)
+    }
+  },
+
+  async loadNextOpenedWorkflow() {
+    const nextWorkflow = useWorkflowStore().openedWorkflowIndexShift(1)
+    if (nextWorkflow) {
+      await this.openWorkflow(nextWorkflow)
+    }
+  },
+
+  async loadPreviousOpenedWorkflow() {
+    const previousWorkflow = useWorkflowStore().openedWorkflowIndexShift(-1)
+    if (previousWorkflow) {
+      await this.openWorkflow(previousWorkflow)
+    }
   }
 }
diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts
index 404ce36c4..860a67520 100644
--- a/src/stores/commandStore.ts
+++ b/src/stores/commandStore.ts
@@ -2,7 +2,6 @@ import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
-import { globalTracker } from '@/scripts/changeTracker'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import {
@@ -15,7 +14,7 @@ import { ComfyExtension } from '@/types/comfy'
 import { LGraphGroup } from '@comfyorg/litegraph'
 import { useTitleEditorStore } from './graphStore'
 import { useErrorHandling } from '@/hooks/errorHooks'
-import { useWorkflowStore } from './workflowStore'
+import { ComfyWorkflow, useWorkflowStore } from './workflowStore'
 import { type KeybindingImpl, useKeybindingStore } from './keybindingStore'
 import { useBottomPanelStore } from './workspace/bottomPanelStore'
 import { LGraphNode } from '@comfyorg/litegraph'
@@ -76,8 +75,7 @@ export class ComfyCommandImpl implements ComfyCommand {
   }
 }
 
-const getTracker = () =>
-  app.workflowManager.activeWorkflow?.changeTracker ?? globalTracker
+const getTracker = () => useWorkflowStore()?.activeWorkflow?.changeTracker
 
 const getSelectedNodes = (): LGraphNode[] => {
   const selectedNodes = app.canvas.selected_nodes
@@ -120,12 +118,7 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-plus',
       label: 'New Blank Workflow',
       menubarLabel: 'New',
-      function: () => {
-        app.workflowManager.setWorkflow(null)
-        app.clean()
-        app.graph.clear()
-        app.workflowManager.activeWorkflow?.track()
-      }
+      function: () => workflowService.loadBlankWorkflow()
     },
     {
       id: 'Comfy.OpenWorkflow',
@@ -140,17 +133,18 @@ export const useCommandStore = defineStore('command', () => {
       id: 'Comfy.LoadDefaultWorkflow',
       icon: 'pi pi-code',
       label: 'Load Default Workflow',
-      function: async () => {
-        await app.loadGraphData()
-      }
+      function: () => workflowService.loadDefaultWorkflow()
     },
     {
       id: 'Comfy.SaveWorkflow',
       icon: 'pi pi-save',
       label: 'Save Workflow',
       menubarLabel: 'Save',
-      function: () => {
-        app.workflowManager.activeWorkflow?.save()
+      function: async () => {
+        const workflow = useWorkflowStore().activeWorkflow as ComfyWorkflow
+        if (!workflow) return
+
+        await workflowService.saveWorkflow(workflow)
       }
     },
     {
@@ -158,8 +152,11 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-save',
       label: 'Save Workflow As',
       menubarLabel: 'Save As',
-      function: () => {
-        app.workflowManager.activeWorkflow?.save(true)
+      function: async () => {
+        const workflow = useWorkflowStore().activeWorkflow as ComfyWorkflow
+        if (!workflow) return
+
+        await workflowService.saveWorkflowAs(workflow)
       }
     },
     {
@@ -185,7 +182,7 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-undo',
       label: 'Undo',
       function: async () => {
-        await getTracker().undo()
+        await getTracker()?.undo?.()
       }
     },
     {
@@ -193,7 +190,7 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-refresh',
       label: 'Redo',
       function: async () => {
-        await getTracker().redo()
+        await getTracker()?.redo?.()
       }
     },
     {
@@ -387,7 +384,7 @@ export const useCommandStore = defineStore('command', () => {
       label: 'Next Opened Workflow',
       versionAdded: '1.3.9',
       function: () => {
-        useWorkflowStore().loadNextOpenedWorkflow()
+        workflowService.loadNextOpenedWorkflow()
       }
     },
     {
@@ -396,7 +393,7 @@ export const useCommandStore = defineStore('command', () => {
       label: 'Previous Opened Workflow',
       versionAdded: '1.3.9',
       function: () => {
-        useWorkflowStore().loadPreviousOpenedWorkflow()
+        workflowService.loadPreviousOpenedWorkflow()
       }
     },
     {
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 38fcf8072..0fdae8fe7 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { api } from '@/scripts/api'
-import { ComfyWorkflow } from '@/scripts/workflows'
+import { ComfyWorkflow } from './workflowStore'
 import type { ComfyNode, ComfyWorkflowJSON } from '@/types/comfyWorkflow'
 import type {
   ExecutedWsMessage,
diff --git a/src/stores/userFileStore.ts b/src/stores/userFileStore.ts
index 5f66f7a5b..d73e07cf3 100644
--- a/src/stores/userFileStore.ts
+++ b/src/stores/userFileStore.ts
@@ -4,6 +4,8 @@ import { buildTree } from '@/utils/treeUtil'
 import { computed, ref } from 'vue'
 import { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { UserDataFullInfo } from '@/types/apiTypes'
+import { syncEntities } from '@/utils/syncUtil'
+import { getPathDetails } from '@/utils/formatUtil'
 
 /**
  * Represents a file in the user's data directory.
@@ -37,25 +39,60 @@ export class UserFile {
      */
     public lastModified: number,
     /**
-     * File size in bytes.
+     * File size in bytes. -1 for temporary files.
      */
     public size: number
   ) {
-    this.directory = path.split('/').slice(0, -1).join('/')
-    this.fullFilename = path.split('/').pop() ?? path
-    this.filename = this.fullFilename.split('.').slice(0, -1).join('.')
-    this.suffix = this.fullFilename.split('.').pop() ?? null
+    const details = getPathDetails(path)
+    this.path = path
+    this.directory = details.directory
+    this.fullFilename = details.fullFilename
+    this.filename = details.filename
+    this.suffix = details.suffix
   }
 
-  get isOpen() {
-    return !!this.content
+  updatePath(newPath: string) {
+    const details = getPathDetails(newPath)
+    this.path = newPath
+    this.directory = details.directory
+    this.fullFilename = details.fullFilename
+    this.filename = details.filename
+    this.suffix = details.suffix
+  }
+
+  static createTemporary(path: string): UserFile {
+    return new UserFile(path, Date.now(), -1)
+  }
+
+  get isTemporary() {
+    return this.size === 0
+  }
+
+  get isPersisted() {
+    return !this.isTemporary
+  }
+
+  get key(): string {
+    return this.path
+  }
+
+  get isLoaded() {
+    return this.content !== null
   }
 
   get isModified() {
     return this.content !== this.originalContent
   }
 
-  async load(): Promise<UserFile> {
+  /**
+   * Loads the file content from the remote storage.
+   */
+  async load({
+    force = false
+  }: { force?: boolean } = {}): Promise<LoadedUserFile> {
+    if (this.isTemporary || (!force && this.isLoaded))
+      return this as LoadedUserFile
+
     this.isLoading = true
     const resp = await api.getUserData(this.path)
     if (resp.status !== 200) {
@@ -66,19 +103,34 @@ export class UserFile {
     this.content = await resp.text()
     this.originalContent = this.content
     this.isLoading = false
-    return this
+    return this as LoadedUserFile
+  }
+
+  /**
+   * Unloads the file content from memory
+   */
+  unload(): void {
+    this.content = null
+    this.originalContent = null
+    this.isLoading = false
   }
 
   async saveAs(newPath: string): Promise<UserFile> {
-    const tempFile = new TempUserFile(newPath, this.content ?? undefined)
+    const tempFile = this.isTemporary ? this : UserFile.createTemporary(newPath)
+    tempFile.content = this.content
     await tempFile.save()
     return tempFile
   }
 
-  async save(): Promise<UserFile> {
-    if (!this.isModified) return this
+  /**
+   * Saves the file to the remote storage.
+   * @param force Whether to force the save even if the file is not modified.
+   */
+  async save({ force = false }: { force?: boolean } = {}): Promise<UserFile> {
+    if (this.isPersisted && !this.isModified && !force) return this
 
     const resp = await api.storeUserData(this.path, this.content, {
+      overwrite: this.isPersisted,
       throwOnError: true,
       full_info: true
     })
@@ -95,6 +147,8 @@ export class UserFile {
   }
 
   async delete(): Promise<void> {
+    if (this.isTemporary) return
+
     const resp = await api.deleteUserData(this.path)
     if (resp.status !== 204) {
       throw new Error(
@@ -104,13 +158,18 @@ export class UserFile {
   }
 
   async rename(newPath: string): Promise<UserFile> {
+    if (this.isTemporary) {
+      this.updatePath(newPath)
+      return this
+    }
+
     const resp = await api.moveUserData(this.path, newPath)
     if (resp.status !== 200) {
       throw new Error(
         `Failed to rename file '${this.path}': ${resp.status} ${resp.statusText}`
       )
     }
-    this.path = newPath
+    this.updatePath(newPath)
     // Note: Backend supports full_info=true feature after
     // https://github.com/comfyanonymous/ComfyUI/pull/5446
     const updatedFile = (await resp.json()) as string | UserDataFullInfo
@@ -122,56 +181,21 @@ export class UserFile {
   }
 }
 
-export class TempUserFile extends UserFile {
-  constructor(path: string, content: string = '') {
-    // Initialize with current timestamp and 0 size since it's temporary
-    super(path, Date.now(), 0)
-    this.content = content
-    this.originalContent = content
-  }
-
-  // Override methods that interact with backend
-  async load(): Promise<TempUserFile> {
-    // No need to load as it's a temporary file
-    return this
-  }
-
-  async save(): Promise<TempUserFile> {
-    // First save should create the actual file on the backend
-    const resp = await api.storeUserData(this.path, this.content, {
-      throwOnError: true,
-      full_info: true
-    })
-
-    const updatedFile = (await resp.json()) as string | UserDataFullInfo
-    if (typeof updatedFile === 'object') {
-      this.lastModified = updatedFile.modified
-      this.size = updatedFile.size
-    }
-    this.originalContent = this.content
-    return this
-  }
-
-  async delete(): Promise<void> {
-    // No need to delete from backend as it doesn't exist there
-  }
-
-  async rename(newPath: string): Promise<TempUserFile> {
-    // Just update the path locally since it's not on backend yet
-    this.path = newPath
-    return this
-  }
+export interface LoadedUserFile extends UserFile {
+  isLoaded: true
+  originalContent: string
+  content: string
 }
 
 export const useUserFileStore = defineStore('userFile', () => {
-  const userFilesByPath = ref(new Map<string, UserFile>())
+  const userFilesByPath = ref<Record<string, UserFile>>({})
 
-  const userFiles = computed(() => Array.from(userFilesByPath.value.values()))
+  const userFiles = computed(() => Object.values(userFilesByPath.value))
   const modifiedFiles = computed(() =>
     userFiles.value.filter((file: UserFile) => file.isModified)
   )
-  const openedFiles = computed(() =>
-    userFiles.value.filter((file: UserFile) => file.isOpen)
+  const loadedFiles = computed(() =>
+    userFiles.value.filter((file: UserFile) => file.isLoaded)
   )
 
   const fileTree = computed<TreeExplorerNode<UserFile>>(
@@ -186,39 +210,22 @@ export const useUserFileStore = defineStore('userFile', () => {
    * @param dir The directory to sync.
    */
   const syncFiles = async (dir: string = '') => {
-    const files = await api.listUserDataFullInfo(dir)
-
-    for (const file of files) {
-      const existingFile = userFilesByPath.value.get(file.path)
-
-      if (!existingFile) {
-        // New file, add it to the map
-        userFilesByPath.value.set(
-          file.path,
-          new UserFile(file.path, file.modified, file.size)
-        )
-      } else if (existingFile.lastModified !== file.modified) {
-        // File has been modified, update its properties
+    await syncEntities(
+      dir,
+      userFilesByPath.value,
+      (file) => new UserFile(file.path, file.modified, file.size),
+      (existingFile, file) => {
         existingFile.lastModified = file.modified
         existingFile.size = file.size
-        existingFile.originalContent = null
-        existingFile.content = null
-        existingFile.isLoading = false
+        existingFile.unload()
       }
-    }
-
-    // Remove files that no longer exist
-    for (const [path, _] of userFilesByPath.value) {
-      if (!files.some((file) => file.path === path)) {
-        userFilesByPath.value.delete(path)
-      }
-    }
+    )
   }
 
   return {
     userFiles,
     modifiedFiles,
-    openedFiles,
+    loadedFiles,
     fileTree,
     syncFiles
   }
diff --git a/src/stores/workflowStore.ts b/src/stores/workflowStore.ts
index 4431c513c..f36bd09e7 100644
--- a/src/stores/workflowStore.ts
+++ b/src/stores/workflowStore.ts
@@ -1,24 +1,292 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-import { ComfyWorkflow } from '@/scripts/workflows'
+import { computed, markRaw, ref } from 'vue'
 import { buildTree } from '@/utils/treeUtil'
 import { api } from '@/scripts/api'
+import { UserFile } from './userFileStore'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { ComfyWorkflowJSON } from '@/types/comfyWorkflow'
+import { appendJsonExt, getPathDetails } from '@/utils/formatUtil'
+import { defaultGraphJSON } from '@/scripts/defaultGraph'
+import { syncEntities } from '@/utils/syncUtil'
+
+export class ComfyWorkflow extends UserFile {
+  /**
+   * The change tracker for the workflow. Non-reactive raw object.
+   */
+  changeTracker: ChangeTracker | null = null
+  /**
+   * Whether the workflow has been modified comparing to the initial state.
+   */
+  private _isModified: boolean = false
+
+  /**
+   * @param options The path, modified, and size of the workflow.
+   * Note: path is the full path, including the 'workflows/' prefix.
+   */
+  constructor(options: { path: string; modified: number; size: number }) {
+    super(options.path, options.modified, options.size)
+  }
+
+  get key() {
+    return this.path.substring('workflows/'.length)
+  }
+
+  get activeState(): ComfyWorkflowJSON | null {
+    return this.changeTracker?.activeState ?? null
+  }
+
+  get initialState(): ComfyWorkflowJSON | null {
+    return this.changeTracker?.initialState ?? null
+  }
+
+  get isLoaded(): boolean {
+    return this.changeTracker !== null
+  }
+
+  get isModified(): boolean {
+    return this._isModified
+  }
+
+  set isModified(value: boolean) {
+    this._isModified = value
+  }
+
+  /**
+   * Load the workflow content from remote storage. Directly returns the loaded
+   * workflow if the content is already loaded.
+   *
+   * @param force Whether to force loading the content even if it is already loaded.
+   * @returns this
+   */
+  async load({
+    force = false
+  }: { force?: boolean } = {}): Promise<LoadedComfyWorkflow> {
+    await super.load({ force })
+    if (!force && this.isLoaded) return this as LoadedComfyWorkflow
+
+    if (!this.originalContent) {
+      throw new Error('[ASSERT] Workflow content should be loaded')
+    }
+
+    // Note: originalContent is populated by super.load()
+    console.debug('load and start tracking of workflow', this.path)
+    this.changeTracker = markRaw(
+      new ChangeTracker(
+        this,
+        /* initialState= */ JSON.parse(this.originalContent)
+      )
+    )
+    return this as LoadedComfyWorkflow
+  }
+
+  unload(): void {
+    console.debug('unload workflow', this.path)
+    this.changeTracker = null
+    super.unload()
+  }
+
+  async save() {
+    this.content = JSON.stringify(this.activeState)
+    // Force save to ensure the content is updated in remote storage incase
+    // the isModified state is screwed by changeTracker.
+    const ret = await super.save({ force: true })
+    this.changeTracker?.reset()
+    this.isModified = false
+    return ret
+  }
+
+  /**
+   * Save the workflow as a new file.
+   * @param path The path to save the workflow to. Note: with 'workflows/' prefix.
+   * @returns this
+   */
+  async saveAs(path: string) {
+    this.content = JSON.stringify(this.activeState)
+    return await super.saveAs(path)
+  }
+
+  async rename(newName: string) {
+    const newPath = this.directory + '/' + appendJsonExt(newName)
+    await super.rename(newPath)
+    return this
+  }
+}
+
+export interface LoadedComfyWorkflow extends ComfyWorkflow {
+  isLoaded: true
+  originalContent: string
+  content: string
+  changeTracker: ChangeTracker
+  initialState: ComfyWorkflowJSON
+  activeState: ComfyWorkflowJSON
+}
 
 export const useWorkflowStore = defineStore('workflow', () => {
-  const activeWorkflow = ref<ComfyWorkflow | null>(null)
+  /**
+   * Detach the workflow from the store. lightweight helper function.
+   * @param workflow The workflow to detach.
+   * @returns The index of the workflow in the openWorkflowPaths array, or -1 if the workflow was not open.
+   */
+  const detachWorkflow = (workflow: ComfyWorkflow) => {
+    delete workflowLookup.value[workflow.path]
+    const index = openWorkflowPaths.value.indexOf(workflow.path)
+    if (index !== -1) {
+      openWorkflowPaths.value = openWorkflowPaths.value.filter(
+        (path) => path !== workflow.path
+      )
+    }
+    return index
+  }
+
+  /**
+   * Attach the workflow to the store. lightweight helper function.
+   * @param workflow The workflow to attach.
+   * @param openIndex The index to open the workflow at.
+   */
+  const attachWorkflow = (workflow: ComfyWorkflow, openIndex: number = -1) => {
+    workflowLookup.value[workflow.path] = workflow
+
+    if (openIndex !== -1) {
+      openWorkflowPaths.value.splice(openIndex, 0, workflow.path)
+    }
+  }
+
+  /**
+   * The active workflow currently being edited.
+   */
+  const activeWorkflow = ref<LoadedComfyWorkflow | null>(null)
+  const isActive = (workflow: ComfyWorkflow) =>
+    activeWorkflow.value?.path === workflow.path
+  /**
+   * All workflows.
+   */
   const workflowLookup = ref<Record<string, ComfyWorkflow>>({})
-  const workflows = computed(() => Object.values(workflowLookup.value))
-  const persistedWorkflows = computed(() =>
-    workflows.value.filter((workflow) => workflow.isPersisted)
+  const workflows = computed<ComfyWorkflow[]>(() =>
+    Object.values(workflowLookup.value)
   )
+  const getWorkflowByPath = (path: string): ComfyWorkflow | null =>
+    workflowLookup.value[path] ?? null
+
+  /**
+   * The paths of the open workflows. It is setup as a ref to allow user
+   * to reorder the workflows opened.
+   */
+  const openWorkflowPaths = ref<string[]>([])
+  const openWorkflowPathSet = computed(() => new Set(openWorkflowPaths.value))
   const openWorkflows = computed(() =>
-    workflows.value.filter((workflow) => workflow.isOpen)
+    openWorkflowPaths.value.map((path) => workflowLookup.value[path])
   )
+  const isOpen = (workflow: ComfyWorkflow) =>
+    openWorkflowPathSet.value.has(workflow.path)
+
+  /**
+   * Set the workflow as the active workflow.
+   * @param workflow The workflow to open.
+   */
+  const openWorkflow = async (
+    workflow: ComfyWorkflow
+  ): Promise<LoadedComfyWorkflow> => {
+    if (isActive(workflow)) return workflow as LoadedComfyWorkflow
+
+    if (!openWorkflowPaths.value.includes(workflow.path)) {
+      openWorkflowPaths.value.push(workflow.path)
+    }
+    const loadedWorkflow = await workflow.load()
+    activeWorkflow.value = loadedWorkflow
+    console.debug('[workflowStore] open workflow', workflow.path)
+    return loadedWorkflow
+  }
+
+  const getUnconflictedPath = (basePath: string): string => {
+    const { directory, filename, suffix } = getPathDetails(basePath)
+    let counter = 2
+    let newPath = basePath
+    while (workflowLookup.value[newPath]) {
+      newPath = `${directory}/${filename} (${counter}).${suffix}`
+      counter++
+    }
+    return newPath
+  }
+
+  const createTemporary = (path?: string, workflowData?: ComfyWorkflowJSON) => {
+    const fullPath = getUnconflictedPath(
+      'workflows/' + (path ?? 'Unsaved Workflow.json')
+    )
+    const workflow = new ComfyWorkflow({
+      path: fullPath,
+      modified: Date.now(),
+      size: 0
+    })
+
+    workflow.originalContent = workflow.content = workflowData
+      ? JSON.stringify(workflowData)
+      : defaultGraphJSON
+
+    workflowLookup.value[workflow.path] = workflow
+    return workflow
+  }
+
+  const closeWorkflow = async (workflow: ComfyWorkflow) => {
+    openWorkflowPaths.value = openWorkflowPaths.value.filter(
+      (path) => path !== workflow.path
+    )
+    if (workflow.isTemporary) {
+      delete workflowLookup.value[workflow.path]
+    } else {
+      workflow.unload()
+    }
+    console.debug('[workflowStore] close workflow', workflow.path)
+  }
+
+  /**
+   * Get the workflow at the given index shift from the active workflow.
+   * @param shift The shift to the next workflow. Positive for next, negative for previous.
+   * @returns The next workflow or null if the shift is out of bounds.
+   */
+  const openedWorkflowIndexShift = (shift: number): ComfyWorkflow | null => {
+    const index = openWorkflowPaths.value.indexOf(
+      activeWorkflow.value?.path ?? ''
+    )
+
+    if (index !== -1) {
+      const length = openWorkflows.value.length
+      const nextIndex = (index + shift + length) % length
+      const nextWorkflow = openWorkflows.value[nextIndex]
+      return nextWorkflow ?? null
+    }
+    return null
+  }
+
+  const persistedWorkflows = computed(() =>
+    Array.from(workflows.value).filter((workflow) => workflow.isPersisted)
+  )
+  const syncWorkflows = async (dir: string = '') => {
+    await syncEntities(
+      dir ? 'workflows/' + dir : 'workflows',
+      workflowLookup.value,
+      (file) =>
+        new ComfyWorkflow({
+          path: file.path,
+          modified: file.modified,
+          size: file.size
+        }),
+      (existingWorkflow, file) => {
+        existingWorkflow.lastModified = file.modified
+        existingWorkflow.size = file.size
+        existingWorkflow.unload()
+      },
+      /* exclude */ (workflow) => workflow.isTemporary
+    )
+  }
+
+  const bookmarkStore = useWorkflowBookmarkStore()
   const bookmarkedWorkflows = computed(() =>
-    workflows.value.filter((workflow) => workflow.isBookmarked)
+    workflows.value.filter((workflow) =>
+      bookmarkStore.isBookmarked(workflow.path)
+    )
   )
   const modifiedWorkflows = computed(() =>
-    workflows.value.filter((workflow) => workflow.unsaved)
+    workflows.value.filter((workflow) => workflow.isModified)
   )
 
   const buildWorkflowTree = (workflows: ComfyWorkflow[]) => {
@@ -31,50 +299,78 @@ export const useWorkflowStore = defineStore('workflow', () => {
   )
   // Bookmarked workflows tree is flat.
   const bookmarkedWorkflowsTree = computed(() =>
-    buildTree(bookmarkedWorkflows.value, (workflow: ComfyWorkflow) => [
-      workflow.path ?? 'temporary_workflow'
-    ])
+    buildTree(bookmarkedWorkflows.value, (workflow) => [workflow.key])
   )
   // Open workflows tree is flat.
   const openWorkflowsTree = computed(() =>
-    buildTree(openWorkflows.value, (workflow: ComfyWorkflow) => [workflow.key])
+    buildTree(openWorkflows.value, (workflow) => [workflow.key])
   )
 
-  const loadOpenedWorkflowIndexShift = async (shift: number) => {
-    const index = openWorkflows.value.indexOf(
-      activeWorkflow.value as ComfyWorkflow
-    )
-    if (index !== -1) {
-      const length = openWorkflows.value.length
-      const nextIndex = (index + shift + length) % length
-      const nextWorkflow = openWorkflows.value[nextIndex]
-      if (nextWorkflow) {
-        await nextWorkflow.load()
-      }
+  const renameWorkflow = async (workflow: ComfyWorkflow, newName: string) => {
+    // Capture all needed values upfront
+    const oldPath = workflow.path
+    const newPath = workflow.directory + '/' + appendJsonExt(newName)
+    const wasBookmarked = bookmarkStore.isBookmarked(oldPath)
+
+    const openIndex = detachWorkflow(workflow)
+    // Perform the actual rename operation first
+    try {
+      await workflow.rename(newName)
+    } finally {
+      attachWorkflow(workflow, openIndex)
+    }
+
+    // Update bookmarks
+    if (wasBookmarked) {
+      bookmarkStore.setBookmarked(oldPath, false)
+      bookmarkStore.setBookmarked(newPath, true)
     }
   }
 
-  const loadNextOpenedWorkflow = async () => {
-    await loadOpenedWorkflowIndexShift(1)
+  const deleteWorkflow = async (workflow: ComfyWorkflow) => {
+    await workflow.delete()
+    if (bookmarkStore.isBookmarked(workflow.path)) {
+      bookmarkStore.setBookmarked(workflow.path, false)
+    }
+    delete workflowLookup.value[workflow.path]
   }
 
-  const loadPreviousOpenedWorkflow = async () => {
-    await loadOpenedWorkflowIndexShift(-1)
+  /**
+   * Save a workflow.
+   * @param workflow The workflow to save.
+   */
+  const saveWorkflow = async (workflow: ComfyWorkflow) => {
+    // Detach the workflow and re-attach to force refresh the tree objects.
+    const openIndex = detachWorkflow(workflow)
+    try {
+      await workflow.save()
+    } finally {
+      attachWorkflow(workflow, openIndex)
+    }
   }
 
   return {
     activeWorkflow,
-    workflows,
+    isActive,
     openWorkflows,
+    openWorkflowsTree,
+    openedWorkflowIndexShift,
+    openWorkflow,
+    isOpen,
+    closeWorkflow,
+    createTemporary,
+    renameWorkflow,
+    deleteWorkflow,
+    saveWorkflow,
+
+    workflows,
     bookmarkedWorkflows,
     modifiedWorkflows,
-    workflowLookup,
+    getWorkflowByPath,
     workflowsTree,
     bookmarkedWorkflowsTree,
-    openWorkflowsTree,
     buildWorkflowTree,
-    loadNextOpenedWorkflow,
-    loadPreviousOpenedWorkflow
+    syncWorkflows
   }
 })
 
@@ -98,6 +394,7 @@ export const useWorkflowBookmarkStore = defineStore('workflowBookmark', () => {
   }
 
   const setBookmarked = (path: string, value: boolean) => {
+    if (bookmarks.value.has(path) === value) return
     if (value) {
       bookmarks.value.add(path)
     } else {
diff --git a/src/stores/workspaceStore.ts b/src/stores/workspaceStore.ts
index d3bb2bb49..1235acb00 100644
--- a/src/stores/workspaceStore.ts
+++ b/src/stores/workspaceStore.ts
@@ -6,6 +6,7 @@ import { useQueueSettingsStore } from './queueStore'
 import { useCommandStore } from './commandStore'
 import { useSidebarTabStore } from './workspace/sidebarTabStore'
 import { useSettingStore } from './settingStore'
+import { useWorkflowStore } from './workflowStore'
 
 export const useWorkspaceStore = defineStore('workspace', () => {
   const spinner = ref(false)
@@ -26,6 +27,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     get: useSettingStore().get,
     set: useSettingStore().set
   }))
+  const workflow = computed(() => useWorkflowStore())
 
   /**
    * Registers a sidebar tab.
@@ -66,6 +68,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     command,
     sidebarTab,
     setting,
+    workflow,
 
     registerSidebarTab,
     unregisterSidebarTab,
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index ff4cd256c..7af770a6a 100644
--- a/src/utils/formatUtil.ts
+++ b/src/utils/formatUtil.ts
@@ -72,3 +72,58 @@ export function formatSize(value?: number) {
   const i = Math.floor(Math.log(bytes) / Math.log(k))
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
 }
+
+/**
+ * Finds the common directory prefix between two paths
+ * @example
+ * findCommonPrefix('a/b/c', 'a/b/d') // returns 'a/b'
+ * findCommonPrefix('x/y/z', 'a/b/c') // returns ''
+ * findCommonPrefix('a/b/c', 'a/b/c/d') // returns 'a/b/c'
+ */
+export function findCommonPrefix(path1: string, path2: string): string {
+  const parts1 = path1.split('/')
+  const parts2 = path2.split('/')
+
+  const commonParts: string[] = []
+  for (let i = 0; i < Math.min(parts1.length, parts2.length); i++) {
+    if (parts1[i] === parts2[i]) {
+      commonParts.push(parts1[i])
+    } else {
+      break
+    }
+  }
+  return commonParts.join('/')
+}
+
+/**
+ * Returns various filename components.
+ * Example:
+ * - fullFilename: 'file.txt'
+ * - filename: 'file'
+ * - suffix: 'txt'
+ */
+export function getFilenameDetails(fullFilename: string) {
+  if (fullFilename.includes('.')) {
+    return {
+      filename: fullFilename.split('.').slice(0, -1).join('.'),
+      suffix: fullFilename.split('.').pop() ?? null
+    }
+  } else {
+    return { filename: fullFilename, suffix: null }
+  }
+}
+
+/**
+ * Returns various path components.
+ * Example:
+ * - path: 'dir/file.txt'
+ * - directory: 'dir'
+ * - fullFilename: 'file.txt'
+ * - filename: 'file'
+ * - suffix: 'txt'
+ */
+export function getPathDetails(path: string) {
+  const directory = path.split('/').slice(0, -1).join('/')
+  const fullFilename = path.split('/').pop() ?? path
+  return { directory, fullFilename, ...getFilenameDetails(fullFilename) }
+}
diff --git a/src/utils/syncUtil.ts b/src/utils/syncUtil.ts
new file mode 100644
index 000000000..c60583b9b
--- /dev/null
+++ b/src/utils/syncUtil.ts
@@ -0,0 +1,45 @@
+import { api } from '@/scripts/api'
+
+/**
+ * Sync entities from the API to the entityByPath map.
+ * @param dir The directory to sync from
+ * @param entityByPath The map to sync to
+ * @param createEntity A function to create an entity from a file
+ * @param updateEntity A function to update an entity from a file
+ * @param exclude A function to exclude an entity
+ */
+export async function syncEntities<T>(
+  dir: string,
+  entityByPath: Record<string, T>,
+  createEntity: (file: any) => T,
+  updateEntity: (entity: T, file: any) => void,
+  exclude: (file: T) => boolean = () => false
+) {
+  const files = (await api.listUserDataFullInfo(dir)).map((file) => ({
+    ...file,
+    path: dir ? `${dir}/${file.path}` : file.path
+  }))
+
+  for (const file of files) {
+    const existingEntity = entityByPath[file.path]
+
+    if (!existingEntity) {
+      // New entity, add it to the map
+      entityByPath[file.path] = createEntity(file)
+    } else if (exclude(existingEntity)) {
+      // Entity has been excluded, skip it
+      continue
+    } else {
+      // Entity has been modified, update its properties
+      updateEntity(existingEntity, file)
+    }
+  }
+
+  // Remove entities that no longer exist
+  for (const [path, entity] of Object.entries(entityByPath)) {
+    if (exclude(entity)) continue
+    if (!files.some((file) => file.path === path)) {
+      delete entityByPath[path]
+    }
+  }
+}
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index ff83770ab..c334e454f 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -24,10 +24,6 @@ import type { ToastMessageOptions } from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { i18n } from '@/i18n'
 import { useExecutionStore } from '@/stores/executionStore'
-import {
-  useWorkflowStore,
-  useWorkflowBookmarkStore
-} from '@/stores/workflowStore'
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDialog.vue'
 import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
@@ -128,12 +124,6 @@ const onReconnected = () => {
   })
 }
 
-const workflowStore = useWorkflowStore()
-const workflowBookmarkStore = useWorkflowBookmarkStore()
-app.workflowManager.executionStore = executionStore
-app.workflowManager.workflowStore = workflowStore
-app.workflowManager.workflowBookmarkStore = workflowBookmarkStore
-
 onMounted(() => {
   api.addEventListener('status', onStatus)
   api.addEventListener('reconnecting', onReconnecting)
diff --git a/tests-ui/tests/fast/store/userFileStore.test.ts b/tests-ui/tests/fast/store/userFileStore.test.ts
index df4d08e7f..050a6f728 100644
--- a/tests-ui/tests/fast/store/userFileStore.test.ts
+++ b/tests-ui/tests/fast/store/userFileStore.test.ts
@@ -1,9 +1,5 @@
 import { setActivePinia, createPinia } from 'pinia'
-import {
-  TempUserFile,
-  UserFile,
-  useUserFileStore
-} from '@/stores/userFileStore'
+import { UserFile, useUserFileStore } from '@/stores/userFileStore'
 import { api } from '@/scripts/api'
 
 // Mock the api
@@ -28,14 +24,14 @@ describe('useUserFileStore', () => {
   it('should initialize with empty files', () => {
     expect(store.userFiles).toHaveLength(0)
     expect(store.modifiedFiles).toHaveLength(0)
-    expect(store.openedFiles).toHaveLength(0)
+    expect(store.loadedFiles).toHaveLength(0)
   })
 
   describe('syncFiles', () => {
     it('should add new files', async () => {
       const mockFiles = [
-        { path: 'dir/file1.txt', modified: 123, size: 100 },
-        { path: 'dir/file2.txt', modified: 456, size: 200 }
+        { path: 'file1.txt', modified: 123, size: 100 },
+        { path: 'file2.txt', modified: 456, size: 200 }
       ]
       ;(api.listUserDataFullInfo as jest.Mock).mockResolvedValue(mockFiles)
 
@@ -47,11 +43,11 @@ describe('useUserFileStore', () => {
     })
 
     it('should update existing files', async () => {
-      const initialFile = { path: 'dir/file1.txt', modified: 123, size: 100 }
+      const initialFile = { path: 'file1.txt', modified: 123, size: 100 }
       ;(api.listUserDataFullInfo as jest.Mock).mockResolvedValue([initialFile])
       await store.syncFiles('dir')
 
-      const updatedFile = { path: 'dir/file1.txt', modified: 456, size: 200 }
+      const updatedFile = { path: 'file1.txt', modified: 456, size: 200 }
       ;(api.listUserDataFullInfo as jest.Mock).mockResolvedValue([updatedFile])
       await store.syncFiles('dir')
 
@@ -62,13 +58,13 @@ describe('useUserFileStore', () => {
 
     it('should remove non-existent files', async () => {
       const initialFiles = [
-        { path: 'dir/file1.txt', modified: 123, size: 100 },
-        { path: 'dir/file2.txt', modified: 456, size: 200 }
+        { path: 'file1.txt', modified: 123, size: 100 },
+        { path: 'file2.txt', modified: 456, size: 200 }
       ]
       ;(api.listUserDataFullInfo as jest.Mock).mockResolvedValue(initialFiles)
       await store.syncFiles('dir')
 
-      const updatedFiles = [{ path: 'dir/file1.txt', modified: 123, size: 100 }]
+      const updatedFiles = [{ path: 'file1.txt', modified: 123, size: 100 }]
       ;(api.listUserDataFullInfo as jest.Mock).mockResolvedValue(updatedFiles)
       await store.syncFiles('dir')
 
@@ -102,6 +98,7 @@ describe('useUserFileStore', () => {
         expect(file.content).toBe('file content')
         expect(file.originalContent).toBe('file content')
         expect(file.isLoading).toBe(false)
+        expect(file.isLoaded).toBe(true)
       })
 
       it('should throw error on failed load', async () => {
@@ -132,7 +129,7 @@ describe('useUserFileStore', () => {
         expect(api.storeUserData).toHaveBeenCalledWith(
           'file1.txt',
           'modified content',
-          { throwOnError: true, full_info: true }
+          { throwOnError: true, full_info: true, overwrite: true }
         )
         expect(file.lastModified).toBe(456)
         expect(file.size).toBe(200)
@@ -194,9 +191,9 @@ describe('useUserFileStore', () => {
         expect(api.storeUserData).toHaveBeenCalledWith(
           'newfile.txt',
           'file content',
-          { throwOnError: true, full_info: true }
+          { throwOnError: true, full_info: true, overwrite: true }
         )
-        expect(newFile).toBeInstanceOf(TempUserFile)
+        expect(newFile).toBeInstanceOf(UserFile)
         expect(newFile.path).toBe('newfile.txt')
         expect(newFile.lastModified).toBe(456)
         expect(newFile.size).toBe(200)
diff --git a/tests-ui/tests/fast/store/workflowStore.test.ts b/tests-ui/tests/fast/store/workflowStore.test.ts
new file mode 100644
index 000000000..c6168c57a
--- /dev/null
+++ b/tests-ui/tests/fast/store/workflowStore.test.ts
@@ -0,0 +1,358 @@
+import { setActivePinia, createPinia } from 'pinia'
+import {
+  LoadedComfyWorkflow,
+  useWorkflowBookmarkStore,
+  useWorkflowStore
+} from '@/stores/workflowStore'
+import { api } from '@/scripts/api'
+import { defaultGraph, defaultGraphJSON } from '@/scripts/defaultGraph'
+
+// Add mock for api at the top of the file
+jest.mock('@/scripts/api', () => ({
+  api: {
+    getUserData: jest.fn(),
+    storeUserData: jest.fn(),
+    listUserDataFullInfo: jest.fn()
+  }
+}))
+
+describe('useWorkflowStore', () => {
+  let store: ReturnType<typeof useWorkflowStore>
+  let bookmarkStore: ReturnType<typeof useWorkflowBookmarkStore>
+
+  const syncRemoteWorkflows = async (filenames: string[]) => {
+    ;(api.listUserDataFullInfo as jest.Mock).mockResolvedValue(
+      filenames.map((filename) => ({
+        path: filename,
+        modified: new Date().toISOString(),
+        size: 1 // size !== 0 for remote workflows
+      }))
+    )
+    return await store.syncWorkflows()
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    store = useWorkflowStore()
+    bookmarkStore = useWorkflowBookmarkStore()
+    jest.clearAllMocks()
+
+    // Add default mock implementations
+    ;(api.getUserData as jest.Mock).mockResolvedValue({
+      status: 200,
+      json: () => Promise.resolve({ favorites: [] })
+    })
+    ;(api.storeUserData as jest.Mock).mockResolvedValue({
+      status: 200
+    })
+  })
+
+  describe('syncWorkflows', () => {
+    it('should sync workflows', async () => {
+      await syncRemoteWorkflows(['a.json', 'b.json'])
+      expect(store.workflows.length).toBe(2)
+    })
+
+    it('should exclude temporary workflows', async () => {
+      const workflow = store.createTemporary('c.json')
+      await syncRemoteWorkflows(['a.json', 'b.json'])
+      expect(store.workflows.length).toBe(3)
+      expect(store.workflows.filter((w) => w.isTemporary)).toEqual([workflow])
+    })
+  })
+
+  describe('createTemporary', () => {
+    it('should create a temporary workflow with a unique path', () => {
+      const workflow = store.createTemporary()
+      expect(workflow.path).toBe('workflows/Unsaved Workflow.json')
+
+      const workflow2 = store.createTemporary()
+      expect(workflow2.path).toBe('workflows/Unsaved Workflow (2).json')
+    })
+
+    it('should create a temporary workflow not clashing with persisted workflows', async () => {
+      await syncRemoteWorkflows(['a.json'])
+      const workflow = store.createTemporary('a.json')
+      expect(workflow.path).toBe('workflows/a (2).json')
+    })
+  })
+
+  describe('openWorkflow', () => {
+    it('should load and open a temporary workflow', async () => {
+      // Create a test workflow
+      const workflow = store.createTemporary('test.json')
+      const mockWorkflowData = { nodes: [], links: [] }
+
+      // Mock the load response
+      jest.spyOn(workflow, 'load').mockImplementation(async () => {
+        workflow.changeTracker = { activeState: mockWorkflowData } as any
+        return workflow as LoadedComfyWorkflow
+      })
+
+      // Open the workflow
+      await store.openWorkflow(workflow)
+
+      // Verify the workflow is now active
+      expect(store.activeWorkflow?.path).toBe(workflow.path)
+
+      // Verify the workflow is in the open workflows list
+      expect(store.isOpen(workflow)).toBe(true)
+    })
+
+    it('should not reload an already active workflow', async () => {
+      const workflow = await store.createTemporary('test.json').load()
+      jest.spyOn(workflow, 'load')
+
+      // Set as active workflow
+      store.activeWorkflow = workflow
+
+      await store.openWorkflow(workflow)
+
+      // Verify load was not called
+      expect(workflow.load).not.toHaveBeenCalled()
+    })
+
+    it('should load a remote workflow', async () => {
+      await syncRemoteWorkflows(['a.json'])
+      const workflow = store.getWorkflowByPath('workflows/a.json')!
+      expect(workflow).not.toBeNull()
+      expect(workflow.path).toBe('workflows/a.json')
+      expect(workflow.isLoaded).toBe(false)
+      expect(workflow.isTemporary).toBe(false)
+      ;(api.getUserData as jest.Mock).mockResolvedValue({
+        status: 200,
+        text: () => Promise.resolve(defaultGraphJSON)
+      })
+      await workflow.load()
+
+      expect(workflow.isLoaded).toBe(true)
+      expect(workflow.content).toEqual(defaultGraphJSON)
+      expect(workflow.originalContent).toEqual(defaultGraphJSON)
+      expect(workflow.activeState).toEqual(defaultGraph)
+      expect(workflow.initialState).toEqual(defaultGraph)
+      expect(workflow.isModified).toBe(false)
+    })
+
+    it('should load and open a remote workflow', async () => {
+      await syncRemoteWorkflows(['a.json', 'b.json'])
+
+      const workflow = store.getWorkflowByPath('workflows/a.json')!
+      expect(workflow).not.toBeNull()
+      expect(workflow.path).toBe('workflows/a.json')
+      expect(workflow.isLoaded).toBe(false)
+      ;(api.getUserData as jest.Mock).mockResolvedValue({
+        status: 200,
+        text: () => Promise.resolve(defaultGraphJSON)
+      })
+
+      const loadedWorkflow = await store.openWorkflow(workflow)
+
+      expect(loadedWorkflow).toBe(workflow)
+      expect(loadedWorkflow.path).toBe('workflows/a.json')
+      expect(store.activeWorkflow?.path).toBe('workflows/a.json')
+      expect(store.isOpen(loadedWorkflow)).toBe(true)
+      expect(loadedWorkflow.content).toEqual(defaultGraphJSON)
+      expect(loadedWorkflow.originalContent).toEqual(defaultGraphJSON)
+      expect(loadedWorkflow.isLoaded).toBe(true)
+      expect(loadedWorkflow.activeState).toEqual(defaultGraph)
+      expect(loadedWorkflow.initialState).toEqual(defaultGraph)
+      expect(loadedWorkflow.isModified).toBe(false)
+    })
+  })
+
+  describe('renameWorkflow', () => {
+    it('should rename workflow and update bookmarks', async () => {
+      const workflow = store.createTemporary('dir/test.json')
+
+      // Set up initial bookmark
+      expect(workflow.path).toBe('workflows/dir/test.json')
+      bookmarkStore.setBookmarked(workflow.path, true)
+      expect(bookmarkStore.isBookmarked(workflow.path)).toBe(true)
+
+      // Mock super.rename
+      jest
+        .spyOn(Object.getPrototypeOf(workflow), 'rename')
+        .mockImplementation(async function (this: any, newPath: string) {
+          this.path = newPath
+          return this
+        } as any)
+
+      // Perform rename
+      const newName = 'renamed.json'
+      const newPath = 'workflows/dir/renamed.json'
+      await store.renameWorkflow(workflow, newName)
+
+      // Check that bookmark was transferred
+      expect(bookmarkStore.isBookmarked(newPath)).toBe(true)
+      expect(bookmarkStore.isBookmarked('workflows/dir/test.json')).toBe(false)
+    })
+
+    it('should rename workflow without affecting bookmarks if not bookmarked', async () => {
+      const workflow = store.createTemporary('test.json')
+
+      // Verify not bookmarked initially
+      expect(bookmarkStore.isBookmarked(workflow.path)).toBe(false)
+
+      // Mock super.rename
+      jest
+        .spyOn(Object.getPrototypeOf(workflow), 'rename')
+        .mockImplementation(async function (this: any, newPath: string) {
+          this.path = newPath
+          return this
+        } as any)
+
+      // Perform rename
+      const newName = 'renamed'
+      await workflow.rename(newName)
+
+      // Check that no bookmarks were affected
+      expect(bookmarkStore.isBookmarked(workflow.path)).toBe(false)
+      expect(bookmarkStore.isBookmarked('test.json')).toBe(false)
+    })
+  })
+
+  describe('closeWorkflow', () => {
+    it('should close a workflow', async () => {
+      const workflow = store.createTemporary('test.json')
+      await store.openWorkflow(workflow)
+      expect(store.isOpen(workflow)).toBe(true)
+      expect(store.getWorkflowByPath(workflow.path)).not.toBeNull()
+      await store.closeWorkflow(workflow)
+      expect(store.isOpen(workflow)).toBe(false)
+      expect(store.getWorkflowByPath(workflow.path)).toBeNull()
+    })
+  })
+
+  describe('deleteWorkflow', () => {
+    it('should close and delete an open workflow', async () => {
+      const workflow = store.createTemporary('test.json')
+
+      // Mock the necessary methods
+      jest.spyOn(workflow, 'delete').mockResolvedValue()
+
+      // Open the workflow first
+      await store.openWorkflow(workflow)
+
+      // Delete the workflow
+      await store.deleteWorkflow(workflow)
+
+      // Verify workflow was closed and deleted
+      expect(workflow.delete).toHaveBeenCalled()
+    })
+
+    it('should remove bookmark when deleting a bookmarked workflow', async () => {
+      const workflow = store.createTemporary('test.json')
+
+      // Mock delete method
+      jest.spyOn(workflow, 'delete').mockResolvedValue()
+
+      // Bookmark the workflow
+      bookmarkStore.setBookmarked(workflow.path, true)
+      expect(bookmarkStore.isBookmarked(workflow.path)).toBe(true)
+
+      // Delete the workflow
+      await store.deleteWorkflow(workflow)
+
+      // Verify bookmark was removed
+      expect(bookmarkStore.isBookmarked(workflow.path)).toBe(false)
+    })
+  })
+
+  describe('save', () => {
+    it('should save workflow content and reset modification state', async () => {
+      await syncRemoteWorkflows(['test.json'])
+      const workflow = store.getWorkflowByPath('workflows/test.json')!
+
+      // Mock the activeState
+      const mockState = { nodes: [] }
+      workflow.changeTracker = {
+        activeState: mockState,
+        reset: jest.fn()
+      } as any
+      ;(api.storeUserData as jest.Mock).mockResolvedValue({
+        status: 200,
+        json: () =>
+          Promise.resolve({
+            path: 'workflows/test.json',
+            modified: Date.now(),
+            size: 2
+          })
+      })
+
+      // Save the workflow
+      await workflow.save()
+
+      // Verify the content was updated
+      expect(workflow.content).toBe(JSON.stringify(mockState))
+      expect(workflow.changeTracker!.reset).toHaveBeenCalled()
+      expect(workflow.isModified).toBe(false)
+    })
+
+    it('should save workflow even if isModified is screwed by changeTracker', async () => {
+      await syncRemoteWorkflows(['test.json'])
+      const workflow = store.getWorkflowByPath('workflows/test.json')!
+      workflow.isModified = false
+
+      // Mock the activeState
+      const mockState = { nodes: [] }
+      workflow.changeTracker = {
+        activeState: mockState,
+        reset: jest.fn()
+      } as any
+      ;(api.storeUserData as jest.Mock).mockResolvedValue({
+        status: 200,
+        json: () =>
+          Promise.resolve({
+            path: 'workflows/test.json',
+            modified: Date.now(),
+            size: 2
+          })
+      })
+
+      // Save the workflow
+      await workflow.save()
+
+      // Verify storeUserData was called
+      expect(api.storeUserData).toHaveBeenCalled()
+
+      // Verify the content was updated
+      expect(workflow.changeTracker!.reset).toHaveBeenCalled()
+      expect(workflow.isModified).toBe(false)
+    })
+  })
+
+  describe('saveAs', () => {
+    it('should save workflow to new path and reset modification state', async () => {
+      await syncRemoteWorkflows(['test.json'])
+      const workflow = store.getWorkflowByPath('workflows/test.json')!
+      workflow.isModified = true
+
+      // Mock the activeState
+      const mockState = { nodes: [] }
+      workflow.changeTracker = {
+        activeState: mockState,
+        reset: jest.fn()
+      } as any
+      ;(api.storeUserData as jest.Mock).mockResolvedValue({
+        status: 200,
+        json: () =>
+          Promise.resolve({
+            path: 'workflows/new-test.json',
+            modified: Date.now(),
+            size: 2
+          })
+      })
+
+      // Save the workflow with new path
+      const newWorkflow = await workflow.saveAs('workflows/new-test.json')
+
+      // Verify the content was updated
+      expect(workflow.path).toBe('workflows/test.json')
+      expect(workflow.isModified).toBe(true)
+
+      expect(newWorkflow.path).toBe('workflows/new-test.json')
+      expect(newWorkflow.content).toBe(JSON.stringify(mockState))
+      expect(newWorkflow.isModified).toBe(false)
+    })
+  })
+})
diff --git a/tests-ui/tests/globalSetup.ts b/tests-ui/tests/globalSetup.ts
index 5c3f5eb6f..512bc907d 100644
--- a/tests-ui/tests/globalSetup.ts
+++ b/tests-ui/tests/globalSetup.ts
@@ -51,7 +51,14 @@ module.exports = async function () {
         shiftDown: false,
         spinner: false,
         focusMode: false,
-        toggleFocusMode: jest.fn()
+        toggleFocusMode: jest.fn(),
+        workflow: {
+          activeWorkflow: null,
+          syncWorkflows: jest.fn(),
+          getWorkflowByPath: jest.fn(),
+          createTemporary: jest.fn(),
+          openWorkflow: jest.fn()
+        }
       })
     }
   })