[automated] Apply ESLint and Oxfmt fixes

docs: weekly documentation accuracy update
1.41.9 (#9312 )
2026-03-15 18:07:35 +00:00 · 2026-03-02 09:23:15 +00:00 · 2026-03-02 09:21:06 +00:00 · 2026-03-01 20:19:10 -08:00 · 2026-02-28 23:29:21 -08:00 · 2026-02-28 20:07:12 -08:00
216 changed files with 13069 additions and 1585 deletions
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -5,3 +5,10 @@ reviews:
  high_level_summary: false
  auto_review:
    drafts: true
+    ignore_title_keywords:
+      - '[release]'
+      - '[backport'
+    ignore_usernames:
+      - comfy-pr-bot
+      - github-actions
+      - github-actions[bot]
--- a/.github/workflows/cloud-dispatch-build.yaml
+++ b/.github/workflows/cloud-dispatch-build.yaml
@@ -0,0 +1,45 @@
+---
+# Dispatches a frontend-asset-build event to the cloud repo on push to
+# cloud/* branches and main. The cloud repo handles the actual build,
+# GCS upload, and secret management (Sentry, Algolia, GCS creds).
+#
+# This is fire-and-forget — it does NOT wait for the cloud workflow to
+# complete. Status is visible in the cloud repo's Actions tab.
+
+name: Cloud Frontend Build Dispatch
+
+on:
+  push:
+    branches:
+      - 'cloud/*'
+      - 'main'
+  workflow_dispatch:
+
+permissions: {}
+
+concurrency:
+  group: cloud-dispatch-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  dispatch:
+    # Fork guard: prevent forks from dispatching to the cloud repo
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Build client payload
+        id: payload
+        run: |
+          payload="$(jq -nc \
+            --arg ref "${GITHUB_SHA}" \
+            --arg branch "${GITHUB_REF_NAME}" \
+            '{ref: $ref, branch: $branch}')"
+          echo "json=${payload}" >> "${GITHUB_OUTPUT}"
+
+      - name: Dispatch to cloud repo
+        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
+        with:
+          token: ${{ secrets.CLOUD_DISPATCH_TOKEN }}
+          repository: Comfy-Org/cloud
+          event-type: frontend-asset-build
+          client-payload: ${{ steps.payload.outputs.json }}
--- a/browser_tests/assets/subgraphs/subgraph-nested-promotion.json
+++ b/browser_tests/assets/subgraphs/subgraph-nested-promotion.json
@@ -0,0 +1,760 @@
+{
+  "id": "9a37f747-e96b-4304-9212-7abcaad7bdac",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 18,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "PreviewAny",
+      "pos": [1031, 434],
+      "size": [250, 178],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 5
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": [null, null, null]
+    },
+    {
+      "id": 5,
+      "type": "1e38d8ea-45e1-48a5-aa20-966584201867",
+      "pos": [788, 433.5],
+      "size": [225, 380],
+      "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": [
+          ["3", "string_a"],
+          ["4", "value"],
+          ["6", "value"],
+          ["6", "value_1"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveStringMultiline",
+      "pos": [548, 451],
+      "size": [225, 142],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [4]
+        }
+      ],
+      "title": "Outer",
+      "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": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 0",
+        "inputNode": {
+          "id": -10,
+          "bounding": [351, 432.5, 120, 120]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1352, 294.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]
+          },
+          {
+            "id": "5fb3dcf7-9bfd-4b3c-a1b9-750b4f3edf19",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [13],
+            "pos": [451, 472.5]
+          },
+          {
+            "id": "55d24b8a-7c82-4b02-8e3d-ff31ffb8aa13",
+            "name": "value_1",
+            "type": "STRING",
+            "linkIds": [16],
+            "pos": [451, 492.5]
+          },
+          {
+            "id": "c1fe7cc3-547e-4fb0-b763-61888558d4bd",
+            "name": "value_1_1",
+            "type": "STRING",
+            "linkIds": [18],
+            "pos": [451, 512.5]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "fbe975ba-d7c2-471e-a99a-a1e2c6ab466d",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "STRING",
+            "pos": [1372, 314.5]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 4,
+            "type": "PrimitiveStringMultiline",
+            "pos": [504, 437],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 13
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [2]
+              }
+            ],
+            "title": "Inner 1",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 1\n"]
+          },
+          {
+            "id": 3,
+            "type": "StringConcatenate",
+            "pos": [743, 325],
+            "size": [347, 231],
+            "flags": {},
+            "order": 0,
+            "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": [1115, 301],
+            "size": [210, 196],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 7
+              },
+              {
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 16
+              },
+              {
+                "name": "value_1",
+                "type": "STRING",
+                "widget": {
+                  "name": "value_1"
+                },
+                "link": 18
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [9]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["5", "string_a"],
+                ["11", "value"],
+                ["9", "value"],
+                ["10", "string_a"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "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"
+          },
+          {
+            "id": 13,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 4,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 16,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 6,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 18,
+            "origin_id": -10,
+            "origin_slot": 3,
+            "target_id": 6,
+            "target_slot": 2,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "9be42452-056b-4c99-9f9f-7381d11c4454",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 1",
+        "inputNode": {
+          "id": -10,
+          "bounding": [180, 739, 120, 100]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1246, 612, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "01c05c51-86b5-4bad-b32f-9c911683a13d",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [4],
+            "localized_name": "string_a",
+            "pos": [280, 759]
+          },
+          {
+            "id": "d50f6a62-0185-43d4-a174-a8a94bd8f6e7",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [14],
+            "pos": [280, 779]
+          },
+          {
+            "id": "6b78450e-5986-49cd-b743-c933e5a34a69",
+            "name": "value_1",
+            "type": "STRING",
+            "linkIds": [17],
+            "pos": [280, 799]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "a8bcf3bf-a66a-4c71-8d92-17a2a4d03686",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [12],
+            "localized_name": "STRING",
+            "pos": [1266, 632]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 11,
+            "type": "PrimitiveStringMultiline",
+            "pos": [334, 742],
+            "size": [210, 88],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 14
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "title": "Inner 2",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 2\n"]
+          },
+          {
+            "id": 10,
+            "type": "StringConcatenate",
+            "pos": [581, 637],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "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": 9,
+            "type": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+            "pos": [1004, 613],
+            "size": [210, 142],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 11
+              },
+              {
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 17
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [12]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["7", "string_a"],
+                ["8", "value"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 11,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": 10,
+            "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"
+          },
+          {
+            "id": 14,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 17,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 9,
+            "target_slot": 1,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 2",
+        "inputNode": {
+          "id": -10,
+          "bounding": [262, 1222, 120, 80]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1123.089999999999, 1125.1999999999998, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "934a8baa-d79c-428c-8ec9-814ad437d7c7",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "string_a",
+            "pos": [362, 1242]
+          },
+          {
+            "id": "3a545207-7202-42a9-a82f-3b62e1b0f459",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [15],
+            "pos": [362, 1262]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "4c3d243b-9ff6-4dcd-9dbf-e4ec8e1fc879",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [10],
+            "localized_name": "STRING",
+            "pos": [1143.089999999999, 1145.1999999999998]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 8,
+            "type": "PrimitiveStringMultiline",
+            "pos": [412.96000000000004, 1228.2399999999996],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [8]
+              }
+            ],
+            "title": "Inner 3",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 3\n"]
+          },
+          {
+            "id": 7,
+            "type": "StringConcatenate",
+            "pos": [686.08, 1132.38],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "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": ["", "", ""]
+          }
+        ],
+        "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"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 8,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-412, 11]
+    },
+    "frontendVersion": "1.41.7"
+  },
+  "version": 0.4
+}
--- a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
+++ b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -171,6 +171,7 @@ test.describe('Node Interaction', () => {

  test('Can drag node', { tag: '@screenshot' }, async ({ comfyPage }) => {
    await comfyPage.nodeOps.dragTextEncodeNode2()
+    await comfyPage.nextFrame()
    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
  })

--- a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
--- a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png
+++ b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png
--- a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png
+++ b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png
--- a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png
+++ b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png
--- a/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png
+++ b/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png
--- a/browser_tests/tests/subgraphPromotion.spec.ts
+++ b/browser_tests/tests/subgraphPromotion.spec.ts
@@ -555,6 +555,74 @@ test.describe(
      })
    })

+    test.describe('Nested Promoted Widget Disabled State', () => {
+      test('Externally linked promoted widget is disabled, unlinked ones are not', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        await comfyPage.nextFrame()
+
+        // Node 5 (Sub 0) has 4 promoted widgets. The first (string_a) has its
+        // slot connected externally from the Outer node, so it should be
+        // disabled. The remaining promoted textarea widgets (value, value_1)
+        // are unlinked and should be enabled.
+        const promotedNames = await getPromotedWidgetNames(comfyPage, '5')
+        expect(promotedNames).toContain('string_a')
+        expect(promotedNames).toContain('value')
+
+        const disabledState = await comfyPage.page.evaluate(() => {
+          const node = window.app!.canvas.graph!.getNodeById('5')
+          return (node?.widgets ?? []).map((w) => ({
+            name: w.name,
+            disabled: !!w.computedDisabled
+          }))
+        })
+
+        const linkedWidget = disabledState.find((w) => w.name === 'string_a')
+        expect(linkedWidget?.disabled).toBe(true)
+
+        const unlinkedWidgets = disabledState.filter(
+          (w) => w.name !== 'string_a'
+        )
+        for (const w of unlinkedWidgets) {
+          expect(w.disabled).toBe(false)
+        }
+      })
+
+      test('Unlinked promoted textarea widgets are editable on the subgraph exterior', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        await comfyPage.nextFrame()
+
+        // The promoted textareas that are NOT externally linked should be
+        // fully opaque and interactive.
+        const textareas = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textareas.first()).toBeVisible()
+
+        const count = await textareas.count()
+        for (let i = 0; i < count; i++) {
+          const textarea = textareas.nth(i)
+          const wrapper = textarea.locator('..')
+          const opacity = await wrapper.evaluate(
+            (el) => getComputedStyle(el).opacity
+          )
+
+          if (opacity === '1' && (await textarea.isEditable())) {
+            const testContent = `nested-promotion-edit-${i}`
+            await textarea.fill(testContent)
+            await expect(textarea).toHaveValue(testContent)
+          }
+        }
+      })
+    })
+
    test.describe('Promotion Cleanup', () => {
      test('Removing subgraph node clears promotion store entries', async ({
        comfyPage
--- a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts-snapshots/vue-node-multiple-promoted-previews-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts-snapshots/vue-node-multiple-promoted-previews-chromium-linux.png
--- a/docs/SETTINGS.md
+++ b/docs/SETTINGS.md
@@ -6,13 +6,13 @@ ComfyUI frontend uses a comprehensive settings system for user preferences with

 ### Settings Architecture

- Settings are defined as `SettingParams` in `src/constants/coreSettings.ts`
+- Settings are defined as `SettingParams` in `src/platform/settings/constants/coreSettings.ts`
 - Registered at app startup, loaded/saved via `useSettingStore` (Pinia)
 - Persisted per user via backend `/settings` endpoint
 - If a value hasn't been set by the user, the store returns the computed default

 ```typescript
-// From src/stores/settingStore.ts:105-122
+// From src/platform/settings/settingStore.ts:105-122
 function getDefaultValue<K extends keyof Settings>(
  key: K
 ): Settings[K] | undefined {
@@ -35,7 +35,7 @@ function getDefaultValue<K extends keyof Settings>(
 Settings are registered after server values are loaded:

 ```typescript
-// From src/components/graph/GraphCanvas.vue:311-315
+// From src/components/graph/GraphCanvas.vue (lines ~499)
 CORE_SETTINGS.forEach((setting) => {
  settingStore.addSetting(setting)
 })
@@ -50,7 +50,7 @@ await newUserService().initializeIfNewUser(settingStore)
 You can compute defaults dynamically using function defaults that access runtime context:

 ```typescript
-// From src/constants/coreSettings.ts:94-101
+// From src/platform/settings/constants/coreSettings.ts
 {
  id: 'Comfy.Sidebar.Size',
  // Default to small if the window is less than 1536px(2xl) wide
@@ -59,7 +59,7 @@ You can compute defaults dynamically using function defaults that access runtime
 ```

 ```typescript
-// From src/constants/coreSettings.ts:306
+// From src/platform/settings/constants/coreSettings.ts
 {
  id: 'Comfy.Locale',
  defaultValue: () => navigator.language.split('-')[0] || 'en'
@@ -71,7 +71,7 @@ You can compute defaults dynamically using function defaults that access runtime
 You can vary defaults by installed frontend version using `defaultsByInstallVersion`:

 ```typescript
-// From src/stores/settingStore.ts:129-150
+// From src/platform/settings/settingStore.ts:129-150
 function getVersionedDefaultValue<
  K extends keyof Settings,
  TValue = Settings[K]
@@ -101,7 +101,7 @@ function getVersionedDefaultValue<
 Example versioned defaults from codebase:

 ```typescript
-// From src/constants/coreSettings.ts:38-40
+// From src/platform/settings/constants/coreSettings.ts
 {
  id: 'Comfy.Graph.LinkReleaseAction',
  defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU,
@@ -168,7 +168,7 @@ Here are actual settings showing different patterns:
 The initial installed version is captured for new users to ensure versioned defaults remain stable:

 ```typescript
-// From src/services/newUserService.ts:49-53
+// From src/services/useNewUserService.ts
 await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
 ```

@@ -220,7 +220,7 @@ await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
 Values are stored per user via the backend. The store writes through API and falls back to defaults when not set:

 ```typescript
-// From src/stores/settingStore.ts:73-75
+// From src/platform/settings/settingStore.ts:73-75
 onChange(settingsById.value[key], newValue, oldValue)
 settingValues.value[key] = newValue
 await api.storeSetting(key, newValue)
@@ -245,7 +245,7 @@ await settingStore.set('Comfy.SomeSetting', newValue)
 Settings support migration from deprecated values:

 ```typescript
-// From src/stores/settingStore.ts:68-69, 172-175
+// From src/platform/settings/settingStore.ts:68-69, 172-175
 const newValue = tryMigrateDeprecatedValue(settingsById.value[key], clonedValue)

 // Migration happens during addSetting for existing values:
@@ -262,7 +262,7 @@ if (settingValues.value[setting.id] !== undefined) {
 Settings can define onChange callbacks that receive the setting definition, new value, and old value:

 ```typescript
-// From src/stores/settingStore.ts:73, 177
+// From src/platform/settings/settingStore.ts:73, 177
 onChange(settingsById.value[key], newValue, oldValue) // During set()
 onChange(setting, get(setting.id), undefined) // During addSetting()
 ```
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -11,7 +11,7 @@ An Architecture Decision Record captures an important architectural decision mad
 | ADR                                                 | Title                                    | Status   | Date       |
 | --------------------------------------------------- | ---------------------------------------- | -------- | ---------- |
 | [0001](0001-merge-litegraph-into-frontend.md)       | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
-| [0002](0002-monorepo-conversion.md)                 | Restructure as a Monorepo                | Accepted | 2025-08-25 |
+| [0002](0002-monorepo-conversion.md)                 | Restructure as a Monorepo                | Proposed | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md)            | Centralized Layout Management with CRDT  | Proposed | 2025-08-27 |
 | [0004](0004-fork-primevue-ui-library.md)            | Fork PrimeVue UI Library                 | Rejected | 2025-08-27 |
 | [0005](0005-remove-importmap-for-vue-extensions.md) | Remove Import Map for Vue Extensions     | Accepted | 2025-12-13 |
--- a/docs/extensions/core.md
+++ b/docs/extensions/core.md
@@ -25,63 +25,74 @@ ComfyUI's extension system follows these key principles:

 ## Core Extensions List

-The following table lists ALL core extensions in the system as of 2025-01-30:
+The following table lists ALL core extensions in the system as of 2026-03-02:

 ### Main Extensions

-| Extension               | Description                                                   | Category  |
-| ----------------------- | ------------------------------------------------------------- | --------- |
-| clipspace.ts            | Implements the Clipspace feature for temporary image storage  | Image     |
-| contextMenuFilter.ts    | Provides context menu filtering capabilities                  | UI        |
-| dynamicPrompts.ts       | Provides dynamic prompt generation capabilities               | Prompts   |
-| editAttention.ts        | Implements attention editing functionality                    | Text      |
-| electronAdapter.ts      | Adapts functionality for Electron environment                 | Platform  |
-| groupNode.ts            | Implements the group node functionality to organize workflows | Graph     |
-| groupNodeManage.ts      | Provides group node management operations                     | Graph     |
-| groupOptions.ts         | Handles group node configuration options                      | Graph     |
-| index.ts                | Main extension registration and coordination                  | Core      |
-| load3d.ts               | Supports 3D model loading and visualization                   | 3D        |
-| maskeditor.ts           | Implements the mask editor for image masking operations       | Image     |
-| nodeTemplates.ts        | Provides node template functionality                          | Templates |
-| noteNode.ts             | Adds note nodes for documentation within workflows            | Graph     |
-| previewAny.ts           | Universal preview functionality for various data types        | Preview   |
-| rerouteNode.ts          | Implements reroute nodes for cleaner workflow connections     | Graph     |
-| saveImageExtraOutput.ts | Handles additional image output saving                        | Image     |
-| saveMesh.ts             | Implements 3D mesh saving functionality                       | 3D        |
-| simpleTouchSupport.ts   | Provides basic touch interaction support                      | Input     |
-| slotDefaults.ts         | Manages default values for node slots                         | Nodes     |
-| uploadAudio.ts          | Handles audio file upload functionality                       | Audio     |
-| uploadImage.ts          | Handles image upload functionality                            | Image     |
-| webcamCapture.ts        | Provides webcam capture capabilities                          | Media     |
-| widgetInputs.ts         | Implements various widget input types                         | Widgets   |
+| Extension                    | Description                                                   | Category  |
+| ---------------------------- | ------------------------------------------------------------- | --------- |
+| clipspace.ts                 | Implements the Clipspace feature for temporary image storage  | Image     |
+| cloudBadges.ts               | Displays cloud-specific badges and indicators                 | Cloud     |
+| cloudFeedbackTopbarButton.ts | Provides cloud feedback UI in the topbar                      | Cloud     |
+| cloudRemoteConfig.ts         | Manages cloud remote configuration                            | Cloud     |
+| cloudSessionCookie.ts        | Handles cloud session cookie management                       | Cloud     |
+| cloudSubscription.ts         | Manages cloud subscription features                           | Cloud     |
+| contextMenuFilter.ts         | Provides context menu filtering capabilities                  | UI        |
+| customWidgets.ts             | Implements custom widget types                                | Widgets   |
+| dynamicPrompts.ts            | Provides dynamic prompt generation capabilities               | Prompts   |
+| editAttention.ts             | Implements attention editing functionality                    | Text      |
+| electronAdapter.ts           | Adapts functionality for Electron environment                 | Platform  |
+| groupNode.ts                 | Implements the group node functionality to organize workflows | Graph     |
+| groupNodeManage.ts           | Provides group node management operations                     | Graph     |
+| groupOptions.ts              | Handles group node configuration options                      | Graph     |
+| imageCompare.ts              | Implements image comparison functionality                     | Image     |
+| imageCrop.ts                 | Provides image cropping functionality                         | Image     |
+| index.ts                     | Main extension registration and coordination                  | Core      |
+| load3d.ts                    | Supports 3D model loading and visualization                   | 3D        |
+| load3dLazy.ts                | Implements lazy loading for 3D models                         | 3D        |
+| maskeditor.ts                | Implements the mask editor for image masking operations       | Image     |
+| nightlyBadges.ts             | Displays nightly build badges                                 | System    |
+| nodeTemplates.ts             | Provides node template functionality                          | Templates |
+| noteNode.ts                  | Adds note nodes for documentation within workflows            | Graph     |
+| painter.ts                   | Implements painting and drawing functionality                 | Image     |
+| previewAny.ts                | Universal preview functionality for various data types        | Preview   |
+| rerouteNode.ts               | Implements reroute nodes for cleaner workflow connections     | Graph     |
+| saveImageExtraOutput.ts      | Handles additional image output saving                        | Image     |
+| saveMesh.ts                  | Implements 3D mesh saving functionality                       | 3D        |
+| selectionBorder.ts           | Renders selection borders for selected nodes                  | UI        |
+| simpleTouchSupport.ts        | Provides basic touch interaction support                      | Input     |
+| slotDefaults.ts              | Manages default values for node slots                         | Nodes     |
+| uploadAudio.ts               | Handles audio file upload functionality                       | Audio     |
+| uploadImage.ts               | Handles image upload functionality                            | Image     |
+| webcamCapture.ts             | Provides webcam capture capabilities                          | Media     |
+| widgetInputs.ts              | Implements various widget input types                         | Widgets   |

-### Conditional Lines Subdirectory
+### Load3D Subdirectory

-Located in `extensions/core/load3d/conditional-lines/`:
+Located in `extensions/core/load3d/`:

-| File                        | Description                             |
-| --------------------------- | --------------------------------------- |
-| ColoredShadowMaterial.js    | Material for colored shadow rendering   |
-| ConditionalEdgesGeometry.js | Geometry for conditional edge rendering |
-| ConditionalEdgesShader.js   | Shader for conditional edges            |
-| OutsideEdgesGeometry.js     | Geometry for outside edge detection     |
+The load3d extension has been refactored into multiple manager modules:

-### Lines2 Subdirectory
-
-Located in `extensions/core/load3d/conditional-lines/Lines2/`:
-
-| File                               | Description                             |
-| ---------------------------------- | --------------------------------------- |
-| ConditionalLineMaterial.js         | Material for conditional line rendering |
-| ConditionalLineSegmentsGeometry.js | Geometry for conditional line segments  |
-
-### ThreeJS Override Subdirectory
-
-Located in `extensions/core/load3d/threejsOverride/`:
-
-| File                 | Description                                   |
-| -------------------- | --------------------------------------------- |
-| OverrideMTLLoader.js | Custom MTL loader with enhanced functionality |
+| File                    | Description                             |
+| ----------------------- | --------------------------------------- |
+| AnimationManager.ts     | Manages 3D animations                   |
+| CameraManager.ts        | Handles camera controls and positioning |
+| ControlsManager.ts      | Manages user controls for 3D viewing    |
+| EventManager.ts         | Handles events for 3D viewer            |
+| LightingManager.ts      | Manages lighting in 3D scenes           |
+| Load3d.ts               | Main 3D loading logic                   |
+| Load3DConfiguration.ts  | Configuration for 3D loading            |
+| Load3dUtils.ts          | Utility functions for 3D operations     |
+| LoaderManager.ts        | Manages different 3D format loaders     |
+| ModelExporter.ts        | Handles 3D model export functionality   |
+| RecordingManager.ts     | Manages 3D scene recording              |
+| SceneManager.ts         | Manages 3D scene setup and rendering    |
+| SceneModelManager.ts    | Manages models within scenes            |
+| ViewHelperManager.ts    | Provides view helpers for 3D navigation |
+| constants.ts            | Constants for 3D loading                |
+| exportMenuHelper.ts     | Helper for export menu functionality    |
+| interfaces.ts           | TypeScript interfaces for 3D loading    |
+| loader/FastPLYLoader.ts | Fast PLY format loader implementation   |

 ## Extension Development

--- a/docs/testing/unit-testing.md
+++ b/docs/testing/unit-testing.md
@@ -147,7 +147,7 @@ it('should subscribe to logs API', () => {
 })
 ```

-## Mocking Lodash Functions
+## Mocking Utility Functions

 Mocking utility functions like debounce:

--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -22,7 +22,9 @@ const extraFileExtensions = ['.vue']

 const commonGlobals = {
  ...globals.browser,
-  __COMFYUI_FRONTEND_VERSION__: 'readonly'
+  __COMFYUI_FRONTEND_VERSION__: 'readonly',
+  __DISTRIBUTION__: 'readonly',
+  __IS_NIGHTLY__: 'readonly'
 } as const

 const settings = {
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -41,7 +41,9 @@ const config: KnipConfig = {
    // Used by a custom node (that should move off of this)
    'src/scripts/ui/components/splitButton.ts',
    // Workflow files contain license names that knip misinterprets as binaries
-    '.github/workflows/ci-oss-assets-validation.yaml'
+    '.github/workflows/ci-oss-assets-validation.yaml',
+    // Pending integration in stacked PR
+    'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue'
  ],
  compilers: {
    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.6",
+  "version": "1.41.9",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -16,7 +16,7 @@
@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");

 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
-@source inline("icon-[comfy--{load-image,save-image,load-video,save-video,load-3-d,save-glb,image-batch,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,clip-text-encode,get-video-components,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0}]");
+@source inline("icon-[comfy--{load-image,save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0}]");

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

@@ -634,6 +634,18 @@
  }
 }

+@utility bg-subscription-gradient {
+  background: var(--color-subscription-button-gradient);
+}
+
+@utility highlight {
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+  font-weight: 700;
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  margin: -0.125rem 0.125rem;
+}
+
@utility scrollbar-hide {
  scrollbar-width: none;
  &::-webkit-scrollbar {
--- a/packages/design-system/src/icons/batch-images-node.svg
+++ b/packages/design-system/src/icons/batch-images-node.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 9C12.7761 9 13 9.22386 13 9.5V20C13 20.2761 13.2239 20.5 13.5 20.5H28C28.2761 20.5 28.5 20.7239 28.5 21C28.5 21.2761 28.2761 21.5 28 21.5H13.5C12.6716 21.5 12 20.8284 12 20V9.5C12 9.22386 12.2239 9 12.5 9ZM14.5 7C14.7761 7 15 7.22386 15 7.5V18C15 18.2761 15.2239 18.5 15.5 18.5H30C30.2761 18.5 30.5 18.7239 30.5 19C30.5 19.2761 30.2761 19.5 30 19.5H15.5C14.6716 19.5 14 18.8284 14 18V7.5C14 7.22386 14.2239 7 14.5 7ZM16.5 5C16.7761 5 17 5.22386 17 5.5V16C17 16.2761 17.2239 16.5 17.5 16.5H32C32.2761 16.5 32.5 16.7239 32.5 17C32.5 17.2761 32.2761 17.5 32 17.5H17.5C16.6716 17.5 16 16.8284 16 16V5.5C16 5.22386 16.2239 5 16.5 5ZM33.7061 2.5C34.4126 2.5 34.9999 3.08968 35 3.7998V14.2002C34.9999 14.9103 34.4126 15.5 33.7061 15.5H19.2939C18.5874 15.5 18.0001 14.9103 18 14.2002V3.7998C18.0001 3.08968 18.5874 2.5 19.2939 2.5H33.7061ZM19.1084 12.2676V14.2002C19.1085 14.3124 19.1814 14.3856 19.293 14.3857H33.7061C33.8179 14.3857 33.8915 14.3125 33.8916 14.2002V12.6094L30.7207 10.0615L28.1055 11.873C27.9107 12.005 27.6299 11.9923 27.4473 11.8438L23.8896 8.95312L19.1084 12.2676ZM19.2939 3.61426C19.1821 3.61426 19.1085 3.68744 19.1084 3.7998V10.9092L23.5957 7.79883C23.6707 7.74519 23.7587 7.71107 23.8496 7.7002C23.9954 7.68428 24.1465 7.72944 24.2598 7.82227L27.8164 10.7178L30.4385 8.90723C30.6334 8.7753 30.9141 8.78784 31.0967 8.93652L33.8916 11.1826V3.7998C33.8915 3.68747 33.8179 3.61426 33.7061 3.61426H19.2939ZM27.7939 5.09961C28.7054 5.09987 29.4561 5.8554 29.4561 6.77148C29.456 7.68754 28.7054 8.44213 27.7939 8.44238C26.8823 8.44238 26.1309 7.6877 26.1309 6.77148C26.1309 5.85524 26.8823 5.09961 27.7939 5.09961ZM27.7939 6.21387C27.4814 6.21387 27.2393 6.45737 27.2393 6.77148C27.2393 7.08557 27.4814 7.32812 27.7939 7.32812C28.1062 7.32788 28.3476 7.08542 28.3477 6.77148C28.3477 6.45752 28.1063 6.21411 27.7939 6.21387Z" fill="#8A8A8A"/>
+</svg>
--- a/packages/design-system/src/icons/lora-loader-model-only.svg
+++ b/packages/design-system/src/icons/lora-loader-model-only.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.12 4.65979C26.0073 3.75304 27.4985 3.73975 28.3787 4.65979L31.3397 7.62073H31.3387C32.2523 8.49397 32.253 10.0028 31.3182 10.8785L31.3192 10.8795L23.62 18.5797L22.5096 19.6891V7.27112L22.7 7.08069L25.12 4.65979Z" stroke="#8A8A8A" stroke-width="1.3"/>
+<path d="M32.3396 13.8499C33.6177 13.8499 34.65 14.8804 34.6501 16.1594V20.3401C34.6501 21.6199 33.618 22.6506 32.3396 22.6506H20.3503L21.4597 21.5403L29.1501 13.8499H32.3396Z" stroke="#8A8A8A" stroke-width="1.3"/>
+<path d="M17.7604 17.2496C17.1991 17.2496 16.7498 17.6986 16.7497 18.2594C16.7497 18.8208 17.1995 19.2701 17.7604 19.2701C18.3065 19.2699 18.7702 18.8157 18.7702 18.2594C18.7701 17.6982 18.3211 17.2499 17.7604 17.2496ZM22.1706 18.2399C22.1706 20.6987 20.2192 22.6498 17.7604 22.65C15.2992 22.65 13.3493 20.677 13.3493 18.2399V3.65979C13.3494 2.38005 14.3815 1.34933 15.6598 1.34924H19.8405C21.1222 1.34934 22.1421 2.38132 22.1706 3.64514V18.2399Z" stroke="#8A8A8A" stroke-width="1.3"/>
+</svg>
--- a/packages/design-system/src/icons/primitive-string-multiline.svg
+++ b/packages/design-system/src/icons/primitive-string-multiline.svg
--- a/packages/design-system/src/icons/video-slice.svg
+++ b/packages/design-system/src/icons/video-slice.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.8593 13C35.4827 13 36.0007 13.4988 36.0009 14.0996V22.9004C36.0007 23.5012 35.4827 24 34.8593 24H22.1425C21.5191 24 21.0011 23.5012 21.0009 22.9004V14.0996C21.0011 13.4988 21.5191 13 22.1425 13H34.8593ZM21.9794 21.2646V22.9004C21.9796 22.9953 22.0439 23.0566 22.1425 23.0566H34.8593C34.9579 23.0566 35.0222 22.9953 35.0224 22.9004V21.5547L32.2255 19.3984L29.9179 20.9307C29.746 21.0424 29.498 21.032 29.3369 20.9062L26.1982 18.4609L21.9794 21.2646ZM16.5009 10.5C16.777 10.5001 17.0009 10.7239 17.0009 11V17.5C17.001 18.3283 17.6727 18.9998 18.5009 19H18.7089L18.0615 18.3535C17.8665 18.1583 17.8665 17.8417 18.0615 17.6465C18.2567 17.4512 18.5742 17.4512 18.7695 17.6465L20.1835 19.0605C20.3785 19.2557 20.3784 19.5723 20.1835 19.7676L18.7695 21.1816C18.5742 21.3769 18.2567 21.3768 18.0615 21.1816C17.8666 20.9864 17.8664 20.6697 18.0615 20.4746L18.5361 20H18.5009C17.1204 19.9998 16.001 18.8806 16.0009 17.5V11C16.001 10.724 16.2249 10.5002 16.5009 10.5ZM22.1425 13.9424C22.0439 13.9424 21.9796 14.0047 21.9794 14.0996V20.1152L25.9384 17.4834C26.0045 17.4381 26.082 17.4096 26.162 17.4004C26.2907 17.3869 26.4244 17.4244 26.5244 17.5029L29.663 19.9531L31.9755 18.4219C32.1475 18.3102 32.3954 18.3204 32.5566 18.4463L35.0224 20.3467V14.0996C35.0222 14.0047 34.9579 13.9424 34.8593 13.9424H22.1425ZM29.6425 15.2002C30.4468 15.2003 31.1093 15.839 31.1093 16.6143C31.1093 17.3895 30.4469 18.0283 29.6425 18.0283C28.8381 18.0283 28.1747 17.3895 28.1747 16.6143C28.1748 15.839 28.8381 15.2002 29.6425 15.2002ZM29.6425 16.1426C29.3668 16.1426 29.1533 16.3485 29.1533 16.6143C29.1533 16.8801 29.3667 17.0859 29.6425 17.0859C29.9182 17.0859 30.1318 16.88 30.1318 16.6143C30.1318 16.3485 29.9182 16.1426 29.6425 16.1426ZM22.0917 0C23.6924 0.000102997 25.0009 1.29808 25.0009 2.91016V7.08984C25.0009 8.70192 23.6924 9.9999 22.0917 10H14.9111C13.3103 10 12.0009 8.70198 12.0009 7.08984V2.91016C12.0009 1.29802 13.3103 0 14.9111 0H22.0917ZM14.9111 1.04199C13.8598 1.04199 13.0331 1.87561 13.0331 2.91016V7.08984C13.0331 8.12439 13.8598 8.95801 14.9111 8.95801H22.0917C23.1429 8.95791 23.9697 8.12432 23.9697 7.08984V2.91016C23.9697 1.87568 23.1429 1.04209 22.0917 1.04199H14.9111ZM17.0146 2.36523C17.1026 2.36806 17.189 2.39596 17.2636 2.44531L20.5556 4.53613C20.7284 4.64278 20.7919 4.83988 20.7919 5C20.7919 5.16007 20.7283 5.35719 20.5556 5.46387L17.2646 7.55469C17.1075 7.65858 16.9024 7.66034 16.7441 7.56055L16.7431 7.55957C16.5867 7.45933 16.4941 7.27149 16.499 7.08398V2.91016C16.4953 2.64423 16.6989 2.38047 16.9755 2.36621L17.0146 2.36523ZM17.5068 6.1416L19.3095 5L17.5068 3.85449V6.1416ZM20.4999 5.22559L20.5234 5.19434C20.5303 5.1833 20.5364 5.17121 20.5419 5.15918C20.5308 5.1833 20.5167 5.20593 20.4999 5.22559Z" fill="#8A8A8A"/>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,7 +51,6 @@ onMounted(() => {
  // See: https://vite.dev/guide/build#load-error-handling
  window.addEventListener('vite:preloadError', (event) => {
    event.preventDefault()
-    // eslint-disable-next-line no-undef
    if (__DISTRIBUTION__ === 'cloud') {
      captureException(event.payload, {
        tags: { error_type: 'vite_preload_error' }
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -18,7 +18,7 @@
      <Splitter
        :key="splitterRefreshKey"
        class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
-        :state-key="sidebarStateKey"
+        :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
        state-storage="local"
        @resizestart="onResizestart"
      >
@@ -35,8 +35,10 @@
                )
              : 'bg-comfy-menu-bg pointer-events-auto'
          "
-          :min-size="sidebarLocation === 'left' ? 10 : 15"
-          :size="20"
+          :min-size="
+            sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
+          "
+          :size="SIDE_PANEL_SIZE"
          :style="firstPanelStyle"
          :role="sidebarLocation === 'left' ? 'complementary' : undefined"
          :aria-label="
@@ -54,7 +56,7 @@
        </SplitterPanel>

        <!-- Main panel (always present) -->
-        <SplitterPanel :size="80" class="flex flex-col">
+        <SplitterPanel :size="CENTER_PANEL_SIZE" class="flex flex-col">
          <slot name="topmenu" :sidebar-panel-visible />

          <Splitter
@@ -95,8 +97,10 @@
                )
              : 'bg-comfy-menu-bg pointer-events-auto'
          "
-          :min-size="sidebarLocation === 'right' ? 10 : 15"
-          :size="20"
+          :min-size="
+            sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
+          "
+          :size="SIDE_PANEL_SIZE"
          :style="lastPanelStyle"
          :role="sidebarLocation === 'right' ? 'complementary' : undefined"
          :aria-label="
@@ -123,8 +127,14 @@ import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

+import { useAppMode } from '@/composables/useAppMode'
+import {
+  BUILDER_MIN_SIZE,
+  CENTER_PANEL_SIZE,
+  SIDEBAR_MIN_SIZE,
+  SIDE_PANEL_SIZE
+} from '@/constants/splitterConstants'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useAppModeStore } from '@/stores/appModeStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -145,12 +155,12 @@ const unifiedWidth = computed(() =>

 const { focusMode } = storeToRefs(workspaceStore)

-const appModeStore = useAppModeStore()
+const { isSelectMode } = useAppMode()
 const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
 const showOffsideSplitter = computed(
-  () => rightSidePanelVisible.value || appModeStore.mode === 'builder:select'
+  () => rightSidePanelVisible.value || isSelectMode.value
 )

 const sidebarPanelVisible = computed(() => activeSidebarTab.value !== null)
@@ -174,7 +184,7 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
 * to recalculate the width and panel order
 */
 const splitterRefreshKey = computed(() => {
-  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}-${sidebarLocation.value}`
+  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}${isSelectMode.value ? '-builder' : ''}-${sidebarLocation.value}`
 })

 const firstPanelStyle = computed(() => {
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -56,43 +56,6 @@
              :queue-overlay-expanded="isQueueOverlayExpanded"
              @update:progress-target="updateProgressTarget"
            />
-            <Button
-              v-tooltip.bottom="queueHistoryTooltipConfig"
-              type="destructive"
-              size="md"
-              :aria-pressed="
-                isQueuePanelV2Enabled
-                  ? activeSidebarTabId === 'job-history'
-                  : isQueueProgressOverlayEnabled
-                    ? isQueueOverlayExpanded
-                    : undefined
-              "
-              class="relative px-3"
-              data-testid="queue-overlay-toggle"
-              @click="toggleQueueOverlay"
-              @contextmenu.stop.prevent="showQueueContextMenu"
-            >
-              <span class="text-sm font-normal tabular-nums">
-                {{ activeJobsLabel }}
-              </span>
-              <StatusBadge
-                v-if="activeJobsCount > 0"
-                data-testid="active-jobs-indicator"
-                variant="dot"
-                class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
-              />
-              <span class="sr-only">
-                {{
-                  isQueuePanelV2Enabled
-                    ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                    : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-                }}
-              </span>
-            </Button>
-            <ContextMenu
-              ref="queueContextMenu"
-              :model="queueContextMenuItems"
-            />
            <CurrentUserButton
              v-if="isLoggedIn && !isIntegratedTabBar"
              class="shrink-0"
@@ -148,14 +111,11 @@
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import ContextMenu from 'primevue/contextmenu'
-import type { MenuItem } from 'primevue/menuitem'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
 import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
 import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
@@ -169,12 +129,9 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
-import { useCommandStore } from '@/stores/commandStore'
-import { useExecutionStore } from '@/stores/executionStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
+import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isDesktop } from '@/platform/distribution/types'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -187,17 +144,11 @@ const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
-const { t, n } = useI18n()
+const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
-const commandStore = useCommandStore()
-const queueStore = useQueueStore()
-const executionStore = useExecutionStore()
 const executionErrorStore = useExecutionErrorStore()
 const queueUIStore = useQueueUIStore()
-const sidebarTabStore = useSidebarTabStore()
-const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
-const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
  useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
@@ -210,14 +161,6 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
  () => isActionbarEnabled.value && !isActionbarDocked.value
 )
-const activeJobsLabel = computed(() => {
-  const count = activeJobsCount.value
-  return t(
-    'sideToolbar.queueProgressOverlay.activeJobsShort',
-    { count: n(count) },
-    count
-  )
-})
 const isIntegratedTabBar = computed(
  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
@@ -246,24 +189,9 @@ const inlineProgressSummaryTarget = computed(() => {
 const shouldHideInlineProgressSummary = computed(
  () => isQueueProgressOverlayEnabled.value && isQueueOverlayExpanded.value
 )
-const queueHistoryTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
-)
 const customNodesManagerTooltipConfig = computed(() =>
  buildTooltipConfig(t('menu.manageExtensions'))
 )
-const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const queueContextMenuItems = computed<MenuItem[]>(() => [
-  {
-    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
-    icon: 'icon-[lucide--list-x] text-destructive-background',
-    class: '*:text-destructive-background',
-    disabled: queueStore.pendingTasks.length === 0,
-    command: () => {
-      void handleClearQueue()
-    }
-  }
-])

 const shouldShowRedDot = computed((): boolean => {
  return shouldShowConflictRedDot.value
@@ -286,27 +214,6 @@ onMounted(() => {
  }
 })

-const toggleQueueOverlay = () => {
-  if (isQueuePanelV2Enabled.value) {
-    sidebarTabStore.toggleSidebarTab('job-history')
-    return
-  }
-  commandStore.execute('Comfy.Queue.ToggleOverlay')
-}
-
-const showQueueContextMenu = (event: MouseEvent) => {
-  queueContextMenu.value?.show(event)
-}
-
-const handleClearQueue = async () => {
-  const pendingJobIds = queueStore.pendingTasks
-    .map((task) => task.jobId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  await commandStore.execute('Comfy.ClearPendingTasks')
-  executionStore.clearInitializationByJobIds(pendingJobIds)
-}
-
 const openCustomNodeManager = async () => {
  try {
    await managerState.openManager({
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -42,6 +42,38 @@
        >
          <i class="icon-[lucide--x] size-4" />
        </Button>
+        <Button
+          v-tooltip.bottom="queueHistoryTooltipConfig"
+          variant="secondary"
+          size="md"
+          :aria-pressed="
+            isQueuePanelV2Enabled
+              ? activeSidebarTabId === 'job-history'
+              : queueOverlayExpanded
+          "
+          class="relative px-3"
+          data-testid="queue-overlay-toggle"
+          @click="toggleQueueOverlay"
+          @contextmenu.stop.prevent="showQueueContextMenu"
+        >
+          <span class="text-sm font-normal tabular-nums">
+            {{ activeJobsLabel }}
+          </span>
+          <StatusBadge
+            v-if="activeJobsCount > 0"
+            data-testid="active-jobs-indicator"
+            variant="dot"
+            class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
+          />
+          <span class="sr-only">
+            {{
+              isQueuePanelV2Enabled
+                ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+            }}
+          </span>
+        </Button>
+        <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
      </div>
    </Panel>

@@ -65,11 +97,14 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
+import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem } from 'primevue/menuitem'
 import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'

+import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
@@ -77,6 +112,8 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { cn } from '@/utils/tailwindUtil'

 import ComfyRunButton from './ComfyRunButton'
@@ -92,8 +129,13 @@ const emit = defineEmits<{

 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
-const { t } = useI18n()
-const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
+const executionStore = useExecutionStore()
+const queueStore = useQueueStore()
+const sidebarTabStore = useSidebarTabStore()
+const { t, n } = useI18n()
+const { isIdle: isExecutionIdle } = storeToRefs(executionStore)
+const { activeJobsCount } = storeToRefs(queueStore)
+const { activeSidebarTabId } = storeToRefs(sidebarTabStore)

 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
@@ -318,11 +360,52 @@ watch(isDragging, (dragging) => {
 const cancelJobTooltipConfig = computed(() =>
  buildTooltipConfig(t('menu.interrupt'))
 )
+const queueHistoryTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
+)
+const activeJobsLabel = computed(() => {
+  const count = activeJobsCount.value
+  return t(
+    'sideToolbar.queueProgressOverlay.activeJobsShort',
+    { count: n(count) },
+    count
+  )
+})
+const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
+const queueContextMenuItems = computed<MenuItem[]>(() => [
+  {
+    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
+    icon: 'icon-[lucide--list-x] text-destructive-background',
+    class: '*:text-destructive-background',
+    disabled: queueStore.pendingTasks.length === 0,
+    command: () => {
+      void handleClearQueue()
+    }
+  }
+])

 const cancelCurrentJob = async () => {
  if (isExecutionIdle.value) return
  await commandStore.execute('Comfy.Interrupt')
 }
+const toggleQueueOverlay = () => {
+  if (isQueuePanelV2Enabled.value) {
+    sidebarTabStore.toggleSidebarTab('job-history')
+    return
+  }
+  commandStore.execute('Comfy.Queue.ToggleOverlay')
+}
+const showQueueContextMenu = (event: MouseEvent) => {
+  queueContextMenu.value?.show(event)
+}
+const handleClearQueue = async () => {
+  const pendingJobIds = queueStore.pendingTasks
+    .map((task) => task.jobId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  await commandStore.execute('Comfy.ClearPendingTasks')
+  executionStore.clearInitializationByJobIds(pendingJobIds)
+}

 const actionbarClass = computed(() =>
  cn(
--- a/src/components/appMode/AppModeToolbar.vue
+++ b/src/components/appMode/AppModeToolbar.vue
@@ -8,12 +8,12 @@ import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemp
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { cn } from '@/utils/tailwindUtil'
-import { useAppModeStore } from '@/stores/appModeStore'
+import { useAppMode } from '@/composables/useAppMode'

 const { t } = useI18n()
 const commandStore = useCommandStore()
 const workspaceStore = useWorkspaceStore()
-const appModeStore = useAppModeStore()
+const { enableAppBuilder, setMode } = useAppMode()
 const tooltipOptions = { showDelay: 300, hideDelay: 300 }

 const isAssetsActive = computed(
@@ -24,7 +24,7 @@ const isWorkflowsActive = computed(
 )

 function enterBuilderMode() {
-  appModeStore.setMode('builder:select')
+  setMode('builder:select')
 }

 function openAssets() {
@@ -43,7 +43,7 @@ function openTemplates() {
 <template>
  <div class="flex flex-col gap-2 pointer-events-auto">
    <WorkflowActionsDropdown source="app_mode_toolbar">
-      <template #button>
+      <template #button="{ hasUnseenItems }">
        <Button
          v-tooltip.right="{
            value: t('sideToolbar.labels.menu'),
@@ -52,16 +52,21 @@ function openTemplates() {
          variant="secondary"
          size="unset"
          :aria-label="t('sideToolbar.labels.menu')"
-          class="h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="relative h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
        >
          <i class="icon-[lucide--panels-top-left] size-4" />
          <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+          <span
+            v-if="hasUnseenItems"
+            aria-hidden="true"
+            class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
+          />
        </Button>
      </template>
    </WorkflowActionsDropdown>

    <Button
-      v-if="appModeStore.enableAppBuilder"
+      v-if="enableAppBuilder"
      v-tooltip.right="{
        value: t('linearMode.appModeToolbar.appBuilder'),
        ...tooltipOptions
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    data-testid="subgraph-breadcrumb"
-    class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center"
+    class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center -mt-4 pt-4"
    :class="{
      'subgraph-breadcrumb-collapse': collapseTabs,
      'subgraph-breadcrumb-overflow': overflowingTabs
--- a/src/components/builder/AppBuilder.vue
+++ b/src/components/builder/AppBuilder.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { remove } from 'es-toolkit'
-import { computed, ref, toValue } from 'vue'
+import { computed, provide, ref, toValue, watchEffect } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useI18n } from 'vue-i18n'

 import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
-import Button from '@/components/ui/button/Button.vue'
+import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
@@ -23,8 +23,10 @@ import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import { app } from '@/scripts/app'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { useDialogService } from '@/services/dialogService'
+import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'

 type BoundStyle = { top: string; left: string; width: string; height: string }

@@ -36,10 +38,36 @@ const workflowStore = useWorkflowStore()
 const { t } = useI18n()
 const canvas: LGraphCanvas = canvasStore.getCanvas()

+const { mode, isArrangeMode } = useAppMode()
 const hoveringSelectable = ref(false)

+provide(HideLayoutFieldKey, true)
+
 workflowStore.activeWorkflow?.changeTracker?.reset()

+// Prune stale entries whose node/widget no longer exists, so the
+// DraggableList model always matches the rendered items.
+watchEffect(() => {
+  const valid = appModeStore.selectedInputs.filter(([nodeId, widgetName]) => {
+    const node = app.rootGraph.getNodeById(nodeId)
+    return node?.widgets?.some((w) => w.name === widgetName)
+  })
+  if (valid.length < appModeStore.selectedInputs.length) {
+    appModeStore.selectedInputs = valid
+  }
+})
+
+const arrangeInputs = computed(() =>
+  appModeStore.selectedInputs
+    .map(([nodeId, widgetName]) => {
+      const node = app.rootGraph.getNodeById(nodeId)
+      const widget = node?.widgets?.find((w) => w.name === widgetName)
+      if (!node || !widget) return null
+      return { nodeId, widgetName, node, widget }
+    })
+    .filter((item): item is NonNullable<typeof item> => item !== null)
+)
+
 const inputsWithState = computed(() =>
  appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
    const node = app.rootGraph.getNodeById(nodeId)
@@ -179,12 +207,33 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
 </script>
 <template>
  <div class="flex font-bold p-2 border-border-subtle border-b items-center">
-    {{ t('linearMode.builder.title') }}
-    <Button class="ml-auto" @click="appModeStore.exitBuilder">
-      {{ t('linearMode.builder.exit') }}
-    </Button>
+    {{
+      isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
+    }}
  </div>
+  <DraggableList
+    v-if="isArrangeMode"
+    v-slot="{ dragClass }"
+    v-model="appModeStore.selectedInputs"
+  >
+    <div
+      v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
+      :key="`${nodeId}: ${widgetName}`"
+      :class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
+      :aria-label="`${widget.label ?? widgetName} — ${node.title}`"
+    >
+      <div class="pointer-events-none" inert>
+        <WidgetItem
+          :widget="widget"
+          :node="node"
+          show-node-name
+          hidden-widget-actions
+        />
+      </div>
+    </div>
+  </DraggableList>
  <PropertiesAccordionItem
+    v-else
    :label="t('nodeHelpPage.inputs')"
    enable-empty-state
    :disabled="!appModeStore.selectedInputs.length"
@@ -232,6 +281,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
    </DraggableList>
  </PropertiesAccordionItem>
  <PropertiesAccordionItem
+    v-if="!isArrangeMode"
    :label="t('nodeHelpPage.outputs')"
    enable-empty-state
    :disabled="!appModeStore.selectedOutputs.length"
@@ -274,7 +324,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
    </DraggableList>
  </PropertiesAccordionItem>

-  <Teleport to="body">
+  <Teleport v-if="mode === 'builder:select'" to="body">
    <div
      :class="
        cn(
--- a/src/components/builder/BuilderExitButton.vue
+++ b/src/components/builder/BuilderExitButton.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
+  >
+    <Button size="lg" @click="onExitBuilder">
+      {{ t('builderMenu.exitAppBuilder') }}
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useAppMode } from '@/composables/useAppMode'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const appModeStore = useAppModeStore()
+const dialogStore = useDialogStore()
+const { isBuilderMode } = useAppMode()
+
+useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+  if (
+    e.key === 'Escape' &&
+    !e.ctrlKey &&
+    !e.altKey &&
+    !e.metaKey &&
+    dialogStore.dialogStack.length === 0 &&
+    isBuilderMode.value
+  ) {
+    e.preventDefault()
+    e.stopPropagation()
+    onExitBuilder()
+  }
+})
+
+function onExitBuilder() {
+  void appModeStore.exitBuilder()
+}
+</script>
--- a/src/components/builder/BuilderMenu.vue
+++ b/src/components/builder/BuilderMenu.vue
@@ -0,0 +1,73 @@
+<template>
+  <Popover :show-arrow="false" class="min-w-56 p-3">
+    <template #button>
+      <button
+        :class="
+          cn(
+            'absolute left-4 top-[calc(var(--workflow-tabs-height)+16px)] z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg py-2 pr-2 pl-3 shadow-interface transition-colors border-none',
+            'bg-secondary-background hover:bg-secondary-background-hover',
+            'data-[state=open]:bg-secondary-background-hover'
+          )
+        "
+        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
+      >
+        <i class="icon-[lucide--hammer] size-4" />
+        <span class="text-sm font-medium">
+          {{ t('linearMode.appModeToolbar.appBuilder') }}
+        </span>
+        <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+      </button>
+    </template>
+    <template #default="{ close }">
+      <button
+        :class="
+          cn(
+            'flex w-full items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none',
+            hasOutputs
+              ? 'cursor-pointer hover:bg-secondary-background-hover'
+              : 'opacity-50 pointer-events-none'
+          )
+        "
+        :disabled="!hasOutputs"
+        @click="onSave(close)"
+      >
+        <i class="icon-[lucide--save] size-4" />
+        {{ t('builderMenu.saveApp') }}
+      </button>
+      <div class="my-1 border-t border-border-default" />
+      <button
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none hover:bg-secondary-background-hover"
+        @click="onExitBuilder(close)"
+      >
+        <i class="icon-[lucide--square-pen] size-4" />
+        {{ t('builderMenu.exitAppBuilder') }}
+      </button>
+    </template>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+import Popover from '@/components/ui/Popover.vue'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import { useBuilderSave } from './useBuilderSave'
+
+const { t } = useI18n()
+const appModeStore = useAppModeStore()
+const { hasOutputs } = storeToRefs(appModeStore)
+const { setSaving } = useBuilderSave()
+
+function onSave(close: () => void) {
+  setSaving(true)
+  close()
+}
+
+function onExitBuilder(close: () => void) {
+  void appModeStore.exitBuilder()
+  close()
+}
+</script>
--- a/src/components/builder/BuilderToolbar.vue
+++ b/src/components/builder/BuilderToolbar.vue
@@ -1,6 +1,6 @@
 <template>
  <nav
-    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-[1000] -translate-x-1/2"
+    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-1000 -translate-x-1/2"
    :aria-label="t('builderToolbar.label')"
  >
    <div
@@ -20,7 +20,7 @@
            )
          "
          :aria-current="activeStep === step.id ? 'step' : undefined"
-          @click="appModeStore.setMode(step.id)"
+          @click="setMode(step.id)"
        >
          <StepBadge :step :index :model-value="activeStep" />
          <StepLabel :step />
@@ -31,9 +31,9 @@

      <!-- Save -->
      <ConnectOutputPopover
-        v-if="!appModeStore.hasOutputs"
+        v-if="!hasOutputs"
        :is-select-active="activeStep === 'builder:select'"
-        @switch="appModeStore.setMode('builder:select')"
+        @switch="setMode('builder:select')"
      >
        <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
          <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
@@ -50,7 +50,7 @@
              : 'hover:bg-secondary-background bg-transparent'
          )
        "
-        @click="appModeStore.setBuilderSaving(true)"
+        @click="setSaving(true)"
      >
        <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
        <StepLabel :step="saveStep" />
@@ -62,31 +62,25 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useEventListener } from '@vueuse/core'

+import { useAppMode } from '@/composables/useAppMode'
+import type { AppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
-import type { AppMode } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'

+import { useBuilderSave } from './useBuilderSave'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'
 import StepBadge from './StepBadge.vue'
 import StepLabel from './StepLabel.vue'
 import type { BuilderToolbarStep } from './types'
+import { storeToRefs } from 'pinia'

 const { t } = useI18n()
-const appModeStore = useAppModeStore()
+const { mode, setMode } = useAppMode()
+const { hasOutputs } = storeToRefs(useAppModeStore())
+const { saving, setSaving } = useBuilderSave()

-useEventListener(document, 'keydown', (e: KeyboardEvent) => {
-  if (e.key !== 'Escape') return
-
-  e.preventDefault()
-  e.stopPropagation()
-  void appModeStore.exitBuilder()
-})
-
-const activeStep = computed(() =>
-  appModeStore.isBuilderSaving ? 'save' : appModeStore.mode
-)
+const activeStep = computed(() => (saving.value ? 'save' : mode.value))

 const stepClasses =
  'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'
--- a/src/components/builder/useBuilderSave.ts
+++ b/src/components/builder/useBuilderSave.ts
@@ -1,30 +1,36 @@
-import { watch } from 'vue'
+import { ref } from 'vue'

+import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
+import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'

 import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
 import BuilderSaveSuccessDialogContent from './BuilderSaveSuccessDialogContent.vue'
+import { whenever } from '@vueuse/core'

 const SAVE_DIALOG_KEY = 'builder-save'
 const SUCCESS_DIALOG_KEY = 'builder-save-success'

 export function useBuilderSave() {
-  const appModeStore = useAppModeStore()
+  const { setMode } = useAppMode()
+  const { toastErrorHandler } = useErrorHandling()
  const workflowStore = useWorkflowStore()
  const workflowService = useWorkflowService()
  const dialogService = useDialogService()
+  const appModeStore = useAppModeStore()
  const dialogStore = useDialogStore()

-  watch(
-    () => appModeStore.isBuilderSaving,
-    (saving) => {
-      if (saving) void onBuilderSave()
-    }
-  )
+  const saving = ref(false)
+
+  whenever(saving, onBuilderSave)
+
+  function setSaving(value: boolean) {
+    saving.value = value
+  }

  async function onBuilderSave() {
    const workflow = workflowStore.activeWorkflow
@@ -33,13 +39,14 @@ export function useBuilderSave() {
      return
    }

-    if (!workflow.isTemporary && workflow.activeState.extra?.linearMode) {
+    if (!workflow.isTemporary && workflow.initialMode != null) {
+      // Re-save with the previously chosen mode — no dialog needed.
      try {
-        workflow.changeTracker?.checkState()
-        appModeStore.saveSelectedToWorkflow()
+        appModeStore.flushSelections()
        await workflowService.saveWorkflow(workflow)
-        showSuccessDialog(workflow.filename, appModeStore.isAppMode)
-      } catch {
+        showSuccessDialog(workflow.filename, workflow.initialMode === 'app')
+      } catch (e) {
+        toastErrorHandler(e)
        resetSaving()
      }
      return
@@ -73,17 +80,19 @@ export function useBuilderSave() {
      const workflow = workflowStore.activeWorkflow
      if (!workflow) return

-      appModeStore.saveSelectedToWorkflow()
+      appModeStore.flushSelections()
+      const mode = openAsApp ? 'app' : 'graph'
      const saved = await workflowService.saveWorkflowAs(workflow, {
        filename,
-        openAsApp
+        initialMode: mode
      })

      if (!saved) return

      closeSaveDialog()
      showSuccessDialog(filename, openAsApp)
-    } catch {
+    } catch (e) {
+      toastErrorHandler(e)
      closeSaveDialog()
      resetSaving()
    }
@@ -97,7 +106,7 @@ export function useBuilderSave() {
        workflowName,
        savedAsApp,
        onViewApp: () => {
-          appModeStore.setMode('app')
+          setMode('app')
          closeSuccessDialog()
        },
        onClose: closeSuccessDialog
@@ -118,6 +127,8 @@ export function useBuilderSave() {
  }

  function resetSaving() {
-    appModeStore.setBuilderSaving(false)
+    saving.value = false
  }
+
+  return { saving, setSaving }
 }
--- a/src/components/common/BadgePill.vue
+++ b/src/components/common/BadgePill.vue
@@ -1,7 +1,11 @@
 <template>
  <span
-    class="flex items-center gap-1 rounded border px-1.5 py-0.5 text-xxs"
-    :class="textColorClass"
+    :class="
+      cn(
+        'flex items-center gap-1 rounded border px-1.5 py-0.5 text-xxs',
+        textColorClass
+      )
+    "
    :style="customStyle"
  >
    <i v-if="icon" :class="cn(icon, 'size-2.5', iconClass)" />
--- a/src/components/common/TreeExplorerV2Node.test.ts
+++ b/src/components/common/TreeExplorerV2Node.test.ts
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import type { FlattenedItem } from 'reka-ui'
 import { ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'

 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
@@ -9,12 +10,25 @@ import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'

 import TreeExplorerV2Node from './TreeExplorerV2Node.vue'

+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
 vi.mock('@/platform/settings/settingStore', () => ({
  useSettingStore: () => ({
    get: vi.fn().mockReturnValue('left')
  })
 }))

+vi.mock('@/stores/nodeBookmarkStore', () => ({
+  useNodeBookmarkStore: () => ({
+    isBookmarked: vi.fn().mockReturnValue(false),
+    toggleBookmark: vi.fn()
+  })
+}))
+
 vi.mock('@/components/node/NodePreviewCard.vue', () => ({
  default: { template: '<div />' }
 }))
@@ -78,6 +92,7 @@ describe('TreeExplorerV2Node', () => {
    return {
      wrapper: mount(TreeExplorerV2Node, {
        global: {
+          plugins: [i18n],
          stubs: {
            TreeItem: treeItemStub.stub,
            Teleport: { template: '<div />' }
--- a/src/components/common/TreeExplorerV2Node.vue
+++ b/src/components/common/TreeExplorerV2Node.vue
@@ -24,6 +24,25 @@
          {{ item.value.label }}
        </slot>
      </span>
+      <button
+        :class="
+          cn(
+            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted-foreground hover:text-foreground',
+            'opacity-0 group-hover/tree-node:opacity-100'
+          )
+        "
+        :aria-label="$t('icon.bookmark')"
+        @click.stop="toggleBookmark"
+      >
+        <i
+          :class="
+            cn(
+              isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+              'text-xs'
+            )
+          "
+        />
+      </button>
    </div>

    <!-- Folder -->
@@ -33,6 +52,15 @@
      :style="rowStyle"
      @click.stop="handleClick($event, handleToggle, handleSelect)"
    >
+      <i
+        v-if="item.hasChildren"
+        :class="
+          cn(
+            'icon-[lucide--chevron-down] size-4 shrink-0 text-muted-foreground transition-transform',
+            !isExpanded && '-rotate-90'
+          )
+        "
+      />
      <i
        :class="cn(item.value.icon, 'size-4 shrink-0 text-muted-foreground')"
      />
@@ -41,15 +69,6 @@
          {{ item.value.label }}
        </slot>
      </span>
-      <i
-        v-if="item.hasChildren"
-        :class="
-          cn(
-            'icon-[lucide--chevron-down] mr-4 size-4 shrink-0 text-muted-foreground transition-transform',
-            !isExpanded && '-rotate-90'
-          )
-        "
-      />
    </div>
  </TreeItem>

@@ -73,6 +92,7 @@ import { computed, inject } from 'vue'

 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
@@ -93,9 +113,21 @@ const emit = defineEmits<{
 }>()

 const contextMenuNode = inject(InjectKeyContextMenuNode)
+const nodeBookmarkStore = useNodeBookmarkStore()

 const nodeDef = computed(() => item.value.data)

+const isBookmarked = computed(() => {
+  if (!nodeDef.value) return false
+  return nodeBookmarkStore.isBookmarked(nodeDef.value)
+})
+
+function toggleBookmark() {
+  if (nodeDef.value) {
+    nodeBookmarkStore.toggleBookmark(nodeDef.value)
+  }
+}
+
 const {
  previewRef,
  showPreview,
--- a/src/components/common/WorkflowActionsDropdown.vue
+++ b/src/components/common/WorkflowActionsDropdown.vue
@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'

 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -27,8 +28,13 @@ const { menuItems } = useWorkflowActionsMenu(
  { isRoot: true }
 )

+const { hasUnseenItems, markAsSeen } = useNewMenuItemIndicator(
+  () => menuItems.value
+)
+
 function handleOpen(open: boolean) {
  if (open) {
+    markAsSeen()
    useTelemetry()?.trackUiButtonClicked({
      button_id: source
    })
@@ -39,7 +45,7 @@ function handleOpen(open: boolean) {
 <template>
  <DropdownMenuRoot @update:open="handleOpen">
    <DropdownMenuTrigger as-child>
-      <slot name="button">
+      <slot name="button" :has-unseen-items="hasUnseenItems">
        <Button
          v-tooltip="{
            value: t('breadcrumbsMenu.workflowActions'),
@@ -49,7 +55,7 @@ function handleOpen(open: boolean) {
          variant="secondary"
          size="unset"
          :aria-label="t('breadcrumbsMenu.workflowActions')"
-          class="h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="relative h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
        >
          <i
            class="size-4"
@@ -60,6 +66,11 @@ function handleOpen(open: boolean) {
            "
          />
          <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+          <span
+            v-if="hasUnseenItems"
+            aria-hidden="true"
+            class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
+          />
        </Button>
      </slot>
    </DropdownMenuTrigger>
--- a/src/components/common/WorkflowActionsList.test.ts
+++ b/src/components/common/WorkflowActionsList.test.ts
@@ -17,7 +17,7 @@ function createWrapper(items: WorkflowMenuItem[]) {
 describe('WorkflowActionsList', () => {
  it('renders action items with label and icon', () => {
    const items: WorkflowMenuItem[] = [
-      { label: 'Save', icon: 'pi pi-save', command: vi.fn() }
+      { id: 'save', label: 'Save', icon: 'pi pi-save', command: vi.fn() }
    ]

    const wrapper = createWrapper(items)
@@ -28,9 +28,9 @@ describe('WorkflowActionsList', () => {

  it('renders separator items', () => {
    const items: WorkflowMenuItem[] = [
-      { label: 'Before', icon: 'pi pi-a', command: vi.fn() },
+      { id: 'before', label: 'Before', icon: 'pi pi-a', command: vi.fn() },
      { separator: true },
-      { label: 'After', icon: 'pi pi-b', command: vi.fn() }
+      { id: 'after', label: 'After', icon: 'pi pi-b', command: vi.fn() }
    ]

    const wrapper = createWrapper(items)
@@ -44,7 +44,7 @@ describe('WorkflowActionsList', () => {
  it('dispatches command on select', async () => {
    const command = vi.fn()
    const items: WorkflowMenuItem[] = [
-      { label: 'Action', icon: 'pi pi-play', command }
+      { id: 'action', label: 'Action', icon: 'pi pi-play', command }
    ]

    const wrapper = createWrapper(items)
@@ -57,6 +57,7 @@ describe('WorkflowActionsList', () => {
  it('renders badge when present', () => {
    const items: WorkflowMenuItem[] = [
      {
+        id: 'new-feature',
        label: 'New Feature',
        icon: 'pi pi-star',
        command: vi.fn(),
@@ -71,7 +72,7 @@ describe('WorkflowActionsList', () => {

  it('does not render badge when absent', () => {
    const items: WorkflowMenuAction[] = [
-      { label: 'Plain', icon: 'pi pi-check', command: vi.fn() }
+      { id: 'plain', label: 'Plain', icon: 'pi pi-check', command: vi.fn() }
    ]

    const wrapper = createWrapper(items)
--- a/src/components/curve/CurveEditor.test.ts
+++ b/src/components/curve/CurveEditor.test.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'

-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'

 import CurveEditor from './CurveEditor.vue'

--- a/src/components/curve/CurveEditor.vue
+++ b/src/components/curve/CurveEditor.vue
@@ -77,7 +77,8 @@
 import { computed, useTemplateRef } from 'vue'

 import { useCurveEditor } from '@/composables/useCurveEditor'
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+
+import type { CurvePoint } from './types'

 import { histogramToPath } from './curveUtils'

--- a/src/components/curve/WidgetCurve.vue
+++ b/src/components/curve/WidgetCurve.vue
@@ -3,7 +3,7 @@
 </template>

 <script setup lang="ts">
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'

 import CurveEditor from './CurveEditor.vue'

--- a/src/components/curve/curveUtils.test.ts
+++ b/src/components/curve/curveUtils.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'

-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'

 import {
  createMonotoneInterpolator,
--- a/src/components/curve/curveUtils.ts
+++ b/src/components/curve/curveUtils.ts
@@ -1,4 +1,4 @@
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from './types'

 /**
 * Monotone cubic Hermite interpolation.
@@ -95,15 +95,15 @@ export function histogramToPath(histogram: Uint32Array): string {
  const max = sorted[Math.floor(255 * 0.995)]
  if (max === 0) return ''

-  const step = 1 / 255
-  let d = 'M0,1'
+  const invMax = 1 / max
+  const parts: string[] = ['M0,1']
  for (let i = 0; i < 256; i++) {
-    const x = i * step
-    const y = 1 - Math.min(1, histogram[i] / max)
-    d += ` L${x.toFixed(4)},${y.toFixed(4)}`
+    const x = i / 255
+    const y = 1 - Math.min(1, histogram[i] * invMax)
+    parts.push(`L${x},${y}`)
  }
-  d += ' L1,1 Z'
-  return d
+  parts.push('L1,1 Z')
+  return parts.join(' ')
 }

 export function curvesToLUT(points: CurvePoint[]): Uint8Array {
--- a/src/components/curve/types.ts
+++ b/src/components/curve/types.ts
@@ -0,0 +1 @@
+export type CurvePoint = [x: number, y: number]
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -438,7 +438,6 @@ onMounted(() => {
 const systemStatsStore = useSystemStatsStore()

 const distributions = computed(() => {
-  // eslint-disable-next-line no-undef
  switch (__DISTRIBUTION__) {
    case 'cloud':
      return [TemplateIncludeOnDistributionEnum.Cloud]
--- a/src/components/dialog/content/MissingNodesContent.vue
+++ b/src/components/dialog/content/MissingNodesContent.vue
@@ -234,6 +234,7 @@ import { isCloud } from '@/platform/distribution/types'
 import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { cn } from '@/utils/tailwindUtil'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -245,6 +246,7 @@ const { missingNodeTypes } = defineProps<{
 const { missingCoreNodes } = useMissingNodes()
 const { replaceNodesInPlace } = useNodeReplacement()
 const dialogStore = useDialogStore()
+const executionErrorStore = useExecutionErrorStore()

 interface ProcessedNode {
  label: string
@@ -339,6 +341,14 @@ function handleReplaceSelected() {
  replacedTypes.value = nextReplaced
  selectedTypes.value = nextSelected

+  // replaceNodesInPlace() handles canvas rendering via onNodeAdded(),
+  // but the modal only updates its own local UI state above.
+  // Without this call the Errors Tab would still list the replaced nodes
+  // as missing because executionErrorStore is not aware of the replacement.
+  if (result.length > 0) {
+    executionErrorStore.removeMissingNodesByType(result)
+  }
+
  // Auto-close when all replaceable nodes replaced and no non-replaceable remain
  const allReplaced = replaceableNodes.value.every((n) =>
    nextReplaced.has(n.label)
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -18,10 +18,11 @@
        >
          <WorkflowTabs />
          <TopbarBadges />
+          <TopbarSubscribeButton />
        </div>
      </div>
    </template>
-    <template v-if="showUI && !appModeStore.isBuilderMode" #side-toolbar>
+    <template v-if="showUI && !isBuilderMode" #side-toolbar>
      <SideToolbar />
    </template>
    <template v-if="showUI" #side-bar-panel>
@@ -31,27 +32,24 @@
        <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
      </div>
    </template>
-    <template v-if="showUI && !appModeStore.isBuilderMode" #topmenu>
+    <template v-if="showUI && !isBuilderMode" #topmenu>
      <TopMenuSection />
    </template>
    <template v-if="showUI" #bottom-panel>
      <BottomPanel />
    </template>
    <template v-if="showUI" #right-side-panel>
-      <AppBuilder v-if="appModeStore.mode === 'builder:select'" />
-      <NodePropertiesPanel v-else-if="!appModeStore.isBuilderMode" />
+      <AppBuilder v-if="mode === 'builder:select'" />
+      <NodePropertiesPanel v-else-if="!isBuilderMode" />
    </template>
    <template #graph-canvas-panel>
      <GraphCanvasMenu
-        v-if="canvasMenuEnabled && !appModeStore.isBuilderMode"
+        v-if="canvasMenuEnabled && !isBuilderMode"
        class="pointer-events-auto"
      />
      <MiniMap
        v-if="
-          comfyAppReady &&
-          minimapEnabled &&
-          betaMenuEnabled &&
-          !appModeStore.isBuilderMode
+          comfyAppReady && minimapEnabled && betaMenuEnabled && !isBuilderMode
        "
        class="pointer-events-auto"
      />
@@ -127,10 +125,10 @@ import {
 import { useI18n } from 'vue-i18n'

 import { isMiddlePointerInput } from '@/base/pointerUtils'
-import AppBuilder from '@/components/builder/AppBuilder.vue'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
+import AppBuilder from '@/components/builder/AppBuilder.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
@@ -143,6 +141,7 @@ import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
@@ -184,7 +183,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
-import { useAppModeStore } from '@/stores/appModeStore'
+import { useAppMode } from '@/composables/useAppMode'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
@@ -205,7 +204,7 @@ const nodeSearchboxPopoverRef = shallowRef<InstanceType<
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
-const appModeStore = useAppModeStore()
+const { mode, isBuilderMode } = useAppMode()
 const canvasStore = useCanvasStore()
 const workflowStore = useWorkflowStore()
 const executionStore = useExecutionStore()
--- a/src/components/graph/widgets/DomWidget.test.ts
+++ b/src/components/graph/widgets/DomWidget.test.ts
@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { reactive } from 'vue'
+
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
+import type { BaseDOMWidget } from '@/scripts/domWidget'
+import type { DomWidgetState } from '@/stores/domWidgetStore'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+
+import DomWidget from './DomWidget.vue'
+
+const mockUpdatePosition = vi.fn()
+const mockUpdateClipPath = vi.fn()
+const mockCanvasElement = document.createElement('canvas')
+const mockCanvasStore = {
+  canvas: {
+    graph: {
+      getNodeById: vi.fn(() => true)
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    },
+    canvas: mockCanvasElement,
+    selected_nodes: {}
+  },
+  getCanvas: () => ({ canvas: mockCanvasElement }),
+  linearMode: false
+}
+
+vi.mock('@/composables/element/useAbsolutePosition', () => ({
+  useAbsolutePosition: () => ({
+    style: reactive<Record<string, string>>({}),
+    updatePosition: mockUpdatePosition
+  })
+}))
+
+vi.mock('@/composables/element/useDomClipping', () => ({
+  useDomClipping: () => ({
+    style: reactive<Record<string, string>>({}),
+    updateClipPath: mockUpdateClipPath
+  })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => mockCanvasStore
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn(() => false)
+  })
+}))
+
+function createWidgetState(overrideDisabled: boolean): DomWidgetState {
+  const domWidgetStore = useDomWidgetStore()
+  const node = createMockLGraphNode({
+    id: 1,
+    constructor: {
+      nodeData: {}
+    }
+  })
+
+  const widget = {
+    id: 'dom-widget-id',
+    name: 'test_widget',
+    type: 'custom',
+    value: '',
+    options: {},
+    node,
+    computedDisabled: false
+  } as unknown as BaseDOMWidget<object | string>
+
+  domWidgetStore.registerWidget(widget)
+  domWidgetStore.setPositionOverride(widget.id, {
+    node: createMockLGraphNode({ id: 2 }),
+    widget: { computedDisabled: overrideDisabled } as DomWidgetState['widget']
+  })
+
+  const state = domWidgetStore.widgetStates.get(widget.id)
+  if (!state) throw new Error('Expected registered DomWidgetState')
+
+  state.zIndex = 2
+  state.size = [100, 40]
+
+  return reactive(state)
+}
+
+describe('DomWidget disabled style', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  afterEach(() => {
+    useDomWidgetStore().clear()
+    vi.clearAllMocks()
+  })
+
+  it('uses disabled style when promoted override widget is computedDisabled', async () => {
+    const widgetState = createWidgetState(true)
+    const wrapper = mount(DomWidget, {
+      props: {
+        widgetState
+      }
+    })
+
+    widgetState.zIndex = 3
+    await wrapper.vm.$nextTick()
+
+    const root = wrapper.get('.dom-widget').element as HTMLElement
+    expect(root.style.pointerEvents).toBe('none')
+    expect(root.style.opacity).toBe('0.5')
+  })
+})
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -110,13 +110,17 @@ watch(
      updateDomClipping()
    }

+    const override = widgetState.positionOverride
+    const isDisabled = override
+      ? (override.widget.computedDisabled ?? widget.computedDisabled)
+      : widget.computedDisabled
+
    style.value = {
      ...positionStyle.value,
      ...(enableDomClipping.value ? clippingStyle.value : {}),
      zIndex: widgetState.zIndex,
-      pointerEvents:
-        widgetState.readonly || widget.computedDisabled ? 'none' : 'auto',
-      opacity: widget.computedDisabled ? 0.5 : 1
+      pointerEvents: widgetState.readonly || isDisabled ? 'none' : 'auto',
+      opacity: isDisabled ? 0.5 : 1
    }
  },
  { deep: true }
--- a/src/components/node/NodePreviewCard.vue
+++ b/src/components/node/NodePreviewCard.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="flex w-50 flex-col overflow-hidden rounded-2xl bg-(--base-background) border border-(--border-default)"
+    class="flex w-50 flex-col overflow-hidden rounded-2xl bg-base-background border border-border-default"
  >
    <div ref="previewContainerRef" class="overflow-hidden p-3">
      <div ref="previewWrapperRef" class="origin-top-left scale-50">
@@ -100,7 +100,7 @@ import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphN
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'

 const SCALE_FACTOR = 0.5
-const PREVIEW_CONTAINER_PADDING_PX = 24 // p-3 top + bottom (12px × 2)
+const PREVIEW_CONTAINER_PADDING_PX = 24

 const {
  nodeDef,
--- a/src/components/queue/JobHistoryActionsMenu.vue
+++ b/src/components/queue/JobHistoryActionsMenu.vue
@@ -20,7 +20,7 @@
            class="w-full justify-between text-sm font-light"
            variant="textonly"
            size="sm"
-            @click="onToggleDockedJobHistory"
+            @click="onToggleDockedJobHistory(close)"
          >
            <span class="flex items-center gap-2">
              <i
@@ -79,6 +79,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'

 const emit = defineEmits<{
  (e: 'clearHistory'): void
@@ -86,6 +87,7 @@ const emit = defineEmits<{

 const { t } = useI18n()
 const settingStore = useSettingStore()
+const sidebarTabStore = useSidebarTabStore()

 const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 const isQueuePanelV2Enabled = computed(() =>
@@ -98,7 +100,22 @@ const onClearHistoryFromMenu = (close: () => void) => {
  emit('clearHistory')
 }

-const onToggleDockedJobHistory = async () => {
-  await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled.value)
+const onToggleDockedJobHistory = async (close: () => void) => {
+  close()
+
+  try {
+    if (isQueuePanelV2Enabled.value) {
+      await settingStore.setMany({
+        'Comfy.Queue.QPOV2': false,
+        'Comfy.Queue.History.Expanded': true
+      })
+      return
+    }
+
+    sidebarTabStore.activeSidebarTabId = 'job-history'
+    await settingStore.set('Comfy.Queue.QPOV2', true)
+  } catch {
+    return
+  }
 }
 </script>
--- a/src/components/queue/QueueOverlayHeader.test.ts
+++ b/src/components/queue/QueueOverlayHeader.test.ts
@@ -23,18 +23,27 @@ vi.mock('@/components/ui/Popover.vue', () => {
  return { default: PopoverStub }
 })

-const mockGetSetting = vi.fn((key: string) =>
+const mockGetSetting = vi.fn<(key: string) => boolean | undefined>((key) =>
  key === 'Comfy.Queue.QPOV2' ? true : undefined
 )
 const mockSetSetting = vi.fn()
+const mockSetMany = vi.fn()
+const mockSidebarTabStore = {
+  activeSidebarTabId: null as string | null
+}

 vi.mock('@/platform/settings/settingStore', () => ({
  useSettingStore: () => ({
    get: mockGetSetting,
-    set: mockSetSetting
+    set: mockSetSetting,
+    setMany: mockSetMany
  })
 }))

+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: () => mockSidebarTabStore
+}))
+
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import * as tooltipConfig from '@/composables/useTooltipConfig'

@@ -81,6 +90,11 @@ describe('QueueOverlayHeader', () => {
  beforeEach(() => {
    popoverCloseSpy.mockClear()
    mockSetSetting.mockClear()
+    mockSetMany.mockClear()
+    mockSidebarTabStore.activeSidebarTabId = null
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
  })

  it('renders header title', () => {
@@ -125,7 +139,7 @@ describe('QueueOverlayHeader', () => {
    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
  })

-  it('toggles docked job history setting from the menu', async () => {
+  it('opens floating queue progress overlay when disabling from the menu', async () => {
    const wrapper = mountHeader()

    const dockedJobHistoryButton = wrapper.get(
@@ -133,7 +147,64 @@ describe('QueueOverlayHeader', () => {
    )
    await dockedJobHistoryButton.trigger('click')

+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
+    expect(mockSetMany).toHaveBeenCalledTimes(1)
+    expect(mockSetMany).toHaveBeenCalledWith({
+      'Comfy.Queue.QPOV2': false,
+      'Comfy.Queue.History.Expanded': true
+    })
+    expect(mockSetSetting).not.toHaveBeenCalled()
+    expect(mockSidebarTabStore.activeSidebarTabId).toBe(null)
+  })
+
+  it('opens docked job history sidebar when enabling from the menu', async () => {
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' ? false : undefined
+    )
+    const wrapper = mountHeader()
+
+    const dockedJobHistoryButton = wrapper.get(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await dockedJobHistoryButton.trigger('click')
+
+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
    expect(mockSetSetting).toHaveBeenCalledTimes(1)
-    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', false)
+    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
+    expect(mockSetMany).not.toHaveBeenCalled()
+    expect(mockSidebarTabStore.activeSidebarTabId).toBe('job-history')
+  })
+
+  it('keeps docked target open even when enabling persistence fails', async () => {
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' ? false : undefined
+    )
+    mockSetSetting.mockRejectedValueOnce(new Error('persistence failed'))
+    const wrapper = mountHeader()
+
+    const dockedJobHistoryButton = wrapper.get(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await dockedJobHistoryButton.trigger('click')
+
+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
+    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
+    expect(mockSidebarTabStore.activeSidebarTabId).toBe('job-history')
+  })
+
+  it('closes the menu when disabling persistence fails', async () => {
+    mockSetMany.mockRejectedValueOnce(new Error('persistence failed'))
+    const wrapper = mountHeader()
+
+    const dockedJobHistoryButton = wrapper.get(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await dockedJobHistoryButton.trigger('click')
+
+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
+    expect(mockSetMany).toHaveBeenCalledWith({
+      'Comfy.Queue.QPOV2': false,
+      'Comfy.Queue.History.Expanded': true
+    })
  })
 })
--- a/src/components/queue/job/JobDetailsPopover.stories.ts
+++ b/src/components/queue/job/JobDetailsPopover.stories.ts
@@ -131,11 +131,11 @@ export const Queued: Story = {
      const exec = useExecutionStore()

      const jobId = 'job-queued-1'
-      const queueIndex = 104
+      const priority = 104

      // Current job in pending
      queue.pendingTasks = [
-        makePendingTask(jobId, queueIndex, Date.now() - 90_000)
+        makePendingTask(jobId, priority, Date.now() - 90_000)
      ]
      // Add some other pending jobs to give context
      queue.pendingTasks.push(
@@ -179,13 +179,13 @@ export const QueuedParallel: Story = {
      const exec = useExecutionStore()

      const jobId = 'job-queued-parallel'
-      const queueIndex = 210
+      const priority = 210

      // Current job in pending with some ahead
      queue.pendingTasks = [
        makePendingTask('job-ahead-1', 200, Date.now() - 180_000),
        makePendingTask('job-ahead-2', 205, Date.now() - 150_000),
-        makePendingTask(jobId, queueIndex, Date.now() - 120_000)
+        makePendingTask(jobId, priority, Date.now() - 120_000)
      ]

      // Seen 2 minutes ago - set via prompt metadata above
@@ -238,9 +238,9 @@ export const Running: Story = {
      const exec = useExecutionStore()

      const jobId = 'job-running-1'
-      const queueIndex = 300
+      const priority = 300
      queue.runningTasks = [
-        makeRunningTask(jobId, queueIndex, Date.now() - 65_000)
+        makeRunningTask(jobId, priority, Date.now() - 65_000)
      ]
      queue.historyTasks = [
        makeHistoryTask('hist-r1', 250, 30, true),
@@ -279,10 +279,10 @@ export const QueuedZeroAheadSingleRunning: Story = {
      const exec = useExecutionStore()

      const jobId = 'job-queued-zero-ahead-single'
-      const queueIndex = 510
+      const priority = 510

      queue.pendingTasks = [
-        makePendingTask(jobId, queueIndex, Date.now() - 45_000)
+        makePendingTask(jobId, priority, Date.now() - 45_000)
      ]

      queue.historyTasks = [
@@ -324,10 +324,10 @@ export const QueuedZeroAheadMultiRunning: Story = {
      const exec = useExecutionStore()

      const jobId = 'job-queued-zero-ahead-multi'
-      const queueIndex = 520
+      const priority = 520

      queue.pendingTasks = [
-        makePendingTask(jobId, queueIndex, Date.now() - 20_000)
+        makePendingTask(jobId, priority, Date.now() - 20_000)
      ]

      queue.historyTasks = [
@@ -380,8 +380,8 @@ export const Completed: Story = {
      const queue = useQueueStore()

      const jobId = 'job-completed-1'
-      const queueIndex = 400
-      queue.historyTasks = [makeHistoryTask(jobId, queueIndex, 37, true)]
+      const priority = 400
+      queue.historyTasks = [makeHistoryTask(jobId, priority, 37, true)]

      return { args: { ...args, jobId } }
    },
@@ -401,11 +401,11 @@ export const Failed: Story = {
      const queue = useQueueStore()

      const jobId = 'job-failed-1'
-      const queueIndex = 410
+      const priority = 410
      queue.historyTasks = [
        makeHistoryTask(
          jobId,
-          queueIndex,
+          priority,
          12,
          false,
          'Example error: invalid inputs for node X'
--- a/src/components/queue/job/JobDetailsPopover.vue
+++ b/src/components/queue/job/JobDetailsPopover.vue
@@ -166,16 +166,16 @@ const queuedAtValue = computed(() =>
    : ''
 )

-const currentQueueIndex = computed<number | null>(() => {
+const currentJobPriority = computed<number | null>(() => {
  const task = taskForJob.value
-  return task ? Number(task.queueIndex) : null
+  return task ? Number(task.job.priority) : null
 })

 const jobsAhead = computed<number | null>(() => {
-  const idx = currentQueueIndex.value
+  const idx = currentJobPriority.value
  if (idx == null) return null
  const ahead = queueStore.pendingTasks.filter(
-    (t: TaskItemImpl) => Number(t.queueIndex) < idx
+    (t: TaskItemImpl) => Number(t.job.priority) < idx
  )
  return ahead.length
 })
--- a/src/components/queue/job/JobFilterTabs.vue
+++ b/src/components/queue/job/JobFilterTabs.vue
@@ -5,7 +5,7 @@
        v-for="tab in visibleJobTabs"
        :key="tab"
        :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
-        size="sm"
+        size="md"
        @click="$emit('update:selectedJobTab', tab)"
      >
        {{ tabLabel(tab) }}
--- a/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
@@ -0,0 +1,214 @@
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import PrimeVue from 'primevue/config'
+import { ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
+
+const mockIsCloud = { value: false }
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
+}))
+
+const mockApplyChanges = vi.fn()
+const mockIsRestarting = ref(false)
+vi.mock('@/workbench/extensions/manager/composables/useApplyChanges', () => ({
+  useApplyChanges: () => ({
+    isRestarting: mockIsRestarting,
+    applyChanges: mockApplyChanges
+  })
+}))
+
+const mockIsPackInstalled = vi.fn(() => false)
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
+  useComfyManagerStore: () => ({
+    isPackInstalled: mockIsPackInstalled
+  })
+}))
+
+const mockShouldShowManagerButtons = { value: false }
+vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
+  useManagerState: () => ({
+    shouldShowManagerButtons: mockShouldShowManagerButtons
+  })
+}))
+
+vi.mock('./MissingPackGroupRow.vue', () => ({
+  default: {
+    name: 'MissingPackGroupRow',
+    template: '<div class="pack-row" />',
+    props: ['group', 'showInfoButton', 'showNodeIdBadge'],
+    emits: ['locate-node', 'open-manager-info']
+  }
+}))
+
+import MissingNodeCard from './MissingNodeCard.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      rightSidePanel: {
+        missingNodePacks: {
+          ossMessage: 'Missing node packs detected. Install them.',
+          cloudMessage: 'Unsupported node packs detected.',
+          applyChanges: 'Apply Changes'
+        }
+      }
+    }
+  },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+function makePackGroups(count = 2): MissingPackGroup[] {
+  return Array.from({ length: count }, (_, i) => ({
+    packId: `pack-${i}`,
+    nodeTypes: [
+      { type: `MissingNode${i}`, nodeId: String(i), isReplaceable: false }
+    ],
+    isResolving: false
+  }))
+}
+
+function mountCard(
+  props: Partial<{
+    showInfoButton: boolean
+    showNodeIdBadge: boolean
+    missingPackGroups: MissingPackGroup[]
+  }> = {}
+) {
+  return mount(MissingNodeCard, {
+    props: {
+      showInfoButton: false,
+      showNodeIdBadge: false,
+      missingPackGroups: makePackGroups(),
+      ...props
+    },
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
+      stubs: {
+        DotSpinner: { template: '<span role="status" aria-label="loading" />' }
+      }
+    }
+  })
+}
+
+describe('MissingNodeCard', () => {
+  beforeEach(() => {
+    mockApplyChanges.mockClear()
+    mockIsPackInstalled.mockReset()
+    mockIsPackInstalled.mockReturnValue(false)
+    mockIsCloud.value = false
+    mockShouldShowManagerButtons.value = false
+    mockIsRestarting.value = false
+  })
+
+  describe('Rendering & Props', () => {
+    it('renders cloud message when isCloud is true', () => {
+      mockIsCloud.value = true
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain('Unsupported node packs detected')
+    })
+
+    it('renders OSS message when isCloud is false', () => {
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain('Missing node packs detected')
+    })
+
+    it('renders correct number of MissingPackGroupRow components', () => {
+      const wrapper = mountCard({ missingPackGroups: makePackGroups(3) })
+      expect(
+        wrapper.findAllComponents({ name: 'MissingPackGroupRow' })
+      ).toHaveLength(3)
+    })
+
+    it('renders zero rows when missingPackGroups is empty', () => {
+      const wrapper = mountCard({ missingPackGroups: [] })
+      expect(
+        wrapper.findAllComponents({ name: 'MissingPackGroupRow' })
+      ).toHaveLength(0)
+    })
+
+    it('passes props correctly to MissingPackGroupRow children', () => {
+      const wrapper = mountCard({
+        showInfoButton: true,
+        showNodeIdBadge: true
+      })
+      const row = wrapper.findComponent({ name: 'MissingPackGroupRow' })
+      expect(row.props('showInfoButton')).toBe(true)
+      expect(row.props('showNodeIdBadge')).toBe(true)
+    })
+  })
+
+  describe('Apply Changes Section', () => {
+    it('hides Apply Changes when manager is not enabled', () => {
+      mockShouldShowManagerButtons.value = false
+      const wrapper = mountCard()
+      expect(wrapper.text()).not.toContain('Apply Changes')
+    })
+
+    it('hides Apply Changes when manager enabled but no packs pending', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(false)
+      const wrapper = mountCard()
+      expect(wrapper.text()).not.toContain('Apply Changes')
+    })
+
+    it('shows Apply Changes when at least one pack is pending restart', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(true)
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain('Apply Changes')
+    })
+
+    it('displays spinner during restart', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(true)
+      mockIsRestarting.value = true
+      const wrapper = mountCard()
+      expect(wrapper.find('[role="status"]').exists()).toBe(true)
+    })
+
+    it('disables button during restart', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(true)
+      mockIsRestarting.value = true
+      const wrapper = mountCard()
+      const btn = wrapper.find('button')
+      expect(btn.attributes('disabled')).toBeDefined()
+    })
+
+    it('calls applyChanges when Apply Changes button is clicked', async () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(true)
+      const wrapper = mountCard()
+      const btn = wrapper.find('button')
+      await btn.trigger('click')
+      expect(mockApplyChanges).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('Event Handling', () => {
+    it('emits locateNode when child emits locate-node', async () => {
+      const wrapper = mountCard()
+      const row = wrapper.findComponent({ name: 'MissingPackGroupRow' })
+      await row.vm.$emit('locate-node', '42')
+      expect(wrapper.emitted('locateNode')).toBeTruthy()
+      expect(wrapper.emitted('locateNode')?.[0]).toEqual(['42'])
+    })
+
+    it('emits openManagerInfo when child emits open-manager-info', async () => {
+      const wrapper = mountCard()
+      const row = wrapper.findComponent({ name: 'MissingPackGroupRow' })
+      await row.vm.$emit('open-manager-info', 'pack-0')
+      expect(wrapper.emitted('openManagerInfo')).toBeTruthy()
+      expect(wrapper.emitted('openManagerInfo')?.[0]).toEqual(['pack-0'])
+    })
+  })
+})
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
@@ -0,0 +1,368 @@
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import PrimeVue from 'primevue/config'
+import { ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
+
+const mockInstallAllPacks = vi.fn()
+const mockIsInstalling = ref(false)
+const mockIsPackInstalled = vi.fn(() => false)
+const mockShouldShowManagerButtons = { value: false }
+const mockOpenManager = vi.fn()
+const mockMissingNodePacks = ref<Array<{ id: string; name: string }>>([])
+const mockIsLoading = ref(false)
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useMissingNodes',
+  () => ({
+    useMissingNodes: () => ({
+      missingNodePacks: mockMissingNodePacks,
+      isLoading: mockIsLoading
+    })
+  })
+)
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/usePackInstall',
+  () => ({
+    usePackInstall: () => ({
+      isInstalling: mockIsInstalling,
+      installAllPacks: mockInstallAllPacks
+    })
+  })
+)
+
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
+  useComfyManagerStore: () => ({
+    isPackInstalled: mockIsPackInstalled
+  })
+}))
+
+vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
+  useManagerState: () => ({
+    shouldShowManagerButtons: mockShouldShowManagerButtons,
+    openManager: mockOpenManager
+  })
+}))
+
+vi.mock('@/workbench/extensions/manager/types/comfyManagerTypes', () => ({
+  ManagerTab: { Missing: 'missing', All: 'all' }
+}))
+
+import MissingPackGroupRow from './MissingPackGroupRow.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        loading: 'Loading'
+      },
+      rightSidePanel: {
+        locateNode: 'Locate node on canvas',
+        missingNodePacks: {
+          unknownPack: 'Unknown pack',
+          installNodePack: 'Install node pack',
+          installing: 'Installing...',
+          installed: 'Installed',
+          searchInManager: 'Search in Node Manager',
+          viewInManager: 'View in Manager',
+          collapse: 'Collapse',
+          expand: 'Expand'
+        }
+      }
+    }
+  },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+function makeGroup(
+  overrides: Partial<MissingPackGroup> = {}
+): MissingPackGroup {
+  return {
+    packId: 'my-pack',
+    nodeTypes: [
+      { type: 'MissingA', nodeId: '10', isReplaceable: false },
+      { type: 'MissingB', nodeId: '11', isReplaceable: false }
+    ],
+    isResolving: false,
+    ...overrides
+  }
+}
+
+function mountRow(
+  props: Partial<{
+    group: MissingPackGroup
+    showInfoButton: boolean
+    showNodeIdBadge: boolean
+  }> = {}
+) {
+  return mount(MissingPackGroupRow, {
+    props: {
+      group: makeGroup(),
+      showInfoButton: false,
+      showNodeIdBadge: false,
+      ...props
+    },
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
+      stubs: {
+        TransitionCollapse: { template: '<div><slot /></div>' },
+        DotSpinner: {
+          template: '<span role="status" aria-label="loading" />'
+        }
+      }
+    }
+  })
+}
+
+describe('MissingPackGroupRow', () => {
+  beforeEach(() => {
+    mockInstallAllPacks.mockClear()
+    mockOpenManager.mockClear()
+    mockIsPackInstalled.mockReset()
+    mockIsPackInstalled.mockReturnValue(false)
+    mockShouldShowManagerButtons.value = false
+    mockIsInstalling.value = false
+    mockMissingNodePacks.value = []
+    mockIsLoading.value = false
+  })
+
+  describe('Basic Rendering', () => {
+    it('renders pack name from packId', () => {
+      const wrapper = mountRow()
+      expect(wrapper.text()).toContain('my-pack')
+    })
+
+    it('renders "Unknown pack" when packId is null', () => {
+      const wrapper = mountRow({ group: makeGroup({ packId: null }) })
+      expect(wrapper.text()).toContain('Unknown pack')
+    })
+
+    it('renders loading text when isResolving is true', () => {
+      const wrapper = mountRow({ group: makeGroup({ isResolving: true }) })
+      expect(wrapper.text()).toContain('Loading')
+    })
+
+    it('renders node count', () => {
+      const wrapper = mountRow()
+      expect(wrapper.text()).toContain('(2)')
+    })
+
+    it('renders count of 5 for 5 nodeTypes', () => {
+      const wrapper = mountRow({
+        group: makeGroup({
+          nodeTypes: Array.from({ length: 5 }, (_, i) => ({
+            type: `Node${i}`,
+            nodeId: String(i),
+            isReplaceable: false
+          }))
+        })
+      })
+      expect(wrapper.text()).toContain('(5)')
+    })
+  })
+
+  describe('Expand / Collapse', () => {
+    it('starts collapsed', () => {
+      const wrapper = mountRow()
+      expect(wrapper.text()).not.toContain('MissingA')
+    })
+
+    it('expands when chevron is clicked', async () => {
+      const wrapper = mountRow()
+      await wrapper.get('button[aria-label="Expand"]').trigger('click')
+      expect(wrapper.text()).toContain('MissingA')
+      expect(wrapper.text()).toContain('MissingB')
+    })
+
+    it('collapses when chevron is clicked again', async () => {
+      const wrapper = mountRow()
+      await wrapper.get('button[aria-label="Expand"]').trigger('click')
+      expect(wrapper.text()).toContain('MissingA')
+      await wrapper.get('button[aria-label="Collapse"]').trigger('click')
+      expect(wrapper.text()).not.toContain('MissingA')
+    })
+  })
+
+  describe('Node Type List', () => {
+    async function expand(wrapper: ReturnType<typeof mountRow>) {
+      await wrapper.get('button[aria-label="Expand"]').trigger('click')
+    }
+
+    it('renders all nodeTypes when expanded', async () => {
+      const wrapper = mountRow({
+        group: makeGroup({
+          nodeTypes: [
+            { type: 'NodeA', nodeId: '1', isReplaceable: false },
+            { type: 'NodeB', nodeId: '2', isReplaceable: false },
+            { type: 'NodeC', nodeId: '3', isReplaceable: false }
+          ]
+        })
+      })
+      await expand(wrapper)
+      expect(wrapper.text()).toContain('NodeA')
+      expect(wrapper.text()).toContain('NodeB')
+      expect(wrapper.text()).toContain('NodeC')
+    })
+
+    it('shows nodeId badge when showNodeIdBadge is true', async () => {
+      const wrapper = mountRow({ showNodeIdBadge: true })
+      await expand(wrapper)
+      expect(wrapper.text()).toContain('#10')
+    })
+
+    it('hides nodeId badge when showNodeIdBadge is false', async () => {
+      const wrapper = mountRow({ showNodeIdBadge: false })
+      await expand(wrapper)
+      expect(wrapper.text()).not.toContain('#10')
+    })
+
+    it('emits locateNode when Locate button is clicked', async () => {
+      const wrapper = mountRow({ showNodeIdBadge: true })
+      await expand(wrapper)
+      await wrapper
+        .get('button[aria-label="Locate node on canvas"]')
+        .trigger('click')
+      expect(wrapper.emitted('locateNode')).toBeTruthy()
+      expect(wrapper.emitted('locateNode')?.[0]).toEqual(['10'])
+    })
+
+    it('does not show Locate for nodeType without nodeId', async () => {
+      const wrapper = mountRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
+        })
+      })
+      await expand(wrapper)
+      expect(
+        wrapper.find('button[aria-label="Locate node on canvas"]').exists()
+      ).toBe(false)
+    })
+
+    it('handles mixed nodeTypes with and without nodeId', async () => {
+      const wrapper = mountRow({
+        showNodeIdBadge: true,
+        group: makeGroup({
+          nodeTypes: [
+            { type: 'WithId', nodeId: '100', isReplaceable: false },
+            { type: 'WithoutId', isReplaceable: false } as never
+          ]
+        })
+      })
+      await expand(wrapper)
+      expect(wrapper.text()).toContain('WithId')
+      expect(wrapper.text()).toContain('WithoutId')
+      expect(
+        wrapper.findAll('button[aria-label="Locate node on canvas"]')
+      ).toHaveLength(1)
+    })
+  })
+
+  describe('Manager Integration', () => {
+    it('hides install UI when shouldShowManagerButtons is false', () => {
+      mockShouldShowManagerButtons.value = false
+      const wrapper = mountRow()
+      expect(wrapper.text()).not.toContain('Install node pack')
+    })
+
+    it('hides install UI when packId is null', () => {
+      mockShouldShowManagerButtons.value = true
+      const wrapper = mountRow({ group: makeGroup({ packId: null }) })
+      expect(wrapper.text()).not.toContain('Install node pack')
+    })
+
+    it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(false)
+      mockMissingNodePacks.value = []
+      const wrapper = mountRow()
+      expect(wrapper.text()).toContain('Search in Node Manager')
+    })
+
+    it('shows "Installed" state when pack is installed', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(true)
+      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
+      const wrapper = mountRow()
+      expect(wrapper.text()).toContain('Installed')
+    })
+
+    it('shows spinner when installing', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsInstalling.value = true
+      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
+      const wrapper = mountRow()
+      expect(wrapper.find('[role="status"]').exists()).toBe(true)
+    })
+
+    it('shows install button when not installed and pack found', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(false)
+      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
+      const wrapper = mountRow()
+      expect(wrapper.text()).toContain('Install node pack')
+    })
+
+    it('calls installAllPacks when Install button is clicked', async () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsPackInstalled.mockReturnValue(false)
+      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
+      const wrapper = mountRow()
+      await wrapper.get('button:not([aria-label])').trigger('click')
+      expect(mockInstallAllPacks).toHaveBeenCalledOnce()
+    })
+
+    it('shows loading spinner when registry is loading', () => {
+      mockShouldShowManagerButtons.value = true
+      mockIsLoading.value = true
+      const wrapper = mountRow()
+      expect(wrapper.find('[role="status"]').exists()).toBe(true)
+    })
+  })
+
+  describe('Info Button', () => {
+    it('shows Info button when showInfoButton true and packId not null', () => {
+      const wrapper = mountRow({ showInfoButton: true })
+      expect(
+        wrapper.find('button[aria-label="View in Manager"]').exists()
+      ).toBe(true)
+    })
+
+    it('hides Info button when showInfoButton is false', () => {
+      const wrapper = mountRow({ showInfoButton: false })
+      expect(
+        wrapper.find('button[aria-label="View in Manager"]').exists()
+      ).toBe(false)
+    })
+
+    it('hides Info button when packId is null', () => {
+      const wrapper = mountRow({
+        showInfoButton: true,
+        group: makeGroup({ packId: null })
+      })
+      expect(
+        wrapper.find('button[aria-label="View in Manager"]').exists()
+      ).toBe(false)
+    })
+
+    it('emits openManagerInfo when Info button is clicked', async () => {
+      const wrapper = mountRow({ showInfoButton: true })
+      await wrapper.get('button[aria-label="View in Manager"]').trigger('click')
+      expect(wrapper.emitted('openManagerInfo')).toBeTruthy()
+      expect(wrapper.emitted('openManagerInfo')?.[0]).toEqual(['my-pack'])
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty nodeTypes array', () => {
+      const wrapper = mountRow({ group: makeGroup({ nodeTypes: [] }) })
+      expect(wrapper.text()).toContain('(0)')
+    })
+  })
+})
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -27,7 +27,11 @@
          :key="group.title"
          :collapse="collapseState[group.title] ?? false"
          class="border-b border-interface-stroke"
-          :size="group.type === 'missing_node' ? 'lg' : 'default'"
+          :size="
+            group.type === 'missing_node' || group.type === 'swap_nodes'
+              ? 'lg'
+              : 'default'
+          "
          @update:collapse="collapseState[group.title] = $event"
        >
          <template #label>
@@ -40,7 +44,9 @@
                  {{
                    group.type === 'missing_node'
                      ? `${group.title} (${missingPackGroups.length})`
-                      : group.title
+                      : group.type === 'swap_nodes'
+                        ? `${group.title} (${swapNodeGroups.length})`
+                        : group.title
                  }}
                </span>
                <span
@@ -69,6 +75,21 @@
                    : t('rightSidePanel.missingNodePacks.installAll')
                }}
              </Button>
+              <Button
+                v-else-if="group.type === 'swap_nodes'"
+                v-tooltip.top="
+                  t(
+                    'nodeReplacement.replaceAllWarning',
+                    'Replaces all available nodes in this group.'
+                  )
+                "
+                variant="secondary"
+                size="sm"
+                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                @click.stop="handleReplaceAll()"
+              >
+                {{ t('nodeReplacement.replaceAll', 'Replace All') }}
+              </Button>
            </div>
          </template>

@@ -82,8 +103,17 @@
            @open-manager-info="handleOpenManagerInfo"
          />

+          <!-- Swap Nodes -->
+          <SwapNodesCard
+            v-else-if="group.type === 'swap_nodes'"
+            :swap-node-groups="swapNodeGroups"
+            :show-node-id-badge="showNodeIdBadge"
+            @locate-node="handleLocateMissingNode"
+            @replace="handleReplaceGroup"
+          />
+
          <!-- Execution Errors -->
-          <div v-else class="px-4 space-y-3">
+          <div v-else-if="group.type === 'execution'" class="px-4 space-y-3">
            <ErrorNodeCard
              v-for="card in group.cards"
              :key="card.id"
@@ -150,11 +180,14 @@ import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
+import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useErrorGroups } from './useErrorGroups'
+import type { SwapNodeGroup } from './useErrorGroups'
+import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'

 const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
@@ -167,6 +200,7 @@ const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
 const { missingNodePacks } = useMissingNodes()
 const { isInstalling: isInstallingAll, installAllPacks: installAll } =
  usePackInstall(() => missingNodePacks.value)
+const { replaceGroup, replaceAllGroups } = useNodeReplacement()

 const searchQuery = ref('')

@@ -183,7 +217,8 @@ const {
  isSingleNodeSelected,
  errorNodeCache,
  missingNodeCache,
-  missingPackGroups
+  missingPackGroups,
+  swapNodeGroups
 } = useErrorGroups(searchQuery, t)

 /**
@@ -229,6 +264,14 @@ function handleOpenManagerInfo(packId: string) {
  }
 }

+function handleReplaceGroup(group: SwapNodeGroup) {
+  replaceGroup(group)
+}
+
+function handleReplaceAll() {
+  replaceAllGroups(swapNodeGroups.value)
+}
+
 function handleEnterSubgraph(nodeId: string) {
  enterSubgraph(nodeId, errorNodeCache.value)
 }
--- a/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
+++ b/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
@@ -0,0 +1,187 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { nextTick, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { MissingNodeType } from '@/types/comfy'
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    rootGraph: {
+      serialize: vi.fn(() => ({})),
+      getNodeById: vi.fn()
+    }
+  }
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  getNodeByExecutionId: vi.fn(),
+  getExecutionIdByNode: vi.fn(),
+  getRootParentNode: vi.fn(() => null),
+  forEachNode: vi.fn(),
+  mapAllNodes: vi.fn(() => [])
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/i18n', () => ({
+  st: vi.fn((_key: string, fallback: string) => fallback)
+}))
+
+vi.mock('@/stores/comfyRegistryStore', () => ({
+  useComfyRegistryStore: () => ({
+    inferPackFromNodeName: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/nodeTitleUtil', () => ({
+  resolveNodeDisplayName: vi.fn(() => '')
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => false)
+}))
+
+vi.mock('@/utils/executableGroupNodeDto', () => ({
+  isGroupNode: vi.fn(() => false)
+}))
+
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useErrorGroups } from './useErrorGroups'
+
+function makeMissingNodeType(
+  type: string,
+  opts: {
+    nodeId?: string
+    isReplaceable?: boolean
+    replacement?: { new_node_id: string }
+  } = {}
+): MissingNodeType {
+  return {
+    type,
+    nodeId: opts.nodeId ?? '1',
+    isReplaceable: opts.isReplaceable ?? false,
+    replacement: opts.replacement
+      ? {
+          old_node_id: type,
+          new_node_id: opts.replacement.new_node_id,
+          old_widget_ids: null,
+          input_mapping: null,
+          output_mapping: null
+        }
+      : undefined
+  }
+}
+
+describe('swapNodeGroups computed', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  function getSwapNodeGroups(nodeTypes: MissingNodeType[]) {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingNodes(nodeTypes)
+
+    const searchQuery = ref('')
+    const t = (key: string) => key
+    const { swapNodeGroups } = useErrorGroups(searchQuery, t)
+    return swapNodeGroups
+  }
+
+  it('returns empty array when no missing nodes', () => {
+    const swap = getSwapNodeGroups([])
+    expect(swap.value).toEqual([])
+  })
+
+  it('returns empty array when no nodes are replaceable', () => {
+    const swap = getSwapNodeGroups([
+      makeMissingNodeType('NodeA', { isReplaceable: false }),
+      makeMissingNodeType('NodeB', { isReplaceable: false })
+    ])
+    expect(swap.value).toEqual([])
+  })
+
+  it('groups replaceable nodes by type', async () => {
+    const swap = getSwapNodeGroups([
+      makeMissingNodeType('OldNode', {
+        nodeId: '1',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewNode' }
+      }),
+      makeMissingNodeType('OldNode', {
+        nodeId: '2',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewNode' }
+      })
+    ])
+    await nextTick()
+    expect(swap.value).toHaveLength(1)
+    expect(swap.value[0].type).toBe('OldNode')
+    expect(swap.value[0].newNodeId).toBe('NewNode')
+    expect(swap.value[0].nodeTypes).toHaveLength(2)
+  })
+
+  it('creates separate groups for different types', async () => {
+    const swap = getSwapNodeGroups([
+      makeMissingNodeType('TypeA', {
+        nodeId: '1',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewA' }
+      }),
+      makeMissingNodeType('TypeB', {
+        nodeId: '2',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewB' }
+      })
+    ])
+    await nextTick()
+    expect(swap.value).toHaveLength(2)
+    expect(swap.value.map((g) => g.type)).toEqual(['TypeA', 'TypeB'])
+  })
+
+  it('sorts groups alphabetically by type', async () => {
+    const swap = getSwapNodeGroups([
+      makeMissingNodeType('Zebra', {
+        nodeId: '1',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewZ' }
+      }),
+      makeMissingNodeType('Alpha', {
+        nodeId: '2',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewA' }
+      })
+    ])
+    await nextTick()
+    expect(swap.value[0].type).toBe('Alpha')
+    expect(swap.value[1].type).toBe('Zebra')
+  })
+
+  it('excludes string nodeType entries', async () => {
+    const swap = getSwapNodeGroups([
+      'StringGroupNode' as unknown as MissingNodeType,
+      makeMissingNodeType('OldNode', {
+        nodeId: '1',
+        isReplaceable: true,
+        replacement: { new_node_id: 'NewNode' }
+      })
+    ])
+    await nextTick()
+    expect(swap.value).toHaveLength(1)
+    expect(swap.value[0].type).toBe('OldNode')
+  })
+
+  it('sets newNodeId to undefined when replacement is missing', async () => {
+    const swap = getSwapNodeGroups([
+      makeMissingNodeType('OldNode', {
+        nodeId: '1',
+        isReplaceable: true
+        // no replacement
+      })
+    ])
+    await nextTick()
+    expect(swap.value).toHaveLength(1)
+    expect(swap.value[0].newNodeId).toBeUndefined()
+  })
+})
--- a/src/components/rightSidePanel/errors/types.ts
+++ b/src/components/rightSidePanel/errors/types.ts
@@ -22,3 +22,4 @@ export type ErrorGroup =
      priority: number
    }
  | { type: 'missing_node'; title: string; priority: number }
+  | { type: 'swap_nodes'; title: string; priority: number }
--- a/src/components/rightSidePanel/errors/useErrorGroups.test.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.test.ts
@@ -0,0 +1,439 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { nextTick, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { MissingNodeType } from '@/types/comfy'
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    rootGraph: {
+      serialize: vi.fn(() => ({})),
+      getNodeById: vi.fn()
+    }
+  }
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  getNodeByExecutionId: vi.fn(),
+  getExecutionIdByNode: vi.fn(),
+  getRootParentNode: vi.fn(() => null),
+  forEachNode: vi.fn(),
+  mapAllNodes: vi.fn(() => [])
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/i18n', () => ({
+  st: vi.fn((_key: string, fallback: string) => fallback)
+}))
+
+vi.mock('@/stores/comfyRegistryStore', () => ({
+  useComfyRegistryStore: () => ({
+    inferPackFromNodeName: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/nodeTitleUtil', () => ({
+  resolveNodeDisplayName: vi.fn(() => '')
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => false)
+}))
+
+vi.mock('@/utils/executableGroupNodeDto', () => ({
+  isGroupNode: vi.fn(() => false)
+}))
+
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useErrorGroups } from './useErrorGroups'
+
+function makeMissingNodeType(
+  type: string,
+  opts: {
+    nodeId?: string
+    isReplaceable?: boolean
+    cnrId?: string
+    replacement?: { new_node_id: string }
+  } = {}
+): MissingNodeType {
+  return {
+    type,
+    nodeId: opts.nodeId ?? '1',
+    isReplaceable: opts.isReplaceable ?? false,
+    cnrId: opts.cnrId,
+    replacement: opts.replacement
+      ? {
+          old_node_id: type,
+          new_node_id: opts.replacement.new_node_id,
+          old_widget_ids: null,
+          input_mapping: null,
+          output_mapping: null
+        }
+      : undefined
+  }
+}
+
+function createErrorGroups() {
+  const store = useExecutionErrorStore()
+  const searchQuery = ref('')
+  const t = (key: string) => key
+  const groups = useErrorGroups(searchQuery, t)
+  return { store, searchQuery, groups }
+}
+
+describe('useErrorGroups', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('missingPackGroups', () => {
+    it('returns empty array when no missing nodes', () => {
+      const { groups } = createErrorGroups()
+      expect(groups.missingPackGroups.value).toEqual([])
+    })
+
+    it('groups non-replaceable nodes by cnrId', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('NodeA', { cnrId: 'pack-1' }),
+        makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
+        makeMissingNodeType('NodeC', { cnrId: 'pack-2', nodeId: '3' })
+      ])
+      await nextTick()
+
+      expect(groups.missingPackGroups.value).toHaveLength(2)
+      const pack1 = groups.missingPackGroups.value.find(
+        (g) => g.packId === 'pack-1'
+      )
+      expect(pack1?.nodeTypes).toHaveLength(2)
+      const pack2 = groups.missingPackGroups.value.find(
+        (g) => g.packId === 'pack-2'
+      )
+      expect(pack2?.nodeTypes).toHaveLength(1)
+    })
+
+    it('excludes replaceable nodes from missingPackGroups', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('OldNode', {
+          isReplaceable: true,
+          replacement: { new_node_id: 'NewNode' }
+        }),
+        makeMissingNodeType('MissingNode', {
+          nodeId: '2',
+          cnrId: 'some-pack'
+        })
+      ])
+      await nextTick()
+
+      expect(groups.missingPackGroups.value).toHaveLength(1)
+      expect(groups.missingPackGroups.value[0].packId).toBe('some-pack')
+    })
+
+    it('groups nodes without cnrId under null packId', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('UnknownNode', { nodeId: '1' }),
+        makeMissingNodeType('AnotherUnknown', { nodeId: '2' })
+      ])
+      await nextTick()
+
+      expect(groups.missingPackGroups.value).toHaveLength(1)
+      expect(groups.missingPackGroups.value[0].packId).toBeNull()
+      expect(groups.missingPackGroups.value[0].nodeTypes).toHaveLength(2)
+    })
+
+    it('sorts groups alphabetically with null packId last', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('NodeA', { cnrId: 'zebra-pack' }),
+        makeMissingNodeType('NodeB', { nodeId: '2' }),
+        makeMissingNodeType('NodeC', { cnrId: 'alpha-pack', nodeId: '3' })
+      ])
+      await nextTick()
+
+      const packIds = groups.missingPackGroups.value.map((g) => g.packId)
+      expect(packIds).toEqual(['alpha-pack', 'zebra-pack', null])
+    })
+
+    it('sorts nodeTypes within each group alphabetically by type then nodeId', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
+        makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '3' }),
+        makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '1' })
+      ])
+      await nextTick()
+
+      const group = groups.missingPackGroups.value[0]
+      const types = group.nodeTypes.map((n) =>
+        typeof n === 'string' ? n : `${n.type}:${n.nodeId}`
+      )
+      expect(types).toEqual(['NodeA:1', 'NodeA:3', 'NodeB:2'])
+    })
+
+    it('handles string nodeType entries', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        'StringGroupNode' as unknown as MissingNodeType
+      ])
+      await nextTick()
+
+      expect(groups.missingPackGroups.value).toHaveLength(1)
+      expect(groups.missingPackGroups.value[0].packId).toBeNull()
+    })
+  })
+
+  describe('allErrorGroups', () => {
+    it('returns empty array when no errors', () => {
+      const { groups } = createErrorGroups()
+      expect(groups.allErrorGroups.value).toEqual([])
+    })
+
+    it('includes missing_node group when missing nodes exist', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
+      ])
+      await nextTick()
+
+      const missingGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'missing_node'
+      )
+      expect(missingGroup).toBeDefined()
+    })
+
+    it('includes swap_nodes group when replaceable nodes exist', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('OldNode', {
+          isReplaceable: true,
+          replacement: { new_node_id: 'NewNode' }
+        })
+      ])
+      await nextTick()
+
+      const swapGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'swap_nodes'
+      )
+      expect(swapGroup).toBeDefined()
+    })
+
+    it('includes both swap_nodes and missing_node when both exist', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('OldNode', {
+          isReplaceable: true,
+          replacement: { new_node_id: 'NewNode' }
+        }),
+        makeMissingNodeType('MissingNode', {
+          nodeId: '2',
+          cnrId: 'some-pack'
+        })
+      ])
+      await nextTick()
+
+      const types = groups.allErrorGroups.value.map((g) => g.type)
+      expect(types).toContain('swap_nodes')
+      expect(types).toContain('missing_node')
+    })
+
+    it('swap_nodes has lower priority than missing_node', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('OldNode', {
+          isReplaceable: true,
+          replacement: { new_node_id: 'NewNode' }
+        }),
+        makeMissingNodeType('MissingNode', {
+          nodeId: '2',
+          cnrId: 'some-pack'
+        })
+      ])
+      await nextTick()
+
+      const swapIdx = groups.allErrorGroups.value.findIndex(
+        (g) => g.type === 'swap_nodes'
+      )
+      const missingIdx = groups.allErrorGroups.value.findIndex(
+        (g) => g.type === 'missing_node'
+      )
+      expect(swapIdx).toBeLessThan(missingIdx)
+    })
+
+    it('includes execution error groups from node errors', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [
+            {
+              type: 'value_not_valid',
+              message: 'Value not valid',
+              details: 'some detail'
+            }
+          ]
+        }
+      }
+      await nextTick()
+
+      const execGroups = groups.allErrorGroups.value.filter(
+        (g) => g.type === 'execution'
+      )
+      expect(execGroups.length).toBeGreaterThan(0)
+    })
+
+    it('includes execution error from runtime errors', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastExecutionError = {
+        prompt_id: 'test-prompt',
+        timestamp: Date.now(),
+        node_id: 5,
+        node_type: 'KSampler',
+        executed: [],
+        exception_type: 'RuntimeError',
+        exception_message: 'CUDA out of memory',
+        traceback: ['line 1', 'line 2'],
+        current_inputs: {},
+        current_outputs: {}
+      }
+      await nextTick()
+
+      const execGroups = groups.allErrorGroups.value.filter(
+        (g) => g.type === 'execution'
+      )
+      expect(execGroups.length).toBeGreaterThan(0)
+    })
+
+    it('includes prompt error when present', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastPromptError = {
+        type: 'prompt_no_outputs',
+        message: 'No outputs',
+        details: ''
+      }
+      await nextTick()
+
+      const promptGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'execution' && g.title === 'No outputs'
+      )
+      expect(promptGroup).toBeDefined()
+    })
+  })
+
+  describe('filteredGroups', () => {
+    it('returns all groups when search query is empty', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'value_error', message: 'Bad value', details: '' }]
+        }
+      }
+      await nextTick()
+
+      expect(groups.filteredGroups.value.length).toBeGreaterThan(0)
+    })
+
+    it('filters groups based on search query', async () => {
+      const { store, groups, searchQuery } = createErrorGroups()
+      store.lastNodeErrors = {
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [
+            {
+              type: 'value_error',
+              message: 'Value error in sampler',
+              details: ''
+            }
+          ]
+        },
+        '2': {
+          class_type: 'CLIPLoader',
+          dependent_outputs: [],
+          errors: [
+            {
+              type: 'file_not_found',
+              message: 'File not found',
+              details: ''
+            }
+          ]
+        }
+      }
+      await nextTick()
+
+      searchQuery.value = 'sampler'
+      await nextTick()
+
+      const executionGroups = groups.filteredGroups.value.filter(
+        (g) => g.type === 'execution'
+      )
+      for (const group of executionGroups) {
+        if (group.type !== 'execution') continue
+        const hasMatch = group.cards.some(
+          (c) =>
+            c.title.toLowerCase().includes('sampler') ||
+            c.errors.some((e) => e.message.toLowerCase().includes('sampler'))
+        )
+        expect(hasMatch).toBe(true)
+      }
+    })
+  })
+
+  describe('groupedErrorMessages', () => {
+    it('returns empty array when no errors', () => {
+      const { groups } = createErrorGroups()
+      expect(groups.groupedErrorMessages.value).toEqual([])
+    })
+
+    it('collects unique error messages from node errors', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [
+            { type: 'err_a', message: 'Error A', details: '' },
+            { type: 'err_b', message: 'Error B', details: '' }
+          ]
+        },
+        '2': {
+          class_type: 'CLIPLoader',
+          dependent_outputs: [],
+          errors: [{ type: 'err_a', message: 'Error A', details: '' }]
+        }
+      }
+      await nextTick()
+
+      const messages = groups.groupedErrorMessages.value
+      expect(messages).toContain('Error A')
+      expect(messages).toContain('Error B')
+      // Deduplication: Error A appears twice but should only be listed once
+      expect(messages.filter((m) => m === 'Error A')).toHaveLength(1)
+    })
+
+    it('includes missing node group title as message', async () => {
+      const { store, groups } = createErrorGroups()
+      store.setMissingNodeTypes([
+        makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
+      ])
+      await nextTick()
+
+      expect(groups.groupedErrorMessages.value.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('collapseState', () => {
+    it('returns a reactive object', () => {
+      const { groups } = createErrorGroups()
+      expect(groups.collapseState).toBeDefined()
+      expect(typeof groups.collapseState).toBe('object')
+    })
+  })
+})
--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -42,6 +42,12 @@ export interface MissingPackGroup {
  isResolving: boolean
 }

+export interface SwapNodeGroup {
+  type: string
+  newNodeId: string | undefined
+  nodeTypes: MissingNodeType[]
+}
+
 interface GroupEntry {
  type: 'execution'
  priority: number
@@ -444,6 +450,8 @@ export function useErrorGroups(
    const resolvingKeys = new Set<string | null>()

    for (const nodeType of nodeTypes) {
+      if (typeof nodeType !== 'string' && nodeType.isReplaceable) continue
+
      let packId: string | null

      if (typeof nodeType === 'string') {
@@ -495,18 +503,53 @@ export function useErrorGroups(
      }))
  })

+  const swapNodeGroups = computed<SwapNodeGroup[]>(() => {
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const map = new Map<string, SwapNodeGroup>()
+
+    for (const nodeType of nodeTypes) {
+      if (typeof nodeType === 'string' || !nodeType.isReplaceable) continue
+
+      const typeName = nodeType.type
+      const existing = map.get(typeName)
+      if (existing) {
+        existing.nodeTypes.push(nodeType)
+      } else {
+        map.set(typeName, {
+          type: typeName,
+          newNodeId: nodeType.replacement?.new_node_id,
+          nodeTypes: [nodeType]
+        })
+      }
+    }
+
+    return Array.from(map.values()).sort((a, b) => a.type.localeCompare(b.type))
+  })
+
  /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
  function buildMissingNodeGroups(): ErrorGroup[] {
    const error = executionErrorStore.missingNodesError
    if (!error) return []

-    return [
-      {
+    const groups: ErrorGroup[] = []
+
+    if (swapNodeGroups.value.length > 0) {
+      groups.push({
+        type: 'swap_nodes' as const,
+        title: st('nodeReplacement.swapNodesTitle', 'Swap Nodes'),
+        priority: 0
+      })
+    }
+
+    if (missingPackGroups.value.length > 0) {
+      groups.push({
        type: 'missing_node' as const,
        title: error.message,
-        priority: 0
-      }
-    ]
+        priority: 1
+      })
+    }
+
+    return groups.sort((a, b) => a.priority - b.priority)
  }

  const allErrorGroups = computed<ErrorGroup[]>(() => {
@@ -564,6 +607,7 @@ export function useErrorGroups(
    errorNodeCache,
    missingNodeCache,
    groupedErrorMessages,
-    missingPackGroups
+    missingPackGroups,
+    swapNodeGroups
  }
 }
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -34,6 +34,7 @@ const {
  node,
  isDraggable = false,
  hiddenFavoriteIndicator = false,
+  hiddenWidgetActions = false,
  showNodeName = false,
  parents = [],
  isShownOnParents = false
@@ -42,6 +43,7 @@ const {
  node: LGraphNode
  isDraggable?: boolean
  hiddenFavoriteIndicator?: boolean
+  hiddenWidgetActions?: boolean
  showNodeName?: boolean
  parents?: SubgraphNode[]
  isShownOnParents?: boolean
@@ -170,7 +172,10 @@ const displayLabel = customRef((track, trigger) => {
      >
        {{ sourceNodeName }}
      </span>
-      <div class="flex items-center gap-1 shrink-0 pointer-events-auto">
+      <div
+        v-if="!hiddenWidgetActions"
+        class="flex items-center gap-1 shrink-0 pointer-events-auto"
+      >
        <WidgetActions
          v-model:label="displayLabel"
          :widget="widget"
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
@@ -50,7 +50,8 @@ describe('NodeSearchCategorySidebar', () => {
      useNodeDefStore().updateNodeDefs([
        createMockNodeDef({
          name: 'EssentialNode',
-          essentials_category: 'basic'
+          essentials_category: 'basic',
+          python_module: 'comfy_essentials'
        })
      ])
      await nextTick()
@@ -58,9 +59,13 @@ describe('NodeSearchCategorySidebar', () => {
      const wrapper = await createWrapper()

      expect(wrapper.text()).toContain('Most relevant')
+      expect(wrapper.text()).toContain('Recents')
      expect(wrapper.text()).toContain('Favorites')
      expect(wrapper.text()).toContain('Essentials')
-      expect(wrapper.text()).toContain('Custom')
+      expect(wrapper.text()).toContain('Blueprints')
+      expect(wrapper.text()).toContain('Partner')
+      expect(wrapper.text()).toContain('Comfy')
+      expect(wrapper.text()).toContain('Extensions')
    })

    it('should mark the selected preset category as selected', async () => {
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
@@ -53,7 +53,6 @@ import NodeSearchCategoryTreeNode, {
  CATEGORY_UNSELECTED_CLASS
 } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { nodeOrganizationService } from '@/services/nodeOrganizationService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
@@ -65,11 +64,11 @@ const selectedCategory = defineModel<string>('selectedCategory', {
 })

 const { t } = useI18n()
-const { flags } = useFeatureFlags()
 const nodeDefStore = useNodeDefStore()

 const topCategories = computed(() => [
  { id: 'most-relevant', label: t('g.mostRelevant') },
+  { id: 'recents', label: t('g.recents') },
  { id: 'favorites', label: t('g.favorites') }
 ])

@@ -81,10 +80,18 @@ const hasEssentialNodes = computed(() =>

 const sourceCategories = computed(() => {
  const categories = []
-  if (flags.nodeLibraryEssentialsEnabled && hasEssentialNodes.value) {
+  if (hasEssentialNodes.value) {
    categories.push({ id: 'essentials', label: t('g.essentials') })
  }
-  categories.push({ id: 'custom', label: t('g.custom') })
+  categories.push(
+    {
+      id: 'blueprints',
+      label: t('sideToolbar.nodeLibraryTab.filterOptions.blueprints')
+    },
+    { id: 'partner', label: t('g.partner') },
+    { id: 'comfy', label: t('g.comfy') },
+    { id: 'extensions', label: t('g.extensions') }
+  )
  return categories
 })

--- a/src/components/searchbox/v2/NodeSearchContent.test.ts
+++ b/src/components/searchbox/v2/NodeSearchContent.test.ts
@@ -132,7 +132,7 @@ describe('NodeSearchContent', () => {
      expect(wrapper.text()).toContain('No results')
    })

-    it('should show only non-Core nodes when Custom is selected', async () => {
+    it('should show only CustomNodes when Extensions is selected', async () => {
      useNodeDefStore().updateNodeDefs([
        createMockNodeDef({
          name: 'CoreNode',
@@ -155,7 +155,7 @@ describe('NodeSearchContent', () => {
      ).toBe(NodeSourceType.CustomNodes)

      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-custom"]').trigger('click')
+      await wrapper.find('[data-testid="category-extensions"]').trigger('click')
      await nextTick()

      const items = getNodeItems(wrapper)
--- a/src/components/searchbox/v2/NodeSearchContent.vue
+++ b/src/components/searchbox/v2/NodeSearchContent.vue
@@ -19,9 +19,6 @@

    <!-- Filter header row -->
    <div class="flex items-center">
-      <div class="shrink-0 px-3 py-2 text-sm text-muted-foreground">
-        {{ $t('g.filterBy') }}
-      </div>
      <NodeSearchFilterBar
        class="flex-1"
        :active-chip-key="activeFilter?.key"
@@ -128,7 +125,6 @@ const searchQuery = ref('')
 const selectedCategory = ref('most-relevant')
 const selectedIndex = ref(0)

-// Filter selection mode
 const activeFilter = ref<FilterChip | null>(null)
 const filterQuery = ref('')

@@ -171,7 +167,6 @@ function cancelFilter() {
  nextTick(() => searchInputRef.value?.focus())
 }

-// Node search
 const searchResults = computed(() => {
  if (!searchQuery.value && filters.length === 0) {
    return nodeFrequencyStore.topNodeDefs
@@ -212,11 +207,24 @@ const displayedResults = computed<ComfyNodeDefImpl[]>(() => {
        (n) => n.nodeSource.type === NodeSourceType.Essentials
      )
      break
-    case 'custom':
+    case 'recents':
+      return searchResults.value
+    case 'blueprints':
      results = allNodes.filter(
-        (n) =>
-          n.nodeSource.type !== NodeSourceType.Core &&
-          n.nodeSource.type !== NodeSourceType.Essentials
+        (n) => n.nodeSource.type === NodeSourceType.Blueprint
+      )
+      break
+    case 'partner':
+      results = allNodes.filter((n) => n.api_node)
+      break
+    case 'comfy':
+      results = allNodes.filter(
+        (n) => n.nodeSource.type === NodeSourceType.Core
+      )
+      break
+    case 'extensions':
+      results = allNodes.filter(
+        (n) => n.nodeSource.type === NodeSourceType.CustomNodes
      )
      break
    default:
@@ -247,7 +255,6 @@ watch([selectedCategory, searchQuery, () => filters], () => {
  selectedIndex.value = 0
 })

-// Keyboard navigation
 function onKeyDown() {
  if (activeFilter.value) {
    filterPanelRef.value?.navigate(1)
--- a/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
@@ -39,14 +39,17 @@ describe(NodeSearchFilterBar, () => {
    return wrapper
  }

-  it('should render Input, Output, and Source filter chips', async () => {
+  it('should render all filter chips', async () => {
    const wrapper = await createWrapper()

    const buttons = wrapper.findAll('button')
-    expect(buttons).toHaveLength(3)
-    expect(buttons[0].text()).toBe('Input')
-    expect(buttons[1].text()).toBe('Output')
-    expect(buttons[2].text()).toBe('Source')
+    expect(buttons).toHaveLength(6)
+    expect(buttons[0].text()).toBe('Blueprints')
+    expect(buttons[1].text()).toBe('Partner Nodes')
+    expect(buttons[2].text()).toBe('Essentials')
+    expect(buttons[3].text()).toBe('Extensions')
+    expect(buttons[4].text()).toBe('Input')
+    expect(buttons[5].text()).toBe('Output')
  })

  it('should mark active chip as pressed when activeChipKey matches', async () => {
--- a/src/components/searchbox/v2/NodeSearchFilterBar.vue
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.vue
@@ -52,6 +52,26 @@ const nodeDefStore = useNodeDefStore()
 const chips = computed<FilterChip[]>(() => {
  const searchService = nodeDefStore.nodeSearchService
  return [
+    {
+      key: 'blueprints',
+      label: t('sideToolbar.nodeLibraryTab.filterOptions.blueprints'),
+      filter: searchService.nodeSourceFilter
+    },
+    {
+      key: 'partnerNodes',
+      label: t('sideToolbar.nodeLibraryTab.filterOptions.partnerNodes'),
+      filter: searchService.nodeSourceFilter
+    },
+    {
+      key: 'essentials',
+      label: t('g.essentials'),
+      filter: searchService.nodeSourceFilter
+    },
+    {
+      key: 'extensions',
+      label: t('g.extensions'),
+      filter: searchService.nodeSourceFilter
+    },
    {
      key: 'input',
      label: t('g.input'),
@@ -61,11 +81,6 @@ const chips = computed<FilterChip[]>(() => {
      key: 'output',
      label: t('g.output'),
      filter: searchService.outputTypeFilter
-    },
-    {
-      key: 'source',
-      label: t('g.source'),
-      filter: searchService.nodeSourceFilter
    }
  ]
 })
--- a/src/components/searchbox/v2/NodeSearchListItem.vue
+++ b/src/components/searchbox/v2/NodeSearchListItem.vue
@@ -123,13 +123,3 @@ const nodeFrequency = computed(() =>
 const nodeBookmarkStore = useNodeBookmarkStore()
 const isBookmarked = computed(() => nodeBookmarkStore.isBookmarked(nodeDef))
 </script>
-
-<style scoped>
-:deep(.highlight) {
-  background-color: color-mix(in srgb, currentColor 20%, transparent);
-  font-weight: 700;
-  border-radius: 0.25rem;
-  padding: 0 0.125rem;
-  margin: -0.125rem 0.125rem;
-}
-</style>
--- a/src/components/searchbox/v2/test/testUtils.ts
+++ b/src/components/searchbox/v2/test/testUtils.ts
@@ -37,15 +37,27 @@ export const testI18n = createI18n({
        addNode: 'Add a node...',
        filterBy: 'Filter by:',
        mostRelevant: 'Most relevant',
+        recents: 'Recents',
        favorites: 'Favorites',
        essentials: 'Essentials',
        custom: 'Custom',
+        comfy: 'Comfy',
+        partner: 'Partner',
+        extensions: 'Extensions',
        noResults: 'No results',
        filterByType: 'Filter by {type}...',
        input: 'Input',
        output: 'Output',
        source: 'Source',
        search: 'Search'
+      },
+      sideToolbar: {
+        nodeLibraryTab: {
+          filterOptions: {
+            blueprints: 'Blueprints',
+            partnerNodes: 'Partner Nodes'
+          }
+        }
      }
    }
  }
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
@@ -46,10 +46,10 @@ vi.mock('./nodeLibrary/AllNodesPanel.vue', () => ({
  }
 }))

-vi.mock('./nodeLibrary/CustomNodesPanel.vue', () => ({
+vi.mock('./nodeLibrary/BlueprintsPanel.vue', () => ({
  default: {
-    name: 'CustomNodesPanel',
-    template: '<div data-testid="custom-panel"><slot /></div>',
+    name: 'BlueprintsPanel',
+    template: '<div data-testid="blueprints-panel"><slot /></div>',
    props: ['sections', 'expandedKeys']
  }
 }))
@@ -58,7 +58,7 @@ vi.mock('./nodeLibrary/EssentialNodesPanel.vue', () => ({
  default: {
    name: 'EssentialNodesPanel',
    template: '<div data-testid="essential-panel"><slot /></div>',
-    props: ['root', 'expandedKeys']
+    props: ['root', 'expandedKeys', 'flatNodes']
  }
 }))

@@ -127,6 +127,8 @@ describe('NodeLibrarySidebarTabV2', () => {

    expect(wrapper.find('[data-testid="essential-panel"]').exists()).toBe(true)
    expect(wrapper.find('[data-testid="all-panel"]').exists()).toBe(false)
-    expect(wrapper.find('[data-testid="custom-panel"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="blueprints-panel"]').exists()).toBe(
+      false
+    )
  })
 })
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -29,17 +29,79 @@
                    v-for="option in sortingOptions"
                    :key="option.id"
                    :value="option.id"
-                    class="flex cursor-pointer items-center justify-end gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+                    class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
                  >
+                    <span class="flex-1">{{ $t(option.label) }}</span>
                    <DropdownMenuItemIndicator class="w-4">
                      <i class="icon-[lucide--check] size-4" />
                    </DropdownMenuItemIndicator>
-                    <span>{{ $t(option.label) }}</span>
                  </DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
              </DropdownMenuContent>
            </DropdownMenuPortal>
          </DropdownMenuRoot>
+          <DropdownMenuRoot v-if="selectedTab === 'all'">
+            <DropdownMenuTrigger as-child>
+              <button
+                :aria-label="$t('sideToolbar.nodeLibraryTab.filter')"
+                class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-comfy-input hover:bg-comfy-input-hover border-none"
+              >
+                <i class="icon-[lucide--list-filter] size-4" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent
+                class="z-[9999] min-w-32 rounded-lg border border-border-default bg-comfy-menu-bg p-1 shadow-lg"
+                align="end"
+                :side-offset="4"
+              >
+                <DropdownMenuCheckboxItem
+                  v-model="filterOptions.blueprints"
+                  class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+                >
+                  <span class="flex-1">{{
+                    $t('sideToolbar.nodeLibraryTab.filterOptions.blueprints')
+                  }}</span>
+                  <DropdownMenuItemIndicator class="w-4">
+                    <i class="icon-[lucide--check] size-4" />
+                  </DropdownMenuItemIndicator>
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                  v-model="filterOptions.partnerNodes"
+                  class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+                >
+                  <span class="flex-1">{{
+                    $t('sideToolbar.nodeLibraryTab.filterOptions.partnerNodes')
+                  }}</span>
+                  <DropdownMenuItemIndicator class="w-4">
+                    <i class="icon-[lucide--check] size-4" />
+                  </DropdownMenuItemIndicator>
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                  v-model="filterOptions.comfyNodes"
+                  class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+                >
+                  <span class="flex-1">{{
+                    $t('sideToolbar.nodeLibraryTab.filterOptions.comfyNodes')
+                  }}</span>
+                  <DropdownMenuItemIndicator class="w-4">
+                    <i class="icon-[lucide--check] size-4" />
+                  </DropdownMenuItemIndicator>
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                  v-model="filterOptions.extensions"
+                  class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+                >
+                  <span class="flex-1">{{
+                    $t('sideToolbar.nodeLibraryTab.filterOptions.extensions')
+                  }}</span>
+                  <DropdownMenuItemIndicator class="w-4">
+                    <i class="icon-[lucide--check] size-4" />
+                  </DropdownMenuItemIndicator>
+                </DropdownMenuCheckboxItem>
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenuRoot>
        </div>
        <Separator decorative class="border border-dashed border-comfy-input" />
        <!-- Tab list in header (fixed) -->
@@ -52,7 +114,7 @@
            :value="tab.value"
            :class="
              cn(
-                'flex-1 text-center select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
+                'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
                'text-sm text-foreground transition-colors',
                selectedTab === tab.value
                  ? 'bg-comfy-input font-bold'
@@ -75,6 +137,7 @@
          "
          v-model:expanded-keys="expandedKeys"
          :root="renderedEssentialRoot"
+          :flat-nodes="essentialFlatNodes"
          @node-click="handleNodeClick"
        />
        <AllNodesPanel
@@ -82,12 +145,13 @@
          v-model:expanded-keys="expandedKeys"
          :sections="renderedSections"
          :fill-node-info="fillNodeInfo"
+          :sort-order="sortOrder"
          @node-click="handleNodeClick"
        />
-        <CustomNodesPanel
-          v-if="selectedTab === 'custom'"
+        <BlueprintsPanel
+          v-if="selectedTab === 'blueprints'"
          v-model:expanded-keys="expandedKeys"
-          :sections="renderedCustomSections"
+          :sections="renderedBlueprintsSections"
          @node-click="handleNodeClick"
        />
      </TabsRoot>
@@ -99,6 +163,7 @@
 import { cn } from '@/utils/tailwindUtil'
 import { useLocalStorage } from '@vueuse/core'
 import {
+  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItemIndicator,
  DropdownMenuPortal,
@@ -125,17 +190,23 @@ import {
  nodeOrganizationService
 } from '@/services/nodeOrganizationService'
 import { getProviderIcon } from '@/utils/categoryUtil'
-import { sortedTree } from '@/utils/treeUtil'
+import { flattenTree, sortedTree, unwrapTreeRoot } from '@/utils/treeUtil'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { SortingStrategyId, TabId } from '@/types/nodeOrganizationTypes'
+import { buildNodeDefTree, useNodeDefStore } from '@/stores/nodeDefStore'
 import type {
+  NodeCategoryId,
+  NodeSection,
+  SortingStrategyId,
+  TabId
+} from '@/types/nodeOrganizationTypes'
+import type {
+  NodeLibrarySection,
  RenderedTreeExplorerNode,
  TreeNode
 } from '@/types/treeExplorerTypes'

 import AllNodesPanel from './nodeLibrary/AllNodesPanel.vue'
-import CustomNodesPanel from './nodeLibrary/CustomNodesPanel.vue'
+import BlueprintsPanel from './nodeLibrary/BlueprintsPanel.vue'
 import EssentialNodesPanel from './nodeLibrary/EssentialNodesPanel.vue'
 import NodeDragPreview from './nodeLibrary/NodeDragPreview.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
@@ -161,7 +232,7 @@ const sortOrderByTab = useLocalStorage<Record<TabId, SortingStrategyId>>(
  {
    essentials: DEFAULT_SORTING_ID,
    all: DEFAULT_SORTING_ID,
-    custom: 'alphabetical'
+    blueprints: 'alphabetical'
  }
 )
 const sortOrder = usePerTabState(selectedTab, sortOrderByTab)
@@ -173,14 +244,21 @@ const sortingOptions = computed(() =>
  }))
 )

+const filterOptions = ref<Record<NodeCategoryId, boolean>>({
+  blueprints: true,
+  partnerNodes: true,
+  comfyNodes: true,
+  extensions: true
+})
+
 const { t } = useI18n()

-const searchBoxRef = ref()
+const searchBoxRef = ref<InstanceType<typeof SearchBox> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
  essentials: [],
  all: [],
-  custom: []
+  blueprints: []
 })
 const expandedKeys = usePerTabState(selectedTab, expandedKeysByTab)

@@ -213,8 +291,8 @@ const sections = computed(() => {
 function getFolderIcon(node: TreeNode): string {
  const firstLeaf = findFirstLeaf(node)
  if (
-    firstLeaf?.key?.startsWith('root/api node') &&
-    firstLeaf.key.replace(`${node.key}/`, '') === firstLeaf.label
+    firstLeaf?.data?.api_node &&
+    firstLeaf.key?.replace(`${node.key}/`, '') === firstLeaf.label
  ) {
    return getProviderIcon(node.label ?? '')
  }
@@ -264,12 +342,33 @@ function applySorting(tree: TreeNode): TreeNode {
  return tree
 }

-const renderedSections = computed(() => {
-  return sections.value.map((section) => ({
+function renderSections(
+  nodeSections: NodeSection[],
+  filter?: (section: NodeSection) => boolean
+): NodeLibrarySection<ComfyNodeDefImpl>[] {
+  const filtered = filter ? nodeSections.filter(filter) : nodeSections
+
+  if (sortOrder.value === 'alphabetical') {
+    const allNodes = filtered.flatMap((section) =>
+      flattenTree<ComfyNodeDefImpl>(section.tree)
+    )
+    const mergedTree = unwrapTreeRoot(buildNodeDefTree(allNodes))
+    return [{ root: fillNodeInfo(applySorting(mergedTree)) }]
+  }
+
+  return filtered.map((section) => ({
+    category: section.category,
    title: section.title,
    root: fillNodeInfo(applySorting(section.tree))
  }))
-})
+}
+
+const renderedSections = computed(() =>
+  renderSections(
+    sections.value,
+    (section) => !section.category || filterOptions.value[section.category]
+  )
+)

 const essentialSections = computed(() => {
  if (selectedTab.value !== 'essentials') return []
@@ -286,18 +385,32 @@ const renderedEssentialRoot = computed(() => {
    : fillNodeInfo({ key: 'root', label: '', children: [] })
 })

-const customSections = computed(() => {
-  if (selectedTab.value !== 'custom') return []
-  return nodeOrganizationService.organizeNodesByTab(activeNodes.value, 'custom')
+function flattenRenderedLeaves(
+  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+): RenderedTreeExplorerNode<ComfyNodeDefImpl>[] {
+  if (node.type === 'node') return [node]
+  return node.children?.flatMap(flattenRenderedLeaves) ?? []
+}
+
+const essentialFlatNodes = computed(() => {
+  if (sortOrder.value !== 'alphabetical') return []
+  return flattenRenderedLeaves(renderedEssentialRoot.value).sort((a, b) =>
+    (a.label ?? '').localeCompare(b.label ?? '')
+  )
 })

-const renderedCustomSections = computed(() => {
-  return customSections.value.map((section) => ({
-    title: section.title,
-    root: fillNodeInfo(applySorting(section.tree))
-  }))
+const blueprintsSections = computed(() => {
+  if (selectedTab.value !== 'blueprints') return []
+  return nodeOrganizationService.organizeNodesByTab(
+    activeNodes.value,
+    'blueprints'
+  )
 })

+const renderedBlueprintsSections = computed(() =>
+  renderSections(blueprintsSections.value)
+)
+
 function collectFolderKeys(node: TreeNode): string[] {
  if (node.leaf) return []
  const keys = [node.key]
@@ -334,8 +447,8 @@ async function handleSearch() {
    for (const section of essentialSections.value) {
      allKeys.push(...collectFolderKeys(section.tree))
    }
-  } else if (selectedTab.value === 'custom') {
-    for (const section of customSections.value) {
+  } else if (selectedTab.value === 'blueprints') {
+    for (const section of blueprintsSections.value) {
      allKeys.push(...collectFolderKeys(section.tree))
    }
  } else {
@@ -347,19 +460,18 @@ async function handleSearch() {
 }

 const tabs = computed(() => {
-  const baseTabs: Array<{ value: TabId; label: string }> = [
+  const allTabs: Array<{ value: TabId; label: string }> = [
    { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
-    { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
+    {
+      value: 'essentials' as TabId,
+      label: t('sideToolbar.nodeLibraryTab.essentials')
+    },
+    {
+      value: 'blueprints',
+      label: t('sideToolbar.nodeLibraryTab.blueprints')
+    }
  ]
-  return flags.nodeLibraryEssentialsEnabled
-    ? [
-        {
-          value: 'essentials' as TabId,
-          label: t('sideToolbar.nodeLibraryTab.essentials')
-        },
-        ...baseTabs
-      ]
-    : baseTabs
+  return flags.nodeLibraryEssentialsEnabled ? allTabs : [allTabs[0], allTabs[2]]
 })

 onMounted(() => {
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,9 +1,8 @@
 <template>
  <div
-    ref="containerRef"
    :class="
      cn(
-        'comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col',
+        'comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col w-full',
        props.class
      )
    "
@@ -37,17 +36,9 @@
  </div>
 </template>

-<script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
-
-export const SidebarContainerKey: InjectionKey<Ref<HTMLElement | null>> =
-  Symbol('SidebarContainer')
-</script>
-
 <script setup lang="ts">
 import ScrollPanel from 'primevue/scrollpanel'
 import Toolbar from 'primevue/toolbar'
-import { provide, ref } from 'vue'

 import { cn } from '@/utils/tailwindUtil'

@@ -58,7 +49,4 @@ const props = defineProps<{
 const sidebarPt = {
  start: 'min-w-0 flex-1 overflow-hidden'
 }
-
-const containerRef = ref<HTMLElement | null>(null)
-provide(SidebarContainerKey, containerRef)
 </script>
--- a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
@@ -1,28 +1,30 @@
 <template>
  <TabsContent value="all" class="flex-1 overflow-y-auto h-full">
    <!-- Favorites section -->
-    <template v-if="hasFavorites">
-      <h3
-        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
-      >
-        {{ $t('sideToolbar.nodeLibraryTab.sections.favorites') }}
-      </h3>
-      <TreeExplorerV2
-        v-model:expanded-keys="expandedKeys"
-        :root="favoritesRoot"
-        show-context-menu
-        @node-click="(node) => emit('nodeClick', node)"
-        @add-to-favorites="handleAddToFavorites"
-      />
-    </template>
+    <h3
+      class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+    >
+      {{ $t('sideToolbar.nodeLibraryTab.sections.bookmarked') }}
+    </h3>
+    <TreeExplorerV2
+      v-if="hasFavorites"
+      v-model:expanded-keys="expandedKeys"
+      :root="favoritesRoot"
+      show-context-menu
+      @node-click="(node) => emit('nodeClick', node)"
+      @add-to-favorites="handleAddToFavorites"
+    />
+    <div v-else class="px-6 py-2 text-xs text-muted-background">
+      {{ $t('sideToolbar.nodeLibraryTab.noBookmarkedNodes') }}
+    </div>

    <!-- Node sections -->
-    <div v-for="(section, index) in sections" :key="section.title ?? index">
+    <div v-for="(section, index) in sections" :key="section.category ?? index">
      <h3
-        v-if="section.title"
-        class="px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground mb-0"
+        v-if="section.category && sortOrder !== 'alphabetical'"
+        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
      >
-        {{ section.title }}
+        {{ $t(NODE_CATEGORY_LABELS[section.category]) }}
      </h3>
      <TreeExplorerV2
        v-model:expanded-keys="expandedKeys"
@@ -42,15 +44,17 @@ import { computed } from 'vue'
 import TreeExplorerV2 from '@/components/common/TreeExplorerV2.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NODE_CATEGORY_LABELS } from '@/types/nodeOrganizationTypes'
 import type {
  NodeLibrarySection,
  RenderedTreeExplorerNode,
  TreeNode
 } from '@/types/treeExplorerTypes'

-const { fillNodeInfo } = defineProps<{
-  sections: NodeLibrarySection[]
+const { fillNodeInfo, sortOrder = 'original' } = defineProps<{
+  sections: NodeLibrarySection<ComfyNodeDefImpl>[]
  fillNodeInfo: (node: TreeNode) => RenderedTreeExplorerNode<ComfyNodeDefImpl>
+  sortOrder?: string
 }>()

 const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
--- a/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
@@ -0,0 +1,39 @@
+<template>
+  <TabsContent value="blueprints" class="flex-1 overflow-y-auto h-full">
+    <div v-for="(section, index) in sections" :key="section.title ?? index">
+      <h3
+        v-if="section.title"
+        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+      >
+        {{ $t(section.title) }}
+      </h3>
+      <TreeExplorerV2
+        v-model:expanded-keys="expandedKeys"
+        :root="section.root"
+        :show-context-menu="false"
+        @node-click="(node) => emit('nodeClick', node)"
+      />
+    </div>
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import { TabsContent } from 'reka-ui'
+
+import TreeExplorerV2 from '@/components/common/TreeExplorerV2.vue'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type {
+  NodeLibrarySection,
+  RenderedTreeExplorerNode
+} from '@/types/treeExplorerTypes'
+
+defineProps<{
+  sections: NodeLibrarySection<ComfyNodeDefImpl>[]
+}>()
+
+const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
+
+const emit = defineEmits<{
+  nodeClick: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
+}>()
+</script>
--- a/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
@@ -8,7 +8,7 @@
      <!-- Section header -->
      <h3
        v-if="section.title"
-        class="px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground mb-0"
+        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
      >
        {{ section.title }}
      </h3>
@@ -46,7 +46,7 @@ import type {
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'

 defineProps<{
-  sections: NodeLibrarySection[]
+  sections: NodeLibrarySection<ComfyNodeDefImpl>[]
 }>()

 const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
@@ -35,11 +35,11 @@

 <script setup lang="ts">
 import { kebabCase } from 'es-toolkit/string'
+import type { Ref } from 'vue'
 import { computed, inject } from 'vue'

 import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue'
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
-import { SidebarContainerKey } from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
@@ -49,11 +49,15 @@ const { node } = defineProps<{
  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
 }>()

+const panelRef = inject<Ref<HTMLElement | null>>(
+  'essentialsPanelRef',
+  undefined!
+)
+
 const emit = defineEmits<{
  click: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
 }>()

-const panelRef = inject(SidebarContainerKey, undefined)
 const nodeDef = computed(() => node.data)

 const {
@@ -64,7 +68,7 @@ const {
  handleMouseLeave,
  handleDragStart,
  handleDragEnd
-} = useNodePreviewAndDrag(nodeDef, { panelRef })
+} = useNodePreviewAndDrag(nodeDef, panelRef)

 const nodeIcon = computed(() => {
  const nodeName = node.data?.name
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts
@@ -82,14 +82,15 @@ describe('EssentialNodesPanel', () => {

  function mountComponent(
    root = createMockRoot(),
-    expandedKeys: string[] = []
+    expandedKeys: string[] = [],
+    flatNodes: RenderedTreeExplorerNode<ComfyNodeDefImpl>[] = []
  ) {
    const WrapperComponent = {
-      template: `<EssentialNodesPanel :root="root" v-model:expandedKeys="keys" />`,
+      template: `<EssentialNodesPanel :root="root" :flat-nodes="flatNodes" v-model:expandedKeys="keys" />`,
      components: { EssentialNodesPanel },
      setup() {
        const keys = ref(expandedKeys)
-        return { root, keys }
+        return { root, flatNodes, keys }
      }
    }
    return mount(WrapperComponent, {
@@ -204,4 +205,20 @@ describe('EssentialNodesPanel', () => {
      expect(cards.length).toBeGreaterThanOrEqual(2)
    })
  })
+
+  describe('flat nodes mode', () => {
+    it('should render flat grid without collapsible folders when flatNodes is provided', () => {
+      const flatNodes = [
+        createMockNode('LoadAudio'),
+        createMockNode('LoadImage'),
+        createMockNode('SaveImage')
+      ]
+      const wrapper = mountComponent(createMockRoot(), [], flatNodes)
+
+      expect(wrapper.findAll('.collapsible-root')).toHaveLength(0)
+
+      const cards = wrapper.findAllComponents({ name: 'EssentialNodeCard' })
+      expect(cards).toHaveLength(3)
+    })
+  })
 })
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue
@@ -1,41 +1,61 @@
 <template>
-  <TabsContent value="essentials" class="flex-1 overflow-y-auto px-3 h-full">
+  <TabsContent
+    ref="panelEl"
+    value="essentials"
+    class="flex-1 overflow-y-auto px-3 h-full"
+  >
    <div class="flex flex-col gap-2 pb-6">
-      <CollapsibleRoot
-        v-for="folder in folders"
-        :key="folder.key"
-        class="rounded-lg"
-        :open="expandedKeys.includes(folder.key)"
-        @update:open="toggleFolder(folder.key, $event)"
+      <!-- Flat sorted grid when alphabetical -->
+      <div
+        v-if="flatNodes.length > 0"
+        class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3 pt-3"
      >
-        <CollapsibleTrigger
-          class="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-3 px-1 text-xs font-medium tracking-wide text-muted-foreground h-8 box-content"
+        <EssentialNodeCard
+          v-for="node in flatNodes"
+          :key="node.key"
+          :node="node"
+          @click="emit('nodeClick', $event)"
+        />
+      </div>
+
+      <!-- Grouped collapsible folders when original -->
+      <template v-else>
+        <CollapsibleRoot
+          v-for="folder in folders"
+          :key="folder.key"
+          class="rounded-lg"
+          :open="expandedKeys.includes(folder.key)"
+          @update:open="toggleFolder(folder.key, $event)"
        >
-          <span class="uppercase">{{ folder.label }}</span>
-          <i
-            :class="
-              cn(
-                'icon-[lucide--chevron-up] size-4 transition-transform duration-200',
-                !expandedKeys.includes(folder.key) && '-rotate-180'
-              )
-            "
-          />
-        </CollapsibleTrigger>
-        <CollapsibleContent
-          class="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
-        >
-          <div
-            class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3"
+          <CollapsibleTrigger
+            class="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-3 px-1 text-xs font-medium tracking-wide text-muted-foreground h-8 box-content"
          >
-            <EssentialNodeCard
-              v-for="node in folder.children"
-              :key="node.key"
-              :node="node"
-              @click="emit('nodeClick', $event)"
+            <span class="uppercase">{{ folder.label }}</span>
+            <i
+              :class="
+                cn(
+                  'icon-[lucide--chevron-up] size-4 transition-transform duration-200',
+                  !expandedKeys.includes(folder.key) && '-rotate-180'
+                )
+              "
            />
-          </div>
-        </CollapsibleContent>
-      </CollapsibleRoot>
+          </CollapsibleTrigger>
+          <CollapsibleContent
+            class="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+          >
+            <div
+              class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3"
+            >
+              <EssentialNodeCard
+                v-for="node in folder.children"
+                :key="node.key"
+                :node="node"
+                @click="emit('nodeClick', $event)"
+              />
+            </div>
+          </CollapsibleContent>
+        </CollapsibleRoot>
+      </template>
    </div>
  </TabsContent>
 </template>
@@ -47,16 +67,22 @@ import {
  CollapsibleTrigger,
  TabsContent
 } from 'reka-ui'
-import { computed, ref, watch } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { computed, provide, ref, watch } from 'vue'

 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'

+const panelEl = ref<ComponentPublicInstance | null>(null)
+const panelRef = computed(() => panelEl.value?.$el as HTMLElement | null)
+provide('essentialsPanelRef', panelRef)
+
 import EssentialNodeCard from './EssentialNodeCard.vue'

-const props = defineProps<{
+const { root, flatNodes = [] } = defineProps<{
  root: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+  flatNodes?: RenderedTreeExplorerNode<ComfyNodeDefImpl>[]
 }>()

 const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
@@ -74,7 +100,7 @@ function flattenLeaves(

 const folders = computed(() => {
  const topFolders =
-    (props.root.children?.filter(
+    (root.children?.filter(
      (child) => child.type === 'folder'
    ) as RenderedTreeExplorerNode<ComfyNodeDefImpl>[]) ?? []

--- a/src/components/topbar/CloudBadge.vue
+++ b/src/components/topbar/CloudBadge.vue
@@ -10,7 +10,6 @@

 <script setup lang="ts">
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'

 import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'

@@ -28,10 +27,8 @@ const {
  backgroundColor?: string
 }>()

-const { t } = useI18n()
-
 const cloudBadge = computed<TopbarBadgeType>(() => ({
-  label: t('g.beta'),
+  icon: 'icon-[lucide--cloud]',
  text: 'Comfy Cloud'
 }))
 </script>
--- a/src/components/topbar/CurrentUserPopoverLegacy.vue
+++ b/src/components/topbar/CurrentUserPopoverLegacy.vue
@@ -46,6 +46,16 @@
        class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
      />
      <Button
+        v-if="isFreeTier"
+        variant="gradient"
+        size="sm"
+        data-testid="upgrade-to-add-credits-button"
+        @click="handleUpgradeToAddCredits"
+      >
+        {{ $t('subscription.upgradeToAddCredits') }}
+      </Button>
+      <Button
+        v-else
        variant="secondary"
        size="sm"
        class="text-base-foreground"
@@ -61,7 +71,7 @@
        :fluid="false"
        :label="$t('subscription.subscribeToComfyCloud')"
        size="sm"
-        variant="gradient"
+        button-variant="gradient"
        @subscribed="handleSubscribed"
      />
    </div>
@@ -170,6 +180,7 @@ const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const {
  isActiveSubscription,
+  isFreeTier,
  subscriptionTierName,
  subscriptionTier,
  fetchStatus
@@ -237,6 +248,11 @@ const handleOpenPartnerNodesInfo = () => {
  emit('close')
 }

+const handleUpgradeToAddCredits = () => {
+  subscriptionDialog.showPricingTable()
+  emit('close')
+}
+
 const handleLogout = async () => {
  await handleSignOut()
  emit('close')
--- a/src/components/topbar/TopbarSubscribeButton.vue
+++ b/src/components/topbar/TopbarSubscribeButton.vue
@@ -0,0 +1,25 @@
+<template>
+  <Button
+    v-if="isFreeTier"
+    class="mr-2 shrink-0 whitespace-nowrap"
+    variant="gradient"
+    size="sm"
+    data-testid="topbar-subscribe-button"
+    @click="handleClick"
+  >
+    {{ $t('subscription.subscribeForMore') }}
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+
+const { isFreeTier } = useBillingContext()
+const subscriptionDialog = useSubscriptionDialog()
+
+function handleClick() {
+  subscriptionDialog.showPricingTable()
+}
+</script>
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -10,7 +10,7 @@
        @click="handleClick"
      >
        <i
-          v-if="workflowOption.workflow.activeState?.extra?.linearMode"
+          v-if="workflowOption.workflow.initialMode === 'app'"
          class="icon-[lucide--panels-top-left] bg-primary-background"
        />
        <span
@@ -198,11 +198,13 @@ const contextMenuItems = computed<WorkflowMenuItem[]>(() => [
  ...baseMenuItems.value,
  { separator: true },
  {
+    id: 'close-tab',
    label: t('tabMenu.closeTab'),
    icon: 'pi pi-times',
    command: () => onCloseWorkflow(props.workflowOption)
  },
  {
+    id: 'close-tabs-to-left',
    label: t('tabMenu.closeTabsToLeft'),
    overlayIcon: {
      mainIcon: 'pi pi-times',
@@ -215,6 +217,7 @@ const contextMenuItems = computed<WorkflowMenuItem[]>(() => [
    disabled: props.isFirst
  },
  {
+    id: 'close-tabs-to-right',
    label: t('tabMenu.closeTabsToRight'),
    overlayIcon: {
      mainIcon: 'pi pi-times',
@@ -227,6 +230,7 @@ const contextMenuItems = computed<WorkflowMenuItem[]>(() => [
    disabled: props.isLast
  },
  {
+    id: 'close-other-tabs',
    label: t('tabMenu.closeOtherTabs'),
    overlayIcon: {
      mainIcon: 'pi pi-times',
--- a/src/components/ui/TypeformPopoverButton.vue
+++ b/src/components/ui/TypeformPopoverButton.vue
@@ -25,15 +25,19 @@ whenever(feedbackRef, () => {
    :href="`https://form.typeform.com/to/${dataTfWidget}`"
    target="_blank"
    variant="inverted"
-    class="rounded-full size-12"
+    class="flex h-10 items-center justify-center gap-2.5 px-3 py-2"
    v-bind="$attrs"
  >
-    <i class="icon-[lucide--circle-question-mark] size-6" />
+    <i class="icon-[lucide--circle-help] size-4" />
  </Button>
  <Popover v-else>
    <template #button>
-      <Button variant="inverted" class="rounded-full size-12" v-bind="$attrs">
-        <i class="icon-[lucide--circle-question-mark] size-6" />
+      <Button
+        variant="inverted"
+        class="flex h-10 items-center justify-center gap-2.5 px-3 py-2"
+        v-bind="$attrs"
+      >
+        <i class="icon-[lucide--circle-help] size-4" />
      </Button>
    </template>
    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -19,7 +19,9 @@ export const buttonVariants = cva({
        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
      'destructive-textonly':
        'text-destructive-background bg-transparent hover:bg-destructive-background/10',
-      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90'
+      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
+      gradient:
+        'bg-subscription-gradient text-white border-transparent hover:opacity-90'
    },
    size: {
      sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -47,7 +49,8 @@ const variants = [
  'textonly',
  'muted-textonly',
  'destructive-textonly',
-  'overlay-white'
+  'overlay-white',
+  'gradient'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
  ButtonVariants['size']
--- a/src/composables/README.md
+++ b/src/composables/README.md
@@ -85,7 +85,7 @@ The following diagram shows how composables fit into the application architectur

 ## Composable Categories

-The following tables list ALL composables in the system as of 2026-01-30:
+The following tables list core composables in the system as of 2026-03-02. For a complete list, browse the subdirectories in this folder:

 ### Auth

@@ -236,7 +236,6 @@ General-purpose composables:
 | `useErrorHandling`          | Centralized error handling                                |
 | `useGlobalLitegraph`        | Access to global LiteGraph instance                       |
 | `useLitegraphSettings`      | Manages LiteGraph configuration                           |
-| `useManagerQueue`           | Handles manager queue operations                          |
 | `usePaste`                  | Provides paste functionality                              |
 | `usePragmaticDragAndDrop`   | Integrates Atlassian's drag-and-drop library              |
 | `useProgressFavicon`        | Updates favicon with progress indicator                   |
@@ -246,10 +245,6 @@ General-purpose composables:
 | `useTemplateWorkflows`      | Manages template workflow loading, selection, and display |
 | `useTreeExpansion`          | Handles tree node expansion state                         |

-| `useWorkflowAutoSave` | Handles automatic workflow saving |
-| `useWorkflowPersistence` | Manages workflow persistence |
-| `useWorkflowValidation` | Validates workflow integrity |
-
 ## Usage Guidelines

 When using composables in components, follow these guidelines:
--- a/src/composables/element/useDomClipping.test.ts
+++ b/src/composables/element/useDomClipping.test.ts
@@ -0,0 +1,224 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+
+import { useDomClipping } from './useDomClipping'
+
+function createMockElement(rect: {
+  left: number
+  top: number
+  width: number
+  height: number
+}): HTMLElement {
+  return {
+    getBoundingClientRect: vi.fn(
+      () =>
+        ({
+          ...rect,
+          x: rect.left,
+          y: rect.top,
+          right: rect.left + rect.width,
+          bottom: rect.top + rect.height,
+          toJSON: () => ({})
+        }) as DOMRect
+    )
+  } as unknown as HTMLElement
+}
+
+function createMockCanvas(rect: {
+  left: number
+  top: number
+  width: number
+  height: number
+}): HTMLCanvasElement {
+  return {
+    getBoundingClientRect: vi.fn(
+      () =>
+        ({
+          ...rect,
+          x: rect.left,
+          y: rect.top,
+          right: rect.left + rect.width,
+          bottom: rect.top + rect.height,
+          toJSON: () => ({})
+        }) as DOMRect
+    )
+  } as unknown as HTMLCanvasElement
+}
+
+describe('useDomClipping', () => {
+  let rafCallbacks: Map<number, FrameRequestCallback>
+  let nextRafId: number
+
+  beforeEach(() => {
+    rafCallbacks = new Map()
+    nextRafId = 1
+
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((cb: FrameRequestCallback) => {
+        const id = nextRafId++
+        rafCallbacks.set(id, cb)
+        return id
+      })
+    )
+
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((id: number) => {
+        rafCallbacks.delete(id)
+      })
+    )
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function flushRaf() {
+    const callbacks = [...rafCallbacks.values()]
+    rafCallbacks.clear()
+    for (const cb of callbacks) {
+      cb(performance.now())
+    }
+  }
+
+  it('coalesces multiple rapid calls into a single getBoundingClientRect read', () => {
+    const { updateClipPath } = useDomClipping()
+    const element = createMockElement({
+      left: 10,
+      top: 10,
+      width: 100,
+      height: 50
+    })
+    const canvas = createMockCanvas({
+      left: 0,
+      top: 0,
+      width: 800,
+      height: 600
+    })
+
+    updateClipPath(element, canvas, true)
+    updateClipPath(element, canvas, true)
+    updateClipPath(element, canvas, true)
+
+    expect(element.getBoundingClientRect).not.toHaveBeenCalled()
+
+    flushRaf()
+
+    expect(element.getBoundingClientRect).toHaveBeenCalledTimes(1)
+    expect(canvas.getBoundingClientRect).toHaveBeenCalledTimes(1)
+  })
+
+  it('updates style ref after RAF fires', () => {
+    const { style, updateClipPath } = useDomClipping()
+    const element = createMockElement({
+      left: 10,
+      top: 10,
+      width: 100,
+      height: 50
+    })
+    const canvas = createMockCanvas({
+      left: 0,
+      top: 0,
+      width: 800,
+      height: 600
+    })
+
+    updateClipPath(element, canvas, true)
+
+    expect(style.value).toEqual({})
+
+    flushRaf()
+
+    expect(style.value).toEqual({
+      clipPath: 'none',
+      willChange: 'clip-path'
+    })
+  })
+
+  it('cancels previous RAF when called again before it fires', () => {
+    const { style, updateClipPath } = useDomClipping()
+    const element1 = createMockElement({
+      left: 10,
+      top: 10,
+      width: 100,
+      height: 50
+    })
+    const element2 = createMockElement({
+      left: 20,
+      top: 20,
+      width: 200,
+      height: 100
+    })
+    const canvas = createMockCanvas({
+      left: 0,
+      top: 0,
+      width: 800,
+      height: 600
+    })
+
+    updateClipPath(element1, canvas, true)
+    updateClipPath(element2, canvas, true)
+
+    expect(cancelAnimationFrame).toHaveBeenCalledTimes(1)
+
+    flushRaf()
+
+    expect(element1.getBoundingClientRect).not.toHaveBeenCalled()
+    expect(element2.getBoundingClientRect).toHaveBeenCalledTimes(1)
+    expect(style.value).toEqual({
+      clipPath: 'none',
+      willChange: 'clip-path'
+    })
+  })
+
+  it('generates clip-path polygon when element intersects unselected area', () => {
+    const { style, updateClipPath } = useDomClipping()
+    const element = createMockElement({
+      left: 50,
+      top: 50,
+      width: 100,
+      height: 100
+    })
+    const canvas = createMockCanvas({
+      left: 0,
+      top: 0,
+      width: 800,
+      height: 600
+    })
+    const selectedArea = {
+      x: 40,
+      y: 40,
+      width: 200,
+      height: 200,
+      scale: 1,
+      offset: [0, 0] as [number, number]
+    }
+
+    updateClipPath(element, canvas, false, selectedArea)
+    flushRaf()
+
+    expect(style.value.clipPath).toContain('polygon')
+    expect(style.value.willChange).toBe('clip-path')
+  })
+
+  it('does not read layout before RAF fires', () => {
+    const { updateClipPath } = useDomClipping()
+    const element = createMockElement({
+      left: 0,
+      top: 0,
+      width: 50,
+      height: 50
+    })
+    const canvas = createMockCanvas({
+      left: 0,
+      top: 0,
+      width: 800,
+      height: 600
+    })
+
+    updateClipPath(element, canvas, true)
+
+    expect(element.getBoundingClientRect).not.toHaveBeenCalled()
+    expect(canvas.getBoundingClientRect).not.toHaveBeenCalled()
+  })
+})
--- a/src/composables/element/useDomClipping.ts
+++ b/src/composables/element/useDomClipping.ts
@@ -85,8 +85,12 @@ export const useDomClipping = (options: ClippingOptions = {}) => {
    return ''
  }

+  let pendingRaf = 0
+
  /**
-   * Updates the clip-path style based on element and selection information
+   * Updates the clip-path style based on element and selection information.
+   * Batched via requestAnimationFrame to avoid forcing synchronous layout
+   * from getBoundingClientRect() on every reactive state change.
   */
  const updateClipPath = (
    element: HTMLElement,
@@ -101,20 +105,24 @@ export const useDomClipping = (options: ClippingOptions = {}) => {
      offset: [number, number]
    }
  ) => {
-    const elementRect = element.getBoundingClientRect()
-    const canvasRect = canvasElement.getBoundingClientRect()
+    if (pendingRaf) cancelAnimationFrame(pendingRaf)
+    pendingRaf = requestAnimationFrame(() => {
+      pendingRaf = 0
+      const elementRect = element.getBoundingClientRect()
+      const canvasRect = canvasElement.getBoundingClientRect()

-    const clipPath = calculateClipPath(
-      elementRect,
-      canvasRect,
-      isSelected,
-      selectedArea
-    )
+      const clipPath = calculateClipPath(
+        elementRect,
+        canvasRect,
+        isSelected,
+        selectedArea
+      )

-    style.value = {
-      clipPath: clipPath || 'none',
-      willChange: 'clip-path'
-    }
+      style.value = {
+        clipPath: clipPath || 'none',
+        willChange: 'clip-path'
+      }
+    })
  }

  return {
--- a/src/composables/graph/useGraphNodeManager.test.ts
+++ b/src/composables/graph/useGraphNodeManager.test.ts
@@ -272,3 +272,47 @@ describe('Subgraph Promoted Pseudo Widgets', () => {
    expect(promotedWidget?.options?.canvasOnly).toBe(true)
  })
 })
+
+describe('Nested promoted widget mapping', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('maps store identity to deepest concrete widget for two-layer promotions', () => {
+    const subgraphA = createTestSubgraph({
+      inputs: [{ name: 'a_input', type: '*' }]
+    })
+    const innerNode = new LGraphNode('InnerComboNode')
+    const innerInput = innerNode.addInput('picker_input', '*')
+    innerNode.addWidget('combo', 'picker', 'a', () => undefined, {
+      values: ['a', 'b']
+    })
+    innerInput.widget = { name: 'picker' }
+    subgraphA.add(innerNode)
+    subgraphA.inputNode.slots[0].connect(innerInput, innerNode)
+
+    const subgraphNodeA = createTestSubgraphNode(subgraphA, { id: 11 })
+
+    const subgraphB = createTestSubgraph({
+      inputs: [{ name: 'b_input', type: '*' }]
+    })
+    subgraphB.add(subgraphNodeA)
+    subgraphNodeA._internalConfigureAfterSlots()
+    subgraphB.inputNode.slots[0].connect(subgraphNodeA.inputs[0], subgraphNodeA)
+
+    const subgraphNodeB = createTestSubgraphNode(subgraphB, { id: 22 })
+    const graph = subgraphNodeB.graph as LGraph
+    graph.add(subgraphNodeB)
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeData = vueNodeData.get(String(subgraphNodeB.id))
+    const mappedWidget = nodeData?.widgets?.[0]
+
+    expect(mappedWidget).toBeDefined()
+    expect(mappedWidget?.type).toBe('combo')
+    expect(mappedWidget?.storeName).toBe('picker')
+    expect(mappedWidget?.storeNodeId).toBe(
+      `${subgraphNodeB.subgraph.id}:${innerNode.id}`
+    )
+  })
+})
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -7,13 +7,16 @@ import { reactive, shallowReactive } from 'vue'

 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolvePromotedWidgetSource'
+import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
 import type {
  INodeInputSlot,
  INodeOutputSlot
 } from '@/lib/litegraph/src/interfaces'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -45,7 +48,9 @@ export interface WidgetSlotMetadata {
 */
 export interface SafeWidgetData {
  nodeId?: NodeId
+  storeNodeId?: NodeId
  name: string
+  storeName?: string
  type: string
  /** Callback to invoke when widget value changes (wraps LiteGraph callback + triggerDraw) */
  callback?: ((value: unknown) => void) | undefined
@@ -160,7 +165,7 @@ function getSharedWidgetEnhancements(
 /**
 * Validates that a value is a valid WidgetValue type
 */
-const normalizeWidgetValue = (value: unknown): WidgetValue => {
+function normalizeWidgetValue(value: unknown): WidgetValue {
  if (value === null || value === undefined || value === void 0) {
    return undefined
  }
@@ -192,11 +197,69 @@ function safeWidgetMapper(
  node: LGraphNode,
  slotMetadata: Map<string, WidgetSlotMetadata>
 ): (widget: IBaseWidget) => SafeWidgetData {
+  function extractWidgetDisplayOptions(
+    widget: IBaseWidget
+  ): SafeWidgetData['options'] {
+    if (!widget.options) return undefined
+
+    return {
+      canvasOnly: widget.options.canvasOnly,
+      advanced: widget.advanced,
+      hidden: widget.options.hidden,
+      read_only: widget.options.read_only
+    }
+  }
+
+  function resolvePromotedSourceByInputName(inputName: string): {
+    sourceNodeId: string
+    sourceWidgetName: string
+  } | null {
+    const resolvedTarget = resolveSubgraphInputTarget(node, inputName)
+    if (!resolvedTarget) return null
+
+    return {
+      sourceNodeId: resolvedTarget.nodeId,
+      sourceWidgetName: resolvedTarget.widgetName
+    }
+  }
+
+  function resolvePromotedWidgetIdentity(widget: IBaseWidget): {
+    displayName: string
+    promotedSource: { sourceNodeId: string; sourceWidgetName: string } | null
+  } {
+    if (!isPromotedWidgetView(widget)) {
+      return {
+        displayName: widget.name,
+        promotedSource: null
+      }
+    }
+
+    const promotedInputName = node.inputs?.find((input) => {
+      if (input.name === widget.name) return true
+      if (input._widget === widget) return true
+      return false
+    })?.name
+    const displayName = promotedInputName ?? widget.name
+    const promotedSource = resolvePromotedSourceByInputName(displayName) ?? {
+      sourceNodeId: widget.sourceNodeId,
+      sourceWidgetName: widget.sourceWidgetName
+    }
+
+    return {
+      displayName,
+      promotedSource
+    }
+  }
+
  return function (widget) {
    try {
+      const { displayName, promotedSource } =
+        resolvePromotedWidgetIdentity(widget)
+
      // Get shared enhancements (controlWidget, spec, nodeType)
      const sharedEnhancements = getSharedWidgetEnhancements(node, widget)
-      const slotInfo = slotMetadata.get(widget.name)
+      const slotInfo =
+        slotMetadata.get(displayName) ?? slotMetadata.get(widget.name)

      // Wrapper callback specific to Nodes 2.0 rendering
      const callback = (v: unknown) => {
@@ -214,36 +277,52 @@ function safeWidgetMapper(
        isPromotedWidgetView(widget) && widget.sourceWidgetName.startsWith('$$')

      // Extract only render-critical options (canvasOnly, advanced, read_only)
-      const options = widget.options
-        ? {
-            canvasOnly: widget.options.canvasOnly,
-            advanced: widget.advanced,
-            hidden: widget.options.hidden,
-            read_only: widget.options.read_only
-          }
-        : undefined
+      const options = extractWidgetDisplayOptions(widget)
      const subgraphId = node.isSubgraphNode() && node.subgraph.id

+      const resolvedSourceResult =
+        isPromotedWidgetView(widget) && promotedSource
+          ? resolveConcretePromotedWidget(
+              node,
+              promotedSource.sourceNodeId,
+              promotedSource.sourceWidgetName
+            )
+          : null
+      const resolvedSource =
+        resolvedSourceResult?.status === 'resolved'
+          ? resolvedSourceResult.resolved
+          : undefined
+      const sourceWidget = resolvedSource?.widget
+      const sourceNode = resolvedSource?.node
+
+      const effectiveWidget = sourceWidget ?? widget
+
      const localId = isPromotedWidgetView(widget)
-        ? widget.sourceNodeId
+        ? String(sourceNode?.id ?? promotedSource?.sourceNodeId)
        : undefined
      const nodeId =
        subgraphId && localId ? `${subgraphId}:${localId}` : undefined
-      const name = isPromotedWidgetView(widget)
-        ? widget.sourceWidgetName
-        : widget.name
+      const storeName = isPromotedWidgetView(widget)
+        ? (sourceWidget?.name ?? promotedSource?.sourceWidgetName)
+        : undefined
+      const name = storeName ?? displayName

      return {
        nodeId,
+        storeNodeId: nodeId,
        name,
-        type: widget.type,
+        storeName,
+        type: effectiveWidget.type,
        ...sharedEnhancements,
        callback,
-        hasLayoutSize: typeof widget.computeLayoutSize === 'function',
+        hasLayoutSize: typeof effectiveWidget.computeLayoutSize === 'function',
        isDOMWidget: isDOMWidget(widget) || isPromotedDOMWidget(widget),
        options: isPromotedPseudoWidget
-          ? { ...options, canvasOnly: true }
-          : options,
+          ? {
+              ...(extractWidgetDisplayOptions(effectiveWidget) ?? options),
+              canvasOnly: true
+            }
+          : (extractWidgetDisplayOptions(effectiveWidget) ?? options),
        slotMetadata: slotInfo,
        slotName: name !== widget.name ? widget.name : undefined
      }
@@ -311,14 +390,18 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
  })

  const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
+    const widgetsSnapshot = node.widgets ?? []
+
+    slotMetadata.clear()
    node.inputs?.forEach((input, index) => {
-      if (!input?.widget?.name) return
-      slotMetadata.set(input.widget.name, {
+      const slotInfo = {
        index,
        linked: input.link != null
-      })
+      }
+      if (input.name) slotMetadata.set(input.name, slotInfo)
+      if (input.widget?.name) slotMetadata.set(input.widget.name, slotInfo)
    })
-    return node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
+    return widgetsSnapshot.map(safeWidgetMapper(node, slotMetadata))
  })

  const nodeType =
@@ -374,11 +457,12 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
    const slotMetadata = new Map<string, WidgetSlotMetadata>()

    nodeRef.inputs?.forEach((input, index) => {
-      if (!input?.widget?.name) return
-      slotMetadata.set(input.widget.name, {
+      const slotInfo = {
        index,
        linked: input.link != null
-      })
+      }
+      if (input.name) slotMetadata.set(input.name, slotInfo)
+      if (input.widget?.name) slotMetadata.set(input.widget.name, slotInfo)
    })

    // Update only widgets with new slot metadata, keeping other widget data intact
@@ -442,6 +526,11 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
      const nodePosition = { x: node.pos[0], y: node.pos[1] }
      const nodeSize = { width: node.size[0], height: node.size[1] }

+      // Skip layout creation if it already exists
+      // (e.g. in-place node replacement where the old node's layout is reused for the new node with the same ID).
+      const existingLayout = layoutStore.getNodeLayoutRef(id).value
+      if (existingLayout) return
+
      // Add node to layout store with final positions
      setSource(LayoutSource.Canvas)
      void createNode(id, {
--- a/src/composables/node/useNodeCanvasImagePreview.ts
+++ b/src/composables/node/useNodeCanvasImagePreview.ts
@@ -2,7 +2,11 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useImagePreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget'

 export const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
-const CANVAS_IMAGE_PREVIEW_NODE_TYPES = new Set(['PreviewImage', 'SaveImage'])
+const CANVAS_IMAGE_PREVIEW_NODE_TYPES = new Set([
+  'PreviewImage',
+  'SaveImage',
+  'GLSLShader'
+])

 export function supportsVirtualCanvasImagePreview(node: LGraphNode): boolean {
  return CANVAS_IMAGE_PREVIEW_NODE_TYPES.has(node.type)
--- a/src/composables/node/useNodePreviewAndDrag.ts
+++ b/src/composables/node/useNodePreviewAndDrag.ts
@@ -10,7 +10,7 @@ const PREVIEW_MARGIN = 16

 export function useNodePreviewAndDrag(
  nodeDef: Ref<ComfyNodeDefImpl | undefined>,
-  options?: { panelRef?: Ref<HTMLElement | null> }
+  panelRef?: Ref<HTMLElement | null>
 ) {
  const { startDrag, handleNativeDrop } = useNodeDragToCanvas()
  const settingStore = useSettingStore()
@@ -56,8 +56,7 @@ export function useNodePreviewAndDrag(

    const target = e.currentTarget as HTMLElement
    const rect = target.getBoundingClientRect()
-    const horizontalRect =
-      options?.panelRef?.value?.getBoundingClientRect() ?? rect
+    const horizontalRect = panelRef?.value?.getBoundingClientRect() ?? rect
    const { left, viewportHeight } = calculatePreviewPosition(horizontalRect)

    let top = rect.top
--- a/src/composables/queue/useJobList.test.ts
+++ b/src/composables/queue/useJobList.test.ts
@@ -11,7 +11,7 @@ import type { TaskItemImpl } from '@/stores/queueStore'

 type TestTask = {
  jobId: string
-  queueIndex: number
+  job: { priority: number }
  mockState: JobState
  executionTime?: number
  executionEndTimestamp?: number
@@ -174,7 +174,7 @@ const createTask = (
  overrides: Partial<TestTask> & { mockState?: JobState } = {}
 ): TestTask => ({
  jobId: overrides.jobId ?? `task-${Math.random().toString(36).slice(2, 7)}`,
-  queueIndex: overrides.queueIndex ?? 0,
+  job: overrides.job ?? { priority: 0 },
  mockState: overrides.mockState ?? 'pending',
  executionTime: overrides.executionTime,
  executionEndTimestamp: overrides.executionEndTimestamp,
@@ -258,7 +258,7 @@ describe('useJobList', () => {
  it('tracks recently added pending jobs and clears the hint after expiry', async () => {
    vi.useFakeTimers()
    queueStoreMock.pendingTasks = [
-      createTask({ jobId: '1', queueIndex: 1, mockState: 'pending' })
+      createTask({ jobId: '1', job: { priority: 1 }, mockState: 'pending' })
    ]

    const { jobItems } = initComposable()
@@ -287,7 +287,7 @@ describe('useJobList', () => {
    vi.useFakeTimers()
    const taskId = '2'
    queueStoreMock.pendingTasks = [
-      createTask({ jobId: taskId, queueIndex: 1, mockState: 'pending' })
+      createTask({ jobId: taskId, job: { priority: 1 }, mockState: 'pending' })
    ]

    const { jobItems } = initComposable()
@@ -300,7 +300,7 @@ describe('useJobList', () => {

    vi.mocked(buildJobDisplay).mockClear()
    queueStoreMock.pendingTasks = [
-      createTask({ jobId: taskId, queueIndex: 2, mockState: 'pending' })
+      createTask({ jobId: taskId, job: { priority: 2 }, mockState: 'pending' })
    ]
    await flush()
    jobItems.value
@@ -314,7 +314,7 @@ describe('useJobList', () => {
  it('cleans up timeouts on unmount', async () => {
    vi.useFakeTimers()
    queueStoreMock.pendingTasks = [
-      createTask({ jobId: '3', queueIndex: 1, mockState: 'pending' })
+      createTask({ jobId: '3', job: { priority: 1 }, mockState: 'pending' })
    ]

    initComposable()
@@ -331,7 +331,7 @@ describe('useJobList', () => {
    queueStoreMock.pendingTasks = [
      createTask({
        jobId: 'p',
-        queueIndex: 1,
+        job: { priority: 1 },
        mockState: 'pending',
        createTime: 3000
      })
@@ -339,7 +339,7 @@ describe('useJobList', () => {
    queueStoreMock.runningTasks = [
      createTask({
        jobId: 'r',
-        queueIndex: 5,
+        job: { priority: 5 },
        mockState: 'running',
        createTime: 2000
      })
@@ -347,7 +347,7 @@ describe('useJobList', () => {
    queueStoreMock.historyTasks = [
      createTask({
        jobId: 'h',
-        queueIndex: 3,
+        job: { priority: 3 },
        mockState: 'completed',
        createTime: 1000,
        executionEndTimestamp: 5000
@@ -366,9 +366,9 @@ describe('useJobList', () => {

  it('filters by job tab and resets failed tab when failures disappear', async () => {
    queueStoreMock.historyTasks = [
-      createTask({ jobId: 'c', queueIndex: 3, mockState: 'completed' }),
-      createTask({ jobId: 'f', queueIndex: 2, mockState: 'failed' }),
-      createTask({ jobId: 'p', queueIndex: 1, mockState: 'pending' })
+      createTask({ jobId: 'c', job: { priority: 3 }, mockState: 'completed' }),
+      createTask({ jobId: 'f', job: { priority: 2 }, mockState: 'failed' }),
+      createTask({ jobId: 'p', job: { priority: 1 }, mockState: 'pending' })
    ]

    const instance = initComposable()
@@ -384,7 +384,7 @@ describe('useJobList', () => {
    expect(instance.hasFailedJobs.value).toBe(true)

    queueStoreMock.historyTasks = [
-      createTask({ jobId: 'c', queueIndex: 3, mockState: 'completed' })
+      createTask({ jobId: 'c', job: { priority: 3 }, mockState: 'completed' })
    ]
    await flush()

@@ -396,13 +396,13 @@ describe('useJobList', () => {
    queueStoreMock.pendingTasks = [
      createTask({
        jobId: 'wf-1',
-        queueIndex: 2,
+        job: { priority: 2 },
        mockState: 'pending',
        workflowId: 'workflow-1'
      }),
      createTask({
        jobId: 'wf-2',
-        queueIndex: 1,
+        job: { priority: 1 },
        mockState: 'pending',
        workflowId: 'workflow-2'
      })
@@ -426,14 +426,14 @@ describe('useJobList', () => {
    queueStoreMock.historyTasks = [
      createTask({
        jobId: 'alpha',
-        queueIndex: 2,
+        job: { priority: 2 },
        mockState: 'completed',
        createTime: 2000,
        executionEndTimestamp: 2000
      }),
      createTask({
        jobId: 'beta',
-        queueIndex: 1,
+        job: { priority: 1 },
        mockState: 'failed',
        createTime: 1000,
        executionEndTimestamp: 1000
@@ -471,13 +471,13 @@ describe('useJobList', () => {
    queueStoreMock.runningTasks = [
      createTask({
        jobId: 'active',
-        queueIndex: 3,
+        job: { priority: 3 },
        mockState: 'running',
        executionTime: 7_200_000
      }),
      createTask({
        jobId: 'other',
-        queueIndex: 2,
+        job: { priority: 2 },
        mockState: 'running',
        executionTime: 3_600_000
      })
@@ -507,7 +507,7 @@ describe('useJobList', () => {
    queueStoreMock.runningTasks = [
      createTask({
        jobId: 'live-preview',
-        queueIndex: 1,
+        job: { priority: 1 },
        mockState: 'running'
      })
    ]
@@ -526,7 +526,7 @@ describe('useJobList', () => {
    queueStoreMock.runningTasks = [
      createTask({
        jobId: 'disabled-preview',
-        queueIndex: 1,
+        job: { priority: 1 },
        mockState: 'running'
      })
    ]
@@ -567,28 +567,28 @@ describe('useJobList', () => {
    queueStoreMock.historyTasks = [
      createTask({
        jobId: 'today-small',
-        queueIndex: 4,
+        job: { priority: 4 },
        mockState: 'completed',
        executionEndTimestamp: Date.now(),
        executionTime: 2_000
      }),
      createTask({
        jobId: 'today-large',
-        queueIndex: 3,
+        job: { priority: 3 },
        mockState: 'completed',
        executionEndTimestamp: Date.now(),
        executionTime: 5_000
      }),
      createTask({
        jobId: 'yesterday',
-        queueIndex: 2,
+        job: { priority: 2 },
        mockState: 'failed',
        executionEndTimestamp: Date.now() - 86_400_000,
        executionTime: 1_000
      }),
      createTask({
        jobId: 'undated',
-        queueIndex: 1,
+        job: { priority: 1 },
        mockState: 'pending'
      })
    ]
--- a/src/composables/useAppMode.ts
+++ b/src/composables/useAppMode.ts
@@ -0,0 +1,47 @@
+import { computed, ref } from 'vue'
+
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+
+export type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange'
+
+const enableAppBuilder = ref(true)
+
+export function useAppMode() {
+  const workflowStore = useWorkflowStore()
+  const mode = computed(
+    () =>
+      workflowStore.activeWorkflow?.activeMode ??
+      workflowStore.activeWorkflow?.initialMode ??
+      'graph'
+  )
+
+  const isBuilderMode = computed(
+    () => isSelectMode.value || isArrangeMode.value
+  )
+  const isSelectMode = computed(() => mode.value === 'builder:select')
+  const isArrangeMode = computed(() => mode.value === 'builder:arrange')
+  const isAppMode = computed(
+    () => mode.value === 'app' || mode.value === 'builder:arrange'
+  )
+  const isGraphMode = computed(
+    () => mode.value === 'graph' || mode.value === 'builder:select'
+  )
+
+  function setMode(newMode: AppMode) {
+    if (newMode === mode.value) return
+
+    const workflow = workflowStore.activeWorkflow
+    if (workflow) workflow.activeMode = newMode
+  }
+
+  return {
+    mode,
+    enableAppBuilder,
+    isBuilderMode,
+    isSelectMode,
+    isArrangeMode,
+    isAppMode,
+    isGraphMode,
+    setMode
+  }
+}
--- a/src/composables/useCopyToClipboard.ts
+++ b/src/composables/useCopyToClipboard.ts
@@ -4,64 +4,32 @@ import { useToast } from 'primevue/usetoast'
 import { t } from '@/i18n'

 export function useCopyToClipboard() {
-  const { copy, copied } = useClipboard()
+  const { copy, copied } = useClipboard({ legacy: true })
  const toast = useToast()
-  const showSuccessToast = () => {
-    toast.add({
-      severity: 'success',
-      summary: t('g.success'),
-      detail: t('clipboard.successMessage'),
-      life: 3000
-    })
-  }
-  const showErrorToast = () => {
-    toast.add({
-      severity: 'error',
-      summary: t('g.error'),
-      detail: t('clipboard.errorMessage')
-    })
-  }

-  function fallbackCopy(text: string) {
-    const textarea = document.createElement('textarea')
-    textarea.setAttribute('readonly', '')
-    textarea.value = text
-    textarea.style.position = 'absolute'
-    textarea.style.left = '-9999px'
-    textarea.setAttribute('aria-hidden', 'true')
-    textarea.setAttribute('tabindex', '-1')
-    textarea.style.width = '1px'
-    textarea.style.height = '1px'
-    document.body.appendChild(textarea)
-    textarea.select()
-
-    try {
-      // using legacy document.execCommand for fallback for old and linux browsers
-      const successful = document.execCommand('copy')
-      if (successful) {
-        showSuccessToast()
-      } else {
-        showErrorToast()
-      }
-    } catch (err) {
-      showErrorToast()
-    } finally {
-      textarea.remove()
-    }
-  }
-
-  const copyToClipboard = async (text: string) => {
+  async function copyToClipboard(text: string) {
    try {
      await copy(text)
      if (copied.value) {
-        showSuccessToast()
+        toast.add({
+          severity: 'success',
+          summary: t('g.success'),
+          detail: t('clipboard.successMessage'),
+          life: 3000
+        })
      } else {
-        // If VueUse copy failed, try fallback
-        fallbackCopy(text)
+        toast.add({
+          severity: 'error',
+          summary: t('g.error'),
+          detail: t('clipboard.errorMessage')
+        })
      }
-    } catch (err) {
-      // VueUse copy failed, try fallback
-      fallbackCopy(text)
+    } catch {
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail: t('clipboard.errorMessage')
+      })
    }
  }

--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1338,8 +1338,6 @@ export function useCoreCommands(): ComfyCommand[] {
          typeof metadata?.source === 'string' ? metadata.source : 'keybind'
        const newMode = !canvasStore.linearMode
        if (newMode) useTelemetry()?.trackEnterLinear({ source })
-        app.rootGraph.extra.linearMode = newMode
-        workflowStore.activeWorkflow?.changeTracker?.checkState()
        canvasStore.linearMode = newMode
      }
    }
--- a/src/composables/useCurveEditor.ts
+++ b/src/composables/useCurveEditor.ts
@@ -2,7 +2,7 @@ import { computed, onBeforeUnmount, ref } from 'vue'
 import type { Ref } from 'vue'

 import { createMonotoneInterpolator } from '@/components/curve/curveUtils'
-import type { CurvePoint } from '@/lib/litegraph/src/types/widgets'
+import type { CurvePoint } from '@/components/curve/types'

 interface UseCurveEditorOptions {
  svgRef: Ref<SVGSVGElement | null>
@@ -21,11 +21,12 @@ export function useCurveEditor({ svgRef, modelValue }: UseCurveEditorOptions) {
    const xMin = points[0][0]
    const xMax = points[points.length - 1][0]
    const segments = 128
+    const range = xMax - xMin
    const parts: string[] = []
    for (let i = 0; i <= segments; i++) {
-      const x = xMin + (xMax - xMin) * (i / segments)
+      const x = xMin + range * (i / segments)
      const y = 1 - interpolate(x)
-      parts.push(`${i === 0 ? 'M' : 'L'}${x.toFixed(4)},${y.toFixed(4)}`)
+      parts.push(`${i === 0 ? 'M' : 'L'}${x},${y}`)
    }
    return parts.join('')
  })
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export type CurvePoint = [x: number, y: number]`