1.39.11 (#8763 )

Patch version increment to 1.39.11 **Base branch:** `main` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8763-1-39-11-3036d73d365081458389fe558cd921ee) by [Unito](https://www.unito.io) Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
feat: deduplicate subgraph node IDs on workflow load (experimental) (#8762 )
2026-04-28 10:12:11 +00:00 · 2026-02-09 21:28:11 -08:00 · 2026-02-09 18:01:58 -08:00 · 2026-02-09 13:55:23 -08:00 · 2026-02-09 10:49:27 -08:00 · 2026-02-09 02:01:23 -08:00
56 changed files with 1719 additions and 327 deletions
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -59,7 +59,7 @@
    "function-no-unknown": [
      true,
      {
-        "ignoreFunctions": ["theme", "v-bind"]
+        "ignoreFunctions": ["theme", "v-bind", "from-folder", "from-json"]
      }
    ]
  },
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -201,7 +201,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`

-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Tailwind CSS icon classes (`icon-[comfy--template]`) are provided by `@iconify/tailwind4`, configured in `packages/design-system/src/css/style.css`. Custom icons are stored in `packages/design-system/src/icons/` and loaded via `from-folder` at build time.

 For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).

--- a/browser_tests/assets/subgraphs/subgraph-nested-duplicate-ids.json
+++ b/browser_tests/assets/subgraphs/subgraph-nested-duplicate-ids.json
@@ -0,0 +1,599 @@
+{
+  "id": "9a37f747-e96b-4304-9212-7abcaad7bdac",
+  "revision": 0,
+  "last_node_id": 5,
+  "last_link_id": 5,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "1e38d8ea-45e1-48a5-aa20-966584201867",
+      "pos": [788, 433.5],
+      "size": [210, 108],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "string_a",
+          "type": "STRING",
+          "widget": {
+            "name": "string_a"
+          },
+          "link": 4
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [5]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [["-1", "string_a"]]
+      },
+      "widgets_values": [""]
+    },
+    {
+      "id": 2,
+      "type": "PreviewAny",
+      "pos": [1135, 429],
+      "size": [250, 145.5],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 5
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": [null, null, false]
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveStringMultiline",
+      "pos": [456, 450],
+      "size": [225, 121.5],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [4]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveStringMultiline"
+      },
+      "widgets_values": ["Outer\n"]
+    }
+  ],
+  "links": [
+    [4, 1, 0, 5, 0, "STRING"],
+    [5, 5, 0, 2, 0, "STRING"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "1e38d8ea-45e1-48a5-aa20-966584201867",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 6,
+          "lastLinkId": 9,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [351, 432.5, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1315, 432.5, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "7bf3e1d4-0521-4b5c-92f5-47ca598b7eb4",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [1],
+            "localized_name": "string_a",
+            "pos": [451, 452.5]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "fbe975ba-d7c2-471e-a99a-a1e2c6ab466d",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "STRING",
+            "pos": [1335, 452.5]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 3,
+            "type": "StringConcatenate",
+            "pos": [815, 373],
+            "size": [347, 231],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 1
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 6,
+            "type": "9be42452-056b-4c99-9f9f-7381d11c4454",
+            "pos": [955, 775],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 7
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [9]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [["-1", "string_a"]]
+            },
+            "widgets_values": [""]
+          },
+          {
+            "id": 4,
+            "type": "PrimitiveStringMultiline",
+            "pos": [313, 685],
+            "size": [325, 109],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 1\n"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 2,
+            "origin_id": 4,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 6,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "9be42452-056b-4c99-9f9f-7381d11c4454",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 9,
+          "lastLinkId": 12,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [680, 774, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1320, 774, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "01c05c51-86b5-4bad-b32f-9c911683a13d",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [4],
+            "localized_name": "string_a",
+            "pos": [780, 794]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "a8bcf3bf-a66a-4c71-8d92-17a2a4d03686",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [12],
+            "localized_name": "STRING",
+            "pos": [1340, 794]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 5,
+            "type": "StringConcatenate",
+            "pos": [860, 719],
+            "size": [400, 200],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 4
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 7
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [11]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 6,
+            "type": "PrimitiveStringMultiline",
+            "pos": [401, 973],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 2\n"]
+          },
+          {
+            "id": 9,
+            "type": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+            "pos": [1046, 985],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 11
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [12]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [["-1", "string_a"]]
+            },
+            "widgets_values": [""]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 5,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": 5,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": 5,
+            "origin_slot": 0,
+            "target_id": 9,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 12,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 8,
+          "lastLinkId": 10,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [262, 1222, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1330, 1222, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "934a8baa-d79c-428c-8ec9-814ad437d7c7",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "string_a",
+            "pos": [362, 1242]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "4c3d243b-9ff6-4dcd-9dbf-e4ec8e1fc879",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [10],
+            "localized_name": "STRING",
+            "pos": [1350, 1242]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 7,
+            "type": "StringConcatenate",
+            "pos": [870, 1038],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 9
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [10]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 8,
+            "type": "PrimitiveStringMultiline",
+            "pos": [442, 1296],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [8]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 3\n"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 8,
+            "origin_id": 8,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 7,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-7, 144]
+    },
+    "frontendVersion": "1.38.13"
+  },
+  "version": 0.4
+}
--- a/browser_tests/tests/sidebar/workflows.spec.ts
+++ b/browser_tests/tests/sidebar/workflows.spec.ts
@@ -123,17 +123,14 @@ test.describe('Workflows sidebar', () => {
  test('Can save workflow as', async ({ comfyPage }) => {
    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
    await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      'workflow3.json'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json'])

    await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      'workflow3.json',
-      'workflow4.json'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
  })

  test('Exported workflow does not contain localized slot names', async ({
@@ -220,24 +217,22 @@ test.describe('Workflows sidebar', () => {
    await topbar.saveWorkflow('workflow1.json')
    await topbar.saveWorkflowAs('workflow2.json')
    await comfyPage.nextFrame()
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow1.json',
-      'workflow2.json'
-    ])
-    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
-      'workflow2.json'
-    )
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['workflow1.json', 'workflow2.json'])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
+      .toEqual('workflow2.json')

    await topbar.saveWorkflowAs('workflow1.json')
    await comfyPage.confirmDialog.click('overwrite')
    // The old workflow1.json should be deleted and the new one should be saved.
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow2.json',
-      'workflow1.json'
-    ])
-    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
-      'workflow1.json'
-    )
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['workflow2.json', 'workflow1.json'])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
+      .toEqual('workflow1.json')
  })

  test('Does not report warning when switching between opened workflows', async ({
--- a/browser_tests/tests/subgraph-duplicate-ids.spec.ts
+++ b/browser_tests/tests/subgraph-duplicate-ids.spec.ts
@@ -0,0 +1,107 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
+  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Graph.DeduplicateSubgraphNodeIds',
+      true
+    )
+  })
+
+  test('All node IDs are globally unique after loading', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const result = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      // TODO: Extract allGraphs accessor (root + subgraphs) into LGraph
+      // TODO: Extract allNodeIds accessor into LGraph
+      const allGraphs = [graph, ...graph.subgraphs.values()]
+      const allIds = allGraphs
+        .flatMap((g) => g._nodes)
+        .map((n) => n.id)
+        .filter((id): id is number => typeof id === 'number')
+
+      return { allIds, uniqueCount: new Set(allIds).size }
+    })
+
+    expect(result.uniqueCount).toBe(result.allIds.length)
+    expect(result.allIds.length).toBeGreaterThanOrEqual(10)
+  })
+
+  test('Root graph node IDs are preserved as canonical', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const rootIds = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      return graph._nodes
+        .map((n) => n.id)
+        .filter((id): id is number => typeof id === 'number')
+        .sort((a, b) => a - b)
+    })
+
+    expect(rootIds).toEqual([1, 2, 5])
+  })
+
+  test('All links reference valid nodes in their graph', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const invalidLinks = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      const labeledGraphs: [string, typeof graph][] = [
+        ['root', graph],
+        ...[...graph.subgraphs.entries()].map(
+          ([id, sg]) => [`subgraph:${id}`, sg] as [string, typeof graph]
+        )
+      ]
+
+      const isNonNegative = (id: number | string) =>
+        typeof id === 'number' && id >= 0
+
+      return labeledGraphs.flatMap(([label, g]) =>
+        [...g._links.values()].flatMap((link) =>
+          [
+            isNonNegative(link.origin_id) &&
+              !g._nodes_by_id[link.origin_id] &&
+              `${label}: origin_id ${link.origin_id} not found`,
+            isNonNegative(link.target_id) &&
+              !g._nodes_by_id[link.target_id] &&
+              `${label}: target_id ${link.target_id} not found`
+          ].filter(Boolean)
+        )
+      )
+    })
+
+    expect(invalidLinks).toEqual([])
+  })
+
+  test('Subgraph navigation works after ID remapping', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
+    await subgraphNode.navigateIntoSubgraph()
+
+    const isInSubgraph = () =>
+      comfyPage.page.evaluate(
+        () => window.app!.canvas.graph?.isRootGraph === false
+      )
+
+    expect(await isInSubgraph()).toBe(true)
+
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.nextFrame()
+
+    expect(await isInSubgraph()).toBe(false)
+  })
+})
--- a/components.json
+++ b/components.json
@@ -3,7 +3,6 @@
  "style": "new-york",
  "typescript": true,
  "tailwind": {
-    "config": "tailwind.config.ts",
    "css": "src/assets/css/style.css",
    "baseColor": "stone",
    "cssVariables": true,
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -20,10 +20,6 @@ const config: KnipConfig = {
    'packages/tailwind-utils': {
      project: ['src/**/*.{js,ts}']
    },
-    'packages/design-system': {
-      entry: ['src/**/*.ts'],
-      project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
-    },
    'packages/registry-types': {
      project: ['src/**/*.{js,ts}']
    }
@@ -31,6 +27,7 @@ const config: KnipConfig = {
  ignoreBinaries: ['python3', 'gh'],
  ignoreDependencies: [
    // Weird importmap things
+    '@iconify-json/lucide',
    '@iconify/json',
    '@primeuix/forms',
    '@primeuix/styled',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.39.9",
+  "version": "1.39.11",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -4,7 +4,6 @@
  "description": "Shared design system for ComfyUI Frontend",
  "type": "module",
  "exports": {
-    "./tailwind-config": "./tailwind.config.ts",
    "./css/*": "./src/css/*"
  },
  "scripts": {
@@ -12,7 +11,7 @@
  },
  "dependencies": {
    "@iconify-json/lucide": "catalog:",
-    "@iconify/tailwind": "catalog:"
+    "@iconify/tailwind4": "catalog:"
  },
  "devDependencies": {
    "tailwindcss": "catalog:",
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -7,11 +7,16 @@

@plugin 'tailwindcss-primeui';

-@config '../../tailwind.config.ts';
+@plugin "@iconify/tailwind4" {
+  scale: 1.2;
+  icon-sets: from-folder(comfy, './packages/design-system/src/icons');
+}

@custom-variant touch (@media (hover: none));

@theme {
+  --shadow-interface: var(--interface-panel-box-shadow);
+
  --text-xxs: 0.625rem;
  --text-xxs--line-height: calc(1 / 0.625);

--- a/packages/design-system/src/iconCollection.ts
+++ b/packages/design-system/src/iconCollection.ts
@@ -1,100 +0,0 @@
-import { existsSync, readFileSync, readdirSync } from 'fs'
-import { join } from 'path'
-import { dirname } from 'path'
-import { fileURLToPath } from 'url'
-
-const fileName = fileURLToPath(import.meta.url)
-const dirName = dirname(fileName)
-const customIconsPath = join(dirName, 'icons')
-
-// Iconify collection structure
-interface IconifyIcon {
-  body: string
-  width?: number
-  height?: number
-}
-
-interface IconifyCollection {
-  prefix: string
-  icons: Record<string, IconifyIcon>
-  width?: number
-  height?: number
-}
-
-// Create an Iconify collection for custom icons
-export const iconCollection: IconifyCollection = {
-  prefix: 'comfy',
-  icons: {},
-  width: 16,
-  height: 16
-}
-
-/**
- * Validates that an SVG file contains valid SVG content
- */
-function validateSvgContent(content: string, filename: string): void {
-  if (!content.trim()) {
-    throw new Error(`Empty SVG file: ${filename}`)
-  }
-
-  if (!content.includes('<svg')) {
-    throw new Error(`Invalid SVG file (missing <svg> tag): ${filename}`)
-  }
-
-  // Basic XML structure validation
-  const openTags = (content.match(/<svg[^>]*>/g) || []).length
-  const closeTags = (content.match(/<\/svg>/g) || []).length
-
-  if (openTags !== closeTags) {
-    throw new Error(`Malformed SVG file (mismatched svg tags): ${filename}`)
-  }
-}
-
-/**
- * Loads custom SVG icons from the icons directory
- */
-function loadCustomIcons(): void {
-  if (!existsSync(customIconsPath)) {
-    console.warn(`Custom icons directory not found: ${customIconsPath}`)
-    return
-  }
-
-  try {
-    const files = readdirSync(customIconsPath)
-    const svgFiles = files.filter((file) => file.endsWith('.svg'))
-
-    if (svgFiles.length === 0) {
-      console.warn('No SVG files found in custom icons directory')
-      return
-    }
-
-    svgFiles.forEach((file) => {
-      const name = file.replace('.svg', '')
-      const filePath = join(customIconsPath, file)
-
-      try {
-        const content = readFileSync(filePath, 'utf-8')
-        validateSvgContent(content, file)
-
-        iconCollection.icons[name] = {
-          body: content
-        }
-      } catch (error) {
-        console.error(
-          `Failed to load custom icon ${file}:`,
-          error instanceof Error ? error.message : error
-        )
-        // Continue loading other icons instead of failing the entire build
-      }
-    })
-  } catch (error) {
-    console.error(
-      'Failed to read custom icons directory:',
-      error instanceof Error ? error.message : error
-    )
-    // Don't throw here - allow build to continue without custom icons
-  }
-}
-
-// Load icons when this module is imported
-loadCustomIcons()
--- a/packages/design-system/src/icons/README.md
+++ b/packages/design-system/src/icons/README.md
@@ -251,26 +251,25 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need

 The icon system has two layers:

-1. **Build-time Processing** (`packages/design-system/src/iconCollection.ts`):
-   - Scans `packages/design-system/src/icons/` for SVG files
-   - Validates SVG content and structure
-   - Creates Iconify collection for Tailwind CSS
-   - Provides error handling for malformed files
+1. **Tailwind CSS Plugin** (`@iconify/tailwind4`):
+   - Configured via `@plugin` directive in `packages/design-system/src/css/style.css`
+   - Uses `from-folder(comfy, ...)` to load SVGs from `packages/design-system/src/icons/`
+   - Auto-cleans and optimizes SVGs at build time

 2. **Vite Runtime** (`vite.config.mts`):
   - Enables direct SVG import as Vue components
   - Supports dynamic icon loading

-```typescript
-// Build script creates Iconify collection
-export const iconCollection: IconifyCollection = {
-  prefix: 'comfy',
-  icons: {
-    workflow: { body: '<svg>...</svg>' },
-    node: { body: '<svg>...</svg>' }
-  }
+```css
+/* CSS configuration for Tailwind icon classes */
+@plugin "@iconify/tailwind4" {
+  prefix: 'icon';
+  scale: 1.2;
+  icon-sets: from-folder(comfy, './packages/design-system/src/icons');
 }
+```

+```typescript
 // Vite configuration for component-based usage
 Icons({
  compiler: 'vue3',
--- a/packages/design-system/tailwind.config.ts
+++ b/packages/design-system/tailwind.config.ts
@@ -1,24 +0,0 @@
-import lucide from '@iconify-json/lucide/icons.json' with { type: 'json' }
-import { addDynamicIconSelectors } from '@iconify/tailwind'
-
-import { iconCollection } from './src/iconCollection'
-
-export default {
-  theme: {
-    extend: {
-      boxShadow: {
-        interface: 'var(--interface-panel-box-shadow)'
-      }
-    }
-  },
-  plugins: [
-    addDynamicIconSelectors({
-      iconSets: {
-        comfy: iconCollection,
-        lucide
-      },
-      scale: 1.2,
-      prefix: 'icon'
-    })
-  ]
-}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,9 +21,9 @@ catalogs:
    '@iconify/json':
      specifier: ^2.2.380
      version: 2.2.380
-    '@iconify/tailwind':
-      specifier: ^1.1.3
-      version: 1.2.0
+    '@iconify/tailwind4':
+      specifier: ^1.2.0
+      version: 1.2.1
    '@intlify/eslint-plugin-vue-i18n':
      specifier: ^4.1.0
      version: 4.1.0
@@ -805,9 +805,9 @@ importers:
      '@iconify-json/lucide':
        specifier: 'catalog:'
        version: 1.2.79
-      '@iconify/tailwind':
+      '@iconify/tailwind4':
        specifier: 'catalog:'
-        version: 1.2.0
+        version: 1.2.1(tailwindcss@4.1.12)
    devDependencies:
      tailwindcss:
        specifier: 'catalog:'
@@ -1528,6 +1528,9 @@ packages:
    peerDependencies:
      postcss-selector-parser: ^7.0.0

+  '@cyberalien/svg-utils@1.1.1':
+    resolution: {integrity: sha512-i05Cnpzeezf3eJAXLx7aFirTYYoq5D1XUItp1XsjqkerNJh//6BG9sOYHbiO7v0KYMvJAx3kosrZaRcNlQPdsA==}
+
  '@dual-bundle/import-meta-resolve@4.2.1':
    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}

@@ -2149,8 +2152,13 @@ packages:
  '@iconify/json@2.2.380':
    resolution: {integrity: sha512-+Al/Q+mMB/nLz/tawmJEOkCs6+RKKVUS/Yg9I80h2yRpu0kIzxVLQRfF0NifXz/fH92vDVXbS399wio4lMVF4Q==}

-  '@iconify/tailwind@1.2.0':
-    resolution: {integrity: sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==}
+  '@iconify/tailwind4@1.2.1':
+    resolution: {integrity: sha512-Hd7k8y7uzT3hk8ltw0jGku0r0wA8sc3d2iMvVTYv/9tMxBb+frZtWZGD9hDMU3EYuE+lMn58wi2lS8R2ZbwFcQ==}
+    peerDependencies:
+      tailwindcss: '>= 4.0.0'
+
+  '@iconify/tools@5.0.3':
+    resolution: {integrity: sha512-W5nbH5fNv20TvU49Al19Foos/ViAnmppbCNV9ieGl6/dRMDRzxeFol6peXX/NAgaOytQwZZxTTJRq/Kxd4eWsA==}

  '@iconify/types@2.0.0':
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -4664,6 +4672,10 @@ packages:
    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
    engines: {node: '>=14'}

+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
  commander@13.1.0:
    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
    engines: {node: '>=18'}
@@ -4769,6 +4781,13 @@ packages:
  css-select@4.3.0:
    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}

+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
  css-tree@3.1.0:
    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -4785,6 +4804,10 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
  cssstyle@5.3.5:
    resolution: {integrity: sha512-GlsEptulso7Jg0VaOZ8BXQi3AkYM5BOJKEO/rjMidSCq70FkIC5y0eawrCXeYzxgt3OCf4Ls+eoxN+/05vN0Ag==}
    engines: {node: '>=20'}
@@ -6490,6 +6513,9 @@ packages:
  mdast-util-to-string@4.0.0:
    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}

+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
  mdn-data@2.12.2:
    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}

@@ -6683,6 +6709,10 @@ packages:
  mlly@1.8.0:
    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}

+  modern-tar@0.7.3:
+    resolution: {integrity: sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg==}
+    engines: {node: '>=18.0.0'}
+
  mrmime@2.0.1:
    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
    engines: {node: '>=10'}
@@ -7441,6 +7471,10 @@ packages:
    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
    engines: {node: '>= 0.4'}

+  sax@1.4.4:
+    resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
+    engines: {node: '>=11.0.0'}
+
  saxes@6.0.0:
    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
    engines: {node: '>=v12.22.7'}
@@ -7704,6 +7738,11 @@ packages:
  svg-tags@1.0.0:
    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}

+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
  swr@2.3.6:
    resolution: {integrity: sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==}
    peerDependencies:
@@ -9435,6 +9474,10 @@ snapshots:
    dependencies:
      postcss-selector-parser: 7.1.1

+  '@cyberalien/svg-utils@1.1.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
  '@dual-bundle/import-meta-resolve@4.2.1': {}

  '@emnapi/core@1.7.1':
@@ -10023,9 +10066,22 @@ snapshots:
      '@iconify/types': 2.0.0
      pathe: 1.1.2

-  '@iconify/tailwind@1.2.0':
+  '@iconify/tailwind4@1.2.1(tailwindcss@4.1.12)':
    dependencies:
+      '@iconify/tools': 5.0.3
      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      tailwindcss: 4.1.12
+
+  '@iconify/tools@5.0.3':
+    dependencies:
+      '@cyberalien/svg-utils': 1.1.1
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      fflate: 0.8.2
+      modern-tar: 0.7.3
+      pathe: 2.0.3
+      svgo: 4.0.0

  '@iconify/types@2.0.0': {}

@@ -12834,6 +12890,8 @@ snapshots:

  commander@10.0.1: {}

+  commander@11.1.0: {}
+
  commander@13.1.0: {}

  commander@14.0.2: {}
@@ -12941,6 +12999,19 @@ snapshots:
      domutils: 2.8.0
      nth-check: 2.1.1

+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
  css-tree@3.1.0:
    dependencies:
      mdn-data: 2.12.2
@@ -12952,6 +13023,10 @@ snapshots:

  cssesc@3.0.0: {}

+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
  cssstyle@5.3.5:
    dependencies:
      '@asamuzakjp/css-color': 4.1.1
@@ -14893,6 +14968,8 @@ snapshots:
    dependencies:
      '@types/mdast': 4.0.4

+  mdn-data@2.0.28: {}
+
  mdn-data@2.12.2: {}

  mdurl@2.0.0: {}
@@ -15193,6 +15270,8 @@ snapshots:
      pkg-types: 1.3.1
      ufo: 1.6.1

+  modern-tar@0.7.3: {}
+
  mrmime@2.0.1: {}

  ms@2.1.3: {}
@@ -16233,6 +16312,8 @@ snapshots:
      is-regex: 1.2.1
    optional: true

+  sax@1.4.4: {}
+
  saxes@6.0.0:
    dependencies:
      xmlchars: 2.2.0
@@ -16570,6 +16651,16 @@ snapshots:

  svg-tags@1.0.0: {}

+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.4
+
  swr@2.3.6(react@19.2.3):
    dependencies:
      dequal: 2.0.3
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,7 +8,7 @@ catalog:
  '@eslint/js': ^9.39.1
  '@iconify-json/lucide': ^1.1.178
  '@iconify/json': ^2.2.380
-  '@iconify/tailwind': ^1.1.3
+  '@iconify/tailwind4': ^1.2.0
  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
  '@lobehub/i18n-cli': ^1.25.1
  '@nx/eslint': 22.2.6
--- a/scripts/cicd/pr-playwright-deploy-and-comment.sh
+++ b/scripts/cicd/pr-playwright-deploy-and-comment.sh
@@ -283,34 +283,27 @@ else
    done
    unset IFS
    
-    # Determine overall status
+    # Determine overall status (flaky tests are treated as passing)
    if [ $total_failed -gt 0 ]; then
        status_icon="❌"
-        status_text="Failed"
-    elif [ $total_flaky -gt 0 ]; then
-        status_icon="⚠️"
-        status_text="Passed with flaky tests"
    elif [ $total_tests -gt 0 ]; then
        status_icon="✅"
-        status_text="Passed"
    else
        status_icon="🕵🏻"
-        status_text="No test results"
    fi
    
-    # Generate concise completion comment
-    comment="$COMMENT_MARKER
-## 🎭 Playwright Tests: $status_icon **$status_text**"
-
-    # Add summary counts if we have test data
-    if [ $total_tests -gt 0 ]; then
-        comment="$comment
-
-**Results:** $total_passed passed, $total_failed failed, $total_flaky flaky, $total_skipped skipped (Total: $total_tests)"
+    # Build flaky indicator if any (small subtext, no warning icon)
+    flaky_note=""
+    if [ $total_flaky -gt 0 ]; then
+        flaky_note=" · $total_flaky flaky"
    fi
+    
+    # Generate compact single-line comment
+    comment="$COMMENT_MARKER
+**Playwright:** $status_icon $total_passed passed, $total_failed failed$flaky_note"

-    # Extract and display failed tests from all browsers
-    if [ $total_failed -gt 0 ] || [ $total_flaky -gt 0 ]; then
+    # Extract and display failed tests from all browsers (flaky tests are treated as passing)
+    if [ $total_failed -gt 0 ]; then
        comment="$comment

 ### ❌ Failed Tests"
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -18,7 +18,7 @@
 </template>

 <script setup lang="ts">
-import { useElementBounding, useEventListener } from '@vueuse/core'
+import { useElementBounding, useEventListener, whenever } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'

@@ -180,6 +180,8 @@ watch(
    mountElementIfVisible()
  }
 )
+
+whenever(() => !canvasStore.linearMode, mountElementIfVisible)
 </script>

 <style scoped>
--- a/src/composables/billing/useWorkspaceBilling.ts
+++ b/src/composables/billing/useWorkspaceBilling.ts
@@ -47,7 +47,7 @@ export function useWorkspaceBilling(): BillingState & BillingActions {
      tier: status.subscription_tier ?? null,
      duration: status.subscription_duration ?? null,
      planSlug: status.plan_slug ?? null,
-      renewalDate: null, // Workspace billing uses cancel_at for end date
+      renewalDate: status.renewal_date ?? null,
      endDate: status.cancel_at ?? null,
      isCancelled: status.subscription_status === 'canceled',
      hasFunds: status.has_funds
--- a/src/composables/queue/useJobList.test.ts
+++ b/src/composables/queue/useJobList.test.ts
@@ -134,6 +134,25 @@ vi.mock('@/stores/executionStore', () => ({
  }
 }))

+let jobPreviewStoreMock: {
+  previewsByPromptId: Record<string, string>
+  isPreviewEnabled: boolean
+}
+const ensureJobPreviewStore = () => {
+  if (!jobPreviewStoreMock) {
+    jobPreviewStoreMock = reactive({
+      previewsByPromptId: {} as Record<string, string>,
+      isPreviewEnabled: true
+    })
+  }
+  return jobPreviewStoreMock
+}
+vi.mock('@/stores/jobPreviewStore', () => ({
+  useJobPreviewStore: () => {
+    return ensureJobPreviewStore()
+  }
+}))
+
 let workflowStoreMock: {
  activeWorkflow: null | { activeState?: { id?: string } }
 }
@@ -186,6 +205,10 @@ const resetStores = () => {
  executionStore.activePromptId = null
  executionStore.executingNode = null

+  const jobPreviewStore = ensureJobPreviewStore()
+  jobPreviewStore.previewsByPromptId = {}
+  jobPreviewStore.isPreviewEnabled = true
+
  const workflowStore = ensureWorkflowStore()
  workflowStore.activeWorkflow = null

@@ -437,6 +460,44 @@ describe('useJobList', () => {
    expect(otherJob.computeHours).toBeCloseTo(1)
  })

+  it('assigns preview urls for running jobs when previews enabled', async () => {
+    queueStoreMock.runningTasks = [
+      createTask({
+        promptId: 'live-preview',
+        queueIndex: 1,
+        mockState: 'running'
+      })
+    ]
+    jobPreviewStoreMock.previewsByPromptId = {
+      'live-preview': 'blob:preview-url'
+    }
+    jobPreviewStoreMock.isPreviewEnabled = true
+
+    const { jobItems } = initComposable()
+    await flush()
+
+    expect(jobItems.value[0].iconImageUrl).toBe('blob:preview-url')
+  })
+
+  it('omits preview urls when previews are disabled', async () => {
+    queueStoreMock.runningTasks = [
+      createTask({
+        promptId: 'disabled-preview',
+        queueIndex: 1,
+        mockState: 'running'
+      })
+    ]
+    jobPreviewStoreMock.previewsByPromptId = {
+      'disabled-preview': 'blob:preview-url'
+    }
+    jobPreviewStoreMock.isPreviewEnabled = false
+
+    const { jobItems } = initComposable()
+    await flush()
+
+    expect(jobItems.value[0].iconImageUrl).toBeUndefined()
+  })
+
  it('derives current node name from execution store fallbacks', async () => {
    const instance = initComposable()
    await flush()
--- a/src/composables/queue/useJobList.ts
+++ b/src/composables/queue/useJobList.ts
@@ -7,6 +7,7 @@ import { st } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useJobPreviewStore } from '@/stores/jobPreviewStore'
 import { useQueueStore } from '@/stores/queueStore'
 import type { TaskItemImpl } from '@/stores/queueStore'
 import type { JobState } from '@/types/queue'
@@ -96,6 +97,7 @@ export function useJobList() {
  const { t, locale } = useI18n()
  const queueStore = useQueueStore()
  const executionStore = useExecutionStore()
+  const jobPreviewStore = useJobPreviewStore()
  const workflowStore = useWorkflowStore()

  const seenPendingIds = ref<Set<string>>(new Set())
@@ -256,6 +258,11 @@ export function useJobList() {
        String(task.promptId ?? '') ===
        String(executionStore.activePromptId ?? '')
      const showAddedHint = shouldShowAddedHint(task, state)
+      const promptKey = taskIdToKey(task.promptId)
+      const promptPreviewUrl =
+        state === 'running' && jobPreviewStore.isPreviewEnabled && promptKey
+          ? jobPreviewStore.previewsByPromptId[promptKey]
+          : undefined

      const display = buildJobDisplay(task, state, {
        t,
@@ -275,7 +282,7 @@ export function useJobList() {
        meta: display.secondary,
        state,
        iconName: display.iconName,
-        iconImageUrl: display.iconImageUrl,
+        iconImageUrl: promptPreviewUrl ?? display.iconImageUrl,
        showClear: display.showClear,
        taskRef: task,
        progressTotalPercent:
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -12,6 +12,10 @@ import type {
  IBaseWidget,
  TWidgetValue
 } from '@/lib/litegraph/src/types/widgets'
+import { assetService } from '@/platform/assets/services/assetService'
+import { createAssetWidget } from '@/platform/assets/utils/createAssetWidget'
+import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import { app } from '@/scripts/app'
 import {
@@ -19,10 +23,10 @@ import {
  addValueControlWidgets,
  isValidWidgetType
 } from '@/scripts/widgets'
+import { isPrimitiveNode } from '@/renderer/utils/nodeTypeGuards'
 import { CONFIG, GET_CONFIG } from '@/services/litegraphService'
 import { mergeInputSpec } from '@/utils/nodeDefUtil'
 import { applyTextReplacements } from '@/utils/searchAndReplace'
-import { isPrimitiveNode } from '@/renderer/utils/nodeTypeGuards'

 const replacePropertyName = 'Run widget replace on values'
 export class PrimitiveNode extends LGraphNode {
@@ -228,6 +232,24 @@ export class PrimitiveNode extends LGraphNode {
    // Store current size as addWidget resizes the node
    const [oldWidth, oldHeight] = this.size
    let widget: IBaseWidget
+
+    // Cloud: Use asset widget for model-eligible inputs when asset API is enabled
+    if (isCloud && type === 'COMBO') {
+      const settingStore = useSettingStore()
+      const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
+      const isEligible = assetService.isAssetBrowserEligible(
+        node.comfyClass,
+        widgetName
+      )
+      if (isUsingAssetAPI && isEligible) {
+        widget = this._createAssetWidget(node, widgetName, inputData)
+        const theirWidget = node.widgets?.find((w) => w.name === widgetName)
+        if (theirWidget) widget.value = theirWidget.value
+        this._finalizeWidget(widget, oldWidth, oldHeight, recreating)
+        return
+      }
+    }
+
    if (isValidWidgetType(type)) {
      widget = (ComfyWidgets[type](this, 'value', inputData, app) || {}).widget
    } else {
@@ -277,20 +299,50 @@ export class PrimitiveNode extends LGraphNode {
      }
    }

-    // When our value changes, update other widgets to reflect our changes
-    // e.g. so LoadImage shows correct image
+    this._finalizeWidget(widget, oldWidth, oldHeight, recreating)
+  }
+
+  private _createAssetWidget(
+    targetNode: LGraphNode,
+    targetInputName: string,
+    inputData: InputSpec
+  ): IBaseWidget {
+    const defaultValue = inputData[1]?.default as string | undefined
+    return createAssetWidget({
+      node: this,
+      widgetName: 'value',
+      nodeTypeForBrowser: targetNode.comfyClass ?? '',
+      inputNameForBrowser: targetInputName,
+      defaultValue,
+      onValueChange: (widget, newValue, oldValue) => {
+        widget.callback?.(
+          widget.value,
+          app.canvas,
+          this,
+          app.canvas.graph_mouse,
+          {} as CanvasPointerEvent
+        )
+        this.onWidgetChanged?.(widget.name, newValue, oldValue, widget)
+      }
+    })
+  }
+
+  private _finalizeWidget(
+    widget: IBaseWidget,
+    oldWidth: number,
+    oldHeight: number,
+    recreating: boolean
+  ) {
    widget.callback = useChainCallback(widget.callback, () => {
      this.applyToGraph()
    })

-    // Use the biggest dimensions in case the widgets caused the node to grow
    this.setSize([
      Math.max(this.size[0], oldWidth),
      Math.max(this.size[1], oldHeight)
    ])

    if (!recreating) {
-      // Grow our node more if required
      const sz = this.computeSize()
      if (this.size[0] < sz[0]) {
        this.size[0] = sz[0]
--- a/src/lib/litegraph/src/LGraph.test.ts
+++ b/src/lib/litegraph/src/LGraph.test.ts
@@ -1,6 +1,12 @@
 import { describe, expect, it } from 'vitest'

-import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraph,
+  LGraphNode,
+  LiteGraph,
+  LLink
+} from '@/lib/litegraph/src/litegraph'
 import {
  createTestSubgraphData,
  createTestSubgraphNode
@@ -288,3 +294,182 @@ describe('Legacy LGraph Compatibility Layer', () => {
    expect(LiteGraph.LGraph).toBe(LGraph)
  })
 })
+
+describe('Shared LGraphState', () => {
+  function createSubgraphOnGraph(rootGraph: LGraph): Subgraph {
+    const data = createTestSubgraphData()
+    return rootGraph.createSubgraph(data)
+  }
+
+  it('subgraph state is the same object as rootGraph state', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+    expect(subgraph.state).toBe(rootGraph.state)
+  })
+
+  it('adding a node in a subgraph increments the root counter', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    rootGraph.add(new DummyNode())
+    const rootNodeId = rootGraph.state.lastNodeId
+
+    subgraph.add(new DummyNode())
+    expect(rootGraph.state.lastNodeId).toBe(rootNodeId + 1)
+  })
+
+  it('node IDs never collide between root and subgraph', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const rootNode = new DummyNode()
+    rootGraph.add(rootNode)
+
+    const subNode = new DummyNode()
+    subgraph.add(subNode)
+
+    expect(rootNode.id).not.toBe(subNode.id)
+  })
+
+  it('configure merges state using max', () => {
+    const rootGraph = new LGraph()
+    rootGraph.state.lastNodeId = 10
+
+    const data = createTestSubgraphData()
+    data.state = {
+      lastNodeId: 5,
+      lastLinkId: 20,
+      lastGroupId: 0,
+      lastRerouteId: 0
+    }
+    const subgraph = rootGraph.createSubgraph(data)
+    subgraph.configure(data)
+
+    expect(rootGraph.state.lastNodeId).toBe(10)
+    expect(rootGraph.state.lastLinkId).toBe(20)
+  })
+})
+
+describe('ensureGlobalIdUniqueness', () => {
+  function createSubgraphOnGraph(rootGraph: LGraph): Subgraph {
+    const data = createTestSubgraphData()
+    return rootGraph.createSubgraph(data)
+  }
+
+  it('reassigns duplicate node IDs in subgraphs', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const rootNode = new DummyNode()
+    rootGraph.add(rootNode)
+
+    const subNode = new DummyNode()
+    subNode.id = rootNode.id
+    subgraph._nodes.push(subNode)
+    subgraph._nodes_by_id[subNode.id] = subNode
+
+    rootGraph.ensureGlobalIdUniqueness()
+
+    expect(subNode.id).not.toBe(rootNode.id)
+    expect(subgraph._nodes_by_id[subNode.id]).toBe(subNode)
+    expect(subgraph._nodes_by_id[rootNode.id as number]).toBeUndefined()
+  })
+
+  it('preserves root graph node IDs as canonical', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const rootNode = new DummyNode()
+    rootGraph.add(rootNode)
+    const originalRootId = rootNode.id
+
+    const subNode = new DummyNode()
+    subNode.id = rootNode.id
+    subgraph._nodes.push(subNode)
+    subgraph._nodes_by_id[subNode.id] = subNode
+
+    rootGraph.ensureGlobalIdUniqueness()
+
+    expect(rootNode.id).toBe(originalRootId)
+  })
+
+  it('updates lastNodeId to reflect reassigned IDs', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const rootNode = new DummyNode()
+    rootGraph.add(rootNode)
+
+    const subNode = new DummyNode()
+    subNode.id = rootNode.id
+    subgraph._nodes.push(subNode)
+    subgraph._nodes_by_id[subNode.id] = subNode
+
+    rootGraph.ensureGlobalIdUniqueness()
+
+    expect(rootGraph.state.lastNodeId).toBeGreaterThanOrEqual(
+      subNode.id as number
+    )
+  })
+
+  it('patches link origin_id and target_id after reassignment', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const rootNode = new DummyNode()
+    rootGraph.add(rootNode)
+
+    const subNodeA = new DummyNode()
+    subNodeA.id = rootNode.id
+    subgraph._nodes.push(subNodeA)
+    subgraph._nodes_by_id[subNodeA.id] = subNodeA
+
+    const subNodeB = new DummyNode()
+    subNodeB.id = 999
+    subgraph._nodes.push(subNodeB)
+    subgraph._nodes_by_id[subNodeB.id] = subNodeB
+
+    const link = new LLink(1, 'number', subNodeA.id, 0, subNodeB.id, 0)
+    subgraph._links.set(link.id, link)
+
+    rootGraph.ensureGlobalIdUniqueness()
+
+    expect(link.origin_id).toBe(subNodeA.id)
+    expect(link.target_id).toBe(subNodeB.id)
+    expect(link.origin_id).not.toBe(rootNode.id)
+  })
+
+  it('detects collisions with reserved (not-yet-created) node IDs', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const subNode = new DummyNode()
+    subNode.id = 42
+    subgraph._nodes.push(subNode)
+    subgraph._nodes_by_id[subNode.id] = subNode
+
+    rootGraph.ensureGlobalIdUniqueness([42])
+
+    expect(subNode.id).not.toBe(42)
+    expect(subgraph._nodes_by_id[subNode.id]).toBe(subNode)
+  })
+
+  it('is a no-op when there are no collisions', () => {
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const rootNode = new DummyNode()
+    rootGraph.add(rootNode)
+
+    const subNode = new DummyNode()
+    subgraph.add(subNode)
+
+    const rootId = rootNode.id
+    const subId = subNode.id
+
+    rootGraph.ensureGlobalIdUniqueness()
+
+    expect(rootNode.id).toBe(rootId)
+    expect(subNode.id).toBe(subId)
+  })
+})
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -8,6 +8,7 @@ import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4, zeroUuid } from '@/lib/litegraph/src/utils/uuid'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { forEachNode } from '@/utils/graphTraversalUtil'

 import type { DragAndScaleState } from './DragAndScale'
 import { LGraphCanvas } from './LGraphCanvas'
@@ -157,6 +158,7 @@ export class LGraph

  static STATUS_STOPPED = 1
  static STATUS_RUNNING = 2
+  static deduplicateSubgraphIds = false

  /** List of LGraph properties that are manually handled by {@link LGraph.configure}. */
  static readonly ConfigureProperties = new Set([
@@ -198,13 +200,21 @@ export class LGraph
  list_of_graphcanvas: LGraphCanvas[] | null
  status: number = LGraph.STATUS_STOPPED

-  state: LGraphState = {
+  private _state: LGraphState = {
    lastGroupId: 0,
    lastNodeId: 0,
    lastLinkId: 0,
    lastRerouteId: 0
  }

+  get state(): LGraphState {
+    return this._state
+  }
+
+  set state(value: LGraphState) {
+    this._state = value
+  }
+
  readonly events = new CustomEventTarget<LGraphEventMap>()
  readonly _subgraphs: Map<UUID, Subgraph> = new Map()

@@ -973,6 +983,13 @@ export class LGraph
      this.canvasAction((c) => c.startGhostPlacement(node, opts.dragEvent))
    }

+    if (node.isSubgraphNode?.()) {
+      forEachNode(node.subgraph, (innerNode) => {
+        if (innerNode.isSubgraphNode())
+          this.subgraphs.set(innerNode.subgraph.id, innerNode.subgraph)
+      })
+    }
+
    // to chain actions
    return node
  }
@@ -1034,14 +1051,14 @@ export class LGraph
      }
    }

-    // Subgraph cleanup (use local const to avoid type narrowing affecting node.graph assignment)
-    const subgraphNode = node.isSubgraphNode() ? node : null
-    if (subgraphNode) {
-      for (const innerNode of subgraphNode.subgraph.nodes) {
+    if (node.isSubgraphNode()) {
+      forEachNode(node.subgraph, (innerNode) => {
        innerNode.onRemoved?.()
-        subgraphNode.subgraph.onNodeRemoved?.(innerNode)
-      }
-      this.rootGraph.subgraphs.delete(subgraphNode.subgraph.id)
+        innerNode.graph?.onNodeRemoved?.(innerNode)
+        if (innerNode.isSubgraphNode())
+          this.rootGraph.subgraphs.delete(innerNode.subgraph.id)
+      })
+      this.rootGraph.subgraphs.delete(node.subgraph.id)
    }

    // callback
@@ -2369,15 +2386,19 @@ export class LGraph
      } else {
        // New schema - one version so far, no check required.

-        // State
+        // State - use max to prevent ID collisions across root and subgraphs
        if (data.state) {
          const { lastGroupId, lastLinkId, lastNodeId, lastRerouteId } =
            data.state
          const { state } = this
-          if (lastGroupId != null) state.lastGroupId = lastGroupId
-          if (lastLinkId != null) state.lastLinkId = lastLinkId
-          if (lastNodeId != null) state.lastNodeId = lastNodeId
-          if (lastRerouteId != null) state.lastRerouteId = lastRerouteId
+          if (lastGroupId != null)
+            state.lastGroupId = Math.max(state.lastGroupId, lastGroupId)
+          if (lastLinkId != null)
+            state.lastLinkId = Math.max(state.lastLinkId, lastLinkId)
+          if (lastNodeId != null)
+            state.lastNodeId = Math.max(state.lastNodeId, lastNodeId)
+          if (lastRerouteId != null)
+            state.lastRerouteId = Math.max(state.lastRerouteId, lastRerouteId)
        }

        // Links
@@ -2416,6 +2437,13 @@ export class LGraph
          this.subgraphs.get(subgraph.id)?.configure(subgraph)
      }

+      if (this.isRootGraph && LGraph.deduplicateSubgraphIds) {
+        const reservedNodeIds = nodesData
+          ?.map((n) => n.id)
+          .filter((id): id is number => typeof id === 'number')
+        this.ensureGlobalIdUniqueness(reservedNodeIds)
+      }
+
      let error = false
      const nodeDataMap = new Map<NodeId, ISerialisedNode>()

@@ -2508,6 +2536,50 @@ export class LGraph
    }
  }

+  /**
+   * Ensures all node IDs are globally unique across the root graph and all
+   * subgraphs. Reassigns any colliding IDs found in subgraphs, preserving
+   * root graph IDs as canonical. Updates link references (`origin_id`,
+   * `target_id`) within the affected graph to match the new node IDs.
+   */
+  ensureGlobalIdUniqueness(reservedNodeIds?: Iterable<number>): void {
+    const { state } = this
+
+    const allGraphs: LGraph[] = [this, ...this._subgraphs.values()]
+
+    const usedNodeIds = new Set<number>(reservedNodeIds)
+    for (const graph of allGraphs) {
+      const remappedIds = new Map<NodeId, NodeId>()
+
+      for (const node of graph._nodes) {
+        if (typeof node.id !== 'number') continue
+
+        if (usedNodeIds.has(node.id)) {
+          const oldId = node.id
+          while (usedNodeIds.has(++state.lastNodeId));
+          const newId = state.lastNodeId
+          delete graph._nodes_by_id[oldId]
+          node.id = newId
+          graph._nodes_by_id[newId] = node
+          usedNodeIds.add(newId)
+          remappedIds.set(oldId, newId)
+          console.warn(
+            `LiteGraph: duplicate node ID ${oldId} reassigned to ${newId} in graph ${graph.id}`
+          )
+        } else {
+          usedNodeIds.add(node.id as number)
+          if ((node.id as number) > state.lastNodeId)
+            state.lastNodeId = node.id as number
+        }
+      }
+
+      if (remappedIds.size > 0) {
+        patchLinkNodeIds(graph._links, remappedIds)
+        patchLinkNodeIds(graph.floatingLinksInternal, remappedIds)
+      }
+    }
+  }
+
  private _canvas?: LGraphCanvas
  get primaryCanvas(): LGraphCanvas | undefined {
    return this.rootGraph._canvas
@@ -2588,6 +2660,14 @@ export class Subgraph
    return this._rootGraph
  }

+  override get state(): LGraphState {
+    return this._rootGraph.state
+  }
+
+  override set state(_value: LGraphState) {
+    // No-op: subgraphs share the root graph's state.
+  }
+
  constructor(rootGraph: LGraph, data: ExportedSubgraph) {
    if (!rootGraph) throw new Error('Root graph is required')

@@ -2842,3 +2922,16 @@ export class Subgraph
    }
  }
 }
+
+function patchLinkNodeIds(
+  links: Map<LinkId, LLink>,
+  remappedIds: Map<NodeId, NodeId>
+): void {
+  for (const link of links.values()) {
+    const newOrigin = remappedIds.get(link.origin_id)
+    if (newOrigin !== undefined) link.origin_id = newOrigin
+
+    const newTarget = remappedIds.get(link.target_id)
+    if (newTarget !== undefined) link.target_id = newTarget
+  }
+}
--- a/src/lib/litegraph/src/litegraph.ts
+++ b/src/lib/litegraph/src/litegraph.ts
@@ -150,7 +150,9 @@ export { BaseWidget } from './widgets/BaseWidget'

 export { LegacyWidget } from './widgets/LegacyWidget'

-export { isComboWidget, isAssetWidget } from './widgets/widgetMap'
+export { isComboWidget } from './widgets/widgetMap'
+/** @knipIgnoreUnusedButUsedByCustomNodes */
+export { isAssetWidget } from './widgets/widgetMap'
 // Additional test-specific exports
 export { LGraphButton } from './LGraphButton'
 export { MovingOutputLink } from './canvas/MovingOutputLink'
--- a/src/lib/litegraph/src/widgets/widgetMap.ts
+++ b/src/lib/litegraph/src/widgets/widgetMap.ts
@@ -141,7 +141,10 @@ export function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
  return widget.type === 'combo'
 }

-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IAssetWidget}. */
+/**
+ * Type guard: Narrow **from {@link IBaseWidget}** to {@link IAssetWidget}.
+ * @knipIgnoreUnusedButUsedByCustomNodes
+ */
 export function isAssetWidget(widget: IBaseWidget): widget is IAssetWidget {
  return widget.type === 'asset'
 }
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "الصق الرابط هنا",
    "importAnother": "استيراد آخر",
    "imported": "مستوردة",
+    "invalidAsset": "عنصر غير صالح",
+    "invalidAssetDetail": "تعذر التحقق من صحة العنصر المحدد. يرجى المحاولة مرة أخرى.",
+    "invalidFilename": "اسم ملف غير صالح",
+    "invalidFilenameDetail": "تعذر تحديد اسم ملف العنصر. يرجى المحاولة مرة أخرى.",
    "jobId": "معرّف المهمة",
    "loadingModels": "جارٍ تحميل {type}...",
    "maxFileSize": "الحد الأقصى لحجم الملف: {size}",
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2633,6 +2633,10 @@
    "errorUploadFailed": "Failed to import asset. Please try again.",
    "errorUserTokenAccessDenied": "Your API token does not have access to this resource. Please check your token permissions.",
    "errorUserTokenInvalid": "Your stored API token is invalid or expired. Please update your token in settings.",
+    "invalidAsset": "Invalid Asset",
+    "invalidAssetDetail": "The selected asset could not be validated. Please try again.",
+    "invalidFilename": "Invalid Filename",
+    "invalidFilenameDetail": "The asset filename could not be determined. Please try again.",
    "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
    "fileFormats": "File formats",
    "fileName": "File Name",
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "Pega el enlace aquí",
    "importAnother": "Importar otro",
    "imported": "Importado",
+    "invalidAsset": "Recurso no válido",
+    "invalidAssetDetail": "No se pudo validar el recurso seleccionado. Por favor, inténtalo de nuevo.",
+    "invalidFilename": "Nombre de archivo no válido",
+    "invalidFilenameDetail": "No se pudo determinar el nombre de archivo del recurso. Por favor, inténtalo de nuevo.",
    "jobId": "ID de tarea",
    "loadingModels": "Cargando {type}...",
    "maxFileSize": "Tamaño máximo de archivo: {size}",
--- a/src/locales/fa/main.json
+++ b/src/locales/fa/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "لینک را اینجا وارد کنید",
    "importAnother": "وارد کردن مورد دیگر",
    "imported": "وارد شده",
+    "invalidAsset": "دارایی نامعتبر",
+    "invalidAssetDetail": "دارایی انتخاب‌شده قابل اعتبارسنجی نیست. لطفاً دوباره تلاش کنید.",
+    "invalidFilename": "نام فایل نامعتبر",
+    "invalidFilenameDetail": "نام فایل دارایی قابل شناسایی نیست. لطفاً دوباره تلاش کنید.",
    "jobId": "شناسه کار: {jobId}",
    "loadingModels": "در حال بارگذاری {type}...",
    "maxFileSize": "حداکثر اندازه فایل: {size}",
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "Collez le lien ici",
    "importAnother": "Importer un autre",
    "imported": "Importé",
+    "invalidAsset": "Ressource invalide",
+    "invalidAssetDetail": "La ressource sélectionnée n’a pas pu être validée. Veuillez réessayer.",
+    "invalidFilename": "Nom de fichier invalide",
+    "invalidFilenameDetail": "Le nom de fichier de la ressource n’a pas pu être déterminé. Veuillez réessayer.",
    "jobId": "ID de tâche",
    "loadingModels": "Chargement de {type}...",
    "maxFileSize": "Taille maximale du fichier : {size}",
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "ここにリンクを貼り付けてください",
    "importAnother": "別のファイルをインポート",
    "imported": "インポート済み",
+    "invalidAsset": "無効なアセット",
+    "invalidAssetDetail": "選択したアセットを検証できませんでした。もう一度お試しください。",
+    "invalidFilename": "無効なファイル名",
+    "invalidFilenameDetail": "アセットのファイル名を特定できませんでした。もう一度お試しください。",
    "jobId": "ジョブID",
    "loadingModels": "{type}を読み込み中...",
    "maxFileSize": "最大ファイルサイズ：{size}",
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "여기에 링크를 붙여넣으세요",
    "importAnother": "다른 항목 가져오기",
    "imported": "가져온 항목",
+    "invalidAsset": "잘못된 에셋",
+    "invalidAssetDetail": "선택한 에셋을 확인할 수 없습니다. 다시 시도해 주세요.",
+    "invalidFilename": "잘못된 파일명",
+    "invalidFilenameDetail": "에셋의 파일명을 확인할 수 없습니다. 다시 시도해 주세요.",
    "jobId": "작업 ID",
    "loadingModels": "{type} 불러오는 중...",
    "maxFileSize": "최대 파일 크기: {size}",
--- a/src/locales/pt-BR/main.json
+++ b/src/locales/pt-BR/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "Cole o link aqui",
    "importAnother": "Importar outro",
    "imported": "Importado",
+    "invalidAsset": "Ativo inválido",
+    "invalidAssetDetail": "O ativo selecionado não pôde ser validado. Por favor, tente novamente.",
+    "invalidFilename": "Nome de arquivo inválido",
+    "invalidFilenameDetail": "Não foi possível determinar o nome do arquivo do ativo. Por favor, tente novamente.",
    "jobId": "ID do trabalho",
    "loadingModels": "Carregando {type}...",
    "maxFileSize": "Tamanho máximo do arquivo: {size}",
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "Вставьте ссылку сюда",
    "importAnother": "Импортировать другой",
    "imported": "Импортировано",
+    "invalidAsset": "Недопустимый ресурс",
+    "invalidAssetDetail": "Выбранный ресурс не удалось проверить. Пожалуйста, попробуйте еще раз.",
+    "invalidFilename": "Недопустимое имя файла",
+    "invalidFilenameDetail": "Не удалось определить имя файла ресурса. Пожалуйста, попробуйте еще раз.",
    "jobId": "ID задачи",
    "loadingModels": "Загрузка {type}...",
    "maxFileSize": "Максимальный размер файла: {size}",
--- a/src/locales/tr/main.json
+++ b/src/locales/tr/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "Bağlantıyı buraya yapıştırın",
    "importAnother": "Başka Birini İçe Aktar",
    "imported": "İçe aktarıldı",
+    "invalidAsset": "Geçersiz Varlık",
+    "invalidAssetDetail": "Seçilen varlık doğrulanamadı. Lütfen tekrar deneyin.",
+    "invalidFilename": "Geçersiz Dosya Adı",
+    "invalidFilenameDetail": "Varlık dosya adı belirlenemedi. Lütfen tekrar deneyin.",
    "jobId": "İş ID",
    "loadingModels": "{type} yükleniyor...",
    "maxFileSize": "Maksimum dosya boyutu: {size}",
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "請在此貼上連結",
    "importAnother": "匯入其他",
    "imported": "已匯入",
+    "invalidAsset": "無效的資產",
+    "invalidAssetDetail": "無法驗證所選資產。請再試一次。",
+    "invalidFilename": "無效的檔案名稱",
+    "invalidFilenameDetail": "無法判斷資產檔案名稱。請再試一次。",
    "jobId": "工作 ID",
    "loadingModels": "正在載入 {type}...",
    "maxFileSize": "最大檔案大小：{size}",
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -91,6 +91,10 @@
    "genericLinkPlaceholder": "粘贴链接到这",
    "importAnother": "导入其他",
    "imported": "已导入",
+    "invalidAsset": "无效资源",
+    "invalidAssetDetail": "所选资源无法验证。请重试。",
+    "invalidFilename": "无效文件名",
+    "invalidFilenameDetail": "无法确定资源文件名。请重试。",
    "jobId": "任务ID",
    "loadingModels": "正在加载{type}...",
    "maxFileSize": "最大文件大小：{size}",
--- a/src/platform/assets/utils/createAssetWidget.ts
+++ b/src/platform/assets/utils/createAssetWidget.ts
@@ -0,0 +1,111 @@
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  IBaseWidget,
+  IWidgetAssetOptions
+} from '@/lib/litegraph/src/types/widgets'
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
+import {
+  assetFilenameSchema,
+  assetItemSchema
+} from '@/platform/assets/schemas/assetSchema'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+
+interface CreateAssetWidgetParams {
+  /** The node to add the widget to */
+  node: LGraphNode
+  /** The widget name */
+  widgetName: string
+  /** The node type to show in asset browser (may differ from node.comfyClass for PrimitiveNode) */
+  nodeTypeForBrowser: string
+  /** Input name for asset browser filtering (defaults to widgetName if not provided) */
+  inputNameForBrowser?: string
+  /** Default value for the widget */
+  defaultValue?: string
+  /** Callback when widget value changes */
+  onValueChange?: (
+    widget: IBaseWidget,
+    newValue: string,
+    oldValue: unknown
+  ) => void
+}
+
+/**
+ * Creates an asset widget that opens the Asset Browser dialog for model selection.
+ * Used by both regular nodes (via useComboWidget) and PrimitiveNode.
+ *
+ * @param params - Configuration for the asset widget
+ * @returns The created asset widget
+ */
+export function createAssetWidget(
+  params: CreateAssetWidgetParams
+): IBaseWidget {
+  const {
+    node,
+    widgetName,
+    nodeTypeForBrowser,
+    inputNameForBrowser,
+    defaultValue,
+    onValueChange
+  } = params
+
+  const displayLabel = defaultValue ?? t('widgets.selectModel')
+  const assetBrowserDialog = useAssetBrowserDialog()
+
+  async function openModal(widget: IBaseWidget) {
+    const toastStore = useToastStore()
+
+    await assetBrowserDialog.show({
+      nodeType: nodeTypeForBrowser,
+      inputName: inputNameForBrowser ?? widgetName,
+      currentValue: widget.value as string,
+      onAssetSelected: (asset) => {
+        const validatedAsset = assetItemSchema.safeParse(asset)
+
+        if (!validatedAsset.success) {
+          console.error(
+            'Invalid asset item:',
+            validatedAsset.error.errors,
+            'Received:',
+            asset
+          )
+          toastStore.add({
+            severity: 'error',
+            summary: t('assetBrowser.invalidAsset'),
+            detail: t('assetBrowser.invalidAssetDetail'),
+            life: 5000
+          })
+          return
+        }
+
+        const filename = getAssetFilename(validatedAsset.data)
+        const validatedFilename = assetFilenameSchema.safeParse(filename)
+
+        if (!validatedFilename.success) {
+          console.error(
+            'Invalid asset filename:',
+            validatedFilename.error.errors,
+            'for asset:',
+            validatedAsset.data.id
+          )
+          toastStore.add({
+            severity: 'error',
+            summary: t('assetBrowser.invalidFilename'),
+            detail: t('assetBrowser.invalidFilenameDetail'),
+            life: 5000
+          })
+          return
+        }
+
+        const oldValue = widget.value
+        widget.value = validatedFilename.data
+        onValueChange?.(widget, validatedFilename.data, oldValue)
+      }
+    })
+  }
+
+  const options: IWidgetAssetOptions = { openModal }
+
+  return node.addWidget('asset', widgetName, displayLabel, () => {}, options)
+}
--- a/src/platform/cloud/subscription/components/PricingTable.test.ts
+++ b/src/platform/cloud/subscription/components/PricingTable.test.ts
@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { createI18n } from 'vue-i18n'

 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
@@ -15,6 +15,7 @@ const mockIsYearlySubscription = ref(false)
 const mockAccessBillingPortal = vi.fn()
 const mockReportError = vi.fn()
 const mockTrackBeginCheckout = vi.fn()
+const mockUserId = ref<string | undefined>('user-123')
 const mockGetFirebaseAuthHeader = vi.fn(() =>
  Promise.resolve({ Authorization: 'Bearer test-token' })
 )
@@ -55,10 +56,11 @@ vi.mock('@/composables/useErrorHandling', () => ({
 }))

 vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: () => ({
-    getFirebaseAuthHeader: mockGetFirebaseAuthHeader,
-    userId: 'user-123'
-  }),
+  useFirebaseAuthStore: () =>
+    reactive({
+      getFirebaseAuthHeader: mockGetFirebaseAuthHeader,
+      userId: computed(() => mockUserId.value)
+    }),
  FirebaseAuthStoreError: class extends Error {}
 }))

@@ -151,6 +153,7 @@ describe('PricingTable', () => {
    mockIsActiveSubscription.value = false
    mockSubscriptionTier.value = null
    mockIsYearlySubscription.value = false
+    mockUserId.value = 'user-123'
    mockTrackBeginCheckout.mockReset()
    vi.mocked(global.fetch).mockResolvedValue({
      ok: true,
@@ -201,6 +204,33 @@ describe('PricingTable', () => {
      expect(mockAccessBillingPortal).toHaveBeenCalledWith('pro-yearly')
    })

+    it('should use the latest userId value when it changes after mount', async () => {
+      mockIsActiveSubscription.value = true
+      mockSubscriptionTier.value = 'STANDARD'
+      mockUserId.value = 'user-early'
+
+      const wrapper = createWrapper()
+      await flushPromises()
+
+      mockUserId.value = 'user-late'
+
+      const creatorButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('Creator'))
+
+      await creatorButton?.trigger('click')
+      await flushPromises()
+
+      expect(mockTrackBeginCheckout).toHaveBeenCalledTimes(1)
+      expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
+        user_id: 'user-late',
+        tier: 'creator',
+        cycle: 'yearly',
+        checkout_type: 'change',
+        previous_tier: 'standard'
+      })
+    })
+
    it('should not call accessBillingPortal when clicking current plan', async () => {
      mockIsActiveSubscription.value = true
      mockSubscriptionTier.value = 'CREATOR'
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -243,6 +243,7 @@

 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
+import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
 import SelectButton from 'primevue/selectbutton'
 import type { ToggleButtonPassThroughMethodOptions } from 'primevue/togglebutton'
@@ -333,7 +334,7 @@ const tiers: PricingTierConfig[] = [
 const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
  useSubscription()
 const telemetry = useTelemetry()
-const { userId } = useFirebaseAuthStore()
+const { userId } = storeToRefs(useFirebaseAuthStore())
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()

@@ -415,9 +416,9 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
    try {
      if (isActiveSubscription.value) {
        const checkoutAttribution = getCheckoutAttribution()
-        if (userId) {
+        if (userId.value) {
          telemetry?.trackBeginCheckout({
-            user_id: userId,
+            user_id: userId.value,
            tier: tierKey,
            cycle: currentBillingCycle.value,
            checkout_type: 'change',
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.test.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.test.ts
@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, reactive } from 'vue'

 import { performSubscriptionCheckout } from './subscriptionCheckoutUtil'

@@ -15,7 +16,7 @@ const {
  mockGetAuthHeader: vi.fn(() =>
    Promise.resolve({ Authorization: 'Bearer test-token' })
  ),
-  mockUserId: { value: 'user-123' },
+  mockUserId: { value: 'user-123' as string | undefined },
  mockIsCloud: { value: true },
  mockGetCheckoutAttribution: vi.fn(() => ({
    ga_client_id: 'ga-client-id',
@@ -32,12 +33,12 @@ vi.mock('@/platform/telemetry', () => ({
 }))

 vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
-    getFirebaseAuthHeader: mockGetAuthHeader,
-    get userId() {
-      return mockUserId.value
-    }
-  })),
+  useFirebaseAuthStore: vi.fn(() =>
+    reactive({
+      getFirebaseAuthHeader: mockGetAuthHeader,
+      userId: computed(() => mockUserId.value)
+    })
+  ),
  FirebaseAuthStoreError: class extends Error {}
 }))

@@ -53,6 +54,15 @@ vi.mock('@/platform/telemetry/utils/checkoutAttribution', () => ({

 global.fetch = vi.fn()

+function createDeferred<T>() {
+  let resolve: (value: T) => void = () => {}
+  const promise = new Promise<T>((res) => {
+    resolve = res
+  })
+
+  return { promise, resolve }
+}
+
 describe('performSubscriptionCheckout', () => {
  beforeEach(() => {
    vi.clearAllMocks()
@@ -105,4 +115,35 @@ describe('performSubscriptionCheckout', () => {
    )
    expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
  })
+
+  it('uses the latest userId when it changes after checkout starts', async () => {
+    const checkoutUrl = 'https://checkout.stripe.com/test'
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+    const authHeader = createDeferred<{ Authorization: string }>()
+
+    mockUserId.value = 'user-early'
+    mockGetAuthHeader.mockImplementationOnce(() => authHeader.promise)
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({ checkout_url: checkoutUrl })
+    } as Response)
+
+    const checkoutPromise = performSubscriptionCheckout('pro', 'yearly', true)
+
+    mockUserId.value = 'user-late'
+    authHeader.resolve({ Authorization: 'Bearer test-token' })
+
+    await checkoutPromise
+
+    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledTimes(1)
+    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
+      expect.objectContaining({
+        user_id: 'user-late',
+        tier: 'pro',
+        cycle: 'yearly',
+        checkout_type: 'new'
+      })
+    )
+    expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
+  })
 })
--- a/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
+++ b/src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts
@@ -1,3 +1,5 @@
+import { storeToRefs } from 'pinia'
+
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
@@ -37,9 +39,10 @@ export async function performSubscriptionCheckout(
 ): Promise<void> {
  if (!isCloud) return

-  const { getFirebaseAuthHeader, userId } = useFirebaseAuthStore()
+  const firebaseAuthStore = useFirebaseAuthStore()
+  const { userId } = storeToRefs(firebaseAuthStore)
  const telemetry = useTelemetry()
-  const authHeader = await getFirebaseAuthHeader()
+  const authHeader = await firebaseAuthStore.getFirebaseAuthHeader()

  if (!authHeader) {
    throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
@@ -84,9 +87,9 @@ export async function performSubscriptionCheckout(
  const data = await response.json()

  if (data.checkout_url) {
-    if (userId) {
+    if (userId.value) {
      telemetry?.trackBeginCheckout({
-        user_id: userId,
+        user_id: userId.value,
        tier: tierKey,
        cycle: currentBillingCycle,
        checkout_type: 'new',
--- a/src/platform/settings/composables/useLitegraphSettings.ts
+++ b/src/platform/settings/composables/useLitegraphSettings.ts
@@ -2,6 +2,7 @@ import { watchEffect } from 'vue'

 import {
  CanvasPointer,
+  LGraph,
  LGraphNode,
  LiteGraph
 } from '@/lib/litegraph/src/litegraph'
@@ -162,4 +163,10 @@ export const useLitegraphSettings = () => {
      'Comfy.EnableWorkflowViewRestore'
    )
  })
+
+  watchEffect(() => {
+    LGraph.deduplicateSubgraphIds = settingStore.get(
+      'Comfy.Graph.DeduplicateSubgraphNodeIds'
+    )
+  })
 }
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -1201,5 +1201,16 @@ export const CORE_SETTINGS: SettingParams[] = [
    defaultValue: false,
    experimental: true,
    versionAdded: '1.40.0'
+  },
+  {
+    id: 'Comfy.Graph.DeduplicateSubgraphNodeIds',
+    category: ['Comfy', 'Graph', 'Subgraph'],
+    name: 'Deduplicate subgraph node IDs',
+    tooltip:
+      'Automatically reassign duplicate node IDs in subgraphs when loading a workflow.',
+    type: 'boolean',
+    defaultValue: false,
+    experimental: true,
+    versionAdded: '1.40.0'
  }
 ]
--- a/src/platform/workspace/api/workspaceApi.ts
+++ b/src/platform/workspace/api/workspaceApi.ts
@@ -211,6 +211,7 @@ export interface BillingStatusResponse {
  billing_status?: BillingStatus
  has_funds: boolean
  cancel_at?: string
+  renewal_date?: string
 }

 export interface BillingBalanceResponse {
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { whenever } from '@vueuse/core'
 import { onMounted, ref } from 'vue'

 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -13,15 +14,24 @@ const props = defineProps<{

 const domEl = ref<HTMLElement>()

-const { canvas } = useCanvasStore()
-onMounted(() => {
+const canvasStore = useCanvasStore()
+const { canvas } = canvasStore
+
+function mountWidgetElement() {
  if (!domEl.value) return
  const node = canvas?.graph?.getNodeById(props.nodeId) ?? undefined
  if (!node) return
  const widget = node.widgets?.find((w) => w.name === props.widget.name)
  if (!widget || !isDOMWidget(widget)) return
+  if (domEl.value.contains(widget.element)) return
  domEl.value.replaceChildren(widget.element)
+}
+
+onMounted(() => {
+  mountWidgetElement()
 })
+
+whenever(() => !canvasStore.linearMode, mountWidgetElement)
 </script>
 <template>
  <div ref="domEl" @pointerdown.stop @pointermove.stop @pointerup.stop />
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -3,18 +3,10 @@ import { ref } from 'vue'
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { isAssetWidget, isComboWidget } from '@/lib/litegraph/src/litegraph'
-import type {
-  IBaseWidget,
-  IWidgetAssetOptions
-} from '@/lib/litegraph/src/types/widgets'
-import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
-import {
-  assetFilenameSchema,
-  assetItemSchema
-} from '@/platform/assets/schemas/assetSchema'
-import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+import { isComboWidget } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { assetService } from '@/platform/assets/services/assetService'
+import { createAssetWidget } from '@/platform/assets/utils/createAssetWidget'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type {
@@ -90,71 +82,20 @@ const addMultiSelectWidget = (
  return widget
 }

-const createAssetBrowserWidget = (
+function createAssetBrowserWidget(
  node: LGraphNode,
  inputSpec: ComboInputSpec,
  defaultValue: string | undefined
-): IBaseWidget => {
-  const currentValue = defaultValue
-  const displayLabel = currentValue ?? t('widgets.selectModel')
-  const assetBrowserDialog = useAssetBrowserDialog()
-
-  async function openModal(widget: IBaseWidget) {
-    if (!isAssetWidget(widget)) {
-      throw new Error(`Expected asset widget but received ${widget.type}`)
+): IBaseWidget {
+  return createAssetWidget({
+    node,
+    widgetName: inputSpec.name,
+    nodeTypeForBrowser: node.comfyClass ?? '',
+    defaultValue,
+    onValueChange: (widget, newValue, oldValue) => {
+      node.onWidgetChanged?.(widget.name, newValue, oldValue, widget)
    }
-    await assetBrowserDialog.show({
-      nodeType: node.comfyClass || '',
-      inputName: inputSpec.name,
-      currentValue: widget.value,
-      onAssetSelected: (asset) => {
-        const validatedAsset = assetItemSchema.safeParse(asset)
-
-        if (!validatedAsset.success) {
-          console.error(
-            'Invalid asset item:',
-            validatedAsset.error.errors,
-            'Received:',
-            asset
-          )
-          return
-        }
-
-        const filename = getAssetFilename(validatedAsset.data)
-        const validatedFilename = assetFilenameSchema.safeParse(filename)
-
-        if (!validatedFilename.success) {
-          console.error(
-            'Invalid asset filename:',
-            validatedFilename.error.errors,
-            'for asset:',
-            validatedAsset.data.id
-          )
-          return
-        }
-
-        const oldValue = widget.value
-        widget.value = validatedFilename.data
-        node.onWidgetChanged?.(
-          widget.name,
-          validatedFilename.data,
-          oldValue,
-          widget
-        )
-      }
-    })
-  }
-  const options: IWidgetAssetOptions = { openModal }
-
-  const widget = node.addWidget(
-    'asset',
-    inputSpec.name,
-    displayLabel,
-    () => undefined,
-    options
-  )
-
-  return widget
+  })
 }

 const createInputMappingWidget = (
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -288,6 +288,7 @@ const zSettings = z.object({
  'Comfy.Graph.CanvasInfo': z.boolean(),
  'Comfy.Graph.CanvasMenu': z.boolean(),
  'Comfy.Graph.CtrlShiftZoom': z.boolean(),
+  'Comfy.Graph.DeduplicateSubgraphNodeIds': z.boolean(),
  'Comfy.Graph.LiveSelection': z.boolean(),
  'Comfy.Graph.LinkMarkers': z.nativeEnum(LinkMarkerShape),
  'Comfy.Graph.ZoomSpeed': z.number(),
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -61,6 +61,7 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { useJobPreviewStore } from '@/stores/jobPreviewStore'
 import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useModelStore } from '@/stores/modelStore'
@@ -86,6 +87,10 @@ import {
  fixLinkInputSlots,
  isImageNode
 } from '@/utils/litegraphUtil'
+import {
+  createSharedObjectUrl,
+  releaseSharedObjectUrl
+} from '@/utils/objectUrlUtil'
 import {
  findLegacyRerouteNodes,
  noNativeReroutes
@@ -701,12 +706,13 @@ export class ComfyApp {

    api.addEventListener('b_preview_with_metadata', ({ detail }) => {
      // Enhanced preview with explicit node context
-      const { blob, displayNodeId } = detail
+      const { blob, displayNodeId, promptId } = detail
      const { setNodePreviewsByExecutionId, revokePreviewsByExecutionId } =
        useNodeOutputStore()
+      const blobUrl = createSharedObjectUrl(blob)
+      useJobPreviewStore().setPreviewUrl(promptId, blobUrl)
      // Ensure clean up if `executing` event is missed.
      revokePreviewsByExecutionId(displayNodeId)
-      const blobUrl = URL.createObjectURL(blob)
      // Preview cleanup is handled in progress_state event to support multiple concurrent previews
      const nodeParents = displayNodeId.split(':')
      for (let i = 1; i <= nodeParents.length; i++) {
@@ -714,6 +720,7 @@ export class ComfyApp {
          blobUrl
        ])
      }
+      releaseSharedObjectUrl(blobUrl)
    })

    api.init()
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -124,7 +124,9 @@ export function getWebpMetadata(file: File) {
          break
        }

-        offset += 8 + chunk_length
+        // RIFF spec requires odd-sized chunks to be padded with a single byte
+        // https://developers.google.com/speed/webp/docs/riff_container#riff_file_format
+        offset += 8 + chunk_length + (chunk_length % 2)
      }

      r(txt_chunks)
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -30,6 +30,7 @@ import type {
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { useJobPreviewStore } from '@/stores/jobPreviewStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { createNodeLocatorId } from '@/types/nodeIdentification'
 import { forEachNode, getNodeByExecutionId } from '@/utils/graphTraversalUtil'
@@ -454,6 +455,7 @@ export const useExecutionStore = defineStore('execution', () => {
      const map = { ...nodeProgressStatesByPrompt.value }
      delete map[promptId]
      nodeProgressStatesByPrompt.value = map
+      useJobPreviewStore().clearPreview(promptId)
    }
    if (activePromptId.value) {
      delete queuedPrompts.value[activePromptId.value]
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -15,6 +15,10 @@ import { useExecutionStore } from '@/stores/executionStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isVideoNode } from '@/utils/litegraphUtil'
+import {
+  releaseSharedObjectUrl,
+  retainSharedObjectUrl
+} from '@/utils/objectUrlUtil'

 const PREVIEW_REVOKE_DELAY_MS = 400

@@ -216,10 +220,19 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
  ) {
    const nodeLocatorId = executionIdToNodeLocatorId(executionId)
    if (!nodeLocatorId) return
+    const existingPreviews = app.nodePreviewImages[nodeLocatorId]
    if (scheduledRevoke[nodeLocatorId]) {
      scheduledRevoke[nodeLocatorId].stop()
      delete scheduledRevoke[nodeLocatorId]
    }
+    if (existingPreviews?.[Symbol.iterator]) {
+      for (const url of existingPreviews) {
+        releaseSharedObjectUrl(url)
+      }
+    }
+    for (const url of previewImages) {
+      retainSharedObjectUrl(url)
+    }
    latestPreview.value = previewImages
    app.nodePreviewImages[nodeLocatorId] = previewImages
    nodePreviewImages.value[nodeLocatorId] = previewImages
@@ -237,10 +250,19 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
    previewImages: string[]
  ) {
    const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
+    const existingPreviews = app.nodePreviewImages[nodeLocatorId]
    if (scheduledRevoke[nodeLocatorId]) {
      scheduledRevoke[nodeLocatorId].stop()
      delete scheduledRevoke[nodeLocatorId]
    }
+    if (existingPreviews?.[Symbol.iterator]) {
+      for (const url of existingPreviews) {
+        releaseSharedObjectUrl(url)
+      }
+    }
+    for (const url of previewImages) {
+      retainSharedObjectUrl(url)
+    }
    app.nodePreviewImages[nodeLocatorId] = previewImages
    nodePreviewImages.value[nodeLocatorId] = previewImages
  }
@@ -270,7 +292,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
    if (!previews?.[Symbol.iterator]) return

    for (const url of previews) {
-      URL.revokeObjectURL(url)
+      releaseSharedObjectUrl(url)
    }

    delete app.nodePreviewImages[nodeLocatorId]
@@ -287,7 +309,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
      if (!previews?.[Symbol.iterator]) continue

      for (const url of previews) {
-        URL.revokeObjectURL(url)
+        releaseSharedObjectUrl(url)
      }
    }
    app.nodePreviewImages = {}
@@ -326,6 +348,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {

    // Clear preview images
    if (app.nodePreviewImages[nodeLocatorId]) {
+      const previews = app.nodePreviewImages[nodeLocatorId]
+      if (previews?.[Symbol.iterator]) {
+        for (const url of previews) {
+          releaseSharedObjectUrl(url)
+        }
+      }
      delete app.nodePreviewImages[nodeLocatorId]
      delete nodePreviewImages.value[nodeLocatorId]
    }
--- a/src/stores/jobPreviewStore.ts
+++ b/src/stores/jobPreviewStore.ts
@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia'
+import { computed, readonly, ref, watch } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import {
+  releaseSharedObjectUrl,
+  retainSharedObjectUrl
+} from '@/utils/objectUrlUtil'
+
+type PromptPreviewMap = Record<string, string>
+
+export const useJobPreviewStore = defineStore('jobPreview', () => {
+  const settingStore = useSettingStore()
+  const previewsByPromptId = ref<PromptPreviewMap>({})
+  const readonlyPreviewsByPromptId = readonly(previewsByPromptId)
+
+  const previewMethod = computed(() =>
+    settingStore.get('Comfy.Execution.PreviewMethod')
+  )
+  const isPreviewEnabled = computed(() => previewMethod.value !== 'none')
+
+  function setPreviewUrl(promptId: string | undefined, url: string) {
+    if (!promptId || !isPreviewEnabled.value) return
+    const current = previewsByPromptId.value[promptId]
+    if (current === url) return
+    if (current) releaseSharedObjectUrl(current)
+    retainSharedObjectUrl(url)
+    previewsByPromptId.value = {
+      ...previewsByPromptId.value,
+      [promptId]: url
+    }
+  }
+
+  function clearPreview(promptId: string | undefined) {
+    if (!promptId) return
+    const current = previewsByPromptId.value[promptId]
+    if (!current) return
+    releaseSharedObjectUrl(current)
+    const next = { ...previewsByPromptId.value }
+    delete next[promptId]
+    previewsByPromptId.value = next
+  }
+
+  function clearAllPreviews() {
+    Object.values(previewsByPromptId.value).forEach((url) => {
+      releaseSharedObjectUrl(url)
+    })
+    previewsByPromptId.value = {}
+  }
+
+  watch(isPreviewEnabled, (enabled) => {
+    if (!enabled) clearAllPreviews()
+  })
+
+  return {
+    previewsByPromptId: readonlyPreviewsByPromptId,
+    isPreviewEnabled,
+    setPreviewUrl,
+    clearPreview,
+    clearAllPreviews
+  }
+})
--- a/src/utils/objectUrlUtil.ts
+++ b/src/utils/objectUrlUtil.ts
@@ -0,0 +1,27 @@
+const objectUrlRefCounts = new Map<string, number>()
+
+const isBlobUrl = (url: string) => url.startsWith('blob:')
+
+export function createSharedObjectUrl(blob: Blob): string {
+  const url = URL.createObjectURL(blob)
+  objectUrlRefCounts.set(url, 1)
+  return url
+}
+
+export function retainSharedObjectUrl(url: string | undefined): void {
+  if (!url || !isBlobUrl(url)) return
+  objectUrlRefCounts.set(url, (objectUrlRefCounts.get(url) ?? 0) + 1)
+}
+
+export function releaseSharedObjectUrl(url: string | undefined): void {
+  if (!url || !isBlobUrl(url)) return
+
+  const currentCount = objectUrlRefCounts.get(url)
+  if (currentCount === undefined || currentCount <= 1) {
+    objectUrlRefCounts.delete(url)
+    URL.revokeObjectURL(url)
+    return
+  }
+
+  objectUrlRefCounts.set(url, currentCount - 1)
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +0,0 @@
-import baseConfig from '@comfyorg/design-system/tailwind-config'
-
-export default {
-  ...baseConfig,
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -45,7 +45,7 @@
    "src/types/**/*.d.ts",
    "playwright.config.ts",
    "playwright.i18n.config.ts",
-    "tailwind.config.ts",
+
    "tests-ui/**/*",
    "vite.config.mts",
    "vitest.config.ts"
Author	SHA1	Message	Date
Comfy Org PR Bot	061e96e488	1.39.11 (#8763 ) Patch version increment to 1.39.11 Base branch: `main` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8763-1-39-11-3036d73d365081458389fe558cd921ee) by [Unito](https://www.unito.io) Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>	2026-02-09 21:28:11 -08:00
Alexander Brown	ff9642d0cb	feat: deduplicate subgraph node IDs on workflow load (experimental) (#8762 ) ## Summary Add `ensureGlobalIdUniqueness` to reassign duplicate node IDs across subgraphs when loading workflows, gated behind an experimental setting. ## Changes - What: Shared `LGraphState` between root graph and subgraphs so ID counters are global. Added `ensureGlobalIdUniqueness()` method that detects and remaps colliding node IDs in subgraphs, preserving root graph IDs as canonical and patching link references. Gated behind `Comfy.Graph.DeduplicateSubgraphNodeIds` (experimental, default `false`). - Dependencies: None ## Review Focus - Shared state override on `Subgraph` (getter delegates to root, setter is no-op) — verify no existing code sets `subgraph.state` directly. - `Math.max` state merging in `configure()` prevents ID counter regression when loading subgraph definitions. - Feature flag wiring: static property on `LGraph`, synced from settings via `useLitegraphSettings`. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8762-feat-deduplicate-subgraph-node-IDs-on-workflow-load-experimental-3036d73d36508184b6cee5876dc4d935) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com>	2026-02-09 18:01:58 -08:00
AustinMroz	a6620a4ddc	Fix edge cases in subgraph removal logic (#8758 ) #8187 made removal of subgraphs cleanup the subgraph definition for the removed graph and call onRemove handlers. However, it missed some edge cases and broke subgraph conversion of selections containing subgraphs which this PR tries to address. - Deeply nested subgraphs are now also cleaned - Adding a subgraphNode to the graph also ensures nested subgraphs are added to subgraph definitions Reminder: under this change, nodes can continue to exist after their onRemoved handler has been called - It may be better to instead perform the "garbage collection" of subgraphs outside of the graph removal step to better handle edge cases like subgraph conversion where a subgraph may continue to persist after a parent subgraphNode has been removed from a graph. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8758-Fix-edge-cases-in-subgraph-removal-logic-3026d73d36508177b34ffdd2e0a114fe) by [Unito](https://www.unito.io)	2026-02-09 13:55:23 -08:00
Benjamin Lu	9209badd37	feat: add KSampler live previews to assets sidebar jobs (#8723 ) ## Summary Show live KSampler previews on active job cards/list items in the Assets sidebar, while preserving existing fallback behavior. ## Changes - What: - Added a prompt-scoped job preview store (`jobPreviewStore`) gated by `Comfy.Execution.PreviewMethod`. - Wired `b_preview_with_metadata` handling to map previews by `promptId`. - Extended queue job view model with `livePreviewUrl` and consumed it in both sidebar list and grid active job UIs. - Cleared prompt previews on execution reset. - Added ref-counted shared blob URL lifecycle utility (`objectUrlUtil`) and updated preview stores to retain/release shared URLs so each preview event creates one object URL. - Added/updated unit coverage in `useJobList.test.ts` for preview enable/disable mapping. ## Review Focus - Object URL lifecycle correctness across node previews and job previews (retain/release behavior). - Preview gating behavior when `Comfy.Execution.PreviewMethod` is `none`. - Active job UI fallback behavior (`livePreviewUrl` -> `iconImageUrl`). ## Screenshots (if applicable) <img width="808" height="614" alt="image" src="https://github.com/user-attachments/assets/37c66eb2-8c28-4eb4-bb86-5679cb77d740" /> <img width="775" height="345" alt="image" src="https://github.com/user-attachments/assets/aa420642-b0d4-4ae6-b94a-e7934b5df9d6" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8723-feat-add-KSampler-live-previews-to-assets-sidebar-jobs-3006d73d365081aeb81dd8279bf99f94) by [Unito](https://www.unito.io)	2026-02-09 10:49:27 -08:00
Benjamin Lu	815be49112	fix: keep begin_checkout user_id reactive in subscription flows (#8726 ) ## Summary Use reactive `userId` reads for `begin_checkout` telemetry so delayed auth state updates are reflected at event time instead of using a stale snapshot. ## Changes - What: switched subscription checkout telemetry paths to `storeToRefs(useFirebaseAuthStore())` and read `userId.value` when dispatching `trackBeginCheckout`. - What: added regression tests that mutate `userId` after setup / after checkout starts and assert telemetry uses the updated ID. ## Review Focus - Verify `PricingTable` and `performSubscriptionCheckout` still emit exactly one `begin_checkout` event per action, with `checkout_type: change` and `checkout_type: new` in their respective paths. - Verify the new tests would fail with stale store destructuring (manually validated during development). ## Screenshots (if applicable) N/A ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8726-fix-keep-begin_checkout-user_id-reactive-in-subscription-flows-3006d73d365081888c84c0335ab52e09) by [Unito](https://www.unito.io)	2026-02-09 02:01:23 -08:00
Hunter	adbfb83767	feat: wire renewal_date from cloud billing status (#8754 ) ## Summary Wire `renewal_date` from the cloud `/billing/status` response into the workspace subscription UI so users can see when their subscription renews. ## Problem The workspace billing adapter hardcoded `renewalDate: null` because the cloud billing status endpoint didn't return a renewal date. The `SubscriptionPanelContentWorkspace` component already has UI for displaying it — it just had no data. Personal Workspace (existing `cloud-subscription-status`): <img width="181" height="112" alt="Screenshot 2026-02-08 at 7 54 53 PM" src="https://github.com/user-attachments/assets/a96ba2cd-10d0-442a-ae72-dbc663a9e52b" /> Current missing data from `/billing/status`: <img width="240" height="124" alt="Screenshot 2026-02-08 at 7 55 38 PM" src="https://github.com/user-attachments/assets/a3f51ce3-6663-43e1-97ed-d012a6a8a5ba" /> ## Solution - Add `renewal_date?: string` to `BillingStatusResponse` interface - Use `status.renewal_date ?? null` instead of hardcoded `null` in `useWorkspaceBilling` ### Related - Cloud PR: Comfy-Org/cloud#2370 (adds `renewal_date` to the endpoint) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8754-feat-wire-renewal_date-from-cloud-billing-status-3026d73d365081c7ae51d79ef0633a1d) by [Unito](https://www.unito.io)	2026-02-08 23:49:20 -08:00
Terry Jia	3238ad3d32	fix: re-mount DOM widget elements after leaving Linear mode (#8753 ) ## Summary LinearView renders its own WidgetDOM instances which steal the widget.element via replaceChildren. When LinearView unmounts (v-if="linearMode") the element is removed from the DOM entirely. The canvas-side WidgetDOM stays mounted but its container is now empty, so DOM widgets (e.g. Three.js scenes) disappear. Watch canvasStore.linearMode and reclaim the element when switching back from Linear to Canvas mode. ## Screenshots (if applicable) before https://github.com/user-attachments/assets/78cea2bc-c4b3-4b21-bdb3-a521bb0d3062 after https://github.com/user-attachments/assets/8f92c44d-9514-4001-bbdb-bc4c80468ed7 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8753-fix-re-mount-DOM-widget-elements-after-leaving-Linear-mode-3026d73d3650810b8968eff13dc84e9a) by [Unito](https://www.unito.io)	2026-02-08 22:51:57 -05:00
Comfy Org PR Bot	be515d6fcc	1.39.10 (#8752 ) Patch version increment to 1.39.10 Base branch: `main` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8752-1-39-10-3026d73d3650816ebe1edb895feb37a1) by [Unito](https://www.unito.io) --------- Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com>	2026-02-08 17:30:05 -08:00
Christian Byrne	b583c92c64	fix: only show Failed Tests section when there are actual failures (#8575 ) ## Description The Playwright test comment was showing a "❌ Failed Tests" section header even when there were only flaky tests (no actual failures). This was confusing because the red X suggested failure when tests actually passed. Before: Shows "❌ Failed Tests" section for flaky-only runs After: Only shows "❌ Failed Tests" section when there are actual failures; flaky tests are treated as passing ## Related Issue Fixes the misleading comment behavior seen in PR #8573 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8575-fix-only-show-Failed-Tests-section-when-there-are-actual-failures-2fc6d73d36508167889cc252e4e06f2e) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>	2026-02-08 13:14:38 -08:00
Christian Byrne	c0a209226d	fix: handle RIFF padding for odd-sized WEBP chunks (#8527 ) ## Summary Fix WEBP workflow loading failures for files with odd-sized chunks before the EXIF chunk. ## Problem WEBP files use the RIFF container format which [requires odd-sized chunks to be padded with a single byte](https://developers.google.com/speed/webp/docs/riff_container#riff_file_format): > If Chunk Size is odd, a single padding byte -- which MUST be 0 to conform with RIFF -- is added. The `getWebpMetadata` function was not accounting for this padding, causing it to miss the EXIF chunk in files with odd-sized preceding chunks. This resulted in "Unable to find workflow in [filename].webp" errors for valid WEBP files. ## Solution Add the padding byte to the offset calculation: ```typescript offset += 8 + chunk_length + (chunk_length % 2) ``` ## Testing - Tested with the sample image provided in the issue which previously failed to load Fixes #8076 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8527-fix-handle-RIFF-padding-for-odd-sized-WEBP-chunks-2fa6d73d3650815fb849fb6a4e767162) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>	2026-02-08 12:20:31 -08:00
Christian Byrne	c91d811d00	feat(cloud): add asset widget support for PrimitiveNode model selection (#8598 ) Add cloud asset widget creation in `_createWidget()` using `isAssetBrowserEligible()` - Extract shared `createAssetWidget` factory to `src/platform/assets/utils/` - Refactor `useComboWidget.ts` to use the shared factory - Add `_finalizeWidget()` helper to DRY up widget sizing/callback setup - Pass target node's `comfyClass` and input name to Asset Browser for correct model filtering - Check `Comfy.Assets.UseAssetAPI` setting (matches `useComboWidget.ts` behavior) - Sync existing target widget value to asset widget - Add toast notifications for asset validation errors - Add i18n translations for invalidAsset and invalidFilename errors Supersedes #8461 (clean rebase, no merge commits) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8598-feat-cloud-add-asset-widget-support-for-PrimitiveNode-model-selection-2fd6d73d365081a8afa7c2e91762f11c) by [Unito](https://www.unito.io) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * New Features * Introduced asset widget integration for cloud-based model selection, enabling users to browse and select assets through an improved interface. * Added comprehensive asset validation with enhanced error messages for invalid assets and filenames. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: guill <jacob.e.segal@gmail.com> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: AustinMroz <austin@comfy.org> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe> Co-authored-by: Kelly Yang <124ykl@gmail.com> Co-authored-by: sno <snomiao@gmail.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com> Co-authored-by: Terry Jia <terryjia88@gmail.com> Co-authored-by: Luke Mino-Altherr <luke@comfy.org> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>	2026-02-08 12:18:13 -08:00
Alexander Brown	e625b0351c	feat: migrate from @iconify/tailwind to @iconify/tailwind4 (#8724 ) ## Summary Migrate from `@iconify/tailwind` (Tailwind 3 JS plugin) to `@iconify/tailwind4` (native Tailwind 4 CSS plugin), moving all config into CSS directives. ## Changes - What: Replace `addDynamicIconSelectors()` JS plugin with `@plugin "@iconify/tailwind4"` CSS directive. Move `boxShadow` theme extension into `@theme` block. Delete both `tailwind.config.ts` files and the runtime `iconCollection.ts` module. - Dependencies: `@iconify/tailwind` removed, `@iconify/tailwind4` added ## Review Focus - `from-folder` path resolution in monorepo context (paths relative to project root) - SVG auto-cleanup behavior of `from-folder` vs the previous manual `iconCollection.ts` loader - Removal of `@config` directive and both tailwind config files — all config now in CSS ## Files \| File \| Change \| \|------\|--------\| \| `pnpm-workspace.yaml` \| Swap catalog entry \| \| `packages/design-system/package.json` \| Swap dep, remove `tailwind-config` export \| \| `packages/design-system/src/css/style.css` \| Add `@plugin`, `--shadow-interface` theme token, remove `@config` \| \| `packages/design-system/tailwind.config.ts` \| Deleted \| \| `packages/design-system/src/iconCollection.ts` \| Deleted \| \| `tailwind.config.ts` \| Deleted \| \| `tsconfig.json`, `components.json` \| Remove stale references \| \| `knip.config.ts` \| Ignore `@iconify-json/lucide` (CSS-consumed, not JS-imported) \| \| Docs \| Updated `CONTRIBUTING.md` and `icons/README.md` \| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8724-feat-migrate-from-iconify-tailwind-to-iconify-tailwind4-3006d73d36508144a9b3e7ae73448f98) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com>	2026-02-07 22:35:34 -08:00
Benjamin Lu	a56f2d3883	fix: stabilize flaky workflows save-as browser assertions (#8735 ) ## Summary Stabilize flaky workflows sidebar browser tests by waiting for eventual UI state after `Save As`/overwrite operations. ## Changes - What: Replace immediate assertions with retrying `expect.poll(...)` in `browser_tests/tests/sidebar/workflows.spec.ts` for: - `Can save workflow as` - `Can overwrite other workflows with save as` ## Review Focus Verify the polling assertions are scoped to the intended eventual UI state and do not hide real regressions. ## Screenshots (if applicable) N/A ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8735-fix-stabilize-flaky-workflows-save-as-browser-assertions-3016d73d3650814abad1d767c0910ef6) by [Unito](https://www.unito.io)	2026-02-07 22:35:14 -08:00