Add key function param in node tree build

.cursorrules

@@ -1,43 +0,0 @@
-// Vue 3 Composition API .cursorrules
-
-// Vue 3 Composition API best practices
-const vue3CompositionApiBestPractices = [
-  "Use setup() function for component logic",
-  "Utilize ref and reactive for reactive state",
-  "Implement computed properties with computed()",
-  "Use watch and watchEffect for side effects",
-  "Implement lifecycle hooks with onMounted, onUpdated, etc.",
-  "Utilize provide/inject for dependency injection",
-]
-
-// Folder structure
-const folderStructure = `
-src/
-  components/
-  constants/
-  composables/
-  views/
-  stores/
-  services/
-  App.vue
-  main.ts
-`;
-
-// Tailwind CSS best practices
-const tailwindCssBestPractices = [
-  "Use Tailwind CSS for styling",
-  "Implement responsive design with Tailwind CSS",
-]
-
-// Additional instructions
-const additionalInstructions = `
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use lodash for utility functions
-3. Use TypeScript for type safety
-4. Implement proper props and emits definitions
-5. Utilize Vue 3's Teleport component when needed
-6. Use Suspense for async components
-7. Implement proper error handling
-8. Follow Vue 3 style guide and naming conventions
-9. Use Vite for fast development and building
-`;

.github/workflows/i18n-node-defs.yaml

@@ -42,7 +42,6 @@ jobs:
           Automated PR to update locales for node definitions
 
           This PR was created automatically by the frontend update workflow.
-        branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
+        branch: update-locales-node-defs-{{ github.event.inputs.trigger_type }}-{{ github.run_id }}
         base: main
-        labels: dependencies
-        path: ComfyUI_frontend
+        labels: dependencies

.github/workflows/release.yaml

@@ -40,10 +40,9 @@ jobs:
           files: |
             dist.zip
           tag_name: v${{ steps.current_version.outputs.version }}
-          draft: false
+          draft: true
           prerelease: false
           make_latest: "true"
-          generate_release_notes: true
   publish_types:
     runs-on: ubuntu-latest
     if: >

.gitignore

@@ -16,9 +16,6 @@ dist-ssr
 .vscode/*
 *.code-workspace
 !.vscode/extensions.json
-!.vscode/tailwind.json
-!.vscode/settings.json.default
-!.vscode/launch.json.default
 .idea
 .DS_Store
 *.suo

.vscode/launch.json.default

@@ -1,16 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome on frontend dev",
-            "url": "http://localhost:5173",
-            "webRoot": "${workspaceFolder}/src",
-            "sourceMaps": true,
-        }
-    ]
-}

.vscode/settings.json.default

@@ -1,5 +0,0 @@
-{
-  "css.customData": [
-    ".vscode/tailwind.json"
-  ]
-}

.vscode/tailwind.json

@@ -1,55 +0,0 @@
-{
-  "version": 1.1,
-  "atDirectives": [
-    {
-      "name": "@tailwind",
-      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
-        }
-      ]
-    },
-    {
-      "name": "@apply",
-      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
-        }
-      ]
-    },
-    {
-      "name": "@responsive",
-      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
-        }
-      ]
-    },
-    {
-      "name": "@screen",
-      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
-        }
-      ]
-    },
-    {
-      "name": "@variants",
-      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
-        }
-      ]
-    }
-  ]
-}

browser_tests/assets/collapsed_multiline.json

@@ -1,37 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CLIPTextEncode",
-      "pos": [20, 50],
-      "size": [400, 200],
-      "flags": { "collapsed": true },
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": null,
-          "localized_name": "clip"
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "links": null,
-          "localized_name": "CONDITIONING"
-        }
-      ],
-      "properties": {},
-      "widgets_values": ["Should not be displayed."]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "version": 0.4
-}

browser_tests/assets/default.json

@@ -114,7 +114,7 @@
         { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
       ],
       "properties": {},
-      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+      "widgets_values": ["v1-5-pruned-emaonly.ckpt"]
     }
   ],
   "links": [

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -1,163 +0,0 @@
-{
-  "last_node_id": 19,
-  "last_link_id": 14,
-  "nodes": [
-    {
-      "id": 19,
-      "type": "workflow>two_VAE_decode",
-      "pos": [
-        1368.800048828125,
-        768.7999877929688
-      ],
-      "size": [
-        418.1999816894531,
-        86
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": null
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "VAEDecode IMAGE",
-          "type": "IMAGE",
-          "links": null
-        }
-      ],
-      "properties": {}
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    },
-    "node_versions": {},
-    "ue_links": [],
-    "groupNodes": {
-      "two_VAE_decode": {
-        "nodes": [
-          {
-            "id": -1,
-            "type": "VAEDecode",
-            "pos": [
-              1368.800048828125,
-              768.7999877929688
-            ],
-            "size": [
-              210,
-              46
-            ],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "samples",
-                "type": "LATENT",
-                "link": null,
-                "localized_name": "samples"
-              },
-              {
-                "name": "vae",
-                "type": "VAE",
-                "link": null,
-                "localized_name": "vae"
-              }
-            ],
-            "outputs": [
-              {
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": null,
-                "localized_name": "IMAGE"
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEDecode"
-            },
-            "index": 0
-          },
-          {
-            "id": -1,
-            "type": "VAEDecode",
-            "pos": [
-              1368.800048828125,
-              873.7999877929688
-            ],
-            "size": [
-              210,
-              46
-            ],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "samples",
-                "type": "LATENT",
-                "link": null,
-                "localized_name": "samples"
-              },
-              {
-                "name": "vae",
-                "type": "VAE",
-                "link": null,
-                "localized_name": "vae"
-              }
-            ],
-            "outputs": [
-              {
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": null,
-                "localized_name": "IMAGE"
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEDecode"
-            },
-            "index": 1
-          }
-        ],
-        "links": [],
-        "external": [],
-        "config": {
-          "1": {
-            "input": {
-              "samples": {
-                "visible": false
-              },
-              "vae": {
-                "visible": false
-              }
-            }
-          }
-        }
-      }
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/remote_widget.json

@@ -1,48 +0,0 @@
-{
-  "last_node_id": 15,
-  "last_link_id": 10,
-  "nodes": [
-    {
-      "id": 15,
-      "type": "DevToolsRemoteWidgetNode",
-      "pos": [
-        495,
-        735
-      ],
-      "size": [
-        315,
-        58
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "STRING",
-          "type": "STRING",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "DevToolsRemoteWidgetNode"
-      },
-      "widgets_values": [
-        "v1-5-pruned-emaonly-fp16.safetensors"
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.8008869919566275,
-      "offset": [
-        538.9801226576359,
-        -55.24554581806672
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/widgets/boolean_widget.json

@@ -1,35 +0,0 @@
-{
-  "last_node_id": 11,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 11,
-      "type": "DevToolsNodeWithBooleanInput",
-      "pos": [
-        0,
-        30
-      ],
-      "size": [
-        315,
-        58
-      ],
-      "flags": {
-        "collapsed": false
-      },
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "DevToolsNodeWithBooleanInput"
-      },
-      "widgets_values": [
-        false
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "version": 0.4
-}

browser_tests/dialog.spec.ts

@@ -1,4 +1,4 @@
-import { Locator, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import { Keybinding } from '../src/types/keyBindingTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
@@ -66,71 +66,9 @@ test.describe('Missing models warning', () => {
     }, comfyPage.url)
   })
 
-  test('Should display a warning when missing models are found', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('missing_models')
-
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
-
-    const downloadButton = missingModelsWarning.getByLabel('Download')
-    await expect(downloadButton).toBeVisible()
-  })
-
-  test('Should not display a warning when no missing models are found', async ({
-    comfyPage
-  }) => {
-    const modelFoldersRes = {
-      status: 200,
-      body: JSON.stringify([
-        {
-          name: 'clip',
-          folders: ['ComfyUI/models/clip']
-        }
-      ])
-    }
-    comfyPage.page.route(
-      '**/api/experiment/models',
-      (route) => route.fulfill(modelFoldersRes),
-      { times: 1 }
-    )
-
-    // Reload page to trigger indexing of model folders
-    await comfyPage.setup()
-
-    const clipModelsRes = {
-      status: 200,
-      body: JSON.stringify([
-        {
-          name: 'fake_model.safetensors',
-          pathIndex: 0
-        }
-      ])
-    }
-    comfyPage.page.route(
-      '**/api/experiment/models/clip',
-      (route) => route.fulfill(clipModelsRes),
-      { times: 1 }
-    )
-
-    await comfyPage.loadWorkflow('missing_models')
-
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).not.toBeVisible()
-  })
-
-  test('should show on tutorial workflow', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
-    await comfyPage.setup({ clearStorage: true })
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
-    expect(await comfyPage.getSetting('Comfy.TutorialCompleted')).toBe(true)
-  })
-
   // Flaky test after parallelization
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
-  test.skip('Should download missing model when clicking download button', async ({
+  test.skip('Should display a warning when missing models are found', async ({
     comfyPage
   }) => {
     // The fake_model.safetensors is served by
@@ -148,49 +86,6 @@ test.describe('Missing models warning', () => {
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
-
-  test.describe('Do not show again checkbox', () => {
-    let checkbox: Locator
-    let closeButton: Locator
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting(
-        'Comfy.Workflow.ShowMissingModelsWarning',
-        true
-      )
-      await comfyPage.loadWorkflow('missing_models')
-
-      checkbox = comfyPage.page.getByLabel("Don't show this again")
-      closeButton = comfyPage.page.getByLabel('Close')
-    })
-
-    test('Should disable warning dialog when checkbox is checked', async ({
-      comfyPage
-    }) => {
-      await checkbox.click()
-      const changeSettingPromise = comfyPage.page.waitForRequest(
-        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
-      )
-      await closeButton.click()
-      await changeSettingPromise
-
-      const settingValue = await comfyPage.getSetting(
-        'Comfy.Workflow.ShowMissingModelsWarning'
-      )
-      expect(settingValue).toBe(false)
-    })
-
-    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
-      comfyPage
-    }) => {
-      await closeButton.click()
-
-      const settingValue = await comfyPage.getSetting(
-        'Comfy.Workflow.ShowMissingModelsWarning'
-      )
-      expect(settingValue).toBe(true)
-    })
-  })
 })
 
 test.describe('Settings', () => {
@@ -253,7 +148,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('New Blank Workflow')
+      .getByLabel('Comfy.NewBlankWorkflow')
       .getByLabel('Save')
     await saveButton.click()
 
@@ -270,37 +165,3 @@ test.describe('Settings', () => {
     expect(request.postData()).toContain(JSON.stringify(expectedSetting))
   })
 })
-
-test.describe('Feedback dialog', () => {
-  test('Should open from topmenu help command', async ({ comfyPage }) => {
-    // Open feedback dialog from top menu
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
-
-    // Verify feedback dialog content is visible
-    const feedbackHeader = comfyPage.page.getByRole('heading', {
-      name: 'Feedback'
-    })
-    await expect(feedbackHeader).toBeVisible()
-  })
-
-  test('Should close when close button clicked', async ({ comfyPage }) => {
-    // Open feedback dialog
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
-
-    const feedbackHeader = comfyPage.page.getByRole('heading', {
-      name: 'Feedback'
-    })
-
-    // Close feedback dialog
-    await comfyPage.page
-      .getByLabel('', { exact: true })
-      .getByLabel('Close')
-      .click()
-    await feedbackHeader.waitFor({ state: 'hidden' })
-
-    // Verify dialog is closed
-    await expect(feedbackHeader).not.toBeVisible()
-  })
-})

browser_tests/domWidget.spec.ts

@@ -1,27 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-test.describe('DOM Widget', () => {
-  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('collapsed_multiline')
-
-    expect(comfyPage.page.locator('.comfy-multiline-input')).not.toBeVisible()
-  })
-
-  test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
-    const multilineTextAreas = comfyPage.page.locator('.comfy-multiline-input')
-    const firstMultiline = multilineTextAreas.first()
-    const lastMultiline = multilineTextAreas.last()
-
-    await expect(firstMultiline).toBeVisible()
-    await expect(lastMultiline).toBeVisible()
-
-    const nodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
-    for (const node of nodes) {
-      await node.click('collapse')
-    }
-    await expect(firstMultiline).not.toBeVisible()
-    await expect(lastMultiline).not.toBeVisible()
-  })
-})

browser_tests/fixtures/ComfyPage.ts

@@ -904,9 +904,7 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
         'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
         // Disable tooltips by default to avoid flakiness.
         'Comfy.EnableTooltips': false,
-        'Comfy.userId': userId,
-        // Set tutorial completed to true to avoid loading the tutorial workflow.
-        'Comfy.TutorialCompleted': true
+        'Comfy.userId': userId
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/components/SidebarTab.ts

@@ -194,10 +194,6 @@ export class QueueSidebarTab extends SidebarTab {
     return this.root.locator('.no-results-placeholder')
   }
 
-  get galleryImage() {
-    return this.page.locator('.galleria-image')
-  }
-
   private getToggleExpandButton(isExpanded: boolean) {
     const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
     return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
@@ -260,24 +256,14 @@ export class QueueSidebarTab extends SidebarTab {
 
   async openTaskPreview(taskIndex: number) {
     const previewButton = this.getTaskPreviewButton(taskIndex)
+    await previewButton.hover()
     await previewButton.click()
-    return this.galleryImage.waitFor({ state: 'visible' })
+    return this.getGalleryImage(taskIndex).waitFor({ state: 'visible' })
   }
 
-  getGalleryImage(imageFilename: string) {
-    return this.galleryImage.and(this.page.getByAltText(imageFilename))
-  }
-
-  getTaskImage(imageFilename: string) {
-    return this.tasks.getByAltText(imageFilename)
-  }
-
-  /** Trigger the queue store and tasks to update */
-  async triggerTasksUpdate() {
-    await this.page.evaluate(() => {
-      window['app']['api'].dispatchCustomEvent('status', {
-        exec_info: { queue_remaining: 0 }
-      })
-    })
+  getGalleryImage(galleryItemIndex: number) {
+    // Aria labels of Galleria items are 1-based indices
+    const galleryLabel = `${galleryItemIndex + 1}`
+    return this.page.getByLabel(galleryLabel).locator('.galleria-image')
   }
 }

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -83,12 +83,6 @@ export class NodeWidgetReference {
       y: pos[1]
     }
   }
-
-  async click() {
-    await this.node.comfyPage.canvas.click({
-      position: await this.getPosition()
-    })
-  }
 }
 
 export class NodeReference {

browser_tests/fixtures/utils/taskHistory.ts

@@ -132,12 +132,11 @@ export default class TaskHistory {
   private addTask(task: HistoryTaskItem) {
     setPromptId(task)
     setQueueIndex(task)
-    this.tasks.unshift(task) // Tasks are added to the front of the queue
+    this.tasks.push(task)
   }
 
-  clearTasks(): this {
+  clearTasks() {
     this.tasks = []
-    return this
   }
 
   withTask(
@@ -156,7 +155,7 @@ export default class TaskHistory {
   /** Repeats the last task in the task history a specified number of times. */
   repeat(n: number): this {
     for (let i = 0; i < n; i++)
-      this.addTask(structuredClone(this.tasks.at(0)) as HistoryTaskItem)
+      this.addTask(structuredClone(this.tasks.at(-1)) as HistoryTaskItem)
     return this
   }
 }

browser_tests/groupNode.spec.ts

@@ -134,37 +134,6 @@ test.describe('Group Node', () => {
     expect(await manage2.getSelectedNodeType()).toBe('g2')
   })
 
-  test('Preserves hidden input configuration when containing duplicate node types', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('group_node_identical_nodes_hidden_inputs')
-    await comfyPage.nextFrame()
-
-    const groupNodeId = 19
-    const groupNodeName = 'two_VAE_decode'
-
-    const totalInputCount = await comfyPage.page.evaluate((nodeName) => {
-      const {
-        extra: { groupNodes }
-      } = window['app'].graph
-      const { nodes } = groupNodes[nodeName]
-      return nodes.reduce((acc: number, node) => {
-        return acc + node.inputs.length
-      }, 0)
-    }, groupNodeName)
-
-    const visibleInputCount = await comfyPage.page.evaluate((id) => {
-      const node = window['app'].graph.getNodeById(id)
-      return node.inputs.length
-    }, groupNodeId)
-
-    // Verify there are 4 total inputs (2 VAE decode nodes with 2 inputs each)
-    expect(totalInputCount).toBe(4)
-
-    // Verify there are 2 visible inputs (2 have been hidden in config)
-    expect(visibleInputCount).toBe(2)
-  })
-
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {

browser_tests/menu.spec.ts

@@ -1,6 +1,9 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
 
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture } from './fixtures/ComfyPage'
+import { webSocketFixture } from './fixtures/ws'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 test.describe('Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -707,36 +710,6 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
     })
-
-    test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
-      await comfyPage.setupWorkflowsDirectory({
-        'workflow1.json': 'default.json'
-      })
-      await comfyPage.setup()
-      await comfyPage.menu.workflowsTab.open()
-
-      const nodeCount = await comfyPage.getGraphNodesCount()
-
-      // Get the bounding box of the canvas element
-      const canvasBoundingBox = (await comfyPage.page
-        .locator('#graph-canvas')
-        .boundingBox())!
-
-      // Calculate the center position of the canvas
-      const targetPosition = {
-        x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
-        y: canvasBoundingBox.y + canvasBoundingBox.height / 2
-      }
-
-      await comfyPage.page.dragAndDrop(
-        '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
-        '#graph-canvas',
-        { targetPosition }
-      )
-      // Wait for the workflow to be inserted
-      await comfyPage.page.waitForTimeout(200)
-      expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
-    })
   })
 
   test.describe('Workflows topbar tabs', () => {
@@ -975,61 +948,66 @@ test.describe.skip('Queue sidebar', () => {
   })
 
   test.describe('Gallery', () => {
-    const firstImage = 'example.webp'
-    const secondImage = 'image32x32.webp'
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage
         .setupHistory()
-        .withTask([secondImage])
-        .withTask([firstImage])
+        .withTask(['example.webp'])
+        .repeat(1)
         .setupRoutes()
       await comfyPage.menu.queueTab.open()
       await comfyPage.menu.queueTab.waitForTasks()
-      await comfyPage.menu.queueTab.openTaskPreview(0)
     })
 
     test('displays gallery image after opening task preview', async ({
       comfyPage
     }) => {
-      await comfyPage.nextFrame()
-      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+      await comfyPage.menu.queueTab.openTaskPreview(0)
+      expect(comfyPage.menu.queueTab.getGalleryImage(0)).toBeVisible()
     })
 
-    test('maintains active gallery item when new tasks are added', async ({
-      comfyPage
+    test('should maintain active gallery item when new tasks are added', async ({
+      comfyPage,
+      ws
     }) => {
+      const initialIndex = 0
+      await comfyPage.menu.queueTab.openTaskPreview(initialIndex)
+
       // Add a new task while the gallery is still open
-      const newImage = 'image64x64.webp'
-      comfyPage.setupHistory().withTask([newImage])
-      await comfyPage.menu.queueTab.triggerTasksUpdate()
-      await comfyPage.page.waitForTimeout(500)
-      const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
-      await newTask.waitFor({ state: 'visible' })
-      // The active gallery item should still be the initial image
-      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+      comfyPage.setupHistory().withTask(['example.webp'])
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: { exec_info: { queue_remaining: 0 } }
+        }
+      })
+      await comfyPage.menu.queueTab.waitForTasks()
+
+      // The index of all tasks increments when a new task is prepended
+      const expectIndex = initialIndex + 1
+      expect(comfyPage.menu.queueTab.getGalleryImage(expectIndex)).toBeVisible()
     })
 
     test.describe('Gallery navigation', () => {
       const paths: {
         description: string
         path: ('Right' | 'Left')[]
-        end: string
+        expectIndex: number
       }[] = [
-        { description: 'Right', path: ['Right'], end: secondImage },
-        { description: 'Left', path: ['Right', 'Left'], end: firstImage },
-        { description: 'Left wrap', path: ['Left'], end: secondImage },
-        { description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
+        { description: 'Right', path: ['Right'], expectIndex: 1 },
+        { description: 'Left', path: ['Right', 'Left'], expectIndex: 0 },
+        { description: 'Right wrap', path: ['Right', 'Right'], expectIndex: 0 },
+        { description: 'Left wrap', path: ['Left'], expectIndex: 1 }
       ]
 
-      paths.forEach(({ description, path, end }) => {
+      paths.forEach(({ description, path, expectIndex }) => {
         test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
+          await comfyPage.menu.queueTab.openTaskPreview(0)
           for (const direction of path)
-            await comfyPage.page.keyboard.press(`Arrow${direction}`, {
-              delay: 256
-            })
-          await comfyPage.nextFrame()
-          expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
+            await comfyPage.page.keyboard.press(`Arrow${direction}`)
+
+          expect(
+            comfyPage.menu.queueTab.getGalleryImage(expectIndex)
+          ).toBeVisible()
         })
       })
     })