await toolbox commands added by extensions

Co-authored-by: huchenlei <20929282+huchenlei@users.noreply.github.com>

.env_example

@@ -1,4 +1,5 @@
 # Local development playwright target
+# Note: Don't add a trailing / after the port
 PLAYWRIGHT_TEST_URL=http://localhost:5173
 # PLAYWRIGHT_TEST_URL=http://localhost:8188
 

.github/workflows/test-ui.yaml

@@ -30,7 +30,7 @@ jobs:
         with:
           repository: 'Comfy-Org/ComfyUI_devtools'
           path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: '080e6d4af809a46852d1c4b7ed85f06e8a3a72be'
+          ref: '49c8220be49120dbaff85f32813d854d6dff2d05'
 
       - uses: actions/setup-node@v4
         with:

.i18nrc.cjs

@@ -9,8 +9,8 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, controlnet, lora.
+  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr', 'es'],
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   `

browser_tests/README.md

@@ -9,15 +9,26 @@ If `TEST_COMFYUI_DIR` in `.env` isn't set to your `(Comfy Path)/ComfyUI` directo
 
 ## Setup
 
-Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.
-ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing.
+### ComfyUI devtools
+Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.  
+_ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
 
+### Node.js & Playwright Prerequisites
 Ensure you have Node.js v20 or later installed. Then, set up the Chromium test driver:
-
 ```bash
 npx playwright install chromium --with-deps
 ```
 
+### Environment Variables
+Ensure the environment variables in `.env` are set correctly according to your setup. 
+
+The `.env` file will not exist until you create it yourself.
+
+A template with helpful information can be found in `.env_example`.
+
+### Multiple Tests
+If you are running Playwright tests in parallel or running the same test multiple times, the flag `--multi-user` must be added to the main ComfyUI process.
+
 ## Running Tests
 
 There are two ways to run the tests:
@@ -34,8 +45,6 @@ There are two ways to run the tests:
    ```
    This opens a user interface where you can select specific tests to run and inspect the test execution timeline.
 
-   To run the same test multiple times in Playwright's UI mode, you must launch the main ComfyUI process with the `--multi-user` flag.
-
    ![Playwright UI Mode](https://github.com/user-attachments/assets/6a1ebef0-90eb-4157-8694-f5ee94d03755)
 
 ## Screenshot Expectations

browser_tests/assets/bad_link.json

@@ -0,0 +1,126 @@
+{
+  "id": "51b9b184-770d-40ac-a478-8cc31667ff23",
+  "revision": 0,
+  "last_node_id": 5,
+  "last_link_id": 3,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "KSampler",
+      "pos": [
+        867.4669799804688,
+        347.22369384765625
+      ],
+      "size": [
+        315,
+        262
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "steps",
+          "type": "INT",
+          "widget": {
+            "name": "steps"
+          },
+          "link": 3
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 5,
+      "type": "PrimitiveInt",
+      "pos": [
+        443.0852355957031,
+        441.131591796875
+      ],
+      "size": [
+        315,
+        82
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "links": [
+            3
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveInt"
+      },
+      "widgets_values": [
+        0,
+        "randomize"
+      ]
+    }
+  ],
+  "links": [
+    [
+      3,
+      5,
+      0,
+      4,
+      5,
+      "INT"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.9487171000000016,
+      "offset": [
+        -325.57196748514497,
+        -168.13150517966463
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/default_input.json

@@ -0,0 +1,53 @@
+{
+  "id": "9bcb9451-8319-492a-88d4-fb711d8c3d25",
+  "revision": 0,
+  "last_node_id": 6,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 6,
+      "type": "DevToolsNodeWithDefaultInput",
+      "pos": [
+        8.39722728729248,
+        29.727279663085938
+      ],
+      "size": [
+        315,
+        82
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "float_input",
+          "shape": 7,
+          "type": "FLOAT",
+          "link": null
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithDefaultInput"
+      },
+      "widgets_values": [
+        0,
+        1,
+        0
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 2.1600300525920346,
+      "offset": [
+        63.071794466403446,
+        75.18055335968394
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/dynamically_added_input.json

@@ -0,0 +1,82 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 13,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [
+        0,
+        30
+      ],
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        } ,
+        {
+          "name": "dynamic_input",
+          "type": "FLOAT",
+          "link": null,
+          "_meta": "Dynamically added input via frontend JS logic"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/input_order_swap.json

@@ -0,0 +1,74 @@
+{
+  "id": "51b9b184-770d-40ac-a478-8cc31667ff23",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [904, 466],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "text",
+          "type": "STRING",
+          "widget": {
+            "name": "text"
+          },
+          "link": 1
+        },
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [""]
+    },
+    {
+      "id": 2,
+      "type": "PrimitiveString",
+      "pos": [556.8589477539062, 472.94342041015625],
+      "size": [315, 58],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [1]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveString"
+      },
+      "widgets_values": ["foo"]
+    }
+  ],
+  "links": [[1, 2, 0, 1, 0, "STRING"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.7715610000000013,
+      "offset": [-388.521484375, -162.31336975097656]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing_nodes_converted_widget.json

@@ -51,7 +51,10 @@
         0.85,
         false,
         false,
-        ""
+        "",
+        {
+          "foo": "bar"
+        }
       ]
     }
   ],

browser_tests/assets/primitive/static_primitive_unconnected.json

@@ -0,0 +1,104 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": {
+        "0": 304.3653259277344,
+        "1": 42.15586471557617
+      },
+      "size": [
+        315,
+        262
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveInt",
+      "pos": {
+        "0": 14,
+        "1": 43
+      },
+      "size": [
+        203.1999969482422,
+        40.368401303242536
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "value",
+          "type": "INT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Int"
+      },
+      "widgets_values": [10]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -214,6 +214,10 @@ export class ComfyPage {
         `Failed to setup workflows directory: ${await resp.text()}`
       )
     }
+
+    await this.page.evaluate(async () => {
+      await window['app'].extensionManager.workflow.syncWorkflows()
+    })
   }
 
   async setupUser(username: string) {
@@ -408,7 +412,7 @@ export class ComfyPage {
   }
 
   async getVisibleToastCount() {
-    return await this.page.locator('.p-toast:visible').count()
+    return await this.page.locator('.p-toast-message:visible').count()
   }
 
   async clickTextEncodeNode1() {
@@ -478,6 +482,7 @@ export class ComfyPage {
       if (fileName.endsWith('.webp')) return 'image/webp'
       if (fileName.endsWith('.webm')) return 'video/webm'
       if (fileName.endsWith('.json')) return 'application/json'
+      if (fileName.endsWith('.glb')) return 'model/gltf-binary'
       return 'application/octet-stream'
     }
 
@@ -584,11 +589,20 @@ export class ComfyPage {
     await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
   }
 
-  async connectEdge() {
-    await this.dragAndDrop(
-      this.loadCheckpointNodeClipOutputSlot,
-      this.clipTextEncodeNode1InputSlot
-    )
+  async connectEdge(
+    options: {
+      reverse?: boolean
+    } = {}
+  ) {
+    const { reverse = false } = options
+    const start = reverse
+      ? this.clipTextEncodeNode1InputSlot
+      : this.loadCheckpointNodeClipOutputSlot
+    const end = reverse
+      ? this.loadCheckpointNodeClipOutputSlot
+      : this.clipTextEncodeNode1InputSlot
+
+    await this.dragAndDrop(start, end)
   }
 
   async adjustWidgetValue() {

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -81,7 +81,7 @@ export class NodeWidgetReference {
         if (!widget) throw new Error(`Widget ${index} not found.`)
 
         const [x, y, w, h] = node.getBounding()
-        return window['app'].canvas.ds.convertOffsetToCanvas([
+        return window['app'].canvasPosToClientPos([
           x + w / 2,
           y + window['LiteGraph']['NODE_TITLE_HEIGHT'] + widget.last_y + 1
         ])
@@ -94,6 +94,36 @@ export class NodeWidgetReference {
     }
   }
 
+  /**
+   * @returns The position of the widget's associated socket
+   */
+  async getSocketPosition(): Promise<Position> {
+    const pos: [number, number] = await this.node.comfyPage.page.evaluate(
+      ([id, index]) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error(`Node ${id} not found.`)
+        const widget = node.widgets[index]
+        if (!widget) throw new Error(`Widget ${index} not found.`)
+
+        const slot = node.inputs.find(
+          (slot) => slot.widget?.name === widget.name
+        )
+        if (!slot) throw new Error(`Socket ${widget.name} not found.`)
+
+        const [x, y] = node.getBounding()
+        return window['app'].canvasPosToClientPos([
+          x + slot.pos[0],
+          y + slot.pos[1] + window['LiteGraph']['NODE_TITLE_HEIGHT']
+        ])
+      },
+      [this.node.id, this.index] as const
+    )
+    return {
+      x: pos[0],
+      y: pos[1]
+    }
+  }
+
   async click() {
     await this.node.comfyPage.canvas.click({
       position: await this.getPosition()
@@ -250,7 +280,7 @@ export class NodeReference {
     const targetWidget = await targetNode.getWidget(targetWidgetIndex)
     await this.comfyPage.dragAndDrop(
       await originSlot.getPosition(),
-      await targetWidget.getPosition()
+      await targetWidget.getSocketPosition()
     )
     return originSlot
   }

browser_tests/tests/commands.spec.ts

@@ -32,7 +32,7 @@ test.describe('Keybindings', () => {
     })
 
     await comfyPage.executeCommand('TestCommand')
-    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
+    expect(await comfyPage.getToastErrorCount()).toBe(1)
   })
 
   test('Should handle async command errors', async ({ comfyPage }) => {
@@ -45,6 +45,6 @@ test.describe('Keybindings', () => {
     })
 
     await comfyPage.executeCommand('TestCommand')
-    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
+    expect(await comfyPage.getToastErrorCount()).toBe(1)
   })
 })

browser_tests/tests/dialog.spec.ts

@@ -309,3 +309,35 @@ test.describe('Feedback dialog', () => {
     await expect(feedbackHeader).not.toBeVisible()
   })
 })
+
+test.describe('Error dialog', () => {
+  test('Should display an error dialog when graph configure fails', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(() => {
+      const graph = window['graph']
+      graph.configure = () => {
+        throw new Error('Error on configure!')
+      }
+    })
+
+    await comfyPage.loadWorkflow('default')
+
+    const errorDialog = comfyPage.page.locator('.comfy-error-report')
+    await expect(errorDialog).toBeVisible()
+  })
+
+  test('Should display an error dialog when prompt execution fails', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(async () => {
+      const app = window['app']
+      app.api.queuePrompt = () => {
+        throw new Error('Error on queuePrompt!')
+      }
+      await app.queuePrompt(0)
+    })
+    const errorDialog = comfyPage.page.locator('.comfy-error-report')
+    await expect(errorDialog).toBeVisible()
+  })
+})

browser_tests/tests/domWidget.spec.ts

@@ -5,8 +5,8 @@ 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()
+    const textareaWidget = comfyPage.page.locator('.comfy-multiline-input')
+    await expect(textareaWidget).not.toBeVisible()
   })
 
   test('Multiline textarea correctly collapses', async ({ comfyPage }) => {

browser_tests/tests/execution.spec.ts

@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Execution', () => {
+  test('Report error on unconnected slot', async ({ comfyPage }) => {
+    await comfyPage.disconnectEdge()
+    await comfyPage.clickEmptySpace()
+
+    await comfyPage.executeCommand('Comfy.QueuePrompt')
+    await expect(comfyPage.page.locator('.comfy-error-report')).toBeVisible()
+    await comfyPage.page.locator('.p-dialog-close-button').click()
+    await comfyPage.page.locator('.comfy-error-report').waitFor({
+      state: 'hidden'
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'execution-error-unconnected-slot.png'
+    )
+  })
+})

browser_tests/tests/graph.spec.ts

@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Graph', () => {
+  // Should be able to fix link input slot index after swap the input order
+  // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348
+  test('Fix link input slots', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('input_order_swap')
+    expect(
+      await comfyPage.page.evaluate(() => {
+        return window['app'].graph.links.get(1)?.target_slot
+      })
+    ).toBe(1)
+  })
+
+  test('Validate workflow links', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('bad_link')
+    await expect(comfyPage.getVisibleToastCount()).resolves.toBe(2)
+  })
+})

browser_tests/tests/interaction.spec.ts

@@ -91,15 +91,20 @@ test.describe('Node Interaction', () => {
       await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'no action')
     })
 
-    test('Can disconnect/connect edge', async ({ comfyPage }) => {
-      await comfyPage.disconnectEdge()
-      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
-      await comfyPage.connectEdge()
-      // Move mouse to empty area to avoid slot highlight.
-      await comfyPage.moveMouseToEmptyArea()
-      // Litegraph renders edge with a slight offset.
-      await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
-        maxDiffPixels: 50
+    // Test both directions of edge connection.
+    ;[{ reverse: false }, { reverse: true }].forEach(({ reverse }) => {
+      test(`Can disconnect/connect edge ${reverse ? 'reverse' : 'normal'}`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.disconnectEdge()
+        await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+        await comfyPage.connectEdge({ reverse })
+        // Move mouse to empty area to avoid slot highlight.
+        await comfyPage.moveMouseToEmptyArea()
+        // Litegraph renders edge with a slight offset.
+        await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+          maxDiffPixels: 50
+        })
       })
     })
 

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -8,7 +8,8 @@ test.describe('Load Workflow in Media', () => {
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
-    'workflow.webm'
+    'workflow.webm',
+    'workflow.glb'
   ].forEach(async (fileName) => {
     test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
       await comfyPage.dragAndDropFile(fileName)

browser_tests/tests/nodeDisplay.spec.ts

@@ -25,6 +25,11 @@ test.describe('Optional input', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('force_input.png')
   })
 
+  test('Default input', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default_input')
+    await expect(comfyPage.canvas).toHaveScreenshot('default_input.png')
+  })
+
   test('Only optional inputs', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('only_optional_inputs')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
@@ -67,4 +72,10 @@ test.describe('Optional input', () => {
       'missing_nodes_converted_widget.png'
     )
   })
+  test('dynamically added input', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('dynamically_added_input')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'dynamically_added_input.png'
+    )
+  })
 })

browser_tests/tests/primitiveNode.spec.ts

@@ -5,14 +5,14 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive_node')
+    await comfyPage.loadWorkflow('primitive/primitive_node')
     await expect(comfyPage.canvas).toHaveScreenshot('primitive_node.png')
   })
 
   // When link is dropped on widget, it should automatically convert the widget
   // to input.
   test('Can connect to widget', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive_node_unconnected')
+    await comfyPage.loadWorkflow('primitive/primitive_node_unconnected')
     const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
     const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2)
     // Connect the output of the primitive node to the input of first widget of the ksampler node
@@ -23,7 +23,9 @@ test.describe('Primitive Node', () => {
   })
 
   test('Can connect to dom widget', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive_node_unconnected_dom_widget')
+    await comfyPage.loadWorkflow(
+      'primitive/primitive_node_unconnected_dom_widget'
+    )
     const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
     const clipEncoderNode: NodeReference = await comfyPage.getNodeRefById(2)
     await primitiveNode.connectWidget(0, clipEncoderNode, 0)
@@ -31,4 +33,25 @@ test.describe('Primitive Node', () => {
       'primitive_node_connected_dom_widget.png'
     )
   })
+
+  test('Can connect to static primitive node', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('primitive/static_primitive_unconnected')
+    const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
+    const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2)
+    await primitiveNode.connectWidget(0, ksamplerNode, 0)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'static_primitive_connected.png'
+    )
+  })
+
+  test('Report missing nodes when connect to missing node', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow(
+      'primitive/primitive_node_connect_missing_node'
+    )
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    await expect(missingNodesWarning).toBeVisible()
+  })
 })

browser_tests/tests/remoteWidgets.spec.ts

@@ -321,6 +321,7 @@ test.describe('Remote COMBO Widget', () => {
 
       // Click refresh button
       await clickRefreshButton(comfyPage, nodeName)
+      await comfyPage.page.waitForTimeout(200)
 
       // Verify the selected value of the widget is the first option in the refreshed list
       const refreshedValue = await getWidgetValue(comfyPage, nodeName)

browser_tests/tests/rerouteNode.spec.ts

@@ -39,6 +39,10 @@ test.describe('Reroute Node', () => {
 })
 
 test.describe('LiteGraph Native Reroute Node', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
+  })
+
   test('loads from workflow', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('reroute/native_reroute')
     await expect(comfyPage.canvas).toHaveScreenshot('native_reroute.png')

browser_tests/tests/rightClickMenu.spec.ts

@@ -88,63 +88,6 @@ test.describe('Node Right Click Menu', () => {
     )
   })
 
-  test.describe('Widget conversion', () => {
-    const convertibleWidgetTypes = ['text', 'string', 'number', 'toggle']
-
-    test('Can convert widget to input', async ({ comfyPage }) => {
-      await comfyPage.rightClickEmptyLatentNode()
-      await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
-      await comfyPage.page.getByText('Convert Widget to Input').click()
-      await comfyPage.nextFrame()
-      // The submenu has an identical entry as the base menu - use last
-      await comfyPage.page.getByText('Convert width to input').last().click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'right-click-node-widget-converted.png'
-      )
-    })
-
-    test('Can convert widget without submenu', async ({ comfyPage }) => {
-      // Right-click the width widget
-      await comfyPage.rightClickEmptyLatentNode()
-      await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
-      await comfyPage.page.getByText('Convert width to input').click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'right-click-node-widget-converted.png'
-      )
-    })
-
-    convertibleWidgetTypes.forEach((widgetType) => {
-      test(`Can convert ${widgetType} widget to input`, async ({
-        comfyPage
-      }) => {
-        const nodeType = 'KSampler'
-
-        // To avoid needing multiple clicks, disable nesting of conversion options
-        await comfyPage.setSetting('Comfy.NodeInputConversionSubmenus', false)
-
-        // Add the widget using the node's `addWidget` method
-        await comfyPage.page.evaluate(
-          ([nodeType, widgetType]) => {
-            const node = window['app'].graph.nodes.find(
-              (n) => n.type === nodeType
-            )
-            node.addWidget(widgetType, widgetType, 'defaultValue', () => {}, {})
-          },
-          [nodeType, widgetType]
-        )
-
-        // Verify the context menu includes the conversion option
-        const node = (await comfyPage.getNodeRefsByType(nodeType))[0]
-        const menuOptions = await node.getContextMenuOptionNames()
-        expect(menuOptions.includes(`Convert ${widgetType} to input`)).toBe(
-          true
-        )
-      })
-    })
-  })
-
   test('Can pin and unpin', async ({ comfyPage }) => {
     await comfyPage.rightClickEmptyLatentNode()
     await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')

browser_tests/tests/selectionToolbox.spec.ts

@@ -30,6 +30,46 @@ test.describe('Selection Toolbox', () => {
     ).toBeVisible()
   })
 
+  test('shows at correct position when node is pasted', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.selectNodes(['KSampler'])
+    await comfyPage.ctrlC()
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.ctrlV()
+
+    const overlayContainer = comfyPage.page.locator(
+      '.selection-overlay-container'
+    )
+    await expect(overlayContainer).toBeVisible()
+
+    // Verify the absolute position
+    const boundingBox = await overlayContainer.boundingBox()
+    expect(boundingBox).not.toBeNull()
+    // 10px offset for the pasted node
+    expect(Math.round(boundingBox!.x)).toBeCloseTo(90, -1) // Allow ~10px tolerance
+    // 30px offset of node title height
+    expect(Math.round(boundingBox!.y)).toBeCloseTo(60, -1)
+  })
+
+  test('hide when select and drag happen at the same time', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    const nodePos = await node.getPosition()
+
+    // Drag on the title of the node
+    await comfyPage.page.mouse.move(nodePos.x + 100, nodePos.y - 15)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
+    await comfyPage.nextFrame()
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container')
+    ).not.toBeVisible()
+  })
+
   test('shows border only with multiple selections', async ({ comfyPage }) => {
     // Select single node
     await comfyPage.selectNodes(['KSampler'])
@@ -206,5 +246,24 @@ test.describe('Selection Toolbox', () => {
       )
       await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
     })
+
+    test('colorization via color picker can be undone', async ({
+      comfyPage
+    }) => {
+      // Select a node and color it
+      await comfyPage.selectNodes(['KSampler'])
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
+        .click()
+
+      // Undo the colorization
+      await comfyPage.page.keyboard.press('Control+Z')
+      await comfyPage.nextFrame()
+
+      // Node should be uncolored again
+      const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+      expect(await selectedNode.getProperty('color')).toBeUndefined()
+    })
   })
 })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -34,7 +34,6 @@ test.describe('Workflows sidebar', () => {
       'workflow1.json': 'default.json',
       'workflow2.json': 'default.json'
     })
-    await comfyPage.setup()
 
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
@@ -77,7 +76,6 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.setupWorkflowsDirectory({
       'workflow1.json': 'single_ksampler.json'
     })
-    await comfyPage.setup()
 
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
@@ -101,7 +99,6 @@ test.describe('Workflows sidebar', () => {
         'bar.json': 'default.json'
       }
     })
-    await comfyPage.setup()
 
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
@@ -230,6 +227,7 @@ test.describe('Workflows sidebar', () => {
 
     await topbar.saveWorkflowAs('workflow1.json')
     await comfyPage.confirmDialog.click('overwrite')
+    await comfyPage.page.waitForTimeout(200)
     // The old workflow1.json should be deleted and the new one should be saved.
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
       'workflow2.json',
@@ -323,7 +321,7 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.setupWorkflowsDirectory({
       'workflow1.json': 'default.json'
     })
-    await comfyPage.setup()
+
     await comfyPage.menu.workflowsTab.open()
 
     const nodeCount = await comfyPage.getGraphNodesCount()

browser_tests/tests/widget.spec.ts

@@ -192,3 +192,19 @@ test.describe('Load audio widget', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })
+
+test.describe('Unserialized widgets', () => {
+  test('Unserialized widgets values do not mark graph as modified', async ({
+    comfyPage
+  }) => {
+    // Add workflow w/ LoadImage node, which contains file upload and image preview widgets (not serialized)
+    await comfyPage.loadWorkflow('widgets/load_image_widget')
+
+    // Move mouse and click to trigger the `graphEqual` check in `changeTracker.ts`
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.page.mouse.click(10, 10)
+
+    // Expect the graph to not be modified
+    expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+  })
+})

global.d.ts

@@ -1,6 +1,8 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
 declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
+declare const __ALGOLIA_APP_ID__: string
+declare const __ALGOLIA_API_KEY__: string
 
 interface Navigator {
   /**

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.14.3",
+  "version": "1.16.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.14.3",
+      "version": "1.16.5",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.31",
-        "@comfyorg/litegraph": "^0.10.9",
+        "@comfyorg/litegraph": "^0.13.1",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -77,9 +77,8 @@
         "typescript-eslint": "^8.0.0",
         "unplugin-icons": "^0.19.3",
         "unplugin-vue-components": "^0.27.4",
-        "vite": "^5.4.14",
+        "vite": "^5.4.17",
         "vite-plugin-dts": "^4.3.0",
-        "vite-plugin-static-copy": "^1.0.5",
         "vitest": "^2.0.0",
         "vue-tsc": "^2.1.10",
         "zip-dir": "^2.0.0",
@@ -479,9 +478,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.10.9",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.10.9.tgz",
-      "integrity": "sha512-ubGozxdDIVNL/MYvfCAXgiaqBfIODtp0jZeN9uzWrdHwqUy9ZkLt/7/q7G4nGpNcEoShbMu7EK4VPH3WRmNQ7A==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.13.1.tgz",
+      "integrity": "sha512-tAlAdeBpvBch5Wj7MghoJvJkGwdeHG3825LqDMkKynYVXfiMcrTtM+LWRkH58JlbEEocD+1fdWKLMZ+lJc9m0A==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -12560,9 +12559,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.4.14",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
-      "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
+      "version": "5.4.17",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.17.tgz",
+      "integrity": "sha512-5+VqZryDj4wgCs55o9Lp+p8GE78TLVg0lasCH5xFZ4jacZjtqZa6JUw9/p0WeAojaOfncSM6v77InkFPGnvPvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12723,24 +12722,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/vite-plugin-static-copy": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.6.tgz",
-      "integrity": "sha512-3uSvsMwDVFZRitqoWHj0t4137Kz7UynnJeq1EZlRW7e25h2068fyIZX4ORCCOAkfp1FklGxJNVJBkBOD+PZIew==",
-      "dev": true,
-      "dependencies": {
-        "chokidar": "^3.5.3",
-        "fast-glob": "^3.2.11",
-        "fs-extra": "^11.1.0",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^5.0.0"
-      }
-    },
     "node_modules/vitest": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.14.3",
+  "version": "1.16.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -60,9 +60,8 @@
     "typescript-eslint": "^8.0.0",
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.14",
+    "vite": "^5.4.17",
     "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^2.0.0",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
@@ -72,7 +71,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.31",
-    "@comfyorg/litegraph": "^0.10.9",
+    "@comfyorg/litegraph": "^0.13.1",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/assets/css/style.css

@@ -398,6 +398,7 @@ button.comfy-queue-btn {
 .graphdialog {
   min-height: 1em;
   background-color: var(--comfy-menu-bg);
+  z-index: 41; /* z-index is set to 41 here in order to appear over selection-overlay-container which should have a z-index of 40 */
 }
 
 .graphdialog .name {

src/components/BrowserTabTitle.vue

@@ -17,7 +17,9 @@ const TITLE_SUFFIX = ' - ComfyUI'
 
 const executionStore = useExecutionStore()
 const executionText = computed(() =>
-  executionStore.isIdle ? '' : `[${executionStore.executionProgress}%]`
+  executionStore.isIdle
+    ? ''
+    : `[${Math.round(executionStore.executionProgress * 100)}%]`
 )
 
 const settingStore = useSettingStore()
@@ -41,7 +43,7 @@ const workflowNameText = computed(() => {
 
 const nodeExecutionTitle = computed(() =>
   executionStore.executingNode && executionStore.executingNodeProgress
-    ? `${executionText.value}[${executionStore.executingNodeProgress}%] ${executionStore.executingNode.type}`
+    ? `${executionText.value}[${Math.round(executionStore.executingNodeProgress * 100)}%] ${executionStore.executingNode.type}`
     : ''
 )
 

src/components/actionbar/BatchCountEdit.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="batch-count"
-    :class="props.class"
     v-tooltip.bottom="{
       value: $t('menu.batchCount'),
       showDelay: 600
@@ -41,14 +40,6 @@ import { computed } from 'vue'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 
-interface Props {
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: ''
-})
-
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)
 const minQueueCount = 1

src/components/actionbar/ComfyQueueButton.vue

@@ -47,7 +47,7 @@
         :disabled="!executingPrompt"
         text
         :aria-label="$t('menu.interrupt')"
-        @click="() => commandStore.execute('Comfy.Interrupt')"
+        @click="async () => await commandStore.execute('Comfy.Interrupt')"
       >
       </Button>
       <Button
@@ -61,9 +61,9 @@
         text
         :aria-label="$t('sideToolbar.queueTab.clearPendingTasks')"
         @click="
-          () => {
+          async () => {
             if (queueCountStore.count.value > 1) {
-              commandStore.execute('Comfy.ClearPendingTasks')
+              await commandStore.execute('Comfy.ClearPendingTasks')
             }
             queueMode = 'disabled'
           }
@@ -135,12 +135,12 @@ const hasPendingTasks = computed(
 )
 
 const commandStore = useCommandStore()
-const queuePrompt = (e: Event) => {
+const queuePrompt = async (e: Event) => {
   const commandId =
     'shiftKey' in e && e.shiftKey
       ? 'Comfy.QueuePromptFront'
       : 'Comfy.QueuePrompt'
-  commandStore.execute(commandId)
+  await commandStore.execute(commandId)
 }
 </script>
 

src/components/common/ComfyImage.vue

@@ -18,7 +18,7 @@
       :src="src"
       @error="handleImageError"
       class="comfy-image-main"
-      :class="[...classArray]"
+      :class="classProp"
       :alt="alt"
     />
   </span>
@@ -29,37 +29,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    src: string
-    class?: string | string[] | object
-    contain: boolean
-    alt?: string
-  }>(),
-  {
-    contain: false,
-    alt: 'Image content'
-  }
-)
+const {
+  src,
+  class: classProp,
+  contain = false,
+  alt = 'Image content'
+} = defineProps<{
+  src: string
+  class?: any
+  contain?: boolean
+  alt?: string
+}>()
 
 const imageBroken = ref(false)
 const handleImageError = () => {
   imageBroken.value = true
 }
-
-const classArray = computed(() => {
-  if (Array.isArray(props.class)) {
-    return props.class
-  } else if (typeof props.class === 'string') {
-    return props.class.split(' ')
-  } else if (typeof props.class === 'object') {
-    // @ts-expect-error fixme ts strict error
-    return Object.keys(props.class).filter((key) => props.class[key])
-  }
-  return []
-})
 </script>
 
 <style scoped>

src/components/common/EditableText.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="editable-text">
-    <span v-if="!props.isEditing">
+    <span v-if="!isEditing">
       {{ modelValue }}
     </span>
     <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
@@ -27,17 +27,13 @@
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
 
-interface EditableTextProps {
+const { modelValue, isEditing = false } = defineProps<{
   modelValue: string
   isEditing?: boolean
-}
-
-const props = withDefaults(defineProps<EditableTextProps>(), {
-  isEditing: false
-})
+}>()
 
 const emit = defineEmits(['update:modelValue', 'edit'])
-const inputValue = ref<string>(props.modelValue)
+const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
 
 const blurInputElement = () => {
@@ -48,10 +44,10 @@ const finishEditing = () => {
   emit('edit', inputValue.value)
 }
 watch(
-  () => props.isEditing,
+  () => isEditing,
   (newVal) => {
     if (newVal) {
-      inputValue.value = props.modelValue
+      inputValue.value = modelValue
       nextTick(() => {
         if (!inputRef.value) return
         const fileName = inputValue.value.includes('.')

src/components/common/RefreshButton.vue

@@ -13,9 +13,9 @@
 <template>
   <Button
     class="relative p-button-icon-only"
-    :outlined="props.outlined"
-    :severity="props.severity"
-    :disabled="active || props.disabled"
+    :outlined="outlined"
+    :severity="severity"
+    :disabled="active || disabled"
     @click="(event) => $emit('refresh', event)"
   >
     <span
@@ -32,18 +32,17 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 
-import { VueSeverity } from '@/types/primeVueTypes'
+import { PrimeVueSeverity } from '@/types/primeVueTypes'
 
-// Properties
-interface Props {
-  outlined?: boolean
+const {
+  disabled,
+  outlined = true,
+  severity = 'secondary'
+} = defineProps<{
   disabled?: boolean
-  severity?: VueSeverity
-}
-const props = withDefaults(defineProps<Props>(), {
-  outlined: true,
-  severity: 'secondary'
-})
+  outlined?: boolean
+  severity?: PrimeVueSeverity
+}>()
 
 // Model
 const active = defineModel<boolean>({ required: true })

src/components/common/TextDivider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center" :class="props.class">
+  <div class="flex items-center">
     <span v-if="position === 'left'" class="mr-2 shrink-0">{{ text }}</span>
     <Divider :align="align" :type="type" :layout="layout" class="flex-grow" />
     <span v-if="position === 'right'" class="ml-2 shrink-0">{{ text }}</span>
@@ -9,19 +9,17 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 
-interface Props {
+const {
+  text,
+  position = 'left',
+  align = 'center',
+  type = 'solid',
+  layout = 'horizontal'
+} = defineProps<{
   text: string
-  class?: string
   position?: 'left' | 'right'
   align?: 'left' | 'center' | 'right' | 'top' | 'bottom'
   type?: 'solid' | 'dashed' | 'dotted'
   layout?: 'horizontal' | 'vertical'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  position: 'left',
-  align: 'center',
-  type: 'solid',
-  layout: 'horizontal'
-})
+}>()
 </script>

src/components/common/TreeExplorer.vue

@@ -170,32 +170,38 @@ const deleteCommand = async (node: RenderedTreeExplorerNode) => {
   await node.handleDelete?.()
   emit('nodeDelete', node)
 }
-// @ts-expect-error fixme ts strict error
 const menuItems = computed<MenuItem[]>(() =>
   [
     getAddFolderMenuItem(menuTargetNode.value),
     {
       label: t('g.rename'),
       icon: 'pi pi-file-edit',
-      // @ts-expect-error fixme ts strict error
-      command: () => renameCommand(menuTargetNode.value),
+      command: () => {
+        if (menuTargetNode.value) {
+          renameCommand(menuTargetNode.value)
+        }
+      },
       visible: menuTargetNode.value?.handleRename !== undefined
     },
     {
       label: t('g.delete'),
       icon: 'pi pi-trash',
-      // @ts-expect-error fixme ts strict error
-      command: () => deleteCommand(menuTargetNode.value),
+      command: () => {
+        if (menuTargetNode.value) {
+          deleteCommand(menuTargetNode.value)
+        }
+      },
       visible: menuTargetNode.value?.handleDelete !== undefined,
       isAsync: true // The delete command can be async
     },
     ...extraMenuItems.value
-  ].map((menuItem) => ({
+  ].map((menuItem: MenuItem) => ({
     ...menuItem,
-    // @ts-expect-error fixme ts strict error
-    command: wrapCommandWithErrorHandler(menuItem.command, {
-      isAsync: menuItem.isAsync ?? false
-    })
+    command: menuItem.command
+      ? wrapCommandWithErrorHandler(menuItem.command, {
+          isAsync: menuItem.isAsync ?? false
+        })
+      : undefined
   }))
 )
 
@@ -223,15 +229,15 @@ const wrapCommandWithErrorHandler = (
 }
 
 defineExpose({
-  renameCommand,
-  deleteCommand,
   /**
    * The command to add a folder to a node via the context menu
    * @param targetNodeKey - The key of the node where the folder will be added under
    */
   addFolderCommand: (targetNodeKey: string) => {
-    // @ts-expect-error fixme ts strict error
-    addFolderCommand(findNodeByKey(renderedRoot.value, targetNodeKey))
+    const targetNode = findNodeByKey(renderedRoot.value, targetNodeKey)
+    if (targetNode) {
+      addFolderCommand(targetNode)
+    }
   }
 })
 </script>

src/components/dialog/content/ErrorDialogContent.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="comfy-error-report flex flex-col gap-4">
+    <NoResultsPlaceholder
+      class="pb-0"
+      icon="pi pi-exclamation-circle"
+      :title="title"
+      :message="error.exceptionMessage"
+    />
+    <template v-if="error.extensionFile">
+      <span>{{ t('errorDialog.extensionFileHint') }}:</span>
+      <br />
+      <span class="font-bold">{{ error.extensionFile }}</span>
+    </template>
+
+    <div class="flex gap-2 justify-center">
+      <Button
+        v-show="!reportOpen"
+        text
+        :label="$t('g.showReport')"
+        @click="showReport"
+      />
+      <Button
+        v-show="!sendReportOpen"
+        text
+        :label="$t('issueReport.helpFix')"
+        @click="showSendReport"
+      />
+    </div>
+    <template v-if="reportOpen">
+      <Divider />
+      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
+        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
+      </ScrollPanel>
+      <Divider />
+    </template>
+    <ReportIssuePanel
+      v-if="sendReportOpen"
+      :title="$t('issueReport.submitErrorReport')"
+      :error-type="error.reportType ?? 'unknownError'"
+      :extra-fields="[stackTraceField]"
+      :tags="{
+        exceptionMessage: error.exceptionMessage,
+        nodeType: error.nodeType ?? 'UNKNOWN'
+      }"
+    />
+    <div class="flex gap-4 justify-end">
+      <FindIssueButton
+        :errorMessage="error.exceptionMessage"
+        :repoOwner="repoOwner"
+        :repoName="repoName"
+      />
+      <Button
+        v-if="reportOpen"
+        :label="$t('g.copyToClipboard')"
+        icon="pi pi-copy"
+        @click="copyReportToClipboard"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import ScrollPanel from 'primevue/scrollpanel'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { ReportField } from '@/types/issueReportTypes'
+import {
+  type ErrorReportData,
+  generateErrorReport
+} from '@/utils/errorReportUtil'
+
+import ReportIssuePanel from './error/ReportIssuePanel.vue'
+
+const { error } = defineProps<{
+  error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {
+    /**
+     * The type of error report to submit.
+     * @default 'unknownError'
+     */
+    reportType?: string
+    /**
+     * The file name of the extension that caused the error.
+     */
+    extensionFile?: string
+  }
+}>()
+
+const repoOwner = 'comfyanonymous'
+const repoName = 'ComfyUI'
+const reportContent = ref('')
+const reportOpen = ref(false)
+const showReport = () => {
+  reportOpen.value = true
+}
+const sendReportOpen = ref(false)
+const showSendReport = () => {
+  sendReportOpen.value = true
+}
+const toast = useToast()
+const { t } = useI18n()
+const systemStatsStore = useSystemStatsStore()
+
+const title = computed<string>(
+  () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
+)
+
+const stackTraceField = computed<ReportField>(() => {
+  return {
+    label: t('issueReport.stackTrace'),
+    value: 'StackTrace',
+    optIn: true,
+    getData: () => error.traceback
+  }
+})
+
+onMounted(async () => {
+  if (!systemStatsStore.systemStats) {
+    await systemStatsStore.fetchSystemStats()
+  }
+
+  try {
+    const [logs] = await Promise.all([api.getLogs()])
+
+    reportContent.value = generateErrorReport({
+      systemStats: systemStatsStore.systemStats!,
+      serverLogs: logs,
+      workflow: app.graph.serialize(),
+      exceptionType: error.exceptionType,
+      exceptionMessage: error.exceptionMessage,
+      traceback: error.traceback,
+      nodeId: error.nodeId,
+      nodeType: error.nodeType
+    })
+  } catch (error) {
+    console.error('Error fetching logs:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('toastMessages.failedToFetchLogs'),
+      life: 5000
+    })
+  }
+})
+
+const { copyToClipboard } = useCopyToClipboard()
+const copyReportToClipboard = async () => {
+  await copyToClipboard(reportContent.value)
+}
+</script>

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -1,196 +0,0 @@
-<template>
-  <NoResultsPlaceholder
-    icon="pi pi-exclamation-circle"
-    :title="props.error.node_type"
-    :message="props.error.exception_message"
-  />
-  <div class="comfy-error-report">
-    <div class="flex gap-2 justify-center">
-      <Button
-        v-show="!reportOpen"
-        text
-        :label="$t('g.showReport')"
-        @click="showReport"
-      />
-      <Button
-        v-show="!sendReportOpen"
-        text
-        :label="$t('issueReport.helpFix')"
-        @click="showSendReport"
-      />
-    </div>
-    <template v-if="reportOpen">
-      <Divider />
-      <ScrollPanel style="width: 100%; height: 400px; max-width: 80vw">
-        <pre class="wrapper-pre">{{ reportContent }}</pre>
-      </ScrollPanel>
-      <Divider />
-    </template>
-    <ReportIssuePanel
-      v-if="sendReportOpen"
-      :title="$t('issueReport.submitErrorReport')"
-      error-type="graphExecutionError"
-      :extra-fields="[stackTraceField]"
-      :tags="{
-        exceptionMessage: props.error.exception_message,
-        nodeType: props.error.node_type
-      }"
-    />
-    <div class="action-container">
-      <FindIssueButton
-        :errorMessage="props.error.exception_message"
-        :repoOwner="repoOwner"
-        :repoName="repoName"
-      />
-      <Button
-        v-if="reportOpen"
-        :label="$t('g.copyToClipboard')"
-        icon="pi pi-copy"
-        @click="copyReportToClipboard"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import ScrollPanel from 'primevue/scrollpanel'
-import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import type { ExecutionErrorWsMessage, SystemStats } from '@/schemas/apiSchema'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import type { ReportField } from '@/types/issueReportTypes'
-
-import ReportIssuePanel from './error/ReportIssuePanel.vue'
-
-const props = defineProps<{
-  error: ExecutionErrorWsMessage
-}>()
-
-const repoOwner = 'comfyanonymous'
-const repoName = 'ComfyUI'
-const reportContent = ref('')
-const reportOpen = ref(false)
-const showReport = () => {
-  reportOpen.value = true
-}
-const sendReportOpen = ref(false)
-const showSendReport = () => {
-  sendReportOpen.value = true
-}
-const toast = useToast()
-const { t } = useI18n()
-
-const stackTraceField = computed<ReportField>(() => {
-  return {
-    label: t('issueReport.stackTrace'),
-    value: 'StackTrace',
-    optIn: true,
-    getData: () => props.error.traceback?.join('\n')
-  }
-})
-
-onMounted(async () => {
-  try {
-    const [systemStats, logs] = await Promise.all([
-      api.getSystemStats(),
-      api.getLogs()
-    ])
-    generateReport(systemStats, logs)
-  } catch (error) {
-    console.error('Error fetching system stats or logs:', error)
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: 'Failed to fetch system information',
-      life: 5000
-    })
-  }
-})
-
-const generateReport = (systemStats: SystemStats, logs: string) => {
-  // The default JSON workflow has about 3000 characters.
-  const MAX_JSON_LENGTH = 20000
-  const workflowJSONString = JSON.stringify(app.graph.serialize())
-  const workflowText =
-    workflowJSONString.length > MAX_JSON_LENGTH
-      ? 'Workflow too large. Please manually upload the workflow from local file system.'
-      : workflowJSONString
-
-  reportContent.value = `
-# ComfyUI Error Report
-## Error Details
-- **Node ID:** ${props.error.node_id}
-- **Node Type:** ${props.error.node_type}
-- **Exception Type:** ${props.error.exception_type}
-- **Exception Message:** ${props.error.exception_message}
-## Stack Trace
-\`\`\`
-${props.error.traceback.join('\n')}
-\`\`\`
-## System Information
-- **ComfyUI Version:** ${systemStats.system.comfyui_version}
-- **Arguments:** ${systemStats.system.argv.join(' ')}
-- **OS:** ${systemStats.system.os}
-- **Python Version:** ${systemStats.system.python_version}
-- **Embedded Python:** ${systemStats.system.embedded_python}
-- **PyTorch Version:** ${systemStats.system.pytorch_version}
-## Devices
-${systemStats.devices
-  .map(
-    (device) => `
-- **Name:** ${device.name}
-  - **Type:** ${device.type}
-  - **VRAM Total:** ${device.vram_total}
-  - **VRAM Free:** ${device.vram_free}
-  - **Torch VRAM Total:** ${device.torch_vram_total}
-  - **Torch VRAM Free:** ${device.torch_vram_free}
-`
-  )
-  .join('\n')}
-## Logs
-\`\`\`
-${logs}
-\`\`\`
-## Attached Workflow
-Please make sure that workflow does not contain any sensitive information such as API keys or passwords.
-\`\`\`
-${workflowText}
-\`\`\`
-
-## Additional Context
-(Please add any additional context or steps to reproduce the error here)
-`
-}
-
-const { copyToClipboard } = useCopyToClipboard()
-const copyReportToClipboard = async () => {
-  await copyToClipboard(reportContent.value)
-}
-</script>
-
-<style scoped>
-.comfy-error-report {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.action-container {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-}
-
-.wrapper-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-</style>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -30,6 +30,9 @@
       </div>
     </template>
   </ListBox>
+  <div class="flex justify-end py-3">
+    <Button label="Open Manager" @click="openManager" size="small" outlined />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -38,7 +41,9 @@ import ListBox from 'primevue/listbox'
 import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { useDialogService } from '@/services/dialogService'
 import type { MissingNodeType } from '@/types/comfy'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
@@ -64,6 +69,12 @@ const uniqueNodes = computed(() => {
       return { label: node }
     })
 })
+
+const openManager = () => {
+  useDialogService().showManagerDialog({
+    initialTab: ManagerTab.Missing
+  })
+}
 </script>
 
 <style scoped>

src/components/dialog/content/SettingDialogContent.vue

@@ -157,9 +157,7 @@ const categories = computed<SettingTreeNode[]>(() =>
   ].map((node) => ({
     ...node,
     translatedLabel: t(
-      // @ts-expect-error fixme ts strict error
       `settingsCategories.${normalizeI18nKey(node.label)}`,
-      // @ts-expect-error fixme ts strict error
       node.label
     )
   }))
@@ -177,16 +175,12 @@ onMounted(() => {
 })
 
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
-  // @ts-expect-error fixme ts strict error
-  return (
-    [...(category.children ?? [])]
-      // @ts-expect-error fixme ts strict error
-      .sort((a, b) => a.label.localeCompare(b.label))
-      .map((group) => ({
-        label: group.label,
-        settings: flattenTree<SettingParams>(group)
-      }))
-  )
+  return [...(category.children ?? [])]
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .map((group) => ({
+      label: group.label,
+      settings: flattenTree<SettingParams>(group)
+    }))
 }
 
 const searchQuery = ref<string>('')

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -91,8 +91,9 @@
 
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
+import { merge } from 'lodash'
 import Button from 'primevue/button'
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
@@ -106,21 +107,22 @@ import RegistrySearchBar from '@/components/dialog/content/manager/registrySearc
 import GridSkeleton from '@/components/dialog/content/manager/skeleton/GridSkeleton.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
 
-enum ManagerTab {
-  All = 'all',
-  Installed = 'installed',
-  Workflow = 'workflow',
-  Missing = 'missing'
-}
+const { initialTab = ManagerTab.All } = defineProps<{
+  initialTab: ManagerTab
+}>()
 
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
+const { getPackById } = useComfyRegistryStore()
 
 const GRID_STYLE = {
   display: 'grid',
@@ -147,9 +149,16 @@ const tabs = ref<TabItem[]>([
     id: ManagerTab.Missing,
     label: t('g.missing'),
     icon: 'pi-exclamation-circle'
+  },
+  {
+    id: ManagerTab.UpdateAvailable,
+    label: t('g.updateAvailable'),
+    icon: 'pi-sync'
   }
 ])
-const selectedTab = ref<TabItem>(tabs.value[0])
+const selectedTab = ref<TabItem>(
+  tabs.value.find((tab) => tab.id === initialTab) || tabs.value[0]
+)
 
 const {
   searchQuery,
@@ -175,90 +184,140 @@ const {
   startFetchInstalled,
   filterInstalledPack,
   installedPacks,
-  isLoading: isLoadingInstalled
+  isLoading: isLoadingInstalled,
+  isReady: installedPacksReady
 } = useInstalledPacks()
 
 const {
   startFetchWorkflowPacks,
   filterWorkflowPack,
   workflowPacks,
-  isLoading: isLoadingWorkflow
+  isLoading: isLoadingWorkflow,
+  isReady: workflowPacksReady
 } = useWorkflowPacks()
 
-const getInstalledResults = () => {
-  if (isEmptySearch.value) {
-    startFetchInstalled()
-    return installedPacks.value
-  } else {
-    return filterInstalledPack(searchResults.value)
-  }
-}
-
-const getInWorkflowResults = () => {
-  if (isEmptySearch.value) {
-    startFetchWorkflowPacks()
-    return workflowPacks.value
-  } else {
-    return filterWorkflowPack(searchResults.value)
-  }
-}
-
 const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 
-const setMissingPacks = () => {
-  displayPacks.value = filterMissingPacks(workflowPacks.value)
-}
+const isUpdateAvailableTab = computed(
+  () => selectedTab.value?.id === ManagerTab.UpdateAvailable
+)
+const isInstalledTab = computed(
+  () => selectedTab.value?.id === ManagerTab.Installed
+)
+const isMissingTab = computed(
+  () => selectedTab.value?.id === ManagerTab.Missing
+)
+const isWorkflowTab = computed(
+  () => selectedTab.value?.id === ManagerTab.Workflow
+)
+const isAllTab = computed(() => selectedTab.value?.id === ManagerTab.All)
 
-const getMissingPacks = () => {
-  if (isEmptySearch.value) {
-    startFetchWorkflowPacks()
-    whenever(() => workflowPacks.value.length, setMissingPacks, {
-      immediate: true,
-      once: true
-    })
-    return filterMissingPacks(workflowPacks.value)
-  } else {
-    return filterMissingPacks(filterWorkflowPack(searchResults.value))
-  }
+const isOutdatedPack = (pack: components['schemas']['Node']) => {
+  const { isUpdateAvailable } = usePackUpdateStatus(pack)
+  return isUpdateAvailable.value === true
 }
+const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
+  packs.filter(isOutdatedPack)
 
-const onTabChange = () => {
-  switch (selectedTab.value?.id) {
-    case ManagerTab.Installed:
-      displayPacks.value = getInstalledResults()
-      break
-    case ManagerTab.Workflow:
-      displayPacks.value = getInWorkflowResults()
-      break
-    case ManagerTab.Missing:
-      displayPacks.value = getMissingPacks()
-      break
-    default:
-      displayPacks.value = searchResults.value
-  }
-}
+watch(
+  [isUpdateAvailableTab, installedPacks],
+  () => {
+    if (!isUpdateAvailableTab.value) return
+
+    if (!isEmptySearch.value) {
+      displayPacks.value = filterOutdatedPacks(installedPacks.value)
+    } else if (!installedPacks.value.length) {
+      startFetchInstalled()
+    } else {
+      displayPacks.value = filterOutdatedPacks(installedPacks.value)
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  [isInstalledTab, installedPacks],
+  () => {
+    if (!isInstalledTab.value) return
+
+    if (!isEmptySearch.value) {
+      displayPacks.value = filterInstalledPack(searchResults.value)
+    } else if (
+      !installedPacks.value.length &&
+      !installedPacksReady.value &&
+      !isLoadingInstalled.value
+    ) {
+      startFetchInstalled()
+    } else {
+      displayPacks.value = installedPacks.value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  [isMissingTab, isWorkflowTab, workflowPacks, installedPacks],
+  () => {
+    if (!isWorkflowTab.value && !isMissingTab.value) return
+
+    if (!isEmptySearch.value) {
+      displayPacks.value = isMissingTab.value
+        ? filterMissingPacks(filterWorkflowPack(searchResults.value))
+        : filterWorkflowPack(searchResults.value)
+    } else if (
+      !workflowPacks.value.length &&
+      !isLoadingWorkflow.value &&
+      !workflowPacksReady.value
+    ) {
+      startFetchWorkflowPacks()
+      if (isMissingTab.value) {
+        startFetchInstalled()
+      }
+    } else {
+      displayPacks.value = isMissingTab.value
+        ? filterMissingPacks(workflowPacks.value)
+        : workflowPacks.value
+    }
+  },
+  { immediate: true }
+)
+
+watch([isAllTab, searchResults], () => {
+  if (!isAllTab.value) return
+  displayPacks.value = searchResults.value
+})
 
 const onResultsChange = () => {
   switch (selectedTab.value?.id) {
     case ManagerTab.Installed:
-      displayPacks.value = filterInstalledPack(searchResults.value)
+      displayPacks.value = isEmptySearch.value
+        ? installedPacks.value
+        : filterInstalledPack(searchResults.value)
       break
     case ManagerTab.Workflow:
-      displayPacks.value = filterWorkflowPack(searchResults.value)
+      displayPacks.value = isEmptySearch.value
+        ? workflowPacks.value
+        : filterWorkflowPack(searchResults.value)
       break
     case ManagerTab.Missing:
-      displayPacks.value = filterMissingPacks(
-        filterWorkflowPack(searchResults.value)
-      )
+      if (!isEmptySearch.value) {
+        displayPacks.value = filterMissingPacks(
+          filterWorkflowPack(searchResults.value)
+        )
+      }
+      break
+    case ManagerTab.UpdateAvailable:
+      displayPacks.value = isEmptySearch.value
+        ? filterOutdatedPacks(installedPacks.value)
+        : filterOutdatedPacks(searchResults.value)
       break
     default:
       displayPacks.value = searchResults.value
   }
 }
 
-whenever(selectedTab, onTabChange)
-watch(searchResults, onResultsChange, { flush: 'pre' })
+watch(searchResults, onResultsChange, { flush: 'post' })
 watch(() => comfyManagerStore.installedPacksIds, onResultsChange)
 
 const isLoading = computed(() => {
@@ -343,4 +402,24 @@ const handleGridContainerClick = (event: MouseEvent) => {
 }
 
 const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
+
+whenever(selectedNodePack, async () => {
+  // Cancel any in-flight requests from previously selected node pack
+  getPackById.cancel()
+
+  if (!selectedNodePack.value?.id) return
+
+  // If only a single node pack is selected, fetch full node pack info from registry
+  if (hasMultipleSelections.value) return
+  const data = await getPackById.call(selectedNodePack.value.id)
+
+  if (data?.id === selectedNodePack.value?.id) {
+    // If selected node hasn't changed since request, merge registry & Algolia data
+    selectedNodePacks.value = [merge(selectedNodePack.value, data)]
+  }
+})
+
+onUnmounted(() => {
+  getPackById.cancel()
+})
 </script>

src/components/dialog/content/manager/PackStatusMessage.vue

@@ -20,15 +20,16 @@ import Message from 'primevue/message'
 import { computed } from 'vue'
 
 import { components } from '@/types/comfyRegistryTypes'
-import { VueSeverity } from '@/types/primeVueTypes'
 
 type PackVersionStatus = components['schemas']['NodeVersionStatus']
 type PackStatus = components['schemas']['NodeStatus']
 type Status = PackVersionStatus | PackStatus
 
+type MessageProps = InstanceType<typeof Message>['$props']
+type MessageSeverity = MessageProps['severity']
 type StatusProps = {
   label: string
-  severity: VueSeverity
+  severity: MessageSeverity
 }
 
 const { statusType } = defineProps<{
@@ -46,7 +47,7 @@ const statusPropsMap: Record<Status, StatusProps> = {
   },
   NodeStatusBanned: {
     label: 'banned',
-    severity: 'danger'
+    severity: 'error'
   },
   NodeVersionStatusActive: {
     label: 'active',
@@ -62,11 +63,11 @@ const statusPropsMap: Record<Status, StatusProps> = {
   },
   NodeVersionStatusFlagged: {
     label: 'flagged',
-    severity: 'danger'
+    severity: 'error'
   },
   NodeVersionStatusBanned: {
     label: 'banned',
-    severity: 'danger'
+    severity: 'error'
   }
 }
 

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -39,6 +39,9 @@ import PackVersionSelectorPopover from '@/components/dialog/content/manager/Pack
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { SelectedVersion } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
+import { isSemVer } from '@/utils/formatUtil'
+
+const TRUNCATED_HASH_LENGTH = 7
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
@@ -50,11 +53,13 @@ const managerStore = useComfyManagerStore()
 
 const installedVersion = computed(() => {
   if (!nodePack.id) return SelectedVersion.NIGHTLY
-  return (
+  const version =
     managerStore.installedPacks[nodePack.id]?.ver ??
     nodePack.latest_version?.version ??
     SelectedVersion.NIGHTLY
-  )
+
+  // If Git hash, truncate to 7 characters
+  return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)
 })
 
 const toggleVersionSelector = (event: Event) => {

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -75,6 +75,7 @@ import {
   SelectedVersion
 } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
+import { isSemVer } from '@/utils/formatUtil'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
@@ -93,12 +94,26 @@ const isQueueing = ref(false)
 
 const selectedVersion = ref<string>(SelectedVersion.LATEST)
 onMounted(() => {
+  const initialVersion = getInitialSelectedVersion() ?? SelectedVersion.LATEST
   selectedVersion.value =
-    nodePack.publisher?.name === 'Unclaimed'
-      ? SelectedVersion.NIGHTLY
-      : nodePack.latest_version?.version ?? SelectedVersion.NIGHTLY
+    // Use NIGHTLY when version is a Git hash
+    isSemVer(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
 })
 
+const getInitialSelectedVersion = () => {
+  if (!nodePack.id) return
+
+  // If unclaimed, set selected version to nightly
+  if (nodePack.publisher?.name === 'Unclaimed') return SelectedVersion.NIGHTLY
+
+  // If node pack is installed, set selected version to the installed version
+  if (managerStore.isPackInstalled(nodePack.id))
+    return managerStore.getInstalledPackVersion(nodePack.id)
+
+  // If node pack is not installed, set selected version to latest
+  return nodePack.latest_version?.version
+}
+
 const fetchVersions = async () => {
   if (!nodePack?.id) return []
   return (await registryService.getPackVersions(nodePack.id)) || []

src/components/dialog/content/manager/__tests__/PackVersionSelectorPopover.test.ts

@@ -43,7 +43,9 @@ vi.mock('@/stores/comfyManagerStore', () => ({
     installPack: {
       call: mockInstallPack,
       clear: vi.fn()
-    }
+    },
+    isPackInstalled: vi.fn(() => false),
+    getInstalledPackVersion: vi.fn(() => undefined)
   }))
 }))
 

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -97,10 +97,10 @@ import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
 const { nodePack, isSelected = false } = defineProps<{
   nodePack: components['schemas']['Node']
@@ -110,8 +110,8 @@ const { nodePack, isSelected = false } = defineProps<{
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 
-const { isPackInstalled, isPackEnabled, getInstalledPackVersion } =
-  useComfyManagerStore()
+const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
+const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
 
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
@@ -120,20 +120,6 @@ const isDisabled = computed(
 
 whenever(isInstalled, () => (isInstalling.value = false))
 
-const isUpdateAvailable = computed(() => {
-  if (!isInstalled.value) return false
-
-  const latestVersion = nodePack.latest_version?.version
-  if (!latestVersion) return false
-
-  const installedVersion = getInstalledPackVersion(nodePack.id ?? '')
-
-  // Don't attempt to show update available for nightly GitHub packs
-  if (installedVersion && !isSemVer(installedVersion)) return false
-
-  return compareVersions(latestVersion, installedVersion) > 0
-})
-
 // TODO: remove type assertion once comfy_nodes is added to node (pack) info type in backend
 const nodesCount = computed(() => (nodePack as any).comfy_nodes?.length)
 </script>

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -2,7 +2,7 @@
   <img
     :src="isImageError ? DEFAULT_ICON : imgSrc"
     :alt="nodePack.name + ' icon'"
-    class="object-contain rounded-lg"
+    class="object-contain rounded-lg max-h-72 max-w-72"
     :style="{ width: cssWidth, height: cssHeight }"
     @error="isImageError = true"
   />

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -17,6 +17,7 @@
       :pt="{
         header: 'px-0'
       }"
+      @rowDblclick="editKeybinding($event.data)"
     >
       <Column field="actions" header="">
         <template #body="slotProps">

src/components/dialog/content/setting/SettingItem.vue

@@ -6,6 +6,7 @@
     @update:formValue="updateSettingValue"
   >
     <template #name-prefix>
+      <Tag v-if="setting.id === 'Comfy.Locale'" class="pi pi-language" />
       <Tag v-if="setting.experimental" :value="$t('g.experimental')" />
       <Tag
         v-if="setting.deprecated"

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -15,15 +15,10 @@ import { computed } from 'vue'
 
 import { KeyComboImpl } from '@/stores/keybindingStore'
 
-const props = withDefaults(
-  defineProps<{
-    keyCombo: KeyComboImpl
-    isModified: boolean
-  }>(),
-  {
-    isModified: false
-  }
-)
+const { keyCombo, isModified = false } = defineProps<{
+  keyCombo: KeyComboImpl
+  isModified?: boolean
+}>()
 
-const keySequences = computed(() => props.keyCombo.getKeySequences())
+const keySequences = computed(() => keyCombo.getKeySequences())
 </script>

src/components/dialog/header/ManagerProgressHeader.vue

@@ -19,11 +19,15 @@
 <script setup lang="ts">
 import TabMenu from 'primevue/tabmenu'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useManagerProgressDialogStore } from '@/stores/comfyManagerStore'
 
 const progressDialogContent = useManagerProgressDialogStore()
 const activeTabIndex = ref(0)
-
-const tabs = [{ label: 'Installation Queue' }, { label: 'Failed (0)' }]
+const { t } = useI18n()
+const tabs = [
+  { label: t('manager.installationQueue') },
+  { label: t('manager.failed', { count: 0 }) }
+]
 </script>

src/components/graph/DomWidgets.vue

@@ -30,7 +30,6 @@ const widgets = computed(() =>
   )
 )
 
-const DEFAULT_MARGIN = 10
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
@@ -49,7 +48,7 @@ const updateWidgets = () => {
 
     widgetState.visible = visible
     if (visible) {
-      const margin = widget.options.margin ?? DEFAULT_MARGIN
+      const margin = widget.margin
       widgetState.pos = [node.pos[0] + margin, node.pos[1] + margin + widget.y]
       widgetState.size = [
         (widget.width ?? node.width) - margin * 2,

src/components/graph/GraphCanvas.vue

@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import type { LGraphNode } from '@comfyorg/litegraph'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -58,16 +59,19 @@ import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
+import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n } from '@/i18n'
-import { api } from '@/scripts/api'
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
@@ -80,6 +84,7 @@ const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
+const executionStore = useExecutionStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -158,6 +163,55 @@ watch(
   }
 )
 
+// Update the progress of the executing node
+watch(
+  () =>
+    [executionStore.executingNodeId, executionStore.executingNodeProgress] as [
+      NodeId | null,
+      number | null
+    ],
+  ([executingNodeId, executingNodeProgress]) => {
+    for (const node of comfyApp.graph.nodes) {
+      if (node.id == executingNodeId) {
+        node.progress = executingNodeProgress ?? undefined
+      } else {
+        node.progress = undefined
+      }
+    }
+  }
+)
+
+// Update node slot errors
+watch(
+  () => executionStore.lastNodeErrors,
+  (lastNodeErrors) => {
+    const removeSlotError = (node: LGraphNode) => {
+      for (const slot of node.inputs) {
+        delete slot.hasErrors
+      }
+      for (const slot of node.outputs) {
+        delete slot.hasErrors
+      }
+    }
+
+    for (const node of comfyApp.graph.nodes) {
+      removeSlotError(node)
+      const nodeErrors = lastNodeErrors?.[node.id]
+      if (!nodeErrors) continue
+      for (const error of nodeErrors.errors) {
+        if (error.extra_info && error.extra_info.input_name) {
+          const inputIndex = node.findInputSlot(error.extra_info.input_name)
+          if (inputIndex !== -1) {
+            node.inputs[inputIndex].hasErrors = true
+          }
+        }
+      }
+    }
+
+    comfyApp.canvas.draw(true, true)
+  }
+)
+
 const loadCustomNodesI18n = async () => {
   try {
     const i18nData = await api.getCustomNodesI18n()
@@ -180,6 +234,7 @@ onMounted(async () => {
   useContextMenuTranslation()
   useCopy()
   usePaste()
+  useWorkflowAutoSave()
 
   comfyApp.vueAppReady = true
 
@@ -188,7 +243,20 @@ onMounted(async () => {
   // some listeners of litegraph canvas.
   ChangeTracker.init(comfyApp)
   await loadCustomNodesI18n()
-  await settingStore.loadSettingValues()
+  try {
+    await settingStore.loadSettingValues()
+  } catch (error) {
+    if (error instanceof UnauthorizedError) {
+      console.log(
+        'Failed loading user settings, user unauthorized, cleaning local Comfy.userId'
+      )
+      localStorage.removeItem('Comfy.userId')
+      localStorage.removeItem('Comfy.userName')
+      window.location.reload()
+    } else {
+      throw error
+    }
+  }
   CORE_SETTINGS.forEach((setting) => {
     settingStore.addSetting(setting)
   })

src/components/graph/GraphCanvasMenu.vue

@@ -23,7 +23,7 @@
       icon="pi pi-expand"
       v-tooltip.left="t('graphCanvasMenu.fitView')"
       :aria-label="$t('graphCanvasMenu.fitView')"
-      @click="() => commandStore.execute('Comfy.Canvas.FitView')"
+      @click="async () => await commandStore.execute('Comfy.Canvas.FitView')"
     />
     <Button
       severity="secondary"
@@ -39,7 +39,7 @@
             (canvasStore.canvas?.read_only ? 'panMode' : 'selectMode')
         )
       "
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleLock')"
+      @click="async () => await commandStore.execute('Comfy.Canvas.ToggleLock')"
     >
       <template #icon>
         <i-material-symbols:pan-tool-outline
@@ -53,7 +53,10 @@
       :icon="linkHidden ? 'pi pi-eye-slash' : 'pi pi-eye'"
       v-tooltip.left="t('graphCanvasMenu.toggleLinkVisibility')"
       :aria-label="$t('graphCanvasMenu.toggleLinkVisibility')"
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
+      @click="
+        async () =>
+          await commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
+      "
       data-testid="toggle-link-visibility-button"
     />
   </ButtonGroup>

src/components/graph/SelectionOverlay.vue

@@ -52,8 +52,11 @@ watch(
   (canvas: LGraphCanvas | null) => {
     if (!canvas) return
 
-    canvas.onSelectionChange = useChainCallback(canvas.onSelectionChange, () =>
-      positionSelectionOverlay(canvas)
+    canvas.onSelectionChange = useChainCallback(
+      canvas.onSelectionChange,
+      // Wait for next frame as sometimes the selected items haven't been
+      // rendered yet, so the boundingRect is not available on them.
+      () => requestAnimationFrame(() => positionSelectionOverlay(canvas))
     )
   },
   { immediate: true }
@@ -88,7 +91,12 @@ watch(
         positionSelectionOverlay(canvasStore.canvas as LGraphCanvas)
       }, 100)
     } else {
-      visible.value = false
+      // Selection change update to visible state is delayed by a frame. Here
+      // we also delay a frame so that the order of events is correct when
+      // the initial selection and dragging happens at the same time.
+      requestAnimationFrame(() => {
+        visible.value = false
+      })
     }
   }
 )

src/components/graph/SelectionToolbox.vue

@@ -12,7 +12,8 @@
       severity="secondary"
       text
       @click="
-        () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+        async () =>
+          await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
       "
       data-testid="bypass-button"
       v-tooltip.top="{
@@ -29,7 +30,10 @@
       severity="secondary"
       text
       icon="pi pi-thumbtack"
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
+      @click="
+        async () =>
+          await commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')
+      "
       v-tooltip.top="{
         value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
         showDelay: 1000
@@ -39,7 +43,10 @@
       severity="danger"
       text
       icon="pi pi-trash"
-      @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
+      @click="
+        async () =>
+          await commandStore.execute('Comfy.Canvas.DeleteSelectedItems')
+      "
       v-tooltip.top="{
         value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
         showDelay: 1000
@@ -58,7 +65,7 @@
       severity="secondary"
       text
       :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
-      @click="() => commandStore.execute(command.id)"
+      @click="async () => await commandStore.execute(command.id)"
       v-tooltip.top="{
         value:
           st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -47,6 +47,7 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCanvasStore } from '@/stores/graphStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { getItemsColorOption } from '@/utils/litegraphUtil'
@@ -54,6 +55,7 @@ import { getItemsColorOption } from '@/utils/litegraphUtil'
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const colorPaletteStore = useColorPaletteStore()
+const workflowStore = useWorkflowStore()
 const isLightTheme = computed(
   () => colorPaletteStore.completedActivePalette.light_theme
 )
@@ -108,6 +110,7 @@ const applyColor = (colorOption: ColorOption | null) => {
   canvasStore.canvas?.setDirty(true, true)
   currentColorOption.value = canvasColorOption
   showColorPicker.value = false
+  workflowStore.activeWorkflow?.changeTracker.checkState()
 }
 
 const currentColorOption = ref<CanvasColorOption | null>(null)

src/components/graph/widgets/DomWidget.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { CSSProperties, computed, onMounted, ref, watch } from 'vue'
 
@@ -50,7 +49,9 @@ const style = computed<CSSProperties>(() => ({
   ...positionStyle.value,
   ...(enableDomClipping.value ? clippingStyle.value : {}),
   zIndex: widgetState.zIndex,
-  pointerEvents: widgetState.readonly ? 'none' : 'auto'
+  pointerEvents:
+    widgetState.readonly || widget.computedDisabled ? 'none' : 'auto',
+  opacity: widget.computedDisabled ? 0.5 : 1
 }))
 
 const canvasStore = useCanvasStore()
@@ -63,9 +64,9 @@ const updateDomClipping = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas || !widgetElement.value) return
 
-  const selectedNode = Object.values(
-    lgCanvas.selected_nodes ?? {}
-  )[0] as LGraphNode
+  const selectedNode = Object.values(lgCanvas.selected_nodes ?? {})[0]
+  if (!selectedNode) return
+
   const node = widget.node
   const isSelected = selectedNode === node
   const renderArea = selectedNode?.renderArea

src/components/load3d/Load3D.vue

@@ -7,7 +7,7 @@
     <Load3DScene
       ref="load3DSceneRef"
       :node="node"
-      :type="type"
+      :inputSpec="inputSpec"
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
       :lightIntensity="lightIntensity"
@@ -30,6 +30,7 @@
       @edgeThresholdChange="listenEdgeThresholdChange"
     />
     <Load3DControls
+      :inputSpec="inputSpec"
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
       :showPreview="showPreview"
@@ -42,7 +43,6 @@
       :hasBackgroundImage="hasBackgroundImage"
       :upDirection="upDirection"
       :materialMode="materialMode"
-      :isAnimation="false"
       :edgeThreshold="edgeThreshold"
       @updateBackgroundImage="handleBackgroundImageUpdate"
       @switchCamera="switchCamera"
@@ -54,12 +54,15 @@
       @updateUpDirection="handleUpdateUpDirection"
       @updateMaterialMode="handleUpdateMaterialMode"
       @updateEdgeThreshold="handleUpdateEdgeThreshold"
+      @uploadTexture="handleUploadTexture"
+      @exportModel="handleExportModel"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
@@ -72,7 +75,9 @@ import {
 } from '@/extensions/core/load3d/interfaces'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
+import { useToastStore } from '@/stores/toastStore'
 
+const { t } = useI18n()
 const { widget } = defineProps<{
   widget: ComponentWidget<string[]>
 }>()
@@ -153,6 +158,23 @@ const handleBackgroundImageUpdate = async (file: File | null) => {
   node.properties['Background Image'] = backgroundImage.value
 }
 
+const handleUploadTexture = async (file: File) => {
+  if (!load3DSceneRef.value?.load3d) {
+    useToastStore().addAlert(t('toastMessages.no3dScene'))
+    return
+  }
+
+  try {
+    const texturePath = await Load3dUtils.uploadFile(file)
+    await load3DSceneRef.value.load3d.applyTexture(texturePath)
+
+    node.properties['Texture'] = texturePath
+  } catch (error) {
+    console.error('Error applying texture:', error)
+    useToastStore().addAlert(t('toastMessages.failedToApplyTexture'))
+  }
+}
+
 const handleUpdateFOV = (value: number) => {
   fov.value = value
 
@@ -183,6 +205,24 @@ const handleUpdateMaterialMode = (value: MaterialMode) => {
   node.properties['Material Mode'] = value
 }
 
+const handleExportModel = async (format: string) => {
+  if (!load3DSceneRef.value?.load3d) {
+    useToastStore().addAlert(t('toastMessages.no3dSceneToExport'))
+    return
+  }
+
+  try {
+    await load3DSceneRef.value.load3d.exportModel(format)
+  } catch (error) {
+    console.error('Error exporting model:', error)
+    useToastStore().addAlert(
+      t('toastMessages.failedToExportModel', {
+        format: format.toUpperCase()
+      })
+    )
+  }
+}
+
 const listenMaterialModeChange = (mode: MaterialMode) => {
   materialMode.value = mode
 

src/components/load3d/Load3DAnimation.vue

@@ -7,7 +7,7 @@
     <Load3DAnimationScene
       ref="load3DAnimationSceneRef"
       :node="node"
-      :type="type"
+      :inputSpec="inputSpec"
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
       :lightIntensity="lightIntensity"
@@ -35,6 +35,7 @@
     />
     <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
       <Load3DControls
+        :inputSpec="inputSpec"
         :backgroundColor="backgroundColor"
         :showGrid="showGrid"
         :showPreview="showPreview"
@@ -47,7 +48,6 @@
         :hasBackgroundImage="hasBackgroundImage"
         :upDirection="upDirection"
         :materialMode="materialMode"
-        :isAnimation="true"
         @updateBackgroundImage="handleBackgroundImageUpdate"
         @switchCamera="switchCamera"
         @toggleGrid="toggleGrid"

src/components/load3d/Load3DAnimationScene.vue

@@ -1,7 +1,7 @@
 <template>
   <Load3DScene
     :node="node"
-    :type="type"
+    :inputSpec="inputSpec"
     :backgroundColor="backgroundColor"
     :showGrid="showGrid"
     :lightIntensity="lightIntensity"
@@ -29,14 +29,14 @@ import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import {
   CameraType,
-  Load3DAnimationNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const props = defineProps<{
   node: any
-  type: Load3DAnimationNodeType
+  inputSpec: CustomInputSpec
   backgroundColor: string
   showGrid: boolean
   lightIntensity: number

src/components/load3d/Load3DControls.vue

@@ -16,14 +16,14 @@
       >
         <div class="flex flex-col">
           <Button
-            v-for="(label, category) in categories"
+            v-for="category in availableCategories"
             :key="category"
             class="p-button-text w-full flex items-center justify-start"
             :class="{ 'bg-gray-600': activeCategory === category }"
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)"></i>
-            <span class="text-white">{{ t(label) }}</span>
+            <span class="text-white">{{ t(categoryLabels[category]) }}</span>
           </Button>
         </div>
       </div>
@@ -43,13 +43,14 @@
 
       <ModelControls
         v-if="activeCategory === 'model'"
+        :inputSpec="inputSpec"
         :upDirection="upDirection"
         :materialMode="materialMode"
-        :isAnimation="isAnimation"
         :edgeThreshold="edgeThreshold"
         @updateUpDirection="handleUpdateUpDirection"
         @updateMaterialMode="handleUpdateMaterialMode"
         @updateEdgeThreshold="handleUpdateEdgeThreshold"
+        @uploadTexture="handleUploadTexture"
         ref="modelControlsRef"
       />
 
@@ -70,6 +71,12 @@
         @updateLightIntensity="handleUpdateLightIntensity"
         ref="lightControlsRef"
       />
+
+      <ExportControls
+        v-if="activeCategory === 'export'"
+        @exportModel="handleExportModel"
+        ref="exportControlsRef"
+      />
     </div>
     <div v-if="showPreviewButton">
       <Button class="p-button-rounded p-button-text" @click="togglePreview">
@@ -89,9 +96,10 @@
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
+import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
@@ -101,10 +109,12 @@ import {
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const vTooltip = Tooltip
 
 const props = defineProps<{
+  inputSpec: CustomInputSpec
   backgroundColor: string
   showGrid: boolean
   showPreview: boolean
@@ -117,24 +127,34 @@ const props = defineProps<{
   hasBackgroundImage?: boolean
   upDirection: UpDirection
   materialMode: MaterialMode
-  isAnimation: boolean
   edgeThreshold?: number
 }>()
 
 const isMenuOpen = ref(false)
-const activeCategory = ref<'scene' | 'model' | 'camera' | 'light'>('scene')
-const categories = {
+const activeCategory = ref<string>('scene')
+const categoryLabels: Record<string, string> = {
   scene: 'load3d.scene',
   model: 'load3d.model',
   camera: 'load3d.camera',
-  light: 'load3d.light'
+  light: 'load3d.light',
+  export: 'load3d.export'
 }
 
+const availableCategories = computed(() => {
+  const baseCategories = ['scene', 'model', 'camera', 'light']
+
+  if (!props.inputSpec.isAnimation) {
+    return [...baseCategories, 'export']
+  }
+
+  return baseCategories
+})
+
 const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value
 }
 
-const selectCategory = (category: 'scene' | 'model' | 'camera' | 'light') => {
+const selectCategory = (category: string) => {
   activeCategory.value = category
   isMenuOpen.value = false
 }
@@ -144,7 +164,8 @@ const getCategoryIcon = (category: string) => {
     scene: 'pi pi-image',
     model: 'pi pi-box',
     camera: 'pi pi-camera',
-    light: 'pi pi-sun'
+    light: 'pi pi-sun',
+    export: 'pi pi-download'
   }
   // @ts-expect-error fixme ts strict error
   return `${icons[category]} text-white text-lg`
@@ -161,6 +182,8 @@ const emit = defineEmits<{
   (e: 'updateUpDirection', direction: UpDirection): void
   (e: 'updateMaterialMode', mode: MaterialMode): void
   (e: 'updateEdgeThreshold', value: number): void
+  (e: 'exportModel', format: string): void
+  (e: 'uploadTexture', file: File): void
 }>()
 
 const backgroundColor = ref(props.backgroundColor)
@@ -209,6 +232,10 @@ const handleUpdateEdgeThreshold = (value: number) => {
   emit('updateEdgeThreshold', value)
 }
 
+const handleUploadTexture = (file: File) => {
+  emit('uploadTexture', file)
+}
+
 const handleUpdateLightIntensity = (value: number) => {
   emit('updateLightIntensity', value)
 }
@@ -217,6 +244,10 @@ const handleUpdateFOV = (value: number) => {
   emit('updateFOV', value)
 }
 
+const handleExportModel = (format: string) => {
+  emit('exportModel', format)
+}
+
 const closeSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 

src/components/load3d/Load3DScene.vue

@@ -13,17 +13,16 @@ import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import {
   CameraType,
-  Load3DAnimationNodeType,
-  Load3DNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 
 const props = defineProps<{
   node: LGraphNode
-  type: Load3DNodeType | Load3DAnimationNodeType
+  inputSpec: CustomInputSpec
   backgroundColor: string
   showGrid: boolean
   lightIntensity: number
@@ -60,7 +59,16 @@ const eventConfig = {
   modelLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
   materialLoadingStart: () =>
     loadingOverlayRef.value?.startLoading(t('load3d.switchingMaterialMode')),
-  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading()
+  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
+  exportLoadingStart: (message: string) => {
+    loadingOverlayRef.value?.startLoading(message || t('load3d.exportingModel'))
+  },
+  exportLoadingEnd: () => {
+    loadingOverlayRef.value?.endLoading()
+  },
+  textureLoadingStart: () =>
+    loadingOverlayRef.value?.startLoading(t('load3d.applyingTexture')),
+  textureLoadingEnd: () => loadingOverlayRef.value?.endLoading()
 } as const
 
 watchEffect(() => {
@@ -135,7 +143,7 @@ onMounted(() => {
     node.value as LGraphNode,
     // @ts-expect-error fixme ts strict error
     container.value,
-    props.type
+    props.inputSpec
   )
   handleEvents('add')
 })

src/components/load3d/LoadingOverlay.vue

@@ -15,19 +15,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import { t } from '@/i18n'
 
 const modelLoading = ref(false)
 const loadingMessage = ref('')
 
-const startLoading = (message?: string) => {
-  modelLoading.value = true
+const startLoading = async (message?: string) => {
   loadingMessage.value = message || t('load3d.loadingModel')
+  modelLoading.value = true
+
+  await nextTick()
 }
 
-const endLoading = () => {
+const endLoading = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 100))
   modelLoading.value = false
 }
 

src/components/load3d/controls/ExportControls.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-col">
+    <div class="relative show-export-formats">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleExportFormats"
+      >
+        <i
+          class="pi pi-download text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.exportModel'),
+            showDelay: 300
+          }"
+        ></i>
+      </Button>
+      <div
+        v-show="showExportFormats"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="format in exportFormats"
+            :key="format.value"
+            class="p-button-text text-white"
+            @click="exportModel(format.value)"
+          >
+            {{ format.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import { t } from '@/i18n'
+
+const vTooltip = Tooltip
+
+const emit = defineEmits<{
+  (e: 'exportModel', format: string): void
+}>()
+
+const showExportFormats = ref(false)
+
+const exportFormats = [
+  { label: 'GLB', value: 'glb' },
+  { label: 'OBJ', value: 'obj' },
+  { label: 'STL', value: 'stl' }
+]
+
+const toggleExportFormats = () => {
+  showExportFormats.value = !showExportFormats.value
+}
+
+const exportModel = (format: string) => {
+  emit('exportModel', format)
+
+  showExportFormats.value = false
+}
+
+const closeExportFormatsList = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.show-export-formats')) {
+    showExportFormats.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeExportFormatsList)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeExportFormatsList)
+})
+</script>

src/components/load3d/controls/ModelControls.vue

@@ -58,6 +58,33 @@
         </div>
       </div>
     </div>
+
+    <div
+      v-if="
+        materialMode === 'original' &&
+        !props.inputSpec.isAnimation &&
+        !props.inputSpec.isPreview
+      "
+      class="relative show-texture-upload"
+    >
+      <Button class="p-button-rounded p-button-text" @click="openTextureUpload">
+        <i
+          class="pi pi-image text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.uploadTexture'),
+            showDelay: 300
+          }"
+        ></i>
+        <input
+          type="file"
+          ref="texturePickerRef"
+          accept="image/*"
+          @change="uploadTexture"
+          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+        />
+      </Button>
+    </div>
+
     <div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
       <Button
         class="p-button-rounded p-button-text"
@@ -100,13 +127,14 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const vTooltip = Tooltip
 
 const props = defineProps<{
+  inputSpec: CustomInputSpec
   upDirection: UpDirection
   materialMode: MaterialMode
-  isAnimation: boolean
   edgeThreshold?: number
 }>()
 
@@ -114,6 +142,7 @@ const emit = defineEmits<{
   (e: 'updateUpDirection', direction: UpDirection): void
   (e: 'updateMaterialMode', mode: MaterialMode): void
   (e: 'updateEdgeThreshold', value: number): void
+  (e: 'uploadTexture', file: File): void
 }>()
 
 const upDirection = ref(props.upDirection || 'original')
@@ -122,6 +151,7 @@ const edgeThreshold = ref(props.edgeThreshold || 85)
 const showUpDirection = ref(false)
 const showMaterialMode = ref(false)
 const showEdgeThreshold = ref(false)
+const texturePickerRef = ref<HTMLInputElement | null>(null)
 
 const upDirections: UpDirection[] = [
   'original',
@@ -141,7 +171,7 @@ const materialModes = computed(() => {
     //'depth' disable for now
   ]
 
-  if (!props.isAnimation) {
+  if (!props.inputSpec.isAnimation && !props.inputSpec.isPreview) {
     modes.push('lineart')
   }
 
@@ -204,7 +234,7 @@ const selectMaterialMode = (mode: MaterialMode) => {
 }
 
 const formatMaterialMode = (mode: MaterialMode) => {
-  return mode.charAt(0).toUpperCase() + mode.slice(1)
+  return t(`load3d.materialModes.${mode}`)
 }
 
 const toggleEdgeThreshold = () => {
@@ -217,6 +247,18 @@ const updateEdgeThreshold = () => {
   emit('updateEdgeThreshold', edgeThreshold.value)
 }
 
+const openTextureUpload = () => {
+  texturePickerRef.value?.click()
+}
+
+const uploadTexture = (event: Event) => {
+  const input = event.target as HTMLInputElement
+
+  if (input.files && input.files[0]) {
+    emit('uploadTexture', input.files[0])
+  }
+}
+
 const closeSceneSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement