fix: keep node preview images across workflow tab switches (#15360)

## Summary

Node preview images are lost permanently on a workflow tab switch,
because `app.clean()` revokes their object URLs and nothing restores
them. This scopes preview state per workflow instead.

Fixes FE-1645

## Changes

- **What**: `workflowService.beforeLoadNewGraph()` hands the live
previews to `nodeOutputStore` keyed by the outgoing workflow path, so
`app.clean()` has nothing left to revoke. `afterLoadNewGraph()` puts
back the previews belonging to the workflow that just became active.

### Before

1. Open workflow A with a KSampler, preview method anything but `none`.
2. Queue it and let it finish — the KSampler shows its final latent
preview.
3. Switch to tab B, switch back to tab A.
4. The preview is gone and never comes back. Output images on other
nodes survive the same switch.

`app.clean()` (`src/scripts/app.ts:2434`) runs on every workflow load
and calls `resetAllOutputsAndPreviews()` → `revokeAllPreviews()`
(`src/stores/nodeOutputStore.ts:301`), which releases every preview
object URL and empties the maps. `nodeOutputs` survives only because
`ChangeTracker` snapshots and restores it
(`src/scripts/changeTracker.ts:306`/`350`); previews have no equivalent.
Nothing revokes previews at execution end, so a finished run's last
frame is real state a user is looking at — and a `b_preview` websocket
frame cannot be re-fetched, so revoking makes the loss permanent.

### After

The preview is still there when you come back to the tab.

## Review Focus

- Keying by workflow path is load-bearing, not incidental. Node locator
ids for root-graph nodes are bare node ids, so simply not clearing on
load would show workflow A's node 5 preview on workflow B's node 5.
- Ownership of the object URL retain moves from the live map to the
stash and back, so nothing is released on a tab switch. Released instead
when: the workflow is cleared in place (`Clear Workflow` still calls
`app.clean()` with no load following it), the workflow has been closed,
or a preview arriving for the incoming graph supersedes the stashed one.
- Undo/redo goes through `loadGraphData(..., clean = false)` for the
same workflow — it stashes and restores under the same path, so the net
effect is unchanged.
- Deliberately not done: no `ChangeTracker` snapshot/restore field for
previews, and no use of the `workflowTransientState` mechanism proposed
in #14941, so this does not prejudge that review.

## Tests

`src/stores/nodeOutputStore.workflowSwitch.test.ts` covers the round
trip, the same-node-id cross-workflow case, release on close, and
clear-in-place. `workflowService.test.ts` covers the two lifecycle
hooks.

Author: christian-byrne

src/platform/workflow/core/services/workflowService.test.ts

@@ -14,6 +14,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { app } from '@/scripts/app'
@@ -84,7 +85,9 @@ vi.mock('@/scripts/app', () => ({
   app: {
     canvas: { ds: { offset: [0, 0], scale: 1 } },
     rootGraph: { serialize: vi.fn(() => ({})), extra: {} },
-    loadGraphData: vi.fn()
+    loadGraphData: vi.fn(),
+    nodeOutputs: {},
+    nodePreviewImages: {}
   }
 }))
 
@@ -314,6 +317,21 @@ describe('useWorkflowService', () => {
       )
     })
 
+    it('should stash node previews before app.clean() can revoke them', () => {
+      const activeWorkflow = createModeTestWorkflow({
+        path: 'workflows/test.json'
+      })
+      workflowStore.activeWorkflow = activeWorkflow
+      const stashPreviews = vi.spyOn(
+        useNodeOutputStore(),
+        'stashPreviewsForWorkflow'
+      )
+
+      useWorkflowService().beforeLoadNewGraph()
+
+      expect(stashPreviews).toHaveBeenCalledWith(activeWorkflow.path)
+    })
+
     it('should save active workflow state through the V2 draft store', () => {
       vi.spyOn(useSettingStore(), 'get').mockImplementation((key: string) => {
         return key === 'Comfy.Workflow.Persist'
@@ -542,6 +560,20 @@ describe('useWorkflowService', () => {
       expect(closed).toBe(false)
       expect(workflowStore.closeWorkflow).not.toHaveBeenCalled()
     })
+
+    it('should release the closed workflow node previews', async () => {
+      const workflow = createModeTestWorkflow({
+        path: 'workflows/closing.json'
+      })
+      const discardPreviews = vi.spyOn(
+        useNodeOutputStore(),
+        'discardPreviewsForWorkflow'
+      )
+
+      await service.closeWorkflow(workflow, { warnIfUnsaved: false })
+
+      expect(discardPreviews).toHaveBeenCalledWith(workflow.path)
+    })
   })
 
   describe('afterLoadNewGraph', () => {
@@ -561,6 +593,16 @@ describe('useWorkflowService', () => {
       vi.mocked(workflowStore.openWorkflow).mockResolvedValue(existingWorkflow)
     })
 
+    it('should restore the stashed previews of the newly active workflow', async () => {
+      workflowStore.activeWorkflow = existingWorkflow
+
+      await useWorkflowService().afterLoadNewGraph('repeat', makeWorkflowData())
+
+      expect(
+        useNodeOutputStore().restorePreviewsForWorkflow
+      ).toHaveBeenCalledWith(existingWorkflow.path)
+    })
+
     it('should reuse the active workflow when loading the same path repeatedly', async () => {
       const workflowId = 'repeat-workflow-id'
       existingWorkflow.changeTracker.activeState.id = workflowId

src/platform/workflow/core/services/workflowService.ts

@@ -26,6 +26,7 @@ import { useAppMode } from '@/composables/useAppMode'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
@@ -348,6 +349,7 @@ export const useWorkflowService = () => {
     }
 
     await workflowStore.closeWorkflow(workflow)
+    useNodeOutputStore().discardPreviewsForWorkflow(workflow.path)
     return true
   }
 
@@ -423,6 +425,9 @@ export const useWorkflowService = () => {
         missingMediaCandidates: mediaCandidates ?? undefined
       })
 
+      // Hand the previews to the store before `app.clean()` revokes them
+      useNodeOutputStore().stashPreviewsForWorkflow(activeWorkflow.path)
+
       // Capture thumbnail before loading new graph
       void workflowThumbnail.storeThumbnail(activeWorkflow)
       domWidgetStore.clear()
@@ -447,6 +452,17 @@ export const useWorkflowService = () => {
     value: string | ComfyWorkflow | null,
     workflowData: ComfyWorkflowJSON,
     shareId?: string
+  ) => {
+    await activateLoadedWorkflow(value, workflowData, shareId)
+    useNodeOutputStore().restorePreviewsForWorkflow(
+      useWorkspaceStore().workflow.activeWorkflow?.path
+    )
+  }
+
+  const activateLoadedWorkflow = async (
+    value: string | ComfyWorkflow | null,
+    workflowData: ComfyWorkflowJSON,
+    shareId?: string
   ) => {
     const workflowStore = useWorkspaceStore().workflow
     const { isAppMode } = useAppMode()

src/scripts/app.test.ts

@@ -85,7 +85,10 @@ const {
   },
   mockNodeOutputStore: {
     refreshNodeOutputs: vi.fn(),
-    resetAllOutputsAndPreviews: vi.fn()
+    resetAllOutputsAndPreviews: vi.fn(),
+    stashPreviewsForWorkflow: vi.fn(),
+    restorePreviewsForWorkflow: vi.fn(),
+    discardPreviewsForWorkflow: vi.fn()
   },
   mockWorkspaceWorkflow: {
     activeWorkflow: null as ComfyWorkflow | null,

src/stores/nodeOutputStore.ts

@@ -50,9 +50,15 @@ interface SetOutputOptions {
 }
 
 export const useNodeOutputStore = defineStore('nodeOutput', () => {
-  const { nodeIdToNodeLocatorId, nodeToNodeLocatorId } = useWorkflowStore()
+  const workflowStore = useWorkflowStore()
+  const { nodeIdToNodeLocatorId, nodeToNodeLocatorId } = workflowStore
   const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
   const latestPreview = ref<string[]>([])
+  /**
+   * Previews belonging to open-but-inactive workflows, keyed by workflow path.
+   * The stash owns the object URL retain taken when the previews were set.
+   */
+  const stashedPreviews = new Map<string, Record<string, string[]>>()
 
   function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
     scheduledRevoke[locator]?.stop()
@@ -298,19 +304,75 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     delete nodePreviewImages.value[nodeLocatorId]
   }
 
-  function revokeAllPreviews() {
-    for (const nodeLocatorId of Object.keys(app.nodePreviewImages)) {
-      const previews = app.nodePreviewImages[nodeLocatorId]
-      if (!previews?.[Symbol.iterator]) continue
+  function releasePreviewUrls(previews: Record<string, string[]>) {
+    for (const urls of Object.values(previews)) {
+      if (!urls?.[Symbol.iterator]) continue
 
-      for (const url of previews) {
+      for (const url of urls) {
         releaseSharedObjectUrl(url)
       }
     }
+  }
+
+  function revokeAllPreviews() {
+    releasePreviewUrls(app.nodePreviewImages)
+    app.nodePreviewImages = {}
+    nodePreviewImages.value = {}
+  }
+
+  /** Release the previews held for a workflow that is going away. */
+  function discardPreviewsForWorkflow(workflowPath: string) {
+    const stashed = stashedPreviews.get(workflowPath)
+    if (!stashed) return
+
+    stashedPreviews.delete(workflowPath)
+    releasePreviewUrls(stashed)
+  }
+
+  function discardClosedWorkflowPreviews() {
+    const openPaths = new Set(workflowStore.openWorkflows.map((wf) => wf.path))
+    for (const path of [...stashedPreviews.keys()]) {
+      if (!openPaths.has(path)) discardPreviewsForWorkflow(path)
+    }
+  }
+
+  /**
+   * Move the live previews into the stash so `app.clean()` cannot revoke them
+   * while `workflowPath` is loaded out of the editor. Preview frames arrive
+   * over the websocket and cannot be re-fetched, so releasing their object
+   * URLs on a tab switch loses them for good.
+   */
+  function stashPreviewsForWorkflow(workflowPath: string) {
+    discardClosedWorkflowPreviews()
+    discardPreviewsForWorkflow(workflowPath)
+
+    const previews = app.nodePreviewImages
+    if (Object.keys(previews).length) {
+      stashedPreviews.set(workflowPath, previews)
+    }
     app.nodePreviewImages = {}
     nodePreviewImages.value = {}
   }
 
+  function restorePreviewsForWorkflow(workflowPath: string | undefined) {
+    if (!workflowPath) return
+
+    const stashed = stashedPreviews.get(workflowPath)
+    if (!stashed) return
+    stashedPreviews.delete(workflowPath)
+
+    const live = app.nodePreviewImages
+    const superseded: Record<string, string[]> = {}
+    for (const [nodeLocatorId, urls] of Object.entries(stashed)) {
+      // A preview that arrived while the graph was loading wins; the stashed
+      // copy for that node then has no owner left to release it.
+      if (nodeLocatorId in live) superseded[nodeLocatorId] = urls
+      else live[nodeLocatorId] = urls
+    }
+    releasePreviewUrls(superseded)
+    nodePreviewImages.value = { ...live }
+  }
+
   function revokeSubgraphPreviews(subgraphNode: SubgraphNode) {
     const { graph } = subgraphNode
     if (!graph) return
@@ -444,6 +506,9 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     revokePreviewsByLocatorId,
     revokeAllPreviews,
     revokeSubgraphPreviews,
+    stashPreviewsForWorkflow,
+    restorePreviewsForWorkflow,
+    discardPreviewsForWorkflow,
     removeNodeOutputs,
     removeNodeOutputsForNode,
     snapshotOutputs,