fix: track nodePreviewImages in usePromotedPreviews for GLSL live preview propagation

src/composables/node/usePromotedPreviews.test.ts

@@ -16,7 +16,7 @@ import { usePromotedPreviews } from './usePromotedPreviews'
 
 type MockNodeOutputStore = Pick<
   ReturnType<typeof useNodeOutputStore>,
-  'nodeOutputs' | 'getNodeImageUrls'
+  'nodeOutputs' | 'nodePreviewImages' | 'getNodeImageUrls'
 >
 
 const getNodeImageUrls = vi.hoisted(() =>
@@ -35,6 +35,7 @@ vi.mock('@/stores/nodeOutputStore', () => {
 function createMockNodeOutputStore(): MockNodeOutputStore {
   return {
     nodeOutputs: reactive<MockNodeOutputStore['nodeOutputs']>({}),
+    nodePreviewImages: reactive<MockNodeOutputStore['nodePreviewImages']>({}),
     getNodeImageUrls
   }
 }
@@ -71,6 +72,17 @@ function seedOutputs(subgraphId: string, nodeIds: Array<number | string>) {
   }
 }
 
+function seedPreviewImages(
+  subgraphId: string,
+  entries: Array<{ nodeId: number | string; urls: string[] }>
+) {
+  const store = useNodeOutputStore()
+  for (const { nodeId, urls } of entries) {
+    const locatorId = createNodeLocatorId(subgraphId, nodeId)
+    store.nodePreviewImages[locatorId] = urls
+  }
+}
+
 describe(usePromotedPreviews, () => {
   let nodeOutputStore: MockNodeOutputStore
 
@@ -119,7 +131,7 @@ describe(usePromotedPreviews, () => {
 
     const mockUrls = ['/view?filename=output.png']
     seedOutputs(setup.subgraph.id, [10])
-    vi.mocked(useNodeOutputStore().getNodeImageUrls).mockReturnValue(mockUrls)
+    getNodeImageUrls.mockReturnValue(mockUrls)
 
     const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
     expect(promotedPreviews.value).toEqual([
@@ -143,9 +155,7 @@ describe(usePromotedPreviews, () => {
     )
 
     seedOutputs(setup.subgraph.id, [10])
-    vi.mocked(useNodeOutputStore().getNodeImageUrls).mockReturnValue([
-      '/view?filename=output.webm'
-    ])
+    getNodeImageUrls.mockReturnValue(['/view?filename=output.webm'])
 
     const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
     expect(promotedPreviews.value[0].type).toBe('video')
@@ -162,9 +172,7 @@ describe(usePromotedPreviews, () => {
     )
 
     seedOutputs(setup.subgraph.id, [10])
-    vi.mocked(useNodeOutputStore().getNodeImageUrls).mockReturnValue([
-      '/view?filename=output.mp3'
-    ])
+    getNodeImageUrls.mockReturnValue(['/view?filename=output.mp3'])
 
     const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
     expect(promotedPreviews.value[0].type).toBe('audio')
@@ -194,13 +202,11 @@ describe(usePromotedPreviews, () => {
     )
 
     seedOutputs(setup.subgraph.id, [10, 20])
-    vi.mocked(useNodeOutputStore().getNodeImageUrls).mockImplementation(
-      (node: LGraphNode) => {
-        if (node === node10) return ['/view?a=1']
-        if (node === node20) return ['/view?b=2']
-        return undefined
-      }
-    )
+    getNodeImageUrls.mockImplementation((node: LGraphNode) => {
+      if (node === node10) return ['/view?a=1']
+      if (node === node20) return ['/view?b=2']
+      return undefined
+    })
 
     const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
     expect(promotedPreviews.value).toHaveLength(2)
@@ -208,6 +214,31 @@ describe(usePromotedPreviews, () => {
     expect(promotedPreviews.value[1].urls).toEqual(['/view?b=2'])
   })
 
+  it('returns preview when only nodePreviewImages exist (e.g. GLSL live preview)', () => {
+    const setup = createSetup()
+    addInteriorNode(setup, { id: 10, previewMediaType: 'image' })
+    usePromotionStore().promote(
+      setup.subgraphNode.rootGraph.id,
+      setup.subgraphNode.id,
+      '10',
+      '$$canvas-image-preview'
+    )
+
+    const blobUrl = 'blob:http://localhost/glsl-preview'
+    seedPreviewImages(setup.subgraph.id, [{ nodeId: 10, urls: [blobUrl] }])
+    getNodeImageUrls.mockReturnValue([blobUrl])
+
+    const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
+    expect(promotedPreviews.value).toEqual([
+      {
+        interiorNodeId: '10',
+        widgetName: '$$canvas-image-preview',
+        type: 'image',
+        urls: [blobUrl]
+      }
+    ])
+  })
+
   it('skips interior nodes with no image output', () => {
     const setup = createSetup()
     addInteriorNode(setup, { id: 10 })
@@ -253,7 +284,7 @@ describe(usePromotedPreviews, () => {
 
     const mockUrls = ['/view?filename=img.png']
     seedOutputs(setup.subgraph.id, [10])
-    vi.mocked(useNodeOutputStore().getNodeImageUrls).mockReturnValue(mockUrls)
+    getNodeImageUrls.mockReturnValue(mockUrls)
 
     const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
     expect(promotedPreviews.value).toHaveLength(1)

src/composables/node/usePromotedPreviews.ts

@@ -39,16 +39,18 @@ export function usePromotedPreviews(
       const interiorNode = node.subgraph.getNodeById(entry.interiorNodeId)
       if (!interiorNode) continue
 
-      // Read from the reactive nodeOutputs ref to establish Vue
-      // dependency tracking. getNodeImageUrls reads from the
-      // non-reactive app.nodeOutputs, so without this access the
-      // computed would never re-evaluate when outputs change.
+      // Read from both reactive refs to establish Vue dependency
+      // tracking. getNodeImageUrls reads from non-reactive
+      // app.nodeOutputs / app.nodePreviewImages, so without this
+      // access the computed would never re-evaluate.
       const locatorId = createNodeLocatorId(
         node.subgraph.id,
         entry.interiorNodeId
       )
-      const _reactiveOutputs = nodeOutputStore.nodeOutputs[locatorId]
-      if (!_reactiveOutputs?.images?.length) continue
+      const reactiveOutputs = nodeOutputStore.nodeOutputs[locatorId]
+      const reactivePreviews = nodeOutputStore.nodePreviewImages[locatorId]
+      if (!reactiveOutputs?.images?.length && !reactivePreviews?.length)
+        continue
 
       const urls = nodeOutputStore.getNodeImageUrls(interiorNode)
       if (!urls?.length) continue