refactor: replace inline skeletonGridStyle with Tailwind utility class

Amp-Thread-ID: https://ampcode.com/threads/T-019c739d-19f4-76ff-9dad-568b4922bdab
Co-authored-by: Amp <amp@ampcode.com>

.github/workflows/ci-lint-format.yaml

@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
-          token: ${{ secrets.PR_GH_TOKEN }}
+          token: ${{ !github.event.pull_request.head.repo.fork && secrets.PR_GH_TOKEN || github.token }}
 
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend

.oxlintrc.json

@@ -21,7 +21,6 @@
     "eslint",
     "import",
     "oxc",
-    "promise",
     "typescript",
     "unicorn",
     "vitest",
@@ -29,12 +28,6 @@
   ],
   "rules": {
     "no-async-promise-executor": "off",
-    "no-else-return": [
-      "error",
-      {
-        "allowElseIf": false
-      }
-    ],
     "no-console": [
       "error",
       {
@@ -42,29 +35,8 @@
       }
     ],
     "no-control-regex": "off",
-    "eqeqeq": [
-      "error",
-      "always",
-      {
-        "null": "ignore"
-      }
-    ],
-    "func-style": [
-      "error",
-      "declaration",
-      {
-        "allowArrowFunctions": true
-      }
-    ],
     "no-eval": "off",
-    "no-new-func": "error",
-    // TODO: Enable and fix 104 violations
-    "no-param-reassign": "off",
     "no-redeclare": "error",
-    "no-return-assign": ["error", "always"],
-    "no-throw-literal": "error",
-    "no-useless-constructor": "error",
-    "no-var": "error",
     "no-restricted-imports": [
       "error",
       {
@@ -92,66 +64,15 @@
         ]
       }
     ],
-    "no-unneeded-ternary": [
-      "error",
-      {
-        "defaultAssignment": false
-      }
-    ],
-    "no-useless-call": "error",
-    "no-useless-concat": "error",
-    "prefer-const": "error",
-    // TODO: Enable and fix 581 violations
-    "prefer-destructuring": "off",
-    "prefer-object-has-own": "error",
-    "prefer-object-spread": "error",
-    "prefer-rest-params": "error",
-    "prefer-spread": "error",
-    "prefer-template": "error",
-    "promise/no-nesting": "error",
-    "promise/param-names": "error",
-    // TODO: Enable and fix 76 violations
-    "promise/prefer-await-to-callbacks": "off",
-    // TODO: Enable and fix 91 violations
-    "promise/prefer-await-to-then": "off",
-    "promise/prefer-catch": "error",
-    "preserve-caught-error": "error",
-    "yoda": [
-      "error",
-      "never",
-      {
-        "exceptRange": true
-      }
-    ],
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
     "no-useless-rename": "off",
-    "operator-assignment": ["error", "always"],
     "import/default": "error",
     "import/export": "error",
-    "import/first": ["error", "absolute-first"],
     "import/namespace": "error",
     "import/no-duplicates": "error",
     "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "vitest/consistent-each-for": [
-      "error",
-      {
-        "test": "for",
-        "describe": "for"
-      }
-    ],
-    "vitest/consistent-test-filename": [
-      "error",
-      {
-        "pattern": ".*\\.test\\.ts$"
-      }
-    ],
-    "vitest/consistent-vitest-vi": "error",
-    "vitest/warn-todo": "warn",
-    "vitest/hoisted-apis-on-top": "error",
-    "vitest/no-conditional-tests": "error",
-    "vitest/prefer-describe-function-title": "error",
     "jest/expect-expect": "off",
     "jest/no-conditional-expect": "off",
     "jest/no-disabled-tests": "off",
@@ -161,55 +82,11 @@
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
     "typescript/no-unused-vars": "off",
-    "unicorn/catch-error-name": [
-      "error",
-      {
-        "ignore": ["^error\\w+$"]
-      }
-    ],
-    // TODO: Enable and fix 147 violations
-    "unicorn/consistent-function-scoping": "off",
-    "unicorn/error-message": "error",
-    "unicorn/no-abusive-eslint-disable": "error",
-    // TODO: Enable and fix 165 violations
-    "unicorn/no-array-for-each": "off",
-    "unicorn/no-immediate-mutation": "error",
-    "unicorn/no-instanceof-array": "error",
-    "unicorn/no-length-as-slice-end": "error",
-    "unicorn/no-lonely-if": "error",
-    "unicorn/no-negation-in-equality-check": "error",
-    "unicorn/no-typeof-undefined": "error",
-    "unicorn/prefer-math-min-max": "error",
-    "unicorn/prefer-array-flat-map": "error",
     "unicorn/no-empty-file": "off",
     "unicorn/no-new-array": "off",
-    "unicorn/prefer-add-event-listener": "error",
-    "unicorn/prefer-array-find": "error",
-    "unicorn/no-useless-undefined": [
-      "error",
-      {
-        "checkArguments": false,
-        "checkArrowFunctionBody": false
-      }
-    ],
-    "unicorn/prefer-classlist-toggle": "error",
     "unicorn/no-single-promise-in-promise-methods": "off",
-    "unicorn/no-this-assignment": "error",
-    "unicorn/no-useless-collection-argument": "error",
-    "unicorn/no-useless-switch-case": "error",
     "unicorn/no-useless-fallback-in-spread": "off",
     "unicorn/no-useless-spread": "off",
-    "unicorn/prefer-optional-catch-binding": "error",
-    "unicorn/prefer-prototype-methods": "error",
-    "unicorn/prefer-query-selector": "error",
-    "unicorn/prefer-spread": "error",
-    "unicorn/prefer-regexp-test": "error",
-    "unicorn/prefer-set-has": "error",
-    "unicorn/prefer-string-replace-all": "error",
-    "unicorn/prefer-string-slice": "error",
-    "unicorn/prefer-string-trim-start-end": "error",
-    "unicorn/prefer-type-error": "error",
-    "unicorn/throw-new-error": "error",
     "typescript/await-thenable": "off",
     "typescript/no-base-to-string": "off",
     "typescript/no-duplicate-type-constituents": "off",
@@ -219,12 +96,7 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
-    // TODO: Enable and fix 372 violations (use { "ignoreConditionalTests": true })
-    "typescript/prefer-nullish-coalescing": "off",
-    // TODO: Enable and fix violations
-    "typescript/prefer-optional-chain": "off",
-    "typescript/prefer-ts-expect-error": "error",
-    "vue/define-props-destructuring": "error",
+    "typescript/no-explicit-any": "error",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },
@@ -243,8 +115,7 @@
         "no-control-regex": "error",
         "no-useless-rename": "error",
         "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error",
-        "vitest/consistent-test-filename": "off"
+        "unicorn/no-empty-file": "error"
       }
     }
   ]

browser_tests/assets/missing/deprecated_nodes_complex.json

@@ -0,0 +1,205 @@
+{
+  "last_node_id": 7,
+  "last_link_id": 5,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "T2IAdapterLoader",
+      "pos": [100, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "CONTROL_NET",
+          "type": "CONTROL_NET",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "T2IAdapterLoader"
+      },
+      "widgets_values": ["t2iadapter_model.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 300],
+      "size": [315, 98],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    },
+    {
+      "id": 3,
+      "type": "ResizeImagesByLongerEdge",
+      "pos": [500, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ResizeImagesByLongerEdge"
+      },
+      "widgets_values": [1024]
+    },
+    {
+      "id": 4,
+      "type": "ImageScaleBy",
+      "pos": [500, 280],
+      "size": [300, 80],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2, 3],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageScaleBy"
+      },
+      "widgets_values": ["lanczos", 1.5]
+    },
+    {
+      "id": 5,
+      "type": "ImageBatch",
+      "pos": [900, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image1",
+          "type": "IMAGE",
+          "link": 2
+        },
+        {
+          "name": "image2",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageBatch"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 6,
+      "type": "SaveImage",
+      "pos": [900, 300],
+      "size": [300, 80],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SaveImage"
+      },
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 7,
+      "type": "PreviewImage",
+      "pos": [1250, 100],
+      "size": [300, 250],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 4
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [1, 3, 0, 4, 0, "IMAGE"],
+    [2, 4, 0, 5, 0, "IMAGE"],
+    [3, 4, 0, 6, 0, "IMAGE"],
+    [4, 5, 0, 7, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/deprecated_nodes_simple.json

@@ -0,0 +1,186 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3DAnimation",
+      "pos": [100, 100],
+      "size": [300, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3DAnimation"
+      },
+      "widgets_values": ["model.glb"]
+    },
+    {
+      "id": 2,
+      "type": "Preview3DAnimation",
+      "pos": [450, 100],
+      "size": [300, 100],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "mesh",
+          "type": "MESH",
+          "link": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Preview3DAnimation"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "ConditioningAverage ",
+      "pos": [100, 300],
+      "size": [300, 100],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "conditioning_to",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "conditioning_from",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ConditioningAverage "
+      },
+      "widgets_values": [1]
+    },
+    {
+      "id": 4,
+      "type": "SDV_img2vid_Conditioning",
+      "pos": [450, 300],
+      "size": [300, 150],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip_vision",
+          "type": "CLIP_VISION",
+          "link": null
+        },
+        {
+          "name": "init_image",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "latent",
+          "type": "LATENT",
+          "links": [2],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SDV_img2vid_Conditioning"
+      },
+      "widgets_values": [1024, 576, 14, 127, 25, 0.02]
+    },
+    {
+      "id": 5,
+      "type": "KSampler",
+      "pos": [800, 300],
+      "size": [300, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 1
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [42, "fixed", 20, 8, "euler", "normal", 1]
+    }
+  ],
+  "links": [
+    [1, 3, 0, 5, 1, "CONDITIONING"],
+    [2, 4, 2, 5, 3, "LATENT"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/save_image_and_animated_webp.json

@@ -0,0 +1,86 @@
+{
+  "id": "save-image-and-webm-test",
+  "revision": 0,
+  "last_node_id": 12,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 100],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1, 2]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 11,
+      "type": "SaveImage",
+      "pos": [450, 100],
+      "size": [210, 270],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 12,
+      "type": "SaveWEBM",
+      "pos": [450, 450],
+      "size": [210, 368],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI", "vp9", 6, 32]
+    }
+  ],
+  "links": [
+    [1, 10, 0, 11, 0, "IMAGE"],
+    [2, 10, 0, 12, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.17.0",
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/components/SettingDialog.ts

@@ -23,9 +23,7 @@ export class SettingDialog extends BaseDialog {
    * @param value - The value to set
    */
   async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
     await settingInputDiv.locator('input').fill(value)
   }
 
@@ -34,16 +32,31 @@ export class SettingDialog extends BaseDialog {
    * @param id - The id of the setting
    */
   async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
     await settingInputDiv.locator('input').click()
   }
 
+  get searchBox() {
+    return this.root.getByPlaceholder(/Search/)
+  }
+
+  get categories() {
+    return this.root.locator('nav').getByRole('button')
+  }
+
+  category(name: string) {
+    return this.root.locator('nav').getByRole('button', { name })
+  }
+
+  get contentArea() {
+    return this.root.getByRole('main')
+  }
+
   async goToAboutPanel() {
-    await this.page.getByTestId(TestIds.dialogs.settingsTabAbout).click()
-    await this.page
-      .getByTestId(TestIds.dialogs.about)
-      .waitFor({ state: 'visible' })
+    const aboutButton = this.root.locator('nav').getByRole('button', {
+      name: 'About'
+    })
+    await aboutButton.click()
+    await this.page.waitForSelector('.about-container')
   }
 }

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -226,9 +226,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(bottomPanel.shortcuts.manageButton).toBeVisible()
     await bottomPanel.shortcuts.manageButton.click()
 
-    await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
-    await expect(
-      comfyPage.page.getByRole('option', { name: 'Keybinding' })
-    ).toBeVisible()
+    await expect(comfyPage.settingDialog.root).toBeVisible()
+    await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
   })
 })

browser_tests/tests/dialog.spec.ts

@@ -244,9 +244,13 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsContent = comfyPage.page.locator('.settings-content')
-    await expect(settingsContent).toBeVisible()
-    const isUsableHeight = await settingsContent.evaluate(
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await expect(settingsDialog).toBeVisible()
+    const contentArea = settingsDialog.locator('main')
+    await expect(contentArea).toBeVisible()
+    const isUsableHeight = await contentArea.evaluate(
       (el) => el.clientHeight > 30
     )
     expect(isUsableHeight).toBeTruthy()
@@ -256,7 +260,9 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator('.settings-container')
+    const settingsLocator = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
     await expect(settingsLocator).not.toBeVisible()
@@ -275,10 +281,15 @@ test.describe('Settings', () => {
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('.settings-container')
+    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
 
     // Open the keybinding tab
-    await comfyPage.page.getByLabel('Keybinding').click()
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await settingsDialog
+      .locator('nav [role="button"]', { hasText: 'Keybinding' })
+      .click()
     await comfyPage.page.waitForSelector(
       '[placeholder="Search Keybindings..."]'
     )

browser_tests/tests/nodeSearchBox.spec.ts

@@ -215,6 +215,14 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
+    test('Does not add duplicate filter with same type and value', async ({
+      comfyPage
+    }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expectFilterChips(comfyPage, ['MODEL'])
+    })
+
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.removeFilter(0)

browser_tests/tests/saveImageAndWebp.spec.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Save Image and WEBM preview',
+  { tag: ['@screenshot', '@widget'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test('Can preview both SaveImage and SaveWEBM outputs', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'widgets/save_image_and_animated_webp'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      await comfyPage.runButton.click()
+
+      const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
+      const saveWebmNode = comfyPage.vueNodes.getNodeByTitle('SaveWEBM')
+
+      // Wait for SaveImage to render an img inside .image-preview
+      await expect(saveImageNode.locator('.image-preview img')).toBeVisible({
+        timeout: 30000
+      })
+
+      // Wait for SaveWEBM to render a video inside .video-preview
+      await expect(saveWebmNode.locator('.video-preview video')).toBeVisible({
+        timeout: 30000
+      })
+
+      await expect(comfyPage.page).toHaveScreenshot(
+        'save-image-and-webm-preview.png'
+      )
+    })
+  }
+)

browser_tests/tests/subgraph.spec.ts

@@ -826,7 +826,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Open settings dialog using hotkey
       await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
+      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
         state: 'visible'
       })
 
@@ -836,7 +836,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Dialog should be closed
       await expect(
-        comfyPage.page.locator('.settings-container')
+        comfyPage.page.locator('[data-testid="settings-dialog"]')
       ).not.toBeVisible()
 
       // Should still be in subgraph

browser_tests/tests/useSettingSearch.spec.ts

@@ -22,7 +22,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
         name: 'TestSettingsExtension',
         settings: [
           {
-            // Extensions can register arbitrary setting IDs
             id: 'TestHiddenSetting' as TestSettingId,
             name: 'Test Hidden Setting',
             type: 'hidden',
@@ -30,7 +29,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
             category: ['Test', 'Hidden']
           },
           {
-            // Extensions can register arbitrary setting IDs
             id: 'TestDeprecatedSetting' as TestSettingId,
             name: 'Test Deprecated Setting',
             type: 'text',
@@ -39,7 +37,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
             category: ['Test', 'Deprecated']
           },
           {
-            // Extensions can register arbitrary setting IDs
             id: 'TestVisibleSetting' as TestSettingId,
             name: 'Test Visible Setting',
             type: 'text',
@@ -52,238 +49,143 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
   })
 
   test('can open settings dialog and use search box', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await expect(searchBox).toBeVisible()
-
-    // Verify search box has the correct placeholder
-    await expect(searchBox).toHaveAttribute(
+    await expect(dialog.searchBox).toHaveAttribute(
       'placeholder',
       expect.stringContaining('Search')
     )
   })
 
   test('search box is functional and accepts input', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Comfy')
-
-    // Verify the input was accepted
-    await expect(searchBox).toHaveValue('Comfy')
+    await dialog.searchBox.fill('Comfy')
+    await expect(dialog.searchBox).toHaveValue('Comfy')
   })
 
   test('search box clears properly', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('test')
-    await expect(searchBox).toHaveValue('test')
+    await dialog.searchBox.fill('test')
+    await expect(dialog.searchBox).toHaveValue('test')
 
-    // Clear the search box
-    await searchBox.clear()
-    await expect(searchBox).toHaveValue('')
+    await dialog.searchBox.clear()
+    await expect(dialog.searchBox).toHaveValue('')
   })
 
   test('settings categories are visible in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Check that the sidebar has categories
-    const categories = comfyPage.page.locator(
-      '.settings-sidebar .p-listbox-option'
-    )
-    expect(await categories.count()).toBeGreaterThan(0)
-
-    // Check that at least one category is visible
-    await expect(categories.first()).toBeVisible()
+    expect(await dialog.categories.count()).toBeGreaterThan(0)
   })
 
   test('can select different categories in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Click on a specific category (Appearance) to verify category switching
-    const appearanceCategory = comfyPage.page.getByRole('option', {
-      name: 'Appearance'
-    })
-    await appearanceCategory.click()
+    const categoryCount = await dialog.categories.count()
 
-    // Verify the category is selected
-    await expect(appearanceCategory).toHaveClass(/p-listbox-option-selected/)
-  })
+    if (categoryCount > 1) {
+      await dialog.categories.nth(1).click()
 
-  test('settings content area is visible', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
-
-    // Check that the content area is visible
-    const contentArea = comfyPage.page.locator('.settings-content')
-    await expect(contentArea).toBeVisible()
-
-    // Check that tab panels are visible
-    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
-    await expect(tabPanels).toBeVisible()
+      await expect(dialog.categories.nth(1)).toHaveClass(
+        /bg-interface-menu-component-surface-selected/
+      )
+    }
   })
 
   test('search functionality affects UI state', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-
-    // Type in search box
-    await searchBox.fill('graph')
-
-    // Verify that the search input is handled
-    await expect(searchBox).toHaveValue('graph')
+    await dialog.searchBox.fill('graph')
+    await expect(dialog.searchBox).toHaveValue('graph')
   })
 
   test('settings dialog can be closed', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Close with escape key
     await comfyPage.page.keyboard.press('Escape')
-
-    // Verify dialog is closed
-    await expect(settingsDialog).not.toBeVisible()
+    await expect(dialog.root).not.toBeVisible()
   })
 
   test('search box has proper debouncing behavior', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Type rapidly in search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('a')
-    await searchBox.fill('ab')
-    await searchBox.fill('abc')
-    await searchBox.fill('abcd')
+    await dialog.searchBox.fill('a')
+    await dialog.searchBox.fill('ab')
+    await dialog.searchBox.fill('abc')
+    await dialog.searchBox.fill('abcd')
 
-    // Verify final value
-    await expect(searchBox).toHaveValue('abcd')
+    await expect(dialog.searchBox).toHaveValue('abcd')
   })
 
   test('search excludes hidden settings from results', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should show visible setting but not hidden setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
   })
 
   test('search excludes deprecated settings from results', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should show visible setting but not deprecated setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
   })
 
   test('search shows visible settings but excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should only show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-
-    // Should not show hidden or deprecated settings
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
   })
 
   test('search by setting name excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Hidden')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
 
-    // Search specifically for hidden setting by name
-    await searchBox.clear()
-    await searchBox.fill('Hidden')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Deprecated')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
 
-    // Should not show the hidden setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-
-    // Search specifically for deprecated setting by name
-    await searchBox.clear()
-    await searchBox.fill('Deprecated')
-
-    // Should not show the deprecated setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
-
-    // Search for visible setting by name - should work
-    await searchBox.clear()
-    await searchBox.fill('Visible')
-
-    // Should show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Visible')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
   })
 })

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Nodes Image Preview', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  async function loadImageOnNode(
+    comfyPage: Awaited<
+      ReturnType<(typeof test)['info']>
+    >['fixtures']['comfyPage']
+  ) {
+    const loadImageNode = (await comfyPage.getNodeRefsByType('LoadImage'))[0]
+    const { x, y } = await loadImageNode.getPosition()
+
+    await comfyPage.dragAndDropFile('image64x64.webp', {
+      dropPosition: { x, y }
+    })
+
+    const imagePreview = comfyPage.page.locator('.image-preview')
+    await expect(imagePreview).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview).toContainText('x')
+
+    return imagePreview
+  }
+
+  test('opens mask editor from image preview button', async ({ comfyPage }) => {
+    const imagePreview = await loadImageOnNode(comfyPage)
+
+    await imagePreview.locator('[role="img"]').hover()
+    await comfyPage.page.getByLabel('Edit or mask image').click()
+
+    await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
+  })
+
+  test('shows image context menu options', async ({ comfyPage }) => {
+    await loadImageOnNode(comfyPage)
+
+    const nodeHeader = comfyPage.vueNodes.getNodeByTitle('Load Image')
+    await nodeHeader.click()
+    await nodeHeader.click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible()
+    await expect(contextMenu.getByText('Open Image')).toBeVisible()
+    await expect(contextMenu.getByText('Copy Image')).toBeVisible()
+    await expect(contextMenu.getByText('Save Image')).toBeVisible()
+    await expect(contextMenu.getByText('Open in Mask Editor')).toBeVisible()
+  })
+})

docs/testing/component-testing.md

@@ -12,18 +12,6 @@ This guide covers patterns and examples for testing Vue components in the ComfyU
 6. [Asynchronous Component Testing](#asynchronous-component-testing)
 7. [Working with Vue Reactivity](#working-with-vue-reactivity)
 
-## Describe Block Naming
-
-Use `Component.__name ?? 'ComponentName'` for the top-level `describe` title. This passes the function reference (satisfying the `prefer-describe-function-title` lint rule) while providing a readable fallback:
-
-```typescript
-import MyComponent from './MyComponent.vue'
-
-describe(MyComponent.__name ?? 'MyComponent', () => {
-  // ...
-})
-```
-
 ## Basic Component Testing
 
 Basic approach to testing a component's rendering and structure:
@@ -33,7 +21,7 @@ Basic approach to testing a component's rendering and structure:
 import { mount } from '@vue/test-utils'
 import SidebarIcon from './SidebarIcon.vue'
 
-describe(SidebarIcon.__name ?? 'SidebarIcon', () => {
+describe('SidebarIcon', () => {
   const exampleProps = {
     icon: 'pi pi-cog',
     selected: false

eslint.config.ts

@@ -138,10 +138,6 @@ export default defineConfig([
       'import-x/no-useless-path-segments': 'error',
       'import-x/no-relative-packages': 'error',
       'unused-imports/no-unused-imports': 'error',
-      'vue/return-in-computed-property': [
-        'error',
-        { treatUndefinedAsUnspecified: false }
-      ],
       'vue/no-v-html': 'off',
       // Prohibit dark-theme: and dark: prefixes
       'vue/no-restricted-class': ['error', '/^dark(-theme)?:/'],

global.d.ts

@@ -10,9 +10,28 @@ interface ImpactQueueFunction {
   a?: unknown[][]
 }
 
+type GtagGetFieldName = 'client_id' | 'session_id' | 'session_number'
+
+interface GtagGetFieldValueMap {
+  client_id: string | number | undefined
+  session_id: string | number | undefined
+  session_number: string | number | undefined
+}
+
+interface GtagFunction {
+  <TField extends GtagGetFieldName>(
+    command: 'get',
+    targetId: string,
+    fieldName: TField,
+    callback: (value: GtagGetFieldValueMap[TField]) => void
+  ): void
+  (...args: unknown[]): void
+}
+
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
+    ga_measurement_id?: string
     mixpanel_token?: string
     require_whitelist?: boolean
     subscription_required?: boolean
@@ -36,12 +55,8 @@ interface Window {
       badge?: string
     }
   }
-  __ga_identity__?: {
-    client_id?: string
-    session_id?: string
-    session_number?: string
-  }
   dataLayer?: Array<Record<string, unknown>>
+  gtag?: GtagFunction
   ire_o?: string
   ire?: ImpactQueueFunction
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.40.0",
+  "version": "1.40.7",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

packages/design-system/src/icons/comfy-c.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 9">
+  <path d="M1.82148 8.68376C1.61587 8.68376 1.44996 8.60733 1.34177 8.46284C1.23057 8.31438 1.20157 8.10711 1.26219 7.89434L1.50561 7.03961C1.52502 6.97155 1.51151 6.89831 1.46918 6.8417C1.42684 6.7852 1.3606 6.75194 1.29025 6.75194H0.590376C0.384656 6.75194 0.21875 6.67562 0.110614 6.53113C-0.000591531 6.38256 -0.0295831 6.17529 0.0310774 5.96252L0.867308 3.03952L0.959638 2.71838C1.08375 2.28258 1.53638 1.9284 1.96878 1.9284H2.80622C2.90615 1.9284 2.99406 1.86177 3.02157 1.76508L3.29852 0.79284C3.4225 0.357484 3.87514 0.0033043 4.30753 0.0033043L6.09854 0.000112775L7.40967 0C7.61533 0 7.78124 0.0763259 7.88937 0.220813C8.00058 0.369269 8.02957 0.576538 7.96895 0.78931L7.59405 2.10572C7.4701 2.54096 7.01746 2.89503 6.58507 2.89503L4.79008 2.89844H3.95292C3.8531 2.89844 3.7653 2.96496 3.73762 3.06155L3.03961 5.49964C3.02008 5.56781 3.03359 5.64127 3.07604 5.69787C3.11837 5.75437 3.18461 5.78763 3.2549 5.78763C3.25507 5.78763 4.44105 5.78532 4.44105 5.78532H5.7483C5.95396 5.78532 6.11986 5.86164 6.228 6.00613C6.33921 6.1547 6.3682 6.36197 6.30754 6.57474L5.93263 7.89092C5.80869 8.32628 5.35605 8.68034 4.92366 8.68034L3.12872 8.68376H1.82148Z" fill="#8A8A8A"/>
+</svg>
+

pnpm-lock.yaml

@@ -205,14 +205,14 @@ catalogs:
       specifier: 22.2.6
       version: 22.2.6
     oxfmt:
-      specifier: ^0.31.0
-      version: 0.31.0
+      specifier: ^0.26.0
+      version: 0.26.0
     oxlint:
-      specifier: ^1.46.0
-      version: 1.46.0
+      specifier: ^1.33.0
+      version: 1.33.0
     oxlint-tsgolint:
-      specifier: ^0.11.5
-      version: 0.11.5
+      specifier: ^0.9.1
+      version: 0.9.1
     picocolors:
       specifier: ^1.1.1
       version: 1.1.1
@@ -650,13 +650,13 @@ importers:
         version: 22.2.6
       oxfmt:
         specifier: 'catalog:'
-        version: 0.31.0
+        version: 0.26.0
       oxlint:
         specifier: 'catalog:'
-        version: 1.46.0(oxlint-tsgolint@0.11.5)
+        version: 1.33.0(oxlint-tsgolint@0.9.1)
       oxlint-tsgolint:
         specifier: 'catalog:'
-        version: 0.11.5
+        version: 0.9.1
       picocolors:
         specifier: 'catalog:'
         version: 1.1.1
@@ -2626,269 +2626,113 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxfmt/binding-android-arm-eabi@0.31.0':
-    resolution: {integrity: sha512-2A7s+TmsY7xF3yM0VWXq2YJ82Z7Rd7AOKraotyp58Fbk7q9cFZKczW6Zrz/iaMaJYfR/UHDxF3kMR11vayflug==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxfmt/binding-android-arm64@0.31.0':
-    resolution: {integrity: sha512-3ppKOIf2lQv/BFhRyENWs/oarueppCEnPNo0Az2fKkz63JnenRuJPoHaGRrMHg1oFMUitdYy+YH29Cv5ISZWRQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxfmt/binding-darwin-arm64@0.31.0':
-    resolution: {integrity: sha512-eFhNnle077DPRW6QPsBtl/wEzPoqgsB1LlzDRYbbztizObHdCo6Yo8T0hew9+HoYtnVMAP19zcRE7VG9OfqkMw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/darwin-arm64@0.26.0':
+    resolution: {integrity: sha512-AAGc+8CffkiWeVgtWf4dPfQwHEE5c/j/8NWH7VGVxxJRCZFdmWcqCXprvL2H6qZFewvDLrFbuSPRCqYCpYGaTQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxfmt/binding-darwin-x64@0.31.0':
-    resolution: {integrity: sha512-9UQSunEqokhR1WnlQCgJjkjw13y8PSnBvR98L78beGudTtNSaPMgwE7t/T0IPDibtDTxeEt+IQVKoQJ+8Jo6Lg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/darwin-x64@0.26.0':
+    resolution: {integrity: sha512-xFx5ijCTjw577wJvFlZEMmKDnp3HSCcbYdCsLRmC5i3TZZiDe9DEYh3P46uqhzj8BkEw1Vm1ZCWdl48aEYAzvQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxfmt/binding-freebsd-x64@0.31.0':
-    resolution: {integrity: sha512-FHo7ITkDku3kQ8/44nU6IGR1UNH22aqYM3LV2ytV40hWSMVllXFlM+xIVusT+I/SZBAtuFpwEWzyS+Jn4TkkAQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxfmt/binding-linux-arm-gnueabihf@0.31.0':
-    resolution: {integrity: sha512-o1NiDlJDO9SOoY5wH8AyPUX60yQcOwu5oVuepi2eetArBp0iFF9qIH1uLlZsUu4QQ6ywqxcJSMjXCqGKC5uQFg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxfmt/binding-linux-arm-musleabihf@0.31.0':
-    resolution: {integrity: sha512-VXiRxlBz7ivAIjhnnVBEYdjCQ66AsjM0YKxYAcliS0vPqhWKiScIT61gee0DPCVaw1XcuW8u19tfRwpfdYoreg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxfmt/binding-linux-arm64-gnu@0.31.0':
-    resolution: {integrity: sha512-ryGPOtPViNcjs8N8Ap+wn7SM6ViiLzR9f0Pu7yprae+wjl6qwnNytzsUe7wcb+jT43DJYmvemFqE8tLVUavYbQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/linux-arm64-gnu@0.26.0':
+    resolution: {integrity: sha512-GubkQeQT5d3B/Jx/IiR7NMkSmXrCZcVI0BPh1i7mpFi8HgD1hQ/LbhiBKAMsMqs5bbugdQOgBEl8bOhe8JhW1g==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm64-musl@0.31.0':
-    resolution: {integrity: sha512-BA3Euxp4bfd+AU3cKPgmHL44BbuBtmQTyAQoVDhX/nqPgbS/auoGp71uQBE4SAPTsQM/FcXxfKmCAdBS7ygF9w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/linux-arm64-musl@0.26.0':
+    resolution: {integrity: sha512-OEypUwK69bFPj+aa3/LYCnlIUPgoOLu//WNcriwpnWNmt47808Ht7RJSg+MNK8a7pSZHpXJ5/E6CRK/OTwFdaQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.31.0':
-    resolution: {integrity: sha512-wIiKHulVWE9s6PSftPItucTviyCvjugwPqEyUl1VD47YsFqa5UtQTknBN49NODHJvBgO+eqqUodgRqmNMp3xyw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-riscv64-gnu@0.31.0':
-    resolution: {integrity: sha512-6cM8Jt54bg9V/JoeUWhwnzHAS9Kvgc0oFsxql8PVs/njAGs0H4r+GEU4d+LXZPwI3b3ZUuzpbxlRJzer8KW+Cg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-riscv64-musl@0.31.0':
-    resolution: {integrity: sha512-d+b05wXVRGaO6gobTaDqUdBvTXwYc0ro7k1UVC37k4VimLRQOzEZqTwVinqIX3LxTaFCmfO1yG00u9Pct3AKwQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxfmt/binding-linux-s390x-gnu@0.31.0':
-    resolution: {integrity: sha512-Q+i2kj8e+two9jTZ3vxmxdNlg++qShe1ODL6xV4+Qt6SnJYniMxfcqphuXli4ft270kuHqd8HSVZs84CsSh1EA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxfmt/binding-linux-x64-gnu@0.31.0':
-    resolution: {integrity: sha512-F2Z5ffj2okhaQBi92MylwZddKvFPBjrsZnGvvRmVvWRf8WJ0WkKUTtombDgRYNDgoW7GBUUrNNNgWhdB7kVjBA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/linux-x64-gnu@0.26.0':
+    resolution: {integrity: sha512-xO6iEW2bC6ZHyOTPmPWrg/nM6xgzyRPaS84rATy6F8d79wz69LdRdJ3l/PXlkqhi7XoxhvX4ExysA0Nf10ZZEQ==}
     cpu: [x64]
     os: [linux]
 
-  '@oxfmt/binding-linux-x64-musl@0.31.0':
-    resolution: {integrity: sha512-Vz7dZQd1yhE5wTWujGanPmZgDtzLZS1PQoeMmUj89p4eMTmpIkvWaIr3uquJCbh8dQd5cPZrFvMmdDgcY5z+GA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/linux-x64-musl@0.26.0':
+    resolution: {integrity: sha512-Z3KuZFC+MIuAyFCXBHY71kCsdRq1ulbsbzTe71v+hrEv7zVBn6yzql+/AZcgfIaKzWO9OXNuz5WWLWDmVALwow==}
     cpu: [x64]
     os: [linux]
 
-  '@oxfmt/binding-openharmony-arm64@0.31.0':
-    resolution: {integrity: sha512-nm0gus6R5V9tM1XaELiiIduUzmdBuCefkwToWKL4UtuFoMCGkigVQnbzHwPTGLVWOEF6wTQucFA8Fn1U8hxxVw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@oxfmt/binding-win32-arm64-msvc@0.31.0':
-    resolution: {integrity: sha512-mMpvvPpoLD97Q2TMhjWDJSn+ib3kN+H+F4gq9p88zpeef6sqWc9djorJ3JXM2sOZMJ6KZ+1kSJfe0rkji74Pog==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/win32-arm64@0.26.0':
+    resolution: {integrity: sha512-3zRbqwVWK1mDhRhTknlQFpRFL9GhEB5GfU6U7wawnuEwpvi39q91kJ+SRJvJnhyPCARkjZBd1V8XnweN5IFd1g==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxfmt/binding-win32-ia32-msvc@0.31.0':
-    resolution: {integrity: sha512-zTngbPyrTDBYJFVQa4OJldM6w1Rqzi8c0/eFxAEbZRoj6x149GkyMkAY3kM+09ZhmszFitCML2S3p10NE2XmHA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxfmt/binding-win32-x64-msvc@0.31.0':
-    resolution: {integrity: sha512-TB30D+iRLe6eUbc/utOA93+FNz5C6vXSb/TEhwvlODhKYZZSSKn/lFpYzZC7bdhx3a8m4Jq8fEUoCJ6lKnzdpA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxfmt/win32-x64@0.26.0':
+    resolution: {integrity: sha512-m8TfIljU22i9UEIkD+slGPifTFeaCwIUfxszN3E6ABWP1KQbtwSw9Ak0TdoikibvukF/dtbeyG3WW63jv9DnEg==}
     cpu: [x64]
     os: [win32]
 
-  '@oxlint-tsgolint/darwin-arm64@0.11.5':
-    resolution: {integrity: sha512-mzsjJVIUgcGJovBXME63VW2Uau7MS/xCe7xdYj2BplSCuRb5Yoy7WuwCIlbD5ISHjnS6rx26oD2kmzHLRV5Wfw==}
+  '@oxlint-tsgolint/darwin-arm64@0.9.1':
+    resolution: {integrity: sha512-vk+8kChWqN+F+QUOvp4/6jDTlDCzXPgYGkxdi6EOUSOmCP1ix0uYOlIi/ytH2imXmC8YfPgLR/1BhqbsuDKuew==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint-tsgolint/darwin-x64@0.11.5':
-    resolution: {integrity: sha512-zItUS0qLzSzVy0ZQHc4MOphA9lVeP5jffsgZFLCdo+JqmkbVZ14aDtiVUHSHi2hia+qatbb109CHQ9YIl0x7+A==}
+  '@oxlint-tsgolint/darwin-x64@0.9.1':
+    resolution: {integrity: sha512-yXmqr7El17+Oo56fWkPdUluU8d0jWxwRwAe1QZ0Xprxul9FHJeR/O2oYuBUngvCi02dbt0VZlwgJXcljQEdHlQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint-tsgolint/linux-arm64@0.11.5':
-    resolution: {integrity: sha512-R0r/3QTdMtIjfUOM1oxIaCV0s+j7xrnUe4CXo10ZbBzlXfMesWYNcf/oCrhsy87w0kCPFsg58nAdKaIR8xylFg==}
+  '@oxlint-tsgolint/linux-arm64@0.9.1':
+    resolution: {integrity: sha512-ukLb35BHSsxXaVEe8eIvYXMTxOdv8K4CySmtkWyc0pJT0q8zh85by1bsREWAP2hZc0wN0ClHjZHPdKY3958Jwg==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint-tsgolint/linux-x64@0.11.5':
-    resolution: {integrity: sha512-g23J3T29EHWUQYC6aTwLnhwcFtjQh+VfxyGuFjYGGTLhESdlQH9E/pwsN8K9HaAiYWjI51m3r3BqQjXxEW8Jjg==}
+  '@oxlint-tsgolint/linux-x64@0.9.1':
+    resolution: {integrity: sha512-kkxSS/meANLun4dHep2wnfvo8OHJKgdxzuY3RoooSWorVqw3/K5Qttmo0OQFt7UNq/oisn0YTaNhV28S0nAWyQ==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint-tsgolint/win32-arm64@0.11.5':
-    resolution: {integrity: sha512-MJNT/MPUIZKQCRtCX5s6pCnoe7If/i3RjJzFMe4kSLomRsHrNFYOJBwt4+w/Hqfyg9jNOgR8tbgdx6ofjHaPMQ==}
+  '@oxlint-tsgolint/win32-arm64@0.9.1':
+    resolution: {integrity: sha512-F9tiZZRn3x+kjXJC8GAE5C5xkvD8b8unoFeh7mS5W4USAH8+AzYydzLev5rAW2uXdOqtkO30EJl0ygl68Zlb8w==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint-tsgolint/win32-x64@0.11.5':
-    resolution: {integrity: sha512-IQmj4EkcZOBlLnj1CdxKFrWT7NAWXZ9ypZ874X/w7S5gRzB2sO4KmE6Z0MWxx05pL9AQF+CWVRjZrKVIYWTzPg==}
+  '@oxlint-tsgolint/win32-x64@0.9.1':
+    resolution: {integrity: sha512-DKTBgKUbycKNYgpWpglEHzkgiNVSG1rZmfiqw7w31keAq8q7avNGhz2WNmsRvXh8IGNw1PMb7vgxwUK8eyXIeg==}
     cpu: [x64]
     os: [win32]
 
-  '@oxlint/binding-android-arm-eabi@1.46.0':
-    resolution: {integrity: sha512-vLPcE+HcZ/W/0cVA1KLuAnoUSejGougDH/fDjBFf0Q+rbBIyBNLevOhgx3AnBNAt3hcIGY7U05ISbJCKZeVa3w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@oxlint/binding-android-arm64@1.46.0':
-    resolution: {integrity: sha512-b8IqCczUsirdtJ3R/be4cRm64I5pMPafMO/9xyTAZvc+R/FxZHMQuhw0iNT9hQwRn+Uo5rNAoA8QS7QurG2QeA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxlint/binding-darwin-arm64@1.46.0':
-    resolution: {integrity: sha512-CfC/KGnNMhI01dkfCMjquKnW4zby3kqD5o/9XA7+pgo9I4b+Nipm+JVFyZPWMNwKqLXNmi35GTLWjs9svPxlew==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/darwin-arm64@1.33.0':
+    resolution: {integrity: sha512-PmEQDLHAxiAdyttQ1ZWXd+5VpHLbHf3FTMJL9bg5TZamDnhNiW/v0Pamv3MTAdymnoDI3H8IVLAN/SAseV/adw==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint/binding-darwin-x64@1.46.0':
-    resolution: {integrity: sha512-m38mKPsV3rBdWOJ4TAGZiUjWU8RGrBxsmdSeMQ0bPr/8O6CUOm/RJkPBf0GAfPms2WRVcbkfEXvIiPshAeFkeA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/darwin-x64@1.33.0':
+    resolution: {integrity: sha512-2R9aH3kR0X2M30z5agGikv3tfNTi8/uLhU5/tYktu33VGUXpbf0OLZSlD25UEuwOKAlf3RVtzV5oDyjoq93JuQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint/binding-freebsd-x64@1.46.0':
-    resolution: {integrity: sha512-YaFRKslSAfuMwn7ejS1/wo9jENqQigpGBjjThX+mrpmEROLYGky+zIC5xSVGRng28U92VEDVbSNJ/sguz3dUAA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxlint/binding-linux-arm-gnueabihf@1.46.0':
-    resolution: {integrity: sha512-Nlw+5mSZQtkg1Oj0N8ulxzG8ATpmSDz5V2DNaGhaYAVlcdR8NYSm/xTOnweOXc/UOOv3LwkPPYzqcfPhu2lEkA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxlint/binding-linux-arm-musleabihf@1.46.0':
-    resolution: {integrity: sha512-d3Y5y4ukMqAGnWLMKpwqj8ftNUaac7pA0NrId4AZ77JvHzezmxEcm2gswaBw2HW8y1pnq6KDB0vEPPvpTfDLrA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxlint/binding-linux-arm64-gnu@1.46.0':
-    resolution: {integrity: sha512-jkjx+XSOPuFR+C458prQmehO+v0VK19/3Hj2mOYDF4hHUf3CzmtA4fTmQUtkITZiGHnky7Oao6JeJX24mrX7WQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/linux-arm64-gnu@1.33.0':
+    resolution: {integrity: sha512-yb/k8GaMDgnX2LyO6km33kKItZ/n573SlbiHBBFU2HmeU7tzEHL5jHkHQXXcysUkapmqHd7UsDhOZDqPmXaQRg==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint/binding-linux-arm64-musl@1.46.0':
-    resolution: {integrity: sha512-X/aPB1rpJUdykjWSeeGIbjk6qbD8VDulgLuTSMWgr/t6m1ljcAjqHb1g49pVG9bZl55zjECgzvlpPLWnfb4FMQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/linux-arm64-musl@1.33.0':
+    resolution: {integrity: sha512-03pt9IO1C4ZfVOW6SQiOK26mzklAhLM3Kc79OXpX1kgZRlxk+rvFoMhlgCOzn7tEdrEgbePkBoxNnwDnJDFqJQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint/binding-linux-ppc64-gnu@1.46.0':
-    resolution: {integrity: sha512-AymyOxGWwKY2KJa8b+h8iLrYJZbWKYCjqctSc2q6uIAkYPrCsxcWlge1JP6XZ14Sa80DVMwI/QvktbytSV+xVw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-riscv64-gnu@1.46.0':
-    resolution: {integrity: sha512-PkeVdPKCDA59rlMuucsel2LjlNEpslQN5AhkMMorIJZItbbqi/0JSuACCzaiIcXYv0oNfbeQ8rbOBikv+aT6cg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-riscv64-musl@1.46.0':
-    resolution: {integrity: sha512-snQaRLO/X+Ry/CxX1px1g8GUbmXzymdRs+/RkP2bySHWZFhFDtbLm2hA1ujX/jKlTLMJDZn4hYzFGLDwG/Rh2w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@oxlint/binding-linux-s390x-gnu@1.46.0':
-    resolution: {integrity: sha512-kZhDMwUe/sgDTluGao9c0Dqc1JzV6wPzfGo0l/FLQdh5Zmp39Yg1FbBsCgsJfVKmKl1fNqsHyFLTShWMOlOEhA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@oxlint/binding-linux-x64-gnu@1.46.0':
-    resolution: {integrity: sha512-n5a7VtQTxHZ13cNAKQc3ziARv5bE1Fx868v/tnhZNVUjaRNYe5uiUrRJ/LZghdAzOxVuQGarjjq/q4QM2+9OPA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/linux-x64-gnu@1.33.0':
+    resolution: {integrity: sha512-Z7ImLWM50FoVXzYvyxUQ+QwBkBfRyK4YdLEGonyAGMp7iT3DksonDaTK9ODnJ1qHyAyAZCvuqXD7AEDsDvzDbA==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint/binding-linux-x64-musl@1.46.0':
-    resolution: {integrity: sha512-KpsDU/BhdVn3iKCLxMXAOZIpO8fS0jEA5iluRoK1rhHPwKtpzEm/OCwERsu/vboMSZm66qnoTUVXRPJ8M+iKVQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/linux-x64-musl@1.33.0':
+    resolution: {integrity: sha512-idb55Uzu5kkqqpMiVUfI9nP7zOqPZinQKsIRQAIU40wILcf/ijvhNZKIu3ucDMmye0n6IWOaSnxIRL5W2fNoUQ==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint/binding-openharmony-arm64@1.46.0':
-    resolution: {integrity: sha512-jtbqUyEXlsDlRmMtTZqNbw49+1V/WxqNAR5l0S3OEkdat9diI5I+eqq9IT+jb5cSDdszTGcXpn7S3+gUYSydxQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@oxlint/binding-win32-arm64-msvc@1.46.0':
-    resolution: {integrity: sha512-EE8NjpqEZPwHQVigNvdyJ11dZwWIfsfn4VeBAuiJeAdrnY4HFX27mIjJINJgP5ZdBYEFV1OWH/eb9fURCYel8w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/win32-arm64@1.33.0':
+    resolution: {integrity: sha512-wKKFt7cubfrLelNzdmDsNSmtBrlSUe1fWus587+uSxDZdpFbQ7liU0gsUlCbcHvym0H1Tc2O3K3cnLrgQORLPQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint/binding-win32-ia32-msvc@1.46.0':
-    resolution: {integrity: sha512-BHyk3H/HRdXs+uImGZ/2+qCET+B8lwGHOm7m54JiJEEUWf3zYCFX/Df1SPqtozWWmnBvioxoTG1J3mPRAr8KUA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxlint/binding-win32-x64-msvc@1.46.0':
-    resolution: {integrity: sha512-DJbQsSJUr4KSi9uU0QqOgI7PX2C+fKGZX+YDprt3vM2sC0dWZsgVTLoN2vtkNyEWJSY2mnvRFUshWXT3bmo0Ug==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@oxlint/win32-x64@1.33.0':
+    resolution: {integrity: sha512-ReyR8rNHjKNnO7dxGny9RCPELRAdhm3y780FNBcA07E1wvxSCkB+Mn5db0Pa5bRmxrsU/MTZ/aaBFa+ERXDdXw==}
     cpu: [x64]
     os: [win32]
 
@@ -6998,21 +6842,21 @@ packages:
   oxc-resolver@11.15.0:
     resolution: {integrity: sha512-Hk2J8QMYwmIO9XTCUiOH00+Xk2/+aBxRUnhrSlANDyCnLYc32R1WSIq1sU2yEdlqd53FfMpPEpnBYIKQMzliJw==}
 
-  oxfmt@0.31.0:
-    resolution: {integrity: sha512-ukl7nojEuJUGbqR4ijC0Z/7a6BYpD4RxLS2UsyJKgbeZfx6TNrsa48veG0z2yQbhTx1nVnes4GIcqMn7n2jFtw==}
+  oxfmt@0.26.0:
+    resolution: {integrity: sha512-UDD1wFNwfeorMm2ZY0xy1KRAAvJ5NjKBfbDmiMwGP7baEHTq65cYpC0aPP+BGHc8weXUbSZaK8MdGyvuRUvS4Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  oxlint-tsgolint@0.11.5:
-    resolution: {integrity: sha512-4uVv43EhkeMvlxDU1GUsR5P5c0q74rB/pQRhjGsTOnMIrDbg3TABTntRyeAkmXItqVEJTcDRv9+Yk+LFXkHKlg==}
+  oxlint-tsgolint@0.9.1:
+    resolution: {integrity: sha512-w1lIvUDkkiAPFyo268SFGrdh1LQ3Lcs1XShES7I4X75TliQA0os5XJ5hNZ4lYsSevqcofgEtq4xq7rBumv69iQ==}
     hasBin: true
 
-  oxlint@1.46.0:
-    resolution: {integrity: sha512-I9h42QDtAVsRwoueJ4PL/7qN5jFzIUXvbO4Z5ddtII92ZCiD7uiS/JW2V4viBSfGLsbZkQp3YEs6Ls4I8q+8tA==}
+  oxlint@1.33.0:
+    resolution: {integrity: sha512-4WCL0K8jiOshwJ8WrVk35VAuVaZHC0iX6asjKsrENOrynkAAGcTLLx0Urf0eXZ1Tq7r+qAe3Z9EyHMFPzVyUkg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
-      oxlint-tsgolint: '>=0.11.2'
+      oxlint-tsgolint: '>=0.9.0'
     peerDependenciesMeta:
       oxlint-tsgolint:
         optional: true
@@ -7603,11 +7447,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.4:
-    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -7918,8 +7757,8 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
-  tinypool@2.1.0:
-    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+  tinypool@2.0.0:
+    resolution: {integrity: sha512-/RX9RzeH2xU5ADE7n2Ykvmi9ED3FBGPAjw9u3zucrNNaEBIO0HPSYgL0NT7+3p147ojeSdaVu08F6hjpv31HJg==}
     engines: {node: ^20.0.0 || >=22.0.0}
 
   tinyrainbow@2.0.0:
@@ -10887,136 +10726,70 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.15.0':
     optional: true
 
-  '@oxfmt/binding-android-arm-eabi@0.31.0':
+  '@oxfmt/darwin-arm64@0.26.0':
     optional: true
 
-  '@oxfmt/binding-android-arm64@0.31.0':
+  '@oxfmt/darwin-x64@0.26.0':
     optional: true
 
-  '@oxfmt/binding-darwin-arm64@0.31.0':
+  '@oxfmt/linux-arm64-gnu@0.26.0':
     optional: true
 
-  '@oxfmt/binding-darwin-x64@0.31.0':
+  '@oxfmt/linux-arm64-musl@0.26.0':
     optional: true
 
-  '@oxfmt/binding-freebsd-x64@0.31.0':
+  '@oxfmt/linux-x64-gnu@0.26.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.31.0':
+  '@oxfmt/linux-x64-musl@0.26.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.31.0':
+  '@oxfmt/win32-arm64@0.26.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-gnu@0.31.0':
+  '@oxfmt/win32-x64@0.26.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-musl@0.31.0':
+  '@oxlint-tsgolint/darwin-arm64@0.9.1':
     optional: true
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.31.0':
+  '@oxlint-tsgolint/darwin-x64@0.9.1':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.31.0':
+  '@oxlint-tsgolint/linux-arm64@0.9.1':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-musl@0.31.0':
+  '@oxlint-tsgolint/linux-x64@0.9.1':
     optional: true
 
-  '@oxfmt/binding-linux-s390x-gnu@0.31.0':
+  '@oxlint-tsgolint/win32-arm64@0.9.1':
     optional: true
 
-  '@oxfmt/binding-linux-x64-gnu@0.31.0':
+  '@oxlint-tsgolint/win32-x64@0.9.1':
     optional: true
 
-  '@oxfmt/binding-linux-x64-musl@0.31.0':
+  '@oxlint/darwin-arm64@1.33.0':
     optional: true
 
-  '@oxfmt/binding-openharmony-arm64@0.31.0':
+  '@oxlint/darwin-x64@1.33.0':
     optional: true
 
-  '@oxfmt/binding-win32-arm64-msvc@0.31.0':
+  '@oxlint/linux-arm64-gnu@1.33.0':
     optional: true
 
-  '@oxfmt/binding-win32-ia32-msvc@0.31.0':
+  '@oxlint/linux-arm64-musl@1.33.0':
     optional: true
 
-  '@oxfmt/binding-win32-x64-msvc@0.31.0':
+  '@oxlint/linux-x64-gnu@1.33.0':
     optional: true
 
-  '@oxlint-tsgolint/darwin-arm64@0.11.5':
+  '@oxlint/linux-x64-musl@1.33.0':
     optional: true
 
-  '@oxlint-tsgolint/darwin-x64@0.11.5':
+  '@oxlint/win32-arm64@1.33.0':
     optional: true
 
-  '@oxlint-tsgolint/linux-arm64@0.11.5':
-    optional: true
-
-  '@oxlint-tsgolint/linux-x64@0.11.5':
-    optional: true
-
-  '@oxlint-tsgolint/win32-arm64@0.11.5':
-    optional: true
-
-  '@oxlint-tsgolint/win32-x64@0.11.5':
-    optional: true
-
-  '@oxlint/binding-android-arm-eabi@1.46.0':
-    optional: true
-
-  '@oxlint/binding-android-arm64@1.46.0':
-    optional: true
-
-  '@oxlint/binding-darwin-arm64@1.46.0':
-    optional: true
-
-  '@oxlint/binding-darwin-x64@1.46.0':
-    optional: true
-
-  '@oxlint/binding-freebsd-x64@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm-gnueabihf@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm-musleabihf@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm64-gnu@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-arm64-musl@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-ppc64-gnu@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-riscv64-gnu@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-riscv64-musl@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-s390x-gnu@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-x64-gnu@1.46.0':
-    optional: true
-
-  '@oxlint/binding-linux-x64-musl@1.46.0':
-    optional: true
-
-  '@oxlint/binding-openharmony-arm64@1.46.0':
-    optional: true
-
-  '@oxlint/binding-win32-arm64-msvc@1.46.0':
-    optional: true
-
-  '@oxlint/binding-win32-ia32-msvc@1.46.0':
-    optional: true
-
-  '@oxlint/binding-win32-x64-msvc@1.46.0':
+  '@oxlint/win32-x64@1.33.0':
     optional: true
 
   '@phenomnomnominal/tsquery@5.0.1(typescript@5.9.3)':
@@ -14716,7 +14489,7 @@ snapshots:
       acorn: 8.15.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      semver: 7.7.4
+      semver: 7.7.3
 
   jsonc-parser@3.2.0: {}
 
@@ -15739,61 +15512,39 @@ snapshots:
       '@oxc-resolver/binding-win32-ia32-msvc': 11.15.0
       '@oxc-resolver/binding-win32-x64-msvc': 11.15.0
 
-  oxfmt@0.31.0:
+  oxfmt@0.26.0:
     dependencies:
-      tinypool: 2.1.0
+      tinypool: 2.0.0
     optionalDependencies:
-      '@oxfmt/binding-android-arm-eabi': 0.31.0
-      '@oxfmt/binding-android-arm64': 0.31.0
-      '@oxfmt/binding-darwin-arm64': 0.31.0
-      '@oxfmt/binding-darwin-x64': 0.31.0
-      '@oxfmt/binding-freebsd-x64': 0.31.0
-      '@oxfmt/binding-linux-arm-gnueabihf': 0.31.0
-      '@oxfmt/binding-linux-arm-musleabihf': 0.31.0
-      '@oxfmt/binding-linux-arm64-gnu': 0.31.0
-      '@oxfmt/binding-linux-arm64-musl': 0.31.0
-      '@oxfmt/binding-linux-ppc64-gnu': 0.31.0
-      '@oxfmt/binding-linux-riscv64-gnu': 0.31.0
-      '@oxfmt/binding-linux-riscv64-musl': 0.31.0
-      '@oxfmt/binding-linux-s390x-gnu': 0.31.0
-      '@oxfmt/binding-linux-x64-gnu': 0.31.0
-      '@oxfmt/binding-linux-x64-musl': 0.31.0
-      '@oxfmt/binding-openharmony-arm64': 0.31.0
-      '@oxfmt/binding-win32-arm64-msvc': 0.31.0
-      '@oxfmt/binding-win32-ia32-msvc': 0.31.0
-      '@oxfmt/binding-win32-x64-msvc': 0.31.0
+      '@oxfmt/darwin-arm64': 0.26.0
+      '@oxfmt/darwin-x64': 0.26.0
+      '@oxfmt/linux-arm64-gnu': 0.26.0
+      '@oxfmt/linux-arm64-musl': 0.26.0
+      '@oxfmt/linux-x64-gnu': 0.26.0
+      '@oxfmt/linux-x64-musl': 0.26.0
+      '@oxfmt/win32-arm64': 0.26.0
+      '@oxfmt/win32-x64': 0.26.0
 
-  oxlint-tsgolint@0.11.5:
+  oxlint-tsgolint@0.9.1:
     optionalDependencies:
-      '@oxlint-tsgolint/darwin-arm64': 0.11.5
-      '@oxlint-tsgolint/darwin-x64': 0.11.5
-      '@oxlint-tsgolint/linux-arm64': 0.11.5
-      '@oxlint-tsgolint/linux-x64': 0.11.5
-      '@oxlint-tsgolint/win32-arm64': 0.11.5
-      '@oxlint-tsgolint/win32-x64': 0.11.5
+      '@oxlint-tsgolint/darwin-arm64': 0.9.1
+      '@oxlint-tsgolint/darwin-x64': 0.9.1
+      '@oxlint-tsgolint/linux-arm64': 0.9.1
+      '@oxlint-tsgolint/linux-x64': 0.9.1
+      '@oxlint-tsgolint/win32-arm64': 0.9.1
+      '@oxlint-tsgolint/win32-x64': 0.9.1
 
-  oxlint@1.46.0(oxlint-tsgolint@0.11.5):
+  oxlint@1.33.0(oxlint-tsgolint@0.9.1):
     optionalDependencies:
-      '@oxlint/binding-android-arm-eabi': 1.46.0
-      '@oxlint/binding-android-arm64': 1.46.0
-      '@oxlint/binding-darwin-arm64': 1.46.0
-      '@oxlint/binding-darwin-x64': 1.46.0
-      '@oxlint/binding-freebsd-x64': 1.46.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.46.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.46.0
-      '@oxlint/binding-linux-arm64-gnu': 1.46.0
-      '@oxlint/binding-linux-arm64-musl': 1.46.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.46.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.46.0
-      '@oxlint/binding-linux-riscv64-musl': 1.46.0
-      '@oxlint/binding-linux-s390x-gnu': 1.46.0
-      '@oxlint/binding-linux-x64-gnu': 1.46.0
-      '@oxlint/binding-linux-x64-musl': 1.46.0
-      '@oxlint/binding-openharmony-arm64': 1.46.0
-      '@oxlint/binding-win32-arm64-msvc': 1.46.0
-      '@oxlint/binding-win32-ia32-msvc': 1.46.0
-      '@oxlint/binding-win32-x64-msvc': 1.46.0
-      oxlint-tsgolint: 0.11.5
+      '@oxlint/darwin-arm64': 1.33.0
+      '@oxlint/darwin-x64': 1.33.0
+      '@oxlint/linux-arm64-gnu': 1.33.0
+      '@oxlint/linux-arm64-musl': 1.33.0
+      '@oxlint/linux-x64-gnu': 1.33.0
+      '@oxlint/linux-x64-musl': 1.33.0
+      '@oxlint/win32-arm64': 1.33.0
+      '@oxlint/win32-x64': 1.33.0
+      oxlint-tsgolint: 0.9.1
 
   p-limit@3.1.0:
     dependencies:
@@ -16531,8 +16282,6 @@ snapshots:
 
   semver@7.7.3: {}
 
-  semver@7.7.4: {}
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -16933,7 +16682,7 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
-  tinypool@2.1.0: {}
+  tinypool@2.0.0: {}
 
   tinyrainbow@2.0.0: {}
 

pnpm-workspace.yaml

@@ -69,9 +69,9 @@ catalog:
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.2.6
-  oxfmt: ^0.31.0
-  oxlint: ^1.46.0
-  oxlint-tsgolint: ^0.11.5
+  oxfmt: ^0.26.0
+  oxlint: ^1.33.0
+  oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0

scripts/cicd/check-json.sh

@@ -33,7 +33,6 @@ fi
 
 EXCLUDE_PATTERNS=(
   '**/tsconfig*.json'
-  '.oxlintrc.json'
 )
 
 if [ -n "${JSON_LINT_EXCLUDES:-}" ]; then

src/App.vue

@@ -16,12 +16,12 @@ import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
-import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 import { electronAPI } from '@/utils/envUtil'
 import { isDesktop } from '@/platform/distribution/types'
+import { app } from '@/scripts/app'
 
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()

src/base/common/downloadUtil.test.ts

@@ -49,7 +49,7 @@ describe('downloadUtil', () => {
     vi.unstubAllGlobals()
   })
 
-  describe(downloadFile, () => {
+  describe('downloadFile', () => {
     it('should create and trigger download with basic URL', () => {
       const testUrl = 'https://example.com/image.png'
 
@@ -285,7 +285,7 @@ describe('downloadUtil', () => {
     })
   })
 
-  describe(extractFilenameFromContentDisposition, () => {
+  describe('extractFilenameFromContentDisposition', () => {
     it('returns null for null header', () => {
       expect(extractFilenameFromContentDisposition(null)).toBeNull()
     })

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -172,17 +172,19 @@ const splitterRefreshKey = computed(() => {
   return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}-${sidebarLocation.value}`
 })
 
-const firstPanelStyle = computed(() =>
-  sidebarLocation.value === 'left'
-    ? { display: sidebarPanelVisible.value ? 'flex' : 'none' }
-    : undefined
-)
+const firstPanelStyle = computed(() => {
+  if (sidebarLocation.value === 'left') {
+    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
+  }
+  return undefined
+})
 
-const lastPanelStyle = computed(() =>
-  sidebarLocation.value === 'right'
-    ? { display: sidebarPanelVisible.value ? 'flex' : 'none' }
-    : undefined
-)
+const lastPanelStyle = computed(() => {
+  if (sidebarLocation.value === 'right') {
+    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
+  }
+  return undefined
+})
 </script>
 
 <style scoped>

src/components/TopMenuSection.test.ts

@@ -2,11 +2,12 @@ import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, defineComponent, h, nextTick, onMounted } from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted, ref } from 'vue'
 import type { Component } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
+import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import type {
@@ -19,7 +20,11 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
-const mockData = vi.hoisted(() => ({ isLoggedIn: false, isDesktop: false }))
+const mockData = vi.hoisted(() => ({
+  isLoggedIn: false,
+  isDesktop: false,
+  setShowConflictRedDot: (_value: boolean) => {}
+}))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => {
@@ -36,6 +41,36 @@ vi.mock('@/platform/distribution/types', () => ({
     return mockData.isDesktop
   }
 }))
+
+vi.mock('@/platform/updates/common/releaseStore', () => ({
+  useReleaseStore: () => ({
+    shouldShowRedDot: computed(() => true)
+  })
+}))
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/useConflictAcknowledgment',
+  () => {
+    const shouldShowConflictRedDot = ref(false)
+    mockData.setShowConflictRedDot = (value: boolean) => {
+      shouldShowConflictRedDot.value = value
+    }
+
+    return {
+      useConflictAcknowledgment: () => ({
+        shouldShowRedDot: shouldShowConflictRedDot
+      })
+    }
+  }
+)
+
+vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
+  useManagerState: () => ({
+    shouldShowManagerButtons: computed(() => true),
+    openManager: vi.fn()
+  })
+}))
+
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
     currentUser: null,
@@ -79,6 +114,7 @@ function createWrapper({
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
         QueueInlineProgressSummary: true,
+        QueueNotificationBannerHost: true,
         CurrentUserButton: true,
         LoginButton: true,
         ContextMenu: {
@@ -108,12 +144,25 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
   return new TaskItemImpl(createJob(id, status))
 }
 
-describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
+function createComfyActionbarStub(actionbarTarget: HTMLElement) {
+  return defineComponent({
+    name: 'ComfyActionbar',
+    setup(_, { emit }) {
+      onMounted(() => {
+        emit('update:progressTarget', actionbarTarget)
+      })
+      return () => h('div')
+    }
+  })
+}
+
+describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     localStorage.clear()
     mockData.isDesktop = false
     mockData.isLoggedIn = false
+    mockData.setShowConflictRedDot(false)
   })
 
   describe('authentication state', () => {
@@ -166,6 +215,17 @@ describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
 
     const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
     expect(queueButton.text()).toContain('3 active')
+    expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
+      true
+    )
+  })
+
+  it('hides the active jobs indicator when no jobs are active', () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
+      false
+    )
   })
 
   it('hides queue progress overlay when QPO V2 is enabled', async () => {
@@ -242,7 +302,7 @@ describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
       vi.mocked(settingStore.get).mockImplementation((key) => {
         if (key === 'Comfy.Queue.QPOV2') return qpoV2Enabled
         if (key === 'Comfy.UseNewMenu') return 'Top'
-        return
+        return undefined
       })
     }
 
@@ -281,15 +341,7 @@ describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
       const executionStore = useExecutionStore(pinia)
       executionStore.activePromptId = 'prompt-1'
 
-      const ComfyActionbarStub = defineComponent({
-        name: 'ComfyActionbar',
-        setup(_, { emit }) {
-          onMounted(() => {
-            emit('update:progressTarget', actionbarTarget)
-          })
-          return () => h('div')
-        }
-      })
+      const ComfyActionbarStub = createComfyActionbarStub(actionbarTarget)
 
       const wrapper = createWrapper({
         pinia,
@@ -311,6 +363,103 @@ describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
     })
   })
 
+  describe(QueueNotificationBannerHost, () => {
+    const configureSettings = (
+      pinia: ReturnType<typeof createTestingPinia>,
+      qpoV2Enabled: boolean
+    ) => {
+      const settingStore = useSettingStore(pinia)
+      vi.mocked(settingStore.get).mockImplementation((key) => {
+        if (key === 'Comfy.Queue.QPOV2') return qpoV2Enabled
+        if (key === 'Comfy.UseNewMenu') return 'Top'
+        return undefined
+      })
+    }
+
+    it('renders queue notification banners when QPO V2 is enabled', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true)
+
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      expect(
+        wrapper.findComponent({ name: 'QueueNotificationBannerHost' }).exists()
+      ).toBe(true)
+    })
+
+    it('renders queue notification banners when QPO V2 is disabled', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, false)
+
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      expect(
+        wrapper.findComponent({ name: 'QueueNotificationBannerHost' }).exists()
+      ).toBe(true)
+    })
+
+    it('renders inline summary above banners when both are visible', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true)
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      const html = wrapper.html()
+      const inlineSummaryIndex = html.indexOf(
+        'queue-inline-progress-summary-stub'
+      )
+      const queueBannerIndex = html.indexOf(
+        'queue-notification-banner-host-stub'
+      )
+
+      expect(inlineSummaryIndex).toBeGreaterThan(-1)
+      expect(queueBannerIndex).toBeGreaterThan(-1)
+      expect(inlineSummaryIndex).toBeLessThan(queueBannerIndex)
+    })
+
+    it('does not teleport queue notification banners when actionbar is floating', async () => {
+      localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
+      const actionbarTarget = document.createElement('div')
+      document.body.appendChild(actionbarTarget)
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true)
+      const executionStore = useExecutionStore(pinia)
+      executionStore.activePromptId = 'prompt-1'
+
+      const ComfyActionbarStub = createComfyActionbarStub(actionbarTarget)
+
+      const wrapper = createWrapper({
+        pinia,
+        attachTo: document.body,
+        stubs: {
+          ComfyActionbar: ComfyActionbarStub,
+          QueueNotificationBannerHost: true
+        }
+      })
+
+      try {
+        await nextTick()
+
+        expect(
+          actionbarTarget.querySelector('queue-notification-banner-host-stub')
+        ).toBeNull()
+        expect(
+          wrapper
+            .findComponent({ name: 'QueueNotificationBannerHost' })
+            .exists()
+        ).toBe(true)
+      } finally {
+        wrapper.unmount()
+        actionbarTarget.remove()
+      }
+    })
+  })
+
   it('disables the clear queue context menu item when no queued jobs exist', () => {
     const wrapper = createWrapper()
     const menu = wrapper.findComponent({ name: 'ContextMenu' })
@@ -330,4 +479,16 @@ describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
     const model = menu.props('model') as MenuItem[]
     expect(model[0]?.disabled).toBe(false)
   })
+
+  it('shows manager red dot only for manager conflicts', async () => {
+    const wrapper = createWrapper()
+
+    // Release red dot is mocked as true globally for this test file.
+    expect(wrapper.find('span.bg-red-500').exists()).toBe(false)
+
+    mockData.setShowConflictRedDot(true)
+    await nextTick()
+
+    expect(wrapper.find('span.bg-red-500').exists()).toBe(true)
+  })
 })

src/components/TopMenuSection.vue

@@ -36,7 +36,14 @@
 
           <div
             ref="actionbarContainerRef"
-            class="actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+            :class="
+              cn(
+                'actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                hasAnyError
+                  ? 'border-destructive-background-hover'
+                  : 'border-interface-stroke'
+              )
+            "
           >
             <ActionBarButtons />
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
@@ -60,7 +67,7 @@
                     ? isQueueOverlayExpanded
                     : undefined
               "
-              class="px-3"
+              class="relative px-3"
               data-testid="queue-overlay-toggle"
               @click="toggleQueueOverlay"
               @contextmenu.stop.prevent="showQueueContextMenu"
@@ -68,6 +75,12 @@
               <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
@@ -105,7 +118,7 @@
       </div>
     </div>
 
-    <div>
+    <div class="flex flex-col items-end gap-1">
       <Teleport
         v-if="inlineProgressSummaryTarget"
         :to="inlineProgressSummaryTarget"
@@ -121,6 +134,10 @@
         class="pr-1"
         :hidden="isQueueOverlayExpanded"
       />
+      <QueueNotificationBannerHost
+        v-if="shouldShowQueueNotificationBanners"
+        class="pr-1"
+      />
     </div>
   </div>
 </template>
@@ -135,7 +152,9 @@ 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'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
@@ -145,7 +164,6 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -157,6 +175,7 @@ import { isDesktop } from '@/platform/distribution/types'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
@@ -173,8 +192,6 @@ const sidebarTabStore = useSidebarTabStore()
 const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
-const releaseStore = useReleaseStore()
-const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
@@ -207,6 +224,9 @@ const isQueueProgressOverlayEnabled = computed(
 const shouldShowInlineProgressSummary = computed(
   () => isQueuePanelV2Enabled.value && isActionbarEnabled.value
 )
+const shouldShowQueueNotificationBanners = computed(
+  () => isActionbarEnabled.value
+)
 const progressTarget = ref<HTMLElement | null>(null)
 function updateProgressTarget(target: HTMLElement | null) {
   progressTarget.value = target
@@ -236,12 +256,12 @@ const queueContextMenuItems = computed<MenuItem[]>(() => [
   }
 ])
 
-// Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
-  const releaseRedDot = showReleaseRedDot.value
-  return releaseRedDot || shouldShowConflictRedDot.value
+  return shouldShowConflictRedDot.value
 })
 
+const { hasAnyError } = storeToRefs(executionStore)
+
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
 const rightSidePanelTooltipConfig = computed(() =>
@@ -287,8 +307,9 @@ const openCustomNodeManager = async () => {
   } catch (error) {
     try {
       toastErrorHandler(error)
-    } catch (error) {
+    } catch (toastError) {
       console.error(error)
+      console.error(toastError)
     }
   }
 }

src/components/bottomPanel/BottomPanel.vue

@@ -89,12 +89,12 @@ import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 const bottomPanelStore = useBottomPanelStore()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()
 const { t } = useI18n()
 
 const isShortcutsTabActive = computed(() => {
@@ -115,7 +115,7 @@ const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
 }
 
 const openKeybindingSettings = async () => {
-  dialogService.showSettingsDialog('keybinding')
+  settingsDialog.show('keybinding')
 }
 
 const closeBottomPanel = () => {

src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts

@@ -51,7 +51,7 @@ vi.mock('@/stores/commandStore', () => ({
   })
 }))
 
-describe(EssentialsPanel.__name ?? 'EssentialsPanel', () => {
+describe('EssentialsPanel', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts

@@ -23,7 +23,7 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
-describe(ShortcutsList.__name ?? 'ShortcutsList', () => {
+describe('ShortcutsList', () => {
   const mockCommands: ComfyCommandImpl[] = [
     {
       id: 'Workflow.New',

src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -106,7 +106,7 @@ const mountBaseTerminal = () => {
   })
 }
 
-describe(BaseTerminal.__name ?? 'BaseTerminal', () => {
+describe('BaseTerminal', () => {
   let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
 
   beforeEach(() => {

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -62,8 +62,8 @@ const terminalCreated = (
   onMounted(async () => {
     try {
       await loadLogEntries()
-    } catch (error) {
-      console.error('Error loading logs', error)
+    } catch (err) {
+      console.error('Error loading logs', err)
       // On older backends the endpoints won't exist
       errorMessage.value =
         'Unable to load logs, please ensure you have updated your ComfyUI backend.'

src/components/boundingbox/WidgetBoundingBox.vue

@@ -3,49 +3,26 @@
     <label class="content-center text-xs text-node-component-slot-text">
       {{ $t('boundingBox.x') }}
     </label>
-    <input
-      v-model.number="x"
-      type="number"
-      :min="0"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
+    <ScrubableNumberInput v-model="x" :min="0" :step="1" />
     <label class="content-center text-xs text-node-component-slot-text">
       {{ $t('boundingBox.y') }}
     </label>
-    <input
-      v-model.number="y"
-      type="number"
-      :min="0"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
+    <ScrubableNumberInput v-model="y" :min="0" :step="1" />
     <label class="content-center text-xs text-node-component-slot-text">
       {{ $t('boundingBox.width') }}
     </label>
-    <input
-      v-model.number="width"
-      type="number"
-      :min="1"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
+    <ScrubableNumberInput v-model="width" :min="1" :step="1" />
     <label class="content-center text-xs text-node-component-slot-text">
       {{ $t('boundingBox.height') }}
     </label>
-    <input
-      v-model.number="height"
-      type="number"
-      :min="1"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
+    <ScrubableNumberInput v-model="height" :min="1" :step="1" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import type { Bounds } from '@/renderer/core/layout/types'
 
 const modelValue = defineModel<Bounds>({

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -78,7 +78,9 @@ interface Props {
   isActive?: boolean
 }
 
-const { item, isActive = false } = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+})
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
@@ -101,7 +103,7 @@ const rename = async (
 ) => {
   if (newName && newName !== initialName) {
     // Synchronize the node titles with the new name
-    item.updateTitle?.(newName)
+    props.item.updateTitle?.(newName)
 
     if (workflowStore.activeSubgraph) {
       workflowStore.activeSubgraph.name = newName
@@ -125,13 +127,13 @@ const rename = async (
   }
 }
 
-const isRoot = item.key === 'root'
+const isRoot = props.item.key === 'root'
 
 const tooltipText = computed(() => {
   if (hasMissingNodes.value && isRoot) {
     return t('breadcrumbsMenu.missingNodesWarning')
   }
-  return item.label
+  return props.item.label
 })
 
 const startRename = async () => {
@@ -143,7 +145,7 @@ const startRename = async () => {
   }
 
   isEditing.value = true
-  itemLabel.value = item.label as string
+  itemLabel.value = props.item.label as string
   void nextTick(() => {
     if (itemInputRef.value?.$el) {
       itemInputRef.value.$el.focus()
@@ -163,12 +165,12 @@ const handleClick = (event: MouseEvent) => {
   }
 
   if (event.detail === 1) {
-    if (isActive) {
+    if (props.isActive) {
       menu.value?.toggle(event)
     } else {
-      item.command?.({ item, originalEvent: event })
+      props.item.command?.({ item: props.item, originalEvent: event })
     }
-  } else if (isActive && event.detail === 2) {
+  } else if (props.isActive && event.detail === 2) {
     menu.value?.hide()
     event.stopPropagation()
     event.preventDefault()
@@ -178,7 +180,7 @@ const handleClick = (event: MouseEvent) => {
 
 const inputBlur = async (doRename: boolean) => {
   if (doRename) {
-    await rename(itemLabel.value, item.label as string)
+    await rename(itemLabel.value, props.item.label as string)
   }
 
   isEditing.value = false

src/components/common/ColorCustomizationSelector.test.ts

@@ -7,128 +7,123 @@ import { createApp, nextTick } from 'vue'
 
 import ColorCustomizationSelector from './ColorCustomizationSelector.vue'
 
-describe(
-  ColorCustomizationSelector.__name ?? 'ColorCustomizationSelector',
-  () => {
-    const colorOptions = [
-      { name: 'Blue', value: '#0d6efd' },
-      { name: 'Green', value: '#28a745' }
-    ]
+describe('ColorCustomizationSelector', () => {
+  const colorOptions = [
+    { name: 'Blue', value: '#0d6efd' },
+    { name: 'Green', value: '#28a745' }
+  ]
 
-    beforeEach(() => {
-      // Setup PrimeVue
-      const app = createApp({})
-      app.use(PrimeVue)
-    })
+  beforeEach(() => {
+    // Setup PrimeVue
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
 
-    const mountComponent = (props = {}) => {
-      return mount(ColorCustomizationSelector, {
-        global: {
-          plugins: [PrimeVue],
-          components: { SelectButton, ColorPicker }
-        },
-        props: {
-          modelValue: null,
-          colorOptions,
-          ...props
-        }
-      })
-    }
-
-    it('renders predefined color options and custom option', () => {
-      const wrapper = mountComponent()
-      const selectButton = wrapper.findComponent(SelectButton)
-
-      expect(selectButton.props('options')).toHaveLength(
-        colorOptions.length + 1
-      )
-      expect(selectButton.props('options')?.at(-1)?.name).toBe('_custom')
-    })
-
-    it('initializes with predefined color when provided', async () => {
-      const wrapper = mountComponent({
-        modelValue: '#0d6efd'
-      })
-
-      await nextTick()
-      const selectButton = wrapper.findComponent(SelectButton)
-      expect(selectButton.props('modelValue')).toEqual({
-        name: 'Blue',
-        value: '#0d6efd'
-      })
-    })
-
-    it('initializes with custom color when non-predefined color provided', async () => {
-      const wrapper = mountComponent({
-        modelValue: '#123456'
-      })
-
-      await nextTick()
-      const selectButton = wrapper.findComponent(SelectButton)
-      const colorPicker = wrapper.findComponent(ColorPicker)
-
-      expect(selectButton.props('modelValue').name).toBe('_custom')
-      expect(colorPicker.props('modelValue')).toBe('123456')
-    })
-
-    it('shows color picker when custom option is selected', async () => {
-      const wrapper = mountComponent()
-      const selectButton = wrapper.findComponent(SelectButton)
-
-      // Select custom option
-      await selectButton.setValue({ name: '_custom', value: '' })
-
-      expect(wrapper.findComponent(ColorPicker).exists()).toBe(true)
-    })
-
-    it('emits update when predefined color is selected', async () => {
-      const wrapper = mountComponent()
-      const selectButton = wrapper.findComponent(SelectButton)
-
-      await selectButton.setValue(colorOptions[0])
-
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#0d6efd'])
-    })
-
-    it('emits update when custom color is changed', async () => {
-      const wrapper = mountComponent()
-      const selectButton = wrapper.findComponent(SelectButton)
-
-      // Select custom option
-      await selectButton.setValue({ name: '_custom', value: '' })
-
-      // Change custom color
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      await colorPicker.setValue('ff0000')
-
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#ff0000'])
-    })
-
-    it('inherits color from previous selection when switching to custom', async () => {
-      const wrapper = mountComponent()
-      const selectButton = wrapper.findComponent(SelectButton)
-
-      // First select a predefined color
-      await selectButton.setValue(colorOptions[0])
-
-      // Then switch to custom
-      await selectButton.setValue({ name: '_custom', value: '' })
-
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      expect(colorPicker.props('modelValue')).toBe('0d6efd')
-    })
-
-    it('handles null modelValue correctly', async () => {
-      const wrapper = mountComponent({
-        modelValue: null
-      })
-
-      await nextTick()
-      const selectButton = wrapper.findComponent(SelectButton)
-      expect(selectButton.props('modelValue')).toEqual({
-        name: '_custom',
-        value: ''
-      })
+  const mountComponent = (props = {}) => {
+    return mount(ColorCustomizationSelector, {
+      global: {
+        plugins: [PrimeVue],
+        components: { SelectButton, ColorPicker }
+      },
+      props: {
+        modelValue: null,
+        colorOptions,
+        ...props
+      }
     })
   }
-)
+
+  it('renders predefined color options and custom option', () => {
+    const wrapper = mountComponent()
+    const selectButton = wrapper.findComponent(SelectButton)
+
+    expect(selectButton.props('options')).toHaveLength(colorOptions.length + 1)
+    expect(selectButton.props('options')?.at(-1)?.name).toBe('_custom')
+  })
+
+  it('initializes with predefined color when provided', async () => {
+    const wrapper = mountComponent({
+      modelValue: '#0d6efd'
+    })
+
+    await nextTick()
+    const selectButton = wrapper.findComponent(SelectButton)
+    expect(selectButton.props('modelValue')).toEqual({
+      name: 'Blue',
+      value: '#0d6efd'
+    })
+  })
+
+  it('initializes with custom color when non-predefined color provided', async () => {
+    const wrapper = mountComponent({
+      modelValue: '#123456'
+    })
+
+    await nextTick()
+    const selectButton = wrapper.findComponent(SelectButton)
+    const colorPicker = wrapper.findComponent(ColorPicker)
+
+    expect(selectButton.props('modelValue').name).toBe('_custom')
+    expect(colorPicker.props('modelValue')).toBe('123456')
+  })
+
+  it('shows color picker when custom option is selected', async () => {
+    const wrapper = mountComponent()
+    const selectButton = wrapper.findComponent(SelectButton)
+
+    // Select custom option
+    await selectButton.setValue({ name: '_custom', value: '' })
+
+    expect(wrapper.findComponent(ColorPicker).exists()).toBe(true)
+  })
+
+  it('emits update when predefined color is selected', async () => {
+    const wrapper = mountComponent()
+    const selectButton = wrapper.findComponent(SelectButton)
+
+    await selectButton.setValue(colorOptions[0])
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#0d6efd'])
+  })
+
+  it('emits update when custom color is changed', async () => {
+    const wrapper = mountComponent()
+    const selectButton = wrapper.findComponent(SelectButton)
+
+    // Select custom option
+    await selectButton.setValue({ name: '_custom', value: '' })
+
+    // Change custom color
+    const colorPicker = wrapper.findComponent(ColorPicker)
+    await colorPicker.setValue('ff0000')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#ff0000'])
+  })
+
+  it('inherits color from previous selection when switching to custom', async () => {
+    const wrapper = mountComponent()
+    const selectButton = wrapper.findComponent(SelectButton)
+
+    // First select a predefined color
+    await selectButton.setValue(colorOptions[0])
+
+    // Then switch to custom
+    await selectButton.setValue({ name: '_custom', value: '' })
+
+    const colorPicker = wrapper.findComponent(ColorPicker)
+    expect(colorPicker.props('modelValue')).toBe('0d6efd')
+  })
+
+  it('handles null modelValue correctly', async () => {
+    const wrapper = mountComponent({
+      modelValue: null
+    })
+
+    await nextTick()
+    const selectButton = wrapper.findComponent(SelectButton)
+    expect(selectButton.props('modelValue')).toEqual({
+      name: '_custom',
+      value: ''
+    })
+  })
+})

src/components/common/CustomFormValue.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 
-const { renderFunction } = defineProps<{
+const props = defineProps<{
   renderFunction: () => HTMLElement
 }>()
 
@@ -14,12 +14,12 @@ const container = ref<HTMLElement | null>(null)
 function renderContent() {
   if (container.value) {
     container.value.innerHTML = ''
-    const element = renderFunction()
+    const element = props.renderFunction()
     container.value.appendChild(element)
   }
 }
 
 onMounted(renderContent)
 
-watch(() => renderFunction, renderContent)
+watch(() => props.renderFunction, renderContent)
 </script>

src/components/common/CustomizationDialog.vue

@@ -52,7 +52,7 @@ import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const { t } = useI18n()
 
-const { modelValue, initialIcon, initialColor } = defineProps<{
+const props = defineProps<{
   modelValue: boolean
   initialIcon?: string
   initialColor?: string
@@ -64,7 +64,7 @@ const emit = defineEmits<{
 }>()
 
 const visible = computed({
-  get: () => modelValue,
+  get: () => props.modelValue,
   set: (value) => emit('update:modelValue', value)
 })
 
@@ -96,13 +96,17 @@ const defaultIcon = iconOptions.find(
 
 // @ts-expect-error fixme ts strict error
 const selectedIcon = ref<{ name: string; value: string }>(defaultIcon)
-const finalColor = ref(initialColor || nodeBookmarkStore.defaultBookmarkColor)
+const finalColor = ref(
+  props.initialColor || nodeBookmarkStore.defaultBookmarkColor
+)
 
 const resetCustomization = () => {
   // @ts-expect-error fixme ts strict error
   selectedIcon.value =
-    iconOptions.find((option) => option.value === initialIcon) || defaultIcon
-  finalColor.value = initialColor || nodeBookmarkStore.defaultBookmarkColor
+    iconOptions.find((option) => option.value === props.initialIcon) ||
+    defaultIcon
+  finalColor.value =
+    props.initialColor || nodeBookmarkStore.defaultBookmarkColor
 }
 
 const confirmCustomization = () => {
@@ -115,7 +119,7 @@ const closeDialog = () => {
 }
 
 watch(
-  () => modelValue,
+  () => props.modelValue,
   (newValue: boolean) => {
     if (newValue) {
       resetCustomization()

src/components/common/DeviceInfo.vue

@@ -5,7 +5,7 @@
         {{ col.header }}
       </div>
       <div>
-        {{ formatValue(device[col.field], col.field) }}
+        {{ formatValue(props.device[col.field], col.field) }}
       </div>
     </template>
   </div>
@@ -15,7 +15,7 @@
 import type { DeviceStats } from '@/schemas/apiSchema'
 import { formatSize } from '@/utils/formatUtil'
 
-const { device } = defineProps<{
+const props = defineProps<{
   device: DeviceStats
 }>()
 

src/components/common/EditableText.test.ts

@@ -6,7 +6,7 @@ import { createApp } from 'vue'
 
 import EditableText from './EditableText.vue'
 
-describe(EditableText.__name ?? 'EditableText', () => {
+describe('EditableText', () => {
   beforeAll(() => {
     // Create a Vue app instance for PrimeVue
     const app = createApp({})

src/components/common/ElectronFileDownload.vue

@@ -5,10 +5,10 @@
       <i v-if="status === 'completed'" class="pi pi-check text-green-500" />
       <div class="file-info">
         <div class="file-details">
-          <span class="file-type" :title="displayHint">{{ displayLabel }}</span>
+          <span class="file-type" :title="hint">{{ label }}</span>
         </div>
-        <div v-if="error" class="file-error">
-          {{ error }}
+        <div v-if="props.error" class="file-error">
+          {{ props.error }}
         </div>
       </div>
 
@@ -18,14 +18,14 @@
           class="file-action-button"
           variant="secondary"
           size="sm"
-          :disabled="!!error"
+          :disabled="!!props.error"
           @click="triggerDownload"
         >
           <i class="pi pi-download" />
           {{ $t('g.downloadWithSize', { size: fileSize }) }}
         </Button>
         <Button
-          v-if="(status === null || status === 'error') && !!url"
+          v-if="(status === null || status === 'error') && !!props.url"
           variant="secondary"
           size="sm"
           @click="copyURL"
@@ -53,7 +53,7 @@
         class="file-action-button"
         variant="secondary"
         size="sm"
-        :disabled="!!error"
+        :disabled="!!props.error"
         @click="triggerPauseDownload"
       >
         <i class="pi pi-pause-circle" />
@@ -66,7 +66,7 @@
         variant="secondary"
         size="sm"
         :aria-label="t('electronFileDownload.resume')"
-        :disabled="!!error"
+        :disabled="!!props.error"
         @click="triggerResumeDownload"
       >
         <i class="pi pi-play-circle" />
@@ -78,7 +78,7 @@
         variant="destructive"
         size="sm"
         :aria-label="t('electronFileDownload.cancel')"
-        :disabled="!!error"
+        :disabled="!!props.error"
         @click="triggerCancelDownload"
       >
         <i class="pi pi-times-circle" />
@@ -98,7 +98,7 @@ import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { formatSize } from '@/utils/formatUtil'
 
-const { url, hint, label, error } = defineProps<{
+const props = defineProps<{
   url: string
   hint?: string
   label?: string
@@ -106,9 +106,9 @@ const { url, hint, label, error } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const displayLabel = computed(() => label || url.split('/').pop())
-const displayHint = computed(() => hint || url)
-const download = useDownload(url)
+const label = computed(() => props.label || props.url.split('/').pop())
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
 const downloadProgress = ref<number>(0)
 const status = ref<string | null>(null)
 const fileSize = computed(() =>
@@ -117,10 +117,10 @@ const fileSize = computed(() =>
 const { copyToClipboard } = useCopyToClipboard()
 const electronDownloadStore = useElectronDownloadStore()
 // @ts-expect-error fixme ts strict error
-const [savePath, filename] = label.split('/')
+const [savePath, filename] = props.label.split('/')
 
 electronDownloadStore.$subscribe((_, { downloads }) => {
-  const download = downloads.find((download) => url === download.url)
+  const download = downloads.find((download) => props.url === download.url)
 
   if (download) {
     // @ts-expect-error fixme ts strict error
@@ -132,17 +132,17 @@ electronDownloadStore.$subscribe((_, { downloads }) => {
 
 const triggerDownload = async () => {
   await electronDownloadStore.start({
-    url,
+    url: props.url,
     savePath: savePath.trim(),
     filename: filename.trim()
   })
 }
 
-const triggerCancelDownload = () => electronDownloadStore.cancel(url)
-const triggerPauseDownload = () => electronDownloadStore.pause(url)
-const triggerResumeDownload = () => electronDownloadStore.resume(url)
+const triggerCancelDownload = () => electronDownloadStore.cancel(props.url)
+const triggerPauseDownload = () => electronDownloadStore.pause(props.url)
+const triggerResumeDownload = () => electronDownloadStore.resume(props.url)
 
 const copyURL = async () => {
-  await copyToClipboard(url)
+  await copyToClipboard(props.url)
 }
 </script>

src/components/common/ExtensionSlot.vue

@@ -5,7 +5,10 @@
     :ref="
       (el) => {
         if (el)
-          mountCustomExtension(extension as CustomExtension, el as HTMLElement)
+          mountCustomExtension(
+            props.extension as CustomExtension,
+            el as HTMLElement
+          )
       }
     "
   />
@@ -16,17 +19,17 @@ import { onBeforeUnmount } from 'vue'
 
 import type { CustomExtension, VueExtension } from '@/types/extensionTypes'
 
-const { extension } = defineProps<{
+const props = defineProps<{
   extension: VueExtension | CustomExtension
 }>()
 
-const mountCustomExtension = (ext: CustomExtension, el: HTMLElement) => {
-  ext.render(el)
+const mountCustomExtension = (extension: CustomExtension, el: HTMLElement) => {
+  extension.render(el)
 }
 
 onBeforeUnmount(() => {
-  if (extension.type === 'custom' && extension.destroy) {
-    extension.destroy()
+  if (props.extension.type === 'custom' && props.extension.destroy) {
+    props.extension.destroy()
   }
 })
 </script>

src/components/common/FileDownload.vue

@@ -3,35 +3,35 @@
   <div class="flex flex-row items-center gap-2">
     <div>
       <div>
-        <span :title="displayHint">{{ displayLabel }}</span>
+        <span :title="hint">{{ label }}</span>
       </div>
       <Message
-        v-if="error"
+        v-if="props.error"
         severity="error"
         icon="pi pi-exclamation-triangle"
         size="small"
         variant="outlined"
         class="my-2 h-min max-w-xs px-1"
-        :title="error"
+        :title="props.error"
         :pt="{
           text: { class: 'overflow-hidden text-ellipsis' }
         }"
       >
-        {{ error }}
+        {{ props.error }}
       </Message>
     </div>
     <div>
       <Button
         variant="secondary"
-        :disabled="!!error"
-        :title="url"
+        :disabled="!!props.error"
+        :title="props.url"
         @click="download.triggerBrowserDownload"
       >
         {{ $t('g.downloadWithSize', { size: fileSize }) }}
       </Button>
     </div>
     <div>
-      <Button variant="secondary" :disabled="!!error" @click="copyURL">
+      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
         {{ $t('g.copyURL') }}
       </Button>
     </div>
@@ -47,22 +47,22 @@ import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'
 
-const { url, hint, label, error } = defineProps<{
+const props = defineProps<{
   url: string
   hint?: string
   label?: string
   error?: string
 }>()
 
-const displayLabel = computed(() => label || url.split('/').pop())
+const label = computed(() => props.label || props.url.split('/').pop())
 
-const displayHint = computed(() => hint || url)
-const download = useDownload(url)
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
 const fileSize = computed(() =>
   download.fileSize.value ? formatSize(download.fileSize.value) : '?'
 )
 const copyURL = async () => {
-  await copyToClipboard(url)
+  await copyToClipboard(props.url)
 }
 
 const { copyToClipboard } = useCopyToClipboard()

src/components/common/FormColorPicker.vue

@@ -10,7 +10,7 @@ import ColorPicker from 'primevue/colorpicker'
 import InputText from 'primevue/inputtext'
 
 const modelValue = defineModel<string>('modelValue')
-const { label } = defineProps<{
+defineProps<{
   label?: string
 }>()
 

src/components/common/FormImageUpload.vue

@@ -45,7 +45,7 @@ import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 
-const { modelValue } = defineProps<{
+defineProps<{
   modelValue: string
 }>()
 
@@ -64,9 +64,9 @@ const handleFileUpload = (event: Event) => {
   if (target.files && target.files[0]) {
     const file = target.files[0]
     const reader = new FileReader()
-    reader.addEventListener('load', (e) => {
+    reader.onload = (e) => {
       emit('update:modelValue', e.target?.result as string)
-    })
+    }
     reader.readAsDataURL(file)
   }
 }

src/components/common/FormItem.vue

@@ -2,12 +2,16 @@
 <template>
   <div class="flex flex-row items-center gap-2">
     <div class="form-label flex grow items-center">
-      <span :id="`${id}-label`" class="text-muted" :class="labelClass">
+      <span
+        :id="`${props.id}-label`"
+        class="text-muted"
+        :class="props.labelClass"
+      >
         <slot name="name-prefix" />
-        {{ item.name }}
+        {{ props.item.name }}
         <i
-          v-if="item.tooltip"
-          v-tooltip="item.tooltip"
+          v-if="props.item.tooltip"
+          v-tooltip="props.item.tooltip"
           class="pi pi-info-circle bg-transparent"
         />
         <slot name="name-suffix" />
@@ -15,11 +19,11 @@
     </div>
     <div class="form-input flex justify-end">
       <component
-        :is="markRaw(getFormComponent(item))"
-        :id="id"
+        :is="markRaw(getFormComponent(props.item))"
+        :id="props.id"
         v-model:model-value="formValue"
-        :aria-labelledby="`${id}-label`"
-        v-bind="getFormAttrs(item)"
+        :aria-labelledby="`${props.id}-label`"
+        v-bind="getFormAttrs(props.item)"
       />
     </div>
   </div>
@@ -44,37 +48,35 @@ import UrlInput from '@/components/common/UrlInput.vue'
 import type { FormItem } from '@/platform/settings/types'
 
 const formValue = defineModel<unknown>('formValue')
-const { item, id, labelClass } = defineProps<{
+const props = defineProps<{
   item: FormItem
   id?: string
   labelClass?: string | Record<string, boolean>
 }>()
 
-function getFormAttrs(formItem: FormItem) {
-  const attrs = { ...(formItem.attrs || {}) }
-  const inputType = formItem.type
+function getFormAttrs(item: FormItem) {
+  const attrs = { ...(item.attrs || {}) }
+  const inputType = item.type
   if (typeof inputType === 'function') {
     attrs['renderFunction'] = () =>
       inputType(
-        formItem.name,
-        (v: unknown) => {
-          formValue.value = v
-        },
+        props.item.name,
+        (v: unknown) => (formValue.value = v),
         formValue.value,
-        formItem.attrs
+        item.attrs
       )
   }
-  switch (formItem.type) {
+  switch (item.type) {
     case 'combo':
     case 'radio':
       attrs['options'] =
-        typeof formItem.options === 'function'
+        typeof item.options === 'function'
           ? // @ts-expect-error: Audit and deprecate usage of legacy options type:
             // (value) => [string | {text: string, value: string}]
-            formItem.options(formValue.value)
-          : formItem.options
+            item.options(formValue.value)
+          : item.options
 
-      if (typeof formItem.options?.[0] !== 'string') {
+      if (typeof item.options?.[0] !== 'string') {
         attrs['optionLabel'] = 'text'
         attrs['optionValue'] = 'value'
       }
@@ -83,11 +85,11 @@ function getFormAttrs(formItem: FormItem) {
   return attrs
 }
 
-function getFormComponent(formItem: FormItem): Component {
-  if (typeof formItem.type === 'function') {
+function getFormComponent(item: FormItem): Component {
+  if (typeof item.type === 'function') {
     return CustomFormValue
   }
-  switch (formItem.type) {
+  switch (item.type) {
     case 'boolean':
       return ToggleSwitch
     case 'number':

src/components/common/FormRadioGroup.test.ts

@@ -5,242 +5,239 @@ import { beforeAll, describe, expect, it } from 'vitest'
 import { createApp } from 'vue'
 
 import type { SettingOption } from '@/platform/settings/types'
-import type { ComponentProps } from 'vue-component-type-helpers'
 
 import FormRadioGroup from './FormRadioGroup.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
-describe(
-  (FormRadioGroup as { __name?: string }).__name ?? 'FormRadioGroup',
-  () => {
-    beforeAll(() => {
-      const app = createApp({})
-      app.use(PrimeVue)
-    })
+describe('FormRadioGroup', () => {
+  beforeAll(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
 
-    type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
-    const mountComponent = (props: FormRadioGroupProps, options = {}) => {
-      return mount(FormRadioGroup, {
-        global: {
-          plugins: [PrimeVue],
-          components: { RadioButton }
-        },
-        props,
-        ...options
-      })
-    }
-
-    describe('normalizedOptions computed property', () => {
-      it('handles string array options', () => {
-        const wrapper = mountComponent({
-          modelValue: 'option1',
-          options: ['option1', 'option2', 'option3'],
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(3)
-
-        expect(radioButtons[0].props('value')).toBe('option1')
-        expect(radioButtons[1].props('value')).toBe('option2')
-        expect(radioButtons[2].props('value')).toBe('option3')
-
-        const labels = wrapper.findAll('label')
-        expect(labels[0].text()).toBe('option1')
-        expect(labels[1].text()).toBe('option2')
-        expect(labels[2].text()).toBe('option3')
-      })
-
-      it('handles SettingOption array', () => {
-        const options: SettingOption[] = [
-          { text: 'Small', value: 'sm' },
-          { text: 'Medium', value: 'md' },
-          { text: 'Large', value: 'lg' }
-        ]
-
-        const wrapper = mountComponent({
-          modelValue: 'md',
-          options,
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(3)
-
-        expect(radioButtons[0].props('value')).toBe('sm')
-        expect(radioButtons[1].props('value')).toBe('md')
-        expect(radioButtons[2].props('value')).toBe('lg')
-
-        const labels = wrapper.findAll('label')
-        expect(labels[0].text()).toBe('Small')
-        expect(labels[1].text()).toBe('Medium')
-        expect(labels[2].text()).toBe('Large')
-      })
-
-      it('handles SettingOption with undefined value (uses text as value)', () => {
-        const options: SettingOption[] = [
-          { text: 'Option A', value: undefined },
-          { text: 'Option B' }
-        ]
-
-        const wrapper = mountComponent({
-          modelValue: 'Option A',
-          options,
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-
-        expect(radioButtons[0].props('value')).toBe('Option A')
-        expect(radioButtons[1].props('value')).toBe('Option B')
-      })
-
-      it('handles custom object with optionLabel and optionValue', () => {
-        const options = [
-          { name: 'First Option', id: '1' },
-          { name: 'Second Option', id: '2' },
-          { name: 'Third Option', id: '3' }
-        ]
-
-        const wrapper = mountComponent({
-          modelValue: 2,
-          options,
-          optionLabel: 'name',
-          optionValue: 'id',
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(3)
-
-        expect(radioButtons[0].props('value')).toBe('1')
-        expect(radioButtons[1].props('value')).toBe('2')
-        expect(radioButtons[2].props('value')).toBe('3')
-
-        const labels = wrapper.findAll('label')
-        expect(labels[0].text()).toBe('First Option')
-        expect(labels[1].text()).toBe('Second Option')
-        expect(labels[2].text()).toBe('Third Option')
-      })
-
-      it('handles mixed array with strings and SettingOptions', () => {
-        const options: (string | SettingOption)[] = [
-          'Simple String',
-          { text: 'Complex Option', value: 'complex' },
-          'Another String'
-        ]
-
-        const wrapper = mountComponent({
-          modelValue: 'complex',
-          options,
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(3)
-
-        expect(radioButtons[0].props('value')).toBe('Simple String')
-        expect(radioButtons[1].props('value')).toBe('complex')
-        expect(radioButtons[2].props('value')).toBe('Another String')
-
-        const labels = wrapper.findAll('label')
-        expect(labels[0].text()).toBe('Simple String')
-        expect(labels[1].text()).toBe('Complex Option')
-        expect(labels[2].text()).toBe('Another String')
-      })
-
-      it('handles empty options array', () => {
-        const wrapper = mountComponent({
-          modelValue: null,
-          options: [],
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(0)
-      })
-
-      it('handles undefined options gracefully', () => {
-        const wrapper = mountComponent({
-          modelValue: null,
-          options: undefined,
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(0)
-      })
-
-      it('handles object with missing properties gracefully', () => {
-        const options = [{ label: 'Option 1', val: 'opt1' }]
-
-        const wrapper = mountComponent({
-          modelValue: 'opt1',
-          options,
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-        expect(radioButtons).toHaveLength(1)
-
-        const labels = wrapper.findAll('label')
-        expect(labels[0].text()).toBe('Unknown')
-      })
-    })
-
-    describe('component functionality', () => {
-      it('sets correct input-id and name attributes', () => {
-        const options = ['A', 'B']
-
-        const wrapper = mountComponent({
-          modelValue: 'A',
-          options,
-          id: 'my-radio-group'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-
-        expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
-        expect(radioButtons[0].props('name')).toBe('my-radio-group')
-        expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
-        expect(radioButtons[1].props('name')).toBe('my-radio-group')
-      })
-
-      it('associates labels with radio buttons correctly', () => {
-        const options = ['Yes', 'No']
-
-        const wrapper = mountComponent({
-          modelValue: 'Yes',
-          options,
-          id: 'confirm-radio'
-        })
-
-        const labels = wrapper.findAll('label')
-
-        expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
-        expect(labels[1].attributes('for')).toBe('confirm-radio-No')
-      })
-
-      it('sets aria-describedby attribute correctly', () => {
-        const options: SettingOption[] = [
-          { text: 'Option 1', value: 'opt1' },
-          { text: 'Option 2', value: 'opt2' }
-        ]
-
-        const wrapper = mountComponent({
-          modelValue: 'opt1',
-          options,
-          id: 'test-radio'
-        })
-
-        const radioButtons = wrapper.findAllComponents(RadioButton)
-
-        expect(radioButtons[0].attributes('aria-describedby')).toBe(
-          'Option 1-label'
-        )
-        expect(radioButtons[1].attributes('aria-describedby')).toBe(
-          'Option 2-label'
-        )
-      })
+  type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
+  const mountComponent = (props: FormRadioGroupProps, options = {}) => {
+    return mount(FormRadioGroup, {
+      global: {
+        plugins: [PrimeVue],
+        components: { RadioButton }
+      },
+      props,
+      ...options
     })
   }
-)
+
+  describe('normalizedOptions computed property', () => {
+    it('handles string array options', () => {
+      const wrapper = mountComponent({
+        modelValue: 'option1',
+        options: ['option1', 'option2', 'option3'],
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('option1')
+      expect(radioButtons[1].props('value')).toBe('option2')
+      expect(radioButtons[2].props('value')).toBe('option3')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('option1')
+      expect(labels[1].text()).toBe('option2')
+      expect(labels[2].text()).toBe('option3')
+    })
+
+    it('handles SettingOption array', () => {
+      const options: SettingOption[] = [
+        { text: 'Small', value: 'sm' },
+        { text: 'Medium', value: 'md' },
+        { text: 'Large', value: 'lg' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'md',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('sm')
+      expect(radioButtons[1].props('value')).toBe('md')
+      expect(radioButtons[2].props('value')).toBe('lg')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Small')
+      expect(labels[1].text()).toBe('Medium')
+      expect(labels[2].text()).toBe('Large')
+    })
+
+    it('handles SettingOption with undefined value (uses text as value)', () => {
+      const options: SettingOption[] = [
+        { text: 'Option A', value: undefined },
+        { text: 'Option B' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'Option A',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].props('value')).toBe('Option A')
+      expect(radioButtons[1].props('value')).toBe('Option B')
+    })
+
+    it('handles custom object with optionLabel and optionValue', () => {
+      const options = [
+        { name: 'First Option', id: '1' },
+        { name: 'Second Option', id: '2' },
+        { name: 'Third Option', id: '3' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 2,
+        options,
+        optionLabel: 'name',
+        optionValue: 'id',
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('1')
+      expect(radioButtons[1].props('value')).toBe('2')
+      expect(radioButtons[2].props('value')).toBe('3')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('First Option')
+      expect(labels[1].text()).toBe('Second Option')
+      expect(labels[2].text()).toBe('Third Option')
+    })
+
+    it('handles mixed array with strings and SettingOptions', () => {
+      const options: (string | SettingOption)[] = [
+        'Simple String',
+        { text: 'Complex Option', value: 'complex' },
+        'Another String'
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'complex',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('Simple String')
+      expect(radioButtons[1].props('value')).toBe('complex')
+      expect(radioButtons[2].props('value')).toBe('Another String')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Simple String')
+      expect(labels[1].text()).toBe('Complex Option')
+      expect(labels[2].text()).toBe('Another String')
+    })
+
+    it('handles empty options array', () => {
+      const wrapper = mountComponent({
+        modelValue: null,
+        options: [],
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(0)
+    })
+
+    it('handles undefined options gracefully', () => {
+      const wrapper = mountComponent({
+        modelValue: null,
+        options: undefined,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(0)
+    })
+
+    it('handles object with missing properties gracefully', () => {
+      const options = [{ label: 'Option 1', val: 'opt1' }]
+
+      const wrapper = mountComponent({
+        modelValue: 'opt1',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(1)
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Unknown')
+    })
+  })
+
+  describe('component functionality', () => {
+    it('sets correct input-id and name attributes', () => {
+      const options = ['A', 'B']
+
+      const wrapper = mountComponent({
+        modelValue: 'A',
+        options,
+        id: 'my-radio-group'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
+      expect(radioButtons[0].props('name')).toBe('my-radio-group')
+      expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
+      expect(radioButtons[1].props('name')).toBe('my-radio-group')
+    })
+
+    it('associates labels with radio buttons correctly', () => {
+      const options = ['Yes', 'No']
+
+      const wrapper = mountComponent({
+        modelValue: 'Yes',
+        options,
+        id: 'confirm-radio'
+      })
+
+      const labels = wrapper.findAll('label')
+
+      expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
+      expect(labels[1].attributes('for')).toBe('confirm-radio-No')
+    })
+
+    it('sets aria-describedby attribute correctly', () => {
+      const options: SettingOption[] = [
+        { text: 'Option 1', value: 'opt1' },
+        { text: 'Option 2', value: 'opt2' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'opt1',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].attributes('aria-describedby')).toBe(
+        'Option 1-label'
+      )
+      expect(radioButtons[1].attributes('aria-describedby')).toBe(
+        'Option 2-label'
+      )
+    })
+  })
+})

src/components/common/FormRadioGroup.vue

@@ -26,7 +26,7 @@ import { computed } from 'vue'
 
 import type { SettingOption } from '@/platform/settings/types'
 
-const { modelValue, options, optionLabel, optionValue, id } = defineProps<{
+const props = defineProps<{
   modelValue: T
   options?: (string | SettingOption | Record<string, string>)[]
   optionLabel?: string
@@ -39,9 +39,9 @@ defineEmits<{
 }>()
 
 const normalizedOptions = computed<SettingOption[]>(() => {
-  if (!options) return []
+  if (!props.options) return []
 
-  return options.map((option) => {
+  return props.options.map((option) => {
     if (typeof option === 'string') {
       return { text: option, value: option }
     }
@@ -54,8 +54,8 @@ const normalizedOptions = computed<SettingOption[]>(() => {
     }
     // Handle optionLabel/optionValue
     return {
-      text: option[optionLabel || 'text'] || 'Unknown',
-      value: option[optionValue || 'value']
+      text: option[props.optionLabel || 'text'] || 'Unknown',
+      value: option[props.optionValue || 'value']
     }
   })
 })

src/components/common/InputKnob.vue

@@ -30,25 +30,24 @@ import InputNumber from 'primevue/inputnumber'
 import Knob from 'primevue/knob'
 import { ref, watch } from 'vue'
 
-const { modelValue, inputClass, knobClass, min, max, step, resolution } =
-  defineProps<{
-    modelValue: number
-    inputClass?: string
-    knobClass?: string
-    min?: number
-    max?: number
-    step?: number
-    resolution?: number
-  }>()
+const props = defineProps<{
+  modelValue: number
+  inputClass?: string
+  knobClass?: string
+  min?: number
+  max?: number
+  step?: number
+  resolution?: number
+}>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: number): void
 }>()
 
-const localValue = ref(modelValue)
+const localValue = ref(props.modelValue)
 
 watch(
-  () => modelValue,
+  () => props.modelValue,
   (newValue) => {
     localValue.value = newValue
   }
@@ -57,18 +56,18 @@ watch(
 const updateValue = (newValue: number | null) => {
   if (newValue === null) {
     // If the input is cleared, reset to the minimum value or 0
-    newValue = Number(min) || 0
+    newValue = Number(props.min) || 0
   }
 
-  const minVal = Number(min ?? Number.NEGATIVE_INFINITY)
-  const maxVal = Number(max ?? Number.POSITIVE_INFINITY)
-  const stepVal = Number(step) || 1
+  const min = Number(props.min ?? Number.NEGATIVE_INFINITY)
+  const max = Number(props.max ?? Number.POSITIVE_INFINITY)
+  const step = Number(props.step) || 1
 
   // Ensure the value is within the allowed range
-  newValue = Math.max(minVal, Math.min(maxVal, newValue))
+  newValue = Math.max(min, Math.min(max, newValue))
 
   // Round to the nearest step
-  newValue = Math.round(newValue / stepVal) * stepVal
+  newValue = Math.round(newValue / step) * step
 
   // Update local value and emit change
   localValue.value = newValue
@@ -77,11 +76,11 @@ const updateValue = (newValue: number | null) => {
 
 const displayValue = (value: number): string => {
   updateValue(value)
-  const stepString = (step ?? 1).toString()
-  const decimalPlaces = stepString.includes('.')
+  const stepString = (props.step ?? 1).toString()
+  const resolution = stepString.includes('.')
     ? stepString.split('.')[1].length
     : 0
-  return value.toFixed(resolution ?? decimalPlaces)
+  return value.toFixed(props.resolution ?? resolution)
 }
 
 defineOptions({

src/components/common/InputSlider.vue

@@ -29,7 +29,7 @@ import InputNumber from 'primevue/inputnumber'
 import Slider from 'primevue/slider'
 import { ref, watch } from 'vue'
 
-const { modelValue, inputClass, sliderClass, min, max, step } = defineProps<{
+const props = defineProps<{
   modelValue: number
   inputClass?: string
   sliderClass?: string
@@ -42,10 +42,10 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: number): void
 }>()
 
-const localValue = ref(modelValue)
+const localValue = ref(props.modelValue)
 
 watch(
-  () => modelValue,
+  () => props.modelValue,
   (newValue) => {
     localValue.value = newValue
   }
@@ -54,18 +54,18 @@ watch(
 const updateValue = (newValue: number | null) => {
   if (newValue === null) {
     // If the input is cleared, reset to the minimum value or 0
-    newValue = Number(min) || 0
+    newValue = Number(props.min) || 0
   }
 
-  const minVal = Number(min ?? Number.NEGATIVE_INFINITY)
-  const maxVal = Number(max ?? Number.POSITIVE_INFINITY)
-  const stepVal = Number(step) || 1
+  const min = Number(props.min ?? Number.NEGATIVE_INFINITY)
+  const max = Number(props.max ?? Number.POSITIVE_INFINITY)
+  const step = Number(props.step) || 1
 
   // Ensure the value is within the allowed range
-  newValue = Math.max(minVal, Math.min(maxVal, newValue))
+  newValue = Math.max(min, Math.min(max, newValue))
 
   // Round to the nearest step
-  newValue = Math.round(newValue / stepVal) * stepVal
+  newValue = Math.round(newValue / step) * step
 
   // Update local value and emit change
   localValue.value = newValue

src/components/common/LoadingOverlay.vue

@@ -41,6 +41,7 @@ const spinnerSizeClass = computed(() => {
   switch (size) {
     case 'sm':
       return 'h-6 w-6 border-2'
+    case 'md':
     default:
       return 'h-12 w-12 border-4'
   }

src/components/common/NoResultsPlaceholder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cn('no-results-placeholder h-full p-8', className)">
+  <div class="no-results-placeholder h-full p-8" :class="props.class">
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
@@ -25,16 +25,8 @@
 import Card from 'primevue/card'
 
 import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@/utils/tailwindUtil'
 
-const {
-  class: className,
-  icon,
-  title,
-  message,
-  textClass,
-  buttonLabel
-} = defineProps<{
+const props = defineProps<{
   class?: string
   icon?: string
   title: string

src/components/common/ScrubableNumberInput.vue

@@ -0,0 +1,175 @@
+<template>
+  <div
+    ref="container"
+    class="flex h-7 rounded-lg bg-component-node-widget-background text-xs text-component-node-foreground"
+  >
+    <slot name="background" />
+    <Button
+      v-if="!hideButtons"
+      :aria-label="t('g.ariaLabel.decrement')"
+      data-testid="decrement"
+      class="h-full w-8 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
+      variant="muted-textonly"
+      :disabled="!canDecrement"
+      tabindex="-1"
+      @click="modelValue = clamp(modelValue - step)"
+    >
+      <i class="pi pi-minus" />
+    </Button>
+    <div class="relative min-w-[4ch] flex-1 py-1.5 my-0.25">
+      <input
+        ref="inputField"
+        v-bind="inputAttrs"
+        :value="displayValue ?? modelValue"
+        :disabled
+        :class="
+          cn(
+            'bg-transparent border-0 focus:outline-0 p-1 truncate text-sm absolute inset-0'
+          )
+        "
+        inputmode="decimal"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        @blur="handleBlur"
+        @keyup.enter="handleBlur"
+        @dragstart.prevent
+      />
+      <div
+        :class="
+          cn(
+            'absolute inset-0 z-10 cursor-ew-resize',
+            textEdit && 'pointer-events-none hidden'
+          )
+        "
+        @pointerdown="handlePointerDown"
+        @pointermove="handlePointerMove"
+        @pointerup="handlePointerUp"
+        @pointercancel="resetDrag"
+      />
+    </div>
+    <slot />
+    <Button
+      v-if="!hideButtons"
+      :aria-label="t('g.ariaLabel.increment')"
+      data-testid="increment"
+      class="h-full w-8 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
+      variant="muted-textonly"
+      :disabled="!canIncrement"
+      tabindex="-1"
+      @click="modelValue = clamp(modelValue + step)"
+    >
+      <i class="pi pi-plus" />
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  hideButtons = false,
+  displayValue,
+  parseValue
+} = defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  hideButtons?: boolean
+  displayValue?: string
+  parseValue?: (raw: string) => number | undefined
+  inputAttrs?: Record<string, unknown>
+}>()
+
+const { t } = useI18n()
+const modelValue = defineModel<number>({ default: 0 })
+
+const container = useTemplateRef<HTMLDivElement>('container')
+const inputField = useTemplateRef<HTMLInputElement>('inputField')
+const textEdit = ref(false)
+
+onClickOutside(container, () => {
+  if (textEdit.value) textEdit.value = false
+})
+
+function clamp(value: number): number {
+  const lo = min ?? -Infinity
+  const hi = max ?? Infinity
+  return Math.min(hi, Math.max(lo, value))
+}
+
+const canDecrement = computed(
+  () => modelValue.value > (min ?? -Infinity) && !disabled
+)
+const canIncrement = computed(
+  () => modelValue.value < (max ?? Infinity) && !disabled
+)
+
+const dragging = ref(false)
+const dragDelta = ref(0)
+const hasDragged = ref(false)
+
+function handleBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  const raw = target.value.trim()
+  const parsed = parseValue
+    ? parseValue(raw)
+    : raw === ''
+      ? undefined
+      : Number(raw)
+  if (parsed != null && !isNaN(parsed)) {
+    modelValue.value = clamp(parsed)
+  } else {
+    target.value = displayValue ?? String(modelValue.value)
+  }
+  textEdit.value = false
+}
+
+function handlePointerDown(e: PointerEvent) {
+  if (e.button !== 0) return
+  if (disabled) return
+  const target = e.target as HTMLElement
+  target.setPointerCapture(e.pointerId)
+  dragging.value = true
+  dragDelta.value = 0
+  hasDragged.value = false
+}
+
+function handlePointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  dragDelta.value += e.movementX
+  const steps = (dragDelta.value / 10) | 0
+  if (steps === 0) return
+  hasDragged.value = true
+  const unclipped = modelValue.value + steps * step
+  dragDelta.value %= 10
+  modelValue.value = clamp(unclipped)
+}
+
+function handlePointerUp() {
+  if (!dragging.value) return
+
+  if (!hasDragged.value) {
+    textEdit.value = true
+    inputField.value?.focus()
+    inputField.value?.select()
+  }
+
+  resetDrag()
+}
+
+function resetDrag() {
+  dragging.value = false
+  dragDelta.value = 0
+}
+</script>

src/components/common/SearchBox.test.ts

@@ -19,7 +19,7 @@ const i18n = createI18n({
   }
 })
 
-describe((SearchBox as { __name?: string }).__name ?? 'SearchBox', () => {
+describe('SearchBox', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     vi.useFakeTimers()

src/components/common/SearchFilterChip.vue

@@ -18,7 +18,7 @@ export interface SearchFilter {
   id: string | number
 }
 
-const { text, badge, badgeClass } = defineProps<Omit<SearchFilter, 'id'>>()
+defineProps<Omit<SearchFilter, 'id'>>()
 defineEmits(['remove'])
 </script>
 

src/components/common/SystemStatsPanel.vue

@@ -21,9 +21,9 @@
         <h2 class="mb-4 text-2xl font-semibold">
           {{ $t('g.devices') }}
         </h2>
-        <TabView v-if="stats.devices.length > 1">
+        <TabView v-if="props.stats.devices.length > 1">
           <TabPanel
-            v-for="device in stats.devices"
+            v-for="device in props.stats.devices"
             :key="device.index"
             :header="device.name"
             :value="device.index"
@@ -31,7 +31,7 @@
             <DeviceInfo :device="device" />
           </TabPanel>
         </TabView>
-        <DeviceInfo v-else :device="stats.devices[0]" />
+        <DeviceInfo v-else :device="props.stats.devices[0]" />
       </div>
     </template>
   </div>
@@ -48,16 +48,16 @@ import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { formatCommitHash, formatSize } from '@/utils/formatUtil'
 
-const { stats } = defineProps<{
+const props = defineProps<{
   stats: SystemStats
 }>()
 
 const systemInfo = computed(() => ({
-  ...stats.system,
-  argv: stats.system.argv.join(' ')
+  ...props.stats.system,
+  argv: props.stats.system.argv.join(' ')
 }))
 
-const hasDevices = computed(() => stats.devices.length > 0)
+const hasDevices = computed(() => props.stats.devices.length > 0)
 
 type SystemInfoKey = keyof SystemStats['system']
 

src/components/common/TreeExplorer.vue

@@ -4,7 +4,7 @@
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
     class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
-    :class="className"
+    :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"
     :pt="{
@@ -12,9 +12,9 @@
       nodeContent: ({ context }) => ({
         class: 'group/tree-node',
         onClick: (e: MouseEvent) =>
-          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
+          onNodeContentClick(e, context.node as RenderedTreeExplorerNode<T>),
         onContextmenu: (e: MouseEvent) =>
-          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
+          handleContextMenu(e, context.node as RenderedTreeExplorerNode<T>)
       }),
       nodeToggleButton: () => ({
         onClick: (e: MouseEvent) => {
@@ -36,11 +36,11 @@
   </Tree>
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import Tree from 'primevue/tree'
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
@@ -68,14 +68,14 @@ const selectionKeys = defineModel<Record<string, boolean>>('selectionKeys')
 // Tracks whether the caller has set the selectionKeys model.
 const storeSelectionKeys = selectionKeys.value !== undefined
 
-const { root, class: className } = defineProps<{
-  root: TreeExplorerNode
+const props = defineProps<{
+  root: TreeExplorerNode<T>
   class?: string
 }>()
 const emit = defineEmits<{
-  (e: 'nodeClick', node: RenderedTreeExplorerNode, event: MouseEvent): void
-  (e: 'nodeDelete', node: RenderedTreeExplorerNode): void
-  (e: 'contextMenu', node: RenderedTreeExplorerNode, event: MouseEvent): void
+  (e: 'nodeClick', node: RenderedTreeExplorerNode<T>, event: MouseEvent): void
+  (e: 'nodeDelete', node: RenderedTreeExplorerNode<T>): void
+  (e: 'contextMenu', node: RenderedTreeExplorerNode<T>, event: MouseEvent): void
 }>()
 
 const {
@@ -83,19 +83,19 @@ const {
   getAddFolderMenuItem,
   handleFolderCreation,
   addFolderCommand
-} = useTreeFolderOperations(
-  /* expandNode */ (node: TreeExplorerNode) => {
+} = useTreeFolderOperations<T>(
+  /* expandNode */ (node: TreeExplorerNode<T>) => {
     expandedKeys.value[node.key] = true
   }
 )
 
-const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
-  const renderedRoot = fillNodeInfo(root)
+const renderedRoot = computed<RenderedTreeExplorerNode<T>>(() => {
+  const renderedRoot = fillNodeInfo(props.root)
   return newFolderNode.value
     ? combineTrees(renderedRoot, newFolderNode.value)
     : renderedRoot
 })
-const getTreeNodeIcon = (node: TreeExplorerNode) => {
+const getTreeNodeIcon = (node: TreeExplorerNode<T>) => {
   if (node.getIcon) {
     const icon = node.getIcon()
     if (icon) {
@@ -111,7 +111,9 @@ const getTreeNodeIcon = (node: TreeExplorerNode) => {
   const isExpanded = expandedKeys.value?.[node.key] ?? false
   return isExpanded ? 'pi pi-folder-open' : 'pi pi-folder'
 }
-const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
+const fillNodeInfo = (
+  node: TreeExplorerNode<T>
+): RenderedTreeExplorerNode<T> => {
   const children = node.children?.map(fillNodeInfo) ?? []
   const totalLeaves = node.leaf
     ? 1
@@ -128,7 +130,7 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
 }
 const onNodeContentClick = async (
   e: MouseEvent,
-  node: RenderedTreeExplorerNode
+  node: RenderedTreeExplorerNode<T>
 ) => {
   if (!storeSelectionKeys) {
     selectionKeys.value = {}
@@ -139,20 +141,22 @@ const onNodeContentClick = async (
   emit('nodeClick', node, e)
 }
 const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const menuTargetNode = ref<RenderedTreeExplorerNode | null>(null)
+const menuTargetNode = shallowRef<RenderedTreeExplorerNode<T> | null>(null)
 const extraMenuItems = computed(() => {
-  return menuTargetNode.value?.contextMenuItems
-    ? typeof menuTargetNode.value.contextMenuItems === 'function'
-      ? menuTargetNode.value.contextMenuItems(menuTargetNode.value)
-      : menuTargetNode.value.contextMenuItems
+  const node = menuTargetNode.value
+  return node?.contextMenuItems
+    ? typeof node.contextMenuItems === 'function'
+      ? node.contextMenuItems(node)
+      : node.contextMenuItems
     : []
 })
-const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
+const renameEditingNode = shallowRef<RenderedTreeExplorerNode<T> | null>(null)
 const errorHandling = useErrorHandling()
 const handleNodeLabelEdit = async (
-  node: RenderedTreeExplorerNode,
+  n: RenderedTreeExplorerNode,
   newName: string
 ) => {
+  const node = n as RenderedTreeExplorerNode<T>
   await errorHandling.wrapWithErrorHandlingAsync(
     async () => {
       if (node.key === newFolderNode.value?.key) {
@@ -170,35 +174,36 @@ const handleNodeLabelEdit = async (
 provide(InjectKeyHandleEditLabelFunction, handleNodeLabelEdit)
 
 const { t } = useI18n()
-const renameCommand = (node: RenderedTreeExplorerNode) => {
+const renameCommand = (node: RenderedTreeExplorerNode<T>) => {
   renameEditingNode.value = node
 }
-const deleteCommand = async (node: RenderedTreeExplorerNode) => {
+const deleteCommand = async (node: RenderedTreeExplorerNode<T>) => {
   await node.handleDelete?.()
   emit('nodeDelete', node)
 }
-const menuItems = computed<MenuItem[]>(() =>
-  [
-    getAddFolderMenuItem(menuTargetNode.value),
+const menuItems = computed<MenuItem[]>(() => {
+  const node = menuTargetNode.value
+  return [
+    getAddFolderMenuItem(node),
     {
       label: t('g.rename'),
       icon: 'pi pi-file-edit',
       command: () => {
-        if (menuTargetNode.value) {
-          renameCommand(menuTargetNode.value)
+        if (node) {
+          renameCommand(node)
         }
       },
-      visible: menuTargetNode.value?.handleRename !== undefined
+      visible: node?.handleRename !== undefined
     },
     {
       label: t('g.delete'),
       icon: 'pi pi-trash',
       command: async () => {
-        if (menuTargetNode.value) {
-          await deleteCommand(menuTargetNode.value)
+        if (node) {
+          await deleteCommand(node)
         }
       },
-      visible: menuTargetNode.value?.handleDelete !== undefined,
+      visible: node?.handleDelete !== undefined,
       isAsync: true // The delete command can be async
     },
     ...extraMenuItems.value
@@ -210,9 +215,12 @@ const menuItems = computed<MenuItem[]>(() =>
         })
       : undefined
   }))
-)
+})
 
-const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
+const handleContextMenu = (
+  e: MouseEvent,
+  node: RenderedTreeExplorerNode<T>
+) => {
   menuTargetNode.value = node
   emit('contextMenu', node, e)
   if (menuItems.value.filter((item) => item.visible).length > 0) {
@@ -224,15 +232,13 @@ const wrapCommandWithErrorHandler = (
   command: (event: MenuItemCommandEvent) => void,
   { isAsync = false }: { isAsync: boolean }
 ) => {
+  const node = menuTargetNode.value
   return isAsync
     ? errorHandling.wrapWithErrorHandlingAsync(
         command as (event: MenuItemCommandEvent) => Promise<void>,
-        menuTargetNode.value?.handleError
-      )
-    : errorHandling.wrapWithErrorHandling(
-        command,
-        menuTargetNode.value?.handleError
+        node?.handleError
       )
+    : errorHandling.wrapWithErrorHandling(command, node?.handleError)
 }
 
 defineExpose({

src/components/common/TreeExplorerTreeNode.test.ts

@@ -19,7 +19,7 @@ const i18n = createI18n({
   messages: {}
 })
 
-describe(TreeExplorerTreeNode.__name ?? 'TreeExplorerTreeNode', () => {
+describe('TreeExplorerTreeNode', () => {
   const mockNode = {
     key: '1',
     label: 'Test Node',

src/components/common/TreeExplorerTreeNode.vue

@@ -5,21 +5,21 @@
       'tree-node',
       {
         'can-drop': canDrop,
-        'tree-folder': !node.leaf,
-        'tree-leaf': node.leaf
+        'tree-folder': !props.node.leaf,
+        'tree-leaf': props.node.leaf
       }
     ]"
     :data-testid="`tree-node-${node.key}`"
   >
     <div class="node-content">
       <span class="node-label">
-        <slot name="before-label" :node="node" />
+        <slot name="before-label" :node="props.node" />
         <EditableText
           :model-value="node.label"
           :is-editing="isEditing"
           @edit="handleRename"
         />
-        <slot name="after-label" :node="node" />
+        <slot name="after-label" :node="props.node" />
       </span>
       <Badge
         v-if="showNodeBadgeText"
@@ -31,12 +31,12 @@
     <div
       class="node-actions flex gap-1 touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
     >
-      <slot name="actions" :node="node" />
+      <slot name="actions" :node="props.node" />
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
 import Badge from 'primevue/badge'
 import { computed, inject, ref } from 'vue'
@@ -52,35 +52,35 @@ import type {
   TreeExplorerDragAndDropData
 } from '@/types/treeExplorerTypes'
 
-const { node } = defineProps<{
-  node: RenderedTreeExplorerNode
+const props = defineProps<{
+  node: RenderedTreeExplorerNode<T>
 }>()
 
 const emit = defineEmits<{
   (
     e: 'itemDropped',
-    node: RenderedTreeExplorerNode,
-    data: RenderedTreeExplorerNode
+    node: RenderedTreeExplorerNode<T>,
+    data: RenderedTreeExplorerNode<T>
   ): void
-  (e: 'dragStart', node: RenderedTreeExplorerNode): void
-  (e: 'dragEnd', node: RenderedTreeExplorerNode): void
+  (e: 'dragStart', node: RenderedTreeExplorerNode<T>): void
+  (e: 'dragEnd', node: RenderedTreeExplorerNode<T>): void
 }>()
 
 const nodeBadgeText = computed<string>(() => {
-  if (node.leaf) {
+  if (props.node.leaf) {
     return ''
   }
-  if (node.badgeText !== undefined && node.badgeText !== null) {
-    return node.badgeText
+  if (props.node.badgeText !== undefined && props.node.badgeText !== null) {
+    return props.node.badgeText
   }
-  return node.totalLeaves.toString()
+  return props.node.totalLeaves.toString()
 })
 const showNodeBadgeText = computed<boolean>(() => nodeBadgeText.value !== '')
 
-const isEditing = computed<boolean>(() => node.isEditingLabel ?? false)
+const isEditing = computed<boolean>(() => props.node.isEditingLabel ?? false)
 const handleEditLabel = inject(InjectKeyHandleEditLabelFunction)
 const handleRename = (newName: string) => {
-  handleEditLabel?.(node, newName)
+  handleEditLabel?.(props.node as RenderedTreeExplorerNode, newName)
 }
 
 const container = ref<HTMLElement | null>(null)
@@ -89,21 +89,21 @@ const canDrop = ref(false)
 const treeNodeElementGetter = () =>
   container.value?.closest('.p-tree-node-content') as HTMLElement
 
-if (node.draggable) {
+if (props.node.draggable) {
   usePragmaticDraggable(treeNodeElementGetter, {
     getInitialData: () => {
       return {
         type: 'tree-explorer-node',
-        data: node
+        data: props.node
       }
     },
-    onDragStart: () => emit('dragStart', node),
-    onDrop: () => emit('dragEnd', node),
-    onGenerateDragPreview: node.renderDragPreview
+    onDragStart: () => emit('dragStart', props.node),
+    onDrop: () => emit('dragEnd', props.node),
+    onGenerateDragPreview: props.node.renderDragPreview
       ? ({ nativeSetDragImage }) => {
           setCustomNativeDragPreview({
             render: ({ container }) => {
-              return node.renderDragPreview?.(container)
+              return props.node.renderDragPreview?.(container)
             },
             nativeSetDragImage
           })
@@ -112,14 +112,18 @@ if (node.draggable) {
   })
 }
 
-if (node.droppable) {
+if (props.node.droppable) {
   usePragmaticDroppable(treeNodeElementGetter, {
     onDrop: async (event) => {
       const dndData = event.source.data as TreeExplorerDragAndDropData
       if (dndData.type === 'tree-explorer-node') {
-        await node.handleDrop?.(dndData)
+        await props.node.handleDrop?.(dndData as TreeExplorerDragAndDropData<T>)
         canDrop.value = false
-        emit('itemDropped', node, dndData.data)
+        emit(
+          'itemDropped',
+          props.node,
+          dndData.data as RenderedTreeExplorerNode<T>
+        )
       }
     },
     onDragEnter: (event) => {

src/components/common/UrlInput.test.ts

@@ -6,11 +6,10 @@ import InputText from 'primevue/inputtext'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
+import UrlInput from './UrlInput.vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 
-import UrlInput from './UrlInput.vue'
-
-describe(UrlInput.__name ?? 'UrlInput', () => {
+describe('UrlInput', () => {
   beforeEach(() => {
     const app = createApp({})
     app.use(PrimeVue)

src/components/common/UrlInput.vue

@@ -17,7 +17,7 @@
         'pi pi-times cursor-pointer text-red-500':
           validationState === ValidationState.INVALID
       }"
-      @click="validateUrl(model)"
+      @click="validateUrl(props.modelValue)"
     />
   </IconField>
 </template>
@@ -32,34 +32,40 @@ import { isValidUrl } from '@/utils/formatUtil'
 import { checkUrlReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
-const model = defineModel<string>({ required: true })
-
-const { validateUrlFn } = defineProps<{
+const props = defineProps<{
+  modelValue: string
   validateUrlFn?: (url: string) => Promise<boolean>
 }>()
 
 const emit = defineEmits<{
+  'update:modelValue': [value: string]
   'state-change': [state: ValidationState]
 }>()
 
 const validationState = ref<ValidationState>(ValidationState.IDLE)
 
 const cleanInput = (value: string): string =>
-  value ? value.replaceAll(/\s+/g, '') : ''
+  value ? value.replace(/\s+/g, '') : ''
 
-const internalValue = ref(cleanInput(model.value))
+// Add internal value state
+const internalValue = ref(cleanInput(props.modelValue))
 
-watch(model, async (newValue: string) => {
-  internalValue.value = cleanInput(newValue)
-  await validateUrl(newValue)
-})
+// Watch for external modelValue changes
+watch(
+  () => props.modelValue,
+  async (newValue: string) => {
+    internalValue.value = cleanInput(newValue)
+    await validateUrl(newValue)
+  }
+)
 
 watch(validationState, (newState) => {
   emit('state-change', newState)
 })
 
+// Validate on mount
 onMounted(async () => {
-  await validateUrl(model.value)
+  await validateUrl(props.modelValue)
 })
 
 const handleInput = (value: string | undefined) => {
@@ -81,7 +87,7 @@ const handleBlur = async () => {
   }
 
   // Emit the update only on blur
-  model.value = normalizedUrl
+  emit('update:modelValue', normalizedUrl)
 }
 
 // Default validation implementation
@@ -107,7 +113,7 @@ const validateUrl = async (value: string) => {
 
   validationState.value = ValidationState.LOADING
   try {
-    const isValid = await (validateUrlFn ?? defaultValidateUrl)(url)
+    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
     validationState.value = isValid
       ? ValidationState.VALID
       : ValidationState.INVALID

src/components/common/UserAvatar.test.ts

@@ -23,7 +23,7 @@ const i18n = createI18n({
   }
 })
 
-describe(UserAvatar.__name ?? 'UserAvatar', () => {
+describe('UserAvatar', () => {
   beforeEach(() => {
     const app = createApp({})
     app.use(PrimeVue)

src/components/common/UserCredit.test.ts

@@ -39,7 +39,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-describe(UserCredit.__name ?? 'UserCredit', () => {
+describe('UserCredit', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockBalance.value = {

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseModalLayout
     :content-title="$t('templateWorkflows.title', 'Workflow Templates')"
-    class="workflow-template-selector-dialog"
+    size="md"
   >
     <template #leftPanelHeaderTitle>
       <i class="icon-[comfy--template]" />
@@ -444,6 +444,7 @@ const distributions = computed(() => {
       return [TemplateIncludeOnDistributionEnum.Cloud]
     case 'localhost':
       return [TemplateIncludeOnDistributionEnum.Local]
+    case 'desktop':
     default:
       if (systemStatsStore.systemStats?.system.os === 'darwin') {
         return [
@@ -594,10 +595,12 @@ const coordinateNavAndSort = (source: 'nav' | 'sort') => {
       // When navigating away from 'Popular' category while sort is 'Popular', reset sort to default.
       sortBy.value = 'default'
     }
-  } else if (source === 'sort' && isPopularNav && !isPopularSort) {
+  } else if (source === 'sort') {
     // When sort is changed away from 'Popular' while in the 'Popular' category,
     // reset the category to 'All Templates' to avoid a confusing state.
-    selectedNavItem.value = 'all'
+    if (isPopularNav && !isPopularSort) {
+      selectedNavItem.value = 'all'
+    }
   }
 }
 
@@ -678,37 +681,37 @@ const runsOnOptions = computed(() =>
 const modelFilterLabel = computed(() => {
   if (selectedModelObjects.value.length === 0) {
     return t('templateWorkflows.modelFilter', 'Model Filter')
-  }
-  if (selectedModelObjects.value.length === 1) {
+  } else if (selectedModelObjects.value.length === 1) {
     return selectedModelObjects.value[0].name
+  } else {
+    return t('templateWorkflows.modelsSelected', {
+      count: selectedModelObjects.value.length
+    })
   }
-  return t('templateWorkflows.modelsSelected', {
-    count: selectedModelObjects.value.length
-  })
 })
 
 const useCaseFilterLabel = computed(() => {
   if (selectedUseCaseObjects.value.length === 0) {
     return t('templateWorkflows.useCaseFilter', 'Use Case')
-  }
-  if (selectedUseCaseObjects.value.length === 1) {
+  } else if (selectedUseCaseObjects.value.length === 1) {
     return selectedUseCaseObjects.value[0].name
+  } else {
+    return t('templateWorkflows.useCasesSelected', {
+      count: selectedUseCaseObjects.value.length
+    })
   }
-  return t('templateWorkflows.useCasesSelected', {
-    count: selectedUseCaseObjects.value.length
-  })
 })
 
 const runsOnFilterLabel = computed(() => {
   if (selectedRunsOnObjects.value.length === 0) {
     return t('templateWorkflows.runsOnFilter', 'Runs On')
-  }
-  if (selectedRunsOnObjects.value.length === 1) {
+  } else if (selectedRunsOnObjects.value.length === 1) {
     return selectedRunsOnObjects.value[0].name
+  } else {
+    return t('templateWorkflows.runsOnSelected', {
+      count: selectedRunsOnObjects.value.length
+    })
   }
-  return t('templateWorkflows.runsOnSelected', {
-    count: selectedRunsOnObjects.value.length
-  })
 })
 
 // Sort options
@@ -851,19 +854,3 @@ onBeforeUnmount(() => {
   cardRefs.value = [] // Release DOM refs
 })
 </script>
-
-<style>
-/* Ensure the workflow template selector dialog fits within provided dialog */
-.workflow-template-selector-dialog.base-widget-layout {
-  width: 100% !important;
-  max-width: 1400px;
-  height: 100% !important;
-  aspect-ratio: auto !important;
-}
-
-@media (min-width: 1600px) {
-  .workflow-template-selector-dialog.base-widget-layout {
-    max-width: 1600px;
-  }
-}
-</style>

src/components/dialog/GlobalDialog.vue

@@ -4,12 +4,7 @@
     v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
-    :class="[
-      'global-dialog',
-      item.key === 'global-settings' && teamWorkspacesEnabled
-        ? 'settings-dialog-workspace'
-        : ''
-    ]"
+    class="global-dialog"
     v-bind="item.dialogComponentProps"
     :pt="getDialogPt(item)"
     :aria-labelledby="item.key"

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -26,7 +26,7 @@ const handleBeforeUnload = (event: BeforeUnloadEvent) => {
     event.preventDefault()
     return true
   }
-  return
+  return undefined
 }
 
 onMounted(() => {

src/components/dialog/confirm/ConfirmHeader.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 <script setup lang="ts">
-const { title } = defineProps<{
+defineProps<{
   title?: string
 }>()
 </script>

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -116,17 +116,11 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const {
-  message,
-  type,
-  onConfirm: onConfirmProp,
-  itemList,
-  hint
-} = defineProps<{
+const props = defineProps<{
   message: string
   type: ConfirmationDialogType
   onConfirm: (value?: boolean) => void
@@ -140,23 +134,20 @@ const onCancel = () => useDialogStore().closeDialog()
 
 function openBlueprintOverwriteSetting() {
   useDialogStore().closeDialog()
-  void useDialogService().showSettingsDialog(
-    undefined,
-    'Comfy.Workflow.WarnBlueprintOverwrite'
-  )
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.WarnBlueprintOverwrite')
 }
 
 const doNotAskAgain = ref(false)
 
 const onDeny = () => {
-  onConfirmProp(false)
+  props.onConfirm(false)
   useDialogStore().closeDialog()
 }
 
 const onConfirm = () => {
-  if (type === 'overwriteBlueprint' && doNotAskAgain.value)
+  if (props.type === 'overwriteBlueprint' && doNotAskAgain.value)
     void useSettingStore().set('Comfy.Workflow.WarnBlueprintOverwrite', false)
-  onConfirmProp(true)
+  props.onConfirm(true)
   useDialogStore().closeDialog()
 }
 </script>

src/components/dialog/content/MissingCoreNodesMessage.test.ts

@@ -30,7 +30,7 @@ const createMockNode = (type: string, version?: string): LGraphNode =>
     outputs: []
   })
 
-describe(MissingCoreNodesMessage.__name ?? 'MissingCoreNodesMessage', () => {
+describe('MissingCoreNodesMessage', () => {
   const mockSystemStatsStore = {
     systemStats: null as { system?: { comfyui_version?: string } } | null,
     refetchSystemStats: vi.fn()

src/components/dialog/content/MissingModelsWarning.vue

@@ -64,7 +64,7 @@ import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
 
 // TODO: Read this from server internal API rather than hardcoding here
@@ -94,7 +94,7 @@ interface ModelInfo {
   folder_path?: string
 }
 
-const { missingModels: missingModelsProp, paths } = defineProps<{
+const props = defineProps<{
   missingModels: ModelInfo[]
   paths: Record<string, string[]>
 }>()
@@ -105,17 +105,14 @@ const doNotAskAgain = ref(false)
 
 function openShowMissingModelsSetting() {
   useDialogStore().closeDialog({ key: 'global-missing-models-warning' })
-  void useDialogService().showSettingsDialog(
-    undefined,
-    'Comfy.Workflow.ShowMissingModelsWarning'
-  )
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingModelsWarning')
 }
 
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 const missingModels = computed(() => {
-  return missingModelsProp.map((model) => {
-    const modelPaths = paths[model.directory]
-    if (model.directory_invalid || !modelPaths) {
+  return props.missingModels.map((model) => {
+    const paths = props.paths[model.directory]
+    if (model.directory_invalid || !paths) {
       return {
         label: `${model.directory} / ${model.name}`,
         url: model.url,
@@ -130,7 +127,7 @@ const missingModels = computed(() => {
       name: model.name,
       directory: model.directory,
       url: model.url,
-      folder_path: modelPaths[0]
+      folder_path: paths[0]
     }
     modelDownloads.value[model.name] = downloadInfo
     if (!whiteListedUrls.has(model.url)) {
@@ -157,7 +154,7 @@ const missingModels = computed(() => {
       progress: downloadInfo.progress,
       error: downloadInfo.error,
       name: model.name,
-      paths: modelPaths,
+      paths: paths,
       folderPath: downloadInfo.folder_path
     }
   })

src/components/dialog/content/MissingNodesContent.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="flex w-[490px] flex-col border-t-1 border-border-default"
-    :class="isCloud ? 'border-b-1' : ''"
+    class="comfy-missing-nodes flex w-[490px] flex-col border-t border-border-default"
+    :class="isCloud ? 'border-b' : ''"
   >
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Description -->
       <div>
-        <p class="m-0 text-sm leading-4 text-muted-foreground">
+        <p class="m-0 text-sm leading-5 text-muted-foreground">
           {{
             isCloud
               ? $t('missingNodes.cloud.description')
@@ -14,32 +14,210 @@
           }}
         </p>
       </div>
+
       <MissingCoreNodesMessage v-if="!isCloud" :missing-core-nodes />
 
-      <!-- Missing Nodes List Wrapper -->
-      <div
-        class="comfy-missing-nodes flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
-      >
+      <!-- QUICK FIX AVAILABLE Section -->
+      <div v-if="replaceableNodes.length > 0" class="flex flex-col gap-2">
+        <!-- Section header with Replace button -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-semibold uppercase text-primary">
+              {{ $t('nodeReplacement.quickFixAvailable') }}
+            </span>
+            <div class="h-2 w-2 rounded-full bg-primary" />
+          </div>
+          <Button
+            v-tooltip.top="$t('nodeReplacement.replaceWarning')"
+            variant="primary"
+            size="md"
+            :disabled="selectedTypes.size === 0"
+            @click="handleReplaceSelected"
+          >
+            <i class="icon-[lucide--refresh-cw] mr-1.5 h-4 w-4" />
+            {{
+              $t('nodeReplacement.replaceSelected', {
+                count: selectedTypes.size
+              })
+            }}
+          </Button>
+        </div>
+
+        <!-- Replaceable nodes list -->
         <div
-          v-for="(node, i) in uniqueNodes"
-          :key="i"
-          class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
+          class="flex max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
         >
-          <span class="text-xs">
-            {{ node.label }}
-          </span>
-          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
+          <!-- Select All row (sticky header) -->
+          <div
+            :class="
+              cn(
+                'sticky top-0 z-10 flex items-center gap-3 border-b border-border-default bg-secondary-background px-3 py-2',
+                pendingNodes.length > 0
+                  ? 'cursor-pointer hover:bg-secondary-background-hover'
+                  : 'opacity-50 pointer-events-none'
+              )
+            "
+            tabindex="0"
+            role="checkbox"
+            :aria-checked="
+              isAllSelected ? 'true' : isSomeSelected ? 'mixed' : 'false'
+            "
+            @click="toggleSelectAll"
+            @keydown.enter.prevent="toggleSelectAll"
+            @keydown.space.prevent="toggleSelectAll"
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              :class="
+                isAllSelected || isSomeSelected
+                  ? 'bg-primary-background'
+                  : 'bg-secondary-background'
+              "
+            >
+              <i
+                v-if="isAllSelected"
+                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+              />
+              <i
+                v-else-if="isSomeSelected"
+                class="icon-[lucide--minus] text-bold text-xs text-base-foreground"
+              />
+            </div>
+            <span class="text-xs font-medium uppercase text-muted-foreground">
+              {{ $t('nodeReplacement.compatibleAlternatives') }}
+            </span>
+          </div>
+
+          <!-- Replaceable node items -->
+          <div
+            v-for="node in replaceableNodes"
+            :key="node.label"
+            :class="
+              cn(
+                'flex items-center gap-3 px-3 py-2',
+                replacedTypes.has(node.label)
+                  ? 'opacity-50 pointer-events-none'
+                  : 'cursor-pointer hover:bg-secondary-background-hover'
+              )
+            "
+            tabindex="0"
+            role="checkbox"
+            :aria-checked="
+              replacedTypes.has(node.label) || selectedTypes.has(node.label)
+                ? 'true'
+                : 'false'
+            "
+            @click="toggleNode(node.label)"
+            @keydown.enter.prevent="toggleNode(node.label)"
+            @keydown.space.prevent="toggleNode(node.label)"
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              :class="
+                replacedTypes.has(node.label) || selectedTypes.has(node.label)
+                  ? 'bg-primary-background'
+                  : 'bg-secondary-background'
+              "
+            >
+              <i
+                v-if="
+                  replacedTypes.has(node.label) || selectedTypes.has(node.label)
+                "
+                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+              />
+            </div>
+            <div class="flex flex-col gap-0.5">
+              <div class="flex items-center gap-2">
+                <span
+                  v-if="replacedTypes.has(node.label)"
+                  class="inline-flex h-4 items-center rounded-full border border-success bg-success/10 px-1.5 text-xxxs font-semibold uppercase text-success"
+                >
+                  {{ $t('nodeReplacement.replaced') }}
+                </span>
+                <span
+                  v-else
+                  class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold uppercase text-primary"
+                >
+                  {{ $t('nodeReplacement.replaceable') }}
+                </span>
+                <span class="text-sm text-foreground">
+                  {{ node.label }}
+                </span>
+              </div>
+              <span class="text-xs text-muted-foreground">
+                {{ node.replacement?.new_node_id ?? node.hint ?? '' }}
+              </span>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Bottom instruction -->
-      <div>
-        <p class="m-0 text-sm leading-4 text-muted-foreground">
-          {{
-            isCloud
-              ? $t('missingNodes.cloud.replacementInstruction')
-              : $t('missingNodes.oss.replacementInstruction')
-          }}
+      <!-- MANUAL INSTALLATION REQUIRED Section -->
+      <div
+        v-if="nonReplaceableNodes.length > 0"
+        class="flex max-h-[200px] flex-col gap-2"
+      >
+        <!-- Section header -->
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-semibold uppercase text-error">
+            {{ $t('nodeReplacement.installationRequired') }}
+          </span>
+          <i class="icon-[lucide--info] text-xs text-error" />
+        </div>
+
+        <!-- Non-replaceable nodes list -->
+        <div
+          class="flex flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+        >
+          <div
+            v-for="node in nonReplaceableNodes"
+            :key="node.label"
+            class="flex items-center justify-between px-4 py-3"
+          >
+            <div class="flex items-center gap-3">
+              <div class="flex flex-col gap-0.5">
+                <div class="flex items-center gap-2">
+                  <span
+                    class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold uppercase text-error"
+                  >
+                    {{ $t('nodeReplacement.notReplaceable') }}
+                  </span>
+                  <span class="text-sm text-foreground">
+                    {{ node.label }}
+                  </span>
+                </div>
+                <span v-if="node.hint" class="text-xs text-muted-foreground">
+                  {{ node.hint }}
+                </span>
+              </div>
+            </div>
+            <Button
+              v-if="node.action"
+              variant="destructive-textonly"
+              size="sm"
+              @click="node.action.callback"
+            >
+              {{ node.action.text }}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom instruction box -->
+      <div
+        class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
+      >
+        <i
+          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
+        />
+        <p class="m-0 text-xs leading-5 text-neutral-foreground">
+          <i18n-t keypath="nodeReplacement.instructionMessage">
+            <template #red>
+              <span class="text-error">{{
+                $t('nodeReplacement.redHighlight')
+              }}</span>
+            </template>
+          </i18n-t>
         </p>
       </div>
     </div>
@@ -47,22 +225,38 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import Button from '@/components/ui/button/Button.vue'
 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 type { MissingNodeType } from '@/types/comfy'
+import { cn } from '@/utils/tailwindUtil'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
 const { missingNodeTypes } = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-// Get missing core nodes for OSS mode
 const { missingCoreNodes } = useMissingNodes()
+const { replaceNodesInPlace } = useNodeReplacement()
+const dialogStore = useDialogStore()
 
-const uniqueNodes = computed(() => {
-  const seenTypes = new Set()
+interface ProcessedNode {
+  label: string
+  hint?: string
+  action?: { text: string; callback: () => void }
+  isReplaceable: boolean
+  replacement?: NodeReplacement
+}
+
+const replacedTypes = ref<Set<string>>(new Set())
+
+const uniqueNodes = computed<ProcessedNode[]>(() => {
+  const seenTypes = new Set<string>()
   return missingNodeTypes
     .filter((node) => {
       const type = typeof node === 'object' ? node.type : node
@@ -75,10 +269,81 @@ const uniqueNodes = computed(() => {
         return {
           label: node.type,
           hint: node.hint,
-          action: node.action
+          action: node.action,
+          isReplaceable: node.isReplaceable ?? false,
+          replacement: node.replacement
         }
       }
-      return { label: node }
+      return { label: node, isReplaceable: false }
     })
 })
+
+const replaceableNodes = computed(() =>
+  uniqueNodes.value.filter((n) => n.isReplaceable)
+)
+
+const pendingNodes = computed(() =>
+  replaceableNodes.value.filter((n) => !replacedTypes.value.has(n.label))
+)
+
+const nonReplaceableNodes = computed(() =>
+  uniqueNodes.value.filter((n) => !n.isReplaceable)
+)
+
+// Selection state - all pending nodes selected by default
+const selectedTypes = ref(new Set(pendingNodes.value.map((n) => n.label)))
+
+const isAllSelected = computed(
+  () =>
+    pendingNodes.value.length > 0 &&
+    pendingNodes.value.every((n) => selectedTypes.value.has(n.label))
+)
+
+const isSomeSelected = computed(
+  () => selectedTypes.value.size > 0 && !isAllSelected.value
+)
+
+function toggleNode(label: string) {
+  if (replacedTypes.value.has(label)) return
+  const next = new Set(selectedTypes.value)
+  if (next.has(label)) {
+    next.delete(label)
+  } else {
+    next.add(label)
+  }
+  selectedTypes.value = next
+}
+
+function toggleSelectAll() {
+  if (isAllSelected.value) {
+    selectedTypes.value = new Set()
+  } else {
+    selectedTypes.value = new Set(pendingNodes.value.map((n) => n.label))
+  }
+}
+
+function handleReplaceSelected() {
+  const selected = missingNodeTypes.filter((node) => {
+    const type = typeof node === 'object' ? node.type : node
+    return selectedTypes.value.has(type)
+  })
+
+  const result = replaceNodesInPlace(selected)
+  const nextReplaced = new Set(replacedTypes.value)
+  const nextSelected = new Set(selectedTypes.value)
+  for (const type of result) {
+    nextReplaced.add(type)
+    nextSelected.delete(type)
+  }
+  replacedTypes.value = nextReplaced
+  selectedTypes.value = nextSelected
+
+  // Auto-close when all replaceable nodes replaced and no non-replaceable remain
+  const allReplaced = replaceableNodes.value.every((n) =>
+    nextReplaced.has(n.label)
+  )
+  if (allReplaced && nonReplaceableNodes.value.length === 0) {
+    dialogStore.closeDialog({ key: 'global-missing-nodes' })
+  }
+}
 </script>

src/components/dialog/content/MissingNodesFooter.vue

@@ -30,8 +30,18 @@
       </i18n-t>
     </div>
 
+    <!-- All nodes replaceable: Skip button (cloud + OSS) -->
+    <div v-if="!hasNonReplaceableNodes" class="flex justify-end gap-1">
+      <Button variant="secondary" size="md" @click="handleGotItClick">
+        {{ $t('nodeReplacement.skipForNow') }}
+      </Button>
+    </div>
+
     <!-- Cloud mode: Learn More + Got It buttons -->
-    <div v-if="isCloud" class="flex w-full items-center justify-between gap-2">
+    <div
+      v-else-if="isCloud"
+      class="flex w-full items-center justify-between gap-2"
+    >
       <Button
         variant="textonly"
         size="sm"
@@ -48,9 +58,9 @@
       }}</Button>
     </div>
 
-    <!-- OSS mode: Open Manager + Install All buttons -->
+    <!-- OSS mode: Manager buttons -->
     <div v-else-if="showManagerButtons" class="flex justify-end gap-1">
-      <Button variant="textonly" @click="openManager">{{
+      <Button variant="textonly" @click="handleOpenManager">{{
         $t('g.openManager')
       }}</Button>
       <PackInstallButton
@@ -80,14 +90,19 @@ import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
+import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+const { missingNodeTypes } = defineProps<{
+  missingNodeTypes?: MissingNodeType[]
+}>()
+
 const dialogStore = useDialogStore()
 const { t } = useI18n()
 
@@ -103,15 +118,18 @@ const handleGotItClick = () => {
 
 function openShowMissingNodesSetting() {
   dialogStore.closeDialog({ key: 'global-missing-nodes' })
-  void useDialogService().showSettingsDialog(
-    undefined,
-    'Comfy.Workflow.ShowMissingNodesWarning'
-  )
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingNodesWarning')
 }
 
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
 const managerState = useManagerState()
+function handleOpenManager() {
+  managerState.openManager({
+    initialTab: ManagerTab.Missing,
+    showToastOnLegacyError: true
+  })
+}
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -131,15 +149,29 @@ const showInstallAllButton = computed(() => {
   return managerState.shouldShowInstallButton.value
 })
 
-const openManager = async () => {
-  await managerState.openManager({
-    initialTab: ManagerTab.Missing,
-    showToastOnLegacyError: true
-  })
-}
+const hasNonReplaceableNodes = computed(
+  () =>
+    missingNodeTypes?.some(
+      (n) =>
+        typeof n === 'string' || (typeof n === 'object' && !n.isReplaceable)
+    ) ?? false
+)
 
-// Computed to check if all missing nodes have been installed
+// Track whether missingNodePacks was ever non-empty (i.e. there were packs to install)
+const hadMissingPacks = ref(false)
+
+watch(
+  missingNodePacks,
+  (packs) => {
+    if (packs && packs.length > 0) hadMissingPacks.value = true
+  },
+  { immediate: true }
+)
+
+// Only consider "all installed" when packs transitioned from non-empty to empty
+// (actual installation happened). Replaceable-only case is handled by Content auto-close.
 const allMissingNodesInstalled = computed(() => {
+  if (!hadMissingPacks.value) return false
   return (
     !isLoading.value &&
     !isInstalling.value &&

src/components/dialog/content/PromptDialogContent.vue

@@ -25,22 +25,17 @@ import { ref } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const {
-  message,
-  defaultValue,
-  onConfirm: onConfirmProp,
-  placeholder
-} = defineProps<{
+const props = defineProps<{
   message: string
   defaultValue: string
   onConfirm: (value: string) => void
   placeholder?: string
 }>()
 
-const inputValue = ref<string>(defaultValue)
+const inputValue = ref<string>(props.defaultValue)
 
 const onConfirm = () => {
-  onConfirmProp(inputValue.value)
+  props.onConfirm(inputValue.value)
   useDialogStore().closeDialog()
 }
 

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -162,7 +162,7 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -173,7 +173,7 @@ const { isInsufficientCredits = false } = defineProps<{
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
 const dialogStore = useDialogStore()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
@@ -266,7 +266,7 @@ async function handleBuy() {
       : isSubscriptionEnabled()
         ? 'subscription'
         : 'credits'
-    dialogService.showSettingsDialog(settingsPanel)
+    settingsDialog.show(settingsPanel)
   } catch (error) {
     console.error('Purchase failed:', error)
 

src/components/dialog/content/credit/CreditTopUpOption.test.ts

@@ -25,7 +25,7 @@ const mountOption = (
     }
   })
 
-describe(CreditTopUpOption.__name ?? 'CreditTopUpOption', () => {
+describe('CreditTopUpOption', () => {
   it('renders credit amount and description', () => {
     const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
     expect(wrapper.text()).toContain('5,000')

src/components/dialog/content/error/FindIssueButton.vue

@@ -11,20 +11,23 @@ import { computed } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 
-const { errorMessage, repoOwner, repoName } = defineProps<{
+const props = defineProps<{
   errorMessage: string
   repoOwner: string
   repoName: string
 }>()
 
-const queryString = computed(() => `${errorMessage} is:issue`)
+const queryString = computed(() => props.errorMessage + ' is:issue')
 
+/**
+ * Open GitHub issues search and track telemetry.
+ */
 const openGitHubIssues = () => {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'error_dialog_find_existing_issues_clicked'
   })
   const query = encodeURIComponent(queryString.value)
-  const url = `https://github.com/${repoOwner}/${repoName}/issues?q=${query}`
+  const url = `https://github.com/${props.repoOwner}/${props.repoName}/issues?q=${query}`
   window.open(url, '_blank')
 }
 </script>

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

@@ -1,9 +1,5 @@
 <template>
-  <PanelTemplate
-    value="About"
-    class="about-container"
-    data-testid="about-panel"
-  >
+  <div class="about-container flex flex-col gap-2" data-testid="about-panel">
     <h2 class="mb-2 text-2xl font-bold">
       {{ $t('g.about') }}
     </h2>
@@ -32,7 +28,7 @@
       v-if="systemStatsStore.systemStats"
       :stats="systemStatsStore.systemStats"
     />
-  </PanelTemplate>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -43,8 +39,6 @@ import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 
-import PanelTemplate from './PanelTemplate.vue'
-
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
 </script>

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

@@ -1,13 +1,9 @@
 <template>
-  <PanelTemplate value="Keybinding" class="keybinding-panel">
-    <template #header>
-      <SearchBox
-        v-model="filters['global'].value"
-        :placeholder="
-          $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
-        "
-      />
-    </template>
+  <div class="keybinding-panel flex flex-col gap-2">
+    <SearchBox
+      v-model="filters['global'].value"
+      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
+    />
 
     <DataTable
       v-model:selection="selectedCommandData"
@@ -135,7 +131,7 @@
       <i class="pi pi-replay" />
       {{ $t('g.resetAll') }}
     </Button>
-  </PanelTemplate>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -159,7 +155,6 @@ import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
-import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 
 const filters = ref({
@@ -268,7 +263,7 @@ async function saveKeybinding() {
   const commandId = currentEditingCommand.value?.id
   const combo = newBindingKeyCombo.value
   cancelEdit()
-  if (!combo || commandId == null) return
+  if (!combo || commandId == undefined) return
 
   const updated = keybindingStore.updateKeybindingOnCommand(
     new KeybindingImpl({ commandId, combo })

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

@@ -1,5 +1,5 @@
 <template>
-  <TabPanel value="Credits" class="credits-container h-full">
+  <div class="credits-container h-full">
     <!-- Legacy Design -->
     <div class="flex h-full flex-col">
       <h2 class="mb-2 text-2xl font-bold">
@@ -102,7 +102,7 @@
         </Button>
       </div>
     </div>
-  </TabPanel>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -110,7 +110,6 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
-import TabPanel from 'primevue/tabpanel'
 import { computed, ref, watch } from 'vue'
 
 import UserCredit from '@/components/common/UserCredit.vue'

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

@@ -1,21 +0,0 @@
-<template>
-  <TabPanel :value class="h-full w-full" :class="panelClass">
-    <div class="flex h-full w-full flex-col gap-2">
-      <slot name="header" />
-      <ScrollPanel class="h-0 grow pr-2">
-        <slot />
-      </ScrollPanel>
-      <slot name="footer" />
-    </div>
-  </TabPanel>
-</template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import TabPanel from 'primevue/tabpanel'
-
-const { value, class: panelClass } = defineProps<{
-  value: string
-  class?: string
-}>()
-</script>

src/components/dialog/content/setting/SettingItem.test.ts

@@ -17,7 +17,7 @@ vi.mock('@/utils/formatUtil', () => ({
   normalizeI18nKey: vi.fn()
 }))
 
-describe(SettingItem.__name ?? 'SettingItem', () => {
+describe('SettingItem', () => {
   const mountComponent = (props: Record<string, unknown>, options = {}) => {
     return mount(SettingItem, {
       global: {